/* =============================================================================
   DeadRisk — deadrisk.css
   One file. Dark only. Loud shell, sharp blade. Per docs/DESIGN.md + glitch layer.
   Shell = terminal/BBS/16-bit glitch chrome. Blade = charts/tables/prose, zero
   distortion. Fonts self-hosted (Maestro display+sans, Geist Mono data). No CDN.
   ============================================================================= */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Maestro";
  src: url("/static/fonts/Maestro-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Maestro";
  src: url("/static/fonts/Maestro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; font-synthesis: none;
}

/* =============================================================================
   01 · TOKENS — the only place a raw value is allowed to exist.
   Colour · type · space · motion · frame · depth.  (DESIGN-SYSTEM.md §4)
   Nothing below this block may introduce a literal.
   ============================================================================= */
:root {
  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --color-background:       hsl(240 10% 3.9%);   /* page canvas */
  --color-card:             hsl(217 23% 12%);    /* SHELL panels */
  --color-chart-card:       hsl(240 10% 3%);     /* BLADE panels, chart canvas */
  --color-sunken:           hsl(240 8% 7%);      /* row hover tint */
  --color-border:           hsl(240 3.7% 15.9%);
  --color-border-strong:    hsl(240 4% 22%);     /* table rules, chart chrome */

  /* ── Ink ───────────────────────────────────────────────────────────────── */
  --color-foreground:       hsl(222 6% 84%);
  --color-muted-foreground: hsl(215 16% 60%);    /* was 56% → 4.94:1 on card; now 5.66 */
  --color-muted:            hsl(223 16% 19%);    /* off-state marks. NEVER text. */

  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --color-brand:      oklch(67.73% 0.267 346);   /* #ff2ab9 */
  --color-brand-hex:  #ff2ab9;                   /* SVG data-URIs + vega-theme */
  --brand-08:  color-mix(in oklab, var(--color-brand)  8%, transparent);
  --brand-15:  color-mix(in oklab, var(--color-brand) 15%, transparent);
  --brand-22:  color-mix(in oklab, var(--color-brand) 22%, transparent);
  --brand-35:  color-mix(in oklab, var(--color-brand) 35%, transparent);
  --brand-55:  color-mix(in oklab, var(--color-brand) 55%, transparent);
  --brand-85:  color-mix(in oklab, var(--color-brand) 85%, transparent);

  /* ── Accent (graphic) vs link (text). The graphic blue measures 3.45:1 on
        card — an AA failure as text, sitewide. ─────────────────────────── */
  --color-primary:    hsl(224 100% 58%);   /* comparison series, marks, borders */
  --color-link:       hsl(224 100% 70%);   /* ≈5.6:1 on card, ≈6.5:1 on background */
  --color-link-hover: var(--color-brand);
  --blue-40: color-mix(in srgb, var(--color-primary) 40%, transparent);
  --blue-55: color-mix(in srgb, var(--color-primary) 55%, transparent);

  /* ── Direction. RESERVED. Signed numeric change ONLY. Never a category,
        a status, a stance, a source, an error, or a copy confirmation.
        Always paired with a sign or an arrow (hard constraint 9). ────────── */
  --color-up:   #29a38b;
  --color-down: #f05c51;
  /* compat aliases for in-flight code written against the old names —
     delete once nothing on the server references them. */
  --color-trading-up:   var(--color-up);
  --color-trading-down: var(--color-down);

  /* ── Caution. THE one amber. Contested evidence, warnings, errors, stale
        stamps. Deliberately at 38° — down sits at 5°. ────────────────────── */
  --color-caution: hsl(38 95% 55%);

  /* ── Verdict / evidence status. Aliases, so a rename is one line. ──────── */
  --ev-held:      var(--color-brand);
  --ev-contested: var(--color-caution);
  --ev-absent:    var(--color-border);
  --ev-na:        var(--color-muted);
  --ev-void:      var(--color-muted);
  --ev-archived:  var(--color-caution);

  /* ── Type: faces ───────────────────────────────────────────────────────── */
  --font-sans: "Maestro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type: the ladder. 12 rungs replace 46 values. ─────────────────────── */
  --fs-100: .625rem;    /* 10 — status tags, table flags, glyph captions */
  --fs-200: .6875rem;   /* 11 — labels, eyebrows, rail labels, meta lines */
  --fs-300: .75rem;     /* 12 — chips, badges, captions, table heads, kbd */
  --fs-400: .8125rem;   /* 13 — DENSE DATA ROWS. bbs, edge, table td */
  --fs-500: .875rem;    /* 14 — card deks, secondary prose, cmdline */
  --fs-600: 1rem;       /* 16 — body */
  --fs-650: 1.125rem;   /* 18 — page deks, prose h3 */
  --fs-700: 1.25rem;    /* 20 — module heads, pull-quote, prose h2 */
  --fs-800: 1.5rem;     /* 24 — stat values */
  --fs-850: clamp(1.75rem, 3.5vw, 2.25rem);   /* section head */
  --fs-900: clamp(2rem, 4.5vw, 2.75rem);      /* page h1 */
  --fs-display: clamp(2.5rem, 6.5vw, 4rem);   /* hero, 404, pull-value */

  /* ── Type: leading ─────────────────────────────────────────────────────── */
  --lh-flat: 1;  --lh-tight: 1.15;  --lh-snug: 1.35;  --lh-data: 1.45;  --lh-body: 1.65;

  /* ── Type: tracking. 5 roles replace 14 values. ────────────────────────── */
  --ls-tight: -.01em;  /* sans display only */
  --ls-0:      0;
  --ls-mono:   .04em;  /* inline mono: tickers, prices, code */
  --ls-wide:   .08em;  /* uppercase inline: statuses, tags, nav */
  --ls-wider:  .14em;  /* uppercase blocks: labels, eyebrows, section heads */

  /* ── Type: measure ─────────────────────────────────────────────────────── */
  --measure:       68ch;
  --measure-tight: 58ch;
  --measure-mono:  72ch;

  /* ── Space: 4px ladder. 10 rungs replace ~85 values. ───────────────────── */
  --sp-0: .125rem; --sp-1: .25rem; --sp-2: .375rem; --sp-3: .5rem;  --sp-4: .75rem;
  --sp-5: 1rem;    --sp-6: 1.5rem; --sp-7: 2rem;    --sp-8: 3rem;   --sp-9: 4rem;

  /* ── Space: recipes. Reach for these BEFORE reaching for a rung. ───────── */
  --pad-pill:     var(--sp-0) var(--sp-3);
  --pad-pill-lg:  var(--sp-1) var(--sp-3);
  --pad-row:      var(--sp-3) var(--sp-4);
  --pad-row-lg:   var(--sp-4) var(--sp-4);
  --pad-cell:     var(--sp-3) var(--sp-4);
  --pad-panel:    var(--sp-4) var(--sp-5);
  --pad-panel-lg: var(--sp-5) var(--sp-6);
  --flow:         var(--sp-5);

  /* ── Space: page rhythm ────────────────────────────────────────────────── */
  --gutter:      clamp(1rem, 4vw, 2.5rem);
  --gap-section: clamp(2.5rem, 6vw, 4.5rem);
  --gap-tight:   clamp(1.75rem, 4vw, 2.75rem);
  --gap-col:     clamp(1.5rem, 4vw, 3rem);
  --maxw:        1338px;
  --maxw-rail:   340px;

  /* ── Chrome geometry ───────────────────────────────────────────────────── */
  --chrome-h:      60px;
  --chrome-h-full: 82px;
  --sticky-top:    calc(var(--chrome-h-full) + var(--sp-4));

  /* ── Motion: COLD BOOT beats. Nine hardware events, not a geometric ramp.
        A literal ms inside a transition or animation is a bug (Phase 4). ─── */
  --t-frame:    16ms;   --t-tick:     60ms;   --t-beat:    120ms;
  --t-strike:  200ms;   --t-sweep:   420ms;   --t-boot:    800ms;
  --t-stagger:  45ms;   --t-blink:  1.06s;    --t-idle:      5s;
  --t-drift:    60s;

  /* ── Motion: curves. Hard-out only. No springs exist. ──────────────────── */
  --e-hw:    cubic-bezier(.2,.7,.2,1);
  --e-out:   cubic-bezier(0,0,.2,1);
  --e-drive: linear;
  --e-cut:   steps(1,end);
  --e-bit:   steps(2,end);
  --e-flap:  steps(8,end);

  /* ── Frame ─────────────────────────────────────────────────────────────── */
  --bd:          1px;
  --bd-accent:   2px;
  --hairline:    var(--bd) solid var(--color-border);
  --bd-strong:   var(--bd) solid var(--color-border-strong);
  --bd-brand:    var(--bd) solid var(--brand-55);
  --ring:        var(--bd-accent) solid var(--color-brand);
  --ring-off:    2px;
  --tick:        10px;
  --frame-inset: 3px;
  --radius-chip: 3px;     /* THE ONLY RADIUS. Chips, pills, kbd. Nothing else. */

  /* ── Glow. SHELL ONLY. ─────────────────────────────────────────────────── */
  --glow-sm: 0 0  6px var(--brand-55);
  --glow:    0 0  6px var(--brand-55), 0 0 22px var(--brand-35);
  --glow-lg: 0 0 18px var(--brand-55), 0 0 48px var(--brand-15);

  /* ── Depth ─────────────────────────────────────────────────────────────── */
  --z-base: 0;  --z-raise: 1;  --z-sticky: 20;  --z-header: 40;  --z-search: 45;
  --z-dropdown: 50;  --z-overlay: 60;  --z-top: 70;  --z-rain: 80;  --z-crt: 90;

  color-scheme: dark;

  /* Every numeral tabular with a slashed zero, in both faces, inherited. */
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* …except running prose, where tabular figures are gappy and wrong. */
.prose p, .prose li, .prose blockquote { font-variant-numeric: proportional-nums; }
.dr-num, .pnum { font-variant-numeric: tabular-nums; }

/* THE reduced-motion contract, at token level, so no future component can
   forget the guard. Ambient loops are a separate tier and stay media-gated. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-frame: .01ms; --t-tick: .01ms; --t-beat: .01ms; --t-strike: .01ms;
    --t-sweep: .01ms; --t-boot: .01ms; --t-stagger: .01ms;
  }
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-600);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; letter-spacing: var(--ls-tight); }
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* Visually hidden but crawlable / screen-reader text. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Every numeral is mono + tabular. */
.mono, .num, code, kbd, .ticker, .stat-value, .tape, time, .data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* --- Layout --------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-tight { padding: clamp(1.75rem, 4vw, 2.75rem) 0; }

.dossier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.dossier > * { min-width: 0; }   /* prevent wide children from blowing out the tracks */
.dossier .rail { position: sticky; top: 5rem; }
/* Below ~1024px the two-column split gets razor-tight — the article and the
   340px rail together need nearly the whole width, the gutter collapses, and
   on the narrowest laptops it tips into overflow. Read single-column instead:
   the essay gets the full measure and the rail drops beneath it. */
@media (max-width: 1024px) {
  .dossier { grid-template-columns: minmax(0, 1fr); }
  .dossier .rail { position: static; }
}

/* =============================================================================
   The glitch layer — chrome only. Blade stays clean.
   ============================================================================= */

/* Dither / ordered-halftone SVG tile — background field for shell sections. */
.dither {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23ff2ab9' fill-opacity='0.07'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ff2ab9' fill-opacity='0.07'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}
.halftone {
  background-image: radial-gradient(var(--brand-08) 1px, transparent 1.4px);
  background-size: 8px 8px; background-position: -1px -1px;
}

/* CRT scanlines + vignette overlay (heroes / power-on panels). */
.scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px),
    radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
}

/* CRT double-line frame — the terminal-window device. Hard corners. */
.crt-frame {
  position: relative;
  border: 1px solid var(--brand-55);
  background: var(--color-card);
}
.crt-frame::before {
  content: ""; position: absolute; inset: 3px;
  border: 1px solid var(--color-border); pointer-events: none;
}

/* Neon glow — wordmark and display type ONLY. Data is never glowed. */
.neon { color: var(--color-brand); text-shadow: var(--glow); }

/* RGB-split chromatic aberration for big titles (multi-line safe: shadows only). */
.rgb-split {
  text-shadow: -0.03em 0 var(--brand-85), 0.03em 0 color-mix(in srgb, var(--color-primary) 85%, transparent);
}

/* Wordmark glitch: clip-path slice on hover, RGB pseudo-copies. */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  width: 100%; overflow: hidden; pointer-events: none;
  clip-path: inset(0 0 100% 0);
}
.glitch::before { color: var(--color-brand); }
.glitch::after { color: var(--color-primary); }

/* Terminal section head v2 — the rule LANDS on the container edge. Corners are
   real box-drawing glyphs; edges are flex hairlines (a '─'*80 run stopped at a
   different arbitrary x on every page). The edge carries route + count — never
   a restatement of the heading twenty pixels above it. */
.sechead { margin-bottom: var(--sp-5); }
/* A sechead opening a section sits on the section's own padding; one that
   follows content (tiles, prose, a list) needs its own air above the rule. */
.sechead:not(:first-child) { margin-top: var(--sp-7); }
.sechead .fb-edge, .dr-frame > .fb-edge {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-300); line-height: var(--lh-flat);
  color: var(--brand-55);
  user-select: none;
}
.sechead .fb-run, .dr-frame .fb-run {
  flex: 1 1 auto; min-width: var(--sp-4);
  height: var(--bd); background: currentColor;
}
.sechead .fb-legend, .dr-frame .fb-legend {
  flex: 0 1 auto; min-width: 0;
  color: var(--color-muted-foreground);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sechead .fb-legend.is-count, .dr-frame .fb-legend.is-count { color: var(--brand-55); flex: none; }
.sechead h1, .sechead h2, .dr-sechead {
  font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  font-size: var(--fs-850); line-height: var(--lh-tight);
  color: var(--color-foreground);
  margin-top: var(--sp-2);
}
.sechead h1::before, .sechead h2::before { content: "\25B8 "; color: var(--color-brand); }  /* ▸ */
.sechead .fb-path, .sechead .fb-path-count,
.dr-frame .fb-path, .dr-frame .fb-path-count { display: inline-flex; min-width: 0; }
.sechead .fb-path .fb-legend, .dr-frame .fb-path .fb-legend { display: inline-block; }
@media (max-width: 480px) {
  .sechead .fb-path, .dr-frame .fb-path { display: none; }  /* brackets go with the legend */
}

/* The titled container — .dr-frame. */
.dr-frame { position: relative; padding: 0; color: inherit; }
.dr-frame > .fb-body {
  border-left: var(--bd) solid var(--brand-55);
  border-right: var(--bd) solid var(--brand-55);
  padding: var(--pad-panel);
}
.dr-frame--flush > .fb-body { padding: 0; }

/* Angled marquee section break — the storefront awning. Boundaries only. */
.marquee-break {
  position: relative; overflow: hidden;
  background: var(--color-brand); color: var(--color-background);
  transform: skewY(-2deg);
  margin: var(--sp-7) 0;
  box-shadow: 0 0 30px var(--brand-35);
}
.marquee-break .inner {
  transform: skewY(2deg); padding: .55rem 0; display: flex; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-300); font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
}
.marquee-break .inner span { padding: 0 1.5rem; }

/* Panel power-on: a bright line that expands open on entry. Content never hidden. */
.panel { position: relative; }
.panel.power::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--color-brand); box-shadow: var(--glow);
  transform: scaleX(1); opacity: 0; pointer-events: none;
}

/* --- Header / wordmark ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-card) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--color-foreground); }
.wordmark:hover { text-decoration: none; }
.wordmark .skull { width: 26px; height: 26px; color: var(--color-brand); filter: drop-shadow(0 0 5px var(--brand-55)); }
.wordmark .mark {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-650);
  letter-spacing: var(--ls-mono); text-transform: lowercase;
}
.wordmark .mark b { color: var(--color-brand); text-shadow: var(--glow); }
.site-nav { display: flex; gap: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--ls-wider); }
.site-nav a { color: var(--color-muted-foreground); }
.site-nav a:hover { color: var(--color-brand); text-decoration: none; }

/* Mobile nav: skull button -> full-screen terminal menu. */
.nav-toggle { display: none; align-items: center; gap: var(--sp-2); background: transparent;
  border: 1px solid var(--color-border); color: var(--color-foreground); cursor: pointer;
  min-height: 44px; padding: var(--pad-pill-lg); font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wider); }
.nav-toggle .skull { width: 22px; height: 22px; flex: none;
  filter: drop-shadow(0 0 5px var(--brand-55)); }
.nav-toggle:hover { border-color: var(--color-brand); color: var(--color-brand); }
.nav-toggle .nt-word { color: var(--color-muted-foreground); }

.mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 60; background: var(--color-background); overflow-y: auto;
  min-height: 100vh; min-height: 100dvh; }
.mobile-menu.open { display: block; }
.mobile-menu .mm-inner { display: block; height: auto;
  max-width: var(--maxw); margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.mm-head { display: flex; align-items: center; justify-content: space-between;
  height: 60px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-4); }
.mm-prompt { font-size: var(--fs-400); color: var(--color-muted-foreground); }
.mm-close { background: transparent; border: 1px solid var(--color-border);
  color: var(--color-foreground); font-family: var(--font-mono); font-size: var(--fs-400);
  min-height: 44px; padding: var(--pad-row); cursor: pointer; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.mm-close:hover { border-color: var(--color-brand); color: var(--color-brand); }
.mobile-menu a { display: flex; align-items: center; gap: var(--sp-4); min-height: 52px;
  padding: .6rem .2rem; border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--fs-650); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-foreground); }
.mobile-menu a .mm-g { display: inline-flex; flex: none; }
.mobile-menu a .mm-g .skull { width: 20px; height: 20px; flex: none; }
.mobile-menu a:hover, .mobile-menu a:active, .mobile-menu a:focus {
  background: var(--color-card); color: var(--color-brand); text-decoration: none;
  box-shadow: inset 3px 0 0 var(--color-brand); }
body.nav-open { overflow: hidden; }

/* Toggle + overlay appear ONLY below the nav-collapse breakpoint. */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* Hard desktop guard: never show the toggle, never let the overlay open,
   even if JS added .open on a resize from a narrow width. */
@media (min-width: 769px) {
  .nav-toggle { display: none !important; }
  #mobile-menu, #mobile-menu.open { display: none !important; }
}

/* Keyboard hints stay visible on touch — the strip swaps its payload
   (key chips -> a tappable affordance) instead of vanishing. */

/* --- Command line (search / keyboard entry) ------------------------------- */
.cmdline { display: flex; min-width: 0; align-items: center; gap: var(--sp-3); border: 1px solid var(--color-border); background: var(--color-chart-card); padding: var(--pad-row); font-family: var(--font-mono); }
.cmdline .prompt { color: var(--color-brand); font-size: var(--fs-500); }
.cmdline input {
  flex: 1; background: transparent; border: 0; color: var(--color-foreground);
  font-family: var(--font-mono); font-size: var(--fs-500); outline: none;
}
.cmdline input::placeholder { color: var(--color-muted-foreground); }
.cmdline:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--brand-35); }
@media (prefers-reduced-motion: no-preference) {
  .cmdline:focus-within .prompt::after {
    content: "_"; margin-left: 1px;
    animation: dr-caret var(--t-blink) var(--e-cut) infinite;
  }
  @keyframes dr-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
}
.cmdline .hint { color: var(--color-muted-foreground); font-size: var(--fs-200); letter-spacing: var(--ls-wide); }

/* --- Ticker tape (home) --------------------------------------------------- */
.tape-strip {
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  background: var(--color-chart-card); overflow: hidden; white-space: nowrap;
}
.tape-track { display: inline-flex; will-change: transform; }
.tape-track .tape-item {
  display: inline-flex; align-items: baseline; gap: var(--sp-3); padding: .5rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--fs-400); border-right: 1px solid var(--color-border);
}
.tape-item .t-sym { color: var(--color-foreground); font-weight: 700; letter-spacing: var(--ls-mono); }
.tape-item .t-tier { color: var(--color-muted-foreground); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.tape-item .t-px { color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.tape-item .t-delta { color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.tape-item .t-delta.up { color: var(--color-up); }
.tape-item .t-delta.down { color: var(--color-down); }
.tape-item .glitching { color: var(--color-brand); }
/* Zipper headline items — the news between the prices. Blade-quiet text,
   one magenta flag; the headline is the point, so it stays foreground. */
.tape-news .t-flag { color: var(--color-brand); font-size: var(--fs-100); }
.tape-news .t-head { color: var(--color-foreground); }
.tape-news:hover .t-head, .tape-news:hover .t-sym { color: var(--color-brand); }

/* --- Chips, badges (the ONLY things that keep a radius) ------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-300); font-weight: 700; letter-spacing: var(--ls-mono);
  padding: var(--pad-pill); border-radius: 3px;
  border: 1px solid var(--color-border); background: var(--color-chart-card); color: var(--color-foreground);
}
a.chip:hover { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-100); text-transform: uppercase;
  letter-spacing: var(--ls-wider); padding: var(--pad-pill); border: 1px solid var(--color-border); color: var(--color-muted-foreground);
}
.badge-frontier { border-color: var(--brand-55); color: var(--color-brand); }
.badge-second-order { border-color: var(--blue-55); color: var(--color-link); }
.badge-mag7 { border-color: var(--color-border); color: var(--color-muted-foreground); }
.badge-narrative { border-color: var(--color-border); color: var(--color-muted-foreground); }
/* Trend coverage module — data zone, dial at zero. One number, one read, one
   honest date. */
.trend-signal .ts-figure { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.trend-signal .ts-count {
  font-family: var(--font-mono); font-size: var(--fs-850); font-weight: 700;
  color: var(--color-foreground); font-variant-numeric: tabular-nums; line-height: 1;
}
.trend-signal .ts-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.trend-signal .ts-delta.up { color: var(--color-up); }
.trend-signal .ts-delta.down { color: var(--color-down); }
.trend-signal .ts-read { margin: .7rem 0 0; color: var(--color-muted-foreground); font-size: var(--fs-600); }
.trend-signal .ts-asof { margin: .55rem 0 0; font-size: var(--fs-200); }

/* Chart caption — the claim, stated under the blade. Quiet: this sits inside
   the data zone where the aggression dial is locked at zero. */
.chart-cap {
  font-family: var(--font-mono); font-size: var(--fs-300); line-height: 1.45;
  color: var(--color-muted-foreground); margin-top: var(--sp-3); padding-left: .1rem;
  border-left: 2px solid var(--color-border); padding-left: .6rem;
}
/* A tier pill riding in a bbs-row's meta cell: the row's magenta hover fill
   would otherwise leave magenta-on-magenta text. Invert the pill with the row. */
.bbs-row:hover .badge, .bbs-row.sel .badge, .bbs-row:focus .badge {
  color: var(--color-background); border-color: var(--color-background);
}

/* --- Data labels ---------------------------------------------------------- */
.label { font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-muted-foreground); }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-brand); }

/* --- Hero (home) ---------------------------------------------------------- */
.hero { position: relative; border-bottom: 1px solid var(--color-border); overflow: hidden; }
.hero .halftone-floor { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--ls-tight); max-width: 16ch; text-transform: uppercase; }
.hero h1 .neon { display: inline; }
.hero .dek { margin-top: var(--sp-5); max-width: 54ch; color: var(--color-muted-foreground); font-size: var(--fs-650); }
.hero .cli { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-400); color: var(--color-muted-foreground); }
.cli { font-family: var(--font-mono); }
.cli b { color: var(--color-brand); }
.hero .hero-cmd { margin-top: var(--sp-6); max-width: 34rem; }
/* The cmdline on hub pages (search, library) rather than the hero. */
.page-cmd { margin-bottom: var(--sp-6); max-width: 42rem; }
.page-cmd--narrow { max-width: 30rem; }
/* Trailing label that closes a page or section — one class, no inline margins. */
.foot-label { margin-top: var(--sp-6); }
.prose--gap { margin-top: var(--sp-7); }
.section-tight--pad { padding-bottom: var(--sp-8); }

/* --- BBS directory listings (replaces every card grid) -------------------- */
.bbs { border-top: 1px solid var(--color-border); }
.bbs-group {
  font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground); padding: .8rem .75rem .35rem;
  border-bottom: 1px solid var(--color-border); background: var(--color-chart-card);
}
.bbs-group::before { content: "\2500\2500 "; color: var(--color-brand); }  /* ── */
/* Sector sticks: diverging 1-day moves, one stick per name — green rises above
   the midline, red drops below; stick length scales with |move| (capped at 8%). */
.bbs-group { display: flex; align-items: center; gap: var(--sp-3); }
.bbs-group .sticks { margin-left: auto; }
.sticks { position: relative; display: inline-flex; align-items: stretch; gap: 3px; height: 18px; }
.sticks::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1px; background: var(--color-border); }
.stick { width: 5px; height: 100%; position: relative; }
.stick::before { content: ""; position: absolute; left: 0; width: 100%; height: calc(2px + 7px * var(--m, 0.2)); }
.stick.up::before { bottom: 50%; background: var(--color-up); }
.stick.down::before { top: 50%; background: var(--color-down); }
.stick:hover::before { background: var(--color-brand); }
.bbs-row {
  display: grid; grid-template-columns: 1.2rem minmax(5rem, 14rem) minmax(0, 1fr) auto;
  gap: var(--sp-4); align-items: baseline;
  padding: var(--pad-row); border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--fs-500); color: var(--color-foreground);
}
.bbs-row .g { color: var(--color-brand); font-size: var(--fs-400); }
.bbs-row .g svg { width: .8rem; height: .8rem; display: inline; vertical-align: -1px; }
.bbs-row .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbs-row .d { color: var(--color-muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbs-row .m { color: var(--color-muted-foreground); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--ls-wide); white-space: nowrap; }
.bbs-row:hover, .bbs-row.sel { background: var(--color-brand); color: var(--color-background); text-decoration: none; }
.bbs-row:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
.bbs-row:hover .g, .bbs-row:hover .n, .bbs-row:hover .d, .bbs-row:hover .m,
.bbs-row.sel .g, .bbs-row.sel .n, .bbs-row.sel .d, .bbs-row.sel .m { color: var(--color-background); }
.bbs-row .thumb { width: 1.1rem; height: 1.5rem; object-fit: cover; border: 1px solid var(--color-border); }
.bbs-row[hidden] { display: none; }
/* Registry rows: skull | ticker | company | dek | EOD px+Δ | news flag/date */
.reg-row { grid-template-columns: 1.2rem 5.2rem minmax(6rem, 11rem) minmax(0, 1fr) auto minmax(4.6rem, auto); }
.reg-row .co { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-row .px { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.reg-row .px .up { color: var(--color-up); }
.reg-row .px .down { color: var(--color-down); }
.reg-row .nn { color: var(--color-brand); animation: nn-pulse 1.6s ease-in-out infinite; }
@keyframes nn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .reg-row .nn { animation: none; } }
.bbs-row:hover .co, .bbs-row:hover .px, .bbs-row:hover .px .up, .bbs-row:hover .px .down, .bbs-row:hover .nn,
.bbs-row.sel .co, .bbs-row.sel .px, .bbs-row.sel .px .up, .bbs-row.sel .px .down, .bbs-row.sel .nn { color: var(--color-background); }
@media (max-width: 680px) {
  .bbs-row { grid-template-columns: 1rem minmax(0, 1fr) auto; }
  .bbs-row .d { display: none; }
  /* Ticker alone is unreadable on a phone (TSM without TSMC) — keep the
     company name; drop the dek and the date instead. */
  .reg-row { grid-template-columns: 1rem 4.2rem minmax(0, 1fr) auto; }
  .reg-row .co { display: block; overflow: hidden; text-overflow: ellipsis; }
  .reg-row .m { display: none; }
}

/* --- Discourse: quoted social posts, verbatim, linked out ------------------ */
.vc-text { font-size: var(--fs-500); line-height: 1.55; color: var(--color-foreground); margin: 0 0 var(--sp-4); }
.vc-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); }
.vc-author { font-style: normal; color: var(--color-foreground); font-weight: 700; }
.vc-ctx { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Rails (dossier instrument column) — hard corners, terminal chrome ---- */
.rail .rail-block { background: var(--color-card); border: 1px solid var(--color-border); border-left: 2px solid var(--color-brand); padding: var(--pad-panel); margin-bottom: var(--sp-5); }
.rail .rail-label { font-family: var(--font-mono); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-muted-foreground); margin-bottom: var(--sp-3); }
.rail .rail-label::before { content: "\2039 "; color: var(--color-brand); }
.rail .rail-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.rail .rail-list a { color: var(--color-foreground); font-size: var(--fs-500); font-family: var(--font-mono); }
.rail .rail-list a:hover { color: var(--color-brand); }
/* Metadata (author, kind, date) gets its own line — inline it wraps
   mid-name through the title ("Security Analysis Benjamin Graham & …"). */
.rail .rail-list .co-updated { display: block; margin-top: var(--sp-0); }
.rail .ticker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.rail .ticker-head .co-updated { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-muted-foreground); }
.co-updated { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --- Lens card (analysis rail) — hard corner ------------------------------ */
.lens-card { background: var(--color-card); border: 1px solid var(--color-border); border-left: 2px solid var(--color-brand); padding: var(--pad-panel); }
.lens-card:hover { border-left-color: var(--color-brand); }
.lens-card .lens-name { font-weight: 700; }
.lens-card .lens-line { color: var(--color-muted-foreground); font-size: var(--fs-500); margin-top: var(--sp-1); }

/* =============================================================================
   The blade — charts, tables, stat tiles, edges, prose. ZERO distortion.
   Hard corners, but no glitch, no glow (except the one pull-stat number).
   ============================================================================= */

/* --- Stat tiles ----------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.tile { background: var(--color-chart-card); border: 1px solid var(--color-border); padding: var(--pad-panel); }
.tile .stat-label { font-family: var(--font-mono); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-muted-foreground); }
.tile .stat-value { font-size: var(--fs-800); font-weight: 700; margin-top: var(--sp-1); color: var(--color-foreground); }
.tile .stat-base { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); margin-top: var(--sp-1); }
.delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-400); font-weight: 700; }
.delta.up { color: var(--color-up); }
.delta.down { color: var(--color-down); }
.delta.flat { color: var(--color-muted-foreground); }

/* --- Edge list ------------------------------------------------------------ */
.edge-list { border: 1px solid var(--color-border); }
/* The statement is the row; the receipt is a quiet line under it. The old
   two-column grid gave 'CONFIRMED 2026-07-26 #409023' half a phone's width
   and wrapped the statement one word per line beside a void. */
.edge-row { display: flex; flex-direction: column; gap: var(--sp-2); align-items: stretch; padding: var(--pad-row); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--fs-400); }
.edge-row .edge-stmt { min-width: 0; }
.edge-row:last-child { border-bottom: 0; }
.edge-row .edge-stmt .pred { color: var(--color-brand); }
.edge-row .edge-stmt .obj, .edge-row .edge-stmt .subj { color: var(--color-foreground); }
.edge-row .edge-meta { display: inline-flex; gap: var(--sp-3); align-items: baseline; color: var(--color-muted-foreground); font-size: var(--fs-200); }
/* Status is a glyph + a word — readable in a screenshot, in monochrome, and
   with any colour blindness. Teal/coral stay reserved for signed price change. */
.st {
  display: inline-flex; align-items: baseline; gap: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground);
  white-space: nowrap;
}
.st::before { font-weight: 700; }
.st--confirmed        { color: var(--color-foreground); }
.st--confirmed::before{ content: "\002B"; color: var(--color-brand); }      /* + */
.st--rumored::before  { content: "\007E"; }                                  /* ~ */
.st--denied::before   { content: "\00D7"; }                                  /* x */
.st--denied .st-w     { text-decoration: line-through; text-decoration-thickness: 1px; }
.st--failed::before   { content: "\2013"; }                                  /* - */

/* --- Pull-stat (the one number, CRT frame) -------------------------------- */
.pull-stat { padding: var(--pad-panel-lg); margin: var(--sp-6) 0; text-align: center; }
.pull-stat .pull-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-display); font-weight: 700; color: var(--color-brand); text-shadow: var(--glow); line-height: 1; }
.pull-stat .pull-label { margin-top: var(--sp-3); color: var(--color-muted-foreground); font-size: var(--fs-500); }

/* --- Signal chart panel --------------------------------------------------- */
.signal-chart { background: var(--color-chart-card); border: 1px solid var(--color-border); padding: 1rem 1.1rem 1.2rem; margin: var(--sp-6) 0; position: relative; }
.signal-chart .chart-claim { font-weight: 700; font-size: var(--fs-600); line-height: 1.3; margin-bottom: var(--sp-4); }
.signal-chart .chart-body { position: relative; min-height: 160px; }
.signal-chart .chart-watermark { position: absolute; right: .8rem; bottom: .6rem; display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-muted-foreground); opacity: .7; }
.signal-chart .chart-watermark svg { width: 12px; height: 12px; color: var(--color-brand); }
.signal-chart.pending .chart-body { display: grid; place-items: center; border: 1px dashed var(--color-border); color: var(--color-muted-foreground); font-family: var(--font-mono); font-size: var(--fs-300); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 120px; }

/* --- Prose (the blade — quiet, legible) ----------------------------------- */
.prose { max-width: var(--measure); font-size: var(--fs-600); line-height: 1.7; overflow-wrap: break-word; }
.prose.full { max-width: none; }
/* Section treatment inside an essay — mono, not a fourth heading voice. */
.prose h2 {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-700);
  margin: 2.2rem 0 .8rem; text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-foreground);
  padding-bottom: var(--sp-2); border-bottom: var(--hairline);
}
.prose h2::before { content: "// "; color: var(--color-brand); font-weight: 400; }
.prose h3 { font-size: var(--fs-650); margin: 1.6rem 0 .5rem; }
.prose p { margin: 0 0 var(--sp-5); }
.prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--blue-40); }
.prose a:hover { text-decoration-color: var(--color-link); }
.prose ul, .prose ol { margin: 0 0 1rem 1.2rem; }
.prose li { margin: var(--sp-1) 0; }
.prose strong { color: var(--color-foreground); font-weight: 700; }
.prose blockquote { border-left: 2px solid var(--color-brand); padding-left: 1rem; margin: var(--sp-5) 0; color: var(--color-muted-foreground); }
.prose code { background: var(--color-chart-card); border: 1px solid var(--color-border); padding: var(--pad-pill); font-size: .88em; }
.prose pre { background: var(--color-chart-card); border: 1px solid var(--color-border); padding: var(--pad-panel); overflow-x: auto; margin: var(--sp-5) 0; }
.prose pre code { border: 0; padding: 0; background: none; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-500); }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--pad-row); text-align: left; }
.prose th { background: var(--color-chart-card); font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-muted-foreground); }
.prose td { font-variant-numeric: tabular-nums; }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--sp-7) 0; }

/* --- Page head block ------------------------------------------------------ */
.page-head { border-bottom: 1px solid var(--color-border); padding-bottom: 1.2rem; margin-bottom: var(--sp-6); }
.page-head h1 { font-size: var(--fs-900); text-transform: uppercase; letter-spacing: var(--ls-tight); }
.page-head .dek { margin-top: var(--sp-3); color: var(--color-muted-foreground); font-size: var(--fs-650); max-width: 60ch; }
.page-head .head-meta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --- Disclaimer strip ----------------------------------------------------- */
.disclaimer {
  border: 1px solid var(--color-border); background: var(--color-chart-card);
  padding: var(--pad-panel); margin: var(--sp-6) 0;
  font-family: var(--font-mono); font-size: var(--fs-300); color: var(--color-muted-foreground); letter-spacing: var(--ls-0);
}
.disclaimer a { color: var(--color-link); }

/* =============================================================================
   Canon / book pages — cover + chapter threads (thread cards, hard corners).
   ============================================================================= */
.book-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-6); align-items: start; border-bottom: 1px solid var(--color-border); padding-bottom: 1.4rem; margin-bottom: var(--sp-6); }
.book-head .cover { width: 150px; border: 1px solid var(--color-border); box-shadow: 0 0 0 3px var(--color-background), 0 0 0 4px var(--color-border); }
.book-head h1 { font-size: var(--fs-900); text-transform: uppercase; }
.book-head .byline { font-family: var(--font-mono); font-size: var(--fs-400); color: var(--color-muted-foreground); margin-top: var(--sp-3); }
.book-head .dek { margin-top: var(--sp-4); color: var(--color-muted-foreground); }
.book-head .attrib { margin-top: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-300); color: var(--color-muted-foreground); border: 1px solid var(--color-border); border-left: 2px solid var(--color-brand); padding: var(--pad-row); }
.book-head .attrib b { color: var(--color-brand); }
@media (max-width: 640px) { .book-head { grid-template-columns: 1fr; } .book-head .cover { width: 120px; } }

.chapter { margin: var(--sp-7) 0; }
.chapter > h2 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-650); color: var(--color-foreground);
  padding-bottom: var(--sp-2); border-bottom: var(--hairline); margin-bottom: var(--sp-5);
}
.chapter > h2::before { content: "\2500\2500"; color: var(--color-brand); flex: none; }
.chapter > h2::after { content: ""; flex: 1; height: 1px; min-width: var(--sp-4);
  background: repeating-linear-gradient(90deg, var(--color-border) 0 4px, transparent 4px 7px); }
.chapter .intro { max-width: var(--measure); color: var(--color-muted-foreground); margin-bottom: var(--sp-5); }
.thread { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 74ch; }
/* The thread: one muted spine for the chapter; each note hangs off it with a
   number tab. (Fifty magenta left-borders per page was texture, not signal.) */
.thread { border-left: var(--bd) solid var(--color-border-strong); padding-left: var(--sp-5); }
.micropost { border: var(--hairline); padding: .8rem 1rem; position: relative; background: var(--color-card); }
.micropost::before { content: ""; position: absolute; left: calc(var(--sp-5) * -1 - 1px);
  top: 1.1rem; width: var(--sp-4); height: 1px; background: var(--color-border-strong); }
.micropost .mp-n { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-brand); letter-spacing: var(--ls-wide); display: block; margin-bottom: var(--sp-2); }
.micropost p { margin: 0 0 var(--sp-3); line-height: 1.65; }
.micropost p:last-child { margin-bottom: 0; }
.micropost em { color: var(--color-foreground); }
.micropost .mp-n:hover { color: var(--color-foreground); }

/* Chapter contents. A book page runs to fifty-odd notes; without this the only
   way to a chapter is scrolling, and nothing off-page can address one. */
.book-toc { border: 1px solid var(--color-border); border-left: 2px solid var(--color-brand);
  padding: var(--pad-panel-lg); margin-bottom: var(--sp-7); }
.book-toc { margin: var(--sp-6) 0; }
.book-toc .toc-list { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-5); }
.book-toc .toc-row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-1) 0;
}
.book-toc .toc-loc {
  font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); text-align: right; white-space: nowrap;
}
.book-toc .toc-t { color: var(--color-foreground); font-size: var(--fs-500); line-height: 1.4; }
.book-toc .toc-t:hover { color: var(--color-brand); text-decoration: none; }
.book-toc .toc-n {
  font-family: var(--font-mono); font-size: var(--fs-200);
  color: var(--color-muted-foreground); white-space: nowrap;
}
@media (min-width: 900px) {
  .book-toc .toc-list { columns: 2; column-gap: var(--sp-7); }
  .book-toc .toc-row { break-inside: avoid; }
}
.book-toc .toc-h { margin-bottom: var(--sp-3); }
.book-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.book-toc li { font-family: var(--font-mono); font-size: var(--fs-400); line-height: 1.5;
  padding: .12rem 0; break-inside: avoid; }
.book-toc a { color: var(--color-muted-foreground); }
.book-toc a:hover { color: var(--color-brand); }
.book-toc .toc-flag { color: var(--color-brand); font-size: var(--fs-100); vertical-align: .18em; }
@media (max-width: 720px) { .book-toc ol { columns: 1; } }

/* Applied rail: the chapter's idea, where it is argued on a name. Same row
   grammar as the Powers Grid, because half of these rows *are* Powers rows. */
.applied { margin-top: var(--sp-6); border: 1px solid var(--color-border); max-width: 74ch; }
.applied-h { padding: var(--pad-row); border-bottom: 1px solid var(--color-border);
  background: var(--color-chart-card); color: var(--color-brand); }
.applied-row { display: grid; grid-template-columns: 1.6rem minmax(9rem, auto) 5rem minmax(0, 1fr);
  gap: var(--sp-3); align-items: baseline; padding: var(--pad-row); border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--fs-400); color: var(--color-muted-foreground); }
.applied-row:last-child { border-bottom: 0; }
.applied-row:hover { background: var(--color-chart-card); }
/* Two-column variant (structured rows: glyph+count | label+note). The first
   column is a slim locator — 9rem was the OLD text-label width and left a
   144px gutter holding a 13px glyph. */
.applied .applied-row:not(.status-held):not(.status-contested) { grid-template-columns: 3rem minmax(0, 1fr); }
.applied .applied-row:not(.status-held):not(.status-contested) .ap-status { text-align: center; }
.ap-glyph { display: inline-flex; justify-content: center; align-self: center; }
.ap-glyph svg { width: 13px; height: 13px; }
.applied-row.status-held .ap-glyph { color: var(--color-brand); }
.applied-row.status-contested .ap-glyph { color: var(--color-caution); }
.ap-label { color: var(--color-foreground); }
.applied-row:hover .ap-label { color: var(--color-brand); }
.ap-status { text-transform: uppercase; font-size: var(--fs-100); letter-spacing: var(--ls-wide); }
.ap-note { color: var(--color-muted-foreground); }
.applied-more { padding: var(--pad-row); border-top: 1px solid var(--color-border); }
@media (max-width: 640px) {
  .applied-row { grid-template-columns: 1.4rem 1fr; }
  .applied-row .ap-status { display: none; }
  .ap-note { grid-column: 2; }
  .applied .applied-row:not(.status-held):not(.status-contested) { grid-template-columns: 1fr; }
  .applied .applied-row:not(.status-held):not(.status-contested) .ap-note { grid-column: 1; }
  /* Stacked, the glyph would be an orphan line saying nothing — drop it. */
  .applied .applied-row:not(.status-held):not(.status-contested) .ap-glyph { display: none; }
}

/* Thinker page: "Where this lens runs" — the brains applying the lens. The
   mirror of the book page's applied rail, on the thinker side. Sechead frames
   it; stance renders as position on the track, never as a hue. */
.lens-runs { margin-top: var(--sp-7); max-width: 74ch; }
.lens-list { list-style: none; margin: 0; padding: 0; border: var(--hairline); }
.lens-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(6.5rem, auto) minmax(0, 1fr);
  align-items: baseline; gap: var(--sp-2) var(--sp-4); padding: var(--pad-row);
  border-bottom: var(--hairline); }
.lens-row:last-child { border-bottom: 0; }
.lens-row:hover { background: var(--color-chart-card); }
.lens-row:hover .dr-stance-track i { border-color: var(--color-muted-foreground); }
.lens-co { font-family: var(--font-mono); font-size: var(--fs-500); font-weight: 600; color: var(--color-foreground); }
.lens-row:hover .lens-co { color: var(--color-brand); }
.lens-tk { font-size: var(--fs-200); font-weight: 400; color: var(--color-muted-foreground); }
.lens-dek { margin: 0; font-size: var(--fs-500); line-height: 1.4; color: var(--color-muted-foreground); }
@media (max-width: 640px) {
  .lens-row { grid-template-columns: 1fr auto; }
  .lens-dek { grid-column: 1 / -1; }
}

/* Rail variant: canon books as mini tomes (cover + title + author). */
.rail-tomes { margin-top: var(--sp-2); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--color-border); margin-top: var(--sp-8); background: var(--color-chart-card); position: relative; }
.site-footer .halftone-floor { position: absolute; inset: 0; opacity: .35; pointer-events: none; }
.site-footer .wrap { position: relative; padding: 2.5rem 0 2rem; }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: space-between; align-items: flex-start; }
.footer-powered { display: inline-flex; flex-direction: column; gap: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-400); color: var(--color-muted-foreground); }
.footer-powered a { color: var(--color-brand); font-weight: 700; }
.footer-manifesto { font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: var(--ls-mono); color: var(--color-muted-foreground); }
.footer-manifesto b { color: var(--color-brand); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.footer-links a { color: var(--color-muted-foreground); }
.footer-links a:hover { color: var(--color-brand); text-decoration: none; }
.footer-disclaimer { margin-top: var(--sp-6); padding-top: 1.2rem; border-top: 1px solid var(--color-border); font-size: var(--fs-400); color: var(--color-muted-foreground); max-width: 70ch; line-height: 1.5; }
.footer-disclaimer a { color: var(--color-link); }
.footer-editor { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); }

/* --- Manifesto block (about) ---------------------------------------------- */
.manifesto { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-left: 2px solid var(--color-brand); padding: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: var(--sp-7); }
.manifesto .halftone-floor { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.manifesto p { position: relative; font-size: var(--fs-900); font-weight: 700; text-transform: uppercase; line-height: 1.08; letter-spacing: var(--ls-tight); }
.manifesto p b { color: var(--color-brand); text-shadow: var(--glow); }

/* --- 404 ------------------------------------------------------------------ */
.deadend { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.deadend .skull { width: 120px; height: 120px; color: var(--color-brand); filter: drop-shadow(0 0 18px var(--brand-55)); margin: 0 auto 1.5rem; }
.deadend h1 { font-size: var(--fs-display); text-transform: uppercase; }
.deadend p { color: var(--color-muted-foreground); margin-top: var(--sp-3); }
.deadend .cli { font-family: var(--font-mono); color: var(--color-muted-foreground); margin-top: var(--sp-5); }

.empty { color: var(--color-muted-foreground); font-family: var(--font-mono); font-size: var(--fs-400); padding: var(--pad-panel); }

/* =============================================================================
   Motion — CSS-first, and ONLY when the reader allows it.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {

  .tape-track { animation: tape-scroll var(--t-drift) var(--e-drive) infinite; }
  .tape-strip:hover .tape-track, .tape-strip:focus-within .tape-track, .tape-strip.paused .tape-track { animation-play-state: paused; }
  @keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Wordmark flicker-on + hover glitch slice. */
  .wordmark .mark b { animation: flicker-on var(--t-boot) var(--e-cut) 1 both; }
  @keyframes flicker-on {
    0%, 12%, 20%, 34% { opacity: .25; text-shadow: none; }
    16%, 28%, 100% { opacity: 1; text-shadow: var(--glow); }
  }
  .glitch:hover::before { animation: glitch-a var(--t-sweep) var(--e-bit) 1; }
  .glitch:hover::after  { animation: glitch-b var(--t-sweep) var(--e-bit) 1; }
  @keyframes glitch-a {
    0% { clip-path: inset(0 0 80% 0); transform: translateX(-2px); }
    50% { clip-path: inset(40% 0 20% 0); transform: translateX(2px); }
    100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
  }
  @keyframes glitch-b {
    0% { clip-path: inset(70% 0 0 0); transform: translateX(2px); }
    50% { clip-path: inset(10% 0 55% 0); transform: translateX(-2px); }
    100% { clip-path: inset(100% 0 0 0); transform: translateX(0); }
  }

  /* Hero scanline flicker (rare single frame). */
  .hero.scanlines::after { animation: crt-flicker 7s steps(1, end) infinite; }
  @keyframes crt-flicker { 0%, 97%, 100% { opacity: 1; } 98% { opacity: .78; } 99% { opacity: 1; } }

  /* Spark bars draw up on entry. */

  /* Panel power-on: bright line expands then fades. Triggered by JS adding .power. */
  .panel.power::before { animation: power-on var(--t-sweep) var(--e-out) 1 forwards; }
  @keyframes power-on {
    0% { transform: scaleX(0); opacity: 1; }
    60% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
  }

  .bbs-row, .dr-row, .frow, .dr-crow, .site-nav a, .chip, .lens-card { transition: background-color var(--t-beat) var(--e-hw), color var(--t-beat) var(--e-hw), border-color var(--t-beat) var(--e-hw); }

  /* ACQUIRE — the blade's one permitted entrance. A chart figure draws two
     frame corners in, then the render fades up. States "the instrument just
     locked on"; fires once, on entry, via the same observer as power-on. */
  .signal-chart { position: relative; }
  .signal-chart::before, .signal-chart::after {
    content: ""; position: absolute; width: 0; height: 0;
    border: 0 solid var(--color-brand); pointer-events: none; opacity: 0;
  }
  .signal-chart::before { top: -1px; left: -1px; border-top-width: var(--bd-accent); border-left-width: var(--bd-accent); }
  .signal-chart::after  { bottom: -1px; right: -1px; border-bottom-width: var(--bd-accent); border-right-width: var(--bd-accent); }
  .signal-chart.mv-armed img { opacity: 0; }
  .signal-chart.acquired::before, .signal-chart.acquired::after {
    width: var(--tick); height: var(--tick); opacity: 1;
    transition: width var(--t-strike) var(--e-hw), height var(--t-strike) var(--e-hw), opacity var(--t-tick) var(--e-out);
  }
  .signal-chart.acquired img { opacity: 1; transition: opacity var(--t-sweep) var(--e-out) var(--t-tick); }

  /* IGNITE — the gauge's skulls light left-to-right on entry. States "the
     panel has voted"; the count is static, only the marks perform. */
  .dr-gauge.mv-armed .sk.on { color: var(--color-border); }
  .dr-gauge.ignite .sk.on { animation: dr-ignite var(--t-strike) var(--e-cut) forwards; }
  .dr-gauge.ignite .sk.on:nth-child(2) { animation-delay: var(--t-stagger); }
  .dr-gauge.ignite .sk.on:nth-child(3) { animation-delay: calc(var(--t-stagger) * 2); }
  .dr-gauge.ignite .sk.on:nth-child(4) { animation-delay: calc(var(--t-stagger) * 3); }
  .dr-gauge.ignite .sk.on:nth-child(5) { animation-delay: calc(var(--t-stagger) * 4); }
  @keyframes dr-ignite { to { color: var(--color-brand); } }
}

/* Arm-first honesty: nothing hides unless JS armed it this pageview — a
   half-dead script can never strand an invisible chart or a wrong count. */

/* Reduced motion: everything static; tape becomes a scroll box. */
@media (prefers-reduced-motion: reduce) {
  .tape-strip { overflow-x: auto; }
}

/* FINDING-001: hero right-half dead zone → animated ASCII skull */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap: var(--sp-7);align-items:center}
.ascii-skull{font-family:var(--font-mono);font-size: clamp(6px,.75vw,11px);line-height:1.18;letter-spacing: var(--ls-0);
  color:var(--color-brand);margin:0;justify-self:center;user-select:none;
  text-shadow:0 0 6px color-mix(in oklab,var(--color-brand) 65%,transparent),0 0 22px color-mix(in oklab,var(--color-brand) 30%,transparent);
  position:relative}
@media (prefers-reduced-motion:no-preference){
  .ascii-skull{animation:skull-breathe 5s ease-in-out infinite}
  .ascii-skull::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 0%,color-mix(in oklab,var(--color-brand) 14%,transparent) 50%,transparent 100%);
    background-size:100% 220%;animation:skull-scan 7s linear infinite;mix-blend-mode:screen;
    -webkit-mask:radial-gradient(60% 60% at 50% 50%,#000 35%,transparent 95%);
    mask:radial-gradient(60% 60% at 50% 50%,#000 35%,transparent 95%)}
  @keyframes skull-breathe{0%,100%{opacity:.92;filter:none}48%{opacity:1}50%{filter:drop-shadow(0 0 18px color-mix(in oklab,var(--color-brand) 45%,transparent))}52%{opacity:.98}}
  @keyframes skull-scan{0%{background-position:0 -120%}100%{background-position:0 220%}}
}
.ascii-skull .glitched{color:var(--color-primary)}
/* jack_in dropdown: .hero{overflow:hidden} clips it at the hero's edge — the
   z-index rules were never the problem. Release the clip while searching. */
.hero:focus-within{overflow:visible}
/* With JS on, never paint the fallback <pre> skull — the deferred module can't
   hide it before first paint (CSP bans inline scripts), so CSS does. The module
   reveals it explicitly if the canvas render fails; no-JS browsers ignore this. */
@media (scripting: enabled){.ascii-skull{visibility:hidden}}
/* Shadow behind the whole mark: deep black halo + brand aura, sitting under the
   glyphs. Ellipse radii stay under 50% of the box so the fade completes before
   the edge — bigger and it clips into a hard rectangle. */
.ascii-skull::before,.skull-wrap::before{content:"";position:absolute;inset:-18% -24%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 38% at 50% 46%,color-mix(in oklab,var(--color-brand) 8%,transparent),transparent 100%),
    radial-gradient(46% 48% at 50% 50%,rgba(0,0,0,.7),transparent 100%)}
/* Live binary render of the mark (ascii-skull.js swaps the <pre> for this). */
.skull-wrap{position:relative;isolation:isolate;justify-self:center;width:min(100%,26rem)}
.skull-canvas{display:block;width:100%;height:auto;user-select:none;opacity:0;transition:opacity .9s ease}
.skull-canvas.on{opacity:1}
@media (prefers-reduced-motion:reduce){.skull-canvas{opacity:1;transition:none}}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}.ascii-skull,.skull-wrap{display:none}}

/* FINDING-003: sources fallback compact until cards render */
.sources-fallback,.dr[data-c="source-cards"]+ul{font-size: var(--fs-400);line-height:1.5;color:var(--color-muted-foreground);overflow-wrap:anywhere}
@media (min-width:640px){.sources-fallback,.dr[data-c="source-cards"]+ul{columns:2;gap: var(--sp-7)}}
/* FINDING-005: note cards — full hairline frame w/ corner tick, not slop left-border */

/* =============================================================================
   Instrument layer — The Trade, tabs, brains, powers, rail, feed, /stock.
   Blade discipline: hard corners, mono data, zero glitch/glow (except the one
   pull-stat number, which keeps its magenta glow).
   ============================================================================= */

/* Inline SVG sparklines (rail + hero header) */
.sparkline { width: 100%; height: 34px; margin: .45rem 0 .25rem; }
.head-spark { display: inline-flex; width: 96px; height: 22px; align-items: center; }
.head-spark .sparkline { height: 22px; margin: 0; }

/* --- The Trade ------------------------------------------------------------ */
.trade { padding: var(--pad-panel-lg); margin: var(--sp-6) 0; }
.trade-top { display: flex; gap: var(--sp-4); align-items: baseline; flex-wrap: wrap;
  padding-bottom: .8rem; border-bottom: 1px solid var(--color-border); }
.trade-k { font-family: var(--font-mono); font-size: var(--fs-100); text-transform: uppercase;
  letter-spacing: var(--ls-wider); color: var(--color-brand); }
.trade-setup { color: var(--color-foreground); font-size: var(--fs-600); line-height: 1.45; flex: 1; min-width: 15rem; }
.trade-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-6); padding: 1rem 0; align-items: start; }
.trade-stories .ts { margin: 0 0 var(--sp-3); font-size: var(--fs-500); line-height: 1.5; color: var(--color-muted-foreground); }
.trade-stories .ts:last-child { margin-bottom: 0; }
.trade-stories .ts-k { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide); padding: var(--pad-pill); margin-right: .45rem;
  border: 1px solid var(--color-border); }
.ts.long .ts-k { color: var(--color-link); border-color: var(--blue-55); }
.ts.short .ts-k { color: var(--color-brand); border-color: var(--brand-55); }
.trade-foot { display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  align-items: center; padding-top: .8rem; border-top: 1px solid var(--color-border); }
.trade-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip.signal { border-color: var(--brand-55); color: var(--color-brand); }
.trade-earn { white-space: nowrap; }
@media (max-width: 720px) { .trade-grid { grid-template-columns: 1fr; } }

/* --- Narrative spectrum gauge --------------------------------------------- */
.spectrum { margin-bottom: var(--sp-5); }
.spec-ends { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: var(--fs-100); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); margin-bottom: var(--sp-1); }
.spec-track { position: relative; height: 6px; border: 1px solid var(--color-border);
  background: linear-gradient(90deg, var(--color-brand), var(--color-muted), var(--color-primary)); }
.spec-mark { position: absolute; top: 50%; width: 3px; height: 16px; background: var(--color-foreground);
  transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--color-background); }
.spec-cap { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-muted-foreground); }
.spec-cap a { color: var(--color-link); }

/* --- Skull Gauge (pixel skulls as the rating unit) ------------------------ */

/* --- Tabs (one URL, all panels in the DOM) -------------------------------- */
.tabs { display: flex; gap: var(--sp-0); border-bottom: 1px solid var(--color-border);
  margin: 1.4rem 0 1.4rem; overflow-x: auto; }
.tabs .tab { font-family: var(--font-mono); font-size: var(--fs-300); text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--color-muted-foreground); padding: var(--pad-row);
  border: 1px solid transparent; border-bottom: 0; white-space: nowrap; }
.tabs .tab:hover { color: var(--color-brand); text-decoration: none; }
.tabs .tab.current, .tabs .tab[aria-current="true"] { color: var(--color-foreground); border-color: var(--color-border);
  background: var(--color-card); position: relative; }
.tabs .tab.current::after, .tabs .tab[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--color-brand); }
.tabs .tab-n { font-size: var(--fs-100); color: var(--color-brand); }
.js .tabpanel { display: none; }
.js .tabpanel.active { display: block; }
.tabpanel { margin-bottom: var(--sp-5); }

/* --- Modules -------------------------------------------------------------- */
.module { margin: var(--sp-6) 0; }
.module-h { margin-bottom: var(--sp-3); }
.module-more { margin-top: var(--sp-3); }
.module-more a, .rail-sub a { color: var(--color-link); }

/* --- Brains --------------------------------------------------------------- */
.gauge-detail { margin: 1rem 0 1.4rem; padding: var(--pad-panel); border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-brand); background: var(--color-card); }

/* --- Powers grid ---------------------------------------------------------- */
.powers { margin-top: var(--sp-6); }
.powers-grid { border: 1px solid var(--color-border); }
.power-row { display: grid; grid-template-columns: 1.6rem minmax(8rem, 1fr) 5rem minmax(0, 2fr);
  gap: var(--sp-3); align-items: baseline; padding: var(--pad-row); border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--fs-400); }
.power-row:last-child { border-bottom: 0; }
.pw-glyph { display: inline-flex; justify-content: center; align-self: center; }
.pw-glyph svg { width: 14px; height: 14px; }
.power-row.status-held .pw-glyph { color: var(--color-brand); }
.power-row.status-contested .pw-glyph { color: var(--color-caution); }
.power-row.status-absent .pw-glyph, .power-row.status-na .pw-glyph { color: var(--color-muted-foreground); }
.pw-label { color: var(--color-foreground); }
.pw-status { text-transform: uppercase; font-size: var(--fs-100); letter-spacing: var(--ls-wide); color: var(--color-muted-foreground); }
.pw-why { color: var(--color-muted-foreground); }
@media (max-width: 640px) {
  .power-row { grid-template-columns: 1.4rem 1fr; }
  .power-row .pw-status { display: none; }
  .pw-why { grid-column: 2; }
}

/* --- Edge list extras ----------------------------------------------------- */
.edge-stmt .subj { color: var(--color-foreground); }
.edge-stmt .pred { color: var(--color-brand); margin: 0 .35rem; }
.edge-sum { color: var(--color-muted-foreground); font-size: var(--fs-300); margin-top: var(--sp-1); font-family: var(--font-sans); }
.edge-id { color: var(--color-muted-foreground); }


/* --- Partner chips -------------------------------------------------------- */
.chip.partner .pc { color: var(--color-muted-foreground); font-size: var(--fs-100); }
.chip.partner.plain { opacity: .78; }
.chip.partner.plain:hover { border-color: var(--color-border); color: var(--color-foreground); }

/* --- Source cards --------------------------------------------------------- */

/* --- pull-stat baseline + callout + timeline ------------------------------ */
.pull-stat .pull-base { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); }
.callout { display: flex; gap: var(--sp-4); border: 1px solid var(--color-border); border-left: 2px solid var(--color-primary);
  background: var(--color-card); padding: var(--pad-panel); margin: var(--sp-5) 0; font-size: var(--fs-500); }
.callout .co-glyph { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary); }
.timeline { list-style: none; margin: 1.2rem 0 1.2rem .2rem; border-left: 1px solid var(--color-border); padding-left: 1rem; }
.timeline li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-4); padding: .4rem 0; }
.timeline .tl-date { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--color-brand); }

/* --- Rail additions ------------------------------------------------------- */
.rail-price { display: flex; align-items: baseline; gap: var(--sp-3); }
.rail-price .rp-last { font-family: var(--font-mono); font-size: var(--fs-700); font-weight: 700; color: var(--color-foreground); }
.rail-sub { margin-top: var(--sp-1); }
.rail-earn { font-family: var(--font-mono); font-size: var(--fs-600); color: var(--color-foreground); }
.rail-tiles { grid-template-columns: 1fr; }
.rail-tiles .tile { padding: var(--pad-row); }
.rail-tiles .stat-value { font-size: var(--fs-700); }
.share-block .share-chart { display: block; }
.share-block .share-chart:hover { text-decoration: none; }
.share-block .share-chart img { border: 1px solid var(--color-border); }
.share-block .share-chart .label { display: block; margin-top: var(--sp-2); color: var(--color-link); }

/* --- Feed — a listing, not a card grid (the corrected collection rule) ---- */
.feed-intro { margin-bottom: var(--sp-5); }
.feed { margin: var(--sp-5) 0; }
.frow {
  display: grid; align-items: baseline;
  grid-template-columns: 1.4rem 4.5rem minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--pad-row);
  border-bottom: var(--hairline);
  color: var(--color-foreground);
}
.frow:last-child { border-bottom: 0; }
.frow .fr-g { color: var(--color-brand); font-family: var(--font-mono); font-size: var(--fs-300); }
.frow .fr-kind {
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); white-space: nowrap;
}
.frow .fr-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0); }
.frow .fr-title { font-weight: 700; font-size: var(--fs-500); line-height: 1.35; }
.frow .fr-num { font-family: var(--font-mono); color: var(--color-brand); font-size: var(--fs-650); }
.frow .fr-line { color: var(--color-muted-foreground); font-size: var(--fs-400); line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.frow .fr-side { justify-self: end; align-self: center; }
.frow .fr-side img { border: var(--hairline); display: block; }
.frow .fr-more { font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-link); white-space: nowrap; }
.frow:hover { background: var(--color-sunken); text-decoration: none; }
.frow:hover .fr-title { color: var(--color-brand); }
.frow:hover .fr-more { color: var(--color-brand); }
.frow:focus-visible { outline: var(--ring); outline-offset: -2px; }
@media (max-width: 640px) {
  .frow { grid-template-columns: 1.2rem minmax(0, 1fr) auto; }
  .frow .fr-kind { display: none; }
}
.pager { display: flex; gap: var(--sp-5); align-items: center; justify-content: center; margin: var(--sp-6) 0; font-family: var(--font-mono); font-size: var(--fs-400); }
.pager a { color: var(--color-link); }
.pager .pager-off { opacity: .4; }

/* FINDING-006: link-dense prose readability — links read as text with a quiet
   underline, not default blue. Affordance returns on hover (brand). */
.prose a {
  color: var(--color-foreground);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-brand) 38%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--color-brand); text-decoration-color: var(--color-brand); }
.prose a[href^="/"] {  /* internal links: blue-tinted underline to distinguish */
  text-decoration-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
}
.prose a[href^="/"]:hover { color: var(--color-link); text-decoration-color: var(--color-link); }
/* $TICKER cashtags: read as a monospace symbol, not sentence prose. */
.prose a.cashtag { font-family: var(--font-mono); font-size: .92em; font-weight: 600;
  color: var(--color-link); text-decoration-color: color-mix(in oklab, var(--color-primary) 45%, transparent); }
.prose a.cashtag:hover { color: var(--color-brand); text-decoration-color: var(--color-brand); }

/* =============================================================================
   Mobile pass — phone-width touch refinements (verified at 390px).
   ============================================================================= */
@media (max-width: 768px) {
  /* BBS rows: comfortable tap targets (>=44px). */
  .bbs-row { padding-top: .8rem; padding-bottom: .8rem; min-height: 46px; align-items: center; }
  .bbs-group { padding-top: 1rem; padding-bottom: .5rem; }

  /* Tabs: horizontal scroll with a visible right-edge fade affordance. */
  .tabs { scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .tabs .tab { min-height: 44px; display: inline-flex; align-items: center; }

  /* Feed / source cards: single clean column, never wider than the viewport. */

  /* Footer nav taps. */
  .footer-links a { min-height: 40px; display: inline-flex; align-items: center; }

  /* Keep the marquee/tape from ever pushing page width. */
  .marquee-break, .tape-strip { max-width: 100vw; }
}

/* Very narrow phones (<=400px): tighten gutters, keep instruments legible. */
@media (max-width: 400px) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .trade { padding: var(--pad-panel); }
}

/* =============================================================================
   jack_in — command-line dropdown (instant local matches) + /search results.
   ============================================================================= */
.cmdline { position: relative; }
.cmd-results { position: absolute; top: calc(100% + 4px); left: -1px; right: -1px; z-index: 50;
  list-style: none; margin: 0; background: var(--color-chart-card);
  border: 1px solid var(--color-brand); max-height: 60vh; overflow-y: auto; display: none; }
.cmd-results.open { display: block; }
.cmd-results li { border-bottom: 1px solid var(--color-border); }
.cmd-results li:last-child { border-bottom: 0; }
.cmd-results a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--pad-row);
  font-family: var(--font-mono); font-size: var(--fs-400); color: var(--color-foreground); min-height: 40px; }
.cmd-results .cr-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-results .cr-k { margin-left: auto; font-size: var(--fs-100); text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--color-muted-foreground); }
.cmd-results .cr-all { color: var(--color-brand); }
.cmd-results li.sel a, .cmd-results a:hover {
  background: var(--color-brand); color: var(--color-background); text-decoration: none; }
.cmd-results li.sel a .cr-k, .cmd-results a:hover .cr-k,
.cmd-results li.sel a.cr-all, .cmd-results a.cr-all:hover { color: var(--color-background); }

/* Search results page (noindex) — BBS rows with source metadata. */
.search-results { border-top: 1px solid var(--color-border); }
.search-results .sr-row { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: var(--sp-4); padding: var(--pad-row-lg); border-bottom: 1px solid var(--color-border); }
.search-results .sr-row .g { color: var(--color-brand); }
.search-results .sr-row .g svg { width: .85rem; height: .85rem; }
.sr-head { color: var(--color-foreground); font-size: var(--fs-600); line-height: 1.35; }
.sr-head:hover { color: var(--color-brand); text-decoration: none; }
.sr-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); }
.sr-meta .sr-src { color: var(--color-foreground); }
.sr-meta .sr-rec { color: var(--color-link); }

/* search dropdown z-plane: hero context (z2) lost to sticky strips (z40) —
   elevate only while the command line is in use, so header stacking stays sane */
.hero .wrap:focus-within { z-index: 45; }

/* --- peer chips: the category layer on a dossier -------------------------
   A name's basket peers. Chips rather than a table because the point is the
   shape of the group at a glance, not a row-by-row comparison — the basket
   page does that. A peer with its own dossier gets the brand underline, so a
   reader can see which links lead somewhere deeper before clicking. */
.peer-group { margin: 0 0 var(--sp-5); }
.peer-group .label a { color: var(--color-foreground); }
.peer-group .label a:hover { color: var(--color-brand); }
.peer-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.peer-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--pad-pill-lg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-mono); font-size: var(--fs-300); letter-spacing: var(--ls-mono);
  color: var(--color-muted-foreground);
  text-decoration: none; white-space: nowrap;
}
.peer-chip:hover { border-color: var(--color-brand); color: var(--color-foreground); text-decoration: none; }
.peer-chip.has-dossier { color: var(--color-foreground); border-bottom-color: var(--color-brand); }
.peer-chip .delta { font-size: var(--fs-200); }

/* --- focus card: arrived here from a $TICKER link -------------------------
   Named at the top so the visitor lands on what they clicked, before the page
   hands them the category. Deliberately compact — the canonical points at the
   bare category URL, and that only stays honest while this is an emphasis
   rather than a second page hiding inside the first. */
.focus-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: 3px;
  padding: var(--pad-panel);
  margin: 0 0 var(--sp-5);
}
.focus-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.focus-ticker {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: var(--ls-wide);
  color: var(--color-brand);
}
.focus-name { color: var(--color-foreground); }
.focus-link { font-size: var(--fs-400); }
.focus-stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-300);
  color: var(--color-muted-foreground);
}
.focus-stats b { color: var(--color-foreground); }
.focus-why {
  margin: .6rem 0 0; font-size: var(--fs-400); color: var(--color-muted-foreground);
}

/* Data tables ride .dr-table (the shared component). .table-scroll wraps any
   wide one so the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-6) 0; }

/* Capital-flow ledger specifics. */
.deals-table td:first-child { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--color-muted-foreground); }
.deal-kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: var(--pad-pill);
  margin-right: .4rem;
}
.deal-gets { color: var(--color-foreground); }
.deal-flag {
  display: inline-block;
  margin-left: .45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-down);
  border: 1px solid color-mix(in srgb, var(--color-down) 45%, transparent);
  border-radius: 3px;
  padding: var(--pad-pill);
}
.deal-guided {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--color-muted-foreground);
}
.deal-guided.sig { color: var(--color-brand); }
.deal-src {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--color-muted-foreground);
}
.deal-src.src-SEC-filing { color: var(--color-up); }
.deal-link { text-decoration: none; font-family: var(--font-mono); }

@media (max-width: 640px) {
  .data-table { font-size: var(--fs-300); }
  .data-table thead th, .data-table tbody td { padding: var(--pad-row); }
}

/* Coverage-intelligence table. */
.coverage-table .reads { color: var(--color-muted-foreground); font-size: var(--fs-400); }
.coverage-table tr.partial td { opacity: .72; }
.coverage-table .delta.up { color: var(--color-up); }
.coverage-table .delta.down { color: var(--color-down); }

/* Basket (category) rows on /stocks — a category is not a company, so it gets
   its name and what-it-stands-for stacked on the left and two labelled figures
   on the right, instead of the registry's ticker/price/tier columns. */
.basket-row { grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-0) var(--sp-5); }
.basket-row .g { align-self: start; padding-top: var(--sp-1); }
.basket-row .br-main { display: flex; flex-direction: column; min-width: 0; gap: var(--sp-0); }
.basket-row .br-name { font-weight: 700; }
.basket-row .br-note { color: var(--color-muted-foreground); font-size: var(--fs-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.basket-row .br-stats { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-0); white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); }
.basket-row .br-stat b { color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.basket-row:hover .br-name, .basket-row:hover .br-note, .basket-row:hover .br-stats, .basket-row:hover .br-stat b { color: var(--color-background); }
@media (max-width: 640px) { .basket-row .br-stats { font-size: var(--fs-100); } }

/* /stocks reads calmer: each group gets one quiet divider, not the ASCII rule
   and a shouted heading both saying the same thing. */
.stocks-index .sechead .rule { display: none; }
.stocks-index .sechead { margin: 1.6rem 0 .5rem; }
.stocks-index .sechead h2 { font-size: var(--fs-400); letter-spacing: var(--ls-wide); color: var(--color-muted-foreground); }


/* =============================================================================
   PHASE 2 · FOUNDATION COMPONENTS — type roles, layout primitives, frames,
   controls, tables, embeds, empty states. (DESIGN-SYSTEM.md §5, §7)
   ============================================================================= */

/* --- Type roles: the bundle, not the size. Compose; don't respell. --------- */
.dr-label {
  font-family: var(--font-mono); font-size: var(--fs-200); line-height: var(--lh-data);
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground);
}
.dr-label--brand { color: var(--color-brand); }
.dr-label--sm    { font-size: var(--fs-100); }
.dr-meta {
  font-family: var(--font-mono); font-size: var(--fs-200); line-height: var(--lh-data);
  letter-spacing: var(--ls-mono); color: var(--color-muted-foreground);
}
.dr-data {
  font-family: var(--font-mono); font-size: var(--fs-400); line-height: var(--lh-data);
  letter-spacing: var(--ls-mono); color: var(--color-foreground);
}
.dr-tag {
  font-family: var(--font-mono); font-size: var(--fs-100); line-height: var(--lh-flat);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.dr-modhead {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-700);
  line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-foreground);
}
.dr-display {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-900);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase;
}
.dr-display--hero { font-size: var(--fs-display); line-height: 1.02; }
.dr-dek {
  font-size: var(--fs-650); line-height: var(--lh-snug);
  color: var(--color-muted-foreground); max-width: var(--measure-tight);
}
.dr-figure {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-800);
  line-height: var(--lh-flat); color: var(--color-foreground);
}
.dr-figure--lg { font-size: var(--fs-850); }
.dr-figure--xl { font-size: var(--fs-display); }

/* --- Layout primitives ----------------------------------------------------- */
.dr-stack > * + * { margin-top: var(--flow); }
.dr-stack--tight  { --flow: var(--sp-4); }
.dr-stack--loose  { --flow: var(--sp-7); }
.dr-cluster       { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.dr-cluster--tight{ gap: var(--sp-2); }
.dr-cluster--base { align-items: baseline; }
.dr-split {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; max-width: var(--split-max, var(--measure-mono));
}
.dr-split--full { --split-max: none; }
.dr-tiles {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.dr-tiles--rail { grid-template-columns: 1fr; gap: var(--sp-3); }
.dr-grid   { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 18rem), 1fr)); }
.dr-grid--sm { --grid-min: 15rem; }
.dr-grid--lg { --grid-min: 22rem; }
.dr-listing        { border-top: var(--hairline); }
.dr-listing--framed{ border: var(--hairline); }
.dr-listing > * + *{ margin-top: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.skip {
  position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-top);
  transform: translateY(-200%);
  background: var(--color-brand); color: var(--color-background);
  font-family: var(--font-mono); font-size: var(--fs-300);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  padding: var(--pad-row); text-decoration: none;
  transition: transform var(--t-beat) var(--e-hw);
}
.skip:focus { transform: none; }

/* --- The frame family: one box, modifiers pick the accent ------------------ */
.dr-panel {
  --panel-bg:   var(--color-card);
  --panel-pad:  var(--pad-panel);
  --panel-mark: var(--color-brand);
  position: relative;
  background: var(--panel-bg);
  border: var(--hairline);
  padding: var(--panel-pad);
}
.dr-panel--blade  { --panel-bg: var(--color-chart-card); }
.dr-panel--bare   { --panel-bg: transparent; }
.dr-panel--lg     { --panel-pad: var(--pad-panel-lg); }
.dr-panel--flush  { --panel-pad: 0; }
/* Corner tick: four arms from one pseudo-element. One per capture block. */
.dr-panel--tick::after {
  content: ""; position: absolute; inset: calc(var(--bd) * -1);
  pointer-events: none;
  --g: linear-gradient(var(--panel-mark) 0 0);
  background:
    var(--g)   0%   0%  / var(--tick) var(--bd-accent) no-repeat,
    var(--g)   0%   0%  / var(--bd-accent) var(--tick) no-repeat,
    var(--g) 100%   0%  / var(--tick) var(--bd-accent) no-repeat,
    var(--g) 100%   0%  / var(--bd-accent) var(--tick) no-repeat,
    var(--g)   0% 100%  / var(--tick) var(--bd-accent) no-repeat,
    var(--g)   0% 100%  / var(--bd-accent) var(--tick) no-repeat,
    var(--g) 100% 100%  / var(--tick) var(--bd-accent) no-repeat,
    var(--g) 100% 100%  / var(--bd-accent) var(--tick) no-repeat;
}
/* The magenta rail rule. ONE per column, on the block carrying the number. */
.dr-panel--rule { border-left: var(--bd-accent) solid var(--panel-mark); }
.dr-panel--held      { --panel-mark: var(--ev-held); }
.dr-panel--contested { --panel-mark: var(--ev-contested); }
.dr-panel--quiet     { --panel-mark: var(--color-border-strong); }
/* The CRT frame: ONE per page, on the page's hero signal. */
.dr-crt {
  position: relative;
  background: var(--color-card);
  border: var(--bd) solid var(--brand-55);
  padding: var(--pad-panel-lg);
}
.dr-crt::before {
  content: ""; position: absolute; inset: var(--frame-inset);
  border: var(--hairline); pointer-events: none;
}
.dr-crt--blade { background: var(--color-chart-card); }

/* --- The pill: one tag primitive, tones from one list ---------------------- */
.dr-pill {
  --pill-ink:  var(--color-muted-foreground);
  --pill-edge: var(--color-border);
  display: inline-flex; align-items: baseline; gap: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--fs-300); line-height: var(--lh-flat);
  letter-spacing: var(--ls-wide);
  padding: var(--pad-pill);
  border: var(--bd) solid var(--pill-edge);
  border-radius: var(--radius-chip);
  color: var(--pill-ink);
  white-space: nowrap;
}
.dr-pill--caps  { text-transform: uppercase; font-size: var(--fs-100); }
.dr-pill--solid { background: var(--color-chart-card); }
.dr-pill--lg    { padding: var(--pad-pill-lg); font-size: var(--fs-400); }
.dr-pill--brand  { --pill-ink: var(--color-brand);  --pill-edge: var(--brand-55); }
.dr-pill--blue   { --pill-ink: var(--color-link);   --pill-edge: var(--blue-40); }
.dr-pill--strong { --pill-ink: var(--color-foreground); }
.dr-pill--held      { --pill-ink: var(--ev-held); }
.dr-pill--contested { --pill-ink: var(--ev-contested); }
.dr-pill--void      { --pill-ink: var(--ev-void); }
a.dr-pill:hover  { --pill-ink: var(--color-brand); --pill-edge: var(--color-brand); text-decoration: none; }
.dr-pill[aria-disabled="true"] { --pill-ink: var(--ev-void); cursor: not-allowed; }

/* --- The row: one listing grammar, presets pick the columns ---------------- */
.dr-row {
  display: grid; align-items: baseline;
  grid-template-columns: var(--row-cols, 1.2rem minmax(5rem, 14rem) minmax(0, 1fr) auto);
  gap: var(--sp-4);
  padding: var(--pad-row);
  border-bottom: var(--hairline);
  font-family: var(--font-mono); font-size: var(--fs-400); line-height: var(--lh-data);
  color: var(--color-foreground);
}
.dr-row:last-child { border-bottom: 0; }
.dr-row--reg    { --row-cols: 1.2rem 5.2rem minmax(6rem, 11rem) minmax(0, 1fr) auto minmax(4.6rem, auto); }
.dr-row--basket { --row-cols: 1.2rem minmax(9rem, 16rem) minmax(0, 1fr) auto; }
.dr-row--result { --row-cols: 1.2rem minmax(0, 1fr); }
.dr-row--status { --row-cols: 1.6rem minmax(8rem, 1fr) 5rem minmax(0, 2fr); }
.dr-row--lens   { --row-cols: minmax(8rem, 12rem) 5.5rem minmax(0, 1fr); }
.dr-row--edge   { --row-cols: minmax(0, 1fr) auto; }
.dr-row:hover, .dr-row:active {
  background: var(--color-brand); color: var(--color-background);
  text-decoration: none;
}
.dr-row:hover *, .dr-row:active * { color: inherit; }
.dr-row:focus-visible {
  background: var(--color-brand); color: var(--color-background);
  outline: var(--bd-accent) solid var(--color-foreground); outline-offset: -3px;
}
.dr-row:focus-visible * { color: inherit; }
.dr-row[aria-current] { box-shadow: inset var(--bd-accent) 0 0 0 var(--color-brand); }
.dr-row--quiet:hover, .dr-row--quiet:active { background: var(--color-sunken); color: inherit; }
@media (max-width: 768px) {
  .dr-row { min-height: 46px; align-items: center; padding-block: var(--sp-4); }
}

/* --- Buttons --------------------------------------------------------------- */
.btn {
  --btn-ink:  var(--color-foreground);
  --btn-edge: var(--color-border);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--pad-row-lg);
  background: transparent; border: var(--bd) solid var(--btn-edge);
  color: var(--btn-ink); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-300);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.btn:hover           { --btn-ink: var(--color-brand); --btn-edge: var(--color-brand); }
.btn:active          { background: var(--brand-15); }
.btn[disabled]       { --btn-ink: var(--ev-void); --btn-edge: var(--color-border); cursor: not-allowed; }
.btn--primary        { --btn-ink: var(--color-background); background: var(--color-brand); --btn-edge: var(--color-brand); }
.btn--primary:hover  { --btn-ink: var(--color-background); background: var(--brand-85); }

/* --- kbd: the key has a face and a side ------------------------------------ */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 1.5em; padding: .05rem var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-200);
  font-weight: 700; line-height: 1.5;
  color: var(--color-foreground);
  background: var(--color-chart-card);
  border: var(--hairline);
  border-block-end-width: var(--bd-accent);
  border-radius: var(--radius-chip);
}
.kbd--brand { color: var(--color-brand); border-color: var(--brand-55); }
.kbd + .kbd { margin-inline-start: var(--sp-0); }
.kbd-sep { color: var(--color-muted-foreground); margin: 0 var(--sp-1); font-family: var(--font-mono); }

/* --- Tables: one look for every table on the site -------------------------- */
.dr-table {
  inline-size: 100%;
  border-collapse: collapse;
  border: var(--hairline);
  font-size: var(--fs-400);
  line-height: var(--lh-data);
  background: var(--color-background);
}
.dr-table > caption {
  caption-side: top; text-align: start;
  padding: 0 0 var(--sp-3);
  font-size: var(--fs-500); line-height: 1.4; font-weight: 700;
  color: var(--color-foreground);
}
.dr-table thead th {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground);
  text-align: start; vertical-align: bottom;
  padding: var(--pad-cell);
  background: var(--color-chart-card);
  border-block-end: var(--bd) solid var(--color-muted);
  white-space: nowrap;
}
.dr-table tbody td {
  padding: var(--pad-cell);
  border-block-end: var(--hairline);
  vertical-align: baseline;
  color: var(--color-foreground);
}
.dr-table tbody tr:last-child td { border-block-end: 0; }
.dr-table tbody tr:hover td { background: var(--color-chart-card); }
.dr-table :is(th, td).num {
  font-family: var(--font-mono);
  text-align: end; white-space: nowrap;
}
.dr-table td:empty::after { content: "\2014"; color: var(--color-muted-foreground); }
.dr-table a { color: var(--color-link); }
.dr-table a:hover { color: var(--color-brand); }
.dr-table--dense { font-size: var(--fs-300); }
.dr-table--dense :is(thead th, tbody td) { padding: var(--sp-2) var(--sp-3); }
/* Financial shape: every column after the label is a numeral. */
.dr-table--num :is(td, th):not(:first-child) {
  font-family: var(--font-mono); text-align: end; white-space: nowrap;
}

/* --- THE EMBED FAMILY — captured evidence. Blade rules in full. ------------ */
.dr-embed {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: var(--hairline);
  background: var(--color-chart-card);
  transition: border-color var(--t-beat) var(--e-hw);
}
.dr-embed:hover { border-color: color-mix(in oklab, var(--color-brand) 35%, var(--color-border)); }
/* The family mark. ONE per capture block — never per row. */
.dr-embed::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: var(--tick); height: var(--tick);
  border-top: var(--bd-accent) solid var(--color-brand);
  border-left: var(--bd-accent) solid var(--color-brand);
}
.dr-head {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  min-width: 0;
}
.dr-chan {
  flex: none;
  border: var(--hairline);
  padding: 0 var(--sp-1);
  letter-spacing: var(--ls-wider);
  color: var(--color-foreground);
}
.dr-who {
  min-width: 0; text-transform: none; letter-spacing: var(--ls-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-who b { font-weight: 700; color: var(--color-foreground); }
/* The hairline that always lands — a flex rule, never a character run. */
.dr-rule { flex: 1 1 1.5rem; min-width: var(--sp-4); height: 0; border-top: var(--hairline); }
.dr-when { flex: none; }
.dr-body {
  font-size: var(--fs-500); line-height: 1.55;
  color: var(--color-foreground);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dr-rec {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: var(--hairline);
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.dr-rec a { color: var(--color-link); }
.dr-rec a:hover { color: var(--color-brand); }
.dr-rec .dr-on { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-rec .dr-origin { margin-left: auto; }
.dr-led { flex: none; width: 6px; height: 6px; align-self: center;
  background: var(--color-muted-foreground); }
.dr-led--archived { background: var(--ev-archived); }
.dr-led--dead { background: none; box-shadow: inset 0 0 0 1px var(--color-muted-foreground); }

/* --- .dr-wire — the article/source ledger ---------------------------------- */
.dr-wire-list { list-style: none; margin: 0; padding: 0; }
.dr-wire {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-5);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-top: var(--hairline);
}
.dr-wire-list > .dr-wire:first-child { border-top: 0; padding-top: 0; }
.dr-wire-org {
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-foreground);
  display: flex; flex-direction: column; gap: .1rem;
  overflow: hidden;
}
.dr-wire-org time { color: var(--color-muted-foreground); }
.dr-wire-head {
  grid-column: 2; grid-row: 1;
  color: var(--color-foreground); font-size: var(--fs-500); line-height: 1.4;
}
.dr-wire-head:hover { color: var(--color-brand); text-decoration: none; }
.dr-wire-note {
  grid-column: 2; grid-row: 2;
  color: var(--color-muted-foreground); font-size: var(--fs-400); line-height: var(--lh-data);
}
.dr-wire-meta {
  grid-column: 3; grid-row: 1 / span 2;
  justify-self: end; text-align: right;
  display: flex; flex-direction: column; gap: .15rem;
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground);
}
.dr-wire-meta a { color: var(--color-link); }
.dr-wire-meta a:hover { color: var(--color-brand); }
.dr-wire-meta .dr-outlets b { color: var(--color-foreground); font-weight: 400; }
.dr-cite {
  font-family: var(--font-mono); font-size: .8em;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-foreground); white-space: nowrap;
  text-decoration: none;
  border-bottom: var(--bd) solid var(--brand-35);
}
.dr-cite::before { content: "["; color: var(--color-muted-foreground); }
.dr-cite::after  { content: "]"; color: var(--color-muted-foreground); }
.dr-cite:hover { color: var(--color-brand); border-bottom-color: var(--color-brand); text-decoration: none; }
@media (max-width: 640px) {
  .dr-wire { grid-template-columns: minmax(0, 1fr) auto; }
  .dr-wire-org { grid-column: 1; grid-row: 1; flex-direction: row; gap: var(--sp-3); }
  .dr-wire-head { grid-column: 1 / -1; grid-row: 2; }
  .dr-wire-note { grid-column: 1 / -1; grid-row: 3; }
  .dr-wire-meta { grid-column: 2; grid-row: 1; flex-direction: row; gap: var(--sp-3); align-items: baseline; }
  .dr-embed { padding: var(--sp-3) var(--sp-4); }
  .dr-head { flex-wrap: wrap; }
  .dr-head .dr-rule { display: none; }
  .dr-head .dr-when { margin-left: auto; }
  .dr-rec .dr-origin { margin-left: 0; }
}

/* --- .dr-voices — the commentariat transcript (replaces the card grid) ----- */
.dr-voices { gap: var(--sp-4); }
.dr-voices .dr-synth {
  font-size: var(--fs-500); line-height: 1.55;
  color: var(--color-foreground);
  max-width: var(--measure);
  margin: 0;
}
.dr-voices .dr-synth b { color: var(--color-brand); font-weight: 700; }
.dr-voices-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
.dr-voices-list > li {
  border-top: var(--hairline);
  padding: var(--sp-4) 0;
}
.dr-voices-list > li:first-child { padding-top: var(--sp-3); }
.dr-voices-list > li:last-child { padding-bottom: 0; }
.dr-voices .vc-meta { margin-top: var(--sp-2); }
.dr-empty {
  font-family: var(--font-mono); font-size: var(--fs-400);
  color: var(--color-muted-foreground); padding: var(--sp-4) 0;
}

/* --- .nosignal — the designed empty state. We looked; here is why not. ----- */
.nosignal {
  position: relative;
  display: grid; justify-items: start; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border: var(--bd) dashed var(--color-border);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23ff2ab9' fill-opacity='0.05'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ff2ab9' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}
.nosignal .ns-mark { inline-size: 26px; block-size: 26px; color: var(--color-brand); opacity: .55; }
.nosignal .ns-h {
  font-family: var(--font-mono); font-size: var(--fs-300); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-foreground);
}
.nosignal .ns-h::before { content: "\2500\2500\00A0"; color: var(--color-brand); }
.nosignal .ns-why {
  font-size: var(--fs-500); line-height: 1.5; color: var(--color-muted-foreground);
  max-inline-size: 46ch;
}
.nosignal .ns-do { font-family: var(--font-mono); font-size: var(--fs-300); }
.nosignal .ns-do::before { content: "$\00A0"; color: var(--color-brand); }
.nosignal--inline {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background-image: none;
  font-family: var(--font-mono); font-size: var(--fs-300);
  color: var(--color-muted-foreground);
}
.nosignal--inline .ns-h::before { content: "\25A1\00A0"; }   /* □ */
.nosignal--inline .ns-why { font-size: inherit; }
.nosignal--page { justify-items: center; text-align: center; padding: var(--sp-9) var(--sp-5); }
.nosignal--page .ns-mark { inline-size: 64px; block-size: 64px; opacity: .8; }

/* --- The rail rule, enforced: one magenta edge per column ------------------ */
.rail .rail-block { border-left: none; }
.rail .rail-block:first-child { border-left: var(--bd-accent) solid var(--color-brand); }
/* the broken ‹-with-collapsed-space prefix dies with the old label */
.rail .rail-label::before { content: none; }


/* --- The Brains: takes ladder, stance-as-position, the one-link gauge ------ */
.dr-takes { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-5) 0; }
.dr-takes-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground);
  padding-bottom: var(--sp-2); border-bottom: var(--hairline);
}
.dr-take {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--pad-panel);
  border: var(--hairline); background: var(--color-card);
  color: var(--color-foreground);
  transition: border-color var(--t-beat) var(--e-hw);
}
.dr-take:hover { border-color: var(--color-brand); text-decoration: none; }
.dr-take-head { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3); }
/* Mono uppercase — not a plain sans h3 (DESIGN.md bans the latter). */
.dr-take-name { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-500);
  text-transform: uppercase; letter-spacing: var(--ls-wide); line-height: 1.2; }
.dr-take:hover .dr-take-name { color: var(--color-brand); }
.dr-take-canon { color: var(--color-muted-foreground); border: var(--hairline);
  padding: 0 var(--sp-1); }
.dr-take-read { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-link); }
.dr-take:hover .dr-take-read { color: var(--color-brand); }
.dr-take-dek { font-size: var(--fs-500); line-height: 1.5;
  color: var(--color-muted-foreground); max-width: 60ch; margin: 0; }

/* Stance: one filled cell on a three-cell track. No hue — direction colors
   are for signed price change only. */
.dr-stance { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); }
.dr-stance-track { display: inline-grid; grid-template-columns: repeat(3, 6px); gap: 2px; }
.dr-stance-track i { height: 6px; border: var(--bd) solid var(--color-border); }
.dr-stance--long  .dr-stance-track i:nth-child(1),
.dr-stance--split .dr-stance-track i:nth-child(2),
.dr-stance--short .dr-stance-track i:nth-child(3) {
  background: var(--color-foreground); border-color: var(--color-foreground);
}
.dr-stance-label { color: var(--color-foreground); }
.dr-take:hover .dr-stance-track i { border-color: var(--color-muted-foreground); }

/* The gauge: one link, one accessible value, zero glow. */
.dr-gauge {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-0) var(--sp-3); min-height: 24px; padding: var(--sp-0) 0;
  color: var(--color-muted-foreground); text-decoration: none;
}
.dr-gauge-marks { display: inline-flex; gap: 3px; }
.dr-gauge .sk { display: inline-flex; width: 16px; height: 16px; }
.dr-gauge .sk svg { width: 16px; height: 16px; }
.dr-gauge .sk.on  { color: var(--color-brand); }
.dr-gauge .sk.off { color: var(--color-border); }
.dr-gauge-count { font-family: var(--font-mono); font-size: var(--fs-400); }
.dr-gauge-count b { color: var(--color-foreground); font-size: var(--fs-500); }
.dr-gauge-word { font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide); }
.dr-gauge:hover { text-decoration: none; }
.dr-gauge:hover .dr-gauge-count b, .dr-gauge:hover .dr-gauge-word { color: var(--color-brand); }
.dr-gauge:focus-visible { outline: var(--ring); outline-offset: 3px; }

/* The attribution bar — the legal line as a designed component, not an
   afterthought paragraph. */
.dr-attrib {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: var(--hairline); border-left: var(--bd-accent) solid var(--color-border-strong);
  font-family: var(--font-mono); font-size: var(--fs-200);
  color: var(--color-muted-foreground); letter-spacing: var(--ls-mono);
}
.dr-attrib-glyph { color: var(--color-brand); flex: none; }
.dr-attrib a { color: var(--color-link); margin-left: auto; white-space: nowrap; }
.dr-attrib a:hover { color: var(--color-brand); }

/* Powers legend glyph tones */
.dr-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); align-items: center;
  margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); }
.dr-legend .pw-glyph { margin-right: calc(var(--sp-2) * -1); }
.dr-legend .pw-glyph svg { width: 12px; height: 12px; }
.status-held-g { color: var(--ev-held); }
.status-contested-g { color: var(--ev-contested); }
.status-absent-g { color: var(--ev-absent); }

@media (max-width: 640px) {
  .dr-take-read { margin-left: 0; flex-basis: 100%; }
  .dr-gauge-word { flex-basis: 100%; }
}


/* --- Browser chrome: the machine is ours down to the furniture ------------- */
::selection {
  background: var(--color-brand);
  color: var(--color-background);
  text-shadow: none;              /* kills the glow under selected display type */
}
/* Inside a magenta-filled row, magenta-on-magenta erases the text. Invert. */
.bbs-row:hover ::selection, .dr-row:hover ::selection,
.cmd-results a:hover ::selection, .cmd-results li.sel ::selection {
  background: var(--color-background);
  color: var(--color-brand);
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-muted) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-chart-card); border-left: var(--hairline); }
::-webkit-scrollbar-thumb {
  background: var(--color-muted);
  border: 2px solid var(--color-chart-card);   /* inset, so the bar reads thin */
}
/* Magenta arrives on hover — when the bar is a control, not chrome. */
::-webkit-scrollbar-thumb:hover  { background: var(--color-brand); }
::-webkit-scrollbar-thumb:active { background: var(--color-brand); border-width: 1px; }
::-webkit-scrollbar-corner { background: var(--color-chart-card); }
.scroll-x, .cmd-results { scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar, .cmd-results::-webkit-scrollbar { width: 8px; height: 8px; }
input, textarea { caret-color: var(--color-brand); }
.prose ::marker { color: var(--color-brand); }

/* hr as box-drawing rule; the sign-off variant carries the mark */
.prose hr, hr {
  border: 0; block-size: 1px; margin: var(--sp-7) 0;
  background-image: repeating-linear-gradient(90deg,
    var(--color-border) 0 6px, transparent 6px 10px);
}
hr.hr--skull { background: none; block-size: auto; text-align: center; }
hr.hr--skull::before {
  content: "\2500\2500\2500\00A0\2620\00A0\2500\2500\2500";
  font-family: var(--font-mono); color: var(--brand-55); font-size: var(--fs-300);
}

/* cmdline command rows */
.cmd-results .cr-cmd .cr-n { color: var(--color-brand); }

/* CRT mode — a SETTING, not an animation: triple-click the header skull.
   Survives reduced motion intact, which is what makes it feel like hardware. */
body[data-crt="on"]::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-crt); pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px),
    radial-gradient(120% 120% at 50% 40%, transparent 58%, rgba(0,0,0,.42) 100%);
  mix-blend-mode: multiply;
}

/* Keyboard hints as key chips — visible, and NOT hidden on touch: the hint
   strip swaps its payload instead of vanishing. */
.cmdline .hint { display: inline-flex; align-items: center; gap: var(--sp-1);
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.cmdline .keys-touch { overflow: hidden; text-overflow: ellipsis; }
.cmdline .kbd { font-size: var(--fs-100); min-inline-size: 1.2em; padding: 0 var(--sp-1); }
@media (hover: none) and (pointer: coarse) {
  .cmdline .hint .keys-kb { display: none; }
}
.cmdline .keys-touch { display: none; color: var(--color-muted-foreground); }
@media (hover: none) and (pointer: coarse) {
  .cmdline .keys-touch { display: inline; }
}


/* --- The library: card catalog, passages ----------------------------------- */
:root { --cover-sm: 52px; --cover-xs: 28px; }

/* The catalog under the shelf: dense rows, call numbers where slugs were. */
.dr-catalog { border: var(--hairline); border-top: 0; }
.dr-catalog--solo { border-top: var(--hairline); margin-top: var(--sp-5); }
.dr-cat-group {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  border-bottom: var(--hairline);
  background: var(--color-chart-card);
}
.dr-cat-group .dr-cat-code { color: var(--color-brand); font-weight: 700; }
.dr-cat-group .dr-cat-rule { flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--color-border) 0 4px, transparent 4px 7px); }
.dr-crow {
  display: grid; align-items: center;
  grid-template-columns: 2.5rem 6.5rem minmax(0, 1fr) 3.2rem auto;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline);
  font-family: var(--font-mono); font-size: var(--fs-400); line-height: var(--lh-data);
  color: var(--color-foreground);
}
.dr-crow:last-child { border-bottom: 0; }
.dr-crow-thumb { width: 100%; height: auto; border: var(--hairline); }
.dr-crow-call { font-size: var(--fs-200); letter-spacing: var(--ls-wide); color: var(--color-muted-foreground); white-space: nowrap; }
.dr-crow-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-crow-by { color: var(--color-muted-foreground); font-weight: 400; }
.dr-crow-year { color: var(--color-muted-foreground); }
.dr-crow-n { font-size: var(--fs-200); color: var(--color-muted-foreground); white-space: nowrap; justify-self: end; }
.dr-crow:hover { background: var(--color-brand); color: var(--color-background); text-decoration: none; }
.dr-crow:hover * { color: inherit; }
.dr-crow:focus-visible { background: var(--color-brand); color: var(--color-background);
  outline: var(--bd-accent) solid var(--color-foreground); outline-offset: -3px; }
@media (max-width: 680px) {
  .dr-crow { grid-template-columns: var(--cover-xs) minmax(0, 1fr); align-items: start; }
  .dr-crow-call, .dr-crow-year { display: none; }
  .dr-crow-t { white-space: normal; }
  .dr-crow-by { display: block; }
  .dr-crow-n { grid-column: 2; justify-self: start; }
}

/* The tome card + rail mini */
.dr-tome { display: grid; grid-template-columns: var(--cover-sm) minmax(0, 1fr);
  gap: var(--sp-4); align-items: start;
  border: var(--hairline); background: var(--color-card); padding: var(--pad-panel); }
.dr-tome-cover img { width: 100%; height: auto; border: var(--hairline); }
.dr-tome-body > * + * { margin-top: var(--sp-1); }
.dr-tome-call { font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-wide); color: var(--color-muted-foreground); }
.dr-tome-title { font-family: var(--font-mono); font-size: var(--fs-500);
  text-transform: uppercase; letter-spacing: var(--ls-mono); line-height: 1.2; }
.dr-tome-title a { color: var(--color-foreground); }
.dr-tome-title a:hover { color: var(--color-brand); text-decoration: none; }
.dr-tome-by { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); }
.dr-tome-why { font-size: var(--fs-500); line-height: 1.5; color: var(--color-muted-foreground); max-width: 46ch; }
.dr-tome-mini {
  display: grid; grid-template-columns: var(--cover-xs) minmax(0, 1fr);
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) 0; border-bottom: var(--hairline);
  color: var(--color-foreground); text-decoration: none;
}
.dr-tome-mini:last-child { border-bottom: 0; }
.dr-tome-mini img { width: 100%; height: auto; border: var(--hairline); }
.dr-tome-mini-t { font-family: var(--font-mono); font-size: var(--fs-300); font-weight: 700; line-height: 1.25; }
.dr-tome-mini-m { grid-column: 2; font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-muted-foreground); }
.dr-tome-mini:hover .dr-tome-mini-t { color: var(--color-brand); }

/* The passage: the words are prose; everything around them is the exhibit tag. */
.dr-passage { margin: var(--sp-6) 0; border: var(--hairline); background: var(--color-card);
  display: flex; gap: var(--sp-4); padding: var(--pad-panel); }
.dr-passage--key { border-left: var(--bd-accent) solid var(--color-brand); }
.dr-passage-plate { flex: none; width: var(--cover-sm); align-self: start; }
.dr-passage-plate img { width: 100%; height: auto; border: var(--hairline); }
.dr-passage-body { min-width: 0; flex: 1; }
.dr-passage-label {
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground); margin-bottom: var(--sp-2);
}
.dr-passage-label span[aria-hidden] { color: var(--color-brand); }
.dr-passage-quote { margin: 0; font-size: var(--fs-600); line-height: 1.62;
  color: var(--color-foreground); max-width: var(--measure); }
.dr-passage-quote p + p { margin-top: var(--sp-3); }
.dr-passage-cite {
  margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: var(--hairline);
  font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground);
}
.dr-passage-cite a { color: var(--color-link); }
.dr-passage-cite a:hover { color: var(--color-brand); }
.dr-passage-sep { margin: 0 var(--sp-1); }
.dr-passage-note { margin-top: var(--sp-2); font-size: var(--fs-400);
  color: var(--color-muted-foreground); }
.dr-passage-stack { margin: var(--sp-6) 0; border: var(--hairline); background: var(--color-card); padding: var(--pad-panel); }
.dr-stack-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--color-muted-foreground);
  padding-bottom: var(--sp-3); border-bottom: var(--hairline); }
.dr-stack-call { color: var(--color-brand); }
.dr-stack-title { color: var(--color-foreground); font-weight: 700; }
.dr-stack-n { margin-left: auto; }
.dr-stack-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: var(--hairline); }
.dr-stack-item:last-child { border-bottom: 0; }
.dr-stack-loc { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-muted-foreground); }
.book-head .dr-call { color: var(--color-muted-foreground); letter-spacing: var(--ls-wide); }

@media (max-width: 640px) {
  .dr-passage { flex-direction: column; }
  .dr-stack-item { grid-template-columns: minmax(0, 1fr); }
}

.lens-card--rail { display: block; margin-bottom: var(--sp-3); }


/* --- Applied rows: where an idea is argued on a name ----------------------- */
.applied-h {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
}
.applied-h .applied-g { color: var(--color-brand); }
.applied-h .applied-t { min-width: 0; }
.applied-h .applied-rule { flex: 1; height: 1px; min-width: var(--sp-4);
  background: repeating-linear-gradient(90deg, var(--color-border) 0 4px, transparent 4px 7px); }
.applied-h .applied-n { flex: none; }
.applied-row .ap-label { font-weight: 700; color: var(--color-foreground); }
.applied-row .ap-tk {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-200);
  letter-spacing: var(--ls-mono); color: var(--color-muted-foreground);
}
.applied-row .ap-lens {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground);
  border: var(--hairline); border-radius: var(--radius-chip);
  padding: 0 var(--sp-1); margin-left: var(--sp-1); white-space: nowrap;
}
.applied-row .ap-glyph--q { color: var(--color-muted-foreground); }
.applied-row .ap-status--n { color: var(--color-muted-foreground); }
/* The note reads as a sentence, not as data: sans, softly muted. */
.applied-row .ap-note {
  font-family: var(--font-sans); font-size: var(--fs-400); line-height: 1.5;
  color: var(--color-muted-foreground);
}
.applied-row:hover .ap-label, .applied-row:hover .ap-note { color: var(--color-brand); }

/* --- The divergence board: coverage heat vs the 30-day tape ---------------- */
/* The map. Positions are data (server-computed %), so this scales to any
   width; the faint plot grid is paint, not elements. */
.div-map { position: relative; margin: 0 0 var(--sp-3); border: var(--hairline);
  background: var(--color-card); aspect-ratio: 16 / 9; overflow: hidden; }
.div-map::before { content: ""; position: absolute; inset: 0; opacity: .35;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(0deg, var(--color-border) 0 1px, transparent 1px 12.5%); }
.div-ax { position: absolute; pointer-events: none; opacity: .55; }
.div-ax--v { left: 50%; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--color-muted-foreground); }
.div-ax--h { top: calc(7% + var(--by, 70%) * 0.86); left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--color-muted-foreground); }
.div-ax-cap { position: absolute; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); }
.div-ax-cap--x { bottom: var(--sp-2); left: 50%; transform: translateX(-50%);
  white-space: nowrap; }
.div-ax-cap--y { top: calc(7% + var(--by, 70%) * 0.86 + 4px); right: var(--sp-2); }
.div-quad { position: absolute; pointer-events: none; display: grid; gap: 2px;
  font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground); }
.div-quad i { font-style: normal; font-weight: 400; font-size: var(--fs-100);
  letter-spacing: var(--ls-wide); opacity: .7; }
.div-quad--tl { top: var(--sp-3); left: var(--sp-4); }
.div-quad--tr { top: var(--sp-3); right: var(--sp-4); text-align: right; }
.div-quad--bl { bottom: calc(var(--sp-3) + 1.3rem); left: var(--sp-4); }
.div-quad--br { bottom: calc(var(--sp-3) + 1.3rem); right: var(--sp-4); text-align: right; }
/* A chip is a name at its measured position — the whole chip is the link.
   The plot is inset 5%/7% from the frame so an edge reading never clips and
   the corner labels stay legible under an extreme value. */
.div-chip { position: absolute; z-index: 2;
  left: calc(5% + var(--x) * 0.90); top: calc(7% + var(--y) * 0.86);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 700;
  letter-spacing: var(--ls-mono); color: var(--color-foreground);
  background: var(--color-background); border: var(--hairline);
  padding: 1px 5px; text-decoration: none; }
/* Disagreement is the product: the two quadrants where story and tape argue
   carry the brand edge. Direction colors stay reserved for signed change. */
.div-chip--arg, .div-chip--dead {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border)); }
.div-chip:hover, .div-chip:focus-visible { border-color: var(--color-brand);
  color: var(--color-brand); z-index: 3; text-decoration: none; }
/* The ledger. */
.div-ledger td { vertical-align: top; }
.div-co { color: var(--color-muted-foreground); font-size: var(--fs-300);
  margin-left: var(--sp-2); }
.div-word { font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide); }
.div-word--arg, .div-word--dead { color: var(--color-brand); }
.div-receipt { max-width: 34rem; }
.div-receipt a { color: var(--color-foreground); }
.div-receipt a:hover { color: var(--color-brand); }
.div-rmeta { display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); }
@media (max-width: 640px) {
  .div-map { aspect-ratio: 4 / 5; }
  .div-chip { font-size: var(--fs-100); padding: 1px 3px; }
  .div-quad { font-size: var(--fs-100); }
  .div-quad i { display: none; }
}

/* ==========================================================================
   THE DOSSIER CONSOLE (promoted from dossier v2)
   ========================================================================== */
/* ============ THE DOSSIER CONSOLE — company pages ============
   Promoted from the v2 prototype 2026-07-28. */

/* -- the console: everything below the head renders on a CRT ------------- */
.dc-console { position: relative; }
.dc-console::after { content: ""; position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.dc-console::before { content: ""; position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(0,0,0,.6); }
.dc-console .sechead h2 { text-shadow: 0 0 14px rgba(255,255,255,.28),
  0 0 34px color-mix(in srgb, var(--color-brand) 28%, transparent); }

/* -- boot sequence: the console attaches to the record ------------------- */
.dc-boot { font-family: var(--font-mono); font-size: var(--fs-300);
  border: var(--hairline); background: #050507; padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-5); color: var(--color-muted-foreground); }
.dc-boot p { margin: 0; overflow: hidden; white-space: nowrap; width: 0;
  animation: v2type .55s steps(44, end) forwards; }
.dc-boot p:nth-child(1) { color: var(--color-foreground); }
.dc-boot p:nth-child(2) { animation-delay: .45s; }
.dc-boot p:nth-child(3) { animation-delay: .95s; }
.dc-boot p:nth-child(4) { animation-delay: 1.45s; color: var(--color-brand); font-weight: 700; }
.dc-boot p:last-child::after { content: "\2588"; margin-left: 2px;
  animation: v2blink 1.1s steps(1) infinite; }
@keyframes v2type { to { width: 100%; } }
@keyframes v2blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dc-boot p { width: 100%; animation: none; }
  .dc-boot p:last-child::after { animation: none; }
}

/* -- the instrument bank: NOW as hardware -------------------------------- */
.dc-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: var(--hairline); background: linear-gradient(180deg, #12121a, #0a0a0e);
  margin-top: var(--sp-4); }
.dc-inst { position: relative; padding: var(--sp-4); border-right: var(--hairline);
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp-2);
  text-decoration: none; color: inherit; min-height: 10rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 -18px 26px rgba(0,0,0,.42); }
.dc-inst:last-child { border-right: 0; }
.dc-inst i.scr { position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #3a3a46; box-shadow: inset 0 1px 1px rgba(0,0,0,.8); }
.dc-inst i.scr:nth-of-type(1) { top: 6px; left: 6px; }
.dc-inst i.scr:nth-of-type(2) { top: 6px; right: 6px; }
.dc-inst i.scr:nth-of-type(3) { bottom: 6px; left: 6px; }
.dc-inst i.scr:nth-of-type(4) { bottom: 6px; right: 6px; }
.dc-inst-k { font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--color-muted-foreground); }
.dc-inst-v { font-family: var(--font-mono); font-size: var(--fs-700);
  font-weight: 700; line-height: 1; }
.dc-inst-s { font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); align-self: end; }
.dc-inst--hot .dc-inst-s, .dc-inst--hot .dc-inst-v { color: var(--color-brand); }
a.dc-inst:hover { background: rgba(255,255,255,.025); }

/* shared LED meter: unlit segments make the instrument exist at any reading */
.dc-meter { display: flex; gap: 3px; height: 18px; align-self: end; }
.dc-meter i { flex: 1; background: #16161d; border: 1px solid #22222b;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.dc-meter i.on { background: var(--c, var(--color-brand)); border-color: transparent;
  box-shadow: 0 0 7px color-mix(in srgb, var(--c, var(--color-brand)) 55%, transparent); }
.dc-meter i.zz { flex: 0 0 2px; background: var(--color-foreground);
  border: 0; margin: -3px 1px; box-shadow: none; }
.dc-meter-cap { display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); margin-top: 3px; }

/* the dial: an arc gauge with a filled sweep, a 1x mark and a real needle */
.dc-dial { position: relative; width: 128px; height: 66px; overflow: hidden;
  justify-self: start; align-self: end; }
.dc-dial::before { content: ""; position: absolute; inset: 0 0 -66px 0;
  border-radius: 50%;
  background: conic-gradient(from 270deg at 50% 50%,
    color-mix(in srgb, var(--color-brand) 60%, #2a2a33) 0deg calc(var(--sweep) * 1deg),
    #1b1b22 calc(var(--sweep) * 1deg) 180deg,
    transparent 180deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 60%, #000 61%);
  mask: radial-gradient(circle at 50% 50%, transparent 60%, #000 61%); }
.dc-dial b { position: absolute; left: 50%; bottom: -2px; width: 3px; height: 62px;
  margin-left: -1.5px; transform-origin: 50% 100%;
  transform: rotate(var(--deg, 0deg));
  background: linear-gradient(0deg, var(--color-foreground) 30%, var(--color-brand));
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-brand) 50%, transparent);
  transition: transform 1.2s cubic-bezier(.2, 1.6, .4, 1); z-index: 2; }
.dc-dial u { position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px;
  margin-left: -6px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 40% 35%, #d4d5d9, #55555f 70%); }
/* the 1x baseline mark on the arc */
.dc-dial s { position: absolute; left: 50%; bottom: 0; width: 2px; height: 66px;
  margin-left: -1px; transform-origin: 50% 100%; transform: rotate(var(--bdeg, -36deg));
  text-decoration: none; z-index: 1;
  background: linear-gradient(0deg, transparent 72%, var(--color-foreground) 72%); }

/* T-minus: the countdown, with the quarter burn-down under it */
.dc-tminus { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-800);
  line-height: 1; letter-spacing: var(--ls-mono); }
.dc-tminus small { display: block; font-size: var(--fs-100); font-weight: 400;
  letter-spacing: var(--ls-wide); color: var(--color-muted-foreground);
  text-transform: uppercase; margin-top: var(--sp-2); }

/* -- channel strip: the de-tabbed nav as a channel selector --------------- */
.dc-strip { position: sticky; top: 0; z-index: 30; display: flex; gap: var(--sp-1);
  align-items: center; overflow-x: auto; scrollbar-width: none;
  margin: var(--sp-4) 0 0; padding: var(--sp-2) 0;
  background: color-mix(in srgb, var(--color-background) 90%, transparent);
  backdrop-filter: blur(6px); border-bottom: var(--hairline); }
.dc-strip a { font-family: var(--font-mono); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--ls-wide); white-space: nowrap;
  color: var(--color-muted-foreground); padding: var(--sp-1) var(--sp-3);
  text-decoration: none; border: 1px solid transparent; }
.dc-strip a:hover { color: var(--color-brand); border-color: var(--color-border); }
.dc-strip a b { color: var(--color-border); font-weight: 400; margin-right: 4px; }
.dc-strip a:hover b { color: var(--color-brand); }
.dc-rec { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-wider); color: var(--color-down); white-space: nowrap;
  padding-right: var(--sp-2); }
.dc-rec i { animation: v2blink 1.4s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .dc-rec i { animation: none; } }

/* -- rooms on the spine --------------------------------------------------- */
.dc-main { border-left: var(--hairline); padding-left: var(--sp-6); }
.dc-room { position: relative; padding-top: var(--sp-7); }
.dc-room::before { content: ""; position: absolute; left: calc(-1 * var(--sp-6) - 1px);
  top: calc(var(--sp-7) + .55em); width: var(--sp-4); height: 0;
  border-top: 1px solid var(--color-brand); }
.dc-room > .sechead { margin-top: 0; }
.dc-note { position: relative; max-width: 68ch; margin: var(--sp-5) 0; }
.dc-note::before { content: "\258C  ANALYST"; display: block;
  font-family: var(--font-mono); font-size: var(--fs-100); font-weight: 700;
  letter-spacing: var(--ls-wider); color: var(--color-brand);
  margin-bottom: var(--sp-2); }

/* -- THE TAPE: the record as a seismo strip ------------------------------- */
.dc-tape { border: var(--hairline); background: #060608; padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.dc-tape-strip { display: flex; align-items: center; gap: 2px; height: 74px; position: relative; }
.dc-tape-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--color-muted-foreground) 40%, transparent); }
.dc-tape-col { flex: 1; display: grid; place-items: center; height: 100%; position: relative; }
.dc-tape-col b { width: 60%; max-width: 34px; height: calc(var(--amp) * .68);
  background: color-mix(in srgb, var(--color-brand) 55%, #2a2a33);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand) 25%, transparent); }
.dc-tape-col.cur b { background: var(--color-brand);
  animation: v2blink 1.6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .dc-tape-col.cur b { animation: none; } }
.dc-tape-x { display: flex; gap: 2px; margin-top: var(--sp-2); }
.dc-tape-x span { flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .04em; color: var(--color-muted-foreground); }
.dc-tape-cap { font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); margin-top: var(--sp-3); }

/* -- THE SPECTROGRAM: what the record is made of, as signal --------------- */
.dc-spec { border: var(--hairline); background: #060608; padding: var(--pad-panel); }
.dc-spec-grid { display: grid; grid-template-columns: 6.5rem repeat(var(--n), 1fr);
  gap: 3px; align-items: stretch; }
.dc-spec-k { font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); align-self: center; }
.dc-spec-c { height: 22px; background: #101016; position: relative; }
.dc-spec-c i { position: absolute; inset: 0;
  background: var(--color-brand); opacity: var(--a);
  box-shadow: 0 0 9px color-mix(in srgb, var(--color-brand) 45%, transparent); }
.dc-spec-c i[style*="--a: 0.0"] { box-shadow: none; }
.dc-spec-q { font-family: var(--font-mono); font-size: 9px; text-align: center;
  color: var(--color-muted-foreground); padding-top: 3px; }
.dc-spec-drift { height: 16px; position: relative; background: #0a0a0e; }
.dc-spec-drift i { position: absolute; left: 50%; bottom: 0; width: 3px;
  margin-left: -1px; height: var(--dh); background: var(--color-foreground); opacity: .8; }
.dc-spec-cap { font-family: var(--font-mono); font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-muted-foreground); margin-top: var(--sp-3); }

/* -- the powers meter: 7 lamps, absent stays dark — no empty prose rows --- */
.dc-pow { margin-top: var(--sp-6); }
.dc-pow-meter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  margin-top: var(--sp-3); }
.dc-pow-cell { display: grid; gap: var(--sp-1); justify-items: center;
  padding: var(--sp-3) var(--sp-1); background: #101016; border: 1px solid #1d1d25;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.dc-pow-lamp { font-size: var(--fs-500); line-height: 1; color: #2c2c36; }
.dc-pow-lamp svg { width: 15px; height: 15px; }
.dc-pow-abbr { font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted-foreground); text-align: center; }
.dc-pow-cell.st-held { border-color: color-mix(in srgb, var(--color-brand) 50%, #1d1d25); }
.dc-pow-cell.st-held .dc-pow-lamp { color: var(--color-brand);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-brand) 60%, transparent)); }
.dc-pow-cell.st-held .dc-pow-abbr { color: var(--color-foreground); }
.dc-pow-cell.st-contested .dc-pow-lamp { color: var(--color-caution, #d9a441); }
.dc-pow-cell.st-contested .dc-pow-abbr { color: var(--color-foreground); }
.dc-pow-row { display: grid; grid-template-columns: 1.4rem 11rem minmax(0, 1fr);
  gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) 0;
  border-bottom: var(--hairline); }
.dc-pow-row:last-of-type { border-bottom: 0; }
.dc-pow-row .g { justify-self: center; }
.dc-pow-row .g svg { width: 13px; height: 13px; }
.dc-pow-row.st-held .g { color: var(--color-brand); }
.dc-pow-row.st-contested .g { color: var(--color-caution, #d9a441); }
.dc-pow-name { font-family: var(--font-mono); font-size: var(--fs-300);
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.dc-pow-name small { display: block; font-weight: 400; font-size: var(--fs-100);
  color: var(--color-muted-foreground); margin-top: 2px; }
.dc-pow-why { font-size: var(--fs-400); line-height: 1.5;
  color: var(--color-muted-foreground); max-width: 58ch; }
@media (max-width: 700px) {
  .dc-pow-meter { grid-template-columns: repeat(4, 1fr); }
  .dc-pow-row { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .dc-pow-why { grid-column: 2; }
}

/* -- who tells it / calendar (unchanged from round 1) --------------------- */
.dc-src { border: var(--hairline); background: var(--color-card); padding: var(--pad-panel); }
.dc-src-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 3rem;
  gap: var(--sp-3); align-items: center; padding: var(--sp-1) 0;
  font-family: var(--font-mono); font-size: var(--fs-200); }
.dc-src-bar { height: 8px; background: var(--color-chart-card); }
.dc-src-bar i { display: block; height: 100%; width: var(--w);
  background: color-mix(in srgb, var(--color-brand) 55%, var(--color-border)); }
.dc-src-n { text-align: right; color: var(--color-muted-foreground); }
.dc-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--sp-4); align-items: start; }
.dc-cal-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: var(--hairline);
  font-size: var(--fs-300); }
.dc-cal-row:last-child { border-bottom: 0; }
.dc-cal-when { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--color-brand); }
.dc-cal-what { color: var(--color-muted-foreground); }

@media (max-width: 900px) {
  .dc-main { border-left: 0; padding-left: 0; }
  .dc-room::before { display: none; }
  .dc-duo { grid-template-columns: 1fr; }
  .dc-bank { grid-template-columns: repeat(2, 1fr); }
  .dc-inst:nth-child(2n) { border-right: 0; }
  .dc-spec-k { font-size: 8px; }
}

/* -- console tooltips: data-tip, terminal readout style, pure CSS ---------- */
.dc-console [data-tip] { position: relative; }
.dc-console [data-tip]:hover::after,
.dc-console [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px);
  left: 50%; transform: translateX(-50%); z-index: 40; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  white-space: nowrap; color: var(--color-foreground);
  background: #0a0a0e; border: 1px solid color-mix(in srgb, var(--color-brand) 55%, var(--color-border));
  padding: 3px 8px; box-shadow: 0 0 14px rgba(0,0,0,.65); }

/* -- bank power-on: armed by JS first, so half-dead JS strands nothing ----- */
.dc-bank.mv-armed .dc-inst { opacity: 0; transform: translateY(8px); }
.dc-bank.mv-armed .dc-dial b { transform: rotate(-90deg); transition: none; }
.dc-bank.boot .dc-inst { opacity: 1; transform: none;
  transition: opacity var(--t-strike, .24s) var(--e-out), transform var(--t-strike, .24s) var(--e-out); }
.dc-bank.boot .dc-inst:nth-child(1) { transition-delay: 0ms; }
.dc-bank.boot .dc-inst:nth-child(2) { transition-delay: calc(var(--t-stagger) * 2); }
.dc-bank.boot .dc-inst:nth-child(3) { transition-delay: calc(var(--t-stagger) * 4); }
.dc-bank.boot .dc-inst:nth-child(4) { transition-delay: calc(var(--t-stagger) * 6); }
.dc-bank.boot .dc-inst:nth-child(5) { transition-delay: calc(var(--t-stagger) * 8); }
.dc-bank.boot .dc-inst:nth-child(6) { transition-delay: calc(var(--t-stagger) * 10); }
/* the needle swings up from rest once its tile has landed */
.dc-bank.boot .dc-dial b { transform: rotate(var(--deg, 0deg));
  transition: transform 1.1s cubic-bezier(.2, 1.4, .4, 1);
  transition-delay: calc(var(--t-stagger) * 6); }
/* =============================================================================
   Private auth + Scribe console.
   ============================================================================= */
.nav-private { color: var(--color-brand) !important; }

.auth-page { min-height: 66vh; display: grid; align-items: center; }
.auth-shell { width: min(100%, 620px); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--color-border); background: var(--color-chart-card); }
.auth-shell h1 { margin: .3rem 0 .8rem; font-size: clamp(2rem, 6vw, 3.4rem); }
.auth-copy, .auth-foot { color: var(--color-muted-foreground); }
.auth-foot { margin-top: 1rem; font-family: var(--font-mono); font-size: .74rem; }
.auth-form { margin-top: 1.6rem; }
.auth-form label { display: block; margin-bottom: .45rem; font-family: var(--font-mono);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.auth-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.auth-row input, .auth-row button, .scribe-account button {
  border: 1px solid var(--color-border); border-radius: 0; font: inherit;
}
.auth-row input { min-width: 0; padding: .8rem .9rem; color: var(--color-foreground);
  background: var(--color-background); border-right: 0; }
.auth-row button, .scribe-account button { padding: .8rem 1rem; cursor: pointer;
  font-family: var(--font-mono); color: var(--color-background); background: var(--color-brand);
  border-color: var(--color-brand); }
.auth-row button:hover, .scribe-account button:hover { filter: brightness(1.08); }
.auth-notice { display: grid; gap: .2rem; margin-top: 1.5rem; padding: 1rem;
  border: 1px solid var(--color-border); font-family: var(--font-mono); }
.auth-notice.good { border-left: 3px solid var(--color-trading-up); }
.auth-notice.bad { border-left: 3px solid var(--color-trading-down); }
.auth-notice span { color: var(--color-muted-foreground); font-size: .8rem; }

.scribe-page { min-height: 70vh; }
.scribe-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem;
  padding: 1.2rem 0 1.8rem; border-bottom: 1px solid var(--color-border); }
.scribe-head h1 { margin-top: .25rem; font-size: clamp(2.4rem, 6vw, 4.5rem); }
.scribe-sub { margin-top: .5rem; color: var(--color-muted-foreground); }
.scribe-account { display: flex; align-items: center; gap: .8rem; color: var(--color-muted-foreground);
  font-family: var(--font-mono); font-size: .76rem; }
.scribe-account button { padding: .45rem .7rem; color: var(--color-foreground);
  background: transparent; border-color: var(--color-border); }

.scribe-tabs { display: flex; gap: .45rem; padding: 1.1rem 0; position: sticky; top: 60px;
  z-index: 20; background: color-mix(in srgb, var(--color-background) 94%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.scribe-tabs button { min-height: 40px; padding: .5rem 1rem; border: 1px solid var(--color-border);
  background: var(--color-card); color: var(--color-muted-foreground); cursor: pointer;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.scribe-tabs button[aria-selected="true"] { color: var(--color-background);
  background: var(--color-foreground); border-color: var(--color-foreground); }
.scribe-panel { padding: 1rem 0 3rem; }
.scribe-panel[hidden] { display: none; }

.scribe-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 1rem 0 2rem; }
.scribe-kpi { min-width: 0; padding: 1.1rem 1.2rem; border: 1px solid var(--color-border);
  background: var(--color-chart-card); }
.scribe-kpi span, .scribe-kpi small { display: block; color: var(--color-muted-foreground);
  font-family: var(--font-mono); }
.scribe-kpi span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.scribe-kpi strong { display: block; margin: .3rem 0; font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.2; color: var(--color-foreground); }
.scribe-kpi small { overflow-wrap: anywhere; font-size: .72rem; }

.scribe-block { margin-top: 1.4rem; }
.scribe-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .65rem; border-bottom: 1px solid var(--color-border); }
.scribe-block-head h2 { font-size: 1.1rem; }
.scribe-block-head h2::before { content: "\25B8  "; color: var(--color-brand); }
.scribe-block-head > span, .scribe-block-head > a { font-family: var(--font-mono);
  font-size: .7rem; color: var(--color-muted-foreground); }
.scribe-block-head > a { color: var(--color-primary); }
.scribe-empty { padding: 1.1rem 0; display: flex; gap: .5rem; flex-wrap: wrap;
  color: var(--color-muted-foreground); }
.scribe-empty strong { color: var(--color-foreground); }

.scribe-attention { list-style: none; padding: 0; }
.scribe-attention li { display: grid; grid-template-columns: 12px minmax(0, 1fr);
  gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--color-border); }
.scribe-attention p { color: var(--color-muted-foreground); overflow-wrap: anywhere; }
.scribe-dot { width: 9px; height: 9px; margin-top: .48rem; border-radius: 50%;
  background: var(--color-muted-foreground); }
.scribe-attention .error .scribe-dot { background: var(--color-trading-down); }
.scribe-attention .warn .scribe-dot { background: var(--color-brand); }

.scribe-proof { display: grid; }
.scribe-proof-row { display: grid; grid-template-columns: 82px 1.1fr 1fr 90px;
  align-items: center; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--color-border); }
.scribe-proof-row code, .scribe-proof-row > span:last-child { color: var(--color-muted-foreground);
  font-size: .74rem; }
.scribe-proof-row > span:last-child { font-family: var(--font-mono); text-align: right; }

.scribe-state { display: inline-flex; width: max-content; padding: .08rem .38rem;
  border: 1px solid var(--color-border); font-family: var(--font-mono); font-size: .64rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted-foreground); }
.scribe-state.current, .scribe-state.complete, .scribe-state.observed, .scribe-state.clear {
  color: var(--color-trading-up); border-color: color-mix(in srgb, var(--color-trading-up) 45%, var(--color-border)); }
.scribe-state.running, .scribe-state.open { color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.scribe-state.stale, .scribe-state.incomplete, .scribe-state.unmeasured {
  color: var(--color-trading-down); border-color: color-mix(in srgb, var(--color-trading-down) 45%, var(--color-border)); }

.scribe-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.scribe-attempt > div { display: flex; align-items: center; gap: .7rem; padding: 1rem 0 .6rem; }
.scribe-attempt dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; }
.scribe-attempt dl div { padding: .65rem 0; border-top: 1px solid var(--color-border); }
.scribe-attempt dt { color: var(--color-muted-foreground); font-family: var(--font-mono);
  font-size: .66rem; text-transform: uppercase; }
.scribe-attempt dd { margin-top: .15rem; font-family: var(--font-mono); }
.scribe-unknowns { list-style: none; padding: .65rem 0 0; }
.scribe-unknowns li { display: grid; gap: .15rem; padding: .55rem 0;
  border-bottom: 1px solid var(--color-border); }
.scribe-unknowns span { color: var(--color-muted-foreground); }

.scribe-output-list, .scribe-models, .scribe-missions, .scribe-epistemics { display: grid; }
.scribe-output { display: grid; grid-template-columns: 120px minmax(0, 1.6fr) 1fr 180px;
  gap: 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
.scribe-output-kind, .scribe-output > span, .scribe-output time { font-family: var(--font-mono);
  font-size: .72rem; color: var(--color-muted-foreground); }
.scribe-output-kind { text-transform: uppercase; color: var(--color-primary); }
.scribe-output time { text-align: right; }

.scribe-run-table { width: 100%; }
.scribe-run-row { display: grid; grid-template-columns: minmax(240px, 1.7fr) 100px 180px 150px 80px;
  gap: 1rem; align-items: center; min-width: 850px; padding: .7rem 0;
  border-bottom: 1px solid var(--color-border); }
.scribe-run-table { overflow-x: auto; }
.scribe-run-row.head { color: var(--color-muted-foreground); font-family: var(--font-mono);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.scribe-run-row time, .scribe-run-row > span { color: var(--color-muted-foreground);
  font-family: var(--font-mono); font-size: .72rem; }
.scribe-run-row .num { text-align: right; color: var(--color-foreground); }
.scribe-models > div { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(4, 110px);
  gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: .76rem; }
.scribe-models span { color: var(--color-muted-foreground); text-align: right; }
.scribe-models b { text-align: right; }

.scribe-mission { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.scribe-mission-priority { color: var(--color-brand); font-family: var(--font-mono); }
.scribe-mission-meta { display: flex; align-items: center; gap: .6rem; color: var(--color-muted-foreground);
  font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; }
.scribe-mission h3 { margin: .2rem 0; font-size: 1.05rem; }
.scribe-mission p { max-width: 80ch; color: var(--color-muted-foreground); }
.scribe-capability { margin-top: 1.3rem; padding: 1rem; border: 1px dashed var(--color-border);
  display: grid; gap: .2rem; color: var(--color-muted-foreground); }
.scribe-capability strong { color: var(--color-foreground); }
.scribe-epistemics > div { display: grid; grid-template-columns: 110px 220px minmax(0, 1fr);
  gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--color-border); }
.scribe-epistemics p { color: var(--color-muted-foreground); }

@media (max-width: 900px) {
  .scribe-kpis { grid-template-columns: 1fr; }
  .scribe-split { grid-template-columns: 1fr; gap: .4rem; }
  .scribe-output { grid-template-columns: 100px minmax(0, 1fr); gap: .25rem 1rem; }
  .scribe-output time { text-align: left; }
  .scribe-models > div { grid-template-columns: minmax(160px, 1fr) repeat(2, 90px); }
  .scribe-models > div span:nth-of-type(3), .scribe-models > div span:nth-of-type(4) { display: none; }
}

@media (max-width: 640px) {
  .auth-row { grid-template-columns: 1fr; gap: .5rem; }
  .auth-row input { border-right: 1px solid var(--color-border); }
  .scribe-head { align-items: start; flex-direction: column; gap: 1rem; }
  .scribe-account { width: 100%; justify-content: space-between; }
  .scribe-tabs { overflow-x: auto; }
  .scribe-tabs button { min-width: 90px; }
  .scribe-block-head { align-items: start; flex-direction: column; gap: .25rem; }
  .scribe-proof-row { grid-template-columns: 78px minmax(0, 1fr); gap: .35rem .7rem; }
  .scribe-proof-row code { grid-column: 2; overflow-wrap: anywhere; }
  .scribe-proof-row > span:last-child { grid-column: 2; text-align: left; }
  .scribe-output { grid-template-columns: 1fr; }
  .scribe-attempt dl { grid-template-columns: 1fr; }
  .scribe-models > div { grid-template-columns: 1fr 80px; }
  .scribe-models > div span:not(:first-of-type) { display: none; }
  .scribe-epistemics > div { grid-template-columns: 1fr; gap: .25rem; }
}

/* ── The fund layer: a book, priced forward ─────────────────────────────────
   A fund page has one job the rest of the site does not: keep three columns of
   money visibly apart. Long capital, put notional and call notional are three
   different units, and a reader who skims will add whatever sits adjacent — so
   the side marker is coloured, always present, and never optional. */

.fund-period { text-align: left; vertical-align: top; padding-block: var(--sp-4); border-inline-end: 1px solid var(--color-border); }
.fund-period .fund-q { display: block; font-family: var(--font-mono); font-size: var(--fs-500); color: var(--color-foreground); letter-spacing: var(--ls-mono); }
.fund-period .label { display: block; margin-top: var(--sp-0); }
.fund-arc tr.period-first td, .fund-arc tr.period-first th { border-block-start: 1px solid var(--color-border-strong); }

.fund-side {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: var(--pad-pill);
}
/* Long is the house colour. Puts and calls borrow the up/down pair because that
   is the direction each one WANTS, which is the fact readers get wrong. */
.fund-side-long { color: var(--color-foreground); border-color: var(--color-border-strong); }
.fund-side-put  { color: var(--color-down); border-color: color-mix(in srgb, var(--color-down) 45%, transparent); }
.fund-side-call { color: var(--color-up);   border-color: color-mix(in srgb, var(--color-up) 45%, transparent); }

/* A return is coloured by whether it went the holder's way, not by its sign: a
   put's underlying rising is a red number that is arithmetically positive, and
   printing that green would invert the only thing the column means. */
.fund-ret { font-family: var(--font-mono); font-size: var(--fs-400); }
.fund-ret.up   { color: var(--color-up); }
.fund-ret.down { color: var(--color-down); }
.fund-na { opacity: .7; }

.fund-marks { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
.fund-mark { display: inline-flex; align-items: baseline; gap: var(--sp-2); }

.fund-name { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.fund-name a { text-decoration: none; }

/* Coverage state, per holding. The muted "not covered" is the point of the
   badge: a fund page that linked all 29 names identically would claim a depth
   of coverage that does not exist. */
.fund-cov {
  display: inline-block;
  margin-inline-start: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--pad-pill);
  border-radius: 3px;
  border: 1px solid transparent;
}
.fund-cov-dossier { color: var(--color-brand); border-color: color-mix(in srgb, var(--color-brand) 40%, transparent); }
.fund-cov-tracked { color: var(--color-muted-foreground); border-color: var(--color-border); }
.fund-cov-none    { color: var(--color-muted-foreground); opacity: .6; }

.fund-warn { color: var(--color-caution); margin-inline-start: var(--sp-3); }

.fund-excluded { border-block-start: 1px solid var(--color-border); padding-block-start: var(--sp-4); margin-block-start: var(--sp-5); }
.fund-excluded ul, .fund-caveats, .fund-alongside { margin: var(--sp-4) 0 0; padding-inline-start: var(--sp-5); }
.fund-excluded li, .fund-caveats li, .fund-alongside li { margin-block-end: var(--sp-3); font-size: var(--fs-500); color: var(--color-muted-foreground); }
.fund-caveats li strong, .fund-excluded li strong, .fund-alongside a { color: var(--color-foreground); }

/* Period heading rows inside the arc. Replaces a rowspan cell, which is why the
   left column is gone from the header. */
.fund-period-row th {
  text-align: left; padding-block: var(--sp-4) var(--sp-2);
  border-block-start: 1px solid var(--color-border-strong);
  background: var(--color-chart-card);
}
.fund-period-row:first-child th { border-block-start: 0; }
.fund-period-row .fund-q {
  font-family: var(--font-mono); font-size: var(--fs-500);
  color: var(--color-foreground); letter-spacing: var(--ls-mono);
  margin-inline-end: var(--sp-5);
}
.fund-period-row .label { margin-inline-end: var(--sp-5); }

/* ── Phones: the tables stop being tables ────────────────────────────────
   Four and six columns of mono figures cannot fit 390px, and the failure was
   not cosmetic — horizontal scroll pushed "marked forward" off-screen, so the
   one column the arc exists for was the one nobody could see. Each row becomes
   a stacked block with its column name from data-label. The header row is
   hidden because every cell now carries its own. */
@media (max-width: 760px) {
  .fund-arc, .fund-book { font-size: var(--fs-400); }
  .table-scroll:has(.fund-arc), .table-scroll:has(.fund-book) { overflow-x: visible; }

  .fund-arc thead, .fund-book thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fund-arc, .fund-book, .fund-arc tbody, .fund-book tbody,
  .fund-arc tr, .fund-book tr, .fund-arc td, .fund-book td,
  .fund-period-row th { display: block; width: auto; }

  .fund-arc tbody tr:not(.fund-period-row), .fund-book tbody tr {
    padding: var(--sp-4) 0;
    border-block-end: 1px solid var(--color-border);
  }
  .fund-arc tbody td, .fund-book tbody td {
    border: 0; padding: var(--sp-1) 0;
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline; gap: var(--sp-4);
    text-align: left;                      /* .num right-aligns; meaningless once stacked */
  }
  .fund-arc tbody td::before, .fund-book tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: var(--fs-200);
    letter-spacing: var(--ls-wider); text-transform: uppercase;
    color: var(--color-muted-foreground);
  }
  /* A cell with no label is a spacer, not a row. */
  .fund-arc tbody td:not([data-label]), .fund-book tbody td:not([data-label]) { display: none; }
  .fund-arc tbody tr:hover td, .fund-book tbody tr:hover td { background: none; }

  .fund-period-row th {
    padding: var(--sp-5) var(--sp-4) var(--sp-3);
    margin-block-start: var(--sp-5);
  }
  .fund-period-row .fund-q { display: block; font-size: var(--fs-650); }
  .fund-period-row .label { display: inline-block; margin-inline-end: var(--sp-4); }

  /* Marks go one per line: they are the payload, and two figures per mark side
     by side is what pushed the column off-screen in the first place. */
  .fund-marks { flex-direction: column; gap: var(--sp-2); align-items: start; }
  .fund-mark { display: grid; grid-template-columns: 6.5rem auto auto;
               gap: var(--sp-3); align-items: baseline; }
  .fund-cum { display: inline; margin-inline-start: var(--sp-2); }
  .fund-name { font-size: var(--fs-500); }
  .fund-cov { margin-inline-start: 0; }
}
/* The cumulative figure rides under the leg move: present for anyone checking
   the arithmetic, quiet enough that it does not compete with the event. */
.fund-cum { display: block; opacity: .6; margin-top: var(--sp-0); }
/* The cumulative figure rides under the leg move: present for anyone checking
   the arithmetic, quiet enough that it does not compete with the event. */
.fund-cum { display: block; opacity: .6; margin-top: var(--sp-0); }

/* Fund cards on the homepage. The one section here whose value is a number, so
   the figures get room and the terms that qualify them get printed beside them
   rather than left on the page they link to. */
.fund-cards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.fund-card {
  display: grid; gap: var(--sp-3);
  padding: var(--pad-panel);
  text-decoration: none;
  border: var(--bd) solid var(--color-border);
  transition: border-color .15s ease;
}
.fund-card:hover { border-color: var(--color-brand); text-decoration: none; }
.fund-card-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.fund-card-h .n { font-size: var(--fs-650); color: var(--color-foreground); }
.fund-card .d { font-size: var(--fs-500); color: var(--color-muted-foreground); }
.fund-card-figs { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-2); }
.fund-fig { display: grid; gap: var(--sp-0); }
.fund-fig b { font-family: var(--font-mono); font-size: var(--fs-800); font-weight: 400; color: var(--color-foreground); letter-spacing: var(--ls-mono); }
.fund-card-terms {
  text-transform: none; letter-spacing: var(--ls-0);
  line-height: var(--lh-data); opacity: .75;
  border-top: 1px solid var(--color-border); padding-top: var(--sp-3);
}