/* F1 Inlap brand layer: shared by every page on the public site (home, replay player, session
   summary, radio log). One source of truth for the type, the colour roles and the site chrome.

   Direction: a pit wall timing screen at night. Carbon surfaces, grid lines you feel rather
   than see, one signal red, and the four-colour sector stripe from the video graphics as the
   mark. Numbers are set in Geist Mono with tabular figures, because every number here is a
   time, a gap or a position that gets compared down a column.

   Depth: borders only, low-opacity (a technical tool, not a brochure).
   Radius: 6px controls, 12px panels, full pill for buttons. Spacing base: 4px. */

@font-face{font-family:"Geist";src:url(fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --font-ui:"Geist",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-num:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* surfaces, darkest to lightest: each step a few points of lightness, never a new hue */
  --carbon:#0b0b0d;      /* page */
  --tarmac:#111115;      /* panels */
  --tarmac-up:#17171c;   /* raised: hover, popovers */
  --pit:#08080a;         /* inset: inputs, table heads */
  --grid-line:rgb(255 255 255 / .08);
  --grid-line-strong:rgb(255 255 255 / .14);

  /* ink: primary, secondary, tertiary, muted */
  --ink-1:#f1f1f3; --ink-2:#c3c3cb; --ink-3:#8f8f99; --ink-4:#80808c;  /* --ink-4 5.04:1 on carbon, 4.58:1 on tarmac-up */

  /* one signal colour; everything else is structure. Contrast-checked (WCAG AA):
     --signal behind the --on-signal label 4.81:1, hover goes DARKER (5.69:1);
     --signal-ink is the same red lifted for small red TEXT on carbon (5.99:1). */
  --signal:#dc1c16; --signal-hover:#c8150f; --on-signal:#fbfbfc; --signal-ink:#ff4d45;

  /* timing semantics: data only, never decoration */
  --t-overall:#b14bff; --t-personal:#22e07a; --t-neither:#ffd400;

  /* sector stripe: the brand mark */
  --s1:#ff8000; --s2:#e10600; --s3:#00d2be; --s4:#3671c6;

  --r-control:6px; --r-panel:12px; --r-pill:999px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* the wordmark + sector stripe */
.inlap-mark{display:inline-flex;flex-direction:column;gap:5px;color:var(--ink-1);text-decoration:none;
  font:750 14px/1 var(--font-ui);letter-spacing:.07em;white-space:nowrap}
.inlap-mark::after{content:"";display:block;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--s1) 0 25%,var(--s2) 25% 50%,var(--s3) 50% 75%,var(--s4) 75%)}
.inlap-mark:hover{color:#fff}

/* site nav: one line, 56px, on every document page */
.inlap-nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--grid-line);
  background:color-mix(in srgb,var(--carbon) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.inlap-nav>div{max-width:1240px;margin:0 auto;height:56px;padding:0 20px;display:flex;align-items:center;gap:24px}
.inlap-nav .here{font:500 13px/1 var(--font-ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.inlap-nav nav{margin-left:auto;display:flex;align-items:center;gap:20px}
/* :not(.btn) so a button placed in the nav keeps its own colours (a plain `nav a` rule once
   painted the red "Watch on YouTube" pill's label red-on-red) */
.inlap-nav nav a:not(.btn){font:500 14px/1 var(--font-ui);color:var(--ink-3);text-decoration:none;white-space:nowrap}
/* 44px tap target; :where() keeps specificity at zero so .hide-sm / .hide-md still hide links */
:where(.inlap-nav nav a:not(.btn)){display:inline-flex;align-items:center;min-height:44px}
.inlap-nav nav a:not(.btn):hover{color:var(--ink-1)}
.inlap-nav nav a[aria-current="page"]{color:var(--ink-1)}
@media (max-width:640px){.inlap-nav .hide-sm{display:none}.inlap-nav>div{gap:14px;padding:0 16px}}
/* replay/session/radio headers: "All weekends" back link and a YouTube link that collapses to a
   44px icon button on phones (both stay; they used to be hidden on mobile) */
.inlap-nav nav a.nav-yt{gap:8px}
.inlap-nav nav a.nav-yt svg{width:18px;height:18px;flex:none}
.inlap-nav nav a.nav-yt svg.yt-i{display:none}
@media (max-width:640px){
  .inlap-nav nav{gap:6px}
  .inlap-nav nav a.nav-yt{justify-content:center;min-width:44px;border-radius:var(--r-pill)}
  .inlap-nav nav a.nav-yt svg.yt-i{display:block}
  .inlap-nav nav a.nav-yt .yt-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* footer shared by every page */
.inlap-foot{border-top:1px solid var(--grid-line);color:var(--ink-4);font:400 12.5px/1.65 var(--font-ui)}
.inlap-foot>div{max-width:1240px;margin:0 auto;padding:28px 20px 44px}
.inlap-foot p{margin:0 0 6px;max-width:80ch;text-wrap:pretty}
.inlap-foot a{color:var(--ink-3)}

/* visually hidden, still read by screen readers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* focus: visible on keyboard, never on click */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:var(--r-control);
  background:var(--signal);color:var(--on-signal);font:600 14px/1 var(--font-ui);text-decoration:none}
.skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- light theme ---------------------------------------------------------------------
   Follows the device unless the toggle picked one (html[data-theme], set by an inline boot
   script in every page's <head> before first paint, from localStorage "inlap-theme").
   Contrast-checked: --ink-4 4.69:1 on panels, --signal behind white label 5.45:1. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){--carbon:#f3f3f4;--tarmac:#e9e9ec;--tarmac-up:#e1e1e5;--pit:#fafafb;
    --grid-line:rgb(17 17 20 / .10);--grid-line-strong:rgb(17 17 20 / .18);
    --ink-1:#111114;--ink-2:#34343b;--ink-3:#5a5a63;--ink-4:#66666f;
    --signal:#cf0f08;--signal-hover:#b00c06;--signal-ink:#cf0f08;color-scheme:light}
}
:root[data-theme="light"]{--carbon:#f3f3f4;--tarmac:#e9e9ec;--tarmac-up:#e1e1e5;--pit:#fafafb;
    --grid-line:rgb(17 17 20 / .10);--grid-line-strong:rgb(17 17 20 / .18);
    --ink-1:#111114;--ink-2:#34343b;--ink-3:#5a5a63;--ink-4:#66666f;
    --signal:#cf0f08;--signal-hover:#b00c06;--signal-ink:#cf0f08;color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* theme toggle: 44px icon button showing the theme you would switch TO */
.theme-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--r-pill);
  border:0;background:none;color:var(--ink-3);cursor:pointer;padding:0;
  transition:background-color .15s var(--ease-out),color .15s var(--ease-out)}
.theme-btn:hover{background:var(--tarmac);color:var(--ink-1)}
.theme-btn:active{transform:scale(.94)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}

/* ---- scrollbars: thin, near-invisible until hovered (Ian: 'darker, blend into the page'), tuned to the theme so they recede into the page.
   Two mechanisms on purpose: scrollbar-color/-width (Chrome, Edge, Firefox) and the
   ::-webkit-scrollbar pseudo-elements (Safari). Chrome ignores the pseudo-elements once
   scrollbar-color is set, so the two never fight. */
:root{--sb-thumb:rgb(255 255 255 / .065);--sb-thumb-hover:rgb(255 255 255 / .16)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--sb-thumb:rgb(17 17 20 / .10);--sb-thumb-hover:rgb(17 17 20 / .24)}}
:root[data-theme="light"]{--sb-thumb:rgb(17 17 20 / .10);--sb-thumb-hover:rgb(17 17 20 / .24)}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}