/* De gastpagina: "Volg je piloot" en het timingbord in één bestand, want het is
   één pagina met twee bladen. Eerst voor de telefoon, dan wat een breed scherm
   erbij krijgt. De indeling en het waarom staan in volg.html. */
@font-face{font-family:"Barlow Condensed";font-weight:500;src:url("/fonts/barlow-condensed-500.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;src:url("/fonts/barlow-condensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;src:url("/fonts/barlow-condensed-700.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;src:url("/fonts/barlow-condensed-800.woff2") format("woff2")}

:root{--ink:#f4f7fb;--muted:#9fb0c4;--dim:#5d6a7c;--accent:#f96007;--ground:#0b0f15;--panel:#131a24;
  --line:rgba(255,255,255,.08);--purple:#a855f7;--green:#22c55e;--yellow:#eab308;--blue:#1d4ed8;--amber:#f59e0b;
  /* ---------- Waar de telefoon zelf al staat ----------
     De pagina draait met `viewport-fit=cover`, dus ze loopt tot in de hoeken:
     onder de inkeping van een iPhone, achter de statusbalk en achter het
     streepje onderaan. Zonder marge staat de kop daar half onder en is de
     voet niet aan te tikken. `env()` geeft nul op een toestel zonder inkeping,
     dus dit kost een gewone telefoon niets. Als variabele, zodat een test ze
     kan overschrijven en de indeling met een echte inkeping na te meten is. */
  --sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);
  /* De kleinste maat waarop een duim niet mist. Eén getal, zodat elke knop op
     deze pagina dezelfde bodem heeft. */
  --duim:44px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ground)}
/* `100dvh` en niet `100vh`: op een telefoon telt `vh` de adresbalk mee, dus
   stond de pagina altijd een balkhoogte te ver door te scrollen -- ook op de
   lijst, waar niets te scrollen viel. De `100vh` blijft als val voor een
   browser die `dvh` niet kent. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;color:var(--ink);
  font:600 17px/1.25 "Barlow Condensed","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(ellipse at 80% 0%,rgba(249,96,7,.16),transparent 55%),var(--ground);
  /* Een tik op een knop hoort niet in te zoomen, en het grijze blok dat Android
     over een aangetikte knop legt verbergt net de kleur die zegt wat aanstaat.
     `overscroll-behavior` houdt het doorvegen binnen de lijst die scrolt, zodat
     de pagina er niet achteraan veert of ververst. */
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
/* Wie een rij aantikt om mee te kijken, wil geen tekst selecteren: op een
   telefoon geeft een tik die iets langer duurt anders een blauwe selectie met
   een vergrootglas in plaats van beeld. */
button,.blad,.band{-webkit-user-select:none;user-select:none}
[hidden]{display:none!important}

/* ---------- Kop: waar, welke sessie, hoe lang nog, en welk blad ---------- */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  padding:calc(12px + var(--sa-t)) calc(16px + var(--sa-r)) 8px calc(16px + var(--sa-l))}
.isc{width:52px;height:52px;flex:0 0 auto}
.titles{min-width:0;flex:1 1 auto}
h1{margin:0;font-size:clamp(22px,2.6vw,42px);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.where{display:block;color:var(--muted);font-size:clamp(14px,1.3vw,22px);font-weight:500;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klok{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.sessie{color:var(--accent);font-size:clamp(13px,1.2vw,20px);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.rest{font-size:clamp(24px,3vw,52px);font-weight:800;font-variant-numeric:tabular-nums}

/* De keuze tussen de twee bladen. Op een telefoon een eigen rij van duimbrede
   knoppen (44 px hoog, de maat waarop een vinger niet mist); op een breed scherm
   twee kleine pillen naast de klok, zodat het bord op de tv geen regel verliest. */
.bladen{order:9;flex:1 0 100%;display:flex;gap:8px}
.blad{flex:1;min-height:var(--duim);padding:0 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--muted);font:inherit;font-size:17px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.blad:hover,.blad:focus-visible{color:var(--ink);border-color:var(--accent);outline:none}
.blad[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#170b02;font-weight:800}

/* ---------- De twee bladen ----------
   Op een telefoon staat er precies één kolom op het scherm; welke, dat zegt
   `data-blad` op de body. Verder naar onderen staat wat een breed scherm
   ermee doet. */
.dek{flex:1;min-height:0;width:100%;max-width:1900px;margin:0 auto;display:flex;flex-direction:column}
.kolom{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
body[data-blad="volg"] .bord-kolom{display:none}
body[data-blad="stand"] .volg-kolom{display:none}

/* ---------- Blad 1: de piloten ---------- */
/* Een liggende telefoon heeft de inkeping links of rechts; zonder deze marge
   valt de eerste letter van een naam erachter. */
.lijst{flex:1;width:100%;max-width:720px;margin:0 auto;
  padding:0 calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l))}
.intro{margin:4px 0 14px;color:var(--muted);font-weight:500}
.piloten{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.piloten button{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:6px;
  background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  border-left:4px solid transparent}
.piloten button:hover,.piloten button:focus-visible{border-left-color:var(--accent);outline:none;background:#18212e}
.piloten button:disabled{cursor:default;opacity:.5}
.piloten .pos,.buurt-lijst .pos{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:34px;height:32px;padding:0 6px;border-radius:4px;background:rgba(255,255,255,.1);
  font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.piloten li:first-child .pos.p1{background:var(--accent);color:#170b02}
.piloten .naam,.buurt-lijst .naam{flex:1;min-width:0;font-size:22px;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piloten .naam .voor,.buurt-lijst .naam .voor{font-weight:500;color:var(--muted);text-transform:none;margin-right:6px}
.status{flex:0 0 auto;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.status.live{color:var(--accent)}
.status.live::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;
  background:var(--accent);vertical-align:1px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.leeg{color:var(--muted);font-weight:500;padding:24px 0}

/* ---------- Blad 1: kijken ---------- */
.kijk{flex:1;display:flex;flex-direction:column;width:100%;max-width:1600px;margin:0 auto;
  padding:0 calc(12px + var(--sa-r)) calc(12px + var(--sa-b)) calc(12px + var(--sa-l))}
.kijk-kop{display:flex;align-items:center;gap:12px;padding:6px 4px 10px;flex-wrap:wrap}
/* "Alle piloten" is de enige weg terug uit het beeld en was 33 px hoog: net te
   laag om met een duim te raken. Nu een echte knop met een rand, op de duimmaat
   -- de negatieve marge links houdt de tekst op dezelfde plaats als vroeger,
   zodat de vergroting geen regel kost. */
.terug{display:inline-flex;align-items:center;min-height:var(--duim);margin-left:-10px;
  border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:17px;
  cursor:pointer;padding:0 14px}
.terug:hover,.terug:focus-visible{color:var(--ink);background:rgba(255,255,255,.07);outline:none}
/* Camera kiezen: duimgroot, en het actieve beeld draagt de huiskleur. */
.beelden{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.beelden button{min-height:var(--duim);padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--muted);font:inherit;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer}
.beelden button:hover,.beelden button:focus-visible{color:var(--ink);border-color:var(--accent);outline:none}
.beelden button.aan{background:var(--accent);border-color:var(--accent);color:#170b02;font-weight:800}
.scherm{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;background:#000;border-radius:6px;overflow:hidden;
  border:2px solid rgba(249,96,7,.6)}
.scherm iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Het merk rechtsboven, zoals in de uitzending. Dezelfde maten (1 cqw hier =
   1 vw daar), maar met een bodem: op een telefoon is het kader nog geen 400 px
   breed en zou 1,08 cqw vier pixels tekst geven. */
.merk{position:absolute;top:1.8cqw;right:1.8cqw;display:flex;align-items:center;gap:max(5px,.7cqw);
  padding:max(3px,.45cqw) max(7px,1cqw) max(3px,.45cqw) max(3px,.45cqw);border-radius:.35cqw;
  pointer-events:none;background:linear-gradient(180deg,rgba(24,31,43,.94),rgba(11,15,22,.94));
  box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.45)}
.merk-mark{width:max(22px,3.1cqw);height:max(22px,3.1cqw);display:block}
.merk-tekst{display:flex;flex-direction:column;gap:.18cqw}
.merk-site{font-size:max(9px,1.08cqw);font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1}
.merk-powered{display:flex;align-items:center;gap:max(2px,.35cqw);font-size:max(6px,.58cqw);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1}
.merk-powered img{height:max(5px,.6cqw);display:block;opacity:.9}

/* ---------- De HUD over het beeld ----------
   Eén maat, `--hud`, voor alles wat over het beeld staat. Hij groeit met de
   BREEDTE VAN HET BEELD (cqw) en niet met de videostroom: wat de sim zelf in
   het beeld brandt is op 1920 px getekend en is op een telefoon van 390 px
   onleesbaar klein. De bodem van 11 px is wat op zo'n telefoon nog te lezen is,
   het plafond van 19 px houdt het op een tv een HUD en geen aanplakbiljet.
   `--hud` staat op `.lower` en niet op `.scherm`: een element is zijn eigen
   container niet, dus daar zou cqw naar een voorouder kijken die er niet is. */
.lower{--hud:clamp(11px,1.5cqw,19px);position:absolute;left:1.8cqw;right:1.8cqw;bottom:2.2cqw;
  display:flex;align-items:stretch;gap:calc(var(--hud)*.6);pointer-events:none;font-size:var(--hud)}
.plaat{position:relative;display:flex;align-items:stretch;min-width:0;min-height:calc(var(--hud)*3.4);
  background:linear-gradient(180deg,rgba(24,31,43,.94),rgba(11,15,22,.94));border-radius:calc(var(--hud)*.3);
  box-shadow:0 calc(var(--hud)*.4) calc(var(--hud)*1.3) rgba(0,0,0,.45);overflow:hidden}
.positie{display:flex;align-items:center;justify-content:center;min-width:calc(var(--hud)*2.6);padding:0 calc(var(--hud)*.4);
  background:var(--accent);color:#1c0a00;font-size:calc(var(--hud)*1.9);font-weight:800}
.positie[hidden]{display:none}
.identiteit{display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hud)*.35) calc(var(--hud)*.9) calc(var(--hud)*.45) calc(var(--hud)*.8);min-width:0}
.voornaam{font-size:max(10px,calc(var(--hud)*.82));font-weight:500;color:var(--muted);letter-spacing:.04em;line-height:1}
.achternaam{font-size:calc(var(--hud)*1.7);font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail{margin-top:calc(var(--hud)*.18);font-size:max(10px,calc(var(--hud)*.78));font-weight:600;color:var(--muted);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail b{color:var(--ink);font-weight:700}

/* Sectorkleuren onderaan de naamplaat, zoals in de toren van de uitzending. */
.sectoren{position:absolute;left:0;right:0;bottom:0;display:flex;gap:calc(var(--hud)*.1);margin:0;padding:0;list-style:none}
.sectoren li{flex:1;height:calc(var(--hud)*.22);background:rgba(255,255,255,.12)}
.sectoren li.purple{background:var(--purple)}
.sectoren li.green{background:var(--green)}
.sectoren li.yellow{background:var(--yellow)}

/* Toeren, snelheid, versnelling, stuur, gas en rem: wat vroeger in de videostroom
   gebrand zat. Hier is het scherp op elk scherm, want het wordt door de browser
   getekend op de maat van dít toestel. */
.telemetry{flex:none;display:flex;flex-direction:column;margin-left:auto;
  background:linear-gradient(180deg,rgba(24,31,43,.94),rgba(11,15,22,.94));border-radius:calc(var(--hud)*.3);
  box-shadow:0 calc(var(--hud)*.4) calc(var(--hud)*1.3) rgba(0,0,0,.45);overflow:hidden}
.rev{height:calc(var(--hud)*.26);background:rgba(255,255,255,.08)}
.rev-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#eab308 70%,#ef4444);
  transition:width .08s linear}
.rev-fill.limit{animation:limit .12s steps(2) infinite}
@keyframes limit{50%{opacity:.35}}
.dash{flex:1;display:flex;align-items:center;gap:calc(var(--hud)*.5);padding:calc(var(--hud)*.35) calc(var(--hud)*.6)}
.meters{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--hud)*.1)}
.speed,.toeren{display:flex;align-items:baseline;gap:calc(var(--hud)*.25)}
.speed-value{font-size:calc(var(--hud)*1.75);font-weight:800;line-height:.95;font-variant-numeric:tabular-nums}
.toeren-value{font-size:max(11px,calc(var(--hud)*.95));font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
/* "km/u" en "t/min" kwamen op een telefoon op 6,4 px uit: een grijze veeg in
   plaats van een woord. Dezelfde bodem-aanpak als bij het merk hierboven. */
.unit{font-size:max(9px,calc(var(--hud)*.58));font-weight:700;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.gear{display:flex;align-items:center;justify-content:center;width:calc(var(--hud)*2);height:calc(var(--hud)*2);
  border-radius:calc(var(--hud)*.26);border:1px solid rgba(255,255,255,.18);font-size:calc(var(--hud)*1.45);font-weight:800}
.wheel{flex:none;width:calc(var(--hud)*2.4);height:calc(var(--hud)*2.4);overflow:visible;transition:transform .07s linear}
.wheel .rim{fill:none;stroke:rgba(255,255,255,.85);stroke-width:8}
.wheel .spoke{stroke:rgba(255,255,255,.85);stroke-width:8;stroke-linecap:round}
.wheel .hub{fill:rgba(255,255,255,.85)}
.wheel .mark{fill:var(--accent)}
.pedals{display:flex;gap:calc(var(--hud)*.2);height:calc(var(--hud)*2.7);margin-left:auto}
.pedal{position:relative;width:calc(var(--hud)*.85);border-radius:calc(var(--hud)*.12);background:rgba(255,255,255,.09);overflow:hidden}
.pedal::after{position:absolute;left:0;right:0;top:calc(var(--hud)*.1);text-align:center;font-size:calc(var(--hud)*.5);
  font-weight:800;color:rgba(255,255,255,.45);letter-spacing:0}
.throttle::after{content:"G"}
.brake::after{content:"R"}
.pedal-fill{position:absolute;left:0;right:0;bottom:0;height:0;transition:height .07s linear}
.throttle .pedal-fill{background:#22c55e}
.brake .pedal-fill{background:#ef4444}

.weg{position:absolute;inset:auto 0 0 0;margin:0;padding:10px 14px;background:rgba(0,0,0,.7);color:var(--muted);font-weight:500}

/* Onder het beeld: wie er vlak voor en achter rijdt, en de rondetijden. */
.onder{display:grid;gap:10px;margin-top:10px;grid-template-columns:1fr}
@media (min-width:760px){.onder{grid-template-columns:1.6fr 1fr}}
.buurt,.rondes{background:var(--panel);border-radius:6px;padding:10px 12px}
.buurt-kop{display:block;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.buurt-lijst{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.buurt-lijst li{border-radius:4px}
.buurt-lijst li.ik{background:rgba(249,96,7,.16)}
/* Elke buur is een knop naar zijn beeld; wie niet streamt blijft gewoon tekst.
   Die knop moet je met een duim kunnen raken: op 38 px mis je hem en beland je
   op de buur eronder. */
.buurt-lijst button{width:100%;display:flex;align-items:center;gap:10px;font:inherit;font-size:18px;
  min-height:var(--duim);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  padding:6px 8px;border:0;border-radius:4px;
  background:transparent;color:inherit;text-align:left;cursor:pointer}
.buurt-lijst button:hover:not(:disabled),.buurt-lijst button:focus-visible{background:rgba(255,255,255,.07);outline:none}
.buurt-lijst button:disabled{cursor:default}
.buurt-lijst .pos{min-width:28px;height:26px;font-size:15px}
.buurt-lijst .gat{margin-left:auto;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
/* De uitleg hoort bij de kop, niet als extra regel eronder: op een telefoon is
   elke regel er een die het beeld kleiner maakt. */
.buurt-kop em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:none;color:var(--dim);margin-left:8px}

/* De banden: twee bij twee, zoals je op de wagen kijkt. Per hoek drie regels:
   de temperatuur (en de kleur ernaar), de slijtagebalk, de druk en wat er af is. */
.banden{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.band{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 6px;
  padding:5px 8px;border-radius:4px;background:rgba(255,255,255,.05);
  border-left:3px solid var(--dim)}
.band.koud{border-left-color:#4aa3ff}
.band.goed{border-left-color:#35d07f}
.band.warm{border-left-color:var(--accent)}
.band.heet{border-left-color:#ff4d4f}
.band .hoek{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.band .graden{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.band .slijtage{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.band .slijtage span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s linear}
.band .druk{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.band .af{font-size:12px;font-weight:700;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.band .af.veel{color:var(--accent)}

/* Laatste, beste en het aantal ronden naast elkaar: drie getallen op één regel
   passen op 390 px en kosten maar één regel hoogte. */
.tijden{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
.tijden div{display:flex;flex-direction:column;gap:1px;min-width:0;padding:4px 8px;
  border-radius:4px;background:rgba(255,255,255,.05)}
.tijden dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tijden dd{margin:0;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Brandstof, schade en de hulpsystemen: dezelfde pillen als de cameraknoppen
   boven het beeld, zodat het paneel bij de rest van de pagina hoort. */
.wagen{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wagen .chip{display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.wagen .chip .chip-kop{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.wagen .chip.schade{border-color:rgba(255,77,79,.55);color:#ff8f90}
.wagen .chip.schade .chip-kop{color:rgba(255,143,144,.8)}
/* Het lampje: dooft en licht op met het systeem zelf. Bij TC en ABS staat er ook
   een percentage naast, want die grijpen hard of zacht in. */
.wagen .lamp{color:var(--dim)}
.wagen .lamp::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.4}
.wagen .lamp.aan{background:var(--accent);border-color:var(--accent);color:#170b02}
.wagen .lamp.aan::before{opacity:1}
.wagen .lamp.aan .chip-kop{color:rgba(23,11,2,.75)}
/* Het vinkje was 13 bij 13 px -- kleiner dan de punt van een duim. Het hele
   label is nu het raakdoel, en het vakje zelf is meegegroeid. */
.toon{display:flex;align-items:center;gap:10px;min-height:var(--duim);margin:6px 0 0;padding:0 4px;
  color:var(--muted);font-weight:500;font-size:15px;cursor:pointer}
.toon input{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}

/* ---------- Blad 2: het bord ----------
   Alles hieronder staat onder `.bord`: de stand deelt klassenamen (.pos, .naam,
   .chip) met de piloten­lijst hierboven, en zonder die grens zouden ze elkaars
   opmaak overnemen zodra beide bladen in één bestand staan.
   De kolom is een container: de stand kijkt naar HAAR EIGEN breedte en niet naar
   die van het venster. Dat moet wel, want op een breed scherm staat ze naast het
   beeld in een halve kolom -- met een vensterbrede mediaquery zou ze daar de
   zeven kolommen van een tv proberen te persen. */
.bord-kolom{container-type:inline-size}
.bord{flex:1;width:100%;margin:0 auto;
  padding:0 calc(12px + var(--sa-r)) calc(10px + var(--sa-b)) calc(12px + var(--sa-l));
  --kolommen:2.8em minmax(0,1fr) 4.4em 5.4em 5.4em 6.6em 6.6em;
  font-size:clamp(15px,min(2vh,3.4cqw),32px);
  display:flex;align-items:flex-start;gap:14px}
/* De stand krijgt wat overblijft; min-width:0 houdt lange namen binnen de kolom
   in plaats van het bord breder te maken dan het scherm. */
.stand{flex:1;min-width:0}
.veld{list-style:none;margin:0;padding:0}
.bord .rij{display:grid;grid-template-columns:var(--kolommen);align-items:center;gap:0 .55em;
  padding:.28em .5em;border-radius:.2em;background:var(--panel);
  font-variant-numeric:tabular-nums}
/* De rij ís de knop: je tikt op de naam die je ziet, niet op een knopje ernaast.
   Daardoor zit `.rij` op een <button> binnen de <li> en niet meer op de <li>
   zelf -- vandaar dat de streping en de tussenruimte nu via die li lopen.
   `font:inherit` zet ook font-variant-numeric terug op normaal, dus die moet
   hier opnieuw: zonder tabulaire cijfers dansen de rondetijden. */
.bord button.rij{width:100%;border:0;font:inherit;font-variant-numeric:tabular-nums;
  color:inherit;text-align:left}
.veld li + li{margin-top:2px}
.veld li:nth-child(even) .rij{background:#101722}
/* Wie beeld stuurt is te volgen, en dat hoort te zien te zijn vóór je tikt:
   een oranje randje en een wijzer. Wie geen sim heeft, krijgt niets extra's en
   zijn knop staat uit -- dan verdwijnt een tik niet in het niets. */
.veld li .rij.kijkbaar{cursor:pointer;box-shadow:inset 3px 0 0 rgba(249,96,7,.5)}
.veld li .rij.kijkbaar:hover,.veld li .rij.kijkbaar:focus-visible{outline:none;
  background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08))}
/* De rijder die je in de andere kolom volgt, staat hier ook aangeduid: zo hoort
   het beeld links bij de rij rechts. Staat ná .kijkbaar en met dezelfde
   zwaarte, zodat het oranje van "dit kijk je nu" wint van dat van "dit kan". */
.veld li .rij.volgend{box-shadow:inset 3px 0 0 var(--accent);background:rgba(249,96,7,.14)}
/* De uitleg bij het tikken. Klein en grijs: ze staat er één keer, boven de
   stand, en niet bij elke rij. */
.bord-tip{margin:.1em 0 .45em;color:var(--muted);font-size:.66em;font-weight:600;
  letter-spacing:.06em}

/* De kolomkop: klein, grijs, in dezelfde raster als de rijen. */
.bord .kop{background:none;padding-top:.6em;padding-bottom:.35em;border-bottom:1px solid var(--line);
  border-radius:0;color:var(--dim);font-size:.62em;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bord .kop .int,.bord .kop .gat,.bord .kop .last,.bord .kop .best{text-align:right}
body.geen-stand .bord .kop{display:none}

.bord .pos{display:flex;align-items:center;justify-content:center;height:1.5em;border-radius:.16em;
  background:rgba(255,255,255,.1);font-weight:800;font-size:.95em}
.bord .kop .pos{background:none;height:auto;font-size:inherit}
.bord .pos.p1{background:var(--accent);color:#170b02}
.bord .naam{display:flex;align-items:baseline;gap:.4em;min-width:0}
.bord .wie{min-width:0;font-size:1.05em;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bord .wie .voor{font-weight:500;color:var(--muted);text-transform:none;margin-right:.3em}
.bord .int,.bord .gat,.bord .last,.bord .best{text-align:right;white-space:nowrap;overflow:hidden}
.bord .int{font-weight:700}
.bord .gat,.bord .last{color:var(--muted);font-weight:600}
.bord .best{font-weight:700}
/* Paars is de beste ronde van de sessie, zoals op elk timingbord. */
.bord .best.paars{color:var(--purple)}

/* Sectorkleuren, zoals in de toren van de uitzending. */
.bord .sec{display:flex;gap:.12em}
/* Het opschrift is breder dan de sectorkolom en werd afgeknipt tot "SECTORE".
   Kleiner en met minder letterruimte past het wél. */
.bord .kop .sec{display:block;overflow:hidden;white-space:nowrap;font-size:.85em;letter-spacing:.06em}
.bord .pip{flex:1;height:.85em;border-radius:.06em;background:rgba(255,255,255,.1)}
.bord .pip.purple{background:var(--purple)}
.bord .pip.green{background:var(--green)}
.bord .pip.yellow{background:var(--yellow)}

/* Markeringen bij de naam: pits, uitgevallen, straf, snelste ronde. */
/* De merkjes bij de naam kwamen op een telefoon op 7,7 px uit: te klein om
   "PIT" van "FL" te onderscheiden. Een bodem van 9 px, want onder de 15 px
   basismaat van de stand schaalt .55em te ver door. */
.bord .chip{flex:none;padding:.05em .35em;border-radius:.16em;font-size:max(9px,.55em);
  font-weight:800;letter-spacing:.06em}
.bord .chip.pit{background:var(--blue)}
.bord .chip.out{background:#7f1d1d;color:#fecaca}
.bord .chip.penalty{background:var(--amber);color:#1f1300}
.bord .chip.fastest{background:var(--purple)}
.bord .rij.pits{opacity:.75}
.bord .rij.uit,.bord .rij.dsq{opacity:.45}
.bord .leeg{padding:24px 4px;font-size:18px}

/* ---------- De baankaart naast de stand ----------
   Vierkant, want de omtrek komt in een vierkant kader uit de server. De breedte
   hangt aan de hoogte van het venster: op een tv blijft de kaart naast de stand
   passen zonder de namen te verdringen. Geen kaart geleerd? Dan staat de figuur
   op hidden en neemt ze geen plaats in -- de stand loopt dan gewoon door. */
.kaart{flex:0 0 auto;width:min(30%,58vh);aspect-ratio:1;margin:0;padding:.5em;
  background:var(--panel);border:1px solid var(--line);border-radius:.3em}
.kaart svg{display:block;width:100%;height:100%;overflow:visible}
/* Een donkere rand onder de lijn houdt de baan zichtbaar waar stippen erop staan. */
.kaart-rand{fill:none;stroke:rgba(0,0,0,.55);stroke-width:5.2;stroke-linejoin:round;stroke-linecap:round}
.kaart-baan{fill:none;stroke:rgba(255,255,255,.72);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.kaart-start{fill:var(--accent)}
/* De stippen schuiven naar hun nieuwe plaats; om de twee seconden een sprong
   oogt op een groot scherm als haperen. */
.kaart-wagen{transition:transform .35s linear}
.kaart-wagen circle{fill:#dfe6ee;stroke:#0b0f15;stroke-width:.6}
.kaart-wagen text{font-size:3.4px;font-weight:800;fill:#0b0f15;text-anchor:middle;dominant-baseline:central}
/* De leider in het oranje van de huisstijl, net als zijn vakje in de stand. */
.kaart-wagen.leider circle{fill:var(--accent);stroke:#fff}
.kaart-wagen.leider text{fill:#170b02;font-size:4.2px}
/* Wie in de pits staat, doet even niet mee: gedimd en in het blauw van het PIT-merkje. */
.kaart-wagen.pits{opacity:.45}
.kaart-wagen.pits circle{fill:var(--blue)}
.kaart-wagen.pits text{fill:var(--ink)}

/* ---------- Smalle standkolom: twee regels per rijder ----------
   Zeven kolommen naast elkaar passen niet in een kolom van nog geen 760 px
   zonder dat de naam wegvalt. Daarom zakken sectoren en tijden naar een tweede
   regel, met hun eigen opschrift erbij: zo blijft élke kolom leesbaar in plaats
   van er een paar te verbergen. Een containervraag en geen mediavraag: het gaat
   om de breedte van de kolom, niet van het venster. */
@container (max-width:760px){
  .bord{font-size:16px;flex-direction:column;align-items:stretch;gap:10px}
  /* Op zijn natuurlijke hoogte, anders duwt een korte stand de kaart naar de
     onderkant van het scherm en gaapt er een gat tussen. */
  .stand{flex:0 0 auto}
  /* Naast de stand is er geen plaats meer: de kaart zakt eronder, kleiner en
     gecentreerd. Breedte in cqw, zodat er nooit iets horizontaal wegschuift. */
  .kaart{width:min(74cqw,320px);align-self:center}
  .kaart-wagen text{font-size:4px}
  .kaart-wagen.leider text{font-size:4.8px}
  .bord .kop{display:none}
  /* ---- Waarom de vier getallen hier zo staan ----
     Vroeger viel het gat tot de leider weg zodra de kolom smaller werd dan
     760 px. Dat is net het getal waarvoor je naar een timingbord kijkt, dus is
     de indeling opnieuw opgemeten in Chromium (390 px, twintig rijders, de
     langste namen die we in de zaal zien).

     Barlow Condensed is smal: een rondetijd "1:44.320" is op 13,6 px maar
     40 px breed en het opschrift "LAATSTE" 36 px. Het probleem was dus nooit de
     tekst maar het RASTER -- regel 2 had vier vakjes (sectoren, laatste, beste
     en er moest een vierde bij) en die deelden 292 px. Daarom staan de
     sectorkleuren nu niet meer als vakje in het raster maar als streepje onder
     de rij, net als op de naamplaat in het beeld. Regel 2 houdt zo drie gelijke
     vakjes van 95 px over voor leider, laatste en beste; het breedste dat er
     ooit in staat is "LAATSTE 2:03.320" van 87 px.

     Gemeten met scrollWidth > clientWidth, niet met getBoundingClientRect():
     390 px en 360 px knippen niets af (de oude indeling knipte op 360 px al
     namen af), en 320 px ook niet meer dankzij het blok hieronder. De rij is
     51,6 px hoog -- duimformaat, en evenveel rijen op het scherm als vroeger. */
  .bord .rij{grid-template-columns:2.6em minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    position:relative;gap:0 .5em;padding:.3em .5em .5em}
  .bord .pos{grid-row:1/3;grid-column:1;align-self:center}
  .bord .naam{grid-row:1;grid-column:2/4}
  .bord .int{grid-row:1;grid-column:4}
  /* De sectorkleuren als streepje onderaan de rij, zoals op de naamplaat. Ze
     beginnen naast het plaatsvakje, zodat dat vakje vrij blijft. */
  .bord .sec{position:absolute;left:3.7em;right:.5em;bottom:.16em;gap:.2em}
  .bord .pip{height:.2em;border-radius:.1em}
  .bord .gat{grid-row:2;grid-column:2;text-align:left}
  .bord .last{grid-row:2;grid-column:3;text-align:left}
  .bord .best{grid-row:2;grid-column:4;text-align:right}
  .bord .gat,.bord .last,.bord .best{font-size:.85em;margin-top:.06em}
  .bord .gat::before,.bord .last::before,.bord .best::before{color:var(--dim);font-size:.75em;
    letter-spacing:.1em;text-transform:uppercase;margin-right:.3em}
  /* Een leeg vakje krijgt geen opschrift: dan staat er "beste" zonder tijd. */
  .bord .gat:empty::before,.bord .last:empty::before,.bord .best:empty::before{content:none}
  .bord .gat::before{content:"leider"}
  .bord .last::before{content:"laatste"}
  .bord .best::before{content:"beste"}
}

/* Een oude, kleine telefoon (320--365 px): daar past dezelfde indeling wel,
   maar niet op 16 px. De maat zakt mee met de kolom in plaats van dat er een
   kolom sneuvelt -- gemeten knipt er zo op 320 px niets meer af, waar de oude
   indeling daar elke rondetijd én elke lange naam afkapte. */
@container (max-width:365px){
  .bord{font-size:clamp(13px,3.9cqw,14px)}
}

.bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;
  padding:10px calc(16px + var(--sa-r)) calc(10px + var(--sa-b)) calc(16px + var(--sa-l));
  border-top:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.powered{display:flex;align-items:center;gap:8px;white-space:nowrap}
.powered img{height:16px;display:block}

@media (max-width:760px){
  .top{padding:calc(10px + var(--sa-t)) calc(12px + var(--sa-r)) 6px calc(12px + var(--sa-l))}
  .isc{width:40px;height:40px}
}

/* ---------- Een korte telefoon (dwars) ----------
   Op 390 px hoogte is hoogte het schaarse goed, niet breedte. De keuzeknop nam
   daar een eigen rij van 88 px -- bijna een kwart van het scherm voor twee
   woorden. Hij gaat naast de klok staan, zoals op een breed scherm, maar houdt
   wél zijn duimmaat: dit blijft een telefoon. Tot 900 px, want daarboven doet
   de regel verderop hetzelfde. */
@media (max-height:560px) and (max-width:899px){
  .top{padding-top:calc(6px + var(--sa-t));padding-bottom:4px}
  .isc{width:34px;height:34px}
  h1{font-size:22px}
  .bladen{order:0;flex:0 0 auto;margin-left:12px;gap:6px}
  .blad{flex:0 0 auto;padding:0 16px;font-size:15px}
  /* De rij in de stand ís de knop waarmee je een piloot kiest. Dwars zakte ze
     naar 30 px en werd ze een gokje; de tekst erin kromp mee. */
  .bord{font-size:15px}
  .bord button.rij{min-height:var(--duim)}
  .bord .kop{font-size:11px}
}

/* ---------- Breed scherm: naast elkaar ----------
   Zodra er een beeld te zien is én er plaats voor is, staan beeld en stand naast
   elkaar en heeft niemand nog een keuzeknop nodig. Volg je niemand, dan vult het
   gekozen blad het scherm: dat is de tv in de zaal, die op /timing staat en daar
   dus precies het bord van vroeger houdt, over de volle breedte. */
@media (min-width:900px){
  /* Geen eigen rij meer maar twee pillen naast de klok: op de tv mag het bord er
     geen beeldregel op achteruitgaan omdat er een keuzeknop bij kwam. */
  .bladen{order:0;flex:0 0 auto;margin-left:14px;gap:6px}
  .blad{flex:0 0 auto;min-height:34px;padding:0 18px;font-size:16px}
  body.kijken .dek{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:stretch}
  body.kijken .dek > .kolom{display:flex}
  body.kijken .bladen{display:none}
  body.kijken .kijk{padding-left:0}
}

/* ---------- Kijken past op één scherm ----------
   Zodra je een piloot volgt, mag er niet gescrold hoeven worden: de hoogte van
   het venster bepaalt hoe breed het beeld mag zijn, en wat eronder staat krijgt
   de rest. `dvh` en niet `vh`: op een telefoon telt de adresbalk mee.
   `--rest` is alles boven en onder het beeld samen; de keuzeknop staat daar mee
   in, want op een telefoon kost die een eigen rij. */
body.kijken{height:100dvh;overflow:hidden;--rest:372px}
/* Krapper zodra er beeld is, maar de inkeping blijft staan: zonder deze
   `--sa-*` won deze regel van de kop hierboven en begon het logo weer onder de
   statusbalk van een iPhone. */
body.kijken .top{padding:calc(8px + var(--sa-t)) calc(16px + var(--sa-r)) 4px calc(16px + var(--sa-l))}
body.kijken h1{font-size:24px}
body.kijken .isc{width:40px;height:40px}
/* Het logo staat nu in het beeld zelf; de voet eronder is dan dubbelop. */
body.kijken .bottom{display:none}
body.kijken .kijk{flex:1;min-height:0;display:flex;flex-direction:column;
  padding-bottom:calc(8px + var(--sa-b))}
body.kijken .kijk-kop{padding:4px 4px 6px}
body.kijken .scherm{flex:0 0 auto;width:min(100%,calc((100dvh - var(--rest)) * 16 / 9));margin:0 auto}
/* `align-content:start` houdt de kaders op hun eigen hoogte. Zonder dat rekte
   het raster ze uit over alles wat er onder het beeld overbleef, en stond er bij
   één buur een half scherm leeg grijs. `overscroll-behavior` houdt het vegen
   binnen dit kader: anders veert de pagina eronder mee. */
body.kijken .onder{flex:1;min-height:0;margin-top:8px;overflow:auto;align-content:start;
  overscroll-behavior:contain}
body.kijken .toon{margin-top:6px}

/* ---------- Een telefoon dwars: alleen het beeld ----------
   Wie zijn telefoon kantelt, doet dat om te kijken. Er was alleen plaats voor
   het beeld -- en dat beeld haalde 39% van het scherm: een postzegel van
   480 bij 270 midden in het zwart, met 120 px gereserveerd voor een balk met
   één knop erin. Nu staat die balk ÓVER het beeld, zoals in elke videospeler,
   en krijgt het beeld de volle hoogte: 679 bij 382 op een scherm van 844 bij
   390, ofwel 79%. De balk vangt zelf geen tikken op (alleen zijn knoppen),
   dus een tik naast de knop gaat gewoon naar het beeld eronder. */
@media (max-height:560px){
  body.kijken{--rest:0px}
  body.kijken .top,body.kijken .onder,body.kijken .toon{display:none}
  body.kijken .kijk{position:relative;padding:0 var(--sa-r) var(--sa-b) var(--sa-l)}
  body.kijken .kijk-kop{position:absolute;z-index:3;top:0;left:0;right:0;pointer-events:none;
    padding:4px calc(10px + var(--sa-r)) 14px calc(10px + var(--sa-l));flex-wrap:nowrap;
    background:linear-gradient(180deg,rgba(6,9,14,.85),rgba(6,9,14,0))}
  body.kijken .kijk-kop > *{pointer-events:auto}
  body.kijken .terug{color:var(--ink)}
  /* Het merk staat rechtsboven in het beeld en zou onder de balk verdwijnen;
     het zakt er precies onderuit. */
  body.kijken .merk{top:calc(1.8cqw + var(--duim))}
  /* Het beeld midden op het scherm, zo groot als de hoogte toelaat. */
  body.kijken .scherm{margin:auto;border-width:0}
}

@media (min-width:900px){
  h1{font-size:clamp(28px,2.6vw,42px)}
  .isc{width:68px;height:68px}
  /* Naast elkaar: het beeld neemt de hoogte die het kan krijgen, en de stand
     ernaast scrolt binnen haar eigen kolom in plaats van de pagina te verlengen. */
  body.kijken{--rest:300px}
  body.kijken h1{font-size:28px}
  body.kijken .isc{width:40px}
  body.kijken .dek{min-height:0}
  body.kijken .dek > .kolom{min-height:0}
  body.kijken .bord-kolom{overflow:auto}
  body.kijken .scherm{width:100%}
}

/* ---------- Aanmoedigen (alleen in de zaal) ---------- */
.supporter{margin-bottom:18px}
.cheers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cheer{min-height:var(--duim);padding:0 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.cheer:active{background:var(--accent);color:#170b02}
.cheer:disabled{opacity:.45;cursor:default}
.supporter-melding{min-height:1.2em;margin:8px 0 0;font-size:13px;color:var(--muted)}
@media (min-width:700px){.cheers{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Voorspel de winnaar (alleen in de zaal) ---------- */
.voorspel{margin:0 0 18px;padding:14px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;background:var(--panel)}
.voorspel-tekst{margin:0 0 10px;font-size:15px;line-height:1.4}
.voorspel-keuzes{display:flex;flex-wrap:wrap;gap:8px}
.voorspel-keuze{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--ground);color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.voorspel-keuze[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#170b02}
.voorspel-code{margin:6px 0 0;font-size:44px;font-weight:800;letter-spacing:.2em;color:var(--accent)}

/* De promokaart thuis (stap 4): over het beeld, nooit groter dan het beeld zelf. */
.promo{position:absolute;left:10px;right:10px;top:10px;max-width:440px;max-height:calc(100% - 20px);overflow:auto;
  background:rgba(11,15,21,.92);border-left:3px solid var(--accent);border-radius:6px;padding:12px 14px;
  display:grid;gap:6px;z-index:5}
.promo-kop{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.promo-titel{font-size:18px;line-height:1.2}
.promo-tekst{margin:0;color:var(--muted);font-size:14px}
.promo-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.promo-knop{min-height:var(--tik,44px);padding:0 14px;border:0;border-radius:6px;background:var(--accent);color:#fff;
  font:inherit;font-weight:700;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}
.promo-knop:disabled{opacity:.6;cursor:default}
.promo-boek{background:var(--panel)}
.promo-sluit{min-height:var(--tik,44px);background:none;border:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}