/* Brainzie Poolside — coach-facing stopwatch. Brand palette mirrors the Brainzie site
   (brainzie.co.uk assets/brainzie.css). Built for one-handed use with wet thumbs in
   bright light: big tap targets, high contrast, tabular numerals. */

:root {
  --brand:        #D81B72;
  --brand-deep:   #A8155A;
  --brand-tint:   #FCE4F0;
  --secondary:    #6D28D9;
  --accent-coral: #FF4D6D;
  --uw:           #0284C7;
  --uw-tint:      #E0F2FE;
  --ink:      #18122B;
  --ink-soft: #4A4361;
  --muted:    #847B9C;
  --line:     #ECE7F2;
  --paper:    #FDFBFE;
  --paper-2:  #F6F1FB;
  --white:    #FFFFFF;
  --ok:       #15803D;
  --ok-tint:  #DCFCE7;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius-s: 11px;
}

* { box-sizing: border-box; }

/* .btn-stop and .result set display:flex, which would defeat the hidden attribute. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 0;
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand:hover .name { color: var(--brand-deep); }
.brand .mark { width: 26px; height: 26px; }
.brand .name { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-soft); }
.brand .name strong { color: var(--brand); }

/* Mode nav sits on the same row as the brand so it adds no vertical height — a
   segmented pill control so it reads clearly as "which timer am I in". */
.modes {
  display: flex;
  gap: 0;
  flex: 0 1 auto;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.modes::-webkit-scrollbar { display: none; }
.modes a {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}
.modes a:hover { color: var(--ink); }
.modes a.active {
  color: var(--white);
  background: var(--brand);
  box-shadow: 0 1px 4px rgba(216, 27, 114, .35);
}

/* Back-to-menu link that replaces the mode pill on every tool page. */
.menu-link {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  line-height: 1;
  white-space: nowrap;
}
.menu-link:hover { color: var(--brand); border-color: var(--brand-tint); }
.menu-link:active { background: var(--line); }

/* === Mode menu (index.html — the default page) ============================ */
.menu-wrap { max-width: 480px; }
.menu-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 16px 2px 12px;
}
.mode-menu { display: flex; flex-direction: column; gap: 12px; }
.mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.mode-card:hover { border-color: var(--brand-tint); box-shadow: 0 4px 16px rgba(24, 18, 43, .08); }
.mode-card:active { background: var(--line); }
.mode-emoji { flex: 0 0 auto; font-size: 1.7rem; line-height: 1; width: 38px; text-align: center; }
.mode-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.mode-name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--brand); }
.mode-desc { font-size: .84rem; line-height: 1.4; color: var(--ink-soft); }
.mode-go { flex: 0 0 auto; font-family: var(--font-display); font-size: 1.4rem; color: var(--muted); }

/* The help (?) button sits in the clock panel next to the pool selector / Clear,
   opening the how-it-works dialog. */
.help-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.help-btn:hover { color: var(--brand); border-color: var(--brand-tint); }
.help-btn:active { background: var(--line); }

/* --- Help dialog ----------------------------------------------------------- */

.help-dialog {
  width: min(94vw, 460px);
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(24, 18, 43, .35);
}
.help-dialog::backdrop { background: rgba(24, 18, 43, .45); }

.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 0;
}
.help-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}

.help-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.help-close:active { background: var(--line); }

.help-body { padding: 8px 18px 20px; }
.help-body p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.5;
}
.help-body strong { color: var(--ink); }
.help-body .privacy-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}

/* Instructional help: numbered, expandable steps, each revealing the actual
   control the coach taps. */
.help-body .help-intro { margin-top: 6px; }
.help-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  counter-reset: help-step;
}
.help-steps > li {
  counter-increment: help-step;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 8px;
  background: var(--paper-2);
  overflow: hidden;
}
.help-steps summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .94rem;
  color: var(--ink);
  list-style: none;
}
.help-steps summary::-webkit-details-marker { display: none; }
.help-steps summary::before {
  content: counter(help-step);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-size: .8rem;
  display: grid;
  place-items: center;
}
.help-steps summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: .8rem;
}
.help-steps details[open] summary::after { content: "▴"; }
.help-detail { padding: 0 14px 12px 45px; }
.help-detail p { margin: 4px 0 0; font-size: .9rem; }

/* A non-interactive chip mirroring how a real control looks. */
.ctl-demo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ctl-demo.lane-demo { align-items: center; }
.ctl-chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  padding: 7px 12px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  white-space: nowrap;
}
.ctl-start { background: var(--brand); color: var(--white); border-color: var(--brand); }
.ctl-stop { background: var(--secondary); color: var(--white); border-color: var(--secondary); }
.ctl-secondary { background: var(--paper-2); color: var(--secondary); border-color: var(--secondary); }
.ctl-untimed { background: var(--muted); color: var(--white); border-color: var(--muted); }
.ctl-uw { background: var(--uw); color: var(--white); border-color: var(--uw); }
.ctl-ghost { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }
.ctl-stroke { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }
.ctl-stroke.on { background: var(--brand); color: var(--white); border-color: var(--brand); }
.ctl-lane { width: 34px; text-align: center; padding: 7px 0; }
.ctl-lane-count {
  font-family: var(--font-display);
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  color: var(--ink);
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 14px 40px;
}

/* --- Main clock ----------------------------------------------------------- */

.clock-panel {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 4px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.clock {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 13vw, 3.8rem);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
}

.clock.running { color: var(--brand); }

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

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  border: 0;
  border-radius: var(--radius-s);
  min-height: 56px;
  padding: 0 22px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.btn:disabled { cursor: default; }

.btn-clear {
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  min-height: 48px;
  font-size: .95rem;
}

.btn-clear:active { background: var(--line); }

.btn-start {
  width: 100%;
  background: var(--brand);
  color: var(--white);
}

.btn-start:active { background: var(--brand-deep); }

.btn-start:disabled {
  background: var(--paper-2);
  color: var(--muted);
  border: 1px dashed var(--line);
}

/* One slot per lane: a Stop button that freezes into that swimmer's time. */
.stops {
  display: flex;
  gap: 6px;
}

.slot { flex: 1; min-width: 0; }

.btn-stop {
  width: 100%;
  padding: 0;
  background: var(--secondary);
  color: var(--white);
}

.btn-stop:active { background: #5B21B6; }

/* --- Swimmer table ---------------------------------------------------------- */

.swimmers {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
}

.swimmers td, .swimmers th { padding: 5px 0; }

.swimmers .num {
  width: 58px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.swimmers .num .live {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  font-weight: 600;
  color: var(--brand);
}

/* Column headers: Lane 1–4. The .stops wrapper keeps them aligned with the
   stop/result columns in the rows below. */
.swimmers thead th { font-weight: 600; vertical-align: bottom; }

.col-heads span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--ink-soft);
}

/* "Swimmer" label over the 1st–9th ordinals in the first column. */
.row-caption {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

tr.done .num { color: var(--ink); }

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 56px;
  border-radius: var(--radius-s);
  background: var(--ok-tint);
  color: var(--ok);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.result .res-time {
  font-size: clamp(.9rem, 4vw, 1.12rem);
  font-weight: 700;
}
/* Footnote: H = heat (the send-off / row this time swam in), # = place overall. */
.result .res-place {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  opacity: .85;
}

/* --- Lane add/remove control (next to Clear) -------------------------------- */
.lane-ctrl { display: inline-flex; align-items: center; gap: 4px; }
.lane-btn {
  width: 38px;
  height: 40px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.lane-btn:active { background: var(--line); }
.lane-btn:disabled { opacity: .4; cursor: default; }
.lane-count {
  min-width: 1.2ch;
  text-align: center;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* --- Grid + overall leaderboard side by side ------------------------------- */
.group-layout { display: flex; gap: 12px; align-items: flex-start; }
.group-grid { flex: 1; min-width: 0; }

.results-panel {
  flex: 0 0 auto;
  width: 116px;
  margin-top: 14px;
  padding: 8px 10px 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.results-title {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.results-cap {
  margin: 2px 0 8px;
  font-size: .56rem;
  color: var(--muted);
  line-height: 1.25;
}
.results-list { list-style: none; margin: 0; padding: 0; }
.results-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  border-top: 1px solid var(--line);
}
.results-item:first-child { border-top: 0; }
.results-item .r-rank { color: var(--muted); font-weight: 700; min-width: 1.6ch; }
.results-item .r-coord { color: var(--brand); font-weight: 700; }
.results-item .r-time { margin-left: auto; color: var(--ink); font-weight: 700; }

@media (max-width: 560px) {
  .group-layout { flex-direction: column; }
  .results-panel { width: 100%; margin-top: 4px; }
  .results-list { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .results-item { border-top: 0; }
}

.hint {
  margin-top: 26px;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
  line-height: 1.5;
}

.brainzie-link {
  margin-top: 18px;
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}

.brainzie-link a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.brainzie-link a:hover { color: var(--brand-deep); text-decoration: underline; }

/* === Set tracker (set.html) =============================================== */

/* The clock-panel on this page also carries the pool-length dropdown and Clear,
   in a small column beside the big clock so the sticky bar stays compact. */
.clock-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-sel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  min-height: 40px;
}

.set-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.stroke-picker {
  display: flex;
  gap: 4px;
  flex: 1;
}

.stroke-picker .stroke {
  flex: 1;
  min-height: 44px;
  padding: 0 4px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  cursor: pointer;
  touch-action: manipulation;
}

.stroke-picker .stroke.active {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}

.btn-split {
  width: 100%;
  margin-top: 10px;
  min-height: 64px;
  background: var(--brand);
  color: var(--white);
  font-size: 1.2rem;
}

.btn-split:active { background: var(--brand-deep); }
/* Swimming stays in the swim colour (magenta); the deeper shade is the only
   running cue, so swim/rest colour coding holds across the whole screen. */
.btn-split.running { background: var(--brand-deep); }
.btn-split.running:active { background: #8A1149; }

/* --- Manage row (Undo / Share / Clear) ------------------------------------ */

.manage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.btn-manage {
  min-height: 44px;
  padding: 0 14px;
  font-size: .9rem;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.btn-manage:active { background: var(--line); }
.btn-manage:disabled { color: var(--muted); opacity: .5; }

.btn-share { color: var(--brand); border-color: var(--brand-tint); }

/* Save to my history — the opt-in cloud action, given the brand accent. */
.btn-save { color: var(--brand); border-color: var(--brand-tint); font-weight: 800; }
.btn-save:not(:disabled):hover { background: var(--brand-tint); }

/* Clear sits apart on the right so it is not next to the everyday controls. */
#clear { margin-left: auto; }

/* === Topbar actions + account control ===================================== */
/* Group the back-link and the History/Sign-in control on the right of a topbar. */
.top-actions { display: flex; align-items: center; gap: 8px; }

/* === History detail: a mode surface rendered read-only ==================== */
/* Hide every live control but keep the data (grid, summary, speeds) and the
   Share/Text buttons (re-share works from the restored state). */
.wrap.readonly .set-actions,
.wrap.readonly .set-controls,
.wrap.readonly .race-setup,
.wrap.readonly .restore-banner,
.wrap.readonly .clock-tools,
.wrap.readonly #undo,
.wrap.readonly #clear { display: none !important; }
/* The frozen clock is part of the record, not a live timer — soften it. */
.wrap.readonly .clock { opacity: .85; }

/* Sign-in-to-save dialog reuses the help-dialog chrome; stack its actions. */
.save-dialog .welcome__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* --- Resume banner --------------------------------------------------------- */

/* Offered at the top of My session when a previous session is still in
   localStorage, so recorded work is never silently lost to a reload. */
.restore-banner {
  margin: 10px 0 4px;
  padding: 14px 16px;
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  border-radius: var(--radius-s);
}

.restore-text {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.45;
}

.restore-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-restore {
  flex: 1;
  background: var(--brand);
  color: var(--white);
  min-height: 48px;
}
.btn-restore:active { background: var(--brand-deep); }

.btn-restore-ghost {
  flex: 0 0 auto;
  background: var(--white);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  min-height: 48px;
}
.btn-restore-ghost:active { background: var(--paper-2); }

/* --- Session totals -------------------------------------------------------- */

/* Always-visible aggregates so the coach (and the share card) see swim/rest
   totals, distance and per-stroke breakdown at a glance. Sits above the grid;
   with the newest rep now at the top of the grid, the active row stays in view
   just below it. */
.summary {
  margin-top: 14px;
  padding: 8px 14px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

.summary.collapsed { padding-bottom: 8px; }

/* Header row doubles as the collapse toggle; the peek keeps the headline total
   and distance in view when the panel is closed. */
.summary-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.summary-title {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary-peek {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  opacity: 0;
  transition: opacity .12s ease;
}
.summary.collapsed .summary-peek { opacity: 1; }
.summary-peek .peek-dist { color: var(--muted); font-weight: 600; }

/* Shared number colours for the swim/rest/neutral scheme. */
.swim-val { color: var(--brand); }
.rest-val { color: var(--secondary); }
.ratio-val { color: var(--ink-soft); }
.num-sep { color: var(--line); font-weight: 400; }

.summary-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .8rem;
  transition: transform .15s ease;
}
.summary.collapsed .summary-chevron { transform: rotate(-90deg); }

.summary-body { margin-top: 4px; }

.sum-row {
  display: flex;
  gap: 8px;
}

.sum-stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sum-val {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
}

/* Colour code: swim = brand magenta, rest = secondary purple, everything else
   (totals, distance, structure) = neutral ink. Applied consistently across the
   screen so colour alone tells you what a number is about. */
.sum-total .sum-val { color: var(--ink); }
.sum-swim  .sum-val { color: var(--brand); }
.sum-rest  .sum-val { color: var(--secondary); }
.sum-dist  .sum-val { color: var(--ink); }

.sum-lbl {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Swim:rest line under the headline stats — bare colour-coded numbers (the
   wording is in each number's tap/hover description). */
.sum-ratio {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  font-weight: 700;
}

.stroke-table {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Speed + pace line beneath each stroke's headline row. */
.stroke-table .st-speed {
  padding: 0 0 6px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
}

.stroke-table td {
  padding: 5px 0;
  font-size: .9rem;
}

.stroke-table .st-stroke {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  width: 16%;
}

.stroke-table .st-count { color: var(--ink-soft); width: 18%; }
.stroke-table .st-avg { color: var(--ink); }

.stroke-table .st-total {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  width: 22%;
}

@media (max-width: 380px) {
  .sum-val { font-size: 1.15rem; }
  .sum-lbl { font-size: .6rem; letter-spacing: .04em; }
}

/* --- Splits grid ---------------------------------------------------------- */

/* Reps vary in length, so the grid grows as wide as the longest rep and scrolls
   horizontally rather than crushing the cells on a narrow phone. */
.grid-scroll {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.set-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: auto;
}

.set-grid thead th {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 2px;
}

.set-grid thead th.rep-h {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.set-grid td.rep {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  width: 28px;
}

.set-grid td.split {
  border-radius: 8px;
  background: var(--paper-2);
  padding: 4px 2px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  min-height: 50px;
  min-width: 46px;
}

/* Recorded swim splits carry a faint swim (magenta) wash, tying the grid to the
   swim colour rather than a separate "done" green. */
.set-grid td.split.done {
  background: var(--brand-tint);
}

/* The current length ticks live in the spot its card will land — a dashed swim
   outline marks it as in-progress rather than recorded. */
.set-grid td.split.live-split {
  background: var(--brand-tint);
  border: 1.5px dashed var(--brand);
  color: var(--brand);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .95rem;
}

.cell-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stroke-tag {
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand);
}

.cell-time {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}

.cell-deltas {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.delta {
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 600;
  line-height: 1;
}

.delta-fast { color: var(--ok); }
.delta-slow { color: var(--accent-coral); }
.delta-empty { color: var(--muted); }

.delta-key {
  display: inline-block;
  margin-top: 2px;
}
.delta-key .delta { font-size: .8rem; }

/* --- Rest tracking -------------------------------------------------------- */

/* The big clock doubles as a rest timer between reps/sets; a small sub-line
   keeps the running session total in view while resting. */
.clock-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.clock.resting { color: var(--secondary); }
/* Untimed: deliberately muted so it reads as "this time is not counting". */
.clock.untimed { color: var(--muted); }

.clock-sub {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}

/* Primary button shares one row with New set + Untimed (shown while resting); the
   primary grows to fill, the two side buttons stay at their content width. */
.set-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 10px; }
.set-actions .btn-split { margin-top: 0; flex: 1 1 auto; min-width: 0; padding: 0 12px; }

/* "End rep" while swimming, "New set" while resting — both subordinate to the
   primary Split / Start rep button, so an outline rather than a solid fill. */
.btn-secondary {
  flex: 0 1 auto;
  min-height: 64px;
  padding: 0 14px;
  background: var(--paper-2);
  color: var(--secondary);
  border: 1.5px solid var(--secondary);
  font-size: 1rem;
  white-space: nowrap;
}
.btn-secondary:active { background: var(--line); }

/* Untimed toggle: shares the secondary row, muted while off; once an untimed
   section is running it fills in so it's obvious time is being excluded. */
.btn-untimed {
  flex: 0 1 auto;
  min-height: 64px;
  padding: 0 14px;
  background: var(--paper-2);
  color: var(--muted);
  border: 1.5px solid var(--line);
  font-size: 1rem;
  white-space: nowrap;
}
.btn-untimed:active { background: var(--line); }
.btn-untimed.on {
  background: var(--muted);
  color: var(--white);
  border-color: var(--muted);
}

/* Leading "Rest" column: time taken before each rep (set-rests live in the
   divider row instead). */
.set-grid thead th.rest-h { color: var(--secondary); }

.set-grid td.rest {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  font-weight: 700;
  color: var(--secondary);
  text-align: center;
  width: 42px;
}
.set-grid td.rest.none { color: var(--line); }

/* Each set is its own <tbody class="set-group">: a filled header band on top,
   its reps directly beneath, and a clear gap before the next set — so "Set N"
   reads as the heading OF its reps, nested in the table, not a loose divider. */
.set-group:not(:first-of-type) .set-cell { border-top: 10px solid var(--paper); }

.set-cell {
  padding: 7px 11px 6px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  text-align: left;
}
.set-cell-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.set-cell .set-label {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.set-cell .set-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  font-weight: 700;
}
/* A short left rail on each rep ties the reps visually to their set's band. */
.set-group td.rep { border-left: 2px solid var(--line); }

/* Rest cell stacks the rest time and the rep's swim:rest ratio (rest = purple). */
.set-grid td.rest .rest-time { display: block; }
.set-grid td.rest .rest-ratio {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  color: var(--secondary);
  opacity: .8;
}

.set-grid td.empty-row {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  padding: 18px 4px;
}

/* --- Number tooltips ------------------------------------------------------- */

/* Every number opts in with .has-tip and reveals its meaning on hover/tap in the
   single shared #tip bubble. */
.has-tip { cursor: help; }
.has-tip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.tip {
  position: fixed;
  z-index: 50;
  max-width: 240px;
  padding: 7px 10px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(24, 18, 43, .28);
  pointer-events: none;
}

/* Colour-code legend swatches in the help dialog. */
.legend-swim { color: var(--brand); font-weight: 700; }
.legend-rest { color: var(--secondary); font-weight: 700; }

/* On narrow screens, drop a bit more density into the grid and tighten the
   topbar so the brand + segmented nav stay on one row. */
@media (max-width: 400px) {
  .brand .name { font-size: .98rem; }
  .modes a { padding: 6px 11px; font-size: .85rem; }
}

@media (max-width: 380px) {
  .set-grid { border-spacing: 2px; }
  .set-grid td.split { padding: 3px 1px; }
  .set-grid td.rest { width: 36px; font-size: .76rem; }
  .cell-time { font-size: .85rem; }
  .stroke-tag { font-size: .6rem; padding: 1px 3px; }
  .delta { font-size: .6rem; }
  .stroke-picker .stroke { font-size: .88rem; letter-spacing: 0; }
}

/* === Race (race.html) ===================================================== */

.race-setup { margin-top: 10px; }
.event-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.tool-input {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  min-height: 40px;
  min-width: 0;
}
#custom-dist { width: 76px; }
.target-field { display: inline-flex; align-items: center; gap: 6px; }
.target-field span {
  font-size: .68rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.target-field .tool-input { width: 116px; }
.tool-sel:disabled, .tool-input:disabled { opacity: .55; cursor: default; }

.event-note { margin: 8px 2px 0; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.event-note.bad { color: var(--accent-coral); }

/* Stats: elapsed/final, projected (the hero prediction), distance, then speeds. */
.race-summary .sum-total .sum-val { color: var(--ink); }
.race-summary .sum-proj .sum-val { color: var(--brand); }

/* Speed table: a tidy avg/max grid, rows in swum order (underwater → surface →
   total) so the messy free-floating stats read as one organised block. */
.race-summary .speed-table {
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.race-summary .speed-table thead th {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  padding: 8px 0 5px;
}
.race-summary .speed-table th.spd-phase { text-align: left; }
.race-summary .speed-table tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink-soft);
  text-align: left;
  padding: 6px 0;
}
.race-summary .speed-table tbody td {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: right;
  padding: 6px 0;
}
.race-summary .speed-table tbody tr + tr th,
.race-summary .speed-table tbody tr + tr td { border-top: 1px solid var(--line); }
.race-summary .speed-table .spd-row-uw th,
.race-summary .speed-table .spd-row-uw td { color: var(--uw); }
.race-summary .speed-table .spd-row-total th { color: var(--ink); }
/* A tappable "?" where underwater/surface speed isn't known yet — tap opens a
   dialog explaining what to enter (phone-first; no hover needed). */
.race-summary .speed-table td.needs-uw { color: var(--uw); font-weight: 700; cursor: pointer; text-decoration: underline dotted; }
.race-summary .speed-foot {
  margin: 6px 0 0;
  font-size: .76rem;
  font-weight: 600;
  color: var(--uw);
}
.race-summary .speed-foot.hint-foot { color: var(--muted); font-weight: 500; font-style: italic; }

/* Per-length grid — one clean row per length. */
.race-grid { width: 100%; border-collapse: collapse; margin-top: 4px; }
.race-grid thead th {
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  padding: 0 6px 4px;
}
.race-grid thead th { vertical-align: bottom; }
.race-grid thead th.l-h { text-align: center; }
/* Grouped "Speed" header spanning the UW / Surf / Avg sub-columns (item 4) so the
   word "speed" isn't repeated; a faint underline ties it to its three columns. */
.race-grid thead th.spd-group {
  text-align: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.race-grid thead th.spd-sub { font-size: .6rem; padding-top: 3px; }
.race-grid td {
  padding: 7px 6px;
  border-top: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Derived per-length speeds: underwater & surface in the underwater blue and a
   smaller size (secondary to the length's own average). */
.race-grid td.l-uwspd, .race-grid td.l-surfspd { color: var(--uw); }
.race-grid td.small { font-size: .8rem; }
.race-grid td.l-avgspd { font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); }
.race-grid td.l-num {
  text-align: center;
  width: 38px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--muted);
}
.race-grid td.l-split {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.race-grid td.l-split.est { color: var(--muted); font-style: italic; font-weight: 600; }
.race-grid td.l-cum { color: var(--ink-soft); }
.race-grid td.pending { color: var(--muted); opacity: .55; }
.race-grid tr.current td { background: var(--brand-tint); }
/* The current length ticks live in brand magenta, the running cue. */
.race-grid td.l-split.live-split { color: var(--brand); font-style: normal; }
.race-grid td.l-target .tgt-split { color: var(--muted); }
.race-grid td.l-target .tgt-delta { margin-left: 6px; font-weight: 700; }
.race-grid td.l-dtotal { font-family: var(--font-display); font-weight: 700; }
.race-grid td.missed-note {
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  font-style: italic;
  border-top: 0;
}

/* --- Underwater (Race) ----------------------------------------------------- */

/* UW button sits beside Split; fills in once this length's surfacing is marked. */
.btn-uw {
  flex: 0 1 auto;
  min-height: 64px;
  padding: 0 14px;
  background: var(--uw-tint);
  color: var(--uw);
  border: 1.5px solid var(--uw);
  font-size: 1rem;
  white-space: nowrap;
}
.btn-uw:active { background: #BAE6FD; }
.btn-uw:disabled, .btn-uw.on {
  background: var(--uw);
  color: var(--white);
  border-color: var(--uw);
  opacity: 1;
}

/* Underwater columns in the per-length grid — now always present and editable
   (the 🤿 button just auto-fills the time; the values can always be typed/edited). */
.race-grid td.l-uw, .race-grid td.l-uwd { color: var(--uw); font-weight: 700; }
.race-grid td.l-uw.pending-uw { color: var(--uw); opacity: .55; font-style: italic; }
.race-grid td.l-uwd { width: 64px; }
.uw-dist-input, .uw-time-input {
  width: 52px;
  padding: 4px 6px;
  text-align: right;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .85rem;
  color: var(--uw);
  background: var(--uw-tint);
  border: 1px solid var(--uw);
  border-radius: 7px;
}
.uw-dist-input::-webkit-outer-spin-button,
.uw-dist-input::-webkit-inner-spin-button,
.uw-time-input::-webkit-outer-spin-button,
.uw-time-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A tappable "?" in a per-length speed cell — tap opens a dialog saying exactly
   what to enter to unlock the value. */
.race-grid td.needs-uw { color: var(--uw); font-weight: 700; cursor: pointer; opacity: 1; font-style: normal; text-decoration: underline dotted; }
.race-summary .speed-table td.needs-uw:focus-visible,
.race-grid td.needs-uw:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* The Race page carries a wide table (underwater + speeds + cumulative + target),
   so it gets more room than the 560px timing pages — using the screen rather than
   forcing a horizontal scroll. It still scrolls on a genuinely narrow phone. */
.wrap.race-wrap { max-width: min(94vw, 880px); }

/* Splits-table header strip with a "?" that toggles the abbreviation legend (item 2). */
.table-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}
.table-head-title {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.legend-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.legend-btn:hover { color: var(--brand); border-color: var(--brand-tint); }
.legend-btn[aria-expanded="true"] { background: var(--brand); color: var(--white); border-color: var(--brand); }

.table-legend {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.table-legend > div {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.table-legend > div:first-child { border-top: 0; }
.table-legend dt {
  flex: 0 0 32%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink);
}
.table-legend dd {
  flex: 1;
  margin: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Tighten the per-length grid a touch so it fits the width on more screens. */
@media (min-width: 600px) {
  .race-grid td { padding: 6px 5px; }
  .race-grid thead th { padding: 0 5px 4px; }
  .uw-dist-input, .uw-time-input { width: 46px; }
}

/* === Owner usage dashboard (usage.html) =================================== */

/* Discreet, owner-facing footer link under the brand "Take a look" line. */
.owner-link { margin: 4px 0 0; text-align: center; }
.owner-link a {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.owner-link a:hover { color: var(--brand); }

.usage-page { max-width: 640px; }
.usage-title {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
}
.usage-sub { margin: 0 0 14px; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.usage-card {
  margin-top: 12px;
  padding: 18px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.usage-lead { margin: 0 0 12px; color: var(--ink-soft); font-weight: 600; }
.usage-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.usage-btn {
  flex: 1 1 auto;
  min-height: 52px;
  background: var(--brand);
  color: var(--white);
}
.usage-btn:active { background: var(--brand-deep); }
.usage-btn:disabled { background: var(--paper-2); color: var(--muted); border: 1px solid var(--line); }
.usage-note { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
.usage-note code {
  font-size: .82rem;
  background: var(--line);
  padding: 1px 5px;
  border-radius: 5px;
}

.usage-users { display: flex; gap: 10px; margin-bottom: 14px; }
.usage-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.usage-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.usage-lbl {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.usage-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.usage-table th {
  text-align: right;
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 6px;
}
.usage-table th:first-child { text-align: left; }
.usage-table td { padding: 7px 0; border-top: 1px solid var(--line); text-align: right; }
.usage-table td.usage-ev { text-align: left; font-weight: 600; color: var(--ink); }
.usage-table td.usage-n { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); }
.usage-table td.usage-empty { text-align: center; color: var(--muted); padding: 16px 0; }

.usage-foot { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.usage-link-btn {
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.usage-msg {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: .9rem;
}
.usage-msg.error { background: var(--brand-tint); color: var(--brand-deep); }

/* === History (saved results) ============================================== */
.history-wrap, .history-detail-wrap { max-width: 560px; }
.history-empty { color: var(--ink-soft); margin: 12px 2px; }

.history-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.history-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
}
.history-link {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "mode title" "mode when";
  align-items: center;
  column-gap: 10px;
  text-decoration: none;
  color: inherit;
}
.history-mode {
  grid-area: mode;
  align-self: center;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  white-space: nowrap;
}
.history-mode.mode-race { background: var(--uw-tint, var(--brand-tint)); }
.history-title { grid-area: title; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-when { grid-area: when; color: var(--ink-soft); font-size: .82rem; }
.history-del { flex: 0 0 auto; }

.history-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 4px;
}
.history-detail-meta { display: flex; align-items: center; gap: 10px; }