/* =====================================================================
   AI Reports — design system
   One stylesheet for every page. The index adds home.css for its own
   layout; nothing else should restyle these patterns. patterns.html shows
   each one live; AGENTS.md says when to use which.

   1. Tokens            5. Report pages
   2. Base              6. Long-form (special reports)
   3. Shared patterns   7. Special-report kit (figures, charts, refs)
   4. Top bar & player  8. About page · utilities · motion
   What we don't do: shadows (except on floating layers), gradients, side
   accent bars, a second brand colour, weights above 500, emoji in the
   interface. The brand green marks the brand word, the subject of a title,
   live state (audio, progress, calendar) and links — nothing decorative.
   ===================================================================== */

/* Self-hosted fonts (OFL), latin subset. Geist is variable 400–600.
   font-display: optional — preloaded, they are almost always ready for the first paint;
   when the network is too slow, that one view keeps the fallback instead of reflowing
   the page when they arrive (a late swap moved text by a line: CLS 0.12). */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: optional; src: url(assets/fonts/web/InstrumentSerif-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: optional; src: url(assets/fonts/web/InstrumentSerif-italic.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(assets/fonts/web/Geist-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: optional; src: url(assets/fonts/web/GeistMono-normal.woff2) format('woff2'); }

/* ===== 1. TOKENS ===== */
:root {
  /* Colour — "Musgo": a moss accent on a green-tinted near-black (chosen Oct 2026).
     Dark is the fallback theme; the system preference decides first. */
  --bg: #0c0f0e;
  --bg-card: #151a18;
  --bg-card-hover: #1d2321;
  --code-bg: #080b0a;
  --primary: #8fbf9a;
  --primary-dim: rgba(143, 191, 154, 0.12);
  --on-primary: #0c0f0e;
  --on-surface: #e9eeeb;
  --on-surface-variant: #adb7b1;
  --muted: #88928d;            /* ≥ 4.5:1 on every surface */
  --border: rgba(136, 146, 141, 0.25);
  --warn: #d29922;
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.45);

  /* Type: three faces, nine fixed sizes, three fluid headline sizes */
  --f-display: 'Instrument Serif', 'DM Serif Display', Georgia, serif;
  --f-body: 'Geist', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --fs-2xs: 11px;   /* eyebrows, mono metadata */
  --fs-xs: 12px;    /* mono UI, captions */
  --fs-sm: 13px;    /* secondary text, tables */
  --fs-base: 15px;  /* UI and summary text */
  --fs-md: 17px;    /* long-form reading */
  --fs-lg: 22px;    /* small display: card titles, brand */
  --fs-xl: 28px;    /* item titles, section heads */
  --fs-2xl: 36px;   /* long-form h2 */
  --fs-3xl: 46px;   /* figures in In Numbers and facts */
  --fs-display-sm: clamp(38px, 6vw, 64px);   /* special h1, today's headline */
  --fs-display: clamp(48px, 8.5vw, 80px);    /* daily h1 */
  --fs-hero: clamp(56px, 10vw, 104px);       /* index masthead */

  /* Shape */
  --r-sm: 4px;      /* inline bits: code, tags, bars */
  --r-md: 8px;      /* controls: buttons, inputs, rows */
  --r-lg: 14px;     /* containers: player, tables, figures, code blocks */
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);       /* entrances */
  --ease-in: cubic-bezier(.4, 0, .6, 1);     /* exits: shorter and quieter than entrances */
  --spring: linear(0, .13 6%, .43 15%, .74 26%, .92 37%, 1.01 49%, 1.02 58%, 1.005 72%, 1);   /* the headline morph */
  --dur-fast: .15s;   /* hover, colour, exits */
  --dur-base: .25s;   /* bars, panels, page swaps */
  --dur-slow: .45s;   /* entrances, the headline morph */

  /* Layout */
  --measure: 720px;
  --measure-wide: 780px;
  --topbar-h: 54px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f4f5f2;
  --bg-card: #ffffff;
  --bg-card-hover: #eaece7;
  --code-bg: #ecede9;
  --primary: #2f6b45;
  --primary-dim: rgba(47, 107, 69, 0.1);
  --on-primary: #ffffff;
  --on-surface: #121714;
  --on-surface-variant: #424944;
  --muted: #5f6762;
  --border: rgba(18, 23, 20, 0.12);
  --warn: #9a6700;
  --shadow-pop: 0 24px 60px -20px rgba(20, 24, 30, 0.25);
  color-scheme: light;
}

/* High contrast, when the system asks for it: stronger secondary text and lines. */
@media (prefers-contrast: more) {
  :root:not([data-theme="light"]) { --muted: #c4ccc7; --on-surface-variant: #dde4e0; --border: rgba(173, 183, 177, 0.5); }
  [data-theme="light"] { --muted: #3c443f; --on-surface-variant: #29302b; --border: rgba(18, 23, 20, 0.4); }
}

/* ===== 2. BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Components set display: flex/grid; the hidden attribute must still win. */
[hidden] { display: none !important; }

html { -webkit-tap-highlight-color: transparent; }
html, body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

strong { color: var(--on-surface); font-weight: 500; }
::selection { background: color-mix(in srgb, var(--primary) 32%, transparent); color: var(--on-surface); }
.table-wrapper, pre, .cal-scroll, .pal-list, .page-toc { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
button { font: inherit; color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 60;
  padding: 8px 12px; border-radius: var(--r-md);
  background: var(--on-surface); color: var(--bg);
  font: 500 var(--fs-sm) var(--f-body); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ===== 3. SHARED PATTERNS ===== */

/* Eyebrow — the small mono label above or beside a title.
   Legacy report markup keeps its own class names; they are aliases here,
   not separate patterns. */
.eyebrow,
.section-label,
.header .category,
.header .date-line,
.special-category,
.special-date,
.player-title,
.stat-label,
.stat-card .label {
  font: 500 var(--fs-2xs)/1.3 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow b,
.eyebrow-accent,
.header .category,
.special-category { color: var(--primary); font-weight: 500; }

/* Buttons. One family: .btn (secondary), .btn-primary, .btn-xs; .link for text-only. */
.btn,
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; min-width: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: transparent; color: var(--on-surface-variant);
  font: 500 var(--fs-xs) var(--f-mono); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.btn:hover,
.theme-toggle:hover { color: var(--on-surface); background: var(--bg-card); }
.btn svg { width: 12px; height: 12px; fill: currentColor; }
.btn-sm, .theme-toggle { height: 34px; min-width: 34px; }
.btn-xs {
  height: auto; min-width: 44px; padding: 3px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-2xs); font-variant-numeric: tabular-nums;
}
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-md);
  background: var(--on-surface); color: var(--bg);
  font: 500 var(--fs-base) var(--f-body); text-decoration: none; cursor: pointer;
}
.btn-primary:hover { opacity: .92; }

.link {
  font: 500 var(--fs-xs) var(--f-mono); color: var(--primary);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The arrow that nudges on hover in "Read →" and pager links. */
.arrow { display: inline-block; transition: transform var(--dur-base) var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(3px); }

/* Language marker for a report written in another language. */
.lang {
  font: 500 var(--fs-2xs) var(--f-mono); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0 4px; margin-left: 6px; vertical-align: 3px; letter-spacing: 0;
}

/* ===== 4. TOP BAR & AUDIO PLAYER ===== */

/* Top bar — appears once the page header scrolls away. */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform var(--dur-fast) var(--ease-in);
}
.topbar.on { transform: none; transition: transform var(--dur-base) var(--ease); }
.topbar-in {
  max-width: 1040px; height: var(--topbar-h); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 12px;
}
.topbar-brand {
  font: 400 var(--fs-lg)/1 var(--f-display); letter-spacing: -.01em;
  color: var(--on-surface); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.topbar-brand em { color: var(--primary); }
.topbar-where {
  flex: 1; min-width: 0; font: var(--fs-xs) var(--f-mono); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--primary); transform-origin: 0 50%; transform: scaleX(0);
}

/* Audio player — the same pattern on the index and in every daily. */
.audio-player {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 1px solid var(--border);
}
.audio-player .play-btn {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--primary); color: var(--on-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease);
}
.audio-player .play-btn:hover { transform: scale(1.06); }
.audio-player .play-btn svg { width: 16px; height: 16px; fill: currentColor; }
.audio-player .play-btn .icon-pause { display: none; }
.audio-player .play-btn .icon-play { transform: translateX(1px); }   /* optical centre of the triangle */
.audio-player.playing .play-btn .icon-play { display: none; }
.audio-player.playing .play-btn .icon-pause { display: block; }
.audio-player .player-body { flex: 1; min-width: 0; }
.audio-player .player-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.audio-player .player-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-player .player-time { font: var(--fs-xs) var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.seek { position: relative; height: 40px; border-radius: var(--r-sm); }
.seek:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; }
.seek input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.wave i { flex: 1; min-width: 1px; height: 18%; border-radius: var(--r-sm); background: color-mix(in srgb, var(--on-surface) 22%, transparent); transition: background var(--dur-fast); }
.wave i.on { background: var(--primary); }

@media (max-width: 640px) {
  .topbar-in { padding: 0 16px; }
  .audio-player { gap: 12px; padding: 14px; }
  .wave { gap: 1px; }
}

/* ===== 5. REPORT PAGES ===== */
.page {
  max-width: var(--measure); margin: 0 auto; padding: 40px 24px 72px;
  overflow-x: clip;   /* contain scrollable tables; no phantom horizontal page scroll */
}
[data-type="special"] .page { max-width: var(--measure-wide); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px;
  font: var(--fs-xs) var(--f-mono); color: var(--muted); text-decoration: none;
  transition: color var(--dur-fast);
}
.back-link:hover { color: var(--on-surface); }

/* Header: dailies use .header, specials .special-header. */
.header,
.special-header {
  position: relative; margin-bottom: 44px; padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.field-mark { display: none; }

.header h1,
.special-header h1 {
  margin-top: 14px;
  font: 400 var(--fs-display)/.95 var(--f-display); letter-spacing: -.025em;
  color: var(--on-surface); text-wrap: balance;
  view-transition-name: headline;
}
.special-header h1 { font-size: var(--fs-display-sm); line-height: 1; }
/* The accent marks the subject of a title: at most three words, never a year or a clause. */
h1 em, .topbar-brand em { font-style: italic; color: var(--primary); }

.header .date-line,
.special-date { margin-top: 18px; color: var(--muted); }
.header .subtitle,
.special-subtitle {
  margin-top: 12px; max-width: 60ch;
  font-size: var(--fs-md); line-height: 1.5; color: var(--on-surface-variant); text-wrap: pretty;
}

.section { margin-bottom: 48px; }
.section-label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
  scroll-margin-top: calc(var(--topbar-h) + 22px);
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Free text inside a daily section (older dailies carry paragraphs and h3s). */
.section :is(p, li) { color: var(--on-surface-variant); line-height: 1.6; }
.section h3 { margin: 24px 0 10px; font: 600 var(--fs-md)/1.35 var(--f-body); color: var(--on-surface); }

/* News item — one story: number, title, summary, sources. */
.news-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px;
  padding: 22px 0; border-bottom: 1px solid var(--border);
}
.news-item > * { grid-column: 2; }
.news-item .num { grid-column: 1; grid-row: 1 / span 4; font: 500 var(--fs-sm)/2 var(--f-mono); color: var(--muted); }
.news-item .title {
  margin-bottom: 8px;
  font: 400 var(--fs-xl)/1.12 var(--f-display); letter-spacing: -.01em; color: var(--on-surface); text-wrap: balance;
}
.news-item .desc { font-size: var(--fs-base); line-height: 1.62; color: var(--on-surface-variant); text-wrap: pretty; }

/* Sources — links to the original and the discussion. */
.sources { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.news-item .sources { margin-top: 12px; }
.follow-item .sources { margin-top: 8px; }
.sources a {
  font: 500 var(--fs-xs) var(--f-mono); color: var(--on-surface-variant);
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.sources a::after { content: " ↗"; color: var(--muted); }
.sources a:hover { color: var(--primary); text-decoration-color: currentColor; }

/* Follow-up — "Why it matters" and "Watch". */
.follow-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base); line-height: 1.6; color: var(--on-surface-variant);
}
.follow-item .bullet { flex-shrink: 0; margin-top: 2px; font: var(--fs-xs) var(--f-mono); color: var(--muted); }

/* In numbers — one band of figures set in the display face. */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 20px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.special-content .stats-grid, [data-type="special"] .stats-grid { margin: 24px 0; }
.stat-card { padding: 20px 0 22px; }
.stat-card .stat-value,
.stat-card .value {
  font: 400 var(--fs-3xl)/1 var(--f-display); letter-spacing: -.02em;
  color: var(--on-surface); font-variant-numeric: tabular-nums;
}
.stat-card .stat-label { margin-top: 10px; color: var(--on-surface-variant); }
.stat-card .label { margin-bottom: 10px; color: var(--on-surface-variant); }
.stat-card .stat-note { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.stat-card .stat-note a { color: var(--on-surface-variant); text-decoration-color: var(--border); text-underline-offset: 3px; }

/* Theme toggle sits in the header; legacy prev/next and progress bar are replaced by report.js. */
.progress-bar, .report-nav { display: none !important; }

/* Section index on wide screens (report.js). */
.page-toc { display: none; }
@media (min-width: 1240px) {
  .page-toc {
    display: block; position: fixed; top: 120px; width: 190px;
    left: max(24px, calc(50% - var(--measure) / 2 - 240px));
    max-height: calc(100vh - 160px); overflow-y: auto;
  }
  [data-type="special"] .page-toc { left: max(24px, calc(50% - var(--measure-wide) / 2 - 240px)); }
}
.page-toc .eyebrow { margin-bottom: 10px; }
.page-toc a {
  display: block; padding: 5px 0; font-size: var(--fs-sm); line-height: 1.35;
  color: var(--muted); text-decoration: none; transition: color var(--dur-fast);
}
.page-toc a:hover { color: var(--on-surface); }
.page-toc a[aria-current="true"] { color: var(--on-surface); font-weight: 500; }

/* Pager — previous and next report of the same kind (report.js). */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 56px 0 8px; padding-top: 20px; border-top: 1px solid var(--border);
}
.pager a { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--on-surface); text-decoration: none; }
.pager a.next { grid-column: 2; text-align: right; }
.pager .t { font: 400 var(--fs-lg)/1.15 var(--f-display); text-wrap: balance; transition: color var(--dur-fast); }
.pager a:hover .t { color: var(--primary); }

.footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding: 24px 0; border-top: 1px solid var(--border);
  font: var(--fs-xs) var(--f-mono); color: var(--muted);
}
.footer-left, .footer-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer a { color: var(--primary); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .page { padding: 28px 16px 56px; }
  .header-top { flex-direction: column; }
  .news-item { grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; }
  .news-item .title { font-size: var(--fs-lg); }
  .pager { grid-template-columns: 1fr; }
  .pager a.next { grid-column: 1; text-align: left; }
  .footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ===== 6. LONG-FORM (special reports and .special-content blocks) ===== */
:is([data-type="special"] .section, .special-content) :is(h1, h2) {
  margin: 8px 0 18px; scroll-margin-top: calc(var(--topbar-h) + 22px);
  font: 400 var(--fs-2xl)/1.08 var(--f-display); letter-spacing: -.015em;
  color: var(--on-surface); text-wrap: balance;
}
:is([data-type="special"] .section, .special-content) h3 {
  margin: 32px 0 12px; font: 500 var(--fs-md)/1.35 var(--f-body); color: var(--on-surface);
}
:is([data-type="special"] .section, .special-content) h4 {
  margin: 24px 0 8px; font: 500 var(--fs-base)/1.4 var(--f-body); color: var(--on-surface);
}
:is([data-type="special"] .section, .special-content) :is(p, li) {
  font-size: var(--fs-md); line-height: 1.7; color: var(--on-surface-variant); text-wrap: pretty;
}
:is([data-type="special"] .section, .special-content) p { margin: 12px 0; hanging-punctuation: first; }

/* Citation — a superscript number linking to the numbered Sources list. */
.cite { margin-left: 1px; font: 500 .68em var(--f-mono); vertical-align: super; line-height: 0; }
.cite a { color: var(--muted); text-decoration: none; }
.cite a:hover { color: var(--primary); }
[id^="source-"] { scroll-margin-top: calc(var(--topbar-h) + 22px); }
[id^="source-"]:target { background: var(--primary-dim); border-radius: var(--r-sm); }
:is([data-type="special"] .section, .special-content) em { font-style: italic; color: var(--on-surface); }
:is([data-type="special"] .section, .special-content) a { color: var(--primary); text-underline-offset: 3px; }
:is([data-type="special"] .section, .special-content) ul { list-style: none; margin: 12px 0; }
:is([data-type="special"] .section, .special-content) ul li { position: relative; padding-left: 20px; margin-bottom: 6px; }
:is([data-type="special"] .section, .special-content) ul li::before {
  content: "–"; position: absolute; left: 4px; color: var(--muted);
}
:is([data-type="special"] .section, .special-content) ol { margin: 12px 0; padding-left: 24px; }
:is([data-type="special"] .section, .special-content) ol li { margin-bottom: 8px; }
:is([data-type="special"] .section, .special-content) ol li::marker { color: var(--muted); }

hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

code {
  padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--on-surface);
  font: var(--fs-sm) var(--f-mono);
}
pre {
  margin: 24px 0; padding: 20px 24px; overflow-x: auto;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  font: var(--fs-sm)/1.55 var(--f-mono); color: var(--on-surface);
}
pre code { padding: 0; border: 0; background: none; color: inherit; font: inherit; }

/* Quote — set in the display face, marked by a hanging quotation mark, not a side bar. */
blockquote {
  position: relative; margin: 28px 0; padding: 2px 0 2px 34px;
  font: 400 var(--fs-lg)/1.32 var(--f-display); color: var(--on-surface);
}
blockquote::before {
  content: "\201C"; position: absolute; left: 0; top: -6px;
  font: 400 var(--fs-3xl)/1 var(--f-display); color: var(--muted);
}
blockquote p, blockquote strong { font: inherit !important; color: inherit !important; margin: 0 !important; }

/* Tables. Wide ones scroll inside .table-wrapper; bare tables wrap to fit. */
.table-wrapper {
  margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.table-wrapper::-webkit-scrollbar { height: 4px; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-sm); }
table { width: 100%; margin: 24px 0; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.table-wrapper table { min-width: 500px; margin: 0; }
thead { position: sticky; top: 0; z-index: 2; }
th {
  padding: 13px 16px; text-align: left; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font: 500 var(--fs-2xs) var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant);
}
td {
  padding: 11px 16px; vertical-align: top; border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--on-surface-variant);
  transition: background var(--dur-fast);
}
td strong { color: var(--on-surface); }
tr:last-child td { border-bottom: none; }
[data-type="special"] td:first-child { font-weight: 500; color: var(--on-surface); }
[data-type="special"] tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--on-surface) 3%, transparent); }
[data-type="special"] tbody tr:hover td { background: var(--bg-card-hover); }

/* ===== 7. SPECIAL-REPORT KIT ===== */

/* References */
.ref-section { margin: 24px 0; }
.ref-section h4 {
  margin: 24px 0 12px;
  font: 500 var(--fs-2xs)/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ref-section ul { list-style: none; }
:is([data-type="special"] .section, .special-content) .ref-section li,
.ref-section li {
  margin-bottom: 8px; padding: 8px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--on-surface-variant);
  transition: border-color var(--dur-fast);
}
.ref-section li::before { content: none !important; }
.ref-section li:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.ref-section a { font: var(--fs-xs) var(--f-mono); color: var(--primary); text-decoration: none; }
.ref-section a:hover { text-decoration: underline; }

/* Chart — a canvas chart (Chart.js) with its caption. */
.chart-container {
  margin: 28px 0; padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.chart-container canvas { max-height: 340px; }
.chart-caption,
figure.diagram figcaption {
  margin-top: 10px; text-align: center;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--on-surface-variant);
}

/* Diagram — every SVG figure. Text sizes go on the <text> (font-size="13"),
   roles and colours come from these classes. See patterns.html. */
figure.diagram { margin: 30px 0; }
figure.diagram svg {
  display: block; width: 100%; height: auto; padding: 10px; font-size: var(--fs-sm);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
figure.diagram text { fill: var(--on-surface); font-family: var(--f-body); }
/* text roles (.label is plain body text, named so the markup says what it is) */
figure.diagram .label { font-weight: 400; }
figure.diagram .title { font-weight: 500; }
figure.diagram .kicker { font-family: var(--f-mono); font-weight: 500; letter-spacing: .1em; fill: var(--on-surface-variant); }
figure.diagram .value { font-family: var(--f-mono); font-weight: 500; }
figure.diagram .data { font-family: var(--f-mono); fill: var(--on-surface-variant); }
figure.diagram .caption { font-style: italic; fill: var(--on-surface-variant); }
/* text colours (after the roles, so they win) */
figure.diagram .muted { fill: var(--on-surface-variant); }
figure.diagram .accent { fill: var(--primary); }
/* shapes */
figure.diagram .box { fill: var(--bg); stroke: var(--border); stroke-width: 1; }
figure.diagram .box-raised { fill: var(--bg-card-hover); stroke: var(--border); stroke-width: 1; }
figure.diagram .box-accent { fill: var(--primary-dim); stroke: var(--primary); stroke-width: 1; }
figure.diagram .pill { fill: var(--primary-dim); stroke: none; }
figure.diagram .outline { fill: none; stroke: var(--border); stroke-width: 1; }
figure.diagram .frame { stroke: var(--border); stroke-width: 1; }   /* keeps its own fill, e.g. a light/dark swatch */
figure.diagram .bar-base { fill: color-mix(in srgb, var(--on-surface-variant) 40%, transparent); }
figure.diagram .bar-muted { fill: var(--muted); }
figure.diagram .bar-accent { fill: var(--primary); }
/* lines */
figure.diagram .edge, figure.diagram .arrow { fill: none; stroke: var(--on-surface-variant); stroke-width: 1.5; }
figure.diagram .flow { fill: none; stroke: var(--primary); stroke-width: 1.8; }
figure.diagram .dash { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 5 4; }
figure.diagram .grid { stroke: var(--border); stroke-width: 1; }
figure.diagram .axis { stroke: var(--on-surface-variant); stroke-width: 1.5; }
figure.diagram .rail { stroke: var(--border); stroke-width: 2; }
figure.diagram .rail-accent { stroke: var(--primary); stroke-width: 2; }
figure.diagram .dot { fill: var(--bg); stroke: var(--on-surface-variant); stroke-width: 2; }
figure.diagram .dot-accent { fill: var(--bg); stroke: var(--primary); stroke-width: 2; }
figure.diagram .marker { fill: var(--primary); }
figure.diagram .marker-muted { fill: var(--on-surface-variant); }

/* ===== 8. ABOUT PAGE · UTILITIES · MOTION ===== */
.about-card {
  padding: 24px 28px; line-height: 1.6;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.about-card p { margin-bottom: 12px; }
.about-links { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.tags-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--on-surface-variant);
  font: var(--fs-xs) var(--f-mono);
}

/* The page swap between index and report: the clicked title becomes the report's h1. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(headline) { animation-duration: var(--dur-slow); animation-timing-function: var(--spring); }
  ::view-transition-group(*) { animation-timing-function: var(--ease); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: a report on paper or PDF — white page, no chrome, sources spelled out. */
@media print {
  :root, [data-theme="light"] {
    --bg: #fff; --bg-card: #fff; --bg-card-hover: #fff; --code-bg: #f4f4f1;
    --on-surface: #111; --on-surface-variant: #333; --muted: #555; --border: #ccc; --primary: #2f6b45;
  }
  .topbar, .page-toc, .pager, .back-link, .theme-toggle, [data-theme-toggle], .audio-player,
  .section:has(> .audio-player), .skip-link { display: none !important; }
  .page { max-width: none; padding: 0; }
  .news-item, .stat-card, figure, table, pre, blockquote { break-inside: avoid; }
  h1, h2, h3, .section-label { break-after: avoid; }
  .sources a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  ol li[id^="source-"] a::after { content: " — " attr(href); font-size: 9pt; }
}