/* ===========================================================================
   style.css — GW Probe

   EVERY visual decision lives in the :root block below. Nothing further down
   this file may hardcode a colour, a size or a spacing value; if the page
   should look different, only :root should need editing. --accent is the one
   knob the page is tuned on: it retunes the nav underline, eyebrows, key
   figures, the shadow outline, links, bars, the glows and the focus ring.
   --pass / --fail are semantic only (badges, verdicts, the error banner).

   The background is a single fixed asset (img/space_bg.jpg, written by
   tools/space.py) plus two tiled gradient starfields and two accent glows.
   The only ANIMATED things on the page are the Did You Know bar's 30-second
   slide and the shadow boundary redrawing under a slider: the first is paused
   on hover and focus and becomes a cross-fade under prefers-reduced-motion,
   the second carries information.

   Breakpoints are the one exception to the :root rule — CSS cannot resolve
   var() inside a media query — and there are three: 860px, 720px and 480px.
   =========================================================================== */

:root {
  /* ground */
  --bg:            #05070c;   /* page ground; also the shadow interior */
  --bg-deep:       #0a1a3a;   /* bottom of the vertical ground gradient */
  --panel:         rgba(13, 17, 27, 0.82);  /* translucent: space shows through */
  --panel-solid:   #0d111b;   /* where translucency would hurt legibility */
  --line:          #1e2533;
  --line-soft:     #161c28;

  /* text */
  --text:          #e8ecf4;
  --text-mid:      #c3cada;   /* body copy on panels */
  --text-dim:      #8b93a7;   /* captions, axis labels, metadata */

  /* accent — the one colour the page is tuned on. Tweakable. */
  --accent:        #5b9dff;
  --accent-soft:   #9cc2ff;   /* links */
  --accent-bright: #cfe0ff;   /* link hover */

  /* reserved semantics — never used decoratively */
  --pass:          #7ee59a;
  --fail:          #ff8a8a;

  /* type */
  --font-display:  'Times New Roman', Times, serif;
  --font-body:     Helvetica, Arial, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --scale-hero:    clamp(2.4rem, 5.6vw, 4.25rem);
  --scale-h2:      clamp(1.75rem, 3.2vw, 2.75rem);
  --scale-h3:      1.375rem;
  --measure:       68ch;

  /* rhythm */
  --gap:           1.25rem;
  --gap-sm:        calc(var(--gap) * 0.5);
  --gap-lg:        calc(var(--gap) * 2);
  --section-pad:   clamp(4.5rem, 11vh, 7rem);
  --radius:        10px;
  --nav-h:         3.75rem;
  --content-max:   min(74rem, 94vw);

  /* derived */
  --accent-dim:    color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-wash:   color-mix(in srgb, var(--accent) 6%, transparent);
  --pass-bg:       color-mix(in srgb, var(--pass) 13%, transparent);
  --fail-bg:       color-mix(in srgb, var(--fail) 13%, transparent);
  --ground:        linear-gradient(180deg,
                     var(--bg) 0%, var(--bg) 25%, var(--bg-deep) 100%);

  /* ---- component tokens: the rest of the page's sizes and surfaces ---- */
  --plate:          #f5f7fb;  /* the light plate behind white matplotlib figures */
  --on-accent:      var(--bg);
  --hairline:       1px;
  --rule:           2px;
  --focus-w:        2px;
  --focus-off:      3px;
  --gutter:         1.5rem;
  --grid-min:       340px;
  --grid-gap:       1.5rem;
  --tile-min:       200px;
  --hit:            44px;          /* minimum interactive target */
  --summary-lh:     28px;
  --plate-pad:      0.875rem;
  --pad-sm:         0.375rem;
  --pad-xs:         0.15rem;
  --nav-blur:       8px;
  --nav-glass:      color-mix(in srgb, var(--bg) 78%, transparent);
  --progress-h:     2px;
  --statement-max:  30ch;
  --hero-max:       20ch;
  --ctl-label:      7.5rem;
  --ctl-out:        4.5rem;
  --bar-h:          1.375rem;
  --bar-label:      minmax(7rem, 14rem);
  --bar-val:        8.5rem;
  --bar-val-sm:     5.5rem;
  --null-h:         9rem;
  --badge-w:        4.2rem;

  --fs-eyebrow:     13px;
  --fs-caption:     13px;
  --fs-label:       14px;
  --fs-small:       0.875rem;
  --fs-body:        1rem;
  --fs-lede:        1.125rem;
  --fs-hook:        1.25rem;
  --fs-stat:        2.25rem;
  --fs-stat-long:   1.375rem;
  --fs-readout:     0.75rem;
  --fs-statement:   2.125rem;
  --fs-mono:        0.8125rem;
  --fs-th:          0.75rem;
  --sup:            0.6em;
  --lh-body:        1.62;
  --lh-tight:       1.15;
  --track-eyebrow:  0.14em;
  --track-th:       0.06em;
  --track-hero:     -0.01em;
  --underline-off:  0.18em;

  /* starfields: two tiled layers at different tile sizes, so the repeat is
     not legible. White and faint blue, 1–2px. */
  --star-white:     rgba(255, 255, 255, 0.85);
  --star-white-dim: rgba(255, 255, 255, 0.45);
  --star-blue:      rgba(186, 212, 255, 0.75);
  --star-blue-dim:  rgba(156, 194, 255, 0.4);
  --stars-tile-a:   400px;
  --stars-tile-b:   700px;
  --stars-a:
    radial-gradient(circle at 23px 41px,   var(--star-white) 0 1px, transparent 1.6px),
    radial-gradient(circle at 141px 302px, var(--star-blue) 0 1px, transparent 1.6px),
    radial-gradient(circle at 288px 77px,  var(--star-white-dim) 0 1px, transparent 1.5px),
    radial-gradient(circle at 352px 214px, var(--star-white) 0 1.4px, transparent 2px),
    radial-gradient(circle at 199px 158px, var(--star-blue-dim) 0 1px, transparent 1.5px),
    radial-gradient(circle at 67px 366px,  var(--star-white-dim) 0 1px, transparent 1.5px),
    radial-gradient(circle at 318px 351px, var(--star-blue) 0 1px, transparent 1.6px),
    radial-gradient(circle at 109px 219px, var(--star-white-dim) 0 0.8px, transparent 1.3px);
  --stars-b:
    radial-gradient(circle at 61px 512px,  var(--star-blue) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 433px 96px,  var(--star-white) 0 1px, transparent 1.6px),
    radial-gradient(circle at 612px 388px, var(--star-white-dim) 0 1px, transparent 1.5px),
    radial-gradient(circle at 247px 641px, var(--star-blue-dim) 0 1px, transparent 1.5px),
    radial-gradient(circle at 509px 603px, var(--star-white) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 154px 233px, var(--star-white-dim) 0 1px, transparent 1.5px),
    radial-gradient(circle at 671px 45px,  var(--star-blue) 0 1px, transparent 1.6px),
    radial-gradient(circle at 355px 455px, var(--star-white-dim) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 18px 140px,  var(--star-blue-dim) 0 1px, transparent 1.5px);

  /* glows: decoration only. Peak alphas are capped so text over them keeps
     the contrast floor (README: 4.5:1 body, 3:1 large text and UI). */
  --glow-hero:      radial-gradient(ellipse 58% 52% at 72% 32%,
                      color-mix(in srgb, var(--accent) 30%, transparent),
                      transparent 72%);
  --glow-hero-h:    min(78rem, 140vh);
  --glow-side:      radial-gradient(ellipse 50% 50% at 50% 50%,
                      color-mix(in srgb, var(--accent) 20%, transparent),
                      transparent 70%);
  --glow-side-w:    min(46rem, 90vw);
  --glow-side-h:    40rem;

  /* the Did You Know bar: interval_ms (30 s) of dwell + 1.2 s in + 1.2 s out */
  --fn-duration:    32.4s;
}

/* ─────────────────────────────── base ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--gap)); }

body {
  margin: 0;
  position: relative;            /* the page root the background layers fill */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); }
h2 { font-size: var(--scale-h2); margin: 0 0 var(--gap-sm); }
h3 { font-size: var(--scale-h3); margin: 0 0 var(--gap-sm); }
p  { margin: 0 0 var(--gap); max-width: var(--measure); }

a { color: var(--accent-soft); text-underline-offset: var(--underline-off); }
a:hover { color: var(--accent-bright); }

:focus-visible {
  outline: var(--focus-w) solid var(--accent);
  outline-offset: var(--focus-off);
}

.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }
.dim { color: var(--text-dim); }
.accent { color: var(--accent); }

/* ──────────────────────── background layers ──────────────────────── */

.space, .stars, .stars2, .glow-hero {
  position: absolute; inset: 0; pointer-events: none;
}
.space {
  /* the photographic layer, lightened over the vertical ground gradient */
  background-image: url(img/space_bg.jpg), var(--ground);
  background-size: 100% auto, 100% 100%;
  background-repeat: repeat-y, no-repeat;
  background-position: center top, center top;
  background-blend-mode: lighten;
}
.stars  { background-image: var(--stars-a); background-size: var(--stars-tile-a) var(--stars-tile-a); }
.stars2 { background-image: var(--stars-b); background-size: var(--stars-tile-b) var(--stars-tile-b); }
.glow-hero { bottom: auto; height: var(--glow-hero-h); background: var(--glow-hero); }

.content { position: relative; z-index: 1; overflow-x: clip; }

/* ─────────────────────────────── nav ─────────────────────────────── */

#nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--gap);
  padding: 0 max(var(--gutter), calc((100vw - var(--content-max)) / 2));
  background: var(--nav-glass);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border-bottom: var(--hairline) solid var(--line-soft);
}
#nav .brand {
  font-family: var(--font-display); font-size: var(--fs-hook);
  white-space: nowrap; color: var(--text);
}
.nav-links {
  display: flex; gap: var(--gap); margin-left: auto;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: var(--hit);
  color: var(--text-mid); text-decoration: none; font-size: var(--fs-label);
  border-bottom: var(--rule) solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent); }

#progress {
  position: fixed; top: var(--nav-h); left: 0; z-index: 51;
  height: var(--progress-h); width: 0; background: var(--accent);
}

#errors { position: relative; z-index: 60; padding: 0 var(--gutter); }

/* ───────────────────────────── layout ───────────────────────────── */

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section-pad) 0; }
.section > .wrap > header { margin-bottom: var(--gap-lg); }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--gap-sm);
}
.lede { color: var(--text-mid); font-size: var(--fs-lede); max-width: var(--measure); }

.grid {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  align-items: start;
}
.stack { display: grid; gap: var(--grid-gap); align-content: start; }
/* Grid items default to min-width: auto, so a long <pre> or table inside one
   widens its column past the viewport. Let them shrink; their own
   containers scroll instead. */
.grid > *, .stack > *, .figpair > *, .tiles > * { min-width: 0; }
.mt { margin-top: var(--gap-lg); }

.panel {
  background: var(--panel);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
  color: var(--text-mid);
}
.panel > :last-child { margin-bottom: 0; }
.panel h3 { color: var(--text); }
.panel p { max-width: none; }
.panel-note { font-size: var(--fs-small); color: var(--text-dim); margin: var(--gap-sm) 0 0; max-width: none; }
.solid { background: var(--panel-solid); }

/* ───────────────────────────── hero ───────────────────────────── */

.hero { padding: var(--section-pad) 0 var(--gap-lg); }
.hero h1 {
  font-size: var(--scale-hero); letter-spacing: var(--track-hero);
  max-width: var(--hero-max); margin: 0 0 var(--gap);
}
.hero .lede { margin-bottom: var(--gap-lg); }

.tiles {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr));
  margin: 0 0 var(--gap-lg);
}
.tile { display: flex; flex-direction: column; gap: var(--pad-sm); }
.tile .value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-stat); line-height: var(--lh-tight); color: var(--text);
}
.tile.long .value { font-size: var(--fs-stat-long); }
.tile .value sup { font-size: var(--sup); }
.tile.key .value { color: var(--accent); }
.tile.context .value { color: var(--text-dim); }
.tile .label { font-size: var(--fs-label); color: var(--text-dim); margin: 0; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--hit); padding: 0 var(--gap-lg);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.btn-primary:hover { background: var(--accent-bright); color: var(--on-accent); }

/* ─────────────────────── the Did You Know bar ─────────────────────── */

.fn-wrap { padding: 0 0 var(--gap-lg); }
.fn {
  overflow: hidden;              /* the sliding text never spills into the gutters */
  background: var(--panel);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}
.factbar-inner { padding: var(--gap) var(--gap-lg); }
.fact-eyebrow {
  display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--pad-sm);
}
.fact-hook { font-size: var(--fs-hook); line-height: var(--lh-tight); color: var(--text); margin: 0 0 var(--pad-sm); max-width: none; }
.fact-body { font-size: var(--fs-small); color: var(--text-mid); margin: 0; max-width: none; }

@keyframes fnslide {
  0%    { transform: translateX(110%);  opacity: 0 }
  3.7%  { transform: translateX(0);     opacity: 1 }
  96.3% { transform: translateX(0);     opacity: 1 }
  100%  { transform: translateX(-110%); opacity: 0 }
}
@keyframes fnfade {
  0%    { opacity: 0 }
  3.7%  { opacity: 1 }
  96.3% { opacity: 1 }
  100%  { opacity: 0 }
}
.fn-item { animation: fnslide var(--fn-duration) ease-in-out infinite; }
.fn:hover .fn-item,
.fn:focus-within .fn-item,
.fn.is-paused .fn-item { animation-play-state: paused; }

/* field-note asides beside a panel they explain */
.note {
  border-left: var(--rule) solid var(--accent);
  padding: var(--pad-sm) 0 var(--pad-sm) var(--gap);
  background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0;
}
.note .fact-eyebrow { margin-bottom: var(--pad-xs); }
.note b { display: block; color: var(--text); font-family: var(--font-display);
  font-size: var(--fs-hook); font-weight: 400; line-height: var(--lh-tight); margin-bottom: var(--pad-sm); }
.note p { font-size: var(--fs-small); color: var(--text-mid); margin: 0; }
.notes { display: grid; gap: var(--gap); }

/* ───────────────────────────── explorer ───────────────────────────── */

.canvas-box { position: relative; }
#shadow-canvas {
  width: 100%; aspect-ratio: 1; display: block;
  background: var(--bg);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}
.explorer-alert {
  position: absolute; inset: var(--gap);
  display: flex; align-items: center;
  background: var(--panel-solid); color: var(--fail);
  border: var(--hairline) solid var(--fail); border-radius: var(--radius);
  padding: var(--gap); font-size: var(--fs-small);
}
.explorer-alert p { margin: 0; max-width: none; }

.controls { display: grid; gap: var(--pad-sm); margin: var(--gap) 0 0; }
.control {
  display: grid; align-items: center; gap: var(--gap-sm); min-height: var(--hit);
  grid-template-columns: var(--ctl-label) minmax(0, 1fr) var(--ctl-out);
}
.control label { font-size: var(--fs-label); color: var(--text-mid); }
.control output { font-family: var(--font-mono); font-size: var(--fs-mono); text-align: right; color: var(--text); }
input[type=range] { width: 100%; min-height: var(--hit); accent-color: var(--accent); background: transparent; margin: 0; }
.check {
  display: inline-flex; align-items: center; gap: var(--gap-sm);
  min-height: var(--hit); font-size: var(--fs-label); color: var(--text-mid); cursor: pointer;
}
.check input { width: var(--fs-hook); height: var(--fs-hook); accent-color: var(--accent); margin: 0; }
.checks { display: flex; flex-wrap: wrap; column-gap: var(--gap-lg); }

.readout {
  font-family: var(--font-mono); font-size: var(--fs-readout); color: var(--text-mid);
  background: var(--panel-solid); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); padding: var(--gap-sm) var(--gap);
  margin: var(--gap) 0 0; white-space: pre; overflow-x: auto;
}
.explorer-caption { font-size: var(--fs-caption); color: var(--text-dim); margin: var(--gap-sm) 0 0; max-width: none; }

/* ───────────────────────────── tables ───────────────────────────── */

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); color: var(--text-mid); }
caption { text-align: left; color: var(--text-dim); font-size: var(--fs-caption); margin-bottom: var(--gap-sm); }
th, td { text-align: left; padding: var(--gap-sm) var(--gap-sm); border-bottom: var(--hairline) solid var(--line); vertical-align: top; }
th { font-weight: 600; font-size: var(--fs-th); letter-spacing: var(--track-th); text-transform: uppercase; color: var(--text-dim); }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.key td { background: var(--accent-wash); color: var(--text); }
td .sub { display: block; font-size: var(--fs-caption); color: var(--text-dim); }
.ns {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--text); border: var(--hairline) solid var(--text-dim); border-radius: var(--pad-sm);
  padding: 0 var(--pad-sm); margin-left: var(--pad-sm);
}

/* ─────────────────────────── bar chart ─────────────────────────── */

.bars { display: grid; gap: var(--gap-sm); }
.bar-row {
  display: grid; align-items: center; gap: var(--gap-sm); font-size: var(--fs-small);
  grid-template-columns: var(--bar-label) minmax(0, 1fr) var(--bar-val);
}
.bar-track {
  position: relative; height: var(--bar-h);
  background: var(--panel-solid); border: var(--hairline) solid var(--line); border-radius: var(--pad-sm);
}
.bar-zero { position: absolute; top: 0; bottom: 0; width: var(--hairline); background: var(--text-dim); }
.bar-fill { position: absolute; top: var(--pad-sm); bottom: var(--pad-sm); background: var(--accent-dim); border: var(--hairline) solid var(--accent); }
.bar-fill.muted { background: var(--accent-wash); border-color: var(--text-dim); }
.bar-ci { position: absolute; top: 50%; height: var(--rule); background: var(--text); transform: translateY(-50%); }
.bar-row .val { font-family: var(--font-mono); font-size: var(--fs-mono); text-align: right; color: var(--text); }
.bar-row .val small { display: block; color: var(--text-dim); font-size: var(--fs-caption); }
.axis { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: var(--fs-caption); color: var(--text-dim); }
.bar-axis { display: grid; gap: var(--gap-sm); grid-template-columns: var(--bar-label) minmax(0, 1fr) var(--bar-val); }

.chart { width: 100%; display: block; }
.null-plot { width: 100%; height: var(--null-h); display: block; }

/* ───────────────────────────── figures ───────────────────────────── */

.figstack { display: grid; gap: var(--gap-lg); }
.figpair {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}
figure { margin: 0; }
.plate { background: var(--plate); border-radius: var(--radius); padding: var(--plate-pad); }
.plate img { width: 100%; height: auto; display: block; }
figcaption { font-size: var(--fs-caption); color: var(--text-dim); margin-top: var(--gap-sm); max-width: none; }

details {
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin-top: var(--gap);
}
summary {
  cursor: pointer; line-height: var(--summary-lh); min-height: var(--hit);
  display: flex; align-items: center;
  padding: var(--gap-sm) var(--gap); color: var(--text-mid); font-size: var(--fs-label);
}
summary:hover { color: var(--text); }
details[open] > summary { border-bottom: var(--hairline) solid var(--line); }
.details-body { padding: var(--gap); display: grid; gap: var(--gap-lg); }

/* ──────────────────── verdicts, badges, callouts ──────────────────── */

.badge {
  display: inline-block; min-width: var(--badge-w); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--track-th);
  padding: var(--pad-xs) var(--pad-sm); border-radius: var(--pad-sm); border: var(--hairline) solid transparent;
}
.badge.pass { background: var(--pass-bg); color: var(--pass); border-color: var(--pass); }
.badge.fail { background: var(--fail-bg); color: var(--fail); border-color: var(--fail); }
.verdict-pass { color: var(--pass); font-weight: 700; }
.verdict-fail { color: var(--fail); font-weight: 700; }

.shows { border-left: var(--rule) solid var(--accent); background: var(--accent-wash); }
.shows .eyebrow, .doesnt .eyebrow { margin-bottom: var(--pad-sm); }
.doesnt .eyebrow { color: var(--text-dim); }
.claim { font-family: var(--font-display); font-size: var(--fs-hook); line-height: var(--lh-tight); color: var(--text); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--pad-xs) var(--gap); margin: 0; font-size: var(--fs-small); }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text); overflow-wrap: anywhere; }

ol.plain, ul.plain { margin: 0; padding-left: var(--gap); }
ol.plain li, ul.plain li { margin-bottom: var(--pad-sm); }

/* the side glow, behind the supervised-comparison section's content */
#tabular { position: relative; }
#tabular::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: 0; top: 0; width: var(--glow-side-w); height: var(--glow-side-h);
  background: var(--glow-side);
}

/* ─────────────────────────── conclusion ─────────────────────────── */

.conclusion .statement {
  font-family: var(--font-display); font-size: var(--fs-statement);
  line-height: var(--lh-tight); color: var(--text); max-width: var(--statement-max);
}
.conclusion .scope-line { color: var(--text-mid); }

/* ─────────────────────────── error banner ─────────────────────────── */

.error-banner {
  background: var(--panel-solid); color: var(--fail);
  border: var(--hairline) solid var(--fail); border-radius: var(--radius);
  padding: var(--gap); margin: var(--gap) 0;
  font-family: var(--font-mono); font-size: var(--fs-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.error-banner b { display: block; margin-bottom: var(--pad-sm); }

/* ───────────────────────────── motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fn-item { animation-name: fnfade; }   /* content still advances; nothing slides */
}

/* ─────────────────────────── breakpoints ─────────────────────────── */

@media (max-width: 860px) {
  #nav { gap: var(--gap-sm); }
  .nav-links { gap: var(--gap-sm); }
}
@media (max-width: 720px) {
  .bar-row, .bar-axis { grid-template-columns: minmax(0, 1fr) var(--bar-val-sm); }
  .axis span:nth-child(even) { visibility: hidden; }
  .bar-row > :first-child { grid-column: 1 / -1; }
  .bar-axis > :first-child { display: none; }
  .control { grid-template-columns: minmax(0, 1fr) var(--ctl-out); }
  .control input[type=range] { grid-column: 1 / -1; grid-row: 2; }
  .factbar-inner { padding: var(--gap); }
}
@media (max-width: 480px) {
  #nav .brand { display: none; }
  .nav-links { margin-left: 0; }
}