/* Speedlio page styles: a vintage racing poster. Navy, orange and gold on
   cream. The named values below are listed in DESIGN.md; change them here.
   Sizes inside the gauge (--gauge-*) are in the gauge's own units: the gauge
   is 400 units wide and drawn at up to 420 px, smaller on phones. */
:root {
  /* Colors */
  --color-bg: #f4efe4;          /* cream: page, button gaps */
  --color-navy: #243754;        /* text, dial face, stripes, button text and border */
  --color-muted: #4a5a78;       /* small print, result labels */
  --color-orange: #dc5535;      /* tagline (large, bold), inner track stripe */
  --color-orange-text: #b84126; /* small orange text (Lap 1/2/3); deeper, for contrast */
  --color-gold: #e9a12b;        /* needle, DOWNLOAD on the dial, middle stripe */
  --color-white: #ffffff;       /* dial numbers, live number, button */

  /* Fonts */
  --font-display: "Oswald", "Arial Narrow", sans-serif; /* title, labels, numbers, button */
  --font-body: "Archivo", system-ui, sans-serif;         /* status line, small print */

  /* Layout */
  --page-max-width: 480px;
  --page-padding: 16px;
  --gauge-max-width: 420px;

  /* Stripes and track. Their sizes are multiples of --u, one track stripe's
     width, which track.js sets to the poster's width / 66. */
  --stripe-edge: 4px;           /* cream between the outer stripe and the screen edge (phone) */
  --car-slot: 64px;             /* road above the track for the vehicle (its height) */
  --poster-top: 16px;           /* space above the title */
  --tagline-gap: 12px;          /* space under the tagline */

  /* Text sizes */
  --size-title: 4.35rem;        /* a little wider than the tagline */
  --size-tagline: 1.2rem;       /* bold and at least 18.7 px: large text, so the orange passes */
  --size-button: 1.25rem;
  --size-status: 1rem;
  --size-result-lap: 0.75rem;
  --size-result-label: 0.85rem;
  --size-result-value: 1.6rem;
  --size-small: 0.8rem;
  --size-demo-band: 0.95rem;    /* DEMO · MADE-UP SPEEDS (demo page) */
  --size-replay-number: 1rem;   /* replay buttons (demo page) */
  --size-replay-name: 0.72rem;
  --gauge-tick-label: 21px;
  --gauge-phase-label: 17px;
  --gauge-number: 74px;
  --gauge-unit: 20px;
}

/* Laptops and tablets: broad stripes, a bigger track and car slot. */
@media (min-width: 700px) {
  :root {
    --page-max-width: 600px;
    --stripe-edge: 0px;
    --car-slot: 88px;
    --poster-top: 28px;
    --tagline-gap: 18px;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* even where a rule below sets display */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-navy);
  font-family: var(--font-body);
  line-height: 1.4;
  overflow-wrap: break-word;
}

main {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding) var(--page-padding);
  text-align: center;
}

/* The poster spans the full column; track.js draws the stripes and track
   behind its contents. --u (one track stripe) is set by track.js; the
   numbers below match the ones there. */
.poster {
  --u: 6px;                                                     /* until track.js runs */
  --side: calc(var(--stripe-edge) + 4.49 * var(--u));           /* both side stripes and the gap between */
  --button-height: max(48px, calc(6.83 * var(--u)));
  position: relative;
  margin: 0 calc(-1 * var(--page-padding));
  padding: var(--poster-top) calc(var(--side) + 10px) 0;
}
.poster > :not(.track-art) { position: relative; }
.track-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.track-art .navy { fill: var(--color-navy); }
.track-art .gold { fill: var(--color-gold); }
.track-art .line { fill: none; stroke-width: var(--track-stripe); }
.track-art .line.navy { stroke: var(--color-navy); }
.track-art .line.gold { stroke: var(--color-gold); }
.track-art .line.orange { stroke: var(--color-orange); }
.car-slot { height: var(--car-slot); display: flex; justify-content: center; align-items: flex-end; }

/* Vehicles (vehicles.js). Each is drawn the slot's height, standing on the track. */
.vehicle { display: block; flex: none; height: var(--car-slot); position: relative; } /* in front of the scenery */
.vehicle .navy { fill: var(--color-navy); }
.vehicle .orange { fill: var(--color-orange); }
.vehicle .gold { fill: var(--color-gold); }
.vehicle .cream { fill: var(--color-bg); }
.vehicle .white { fill: var(--color-white); }
.vehicle .line { fill: none; stroke-linecap: round; }
.vehicle .line.navy { stroke: var(--color-navy); }
.vehicle .line.gold { stroke: var(--color-gold); }
.vehicle .line.orange { stroke: var(--color-orange); }
.vehicle .line.white { stroke: var(--color-white); }
.vehicle .line.cream { stroke: var(--color-bg); } /* a cut-out line, like the reference's white gaps */
.vehicle .roundel-number { fill: var(--color-navy); font-family: var(--font-display); font-weight: 700; text-anchor: middle; }

/* Scenery behind the vehicle (motion.js): strips that slide left. */
.scenery { position: absolute; inset: 0; overflow: hidden; }
.scenery-strip { position: absolute; left: 0; bottom: 0; height: 100%; will-change: transform; }
.scenery .navy { fill: var(--color-navy); }
.scenery .orange { fill: var(--color-orange); }
.scenery .gold { fill: var(--color-gold); }
.scenery .white { fill: var(--color-white); }
.scenery .line { fill: none; stroke-linecap: round; }
.scenery .line.navy { stroke: var(--color-navy); }

/* ?demo=vehicle-N (local review only): one vehicle on the track, labeled. */
.car-slot.garage { height: auto; }
.garage figure { margin: 0; }
.garage figcaption { font-family: var(--font-display); font-size: var(--size-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
/* The track's box: from the top of the oval to the bottom of the button.
   The button is centered on the lines along the bottom, which are centered
   8.335 U below the top of the oval (half the oval, 4.46 U, plus the hole,
   1.46 U, plus half of the 3 track stripes and the 1.83 U side stripe). */
.track { height: calc(8.335 * var(--u) + var(--button-height) / 2); margin: 0 calc(-1 * var(--side) - 10px); }

h1 {
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
#tagline {
  font-family: var(--font-display);
  font-size: var(--size-tagline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-orange);
  margin: 0 0 var(--tagline-gap);
}

/* Gauge */
#gauge { display: block; width: 100%; max-width: var(--gauge-max-width); margin: 0 auto; }
#gauge .face { fill: var(--color-navy); }
#gauge .face-line { fill: none; stroke: var(--color-bg); stroke-width: 5; }
#gauge .tick-major { stroke: var(--color-white); stroke-width: 5; }
#gauge .tick-minor { stroke: var(--color-bg); stroke-width: 2.5; }
/* The navy outline keeps a dial number readable when the needle passes under it. */
#gauge .tick-label { fill: var(--color-white); font-family: var(--font-display); font-size: var(--gauge-tick-label); font-weight: 600; text-anchor: middle; stroke: var(--color-navy); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
#gauge .needle { fill: var(--color-gold); }
#gauge .hub { fill: var(--color-gold); }
#gauge .hub-cap { fill: var(--color-navy); }
#gauge .phase-label { fill: var(--color-gold); font-family: var(--font-display); font-size: var(--gauge-phase-label); font-weight: 600; letter-spacing: 0.2em; text-anchor: middle; }
#gauge .number { fill: var(--color-white); font-family: var(--font-display); font-size: var(--gauge-number); font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
#gauge .unit { fill: var(--color-bg); font-family: var(--font-display); font-size: var(--gauge-unit); font-weight: 500; letter-spacing: 0.1em; text-anchor: middle; }

/* Start button: white with a navy border, centered on the lines along the bottom */
#start {
  touch-action: manipulation; /* no double-tap zoom on iPhone */
  position: absolute;
  left: 50%;
  top: calc(8.335 * var(--u) - var(--button-height) / 2);
  transform: translateX(-50%);
  height: var(--button-height);
  min-width: max(180px, calc(27 * var(--u)));
  padding: 0 28px;
  font-family: var(--font-display);
  font-size: var(--size-button);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: max(3px, calc(0.5 * var(--u))) solid var(--color-navy);
  border-radius: calc(1.25 * var(--u));
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
}
#start:disabled { color: var(--color-muted); border-color: var(--color-muted); cursor: default; }
/* Hover: colors swap (white on navy). Only on devices with a mouse, so a tap
   on a phone doesn't leave it stuck navy. Keyboard focus gets a gold ring. */
@media (hover: hover) {
  #start:enabled:hover, a#start:hover { background: var(--color-navy); color: var(--color-white); }
}
#start:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

#status { font-size: var(--size-status); font-weight: 600; min-height: 1.4em; margin: 0 0 16px; }

/* Results row, right under the button so the numbers fit on a phone's
   first screen: three equal columns, even on narrow phones */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 480px; margin: 12px auto 12px; }
.results div { min-width: 0; }
.results dt { font-family: var(--font-display); font-size: var(--size-result-label); font-weight: 500; color: var(--color-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.results .lap { display: block; color: var(--color-orange-text); font-size: var(--size-result-lap); letter-spacing: 0.16em; }
.results dd { white-space: nowrap; margin: 2px 0 0; font-family: var(--font-display); font-size: var(--size-result-value); font-weight: 600; font-variant-numeric: tabular-nums; }
.results .active dt { font-weight: 700; color: var(--color-navy); }
.results .active dd { font-weight: 700; }

/* Small print at the bottom */
.small { font-size: var(--size-small); color: var(--color-muted); margin: 4px 0; }
.small:empty { display: none; }
.note { font-style: italic; }
.small a { color: inherit; }

/* The public demo (demo.html, tour.js). */
/* A band at the top of the poster, so it can't be taken for a real result. */
.demo-band {
  font-family: var(--font-display);
  font-size: var(--size-demo-band);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white);
  background: var(--color-navy);
  border-bottom: 3px solid var(--color-gold);
  padding: 5px 8px;
  margin: 0 0 var(--tagline-gap);
}
/* Start is a link back to the real test. */
a#start { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Replay buttons, one per tier, under the status line (the results row's
   place on the real test is left out). They take their space during the
   tour so nothing jumps when they appear. */
.demo #status { margin-top: 12px; }
.replay { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 480px; margin: 0 auto 12px; }
.replay.waiting { visibility: hidden; }
.replay button {
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 2px;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-white);
  border: 2px solid var(--color-navy);
  border-radius: 6px;
  cursor: pointer;
}
.replay-number { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 2px solid currentColor; border-radius: 50%; font-size: var(--size-replay-number); font-weight: 700; line-height: 1; }
.replay-name { font-size: var(--size-replay-name); font-weight: 600; letter-spacing: 0.04em; line-height: 1.15; }
.replay [aria-pressed="true"] { background: var(--color-navy); color: var(--color-white); }
@media (hover: hover) {
  .replay button:hover { background: var(--color-navy); color: var(--color-white); }
}
.replay button:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* ?demo=motion (local review only): speed and scenery buttons. */
.demo-bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; padding: 6px; background: var(--color-navy); font-family: var(--font-display); font-size: 0.8rem; }
.demo-bar button { font: inherit; color: var(--color-white); background: none; border: 1px solid var(--color-white); border-radius: 4px; padding: 3px 7px; text-decoration: none; cursor: pointer; }
.demo-bar .on { background: var(--color-gold); color: var(--color-navy); border-color: var(--color-gold); }