/* ==========================================================================
   Design tokens
   Transcribed from data/design-tokens.tokens.json (Figma "Racing" design
   system export). Re-run this transcription by hand if that file changes —
   it's the source of truth; this file is a plain-CSS mirror of it since the
   project has no build step to generate one automatically.
   ========================================================================== */
:root {
  /* ---- Racing / Primitives ---- */
  --racing-neutral-0: #ffffff;
  --racing-neutral-200: #dddddd;
  --racing-neutral-500: #9c9c9c;
  --racing-neutral-600: #6a6a6a;
  --racing-neutral-900: #1b1b19;
  --racing-neutral-950: #070707;
  --racing-neutral-1000: #000000;
  --racing-warm-neutral-100: #e8e6e1;
  --racing-red-300: #f38880;
  --racing-red-500: #ff2a1e;
  --racing-red-700: #c12118;
  --racing-yellow-100: #f9f7cd;
  --racing-yellow-300: #fff873;
  --racing-olive-500: #a9a333;
  --racing-green-400: #80fb64;
  --racing-purple-400: #da64fb;

  /* ---- Racing / Semantic — color ---- */
  --color-fg-primary: var(--racing-neutral-0);
  --color-fg-secondary: var(--racing-neutral-500);
  --color-fg-muted: var(--racing-neutral-600);
  --color-fg-subtle: var(--racing-neutral-200);

  --color-surface-canvas: var(--racing-neutral-900);
  --color-surface-card: var(--racing-neutral-950);
  --color-surface-deep: var(--racing-neutral-1000);
  --color-surface-light: var(--racing-warm-neutral-100);

  --color-accent-primary: var(--racing-red-500);
  --color-accent-strong: var(--racing-red-700);

  --color-status-caution: var(--racing-yellow-300);

  /* border/subtle and border/strong both alias neutral/0 (white) in the
     source file — kept as-is rather than "corrected", flagged to the team. */
  --color-border-subtle: var(--racing-neutral-0);
  --color-border-strong: var(--racing-neutral-0);
  --color-border-dark: var(--racing-neutral-950);
  --color-border-canvas: var(--racing-neutral-900);

  /* ---- Racing / Dimensions — space (token name = literal px value) ---- */
  --space-0: 0px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;

  /* ---- Racing / Dimensions — radius ---- */
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-18: 18px;

  /* ---- Effect / elevation — "Inset elevation used by the lap-time
     selector": two opposing inner shadows, forming a recessed groove ---- */
  --shadow-inset-track: inset 0 4px 7.2px rgba(0, 0, 0, 0.25),
                         inset 0 -4px 7.2px rgba(0, 0, 0, 0.25);

  /* ---- Font families backing the typography styles below ---- */
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-track: "Oswald", -apple-system, sans-serif;
  --font-editorial: "Source Serif Pro", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-surface-canvas);
  color: var(--color-fg-primary);
  font-family: var(--font-heading);
  -webkit-tap-highlight-color: transparent;
}

button, input, select {
  font-family: inherit;
}

.screen {
  display: none;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
}
.screen.active { display: block; }

/* ---------------------------------------------------------------------- */
/* Typography — font/typography/* tokens, one block per named style       */
/* ---------------------------------------------------------------------- */

.type-heading-small {
  font: 700 18px/21.6px var(--font-heading);
  letter-spacing: 0;
}
.type-heading-medium {
  font: 700 22px/26.4px var(--font-heading);
  letter-spacing: 0;
}
.type-heading-large {
  font: 700 36px/43.2px var(--font-heading);
  letter-spacing: 0;
}
.type-label-overline {
  font: 700 10px/12px var(--font-heading);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.type-label-distance {
  font: 300 17px/20.4px var(--font-track);
  letter-spacing: 0.68px;
  text-transform: uppercase;
}
.type-label-turn {
  font: 400 20px/24px var(--font-track);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.type-body-default {
  font: 400 16px/19.2px var(--font-editorial);
  letter-spacing: 0.16px;
}
.type-title-card {
  font: italic 300 26px/31.2px var(--font-editorial);
  letter-spacing: 0;
}
.type-title-small {
  font: italic 300 16px/19.2px var(--font-editorial);
  letter-spacing: 0;
}
.type-display-gear {
  font: 300 132px/104.28px var(--font-track);
  letter-spacing: -14.52px;
}
.type-display-turn {
  font: 300 55.297px/43.685px var(--font-track);
  letter-spacing: -6.083px;
}
.type-caption-italic {
  font: italic 300 14px/16.8px var(--font-editorial);
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------- */
/* Setup screen (kept close to the wireframe layout, restyled with tokens) */
/* ---------------------------------------------------------------------- */

#setup {
  padding: var(--space-24) var(--space-20) 48px;
}

#setup h1 {
  margin: 0 0 var(--space-4);
}
#setup .sub {
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-24);
}

#setup label {
  display: block;
  color: var(--color-fg-secondary);
  margin: var(--space-20) 0 var(--space-8);
}

.select-wrap {
  position: relative;
}
.styled-select {
  width: 100%;
  padding: var(--space-14) 40px var(--space-14) var(--space-16);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-5);
  background: var(--color-surface-card);
  color: var(--color-fg-primary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%239c9c9c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
}
.styled-select:focus {
  outline: none;
  border-color: var(--color-border-strong);
}
.styled-select:disabled {
  cursor: default;
  opacity: 0.7;
}

.time-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-8);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-inset-track);
}
.digit-pair {
  display: flex;
  gap: var(--space-2);
}
.time-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.time-segment .segment-value {
  min-width: 0.8ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.segment-btn {
  background: transparent;
  border: none;
  color: var(--color-fg-secondary);
  line-height: 1;
  padding: var(--space-6);
  cursor: pointer;
}
.segment-btn:hover,
.segment-btn:active {
  color: var(--color-accent-primary);
}
.time-separator {
  color: var(--color-fg-secondary);
  padding-bottom: 1px;
}

.slider-row { margin-bottom: var(--space-16); }
.slider-row .label-line {
  display: flex;
  justify-content: space-between;
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-4);
}
.slider-row input[type="range"] { width: 100%; accent-color: var(--color-accent-primary); }

.btn {
  display: block;
  width: 100%;
  padding: var(--space-16);
  margin-top: calc(var(--space-24) + var(--space-8));
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-5);
  color: var(--color-fg-primary);
  cursor: pointer;
}
.btn.secondary {
  background: var(--color-surface-deep);
  color: var(--color-fg-primary);
}

.author-line {
  display: block;
  margin-top: var(--space-24);
  text-align: center;
  color: var(--color-fg-muted);
  text-decoration: none;
}
.author-line:hover {
  color: var(--color-fg-secondary);
}

/* ---------------------------------------------------------------------- */
/* Drive screen                                                           */
/* ---------------------------------------------------------------------- */

.drive-screen { padding: 0; max-width: 480px; }

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) var(--space-20);
}
.top-bar button {
  background: transparent;
  border: 1px solid var(--color-border-dark);
  color: var(--color-fg-primary);
  padding: var(--space-10) var(--space-17);
  border-radius: var(--radius-5);
  cursor: pointer;
}
.top-bar .pause-btn { border-color: var(--color-status-caution); color: var(--color-status-caution); }
.top-bar .exit-btn { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }

.lap-time-readout {
  text-align: center;
}
.lap-time-readout .label {
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-2);
}
.lap-time-readout .value {
  font-variant-numeric: tabular-nums;
}

.sector-strip {
  display: flex;
  border-bottom: 1px solid var(--color-border-canvas);
}
.sector-strip .sector {
  position: relative;
  overflow: hidden;
  flex: 1;
  text-align: center;
  padding: var(--space-11) 0 var(--space-14);
  color: var(--color-fg-secondary);
  background: var(--color-surface-card);
  border-right: 1px solid var(--color-border-canvas);
}
.sector-strip .sector:last-child {
  border-right: none;
}
.sector-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: var(--color-accent-primary);
}
.sector-strip .sector .s-label {
  margin-bottom: var(--space-2);
}
.sector-strip .sector .s-value {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-primary);
}
.sector-strip .sector.active {
  background: var(--color-surface-canvas);
}
.sector-strip .sector.active .s-label,
.sector-strip .sector.active .s-value { color: var(--color-accent-primary); }

.card-stack {
  padding: var(--space-20) var(--space-16) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

.corner-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-18);
  padding: var(--space-16);
  transition: opacity 0.2s ease;
  cursor: pointer;
}
.corner-card:active {
  opacity: 0.8;
}

.gear-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.corner-card .gear-number {
  color: var(--color-accent-primary);
  min-width: 0.9em;
  line-height: 1;
  /* type-display-gear's -14.52px letter-spacing is meant for runs of text;
     on a lone digit it just adds trailing phantom space that the flex
     centering (.gear-column) includes in its box, visually shifting the
     glyph left of "TURN #" below it. Neutralize it here. */
  letter-spacing: 0;
  text-align: center;
}

.corner-card .card-body { flex: 1; min-width: 0; }

.corner-card .corner-range {
  color: var(--color-accent-primary);
}

.corner-card .turn-icons {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.corner-card .turn-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.corner-card .brake-distance {
  color: var(--color-accent-primary);
}

.corner-card .complex-name {
  margin-bottom: var(--space-6);
}

.corner-card .notes {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-fg-secondary);
}
.corner-card .notes li {
  padding-left: var(--space-14);
  position: relative;
}
.corner-card .notes li::before {
  content: "•";
  position: absolute;
  left: 0;
}
.corner-card .notes li.curb-note { color: #d97757; }

/* current card: full size, brightest, both fully "expanded" */
.corner-card.current {
  border-color: var(--color-accent-strong);
}
.corner-card.next {
  opacity: 0.92;
}

/* every other complex for the lap: the same gear + icons + name treatment
   as the expanded cards, just smaller and without notes, so as many turns
   as possible fit on screen and the stack can keep scrolling past the
   bottom of the viewport */
.corner-card.upcoming {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-5);
  opacity: 0.6;
  gap: var(--space-11);
}
.corner-card.upcoming .gear-number-mini {
  font-family: var(--font-track);
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--color-accent-primary);
  min-width: 0.9em;
}
.corner-card.upcoming .card-body-mini {
  flex: 1;
  min-width: 0;
}
.corner-card.upcoming .turn-icons {
  margin-bottom: var(--space-2);
}
.corner-card.upcoming .turn-icon {
  width: 16px;
  height: 16px;
}
.corner-card.upcoming .complex-name-mini {
  color: var(--color-fg-primary);
}

/* ---------------------------------------------------------------------- */
/* Pause menu                                                             */
/* ---------------------------------------------------------------------- */

.pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
}
.pause-overlay[hidden] { display: none; }

.pause-menu {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface-card);
  border-top: 1px solid var(--color-border-dark);
  border-radius: var(--radius-18) var(--radius-18) 0 0;
  padding: var(--space-24) var(--space-20) calc(var(--space-24) + var(--space-8));
}

.pause-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-24);
}
.pause-elapsed {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-secondary);
}

.pause-menu-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.menu-btn {
  width: 100%;
  padding: var(--space-16);
  background: var(--color-surface-deep);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-5);
  color: var(--color-fg-primary);
  cursor: pointer;
  text-align: left;
}

.pause-menu-section {
  margin-bottom: var(--space-16);
}
.pause-menu-section label {
  display: block;
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-8);
}
.pause-menu-section .btn {
  margin-top: var(--space-11);
}

.recorded-laps {
  margin-top: var(--space-16);
}
.recorded-laps:empty { margin-top: 0; }
.recorded-lap-row {
  display: flex;
  justify-content: space-between;
  color: var(--color-fg-secondary);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-canvas);
}
.recorded-lap-row .lap-time-value {
  color: var(--color-fg-primary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 380px) {
  .top-bar button { padding: var(--space-8) var(--space-11); }
}