/* AI Reckoning: the observatory stylesheet.
   Base palette is VDR house lapis-light with a world-class dark sibling.
   DOCUMENTED DEVIATION: this page adds two semantic accents beyond lapis and gold,
   --dys and --uto, because the product's entire subject is a two-ended axis and a
   single-hue scale cannot show direction. They are muted instrument colours, never
   traffic lights, and they appear only on the spectrum, score chips and gauges. */

/* ==========================================================================
   ART DIRECTION: AIBRAIN, lifted verbatim from https://aibrain.pages.dev on
   2026-09-10 (values taken from that page's own stylesheet, not sampled from a
   screenshot). The reusable copy lives at sBs/VFX/themes/aibrain/.

   What carries over unchanged: the five-colour ambient wash, frosted translucent
   surfaces, the rainbow hairline on cards, pink-to-orange as the action gradient,
   999px pills and 24px card radius.

   What this product adds, and why: --dys and --uto stay as a separate semantic
   pair, because the entire subject is a two-ended axis and the aibrain palette has
   no direction in it. They are tuned to sit inside the aibrain range rather than
   fight it: the dystopian end borrows the pink, the utopian end the green.
   ========================================================================== */
:root, [data-theme="dark"] {
  --ab-blue: #4a8fff;
  --ab-purple: #a061ff;
  --ab-pink: #ff2e8a;
  --ab-orange: #ff9d2e;
  --ab-green: #1fc97c;
  --grad-primary: linear-gradient(135deg, #ff2e8a 0%, #ff5e6e 45%, #ff9d2e 100%);
  --grad-rainbow: linear-gradient(90deg, #4a8fff, #a061ff, #ff2e8a, #ff9d2e, #1fc97c);
  --grad-rainbow-soft: linear-gradient(90deg, rgba(74,143,255,.5), rgba(160,97,255,.5), rgba(255,46,138,.5), rgba(255,157,46,.5), rgba(31,201,124,.5));

  --bg: #1a1d2e;
  --bg-deep: #0a0c18;
  --bg-vignette: none;
  --surface: rgba(37, 42, 63, 0.55);
  --surface-alt: rgba(37, 42, 63, 0.38);
  --surface-elev: rgba(37, 42, 63, 0.82);

  --hairline: rgba(160, 97, 255, 0.28);
  --hairline-strong: rgba(160, 97, 255, 0.55);
  --hairline-glow: rgba(255, 46, 138, 0.45);

  --ink: #ffffff; --ink-2: #e6e8f5; --ink-3: #aab3d6; --ink-4: #99a2c6;

  --lapis: #a061ff; --lapis-deep: #b98bff;
  --lapis-soft: rgba(160, 97, 255, 0.16);
  --lapis-glow: rgba(160, 97, 255, 0.45);

  --gold: #ff9d2e; --gold-soft: rgba(255, 157, 46, 0.16);

  --dys: #ff6f8f; --dys-soft: rgba(255, 46, 138, 0.16);
  --uto: #3fd894; --uto-soft: rgba(31, 201, 124, 0.16);
  --success: #1fc97c; --success-soft: rgba(31, 201, 124, 0.18);

  --grid-line: rgba(160, 97, 255, 0.05);
  --grid-mask: radial-gradient(ellipse 78% 62% at 50% 26%, #000 0%, transparent 82%);

  --shadow-1: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-2: 0 14px 40px rgba(0,0,0,0.45);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.55), 0 0 32px rgba(255,46,138,0.14);
  --nav-bg: rgba(26, 29, 46, 0.62);
  --gauge-slot: rgba(10, 12, 24, 0.72);
  --gauge-edge: rgba(160, 97, 255, 0.62);
  --r-card: 24px;
  color-scheme: dark;
}

[data-theme="light"] {
  /* aibrain's own light reduction, which that site calls "bridge": two indigo orbs,
     no hue drift, navy ink. */
  --bg: #f7f9fd;
  --bg-deep: #eef2f9;
  --bg-vignette: none;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-alt: rgba(255, 255, 255, 0.55);
  --surface-elev: rgba(255, 255, 255, 0.92);

  --hairline: rgba(30, 29, 76, 0.10);
  --hairline-strong: rgba(30, 29, 76, 0.22);
  --hairline-glow: rgba(86, 104, 224, 0.35);

  --ink: #0a1045; --ink-2: #1e2168; --ink-3: #4a5185; --ink-4: #5a6193;

  --lapis: #3243c9; --lapis-deep: #0006aa;
  --lapis-soft: rgba(86, 104, 224, 0.12);
  --lapis-glow: rgba(86, 104, 224, 0.35);

  --gold: #8a5a00; --gold-soft: rgba(138, 90, 0, 0.14);

  --dys: #b3123f; --dys-soft: rgba(179, 18, 63, 0.11);
  --uto: #0a7048; --uto-soft: rgba(10, 112, 72, 0.11);
  --success: #0a7048; --success-soft: rgba(10, 112, 72, 0.14);

  --grad-primary: linear-gradient(135deg, #5668e0 0%, #0006aa 100%);
  --grad-rainbow: linear-gradient(90deg, #5668e0, #0006aa);
  --grad-rainbow-soft: linear-gradient(90deg, rgba(86,104,224,.4), rgba(0,6,170,.4));

  --grid-line: rgba(10, 16, 69, 0.045);
  --shadow-1: 0 2px 8px rgba(30,29,76,0.07);
  --shadow-2: 0 14px 40px rgba(30,29,76,0.12);
  --shadow-3: 0 24px 60px rgba(30,29,76,0.16);
  --nav-bg: rgba(247, 249, 253, 0.72);
  --gauge-slot: #e4e9f5;
  --gauge-edge: #8b93a8;
  color-scheme: light;
}

/* [data-theme="dark"] needs no declarations: :root above is the dark palette. */

:root {
  --t-micro: 10px;    /* uppercase mono labels */
  --t-meta:  11px;    /* mono metadata, chips, nav */
  --t-cap:   13px;    /* captions and secondary prose */
  --t-sm:    15px;    /* dense body: list items, table cells, card titles */
  --t-body:  16px;    /* reading body */
  --t-lede:  18px;    /* standfirst */
  --t-sect:  21px;    /* section and card headings */
}
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;
  --nav-h: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.16, 1.02, 0.30, 1);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --reader-font-body: var(--font-sans);
  --font-scale: 1;
  --measure: 820px;
}
html[data-font-size="xl"]  { --font-scale: 1.18; }
html[data-font-size="xxl"] { --font-scale: 1.4; }
html[data-font-family="serif"]   { --reader-font-body: Georgia, Cambria, 'Times New Roman', serif; }
html[data-font-family="verdana"] { --reader-font-body: Verdana, Geneva, Tahoma, sans-serif; }
html[data-font-family="plex"]    { --reader-font-body: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--s-4)); }
body {
  margin: 0;
  /* a solid ground under the gradient: a page whose only background is a gradient has a
     transparent backgroundColor, which leaves anything compositing against it (and any
     contrast audit) resolving to nothing */
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg), var(--bg-deep));
  color: var(--ink);
  font-family: var(--reader-font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern","liga","calt","ss01";
  overflow-x: hidden;
}
/* AIBRAIN's five-orb wash, re-anchored to this product's axis.
   Two deliberate departures from the source, both forced by meaning:

   1. SIZES ARE VIEWPORT-RELATIVE (vmax), not fixed pixels. The original's 580px orbs at
      percentage positions let different colours dominate at different widths: a cold verifier
      found /claims rendering deep navy at 1440 and magenta/olive at 768, reproducibly. A
      backdrop whose hue is chosen by window width is a screensaver, not an identity.
   2. NO HUE-ROTATE. The source drifts hue by up to 40deg, which is delightful when the colours
      mean nothing. Here the left is dystopia and the right is utopia, so rotating the hue would
      rotate the meaning. The drift is now positional, which preserves both the motion and the
      semantics. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* MIRRORED PAIRS. The previous set had three warm orbs on the left against one green on the
     right, so red held about 57% of the width and peaked half again as strong as green. Every
     orb now has a counterpart at the mirrored x (14/86, 30/70, -10/110) and the same y, which
     puts the crossover on the centre line by construction rather than by tuning. Alphas are
     also down about a fifth: this is atmosphere, not a colour field. */
  background:
    radial-gradient(88vw 82vmax at -10% 34%, rgba(255, 48, 58,0.235), transparent 92%),
    radial-gradient(62vw 66vmax at  14% 98%, rgba(255, 74, 92,0.130), transparent 90%),
    radial-gradient(58vw 62vmax at  30% -8%, rgba(216, 64,138,0.095), transparent 90%),
    radial-gradient(74vw 74vmax at  50% 18%, rgba(112,114,224,0.120), transparent 90%),
    radial-gradient(58vw 62vmax at  70% -8%, rgba( 78,140,235,0.095), transparent 90%),
    radial-gradient(62vw 66vmax at  86% 98%, rgba( 40,192,152,0.130), transparent 90%),
    radial-gradient(88vw 82vmax at 110% 34%, rgba( 26,198,126,0.250), transparent 92%);
  animation: orbDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}
/* The axis, with stops mirrored about 50% so neither end can creep across the middle. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 46, 52,0.112)  0%,
    rgba(242, 58, 78,0.070) 15%,
    rgba(190, 84,152,0.040) 30%,
    rgba(126,118,208,0.024) 42%,
    rgba(118,120,214,0.020) 50%,
    rgba(102,148,192,0.024) 58%,
    rgba( 60,178,156,0.040) 70%,
    rgba( 32,196,130,0.070) 85%,
    rgba( 24,204,120,0.112) 100%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(88vw 82vmax at -10% 34%, rgba(214, 32, 52,0.13), transparent 92%),
    radial-gradient(72vw 74vmax at  50% 18%, rgba( 96,104,216,0.13), transparent 90%),
    radial-gradient(88vw 82vmax at 110% 66%, rgba( 12,140, 92,0.13), transparent 92%);
}
[data-theme="light"] body::after {
  background: linear-gradient(90deg,
    rgba(214, 32, 52,0.075)  0%,
    rgba(214, 40, 72,0.048) 16%,
    rgba(150, 70,160,0.026) 34%,
    rgba(110, 96,200,0.020) 50%,
    rgba( 60,150,160,0.026) 66%,
    rgba( 16,150,100,0.048) 84%,
    rgba( 10,150, 92,0.075) 100%);
}
@keyframes orbDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.6%, 1.2%, 0) scale(1.045); }
  100% { transform: translate3d(1.4%, -1%, 0) scale(1.02); }
}

::selection { background: rgba(255,46,138,0.35); color: #fff; }
[data-theme="light"] ::selection { background: rgba(86,104,224,0.30); color: #0a1045; }

.orb { display: none; }
[data-theme="dark"] .orb { opacity: 0.30; }
.orb--a { width: 460px; height: 460px; top: -120px; left: -100px; background: var(--lapis); animation: drift 24s ease-in-out infinite alternate; }
.orb--b { width: 380px; height: 380px; bottom: -140px; right: -80px; background: var(--lapis-deep); animation: drift 28s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(60px,40px,0); } }

.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: screen; }
[data-theme="light"] .field { opacity: 0.32; mix-blend-mode: multiply; }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--lapis); box-shadow: 0 0 12px var(--lapis-glow); z-index: 200; transition: width 90ms linear; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--surface); color: var(--ink); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); border: 1px solid var(--lapis); }
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-5);
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; flex-shrink: 0; }
.brand__mark { width: 26px; height: 26px; flex-shrink: 0; }
.brand__label { font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.01em; white-space: nowrap; }
.brand__sub { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.navlinks { display: flex; gap: var(--s-1); margin-left: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a {
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; padding: 6px 10px; border-radius: var(--r-sm);
  white-space: nowrap; transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.navlinks a:hover { color: var(--ink); background: var(--lapis-soft); }
.navlinks a[aria-current="page"] { color: var(--lapis); background: var(--lapis-soft); }
.nav__spacer { flex: 1; }
.tools { display: flex; gap: var(--s-2); flex-shrink: 0; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px; padding: 0; background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.icon-btn:hover { color: var(--ink); border-color: var(--lapis); background: var(--lapis-soft); }
.icon-btn svg { width: 16px; height: 16px; }
#collapseAll[data-mode="collapse"] .icon-expand-all { display: none; }
#collapseAll[data-mode="expand"] .icon-collapse-all { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
:root:not([data-theme="dark"]) .icon-moon { display: none; }
.menu-btn { display: none; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

/* ---------- the navigation sheet (below 940px, where the link row cannot live) ---------- */
.sheet-scrim {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 220ms var(--ease-out);
}
.sheet-scrim[data-open="true"] { opacity: 1; }
.sheet {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 95;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  /* opaque, not translucent: a blurred pill underneath was showing through as a colour smudge */
  background: var(--surface);
  backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-3);
  padding: var(--s-4) var(--s-4) var(--s-5);
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
  transform: translateY(-8px); opacity: 0;
  transition: transform 260ms var(--ease-settle), opacity 200ms var(--ease-out);
}
.sheet[data-open="true"] { transform: translateY(0); opacity: 1; }
.sheet__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sheet__nav a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px;
  padding: var(--s-3) var(--s-3); border-radius: var(--r-md); border-bottom: 0;
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; letter-spacing: -0.01em;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.sheet__nav a:hover { background: var(--lapis-soft); color: var(--ink); }
.sheet__nav a[aria-current="page"] { color: var(--lapis); background: var(--lapis-soft); box-shadow: inset 2px 0 0 var(--lapis); }
.sheet__i { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.sheet__nav a[aria-current="page"] .sheet__i { color: var(--lapis); }
.sheet__controls { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.sheet__label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); width: 100%; margin-bottom: 2px; }
.sheet__btn {
  min-height: 44px; padding: 0 var(--s-4); border-radius: 999px;
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--t-cap); cursor: pointer;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.sheet__btn:hover { border-color: var(--lapis); color: var(--lapis); background: var(--lapis-soft); }

@media (max-width: 940px) {
  .navlinks { display: none; }
  .menu-btn { display: inline-flex; }
  .tools__wide { display: none; }
  .icon-btn { width: 44px; height: 44px; }
  body[data-sheet="open"] { overflow: hidden; }
}
@media (min-width: 941px) { .sheet, .sheet-scrim { display: none !important; } }

@media (max-width: 700px) {
  .wrap { padding: var(--s-6) var(--s-4) var(--s-8); }
  .eyebrow { font-size: var(--t-micro); letter-spacing: 0.12em; flex-wrap: wrap; row-gap: var(--s-1); }
  .gauge__num { font-size: calc(40px * var(--font-scale)); }
  .gauge__plate { padding: var(--s-4) var(--s-4) var(--s-3); }
  .gauge__readout { gap: var(--s-3); }
  .gauge__ends { font-size: var(--t-micro); letter-spacing: 0.10em; }
  .card__toggle { padding: var(--s-4); gap: var(--s-3); min-height: 44px; }
  .card__inner { padding: 0 var(--s-4) var(--s-4); }
  .lede { font-size: calc(16.5px * var(--font-scale)); }
  .footer { line-height: 1.8; }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 560px) {
  .brand__sub { display: none; }
  .nav { padding: 0 var(--s-4); gap: var(--s-3); }
  .sheet__nav { grid-template-columns: 1fr; }
}

/* ---------- layout ---------- */
.wrap { position: relative; z-index: 1; max-width: var(--measure); margin: 0 auto; padding: var(--s-9) var(--s-5) var(--s-9); }
/* One shared column. Each page used to choose its own width (708 / 1030 / 651 measured
   live), so moving between them shifted the whole layout by as much as 320px. */
.wrap--wide { max-width: 1120px; }
.eyebrow { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
h1 { font-size: calc(clamp(34px, 6.2vw, 76px) * var(--font-scale)); line-height: 1.02; letter-spacing: -0.038em; font-weight: 600; margin: 0 0 var(--s-5); font-family: var(--reader-font-body); text-wrap: balance; }
h1 em {
  font-style: normal; color: var(--lapis);
  background: linear-gradient(96deg, var(--lapis) 6%, var(--lapis-deep) 58%, color-mix(in srgb, var(--uto) 55%, var(--lapis-deep)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em { color: var(--lapis); -webkit-text-fill-color: currentColor; }
}
h2 { font-size: calc(var(--t-sect) * var(--font-scale)); line-height: 1.25; letter-spacing: -0.018em; font-weight: 600; margin: 0; font-family: var(--reader-font-body); }
h3 { font-size: calc(var(--t-body) * var(--font-scale)); font-weight: 600; margin: var(--s-5) 0 var(--s-2); letter-spacing: -0.01em; }
.lede { font-size: calc(var(--t-lede) * var(--font-scale)); line-height: 1.5; color: var(--ink-2); max-width: 58ch; margin: 0 0 var(--s-6); letter-spacing: -0.011em; text-wrap: pretty; }
p { margin: 0 0 var(--s-4); }
a { color: var(--lapis); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms var(--ease-out); }
a:hover { border-bottom-color: var(--lapis); }
.rule { height: 1px; background: linear-gradient(90deg, var(--lapis), transparent); border: 0; margin: var(--s-5) 0 var(--s-6); opacity: 0.55; }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; border-radius: 3px; }
.dim { color: var(--ink-3); }
/* .tiny is the caption voice: it carries SENTENCES, so it is set in the reading face.
   Monospace is the instrument voice and is reserved for labels, numerals, chips and nav.
   .mono is declared after .tiny so `class="mono tiny"` (a tabular micro-label) stays mono. */
.tiny { font-size: calc(var(--t-cap) * var(--font-scale)); line-height: 1.6; letter-spacing: 0; color: var(--ink-3); max-width: 68ch; }
.mono, .mono.tiny { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.06em; }
.mono.tiny { color: var(--ink-4); line-height: 1.5; }
.nb { white-space: nowrap; }

/* ---------- the instrument ----------
   A bounded scale plate, not a full-bleed strip: a recessed channel, a calibrated ruler, and a
   needle that prints its own figure and settles into position on load. Every position rides on
   --p (0..100%), so the markup carries the data and the stylesheet carries the craft. */
.gauge { margin: var(--s-6) 0 var(--s-7); border: 0; padding: 0; }

.gauge__plate {
  position: relative; width: 100%;
  isolation: isolate;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--lapis)) 0%, var(--surface) 42%),
    var(--surface);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-radius: var(--r-card);
}
.gauge__plate::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad-rainbow-soft); opacity: 0.6; border-radius: inherit;
}
[data-theme="dark"] .gauge__plate { box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.05); }
/* the instrument speaks the same language as the cards: a rainbow hairline, not corner ticks */
.gauge__plate::before { content: none; }



.gauge__plateLabel {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--s-4);
}
.gauge__readout { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.gauge__num {
  font-family: var(--mono); font-size: calc(52px * var(--font-scale)); font-weight: 600;
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 0.88;
  font-feature-settings: "tnum" 1, "zero" 1;
}
.gauge__read { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gauge__verdict { font-size: calc(var(--t-sm) * var(--font-scale)); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
.gauge__facts { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.04em; color: var(--ink-4); }

/* No horizontal padding: --p is a percentage of this box and the channel is a flow child, so
   any inset here would slide the needle off the scale it points at. The only things that
   overflowed were the two end figures, and those are anchored rather than centred. */
.gauge__scale { position: relative; padding: 14px 0 64px; }

/* A milled slot, not a rail: real depth, hard walls, and a floor that stays visible across the
   whole scale. The previous version faded to the card colour around zero, so the middle third of
   the scale had no contrast against its own background and the axis visually broke in two. */
/* 1.48:1 against the card, so the track is visible along its whole length. The previous value
   was darker than the surface it sat on and the scale disappeared between -20 and +30. */
.gauge__channel {
  position: relative; height: 22px; border-radius: 4px;
  background: var(--gauge-slot);
  border: 1px solid var(--gauge-edge);
  box-shadow: inset 0 2px 5px rgba(15,23,42,0.22), inset 0 -1px 0 rgba(255,255,255,0.55), 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
}
[data-theme="dark"] .gauge__channel {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.85), inset 0 -1px 0 rgba(255,255,255,0.06), 0 1px 0 rgba(255,255,255,0.04);
}
.gauge__channel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 6.25%);
  opacity: 0.7;
}
/* only the outer quarters carry hue: the middle stays neutral so the needle is what you read */
.gauge__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--dys) 60%, transparent) 0%,
    color-mix(in srgb, var(--dys) 22%, transparent) 28%,
    color-mix(in srgb, var(--ink-4) 14%, transparent) 47%,
    color-mix(in srgb, var(--ink-4) 14%, transparent) 53%,
    color-mix(in srgb, var(--uto) 22%, transparent) 72%,
    color-mix(in srgb, var(--uto) 60%, transparent) 100%);
}
.gauge__zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink-4); opacity: 0.5; z-index: 2; }
/* The observed range rests on the slot floor. The previous outlined rectangle with two vertical
   end bars read as a second pair of drag handles. */
.gauge__band {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--lapis) 30%, transparent);
  box-shadow: inset 2px 0 0 var(--lapis), inset -2px 0 0 var(--lapis), 0 0 10px var(--lapis-glow);
}

/* the ruler: calibration every 12.5, majors at the 25s, figures at the 50s */
.gauge__ruler { position: absolute; left: 0; right: 0; top: 42px; height: 16px; }
.gauge__tick { position: absolute; top: 0; width: 1px; height: 4px; background: var(--hairline-strong); }
.gauge__tick--major { height: 7px; background: var(--ink-4); opacity: 0.65; }
.gauge__label {
  position: absolute; top: 11px; transform: translateX(-50%);
}
.gauge__label[data-edge="start"] { transform: none; }
.gauge__label[data-edge="end"] { transform: translateX(-100%); }
.gauge__label {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* the needle prints its own figure, so the reading is legible without crossing to the readout */
/* A pointer, not a thumb. A diamond centred on a track is the universal "drag me" cue; a
   downward index mark above the slot with a hairline through it is a gauge. */
.gauge__needle {
  position: absolute; left: var(--p); top: -6px; width: 1px; height: 46px; margin-left: -0.5px;
  background: var(--ink); z-index: 3;
  animation: settle 900ms var(--ease-settle) both;
}
.gauge__needle::before {
  content: ''; position: absolute; top: -8px; left: -5.5px;
  width: 0; height: 0; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent;
  border-top: 9px solid var(--ink);
}
.gauge__needleFig {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.02em;
  color: var(--surface); background: var(--ink); padding: 1px 5px; border-radius: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@keyframes settle { from { left: 50%; opacity: 0; } to { left: var(--p); opacity: 1; } }

.gauge__ends {
  display: flex; justify-content: space-between; margin-top: var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase;
}
.gauge__ends .l { color: var(--dys); }
.gauge__ends .r { color: var(--uto); }
.gauge__note { margin: var(--s-4) 0 0; }
.gauge__plate--empty { padding-bottom: var(--s-5); }
.gauge__none { margin: 0; color: var(--ink-3); font-size: calc(var(--t-sm) * var(--font-scale)); max-width: 56ch; }


/* ---------- the consensus strip: where the labs actually landed ----------
   The site's distinguishing fact is disagreement between independent labs. It is drawn on the
   card, labelled, and readable without a click, because burying it in a <details> table meant
   the most interesting thing on the page was the thing nobody saw. */
.pstrip { margin: var(--s-3) 0 var(--s-5); }
.pstrip__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.pstrip__n { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.pstrip__v { font-size: calc(var(--t-cap) * var(--font-scale)); font-weight: 500; letter-spacing: -0.005em; }
.pstrip__v--wide { color: var(--dys); }
.pstrip__v--mid { color: var(--gold); }
.pstrip__v--tight { color: var(--uto); }

.pstrip__axis { position: relative; height: calc(26px + (var(--rows, 1) - 1) * 20px); margin-bottom: var(--s-5); }
.pstrip__rail { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 999px; background: var(--gauge-slot); border: 1px solid var(--gauge-edge); }
[data-theme="dark"] .pstrip__rail { box-shadow: inset 0 1px 3px rgba(0,0,0,0.55); }
.pstrip__zero { position: absolute; left: 50%; top: 6px; height: 14px; width: 1px; background: var(--hairline-strong); }
.pstrip__span { position: absolute; top: 11px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--lapis) 26%, transparent); }
.pstrip__mean { position: absolute; top: 3px; height: 20px; width: 2px; margin-left: -1px; background: var(--lapis); border-radius: 1px; }
.pstrip__mean span {
  position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--lapis);
  white-space: nowrap; background: var(--surface); padding: 0 3px;
}
.pstrip__dot {
  position: absolute; top: calc(7px + var(--row, 0) * 20px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(15,23,42,0.25);
  transition: transform 160ms var(--ease-out);
}
.pstrip__dot:hover { transform: scale(1.35); z-index: 2; }
.pstrip__dot--dys { background: var(--dys); }
.pstrip__dot--uto { background: var(--uto); }
.pstrip__dot--mid { background: var(--ink-3); }
/* Without figures on the rail, a 30-point gap and a 3-point gap looked nearly identical. */
.pstrip__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); letter-spacing: 0.04em; margin-bottom: var(--s-3); }
.pstrip__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); }
.pstrip__key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.03em; color: var(--ink-3); }
.pstrip__key b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.pstrip__swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pstrip__swatch--dys { background: var(--dys); }
.pstrip__swatch--uto { background: var(--uto); }
.pstrip__swatch--mid { background: var(--ink-3); }

/* ---------- the shape of the day, drawn on the instrument itself ---------- */
.gauge__items { margin-top: 0; padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.gauge__itemsLabel { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s-4); }
.gauge__itemsAxis { position: relative; height: 24px; }
.gauge__itemsRail { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--hairline); }
/* The tap target is 44px square; the painted disc stays 24px. A 44px disc on a -100..+100 axis
   would collide constantly, but a 24px disc is under every documented touch floor, so the hit
   area is the one that grows. */
.gauge__mark {
  position: absolute; top: -10px; width: 44px; height: 44px; margin-left: -22px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; text-decoration: none;
  transition: transform 180ms var(--ease-out);
}
.gauge__mark > span {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: var(--surface);
  font-family: var(--mono); font-size: var(--t-micro); font-variant-numeric: tabular-nums; color: var(--ink-3);
  transition: box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.gauge__mark:hover, .gauge__mark:focus-visible { transform: translateY(-3px) scale(1.14); z-index: 3; }
.gauge__mark:hover > span, .gauge__mark:focus-visible > span { box-shadow: var(--shadow-2); }
.gauge__mark--dys > span { border-color: color-mix(in srgb, var(--dys) 55%, transparent); color: var(--dys); }
.gauge__mark--uto > span { border-color: color-mix(in srgb, var(--uto) 55%, transparent); color: var(--uto); }
.gauge__itemsAxis { position: relative; height: calc(6px + var(--rows, 1) * 26px); }
.gauge__itemsRail { top: 21px; }
.gauge__mark { top: calc(-10px + var(--row, 0) * 26px); }

@media (max-width: 700px) {
  .pstrip__legend { gap: var(--s-2) var(--s-3); }
  .dist { padding: var(--s-4); }
}


/* ---------- the rim ----------
   A 1px gradient border that stays 1px at any radius, drawn with a mask rather than a padded
   pseudo-element so it never fattens on a rounded corner. .rim--live adds AIBRAIN's focus halo
   (--glow-ring) for the element currently receiving input. */
.rim { position: relative; }
.rim::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--ab-purple, #a061ff) 85%, transparent) 0%,
    color-mix(in srgb, var(--ab-pink, #ff2e8a) 70%, transparent) 38%,
    color-mix(in srgb, var(--ab-blue, #4a8fff) 45%, transparent) 68%,
    color-mix(in srgb, var(--ab-green, #1fc97c) 55%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
}
.rim--live::after { opacity: 1; }
.rim--live { box-shadow: var(--glow-ring, 0 0 0 4px rgba(255,46,138,0.18)); }
.rim--glow { box-shadow: var(--shadow-2), 0 0 32px rgba(255,46,138,0.18); }

/* ---------- cards ---------- */
.card {
  position: relative; margin-bottom: var(--s-4); overflow: hidden;
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft, var(--shadow-2));
  transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--hairline-strong); }
.card::before, .card::after {
  content: ''; position: absolute; width: 10px; height: 10px; opacity: 0.28; pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}
.card::before { top: 0; left: 0; right: 0; width: auto; height: 1px; background: var(--grad-rainbow-soft); opacity: 0.55; border: 0; border-radius: 0; }
.card::after { content: none; }
.card:hover::before, .card:hover::after { opacity: 1; }
[data-theme="dark"] .card::before, [data-theme="dark"] .card::after { box-shadow: none; opacity: 0.38; }

.card__toggle {
  display: flex; align-items: flex-start; gap: var(--s-4); width: 100%;
  background: none; border: 0; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5);
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.card__n { font-family: var(--mono); font-size: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--lapis); background: var(--lapis-soft); border-radius: 6px; padding: 3px 7px; flex-shrink: 0; margin-top: 3px; }
.card__title { flex: 1; min-width: 0; }
.card__title h2 { overflow-wrap: anywhere; }
.card__chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-4); margin-top: 4px; transition: transform 240ms var(--ease-out); }
.card[data-open="false"] .card__chev { transform: rotate(-90deg); }
.card__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms var(--ease-out); }
.card[data-open="false"] .card__body { grid-template-rows: 0fr; }
.card__body > div { overflow: hidden; }
.card__inner { padding: 0 var(--s-5) var(--s-5); }

/* ---------- score chips + spectrum bars ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.05em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--hairline-strong); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip--dys { color: var(--dys); border-color: color-mix(in srgb, var(--dys) 40%, transparent); background: var(--dys-soft); }
.chip--uto { color: var(--uto); border-color: color-mix(in srgb, var(--uto) 40%, transparent); background: var(--uto-soft); }
.chip--mid { color: var(--ink-2); background: var(--surface-alt); }
.chip--gold { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

.minigauge { position: relative; height: 6px; background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: 3px; margin: var(--s-3) 0; }
.minigauge__zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--hairline-strong); }
.minigauge__dot { position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; transform: translateX(-4px); }
.minigauge__dot--dys { background: var(--dys); }
.minigauge__dot--uto { background: var(--uto); }
.minigauge__dot--mid { background: var(--ink-4); }
.minigauge__range { position: absolute; top: 0; bottom: 0; background: var(--lapis-soft); }

/* ---------- meta rows, tables, panels ---------- */
.meta { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-4); letter-spacing: 0.04em; display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* These are real destinations (the source article, the provenance record), so they are tap
   targets and not inline prose links. */
.meta a { color: var(--ink-3); display: inline-flex; align-items: center; min-height: 44px; }
.panel { position: relative; overflow: hidden; background: var(--surface-alt); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--s-5); margin: var(--s-5) 0; }
.panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grad-rainbow-soft); opacity: 0.55; }
.panel__label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s-3); }
details.models > summary { cursor: pointer; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.06em; color: var(--ink-3); list-style: none; padding: var(--s-2) 0; }
details.models > summary::-webkit-details-marker { display: none; }
details.models > summary::before { content: '▸ '; color: var(--lapis); }
details.models[open] > summary::before { content: '▾ '; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-cap); }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.scroller { overflow-x: auto; }
@media (max-width: 700px) {
  /* A silent horizontal scroller reads as clipped content, so every number past the fold looks
     simply absent rather than merely offscreen. The wrapper gets a gradient edge and a written
     cue, both shown only when the content genuinely overflows. */
  .scroller { position: relative; }
  .scroller::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg) 92%);
  }
  .scroller[data-overflow="true"]::before {
    content: 'scroll for the rest \2192';
    position: sticky; left: 0; display: block; width: max-content;
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lapis); padding: 0 0 var(--s-2);
  }
  .scroller table { min-width: 460px; }
  .scroller svg.chart, .scroller svg { min-width: 460px; }
  th, td { padding: var(--s-2); }
  td { font-size: var(--t-cap); }
}
blockquote { margin: var(--s-4) 0; padding-left: var(--s-4); border-left: 2px solid var(--lapis); color: var(--ink-2); font-size: calc(var(--t-sm) * var(--font-scale)); }
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat { position: relative; overflow: hidden; background: var(--surface); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-4); }
.stat__n { font-family: var(--mono); font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); }
.stat__l { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-top: 4px; }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }
.pill { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.06em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hairline-strong); color: var(--ink-3); text-decoration: none; }
.pill:hover { border-color: var(--lapis); color: var(--lapis); background: var(--lapis-soft); }
.pill[aria-current="true"] { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -8px var(--hairline-glow); }
[data-theme="dark"] .pill[aria-current="true"] { color: #10141c; }
.empty { border: 1px dashed var(--hairline-strong); border-radius: var(--r-md); padding: var(--s-6); text-align: center; color: var(--ink-3); }
.badge-warn { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-soft); background: var(--gold-soft); padding: 2px 6px; border-radius: 4px; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); }
ul.tight { margin: 0 0 var(--s-4); padding-left: 1.15em; }
ul.tight li { margin-bottom: 4px; font-size: calc(var(--t-sm) * var(--font-scale)); }
pre.spec { font-family: var(--mono); font-size: var(--t-meta); line-height: 1.6; white-space: pre-wrap; background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-4); overflow-x: auto; color: var(--ink-2); }
svg.chart { width: 100%; height: auto; display: block; }
.footer { border-top: 1px solid var(--hairline); margin-top: var(--s-8); padding: var(--s-5) 0; font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-4); line-height: 1.9; }
.kbd { display: inline-block; border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); }

/* A nowrap chip sets the min-content width of its flex track, which sets the card,
   which sets the page. Let the long consensus chip wrap on narrow screens. */
@media (max-width: 620px) {
  .chip { white-space: normal; }
  .card__toggle { padding: var(--s-4); gap: var(--s-3); }
  .card__inner { padding: 0 var(--s-4) var(--s-4); }
  .wrap { padding: var(--s-6) var(--s-4) var(--s-8); }
  .gauge__num { font-size: calc(34px * var(--font-scale)); }
}


/* ---------- the filter rig ---------- */
.filters {
  border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface-alt);
  padding: var(--s-4) var(--s-5); margin: var(--s-5) 0 var(--s-6);
}
.filters__row { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.filters__row:last-child { border-bottom: 0; padding-bottom: 0; }
.filters__row:first-child { padding-top: 0; }
.filters__label {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); width: 74px; flex-shrink: 0; padding-top: 9px;
}
.filters .pill-row { margin: 0; flex: 1; min-width: 0; }
.pill--dys[aria-current="true"] { background: var(--dys); border-color: var(--dys); color: #fff; }
.pill--uto[aria-current="true"] { background: var(--uto); border-color: var(--uto); color: #fff; }
.pill--dys:hover { border-color: var(--dys); color: var(--dys); background: var(--dys-soft); }
.pill--uto:hover { border-color: var(--uto); color: var(--uto); background: var(--uto-soft); }
.filters__range { align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.filters__range .filters__label { padding-top: 0; }
.rangefield { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.06em; color: var(--ink-4); }
.rangefield input {
  width: 72px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: var(--t-meta); font-variant-numeric: tabular-nums;
  transition: border-color 160ms var(--ease-out);
}
.rangefield input:hover { border-color: var(--lapis); }
.pill--action { cursor: pointer; font-family: var(--mono); background: var(--surface); color: var(--ink-2); min-height: 36px; }
.pill--action:hover { border-color: var(--lapis); color: var(--lapis); background: var(--lapis-soft); }

/* ---------- the filtered corpus ---------- */
.hits { margin-top: var(--s-4); }
.hit { display: grid; grid-template-columns: 1fr 132px; grid-template-areas: "title bar" "meta bar"; gap: 2px var(--s-5); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); }
.hit:first-child { border-top: 1px solid var(--hairline); }
.hit__title { grid-area: title; font-size: calc(var(--t-sm) * var(--font-scale)); font-weight: 500; letter-spacing: -0.012em; color: var(--ink); line-height: 1.35; border-bottom: 0; }
.hit__title:hover { color: var(--lapis); }
.hit__bar { grid-area: bar; }
.hit__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--s-3); font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.04em; color: var(--ink-4); }
.hit__score { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .filters { padding: var(--s-4); }
  .filters__row { flex-direction: column; gap: var(--s-2); }
  .filters__label { width: auto; padding-top: 0; }
  .hit { grid-template-columns: 1fr; grid-template-areas: "title" "bar" "meta"; gap: var(--s-2); }
  .hit__bar { max-width: none; }
}




/* ---------- the timeline spine ----------
   The page called itself a timeline and rendered a stack of identical cards: no spine, no axis,
   no year grouping. A vertical rule with a dated node per entry, and a year marker whenever the
   year changes, so position on the page carries time. */
.tl { position: relative; padding-left: 132px; }
.tl::before {
  content: ''; position: absolute; left: 96px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline-strong) 6%, var(--hairline-strong) 94%, transparent);
}
.tl__row { position: relative; margin-bottom: var(--s-4); }
.tl__node {
  position: absolute; left: -40px; top: 26px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--lapis); box-shadow: 0 0 0 3px var(--bg);
}
.tl__date {
  position: absolute; left: -132px; top: 20px; width: 84px; text-align: right;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.tl__body > .card { margin-bottom: 0; }
.tl__year { position: relative; margin: var(--s-6) 0 var(--s-4); }
.tl__year span {
  position: absolute; left: -132px; width: 84px; text-align: right;
  font-family: var(--mono); font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.08em;
  color: var(--lapis); font-variant-numeric: tabular-nums;
}
.tl__year::after {
  content: ''; position: absolute; left: -40px; top: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--lapis); box-shadow: 0 0 0 3px var(--bg), 0 0 12px var(--lapis-glow);
}
@media (max-width: 700px) {
  /* the spine moves to the left margin and the date sits above the card rather than beside it */
  .tl { padding-left: var(--s-6); }
  .tl::before { left: 6px; }
  .tl__node { left: -22px; top: 20px; }
  .tl__date { position: static; width: auto; text-align: left; margin-bottom: var(--s-2); }
  .tl__year span { position: static; display: block; width: auto; text-align: left; margin-bottom: var(--s-2); }
  .tl__year::after { left: -22px; top: 4px; }
}

/* ---------- a stated position that moved ----------
   A card reading "stated 15%" under a headline promising "how it changed" showed no change at
   all. Where a person has given a number more than once, the card carries both and the direction. */
.chip--move { gap: 7px; font-variant-numeric: tabular-nums; }
.mv__from { opacity: 0.68; text-decoration: line-through; text-decoration-thickness: 1px; }
.mv__arrow { font-size: 12px; line-height: 1; }
.mv__to { font-weight: 700; }
.mv__yrs { opacity: 0.62; font-size: var(--t-micro); letter-spacing: 0.04em; }

/* ---------- portraits ----------
   The photo and the initials fallback occupy an identical box, so a card with an image and one
   without are the same height and nothing reflows as images arrive. */
.por {
  width: var(--por, 56px); height: var(--por, 56px); flex-shrink: 0;
  border-radius: 50%; overflow: hidden; display: block;
  background: var(--surface-alt);
  box-shadow: 0 0 0 1px var(--hairline), 0 4px 14px -6px rgba(0,0,0,0.5);
}
.por img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) contrast(1.03); }
.por--initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600;
  font-size: calc(var(--por, 56px) * 0.34); letter-spacing: 0.02em;
  color: var(--ink-3);
  background: linear-gradient(150deg, var(--lapis-soft), var(--surface-alt));
}
.pcard__head { display: flex; align-items: center; gap: var(--s-4); }
.pcard__head .pcard__name { margin: 0; }

.phead { display: flex; gap: var(--s-6); align-items: flex-start; margin-bottom: var(--s-5); }
.phead__pic { flex-shrink: 0; width: 160px; }
.phead__text { min-width: 0; }
.phead h1 { font-size: calc(clamp(28px, 4vw, 46px) * var(--font-scale)); margin-bottom: var(--s-3); }
.por__credit {
  margin: var(--s-3) 0 0; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-4);
  max-width: 160px;
}
.por__credit a { color: var(--ink-3); }
.por__credit a:hover { color: var(--lapis); }
@media (max-width: 700px) {
  .phead { flex-direction: column; gap: var(--s-4); }
  .phead__pic { width: 112px; }
  .phead__pic .por { --por: 112px !important; }
  .por__credit { max-width: none; }
}

/* ---------- the staging queue ---------- */
.hit--review { grid-template-columns: 1fr; grid-template-areas: "title" "meta" "excerpt" "actions"; gap: var(--s-2); padding: var(--s-5) 0; }
.hit__excerpt { grid-area: excerpt; margin: var(--s-1) 0 0; color: var(--ink-3); }
.hit__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.hit__actions .pill { min-height: 38px; display: inline-flex; align-items: center; }
.pill--uto { border-color: color-mix(in srgb, var(--uto) 45%, transparent); color: var(--uto); }
.pill--dys { border-color: color-mix(in srgb, var(--dys) 45%, transparent); color: var(--dys); }


/* ---------- verifier round: touch targets, phone tables, tiles, card feet, orbs ---------- */
h4 { font-size: calc(var(--t-sm) * var(--font-scale)); font-weight: 600; letter-spacing: -0.008em; margin: var(--s-5) 0 var(--s-3); }

/* D8: every chip and pill was 30px tall, under both the 44pt and 48dp floors. */
.pill { display: inline-flex; align-items: center; min-height: 36px; }
@media (max-width: 940px) {
  .pill, .pill--action, .rangefield input { min-height: 44px; }
  .brand { min-height: 44px; }
  .navlinks a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* D6: six tiles became six near-empty full-width boxes on a phone, and left a two-cell hole in
   the 4-column desktop grid. Two columns on a phone, three on desktop, so the grid always fills. */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .stat { padding: var(--s-3) var(--s-4); }
  .stat__n { font-size: 24px; }
  .col-optional { display: none; }
}

/* D7: a dashed border is file-drop-zone grammar, and this is the site's normal state, not an edge case. */
.empty {
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-alt); padding: var(--s-6) var(--s-5); text-align: center; color: var(--ink-3);
}

/* D9: card feet floated at different heights because the roles above them wrap to different
   line counts. Pin the badge to the bottom of the card. */
.pcard { display: flex; flex-direction: column; }
.pcard__foot { margin-top: auto; padding-top: var(--s-3); }

/* D11: the decorative orbs were clipped by the viewport edges, reading as a stray wash behind
   half the navbar. Contain them so they sit inside the frame as lighting. */
.orb--a { top: 40px; left: 3vw; }
.orb--b { bottom: 40px; right: 3vw; }
@media (max-width: 940px) { .orb { display: none; } }

.pcard__name { font-weight: 600; font-size: calc(var(--t-body) * var(--font-scale)); letter-spacing: -0.01em; }
.aa-mark { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-cap); line-height: 1; }



/* ---------- the auth moment ----------
   The one page where the spectrum field should be the star rather than the backdrop, so the card
   floats on it instead of sitting under a headline. */
.auth { min-height: calc(100dvh - var(--nav-h) - var(--s-9)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-7) 0; }
.auth__card {
  position: relative; width: 100%; max-width: 460px; padding: var(--s-7) var(--s-6) var(--s-6);
  border-radius: 20px; text-align: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--ink)) 0%, var(--surface) 40%);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 90px -30px var(--lapis-glow);
}
/* a gradient hairline, drawn as a mask so it stays 1px at any radius */
.auth__card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--lapis) 70%, transparent), var(--hairline) 42%, color-mix(in srgb, var(--uto) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.auth__mark { display: flex; justify-content: center; margin-bottom: var(--s-5); }
.auth__mark { position: relative; }
.auth__mark svg { filter: drop-shadow(0 10px 26px var(--lapis-glow)); position: relative; z-index: 1; }
.auth__mark::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 130px; height: 130px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--lapis-glow) 0%, transparent 68%); opacity: 0.5;
}
.auth__title { font-size: calc(clamp(26px, 3.2vw, 34px) * var(--font-scale)); line-height: 1.12; letter-spacing: -0.028em; margin: 0 0 var(--s-3); }
.auth__sub { color: var(--ink-3); font-size: calc(var(--t-sm) * var(--font-scale)); margin: 0 auto var(--s-6); max-width: 34ch; }

.auth__providers { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
.authbtn {
  position: relative; display: grid; grid-template-columns: 22px 1fr 20px; align-items: center; gap: var(--s-4);
  min-height: 56px; padding: 0 var(--s-5); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hairline-strong); background: color-mix(in srgb, var(--surface-alt) 80%, transparent);
  color: var(--ink); font-size: calc(var(--t-sm) * var(--font-scale)); font-weight: 500; text-decoration: none;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.authbtn__label { text-align: left; }
.authbtn__go { width: 20px; height: 20px; color: var(--ink-4); transition: transform 220ms var(--ease-out), color 220ms var(--ease-out); }
.authbtn:hover { border-color: color-mix(in srgb, var(--lapis) 60%, transparent); transform: translateY(-2px); box-shadow: 0 12px 30px -14px var(--lapis-glow); }
.authbtn:hover .authbtn__go { transform: translateX(4px); color: var(--lapis); }
/* a light that sweeps once on hover, so the control feels physical rather than painted */
.authbtn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--lapis) 24%, transparent) 48%, transparent 66%);
  transform: translateX(-60%);
}
.authbtn:hover::after { opacity: 1; animation: sweep 900ms var(--ease-out); }
@keyframes sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.authbtn__mark { display: flex; }

.auth__gets { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); text-align: left; }
.auth__gets li { display: flex; align-items: center; gap: var(--s-3); font-size: calc(var(--t-cap) * var(--font-scale)); color: var(--ink-2); }
.auth__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.auth__dot--a { background: var(--dys); }
.auth__dot--b { background: var(--lapis); }
.auth__dot--c { background: var(--uto); }
.auth__fine { text-align: left; border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.auth__fine > summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); min-height: 32px; display: flex; align-items: center; gap: 6px; }
.auth__fine > summary::-webkit-details-marker { display: none; }
.auth__fine > summary::before { content: '+'; color: var(--lapis); font-size: var(--t-cap); }
.auth__fine[open] > summary::before { content: '\2212'; }
.auth__fine > summary:hover { color: var(--ink-2); }
.auth__fine p { font-size: var(--t-meta); line-height: 1.7; color: var(--ink-4); margin: var(--s-3) 0 0; }
.auth__back { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.08em; color: var(--ink-4); border-bottom: 0; }
.auth__back:hover { color: var(--lapis); }
@media (max-width: 560px) { .auth__card { padding: var(--s-6) var(--s-5) var(--s-5); border-radius: 18px; } }

/* ---------- legacy sign in ---------- */
.icon-btn--who { text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.who { font-family: var(--mono); font-size: var(--t-meta); font-weight: 600; color: var(--lapis); }

.signin { display: flex; flex-direction: column; gap: var(--s-3); max-width: 380px; margin: var(--s-6) 0; }
.signin__btn {
  display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-5);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface);
  color: var(--ink); font-size: calc(var(--t-sm) * var(--font-scale)); font-weight: 500;
  text-decoration: none; border-bottom: 1px solid var(--hairline-strong);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.signin__btn:hover { border-color: var(--lapis); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.signin__note { max-width: 62ch; }
.savedview { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.has-rise .rise { opacity: 0; transform: translateY(14px); }
.rise { transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); will-change: opacity, transform; }
/* must match .has-rise .rise's specificity or the reveal never fires and the page body
   stays invisible; caught by looking at a render, not by reading the diff */
.has-rise .rise--in { opacity: 1; transform: none; }
.card, .stat, .pill, .signin__btn, .gauge__plate { transition: box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out), transform 260ms var(--ease-out); }
.card:hover { transform: translateY(-2px); }
.stat:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .gauge__needle { animation: none !important; left: var(--p); opacity: 1; }
  .sheet, .sheet-scrim { transform: none !important; opacity: 1 !important; }
}
@media print {
  .rise { opacity: 1 !important; transform: none !important; }
  .nav, .progress, .orb, body::before, .tools, .sheet, .sheet-scrim { display: none !important; }
  body { background: #fff; color: #000; }
  .card[data-open="false"] .card__body { grid-template-rows: 1fr; }
  .card { break-inside: avoid; box-shadow: none; }
}