/* =========================================================================
   The Last Trade of Allbirds — design tokens + scene scaffolding
   Plan sections mapped: §4 (Visual Design System), §0 (Performance), §1 (Rules)
   ========================================================================= */

:root {
  /* Backgrounds ---------------------------------------------------- */
  --bg-paper:        #FBFAF7;
  --bg-paper-warm:   #F8F4EC;
  --bg-cream:        #F3EBDA;
  --bg-slate:        #1A1F2A;
  --bg-black:        #0B0B0E;
  --bg-closing:      #FAF7F0;
  --bg-white:        #FFFFFF;

  /* Ink ------------------------------------------------------------ */
  --ink:      #1A1A1A;
  --ink-60:   #5C5C5C;
  --ink-40:   #9E9E9E;
  --ink-20:   #D9D9D9;

  /* Meaning -------------------------------------------------------- */
  --accent:    #0E7C7B;
  --bull:      #3A8E5C;
  --bear:      #B23A48;
  --marginal:  #D9A441;
  --grey-context: #8A8A8A;
  --highlight: #FFF4D6;
  --crimson-wash: #F3E0DD;

  /* Typography ----------------------------------------------------- */
  --serif: "Source Serif 4", "GT Super", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion --------------------------------------------------------- */
  --dur-flash: 200ms;
  --dur-micro: 300ms;
  --dur-std:   600ms;
  --dur-grand: 1200ms;
  --dur-beat:  800ms;

  /* Layout --------------------------------------------------------- */
  --scene-max: 1120px;
  --prose-max: 640px;

  /* Plan §4 polish — tabular-nums cascaded globally so every number,
     including serif display figures, aligns across scenes. */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur-beat) ease;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

button { font: inherit; cursor: pointer; }

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sans { font-family: var(--sans); }
.serif { font-family: var(--serif); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Progress chrome (plan §4 — "Navigation chrome")
   ========================================================================= */
/* =========================================================================
   Top chrome stack (plan §orient-first + minimalist synthesis)
   Stack order, top→down:
     1. .ai-disclosure    (legal disclosure, teal badge + links)       ~32px
     2. .pinned-thesis    (14-word thesis, always visible)              ~24px
     3. .act-bar          (5-act navigation, click to jump)             ~34px
     4. .progress-bar     (2px teal fill, sits below everything)         2px
   ========================================================================= */

/* AI-generated disclosure strip (persistent, sits above progress bar) */
.ai-disclosure {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 102;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(11, 11, 14, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  color: #FBFAF7;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  pointer-events: auto;
}
.ai-disclosure__badge {
  display: inline-block;
  padding: 2px 7px;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.ai-disclosure__text { color: rgba(255,255,255,0.86); }
.ai-disclosure__text a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,0.45);
}
.ai-disclosure__text a:hover { text-decoration-color: #FFFFFF; }
@media (max-width: 600px) {
  .ai-disclosure { font-size: 10.5px; padding: 5px 10px; gap: 6px; }
  .ai-disclosure__badge { font-size: 9px; letter-spacing: 0.1em; }
}

/* Pinned one-line thesis — persistent advance organizer */
.pinned-thesis {
  position: fixed; top: 32px; left: 0; right: 0;
  z-index: 101;
  display: flex; align-items: center; justify-content: center;
  padding: 4px 18px;
  background: var(--bg-paper-warm);
  border-bottom: 1px solid var(--ink-20);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
}
.pinned-thesis__text { max-width: 860px; }
@media (max-width: 600px) {
  .pinned-thesis { font-size: 12px; padding: 3px 10px; }
}

/* Five-act navigation bar */
.act-bar {
  position: fixed; top: 60px; left: 0; right: 0;
  z-index: 101;
  display: flex; align-items: stretch; justify-content: center;
  gap: 0;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--ink-20);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
}
.act-bar__act {
  flex: 0 1 auto;
  padding: 9px 18px 8px;
  text-decoration: none;
  color: var(--ink-40);
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.act-bar__act:hover { color: var(--ink); }
.act-bar__act.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.act-bar__act.is-past { color: var(--ink-60); }
.act-bar__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
}
.act-bar__act.is-past .act-bar__num { color: var(--ink-40); }
.act-bar__act:not(.is-active):not(.is-past) .act-bar__num { color: var(--ink-20); }
.act-bar__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .act-bar { font-size: 10px; top: 86px; }
  .act-bar__act { padding: 6px 8px; gap: 4px; }
  .act-bar__label { display: none; }
  .act-bar__num { font-size: 11px; }
  .act-bar__act::after {
    content: attr(data-act);
    display: none;
  }
}

.progress-bar {
  position: fixed; top: 94px; left: 0;
  width: 100%; height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
@media (max-width: 600px) {
  .progress-bar { top: 112px; }
}
.progress-bar__fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 80ms linear;
}
.progress-bar__ticks {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  pointer-events: none;
}
.progress-bar__tick {
  border-left: 1px solid rgba(0,0,0,0.12);
  height: 100%;
}
.progress-bar__tick:first-child { border-left: 0; }

/* Persistent BIRD ticker (plan §4) */
.bird-ticker {
  position: fixed;
  top: 108px; right: 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ink-20);
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 90;
  display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-micro), background-color var(--dur-micro);
}
.bird-ticker.dark {
  background: rgba(26, 31, 42, 0.85);
  color: #F0F0F0;
  border-color: rgba(255,255,255,0.2);
}
.bird-ticker__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-40);
  transition: background-color var(--dur-micro);
}
.bird-ticker.up  .bird-ticker__dot { background: var(--bull); }
.bird-ticker.down .bird-ticker__dot { background: var(--bear); }

/* Skip intro */
.skip-intro {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans); font-size: 13px;
  background: var(--ink); color: var(--bg-paper);
  padding: 10px 18px; border-radius: 999px;
  border: 0;
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-std);
}
.skip-intro.visible { opacity: 1; pointer-events: auto; }

/* =========================================================================
   Scene scaffolding
   ========================================================================= */
.scene {
  position: relative;
  width: 100%;
  padding: 0;
}
.scene__inner {
  max-width: var(--scene-max);
  margin: 0 auto;
  padding: 10vh 24px;
}
.scene__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 12px 0;
}
.scene__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 18px 0;
}
.scene__dek {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-60);
  margin: 0 0 32px 0;
  max-width: var(--prose-max);
}
.scene__prose {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.7;
  max-width: var(--prose-max);
  margin: 0 0 24px 0;
}
.scene__prose em { font-style: italic; }
.display-number {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(64px, 11vw, 120px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Sticky graphic pattern (plan §5 — The Pudding sticky pattern) */
.scene--sticky { position: relative; }
.scene--sticky .sticky-wrap {
  position: sticky;
  /* Round 12 (Scene-9 fix): top offset must clear the 94px top-chrome stack
     (ai-disclosure 32px + pinned-thesis 24px + act-bar 34px + progress-bar
     2px) so the sticky graphic's own labels and overlays are not hidden
     behind the fixed header. Mobile chrome is ~112px. */
  top: 94px;
  /* D4 (Round 3): older iOS Safari treats an unguarded `100dvh` override as
     a reset to the URL-bar-hidden viewport, clipping sticky content. Gate
     the `dvh` value behind an @supports query so only browsers that honor
     the dynamic unit pick it up. */
  height: calc(100vh - 94px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .scene--sticky .sticky-wrap { height: calc(100dvh - 94px); }
}
@media (max-width: 600px) {
  .scene--sticky .sticky-wrap { top: 112px; height: calc(100vh - 112px); }
  @supports (height: 100dvh) {
    .scene--sticky .sticky-wrap { height: calc(100dvh - 112px); }
  }
}
.scene--sticky .steps {
  position: relative;
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: 0 24px;
}
.scene--sticky .step {
  min-height: 80vh;
  display: flex;
  align-items: center;
  /* D5 (Round 4, Bug 8): center the step card horizontally inside the
     prose-max column. Without this, the card's 420px flex item defaulted
     to justify-content: flex-start, pinning it to the left edge of the
     640px column. On wide viewports the card therefore sat ~86px left of
     viewport center — the "slightly to the left" bias the user flagged.
     Centering places the card over the sticky graphic's visual center,
     where the reader's eye is already anchored. */
  justify-content: center;
  padding: 24px 0;
}
@supports (min-height: 80dvh) {
  .scene--sticky .step { min-height: 80dvh; }
}
.scene--sticky .step__card {
  background: rgba(251,250,247,0.92);
  border: 1px solid var(--ink-20);
  padding: 18px 20px;
  border-radius: 6px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  backdrop-filter: blur(4px);
  max-width: 420px;
  opacity: 0.4;
  transition: opacity var(--dur-std);
}
.scene--sticky .step.is-active .step__card { opacity: 1; }
.scene--sticky .step__card h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: var(--ink-60);
}

/* D1 (Round 3): On dark-background scenes, the cream step card reads as a
   bright yellow overlay and the inherited #F2F2F2 body copy becomes invisible
   against it. Switch to a dark slate panel with light text on scenes
   data-bg="black" (scene 1) and data-bg="slate" (scene 12). */
body[data-bg="black"] .scene--sticky .step__card,
body[data-bg="slate"] .scene--sticky .step__card {
  background: rgba(26, 31, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #F2F2F2;
}
body[data-bg="black"] .scene--sticky .step__card h3,
body[data-bg="slate"] .scene--sticky .step__card h3 {
  color: rgba(255, 255, 255, 0.65);
}

/* Background progression (plan §4) */
body[data-bg="black"]   { background: var(--bg-black);    color: #F2F2F2; }
body[data-bg="paper-warm"] { background: var(--bg-paper-warm); color: var(--ink); }
body[data-bg="cream"]   { background: var(--bg-cream);   color: var(--ink); }
body[data-bg="white"]   { background: var(--bg-white);   color: var(--ink); }
body[data-bg="slate"]   { background: var(--bg-slate);   color: #F2F2F2; }
body[data-bg="paper"]   { background: var(--bg-paper);   color: var(--ink); }
body[data-bg="closing"] { background: var(--bg-closing); color: var(--ink); }
body[data-bg="crimson-wash"] { background: var(--crimson-wash); color: var(--ink); }

body[data-bg="black"] .scene__eyebrow,
body[data-bg="slate"] .scene__eyebrow { color: rgba(255,255,255,0.6); }
body[data-bg="black"] .scene__dek,
body[data-bg="slate"] .scene__dek { color: rgba(255,255,255,0.75); }

/* M2 (Round 3): the cold-open clock sits at the visual center and narrow
   viewports collide the BIRD ticker with the "April 15, 2026 · 9:29 AM ET"
   dateline. The ticker is also redundant on scene 1 — $2.49 is already
   printed on the headline chart. Hide until the first real scene change. */
body[data-bg="black"] .bird-ticker {
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

/* =========================================================================
   Scene 1 — 9:29 AM cold open
   ========================================================================= */
#scene-1 .sticky-wrap { background: var(--bg-black); }
#scene-1 .cold-open {
  text-align: center;
  color: #F2F2F2;
  padding: 32px;
  max-width: 820px;
}
#scene-1 .clock {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}
#scene-1 .headline {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 14px 0;
  color: #F5F3EE;
}
#scene-1 .headline-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.35;
  font-weight: 400;
  margin: 0 0 28px 0;
  color: rgba(245, 243, 238, 0.72);
  letter-spacing: 0.005em;
}
#scene-1 .trailing-chart {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
#scene-1 .trailing-chart svg { overflow: visible; }
/* Plan §4 + WCAG AA — axis labels on the black cold-open need ≥4.5:1 contrast.
   Bumped from 0.55 to 0.72 alpha to clear the AA threshold for small text. */
#scene-1 .trailing-chart .axis-label { fill: rgba(255,255,255,0.72); font-family: var(--mono); font-size: 11px; }
#scene-1 .trailing-chart .bird-line { fill: none; stroke: #9EC7C6; stroke-width: 1.6; opacity: 0; transition: opacity var(--dur-grand); }
#scene-1 .trailing-chart.is-drawn .bird-line { opacity: 1; }
#scene-1 .trailing-chart .low-dot { fill: var(--bear); opacity: 0; transition: opacity var(--dur-std) 400ms; }
#scene-1 .trailing-chart.is-drawn .low-dot { opacity: 1; }
#scene-1 .stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 720px; margin: 32px auto 0;
  font-family: var(--mono); font-size: 12px;
  color: rgba(255,255,255,0.78);
}
#scene-1 .stats-row div { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 10px; }
#scene-1 .stats-row span {
  display: block; font-family: var(--serif); font-style: italic; font-size: 22px; color: #F5F3EE; margin-top: 6px;
}

/* =========================================================================
   Scene 2 — The bell
   ========================================================================= */
#scene-2 .metamorph {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto 32px;
}
#scene-2 .morph-side {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-grand);
}
#scene-2 .morph-side svg { width: 100%; height: auto; max-width: 240px; }
#scene-2 .morph-side--shoe { opacity: 1; }
#scene-2 .morph-side--gpu  { opacity: 0.15; }
#scene-2.is-morphed .morph-side--shoe { opacity: 0.15; }
#scene-2.is-morphed .morph-side--gpu { opacity: 1; }
#scene-2 .nameplate {
  font-family: var(--serif); font-size: 24px; text-align: center;
  padding: 12px 20px; border: 1px solid var(--ink-20);
  background: var(--bg-paper);
}
#scene-2 .nameplate .tick { font-family: var(--mono); color: var(--accent); margin-right: 10px; }
#scene-2 .nameplate .name { transition: opacity var(--dur-std); }
#scene-2 .metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 900px; margin: 0 auto;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-60);
}
#scene-2 .metrics div { border-top: 1px solid var(--ink-20); padding-top: 8px; }
#scene-2 .metrics strong {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); margin-top: 4px;
}

/* =========================================================================
   Scene 3 — 582% spike
   ========================================================================= */
#scene-3 .sticky-wrap { background: var(--bg-paper-warm); }
#scene-3 .spike-frame {
  width: 95%; max-width: 980px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
}
#scene-3 .spike-frame svg { width: 100%; height: auto; }
#scene-3 .candle-up   { fill: var(--bull); }
#scene-3 .candle-down { fill: var(--bear); }
#scene-3 .wick { stroke: var(--ink); stroke-width: 1; }
#scene-3 .peak-label {
  font-family: var(--serif); font-style: italic; font-size: 32px;
  fill: var(--bear);
}
#scene-3 .axis { stroke: var(--ink-40); stroke-width: 1; }
#scene-3 .axis-text { fill: var(--ink-60); font-family: var(--mono); font-size: 11px; }
#scene-3 .volume-bar { fill: var(--ink-40); opacity: 0.7; }
#scene-3 .short-band { fill: var(--bear); opacity: 0.08; }

/* =========================================================================
   Scene 4 — Three questions stepper
   ========================================================================= */
#scene-4 .questions {
  max-width: 820px; margin: 0 auto; padding: 8vh 24px;
  display: flex; flex-direction: column; gap: 20vh;
}
#scene-4 .q-row { display: flex; gap: 22px; align-items: flex-start; }
#scene-4 .q-num {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em;
  color: var(--ink-60); padding-top: 14px; min-width: 48px;
}
#scene-4 .q-text {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15; font-weight: 400; margin: 0; letter-spacing: -0.01em;
}

/* =========================================================================
   Scene 5 — Shrinking valuation box
   ========================================================================= */
#scene-5 .sticky-wrap { background: var(--bg-cream); }
#scene-5 .shrink-stage {
  position: relative; width: 100%; max-width: 920px;
  height: 520px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
}
#scene-5 .timeline { position: relative; border-left: 1px solid var(--ink-40); padding-left: 10px; }
#scene-5 .timeline .tl-row {
  position: absolute;
  font-family: var(--mono); font-size: 12px; color: var(--ink-60);
  transform: translateY(-50%);
  width: 100%;
  opacity: 0.35; transition: opacity var(--dur-std), color var(--dur-std);
}
#scene-5 .timeline .tl-row.is-active { opacity: 1; color: var(--ink); }
#scene-5 .timeline .tl-row .val {
  display: block; font-family: var(--serif); font-size: 14px; color: var(--ink);
}
#scene-5 .shrink-canvas { position: relative; }
#scene-5 .box-ipo {
  position: absolute; left: 0; top: 0;
  background: var(--bull); opacity: 0.18;
  transition: all var(--dur-grand) cubic-bezier(.2,.7,.2,1);
  border: 1px solid var(--bull);
}
#scene-5 .box-label {
  position: absolute; left: 10px; top: 10px;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  color: var(--ink);
  transition: font-size var(--dur-grand);
}
#scene-5 .box-sub {
  /* Round 4 Bug 2: top is now set in JS to (boxHeight + 10) so the subtitle
     always sits just BELOW the shrinking box rather than underneath it. */
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: rgba(253,252,248,0.9);
  padding: 2px 8px;
  border-left: 2px solid var(--bull);
  transition: top var(--dur-grand) cubic-bezier(.2,.7,.2,1);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#scene-5 .destruction {
  position: absolute; right: 0; top: 0;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 64px; color: var(--bear); opacity: 0;
  transition: opacity var(--dur-std);
}
#scene-5 .destruction.visible { opacity: 1; }
#scene-5 .conv-box {
  position: absolute; right: 0; bottom: 0;
  width: 140px; height: 100px;
  border: 2px dashed var(--accent);
  opacity: 0; transition: opacity var(--dur-std);
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  padding: 8px;
}
#scene-5 .conv-box.visible { opacity: 1; }

/* =========================================================================
   Scene 6 — Redacted document
   ========================================================================= */
#scene-6 .redact-stage {
  max-width: 720px; margin: 0 auto;
  font-family: var(--serif);
  font-size: 17px; line-height: 1.6;
  padding: 32px 36px;
  background: #FDFCF8;
  border: 1px solid var(--ink-20);
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
  position: relative;
}
#scene-6 .redact-stage h4 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 14px 0;
}
#scene-6 .redact-stage p { margin: 0 0 14px 0; }
/* Plan §3 Scene 6 — dealbreaker 3 reveal beat.
   Initial state: transparent bar with a dotted underline hinting at
   elided text. On .revealed (added by IntersectionObserver), the censor
   bar inks in over 400ms with an 800ms delay so the reader registers
   that the name was hidden on purpose. The Chardan callout's existing
   fade-in then serves as the coda. */
#scene-6 .redact {
  display: inline-block;
  background: transparent;
  color: transparent;
  padding: 0 6px;
  border-radius: 2px;
  border-bottom: 1px dotted var(--ink-40);
  user-select: none;
  transition: background 400ms ease 800ms, border-color 400ms ease 800ms;
}
#scene-6.revealed .redact {
  background: #111;
  color: transparent;
  border-bottom-color: #111;
}
#scene-6 .chardan-callout {
  margin-top: 20px; padding: 14px 16px;
  border-left: 3px solid var(--bear);
  background: #FFF5F3;
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-std), transform var(--dur-std);
}
#scene-6.revealed .chardan-callout { opacity: 1; transform: translateY(0); }
#scene-6 .chardan-callout strong { color: var(--bear); }

/* =========================================================================
   Scene 7 — Chardan file (6-panel small multiples)
   ========================================================================= */
#scene-7 .sticky-wrap { background: var(--bg-cream); }
#scene-7 .chardan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 14px;
  width: 95%; max-width: 880px;
}
#scene-7 .panel {
  background: #FBF7EE;
  border: 1px solid var(--ink-20);
  padding: 14px;
  transition: opacity var(--dur-std), background var(--dur-std);
  opacity: 0.25;
}
#scene-7 .panel.is-lit { opacity: 1; background: #FFFCF3; }
#scene-7 .panel h5 {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  margin: 0 0 2px 0;
}
#scene-7 .panel .ticker-pill {
  font-family: var(--mono); font-size: 10px; background: var(--ink); color: #FFF;
  padding: 1px 6px; border-radius: 2px; margin-right: 6px;
}
#scene-7 .panel .theme {
  font-family: var(--sans); font-size: 11px; color: var(--ink-60); margin: 2px 0 8px 0;
}
#scene-7 .panel svg { width: 100%; height: 60px; }
#scene-7 .panel .spark { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset var(--dur-grand); }
#scene-7 .panel.is-lit .spark { stroke-dashoffset: 0; stroke: var(--bear); }
#scene-7 .panel .end-dot { fill: var(--bear); opacity: 0; transition: opacity var(--dur-std) 600ms; }
#scene-7 .panel.is-lit .end-dot { opacity: 1; }
#scene-7 .panel .outcome {
  font-family: var(--sans); font-size: 11px; color: var(--ink-60);
  margin-top: 6px;
}
#scene-7 .panel.is-lit .outcome { color: var(--bear); }
#scene-7 .panel--bird {
  border: 1px dashed var(--accent); background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
}
#scene-7 .panel--bird .q {
  font-family: var(--serif); font-style: italic; font-size: 48px; color: var(--accent); line-height: 1;
}
#scene-7 .panel--bird .caption {
  font-family: var(--mono); font-size: 10px; margin-top: 8px; color: var(--accent);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* =========================================================================
   Scene 8 — LBCC overlay
   ========================================================================= */
#scene-8 .sticky-wrap { background: var(--bg-cream); }
#scene-8 .overlay-chart { width: 95%; max-width: 880px; }
#scene-8 .overlay-chart svg { width: 100%; height: auto; }
#scene-8 .line-lbcc { fill: none; stroke: var(--grey-context); stroke-width: 1.6; opacity: 0.9; }
#scene-8 .line-bird { fill: none; stroke: var(--accent); stroke-width: 2.6; }
#scene-8 .announce-line { stroke: var(--ink-40); stroke-width: 1; stroke-dasharray: 3 3; }
#scene-8 .future-shade { fill: var(--ink); opacity: 0.04; }
#scene-8 .milestone-label { font-family: var(--sans); font-size: 12px; fill: var(--ink-60); }
#scene-8 .milestone-dot { fill: var(--grey-context); }
#scene-8 .bird-dot { fill: var(--accent); }
#scene-8 .bird-dot-pulse { fill: none; stroke: var(--accent); opacity: 0.6; }
@keyframes pulse {
  0% { r: 6; opacity: 0.8; }
  100% { r: 18; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  #scene-8 .bird-dot-pulse { animation: pulse 1800ms ease-out infinite; }
}

/* =========================================================================
   Scene 9 — Scale zoom (SIGNATURE)
   ========================================================================= */
#scene-9 .sticky-wrap { background: var(--bg-white); }
#scene-9 .scale-stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#scene-9 .scale-stage svg { width: 100%; height: 100%; }
#scene-9 .ring {
  fill: none; stroke-width: 1.2;
}
#scene-9 .ring-label {
  font-family: var(--mono); font-size: 11px; fill: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
#scene-9 .ring-value {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 15px;
  fill: var(--ink);
}
#scene-9 .anchor-dot { fill: var(--accent); }
#scene-9 .anchor-label { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 14px; fill: var(--accent); }
#scene-9 .you-are-here {
  font-family: var(--sans); font-size: 11px; fill: var(--bear); text-transform: uppercase; letter-spacing: 0.18em;
}
#scene-9 .caption-panel {
  /* D3 (Round 3) attempted a calc(50% - 480px) anchor to track the SVG
     centerline, but on wide viewports (1440px+) the constant 480px offset
     kept pinning the panel into the left third of the viewport.
     D6 (Round 4, Bug 8): true center-based anchoring. The SVG is centered
     (preserveAspectRatio: xMidYMid meet), so the panel should center on
     the same axis. translateX(-50%) keeps this correct at any width.
     Mobile (<=720px) falls back to a full-width bottom bar. */
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 32px;
  max-width: min(520px, calc(100vw - 48px));
  width: max-content;
  background: rgba(255,255,255,0.92);
  padding: 14px 16px;
  border-left: 3px solid var(--bear);
  font-family: var(--serif); font-size: 17px; line-height: 1.5;
  transition: opacity var(--dur-std);
}
@media (max-width: 720px) {
  #scene-9 .caption-panel {
    left: 12px;
    right: 12px;
    transform: none;
    bottom: 12px;
    max-width: none;
    width: auto;
    padding: 10px 12px;
    font-size: 14px;
  }
}
#scene-9 .caption-panel .ratio {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 28px; color: var(--bear); display: block; margin-bottom: 4px;
}

/* =========================================================================
   Scene 10 — NPV heatmap
   ========================================================================= */
#scene-10 .sticky-wrap { background: var(--bg-white); }
#scene-10 .heatmap-stage { max-width: 780px; width: 95%; }
#scene-10 .heatmap-stage svg { width: 100%; height: auto; }
#scene-10 .hm-cell { stroke: #fff; stroke-width: 2; }
#scene-10 .hm-label { font-family: var(--mono); font-size: 11px; fill: var(--ink); font-variant-numeric: tabular-nums; }
#scene-10 .hm-axis { font-family: var(--mono); font-size: 11px; fill: var(--ink-60); }
#scene-10 .hm-title { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-60); }
#scene-10 .hm-breakeven { fill: none; stroke: var(--marginal); stroke-width: 2; stroke-dasharray: 4 3; }
#scene-10 .hm-thesis-row rect { stroke: var(--marginal); stroke-width: 2; }
#scene-10 .hm-market-marker { fill: var(--ink); stroke: #FFF; stroke-width: 2; }
#scene-10 .hm-thesis-marker { fill: var(--marginal); stroke: #FFF; stroke-width: 2; }

/* =========================================================================
   Scene 11 — Afternoon fade
   ========================================================================= */
#scene-11 .sticky-wrap { background: var(--bg-white); }
#scene-11 .fade-chart { width: 95%; max-width: 900px; }
#scene-11 .fade-chart svg { width: 100%; height: auto; }
#scene-11 .close-label {
  font-family: var(--serif); font-style: italic; font-size: 28px; fill: var(--ink);
}

/* =========================================================================
   Scene 12 — May 18 branching timeline
   ========================================================================= */
#scene-12 .sticky-wrap { background: var(--bg-slate); }
#scene-12 .tl-stage { width: 95%; max-width: 900px; color: #F2F2F2; }
#scene-12 .tl-stage svg { width: 100%; height: auto; overflow: visible; }
#scene-12 .tl-axis { stroke: rgba(255,255,255,0.3); }
#scene-12 .tl-text { fill: rgba(255,255,255,0.85); font-family: var(--mono); font-size: 11px; }
#scene-12 .tl-event-label { fill: rgba(255,255,255,0.85); font-family: var(--sans); font-size: 12px; }
#scene-12 .tl-event-dot { fill: var(--marginal); }
#scene-12 .tl-vote-rule { stroke: var(--marginal); stroke-dasharray: 4 4; }
#scene-12 .branch-bull { stroke: var(--bull); fill: none; stroke-width: 2; }
#scene-12 .branch-bear { stroke: var(--bear); fill: none; stroke-width: 2; }
#scene-12 .branch-label-bull { fill: var(--bull); font-family: var(--sans); font-size: 13px; font-weight: 600; }
#scene-12 .branch-label-bear { fill: var(--bear); font-family: var(--sans); font-size: 13px; font-weight: 600; }
#scene-12 .scene__title,
#scene-12 .scene__dek { color: #F2F2F2; }

/* =========================================================================
   Scene 13 — Dilution simulator (SIGNATURE interactive)
   ========================================================================= */
#scene-13 .sticky-wrap { background: var(--bg-paper-warm); transition: background-color var(--dur-std); }
#scene-13 .sim-stage {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  max-width: 980px; width: 95%;
  align-items: center;
}
#scene-13 .sim-viz { display: flex; flex-direction: column; gap: 18px; }
#scene-13 .slider-svg { width: 100%; height: 84px; }
#scene-13 .slider-track { stroke: var(--ink-40); stroke-width: 2; }
#scene-13 .slider-tick { stroke: var(--ink-60); stroke-width: 1; }
#scene-13 .slider-handle {
  fill: var(--accent); stroke: var(--ink); stroke-width: 2;
  cursor: grab;
}
#scene-13 .slider-handle:active { cursor: grabbing; }
#scene-13 .slider-handle-price {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 22px; fill: var(--ink);
  text-anchor: middle;
}
#scene-13 .slider-label {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-60);
}
#scene-13 .pie-svg { width: 100%; height: 240px; }
#scene-13 .pie-existing { fill: var(--accent); }
#scene-13 .pie-new { fill: var(--bear); }
#scene-13 .pie-sep { stroke: #FFF; stroke-width: 2; fill: none; }
#scene-13 .dil-bar-bg { fill: var(--ink-20); }
#scene-13 .dil-bar-fg { fill: var(--bear); transition: width var(--dur-micro); }
#scene-13 .sim-panel {
  font-family: var(--sans);
  background: rgba(255,255,255,0.8);
  padding: 22px;
  border: 1px solid var(--ink-20);
}
#scene-13 .sim-panel h3 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 14px 0;
}
#scene-13 .odo-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0; border-top: 1px solid var(--ink-20);
}
#scene-13 .odo-row:first-of-type { border-top: 0; }
#scene-13 .odo-label {
  font-family: var(--sans); font-size: 12px; color: var(--ink-60);
}
#scene-13 .odo-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 28px; color: var(--ink); letter-spacing: -0.01em;
}
#scene-13 .odo-value.warn { color: var(--bear); }
#scene-13 .drag-invite {
  font-family: var(--sans); font-size: 12px; color: var(--accent);
  margin-top: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transition: opacity var(--dur-std);
}
#scene-13.drag-ready .drag-invite { opacity: 1; }

/* =========================================================================
   Scene 15 — Bull countdown
   ========================================================================= */
#scene-15 .countdown {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 900px;
  align-items: center;
}
#scene-15 .countdown-bar {
  background: var(--ink-20); height: 18px; border-radius: 999px; overflow: hidden; position: relative;
}
#scene-15 .countdown-bar__fill {
  height: 100%; background: var(--bull); width: 100%;
  transition: width var(--dur-std);
}
#scene-15 .countdown-panel { font-family: var(--sans); }
#scene-15 .countdown-panel h3 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 12px 0;
}
#scene-15 .raise-value {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 64px; color: var(--bull);
  font-variant-numeric: tabular-nums;
}
#scene-15 .day-count {
  font-family: var(--mono); font-size: 14px; color: var(--ink-60); margin-top: 8px;
}
#scene-15 .day-scrubber {
  width: 100%; margin-top: 16px; accent-color: var(--bull);
}

/* =========================================================================
   Scene 16 — Verdict ladder (SIGNATURE closing)
   ========================================================================= */
#scene-16 .sticky-wrap { background: var(--bg-closing); }
#scene-16 .ladder-stage {
  width: 95%; max-width: 980px;
}
#scene-16 .ladder-stage svg { width: 100%; height: auto; overflow: visible; }
#scene-16 .agent-dot { transition: opacity var(--dur-std); cursor: pointer; }
#scene-16 .agent-dot.bull { fill: var(--bull); }
#scene-16 .agent-dot.bear { fill: var(--bear); }
#scene-16 .agent-dot.neutral { fill: var(--grey-context); }
#scene-16 .agent-label {
  font-family: var(--sans); font-size: 11px; fill: var(--ink);
}
#scene-16 .current-line { stroke: var(--marginal); stroke-width: 2; stroke-dasharray: 5 4; }
#scene-16 .current-label {
  font-family: var(--serif); font-style: italic; font-size: 16px; fill: var(--marginal); font-weight: 600;
}
#scene-16 .x-axis text { font-family: var(--mono); font-size: 11px; fill: var(--ink-60); }
#scene-16 .x-axis line { stroke: var(--ink-40); }
#scene-16 .x-axis path { stroke: var(--ink-40); }
#scene-16 .closing-line {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  color: var(--ink-60); text-align: center; margin-top: 40px;
}

/* =========================================================================
   Scene 17 — Methodology footer
   ========================================================================= */
#scene-17 {
  background: var(--bg-closing);
  padding: 8vh 24px 16vh;
}
#scene-17 .inner { max-width: 820px; margin: 0 auto; }
#scene-17 details {
  border-top: 1px solid var(--ink-20);
  padding: 16px 0;
}
#scene-17 summary {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
#scene-17 summary::-webkit-details-marker { display: none; }
#scene-17 summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--ink-60); }
#scene-17 details[open] summary::after { content: "−"; }
#scene-17 details[open] { background: #FBF9F2; padding: 16px 12px; }
#scene-17 .doc-list {
  list-style: none; padding: 12px 0 0 0; margin: 0;
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
}
#scene-17 .doc-list li { border-top: 1px dotted var(--ink-20); padding: 8px 0; }
#scene-17 .doc-list a { font-family: var(--mono); font-size: 12px; }
#scene-17 .foot-note {
  margin-top: 40px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-60);
  line-height: 1.6;
}

/* =========================================================================
   Responsive — plan §1 rule #6 mobile-first
   ========================================================================= */
@media (max-width: 720px) {
  body { font-size: 17px; }
  .scene__inner { padding: 8vh 18px; }
  #scene-2 .metamorph { grid-template-columns: 1fr; }
  #scene-2 .metrics { grid-template-columns: 1fr; }
  #scene-5 .shrink-stage { height: 420px; grid-template-columns: 90px 1fr; }
  #scene-7 .chardan-grid { grid-template-columns: repeat(2, 1fr); }
  #scene-13 .sim-stage { grid-template-columns: 1fr; }
  #scene-15 .countdown { grid-template-columns: 1fr; }
  .bird-ticker { font-size: 11px; padding: 5px 8px; top: 124px; right: 10px; }
  #scene-1 .stats-row { grid-template-columns: repeat(2, 1fr); }

  /* M1 (Round 3): shrink in-SVG typography for dense charts at narrow viewport.
     Class names verified against script.js renderers — Scene 8 uses inline
     font-size attributes, so we target all <text> in its overlay chart and
     rely on attribute-vs-CSS cascade (CSS wins for font-size on SVG text). */
  #scene-1 .trailing-chart .axis-label { font-size: 9px; }
  #scene-8 .overlay-chart svg text { font-size: 9px; }
  #scene-9 .ring-label,
  #scene-9 .ring-value { font-size: 10px; }
  #scene-10 .hm-label { font-size: 9px; }
  #scene-10 .hm-axis { font-size: 9px; }
  #scene-12 .tl-event-label,
  #scene-12 .tl-text { font-size: 10px; }
  #scene-12 .branch-label-bull,
  #scene-12 .branch-label-bear { font-size: 11px; }
  #scene-16 .agent-label { font-size: 10px; }
  #scene-16 .x-axis text { font-size: 9px; }
  #scene-16 .current-label { font-size: 12px; }
}

/* =========================================================================
   Cold-open overlay (shown once per session on first load)
   ========================================================================= */
.cold-open-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 14, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 320ms ease;
  padding: 24px;
}
.cold-open-overlay[data-open="true"] { opacity: 1; }
/* CRITICAL: [hidden] must take effect even though .cold-open-overlay has
   display:flex. Without this override, the dismissed overlay stays as an
   invisible full-page layer (pointer-events:auto by default) that
   intercepts every hover and click on the page — silently breaking
   the glossary tooltips, act-bar clicks, and all scene interactions. */
.cold-open-overlay[hidden] { display: none; }
.cold-open-overlay__card {
  background: var(--bg-paper);
  color: var(--ink);
  max-width: 540px;
  padding: 36px 40px 32px;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  text-align: left;
}
.cold-open-overlay__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px 0;
  font-weight: 600;
}
.cold-open-overlay__body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 22px 0;
}
.cold-open-overlay__dismiss {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: var(--ink);
  color: var(--bg-paper);
  border: 0;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.cold-open-overlay__dismiss:hover { background: var(--accent); }
@media (max-width: 600px) {
  .cold-open-overlay__card { padding: 28px 22px 24px; }
  .cold-open-overlay__body { font-size: 16px; }
}

/* =========================================================================
   Interlude (inter-scene prose bridge — the maximalist blocks)
   Narrow column, soft background, explicitly NOT a scene (no sticky behavior).
   ========================================================================= */
.interlude {
  padding: 64px 24px;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-beat) ease;
}
.interlude[data-bg="paper-warm"] { background: var(--bg-paper-warm); }
.interlude[data-bg="cream"]      { background: var(--bg-cream); }
.interlude[data-bg="white"]      { background: var(--bg-white); }
.interlude[data-bg="closing"]    { background: var(--bg-closing); }
.interlude[data-bg="slate"]      { background: var(--bg-slate); color: #F5F3EE; }
.interlude__inner {
  max-width: 580px;
  width: 100%;
}
.interlude__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 14px 0;
}
.interlude__body {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}
.interlude[data-bg="slate"] .interlude__body { color: rgba(245, 243, 238, 0.92); }
.interlude[data-bg="slate"] .interlude__kicker { color: var(--marginal); }
.interlude__body strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.interlude[data-bg="slate"] .interlude__body strong { color: #FFFFFF; }
@media (max-width: 600px) {
  .interlude { padding: 44px 20px; }
  .interlude__body { font-size: 17px; line-height: 1.5; }
}

/* =========================================================================
   Glossary hovers — inline term with a visible affordance, floating tooltip
   on hover/focus. Affordance must be discoverable at a glance: dashed
   underline in accent teal, small info-circle icon after the term, and a
   subtle background tint that brightens on hover.
   ========================================================================= */
.gloss {
  /* inline-block is required: inline spans create unreliable containing
     blocks for position: absolute children (especially when the span
     wraps across lines), which was preventing the tooltip from showing. */
  display: inline-block;
  position: relative;
  border-bottom: 1.5px dashed var(--accent);
  background: rgba(14, 124, 123, 0.08);
  padding: 0 2px;
  border-radius: 2px;
  cursor: help;
  outline: none;
  white-space: nowrap;
  transition: background-color 160ms ease;
}
.gloss::after {
  content: 'ⓘ';
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78em;
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
  margin-left: 3px;
  vertical-align: 0.08em;
  opacity: 0.85;
}
.gloss:hover { background: rgba(14, 124, 123, 0.18); }
.gloss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* On dark scenes (slate/black backgrounds), bump the affordance contrast. */
body[data-bg="slate"] .gloss,
body[data-bg="black"] .gloss {
  background: rgba(255, 255, 255, 0.10);
  border-bottom-color: #9EC7C6;
}
body[data-bg="slate"] .gloss::after,
body[data-bg="black"] .gloss::after { color: #9EC7C6; }
.gloss__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  /* Above the top-chrome stack (ai-disclosure z:102, cold-open z:200). */
  z-index: 300;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  background: var(--bg-paper-warm);
  color: var(--ink);
  border: 1px solid var(--ink-20);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 10px 12px;
  border-radius: 4px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.gloss__tip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink-20);
}
.gloss:hover .gloss__tip,
.gloss:focus-within .gloss__tip,
.gloss:focus .gloss__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
@media (max-width: 600px) {
  .gloss__tip { max-width: 220px; font-size: 12px; }
}