/* ==========================================================================
   Rush AC Server / Rush of Central Texas / rushcentraltx.com
   style.css: the only stylesheet. Mobile-first, system fonts, no frameworks.
   Read DESIGN.md for tokens, class names and template markup.

   Contents
   1.  Tokens
   2.  Base and reset
   3.  Display face (shared condensed caps)
   4.  Utilities and icons
   5.  Layout
   6.  Header, brand, livery stripe
   7.  Navigation (bottom bar on phones, inline on desktop)
   8.  Status pill, lamp, status badge
   9.  Pit board (status hero)
   10. Headings and section heads
   11. Cards
   12. Grid slots and driver list
   13. Join block: address and steps
   14. Track cards
   15. Tags
   16. Buttons
   17. Start button and start lights
   18. Forms
   19. Alerts
   20. Tables, positions, lap times
   21. Session list
   22. Empty state and legend
   23. Footer and checkered strip
   24. Motion preferences
   25. Mockup-only helpers (delete in production)
   ========================================================================== */


/* 1. Tokens ----------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Brand */
  --c-black: #000000;        /* Grid black: page background */
  --c-white: #FFFFFF;        /* Board white: display type, plates */
  --c-orange: #FF7300;       /* RoCT orange: fills, stripes, primary action (7.7:1 on black; carry BLACK text on it, white only 2.7:1) */
  --c-orange-hover: #FF8A2E;
  --c-orange-press: #C75A00;
  --c-orange-text: #FF7F1A;  /* Orange for small text and icons on black/cards (8.3:1 on black, 7.5:1 on cards, 6.9:1 on hover rows). Kept saturated so it never drifts toward amber */
  --c-on-orange: #000000;    /* text and focus rings on orange fills */
  --c-error: #FF4D6A;        /* error red: wrong passcode, DNF (6.5:1 on black, 5.4:1 on hover rows). Cool-leaning so errors never read as brand orange */

  /* Neutrals */
  --c-frame: #161616;        /* pit board frame, nav bar */
  --c-surface: #101010;      /* cards */
  --c-surface-2: #1A1A1A;    /* row hover, raised */
  --c-surface-3: #262626;    /* secondary buttons, dark plates */
  --c-line: #262626;
  --c-line-strong: #3A3A3A;
  --c-text: #F2F2F2;         /* body copy */
  --c-text-2: #B8B8B8;       /* secondary */
  --c-text-3: #8A8A8A;       /* tertiary, labels (5.3:1 on cards) */

  /* Signals: flag and timing-screen vernacular */
  --c-green: #19D36B;        /* green flag: online, success */
  --c-amber: #FFC21A;        /* yellow flag: starting, pending, example data */
  --c-purple: #BD5EFF;       /* timing purple: fastest lap, records (5.2:1 on hover rows) */
  --c-lamp-off: #2A2A2A;     /* unlit lamp: offline */

  /* Type */
  --font-display: "DIN Condensed", "Bahnschrift Condensed", "Bahnschrift", "Roboto Condensed",
                  "sans-serif-condensed", "Arial Narrow", "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-num: "DIN Alternate", "Bahnschrift", "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Classical scale: 12 14 16 18 21 24 36 48 72 */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4.5rem;

  --ls-caps: 0.06em;         /* display caps */
  --ls-label: 0.14em;        /* small caps labels */

  /* Spacing: 4px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Shape */
  --r-sm: 2px;
  --r-md: 4px;
  --chamfer: 10px;           /* 45-degree cut corner, from the RUSH letterforms */

  /* Layout */
  --container: 1120px;
  --gutter: 16px;
  --header-h: 64px;
  --nav-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 150ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}


/* 2. Base and reset --------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-black);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* room for the fixed bottom nav on phones */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
img, svg { max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
code { font: inherit; }

::selection { background: var(--c-orange); color: var(--c-on-orange); }

:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}


/* 3. Display face ------------------------------------------------------------
   One block sets the condensed bold caps used by every display element.
   Components only add size, tracking and colour. */

.caps,
.label,
.page-title,
.section-title,
.card__title,
.brand__name,
.nav__link,
.status-pill,
.status-badge,
.pitboard__brand,
.pitboard__key,
.pitboard__value,
.pitboard__sub,
.track-card__name,
.tag,
.btn,
.btn-start,
.field__label,
.alert__title,
.table th,
.pos,
.session-link__track,
.steps > li::before,
.empty__title,
.site-footer__name,
.mock-banner,
.mock-divider,
.mock-state__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
}


/* 4. Utilities and icons ---------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-white);
  color: var(--c-black);
  font-weight: 700;
}
.skip-link:focus { top: var(--sp-3); }

/* Hidden SVG sprite. Not display:none, so gradients and clips inside still render. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.22em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.label {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  color: var(--c-text-3);
}

.muted { color: var(--c-text-3); }

.link {
  color: var(--c-white);
  text-decoration-color: var(--c-orange);
  text-decoration-thickness: 2px;
}
.link:hover { text-decoration-color: var(--c-white); }

.stack > * + * { margin-top: var(--stack, var(--sp-4)); }


/* 5. Layout ----------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.page { padding-block: var(--sp-5) var(--sp-7); }

.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* Status page: pit board + side column, track cards full width below */
/* minmax(0, 1fr) stops wide children (scrollers, tables) blowing out the column */
.layout-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
.layout-status__side {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.layout-status__full { margin-top: var(--sp-6); }

@media (min-width: 960px) {
  .layout-status {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-5);
    align-items: start;
  }
  .layout-status__full { grid-column: 1 / -1; }
}

/* Start page: one narrow centred column */
.layout-start {
  max-width: 460px;
  margin-inline: auto;
}

/* Results page: session list rail + main column */
.layout-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
.layout-results__main {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
}

@media (min-width: 960px) {
  .layout-results {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }
}


/* 6. Header, brand, livery stripe ------------------------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--c-black);
}

/* Livery stripe: heavy orange band, black gap, white pinline */
.site-header::after {
  content: "";
  display: block;
  height: 8px;
  background:
    linear-gradient(var(--c-orange), var(--c-orange)) top / 100% 4px no-repeat,
    linear-gradient(var(--c-white), var(--c-white)) bottom / 100% 1px no-repeat;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  width: 40px;
  height: 40px;
  flex: none;
}

.brand__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.brand__name {
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-caps);
  line-height: 1;
  color: var(--c-white);
  white-space: nowrap;
}

.brand__sub {
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--c-text-3);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .brand__mark { width: 44px; height: 44px; }
  .brand__name { font-size: var(--fs-2xl); }
}


/* 7. Navigation --------------------------------------------------------------
   Same markup everywhere. Phones: fixed bottom tab bar within thumb reach.
   768px and up: inline in the header. */

.nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.94);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav {
    background: rgba(0, 0, 0, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--nav-h);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.nav__link .icon {
  width: 22px;
  height: 22px;
}

.nav__link:hover { color: var(--c-white); }

.nav__link[aria-current="page"] { color: var(--c-white); }

.nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 32px;
  height: 3px;
  background: var(--c-orange);
  transform: translateX(-50%);
}

.nav__link:focus-visible { outline-offset: -4px; }

@media (min-width: 768px) {
  .nav {
    position: static;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav__list {
    display: flex;
    gap: var(--sp-1);
  }

  .nav__link {
    flex-direction: row;
    gap: var(--sp-2);
    height: var(--header-h);
    padding: 0 var(--sp-4);
    font-size: var(--fs-md);
    letter-spacing: 0.1em;
  }

  .nav__link .icon { width: 18px; height: 18px; }

  .nav__link[aria-current="page"]::before {
    top: auto;
    bottom: 12px;
    left: var(--sp-4);
    right: var(--sp-4);
    width: auto;
    height: 3px;
    transform: skewX(-24deg);
  }
}


/* 8. Status pill, lamp, status badge -----------------------------------------
   State classes (.is-online / .is-starting / .is-offline) set --state on any
   wrapper; every .lamp inside reads it. */

.is-online { --state: var(--c-green); }
.is-starting { --state: var(--c-amber); }
.is-offline { --state: var(--c-lamp-off); }

.lamp {
  --lamp: var(--state, var(--c-lamp-off));
  display: inline-block;
  flex: none;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6) 0 12%, transparent 46%),
    var(--lamp);
  box-shadow:
    0 0 0 0.08em var(--c-black),
    0 0 0 0.14em var(--c-line-strong),
    0 0 0.7em 0.04em color-mix(in srgb, var(--lamp) 65%, transparent);
}

.is-offline .lamp {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.1) 0 12%, transparent 46%),
    var(--c-lamp-off);
  box-shadow:
    inset 0 0.08em 0.18em rgba(0, 0, 0, 0.85),
    0 0 0 0.08em var(--c-black),
    0 0 0 0.14em var(--c-line-strong);
}

.is-starting .lamp { animation: lamp-pulse 1.1s ease-in-out infinite; }

@keyframes lamp-pulse {
  50% { opacity: 0.35; }
}

/* Small status indicator in the header, on every page */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  flex: none;
  padding: 0.5em 0.75em 0.42em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  line-height: 1;
  color: var(--c-white);
  white-space: nowrap;
}

.status-pill .lamp { width: 0.65em; height: 0.65em; }
.status-pill.is-offline { color: var(--c-text-2); }

/* The big ONLINE / OFFLINE word */
.status-badge {
  display: flex;
  align-items: center;
  gap: 0.24em;
  margin: 0;
  font-size: clamp(3rem, 15vw, 7rem);
  letter-spacing: 0.02em;
  line-height: 0.86;
  color: var(--c-white);
}

.status-badge .lamp {
  width: 0.4em;
  height: 0.4em;
}

.status-badge__text { text-box: trim-both cap alphabetic; }

.status-badge.is-offline { color: var(--c-text-2); }
.status-badge.is-starting { color: var(--c-amber); }


/* 9. Pit board ---------------------------------------------------------------
   The status hero. A slotted frame with black plates and big white letters,
   like the board held over the pit wall. */

.pitboard {
  --plate-gap: 6px;
  padding: 0 var(--plate-gap) var(--plate-gap);
  background: var(--c-frame);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
}

.pitboard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
}

.pitboard__brand {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  line-height: 1;
  color: var(--c-orange-text);
}

.pitboard__updated {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.pitboard__row {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--c-black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.pitboard__row + .pitboard__row,
.pitboard__split { margin-top: var(--plate-gap); }

/* Status plate carries the state colour on its leading edge */
.pitboard__row--status {
  padding-block: var(--sp-4) var(--sp-5);
  box-shadow:
    inset 4px 0 0 var(--state, var(--c-lamp-off)),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.pitboard__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--plate-gap);
}

.pitboard__key {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  line-height: 1;
  color: var(--c-text-3);
}

.pitboard__value {
  display: block;
  font-size: clamp(2.25rem, 12vw, 4.5rem);
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--c-white);
  overflow-wrap: anywhere;
  text-box: trim-both cap alphabetic;
}

.pitboard__value--md { font-size: clamp(1.75rem, 8.5vw, 3rem); }

.pitboard__value small {
  margin-left: 0.08em;
  font-size: 0.5em;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
}

.pitboard__sub {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-caps);
  line-height: 1.1;
  color: var(--c-text-2);
}

.pitboard__sub b {
  font-weight: inherit;
  color: var(--c-text-3);
  margin-right: 0.3em;
}

.pitboard__action { margin-top: var(--sp-5); }

.pitboard.is-offline .pitboard__row:not(.pitboard__row--status) .pitboard__value { color: var(--c-text-3); }

@media (min-width: 768px) {
  .pitboard { --plate-gap: 8px; }
  .pitboard__head { padding-inline: var(--sp-3); }
  .pitboard__row { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .pitboard__row--status { padding-block: var(--sp-5) var(--sp-6); }
}


/* 10. Headings and section heads -------------------------------------------- */

.page-title {
  font-size: var(--fs-3xl);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--c-white);
}

@media (min-width: 768px) {
  .page-title { font-size: var(--fs-4xl); }
}

/* Double racing stripe marks a section */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-caps);
  line-height: 1.1;
  color: var(--c-white);
}

.section-title::before {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.6em;
  background: linear-gradient(90deg, var(--c-orange) 0 42%, transparent 42% 62%, var(--c-orange) 62%);
  transform: skewX(-24deg);
}

@media (min-width: 768px) {
  .section-title { font-size: var(--fs-2xl); }
}

.section-head {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.section-head__note {
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

@media (min-width: 768px) {
  .section-head {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--sp-5);
  }
}


/* 11. Cards ----------------------------------------------------------------- */

.card {
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0;
}

.card__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-caps);
  line-height: 1.1;
  color: var(--c-white);
}

.card__title .icon { color: var(--c-orange-text); }

.card__meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.card__body { padding: var(--sp-4); }

.card__foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* Use when a table or list should run edge to edge */
.card--flush .card__body { padding: var(--sp-3) 0 0; }

@media (min-width: 768px) {
  .card__head { padding: var(--sp-5) var(--sp-5) 0; }
  .card__body { padding: var(--sp-5); }
  .card__foot { padding: var(--sp-3) var(--sp-5); }
  .card--flush .card__body { padding: var(--sp-4) 0 0; }
}


/* 12. Grid slots and driver list --------------------------------------------
   Grid slots draw the starting grid: one painted box per server slot,
   staggered in pairs, painted white when a driver holds it (white, not orange,
   so the Join button stays the only orange fill in view). */

.grid-slots {
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
  gap: 12px 5px;
  padding-bottom: 9px;
}

.grid-slots > span {
  height: 22px;
  border: 2px solid var(--c-line-strong);
  border-bottom: 0;
}

.grid-slots > span:nth-child(even) { transform: translateY(9px); }

.grid-slots > .is-taken {
  background: var(--c-white);
  border-color: var(--c-white);
}

.driver-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.driver-list__head,
.driver-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.driver-list__head {
  margin-top: var(--sp-5);
  padding-bottom: var(--sp-2);
  font-size: var(--fs-xs);
}

.driver-list li {
  padding: 10px 0;
  border-top: 1px solid var(--c-line);
}

.driver-list__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.driver-list__time {
  flex: none;
  color: var(--c-text-2);
  font-weight: 700;
}

.driver-list__time.is-empty {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}


/* 13. Join block: address and steps ----------------------------------------- */

.address {
  display: flex;
  align-items: stretch;
  background: var(--c-black);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
}

.address__value {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--c-white);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.address .btn {
  min-height: 100%;
  border: 0;
  border-left: 1px solid var(--c-line-strong);
  border-radius: 0;
}

@media (min-width: 400px) {
  .address__value { font-size: var(--fs-2xl); }
}

/* Numbered plates, only for real sequences */
.steps {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text-2);
  counter-increment: step;
}

.steps > li::before {
  --chamfer: 6px;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--c-white);
  color: var(--c-black);
  font-size: var(--fs-lg);
  line-height: 1;
}

.steps strong { color: var(--c-white); font-weight: 600; }


/* 14. Track cards ------------------------------------------------------------
   Data only, not links. Row layout on phones, columns from 768px. */

.track-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.track-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}

.track-card__map {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  padding: 8px;
  background: var(--c-black);
}

.track-card__map svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.track-card__map .track {
  fill: none;
  stroke: var(--c-text-3);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.track-card__map .sf {
  fill: none;
  stroke: var(--c-orange);
  stroke-width: 5;
  stroke-linecap: square;
}

.track-card .tag { margin-bottom: var(--sp-2); }

.track-card__name {
  font-size: var(--fs-2xl);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--c-white);
}

.track-card__place {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.track-card__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}

.track-card__facts dt { color: var(--c-text-3); }
.track-card__facts dd { min-width: 0; color: var(--c-text); }

/* Top edge + the On-track tag mark it; a full orange frame on top of those was a third orange */
.track-card.is-current {
  border-color: var(--c-line-strong);
  box-shadow: inset 0 3px 0 var(--c-orange);
}

.track-card.is-current .track { stroke: var(--c-white); }

@media (min-width: 768px) {
  .track-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .track-card {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    padding: var(--sp-4);
  }

  .track-card__map { padding: var(--sp-4); }
}


/* 15. Tags ------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.36em 0.6em;
  background: var(--c-surface-3);
  color: var(--c-text);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.tag--live,
.tag--race { background: var(--c-orange); color: var(--c-on-orange); }
.tag--qualifying { background: var(--c-white); color: var(--c-black); }
.tag--practice { background: var(--c-surface-3); color: var(--c-text); }

.tag--live,
.tag--race,
.tag--qualifying,
.tag--practice { --chamfer: 5px; }

/* Marks sample data in mockups and docs */
.tag--example {
  background: transparent;
  color: var(--c-amber);
  box-shadow: inset 0 0 0 1px currentColor;
}


/* 16. Buttons ----------------------------------------------------------------
   Chamfered corners are reserved for primary actions. */

.btn {
  --btn-bg: var(--c-surface-3);
  --btn-fg: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 1.1em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn .icon { width: 1.1em; height: 1.1em; vertical-align: 0; }

.btn:hover { --btn-bg: var(--c-line-strong); }
.btn:active { --btn-bg: var(--c-surface-2); }

.btn--primary {
  --btn-bg: var(--c-orange);
  --btn-fg: var(--c-on-orange);
  --chamfer: 9px;
  border: 0;
  border-radius: 0;
}
.btn--primary:hover { --btn-bg: var(--c-orange-hover); }
.btn--primary:active { --btn-bg: var(--c-orange-press); }
/* Inset ring sits on the orange: black (7.7:1), never white (2.7:1) */
.btn--primary:focus-visible { outline-color: var(--c-on-orange); outline-offset: -5px; }

.btn--ghost {
  --btn-bg: transparent;
  border-color: var(--c-line-strong);
}
.btn--ghost:hover { --btn-bg: var(--c-surface-2); border-color: var(--c-text-3); }

.btn--sm {
  min-height: 36px;
  padding-inline: 0.85em;
  font-size: var(--fs-sm);
}

.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}


/* Shared 45-degree chamfer */
.btn--primary,
.btn-start,
.pos,
.steps > li::before,
.tag--live,
.tag--race,
.tag--qualifying,
.tag--practice {
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
}


/* 17. Start button and start lights ------------------------------------------
   The one big button on the Start page. Its top is a start-light gantry:
   five lamps that light in sequence while the server wakes. */

.btn-start {
  --chamfer: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-5);
  width: 100%;
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-6);
  background: var(--c-orange);
  color: var(--c-on-orange);
  border: 0;
  font-size: clamp(2rem, 10vw, 3rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn-start:hover { background: var(--c-orange-hover); }
.btn-start:active { background: var(--c-orange-press); }
.btn-start:focus-visible { outline: 3px solid var(--c-on-orange); outline-offset: -9px; }

.btn-start__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}

.btn-start__label .icon {
  width: 0.72em;
  height: 0.72em;
  stroke-width: 2.6;
  vertical-align: 0;
}

.start-lights {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3.5vw, 16px);
  margin-inline: calc(-1 * var(--sp-4));
  padding: 14px var(--sp-4);
  background: var(--c-black);
  box-shadow: inset 0 -2px 0 var(--c-orange-press);
}

.start-lights > i {
  position: relative;
  width: clamp(22px, 7vw, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2A1606;     /* unlit lens: very dark burnt orange, so it reads as a lamp, not a hole */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 0 2px var(--c-line-strong);
}

.start-lights > i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFE6CC 0 8%, var(--c-orange-hover) 34%, var(--c-orange-press) 74%);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--c-orange) 60%, transparent);
  opacity: 0;
  transition: opacity 80ms linear;
}

/* Pressing lights the whole gantry */
.btn-start:active .start-lights > i::after { opacity: 1; }

/* Server-rendered after a correct passcode */
.btn-start.is-starting {
  background: var(--c-orange-press);
  cursor: progress;
}

.btn-start.is-starting .start-lights > i:nth-child(1)::after { animation: light-1 4.5s infinite; }
.btn-start.is-starting .start-lights > i:nth-child(2)::after { animation: light-2 4.5s infinite; }
.btn-start.is-starting .start-lights > i:nth-child(3)::after { animation: light-3 4.5s infinite; }
.btn-start.is-starting .start-lights > i:nth-child(4)::after { animation: light-4 4.5s infinite; }
.btn-start.is-starting .start-lights > i:nth-child(5)::after { animation: light-5 4.5s infinite; }

@keyframes light-1 { 0%, 11% { opacity: 0; } 12%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes light-2 { 0%, 23% { opacity: 0; } 24%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes light-3 { 0%, 35% { opacity: 0; } 36%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes light-4 { 0%, 47% { opacity: 0; } 48%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes light-5 { 0%, 59% { opacity: 0; } 60%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }


/* 18. Forms ----------------------------------------------------------------- */

.field {
  display: grid;
  gap: var(--sp-2);
}

.field__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  color: var(--c-text-2);
}

.field__label .icon { width: 1.05em; height: 1.05em; color: var(--c-text-3); }

.field__input {
  width: 100%;
  min-height: 60px;
  padding: 0 var(--sp-4);
  background: var(--c-black);
  color: var(--c-white);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.24em;
  transition: border-color var(--dur) var(--ease);
}

.field__input:hover { border-color: var(--c-text-3); }

.field__input:focus-visible {
  border-color: var(--c-white);
  outline: 2px solid var(--c-white);
  outline-offset: 2px;
}

.field__hint {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-error);
}

.field.is-invalid .field__input,
.field__input[aria-invalid="true"] { border-color: var(--c-error); }


/* 19. Alerts -----------------------------------------------------------------
   The leading edge is the flag: green, yellow, red, white. */

.alert {
  --alert: var(--c-white);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--alert);
  border-radius: var(--r-sm);
}

.alert__icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--alert);
}

.alert__title {
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--c-white);
}

.alert__body {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.alert__body .num { color: var(--c-white); font-weight: 700; }

.alert--success { --alert: var(--c-green); }
.alert--pending,
.alert--warning { --alert: var(--c-amber); }
.alert--error { --alert: var(--c-error); }
.alert--info { --alert: var(--c-white); }


/* 20. Tables, positions, lap times ------------------------------------------ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  font-size: var(--fs-sm);
}

.table caption { text-align: left; }

.table th {
  padding: var(--sp-2) 6px;
  border-bottom: 1px solid var(--c-line-strong);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  color: var(--c-text-3);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}

.table tr > :first-child { padding-left: var(--sp-4); }
.table tr > :last-child { padding-right: var(--sp-4); }

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-surface-2); }

.table .t-num { text-align: right; white-space: nowrap; }
.table .t-pos { width: 1%; }

/* Optional columns appear from 520px */
.table .col-opt { display: none; }

@media (min-width: 520px) {
  .table .col-opt { display: table-cell; }
}

@media (min-width: 768px) {
  .table th { padding-inline: var(--sp-3); }
  .table td { padding: var(--sp-3); }
  .table tr > :first-child { padding-left: var(--sp-5); }
  .table tr > :last-child { padding-right: var(--sp-5); }
}

/* Position plate: P1 orange, podium white, rest dark */
.pos {
  --chamfer: 6px;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.3em;
  background: var(--c-surface-3);
  color: var(--c-white);
  font-size: var(--fs-lg);
  line-height: 1;
}

.pos--p1 { background: var(--c-orange); color: var(--c-on-orange); }
.pos--podium { background: var(--c-white); color: var(--c-black); }

.driver {
  font-weight: 600;
  color: var(--c-white);
  white-space: nowrap;
}

.driver__note {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-3);
}

.laptime {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  color: var(--c-white);
  white-space: nowrap;
}

/* Timing-screen purple: ONLY an all-time record for that track/layout (matches the Records page). A session's fastest lap is shown neutral. */
.laptime--record { color: var(--c-purple); }

.gap {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--c-text-2);
  white-space: nowrap;
}

.gap--dnf { color: var(--c-error); }


/* 21. Session list -----------------------------------------------------------
   Horizontal scroller on phones, vertical rail from 960px. */

.session-list {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-4) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) var(--sp-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}

.session-list > li {
  flex: 0 0 min(76%, 248px);
  scroll-snap-align: start;
}

.session-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  height: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}

.session-link:hover { border-color: var(--c-line-strong); }
.session-link:focus-visible { outline-offset: -3px; }   /* the scroller would clip an outside ring */

.session-link[aria-current="page"] {
  border-color: var(--c-orange);
  box-shadow: inset 4px 0 0 var(--c-orange);
}

.session-link__track {
  font-size: var(--fs-xl);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--c-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-link__when,
.session-link__stat {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.session-link__when { color: var(--c-text-2); }
.session-link__stat { color: var(--c-text-3); }

@media (min-width: 960px) {
  .session-list {
    flex-direction: column;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .session-list > li { flex: none; }
}


/* 22. Empty state and legend ------------------------------------------------ */

.empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-sm);
  text-align: center;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.empty .icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-1);
  color: var(--c-text-3);
}

.empty__title {
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-caps);
  color: var(--c-white);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.legend__swatch {
  width: 10px;
  height: 10px;
  background: var(--swatch, var(--c-text-3));
}

.legend__swatch--purple { --swatch: var(--c-purple); }
.legend__swatch--orange,
.legend__swatch--red { --swatch: var(--c-orange); }   /* --red: legacy name, kept for old markup */


/* 23. Footer and checkered strip -------------------------------------------- */

.site-footer {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--c-line);
}

/* Finish line */
.site-footer::before {
  content: "";
  display: block;
  height: 16px;
  background:
    conic-gradient(var(--c-white) 0 25%, var(--c-black) 0 50%, var(--c-white) 0 75%, var(--c-black) 0)
    0 0 / 16px 16px;
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-5) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.site-footer__mark { width: 36px; height: 36px; flex: none; }

.site-footer__name {
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-caps);
  line-height: 1.1;
  color: var(--c-white);
}

.site-footer__note { max-width: 60ch; }

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-6);
  }
  .site-footer__note { justify-self: end; text-align: right; }
}


/* 24. Motion preferences ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .is-starting .lamp { animation: none; }

  /* Show the gantry fully lit instead of sequencing it */
  .btn-start.is-starting .start-lights > i::after {
    animation: none !important;
    opacity: 1;
  }
}


/* 25. Mockup-only helpers ----------------------------------------------------
   Used by mockup.html to label pages and sample data. Delete in production. */

.mock-banner {
  padding: var(--sp-2) var(--gutter);
  background: var(--c-amber);
  color: var(--c-black);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
}

.mock-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  color: var(--c-amber);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
}

.mock-divider::before,
.mock-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.mock-divider::before { flex: 0 0 var(--sp-5); }

.mock-states {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}

.mock-state {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.mock-state__label {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-label);
  color: var(--c-amber);
}

@media (min-width: 960px) {
  .mock-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}