/* ============================================================
   LapFoundry — global styles
   Dark motorsport theme, mobile-first, touch-friendly.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0b0e14;
  --bg2: #11161f;
  --panel: #161d29;
  --panel2: #1c2534;
  --line: #607590;
  --line2: rgba(104, 128, 171, .36);
  --asphalt: #0f141c;
  --carbon: #111823;
  --track-surface: #262f3d;
  --track-edge: #6f809d;
  --stroke-soft: rgba(104,128,171,.24);
  --text: #e8edf5;
  --muted: #93a1b8;
  --accent: #ff725b;      /* warm racing red — primary actions */
  --accent2: #ff8a2a;     /* orange — throttle/energy */
  --good: #3ddc84;
  --warn: #ffd23f;
  --bad: #ff5d5d;
  --brake: #ff5d5d;
  --throttle: #3ddc84;
  --gold: #ffcf4d;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 12px 26px rgba(0,0,0,.20);
  --shadow-panel: 0 22px 48px rgba(0,0,0,.32);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overscroll-behavior: none;
  /* iOS can inflate text on rotate to landscape without this */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background:
    linear-gradient(180deg, #090c12 0%, var(--bg) 46%, #070a0f 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 30px);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.btn, .tappable, .pedal, .ctl-btn, .home-tab {
  -webkit-user-select: none;
  user-select: none;
}

#app {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
#app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 23%, rgba(41,211,255,.05) 23.2% 23.5%, transparent 23.7% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 42px);
  opacity: .50;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.10) 52%, rgba(0,0,0,.45));
}

/* ---------- typography ---------- */
h1, h2, h3 { font-weight: 800; letter-spacing: 0.2px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .title[tabindex="-1"]:focus { outline: none; }
.small { font-size: 13px; color: var(--muted); }
.kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--accent);
}
.large-text .small { font-size: 15px; line-height: 1.5; }
.large-text .kicker { font-size: 13px; letter-spacing: 1.4px; }
.large-text .metric span,
.large-text .skill-tile span,
.large-text .rank-pill,
.large-text .decision-type,
.large-text .hud-pill { font-size: 13px; }
.large-text .btn,
.large-text .quiz-opt { font-size: 15px; }
.large-text .pit-home-telemetry span,
.large-text .score-columns span,
.large-text .line-detail span,
.large-text .decision-readback span,
.large-text .licence-stamp span,
.large-text .licence-stamp small,
.large-text .next-reward,
.large-text .run-xp,
.large-text .pit-unlock-line,
.large-text .accent-option span { font-size: 12px; line-height: 1.35; }
.large-text .pit-home-telemetry small,
.large-text .pit-mastery > div { font-size: 13px; line-height: 1.4; }

/* ---------- screens ---------- */
.screen {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* longhand: two-value shorthand needs iOS 15.4+ */
  overflow-y: auto;
  padding: calc(14px + var(--sat)) calc(16px + var(--sar)) calc(20px + var(--sab)) calc(16px + var(--sal));
  animation: fadein .25s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  -ms-overflow-style: none;
}
.screen::-webkit-scrollbar { width: 8px; height: 8px; }
.screen::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.screen.no-scroll { overflow: hidden; padding: 0; }
.screen > :not(.drill-stage) { flex-shrink: 0; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 980px) {
  .screen:not(.no-scroll) {
    width: min(100%, 1120px);
    margin: 0 auto;
  }
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px;
}
.topbar .title { font-size: 17px; font-weight: 800; flex: 1; text-align: center; }
.topbar .spacer { width: 44px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  background: var(--panel2);
  color: var(--text);
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .08s ease, filter .15s ease, background .15s, border-color .15s, box-shadow .15s;
}
.btn:active { transform: scale(.965); filter: brightness(1.15); }
.btn.primary {
  background: linear-gradient(135deg, #29d3ff, #1f8fff);
  color: #04121c;
  box-shadow: 0 12px 28px rgba(41,211,255,.22);
}
.btn.orange { background: linear-gradient(135deg, #ffcf4d, #ff8a2a); color: #221000; box-shadow: 0 12px 28px rgba(255,138,42,.22); }
.btn.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--muted); }
.btn.icon { min-height: 44px; width: 44px; flex: 0 0 44px; padding: 0; border-radius: 12px; font-size: 18px; }
.btn.big { font-size: 17px; min-height: 56px; border-radius: 16px; width: 100%; }
.btn:disabled { opacity: .38; pointer-events: none; }
@media (hover: hover) {
  .btn:not(:disabled):hover,
  .home-tab:hover,
  .context-option:not(:disabled):hover,
  .accent-option:not(:disabled):hover,
  .card.tappable:not(.locked):hover {
    border-color: var(--accent);
    background-color: #1a2330;
    filter: brightness(1.08);
  }
}
.btn:focus-visible, .card.tappable:focus-visible, .fcard:focus-visible, .ctl-btn:focus-visible, .pedal:focus-visible, .quiz-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
details > summary { min-height: 44px; cursor: pointer; }
details > summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- cards ---------- */
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.010)),
    linear-gradient(135deg, rgba(41,211,255,.025), transparent 34%),
    var(--carbon);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 12px; }
.card.tappable { cursor: pointer; transition: transform .08s, border-color .15s, box-shadow .15s, background .15s; }
.card.tappable:active { transform: scale(.985); border-color: var(--accent); box-shadow: 0 10px 26px rgba(41,211,255,.13); }
.card.locked { opacity: .78; }
.card.locked .chip { opacity: .62; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Storage recovery reserves its actual height below the app. Body owns these
   banners, so routing cannot remove them or leave the last action covered. */
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
#app { flex: 1 0 50%; min-height: 0; }
.save-warning {
  position: relative;
  z-index: 10000;
  flex: 0 1 auto;
  min-height: 0;
  align-self: center;
  width: calc(100% - max(12px, var(--sal)) - max(12px, var(--sar)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 760px;
  max-height: min(45vh, 300px);
  max-height: min(45dvh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  margin: 8px auto max(12px, var(--sab));
  padding: 12px 14px;
  border: 1px solid var(--bad);
  border-radius: 8px;
  background: #241418;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  color: var(--text);
}
.save-warning > div:first-child { display: grid; flex: 1 1 auto; min-width: 0; gap: 3px; line-height: 1.35; }
.save-warning > div:first-child span { color: #f2bdc2; font-size: 12px; }
.save-warning-actions { display: flex; flex: 0 1 280px; min-width: 0; flex-wrap: wrap; gap: 8px; }
.save-warning-actions .btn { flex: 1 1 115px; min-width: 0; min-height: 44px; padding: 10px 12px; white-space: normal; font-size: 13px; line-height: 1.4; }
.save-warning button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.large-text .save-warning > div:first-child span { font-size: 14px; line-height: 1.5; }
.large-text .save-warning-actions .btn { font-size: 15px; }
.intro-skip {
  position: absolute;
  z-index: 2;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  min-height: 44px;
  background: rgba(10,14,20,.78);
}
@media (max-width: 620px) {
  .save-warning { align-items: stretch; flex-direction: column; }
  .save-warning-actions { flex: 0 0 auto; width: 100%; }
  .save-warning-actions .btn { flex: 1 1 100px; }
}

.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grow { flex: 1; min-width: 0; }

/* chapter number badge */
.chip {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    var(--panel2);
  color: var(--accent);
  border: 1px solid var(--line2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.18);
}
.chip.done { background: linear-gradient(180deg, rgba(61,220,132,.20), rgba(61,220,132,.07)); color: var(--good); border-color: rgba(61,220,132,.48); }
.chip.gold { background: linear-gradient(180deg, rgba(255,207,77,.22), rgba(255,207,77,.07)); color: var(--gold); border-color: rgba(255,207,77,.55); }

/* stars */
.stars { display: inline-flex; gap: 2px; font-size: 14px; letter-spacing: 1px; }
.stars .on { color: var(--gold); }
.stars .off { color: #3a4356; }

/* progress bar */
.pbar { height: 8px; border-radius: 99px; background: rgba(28,37,52,.9); overflow: hidden; box-shadow: inset 0 1px 4px rgba(0,0,0,.45); }
.pbar > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .32s ease-out; box-shadow: none; }
.pbar.xp > i { background: #ff8a2a; }

/* ---------- home hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(41,211,255,.16), transparent 34%),
    linear-gradient(315deg, rgba(255,138,42,.11), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.032) 0 1px, transparent 1px 18px),
    var(--carbon);
  border: 1px solid rgba(104,128,171,.42);
  margin-bottom: 14px;
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 14px;
  width: 160px;
  height: 70px;
  border-top: 3px solid rgba(41,211,255,.38);
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.hero h1 { font-size: 24px; margin: 4px 0 5px; }
.home-hero { margin-bottom: 10px; }
.home-hero + .home-tabs { margin-top: 0; }
.hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-settings {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 7px;
  box-shadow: none;
}
.home-tabs {
  position: sticky;
  top: calc(6px + env(safe-area-inset-top));
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 10px 0 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d141c;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home-tab {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}
.home-tab.active {
  color: #071018;
  background: var(--accent);
}
.home-tab:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.home-pane[hidden] { display: none; }
.home-pane { min-width: 0; }
.home-pane:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.drill-recovery {
  width: min(520px, calc(100% - 28px));
  margin: auto;
  text-align: center;
}
.drill-recovery p { margin: 9px 0 16px; line-height: 1.55; }
.track-mode-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
}
.track-mode {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.track-mode.active {
  color: #071018;
  background: var(--accent);
}
.track-mode:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.track-mode-help { min-height: 38px; margin-top: 8px; line-height: 1.45; }
.home-dashboard { display: grid; gap: 12px; }
.early-sequence b { display: block; margin: 5px 0 7px; }
.early-sequence p { line-height: 1.55; margin-bottom: 13px; }
.first-session {
  margin-top: 14px;
  padding: clamp(18px, 4vw, 26px);
  border: 1px solid rgba(104,128,171,.42);
  border-radius: 8px;
  background:
    linear-gradient(125deg, rgba(41,211,255,.09), transparent 38%),
    var(--carbon);
  box-shadow: var(--shadow-panel);
}
.first-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.first-session h2 {
  margin: 5px 0 0;
  font-size: 22px;
}
.session-number {
  flex: 0 0 auto;
  color: rgba(41,211,255,.34);
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}
.first-session-outcome {
  max-width: 700px;
  margin: 12px 0 16px;
  color: #cbd6e7;
  font-size: 15px;
  line-height: 1.55;
}
.session-steps {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(104,128,171,.30);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(104,128,171,.22);
}
.session-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 10px 12px;
  background: rgba(10,14,20,.82);
}
.session-steps li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(41,211,255,.46);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 900;
}
.session-steps div { min-width: 0; }
.session-steps b, .session-steps small { display: block; }
.session-steps small { margin-top: 3px; color: var(--muted); line-height: 1.35; }
.session-steps em { color: var(--muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.first-session-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .6fr);
  gap: 10px;
  margin-top: 14px;
}
.safety-line { margin-top: 12px; line-height: 1.45; }
@media (max-width: 520px) {
  .first-session-actions { grid-template-columns: 1fr; }
  .session-steps li { grid-template-columns: 30px minmax(0, 1fr); }
  .session-steps em { grid-column: 2; margin-top: -8px; }
}
@media (min-width: 980px) {
  .home-dashboard {
    grid-template-columns: minmax(340px, .88fr) minmax(420px, 1.12fr);
    align-items: start;
  }
  .home-dashboard > .card { margin-top: 0; }
}

/* ---------- training map ---------- */
.training-map { gap: 0; }
.map-hero {
  padding: 8px 2px 24px;
  border-bottom: 1px solid var(--line);
}
.map-hero h1 {
  max-width: 760px;
  margin: 7px 0 9px;
  font-size: 28px;
}
.map-hero > p,
.map-transfer p {
  max-width: 780px;
  color: #c6d0e0;
  line-height: 1.6;
}
.map-progress {
  display: grid;
  grid-template-columns: auto minmax(140px, 360px);
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
}
.map-progress b { color: var(--text); }
.map-flow { position: relative; }
.map-stage {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 2px;
  border-bottom: 1px solid var(--line);
}
.map-stage-index {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 900;
}
.map-stage-head {
  justify-content: space-between;
  margin-bottom: 5px;
}
.map-stage-head h2 { font-size: 19px; }
.map-stage-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.map-stage-copy > b { display: block; margin-top: 4px; }
.map-stage-copy > p {
  max-width: 760px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.map-chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.map-chapter {
  min-height: 62px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.map-chapter > span {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel2);
  color: var(--muted);
  font-weight: 900;
}
.map-chapter b {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.map-chapter small { color: var(--muted); }
.map-chapter.current { border-color: var(--accent); }
.map-chapter.current > span { color: var(--accent); }
.map-chapter.done { border-color: var(--good); }
.map-chapter.done > span { background: var(--good); color: #06150d; }
.map-chapter:disabled { cursor: default; opacity: .55; }
.map-chapter:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.map-transfer { padding: 24px 2px 6px; }
.map-transfer h2 { margin: 6px 0 8px; font-size: 21px; }
.map-transfer .btn { max-width: 460px; margin-top: 16px; }
@media (max-width: 620px) {
  .map-hero h1 { font-size: 24px; }
  .map-progress { grid-template-columns: 1fr; gap: 7px; }
  .map-chapters { grid-template-columns: 1fr; }
}
.title-screen {
  align-items: center;
}
.title-track {
  position: relative;
  width: min(470px, 88vw);
  height: clamp(150px, 30vh, 230px);
  margin: 0 auto 18px;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.01)),
    #101722;
  border: 1px solid rgba(104,128,171,.42);
  box-shadow: 0 22px 46px rgba(0,0,0,.30);
  overflow: hidden;
}
.title-track i {
  position: absolute;
  inset: 24px 34px;
  border: 15px solid #465875;
  border-right-color: #2f3d55;
  border-radius: 50% 38% 50% 42%;
  transform: rotate(-11deg);
}
.title-track b {
  position: absolute;
  left: 102px;
  top: 59px;
  width: 72px;
  border-top: 8px dotted var(--accent);
  transform: rotate(-13deg);
  filter: drop-shadow(0 0 10px rgba(41,211,255,.55));
}
.title-track span {
  position: absolute;
  left: 82px;
  top: 67px;
  width: 34px;
  height: 17px;
  border-radius: 7px 12px 12px 7px;
  background: var(--accent);
  transform: rotate(-30deg);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

/* rank badge */
.rank-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px;
  background: #101820; border: 1px solid var(--line2);
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.rank-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: none; }

.program-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(41,211,255,.28);
}
.program-card::after {
  content: none;
}
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.metric {
  min-height: 66px;
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(10,14,20,.38);
  border: 1px solid rgba(104,128,171,.24);
}
.metric b { color: var(--text); font-size: 18px; display: block; margin-top: 2px; }
.metric span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.mission-card { border-color: rgba(255,207,77,.28); }
.mission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mission-score { color: var(--gold); font-weight: 900; font-size: 13px; }
.mission-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.mission-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(10,14,20,.35);
  border: 1px solid rgba(104,128,171,.20);
}
.mission-row.done {
  border-color: rgba(61,220,132,.36);
  background: rgba(61,220,132,.07);
}
.mission-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  font-weight: 900;
  color: var(--muted);
  border: 1px solid rgba(104,128,171,.35);
}
.mission-row.done .mission-check {
  color: #07130d;
  background: var(--good);
  border-color: var(--good);
  box-shadow: none;
}
.skill-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.skill-tile {
  border-radius: 13px;
  padding: 10px 8px;
  text-align: center;
  background: rgba(10,14,20,.32);
  border: 1px solid rgba(104,128,171,.22);
}
.skill-tile b { display: block; font-size: 15px; }
.skill-tile span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.practice-list-head {
  margin: 20px 2px 2px;
}
.practice-list-head p {
  margin-top: 4px;
  line-height: 1.45;
}
.practice-drill-card {
  border-left: 3px solid rgba(41,211,255,.42);
}
.recommended-drill {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---------- lesson viewer ---------- */
.lesson-fig {
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  max-height: clamp(190px, 38vh, 360px);
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 12px 0;
  position: relative;
}
.lesson-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lesson-body h2 { font-size: 20px; margin-bottom: 6px; }
.lesson-screen { overflow: hidden; }
.lesson-screen > .lesson-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.lesson-screen > .lesson-body::-webkit-scrollbar { width: 8px; }
.lesson-screen > .lesson-body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--line2);
}
/* Short landscape needs one reading viewport: pinned chapter chrome otherwise
   leaves less room than a diagram. Keep diagrams at their readable size while
   the heading, contents and reference notice scroll above the footer. */
@media (max-height: 500px) and (orientation: landscape) {
  .lesson-screen {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: calc(8px + var(--sat));
    padding-bottom: 0;
    scroll-padding-top: 8px;
    scroll-padding-bottom: calc(80px + var(--sab));
  }
  .lesson-screen > .lesson-body {
    flex: 0 0 auto;
    overflow: visible;
    padding-bottom: 20px;
  }
  .lesson-screen > .lesson-nav {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-top: 8px;
    padding-bottom: calc(8px + var(--sab));
    border-top: 1px solid var(--line2);
    background: var(--bg);
  }
}
.lesson-body p { color: #c6d0e0; line-height: 1.55; font-size: 15px; margin-top: 10px; }
.lesson-body b, .lesson-body strong { color: var(--text); }
.lesson-body .tip {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(41,211,255,.07); border: 1px solid rgba(41,211,255,.25);
  font-size: 14px; line-height: 1.5; color: #cdeffb;
}
.lesson-body .tip b { color: var(--accent); }
.lesson-nav {
  display: flex; gap: 10px; align-items: center;
  position: relative;
  z-index: 4;
  padding: 12px 0 calc(4px + var(--sab));
  margin-top: 0;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(11,14,20,0), var(--bg) 28%);
}
.lesson-progress {
  display: grid;
  flex: 1;
  min-width: 86px;
  gap: 5px;
  text-align: center;
}
.lesson-progress > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.lesson-progress > i {
  display: block;
  width: min(150px, 100%);
  height: 4px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 99px;
  background: #33405a;
}
.lesson-progress > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .25s ease;
}
.coach-call {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,207,77,.34);
  border-radius: 8px;
  background: rgba(255,207,77,.065);
}
.coach-call > b { line-height: 1.45; }
.coach-call .btn { width: fit-content; min-height: 42px; }
.coach-call-options { display: grid; gap: 8px; }
.coach-call-options .quiz-opt { margin-top: 0; }
.coach-call p {
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255,207,77,.24);
  color: #f3ddb0;
}
.anatomy-info {
  position: absolute;
  z-index: 7;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  display: grid;
  width: min(90%, 620px);
  gap: 6px;
  transform: translateX(-50%);
  pointer-events: none;
}
.anatomy-prompt {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10,14,20,.9);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}
.anatomy-context {
  padding: 7px 10px;
  border: 1px solid rgba(147,161,184,.32);
  border-radius: 8px;
  background: rgba(10,14,20,.88);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
.anatomy-rationale { display: block; margin-top: 6px; font-weight: 500; text-align: left; pointer-events: auto; }
.anatomy-rationale > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.anatomy-rationale > summary::before { content: '+'; margin-right: 8px; color: var(--accent); }
.anatomy-rationale[open] > summary::before { content: '−'; }
.anatomy-rationale .small { padding-bottom: 6px; }
.anatomy-placement input[type="range"] {
  min-width: 0;
  height: 44px;
  margin: -12px 0;
  touch-action: pan-x;
}
.anatomy-placement input[type="range"]::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
}
@media (max-width: 360px) and (orientation: portrait) {
  .anatomy-info {
    top: calc(54px + env(safe-area-inset-top));
    width: calc(100% - 16px);
    gap: 4px;
  }
  .anatomy-prompt {
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.22;
  }
  .anatomy-context {
    padding: 4px 6px;
    font-size: 10px;
    line-height: 1.2;
  }
  .anatomy-placement { bottom: calc(62px + env(safe-area-inset-bottom)) !important; }
  .anatomy-lock { bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .anatomy-info {
    top: calc(56px + env(safe-area-inset-top));
    left: 8px;
    width: min(30vw, 260px);
    gap: 4px;
    transform: none;
  }
  .anatomy-prompt {
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.2;
  }
  .anatomy-context {
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.2;
  }
}
.setup-hint {
  margin-top: 8px;
  border: 1px solid rgba(41,211,255,.24);
  border-radius: 8px;
  color: var(--accent);
}
.setup-hint summary {
  min-height: 44px;
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.setup-hint > div { padding: 0 12px 12px; color: #cdeffb; line-height: 1.45; }
.setup-prediction {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
}
.setup-prediction > span { flex: 1 0 100%; }
.setup-prediction .btn {
  min-height: 44px;
  padding: 8px 11px;
  font-size: 12px;
}

/* quiz */
.quiz-opt {
  display: block; width: 100%; text-align: left;
  margin-top: 10px; padding: 14px;
  border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--panel2); color: var(--text);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.quiz-opt.correct { border-color: var(--good); background: rgba(61,220,132,.12); }
.quiz-opt.wrong { border-color: var(--bad); background: rgba(255,93,93,.10); }
.quiz-opt:disabled { cursor: default; }

/* ---------- drill stage (game container) ---------- */
.drill-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.flash-review-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.assist-control {
  position: absolute;
  z-index: 8;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10,14,20,.94);
}
.assist-control .assist-live { flex: 1; color: var(--muted); font-size: 12px; line-height: 1.3; }
.assist-control .btn { flex: 0 0 auto; min-height: 44px; }
.assist-panel {
  position: absolute;
  z-index: 8;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(390px, calc(100% - 24px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10,14,20,.96);
  max-height: calc(100% - 76px - var(--sat) - var(--sab));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-padding: 8px;
}
.assist-panel summary { position: sticky; top: -8px; z-index: 1; min-height: 44px; padding: 11px 8px; background: #0a0e14; font-weight: 800; cursor: pointer; }
.assist-panel .assist-live { display: block; padding: 2px 8px 8px; color: var(--muted); font-size: 12px; }
.assist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.assist-grid .btn { min-height: 44px; padding: 6px; font-size: 11px; line-height: 1.2; }
.grip-inputs .grip-keyboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  text-align: left;
  white-space: normal;
  font-size: 12px;
  line-height: 1.3;
}
.grip-inputs .grip-keyboard b { font-size: 14px; }
.grip-inputs .grip-keyboard-state { color: var(--muted); }
.grip-inputs .grip-keyboard:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.large-text .grip-inputs .grip-keyboard { font-size: 14px; }
.large-text .grip-inputs .grip-keyboard b { font-size: 16px; }
.final-review {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
}
.final-review summary { min-height: 44px; padding: 12px; font-weight: 800; cursor: pointer; }
.final-review-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
}
.final-review-item span { color: var(--muted); }
@media (max-height: 500px) and (orientation: landscape) {
  .flash-review-scroll {
    justify-content: flex-start !important;
    padding-top: 58px !important;
    padding-bottom: 16px !important;
  }
  .flash-review-scroll .flash-quiz { flex: 0 0 auto; }
  .assist-control {
    right: 8px;
    bottom: 8px;
    left: auto;
    width: min(330px, 44vw);
  }
  .assist-panel { right: 8px; bottom: 8px; width: min(330px, 44vw); }
}
.drill-canvas-wrap { flex: 1; position: relative; overflow: hidden; touch-action: none; }
.drill-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.document-drill > .hud { position: relative; flex: 0 0 auto; background: var(--bg); }
.document-drill > .drill-canvas-wrap { min-height: 0; }
.document-drill .decision-root,
.document-drill .setup-root { padding-top: 12px !important; }

/* HUD strip on top of drills */
.hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--sat)) calc(12px + var(--sar)) 8px calc(12px + var(--sal));
  pointer-events: none;
  z-index: 5;
}
.hud > * { pointer-events: auto; }
.hud > .hud-pill { min-width: 0; overflow-wrap: break-word; }
.hud > .row { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.hud .hud-pill {
  min-height: 44px;
  background: rgba(13, 21, 29, .94);
  border: 1px solid #526373;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px;
}
.hud .grow { flex: 1; }
@media (max-width: 430px) {
  .hud {
    gap: 6px;
    padding: calc(6px + var(--sat)) calc(8px + var(--sar)) 6px calc(8px + var(--sal));
  }
  .hud .hud-pill {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
    gap: 5px;
  }
  .hud .btn.icon {
    width: 44px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 16px;
  }
  .hud > .row {
    gap: 5px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .track-end-btn {
    top: calc(94px + env(safe-area-inset-top)) !important;
    right: calc(8px + env(safe-area-inset-right)) !important;
    min-height: 44px !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }
  .track-toast {
    top: calc(150px + env(safe-area-inset-top)) !important;
    max-width: calc(100% - 24px) !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* overlay (drill intro / results) */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 12, .62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 20px calc(16px + var(--sar)) calc(20px + var(--sab)) calc(16px + var(--sal));
  animation: fadein .2s ease;
}
.overlay .sheet {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 40px - var(--sat) - var(--sab)); /* pre-15.4 iOS fallback */
  max-height: calc(100dvh - 40px - var(--sat) - var(--sab));
  max-height: min(100%, calc(100dvh - 40px - var(--sat) - var(--sab))); /* also fit above an active save warning */
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    var(--panel);
  border: 1px solid rgba(104,128,171,.38);
  border-radius: 20px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.overlay .sheet h2 { font-size: 21px; margin-bottom: 4px; }
.practice-standard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 2px;
}
.practice-standard div {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 9px;
  border: 1px solid rgba(104,128,171,.32);
  background: rgba(16,24,36,.72);
  text-align: center;
}
.practice-standard b {
  display: block;
  color: var(--gold);
  font-size: 13px;
  line-height: 1.1;
}
.practice-standard span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.15;
}
.run-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  text-align: left;
}
.run-mode legend {
  grid-column: 1 / -1;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.run-mode label {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 72px;
  cursor: pointer;
}
.run-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.run-mode span {
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: rgba(10,14,20,.44);
}
.run-mode b,
.run-mode small {
  display: block;
}
.run-mode b { color: var(--text); font-size: 13px; }
.run-mode small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}
.run-mode input:checked + span {
  border-color: var(--accent);
  background: rgba(41,211,255,.09);
}
.run-mode input:focus-visible + span {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}
.run-mode-help {
  min-height: 34px;
  margin: 8px 0 0;
  line-height: 1.4;
  text-align: left;
}
@media (max-width: 360px) {
  .run-mode { grid-template-columns: 1fr; }
  .run-mode label { min-height: 62px; }
}
.overlay .sheet .objective { color: #c6d0e0; font-size: 14.5px; line-height: 1.55; margin: 10px 0 4px; text-align: left; }
.overlay .sheet .objective li { margin: 6px 0 0 18px; }
.overlay .big-stars { font-size: 34px; letter-spacing: 6px; margin: 10px 0 2px; }
.overlay .scoreline { font-size: 40px; font-weight: 900; margin: 2px 0; }
.result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 2px;
}
.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  background: rgba(10,14,20,.5);
  border: 1px solid rgba(104,128,171,.30);
}
.result-badge.good { color: var(--good); border-color: rgba(61,220,132,.42); background: rgba(61,220,132,.08); }
.result-badge.gold { color: var(--gold); border-color: rgba(255,207,77,.45); background: rgba(255,207,77,.09); }
.next-action {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(255,138,42,.08);
  border: 1px solid rgba(255,138,42,.24);
  color: #ffd9b2;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.next-delta {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(61,220,132,.08);
  border: 1px solid rgba(61,220,132,.24);
  color: #c8f7da;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}
.overlay .coach {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px; text-align: left;
  background: rgba(41,211,255,.07); border: 1px solid rgba(41,211,255,.25);
  font-size: 13.5px; line-height: 1.5; color: #cdeffb;
}
.overlay .btnrow { display: flex; gap: 10px; margin-top: 14px; }
.overlay .btnrow .btn { flex: 1; }
@media (max-width: 430px) {
  .overlay {
    padding: calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal));
    align-items: stretch;
  }
  .overlay.compact { align-items: center; }
  .overlay .sheet {
    border-radius: 16px;
    padding: 16px;
    width: 100%;
  }
  .overlay .sheet h2 { font-size: 19px; }
  .overlay .big-stars { font-size: 28px; }
  .overlay .scoreline { font-size: 34px; }
  .overlay .btnrow {
    position: sticky;
    bottom: 0;
    padding: 10px 0 calc(2px + var(--sab));
    background: linear-gradient(180deg, rgba(22,29,41,0), var(--panel) 30%);
  }
}

/* ---------- touch controls ---------- */
.controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 calc(14px + var(--sar)) calc(14px + var(--sab)) calc(14px + var(--sal));
  pointer-events: none;
  z-index: 6;
  gap: 10px;
}
.controls .cluster { display: flex; flex: 0 0 auto; gap: 10px; pointer-events: auto; }
.ctl-btn {
  width: 74px; height: 74px;
  border-radius: 8px;
  border: 1px solid #526373;
  background: rgba(13, 21, 29, .94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--text);
  font-size: 26px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.ctl-btn.active { border-color: var(--accent); background: #35251f; }

/* vertical pedal */
.pedal {
  width: 84px; height: 128px;
  min-width: 84px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid #526373;
  background: #101820;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  position: relative;
  overflow: hidden;
  touch-action: none;
}
.pedal::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: repeating-linear-gradient(to bottom, transparent 0 16px, rgba(255,255,255,.11) 16px 17px);
  pointer-events: none;
}
.pedal .fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  z-index: 0;
  transition: height .04s linear;
}
.pedal.brake .fill { background: #d9534f; opacity: .82; }
.pedal.throttle .fill { background: #2fae6b; opacity: .82; }
.pedal .lbl {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.pedal .lbl span { white-space: nowrap; }
.pedal .lbl .pct { font-size: 17px; }
@media (max-width: 430px) {
  .controls {
    gap: 8px;
    padding: 0 calc(8px + var(--sar)) calc(10px + var(--sab)) calc(8px + var(--sal));
  }
  .controls .cluster { gap: 6px; }
  .ctl-btn {
    width: 56px;
    height: 60px;
    border-radius: 8px;
    font-size: 22px;
  }
  .pedal {
    width: 62px;
    min-width: 62px;
    height: 112px;
    border-radius: 8px;
  }
  .pedal .lbl {
    gap: 2px;
    font-size: 10.5px;
    letter-spacing: .6px;
  }
  .pedal .lbl .pct { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .overlay {
    padding: calc(6px + var(--sat)) calc(8px + var(--sar)) calc(6px + var(--sab)) calc(8px + var(--sal));
    align-items: stretch;
  }
  .overlay .sheet {
    width: min(680px, 100%);
    max-height: 100%;
    padding: 12px 16px;
    border-radius: 14px;
  }
  .overlay .sheet h2 { font-size: 18px; }
  .overlay .sheet .objective { font-size: 13.5px; line-height: 1.4; margin-top: 6px; }
  .overlay .sheet .objective li { margin-top: 3px; }
  .overlay .big-stars { font-size: 25px; margin: 4px 0 0; }
  .overlay .scoreline { font-size: 30px; }
  .overlay .coach { margin: 7px 0; padding: 8px 10px; font-size: 12.5px; }
  .overlay .btnrow {
    position: sticky;
    bottom: 0;
    padding: 8px 0 calc(2px + var(--sab));
    margin-top: 7px;
    background: linear-gradient(180deg, rgba(22,29,41,0), var(--panel) 30%);
  }
  .controls {
    padding: 0 calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal));
    gap: 7px;
  }
  .controls .cluster { gap: 6px; }
  .ctl-btn {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    font-size: 21px;
  }
  .pedal {
    width: 58px;
    min-width: 58px;
    height: 88px;
    border-radius: 8px;
  }
  .pedal .lbl {
    gap: 1px;
    font-size: 10px;
    letter-spacing: .5px;
  }
  .pedal .lbl .pct { font-size: 13px; }
  .track-end-btn {
    top: calc(58px + env(safe-area-inset-top)) !important;
    padding: 5px 10px !important;
    min-height: 44px !important;
  }
  .track-toast {
    top: calc(104px + env(safe-area-inset-top)) !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
  }
}

/* horizontal slider (brake trace drills) */
.hslider {
  height: 64px; border-radius: 18px;
  border: 1.5px solid var(--line);
  background: rgba(16,22,32,.85);
  position: relative; overflow: hidden;
  touch-action: none;
  pointer-events: auto;
}
.hslider .fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; }
.hslider.brake .fill { background: linear-gradient(90deg, rgba(255,93,93,.25), rgba(255,93,93,.8)); }
.hslider .lbl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* ---------- flashcards ---------- */
.fcard {
  perspective: 1200px;
  height: min(58vh, 430px);
  height: min(58dvh, 430px);
  cursor: pointer;
}
.fcard-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .25, 1);
}
.fcard-inner.flipped { transform: rotateY(180deg); }
.fcard-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px;
}
.fcard-front {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(41,211,255,.14), transparent 55%),
    var(--panel);
}
.fcard-back {
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(255,138,42,.12), transparent 55%),
    var(--panel2);
  transform: rotateY(180deg);
  /* long answers scroll; margin:auto on the inner wrapper keeps short ones centred */
  justify-content: flex-start;
  overflow-y: auto;
}

.flash-quiz {
  width: 100%;
  padding: 18px;
  box-shadow: var(--shadow-panel);
}
.flash-quiz h2 {
  margin: 7px 0 10px;
  font-size: 21px;
}
.flash-prompt {
  color: #c6d0e0;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.flash-options {
  display: grid;
  gap: 9px;
}
.flash-options .quiz-opt { margin-top: 0; }
.flash-feedback {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(41,211,255,.34);
  border-radius: 8px;
  background: rgba(41,211,255,.07);
  color: #c6d0e0;
  font-size: 13.5px;
  line-height: 1.5;
}
.flash-feedback b,
.flash-feedback span { display: block; }
.flash-feedback b { color: var(--text); margin-bottom: 5px; }
.flash-feedback strong { color: var(--accent2); }
.flash-next { margin-top: 12px; }

/* ---------- decision drills ---------- */
.daily-card { border-color: rgba(255,138,42,.34); }
.decision-root {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(64px + var(--sat)) 14px calc(22px + var(--sab));
}
.decision-card h2 { font-size: 20px; margin: 4px 0 8px; }
.decision-card p {
  color: #d2dbea;
  font-size: 15px;
  line-height: 1.55;
  margin: 12px 0 4px;
}
.decision-card > .btn.big:last-child {
  position: static;
  box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.decision-type {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(41,211,255,.08);
  border: 1px solid rgba(41,211,255,.24);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.flag-visual {
  min-height: 104px;
  border-radius: 16px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  overflow: hidden;
  position: relative;
}
.flag-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.18) 75%);
  background-size: 34px 34px;
  background-position: 0 0, 0 17px, 17px -17px, -17px 0;
  opacity: .35;
}
.flag-visual span {
  position: relative;
  z-index: 1;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(10,14,20,.78);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}
.flag-yellow { background: #f3cf3b; color: #1d1600; }
.flag-blue { background: #1d65db; }
.flag-red { background: #dd3047; }
.flag-surface { background: repeating-linear-gradient(45deg, #f4d23c 0 18px, #d92c35 18px 36px); }
.flag-black { background: #07090d; }
.flag-white { background: #f5f7fb; color: #111722; }
.flag-green { background: #1fbf68; color: #06130b; }
.flag-double-yellow { background: repeating-linear-gradient(90deg, #f3cf3b 0 16px, #c99b16 16px 32px); color: #1d1600; }
.flag-checkered { background: conic-gradient(#f5f7fb 0 25%, #111722 0 50%, #f5f7fb 0 75%, #111722 0); color: #111722; }
.flag-meatball { background: radial-gradient(circle at 50% 50%, #ff8a2a 0 21%, #07090d 22%); }
.flag-black-white { background: linear-gradient(135deg, #07090d 0 50%, #f5f7fb 50%); color: #111722; }
.flag-safety-car { background: repeating-linear-gradient(45deg, #f3cf3b 0 18px, #151a23 18px 36px); color: #1d1600; }
.flag-pit-exit { background: linear-gradient(90deg, #1fbf68 0 48%, #dd3047 48%); }
.flag-checkered span, .flag-black-white span { color: var(--text); }
.lane-map {
  height: 118px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, transparent 31%, rgba(255,255,255,.12) 31% 32%, transparent 32% 66%, rgba(255,255,255,.12) 66% 67%, transparent 67%),
    linear-gradient(180deg, #242b32, #171d25);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  margin: 12px 0;
}
.lane-map i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 18px, transparent 18px 34px);
}
.lane-map i:nth-child(1) { top: 28%; }
.lane-map i:nth-child(2) { top: 50%; }
.lane-map i:nth-child(3) { top: 72%; }
.lane-map .car {
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius: 7px 12px 12px 7px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.lane-map .car:after {
  content: "";
  position: absolute;
  right: 6px;
  top: 5px;
  width: 8px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255,255,255,.45);
}
.lane-map .car-a { left: 34%; top: 49%; background: var(--accent); }
.lane-map .car-b { left: 54%; top: 28%; background: var(--accent2); }
.lane-map.attack .car-a { left: 48%; top: 56%; }
.lane-map.attack .car-b { left: 38%; top: 33%; }
.lane-map.defend .car-a { left: 45%; top: 32%; }
.lane-map.defend .car-b { left: 28%; top: 53%; }
.lane-map.start .car-a { left: 34%; top: 28%; }
.lane-map.start .car-b { left: 42%; top: 53%; }
.lane-map .apex-dot {
  position: absolute;
  right: 17%;
  top: 45%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff2bd;
  box-shadow: none;
}
.start-scene {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #101721;
}
.start-scene-state {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: #e4ebf5;
  font-size: 13px;
  font-weight: 750;
}
.start-scene svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 4px auto; }
.start-scene figcaption { padding: 10px 14px 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.start-scene figcaption b { color: var(--text); }
.start-scene-scale { display: block; margin-top: 3px; }
.start-scene .scene-road { fill: #283543; }
.start-scene .scene-road-curve { fill: none; stroke: #283543; stroke-width: 86; }
.start-scene .scene-lanes { fill: none; stroke: #8190a4; stroke-width: 1.5; stroke-dasharray: 7 8; }
.start-scene .scene-direction { fill: none; stroke: #e4ebf5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.start-scene .scene-body { fill: #a4c6dd; stroke: #0b1017; stroke-width: 1; }
.start-scene .scene-player .scene-body { fill: #ff957b; }
.start-scene .scene-glass { fill: #263548; }
.start-scene .scene-tyre, .start-scene .scene-profile-wheel { fill: #070b12; }
.start-scene .scene-profile-wheel { stroke: #a4c6dd; stroke-width: 2; }
.start-scene .scene-you { fill: #141b25; font: 900 14px -apple-system, Segoe UI, sans-serif; }
.start-scene .scene-wheelspin { fill: none; stroke: #ffc56b; stroke-width: 4; stroke-linecap: round; }
.start-scene .scene-grid { fill: none; stroke: #c3cedd; stroke-width: 2; }
.start-scene .scene-slope { fill: none; stroke: #536779; stroke-width: 18; }
.large-text .start-scene-state, .large-text .start-scene figcaption { font-size: 15px; }
@media (min-width: 700px) {
  .start-scene { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 1fr); align-items: center; }
  .start-scene-state { grid-column: 1 / -1; }
  .start-scene svg { height: 230px; }
  .start-scene figcaption { padding: 20px 24px; font-size: 15px; }
}
.statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.statgrid > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--panel2);
}
.statgrid b { display: block; font-size: 22px; }
.statgrid span { color: var(--muted); font-size: 12px; }

/* ---------- misc ---------- */
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.center { text-align: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

.toast {
  position: absolute; left: 50%; bottom: calc(90px + var(--sab));
  transform: translateX(-50%);
  background: rgba(10,14,20,.92); border: 1px solid var(--line);
  padding: 10px 18px; border-radius: 18px;
  font-size: 13.5px; font-weight: 700; z-index: 30;
  animation: toastin .25s ease;
  max-width: calc(100% - 32px);
  width: max-content;
  text-align: center;
  line-height: 1.4;
}
.setting-switch {
  display: block;
  position: relative;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.setting-switch .row {
  pointer-events: none;
}
.setting-switch:focus-within {
  outline: 3px solid rgba(41,211,255,.55);
  outline-offset: 3px;
  border-radius: 16px;
}
.setting-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.setting-toggle-btn {
  min-width: 86px;
  padding-left: 14px;
  padding-right: 14px;
  pointer-events: none;
}
.context-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.context-option {
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.context-option b,
.context-option span {
  display: block;
}
.context-option b {
  font-size: 13px;
}
.context-option span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.context-option.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(41, 211, 255, .16);
  background: rgba(41, 211, 255, .08);
}
.decision-context {
  margin: 8px 0 2px;
  padding: 7px 9px;
  border-left: 3px solid var(--warn);
  background: rgba(255, 210, 63, .08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* ---------- Quick Challenge ---------- */
:root { --pit-accent: #a9b8ca; }
html[data-pit-accent="amber"] { --pit-accent: #ffd23f; }
html[data-pit-accent="ice"] { --pit-accent: #65d7ff; }
html[data-pit-accent="scarlet"] { --pit-accent: #ff685f; }

.pitwall-screen .topbar .spacer { display: none; }
.pitwall-screen .topbar .pit-mute {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 12px;
}
.pitwall-board,
.pit-home-panel {
  border: 1px solid #3c4858;
  border-left: 5px solid var(--pit-accent);
  border-radius: 8px;
  background: #0d1219;
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
}
.pitwall-board { padding: 0 18px 18px; }
.timing-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin: 0 -18px 16px;
  padding: 8px 14px 8px 18px;
  background: var(--pit-accent);
  color: #071018;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
}
.timing-strip b {
  font: 900 14px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .5px;
}
.pitwall-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.pitwall-title-row > div { min-width: 0; flex: 1 1 auto; }
.pitwall-title-row h1 {
  margin-top: 3px;
  font-size: clamp(26px, 6vw, 42px);
  line-height: 1;
  letter-spacing: -.6px;
}
.sector-tag {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--pit-accent);
  color: var(--pit-accent);
  font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 1px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.pitwall-context {
  max-width: 760px;
  margin-top: 18px;
  color: #d6deea;
  font-size: 16px;
  line-height: 1.55;
}
.pit-objective {
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #354050;
  line-height: 1.45;
}
.pit-objective b {
  color: var(--pit-accent);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.pit-objective span { color: var(--muted); }
.pitwall-play { margin-top: 14px; }
.pit-question {
  padding: 16px 2px 12px;
  border-bottom: 1px solid #303a48;
}
.pit-question h2 { font-size: clamp(19px, 4.8vw, 26px); line-height: 1.25; }
.pit-question p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.pit-options {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.pit-option {
  min-height: 58px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #4b596b;
  border-radius: 7px;
  background: #151c26;
  color: var(--text);
  font: 700 15px/1.35 inherit;
  text-align: left;
  cursor: pointer;
}
.pit-option:hover { border-color: var(--pit-accent); background: #19222e; }
.pit-option.selected {
  border-color: var(--pit-accent);
  box-shadow: inset 5px 0 0 var(--pit-accent);
  background: #1b2531;
}
.pit-option.correct { border-color: var(--good); box-shadow: inset 5px 0 0 var(--good); }
.pit-option.incorrect { border-color: var(--bad); box-shadow: inset 5px 0 0 var(--bad); }
.pit-option.completed { border-color: var(--warn); box-shadow: inset 5px 0 0 var(--warn); }
.pit-option:focus-visible,
.accent-option:focus-visible,
.line-input-modes .btn:focus-visible {
  outline: 3px solid var(--pit-accent);
  outline-offset: 3px;
}
.pit-scoring-note {
  margin: 14px 2px 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.pit-scoring-note summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #c7d0dc;
  cursor: pointer;
}
.pit-scoring-note p { max-width: 720px; padding: 0 0 8px; }
.pit-result {
  border: 1px solid #465365;
  border-top: 3px solid var(--pit-accent);
  border-radius: 8px;
  background: #0f171f;
  padding: 20px;
}
.pit-result.bronze { border-top-color: #d09662; }
.pit-result.silver { border-top-color: #c8d2dd; }
.pit-result.gold { border-top-color: #ffd23f; }
.pit-previous-choice, .pit-retry-comparison {
  border-left: 3px solid var(--pit-accent);
  padding: 10px 12px;
  margin: 12px 0;
  background: #151f29;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pit-previous-choice p, .pit-retry-comparison p { margin: 5px 0 0; }
.pit-retry-comparison h3 { margin: 0; font-size: 15px; }
.pit-score-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pit-score-change b { font: 800 22px ui-monospace, SFMono-Regular, Consolas, monospace; }
.pit-score-change span, .pit-previous-choice span { color: #c7d0dc; }
.pit-option-note { display: block; margin-top: 5px; color: #c7d0dc; font-size: 12px; font-weight: 500; }
.pit-score-details { margin-top: 16px; border-top: 1px solid #34404e; }
.pit-score-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 700; }
.pit-score-details .score-columns { margin-top: 4px; }
.pit-score-details .score-columns small { display: block; margin-top: 8px; color: #c7d0dc; font-size: 12px; }
.large-text .pit-previous-choice, .large-text .pit-retry-comparison { font-size: 16px; }
.large-text .pit-option-note, .large-text .pit-score-details .score-columns small { font-size: 14px; }
.pitwall-board-complete { display: none; }
.result-run-context {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid #34404e;
  color: var(--muted);
  font-size: 12px;
}
.result-run-context b { color: var(--text); text-align: right; }
.result-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.result-board-head h2 {
  margin-top: 2px;
  font: 900 clamp(52px, 14vw, 78px)/.9 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -5px;
}
.result-board-head h2 small {
  margin-left: 8px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 0;
}
.licence-stamp {
  max-width: 180px;
  padding: 9px 11px;
  border: 2px solid var(--pit-accent);
  color: var(--pit-accent);
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-.5deg);
}
.licence-stamp span,
.licence-stamp b,
.licence-stamp small { display: block; }
.licence-stamp span { font: 900 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.4px; }
.licence-stamp b { margin: 4px 0; font-size: 13px; line-height: 1.05; }
.licence-stamp small { font-size: 8px; letter-spacing: 1.2px; }
.licence-stamp.earned { animation: licence-stamp .2s ease-out; }
.result-status { display: grid; justify-items: end; align-items: start; gap: 8px; min-width: 130px; }
.run-medal {
  min-width: 130px;
  padding: 5px 9px;
  border: 1px solid #6d7a89;
  background: #0b1117;
  color: #d9e1eb;
  font: 800 11px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .7px;
  text-align: center;
  text-transform: uppercase;
}
@keyframes licence-stamp {
  from { opacity: 0; transform: translateY(3px) rotate(-.5deg); }
  to { opacity: 1; transform: translateY(0) rotate(-.5deg); }
}
.decision-readback {
  margin: 18px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--pit-accent);
  background: #141d26;
}
.decision-readback span,
.decision-readback b { display: block; }
.decision-readback span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.decision-readback b { margin-top: 3px; font-size: 13px; line-height: 1.35; }
.decision-readback.optimal { border-left-color: var(--good); }
.decision-readback.viable { border-left-color: var(--warn); }
.decision-readback.costly { border-left-color: var(--bad); }
.score-columns,
.line-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}
.score-columns > div,
.line-detail > div {
  position: relative;
  min-height: 70px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #3d4857;
  background: #0b1016;
}
.score-columns {
  gap: 0;
  overflow: hidden;
  border: 1px solid #3d4857;
  background: #0b1016;
}
.score-columns > div {
  min-width: 0;
  min-height: 68px;
  border: 0;
  background: transparent;
}
.score-columns > div + div { border-left: 1px solid #3d4857; }
.score-columns span,
.line-detail span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.score-columns b,
.line-detail b {
  display: block;
  margin-top: 4px;
  font: 900 25px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.score-columns i,
.line-detail i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: var(--pit-accent);
}
.score-columns i { height: 3px; }
.line-result-slot:empty { display: none; }
.result-consequence {
  margin-top: 14px;
  color: #f0f3f8;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.45;
}
.pit-debrief {
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid #34404e;
  border-bottom: 1px solid #34404e;
}
.pit-debrief p { color: #b9c5d3; line-height: 1.5; }
.pit-debrief p + p { margin-top: 7px; }
.next-reward {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.next-reward b { color: var(--text); text-align: right; }
.run-xp {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 12px;
}
.run-xp b { color: var(--pit-accent); text-align: right; }
.pit-result-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 9px;
  margin-top: 16px;
}
.pit-result-actions .btn { min-height: 44px; box-shadow: none; }
.pit-practice-next {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 0;
  border-top: 1px solid #3b4a59;
  border-bottom: 1px solid #3b4a59;
}
.pit-practice-next > div { flex: 1; min-width: 0; }
.pit-practice-next h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.4; }
.pit-practice-next p { margin: 0; line-height: 1.55; }
.pit-practice-next .small { margin-top: 6px; }
.pit-practice-next .btn { flex: 0 1 45%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.practice-drill-description { color: var(--text); line-height: 1.5; }
.home-coaching-help { margin-top: 12px; line-height: 1.55; }
.home-coaching-status:empty { display: none; }
@media (max-width: 360px) {
  .paddock-hero[data-next-activity^="resume-"] .paddock-hero-actions .primary,
  .paddock-hero[data-next-activity="saved-corner"] .paddock-hero-actions .primary { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .pit-practice-next { align-items: stretch; flex-direction: column; gap: 12px; }
  .pit-practice-next .btn { flex: auto; width: 100%; }
}
.line-detail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.line-detail > div { min-height: 62px; }
.line-detail b { font-size: 18px; }
.line-input-modes {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.line-input-modes .btn { min-height: 44px; border: 1px solid #49576a; background: #111822; }
.line-input-modes .btn.selected { border-color: var(--pit-accent); color: var(--pit-accent); }
.pit-line-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 40 / 21;
  border: 1px solid #465365;
  border-radius: 7px;
  background: #0a0e13;
}
.pit-line-canvas.comparison { margin-top: 14px; }
.line-status { min-height: 38px; padding: 9px 2px 5px; }
.line-reference-panel {
  padding: 12px;
  border: 1px solid #3d4857;
  background: #10161e;
}
.line-reference-panel .reference-preview { margin: 12px 0 14px; }
.line-reference-panel label {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  color: #d6deea;
  font-size: 13px;
}
.line-reference-panel select {
  width: 100%;
  min-height: 44px;
  padding: 9px 36px 9px 11px;
  border: 1px solid #697789;
  border-radius: 6px;
  background: #0b1117;
  color: #f0f3f7;
  font: 700 13px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  cursor: pointer;
}
.line-reference-panel select:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.line-reference-panel .btn { margin-top: 10px; }

/* Home is a timing board plus one course action, not a card grid. */
.pit-home-panel { padding: 0 18px 16px; margin-bottom: 12px; }
.pit-home-panel .timing-strip { margin-bottom: 14px; }
.pit-home-main {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 220px);
  gap: 18px;
  align-items: center;
}
.pit-home-main h2 { margin-top: 3px; font-size: clamp(23px, 5vw, 34px); }
.pit-home-main p { max-width: 620px; margin-top: 6px; color: var(--muted); line-height: 1.45; }
.pit-home-telemetry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 16px;
  background: #3a4553;
  border: 1px solid #3a4553;
}
.pit-home-telemetry > div {
  min-width: 0;
  padding: 10px;
  background: #0a0f15;
}
.pit-home-telemetry span,
.pit-home-telemetry b,
.pit-home-telemetry small { display: block; }
.pit-home-telemetry span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.pit-home-telemetry b { overflow: hidden; margin-top: 4px; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pit-home-telemetry small { overflow: hidden; margin-top: 2px; color: #8190a3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pit-mastery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  padding: 14px 0 4px;
}
.pit-mastery > div {
  display: grid;
  grid-template-columns: 86px minmax(48px, 1fr) minmax(54px, auto);
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--muted);
  font-size: 11px;
}
.pit-mastery i {
  height: 4px;
  overflow: hidden;
  background: #2d3745;
}
.pit-mastery i b {
  display: block;
  height: 100%;
  background: var(--pit-accent);
}
.pit-mastery strong {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pit-unlock-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  color: var(--muted);
  font-size: 11px;
}
.pit-unlock-line b { color: var(--pit-accent); text-align: right; }
.home-next-panel {
  display: grid;
  grid-template-columns: 1fr minmax(210px, 300px);
  gap: 18px;
  align-items: center;
  padding: 15px 3px 17px;
  border-bottom: 1px solid #35404d;
}
.home-next-panel h2 { margin-top: 3px; font-size: 19px; }
.home-next-panel p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.home-next-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.home-next-actions .btn { min-height: 44px; border-radius: 7px; box-shadow: none; }

.pit-accent-picker { min-inline-size: 0; }
.pit-accent-picker legend { padding: 0 4px; font-weight: 800; }
.pit-accent-picker > p { margin: 5px 0 10px; }
.accent-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.accent-option {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 2px 9px;
  min-height: 58px;
  padding: 9px;
  border: 1px solid #465365;
  border-radius: 7px;
  background: #111822;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.accent-option i { grid-row: 1 / 3; width: 12px; height: 100%; min-height: 34px; background: #a9b8ca; }
.accent-option i.amber { background: #ffd23f; }
.accent-option i.ice { background: #65d7ff; }
.accent-option i.scarlet { background: #ff685f; }
.accent-option b { align-self: end; font-size: 12px; }
.accent-option span { color: var(--muted); font-size: 10px; }
.accent-option.selected { border-color: var(--pit-accent); box-shadow: inset 0 0 0 1px var(--pit-accent); }
.accent-option:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 620px) {
  .pit-home-main,
  .home-next-panel { grid-template-columns: 1fr; }
  .pit-home-main .btn { min-height: 50px; }
  .pit-home-telemetry { grid-template-columns: 1fr; }
  .pit-home-telemetry b,
  .pit-home-telemetry small { white-space: normal; }
  .result-board-head { align-items: center; }
  .licence-stamp { max-width: 135px; }
  .result-status { justify-items: stretch; }
  .score-columns { grid-template-columns: 1fr 1fr 1fr; }
  .line-detail { grid-template-columns: 1fr 1fr; }
  .line-detail > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pit-result-actions { grid-template-columns: 1fr; }
  .line-reference-panel label { grid-template-columns: 1fr; }
  .line-reference-panel label select { grid-column: 1; grid-row: 2; }
  .accent-options { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .pitwall-board { padding-bottom: 6px; }
  .pitwall-play { margin-top: 6px; }
  .challenge-brief.challenge-situation { margin: 8px 0 6px; }
  .challenge-brief.challenge-situation svg { width: 100%; height: auto; max-height: none; margin: 0 auto; }
  .pitwall-board .timing-strip { min-height: 28px; margin-bottom: 10px; padding-top: 4px; padding-bottom: 4px; }
  .challenge-situation .challenge-cues {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .pitwall-screen .topbar { display: grid; grid-template-columns: 44px 1fr auto; gap: 5px; padding-bottom: 4px; }
  .pitwall-screen .topbar .title { min-width: 0; font-size: 14px; white-space: nowrap; }
  .pitwall-screen .topbar .pit-mute { padding: 6px 8px; font-size: 11px; }
  .pitwall-board,
  .pit-home-panel { padding-left: 12px; padding-right: 12px; }
  .timing-strip { margin-left: -12px; margin-right: -12px; }
  .pitwall-title-row { align-items: center; gap: 8px; }
  .pitwall-title-row h1 { font-size: 22px; }
  .sector-tag { padding: 4px 6px; font-size: 9px; }
  .pitwall-context { margin-top: 10px; font-size: 14px; line-height: 1.4; }
  .pit-objective { grid-template-columns: 72px 1fr; margin-top: 9px; padding-top: 9px; font-size: 13px; }
  .pit-question { padding: 4px 2px 8px; }
  .pit-question h2 { font-size: 17px; }
  .pit-question p { display: none; }
  .pit-result { padding: 12px; }
  .result-run-context { display: none; }
  .result-board-head { gap: 8px; }
  .result-board-head h2 { font-size: 44px; }
  .result-consequence { margin-top: 9px; font-size: 14px; line-height: 1.35; }
  .score-columns { gap: 0; margin-top: 10px; }
  .score-columns > div { min-height: 58px; padding: 7px; }
  .score-columns b { margin-top: 2px; font-size: 21px; }
  .decision-readback { margin: 10px 0 8px; padding: 8px 9px; }
  .pit-debrief { margin-top: 10px; padding: 8px 0; }
  .pit-debrief p { font-size: 12px; line-height: 1.35; }
  .pit-debrief p + p { margin-top: 5px; }
  .run-xp,
  .next-reward { margin-top: 8px; font-size: 11px; }
  .pit-result-actions { display: flex; flex-wrap: wrap; margin-top: 10px; }
  .pit-result-actions .btn { flex: 1 1 45%; min-width: 0; min-height: 44px; padding: 8px 6px; }
  .pit-result-actions .primary, .pit-result-actions .ghost { flex-basis: 100%; }
  .licence-stamp { max-width: 122px; padding: 7px; }
  .pit-mastery { grid-template-columns: 1fr; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .pitwall-board { padding-bottom: 12px; }
  .pitwall-context { margin-top: 8px; font-size: 14px; }
  .pit-objective { margin-top: 8px; padding-top: 8px; }
  .pit-option { min-height: 50px; }
  .pit-line-canvas { max-height: 62vh; width: auto; max-width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) {
  .context-picker { grid-template-columns: 1fr; }
  .context-option { min-height: 58px; }
}

/* Larger Text is a complete reading mode, not only a body-copy adjustment.
   Keep dense timing-board labels compact enough to preserve their hierarchy,
   while lifting every supporting label above the default microtype sizes. */
.large-text .home-tab,
.large-text .track-mode,
.large-text .context-option b,
.large-text .accent-option b {
  font-size: 15px;
}
.large-text .context-option span,
.large-text .run-mode small,
.large-text .practice-standard span,
.large-text .lesson-progress,
.large-text .decision-context,
.large-text .final-review-item,
.large-text .flag-visual span,
.large-text .result-badge,
.large-text .assist-control .assist-live,
.large-text .assist-panel .assist-live {
  font-size: 13px;
  line-height: 1.45;
}
.large-text .pitwall-screen .topbar .pit-mute,
.large-text .pit-scoring-note,
.large-text .next-reward,
.large-text .pit-unlock-line {
  font-size: 14px;
  line-height: 1.45;
}
.large-text .pit-question p,
.large-text .pit-debrief p,
.large-text .line-reference-panel label,
.large-text .home-next-panel p {
  font-size: 15px;
  line-height: 1.5;
}
.large-text .line-reference-panel select { font-size: 16px; }
.large-text .timing-strip,
.large-text .pit-objective b,
.large-text .score-columns span,
.large-text .line-detail span,
.large-text .decision-readback span,
.large-text .licence-stamp span,
.large-text .licence-stamp small {
  font-size: 12px;
  line-height: 1.35;
}
.large-text .sector-tag { font-size: 12px; }
.large-text .licence-stamp b { font-size: 15px; }
.large-text .pit-home-telemetry span { font-size: 12px; }
.large-text .pit-home-telemetry b { font-size: 16px; }
.large-text .pit-home-telemetry small,
.large-text .accent-option span {
  font-size: 13px;
  line-height: 1.4;
}
.large-text .pit-mastery > div {
  min-height: 30px;
  font-size: 13px;
  line-height: 1.4;
}
.large-text .assist-grid .btn,
.large-text .setup-prediction .btn {
  font-size: 14px;
}
.large-text .pedal { min-width: 80px; }
.large-text .pedal .lbl { font-size: 13px; }
.large-text .pedal .lbl .pct { font-size: 16px; }
.large-text .hud .hud-pill { font-size: 14px; line-height: 1.3; }
.large-text .anatomy-prompt { font-size: 15px; line-height: 1.4; }
.large-text .anatomy-context { font-size: 14px; line-height: 1.4; }
.large-text .drill-canvas-wrap > [role="status"] {
  font-size: 15px !important;
  line-height: 1.4;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- motion polish (v1.20) ---------- */
/* Results arrive quickly without a spring or reward-game flourish. */
.overlay .sheet { animation: sheet-up .2s cubic-bezier(.2, .7, .2, 1); }
@keyframes sheet-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.overlay .big-stars span { display: inline-block; animation: result-reveal .18s ease-out backwards; }
@keyframes result-reveal {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
/* cards respond to touch like buttons do */
.card.tappable { transition: transform .1s ease, border-color .15s ease; }
.card.tappable:active { transform: scale(.985); }
.hud-pill { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- paddock, challenge garage and circuit presentation ---------- */
body { background: #0c1015; }
#app::before { opacity: .18; }
.btn { border-radius: 8px; font-weight: 700; }
.btn.primary { background: #ff725b; color: #190b08; box-shadow: 0 5px 18px #0003; }
.btn.primary:hover { background: #ff8a75; }
.btn:focus-visible, .challenge-filters .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kicker { letter-spacing: 1.5px; font-size: 11px; line-height: 1.5; }
.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { display: grid; place-items: center; flex: 0 0 35px; height: 35px; color: #190b08; background: var(--accent); font: italic 900 20px/1 Arial, sans-serif; letter-spacing: -2px; border-radius: 4px; padding-right: 3px; }
.brand-lockup > b { font-size: 19px; letter-spacing: -.6px; }
.brand-lockup > span:last-child { margin-left: 10px; padding-left: 16px; border-left: 1px solid #44505e; color: #a9b3c0; font: 9px/1.5 ui-monospace, Consolas, monospace; letter-spacing: 1.6px; }
.paddock-masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0 18px; }
.hero-settings { border: 1px solid #3e4a58; }
.paddock-hero { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; min-height: 270px; border: 1px solid #34404d; border-radius: 12px; background: #141b23; margin-bottom: 16px; }
.paddock-hero-copy { position: relative; padding: 26px; z-index: 2; min-width: 0; }
.paddock-hero h1, .welcome-copy h1 { margin: 12px 0 14px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -1.9px; font-weight: 850; }
.paddock-hero em, .welcome-copy em { color: #a6b5c3; font-style: normal; }
.paddock-hero-copy > p { max-width: 390px; color: #bdc6d1; font-size: 14px; line-height: 1.6; }
.paddock-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.paddock-hero-actions .btn { min-height: 46px; padding: 11px 16px; font-size: 13px; }
.paddock-hero-art, .welcome-art { position: relative; min-width: 0; overflow: hidden; background: #10171f; }
.circuit-art { position: absolute; inset: 0; }
.circuit-art > canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit-caption { position: absolute; display: flex; justify-content: space-between; gap: 8px; bottom: 14px; left: 20px; right: 20px; z-index: 2; pointer-events: none; font: 9px/1.5 ui-monospace, Consolas, monospace; letter-spacing: 1.5px; color: #bac7d4; }
.circuit-caption b { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: #bac7d4; }
.circuit-caption b::before { content: ''; width: 15px; height: 2px; background: #5be5e2; }
.paddock-licence { max-width: 345px; margin-top: 18px; }
.paddock-licence > span { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 11px; color: #c3cbd4; }
.paddock-licence > span b { color: var(--accent); font-family: ui-monospace, Consolas, monospace; }
.paddock-licence .pbar { height: 3px; }
.paddock-licence .pbar > i { background: var(--accent); box-shadow: none; }
.paddock-licence small { display: block; margin-top: 7px; font-size: 11px; line-height: 1.5; color: #a6b5c5; }
.paddock-screen .home-tabs { border: 0; border-bottom: 1px solid #34404d; border-radius: 0; padding: 0; margin: 0 0 14px; box-shadow: none; }
.paddock-screen .home-tab { border-radius: 0; min-height: 48px; background: transparent; border-bottom: 3px solid transparent; }
.paddock-screen .home-tab.active { color: #f6f7f9; border-bottom-color: var(--accent); }
.paddock-screen .pit-home-panel { align-self: start; border: 1px solid #34404d; background: #151d26; border-radius: 10px; border-left: 1px solid #34404d; }
.paddock-screen .timing-strip { background: #202b36; color: #cbd6e0; border-bottom: 1px solid #34404d; margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
.paddock-screen .timing-strip b { color: #ffab98; }
.paddock-screen .pit-home-main { grid-template-columns: 1fr; gap: 14px; }
.paddock-screen .pit-home-main h2 { font-size: 23px; line-height: 1.2; letter-spacing: -.5px; }
.paddock-screen .pit-home-main .btn { justify-self: start; font-size: 13px; }
.paddock-screen .pit-home-telemetry { margin-top: 20px; }
.paddock-screen .pit-home-telemetry > div { border-color: #34404d; background: #10171f; }
.paddock-screen .pit-home-telemetry b { font-size: 12px; }
.paddock-screen .pit-home-telemetry small { color: #a2b0c0; }
.paddock-screen .home-next-panel { align-self: start; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 18px; margin: 0 0 12px; border: 1px solid #34404d; border-radius: 10px; background: #121920; }
.paddock-screen .home-next-panel h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.4px; }
.paddock-screen .home-next-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 7px; }
.paddock-screen .home-next-actions .btn { width: auto; font-size: 12px; padding: 10px 13px; }
.title-screen { width: min(100%, 1200px) !important; padding-top: max(24px, var(--sat)); padding-bottom: max(20px, var(--sab)); justify-content: center; gap: 24px; }
.title-screen > .brand-lockup { margin-top: auto; }
.welcome-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.welcome-copy { padding: 24px 0; }
.welcome-copy h1 { font-size: clamp(32px, 4.5vw, 58px); }
.welcome-copy > p { max-width: 430px; color: #b4c1ce; line-height: 1.7; font-size: 15px; }
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; max-width: 430px; }
.welcome-actions .primary { grid-column: 1 / -1; }
.welcome-actions .btn { font-size: 13px; }
.welcome-art { height: 380px; border-radius: 12px; border: 1px solid #34404d; }
.welcome-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font: 10px/1.6 ui-monospace, Consolas, monospace; color: #a6b5c5; }
.welcome-proof span::before { content: '•'; color: var(--accent); margin-right: 7px; }
.welcome-credit { margin-top: auto; max-width: 680px; align-self: center; line-height: 1.6; font-size: 11px; }
.library-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 18px 0 26px; }
.library-head h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -1.5px; margin: 8px 0 12px; }
.library-head p { color: #aab8c7; max-width: 510px; line-height: 1.6; font-size: 14px; }
.library-stats { display: flex; gap: 24px; flex-shrink: 0; padding-bottom: 6px; }
.library-stats span { font-size: 11px; color: #aab8c7; }
.library-stats b { display: block; font: 700 26px/1.4 ui-monospace, Consolas, monospace; color: #e9eef4; }
.challenge-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.challenge-filters .btn { padding: 10px 14px; min-height: 44px; font-size: 12px; background: #151e28; border: 1px solid #34404d; }
.challenge-filters .btn[aria-pressed="true"] { background: var(--accent); color: #190b08; border-color: var(--accent); }
.library-count { margin: 18px 0 14px; }
.section-intro { grid-column: 1 / -1; padding: 6px 0 14px; }
.section-intro h2, .practice-launch h2 { font-size: 24px; letter-spacing: -.5px; margin: 6px 0 8px; }
.section-intro p, .practice-launch p { line-height: 1.6; }
.practice-launch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px; margin-bottom: 20px; border: 1px solid #34404d; border-radius: 10px; background: #151d26; }
.practice-launch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.challenge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 24px; }
.challenge-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #34404d; border-radius: 10px; overflow: hidden; background: #151c25; transition: border-color .15s; }
.challenge-card:focus-within, .challenge-card:hover { border-color: #93a1b8; }
.challenge-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; font: 9px/1.5 ui-monospace, Consolas, monospace; color: #a5b7c8; text-transform: uppercase; letter-spacing: .6px; }
.challenge-card-top b { white-space: nowrap; color: #dbe4ed; }
.challenge-card-top .gold { color: #ffcf4d; }
.challenge-card-top .bronze { color: #edb285; }
.challenge-card-scene { aspect-ratio: 640 / 290; background: #10171f; overflow: hidden; }
.challenge-card-scene svg { display: block; height: 100%; width: 100%; }
.challenge-card-copy { padding: 18px 18px 16px; flex: 1; }
.challenge-card-index { color: var(--accent); font: 10px/1.5 ui-monospace, Consolas, monospace; margin-bottom: 6px; }
.challenge-card h2 { font-size: 19px; line-height: 1.25; letter-spacing: -.3px; margin-bottom: 9px; }
.challenge-card p { font-size: 13px; line-height: 1.6; color: #aab8c7; }
.challenge-card > .btn { margin: 0 18px 18px; justify-content: space-between; font-size: 12px; min-height: 46px; }
.challenge-brief { border-top: 1px solid #34404d; margin-top: 16px; }
.challenge-brief > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #bfccd8; font-size: 12px; }
.challenge-brief > summary::before { content: '+'; color: var(--accent); font-size: 20px; }
.challenge-brief[open] > summary::before { content: '−'; }
.challenge-brief svg { display: block; width: 100%; max-height: 220px; }
.challenge-cues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 14px; }
.challenge-cues span { font-size: 11px; line-height: 1.4; color: #b8c8d8; }
.challenge-cues b { display: block; font-size: 9px; text-transform: uppercase; color: #92a3b5; margin-bottom: 3px; }
.challenge-transfer { margin-top: 18px; padding: 18px; background: #15202a; border: 1px solid #34404d; border-radius: 8px; }
.challenge-transfer h3 { margin: 6px 0 8px; font-size: 18px; }
.challenge-transfer p { line-height: 1.6; color: #b5c3d0; font-size: 13px; }
.challenge-transfer .btn { margin-top: 12px; font-size: 12px; }
.test-drive-intro > p { color: #acbdcb; line-height: 1.6; }
.test-drive-steps { display: grid; gap: 16px; margin: 24px 0; }
.test-drive-steps > div { display: flex; gap: 14px; align-items: start; }
.test-drive-steps > div > b { font: 700 22px/1.2 ui-monospace, Consolas, monospace; color: var(--accent); }
.test-drive-steps span { font-size: 13px; line-height: 1.55; color: #b5c4d2; }
.test-drive-steps strong { display: block; color: #edf2f7; margin-bottom: 3px; }
.track-chooser-sheet { max-width: 670px; }
.track-chooser-brief { margin: 12px 0 16px; padding-left: 14px; border-left: 3px solid #577083; }
.track-chooser-brief p { margin: 0; color: #bdcad5; font-size: 13px; line-height: 1.55; }
.track-chooser-brief p + p { margin-top: 8px; }
.large-text .track-chooser-brief p { font-size: 15px; line-height: 1.6; }
.track-quick-start { width: 100%; justify-content: center; margin: 2px 0 18px; }
.track-chooser-options { padding-top: 16px; border-top: 1px solid var(--line); }
.track-circuit-card { overflow: hidden; border-radius: 10px; }
.track-reference[data-event="board"] { box-shadow: inset 0 0 0 1px rgba(244,247,250,.12); }
.track-circuit-map { min-height: 86px; position: relative; background: #0c141a; border-radius: 6px; overflow: hidden; margin-bottom: 12px; align-self: center; }
.track-circuit-map canvas { width: 100%; height: 100%; }
.track-circuit-meta { display: flex; gap: 12px; margin: 8px 0; color: #becbd6; font: 11px/1.5 ui-monospace, Consolas, monospace; }
.track-circuit-focus { color: #99b0c1; line-height: 1.5; font-size: 12px; }
.track-reference { position: absolute; top: var(--track-hud-bottom, calc(58px + env(safe-area-inset-top))); left: 12px; width: min(260px, calc(100% - 128px)); padding: 12px; z-index: 6; pointer-events: none; border: 1px solid #61758588; border-radius: 8px; background: #0d1721eb; }
.track-end-btn { top: var(--track-hud-bottom, 58px) !important; }
.track-toast { top: var(--track-reference-bottom, 160px) !important; }
.track-reference[data-tone="brake"] { border-left: 3px solid #ff6b62; }
.track-reference[data-tone="turn"] { border-left: 3px solid #ffd23f; }
.track-reference[data-tone="exit"] { border-left: 3px solid #3ddc84; }
.track-reference-eyebrow { color: #9fb3c4; font: 9px/1.5 ui-monospace, Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; }
.track-reference-main { margin: 4px 0; color: #f4f7fa; font-weight: 800; font-size: 14px; }
.track-reference-detail { font-size: 11px; color: #bacbd7; line-height: 1.4; }
.track-reference-progress { height: 3px; background: #314251; margin-top: 10px; border-radius: 3px; overflow: hidden; }
.track-reference-progress span { display: block; height: 100%; background: var(--accent); }
.track-debrief { margin: 14px 0; padding: 14px; border: 1px solid #3b4d60; border-radius: 8px; background: #101a25; text-align: left; }
.track-debrief-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.track-debrief-metric b { display: block; font: 700 22px/1.4 ui-monospace, Consolas, monospace; color: #f3f6fb; }
.track-debrief-metric span { font-size: 11px; color: #b2c3d4; line-height: 1.4; }
.track-lap-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.track-lap-table th, .track-lap-table td { padding: 9px 6px; border-bottom: 1px solid #34404d; text-align: right; }
.track-lap-table th:first-child, .track-lap-table td:first-child { text-align: left; }
.track-lap-table th { color: #a0b4c6; font-weight: 600; }

/* Focused sessions and a readable route through the course. */
.paddock-screen[data-home-view="course"] .paddock-hero,
.paddock-screen[data-home-view="practice"] .paddock-hero { display: none; }
.returning-hero { min-height: 210px; }
.returning-hero h1 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -1px; line-height: 1.12; }
.returning-hero .paddock-licence { margin-top: 16px; }
.home-course-progress { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 18px 20px; margin-bottom: 6px; border: 1px solid #435462; border-left: 3px solid var(--accent); border-radius: 8px; background: #151e27; }
.home-course-progress > span { color: #bfccda; font-size: 13px; line-height: 1.5; }
.home-course-progress > .pbar { flex: 1 1 150px; min-width: 100px; height: 5px; }
.home-course-progress > .pbar > i { background: var(--accent); box-shadow: none; }
.home-course-progress h3, .home-course-progress b { line-height: 1.4; }
.home-course-progress p { margin-top: 5px; line-height: 1.5; }
.home-course-progress .btn { flex: 0 1 auto; }
.session-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-column: 1 / -1; margin: 0 0 14px; }
.session-shortcut { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 92px; gap: 5px; padding: 16px; border: 1px solid #34404d; border-radius: 9px; background: #121a22; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.session-shortcut:last-child:nth-child(odd) { grid-column: 1 / -1; }
.session-shortcut b, .session-shortcut strong { font-size: 14px; line-height: 1.35; }
.session-shortcut span, .session-shortcut small { font-size: 12px; color: #a9b9c8; line-height: 1.45; }
.session-shortcut i { align-self: flex-end; color: var(--accent); font-size: 18px; font-style: normal; }
.session-shortcut:focus-visible, .lesson-outline button:focus-visible,
.lesson-outline summary:focus-visible, .track-corner-details summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.session-shortcut:hover { background: #1a2631; border-color: #8b9eaf; }
.home-skill-summary { grid-column: 1 / -1; padding: 0 16px; margin-bottom: 14px; border: 1px solid #34404d; border-radius: 8px; background: #101820; }
.home-skill-summary > summary { min-height: 48px; padding: 14px 0; font-size: 13px; line-height: 1.5; color: #bdcbd8; cursor: pointer; }
.home-skill-summary > summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.home-skill-summary > .small { padding-bottom: 16px; line-height: 1.6; }
.home-skill-summary .pit-mastery { margin: 0 0 16px; }
.pit-home-panel > p.small { margin-top: 14px; line-height: 1.6; }
.chapter-checklist { display: grid; gap: 8px; margin: 16px 0 20px; }
.chapter-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #435362; border-radius: 6px; color: #bac8d5; font-size: 12px; line-height: 1.4; }
.chapter-step > span { flex: 0 0 24px; text-align: center; font: 700 14px/1.5 ui-monospace, Consolas, monospace; color: var(--accent); }
.chapter-step > b { flex: 1; }
.chapter-step > small { color: #a9b9c8; font-size: 11px; }
.chapter-step.done { border-color: #3d7660; color: #94e3b7; background: #13271f; }
.chapter-step.current { border-color: var(--accent); color: #ffe2da; background: #2c1c1a; }
.chapter-standard { margin-top: 16px; border-top: 1px solid #344654; padding: 4px 0; }
.chapter-standard > summary { padding: 12px 0; min-height: 44px; color: #b4c4d2; font-size: 13px; cursor: pointer; }
.chapter-standard p { padding-bottom: 10px; font-size: 13px; line-height: 1.6; color: #b4c4d2; }
.lesson-outline { border: 1px solid #344654; border-radius: 8px; background: #111b24; margin: 0 0 16px; max-height: 35vh; overflow-y: auto; }
.lesson-outline > summary { min-height: 44px; padding: 12px 14px; color: #c3d1de; cursor: pointer; font-size: 13px; line-height: 1.4; }
.lesson-outline[open] > summary { border-bottom: 1px solid #344654; }
.lesson-outline button { display: block; width: 100%; min-height: 44px; padding: 11px 14px; border: 0; border-bottom: 1px solid #293846; background: transparent; color: #c3d1de; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.lesson-outline button:last-child { border-bottom: 0; }
.lesson-outline-step > span { display: inline-block; min-width: 25px; margin-right: 6px; color: #93a9bb; font-variant-numeric: tabular-nums; }
.lesson-outline button[aria-current="step"], .lesson-outline button.active { color: #ffe1d9; background: #2a2020; box-shadow: inset 3px 0 var(--accent); }
.lesson-outline button:disabled { color: #93a2b1; cursor: default; }
.lesson-diagram-control { align-self: flex-start; min-height: 44px; margin: -4px 0 8px; box-shadow: none; font-size: 12px; }
.lesson-body .lesson-explanation { max-width: 74ch; }
.lesson-explanation p { font-size: 16px; line-height: 1.65; }
.result-route { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid #3f5465; border-radius: 8px; background: #111b24; color: #b7c8d6; text-align: left; font-size: 13px; line-height: 1.5; }
.result-route b { color: var(--text); }
.result-route > span, .result-route > b { display: block; }
.result-route > span { margin-bottom: 4px; color: #b7c8d6; font-size: 11px; }

/* Corner Lab is an experiment, with one clear route from choice to replay. */
.corner-lab-entry { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; margin-bottom: 14px; padding: 20px 22px; border: 1px solid #645047; border-left: 3px solid var(--accent); border-radius: 10px; background: linear-gradient(110deg, #261d1b, #151d25 65%); }
.corner-lab-entry-copy { min-width: 0; }
.corner-lab-entry h2 { margin: 5px 0 7px; color: #f6f0e9; font-size: 25px; line-height: 1.2; letter-spacing: -.6px; }
.corner-lab-entry p { max-width: 60ch; color: #c2cbd2; font-size: 13px; line-height: 1.6; }
.corner-lab-entry-actions { flex: 0 0 auto; }
.corner-lab-entry-actions .btn { min-height: 48px; padding: 12px 20px; font-size: 14px; }
.paddock-screen .home-pane { min-width: 0; }
.paddock-screen .home-pane > .card { background: #141c25; border-color: #344350; box-shadow: none; }
.paddock-screen .home-pane > .card:not(.locked):hover { border-color: #788d9f; }
.paddock-screen .home-pane > .card > .row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; }
.paddock-screen .home-pane > .card .grow > b { font-size: 15px; line-height: 1.35; letter-spacing: -.15px; }
.paddock-screen .home-pane > .card .small { line-height: 1.5; }
.paddock-screen .home-pane > .card > .row > :last-child { max-width: 125px; font-variant-numeric: tabular-nums; }
.paddock-screen .home-pane > .card.locked { opacity: 1; background: #111820; border-color: #2b3741; }
.paddock-screen .home-pane > .card.locked .grow > b { color: #b2c0cc; }
.paddock-screen .home-pane > .card.locked .small { color: #96a6b5; }
.paddock-screen .home-pane > .card.locked .chip { opacity: .75; }
.paddock-screen .home-pane .section-intro > .btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.paddock-screen .home-pane .section-intro > .btnrow .btn { min-width: 0; white-space: normal; text-align: left; line-height: 1.45; }
.practice-list-head { padding: 24px 0 12px; }
.practice-list-head p { max-width: 72ch; margin-top: 7px; line-height: 1.6; }
.practice-launch-actions .btn { min-height: 46px; }

.lab-root { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; padding: calc(var(--lab-hud-clearance, calc(64px + var(--sat))) + 18px) max(16px, var(--sar)) calc(28px + var(--sab)) max(16px, var(--sal)); background: #0d131a; scrollbar-width: thin; scroll-padding-top: calc(var(--lab-hud-clearance, calc(64px + var(--sat))) + 12px); scroll-padding-bottom: 18px; }
.lab-root > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.lab-heading { margin-bottom: 20px; }
.lab-heading h2 { margin: 6px 0 9px; color: #f3f0eb; font-size: clamp(25px, 3vw, 34px); line-height: 1.15; letter-spacing: -.8px; }
.lab-heading p { max-width: 74ch; color: #bac8d4; font-size: 14px; line-height: 1.6; }
.lab-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .9fr); align-items: start; gap: 20px; }
.lab-layout > *, .lab-workbench > * { min-width: 0; }
.lab-visual { min-width: 0; overflow: hidden; border: 1px solid #3c4c59; border-radius: 10px; background: #111c25; }
.lab-reference-details { border-top: 1px solid #30434f; }
.lab-reference-details > summary { min-height: 44px; padding: 12px 14px; color: #bcd0dd; font-size: 12px; font-weight: 650; line-height: 1.5; cursor: pointer; }
.lab-reference-details[open] > summary { border-bottom: 1px solid #30434f; }
.lab-reference-details .lab-legend { border-top: 0; }
.lab-stage { position: relative; min-width: 0; height: clamp(260px, 34vw, 395px); overflow: hidden; background: #101820; }
.lab-stage > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; }
.lab-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 12px 15px; border-top: 1px solid #2d3d49; color: #c3d0da; font-size: 12px; line-height: 1.5; }
.lab-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.lab-legend b { display: inline-grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 4px; color: #0c171f; background: #96b5c9; font: 800 11px/1 ui-monospace, Consolas, monospace; }
.lab-legend > span:nth-child(2) b { background: #ffab7b; }
.lab-legend > span:last-child { flex-basis: 100%; color: #9fb4c3; font-size: 11px; }
.lab-replay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: 5px 12px; padding: 2px 14px 10px; }
.lab-replay-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.lab-replay .btn { flex: 0 0 auto; min-height: 44px; padding: 10px 13px; font-size: 12px; box-shadow: none; }
.lab-replay label { grid-column: 1; grid-row: 2; min-width: 0; color: #acbdcb; font-size: 11px; line-height: 1.5; }
.lab-replay-time { grid-column: 2; grid-row: 2; color: #a9bdcd; font: 11px/1.5 ui-monospace, Consolas, monospace; text-align: right; }
.lab-replay input[type="range"] { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
.lab-workbench { display: grid; gap: 14px; }
.lab-workbench > .card { margin: 0; }
.lab-plan { margin: 0; padding: 18px; border: 1px solid #3b4b59; border-radius: 9px; background: #151e27; box-shadow: none; }
.lab-prediction { margin: 12px 0; padding: 0; border: 0; background: transparent; }
.lab-plan h3, .lab-prediction h3, .lab-plan legend, .lab-prediction legend { color: #f1f4f6; font-size: 17px; line-height: 1.4; letter-spacing: -.3px; font-weight: 750; }
.lab-plan > p, .lab-prediction > p { margin: 7px 0 13px; color: #b6c6d3; font-size: 13px; line-height: 1.55; }
.lab-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 18px; }
.lab-factors button { min-width: 0; min-height: 48px; padding: 10px 7px; border: 1px solid #4d5f6c; border-radius: 6px; background: #0f1922; color: #c9d5df; font: inherit; font-size: 12px; font-weight: 650; line-height: 1.35; text-align: center; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.lab-factors button[aria-pressed="true"], .lab-factors button[aria-selected="true"] { border-color: #ff917b; background: #392621; color: #ffe4db; box-shadow: inset 0 -2px #ff917b; }
.lab-adjust { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 5px; }
.lab-adjust label { color: #ccd7df; font-size: 13px; line-height: 1.4; }
.lab-adjust output { color: #ffd8c9; font: 600 13px/1.5 ui-monospace, Consolas, monospace; text-align: left; font-variant-numeric: tabular-nums; }
.lab-adjust input, .lab-adjust .small { grid-column: 1 / -1; }
.lab-adjust-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; margin-top: -5px; color: #a5b9c9; font-size: 11px; line-height: 1.5; }
.lab-adjust .small { color: #acbecc; font-size: 12px; line-height: 1.5; }
.lab-root input[type="range"] { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; accent-color: var(--accent); cursor: pointer; touch-action: pan-y; }
.lab-root input[type="range"]::-webkit-slider-runnable-track { height: 6px; border: 1px solid #607482; border-radius: 8px; background: #263948; }
.lab-root input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 3px solid #ffe4dc; border-radius: 50%; background: #e5755d; box-shadow: 0 2px 6px #0007; }
.lab-root input[type="range"]::-moz-range-track { height: 4px; border: 1px solid #607482; border-radius: 8px; background: #263948; }
.lab-root input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #ffe4dc; border-radius: 50%; background: #e5755d; box-shadow: 0 2px 6px #0007; }
.lab-root input[type="range"]:disabled { opacity: .5; cursor: default; }
.lab-context { margin-top: 12px; padding: 12px; border: 1px solid #31434f; border-radius: 6px; background: #101922; color: #b9c9d5; font-size: 12px; line-height: 1.6; }
.lab-context b { color: #e0e7ec; font-weight: 650; }
.lab-visual > .lab-context, .lab-reference-details > .lab-context { margin: 0; border: 0; border-top: 1px solid #30434f; border-radius: 0; padding: 12px 14px; background: #15232e; }
.lab-plan > .lab-context { margin: 12px 0 0; }
.lab-prediction [role="radio"], .lab-prediction button { position: relative; display: block; width: 100%; min-height: 49px; margin-top: 8px; padding: 12px 14px 12px 40px; border: 1px solid #526370; border-radius: 7px; background: #101b24; color: #d5dfe7; font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.lab-prediction [role="radio"]::before, .lab-prediction button::before { content: ''; position: absolute; top: 50%; left: 14px; width: 14px; height: 14px; border: 1.5px solid #8297a7; border-radius: 50%; transform: translateY(-50%); }
.lab-prediction [aria-checked="true"], .lab-prediction [aria-pressed="true"] { border-color: #ff917b; background: #35251f; color: #ffe4d9; }
.lab-prediction [aria-checked="true"]::before, .lab-prediction [aria-pressed="true"]::before { border-color: #ffc1ab; background: #ff9476; box-shadow: inset 0 0 0 3px #35251f; }
.lab-run-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lab-run-action .btn, .lab-run-action.btn { flex: 1 1 auto; min-height: 49px; padding: 12px 16px; font-size: 14px; }
.lab-run-action > p, .lab-run-action > span { flex: 1 1 100%; color: #b8c6d2; font-size: 12px; line-height: 1.5; }
.lab-review { margin-top: 22px; padding: 20px; border: 1px solid #536474; border-top: 3px solid var(--accent); border-radius: 10px; background: #151f29; }
.lab-verdict h3 { color: #f2f4f5; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; letter-spacing: -.5px; margin: 5px 0 10px; }
.lab-verdict p { max-width: 76ch; color: #c2d0db; font-size: 14px; line-height: 1.6; }
.lab-verdict[data-tone="good"] h3 { color: #9be4be; }
.lab-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.lab-metrics > div { min-width: 0; padding: 15px; border: 1px solid #3d505e; border-radius: 7px; background: #101a23; }
.lab-metrics b, .lab-metrics strong { display: block; margin: 5px 0; color: #f5eee7; font: 700 clamp(21px, 2.5vw, 29px)/1.2 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lab-metrics span, .lab-metrics small { display: block; color: #afc0ce; font-size: 12px; line-height: 1.45; }
.lab-comparison { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.lab-comparison-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.lab-comparison caption { padding: 5px 0 12px; color: #aebfcd; font-size: 12px; text-align: left; line-height: 1.5; }
.lab-comparison th, .lab-comparison td { padding: 12px 10px; border-bottom: 1px solid #354a59; text-align: right; }
.lab-comparison th:first-child, .lab-comparison td:first-child { text-align: left; }
.lab-comparison thead th { color: #aebfcd; font-weight: 600; font-size: 11px; }
.lab-comparison tbody th { color: #b8c9d6; font-weight: 600; }
.lab-comparison td { color: #edf2f6; }
.lab-comparison td:last-child { color: #ffe0d1; background: #33251d66; }
.lab-next-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.lab-next-actions .btn { min-height: 47px; min-width: 0; padding: 12px 16px; font-size: 13px; }
.lab-note { margin-top: 18px; padding-top: 13px; border-top: 1px solid #2f424f; color: #9fb3c2; font-size: 12px; line-height: 1.6; }
.lab-root button:focus-visible, .lab-root input:focus-visible, .lab-root summary:focus-visible, .lab-prediction [role="radio"]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lab-factors button:active, .lab-prediction button:active { transform: translateY(1px); }
.lab-root button:disabled { cursor: default; }
@media (hover: hover) {
  .lab-factors button:not(:disabled):hover, .lab-prediction button:not(:disabled):hover { border-color: #b6c9d7; }
  .lab-factors button[aria-pressed="true"]:hover, .lab-factors button[aria-selected="true"]:hover,
  .lab-prediction button[aria-checked="true"]:hover, .lab-prediction button[aria-pressed="true"]:hover { background: #3e2a23; border-color: #ffc1ab; }
}

/* Measured corner feedback stays readable alongside the session result. */
.track-corner-focus { margin: 16px 0; padding: 16px; border: 1px solid #526779; border-left: 3px solid var(--accent); border-radius: 8px; background: #14212b; text-align: left; }
.track-corner-focus h3 { font-size: 19px; line-height: 1.3; margin: 6px 0 10px; }
.track-corner-evidence { font-size: 13px; line-height: 1.6; color: #c3d2df; margin: 8px 0; }
.track-corner-target { font-size: 14px; line-height: 1.6; color: #f1f5f8; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #3c5162; }
.track-corner-details { margin: 14px 0 0; border: 1px solid #3a4e60; border-radius: 8px; text-align: left; }
.track-corner-details > summary { padding: 12px; min-height: 44px; cursor: pointer; color: #d3e0ea; font-size: 13px; font-weight: 700; }
.track-corner-table-wrap { overflow-x: auto; padding: 0 10px 8px; scrollbar-width: thin; }
.track-corner-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.track-corner-table th, .track-corner-table td { padding: 10px 7px; border-bottom: 1px solid #344957; text-align: right; line-height: 1.5; }
.track-corner-table th:first-child, .track-corner-table td:first-child { text-align: left; }
.track-corner-table th { color: #acbfd0; font-weight: 600; }
.track-corner-table td { color: #edf2f7; }
.track-corner-table .is-focus { background: #293035; }
.track-corner-table .track-corner-note { margin: 4px 0 0; font-size: 11px; }
.track-corner-note { display: block; margin: 10px 12px 14px; color: #acbdcb; font-size: 12px; line-height: 1.6; }
.overlay .track-correction-brief { text-align: left; }
/* Corner instructions remain in the reading flow. The generic sticky dialog
   footer can otherwise cover their last paragraph on short or enlarged views. */
.overlay .track-correction-brief .btnrow,
.overlay .track-correction-expired .btnrow,
.overlay .track-correction-result .btnrow {
  position: static;
  bottom: auto;
  padding: 0;
  background: none;
}
@media (max-width: 430px) {
  .overlay .track-correction-result .btnrow {
    flex-direction: column;
  }
  .overlay .track-correction-result .btnrow .btn { min-width: 0; }
}
.track-correction-brief h2 { margin: 7px 0 16px; font-size: 27px; letter-spacing: -.6px; line-height: 1.2; }
.track-correction-brief > p { color: #bfccd7; font-size: 14px; line-height: 1.65; }
.track-correction-baseline { padding: 14px; margin: 14px 0 10px; border: 1px solid #3a4b58; border-radius: 8px; background: #101a23; font-variant-numeric: tabular-nums; }
.track-correction-target { padding: 14px; margin: 10px 0 16px; border: 1px solid #73584b; border-left: 3px solid var(--accent); border-radius: 8px; background: #2a211e; color: #ffe2d7 !important; }
.track-correction-comparison { margin: 16px 0; padding: 18px; border: 1px solid #455867; border-top: 3px solid var(--accent); border-radius: 9px; background: #121e27; text-align: left; }
.track-correction-comparison[data-tone="good"] { border-top-color: #73dbaa; }
.track-correction-comparison[data-tone="improved"] { border-top-color: #78d9dc; }
.track-correction-comparison[data-tone="incomplete"] { border-top-color: #a1b1bf; }
.track-correction-comparison h3 { margin: 0 0 14px; color: #f2f5f7; font-size: 21px; letter-spacing: -.4px; line-height: 1.3; }
.track-correction-comparison p { color: #bccbd7; font-size: 13px; line-height: 1.6; margin-top: 12px; }
.track-correction-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.track-correction-values > div { min-width: 0; padding: 13px; border: 1px solid #3b4e5b; border-radius: 7px; background: #0d1720; }
.track-correction-values > div:last-child { border-color: #876254; background: #251f1d; }
.track-correction-values span { display: block; margin-bottom: 6px; color: #b3c3d0; font-size: 11px; line-height: 1.4; }
.track-correction-values b { display: block; color: #f5efe8; font: 700 clamp(20px, 3vw, 27px)/1.2 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.large-text .session-shortcut span, .large-text .session-shortcut small,
.large-text .chapter-step, .large-text .track-corner-note,
.large-text .track-corner-evidence, .large-text .track-corner-table { font-size: 15px; }
.large-text .lesson-outline button, .large-text .lesson-diagram-control { font-size: 15px; }
.large-text .lesson-explanation p { font-size: 18px; }
.large-text .home-skill-summary > summary { font-size: 15px; line-height: 1.5; }
.large-text .corner-lab-entry p, .large-text .paddock-screen .home-pane > .card .small,
.large-text .lab-heading p, .large-text .lab-plan > p, .large-text .lab-prediction > p,
.large-text .lab-context, .large-text .lab-verdict p, .large-text .lab-note,
.large-text .track-correction-brief > p, .large-text .track-correction-comparison p { font-size: 15px; line-height: 1.6; }
.large-text .lab-root button, .large-text .lab-root label,
.large-text .lab-root .small, .large-text .lab-legend,
.large-text .lab-metrics span, .large-text .lab-metrics small,
.large-text .lab-comparison, .large-text .lab-comparison thead th,
.large-text .track-correction-values span { font-size: 14px; line-height: 1.5; }
.large-text .lab-adjust output { font-size: 15px; }
.large-text .lab-adjust-ends, .large-text .lab-replay-time,
.large-text .lab-legend > span:last-child, .large-text .lab-comparison caption { font-size: 13px; line-height: 1.5; }
.large-text .lab-reference-details > summary { font-size: 14px; }
.large-text .lab-run-action > p, .large-text .lab-run-action > span { font-size: 14px; }
.large-text .paddock-screen .home-next-actions .btn, .large-text .corner-lab-entry-actions .btn { font-size: 15px; }

.large-text .paddock-licence small, .large-text .welcome-proof, .large-text .challenge-card-top, .large-text .library-count { font-size: 13px; }
.large-text .challenge-card p, .large-text .challenge-transfer p, .large-text .challenge-cues span, .large-text .track-reference-detail { font-size: 15px; }
.large-text .track-reference-main, .large-text .challenge-card > .btn, .large-text .challenge-filters .btn { font-size: 16px; }
@media (min-width: 850px) {
  #home-today:not([hidden]) { display: grid; grid-template-columns: 1.45fr 1fr; align-items: start; gap: 16px; }
  .paddock-screen #home-course:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .paddock-screen #home-course .card { margin: 0; }
}
@media (max-width: 849px) {
  .paddock-hero { min-height: 250px; grid-template-columns: 1.2fr 1fr; }
  .paddock-hero-copy { padding: 24px; }
  .paddock-hero h1 { font-size: 30px; letter-spacing: -1px; }
  .paddock-hero-actions { flex-direction: column; align-items: stretch; }
  .welcome-layout { gap: 20px; }
  .welcome-art { height: 320px; }
  .welcome-actions { grid-template-columns: 1fr; }
  .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .brand-lockup > span:last-child { display: none; }
  .paddock-masthead { padding-bottom: 12px; }
  .paddock-hero { grid-template-columns: 1fr; }
  .paddock-hero-copy { padding: 18px; }
  .paddock-hero h1 { font-size: 26px; margin: 8px 0 10px; }
  .paddock-hero-art { height: 110px; grid-row: 1; border-bottom: 1px solid #34404d; }
  .returning-hero .paddock-hero-art { height: 96px; }
  .returning-hero .paddock-hero-copy { padding: 14px; }
  .returning-hero h1 { font-size: 25px; }
  .returning-hero .paddock-hero-copy > p { font-size: 13px; line-height: 1.45; }
  .returning-hero .paddock-licence { margin-top: 12px; }
  .paddock-hero-actions { flex-direction: row; }
  .paddock-hero-actions .btn { flex: 1 1 110px; padding: 11px 9px; font-size: 12px; }
  .paddock-licence { margin-top: 18px; }
  .circuit-caption { left: 14px; right: 14px; bottom: 10px; font-size: 8px; }
  .title-screen { justify-content: flex-start; gap: 14px; }
  .title-screen > .brand-lockup { margin-top: 0; }
  .welcome-layout { display: flex; flex-direction: column-reverse; gap: 0; align-items: stretch; }
  .welcome-art { height: 180px; }
  .welcome-copy { padding: 22px 0 8px; }
  .welcome-copy h1 { font-size: 36px; letter-spacing: -1.3px; }
  .welcome-copy > p { font-size: 14px; }
  .welcome-actions { grid-template-columns: 1fr 1fr; margin-top: 20px; }
  .welcome-actions .btn { padding: 12px; }
  .welcome-proof { gap: 10px; font-size: 9px; }
  .welcome-credit { margin-top: 0; }
  .library-head { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 10px; }
  .library-stats { gap: 24px; }
  .library-stats span { display: flex; align-items: baseline; gap: 7px; }
  .library-stats b { font-size: 20px; }
  .challenge-grid { grid-template-columns: 1fr; }
  .challenge-card-scene { aspect-ratio: 640 / 290; }
  .paddock-screen .pit-home-panel { padding-left: 14px; padding-right: 14px; }
  .paddock-screen .timing-strip { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .paddock-screen .pit-home-telemetry { grid-template-columns: 1fr; }
  .session-shortcuts { gap: 8px; }
  .session-shortcut { padding: 12px 10px; min-height: 90px; }
  .session-shortcut b, .session-shortcut strong { font-size: 13px; }
  .session-shortcut span, .session-shortcut small { font-size: 11px; }
  .home-course-progress { align-items: stretch; padding: 16px; gap: 12px; }
  .home-course-progress .btn { width: 100%; }
  .chapter-checklist { gap: 6px; }
  .chapter-step { padding: 8px; font-size: 11px; }
  .lesson-explanation p { font-size: 15px; }
  .lesson-nav { gap: 8px; }
  .lesson-nav .btn { padding: 10px; font-size: 13px; }
  .lesson-nav .btn:first-child { white-space: nowrap; }
  .lesson-progress { min-width: 72px; }
  .track-corner-focus { padding: 13px; }
  .large-text .session-shortcuts { grid-template-columns: 1fr; }
  .large-text .session-shortcut:last-child:nth-child(odd) { grid-column: auto; }
  .large-text .session-shortcut { min-height: 72px; }
}
@media (max-width: 430px) {
  .track-corner-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .track-corner-table tbody, .track-corner-table { display: block; }
  .track-corner-table tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) 78px; margin-bottom: 10px; border: 1px solid #344957; border-radius: 6px; overflow: hidden; }
  .track-corner-table td { min-width: 0; text-align: left; padding: 9px 10px; border: 0; }
  .track-corner-table tbody th[scope="row"] { grid-column: 1 / -1; padding: 8px 10px; font-weight: 800; background: #1b2a35; text-align: left; border: 0; }
  .track-corner-table td:nth-child(2) { white-space: nowrap; }
  .track-corner-table td:nth-child(2)::before { content: 'Entry / apex / exit'; }
  .track-corner-table td:nth-child(3)::before { content: 'Model apex'; }
  .track-corner-table td:nth-child(4) { grid-column: 1 / -1; border-top: 1px solid #344957; }
  .track-corner-table td:nth-child(2)::before, .track-corner-table td:nth-child(3)::before { display: block; margin-bottom: 4px; font-size: 10px; color: #adbfce; white-space: normal; }
  .large-text .track-corner-table tbody > tr { grid-template-columns: minmax(0, 1fr) 90px; }
  .large-text .track-corner-table td:nth-child(2) { white-space: normal; }
  .large-text .track-corner-table td::before, .large-text .track-corner-table .track-corner-note { font-size: 13px; }
}
@media (max-width: 360px) and (max-height: 650px) {
  .title-screen { gap: 10px; padding-top: 14px; }
  .welcome-art { height: 100px; }
  .welcome-copy { padding-top: 14px; }
  .welcome-copy h1 { font-size: 28px; margin: 8px 0; }
  .welcome-copy > p { font-size: 12px; line-height: 1.5; }
  .welcome-actions { margin-top: 12px; gap: 6px; }
  .welcome-actions .btn { font-size: 11px; min-height: 44px; }
  .welcome-proof { margin-top: 10px; }
  .welcome-credit { font-size: 10px; }
  .track-reference { padding: 8px; }
  .track-reference-detail { display: none; }
}
@media (max-width: 374px) {
  .track-circuit-map { width: 76px; min-height: 0; flex: 0 0 76px; }
  .track-circuit-map canvas { width: 76px !important; height: 60px !important; }
  .track-circuit-card { padding: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .title-screen { justify-content: flex-start; gap: 12px; }
  .welcome-layout { display: grid; grid-template-columns: 1fr 1fr; }
  .welcome-copy { padding: 6px 0; }
  .welcome-copy h1 { font-size: 28px; }
  .welcome-art { height: 240px; }
  .track-reference { width: 190px; padding: 8px; }
  .track-reference-detail { display: none; }
}

/* The experiment reflows as a reading surface, with no controls over the road. */
@media (max-width: 600px) {
  .pitwall-title-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pitwall-title-row > div { width: 100%; }
  .pitwall-title-row h1 { line-height: 1.15; }
  .pitwall-title-row > .sector-tag { align-self: flex-start; }
}
@media (min-width: 601px) {
  .lab-reference-details[open] > summary { display: none; }
}
@media (max-width: 800px) {
  .lab-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lab-root > * { max-width: 660px; }
  .lab-stage { height: clamp(250px, 52vw, 370px); }
}
@media (max-width: 600px) {
  .corner-lab-entry { gap: 14px; padding: 16px; align-items: flex-start; }
  .corner-lab-entry h2 { font-size: 22px; }
  .corner-lab-entry-actions .btn { padding: 11px 13px; font-size: 13px; }
  .lab-root { padding: calc(var(--lab-hud-clearance, calc(64px + var(--sat))) + 14px) max(12px, var(--sar)) calc(22px + var(--sab)) max(12px, var(--sal)); }
  .lab-heading { margin-bottom: 16px; }
  .lab-heading h2 { font-size: 27px; }
  .lab-plan { padding: 16px; }
  .lab-review { padding: 16px; margin-top: 18px; }
  .lab-comparison th, .lab-comparison td { padding: 11px 7px; }
  .lab-comparison-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .lab-next-actions .btn { flex: 1 1 180px; white-space: normal; line-height: 1.4; }
  .track-correction-comparison { padding: 14px; }
  .track-correction-values { gap: 8px; }
  .track-correction-values > div { padding: 11px; }
  .lab-root[data-phase="plan"] .lab-stage { height: 190px; }
  .lab-root[data-phase="plan"] .lab-heading { margin-bottom: 12px; }
  .lab-root[data-phase="plan"] .lab-heading h2 { margin: 4px 0 7px; }
}
@media (max-width: 430px) {
  .corner-lab-entry { flex-direction: column; gap: 12px; }
  .corner-lab-entry-actions { width: 100%; }
  .corner-lab-entry-actions .btn { width: 100%; min-height: 45px; }
  .paddock-screen .home-pane > .card { padding: 13px; }
  .paddock-screen .home-pane > .card > .row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 7px; }
  .paddock-screen .home-pane > .card .chip { width: 38px; height: 38px; border-radius: 9px; font-size: 16px; }
  .paddock-screen .home-pane > .card > .row > :last-child { grid-column: 2; max-width: none; align-items: flex-start !important; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
  .paddock-screen .home-pane > .card > .row > :last-child:empty { display: none; }
  .paddock-screen .home-pane > .card .grow > b { font-size: 15px; }
  .paddock-screen .home-pane > .card .small { font-size: 12px; }
  .paddock-screen .home-pane .section-intro > .btnrow .btn { width: 100%; }
  .practice-launch { padding: 18px; }
  .practice-launch-actions { width: 100%; }
  .practice-launch-actions .btn { flex: 1 1 150px; }
  .lab-heading p { font-size: 13px; }
  .lab-stage { height: 245px; }
  .lab-plan, .lab-review { padding: 14px; }
  .lab-factors { gap: 5px; }
  .lab-factors button { padding: 10px 5px; font-size: 12px; }
  .lab-legend { padding: 10px 12px; font-size: 11px; gap: 6px 14px; }
  .lab-replay { padding: 0 11px 11px; gap: 7px; }
  .lab-metrics { grid-template-columns: 1fr; gap: 7px; }
  .lab-metrics > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; padding: 12px; }
  .lab-metrics b, .lab-metrics strong { font-size: 23px; margin: 0; grid-column: 2; grid-row: 1 / 3; }
  .lab-metrics span, .lab-metrics small { grid-column: 1; font-size: 12px; }
  .lab-comparison { font-size: 12px; }
  .lab-comparison th, .lab-comparison td { padding: 10px 6px; }
  .lab-adjust output { font-size: 12px; }
  .large-text .lab-adjust output { font-size: 14px; }
  .lab-factors, .large-text .lab-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 11px 0 12px; }
  .large-text .lab-factors button { min-height: 56px; text-align: center; padding: 8px 5px; font-size: 14px; }
  .lab-prediction { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lab-prediction [role="radio"], .lab-prediction button { min-width: 0; min-height: 75px; margin-top: 0; padding: 29px 5px 10px; text-align: center; }
  .lab-prediction [role="radio"]::before, .lab-prediction button::before { top: 10px; left: 50%; transform: translateX(-50%); }
  .large-text .lab-prediction button { min-height: 82px; font-size: 14px; }
  .large-text .lab-metrics > div { grid-template-columns: 1fr; }
  .large-text .lab-metrics b, .large-text .lab-metrics strong { grid-column: 1; grid-row: auto; }
  .large-text .track-correction-values { grid-template-columns: 1fr; }
  .large-text .paddock-screen .home-pane > .card .small { font-size: 14px; }
  .large-text .lab-heading p, .large-text .lab-legend, .large-text .lab-metrics span,
  .large-text .lab-metrics small, .large-text .lab-comparison { font-size: 14px; }
}
@media (max-width: 360px) {
  .lab-root[data-phase="plan"] .lab-stage { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-factors button:active, .lab-prediction button:active { transform: none; }
}
.reduce-motion .lab-factors button:active, .reduce-motion .lab-prediction button:active { transform: none; }

/* Daily recovery: a compact saved-answer recap and an in-flow retry action. */
.daily-resume-note { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid #729dac; border-radius: 0 6px 6px 0; background: #13212a; color: #c3d1dc; font-size: 13px; line-height: 1.55; }
.daily-saved-answers { min-width: 0; margin: 0 0 14px; border: 1px solid #3b4d5b; border-radius: 8px; background: #111b24; }
.daily-saved-answers > summary { min-height: 44px; padding: 12px 14px; color: #c5d4df; font-size: 13px; font-weight: 650; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
.daily-saved-answers[open] > summary { border-bottom: 1px solid #3b4d5b; }
.daily-saved-answers > ol { margin: 0; padding: 0; list-style: none; }
.daily-saved-answer { min-width: 0; padding: 13px 14px; border-left: 3px solid #637b8d; overflow-wrap: anywhere; }
.daily-saved-answer + .daily-saved-answer { border-top: 1px solid #2c3f4d; }
.daily-saved-answer.is-correct { border-left-color: #73c69b; }
.daily-saved-answer.is-missed { border-left-color: #e2a27a; }
.daily-saved-answer h3 { margin: 0 0 6px; color: #e3eaf0; font-size: 14px; line-height: 1.4; letter-spacing: 0; }
.daily-saved-answer p { max-width: 84ch; margin: 6px 0 0; font-size: 13px; line-height: 1.6; }
.daily-saved-choice { color: #d4dfe7; }
.daily-saved-feedback { color: #acc0cf; }
.daily-session-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.daily-session-actions .btn { min-width: 0; min-height: 44px; padding: 10px 13px; font-size: 12px; line-height: 1.4; white-space: normal; }
.daily-save-recovery, .daily-session-recovery { min-width: 0; margin: 14px 0; padding: 18px; border: 1px solid #695449; border-left: 3px solid #eaae85; border-radius: 8px; background: #251e1b; }
.daily-save-recovery h2, .daily-session-recovery h2 { margin: 0 0 9px; color: #f2e7dc; font-size: 21px; line-height: 1.25; letter-spacing: -.35px; }
.daily-save-recovery p, .daily-session-recovery p { max-width: 76ch; color: #d3c6bc; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.daily-save-recovery p + p, .daily-session-recovery p + p { margin-top: 8px; }
.daily-save-recovery .btnrow, .daily-session-recovery .btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.daily-save-recovery .btn, .daily-session-recovery .btn { min-width: 0; min-height: 44px; padding: 10px 14px; font-size: 13px; line-height: 1.4; white-space: normal; }
.daily-saved-answers > summary:focus-visible, .daily-session-actions .btn:focus-visible,
.daily-save-recovery .btn:focus-visible, .daily-session-recovery .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.large-text .daily-resume-note, .large-text .daily-saved-answers > summary,
.large-text .daily-saved-answer h3, .large-text .daily-saved-answer p,
.large-text .daily-save-recovery p, .large-text .daily-session-recovery p { font-size: 15px; line-height: 1.6; }
.large-text .daily-session-actions .btn, .large-text .daily-save-recovery .btn,
.large-text .daily-session-recovery .btn { font-size: 15px; }
@media (max-width: 430px) {
  .daily-saved-answer { padding: 12px; }
  .daily-save-recovery, .daily-session-recovery { padding: 14px; }
  .daily-save-recovery .btn, .daily-session-recovery .btn { flex: 1 1 110px; }
}

/* Handbook lookup keeps authored recaps readable and navigation predictable. */
.handbook-reference-search { margin: 12px 0 4px; }
.handbook-reference-search > label { display: block; margin-bottom: 7px; font-weight: 800; }
.handbook-reference-search-row { display: flex; align-items: stretch; gap: 8px; }
.handbook-reference-search-row input {
  flex: 1; min-width: 0; min-height: 48px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--text); font: inherit;
}
.handbook-reference-search-row input::placeholder { color: var(--muted); opacity: 1; }
.handbook-reference-search-row .btn { flex-shrink: 0; min-height: 48px; }
.handbook-reference-status { margin: 8px 0 12px; }
.handbook-reference-terms { margin: 16px 0 24px; }
.handbook-reference-terms > h2 { margin: 0; font-size: 20px; }
.handbook-reference-term-count { margin: 6px 0 12px; }
.handbook-reference-term-list { display: grid; gap: 12px; }
.handbook-reference-term { margin: 0; min-width: 0; }
.handbook-reference-term h3 { margin: 6px 0 10px; font-size: 20px; line-height: 1.3; scroll-margin-top: 16px; }
.handbook-reference-definition, .handbook-reference-application p { margin: 0; line-height: 1.6; }
.handbook-reference-application { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--accent); }
.handbook-reference-application > b { display: block; margin-bottom: 5px; }
.handbook-reference-prerequisite { margin: 14px 0 0; line-height: 1.5; }
.handbook-reference-term-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.handbook-reference-term-actions .btn { min-height: 44px; max-width: 100%; white-space: normal; text-align: left; }
.handbook-reference-more { min-height: 48px; margin-top: 12px; }
.handbook-reference-index { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.handbook-reference-index .btn { min-width: 0; min-height: 44px; max-width: 100%; padding: 9px 12px; text-align: left; white-space: normal; }
.handbook-reference-topic { margin-top: 12px; }
.handbook-reference-topic h2 { margin: 5px 0 12px; scroll-margin-top: 16px; font-size: 20px; line-height: 1.3; }
.handbook-reference-recaps { margin: 0; padding-left: 21px; }
.handbook-reference-recaps li { margin: 9px 0; padding-left: 3px; line-height: 1.6; color: var(--text); }
.handbook-reference-recaps li::marker { color: var(--accent); }
.handbook-reference-empty { margin-top: 12px; }
.handbook-reference [hidden] { display: none !important; }
.large-text .handbook-reference-search-row input,
.large-text .handbook-reference-index .btn,
.large-text .handbook-reference-recaps li,
.large-text .handbook-reference-definition,
.large-text .handbook-reference-application,
.large-text .handbook-reference-term-actions .btn,
.large-text .handbook-reference-prerequisite,
.large-text .handbook-reference-more { font-size: 17px; }
.large-text .handbook-reference-status { font-size: 15px; }
@media (max-width: 380px) {
  .handbook-reference-index { gap: 6px; }
  .handbook-reference-index .btn { flex: 1 1 100%; }
  .handbook-reference-topic { padding: 16px; }
  .handbook-reference-term { padding: 16px; }
  .handbook-reference-term-actions .btn { flex: 1 1 100%; }
}