/* ==========================================================================
   LapSmith Live — spectator page
   Tokens mirror docs/lapsmith-design-system.md and the marketing site:
   teal = live / brand chrome, amber = caution, green = a personal best,
   dim = labels, primary = values. Chakra Petch labels, JetBrains Mono values.
   ========================================================================== */

:root {
  --bg: #0a0d10;
  --bg-raised: #11161b;
  --bg-card: #141a20;
  --line: #232c34;
  --text: #e8edf2;
  --text-dim: #9aa7b2;
  --accent: #2dd4bf;
  --amber: #f5a623;
  --red: #e5484d;
  --green: #30d158;
  /* Sector timing ONLY (docs/lapsmith-design-system.md): purple is reserved
     for an all-time individual-sector record and must not be used elsewhere. */
  --sector-purple: #b25cff;
  --radius: 10px;
  --font-display: "Chakra Petch", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* A spectator leaves this open for hours; the safe-area inset stops the
     footer sitting under an iPhone home indicator. */
  padding-bottom: env(safe-area-inset-bottom);
}

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

[hidden] { display: none !important; }

/* ---- top bar ---- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--bg-raised);
  position: sticky; top: 0; z-index: 10;
}

/* Sits before the brand, which is where a back affordance is looked for. */
.back-to-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.back-to-group:hover { color: var(--text); }
.back-to-group:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (max-width: 480px) {
  /* The arrow alone on a narrow bar, where the brand and the badges are
     already competing. Still a real target, and still labelled for anyone not
     reading the glyph. */
  .back-to-group span:not([aria-hidden]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .back-to-group { margin-right: 8px; font-size: 1rem; }
}

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.brand__mark { width: 26px; height: 26px; }
.mark-track { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.mark-dot { fill: var(--amber); }
.brand__name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; font-size: 15px; }
.brand__name em { font-style: normal; color: var(--accent); }

.topbar__right {
  display: flex; align-items: center; gap: 8px;
  /* min-width:0 lets these shrink instead of overflowing: the status badge is
     much wider in the between-sessions state than when it reads "Live", and the
     language select's intrinsic width comes from its longest option name. On a
     narrow phone that combination pushed the select off-screen. */
  min-width: 0; flex: 1 1 auto; justify-content: flex-end;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--red); color: var(--red);
  white-space: nowrap; overflow: hidden;
  /* Bounded rather than shrinkable. It used to shrink alongside the language
     select, which was fine while those two shared the bar; adding the viewer
     count made three, and the badge started surrendering the last few pixels of
     "DEMO" on a 360px phone. It now holds its natural width — which for "LIVE"
     and "DEMO" is all they need — and the select, whose name is still
     recognisable clipped and whose full list is one tap away, absorbs the
     shortfall. The cap is what keeps the much wider between-sessions label from
     crushing the select in its place; that label still ellipsises, as it always
     has. */
  min-width: 0; max-width: 25vw; flex: 0 0 auto;
}
.badge__text { overflow: hidden; text-overflow: ellipsis; }
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 2s ease-in-out infinite; }
.badge--idle { border-color: var(--line); color: var(--text-dim); }
.badge--idle .badge__dot { background: var(--text-dim); animation: none; }
.badge--ended { border-color: var(--line); color: var(--text-dim); }
/* Simulated data must never be mistaken for somebody's real live session. */
.badge--demo { border-color: var(--amber); color: var(--amber); }
.badge--demo .badge__dot { background: var(--amber); }
.badge--ended .badge__dot { background: var(--text-dim); animation: none; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .badge__dot { animation: none; } }

/* Viewer count. Sits beside the LIVE badge because that is the page's "what is
   happening right now" corner, and kept to an icon plus a number so it costs
   almost no width — the badge and the language select had already filled the
   top bar on a narrow phone. */
.viewers {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-dim); flex: 0 0 auto; white-space: nowrap;
}
.viewers__eye {
  width: 14px; height: 14px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round;
}
.viewers__count {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lang {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; font-family: var(--font-body); font-size: 13px;
  min-width: 0; max-width: 40vw; flex: 0 1 auto;
}

/* ---- layout ---- */

.wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 32px; }

.panel {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.panel--centred { text-align: center; }

.h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: 0.01em; }
.h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.muted { color: var(--text-dim); font-size: 14px; }

.hero { margin-bottom: 16px; }
.hero__meta { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.sep { opacity: 0.5; margin: 0 4px; }

/* ---- stats ---- */

.grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px;
}
.stat {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
/* The lap clock and the delta, side by side on the top row — one column each of
   the two here, two each of the four below. Sized off the viewport rather than
   the old full-width value: half a narrow phone is about 130px of text box, and
   `1:23.4` in a tabular mono face needs roughly 3.6x its font size. */
.stat--hero { grid-column: span 1; }

.stat__label {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.stat__value {
  font-family: var(--font-mono); font-weight: 700; font-size: 22px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.stat__value--hero { font-size: clamp(30px, 9.5vw, 46px); line-height: 1.05; }
.stat__value--best { color: var(--green); }

/* What the delta is measured against, under the number itself rather than
   folded into the label: the labels on this row have to stay one line each or
   the two hero values stop sharing a baseline. `margin-top: auto` pins it to
   the bottom of the tile, so the note does not push the delta out of line with
   the lap clock beside it. */
.stat__note {
  font-family: var(--font-body); font-size: 11px; color: var(--text-dim);
  margin-top: auto; padding-top: 2px; line-height: 1.3;
}

/* Lap delta. Green ahead, red behind, plain when level or when there is no
   reference lap yet — the same three states and colours as the in-app live
   dash. */
.stat__value--ahead { color: var(--green); }
.stat__value--behind { color: var(--red); }

/* ---- map ---- */

.map-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; margin-bottom: 16px;
}
/* No fixed aspect ratio: the height follows the viewBox, which live.js crops to
   the circuit's own proportions and bounds against its width. The px ceiling is
   only for a wide desktop window, where 0.66 of a 736px card is still a lot of
   map. */
.map { display: block; width: 100%; height: auto; max-height: 360px; }
.map__outline { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map__trail { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.map__car { fill: var(--amber); stroke: var(--bg); stroke-width: 0.8; transition: cx 0.9s linear, cy 0.9s linear; }
@media (prefers-reduced-motion: reduce) { .map__car { transition: none; } }
.map__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ---- sector strip ----
   Same four grades, same precedence and same colours as the in-app live sector
   strip and the video overlay, so a sector that was purple on track is purple
   here. Colour-only by design: no times, nothing to read at speed. */

.sectors { display: flex; gap: 4px; margin-bottom: 16px; list-style: none; }
.sectors__cell {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.sectors__bar {
  display: block; height: 8px; border-radius: 3px;
  background: var(--bg-card); border: 1px solid var(--line);
}
.sectors__time {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-dim);
  min-height: 1em; text-align: center;
}
.sectors__cell.is-offTarget .sectors__bar { background: var(--amber); border-color: var(--amber); }
.sectors__cell.is-sessionBest .sectors__bar { background: var(--green); border-color: var(--green); }
.sectors__cell.is-allTimeBest .sectors__bar {
  background: var(--sector-purple); border-color: var(--sector-purple);
}
.sectors__cell.is-offTarget .sectors__time { color: var(--amber); }
.sectors__cell.is-sessionBest .sectors__time { color: var(--green); }
.sectors__cell.is-allTimeBest .sectors__time { color: var(--sector-purple); }
/* The sector being driven right now: teal outline, matching the app. */
.sectors__cell.is-current .sectors__bar { border-color: var(--accent); border-width: 2px; }

/* ---- lap table ----
   A timing-screen grid: LAP | S1..Sn | TOTAL. Scrolls horizontally rather
   than squashing, because the sector count comes from the track layout and a
   heavily-curated circuit will not fit a phone. */

.laptable {
  overflow-x: auto; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card);
}
.laptable__t { width: 100%; border-collapse: collapse; }
.laptable__t th {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.laptable__t td {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text);
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.laptable__t tr:last-child td { border-bottom: 0; }
.laptable__t .num { text-align: right; }
/* Sector grades, same tokens as the strip above. */
.laptable__t td.is-offTarget { color: var(--amber); }
.laptable__t td.is-sessionBest { color: var(--green); }
.laptable__t td.is-allTimeBest { color: var(--sector-purple); }
.laptable__t .laptable__total { color: var(--text); }
/* A lap that does not count — the out lap, the first lap after a resume, a lap
   welded across a pit stop. Dimmed so it is not read as a very slow flying lap,
   and the label is a word rather than a number so it cannot be mistaken for
   one. */
.laptable__t tr.is-out td { color: var(--text-dim); }
/* Small and tight on purpose: a table column is as wide as its widest cell, and
   this label must not be what decides the width of the LAP column. Kept under
   the translated column HEADING in every language, which is what actually sizes
   it ("Okrążenie" is 93px on a phone), so adding the label costs no width. */
.laptable__t tr.is-out td:first-child {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0; text-transform: uppercase; padding-right: 6px;
}
.laptable__t tr.is-best .laptable__total { color: var(--green); }
.laptable__t tr.is-best td:first-child { box-shadow: inset 2px 0 0 var(--green); }
/* The lap being driven. Teal is the live/brand colour, so it reads as "in
   progress" without competing with the green/amber/purple sector semantics —
   and needs no label, which would need translating into all 14 languages. */
.laptable__t tr.is-live .laptable__total { color: var(--accent); }
.laptable__t tr.is-live td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.laptable__t tr.is-live td { background: rgba(45, 212, 191, 0.05); }

/* ---- day ---- */

.idle__label { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.day__best { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sessions { list-style: none; }
.sessions li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.sessions li:last-child { border-bottom: 0; }
.sessions__name { font-size: 14px; }
.sessions__meta { color: var(--text-dim); font-size: 12px; }
.sessions__t { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- footer / cta ---- */

.foot { text-align: center; padding-top: 20px; border-top: 1px solid var(--line); }
.foot .muted { margin-bottom: 12px; }

.btn {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.03em;
}
/* The retry control is a real <button> — it performs an action rather than
   navigating — so it needs the UA's own button chrome cleared off. */
button.btn { background: transparent; cursor: pointer; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #04120f; }

/* ---- connection banner ----
   Amber = caution (docs/lapsmith-design-system.md): the page is degraded, not
   dead. Sits above the timing it qualifies, so what is on screen is never
   presented as current when it is not. */

.reconnect {
  font-size: 13px; color: var(--amber);
  border: 1px solid var(--amber); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 12px; text-align: center;
}

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  /* Still half the row each, so the pair keeps its top row and the four small
     tiles fill the second one exactly. */
  .stat--hero { grid-column: span 2; }
}

/* ---- group page ----
   Shares this stylesheet with the single-driver page: same tokens, same type,
   same dark ground, so a link to one does not look like a different product
   from a link to the other. Only what the group page adds lives here. */
.group-name {
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-weight: 600;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.map-wrap { position: relative; margin: 8px 0 16px; }
.note {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
}
/* One table for the running order. Ordered by BEST LAP rather than by position
   on track: a group at a track day is comparing times, not racing, and a
   position-based order would reshuffle every few seconds for no information. */
/* A wide grid scrolls inside its own container; the page body never does. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.laps { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.laps th,
.laps td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.laps th:first-child,
.laps td:first-child { text-align: left; }
.laps th {
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.laps td { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9rem; }
.laps td:first-child { font-family: "Inter", system-ui, sans-serif; }
/* The driver cell is a link to that driver's own page, which already exists at
 * /s/{token}. A real anchor rather than a click handler, so it is
 * keyboard-reachable and can be opened in a new tab by whoever wants the group
 * in one and their driver in another. */
.driver-link {
  color: inherit;
  /* Underlined by default, not only on hover. A touch device has no hover, so
   * without this the one tappable thing on the page is indistinguishable from
   * the static text beside it. */
  text-decoration: underline;
  text-decoration-color: var(--text-dim);
  text-underline-offset: 3px;
  /* Fills the cell rather than wrapping just the glyphs, so the hit box is the
   * row height instead of the ~34x17px the name happened to occupy. */
  display: block;
  padding: 6px 0;
  margin: -6px 0;
}
.driver-link:hover { text-decoration-color: currentColor; }
.driver-link:focus-visible {
  outline: 2px solid var(--accent, #4FC3F7);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The dot's colour, so a driver on the map and their row are the same thing. */
.driver-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* ---- group standings ----
   A timing grid, matching the app's: position, driver, the sectors of the lap
   being driven, then that lap, the best of the day, the gap and the count.

   The sectors are columns rather than a strip on a second row. This page is
   read on a screen wide enough for them, and a sector time you can read DOWN
   the column against the other drivers' is worth more than one that only reads
   across its own lap. */

#standings th:first-child,
#standings td:first-child { text-align: right; }
#standings th:nth-child(2),
#standings td:nth-child(2) { text-align: left; }

.standings__pos {
  width: 2.5rem;
  color: var(--text-dim);
}

/* The driver column absorbs the table's slack; every other column is then as
   wide as its own content.

   Without this, `table { width: 100% }` under auto layout spreads the leftover
   width across ALL the columns, so each sector cell's BOX was far wider than
   the "S1" above it — invisible for a plain number, obvious the moment the
   cell has a tinted background, which is what put the colour under the wrong
   heading. */
#standings th:nth-child(2),
#standings td:nth-child(2) { width: 100%; }
/* Wide enough for a real name on one line. Without it the driver column
   collapses to its narrowest wrap and every name breaks in two, which costs
   more height than the horizontal scroll it was avoiding.

   A flex row so the swatch stays BESIDE the name. `.driver-link` is
   `display: block` on purpose — it makes the hit box the whole row rather than
   the ~34x17px the glyphs happen to occupy — and in normal flow that pushed
   the name onto its own line under the dot. As a flex item it fills the
   remaining width instead, which keeps the touch target and puts the two back
   on one line. */
.driver-cell {
  min-width: 9rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.driver-cell .driver-link,
.driver-cell .driver-full,
.driver-cell .driver-toggle { flex: 1 1 auto; min-width: 0; }
/* The tap-through arrow is a fixed ornament, not the thing that stretches. */
.driver-cell .driver-open { flex: 0 0 auto; }
/* `gap` spaces the row now, so the swatch's own margin would double it. */
.driver-cell .driver-swatch { margin-right: 0; flex: 0 0 auto; }

/* ---- driver name, long and short ----
   All four forms are always in the DOM and CSS decides which shows: a media
   query for the width, a row class for the reader's tap. Nothing measures
   anything, so a rotation or a resize is the browser's problem rather than a
   resize listener's. */
.driver-short,
.driver-collapse,
.driver-open { display: none; }

.driver-toggle {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.driver-short { font-weight: 600; letter-spacing: 0.04em; }
.driver-toggle:focus-visible,
.driver-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The way through to one driver's own page, which the name carries at wider
   widths and cannot at narrow ones — there the name is the collapse control. */
.driver-open {
  margin-left: 6px;
  text-decoration: none;
  font-size: 0.95em;
}

}
#standings th:not(:nth-child(2)),
#standings td:not(:nth-child(2)) { width: 1%; white-space: nowrap; }

/* Same four grades, same precedence and same colours as the sector strip
   above, the in-app grid and the video overlay, so a sector that was purple on
   track is purple here. Tinted rather than filled: a solid block per cell in a
   table of numbers overwhelms the lap times beside it, which are what the
   ordering is actually built on. */
.sector-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  /* A little wider than the digits so the tint reads as a block under its
     heading rather than as a highlight tight around the number. */
  padding-left: 10px;
  padding-right: 10px;
}

/* Fixed widths for every column whose content arrives DURING the session.
   A sector cell holds "—" until the split is crossed and "21.86" afterwards,
   and a content-sized column resizes at that moment — so the table shifted
   sideways every few seconds as four drivers crossed their splits. Sized for
   the widest value each column can hold, not the value it holds now. */
.sector-cell { min-width: 4.5rem; }
.lap-cell { min-width: 5.5rem; }
.gap-cell { min-width: 4.5rem; }
.laps-cell { min-width: 3rem; }
.sector-cell.is-offTarget { color: var(--amber); background: rgba(245, 166, 35, 0.12); }
.sector-cell.is-sessionBest { color: var(--green); background: rgba(48, 209, 88, 0.13); }
.sector-cell.is-allTimeBest {
  color: var(--sector-purple);
  background: rgba(178, 92, 255, 0.16);
}
/* Every numeric cell reads left-to-right even in an RTL page.
   A gap is "+0.45", and `+` is a bidi-NEUTRAL character: in Arabic the browser
   reorders it to the end and the cell reads "0.45+", which is not a number
   anybody writes. Isolating rather than only setting direction so a cell
   cannot affect the ones beside it. The columns themselves still mirror — it
   is the digits inside them that must not. */
#standings td:not(:nth-child(2)),
#standings th:not(:nth-child(2)) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- the grid on a phone ----
   Last in the file on purpose: these are overrides of the column widths above,
   and a single class beats nothing on specificity — an earlier media query lost
   to the later plain rules and silently did nothing.

   The strategy is to DROP columns rather than shrink everything until none of
   it is readable. Sectors stay: they are why this grid exists. Laps and gap go
   first — a lap count is a curiosity next to a lap time, and a gap is the
   subtraction of two columns still on screen. */

@media (max-width: 700px) {
  /* The column no longer has to hold a name, so it stops reserving room for
     one — which is most of what makes the grid fit a phone. Three characters
     rather than two: initials failed on exactly the one-word display names a
     track day is full of, where "Rich" became "R". */
  .driver-cell { min-width: 4rem; }
  .driver-short { display: inline; }
  .driver-full { display: none; }

  /* The way through to a driver's own page, whether their name is short or
     long. It used to appear only once the name was expanded, which made
     watching one driver a two-tap discovery on the width where somebody is
     most likely to want it — and there is room for it either way, because the
     driver column is the one absorbing the table's slack. */
  .driver-open { display: inline; }

  /* A row the reader has tapped shows the name, and tapping the name puts it
     back. No min-width here: the cell takes exactly what the name needs, so
     revealing one costs the table only that much rather than a fixed nine
     rem. */
  #standings tr.is-expanded .driver-short { display: none; }
  #standings tr.is-expanded .driver-collapse { display: inline; }

  #standings th,
  #standings td { padding-left: 5px; padding-right: 5px; }
  .sector-cell { min-width: 3.4rem; padding-left: 6px; padding-right: 6px; }
  .lap-cell { min-width: 4.6rem; }
  .gap-cell { min-width: 3.6rem; }
  .laps-cell { display: none; }
  .standings__pos { width: 1.6rem; }
}

@media (max-width: 480px) {
  /* A gap is BEST minus the leader's BEST, and both are still on screen. */
  .gap-cell { display: none; }
  /* One notch of type, so seven columns land inside a 375pt phone rather than
     fifteen pixels outside it. Measured, not guessed: the widths below follow
     the smaller figures rather than being shrunk independently of them. */
  #standings th,
  #standings td { font-size: 0.82rem; }
  .sector-cell { min-width: 2.9rem; }
  .lap-cell { min-width: 4.1rem; }
  .standings__pos { width: 1.4rem; }
}

@media (max-width: 430px) {
  /* The last column to go, and BEST is the one kept rather than LAST: the
     running order is BY best lap, so a grid showing positions without it
     cannot be checked. The sectors above already say how the current lap is
     going, which is most of what LAST was there for.

     Everything left is content-bound at this size — the columns are as narrow
     as their own digits — so there is nothing further to shrink and this is
     the honest last cut. */
  .last-cell { display: none; }
}