/* The Infinite Archive — design-language CSS
 *
 * Tokens, reset, base typography, scanline overlay, and shared header /
 * logo / nav chrome. Loaded by every page; page-specific styles continue
 * to live in each page's <style> block until Phase 1 step 3 moves them
 * out into per-page CSS or templates.
 *
 * Phase 1 step 1: extracted from the duplicated inline <style> blocks in
 * the seven v0 pages. Canonical values are the majority across those
 * pages; the two divergent rules (html/body line-height on index,
 * awakenings, strength-index; .logo-text font-size on quantum) are kept
 * as one-line overrides in those pages' inline <style> blocks so v0
 * rendering is preserved exactly.
 */

/* ===========================================================================
   REDESIGN — Phase 1 (2026-05-25). The token layer is rebased onto
   the Claude Design handoff bundle at `docs/design-system/`. The
   source of truth for every value is
   `docs/design-system/colors_and_type.css`; values here are lifted
   verbatim. Four themes now ship:

     :root                      — theme-independent tokens + Nebula
                                  (the new default, pure-black OLED
                                  ground with Cryptek emerald chrome)
     [data-theme="nebula"]      — re-declares the Nebula colour set
     [data-theme="light"]       — parchment + deep emerald
     [data-theme="theme"]       — the phosphor green-on-black
                                  data-terminal retained as a cube-
                                  click easter egg (consolidation
                                  Session 2 reduced four visible
                                  themes to two — Nebula + Light;
                                  Graphite retired, phosphor stays
                                  but only as the easter egg),
                                  re-expressed in the new
                                  token namespace so the Phase 2–3
                                  component migration carries it
                                  along; keeps its monospace stack
                                  and its scanline overlay.

   Phase 1 is the token-layer + alias-bridge pass: every old token
   name (`--bg`, `--green`, `--text`, …) is kept alive as an alias
   pointing at a new token (`--bg-0`, `--accent`, `--fg-1`, …), so
   every existing rule keeps working and instantly renders in the new
   palette without page edits. The alias block lives at the foot of
   this section and is marked clearly as a temporary migration
   bridge — Phases 2 and 3 migrate rules off it and the final
   cleanup deletes it.

   The Archivist/Editor semantic accents `--data` (violet,
   measurement) and `--interp` (gold, interpretation) are
   load-bearing and have no equivalent in the new design system; they
   are declared as real tokens in every theme block (per design
   sketch §3.2). Same for `--user-selection*` (cyan) and the
   Captain-Decision `--accent-warm*` / `--accent-cool*` team accents.

   The figure SVGs (`cover-fig-*`, `quantum-orient-fig-*`,
   `cover-ledger-fig-*`, `reset-timeline.svg`, `awk-w21-fig-*`) are
   NOT themed via these vars — they carry their own hard-coded
   monospace `font-family` attribute and remain fixed-dark insets,
   exactly as every prior theme build left them.
   =========================================================================== */

:root {
  /* ---------- Type families ---------- */
  --font-display: "Orbitron", "Eurostile", "Bahnschrift", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* ---------- Type scale (rem on 16px root) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-64: 4rem;

  /* ---------- Weights ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- Line heights ---------- */
  --lh-tight: 1.05;
  --lh-display: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* ---------- Letter-spacing ---------- */
  --tracking-display: 0.02em;
  --tracking-caps:    0.14em;
  --tracking-caps-tight: 0.08em;
  --tracking-tabular: 0;

  /* ---------- Geometry ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-pill: 999px;

  --border-1: 1px;
  --border-2: 2px;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;
  --dur-reanimation: 1400ms;
}

/* ============================================================
   THEME · NEBULA — pure black void, OLED, the new DEFAULT.
   The colour tokens live in both `:root` (so a no-`data-theme`
   visitor lands here) and `[data-theme="nebula"]` (so an explicit
   Nebula selection is robust). Mirrors the design-system file's
   `:root, [data-theme="nebula"]` pattern.
   ============================================================ */
:root,
[data-theme="nebula"] {
  /* Surfaces */
  --bg-0: #000000;
  --bg-1: #07090a;
  --bg-2: #0d1112;
  --bg-3: #141a1c;
  --bg-4: #1b2326;

  /* Foreground */
  --fg-0: #e9f4ee;
  --fg-1: #c8d4cd;
  --fg-2: #8b9892;
  --fg-3: #5d6a64;
  --fg-4: #38423d;

  /* Borders */
  --border-soft:   #1a2124;
  --border-base:   #232c2f;
  --border-strong: #324043;

  /* Accent — Cryptek Emerald */
  --accent:        #1fb574;
  --accent-bright: #39ff7a;
  --accent-dim:    #126b48;
  --accent-deep:   #0a3a28;
  --accent-on:     #00150c;
  --accent-glow:   0 0 0 1px rgba(31,181,116,0.35), 0 0 24px rgba(57,255,122,0.18);

  /* Data semantics */
  --pos: #4be09a;  --pos-dim: #1a5a3d;
  --neg: #ff6a6a;  --neg-dim: #5a1f24;
  --neu: #c8d4cd;
  --warn: #f0c674;
  --info: #6ec6ff;

  /* Data-viz ramp */
  --viz-1: #1fb574;
  --viz-2: #4be09a;
  --viz-3: #6ec6ff;
  --viz-4: #c9b870;
  --viz-5: #b87aff;
  --viz-6: #f0c674;
  --viz-7: #ff6a6a;
  --viz-8: #8b9892;

  /* Heatmap (diverging, zero-centred) */
  --heat-neg-3: #5a1f24;
  --heat-neg-2: #8a3a3f;
  --heat-neg-1: #b9555a;
  --heat-zero:  #2a3236;
  --heat-pos-1: #2a8a5d;
  --heat-pos-2: #1fb574;
  --heat-pos-3: #4be09a;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.03);

  /* Focus / selection */
  --focus-ring:   0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
  --selection-bg: rgba(31,181,116,0.32);
  --selection-fg: #e9f4ee;

  color-scheme: dark;

  /* ----- Archivist/Editor semantic accents — kept alive across the
     redesign (design sketch §3.2). The design system has no
     `--data` / `--interp`; declared as real tokens here in every
     theme block. */
  /* `--data` (violet) on a pure-black ground: design-system `--viz-5`
     (`#b87aff`) reads cleanly against `#000` — kept as-is. */
  --data:           #b87aff;
  --data-bright:    #d4b1ff;
  --data-dim:       #6e3fb1;

  --interp:         #f0c674;  /* same family as --warn — gold */
  --interp-bright:  #f7d99a;
  --interp-dim:     #8a6a1a;

  --user-selection:        #22d3ee;
  --user-selection-bright: #67e8f9;
  --user-selection-faint:  rgba(34, 211, 238, 0.18);
  --user-selection-dim:    #0e7490;

  --accent-warm:      #d97706;
  --accent-warm-bg:   rgba(217, 119, 6, 0.08);
  --accent-warm-mute: rgba(217, 119, 6, 0.55);
  --accent-cool:      #0ea5e9;
  --accent-cool-bg:   rgba(14, 165, 233, 0.08);
  --accent-cool-mute: rgba(14, 165, 233, 0.55);

  /* ----- Overlay / compat tokens — kept defined so existing base
     rules do not break. The redesign is flat: no surface gradients,
     no decorative wash, no scanline on the three new themes. Phosphor
     "Theme" restores its scanline + glow via its own block below. */
  --bg-radial-tint:   transparent;
  --bg-gradient-end:  var(--bg-0);
  --header-bg:        color-mix(in oklab, var(--bg-0) 78%, transparent);
  --scanline-tint:    transparent;
  --logo-shadow:      rgba(31, 181, 116, 0.28);
  --logo-face-top:    rgba(57, 255, 122, 0.22);
  --logo-face-right:  rgba(31, 181, 116, 0.14);
  --logo-face-left:   rgba(10, 58, 40, 0.32);
}

/* Graphite theme retired in consolidation Session 2 (2026-06-11);
   the dark default Nebula above absorbs every reader who was on
   Graphite. The theme-init migration in base.njk rewrites stored
   'graphite' to 'nebula' so returning visitors land on Nebula. */

/* ============================================================
   THEME · LIGHT — parchment + deep emerald
   ============================================================ */
[data-theme="light"] {
  --bg-0: #f3efe7;
  --bg-1: #ebe6dc;
  --bg-2: #ffffff;
  --bg-3: #e3ddd1;
  --bg-4: #d8d1c2;

  --fg-0: #0a0e0c;
  --fg-1: #1d2422;
  --fg-2: #4d5852;
  --fg-3: #7a857f;
  --fg-4: #b0b8b3;

  --border-soft:   #d8d1c2;
  --border-base:   #c3bcae;
  --border-strong: #95897a;

  --accent:        #146b48;
  --accent-bright: #1fb574;
  --accent-dim:    #2a8a5d;
  --accent-deep:   #0a3a28;
  --accent-on:     #f3efe7;
  --accent-glow:   0 0 0 1px rgba(20,107,72,0.35);

  --pos: #146b48; --pos-dim: #b9d8c7;
  --neg: #8a1c1c; --neg-dim: #f0c8c8;
  --neu: #4d5852;
  --warn: #8a5a00;
  --info: #1a5a8a;

  --viz-1: #146b48; --viz-2: #2a8a5d; --viz-3: #1a5a8a;
  --viz-4: #8a6a1a; --viz-5: #5a2a8a; --viz-6: #8a5a00;
  --viz-7: #8a1c1c; --viz-8: #4d5852;

  --heat-neg-3: #8a1c1c; --heat-neg-2: #b94545; --heat-neg-1: #d68a8a;
  --heat-zero:  #d8d1c2;
  --heat-pos-1: #8ec2a9; --heat-pos-2: #2a8a5d; --heat-pos-3: #146b48;

  --shadow-1: 0 1px 0 rgba(20,30,25,0.06);
  --shadow-2: 0 6px 18px rgba(20,30,25,0.10);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  --focus-ring:   0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
  --selection-bg: rgba(20,107,72,0.22);
  --selection-fg: #0a0e0c;

  color-scheme: light;

  /* Semantic accents — violet/gold need to survive on parchment. */
  --data:           #5a2a8a;
  --data-bright:    #4c1d95;
  --data-dim:       #c4b5fd;
  --interp:         #8a5a00;
  --interp-bright:  #6e4900;
  --interp-dim:     #f0c674;

  --user-selection:        #0891b2;
  --user-selection-bright: #0e7490;
  --user-selection-faint:  rgba(8, 145, 178, 0.12);
  --user-selection-dim:    #67e8f9;

  --accent-warm:      #ea580c;
  --accent-warm-bg:   rgba(234, 88, 12, 0.08);
  --accent-warm-mute: rgba(234, 88, 12, 0.65);
  --accent-cool:      #0284c7;
  --accent-cool-bg:   rgba(2, 132, 199, 0.08);
  --accent-cool-mute: rgba(2, 132, 199, 0.65);

  /* Overlay / compat */
  --bg-radial-tint:   transparent;
  --bg-gradient-end:  var(--bg-0);
  --header-bg:        color-mix(in oklab, var(--bg-0) 78%, transparent);
  --scanline-tint:    transparent;
  --logo-shadow:      rgba(20, 107, 72, 0.18);
  --logo-face-top:    rgba(20, 107, 72, 0.14);
  --logo-face-right:  rgba(20, 107, 72, 0.07);
  --logo-face-left:   rgba(10, 58, 40, 0.18);
}

/* ============================================================
   THEME · THEME — phosphor data-terminal, retained
   The launch identity, re-expressed in the new token namespace
   (design sketch §2). Values port from the prior phosphor block
   via the inverse of the §3.1 alias map; genuinely-new tokens
   (`--bg-4`, `--fg-0`, `--fg-4`, `--accent-on`, `--accent-glow`,
   `--viz-*`, `--heat-*`) are derived. Both `--font-display` and
   `--font-body` (and `--font-mono`) are overridden to the
   monospace stack so the data-terminal mood stays monospace
   everywhere. The scanline overlay stays — the CRT metaphor
   belongs here. This block will NOT be byte-identical to the
   prior phosphor theme (it now wears the redesigned component
   layout); that is intended.
   ============================================================ */
[data-theme="theme"] {
  /* All three font tokens → monospace stack. */
  --font-display: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-mono:    "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Surfaces (carry old --bg, --bg-input, --bg-card, --bg-card-hover
     onto --bg-0 / --bg-1 / --bg-2 / --bg-3; derive --bg-4). */
  --bg-0: #050807;
  --bg-1: #050907;
  --bg-2: #0a120e;
  --bg-3: #0d1812;
  --bg-4: #10221a;

  /* Foreground (--text → --fg-1, --text-mute → --fg-2,
     --text-faint → --fg-3; derive --fg-0 brighter, --fg-4 dimmer). */
  --fg-0: #eafff1;
  --fg-1: #d1fae5;
  --fg-2: #6ee7b7;
  --fg-3: #5fc26a;
  --fg-4: #2a5230;

  /* Borders (--grid → --border-soft, --border → --border-base,
     --border-bright → --border-strong). */
  --border-soft:   #112016;
  --border-base:   #1a3a26;
  --border-strong: #2e5a3e;

  /* Accent — phosphor green (--green → --accent, --green-bright
     → --accent-bright, --green-dim → --accent-dim, --green-mute
     → --accent-deep). */
  --accent:        #4ade80;
  --accent-bright: #86efac;
  --accent-dim:    #15803d;
  --accent-deep:   #166534;
  --accent-on:     #001a0c;
  --accent-glow:   0 0 0 1px rgba(74,222,128,0.35), 0 0 24px rgba(134,239,172,0.22);

  /* Data semantics */
  --pos: #86efac;
  --pos-dim: #166534;
  --neg: #ef4444;
  --neg-dim: #7f1d1d;
  --neu: #6ee7b7;
  --warn: #fbbf24;
  --info: #67e8f9;

  /* Data-viz ramp — phosphor-flavored */
  --viz-1: #4ade80;
  --viz-2: #86efac;
  --viz-3: #67e8f9;
  --viz-4: #fbbf24;
  --viz-5: #a78bfa;
  --viz-6: #fde68a;
  --viz-7: #ef4444;
  --viz-8: #6ee7b7;

  --heat-neg-3: #7f1d1d; --heat-neg-2: #a13a3a; --heat-neg-1: #c47171;
  --heat-zero:  #1a3a26;
  --heat-pos-1: #166534; --heat-pos-2: #15803d; --heat-pos-3: #4ade80;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 1px 0 rgba(134, 239, 172, 0.05);

  --focus-ring:   0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
  --selection-bg: rgba(74, 222, 128, 0.32);
  --selection-fg: #d1fae5;

  color-scheme: dark;

  /* Semantic accents — preserve the original phosphor-theme values. */
  --data:           #a78bfa;
  --data-bright:    #c4b5fd;
  --data-dim:       #6d28d9;
  --interp:         #fbbf24;
  --interp-bright:  #fde68a;
  --interp-dim:     #92400e;

  --user-selection:        #22d3ee;
  --user-selection-bright: #67e8f9;
  --user-selection-faint:  rgba(34, 211, 238, 0.18);
  --user-selection-dim:    #0e7490;

  --accent-warm:      #d97706;
  --accent-warm-bg:   rgba(217, 119, 6, 0.06);
  --accent-warm-mute: rgba(217, 119, 6, 0.55);
  --accent-cool:      #0ea5e9;
  --accent-cool-bg:   rgba(14, 165, 233, 0.06);
  --accent-cool-mute: rgba(14, 165, 233, 0.55);

  /* Overlay / compat — phosphor restores its gradient + scanline. */
  --bg-radial-tint:   rgba(34, 197, 94, 0.06);
  --bg-gradient-end:  #030604;
  --header-bg:        rgba(5, 8, 7, 0.9);
  --scanline-tint:    rgba(74, 222, 128, 0.018);
  --logo-shadow:      rgba(74, 222, 128, 0.32);
  --logo-face-top:    rgba(134, 239, 172, 0.28);
  --logo-face-right:  rgba(74, 222, 128, 0.14);
  --logo-face-left:   rgba(22, 101, 52, 0.18);
}

/* ===========================================================================
   ALIAS BRIDGE — REMOVED (redesign Phase 3, 2026-05-25)

   The Phase 1 alias bridge (every old token name aliased to its new
   counterpart) carried the site through the Phase 2 component
   migration. Phase 2's mechanical rename swept every live consumer
   off the bridge; Phase 3 confirmed zero remaining references in
   `src/assets/css/archive.css`, `src/_includes/`, and all 16 page
   pageStyle blocks before deleting the bridge entirely.

   The redesign now reads exclusively against the real new tokens
   (`--accent`, `--bg-0..4`, `--fg-0..4`, `--space-*`, `--fs-*`,
   `--font-display` / `--font-body` / `--font-mono`, …). New rules
   should be written against these names. If a future surface needs
   one of the old names back, declare it as a real token in the
   relevant theme block — do NOT reintroduce a bridge.
   =========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  /* Default theme is proportional (Nebula); the base letter-spacing
     is the relaxed proportional-friendly value. The phosphor "Theme"
     restores its wide monospace tracking via the
     `[data-theme="theme"]` overrides below. */
  letter-spacing: 0;
  min-height: 100vh;
}

/* Heading-font routing. Every theme sets both `--font-heading` and
   `--font-body`; for the two proportional themes (Nebula, Light)
   they diverge (DM Sans / Inter), and for the phosphor "Theme" they
   both resolve to the monospace stack so the phosphor theme stays
   byte-identical. This rule routes every heading-flavour
   surface to `--font-heading`; body prose keeps `--font-body` via the
   cascade through `html, body` above. */
h1, h2, h3, h4, h5, h6,
.logo-text, .logo-sub,
nav a .nav-name, nav a .nav-desc,
.section-hero .descriptor, .section-hero .title,
.band-head,
.entry-banner .eb-title, .entry-banner .eb-tag, .entry-banner .eb-meta,
.tab-nav button[role="tab"],
.theme-control-seg,
.tab-eyebrow,
.footer-meta {
  font-family: var(--font-display);
}

/* Phosphor "Theme" tracking restoration. The base letter-spacing
   rules above carry the proportional-friendly relaxed tracking; the
   block below restores the wide monospace tracking the phosphor
   theme has always rendered with, so the explicit-phosphor visitor
   sees the same site as before this build. Selectors mirror the
   prior `[data-theme="reader"]` relaxation block in reverse. */
[data-theme="theme"] html,
[data-theme="theme"] body                       { letter-spacing: 0.02em; }
[data-theme="theme"] .logo-text                 { letter-spacing: 0.32em; font-weight: 600; }
[data-theme="theme"] .logo-sub                  { letter-spacing: 0.45em; }
/* Session 4 — values swapped with the .nav-name/.nav-desc hierarchy
   inversion (the wide tracking follows the small secondary line). */
[data-theme="theme"] nav a .nav-name            { letter-spacing: 0.16em; }
[data-theme="theme"] nav a .nav-desc            { letter-spacing: 0.2em; }
[data-theme="theme"] .section-hero .descriptor  { letter-spacing: 0.4em; }
[data-theme="theme"] .section-hero .title       { letter-spacing: 0.1em; }
[data-theme="theme"] .band-head                 { letter-spacing: 0.4em; }
[data-theme="theme"] .footer-meta               { letter-spacing: 0.22em; }
[data-theme="theme"] .theme-control-seg         { letter-spacing: 0.18em; font-size: 11px; }

body {
  background-image:
    radial-gradient(ellipse at top, var(--bg-radial-tint) 0%, transparent 50%),
    linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-gradient-end) 100%);
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    var(--scanline-tint) 2px,
    var(--scanline-tint) 3px
  );
  z-index: 1;
  mix-blend-mode: screen;
}
/* The scanline pseudo-element belongs to the phosphor "Theme" only —
   the CRT metaphor doesn't transfer to the three design-system
   themes. Each one sets `--scanline-tint: transparent` so the
   gradient renders to nothing; the `display:none` rules below are
   belt-and-braces guards that make the suppression explicit. The
   bare `html:not([data-theme])` covers the no-saved-preference case
   that falls through to the `:root` Nebula default. */
html:not([data-theme]) body::before,
[data-theme="nebula"]   body::before,
[data-theme="light"]    body::before { display: none; }

/* ===========================================================================
   Chrome — header / logo / two-line nav (redesign Phase 2, 2026-05-25)

   Restyled per `docs/design-system/ui_kits/quantum/quantum.css`
   (.ia-nav / .ia-nav-pair / .ia-nav-theme-btn) and the visual-
   foundations conventions in the design-system README:
     - sharp corners (radius 0), border-driven hierarchy, no shadow
     - hover ignites a 1px emerald top-border (no background swap,
       no scale, no shadow lift)
     - active item carries a 2px emerald left-edge mark
       (`--border-strong` underline on the codename retained as a
       secondary cue for the existing `.active` class)
     - focus = `--focus-ring` (no OS default)

   The two-line nav keeps the existing markup (plain function over
   codename) — only the typography inverts: codename in
   `--font-display` (the heavier line, even though it sits second
   in the visual stack), plain label in small caps `--font-body`.
   The four-way theme control inherits its base structure from
   Phase 1 and only its segment styling is refreshed below.
   =========================================================================== */
header {
  position: relative; z-index: 10;
  border-bottom: 1px solid var(--border-base);
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
  background: var(--bg-0);
}

.logo { display: flex; align-items: center; gap: var(--space-3); }
a.logo { text-decoration: none; border: none; color: var(--accent-bright); }
.logo svg { width: 46px; height: 46px; filter: drop-shadow(0 0 5px var(--logo-shadow)); }
.logo-text {
  font-family: var(--font-display);
  font-size: 14px;
  /* Proportional-theme default; phosphor "Theme" restores the wide
     monospace tracking + weight via the `[data-theme="theme"]`
     overrides at the foot of the chrome block. */
  letter-spacing: 0.16em;
  color: var(--fg-0);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.logo-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  margin-top: 3px;
  text-transform: uppercase;
}

nav { display: flex; align-items: stretch; gap: 0; flex: 1; }
nav a {
  display: flex; flex-direction: column; gap: 2px;
  color: var(--fg-1);
  text-decoration: none;
  /* Session 2 desktop tightening — was `var(--space-2) var(--space-4)`
     (≈ 8px 16px). Reducing horizontal padding by ~2px each side
     across five nav items saves ~20px from the header min-content
     width budget. Combined with the theme-control collapse from
     four segments to two (saves ~140px), the header now fits
     within 1,240px content width at 1,280px viewports. */
  padding: var(--space-2) var(--space-3);
  border: none;
  border-top: 1px solid transparent;
  border-left: 1px solid var(--border-soft);
  transition: background var(--dur-fast) var(--ease-out),
              border-top-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* Consolidation Session 4 (§2.1) — type hierarchy inverted: the plain
   function label (.nav-name) is now the 13px display-face primary
   tier; the Necron codename (.nav-desc) demotes to the small-caps
   secondary. Same markup (plain line still first), swapped styles. */
nav a .nav-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--fg-1);
  text-transform: uppercase;
  white-space: nowrap;
}
nav a .nav-desc {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.10em;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  opacity: 1;
  white-space: nowrap;
}
/* Hover — emerald top-edge ignite, no other change. */
nav a:hover { border-top-color: var(--accent); background: var(--bg-2); }
nav a:hover .nav-name { color: var(--fg-0); }
/* Active — 2px emerald left mark + raised surface; plain label glows. */
nav a.active {
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--space-4) - 1px);
}
nav a.active .nav-name { color: var(--accent-bright); }
nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Two-state theme segmented control (consolidation Session 2,
   2026-06-11; was four states through 2026-06-10). Two labelled
   radio buttons — NEBULA / LIGHT — sit at the right edge of the
   nav, each a sharp-bordered button. Phosphor lives behind the
   cube-click easter egg and is intentionally absent here. The
   active segment carries `--accent-bright` text on an `--accent`
   border; hover lifts the border to `--border-strong`. Keyboard-
   accessible (←/→ cycle); the handler in base.njk syncs active
   state. Total width target ≤ 80px. */
.theme-control {
  margin-left: auto;
  display: inline-flex;
  gap: 1px;
  align-items: center;
}
.theme-control-seg {
  background: transparent;
  border: 1px solid var(--border-base);
  border-radius: 0;
  color: var(--fg-2);
  padding: 6px 9px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.theme-control-seg:hover {
  color: var(--fg-0);
  border-color: var(--border-strong);
}
.theme-control-seg.active {
  color: var(--accent-bright);
  border-color: var(--accent);
}
.theme-control-seg:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* When the header carries a search affordance + control, the
   search uses margin-left:auto first; the control follows in
   natural flow. */
header .search + .theme-control { margin-left: var(--space-3); }

/* ===========================================================================
   Cube affordance — the SVG inside `.logo` doubles as the site-wide
   cube-click easter-egg target (consolidation Session 2, 2026-06-11).
   `.logo-cube` adds `cursor: pointer` so it reads as clickable
   without any visible UI hint — discovering it is the easter egg.
   The active toggle handler lives in base.njk and calls
   preventDefault on the click event so the parent `<a href="/">`
   doesn't navigate home when the cube is clicked.
   =========================================================================== */
.logo-cube { cursor: pointer; }

/* ===========================================================================
   Responsive header — hamburger button + mobile drawer
   (consolidation Session 2, 2026-06-11). Below 900px the desktop
   `<nav>` is hidden, the hamburger is shown, and the drawer renders
   the same five items as a vertical list overlay. Click-outside +
   Escape close. `prefers-reduced-motion` removes the slide animation.
   The drawer doesn't reuse Quantum's `.ia-sidebar` instance — it
   borrows the structural model (off-canvas, full-width, toggleable)
   but is a new component scoped under `.ia-header-drawer`.
   =========================================================================== */

/* Hamburger — hidden by default (desktop) and revealed via the
   ≤900px media query at the foot of this block. The three-bar
   stack is pure CSS (no SVG dependency); inactive bars use
   `--fg-2`, active state lifts to `--accent`. */
.ia-header-hamburger {
  display: none;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--border-base);
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.ia-header-hamburger:hover { border-color: var(--accent); }
.ia-header-hamburger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.ia-header-hamburger-bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--fg-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.ia-header-hamburger[aria-expanded="true"] .ia-header-hamburger-bar { background: var(--accent); }

/* Drawer — hidden by default (`hidden` attribute is also set by
   JS); becomes a full-width overlay positioned below the header on
   mobile. The slide-in animation runs on the `.is-open` class. */
.ia-header-drawer {
  display: none;
}
@media (max-width: 900px) {
  .ia-header-drawer {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 360px);
    height: 100dvh;
    background: var(--bg-1);
    border-right: 1px solid var(--border-base);
    z-index: 9998;
    padding: 80px 0 24px;
    transform: translateX(-100%);
    transition: transform var(--dur-base, 240ms) var(--ease-out, ease-out);
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.42);
    overflow-y: auto;
  }
  .ia-header-drawer.is-open { transform: translateX(0); }
}
.ia-header-drawer[hidden] { display: none; }
.ia-header-drawer-nav {
  display: flex;
  flex-direction: column;
}
.ia-header-drawer-nav a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 22px;
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease-out),
              border-left-color var(--dur-fast, 120ms) var(--ease-out, ease-out);
}
.ia-header-drawer-nav a:hover { background: var(--bg-2); }
.ia-header-drawer-nav a.active {
  border-left-color: var(--accent);
  background: var(--bg-2);
}
.ia-drawer-name {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: var(--fg-0);
  text-transform: uppercase;
}
.ia-drawer-desc {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.ia-header-drawer-nav a.active .ia-drawer-desc { color: var(--accent-bright); }

@media (max-width: 900px) {
  /* Hide the desktop nav + show the hamburger. The theme control
     stays visible (it's small now — two segments ≈ 70-80px). */
  header > nav { display: none; }
  .ia-header-hamburger { display: inline-flex; }
}

/* Logo compaction — drop the WARHAMMER 40,000 sub-line below 480px
   so the cube + title fit on one line on the smallest mobile
   viewports. */
@media (max-width: 480px) {
  .logo-sub { display: none; }
  .logo svg { width: 36px; height: 36px; }
  .logo-text { font-size: 13px; letter-spacing: 0.14em; }
}

/* prefers-reduced-motion — remove the drawer slide animation so
   the open/close is instantaneous for readers who've asked for it. */
@media (prefers-reduced-motion: reduce) {
  .ia-header-drawer { transition: none; }
}

/* ===========================================================================
   Section bands — restyled per the design-system `.ia-section-head`
   spec (redesign Phase 2). The label uses the display face in caps;
   the rule beneath is `--border-base`. Migrated off the alias
   bridge onto real new tokens.
   =========================================================================== */
section.band {
  position: relative; z-index: 5;
  padding: var(--space-10) var(--space-8);
  max-width: 1320px; margin: 0 auto;
}
.band-head {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.band-rule {
  height: 1px;
  background: var(--border-base);
  margin-bottom: var(--space-6);
}

/* ===========================================================================
   Section landing pages (Protocol, Chronicle, Dossiers, Matrix)
   A common structural skeleton: title-hero, Archivist intro paragraph,
   "What's here now" / "Coming" list-grids, closing line. The four pages
   share these classes; their own pageStyle blocks stay empty.
   =========================================================================== */

/* Title hero — section name + functional descriptor + tagline.
   Migrated to real new tokens (redesign Phase 2). Title in display
   face, all-caps; descriptor in display-eyebrow tier; tagline in
   body voice. */
.section-hero {
  position: relative; z-index: 5;
  padding: var(--space-16) var(--space-8) var(--space-8);
  max-width: 1320px; margin: 0 auto;
}
.section-hero .descriptor {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.section-hero .title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 64px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--fg-0);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
}
.section-hero .tagline {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg-2);
  line-height: var(--lh-body);
  max-width: 56ch;
}

/* Archivist-voice intro paragraph, left-border accented (the
   2px-emerald accent stripe — the design system reserves it for
   selection state, but this Archivist-voice rule has carried it
   since launch as the "voice of the section" signal; kept as the
   one editorial exception). Migrated to real new tokens
   (redesign Phase 2). */
.section-intro {
  position: relative; z-index: 5;
  padding: var(--space-2) var(--space-8) var(--space-6);
  max-width: 1320px; margin: 0 auto;
}
.section-intro p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 56ch;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 2px solid var(--accent);
}

/* List grids for "What's here now" and "Coming" items — flat
   cards in `--bg-2`, 1px `--border-base`, sharp corners,
   border-driven hover (1px emerald top-edge ignite per the
   design-system convention). Migrated to real new tokens. */
.list-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: var(--space-3);
}
.list-block {
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  border-top: 1px solid var(--border-base);
  border-radius: var(--radius-0);
  padding: var(--space-4) var(--space-5);
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: border-top-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.list-block.live:hover {
  border-top-color: var(--accent);
  background: var(--bg-3);
}
.list-block .name {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  color: var(--fg-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.list-block .desc {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--fg-2);
  line-height: var(--lh-snug);
}
.list-block a.go {
  display: inline-block; margin-top: var(--space-2);
  color: var(--accent-bright);
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-bright) 30%, transparent);
  align-self: flex-start;
}
.list-block a.go:hover { border-bottom-color: var(--accent-bright); }
.list-block.live { cursor: pointer; }
.list-empty {
  border: 1px dashed var(--border-strong);
  background: transparent;
  padding: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg-3);
  line-height: var(--lh-loose);
  max-width: 56ch;
}

/* Closing line — a measured sign-off, separated by a faint top
   rule. Migrated to real new tokens (redesign Phase 2). */
.section-closing {
  position: relative; z-index: 5;
  padding: var(--space-1) var(--space-8) var(--space-12);
  max-width: 1320px; margin: 0 auto;
}
.section-closing p {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--fg-3);
  max-width: 56ch;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}
.section-closing p strong { color: var(--fg-1); font-weight: 600; }

@media (max-width: 880px) {
  .section-hero { padding: 36px 32px 24px; }
  .section-hero .title { font-size: 38px; }
}

/* ===========================================================================
   Footer meta strip — site-wide reference links rendered below
   each page's per-page <footer> content. Migrated to real new
   tokens (redesign Phase 2). Mono caps per the design-system
   `.ia-footer` spec.
   =========================================================================== */
.footer-meta {
  width: 100%;
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.footer-meta a {
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-bright) 30%, transparent);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.footer-meta a:hover { border-bottom-color: var(--accent-bright); }

/* ===========================================================================
   Design-system shared component classes (redesign Phase 2)

   Reusable primitives + data components ported from
   `docs/design-system/ui_kits/quantum/quantum.css`. These coexist
   with the existing legacy classes (which continue to render
   through the alias bridge); new component instances should opt
   into the .ia-* classes, and Phase 3 will migrate the remaining
   per-surface signature pieces (Quantum status bar, matrix,
   dispatch reader, ELO leaderboard) onto them.

   Every rule below is written against the REAL new tokens
   (`--accent`, `--bg-0..4`, `--fg-0..4`, `--space-*`, `--fs-*`,
   etc.) — no alias-bridge reliance — so these classes survive the
   final cleanup at the end of Phase 3.

   Source spec: `docs/design-system/ui_kits/quantum/quantum.css`.
   =========================================================================== */

/* ---------- Generic section structure ---------- */
.ia-section { display: flex; flex-direction: column; gap: var(--space-5); }
.ia-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-base);
}
.ia-section-eyebrow {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: var(--space-1);
}
.ia-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-0);
  margin: 0;
}
.ia-section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  margin-top: var(--space-1);
  letter-spacing: 0.06em;
}
.ia-section-action {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-bright);
  border: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-bright) 30%, transparent);
  text-decoration: none;
}
.ia-section-action:hover { border-bottom-color: var(--accent-bright); }

/* ---------- Card primitives ---------- */
.ia-card {
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-0);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.ia-card-eyebrow {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-2);
}
.ia-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

/* ---------- Stat card ---------- */
.ia-stat-card { padding: var(--space-5); }
.ia-stat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
}
.ia-stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 500;
  color: var(--fg-0);
  line-height: 1;
}
.ia-stat-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ia-stat-delta.is-pos { color: var(--pos); }
.ia-stat-delta.is-neg { color: var(--neg); }
.ia-stat-ci {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}
.ia-stat-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.ia-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-0);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              border-top-color var(--dur-fast) var(--ease-out);
}
.ia-btn:hover { color: var(--fg-0); border-top-color: var(--accent); }
.ia-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ia-btn:disabled, .ia-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.ia-btn--primary {
  border-color: var(--accent);
  color: var(--accent-bright);
}
.ia-btn--primary:hover {
  color: var(--accent-on);
  background: var(--accent);
}
.ia-btn--ghost { border-color: var(--border-base); color: var(--fg-2); }
.ia-btn--ghost:hover { color: var(--fg-0); border-top-color: var(--accent); }

/* ---------- Stat / status chips ---------- */
.ia-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-1);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ia-chip--fresh {
  color: var(--pos);
  border-color: color-mix(in oklab, var(--pos) 40%, var(--border-base));
}
.ia-chip--stale {
  color: var(--warn);
  border-color: color-mix(in oklab, var(--warn) 40%, var(--border-base));
}
.ia-chip--provisional {
  color: var(--warn);
  border-color: color-mix(in oklab, var(--warn) 40%, var(--border-base));
}
.ia-chip--accent {
  color: var(--accent-bright);
  border-color: color-mix(in oklab, var(--accent-bright) 40%, var(--border-base));
}

/* ---------- Form fields ---------- */
.ia-field {
  display: flex; flex-direction: column; gap: var(--space-1);
}
.ia-field-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-2);
}
.ia-field-input,
.ia-field-select,
.ia-field-textarea {
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-0);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ia-field-input:focus,
.ia-field-select:focus,
.ia-field-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.ia-field-input:focus-visible,
.ia-field-select:focus-visible,
.ia-field-textarea:focus-visible {
  box-shadow: var(--focus-ring);
}
/* The search field is the one micro-bevel exception (radius-1). */
.ia-field-search {
  border-radius: var(--radius-1);
}

/* ---------- Tabs (generic) ---------- */
.ia-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border-base);
  padding: 0 var(--space-6);
  background: var(--bg-0);
  overflow-x: auto;
}
.ia-tab {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-out),
              border-bottom-color var(--dur-fast) var(--ease-out);
}
.ia-tab-group {
  font-family: var(--font-body);
  font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-tab-label {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-2);
}
.ia-tab:hover .ia-tab-label,
.ia-tab:hover { color: var(--fg-0); }
.ia-tab.is-active { border-bottom-color: var(--accent); color: var(--accent-bright); }
.ia-tab.is-active .ia-tab-label { color: var(--accent-bright); }
.ia-tab.is-active .ia-tab-group { color: var(--fg-1); }
.ia-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Data table ---------- */
.ia-table-wrap { overflow-x: auto; border: 1px solid var(--border-base); }
.ia-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.ia-table th,
.ia-table td {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
}
.ia-table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-base);
  cursor: pointer;
  background: var(--bg-1);
  position: sticky; top: 0;
  user-select: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.ia-table thead th:hover { color: var(--fg-0); }
.ia-table thead th.is-sort { color: var(--accent-bright); }
.ia-sort-arrow { color: var(--accent); }
.ia-table tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--dur-fast) var(--ease-out);
}
.ia-table tbody tr:hover { background: var(--bg-2); }
/* Numeric column alignment — bump specificity so the alignment
   classes win against the default `.ia-table th / td` left-align
   rule above (quantum-finish, 2026-05-25). The convention is that
   every numeric column's `<th>` carries the same alignment as its
   data cells, so the header digit-letters sit directly above the
   column of right-aligned numbers. The unqualified `.ia-table
   .is-right / .is-center` aliases are kept so non-th/non-td
   helpers (e.g. small caption spans) still pick up the rule. */
.ia-table th.is-right,
.ia-table td.is-right,
.ia-table .is-right   { text-align: right; }
.ia-table th.is-center,
.ia-table td.is-center,
.ia-table .is-center  { text-align: center; }
.ia-table .ia-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-0);
}
.ia-table .ia-num.is-pos { color: var(--pos); }
.ia-table .ia-num.is-neg { color: var(--neg); }
.ia-table .ia-ci {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  margin-left: 6px;
}
.ia-table .ia-faction-link {
  color: var(--fg-0);
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ia-table .ia-faction-link:hover {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
}

/* ---------- Shared data components ---------- */

/* Faction row — rank · name · win rate · z chip; hover ignites the
   top-border, selected state gets the 2px emerald left mark. */
.ia-faction {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  border-top: 1px solid var(--border-base);
  margin-bottom: 2px;
  cursor: pointer;
  transition: border-top-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ia-faction:hover { border-top-color: var(--accent); }
.ia-faction.is-selected {
  border-left: 2px solid var(--accent);
  background: var(--bg-3);
  padding-left: calc(var(--space-3) - 1px);
}
.ia-faction-rank {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ia-faction-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-0);
  font-weight: 500;
}
.ia-faction.is-selected .ia-faction-name { color: var(--accent-bright); }
.ia-faction-wr {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--fg-0);
  min-width: 56px;
  text-align: right;
}
.ia-faction-z {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-1);
  min-width: 54px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.ia-faction-z.is-pos {
  color: var(--pos);
  border-color: color-mix(in oklab, var(--pos) 40%, var(--border-base));
}
.ia-faction-z.is-neg {
  color: var(--neg);
  border-color: color-mix(in oklab, var(--neg) 40%, var(--border-base));
}

/* Tier buckets — STRONGER / AVERAGE / WEAKER rows with member
   names carrying a coloured 2px left tick. */
.ia-buckets { display: flex; flex-direction: column; }
.ia-bucket {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
  align-items: flex-start;
}
.ia-bucket:first-child { border-top: none; }
.ia-bucket-name {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 6px;
}
.ia-bucket-stronger .ia-bucket-name { color: var(--pos); }
.ia-bucket-weaker   .ia-bucket-name { color: var(--neg); }
.ia-bucket-average  .ia-bucket-name { color: var(--fg-1); }
.ia-bucket-n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.ia-bucket-members {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.ia-bucket-member {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
  position: relative;
  padding-left: 10px;
  text-decoration: none;
  border-bottom: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.ia-bucket-member::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 2px; height: 11px;
  background: var(--accent-dim);
}
.ia-bucket-stronger .ia-bucket-member::before { background: var(--pos); }
.ia-bucket-weaker   .ia-bucket-member::before { background: var(--neg); }
.ia-bucket-member:hover { color: var(--accent-bright); }

/* ---------- Hero (the slim page-top headline) ---------- */
.ia-hero {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--border-soft);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%; box-sizing: border-box;
}
.ia-hero-eyebrow {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--fg-0);
  margin: 0;
  text-transform: uppercase;
}
.ia-hero-dek {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
  line-height: 1.5;
}

/* ---------- Status bar — the ONE transparency exception in the
   design system. Uses flexbox for N cells (the design system's
   reference shows three, but Quantum carries four — cube · MFM
   dataslate · data freshness · meta verdict). `.ia-status-block`
   wraps each label/value pair; `.ia-status-divider` is a sibling
   between blocks. */
.ia-status {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: color-mix(in oklab, var(--bg-0) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-base);
  position: sticky; top: 0; z-index: 10;
  flex-wrap: wrap;
}
.ia-status-block {
  display: flex; flex-direction: column;
  min-width: 0;
}
.ia-status-block-grow { flex: 1; min-width: 0; }
.ia-status-divider { width: 1px; height: 28px; background: var(--border-soft); flex: none; }
.ia-status-label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.ia-status-value {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ia-status-value a { font-weight: 600; }
.ia-status-value b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg-0);
}
.ia-status-cube {
  display: inline-flex; align-items: center;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  color: var(--accent);
}
.ia-status-cube svg { width: 28px; height: 28px; }
.ia-status-cube:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Site-wide footer (.ia-footer / .ia-footer-mantra) ----
   Available for pages that want the design-system footer shape;
   the existing per-page <footer> blocks coexist via the chrome
   restyle above. */
.ia-footer {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid var(--border-base);
  display: flex; flex-direction: column; gap: var(--space-3);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.ia-footer-mantra {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.12em;
  color: var(--fg-1);
  text-transform: uppercase;
}
.ia-footer-mantra em {
  font-style: normal;
  color: var(--accent-bright);
}

/* ===========================================================================
   Long-form article layout — Phase 2 methodology articles.

   The Protocol section's existing pages are interactive tools (CI Explorer,
   Two-Proportion Test, etc.). The four methodology articles (Big Soup,
   Six Bins, Swiss Isn't Random, On Average) are long-form prose — a page
   type the site does not yet have. This block defines the shared treatment
   so all four pages are visually identical and so a future fifth article
   can extend the same layout by adding `class="article-page"` to its body.

   Conventions:
   - `.article-body` carries the readable column (max 720px) and the body
     prose rhythm. The header descriptor + title + tagline reuse the existing
     `.section-hero` (.descriptor uses ARTICLE in place of DASHBOARD / etc.).
   - `.article-lead` renders the lead blockquote as a gold-accented pulled
     quote — gold is the editorial/Methodology Library "interp" colour
     (matches the ARTICLES band on `/methodology-library.html`).
   - `.article-sidebar` is a set-off aside (left-border accented, slightly
     inset), distinct from body prose.
   - `.article-footnote` is a smaller, top-bordered note near the foot.
   - `.article-related` is the cross-link grid at the article foot. Reuses
     `.list-block.live` semantics so the cards match the Methodology
     Library directory.
   - Every rule uses design tokens that flip cleanly under
     `[data-theme="light"]`; the only theme-specific surface here is the
     lead-quote background tint (8%/4% gold) and the sidebar tint (4%/2%
     gold) — both are overridden in the light-mode block below.
   =========================================================================== */
.article-body {
  position: relative; z-index: 5;
  padding: 4px 32px 48px;
  max-width: 760px;
  margin: 0 auto;
}
.article-body p,
.article-body ul,
.article-body ol {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--fg-2);
  letter-spacing: 0.005em;
  margin-bottom: 18px;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body ul,
.article-body ol {
  padding-left: 22px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body strong {
  color: var(--fg-1); font-weight: 500;
}
.article-body em { color: var(--fg-1); font-style: italic; }
.article-body a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.article-body a:hover { color: var(--accent-bright); }
.article-body h3 {
  font-size: 18px; letter-spacing: 0.06em;
  color: var(--accent-bright);
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 500;
}
.article-body h3:first-child { margin-top: 12px; }

/* Lead blockquote — the pulled quote at the top of each article. Gold
   accent matches the Methodology Library ARTICLES band. Sits inside
   .article-body so it inherits the same readable measure. */
.article-lead {
  font-size: 18px; line-height: 1.7;
  color: var(--fg-1);
  font-style: italic;
  background: rgba(251, 191, 36, 0.06);
  border-left: 3px solid var(--interp);
  padding: 18px 22px;
  margin: 0 0 32px;
  letter-spacing: 0.01em;
}
.article-lead p { margin: 0; color: var(--fg-1); font-size: inherit; }
.article-lead p + p { margin-top: 10px; }

/* Tables — used for weapon-profile stat-lines and the small outcome /
   threshold tables in the articles. Tight, monospaced, terminal-styled. */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 22px;
  font-size: 13.5px;
  color: var(--fg-2);
}
.article-body th,
.article-body td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.article-body th {
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 11.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-base);
  background: var(--bg-2);
}
.article-body tr:last-child td { border-bottom: 1px solid var(--border-base); }
.article-body td strong { color: var(--accent-bright); }

/* Sidebars — "Sidebar — the machinery" sections. Gold-accented, set off
   from body prose by an inset background and left border. The `<h3>` style
   inside the sidebar is intentionally smaller and unbordered so the
   sidebar reads as a single block, not a continuation of the article. */
.article-sidebar {
  background: rgba(251, 191, 36, 0.04);
  border-left: 3px solid var(--interp-dim);
  padding: 20px 24px 22px;
  margin: 32px 0;
}
.article-sidebar h3 {
  font-size: 13.5px; letter-spacing: 0.22em;
  color: var(--interp);
  margin: 0 0 12px;
  padding-bottom: 0;
  border-bottom: none;
  text-transform: uppercase;
  font-weight: 500;
}
.article-sidebar p,
.article-sidebar ul,
.article-sidebar li {
  font-size: 14px; line-height: 1.75;
}
.article-sidebar ul { padding-left: 18px; }
.article-sidebar li { margin-bottom: 10px; }

/* Footnotes — smaller, top-bordered note near the foot of the article.
   Slightly muted so they read as supplementary. */
.article-footnote {
  margin: 28px 0;
  padding-top: 18px;
  border-top: 1px dashed var(--border-base);
  color: var(--fg-3);
  font-size: 13.5px;
  line-height: 1.75;
}
.article-footnote h3 {
  font-size: 12px; letter-spacing: 0.24em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: none;
  font-weight: 500;
}
.article-footnote p { font-size: inherit; color: inherit; margin-bottom: 12px; }
.article-footnote em { color: var(--fg-2); }

/* Related footer at the article foot — links the sibling articles and
   the relevant tools. Reuses the directory's `.list-block.live` look so
   cards match the Methodology Library. The grid is constrained to a
   single 760px column so it doesn't break the article's reading rhythm.

   `.article-related-band` reuses the `.band-head--interp` token from the
   Library page; if the Library page is later refactored, this rule can
   inline the same `color: var(--interp-bright)` directly. */
.article-related {
  position: relative; z-index: 5;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}
.article-related-band {
  font-size: 11.5px; letter-spacing: 0.28em;
  color: var(--interp-bright);
  margin-bottom: 6px;
  font-weight: 500;
}
.article-related-rule {
  height: 1px;
  background: var(--interp);
  margin-bottom: 18px;
}
.article-related .list-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.article-related .list-block .name { font-size: 14px; }
.article-related .list-block .desc { font-size: 12.5px; }

/* Forward-reference text — a "planned" link that is rendered as plain
   text rather than an <a>, with a small muted suffix so readers see the
   distinction. Used for references to the Damage Distribution calculator
   and "Player or Army?" which do not yet have pages. */
.article-body .forward-ref {
  color: var(--fg-1);
  font-style: italic;
}
.article-body .forward-ref::after {
  content: ' (planned)';
  color: var(--fg-3);
  font-style: normal;
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

/* Chart container — both Six Bins and On Average embed a Chart.js bar
   chart inside an `.article-chart`. The Chart.js canvas MUST sit in its
   own dedicated, fixed-height, relatively-positioned parent
   (`.article-chart-canvas`): a responsive Chart.js canvas sizes itself
   to its parent, so if that parent is auto-height — as `.article-chart`
   is, since it also holds the legend and caption — the canvas grows
   without bound. Keep the canvas alone inside `.article-chart-canvas`. */
.article-chart {
  margin: 14px 0 28px;
  padding: 18px 18px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-base);
}
.article-chart-canvas {
  position: relative; height: 320px; width: 100%;
}
.article-chart canvas {
  display: block;
}
.article-chart-caption {
  font-size: 12.5px; line-height: 1.65;
  color: var(--fg-3);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  letter-spacing: 0.015em;
}
.article-chart-caption .marker-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid currentColor;
}
.article-chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 8px;
  font-size: 12px; color: var(--fg-3);
}
.article-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Light-mode tweaks: gold-tinted backgrounds get a stronger paper-on-white
   feel rather than the dark-mode glow. */
[data-theme="light"] .article-lead {
  background: rgba(180, 83, 9, 0.05);
}
[data-theme="light"] .article-sidebar {
  background: rgba(180, 83, 9, 0.03);
}

@media (max-width: 880px) {
  .article-body { padding: 4px 22px 40px; }
  .article-body h3 { font-size: 16.5px; }
  .article-lead { font-size: 16px; padding: 14px 16px; }
  .article-related { padding: 18px 22px 40px; }
}

/* ===========================================================================
   Captain Decision Archive — entry-walkthrough layout (shared across all
   five CHTT 2026 standalone entry pages).

   Previously inlined in `src/captain-decisions.html`'s pageStyle block,
   moved here when the Round 5 spotlight was promoted into its own page
   and Rounds 1-4 shipped as siblings — five pages now share the same
   walkthrough chrome, so the styling is genuinely reusable.

   The hub-only chrome (filters, the .decision-card index grid, the
   .crumb breadcrumb) stays inline on the hub itself.
   =========================================================================== */

/* ----- Arc rail ----- Cross-page navigation between the five CHTT round
   entry pages. Sits below the breadcrumb on each entry. Active round is
   marked; clicking any other round links to its page; "← BACK TO ARCHIVE"
   links to the hub. */
.arc-rail {
  position: relative; z-index: 5;
  padding: 8px 32px 16px;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
  font-size: 11.5px; letter-spacing: 0.22em;
  border-bottom: 1px solid var(--border-base);
  background: var(--bg-2);
}
.arc-rail .arc-label {
  color: var(--fg-3);
  font-size: 10.5px; letter-spacing: 0.32em;
}
.arc-rail .arc-link {
  color: var(--fg-2);
  text-decoration: none;
  padding: 4px 9px;
  border: 1px solid var(--border-base);
  letter-spacing: 0.2em;
  font-size: 11px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.arc-rail .arc-link:hover {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: var(--bg-3);
}
.arc-rail .arc-link.active {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: rgba(74, 222, 128, 0.08);
}
.arc-rail .arc-back {
  margin-left: auto;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  font-size: 11px;
}
.arc-rail .arc-back:hover { color: var(--accent-bright); }
@media (max-width: 720px) {
  .arc-rail { padding: 8px 22px 14px; gap: 8px; }
  .arc-rail .arc-back { margin-left: 0; width: 100%; padding-top: 4px; }
}

/* ----- Entry container ----- Replaces the old `.spotlight` wrapper from
   when Round 5 was embedded inside the hub. Now: top-level on each entry
   page, framed border, holds the entry banner + context strip + tabs +
   references footer. */
.entry-card {
  margin: 0 32px 32px;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  position: relative;
}
.entry-banner {
  background: linear-gradient(to right, rgba(74,222,128,0.08), transparent);
  border-bottom: 1px solid var(--border-base);
  padding: 22px 28px;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 18px;
}
.entry-banner .eb-info { flex: 1; min-width: 280px; }
.entry-banner .eb-tag {
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--accent); margin-bottom: 6px;
}
.entry-banner .eb-title {
  font-size: 28px; letter-spacing: 0.04em;
  color: var(--accent-bright); line-height: 1.2;
}
.entry-banner .eb-meta {
  font-size: 12.5px; color: var(--fg-3);
  letter-spacing: 0.12em; margin-top: 6px;
}
.entry-banner .eb-stakes {
  text-align: right;
  border-left: 1px solid var(--border-base);
  padding-left: 22px;
}
.entry-banner .eb-stakes .lbl {
  font-size: 10.5px; letter-spacing: 0.22em; color: var(--fg-3);
}
.entry-banner .eb-stakes .val {
  font-size: 16px; color: var(--accent-bright); margin-top: 4px;
}
.entry-banner .eb-stakes .sub {
  font-size: 12px; color: var(--fg-3);
  margin-top: 2px; letter-spacing: 0.06em;
}

/* ----- Provenance + Editor disclosure banners ----- Sit ABOVE the
   entry-banner. Provenance (.single-captain-banner / .dual-captain-banner)
   flags how the entry was sourced; Editor-disclosure (.editor-disclosure)
   flags Editor-of-record COI when one applies. */
.single-captain-banner,
.dual-captain-banner {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid var(--accent-deep);
  border-left: 3px solid var(--accent);
  padding: 14px 22px;
  margin: 0 0 14px;
}
.single-captain-banner .dc-eyebrow,
.dual-captain-banner .dc-eyebrow {
  font-size: 10.5px; letter-spacing: 0.32em;
  color: var(--accent); margin-bottom: 8px; font-weight: 500;
}
.single-captain-banner p,
.dual-captain-banner p {
  color: var(--fg-1); font-size: 14px; line-height: 1.7; margin: 0;
}
.single-captain-banner p strong,
.dual-captain-banner p strong { color: var(--data); font-weight: 500; }
.single-captain-banner p + p,
.dual-captain-banner p + p { margin-top: 10px; }

.editor-disclosure {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid var(--warn);
  border-left: 3px solid var(--warn);
  padding: 14px 22px;
  margin: 0 0 18px;
}
.editor-disclosure .ed-eyebrow {
  font-size: 10.5px; letter-spacing: 0.32em;
  color: var(--warn); margin-bottom: 8px; font-weight: 500;
}
.editor-disclosure p {
  color: var(--fg-1); font-size: 14px; line-height: 1.7; margin: 0;
}
.editor-disclosure p strong { color: var(--warn); font-weight: 500; }

/* Companion-entry note — Round 4 uses this to flag its tie to Round 5. */
.companion-entry-banner {
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid var(--data-dim);
  border-left: 3px solid var(--data);
  padding: 14px 22px;
  margin: 0 0 18px;
}
.companion-entry-banner .ce-eyebrow {
  font-size: 10.5px; letter-spacing: 0.32em;
  color: var(--data); margin-bottom: 8px; font-weight: 500;
}
.companion-entry-banner p {
  color: var(--fg-1); font-size: 14px; line-height: 1.7; margin: 0;
}
.companion-entry-banner p strong { color: var(--data-bright); font-weight: 500; }
.companion-entry-banner p a {
  color: var(--data-bright); border-bottom: 1px dashed currentColor;
  text-decoration: none;
}

/* ----- Top context strip ----- Three-cell strip between the entry-banner
   and the tab nav: FINAL SCORE / KEY PLAYS / pinned captain quote. */
.context-strip {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.5fr;
  gap: 18px;
  padding: 20px 28px;
  background: rgba(74, 222, 128, 0.025);
  border-bottom: 1px solid var(--border-base);
}
.context-strip .cs-block .lbl {
  font-size: 10.5px; letter-spacing: 0.28em;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.context-strip .cs-final .val {
  color: var(--accent-bright); font-size: 22px;
  font-weight: 500; letter-spacing: 0.02em;
}
.context-strip .cs-final .sub {
  font-size: 12px; color: var(--fg-3);
  line-height: 1.55; margin-top: 4px;
}
.context-strip .cs-plays .plays-rows {
  font-size: 12.5px; line-height: 1.8; color: var(--fg-2);
}
.context-strip .cs-plays .plays-rows div { padding: 1px 0; }
.context-strip .cs-plays .team-bft { color: var(--accent-warm); font-weight: 500; }
.context-strip .cs-plays .team-rld { color: var(--accent-cool); font-weight: 500; }
.context-strip .cs-quote { align-self: stretch; }
.context-strip .cs-quote .captain-quote {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 1024px) {
  .context-strip { grid-template-columns: 1fr; }
}

/* ----- Tab nav (WAI-ARIA Tabs pattern) ----- Four-tab walkthrough below
   the context strip. Same shape across all five entries. Tab controller
   script lives in `src/_includes/captain-decision-tab-script.njk`. */
.entry-tabs { /* no chrome; lives inside .entry-card */ }
.tab-nav {
  display: flex; gap: 0;
  padding: 0 28px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-base);
  overflow-x: auto;
}
.tab-nav button[role="tab"] {
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-3);
  font-family: inherit; font-size: 11.5px;
  letter-spacing: 0.28em;
  padding: 14px 18px;
  cursor: pointer; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tab-nav button[role="tab"]:hover {
  color: var(--accent);
  background: rgba(74, 222, 128, 0.04);
}
.tab-nav button[role="tab"][aria-selected="true"] {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
  background: rgba(74, 222, 128, 0.04);
}
.tab-nav button[role="tab"]:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}
.tab-panels { padding: 24px 28px; }
.tab-panels [role="tabpanel"][hidden] { display: none; }

/* ----- Section blocks inside tab panels ----- */
.section-block { margin-bottom: 28px; }
.section-block h4 {
  font-size: 12px; letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 500;
}
.section-block p {
  color: var(--fg-2);
  font-size: 14px; line-height: 1.75;
  margin-bottom: 10px;
}
.section-block p strong { color: var(--data); font-weight: 500; }
.section-block ul {
  color: var(--fg-2);
  font-size: 13.5px; line-height: 1.7;
  margin: 6px 0 12px 18px;
}
.section-block ul li { margin-bottom: 4px; }

/* ----- Roster lists (THE TEAMS section) ----- */
.roster-list {
  list-style: none; padding: 0; margin: 6px 0 12px;
}
.roster-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--fg-2); line-height: 1.55;
}
.roster-list li:last-child { border-bottom: none; }
.roster-list .roster-faction {
  color: var(--accent-bright); font-weight: 500; letter-spacing: 0.02em;
}
.roster-list .roster-detachment { color: var(--fg-1); }
.roster-list .roster-arch {
  display: block; color: var(--fg-2);
  font-size: 12.5px; margin-top: 2px;
}

/* ----- Captain quotes ----- Default = green Editor-voice; team modifiers
   override the border + background colour so BFT vs RLD voices are
   distinguishable at a glance (R5's dual-captain pattern). */
.captain-quote {
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  background: rgba(74, 222, 128, 0.04);
  margin: 14px 0;
}
.captain-quote .text {
  font-size: 14px; color: var(--fg-1); line-height: 1.7;
}
.captain-quote .attr {
  font-size: 11.5px; letter-spacing: 0.22em;
  color: var(--fg-3); margin-top: 8px;
}
.captain-quote.bft {
  border-left-color: var(--accent-warm);
  background: var(--accent-warm-bg);
}
.captain-quote.bft .attr { color: var(--accent-warm-mute); }
.captain-quote.rld {
  border-left-color: var(--accent-cool);
  background: var(--accent-cool-bg);
}
.captain-quote.rld .attr { color: var(--accent-cool-mute); }

/* ----- Pre-round matrix view ----- Full 8×8 grid. Each cell carries one
   of five matrix-* tint classes (matrix-vbad through matrix-vgood),
   matching the WTC −2…+2 colour scheme. The 8 realized matchups carry
   a .played modifier with a ◆ marker in the cell corner. */
.matrix-view { margin-top: 28px; }
.matrix-grid {
  display: grid;
  grid-template-columns: 90px repeat(8, 1fr);
  gap: 2px;
  margin: 12px 0;
}
.matrix-corner { background: transparent; }
.matrix-col-header,
.matrix-row-header {
  font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--fg-2);
  padding: 6px 3px;
  text-align: center;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  line-height: 1.25;
}
.matrix-col-header .m-faction,
.matrix-row-header .m-faction {
  display: block; font-size: 9.5px;
  color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 2px;
}
.matrix-row-header { text-align: right; padding-right: 8px; }
.matrix-cell {
  padding: 10px 4px;
  text-align: center;
  border: 1px solid var(--border-soft);
  font-size: 13.5px;
}
.matrix-cell.empty {
  background: rgba(255, 255, 255, 0.015);
  color: transparent;
}
.matrix-cell.filled {
  background: var(--bg-2);
  font-weight: 500;
}
.matrix-cell.matrix-vgood {
  background: rgba(74, 222, 128, 0.20);
  border-color: var(--accent);
  color: var(--accent-bright);
  font-weight: 500;
}
.matrix-cell.matrix-good {
  background: rgba(74, 222, 128, 0.10);
  border-color: var(--accent-deep);
  color: var(--accent-bright);
}
.matrix-cell.matrix-even {
  background: var(--bg-2);
  color: var(--fg-1);
}
.matrix-cell.matrix-bad {
  background: rgba(239, 68, 68, 0.06);
  border-color: #7f1d1d;
  color: var(--neg);
}
.matrix-cell.matrix-vbad {
  background: rgba(239, 68, 68, 0.14);
  border-color: #7f1d1d;
  color: var(--neg);
}
.matrix-cell.played {
  position: relative;
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.45);
}
.matrix-cell.played::after {
  content: '\025C6';
  position: absolute;
  top: 2px; right: 4px;
  font-size: 9px;
  color: var(--accent-bright);
  pointer-events: none;
}
.legend-row {
  display: flex; gap: 18px;
  font-size: 11.5px; color: var(--fg-3);
  letter-spacing: 0.12em;
  margin-top: 6px;
  flex-wrap: wrap;
}
.legend-row .swatch {
  display: inline-block; padding: 2px 6px;
  margin-right: 4px;
  border: 1px solid;
}
.legend-row .swatch.matrix-vbad  { background: rgba(239, 68, 68, 0.14); border-color: #7f1d1d; color: var(--neg); }
.legend-row .swatch.matrix-bad   { background: rgba(239, 68, 68, 0.06); border-color: #7f1d1d; color: var(--neg); }
.legend-row .swatch.matrix-even  { background: var(--bg-2); color: var(--fg-1); border-color: var(--border-soft); }
.legend-row .swatch.matrix-good  { background: rgba(74, 222, 128, 0.10); border-color: var(--accent-deep); color: var(--accent-bright); }
.legend-row .swatch.matrix-vgood { background: rgba(74, 222, 128, 0.20); border-color: var(--accent); color: var(--accent-bright); }
.legend-row .empty-note {
  font-size: 10.5px; font-style: italic;
  color: var(--fg-3);
}
@media (max-width: 768px) {
  .matrix-grid {
    grid-template-columns: 70px repeat(8, 1fr);
    font-size: 11px;
  }
  .matrix-cell { padding: 6px 2px; }
  .matrix-col-header,
  .matrix-row-header { font-size: 9.5px; padding: 4px 2px; }
}

/* ----- Outcome / result tables ----- Per-game result table; rendered on
   every entry's "Result + Lessons" tab. The .matrix-good etc. tints are
   reused on the matrix-view column. */
.outcome-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 8px 0;
}
.outcome-table th {
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--fg-3);
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border-base);
  font-weight: 500;
}
.outcome-table td {
  padding: 8px 6px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-soft);
}
.outcome-table tr:last-child td { border-bottom: none; }
.outcome-table .result {
  font-size: 10.5px; letter-spacing: 0.18em;
  padding: 2px 7px;
  border: 1px solid;
}
.outcome-table .result.W { color: var(--accent); border-color: var(--accent-deep); background: rgba(74,222,128,0.08); }
.outcome-table .result.L { color: var(--neg); border-color: #7f1d1d; background: rgba(239,68,68,0.06); }
.outcome-table .result.D { color: var(--interp); border-color: var(--interp-dim); background: rgba(251,191,36,0.06); }
.outcome-table .final-row td {
  border-top: 1px solid var(--accent-deep);
  padding-top: 10px;
  color: var(--accent-bright);
  font-size: 14.5px;
}
.outcome-table .matrix-good { color: var(--accent-bright); }
.outcome-table .matrix-vgood{ color: var(--accent-bright); }
.outcome-table .matrix-even { color: var(--fg-1); }
.outcome-table .matrix-bad  { color: var(--neg); }
.outcome-table .matrix-vbad { color: var(--neg); }

/* ----- Riley's per-game one-liners list ----- */
.one-liners {
  list-style: none;
  padding: 0; margin: 12px 0 0;
}
.one-liners li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--fg-2); line-height: 1.6;
}
.one-liners li:last-child { border-bottom: none; }
.one-liners .pairing {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-right: 6px;
}

/* ----- Sub-section dividers ----- */
.beat-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 18px 0 14px;
}

/* ----- Bottom references section ----- Tags + Sources + Related on every
   entry. Three-column grid; stacks vertically on narrow viewports. */
.entry-references {
  display: grid;
  grid-template-columns: 1fr 2fr 1.5fr;
  gap: 16px;
  padding: 20px 28px;
  border-top: 1px solid var(--border-base);
  background: rgba(74, 222, 128, 0.015);
}
.entry-references .aside-block { margin-bottom: 0; }
@media (max-width: 1024px) {
  .entry-references { grid-template-columns: 1fr; }
}

/* ----- Aside blocks (used inside entry-references) ----- */
.aside-block {
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.aside-block .lbl {
  font-size: 10.5px; letter-spacing: 0.28em;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.aside-block .val {
  color: var(--accent-bright);
  font-size: 20px; font-weight: 500;
}
.aside-block .val.warn { color: var(--warn); }
.aside-block .desc {
  font-size: 12px; color: var(--fg-3);
  margin-top: 4px; line-height: 1.55;
}

/* ----- Tag strip / source list / related list ----- */
.tag-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.tag-strip .tag {
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--accent);
  border: 1px solid var(--accent-deep);
  padding: 3px 9px;
}
.source-list {
  font-size: 13px; line-height: 1.85;
}
.source-list a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.source-list a:hover { border-bottom-color: var(--accent); }
.source-list .role {
  color: var(--fg-3);
  font-size: 11.5px; letter-spacing: 0.1em;
  margin-left: 6px;
}
.related { font-size: 13px; color: var(--fg-2); line-height: 1.7; }
.related a {
  color: var(--accent);
  text-decoration: none;
  display: block;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
}
.related a:last-child { border-bottom: none; }
.related .planned {
  display: block;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.related .planned:last-child { border-bottom: none; }
.related .planned .pending {
  color: var(--warn);
  font-size: 11px; letter-spacing: 0.22em;
  margin-left: 4px;
}

@media (max-width: 768px) {
  .entry-card { margin: 0 22px 28px; }
  .entry-banner { padding: 18px 22px; }
  .entry-banner .eb-stakes { border-left: none; padding-left: 0; text-align: left; }
  .tab-nav { padding: 0 22px; }
  .tab-panels { padding: 20px 22px; }
  .entry-references { padding: 18px 22px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Quantum dashboard — Theory tab (Strength Index bucket view + faction
   signal-breakdown selector). Light-mode-aware via the existing tokens.
   ──────────────────────────────────────────────────────────────────── */

.si-buckets {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.si-bucket {
  background: rgba(74, 222, 128, 0.03);
  border: 1px solid var(--border-base);
  border-radius: 3px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.si-bucket--stronger { border-top: 2px solid var(--accent); }
.si-bucket--average  { border-top: 2px solid var(--fg-2); }
.si-bucket--weaker   { border-top: 2px solid var(--warn); }
.si-bucket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 6px;
}
.si-bucket-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-1);
}
.si-bucket--stronger .si-bucket-label { color: var(--accent); }
.si-bucket--weaker   .si-bucket-label { color: var(--warn); }
.si-bucket-count {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}
.si-bucket-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 12.5px;
  border-bottom: 1px dotted var(--border-soft);
}
.si-bucket-row:last-child { border-bottom: none; }
.si-bucket-row .rk {
  color: var(--fg-3);
  font-size: 11px;
  text-align: right;
  letter-spacing: 0.05em;
}
.si-bucket-row .faction { color: var(--fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-bucket-row .faction a { color: var(--fg-1); text-decoration: none; border-bottom: 1px dotted var(--accent-dim); }
.si-bucket-row .faction a:hover { color: var(--accent-bright); border-bottom-color: var(--accent); }
.si-bucket-row .z {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.si-bucket-empty {
  color: var(--fg-3);
  font-size: 12px;
  font-style: italic;
  padding: 4px 0;
}

/* Faction signal-breakdown widget — Theory tab. Page-unique
   layout (a row per signal with a horizontal diverging bar from
   the centre axis showing z-score sign / magnitude); restyled
   onto the new tokens and design-language conventions
   (quantum-finish, 2026-05-25). Sharp corners, design-system
   pos / neg colouring on the bars (positive = `--pos`,
   negative = `--neg`), mono numerals, the `.cb-bar-cell` track
   reads as a faint dataviz substrate. */
.composite-breakdown-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 var(--space-3);
}
.cb-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cb-select {
  flex: 1;
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-1);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.cb-select:focus { outline: none; border-color: var(--accent); }
.cb-select:focus-visible { box-shadow: var(--focus-ring); }
.composite-breakdown-host {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-base);
}
.cb-faction-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-0);
}
.cb-composite {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.cb-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cb-row {
  display: grid;
  grid-template-columns: 110px 50px 1fr 64px;
  gap: var(--space-2);
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
}
.cb-row:last-child { border-bottom: none; }
.cb-label-cell {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cb-weight {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cb-bar-cell {
  position: relative;
  height: 16px;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.cb-bar-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--fg-4);
}
.cb-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  height: 12px;
  border-radius: var(--radius-1);
}
.cb-bar--pos { left: 50%; background: var(--pos); opacity: 0.85; }
.cb-bar--neg { right: 50%; background: var(--neg); opacity: 0.85; }
.cb-z {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--fg-0);
  text-align: right;
  letter-spacing: 0.02em;
}
.cb-z--nodata {
  color: var(--fg-3);
  font-style: italic;
  font-size: 11px;
}
.cb-row--nodata .cb-bar-cell { opacity: 0.4; }
.cb-footer {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  padding-top: var(--space-1);
}
.cb-empty {
  color: var(--fg-3);
  font-style: italic;
  font-size: 12.5px;
  padding: var(--space-3) 0;
}

@media (max-width: 768px) {
  .si-buckets { grid-template-columns: 1fr; }
  .cb-row { grid-template-columns: 90px 44px 1fr 56px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Quantum dashboard — ELO tab roster search. Sits between the
   leaderboard head and the leaderboard scroll. Light-mode-aware via
   the existing tokens.
   ──────────────────────────────────────────────────────────────────── */
.elo-leaderboard-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 10px;
  align-items: center;
  margin: 10px 0 14px;
  padding: 8px 12px;
  background: rgba(74, 222, 128, 0.03);
  border: 1px solid var(--border-base);
  border-radius: 3px;
}
.elo-search-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  grid-row: 1;
  grid-column: 1;
}
.elo-search-input {
  grid-row: 1;
  grid-column: 2;
  background: var(--bg-1);
  color: var(--fg-1);
  border: 1px solid var(--border-base);
  border-radius: 2px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  min-width: 0;
}
.elo-search-input::placeholder {
  color: var(--fg-3);
  opacity: 0.7;
  font-style: italic;
}
.elo-search-input:focus { outline: none; border-color: var(--border-strong); }
.elo-search-clear {
  grid-row: 1;
  grid-column: 3;
  background: transparent;
  border: 1px solid var(--border-base);
  border-radius: 2px;
  color: var(--fg-2);
  font-family: inherit;
  font-size: 14px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  line-height: 1;
}
.elo-search-clear:hover { color: var(--accent); border-color: var(--border-strong); }
.elo-search-status {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  min-height: 14px;
}
.elo-search-status.hit   { color: var(--fg-2); }
.elo-search-status.empty { color: var(--warn); }

/* ────────────────────────────────────────────────────────────────────────
   Quantum dashboard — Performance tab faction snapshot table.
   Re-rooted onto the design-system `.ia-table` chrome and the
   `.ia-ci-cell` primitive in the quantum-tab-content build
   (2026-05-25). Only the page-unique surround (the head + foot +
   small-N row desaturation + the WR column width tweak) stays.
   ──────────────────────────────────────────────────────────────────── */
.faction-snapshot { margin: 20px 0 8px; }
/* Head / subtitle / foot all centre-align to share a single
   horizontal anchor with the table beneath them, which sits
   centred at 1320px (quantum-snapshot-table-polish fix,
   2026-05-26). The whole snapshot block then reads as one
   coherent centred unit. (pocket-polish fix, 2026-05-26.) */
.faction-snapshot-head {
  margin-bottom: 8px;
  text-align: center;
}
.faction-snapshot-head h3 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--fg-0);
  text-transform: uppercase;
  margin: 0 0 4px 0;
}
.faction-snapshot-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-align: center;
}
/* Cap the snapshot table at the page's 1320px content width and
   centre it within its parent — the rest of Quantum's surfaces
   (status bar, vital signs, ELO leaderboard, etc.) sit at this
   width; the snapshot table was the outlier spanning full
   viewport. (quantum-snapshot-table-polish fix, 2026-05-26.) */
.faction-snapshot-scroll {
  max-width: 1320px;
  margin: 0 auto;
}
/* Centre-align every numeric column inside the snapshot table.
   This brings the eight remaining `.is-right` columns (GAMES,
   TOP 3%, BLOWOUT %, CLOSE %, TOP-CUT SHARE, OVER-REP, MIRROR
   MARGIN, ROUND Δ) in visual line with the REAL WR CI cell that
   the quantum-snapshot-ci-alignment fix centred on 2026-05-26.
   Deliberate one-table convention break — the override is scoped
   to `.faction-snapshot` so other `.ia-table` consumers on the
   site (Strength Index, Performance Pull, the ELO leaderboard,
   etc.) keep their right-aligned numeric columns untouched. The
   `.is-right` classes stay on the snapshot markup as JS hooks /
   future-convention metadata; this page-domain rule just flips
   the text-align. Specificity (0,0,3,0) beats the design-system
   `.ia-table .is-right` (0,0,2,0) cleanly. The FACTION column
   (no `.is-right`) is unaffected and stays left-aligned. */
.faction-snapshot .ia-table .is-right {
  text-align: center;
}
/* Give the Wilson-CI column some breathing room, and centre-align
   the column so the header, the CI track, and the percent / [lo,hi]
   label all share a single column-centre X anchor (quantum-snapshot-
   ci-alignment fix, 2026-05-26). Deliberate one-column exception to
   the table's "numeric columns are right-aligned" convention: REAL
   WR is a data viz (the track spans the column to show the 30-70 WR
   range), not a single right-aligned number, so the header + label
   anchor at the column centre rather than the right edge. The
   selector specificity (0,0,2,1) beats `.ia-table th.is-right`
   (same 0,0,2,1, declared earlier in the file). */
.ia-table th[data-sort="realwr"],
.ia-table td.td-wr {
  min-width: 130px;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
}
/* Small-N rows fade the cell text — the row's `.small-n` class
   pairs with `.ia-ci-cell.is-small-n` in the WR cell for the
   matched, page-domain treatment. */
.ia-table tbody tr.small-n .ia-num,
.ia-table tbody tr.small-n .ia-faction-link { color: var(--fg-3); }

.faction-snapshot-foot {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-align: center;
}
.faction-snapshot-foot .legend {
  display: inline-block;
  padding: 1px 5px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--warn) 40%, var(--border-base));
  color: var(--warn);
  font-size: 9px;
  letter-spacing: 0.14em;
  border-radius: var(--radius-1);
}
.faction-snapshot-foot a {
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-bright) 30%, transparent);
}
.faction-snapshot-foot a:hover { border-bottom-color: var(--accent-bright); }

/* ────────────────────────────────────────────────────────────────────────
   Typed-content step 2 — dispatch body shared styles. The dispatch body
   include lives at src/_includes/dispatch-001-body.njk and is rendered
   both on its standalone page and inside Awakenings; the rules below
   target the wrapper so the prose looks identical in both surfaces.
   ──────────────────────────────────────────────────────────────────── */

/* The body itself reuses .article-body (set elsewhere) for type-scale,
   line-height, paragraph spacing, etc. We add only the dispatch-
   specific touches here. */
.dispatch-body {
  /* Dispatch is centred under whichever hero its parent renders. The
     standalone page wraps it in a max-width hero already; Awakenings
     ships its own .aw-feed-wrap below. The article-body max-width
     (760px, set elsewhere) keeps the reading measure consistent. */
}

/* Shared figure + sign-off rules for Editor-voice long-form content
   — used by both the Awakenings dispatch include and the Protocol
   feature long-reads (e.g. /where-cover-lives.html). The class
   names are aliased rather than renamed so existing surfaces stay
   bytewise unchanged. Both treatments centre the figure inside the
   article-body's 760px reading measure with a token-themed border
   + bg; the caption picks up the muted text colour and tightens its
   own measure for visual rhythm. */
.dispatch-figure,
.article-figure {
  margin: 28px 0;
  text-align: center;
}
.dispatch-figure img,
.article-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border-base);
  border-radius: 3px;
  background: var(--bg-2);
}
.dispatch-figure figcaption,
.article-figure figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  line-height: 1.6;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.dispatch-signoff,
.article-signoff {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  color: var(--interp);
  letter-spacing: 0.06em;
  font-size: 14px;
  font-style: italic;
}

@media (max-width: 700px) {
  .dispatch-figure,
  .article-figure { margin: 20px 0; }
  .dispatch-figure figcaption,
  .article-figure figcaption { font-size: 12px; }
}

/* ===========================================================================
   Redesign Phase 3 — surface-pattern class libraries (2026-05-25)

   The three UI kits in `docs/design-system/ui_kits/` ported to
   shared classes:
     .ia-matrix      — Quantum matchup matrix, diverging heat cells
     .ia-vitals      — Quantum Vital Signs (per-column freshness)
     .ia-dispatch-*  — dispatch list rows (Awakenings feed)
     .aw-*           — Awakenings dispatch reader
     .mx-*           — Matrix leaderboard / movers / captain entry
     + small inline controllers (`.aw-progress`, `.aw-binary-banner`)

   Every rule is written against the REAL new tokens, no alias-
   bridge reliance. Surfaces opt in by adding the class names — the
   legacy page rules continue to render whatever pieces have not yet
   migrated. Editor-led follow-up will sweep the remaining page
   pageStyle blocks onto these primitives over time.
   =========================================================================== */

/* ---------- Matchup matrix — heat-stripped against row baselines ---------- */
.ia-matrix {
  display: grid;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-base);
}
.ia-matrix-head {
  background: var(--bg-2);
  padding: 8px 4px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ia-matrix-head-left {
  text-align: left;
  padding-left: 12px;
}
.ia-matrix-row {
  background: var(--bg-1);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
}
.ia-matrix-cell {
  padding: 10px 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.ia-matrix-cell.is-empty {
  background: var(--bg-1);
  color: var(--fg-3);
}
.ia-matrix-cell.h-neg-3 { background: var(--heat-neg-3); color: #fff; }
.ia-matrix-cell.h-neg-2 { background: var(--heat-neg-2); color: #fff; }
.ia-matrix-cell.h-neg-1 { background: var(--heat-neg-1); color: #fff; }
.ia-matrix-cell.h-zero  { background: var(--heat-zero);  color: var(--fg-1); }
.ia-matrix-cell.h-pos-1 { background: var(--heat-pos-1); color: #fff; }
.ia-matrix-cell.h-pos-2 { background: var(--heat-pos-2); color: var(--accent-on); }
.ia-matrix-cell.h-pos-3 { background: var(--heat-pos-3); color: var(--accent-on); }

/* ---------- Vital Signs — per-column data freshness ---------- */
.ia-vitals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-base);
}
.ia-vital {
  background: var(--bg-2);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: 4px;
}
.ia-vital-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ia-vital-date {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.ia-vital-state {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ia-vital-state.is-fresh { color: var(--pos); }
.ia-vital-state.is-stale { color: var(--warn); }

/* ---------- Dispatch list (Awakenings feed rows) ---------- */
.ia-dispatch-list { display: flex; flex-direction: column; }
.ia-dispatch {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
  text-decoration: none; border-bottom: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.ia-dispatch:first-child { border-top: none; }
.ia-dispatch:hover { background: var(--bg-2); }
.ia-dispatch-stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.ia-dispatch-week { display: block; color: var(--fg-3); }
.ia-dispatch-date {
  display: block;
  color: var(--fg-1);
  margin-top: 2px;
  font-size: 12px;
}
.ia-dispatch-title {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600;
  color: var(--fg-0);
  margin-bottom: 4px; line-height: 1.3;
}
.ia-dispatch:hover .ia-dispatch-title { color: var(--accent-bright); }
.ia-dispatch-dek {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.4; max-width: 60ch;
}
.ia-dispatch-tag {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 8px;
  border: 1px solid var(--border-base);
  white-space: nowrap;
}
.ia-dispatch-tag.is-accent {
  color: var(--accent-bright);
  border-color: color-mix(in oklab, var(--accent-bright) 30%, var(--border-base));
}

/* ---------- Confidence-interval cell (.ia-ci-cell) ----------
   DESIGN-SYSTEM EXTENSION (quantum-tab-content build,
   2026-05-25). The Claude Design bundle did not capture a CI cell,
   but the Wilson 95% CI is a recurring signature element of the
   Archive: it shows up on Quantum's faction snapshot, the
   Performance Pull, the Strength Index, and the CI Explorer. This
   primitive lifts the prior page-local `.wr-ci-*` cell into the
   shared library, rewritten against the real new tokens.

   Layout: a small horizontal track with three layers — a midpoint
   reference rule, the CI as a translucent band, and the point
   estimate as a 2 px vertical marker. Numeric value + bracketed
   [lo, hi] label sits beneath the track.

   Scale convention (set by the caller via inline `left` / `width`
   on the band and `left` on the point): the consuming page maps a
   raw value onto a 0%-100% track and writes the percentages into
   style attributes. The cell itself is scale-agnostic.

   States:
     `.ia-ci-cell`               — default treatment, accent-coloured
     `.ia-ci-cell.is-small-n`    — sample under threshold; band and
                                   point desaturate to fg-2 / fg-3;
                                   pair with an `.ia-chip --provisional`
                                   beside the label for explicit
                                   "treat as provisional" cueing.
     `.ia-ci-cell.is-nodata`     — value unavailable; renders a quiet
                                   em-dash where the cell would be.

   All four themes render correctly via the new tokens. */
.ia-ci-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.ia-ci-cell-track {
  position: relative;
  height: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.ia-ci-cell-ref {
  /* Midpoint reference (the 50% line for win-rate cells; the caller
     can override `left` for non-WR cells). */
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: var(--fg-4);
  opacity: 0.8;
}
.ia-ci-cell-band {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: var(--accent-dim);
  opacity: 0.7;
  border-radius: var(--radius-1);
}
.ia-ci-cell-point {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  margin-left: -1px;
  background: var(--accent-bright);
}
.ia-ci-cell-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ia-ci-cell-bounds {
  color: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.ia-ci-cell.is-small-n .ia-ci-cell-band  { opacity: 0.35; background: var(--fg-3); }
.ia-ci-cell.is-small-n .ia-ci-cell-point { background: var(--fg-2); }
.ia-ci-cell.is-small-n .ia-ci-cell-label { color: var(--fg-3); }
.ia-ci-cell.is-nodata .ia-ci-cell-track  { background: transparent; border-color: transparent; }
.ia-ci-cell.is-nodata .ia-ci-cell-label  { color: var(--fg-3); font-style: italic; }

/* =====================================================================
   AWAKENINGS — editorial reader (port of
   docs/design-system/ui_kits/awakenings/awakenings.css)
   ===================================================================== */

.aw-page {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--bg-0);
}
.aw-main {
  padding: var(--space-10) var(--space-6) var(--space-12);
  max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 720px) 320px;
  gap: var(--space-12);
}
@media (max-width: 1080px) {
  .aw-main { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Dispatch header */
.aw-header {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-base);
  margin-bottom: var(--space-6);
}
.aw-eyebrow {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.aw-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px); font-weight: 700;
  line-height: 1.1; letter-spacing: 0.005em;
  color: var(--fg-0); margin: 0;
  text-wrap: balance;
}
.aw-dek {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.5;
  color: var(--fg-2);
  margin: 0; max-width: 56ch;
  text-wrap: balance;
}
.aw-byline {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: var(--space-3);
}
.aw-byline-name { color: var(--fg-1); }
.aw-byline .sep { color: var(--border-strong); }

/* Prose body — drop-cap on first paragraph, mono inline. */
.aw-prose {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.7;
  color: var(--fg-1);
  max-width: 65ch;
}
.aw-prose > * + * { margin-top: var(--space-5); }
.aw-prose h2 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-0);
  margin-top: var(--space-10); margin-bottom: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}
.aw-prose p { margin: 0; }
.aw-prose p:first-of-type { font-size: 18px; }
.aw-prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 800; font-size: 48px;
  line-height: 0.9; float: left;
  margin: 4px 8px 0 0;
  color: var(--accent-bright);
}
.aw-prose code,
.aw-prose .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em; color: var(--fg-0);
  background: var(--bg-2);
  padding: 1px 6px;
  border: 1px solid var(--border-soft);
}
.aw-prose a {
  color: var(--accent-bright);
  border-bottom: 1px solid color-mix(in oklab, var(--accent-bright) 30%, transparent);
}
.aw-prose strong { color: var(--fg-0); font-weight: 600; }
.aw-prose ul { padding-left: 1.2em; margin: 0; }
.aw-prose ul li + li { margin-top: 8px; }
.aw-prose ul li::marker { color: var(--accent); }

/* Pull-quote — 2px emerald left rule, display face. */
.aw-pull {
  margin: var(--space-8) 0;
  border-left: 2px solid var(--accent);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.3;
  letter-spacing: 0.01em; font-weight: 600;
  color: var(--fg-0);
  text-wrap: balance; max-width: 32ch;
}
.aw-pull em { color: var(--accent-bright); font-style: normal; }

/* Stat callout — boxed CI inline in the prose. */
.aw-callout {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
}
.aw-callout-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.aw-callout-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 32px; font-weight: 500;
  color: var(--fg-0); line-height: 1;
}
.aw-callout-ci {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-bright);
  margin-top: 4px; letter-spacing: 0.04em;
}
.aw-callout-prose {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.5;
  color: var(--fg-2);
}

/* Sticky sidebar — TOC + related dispatches. */
.aw-aside {
  display: flex; flex-direction: column; gap: var(--space-6);
  position: sticky; top: 80px;
  align-self: start; height: max-content;
}
@media (max-width: 1080px) { .aw-aside { position: static; } }
.aw-aside-block {
  padding: var(--space-5);
  background: var(--bg-1);
  border: 1px solid var(--border-base);
}
.aw-aside-eyebrow {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: var(--space-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.aw-related { display: flex; flex-direction: column; gap: var(--space-3); }
.aw-related a {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; border-bottom: 0;
  padding: 6px 0;
  transition: padding var(--dur-fast) var(--ease-out);
}
.aw-related a:hover { padding-left: 4px; }
.aw-related-date {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.06em;
}
.aw-related-title {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: var(--fg-0); line-height: 1.3;
}
.aw-related a:hover .aw-related-title { color: var(--accent-bright); }

/* TOC */
.aw-toc { display: flex; flex-direction: column; gap: 6px; }
.aw-toc a {
  font-family: var(--font-body);
  font-size: 13px; color: var(--fg-2);
  text-decoration: none; border-bottom: 0;
  padding: 4px 0 4px 10px;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.aw-toc a::before {
  content: ''; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; background: var(--fg-4);
}
.aw-toc a:hover, .aw-toc a.is-active { color: var(--accent-bright); }
.aw-toc a.is-active::before {
  background: var(--accent);
  width: 2px; height: 14px;
}

/* Hero binary decoration */
.aw-binary-banner {
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 4px;
  color: var(--fg-4);
  overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
}

/* Reading-progress bar (2px emerald, fixed top, JS sets --p). */
.aw-progress {
  height: 2px;
  background: var(--accent);
  width: var(--p, 0%);
  position: fixed; top: 0; left: 0;
  z-index: 20;
  transition: width 150ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .aw-progress { transition: none; }
}

/* =====================================================================
   MATRIX — leaderboards & retrospectives (port of
   docs/design-system/ui_kits/matrix/matrix.css)
   ===================================================================== */

.mx-page {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--bg-0);
}
.mx-main {
  padding: var(--space-8) var(--space-6) var(--space-12);
  max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-10);
}

/* Provisional banner */
.mx-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-1);
  border: 1px solid var(--border-base);
  border-left: 2px solid var(--warn);
  align-items: center;
}
.mx-banner-tag {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  padding: 4px 10px;
  border: 1px solid color-mix(in oklab, var(--warn) 40%, var(--border-base));
}
.mx-banner-text {
  font-family: var(--font-body);
  font-size: 14px; color: var(--fg-1);
  line-height: 1.4;
}
.mx-banner-text b {
  color: var(--fg-0);
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.mx-banner-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Segmented control — RAW / THEORY-ADJ / PERF-ADJ. */
.mx-seg {
  display: inline-flex;
  gap: 0; padding: 2px;
  background: var(--bg-1);
  border: 1px solid var(--border-base);
}
.mx-seg-btn {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px; cursor: pointer;
  background: transparent; border: none;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.mx-seg-btn:hover { color: var(--fg-0); }
.mx-seg-btn.is-active { background: var(--bg-3); color: var(--accent-bright); }
.mx-seg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Leaderboard table */
.mx-leader-wrap { border: 1px solid var(--border-base); overflow-x: auto; }
.mx-leader {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}
.mx-leader th,
.mx-leader td {
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
}
.mx-leader thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-base);
  cursor: pointer; user-select: none;
  background: var(--bg-1);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}
.mx-leader thead th:hover { color: var(--fg-0); }
.mx-leader thead th.is-sort { color: var(--accent-bright); }
.mx-leader thead th.right, .mx-leader td.right  { text-align: right; }
.mx-leader thead th.center, .mx-leader td.center { text-align: center; }
.mx-leader tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--dur-fast) var(--ease-out);
}
.mx-leader tbody tr:hover { background: var(--bg-2); }
.mx-leader .rank {
  font-family: var(--font-mono);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  width: 50px;
}
.mx-leader .rank.top { color: var(--accent-bright); }
.mx-leader .player-name {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: var(--fg-0);
}
.mx-leader .player-name .country {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.1em; margin-left: 8px;
  text-transform: uppercase;
}
.mx-leader .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-0);
}
.mx-leader .num.dim { color: var(--fg-2); }
.mx-leader .prem.pos { color: var(--pos); }
.mx-leader .prem.neg { color: var(--neg); }
.mx-leader .factions {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}
.mx-leader .factions span + span::before {
  content: ' · ';
  color: var(--fg-4);
}

/* Mover lists — gainers / losers */
.mx-movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 800px) { .mx-movers { grid-template-columns: 1fr; } }
.mx-mover-block {
  background: var(--bg-1);
  border: 1px solid var(--border-base);
  padding: var(--space-4) var(--space-5);
}
.mx-mover-head {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-3);
  display: flex; justify-content: space-between; align-items: baseline;
}
.mx-mover-head .arrow { font-family: var(--font-mono); }
.mx-gainers .mx-mover-head { color: var(--pos); }
.mx-losers  .mx-mover-head { color: var(--neg); }
.mx-mover-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: var(--space-3);
  padding: 6px 0;
  align-items: center;
}
.mx-mover-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mx-mover-name {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
}
.mx-mover-from {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.mx-mover-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.mx-gainers .mx-mover-delta { color: var(--pos); }
.mx-losers  .mx-mover-delta { color: var(--neg); }

/* Skill-premium cards */
.mx-premium {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 800px) { .mx-premium { grid-template-columns: 1fr; } }
.mx-premium-card {
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  padding: var(--space-5);
}
.mx-premium-eyebrow {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: var(--space-3);
}
.mx-premium-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-3);
  padding: 8px 0;
  align-items: center;
  border-top: 1px solid var(--border-soft);
}
.mx-premium-row:first-of-type { border-top: none; }
.mx-premium-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-0);
}
.mx-premium-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}
.mx-premium-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border: 1px solid;
  min-width: 60px;
  text-align: right;
}
.mx-premium-delta.pos {
  color: var(--pos);
  border-color: color-mix(in oklab, var(--pos) 40%, transparent);
}
.mx-premium-delta.neg {
  color: var(--neg);
  border-color: color-mix(in oklab, var(--neg) 40%, transparent);
}

/* Captain entry — three-column retrospective card. */
.mx-captain {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
  background: var(--bg-1);
  border: 1px solid var(--border-base);
  padding: var(--space-6);
}
@media (max-width: 900px) { .mx-captain { grid-template-columns: 1fr; } }
.mx-captain-meta {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.mx-captain-eyebrow {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.mx-captain-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-0);
  margin: 0; line-height: 1.15;
}
.mx-captain-stamp {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.06em;
}
.mx-captain-stamp b {
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-weight: 500;
}
.mx-captain-summary {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.55;
  color: var(--fg-1);
}
.mx-captain-tags {
  display: flex; flex-direction: column; gap: 6px;
}
.mx-captain-tag {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-1);
  letter-spacing: 0.06em;
}
.mx-captain-tag b { color: var(--accent-bright); font-weight: 500; }
.mx-captain-tag .v {
  font-variant-numeric: tabular-nums;
  color: var(--fg-0);
}

/* Search / filter controls */
.mx-controls {
  display: flex; gap: var(--space-4);
  align-items: center; flex-wrap: wrap;
  padding-bottom: var(--space-3);
}
.mx-search {
  display: flex; align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  min-width: 280px;
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-1);
  flex: 1; max-width: 360px;
}
.mx-search input {
  background: transparent; border: none; outline: none;
  color: var(--fg-0);
  font-family: var(--font-body);
  font-size: 14px;
  flex: 1;
}
.mx-search input::placeholder { color: var(--fg-3); }
.mx-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}
.mx-controls-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: auto;
}

/* ==========================================================================
   QUANTUM DASHBOARD REDESIGN — chrome primitives
   Single-commit redesign (Phases 1-4): sidebar tab rail replaces horizontal
   strip, status pills row replaces hero + sticky status, KPI strip surfaces
   editorial headlines per tab. See docs/quantum_dashboard_redesign_design.md
   for the canonical visual target.
   All tokens are design-system; mobile collapse at ≤900px.
   ========================================================================== */

/* Dashboard container — sidebar + main grid. */
.ia-dash {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  background: var(--bg-1);
  border: 1px solid var(--border-base);
  border-top: none;
  min-height: 600px;
}
.ia-dash-main {
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;   /* prevent overflow from wide table content */
}

/* Sidebar tab rail. */
.ia-sidebar {
  border-right: 1px solid var(--border-base);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  width: 200px;
  flex-shrink: 0;
}
.ia-sidebar-header {
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--border-base);
  margin-bottom: 8px;
}
.ia-sidebar-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.ia-sidebar-page {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
  line-height: 1;
}
.ia-sidebar-tablist {
  display: flex;
  flex-direction: column;
}
.ia-sidebar-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 9px 18px;
  color: var(--fg-2);
  border-left: 2px solid transparent;
  cursor: pointer;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  width: 100%;
  display: block;
}
.ia-sidebar-tab:hover { color: var(--fg-1); }
/* Dual-class active state — `.is-active` (design-system) + `.active`
   (legacy tab-controller hook). Both toggle in lockstep. */
.ia-sidebar-tab.is-active,
.ia-sidebar-tab.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(31, 181, 116, 0.04);
}
.ia-sidebar-foot {
  margin-top: auto;
  padding: 14px 18px 0;
  border-top: 1px solid var(--border-base);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ia-sidebar-cube {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 2px;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.ia-sidebar-archivist {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
/* Mobile hamburger trigger (display:none on desktop). */
.ia-sidebar-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  cursor: pointer;
  max-width: 1480px;
  margin: 0 auto 8px;
}

/* Status pills row — replaces the old .ia-status glass surface. */
.ia-status-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.ia-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border-base);
  border-radius: 2px;
}
.ia-status-pill-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.ia-status-pill-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-1);
}
.ia-status-pill-value .delta-up { color: var(--pos); }
.ia-status-pill-value .delta-dn { color: var(--neg); }
/* Coverage freshness chips. */
.ia-status-pill-fresh,
.ia-status-pill-aging,
.ia-status-pill-stale,
.ia-status-pill-awaiting {
  display: inline-block;
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.ia-status-pill-fresh {
  background: rgba(31, 181, 116, 0.15);
  color: var(--accent-bright);
  border: 1px solid var(--accent-dim);
}
.ia-status-pill-aging {
  background: rgba(251, 191, 36, 0.15);
  color: var(--interp);
  border: 1px solid var(--interp-dim);
}
.ia-status-pill-stale {
  background: rgba(232, 112, 76, 0.15);
  color: var(--warn);
  border: 1px solid var(--warn);
}
.ia-status-pill-awaiting {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-3);
  border: 1px solid var(--border-base);
}
/* Meta verdict feature pill — Archivist-violet (--data) treatment. */
.ia-status-pill.is-meta {
  background: rgba(139, 109, 217, 0.07);
  border-color: var(--data-dim);
  flex: 1 1 320px;
  min-width: 0;
}
.ia-status-pill.is-meta .ia-status-pill-label { color: var(--data); }
.ia-status-pill.is-meta .ia-status-pill-value {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* KPI strip — 6 tiles, last tile feature-accented. */
.ia-kpi-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.35fr;
  gap: 8px;
}
/* 5-tile variant — used by the Strength Index tab. The feature column
   sits 5th (still wider) instead of 6th; the base strip's column-
   count is otherwise unchanged. Phase 5-6 redesign follow-up. */
.ia-kpi-strip.is-five-tile {
  grid-template-columns: 1fr 1fr 1fr 1fr 1.35fr;
}
.ia-kpi-tile {
  padding: 9px 11px;
  background: var(--bg-2);
  border-left: 2px solid var(--accent-dim);
  min-width: 0;
}
.ia-kpi-tile.is-feature {
  border-left-color: var(--data);
  background: rgba(139, 109, 217, 0.05);
}
.ia-kpi-tile.is-warn {
  border-left-color: var(--warn);
  background: rgba(232, 112, 76, 0.04);
}
.ia-kpi-tile.is-pos  { border-left-color: var(--pos); }
.ia-kpi-tile.is-late {
  border-left-color: var(--interp);
  background: rgba(251, 191, 36, 0.04);
}
.ia-kpi-tile.is-gem {
  border-left-color: var(--accent-bright);
  background: rgba(57, 255, 122, 0.03);
}
.ia-kpi-tile.is-empty {
  opacity: 0.6;
  font-style: italic;
}
.ia-kpi-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  margin-bottom: 3px;
}
.ia-kpi-value-line {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg-1);
}
.ia-kpi-value-line .v-num {
  font-family: var(--font-mono);
  font-weight: 600;
}
.ia-kpi-value-line .v-num.is-pos    { color: var(--pos); }
.ia-kpi-value-line .v-num.is-neg    { color: var(--warn); }
.ia-kpi-value-line .v-num.is-data   { color: var(--data); }
.ia-kpi-value-line .v-num.is-interp { color: var(--interp); }
.ia-kpi-value-line .v-num.is-gem    { color: var(--accent-bright); }
.ia-kpi-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--fg-2);
  margin-top: 2px;
}

/* Responsive: KPI strip collapses to 3 cols on tablets, 2 on phones. */
@media (max-width: 900px) {
  .ia-dash { grid-template-columns: 1fr; }
  .ia-dash-main { padding: 14px; }
  .ia-kpi-strip,
  .ia-kpi-strip.is-five-tile { grid-template-columns: 1fr 1fr 1fr; }
  .ia-kpi-tile.is-feature { grid-column: span 3; }
  /* Sidebar collapses to an off-canvas drawer. */
  .ia-sidebar {
    position: fixed;
    top: 0; left: -240px;
    width: 240px;
    height: 100vh;
    background: var(--bg-1);
    z-index: 1000;
    border-right: 1px solid var(--border-base);
    transition: left 200ms ease-out;
    overflow-y: auto;
  }
  .ia-sidebar.is-open { left: 0; }
  .ia-sidebar-toggle { display: inline-block; }
}
@media (max-width: 600px) {
  .ia-kpi-strip,
  .ia-kpi-strip.is-five-tile { grid-template-columns: 1fr 1fr; }
  .ia-kpi-tile.is-feature { grid-column: span 2; }
}