/* Home — the sandbox hero (redesign Card 12 part 1, doc 72). All-new .home-* selectors; reuses the shared
   C1 shell tokens (portal/shell.css — --bg/--panel/--ink/--muted/--line/--accent/…), so light + dark come
   for free from the shell variables. Nothing here overrides a shell rule. Wide content (grids, timeline,
   tables) scrolls inside its own .scroll-x (shell) rather than pushing the page sideways. */

.home-shell { display: block; }
.home-shell .loading { color: var(--muted); }
.home-error { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); padding: var(--space-4); border-radius: var(--radius-md); }

/* section label — ONE per section (rule 5), never per figure */
.home-sec-label { font-size: var(--fs-micro); letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: var(--fw-semibold); margin: 0 0 8px; }
.home-note { color: var(--muted); font-size: var(--fs-small); margin: 6px 0; }
.home-footnote { color: var(--muted); font-size: var(--fs-micro); margin: 18px 0 0; line-height: var(--lh-body); }
.home-muted { color: var(--muted); }

/* three-state seam label (rule 15) */
.home-seam { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted); padding: 8px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; }
.home-seam .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.home-seam--draft .dot { background: var(--accent2); }
.home-seam--committed .dot { background: var(--warn-ink); }

/* onboarding session note (ruling 2) */
.home-onboard-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px; }

/* draft action bar (re-run count · save / load / discard) */
.home-draftbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.home-rerun { font-size: var(--fs-small); color: var(--ink); }
.home-rerun b { color: var(--accent); font-weight: var(--fw-bold); }
.home-draftbar-sp { flex: 1 1 auto; }
.home-draft-saved { font-size: var(--fs-micro); color: var(--accent2); }
.home-draftbar .home-linkbtn[disabled] { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

/* direction override register + posture control chips */
.home-register { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.home-register-list { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-small); }
.home-register-list li { margin: 4px 0; }
.posture-btn { border: 1px solid transparent; cursor: pointer; font-family: var(--font-sans); }
.posture-btn:hover { border-color: var(--accent); }
.posture-btn.is-proposed { border-style: dashed; border-color: var(--accent); }

/* Current | Committed | Draft toggle */
.home-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 16px; }
.home-toggle-btn { border: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-small); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; }
.home-toggle-btn.is-active { background: var(--accent); color: var(--on-accent); font-weight: var(--fw-semibold); }
.home-toggle-btn:not(.is-active):hover { color: var(--accent); }

/* drivers strip */
.home-drivers { margin-bottom: 18px; }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.home-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.home-chip b { font-weight: var(--fw-bold); color: var(--accent); }
.home-chip.is-empty { background: transparent; color: var(--muted); }
.home-linkbtn { border: 0; background: transparent; color: var(--accent); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; padding: 4px 0; }
.home-linkbtn:hover { text-decoration: underline; }
.home-drivers .home-linkbtn { margin-top: 8px; }

/* direction grid */
.home-direction { margin-bottom: 18px; }
/* Wave 6 1.1 — the collapsed one-line summary control */
.home-direction-summary { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-small); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; }
.home-direction-summary:hover { border-color: var(--accent); color: var(--accent); }
.home-direction-summary .home-direction-caret { color: var(--muted); font-size: var(--fs-micro); }
.home-direction-summary.is-open { margin-bottom: 8px; }
/* Wave 6 1.4 — the lens hand-off filter chip */
.home-filterchip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink); background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px; margin-bottom: 12px; }
.home-filterchip b { color: var(--accent); }
.home-multitab-note { font-size: var(--fs-small); }
.home-grid { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.home-grid th, .home-grid td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; white-space: nowrap; }
.home-grid th { color: var(--muted); font-weight: var(--fw-semibold); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.4px; }
.posture { display: inline-block; font-size: var(--fs-micro); border-radius: var(--radius-sm); padding: 2px 8px; text-transform: capitalize; }
.posture--grow { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semibold); }
.posture--maintain { background: transparent; color: var(--muted); }
.posture--reduce { background: var(--warn-bg); color: var(--warn-ink); }
.posture--exit { background: var(--warn-bg); color: var(--danger); }
.posture.is-proposed { border: 1px dashed var(--accent); }

/* W3-43 — region header drill control + metro drill-down panel */
.home-dir-region { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.home-dir-region:hover { color: var(--accent); }
.home-dir-region.is-drilled { color: var(--accent); }
.home-dir-caret { color: var(--muted); font-size: var(--fs-micro); }
.home-dir-region:hover .home-dir-caret, .home-dir-region.is-drilled .home-dir-caret { color: var(--accent); }
.home-dir-drill { margin: 10px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.home-dir-drill-head { margin: 0 0 8px; font-size: var(--fs-small); color: var(--ink); }
.home-dir-drill-table { font-size: var(--fs-small); }
.home-dir-drill-table th { white-space: nowrap; }

/* headline */
.home-headline { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-5); margin-bottom: 18px; }
.home-headline.is-hard { border-left: 4px solid var(--danger); }
.home-headline.is-interim { border-left: 4px solid var(--warn-ink); }
.home-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0 0 10px; color: var(--ink); font-weight: var(--fw-bold); }
.home-badge { display: inline-block; font-size: var(--fs-micro); background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); padding: 2px 8px; margin-right: 8px; }
.home-primary { display: inline-block; margin-top: 12px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius-sm); padding: 9px 18px; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
.home-primary:hover { filter: brightness(1.05); }
.home-primary[disabled] { opacity: 0.5; cursor: not-allowed; }

/* W3-16 / R17 — the ranked constraint list (replaces the single headline) */
.home-constraints-lead { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 0 0 6px; color: var(--ink); font-weight: var(--fw-bold); }
.home-constraints-basis { margin: 0 0 12px; }

/* ux-see (task C) — the ⓘ affordance that carries a basis / "how derived" line without a second paragraph */
.home-infotip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; font-size: var(--fs-micro); font-weight: var(--fw-regular); color: var(--muted); border: 1px solid var(--line); border-radius: 50%; cursor: help; vertical-align: middle; }
.home-infotip:hover, .home-infotip:focus { color: var(--accent); border-color: var(--accent); outline: none; }

/* ux-see (task A) — the single "Details" expander that holds everything below the one question */
.home-details { margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.home-details > .home-details-summary { cursor: pointer; list-style: none; padding: 14px var(--space-5); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; display: flex; align-items: center; gap: 8px; }
.home-details > .home-details-summary::-webkit-details-marker { display: none; }
.home-details > .home-details-summary::before { content: "▸"; color: var(--muted); font-size: var(--fs-micro); }
.home-details[open] > .home-details-summary::before { content: "▾"; }
.home-details > .home-details-summary:hover { color: var(--accent); }
.home-details-body { padding: 4px var(--space-5) var(--space-5); border-top: 1px solid var(--line); }
.home-constraints { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-constraint { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head act" "gap act"; align-items: center; gap: 4px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; background: var(--bg); }
.home-constraint.is-indraft { border-style: dashed; border-color: var(--accent); }
.home-constraint-head { grid-area: head; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-constraint-site { font-weight: var(--fw-semibold); color: var(--ink); }
.home-constraint-class { font-size: var(--fs-micro); text-transform: capitalize; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px 8px; }
.home-constraint-when { font-size: var(--fs-small); color: var(--ink); }
.home-constraint-when.is-today { color: var(--danger); font-weight: var(--fw-semibold); }
.home-constraint-draft { font-size: var(--fs-micro); color: var(--accent); border: 1px dashed var(--accent); border-radius: var(--radius-sm); padding: 1px 8px; }
.home-constraint-gap { grid-area: gap; font-size: var(--fs-small); color: var(--ink); }
.home-constraint .home-primary { grid-area: act; margin-top: 0; white-space: nowrap; }
/* closed-by-committed (Committed view re-evaluation) */
.home-constraints-closed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.home-closed-list { margin: 0; padding-left: 18px; font-size: var(--fs-small); color: var(--muted); }
.home-closed-list li { margin: 3px 0; }
/* watch list — over the trigger, or breaching beyond the plan window */
.home-watch { margin-top: 14px; }
.home-watch > summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); font-weight: var(--fw-semibold); }
.home-watch > summary:hover { color: var(--accent); }
.home-watch-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.home-watch-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--fs-small); }
.home-watch-row .home-linkbtn { margin-left: auto; }

/* W3-10 — per-toggle body: Committed "what's approved and not yet built" + Draft working-changes panel */
.home-committed, .home-draft-view { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; background: var(--panel); }
.home-committed-table td { white-space: normal; }
.home-draft-view { border-left: 4px solid var(--accent); }
.home-draft-changes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.home-draft-change { font-size: var(--fs-small); color: var(--ink); border-left: 2px dashed var(--accent); padding: 2px 0 2px 10px; }

/* timeline | map switch */
.home-viewswitch { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.home-view-btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-small); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; }
.home-view-btn.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: var(--fw-semibold); }

/* timeline (SVG-free grid of year cells) */
.home-timeline { margin-bottom: 18px; }
.home-tl { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.home-tl th, .home-tl td { border: 1px solid var(--line); padding: 0; text-align: center; }
.home-tl th { padding: 4px 8px; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.home-tl .tl-site { text-align: left; padding: 6px 10px; white-space: nowrap; font-weight: var(--fw-medium); }
.tl-cell { width: 46px; height: 26px; }
.tl-within { background: var(--accent-soft); }
.tl-over_trigger { background: var(--warn-bg); }
.tl-out_of_room { background: var(--danger); }
.tl-unknown { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--line) 4px, var(--line) 5px); }
.tl-rail { color: var(--accent2); font-size: var(--fs-micro); margin-left: 6px; }
/* lease markers (I.3.c): a ⌂ on the year cell where a lease expires, and the earliest lease on the site cell */
.tl-cell { position: relative; text-align: center; }
.tl-lease { color: var(--warn-ink); font-size: var(--fs-micro); }
.tl-leasemark { color: var(--warn-ink); font-size: var(--fs-micro); margin-left: 6px; }
.home-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: var(--fs-micro); color: var(--muted); }
.home-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.home-legend .lg.within { background: var(--accent-soft); }
.home-legend .lg.over_trigger { background: var(--warn-bg); }
.home-legend .lg.out_of_room { background: var(--danger); }
.home-legend .lg.railmark { background: var(--accent2); }
.home-legend .lg.leasemark { background: transparent; color: var(--warn-ink); width: auto; height: auto; text-align: center; }
.home-timinggap { margin-top: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-small); }
.home-timinggap p { margin: 4px 0; }
/* finding M-H-04 — the committed project reference is a link (id · name), never a bare id. */
.home-committed-link { color: var(--accent); white-space: nowrap; font-weight: var(--fw-medium); }
.home-rails { margin: 8px 0 0; padding-left: 18px; font-size: var(--fs-small); }
.home-rails li { margin: 4px 0; }

/* map */
.home-map { margin-bottom: 18px; }
.home-map-box { width: 100%; height: 360px; }
.chart-legend-host { margin-top: 8px; }
.home-maplegend-state { color: var(--muted); margin-left: 10px; }

/* proposed-solution strip */
.home-proposed { margin-bottom: 18px; }
.home-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.home-tile { flex: 1 1 140px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; }
.home-tile .tl { display: block; font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.home-tile .tv { display: block; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--ink); margin-top: 4px; }

/* site table */
.home-sites { margin-bottom: 18px; }
.home-sitetable { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.home-sitetable th, .home-sitetable td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.home-sitetable th { color: var(--muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.4px; }
.home-risk-pending { font-size: var(--fs-micro); color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 1px 6px; }
.home-risk-score { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px 6px; }
.home-draftpill { font-size: var(--fs-micro); background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); padding: 1px 8px; }

/* options drawer + workbench panel (slide over Home) */
.home-drawer-scrim { position: fixed; inset: 0; background: rgba(12,16,22,0.45); display: flex; justify-content: flex-end; z-index: 50; }
.home-drawer, .home-panel { background: var(--panel); width: min(560px, 100%); max-width: 100%; height: 100%; overflow-y: auto; padding: 24px; box-shadow: var(--shadow); position: relative; }
.home-panel { width: min(720px, 100%); }
.home-drawer-x { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.home-drawer-x:hover { color: var(--ink); }
.home-drawer-headline { font-size: var(--fs-h2); font-weight: var(--fw-semibold); margin: 6px 0 12px; }
.home-opt { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; }
.home-opt-h { display: flex; align-items: center; gap: 10px; }
.home-opt-s { color: var(--muted); font-size: var(--fs-small); margin: 6px 0 10px; }
.home-opt-figs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.home-opt-figs span { font-size: var(--fs-micro); color: var(--muted); display: inline-flex; flex-direction: column; }
.home-opt-figs b { font-size: var(--fs-small); color: var(--ink); font-weight: var(--fw-bold); }
.home-opt .home-primary { margin-top: 0; margin-right: 8px; }
.home-opt-breakdown { font-size: var(--fs-micro); color: var(--muted); margin: -4px 0 12px; padding: 8px 10px; border-left: 2px solid var(--line); background: var(--surface-2, transparent); border-radius: var(--radius-sm); }
.home-opt-breakdown b { color: var(--ink); }
.home-ko { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.home-ko b { color: var(--ink); display: block; margin-bottom: 4px; }

/* research provenance panel (card demo-research-bake): the sourced-figure block inside a drawer option */
.home-research { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px; }
.home-badge-research { background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 600; white-space: normal; margin-bottom: 8px; }
.home-research-gap { color: var(--ink); }
.home-research-gap b, .home-research-src b, .home-research-gaps b { color: var(--ink); }
.home-research-src a { color: var(--link, var(--ink)); text-decoration: underline; }
.home-research-gaps { color: var(--muted); }
.home-absorb-na { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; color: var(--muted); font-size: var(--fs-small); }
.home-gapped .home-opt-h { margin-top: 8px; }

/* toast (the honest "saved to your computer" note) */
.home-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--radius-md); font-size: var(--fs-small); box-shadow: var(--shadow); z-index: 60; transition: opacity 0.4s; }
.home-toast.is-out { opacity: 0; }

@media (max-width: 720px) {
  .home-drawer, .home-panel { width: 100%; }
  .home-tile { flex-basis: 100%; }
}

/* Wave 7b Part 3 (finding 17) — drawer figure definitions + per-option "How is this derived?" panel. */
.home-i{display:inline-block;margin-left:3px;color:var(--muted);cursor:help;font-size:.85em;}
.home-i:hover,.home-i:focus{color:var(--accent);}
.home-derive{margin:6px 0 10px;font-size:var(--fs-small);}
.home-derive>summary{cursor:pointer;color:var(--accent);font-size:var(--fs-small);}
.home-derive-dl{margin:8px 0 0;display:grid;gap:4px;}
.home-derive-dl>div{display:grid;grid-template-columns:120px 1fr;gap:8px;}
.home-derive-dl dt{color:var(--muted);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.4px;}
.home-derive-dl dd{margin:0;font-size:var(--fs-small);}
@media (max-width:560px){.home-derive-dl>div{grid-template-columns:1fr;}}

/* Wave 7b Part 2 (findings 41/24) — request-in-review row pill + tile link, and the drawer chosen marker. */
.home-reqpill{display:inline-block;font-size:var(--fs-micro);color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 9px;text-decoration:none;}
.home-reqpill:hover{background:var(--accent-soft);}
.home-reqlink{color:var(--accent);text-decoration:none;font-weight:var(--fw-semibold);}
.home-reqlink:hover{text-decoration:underline;}
.home-opt.is-chosen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.home-chosen-badge{display:inline-block;margin-left:8px;font-size:var(--fs-micro);color:var(--on-accent);background:var(--accent);border-radius:999px;padding:1px 8px;}

/* ux-options (Wave 2) — the two-layer option card. LAYER 1 (.home-opt-summary) is always visible: the label,
   the ONE headline figure, the recommendation badge, the adjacency phrase, the disruption category. LAYER 2
   (.home-opt-more) folds the full detail one tap away. */
.home-demo-label{display:flex;align-items:center;gap:2px;margin:2px 0 12px;}
.home-demo-label .home-badge{margin-right:0;white-space:normal;}
.home-opt-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;}
.home-opt-label{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--ink);}
.home-opt-headfig{margin-left:auto;display:inline-flex;flex-direction:column;align-items:flex-end;text-align:right;}
.home-headfig-k{font-size:var(--fs-micro);color:var(--muted);}
.home-opt-headfig b{font-size:var(--fs-body);color:var(--ink);font-weight:var(--fw-bold);line-height:1.1;}
.home-rec-badge{display:inline-block;font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--on-accent);background:var(--accent);border-radius:999px;padding:1px 9px;}
.home-opt-adj,.home-opt-disr{flex-basis:100%;margin:2px 0 0;font-size:var(--fs-small);color:var(--muted);}
.home-opt-adj b,.home-opt-disr b{color:var(--ink);font-weight:var(--fw-semibold);}
.home-opt.is-recommended{border-color:var(--accent);}
.home-opt-more{margin:12px 0 0;font-size:var(--fs-small);}
.home-opt-more>summary{cursor:pointer;color:var(--accent);font-size:var(--fs-small);}
.home-opt-more[open]{border-top:1px dashed var(--line);padding-top:6px;}
.home-opt-more>summary{margin-bottom:8px;}
.home-opt-act{display:flex;align-items:center;gap:8px;margin-top:12px;}
.home-opt-act .home-primary{margin-top:0;}
.home-fig-na{color:var(--muted);font-weight:400;}

/* ==== Wave 7d Lane A — timeline small-multiples, chart pair, computed opportunities, strip next-step ==== */

/* A.1 — supply-vs-demand sparklines (one row per hub). Hub column fixed width; sales offices one row. */
.home-tl2 { display: flex; flex-direction: column; gap: 2px; }
/* finding M-H-07 (safe half) — rows are tall enough to read (a taller sparkline + a readable status column). */
.home-tl2-row { display: grid; grid-template-columns: 190px 1fr 240px 96px; align-items: center; gap: 10px; padding: 8px 6px; min-height: 92px; border-radius: var(--radius-sm); }
.home-tl2-row:hover { background: var(--accent-soft); }
.home-tl2-hub { font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-tl2-spark { min-width: 0; }
.home-tl2-nospark { font-size: var(--fs-micro); }
.home-tl2-status { font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.home-tl2-status .tl-txt-out { color: var(--danger); }
.home-tl2-status .tl-txt-near { color: var(--warn-ink); }
.home-tl2-status .tl-txt-within { color: var(--accent2); }
.home-tl2-status .tl-txt-nodriver { color: var(--muted); font-style: italic; }
.home-tl2-expand { border: 1px solid var(--line); background: var(--panel); color: var(--accent); border-radius: var(--radius-sm); font-size: var(--fs-micro); font-weight: var(--fw-semibold); cursor: pointer; padding: 3px 8px; justify-self: end; }
.home-tl2-expand:hover { border-color: var(--accent); }
.home-tl2-detail { grid-column: 1 / -1; }
.home-tl2-sales { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; }

/* the SVG sparkline itself (styled by class so it tracks the theme) */
.home-spark { display: block; width: 100%; height: 84px; }
.spk-postplan { fill: var(--muted); opacity: 0.08; }
.spk-cap { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 3; }
.spk-demand { fill: none; stroke-width: 2; }
.spk-demand.spk-within { stroke: var(--accent2); }
.spk-demand.spk-over_trigger { stroke: var(--warn-ink); }
.spk-demand.spk-out_of_room { stroke: var(--danger); }
.spk-cross { stroke: var(--panel); stroke-width: 1.2; }
.spk-cross.spk-out_of_room { fill: var(--danger); }
.spk-cross.spk-over_trigger { fill: var(--warn-ink); }
.spk-crosslabel { fill: var(--ink); font-size: 10px; font-weight: 700; }
.spk-lease { fill: var(--warn-ink); font-size: 11px; cursor: default; }
/* finding BYO-04 — a vertical lease-end line on the sparkline (same marker family as the breach, distinct style). */
.spk-lease-line { stroke: var(--warn-ink); stroke-width: 1.2; stroke-dasharray: 1 2; opacity: 0.55; }
.spk-committed { stroke: var(--committed-cap); stroke-width: 1.2; stroke-dasharray: 2 2; opacity: 0.6; }
.home-legend .lg.postplan { background: var(--muted); opacity: 0.25; }
/* A2 — the committed delivered-capacity STEP overlay (a distinct supply line that rises at each project's
   occupancy, above the flat baseline capacity). Theme-aware via a token, same mechanism as shell.css. */
:root { --committed-cap: #4b8b5e; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --committed-cap: #7fb08a; } }
:root[data-theme="dark"]{ --committed-cap: #7fb08a; }
:root[data-theme="light"]{ --committed-cap: #4b8b5e; }
.spk-committed-cap { fill: none; stroke: var(--committed-cap); stroke-width: 1.7; }
.spk-committed-dot { fill: var(--committed-cap); stroke: var(--panel); stroke-width: 0.8; }
.home-legend .lg.committedcap { background: var(--committed-cap); }

/* A.2 — the row-expand / drawer chart pair (echarts) */
.home-cpair { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; margin: 4px 0 8px; background: var(--panel); }
.home-cpair-explain { font-size: var(--fs-small); margin: 0 0 10px; }
.home-cpair-charts { display: flex; flex-wrap: wrap; gap: 16px; }
.home-cpair-chart { flex: 1 1 300px; min-width: 0; margin: 0; }
.home-cpair-h { font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.home-cpair-box { width: 100%; height: 180px; }
.home-cpair-seating { margin-top: 10px; font-size: var(--fs-small); }
.home-cpair-seating ul { margin: 6px 0 8px; padding-left: 18px; color: var(--muted); }
.home-cpair-seating li { margin: 2px 0; }

/* A.3 — computed opportunities */
.home-opps { display: flex; flex-direction: column; gap: 12px; }
.home-opp-block { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; background: var(--panel); }
.home-opp-h { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); margin-bottom: 4px; }
.home-opp-list { margin: 0; padding-left: 18px; font-size: var(--fs-small); color: var(--muted); }
.home-opp-list li { margin: 3px 0; }
.home-opp-list b { color: var(--ink); }
.home-opp-more { list-style: none; margin-left: -18px; font-style: italic; }

/* A.4 — proposed-solution strip: adjacency tile link + next-step button + rerun banner + pending list */
.home-tile-link { color: var(--accent); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.home-tile-link:hover { text-decoration: underline; }
.home-strip-next-row { margin-top: 12px; }
.home-primary.home-strip-next, .home-strip-next-row .home-primary { display: inline-block; background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; }
.home-strip-next-row .home-primary:hover { filter: brightness(1.05); }
.home-rerun-banner { margin: 8px 0 6px; padding: 6px 12px; border-left: 3px solid var(--accent2); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-small); }
.home-rerun-banner-k { font-weight: var(--fw-semibold); color: var(--accent2); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.4px; margin-right: 6px; }
.home-rerun-btn { border: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-small); cursor: pointer; padding: 0; }
.home-rerun-btn b { color: var(--accent); font-weight: var(--fw-bold); }
.home-pending-list { margin: 0 0 10px; padding: 8px 12px 8px 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); font-size: var(--fs-small); color: var(--muted); }
.home-pending-list li { margin: 2px 0; }

@media (max-width: 720px) {
  .home-tl2-row { grid-template-columns: 130px 1fr; grid-auto-rows: min-content; }
  .home-tl2-status, .home-tl2-expand { grid-column: 2; justify-self: start; }
  .home-cpair-chart { flex-basis: 100%; }
}

/* ============================================================================
   W4-A (doc 114) — See model: cycle stamps (R30), modes (R27), tabs (R25/R26),
   constraint annotations (R28). Uses the shared C1 tokens (light + dark for free).
   ============================================================================ */
/* R30 — the two cycle stamps above the tabs. */
.home-stamps { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-micro); color: var(--muted); margin-bottom: 12px; }
.home-stamp { display: inline-flex; gap: 5px; align-items: baseline; }
.home-stamp-k { text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }

/* R26 — the Committed tab definition line. */
.home-toggle-note { margin: -6px 0 14px; }

/* R27 — snapshot-mode banner + data-quality flags. */
.home-snapshot-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; }
.home-dq { margin-bottom: 18px; }
.home-dq-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.home-dq-flag { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-small); }
.home-dq-what { color: var(--ink); }
.home-dq-count { font-weight: var(--fw-bold); color: var(--warn-ink); }
.home-dq-sites { color: var(--muted); font-size: var(--fs-micro); }

/* B5 — the first-arrival orientation line (Build-your-own session). */
.home-byo-orient { font-size: var(--fs-small); color: var(--ink); background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 14px; }

/* B4 — the point-in-time near-capacity read (non-office sites, occupied vs recorded). */
.home-nearcap { border: 1px solid var(--warn-line, var(--line)); border-radius: var(--radius-sm); padding: 12px 14px; margin: 14px 0 18px; background: var(--warn-soft, transparent); }
/* W8-07 — collapsed to one line; the shell cp-expander (shell.css) supplies the "See details ▸" chevron. */
.home-nearcap-summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.home-nearcap-summary .home-sec-label { margin: 0; }
.home-nearcap-oneline { font-size: var(--fs-small); color: var(--ink); font-weight: var(--fw-semibold); }
.home-nearcap-body { margin-top: 10px; }
.home-nearcap-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.home-nearcap-row { font-size: var(--fs-small); color: var(--ink); }
/* W8-06 — the ONE accent action: "Explore options for the N sites that need a decision →". A block-level
   primary under the ranked-list lead; an <a>, so it must not carry the default link underline. */
.home-explore-decisions { text-decoration: none; margin: 4px 0 14px; }

/* R25 — the Approved-plan tab: sub-view switch + rows (ad-hoc addenda, programs). */
.home-approved { margin-bottom: 18px; }
.home-subview { display: inline-flex; gap: 4px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); margin: 4px 0 12px; }
.home-subview-btn { border: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-small); padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.home-subview-btn.is-active { background: var(--accent); color: var(--on-accent); font-weight: var(--fw-semibold); }
.home-subview-btn:not(.is-active):hover { color: var(--accent); }
.home-approved-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.home-approved-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--fs-small); padding: 6px 0; border-bottom: 1px solid var(--line); }
.home-approved-id { font-weight: var(--fw-semibold); color: var(--ink); }
.home-approved-drv { color: var(--muted); }
.home-approved-addendum { font-size: var(--fs-micro); color: var(--accent2); }
.home-approved-row.is-addendum, .home-approved-row.is-program { border-left: 2px solid var(--accent); padding-left: 8px; }

/* R28 — per-constraint annotation tags on the Current tab. */
.home-constraint-tag { font-size: var(--fs-micro); letter-spacing: 0.4px; text-transform: uppercase; font-weight: var(--fw-semibold); border-radius: var(--radius-sm); padding: 2px 7px; }
.home-constraint-tag.is-addressed { background: var(--accent-soft); color: var(--accent); }
.home-constraint-tag.is-decision { background: var(--warn-bg); color: var(--warn-ink); }
.home-constraint-tag.is-watch { color: var(--muted); border: 1px solid var(--line); }