/* ═══════════════════════════════════════════════════════════════════════════
   btq-training.css — Flight Training (the 4-act funnel).
   THE STANDARD (1.18, PR 8): on the site's tokens, no fallbacks (site.css is on
   the page); the faces are the tokens', Fraunces only on the voice, no text
   under 12px, no ledge (the ready breath is a glow).
   STAGED (1.24): his face heads every act; Market School is three pages of two
   plates; Act 3 stands on the live book's own stage (btq-live.css: .lv-stage,
   .lv-side, .lv-tug, .lv-float), so the duel reads the same in training and on
   the desk. Linked by src/btq-css.js from the page's versioned hint. Uses the
   Gilded Observatory tokens (public/styles/app.css :root) + the shared press
   physics (.press / .press-gold). Presses are position, not motion, so they
   survive prefers-reduced-motion; only the small screen animations hush.
   Source of truth for copy/structure: docs/design/gilded-observatory/tutorial-funnel-v2.html
   ═══════════════════════════════════════════════════════════════════════════ */

.btq-training{ position:fixed; inset:0; z-index:520; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); color:var(--ink); padding:18px; }
.btq-training .bt-scrim{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, #10141f 0%, var(--void) 70%); }

.bt-shell{ position:relative; width:100%; max-width:600px; max-height:100%; display:flex; flex-direction:column;
  gap:14px; overflow:hidden; }
/* two plates side by side want room; the duel wants more */
.btq-training[data-frame^="school-"] .bt-shell{ max-width:920px; }
.btq-training[data-frame="play"] .bt-shell{ max-width:1040px; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bt-top{ display:flex; align-items:center; gap:10px; }
.bt-brand{ display:inline-flex; align-items:center; gap:7px; font-family:var(--num); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--gold); }
.bt-stage{ font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--ink-mute);
  text-transform:uppercase; margin-left:auto; }
/* 44px, not 30 — this is the only way out of training on a phone, and a thumb
   is not a mouse pointer (site tap audit: min axis ≥40px). */
.bt-x{ width:44px; height:44px; border-radius:50%; border:1px solid var(--obs-hair);
  background:var(--obs-panel); color:var(--ink2); font-size:18px; line-height:1; cursor:pointer; flex:none; }
.bt-x:hover{ color:#fff; border-color:rgba(var(--gold-rgb),.4); }

/* ── progress rail ───────────────────────────────────────────────────────── */
.bt-progress{ display:flex; gap:5px; align-items:center; }
.bt-dot{ height:3px; flex:1; border-radius:3px; background:rgba(140,160,190,.18); transition:background .25s var(--ease); }
.bt-dot.done{ background:rgba(var(--gold-rgb),.5); }
.bt-dot.on{ background:var(--gold); box-shadow:0 0 8px rgba(var(--gold-rgb),.5); }

/* ── stage view + card ───────────────────────────────────────────────────── */
/* the card sizes to its content and the view scrolls: stretched to the view's
   height, the card's column squeezed the one child allowed to shrink (the
   coach row, min-height 34px) and a three-line coach line ran over the meter */
.bt-stageview{ flex:1; min-height:0; overflow-y:auto; display:flex; align-items:flex-start; }
.bt-card{ position:relative; width:100%; border:1px solid var(--obs-hair); border-radius:16px;
  background:var(--obs-panel); padding:22px 22px 24px; display:flex; flex-direction:column;
  animation:bt-in .32s var(--ease); }
@keyframes bt-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.bt-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--info); margin-bottom:14px; }
.bt-eyebrow--gold{ color:var(--gold); }

.bt-say.voice{ font-family:var(--disp); font-style:italic; font-size:16px; line-height:1.55; max-width:none; color:var(--ink); }
.bt-say b{ color:var(--gold); font-style:normal; }
.bt-say.bt-say--kurus{ color:var(--pearl); }

/* ── his face at the head of an act (1.24) ───────────────────────────────── */
.bt-head{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.bt-face-wrap{ flex:none; display:grid; place-items:center; }
.bt-face{ --k:clamp(96px,28vw,140px); }
.bt-head-t{ min-width:0; }
.bt-head-t .bt-eyebrow{ margin-bottom:8px; }
.bt-lead.voice{ font-family:var(--disp); font-style:italic; font-size:17px; line-height:1.5; margin:0; color:var(--pearl); max-width:30ch; }

/* ── Market School: two ideas a page ─────────────────────────────────────── */
.bt-plates{ display:grid; grid-template-columns:1fr; gap:14px; }
.bt-plate{ border:1px solid var(--hair); border-radius:14px; background:var(--obs-panel2); padding:16px 18px 18px;
  display:flex; flex-direction:column; box-shadow:inset 0 1px 0 var(--rim); }
.bt-q{ font-family:var(--num); font-weight:700; font-size:20px; letter-spacing:-.015em; line-height:1.2; margin:0 0 6px; color:var(--ink); }
.bt-plate .bt-vis{ margin:2px 0 10px; }
.bt-plate .bt-say.voice{ margin:0; }
/* the toll, counted: what twenty trades of the stake pay before a price moves */
.bt-toll{ margin-top:14px; padding-top:12px; border-top:1px solid var(--hair); display:grid; gap:2px; }
.bt-toll-k, .bt-toll-s{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-mute); }
.bt-toll-v{ font-family:var(--num); font-weight:700; font-size:clamp(36px,9vw,48px); line-height:1; letter-spacing:-.03em;
  color:var(--down); font-variant-numeric:tabular-nums; }
@media (min-width:720px){
  .bt-plates{ grid-template-columns:1fr 1fr; gap:16px; }
  .bt-q{ font-size:22px; }
}

.bt-next, .bt-enter{ align-self:flex-start; margin-top:20px; font-family:var(--mono); font-weight:700;
  font-size:12px; letter-spacing:.14em; border-radius:11px; padding:13px 26px; cursor:pointer; }
.bt-next:disabled{ opacity:.4; cursor:not-allowed; filter:saturate(.4); }
.bt-next.ready{ animation:bt-ready 2.4s ease-in-out infinite; }
/* the ready breath: the gold glows beneath the press, the ledge is gone */
@keyframes bt-ready{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.5),0 14px 34px -14px rgba(var(--gold-rgb),.55); }
  50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 2px rgba(0,0,0,.5),0 0 22px rgba(var(--gold-rgb),.5),0 18px 44px -14px rgba(var(--gold-rgb),.7); } }

/* ── screen visuals ──────────────────────────────────────────────────────── */
.bt-vis{ display:flex; align-items:center; justify-content:center; margin:4px 0 16px; min-height:88px; }
.bt-vis--lg{ min-height:130px; }
.bt-vis-svg{ width:190px; height:auto; }
.bt-watch-svg{ width:210px; height:auto; }
.bt-float{ animation:bt-float 3.4s ease-in-out infinite; }
@keyframes bt-float{ 0%{ opacity:0; transform:translate(46px,0); } 40%{ opacity:1; } 100%{ opacity:.15; transform:translate(64px,0); } }
.bt-trade{ animation:bt-trade 2.2s ease-in-out infinite; }
@keyframes bt-trade{ 0%,100%{ transform:translateX(-14px); } 50%{ transform:translateX(14px); } }
.bt-tick{ animation:bt-blink 1.6s steps(1) infinite; }
@keyframes bt-blink{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.bt-swarm{ animation:bt-collapse 4s ease-in-out infinite; transform-origin:60px 40px; }
@keyframes bt-collapse{ 0%,55%{ opacity:.8; transform:scale(1); } 80%,100%{ opacity:0; transform:scale(.2); } }
.bt-coin{ animation:bt-coinpop 4s ease-in-out infinite; transform-origin:60px 40px; }
@keyframes bt-coinpop{ 0%,55%{ transform:scale(.6); opacity:.3; } 80%,100%{ transform:scale(1); opacity:1; } }
.bt-wild{ animation:bt-shiver .5s ease-in-out infinite alternate; }
@keyframes bt-shiver{ from{ transform:translateY(-1.5px); } to{ transform:translateY(1.5px); } }
.bt-rain use{ animation:bt-raindrop 2.6s linear infinite; }
@keyframes bt-raindrop{ 0%{ opacity:0; transform:translateY(-8px); } 30%{ opacity:.8; } 100%{ opacity:0; transform:translateY(22px); } }
.bt-leak circle{ animation:bt-drip 1.8s ease-in infinite; }
.bt-leak circle:nth-child(2){ animation-delay:.3s; } .bt-leak circle:nth-child(3){ animation-delay:.6s; } .bt-leak circle:nth-child(4){ animation-delay:.9s; }
@keyframes bt-drip{ 0%{ opacity:0; transform:translateY(-6px); } 40%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }
.bt-w-orb{ animation:bt-suck 3.6s ease-in-out infinite; }
@keyframes bt-suck{ 0%,40%{ opacity:.85; transform:translate(0,0); } 75%,100%{ opacity:0; transform:translate(var(--dx),var(--dy)); } }
.bt-w-coin{ animation:bt-coinpop2 3.6s ease-in-out infinite; transform-origin:70px 60px; }
@keyframes bt-coinpop2{ 0%,40%{ transform:scale(.55); opacity:.3; } 75%,100%{ transform:scale(1); opacity:1; } }

/* ── facts panel ─────────────────────────────────────────────────────────── */
.bt-facts{ border-color:rgba(var(--gold-rgb),.4); background:var(--obs-panel2); }
.bt-facts-t{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--gold); margin-bottom:14px; }
.bt-facts-list{ list-style:none; margin:0; padding:0; }
.bt-facts-list li{ font-size:13px; color:var(--ink2); line-height:1.6; padding-left:20px; position:relative; margin-bottom:10px; }
.bt-facts-list li:before{ content:''; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* ── Act 2 watch ─────────────────────────────────────────────────────────── */
.bt-watch-strategy{ font-size:13.5px; color:var(--ink-mute); line-height:1.6; margin-top:14px; }
.bt-watch-strategy b{ color:var(--ink); }

/* ── Act 3 guided month, as a duel (1.24) ────────────────────────────────── */
/* the live book's stage (btq-live.css), fitted to the card: no side inset, his
   line held to two lines under the tug */
.bt-play .bt-eyebrow{ margin-bottom:4px; }
.bt-duel.lv-stage{ width:100%; margin:0; }
.bt-duel .lv-side-v{ font-size:min(48px,20cqi); }
.bt-play-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:14px; }
.bt-race-wrap{ position:relative; }
.bt-race{ height:120px; border:1px solid var(--hair); border-radius:12px; background:var(--obs-panel2); overflow:hidden; }
.bt-race canvas{ display:block; }
.bt-race-wait{ position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:0 16px; text-align:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-mute); pointer-events:none; }
.bt-race-wait[hidden]{ display:none; }

.bt-meter{ margin-bottom:12px; }
.bt-meter-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
.bt-meter-row span:last-child{ color:var(--ink); }
.bt-meter-track{ position:relative; height:9px; border-radius:9px; background:rgba(140,160,190,.14); overflow:hidden; }
.bt-meter-fill{ height:100%; width:0; border-radius:9px; transition:width .35s var(--ease), background .35s var(--ease); background:var(--down); }
.bt-meter-fill.mid{ background:var(--gold); }
.bt-meter-fill.ok{ background:var(--up); }
.bt-meter-gate{ position:absolute; top:-3px; width:2px; height:15px; background:rgba(255,255,255,.55); transform:translateX(-1px); }

.bt-costbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:12px;
  color:var(--ink-mute); margin-bottom:12px; }
.bt-costbar b{ color:var(--ink); }
.bt-cost{ color:var(--down); }

/* the keys: a hairline cell each, tinted by what the name did this month */
.bt-deck{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.bt-key{ text-align:left; border:1px solid var(--hair); border-radius:12px; background:var(--obs-panel2);
  padding:11px 12px 12px; cursor:pointer; display:flex; flex-direction:column; gap:3px; color:inherit; min-height:44px;
  transition:box-shadow .6s var(--ease), border-color .2s var(--ease); }
.bt-key[data-dir="up"]{ box-shadow:inset 0 0 0 999px rgba(var(--up-rgb),var(--heat)); }
.bt-key[data-dir="down"]{ box-shadow:inset 0 0 0 999px rgba(var(--down-rgb),var(--heat)); }
.bt-key:hover{ border-color:var(--hair-strong); }
.bt-key-nm{ font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink); }
.bt-key-bl{ font-size:12px; color:var(--ink-mute); }
.bt-key-ft{ display:flex; flex-wrap:wrap; justify-content:space-between; column-gap:8px; min-height:16px; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
.bt-key-ft > span{ white-space:nowrap; }
.bt-key-mv{ color:var(--ink2); }
.bt-key[data-dir="up"] .bt-key-mv{ color:var(--up); } .bt-key[data-dir="down"] .bt-key-mv{ color:var(--down); }
.bt-key-held{ color:var(--gold-lt); }
.bt-key.held{ border-color:rgba(var(--gold-rgb),.55); }
.bt-key.is-traded{ animation:lv-ring .9s var(--ease-out); }

.bt-play-acts{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.bt-play-acts .bt-next{ margin-top:0; }
/* the full arena: a quiet ghost press, not a bare link (1.24) */
.bt-arena-link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-family:var(--mono); font-weight:700;
  font-size:12px; letter-spacing:.08em; border-radius:11px; padding:11px 16px; cursor:pointer;
  border:1px solid var(--hair); background:transparent; color:var(--ink2); }
.bt-arena-link:hover{ color:var(--ink); border-color:var(--hair-strong); }
.bt-arena-mount{ position:fixed; inset:0; z-index:600; }
/* the arena makes its host #btq-root.btq-arena, whose z-index (500, btq-arena.css)
   out-ranked the class above by id: act 3's "Open the full arena" opened it BEHIND
   Flight Training (520) and the link looked dead (THE STANDARD, PR 8b, with the
   arena on invented names). The host's own classes win the order back. */
#btq-root.btq-arena.bt-arena-mount{ z-index:600; }

/* ↺ Start over — the ghost press beside the gold "Earn your wings". Hidden
   until a pick is made: the safe sandbox's do-over. */
.bt-restart{ display:none; align-items:center; gap:6px; min-height:44px; font-family:var(--mono); font-weight:700;
  font-size:12px; letter-spacing:.08em; border-radius:11px; padding:11px 16px; cursor:pointer;
  border:1px solid var(--hair); background:var(--obs-panel2); color:var(--ink); }
.bt-restart:hover{ border-color:rgba(var(--gold-rgb),.4); }
.bt-restart.show{ display:inline-flex; }

/* a wide desk: the stage on top, the race left, the keys right */
@media (min-width:980px){
  .bt-play-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; gap:20px; }
  .bt-race{ height:240px; }
}

/* ── Act 4 go live ───────────────────────────────────────────────────────── */
.bt-golive{ border-color:rgba(var(--up-rgb),.4); background:rgba(var(--up-rgb),.04); text-align:center; align-items:center; }
.bt-golive .bt-eyebrow, .bt-golive .bt-say, .bt-golive .bt-golive-p{ text-align:center; }
.bt-golive .bt-face-wrap{ margin-bottom:10px; animation:bt-wingpop .6s var(--ease); }
@keyframes bt-wingpop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
.bt-golive-h{ font-family:var(--num); font-weight:700; letter-spacing:-.018em; font-size:24px; margin:2px 0 12px; }
.bt-golive-p{ font-size:13px; color:var(--ink-mute); line-height:1.6; max-width:400px; }
.bt-golive .bt-enter{ align-self:center; margin-top:22px; }

/* ── skip hatch ──────────────────────────────────────────────────────────── */
.bt-skip{ align-self:center; background:none; border:none; color:var(--ink-mute); font-family:var(--mono);
  font-size:12px; letter-spacing:.1em; cursor:pointer; padding:14px 8px; min-height:44px; }
.bt-skip:hover{ color:var(--ink2); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:520px){
  .bt-say.voice{ font-size:15px; }
  .bt-head{ gap:14px; }
  .bt-lead.voice{ font-size:16px; }
}

@media (prefers-reduced-motion: reduce){
  .bt-card{ animation:none; }
  .bt-float, .bt-trade, .bt-tick, .bt-swarm, .bt-coin, .bt-wild, .bt-rain use, .bt-leak circle,
  .bt-w-orb, .bt-w-coin, .bt-next.ready, .bt-golive .bt-face-wrap, .bt-key.is-traded{ animation:none; }
  .bt-key{ transition:none; }
  /* settle the collapse animations on their resolved (informative) frame */
  .bt-swarm{ opacity:0; } .bt-coin{ transform:none; opacity:1; }
  .bt-w-orb{ opacity:0; } .bt-w-coin{ transform:none; opacity:1; }
  .bt-float{ opacity:.4; }
}