/* Sim Speed Racing design system, domains#23 redesign (2026-10-14), built on research/design/COMPETITORS.md Parts 1 and 2.
   Direction "timing screen": dark chrome and hero like the gear makers (7 of 7), light reading pages (4 of 7 and the
   operator's hybrid), data set in mono like a pit-wall timing monitor, a checker result in place of photography.
   Tokens first; no raw colour below this block (tests/test_brand_tokens.py). Ratios: research/design/contrast.py. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/Archivo-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexMono-500.woff2) format("woff2")}
:root{
  /* dark chrome */
  --asphalt:#0B0E13; --pitwall:#131922; --panel:#1A212C; --lined:#2B3442; --chalk:#EEF1F4; --fog:#A3AEBD;
  /* light reading pages */
  --paper:#FFFFFF; --ground:#F4F5F1; --ink:#0F141B; --graphite:#48515E; --rule:#D9DDD6; --control:#6F7783;
  /* one accent: green, the hue none of the seven gear makers uses (gold, yellow, red, orange, cyan) */
  --green:#8FE24B; --greendeep:#1D6B34; --greenhover:#175A2B;
  /* answer states: works / unknown / does not work */
  --amber:#F5B83D; --amberdeep:#835500; --red:#FF6B6B; --reddeep:#B3261E;
  /* type: one variable family at two widths, plus mono for data */
  --font-display:"Archivo","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --font-text:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wd-display:68%;
  /* type scale, ratio 1.25 from 17px text */
  --t-xs:.8125rem; --t-sm:.9375rem; --t-0:1.0625rem; --t-1:1.328rem; --t-2:1.66rem; --t-3:2.075rem; --t-4:2.594rem; --t-5:3.24rem; --t-6:4.05rem; --t-7:5.06rem;
  /* spacing, 4-point grid */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem;
  --radius:2px; --measure:66ch; --maxw:74rem; --target:2.75rem; --bar:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--t-0)/1.6 var(--font-text);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{width:min(100% - 2rem,var(--maxw));margin-inline:auto}
h1,h2,h3{font-family:var(--font-display);font-stretch:var(--wd-display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;margin:0 0 var(--s4);text-wrap:balance}
h1{font-size:clamp(var(--t-5),9vw,var(--t-7));line-height:.92}
h2{font-size:clamp(var(--t-3),4.5vw,var(--t-4));line-height:.95}
h3{font-size:var(--t-1);line-height:1.05;font-weight:750}
p{margin:0 0 var(--s4);max-width:var(--measure)}
a{color:var(--greendeep);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--greenhover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--greendeep);outline-offset:3px}
.dark :focus-visible{outline-color:var(--green)}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s4);top:var(--s4);background:var(--paper);color:var(--ink);padding:var(--s2) var(--s4);z-index:9}
.data,.mono{font-family:var(--font-data);font-weight:500;font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
code{font-family:var(--font-data);font-size:.88em}
.muted{color:var(--graphite)} .dark .muted{color:var(--fog)}
/* wordmark: the approved corner glyph, set in the display width */
.wm{display:inline-flex;align-items:center;gap:.45em;font:800 1.55rem/1 var(--font-display);font-stretch:var(--wd-display);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;color:var(--chalk);white-space:nowrap}
.wm svg{width:1.3em;height:1.3em;flex:none;color:var(--green)}
.wm b{color:var(--green);font-weight:800}
.glyph{stroke:currentColor;fill:none;stroke-width:3.4;stroke-linejoin:miter;stroke-linecap:butt}
/* buttons: one filled, one outlined; label in the display width */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3rem;padding:0 var(--s6);border:2px solid transparent;border-radius:var(--radius);font:800 1.25rem/1 var(--font-display);font-stretch:var(--wd-display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn::after{content:"";width:.5em;height:.5em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.1em}
.btn-line-dark::after,.btn-line::after,.nav-cta::after{display:none}
.btn-flag{background:var(--green);color:var(--asphalt)} .btn-flag:hover{background:var(--chalk);color:var(--asphalt)}
.btn-line-dark{border-color:var(--fog);color:var(--chalk);background:transparent} .btn-line-dark:hover{border-color:var(--chalk);background:var(--chalk);color:var(--asphalt)}
.btn-go{background:var(--greendeep);color:var(--paper)} .btn-go:hover{background:var(--greenhover);color:var(--paper)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent} .btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
/* dark chrome */
.dark{background:var(--asphalt);color:var(--chalk)}
.dark a{color:var(--green)} .dark a.btn-line-dark{color:var(--chalk)} .dark a.btn-flag{color:var(--asphalt)} .dark a.wm{color:var(--chalk)}
.disclosure{background:var(--pitwall);color:var(--fog);font-size:var(--t-xs);padding:var(--s2) 0;border-bottom:1px solid var(--lined)}
.disclosure .wrap{display:flex;gap:var(--s1) var(--s4);flex-wrap:wrap;justify-content:space-between}
.nav{border-bottom:1px solid var(--lined)}
.nav .wrap{display:flex;align-items:center;gap:var(--s4);min-height:4.5rem}
.nav ul{list-style:none;display:flex;gap:var(--s1) var(--s6);margin:0 auto 0 var(--s8);padding:0}
.nav ul a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--chalk);text-decoration:none;font:700 1.125rem/1 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.06em}
.nav ul a:hover{color:var(--green)}
.nav ul a[aria-current]{color:var(--green);box-shadow:inset 0 calc(-1 * var(--bar)) var(--green)}
/* result card: what the checker returns, styled as a timing-screen panel */
.spec{background:var(--panel);color:var(--chalk);border:1px solid var(--lined);border-top:var(--bar) solid var(--green);border-radius:var(--radius);padding:var(--s6);width:100%;max-width:27rem}
.spec .spec-name{margin:0;font:800 var(--t-3)/1 var(--font-display);font-stretch:var(--wd-display);text-transform:uppercase}
.spec .kind{margin:var(--s1) 0 var(--s5);color:var(--fog)}
.spec dl{margin:0}
.spec .row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--lined)}
.spec .row:last-child{border-bottom:1px solid var(--lined)}
.spec dt{font-family:var(--font-data);font-weight:500;font-size:var(--t-sm);letter-spacing:.04em;text-transform:uppercase}
.spec dd{margin:0}
.spec .quote{margin:var(--s4) 0 0;font-size:var(--t-sm);color:var(--chalk)}
.spec .src{margin:var(--s2) 0 0;font-size:var(--t-xs);color:var(--fog)}
.spec .src a{color:inherit}
.chip{display:inline-flex;align-items:center;gap:.45em;font:500 var(--t-xs)/1.2 var(--font-data);text-transform:uppercase;letter-spacing:.06em}
.chip::before{content:"";width:.7em;height:.7em;flex:none}
.chip.yes{color:var(--greendeep)} .chip.yes::before{background:currentColor;border-radius:50%}
.chip.no{color:var(--reddeep)} .chip.no::before{background:currentColor;transform:rotate(45deg)}
.chip.unk{color:var(--amberdeep)} .chip.unk::before{border:2px solid currentColor}
.dark .chip.yes{color:var(--green)} .dark .chip.no{color:var(--red)} .dark .chip.unk{color:var(--amber)}
/* tables */
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th,td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--font-data);font-weight:500;font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
td.num{font-family:var(--font-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
/* operator placeholder: visible on DEV, never mistaken for copy */
.todo{border:2px dashed var(--amberdeep);background:var(--paper);padding:var(--s4) var(--s5);margin:var(--s6) 0;max-width:var(--measure)}
.todo p{margin:0 0 var(--s2)} .todo p:last-child{margin:0}
.todo .data{color:var(--amberdeep);display:block;margin-bottom:var(--s2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}