/* InspirePerformance design tokens: Night track.
   Ink ground with a blue cast, chalk type, one committed ultramarine signal, clay for heat. */
@font-face { font-family: "Big Shoulders"; src: url("../fonts/BigShoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/HostGrotesk.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/HostGrotesk-Italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --ink: #0a0b10;
  --ink-2: #10121a;
  --ink-3: #171a25;
  --line: rgba(236, 234, 228, .12);
  --line-2: rgba(236, 234, 228, .22);
  --chalk: #eceae4;
  --chalk-2: #cfcfd6;      /* secondary text: 12:1 on ink */
  --chalk-3: #a9aab5;      /* tertiary text: 8:1 on ink */
  --signal: #2e2bff;
  --signal-deep: #1c19c9;
  --signal-hi: #8b89ff;      /* signal as text on ink: 5.9:1 */
  --signal-wash: rgba(46, 43, 255, .16);
  --clay: #e2643c;           /* heat: live, injury, overdue */
  --clay-wash: rgba(226, 100, 60, .14);
  --go: #45d69b;
  --go-wash: rgba(69, 214, 155, .13);
  --steady: #f0c14b;
  --steady-wash: rgba(240, 193, 75, .13);

  --f-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --f-body: "Host Grotesk", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0: clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --step-4: clamp(2.8rem, 2rem + 4vw, 5.5rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --r: 3px;
  --r-2: 6px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-gun: cubic-bezier(.7, 0, .2, 1);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--chalk); font: 400 var(--step-0)/1.55 var(--f-body); font-kerning: normal; font-feature-settings: "calt" 0; /* keeps "4X1" in postal codes from becoming a multiplication sign */ -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 2px; }
input, textarea { caret-color: var(--signal-hi); }
html { scrollbar-color: #2b2f3e var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2b2f3e; border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--signal); }
.num, td.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: .78em; letter-spacing: .06em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 999; background: var(--signal); color: #fff; padding: var(--s-2) var(--s-4); }
.skip:focus { top: var(--s-4); }

/* ------------------------------------------------------------------ readability
   Prefixed with html so these win over component styles in site.css, app.css and area files regardless of load order.
   Small text is never below about 14px, labels are never the faint tone, and body copy sits a touch heavier. */
html body { font-weight: 420; line-height: 1.6; }
html .mono { font-size: .8rem; letter-spacing: .07em; }
html .faint, html .opt { color: var(--chalk-2); }
html .muted { color: var(--chalk-2); }
html .hint, html .fhint, html .fine { font-size: .95rem; color: var(--chalk-2); line-height: 1.5; }
html .ferr, html .err { font-size: .95rem; font-weight: 550; }

/* Public forms (booking request, contact, lane finder) */
html .formcard label, html .formcard legend { font-size: 1rem; font-weight: 650; }
html .in { font-size: 1.02rem; }
html .in::placeholder { color: var(--chalk-3); }
html .chips span { font-size: .98rem; min-height: 46px; }
html .slotpick b { font-size: 1.3rem; }
html .slotpick small { font-size: .95rem; color: var(--chalk-2); line-height: 1.35; }
html .slotpick input:checked + span small { color: #fff; }
html .aside-list li { font-size: 1.05rem; line-height: 1.55; }
html .aside-list .mono { color: var(--chalk-2); font-size: .82rem; }
html .rq-nav a { color: var(--chalk-2); }
html .rq-nav b { font-size: .82rem; }
html .rq-nav span { font-size: .95rem; }
html .rq-skip { font-size: 1rem; }
html .page-lede { color: var(--chalk); }
html .sheet-lane { font-size: .76rem; color: var(--chalk-2); }
html .lane-meta, html .board-geo, html .ftr-col h3 { color: var(--chalk-2); }
html .telemetry { color: var(--chalk); }

/* App screens */
html table.data th { font-size: .78rem; color: var(--chalk-2); }
html .stat dt { font-size: .9rem; color: var(--chalk-2); }
html .list .meta, html .small { font-size: .92rem; }
html .badge { font-size: .8rem; }
html .chart .axis { fill: var(--chalk-2); }
/* The phone mock-up on the home page is a scaled drawing; keep its labels at drawing scale. */
html .phone .mono, html .phone .ph-items { font-size: .6rem; letter-spacing: .06em; }
html .rq-nav ol { gap: 10px; }
html .rq-nav span { font-size: .9rem; padding-right: .25rem; }