/* ─────────────────────────────────────────────────────────
   MtnPro Turn Viewer — dark theme
   ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Dark theme (default) */
  --bg0:    #07090f;
  --bg1:    #0d1420;
  --bg2:    #111827;
  --bg3:    #1f2937;
  --border: #1a2332;
  --text0:  #ffffff;
  --text1:  #f1f5f9;
  --text2:  #cbd5e1;
  --text3:  #a8b5c7;
  --text4:  #8190a5;
  --accent: #2563eb;
  --heel:   #60a5fa;
  --toe:    #f97316;
}

:root[data-theme="light"] {
  /* Light theme — readable in daylight on snow */
  --bg0:    #f7f8fa;
  --bg1:    #ffffff;
  --bg2:    #eef1f5;
  --bg3:    #d9dde3;
  --border: #cbd2db;
  --text0:  #0b1220;
  --text1:  #172033;
  --text2:  #334155;
  --text3:  #475569;
  --text4:  #64748b;
  --accent: #1d4ed8;
  --heel:   #2563eb;
  --toe:    #c2410c;
}

html, body { min-height: 100%; }

body {
  background: var(--bg0);
  color: var(--text1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', ui-monospace, monospace;
  font-size: 13px;
}

/* Header, replay and analysis stack naturally; no reserved row for retired tabs. */
#root {
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  min-height: 100vh;
}

/* Legacy panels — hidden by default but kept in DOM for legacy code paths */
.legacy-hidden { display: none !important; }

/* ─── Version chip ─── */
#viewer-version {
  display: inline-block;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text0);
  background: var(--accent);
  padding: 3px 8px;
  margin-left: 8px;
  border-radius: 10px;
  vertical-align: middle;
  cursor: help;
}

/* ─── Sensor toggles ─── */
#sensor-toggles {
  display: inline-flex;
  gap: 4px;
  margin-left: 12px;
  vertical-align: middle;
  align-items: center;
}
#sensor-toggles::before {
  content: 'SENSORS';
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text3);
  margin-right: 4px;
}
.sensor-pill {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text3);
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.sensor-pill:hover {
  border-color: var(--accent);
}
.sensor-pill.on {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.sensor-pill.off {
  background: var(--bg3);
  color: var(--text3);
  text-decoration: line-through;
}

/* ─── Tab bar ─── */
#tabbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding: 0 14px;
  gap: 2px;
}
#tabbar .tab {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font: inherit;
  font-size: 12px;
  padding: 0 16px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
#tabbar .tab:hover { color: var(--text0); }
#tabbar .tab.active {
  color: var(--text0);
  border-bottom-color: var(--accent);
}

/* ─── Tab views ─── */
.view {
  display: none;
  overflow: visible;
}
.view.active { display: block; }
#view-replay.active {
  display: grid;
  /* 3D/video takes the space that is left, the transport takes what it needs,
     and the gauge deck takes what IT needs. The old `1fr 290px` locked the
     bottom row, so the instrument cluster was cut off mid-tile. */
  grid-template-rows: 1fr auto auto;
  /* min-height, not height: one viewport-ish section as before, but content
     taller than the viewport now scrolls instead of being clipped away. */
  min-height: calc(100vh - 78px);   /* viewport minus header (42px) and tabbar (36px) */
  overflow: visible;
}

/* ─── Theme toggle in header ─── */
#theme-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text1);
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms;
}
#theme-toggle:hover { background: var(--bg3); }

/* ─── REPORT VIEW ──────────────────────────────────────── */
#view-report {
  background: var(--bg0);
  padding: 24px 24px 60px;
}
.report-shell {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Hero (composite ring) */
.report-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  align-items: center;
}
.hero-ring { position: relative; width: 200px; height: 200px; }
.hero-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-ring .ring-bg { stroke: var(--bg3); stroke-width: 14; fill: none; }
.hero-ring .ring-fg { stroke-width: 14; fill: none; stroke-linecap: round;
  transition: stroke-dasharray 600ms ease-out, stroke 200ms; }
.hero-ring .ring-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.hero-ring .ring-num   { font-size: 56px; font-weight: 700; color: var(--text0); line-height: 1; }
.hero-ring .ring-label { font-size: 11px; color: var(--text2); margin-top: 4px; letter-spacing: 0.08em; }
.hero-side {
  display: flex; flex-direction: column; gap: 12px;
}
.hero-tier {
  display: inline-flex; gap: 8px; align-items: baseline;
  font-size: 18px; font-weight: 600; color: var(--text0);
}
.hero-tier .scope-chip {
  font-size: 11px; color: var(--text2); font-weight: 400;
  background: var(--bg3); padding: 3px 8px; border-radius: 12px;
}
.hero-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat .num   { font-size: 16px; color: var(--text0); font-weight: 600; }
.hero-stat .label { font-size: 10px; color: var(--text2); letter-spacing: 0.05em; }
.hero-drill {
  background: var(--bg2);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text1);
}

/* Framework cards (2×2) */
.framework-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.framework-card {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.framework-card.locked { opacity: 0.5; }
.fc-header {
  display: flex; justify-content: space-between; align-items: baseline;
}
.fc-title { font-size: 14px; font-weight: 600; color: var(--text0); letter-spacing: 0.04em; }
.fc-tagline { font-size: 11px; color: var(--text2); margin-top: 2px; }
.fc-score { font-size: 28px; font-weight: 700; line-height: 1; }
.fc-score-sub { font-size: 11px; color: var(--text2); margin-left: 6px; }
.fc-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fc-bar {
  display: grid; grid-template-columns: 70px 1fr 30px;
  align-items: center; gap: 6px; font-size: 11px; color: var(--text2);
}
.fc-bar .bar-track {
  height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden;
}
.fc-bar .bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 400ms;
}
.fc-bar .bar-num { text-align: right; color: var(--text1); font-variant-numeric: tabular-nums; }
.fc-pills { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fc-pill {
  display: grid; grid-template-columns: 14px 1fr 50px; align-items: center;
  gap: 8px; font-size: 12px;
}
.fc-pill .pill-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text4);
}
.fc-pill.pass .pill-dot { background: #22c55e; }
.fc-pill.fail .pill-dot { background: #ef4444; }
.fc-pill .pill-name { color: var(--text1); }
.fc-pill .pill-score { color: var(--text2); text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; }
.fc-locked-msg {
  background: var(--bg3);
  padding: 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text2);
  text-align: center;
}
.fc-expander {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.fc-expander:hover { color: var(--text0); }
.fc-formula {
  font-size: 11px;
  color: var(--text2);
  background: var(--bg2);
  padding: 10px;
  border-radius: 6px;
  margin-top: 6px;
  font-family: ui-monospace, monospace;
  white-space: pre-wrap;
  display: none;
}
.fc-formula.open { display: block; }
.fc-formula .fm-row {
  display: grid; grid-template-columns: 1fr 60px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 10.5px;
}
.fc-formula .fm-row:last-child { border-bottom: 0; }
.fc-formula .fm-num { text-align: right; color: var(--text1); font-variant-numeric: tabular-nums; }
.fc-formula .fm-section {
  font-weight: 600; color: var(--text0);
  font-size: 11px; margin-top: 8px; padding-bottom: 2px;
}
.fc-formula .fm-section:first-child { margin-top: 0; }

/* Drilldown table */
.drilldown {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  overflow-x: auto;
}
.drilldown-title {
  font-size: 13px; font-weight: 600; color: var(--text0);
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.drilldown-title .sort-hint { font-size: 10px; color: var(--text3); font-weight: 400; }
.drilldown table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.drilldown th {
  text-align: left; color: var(--text2); padding: 6px 8px;
  border-bottom: 1px solid var(--border); font-weight: 500;
  letter-spacing: 0.04em; font-size: 10px;
}
.drilldown td {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  color: var(--text1); font-variant-numeric: tabular-nums;
}
.drilldown tr:last-child td { border-bottom: 0; }
.drilldown tr:hover td { background: var(--bg2); cursor: pointer; }
.drilldown .heel-glyph { color: var(--heel); font-weight: 600; }
.drilldown .toe-glyph  { color: var(--toe); font-weight: 600; }
.drilldown .play-icon { color: var(--accent); cursor: pointer; }

/* Sessions / Turns view stubs */
#view-sessions, #view-turns {
  background: var(--bg0);
  padding: 24px;
  color: var(--text2);
}
.empty-view {
  max-width: 720px; margin: 0 auto;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}

/* Automatic recording-health report. The same per-second rules power the
   replay strip; this view ranks yesterday's eligible sessions and expands to
   every run so no recording is hidden behind a single average. */
.health-summary-card {
  max-width: 980px;
  margin: 0 auto;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  color: var(--text1);
}
.health-summary-heading,
.health-summary-heading > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.health-summary-heading { justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.health-summary-heading strong { color: var(--text0); letter-spacing: .08em; font-size: 12px; }
.health-summary-heading span { color: var(--text3); font-size: 11px; }
.health-summary-rule { white-space: nowrap; }
.health-best {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 12px; padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, .55); border-radius: 8px;
  background: rgba(34, 197, 94, .10); color: var(--text1);
}
.health-best strong { color: var(--text0); }
.health-best-kicker { color: #86efac; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.health-best-alternate, .health-best-run { color: var(--text2); font-size: 11px; }
.health-summary-list { display: grid; gap: 6px; }
.health-session { border: 1px solid var(--border); border-radius: 7px; background: var(--bg0); }
.health-session summary {
  display: grid; grid-template-columns: 10px minmax(160px, 1fr) auto 68px;
  align-items: center; gap: 8px; padding: 9px 10px;
  cursor: pointer; list-style: none; color: var(--text1);
}
.health-session summary::-webkit-details-marker { display: none; }
.health-session summary:hover { background: var(--bg2); }
.health-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.health-status-dot.green { background: #22c55e; }
.health-status-dot.yellow { background: #facc15; }
.health-status-dot.red { background: #ef4444; }
.health-session-name { font-variant-numeric: tabular-nums; }
.health-session-distance, .health-run-counts { color: var(--text3); font-size: 11px; font-variant-numeric: tabular-nums; }
.health-score { text-align: right; font-variant-numeric: tabular-nums; }
.health-score.green { color: #86efac; }
.health-score.yellow { color: #fde68a; }
.health-score.red { color: #fca5a5; }
.health-score.unavailable { color: var(--text3); }
.health-session-detail { padding: 0 10px 9px 28px; color: var(--text2); font-size: 11px; }
.health-run-row {
  display: grid; grid-template-columns: 120px minmax(180px, 1fr) 68px;
  align-items: center; gap: 8px; padding: 5px 0;
  border-top: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.health-summary-note, .health-excluded { margin-top: 11px; color: var(--text3); font-size: 10px; line-height: 1.4; }
.health-excluded { color: #fcd34d; }
.health-summary-loading, .health-summary-error, .health-summary-empty { color: var(--text2); padding: 24px 0; text-align: center; }
@media (max-width: 720px) {
  .health-session summary { grid-template-columns: 10px minmax(0, 1fr) 60px; }
  .health-session-distance { grid-column: 2; }
  .health-run-row { grid-template-columns: 100px minmax(0, 1fr) 60px; }
}

/* ─── Coaching panel — heel-toe symmetry + diagnoses + drills ─── */
#coaching-panel {
  background: linear-gradient(180deg, #0d1420 0%, #07090f 100%);
  border-bottom: 1px solid var(--border);
  padding: 6px 14px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}
#coaching-panel:empty {
  display: none;
}
.coach-card {
  flex: 0 0 auto;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.10);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 200px;
}
.coach-card.diag {
  border-left: 3px solid #facc15;
}
.coach-card.diag.high { border-left-color: #ef4444; }
.coach-card.diag.med  { border-left-color: #f97316; }
.coach-card.diag.low  { border-left-color: #facc15; }
.coach-card.sym {
  border-left: 3px solid #60a5fa;
}
.coach-card .ch-name {
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: 0.04em; line-height: 1.2;
}
.coach-card .ch-evidence {
  font-size: 9.5px; color: #9ca3af; line-height: 1.35;
  margin: 3px 0;
  font-variant-numeric: tabular-nums;
}
.coach-card .ch-drill {
  font-size: 10px; color: #fde68a; font-weight: 700; margin-top: 2px;
}
.coach-card .ch-drill::before { content: '▶ '; color: #facc15; }
.coach-card .ch-source {
  font-size: 8.5px; color: #6b7280; margin-top: 1px;
}
.coach-card .ch-sev {
  font-size: 9px; color: #6b7280; margin-bottom: 2px; letter-spacing: 0.08em;
}

/* ─── Run-cards strip (slopes-style report) ─── */
#run-cards-strip {
  background: linear-gradient(180deg, #0b1220 0%, var(--bg0) 100%);
  border-bottom: 1px solid var(--border);
  padding: 6px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
}
#run-cards-strip:empty {
  display: none;
}
#run-cards-strip .run-cards-section {
  margin-bottom: 0;
  width: 100%;
}

/* ─── Run-level stat strip ─── */
#stat-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 14px;
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}
.stat-trophy {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
}
.stat-big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.stat-big .num {
  font-size: 22px;
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.stat-big .unit {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1px;
}
.stat-medium {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
}
.stat-medium .stat-label {
  color: var(--text3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9px;
  margin-right: 4px;
}
.stat-medium .stat-val {
  color: var(--text1);
  font-weight: 600;
  margin-right: 8px;
}

/* ─── Header ─── */
#header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  flex-shrink: 0;
}

#brand {
  font-size: 13px;
  font-weight: 700;
  color: var(--text0);
  white-space: nowrap;
  flex-shrink: 0;
}

#picker-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.picker-label {
  font-size: 10px;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#session-picker, #section-filter, #scope-filter {
  background: var(--bg3);
  border: 1px solid #374151;
  color: var(--text0);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  cursor: pointer;
  max-width: 280px;
}

#session-delete {
  background: transparent;
  border: 1px solid #7f1d1d;
  color: #fca5a5;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
#session-delete:hover:not(:disabled) {
  background: rgba(127, 29, 29, 0.35);
  border-color: #ef4444;
  color: #fecaca;
}
#session-delete:disabled {
  opacity: 0.4;
  cursor: default;
}

#run-picker {
  display: flex;
  gap: 4px;
}

.run-btn {
  background: var(--bg3);
  border: 1px solid #374151;
  color: var(--text2);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.run-btn:hover  { background: #374151; color: var(--text0); }
.run-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

#session-meta {
  font-size: 11px;
  color: var(--text3);
  margin-left: auto;
  white-space: nowrap;
}

/* ─── Main ─── */
#main { display: flex; overflow: hidden; min-height: 0; }

/* ─── Sidebar ─── */
#sidebar {
  width: 268px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease, opacity 0.2s ease;
}
#sidebar.collapsed {
  width: 0;
  min-width: 0;
  flex: 0 0 0;
  opacity: 0;
  border-right: none;
  pointer-events: none;
}
#sidebar-toggle {
  position: absolute;
  top: 56px;
  left: 8px;
  z-index: 60;
  background: rgba(7, 12, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 6px;
  padding: 4px 8px;
  color: #cbd5e1;
  font-family: -apple-system, ui-monospace, monospace;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(6px);
}
#sidebar-toggle:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

#sidebar-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

#turn-list { overflow-y: auto; flex: 1; }
#turn-list::-webkit-scrollbar      { width: 4px; }
#turn-list::-webkit-scrollbar-track { background: var(--bg2); }
#turn-list::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

/* ─── Turn items ─── */
.turn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.turn-item:hover    { background: var(--bg3); }
.turn-item.selected { background: rgba(37,99,235,0.12); border-left-color: var(--accent); }

.turn-num  { font-size: 11px; color: var(--text4); width: 24px; flex-shrink: 0; text-align: right; }
.turn-body { flex: 1; min-width: 0; }
.turn-row1, .turn-row2 { display: flex; align-items: center; gap: 6px; }
.turn-row1 { margin-bottom: 2px; }

.turn-time { font-size: 11px; color: var(--text3); font-family: ui-monospace,monospace; }
.turn-side {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.turn-side.heel { background: rgba(37,99,235,0.2); color: var(--heel); }
.turn-side.toe  { background: rgba(249,115,22,0.2); color: var(--toe); }
.turn-dur  { font-size: 11px; color: var(--text3); margin-left: auto; }
.turn-g    { font-size: 12px; font-weight: 700; font-family: ui-monospace,monospace; }
.turn-edge { font-size: 11px; color: var(--text2); }
.turn-clock { font-size: 11px; color: var(--text4); margin-left: auto; font-family: ui-monospace,monospace; }

/* Per-turn 5-truth mini-radar bars in the sidebar */
.turn-radar {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}
.radar-bar {
  width: 4px;
  display: inline-block;
  border-radius: 1px;
  opacity: 0.85;
}

/* ─── Canvas wrapper ─── */
/* Row of [video | 3D]. With no video the 3D half is the only child and
   takes the full width, identical to the pre-split layout. */
#canvas-wrapper { flex: 1; position: relative; overflow: hidden; background: var(--bg0);
                  display: flex; align-items: stretch; }
#stage-3d       { position: relative; flex: 1 1 50%; min-width: 0; height: 100%; }
#canvas         { width: 100%; height: 100%; display: block; }

/* ─── Clock overlay ─── */
#clock-overlay {
  position: absolute;
  top: 12px; right: 292px;
  z-index: 51;
  background: rgba(7,9,15,0.9);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 6px 4px;
  backdrop-filter: blur(6px);
  user-select: none;
}
#clock-overlay.collapsed { display: none !important; }
#clock-mode-toggle {
  display: grid;
  grid-template-columns: 0.75fr 1.3fr 0.9fr 0.9fr;
  gap: 3px;
  margin-bottom: 4px;
}
#clock-mode-toggle button {
  min-height: 22px;
  padding: 2px 5px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.58);
  color: #94a3b8;
  cursor: pointer;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#clock-mode-toggle button.active {
  border-color: rgba(34, 211, 238, 0.68);
  color: #e0f2fe;
  background: rgba(8, 145, 178, 0.24);
}
#turn-marker-panel.collapsed #tm-content { display: none; }
#turn-marker-panel .tm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -2px 0 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  pointer-events: auto;
}
#turn-marker-panel #tm-toggle {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 16px;
  min-width: 22px;
  padding: 0 4px;
  pointer-events: auto;
}
#turn-marker-panel #tm-toggle:hover { background: rgba(255,255,255,0.18); }
#clock-canvas { width: 136px; height: 204px; display: block; cursor: crosshair; }
#clock-canvas[hidden], #turn-map-canvas[hidden] { display: none; }
#turn-map-canvas { width: 136px; height: 204px; display: block; }
#clock-label { text-align: center; font-size: 8px; color: #cbd5e1;
               margin-top: 2px; letter-spacing: 0.05em; text-transform: uppercase; }
#bend-clock { width: 96px; height: 96px; display: block; margin-top: 6px; }
#bend-clock-label { text-align: center; font-size: 8px; color: #cbd5e1;
                    margin-top: 3px; letter-spacing: 0.07em; text-transform: uppercase; }

@media (max-width: 1100px) {
  #clock-overlay { top: auto; right: 8px; bottom: 12px; }
}


/* ─── Model toggle ─── */
#model-toggle {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 50;
  display: flex;
  gap: 4px;
  background: rgba(7,9,15,0.88);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  backdrop-filter: blur(4px);
}

.mtog {
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.mtog:hover { background: var(--bg3); color: var(--text0); }
.mtog.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mtog:disabled { opacity: 0.42; cursor: default; }

#board-attitude-status,
#torso-board-status {
  align-self: center;
  border-left: 1px solid var(--border);
  margin-left: 2px;
  padding: 2px 7px 2px 9px;
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
#board-attitude-status[data-state="measured"] { color: #4ade80; }
#board-attitude-status[data-state="held"] { color: #fbbf24; }
#board-attitude-status[data-state="relative"] { color: #fbbf24; }
#board-attitude-status[data-state="unavailable"] { color: #fbbf24; }
#torso-board-status[data-state="relative"] { color: #4ade80; }
#torso-board-status[data-state="unavailable"] { color: #fbbf24; }

/* ─── Stance toggle ─── */
#stance-toggle {
  position: absolute;
  top: 50px; left: 12px;
  display: flex;
  gap: 4px;
  background: rgba(7,9,15,0.88);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  backdrop-filter: blur(4px);
}

.stog {
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.stog:hover  { background: var(--bg3); color: var(--text0); }
.stog.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Pose toggle (edge / pitch) ─── */
#pose-toggle {
  position: absolute;
  top: 88px; left: 12px;
  display: flex;
  gap: 4px;
  background: rgba(7,9,15,0.88);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  backdrop-filter: blur(4px);
}

.ptog {
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.ptog:hover  { background: var(--bg3); color: var(--text0); }
.ptog.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Vantage point toggle ─── */
#vantage-toggle {
  position: absolute;
  bottom: 12px; left: 12px;
  display: flex;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  gap: 4px;
  background: rgba(7,9,15,0.88);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  backdrop-filter: blur(4px);
}

#stage-3d canvas { cursor: grab; }
#stage-3d canvas:active { cursor: grabbing; }

#camera-help {
  position: absolute;
  bottom: 50px;
  left: 12px;
  color: rgba(226, 232, 240, 0.72);
  background: rgba(7, 9, 15, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  padding: 3px 6px;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
}

.vtog {
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.vtog:hover  { background: var(--bg3); color: var(--text0); }
.vtog.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Turn badge ─── */
#turn-badge {
  position: absolute;
  top: 126px; left: 12px;
  background: rgba(7,9,15,0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #e2e8f0;
  backdrop-filter: blur(4px);
  line-height: 1.6;
}

/* ─── Loading overlay ─── */
#loading-overlay {
  position: fixed; inset: 64px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,9,15,0.75);
  transition: opacity 0.4s;
  z-index: 30000;
}
#loading-overlay.hidden { opacity: 0; pointer-events: none; }
#loading-overlay.hidden .loading-card { visibility: hidden; }
.loading-card { display: flex; flex-direction: column; gap: 16px; width: min(390px, 85vw); padding: 28px;
  border: 1px solid #58717a; border-radius: 16px; background: #12212b; color: #e8f3f8; box-shadow: 0 16px 60px #0008; }
#loading-msg { color: #f1f7fb; font-size: 18px; }
#loading-detail { color: #c1d3df; font: 13px/1.5 system-ui; }
#loading-progress, #video-loading progress { width: 100%; height: 10px; accent-color: #65dec7; }
#loading-overlay[data-state="error"] progress { display: none; }
#loading-retry, #video-loading button { padding: 9px 16px; border-radius: 7px; border: 1px solid #65dec7; background: #193d40; color: white; cursor: pointer; }
#loading-retry[hidden], #video-loading[hidden], #video-loading button[hidden] { display: none; }
#video-loading { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 10px; width: min(280px, 70%); padding: 14px 18px;
  background: #12212bef; color: #effaff; border: 1px solid #58717a; border-radius: 10px; font: 13px/1.4 system-ui; }
#demo-clip-label { display: flex; align-items: center; gap: 8px; color: inherit; font-size: 13px; }
#demo-clip-picker { max-width: 180px; background: #183039; color: #effaff; border: 1px solid #68848c; border-radius: 6px; padding: 5px; }

/* ─── Scrubber bar (now a tall panel: scrubber row + big gauges row) ─── */
#scrubber-bar {
  background: linear-gradient(180deg, var(--bg1) 0%, #060a14 100%);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 10px;
  /* Sizes to the transport rows. It used to be a hard 290px that also had to
     swallow the phase strip, the gauge strip and the section navigator. */
  height: auto;
  flex-shrink: 0;
  min-width: 0;
  overflow: visible;
}

/* Three explicit clocks: sensor-only, video-only, and synchronized. */
#playback-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
#scrubber-bar > #transport,
#scrubber-bar > #scrubber-wrap {
  flex: 0 0 auto;
}
#scrubber-bar #transport,
#scrubber-bar #scrubber-wrap {
  align-self: stretch;
}
.scrubber-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#scrubber-bar .playbar-row {
  display: grid;
  grid-template-columns: 78px 106px 210px minmax(140px, 1fr) 132px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.playbar-label {
  color: #dbeafe;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.10em;
}
.playbar-meta,
.playbar-time {
  color: #cbd5e1;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playbar-time {
  color: #f1f5f9;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.single-transport {
  width: 106px;
  display: flex;
  align-items: center;
}
.single-transport button {
  background: var(--bg3);
  border: 1px solid #374151;
  color: #e2e8f0;
  border-radius: 5px;
  width: 32px;
  height: 28px;
  cursor: pointer;
}
.single-transport button:hover:not(:disabled) { background: #374151; color: var(--text0); }
.single-transport button:disabled { opacity: 0.35; cursor: default; }
.single-transport button.active { color: #7fd4ff; border-color: #2b6f8f; }
.playbar-track { min-width: 0; }
.playbar-track input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #8795a7;
  cursor: grab;
}
.playbar-track input[type="range"]:active { cursor: grabbing; }
.playbar-track input[type="range"]:disabled { opacity: 0.35; cursor: default; }
.linked-playbar {
  background: rgba(27, 118, 163, 0.10);
  border: 1px solid rgba(77, 182, 232, 0.20);
  border-radius: 6px;
  padding: 2px 6px;
  margin: 0 -6px;
}
.linked-playbar .playbar-label,
.linked-playbar .playbar-time { color: #7fd4ff; }
.linked-playbar .playbar-track input[type="range"] { accent-color: #38bdf8; }

#transport { display: flex; gap: 5px; flex-shrink: 0; }
#transport button {
  background: var(--bg3);
  border: 1px solid #374151;
  color: #e2e8f0;
  border-radius: 5px;
  width: 32px; height: 28px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.1s, color 0.1s;
  display: flex; align-items: center; justify-content: center;
}
#transport button:hover  { background: #374151; color: var(--text0); }
#transport button:active { background: #4b5563; }

#scrubber-wrap { flex: 1; }
#scrubber      { width: 100%; accent-color: var(--accent); cursor: pointer; }

/* Per-second recording-integrity strip aligned to the sensor scrubber. */
#sensor-health {
  margin-top: 2px;
  user-select: none;
}
.sensor-health-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-height: 12px;
  color: var(--text4);
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
}
.sensor-health-label {
  color: var(--text3);
  font-weight: 700;
  letter-spacing: 0.10em;
}
#sensor-health-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #cbd5e1;
}
#sensor-health-track {
  display: flex;
  width: 100%;
  height: 9px;
  gap: 1px;
  margin-top: 2px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.sensor-health-cell {
  flex: 1 1 0;
  min-width: 1px;
  height: 100%;
  border: 0;
  padding: 0;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 0.1s, box-shadow 0.1s;
}
.sensor-health-cell.green { background: #22c55e; }
.sensor-health-cell.yellow { background: #facc15; }
.sensor-health-cell.red { background: #ef4444; }
.sensor-health-cell:hover,
.sensor-health-cell:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 1px #fff; z-index: 1; }
.sensor-health-cell.current { opacity: 1; box-shadow: inset 0 -2px 0 #fff; }
.sensor-health-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: #cbd5e1;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sensor-health-legend span { display: inline-flex; align-items: center; gap: 3px; }
.health-swatch {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.health-swatch.green { background: #22c55e; }
.health-swatch.yellow { background: #facc15; }
.health-swatch.red { background: #ef4444; }

#speed-control {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  background: #152238;
  border: 1px solid #52637a;
  border-radius: 4px;
  padding: 3px 8px;
  box-sizing: border-box;
}
.speed-label {
  color: #dbeafe;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#speed-slider {
  flex: 1 1 auto;
  width: 64px;
  min-width: 50px;
  accent-color: var(--accent);
  cursor: pointer;
}
.speed-range {
  color: #cbd5e1;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
#speed-readout {
  color: #ffffff;
  background: rgba(37, 99, 235, 0.42);
  border: 1px solid rgba(147, 197, 253, 0.65);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  text-align: right;
}

@media (max-width: 900px) {
  #scrubber-bar .playbar-row {
    grid-template-columns: 68px 106px 110px minmax(110px, 1fr) 104px;
  }
  .playbar-meta { display: none; }
  .speed-label, .speed-range { display: none; }
  #speed-control { padding: 3px 4px; gap: 4px; }
  #speed-slider { width: 52px; min-width: 44px; }
}

/* Bottom row: big gauges */
#stats-bar {
  display: flex;
  gap: 10px;
  /* Size to the tallest tile instead of a hard 140px. TWIST and BOARD BEND
     carry two-line readouts and need ~160px, so the fixed height was cutting
     the bottom off them (and the state badge made that worse). */
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
  /* The strip is wider than any window — ~580px of gauges sat past the right
     edge with overflow:hidden, so they could not be reached at all. Now it
     scrolls sideways. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}
#stats-bar::-webkit-scrollbar { height: 6px; }
#stats-bar::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.28);
  border-radius: 3px;
}
#stats-bar::-webkit-scrollbar-track { background: transparent; }

/* ── The instrument cluster's own row ────────────────────────────────
   Its height is whatever the tallest gauge needs. Nothing above it may
   clip it: that was the bug where the bottom of every tile disappeared. */
#gauge-deck {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  padding: 0 14px 10px;
  background: linear-gradient(180deg, #060a14 0%, var(--bg1) 100%);
  border-top: 1px solid var(--border);
}

/* ── Causal layer separators in the gauge strip ─────────────────────
   The brief's three layers are not equally trustworthy, so the strip is
   ordered by them: board-snow interaction is the strongest sensor-driven
   layer and leads as the visual core, outcome follows, rider movement is
   the most restricted. The separator is a vertical caption so it costs
   almost no horizontal room in a strip that already scrolls. */
.lg-layer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border-left: 1px solid rgba(96, 165, 250, 0.14);
}
.lg-layer:first-child { border-left: 0; }
.lg-layer span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(156, 163, 175, 0.65);
  white-space: nowrap;
}

/* ── Linear phase strip ─────────────────────────────────────────────
   Replaces the circular turn clock as the phase anchor. A rider reading a
   ring has to convert an abstract angle back into board movement; a straight
   strip reads as the turn itself, left to right. The active word moves with
   the one shared time cursor. */
#phase-strip {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 0 0 4px;
  padding: 4px 10px 6px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(96, 165, 250, 0.10);
  border-radius: 8px;
}
#phase-strip .ph {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(156, 163, 175, 0.45);
  transition: color 120ms linear;
}
#phase-strip .ph.on { color: #e5e7eb; }
#phase-strip.idle .ph { color: rgba(156, 163, 175, 0.25); }
#phase-cursor {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 2px;
  background: #60a5fa;
  border-radius: 1px;
  opacity: 0;
  transition: opacity 120ms linear;
}

/* Live telemetry gauges (replace old big-gauges) */
.live-gauge {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.10);
  border-radius: 10px;
  padding: 4px 8px 2px;
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.live-gauge .lg-label {
  font-size: 11px; color: #9ca3af;
  letter-spacing: 0.14em; margin-bottom: 2px;
  font-weight: 700;
}
.live-gauge canvas { display: block; max-height: 84px; }
.live-gauge[data-gauge="edge"] canvas {
  /* 60px body lane above the unchanged 120px edge face, at the same 0.7x
     display scale the original canvas used. */
  max-height: 126px;
}
.live-gauge .lg-readout {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: -2px;
  line-height: 1.1;
}
.live-gauge .lg-unit { color: #9ca3af; font-size: 12px; font-weight: 500; margin-left: 4px; letter-spacing: 0.04em; }

/* Selected snowboard rider base rig. This is deliberately labelled DESIGN:
   it defines the joint and board language before any sensor channel drives it. */
.rider-frame-gauge {
  width: 320px;
  min-height: 240px;
  padding: 7px 9px 8px;
  gap: 2px;
  background: #0f1522;
  border-color: rgba(54, 224, 200, 0.18);
}
.rider-frame-heading {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rider-frame-heading .lg-label { margin-bottom: 0; }
.rider-frame-heading span {
  color: #536176;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.rider-frame-image {
  display: block;
  width: 300px;
  height: 280px;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  background: #0f1522;
}
.rider-frame-readout {
  color: #f8fafc;
  font: 800 13px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-align: center;
}

/* ── Board-only 3D gauges ─────────────────────────────────────────
   Four isolated viewports plus one combined square share the replay cursor.
   None adds terrain, rider, or sensor tubes. */
.live-gauge.board3d-gauge {
  width: 320px;
  min-height: 300px;
  padding: 7px 10px 9px;
}
.live-gauge.heart-rate-gauge {
  width: 178px;
  min-height: 142px;
  padding: 8px 12px 10px;
}
.heart-rate-reading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 86px;
  color: #fda4af;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.heart-rate-icon {
  order: 3;
  margin-top: 9px;
  color: #ef4444;
  font-size: 34px;
  line-height: 0.9;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.38);
  animation: heart-rate-beat 1s ease-in-out infinite;
}
@keyframes heart-rate-beat {
  0%, 62%, 100% { transform: scale(1); }
  12% { transform: scale(1.16); }
  24% { transform: scale(1); }
  36% { transform: scale(1.10); }
}
.heart-rate-reading strong {
  order: 1;
  color: #f8fafc;
  font-size: 46px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.heart-rate-reading small {
  order: 2;
  color: #fda4af;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.heart-rate-meter {
  position: relative;
  height: 5px;
  margin: 4px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(244, 114, 182, 0.16);
}
.heart-rate-meter i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb7185, #f43f5e);
  transition: width 120ms linear;
}
.heart-rate-detail {
  color: rgba(251, 113, 133, 0.86);
  font: 700 8px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.07em;
  text-align: center;
}
.heart-rate-gauge[data-state="unavailable"] .heart-rate-reading,
.heart-rate-gauge[data-state="unavailable"] .heart-rate-detail {
  color: rgba(148, 163, 184, 0.58);
}
.heart-rate-gauge[data-state="unavailable"] .heart-rate-reading strong {
  color: rgba(226, 232, 240, 0.62);
}
.board3d-stage {
  --board3d-level: 0;
  --board3d-position: 0.5;
  --board3d-fill-start: 0.5;
  --board3d-fill-size: 0;
  position: relative;
  width: 300px;
  height: 240px;
  flex: 0 0 240px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 45%, rgba(30, 64, 175, 0.13), transparent 58%),
    rgba(2, 6, 23, 0.52);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.10);
  user-select: none;
}
.board3d-gauge-heading {
  box-sizing: border-box;
  width: 100%;
  min-height: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 2px 6px;
}
.board3d-gauge-heading .lg-label {
  justify-self: start;
  margin: 0;
  color: #e2e8f0;
  font-size: 13px;
}
.board3d-stage canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: inherit;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.board3d-stage canvas:active { cursor: grabbing; }
.board3d-stage canvas:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(147, 197, 253, 0.82);
}
.board3d-reset {
  position: static;
  justify-self: end;
  z-index: 4;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 4px;
  background: rgba(5, 12, 24, 0.84);
  color: rgba(226, 232, 240, 0.82);
  font: 800 15px/20px ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
.board3d-reset:hover,
.board3d-reset:focus-visible {
  border-color: rgba(147, 197, 253, 0.76);
  color: #f8fafc;
  outline: none;
}
.board3d-readout {
  position: static;
  justify-self: center;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transform: none;
  padding: 0 7px;
  border: 0;
  background: transparent;
  pointer-events: none;
  white-space: nowrap;
}
.board3d-readout strong {
  color: #f8fafc;
  font: 800 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.board3d-readout small {
  color: rgba(191, 219, 254, 0.82);
  font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.07em;
}
.board3d-gauge:has(.board3d-stage[data-state="unavailable"]) .board3d-readout strong,
.board3d-gauge:has(.board3d-stage[data-state="unavailable"]) .board3d-readout small {
  color: rgba(148, 163, 184, 0.52);
}
.live-gauge.board3d-combined-gauge { min-height: 352px; }
.board3d-combined-stage {
  --board3d-side-level: 0;
  height: 310px;
  flex-basis: 310px;
  background:
    radial-gradient(circle at 50% 50%, rgba(127, 29, 29, 0.16), transparent 56%),
    rgba(2, 6, 23, 0.56);
}
.board3d-combined-stage canvas {
  inset: 42px 46px;
  width: calc(100% - 92px);
  height: calc(100% - 84px);
  border-radius: 7px;
}
.board3d-combined-side {
  --board3d-side-level: 0;
  --board3d-side-position: 0.5;
  --board3d-side-fill-start: 0.5;
  --board3d-side-fill-size: 0;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.board3d-combined-side > div {
  display: flex;
  box-sizing: border-box;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 4px;
  background: rgba(5, 12, 24, 0.84);
  white-space: nowrap;
}
.board3d-combined-side small {
  color: rgba(191, 219, 254, 0.74);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.board3d-combined-side strong {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.board3d-combined-side[data-state="unavailable"] small,
.board3d-combined-side[data-state="unavailable"] strong {
  color: rgba(148, 163, 184, 0.48);
}
.board3d-combined-top,
.board3d-combined-bottom {
  left: 50%;
  width: 108px;
  transform: translateX(-50%);
}
.board3d-combined-top { top: 6px; }
.board3d-combined-bottom { bottom: 6px; }
.board3d-combined-left,
.board3d-combined-right {
  top: 50%;
  width: 56px;
  height: 100px;
  transform: translateY(-50%);
}
.board3d-combined-left { left: 6px; }
.board3d-combined-right { right: 6px; }
.board3d-combined-left > div,
.board3d-combined-right > div {
  position: absolute;
  top: 50%;
  width: 48px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translateY(-50%);
}
.board3d-combined-left > div { left: 8px; }
.board3d-combined-right > div { right: 8px; }
.board3d-combined-meter {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 3px;
  background: rgba(148, 163, 184, 0.18);
}
.board3d-combined-bottom .board3d-combined-meter { margin: 0 0 3px; }
.board3d-combined-top .board3d-combined-meter,
.board3d-combined-bottom .board3d-combined-meter { width: 108px; }
.board3d-combined-left .board3d-combined-meter,
.board3d-combined-right .board3d-combined-meter {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100px;
  margin: 0;
}
.board3d-combined-left .board3d-combined-meter { left: 0; }
.board3d-combined-right .board3d-combined-meter { right: 0; }
.board3d-combined-meter i,
.board3d-combined-meter b {
  position: absolute;
  display: block;
}
.board3d-combined-top .board3d-combined-meter i,
.board3d-combined-bottom .board3d-combined-meter i {
  top: 0;
  bottom: 0;
  left: calc(var(--board3d-side-fill-start) * 100%);
  width: calc(var(--board3d-side-fill-size) * 100%);
}
.board3d-combined-left .board3d-combined-meter i,
.board3d-combined-right .board3d-combined-meter i {
  right: 0;
  bottom: calc(var(--board3d-side-fill-start) * 100%);
  left: 0;
  height: calc(var(--board3d-side-fill-size) * 100%);
}
.board3d-combined-meter::after {
  content: '';
  position: absolute;
  z-index: 1;
  background: rgba(248, 250, 252, 0.72);
  box-shadow: 0 0 4px rgba(248, 250, 252, 0.35);
}
.board3d-combined-top .board3d-combined-meter::after,
.board3d-combined-bottom .board3d-combined-meter::after {
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.board3d-combined-left .board3d-combined-meter::after,
.board3d-combined-right .board3d-combined-meter::after {
  right: -2px;
  bottom: 50%;
  left: -2px;
  height: 1px;
  transform: translateY(50%);
}
.board3d-combined-meter b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f8fafc;
  box-shadow: 0 0 7px currentColor;
}
.board3d-combined-top .board3d-combined-meter b,
.board3d-combined-bottom .board3d-combined-meter b {
  left: calc(var(--board3d-side-position) * 100%);
  top: 50%;
  transform: translate(-50%, -50%);
}
.board3d-combined-left .board3d-combined-meter b,
.board3d-combined-right .board3d-combined-meter b {
  left: 50%;
  bottom: calc(var(--board3d-side-position) * 100%);
  transform: translate(-50%, 50%);
}
.board3d-combined-top { color: #c084fc; }
.board3d-combined-left { color: #22d3ee; }
.board3d-combined-right { color: #f59e0b; }
.board3d-combined-bottom { color: #60a5fa; }
.board3d-combined-top .board3d-combined-meter i,
.board3d-combined-left .board3d-combined-meter i,
.board3d-combined-right .board3d-combined-meter i,
.board3d-combined-bottom .board3d-combined-meter i {
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.board3d-combined-end {
  position: absolute;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(248, 250, 252, 0.62);
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}
.board3d-combined-nose { top: 30px; }
.board3d-combined-tail { bottom: 30px; }
.board3d-meter {
  position: relative;
  z-index: 2;
  left: auto;
  bottom: auto;
  width: calc(100% - 20px);
  height: 4px;
  margin: 8px 10px 0;
  overflow: visible;
  pointer-events: none;
  background: rgba(148, 163, 184, 0.20);
}
.board3d-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--board3d-fill-start) * 100%);
  width: calc(var(--board3d-fill-size) * 100%);
  display: block;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.66), rgba(226, 232, 240, 0.96));
  box-shadow: 0 0 11px rgba(147, 197, 253, 0.55);
}
.board3d-meter::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  z-index: 1;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(248, 250, 252, 0.78);
  box-shadow: 0 0 5px rgba(248, 250, 252, 0.40);
}
.board3d-meter b {
  position: absolute;
  left: calc(var(--board3d-position) * 100%);
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f8fafc;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.48), 0 0 9px rgba(147, 197, 253, 0.82);
}
.board3d-exag-control {
  width: calc(100% - 20px);
  min-height: 20px;
  display: grid;
  grid-template-columns: auto 1fr 31px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: rgba(148, 163, 184, 0.76);
  font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}
.board3d-exag-control input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 14px;
  margin: 0;
  accent-color: #60a5fa;
}
.board3d-exag-control input[type="range"]:disabled {
  opacity: 0.34;
}
.board3d-exag-control output {
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.board3d-exag-control:has(input:disabled) output { color: rgba(148, 163, 184, 0.50); }
.live-gauge[data-gauge="weighting"] canvas {
  max-height: 96px;
}
.live-gauge[data-gauge="weighting"] .lg-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin-top: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.2;
}
.live-gauge[data-gauge="weighting"] .weighting-reading {
  font-weight: 700;
  letter-spacing: 0.03em;
}
.live-gauge[data-gauge="weighting"] .weighting-board { color: #cbd5e1; }
.live-gauge[data-gauge="weighting"] .weighting-body { color: #22d3ee; }

.live-gauge[data-gauge="pivot"] .lg-readout {
  width: 100%;
  min-height: 39px;
  margin-top: 0;
  text-align: center;
}
.live-gauge[data-gauge="pivot"] .pivot-primary,
.live-gauge[data-gauge="pivot"] .pivot-torso,
.live-gauge[data-gauge="pivot"] .pivot-relation {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.live-gauge[data-gauge="pivot"] .pivot-primary {
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.12;
}
.live-gauge[data-gauge="pivot"] .pivot-torso {
  color: #d8b4fe;
  font-size: 10px;
  line-height: 1.15;
}
.live-gauge[data-gauge="pivot"] .pivot-torso.unavailable {
  color: #6b7280;
}
.live-gauge[data-gauge="pivot"] .pivot-relation {
  color: #94a3b8;
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.live-gauge[data-gauge="riderSlopeAlignment"] canvas {
  max-height: 104px;
}
.live-gauge[data-gauge="riderSlopeAlignment"] .lg-readout {
  max-width: 224px;
  text-align: center;
}
.live-gauge[data-gauge="riderSlopeAlignment"] .lg-unit {
  display: block;
  margin: 2px 0 0;
  font-size: 9px;
}

/* Missing data changes the message, not the visibility of the physical
   reference. Keep both snow planes readable while they collect/abstain. */
.live-gauge[data-gauge="terrainGrade"][data-state="collecting"],
.live-gauge[data-gauge="terrainGrade"][data-state="unavailable"],
.live-gauge[data-gauge="riderSlopeAlignment"][data-state="collecting"],
.live-gauge[data-gauge="riderSlopeAlignment"][data-state="unavailable"] {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(96, 165, 250, 0.16);
}

/* Speed stays intentionally simple: a visible unit selector, then one number
   followed by its unit. There is no dial or needle. */
.live-gauge[data-gauge="speed"] {
  width: 170px;
  min-height: 142px;
}
.live-gauge[data-gauge="speed"] .speed-unit-toggle {
  display: inline-flex;
  padding: 2px;
  border: 1px solid rgba(156, 163, 175, 0.28);
  border-radius: 7px;
  background: rgba(2, 6, 23, 0.45);
}
.live-gauge[data-gauge="speed"] .speed-unit-toggle button {
  min-width: 52px;
  min-height: 28px;
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9ca3af;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.live-gauge[data-gauge="speed"] .speed-unit-toggle button[aria-pressed="true"] {
  background: rgba(96, 165, 250, 0.22);
  color: #e5e7eb;
}
.live-gauge[data-gauge="speed"] .speed-unit-toggle button:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
.live-gauge[data-gauge="speed"] .speed-readout {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: center;
  min-height: 62px;
}
.live-gauge[data-gauge="speed"] .speed-value {
  color: #e5e7eb;
  font-size: 52px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.live-gauge[data-gauge="speed"] .speed-unit-label {
  padding-left: 5px;
  color: #9ca3af;
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

/* Twist keeps the normal tile footprint. Its oblique board projection, not a
   larger tile, carries the depth and deformation. */
.live-gauge[data-gauge="twist"] {
  position: relative;
}
.live-gauge[data-gauge="twist"] .twist-exag-control {
  position: absolute;
  top: 0;
  right: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  color: #cbd5e1;
}
.live-gauge[data-gauge="twist"] .twist-exag-control input {
  width: 46px;
  height: 24px;
  margin: 0;
  padding: 0;
  accent-color: #cbd5e1;
  cursor: pointer;
}
.live-gauge[data-gauge="twist"] .twist-exag-control output {
  min-width: 28px;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e5e7eb;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.live-gauge[data-gauge="twist"] .twist-exag-control input:focus-visible {
  outline: 2px solid #e5e7eb;
  outline-offset: 1px;
  border-radius: 3px;
}
.live-gauge[data-gauge="twist"] .twist-exag-control input:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.live-gauge[data-gauge="twist"] canvas {
  width: 204px;
  height: 130px;
  max-height: none;
}
.live-gauge[data-gauge="twist"] .lg-readout {
  width: 100%;
  min-height: 31px;
  margin-top: 0;
  text-align: center;
}
.live-gauge[data-gauge="twist"] .twist-primary,
.live-gauge[data-gauge="twist"] .twist-relation,
.live-gauge[data-gauge="twist"] .twist-unavailable {
  display: block;
}
.live-gauge[data-gauge="twist"] .twist-primary {
  color: #e5e7eb;
  font-size: 22px;
  line-height: 1.05;
}
.live-gauge[data-gauge="twist"] .twist-relation {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
.live-gauge[data-gauge="twist"] .twist-unavailable {
  color: #9ca3af;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* Board Bend uses the same full visual area as Twist. The canvas stays wide
   because this is the board's true side profile, not a sparkline. */
.live-gauge[data-gauge="bend"] {
  position: relative;
}
.live-gauge[data-gauge="bend"] .lg-label {
  align-self: flex-start;
  padding-left: 2px;
}
.live-gauge[data-gauge="bend"] .bend-exag-control {
  position: absolute;
  top: 0;
  right: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  color: #cbd5e1;
}
.live-gauge[data-gauge="bend"] .bend-exag-control input {
  width: 46px;
  height: 24px;
  margin: 0;
  padding: 0;
  accent-color: #cbd5e1;
  cursor: pointer;
}
.live-gauge[data-gauge="bend"] .bend-exag-control output {
  min-width: 28px;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e5e7eb;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.live-gauge[data-gauge="bend"] .bend-exag-control input:focus-visible {
  outline: 2px solid #e5e7eb;
  outline-offset: 1px;
  border-radius: 3px;
}
.live-gauge[data-gauge="bend"] .bend-exag-control input:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.live-gauge[data-gauge="bend"] canvas {
  width: 204px;
  height: 130px;
  max-height: none;
}
.live-gauge[data-gauge="bend"] .lg-readout {
  width: 100%;
  min-height: 31px;
  margin-top: 0;
  text-align: center;
}
.live-gauge[data-gauge="bend"] .bend-primary,
.live-gauge[data-gauge="bend"] .bend-relation,
.live-gauge[data-gauge="bend"] .bend-unavailable {
  display: block;
}
.live-gauge[data-gauge="bend"] .bend-primary {
  color: #e5e7eb;
  font-size: 22px;
  line-height: 1.05;
}
.live-gauge[data-gauge="bend"] .bend-direction {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: 0.16em;
}
.live-gauge[data-gauge="bend"] .bend-relation {
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.035em;
  white-space: nowrap;
}
.live-gauge[data-gauge="bend"] .bend-unavailable {
  color: #9ca3af;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* ── Gauge honesty: the four states must LOOK different ─────────────
   measured   = full strength, no badge
   relative   = full strength + REL, a within-rider delta not a target
   collecting = dimmed, neutral, waiting on wiring or samples
   unavailable = dimmed hardest, and says which input is missing
   Driven from gaugeHonesty.js so the phone shows the same four. */
.live-gauge .lg-state {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 1px;
  min-height: 10px;
  text-align: center;
  white-space: nowrap;
}
.live-gauge[data-state="relative"]    { border-color: rgba(156, 163, 175, 0.18); }
.live-gauge[data-state="collecting"],
.live-gauge[data-state="unavailable"] {
  border-style: dashed;
  border-color: rgba(156, 163, 175, 0.22);
  background: rgba(15, 23, 42, 0.30);
}
.live-gauge[data-state="unavailable"] .lg-readout { color: #6b7280 !important; }

.big-gauge {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.10);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  box-shadow: inset 0 0 24px rgba(96, 165, 250, 0.04);
}
.big-gauge canvas {
  max-width: 100%;
  height: auto;
}
.big-gauge-strip { flex: 1; }
.big-gauge-flex  { flex: 1; }

/* ─── Run Report Cards (Slopes-style per-run) ─── */
.run-cards-section {
  margin-bottom: 4px;
}
.run-cards-title {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #facc15;
  margin: 4px 8px 4px 8px;
  font-weight: 700;
}
.run-cards-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 8px 4px;
}
.run-card {
  flex: 0 0 auto;
  min-width: 220px;
  background: rgba(7, 12, 22, 0.85);
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.run-card:hover {
  border-color: rgba(250, 204, 21, 0.65);
  background: rgba(15, 23, 42, 0.95);
}
.run-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.run-card-num {
  font-weight: 700;
  font-size: 12px;
  color: #facc15;
}
.run-card-time {
  font-size: 10px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}
.run-card-dur {
  font-size: 10px;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.run-card-jump {
  font-size: 11px;
  color: #facc15;
}
.run-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.run-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.run-stat .rs-num {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.run-stat .rs-unit {
  color: #9ca3af;
  font-size: 9px;
}

/* ── Section bar inside run card (visual cut-into-pieces) ── */
.run-card-sections {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.section-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
}
.section-bar .seg-block {
  height: 100%;
  cursor: pointer;
  transition: opacity 0.15s;
}
.section-bar .seg-block:hover {
  opacity: 0.75;
}
.section-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.section-legend .seg-tag {
  font-weight: 700;
}

/* ── Phase 2.1: highlight chips inside run card ── */
.run-card-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(250, 204, 21, 0.10);
}
.run-card-highlights .hl-label {
  font-size: 10px;
  color: #facc15;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.run-highlight-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
  font-variant-numeric: tabular-nums;
}
.run-highlight-chip:hover {
  background: rgba(250, 204, 21, 0.20);
}
.run-highlight-chip .hl-t {
  color: #fde68a;
  font-size: 10px;
  font-weight: 600;
}
.run-highlight-chip .hl-dur {
  color: #9ca3af;
  font-size: 9px;
}
.run-highlight-chip .hl-score {
  color: #facc15;
  font-size: 9px;
  font-weight: 700;
}

#section-navigator {
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.10);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text1);
}
.section-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
.section-row:hover { background: rgba(96, 165, 250, 0.08); }
.section-row.transition { color: var(--text4); cursor: default; }
.section-row.transition:hover { background: transparent; }
.section-row .sec-num   { width: 24px; color: var(--text4); }
.section-row .sec-type  { width: 110px; font-weight: bold; }
.section-row .sec-stats { flex: 1; color: var(--text2); }
.section-row .sec-score { width: 36px; text-align: right; font-weight: bold; }
.section-row .sec-jump  { width: 60px; text-align: right; color: var(--accent); }
.section-row.short     .sec-type { color: #a3e635; }
.section-row.medium    .sec-type { color: #facc15; }
.section-row.long      .sec-type { color: #22c55e; }
.section-row.very-long .sec-type { color: #06b6d4; }
.section-row.sliding   .sec-type { color: #f97316; }

#run-overall-score {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(34, 197, 94, 0.10);
  border-left: 3px solid #22c55e;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
}
.big-gauge canvas { display: block; }

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gauge-label {
  font-size: 8px;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gauge canvas { display: block; }

.gauge-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 4px;
}
.stat-mini {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: var(--text0);
}
.stat-mini label {
  font-size: 8px;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 28px;
}

/* Legacy .stat kept for fallback / sidebar usage */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.stat label {
  font-size: 9px;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat span {
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: var(--text0);
}

/* ── Video pane (restored 2026-08-09) ─────────────────────────────
   Mirrors #clock-overlay so the two overlays read as one family.
   Hidden until a run actually has a matched video. */
#clip-wrap {
  /* Left half of the stage — same width and height as the 3D beside it.
     `display` is flipped to flex by the picker code when a clip exists. */
  display: none;
  flex-direction: column;
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  background: var(--bg0);
  border-right: 1px solid var(--border);
  padding: 8px;
  user-select: none;
}
#clip-picker {
  width: 100%;
  margin-bottom: 6px;
  background: #11151f;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
}
#clip-video {
  /* Fills the pane between picker and controls. `contain` keeps a portrait
     phone clip un-stretched — it letterboxes rather than distorting the
     rider, which would make the video useless as a reference. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: block;
  border-radius: 6px;
  background: #000;
  object-fit: contain;
}
#clip-controls {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
#clip-controls button {
  flex: 1;
  background: #11151f;
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 0;
  font-size: 10px;
  cursor: pointer;
}
#clip-controls button:hover { color: var(--text1); border-color: var(--text4); }
#clip-controls button.active { color: #7fd4ff; border-color: #2b6f8f; }
#clip-controls button:disabled { opacity: 0.45; cursor: default; }
#clip-offset-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 190px;
  color: var(--text3);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}
#clip-offset-slider {
  width: 108px;
  accent-color: var(--accent);
  cursor: grab;
}
#clip-offset-slider:active { cursor: grabbing; }
#clip-offset-slider:disabled { opacity: 0.45; cursor: default; }
#clip-offset-number {
  width: 55px;
  box-sizing: border-box;
  padding: 3px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #11151f;
  color: var(--text1);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
#clip-offset-number:disabled { opacity: 0.45; }
#clip-save-offset {
  flex: 0 0 auto;
  color: #7fd4ff;
  border-color: #2b6f8f;
}
#clip-status {
  text-align: center;
  font-size: 9px;
  color: var(--text4);
  margin-top: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#clip-place {
  text-align: center;
  font-size: 11px;
  color: var(--text2);
  margin-top: 3px;
  min-height: 14px;
}
#clip-place .cp-diff { color: var(--text4); }
#clip-place .cp-lift { color: #7fd4ff; }

/* Narrow window: a 50/50 split leaves two unusable slivers and pushes the 3D
   off-screen. Stack the video above the replay instead so both stay visible. */
@media (max-width: 1100px) {
  #canvas-wrapper { flex-direction: column; }
  #clip-wrap { flex: 0 0 42%; width: 100%; border-right: 0;
               border-bottom: 1px solid var(--border); }
  #stage-3d  { flex: 1 1 auto; width: 100%; }
}

/* #root is a grid, so its single column sized to the widest child's max-content
   (~1589 px from the header + gauge strip). Every row then inherited that width
   and a narrower window showed only a left slice. Let the column shrink; the
   header and gauge strip scroll on their own instead of stretching the page. */
#root { grid-template-columns: minmax(0, 1fr); }
#header, #tabbar { overflow-x: auto; }

/* Drag handle between the video and the 3D. Sits in the flex row, so giving it
   width takes width from the panes rather than overlaying them. */
#pane-split {
  flex: 0 0 6px;
  cursor: col-resize;
  background: var(--border);
  transition: background 120ms;
  position: relative;
  z-index: 5;
}
#pane-split:hover, #pane-split.dragging { background: var(--accent); }
#pane-split::after {
  content: '';
  position: absolute;
  top: 50%; left: -4px;
  width: 14px; height: 44px;
  transform: translateY(-50%);
  border-radius: 7px;
}
#clip-wrap[style*="display: none"] + #pane-split { display: none; }
@media (max-width: 1100px) {
  #pane-split { flex: 0 0 6px; cursor: row-resize; width: 100%; }
}

/* ─── Resort map (2026-08-10) ─── */
/* The map is anchored to the PICTURE, not to the panel. Anchoring it to the
   panel meant anything added below the video — the manual-placement bar — slid
   underneath the map and became unreadable. */
/* Takes over the flex sizing the video used to own, so wrapping it changed
   nothing about how the picture fills the pane. */
/* The stage takes the CLIP's own shape, set from the real pixel dimensions once
   the metadata loads (see fitClipStage). Clips arrive both portrait (phone,
   9:16) and landscape (DJI, 16:9); a fixed-shape box letterboxes one of them
   into a sliver between black bars. Matching the shape means the picture is
   always as large as the pane allows, with no dead space and nothing cropped. */
#clip-stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 180px;
  margin: 0 auto;          /* centre the narrow shapes */
  max-width: 100%;
  overflow: hidden;
  background: transparent; /* no letterbox bars to leave behind */
}
#clip-stage > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  transform-origin: center center;
  transition: transform 160ms ease;
}
#clip-orientation {
  position: absolute;
  z-index: 60;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(7, 11, 18, 0.82);
  backdrop-filter: blur(9px);
}
#clip-orientation button {
  min-width: 42px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  background: rgba(17, 21, 31, 0.92);
  color: var(--text2);
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
#clip-orientation button:hover { color: var(--text0); border-color: var(--text4); }
#clip-orientation button.active { color: #7fd4ff; border-color: #2b6f8f; }
#clip-orientation button:disabled { opacity: 0.45; cursor: default; }
#video-gauge-picker[hidden] { display: none; }
#video-gauge-picker {
  position: absolute;
  z-index: 61;
  top: 48px;
  right: 8px;
  box-sizing: border-box;
  width: min(336px, calc(100% - 16px));
  max-height: min(66%, 420px);
  padding: 9px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 9px;
  background: rgba(7, 11, 18, 0.93);
  color: var(--text1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 700 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.video-gauge-picker-head,
.video-gauge-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.video-gauge-picker-head strong { letter-spacing: 0.12em; }
.video-gauge-picker-actions {
  justify-content: flex-start;
  margin: 7px 0;
}
#video-gauge-picker button {
  padding: 5px 7px;
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 5px;
  background: rgba(30, 41, 59, 0.78);
  color: rgba(226, 232, 240, 0.84);
  font: inherit;
  cursor: pointer;
}
#video-gauge-picker button:hover,
#video-gauge-picker button:focus-visible {
  color: #fff;
  border-color: rgba(125, 211, 252, 0.76);
  outline: none;
}
.video-gauge-picker-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.video-gauge-picker-options button { text-align: left; }
.video-gauge-picker-options button.active {
  color: #e0f2fe;
  border-color: rgba(56, 189, 248, 0.82);
  background: rgba(3, 105, 161, 0.44);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.20);
}
.video-gauge-picker-options button[data-state="unavailable"] { opacity: 0.62; }
#video-gauge-picker > small {
  display: block;
  margin-top: 8px;
  color: var(--text3);
  font-size: 8px;
  font-weight: 600;
}
.clip-download {
  min-width: 42px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  background: rgba(17, 21, 31, 0.92);
  color: var(--text2);
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.clip-download:hover { color: var(--text0); border-color: var(--text4); }
.clip-download[hidden] { display: none; }
:root[data-theme="light"] #clip-orientation {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] #clip-orientation button {
  background: rgba(248, 250, 252, 0.92);
  border-color: rgba(0, 0, 0, 0.16);
}
:root[data-theme="light"] #video-gauge-picker {
  background: rgba(248, 250, 252, 0.95);
  color: #172033;
  border-color: rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] #video-gauge-picker button {
  background: rgba(226, 232, 240, 0.88);
  color: #334155;
  border-color: rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .video-gauge-picker-options button.active {
  color: #0c4a6e;
  background: rgba(186, 230, 253, 0.82);
  border-color: rgba(2, 132, 199, 0.65);
}
:root[data-theme="light"] .clip-download {
  background: rgba(248, 250, 252, 0.92);
  border-color: rgba(0, 0, 0, 0.16);
}

#resort-map {
  /* OVERLAYS the video rather than sitting under it — the picture keeps its
     full height and the map floats in the corner like a HUD. */
  position: absolute;
  /* Position and width are set by placeResortMap() from the clip's real shape:
     into the side margin for portrait footage, corner-overlay for landscape.
     These are only the starting values before the first clip loads. */
  left: 10px; top: 60px;
  width: 158px;
  overflow: hidden;
  z-index: 7;
  background: rgba(7,9,15,0.92);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 6px 4px;
  backdrop-filter: blur(6px);
  z-index: 6;
  user-select: none;
}
#resort-map.collapsed #resort-map-canvas,
#resort-map.collapsed #resort-map-legend { display: none; }
#resort-map-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.08em; color: var(--text2);
  text-transform: uppercase; padding: 0 2px 4px;
}
#resort-map-toggle {
  background: transparent; border: 0; color: var(--text2);
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#resort-map-toggle:hover { color: var(--text0); }
#resort-map-canvas { display: block; width: 100%; height: auto; cursor: crosshair; }
#resort-map-legend {
  display: flex; flex-wrap: wrap; gap: 7px;
  font-size: 9px; color: var(--text3); padding: 4px 2px 0;
}
#resort-map-legend .sw {
  display: inline-block; width: 8px; height: 3px; border-radius: 2px; margin-right: 3px;
  vertical-align: middle;
}

#clip-video { flex: 1 1 auto; min-height: 120px; }

/* The video column scrolls if the map pushes past the pane height, so the map
   can never squeeze the picture to nothing. */
#clip-wrap { overflow-y: auto; }

/* Anchor for the map overlay, and let the picture keep the whole pane. */
#clip-wrap { position: relative; overflow: visible; }
#resort-map-canvas { width: 100%; }
#resort-map.collapsed { width: auto; }

/* ─── Clip span band on the scrubber (2026-08-10) ─── */
#scrubber-wrap { position: relative; }
#clip-span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  border-radius: 3px;
  background: rgba(37, 99, 235, 0.38);
  border: 1px solid var(--accent);
  pointer-events: auto;
  cursor: pointer;
  display: none;
  z-index: 1;
}
#clip-span::after {
  content: '🎬';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  opacity: 0.9;
  pointer-events: none;
}
#clip-span.narrow::after { content: ''; }
/* A candidate position, not a measured one. Amber and dashed so it cannot be
   mistaken at a glance for a confirmed sync. */
#clip-span.unconfirmed {
  background: rgba(217, 119, 6, 0.30);
  border: 1px dashed #d97706;
}
#clip-span.unconfirmed::after { content: '?'; font-weight: 700; }
#scrubber { position: relative; z-index: 2; background: transparent; }

/* Manual placement bar — only visible when the matcher refused a clip. */
#clip-unplaced {
  margin-top: 5px;
  padding: 6px 8px;
  border: 1px solid #d97706;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.10);
  font-size: 11.5px;
  flex: 0 0 auto;   /* never let the flex column shrink it out of view */
}
#clip-unplaced-note { color: #b45309; line-height: 1.35; margin-bottom: 5px; }
/* Floated into the empty margin beside a portrait clip (see placeResortMap),
   so the picture keeps the height the bar would otherwise take. */
#clip-unplaced.floated { position: absolute; z-index: 8; margin-top: 0; }
#clip-cand-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
#clip-cand-row button {
  padding: 3px 9px;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 4px;
  background: var(--panel, #fff);
  cursor: pointer;
  font-size: 12px;
}
#clip-cand-row button:hover { border-color: #d97706; }
#cand-confirm { font-weight: 600; border-color: #d97706; flex: 1 1 100%; }
#cand-retry { margin-left: auto; }
#cand-label { font-variant-numeric: tabular-nums; min-width: 66px; text-align: center; }
#cand-evidence { margin-top: 5px; color: var(--muted, #71717a); font-size: 11px; }

/* Retry / manual-placement controls, and the verdict line the retry writes. */
#cand-verdict {
  margin-top: 5px;
  color: #b45309;
  font-size: 11px;
  line-height: 1.4;
}
#clip-placed-row {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted, #71717a);
}
#placed-wrong {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 4px;
  background: var(--panel, #fff);
  cursor: pointer;
  font-size: 11px;
}
#placed-wrong:hover { border-color: #d97706; color: #b45309; }

/* ── Turn-rate waves ──────────────────────────────────────────────
   Two lanes of the same quantity: the clip's board turn rate above, the
   ride's below. Placing them adjacent is the point — a person can see an
   alignment hold or drift in a way no confidence number conveys. */
#wave-panel {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg1);
  padding: 7px 9px 6px;
  flex: 0 0 auto;
}
#wave-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 4px;
}
#wave-legend { letter-spacing: 0; text-transform: none; font-size: 10px; }
#wave-legend i {
  display: inline-block; width: 14px; height: 2px;
  vertical-align: middle; margin: 0 4px 0 10px;
}
#wave-canvas { display: block; width: 100%; height: auto; cursor: crosshair; }
#wave-status {
  font-size: 10px; color: var(--text3); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ── Clip workspace ───────────────────────────────────────────────
   When a clip is loaded, placing it IS the task, so the replay stops
   being capped at one viewport. Capped, the row was 532px and the clip
   pane's own chrome — picker, transport, status, placement bar, waves —
   took 324px of it, leaving a 9:16 clip 117x208px: under 2% of a
   1440x900 screen. Everything added to that column came straight out of
   the picture. Letting the section grow means new panels cost scroll,
   not video. */
#view-replay.active.has-clip {
  height: auto;
  min-height: calc(100vh - 78px);
  overflow: visible;
}
#view-replay.active.has-clip #main,
#view-replay.active.has-clip #canvas-wrapper { min-height: 76vh; overflow: visible; }
#view-replay.active.has-clip #clip-wrap { height: auto; }
/* A portrait clip is height-limited, so height is what it needs. */
#view-replay.active.has-clip #clip-stage { min-height: 52vh; }

/* ══ ONE-SCREEN CLIP WORKSPACE ═══════════════════════════════════
   Direction: an editing suite, not a document. The clip is the canvas
   and every control floats on it, because a 9:16 clip in a 16:9 pane
   leaves two tall gutters of dead black that were going to waste while
   the same controls stacked BELOW and starved the picture.

   Measured before: clip column stacked to 956px and the bottom bar took
   290px — 1246px of content in an 822px screen, so the picture was
   squeezed to 117x208 and the rest scrolled off. Nothing here is new
   UI; it is the same parts, moved into space that already existed. */

#view-replay.active.has-clip {
  /* The one-screen intent holds for the STAGE — the clip and the 3D still fill
     the space that is left. What it must not do any more is swallow the
     instrument cluster: the old `1fr 224px` gave the gauge deck no track at all,
     and overflow:hidden then cut the bottom off every tile. The deck gets its
     own auto row and the page grows if a short window cannot hold it. */
  height: auto;
  min-height: calc(100vh - 78px);
  overflow: visible;
  grid-template-rows: 1fr auto auto;   /* stage · transport · gauge deck */
}
#view-replay.active.has-clip #main,
#view-replay.active.has-clip #canvas-wrapper {
  /* Keep a real floor under the stage. With `min-height: 0` and an auto-sized
     deck below, the 1fr row can be squeezed to nothing and the video and 3D
     disappear entirely. */
  min-height: 58vh;
  overflow: hidden;
}

/* The clip column becomes a stage with floating chrome. */
#view-replay.active.has-clip #clip-wrap {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
#view-replay.active.has-clip #clip-stage {
  position: absolute;
  inset: 0;
  margin: 0;
  min-height: 0;
  max-height: none;
  height: auto;
  background: #05070a;
}
#view-replay.active.has-clip #clip-stage > video {
  width: 100%; height: 100%; object-fit: contain;
}

/* The lower gauge deck stays in place. These are presentation mirrors of those
   same WebGL canvases plus the watch HR readout, placed directly over the video.
   The cards are the only surfaces; there is no gray strip behind them. */
#video-gauge-overlay[hidden] { display: none; }
#video-gauge-overlay .video-gauge-visibility-dot {
  position:absolute;top:1px;right:1px;z-index:4;display:grid;place-items:center;
  width:24px;height:24px;min-width:24px;padding:0;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;pointer-events:auto;touch-action:manipulation;
}
#video-gauge-overlay .video-gauge-visibility-dot::before {
  content:'';width:8px;height:8px;border-radius:50%;border:1.5px solid white;
  background:transparent;box-shadow:0 0 0 2px #173344a6,0 1px 4px #0009;
}
#video-gauge-overlay .video-gauge-visibility-dot[aria-pressed="true"]::before { background:white; }
#video-gauge-overlay .video-gauge-visibility-dot:is(:hover,:focus-visible) { background:#173344b3;outline:2px solid #8fdfca;outline-offset:-2px; }
#video-gauge-overlay .video-gauge-mirror-label { padding-right:24px!important; }
#video-gauge-overlay .video-gauge-restore-dots {
  position:absolute;left:4px;right:4px;bottom:4px;z-index:30;display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;gap:3px;pointer-events:none;color:white;font:11px/1.4 system-ui;
  text-shadow:0 1px 3px #000;
}
#video-gauge-overlay .video-gauge-restore-dots[hidden] { display:none!important; }
#video-gauge-overlay .video-gauge-restore-dots > span { padding:0 4px;background:#173344a6;border-radius:4px; }
#video-gauge-overlay .video-gauge-restore-dots .video-gauge-visibility-dot { position:relative;inset:auto;flex:0 0 24px; }
body[data-demo-narrow="true"] #video-gauge-overlay .video-gauge-restore-dots { position:static;grid-column:1 / -1;background:#1b3447;border-radius:8px;padding:4px; }
#view-replay.active.has-clip #video-gauge-overlay:not([hidden]) {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  padding: 0;
  pointer-events: none;
}
#view-replay.active.has-clip .video-gauge-mirror {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 98px;
  min-width: 0;
  height: 82px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.30);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.19);
  box-shadow: inset 0 0 18px rgba(226, 232, 240, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow 120ms ease, opacity 120ms ease;
}
#view-replay.active.has-clip .video-gauge-mirror[hidden] { display: none; }
#view-replay.active.has-clip .video-gauge-mirror:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.92);
  outline-offset: 2px;
}
#view-replay.active.has-clip .video-gauge-mirror.dragging {
  cursor: grabbing;
  opacity: 0.92;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42), inset 0 0 0 2px rgba(147, 197, 253, 0.80);
}
#view-replay.active.has-clip .video-gauge-mirror.resizing {
  opacity: 0.92;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42), inset 0 0 0 2px rgba(248, 113, 113, 0.82);
}
#view-replay.active.has-clip .video-gauge-mirror[data-state="unavailable"] {
  opacity: 0.72;
}
#view-replay.active.has-clip .video-gauge-mirror-label {
  padding: 2px 2px 1px;
  color: rgba(241, 245, 249, 0.92);
  font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#view-replay.active.has-clip .video-gauge-mirror-resize {
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 3;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.52);
  color: rgba(241, 245, 249, 0.82);
  border-radius: 4px;
  font: 700 11px/14px ui-monospace, monospace;
  cursor: nwse-resize;
  pointer-events: auto;
}
#view-replay.active.has-clip .video-gauge-mirror-resize:hover,
#view-replay.active.has-clip .video-gauge-mirror-resize:focus-visible {
  color: #fff;
  background: rgba(127, 29, 29, 0.84);
  outline: 1px solid rgba(248, 113, 113, 0.80);
}
#view-replay.active.has-clip .video-gauge-mirror-canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  border-radius: 5px;
}
#view-replay.active.has-clip .video-gauge-mirror-readout {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  color: rgba(241, 245, 249, 0.96);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
#view-replay.active.has-clip .video-gauge-mirror-readout strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
#view-replay.active.has-clip .video-gauge-mirror-readout small {
  color: rgba(191, 219, 254, 0.86);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="board"] {
  grid-template-rows: 16px minmax(0, 1fr) 21px;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="board"] .video-gauge-mirror-label {
  padding: 4px 4px 1px;
  color: #f8fafc;
  font-size: 10px;
  font-weight: 800;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="board"] .video-gauge-mirror-canvas {
  box-sizing: border-box;
  padding: 2px 5px;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="board"] .video-gauge-mirror-readout strong {
  color: #f8fafc;
  font-size: 17px;
  line-height: 1;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="board"] .video-gauge-mirror-readout small,
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="board"] .video-gauge-mirror-caption {
  display: none;
}
#view-replay.active.has-clip .video-gauge-mirror:is(
  [data-source-kind="number"],
  [data-metric="heart-rate"]
) {
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#view-replay.active.has-clip .video-gauge-mirror:is(
  [data-source-kind="number"],
  [data-metric="heart-rate"]
) .video-gauge-mirror-readout {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
#view-replay.active.has-clip .video-gauge-mirror:is(
  [data-source-kind="number"],
  [data-metric="heart-rate"]
) .video-gauge-mirror-readout strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  line-height: 1;
}
#view-replay.active.has-clip .video-gauge-mirror:is(
  [data-source-kind="number"],
  [data-metric="heart-rate"]
) .video-gauge-mirror-readout small {
  position: absolute;
  top: calc(50% + 16px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="slope"] .video-gauge-mirror-readout strong {
  font-size: 28px;
  line-height: 1;
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="turn-map"] {
  grid-template-rows: 20px minmax(0, 1fr);
  background: rgba(7, 15, 26, 0.52);
  border-color: rgba(34, 211, 238, 0.46);
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="turn-map"][hidden] {
  display: none;
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="turn-map"] .video-gauge-mirror-canvas {
  object-fit: fill;
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="turn-map"] .video-gauge-mirror-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0.10em;
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="turn-map"] :is(
  .video-gauge-mirror-readout,
  .video-gauge-mirror-caption
) {
  display: none;
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="heart-rate"] .video-gauge-mirror-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-top: 2px;
  color: rgba(254, 205, 211, 0.94);
}
#view-replay.active.has-clip .video-heart-rate-heart {
  display: block;
  color: #ef4444;
  font-size: 26px;
  line-height: 22px;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
  animation: heart-rate-beat 1s ease-in-out infinite;
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="heart-rate"] .video-gauge-mirror-readout strong {
  color: #fff1f2;
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(190, 24, 93, 0.75);
}
#view-replay.active.has-clip .video-gauge-mirror[data-metric="heart-rate"] .video-gauge-mirror-readout small {
  color: #fecdd3;
  font-size: 8px;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-label {
  position: absolute;
  top: 50%;
  left: 7px;
  z-index: 1;
  display: block;
  padding: 0;
  transform: translateY(-50%);
  color: rgba(241, 245, 249, 0.96);
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-caption {
  display: none;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-resize {
  border: 0;
  background: transparent;
  opacity: 0;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"]:hover .video-gauge-mirror-resize,
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"]:focus-visible .video-gauge-mirror-resize {
  opacity: 0.9;
}
#view-replay.active.has-clip .video-gauge-mirror-caption {
  min-height: 10px;
  padding: 1px 2px 2px;
  overflow: hidden;
  color: rgba(241, 245, 249, 0.94);
  background: rgba(15, 23, 42, 0.43);
  font: 700 5px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

@media (max-width: 520px) {
  #gauge-deck { padding-right: 8px; padding-left: 8px; }
  .live-gauge.board3d-gauge {
    box-sizing: border-box;
    width: min(320px, calc(100vw - 36px));
  }
  .board3d-stage { width: 100%; }
  .board3d-combined-stage {
    height: 280px;
    flex-basis: 280px;
  }
  #view-replay.active.has-clip #video-gauge-overlay:not([hidden]) {
    inset: 0;
  }
  #view-replay.active.has-clip .video-gauge-mirror {
    height: 70px;
  }
  #view-replay.active.has-clip .video-gauge-mirror-label { font-size: 7px; }
  #view-replay.active.has-clip .video-gauge-mirror-caption { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .heart-rate-icon,
  #view-replay.active.has-clip .video-heart-rate-heart {
    animation: none;
  }
}

/* Full screen keeps the stage, transport chrome, and gauge mirror together. */
#clip-stage:fullscreen,
#clip-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  background: #020617;
}
#clip-stage:fullscreen > video,
#clip-stage:-webkit-full-screen > video {
  width: 100%;
  height: 100%;
}
#clip-stage:fullscreen #video-gauge-overlay,
#clip-stage:-webkit-full-screen #video-gauge-overlay,
#view-replay.active.has-clip #clip-stage[data-fullscreen="true"] #video-gauge-overlay:not([hidden]) {
  inset: 0;
}

/* Floating chrome. `.hud` panels share one treatment so the overlay reads
   as one layer rather than four pasted boxes. */
#view-replay.active.has-clip #clip-picker,
#view-replay.active.has-clip #resort-map,
#view-replay.active.has-clip #clip-unplaced,
#view-replay.active.has-clip #wave-panel,
#view-replay.active.has-clip .clip-dock {
  position: absolute;
  z-index: 6;
  background: rgba(7, 11, 18, 0.82);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
}
:root[data-theme="light"] #view-replay.active.has-clip #clip-picker,
:root[data-theme="light"] #view-replay.active.has-clip #resort-map,
:root[data-theme="light"] #view-replay.active.has-clip #clip-unplaced,
:root[data-theme="light"] #view-replay.active.has-clip #wave-panel,
:root[data-theme="light"] #view-replay.active.has-clip .clip-dock {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.12);
}

#view-replay.active.has-clip #clip-picker {
  top: 8px; left: 8px; width: 232px; max-width: 42%;
  font-size: 11px; padding: 4px 8px;
}
#view-replay.active.has-clip #resort-map { top: 44px; left: 8px; width: 210px; }
#view-replay.active.has-clip #clip-unplaced { left: 8px; width: 264px; margin: 0; font-size: 11px; }

/* Transport + readouts as one dock along the bottom of the picture. */
#view-replay.active.has-clip .clip-dock {
  left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; flex-wrap: wrap;
}
#view-replay.active.has-clip #clip-controls {
  display: flex; gap: 5px; margin: 0; flex: 0 0 auto;
}
#view-replay.active.has-clip #clip-controls button { font-size: 11px; padding: 3px 9px; }
#view-replay.active.has-clip #clip-status,
#view-replay.active.has-clip #clip-place {
  margin: 0; font-size: 10.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#view-replay.active.has-clip #clip-status { flex: 0 0 auto; }
#view-replay.active.has-clip #clip-place { flex: 1 1 140px; min-width: 0; text-align: right; }

/* Waves sit above the dock, spanning the picture. */
#view-replay.active.has-clip #wave-panel {
  left: 8px; right: 8px; bottom: 52px; padding: 5px 8px 4px;
}
#view-replay.active.has-clip #wave-canvas { max-height: 74px; }

/* Bottom bar: three playback bars plus the compact horizontal gauges. */
#view-replay.active.has-clip #scrubber-bar { overflow: hidden; }

/* The bar carries a hardcoded 290px that overflowed its 172px grid row.
   Bind it to the row and let the gauge strip scroll sideways instead of
   pushing the picture off the screen — a gauge row is scanned left to
   right anyway, so horizontal is its natural overflow direction. */
#view-replay.active.has-clip #scrubber-bar {
  height: auto;
  min-height: 0;
  padding: 6px 12px 8px;
  gap: 6px;
}
#view-replay.active.has-clip #gauge-row,
#view-replay.active.has-clip .gauge-row,
#view-replay.active.has-clip #gauges {
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* On a narrow window, keep the full-run transport visible and give the 3D
   pane a compact, usable stage instead of letting its 100% height overflow
   the stacked video/3D layout. */
@media (max-width: 1100px) {
  #view-replay.active.has-clip #canvas-wrapper {
    flex-direction: column;
    overflow: hidden;
    min-height: 760px;
  }
  #view-replay.active.has-clip #clip-wrap {
    flex: 0 0 340px;
    width: 100%;
    height: 340px;
    min-height: 340px;
  }
  #view-replay.active.has-clip #stage-3d {
    flex: 1 0 420px;
    width: 100%;
    height: 420px;
    min-height: 420px;
  }
}
#rider-comparison {
  position: absolute; right: 12px; top: 86px; z-index: 5;
  width: min(210px, 32%); padding: 10px; border-radius: 12px;
  background: rgba(9, 17, 30, .87); color: #eef5ff; font: 12px/1.5 system-ui;
  border: 1px solid #50617b;
}
#rider-comparison[hidden] { display: none; }
#rider-comparison strong { letter-spacing: .08em; }
.rider-axis-values { display: grid; gap: 8px; margin: 12px 0; }
.rider-axis-values span { display: flex; justify-content: space-between; gap: 12px; }
.rider-axis-values b { font-size: 20px; font-variant-numeric: tabular-nums; }
#rider-comparison small { display: block; color: #bac9dd; }
#rider-comparison label { display: block; margin-top: 10px; cursor: pointer; }
#rider-input-mode { width:100%; margin-top:4px; padding:6px; border:1px solid #63758f; border-radius:6px; background:#142235; color:#fff; }
#three-sensor-gauge-link { display:block; margin-top:8px; color:#7de0e5; }
#three-sensor-gauge-link[hidden], #rider-comparison [hidden] { display:none; }
.rider-view #clock-overlay { display: none; }
#canvas-wrapper:has(.rider-view) #turn-marker-panel { display: none !important; }
#rider-comparison { max-height: calc(100% - 150px); overflow-y: auto; }
#rider-preview-controls { margin-top: 8px; }
#rider-preview-controls input[type="range"] { width: 100%; accent-color: #60a5fa; cursor: ew-resize; }
#rider-preview-controls summary { cursor: pointer; font-weight: 650; }
#rider-preview-controls .stance-axis > span { display: flex; justify-content: space-between; gap: 12px; }
#rider-preview-controls output { font: 700 17px ui-monospace, monospace; color: #fff; }
#rider-preview-controls > small { margin-top: 8px; }
#rider-preview-controls .arm-stance-controls { margin-top: 12px; padding-top: 10px; border-top: 1px solid #50617b; }
#rider-preview-controls .arm-stance-controls > button { margin-top: 10px; }
#rider-preview-controls .stance-actions { display: flex; gap: 8px; margin: 12px 0 8px; }
#rider-preview-controls button { padding: 8px 10px; border: 1px solid #7087a7; border-radius: 6px; background: #203853; color: #fff; cursor: pointer; }
#rider-comparison:has(#rider-preview-controls[open]) { width: min(330px, 45%); }
#rider-comparison:has(#rider-preview-controls[open]) > .rider-axis-values { display: none; }
#rider-comparison:has(#rider-direction-details[open]) { width: min(340px, 45%); }
#rider-direction-details { margin-top: 12px; }
#rider-direction-details summary { cursor: pointer; font-weight: 600; }
#rider-direction-details p { margin: 8px 0; font-size: 12px; overflow-wrap: anywhere; }
#rider-direction-details select, #rider-direction-details input[type="number"] {
  width: 100%; box-sizing: border-box; min-height: 32px; border: 1px solid #63758f;
  border-radius: 5px; background: #142235; color: #fff; padding: 4px 6px;
}
#rider-direction-details button { margin-top: 6px; padding: 7px; border-radius: 5px; cursor: pointer; }
#direction-quality { padding: 7px; background: #223349; color: #ffd58c; }
#direction-form { margin-top: 12px; padding-top: 10px; border-top: 1px solid #52617a; }
#direction-message[data-error="true"] { color: #ffb4a8; }

#motion-sequence-panel { margin: 8px 0; border-top: 1px solid #526178; padding-top: 6px; }
#motion-sequence-panel summary { cursor: pointer; }
#motion-event-list button {
  border: 1px solid #526178; border-radius: 4px; padding: 4px 6px;
  background: #24364a; color: #e4efff; font: inherit; text-align: left; cursor: pointer;
}
#motion-event-list button:hover, #motion-event-list button:focus-visible { background: #355474; }

.sensor-health-cell.paused, .health-swatch.paused { background: #64748b; }

/* Snow-readable overlay: labels and tabular values share an opaque dark plate. */
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] {
  background: rgba(8, 17, 29, .92); border: 1px solid rgba(255,255,255,.5);
  border-radius: 12px; box-shadow: 0 2px 10px #0006; overflow: hidden;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; color: #fff;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-label {
  position: absolute; top: 9px; left: 8px; right: 8px; width:auto; height:auto;
  display: flex; justify-content: center; align-items:center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #bceaff;
  transform:none; text-shadow:none; line-height:1.2;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-readout strong {
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.04em; color:#fff; text-shadow:0 1px 2px #000; top:55%;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-readout small {
  font-size:11px; font-weight:700; color:#d7e7f5; top:auto; bottom:8px;
}
#view-replay.active.has-clip .video-gauge-mirror[data-body3d="true"] { background:#111c2ded; }
#view-replay.active.has-clip .video-gauge-mirror[data-body3d="true"] .video-gauge-mirror-label { font-size:10px; }
#view-replay.active.has-clip .video-gauge-mirror[data-body3d="true"] .video-gauge-mirror-readout strong { font-size:12px; }

#view-replay #three-gauge-overlay .three-gauge-mirror[data-source-kind="number"] { background:rgba(8,17,29,.92); border-color:#ffffff80; }
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-number-icon {
  position:static; display:inline; width:auto; height:auto; transform:none; font-size:11px; line-height:1;
}
#rider-reference-set, #rider-reference-reset {
  background:#1e293b; color:#e2e8f0; border:1px solid #64748b; border-radius:6px;
  padding:7px 9px; font:600 11px system-ui; cursor:pointer; margin:3px 0; text-align:left;
}
#rider-reference-status { display:block; color:#bae6fd; margin:5px 0; }

/* One frosted-glass surface for board, body and numeric overlays in both panes. */
#view-replay.active.has-clip .video-gauge-mirror[data-metric],
#view-replay #three-gauge-overlay .three-gauge-mirror[data-metric] {
  background:linear-gradient(135deg, #ffffff26, #ffffff08), rgba(24,36,48,.12);
  border:1px solid #ffffff70; border-radius:12px;
  box-shadow:inset 0 1px 0 #ffffff50, 0 2px 8px #0002;
  backdrop-filter:blur(10px) saturate(115%); -webkit-backdrop-filter:blur(10px) saturate(115%);
  overflow:hidden; opacity:1;
}

#view-replay.active.has-clip .video-gauge-mirror[data-metric] .video-gauge-mirror-label,
#view-replay.active.has-clip .video-gauge-mirror[data-metric] .video-gauge-mirror-readout,
#view-replay.active.has-clip .video-gauge-mirror[data-metric] .video-gauge-mirror-readout strong,
#view-replay.active.has-clip .video-gauge-mirror[data-metric] .video-gauge-mirror-readout small,
#view-replay #three-gauge-overlay .three-gauge-mirror[data-metric] .video-gauge-mirror-label,
#view-replay #three-gauge-overlay .three-gauge-mirror[data-metric] .video-gauge-mirror-readout {
  color:#fff; text-shadow:0 1px 2px #000e, 0 2px 6px #0009;
}
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-readout strong {
  -webkit-text-stroke:1px #172331b3; paint-order:stroke fill;
}

/* Rider body evidence: a fused sensor pose is the only solid rider; models read as models. */
#rider-body-evidence { display: block; font-weight: 700; letter-spacing: .04em; color: #f87171; }
#rider-body-evidence[data-tier="measured"] { color: #34d399; }
#rider-body-evidence[data-tier="estimated"] { color: #fbbf24; }
#rider-body-evidence[data-tier="unavailable"] { color: #f87171; }
/* Playback frame timing (p50 / p95 / stalls) beside the stream-health strip. */
.sensor-health-perf { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; color: #9ca3af; }

/* Turn composites panel (batch 1) — lives at the top of the Report tab */
.tc-card { gap: 14px; }
.tc-card .fc-header { flex-wrap: wrap; gap: 8px 16px; }
.tc-card .fc-header > div:first-child { flex: 1 1 420px; min-width: 0; }
.tc-counts { font-size: 11px; color: var(--text2); white-space: nowrap; text-align: right; line-height: 1.5; }
.tc-graphs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tc-graphs figure { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tc-graphs figcaption { font-size: 11px; color: var(--text2); }
.tc-graphs canvas { width: 100%; display: block; background: var(--bg2); border-radius: 6px; }
.tc-table-wrap { overflow-x: auto; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tc-table th { text-align: left; font-weight: 500; color: var(--text2); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tc-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text1); }
.tc-table td.tc-num { text-align: right; white-space: nowrap; }
.tc-table .tc-sub, .tc-table .tc-iqr, .tc-table .tc-n { display: block; font-size: 10px; color: var(--text2); }
.tc-table .tc-muted { color: var(--text2); }
.tc-table .tc-gap-real b { color: var(--accent); }
.tc-table .tc-gap-noise b { color: var(--text2); }
.tc-perturn tbody tr { cursor: pointer; }
.tc-perturn tbody tr:hover { background: var(--bg2); }
.tc-perturn tr.tc-flagged td { opacity: 0.55; }
.tc-flags { font-size: 10px; color: var(--text2); }
.tc-details summary { cursor: pointer; font-size: 12px; color: var(--text2); }
@media (max-width: 720px) { .tc-graphs { grid-template-columns: 1fr; } }

.tc-guide { font-size: 11.5px; color: var(--text1); }
.tc-guide summary { cursor: pointer; color: var(--accent); font-size: 11px; }
.tc-guide p { margin: 4px 0; line-height: 1.45; }
.tc-guide .tc-good b { color: #22c55e; }
.tc-guide .tc-bad b { color: #f59e0b; }
.tc-guide .tc-caveat { color: var(--text2); font-size: 10.5px; }
.tc-guide-top { background: var(--bg2); border-radius: 8px; padding: 8px 12px; }

/* Turn composites organizer (v2) */
.tc-bucketbar { background: var(--bg2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; }
.tc-bucket-title { color: var(--text1); }
.tc-bucket-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tc-bucket-label { min-width: 88px; color: var(--text2); font-size: 11px; }
.tc-bchip { font-size: 11px; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg1); color: var(--text1); cursor: pointer; }
.tc-bchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tc-glance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.tc-glance { text-align: left; background: var(--bg1); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; color: var(--text1); display: flex; flex-direction: column; gap: 6px; font: inherit; }
.tc-glance:hover, .tc-glance:focus-visible { border-color: var(--accent); outline: none; }
.tc-glance-title { font-size: 13px; font-weight: 600; color: var(--text0); }
.tc-glance-blurb { font-size: 11px; color: var(--text2); }
.tc-glance-line { font-size: 11.5px; line-height: 1.4; }
.tc-glance-open { font-size: 11px; color: var(--accent); margin-top: auto; }
.tc-family-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
.tc-ftab { font-size: 12px; padding: 5px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg1); color: var(--text1); cursor: pointer; }
.tc-ftab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tc-family { display: flex; flex-direction: column; gap: 12px; }
.tc-family-head h3 { margin: 0 0 2px 0; font-size: 15px; color: var(--text0); }
.tc-family-head span { font-size: 11.5px; }
.tc-mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tc-mcard { background: var(--bg2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.tc-mcard-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tc-mcard-title { font-weight: 600; color: var(--text0); }
.tc-mcard-reg { font-size: 10px; color: var(--text2); white-space: nowrap; }
.tc-mcard-vals { font-variant-numeric: tabular-nums; line-height: 1.6; color: var(--text1); }
.tc-mcard-vals .tc-iqr { font-size: 10.5px; color: var(--text2); }
.tc-heel { color: var(--heel); font-size: 11px; display: inline-block; width: 30px; }
.tc-toe { color: var(--toe); font-size: 11px; display: inline-block; width: 30px; }
.tc-mcard-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 10px; background: var(--bg3); color: var(--text1); }
.tc-chip-real { background: rgba(37,99,235,0.18); color: var(--accent); font-weight: 600; }
.tc-chip-good { background: rgba(34,197,94,0.18); color: #16a34a; }
.tc-chip-warn { background: rgba(245,158,11,0.18); color: #d97706; }
.tc-chip-muted { color: var(--text2); }
.tc-charts-toggle > summary, .tc-details > summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.tc-charts-toggle .tc-graphs { margin-top: 10px; }
.tc-perturn tr.tc-outside td { opacity: 0.45; }

.tc-family[hidden] { display: none; }

/* Turn composites organizer (v3): side rail + chart-first main */
.tc-card { padding: 12px 14px; }
.tc-topbar { display: flex; align-items: center; gap: 12px; }
.tc-topbar .fc-title { flex: 0 0 auto; }
.tc-topbar-meta { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-rail-toggle { font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text1); cursor: pointer; }
.tc-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.tc-rail-closed .tc-layout { grid-template-columns: minmax(0, 1fr); }
.tc-rail-closed .tc-rail { display: none; }
.tc-rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; }
.tc-side-block { background: var(--bg2); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; color: var(--text1); }
.tc-side-block > summary { cursor: pointer; font-size: 11.5px; color: var(--text0); }
.tc-side-block p { margin: 6px 0; line-height: 1.45; font-size: 11px; }
.tc-nav { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 6px 8px; margin: 2px 0; border-radius: 6px; border: 0; background: transparent; color: var(--text1); font: inherit; font-size: 12.5px; cursor: pointer; }
.tc-nav:hover { background: var(--bg3); }
.tc-nav.on { background: var(--accent); color: #fff; }
.tc-nav-badge { font-size: 10px; background: rgba(255,255,255,0.25); border-radius: 9px; padding: 1px 6px; }
.tc-nav:not(.on) .tc-nav-badge { background: var(--accent); color: #fff; }
.tc-bucketbar .tc-bucket-row { flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 6px; }
.tc-bucket-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tc-bchip { padding: 2px 8px; font-size: 10.5px; }
.tc-small { font-size: 10.5px; }
.tc-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tc-family canvas { width:100%!important;max-width:100%; }
.tc-main .tc-graphs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tc-main .tc-graphs .tc-fig-wide { grid-column: 1 / -1; }
.tc-main .tc-graphs figcaption { font-size: 12px; color: var(--text1); font-weight: 500; }
.tc-numbers > summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.tc-numbers .tc-mcards { margin-top: 8px; }
@media (max-width: 900px) { .tc-layout { grid-template-columns: minmax(0, 1fr); } .tc-rail { position: static; max-height: none; } .tc-main .tc-graphs { grid-template-columns: 1fr; } }

/* Score block + drill-down (redesign 2026-09-11) */
.rs-card { background: var(--bg1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.rs-card-title { font-size: 13px; font-weight: 600; color: var(--text0); letter-spacing: 0.03em; }
.rs-top { display: flex; gap: 16px; align-items: center; }
.rs-ring { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.rs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rs-ring .ring-bg { stroke: var(--bg3); stroke-width: 16; fill: none; }
.rs-ring .ring-fg { stroke-width: 16; fill: none; stroke-linecap: round; }
.rs-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.rs-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs-tier { font-size: 22px; font-weight: 700; color: var(--text0); }
.rs-overall { font-size: 12px; font-weight: 400; color: var(--text2); margin-left: 6px; }
.rs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-chips .scope-chip { font-size: 10.5px; color: var(--text2); background: var(--bg3); padding: 2px 8px; border-radius: 10px; }
.rs-chips .rs-heuristic { color: #b45309; background: rgba(245,158,11,0.15); }
.rs-weakest { font-size: 12px; color: var(--text1); border-left: 3px solid var(--accent); padding: 4px 10px; background: var(--bg2); border-radius: 4px; }
.rs-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rs-col { background: var(--bg2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs-col.locked { opacity: 0.6; }
.rs-col-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--text0); }
.rs-col-head b { font-size: 20px; }
.rs-col-sub { font-size: 10.5px; color: var(--text2); }
.fc-pill.locked .pill-dot { background: var(--text2); }
.rs-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rs-chart-grid figure { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-chart-grid figcaption { font-size: 11.5px; color: var(--text1); }
.rs-chart-grid canvas { display: block; width: 100%; height: auto; background: rgba(7,12,22,0.92); border-radius: 6px; }
.rs-chart-stats { font-size: 10.5px; color: var(--text2); line-height: 1.5; }
.rs-drill-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rs-drill-controls { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--text2); }
.rs-drill-controls select { margin-left: 4px; font-size: 11.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text1); }
.drilldown.rs-card table { width: 100%; }
.rs-group-row td { background: var(--bg2); font-weight: 600; color: var(--text0); font-size: 11.5px; padding: 6px 8px; }
.rs-drill-count { font-size: 11px; }
@media (max-width: 900px) { .rs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-chart-grid { grid-template-columns: 1fr; } }

/* Composite tiles: one measure = numbers + its own chart */
.tc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: start; }
.tc-tile { background: var(--bg2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tc-tile-wide { grid-column: 1 / -1; }
.tc-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
summary.tc-tile-head { cursor: pointer; list-style: none; user-select: none; }
summary.tc-tile-head::-webkit-details-marker { display: none; }
summary.tc-tile-head .tc-tile-title::before { content: '▸'; display: inline-block; width: 1em; color: var(--text2); transition: transform 120ms; }
details.tc-tile[open] > summary.tc-tile-head .tc-tile-title::before { transform: rotate(90deg); }
summary.tc-tile-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
details.tc-tile[open] { gap: 6px; }
.tc-how-i { color: var(--text2); font-weight: 400; font-size: 11px; cursor: help; }
.tc-how { margin: 0; font-size: 11px; line-height: 1.45; color: var(--text1); }
.tc-how b { color: var(--text0); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { summary.tc-tile-head .tc-tile-title::before { transition: none; } }
.tc-tile-title { font-size: 12.5px; font-weight: 600; color: var(--text0); }
.tc-tile-vals { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text1); white-space: nowrap; }
.tc-tile-vals .tc-heel, .tc-tile-vals .tc-toe { width: auto; margin-left: 6px; }
.tc-tile canvas { width: 100%; display: block; }
.tc-tile-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.tc-tile-foot .tc-guide { flex-basis: 100%; }
.tc-tip { position: fixed; z-index: 9999; pointer-events: none; background: var(--bg1); color: var(--text0); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 11.5px; line-height: 1.45; box-shadow: 0 4px 14px rgba(0,0,0,0.25); max-width: 260px; }
.tc-tip-hint { color: var(--text2); font-size: 10.5px; margin-top: 2px; }
@media (max-width: 900px) { .tc-tiles { grid-template-columns: 1fr; } }

/* Rider profile */
.tc-nav-profile { border: 1px solid var(--accent); margin-bottom: 6px; }
.tc-scope { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.tc-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text2); margin-top: 6px; }
.tc-field select, .tc-field input { font-size: 11.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg1); color: var(--text1); }
.tc-field-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.tc-field-row input, .tc-field-row select { font-size: 11px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg1); color: var(--text1); min-width: 0; }
.tc-laps { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; margin-top: 6px; }
.tc-lap { text-align: left; font: inherit; font-size: 11px; padding: 4px 6px; border-radius: 5px; border: 0; background: transparent; color: var(--text1); cursor: pointer; }
.tc-lap:hover { background: var(--bg3); }
.tc-lap.on { background: var(--accent); color: #fff; }
.tc-lap.pending { color: var(--text2); font-style: italic; }
.tc-tile-sub { font-size: 10px; color: var(--text2); margin-top: 2px; }
.tc-profile-family h3 { margin: 14px 0 6px; font-size: 14px; color: var(--text0); }
details.rs-drill-fold > summary { cursor: pointer; list-style: none; }
details.rs-drill-fold > summary::-webkit-details-marker { display: none; }
details.rs-drill-fold > summary::before { content: '▸ '; color: var(--text2); }
details.rs-drill-fold[open] > summary::before { content: '▾ '; }
details.rs-drill-fold > summary .tc-muted { font-weight: 400; font-size: 11px; }