/* ==========================================================================
   RJ Iammarino — Evening Brief (brief.html)
   Self-contained: carries its own copy of the site tokens from style.css so
   the page stands alone. Same rules as the home page: one big name per
   section, space instead of borders, small uppercase mono for metadata only,
   and anything long sits one click away.
   1. Tokens   2. Base   3. Background   4. HUD   5. Shell + rail
   6. Front page   7. Chapters + blocks   8. Tables   9. Charts
   10. Motion   11. Responsive   12. Print
   ========================================================================== */

/* 1. TOKENS --------------------------------------------------------------- */
:root {
  --bg: #07060d;
  --ink: #ecebf7;
  --muted: #9a97b5;
  --faint: #615e80;
  --line: #24223b;
  --panel: rgba(14, 13, 27, 0.72);
  --panel-solid: #0e0d1b;
  --soft: rgba(236, 235, 247, 0.045);

  --cyan: #5ef2ff;
  --violet: #9b7bff;
  --magenta: #ff5fd2;
  --amber: #ffb86b;
  --acid: #c8ff5a;
  --accent: var(--cyan);
  --up: var(--acid);
  --down: var(--magenta);

  --holo: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta), var(--amber), var(--acid), var(--cyan));

  --display: "Syne", "Instrument Sans", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --hud-h: 40px;
  --gutter: 28px;
  --B: 128px;              /* diameter of the largest bubble */
}

:root[data-theme="light"] {
  --bg: #f4f2fb;
  --ink: #131022;
  --muted: #565170;
  --faint: #8f8aa8;
  --line: #d6d1e8;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --soft: rgba(19, 16, 34, 0.045);

  --cyan: #007d99;
  --violet: #5b34e6;
  --magenta: #c2189a;
  --amber: #b05c00;
  --acid: #4b7400;
}

/* 2. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--hud-h) + 28px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--magenta); color: #07060d; }

a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul, ol, dl, dd, dt, figure { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
i, em { font-style: normal; }
b { font-weight: 600; }

kbd {
  font-family: var(--mono); font-size: 10.5px;
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 50;
  padding: 8px 12px; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 12px; text-decoration: none;
}
.skip:focus { top: 52px; }

/* Values: the sign is always printed; colour only repeats it. */
.pos { color: var(--up); }
.neg { color: var(--down); }
.flat, .na { color: var(--muted); }
.blank { color: var(--faint); font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.06em; }
.tk { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }

/* 3. BACKGROUND ----------------------------------------------------------- */
.glow {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(40% 50% at 82% 8%, rgba(155, 123, 255, 0.5), transparent 70%),
    radial-gradient(35% 40% at 96% 30%, rgba(255, 95, 210, 0.32), transparent 70%),
    radial-gradient(30% 35% at 68% 0%, rgba(94, 242, 255, 0.34), transparent 70%);
  -webkit-mask-image: radial-gradient(75% 85% at 88% 4%, #000 0%, rgba(0,0,0,.5) 38%, transparent 72%);
          mask-image: radial-gradient(75% 85% at 88% 4%, #000 0%, rgba(0,0,0,.5) 38%, transparent 72%);
}
:root[data-theme="light"] .glow { opacity: 0.26; }

.gridlines {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(90% 70% at 70% 0%, rgba(0,0,0,.55), transparent 78%);
          mask-image: radial-gradient(90% 70% at 70% 0%, rgba(0,0,0,.55), transparent 78%);
}

/* 4. HUD ------------------------------------------------------------------ */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--hud-h);
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 20px;
  padding: 0 var(--gutter);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hud-back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.hud-back span { color: var(--cyan); transition: transform .2s ease; }
.hud-back:hover { color: var(--ink); }
.hud-back:hover span { transform: translateX(-3px); }
.hud-id { color: var(--ink); white-space: nowrap; }
.hud-id b { color: var(--magenta); font-weight: 500; margin: 0 4px; }
.hud-bar { position: relative; height: 2px; background: var(--line); }
.hud-bar i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--holo); background-size: 200% 100%;
}
.hud-bar b { position: absolute; top: -3px; width: 1px; height: 8px; background: var(--faint); }
.hud-bar b.passed { background: var(--ink); }
.hud-date { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 5. SHELL + RAIL --------------------------------------------------------- */
.shell {
  max-width: 1560px; margin: 0 auto;
  padding: calc(var(--hud-h) + 56px) var(--gutter) 96px;
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 64px; align-items: start;
}
.brief { min-width: 0; }

.rail {
  position: sticky; top: calc(var(--hud-h) + 28px);
  max-height: calc(100vh - var(--hud-h) - 48px); overflow-y: auto;
  display: grid; gap: 22px;
  scrollbar-width: thin;
}
.rail[hidden] { display: none; }
.rail-ctl { display: grid; gap: 8px; }

.play, .expand {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; text-align: left;
  color: var(--ink); background: var(--soft);
  transition: background-color .15s ease, color .15s ease;
  overflow: hidden;
}
.play:hover, .expand:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.play.on { color: var(--bg); background: var(--ink); }
.play-ico { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; flex: none; }
.play.on .play-ico { width: 8px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.play-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.play-bar i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--holo); background-size: 200% 100%; }
.expand { color: var(--muted); }
.expand::before { content: "+"; width: 8px; color: var(--accent); flex: none; }
.expand[aria-pressed="true"]::before { content: "\2212"; }
.play-status { margin: 0; min-height: 1.5em; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint); font-variant-numeric: tabular-nums; }

.rail-list { display: grid; gap: 1px; }
.rail-list a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline;
  padding: 5px 0 5px 10px;
  font-size: 13.5px; line-height: 1.35; text-decoration: none; color: var(--muted);
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
.rail-n { font-family: var(--mono); font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rail-list a:hover { color: var(--ink); }
.rail-list a[aria-current] { color: var(--ink); border-left-color: var(--cyan); }
.rail-list a[aria-current] .rail-n { color: var(--cyan); }
.rail-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint); }
.rail-keys span { margin-right: 6px; }

.brief-wait, .brief-error {
  max-width: 46ch; margin: 16vh auto 0;
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--muted); text-align: center;
}
.brief-error a { color: var(--cyan); white-space: nowrap; }

/* 6. FRONT PAGE ----------------------------------------------------------- */
.eyebrow {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow b { color: var(--cyan); font-weight: 500; }
.headline {
  max-width: 17ch;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 6.1vw, 88px); line-height: 1.0; letter-spacing: -0.035em;
  text-wrap: balance;
}
.lede { max-width: 56ch; margin: 26px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }

.read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.read-card { padding: 20px 22px 22px; background: var(--panel); border-top: 2px solid var(--c, var(--cyan)); }
.read-card.r0 { --c: var(--cyan); }
.read-card.r1 { --c: var(--magenta); }
.read-card.r2 { --c: var(--amber); }
.read-label { margin-bottom: 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.read-card p { font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }

.keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; margin-top: 48px; }
.kn dt { margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.kn dd { display: grid; gap: 2px; }
.kn-val { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kn-chg { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* 7. CHAPTERS + BLOCKS ---------------------------------------------------- */
.chapter { scroll-margin-top: calc(var(--hud-h) + 28px); }
.chapter + .chapter { margin-top: 136px; }

.ch-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: baseline; margin-bottom: 36px; }
.ch-num {
  margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
  background: var(--holo); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ch-name { font-family: var(--display); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.ch-note { grid-column: 2; margin: 10px 0 0; max-width: 70ch; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }

.ch-body { display: grid; gap: 44px; }
.ch-body > * { min-width: 0; }
.ch-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px 64px; align-items: start; }
.ch-main, .ch-side { display: grid; gap: 40px; min-width: 0; align-content: start; }
.ch-side:empty, .ch-main:empty { display: none; }

.block { min-width: 0; }
.block-title { margin-bottom: 14px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.block-note { margin: -6px 0 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--faint); }
.block-foot { margin: 12px 0 0; max-width: 80ch; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing: 0.03em; color: var(--faint); }

.prose p { max-width: 68ch; font-size: 16.5px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); text-wrap: pretty; }
.prose p + p { margin-top: 1em; }

.facts { display: grid; gap: 22px; }
.fact dt { margin-bottom: 2px; font-size: 14px; color: var(--muted); }
.fact dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.fact-val { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fact-detail { font-family: var(--mono); font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact-basis { flex-basis: 100%; font-family: var(--mono); font-size: 10.5px; line-height: 1.55; letter-spacing: 0.03em; color: var(--faint); }

/* One click away */
.more { margin-top: 18px; }
.more summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; width: 9px; color: var(--accent); }
.more[open] summary::before { content: "\2212"; }
.more summary:hover { color: var(--ink); }
.more .tbl-wrap { margin-top: 10px; }
.more:first-child { margin-top: 0; }
/* a run of folded tables with no chart reads as one short list */
.block-table:has(> .more:first-child) + .block-table:has(> .more:first-child) { margin-top: -30px; }

/* What moved and why */
.stories { display: grid; gap: 30px; max-width: 980px; }
.story { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
.story-n { padding-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.story-h { font-family: var(--body); font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.story-h a { text-decoration: none; background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 1px no-repeat; transition: background-size .25s ease; }
.story-h a:hover, .story-h a:focus-visible { background-size: 100% 1px; }
.story-h a::after { content: " \2197"; font-family: var(--mono); font-size: 0.7em; color: var(--cyan); }
.story-pub { margin: 6px 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.story-why { max-width: 70ch; color: var(--muted); }

/* Scenarios */
.scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scen li { padding: 22px; background: var(--panel); }
.scen-n { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--cyan); }
.scen-if { margin-bottom: 10px; font-weight: 600; font-size: 17px; line-height: 1.35; }
.scen-then { color: var(--muted); }

/* Next-close watch */
.watch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.watch-card { padding: 22px; background: var(--panel); min-width: 0; }
.watch-cond { font-family: var(--body); font-size: 18px; font-weight: 600; line-height: 1.3; }
.watch-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 0 18px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.watch-meta span { letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px; }
.watch-levels { display: grid; gap: 7px; margin-bottom: 20px; }
.watch-levels div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.watch-levels dt { font-size: 14px; color: var(--muted); }
.watch-levels dd { display: flex; gap: 12px; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pct-track { position: relative; display: block; height: 4px; background: linear-gradient(to right, color-mix(in srgb, var(--cyan) 55%, transparent), color-mix(in srgb, var(--violet) 55%, transparent), color-mix(in srgb, var(--magenta) 55%, transparent)); }
.pct-mark { position: absolute; top: -6px; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); }
.pct-axis, .meter-axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.pct-text { margin: 6px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Criteria */
.defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; }
.defs dt { margin-bottom: 4px; font-weight: 600; }
.defs dd { color: var(--muted); font-size: 15px; }

/* Footer */
.brief-foot { margin-top: 136px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.brief-foot p { margin: 0; max-width: 90ch; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; letter-spacing: 0.03em; color: var(--muted); }
.brief-foot .foot-meta { color: var(--faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; }
.foot-back a { color: var(--cyan); text-decoration: none; }
.foot-back a:hover { text-decoration: underline; }

/* 8. TABLES --------------------------------------------------------------- */
.tbl-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; }
th, td { padding: 9px 20px 9px 0; text-align: left; vertical-align: baseline; white-space: nowrap; }
th:last-child, td:last-child { padding-right: 0; }
thead th {
  padding-bottom: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line);
}
tbody th { font-weight: 500; }
tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
td { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
td:not(.num) { font-family: var(--body); font-size: 14px; color: var(--muted); }
.num { text-align: right; }
.wrap { white-space: normal; min-width: 15ch; }
tbody th .tk { margin-right: 4px; color: var(--ink); }
tbody th { color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
tr.group th { padding-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); border-top: 0; }
.sort { display: inline-flex; align-items: center; gap: 5px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.sort:hover { color: var(--ink); }
.sort-ind { width: 7px; font-size: 8px; color: var(--cyan); }
th[aria-sort="ascending"] .sort-ind::before { content: "\25B2"; }
th[aria-sort="descending"] .sort-ind::before { content: "\25BC"; }
th[aria-sort="ascending"] .sort, th[aria-sort="descending"] .sort { color: var(--ink); }

/* 9. CHARTS --------------------------------------------------------------- */
.chart { min-width: 0; }
.chart-hint { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--faint); }
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); }
.chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.chart-key .key-note { color: var(--faint); }

/* bars */
.block-table { container-type: inline-size; }
.bars.multi { display: grid; gap: 28px; }
.bar-row { min-height: 34px; }
.bars.lead .bar-row { min-height: 48px; }
/* With room, the series sit side by side and share one column of names. */
@container (min-width: 540px) {
  .bars.multi { grid-template-columns: minmax(0, 2.3fr) repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 30px; }
  .bars.multi .bars-panel + .bars-panel .bar-label { display: none; }
  .bars.multi .bars-panel + .bars-panel .bar-row { grid-template-columns: minmax(30px, 1fr) minmax(7.5ch, auto); }
  .bars.multi .bars-panel:first-child .bars-title { padding-left: calc(var(--lw, 9.5em) + 14px); }
}
.bars-title { margin: 0 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.bar-row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, var(--lw, 12.5em)) minmax(36px, 1fr) minmax(7.5ch, auto); align-items: center; column-gap: 14px;
  padding: 6px 0;
}
.bars.multi .bar-row { --lw: 9.5em; }
.bar-label { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.25; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-lead { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-track { position: relative; display: block; height: 10px; background: var(--soft); }
.bar-fill { position: absolute; top: 0; bottom: 0; transform-origin: left center; }
.bar-fill.pos { background: var(--up); }
.bar-fill.neg { background: var(--down); transform-origin: right center; }
.bar-fill.plain { background: var(--cyan); }
.bar-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--faint); }
.bar-val { font-family: var(--mono); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-extra {
  position: absolute; left: 0; bottom: calc(100% - 4px); z-index: 4;
  max-width: 100%; padding: 5px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; color: var(--ink);
  background: var(--panel-solid); box-shadow: 0 0 0 1px var(--line), 0 10px 30px -12px #000;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.bar-row[tabindex]:hover, .bar-row[tabindex]:focus-visible { background: var(--soft); outline-offset: 0; }
.bar-row:hover .bar-extra, .bar-row:focus-visible .bar-extra { opacity: 1; }

/* curve */
.curve-plot svg { display: block; overflow: visible; }
.c-base { stroke: var(--line); stroke-width: 1; }
.c-drop { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.c-line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.c-stop-a { stop-color: var(--cyan); stop-opacity: 0.22; }
.c-stop-b { stop-color: var(--cyan); stop-opacity: 0; }
.c-dot { fill: var(--bg); stroke: var(--cyan); stroke-width: 2; }
.c-val { fill: var(--ink); font-family: var(--mono); font-size: 12px; }
.c-val.na { fill: var(--faint); }
.c-lab { fill: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; }
.c-chg { font-family: var(--mono); font-size: 11px; }
.c-chg.pos { fill: var(--up); }
.c-chg.neg { fill: var(--down); }
.c-chg.flat { fill: var(--muted); }

/* implied versus realized */
.pair-row { display: grid; grid-template-columns: 11.5em minmax(60px, 1fr) auto; align-items: center; gap: 6px 18px; padding: 9px 0; }
.pair-label { display: grid; line-height: 1.3; }
.pair-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pair-track { position: relative; display: block; height: 18px; }
.pair-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--violet) 26%, transparent); border-left: 1px solid var(--violet); border-right: 1px solid var(--violet); }
.pair-real { position: absolute; top: 6px; height: 6px; transform-origin: left center; }
.pair-real.pos { background: var(--up); }
.pair-real.neg { background: var(--down); transform-origin: right center; }
.pair-zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--faint); }
.pair-vals { display: grid; grid-template-columns: repeat(3, auto); gap: 14px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pair-vals em { display: block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.key-band { width: 16px; height: 10px; background: color-mix(in srgb, var(--violet) 26%, transparent); border-left: 1px solid var(--violet); border-right: 1px solid var(--violet); }
.key-real { width: 16px; height: 4px; background: linear-gradient(to right, var(--down) 50%, var(--up) 50%); }

/* columns */
.cols-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.cols-plot { display: flex; gap: 4px; }
.col { flex: 1 0 50px; display: grid; gap: 8px; justify-items: center; min-width: 0; }
.col-box { position: relative; width: 100%; height: 190px; }
.col-area { position: absolute; inset: 0; }
.col-zero { position: absolute; left: -2px; right: -2px; height: 1px; background: var(--faint); }
.col-bar { position: absolute; left: 24%; right: 24%; transform-origin: center bottom; }
.col-bar.pos { background: var(--up); }
.col-bar.neg { background: var(--down); transform-origin: center top; }
.col-val { position: absolute; left: -6px; right: -6px; text-align: center; font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-name { font-size: 11.5px; }

/* bubbles */
.bub-wrap { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 18px; }
.bub { display: grid; justify-items: center; gap: 2px; min-width: 62px; text-align: center; }
.bub-stage { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; }
.bub-dot { display: block; width: max(7px, calc(var(--d) * var(--B))); height: max(7px, calc(var(--d) * var(--B))); border-radius: 50%; }
.bub-dot.cat0 { background: color-mix(in srgb, var(--cyan) 30%, transparent); box-shadow: inset 0 0 0 1.5px var(--cyan); }
.bub-dot.cat1 { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--violet) 55%, transparent) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1.5px var(--violet); }
.bub-dot.catx { box-shadow: inset 0 0 0 1.5px var(--faint); }
.bub .tk { font-size: 12.5px; }
.bub-v { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bub-s { font-family: var(--mono); font-size: 9.5px; color: var(--faint); white-space: nowrap; }
.key-dot { width: 11px; height: 11px; border-radius: 50%; }
.key-dot.cat0 { background: color-mix(in srgb, var(--cyan) 30%, transparent); box-shadow: inset 0 0 0 1.5px var(--cyan); }
.key-dot.cat1 { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--violet) 55%, transparent) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--violet); }

/* proportion + meters */
.props, .meters { display: grid; gap: 26px; }
.prop-label, .meter-head { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.meter-head b { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.prop-bar { display: flex; gap: 3px; height: 14px; transform-origin: left center; }
.prop-bar.none { background: var(--soft); }
.prop-a { background: var(--up); min-width: 2px; }
.prop-b { min-width: 2px; background: repeating-linear-gradient(45deg, var(--down) 0 3px, color-mix(in srgb, var(--down) 45%, transparent) 3px 6px); }
.prop-ends { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; font-size: 14px; }
.prop-ends em { color: var(--muted); }
.prop-ends b { font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter-track { position: relative; display: block; height: 10px; background: var(--soft); }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); transform-origin: left center; }
.meter-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--faint); }

/* gauge */
.gauge { max-width: 380px; }
.gauge-svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-track { fill: none; stroke: var(--line); stroke-width: 12; }
.g-val { fill: none; stroke: var(--amber); stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 0; }
.g-dot { fill: var(--bg); stroke: var(--ink); stroke-width: 3; }
.g-axis { fill: var(--faint); font-family: var(--mono); font-size: 10px; }
.g-num { fill: var(--ink); font-family: var(--display); font-weight: 700; font-size: 54px; letter-spacing: -0.03em; }
.g-state { fill: var(--amber); font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
line.g-h { stroke-width: 2.5; }
text.g-hn { font-family: var(--mono); font-size: 9.5px; }
line.g-h0 { stroke: var(--cyan); }    text.g-h0 { fill: var(--cyan); }
line.g-h1 { stroke: var(--violet); }  text.g-h1 { fill: var(--violet); }
line.g-h2 { stroke: var(--magenta); } text.g-h2 { fill: var(--magenta); }
.gauge-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.gauge-key span { display: inline-flex; align-items: center; gap: 6px; }
.gauge-key-h { flex-basis: 100%; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.gauge-key b { color: var(--ink); }
.key-tick { width: 3px; height: 11px; }
.key-tick.g-h0 { background: var(--cyan); }
.key-tick.g-h1 { background: var(--violet); }
.key-tick.g-h2 { background: var(--magenta); }

/* earnings calendar */
.cal { display: grid; grid-template-columns: repeat(var(--days, 3), minmax(0, 1fr)); gap: 10px 28px; }
.cal-day { display: grid; gap: 1px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cal-day b { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; }
.cal-day span { font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: 0.08em; }
.cal-day em { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cal-lane { grid-column: 1 / -1; margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cal-cell { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-width: 0; }
.cal-none { color: var(--faint); }
.chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 9px; background: var(--soft); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.chip .tk { color: var(--ink); }
.chip.pos span { color: var(--up); }
.chip.neg span { color: var(--down); }

/* release timeline */
.tl-plot { position: relative; height: 164px; margin: 0 18px; }
.tl-line { position: absolute; left: -18px; right: -18px; top: 100px; height: 1px; background: var(--faint); }
.tl-stack { position: absolute; display: flex; gap: 3px; transform: translateX(-50%); }
.tl-stack.rel { bottom: 70px; flex-direction: column-reverse; }
.tl-stack.fed { top: 107px; flex-direction: column; }
.tl-dot { display: block; width: 10px; height: 10px; }
.rel .tl-dot { background: var(--cyan); }
.fed .tl-dot { border-radius: 50%; background: var(--violet); }
.tl-tick { position: absolute; top: 97px; width: 1px; height: 7px; background: var(--faint); }
.tl-tick.odd { top: 99px; height: 3px; }
.tl-tick em { position: absolute; top: 44px; left: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--faint); white-space: nowrap; }
.key-sq { width: 10px; height: 10px; background: var(--cyan); }
.key-ci { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); }

/* 10. MOTION -------------------------------------------------------------- */
/* Marks grow once when their chapter comes into view. */
.bar-fill, .pair-real, .meter-fill, .prop-bar { transition: transform .9s cubic-bezier(.2, .75, .2, 1); }
.col-bar { transition: transform .8s cubic-bezier(.2, .75, .2, 1); }
.bub-dot { transition: transform .7s cubic-bezier(.2, .75, .2, 1); }
.c-line, .g-val { transition: stroke-dashoffset 1.2s cubic-bezier(.3, .6, .2, 1); }
.pair-band, .c-area, .c-dot, .g-dot, .tl-stack { transition: opacity .8s ease .2s; }

.js .chapter:not(.in) .bar-fill,
.js .chapter:not(.in) .pair-real,
.js .chapter:not(.in) .meter-fill,
.js .chapter:not(.in) .prop-bar { transform: scaleX(0); }
.js .chapter:not(.in) .col-bar { transform: scaleY(0); }
.js .chapter:not(.in) .bub-dot { transform: scale(0); }
.js .chapter:not(.in) .c-line,
.js .chapter:not(.in) .g-val { stroke-dashoffset: 1; }
.js .chapter:not(.in) .pair-band,
.js .chapter:not(.in) .c-area,
.js .chapter:not(.in) .c-dot,
.js .chapter:not(.in) .g-dot,
.js .chapter:not(.in) .tl-stack { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* 11. RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1179px) {
  .shell { gap: 44px; grid-template-columns: 188px minmax(0, 1fr); }
  .ch-split { grid-template-columns: minmax(0, 1fr); }
  .keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .defs { gap: 20px 32px; }
}

/* Below this the rail becomes a pill bar under the HUD. */
@media (max-width: 999px) {
  :root { --gutter: 20px; }
  .shell { display: block; padding-top: calc(var(--hud-h) + 46px + 36px); }
  .rail {
    position: fixed; top: var(--hud-h); left: 0; right: 0; z-index: 25;
    display: flex; align-items: center; gap: 8px;
    max-height: none; height: 46px; padding: 0 var(--gutter); overflow: hidden;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .rail-ctl { display: flex; gap: 6px; flex: none; }
  .play, .expand { width: 34px; height: 30px; padding: 0; justify-content: center; }
  .play-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .expand { font-size: 0; }
  .expand::before { font-size: 15px; width: auto; }
  .play-status, .rail-keys { display: none; }
  .rail-list { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0 2px; position: relative; }
  .rail-list::-webkit-scrollbar { display: none; }
  .rail-list li { flex: none; }
  .rail-list a { display: inline-flex; gap: 6px; padding: 6px 11px; border: 0; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
  .rail-list a[aria-current] { background: var(--ink); color: var(--bg); }
  .rail-list a[aria-current] .rail-n { color: var(--bg); }
  .chapter { scroll-margin-top: calc(var(--hud-h) + 46px + 22px); }
  html { scroll-padding-top: calc(var(--hud-h) + 46px + 22px); }
  .chapter + .chapter { margin-top: 104px; }
  .brief-foot { margin-top: 104px; }
}

@media (max-width: 820px) {
  .read, .scen, .watch { grid-template-columns: minmax(0, 1fr); }
  .read { margin-top: 40px; }
  .defs { grid-template-columns: minmax(0, 1fr); }
  .pair-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pair-track { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --B: 92px; }
  .hud { grid-template-columns: auto 1fr auto; gap: 14px; font-size: 10px; letter-spacing: 0.1em; }
  .hud-id { display: none; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 40px; }
  .ch-head { grid-template-columns: minmax(0, 1fr); row-gap: 8px; margin-bottom: 28px; }
  .ch-note { grid-column: 1; }
  .ch-body, .ch-main, .ch-side, .ch-split { gap: 36px; }
  .bar-row { --lw: 8.6em; column-gap: 10px; }
  .bars.multi .bar-row { --lw: 8.6em; }
  .bar-label { font-size: 13px; }
  .bar-val, td { font-size: 12px; }
  .pair-row { grid-template-columns: minmax(0, 1fr); }
  .pair-track { grid-row: auto; }
  .pair-vals { justify-content: start; }
  .cal { gap: 8px 12px; }
  .cal-day b { font-size: 16px; }
  .chip { flex-direction: column; gap: 0; padding: 4px 7px; font-size: 10.5px; }
  .tl-tick.minor em { display: none; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-n { padding: 0 0 4px; }
  .scen li, .watch-card, .read-card { padding: 18px; }
  .prose p { font-size: 16px; }
}

/* 12. PRINT --------------------------------------------------------------- */
@media print {
  :root, :root[data-theme="light"] {
    --bg: #fff; --ink: #000; --muted: #333; --faint: #666; --line: #bbb;
    --panel: transparent; --panel-solid: #fff; --soft: #eee;
    --cyan: #000; --violet: #444; --magenta: #000; --amber: #000; --acid: #000;
    --up: #000; --down: #000; --B: 80px;
  }
  @page { margin: 14mm; }
  html, body { background: #fff; color: #000; font-size: 10.5pt; }
  .glow, .gridlines, .hud, .rail, .skip, .chart-hint, .foot-back, .bar-extra, .more summary { display: none !important; }
  .shell { display: block; max-width: none; padding: 0; }
  .headline { font-size: 30pt; max-width: none; }
  .ch-num { color: #000; background: none; -webkit-text-fill-color: #000; }
  .chapter + .chapter, .brief-foot { margin-top: 28pt; }
  .chapter, .block, .watch-card, .scen li, .story, tr { break-inside: avoid; }
  .ch-head { break-after: avoid; }
  .read-card, .scen li, .watch-card { border: 1px solid #bbb; background: none; }
  .read, .scen, .watch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keys { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ch-split { grid-template-columns: minmax(0, 1fr); }
  .tbl-wrap, .cols-scroll { overflow: visible; }
  th, td { white-space: normal; padding: 4pt 10pt 4pt 0; }
  .more { margin-top: 10pt; }
  details.more::details-content { content-visibility: visible; display: block; }
  .bar-fill.neg, .col-bar.neg, .pair-real.neg { background: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 4px); outline: 1px solid #000; }
  .bar-fill, .pair-real, .meter-fill, .prop-bar, .col-bar, .bub-dot { transform: none !important; }
  .c-line, .g-val { stroke-dashoffset: 0 !important; }
  .pair-band, .c-area, .c-dot, .g-dot, .tl-stack { opacity: 1 !important; }
  .story-h a::after { content: ""; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}