/* CourseClock — the look follows PitchBoard's phone app (its web/styles.css): big titles, one card per thing you tap,
   44–64 px tap targets with room between them, menus as labeled cards. Colors are tokens; dark mode and the ☰ → App
   Appearance choice (html[data-scheme]) redefine them. */
/* Tokens: PitchBoard's (styles.css :root, app.js DARK_UI; ui-rules COL-1/COL-2/COL-7). One exception, Ryan 2026-10-26:
   dark mode keeps CourseClock's darker FILL blue (--accent-btn #2b63c9; PitchBoard fills with #4c8dff) — white text on
   it reads better. Text accent is PitchBoard's in both schemes. */
:root {
  --edge-ramp: 0px;
  --bg: #e9ecef;
  --panel: #ffffff;
  --text: #1d2733;
  --muted: #4f5b67; /* dark enough for sun (design review X-5) */
  --accent: #1d5fd1;
  --accent-btn: #1d5fd1; /* fills: buttons, selected tabs, live cards */
  --card: color-mix(in srgb, var(--text) 8%, transparent); /* PitchBoard #home .card */
  --chip: color-mix(in srgb, var(--text) 10%, transparent); /* PitchBoard .seg button */
  --line: color-mix(in srgb, var(--text) 10%, transparent); /* hairlines */
  --go: #19803f; /* race Start (CourseClock's own) */
  --warn: #d12a2a; /* COL-7 red */
  --armed: #d93a32; /* COL-7 armed two-tap */
  --gold: #f2c94c;
  --font: ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --bg: #0f1419; --panel: #1b232c; --text: #e6edf3; --muted: #a3b0bd; --accent: #4c8dff; --accent-btn: #2b63c9;
    --go: #26a35a; color-scheme: dark;
  }
}
:root[data-scheme="dark"] {
  --bg: #0f1419; --panel: #1b232c; --text: #e6edf3; --muted: #a3b0bd; --accent: #4c8dff; --accent-btn: #2b63c9;
  --go: #26a35a; color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--font); /* base size = the browser's 16 px; elements size themselves (TYPE-2) */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
input, textarea, select { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; text-align: inherit; }
button:active { transform: scale(0.96); }
button:disabled { opacity: 0.45; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Mouse/tap focus never draws a ring (BTN-8). */
button:focus:not(:focus-visible) { outline: none; }
dialog header [tabindex="-1"]:focus { outline: none; }

/* Page gutters and the top band (PitchBoard NAV-2, SAFE-1/2): every edge pads max(16px, safe area); the top bars start
   at --nav-top, right under the status bar. --edge-ramp = iPadOS 26's glass band on Home Screen apps (iPad only). */
:root {
  --nav-top: calc(max(12px, env(safe-area-inset-top)) + var(--edge-ramp));
  --gutter-l: max(16px, env(safe-area-inset-left));
  --gutter-r: max(16px, env(safe-area-inset-right));
}
@media (display-mode: standalone) and (min-width: 700px) and (min-height: 600px) {
  @supports (-webkit-touch-callout: none) { :root { --edge-ramp: 44px; } }
}
#app { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter-r) calc(40px + var(--bottom)) var(--gutter-l); }

/* ---------------------------------------------------------------- top bars (PitchBoard #home .titlebar, .teambar) */
/* Sticky and solid (NAV-3): no blur, no shadow; content scrolls under; the ☰ lives in the bar. */
.titlebar, .teambar, .bar {
  position: sticky; top: 0; z-index: 5;
  margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));
  padding: var(--nav-top) var(--gutter-r) 6px var(--gutter-l);
  min-height: 48px; background: var(--bg);
}
/* Teams: the app name (h1 32 px / 800, NAV-4) and ☰. */
.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.titlebar h1 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.15; }
/* ☰: PitchBoard #home .homeMenu — 44 px circle in the bar. */
.menuBtn { flex: none; justify-self: end; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  font-size: 20px; text-align: center; background: color-mix(in srgb, var(--text) 8%, transparent); }
/* Team: ‹ Teams · Races | Runners · ☰ (NAV-6): the tabs are an accent pill switch in the bar. */
.teambar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.teambar .back, .bar .back { justify-self: start; color: var(--accent); font-size: 18px; font-weight: 700; min-height: 44px; padding: 0 6px; white-space: nowrap; } /* NAV-5 */
.teambar .switch { justify-self: center; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); box-shadow: 0 1px 3px #0000001f; }
.teambar .switch button { height: 44px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 16px; font-weight: 700; white-space: nowrap; text-align: center; }
.teambar .switch button.on { background: var(--accent-btn); color: #fff; }
@media (max-width: 520px) {
  .teambar { grid-template-columns: auto 1fr auto; }
  .teambar .switch button { padding: 0 14px; font-size: 15px; }
}
/* The smallest phones (320 px): back is just "‹" so it never runs under the tabs (NAV-7). */
@media (max-width: 359px) {
  .teambar .back .lbl, .bar .back .lbl { display: none; }
  .teambar .back, .bar .back { font-size: 22px; padding: 0 10px; }
}
/* The item's title on the page under the bar (NAV-9): PitchBoard #home .title, 30 px / 800. */
.title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; min-width: 0; }
.title span { min-width: 0; overflow-wrap: anywhere; }
/* Race (CourseClock's own screen): ‹ Races · race name, or the running clock once the big one scrolls off · ☰. */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.bar .mid { justify-self: center; min-width: 0; text-align: center; }
.bar .mid b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.bar .mid .miniClock { display: block; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: var(--go); }
.bar .end { justify-self: end; display: flex; gap: 8px; }
.pageTitle { font-size: 30px; line-height: 1.15; margin: 10px 0 2px; }
.pageSub { color: var(--muted); font-size: 16px; margin: 0 0 14px; }

/* ---------------------------------------------------------------- sections, cards */
/* Teams and team screens: PitchBoard's #home .wrap — one column, 14 px between things. */
#app[data-screen="teams"], #app[data-screen="team"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
/* Section labels (TTL-1): 13 px / 800 uppercase, 0.08em, muted. */
.label { margin: 14px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.list { display: grid; gap: 12px; }
.intro { margin: -6px 0 4px; color: var(--muted); font-size: 16px; } /* EMPTY-1 */
/* One card per thing you tap (PitchBoard #home .card, LIST-1): radius 18, padding 16/18, min 76 px, a text tint, a muted
   "›"; title 21 px, one small muted line (15 px), each "· part" kept whole (LIST-4). */
.card { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 16px 18px; border-radius: 18px; text-align: left;
  background: var(--card); }
.card::after { content: "›"; font-size: 28px; color: var(--muted); margin-left: 4px; }
.card .main { flex: 1; min-width: 0; }
.card strong { display: block; font-size: 21px; }
.card small { display: block; color: var(--muted); font-size: 15px; margin-top: 3px; }
.card small.parts span { white-space: nowrap; }
.card .side { text-align: right; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Something live: a filled accent card, white text, 85 % white secondary (LIST-2). */
.card.continue { background: var(--accent-btn); color: #fff; }
.card.continue small, .card.continue::after { color: rgba(255, 255, 255, 0.85); }
/* Status pills lead the date line (LIST-3): 12 px / 800 caps; LIVE = red fill + white. */
.pill { display: inline-block; margin: 0 8px 0 0; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; vertical-align: 1px; }
.pill.live { background: #d93a32; color: #fff; }
/* Screen-level primary (BTN-2): full width, 64 px, radius 18, 21 px / 800; the secondary beside it is a text tint. */
button.new { width: 100%; min-height: 64px; border-radius: 18px; background: var(--accent-btn); color: #fff; font-size: 21px; font-weight: 800; text-align: center; }
button.new.subtle { min-height: 54px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-size: 18px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Links that act, separated by a muted "·" (BTN-7). */
.joinLinks { display: flex; justify-content: center; align-items: center; gap: 2px; color: var(--muted); }
.joinLinks .link { padding: 0 8px; }
/* Who's coaching on this phone (PitchBoard #home .coach-card, EMPTY-4). */
.coach-card { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.coach-card small { color: var(--muted); font-size: 15px; }
.coach-card .inrow { display: flex; gap: 8px; }
.coach-card input.text { flex: 1; min-width: 0; width: 0; min-height: 48px; height: 48px; font-size: 17px; background: var(--panel); }
.coach-card .primaryish { flex: none; min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--accent-btn); color: #fff; font-weight: 800; }
.coach-card .link { justify-self: center; min-height: 44px; } /* PitchBoard 36 px; 44 per BTN-1 */
button.coach-card.set { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 8px 8px 8px 16px;
  background: transparent; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); font-size: 16px; text-align: left; }
button.coach-card.set small { color: var(--accent); font-weight: 700; padding-right: 8px; }
/* Runners (PitchBoard #home .rtable, LIST-5/6): a heading per group (16 px / 800, count pill, a rule under), rounded rows. */
.rtable { display: grid; gap: 4px; }
.rsec { display: flex; align-items: center; gap: 8px; margin: 14px 2px 4px; padding: 0 0 6px; font-size: 16px; font-weight: 800;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.rsec:first-child { margin-top: 0; }
.rsec .count { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); }
button.rrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 6px 12px;
  border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 17px; text-align: left; }
.rrow .nm { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.rrow .nm small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.rrow .pr { flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rrow .pr small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.panel { background: var(--panel); border-radius: 20px; padding: 16px 18px; margin: 12px 0; }
.panel h2 { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.empty { color: var(--muted); font-size: 16px; padding: 6px 0; margin: 0; } /* EMPTY-3 */
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.warn { color: var(--warn); }
.tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 7px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); vertical-align: 3px; margin-left: 8px; }
.tag.pr { background: var(--gold); color: #2a2100; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 52px; padding: 0 20px; border-radius: 16px; font-weight: 800; font-size: 18px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}
.btn.big { min-height: 64px; font-size: 22px; border-radius: 20px; }
.btn.primary { background: var(--accent-btn); color: #fff; }
.btn.go { background: var(--go); color: #fff; }
.btn.danger { background: transparent; color: var(--warn); }
.btn.wide { width: 100%; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.btns > .btn { flex: 1 1 140px; }
.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; }
.link { color: var(--accent); font-weight: 700; font-size: 16px; min-height: 44px; padding: 0 4px; } /* BTN-7 */
.links .dot { color: var(--muted); align-self: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 46px; padding: 0 16px; border-radius: 12px; font-size: 17px; font-weight: 600; background: var(--chip); } /* PitchBoard .seg button (BTN-5) */
.chip.on { background: var(--accent-btn); color: #fff; }

/* segmented tabs (team: Races | Runners; race: checkpoints + Results) */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.seg button { flex: 1; min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 800; font-size: 16px; color: var(--muted); white-space: nowrap; text-align: center; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px #0002; }
/* The race's tabs (Mile 1 | Finish | Results): PitchBoard's field tabs (NAV-6, BTN-1) — a pill on --panel with a shadow,
   44 px tabs, selected = accent fill + white; Results in accent text. Scrolls sideways when a course has many marks. */
.stations { overflow-x: auto; scrollbar-width: none; margin: 14px calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l)); padding: 0 var(--gutter-r) 6px var(--gutter-l); }
.stations::-webkit-scrollbar { display: none; }
.stations .seg { width: max-content; min-width: 100%; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); box-shadow: 0 1px 3px #0000001f; }
.stations .seg button { height: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--text); }
.stations .seg button.on { background: var(--accent-btn); color: #fff; box-shadow: none; }
@media (max-width: 380px) { .stations .seg button { padding: 0 11px; font-size: 15px; } }
.stations .seg button.results { color: var(--accent); }
.stations .seg button.results.on { color: #fff; }

/* fields: PitchBoard #newGame input / label (FORM-1, FORM-2) — no border, a text tint, radius 12, 50 px; labels 13 px
   uppercase muted. */
input.text, select.text, textarea.text {
  width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 0;
  background: var(--chip); color: var(--text); font-size: 18px;
}
textarea.text { padding: 12px 14px; min-height: 170px; font-size: 17px; line-height: 1.4; resize: vertical; }
textarea.text.linkBox { min-height: 0; font-size: 16px; word-break: break-all; }
label.field { display: block; margin: 14px 0; }
label.field > span { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fieldRow { display: flex; gap: 10px; }
.fieldRow > * { flex: 1; min-width: 0; }
/* Paired fields wrap on phones, the first full width; wrapped rows add no extra gap (FORM-4). */
@media (max-width: 520px) {
  .fieldRow:has(> label) { flex-wrap: wrap; row-gap: 0; margin-bottom: 14px; }
  .fieldRow:has(> label) > label { flex: 1 1 40%; margin: 14px 0 0; }
  .fieldRow:has(> label) > label:first-child { flex-basis: 100%; }
}
/* A sheet's note (PitchBoard .lock-note). */
.note { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.note + .text, .note + label.field { margin-top: 12px; }
label.adult { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 15px; }
label.adult input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent-btn); }
.checks label { font-size: 17px; display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); }
.checks label:first-child { border-top: 0; }
.checks input { width: 24px; height: 24px; accent-color: var(--accent-btn); }
.checks .grow { flex: 1; }

/* ---------------------------------------------------------------- ☰ menus (PitchBoard #menu, MENU-2..11) */
/* A full-height panel (phone: the whole screen), page background, sticky header, sections as cards. The header sits at
   the panel's very top and carries the safe-area padding itself, so stuck it still clears the status bar. */
#menu {
  margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(420px, 100vw); max-width: 100vw; border: 0;
  padding: 0 18px calc(24px + var(--bottom)); background: var(--bg); color: var(--text); overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 520px) { #menu { width: 100vw; margin: 0; } }
#menu::backdrop { background: rgba(10, 14, 20, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#menu header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0 -18px 6px; padding: calc(max(16px, env(safe-area-inset-top)) + var(--edge-ramp) + 8px) 18px 10px; background: var(--bg); }
#menu header .htitle { display: grid; min-width: 0; }
#menu header strong { font-size: 22px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu header .htitle small { color: var(--muted); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu header .close { flex: none; color: var(--accent); font-size: 17px; font-weight: 700; min-height: 44px; padding: 0 6px; white-space: nowrap; }
#menu header.sub strong { flex: 1; text-align: center; font-size: 18px; }
#menu .mgroups { display: contents; }
/* Each h3 section is a card (MENU-3). */
#menu .mgroup { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px 14px 14px; border-radius: 18px; background: var(--panel); }
#menu .mgroup > h3 { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#menu .mgroup .note { margin: 0; }
#menu .note.intro { margin: 0 0 12px; padding: 0 2px; }
#menu .mgroup .chips { gap: 6px; }
#menu .mgroup .chip { background: color-mix(in srgb, var(--text) 7%, transparent); }
#menu .mgroup .chip.on { background: var(--accent-btn); color: #fff; }
#menu .mgroup.app .syncPill { justify-self: start; margin: 2px 0 0; }
/* Rows (MENU-4): 48 px, 17 px / 600, label left, value right — accent when it opens something; hairlines between. */
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0;
  color: var(--text); font-size: 17px; font-weight: 600; text-align: left; }
.mrow + .mrow { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.mrow .lbl { display: grid; min-width: 0; padding: 6px 0; }
.mrow .lbl small, .mrow .main small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.mrow .main { flex: 1; min-width: 0; }
.mrow b { flex: none; max-width: 60%; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.mrow b { color: var(--accent); }
/* A text box in a row looks like one and never widens the card (MENU-6, FORM-5). */
.mrow input.text { flex: 0 1 60%; min-width: 0; width: 0; min-height: 40px; height: 40px; padding: 0 10px; border-radius: 10px;
  text-align: right; font-size: 17px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.mrow input.text:focus { outline: 2px solid var(--accent); outline-offset: 0; }
/* Account rows: Sign out in accent, Delete account in red (PitchBoard #menu .acctActs). */
.acctActs { display: grid; }
.acctActs .mrow { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 0; }
.acctActs .mrow.signout { color: var(--accent); }
.acctActs .mrow.delete { color: var(--warn); }
.acctActs .mrow.armed { background: var(--armed); color: #fff; padding: 0 12px; border-radius: 10px; }
/* Danger card (MENU-8): red-tinted, stacked left-aligned red rows, each two taps. */
#menu .mgroup.danger { background: color-mix(in srgb, #d12a2a 6%, var(--panel)); }
#menu .mgroup.danger .danger-zone { display: grid; gap: 0; }
#menu .mgroup.danger .danger-zone p { margin: 0 0 8px; color: var(--text); }
#menu .mgroup.danger .danger-zone button { justify-self: stretch; text-align: left; min-height: 48px; padding: 0; font-size: 17px; font-weight: 600;
  border-radius: 10px; color: var(--warn); }
#menu .mgroup.danger .danger-zone button + button { border-top: 1px solid color-mix(in srgb, #d12a2a 12%, transparent); border-radius: 0; }
#menu .mgroup.danger .danger-zone button.armed { padding: 0 14px; border-radius: 10px; background: var(--armed); color: #fff; }
/* Coaches & devices: people and devices as rows with their actions (PitchBoard #menu .devices). */
.devices { display: grid; }
.devices .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 0;
  font-size: 16px; font-weight: 600; }
.devices > * + * { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.devices .who { flex: 1 1 160px; min-width: 0; }
.devices .who small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.devices .acts { display: flex; gap: 6px; margin-left: auto; }
.devices .acts button { min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 7%, transparent); }
.devices .acts button.danger { color: var(--warn); }
.devices .acts button.armed { background: var(--armed); color: #fff; }
/* Invite a coach sheet: QR, a centered note, Send the link (PitchBoard #newGame .sendLink). */
.note.center { text-align: center; }
.btn.sendLink { width: 100%; margin-top: 14px; min-height: 50px; border-radius: 14px; font-size: 17px; }

/* ---------------------------------------------------------------- race */
.clockCard { text-align: center; padding: 18px 16px 16px; }
.clock { font-variant-numeric: tabular-nums; font-size: 68px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; } /* TYPE-1: the app font, tabular numbers */
.clock .t { font-size: 36px; color: var(--muted); }
.clockCard .state { color: var(--muted); margin-top: 8px; font-size: 16px; }
.clockCard .btn.go { width: 100%; min-height: 76px; font-size: 28px; border-radius: 20px; margin-top: 16px; }
.clockCard .link { margin-top: 6px; }

.toolRow { display: flex; gap: 10px; margin: 16px 0 12px; }
.toolRow input { flex: 1; }
.markBtn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; margin: 16px 0 14px;
  border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--text) 35%, transparent); font-size: 19px; font-weight: 800; text-align: center;
}
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.runnerBtn {
  position: relative; min-height: 76px; padding: 12px 14px; border-radius: 18px; background: var(--panel);
  box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line) inset;
}
.runnerBtn b { display: block; font-size: 21px; line-height: 1.2; padding-right: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runnerBtn span { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runnerBtn i { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 14px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.runnerBtn.next { box-shadow: 0 0 0 3px var(--accent) inset; }
.runnerBtn.flash { background: var(--go); color: #fff; }
.passRow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; border-top: 1px solid var(--line); }
.passRow:first-of-type { border-top: 0; }
.passRow .place { width: 28px; text-align: right; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.passRow .main { flex: 1; min-width: 0; }
.passRow .main div { font-size: 18px; font-weight: 700; }
.passRow .main small { display: block; color: var(--muted); font-size: 14px; }
.passRow .time { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; }
.pick { color: var(--warn); }

/* results */
.resRow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 58px; border-top: 1px solid var(--line); }
.resRow:first-of-type { border-top: 0; }
.resRow .place { text-align: right; color: var(--muted); font-weight: 800; }
.resRow .name { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resRow .name small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.resRow .fin { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 800; text-align: right; }
.resRow .fin small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.resRow .pace { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); text-align: right; min-width: 52px; }
.resRow.head { min-height: 28px; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tableWrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table.results { border-collapse: collapse; width: 100%; font-size: 15px; }
table.results th { text-align: right; font-size: 12px; color: var(--muted); font-weight: 800; padding: 6px 8px; white-space: nowrap; text-transform: uppercase; }
table.results td { text-align: right; padding: 10px 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.results th:nth-child(2), table.results td:nth-child(2) { text-align: left; font-family: var(--font); font-weight: 700; position: sticky; left: 0; background: var(--panel); }
table.results td small { display: block; font-size: 12px; color: var(--muted); }
.splitTable .mrow { min-height: 56px; }
.splitTable .num { font-variant-numeric: tabular-nums; text-align: right; }
.splitTable .num small { display: block; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- sheets */
/* Phone pop-ups are iOS-style bottom sheets (PitchBoard "Phone pop-ups are iOS-style bottom sheets", SHEET-1..6): full
   width from the bottom, --panel surface, radius 22 top, a grab handle, the page behind dimmed AND blurred, a short slide
   up, lifted above the keyboard (--kb, app.js). Bigger screens get a centered card. */
dialog.sheet {
  border: 0; padding: 0; margin: auto 0 0; width: 100vw; max-width: 100vw; box-sizing: border-box;
  max-height: min(92vh, 92dvh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--text); border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}
@media (max-width: 600px) {
  dialog.sheet[open] { animation: pbSheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  dialog.sheet { margin-bottom: var(--kb, 0px); max-height: calc(min(92vh, 92dvh) - var(--kb, 0px)); transition: margin-bottom 0.2s ease; }
}
@media (min-width: 601px) {
  dialog.sheet { margin: auto; width: min(520px, 94vw); max-width: 94vw; border-radius: 22px; box-shadow: 0 20px 60px #0006; }
  dialog.sheet .grab { display: none; }
}
@keyframes pbSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }
dialog.sheet::backdrop { background: rgba(10, 14, 20, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.sheet .grab { width: 40px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 22%, transparent); margin: 10px auto 0; }
/* Header: title left 22 px / 800 (never wraps at 320 px), one plain accent button right (SHEET-5, TTL-2, TTL-4). */
dialog.sheet header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 20px 6px; background: var(--panel); }
dialog.sheet header h3 { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog.sheet header .close { flex: none; color: var(--accent); font-size: 17px; font-weight: 700; min-height: 44px; padding: 0 4px; white-space: nowrap; }
dialog.sheet .body { padding: 2px 20px calc(18px + var(--bottom)); }
dialog.sheet .body > :first-child, dialog.sheet .body > div > :first-child { margin-top: 0; }
/* Cards inside a sheet: a text tint on the white surface (PitchBoard #newGame .inviteOpt). */
dialog.sheet .panel { background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 16px; padding: 12px 14px; margin: 12px 0; }
/* The sheet's main button (PitchBoard #newGame .go, BTN-3): 58 px, radius 16, 20 px / 800, sticky to the bottom with a
   fade above it so it's always in reach. */
.btn.submit { width: 100%; margin-top: 20px; min-height: 58px; border-radius: 16px; font-size: 20px; font-weight: 800;
  position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -10px 16px var(--panel); }
.btn.submit:disabled { opacity: 0.5; }
/* Danger inside a sheet (PitchBoard #newGame .danger-zone): a hairline, then a quiet red button; armed = red fill. */
dialog.sheet .danger-zone { display: flex; justify-content: center; margin: 16px 0 0; padding: 10px 0 0; border: 0; border-radius: 0;
  background: none; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.danger-zone button.danger { min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--warn); font-size: 15px; font-weight: 700; }
button.armed, .danger-zone button.armed { background: var(--armed); color: #fff; padding: 0 14px; }
.qr { display: flex; justify-content: center; padding: 14px; background: #fff; border-radius: 18px; margin: 10px auto 14px; width: 252px; }
.qr svg { width: 224px; height: 224px; }
.linkText { font-size: 13px; color: var(--muted); word-break: break-all; -webkit-user-select: text; user-select: text; margin: 10px 0 0; }
.scanBox { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 1; }
.scanBox video { width: 100%; height: 100%; object-fit: cover; }
.scanBox::after { content: ""; position: absolute; inset: 18%; border: 3px solid #fff8; border-radius: 18px; }

/* ---------------------------------------------------------------- toast, sync */
/* Toasts (PitchBoard .toast, CONF-3/4): a dark pill with white text, bottom center above the safe area; Undo = a filled
   accent button; message and button stay on one line on a phone. Errors: red, 10 s, tap to dismiss. */
.toast { position: fixed; z-index: 50; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: 90vw; bottom: calc(24px + var(--bottom));
  padding: 12px 18px; border-radius: 14px; background: #000d; color: #fff; font-size: 16px; font-weight: 600; }
.toast.error { background: #d93a32; color: #fff; white-space: normal; text-align: center; }
.toast.undo { display: flex; align-items: center; gap: 14px; bottom: calc(20px + var(--bottom)); }
.toast.undo span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.toast.undo button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 800; color: #fff; background: var(--accent-btn); white-space: nowrap; }
@media (max-width: 420px) { .toast.undo { gap: 10px; padding: 10px 12px; } .toast.undo button { padding: 0 12px; } }
/* Sync status, tap to sync now (PitchBoard .syncPill, NAV-10, BTN-1): 44 px; red only when something is wrong. */
.syncPill { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 700;
  color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.syncPill[data-kind="ok"] { color: #1a7f37; }
.syncPill[data-kind="bad"] { color: #fff; background: var(--armed); }
.syncBad { display: block; margin: 16px auto 0; }

/* team numbers above a group's results */
.teamStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 0 0 12px; }
.teamStats .stat { background: var(--chip); border-radius: 14px; padding: 10px 12px; }
.teamStats .stat b { display: block; font-variant-numeric: tabular-nums; font-size: 19px; }
.teamStats .stat small { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }

/* a meet on the Races tab: its name, date and course, then its races */
.meet { margin: 0; }
.meetHead { padding: 0 4px 8px; }
.meetHead b { display: block; font-size: 17px; }
.meetHead small { display: block; color: var(--muted); font-size: 14px; }

/* iPhone Safari gives date/time inputs an intrinsic minimum width (the Date · Start time row pushed the New race sheet
   sideways, Ryan 2026-10-25): drop the native look so they shrink like any field; sheets never scroll sideways. */
input[type="date"].text, input[type="time"].text { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; line-height: 50px; text-align: left; } /* FORM-3 */
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
dialog.sheet, dialog.sheet .body { overflow-x: hidden; }
.fieldRow > label { min-width: 0; }

/* a meet: one card, its races as rows (PitchBoard-like list card) */
.meetCard { background: var(--card); border-radius: 20px; padding: 14px 16px 6px 20px; margin: 0 0 12px; }
.meetCard.live { box-shadow: 0 0 0 3px var(--accent-btn) inset; }
.meetCard .meetHead { padding: 0 0 6px; }
.meetCard .meetHead b { font-size: 19px; line-height: 1.25; }
.meetRow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.meetRow::after { content: "›"; font-size: 26px; color: var(--muted); }
.meetRow .main { flex: 1; min-width: 0; }
.meetRow b { display: block; font-size: 18px; }
.meetRow small { display: block; color: var(--muted); font-size: 14px; }
.meetRow .side { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--go); }
.meetRow.live b { color: var(--go); }
.doneCard { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.doneCard b { font-size: 18px; }
.doneCard span { font-variant-numeric: tabular-nums; font-size: 15px; }

/* running race: the clock on one line (design review 2026-10-25) */
/* Running: the clock front and center at the top (Ryan, 2026-10-30), its start line under it. */
.clockLine { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 18px 10px; text-align: center; }
.clockLine .clock { font-size: 60px; }
.clockLine .clock .t { font-size: 30px; }
@media (max-width: 360px) { .clockLine .clock { font-size: 50px; } .clockLine .clock .t { font-size: 26px; } }
.clockLine .state { color: var(--muted); font-size: 14px; text-align: center; }
/* Sync by camera (iOS app): under "Started …" on a running race, its own line on a race not started yet */
.clockLine .camSync { display: block; margin: 2px auto 0; padding: 0; font-size: 15px; }
.clockCard .camSync { display: block; margin: 0 auto; }
.markBtn.big { min-height: 84px; font-size: 22px; border-style: solid; background: var(--panel); }

/* Mark + Other team: one row; Other team is the smaller, solid one. Finish links make both big. */
.markRow { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin: 16px 0 14px; }
.markRow .markBtn { margin: 0; }
.markBtn.other { flex-direction: column; gap: 2px; border-style: solid; border-color: var(--line); background: var(--panel); font-size: 17px; }
.markBtn.other small { font-size: 13px; font-weight: 600; color: var(--muted); }
.markRow.big .markBtn { min-height: 84px; }
.markRow.big .markBtn:not(.other) { font-size: 22px; border-style: solid; background: var(--panel); }
.teamTaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: -4px 0 16px; }
.teamTap {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 8px;
  border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; font-size: 15px;
}
.teamTap b { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.teamTap small { font-size: 12px; color: var(--muted); font-weight: 600; }
.runnerBtn span.toGo { white-space: normal; }
.markRow.solo { grid-template-columns: 1fr; }
.teamTaps.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 12px; }
.teamTaps.big .teamTap { min-height: 96px; font-size: 20px; border-radius: 18px; }
.teamTaps.big .teamTap small { font-size: 15px; }
.toggleRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 4px 0;
  background: none; text-align: left; font-size: 17px; font-weight: 600; color: var(--text); }
.toggleRow .lbl { display: grid; }
.toggleRow .lbl small { color: var(--muted); font-size: 13px; font-weight: 500; }
.toggleRow .switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent); transition: background 0.15s; }
.toggleRow .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px #0003; transition: transform 0.15s; }
.toggleRow.on .switch { background: #34c759; }
.toggleRow.on .switch::after { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .toggleRow .switch, .toggleRow .switch::after { transition: none; } }

/* Race ☰: Finish the race is the normal end — accent, two taps, never in the danger card (CONF-6, MENU-9). */
#menu .mgroup .chip.primaryish, #menu .mgroup .chip.primaryish.armed { background: var(--accent-btn); color: #fff; }

/* Race weather (QUEUE weatherkit-ios): the stored bands under the race title; in the iOS app a tap shows Apple's exact
   numbers (never stored) with the Apple Weather mark (light / dark versions follow the scheme) and the legal link. */
.wx { margin: -2px 0 10px; text-align: center; }
.wxHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; width: 100%; min-height: 44px;
  padding: 6px 12px; border-radius: 14px; background: var(--card); color: var(--text); font-size: 16px; }
.wxHead .wxTag { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wxHead small { order: 1; flex-basis: 100%; color: var(--muted); font-size: 12px; font-weight: 600; }
.wxHead .wxMore { color: var(--accent); font-weight: 700; font-size: 15px; }
.wxExact { margin: 6px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--panel); text-align: left; }
.wxExact ul { margin: 4px 0 8px; padding: 0; list-style: none; font-size: 17px; font-weight: 600; line-height: 1.45; }
.wxAttr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.wxMark { height: 18px; width: auto; }
.wxMark.dark { display: none; }
.wxMarkText { font-weight: 700; font-size: 14px; }
.meetHead small.wxLine { margin-top: 2px; font-size: 13px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .wxMark.light { display: none; }
  :root:not([data-scheme="light"]) .wxMark.dark { display: inline; }
}
:root[data-scheme="dark"] .wxMark.light { display: none; }
:root[data-scheme="dark"] .wxMark.dark { display: inline; }