/* THE FEED — full-screen vertical deck, one lesson per screen. The scroll
   physics are the browser's own (scroll-snap): TikTok's feel without a line
   of gesture code. Captions are DOM text over the canvas — readable, selectable,
   screen-reader-visible. The arcade's neon stays next door; the Feed's voice
   is calmer: void ground, one green accent, serif for the ideas. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: #07090e; }
body {
  background: transparent;
  color: #eef2f7;
  font-family: 'Jost', system-ui, sans-serif;
  overflow: hidden;
}

/* ── the ambient layer (Visual Doctrine, phase 5) ──────────────────────────
   The room around the stage: faint green light-shafts down both edges with
   a black center — on a phone the scene canvases cover it; on desktop it is
   the room the phone column stands in. position:fixed (iOS ignores
   background-attachment:fixed). z-index:-1 paints under content but over
   the html ground; body must stay transparent for it to show. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,9,14,0.35), rgba(7,9,14,0.6)),
    url('/img/ambient/feed.webp') center / cover no-repeat,
    #07090e;
}
@media (prefers-reduced-data: reduce) {
  body::before { background: #07090e; }
}

/* top chrome, floating over everything */
#bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  pointer-events: none;
}
#bar > * { pointer-events: auto; }
#homeLink {
  color: #aeb8c7;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(140,160,190,0.25);
  border-radius: 10px;
  background: rgba(7,9,14,0.55);
  backdrop-filter: blur(6px);
}
#dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
#dots i {
  width: 14px; height: 4px; border-radius: 2px;
  background: rgba(140,160,190,0.28);
}
#dots i.done { background: #62d6a4; }
#repChip {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #e6bd5c;
  border: 1px solid rgba(230,189,92,0.4);
  border-radius: 99px;
  padding: 4px 10px;
  background: rgba(7,9,14,0.55);
  backdrop-filter: blur(6px);
}

/* the deck */
#deck {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#deck::-webkit-scrollbar { display: none; }

.short {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
.short canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.chrome {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 20px calc(26px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.tagline {
  position: absolute;
  top: calc(54px + env(safe-area-inset-top));
  left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
}
.tag { color: #62d6a4; }
.count { color: #8b96a6; }

/* the words */
.cap-zone { max-width: 34em; }
.hook {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(21px, 5.6vw, 27px);
  line-height: 1.25;
  margin: 0 0 10px;
  text-wrap: balance;
}
.caps { min-height: 4.6em; }
.cap {
  display: none;
  margin: 0 0 8px;
  font-size: 16.5px;
  line-height: 1.5;
  color: #ccd5e0;
}
/* feed.js marks the LATEST reached caption `on` (one voice at a time) and
   every reached caption `shown` — reduced motion displays the transcript */
.cap.on { display: block; animation: capIn 0.45s ease both; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.payoff {
  display: none;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: #e6bd5c;
  margin: 4px 0 0;
}
.payoff.on { display: block; animation: capIn 0.5s ease both; }

/* the check replaces the narration — hook and captions collapse so the
   question never overprints the scene's finished picture on a phone
   (reduced motion keeps the transcript: it IS the narration there) */
.short.checked .hook, .short.checked .caps { display: none; }
.short.checked .chrome {
  /* the question earns a quiet ground so it stays legible whatever the
     scene's finished frame put near the fold */
  background: linear-gradient(180deg, transparent 34%, rgba(7,9,14,0.55) 52%, rgba(7,9,14,0.92) 72%);
}
@media (prefers-reduced-motion: reduce) {
  .short.checked .hook, .short.checked .caps { display: block; }
}
.check {
  margin-top: 16px;
  border-top: 1px solid rgba(140,160,190,0.25);
  padding-top: 14px;
}
.check.hidden { display: none; }
.check .q { margin: 0 0 10px; font-size: 16px; color: #eef2f7; font-weight: 500; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opts button {
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: #ccd5e0;
  background: rgba(24,32,49,0.75);
  border: 1px solid rgba(140,160,190,0.3);
  border-radius: 12px;
  padding: 11px 14px;
  min-height: 44px;
  cursor: pointer;
}
.opts button:focus-visible { outline: 2px solid #62d6a4; outline-offset: 2px; }
.opts button.right { border-color: #62d6a4; color: #62d6a4; }
.opts button.wrong { border-color: #ef5350; color: #ef5350; }
.why { min-height: 1.4em; margin: 10px 0 0; font-size: 14.5px; color: #aeb8c7; }
.next-hint {
  margin: 8px 0 0;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #8b96a6;
  opacity: 0;
}
.next-hint.on { opacity: 1; animation: hintPulse 2.2s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.paused-chip {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #ccd5e0;
  background: rgba(7,9,14,0.7);
  border: 1px solid rgba(140,160,190,0.3);
  border-radius: 99px;
  padding: 7px 14px;
}
.paused-chip.hidden { display: none; }

/* the end card */
.end-card { display: flex; align-items: center; justify-content: center; }
.chrome.end {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  max-width: 560px;
  padding: 24px;
}
.chrome.end h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.25;
  margin: 0;
}
.chrome.end h2 em { color: #62d6a4; font-style: italic; }
.end-line { font-size: 16.5px; line-height: 1.55; color: #aeb8c7; margin: 0; }
.end-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.btn {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.btn.gold { background: linear-gradient(180deg, #f0d68a, #e6bd5c); color: #221c08; font-weight: 600; }
.btn.ghost { border: 1px solid rgba(140,160,190,0.35); color: #c7d0dd; }
.btn:focus-visible { outline: 2px solid #62d6a4; outline-offset: 2px; }
.fineprint {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8b96a6;
  margin: 10px 0 0;
}

/* the math peek: a mapped short ends on its real computed chart */
.math-peek { margin-top: 12px; }
.math-peek .scene-svg { display: block; width: 100%; height: auto; max-height: 150px; }
.math-peek .math-line { fill: none; stroke: #8fb6ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.math-peek .alt-line { fill: none; stroke: rgba(143,182,255,0.45); stroke-width: 1.8; }
.math-peek .gap-mark { stroke: #8fb6ff; stroke-width: 4; }
.math-peek .a-vline { stroke: rgba(143,182,255,0.7); stroke-width: 1.4; stroke-dasharray: 2 3; }
.math-peek .target { stroke: rgba(140,160,190,0.45); stroke-width: 1; stroke-dasharray: 2 4; }
.math-peek .thin { stroke-width: 1.4; opacity: 0.75; }
.math-peek .dn2 { stroke: #e0716d; }
.math-peek .up2 { stroke: #62d6a4; }
.math-peek .enddot { fill: #8fb6ff; }
.math-peek .sc-t { font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 10px; fill: #8b96a6; }
.math-peek .sc-t.m-lab { fill: #b9d2ff; font-weight: 600; }
.math-peek .sc-t.ax { font-size: 9px; fill: #5b687e; }
.math-peek a {
  display: inline-block; margin-top: 8px; color: #62d6a4; text-decoration: none;
  font-size: 14px; padding: 8px 0; min-height: 30px;
}

/* ── desktop: a phone-shaped stage in the void ──────────────────────────────
   The Feed is a portrait experience. On a wide screen the captions sat in
   the bottom-left corner of the viewport with the scene floating alone at
   the top — so past 800px the whole deck becomes one centered phone-width
   column, hairlined, with the room lights dimmed around it. The bar rides
   the same column (transform on ITSELF is safe for position:fixed — it is
   transformed ancestors that break fixed children). */
@media (min-width: 800px) {
  /* the room lights are the ambient layer's shafts now — body stays
     transparent so they show; the column keeps its hairlines and glow */
  #deck {
    width: 470px;
    margin: 0 auto;
    border-left: 1px solid rgba(140,160,190,0.14);
    border-right: 1px solid rgba(140,160,190,0.14);
    box-shadow: 0 0 90px -24px rgba(98,214,164,0.14);
  }
  #bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 470px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap.on, .payoff.on, .next-hint.on { animation: none; }
  /* reduced motion shows the whole transcript at once — no stepping — and
     the chrome becomes a readable page over the dimmed still: scrollable,
     top-anchored, so a full transcript + check never clips off-screen */
  .cap.shown { display: block; }
  .chrome {
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: calc(96px + env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(7,9,14,0.6), rgba(7,9,14,0.88) 70%);
  }
}