/* ==========================================================================
   grandprixsim.com — design system
   Asphalt + racing red + F1 timing-screen semantics.
   Hand-written on purpose: no build step, no purge trap. See CLAUDE.md.
   ========================================================================== */

:root{
  /* Surfaces. Deep and slightly cool rather than pure black — pure #000 against pure
     white text is what makes a dark UI feel harsh after a minute of reading. */
  --asphalt:#0A0B0D;
  --panel:#121417;
  --panel-2:#171A1E;
  --panel-3:#1F2329;
  --line:#22262C;
  --line-hi:#2C323A;

  /* Brand. The full-saturation #E10600 is reserved for tiny marks; anything with area
     uses the slightly deeper tone so it reads as expensive instead of alarming. */
  --red:#D2202B;
  --red-hi:#EE3A44;
  --red-deep:#8E1219;
  --red-dim:#3A1015;

  /* Text. Off-white, not #FFF — the glare is the single biggest cause of "cheap dark UI". */
  --white:#E8E9EC;
  --text:#CBD0D7;
  --muted:#9DA3AC;
  --faint:#7D848E;

  /* F1 timing-screen semantics — these are NOT decoration.
     Every lap time in every game is coloured by them. Toned a step off neon so a table
     full of them stays readable. */
  --tm-purple:#A25BD8;   /* session best        */
  --tm-green:#35BE72;    /* personal best       */
  --tm-yellow:#D9A62B;   /* slower than own PB  */
  --tm-cyan:#3FB6CE;     /* info / DRS          */

  /* tyre compounds (real code, muted to match) */
  --ty-soft:#D2202B;
  --ty-medium:#D9A62B;
  --ty-hard:#D8DAE0;
  --ty-inter:#35BE72;
  --ty-wet:#3B7FD4;

  --flag-yellow:#D9A62B;
  --flag-red:#D2202B;
  --flag-sc:#D9A62B;

  --f-pixel:'Press Start 2P', monospace;
  --f-disp:'Chakra Petch', system-ui, sans-serif;
  --f-mono:'Share Tech Mono', ui-monospace, monospace;

  --max:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--asphalt); color:var(--text);
  font-family:var(--f-disp); font-size:15.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,canvas{max-width:100%}
a{color:var(--red-hi); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:700; color:var(--white); line-height:1.25}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px; padding-left:20px}
li{margin-bottom:4px}
strong{color:var(--white); font-weight:600}
hr{border:0; border-top:1px solid var(--line); margin:20px 0}

/* ---------- type accents ----------
   Press Start 2P is now the brand mark only. Using it for every small label was most of
   what made the interface read as a toy rather than a timing screen. */
.pixel{font-family:var(--f-pixel); letter-spacing:0; line-height:1.7}
.mono{font-family:var(--f-mono); letter-spacing:.02em; font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--f-disp); font-size:11px; font-weight:700; color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:10px;
}
.eyebrow-red{color:var(--red-hi)}

/* ---------- dividers ----------
   Replaces the hard red/white kerb blocks. Same motif — a racing stripe — but as a
   hairline that fades out, which sits behind the content instead of shouting over it. */
.kerb{
  height:2px; width:100%; border:0;
  background:linear-gradient(90deg,var(--red) 0,var(--red) 56px,var(--line-hi) 56px,var(--line-hi) 100%);
  opacity:.85;
}
.kerb-thin{
  height:1px; width:100%;
  background:linear-gradient(90deg,var(--red-deep) 0,var(--red-deep) 32px,var(--line) 32px,var(--line) 100%);
}

/* ---------- layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px; width:100%}
.wrap-narrow{max-width:760px}
.row{display:flex; gap:12px; align-items:center}
.row-wrap{flex-wrap:wrap}
.col{display:flex; flex-direction:column; gap:12px}
.between{justify-content:space-between}
.center{justify-content:center}
.grow{flex:1; min-width:0}
.stack>*+*{margin-top:12px}
.grid{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:900px){
  .grid-3-lg{grid-template-columns:repeat(3,1fr)}
  .grid-4-lg{grid-template-columns:repeat(4,1fr)}
  .grid-side{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  /* The setup screen. Three columns rather than two because the tall thing was the right
     column — a driver list stacked on top of a ratings panel — and splitting them sideways
     is what gets the whole weekend picker above the fold. */
  .grid-setup{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr)}
  /* The thing you click gets the wider column; the driver card is reference material. */
  .grid-career{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
@media(min-width:640px) and (max-width:899px){
  .grid-setup{grid-template-columns:1fr 1fr}
}
/* display:initial resolves to display:INLINE, so every <td class="hide-sm"> stopped being a
   table cell above 640px: it dropped out of the row and was laid out as inline content.
   That is why the predictor's Pole and DNF numbers sat 43px below the rest of their own row
   and printed as "25.8%9.7%" with no cell boundary, and why rows were 67px tall instead of
   34px. 37 cells across the four game pages were affected. The class is also used on two
   <span>s, which do want inline, so the cell case is restored explicitly. */
.hide-sm{display:none}
@media(min-width:640px){
  .hide-sm{display:initial}
  td.hide-sm, th.hide-sm{display:table-cell}
}

/* ---------- hero ----------
   A band rather than a stack of three text elements: a low red glow off to one side, faint
   diagonal streaks for motion, and a hairline to close it. All of it is one hue at very low
   opacity, so it reads as depth rather than as another colour system. */
.hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 320px at 12% -30%, rgba(210,32,43,.20), transparent 68%),
    radial-gradient(700px 260px at 88% -10%, rgba(62,110,160,.10), transparent 70%),
    linear-gradient(180deg,#0E1116 0%,var(--asphalt) 100%);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(102deg,rgba(232,233,236,.030) 0 1px,transparent 1px 28px);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
}
.hero-in{position:relative; z-index:1; padding:26px 0 20px}
/* Once a game is in progress the header has done its job. Keeping it pinned above the board
   pushed the thing you are playing halfway down the screen on every single turn. It stays in
   the HTML for crawlers and for the first visit; it just gets out of the way after that. */
body.playing .hero{display:none}
.hero-title{
  font-size:clamp(30px,5.4vw,50px); line-height:1.02; font-weight:700;
  letter-spacing:-.025em; color:var(--white); margin:0;
}
.hero-title span{color:var(--red)}
.hero-sub{color:var(--muted); font-size:14px; max-width:640px; margin:9px 0 0}
.hero-meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
/* The band is a banner, not the game. On a phone it was 232px tall in front of a picker
   the visitor came here to use, so it gives some of that back. */
@media (max-width:640px){
  .hero-in{padding:16px 0 14px}
  .hero-sub{font-size:13px; margin-top:7px}
  .hero-meta{margin-top:10px; gap:6px}
}
.chip{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); background:rgba(18,20,23,.6);
  padding:4px 9px; border-radius:2px;
}
.chip strong{color:var(--white); font-weight:700}

/* ---------- text scale ---------- */
.t-hero{font-size:26px; line-height:1.15; font-weight:700; letter-spacing:-.01em}
@media(min-width:640px){.t-hero{font-size:36px}}
.t-h2{font-size:19px; font-weight:700}
.t-h3{font-size:15.5px; font-weight:700}
.t-sm{font-size:14px}
.t-xs{font-size:12.5px}
.t-red{color:var(--red-hi)}
.t-white{color:var(--white)}
.t-muted{color:var(--muted)}
.t-faint{color:var(--faint)}
.t-up{text-transform:uppercase; letter-spacing:.1em}
.t-center{text-align:center}

/* ---------- panels ----------
   1px hairlines and a lifted background instead of 2px borders. Depth comes from the
   surface stepping up, not from an outline around everything. */
.card{background:var(--panel); border:1px solid var(--line); padding:16px; border-radius:3px}
.card-2{background:var(--panel-2); border:1px solid var(--line); border-radius:3px}
.card.hot{border-color:var(--red-deep); box-shadow:inset 0 1px 0 rgba(210,32,43,.16)}
.card-pad-sm{padding:12px}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--f-disp); font-weight:700; font-size:12.5px;
  letter-spacing:.07em; text-transform:uppercase;
  padding:10px 17px; border:1px solid var(--line-hi); background:var(--panel-2);
  color:var(--text); cursor:pointer; transition:all .13s; display:inline-block;
  text-align:center; line-height:1.2; border-radius:3px;
}
.btn:hover{border-color:var(--line-hi); background:var(--panel-3); color:var(--white); text-decoration:none}
.btn:disabled,.btn.is-off{opacity:.35; cursor:not-allowed}
.btn:disabled:hover,.btn.is-off:hover{background:var(--panel-2)}
.btn-red{background:var(--red); border-color:var(--red); color:#fff}
.btn-red:hover{background:var(--red-hi); border-color:var(--red-hi); color:#fff}
.btn-lg{font-size:14px; padding:13px 24px}
.btn-sm{font-size:11.5px; padding:6px 11px}
.btn-block{display:block; width:100%}

/* selectable option */
.opt{
  display:block; width:100%; text-align:left; cursor:pointer; border-radius:3px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:11px 13px; transition:all .13s; font-family:var(--f-disp); font-size:14.5px;
}
.opt:hover{border-color:var(--line-hi); background:var(--panel-3)}
.opt.sel{border-color:var(--red-deep); background:var(--panel-3); box-shadow:inset 2px 0 0 var(--red)}
.opt:disabled{opacity:.32; cursor:not-allowed}
.opt-t{color:var(--white); font-weight:600; display:block}
.opt-d{color:var(--muted); font-size:13px; display:block; margin-top:2px; line-height:1.45}

/* ---------- circuit traits ----------
   A circuit weight is not a mark out of ten: overtake:6 means you cannot pass at Monaco,
   not that Monaco scored badly. So the row carries a word, and the bar behind it is only
   there to make the four lanes comparable at a glance. Deliberately no timing-screen
   colour here - purple/green/yellow mean lap times everywhere else on the site. */
.trait{display:flex; align-items:center; gap:9px; margin-bottom:6px}
.trait-l{
  flex:0 0 74px; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); line-height:1.2;
}
.trait-bar{
  flex:0 0 48px; height:4px; border-radius:2px; background:var(--line);
  overflow:hidden; display:block;
}
.trait-bar i{display:block; height:100%; background:var(--line-hi)}
.trait-bar i.hi{background:var(--faint)}
.trait-w{flex:1; min-width:0; font-size:11.5px; color:var(--text); line-height:1.25}

/* ---------- labelled option row ----------
   The label sits beside the buttons, not above them, so naming all five rows of the
   weekend picker adds no height to a column that was already the reason the start
   button fell off the bottom of the screen. */
.setrow{display:flex; align-items:center; gap:7px; margin-bottom:5px}
.setrow-l{
  flex:0 0 58px; font-size:9px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); line-height:1.2;
}
.setrow-b{display:flex; gap:5px; flex:1; min-width:0}

/* A segmented choice. Red marks the selection as an underline - the same mark the nav
   uses for the current page - rather than as a fill, so five chosen options do not read
   as five alarms. The solid red fill stays reserved for the button that starts the race. */
.seg{
  flex:1; min-width:0; font-family:var(--f-disp); font-weight:700; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.2;
  padding:7px 5px; border-radius:3px; cursor:pointer; transition:all .13s;
  border:1px solid var(--line); background:var(--panel-2); color:var(--muted);
}
.seg:hover{border-color:var(--line-hi); background:var(--panel-3); color:var(--text)}
/* A segment that sizes to its own label instead of splitting the row. The default flex:1
   is right for "Realistic / Dry / Wet", and wrong for a short run count sitting in a row
   that shrinks to fit - there it collapsed to 28px and clipped "500". */
.seg-auto{flex:0 0 auto; padding-left:12px; padding-right:12px}
.seg.on{
  /* The border stays neutral on purpose. Colouring it red as well drew a full red
     rectangle around every chosen option, so a column with five choices made in it was
     still five red boxes - which was the thing being fixed. The underline and the white
     text are enough to say "this one", the way the nav says it. */
  background:var(--panel-3); border-color:var(--line-hi); color:var(--white);
  box-shadow:inset 0 -2px 0 var(--red);
}

/* ---------- country flags ----------
   Sized in ems so a flag stays proportional to whatever text it sits beside, from a
   12.5px table row to a heading. The inset ring is what stops a white flag (Poland,
   Japan, Monaco) from bleeding into a light surface and a dark one from vanishing. */
.fl{
  display:inline-block; width:1.06em; height:.76em; vertical-align:-.08em;
  border-radius:1px; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
}

/* ---------- challenges ----------
   The race sim had no goal, so it had no reason to be played twice. These are the way in
   and the way the result is judged. */
/* The challenge entry is the third option in the mode card, so it needs no chrome of its
   own beyond a count. It used to be a full-width strip above the picker, which pushed the
   simulator itself down a row on the one page that has to load fast and read fast. */
.opt-chal .chal-pip{
  font-family:var(--f-mono); font-size:11px; color:var(--muted);
  border:1px solid var(--line-hi); border-radius:2px; padding:1px 6px; margin-left:6px;
  vertical-align:1px;
}
.opt-chal:hover .chal-pip{color:var(--white); border-color:var(--red-deep)}

.chal-card{
  display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; cursor:pointer;
  padding:14px; border-radius:3px; border:1px solid var(--line); background:var(--panel-2);
  font-family:var(--f-disp); transition:all .13s;
}
.chal-card:hover{border-color:var(--line-hi); background:var(--panel-3)}
.chal-card.is-done{border-color:#1F5A38}
.chal-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.chal-name{font-size:15.5px; font-weight:700; color:var(--white); min-width:0}
.chal-badge{
  font-size:10px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  color:var(--faint); border:1px solid var(--line); padding:2px 6px; border-radius:2px; flex-shrink:0;
}
.chal-badge.chal-done{color:var(--tm-green); border-color:#1F5A38}
.chal-badge.chal-new{color:var(--muted)}
.chal-where{font-size:12px; color:var(--muted)}
.chal-brief{font-size:12.5px; line-height:1.5; color:var(--text)}
.chal-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:2px; padding-top:9px; border-top:1px solid var(--line);
}
.chal-you{font-size:12px; color:var(--white); min-width:0}
.chal-goal{
  font-family:var(--f-mono); font-size:12px; color:#fff; background:var(--red-deep);
  padding:3px 9px; border-radius:2px; white-space:nowrap; flex-shrink:0;
}
.chal-rate{font-size:10.5px; color:var(--faint)}

/* the verdict */
.chal-verdict{border-width:1px}
.chal-verdict.is-win{border-color:#1F5A38; background:linear-gradient(180deg,rgba(53,190,114,.09),transparent 65%)}
.chal-verdict.is-loss{border-color:var(--red-deep); background:linear-gradient(180deg,rgba(210,32,43,.08),transparent 65%)}
.chal-v-top{display:flex; align-items:center; gap:14px}
.chal-v-mark{
  font-size:26px; line-height:1; flex-shrink:0; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line-hi);
}
.is-win .chal-v-mark{color:var(--tm-green); border-color:#1F5A38; background:rgba(53,190,114,.12)}
.is-loss .chal-v-mark{color:var(--red-hi); border-color:var(--red-deep); background:rgba(210,32,43,.10)}
.chal-v-b{min-width:0}
.chal-v-h{display:block; font-size:21px; font-weight:700; color:var(--white); line-height:1.15}
.chal-v-s{display:block; font-size:13px; color:var(--text); margin-top:3px; line-height:1.45}
.chal-v-meta{font-size:11px; color:var(--faint); margin-top:10px}

/* ---------- the board target ----------
   Team mode's goal, on screen every round. It reads as one line of a dossier rather than a
   card, because it is context for the season and not a thing to click. */
.board-line{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
  margin:0 0 10px; padding:8px 11px; border-radius:3px;
  border:1px solid var(--line); background:var(--panel-2);
}
.board-t{
  font-family:var(--f-pixel,var(--f-disp)); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.board-v{font-family:var(--f-disp); font-size:13.5px; font-weight:700; color:var(--white)}
.board-now{font-family:var(--f-mono); font-size:12px}
.board-now.is-on{color:var(--tm-green)}
.board-now.is-off{color:var(--tm-yellow,#EAB308)}
.board-rec{
  font-family:var(--f-mono); font-size:10.5px; color:var(--faint);
  margin-left:auto; white-space:nowrap;
}
@media (max-width:520px){ .board-rec{margin-left:0} }

/* Off-screen until focused, which is the whole point: it is for the keyboard user who
   would otherwise tab the nav on every page before reaching the game. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:10px 16px; border:2px solid var(--red); border-radius:0 0 3px 0;
  background:var(--panel); color:var(--white);
  font-family:var(--f-disp); font-size:13px; font-weight:700; text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- probability cells (race predictor) ----------
   The fill sits behind the number instead of beside it. A bar as a flex sibling made these
   cells taller than the plain-number cells in the same row, so the row's numbers landed at
   three different heights; as a background the number alone sets the line box and every
   numeric cell matches. Every numeric column uses the same .pcell box - the plain ones just
   carry no fill - so there is no second shape that could land on a different baseline. */
.pcell{
  position:relative; display:inline-block; min-width:58px; padding:1px 4px;
  border-radius:2px; overflow:hidden; text-align:right; vertical-align:baseline;
}
.pcell-fill{
  position:absolute; top:0; bottom:0; right:0; z-index:0;
  background:var(--line-hi); opacity:.55; border-radius:2px;
}
.pcell.is-win .pcell-fill{background:var(--red-deep); opacity:.85}
/* Every numeric cell is a .pcell, with or without a fill, so there is no second box shape
   that could sit on a different baseline. */
.pcell-n{position:relative; z-index:1; font-variant-numeric:tabular-nums}

/* The circuit's character, beside the odds rather than implied by them. */
.cx-traits{margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
.cx-note{
  font-family:var(--f-mono); font-size:10.5px; color:var(--faint); margin-top:8px;
}

/* ---------- tags ---------- */
.tag{
  font-family:var(--f-disp); font-weight:700; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; padding:3px 6px; border:1px solid currentColor;
  display:inline-block; line-height:1.4; border-radius:2px;
}
.tag-red{color:var(--red-hi)}
.tag-green{color:var(--tm-green)}
.tag-purple{color:var(--tm-purple)}
.tag-yellow{color:var(--tm-yellow)}
.tag-muted{color:var(--muted)}

/* ---------- timing colours ---------- */
.tm-purple{color:var(--tm-purple)}
.tm-green{color:var(--tm-green)}
.tm-yellow{color:var(--tm-yellow)}
.tm-cyan{color:var(--tm-cyan)}
.tm-white{color:var(--white)}

/* ---------- rating grades ----------
   Monochrome on purpose. A bar already encodes its value by length; colouring it as well was
   a second encoding of the same fact, and with team colours, tyre colours and timing colours
   also on screen it meant nothing was emphasised because everything was. One accent survives:
   an S is purple, the same purple that marks a session-best lap, because that is already this
   site's word for "the best there is". Everything below it is white fading to grey.
   .gr{font-family:var(--f-disp); font-weight:700; font-size:12px; letter-spacing:.04em} */
.gr{font-family:var(--f-disp); font-weight:700; font-size:11px; letter-spacing:.04em}
.gr-s{color:var(--tm-purple)}
.gr-a{color:var(--white)}
.gr-b{color:var(--text)}
.gr-c{color:var(--muted)}
.gr-d{color:var(--faint)}

/* one rating row: label, hairline bar, grade */
.stat{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.stat-l{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  min-width:80px; flex-shrink:0;
}
.stat-v{min-width:24px; text-align:right; flex-shrink:0; font-size:13px; color:var(--white)}

/* ---------- pickers ----------
   Replaces the helmet grid and the long circuit dropdown. A list of names reads faster than
   a grid of three-letter codes and does not look like a toy. */
.pick{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-left:2px solid transparent; color:var(--text);
  padding:6px 9px; font-family:var(--f-disp); font-size:13.5px; transition:background .12s;
}
.pick:hover{background:var(--panel-2)}
.pick.sel{background:var(--panel-3); border-left-color:var(--red); color:var(--white)}
.pick-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pick-code{font-family:var(--f-mono); font-size:11px; color:var(--faint); flex-shrink:0}
.pick.sel .pick-code{color:var(--muted)}
.pick-group{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  padding:9px 9px 3px; display:flex; align-items:center; gap:7px;
}
/* A driver row carries its own team, so the grid needs 22 rows rather than 33. Formula 1 is
   eleven teams of two and nothing else — a small fixed set, not a roster to browse — so the
   list is built to be compared at a glance instead of scrolled through. */
.pick-tag{
  font-family:var(--f-mono); font-size:11.5px; color:var(--muted);
  flex-shrink:0; min-width:36px; text-align:right;
}
/* flex-shrink:0 here meant the driver's own name was the only thing in the row that
   could give ground, so in the two-column band Alonso came out as "Fernand..." while
   "Aston Martin" kept every pixel it asked for. The team is the half you can afford to
   lose - it is a label on a row you already recognise by name and colour. */
.pick-team{
  font-size:11.5px; color:var(--muted); flex:0 1 auto; min-width:0; max-width:100px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pick.sel .pick-team{color:var(--text)}
.pick-ovr{
  font-family:var(--f-disp); font-weight:700; font-size:12.5px;
  min-width:22px; text-align:right; flex-shrink:0;
}
.pick-bar{width:2px; height:15px; border-radius:1px; flex-shrink:0}
.picklist-tall{max-height:390px}
.picklist{max-height:214px; overflow-y:auto; border:1px solid var(--line); border-radius:3px; background:#0E1013}
.picklist-sm{max-height:182px}
.tabs{display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.tabs button{
  flex:1; background:var(--panel-2); border:0; border-right:1px solid var(--line); cursor:pointer;
  color:var(--muted); font-family:var(--f-disp); font-weight:700; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:7px 4px; transition:all .12s;
}
.tabs button:last-child{border-right:0}
.tabs button:hover{color:var(--white)}
.tabs button.on{background:var(--panel-3); color:var(--white); box-shadow:inset 0 -2px 0 var(--red)}
.search{
  width:100%; background:#0E1013; border:1px solid var(--line); border-radius:3px;
  color:var(--white); font-family:var(--f-disp); font-size:13px; padding:7px 10px;
}
.search::placeholder{color:var(--faint)}
.search:focus{outline:none; border-color:var(--line-hi)}

/* ---------- tyres ---------- */
.tyre{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; border:2px solid;
  font-family:var(--f-disp); font-weight:700; font-size:9px; color:var(--white);
  background:#0E1013; flex-shrink:0;
}
.tyre-soft{border-color:var(--ty-soft)}
.tyre-medium{border-color:var(--ty-medium)}
.tyre-hard{border-color:var(--ty-hard)}
.tyre-inter{border-color:var(--ty-inter)}
.tyre-wet{border-color:var(--ty-wet)}

/* ---------- timing table ---------- */
.timing{width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:13.5px}
.timing th{
  font-family:var(--f-disp); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:left;
  padding:6px 6px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.timing td{padding:6px 6px; border-bottom:1px solid #191C21; white-space:nowrap}
.timing tr:last-child td{border-bottom:0}
.timing .num{text-align:right; font-variant-numeric:tabular-nums}
.timing .pos{color:var(--faint); width:26px; text-align:right; padding-right:8px}
.timing .code{color:var(--white); font-family:var(--f-disp); font-weight:700; letter-spacing:.05em}
/* Three letters alone assume you already know the grid. The full name rides along and drops
   out on narrow screens, where the code is all that fits. */
.timing .fullname{color:var(--text); font-family:var(--f-disp); font-weight:400; margin-left:7px}
@media(max-width:719px){.timing .fullname{display:none}}
.timing tr.me{background:rgba(210,32,43,.09)}
.timing tr.me .code{color:var(--red-hi)}
.timing tr.gain .pos::after{content:' \25B2'; color:var(--tm-green); font-size:8px}
.timing tr.loss .pos::after{content:' \25BC'; color:var(--red); font-size:8px}
.timing-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

.team-bar{display:inline-block; width:3px; height:13px; vertical-align:-2px; margin-right:7px; border-radius:1px}

/* ---------- bars ---------- */
.bar{height:6px; background:#15181C; border:1px solid var(--line); position:relative; overflow:hidden; border-radius:2px}
.bar .fill{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--red-deep),var(--red))}
.bar .cap{position:absolute; inset:0 auto 0 0; background:repeating-linear-gradient(45deg,#2A2118,#2A2118 4px,#211A13 4px,#211A13 8px)}
.bar-lg{height:10px}
.bar .fill-tyre{position:absolute; inset:0 auto 0 0; background:var(--tm-green)}
.bar .fill-tyre.mid{background:var(--tm-yellow)}
.bar .fill-tyre.low{background:var(--red)}
/* neutral fill for rating bars, so the page is not wall-to-wall red */
.bar .fill-n{position:absolute; inset:0 auto 0 0; background:var(--line-hi)}
/* rating bars: one hue at two intensities, never a spectrum */
.bar .fill-g{position:absolute; inset:0 auto 0 0; background:rgba(232,233,236,.40)}
.bar .fill-g.top{background:rgba(232,233,236,.80)}

/* ---------- race ticker ---------- */
.ticker{
  background:#0C0E11; border:1px solid var(--line); border-radius:3px; padding:10px 12px;
  min-height:120px; max-height:260px; overflow-y:auto; font-size:13.5px; line-height:1.6;
}
.ticker .line{padding:3px 0; border-bottom:1px solid #14171B; animation:fade .25s ease}
.ticker .line:last-child{border-bottom:0}
.ticker .lap{font-family:var(--f-mono); color:var(--muted); font-size:11.5px; display:inline-block; min-width:54px}
.ticker .hot{color:var(--white)}

/* ---------- status banners ---------- */
.banner{
  padding:6px 11px; font-family:var(--f-disp); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#0A0B0D; border-radius:2px;
}
.banner-sc{background:var(--flag-sc)}
.banner-red{background:var(--flag-red); color:#fff}
.banner-rain{background:var(--ty-wet); color:#fff}
/* Text sitting directly on a chequerboard is unreadable over the dark squares no matter how
   much glow you put behind it. The flag becomes a strip on the left instead, and the words go
   back on a plain panel where they can be read. */
.banner-chk{
  background:var(--panel-3); color:var(--white);
  display:flex; align-items:center; gap:10px; padding:7px 12px 7px 0; overflow:hidden;
}
.banner-chk::before{
  content:''; flex-shrink:0; align-self:stretch; width:34px;
  background:repeating-conic-gradient(#D8DAE0 0 25%,#15181C 0 50%) 0 0/9px 9px;
}

/* ---------- pixel helmet ---------- */
.helmet{image-rendering:pixelated; border:1px solid var(--line); background:#0C0E11; display:block; border-radius:2px}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(10,11,13,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:14px; padding:11px 16px; max-width:var(--max); margin:0 auto}
.nav-logo{font-family:var(--f-pixel); font-size:10px; color:var(--white); flex-shrink:0; white-space:nowrap}
.nav-logo:hover{text-decoration:none}
.nav-logo span{color:var(--red)}
.nav-links{
  display:flex; align-items:center; gap:16px; margin-left:auto;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-in{position:relative}
/* a fade off the right edge, so a clipped link reads as "there is more" rather than as
   nothing at all. Pointer-events off: it must never eat a tap on the last visible link. */
@media (max-width:640px){
  .nav-in::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:26px; pointer-events:none;
    background:linear-gradient(to right, rgba(10,11,13,0), rgba(10,11,13,.92));
  }
}
.nav-links a{color:var(--muted); flex-shrink:0}
.nav-links a:hover{color:var(--white); text-decoration:none}
.nav-links a.on{color:var(--white); box-shadow:0 2px 0 var(--red)}
.nav-links a.feat{color:var(--red-hi)}

/* ---------- race timeline ----------
   A <details> so it costs nothing when closed and needs no JS to open. The left edge is
   the only colour: it is the one place the timing-screen hues are not about lap times, so
   they are used sparingly and only where they already mean the same thing elsewhere
   (yellow = caution, cyan = information, red = trouble). */
.tl-card{padding:0}
.tl-sum{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px; cursor:pointer; list-style:none; user-select:none;
}
.tl-sum::-webkit-details-marker{display:none}
.tl-sum:hover{background:var(--panel-2)}
.tl-card[open] .tl-sum{border-bottom:1px solid var(--line)}
.tl{padding:10px 15px 14px}
.tl-row{
  display:flex; gap:10px; align-items:baseline; padding:5px 0 5px 9px;
  border-left:2px solid var(--line-hi); margin-bottom:2px;
}
.tl-lap{flex:0 0 30px; font-size:10.5px; color:var(--faint)}
.tl-t{flex:1; min-width:0; font-size:12.5px; color:var(--text); line-height:1.4}
.tl-red{border-left-color:var(--red)}
.tl-yellow{border-left-color:var(--tm-yellow)}
.tl-cyan{border-left-color:var(--tm-cyan)}
.tl-purple{border-left-color:var(--tm-purple)}
.tl-green{border-left-color:var(--tm-green)}
.tl-white{border-left-color:var(--line-hi)}

/* ---------- footer ---------- */
/* No border-top: the footer opens with the kerb stripe instead, which is the motif the
   nav already closes with. */
.foot{margin-top:48px; font-size:12.5px; color:var(--muted)}
.foot > .wrap{padding:26px 16px 34px}   /* keeps .wrap's own side padding; 0 put the text on the screen edge */
.foot a{color:var(--muted)}

/* ---------- SEO prose ---------- */
.prose{font-size:15px; line-height:1.75; color:var(--text)}
.prose h2{font-size:17px; margin:26px 0 8px; color:var(--white)}
.prose h3{font-size:14px; margin:18px 0 6px; color:var(--white)}
.prose li{margin-bottom:6px}

/* ---------- animation ---------- */
.fade{animation:fade .28s ease}
@keyframes fade{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.pop{animation:pop .22s ease}
@keyframes pop{from{opacity:0; transform:scale(.985)} to{opacity:1; transform:none}}
.blink{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{opacity:.3}}
@media(prefers-reduced-motion:reduce){
  .fade,.pop,.blink{animation:none}
}

/* ---------- misc ---------- */
.sel{
  background:var(--panel-2); border:1px solid var(--line); color:var(--white);
  font-family:var(--f-disp); font-size:13.5px; padding:9px 12px; width:100%;
  appearance:none; cursor:pointer; border-radius:3px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px;
}
.sel:focus{outline:none; border-color:var(--line-hi)}
.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:80;
  background:var(--red); color:#fff; font-family:var(--f-disp); font-weight:700;
  font-size:12px; letter-spacing:.06em; padding:9px 16px; text-transform:uppercase; border-radius:3px;
}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-hi); border-radius:4px}
:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}

/* Circuit picker ------------------------------------------------------------
   The detail block is a fixed shape: title line, one description line, then the
   stats. Every circuit carries a description so the card never changes height
   as you move down the list, and the lap/time figure never wraps under it. */
.pick-flag{font-size:12px; opacity:.85}
.circuit-head{display:flex; align-items:baseline; gap:8px; margin-bottom:5px}
.circuit-title{flex:1; min-width:0; color:var(--white); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.circuit-meta{flex-shrink:0; white-space:nowrap}
/* Between 640 and 900 the card is at its narrowest and the metadata was taking half the
   row, clipping the circuit's name to "Australian G...". The lap count and the base lap
   stay on one line - being split over two was the original complaint - they just get out
   of the name's way. */
@media (min-width:640px) and (max-width:899px){
  .circuit-meta{font-size:10px}
  .circuit-title{font-size:13.5px}
}
.circuit-nick{margin:0 0 9px; font-size:11px; color:var(--faint); line-height:1.35;
  min-height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* Pit wall ------------------------------------------------------------------
   Every control is labelled and explained. The game assumes no knowledge of
   what "box" or "DRS" mean, so the buttons say what they do in plain words. */
.pw-label{display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:var(--f-pixel); font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:10px 0 5px}
.pw-cost{font-family:var(--f-mono); font-size:10px; letter-spacing:0; text-transform:none; color:var(--faint)}
.pw-hint{margin:5px 0 0; font-size:11px; line-height:1.4; color:var(--faint)}

/* Setup mode ---------------------------------------------------------------- */
.mode-card{margin-bottom:12px}
.opt.sel{border-color:var(--red); background:rgba(210,32,43,.07)}
.opt.sel .opt-t{color:var(--white)}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.pick.nudge{animation:nudge .3s ease 2; border-color:var(--red)}
/* the start button gets the same treatment when a mode pick scrolls it into view */
.btn.nudge{animation:nudge .3s ease 2}

/* Race report ---------------------------------------------------------------
   The part people screenshot. Kept to four lines so it reads as a verdict
   rather than a wall, and monochrome so the timing colours keep their meaning. */
.rep-head{margin:0 0 12px; font-size:15px; line-height:1.45; color:var(--white); font-weight:600}
.rep-item{display:grid; grid-template-columns:132px 1fr; gap:10px; padding:7px 0;
  border-top:1px solid var(--line)}
.rep-l{font-family:var(--f-pixel); font-size:8px; line-height:1.7; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted)}
.rep-b{font-size:12px; line-height:1.5; color:var(--text)}
@media (max-width:560px){
  .rep-item{grid-template-columns:1fr; gap:2px}
}

/* AI race report ------------------------------------------------------------
   The one part of the page that is not deterministic, so it is marked out: a
   thin violet edge rather than the racing red the engine's own output uses.
   Violet is not one of the timing colours, so it cannot be confused with a
   session best. */
.ai-card{border-color:#3A2F52; background:linear-gradient(180deg,rgba(122,74,214,.055),transparent 62%)}
.ai-card .eyebrow{color:#B08BE8}
/* The launch bar. Full width under all three setup columns: the buttons that start the
   weekend are the most important thing on this screen and must not sit in the corner of
   one column, which is where they used to live. */
/* Grid, not flex: with flex the two buttons came out 543px and 493px because their
   intrinsic widths differ, and the AI one looking smaller is the whole thing we are
   fixing. Two 1fr columns are equal by construction. */
.launch{display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:10px;
  margin-top:12px; padding:12px; border:1px solid var(--line); background:var(--panel)}
.launch-col{min-width:0; display:flex; flex-direction:column; gap:5px}
.launch-col .btn{width:100%}
.launch-note{font-size:10.5px; color:var(--faint); text-align:center; line-height:1.3}
.launch-note .mono{color:#C9B3F0}
.launch:has(> .launch-col:only-child){grid-template-columns:minmax(0,420px); justify-content:center}

/* On a phone every column stacks, which put the button that starts the race about 1,870px
   down the page - past two and a half screens of pickers. It rides the bottom of the
   viewport instead, and settles into place when you reach the end of the setup. */
@media (max-width:760px){
  .launch{grid-template-columns:1fr}
  .launch:has(> .launch-col:only-child){grid-template-columns:1fr}
  /* Two stacked buttons with a caption each came to 168px - 21% of a phone screen,
     permanently. Pinned, the bar earns room for the two actions and for how many AI
     reports are left; the sentences explaining what each button does do not travel. */
  body:not(.playing) .launch{
    position:sticky; bottom:0; z-index:40; margin:0 -14px; padding:8px 14px 10px;
    grid-template-columns:1fr 1fr; gap:8px; align-items:start;
    background:linear-gradient(to bottom, rgba(10,11,13,.55), var(--asphalt) 42%);
    border-top:1px solid var(--line);
  }
  body:not(.playing) .launch .btn-lg{font-size:11.5px; padding:11px 8px}
  .ln-why{display:none}
  .launch-note{font-size:9.5px}
}

/* The AI button. The only thing on this page that is not the deterministic engine, so it is
   the only thing allowed a lit edge — violet, never the racing red the engine owns and
   never the purple/green/yellow the timing screen owns. */
.btn-ai{position:relative; overflow:hidden;
  border-color:#5B4A9E; color:#E4D8FF;
  background:linear-gradient(135deg,rgba(122,74,214,.30),rgba(122,74,214,.10) 62%);
  box-shadow:0 0 0 1px rgba(122,74,214,.22), 0 0 20px -8px rgba(122,74,214,.65)}
.btn-ai:hover:not(:disabled){border-color:#8B5CF6; color:#F3EBFF;
  background:linear-gradient(135deg,rgba(122,74,214,.44),rgba(122,74,214,.16) 62%);
  box-shadow:0 0 0 1px rgba(122,74,214,.38), 0 0 26px -6px rgba(122,74,214,.85)}
.btn-ai:disabled{opacity:.45; box-shadow:none}
/* a slow sheen, so it reads as the special one without blinking at anybody */
.btn-ai::after{content:''; position:absolute; top:0; bottom:0; width:38px; left:-60px;
  background:linear-gradient(90deg,transparent,rgba(220,200,255,.20),transparent);
  animation:aisheen 4.5s ease-in-out infinite}
@keyframes aisheen{0%,72%{left:-60px}92%,100%{left:115%}}
.btn-ai:disabled::after{display:none}
.ai-spark{margin-right:6px; color:#D9C6FF}

.ai-head{margin:0 0 10px; font-size:16px; line-height:1.4; color:var(--white); font-weight:700}
.ai-p{margin:0 0 9px; font-size:12.5px; line-height:1.62; color:var(--text)}
.ai-verdicts{margin-top:11px}
.ai-quote{margin:12px 0 0; padding:9px 12px; border-left:2px solid #7A4AD6;
  background:rgba(122,74,214,.06); font-size:12px; line-height:1.55; color:var(--white)}

@media (prefers-reduced-motion:reduce){
  .ai-bars span,.ai-scan-line{animation:none}
  .ai-bars span{height:50%}
  .ai-scan-line{display:none}
}

/* AI report sections --------------------------------------------------------
   The report is a page with departments, not a wall of prose. Each section is
   the answer to a question people actually ask after a race, so each gets a
   heading and a rule above it. */
.ai-stand{margin:0 0 4px; font-size:13px; line-height:1.5; color:var(--muted)}
.ai-sec{margin-top:14px; padding-top:11px; border-top:1px solid #241F33}
.ai-sec-h{font-family:var(--f-pixel); font-size:8px; letter-spacing:.09em;
  text-transform:uppercase; color:#B08BE8; margin-bottom:7px}

.ai-sec-d{margin:-3px 0 8px; font-size:10.5px; color:var(--faint)}

/* Driver ratings. One row per driver, scannable in a second: rank, team colour, code,
   verdict, bar, score. This is the part of the page the classification table cannot
   produce, so it leads. */
.ai-ranks{display:flex; flex-direction:column; gap:3px}
.ai-rank{display:grid; grid-template-columns:16px 3px 34px minmax(96px,auto) 1fr 70px 30px;
  align-items:center; gap:7px; padding:5px 7px; background:rgba(122,74,214,.045);
  border:1px solid transparent}
.ai-rank:hover{border-color:#2B2440; background:rgba(122,74,214,.09)}
.ai-rank-n{font-size:10px; color:var(--faint); text-align:right}
.ai-rank .team-bar{height:15px; width:3px; margin:0}
.ai-rank-code{font-size:11px; color:var(--white); font-weight:700}
.ai-rank-name{font-size:11px; color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ai-rank-line{font-size:10.5px; color:#C9B3F0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ai-rank-bar{height:5px; background:#17141F; position:relative}
.ai-rank-bar i{position:absolute; left:0; top:0; bottom:0; background:#6B4FA8; display:block}
.ai-rank-bar i.top{background:#B08BE8}
.ai-rank-bar i.low{background:#4A4258}
.ai-rank-s{font-size:12px; color:var(--text); text-align:right; font-weight:700}
.ai-rank-s.top{color:#D9C6FF}
.ai-rank-s.low{color:var(--faint)}

/* The three judgements, side by side instead of stacked prose. */
.ai-vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.ai-v{border:1px solid #241F33; background:rgba(122,74,214,.045); padding:8px 9px}
.ai-v-l{font-family:var(--f-pixel); font-size:7.5px; letter-spacing:.07em;
  text-transform:uppercase; color:#B08BE8; margin-bottom:6px; line-height:1.4}
.ai-v-d{display:flex; align-items:center; gap:5px; margin-bottom:4px; font-size:11px}
.ai-v-d .team-bar{height:13px; width:3px; margin:0}
.ai-v-n{color:var(--muted); font-size:10.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ai-v-t{margin:0; font-size:10.5px; line-height:1.5; color:var(--text)}

/* the duel sits inside the narrative rather than owning a section of its own */
.ai-duel{margin-top:8px; padding:7px 10px; border-left:2px solid #4A3A6B;
  background:rgba(122,74,214,.05); font-size:11.5px; line-height:1.55; color:var(--text)}
.ai-duel-t{color:var(--white); font-weight:700}

.ai-notes{display:grid; grid-template-columns:1fr 1fr; gap:14px}

@media (max-width:760px){
  .ai-vgrid{grid-template-columns:1fr}
  .ai-notes{grid-template-columns:1fr; gap:10px}
  .ai-rank{grid-template-columns:14px 3px 32px 1fr 46px 26px}
  .ai-rank-name,.ai-rank-bar{display:none}
}

/* Career: the game column ---------------------------------------------------
   Narrower than the race sim on purpose. A career run is read top to bottom for
   ten minutes, so a 1120px measure made every line too long to scan, and the
   margins it frees up are where ads go later. Matches the mmafightsim career
   width the design is modelled on. */
.wrap-game{max-width:920px}

/* The draft. Three prospects compared side by side only works if the same block
   sits at the same height on all three cards: a "Generational" tag or a longer
   backstory used to push one card's stat bars down and break the comparison. */
.draft-card{display:flex; flex-direction:column}
/* Fixed, not min: the generated names run from "Kai Ito" to three lines of
   "Jean-Baptiste Vandermeulen", and a wrapping name pushed everything below it down. */
.draft-head{display:flex; gap:10px; align-items:flex-start; height:56px; margin-bottom:9px}
.draft-name{color:var(--white); font-weight:700; line-height:1.25; font-size:13px;
  height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
/* fixed, and flex rather than inline-block: an inline tag adds ~4px of baseline
   descender space, so the card WITHOUT a talent sat 4px higher than the others */
.draft-talent{height:25px; margin-bottom:7px; display:flex; align-items:center}
.draft-desc{margin:0 0 8px; font-size:11px; line-height:1.45; color:var(--muted);
  height:3.2em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.draft-fam{font-size:11px; line-height:1.45; color:var(--muted); margin-bottom:10px;
  height:3.2em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.draft-budget{margin-bottom:10px}

/* Foldable reference blocks -------------------------------------------------
   The season result screen ran to 1070px because two tables nobody needs on
   arrival — the standings and the round-by-round — sat between the reader and
   the one decision the screen exists to ask. They fold now. */
.fold summary{list-style:none; cursor:pointer}
.fold summary::-webkit-details-marker{display:none}
.fold-s{display:flex; align-items:center; justify-content:space-between; gap:10px}
.fold-s::after{content:'▾'; color:var(--faint); font-size:11px; flex-shrink:0;
  transition:transform .15s}
.fold[open] .fold-s::after{transform:rotate(180deg)}
.fold-i{font-size:10.5px; color:var(--faint); text-align:right; line-height:1.35}
.fold summary:hover .fold-i,.fold summary:hover .fold-s::after{color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .fold-s::after{transition:none} }

/* Career decision screens ---------------------------------------------------
   The options must sit at the same height on every screen. Two things used to
   move them: the feedback strips above (now in the HUD column) and the brief
   itself, whose description runs from 31 to 120 characters. Fixed height with
   three lines of headroom — the longest brief in the data wraps to two. */
.decide-brief{height:88px; margin-bottom:12px; overflow:hidden}
.decide-d{margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden}

/* Continue-or-restart on entry */
.resume-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
@media (max-width:520px){ .resume-row{flex-direction:column} .resume-row .btn{width:100%} }

/* Season target -------------------------------------------------------------
   A career used to have no stated purpose beyond "get promoted eventually", so
   every season read the same. The contract now comes with a number: it sits in
   the HUD all year and is judged on the results screen. */
.goal-bar{display:flex; align-items:baseline; gap:8px; margin-top:9px; padding:6px 9px;
  border-left:2px solid var(--red); background:rgba(210,32,43,.06)}
.goal-k{font-family:var(--f-pixel); font-size:7.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); flex-shrink:0}
.goal-v{font-size:11px; line-height:1.35; color:var(--white)}
.goal-out.hit{border-color:#1F6B3A; background:rgba(34,197,94,.07)}
.goal-out.miss{border-color:#6B2027; background:rgba(210,32,43,.07)}

/* Predictor field selector --------------------------------------------------
   Three buttons whose labels are different lengths: on a phone two of them wrap
   to a second line and the row came out 27px / 41px / 41px. Equal by rule.
   Scoped to a class, NOT to the bare [data-field] attribute it used to match: the
   homepage weekend picker uses data-field too, and inherited a 42px min-height it
   had no reason to want. Shared stylesheet, so a global attribute selector is a trap. */
.fieldbtn{min-height:42px; display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.2}

/* What a historic driver was known for. Sits under his name in the driver panel: a
   fantasy grid is unreadable if the older half is just three-letter codes. */
.legend-note{margin:0 0 9px; padding:6px 9px; border-left:2px solid var(--red);
  background:rgba(210,32,43,.05); font-size:11px; line-height:1.5; color:var(--text)}

/* Race report story cards ---------------------------------------------------
   Replaces three label/body rows that were all the same size and the same grey,
   which made a report a flat slab of type with the interesting number buried in
   the middle of a sentence. Each card now leads with that number. */
.rep-win{border-left:3px solid var(--red); padding-left:8px; color:#fff}
.stories{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.story{border:1px solid var(--line); background:var(--panel-2,rgba(255,255,255,.015));
  padding:9px 10px; border-top-width:2px}
.story-gain{border-top-color:#22C55E}
.story-out{border-top-color:var(--red)}
.story-turn{border-top-color:#EAB308}
.story-l{font-family:var(--f-pixel); font-size:7.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.story-top{display:flex; align-items:baseline; gap:7px; margin-bottom:4px; min-width:0}
.story-fig{font-family:var(--f-mono); font-size:19px; line-height:1; font-weight:700; flex-shrink:0}
.story-who{font-size:12px; color:var(--white); font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.story-b{margin:0; font-size:11px; line-height:1.45; color:var(--muted)}
@media (max-width:760px){ .stories{grid-template-columns:1fr} }

/* AI: the header lockup -----------------------------------------------------
   The one thing on the site that is not the deterministic engine, is genuinely a model
   reading your race, and is rationed. An 11px grey eyebrow said none of that. */
.ai-head-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ai-mark{
  font-size:20px; line-height:1; color:#C9A9FF; flex-shrink:0;
  text-shadow:0 0 14px rgba(139,92,246,.75);
}
.ai-title{
  font-size:19px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.1; color:#EADCFF; min-width:0;
}
.ai-quota{
  margin-left:auto; font-size:11px; color:#9B87C4; white-space:nowrap;
  border:1px solid #3A2F52; border-radius:2px; padding:3px 8px;
}
.ai-quota .mono{font-family:var(--f-mono); color:#EADCFF}
.ai-pitch{margin:0; flex:1; min-width:210px; font-size:14px; line-height:1.5; color:var(--text)}
.ai-pitch em{color:#EADCFF; font-style:normal; font-weight:700}
@media (max-width:560px){
  .ai-title{font-size:16px}
  .ai-quota{margin-left:0}
}

/* AI: the wait --------------------------------------------------------------
   Fifteen seconds is a long time to look at a card that is not obviously alive, and the
   earlier version signalled it with 11px of changing grey text. Everything here is scaled
   up: a 76px orb, the stage in 22px, a full-width sweep and a taller equaliser, plus a
   light that travels across the whole card so the movement is visible from the corner of
   the eye rather than only when you are reading it. */
.ai-busy{position:relative; overflow:hidden}
.ai-busy::after{
  content:''; position:absolute; top:0; bottom:0; left:-40%; width:35%;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.16),transparent);
  animation:aisweep 2.3s ease-in-out infinite; pointer-events:none;
}
@keyframes aisweep{0%{left:-40%}100%{left:105%}}
.ai-work{display:flex; align-items:center; gap:18px; margin:16px 0 14px}
.ai-orb{
  position:relative; width:76px; height:76px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #5A4680; background:radial-gradient(circle,rgba(122,74,214,.42),transparent 72%);
}
.ai-orb span{font-size:32px; color:#E4D4FF; animation:aiorb 1.5s ease-in-out infinite}
.ai-orb::after,.ai-orb::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(139,92,246,.55); animation:aipulse 2s ease-out infinite;
}
.ai-orb::before{animation-delay:1s}
@keyframes aiorb{0%,100%{transform:scale(1); opacity:.8}50%{transform:scale(1.22); opacity:1}}
@keyframes aipulse{0%{transform:scale(.8); opacity:.85}100%{transform:scale(1.5); opacity:0}}
.ai-work-b{flex:1; min-width:0}
.ai-stage{
  font-size:22px; line-height:1.2; color:#F0E6FF; font-weight:700; letter-spacing:-.01em;
}
/* the ellipsis animates rather than sitting there as three dead dots */
.ai-stage::after{
  content:''; display:inline-block; width:1.1em; text-align:left;
  animation:aidots 1.4s steps(4,end) infinite;
}
@keyframes aidots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.ai-sub{font-size:12px; color:#9B87C4; margin-top:5px}
.ai-track{height:6px; background:#17141F; overflow:hidden; border-radius:3px}
.ai-track-f{height:100%; width:34%; background:linear-gradient(90deg,transparent,#A97BFF,transparent);
  animation:aitrack 1.4s ease-in-out infinite}
@keyframes aitrack{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
/* The equaliser. The markup for this existed but the class had no styles at all, so it
   rendered as an invisible empty div - a black gap at the foot of the card where the most
   visible movement was supposed to be. Bars are seeded by :nth-child so the wave is not
   uniform, and a scan line travels across them. */
.ai-scan{position:relative; overflow:hidden; margin-top:12px; height:0}
.ai-busy .ai-scan{height:78px}
.ai-bars{
  position:absolute; inset:0; display:flex; align-items:flex-end; gap:3px;
  padding:0 1px;
}
.ai-bars span{
  flex:1; min-width:0; height:22%; border-radius:1px;
  background:linear-gradient(180deg,#A97BFF,rgba(122,74,214,.22));
  animation:aibar 1.15s ease-in-out infinite alternate;
  transform-origin:bottom;
}
.ai-bars span:nth-child(3n){animation-duration:.85s}
.ai-bars span:nth-child(4n){animation-duration:1.45s}
.ai-bars span:nth-child(5n){animation-duration:1.05s}
@keyframes aibar{
  0%{height:14%; opacity:.45}
  100%{height:96%; opacity:1}
}
.ai-scan-line{
  position:absolute; top:0; bottom:0; width:2px; left:0;
  background:linear-gradient(180deg,transparent,#E4D4FF,transparent);
  box-shadow:0 0 12px 3px rgba(169,123,255,.55);
  animation:aiscan 2.6s linear infinite;
}
@keyframes aiscan{0%{left:-2%}100%{left:102%}}
@media (prefers-reduced-motion:reduce){
  .ai-orb span,.ai-orb::after,.ai-orb::before,.ai-track-f,.ai-busy::after,.ai-stage::after{animation:none}
  .ai-track-f{width:100%}
  .ai-stage::after{content:'…'}
}

/* Information pages ---------------------------------------------------------
   about / how-it-works / privacy / terms / contact. Generated by
   tools/make_pages.js so they all share one head and one shape. */
.page-head{padding:34px 0 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(210,32,43,.05),transparent 70%)}
.page-head .t-h1{margin:4px 0 0}
.page-lede{margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--muted); max-width:64ch}
.contact-big{font-size:17px; margin:4px 0 18px}
.contact-big a{color:var(--white); border-bottom:1px solid var(--red)}

/* Footer with columns, now that there is more than one kind of link. */
/* fr units, not fixed 220px columns: pinned widths left every link inside the leftmost
   40% of the footer with 622px of empty space to the right of them, which is what made the
   whole block read as lopsided. The brand cell is wider because it carries a sentence. */
.foot-cols{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:24px 30px; align-items:start;
}
.foot-h{font-family:var(--f-pixel); font-size:8px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px}
.foot-col a{display:block; font-size:12px; line-height:1.95; color:var(--faint)}
.foot-col a:hover{color:var(--white)}

.foot-brand{max-width:300px}
.foot-logo{
  display:inline-block; font-family:var(--f-pixel); font-size:10px; color:var(--white);
  white-space:nowrap; margin-bottom:9px;
}
.foot-logo:hover{text-decoration:none}
.foot-logo span{color:var(--red)}
.foot-tag{font-size:11.5px; line-height:1.65; color:var(--faint); margin:0}

/* The legal strip. It was a paragraph hanging off the bottom, 760px wide under a 466px
   block of links; as a ruled strip it reads as the fine print it is. */
.foot-base{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:8px 26px;
  align-items:baseline; margin-top:24px; padding-top:16px; border-top:1px solid var(--line);
}
.foot-copy{font-family:var(--f-mono); font-size:11px; color:var(--muted); white-space:nowrap}
.foot .disclaimer{font-size:10.5px; line-height:1.65; color:var(--faint); margin:0; max-width:none}

@media (max-width:820px){
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1; max-width:none}
}
@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr 1fr; gap:20px}
  .foot-base{grid-template-columns:1fr}
  .foot-copy{white-space:normal}
}

/* Winter driver market (championship, team mode) */
.mkt-h{font-family:var(--f-pixel); font-size:7.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px}