/* Drag Racing Logbook: built for a phone, in sunlight, with grubby thumbs. */
:root {
  --asphalt: #1b1d21;
  --bg: #eceff1;
  --paper: #ffffff;
  --ink: #1b1d21;
  --muted: #566170;
  --line: #cfd5da;
  --amber: #f2b01e;
  --amber-ink: #1b1d21;
  --green: #1f8a4c;
  --red: #c93a2b;
  --tap: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --paper: #1c1f24;
    --ink: #eef0f2;
    --muted: #9aa4af;
    --line: #2d333a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: inherit; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.numtext { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

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

/* header */
.top {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--asphalt); color: #fff;
  padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
}
.brand { font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: .01em; }
.top .textbtn { color: #cfd5da; }

/* layout */
.page { max-width: 640px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.page.has-tabs { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.title-row h1, .title-row h2 { margin: 0; }
.block { margin-top: 2rem; }

/* bottom tabs, within thumb reach */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; background: var(--asphalt);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center;
  color: #cfd5da; text-decoration: none; font-weight: 600; border-top: 4px solid transparent;
}
.tabs a[aria-current="page"] { color: #fff; border-top-color: var(--amber); }

/* messages */
.messages { max-width: 640px; margin: 0 auto; padding: .75rem 1rem 0; }
.msg { margin: 0 0 .5rem; padding: .7rem .9rem; border-radius: 4px; background: var(--paper); border-left: 6px solid var(--green); }
.msg-error { border-left-color: var(--red); }
.msg-info { border-left-color: var(--amber); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 1.25rem; border: 0; border-radius: 6px;
  background: var(--amber); color: var(--amber-ink); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.btn.small { min-height: 40px; padding: 0 .9rem; }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.btn.danger { background: var(--red); color: #fff; }
.textbtn {
  min-height: var(--tap); padding: 0 .5rem; border: 0; background: none; font: inherit;
  color: var(--muted); text-decoration: underline; cursor: pointer;
  display: inline-flex; align-items: center;
}

/* timeslip */
.slip {
  background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--amber);
  border-radius: 4px; padding: .9rem 1rem; margin-bottom: 1rem;
}
.slip-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.slip-main {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .25rem 2rem;
  margin: .75rem 0; padding: .75rem 0; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line);
}
.slip .num { display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; }
.slip .et .num { font-size: 3.2rem; }
.slip .mph .num { font-size: 2rem; }
.slip .unit { display: block; color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.slip-grid { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: 0 0 .5rem; }
.slip-grid div { min-width: 0; }
.slip-grid dt { color: var(--muted); font-size: .85rem; }
.slip-grid dd { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
.conditions { margin: 0 0 .5rem; font-size: .9rem; }
.slip-notes { margin: .5rem 0; white-space: pre-line; }
.slip-actions { display: flex; gap: 1.25rem; margin-top: .25rem; }
.slip-actions a { min-height: 40px; display: inline-flex; align-items: center; color: var(--muted); }
.best { color: var(--muted); }
.best strong { color: var(--ink); }

/* rows */
.rows { list-style: none; margin: 0 0 1rem; padding: 0; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--line);
  border-radius: 4px; padding: .75rem 1rem; margin-bottom: .5rem;
}
.row.due { border-left-color: var(--amber); }
.row strong, .row .muted { display: block; }
.row .muted { font-size: .9rem; }
.row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.rowlink { display: block; width: 100%; text-decoration: none; padding: .25rem 0; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chips a {
  flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 1rem;
  border: 2px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--paper);
}
.chips a[aria-current="true"] { border-color: var(--asphalt); background: var(--asphalt); color: #fff; }
@media (prefers-color-scheme: dark) {
  .chips a[aria-current="true"] { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); }
}

/* build sheet */
.sheet { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.sheet div { display: flex; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.sheet div:last-child { border-bottom: 0; }
.sheet dt { flex: 0 0 8rem; color: var(--muted); }
.sheet dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* forms */
.form fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.form legend { font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: .6rem; }
.form fieldset fieldset > legend { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.form [data-field], .form > div, .form fieldset > div { margin-bottom: 1.15rem; }
.form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.form input:not([type=hidden]):not([type=checkbox]), .form select, .form textarea {
  width: 100%; min-height: var(--tap); padding: .6rem .75rem;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: 6px;
}
.form textarea { min-height: 5rem; }
.form .helptext { display: block; color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.form .errorlist { list-style: none; margin: .25rem 0 0; padding: 0; color: var(--red); font-weight: 600; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; align-items: start; }
.pair > div { min-width: 0; }
.actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.inline-add { margin-top: 1rem; }

/* empty states and misc */
.empty { background: var(--paper); border: 2px dashed var(--line); border-radius: 4px; padding: 1.5rem 1rem; text-align: left; list-style: none; }
.empty h1, .empty h2 { margin-bottom: .4rem; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.pager a { min-height: var(--tap); display: inline-flex; align-items: center; font-weight: 600; }
.danger-zone { margin-top: 2.5rem; }
.danger-zone a { color: var(--red); }

@media (min-width: 640px) {
  .slip .et .num { font-size: 4rem; }
}

/* weather helper on the pass form */
.wx { margin-bottom: 1rem; }
.wx-status { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.wx-status a { color: inherit; }

/* density altitude on slips and the form */
.slip .da .num { font-size: 1.6rem; }
.da-live { margin: .25rem 0 0; font-weight: 700; }

/* ET against density altitude */
.chart { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .75rem; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis { stroke: var(--muted); stroke-width: 1; }
.chart .fit { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.chart .pt { fill: var(--amber); stroke: var(--asphalt); stroke-width: 1.5; }
.chart .t { fill: var(--muted); font-size: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.chart figcaption { margin-top: .5rem; color: var(--muted); font-size: .9rem; }

/* header links, five tabs, time pickers, radios, track details */
[hidden] { display: none !important; }
.top-links { display: flex; align-items: center; gap: .25rem; }
.top-links a { color: #cfd5da; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 .5rem; }
.tabs a { font-size: .9rem; padding: 0 .25rem; text-align: center; }
.small { font-size: .85rem; }
.helplink { margin: .5rem 0 .9rem; }
.form select.time-part { display: inline-block; width: auto; min-width: 0; margin-right: .2rem; padding-left: .35rem; padding-right: 1.25rem; background-position: right .3rem center; }
.pair.pair-time { grid-template-columns: minmax(0, 1fr) auto; }
.form label:has(input[type=radio]) { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); font-weight: 600; }
.form input[type=radio] { width: 1.4rem; min-height: 1.4rem; height: 1.4rem; accent-color: var(--amber); }
.form [role=radiogroup], .form fieldset fieldset { margin: 0 0 .5rem; }
.newtrack { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 0 1rem; margin-bottom: .5rem; }
.newtrack summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.newtrack[open] { padding-bottom: .5rem; }

/* red light: a negative reaction time */
.form input.is-red:not([type=hidden]):not([type=checkbox]) { border-color: var(--red); background: #fbe3e0; color: #7a1a10; font-weight: 700; }
@media (prefers-color-scheme: dark) { .form input.is-red:not([type=hidden]):not([type=checkbox]) { background: #3a1a17; color: #ffd9d4; } }
.red-note { margin: -.4rem 0 .9rem; color: var(--red); font-weight: 700; }
.slip-grid .redlight dd { color: var(--red); font-weight: 800; }

/* home quick actions, and a flexible link inside list rows */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1.25rem; }
.quick .btn { padding: 0 .5rem; text-align: center; }
.rowlink { width: auto; flex: 1; min-width: 0; }

/* track length radios side by side, bullet left of the text */
.choices-row fieldset > div, .choices-row [role=radiogroup] { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.choices-row label:has(input[type=radio]) { display: flex; margin-bottom: 0; }
.bestnum { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.bestnum .numtext { font-size: 1.15rem; }
.choices-row label { white-space: nowrap; }
.bestnum .numtext, .bestnum .muted { white-space: nowrap; }
.wx .btn { margin: 0 .5rem .5rem 0; }
.top-links a, .top-links .textbtn { white-space: nowrap; }
.brand { line-height: 1.15; }
@media (max-width: 420px) { .brand { font-size: 1rem; } .top-links { gap: .75rem; } }
.check-field { margin: 0 0 1rem; }
.form .check-field label { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); margin: 0; }
.form .check-field input[type=checkbox] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--amber); }
.form .check-field .helptext { margin-top: 0; }
.red-note { margin: -.4rem 0 1rem; }

@media (max-width: 440px) {
  .slip-grid { gap: .25rem .45rem; }
  .slip-grid dt { font-size: .72rem; }
  .slip-grid dd { font-size: .84rem; }
}
@media (max-width: 380px) {
  .slip-grid { gap: .25rem .35rem; }
  .slip-grid dt { font-size: .68rem; }
  .slip-grid dd { font-size: .78rem; }
}
.relog { margin: -.25rem 0 1.5rem; }
.relog .btn { width: 100%; }
.effect { font-weight: 600; }
.effect.quicker { color: #1c7a3d; }
.effect.slower { color: #b3261e; }
@media (prefers-color-scheme: dark) { .effect.quicker { color: #6fdc92; } .effect.slower { color: #ff9189; } }
.row.tuneup > div:first-child { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.chart .mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .mark-n { font-weight: 700; fill: var(--ink, currentColor); }
.prediction { margin: .5rem 0 0; padding: .75rem .9rem; background: var(--paper); border-left: 6px solid var(--amber); border-radius: 4px; font-weight: 600; }

/* Tires and boost always get their own line so the timing numbers stay on one row. */
.slip-grid .wide { flex-basis: 100%; }

/* Home page hero and the Passes page section labels. */
.brand-spacer { flex: 1; }
.hero { text-align: center; margin: .25rem 0 1.25rem; }
.hero-car { width: min(100%, 340px); height: auto; display: block; margin: 0 auto .25rem; }
.hero-car .body { fill: var(--amber); }
.hero-car .tire { fill: var(--ink); }
.hero-car .rim { fill: var(--amber); }
.hero-car .road { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.hero-car .smoke circle { fill: var(--muted); }
.section-label { margin: .25rem 0 .6rem; }

/* Settings: radio bullets sit left of their text, side by side when they fit, otherwise stacked and left-aligned. */
.settings-choices fieldset > div, .settings-choices [role=radiogroup] { display: flex; flex-wrap: wrap; gap: 0 1.5rem; justify-content: flex-start; }
.settings-choices label:has(input[type=radio]) { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; text-align: left; margin-bottom: 0; }
.form .settings-choices input[type=radio] { flex: none; margin: 0; width: 1.4rem; height: 1.4rem; min-height: 1.4rem; padding: 0; }

.hero-frame { width: 78%; max-width: 330px; margin: 0 auto .5rem; aspect-ratio: 760 / var(--box, 420); }
.hero-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* Home title: big, slanted racing lettering with a gold-to-orange gradient, dark outline, hard shadow and glow. */
.hero-title {
  margin: 0 0 .1rem; padding: 0 .4rem; text-align: center; text-transform: uppercase;
  font: 900 italic clamp(3.2rem, 20vw, 5rem)/1.05 "Arial Black", Impact, system-ui, sans-serif; letter-spacing: .02em;
  color: #f7b81f;
  background: linear-gradient(180deg, #fff1a8 0%, #f2b01e 42%, #e4570f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #1b1d21; paint-order: stroke fill;
  filter: drop-shadow(4px 4px 0 #1b1d21) drop-shadow(0 0 12px rgba(242, 176, 30, .4));
  transform: skewX(-6deg);
}
@media (prefers-color-scheme: dark) {
  .hero-title { -webkit-text-stroke-color: #000; filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 16px rgba(242, 176, 30, .55)); }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only.hero-title { transform: none; filter: none; }

/* Fields rendered straight into a fieldset have no wrapper, so space them by their labels. */
.form fieldset > label { margin-top: 1.15rem; }
.form fieldset > legend + label { margin-top: 0; }

/* Reaction time: a short box with the Red light checkbox on its right. */
.reaction-row { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.form .reaction-row input[type=number] { width: 8.5rem; flex: none; }
.form .reaction-row .check-label { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); margin: 0; white-space: nowrap; }
.form .reaction-row input[type=checkbox] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--amber); }

.exportrow { margin: -.25rem 0 1rem; }
.slip .unit.dial { margin-top: .1rem; }
.slip .dial-diff { font-weight: 600; }
.slip .dial-diff.out { color: var(--red); font-weight: 800; }

.chart .pt.out { fill: var(--red); }
.starter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1rem; }
.starter form { margin: 0; }
.chipbtn { font: inherit; font-size: .9rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: inherit; cursor: pointer; }
.starter-label { margin: .75rem 0 0; font-size: .9rem; }
.msg-warning { border-left-color: var(--red); }

.row .btn.small { white-space: nowrap; }

.disp > label { display: block; }
.disp-row { display: flex; align-items: center; gap: .6rem; }
.form .disp-row input[type=number] { flex: 1 1 0; min-width: 0; width: 100%; }
.disp-row .units { display: flex; align-items: center; gap: .6rem; flex: none; }
.form .disp-row .check-label { display: flex; align-items: center; gap: .35rem; min-height: var(--tap); margin: 0; white-space: nowrap; }
.form .disp-row input[type=radio] { flex: none; width: 1.3rem; height: 1.3rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--amber); }

/* Home picture chooser on the car form */
.picture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0 1rem; }
.pic-choice { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem; margin: 0;
  background: var(--paper); border: 2px solid var(--line); border-radius: 6px; cursor: pointer; text-align: center; }
.pic-choice:has(input:checked) { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.pic-choice img { width: 100%; height: auto; }
.pic-choice .pic-name { font-size: .85rem; line-height: 1.2; }
.pic-choice.pic-auto { justify-content: center; min-height: 5rem; }
.form .pic-choice input[type=radio] { width: 1.3rem; height: 1.3rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--amber); }

/* race-day mode: big targets, one hand */
.race-car { font-size: 1.25rem; font-weight: 700; margin: 0 0 .75rem; }
.race-label { display: block; font-size: .85rem; font-weight: 700; color: var(--muted); margin: 0 0 .25rem; }
.race-select { width: 100%; min-height: 56px; font: inherit; font-size: 1.1rem; padding: 0 .75rem; margin: 0 0 .75rem; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.race-top { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; }
.race-big { width: 100%; min-height: 64px; font: inherit; font-size: 1.6rem; font-weight: 700; text-align: center; padding: 0 .5rem; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; }
.race-big:focus { border-color: var(--amber); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 64px; font-size: 1.1rem; font-weight: 700; border: 2px solid var(--line); background: var(--paper); }
.seg label:first-child span { border-radius: 8px 0 0 8px; }
.seg label:last-child span { border-radius: 0 8px 8px 0; border-left: 0; }
.seg input:checked + span { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.seg input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.race-last { margin: .9rem 0 .25rem; }
.race-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem; }
.race-grid > div { min-width: 0; }
.race-red { display: flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; }
.race-red input { width: 28px; height: 28px; }
.race-save { width: 100%; min-height: 72px; margin-top: 1rem; font-size: 1.4rem; }
.race-carry { margin-top: .9rem; font-size: .95rem; }
.race-link { margin: 0 0 1rem; } .race-link .race-save { margin-top: 0; min-height: 56px; font-size: 1.15rem; }

/* Home: five personal-best tiles in one row */
.rec-car { font-size: .9rem; font-weight: 400; margin-left: .4rem; }
.records { display: grid; grid-template-columns: repeat(var(--tiles, 5), minmax(0, 1fr)); gap: .35rem; }
.records.six { gap: .25rem; }
.records.six .rec-word { font-size: .5rem; }
.records.six .rec-label { font-size: .62rem; white-space: nowrap; }
.records.six .rec-val { font-size: .82rem; }
.rec {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 76px; padding: .35rem .15rem; text-decoration: none; text-align: center;
  background: var(--paper); border: 2px solid var(--line); border-radius: 8px;
}
a.rec:hover, a.rec:focus-visible { border-color: var(--amber); }
.rec-word { font-size: .58rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.rec-label { font-size: .72rem; font-weight: 700; }
.rec-val { font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rec-empty { opacity: .6; }
.rec.on { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); }
.rec.on .rec-word { color: var(--amber-ink); }
.rec-slips { margin-top: .75rem; }
.rec-slips .slip { margin: 0; }

/* backup and restore */
.restore-table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.restore-table th, .restore-table td { padding: .5rem .35rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.restore-table th:first-child { text-align: left; }
.restore-table thead th { font-size: .8rem; color: var(--muted); }
.form .choice { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; }
.form .choice input[type=radio] { width: 24px; height: 24px; flex: none; margin-top: .15rem; }

/* Home: the car list beside "Personal bests" */
.bests-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; margin: 0 0 .6rem; }
.bests-head h2 { margin: 0; }
.car-select { flex: 1 1 11rem; max-width: 100%; min-height: 44px; font: inherit; font-weight: 700; padding: 0 .6rem; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }

/* Invite codes */
.invite-row { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.invite-row p { margin: 0; }
.invite-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .05em; }