/* ==========================================================================
   Design system — every value used below is defined here.
   ========================================================================== */
:root {
  /* type scale (rem) */
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 2rem; --t-3xl: 3rem;
  /* spacing scale (px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --radius: 12px; --radius-sm: 8px; --hairline: 1px;
  --ease: 180ms cubic-bezier(.2,.7,.2,1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* dark theme (default) */
  --bg: #0f1216; --surface: #171b21; --surface-2: #1e242c; --hairline-c: #2a313b;
  --fg: #eef1f5; --fg-2: #b7bfcb; --muted: #7f8a99; --grid: #262c35;
  --accent: #f0a63a; --accent-fg: #14100a; --accent-soft: rgba(240,166,58,.16);
  --focus: #ffd27a;
  /* severity scale: luminance falls monotonically 0 → 5 (see REDESIGN.md §3) */
  --sev-0: #f4e9a6; --sev-1: #9ad06d; --sev-2: #3fc0a8; --sev-3: #5fa3e6; --sev-4: #8a7fd8; --sev-5: #6b3d8f;
  --sev-5-outline: #c9a6e6;
  --night: rgba(255,255,255,.05);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eef0f3; --hairline-c: #d9dde3;
  --fg: #171c24; --fg-2: #3f4854; --muted: #6b7482; --grid: #e2e5ea;
  --accent: #b8700f; --accent-fg: #fff; --accent-soft: rgba(184,112,15,.14);
  --focus: #b8700f;
  --sev-0: #d9c23a; --sev-1: #6aa84f; --sev-2: #2a8c78; --sev-3: #2e6a97; --sev-4: #4b3f86; --sev-5: #2d1240;
  --sev-5-outline: #2d1240;
  --night: rgba(0,0,0,.05);
  color-scheme: light;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: var(--t-md)/1.5 var(--font); }
body { padding-bottom: 64px; /* room for the legend bar */ }
a { color: var(--fg-2); text-decoration-color: var(--muted); }
a:hover { color: var(--fg); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: var(--t-lg); font-weight: 600; }
h3 { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.tiny { font-size: var(--t-xs); }
code { font-family: var(--mono); font-size: .9em; }

/* ==========================================================================
   Controls (buttons, inputs) with defined states
   ========================================================================== */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--surface-2); border: var(--hairline) solid var(--hairline-c); color: var(--fg); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-4); cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), opacity var(--ease); font-size: var(--t-sm); line-height: 1.2; }
.btn:hover { border-color: var(--fg-2); }
.btn:active { transform: translateY(1px); }
.btn[aria-pressed="true"], .btn.active { border-color: var(--accent); color: var(--fg); background: var(--accent-soft); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn.big { font-size: var(--t-lg); padding: var(--s-3) var(--s-6); border-radius: 999px; }
.btn.icon { padding: var(--s-2); width: 36px; height: 36px; justify-content: center; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.quiet:hover { background: var(--surface-2); color: var(--fg); }
select { background: var(--surface-2); border: var(--hairline) solid var(--hairline-c); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ==========================================================================
   Shell
   ========================================================================== */
.hdr { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-5); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--hairline) solid var(--hairline-c); }
.hdr .brand { display: flex; align-items: baseline; gap: var(--s-3); }
.hdr .brand .sub { font-size: var(--t-xs); color: var(--muted); }
.hdr .tools { display: flex; gap: var(--s-2); align-items: center; }

.segments { display: flex; gap: var(--s-1); justify-content: center; background: var(--surface); border: var(--hairline) solid var(--hairline-c); border-radius: 999px; padding: var(--s-1); }
.seg { display: flex; flex-direction: column; align-items: center; min-width: 118px; padding: var(--s-1) var(--s-4); border: 0; border-radius: 999px; background: transparent; color: var(--fg-2); cursor: pointer; transition: background var(--ease), color var(--ease); line-height: 1.15; }
.seg b { font-size: var(--t-sm); font-weight: 600; }
.seg span { font-size: var(--t-xs); color: var(--muted); }
.seg:hover { background: var(--surface-2); color: var(--fg); }
.seg[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.seg[aria-selected="true"] span { color: color-mix(in srgb, var(--bg) 70%, var(--fg)); }
.seg.body-seg { min-width: 90px; }

.scenario-bar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); font-size: var(--t-sm); color: var(--fg-2); flex-wrap: wrap; }
.scenario-bar .who { font-size: var(--t-md); color: var(--fg); }
.scenario-bar .who b { font-weight: 600; }
.scenario-bar .quit-flag { color: var(--sev-2); }

.main { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-5) var(--s-6); }
.view { display: none; }
.view.active { display: block; animation: fade var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Panels & focal layout
   ========================================================================== */
.panel { background: var(--surface); border: var(--hairline) solid var(--hairline-c); border-radius: var(--radius); padding: var(--s-5); }
.stage { position: relative; height: min(58vh, 640px); min-height: 360px; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: var(--hairline) solid var(--hairline-c); }
.stage > canvas.chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .overlay-tl { position: absolute; top: var(--s-4); left: var(--s-4); display: flex; gap: var(--s-2); z-index: 2; }
.stage .overlay-tr { position: absolute; top: var(--s-4); right: var(--s-4); display: flex; gap: var(--s-2); z-index: 2; }
.stage .overlay-b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.stage .hint { position: absolute; bottom: var(--s-3); left: 50%; transform: translateX(-50%); font-size: var(--t-xs); color: var(--muted); background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 2px 10px; border-radius: 999px; pointer-events: none; transition: opacity var(--ease); }

.statement { font-size: var(--t-xl); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; margin: var(--s-5) 0 var(--s-4); min-height: 2.6em; transition: opacity var(--ease); text-wrap: balance; }
.statement .k { color: var(--accent); }
.statement .organ-link { color: inherit; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.statement .organ-link:hover { text-decoration-color: var(--fg); }

.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.ro { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--sev-0); background: var(--surface); border-radius: var(--radius-sm); transition: border-color 400ms ease; }
.ro .l { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ro .v { font-size: var(--t-2xl); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ro .v small { font-size: var(--t-sm); font-weight: 400; color: var(--muted); margin-left: 4px; }
.ro .d { font-size: var(--t-xs); color: var(--fg-2); }

.actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0 var(--s-4); }
.actions .grow { flex: 1; min-width: 200px; }
.actions .time { font-variant-numeric: tabular-nums; min-width: 8ch; color: var(--fg-2); font-size: var(--t-sm); }
.actions label { font-size: var(--t-sm); color: var(--fg-2); }

details.drawer { border-top: var(--hairline) solid var(--hairline-c); margin-top: var(--s-4); }
details.drawer > summary { cursor: pointer; list-style: none; padding: var(--s-4) 0; font-size: var(--t-sm); color: var(--fg-2); display: flex; align-items: center; gap: var(--s-2); }
details.drawer > summary::-webkit-details-marker { display: none; }
details.drawer > summary::before { content: '▸'; transition: transform var(--ease); display: inline-block; color: var(--muted); }
details.drawer[open] > summary::before { transform: rotate(90deg); }
details.drawer > summary:hover { color: var(--fg); }
.drawer-body { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); }
.chart-block .cap { font-size: var(--t-sm); color: var(--fg-2); margin: 0 0 var(--s-2); }
.chart-block .cap b { color: var(--fg); font-weight: 600; }
canvas.chart { width: 100%; display: block; }

/* tables (detail drawers) */
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--hairline) solid var(--hairline-c); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
td .src { color: var(--muted); font-size: var(--t-xs); }

/* severity chips */
.sev { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); padding: 2px 8px; border-radius: 999px; border: var(--hairline) solid var(--hairline-c); color: var(--fg-2); white-space: nowrap; }
.sev .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sev-swatch { position: relative; display: inline-block; width: 22px; height: 22px; border-radius: 5px; overflow: hidden; }
.sev-swatch::after { content: ''; position: absolute; inset: 0; background-image: var(--hatch, none); }
.sev-b5 .sev-swatch, .sw.b5 { box-shadow: inset 0 0 0 1.5px var(--sev-5-outline); }

/* legend bar */
.legend-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-5); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-top: var(--hairline) solid var(--hairline-c); font-size: var(--t-xs); overflow-x: auto; }
.legend-bar .lt { color: var(--muted); white-space: nowrap; }
.legend-item { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; color: var(--fg-2); position: relative; cursor: default; }
.legend-item b { color: var(--fg); font-weight: 600; }
.legend-item .ic { color: var(--muted); }
.legend-item .tip { position: absolute; bottom: calc(100% + 8px); left: 0; width: 240px; background: var(--surface-2); border: var(--hairline) solid var(--hairline-c); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); white-space: normal; opacity: 0; pointer-events: none; transition: opacity var(--ease); color: var(--fg-2); }
.legend-item:hover .tip, .legend-item:focus-within .tip { opacity: 1; }

/* ==========================================================================
   Scenario drawer (controls)
   ========================================================================== */
.drawer-panel { position: fixed; inset: 0; z-index: 30; display: none; }
.drawer-panel.open { display: block; }
.drawer-panel .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: fade var(--ease); }
.drawer-panel .sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); border-left: var(--hairline) solid var(--hairline-c); overflow: auto; padding: var(--s-5); animation: slide var(--ease); display: grid; gap: var(--s-5); align-content: start; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.controls { display: grid; gap: var(--s-4); }
.controls h3 { margin-top: var(--s-3); }
.field { display: grid; gap: 2px; }
.field-head { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-sm); }
.field-head label { flex: 1; color: var(--fg-2); }
.field-head .value { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.why { width: 22px; height: 22px; border-radius: 50%; border: var(--hairline) solid var(--hairline-c); background: transparent; color: var(--muted); font-size: var(--t-xs); cursor: pointer; line-height: 1; transition: color var(--ease), border-color var(--ease); }
.why:hover { color: var(--fg); border-color: var(--fg-2); }
.why-note, .hint-text { font-size: var(--t-xs); color: var(--muted); }
.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.derived { font-size: var(--t-xs); color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); }
.derived dd { margin: 0; color: var(--fg-2); }

/* ==========================================================================
   3D stage & body view
   ========================================================================== */
.body3d { position: absolute; inset: 0; }
.body3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.body-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-5); align-items: start; }
.organ-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.organ-list .btn { gap: 6px; }
.organ-list .btn .sw { width: 10px; height: 10px; border-radius: 3px; }
.detail h2 { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.detail ul { padding-left: 1.1rem; margin: var(--s-2) 0; }
.detail li { margin-bottom: var(--s-1); }
.detail .mech { color: var(--fg-2); }
.svg-fallback .body-svg { width: 100%; height: auto; }
.organ { cursor: pointer; }
.organ-shape { stroke: var(--muted); stroke-width: 1.2; transition: fill 400ms ease, stroke var(--ease); }
.organ:hover .organ-shape, .organ:focus .organ-shape, .organ.selected .organ-shape { stroke: var(--accent); stroke-width: 2.5; }
.organ text { font-size: 9px; fill: var(--fg); pointer-events: none; }
.body-outline { fill: var(--surface-2); stroke: var(--hairline-c); }

/* puff strip under the 3D stage */
#now-stage .hint { bottom: 76px; }
.puffstrip { display: block; width: 100%; height: 64px; background: color-mix(in srgb, var(--surface) 85%, transparent); border-top: var(--hairline) solid var(--hairline-c); }

/* milestones */
.milestones { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.milestones li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: var(--hairline) solid var(--hairline-c); opacity: .45; transition: opacity 300ms ease; font-size: var(--t-sm); }
.milestones li.reached { opacity: 1; }
.milestones .when { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.mstrip { display: flex; gap: 2px; align-items: flex-end; height: 40px; }
.mstrip .tick { flex: 1; border-radius: 3px 3px 0 0; background: var(--surface-2); height: 40%; transition: height 300ms ease, background 300ms ease; position: relative; }
.mstrip .tick.reached { height: 100%; }
.mstrip .tick span { position: absolute; top: 100%; left: 0; font-size: 10px; color: var(--muted); white-space: nowrap; }
.mstrip .tick:nth-child(even) span { display: none; }
@media (max-width: 900px) { .mstrip .tick:not(:nth-child(4n+1)) span { display: none; } }
.rev-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.rev-cols ul { padding-left: 1rem; font-size: var(--t-sm); color: var(--fg-2); }
.rev-cols li b { color: var(--fg); }

/* quit moment */
.quit-hero { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.flash { animation: flash 900ms ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 40% { box-shadow: 0 0 0 14px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ==========================================================================
   Help / walkthrough
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 40; display: none; }
.modal.open { display: block; }
.modal .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 32px)); max-height: 85vh; overflow: auto; background: var(--surface); border: var(--hairline) solid var(--hairline-c); border-radius: var(--radius); padding: var(--s-6); display: grid; gap: var(--s-4); animation: fade var(--ease); }
.modal .card h2 { font-size: var(--t-xl); }
.tour-spot { position: fixed; z-index: 39; border-radius: var(--radius); box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 3px var(--accent); pointer-events: none; transition: all 300ms ease; }
.tour-card { position: fixed; z-index: 41; width: min(360px, calc(100% - 32px)); background: var(--surface); border: var(--hairline) solid var(--hairline-c); border-radius: var(--radius); padding: var(--s-5); display: grid; gap: var(--s-3); box-shadow: 0 20px 60px rgba(0,0,0,.4); transition: top 300ms ease, left 300ms ease; }
.tour-card .step { font-size: var(--t-xs); color: var(--muted); }
.tour-card h2 { font-size: var(--t-lg); }
.tour-card p { color: var(--fg-2); font-size: var(--t-sm); }
.sources-list { font-size: var(--t-sm); padding-left: 1.2rem; }
.sources-list li { margin-bottom: var(--s-1); }
.help-tabs { display: flex; gap: var(--s-2); }

/* ==========================================================================
   Responsive & motion
   ========================================================================== */
@media (max-width: 1000px) {
  .hdr { grid-template-columns: 1fr auto; }
  .hdr .segments { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; }
  .seg { min-width: 100px; }
  .body-layout { grid-template-columns: 1fr; }
  .statement { font-size: var(--t-lg); }
  .ro .v { font-size: var(--t-xl); }
}
@media (max-width: 900px) {
  body { padding-bottom: 104px; }
  .legend-bar { flex-wrap: wrap; gap: var(--s-2) var(--s-4); overflow: visible; }
  .legend-bar .lt { width: 100%; }
}
@media (max-width: 640px) {
  .main { padding: 0 var(--s-4) var(--s-6); }
  .stage { height: 52vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Pass 3: instrument feedback
   ========================================================================== */
.ro { position: relative; overflow: hidden; }
.ro .arrow { font-size: var(--t-sm); margin-left: 6px; opacity: 0; transition: opacity var(--ease); vertical-align: middle; }
.ro .arrow.show { opacity: 1; }
.ro .arrow.worse { color: var(--sev-4); }
.ro .arrow.better { color: var(--sev-1); }
.ro.flash-worse { animation: roflash-worse 1400ms ease; }
.ro.flash-better { animation: roflash-better 1400ms ease; }
@keyframes roflash-worse { 0% { background: var(--surface); } 15% { background: color-mix(in srgb, var(--sev-4) 28%, var(--surface)); } 100% { background: var(--surface); } }
@keyframes roflash-better { 0% { background: var(--surface); } 15% { background: color-mix(in srgb, var(--sev-1) 28%, var(--surface)); } 100% { background: var(--surface); } }

.delta { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: var(--s-4) 0 var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); border-left: 6px solid var(--sev-4); background: color-mix(in srgb, var(--sev-4) 10%, var(--surface)); text-wrap: balance; }
.delta.better { border-left-color: var(--sev-1); background: color-mix(in srgb, var(--sev-1) 10%, var(--surface)); }
.delta .arr { font-size: var(--t-xl); margin-right: 6px; vertical-align: middle; }
.delta.pop { animation: pop 500ms cubic-bezier(.2,1.2,.3,1); }
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
.delta[hidden] { display: none; }

.cite { font-size: 0.72em; color: var(--muted); cursor: pointer; margin-left: 2px; vertical-align: super; line-height: 0; user-select: none; }
.cite:hover, .cite:focus { color: var(--accent); }
.cite-pop { position: fixed; z-index: 60; width: min(360px, calc(100% - 24px)); background: var(--surface); border: var(--hairline) solid var(--hairline-c); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); box-shadow: 0 16px 40px rgba(0,0,0,.35); display: grid; gap: var(--s-2); }
.cite-pop[hidden] { display: none; }
.cite-pop b { color: var(--muted); font-weight: 500; font-size: var(--t-xs); }

.meters { display: grid; gap: 4px; }
.meter { display: grid; grid-template-columns: 5.2rem 1fr; align-items: center; gap: var(--s-2); background: transparent; border: 0; padding: 2px 4px; border-radius: 6px; cursor: pointer; text-align: left; color: var(--fg-2); font-size: var(--t-xs); transition: background var(--ease); }
.meter:hover { background: var(--surface-2); color: var(--fg); }
.meter .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter .bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.meter .fill { height: 100%; width: 6%; border-radius: 3px; transition: width 600ms cubic-bezier(.2,.8,.2,1), background 400ms ease; }
.meter.changed { animation: meterflash 900ms ease; }
@keyframes meterflash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.stage .meters-overlay { position: absolute; right: var(--s-3); bottom: 76px; width: 200px; z-index: 2; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(6px); border: var(--hairline) solid var(--hairline-c); border-radius: var(--radius-sm); padding: var(--s-2); }
#body-stage .meters-overlay { bottom: var(--s-3); }

.presets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.preset-bar { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.preset-bar .lt { font-size: var(--t-xs); color: var(--muted); }
.btn.small { padding: 4px 10px; font-size: var(--t-xs); }

details.how { margin-top: var(--s-3); }
details.how > summary { cursor: pointer; font-size: var(--t-sm); color: var(--fg-2); }
details.how p { color: var(--fg-2); margin-top: var(--s-2); }
.detail .oneliner { font-size: var(--t-md); color: var(--fg); }
.stage .split-label { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--t-xs); color: var(--muted); padding: 2px 8px; background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 999px; z-index: 2; pointer-events: none; }
.stage .split-label.l { left: var(--s-3); } .stage .split-label.r { right: var(--s-3); }
@media (max-width: 900px) { .stage .meters-overlay { display: none; } }

/* ==========================================================================
   Pass 4: stat visualisations (every statistic drawn, never listed)
   ========================================================================== */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; }
.stat { --stat-c: var(--sev-0); background: var(--surface-2); border: var(--hairline) solid var(--hairline-c); border-left: 4px solid var(--stat-c); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 400ms ease; position: relative; }
.stat.hero { grid-column: 1 / -1; }
.stat > summary { list-style: none; cursor: pointer; padding: var(--s-3) var(--s-3) var(--s-2); display: grid; gap: var(--s-1); }
.stat > summary::-webkit-details-marker { display: none; }
.stat > summary:hover { background: color-mix(in srgb, var(--surface) 50%, var(--surface-2)); }
.stat > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.stat-l { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
.stat-num { font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.stat-num small { font-size: var(--t-xs); font-weight: 400; color: var(--muted); margin-left: 3px; }
.stat.hero .stat-num { font-size: var(--t-2xl); }
.stat-num .arrow { font-size: var(--t-sm); margin-left: 4px; opacity: 0; transition: opacity var(--ease); }
.stat-num .arrow.show { opacity: 1; } .stat-num .arrow.worse { color: var(--sev-4); } .stat-num .arrow.better { color: var(--sev-1); }
.stat.flash-worse { animation: roflash-worse 1400ms ease; } .stat.flash-better { animation: roflash-better 1400ms ease; }
.stat-body { display: grid; gap: var(--s-2); }
.stat.hero .stat-body:not(.has-icons) { grid-template-columns: 1fr; }
.stat-mean { font-size: var(--t-sm); color: var(--fg); line-height: 1.35; }
.stat.hero .stat-mean { font-size: var(--t-md); }
.stat-more { padding: 0 var(--s-3) var(--s-3); color: var(--fg-2); display: grid; gap: var(--s-1); border-top: var(--hairline) dashed var(--hairline-c); padding-top: var(--s-2); }
.stat-cap { font-size: var(--t-xs); color: var(--fg-2); line-height: 1.35; }
.stat-cap b { color: var(--fg); }
.stat > summary::after { content: '▸ how this works'; font-size: var(--t-xs); color: var(--muted); justify-self: end; }
.stat[open] > summary::after { content: '▾ how this works'; }

/* SVG parts (all colours from the design system; --stat-c is the severity colour) */
.sv { width: 100%; height: auto; display: block; font-family: var(--font); overflow: visible; }
.sv text { font-size: 10px; fill: var(--fg-2); }
.sv .sv-lbl { font-size: 9px; fill: var(--muted); }
.sv .sv-vlbl { font-size: 10px; font-weight: 600; fill: var(--fg); }
.sv .sv-worse { font-size: 8.5px; fill: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.sv .sv-track { fill: var(--hairline-c); }
.sv .sv-track-l { stroke: var(--hairline-c); stroke-width: 2; }
.sv .sv-fill { fill: var(--stat-c); opacity: .55; transition: fill 400ms ease; }
.sv .sv-band { fill: var(--sev-0); opacity: .18; }
.sv .sv-band.warn { fill: var(--sev-4); opacity: .18; }
.sv .sv-ref { stroke: var(--fg); stroke-width: 2; }
.sv .sv-ref-lbl { fill: var(--fg); font-weight: 600; }
.sv .sv-mark { stroke: var(--muted); stroke-width: 1; }
.sv .sv-mark-d { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sv .sv-marker { fill: var(--stat-c); stroke: var(--bg); stroke-width: 1.5; transition: fill 400ms ease; }
.sv .sv-ghost, .sv .sv-ghost-line, .sv .sv-ghost-path, .sv .sv-ghost-rect { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; opacity: 0; visibility: hidden; }
.sv .ghost-anim { animation: svghost 3s ease forwards; }
@keyframes svghost { 0% { opacity: .95; } 70% { opacity: .6; } 100% { opacity: 0; } }
.sv .sv-b, .sv .sv-b-line { fill: none; stroke: var(--fg-2); stroke-width: 1.5; }
.sv .sv-tank { fill: none; stroke: var(--fg-2); stroke-width: 1.5; }
.sv .sv-kept { fill: var(--sev-0); opacity: .75; }
.sv .sv-you { stroke: var(--stat-c); stroke-width: 2; }
.sv .sv-lost-lbl { font-size: 10px; font-weight: 700; fill: var(--fg); }
.sv .sv-blob { fill: var(--stat-c); stroke: var(--bg); stroke-width: 1; opacity: .9; }
.sv .sv-refobj { fill: none; stroke: var(--fg-2); stroke-width: 1.2; }
.sv .sv-area { opacity: .18; }
.sv .sv-line { fill: none; stroke: var(--stat-c); stroke-width: 2; }
.sv .sv-never { fill: none; stroke: var(--fg-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sv .sv-now { stroke: var(--bg); stroke-width: 1.5; }
.sv .sv-now-ref { fill: var(--fg-2); }
.sv .sv-now-line { stroke: var(--accent); stroke-width: 1; }
.sv .sv-trail { stroke-width: 4; opacity: .5; }
.sv .sv-dot { stroke: var(--bg); stroke-width: 1.5; }
.sv .sv-heart { stroke: var(--bg); stroke-width: 1; }
.sv .sv-basebar { fill: var(--sev-0); }
.sv .sv-multbar { stroke: var(--bg); stroke-width: .5; }
.sv .sv-alt { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 2 2; }

/* icon arrays: 100 figures; base filled dark, excess in the severity colour, hatched for the second channel */
.icons { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; max-width: 320px; }
.icons .ic { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--hairline-c); background: transparent; transition: background 300ms ease, border-color 300ms ease; }
.icons .ic.base { background: var(--fg-2); border-color: var(--fg-2); }
.icons .ic.cur { border-color: var(--fg); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.icons .ic.half { background: linear-gradient(90deg, var(--fg-2) 50%, transparent 50%); }
.icons .ic.ghost { box-shadow: 0 0 0 2px var(--accent); animation: svghost 3s ease forwards; }
.stat.hero .icons { max-width: 420px; }

/* reference strip under readout numbers */
.ref-strip { width: 100%; height: 12px; display: block; margin-top: 4px; }
.ref-strip .sv-track { fill: var(--hairline-c); } .ref-strip .sv-band { fill: var(--sev-0); opacity: .25; } .ref-strip .sv-fill { opacity: .5; } .ref-strip .sv-ref { fill: var(--fg); } .ref-strip .sv-marker { stroke: var(--bg); stroke-width: 1; }

/* compact grids used in drawers */
.stat-grid.compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.stat-grid.compact .stat.hero { grid-column: auto; }
.stat-grid.compact .stat.hero .stat-num { font-size: var(--t-lg); }
@media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sv .ghost-anim, .icons .ic.ghost { animation: none; opacity: .8; } }
/* stat sizing: SVGs are capped so text stays at design size; hero puts the picture beside the meaning */
.stat-body { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.stat-body .sv { width: 100%; max-width: 330px; }
.kind-volume .sv { max-width: 190px; }
.kind-icons .icons, .kind-mult .icons { width: 100%; max-width: 300px; }
.stat.hero > summary { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.stat.hero .stat-head, .stat.hero > summary::after { grid-column: 1 / -1; }
.stat.hero .stat-body { grid-column: 1; }
.stat.hero .stat-mean { grid-column: 2; }
.stat.hero .stat-body .sv { max-width: 420px; }
.stat.hero.kind-volume .sv { max-width: 230px; }
.stat.hero .icons { max-width: 360px; }
@media (max-width: 900px) { .stat.hero > summary { grid-template-columns: 1fr; } .stat.hero .stat-body, .stat.hero .stat-mean { grid-column: 1; } }
.stat-grid.one-col { grid-template-columns: 1fr; }
.stat-dir { width: 100%; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ==========================================================================
   Pass 5: stat-card layout — one card per row, everything stacked, full width (D41)
   ========================================================================== */
.body-layout { grid-template-columns: 1fr; }
.detail { max-width: 880px; }
.stat-grid, .stat-grid.compact, .stat-grid.one-col { grid-template-columns: 1fr; gap: var(--s-4); margin: var(--s-4) 0; }
.stat.hero, .stat-grid.compact .stat.hero { grid-column: auto; }
.stat > summary, .stat.hero > summary { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); }
.stat.hero .stat-head, .stat.hero .stat-body, .stat.hero .stat-mean, .stat.hero > summary::after { grid-column: auto; }
.stat-head { align-items: baseline; }
.stat-l { font-size: var(--t-sm); }
.stat-num { font-size: var(--t-xl); }
.stat.hero .stat-num { font-size: var(--t-2xl); }
.stat-num small { font-size: var(--t-sm); }
/* the picture: full width, centred, never beside text */
.stat-body, .stat.hero .stat-body { display: grid; grid-template-columns: 1fr; justify-items: center; gap: var(--s-3); width: 100%; }
.stat-body .sv, .stat.hero .stat-body .sv, .kind-mass .sv, .kind-icons .icons, .kind-mult .icons { width: 100%; max-width: 560px; }
.kind-volume .sv, .stat.hero.kind-volume .sv { max-width: 300px; }
.kind-pulse .sv, .kind-race .sv { max-width: 460px; }
.stat-dir { text-align: center; font-size: var(--t-sm); }
/* icon arrays: legible dots that reflow to more columns instead of shrinking */
.icons, .stat.hero .icons, .kind-icons .icons, .kind-mult .icons { width: 100%; max-width: none; grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); gap: 4px; }
.icons .ic { min-width: 16px; min-height: 16px; }
/* in-card text: never below body size */
.stat-mean, .stat.hero .stat-mean { font-size: var(--t-md); line-height: 1.45; }
.stat.hero .stat-mean { font-size: var(--t-lg); line-height: 1.35; }
.stat-cap { font-size: var(--t-md); line-height: 1.45; color: var(--fg-2); }
.stat-more { padding: var(--s-3) var(--s-4) var(--s-4); gap: var(--s-2); }
.stat-more p.small { font-size: var(--t-md); line-height: 1.5; }
.stat-more p.tiny { font-size: var(--t-sm); }
.stat > summary::after, .stat[open] > summary::after { font-size: var(--t-sm); }
.detail .oneliner { font-size: var(--t-lg); }
.detail .panel-note { font-size: var(--t-sm); }
/* legend: always fully visible, wrapping; the page reserves its measured height (set from app.js) */
.legend-bar { flex-wrap: wrap; overflow: visible; gap: var(--s-2) var(--s-4); }
.legend-item { flex: none; }
body { padding-bottom: calc(var(--legend-h, 64px) + var(--s-4)); }
@media (max-width: 900px) { body { padding-bottom: calc(var(--legend-h, 104px) + var(--s-4)); } }