/* =========================================================================
   The pages: builders, palettes, config, users, home. Tokens only. The
   list pages share the core's cards and the console's data table.
   ========================================================================= */
.subtle-list { list-style: none; margin: 0; padding: 0; }
.subtle-list li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.subtle-list li:last-child { border-bottom: none; }
.tree { margin: 0; padding-left: 0; list-style: none; }
.tree-node { padding: 6px 0 6px 12px; border-left: 1px solid var(--line); margin-left: 6px; }
.tree-row { display: flex; align-items: center; gap: 8px; }
.tree-row .btn-row { margin: 0; }
.swatch-cell { display: inline-block; width: 18px; height: 18px; vertical-align: middle; border: 1px solid var(--line-bold); border-radius: var(--r-xs); background: var(--swatch, var(--bg-2)) center / cover; margin-right: 8px; }

/* ---- The component gallery (#/dev/ui) ------------------------------------- */
.gallery-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gallery-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: 10px; color: var(--fg-mute); }
.gallery-icon .icon { color: var(--fg); }
.gallery-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gallery-row:last-child { margin-bottom: 0; }
.gallery-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .gallery-two { grid-template-columns: 1fr; } }
.gallery-note { font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.04em; }

/* ---- Community home (site-home.js) ------------------------------------------- */
.home-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 20px; }
.home-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
a.stat-card { display: block; color: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
a.stat-card:hover { border-color: var(--line-hover); background: var(--bg-2); color: inherit; }
a.stat-card:hover .stat-label { color: var(--amber); }
.stat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.home-two .card { margin-bottom: 0; }
.home-two .card-header a { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { border-bottom: 1px solid var(--line-soft); }
.attention-list li:last-child { border-bottom: 0; }
.attention-list a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; color: var(--fg); }
.attention-list a:hover { color: var(--amber); }
.attention-list a > span:nth-child(2) { flex: 1 1 auto; }
.attention-list .icon { color: var(--fg-dim); }
.attention-n { min-width: 44px; font-size: 16px; font-weight: 600; color: var(--amber); text-align: right; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.activity-row:last-child { border-bottom: 0; }
.activity-when { flex: none; width: 84px; font-size: 11px; color: var(--fg-dim); }
.activity-what { min-width: 0; overflow-wrap: anywhere; }
.activity-row.is-failed .activity-what { color: var(--fg-mute); }
.chip.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-mute); }
@media (max-width: 900px) { .home-two { grid-template-columns: 1fr; } }

/* ---- Communities overview (communities-page.js) ------------------------------- */
.communities-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
a.community-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; margin: 0; color: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
a.community-card:hover { border-color: var(--line-hover); background: var(--bg-2); }
.community-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.community-card-head h3 { font-size: 15px; }
.community-card-head h3::first-letter { color: var(--amber); }
.community-card-stats { display: flex; gap: 24px; }
.community-card-stats > div { display: flex; flex-direction: column; }
.community-card-stats .stat-value { font-size: 22px; margin: 0; }
.community-card-stats .is-warn .stat-value { color: var(--amber); }
.community-card-foot { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }

/* ---- Page tabs (builder.js): a strip under the header, like the drawer's. */
.page-tabs { display: flex; gap: 2px; margin: -8px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.page-tab { padding: 9px 12px 8px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--fg-mute); font: 600 13px/1.2 var(--f-sans); white-space: nowrap; cursor: pointer; }
.page-tab:hover { color: var(--fg); }
.page-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--amber); }
.page-tab:focus-visible { outline: 2px solid var(--amber-line); outline-offset: -2px; }
.section-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.section-row .section-heading { margin: 0; }

/* ---- Builders (builders.js, builder.js, floorplan.js) --------------------- */
.builders-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
a.builder-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0; color: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
a.builder-card:hover { border-color: var(--line-hover); background: var(--bg-2); }
.builder-logo { width: 48px; height: 48px; object-fit: contain; border-radius: var(--r-sm); background: var(--bg-0); border: 1px solid var(--line); flex: none; }
.builder-initials { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--r-sm); background: var(--bg-3); border: 1px solid var(--line-bold); font: 700 15px var(--f-mono); letter-spacing: 0.06em; color: var(--amber); }
.builder-card-main { min-width: 0; flex: 1 1 auto; }
.builder-name { font-weight: 700; font-size: 14.5px; }
.builder-name::first-letter { color: var(--amber); }
.builder-where { font-size: 12.5px; color: var(--fg-mute); }
.builder-meta { margin-top: 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-dim); }
.builder-card-go { color: var(--fg-dim); flex: none; }
.thumb-strip { display: inline-flex; gap: 3px; align-items: center; }
.thumb-strip img { width: 40px; height: 30px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--bg-2); }
.thumb-more { font-family: var(--f-mono); font-size: 10px; color: var(--fg-dim); margin-left: 4px; }
.list-rows li a { color: var(--fg); }
.list-rows li a:hover strong { color: var(--amber); }
.card .list-rows { padding: 4px 16px; }
.floorplan-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.elevation-card { padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.elevation-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.elevation-title { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.elevation-card arc-files .files-head { margin-top: 4px; }
.elevation-card .tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.drop-zone { position: relative; margin: 6px 0 14px; border: 1px dashed var(--line-bold); border-radius: var(--r-md); padding: 8px; }
.drop-zone.is-drop { border-color: var(--amber); background: var(--amber-soft); }
.drop-zone .tile-drop-btn { width: 100%; min-height: 84px; }
.pending-files { list-style: none; margin: 6px 0 0; padding: 0 6px 4px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg); }
.pending-files li { display: flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .floorplan-grid { grid-template-columns: 1fr; } .elevation-grid { grid-template-columns: 1fr; } }

/* ---- Palettes (palettes.js, palette-theme.js, palette-colors.js, …) --------- */
.palette-groups { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.palette-group { margin: 0; }
.palette-group.is-archived { opacity: 0.7; }
.palette-group.is-target { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-line); }
.theme-rows { list-style: none; margin: 0; padding: 4px 8px; }
.theme-row { display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 8px; border-bottom: 1px solid var(--line-soft); }
.theme-row:last-child { border-bottom: 0; }
.theme-row.is-archived .theme-row-main { opacity: 0.7; }
.theme-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: var(--fg); }
.theme-row-main:hover strong { color: var(--amber); }
.theme-row-meta { font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); }
.inline-add { display: flex; gap: 8px; align-items: center; margin: -6px 0 16px; flex-wrap: wrap; }
.inline-add input { min-width: 220px; }

/* The matrix: a column per variant, a row per type; the corner and first column stay put. */
.matrix-scroll { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); }
.matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.matrix th, .matrix td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); vertical-align: middle; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-2); text-align: left; font: 600 12.5px var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--fg); min-width: 200px; }
.matrix thead th.is-archived { opacity: 0.6; }
.matrix .matrix-corner, .matrix .matrix-type { position: sticky; left: 0; z-index: 1; background: var(--bg-2); min-width: 120px; width: 120px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); text-align: left; }
.matrix .matrix-corner { z-index: 3; }
.matrix tbody tr:hover td { background: var(--bg-hover); }
.matrix td arc-picker { min-width: 184px; }
.matrix td .picker-field { background: transparent; border-color: transparent; }
.matrix td .picker-field:hover { border-color: var(--line-bold); background: var(--bg-0); }
.matrix-variant { display: flex; align-items: center; gap: 6px; }
.matrix-variant-name { background: none; border: 0; padding: 0; color: var(--fg); font: 700 13px var(--f-sans); cursor: text; text-align: left; }
.matrix-variant-name:disabled { cursor: default; }
.matrix-variant-name:hover:not(:disabled) { color: var(--amber); }
.matrix-variant-lots { margin-left: auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-dim); white-space: nowrap; }
.matrix-rename { width: 120px; padding: 2px 6px; font-size: 13px; }
.variant-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.variant-card { margin: 0; }
.variant-card.is-archived { opacity: 0.7; }
.variant-card .card-header { padding: 10px 14px; }
.variant-strip { display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: wrap; }
.variant-rows { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.variant-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; }

/* Colours: swatch tiles. */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.color-tile { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0 0 10px; text-align: left; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; cursor: pointer; color: var(--fg); font: inherit; }
.color-tile:hover { border-color: var(--line-hover); background: var(--bg-2); }
.color-tile.is-archived { opacity: 0.6; }
.color-tile-swatch { display: block; height: 72px; background: var(--bg-3) center / cover no-repeat; border-bottom: 1px solid var(--line); }
.color-tile-name { padding: 0 10px; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-tile-vendor { padding: 0 10px; font-size: 11.5px; color: var(--fg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-tile .badge { margin: 0 10px; align-self: flex-start; }
.color-code-row { display: flex; gap: 8px; align-items: center; }
.color-code-row input[name="code"] { flex: 1 1 auto; }
.color-code-row input[type="color"] { width: 42px; height: 36px; padding: 2px; border: 1px solid var(--line-bold); border-radius: var(--r-sm); background: var(--bg-0); cursor: pointer; }
.color-photo img { max-width: 100%; max-height: 180px; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; margin-bottom: 8px; }
.types-table .drag-cell { width: 28px; }
.drag-handle { display: inline-flex; color: var(--fg-dim); cursor: grab; }
.types-table tr.is-dragging { opacity: 0.4; }
.types-table tr.is-over td { box-shadow: inset 0 2px 0 var(--amber); }

/* ---- Config: community setup, map editor, options, importer ---------------- */
.page-tab-count { color: var(--fg-dim); font-weight: 400; }
.map-editor { margin-bottom: 18px; }
.map-editor-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--line); }
.map-editor-preview { position: relative; min-height: 320px; background: var(--bg-2); border-right: 1px solid var(--line); }
.map-editor-preview arc-map { position: absolute; inset: 0 0 48px 0; }
.map-editor-view { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg-1); border-top: 1px solid var(--line); }
.map-editor-view .section-label { margin: 0; }
.map-editor-side { padding: 14px 18px; }
.map-editor-side textarea { width: 100%; }
.map-editor-layers .toggle-row .row { gap: 12px; }
.tile-edit { padding: 8px 0 10px; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.tile-edit-row { display: flex; align-items: center; gap: 8px; }
.tile-edit-row input[name="label"] { flex: 1 1 auto; min-width: 0; }
.tile-edit-row input[name="name"] { width: 120px; }
.tile-edit-row input[type="range"] { flex: 1 1 auto; accent-color: var(--amber); }
.tile-test { min-width: 90px; }
.options-split { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.options-list { margin: 0; }
.options-list-head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.options-list-head .toolbar-search { flex: 1 1 auto; min-width: 0; }
.options-list-head .filter-select { flex: none; }
.options-attrs { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; }
.options-attr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-xs); cursor: pointer; }
.options-attr:hover { background: var(--bg-hover); }
.options-attr.is-current { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
.options-attr-main { display: flex; flex-direction: column; min-width: 0; }
.options-attr-count { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-dim); white-space: nowrap; }
.options-attr-count.is-none { color: var(--warn); }
.options-detail { margin: 0; }
.options-detail .toggle-row.is-archived { opacity: 0.55; }
.import-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.import-drop { margin: 0 0 16px; }
.import-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; }
.import-stat .stat-value { font-size: 24px; }
.import-stat.tone-ok::before { background: var(--ok); } .import-stat.tone-info::before { background: var(--info); } .import-stat.tone-warn::before { background: var(--warn); } .import-stat.tone-err::before { background: var(--err); }
.import-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.import-map { position: relative; min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.import-map arc-map { position: absolute; inset: 0; }
.import-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--line-bold); border-radius: var(--r-sm); z-index: 5; }
.import-legend .legend-swatch.tone-ok { background: var(--ok); } .import-legend .legend-swatch.tone-info { background: var(--info); } .import-legend .legend-swatch.tone-warn { background: var(--warn); } .import-legend .legend-swatch.tone-err { background: var(--err); } .import-legend .legend-swatch.tone-dim { background: var(--fg-dim); }
.icon.spin { animation: spin 900ms linear infinite; }
@media (max-width: 900px) { .map-editor-grid, .options-split, .import-grid, .import-controls { grid-template-columns: 1fr; } .map-editor-preview { border-right: 0; border-bottom: 1px solid var(--line); } .import-counts { grid-template-columns: repeat(2, 1fr); } }

/* ---- Attributes drawer: options in order ------------------------------------- */
.option-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.option-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--bg-0); }
.option-row.is-archived { opacity: 0.6; }
.option-row.is-dragging { opacity: 0.4; }
.option-row.is-over { border-color: var(--amber); box-shadow: inset 0 2px 0 var(--amber); }
.option-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.option-sites .chip { font-size: 10px; padding: 0 5px; }

/* ---- Form editor ---------------------------------------------------------------- */
.form-editor { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.form-editor .card { margin: 0; }
.form-editor-search { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.form-editor-search .toolbar-search { flex: 1 1 auto; }
.form-editor-list { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.form-editor-item, .form-editor-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-xs); }
.form-editor-item:hover { background: var(--bg-hover); }
.form-editor-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.form-editor-row { background: var(--bg-0); border: 1px solid var(--line-soft); flex-wrap: wrap; }
.form-editor-row.is-dragging { opacity: 0.4; }
.form-editor-row.is-inherited { background: var(--bg-1); }
.form-editor-row.is-inherited .form-editor-item-main strong { color: var(--fg-mute); }
.form-editor-row .drag-handle.is-fixed { cursor: default; color: var(--fg-mute); }
.form-editor-item-main .badge { align-self: flex-start; margin-top: 4px; }
.form-editor-row.is-over { border-color: var(--amber); box-shadow: inset 0 2px 0 var(--amber); }
.form-editor-row .form-editor-item-main { flex: 1 1 180px; }
.form-editor-hint { flex: 1 1 160px; min-width: 120px; padding: 4px 8px; font-size: 12px; }
.form-editor-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg-2); }
.form-editor-preview { margin-top: 18px; }
@media (max-width: 900px) { .form-editor { grid-template-columns: 1fr; } }

/* ---- Users (users.js): the communities list in the drawer, the chips in the table ---- */
.user-sites { display: flex; flex-direction: column; margin: 0 0 14px; border-top: 1px solid var(--line-soft); }
.user-site-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.user-site-name { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: 13.5px; }
.user-site-custom { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--warn); }
.user-site-row arc-segmented { flex: none; }
.cell-chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cell-chips .chip-list { gap: 4px; }
.cell-chips .chip { font-family: var(--f-sans); font-size: 11.5px; padding: 0 6px; white-space: nowrap; }
.chip-more { font-family: var(--f-mono); font-size: 11px; color: var(--fg-mute); padding: 0 4px; }

/* ---- Audit (audit.js): the family chips are toggles ---- */
.audit-families { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip-btn { cursor: pointer; font-family: var(--f-sans); font-size: 12px; padding: 3px 10px; }
.chip-btn:hover { border-color: var(--fg-dim); }
.chip-btn[aria-pressed="true"] { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.chip-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }