/* ════════════════════════════════════════════════════════════════
   AICIVSIM — DESIGN V3 (experiment branch: design-v3)
   Shared stylesheet for all *-v3.html prototype pages.

   Principles (see design-v3.html):
   1. One story per screen        4. Hierarchy through scale, not caps
   2. The scenario is the product 5. Motion confirms, never gates
   3. Layouts resolve             6. Show, don't instruct

   Dataviz system — "one geometry, six forms":
   every chart shares one anatomy (hairline grid, mono ink-4 axis
   labels, no borders, no per-chart legends — the scenario control
   is the legend). Forms are chosen by the data's job:
     stat      single value + delta            (KPI row)
     traj      change over time — EMPHASIS: active scenario bold +
               end-labeled, other three ghost context
     dumbbell  before → after per item
     meter     ratio against a cap, one hue
     bars      magnitude compare, one hue
     slope     two-state comparison (pathways FROM → TO)
   Scenario hues appear ONLY on scenario identity. Semantic
   good/bad only on deltas, always paired with ▲▼ glyphs.
   Chart moderate-blue is #4a7fd4 (validated for CVD + normal-vision
   separation against the teal; brand #5da5da fails both).
   ════════════════════════════════════════════════════════════════ */
:root{
  --bg:#111112; --bg-elev:#19191b; --bg-press:#1f1f22;
  --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.16);
  --ink:#f2f1ed; --ink-2:#b9b7af; --ink-3:#83817a; --ink-4:#575550;
  --accent:#d4622a;
  --good:#3dd68c; --bad:#e05c5c;
  --sc-aggressive:#4ecdc4; --sc-moderate:#4a7fd4; --sc-bau:#e8a838; --sc-worst:#d4622a;
  --sys-ai:#e8a838; --sys-climate:#4ecdc4; --sys-governance:#9b87f5;
  --sys-transition:#5da5da; --sys-civilization:#e05c7e; --sys-strategy:#d4622a;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --col:1080px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --r:10px;
  --ghost:.26;
}
body.light{
  --bg:#f5f4f0; --bg-elev:#fdfcf9; --bg-press:#eceae4;
  --hairline:rgba(0,0,0,.09); --hairline-strong:rgba(0,0,0,.18);
  --ink:#1b1a18; --ink-2:#4c4a43; --ink-3:#7c7a72; --ink-4:#a5a399;
  --good:#1a9e6f; --bad:#c2453a;
  --ghost:.34;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
svg{display:block}
.col{max-width:var(--col);margin:0 auto;padding:0 32px}

/* ── Type scale ── */
.eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.title-1{font-family:var(--font-display);font-size:clamp(30px,4.5vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.12}
.title-2{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.title-3{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.3}
.lead{font-size:17px;line-height:1.65;color:var(--ink-2)}
.body-2{font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.a{color:var(--accent);font-weight:500}
.a:hover{text-decoration:underline}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.nav-inner{max-width:var(--col);margin:0 auto;padding:0 32px;height:52px;display:flex;align-items:center;gap:6px}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.06em;margin-right:auto;white-space:nowrap}
.wordmark em{font-style:normal;color:var(--accent)}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;padding:8px 13px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink-2);transition:color .15s,background .15s;white-space:nowrap}
.nav-link:hover{color:var(--ink);background:var(--bg-press)}
.nav-link[aria-current]{color:var(--ink)}
.nav-link .chev{width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.5;flex-shrink:0}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--bg-elev);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.35);padding:6px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .13s ease,transform .13s ease;z-index:110}
/* invisible bridge across the trigger→menu gap so the pointer can
   travel down without leaving the item; open/close state is managed
   in v3.js (instant open, instant switch, short grace on stray exits) */
.menu::before{content:'';position:absolute;top:-14px;left:-10px;right:-10px;height:14px}
/* .open is the SINGLE source of truth for menu visibility — never add
   :focus-within here. A clicked trigger keeps focus, so a focus-based
   rule would hold its menu open while hover opened a second one. All
   opening (hover, click, keyboard focus) runs through v3.js. */
.nav-item.open .menu{opacity:1;transform:none;pointer-events:auto}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500}
.menu a:hover{background:var(--bg-press)}
.menu .tick{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.menu .hint{margin-left:auto;font-size:11px;color:var(--ink-4);font-weight:400;white-space:nowrap}
.theme-btn{padding:8px;border-radius:8px;color:var(--ink-3);display:flex;flex-shrink:0}
.theme-btn:hover{color:var(--ink);background:var(--bg-press)}

/* ── Deck — sticky page header with the scenario control ── */
.deck{position:sticky;top:52px;z-index:90;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.deck-inner{max-width:var(--col);margin:0 auto;padding:10px 32px;display:flex;align-items:center;gap:16px}
.deck-title{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.deck-title i{width:8px;height:8px;border-radius:2.5px;flex-shrink:0}
.deck-title b{font-family:var(--font-display);font-size:14px;font-weight:600;white-space:nowrap}
.deck-title span{font-size:12px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Scenario segmented control ── */
.sc-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--bg-elev);border:1px solid var(--hairline);border-radius:12px;padding:4px}
.sc-seg button{position:relative;padding:12px 6px 10px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ink-3);transition:color .15s,background .2s;text-align:center;white-space:nowrap}
.sc-seg button .dot{display:block;width:6px;height:6px;border-radius:50%;margin:0 auto 7px;background:var(--sc);opacity:.45;transition:opacity .2s,transform .2s}
.sc-seg button:hover{color:var(--ink-2)}
.sc-seg button[aria-pressed="true"]{background:var(--bg-press);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.sc-seg button[aria-pressed="true"] .dot{opacity:1;transform:scale(1.25)}
.sc-seg.compact{border-radius:10px}
.sc-seg.compact button{padding:6px 12px 5px;font-size:11.5px;display:flex;align-items:center;gap:6px}
.sc-seg.compact button .dot{margin:0}

/* ── Page hero (subpages) ── */
.page-hero{padding:var(--s5) 0 var(--s4);border-bottom:1px solid var(--hairline)}
.page-hero .eyebrow{display:block;margin-bottom:14px}
.page-hero .lead{margin-top:14px;max-width:620px}
.hero-stats{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap;margin-top:var(--s4)}
.hero-score .big{font-family:var(--font-mono);font-weight:700;font-size:88px;line-height:.9;letter-spacing:-.04em}
.hero-score .sub{display:flex;align-items:center;gap:10px;margin-top:10px}
.hero-arrow{color:var(--ink-4);font-size:22px;padding-bottom:34px}
.hero-proj .big{font-family:var(--font-mono);font-weight:700;font-size:56px;line-height:.9;letter-spacing:-.03em;transition:color .3s}
.hero-proj .sub{margin-top:10px}
.grade-chip{font-family:var(--font-mono);font-size:14px;font-weight:700;padding:2px 9px;border:1.5px solid currentColor;border-radius:7px}
.grade-chip.sm{font-size:11px;padding:1px 7px;border-width:1px}

/* ── Sections ── */
.section{padding:var(--s6) 0;border-bottom:1px solid var(--hairline)}
.section:last-of-type{border-bottom:none}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:var(--s4)}
.section-head .lead{margin-top:10px;max-width:560px}
.section-link{font-size:13px;font-weight:500;color:var(--accent);white-space:nowrap}

/* ── KPI stat row ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.stat{border:1px solid var(--hairline);border-radius:var(--r);padding:18px 20px 16px}
.stat .lbl{font-size:11.5px;font-weight:600;color:var(--ink-3);margin-bottom:10px}
.stat .val{font-family:var(--font-mono);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.stat .val small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.stat .delta{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-family:var(--font-mono);font-size:12px;font-weight:600}
.stat .delta.good{color:var(--good)} .stat .delta.bad{color:var(--bad)} .stat .delta.flat{color:var(--ink-3)}
.stat .delta .ctx{font-family:var(--font-body);font-weight:400;color:var(--ink-4)}
.stat .spark{margin-top:12px}

/* ── Story card — the narrative beside the composite chart ── */
.story-grid{grid-template-columns:1.55fr 1fr}
.story-card{display:flex;flex-direction:column}
.story-card .eyebrow{margin-bottom:10px}
.story-card h3{margin-bottom:10px}
.story-card p{font-size:13.5px;line-height:1.65;color:var(--ink-3)}
.story-card .beats{margin-top:auto;padding-top:16px}
.story-card .beat{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--hairline)}
.story-card .beat b{font-family:var(--font-mono);font-size:13px;font-weight:700;min-width:58px}
.story-card .beat span{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.story-card .go{margin-top:16px;font-size:13px;font-weight:500;color:var(--accent)}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}

/* ── Chart cards ── */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chart-grid.one{grid-template-columns:1fr}
.chart-card{border:1px solid var(--hairline);border-radius:var(--r);padding:20px 20px 14px;min-width:0}
.chart-card .c-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.chart-card .c-title{font-family:var(--font-display);font-size:14.5px;font-weight:600}
.chart-card .c-unit{font-size:11px;color:var(--ink-4);font-family:var(--font-mono)}
.chart-card .c-read{font-size:12.5px;color:var(--ink-3);margin-bottom:10px;min-height:18px}
.chart-card .c-read b{font-family:var(--font-mono);font-weight:600;color:var(--ink-2)}
.v3-plot{position:relative}
.v3-plot svg{width:100%;height:auto}
.v3-plot .axis{font-family:var(--font-mono);font-size:10.5px;fill:var(--ink-4)}
.v3-plot .grid{stroke:var(--hairline);stroke-width:1}
.v3-plot .endlbl{font-family:var(--font-mono);font-size:10.5px;font-weight:600}
.v3-plot .endlbl.ghosted{font-weight:500;opacity:.62;font-size:9.5px}
.v3-plot .cursor-line{stroke:var(--hairline-strong);stroke-width:1;stroke-dasharray:2 3}
.v3-plot .hover-line{stroke:var(--ink-4);stroke-width:1;pointer-events:none}
.v3-plot .hover-dot{pointer-events:none;transition:opacity .12s}
.v3-plot .hover-year{font-family:var(--font-mono);font-size:10.5px;font-weight:700;fill:var(--ink-2);pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:4px;transition:opacity .12s}

/* tooltip */
.v3-tip{position:fixed;z-index:300;background:var(--bg-elev);border:1px solid var(--hairline-strong);border-radius:9px;box-shadow:0 10px 32px rgba(0,0,0,.4);padding:10px 12px;pointer-events:none;opacity:0;transition:opacity .12s;min-width:150px}
.v3-tip .yr{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.v3-tip .row{display:flex;align-items:center;gap:7px;font-size:11.5px;padding:2px 0;color:var(--ink-3)}
.v3-tip .row i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.v3-tip .row b{margin-left:auto;font-family:var(--font-mono);font-weight:600;color:var(--ink)}
.v3-tip .row.on{color:var(--ink)}

/* container shared by pathways' delta/diff lists */
.db-rows{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}

/* ── Landing tracks — today tick + all four futures on one rail ── */
.land-rows{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.land-row{display:grid;grid-template-columns:180px 1fr 96px;align-items:center;gap:20px;padding:20px 24px 16px;border-bottom:1px solid var(--hairline)}
.land-row:last-child{border-bottom:none}
.land-row .lbl{font-size:13px;font-weight:500;color:var(--ink-2)}
.land-row .lbl small{display:block;font-size:10.5px;color:var(--ink-4);font-family:var(--font-mono)}
.land-track{position:relative;height:44px}
.land-track .rail{position:absolute;left:0;right:0;top:60%;height:1px;background:var(--hairline-strong)}
.land-today{position:absolute;top:60%;transform:translateX(-50%)}
.land-today i{position:absolute;top:-7px;left:-.5px;width:1.5px;height:14px;background:var(--ink-3)}
.land-today em{position:absolute;top:9px;transform:translateX(-50%);font-style:normal;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-4);white-space:nowrap}
.land-dot{position:absolute;top:60%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:var(--sc);opacity:.55;cursor:pointer;transition:opacity .25s,transform .35s var(--spring),box-shadow .25s}
.land-dot:hover{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
.land-dot[data-active="true"]{opacity:1;transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 30%,transparent)}
.land-bubble{position:absolute;top:0;transform:translateX(-50%);font-size:11.5px;font-weight:700;white-space:nowrap;transition:left var(--spring-dur) var(--spring),color .3s}
.land-row .delta{font-family:var(--font-mono);font-size:12px;font-weight:600;text-align:right;white-space:nowrap}
.land-row .delta.good{color:var(--good)} .land-row .delta.bad{color:var(--bad)} .land-row .delta.flat{color:var(--ink-3)}

/* ── Entrance reveal — fast, early, one-shot; JS-gated so no-JS never hides ── */
.pre{opacity:0;transform:translateY(16px);transition:opacity .45s ease var(--rv-delay,0ms),transform .7s var(--spring) var(--rv-delay,0ms)}
.pre.in{opacity:1;transform:none}

/* chart internals */
.v3-plot .tj-ghost{stroke-opacity:var(--ghost);transition:opacity .3s}
.v3-plot .slope-line{stroke-dasharray:300;stroke-dashoffset:300;animation:slope-draw .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes slope-draw{to{stroke-dashoffset:0}}

/* ── Meter ── */
.meter{display:grid;grid-template-columns:1fr 64px;align-items:center;gap:12px}
.meter .m-track{height:4px;border-radius:2px;background:var(--hairline);position:relative;overflow:hidden}
.meter .m-fill{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.meter .m-val{font-family:var(--font-mono);font-size:12.5px;font-weight:600;text-align:right;color:var(--ink-2)}

/* ── Ledger (index) ── */
.ledger{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.ledger-row{display:grid;grid-template-columns:170px 1fr 84px 24px 84px 64px;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--hairline);transition:background .15s}
.ledger-row:last-child{border-bottom:none}
.ledger-row:hover{background:var(--bg-elev)}
.ledger-row .name{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:15px}
.ledger-row .name i{width:8px;height:8px;border-radius:2.5px;flex-shrink:0}
.ledger-row .desc{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.ledger-row .today{text-align:right}
.ledger-row .today b{font-family:var(--font-mono);font-size:17px;font-weight:600}
.ledger-row .today span,.ledger-row .proj span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:1px}
.ledger-row .arrow{color:var(--ink-4);text-align:center}
.ledger-row .proj{text-align:right}
.ledger-row .proj b{font-family:var(--font-mono);font-size:17px;font-weight:600;transition:color .3s}
.ledger-row .chip{justify-self:end}
.ledger-row.tool .go{grid-column:3/7;justify-self:end;font-size:13px;font-weight:500;color:var(--accent)}

/* ── Cards ── */
.quartet{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.q-card{border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s3);position:relative;overflow:hidden;transition:border-color .2s,transform .2s;cursor:pointer;background:none;text-align:left;font:inherit;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.q-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sc)}
.q-card:hover{transform:translateY(-2px);border-color:var(--hairline-strong)}
.q-card.static{cursor:default}
.q-card.static:hover{transform:none;border-color:var(--hairline)}
.q-card.static[data-active="true"]:hover{border-color:var(--sc)}
.q-card[data-active="true"]{border-color:var(--sc);background:var(--bg-elev)}
.q-card h3{font-family:var(--font-display);font-size:15.5px;font-weight:600;margin-bottom:6px}
.q-card .proj-line{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.q-card p{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trio.quad{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.trio.quad{grid-template-columns:repeat(2,1fr)}}
.t-card{border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s3);transition:border-color .2s,transform .2s;display:block}
.t-card:hover{transform:translateY(-2px);border-color:var(--hairline-strong);background:var(--bg-elev)}
.t-card .kicker{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--accent);margin-bottom:10px}
.t-card h3{font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:6px}
.t-card p{font-size:13px;color:var(--ink-3);line-height:1.55}
.t-card .go{display:inline-block;margin-top:14px;font-size:13px;font-weight:500;color:var(--accent)}

/* ── Impact list (cross-system) ── */
.impacts{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.impact-row{display:grid;grid-template-columns:64px 130px 1fr;gap:14px;align-items:baseline;padding:14px 20px;border-bottom:1px solid var(--hairline)}
.impact-row:last-child{border-bottom:none}
.impact-row .w{font-family:var(--font-mono);font-size:14px;font-weight:700;text-align:right}
.impact-row .w.good{color:var(--good)} .impact-row .w.bad{color:var(--bad)} .impact-row .w.flat{color:var(--ink-3)}
.impact-row .t{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:13.5px;font-weight:600}
.impact-row .t i{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.impact-row .e{font-size:12.5px;color:var(--ink-3);line-height:1.55}

/* ── Context note under charts — the "why it matters" line ── */
.c-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);font-size:12.5px;line-height:1.6;color:var(--ink-3);transition:opacity .18s ease;min-height:52px}

/* ── Threshold / tipping-point cards ── */
.th-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.th-card{border:1px solid var(--hairline);border-radius:var(--r);padding:20px;transition:border-color .3s,background .3s}
.th-card[data-state="breached"]{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 4%,transparent)}
.th-card[data-state="near"]{border-color:color-mix(in srgb,var(--sc-bau) 40%,transparent)}
.th-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.th-head h4{font-family:var(--font-display);font-size:15px;font-weight:600}
.th-state{font-size:10px;font-weight:700;letter-spacing:.14em;padding:3px 9px;border-radius:6px;border:1px solid currentColor;white-space:nowrap}
.th-state.good{color:var(--good)} .th-state.warn{color:var(--sc-bau)} .th-state.bad{color:var(--bad)}
.th-line{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.th-line .th-val{font-family:var(--font-mono);font-size:24px;font-weight:700;transition:color .3s}
.th-line .th-thr{font-size:11.5px;color:var(--ink-4);font-family:var(--font-mono)}
.th-desc{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-top:10px}
.th-note{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline);min-height:40px}

/* ── Milestone rail extensions ── */
.spine-item.ms .ms-status{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:6px;border:1px solid currentColor;margin-left:8px;vertical-align:middle}
.spine-item.ms .ms-status.good{color:var(--good)} .spine-item.ms .ms-status.warn{color:var(--sc-bau)} .spine-item.ms .ms-status.bad{color:var(--bad)}
.spine-item.ms .ms-score{margin-left:6px}
.ms-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ms-items span{font-size:11px;color:var(--ink-3);border:1px solid var(--hairline);border-radius:6px;padding:3px 9px}
.spine-item.ms .ms-note{min-height:42px}

/* ── Composition stack ── */
.stack-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.stack-bar i{transition:width .5s var(--spring);min-width:2px}
.stack-legend{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.stack-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);padding:4px 0}
.stack-row i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.stack-row b{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:600}

/* ── Income-bridge calculator ── */
.br-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.br-picker button{padding:8px 14px;border-radius:9px;border:1px solid var(--hairline);font-size:12.5px;font-weight:500;color:var(--ink-3);transition:all .15s}
.br-picker button:hover{color:var(--ink);border-color:var(--hairline-strong)}
.br-picker button[aria-pressed="true"]{color:var(--ink);background:var(--bg-elev);border-color:var(--hairline-strong);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.br-callout{border-left:2px solid var(--hairline-strong);padding:4px 0 4px 18px;font-size:14px;color:var(--ink-2);line-height:1.6}
.br-callout .pill-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
/* the split that makes "why didn't this number move?" answerable */
.br-split{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;margin-top:24px}
.br-head{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--hairline)}
.br-split .kpis{grid-template-columns:1fr}
.br-fixed .stat{opacity:.82}
@media(max-width:900px){.br-split{grid-template-columns:1fr;gap:20px}}

/* ── Sub-score strip ── */
.subscores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* ── Narrative panel ── */
.narrative{border-left:2px solid var(--accent);padding:6px 0 6px 22px;max-width:640px}
.narrative p{font-size:15px;line-height:1.7;color:var(--ink-2)}
.narrative .who{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}

/* ── Action cards (strategy) ── */
.filter-seg{display:inline-flex;gap:4px;background:var(--bg-elev);border:1px solid var(--hairline);border-radius:10px;padding:4px}
.filter-seg button{padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.filter-seg button:hover{color:var(--ink-2)}
.filter-seg button[aria-pressed="true"]{background:var(--bg-press);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.action-card{border:1px solid var(--hairline);border-radius:var(--r);padding:18px 20px}
.action-card .a-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.action-card h4{font-family:var(--font-display);font-size:15px;font-weight:600}
.action-card .status{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:6px;border:1px solid currentColor;white-space:nowrap;transition:color .3s}
.action-card .status.s3{color:var(--good)} .action-card .status.s2{color:var(--sc-bau)} .action-card .status.s1{color:var(--ink-3)} .action-card .status.s0{color:var(--bad)}
.action-card .a-desc{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.55}
.action-card .a-note{font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.55;min-height:38px}
.action-card .a-meta{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:11px;color:var(--ink-4);flex-wrap:wrap}
.action-card .a-meta b{color:var(--ink-3);font-weight:600}

/* ── Slope chart (pathways) ── */
.slopes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.slope-card{border:1px solid var(--hairline);border-radius:var(--r);padding:18px 20px 12px;min-width:0}
.slope-card .c-title{font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:2px}
.slope-card .c-unit{font-size:10.5px;color:var(--ink-4);font-family:var(--font-mono);margin-bottom:8px}

/* ── Timeline spine ── */
.spine{position:relative;padding-left:28px}
.spine::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--hairline-strong)}
.spine-item{position:relative;padding:0 0 var(--s4)}
.spine-item::before{content:'';position:absolute;left:-24px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--ink-4);transition:border-color .2s}
.spine-item.now::before{border-color:var(--accent);background:var(--accent)}
.spine-item .when{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--ink-4);letter-spacing:.06em}
.spine-item.now .when{color:var(--accent)}
.spine-item h3{font-family:var(--font-display);font-size:17px;font-weight:600;margin:4px 0 6px}
.spine-item p{font-size:13.5px;color:var(--ink-3);line-height:1.6;max-width:560px}
.spine-item .facts{display:flex;gap:22px;margin-top:10px}
.spine-item .facts div b{display:block;font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--ink-2)}
.spine-item .facts div span{font-size:10.5px;color:var(--ink-4)}

/* ── Year slider (simulation) ── */
.year-block .yr-big{font-family:var(--font-mono);font-size:64px;font-weight:700;letter-spacing:-.03em;line-height:1}
.year-block .yr-big small{font-size:15px;font-weight:500;color:var(--ink-4);letter-spacing:0;margin-left:10px}
.year-block input[type=range]{width:100%;margin-top:18px;-webkit-appearance:none;appearance:none;height:2px;border-radius:1px;background:var(--hairline-strong);outline:none}
.year-block input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg)}
.year-block input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg)}
.year-block .yr-ends{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ink-4);margin-top:8px}
.era-chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:6px;border:1px solid var(--hairline-strong);color:var(--ink-2);margin-left:12px;vertical-align:middle}

/* ── Lever readouts ── */
.levers{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.lever{border:1px solid var(--hairline);border-radius:var(--r);padding:14px 16px}
.lever .lbl{font-size:10.5px;font-weight:600;color:var(--ink-4);margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase}
.lever .val{font-family:var(--font-mono);font-size:20px;font-weight:700;transition:color .3s}

/* ── Footer ── */
.v3-footer{padding:var(--s5) 0 var(--s4);border-top:1px solid var(--hairline);margin-top:var(--s6)}
.section + .v3-footer{margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s4)}
.foot-grid h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.foot-grid a{display:block;font-size:13px;color:var(--ink-3);padding:4px 0;transition:color .15s}
.foot-grid a:hover{color:var(--ink)}
.foot-note{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hairline);display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--ink-4);flex-wrap:wrap}
.foot-note a{color:var(--accent)}

/* ── Score band (index) — 0–100 rail, fixed today tick, gliding future dot ── */
.score-band{position:relative;height:52px;max-width:420px;margin-top:var(--s4)}
.score-band .sb-rail{position:absolute;left:0;right:0;top:32px;height:2px;border-radius:1px;background:var(--hairline)}
.score-band .sb-range{position:absolute;top:32px;height:2px;border-radius:1px;transition:left var(--spring-dur) var(--spring),width var(--spring-dur) var(--spring),background .3s}
.score-band .sb-today{position:absolute;top:32px;transform:translateX(-50%)}
.score-band .sb-today i{position:absolute;top:-6px;left:-.75px;width:1.5px;height:13px;background:var(--ink-2)}
.score-band .sb-today em{position:absolute;top:10px;transform:translateX(-50%);font-style:normal;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.score-band .sb-today em b{font-family:var(--font-mono);color:var(--ink-2)}
.score-band .sb-dot{position:absolute;top:33px;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px color-mix(in srgb,var(--bg) 100%,transparent);transition:left var(--spring-dur) var(--spring),background .3s}
.score-band .sb-proj{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:var(--ink-3);white-space:nowrap;transition:left var(--spring-dur) var(--spring)}
.score-band .sb-proj b{font-family:var(--font-mono);font-size:13px;font-weight:700}
.score-band .sb-ends{position:absolute;top:40px;left:0;right:0;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-4)}

/* ── Play button (simulation) ── */
.play-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:10px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;transition:filter .15s,transform .15s}
.play-btn:hover{filter:brightness(1.08)}
.play-btn:active{transform:scale(.97)}
.play-btn.playing{background:var(--bg-press);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline-strong)}

/* ── Index hero (homepage only) ── */
.hero{padding:calc(var(--s6) + 8px) 0 var(--s6);border-bottom:1px solid var(--hairline)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.score-display{font-family:var(--font-mono);font-weight:700;font-size:clamp(96px,14vw,168px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.score-sub{display:flex;align-items:center;gap:12px;margin-top:14px}
.hero-sentence{margin-top:var(--s3);max-width:400px}
.delta-bar{margin-top:var(--s4);height:3px;background:var(--hairline);border-radius:2px;position:relative;max-width:400px}
.delta-bar i{position:absolute;inset:0 auto 0 0;border-radius:2px;transition:width .6s cubic-bezier(.2,.7,.2,1),background .3s}
.delta-labels{display:flex;justify-content:space-between;max-width:400px;margin-top:10px;font-size:12px;color:var(--ink-3)}
.delta-labels .num{color:var(--ink-2)}
.sc-block .eyebrow{display:block;margin-bottom:12px}
.sc-outcome{margin-top:var(--s3);padding:var(--s3);background:var(--bg-elev);border:1px solid var(--hairline);border-radius:var(--r);min-height:118px}
.sc-outcome .headline{font-size:15px;font-weight:600;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sc-outcome .headline .num{font-size:22px;font-weight:700}
.sc-outcome p{margin-top:8px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.live-strip{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:var(--s4);align-items:baseline}
.live-strip .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--good)}
.live-strip .pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-strip .item{font-size:12.5px;color:var(--ink-3)}
.live-strip .item b{font-family:var(--font-mono);font-weight:600;color:var(--ink-2)}
.live-strip a{color:var(--accent);font-size:12.5px;font-weight:500}

/* ════════ shared.js companions, dressed in v3 ════════
   shared.js injects the ⌘K command palette, a reading-progress bar,
   and a back-to-top button; their styles live in the live site's
   style.css, which v3 pages don't load. Styled here so the features
   work in the new language instead of rendering as bare markup. */
.cmd-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9000;opacity:0;pointer-events:none;transition:opacity .15s}
.cmd-backdrop.open{opacity:1;pointer-events:auto}
.cmd-dialog{position:fixed;top:min(20vh,160px);left:50%;transform:translateX(-50%) translateY(8px);width:min(540px,calc(100vw - 32px));background:var(--bg-elev);border:1px solid var(--hairline-strong);border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.5);z-index:9001;opacity:0;pointer-events:none;transition:opacity .15s,transform .25s var(--spring);overflow:hidden}
.cmd-dialog.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.cmd-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--hairline)}
.cmd-input-wrap svg{flex-shrink:0;color:var(--ink-3)}
.cmd-input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:var(--font-body);font-size:15px}
.cmd-input::placeholder{color:var(--ink-4)}
.cmd-dialog kbd{font-family:var(--font-mono);font-size:10px;color:var(--ink-4);border:1px solid var(--hairline);border-radius:4px;padding:2px 6px;line-height:1}
.cmd-results{max-height:min(46vh,380px);overflow-y:auto;padding:6px;scrollbar-width:thin}
.cmd-group{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding:10px 12px 4px}
.cmd-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;cursor:pointer}
.cmd-item.active,.cmd-item:hover{background:var(--bg-press)}
.cmd-item-icon{width:20px;text-align:center;font-size:13px;flex-shrink:0}
.cmd-item-label{font-size:13.5px;font-weight:500;color:var(--ink)}
.cmd-item-desc{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.cmd-empty{padding:22px 16px;font-size:13px;color:var(--ink-3);text-align:center}
.cmd-footer{display:flex;align-items:center;gap:16px;padding:9px 18px;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:9.5px;color:var(--ink-4)}
.reading-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:10000;width:0;transition:opacity .3s;pointer-events:none}
.back-to-top{position:fixed;bottom:24px;right:80px;width:36px;height:36px;border-radius:50%;background:var(--bg-elev);border:1px solid var(--hairline-strong);color:var(--ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:500;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .35s var(--spring),color .15s;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.back-to-top svg{width:16px;height:16px}
.back-to-top.visible{opacity:1;transform:none;pointer-events:auto}
.back-to-top:hover{color:var(--ink)}

/* ── Responsive ── */
@media(max-width:1024px){
  .nav-inner{overflow-x:auto;scrollbar-width:none}
  .menu{position:fixed;left:16px;right:16px;min-width:0;top:auto}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s4)}
  .land-row{grid-template-columns:1fr;gap:10px;padding:16px 16px 14px}
  .land-row .delta{text-align:left}
  .th-line .th-val{font-size:20px}
  .kpis{grid-template-columns:1fr 1fr}
  .stat .val{font-size:22px}
  .quartet{grid-template-columns:repeat(2,1fr)}
  .trio,.chart-grid,.actions-grid,.th-grid{grid-template-columns:1fr}
  .slopes,.subscores{grid-template-columns:repeat(2,1fr)}
  .stack-legend{grid-template-columns:1fr}
  .levers{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .ledger-row{grid-template-columns:1fr 84px 24px 84px;grid-template-rows:auto auto}
  .ledger-row .name{grid-column:1/5}
  .ledger-row .desc{display:none}
  .ledger-row .chip{display:none}
  .db-row{grid-template-columns:1fr;gap:8px}
  .db-row .delta{text-align:left}
  .impact-row{grid-template-columns:64px 1fr;grid-template-rows:auto auto}
  .impact-row .e{grid-column:1/3}
  .foot-grid{grid-template-columns:1fr}
  .deck-inner{flex-wrap:wrap;gap:8px}
  .deck-title{flex-basis:100%;min-width:0}
  .deck-title span{display:none}                 /* context line yields on phones */
  /* the compact segment becomes a full-width 4-up grid — the old inline
     row overflowed 390px viewports by ~45px */
  .deck .sc-seg{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px}
  .deck .sc-seg button{padding:7px 2px 6px;font-size:10.5px;flex-direction:column;gap:4px;justify-content:center}
  .deck .sc-seg button .dot{margin:0 auto}
  .hero-stats{gap:var(--s3)}
  .hero-score .big{font-size:64px}
  .hero-proj .big{font-size:42px}
  .hero-arrow{padding-bottom:22px}
  .col{padding:0 20px}
  .nav-inner,.deck-inner{padding-left:20px;padding-right:20px}
}
@media(max-width:640px){
  /* KPI tiles: the base minmax(190px) floor overflows a 390px viewport
     once padding and gap are counted — go single column on phones */
  .kpis{grid-template-columns:1fr!important}
  /* section-head control rows stack under their heading and fill width */
  .section-head{flex-direction:column;align-items:stretch}
  .filter-seg{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
  .filter-seg button{padding:7px 4px;font-size:11.5px}
  /* any standalone compact segment (e.g. the design-system specimen) */
  .sc-seg.compact{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
  .sc-seg.compact button{padding:7px 2px 6px;font-size:10.5px;flex-direction:column;gap:4px;justify-content:center}
  .sc-seg.compact button .dot{margin:0 auto}
  /* wide rows and long specimens reflow rather than push the page */
  .stack-legend,.ms-items{grid-template-columns:1fr}
  .br-picker button{max-width:100%;white-space:normal;text-align:left}
  .action-card .a-meta{gap:8px}
  .swatches{grid-template-columns:1fr 1fr}
  .type-row{flex-direction:column;gap:6px}
  .type-row .t-meta{min-width:0}
  .impact-row{padding:14px 16px}
  .th-card,.chart-card{padding:16px}
  .col{padding:0 16px}
  .nav-inner,.deck-inner{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}