/* ============================================================
   RealRacer.ai — Live Timing (production /live stylesheet)
   Device-frame mock chrome (.ph / .watch / .car / .devrow) was
   quarantined to live-timing-mock.css (P2-9) — not linked here.
   ============================================================

.lt-page{max-width:1280px;margin:0 auto;padding:40px 28px 90px}
/* Live keeps a slightly wider instrument column than Improve's 1200 shell. */
body[data-page-key="live"] main,
body[data-page-key="live"] .main{
  max-width:1280px;
  overflow-x:clip;
}
.lt-intro{max-width:760px;margin-bottom:18px}
.lt-intro .eyebrow{font-family:var(--label);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.lt-intro .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.lt-intro h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,42px);letter-spacing:-0.025em;line-height:1.08}
.lt-intro h1 em{font-style:normal;color:var(--accent)}
.lt-intro p{font-size:15px;color:var(--muted);line-height:1.65;margin-top:14px}
.lt-intro p strong{color:var(--text)}

/* band heading */
.lt-band{font-family:var(--label);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint);
  margin:52px 0 8px;display:flex;align-items:center;gap:14px}
.lt-band .pip{width:9px;height:9px;border-radius:3px}
.lt-band.sim .pip{background:var(--orange)}.lt-band.track .pip{background:var(--green)}.lt-band.drift .pip{background:var(--purple)}
.lt-band::after{content:"";flex:1;height:1px;background:var(--border)}
.lt-band .note{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--muted);font-weight:500}

/* shared pre-session (phone) */
.pre{position:absolute;inset:0;padding:8px 20px 20px;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
.pre::-webkit-scrollbar{display:none}
.pre-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 12px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);
  font-family:var(--label);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.pre-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:ltp 1.8s infinite;
  flex-shrink:0;overflow:hidden}
@keyframes ltp{0%,100%{opacity:1}50%{opacity:0.35}}
.pre-hero{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-0.03em;line-height:1.0;margin-bottom:8px}
.pre-hero .a{color:var(--accent)}
.pre-meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);display:flex;gap:9px;align-items:center;margin-bottom:22px}
.pre-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--faint)}
/* discipline chooser (swipe)
   Name (.dn) stacks ABOVE subtitle (.ds). Without flex-column + block
   .ds, the two spans sit inline ("SIM iRacing") and read as floating
   labels over the tile — the Live Timing standby glitch. */
.disc-pick{display:flex;gap:8px;margin-bottom:18px}
.dchip{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:12px;padding:12px 6px;text-align:center;
  background:var(--surface);transition:border-color .2s;cursor:pointer;color:inherit;font:inherit}
.dchip.on.sim{border-color:var(--orange);background:rgba(255,128,0,0.08)}
.dchip.on.track{border-color:var(--green);background:rgba(0,200,100,0.08)}
.dchip.on.drift{border-color:var(--purple);background:rgba(180,106,255,0.08)}
.dchip .dn{display:block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-0.01em;text-transform:uppercase;line-height:1.1}
.dchip.on.sim .dn{color:var(--orange)}.dchip.on.track .dn{color:var(--green)}.dchip.on.drift .dn{color:var(--purple)}
.dchip .ds{display:block;font-family:var(--label);font-size:7.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);margin-top:4px;line-height:1.2}

/* graphic discipline tile picker (swipe) — uses the RR-mark tiles */
.disc-hero{position:relative;border-radius:14px;overflow:hidden;margin-bottom:9px;padding:12px;min-height:112px;
  display:flex;flex-direction:column;border:1px solid rgba(var(--dh-rgb),0.55);
  background:radial-gradient(130% 110% at 50% 0%,rgba(var(--dh-rgb),0.2),transparent 60%),linear-gradient(165deg,#15151e,#0a0a11 80%)}
.disc-hero.sim{--dh:#FF8000;--dh-rgb:255,128,0}
.disc-hero.track{--dh:#00C864;--dh-rgb:0,200,100}
.disc-hero.drift{--dh:#b46aff;--dh-rgb:180,106,255}
.disc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(120deg,transparent 0 22px,rgba(255,255,255,0.015) 22px 23px)}
.disc-hero .dh-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.disc-hero .dh-brand{font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:-0.01em;color:rgba(244,244,248,0.5)}
.disc-hero .dh-brand b{color:var(--dh)}
.disc-hero .dh-brand .ai{font-family:var(--label);font-weight:400;font-size:6.5px;color:var(--faint)}
.disc-hero .dh-arrow{width:22px;height:22px;border-radius:50%;border:1px solid rgba(var(--dh-rgb),0.5);display:flex;align-items:center;justify-content:center;color:var(--dh);font-size:11px}
.disc-hero .dh-mark{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;padding:4px 0}
.disc-hero .dh-mark svg{width:46px;height:auto;filter:drop-shadow(0 4px 14px rgba(var(--dh-rgb),0.5))}
.disc-hero .dh-mark .c{fill:var(--dh)}.disc-hero .dh-mark .cs{stroke:var(--dh)}
.disc-hero .dh-mark .w{fill:#f4f4f8;opacity:0.95}.disc-hero .dh-mark .ws{stroke:#f4f4f8;opacity:0.95}
.disc-hero .dh-name{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:-0.02em;text-transform:uppercase;line-height:1;text-align:center;color:#fff;position:relative;z-index:2}
.disc-hero .dh-name .l{color:var(--dh)}
.disc-hero .dh-rule{width:22px;height:3px;border-radius:3px;background:var(--dh);margin:6px auto 5px;position:relative;z-index:2}
.disc-hero .dh-desc{font-family:var(--label);font-size:7.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);text-align:center;position:relative;z-index:2}
.disc-dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.disc-dots i{width:6px;height:6px;border-radius:50%;background:var(--border-2);transition:width .2s,background .2s}
.disc-dots i.on{width:17px;border-radius:3px}
.disc-dots i.on.sim{background:#FF8000}.disc-dots i.on.track{background:#00C864}.disc-dots i.on.drift{background:#b46aff}
/* supporting info card */
.pre-info{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:15px 16px;margin-bottom:14px}
.pre-info .pir{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.pre-info .pir:first-child{padding-top:0}.pre-info .pir:last-child{border-bottom:none;padding-bottom:0}
.pre-info .pir .k{font-family:var(--label);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint)}
.pre-info .pir .v{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--text)}
.pre-info .pir .v.ok{color:var(--green)}
.pre-info .pir .v.lo{color:var(--info,#5ec8ff)}
/* coach line */
.pre-coach{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:13px 15px;margin-bottom:auto}
.pre-coach .wv{display:inline-flex;align-items:flex-end;gap:2px;height:15px;flex-shrink:0}
.pre-coach .wv i{width:2.5px;border-radius:2px;background:var(--accent);animation:ltwave 1.2s ease-in-out infinite}
.pre-coach .wv i:nth-child(2){height:75%;animation-delay:.15s}.pre-coach .wv i:nth-child(3){animation-delay:.3s}.pre-coach .wv i:nth-child(4){animation-delay:.45s}
@keyframes ltwave{0%,100%{transform:scaleY(0.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.pre-coach .ct{flex:1;font-size:12px;color:var(--text)}
.pre-coach .ct small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
/* conditional brief — single line, dismissible (only when the coach has a pre-session insight) */
.pre-coach.brief{border-color:rgba(94,200,255,0.35);background:rgba(94,200,255,0.06)}
.pre-coach.brief .wv i{background:var(--coach,#5ec8ff)}
.pre-coach.brief .ct{font-size:11.5px;line-height:1.35}
.pre-coach .cp-x{flex-shrink:0;color:var(--faint);font-size:15px;line-height:1;cursor:pointer;padding:2px 2px 2px 6px}
/* start button (the consistent interaction) */
.start-cta{margin-top:16px;width:100%;border:none;border-radius:13px;padding:16px;cursor:pointer;
  font-family:var(--label);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
  background:var(--accent);color:#0a0a0f;display:flex;align-items:center;justify-content:center;gap:10px}
.start-cta.track{background:var(--green)}.start-cta.drift{background:var(--purple);color:#fff}.start-cta.sim{background:var(--orange)}

/* in-session shell (phone) */
.live{position:absolute;inset:0;display:flex;flex-direction:column;padding:8px 18px 16px;overflow:hidden}
.live.sim{--lc:#FF8000;--lc-rgb:255,128,0}
.live.track{--lc:#00C864;--lc-rgb:0,200,100}
.live.drift{--lc:#b46aff;--lc-rgb:180,106,255}
.live-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.live-venue{font-family:var(--label);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.live-venue::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lc);box-shadow:0 0 8px var(--lc);animation:ltp 1.4s infinite}
.live-rec{font-family:var(--label);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:#ff5b5b;display:flex;align-items:center;gap:5px}
.live-rec::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5b5b;animation:ltp 1.2s infinite}
/* hero number */
.live-lbl{font-family:var(--label);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint)}
.live-time{font-family:var(--mono);font-weight:500;font-size:46px;line-height:1.0;letter-spacing:-0.02em;font-variant-numeric:tabular-nums slashed-zero;color:var(--text);margin-top:4px}
.live-delta{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;padding:4px 9px;border-radius:6px;background:var(--surface);border:1px solid var(--border);margin-top:10px;font-variant-numeric:tabular-nums}
.live-delta.faster{color:var(--purple);border-color:rgba(180,106,255,0.4)}
.live-delta.slower{color:#ff5b5b;border-color:rgba(255,91,91,0.4)}
/* stat grid */
.live-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px}
.live-stats.c2{grid-template-columns:1fr 1fr}
.lst{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 10px}
.lst .k{font-family:var(--label);font-size:7.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.lst .v{font-family:var(--mono);font-weight:600;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.lst .v.g{color:var(--green)}.lst .v.pu{color:var(--purple)}.lst .v.hr{color:#ff5b5b}
/* sector bars (F1 colours) */
.live-sectors{display:flex;gap:6px;margin-top:14px}
.live-sectors .sc{flex:1;border-radius:7px;padding:9px 8px;text-align:center;border:1px solid var(--border);background:var(--surface)}
.live-sectors .sc.purple{background:rgba(168,85,247,0.18);border-color:#a855f7}
.live-sectors .sc.green{background:rgba(0,200,100,0.16);border-color:var(--green)}
.live-sectors .sc.yellow{background:rgba(234,179,8,0.16);border-color:#eab308}
.live-sectors .sc .sk{font-family:var(--label);font-size:7px;letter-spacing:0.12em;color:var(--muted)}
.live-sectors .sc .sv{font-family:var(--mono);font-weight:600;font-size:12px;margin-top:3px;color:var(--text)}
/* standings (sim) */
.live-stand{margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
/* scrollable in-HUD standings + tap-to-open hint */
.live-stand.scroll{max-height:120px;overflow-y:auto;scrollbar-width:none}
.live-stand.scroll::-webkit-scrollbar{display:none}
.live-stand-tap{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;font-family:var(--label);font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);border-top:1px dashed var(--border)}
.live-stand-tap::after{content:"⌄";font-size:12px}

/* Sim pairing — full-page standings modal beside the phone (portrait real estate) */
.simpair{display:flex;gap:26px;align-items:flex-start}
.fullmodal{width:286px;height:600px;border-radius:32px;overflow:hidden;flex-shrink:0;
  background:linear-gradient(180deg,#0e0e15,#08080d);border:1px solid var(--border-2);
  box-shadow:0 30px 70px -34px rgba(0,0,0,0.9);display:flex;flex-direction:column;position:relative}
.fullmodal .fm-grab{width:38px;height:4px;border-radius:3px;background:var(--border-2);margin:12px auto 4px}
.fullmodal .fm-head{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 14px;border-bottom:1px solid var(--border)}
.fullmodal .fm-title{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-0.02em}
.fullmodal .fm-title small{display:block;font-family:var(--label);font-size:8.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-top:3px}
.fullmodal .fm-x{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-2);background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px}
.fullmodal .fm-list{flex:1;overflow-y:auto;scrollbar-width:none;padding:6px 0}
.fullmodal .fm-list::-webkit-scrollbar{display:none}
.fmr{display:flex;align-items:center;gap:11px;padding:11px 20px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px}
.fmr.me{background:rgba(255,128,0,0.09)}
.fmr .p{font-family:var(--label);font-size:10px;color:var(--faint);width:26px}
.fmr.me .p{color:var(--orange)}
.fmr .nm{flex:1;min-width:0;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmr .nm b{font-family:var(--body);font-weight:600}
.fmr .last{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-right:2px}
.fmr .gap{color:var(--muted);font-variant-numeric:tabular-nums;width:46px;text-align:right}
.fmr.me .gap{color:var(--orange)}
.fmr .fast{color:#a855f7}
.fullmodal .fm-foot{padding:11px 20px;border-top:1px solid var(--border);font-family:var(--label);font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);text-align:center}
.fmcap{margin-top:13px;font-family:var(--label);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);max-width:286px;line-height:1.5;text-align:center}
.fmcap b{color:var(--orange)}
@media (max-width:760px){.simpair{flex-direction:column;align-items:center}}
.live-stand .sr{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px}
.live-stand .sr:last-child{border-bottom:none}
.live-stand .sr.me{background:rgba(255,128,0,0.08)}
.live-stand .sr .p{font-family:var(--label);font-size:9px;color:var(--faint);width:26px}
.live-stand .sr.me .p{color:var(--orange)}
.live-stand .sr .d{flex:1;color:var(--text)}
.live-stand .sr .g{color:var(--muted);font-variant-numeric:tabular-nums}.live-stand .sr.me .g{color:var(--orange)}
/* track map (track) */
.live-map{margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center}
.live-map svg{width:100%;height:90px}
.live-map .tk{fill:none;stroke:rgba(255,255,255,0.2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.live-map .dn2{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round}
.live-map .dt{fill:#fff;filter:drop-shadow(0 0 5px #fff)}

/* DRIFT live — angle gauge + building score */
.drift-angle{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.drift-angle .av{font-family:var(--mono);font-weight:700;font-size:62px;line-height:1;color:var(--purple);font-variant-numeric:tabular-nums;letter-spacing:-0.03em}
.drift-angle .av .deg{font-size:24px;color:var(--muted)}
.drift-angle .al{font-family:var(--label);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.drift-gauge{width:100%;margin-top:14px}
.drift-gauge svg{width:100%;height:64px;display:block}
.drift-live-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
.drift-status{margin-top:auto;text-align:center;font-family:var(--label);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);padding:12px}

/* DRIFT flashing overlay (while drifting) */
.drift-flash{position:absolute;inset:0;z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(180,106,255,0.32),rgba(180,106,255,0.12) 60%,rgba(10,8,16,0.55));
  animation:driftflash 0.5s ease-in-out infinite alternate}
@keyframes driftflash{from{background:radial-gradient(circle at 50% 45%,rgba(180,106,255,0.4),rgba(180,106,255,0.16) 60%,rgba(10,8,16,0.5))}
  to{background:radial-gradient(circle at 50% 45%,rgba(180,106,255,0.18),rgba(180,106,255,0.06) 60%,rgba(10,8,16,0.4))}}
.drift-flash .fa{font-family:var(--mono);font-weight:700;font-size:84px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(180,106,255,0.9);letter-spacing:-0.03em}
.drift-flash .fa .deg{font-size:30px;opacity:0.8}
.drift-flash .fl{font-family:var(--label);font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:#fff;margin-top:8px;opacity:0.9}
.drift-flash .fbar{width:64%;height:6px;border-radius:4px;background:rgba(255,255,255,0.2);margin-top:20px;overflow:hidden}
.drift-flash .fbar i{display:block;height:100%;width:72%;background:#fff;border-radius:4px}

/* DRIFT score popup (on complete) */
.drift-pop{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,5,12,0.78);backdrop-filter:blur(6px)}
.drift-pop .card{width:100%;background:linear-gradient(180deg,#181226,#0d0a16);border:1px solid rgba(180,106,255,0.4);border-radius:20px;padding:22px 20px;text-align:center;
  box-shadow:0 30px 70px -28px rgba(0,0,0,0.9),0 0 0 1px rgba(180,106,255,0.1)}
.drift-pop .rl{font-family:var(--label);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--purple);margin-bottom:8px}
.drift-pop .stars{font-size:26px;color:#fbbf24;letter-spacing:3px;margin-bottom:4px}
.drift-pop .stars .e{color:rgba(255,255,255,0.2)}
.drift-pop .score{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-0.03em;line-height:1;margin-bottom:16px}
.drift-pop .score .sm{font-size:18px;color:var(--muted)}
.drift-pop .pg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px}
.drift-pop .pgi{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:11px;padding:11px 8px}
.drift-pop .pgi .k{font-family:var(--label);font-size:7.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.drift-pop .pgi .v{font-family:var(--mono);font-weight:700;font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
.drift-pop .pgi .v.pu{color:var(--purple)}
.drift-pop .cont{font-family:var(--label);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}

/* end session bar (shared interaction) */
.end-bar{margin-top:14px;display:flex;gap:10px}
.end-bar .ebtn{flex:1;border-radius:11px;padding:13px;cursor:pointer;font-family:var(--label);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;text-align:center;border:1px solid}
.end-bar .stop{background:#ff5b5b;color:#fff;border-color:#ff5b5b}
.end-bar .fs{background:transparent;color:var(--muted);border-color:var(--border)}

/* ════════ POST-SESSION DEBRIEF (Coaching & Analysis hand-off) ════════ */
.debrief{position:absolute;inset:0;padding:8px 18px 16px;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
.debrief::-webkit-scrollbar{display:none}
.debrief.sim{--lc:#FF8000}.debrief.track{--lc:#00C864}.debrief.drift{--lc:#b46aff}
.db-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.db-eyebrow{font-family:var(--label);font-size:8.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--lc)}
.db-done{font-family:var(--label);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);border:1px solid rgba(0,200,100,0.4);border-radius:100px;padding:4px 9px}
.db-hero{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.02em;line-height:1.05;margin-bottom:3px}
.db-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:16px}
.db-headline{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px}
.db-headline .dl{font-family:var(--label);font-size:8px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.db-headline .dv{font-family:var(--mono);font-weight:700;font-size:26px;letter-spacing:-0.02em}
.db-headline .dv.pu{color:var(--purple)}.db-headline .dv.g{color:var(--green)}.db-headline .dv.lc{color:var(--lc)}
.db-headline .dd{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
/* coach debrief card — reviewing default; ready state is the cyan hero (B11). */
.db-coach{
  background:linear-gradient(180deg,rgba(94,200,255,0.08),rgba(94,200,255,0.02));
  border:1px solid rgba(94,200,255,0.3);border-left:3px solid #5ec8ff;
  border-radius:var(--radius-card,12px);padding:14px;margin-bottom:12px;
  transition:background .25s,border-color .25s,padding .25s,box-shadow .25s;
}
.db-coach .dch{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.db-coach .dav{width:28px;height:28px;border-radius:8px;background:rgba(94,200,255,0.14);border:1px solid rgba(94,200,255,0.4);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:11px;color:#5ec8ff;flex-shrink:0}
.db-coach .dcn{font-family:var(--display);font-weight:700;font-size:12px}
.db-coach .dcs{font-family:var(--label);font-size:7.5px;letter-spacing:0.12em;text-transform:uppercase;color:#5ec8ff}
.db-coach .dct{font-size:12.5px;color:var(--text);line-height:1.5}
.db-coach .dct b{color:#5ec8ff}
.db-coach .dlisten{margin-top:11px;display:inline-flex;align-items:center;gap:7px;background:#5ec8ff;color:#06121c;border:none;border-radius:8px;font-family:var(--label);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;padding:8px 12px;cursor:pointer}
.db-coach .dlisten .wv{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.db-coach .dlisten .wv i{width:2px;border-radius:2px;background:#06121c;animation:ltwave 0.9s ease-in-out infinite}
.db-coach .dlisten .wv i:nth-child(2){height:70%;animation-delay:.12s}.db-coach .dlisten .wv i:nth-child(3){animation-delay:.24s}
/* B11 — ready debrief is the main event (was dead: CSS targeted .ss-coach). */
.db-coach[data-state="ready"]{
  background:linear-gradient(135deg,rgba(94,200,255,0.16),rgba(94,200,255,0.04) 45%,var(--surface));
  border:1px solid rgba(94,200,255,0.45);border-left:3px solid #5ec8ff;
  padding:20px 18px 18px;
  box-shadow:0 12px 40px -18px rgba(94,200,255,0.45);
}
.db-coach[data-state="ready"] .dct{
  font-family:var(--display,'Inter Tight',sans-serif);font-weight:700;font-size:17px;
  color:#5ec8ff;line-height:1.25;
}
.db-coach[data-state="ready"] #ss-coach-sub{
  font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;
}
.db-coach[data-state="ready"] .ss-coach-spinner,
.db-coach[data-state="skipped"] .ss-coach-spinner{display:none}
.db-coach[data-state="skipped"]{
  background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.10);
  border-left-color:rgba(255,255,255,0.18);
}
.db-coach .ss-coach-ready-pill{display:none;margin-left:auto}
.db-coach[data-state="ready"] .ss-coach-ready-pill{display:inline-flex}
/* mini corner-phase list (sim/track) */
.db-corner{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px;margin-bottom:12px}
.db-corner .dch2{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.db-corner .dcn2{font-family:var(--display);font-weight:700;font-size:13px}
.db-corner .dcc{font-family:var(--mono);font-weight:700;font-size:13px;color:#ff5b5b}
.db-phases{display:flex;gap:4px}
.db-phases .dp{flex:1;text-align:center;padding:7px 3px;border-radius:6px;background:var(--surface-2)}
.db-phases .dp .dpk{font-family:var(--label);font-size:6.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.db-phases .dp.brake{background:rgba(255,91,91,0.16)}.db-phases .dp.brake .dpk{color:#ff8474}
.db-phases .dp.entry{background:rgba(251,191,36,0.16)}.db-phases .dp.entry .dpk{color:#fbbf24}
.db-phases .dp.apex{background:rgba(94,200,255,0.16)}.db-phases .dp.apex .dpk{color:#5ec8ff}
.db-phases .dp.exit{background:rgba(0,200,100,0.16)}.db-phases .dp.exit .dpk{color:var(--green)}
.db-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.db-actions .pri{border:none;border-radius:11px;padding:13px;cursor:pointer;font-family:var(--label);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;background:#5ec8ff;color:#06121c;text-align:center;text-decoration:none}
.db-actions .sec{border:1px solid var(--border);border-radius:11px;padding:12px;font-family:var(--label);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);text-align:center;text-decoration:none;background:transparent;cursor:pointer}
.db-actions .ss-skiplink{align-self:center;text-align:center;padding:6px 0}
.db-goal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px;margin-bottom:12px}
.db-goal .dgk{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
.db-goal .dgk .gn{font-weight:600}.db-goal .dgk .gp{font-family:var(--mono);font-weight:700;color:var(--lc)}
.db-goal .dgbar{height:6px;border-radius:3px;background:var(--border-2);overflow:hidden}
.db-goal .dgbar i{display:block;height:100%;border-radius:3px;background:var(--lc)}

/* ── portrait track map (compact) ── */
.live-map-sm{margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:12px}
.live-map-sm svg{width:84px;height:54px;flex-shrink:0}
.live-map-sm .tk{fill:none;stroke:rgba(255,255,255,0.2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.live-map-sm .dn2{fill:none;stroke:var(--lc,#00C864);stroke-width:3;stroke-linecap:round}
.live-map-sm .dt{fill:#fff;filter:drop-shadow(0 0 4px #fff)}
.live-map-sm .mi{flex:1;min-width:0}
.live-map-sm .mi .mk2{font-family:var(--label);font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint)}
.live-map-sm .mi .mv2{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--text);margin-top:3px}
.live-map-sm .mi .mv2 .pos{color:var(--lc,#00C864)}

/* ── transient coach prompt (fires with the audio icon, then fades) ── */
.coach-prompt{position:absolute;left:14px;right:14px;bottom:16px;z-index:25;
  display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:13px;
  background:rgba(13,20,28,0.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(94,200,255,0.45);border-left:3px solid #5ec8ff;
  box-shadow:0 18px 44px -20px rgba(0,0,0,0.9),0 0 30px -8px rgba(94,200,255,0.35);
  opacity:0;transform:translateY(14px) scale(0.98);pointer-events:none}
.coach-prompt.show{animation:coachprompt 4.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes coachprompt{
  0%{opacity:0;transform:translateY(14px) scale(0.98)}
  9%{opacity:1;transform:translateY(0) scale(1)}
  84%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-8px) scale(0.99)}
}
.coach-prompt .audio{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(94,200,255,0.16);border:1px solid rgba(94,200,255,0.5);color:#5ec8ff;position:relative}
.coach-prompt .audio .ring{position:absolute;inset:-1px;border-radius:11px;border:1px solid #5ec8ff;opacity:0;animation:coachring 1.1s ease-out infinite}
@keyframes coachring{0%{opacity:0.6;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
.coach-prompt .wv{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.coach-prompt .wv i{width:2.5px;border-radius:2px;background:#5ec8ff;animation:ltwave 0.85s ease-in-out infinite}
.coach-prompt .wv i:nth-child(2){height:75%;animation-delay:.1s}.coach-prompt .wv i:nth-child(3){animation-delay:.2s}.coach-prompt .wv i:nth-child(4){animation-delay:.3s}
.coach-prompt .cp-txt{flex:1;font-size:13px;line-height:1.4;color:#fff}
.coach-prompt .cp-txt b{color:#5ec8ff}
.coach-prompt .cp-txt small{display:block;font-family:var(--label);font-size:7.5px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(94,200,255,0.85);margin-bottom:3px}

@media (max-width:680px){
  .ph,.car{transform:scale(0.92)}
}

/* ════════ SIM START STATES (auto-arm → auto-start) ════════ */
/* The "Start" slot becomes a status chip for Sim — it fills itself. */
.sim-chip{margin-top:16px;width:100%;border-radius:13px;padding:15px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--label);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500}
.sim-chip.connect{background:rgba(94,200,255,0.1);border:1px solid rgba(94,200,255,0.5);color:#5ec8ff;flex-direction:column;gap:7px;padding:16px}
.sim-chip.connect .ct2{font-size:9px;letter-spacing:0.1em;color:var(--muted);text-transform:none;font-family:var(--body)}
.sim-chip.armed{background:rgba(255,128,0,0.1);border:1px solid rgba(255,128,0,0.45);color:#FF8000}
.sim-chip.armed .dot{width:7px;height:7px;border-radius:50%;background:#FF8000;animation:ltp 1.4s infinite}
.sim-chip.live{background:#FF8000;color:#0a0a0f}
.sim-chip.live .rec{width:8px;height:8px;border-radius:50%;background:#0a0a0f;animation:ltp 1s infinite}
.sim-chip .man{font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--muted);text-decoration:underline;margin-top:2px}
/* empty/connect hero state */
.pre-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:20px 6px}
.pre-empty .pe-ic{width:54px;height:54px;border-radius:15px;background:rgba(94,200,255,0.1);border:1px solid rgba(94,200,255,0.4);display:flex;align-items:center;justify-content:center;color:#5ec8ff;font-size:24px}
.pre-empty .pe-t{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-0.02em}
.pre-empty .pe-s{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:210px}
.pre-empty .pe-step{font-family:var(--mono);font-size:11px;color:#5ec8ff;background:var(--surface);border:1px solid rgba(94,200,255,0.3);border-radius:9px;padding:10px 13px;line-height:1.5}
.flowtag{display:flex;align-items:center;gap:9px;margin-top:11px;font-family:var(--label);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);justify-content:center}
.flowtag .ar{color:#5ec8ff}

/* ============================================================
   App-specific extensions — /live page components built on the
   design system. These extend the base components in live-timing.css
   with page-level layout, the discipline picker sliding indicator,
   the readiness checklist, coach hero band, debrief extensions,
   landscape cockpit, and utility animations.
   ============================================================ */

/* ── Fixed-viewport lock (native-app feel) ── */
html.live-lock, html.live-lock body{overflow:hidden;height:100%;position:fixed;inset:0;}

/* ── Circuit-green theme — the body.theme-circuit accent flip now lives
   once in tokens.css (it was forked here twice plus in analysis.html and
   coaching.html). ── */

/* ── Standby surface layout ── */
.ll-standby{
  display:none;
  padding:8px 4px 28px;
  animation:fade-in .35s ease-out;
  height:calc(100vh - 170px);overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ll-standby::-webkit-scrollbar{display:none}
.ll-standby.show{display:block}

/* ── Readiness checklist ── */
.ll-checklist{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:18px;
}
.ll-checkrow{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  width:100%;
}
.ll-checkrow:last-child{border-bottom:none}
.ll-checkrow.tappable{
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background .12s;
}
.ll-checkrow.tappable:last-child{border-bottom:none}
.ll-checkrow.tappable:hover{background:rgba(255,255,255,0.03)}
.ll-checkrow.tappable:active{background:rgba(255,255,255,0.05)}
.ll-checkrow-chevron{
  font-family:var(--mono);font-size:18px;color:var(--faint);
  flex:none;line-height:1;
}
.ll-checkrow.tappable:hover .ll-checkrow-chevron{color:var(--muted)}
.ll-checkrow-medallion{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--muted);
  font-size:13px;font-weight:600;
  flex:none;
  transition:background .2s,border-color .2s,color .2s;
}
.ll-checkrow.ok .ll-checkrow-medallion{
  background:rgba(0,200,100,0.18);
  border-color:rgba(0,200,100,0.55);
  color:var(--green);
}
.ll-checkrow-label{
  flex:1;
  font-family:var(--body);font-size:14px;color:var(--text);font-weight:500;
}
.ll-checkrow-value{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:0.05em;
}
.ll-checkrow.ok .ll-checkrow-value{color:var(--green)}

/* ── Start lights (decorative anticipation cue) ── */
.ll-startlights{
  display:flex;gap:14px;justify-content:center;
  padding:18px 0;
  margin-bottom:14px;
}
.ll-startlight{
  width:14px;height:14px;border-radius:50%;
  background:rgba(239,68,68,0.18);
  border:1px solid rgba(239,68,68,0.32);
  transition:background .25s,box-shadow .25s;
}
.ll-startlights.armed .ll-startlight{
  background:#ef4444;
  box-shadow:0 0 14px rgba(239,68,68,0.5);
}

/* ── CTA sub-text ── */
.ll-btn-sub{
  text-align:center;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:0.06em;
  margin-top:12px;
}
.ll-btn-sub.warn{color:var(--amber)}

/* ── Car editor inline mount ── */
.ll-car-editor{margin:0 0 18px;}

/* ── Timer split (whole + fraction) ── */
.live-time-wrap{display:inline;position:relative;}
.live-time-frac{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(28px,5vw,48px);
  line-height:1.0;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums slashed-zero;
  color:var(--text);
}

/* ── Sector progress bar (in-lap animation) ── */
.ll-sectorbar{
  display:flex;gap:4px;margin-bottom:14px;height:6px;
}
.ll-sectorbar-seg{flex:1;background:rgba(255,255,255,0.06);border-radius:3px}
.ll-sectorbar-seg.faster {background:var(--green)}
.ll-sectorbar-seg.slower {background:#eab308}
.ll-sectorbar-seg.optimal{background:#b46aff}

/* ── Coach hero band (Track in-session) ── */
.ll-coach-hero{
  background:linear-gradient(180deg,rgba(94,200,255,0.08),rgba(94,200,255,0.02));
  border:1px solid rgba(94,200,255,0.3);
  border-left:3px solid #5ec8ff;
  border-radius:12px;
  padding:14px;
  margin-bottom:18px;
  transition:padding .25s,border-color .25s;
}
.ll-coach-hero.speaking{
  border-color:rgba(94,200,255,0.55);
  background:linear-gradient(180deg,rgba(94,200,255,0.12),rgba(94,200,255,0.04));
}
.ll-coach-hero-row{display:flex;align-items:center;gap:10px;margin-bottom:0}
.ll-coach-hero.speaking .ll-coach-hero-row{margin-bottom:10px}
.ll-coach-byline{display:flex;align-items:center;gap:10px}
.ll-coach-byline-avatar{
  width:32px;height:32px;border-radius:8px;
  background:rgba(94,200,255,0.16);
  border:1px solid rgba(94,200,255,0.5);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:15px;color:#5ec8ff;
}
.ll-coach-byline-name{font-family:var(--display);font-weight:700;font-size:13px}
.ll-coach-byline-role{font-family:var(--label);font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:#5ec8ff}
.ll-soundwave{display:inline-flex;align-items:flex-end;gap:2px;height:22px;flex-shrink:0;margin-left:auto}
.ll-soundwave span{width:3px;border-radius:2px;background:#5ec8ff;animation:ltwave 1.1s ease-in-out infinite}
.ll-soundwave span:nth-child(2){height:70%;animation-delay:.13s}
.ll-soundwave span:nth-child(3){animation-delay:.26s}
.ll-soundwave span:nth-child(4){animation-delay:.39s}
.ll-soundwave span:nth-child(5){animation-delay:.52s}
.ll-coach-sentence{font-size:13px;color:var(--text);line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .35s,margin .35s}
.ll-coach-sentence.placeholder{max-height:60px;opacity:0.85;color:var(--muted)}
.ll-coach-hero.speaking .ll-coach-sentence{max-height:240px;opacity:1}
.ll-coach-sentence b{color:#5ec8ff}

/* ── App bar (sticky topbar in real-mode) ── */
.ll-appbar{
  display:none;align-items:center;gap:12px;
  padding:8px 0;margin-bottom:4px;
  font-family:var(--label);font-size:10px;
  letter-spacing:0.12em;text-transform:uppercase;
}
.ll-appbar.show{display:flex}
.ll-appbar-title{color:var(--faint)}
.ll-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:100px;
  font-size:9px;letter-spacing:0.1em;
}
.ll-pill.dot .dot{width:6px;height:6px;border-radius:50%}
.ll-pill.amber{background:rgba(251,191,36,0.12);color:#fbbf24}
.ll-pill.amber .dot{background:#fbbf24}
.ll-pill.green{background:rgba(0,200,100,0.12);color:var(--green)}
.ll-pill.green .dot{background:var(--green);animation:ltp 1.4s infinite}
.ll-pill.rose{background:rgba(255,91,91,0.12);color:#ff5b5b}
.ll-pill.rose .dot{background:#ff5b5b;animation:ltp 1s infinite}

/* ── Theme-moment overlays ── */
.ll-flash{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(255,128,0,0.18),transparent 60%);
  opacity:0;transition:opacity .15s;
}
.ll-flash.firing{opacity:1}
.ll-spot{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-60%);
  z-index:91;pointer-events:none;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(72px,14vw,130px);
  color:#fff;opacity:0;
  text-shadow:0 0 60px rgba(255,128,0,0.5);
}
.ll-spot.firing{animation:ll-spot-fire 1.7s ease-out forwards}
@keyframes ll-spot-fire{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  88%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}
}

/* ── Track map empty state ── */
.ll-map-empty{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--label);font-size:9px;letter-spacing:0.14em;
  color:var(--faint);
}

/* ── Offline lap buffer pill ── */
.buffered-pill{
  display:none;align-items:center;gap:8px;
  background:rgba(255,128,0,0.12);
  border:1px solid var(--orange);color:var(--orange);
  padding:6px 12px;border-radius:100px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  margin:8px 0;width:fit-content;
}
.buffered-pill.is-visible{display:inline-flex}
.buffered-pill .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange);
  animation:buffered-pulse 1.6s infinite;
}
body.theme-circuit .buffered-pill{
  background:rgba(0,200,100,0.12);
  border-color:var(--green);color:var(--green);
}
body.theme-circuit .buffered-pill .dot{background:var(--green)}
@keyframes buffered-pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ── Confetti canvas ── */
canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:70;}

/* ── Keyframes (shared) ── */
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
@keyframes pb-bounce{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ── RaceBox picker modal ── */
.rb-picker-backdrop{
  display:none;position:fixed;inset:0;z-index:150;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
.rb-picker-backdrop.show{display:flex}
.rb-picker-sheet{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:24px;
  width:min(400px,calc(100vw - 48px));max-height:70vh;
  overflow-y:auto;
}
.rb-picker-title{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:4px}
.rb-picker-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.rb-picker-list{display:flex;flex-direction:column;gap:8px}
.rb-picker-spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.rb-picker-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
.rb-picker-cancel,.rb-picker-rescan{
  font-family:var(--label);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;padding:9px 16px;border-radius:8px;cursor:pointer;
}
.rb-picker-cancel{background:transparent;color:var(--muted);border:1px solid var(--border)}
.rb-picker-rescan{background:var(--orange);color:#0a0a0f;border:none}

/* ── Session summary / debrief extensions ──
   .ss-pb-pill is PB purple (a personal best is a PB-purple moment, not a
   green sector) — see the base rule further down in the PR-D block.
   Ready-pill + cyan hero gate on `.db-coach[data-state=ready]` (B11) —
   the live markup uses .db-coach, not the legacy .ss-coach class. */
.session-summary.debrief.track .ss-pb-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--label);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
}
.ss-pb-pill.gain{background:rgba(180,106,255,0.15);color:#b46aff}
.ss-pb-pill.loss{background:rgba(255,91,91,0.12);color:#ff5b5b}
.ss-coach-spinner{
  width:16px;height:16px;border:2px solid rgba(94,200,255,0.2);
  border-top-color:#5ec8ff;border-radius:50%;
  animation:spin .7s linear infinite;margin-left:auto;
}
.ss-highlights{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-bottom:12px}
.ss-highlight-card{
  flex:0 0 auto;width:min(260px,72vw);scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;
}
.ss-highlight-card .sh-label{font-family:var(--label);font-size:7.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint)}
.ss-highlight-card .sh-value{font-family:var(--mono);font-weight:600;font-size:18px;margin-top:4px}
.ss-highlight-card .sh-desc{font-size:12px;color:var(--muted);margin-top:3px}

/* ── Debug toolbar (dev-only, ?debug=1) ── */
.live-debug{display:none;margin:10px 0;padding:10px 14px;
  background:var(--surface-2);border:1px dashed var(--border);
  border-radius:8px;font-size:12px;color:var(--muted)}
.live-debug.show{display:block}
.live-debug-label{font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.live-debug-label .pill{font-size:10px;background:var(--orange);color:#0a0a0f;padding:1px 6px;border-radius:4px;font-weight:700;text-transform:uppercase}
.simulate-lap-btn{
  font-family:var(--body);font-weight:600;font-size:12px;
  padding:7px 14px;border-radius:6px;cursor:pointer;
  background:var(--purple);color:#fff;border:none;
  transition:filter .15s,transform .15s;
}
.simulate-lap-btn:hover:not(:disabled){filter:brightness(1.15)}
.simulate-lap-btn:disabled{opacity:0.5;cursor:not-allowed}
.simulate-result{font-size:11px;margin-top:6px;color:var(--muted)}

/* ── Lap-crossing debug panel (dev-only, ?lapdebug=1) ── */
#lapdebug-panel{position:fixed;left:8px;bottom:8px;z-index:9999;
  width:min(340px,calc(100vw - 16px));max-height:46vh;display:flex;
  flex-direction:column;background:rgba(8,10,18,.92);color:#cfe;
  border:1px solid #2a3550;border-radius:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;
  line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.5);
  backdrop-filter:blur(4px)}
#lapdebug-panel .lapdebug-head{display:flex;align-items:center;
  justify-content:space-between;gap:6px;padding:5px 8px;
  border-bottom:1px solid #2a3550;font-weight:700;color:#9fd}
#lapdebug-panel .lapdebug-close{cursor:pointer;background:none;border:none;
  color:#9fd;font-size:13px;line-height:1;padding:0 2px}
#lapdebug-log{overflow-y:auto;padding:4px 8px 6px;white-space:pre-wrap;word-break:break-word}
#lapdebug-log .ld-row{padding:2px 0;border-bottom:1px solid #161c2c}
#lapdebug-log .ld-pass{color:#6f6}
#lapdebug-log .ld-fail{color:#f77}
#lapdebug-log .ld-ok{color:#6f6;font-weight:700}
#lapdebug-log .ld-no{color:#fb5;font-weight:700}

/* ── No-GPS banner ── */
.no-gps-banner{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--orange);
  border-left:3px solid var(--orange);
  border-radius:10px;
  padding:14px 16px;margin:0 0 22px;
}
.no-gps-banner.is-hidden{display:none}
.no-gps-icon{flex-shrink:0;color:var(--orange);display:flex;align-items:center;justify-content:center;width:32px;height:32px}
.no-gps-text{flex:1;font-size:13px;line-height:1.5;color:var(--muted)}
.no-gps-text strong{display:block;color:var(--text);font-size:14px;font-weight:600;margin-bottom:3px}
.no-gps-actions{display:flex;gap:8px;flex-wrap:wrap;align-self:center}
.no-gps-cta-primary,.no-gps-cta-secondary{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  padding:9px 14px;border-radius:6px;cursor:pointer;border:1px solid;
}
.no-gps-cta-primary{background:var(--orange);color:#0a0a0f;border-color:var(--orange)}
.no-gps-cta-secondary{background:transparent;color:var(--text);border-color:var(--border)}
@media (max-width:560px){
  .no-gps-banner{flex-wrap:wrap}
  .no-gps-actions{width:100%}
  .no-gps-cta-primary,.no-gps-cta-secondary{flex:1;text-align:center}
}

/* ── Arrival card ── */
.arrival-card{
  display:none;
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--orange);border-radius:14px;
  padding:18px 20px;margin-bottom:28px;
}
.arrival-card.show{display:block;animation:fade-in .35s ease-out}
.arrival-label{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.arrival-text{font-size:15px;color:var(--text);line-height:1.5;margin-bottom:14px}
.arrival-weather{display:flex;align-items:flex-start;gap:7px;margin-bottom:14px;font-size:13px;color:var(--muted);line-height:1.45}
.arrival-weather-icon{font-size:14px;line-height:1.4;flex:0 0 auto}
.arrival-weather-text{flex:1 1 auto}
.arrival-controls{display:flex;gap:10px;flex-wrap:wrap}
.play-coach-btn,.start-btn{
  font-family:var(--body);font-weight:600;font-size:13px;
  padding:10px 16px;border-radius:8px;cursor:pointer;border:1px solid;
}
.play-coach-btn{background:var(--orange);color:#0a0a0f;border-color:var(--orange)}
.play-coach-btn:disabled{opacity:0.6;cursor:wait}
.start-btn{background:transparent;color:var(--text);border-color:var(--border)}

/* ── Sim→real bridge pill ── */
.sim-bridge{
  display:block;
  background:var(--info-soft, rgba(94,200,255,0.12));
  border:1px solid var(--cyan, #5ec8ff);border-radius:10px;
  padding:10px 12px;margin-bottom:12px;
}
.sim-bridge-eyebrow{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:5px}
.sim-bridge-text{font-size:14px;color:var(--text);line-height:1.5}

/* [B66] The legacy .source-toggle sliding-indicator picker was removed —
   the discipline picker is now the single .dchip lane-coloured-tile paradigm
   (.disc-pick / .dchip, defined near the top of this file). */

/* ── PB banner ── */
.pb-banner{
  position:absolute;top:-8px;right:0;
  font-family:var(--hero);font-size:18px;letter-spacing:0.04em;
  color:var(--purple);
  opacity:0;transform:translateY(8px);
  transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.pb-banner.visible{opacity:1;transform:translateY(0)}

/* ── Landscape cockpit (portrait→landscape rotation) ── */
.land{ display:none; flex-direction:column; height:100vh; padding:6px 10px;
  background:var(--bg); overflow:hidden; }
.land-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:12px;
  flex:1; align-items:center; }
.land-speed{ font-family:'Bebas Neue',sans-serif; font-size:clamp(60px,9vw,96px);
  line-height:0.92; color:var(--text); }
.land-speed .u{ font-size:clamp(16px,2vw,22px); color:var(--muted);
  font-family:var(--label); }
.land-lap{ font-family:var(--mono); font-size:clamp(28px,4.5vw,44px);
  color:var(--accent); font-variant-numeric:tabular-nums; }
/* [B68] Gauge cluster — speed + gear share the top row of the first cell. */
.land-gauges{ display:flex; align-items:flex-end; gap:14px; }
.land-gear{ display:flex; flex-direction:column; align-items:center;
  padding:4px 10px; border-radius:8px; background:var(--surface);
  border:1px solid var(--border); }
.land-gear-k{ font-family:var(--label); font-size:9px; letter-spacing:0.12em;
  color:var(--muted); }
.land-gear-v{ font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,4.5vw,46px);
  line-height:1; color:var(--text); }
/* [B68] Predicted-lap tile — projected full lap from current pace. */
.land-pred{ display:flex; flex-direction:column; gap:2px; margin-top:8px;
  padding:6px 10px; border-radius:8px; background:var(--surface);
  border-left:3px solid var(--border); }
.land-pred-k{ font-family:var(--label); font-size:9px; letter-spacing:0.12em;
  color:var(--muted); text-transform:uppercase; }
.land-pred-v{ font-family:var(--mono); font-size:clamp(18px,2.6vw,26px);
  color:var(--text); font-variant-numeric:tabular-nums; }
.land-pred.best{ border-left-color:#a855f7; background:rgba(168,85,247,0.15); }
.land-pred.best .land-pred-v{ color:#c98bff; }
.land-sectors{ display:flex; flex-direction:column; gap:6px; }
.land-sectors .ls{ display:flex; justify-content:space-between; padding:7px 10px;
  border-radius:8px; background:var(--surface); border-left:3px solid var(--border);
  font-family:var(--mono); font-size:12px; }
.land-sectors .ls.purple{ border-left-color:#a855f7; background:rgba(168,85,247,0.15); }
.land-sectors .ls.green{ border-left-color:var(--green); background:rgba(0,200,100,0.12); }
.land-sectors .ls.yellow{ border-left-color:#eab308; background:rgba(234,179,8,0.12); }
.land-map{ flex:1; min-height:0; }
.land-map svg{ width:100%; height:100%; }
.land-map .tk{ fill:none; stroke:rgba(255,255,255,0.18); stroke-width:4; stroke-linecap:round; }
.land-map .dn2{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; }
.land-map .dt{ fill:#fff; }
.land-coach{ font-size:12px; color:var(--muted); text-align:center;
  border-top:1px solid var(--border); padding-top:8px; margin-top:6px; }
.land-end{ position:absolute; top:10px; right:14px; z-index:10;
  font-family:var(--label); font-size:10px; letter-spacing:0.1em;
  color:#ff5b5b; border:1px solid rgba(255,91,91,0.5); border-radius:100px;
  padding:5px 11px; background:transparent; cursor:pointer; }

/* ── Landscape orientation: hide portrait, show landscape ── */
@media (orientation: landscape) and (max-width: 940px) {
  body.standby-active .ll-standby,
  body.standby-active .disc-pick,
  body.running-active .ll-running,
  body.mode-drift .ll-drift-running{ display:none !important; }
  .land{ display:flex !important; }
}


/* ============================================================
   PAGE-LEVEL RULES — ported from web/live.html inline <style> (B64).
   The inline <style> block was retired so this file is the single
   source of truth for /live styling. These rules are the live /live
   page's actual styling (page shell: .layout / main / html,body /
   body.theme-circuit; plus the .ll-* running HUD, RaceBox picker
   bottom-sheet, circuit-green theme-moment flash/spot, and debrief
   extensions). Where a selector here ALSO appears above (the
   cross-device showcase variant), this later copy wins at equal
   specificity so the live page renders exactly as before — see the
   B64 report for the conflict list flagged for design sign-off.
   ============================================================ */
/* ─── /live visual system (post v2 port, 2026-05-31) ──────────────
   Anchors:
     body[data-page-key="live"]   — page identifier (sidebar.js)
     body.theme-circuit           — JS toggles when on track in real mode
     .locked   on rb-pill / gps-pill — GPS or RaceBox lock state
     .show     on arrival-card / plan-card — JS reveal
     .is-hidden on no-gps-banner — JS hide when GPS lands
     .on + .sim/.track/.drift on src-sim/src-real/src-drift — selected discipline tile (.dchip)
     .faster / .slower on delta readouts — sign-coloured time deltas
   Don't remove or rename these without auditing the inline script. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* v2 palette + type tokens now live in /static/tokens.css (loaded
   after app.css in the head). Page-specific styles only below. */

html,body{
  background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
}
/* Circuit-green theme — JS toggles body.theme-circuit when the user
   is actively on track in real mode. The action accent flips to
   green, signalling "you are recording real laps". The accent flip
   itself lives in tokens.css (body.theme-circuit) so /live, /analysis
   and /coaching share one definition. */
/* Logo theming: previously forced orange under theme-circuit.
   As of 2026-06-04 the lockup follows the theme — green when
   circuit is active. Override removed; app.css handles it. */

/* B64 #2 — discipline accent for the theme-moment flash/spot. /live signals
   the active discipline only via the body classes it already toggles (no
   body.lane-* here): default = sim (orange), body.theme-circuit = circuit
   (green), body.mode-drift = drift (purple). --theme-accent-rgb carries that
   accent as an "r,g,b" triple so .ll-flash / .ll-spot recolour per discipline
   with no hard-coded hex (see the theme-moment section below). Mirrors the
   discipline-accent values in tokens.css (--accent-rgb per body.lane-*). */
body{ --theme-accent-rgb:255,128,0; }            /* sim — orange  */
body.theme-circuit{ --theme-accent-rgb:0,200,100; }   /* circuit — green */
body.mode-drift{ --theme-accent-rgb:180,106,255; }    /* drift — purple */

a{color:inherit}

/* ── Layout — sidebar + main, mobile drops the sidebar via app.css ─ */
.layout{display:block}
main{
  margin-left:240px;
  padding:28px 22px 120px;       /* tightened top so the standby surface fits the viewport */
  max-width:760px;
}
@media (max-width:980px){
  main{margin-left:0;padding:18px 20px 110px}
}
@media (max-width:560px){
  main{padding:14px 18px 100px}
}

/* ── No-GPS banner (top-of-page empty state for real-track) ─────── */
.no-gps-banner{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--orange);
  border-left:3px solid var(--orange);
  border-radius:10px;
  padding:14px 16px;margin:0 0 22px;
}
.no-gps-banner.is-hidden{display:none}
.no-gps-icon{
  flex-shrink:0;color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
}
.no-gps-icon .icon{width:22px;height:22px}
.no-gps-text{flex:1;font-size:13px;line-height:1.5;color:var(--muted);min-width:200px}
.no-gps-text strong{
  display:block;color:var(--text);font-size:14px;font-weight:600;
  margin-bottom:3px;letter-spacing:-0.005em;
}
.no-gps-actions{display:flex;gap:8px;flex-wrap:wrap;align-self:center}
.no-gps-cta-primary,.no-gps-cta-secondary{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:9px 14px;border-radius:6px;cursor:pointer;
  border:1px solid;white-space:nowrap;
  transition:filter .15s,background .15s;
}
.no-gps-cta-primary{background:var(--orange);color:#0a0a0f;border-color:var(--orange)}
.no-gps-cta-primary:hover{filter:brightness(1.1)}
.no-gps-cta-secondary{background:transparent;color:var(--text);border-color:var(--border)}
.no-gps-cta-secondary:hover{border-color:var(--muted);background:var(--surface-2)}
@media (max-width:560px){
  .no-gps-banner{flex-wrap:wrap}
  .no-gps-actions{width:100%}
  .no-gps-cta-primary,.no-gps-cta-secondary{flex:1;text-align:center}
}

/* Status pill + venue hero/meta — superseded by .pre-pill + .pre-hero + .pre-meta
   in .ll-standby. @keyframes pulse kept in live-timing.css for the .dot animation. */

/* ── Discipline picker (prominent full-width selector) ────────────
   [B66] Three equal lane-coloured tiles — Sim (orange) / Track (green) /
   Drift (purple) — the selected one lit via .dchip.on.{sim|track|drift}
   (defined near the top of this file). The legacy .source-toggle
   sliding-orange-indicator paradigm that lived here was removed: it is
   replaced by the single .dchip tile paradigm, so a world reads as
   "this lane is loaded" via its own colour, not a shared orange fill. */

/* (The manual .fs-toggle chip was removed 2026-06-11 — rotation is
   the only entry into the in-car landscape stage now.) */

/* ── Arrival card (shown when GPS matches a track) ───────────────── */
.arrival-card{
  display:none;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--orange);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:28px;
}
.arrival-card.show{display:block;animation:fade-in .35s ease-out}
.arrival-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:10px;
}
.arrival-text{font-size:15px;color:var(--text);line-height:1.5;margin-bottom:14px}
/* [B1] sim→real bridge pill — cyan to read as the cross-world insight
   (vs the orange coach framing of the card itself). */
.sim-bridge{
  display:block;
  background:var(--info-soft);
  border:1px solid var(--cyan);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:12px;
}
.sim-bridge-eyebrow{
  display:block;
  font-family:var(--mono);font-size:9px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:5px;
}
.sim-bridge-text{font-size:14px;color:var(--text);line-height:1.5}
/* [B8] arrival weather note — subordinate to the coach line: muted
   text, a small icon, no heavy card chrome (the sim-bridge gets the
   boxed treatment because it's the moat line; weather is a footnote). */
.arrival-weather{
  display:flex;align-items:flex-start;gap:7px;
  margin-bottom:14px;
  font-size:13px;color:var(--text-dim);line-height:1.45;
}
.arrival-weather-icon{font-size:14px;line-height:1.4;flex:0 0 auto}
.arrival-weather-text{flex:1 1 auto}
.arrival-controls{display:flex;gap:10px;flex-wrap:wrap}
.play-coach-btn,.start-btn{
  font-family:var(--body);font-weight:600;font-size:13px;
  padding:10px 16px;border-radius:8px;cursor:pointer;
  border:1px solid;transition:filter .15s,background .15s,transform .15s;
}
.play-coach-btn{
  background:var(--orange);color:#0a0a0f;border-color:var(--orange);
}
.play-coach-btn:hover:not(:disabled){filter:brightness(1.1)}
.play-coach-btn:disabled{opacity:0.6;cursor:wait}
.start-btn{
  background:transparent;color:var(--text);border-color:var(--border);
}
.start-btn:hover{border-color:var(--muted);background:var(--surface-2)}
/* [B13a] Debug toolbar — shown when walk-test or debug mode is on. */
.live-debug{display:none;margin:10px 0;padding:10px 14px;
  background:var(--surface-2);border:1px dashed var(--border);
  border-radius:8px;font-size:12px;color:var(--muted)}
.live-debug.show{display:block}
.live-debug-label{font-weight:600;margin-bottom:8px;display:flex;
  align-items:center;gap:6px}
.live-debug-label .pill{font-size:10px;background:var(--orange);
  color:#0a0a0f;padding:1px 6px;border-radius:4px;font-weight:700;
  text-transform:uppercase}
.simulate-lap-btn{
  font-family:var(--body);font-weight:600;font-size:12px;
  padding:7px 14px;border-radius:6px;cursor:pointer;
  background:var(--purple);color:#fff;border:none;
  transition:filter .15s,transform .15s;
}
.simulate-lap-btn:hover:not(:disabled){filter:brightness(1.15)}
.simulate-lap-btn:disabled{opacity:0.5;cursor:not-allowed}
.simulate-result{font-size:11px;margin-top:6px;color:var(--muted)}
/* [B13b] Per-gate lap-crossing debug readout — dev-only floating panel,
   only inserted into the DOM when ?lapdebug=1 (or ?walk=1) is active. */
#lapdebug-panel{position:fixed;left:8px;bottom:8px;z-index:9999;
  width:min(340px,calc(100vw - 16px));max-height:46vh;display:flex;
  flex-direction:column;background:rgba(8,10,18,.92);color:#cfe;
  border:1px solid #2a3550;border-radius:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;
  line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.5);
  backdrop-filter:blur(4px)}
#lapdebug-panel .lapdebug-head{display:flex;align-items:center;
  justify-content:space-between;gap:6px;padding:5px 8px;
  border-bottom:1px solid #2a3550;font-weight:700;color:#9fd}
#lapdebug-panel .lapdebug-close{cursor:pointer;background:none;border:none;
  color:#9fd;font-size:13px;line-height:1;padding:0 2px}
#lapdebug-log{overflow-y:auto;padding:4px 8px 6px;white-space:pre-wrap;
  word-break:break-word}
#lapdebug-log .ld-row{padding:2px 0;border-bottom:1px solid #161c2c}
#lapdebug-log .ld-pass{color:#6f6}
#lapdebug-log .ld-fail{color:#f77}
#lapdebug-log .ld-ok{color:#6f6;font-weight:700}
#lapdebug-log .ld-no{color:#fb5;font-weight:700}
@keyframes fade-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Sim in-session wrapper (#sim-card). Inherits the .live.sim surface
   from live-timing.css; this keeps the legacy .timer-hero spacing the
   wrapper relied on. The old .timer-hero/.timer-label/.timer-value/
   .timer-delta cluster (the pre-redesign big-timer view) was retired
   in B64 — the sim live view is now .live.sim. */
#sim-card{margin-bottom:28px;position:relative}

/* Re-home .live.sim into page flow. The base .live (line ~117) is
   position:absolute;inset:0;overflow:hidden because it was authored inside the
   phone-mockup .ph-body; every real-page surface needs a page-context override
   to undo that (see the [B65] block near the bottom — .ll-drift-running is the
   same move for drift, and .session-summary for the track debrief).
   .live.sim NEVER GOT ONE: its only rule was the --lc colour var, so inside
   #sim-card it collapsed to ~24px and overflow:hidden CLIPPED the entire HUD —
   the lap time, sectors and best lap all laid out below the cut.
   Nobody saw it because the HUD never displayed at all: `onTrack` read
   `me.current_lap_time`, a field the telemetry socket has never sent, so
   #sim-live was display:none for its whole life and this layout was never once
   exercised. Fixing the data bug is what surfaced this. The comment in that
   [B65] block claiming #sim-card already "re-homes .live.sim" was aspirational.
   Pinned by tests/e2e/test_sim_live_hud_journey.py, which asserts the surface
   RENDERS (a real height), not merely that the DOM nodes exist. */
#sim-card > .live.sim{
  position:relative;
  inset:auto;
  min-height:calc(100vh - 240px);
  max-width:520px;
  margin:8px auto 0;
  padding:6px 14px 40px;
  overflow:visible;
}

/* PB banner — sliding Bebas hero moment */
.pb-banner{
  position:absolute;top:-8px;right:0;
  font-family:var(--hero);font-size:18px;letter-spacing:0.04em;
  color:var(--purple);
  opacity:0;transform:translateY(8px);
  transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.pb-banner.visible{opacity:1;transform:translateY(0)}

/* ── Stat row — three breathing pills ────────────────────────────── */

/* HR tile — hidden by default (display set by JS on first valid
   BPM reading; class toggles tint the value by exertion zone). */

/* Real-track card CSS retired — superseded by .ll-standby + .ll-running + .debrief */
/* ─────────────────────────────────────────────────────────────
   LIVE-TIMING REDESIGN — Standby surface (PR A, claude design
   brief §4.1 + shared primitives §5). Adds:
     - Live AppBar (sticky topbar with session-state + GPS pills)
     - Pre-flight grid (eyebrow + Bebas venue + Real-track pill +
       car line)
     - Readiness checklist (GPS / Car / Coach with check medallions)
     - Start lights row (5 red dots for anticipation cue)
     - Oversized Start CTA with sub-line
   Visible while real-mode is selected AND session hasn't started
   (`real.phase === 'PADDOCK'` + `currentSource === 'real'`).
   When session starts, the standby surface hides and the existing
   real-card takes over (PR B will redesign that running view).
   ───────────────────────────────────────────────────────────── */

/* Live AppBar — replaces nothing yet, sits at the very top of the
   body. Has 3 cells: leading back/menu, centred LIVE TIMING title
   with state pill, trailing GPS pill + END button when relevant. */
.ll-appbar{
  position:sticky;top:0;z-index:30;
  display:none;align-items:center;gap:10px;
  padding:14px 16px 12px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 80%,transparent 100%);
}
.ll-appbar.show{display:flex;flex-wrap:wrap;row-gap:8px}
.ll-appbar-title{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--orange);
  flex:1;text-align:left;
}
body.theme-circuit .ll-appbar-title{color:var(--green)}
.ll-appbar-spacer{flex:1}

/* Pill primitive — used in AppBar + Standby. Variants:
     .ll-pill (default ghost)
     .ll-pill.solid (inverted onto colour)
     .ll-pill.dot   (leading status dot)
   Colour-coded via .ll-pill.amber / .green / .cyan / .orange / .rose. */
.ll-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:100px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--muted);
}
.ll-pill .dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;box-shadow:0 0 8px currentColor;
}
.ll-pill.amber  { color:var(--amber, #fbbf24); background:rgba(251,191,36,0.10); border-color:rgba(251,191,36,0.33); }
.ll-pill.green  { color:var(--green);               background:rgba(0,200,100,0.10);  border-color:rgba(0,200,100,0.33); }
.ll-pill.cyan   { color:#5ec8ff;               background:rgba(94,200,255,0.10); border-color:rgba(94,200,255,0.33); }
.ll-pill.orange { color:var(--orange);          background:rgba(255,128,0,0.10);  border-color:rgba(255,128,0,0.33); }
.ll-pill.rose   { color:var(--red);               background:rgba(255,91,91,0.10); border-color:rgba(255,91,91,0.33); }
.ll-pill.solid.green { background:var(--green); color:#0a0a0f; border-color:var(--green); }
/* Raw status passthrough — the appbar GPS pill mirrors the verbose
   #rb-status diagnostic ("streaming: N chunks…") during a session so
   the eyebrow tells the truth while we test. Normal-case + wraps so
   the full line is readable; this is intentionally unpolished and
   will become a graceful one-liner later (user direction 2026-06-06). */
.ll-pill.raw{
  text-transform:none;letter-spacing:0.02em;
  max-width:72vw;white-space:normal;line-height:1.25;text-align:left;
}

/* ── Fixed-surface lock ──
   Every surface on /live (standby, running HUD, drift panel, sim
   card, debrief) fills the viewport and does NOT scroll. The page
   body locks to prevent overscroll/bounce; each surface is its own
   self-contained block. The checklist card can scroll internally
   if it overflows, but the surface itself stays put — native-app feel. */
html.live-lock, html.live-lock body{overflow:hidden;height:100%;position:fixed;inset:0;}

/* ── Standby surface ── */
.ll-standby{
  display:none;
  padding:8px 4px 28px;
  animation:fade-in .35s ease-out;
  /* Fill the viewport below the appbar + discipline picker. */
  height:calc(100vh - 170px);overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ll-standby::-webkit-scrollbar{display:none}
.ll-standby.show{display:block}
.ll-standby-eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--orange);
  display:flex;align-items:center;gap:10px;
  margin:14px 0 8px;
}
.ll-standby-eyebrow::before{
  content:'';display:block;width:24px;height:1px;background:var(--orange);
}
body.theme-circuit .ll-standby-eyebrow{color:var(--green)}
body.theme-circuit .ll-standby-eyebrow::before{background:var(--green)}
.ll-standby-title{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:48px;line-height:0.92;letter-spacing:0.01em;
  color:var(--text);margin:0 0 10px;
}
.ll-standby-context{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  margin-bottom:22px;
}
.ll-standby-car{letter-spacing:0.04em}
/* Coach state as an eyebrow chip in the heading row (was a checklist row). */
.ll-standby-coach{
  font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--green);padding:3px 9px;border-radius:100px;
  background:rgba(0,200,100,0.12);border:1px solid rgba(0,200,100,0.40);
}
/* Pre-flight phase eyebrow, relocated into the heading row. */
.ll-standby-phase{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--faint);
}

/* Readiness checklist card — rows fill green as each is satisfied. */
.ll-checklist{
  background:var(--surface);
  border:1px solid var(--border, rgba(255,255,255,0.08));
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:18px;
}
.ll-checkrow{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  width:100%;
}
.ll-checkrow:last-child{border-bottom:none}
/* Tappable rows — GPS / Track / Car. Reset the button defaults
   (they're <button> elements now) + add affordance. */
.ll-checkrow.tappable{
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background .12s;
}
.ll-checkrow.tappable:last-child{border-bottom:none}
.ll-checkrow.tappable:hover{background:rgba(255,255,255,0.03)}
.ll-checkrow.tappable:active{background:rgba(255,255,255,0.05)}
.ll-checkrow-chevron{
  font-family:var(--mono);font-size:18px;color:var(--faint, #5e5e72);
  flex:none;line-height:1;
}
.ll-checkrow.tappable:hover .ll-checkrow-chevron{color:var(--muted)}
/* A satisfied (.ok) row keeps its chevron quiet — it's still
   editable, just not demanding attention. */
.ll-car-editor{margin:0 0 18px;}
.ll-checkrow-medallion{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--muted);
  font-size:13px;font-weight:600;
  flex:none;
  transition:background .2s,border-color .2s,color .2s;
}
.ll-checkrow.ok .ll-checkrow-medallion{
  background:rgba(0,200,100,0.18);
  border-color:rgba(0,200,100,0.55);
  color:var(--green);
}
.ll-checkrow-label{
  flex:1;
  font-family:var(--body);font-size:14px;color:var(--text);font-weight:500;
}
.ll-checkrow-value{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:0.05em;
}
.ll-checkrow.ok .ll-checkrow-value{color:var(--green)}

/* Start lights row — decorative anticipation cue. 5 red dots. */
.ll-startlights{
  display:flex;gap:14px;justify-content:center;
  padding:18px 0;
  margin-bottom:14px;
}
.ll-startlight{
  width:14px;height:14px;border-radius:50%;
  background:rgba(239,68,68,0.18);
  border:1px solid rgba(239,68,68,0.32);
  transition:background .25s,box-shadow .25s;
}
.ll-startlights.armed .ll-startlight{
  background:#ef4444;
  box-shadow:0 0 14px rgba(239,68,68,0.5);
}

/* Oversized primary Start button. */
.ll-btn-big{
  display:block;width:100%;
  padding:18px 22px;
  border:none;cursor:pointer;
  background:var(--orange);color:#0a0a0f;
  font-family:var(--body);font-weight:600;font-size:16px;
  border-radius:14px;
  transition:filter .15s,transform .15s,box-shadow .2s;
  box-shadow:0 0 0 0 rgba(255,128,0,0.45);
}
.ll-btn-big:hover{
  filter:brightness(1.06);
  box-shadow:0 0 30px rgba(255,128,0,0.32);
}
.ll-btn-big:active{transform:translateY(1px)}
.ll-btn-big:disabled{opacity:0.55;cursor:not-allowed}
body.theme-circuit .ll-btn-big{background:var(--green)}
.ll-btn-sub{
  text-align:center;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:0.06em;
  margin-top:12px;
}
.ll-btn-sub.warn{color:var(--amber, #fbbf24)}

/* End-session variant — same oversized footprint as the Start CTA
   so the primary action stays in the same place through the whole
   session, just recoloured to a stop/danger red. Replaces the old
   tiny top-right "End" eyebrow (user direction 2026-06-06). The
   red is pinned even under theme-circuit, which otherwise flips
   --orange → green and would tint this button. */
.ll-btn-big.stop{
  background:var(--red);color:#fff;
  margin-top:22px;
  box-shadow:0 0 0 0 rgba(239,68,68,0.45);
}
.ll-btn-big.stop:hover{
  filter:brightness(1.06);
  box-shadow:0 0 30px rgba(239,68,68,0.32);
}
body.theme-circuit .ll-btn-big.stop{background:var(--red)}

/* When standby OR a running session is active, the redesigned
   surface (pre-flight checklist + Start button, or the live HUD)
   IS the page. Retire ALL the legacy chrome in BOTH states — user
   direction 2026-06-06: the old page HTML must not show underneath
   the new screen layout, and that applies during the session too,
   not just pre-flight. The .disc-pick discipline picker is relocated
   ABOVE the standby in the DOM so it survives this.
   Legacy elements hidden while the new .ll-standby / .ll-running surfaces
   are active. Keep only elements still in the DOM. */
body.standby-active .arrival-card,
body.standby-active #sim-card,
body.standby-active .plan-card,
body.standby-active .buffered-pill,
body.standby-active .empty-state,
body.running-active .arrival-card,
body.running-active .plan-card,
body.running-active .buffered-pill,
body.running-active .empty-state{ display:none !important; }

/* Drift Mode hides sim/track-specific standby chrome so nothing
   legacy bleeds in under the drift panel. */
body.mode-drift #sim-card,
body.mode-drift .arrival-card,
body.mode-drift .plan-card,
body.mode-drift .buffered-pill,
body.mode-drift .empty-state,
body.mode-drift .ll-startlights,
body.mode-drift #session-summary{ display:none !important; }

/* B11 — when the session-complete debrief is up, hide pre-flight chrome
   even if a stale body class races the toggle. */
body.debrief-active .disc-pick,
body.debrief-active .ll-standby,
body.debrief-active .pre,
body.debrief-active #sim-card,
body.debrief-active .live-debug,
body.debrief-active #lapdebug-panel,
body.debrief-active .arrival-card,
body.debrief-active .plan-card,
body.debrief-active .empty-state{
  display:none !important;
}
/* NOTE: .ll-standby is intentionally NOT hidden for mode-drift —
   it's the consistent standby shell for ALL three disciplines. */

/* ── Per-discipline standby content gating ───────────────────────
   The .pre shell (.ll-standby) is the consistent standby surface for
   ALL three disciplines. .ll-disc-prep (readiness rows) and
   .ll-disc-cta (start button / sim-chip) are toggled by JS via the
   data-disc attribute on .ll-standby. */
.ll-standby[data-disc="sim"]   .ll-disc-prep:not(#ll-prep-sim),
.ll-standby[data-disc="sim"]   .ll-disc-cta:not(.sim-chip):not(#ll-sim-disconnected-chip):not(#ll-sim-armed-chip):not(#ll-sim-live-chip):not(#ll-sim-manual-start),
.ll-standby[data-disc="track"] .ll-disc-prep:not(#ll-prep-track),
.ll-standby[data-disc="track"] .ll-disc-cta:not(#ll-btn-start),
.ll-standby[data-disc="drift"] .ll-disc-prep:not(#ll-prep-drift),
.ll-standby[data-disc="drift"] .ll-disc-cta:not(#ll-drift-btn-start){ display:none !important; }

/* ─────────────────────────────────────────────────────────────
   LIVE-TIMING REDESIGN — Running HUD (PR B, brief §4.3).
   During-session glance surface. The legacy real-card (and the
   rest of the old chrome) is fully hidden by the shared
   body.running-active rule above; this HUD takes the whole page.
   Composition top→bottom:
     1. Current-lap clock (centered, big mono)
     2. Sector splits + sector bar (3 cells, signed deltas)
     3. Coach-line hero band (cyan gradient — single loudest item)
     4. Track-map + readouts (BEST LAP / GAP TO PB)
     5. Oversized End-session button (mirrors the standby Start CTA)
   ───────────────────────────────────────────────────────────── */
.ll-running{display:none;padding:6px 4px 24px;animation:fade-in .35s ease-out;
  height:calc(100vh - 130px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.ll-running::-webkit-scrollbar{display:none}
.ll-running.show{display:block}

.ll-lapclock-wrap{
  display:flex;justify-content:center;align-items:baseline;gap:0;
  padding:10px 0 6px;font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.ll-lapclock{font-size:62px;font-weight:500;line-height:1;letter-spacing:0.01em;color:var(--text)}
.ll-lapclock-frac{font-size:32px;font-weight:400;color:var(--muted);margin-left:2px}
.ll-lapclock-label{
  text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--faint,#5e5e72);margin-bottom:14px;
}

/* Lap clock + speedo side-by-side row (portrait running HUD). The
   lap clock keeps its size on the left; the speedo + G stack on the
   right, aligned to the clock baseline. Left-align the clock within
   its column (the standalone label/clock are center-aligned). */
.ll-clockrow{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:14px;margin-bottom:14px;
}
.ll-clockcol .ll-lapclock-label{text-align:left;margin-bottom:6px}
.ll-clockcol .ll-lapclock-wrap{justify-content:flex-start;padding:0}
.ll-speedcol{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  padding-bottom:4px;
}
.ll-speedo{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ll-speedo-num{font-size:40px;font-weight:500;line-height:1;color:var(--text)}
.ll-speedo-unit{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--faint,#5e5e72);
}
.ll-gline{display:flex;align-items:baseline;gap:6px}
.ll-gline-label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--faint,#5e5e72);
}
.ll-gline-val{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:16px;color:var(--muted);
}

.ll-sectorbar{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
  height:5px;margin-bottom:10px;
}
.ll-sectorbar-seg{background:rgba(255,255,255,0.06);border-radius:3px}
.ll-sectorbar-seg.faster {background:var(--green)}
.ll-sectorbar-seg.slower {background:#eab308}
.ll-sectorbar-seg.optimal{background:#b46aff}

.ll-sectors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px}
.ll-sector{
  background:var(--surface);
  border:1px solid var(--border,rgba(255,255,255,0.08));
  border-radius:12px;padding:10px 12px 11px;
}
.ll-sector-label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--faint,#5e5e72);margin-bottom:4px;
}
.ll-sector-value{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:16px;color:var(--muted);
}
.ll-sector.faster .ll-sector-value{color:var(--green)}
.ll-sector.slower .ll-sector-value{color:#eab308}
.ll-sector.optimal .ll-sector-value{color:#b46aff}

/* B64 #3 — ADOPT DESIGN: always-on cyan coach card (replaces the live-page
   transparent-collapse override). The card is always visible — tinted cyan
   gradient fill, cyan border + a thicker (4px) cyan left-edge accent, per the
   showcase treatment. The soundwave still animates only while the coach speaks
   (.ll-soundwave.active) and the sentence still expands on .ll-coach-hero.speaking
   (driven by the #coach-audio play/ended lifecycle). */
.ll-coach-hero{
  background:linear-gradient(180deg,rgba(94,200,255,0.08),rgba(94,200,255,0.02));
  border:1px solid rgba(94,200,255,0.3);
  border-left:4px solid #5ec8ff;
  border-radius:12px;padding:14px;margin-bottom:18px;
  transition:background .25s ease,border-color .25s ease,padding .25s ease,margin-bottom .25s ease;
}
.ll-coach-hero.speaking{
  background:linear-gradient(180deg,rgba(94,200,255,0.12),rgba(94,200,255,0.04));
  border-color:rgba(94,200,255,0.55);
  border-left-color:#5ec8ff;
  padding:14px 16px 16px;margin-bottom:18px;
}
.ll-coach-hero-row{display:flex;align-items:center;gap:10px;margin-bottom:0}
.ll-coach-hero.speaking .ll-coach-hero-row{margin-bottom:10px}
.ll-coach-byline{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
/* B64 #4 — ADOPT DESIGN: rounded-square translucent tile (cyan border + cyan
   "C"), replacing the circular solid-cyan disc. */
.ll-coach-byline-avatar{
  width:32px;height:32px;border-radius:8px;
  background:rgba(94,200,255,0.16);
  border:1px solid rgba(94,200,255,0.5);
  color:#5ec8ff;
  font-family:'Bebas Neue',sans-serif;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.ll-coach-byline-name{
  font-family:'Inter Tight',sans-serif;font-weight:700;font-size:13px;
  color:var(--text);line-height:1.1;
}
.ll-coach-byline-role{
  font-family:var(--mono);font-size:9px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--faint,#5e5e72);margin-top:2px;
}
.ll-coach-sentence{
  font-family:var(--body);font-size:21px;font-weight:600;
  line-height:1.3;color:var(--text);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease,opacity .2s ease;
}
.ll-coach-hero.speaking .ll-coach-sentence{max-height:240px;opacity:1}
.ll-coach-sentence.placeholder{color:var(--muted);font-weight:500;font-size:16px}

.ll-soundwave{display:flex;align-items:flex-end;gap:3px;height:18px;flex:none}
.ll-soundwave span{
  display:block;width:3px;height:30%;background:#5ec8ff;border-radius:1.5px;
  transform-origin:bottom;
}
.ll-soundwave.active span{animation:llwave 0.7s ease-in-out infinite}
.ll-soundwave.active span:nth-child(2){animation-delay:0.12s}
.ll-soundwave.active span:nth-child(3){animation-delay:0.24s}
.ll-soundwave.active span:nth-child(4){animation-delay:0.36s}
.ll-soundwave.active span:nth-child(5){animation-delay:0.48s}
@keyframes llwave{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1.0)}}

.ll-bottomrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.ll-readout{
  background:var(--surface);
  border:1px solid var(--border,rgba(255,255,255,0.08));
  border-radius:12px;padding:12px 14px 13px;
}
.ll-readout-label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--faint,#5e5e72);margin-bottom:4px;
}
.ll-readout-value{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:20px;color:var(--text);
}
.ll-readout-value.faster{color:var(--green)}
.ll-readout-value.slower{color:#eab308}
/* Live track map tile (left of the best/gap readouts). */
.ll-map{
  background:var(--surface);
  border:1px solid var(--border,rgba(255,255,255,0.08));
  border-radius:12px;padding:10px 12px 12px;
  display:flex;flex-direction:column;aspect-ratio:1/1;min-height:0;
}
.ll-map-label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--faint,#5e5e72);margin-bottom:6px;
}
.ll-map-svgwrap{position:relative;flex:1;min-height:0}
.ll-map-svg, #ll-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ll-map-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--faint,#5e5e72);
}
.ll-readouts-col{display:grid;grid-template-rows:1fr 1fr;gap:10px;min-width:0}
.ll-readouts-col .ll-readout{display:flex;flex-direction:column;justify-content:center}

/* (The old .ll-end-btn appbar "End" eyebrow was removed
   2026-06-06 — ending a session is now the oversized #ll-btn-end
   button at the bottom of the running HUD.) */

/* ── RaceBox picker modal ──────────────────────────────────── */
/* Bottom-sheet modal that surfaces ALL RaceBoxes in range so the
   user explicitly picks one. Replaces the silent first-match
   behaviour from the original requestDevice flow. User report
   2026-06-06: when 2+ RaceBoxes are nearby, the wrong one could
   be paired without warning. */
.rb-picker-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(6px);
  display:none;
  align-items:flex-end;justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.rb-picker-backdrop.show{display:flex;animation:fade-in 0.2s ease-out}
.rb-picker-sheet{
  width:100%;max-width:440px;
  background:var(--surface);
  border-top:1px solid rgba(255,255,255,0.08);
  border-radius:18px 18px 0 0;
  padding:22px 20px 24px;
  box-shadow:0 -24px 60px rgba(0,0,0,0.5);
  animation:rb-picker-slide 0.28s cubic-bezier(0.2,0.85,0.25,1);
}
@keyframes rb-picker-slide{
  from{transform:translateY(60%);opacity:0}
  to  {transform:translateY(0);opacity:1}
}
.rb-picker-title{
  font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:0.02em;
  color:var(--text);margin:0 0 4px;
}
.rb-picker-sub{
  font-family:var(--body);font-size:13px;color:var(--muted);
  margin-bottom:14px;line-height:1.4;
}
.rb-picker-list{
  display:flex;flex-direction:column;gap:8px;
  max-height:50vh;overflow-y:auto;
  margin:0 -4px 4px;
}
.rb-picker-item{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;padding:14px 16px;
  cursor:pointer;text-align:left;width:100%;
  color:var(--text);font-family:inherit;
  transition:background .15s,border-color .15s,transform .12s;
}
.rb-picker-item:hover{
  background:rgba(255,128,0,0.08);
  border-color:rgba(255,128,0,0.40);
}
.rb-picker-item:active{transform:translateY(1px)}
.rb-picker-item-name{
  flex:1;min-width:0;font-weight:500;font-size:14px;
}
.rb-picker-item-rssi{
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;
  color:var(--muted);flex:none;
}
.rb-picker-empty{
  text-align:center;padding:26px 12px;
  font-family:var(--body);font-size:14px;color:var(--muted);
}
.rb-picker-spinner{
  width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(94,200,255,0.30);
  border-top-color:#5ec8ff;
  animation:rb-spin 0.8s linear infinite;
  margin:18px auto 8px;
}
@keyframes rb-spin{to{transform:rotate(360deg)}}
.rb-picker-actions{
  display:flex;gap:10px;margin-top:8px;
}
.rb-picker-cancel{
  flex:1;padding:12px 16px;border-radius:10px;
  background:transparent;color:var(--muted);
  border:1px solid rgba(255,255,255,0.12);
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
}
.rb-picker-rescan{
  padding:12px 16px;border-radius:10px;
  background:rgba(255,128,0,0.12);color:var(--orange);
  border:1px solid rgba(255,128,0,0.45);
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
}

/* ─────────────────────────────────────────────────────────────
   Closed-course acknowledgment modal (#cc-ack).
   Reuses the .rb-picker-backdrop / .rb-picker-sheet bottom-sheet so it
   matches the house dialog style. Adds an uppercase eyebrow, a tinted
   primary confirm button (green=Track / purple=Drift) + a subtle
   discipline-accented top edge on the sheet.
   ───────────────────────────────────────────────────────────── */
.cc-ack-eyebrow{
  display:block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.cc-ack--track .cc-ack-eyebrow{color:var(--green)}
.cc-ack--drift .cc-ack-eyebrow{color:var(--purple)}
.cc-ack-body{
  font-size:14px;color:var(--text);line-height:1.5;margin-bottom:16px;
}
.cc-ack-sheet{
  border-top:2px solid rgba(255,255,255,0.10);
}
.cc-ack--track .cc-ack-sheet{border-top-color:rgba(0,200,100,0.55)}
.cc-ack--drift .cc-ack-sheet{border-top-color:rgba(180,106,255,0.55)}
.cc-ack-actions{margin-top:4px}
/* Confirm button — primary, discipline-tinted. Cancel reuses .rb-picker-cancel. */
.cc-ack-confirm{
  flex:1;padding:13px 16px;border-radius:10px;border:none;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:#0a0a0f;
  background:var(--orange);
}
.cc-confirm--track{background:var(--green);color:#04150c}
.cc-confirm--drift{background:var(--purple);color:#16071f}
.cc-ack-confirm:active{transform:translateY(1px)}

/* ─────────────────────────────────────────────────────────────
   LIVE-TIMING REDESIGN — Theme moment (PR C, brief §4.2).
   Fires ONCE on the first start/finish crossing (OUT_LAP → TIMED_LAP
   transition, lapNum=1). Three layers:
     1. body.theme-circuit class — already handled by updateTheme()
        below; the action accent flips per discipline.
     2. Radial wash overlay — opacity 0.95 → 0 over 1.7s.
     3. LAP 1 spotlight — scale 0.7 → 1.06 → 1 with a text-shadow
        bloom over 1.4s.
   prefers-reduced-motion: instant class toggle, no wash/bloom.

   B64 #2 — ADOPT DESIGN, DISCIPLINE-TINTED: the showcase geometry (the
   larger clamp()-sized spotlight + bolder wash) recoloured by the active
   discipline via --theme-accent-rgb (sim=orange, circuit=green,
   drift=purple — defined next to body.theme-circuit above). No hard-coded
   hex: every colour reads rgba(var(--theme-accent-rgb), …).
   ───────────────────────────────────────────────────────────── */
.ll-flash{
  position:fixed;inset:0;z-index:100;
  pointer-events:none;
  background:radial-gradient(circle at 50% 40%,
    rgba(var(--theme-accent-rgb),0.95) 0%,
    rgba(var(--theme-accent-rgb),0.5) 30%,
    rgba(var(--theme-accent-rgb),0.0) 60%);
  opacity:0;
  display:none;
}
.ll-flash.firing{
  display:block;
  animation:rrFlash 1.7s ease-out forwards;
}
@keyframes rrFlash{
  0%   { opacity:0.95; }
  100% { opacity:0;    }
}

/* Lap 1 spotlight — sits centred and overlaid for 1.4s. The
   same effect can also target an existing #real-lap-count or
   a new dedicated badge; we use a dedicated badge so the
   legacy DOM stat is untouched. The size adopts the showcase's
   clamp() spotlight (bigger than the old fixed 120px). */
.ll-spot{
  position:fixed;left:0;right:0;
  top:38%;
  z-index:101;
  pointer-events:none;
  text-align:center;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(72px,14vw,130px);line-height:1;letter-spacing:0.04em;
  color:rgb(var(--theme-accent-rgb));
  text-shadow:0 0 40px rgba(var(--theme-accent-rgb),0.85),
              0 0 80px rgba(var(--theme-accent-rgb),0.55);
  opacity:0;display:none;
}
.ll-spot.firing{
  display:block;
  animation:rrSpot 1.4s ease-out forwards;
}
@keyframes rrSpot{
  0%   { opacity:0;    transform:scale(0.7); }
  40%  { opacity:1;    transform:scale(1.06);}
  100% { opacity:0;    transform:scale(1);   }
}

@media (prefers-reduced-motion: reduce) {
  .ll-flash.firing,
  .ll-spot.firing{
    display:none !important;
    animation:none !important;
  }
}

/* ── Debrief card ───────────────────────────────────── */
/* Replaces the real-card region once the user taps End session.
   Layout: header → stats grid → conditions chip row → coach
   progress strip → actions. Animates in to mark the transition
   from "still driving" to "session ended". */
.session-summary{
  background:var(--surface);
  border:1px solid rgba(255,128,0,0.22);
  border-radius:16px;
  padding:24px 22px 22px;
  margin-bottom:28px;
  animation:ss-in .42s ease-out;
}
@keyframes ss-in {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}
.ss-header{margin-bottom:18px}
.ss-eyebrow{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--orange);margin-bottom:6px;
}
body.theme-circuit .ss-eyebrow{color:var(--green)}
.ss-title{
  font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:0.02em;
  color:var(--text);margin:0;line-height:1;
}
.ss-sub{
  font-family:var(--body);font-size:13px;color:var(--muted);
  margin-top:4px;line-height:1.4;
}
.ss-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:14px;
}
.ss-stat{
  background:rgba(0,0,0,0.28);border-radius:10px;padding:12px 14px;
}
.ss-stat-label{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:4px;
}
.ss-stat-value{
  font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--text);
  letter-spacing:0.02em;line-height:1.05;
}
.ss-conditions{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;
}
.ss-cond-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;background:rgba(0,0,0,0.32);
  border:1px solid rgba(255,255,255,0.06);border-radius:999px;
  font-family:var(--body);font-size:12px;color:var(--muted);
}
/* Highlights deck — horizontal scroll-snap cards. The driver swipes
   through "where your time is", tyre-work, braking & grip etc. Each
   card is text-forward (headline + detail) with a kind accent. */
.ss-highlights{
  display:flex;gap:10px;margin-bottom:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;
}
.ss-highlights::-webkit-scrollbar{display:none}
.ss-hl-card{
  flex:0 0 78%;max-width:300px;scroll-snap-align:start;
  background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:14px 16px;
  border-left:3px solid var(--orange);
}
body.theme-circuit .ss-hl-card{border-left-color:var(--green)}
.ss-hl-card[data-kind="money_corner"]{border-left-color:#5ec8ff}
.ss-hl-card[data-kind="slip"]{border-left-color:#f0b429}
.ss-hl-card[data-kind="friction_circle"]{border-left-color:#c084fc}
.ss-hl-title{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px;
}
.ss-hl-headline{
  font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:0.02em;
  color:var(--text);line-height:1;margin-bottom:6px;
}
.ss-hl-detail{
  font-family:var(--body);font-size:12px;color:var(--muted);line-height:1.45;
}
.ss-coach{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:rgba(255,128,0,0.06);
  border:1px solid rgba(255,128,0,0.18);border-radius:10px;
  margin-bottom:14px;transition:background .25s,border-color .25s;
}
.ss-coach[data-state="ready"]{
  background:rgba(0,200,100,0.08);border-color:rgba(0,200,100,0.32);
}
.ss-coach[data-state="skipped"]{
  background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08);
}
.ss-coach-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,128,0,0.25);
  border-top-color:var(--orange);
  animation:ss-spin 0.8s linear infinite;
  flex:none;
}
.ss-coach[data-state="ready"] .ss-coach-spinner,
.ss-coach[data-state="skipped"] .ss-coach-spinner{display:none}
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-coach-body{flex:1;min-width:0}
.ss-coach-title{
  font-family:var(--body);font-weight:600;font-size:14px;color:var(--text);
  line-height:1.3;
}
.ss-coach-sub{
  font-family:var(--body);font-size:12px;color:var(--muted);
  margin-top:2px;line-height:1.4;
}
.ss-actions{
  display:flex;flex-wrap:wrap;gap:10px;
}
.ss-btn{
  font-family:'DM Mono',monospace;font-weight:600;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:11px 18px;border-radius:8px;cursor:pointer;text-decoration:none;
  border:1px solid transparent;display:inline-flex;align-items:center;
  transition:filter .15s,background .15s,border-color .15s;
}
.ss-btn-primary{
  background:var(--orange);color:#0a0a0a;border-color:var(--orange);
}
body.theme-circuit .ss-btn-primary{
  background:var(--green);border-color:var(--green);
}
.ss-btn-primary:hover{filter:brightness(1.08)}
.ss-btn-secondary{
  background:transparent;color:var(--text);
  border-color:rgba(255,255,255,0.12);
}
.ss-btn-secondary:hover{
  background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.2);
}
.ss-btn-tertiary{
  background:transparent;color:var(--muted);border:none;
}
.ss-btn-tertiary:hover{color:var(--text)}

/* ─────────────────────────────────────────────────────────────
   LIVE-TIMING REDESIGN — Session complete polish (PR D,
   brief §4.4). Layers onto #151's session-summary card:
     - .ss-pb-pill — "New PB −0.50s" floating chip next to Best
     - .ss-coach.ready treatment → cyan-gradient debrief hero
       with VoiceByline + bigger CTA + Skip-to-debrief link
     - .ss-skiplink — secondary text link "Skip to the debrief →"
   Brief: "The ready debrief is the main event, not a toast."
   ───────────────────────────────────────────────────────────── */

/* PB delta pill — visible only when sessionEnd reveals best beat
   the user's stored PB. Sits inline with the BEST stat value.
   PB purple, per the brand's PB role. This block used to re-declare
   .gain in green, which shadowed the purple rule in the debrief block
   above (same specificity, later in the file) — so every "new PB" pill
   rendered green. One colour, declared here. */
.ss-pb-pill{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:8px;padding:3px 8px;border-radius:100px;
  font-family:'DM Mono',monospace;font-weight:600;font-size:10px;
  letter-spacing:0.08em;text-transform:uppercase;
  background:rgba(180,106,255,0.15);color:#b46aff;
  border:1px solid rgba(180,106,255,0.40);
}
.ss-pb-pill::before{content:'+';margin-right:1px}
.ss-pb-pill.gain::before{content:'−'}

/* Clean-laps chip — slots into .ss-conditions row. Placeholder
   text until invalid-lap detection is wired; hides when no
   data. */
.ss-cond-chip.ss-clean{
  color:var(--text);
}

/* Ready-pill — small "Ready" chip in the cyan hero header (B11). */
.ss-coach-ready-pill{
  display:none;align-items:center;gap:4px;
  padding:3px 9px;border-radius:100px;
  font-family:'DM Mono',monospace;font-weight:600;font-size:9.5px;
  letter-spacing:0.14em;text-transform:uppercase;
  background:rgba(94,200,255,0.20);color:#5ec8ff;
  border:1px solid rgba(94,200,255,0.45);
  margin-left:auto;
}

/* Skip-to-debrief secondary link — shown when the brief is ready. */
.ss-skiplink{
  display:none;
  margin-top:4px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:#5ec8ff;
  text-decoration:none;background:none;border:none;cursor:pointer;
  padding:0;align-self:flex-start;
}
.db-coach[data-state="ready"] ~ .db-actions .ss-skiplink,
.ss-coach[data-state="ready"] ~ .ss-actions .ss-skiplink,
.ss-coach[data-state="ready"] ~ .db-actions .ss-skiplink{display:inline-block}
.ss-skiplink:hover{filter:brightness(1.15)}

/* Best-lap time goes green when the session set a PB (B11). */
.db-headline .dv.is-pb{color:var(--green,#00C864)}

/* Clean-laps chip — reads as a condition row, not buried muted text. */
#ss-clean{
  display:none;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:12px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card,12px);
  font-family:var(--label,'DM Mono',monospace);font-size:10px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
#ss-clean-text{font-family:var(--mono);font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--text);font-weight:600}


/* ── Plan card ───────────────────────────────────────────────────── */
.plan-card{
  display:none;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:18px 20px;
  margin-bottom:28px;
}
.plan-card.show{display:block;animation:fade-in .35s ease-out}
.plan-eyebrow{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px;
}
.plan-title{
  font-family:var(--display);font-weight:700;font-size:22px;
  letter-spacing:-0.02em;margin-bottom:6px;
}
.plan-meta{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.5}

/* ── Empty state — pulls up the bottom-sheet ────────────────────── */
.empty-state{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:22px;text-align:left;
  margin-bottom:28px;
}
.empty-state strong{
  display:block;font-family:var(--display);font-weight:700;
  font-size:20px;letter-spacing:-0.01em;
  color:var(--text);margin-bottom:8px;
}
.empty-state span{display:block;color:var(--muted);font-size:14px;margin-bottom:14px}
.btn-pick-venue{
  background:var(--orange);color:#0a0a0f;border:none;
  padding:11px 18px;border-radius:8px;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:13px;
}
.btn-pick-venue:hover{filter:brightness(1.1)}

/* Bottom-sheet styles now live in /static/sheet.css (loaded via
   the link in <head>). The empty-state CTA opens RR.sheet (see
   wireVenueSheet JS below). */

/* ── Confetti canvas ────────────────────────────────────────────── */
canvas#confetti{
  position:fixed;inset:0;pointer-events:none;z-index:70;
}

/* [B48] Landscape cockpit — shown when device is rotated and width ≤ 940px.
   Replaces the fullscreen toggle. Portrait surfaces stay visible in the DOM
   but hidden via the media query; the landscape view mirrors the same data. */
@media (orientation: landscape) and (max-width: 940px) {
  body.standby-active .ll-standby,
  body.standby-active .disc-pick,
  body.running-active .ll-running,
  body.mode-drift .ll-drift-running{ display:none !important; }
  .land{ display:flex !important; }
}
.land{ display:none; flex-direction:column; height:100vh; padding:6px 10px;
  background:var(--bg); overflow:hidden; }
.land-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:12px;
  flex:1; align-items:center; }
.land-speed{ font-family:'Bebas Neue',sans-serif; font-size:clamp(60px,9vw,96px);
  line-height:0.92; color:var(--text); }
.land-speed .u{ font-size:clamp(16px,2vw,22px); color:var(--muted);
  font-family:var(--label); }
.land-lap{ font-family:var(--mono); font-size:clamp(28px,4.5vw,44px);
  color:var(--accent); font-variant-numeric:tabular-nums; }
/* [B68] Gauge cluster — speed + gear share the top row of the first cell. */
.land-gauges{ display:flex; align-items:flex-end; gap:14px; }
.land-gear{ display:flex; flex-direction:column; align-items:center;
  padding:4px 10px; border-radius:8px; background:var(--surface);
  border:1px solid var(--border); }
.land-gear-k{ font-family:var(--label); font-size:9px; letter-spacing:0.12em;
  color:var(--muted); }
.land-gear-v{ font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,4.5vw,46px);
  line-height:1; color:var(--text); }
/* [B68] Predicted-lap tile — projected full lap from current pace. */
.land-pred{ display:flex; flex-direction:column; gap:2px; margin-top:8px;
  padding:6px 10px; border-radius:8px; background:var(--surface);
  border-left:3px solid var(--border); }
.land-pred-k{ font-family:var(--label); font-size:9px; letter-spacing:0.12em;
  color:var(--muted); text-transform:uppercase; }
.land-pred-v{ font-family:var(--mono); font-size:clamp(18px,2.6vw,26px);
  color:var(--text); font-variant-numeric:tabular-nums; }
.land-pred.best{ border-left-color:#a855f7; background:rgba(168,85,247,0.15); }
.land-pred.best .land-pred-v{ color:#c98bff; }
.land-sectors{ display:flex; flex-direction:column; gap:6px; }
.land-sectors .ls{ display:flex; justify-content:space-between; padding:7px 10px;
  border-radius:8px; background:var(--surface); border-left:3px solid var(--border);
  font-family:var(--mono); font-size:12px; }
.land-sectors .ls.purple{ border-left-color:#a855f7; background:rgba(168,85,247,0.15); }
.land-sectors .ls.green{ border-left-color:var(--green); background:rgba(0,200,100,0.12); }
.land-sectors .ls.yellow{ border-left-color:#eab308; background:rgba(234,179,8,0.12); }
.land-map{ flex:1; min-height:0; }
.land-map svg{ width:100%; height:100%; }
.land-map .tk{ fill:none; stroke:rgba(255,255,255,0.18); stroke-width:4; stroke-linecap:round; }
.land-map .dn2{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; }
.land-map .dt{ fill:#fff; }
.land-coach{ font-size:12px; color:var(--muted); text-align:center;
  border-top:1px solid var(--border); padding-top:8px; margin-top:6px; }
.land-end{ position:absolute; top:10px; right:14px; z-index:10;
  font-family:var(--label); font-size:10px; letter-spacing:0.1em;
  color:#ff5b5b; border:1px solid rgba(255,91,91,0.5); border-radius:100px;
  padding:5px 11px; background:transparent; cursor:pointer; }

/* Fullscreen panel retired (2026-06-21) — landscape rotation uses .land cockpit */

/* Offline lap buffer pill — surfaced when one or more real-track
   laps are queued in IndexedDB awaiting a network window. Sits
   above the discipline picker so it's visible even with the keyboard
   up. Hidden when count is 0. */
.buffered-pill{
  display:none;align-items:center;gap:8px;
  background:rgba(255,128,0,0.12);
  border:1px solid var(--orange);color:var(--orange);
  padding:6px 12px;border-radius:100px;
  font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  margin:8px 0;width:fit-content;
}
.buffered-pill.is-visible{display:inline-flex}
.buffered-pill .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange);
  animation:buffered-pulse 1.6s infinite;
}
body.theme-circuit .buffered-pill{
  background:rgba(0,200,100,0.12);
  border-color:var(--green);color:var(--green);
}
body.theme-circuit .buffered-pill .dot{background:var(--green)}
@keyframes buffered-pulse {
  0%,100%{opacity:1}50%{opacity:0.4}
}

/* ═══════════════════════════════════════════════════════════════════
   [B65] DRIFT — unified onto the shared shell.
   The base .live / .debrief / .drift-flash / .drift-pop classes above are
   position:absolute (authored inside the phone mockup .ph-body). On the
   real /live page the drift running + results surfaces sit in normal page
   flow, so these page-context overrides reset them — mirroring how
   #sim-card / .ll-running / .session-summary re-home .live.sim and
   .debrief.track. live-timing.css is now the single source of truth for
   drift's look (the old inline <style> block + #drift-panel were removed).
   ═══════════════════════════════════════════════════════════════════ */

/* Running surface — .live.drift in page flow. position:relative makes it
   the containing block for the absolute .drift-flash / .drift-pop overlays,
   and the min-height gives those full-bleed overlays room to cover the HUD. */
.ll-drift-running{
  position:relative;
  inset:auto;
  min-height:calc(100vh - 200px);
  max-width:520px;
  margin:8px auto 0;
  padding:6px 14px 90px;
  animation:fade-in .35s ease-out;
}

/* Results surface — .debrief.drift in page flow (mirrors .session-summary). */
.ll-drift-results{
  position:relative;
  inset:auto;
  max-width:520px;
  margin:8px auto 28px;
  padding:24px 22px 22px;
  background:var(--surface);
  border:1px solid rgba(180,106,255,0.22);
  border-radius:16px;
  overflow:visible;
  animation:ss-in .42s ease-out;
}

/* Closed-course safety ack — re-homed into #ll-prep-drift from the retired
   #drift-setup. Sits below the readiness rows inside the .pre-info card. */
/* Per-run results rows in the drift debrief (optimistic + server-rescored). */
.drift-results-row{
  display:flex;align-items:center;gap:12px;
  background:var(--surface-2,rgba(255,255,255,0.04));
  border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;margin-bottom:8px;text-align:left;
  font-family:var(--body);font-size:13px;color:var(--text);
}
.drift-results-row.five{border-color:rgba(180,106,255,0.5)}
.drr-stars{font-size:15px;color:#FF8000;white-space:nowrap}
.drift-results-row.five .drr-stars{color:var(--purple)}

/* [B67] §3.9 — best run highlight + Commitment goal bar in .debrief.drift.
   Accent uses the drift lane colour (--lc:#b46aff set on .debrief.drift). */
.drift-best-run{
  background:linear-gradient(180deg,rgba(180,106,255,0.10),rgba(180,106,255,0.03));
  border:1px solid rgba(180,106,255,0.30);border-radius:14px;
  padding:14px 15px;margin:4px 0 16px;text-align:left;
}
.dbr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dbr-label{font-family:var(--label,var(--mono));font-size:8.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--lc,#b46aff)}
.dbr-stars{font-size:15px;color:var(--lc,#b46aff);white-space:nowrap}
.dbr-stat{font-family:var(--mono);font-size:12px;color:var(--text);margin-bottom:12px}
.dbr-goal-head{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--label,var(--mono));font-size:9px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.dbr-goal-bar{height:6px;border-radius:100px;background:rgba(255,255,255,0.08);overflow:hidden}
.dbr-goal-bar > i{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,#8a4dff,#b46aff);transition:width .5s ease-out}