/* ==========================================================================
   RaceDB — design system: "the setup sheet as an instrument".

   Cool vellum paper + near-black ink, one signal red for brand/actions/
   differences, and sector purple reserved for exactly one meaning: the
   fastest lap (the purple-sector convention). Type: Barlow Condensed for
   display (road-signage DNA), Barlow for body, IBM Plex Mono for every
   value, time and meta line — data always reads as data.

   Light/dark follow the system preference (prefers-color-scheme).
   ========================================================================== */

:root {
  --paper: #f3f4f2;
  --surface: #ffffff;
  --ink: #17191e;
  --muted: #5d636e;
  --line: #d8dbd9;
  --line-strong: #17191e;
  --red: #c81e2b;
  --red-hover: #a91824;
  --on-red: #ffffff;
  --purple: #6d28d9;
  --on-purple: #ffffff;
  --chip-set-bg: #17191e;
  --chip-set-fg: #f3f4f2;
  --chip-carried-fg: #5d636e;
  --chip-carried-border: #9aa0aa;
  --diff-wash: rgba(200, 30, 43, 0.055);
  --focus: #c81e2b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161b;
    --surface: #1b1e24;
    --ink: #e8eaed;
    --muted: #9ba1ac;
    --line: #2a2e36;
    --line-strong: #e8eaed;
    --red: #e5484d;
    --red-hover: #f06a6e;
    --on-red: #17191e;
    --purple: #a78bfa;
    --on-purple: #17191e;
    --chip-set-bg: #e8eaed;
    --chip-set-fg: #14161b;
    --chip-carried-fg: #9ba1ac;
    --chip-carried-border: #565c66;
    --diff-wash: rgba(229, 72, 77, 0.09);
    --focus: #e5484d;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}

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

.muted {
  color: var(--muted);
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  .btn {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
}

/* -------------------------------------------------------------------------
   Top navigation — condensed uppercase, like a pit-lane signboard.
   ------------------------------------------------------------------------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

/* The red plate: the one bit of brand colour in the chrome. */
.brand::before {
  content: '';
  width: 0.7em;
  height: 0.7em;
  background: var(--red);
  border-radius: 2px;
}

.brand:hover {
  color: var(--ink);
}

.topnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}

.topnav ul a {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}

.topnav ul a:hover {
  color: var(--red);
}

main.container {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

/* -------------------------------------------------------------------------
   Page head — eyebrow names the entity type (CAR / EVENT / SESSION…),
   the display face carries the name, the mono line carries the facts.
   ------------------------------------------------------------------------- */

.backlink {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.backlink a {
  color: var(--muted);
  text-decoration: none;
}

.backlink a:hover {
  color: var(--red);
}

.page-head {
  margin-bottom: 1.75rem;
}

.eyebrow {
  margin: 0 0 0.2rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.page-head h1 {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.page-meta {
  margin: 0.45rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--muted);
}

.page-intro {
  margin: 0.6rem 0 0;
  max-width: 46rem;
  color: var(--muted);
}

/* Section headings — small condensed stamps over a hairline. */
h2 {
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h2 .h2-meta {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   Tables — timing-sheet discipline: mono figures, strong rule under the
   header, hairlines between rows, no zebra noise.
   ------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1.25rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  border-bottom: 2px solid var(--line-strong);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

tbody tr:hover {
  background: var(--surface);
}

td.num {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

td.val {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-scroll {
  overflow-x: auto;
}

/* Row-label cells in the compare header block. */
th[scope="row"] {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Provenance chips (ADR-0003) — ink stamps, not pills. .flag-set = solid
   ink (measured / confirmed); .flag-carried = dashed outline (prefilled,
   untouched). Class names are load-bearing: setup_entry.js swaps them.
   ------------------------------------------------------------------------- */

.flag-set,
.flag-carried {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.flag-set {
  background: var(--chip-set-bg);
  color: var(--chip-set-fg);
  border: 1px solid var(--chip-set-bg);
}

.flag-carried {
  background: transparent;
  color: var(--chip-carried-fg);
  border: 1px dashed var(--chip-carried-border);
}

/* Fastest lap — sector purple, one meaning only. */
.lap-best td {
  color: var(--purple);
  font-weight: 600;
}

.chip-best {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: var(--purple);
  color: var(--on-purple);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn,
button[type="submit"] {
  display: inline-block;
  padding: 0.55rem 1.5rem;
  border: 1px solid var(--red);
  border-radius: 5px;
  background: var(--red);
  color: var(--on-red);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
button[type="submit"]:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: var(--on-red);
}

button[type="submit"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Home — the fleet board is the hero; counts are a quiet mono strip.
   ------------------------------------------------------------------------- */

.stat-strip {
  margin: 0.45rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-name a {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}

.home-cta {
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   Data strip — one mono line of conditions on a session.
   ------------------------------------------------------------------------- */

.data-strip {
  margin: 0.9rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--ink);
}

.data-strip .sep {
  color: var(--muted);
  padding: 0 0.35rem;
}

/* -------------------------------------------------------------------------
   The axle grid — the signature element. Setup data laid out in plan view:
   FL FR over RL RR with axle rules between, the way the paper sheet and
   the mechanic's head both work. DOM order stays FL, FR, RL, RR, General,
   so tab order matches reading (and typing) order.
   ------------------------------------------------------------------------- */

.axle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin: 1rem 0 1.5rem;
}

.axle-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.axle-label::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--line);
}

.corner-plate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9rem 1rem 1rem;
}

.corner-plate > header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}

.corner-code {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.corner-name {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.corner-empty {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Read-only value rows (session detail): dotted leaders, sheet-style. */
.value-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0;
}

.value-row .value-name {
  font-size: 0.9rem;
}

.value-row .unit {
  color: var(--muted);
  font-size: 0.8rem;
}

.value-row .leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.25em);
}

.value-row .value {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

/* Setup entry fields inside a corner plate. */
.setup-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem 0;
}

.setup-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.setup-field label {
  font-size: 0.9rem;
}

.setup-field .unit {
  color: var(--muted);
  font-size: 0.8rem;
}

.setup-field input,
.setup-field select {
  padding: 0.42rem 0.55rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

.setup-field input:focus-visible,
.setup-field select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

/* General (non-corner) fields sit in their own quiet grid. */
.general-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem 1.5rem;
  margin: 0.75rem 0 1.25rem;
}

.form-errors {
  border: 1px solid var(--red);
  border-left-width: 4px;
  border-radius: 5px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--surface);
}

.form-errors p {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.form-errors ul {
  margin: 0;
  padding-left: 1.25rem;
}

.form-actions {
  margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   Comparison screen — differing rows carry a red edge plus a faint wash;
   the edge reads even without colour perception.
   ------------------------------------------------------------------------- */

.diff-table tbody tr.diff-differs {
  background: var(--diff-wash);
  box-shadow: inset 3px 0 0 var(--red);
}

.not-recorded {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}

.compare-columns {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin: 0.75rem 0 1.25rem;
}

.compare-card {
  flex: 0 0 auto;
  min-width: 17rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: var(--surface);
}

.compare-card h3 {
  margin: 0 0 0.4rem;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compare-card table {
  margin: 0;
}

.compare-card tbody tr:hover {
  background: transparent;
}

/* Compare picker + assignment tables */
.picker-check {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--red);
}

.select-all-row {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

.select-all-row label {
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Buttons: quiet variant + action rows (adjust / assign / view links).
   ------------------------------------------------------------------------- */

.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn-quiet:hover {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}

.actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.75rem 0 1.25rem;
}

/* Disclosure (<details>) whose summary reads as a button — used for the
   inline tyre-set create form (ROADMAP tranche 1, item 7: the create action
   must be visible where the picker is, not hidden behind a toggle). */
.disclosure {
  margin: 0.75rem 0 1.25rem;
}

.disclosure > summary {
  display: inline-block;
  padding: 0.55rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: 5px;
  color: var(--ink);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary:hover {
  border-color: var(--red);
  color: var(--red);
}

.disclosure[open] {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.75rem 1rem;
  background: var(--surface);
  max-width: 34rem;
}

.disclosure[open] > summary {
  display: block;
  margin: -0.75rem -1rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

/* -------------------------------------------------------------------------
   Nav user area + text-button that reads as a link.
   ------------------------------------------------------------------------- */

.nav-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.8rem;
}

/* button.linklike outranks the global button[type="submit"] red styling —
   the nav logout must read as a quiet link, not a primary action. */
button.linklike {
  background: none;
  border: none;
  padding: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

button.linklike:hover {
  background: none;
  color: var(--red);
}

/* -------------------------------------------------------------------------
   Unit suffix inside numeric inputs (racemgmt.md: units always labelled).
   ------------------------------------------------------------------------- */

.input-wrap {
  position: relative;
  display: flex;
}

.input-wrap input {
  flex: 1;
  width: 100%;
  padding-right: 3.4rem;
}

.input-unit {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  pointer-events: none;
}

/* The optional setup-label field on the sheet. */
.sheet-label-field {
  max-width: 26rem;
  margin-bottom: 0.5rem;
}

.sheet-label-field input {
  padding: 0.42rem 0.55rem;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

/* Read-only general (non-corner) values outside the axle grid. */
.general-values {
  max-width: 34rem;
  margin: 0.75rem 0 1.25rem;
}

/* -------------------------------------------------------------------------
   The alignment console (racemgmt.md) — corner-major read view of a Setup:
   four corner boxes positioned as on the car around a top-view outline,
   with the non-corner values as a car-level strip underneath. Hairlines
   (.group-rule) mark group changes inside a box, same frequency order as
   the entry sheet.
   ------------------------------------------------------------------------- */

.console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 1rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

.console-FL { grid-column: 1; grid-row: 1; }
.console-FR { grid-column: 3; grid-row: 1; }
.console-RL { grid-column: 1; grid-row: 2; }
.console-RR { grid-column: 3; grid-row: 2; }

.console-car {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chip-carried-border);
}

.console-car svg {
  width: 56px;
  height: auto;
  max-height: 100%;
}

.console-general {
  grid-column: 1 / -1;
  grid-row: 3;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 2rem;
}

.group-rule {
  border-top: 1px solid var(--line);
  margin: 0.35rem 0;
}

@media (max-width: 720px) {
  .console-grid {
    grid-template-columns: 1fr;
  }

  .console-FL, .console-FR, .console-RL, .console-RR, .console-general {
    grid-column: 1;
    grid-row: auto;
  }

  .console-car {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Session working layout: setup console left, the between-runs rail (laps,
   readings, tyres) right — everything in reach on a laptop. Stacks on
   narrow screens.
   ------------------------------------------------------------------------- */

.container-wide {
  max-width: 1420px;
}

@media (min-width: 1200px) {
  .session-columns {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 0 3rem;
    align-items: start;
  }

  .session-main > h2:first-child,
  .session-rail > h2:first-child {
    margin-top: 0.5rem;
  }
}

/* Compact per-corner strips in the rail (readings inputs, tyre selects):
   FL FR / RL RR in two columns, corner code as the label. */
.rail-strip-label {
  margin: 0.75rem 0 0.4rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-corners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}

.rail-corner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.rail-corner .rail-code {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 1.7em;
  flex: 0 0 auto;
}

.rail-corner .input-wrap {
  flex: 1;
  min-width: 0;
}

.rail-corner input,
.rail-corner select {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

/* The rail strips deliberately keep their 2x2 corner grid at phone widths
   (ROADMAP tranche 1, item 9): FL|FR over RL|RR mirrors the car and keeps
   the whole strip one thumb-reach tall. */

/* -------------------------------------------------------------------------
   Flash messages (import results, etc.) — left bar carries the severity.
   ------------------------------------------------------------------------- */

.flash-stack {
  margin: 1rem 0 0;
}

.flash {
  margin: 0 0 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 5px;
  font-size: 0.95rem;
}

.flash-success { border-left-color: var(--ink); }
.flash-info    { border-left-color: var(--chip-carried-border); }
.flash-warning { border-left-color: #c9971f; }
.flash-error   { border-left-color: var(--red); }

/* Lap CSV import row in the session rail. */
.import-row {
  margin: 0.75rem 0 0.5rem;
}

.import-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.import-controls input[type="file"] {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.import-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
}

/* -------------------------------------------------------------------------
   Plain forms — Event/Session create & edit (racemgmt.md #1/#4). Same
   label-over-input shape as .setup-field, but body type and a comfortable
   max-width instead of the axle grid's dense mono layout.
   ------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 26rem;
  margin: 0 0 1rem;
}

.field label {
  font-size: 0.9rem;
}

.field .unit {
  color: var(--muted);
  font-size: 0.8rem;
}

.field input,
.field select,
.field textarea {
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  font-family: "Barlow", system-ui, sans-serif;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

.field textarea {
  min-height: 5rem;
  resize: vertical;
  font-family: inherit;
}

.field textarea[rows="2"] {
  min-height: 3rem;
}

/* Conditions block on session create/edit (ROADMAP tranche 1, item 8). */
fieldset.conditions {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.75rem 1rem 0.25rem;
  margin: 0 0 1.25rem;
  max-width: 34rem;
}

fieldset.conditions legend {
  padding: 0 0.4rem;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

fieldset.conditions legend .unit {
  color: var(--muted);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.field-label {
  font-size: 0.9rem;
}

/* Weather as one-tap pills: the radio itself is visually hidden, the label
   is the tap target; :has() drives the checked/focus looks. */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  position: relative;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}

.pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill:hover {
  border-color: var(--red);
}

.pill:has(input:checked) {
  border-color: var(--red);
  background: var(--red);
  color: var(--on-red);
  font-weight: 600;
}

.pill:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Onboarding template builder (ROADMAP tranche 1, item 2): the field
   catalog as grouped tick-lists, plus free custom rows. */
fieldset.catalog-group {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  max-width: 44rem;
}

fieldset.catalog-group legend {
  padding: 0 0.4rem;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

fieldset.catalog-group legend .unit {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: normal;
}

.catalog-field {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
}

.catalog-field input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--red);
  flex: none;
  align-self: center;
}

.catalog-name {
  font-weight: 600;
}

.catalog-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.custom-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px dashed var(--line);
}

.custom-field-row:first-of-type {
  border-top: 0;
}

.custom-field-row .field {
  margin: 0;
  flex: 1 1 9rem;
}

.custom-field-row .custom-per-corner {
  flex: none;
  padding-bottom: 0.55rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

.field-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.field-row .field {
  flex: 1;
  min-width: 12rem;
}

/* Neutral counterpart to .form-errors — a callout that isn't a mistake,
   e.g. the "here's what changing car will do" notice. */
.notice-box {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 5px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--surface);
  max-width: 34rem;
}

.notice-box p {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.notice-box ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* -------------------------------------------------------------------------
   Home — today's event banner (racemgmt.md #5): the context-aware prompt
   that sits above the fleet board on a race/trackday morning.
   ------------------------------------------------------------------------- */

.today-banner {
  margin: 0 0 2rem;
  padding: 1.1rem 1.4rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 6px;
}

.today-banner-quiet {
  border-left-color: var(--line);
  padding: 1rem 1.4rem;
}

.today-banner-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.today-banner-head h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.5rem;
}

.today-banner-head h2 a {
  text-decoration: none;
}

.today-session-list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.today-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.today-session-row:last-child {
  border-bottom: none;
}

.today-session-status {
  font-size: 0.8rem;
}

.today-session-status .sep {
  padding: 0 0.4rem;
}

/* -------------------------------------------------------------------------
   Login card
   ------------------------------------------------------------------------- */

.login-card {
  max-width: 24rem;
  margin: 3rem auto 0;
  padding: 1.75rem 2rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.login-title {
  margin: 0 0 0.5rem;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.9rem 0;
}

.login-field label {
  font-size: 0.9rem;
}

.login-field input {
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Laps — inline quick-add row + per-row delete for manual-source laps only
   (racemgmt.md #1 / ADR-0005).
   ------------------------------------------------------------------------- */

.lap-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.lap-row-actions form {
  display: inline;
}

/* button.___ (not bare .___) to outrank the global button[type="submit"]
   red styling, which has equal-or-higher specificity — same trick as
   button.linklike above. */
button.lap-delete-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}

button.lap-delete-btn:hover {
  background: none;
  border-color: var(--red);
  color: var(--red);
}

.lap-add-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 24rem;
  margin: 0.5rem 0 1.5rem;
}

.lap-add-input {
  flex: 1;
}

.lap-add-input input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

.lap-add-input input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

/* -------------------------------------------------------------------------
   Sticky save bar — setup sheet keyboard contract (racemgmt.md #5). Fixed
   to the viewport bottom like the site header is fixed to the top, same
   surface/line colours, inner row reuses .container so it lines up with
   the page content above it. Holds the sheet's one canonical submit
   button plus a live set/carried tally kept in sync by setup_entry.js.
   ------------------------------------------------------------------------- */

.setup-sheet-form {
  padding-bottom: 5rem;
}

.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
}

.save-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.save-bar-tally {
  font-size: 0.85rem;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------- */

/* Phone polish (ROADMAP tranche 1, item 9 — the mechanic's request):
   axle grids stay two-up so the sheet still reads FL|FR over RL|RR at
   390px, tap targets grow to thumb size, and inputs hold 16px so iOS
   doesn't zoom into every field on focus. */
@media (max-width: 720px) {
  .topnav {
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
  }

  .topnav a {
    display: inline-block;
    padding: 0.5rem 0.1rem;
  }

  .axle-grid {
    gap: 0.5rem;
  }

  .corner-plate {
    padding: 0.6rem 0.6rem 0.7rem;
  }

  .save-bar-inner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .btn,
  button[type="submit"],
  .btn-quiet,
  .disclosure > summary {
    min-height: 44px;
  }

  .pill {
    padding: 0.6rem 1rem;
  }

  .field input,
  .field select,
  .field textarea,
  .setup-field input,
  .setup-field select,
  .rail-corner input,
  .rail-corner select {
    font-size: 16px;
    min-height: 44px;
  }

  .rail-corners {
    gap: 0.5rem;
  }
}

/* -------------------------------------------------------------------------
   Race-day quick-add affordances (ROADMAP reachability audit): CHOICE
   option management on the setup sheet, and the driver quick-create on
   session forms. Both reuse .disclosure's summary-as-button look but
   scaled down — these are secondary actions nested inside a compact
   corner-plate row or a single field, not page-level actions.
   ------------------------------------------------------------------------- */

.choice-add {
  margin-top: 0.4rem;
}

.choice-add > summary {
  display: inline-block;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.choice-add > summary::-webkit-details-marker {
  display: none;
}

.choice-add > summary:hover {
  color: var(--red);
  text-decoration: underline;
}

.choice-add-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.choice-add-row input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

.choice-add-row button {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.choice-add-result {
  margin-top: 0.3rem;
  font-size: 0.8rem;
}


.driver-quick-create {
  margin: 0.5rem 0 0;
}

.driver-quick-create > summary {
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
}

.driver-quick-create[open] {
  max-width: none;
}

/* Compact error list for htmx fragment responses (setup-sheet CHOICE
   option add, driver quick-create) — .form-errors is sized for a
   page-level block, too heavy for a few words next to a small control. */
.form-errors-inline {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  color: var(--red);
  font-size: 0.8rem;
}