/* 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. */
:root {
  --bg: #e9ecef;
  --panel: #ffffff;
  --card: #dde1e6; /* tappable list cards */
  --text: #1d2733;
  --muted: #4f5b67; /* dark enough for sun */
  --line: #d3d8de;
  --accent: #1d5fd1;
  --accent-soft: #d0dcf0;
  --accent-btn: #1d5fd1;
  --go: #19803f;
  --warn: #c62828;
  --chip: #eef0f2;
  --gold: #f2c94c;
  --font: ui-rounded, -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --gap: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --bg: #0f1419; --panel: #1b232c; --card: #222c36; --text: #e6edf3; --muted: #a3b0bd; --line: #2e3945;
    --accent: #5b9dff; --accent-soft: #1d3150; --accent-btn: #2b63c9; --go: #26a35a; --warn: #ff6b6b; --chip: #26313c; color-scheme: dark;
  }
}
:root[data-scheme="dark"] {
  --bg: #0f1419; --panel: #1b232c; --card: #222c36; --text: #e6edf3; --muted: #a3b0bd; --line: #2e3945;
  --accent: #5b9dff; --accent-soft: #1d3150; --accent-btn: #2b63c9; --go: #26a35a; --warn: #ff6b6b; --chip: #26313c; 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);
  font-size: 17px;
  line-height: 1.35;
  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.97); }
button:disabled { opacity: 0.45; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

#app { max-width: 640px; margin: 0 auto; padding: 0 16px calc(40px + var(--bottom)); }

/* ---------------------------------------------------------------- bars */
.titlebar { display: flex; align-items: center; gap: 12px; padding: calc(14px + var(--top)) 0 4px; }
.titlebar h1 { flex: 1; margin: 0; font-size: 38px; line-height: 1.1; letter-spacing: -0.01em; }
.tagline { color: var(--muted); font-size: 18px; margin: 6px 0 18px; }
.roundBtn {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--text) 9%, transparent); font-size: 22px; text-align: center;
}
.bar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: calc(6px + var(--top)) 0 6px; margin: 0 -16px; padding-left: 10px; padding-right: 10px;
  background: var(--bg);
}
.bar.scrolled { box-shadow: 0 1px 0 var(--line); }
.bar .back { justify-self: start; color: var(--accent); font-size: 18px; font-weight: 700; min-height: 44px; padding: 0 6px; white-space: nowrap; }
.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-family: var(--mono); 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 */
.label { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }
.label:first-child { margin-top: 10px; }
.list { display: grid; gap: 12px; }
.item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px;
  padding: 14px 16px 14px 20px; border-radius: 20px; background: var(--card);
}
.item::after { content: "›"; font-size: 28px; color: var(--muted); }
.item .main { flex: 1; min-width: 0; }
.item strong { display: block; font-size: 20px; line-height: 1.2; }
.item small { display: block; color: var(--muted); font-size: 15px; margin-top: 3px; }
.item .side { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; white-space: nowrap; }
.item.live { background: var(--accent-btn); color: #fff; }
.item.live small, .item.live::after { color: color-mix(in srgb, #fff 78%, transparent); }
.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; }
.panel.soft { background: var(--accent-soft); }
.panel.soft h3 { margin: 0 0 6px; font-size: 20px; }
.steps { margin: 6px 0 0; padding-left: 22px; color: var(--muted); }
.steps li { margin: 4px 0; }
.empty { color: var(--muted); padding: 6px 0; margin: 0; }
.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.live { background: #fff; color: var(--accent-btn); }
.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%; }
.btn.armed { background: var(--warn); color: #fff; }
.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: 17px; min-height: 44px; padding: 0 4px; }
.links .dot { color: var(--muted); align-self: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 46px; padding: 0 18px; border-radius: 14px; font-weight: 800; background: var(--chip); }
.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; }
.stations { overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px; }
.stations::-webkit-scrollbar { display: none; }
.stations .seg { width: max-content; min-width: 100%; }
.stations .seg button { min-height: 44px; }
@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: var(--text); }

/* fields */
input.text, select.text, textarea.text {
  width: 100%; min-width: 0; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); font-size: 17px;
}
textarea.text { padding: 12px 14px; min-height: 170px; line-height: 1.4; }
label.field { display: block; margin: 14px 0; }
label.field > span { display: block; font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.fieldRow { display: flex; gap: 12px; }
.fieldRow > * { flex: 1; min-width: 0; }
.checks label { 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); }
.checks .grow { flex: 1; }

/* menu rows */
.mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; border-top: 1px solid var(--line); }
.mrow:first-of-type { border-top: 0; }
.mrow .main { flex: 1; min-width: 0; }
.mrow .main small { display: block; color: var(--muted); font-size: 14px; }
.mrow.go::after { content: "›"; font-size: 24px; color: var(--muted); }
.danger-zone { background: transparent; border: 2px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.danger-zone .btn { width: 100%; }

/* ---------------------------------------------------------------- race */
.clockCard { text-align: center; padding: 18px 16px 16px; }
.clock { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 68px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.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-family: var(--mono); 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-family: var(--mono); 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-family: var(--mono); 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-family: var(--mono); 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-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.splitTable .num small { display: block; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- sheets */
dialog.sheet {
  border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh;
  background: var(--bg); color: var(--text); border-radius: 24px 24px 0 0; overscroll-behavior: contain;
  transition: transform 0.2s ease;
}
@media (min-width: 700px) { dialog.sheet { margin: auto; max-width: 580px; border-radius: 24px; } }
dialog.sheet::backdrop { background: #000a; }
dialog.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 25%, transparent); margin: 8px auto 0; }
dialog.sheet header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 20px 8px; background: var(--bg); }
dialog.sheet header h3 { flex: 1; margin: 0; font-size: 26px; line-height: 1.15; }
dialog.sheet header .close { color: var(--accent); font-weight: 800; font-size: 18px; min-height: 44px; padding: 0 4px; }
dialog.sheet .body { padding: 4px 16px calc(28px + var(--bottom)); }
.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 */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--bottom)); transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 18px; width: max-content; max-width: calc(100% - 32px);
  background: var(--text); color: var(--bg); padding: 10px 12px 10px 18px; border-radius: 16px; font-weight: 700; font-size: 17px;
  box-shadow: 0 6px 20px #0005;
}
.toast button { color: var(--accent); font-weight: 800; min-height: 44px; padding: 0 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .toast button { color: #1d5fd1; } }
:root[data-scheme="dark"] .toast button { color: #1d5fd1; }
.toast.error { background: var(--warn); color: #fff; }
.toast.error button { color: #fff; text-decoration: underline; }
.syncPill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--chip); font-size: 15px; font-weight: 700; color: var(--muted); }
.syncPill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--go); }
.syncPill.bad { color: var(--warn); }
.syncPill.bad::before { background: var(--warn); }
.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-family: var(--mono); 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 0 18px; }
.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; display: flex; align-items: center; }
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-family: var(--mono); 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-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; }

/* running race: the clock on one line (design review 2026-10-25) */
.clockLine { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 18px; }
.clockLine .clock { font-size: 44px; }
.clockLine .clock .t { font-size: 24px; }
.clockLine .state { color: var(--muted); font-size: 14px; text-align: right; }
.markBtn.big { min-height: 84px; font-size: 22px; border-style: solid; background: var(--panel); }