/* Spotter console. Placeholder look: every colour and size lives in :root so
   the RaceLab-inspired restyle only has to change these tokens.

   Sized for every iPhone and iPad, from 320px wide up: tiles and numbers scale with
   their own width, the page never scrolls sideways, and the notch, Dynamic Island and
   home bar are kept clear. Wide screens, and phones that open out across two screens,
   show the laps beside the live numbers. */
:root {
  color-scheme: dark;
  --bg: #0d0f12;
  --panel: #161a20;
  --panel-edge: #232932;
  --text: #e8ebf0;
  --muted: #8a93a1;
  --ok: #2fbf71;
  --tight: #f2b134;
  --short: #ef4b4b;
  --best: #b46cff;      /* purple: best of the session */
  --throttle: #2fbf71;
  --brake: #ef4b4b;
  --accent: #3d8bfd;
  --speed: #3d8bfd;     /* telemetry lines; the best lap behind them is --best */
  --rpm: #f59f45;
  --gear: #e8ebf0;
  --trace-bg: #11151a;
  --radius: 10px;
  --gap: 12px;
  --pad: 16px;          /* page edge, before the notch and home bar are added */
  --tile-pad: 14px 16px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
  --edge-left: max(var(--pad), env(safe-area-inset-left));
  --edge-right: max(var(--pad), env(safe-area-inset-right));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 var(--font);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
main { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap);
  padding: var(--gap) var(--edge-right) max(32px, env(safe-area-inset-bottom)) var(--edge-left); }
.now { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.sub { color: var(--muted); font-size: 13px; }
.sub[data-tone="warn"] { color: var(--tight); }

/* top bar: stays put, so "Live" or "No data" is always in sight */
.topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 8px var(--gap); background: var(--panel); border-bottom: 1px solid var(--panel-edge);
  padding: max(10px, env(safe-area-inset-top)) var(--edge-right) 10px var(--edge-left); }
.who { display: flex; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; min-width: 0; }
.car { font-weight: 700; }
.driver { font-weight: 600; }
.track { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.pill { flex: none; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--panel-edge); }
.pill[data-tone="ok"] { background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ok); }
.pill[data-tone="warn"] { background: color-mix(in srgb, var(--tight) 25%, transparent); color: var(--tight); }
.pill[data-tone="bad"] { background: color-mix(in srgb, var(--short) 25%, transparent); color: var(--short); }

/* glance tiles: the big numbers fill their tile, whatever its width */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tile { container-type: inline-size; background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: var(--radius); padding: var(--tile-pad); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.big { font-size: 38px; font-size: clamp(24px, 21cqi, 46px); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.big.mono { font-size: clamp(21px, 17.5cqi, 44px); }   /* "10:01.234" still fits */
.fuel { border-width: 2px; }
.fuel[data-verdict="ok"] { border-color: var(--ok); }
.fuel[data-verdict="ok"] .label, .fuel[data-verdict="ok"] .big { color: var(--ok); }
.fuel[data-verdict="tight"] { border-color: var(--tight); }
.fuel[data-verdict="tight"] .label, .fuel[data-verdict="tight"] .big { color: var(--tight); }
.fuel[data-verdict="short"] { border-color: var(--short); background: color-mix(in srgb, var(--short) 12%, var(--panel)); }
.fuel[data-verdict="short"] .label, .fuel[data-verdict="short"] .big { color: var(--short); }
.badge { white-space: nowrap; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--tight); color: #000; font-size: 11px; }
.track-bar { height: 6px; background: var(--panel-edge); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.track-bar span { display: block; height: 100%; width: 0; background: var(--accent); }

.explain { margin: 0; padding: 12px 16px; background: var(--panel); border-left: 4px solid var(--accent);
  border-radius: var(--radius); font-size: 17px; min-height: 1.4em; }
.explain:empty { display: none; }

/* live inputs */
.inputs { display: grid; grid-template-columns: repeat(4, auto) minmax(0, 1fr); gap: var(--gap) 28px; align-items: end;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: 12px 16px; }
.inputs > div { display: flex; flex-direction: column; min-width: 0; }
.mid { font-size: 26px; font-weight: 700; white-space: nowrap; }
.unit { color: var(--muted); font-size: 12px; }
.pedals { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.bar { height: 10px; background: var(--panel-edge); border-radius: 5px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; transition: width .1s linear; }
.throttle span { background: var(--throttle); }
.brake span { background: var(--brake); }

/* live telemetry: tall enough for five readable panels, never taller than the screen. The box sets
   the size and the canvas fills it: a canvas sized by its own pixels would grow with every redraw */
.trace { min-width: 0; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: 12px 16px; }
.trace-box { position: relative; height: clamp(320px, 46vw, 500px); }
.trace-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body[data-stale="true"] .trace canvas { opacity: .5; }

/* laps table */
.deep { min-width: 0; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: 12px 16px; }
.deep-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.deep h2, .trace h2 { margin: 0 0 8px; font-size: 16px; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
th { text-align: right; color: var(--muted); font: 600 12px var(--font); letter-spacing: .06em; padding: 6px 8px;
  border-bottom: 1px solid var(--panel-edge); background: var(--panel); }
td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--panel-edge); white-space: nowrap; }
th:last-child, td:last-child { text-align: left; font-family: var(--font); }
td.best { color: var(--best); font-weight: 700; }
tr[data-status="off_track"] td:last-child { color: var(--tight); }
tr[data-status="invalid"] { opacity: .45; }
tr[data-status="out_lap"] td, tr[data-status="in_lap"] td { color: var(--muted); }

/* stale data: dim the numbers so nobody reads old fuel as live */
body[data-stale="true"] main .big, body[data-stale="true"] main .mid { opacity: .4; }

/* connect form. Inputs at 16px, or iPhones zoom in on every tap */
.connect { width: min(380px, 100% - var(--pad) * 2); margin: 48px auto; display: grid; gap: 12px; background: var(--panel);
  border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: 20px; }
.connect[hidden], .connect [hidden] { display: none; }
.connect .fields { display: grid; gap: 12px; }
.connect h1 { margin: 0; font-size: 20px; }
.connect label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.connect input, .connect select { min-height: 44px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--panel-edge);
  background: var(--bg); color: var(--text); font: 16px var(--font); }
.connect button { min-height: 44px; padding: 9px; border: 0; border-radius: 6px; background: var(--accent); color: #fff;
  font: 600 16px var(--font); cursor: pointer; }
.connect button.quiet { background: none; color: var(--muted); font-weight: 400; }
.error { color: var(--short); margin: 0; min-height: 1em; }
.connect:not([hidden]) ~ main { display: none; }

/* iPad portrait, iPad in Split View, big phones on their side */
@media (max-width: 820px) {
  .inputs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
  .pedals { grid-column: 1 / -1; }
}

/* phones upright */
@media (max-width: 600px) {
  :root { --gap: 10px; --pad: 12px; --tile-pad: 12px; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explain { font-size: 15px; padding: 10px 12px; }
  .inputs, .deep, .trace { padding: 10px 12px; }
  .inputs { column-gap: 10px; }
  .inputs .label { letter-spacing: .03em; }   /* "INCIDENTS" in a quarter of a small phone */
  .mid { font-size: 22px; }
  table { font-size: 13px; }
  th, td { padding: 5px 6px; }
}

/* the sector columns don't fit beside the lap time on a narrow phone: turn it sideways for them */
@media (max-width: 519px) {
  .sector { display: none; }
}

/* the smallest iPhones and the narrowest Split View */
@media (max-width: 359px) {
  :root { --gap: 8px; --pad: 10px; --tile-pad: 10px; }
  .topbar { flex-wrap: wrap; }
  .inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phones on their side: little height, so everything is tighter */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --gap: 8px; --tile-pad: 10px 12px; }
  .topbar { position: static; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .explain { font-size: 15px; padding: 8px 12px; }
  .inputs, .trace { padding: 8px 12px; }
  .mid { font-size: 22px; }
  .trace-box { height: max(240px, 100dvh - 64px); }   /* scrolled to, it fills the screen */
}

/* iPads on their side and computers: the laps beside the live numbers, as tall as they are and
   scrolling on their own, and the telemetry across the whole width below, filling what's left of the screen */
@media (min-width: 1080px) {
  body { display: flex; flex-direction: column; min-height: 100dvh; }
  main { flex: 1; width: 100%; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(340px, 1fr); grid-template-areas: "now deep" "trace trace"; }
  .now { grid-area: now; }
  .deep { grid-area: deep; contain: size; overflow-y: auto; overscroll-behavior: contain; }
  .trace { grid-area: trace; display: flex; flex-direction: column; }
  .trace-box { flex: 1; height: auto; min-height: 0; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  thead th { position: sticky; top: 0; }
  th, td { padding: 5px 6px; }
}

/* 11-inch and mini iPads on their side: a little less height, so a little smaller, and it all still fits */
@media (min-width: 1080px) and (max-height: 900px) {
  :root { --gap: 10px; --tile-pad: 10px 14px; }
  main { grid-template-rows: auto minmax(290px, 1fr); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .big { font-size: clamp(24px, 17cqi, 36px); }
  .big.mono { font-size: clamp(21px, 15cqi, 34px); }
  .explain { font-size: 15px; padding: 8px 14px; }
  .inputs, .trace { padding: 8px 14px; }
  .mid { font-size: 22px; }
}

/* phones that open out across two screens: the live numbers on one, the telemetry and laps on the
   other, clear of the hinge */
@media (horizontal-viewport-segments: 2) {
  main { max-width: none; align-items: start; padding-left: var(--pad); padding-right: var(--pad);
    grid-template-columns: calc(env(viewport-segment-width 0 0) - var(--pad) * 2) calc(env(viewport-segment-width 1 0) - var(--pad) * 2);
    grid-template-areas: "now trace" "now deep";
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + var(--pad) * 2); }
  .now { grid-area: now; }
  .trace { grid-area: trace; }
  .deep { grid-area: deep; contain: none; max-height: 40dvh; overflow-y: auto; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inputs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pedals { grid-column: 1 / -1; }
  .sector { display: revert; }
  .trace-box { height: clamp(260px, 50dvh, 460px); }
}