/* spikefreak + spikefan — components v1. Requires tokens.css.
   Each block notes the current pattern (§4 of the brief) it replaces. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Safety net only (clip, not hidden, so position: sticky keeps working): a stray wide element must never make a phone zoom the page out. The guard in js/devAlign.js still has to pass without it. */
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--sf-page); color: var(--sf-ink);
  font: var(--sf-w-reg) var(--sf-text-md)/var(--sf-lh) var(--sf-font-ui);
}
a { color: var(--sf-link); text-underline-offset: 2px; }
a:hover { color: var(--sf-accent-hover); }
:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
/* Every sprite icon (AppShell.icon and the other builders) carries .sf-icon: a 20px box by default, so an svg never falls back
   to the browser's 300x150. Context rules (.sf-btn svg, .sf-iconbtn svg, .sf-appbar__backlink .sf-icon, ...) are more specific and win. */
.sf-icon { inline-size: 20px; block-size: 20px; flex: none; vertical-align: middle; }
.sf-num { font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; font-weight: var(--sf-w-semi); }

/* ── App shell ──────────────────────────────── replaces the white .container card on a grey page */
.sf-app { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--sf-header-h) 1fr var(--sf-bar-h); }
.sf-main { min-width: 0; padding: var(--sf-4); padding-bottom: calc(var(--sf-bar-h) + var(--sf-4)); max-width: var(--sf-content-max); width: 100%; margin: 0 auto; }
/* The legacy .container card never wraps a page inside the shell, and on a phone the tab panel card drops away too, so a list is
   full-bleed with its own row padding and there is one gutter (.sf-main's), not four. */
.sf-main > .container { width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 599px) {
  .sf-main .ap-panel { padding: 0; min-height: 0; background: none; border-radius: 0; box-shadow: none; }
}
/* Home: no bottom bar, no rail. */
.sf-app--nobar { grid-template-rows: var(--sf-header-h) 1fr; }
.sf-app--nobar .sf-main { padding-bottom: var(--sf-4); }
@media (min-width: 600px) {
  .sf-app { grid-template-columns: var(--sf-rail-w-tablet) minmax(0, 1fr); grid-template-rows: var(--sf-header-h) 1fr; }
  .sf-main { padding: var(--sf-6) var(--sf-8); }
  .sf-app--nobar { grid-template-columns: minmax(0, 1fr); }
}

/* ── Header + team switcher ─────────────────── new; title moves out of centred h1 */
.sf-header {
  position: sticky; top: 0; z-index: 20; height: var(--sf-header-h);
  display: flex; align-items: center; gap: var(--sf-2); padding: 0 var(--sf-2); min-width: 0;
  background: var(--sf-paper); border-bottom: 1px solid var(--sf-line);
}
.sf-header > * { min-width: 0; }
.sf-header > .sf-iconbtn, .sf-header > .sf-header__help { flex: none; }
.sf-team {
  display: flex; align-items: center; gap: var(--sf-2); min-height: var(--sf-tap); padding: 0 var(--sf-3);
  border: 0; background: none; border-radius: var(--sf-r-sm); color: var(--sf-ink);
  font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); min-width: 0;
}
.sf-team__season { color: var(--sf-ink-3); font-weight: var(--sf-w-reg); }
.sf-team:hover { background: var(--sf-sunk); }
.sf-header__spacer { flex: 1 1 0; }
.sf-header #officeTeamBar:not([hidden]) + .sf-header__spacer { display: none; }
/* [team · season pill, the team name ellipsises first] [page actions] [?] */
.sf-header #officeTeamBar { flex: 1 1 0; display: flex; align-items: center; gap: var(--sf-2); }
/* The team · season pill (js/officeTeam.js): one 44px button, the team name ellipsises first, then the season, then the chevron. */
.sf-pill.ot-pill { flex: 0 1 auto; min-width: 0; max-inline-size: 100%; block-size: var(--sf-tap-min); gap: var(--sf-1); cursor: pointer; }
.ot-pill__team { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--sf-w-bold); }
.ot-pill__dot, .ot-pill__season { flex: none; }
.ot-pill .sf-icon { inline-size: 16px; block-size: 16px; color: var(--sf-ink-3); }
.ot-pill:hover { background: var(--sf-sunk); }
.ot-pill:active { background: var(--sf-accent-soft); border-color: var(--sf-accent); }
.ot-pill:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.ot-pill[aria-expanded="true"] .sf-icon { transform: rotate(180deg); }
.ot-pill:disabled { color: var(--sf-ink-3); background: var(--sf-sunk); cursor: not-allowed; }
.sf-pill { display: inline-flex; align-items: center; flex: none; block-size: 36px; padding: 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-pill);
  background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); white-space: nowrap; }

/* ── Icon button (☰, ✎, ←, ✕) ──────────────── */
.sf-iconbtn {
  inline-size: var(--sf-tap); block-size: var(--sf-tap); display: grid; place-items: center; flex: none;
  border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-ink); cursor: pointer;
}
.sf-iconbtn:hover { background: var(--sf-sunk); }
.sf-iconbtn--outline { border: 1.5px solid var(--sf-line-strong); background: var(--sf-paper); }
.sf-iconbtn--sm { inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); }
.sf-iconbtn svg { inline-size: 24px; block-size: 24px; }

/* ── ? help button ──────────────────────────── replaces 26px accent-soft circle (too small) */
.sf-help {
  inline-size: var(--sf-tap); block-size: var(--sf-tap); display: grid; place-items: center; flex: none;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.sf-help::before {
  content: "?"; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--sf-accent); color: var(--sf-accent);
  font: var(--sf-w-bold) 16px/1 var(--sf-font-ui);
}
.sf-help:hover::before { background: var(--sf-accent-soft); }

/* ── Bottom bar (phone) ─────────────────────── new */
.sf-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  height: calc(var(--sf-bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--sf-paper); border-top: 1px solid var(--sf-line);
}
.sf-tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; padding: 0 2px; color: var(--sf-ink-2); text-decoration: none; font: var(--sf-w-semi) 11px/1 var(--sf-font-ui);
}
.sf-tabbar a span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tabbar a svg { inline-size: 24px; block-size: 24px; }
.sf-tabbar a[aria-current="page"] { color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-tabbar a[aria-current="page"]::before { /* indicator bar: not colour-only */
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 3px 3px; background: var(--sf-accent);
}
/* Phone: five tabs, the last is the More menu (js/appShell.js); six clipped the last label. */
.sf-tabbar--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-tabbar .sf-tabbar__more {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: var(--sf-ink-2); font: var(--sf-w-semi) 11px/1 var(--sf-font-ui);
}
.sf-tabbar .sf-tabbar__more svg { inline-size: 24px; block-size: 24px; }
.sf-tabbar .sf-tabbar__more[aria-current="page"] { color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-tabbar .sf-tabbar__more[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 3px 3px; background: var(--sf-accent); }
@media (min-width: 600px) { .sf-tabbar { display: none; } }

/* 4-tab spikefan bar (Home, Races, Courses, Tools), rendered by spikefan's shell.js: four equal tabs, 12px
   label, 22px icon, 3px accent bar across the top of the active tab. */
.sf-tabbar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-tabbar--4 a { font-size: var(--sf-text-xs); }
.sf-tabbar--4 a svg { inline-size: var(--sf-bar-icon); block-size: var(--sf-bar-icon); }
.sf-tabbar--4 a[aria-current="page"]::before { left: 0; right: 0; height: var(--sf-bar-accent); }
/* Room for the fixed bar under a page that scrolls the body. A page that sizes its own scroller marks body
   .sf-bar-own and pads that scroller with --sf-bar-h itself. */
@media (max-width: 599.98px) { .sf-has-bar:not(.sf-bar-own) { padding-bottom: calc(var(--sf-bar-h) + env(safe-area-inset-bottom)); } }

/* Header links (>= 600): the same four destinations as the bar, in the header after the wordmark. Active =
   bold accent ink with an accent underline on the header's bottom edge. */
.sf-hnav { display: none; }
@media (min-width: 600px) {
  .sf-hnav { display: flex; align-self: stretch; align-items: stretch; flex: none; margin-inline-start: var(--sf-2); }
  .sf-hnav a {
    position: relative; display: flex; align-items: center; padding: 0 var(--sf-3); min-inline-size: var(--sf-tap-min);
    color: var(--sf-ink-2); text-decoration: none; font: var(--sf-w-semi) var(--sf-text-nav)/1 var(--sf-font-ui);
  }
  .sf-hnav a:hover { color: var(--sf-ink); background: var(--sf-sunk); }
  .sf-hnav a:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; }
  .sf-hnav a[aria-current="page"] { color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
  .sf-hnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--sf-bar-accent); background: var(--sf-accent); }
}

/* ── Left rail (≥900px) ─────────────────────── replaces Coach's Office 192px rail */
.sf-rail { display: none; }
@media (min-width: 600px) {
  .sf-rail {
    display: flex; flex-direction: column; gap: 2px; grid-row: 1 / -1; position: sticky; top: 0; height: 100dvh;
    padding: var(--sf-3); background: var(--sf-paper); border-right: 1px solid var(--sf-line);
  }
  .sf-rail__brand { height: calc(var(--sf-header-h) - var(--sf-3)); display: flex; align-items: center; padding: 0 var(--sf-3);
    font: var(--sf-w-bold) 22px/1 var(--sf-font-num); letter-spacing: -.01em; color: var(--sf-ink); }
  .sf-rail a, .sf-rail__fold {
    display: flex; align-items: center; gap: var(--sf-3); min-height: var(--sf-tap); padding: 0 var(--sf-3);
    border-radius: var(--sf-r-sm); color: var(--sf-ink-2); text-decoration: none; font-weight: var(--sf-w-semi);
  }
  .sf-rail__fold { inline-size: 100%; margin-block-start: auto; border: 0; background: none; cursor: pointer; font-family: var(--sf-font-ui); }
  .sf-rail a:hover, .sf-rail__fold:hover { background: var(--sf-sunk); color: var(--sf-ink); }
  .sf-rail a[aria-current="page"] { background: var(--sf-accent-soft); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold);
    box-shadow: inset 3px 0 0 var(--sf-accent); }
  .sf-rail__fold:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; }
  .is-collapsed .sf-rail a span, .is-collapsed .sf-rail__fold span { display: none; }
  /* Tablet rail (600-1023, 76px): the "sf" mark, and each item a 56px column (icon 22, gap 4, label 11/1) centred as one group,
     4px between items so a label sits closer to its own icon than to the next one. The 1024 block puts the row layout back. */
  .sf-rail { padding: 0 6px var(--sf-3); gap: var(--sf-1); }
  .sf-rail__brand { justify-content: center; padding: 0; height: var(--sf-header-h); }
  .sf-rail__word { display: none; }
  .sf-rail a, .sf-rail__fold { flex-direction: column; justify-content: center; gap: var(--sf-1); min-height: 56px; padding: 0;
    font: var(--sf-w-semi) 11px/1 var(--sf-font-ui); text-align: center; }
}

/* ── Buttons ────────────────────────────────── replaces .btn blue/grey 40px, text-link "Clear" */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-2);
  min-height: var(--sf-tap); padding: 0 var(--sf-5); border-radius: var(--sf-r-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui);
  transition: background var(--sf-fast), transform var(--sf-fast);
}
.sf-btn:active { transform: scale(.98); }
.sf-btn[hidden] { display: none; }
.sf-btn svg { inline-size: 20px; block-size: 20px; }
.sf-btn--primary   { background: var(--sf-accent); color: var(--sf-on-accent); }
.sf-btn--primary:hover { background: var(--sf-accent-hover); color: var(--sf-on-accent); }
.sf-btn--secondary { background: var(--sf-paper); color: var(--sf-ink); border-color: var(--sf-line-strong); } /* replaces the grey fill */
.sf-btn--secondary:hover { background: var(--sf-sunk); }
.sf-btn--ghost     { background: none; color: var(--sf-link); padding: 0 var(--sf-3); }               /* replaces underlined "Clear" */
.sf-btn--ghost:hover { background: var(--sf-accent-soft); }
.sf-btn--danger    { background: var(--sf-stop); color: var(--sf-white); }
.sf-btn--danger:hover { background: var(--sf-stop-hover); color: var(--sf-white); }
.sf-btn--danger-text { background: none; color: var(--sf-stop-ink); }
.sf-btn--danger-text:hover { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }
.sf-btn--go        { background: var(--sf-go); color: var(--sf-white); }
.sf-btn--block { display: flex; width: 100%; }
.sf-btn--sm { min-height: var(--sf-tap-min); padding: 0 var(--sf-4); }
.sf-btn--lg { min-height: var(--sf-tap-lg); font-size: var(--sf-text-lg); border-radius: var(--sf-r-md); }
.sf-btn[disabled] { opacity: 1; background: var(--sf-sunk); color: var(--sf-ink-3); border-color: var(--sf-line); cursor: not-allowed; }
.sf-btn.is-busy { pointer-events: none; }
.sf-btn.is-busy::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: sf-spin .7s linear infinite; }

/* Big action tile (Today: Time a race / Run a workout) */
.sf-action {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sf-3);
  min-height: 112px; padding: var(--sf-4); border-radius: var(--sf-r-lg); border: 0; text-align: left; cursor: pointer;
  background: var(--sf-accent); color: var(--sf-on-accent); font: var(--sf-w-bold) var(--sf-text-xl)/1.1 var(--sf-font-num);
}
.sf-action svg { inline-size: 32px; block-size: 32px; }
.sf-action--alt { background: var(--sf-paper); color: var(--sf-ink); border: 1.5px solid var(--sf-line-strong); }

/* Timer buttons ─────────────────────────────── replaces green Start / red Stop, blue runner grid */
.sf-timerbtn {
  width: 100%; min-height: var(--sf-tap-xl); border: 0; border-radius: var(--sf-r-lg); cursor: pointer;
  font: var(--sf-w-bold) 28px/1 var(--sf-font-num); letter-spacing: .02em; text-transform: uppercase; color: var(--sf-white);
  display: flex; align-items: center; justify-content: center; gap: var(--sf-3);
}
.sf-timerbtn--start { background: var(--sf-go); }
.sf-timerbtn--stop  { background: var(--sf-stop); }
.sf-timerbtn::before { content: ""; width: 22px; height: 22px; background: currentColor; } /* shape cue: ■ stop */
.sf-timerbtn--start::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }                 /* ▶ start */

.sf-runnergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--sf-2); }
.sf-runnerbtn {
  min-height: var(--sf-tap-xl); padding: var(--sf-2) var(--sf-3); border-radius: var(--sf-r-md); cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; text-align: left;
  background: var(--sf-paper); color: var(--sf-ink); border: 2px solid var(--sf-ink);
}
.sf-runnerbtn__name { font: var(--sf-w-bold) 20px/1.1 var(--sf-font-ui); grid-column: 1 / -1; }
.sf-runnerbtn__lap  { font: var(--sf-w-semi) 15px/1 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-runnerbtn__last { font: var(--sf-w-bold) 22px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-runnerbtn.is-flash { background: var(--sf-ink); color: var(--sf-paper); }            /* 400ms confirm on tap */
.sf-runnerbtn.is-done  { border-style: dashed; color: var(--sf-ink-3); }
.sf-clock { font: var(--sf-w-bold) var(--sf-num-clock)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: center; }

/* ── Chips ──────────────────────────────────── replaces 17px pill; pressed = soft fill + ✓ */
.sf-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sf-4);
  border-radius: var(--sf-r-pill); border: 1.5px solid var(--sf-line-strong); background: var(--sf-paper);
  color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer;
  position: relative; min-width: 0; max-inline-size: 100%;
}
.sf-chip::after { content: ""; position: absolute; inset: -4px 0; } /* 48px hit area */
.sf-chip[aria-pressed="true"] { background: var(--sf-accent-soft); border-color: var(--sf-accent); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-chip[aria-pressed="true"]::before { content: "✓"; }
.sf-chips { display: flex; gap: var(--sf-2); overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; }
.sf-chips > .sf-chip { flex: none; }
.sf-chips--wrap { flex-wrap: wrap; overflow: visible; }
.sf-chip--sm { min-height: 36px; }
/* Team chip: ★ Falls Church XC ▾. 36 tall pill with a 44 target; states: default, hover, pressed, focus. The name truncates, the star and chevron never. */
.sf-teamchip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; max-inline-size: 100%; block-size: 36px; padding: 0 var(--sf-2) 0 10px;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink); cursor: pointer; white-space: nowrap; overflow: hidden;
  font: var(--sf-w-semi) 14px/1 var(--sf-font-ui); touch-action: manipulation;
}
.sf-teamchip::after { content: ""; position: absolute; inset: -4px 0; } /* 44 target */
.sf-teamchip:hover { background: var(--sf-sunk); }
.sf-teamchip:active { background: var(--sf-line); }
.sf-teamchip:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-teamchip svg { flex: none; }
.sf-teamchip__star { inline-size: 15px; block-size: 15px; color: var(--sf-accent); }
.sf-teamchip__chev { inline-size: 16px; block-size: 16px; color: var(--sf-ink-2); }
.sf-teamchip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Switch ─────────────────────────────────── a real <button role="switch" aria-checked>: the word (On / Off / a status word) then a 52 x 32 track; the word carries the state, never colour alone */
.sf-switch {
  display: inline-flex; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-tap); padding: 0 var(--sf-1); flex: none;
  border: 0; border-radius: var(--sf-r-pill); background: none; color: var(--sf-ink-2); cursor: pointer;
  font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-ui);
}
.sf-switch[aria-checked="true"] { color: var(--sf-go-ink); }
.sf-switch__word { order: -1; min-inline-size: calc(var(--sf-tap) * .6); text-align: end; }
.sf-switch__track {
  position: relative; inline-size: calc(var(--sf-tap) + var(--sf-1)); block-size: var(--sf-8); flex: none;
  border-radius: var(--sf-r-pill); background: var(--sf-line-strong); transition: background var(--sf-fast);
}
.sf-switch__thumb {
  position: absolute; inset-block: var(--sf-ring); inset-inline-start: var(--sf-ring); inline-size: calc(var(--sf-8) - var(--sf-ring) * 2); border-radius: 50%;
  display: grid; place-items: center; background: var(--sf-paper); color: var(--sf-ink-2); box-shadow: var(--sf-shadow-1);
  font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); transition: inset-inline-start var(--sf-fast);
}
.sf-switch[aria-checked="true"] .sf-switch__track { background: var(--sf-accent); }
.sf-switch[aria-checked="true"] .sf-switch__thumb { inset-inline-start: calc(100% - var(--sf-8) + var(--sf-ring)); }
.sf-switch:hover:not(:disabled) .sf-switch__track { background: var(--sf-ink-2); }
.sf-switch[aria-checked="true"]:hover:not(:disabled) .sf-switch__track { background: var(--sf-accent-hover); }
.sf-switch:active:not(:disabled) .sf-switch__track { background: var(--sf-ink-3); }
.sf-switch[aria-checked="true"]:active:not(:disabled) .sf-switch__track { background: var(--sf-accent-press); }
.sf-switch:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-switch:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-switch:disabled .sf-switch__track { background: var(--sf-line); }
.sf-switch:disabled .sf-switch__thumb { box-shadow: none; }
.sf-switch.is-busy { cursor: progress; }
.sf-switch.is-busy .sf-switch__thumb::before { content: ""; inline-size: calc(var(--sf-8) * .5); block-size: calc(var(--sf-8) * .5); border-radius: 50%; border: 2px solid var(--sf-accent); border-right-color: transparent; animation: sf-spin .7s linear infinite; }
.sf-switch.is-error .sf-switch__track { background: var(--sf-stop); }
.sf-switch.is-error .sf-switch__thumb { color: var(--sf-stop-ink); }
.sf-switch.is-error .sf-switch__thumb::before { content: "!"; }
.sf-switch.is-error .sf-switch__word::after { content: " \00b7 weather unavailable"; font-weight: var(--sf-w-reg); color: var(--sf-stop-ink); }
/* ── Mic button — dictation on, off, disabled; listening also says "Listening" in words beside it */
.sf-micbtn { display: inline-grid; place-items: center; inline-size: var(--sf-tap-lg); block-size: var(--sf-tap-lg); flex: none; padding: 0; border: 0; border-radius: 50%;
  background: var(--sf-accent); color: var(--sf-on-accent); cursor: pointer; }
.sf-micbtn svg { inline-size: 28px; block-size: 28px; }
.sf-micbtn:hover { background: var(--sf-accent-hover); }
.sf-micbtn:active { background: var(--sf-accent-hover); box-shadow: 0 0 0 var(--sf-1) var(--sf-accent-soft); }
.sf-micbtn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-micbtn[aria-pressed="true"] { background: var(--sf-stop); box-shadow: 0 0 0 var(--sf-2) var(--sf-stop-soft); }
.sf-micbtn:disabled { background: var(--sf-sunk); color: var(--sf-ink-3); box-shadow: none; cursor: not-allowed; }

/* Status chip — non-interactive, always icon + word */
.sf-status {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--sf-r-pill);
  font: var(--sf-w-bold) 13px/1 var(--sf-font-ui); white-space: nowrap; min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis;
  background: var(--sf-sunk); color: var(--sf-ink-2);
}
.sf-status svg { inline-size: 14px; block-size: 14px; }
.sf-status--healthy { background: var(--st-healthy-soft); color: var(--st-healthy); }
.sf-status--limited { background: var(--st-limited-soft); color: var(--st-limited); }
.sf-status--injured { background: var(--st-injured-soft); color: var(--st-injured); }
.sf-status--sick    { background: var(--st-sick-soft);    color: var(--st-sick); }
.sf-status--out     { background: var(--st-out-soft);     color: var(--st-out); }
.sf-status--ready   { background: var(--sf-go-soft);   color: var(--sf-go-ink); }
.sf-status--todo    { background: var(--sf-warn-soft); color: var(--sf-warn-ink); }
.sf-status--live    { background: var(--sf-live); color: var(--sf-white); }
.sf-status--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: sf-pulse 1.4s infinite; }
.sf-status--final   { background: var(--sf-final-soft); color: var(--sf-final); }
.sf-status--hollow  { background: none; box-shadow: inset 0 0 0 1.5px currentColor; } /* condition tags */
.sf-status--new     { background: var(--sf-accent-soft); color: var(--sf-accent-ink); } /* "New school": something a save will make */
.sf-status--error   { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }    /* "Failed": a write that did not land */
.sf-status--unplotted { background: var(--sf-sunk); color: var(--sf-ink-2); }  /* map-pin-off + "Not plotted": a course with a point and no trace */

/* The facts of a course with a point and no trace (gate D5): label above value, read only. Not a control, so it has no hover, press, focus or disabled state. */
.sf-facts { display: grid; gap: var(--sf-3); margin: 0; }
.sf-facts__row { display: grid; gap: var(--sf-1); min-inline-size: 0; }
.sf-facts dt { font-size: var(--sf-text-sm); font-weight: var(--sf-w-semi); color: var(--sf-ink-2); }
.sf-facts dd { margin: 0; color: var(--sf-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sf-facts__row.is-loading dd { display: flex; align-items: center; min-block-size: var(--sf-4); }

/* The course page of a venue with a point and no plot (unplottedPage.js): one column on a phone; from 900px the facts sit left and a map with the pin right.
   .sf-facts--page is the page's look of .sf-facts: the label is an eyebrow above the value, and two rows can share a line (--half). Read only. */
.sf-facts--page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-4); }
.sf-facts--page .sf-facts__row { grid-column: 1 / -1; }
.sf-facts--page .sf-facts__row--half { grid-column: auto; }
.sf-facts--page dt { font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-facts--page dd { font: var(--sf-w-semi) var(--sf-text-md)/var(--sf-lh-tight) var(--sf-font-ui); min-block-size: calc(var(--sf-5) + var(--sf-1)); }
.sf-venuepage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-4); align-items: start; }
.sf-venuepage__main { display: grid; gap: var(--sf-4); min-inline-size: 0; }
.sf-venuepage__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); }
.sf-venuepage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); } /* Directions is 44, the one primary 48 (handoff row contract) */
.sf-venuepage__map { display: none; position: relative; min-block-size: 340px; border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); overflow: hidden; background: var(--sf-sunk); }
.sf-venuepage__map .sf-map, .sf-venuepage__map .cm-host { min-block-size: 340px; }
.sf-venuepin { color: var(--sf-accent); background: none; border: 0; }
.sf-venuepin svg { inline-size: 34px; block-size: 34px; fill: var(--sf-accent); stroke: var(--sf-paper); }
@media (min-width: 900px) {
  .sf-venuepage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-5); }
  .sf-venuepage__map { display: block; }
}
.sf-courselink { display: grid; gap: var(--sf-1); min-inline-size: 0; }
.sf-courselink__label { font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-courselink__line { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap-min); min-inline-size: 0; }
.sf-courselink__text { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-md)/var(--sf-lh-tight) var(--sf-font-ui); color: var(--sf-link); text-decoration: none; }
a.sf-courselink__text:hover { text-decoration: underline; }
a.sf-courselink__text:active { color: var(--sf-accent-press); }
a.sf-courselink__text:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; border-radius: var(--sf-r-sm); }
.sf-courselink__text--none { color: var(--sf-ink-2); }
.sf-courselink .sf-iconbtn svg { inline-size: 20px; block-size: 20px; }

/* ── Segmented control (Upcoming / Past) ────── new */
.sf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--sf-r-sm); background: var(--sf-sunk); }
.sf-seg button { min-inline-size: min-content; white-space: nowrap; min-height: var(--sf-tap-min); border: 0; border-radius: 5px; background: none; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer; }
.sf-seg button[aria-selected="true"], .sf-seg button[aria-pressed="true"] { background: var(--sf-paper); color: var(--sf-ink); font-weight: var(--sf-w-bold); box-shadow: var(--sf-shadow-1), 0 0 0 1px var(--sf-line); }
.sf-seg button:hover:not([aria-selected="true"]):not([aria-pressed="true"]):not(:disabled) { background: var(--sf-line); color: var(--sf-ink); }
.sf-seg button:active:not(:disabled) { background: var(--sf-line); }
.sf-seg button:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-seg button:disabled { color: var(--sf-ink-3); cursor: not-allowed; }

/* Bar segmented choice (the track program's Fri | Sat and All events / Our school / Following): full width, 42 buttons + 3 pad = 48 (ROW-CONTRACTS).
   The picked button carries aria-pressed. States are .sf-seg's. */
.sf-seg--bar { inline-size: 100%; box-sizing: border-box; }
.sf-seg--bar button { min-block-size: calc(var(--sf-tap) - 6px); padding: 0 var(--sf-2); font-size: var(--sf-text-md); font-variant-numeric: tabular-nums; }

/* Field-height segmented choice (a setting with two or three sides): 48 tall, full width on a phone, auto width from 600. States are .sf-seg's. */
.sf-seg--field { display: grid; inline-size: 100%; }
.sf-seg--field button { min-block-size: var(--sf-tap); padding: 0 var(--sf-3); line-height: 1.15; }
@media (min-width: 600px) { .sf-seg--field { display: inline-grid; inline-size: auto; } .sf-seg--field button { padding: 0 var(--sf-4); } }
/* Large segmented choice (venue Setting): 48 tall, 16 type, two sides at most a comfortable width. States are .sf-seg's. */
.sf-seg--lg { display: inline-grid; inline-size: 100%; max-inline-size: calc(var(--sf-tap) * 7); }
.sf-seg--lg button { min-block-size: var(--sf-tap); padding: 0 var(--sf-2); font-size: var(--sf-text-sm); } /* 14, one line: four labels fit a 360 phone (FILTER-RULES.md) */

/* Small segmented toggle (chart headers): 28px visual, 44px hit area via the button's ::after. */
.sf-seg--sm { display: inline-grid; padding: 2px; }
.sf-seg--sm button { position: relative; min-height: 24px; min-inline-size: 44px; padding: 0 var(--sf-3); border-radius: 4px; font-size: var(--sf-text-sm); cursor: pointer; }
.sf-seg--sm button::after { content: ""; position: absolute; inset: -10px 0; }
.sf-seg--sm button:hover:not([aria-selected="true"]):not(:disabled) { background: var(--sf-line); color: var(--sf-ink); }
.sf-seg--sm button:active:not(:disabled) { background: var(--sf-line); }
.sf-seg--sm button:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-seg--sm button:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-seg--sm[aria-busy="true"] button { cursor: progress; }
.sf-seg--sm[aria-busy="true"] button[aria-selected="true"]::before { content: ""; inline-size: 10px; block-size: 10px; margin-inline-end: 6px; display: inline-block; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sf-spin .7s linear infinite; }
.sf-seg--sm.is-error { box-shadow: 0 0 0 1.5px var(--sf-stop); }

/* ── Page tabs (Entries · Lineups · Results · Course Intel) ── new */
.sf-tabs { display: flex; gap: var(--sf-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--sf-line); }
.sf-tabs a { position: relative; flex: none; display: flex; align-items: center; min-height: var(--sf-tap); padding: 0 var(--sf-3);
  color: var(--sf-ink-2); text-decoration: none; font-weight: var(--sf-w-semi); }
.sf-tabs a[aria-selected="true"] { color: var(--sf-ink); font-weight: var(--sf-w-bold); }
.sf-tabs a[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sf-3); right: var(--sf-3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--sf-accent); }

/* ── Cards ──────────────────────────────────── replaces .container card + home grid cards */
.sf-card { background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); box-shadow: var(--sf-shadow-1); }
.sf-card__head { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); }
.sf-card__title { flex: 1; margin: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-card__body { padding: var(--sf-4); }
.sf-eyebrow { font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-3); }

.sf-stat { display: flex; flex-direction: column; gap: 2px; }
.sf-stat__v { font: var(--sf-w-bold) var(--sf-text-3xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-stat__k { font-size: var(--sf-text-sm); color: var(--sf-ink-3); font-weight: var(--sf-w-semi); }

/* ── List rows ──────────────────────────────── replaces modal list rows (title / subline / blue value / chevron) */
.sf-list { list-style: none; margin: 0; padding: 0; }
.sf-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--sf-3);
  min-height: 60px; padding: var(--sf-2) var(--sf-4); color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--sf-line-soft);
}
.sf-row:last-child { border-bottom: 0; }
a.sf-row:hover, button.sf-row:hover, div.sf-row[role="button"]:hover { background: var(--sf-page); }
.sf-row[aria-current="true"] { background: var(--sf-accent-soft); }
.sf-row__title { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-row__sub { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-row__value { font: var(--sf-w-bold) var(--sf-text-lg)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); } /* was blue; ink reads better in sun */
.sf-row__chev { color: var(--sf-ink-3); }
.sf-row__chip { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sf-1); min-width: 0; }
.sf-row__chip:empty { display: none; }
.sf-row > .sf-icon:last-child { color: var(--sf-ink-3); }
.sf-list__head { margin: 0; padding: var(--sf-3) var(--sf-4) var(--sf-1); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-datebox { width: 48px; text-align: center; line-height: 1; }
.sf-datebox b { display: block; font: var(--sf-w-bold) 24px/1 var(--sf-font-num); }
.sf-datebox small { font: var(--sf-w-bold) 11px/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-3); }

/* ── Tables ─────────────────────────────────── replaces the every-cell borders */
.sf-table-wrap { overflow-x: auto; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); }
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--sf-text-sm); }
.sf-table th { position: sticky; top: 0; background: var(--sf-sunk); text-align: left; padding: 10px 12px;
  font: var(--sf-w-bold) 12px/1.2 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--sf-ink-2); white-space: nowrap; }
.sf-table td { padding: 10px 12px; border-top: 1px solid var(--sf-line-soft); vertical-align: middle; }
.sf-table td.n, .sf-table th.n { text-align: right; font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: var(--sf-w-semi); }
.sf-table tbody tr:hover { background: var(--sf-page); }
.sf-table tr[aria-selected="true"] { background: var(--sf-accent-soft); }
.sf-table th:first-child, .sf-table td:first-child { position: sticky; left: 0; background: inherit; } /* freeze name column */
.sf-table th:first-child { background: var(--sf-sunk); box-shadow: 1px 0 0 var(--sf-line); }
.sf-table--dense td { padding: 6px 10px; }  /* admin / desktop only */
/* Phone: < 600px tables with > 4 cols collapse into stacked rows */
@media (max-width: 599px) {
  .sf-table--stack thead { display: none; }
  .sf-table--stack tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sf-3); padding: var(--sf-3) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
  .sf-table--stack td { border: 0; padding: 0; }
  .sf-table--stack td[data-label]::before { content: attr(data-label) " "; color: var(--sf-ink-3); font: var(--sf-w-semi) 12px var(--sf-font-ui); }
}
@media print {
  .sf-header, .sf-tabbar, .sf-rail, .sf-help { display: none !important; }
  .sf-table th { position: static; background: none; border-bottom: 2px solid var(--sf-black); }
  .sf-table td { border-top: 1px solid var(--sf-line-strong); }
  body { background: var(--sf-white); }
}

/* ── Modal / bottom sheet ───────────────────── ONE shell for every dialog: js/appShell.js modal() and js/trackerSettings.js TrackerModal.open().
   Phone (< 600): bottom sheet over the tab bar (backdrop z = --sf-z-sheet, above --sf-z-bar), grab handle, safe-area padding, no top block.
   >= 600: centred. Foot is pinned: phone = one full-width primary with link actions under it; >= 600 = links then the primary, right-aligned.
   States: default, hover/pressed/focus/disabled on the buttons (.sf-btn), loading (primary .is-busy), dragging (swipe down), error (body content). */
.sf-modal-backdrop { position: fixed; inset: 0; z-index: var(--sf-z-sheet); background: var(--sf-overlay); display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; overscroll-behavior: contain; }
.sf-modal {
  position: relative; width: 100%; max-height: var(--sf-sheet-max); display: flex; flex-direction: column; overflow: hidden;
  background: var(--sf-paper); border-radius: var(--sf-r-lg) var(--sf-r-lg) 0 0; box-shadow: var(--sf-shadow-3);
  padding-bottom: env(safe-area-inset-bottom); outline: 0; transition: transform var(--sf-med) ease-out;
}
.sf-modal.is-dragging { transition: none; }
.sf-modal--full { height: var(--sf-sheet-full); max-height: var(--sf-sheet-full); }
.sf-modal__handle { flex: none; inline-size: var(--sf-grab-w); block-size: var(--sf-grab-h); margin: var(--sf-2) auto 0; border-radius: var(--sf-r-pill); background: var(--sf-line-strong); touch-action: none; }
.sf-modal__head { flex: none; display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-1) var(--sf-2) var(--sf-1) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); touch-action: none; }
.sf-modal__head--act { padding-inline-end: var(--sf-3); }
.sf-modal__headact { flex: none; min-block-size: var(--sf-tap-min); }
.sf-modal__headacts { flex: none; display: flex; align-items: center; gap: var(--sf-2); } /* Edit meet / New meet: Discard and Save in the head (frames 1r, 1s) */
.sf-modal__head--act .sf-modal__title { min-width: 0; }
.sf-modal__title { flex: 1; margin: 0; font: var(--sf-w-bold) var(--sf-text-xl)/1.2 var(--sf-font-ui); }
.sf-modal__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: var(--sf-4); }
.sf-modal__foot:empty { display: none; }
.sf-modal__foot { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
/* Primary answers are full-width buttons on top; every other action is a link under them (Cancel is the ✕, a swipe or a backdrop tap). */
.sf-modal__foot .sf-btn--primary, .sf-modal__foot .sf-btn--danger, .sf-modal__foot .sf-btn--go { inline-size: 100%; min-block-size: var(--sf-field-h); }
.sf-modal--filter .sf-modal__foot .sf-btn--primary { min-block-size: var(--sf-tap); } /* the Filter dialog's one primary is 48, like every control in it (FILTER-RULES.md) */
.sf-modal__foot .sf-btn--secondary, .sf-modal__foot .sf-btn--ghost { order: 1; align-self: center; min-block-size: var(--sf-tap-min); border-color: transparent; background: none; color: var(--sf-link); }
.sf-modal__foot .sf-btn--secondary:hover, .sf-modal__foot .sf-btn--ghost:hover { background: var(--sf-sunk); }
.sf-modal__foot .sf-btn--secondary:active, .sf-modal__foot .sf-btn--ghost:active { background: var(--sf-line); }
/* stacked: a question with a few answers: one full-width button per line, in the order given. */
.sf-modal__foot--stacked .sf-btn { order: 0; align-self: stretch; inline-size: 100%; min-block-size: var(--sf-field-h); }
.sf-modal__foot--stacked .sf-btn--secondary { border-color: var(--sf-line-strong); background: var(--sf-paper); color: var(--sf-ink); }
.sf-modal__foot--stacked .sf-btn--ghost { color: var(--sf-link); }
/* busy(): a spinner card nobody can dismiss, on the same backdrop. */
.sf-modal-backdrop--busy { place-items: center; }
.sf-modal--busy { inline-size: auto; min-inline-size: calc(var(--sf-tap-xl) * 2); max-inline-size: 92vw; border-radius: var(--sf-r-md); padding-bottom: 0; }
.sf-modal--busy .sf-loading { padding: var(--sf-6) var(--sf-8); }
/* A full-screen dialog (the course map): sized to the visible screen by TrackerModal (visualViewport), no sheet, no radius. */
.sf-modal-backdrop--screen { display: block; inset-inline-end: auto; inset-block-end: auto; inline-size: 100%; block-size: 100%; }
.sf-modal-backdrop--screen .sf-modal { inline-size: 100%; block-size: 100%; max-height: none; border-radius: 0; box-shadow: none; padding: var(--sf-2) var(--sf-3) calc(var(--sf-2) + env(safe-area-inset-bottom)); }
.sf-modal-backdrop--screen .sf-modal__handle { display: none; }
.sf-modal-backdrop--screen .sf-modal__body { display: flex; flex-direction: column; padding: 0; }
.sf-modal-backdrop--screen .sf-modal__foot { padding: var(--sf-2) 0 0; border-top: 0; }
@media (min-width: 600px) {
  .sf-modal-backdrop { place-items: center; }
  .sf-modal { width: min(560px, 92vw); max-height: var(--sf-sheet-max); border-radius: var(--sf-r-lg); }
  .sf-modal--wide { width: min(760px, 92vw); }
  .sf-modal--filter, .sf-modal--addvenue { width: min(520px, 92vw); }
  .sf-modal--full { height: auto; max-height: var(--sf-sheet-max); }
  .sf-modal__handle { display: none; }
  .sf-modal__head { padding-block: var(--sf-2); }
  .sf-modal__foot { flex-direction: row; justify-content: flex-end; align-items: center; }
  .sf-modal__foot .sf-btn--primary, .sf-modal__foot .sf-btn--danger, .sf-modal__foot .sf-btn--go { order: 2; inline-size: auto; min-block-size: var(--sf-tap); }
  .sf-modal__foot .sf-btn--secondary, .sf-modal__foot .sf-btn--ghost { order: 1; align-self: auto; }
  .sf-modal__foot .sf-modal__left { margin-inline-end: auto; }
  .sf-modal__foot--stacked { flex-direction: column; align-items: stretch; }
  .sf-modal__foot--stacked .sf-btn { min-block-size: var(--sf-tap); }
  .sf-modal-backdrop--screen .sf-modal { padding: var(--sf-2) var(--sf-3); }
}
@media (min-width: 1024px) { .sf-modal--addvenue { width: min(560px, 92vw); } }
.sf-modal, .sf-modal__body, .sf-modal__head { min-width: 0; }
/* Foot variants for a question with 48px answers (claiming results): tap = the stacked foot at the meet height; split = Not mine beside the one primary. */
.sf-modal__foot--stacked.sf-modal__foot--tap .sf-btn { min-block-size: var(--sf-tap); }
.sf-modal__foot--split { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.sf-modal__foot--split .sf-btn { order: 0; align-self: stretch; min-block-size: var(--sf-tap); }
.sf-modal__foot--split .sf-btn--primary { inline-size: auto; }
.sf-modal__foot--split .sf-btn--secondary { border-color: var(--sf-line-strong); background: var(--sf-paper); color: var(--sf-ink); }
.sf-modal__foot--split .sf-btn--secondary:hover { background: var(--sf-sunk); }
.sf-modal__foot--split .sf-btn--secondary:disabled { background: var(--sf-sunk); color: var(--sf-ink-3); border-color: var(--sf-line); }
.sf-modal__foot--split > [data-act="skip-older"] { grid-column: 1 / -1; }
.sf-modal__body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .sf-modal { transition: none; } }

/* Date field calendar as an anchored popover (PC, from 1024px): sits under the button that opened it. */
@media (min-width: 1024px) {
  .sf-datefield__sheet.sf-datefield__sheet--pop { background: none; display: block; }
  .sf-datefield__sheet--pop .sf-modal { position: absolute; inline-size: 320px; max-height: none; box-shadow: var(--sf-shadow-3); border: 1px solid var(--sf-line); }
}

.sf-modal__headtext { flex: 1; min-width: 0; }
.sf-modal__headtext .sf-modal__title { overflow-wrap: anywhere; }
.sf-modal__sub { margin: 2px 0 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-modal__body--flush { padding: 0; }
.sf-modal__text { margin: 0 0 var(--sf-3); color: var(--sf-ink); font-size: var(--sf-text-md); line-height: 1.4; overflow-wrap: anywhere; }
.sf-modal__text:last-child { margin-block-end: 0; }
.sf-modal__hint { margin: var(--sf-3) 0 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.4; overflow-wrap: anywhere; }
.sf-modal__hint:empty { display: none; }
.sf-modal__body > .sf-note, .sf-modal__body > .sf-field { margin-block-end: var(--sf-3); }
.sf-modal__body > .sf-note:last-child, .sf-modal__body > .sf-field:last-child { margin-block-end: 0; }
.sf-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-3); min-width: 0; }
.sf-seg--field button { min-block-size: var(--sf-tap); font-size: var(--sf-text-md); }
.sf-modal__section { padding: var(--sf-3) var(--sf-4); }
.sf-modal__section + .sf-modal__section { border-top: 1px solid var(--sf-line-soft); }
.sf-modal__label { margin: 0 0 var(--sf-2); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-3); }

/* ── Page head: title, scope link, ⋯ ─────────── list pages (Runners, Meets, Team & Staff, Courses, Workouts) */
/* Title block left, actions right. One control height (--ph-ctl: 48 on a phone, 44 from 600px) so the title line, the buttons and ⋯ share one centre;
   --ph-above is whatever sits over the title (the back link), and the actions start below it. */
.sf-pagehead { --ph-ctl: var(--sf-tap); --ph-above: 0px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--sf-3); margin: 0 0 var(--sf-3); min-width: 0; }
.sf-pagehead--back { --ph-above: var(--sf-tap-min); }
@media (min-width: 600px) { .sf-pagehead { --ph-ctl: var(--sf-tap-min); } }
.sf-pagehead[hidden] { display: none; }
.sf-pagehead__main { min-width: 0; }
.sf-pagehead__main > h1, .sf-pagehead__title { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--ph-ctl); margin: 0; font: var(--sf-w-bold) var(--sf-text-2xl)/var(--sf-lh-tight) var(--sf-font-ui); text-align: left; overflow-wrap: anywhere; }
.sf-pagehead__back { display: inline-flex; align-items: center; gap: var(--sf-1); min-block-size: var(--sf-tap-min); color: var(--sf-accent); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-ui); text-decoration: none; }
.sf-pagehead__back[hidden] { display: none; }
.sf-pagehead__back svg { inline-size: 18px; block-size: 18px; flex: none; }
.sf-pagehead__sub { margin-top: var(--sf-1); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sf-3); min-width: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-pagehead__actions { display: flex; align-items: center; gap: var(--sf-2); margin-block-start: var(--ph-above); }
.sf-pagehead__actions .sf-iconbtn, .sf-pagehead__actions .sf-btn { block-size: var(--ph-ctl); min-block-size: var(--ph-ctl); }
.sf-pagehead__actions .sf-iconbtn { inline-size: var(--ph-ctl); }
/* The primary head button (Add runner): label and icon from 600px, icon alone on a phone. */
.sf-pagehead__add { padding: 0 var(--sf-4); }
@media (max-width: 599.98px) {
  .sf-pagehead__add { inline-size: var(--ph-ctl); padding: 0; }
  .sf-pagehead__add span { display: none; }
}
/* Rare/admin actions: on a phone only the ⋯ shows; from 600px the 1-2 secondary buttons come back beside it. */
.sf-only-wide { display: none !important; }
@media (min-width: 600px) {
  .sf-only-wide { display: inline-flex !important; }
  .sf-only-phone { display: none !important; }
}
.sf-linkbtn { display: inline-flex; align-items: center; gap: var(--sf-1); max-inline-size: 100%; min-block-size: var(--sf-tap-min); padding: 0; border: 0; background: none;
  color: var(--sf-link); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: left; cursor: pointer; }
.sf-linkbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-linkbtn svg { inline-size: 18px; block-size: 18px; flex: none; }

/* ── Inputs and selects ──────────────────────── controls that share a row share a height (44 or 48) */
.sf-input { inline-size: 100%; min-width: 0; min-block-size: var(--sf-tap); padding: 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm);
  background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-input:focus { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-input--sm { min-block-size: var(--sf-tap-min); }
/* Time box with a mask (tools/clockMask.js): the real <input> holds the masked text in transparent ink, the ghost over it draws the typed characters in ink and the untyped ones muted.
   Same classes on both, so the text lands exactly where the input's own text would. States: empty (mask muted), typing, focus (the input's own ring), invalid (the input's own border), disabled n/a. */
.sf-maskfield { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-mask { position: relative; display: block; min-width: 0; }
.sf-mask__input { color: transparent; caret-color: var(--sf-ink); }
.sf-mask__input::selection { background: var(--sf-accent-soft); }
.sf-mask__ghost { position: absolute; inset: 0; box-sizing: border-box; display: flex; align-items: center; padding: 0 var(--sf-3); border: 1.5px solid transparent; font: var(--sf-w-reg) var(--sf-text-md)/1.2 var(--sf-font-ui); color: var(--sf-ink-3); white-space: pre; overflow: hidden; pointer-events: none; user-select: none; } /* the box of .sf-input, drawn transparent; a sizing class on it (calc-clock, tk-clockin) restyles the text like the input's */
.sf-mask__ghost .is-typed { color: var(--sf-ink); }
.sf-mask__hint { color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-select { display: inline-flex; align-items: center; gap: var(--sf-2); min-width: 0; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink-2);
  font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-select select { min-width: 0; min-block-size: var(--sf-tap-min); padding: 0; border: 0; background: none; color: var(--sf-ink); font: inherit; cursor: pointer; }
.sf-toolbar { display: flex; align-items: center; gap: var(--sf-3); min-width: 0; }
.sf-toolbar > .sf-input { flex: 1 1 0; }
.sf-badge[hidden] { display: none; }
.sf-badge { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding: 0 6px; border-radius: var(--sf-r-pill);
  background: var(--sf-accent); color: var(--sf-on-accent); font: var(--sf-w-bold) 12px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-btn .sf-badge { margin-inline-start: var(--sf-1); }

/* ── Sheet rows (⋯ menus, pickers) ───────────── 56px, icon + label + one-line hint; destructive = red text */
.sf-sheetgroup { margin: 0; padding: var(--sf-3) var(--sf-4) var(--sf-1); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-sheetrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: var(--sf-2) var(--sf-4);
  border: 0; border-bottom: 1px solid var(--sf-line-soft); background: none; color: var(--sf-ink); text-align: left; font: inherit; cursor: pointer; }
.sf-sheetrow--plain { grid-template-columns: minmax(0, 1fr) auto; }
.sf-sheetrow:hover { background: var(--sf-page); }
.sf-sheetrow svg { inline-size: 24px; block-size: 24px; color: var(--sf-ink-2); }
.sf-sheetrow__text { min-width: 0; }
.sf-sheetrow__label, .sf-sheetrow__hint { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-sheetrow__label { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-sheetrow__hint { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-sheetrow[aria-current="true"] { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-sheetrow[aria-current="true"] .sf-sheetrow__label { font-weight: var(--sf-w-bold); }
.sf-sheetrow--danger, .sf-sheetrow--danger svg, .sf-sheetrow--danger .sf-sheetrow__hint { color: var(--sf-stop-ink); }
.sf-sheetgap { block-size: 6px; background: var(--sf-page); }
/* A plain info line at the top of a ⋯ sheet ("Saved by … · date"): text only, never a tap target. */
.sf-sheetinfo { margin: 0; padding: var(--sf-3) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); color: var(--sf-ink-3); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-sheetinfo:empty { display: none; }
.sf-sheetrow--wrap .sf-sheetrow__label, .sf-sheetrow--wrap .sf-sheetrow__hint { white-space: normal; overflow-wrap: anywhere; }
/* Picker row: 48 tall, name left, the grade or level hint right in ink-2; disabled = already taken (hint in ink-3). */
.sf-sheetrow--inline { min-block-size: var(--sf-tap); }
/* A row's one trailing action word (importer suggestions: Use this). Default, hover, pressed, focus and disabled follow the row. */
.sf-sheetrow__go { color: var(--sf-accent-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.25 var(--sf-font-ui); white-space: nowrap; }
.sf-sheetrow:disabled .sf-sheetrow__go { color: var(--sf-ink-3); }
.sf-sheetrow--inline .sf-sheetrow__text { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-3); }
.sf-sheetrow--inline .sf-sheetrow__hint { flex: none; color: var(--sf-ink-2); }
.sf-sheetrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-sheetrow:active:not(:disabled) { background: var(--sf-sunk); }
.sf-sheetrow:disabled { cursor: not-allowed; color: var(--sf-ink-3); }
.sf-sheetrow:disabled:hover { background: none; }
.sf-sheetrow:disabled .sf-sheetrow__hint { color: var(--sf-ink-3); }
/* Team and season sheet: "Find a team" under the title (only past 12 rows); only the list scrolls. */
.ot-sheet-body { display: flex; flex-direction: column; overflow: hidden; }
.ot-sheet-find { flex: none; display: grid; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); }
.ot-sheet-find__label { font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.ot-search { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; min-height: 48px; padding-inline: var(--sf-3) var(--sf-1); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink-3); font-size: 16px; }
.ot-search:hover { border-color: var(--sf-ink-3); }
.ot-search:focus-within { border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.ot-search > svg { flex: none; inline-size: 18px; block-size: 18px; }
.ot-search__input { flex: 1 1 0; min-width: 0; min-block-size: var(--sf-tap-min); padding: 0; border: 0; background: none; outline: 0; color: var(--sf-ink); font: inherit; font-size: 16px; }
.ot-search__clear { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); padding: 0; border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-ink-2); cursor: pointer; }
.ot-search__clear[hidden] { display: none; }
.ot-search__clear:hover { background: var(--sf-sunk); }
.ot-search__clear:active { background: var(--sf-line); }
.ot-search__clear:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.ot-search__clear svg { inline-size: 18px; block-size: 18px; }
.ot-sheet-body > .ot-sheet-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ot-sheet-body .sf-sheetrow { min-block-size: var(--sf-field-h); }
.ot-nomatch { display: grid; gap: var(--sf-1); padding: var(--sf-6) var(--sf-4); text-align: center; }
.ot-nomatch__head { font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); color: var(--sf-ink); }
.ot-nomatch__sub { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
@media (min-width: 600px) {
  .ot-sheet-find { padding-inline: var(--sf-5); }
  .ot-sheet-body .sf-sheetrow, .ot-sheet-body .sf-sheetgroup { padding-inline: var(--sf-5); }
}
/* A picker sheet from 600px is a centred 480 dialog (a bottom sheet on a phone). */
@media (min-width: 600px) { .sf-modal--pick { width: min(480px, 92vw); } }

/* ── Course menu ──────────────── the ⋮ of a course (js/course/courseMenu.js): groups Use · Share · Edit · Delete. A phone shows one column in a
   bottom sheet; from 600px a centred 520 dialog with Use + Share on the left, Edit on the right and Delete across the bottom. States are the
   sheet row's (default, hover, pressed, focus, disabled); the Share link row greys out and does nothing while its link is off. */
@media (min-width: 600px) { .sf-modal--cmenu { width: min(var(--sf-cmenu-w), 92vw); } }
.sf-cmenu__col + .sf-cmenu__col { border-block-start: 1px solid var(--sf-line); }
.sf-cmenu__group + .sf-cmenu__group { border-block-start: 1px solid var(--sf-line); }
.sf-cmenu__del { border-block-start: 1px solid var(--sf-line); }
@media (min-width: 600px) {
  .sf-cmenu__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-cmenu__col + .sf-cmenu__col { border-block-start: 0; border-inline-start: 1px solid var(--sf-line); }
}
.sf-cmenu__swrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.sf-cmenu__sep { inline-size: 1px; block-size: var(--sf-6); background: var(--sf-line); }
.sf-cmenu .sf-sheetrow.is-off .sf-sheetrow__label { color: var(--sf-ink-3); }
/* A switch with no word: a 44 x 26 track inside a 48 target. */
.sf-switch--bare { inline-size: var(--sf-tap); padding: 0; justify-content: center; }
.sf-switch--bare .sf-switch__track { inline-size: var(--sf-switch-w); block-size: var(--sf-switch-h); }
.sf-switch--bare .sf-switch__thumb { inline-size: calc(var(--sf-switch-h) - var(--sf-ring) * 2); }
.sf-switch--bare[aria-checked="true"] .sf-switch__thumb { inset-inline-start: calc(100% - var(--sf-switch-h) + var(--sf-ring)); }
/* A value button: the chosen value as text and a chevron, 44 tall; opens a picker sheet. In a form field (label above) it fills the field's width at the field height. */
.sf-valuebtn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sf-2); min-block-size: var(--sf-tap-min); max-inline-size: 100%; padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: left; cursor: pointer; }
.sf-formfield > .sf-valuebtn, .sf-save__group > .sf-valuebtn { inline-size: 100%; min-block-size: var(--sf-tap); }
.sf-valuebtn__text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-valuebtn svg { flex: none; color: var(--sf-ink-2); }
.sf-valuebtn:hover { background: var(--sf-page); }
.sf-valuebtn:active { background: var(--sf-sunk); }
.sf-valuebtn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-valuebtn:disabled { color: var(--sf-ink-3); background: var(--sf-sunk); cursor: not-allowed; }
.sf-valuebtn[aria-busy="true"] { opacity: .7; cursor: progress; }
.sf-valuebtn.is-error { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
/* In a form field: full width, field height (48 inside .sf-form--tap); a blank choice reads quieter. */
.sf-valuebtn--field { display: flex; inline-size: 100%; min-block-size: var(--sf-field-h); font-weight: var(--sf-w-reg); font-size: var(--sf-text-lg); }
.sf-valuebtn__text--quiet { color: var(--sf-ink-3); }

/* ── Notes / alerts ─────────────────────────── replaces blue left-border note, yellow warn, pink error */
.sf-note { display: flex; gap: var(--sf-3); align-items: flex-start; padding: var(--sf-3) var(--sf-4); border-radius: var(--sf-r-sm);
  background: var(--sf-sunk); color: var(--sf-ink); font-size: var(--sf-text-sm); font-weight: var(--sf-w-med); }
.sf-note:empty, .sf-note[hidden] { display: none; }
.sf-note svg { flex: none; inline-size: 20px; block-size: 20px; }
.sf-note--warn  { background: var(--sf-warn-soft); color: var(--sf-warn-ink); box-shadow: inset 0 0 0 1px var(--sf-warn); }
.sf-note--error { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }
.sf-note--ok    { background: var(--sf-go-soft);   color: var(--sf-go-ink); }

/* ── Toast ──────────────────────────────────── same dark pill, lifted above bottom bar */
.sf-toast {
  position: fixed; left: 50%; bottom: calc(var(--sf-bar-h) + var(--sf-4) + env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%); max-inline-size: min(480px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: center; gap: var(--sf-3); min-block-size: 48px; padding: 12px var(--sf-5);
  border-radius: var(--sf-r-pill); background: var(--sf-map-ink); color: var(--sf-white); box-shadow: var(--sf-shadow-2); font-weight: var(--sf-w-semi);
  text-align: center; line-height: 1.3;
}
.sf-toast > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sf-toast:has(.sf-btn) { padding: 0 var(--sf-2) 0 var(--sf-5); justify-content: flex-start; text-align: start; }
.sf-toast.is-wrapped { border-radius: var(--sf-r-lg); }
.sf-toast .sf-btn--ghost { color: var(--sf-toast-link); }

/* ── Loading ────────────────────────────────── spinner for actions, skeleton for lists */
.sf-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--sf-line); border-top-color: var(--sf-accent); animation: sf-spin .8s linear infinite; }
.sf-spinner--sm { width: 16px; height: 16px; border-width: 2.5px; flex: none; }
.sf-spinner--sm[hidden] { display: none; }
.sf-loading { display: grid; place-items: center; gap: var(--sf-3); padding: var(--sf-10) var(--sf-4); color: var(--sf-ink-2); font-weight: var(--sf-w-semi); }

/* ── Progress bar ───────────────────────────── a long job in steps (the admin bulk import's batches): track, fill, "3 of 20" in the numeric font.
   <div class="sf-progress" role="progressbar" aria-valuemin="0" aria-valuemax="20" aria-valuenow="3">
     <div class="sf-progress__track"><div class="sf-progress__bar" style="inline-size: 15%"></div></div>   (the fill's width is the one inline value: it is data)
     <div class="sf-progress__text"><span>Writing Cedar Hollow Invitational</span><span class="sf-progress__num">3 of 20</span></div>
   </div>
   States: default (accent fill), empty (0%, the track alone), busy (.sf-progress--busy: a moving stripe while a step runs), error
   (.sf-progress--error: stop colour, the job halted), done (.sf-progress--done: go colour, full). Not interactive: no hover, pressed,
   focus or disabled state. */
.sf-progress { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-progress__track { block-size: 8px; border-radius: var(--sf-r-pill); background: var(--sf-sunk); overflow: hidden; }
.sf-progress__bar { block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--sf-accent); transition: inline-size var(--sf-med) var(--sf-ease); }
.sf-progress--busy .sf-progress__bar { background-image: repeating-linear-gradient(90deg, transparent 0 12px, var(--sf-accent-hover) 12px 24px); background-size: 48px 100%; animation: sf-progress-stripe 1s linear infinite; }
.sf-progress--error .sf-progress__bar { background: var(--sf-stop); }
.sf-progress--done .sf-progress__bar { background: var(--sf-go); }
.sf-progress__text { display: flex; justify-content: space-between; gap: var(--sf-3); min-width: 0; font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-progress__text > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-progress__num { flex: none; font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; font-weight: var(--sf-w-semi); color: var(--sf-ink); }
@keyframes sf-progress-stripe { to { background-position: 48px 0; } }
@media (prefers-reduced-motion: reduce) { .sf-progress--busy .sf-progress__bar { animation: none; } }
.sf-skel { border-radius: 4px; background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite; }
.sf-offline { display: inline-flex; align-items: center; gap: 6px; block-size: var(--sf-tap-min); padding: 0 10px; border-radius: var(--sf-r-pill);
  background: var(--sf-warn-soft); color: var(--sf-warn-ink); font: var(--sf-w-bold) 13px/1 var(--sf-font-ui); }

/* ── Empty / error state ────────────────────── new */
.sf-empty { display: grid; justify-items: center; gap: var(--sf-3); padding: var(--sf-10) var(--sf-4); text-align: center; }
.sf-empty__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-sunk); color: var(--sf-ink-2); }
.sf-empty__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-empty--error .sf-empty__icon { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }

/* ── Section strip: a heat's label inside a list ("Heat 1 · 7:30 AM"), full-bleed, 36 (ROW-CONTRACTS) ── */
.sf-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); min-block-size: 36px; padding: 0 var(--sf-4); background: var(--sf-sunk); font: var(--sf-w-bold) 12px/1.2 var(--sf-font-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-ink-2); }
.sf-partial { background: repeating-linear-gradient(45deg, var(--sun-full) 0 5px, var(--sun-shade) 5px 10px); } /* pattern = not colour-only */
.sf-legend { display: flex; flex-wrap: wrap; gap: var(--sf-2) var(--sf-4); font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sf-legend i { width: 14px; height: 14px; border-radius: 3px; }

@keyframes sf-spin { to { transform: rotate(360deg); } }
@keyframes sf-pulse { 50% { opacity: .35; } }
@keyframes sf-shimmer { to { background-position: -150% 0; } }

/* PC tier: full rail, wider gutters */
@media (min-width: 1024px) {
  .sf-app { grid-template-columns: var(--sf-rail-w) minmax(0, 1fr); }
  .sf-app.is-collapsed { grid-template-columns: var(--sf-rail-w-collapsed) minmax(0, 1fr); }
  .sf-app.sf-app--nobar { grid-template-columns: minmax(0, 1fr); }
  .sf-rail { padding: var(--sf-3); gap: 2px; }
  .sf-rail__brand { justify-content: flex-start; padding: 0 var(--sf-3); height: calc(var(--sf-header-h) - var(--sf-3)); }
  .sf-rail__mark { display: none; }
  .sf-rail__word { display: inline; }
  .is-collapsed .sf-rail__mark { display: inline; }
  .is-collapsed .sf-rail__word { display: none; }
  .sf-rail a, .sf-rail__fold { flex-direction: row; justify-content: flex-start; gap: var(--sf-3); min-height: var(--sf-tap); padding: 0 var(--sf-3);
    font: var(--sf-w-semi) var(--sf-text-md)/var(--sf-lh) var(--sf-font-ui); text-align: left; }
  .sf-main { padding: var(--sf-6) var(--sf-8); }
}
/* Two-pane helper: list + detail from tablet up */
.sf-split { display: grid; gap: var(--sf-4); }
@media (min-width: 600px) { .sf-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .sf-split--inspector { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 300px; } }
/* Tracker landscape split */
@media (min-width: 700px) and (orientation: landscape) {
  .sf-tracker-layout { display: grid; grid-template-columns: 440px 1fr; height: calc(100dvh - var(--sf-header-h)); }
}

/* ── Distance field + sheet (FIX-TOOLS §2) ────── one 56px field, one Recent line, tiles in a sheet */
.sf-distance-field {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); inline-size: 100%; min-height: 56px;
  padding: 0 var(--sf-4); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-md); background: var(--sf-paper);
  color: var(--sf-ink); text-align: start; cursor: pointer;
}
.sf-distance-field--compact { min-height: var(--sf-tap); }
.sf-distance-field:hover { background: var(--sf-sunk); }
.sf-distance-field:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-distance-field__text { display: flex; align-items: baseline; gap: var(--sf-3); min-width: 0; flex-wrap: wrap; }
.sf-distance-field__value { font-size: var(--sf-text-2xl); line-height: 1.1; font-weight: var(--sf-w-bold); }
.sf-distance-field__sub { color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-distance-field__unit { color: var(--sf-ink-2); font: var(--sf-w-semi) 15px/1 var(--sf-font-ui); }
.sf-recents { display: flex; align-items: center; gap: var(--sf-2); margin-top: var(--sf-2); overflow: hidden; white-space: nowrap; }
.sf-recents__label { flex: none; color: var(--sf-ink-3); font-size: var(--sf-text-xs); font-weight: var(--sf-w-semi); }
.sf-recents .sf-chip { flex: none; min-height: 32px; padding: 0 var(--sf-3); }
/* Smart distance field (distanceField.js): value + in-field m / km / mi switch, equivalent line, "Read as" hint, inline error.
   States: default, hover, focus, pressed (segment), disabled, error (aria-invalid), empty (placeholder). */
.sf-dfield { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-dfield__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap);
  padding: 0 var(--sf-1) 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); }
.sf-dfield__box:hover { border-color: var(--sf-ink-3); }
.sf-dfield__box:focus-within { border-color: var(--sf-accent); box-shadow: 0 0 0 1px var(--sf-accent); }
.sf-dfield__box:has(.sf-dfield__input[aria-invalid="true"]) { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-dfield__box:has(.sf-dfield__input:disabled) { background: var(--sf-sunk); border-color: var(--sf-line); }
.sf-dfield__input { min-width: 0; inline-size: 100%; min-block-size: var(--sf-tap-min); padding: 0; border: 0; outline: 0; background: none; color: var(--sf-ink);
  font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
/* Placeholders show a format ("mm:ss"), never a value: quiet, regular weight, gone on focus. */
.sf-input::placeholder, .sf-dfield__input::placeholder, input::placeholder, textarea::placeholder { color: var(--sf-ink-3); opacity: 1; font-weight: var(--sf-w-reg); font-style: normal; }
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }
.sf-dfield__input:disabled { color: var(--sf-ink-3); }
.sf-dfield__seg { display: grid; grid-template-columns: repeat(3, auto); gap: 2px; padding: 3px; border-radius: var(--sf-r-sm); background: var(--sf-sunk); }
.sf-dfield__seg button { min-block-size: var(--sf-tap-min); min-inline-size: var(--sf-tap-min); padding: 0 var(--sf-3); border: 0; border-radius: var(--sf-r-sm);
  background: none; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer; }
.sf-dfield__seg button:hover { background: var(--sf-line-soft); }
.sf-dfield__seg button:active { background: var(--sf-line); }
.sf-dfield__seg button[aria-selected="true"] { background: var(--sf-paper); color: var(--sf-ink); font-weight: var(--sf-w-bold); box-shadow: var(--sf-shadow-1), 0 0 0 1px var(--sf-line); }
.sf-dfield__seg button:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 1px; }
.sf-dfield__seg button:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-dfield__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-2); min-width: 0; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-num); }
.sf-dfield__hint[hidden], .sf-dfield__undo[hidden], .sf-dfield__err[hidden] { display: none; }
.sf-dfield__undo { padding: 0; border: 0; background: none; color: var(--sf-link); font: inherit; text-decoration: underline; cursor: pointer; }
.sf-dfield__undo:hover { color: var(--sf-accent-hover); }
.sf-dfield__undo:active { color: var(--sf-accent-press); }
.sf-dfield__undo:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-dfield__err { color: var(--sf-stop-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-distance-sheet { display: grid; gap: var(--sf-4); }
.sf-distance-custom { display: flex; align-items: center; gap: var(--sf-2); }
.sf-distance-custom .sf-input { flex: 1 1 auto; min-width: 0; }
.sf-distance-custom .sf-seg { flex: none; inline-size: 168px; }
.sf-distance-custom__unit { color: var(--sf-ink-3); font-weight: var(--sf-w-semi); }
.sf-tilegroup { display: grid; gap: var(--sf-2); }
.sf-tilegroup__title { margin: 0; color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-tilegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-tile {
  min-height: 44px; padding: 0 var(--sf-1); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper);
  color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-tile:hover { background: var(--sf-sunk); }
.sf-tile[aria-pressed="true"] { background: var(--sf-accent-soft); border-color: var(--sf-accent); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-tile:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }

/* ── Weather chip ── the ONLY weather chip (js/conditions/weatherPillView.js); the effect of heat lives on the result (.sf-wx-chip) */
.sf-wxrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-wxrow--stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.sf-wxrow--stack > [hidden] { display: none; }
.sf-wxrow--stack > .sf-field { justify-self: start; inline-size: calc(var(--sf-tap) * 4); max-inline-size: 100%; } /* the "Another day" box: sized for a date, not the full dialog */
.sf-wx-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 0 0 auto; align-self: flex-start; justify-self: start; inline-size: fit-content; min-width: 0; max-inline-size: 100%; box-sizing: border-box; block-size: auto; min-block-size: 28px; padding: 4px 11px 4px 8px;
  border-width: 1.5px; border-style: solid; border-color: var(--sf-line-strong); border-radius: 16px; background-color: var(--sf-wx-hist); color: var(--sf-ink);
  font: var(--sf-w-semi) 13px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default;
}
.sf-wx-pill[data-kind="forecast"] { background-color: var(--sf-wx-fcst); border-style: dashed; }
.sf-wx-pill [data-wx] { display: inline-flex; flex: none; align-items: center; gap: 5px; }
.sf-wx-pill svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-wx-pill [data-wx="temp"] { font-size: 15px; font-weight: var(--sf-w-bold); }
.sf-wx-pill [data-sky="sun"] svg { color: var(--sf-wx-sun); }
.sf-wx-pill [data-sky="cloud"] svg { color: var(--sf-wx-cloud); }
.sf-wx-pill [data-sky="rain"] svg { color: var(--sf-wx-rain); }
.sf-wx-pill [data-wx="rain"] svg { color: var(--sf-wx-umbrella); }
.sf-wx-pill [data-wx="humidity"] svg { color: var(--sf-wx-humidity); }
.sf-wx-pill [data-wx="wind"] svg { color: var(--sf-wx-wind); }
.sf-wx-pill [data-wx="time"] { block-size: 16px; padding-inline-start: 10px; border-inline-start: 1.5px solid var(--sf-line-strong); }
/* Picker (calculators): the only tappable chip. Two lines, 48 tall, 12 radius, green wash; solid go border for Now, dashed for a chosen time. */
.sf-wx-pill[data-wx-variant="picker"] {
  display: inline-grid; align-content: center; gap: 5px; block-size: auto; min-block-size: 48px; padding: 6px 10px 6px 12px; border-color: var(--sf-go-ink); border-style: solid; border-radius: 12px;
  background-color: var(--sf-wx-pick); text-align: start; cursor: pointer;
}
.sf-wx-pill[data-wx-variant="picker"][data-future] { border-style: dashed; }
.sf-wx-pill[data-wx-variant="picker"] [data-row] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-wx-pill[data-wx-variant="picker"] [data-row]:first-child { justify-content: space-between; }
.sf-wx-pill[data-wx-variant="picker"] [data-wx="when"] { gap: 2px; font-weight: var(--sf-w-bold); }
.sf-wx-pill[data-wx-variant="picker"]:hover { background-color: color-mix(in srgb, var(--sf-go-ink) 18%, var(--sf-paper)); }
.sf-wx-pill[data-wx-variant="picker"]:active { border-width: 2.5px; }
.sf-wx-pill[data-wx-variant="picker"]:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-wx-pill[data-wx-variant="picker"]:disabled { color: var(--sf-ink-3); background-color: var(--sf-sunk); border-color: var(--sf-line-strong); cursor: not-allowed; }
.sf-wx-pill[data-state] { display: inline-flex; gap: var(--sf-2); }
.sf-wx-pill[data-state="empty"] { border-style: dashed; border-color: var(--sf-ink-3); background-color: transparent; color: var(--sf-ink-2); }
.sf-wx-pill[data-state="loading"] { color: var(--sf-ink-2); cursor: progress; }
.sf-wx-pill[data-state="failed"] { border-color: var(--sf-warn); background-color: var(--sf-warn-soft); color: var(--sf-warn-ink); }
.sf-wx-pill [data-wx="spin"] { inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2.5px solid var(--sf-line); border-top-color: var(--sf-accent); animation: sf-spin .7s linear infinite; }
/* The effect on a result ("+6.5% for heat" / "-1.2% for cool"): a chip on the big-number row; hidden at 0. */
.sf-wx-chip { display: inline-flex; flex: 0 1 auto; min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; align-items: center; gap: var(--sf-1); padding: var(--sf-1) var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-warn-soft); color: var(--sf-warn-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-wx-chip.is-faster { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-wx-chip svg { flex: none; inline-size: 14px; block-size: 14px; }
.sf-wx-chip[hidden] { display: none; }
/* Tappable chip (opens the Heat effect sheet): "+3.5% heat", a shield-check mark after a hairline when the heat credit is applied. 32 tall, 44 hit area. */
.sf-wx-chip--tap { position: relative; overflow: visible; min-block-size: var(--sf-8); padding: 0 var(--sf-3); border: 0; cursor: pointer; }
.sf-wx-chip--tap::after { content: ""; position: absolute; inset: -6px 0; }
.sf-wx-chip--tap:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.sf-wx-chip--tap:active { box-shadow: inset 0 0 0 2.5px currentColor; }
.sf-wx-chip--tap:focus-visible { outline: 0; box-shadow: 0 0 0 var(--sf-ring) var(--sf-ink), 0 0 0 calc(var(--sf-ring) * 2) var(--sf-accent); }
.sf-wx-chip--tap:disabled { color: var(--sf-ink-3); background: var(--sf-sunk); cursor: not-allowed; }
.sf-wx-chip__num { font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-wx-chip__mark { display: inline-flex; align-items: center; block-size: var(--sf-5); padding-inline-start: var(--sf-2); margin-inline-start: var(--sf-1); border-inline-start: 1px solid color-mix(in oklab, currentColor 30%, transparent); color: var(--sf-go-ink); }
.sf-wx-chip__mark svg { inline-size: 16px; block-size: 16px; }
.sf-wx-chip.is-loading { background: var(--sf-sunk); color: var(--sf-ink-2); cursor: progress; }
.sf-wx-chip.is-loading svg:last-child { animation: sf-spin .9s linear infinite; }
.sf-wx-chip__skel { inline-size: var(--sf-8); block-size: var(--sf-2); border-radius: var(--sf-1); background: var(--sf-line); }
.sf-wx-chip.is-error { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }

/* ── Heat effect sheet ──────────────────────── the math behind a heat chip: standard slowdown, heat credit, applied (they add up to the digit), the source, the switch
   <div class="sf-modal-backdrop"><div class="sf-modal sf-modal--heat"> head: title + the weather in words; body: .sf-heatnote, three .sf-heatrow, .sf-heatsrc, .sf-heatswitch.
   States: credit on, off ("Off · ×1.00"), no place (switch disabled, "Location off"), unavailable ("Past weather unavailable"), forecast date. Phone: bottom sheet; from 600px a 380px dialog. */
.sf-modal__sub { margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); font-variant-numeric: tabular-nums; }
.sf-modal__titles { flex: 1; min-width: 0; display: grid; }
.sf-modal__titles .sf-modal__title { flex: none; }
.sf-heatnote { margin: 0; padding-block-end: var(--sf-3); color: var(--sf-ink-2); font-size: var(--sf-text-sm); line-height: var(--sf-lh); }
.sf-heatrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-field-h); padding-block: var(--sf-2); border-top: 1px solid var(--sf-line-soft); }
.sf-heatrow__text { min-width: 0; }
.sf-heatrow__label { font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-heatrow__sub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.sf-heatrow__val { font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-heatrow__val.is-heat { color: var(--sf-warn-ink); }
.sf-heatrow__val.is-credit { color: var(--sf-go-ink); }
.sf-heatrow--total { border-top: 2px solid var(--sf-ink); }
.sf-heatrow--total .sf-heatrow__label { font-weight: var(--sf-w-bold); }
.sf-heatrow--total .sf-heatrow__val { font-size: var(--sf-text-2xl); }
.sf-heatsrc { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap-min); color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-heatsrc svg { flex: none; inline-size: 16px; block-size: 16px; color: var(--sf-ink-3); }
.sf-heatsrc__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sf-heatsrc__btn { flex: none; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-2); border: 0; background: none; color: var(--sf-link); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer; }
.sf-heatsrc__btn:hover { text-decoration: underline; }
.sf-heatsrc__btn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-heatswitch { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); border-top: 1px solid var(--sf-line); }
.sf-heatswitch__label { font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-ui); }
.sf-heatswitch__help { margin-inline-end: auto; }
@media (min-width: 600px) { .sf-modal--heat { width: min(380px, 92vw); } }
/* ── Heat box and heat note ────────────────────────────────────────────────────────────────────────────────────────
   Heat box (.sf-heatbox, buildHeatBox): tall beside a big result, mini in the timer top row. States: default, hover, pressed, focus, loading, faster (cool).
   Heat note (.sf-heatline): one line under a secondary table. */
.sf-wxcard { container: sf-wxcard / inline-size; }

.sf-heatbox { display: grid; gap: var(--sf-1); flex: 0 1 auto; min-width: 0; max-inline-size: 100%; overflow: hidden; padding: var(--sf-2) 10px; border: 0; border-radius: var(--sf-r-xl); background: var(--sf-warn-soft); color: var(--sf-warn-ink); font: inherit; text-align: start; white-space: nowrap; }
.sf-heatbox.is-faster { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-heatbox__head { display: flex; align-items: center; gap: 5px; font: var(--sf-w-bold) 14px/1 var(--sf-font-ui); font-variant-numeric: tabular-nums; }
.sf-heatbox__head svg { flex: none; inline-size: 15px; block-size: 15px; }
.sf-heatbox__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); }
.sf-heatbox__delta { font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-heatbox__unit { font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); }
.sf-heatbox__mark { display: inline-flex; flex: none; color: var(--sf-go-ink); }
.sf-heatbox__mark svg { inline-size: 16px; block-size: 16px; }
.sf-heatbox--mini { min-block-size: var(--sf-tap-min); align-content: center; gap: 2px; padding: 5px var(--sf-2); }
.sf-heatbox--mini .sf-heatbox__head { font-size: var(--sf-text-sm); gap: var(--sf-1); }
.sf-heatbox--mini .sf-heatbox__head svg { inline-size: 13px; block-size: 13px; }
.sf-heatbox--mini .sf-heatbox__delta { font-size: 15px; }
.sf-heatbox--stacked { align-content: center; gap: 2px; }
.sf-heatbox__big { font: var(--sf-w-bold) var(--sf-text-xl)/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-heatbox--stacked .sf-heatbox__delta { font-size: var(--sf-text-md); }
.sf-heatbox--tap { position: relative; overflow: visible; cursor: pointer; }
.sf-heatbox--tap::after { content: ""; position: absolute; inset: -2px 0; } /* 48px hit area */
.sf-heatbox--tap:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.sf-heatbox--tap:active { box-shadow: inset 0 0 0 2.5px currentColor; }
.sf-heatbox--tap:focus-visible { outline: 0; box-shadow: 0 0 0 var(--sf-ring) var(--sf-ink), 0 0 0 calc(var(--sf-ring) * 2) var(--sf-accent); }
.sf-heatbox.is-loading { grid-auto-flow: column; align-items: center; background: var(--sf-sunk); color: var(--sf-ink-2); cursor: progress; }
.sf-heatbox.is-loading svg:last-child { animation: sf-spin .9s linear infinite; }
.sf-heatline { display: inline-flex; align-items: center; gap: var(--sf-1); min-block-size: var(--sf-tap-min); border: 0; background: none; padding: 0; color: var(--sf-warn-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); font-variant-numeric: tabular-nums; text-align: start; }
.sf-heatline.is-faster { color: var(--sf-go-ink); }
.sf-heatline svg { flex: none; inline-size: 14px; block-size: 14px; }
.sf-heatline--tap { cursor: pointer; }
.sf-heatline--tap:hover { text-decoration: underline; }
.sf-heatline--tap:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-wshprev__ico, .sf-wx-cond__ico { display: inline-flex; color: var(--sf-ink-2); }
.sf-wshprev__ico.is-sun, .sf-wx-cond__ico.is-sun { color: var(--sf-wx-sun); }
.sf-wshprev__ico.is-rain, .sf-wx-cond__ico.is-rain { color: var(--sf-wx-rain); }
.sf-wx-conds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-wx-cond {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sf-1); min-height: 64px; padding: var(--sf-2) var(--sf-1);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink);
  font: var(--sf-w-semi) var(--sf-text-xs)/1.1 var(--sf-font-ui); text-align: center; cursor: pointer;
}
.sf-wx-cond[aria-pressed="true"] { background: var(--sf-accent-soft); border-color: var(--sf-accent); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }

/* ── Calculator layout parts (Pace & time handoff) ─────────── two fields on one row, the Estimated times card, the fine tune slider, the weather sheet rows */
.sf-fieldpair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: var(--sf-3); min-width: 0; }
.sf-fieldpair > * { min-width: 0; }

/* Estimated times: a card with a title and sub, the filter and gear buttons, then a Distance / Time / pace list of buttons (a tap makes the row the distance). */
.sf-etimes { background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); overflow: hidden; min-width: 0; }
.sf-etimes__head { display: grid; grid-template-columns: minmax(0, 1fr) var(--sf-tap-min) var(--sf-tap-min); align-items: center; gap: var(--sf-2); padding: var(--sf-3) var(--sf-3) var(--sf-2) var(--sf-4); }
.sf-etimes__titles { min-width: 0; }
.sf-etimes__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-etimes__sub { margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-etimes__head .sf-iconbtn { inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); }
.sf-etimes__gear { position: relative; }
.sf-etimes__dot { position: absolute; inset-block-start: var(--sf-2); inset-inline-end: var(--sf-2); inline-size: var(--sf-dot-sm); block-size: var(--sf-dot-sm); border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 0 var(--sf-ring) var(--sf-paper); }
.sf-etimes__choices { display: grid; }
.sf-etrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4rem; align-items: center; gap: var(--sf-2); inline-size: 100%; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-4);
  border: 0; border-top: 1px solid var(--sf-line-soft); background: none; color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer;
}
.sf-etrow > :nth-child(n + 2) { text-align: end; font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-etrow small { font-size: var(--sf-text-sm); font-weight: var(--sf-w-reg); }
.sf-etrow:hover:not(.sf-etrow--head) { background: var(--sf-sunk); }
.sf-etrow:active:not(.sf-etrow--head) { background: var(--sf-line-soft); }
.sf-etrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-etrow[aria-selected="true"] { background: var(--sf-accent-soft); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-etrow--head { min-block-size: var(--sf-8); border-top-color: var(--sf-line); color: var(--sf-ink-3); font-size: var(--sf-text-sm); cursor: default; }

/* Fine tune: Speed type to Endurance type with a centre tick for balanced, the live word and Reset to balanced. */
.sf-tune { display: grid; gap: var(--sf-3); }
.sf-tune__ends { display: flex; justify-content: space-between; gap: var(--sf-3); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-tune__rail { position: relative; padding-block: var(--sf-2); }
.sf-tune__rail::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 2px; background: var(--sf-ink-3); transform: translateX(-50%); }
.sf-tune__range { position: relative; inline-size: 100%; min-block-size: var(--sf-tap); margin: 0; accent-color: var(--sf-accent); }
.sf-tune__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); }
.sf-tune__word { font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-ui); }
.sf-tune__note { margin: 0; color: var(--sf-ink-2); font-size: var(--sf-text-sm); line-height: var(--sf-lh); }

/* Weather sheet: head (title, place chip, close), the chosen weather first, a day row, a time row, then one footer row. No Where / Day / Time labels. */
.sf-modal--wsh .sf-modal__titles { flex: none; }
.sf-modal--wsh .sf-modal__head > .sf-iconbtn { margin-inline-start: auto; }
.sf-wshloc {
  position: relative; display: inline-flex; align-items: center; gap: var(--sf-1); min-inline-size: 0; max-inline-size: 100%; min-block-size: calc(var(--sf-8) + var(--sf-1)); padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer;
}
.sf-wshloc::after { content: ""; position: absolute; inset: -6px 0; }
.sf-wshloc:hover { background: var(--sf-sunk); }
.sf-wshloc:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-wshloc svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-wshloc__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-wshbody { display: grid; gap: var(--sf-3); }
.sf-wshprev { display: grid; gap: var(--sf-2); align-content: start; min-width: 0; }
.sf-wshprev__line { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); min-width: 0; min-block-size: var(--sf-8); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-wshprev__when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-wshprev__back { flex: none; min-block-size: var(--sf-tap-min); white-space: nowrap; }
/* Three equal-height boxes (sky + temp, the stats, the heat box). No heat: the stats box takes the room. */
.sf-wshprev__boxes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: var(--sf-2); min-width: 0; }
.sf-wshprev__boxes--2 { grid-template-columns: auto minmax(0, 1fr); }
.sf-wshprev__boxes > * { min-width: 0; min-block-size: 80px; border-radius: var(--sf-r-xl); }
.sf-wshprev__sky, .sf-wshprev__stats { background: var(--sf-sunk); }
.sf-wshprev__sky { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-2) var(--sf-3); white-space: nowrap; }
.sf-wshprev__sky .sf-wshprev__ico svg { inline-size: 34px; block-size: 34px; }
.sf-wshprev .sf-wshprev__sky .sf-wshprev__temp { font-size: 42px; line-height: 1; }
.sf-wshprev__stats { display: grid; align-content: center; gap: 5px; padding: var(--sf-2) var(--sf-3); background: var(--sf-paper); border: 1px solid var(--sf-line); }
.sf-wshprev__stat { display: flex; align-items: center; gap: var(--sf-1); min-width: 0; white-space: nowrap; color: var(--sf-ink); font: var(--sf-w-semi) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-wshprev__stat svg { flex: none; inline-size: 14px; block-size: 14px; color: var(--sf-ink-2); }
.sf-wshprev__stat--hum svg, .sf-wshprev__stat--rain svg { color: var(--sf-link); }
.sf-wshdays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) var(--sf-tap); gap: var(--sf-2); }
.sf-wshday {
  display: grid; place-items: center; align-content: center; gap: 2px; min-block-size: var(--sf-field-h); padding: var(--sf-1); min-width: 0; white-space: nowrap;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.1 var(--sf-font-ui); cursor: pointer;
}
.sf-wshday > * { min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; }
.sf-wshday small { color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-wshday:hover { background: var(--sf-sunk); }
.sf-wshday:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-wshday[aria-pressed="true"] { background: var(--sf-accent-soft); border-color: var(--sf-accent); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-wshday[aria-pressed="true"] small { color: inherit; }
.sf-wshdays .sf-iconbtn, .sf-wshtimes .sf-iconbtn { inline-size: var(--sf-tap); block-size: var(--sf-field-h); }
.sf-wshtimes { display: grid; grid-template-columns: minmax(0, 1fr) var(--sf-tap); align-items: center; gap: var(--sf-2); }
.sf-wshslots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--sf-r-sm); background: var(--sf-sunk); min-width: 0; }
.sf-wshslot { display: grid; place-items: center; align-content: center; gap: 1px; min-width: 0; min-block-size: 60px; white-space: nowrap; border: 0; border-radius: 5px; background: none; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.1 var(--sf-font-ui); cursor: pointer; }
.sf-wshslot small { min-block-size: 1em; color: var(--sf-ink-3); font: var(--sf-w-semi) 14px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-wshslot .sf-wshslot__rain { display: inline-flex; align-items: center; gap: 2px; min-block-size: 0; color: var(--sf-link); font-size: var(--sf-text-xs); }
.sf-wshslot .sf-wshslot__rain svg { inline-size: 11px; block-size: 11px; }
.sf-wshremove { display: flex; align-items: center; justify-content: center; gap: var(--sf-2); min-block-size: var(--sf-tap-min); border: 0; background: none; color: var(--sf-stop-ink); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); cursor: pointer; }
.sf-wshremove svg { inline-size: 18px; block-size: 18px; flex: none; }
.sf-wshremove:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-wshslot:hover:not(:disabled):not([aria-selected="true"]) { background: var(--sf-line); color: var(--sf-ink); }
.sf-wshslot:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-wshslot[aria-selected="true"] { background: var(--sf-paper); color: var(--sf-ink); font-weight: var(--sf-w-bold); box-shadow: var(--sf-shadow-1), 0 0 0 1px var(--sf-line); }
.sf-wshslot:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-wshexact { min-width: 0; }
.sf-modal__foot.sf-wshfoot { flex-direction: row; align-items: center; justify-content: space-between; }
.sf-wshfoot .sf-btn--ghost { order: 0; align-self: center; flex: none; }
.sf-wshfoot .sf-btn--primary { order: 1; flex: 1 1 auto; inline-size: auto; max-inline-size: 60%; min-block-size: var(--sf-tap); }
@media (min-width: 600px) { .sf-modal--wsh { width: min(440px, 92vw); } }
.sf-tile--wide { inline-size: 100%; }
/* ── Rail icons ─────────────────────────────── the sprite svg has no size of its own: it rendered about 130px on the PC rail */
.sf-rail a svg, .sf-rail__fold svg { inline-size: 22px; block-size: 22px; flex: none; }
/* Tablet rail, Expand (600-1023): the 224 rail laid over the page. It is still the grid's 76 column, so the page does not move; the scrim covers the page,
   and both sit above the header and below sheets. The shell builds both (js/appShell.js); the page-state is not remembered. */
.sf-rail-scrim { position: fixed; inset: 0; z-index: var(--sf-z-drawer); background: var(--sf-overlay); }
@media (min-width: 600px) and (max-width: 1023px) {
  .sf-rail.is-open { width: var(--sf-rail-w); z-index: var(--sf-z-drawer); padding: var(--sf-3) var(--sf-3); gap: 2px; box-shadow: var(--sf-shadow-rail); animation: sf-rail-in 160ms ease-out; }
  .sf-rail.is-open .sf-rail__brand { justify-content: flex-start; padding: 0 var(--sf-3); height: calc(var(--sf-header-h) - var(--sf-3)); }
  .sf-rail.is-open .sf-rail__mark { display: none; }
  .sf-rail.is-open .sf-rail__word { display: inline; }
  .sf-rail.is-open a, .sf-rail.is-open .sf-rail__fold { flex-direction: row; justify-content: flex-start; gap: var(--sf-3); min-height: var(--sf-tap); padding: 0 var(--sf-3);
    font: var(--sf-w-semi) var(--sf-text-md)/var(--sf-lh) var(--sf-font-ui); text-align: left; }
}
@keyframes sf-rail-in { from { transform: translateX(calc(var(--sf-rail-w-tablet) - var(--sf-rail-w))); } }
@media (prefers-reduced-motion: reduce) { .sf-rail.is-open { animation: none; } }
.ap-side[hidden] { display: none; }

/* ── Courses page (SPEC §2, §3; specs/Courses Page.dc.html) ── type switch, rows, offline marker, inspector, New course sheet */
.sf-iconbtn--primary { background: var(--sf-accent); color: var(--sf-on-accent); border-radius: var(--sf-r-md); }
.sf-iconbtn--primary:hover { background: var(--sf-accent-hover); }
.sf-iconbtn--primary:active { transform: scale(.96); }
.sf-iconbtn--primary[disabled] { background: var(--sf-sunk); color: var(--sf-ink-3); cursor: not-allowed; }

.sf-courses { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-4); inline-size: 100%; min-width: 0; margin: 0; }
.sf-courses__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sf-3); }
.sf-courses__tools { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-courses__row1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-courses__row1 .sf-courses__new, .sf-courses__viewrow .sf-courses__new { inline-size: 44px; block-size: 40px; }
.sf-courses__viewrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2); min-width: 0; margin-block-end: var(--sf-3); }
.sf-courses__viewrow > .sf-seg { min-block-size: var(--sf-tap); }
.sf-courses__viewrow > .sf-seg button { min-block-size: calc(var(--sf-tap) - 6px); }
.sf-courses__pane[hidden], .sf-courses__row1[hidden] { display: none; }
.sf-courses__wideactions { display: none; gap: var(--sf-2); }
@media (min-width: 600px) { .sf-courses__wideactions { display: flex; } }
.sf-courses__find { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
.sf-courses__find[hidden] { display: none; }
.sf-courses__findbtns { display: flex; gap: 6px; }
.sf-courses__sort, .sf-courses__filter { position: relative; min-block-size: 44px; padding: 0 var(--sf-3); gap: var(--sf-1); }
.sf-courses__filter { inline-size: 44px; padding: 0; }
.sf-courses__filter.is-on { background: var(--sf-accent-soft); border-color: var(--sf-accent); color: var(--sf-accent-ink); }
.sf-courses__filter .sf-badge { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; }
.sf-courses__sort svg, .sf-courses__filter svg { inline-size: 18px; block-size: 18px; }
.sf-courses__sortmenu { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; }
.sf-courses__empty { display: grid; justify-items: center; gap: var(--sf-3); padding: var(--sf-8) var(--sf-4); }
.sf-courses__emptytitle { margin: 0; font: var(--sf-w-semi) 16px/1.3 var(--sf-font-ui); }
.sf-searchbox { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; min-block-size: 44px; padding: 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink-3); }
.sf-searchbox--field { min-block-size: var(--sf-tap); }
.sf-searchbox:focus-within { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-searchbox > svg { flex: none; inline-size: 18px; block-size: 18px; }
.sf-searchbox__input { flex: 1 1 0; min-width: 0; min-block-size: 40px; padding: 0; border: 0; background: none; outline: 0; color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-checkrow { display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 48px; padding: 0 var(--sf-4); border: 0; border-top: 1px solid var(--sf-line-soft); background: none; color: var(--sf-ink); font: var(--sf-w-med) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: left; cursor: pointer; }
.sf-checkrow__box { flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border: 2px solid var(--sf-line-strong); border-radius: 5px; background: var(--sf-paper); font: var(--sf-w-bold) 14px/1 var(--sf-font-ui); }
.sf-checkrow[aria-checked="true"] .sf-checkrow__box { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-on-accent); }
.sf-checkrow > .sf-icon:last-child { margin-inline-start: auto; inline-size: 20px; block-size: 20px; color: var(--sf-accent); }
.sf-courses__note { margin: 0; color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-courses__note[hidden] { display: none; }
.sf-courses__more { margin: var(--sf-3) var(--sf-4); }
/* The team line above the All / Races / Training tabs: one bordered box, "<team> uses N of these · M more in the library". */
.sf-courses__teambox { margin: 0; padding: var(--sf-2) var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-xl); color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-courses__teambox[hidden] { display: none; }
.sf-courses__teambox .sf-num { color: var(--sf-ink); font-weight: var(--sf-w-bold); }
/* After a filter: one plain line naming the filters, a Clear text button, then the count. */
.sf-courses__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sf-3); margin: 0; color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-courses__summary[hidden] { display: none; }
.sf-courses__summary .sf-linkbtn { min-block-size: var(--sf-tap-min); }
/* The Filter dialog (both views): one two-column grid, a 520 dialog from 600px, a bottom sheet under it; segmented rows, the switch tile and fields are 48 (FILTER-RULES.md: no chips, no checkbox stacks).
   Whose, the switch tile, State and Length take one column; Type and Within take both (--wide). */
.sf-fsheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-4) var(--sf-3); padding: var(--sf-4); }
.sf-fsheet__group { display: grid; gap: var(--sf-2); align-content: end; min-width: 0; }
.sf-fsheet__group--wide { grid-column: 1 / -1; }
.sf-fsheet__label { margin: 0; min-block-size: calc(var(--sf-text-sm) * 1.2); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-fsheet .sf-seg--field, .sf-fsheet .sf-seg--lg { display: grid; inline-size: 100%; max-inline-size: none; }
.sf-fsheet .sf-seg button { white-space: nowrap; font-size: var(--sf-text-ctl); }
.sf-fsheet .sf-fieldbtn { inline-size: 100%; border-radius: var(--sf-r-tile); }
.sf-fsheet__group.is-dim .sf-seg, .sf-fsheet__group.is-dim .sf-fieldbtn, .sf-fsheet__group.is-dim .sf-fsheet__row--tile { opacity: .45; pointer-events: none; }
.sf-fsheet__group.is-dim .sf-fsheet__label { color: var(--sf-ink-3); }
.sf-fsheet__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); min-block-size: var(--sf-tap); }
/* The switch tile: a bordered 48 box like .sf-fieldbtn, the label left on one line, the switch right. Hover, pressed and focus show on the tile; the greyed look is the group's is-dim. */
.sf-fsheet__row--tile { box-sizing: border-box; padding: 0 var(--sf-2) 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-tile); background: var(--sf-paper); }
.sf-fsheet__row--tile:hover { background: var(--sf-sunk); }
.sf-fsheet__row--tile:active { background: var(--sf-line); }
.sf-fsheet__row--tile:focus-within { border-color: var(--sf-focus); }
.sf-fsheet__row--tile .sf-switch--bare { min-block-size: 0; inline-size: auto; }
.sf-fsheet__rowlabel { color: var(--sf-ink); white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-ctl)/1.2 var(--sf-font-ui); }
.sf-fsheet__off { display: flex; align-items: center; gap: var(--sf-2); margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-fsheet__off svg { inline-size: 16px; block-size: 16px; flex: none; }

/* Races | Training (phone) and All · Races · Training (from 600px): the segmented track, an icon in the type's colour, a count */
.sf-seg--type { border-radius: var(--sf-r-md); }
.sf-seg--type .sf-seg__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: min-content; white-space: nowrap; min-height: 36px; border-radius: 8px; font-size: 15px; }
.sf-seg--type .sf-seg__btn svg { inline-size: 15px; block-size: 15px; flex: none; color: var(--sf-ink-2); }
.sf-seg--type .sf-seg__btn--race svg { color: var(--sf-accent); }
.sf-seg--type .sf-seg__btn--training svg { color: var(--sf-go); }
.sf-seg__count { flex: none; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-seg--wide { display: none; }

/* The list: flat and full-bleed on a phone, a bordered table from 600px. One column template (--sf-crow-cols) serves the header and every row. */
.sf-courses__table { background: var(--sf-paper); border-block: 1px solid var(--sf-line); }
.sf-crow { position: relative; display: grid; grid-template-columns: var(--sf-crow-cols); align-items: center; gap: var(--sf-3);
  min-block-size: 72px; padding: var(--sf-2) var(--sf-1) var(--sf-2) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); }
.sf-crow:last-child { border-bottom: 0; }
.sf-crow:hover { background: var(--sf-page); }
.sf-crow.is-selected, .sf-crow.is-selected:hover { background: var(--sf-accent-soft); }
.sf-crow--head { display: none; grid-template-columns: var(--sf-crow-cols); }
.sf-crow__dist { display: none; }
.sf-crow__hit { position: absolute; inset-block: 0; inset-inline: 0 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.sf-crow__hit:focus-visible { outline-offset: -3px; }
.sf-crow > :not(.sf-crow__hit):not(.sf-crow__more) { pointer-events: none; }
.sf-crow .sf-vthumb { --vthumb: 56px; }
.sf-crow__thumb--race { color: var(--elev-fill); }
.sf-crow__thumb--training { color: var(--sf-go); }
.sf-crow__text { min-width: 0; display: grid; gap: 3px; }
.sf-crow__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
/* Line 2: the type as icon + word, then (a phone only) the length, then the place, which wraps and is never cut; Private and the upload marker only when they apply. */
.sf-crow__detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-crow__kind { display: inline-flex; flex: none; align-items: center; gap: 5px; font: var(--sf-w-bold) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-crow__kind svg { inline-size: 14px; block-size: 14px; }
.sf-crow__kind--race { color: var(--sf-accent-ink); }
.sf-crow__kind--training { color: var(--sf-go-ink); }
.sf-crow__km { flex: none; white-space: nowrap; color: var(--sf-ink); font-weight: var(--sf-w-bold); }
.sf-crow__meta { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sf-crow__private { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--sf-warn-ink); font-weight: var(--sf-w-bold); }
.sf-crow__private svg { inline-size: 14px; block-size: 14px; }
.sf-crow__flag { color: var(--sf-warn-ink); font-size: var(--sf-text-sm); }
.sf-crow__more { inline-size: 40px; block-size: var(--sf-tap); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-ink-2); cursor: pointer; }
.sf-crow__more:hover { background: var(--sf-sunk); }
.sf-crow__more svg { inline-size: 20px; block-size: 20px; }

/* Upload status: nothing to act on shows nothing; busy = Uploading; failed = ! Not uploaded. It sits on line 2 beside the place. */
.sf-crow__phone { position: relative; display: inline-flex; align-items: center; flex: none; gap: 4px; padding: 0; border: 0; background: none; color: var(--sf-ink-2); font: inherit; font-weight: var(--sf-w-semi); }
.sf-crow__phone svg { inline-size: 14px; block-size: 14px; flex: none; }
.sf-crow__phone--failed { color: var(--sf-warn-ink); cursor: pointer; pointer-events: auto; z-index: 1; }
.sf-crow__phone--failed::after { content: ""; position: absolute; inset: -16px -8px; } /* 48px hit area */
.sf-crow__phone--busy { color: var(--sf-ink-3); }
.sf-crow__spin { inline-size: 12px; block-size: 12px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sf-spin .8s linear infinite; }

@media (min-width: 600px) {
  .sf-seg--phone { display: none; }
  .sf-seg--wide { display: grid; grid-auto-columns: auto; border-radius: var(--sf-r-sm); }
  .sf-seg--wide .sf-seg__btn { min-height: 38px; padding: 0 14px; border-radius: var(--sf-r-sm); font-size: var(--sf-text-sm); }
  .sf-seg--wide .sf-seg__btn svg { inline-size: 16px; block-size: 16px; }
  .sf-courses__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-3); }
  .sf-courses__row1 { display: flex; flex-wrap: wrap; flex: 0 1 auto; gap: var(--sf-3); }
  .sf-courses__viewrow { display: flex; flex-wrap: wrap; gap: var(--sf-3); }
  .sf-courses__viewrow > .sf-seg { min-block-size: var(--sf-tap-min); }
  .sf-courses__viewrow > .sf-seg button { min-block-size: calc(var(--sf-tap-min) - 6px); }
  .sf-courses__row1 > .sf-seg, .sf-courses__wideactions, .sf-courses__viewrow > .sf-seg { flex: none; }
  .sf-courses__wideactions { flex-wrap: wrap; }
  .sf-courses__find { flex: 1 1 240px; }
  .sf-courses__chips .sf-chip { min-height: 38px; padding: 0 var(--sf-3); }
  .sf-courses__table { border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); overflow: hidden; }
  .sf-crow, .sf-crow--head { --sf-crow-cols: 44px minmax(220px, 1fr) 88px 40px; gap: var(--sf-3); padding-inline: 14px; }
  .sf-crow { min-block-size: 64px; padding-block: var(--sf-2); }
  .sf-crow--head { display: grid; align-items: center; min-block-size: var(--sf-tap-min); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; }
  .sf-crow--head[hidden] { display: none; }
  .sf-crow--head > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-crow__hit { inset-inline-end: 40px; }
  .sf-crow .sf-vthumb { --vthumb: 44px; }
  .sf-crow__name { font-size: 15px; }
  .sf-crow__km { display: none; }
  /* Length: the number (Barlow, bold) and its unit on one line, right-aligned; the header cell says "Length" in the same place. */
  .sf-crow__dist { display: flex; justify-content: flex-end; align-items: baseline; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .sf-crow__num { font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); }
  .sf-crow__unit { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
  .sf-crow--head .sf-crow__dist { display: block; text-align: right; font: inherit; letter-spacing: inherit; }
}
/* The card is shown from 1024px: beside the list when the page content (beside the rail) is 1100 or wider, under it when narrower. */
.sf-courses__inspector { display: none; }
@media (min-width: 1024px) {
  .sf-courses__inspector { display: grid; align-content: start; gap: 14px; min-width: 0; padding: var(--sf-5); background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); }
}
.sf-courses__frame { container: courses / inline-size; min-width: 0; }
@container courses (min-width: 1100px) {
  .sf-courses { grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); align-items: start; }
  .sf-courses__inspector { position: sticky; inset-block-start: calc(var(--sf-header-h) + var(--sf-4)); }
}
/* The inspector: map sketch, stats, smooth elevation profile, the share link */
.sf-courses__pick { margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-insp__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sf-2); }
.sf-mapthumb__fail { display: grid; place-content: center; justify-items: center; gap: var(--sf-1); inline-size: 100%; block-size: 100%; color: var(--sf-ink-3); font-size: var(--sf-text-sm); text-align: center; }
.sf-insp__kind { font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sf-insp__kind--race { color: var(--sf-accent-ink); }
.sf-insp__kind--training { color: var(--sf-go-ink); }
.sf-insp__name { margin-top: 6px; font: var(--sf-w-bold) var(--sf-text-xl)/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-insp__place { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-insp__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-insp__stat { min-width: 0; padding: 10px; border-radius: 8px; background: var(--sf-page); }
.sf-insp__val { font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-insp__key { margin-top: 2px; color: var(--sf-ink-3); font-size: var(--sf-text-xs); }
.sf-insp__profile { block-size: 120px; border-radius: 8px; background: var(--sf-page); border: 1px solid var(--sf-line-soft); overflow: hidden; }
.sf-insp__profile.sf-skel { border-color: transparent; }
.sf-insp__profile svg { display: block; inline-size: 100%; block-size: 100%; }
.sf-insp__profile--none { display: grid; place-items: center; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-insp__area { fill: currentColor; fill-opacity: .16; }
.sf-insp__line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-insp__share { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sf-2); min-width: 0; }
.sf-insp__share > * { min-width: 0; }
.sf-insp__link { min-block-size: var(--sf-tap-min); background: var(--sf-page); color: var(--sf-ink-2); }
.sf-insp__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sf-2); color: var(--sf-ink-3); font-size: var(--sf-text-md); }

/* New course sheet: one sheet, three ways in (Draw · Record · Upload GPX), each straight to its tool */
.sf-newopt { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 14px; inline-size: 100%; min-block-size: 64px; padding: var(--sf-2) var(--sf-4);
  border: 0; border-top: 1px solid var(--sf-line-soft); background: none; color: var(--sf-ink); text-align: left; font: inherit; cursor: pointer; }
.sf-newopt:hover { background: var(--sf-page); }
.sf-newopt:active { background: var(--sf-sunk); }
.sf-newopt[disabled] { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-newopt__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--sf-r-md); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-newopt__icon svg { inline-size: 24px; block-size: 24px; }
.sf-newopt__label, .sf-newopt__hint { display: block; }
.sf-newopt__label { font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-newopt__hint { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-newopt > svg { inline-size: 18px; block-size: 18px; color: var(--sf-ink-3); }
.sf-sheetnote { margin: 0; padding: var(--sf-2) var(--sf-4) var(--sf-3); color: var(--sf-ink-3); font-size: var(--sf-text-xs); }

/* ── Save sheet: race or training, then the share step (SPEC §6; specs/Save Course.dc.html) ───────────────────────────
   Sits on .sf-modal-backdrop / .sf-modal (bottom sheet on a phone, centred 480 from 600px). */
.sf-save { gap: 0; }
.sf-save__grab { inline-size: 40px; block-size: 5px; margin: var(--sf-2) auto 0; border-radius: 3px; background: var(--sf-line); flex: none; }
.sf-save__head { display: grid; grid-template-columns: 52px minmax(0, 1fr) var(--sf-tap); align-items: center; gap: var(--sf-3); padding: var(--sf-3) var(--sf-2) var(--sf-2) var(--sf-4); }
.sf-save__head--text { grid-template-columns: minmax(0, 1fr) var(--sf-tap); }
.sf-save__thumb { inline-size: 52px; block-size: 52px; border-radius: var(--sf-r-md); background: var(--sf-sunk); color: var(--elev-fill); display: grid; place-items: center; }
.sf-save__thumb svg { inline-size: 36px; block-size: 36px; }
.sf-save__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-save__sub { margin: 0; color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-save__sub .sf-num { color: var(--sf-ink); font-weight: var(--sf-w-bold); }
.sf-save__close { inline-size: var(--sf-tap); block-size: var(--sf-tap); display: grid; place-items: center; border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-ink-2); cursor: pointer; }
.sf-save__close:hover { background: var(--sf-sunk); }
.sf-save__close:active { background: var(--sf-line); }
.sf-save__close:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 1px; }
.sf-save__close svg { inline-size: 24px; block-size: 24px; }
.sf-save__body { display: grid; gap: var(--sf-3); padding: var(--sf-2) var(--sf-4) var(--sf-3); overflow-y: auto; min-width: 0; }
.sf-save__group { display: grid; gap: var(--sf-2); min-width: 0; }
.sf-save__label { display: flex; align-items: center; gap: var(--sf-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink); }
.sf-save__label .tm-help { flex: none; }
.sf-save__types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-typecard { display: grid; align-content: start; gap: var(--sf-1); min-block-size: 96px; padding: var(--sf-3); text-align: start; cursor: pointer;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink); font: inherit; min-width: 0; }
.sf-typecard:hover { background: var(--sf-page); }
.sf-typecard:active { background: var(--sf-sunk); }
.sf-typecard:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-typecard:disabled { color: var(--sf-ink-3); cursor: not-allowed; background: var(--sf-sunk); }
.sf-typecard__top { display: flex; align-items: center; gap: var(--sf-2); font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-typecard__top svg { inline-size: 20px; block-size: 20px; flex: none; }
.sf-typecard--race .sf-typecard__top svg { color: var(--sf-accent); }
.sf-typecard--training .sf-typecard__top svg { color: var(--sf-go); }
.sf-typecard__desc { color: var(--sf-ink-2); font-size: var(--sf-text-xs); line-height: 1.35; }
.sf-typecard[aria-checked="true"] { border-width: 2px; padding: calc(var(--sf-3) - 0.5px); }
.sf-typecard--race[aria-checked="true"] { border-color: var(--sf-accent); background: var(--sf-accent-soft); }
.sf-typecard--training[aria-checked="true"] { border-color: var(--sf-go); background: var(--sf-go-soft); }
.sf-save__fields { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-save [hidden] { display: none; }
.sf-save__info { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-3); border-radius: var(--sf-r-sm); font-size: var(--sf-text-sm); line-height: 1.35; }
.sf-save__info svg { inline-size: 18px; block-size: 18px; flex: none; }
.sf-save__info--race { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-save__info--training { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-save__error { margin: 0; color: var(--sf-stop-ink); font-size: var(--sf-text-sm); }
.sf-save__foot { display: grid; gap: var(--sf-1); padding: var(--sf-1) var(--sf-4) var(--sf-4); }
.sf-save__foot .sf-btn--ghost { min-height: var(--sf-tap); font-weight: var(--sf-w-semi); }
.sf-save__spin { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: sf-spin .8s linear infinite; }
.sf-save__namebox { position: relative; display: grid; min-width: 0; }
.sf-save__namebox .sf-input { padding-inline-end: var(--sf-10); }
.sf-save__namespin { position: absolute; inset-inline-end: var(--sf-3); inset-block: 0; margin-block: auto; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2.5px solid var(--sf-ink-3); border-right-color: transparent; animation: sf-spin .8s linear infinite; }
.sf-save__namespin[hidden] { display: none; }
.sf-save__chips { flex-wrap: wrap; overflow: visible; }
.sf-save__chips[hidden] { display: none; }
.sf-save__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-2); }
.sf-save__url { background: var(--sf-page); color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-sm)/1.2 var(--sf-font-mono); text-overflow: ellipsis; }
.sf-save__note { margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.4; }
.sf-save__match { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sf-3); align-items: center; }
.sf-save__match .sf-save__thumb { color: var(--sf-ink-2); }
/* The venue step's list sheet (venueStepSheet.js): the near venues, New venue, its two boxes, Search all venues. */
.sf-venuestep { display: grid; gap: var(--sf-2); min-width: 0; }
@media (min-width: 600px) {
  .sf-save__grab { display: none; }
  .sf-save__head { padding-top: var(--sf-4); }
}

/* ── Share button on a course page (spikefreak and spikefan), SPEC §10 ─────────────────────────────────────────── */
.sf-sharebtn { inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); display: grid; place-items: center; flex: none; cursor: pointer;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink); }
.sf-sharebtn[hidden] { display: none; }
.sf-sharebtn:hover { background: var(--sf-sunk); }
.sf-sharebtn:active { background: var(--sf-line); transform: scale(.96); }
.sf-sharebtn:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-sharebtn:disabled { color: var(--sf-ink-3); background: var(--sf-sunk); cursor: not-allowed; }
.sf-sharebtn.is-busy { color: var(--sf-ink-3); }
.sf-sharebtn svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Draw bottom bar: Back to start, Finish & name, and the preview's Cancel / Add (SPEC §4, §5) ──────────────────── */
.sf-barbtn { min-inline-size: 0; min-block-size: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-2); padding: 0 var(--sf-3); cursor: pointer;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink);
  font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); white-space: nowrap; }
.sf-barbtn svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-barbtn:hover { background: var(--sf-sunk); }
.sf-barbtn:active { background: var(--sf-line); transform: scale(.98); }
.sf-barbtn:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-barbtn[aria-expanded="true"] { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-barbtn:disabled { border-color: var(--sf-line); background: var(--sf-sunk); color: var(--sf-ink-3); cursor: not-allowed; transform: none; }
.sf-barbtn.is-busy { pointer-events: none; color: var(--sf-ink-3); }
.sf-barbtn.is-busy::after { content: ""; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: sf-spin .7s linear infinite; }
.sf-barbtn--primary { border-color: var(--sf-accent); background: var(--sf-accent); color: var(--sf-on-accent); font-weight: var(--sf-w-bold); }
.sf-barbtn--primary:hover { border-color: var(--sf-accent-hover); background: var(--sf-accent-hover); }
.sf-barbtn--primary:active { border-color: var(--sf-accent-press); background: var(--sf-accent-press); }
.sf-barbtn--primary:disabled { border-color: var(--sf-line); background: var(--sf-sunk); color: var(--sf-ink-3); }
.sf-barbtn.is-pulse { animation: sf-ring 1.1s ease-out 1; }
@keyframes sf-ring { from { box-shadow: 0 0 0 0 var(--sf-accent); } to { box-shadow: 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: reduce) { .sf-barbtn.is-pulse { animation: none; } }
.sf-drawbar [hidden], .sf-confirmbar[hidden] { display: none; }
.sf-confirmbar { display: grid; gap: var(--sf-3); }
.sf-confirmbar__head { display: flex; align-items: baseline; gap: var(--sf-2); min-inline-size: 0; }
.sf-confirmbar__head b { flex: 1; min-inline-size: 0; font: var(--sf-w-bold) 15px/1.2 var(--sf-font-ui); }
.sf-confirmbar__head span { color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); }
.sf-confirmbar__total { color: var(--sf-ink); font: var(--sf-w-bold) 24px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-confirmbar__pair { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sf-2); }
.sf-retwrap { position: relative; display: grid; }
.sf-drawbar { position: relative; z-index: 1200; }
/* The Draw tool panel (handoff draw-and-courses 01). One set of controls, three layouts.
   Phone (<760): switch, distance, then Undo / Redo (icon-only) / Back to start / Start over, Profile, Finish & name.
   Tablet (760-1023): one bar, Undo and Redo icon-only (tooltips), the Profile row above it.
   PC (>=1024): a 340px right panel: total, Tool, Edit, Profile, Finish at the bottom (the split is in js/studio/studioUi.js). */
.sf-drawbar__panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tool tool" "dist dist" "hint hint" "edit edit" "prof prof" "fin fin"; align-items: center; gap: var(--sf-2) var(--sf-3); min-inline-size: 0; }
.sf-drawbar__panel[hidden] { display: none; }
.sf-drawbar__tool { grid-area: tool; min-inline-size: 0; }
.sf-drawbar__dist { grid-area: dist; text-align: start; }
.sf-drawbar__prof { grid-area: prof; }
.sf-drawbar__fin { grid-area: fin; }
.sf-drawbar__cap { display: none; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-drawbar__edit { grid-area: edit; display: grid; grid-template-columns: var(--sf-tap) var(--sf-tap) minmax(0, 1fr) var(--sf-tap); gap: var(--sf-2); min-inline-size: 0; }
.sf-drawbar__panel .sf-barbtn { min-block-size: var(--sf-tap); padding: 0 var(--sf-2); font-size: var(--sf-text-sm); }
.sf-drawbar__panel .sf-barbtn.sf-drawbar__fin { min-block-size: 56px; padding: 0 var(--sf-3); font-size: var(--sf-text-md); }
.sf-drawbar__edit .sf-retwrap .sf-barbtn { inline-size: 100%; }
.sf-drawbar__back { min-inline-size: 0; }
.sf-drawbar__back .sf-drawbar__lbl { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-drawbar__panel .sf-barbtn.sf-drawbar__undo, .sf-drawbar__panel .sf-barbtn.sf-drawbar__redo { padding: 0; }
.sf-drawbar__undo .sf-drawbar__lbl, .sf-drawbar__redo .sf-drawbar__lbl { display: none; }
.sf-drawbar__panel .sf-barbtn.sf-drawbar__trash { padding: 0; }
.sf-drawbar__kbd { display: none; }
.sf-drawbar__more { color: var(--sf-ink-3); }
/* The tool switch is three choices: Freehand | Follow paths | Edit (pencil). Edit, when on, wears the accent ring. */
.sf-drawbar__tool button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-1); padding: 0 var(--sf-2); }
.sf-drawbar__tool button .sf-drawbar__toolkey { display: none; }
.sf-drawbar__tool button svg { inline-size: 16px; block-size: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-drawbar__tool button.sf-drawbar__edittool[aria-selected="true"] { background: var(--sf-paper); color: var(--sf-accent-ink); box-shadow: 0 0 0 2px var(--sf-accent); }
.sf-drawbar__hint { grid-area: hint; color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-sm)/1.35 var(--sf-font-ui); }
.sf-drawbar__hint-keys { display: none; }
/* Back to start sits mid-row on a phone and a tablet: its menu hangs from the button's right edge so it stays on screen. */
.sf-drawbar__back .sf-retmenu { inset-inline-start: auto; inset-inline-end: 0; }
@media (min-width: 760px) {
  .sf-drawbar__panel { grid-template-columns: auto var(--sf-tap) var(--sf-tap) auto var(--sf-tap) minmax(0, 1fr) auto; grid-template-areas: "prof prof prof prof prof prof prof" "tool undo redo back trash dist fin"; }
  .sf-drawbar__edit { display: contents; }
  .sf-drawbar__hint { display: none; }
  .sf-drawbar__undo { grid-area: undo; }
  .sf-drawbar__redo { grid-area: redo; }
  .sf-drawbar__back { grid-area: back; }
  .sf-drawbar__trash { grid-area: trash; }
  .sf-drawbar__panel .sf-barbtn.sf-drawbar__fin { min-block-size: var(--sf-tap); }
  .sf-drawbar__dist { text-align: end; }
}
@media (min-width: 1024px) {
  .sf-drawbar__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto auto minmax(0, 1fr); grid-template-areas: "dist" "tcap" "tool" "hint" "ecap" "edit" "prof" "fin"; align-content: stretch; gap: var(--sf-3); flex: 1 1 auto; }
  .sf-drawbar__dist { text-align: start; }
  .sf-drawbar__back .sf-retmenu { inset-inline-start: 0; inset-inline-end: auto; }
  .sf-drawbar__cap { display: block; }
  .sf-drawbar__hint { display: block; }
  .sf-drawbar__hint-touch { display: none; }
  .sf-drawbar__hint-keys { display: inline; }
  .sf-drawbar__tool button { flex-direction: column; gap: 2px; }
  .sf-drawbar__tool button svg { display: none; }
  .sf-drawbar__tool button .sf-drawbar__toolkey { display: block; }
  .sf-drawbar__cap--tool { grid-area: tcap; }
  .sf-drawbar__cap--edit { grid-area: ecap; }
  .sf-drawbar__edit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-drawbar__undo, .sf-drawbar__redo, .sf-drawbar__back, .sf-drawbar__trash { grid-area: auto; }
  .sf-drawbar__undo, .sf-drawbar__redo { grid-column: span 2; }
  .sf-drawbar__back { grid-column: span 3; }
  .sf-drawbar__trash { grid-column: span 1; }
  .sf-drawbar__panel .sf-barbtn.sf-drawbar__undo, .sf-drawbar__panel .sf-barbtn.sf-drawbar__redo { padding: 0 var(--sf-2); }
  .sf-drawbar__undo .sf-drawbar__lbl, .sf-drawbar__redo .sf-drawbar__lbl { display: inline; }
  .sf-drawbar__kbd { display: inline; color: var(--sf-ink-3); font: var(--sf-w-reg) 12px/1 var(--sf-font-num); }
  .sf-drawbar__panel .sf-barbtn.sf-drawbar__fin { grid-area: fin; align-self: end; min-block-size: 56px; }
  .sf-drawbar .stn-dock-foot { border-top: 0; }
}

/* ── The Oval tool in the Draw panel (card O2; js/course/ovalControls.js). Rows are 48 on every width; gap, never margins. ─────────────────
   .sf-ovalpanel: head, tool chips, Rotate, Size (or the two custom fields), Custom shape, the warn row, the one primary.
   .sf-nudge: − / field / + and a step switch, one height. States: default · hover · pressed · focus · disabled · loading (.is-placing) · error (aria-invalid). */
.sf-ovalpanel { display: grid; gap: var(--sf-3); min-inline-size: 0; }
.sf-ovalpanel__head { display: grid; gap: var(--sf-1); }
.sf-ovalpanel__head b { font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); color: var(--sf-ink); }
.sf-ovalpanel__head span { color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-sm)/1.35 var(--sf-font-ui); }
.sf-ovalpanel .sf-seg button { min-block-size: var(--sf-tap); }
.sf-ovalpanel__body { display: grid; gap: var(--sf-3); min-inline-size: 0; }
.sf-ovalpanel.is-placing .sf-ovalpanel__body, .sf-ovalpanel.is-placing .sf-seg { opacity: .5; pointer-events: none; }
.sf-ovalpanel__primary { inline-size: 100%; min-block-size: var(--sf-tap); }
.sf-ovalpanel__primary:disabled { cursor: not-allowed; }
.sf-nudgegroup { display: grid; gap: 6px; min-inline-size: 0; }
.sf-nudgegroup[hidden], .sf-ovalfields[hidden], .sf-ovalwarn[hidden], .sf-nudge__error[hidden], .sf-ovalchip[hidden] { display: none; }
.sf-nudgegroup__label { color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-nudge { display: grid; grid-template-columns: var(--sf-tap) minmax(0, 1fr) var(--sf-tap) auto; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); min-inline-size: 0; }
.sf-nudge--lap { grid-template-columns: var(--sf-tap) minmax(0, 1fr) var(--sf-tap); }
.sf-nudge__value { text-align: center; font: var(--sf-w-bold) 22px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-nudge__btn { inline-size: var(--sf-tap); min-inline-size: 0; padding: 0; font: var(--sf-w-bold) 22px/1 var(--sf-font-num); }
.sf-nudge__field { position: relative; display: block; min-inline-size: 0; }
.sf-nudge__field .sf-input { padding-inline-end: var(--sf-6); text-align: start; }
.sf-nudge__input[aria-invalid="true"], .sf-nudge__field .sf-input[aria-invalid="true"] { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-nudge__unit { position: absolute; inset-block: 0; inset-inline-end: var(--sf-3); display: flex; align-items: center; color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-num); pointer-events: none; }
.sf-nudge__steps { grid-auto-columns: minmax(var(--sf-tap), auto); }
.sf-nudge__steps button { min-block-size: var(--sf-tap); padding: 0 var(--sf-2); font-family: var(--sf-font-num); }
.sf-nudge__error { display: flex; align-items: flex-start; gap: var(--sf-2); color: var(--sf-stop); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-nudge__error svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-ovalfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-3); min-inline-size: 0; }
.sf-ovalcustom { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); inline-size: 100%; min-block-size: var(--sf-tap); padding: 0; border: 0; background: none; color: var(--sf-ink); font: var(--sf-w-med) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer; }
.sf-ovalcustom:hover .sf-fold { border-color: var(--sf-ink-3); }
.sf-ovalcustom:active .sf-fold { background: var(--sf-sunk); }
.sf-ovalcustom:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; border-radius: var(--sf-r-sm); }
.sf-ovalcustom:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-ovalwarn { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); padding: var(--sf-2); border-radius: var(--sf-r-sm); background: var(--sf-warn-soft); color: var(--sf-warn-ink); box-shadow: inset 0 0 0 1px var(--sf-warn); }
.sf-ovalwarn__text { display: flex; align-items: center; gap: var(--sf-2); min-inline-size: 0; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-ovalwarn__text svg { flex: none; inline-size: 18px; block-size: 18px; }
.sf-ovalwarn .sf-btn { flex: none; min-block-size: var(--sf-tap); }
/* Undo, Redo and Save oval sit in the Oval head (.stp-head--oval, js/studio/studioUi.js), all 44 high, so the map's own layers button keeps the top right. */
.sf-ovalhead__save { flex: none; min-block-size: var(--sf-tap-min); padding-inline: var(--sf-3); }
.sf-ovalhead__save:disabled { cursor: not-allowed; }
.stp-head--oval .sf-iconbtn:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-ovalchip { position: absolute; z-index: 1100; inset-block-start: var(--sf-2); inset-inline-start: var(--sf-2); display: inline-flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap-map); padding: 0 var(--sf-3); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink); box-shadow: var(--sf-shadow-1), 0 0 0 1px var(--sf-line); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); }
/* The square handle on the top edge while Custom shape is on: the Edit-mode look (white, a ring in the course colour). */
.sf-ovalsq { box-sizing: border-box; inline-size: 16px; block-size: 16px; border: 3px solid var(--elev-fill); background: var(--sf-white); border-radius: 3px; }

/* ── Floating search results on a PC (SPEC §4): about 480px, top-left over the map, not full width ───────────────── */
.sf-searchpanel__away { flex: none; color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 1024px) {
  .stn-search .sf-searchpanel { position: absolute; z-index: 1300; inset-block-start: calc(100% - var(--sf-2)); inset-inline-start: var(--sf-3); inline-size: min(480px, calc(100% - 2 * var(--sf-3)));
    max-block-size: 60vh; overflow-y: auto; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); box-shadow: var(--sf-shadow-3); }
}

/* ── Home (spikefreak): section tiles, training tools card, XC Tracker row ───── */
.sf-home { display: grid; gap: var(--sf-4); min-width: 0; }
.sf-home-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--sf-3); margin: 0; padding: 0; list-style: none; }
.sf-home-tiles > li { display: flex; min-width: 0; }
.sf-home-tiles > li > .sf-home-tile { flex: 1 1 auto; }
@media (min-width: 1024px) { .sf-home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sf-home-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-2); min-width: 0; min-block-size: 128px; padding: var(--sf-4); color: var(--sf-ink); text-decoration: none; box-sizing: border-box; }
.sf-home-tile:hover { background: var(--sf-page); }
.sf-home-tile__name { display: block; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-home-tile__line { display: block; margin-top: 2px; color: var(--sf-ink-3); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.sf-home-tile__text { min-width: 0; }
.sf-iconchip { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--sf-r-md); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-iconchip svg { inline-size: 24px; block-size: 24px; }
.sf-home-label { margin: 0 0 var(--sf-2); color: var(--sf-ink-3); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.sf-home-tools__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-2); margin: 0; padding: 0; list-style: none; }
.sf-home-tools__list > li { display: flex; min-width: 0; }
.sf-home-tool { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sf-1); inline-size: 100%; min-width: 0; min-block-size: var(--sf-tap); padding: var(--sf-3) var(--sf-1); box-sizing: border-box;
  border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) 12px/1.2 var(--sf-font-ui); text-align: center; text-decoration: none; cursor: pointer; }
.sf-home-tool:hover { background: var(--sf-page); }
.sf-home-tool svg { flex: none; inline-size: 24px; block-size: 24px; color: var(--sf-accent); }
.sf-home-tool__label { display: block; min-width: 0; max-inline-size: 100%; overflow-wrap: anywhere; } /* wraps to two lines, never truncated */
.sf-home-xc { display: grid; gap: var(--sf-3); padding: var(--sf-4); }
.sf-home-xc__top { display: flex; align-items: center; gap: var(--sf-3); min-width: 0; }
.sf-home-xc__name { flex: 1; min-width: 0; margin: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-home-xc .sf-iconchip { inline-size: 40px; block-size: 40px; background: var(--sf-sunk); color: var(--sf-ink); }
.sf-home-xc--live .sf-iconchip { background: var(--sf-live); color: var(--sf-white); }
.sf-home-xc__start { min-block-size: 44px; }
.sf-home-settings { justify-self: start; }
.sf-home-xc__steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); margin: 0; padding: 0; list-style: none; color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-home-xc__steps li { display: inline-flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-home-xc__steps svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-home-xc--live { border-color: var(--sf-live); border-width: 2px; background: var(--sf-live-soft); }
.sf-home-xc--live .sf-iconchip { background: var(--sf-live); color: var(--sf-white); }
.sf-home-xc__race { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--sf-w-semi); }
.sf-home-xc__clock { font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-stop-ink); }
.sf-status svg { inline-size: 14px; block-size: 14px; }
.sf-home-xc__who { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-1); min-width: 0; }
.sf-home-health { padding: var(--sf-2) var(--sf-4); }
.sf-home-adds__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); }
.sf-home-adds__head .sf-home-label { margin: 0; }
.sf-home-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap-min); }
.sf-home-rname { color: var(--sf-ink); font-weight: var(--sf-w-bold); text-decoration: none; }
.sf-home-rname:hover { text-decoration: underline; }
.sf-home-sub { color: var(--sf-ink-2); }
.sf-home-tail:empty { display: none; }
.sf-home-tail > .sf-eyebrow { margin: 0 0 var(--sf-2); }

/* ── Detail header ──────────────────────────── [← Back][title + sub][actions][?]
   One bar for every detail page (AppShell.setDetailHeader). It is a sibling of .sf-header in the .sf-app grid and takes its slot (the shared header
   is hidden while it is up), so it runs from the rail to the right edge. Its inner row has .sf-main's max width and side padding, so Back lines up
   with the cards below and the last action with their right edge. Every control in the row is 44 tall and centred. */
html.sf-detail-route .sf-header, html.sf-detail-route .sf-pagehead { display: none; }
html.sf-detail-route .sf-main .ap-panel, .sf-main .ap-shell--home .ap-panel { padding: 0; min-height: 0; background: none; border-radius: 0; box-shadow: none; }
.sf-appbar {
  position: sticky; top: 0; z-index: var(--sf-z-header); min-width: 0; block-size: var(--sf-header-h);
  background: var(--sf-paper); border-bottom: 1px solid var(--sf-line);
}
.sf-appbar__row {
  box-sizing: border-box; block-size: 100%; max-inline-size: var(--sf-content-max); margin-inline: auto; padding-inline: var(--sf-4);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2);
}
@media (min-width: 600px) { .sf-appbar__row { padding-inline: var(--sf-8); } }
.sf-appbar__row > * { min-width: 0; }
.sf-appbar__backlink {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-1); min-block-size: var(--sf-tap-min); min-inline-size: var(--sf-tap-min); padding: 0 var(--sf-2);
  border: 0; background: none; color: var(--sf-ink); text-decoration: none; font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); cursor: pointer;
}
.sf-appbar__backlink .sf-icon { inline-size: 20px; block-size: 20px; }
.sf-appbar__backlink:hover { background: var(--sf-sunk); border-radius: var(--sf-r-sm); }
.sf-appbar__backlink > span { display: none; }
@media (min-width: 600px) { .sf-appbar__backlink > span { display: inline; } .sf-appbar__backlink { padding: 0 var(--sf-3); } }
.sf-appbar__title { display: grid; align-content: center; min-inline-size: 0; }
.sf-appbar__name {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  font: var(--sf-w-bold) var(--sf-text-lg)/var(--sf-lh-tight) var(--sf-font-ui);
}
.sf-appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-3); }
.sf-appbar__sub[hidden] { display: none; }
.sf-appbar__actions { display: flex; align-items: center; gap: var(--sf-1); }
.sf-appbar__tools { display: flex; align-items: center; gap: var(--sf-2); }
.sf-appbar__tools .sf-iconbtn, .sf-appbar__tools .sf-help { inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); }
.sf-appbar[data-bar="admin"] .tm-help { width: var(--sf-tap-min); height: var(--sf-tap-min); margin: 0; } /* the ? is 44 like the back arrow */
.sf-appbar__tools .sf-iconbtn { flex: none; }
.sf-appbar__help:empty { display: none; }
.sf-scopebtn {
  position: relative; display: inline-flex; align-items: center; gap: var(--sf-1); max-inline-size: 9rem; block-size: var(--sf-tap-min); padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink);
  font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); white-space: nowrap; cursor: pointer;
}
.sf-scopebtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-scopebtn svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-scopebtn:hover { background: var(--sf-sunk); }
.sf-scopebtn:active { transform: scale(.97); }
.sf-scopebtn[disabled] { color: var(--sf-ink-3); background: var(--sf-sunk); cursor: not-allowed; }
.sf-scopebtn[aria-busy="true"] { cursor: progress; }
.sf-scopebtn.is-error { border-color: var(--sf-stop); color: var(--sf-stop-ink); }
.sf-scopebtn:empty { display: none; }

/* ── Runner identity block ───────────────────── avatar · name · meta · status chip · note */
.sf-avatar {
  flex: none; display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: var(--sf-r-pill);
  background: var(--sf-accent-soft); color: var(--sf-accent-ink); overflow: hidden;
  font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-ui); letter-spacing: .02em; user-select: none;
}
.sf-avatar:empty { background: var(--sf-sunk); }
.sf-identity { display: flex; align-items: center; gap: var(--sf-3); min-width: 0; margin: 0 0 var(--sf-3); }
.sf-identity > * { min-width: 0; }
.sf-identity__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sf-identity__name { margin: 0; font: var(--sf-w-bold) 22px/var(--sf-lh-tight) var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-identity__meta { margin: 0; color: var(--sf-ink-2); font-size: var(--sf-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-identity__status { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; margin-top: var(--sf-1); }
.sf-identity__note { min-width: 0; flex: 1 1 auto; color: var(--sf-ink-3); font-size: var(--sf-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Compare with… (outlined, after the status chip): its own full-width row on a phone, inline from 600. States are .sf-btn's. */
.sf-identity { flex-wrap: wrap; }
.sf-identity__text { flex-basis: 0; }
.sf-identity__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); flex: 1 0 100%; }
.sf-identity__compare { flex: 1 0 100%; gap: var(--sf-1); min-block-size: var(--sf-tap-min); }
.sf-identity__compare svg { flex: none; inline-size: 18px; block-size: 18px; }
@media (min-width: 600px) { .sf-identity__actions { flex: none; } .sf-identity__compare { flex: none; } }
/* Results elsewhere (card I4): the one group that links out besides "View on spikefan". A label, then a wrapping row of secondary buttons. */
.sf-elsewhere { display: grid; gap: var(--sf-2); flex: 1 0 100%; min-width: 0; }
.sf-elsewhere__label { font: var(--sf-w-bold) var(--sf-text-sm)/var(--sf-lh-tight) var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--sf-ink-2); }
.sf-elsewhere__row { display: flex; flex-wrap: wrap; gap: var(--sf-2); min-width: 0; }
.sf-elsewhere__link { color: var(--sf-link); }
.sf-elsewhere__link svg { flex: none; inline-size: 18px; block-size: 18px; }

/* Status chip as a button: icon + word + caret. Colours come from .sf-status--<state>; 48px hit area via ::after. */
.sf-statuschip { position: relative; flex: none; height: 32px; padding: 0 var(--sf-2) 0 var(--sf-2); border: 0; cursor: pointer; font-size: var(--sf-text-sm); }
.sf-statuschip::after { content: ""; position: absolute; inset: -8px -4px; }
.sf-statuschip:hover { filter: brightness(.96); }
.sf-statuschip:active { transform: scale(.97); }
.sf-statuschip:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-statuschip:disabled { cursor: progress; color: var(--sf-ink-3); background: var(--sf-sunk); }
.sf-statuschip[aria-busy="true"] svg:first-child { animation: sf-spin .7s linear infinite; }
.sf-statuschip.is-error { box-shadow: inset 0 0 0 1.5px var(--sf-stop); }

/* ── Stat strip ──────────────────────────────── one card, equal cells (PR · Last race · Expected) */
.sf-statstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; overflow: hidden; margin: 0 0 var(--sf-3); }
.sf-statstrip__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-block-size: 88px; padding: var(--sf-2) var(--sf-3); }
.sf-statstrip__cell + .sf-statstrip__cell { border-inline-start: 1px solid var(--sf-line-soft); }
.sf-statstrip__k { font: var(--sf-w-bold) 11px/1.2 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--sf-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-statstrip__k { display: flex; align-items: center; gap: var(--sf-1); }
/* The Coaches tag on a coach-only cell: a small text pill, no icon. */
.sf-statstrip__tag { flex: none; padding: 2px 6px; border-radius: var(--sf-r-pill); background: var(--sf-accent-soft); color: var(--sf-accent-ink);
  font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.sf-statstrip__v { font: var(--sf-w-bold) 26px/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-statstrip__none { font: var(--sf-w-semi) 26px/1.1 var(--sf-font-num); color: var(--sf-ink-3); }
.sf-statstrip__d { font-size: 11px; color: var(--sf-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-statstrip__note { font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-go); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Race list ───────────────────────────────── name · time / date · distance · temp · ★ PR */
.sf-racelist { list-style: none; margin: 0; padding: 0; }
.sf-racerow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name time" "meta pr"; align-items: baseline; gap: 2px var(--sf-3);
  min-height: var(--sf-tap); padding: var(--sf-2) 0; border-top: 1px solid var(--sf-line-soft);
}
.sf-racerow:first-child { border-top: 0; }
.sf-racerow__name { grid-area: name; min-width: 0; font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-racerow__time { grid-area: time; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-racerow__meta { grid-area: meta; min-width: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-racerow__pr { grid-area: pr; justify-self: end; padding: 0 var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-go-soft); color: var(--sf-go-ink); font: var(--sf-w-bold) var(--sf-text-xs)/1.5 var(--sf-font-ui); white-space: nowrap; }
.sf-racerow:empty { display: none; }

/* ── Small anchored menu (Sort): single choice, a check on the current row, 44px rows ─────────────── */
.sf-menu { min-inline-size: 180px; padding: var(--sf-1) 0; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); box-shadow: var(--sf-shadow-2); }
.sf-menu__row { display: flex; align-items: center; gap: var(--sf-2); inline-size: 100%; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-3); border: 0; background: none; color: var(--sf-ink); font: var(--sf-w-med) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: left; cursor: pointer; }
.sf-menu__row:hover { background: var(--sf-sunk); }
.sf-menu__row[aria-checked="true"] { font-weight: var(--sf-w-bold); }
.sf-menu__check { flex: none; inline-size: 16px; text-align: center; }
.sf-menu__row:active { background: var(--sf-line-soft); }
.sf-menu__row:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-menu__row:disabled { color: var(--sf-ink-3); cursor: not-allowed; background: none; }

/* ── Action menu: a list row's ⋮ from 600px (a sheet of .sf-sheetrow on a phone, same rows, same flows) ─────────────────
   <div class="sf-menu sf-menu--actions" role="menu"> <p class="sf-menu__title">Max Arnella</p>
     <button class="sf-menu__row" role="menuitem"> <svg/> <span class="sf-menu__text"><span class="sf-menu__label">Edit runner</span><span class="sf-menu__hint">Name, grade and gender</span></span> </button>
     <div class="sf-menu__gap"></div> <button class="sf-menu__row sf-menu__row--danger" role="menuitem">…</button> </div>
   Fixed to the viewport beside its ⋮ (the page places it). States: default, hover, pressed, focus (inset ring), disabled,
   loading (.is-busy on a row: its icon spins), danger (red text, last, after an 8px gap), empty (no ⋮ is drawn). */
.sf-menu--actions { position: fixed; z-index: var(--sf-z-sheet); inline-size: min(var(--sf-menu-w), calc(100% - 2 * var(--sf-4))); max-block-size: calc(100vh - 2 * var(--sf-4)); overflow-y: auto; padding: var(--sf-1) 0; }
.sf-menu__title { margin: 0; padding: var(--sf-2) var(--sf-4) var(--sf-1); color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-menu--actions .sf-menu__row { gap: var(--sf-3); min-block-size: var(--sf-tap); padding: var(--sf-1) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-menu--actions .sf-menu__row svg { flex: none; inline-size: var(--sf-5); block-size: var(--sf-5); }
.sf-menu__text { display: flex; flex-direction: column; min-width: 0; }
.sf-menu__label { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-menu__hint { color: var(--sf-ink-3); font-size: var(--sf-text-xs); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-menu__gap { block-size: var(--sf-2); background: var(--sf-sunk); }
.sf-menu__gap + .sf-menu__row { border-top: 0; }
.sf-menu__row--danger { color: var(--sf-stop-ink); }
.sf-menu__row.is-busy svg { animation: sf-spin .7s linear infinite; }

/* ── Row status: icon + word in a list row (Runners). Inline text in a phone row; a 44px button in a table cell from 600px.
   Healthy is ink-3 with a check; limited and sick warn-ink; injured and out stop-ink. States: default, hover, pressed, focus,
   disabled, loading (.is-busy), plain text (a span) where the viewer cannot change it. */
.sf-rowstatus { display: inline-flex; align-items: center; gap: var(--sf-1); min-width: 0; color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); white-space: nowrap; }
.sf-rowstatus svg { flex: none; inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-rowstatus--warn { color: var(--sf-warn-ink); }
.sf-rowstatus--stop { color: var(--sf-stop-ink); }
button.sf-rowstatus { justify-content: flex-start; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-2); border: 0; border-radius: var(--sf-r-sm); background: none; cursor: pointer; }
button.sf-rowstatus:hover { background: var(--sf-sunk); }
button.sf-rowstatus:active { background: var(--sf-line-soft); }
button.sf-rowstatus:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
button.sf-rowstatus:disabled { color: var(--sf-ink-3); cursor: not-allowed; background: none; }
.sf-rowstatus.is-busy svg { animation: sf-spin .7s linear infinite; }

/* ── Runner page: identity stays one row, trend header, PR and best-course rows ─────────────────────── */
.sf-identity > .sf-statuschip { align-self: center; }
.rp-trendhead { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.rp-tools { flex-wrap: nowrap; }
.rp-tools .sf-seg--sm button { padding: 0 var(--sf-2); }
.rp-distwrap { position: relative; }
.rp-distchip { gap: var(--sf-1); min-height: 32px; padding: 0 var(--sf-2) 0 var(--sf-3); }
.rp-distchip svg { inline-size: 16px; block-size: 16px; }
.rp-distmenu { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0; z-index: 30; min-inline-size: 140px; }
.rp-trendword { font: var(--sf-w-bold) 14px/1 var(--sf-font-ui); }
.rp-legendrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); margin-top: var(--sf-2); }
.rp-legendrow .rc-key { flex-wrap: nowrap; margin: 0; gap: var(--sf-2); font-size: 11px; white-space: nowrap; overflow: hidden; }
.rp-tablelink { flex: none; position: relative; padding: 0 var(--sf-1); border: 0; background: none; color: var(--sf-link); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer; }
.rp-tablelink::after { content: ""; position: absolute; inset: -14px -6px; }
.rp-table-box[hidden] { display: none; }
.sf-prlist, .sf-bestlist { list-style: none; margin: 0; padding: 0; }
.sf-prrow { display: grid; grid-template-columns: 56px auto minmax(0, 1fr); align-items: center; gap: var(--sf-3); min-block-size: 44px; border-top: 1px solid var(--sf-line-soft); }
.sf-prrow:first-child { border-top: 0; }
.sf-prrow__k { font: var(--sf-w-bold) 13px/1.2 var(--sf-font-ui); }
.sf-prrow__t { font: var(--sf-w-bold) 18px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-prrow__m { min-width: 0; color: var(--sf-ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bestrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "course time" "date time"; align-items: center; column-gap: var(--sf-3); min-block-size: 52px; border-top: 1px solid var(--sf-line-soft); }
.sf-bestrow:first-child { border-top: 0; }
.sf-bestrow__course { grid-area: course; min-width: 0; font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bestrow__time { grid-area: time; font: var(--sf-w-bold) 18px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-bestrow__date { grid-area: date; color: var(--sf-ink-3); font-size: 12px; }

.om-import, .om-addrace { margin-top: var(--sf-3); }
.leaves-chip svg { flex: none; inline-size: 14px; block-size: 14px; }

/* ── Shared card parts (spikefan feed, meet results): flat card, meet head, KPI row, PR/SB flag, card footer, follow toggle ── */
.sf-card--flat { box-shadow: none; border-radius: calc(var(--sf-r-md) + 2px); overflow: hidden; min-width: 0; }
.sf-card--pad { padding: var(--sf-3) 14px; display: grid; gap: 10px; }

/* Map-backed course thumbnail (js/ui/mapThumb.js): a static snapshot, 96 on a phone, 120 from 600, 160 from 1024, top-aligned. One deliberate mark sits over a drawn picture, the 22 map badge (Course Tile.md); no credit, no other controls. */
.sf-mapthumb { position: relative; flex: none; inline-size: 96px; block-size: 96px; border-radius: var(--sf-r-xl); background: var(--sf-sunk); overflow: hidden; align-self: start; }
@media (min-width: 600px) { .sf-mapthumb { inline-size: 120px; block-size: 120px; } }
@media (min-width: 1024px) { .sf-mapthumb { inline-size: 160px; block-size: 160px; } }
.sf-mapthumb__open svg, .sf-mapthumb__open .sf-icon { inline-size: 32px; block-size: 32px; }
.sf-mapthumb__badge { position: absolute; inset-inline-end: 4px; inset-block-end: 4px; display: grid; place-items: center; inline-size: 28px; block-size: 28px; box-sizing: border-box; border: 1.5px solid var(--sf-line-strong); border-radius: 8px; background: var(--sf-paper); color: var(--sf-ink); pointer-events: none; }
.sf-mapthumb__badge svg, .sf-mapthumb__badge .sf-icon { inline-size: 16px; block-size: 16px; }
.sf-mapthumb__open { display: grid; place-items: center; inline-size: 100%; block-size: 100%; padding: 0; border: 0; background: none; color: var(--sf-ink-3); cursor: pointer; }
.sf-mapthumb__open:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: -2px; }
.sf-mapthumb__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* The Meets list row's picture (spikefan meets.js): the same snapshot at 80, top-aligned on a phone (44 and centred from 600), no badge; a track venue with no point draws the lane oval in it (js/shared/meetNextEvents.js buildTrackOval). */
/* The course card's tile (courses page): the same tile, as wide as its card and 200 high; the picture covers it. */
.sf-mapthumb--card { inline-size: 100%; block-size: auto; aspect-ratio: 1; border-radius: var(--sf-r-md); align-self: center; justify-self: center; }
.sf-mapthumb--row { inline-size: var(--sf-20); block-size: var(--sf-20); border-radius: var(--sf-r-md); align-self: start; display: grid; place-items: center; color: var(--sf-ink-3); }
.sf-meetthumb--track { inline-size: var(--sf-8); block-size: var(--sf-8); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Meets list: the bold kind tag that starts a track row's second line ("Track" / "Indoor track"); cross country has none. */
.sf-kindtag { font-weight: var(--sf-w-bold); color: var(--sf-ink-2); }
/* Next up event rows (js/shared/meetNextEvents.js): time 76 · title on one line, then "+N more events" in ink-3. Plain rows, never pills. */
.sf-nextevents { display: grid; }
.sf-nextevent { display: grid; grid-template-columns: var(--sf-time-col) minmax(0, 1fr); grid-template-areas: "time title"; column-gap: var(--sf-3); align-items: baseline; min-block-size: var(--sf-8); align-content: center; }
.sf-nextevent__time { grid-area: time; white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-nextevent__title { grid-area: title; min-width: 0; overflow-wrap: anywhere; font: var(--sf-w-reg) var(--sf-text-md)/1.25 var(--sf-font-ui); color: var(--sf-ink); }
.sf-nextevent--more .sf-nextevent__title { color: var(--sf-ink-3); }
.sf-meetrow .sf-nextevent__time { font-size: calc(var(--sf-text-md) + 1px); }
/* The Meets list row (js/shared/meetRow.js), one rule for spikefan and spikefreak. Phone: the 80 picture beside the head (name, date and place with Directions), then the pill, the first three events and the status each on their own full-width row; the text box is display:contents so they join the row grid. From 600 the picture is 44 and the text is its own column again. Wide (the card is 720 or more): picture, days, text, runners, tail, chevron. */
.sf-meetrows { container-type: inline-size; display: grid; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); box-shadow: var(--sf-shadow-1); overflow: hidden; }
.sf-meetrow { position: relative; display: grid; grid-template-columns: var(--sf-20) minmax(0, 1fr); gap: var(--sf-3); align-items: start; min-block-size: var(--sf-16); padding: var(--sf-2) var(--sf-3); border-top: 1px solid var(--sf-line-soft); color: var(--sf-ink); }
.sf-meetrow:first-child { border-top: 0; }
.sf-meetrow:hover { background: var(--sf-page); }
.sf-meetrow:active { background: var(--sf-sunk); }
.sf-meetrow__text { display: contents; grid-template-columns: minmax(0, 1fr); }
.sf-meetrow__text > * { grid-column: 1 / -1; min-width: 0; }
.sf-meetrow__text > .sf-meetrow__head { grid-column: 2; }
.sf-meetrow__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-1); min-width: 0; }
.sf-meetrow__wherebar { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-meetrow__wherebar > .sf-meetrow__where { flex: 1 1 auto; min-width: 0; }
.sf-meetrow .sf-wx-pill { justify-self: start; max-inline-size: 100%; white-space: nowrap; }
.sf-meetrow__name { display: block; padding: 0; border: 0; background: none; text-align: start; text-decoration: none; cursor: pointer; font: var(--sf-w-bold) var(--sf-text-lg)/1.25 var(--sf-font-ui); color: var(--sf-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sf-meetrow__name::after { content: ""; position: absolute; inset: 0; }
.sf-meetrow__name:focus-visible { outline: none; }
.sf-meetrow__name:focus-visible::after { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-meetrow__where { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-meetrow__team { display: block; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-meetrow__team--followed { color: var(--sf-accent-ink); }
.sf-meetrow__muted { color: var(--sf-ink-3); font-weight: var(--sf-w-reg); }
.sf-meetrow__line3 { display: flex; align-items: center; gap: var(--sf-1); min-width: 0; font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-meetrow__line3 .sf-icon { flex: none; inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-meetrow__line3--muted { color: var(--sf-ink-3); }
.sf-meetrow__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-meetrow__chip { display: inline-flex; align-items: center; gap: var(--sf-1); block-size: 28px; padding: 0 var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); white-space: nowrap; }
.sf-meetrow__chip .sf-icon { flex: none; inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-meetrow__tail { display: flex; align-items: center; gap: var(--sf-2); grid-column: 1 / -1; }
.sf-meetrow__tail:empty { display: none; }
/* Directions: 36 square, bordered, at the right end of the date and place line; the 44 hit area is the ::after (no negative margin). */
.sf-meetrow__nav { position: relative; z-index: 1; flex: none; display: grid; place-items: center; inline-size: var(--sf-9); block-size: var(--sf-9); box-sizing: border-box; border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-tile); background: var(--sf-paper); color: var(--sf-accent-ink); text-decoration: none; }
.sf-meetrow__nav::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); transform: translate(-50%, -50%); }
.sf-meetrow__nav .sf-icon, .sf-meetrow__nav svg { inline-size: 18px; block-size: 18px; }
.sf-meetrow__nav:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-meetrow__footer { grid-column: 1 / -1; position: relative; z-index: 1; display: flex; }
.sf-meetrow__chev { display: none; inline-size: var(--sf-6); block-size: var(--sf-6); color: var(--sf-ink-3); }
.sf-meetrow__only-wide { display: none; }
.sf-meetrow__date, .sf-meetrow__runners { font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-num); color: var(--sf-ink-2); }
.sf-meetrow__runners { text-align: end; }
@media (min-width: 600px) {
  .sf-mapthumb--row { inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); align-self: center; }
  .sf-meetrow { grid-template-columns: var(--sf-tap-min) minmax(0, 1fr) auto; align-items: center; }
  .sf-meetrow__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sf-meetrow__text > * { grid-column: auto; }
  .sf-meetrow__tail { grid-column: auto; }
  .sf-meetrow__tail:empty { display: flex; }
  .sf-meetrow__name { font-size: var(--sf-text-md); }
  .sf-meetrow .sf-nextevent__time { font-size: var(--sf-text-md); }
}
@container (min-width: 720px) {
  .sf-meetrow { grid-template-columns: var(--sf-tap-min) calc(var(--sf-16) * 1.5) minmax(0, 1fr) calc(var(--sf-16) * 1.4) calc(var(--sf-16) + var(--sf-2)) var(--sf-6); }
  .sf-meetrow__only-phone { display: none; }
  .sf-meetrow__only-wide { display: block; }
  .sf-meetrow__chev { display: block; }
}
/* A card row (the coach's Meets near you: slots.actions and slots.fold): the row is its own card, not a hairline in a card. Phone: picture, text, ring, and the actions in one 2-column row under them
   (48). From 600 the actions sit in the row before the ring (44). From 1024 the days get their own column. The tail (Directions) is not drawn on these rows. */
.sf-meetrow--card { grid-template-columns: var(--sf-20) minmax(0, 1fr) var(--sf-tap-min); border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); padding: var(--sf-3); }
.sf-meetrow--card .sf-meetrow__tail { display: none; }
.sf-meetrow--card .sf-meetrow__text > .sf-meetrow__head { grid-column: 2; }
.sf-meetrow__actions { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-meetrow__actions .sf-btn { min-height: var(--sf-tap); }
.sf-meetrow__ring { position: relative; z-index: 1; grid-column: 3; grid-row: 1; display: grid; place-items: center; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.sf-meetrow__fold { grid-column: 1 / -1; position: relative; z-index: 1; }
.sf-meetrow__fold[hidden] { display: none; }
.sf-meetfold { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-4); margin-block-start: var(--sf-3); padding-block-start: var(--sf-3); border-block-start: 1px solid var(--sf-line-soft); }
.sf-meetfold__col { display: grid; gap: var(--sf-2); align-content: start; min-width: 0; }
.sf-meetfold__row { display: grid; grid-template-columns: calc(var(--sf-16) + var(--sf-3)) minmax(0, 1fr); gap: var(--sf-3); align-items: baseline; }
.sf-meetfold__time { white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-num); color: var(--sf-ink); }
.sf-meetfold__title { min-width: 0; overflow-wrap: anywhere; font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-meetfold__more { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-meetfold__park { margin: 0; font-size: var(--sf-text-sm); color: var(--sf-ink-2); overflow-wrap: anywhere; }
.sf-meetfold .sf-linkrow { min-block-size: var(--sf-tap-min); }
@media (min-width: 600px) {
  .sf-meetrow--card { grid-template-columns: var(--sf-tap-min) minmax(0, 1fr) auto var(--sf-tap-min); }
  .sf-meetrow__actions { grid-column: auto; grid-row: auto; display: flex; align-items: center; }
  .sf-meetrow__actions .sf-btn { min-height: var(--sf-tap-min); }
  .sf-meetrow__ring { grid-column: auto; grid-row: auto; }
  .sf-meetfold { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sf-meetrow--card { grid-template-columns: var(--sf-tap-min) calc(var(--sf-16) + var(--sf-12)) minmax(0, 1fr) auto var(--sf-tap-min); }
  .sf-meetrow--card .sf-meetrow__only-phone { display: none; }
  .sf-meetrow--card .sf-meetrow__only-wide { display: block; }
  .sf-meetrow--card .sf-meetrow__runners { display: none; }
}
/* Meets near you (js/officeMeets.js): one dashed panel on the sunk ground that holds the eyebrow, its line and the card rows. */
.sf-nearpanel { display: grid; gap: var(--sf-3); padding: var(--sf-3); border: 1.5px dashed var(--sf-line-strong); border-radius: var(--sf-r-lg); background: var(--sf-sunk); }
.sf-nearpanel__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); }
.sf-nearpanel__text { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-nearpanel__head .sf-eyebrow { margin: 0; color: var(--sf-ink-2); }
/* Passed meets sheet (js/officeMeets.js openPassed): name and "date · passed Oct 29" on the left, Restore on the right, one 56 row. */
.sf-passedrow { display: flex; align-items: center; gap: var(--sf-3); min-block-size: 56px; padding: var(--sf-2) 0; border-bottom: 1px solid var(--sf-line-soft); }
.sf-passedrow__text { display: grid; gap: var(--sf-1); flex: 1 1 auto; min-width: 0; }
.sf-passedrow__name { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-passedrow__sub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); font-variant-numeric: tabular-nums; }
.sf-nearpanel__sub { margin: 0; font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
/* Meet page column: under the full-width top bar, ONE column that the head card, tab row, import row and list cards all start and end on. */
.sf-meetcol { box-sizing: border-box; inline-size: 100%; margin-inline: auto; padding: 0; display: grid; gap: var(--sf-3); align-content: start; }
@media (min-width: 600px) { .sf-meetcol { gap: var(--sf-4); } }
.sf-meetcol > * { min-inline-size: 0; }
.sf-meetcol .sf-tabs { margin-inline: 0; padding-inline: 0; }

/* Last meet: head */
/* The one meet head (js/shared/meetResultsView.js buildMeetHead): inset 16, tile | text 16 apart, the weather row 12 under them. Relative: the open link's ::after covers the head (Home). */
.sf-meethead { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sf-3) var(--sf-4); padding: 16px; align-items: start; }
.sf-meethead--nothumb { grid-template-columns: minmax(0, 1fr); }
.sf-meethead--trail { grid-template-columns: auto minmax(0, 1fr) auto; }
.sf-meethead--nothumb.sf-meethead--trail { grid-template-columns: minmax(0, 1fr) auto; }
.sf-meethead__thumb:not(.sf-mapthumb) { inline-size: 64px; block-size: 64px; border-radius: var(--sf-r-md); background: var(--sf-sunk); display: grid; place-items: center; }
.sf-meethead__text { min-width: 0; }
.sf-meethead__meta { font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-accent-ink); overflow-wrap: anywhere; }
.sf-meethead__name { margin-top: var(--sf-1); font: var(--sf-w-bold) 19px/1.15 var(--sf-font-ui); overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* 3 lines at 360, 2 from 600; the title attribute carries the full name */
@media (min-width: 600px) { .sf-meethead__name { font-size: 22px; -webkit-line-clamp: 2; } }
.sf-meethead__sub { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sf-2); row-gap: var(--sf-1); margin-top: var(--sf-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); overflow-wrap: anywhere; }
.sf-meethead__chip { box-sizing: border-box; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; min-block-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-ink); color: var(--sf-paper); font: var(--sf-w-bold) var(--sf-text-xs)/1.3 var(--sf-font-ui); }
.sf-meethead__sub .sf-num { font: var(--sf-w-bold) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
/* Row 2 of the head (handoff_meet_page_folds 01), under the tile at the card's inset: the place, a dot and the length (bold figures) flow as one wrapping run, Directions 44 at the right end, centred on the row */
.sf-meethead__courseline { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sf-3); min-width: 0; }
.sf-meethead__place { flex: 1 1 auto; min-width: 0; font: var(--sf-w-reg) var(--sf-text-ctl)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); overflow-wrap: anywhere; }
.sf-meethead__dir { flex: none; border-radius: var(--sf-r-tile); } /* the 44 Directions button, radius 8 as drawn in Meet Folds 2a */
.sf-meethead__course, .sf-meethead__venue { overflow-wrap: anywhere; }
.sf-meethead__len { white-space: nowrap; }
.sf-meethead__dot { margin-inline-end: var(--sf-2); color: var(--sf-ink-3); }
/* A race row's distance line when the meet's races run different courses (handoff_meet_page_followup 03): the distance 15 bold, a dot, the course name 14 ink-2 on one line with an ellipsis */
.sf-racedist { display: flex; align-items: baseline; gap: var(--sf-2); min-width: 0; font: var(--sf-w-reg) var(--sf-text-ctl)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-racedist__len { flex: none; font: var(--sf-w-bold) var(--sf-text-nav)/1.3 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); white-space: nowrap; }
.sf-racedist__dot { flex: none; color: var(--sf-ink-3); }
.sf-racedist__course { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-meethead__len .sf-num { font: var(--sf-w-bold) var(--sf-text-nav)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
/* The date line leads the title: 12 bold uppercase, the accent ink (a track program's dates are the same line as a cross-country kicker) */
.sf-meethead__dates { font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-accent-ink); overflow-wrap: anywhere; }
.sf-meethead__kind { font-weight: var(--sf-w-bold); color: var(--sf-ink); }
/* The head that opens a page (Home's Last meet): the name is the one link, its ::after covers the whole head (no nested link, no click handler). The tile's map button sits above it
   and stays its own target. The trail (a bare chevron, aria-hidden) is centred on the row. Hover, pressed and focus show on the whole head. */
.sf-meethead__open { color: inherit; text-decoration: none; }
.sf-meethead__open::after { content: ""; position: absolute; inset: 0; }
.sf-meethead__open:focus-visible { outline: none; }
.sf-meethead:has(.sf-meethead__open:hover) { background: var(--sf-page); }
.sf-meethead:has(.sf-meethead__open:active) { background: var(--sf-sunk); }
.sf-meethead:has(.sf-meethead__open:focus-visible) { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-meethead .sf-mapthumb__open { position: relative; z-index: 1; }
.sf-meethead__trail { align-self: center; display: grid; place-items: center; color: var(--sf-ink-3); }
.sf-meethead__trail .sf-icon { inline-size: 20px; block-size: 20px; }
@media (min-width: 1024px) { .sf-meethead__trail .sf-icon { inline-size: 24px; block-size: 24px; } }
/* The weather pill's own row under the tile and the text, full width, the pill at its natural size (frames 1h, 1j, 1l, 1q) */
.sf-meethead__wxrow { grid-column: 1 / -1; display: flex; min-width: 0; }

/* KPI row: equal cells, 1px dividers */
.sf-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--sf-line-soft); }
.sf-kpi { padding: var(--sf-3); min-width: 0; }
.sf-kpi + .sf-kpi { border-inline-start: 1px solid var(--sf-line-soft); }
.sf-kpi__v { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; font: var(--sf-w-bold) 28px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-kpi__u { font: var(--sf-w-bold) 16px/1 var(--sf-font-num); }
.sf-kpi__v--go { color: var(--sf-go); }
.sf-kpi__v--accent { color: var(--sf-accent-ink); }
.sf-kpi__l { margin-top: 3px; font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }

/* Pace change charts (js/ui/paceChangeChart.js): 1a bars on a scale, 1b runners per range. Up / right = faster. */
.sf-pcc { display: grid; gap: var(--sf-3); padding: var(--sf-3) var(--sf-4); border-top: 1px solid var(--sf-line-soft); min-width: 0; }
.sf-pcc__summary { margin: 0; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-pcc__chart { display: grid; grid-template-columns: calc(var(--sf-8) + var(--sf-2) / 4) minmax(0, 1fr); gap: var(--sf-1); }
.sf-pcc__axis, .sf-pcc__plot { position: relative; block-size: calc(var(--sf-12) * 2); }
.sf-pcc__tick { position: absolute; inset-inline-end: var(--sf-1); transform: translateY(-50%); font: var(--sf-w-semi) var(--sf-text-xs)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-3); }
.sf-pcc__plot { display: flex; gap: calc(var(--sf-1) / 2); }
.sf-pcc__grid, .sf-pcc__zero, .sf-pcc__median { position: absolute; inset-inline: 0; block-size: 0; pointer-events: none; }
.sf-pcc__grid { border-top: 1px solid var(--sf-line-soft); }
.sf-pcc__zero { border-top: 1px solid var(--sf-ink-2); }
.sf-pcc__median { border-top: 1px dashed var(--sf-ink-2); }
.sf-pcc__median-label { position: absolute; inset-inline-end: 0; inset-block-end: var(--sf-1); padding-inline: var(--sf-1); background: var(--sf-paper); font: var(--sf-w-semi) var(--sf-text-xs)/1 var(--sf-font-num); color: var(--sf-ink-2); }
.sf-pcc__col { position: relative; flex: 1 1 0; min-inline-size: var(--sf-1); padding: 0; border: 0; background: transparent; cursor: pointer; }
.sf-pcc__col:hover { background: var(--sf-sunk); }
.sf-pcc__col:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -1px; }
.sf-pcc__bar { position: absolute; inset-inline: 0; min-block-size: 1px; border-radius: 1px; }
.sf-pcc__bar.is-faster { background: var(--sf-go); }
.sf-pcc__bar.is-slower { background: var(--sf-ink-3); }
.sf-pcc__bar.is-flat { background: var(--sf-ink-2); }
.sf-pcc__cap { position: absolute; inset-inline: 0; block-size: var(--sf-2); background: var(--sf-paper); }  /* off-scale arrow drawn inside the bar end, card colour on the bar */
.sf-pcc__cap.is-up { clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-block-start: var(--sf-1); }
.sf-pcc__cap.is-down { clip-path: polygon(0 0, 100% 0, 50% 100%); margin-block-end: var(--sf-1); }
.sf-pcc__col.is-selected .sf-pcc__bar { box-shadow: 0 0 0 2px var(--sf-paper), 0 0 0 4px var(--sf-ink); }
.sf-pcc__detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-1) var(--sf-3); align-items: center; padding: var(--sf-3); border-radius: var(--sf-r-md); background: var(--sf-sunk); }
.sf-pcc__detail[hidden], .sf-pcc__list[hidden] { display: none; }
.sf-pcc__detail-head { display: grid; min-width: 0; }
.sf-pcc__detail-name { font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-pcc__detail-race { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-pcc__detail-num { font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.sf-pcc__detail-num.is-faster { color: var(--sf-go-ink); }
.sf-pcc__detail-line { grid-column: 1 / -1; font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-pcc__runner { grid-column: 1 / -1; display: inline-flex; align-items: center; min-block-size: var(--sf-tap); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); color: var(--sf-link); text-decoration: none; }
.sf-pcc__foot { display: flex; justify-content: space-between; gap: var(--sf-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-pcc__faster { color: var(--sf-go-ink); }
.sf-pcc__slower { color: var(--sf-ink-2); }
.sf-pcc__buckets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sf-1); }
.sf-pcc__bcol { display: grid; grid-template-rows: auto calc(var(--sf-12) * 1.75) auto; gap: var(--sf-1); justify-items: center; min-block-size: var(--sf-tap); padding: var(--sf-1) 0; border: 0; border-radius: var(--sf-r-sm); background: transparent; color: var(--sf-ink); cursor: pointer; }
.sf-pcc__bcol:hover:not(:disabled) { background: var(--sf-sunk); }
.sf-pcc__bcol:disabled { cursor: default; color: var(--sf-ink-3); }
.sf-pcc__bcol:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-pcc__count { font: var(--sf-w-bold) var(--sf-text-lg)/1 var(--sf-font-num); }
.sf-pcc__track { display: flex; align-items: flex-end; inline-size: 100%; padding-inline: var(--sf-2); }
.sf-pcc__bbar { inline-size: 100%; min-block-size: 1px; border-radius: var(--sf-r-sm) var(--sf-r-sm) 0 0; }
.sf-pcc__bcol.is-faster .sf-pcc__bbar { background: var(--sf-go); }
.sf-pcc__bcol.is-slower .sf-pcc__bbar { background: var(--sf-ink-3); }
.sf-pcc__bcol.is-selected .sf-pcc__bbar { box-shadow: 0 0 0 2px var(--sf-paper), 0 0 0 4px var(--sf-ink); }
.sf-pcc__blabel { font: var(--sf-w-semi) var(--sf-text-xs)/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); text-align: center; }
.sf-pcc__list { display: grid; gap: var(--sf-2); }
.sf-pcc__list-head { font: var(--sf-w-bold) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-pcc__chips { display: flex; flex-wrap: wrap; gap: var(--sf-2); }
.sf-pcc__chip { display: inline-flex; align-items: center; min-block-size: var(--sf-tap); padding: 0 var(--sf-3); border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); text-decoration: none; }
.sf-pcc__chip:hover { background: var(--sf-sunk); }
.sf-pcc__chip:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-pcc-home { display: grid; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4) 0; border-top: 1px solid var(--sf-line-soft); min-width: 0; }
.sf-pcc-home .sf-pcc { padding: 0; border-top: 0; }
/* The pace block sits in the head card under the KPI row (handoff_meet_page_shared 02), the same on both sites; none under 3 runners */
.rs-chart:empty { display: none; }
.rs-chart > .rs-pcc { padding-block-end: var(--sf-3); }
.sf-pcc__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.rs-chg-empty { margin: 0; padding: var(--sf-3) 0; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }

/* Race filter button: a label (filter) and a count cell (jump), two targets in one 48px shape. aria-pressed marks the selected label. */
.sf-racebtn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; min-width: 0; block-size: var(--sf-tap); overflow: hidden;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink);
}
.sf-racebtn--solo { grid-template-columns: minmax(0, 1fr); }
.sf-racebtn--replay { grid-template-columns: minmax(8ch, 1fr) auto auto; }
.sf-racebtn__label {
  min-width: 0; min-inline-size: 8ch; display: flex; align-items: center; padding: 0 var(--sf-2) 0 var(--sf-3); border: 0; background: none; color: inherit; cursor: pointer;
  font: var(--sf-w-semi) 15px/1 var(--sf-font-ui); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; touch-action: manipulation;
}
.sf-racebtn__label:hover { background: var(--sf-page); }
.sf-racebtn__label:active { background: var(--sf-sunk); }
.sf-racebtn__label:focus-visible, .sf-racebtn__count:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: -3px; }
.sf-racebtn__count {
  flex: none; min-inline-size: var(--sf-tap); display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 var(--sf-2);
  border: 0; border-inline-start: 1px solid var(--sf-line); background: var(--sf-page); color: var(--sf-ink-3); cursor: pointer;
  font: var(--sf-w-bold) 16px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; touch-action: manipulation;
}
/* Replay: a link to the race's live page, its own target between the label and the count. */
.sf-racebtn__replay {
  flex: none; min-inline-size: var(--sf-tap-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-1); padding: 0;
  border-inline-start: 1px solid var(--sf-line); background: none; color: var(--sf-accent-ink); text-decoration: none; cursor: pointer;
  font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); touch-action: manipulation;
}
.sf-racebtn__replay svg { inline-size: 18px; block-size: 18px; flex: none; }
.sf-racebtn__replay-word { display: none; }
@media (min-width: 600px) {
  .sf-racebtn__replay { min-inline-size: var(--sf-tap); padding: 0 var(--sf-3); }
  .sf-racebtn__replay-word { display: inline; }
}
.sf-racebtn__replay:hover { background: var(--sf-page); }
.sf-racebtn__replay:active { background: var(--sf-sunk); }
.sf-racebtn__replay:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: -3px; }
.sf-racebtn__count svg { inline-size: 14px; block-size: 14px; stroke-width: 2.5; }
.sf-racebtn__count:hover { background: var(--sf-sunk); }
.sf-racebtn__count:active { background: var(--sf-line-soft); }
.sf-racebtn__count:disabled, .sf-racebtn__count.is-plain { background: none; border-inline-start-color: transparent; cursor: default; }
.sf-racebtn.is-on { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-racebtn.is-on .sf-racebtn__label { font-weight: var(--sf-w-bold); }
.sf-racebtn.is-on .sf-racebtn__count { color: var(--sf-accent-ink); }
.sf-racebtn.is-loading .sf-racebtn__label { cursor: progress; }
.sf-racebtn:has(.sf-racebtn__label:disabled) { opacity: .5; }
.sf-racebtn.is-error { border-color: var(--sf-stop); }

/* Live dot: a race is being timed now. Always beside the word "Live" (status is icon + word); the pulse stops for reduced motion. */
.sf-livedot { inline-size: var(--sf-2); block-size: var(--sf-2); flex: none; border-radius: 50%; background: var(--sf-stop); animation: sf-pulse 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .sf-livedot { animation: none; } }

/*
 * Live race card: the race being timed now. A band (LIVE pill, race and actual start, "10 of ours · 2 timers", the race clock), our runners
 * by latest split, one Watch button. Home's Live now and the meet page's Live card. The Watch button is .sf-btn.sf-btn--danger and has its
 * own states. Card states: default, .is-loading (no view yet: grey clock, skeleton rows), .is-error (the view stopped answering: neutral
 * border, the last rows stay), empty (.sf-livecard__empty: no runner has a split yet). Disabled does not apply: the card is always a link.
 */
.sf-livecard { background: var(--sf-paper); border: 1.5px solid var(--sf-stop); border-radius: calc(var(--sf-r-md) + 2px); overflow: hidden; min-width: 0; }
.sf-livecard__band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sf-3); align-items: center; padding: var(--sf-3) 14px; background: var(--sf-stop-soft); }
.sf-livecard__text { min-width: 0; }
.sf-livecard__title { margin: 0; font: var(--sf-w-bold) 15px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-livecard__sub { font-size: var(--sf-text-sm); color: var(--sf-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-livecard__clock { font: var(--sf-w-bold) 26px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-stop-ink); }
.sf-livecard__label { padding: var(--sf-3) 14px var(--sf-1); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-livecard__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(4em, auto) minmax(3em, auto) minmax(4.5em, auto); gap: 10px; align-items: center; min-block-size: 40px; padding: 0 14px; border-top: 1px solid var(--sf-line-soft); }
.sf-livecard__row:first-child { border-top: 0; }
.sf-livecard__place { font: var(--sf-w-bold) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-3); }
.sf-livecard__name { font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-livecard__split { font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); white-space: nowrap; text-align: end; }
.sf-livecard__time { font: var(--sf-w-bold) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; text-align: end; }
.sf-livecard__proj { font: var(--sf-w-semi) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); text-align: end; }
.sf-livecard__proj:not(:empty)::before { content: "\2192\00a0"; color: var(--sf-ink-3); }
.sf-livecard__empty { margin: 0; padding: var(--sf-3) 14px 0; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-livecard__watch { margin: var(--sf-3) 14px 14px; inline-size: calc(100% - 28px); min-block-size: var(--sf-tap); }
.sf-livecard.is-loading .sf-livecard__clock { color: var(--sf-ink-3); }
.sf-livecard__skel { display: grid; gap: var(--sf-2); padding: var(--sf-3) 14px 0; }
.sf-livecard__skel > .sf-skel { block-size: var(--sf-4); inline-size: 100%; }
.sf-livecard__skel > .sf-skel:nth-child(2) { inline-size: 70%; }
.sf-livecard.is-error { border-color: var(--sf-line-strong); }
.sf-livecard.is-error .sf-livecard__band { background: var(--sf-sunk); }
.sf-livecard.is-error .sf-livecard__clock { color: var(--sf-ink-2); }

/*
 * Live link: a full-width strip that opens a race's live page ("● Live now · Varsity Girls  14:21  Watch ›"). One 48px target.
 * States: default, hover, pressed, focus, .is-loading (clock not known yet: grey), .is-error (could not refresh: neutral border), disabled
 * ([aria-disabled="true"]: no live page to open, no pointer). Empty does not apply: it is drawn only while a race is live.
 */
.sf-livelink {
  display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); padding: 0 var(--sf-3); min-width: 0;
  border: 1.5px solid var(--sf-stop); border-radius: var(--sf-r-md); background: var(--sf-stop-soft); color: var(--sf-stop-ink); text-decoration: none;
  font: var(--sf-w-bold) 15px/1.2 var(--sf-font-ui); touch-action: manipulation;
}
.sf-livelink__text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-livelink__clock { flex: none; font: var(--sf-w-bold) 18px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-livelink__go { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.sf-livelink__go svg { inline-size: 16px; block-size: 16px; }
.sf-livelink:hover { background: var(--sf-paper); }
.sf-livelink:active { background: var(--sf-sunk); }
.sf-livelink:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-livelink.is-loading .sf-livelink__clock { color: var(--sf-ink-3); }
.sf-livelink.is-error { border-color: var(--sf-line-strong); background: var(--sf-sunk); color: var(--sf-ink-2); }
.sf-livelink[aria-disabled="true"] { border-color: var(--sf-line-strong); background: var(--sf-sunk); color: var(--sf-ink-3); pointer-events: none; }

/*
 * Race line: a row of a meet's race list that is not a finished race with its table (that one is .sf-racebtn). Live (opens the live page:
 * name, "Live · 10 of ours", the clock, Watch), Final without its table yet (name, Final, Replay), Waiting (name, "12 of ours", time + clock icon).
 * Same 48px shape and border as .sf-racebtn. States: default, hover and pressed (links only), focus, .is-loading (live, clock not known),
 * .is-error (live, could not refresh), disabled ([aria-disabled="true"]), empty does not apply (a line is drawn only for a race).
 */
.sf-raceline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); min-width: 0; min-block-size: var(--sf-tap); padding: var(--sf-1) var(--sf-3) var(--sf-1) 14px;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink); text-decoration: none; touch-action: manipulation;
}
.sf-raceline__who { display: grid; gap: 2px; min-width: 0; }
.sf-raceline__name { font: var(--sf-w-semi) 15px/1.2 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-raceline__sub { display: inline-flex; align-items: center; gap: var(--sf-1); min-width: 0; font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); white-space: nowrap; }
.sf-raceline__end { display: inline-flex; align-items: center; gap: var(--sf-2); font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); color: var(--sf-ink-2); white-space: nowrap; }
.sf-raceline__end svg { inline-size: 16px; block-size: 16px; flex: none; }
.sf-raceline__time { font: var(--sf-w-semi) 14px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-raceline__clock { font: var(--sf-w-bold) 18px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-raceline__go { display: inline-flex; align-items: center; gap: 2px; }
a.sf-raceline:hover { background: var(--sf-page); }
a.sf-raceline:active { background: var(--sf-sunk); }
a.sf-raceline:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: -3px; }
.sf-raceline--live { border-color: var(--sf-stop); background: var(--sf-stop-soft); }
.sf-raceline--live .sf-raceline__sub, .sf-raceline--live .sf-raceline__end { color: var(--sf-stop-ink); }
a.sf-raceline--live:hover { background: var(--sf-paper); }
.sf-raceline--final .sf-raceline__end { color: var(--sf-go-ink); }
.sf-raceline.is-loading .sf-raceline__clock { color: var(--sf-ink-3); }
.sf-raceline.is-error { border-color: var(--sf-line-strong); background: var(--sf-sunk); }
.sf-raceline.is-error .sf-raceline__sub, .sf-raceline.is-error .sf-raceline__end { color: var(--sf-ink-2); }
.sf-raceline[aria-disabled="true"] { color: var(--sf-ink-3); pointer-events: none; }

.sf-flag { display: inline-grid; place-items: center; block-size: 24px; padding: 0 8px; border-radius: var(--sf-r-sm); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); }
.sf-flag--none { display: none; }
.sf-flag--pr { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-flag--sb { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-chip--pr, .sf-chip--sb { display: inline-flex; align-items: center; gap: var(--sf-1); block-size: var(--sf-6); padding: 0 var(--sf-2); border-radius: var(--sf-r-pill); font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); white-space: nowrap; }
.sf-chip--pr .sf-icon, .sf-chip--sb .sf-icon { inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-chip--pr { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-chip--sb { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }

/* Footer: two 48px link cells */
.sf-cardfoot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--sf-line-soft); }
.sf-cardfoot__cell {
  min-block-size: var(--sf-tap); display: grid; place-items: center; padding: 0 var(--sf-2);
  border: 0; background: none; cursor: pointer; text-decoration: none;
  font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); color: var(--sf-link);
}
.sf-cardfoot__cell + .sf-cardfoot__cell { border-inline-start: 1px solid var(--sf-line-soft); }
.sf-cardfoot__cell:hover { background: var(--sf-accent-soft); }
.sf-cardfoot__cell:active { background: var(--sf-sunk); }
.sf-cardfoot__cell:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: -3px; }

.sf-meethead--sm { grid-template-columns: 48px minmax(0, 1fr); padding: 12px 14px; }
.sf-meethead--sm.sf-meethead--nothumb { grid-template-columns: minmax(0, 1fr); }
.sf-meethead--sm .sf-meethead__name { font-size: 17px; margin-top: 3px; }
.sf-meethead__thumb--sm { inline-size: 48px; block-size: 48px; border-radius: var(--sf-r-sm); }
.sf-meethead--sm ~ .sf-kpis .sf-kpi__v { font-size: 24px; }

/* ── Logistics fold: links + parking, one component for spikefan and spikefreak (js/shared/meetLogistics.js). Closed by default.
   States: closed, open (ring turns, via .sf-fold), hover, pressed, focus. No loading / error / empty: it is absent when there is nothing to show. */
.sf-logi { border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); overflow: hidden; min-width: 0; }
.sf-logi__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: var(--sf-1) var(--sf-4); box-sizing: border-box; border: 0; background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; touch-action: manipulation; }
.sf-logi__head--two { min-block-size: 64px; }
.sf-logi__head:hover { background: var(--sf-page); }
.sf-logi__head:active { background: var(--sf-sunk); }
.sf-logi__titles { display: grid; gap: 1px; min-width: 0; }
.sf-logi__title { display: inline-flex; align-items: center; gap: var(--sf-2); font: var(--sf-w-bold) 17px/1.2 var(--sf-font-ui); }
.sf-logi__sum { display: flex; align-items: flex-start; gap: var(--sf-1); font: var(--sf-w-reg) 14px/1.3 var(--sf-font-ui); color: var(--sf-ink-2); overflow-wrap: anywhere; }
.sf-logi__sum .sf-icon { flex: none; inline-size: 16px; block-size: 16px; margin-block-start: 1px; }
.sf-logi__body { display: grid; gap: var(--sf-3); padding: 0 12px 12px; }
.sf-logi__body--flush { gap: 0; padding: 0; }
.sf-logi__body[hidden] { display: none; }
/* spikefreak's Schedule fold (js/shared/meetProgram.js buildEventsCard `fold`): the same fold card, its rows in one list box like the links (frame 1m) */
.sf-evcard--fold .sf-logi__body > .sf-evlist { border-block-start: 1px solid var(--sf-line-soft); background: var(--sf-paper); overflow: hidden; }
.sf-evcard--fold .sf-logi__body > .sf-evcard__tools { border-block-end: 0; }

/* ── Tool fold head (tools/toolKit.js buildFoldHead, called by the shared tools' fold and the calculators' band): the standard fold's head on a tool page. The whole row is the button
   (56 high, 64 with a subline); title flush left, 17 bold, one line; subline 13 muted, one line; the .sf-fold ring at the right, 12 in from the card edge, the same place open and closed.
   Open turns the ring through [aria-expanded] like every fold. States: closed, open, hover, pressed, focus (the ring rule above), empty (is-empty mutes the title). */
.sf-foldhead { display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: var(--sf-2) var(--sf-3) var(--sf-2) var(--sf-4); box-sizing: border-box; border: 0; background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; touch-action: manipulation; }
.sf-foldhead--two { min-block-size: 64px; }
.sf-foldhead:hover { background: var(--sf-page); }
.sf-foldhead:active { background: var(--sf-sunk); }
.sf-foldhead__text { display: grid; flex: 1 1 0; gap: 1px; min-width: 0; }
.sf-foldhead__title, .sf-foldhead__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-foldhead__title { font: var(--sf-w-bold) 17px/1.2 var(--sf-font-ui); color: var(--sf-ink); }
.sf-foldhead__title.is-empty { color: var(--sf-ink-3); }
.sf-foldhead__sub { font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-3); }
.sf-foldhead__sub .sf-heatline { min-block-size: 0; max-inline-size: 100%; white-space: nowrap; }
.sf-linklist { display: flex; flex-direction: column; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-linkrow { display: flex; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-tap); padding: 0 14px; color: var(--sf-ink); text-decoration: none; font: var(--sf-w-semi) 15px/1.2 var(--sf-font-ui); touch-action: manipulation; }
.sf-linkrow + .sf-linkrow { border-block-start: 1px solid var(--sf-line-soft); }
.sf-linkrow:hover { background: var(--sf-page); }
.sf-linkrow:active { background: var(--sf-sunk); }
.sf-linkrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-linkrow__ico { flex: none; inline-size: 20px; block-size: 20px; color: var(--sf-ink-2); }
.sf-linkrow__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sf-linkrow__out { flex: none; inline-size: 16px; block-size: 16px; color: var(--sf-ink-3); }
.sf-parking { display: grid; padding: 0 var(--sf-2) 0 var(--sf-3); box-sizing: border-box; border-radius: var(--sf-r-md); background: var(--sf-sunk); }
.sf-parking__head { display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: 0; box-sizing: border-box; border: 0; background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; touch-action: manipulation; }
.sf-parking__head:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-parking__badge { display: grid; flex: none; place-items: center; inline-size: 28px; block-size: 28px; box-sizing: border-box; border: 2px solid var(--sf-ink); border-radius: var(--sf-r-sm); background: var(--sf-paper); font: var(--sf-w-bold) 16px/1 var(--sf-font-ui); }
.sf-parking__label { flex: 1; min-width: 0; font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-parking__text { padding-block-end: var(--sf-3); padding-inline-start: calc(28px + var(--sf-3)); font: var(--sf-w-reg) 15px/1.45 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-parking__text[hidden] { display: none; }
.sf-parking__link { color: var(--sf-link); text-decoration: underline; }
.sf-parking__link:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }

/* ── Track program events (js/shared/meetProgram.js), one component for spikefan and spikefreak: the events card and its rows.
   Row: time 76 · title + line 2 · Done / Up next · chevron; 56 high (48 Done), full bleed in the card. States: default, hover and pressed
   (a row that opens its event page), focus, Done (dimmed), Up next (accent-soft + 3px accent bar), empty (calendar only: one line + Check again).
   Loading and error are the page's (races.js skeleton and error box). */
.sf-evcard { display: grid; min-width: 0; }
.sf-evcard__head { display: flex; align-items: center; gap: var(--sf-2); min-block-size: 56px; padding: 0 14px; border-block-end: 1px solid var(--sf-line); }
.sf-evcard__title { flex: 1; min-width: 0; margin: 0; font: var(--sf-w-bold) 17px/1.2 var(--sf-font-ui); }
.sf-evcard__count { flex: none; font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.sf-evcard__tools { display: grid; gap: var(--sf-3); padding: 12px 14px; border-block-end: 1px solid var(--sf-line); }
.sf-evlist { display: flex; flex-direction: column; min-width: 0; }
.sf-evrow { display: grid; grid-template-columns: var(--sf-time-col) minmax(0, 1fr) auto; column-gap: var(--sf-3); align-items: center; min-block-size: 56px; padding: var(--sf-2) 14px; box-sizing: border-box; color: var(--sf-ink); text-decoration: none; touch-action: manipulation; }
.sf-evrow + .sf-evrow { border-block-start: 1px solid var(--sf-line-soft); }
a.sf-evrow:hover { background: var(--sf-page); }
a.sf-evrow:active { background: var(--sf-sunk); }
a.sf-evrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-evrow__time { white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-evrow__main { display: grid; gap: 2px; min-width: 0; }
.sf-evrow__title { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-evrow__sub { font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); overflow-wrap: anywhere; }
.sf-evrow__end { display: flex; align-items: center; gap: var(--sf-2); }
.sf-evrow__go { inline-size: 20px; block-size: 20px; color: var(--sf-ink-2); }
.sf-evrow--done { min-block-size: var(--sf-tap); }
.sf-evrow--done .sf-evrow__time, .sf-evrow--done .sf-evrow__title, .sf-evrow--done .sf-evrow__sub { color: var(--sf-ink-3); }
.sf-evrow--next { background: var(--sf-accent-soft); box-shadow: inset 3px 0 0 var(--sf-accent); }
.sf-status--done { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-status--next { background: none; color: var(--sf-accent-ink); }
.sf-status--scratched, .sf-status--dns { background: var(--sf-sunk); color: var(--sf-ink-2); }
.sf-status--heats { background: var(--sf-warn-soft); color: var(--sf-warn-ink); }
.sf-evcard__empty { padding: var(--sf-8) var(--sf-4); }

/* ── Coach track tabs Entries / Heat sheets (js/officeTrackMeet.js; handoff_trackcoachscreens2 01, ROW-CONTRACTS; frames 1o, 1p) ──
   The shared event rows (.sf-evrow) in one card; under a row with athletes of ours, our rows (.sf-trow): Entries row 56 (name + Gr · #bib ·
   "Also in" flag · seed · ⋮ 48), heat sheet row 64 (lane or order 44 · name + sub · seed or Scratched · ⋮ 48), By time row 64 (button, chevron).
   States: default, hover / pressed / focus (By time rows), scratched (name ink-3, the athlete stays), the ⋮ menu open, empty (.sf-empty),
   loading (the page's skeleton, role=status). The tab's one action sits above the card at content width (48, .sf-btn). */
.otm-tab { display: grid; gap: var(--sf-3); min-width: 0; }
.otm-head { display: grid; gap: var(--sf-3); min-width: 0; }
.otm-count { margin: 0; font: var(--sf-w-reg) var(--sf-text-md)/1.3 var(--sf-font-ui); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.otm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); }
.otm-find { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.otm-search { flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--sf-tap); }
.otm-filter { flex: none; }
.otm-past { justify-self: start; }
.otm-banner { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4); border-radius: var(--sf-r-md); background: var(--sf-sunk); color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.otm-banner svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--sf-ink-2); }
/* From 900px the list sits left (340) and the opened event right (frame 1k); the wrapper exists only then (officeTrackMeet.js wide()). */
.otm-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: var(--sf-4); min-width: 0; }
.otm-side { display: grid; gap: var(--sf-3); min-width: 0; }
.otm-pane { display: grid; gap: var(--sf-3); min-width: 0; }
.otm-pane__head { display: grid; gap: var(--sf-1); }
.otm-pane__title { font: var(--sf-w-bold) var(--sf-text-lg)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.otm-pane__sub { font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.otm-card { border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); }
.otm-ev[hidden] { display: none; }
.otm-ev + .otm-ev { border-block-start: 1px solid var(--sf-line-soft); }
.otm-ours { display: grid; min-width: 0; }
.otm-timerow { padding: var(--sf-2) var(--sf-3); border-block-start: 1px solid var(--sf-line-soft); }
.otm-timebtn { inline-size: 100%; }
/* Time this heat (handoff_trackcoachscreens2 10): the send sheet's pick rows and the heat timer page (js/heat/). */
.sf-picklist { display: grid; min-width: 0; }
.sf-pick { display: grid; grid-template-columns: var(--sf-tap) minmax(0, 1fr) auto; align-items: center; min-block-size: var(--sf-tap); padding: var(--sf-1) var(--sf-3) var(--sf-1) 0; border-block-start: 1px solid var(--sf-line-soft); cursor: pointer; }
.sf-pick.is-scratched { color: var(--sf-ink-3); cursor: default; }
.sf-pick__box { justify-self: center; inline-size: 24px; block-size: 24px; accent-color: var(--sf-accent); }
.sf-pick__main { display: grid; gap: 2px; min-width: 0; }
.sf-pick__name { font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-pick__sub { font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-pick.is-scratched .sf-pick__sub { color: var(--sf-ink-3); }
.ht-app { display: grid; gap: var(--sf-3); min-width: 0; }
.ht-left { display: grid; gap: var(--sf-3); align-content: start; min-width: 0; }
.ht-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); padding: var(--sf-3); }
.ht-head .sf-timerbtn { flex: none; inline-size: 118px; min-block-size: var(--sf-tap-lg); block-size: var(--sf-tap-lg); }
.ht-head .sf-timerbtn::before { display: none; }
.ht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-grid .sf-runnerbtn { position: relative; min-block-size: var(--sf-tap-lg); touch-action: manipulation; user-select: none; -webkit-touch-callout: none; }
.ht-lane { position: absolute; inset-block-start: var(--sf-1); inset-inline-end: var(--sf-2); font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.ht-lane:empty { display: none; }
.ht-grid .sf-runnerbtn.ht-runner--finish { background: var(--sf-go); border-color: var(--sf-go); color: var(--sf-white); }
.ht-grid .sf-runnerbtn.ht-runner--finish .sf-runnerbtn__lap { color: inherit; }
.ht-grid .sf-runnerbtn.is-done { background: var(--sf-sunk); }
.ht-splits { min-width: 0; overflow-x: auto; }
.ht-table th, .ht-table td { white-space: nowrap; }
.ht-stoplist { display: grid; }
.ht-stoprow { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); min-block-size: var(--sf-tap); border-block-start: 1px solid var(--sf-line-soft); font: var(--sf-w-reg) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.ht-stoprow .sf-num { font-weight: var(--sf-w-bold); }
@media (min-width: 900px) { .ht-app { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sf-trow { display: flex; align-items: center; gap: var(--sf-3); min-block-size: 56px; padding: var(--sf-2) 14px; box-sizing: border-box; border-block-start: 1px solid var(--sf-line-soft); color: var(--sf-ink); }
.sf-trow--heat { min-block-size: var(--sf-tap-lg); }
.sf-trow__lead { flex: none; display: grid; place-items: center; inline-size: var(--sf-tap-min); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.sf-trow__main { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.sf-trow__name { font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-trow__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-1) var(--sf-2); font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); overflow-wrap: anywhere; }
.sf-trow__flag { display: inline-flex; align-items: center; gap: var(--sf-1); color: var(--sf-ink-2); }
.sf-trow__flag svg { inline-size: 16px; block-size: 16px; }
.sf-trow__end { flex: none; display: flex; align-items: center; justify-content: flex-end; }
.sf-trow__end > svg { inline-size: 20px; block-size: 20px; color: var(--sf-ink-2); }
.sf-trow__seed { font: var(--sf-w-bold) var(--sf-text-lg)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-trow.is-scratched .sf-trow__name { color: var(--sf-ink-3); }
.sf-trow--go { inline-size: 100%; border-inline: 0; border-block-end: 0; background: none; text-align: start; font: inherit; cursor: pointer; }
.sf-trow--go:hover { background: var(--sf-page); }
.sf-trow--go:active { background: var(--sf-sunk); }
.sf-trow--go:focus-visible, .sf-trow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }

/* ── Relay squads (js/officeTrackMeet.js mountSquads; handoff_trackcoachscreens2 03, frames 3a to 3e, ROW-CONTRACTS) ──
   Under the relay event's page in its sheet: Add squad (secondary) and ? above the list; one card per squad (A, B, C): head 48 (Squad A, the
   "N legs empty" warn chip or the place + team time, ⋮), the heat slot strip, then four leg rows (56: leg number 44 · name + "Leg 3 · 400 m" ·
   seed · ⋮ 48; an empty leg is a dashed 44 add row inside 56). After the race the rows are Planned | Ran | Split (a changed runner: repeat +
   Changed). Unsaved changes: a sticky bar at the top of the editor with Discard and Save squads (the one primary). One column on a phone, three
   side by side from 600 (the editor toggles --wide from the 600 breakpoint). States: default, hover / pressed (the buttons), focus (the new squad
   takes focus), disabled (Add squad after C, Save while saving), loading (the page skeleton and the roster spinner), error (Couldn't load squads
   + Try again), empty (No squads yet). */
.sf-squads-host { padding: var(--sf-4); min-width: 0; }
.sf-squads { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-squads__top { display: flex; align-items: center; gap: var(--sf-2); }
.sf-squads__bar { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); padding: var(--sf-2) var(--sf-3); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); }
.sf-squads__bar > b { flex: 1 1 auto; min-width: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-squads__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-3); align-items: start; min-width: 0; }
.sf-squads__list--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.sf-squad { min-width: 0; }
.sf-squad:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-squad__head { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); padding: var(--sf-1) var(--sf-2) var(--sf-1) var(--sf-4); }
.sf-squad__title { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-1) var(--sf-2); min-width: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-squad__place { font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-squad__time { font: var(--sf-w-bold) var(--sf-text-lg)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-squad__add { flex: 1 1 auto; display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap-min); padding: 0 var(--sf-3); border: 1.5px dashed var(--sf-line-strong); border-radius: var(--sf-r-md); background: none; color: var(--sf-accent-ink); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); cursor: pointer; }
.sf-squad__add:hover { background: var(--sf-accent-soft); }
.sf-squad__add:active { background: var(--sf-sunk); }
.sf-squad__add:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-squad__add svg { inline-size: 20px; block-size: 20px; }
.sf-trow--leg { padding-inline-end: var(--sf-1); }
.sf-squad__cols, .sf-trow--ran { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; column-gap: var(--sf-2); }
.sf-trow--ran .sf-trow__lead { inline-size: 24px; }
.sf-squad__planned, .sf-squad__ran { display: grid; justify-items: start; gap: var(--sf-1); min-width: 0; font: var(--sf-w-reg) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-squad__ran { font-weight: var(--sf-w-bold); }

/* ── Track event page (js/shared/meetEvent.js; handoff_meet_links_schedule 01 item 12, frames 1da–1dc) ──
   Head card: event, day + time (accent), "Timed Finals · 2 heats · 14 entries". Rows: place 40 · name (one line on a phone, cut with an ellipsis; wraps from 600) + school line with
   the star · seed / mark 72 right-aligned; min 56; ours accent-soft with the 3px accent bar; full-bleed in the card. */
.sf-evhead { display: grid; justify-items: start; gap: var(--sf-1); padding: var(--sf-4); min-width: 0; }
.sf-evhead__title { margin: 0; font: var(--sf-w-bold) 22px/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-evhead__when { font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); font-variant-numeric: tabular-nums; color: var(--sf-accent-ink); }
.sf-evhead__meta { font: var(--sf-text-md)/1.3 var(--sf-font-ui); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.sf-evhead__results { margin-block-start: var(--sf-2); }
.sf-athlist { display: flex; flex-direction: column; min-width: 0; }
.sf-athlist__head, .sf-athrow { display: grid; grid-template-columns: var(--sf-place-col) minmax(0, 1fr) var(--sf-seed-col); column-gap: var(--sf-2); align-items: center; padding: 0 var(--sf-4); box-sizing: border-box; }
.sf-athlist__head { min-block-size: 40px; background: var(--sf-sunk); font: var(--sf-w-bold) 12px/1.2 var(--sf-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-ink-2); }
.sf-athlist__head > :last-child { text-align: end; }
.sf-athrow { min-block-size: 56px; padding-block: var(--sf-2); border-block-start: 1px solid var(--sf-line-soft); color: var(--sf-ink); }
.sf-athrow[data-ours="true"] { background: var(--sf-accent-soft); box-shadow: inset 3px 0 0 var(--sf-accent); }
.sf-athrow__n { font: var(--sf-w-bold) 16px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sf-ink-3); }
.sf-athrow__main { display: grid; gap: 2px; min-width: 0; }
.sf-athrow__name { font: var(--sf-w-bold) 16px/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
@media (max-width: 599px) { .sf-athrow__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.sf-athrow__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-1) 10px; min-width: 0; font: 14px/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-athrow__end { display: grid; justify-items: end; gap: var(--sf-1); min-width: 0; text-align: end; }
.sf-athrow__seed, .sf-athrow__mark { font: var(--sf-w-bold) 19px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-athrow__wind { font: 12px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-3); }

/* ── Track Results tab (js/shared/trackResults.js; handoff_trackcoachscreens2 02, frames 2a to 2h; the coach parts enter through the view's slots) ──
   Tools: Running · Relays · Field, All · Girls · Boys (.sf-seg--bar, 48), the Division button (48). Event cards fold (head = button, ring).
   Rows reuse .sf-athrow (place 44 · name + school + status chips · mark right); our rows tinted (data-ours); squads: head row (40+) then four leg lines (36).
   Rankings: Place R 64 · School · Points R 72, band 36, rows 48. States: default, hover / pressed / focus (heads, folds), empty, loading, error (.sf-empty, .sf-loading).
   Tablet from 900: events left, rankings right (340). */
.sf-tres { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-tres__tools { display: grid; gap: var(--sf-2); min-width: 0; }
.sf-tres__filter { justify-self: start; }
.sf-tres__cols { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-tres__main, .sf-tres__side, .sf-tres__list { display: grid; gap: var(--sf-3); align-content: start; min-width: 0; }
.sf-tres__card { border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-tres__head { inline-size: 100%; border: 0; background: none; color: var(--sf-ink); text-align: start; font: inherit; cursor: pointer; }
.sf-tres__head:hover { background: var(--sf-page); }
.sf-tres__head:active { background: var(--sf-sunk); }
.sf-tres__head:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-tres__titles { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sf-tres__sub { font: var(--sf-text-sm)/1.3 var(--sf-font-ui); font-variant-numeric: tabular-nums; color: var(--sf-ink-3); }
.sf-tres__head[aria-expanded="true"] .sf-fold { transform: rotate(180deg); }
.sf-tres__body[hidden] { display: none; }
.sf-tres__row { grid-template-columns: var(--sf-tap-min) minmax(0, 1fr) auto; }
.sf-tres__place { text-align: center; color: var(--sf-ink); }
.sf-tres__mark { font: var(--sf-w-bold) 17px/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-tres__mark--none { color: var(--sf-ink-3); }
.sf-tres__none { margin: 0; padding: var(--sf-4); color: var(--sf-ink-3); font: var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-tres__partial { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-2) var(--sf-3); border-radius: var(--sf-r-sm); background: var(--sf-sunk); font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); font-variant-numeric: tabular-nums; }
.sf-tres__unrun { display: grid; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-tres__unrunrow { display: flex; align-items: center; min-block-size: 48px; padding: var(--sf-2) var(--sf-4); color: var(--sf-ink-3); font: var(--sf-w-bold) 16px/1.25 var(--sf-font-ui); }
.sf-tres__unrunrow + .sf-tres__unrunrow { border-block-start: 1px solid var(--sf-line-soft); }
.sf-tres__bestrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; gap: var(--sf-2); align-items: center; min-block-size: 48px; padding: var(--sf-1) var(--sf-4); border-block-start: 1px solid var(--sf-line-soft); }
.sf-tres__besttitle { font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-tres__bestplace { text-align: end; color: var(--sf-ink-2); }
.sf-tres__divs { display: grid; }
.sf-tres__divs .sf-trow[aria-pressed="true"] { background: var(--sf-accent-soft); font-weight: var(--sf-w-bold); }
.sf-squad { display: grid; border-block-start: 1px solid var(--sf-line-soft); }
.sf-squad:first-child { border-block-start: 0; }
.sf-squad[data-ours="true"] { background: var(--sf-accent-soft); box-shadow: inset 3px 0 0 var(--sf-accent); }
.sf-squad__head { display: grid; grid-template-columns: var(--sf-tap-min) minmax(0, 1fr) auto; column-gap: var(--sf-2); align-items: center; min-block-size: 40px; padding: var(--sf-2) var(--sf-4); box-sizing: border-box; }
.sf-squad__legs { display: grid; padding-block-end: var(--sf-2); }
.sf-squad__leg { display: grid; grid-template-columns: var(--sf-tap-min) minmax(0, 1fr) auto; column-gap: var(--sf-2); align-items: center; min-block-size: 36px; padding: 0 var(--sf-4); box-sizing: border-box; }
.sf-squad__n { text-align: center; font: var(--sf-w-bold) 15px/1.1 var(--sf-font-num); color: var(--sf-ink-3); }
.sf-squad__name { font: var(--sf-w-semi) 14px/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-squad__name--none { color: var(--sf-ink-3); }
.sf-squad__note { padding: var(--sf-1) var(--sf-4) var(--sf-3); }
.sf-chip--you { display: flex; inline-size: max-content; align-items: center; gap: var(--sf-1); block-size: 22px; margin-block-start: var(--sf-1); padding: 0 var(--sf-2) 0 6px; border-radius: var(--sf-r-pill); background: var(--sf-accent); color: var(--sf-on-accent); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); }
.sf-chip--you .sf-icon { inline-size: 12px; block-size: 12px; }
.sf-rank { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-rank__title { margin: 0; font: var(--sf-w-bold) 17px/1.25 var(--sf-font-ui); }
.sf-rank__block { border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-rank__fold { display: flex; align-items: center; gap: var(--sf-2); inline-size: 100%; min-block-size: 48px; padding: 0 var(--sf-4); border: 0; background: none; color: var(--sf-ink); text-align: start; font: var(--sf-w-bold) 16px/1 var(--sf-font-ui); cursor: pointer; }
.sf-rank__fold:hover { background: var(--sf-page); }
.sf-rank__fold:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-rank__gender { flex: 1; }
.sf-rank__fold[aria-expanded="true"] .sf-fold { transform: rotate(180deg); }
.sf-rank__table[hidden] { display: none; }
.sf-rank__band, .sf-rank__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 72px; column-gap: var(--sf-2); align-items: center; padding: 0 var(--sf-4); box-sizing: border-box; }
.sf-rank__band { min-block-size: 36px; background: var(--sf-sunk); font: var(--sf-w-bold) 12px/1.2 var(--sf-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-ink-2); }
.sf-rank__row { min-block-size: 48px; padding-block: var(--sf-1); border-block-start: 1px solid var(--sf-line-soft); }
.sf-rank__row[data-ours="true"] { background: var(--sf-accent-soft); }
.sf-rank__c--n, .sf-rank__c--pts { text-align: end; }
.sf-rank__row .sf-rank__c { font: var(--sf-w-bold) 17px/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-rank__school { display: grid; justify-items: start; min-width: 0; font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
@media (min-width: 900px) { .sf-tres__cols:has(> .sf-tres__side) { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
/* The follow star on a row's school line: 44 hit area (::after), filled + accent with the word "Following" when followed, outline + ink-3 when not. */
.sf-star { position: relative; display: inline-flex; align-items: center; gap: var(--sf-1); padding: 0; border: 0; background: none; color: var(--sf-ink-3); font: var(--sf-w-bold) 13px/1 var(--sf-font-ui); cursor: pointer; touch-action: manipulation; }
.sf-star::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); transform: translate(-50%, -50%); }
.sf-star__img { display: inline-flex; align-items: center; }
.sf-star .sf-icon { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; }
.sf-star[aria-pressed="true"] { color: var(--sf-accent-ink); }
.sf-star[aria-pressed="true"] .sf-icon { fill: currentColor; }
.sf-star:hover { color: var(--sf-accent-ink); }
.sf-star:active { opacity: 0.7; }
.sf-star:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; border-radius: var(--sf-r-sm); }

.sf-followtoggle {
  display: inline-flex; align-items: center; gap: var(--sf-1); block-size: var(--sf-tap-min); padding: 0 14px; cursor: pointer;
  border: 1.5px solid var(--sf-accent); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-accent-ink);
  font: var(--sf-w-bold) 13px/1 var(--sf-font-ui); white-space: nowrap; touch-action: manipulation;
}
.sf-followtoggle svg { inline-size: 16px; block-size: 16px; }
.sf-followtoggle:hover { background: var(--sf-accent-soft); }
.sf-followtoggle:active { transform: scale(0.97); }
.sf-followtoggle:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-followtoggle[aria-pressed="true"] { background: var(--sf-accent-soft); }

/* Cards never grow past the viewport: text children may shrink. */
.sf-card, .sf-card > * { min-width: 0; }

/* ── Skeleton rows ─────────────────────────────── a loading list in the row's real layout (Fill expected times); shimmer from .sf-skel */
.sf-skelrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 56px; gap: var(--sf-3); align-items: center; min-block-size: 56px; padding: 0 var(--sf-1); border-block-end: 1px solid var(--sf-line-soft); }
.sf-skelrow__box { inline-size: 24px; block-size: 24px; border-radius: 5px; }
.sf-skelrow__lines { display: grid; gap: 6px; }
.sf-skelrow__lines > .sf-skel { block-size: 12px; inline-size: 70%; border-radius: 3px; }
.sf-skelrow__lines > .sf-skel + .sf-skel { block-size: 9px; inline-size: 40%; }
.sf-skelrow__time { block-size: 14px; border-radius: 3px; }
.sf-skelrow:nth-child(even) .sf-skelrow__lines > .sf-skel:first-child { inline-size: 55%; }

/* ── Time and date fields ─────────────────────── js/ui/timeField.js, js/ui/dateField.js (replace every native time / date picker)
   States: default, hover (buttons), focus (box ring), pressed (segment, chip, day), disabled (n/a: fields are read-only by not mounting), error (aria-invalid + message), empty (placeholder). */
.sf-timefield, .sf-datefield { display: flex; flex-direction: column; gap: var(--sf-2); min-width: 0; }
.sf-timefield__row { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-timefield__box { flex: 1 1 auto; display: flex; align-items: center; gap: var(--sf-2); min-width: 0; min-block-size: var(--sf-tap); padding: 0 var(--sf-2) 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); }
.sf-timefield__box:focus-within { border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-timefield__box:has(.sf-timefield__input[aria-invalid="true"]) { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-timefield__input { flex: 1 1 auto; min-width: 0; inline-size: 100%; border: 0; outline: 0; background: none; color: var(--sf-ink); font-size: var(--sf-text-lg); padding: 0; }
/* The page-level `input[type="text"]` rule (css/shared-styles.css) is more specific than the line above and drew a second box inside the field's own box. */
.sf-timefield__box .sf-timefield__input, .sf-timefield__box .sf-timefield__input:focus { min-block-size: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: none; }
.sf-timefield__seg { flex: none; }
.sf-timefield__step { border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-ui); cursor: pointer; }
.sf-timefield__step--minus { order: -1; }
.sf-timefield__step:hover { background: var(--sf-sunk); }
.sf-timefield__step:active { background: var(--sf-line); }
.sf-timefield__chips[hidden] { display: none; }
.sf-timefield__chips { align-items: center; }
.sf-timefield__clear { margin-inline-start: auto; min-block-size: 36px; padding: 0 var(--sf-2); border: 0; background: none; color: var(--sf-link); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer; }
.sf-timefield__clear:hover:not(:disabled) { text-decoration: underline; }
.sf-timefield__clear:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-timefield__clear:disabled { color: var(--sf-ink-3); cursor: default; }
.sf-timefield__err, .sf-datefield__err { margin: 0; color: var(--sf-stop-ink); font-size: var(--sf-text-sm); font-weight: var(--sf-w-semi); }
.sf-datefield__input { font-size: var(--sf-text-lg); }
.sf-datefield__input[aria-invalid="true"] { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-datefield__other { align-self: flex-start; }
.sf-datefield__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sf-1); justify-items: center; }
.sf-datefield__dow { font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); color: var(--sf-ink-3); padding: var(--sf-2) 0; }
.sf-datefield__day { inline-size: 100%; max-inline-size: var(--sf-tap); block-size: 44px; border: 1.5px solid transparent; border-radius: var(--sf-r-sm); background: none; color: var(--sf-ink); font-size: var(--sf-text-md); cursor: pointer; }
.sf-datefield__day:hover { background: var(--sf-sunk); }
.sf-datefield__day.is-past { color: var(--sf-ink-3); }
.sf-datefield__day.is-today { border-color: var(--sf-accent); }
.sf-datefield__day[aria-pressed="true"] { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-on-accent); font-weight: var(--sf-w-bold); }
.sf-datefield__sheet { z-index: calc(var(--sf-z-sheet) + 1); }

/* ---- Form field + picker row (sheet forms: label above, value as text) ---------------------------------------------- */
.sf-form { display: flex; flex-direction: column; gap: var(--sf-4); min-width: 0; }
.sf-formfield, .sf-field { display: flex; flex-direction: column; gap: calc(var(--sf-1) * 1.5); min-width: 0; }
.sf-form[hidden], .sf-field[hidden] { display: none; }
.sf-formfield__label, .sf-field__label { color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-formfield__note, .sf-field__hint { color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.4; }
.sf-formfield__count { align-self: flex-end; color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-sm)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-formslot:empty { display: none; }
.sf-field__opt { margin-inline-start: var(--sf-1); color: var(--sf-ink-3); font-weight: var(--sf-w-reg); }
.sf-field__err { display: flex; align-items: center; gap: var(--sf-2); margin: 0; color: var(--sf-stop-ink); font-size: var(--sf-text-sm); font-weight: var(--sf-w-semi); }
.sf-field__err[hidden] { display: none; }
.sf-field__err svg { flex: none; inline-size: 16px; block-size: 16px; }
/* A form whose controls are 48 tall (venue form, race editor): the sheet field height steps down to the tap height. */
.sf-form--tap { --sf-field-h: var(--sf-tap); }
/* A row of fields: as many equal columns as fit (two from 600 in a dialog), labels above, bottoms on one line. */
.sf-fieldrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sf-3); align-items: end; min-inline-size: 0; }
.sf-fieldrow > .sf-field { min-inline-size: 0; }
/* Label line with the "Default" marker (info icon + word) beside it; editing the value removes the marker. */
.sf-field__labelrow { display: flex; align-items: center; gap: var(--sf-2); min-block-size: calc(var(--sf-1) * 4); }
.sf-field__default { display: inline-flex; align-items: center; gap: var(--sf-1); color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-xs)/1 var(--sf-font-ui); }
.sf-field__default svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-field__default[hidden] { display: none; }
/* A number with its unit after it ("200 m"): the box fills, the unit sits inside the right edge. */
.sf-field__inputrow { display: flex; align-items: center; gap: var(--sf-2); }
.sf-field__inputrow .sf-input { flex: 1; min-inline-size: 0; }
.sf-field__unit { color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); }
.sf-input--num, .sf-field .sf-input--num { font-family: var(--sf-font-num); font-weight: var(--sf-w-bold); font-variant-numeric: tabular-nums; }
/* Choice buttons (venue Surface): 48 tall, wrap with a gap; pressed = check + accent. */
.sf-choicerow { display: flex; flex-wrap: wrap; gap: var(--sf-2); }
.sf-choicebtn { display: inline-flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); padding: 0 var(--sf-4); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm);
  background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-ui); cursor: pointer; }
.sf-choicebtn svg { display: none; flex: none; inline-size: 16px; block-size: 16px; }
.sf-choicebtn:hover { background: var(--sf-page); }
.sf-choicebtn:active { background: var(--sf-sunk); }
.sf-choicebtn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-choicebtn:disabled { color: var(--sf-ink-3); background: var(--sf-sunk); cursor: not-allowed; }
.sf-choicebtn[aria-pressed="true"] { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-choicebtn[aria-pressed="true"] svg { display: block; }
/* Map point strip: a quiet map box with the pin, the coordinates in tabular type and Move point beside them. */
.sf-mapstrip__map { display: grid; place-items: center; block-size: calc(var(--sf-tap) * 3); border-radius: var(--sf-r-md); background: var(--sf-sunk); color: var(--sf-accent); }
.sf-mapstrip__map svg { inline-size: 32px; block-size: 32px; }
.sf-mapstrip__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-3); }
.sf-mapstrip__coords { color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
/* Save status beside the one primary: spinner + Saving, check + Saved, circle-alert + Not saved. */
.sf-savestatus { display: inline-flex; align-items: center; gap: var(--sf-2); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-savestatus[hidden] { display: none; }
.sf-savestatus[data-state="saved"] { color: var(--sf-go-ink); }
.sf-savestatus[data-state="error"] { color: var(--sf-stop-ink); }
.sf-savestatus[data-state="saving"] svg { animation: sf-spin .7s linear infinite; }
.sf-savestatus__icon { display: inline-flex; }
.sf-savestatus svg { flex: none; inline-size: 18px; block-size: 18px; }
/* The venue details form: the card of fields, then Save and its status on one line. */
.sf-venueform { display: grid; gap: var(--sf-4); min-inline-size: 0; }
.sf-venueform__card { display: grid; gap: var(--sf-4); padding: var(--sf-4); }
@media (min-width: 600px) { .sf-venueform__card { padding: var(--sf-5); } }
.sf-venueform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-3); }
.sf-venueform__loading { display: grid; place-items: center; min-block-size: calc(var(--sf-tap) * 3); }
.sf-field--error .sf-input { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
/* Sheet inputs: 52 tall, 1.5px line-strong, accent ring on focus (scoped so the page-level text-box rule cannot thin the border). */
.sf-field .sf-input, .sf-modal .sf-input { min-block-size: var(--sf-field-h); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); font-size: var(--sf-text-lg); }
.sf-field .sf-input:hover:not(:disabled), .sf-modal .sf-input:hover:not(:disabled) { border-color: var(--sf-ink-3); }
.sf-field .sf-input:focus, .sf-modal .sf-input:focus { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-field .sf-input:disabled, .sf-modal .sf-input:disabled { background: var(--sf-sunk); color: var(--sf-ink-3); cursor: not-allowed; }
.sf-field .sf-input[aria-invalid="true"], .sf-modal .sf-input[aria-invalid="true"] { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-input--short, .sf-field .sf-input--short, .sf-modal .sf-input--short { inline-size: 140px; max-inline-size: 100%; }
/* A multi-line note (the meet's Parking): 120 tall, wraps, grows by hand. Takes every .sf-input state. */
.sf-input--area { block-size: 120px; padding: var(--sf-3); line-height: 1.4; resize: vertical; overflow-wrap: anywhere; }
/* A link box with the recognised site as a chip inside its right edge (Edit meet's Results, prompt 06).
   States: default, hover, focus (ring on the box), disabled, error (aria-invalid: stop border, the .sf-field__err line under it), empty (no chip). */
.sf-linkfield { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-field-h); padding: 0 var(--sf-2) 0 0; border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); }
.sf-linkfield:hover { border-color: var(--sf-ink-3); }
.sf-linkfield:focus-within { border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-linkfield--error, .sf-linkfield--error:hover { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-linkfield__input { flex: 1; min-inline-size: 0; min-block-size: var(--sf-tap); padding: 0 var(--sf-3); border: 0; background: none; color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-lg)/1.2 var(--sf-font-ui); outline: 0; }
.sf-linkfield__input:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-linkfield__site { flex: none; display: inline-flex; align-items: center; block-size: var(--sf-6); padding: 0 var(--sf-3); border-radius: var(--sf-r-pill); background: var(--sf-accent-soft); color: var(--sf-accent-ink); font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); white-space: nowrap; }
.sf-linkfield__site[hidden] { display: none; }
/* Near matches under a typed venue (track card E0): name over town and type, one Use this each, then None of these, add it. */
.sf-matchlist { display: flex; flex-direction: column; border-block-start: 1px solid var(--sf-line-soft); }
.sf-matchlist[hidden] { display: none; }
.sf-matchrow { display: flex; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-tap); padding: var(--sf-2) 0; border-block-end: 1px solid var(--sf-line-soft); }
.sf-matchrow--foot { border-block-end: 0; }
.sf-matchrow__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sf-1); }
.sf-matchrow__title { color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-md)/1.3 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-matchrow__sub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.3; }
.sf-formfield > input[type="text"] { inline-size: 100%; min-block-size: 52px; padding: 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm);
  background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-formfield > input[type="text"]:focus { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-formfield > input[type="text"]:disabled { background: var(--sf-sunk); color: var(--sf-ink-3); }
.sf-formfield--error > input[type="text"] { border-color: var(--sf-stop); }
.sf-pickrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 60px; padding: var(--sf-2) var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink); text-align: left; font: inherit; cursor: pointer; }
.sf-pickrow:hover { background: var(--sf-page); }
.sf-pickrow:active { background: var(--sf-sunk); }
.sf-pickrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-pickrow:disabled { color: var(--sf-ink-3); cursor: not-allowed; background: var(--sf-sunk); }
.sf-pickrow--error { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-pickrow__icon img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
.sf-pickrow--empty { border-style: dashed; color: var(--sf-ink-2); }
.sf-pickrow--loading { opacity: .7; }
.sf-pickrow__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--sf-r-sm); background: var(--sf-sunk); color: var(--sf-ink-2); }
.sf-pickrow__icon svg, .sf-pickrow__go svg { inline-size: 20px; block-size: 20px; }
.sf-pickrow__go { color: var(--sf-ink-3); }
.sf-pickrow__text { display: grid; min-width: 0; }
.sf-pickrow__label { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-pickrow__hint { color: var(--sf-ink-3); font-size: var(--sf-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Checklist (multi-select list in a sheet: Add runners) ──────────────────────────────────────────────────────────────
   <div class="sf-checklist">
     <div class="sf-checklist__tools"> search .sf-input + .sf-seg filter + sort </div>
     <button class="sf-checklist__all" role="checkbox" aria-checked="false|mixed|true"> <span class="sf-checklist__box"></span> <span class="sf-checklist__alllabel">Select all 17 boys</span> <span class="sf-checklist__count">3 picked</span> </button>
     <div class="sf-checklist__head"> (>= 600) sortable column heads: <button class="sf-checklist__sort" aria-sort> </div>
     <label class="sf-checklist__row"> <input class="sf-checklist__input" type="checkbox"> <span class="sf-checklist__box"></span> <span class="sf-checklist__name">Last, First</span> <span class="sf-checklist__sub">In Lineup 2</span> <span class="sf-checklist__pace">6:45</span> </label>
   </div>
   The whole row toggles (the input covers it). States: default, hover, pressed, focus (ring on the box), checked (accent-soft row), mixed (select-all), disabled, empty (.sf-checklist__empty). */
.sf-checklist { display: flex; flex-direction: column; min-width: 0; }
.sf-checklist__tools { position: sticky; inset-block-start: 0; z-index: 2; display: grid; gap: var(--sf-2); padding-block-end: var(--sf-2); background: var(--sf-paper); }
.sf-checklist__box { position: relative; flex: none; display: grid; place-items: center; inline-size: var(--sf-box); block-size: var(--sf-box); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-on-accent); }
.sf-checklist__box::after { content: ""; inline-size: 100%; block-size: 100%; background: currentColor; opacity: 0; -webkit-mask: var(--sf-icon-check) center / 80% no-repeat; mask: var(--sf-icon-check) center / 80% no-repeat; }
.sf-checklist__input:checked + .sf-checklist__box, .sf-checklist__all[aria-checked="true"] .sf-checklist__box, .sf-checklist__all[aria-checked="mixed"] .sf-checklist__box { border-color: var(--sf-accent); background: var(--sf-accent); }
.sf-checklist__input:checked + .sf-checklist__box::after, .sf-checklist__all[aria-checked="true"] .sf-checklist__box::after, .sf-checklist__all[aria-checked="mixed"] .sf-checklist__box::after { opacity: 1; }
.sf-checklist__all[aria-checked="mixed"] .sf-checklist__box::after { -webkit-mask-image: var(--sf-icon-minus); mask-image: var(--sf-icon-minus); }
.sf-checklist__all { position: sticky; inset-block-start: var(--sf-checklist-tools-h, 0); z-index: 1; display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: var(--sf-field-h); padding: 0 var(--sf-3);
  border: 0; border-radius: var(--sf-r-sm); background: var(--sf-sunk); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: left; cursor: pointer; }
.sf-checklist__all:hover { background: var(--sf-line); }
.sf-checklist__all:active { background: var(--sf-line-soft); }
.sf-checklist__all:focus-visible, .sf-checklist__input:focus-visible + .sf-checklist__box { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-checklist__all:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-checklist__alllabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-checklist__count { flex: none; color: var(--sf-accent-ink); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-checklist__row { position: relative; display: grid; grid-template-columns: var(--sf-box) minmax(0, 1fr) auto; grid-template-areas: "box name pace" "box sub pace"; align-items: center; column-gap: var(--sf-3);
  min-block-size: var(--sf-field-h); padding: var(--sf-1) var(--sf-3); border-block-end: 1px solid var(--sf-line-soft); background: var(--sf-paper); cursor: pointer; }
.sf-checklist__row:hover { background: var(--sf-page); }
.sf-checklist__row:active { background: var(--sf-sunk); }
.sf-checklist__row:has(.sf-checklist__input:checked) { background: var(--sf-accent-soft); }
.sf-checklist__row:has(.sf-checklist__input:disabled) { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-checklist__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sf-checklist__box { grid-area: box; }
.sf-checklist__name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-checklist__sub { grid-area: sub; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-checklist__sub:empty { display: none; }
.sf-checklist__pace { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--sf-2); grid-area: pace; color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-checklist__empty { margin: 0; padding: var(--sf-6) var(--sf-4); color: var(--sf-ink-2); text-align: center; }
.sf-checklist__head { display: none; }
@media (min-width: 600px) {
  .sf-checklist__head, .sf-checklist--table .sf-checklist__row { display: grid; grid-template-columns: var(--sf-box) minmax(0, 2fr) minmax(0, 1fr) calc(var(--sf-tap-xl) + var(--sf-2)); grid-template-areas: "box name sub pace"; column-gap: var(--sf-3); }
  .sf-checklist__head { align-items: center; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-3); border-block-end: 1px solid var(--sf-line); color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); }
  .sf-checklist__head > :first-child { grid-column: 2; }
  .sf-checklist__sort { display: inline-flex; align-items: center; gap: var(--sf-1); min-block-size: var(--sf-tap-min); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .sf-checklist__sort:hover { color: var(--sf-ink); }
  .sf-checklist__sort:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
  .sf-checklist__sort[aria-sort="ascending"]::after { content: "\25B2"; font-size: var(--sf-text-xs); }
  .sf-checklist__sort[aria-sort="descending"]::after { content: "\25BC"; font-size: var(--sf-text-xs); }
  .sf-checklist__pace { text-align: right; }
}
@media (min-width: 1024px) and (pointer: fine) { .sf-checklist__row { min-block-size: var(--sf-tap-min); } }

/* Live dot on the Meets tab (shell.js setMeetsLive): a followed team is live. Dot plus the ", live now" aria-label. */
.sf-tabbar a[data-live]::after {
  content: ""; position: absolute; inset-block-start: var(--sf-2); inset-inline-start: calc(50% + var(--sf-1));
  inline-size: var(--sf-dot); block-size: var(--sf-dot); border-radius: 50%; background: var(--sf-stop); box-shadow: 0 0 0 var(--sf-ring) var(--sf-paper);
}
.sf-hnav a[data-live] span::after {
  content: ""; display: inline-block; inline-size: var(--sf-dot-sm); block-size: var(--sf-dot-sm); margin-inline-start: var(--sf-1); border-radius: 50%; background: var(--sf-stop);
}

/* ── Runner report: Coaches tag, coach-only card, scope pill ───────────── shared by spikefan and spikefreak (js/ui/runnerReport.js)
   The tag and the card are display-only (default state only); the scope pill is a button with every state. */
.sf-coaches-tag {
  display: inline-flex; align-items: center; gap: var(--sf-1); flex: none; min-block-size: 24px; padding: 0 var(--sf-2);
  border-radius: var(--sf-r-sm); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui);
}
.sf-coaches-tag .sf-icon { inline-size: 14px; block-size: 14px; }
.sf-coachblock { display: grid; gap: var(--sf-3); padding: var(--sf-4); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); }
.sf-coachblock__head { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-coachblock__line { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-coachblock__title { flex: 1 1 auto; margin: 0; min-width: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-coachblock__sub { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-coachblock__body:empty { display: none; }
.sf-coachblock--loading .sf-coachblock__body { opacity: .6; }
.sf-coachblock--error { border-color: var(--sf-stop); }

.sf-scope {
  position: relative; display: inline-flex; align-items: center; gap: var(--sf-1); min-block-size: var(--sf-tap-min); padding: 0 var(--sf-4);
  border: var(--sf-bw-live) solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink);
  font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer;
}
.sf-scope .sf-icon { inline-size: 16px; block-size: 16px; }
.sf-scope:hover { background: var(--sf-sunk); }
.sf-scope:active { background: var(--sf-accent-soft); border-color: var(--sf-accent); }
.sf-scope:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.sf-scope[aria-expanded="true"] .sf-icon { transform: rotate(180deg); }
.sf-scope:disabled { opacity: .5; cursor: default; }
.sf-scope--static { cursor: default; }
.sf-scope--static:hover { background: var(--sf-paper); }

/* ── Import flow steps (js/officeMeetImport.js create mode: Input, The meet, Races; the review below shares the size) ─────────
   Under 600 a full-screen sheet with ← (.sf-modal__back, first in the head) and ✕; from 600 the 720 centred dialog, 85vh tall. */
.sf-modal--flow, .sf-modal--review, .sf-modal--result { inline-size: 100%; block-size: 100dvh; max-height: 100dvh; border-radius: 0; }
.sf-modal--flow .sf-modal__handle, .sf-modal--review .sf-modal__handle, .sf-modal--result .sf-modal__handle { display: none; }
.sf-modal__back { flex: none; }
@media (min-width: 600px) {
  .sf-modal--flow, .sf-modal--review { inline-size: min(720px, 100% - 48px); block-size: auto; max-height: 85vh; border-radius: var(--sf-r-lg); }
  .sf-modal--result { inline-size: min(560px, 100% - 48px); block-size: auto; max-height: 85vh; border-radius: var(--sf-r-lg); }
}

/* School merge (js/ui/importResultView.js schoolMergeView: the admin bulk importer's Match to a school and the single-meet importer's result). */
.sf-schoolprop { display: grid; gap: var(--sf-2); padding: var(--sf-4); }
.sf-schoolprop__k { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-schoolprop__v { font: var(--sf-w-bold) var(--sf-text-lg)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-schoolprop__close { display: flex; align-items: center; gap: var(--sf-2); color: var(--sf-ink-2); font-size: var(--sf-text-sm); font-weight: var(--sf-w-bold); }
.sf-schoolprop__close svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-schoolprop__acts { display: flex; flex-wrap: wrap; gap: var(--sf-2); margin-top: var(--sf-2); }

/* ── A track document, read and saved (js/ui/importResultView.js; handoff_trackcoachscreens2 04, mockups 4a to 4h) ───────────────
   <section class="sf-impres"> __body (the go-soft result line .sf-note--ok, then .sf-list.sf-impres__list of __row: __text = title + sub, and a
   status chip, icon + word) and __foot (Read another file, then the one primary that names the tab). --center bodies are the reading spinner and the
   error. Rows are 56 high, one height, a grid with gap. States: default, loading (the reading spinner, role=status), error (icon, one sentence,
   one action), empty (no rows: the line alone), disabled/hover/pressed/focus are .sf-btn's.
   Which event is this? (whichEventView): .sf-impres__q is a bordered block like __list, its head is an __row (heading + question, status icon + word),
   then .sf-optrow radio rows; Save is disabled until every block is answered. */
.sf-impres { display: flex; flex-direction: column; gap: var(--sf-4); min-inline-size: 0; }
.sf-impres__body { display: grid; gap: var(--sf-3); min-inline-size: 0; align-content: start; }
.sf-impres__line { font-size: var(--sf-text-md); font-weight: var(--sf-w-bold); align-items: center; }
.sf-impres__list, .sf-impres__q { border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-impres__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2); min-block-size: 56px; padding: var(--sf-1) var(--sf-3); border-bottom: 1px solid var(--sf-line-soft); }
.sf-impres__row:last-child { border-bottom: 0; }
.sf-impres__text { min-inline-size: 0; overflow-wrap: anywhere; }
.sf-impres__ask { margin: 0; font: var(--sf-w-semi) var(--sf-text-md)/1.35 var(--sf-font-ui); color: var(--sf-ink); }
.sf-impres__foot { display: grid; gap: var(--sf-2); }
.sf-impres__foot .sf-btn { inline-size: 100%; }
.sf-impres__center { justify-items: center; text-align: center; padding-block: var(--sf-6); color: var(--sf-ink-2); }
.sf-impres__center > .sf-icon { inline-size: 28px; block-size: 28px; color: var(--sf-ink-3); }
.sf-impres__center[role="status"] > .sf-icon { animation: sf-spin .9s linear infinite; }
.sf-impres__sentence { font: var(--sf-w-semi) var(--sf-text-md)/1.35 var(--sf-font-ui); color: var(--sf-ink); }
@media (min-width: 600px) {
  .sf-impres__foot { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* ── Race card (js/officeMeetImport.js: the Meet step's one card and the Races step's one card per race) ──────────────────
   <div class="sf-racecard" data-state="new|match|skipped" data-current> head = __text (__title, __sub) · __state (the __status button:
   icon + word, a tap opens the picker sheet) · __more ⋮ · then __fields (labels above fields: .sf-field, .sf-pickrow, the distance field)
   or __summary (a matched lineup carries its own name, gender, distance and course). .sf-racecards holds them: on a phone one card at a
   time (the __nav chips switch; data-one), from 600 two columns, --wide spans both. States: default, hover / pressed / focus (the
   status button and ⋮), disabled (skipped: dashed, fields off), loading (the dialog's skeleton line), error (--error + .sf-field__err),
   empty (--empty). */
.sf-racecards { display: grid; gap: var(--sf-3); min-inline-size: 0; }
.sf-racecards__nav { display: flex; flex-wrap: wrap; gap: var(--sf-2); margin: 0 0 var(--sf-3); }
.sf-racecards__nav > .sf-chip { flex: none; max-inline-size: 100%; }
.sf-racecards__nav > .sf-chip > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-racecard { display: grid; gap: var(--sf-3); min-inline-size: 0; padding: var(--sf-4); border: 1px solid var(--sf-line); border-radius: var(--sf-r-2xl); background: var(--sf-paper); color: var(--sf-ink); }
.sf-racecard__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2) var(--sf-3); min-inline-size: 0; }
.sf-racecard__head--more { grid-template-columns: minmax(0, 1fr) var(--sf-tap-min); }
.sf-racecard__head--more > .sf-racecard__state { grid-row: 2; grid-column: 1 / -1; }
.sf-racecard__text { display: grid; gap: 2px; min-inline-size: 0; }
.sf-racecard__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-racecard__sub { color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); font-variant-numeric: tabular-nums; }
.sf-racecard__state { display: flex; justify-content: flex-start; min-inline-size: 0; }
.sf-racecard__status {
  display: inline-flex; align-items: center; gap: var(--sf-1); max-inline-size: 100%; min-inline-size: 0; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink-2);
  font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer;
}
.sf-racecard__status > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-racecard__status svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-racecard__status[data-state="match"] { border-color: var(--sf-go); background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-racecard__status[data-state="new"] { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-racecard__status[data-state="check"] { border-color: var(--sf-warn); background: var(--sf-warn-soft); color: var(--sf-warn-ink); }
.sf-racecard__status[data-state="skipped"] { border-style: dashed; color: var(--sf-ink-3); }
.sf-racecard__status:hover { border-color: var(--sf-ink-3); }
.sf-racecard__status:active { background: var(--sf-sunk); }
.sf-racecard__status:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.sf-racecard__status:disabled, .sf-racecard__status--static { cursor: default; }
.sf-racecard__status:disabled:hover, .sf-racecard__status--static:hover { border-color: var(--sf-line-strong); }
.sf-racecard__status[data-state="match"]:disabled:hover, .sf-racecard__status[data-state="match"].sf-racecard__status--static:hover { border-color: var(--sf-go); }
.sf-racecard__status[data-state="new"]:disabled:hover, .sf-racecard__status[data-state="new"].sf-racecard__status--static:hover { border-color: var(--sf-accent); }
.sf-racecard__more { inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); }
.sf-racecard__fields { display: grid; gap: var(--sf-3); min-inline-size: 0; }
.sf-racecard__fields > .sf-field { min-inline-size: 0; }
.sf-racecard__fields .sf-input { inline-size: 100%; }
.sf-racecard__fields .sf-pickrow:disabled { color: var(--sf-ink-3); background: var(--sf-sunk); cursor: not-allowed; }
.sf-racecard__fields .sf-distance-field { min-height: var(--sf-field-h); }
.sf-racecard__summary { margin: 0; color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-md)/1.4 var(--sf-font-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-racecard[data-state="skipped"] { border-style: dashed; }
.sf-racecard[data-state="skipped"] .sf-racecard__title, .sf-racecard[data-state="skipped"] .sf-racecard__summary { color: var(--sf-ink-3); }
.sf-racecard--error { border-color: var(--sf-stop); box-shadow: 0 0 0 1px var(--sf-stop); }
.sf-racecard--empty { border-style: dashed; color: var(--sf-ink-2); text-align: center; padding: var(--sf-6) var(--sf-4); }
@media (max-width: 599px) {
  .sf-racecards[data-one="true"] > .sf-racecard:not([data-current="true"]) { display: none; }
}
@media (min-width: 600px) {
  .sf-racecards__nav { display: none; }
  .sf-racecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-racecards > .sf-racecard--wide, .sf-racecards > .sf-racecard--empty { grid-column: 1 / -1; }
  .sf-racecard--wide .sf-racecard__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Import review (js/officeMeetImport.js: "Check the matches", "Add results · <lineup>") ───────────────────────────────
   <div class="sf-modal sf-modal--review"> head (← when there is a step before · title + "Step N of N" + one ?) · body .sf-review = lead
   line, .sf-review__chips ("<label> · New lineup" for a lineup Save makes), .sf-review__rows (the only part that scrolls) · foot =
   .sf-review__status + Back + the primary that names its lineups or the new meet.
   Row (>= 600, 52 tall, one line): place · sheet name · our runner picker · time · icon + word · skip. Row (< 600): two lines.
   States: default, hover, focus, pressed (chip), disabled (skip on a kept row), loading (.sf-review__busy), error (.sf-note--error), empty. */
.sf-modal--review .sf-modal__body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sf-review { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; min-inline-size: 0; }
.sf-review__lead { flex: none; margin: 0; padding: var(--sf-3) var(--sf-4) 0; color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-review__leftout { flex: none; padding: var(--sf-3) var(--sf-4) 0; }
.sf-review__chips { flex: none; display: flex; flex-wrap: wrap; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4); }
.sf-review__chips > .sf-chip { flex: 0 1 auto; min-height: 36px; white-space: nowrap; max-inline-size: 100%; }
.sf-review__chips > .sf-chip .sf-badge { background: var(--sf-warn-soft); color: var(--sf-warn-ink); box-shadow: inset 0 0 0 1px var(--sf-warn); }
.sf-review__chip--static { cursor: default; color: var(--sf-ink-2); }
.sf-review__chip--static::after { content: none; }
.sf-review__actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--sf-2); padding: 0 var(--sf-4) var(--sf-3); }
.sf-review__restore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-2); padding: var(--sf-2) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); min-inline-size: 0; }
.sf-review__restore-note { display: flex; align-items: center; gap: var(--sf-2); margin: 0; flex: 1 1 16rem; min-inline-size: 0; }
.sf-review__restore-note svg { flex: none; inline-size: 16px; block-size: 16px; }
.sf-review__choice, .sf-review__timedby { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-1); min-inline-size: 0; }
.sf-review__choice-label { margin: 0; font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink); }
.sf-review__choice-hint { margin: 0; color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-review__rows { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--sf-line-soft); }
.sf-review__cols { display: none; }
.sf-review__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sf-2); row-gap: var(--sf-1);
  padding: var(--sf-2) var(--sf-2) var(--sf-2) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); min-inline-size: 0;
}
.sf-review__row[data-state="check"] { background: var(--sf-warn-soft); }
.sf-review__row[data-state="skipped"] .sf-review__name, .sf-review__row[data-state="skipped"] .sf-review__time { color: var(--sf-ink-3); text-decoration: line-through; }
.sf-review__l1 { grid-column: 1; display: flex; align-items: baseline; gap: var(--sf-3); min-inline-size: 0; }
.sf-review__place, .sf-review__time { font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-review__place { flex: none; min-inline-size: 2ch; color: var(--sf-ink-2); }
.sf-review__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--sf-w-semi); }
.sf-review__time { flex: none; margin-inline-start: auto; }
.sf-review__l2 { grid-column: 1; display: flex; align-items: center; gap: var(--sf-2); min-inline-size: 0; }
.sf-review__pick {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sf-2); flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--sf-tap-map);
  padding: 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink);
  font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer;
}
.sf-review__pick svg { flex: none; inline-size: var(--sf-icon-pick); block-size: var(--sf-icon-pick); color: var(--sf-ink-2); }
.sf-review__pick > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-review__pick:hover { border-color: var(--sf-ink-3); }
.sf-review__pick:active { background: var(--sf-sunk); }
.sf-review__pick:focus-visible, .sf-review__skip:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.sf-review__pick[data-empty="true"] { color: var(--sf-ink-2); border-style: dashed; }
.sf-review__state { flex: none; display: inline-flex; align-items: center; gap: var(--sf-1); white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); color: var(--sf-go-ink); }
.sf-review__state svg { inline-size: 16px; block-size: 16px; }
.sf-review__row[data-state="check"] .sf-review__state { color: var(--sf-warn-ink); }
.sf-review__row[data-state="skipped"] .sf-review__state { color: var(--sf-ink-3); }
.sf-review__skip {
  grid-column: 2; grid-row: 1 / span 2; display: inline-grid; place-items: center; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min);
  border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-ink-2); cursor: pointer;
}
.sf-review__skip:hover { background: var(--sf-sunk); }
.sf-review__skip:active { background: var(--sf-line); }
.sf-review__skip:disabled { color: var(--sf-ink-3); cursor: default; }
.sf-review__skip svg { inline-size: 20px; block-size: 20px; }
/* "Time differs" row: saved and sheet time side by side + a Use sheet time control (the .sf-btn carries hover, pressed, focus, disabled). */
.sf-review__row[data-state="differs"] { background: var(--sf-warn-soft); }
.sf-review__row[data-state="differs"] .sf-review__state { color: var(--sf-warn-ink); }
.sf-review__differ { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2) var(--sf-4); min-inline-size: 0; }
.sf-review__cmp { display: inline-flex; align-items: baseline; gap: var(--sf-2); }
.sf-review__cmp-label { font: var(--sf-w-semi) var(--sf-text-xs)/1 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-review__cmp-time { font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-review__differ[data-on="true"] .sf-review__cmp-time[data-which="saved"] { color: var(--sf-ink-3); text-decoration: line-through; }
.sf-review__use { margin-inline-start: auto; min-block-size: var(--sf-tap); }
/* "Keeps official": the default is right, so the row is calm (go colour); the other time is a ghost link and a gap in ink-2. */
.sf-review__row[data-state="keeps"] .sf-review__state { color: var(--sf-go-ink); white-space: normal; text-align: start; }
.sf-review__gap { font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-review__note { flex: 1 1 100%; font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-review__splits { min-block-size: var(--sf-tap); }
/* The importer's "Combine?" hint: a sentence and one button (opens the Combine runners dialog, never a merge). States come from .sf-btn. */
.sf-review__combine { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); padding: var(--sf-2) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); background: var(--sf-sunk); }
.sf-review__combinetext { min-inline-size: 0; color: var(--sf-ink); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-review__empty { margin: 0; padding: var(--sf-6) var(--sf-4); color: var(--sf-ink-2); text-align: center; }
.sf-review__busy { padding: var(--sf-8) var(--sf-4); text-align: center; color: var(--sf-ink-2); }
.sf-review__status { display: inline-flex; align-items: center; gap: var(--sf-1); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-review__status[data-warn="true"] { color: var(--sf-warn-ink); }
.sf-review__status svg { inline-size: 16px; block-size: 16px; }
@media (min-width: 600px) {
  .sf-review__cols {
    display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.1fr) 8ch 9.5em var(--sf-tap-min); column-gap: var(--sf-3);
    padding: var(--sf-2) var(--sf-2) var(--sf-2) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft);
    font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-3);
  }
  .sf-review__cols { position: sticky; top: 0; z-index: 1; background: var(--sf-paper); }
  .sf-review__cols > :nth-child(4) { text-align: end; }
  .sf-review__row {
    grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.1fr) 8ch 9.5em var(--sf-tap-min); column-gap: var(--sf-3); min-block-size: var(--sf-field-h);
    padding-block: 0; align-items: center;
  }
  .sf-review__l1, .sf-review__l2 { display: contents; }
  .sf-review__place, .sf-review__name, .sf-review__pick, .sf-review__time, .sf-review__state, .sf-review__skip { grid-row: 1; }
  .sf-review__differ { grid-row: 2; grid-column: 2 / -1; padding-block-end: var(--sf-2); }
  .sf-review__place { grid-column: 1; }
  .sf-review__name { grid-column: 2; }
  .sf-review__pick { grid-column: 3; }
  .sf-review__time { grid-column: 4; text-align: end; margin: 0; }
  .sf-review__state { grid-column: 5; }
  .sf-review__skip { grid-column: 6; }
}

/* ── Runner Duel and Top Ten charts (plans/completed/2026-10-15-runner-duel-and-top-ten-spec.md §6, card PO5) ─────────────
   Markup comes from js/ui/potentialCharts.js (A1 to A7, B1 to B6). The builders set no colour: every mark has a class here.
   Runner A = accent + filled circle (.sf-mark--a), Runner B = ink + hollow diamond (.sf-mark--b); B's lines are dashed too, so
   shape, dash and the written name carry the difference, never hue alone. Positions on a time axis are percentages (data).
   Hooks that keep the default look (for the pages and tests, no rules of their own): .sf-chart--a1, .sf-chart--a2, .sf-chart--a3,
   .sf-chart--a4, .sf-chart--a5, .sf-chart--a6, .sf-chart--a7, .sf-chart--b1, .sf-chart--b2, .sf-chart--b3, .sf-chart--b5, .sf-chart--b6, .sf-mark, .sf-rangebar--a, .sf-rangebar--scoring, .sf-ladderrow--scoring, .sf-ladderrow--displacer,
   .sf-ladderrow--next, .sf-bandhead--next, .sf-bandhead--none, .sf-movechip--low, .sf-verdict__tile--a, .sf-verdict__tile--b. */
.sf-chart { position: relative; display: grid; gap: var(--sf-2); min-width: 0; margin: 0; }
.sf-chart svg { overflow: visible; }
.sf-chart__axis { display: block; inline-size: 100%; block-size: var(--sf-5); }
.sf-chart__tick { font: var(--sf-w-semi) var(--sf-text-xs) var(--sf-font-num); font-variant-numeric: tabular-nums; fill: var(--sf-ink-3); }
.sf-chart__lbl { font: var(--sf-w-bold) var(--sf-text-xs) var(--sf-font-num); font-variant-numeric: tabular-nums; fill: var(--sf-ink-2); }
.sf-chart__lbl--a { fill: var(--sf-accent-ink); }
.sf-chart__lbl--b { fill: var(--sf-ink); }
.sf-chart__big { font: var(--sf-w-bold) var(--sf-text-xl) var(--sf-font-num); font-variant-numeric: tabular-nums; fill: var(--sf-ink); }
.sf-chart__row { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-chart__name { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-chart__name .sf-num { font-weight: var(--sf-w-bold); }
.sf-chart__keymark { inline-size: var(--sf-3); block-size: var(--sf-3); flex: none; stroke-width: 2; }
.sf-chart__gap { display: block; inline-size: 100%; block-size: var(--sf-6); }
.sf-chart__gapline { stroke: var(--sf-ink-3); stroke-width: 1.5; }
.sf-chart__plot { display: block; inline-size: 100%; block-size: var(--sf-chart-h); }
.sf-chart__plot--short { block-size: calc(var(--sf-chart-h) - var(--sf-6)); }
.sf-chart__curve { stroke-width: 2; }
.sf-chart__curve--a { fill: color-mix(in srgb, var(--sf-accent) 16%, transparent); stroke: var(--sf-accent); }
.sf-chart__curve--b { fill: color-mix(in srgb, var(--sf-ink) 6%, transparent); stroke: var(--sf-ink); stroke-dasharray: 5 3; }
.sf-chart__overlap { fill: color-mix(in srgb, var(--sf-accent) 22%, transparent); }
.sf-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.sf-chart__line--a { stroke: var(--sf-accent); }
.sf-chart__line--b { stroke: var(--sf-ink); stroke-dasharray: 6 3; }
.sf-chart__trend { stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }
.sf-chart__trend--a { stroke: var(--sf-accent); }
.sf-chart__trend--b { stroke: var(--sf-ink); }
.sf-chart__base { stroke: var(--sf-line); stroke-width: 1; }
.sf-chart__div { stroke: var(--sf-line); stroke-width: 1; }
.sf-chart__verdicts { --cv-cols: 3; display: grid; grid-template-columns: repeat(var(--cv-cols), minmax(0, 1fr)); gap: var(--sf-2); text-align: center; font-size: var(--sf-text-xs); color: var(--sf-ink-2); }
.sf-chart__stage { position: relative; min-width: 0; }
.sf-chart__pt { --pt-x: 50%; --pt-y: 50%; position: absolute; inset-inline-start: var(--pt-x); inset-block-start: var(--pt-y); inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sf-chart__pt:hover { background: color-mix(in srgb, var(--sf-accent) 14%, transparent); }
.sf-chart__pt:active { background: color-mix(in srgb, var(--sf-accent) 24%, transparent); }
.sf-chart__pt:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -2px; }
.sf-chart__pt[disabled] { cursor: not-allowed; }
.sf-chart__note { margin: 0; font-size: var(--sf-text-xs); line-height: var(--sf-lh); color: var(--sf-ink-3); }
.sf-chart__dates { display: flex; justify-content: space-between; font: var(--sf-w-semi) var(--sf-text-xs) var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-3); }
.sf-chart__dumbbell { display: grid; grid-template-columns: minmax(0, 6em) minmax(0, 1fr) minmax(0, 7.5em); gap: var(--sf-3); align-items: center; min-block-size: var(--sf-tap-min); border-top: 1px solid var(--sf-line-soft); }
.sf-chart__meet { display: grid; min-width: 0; }
.sf-chart__meetname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-chart__date { font: var(--sf-w-semi) var(--sf-text-xs) var(--sf-font-num); color: var(--sf-ink-3); }
.sf-chart__bell { display: block; inline-size: 100%; block-size: var(--sf-5); }
.sf-chart__link { stroke: var(--sf-line-strong); stroke-width: 2; }
.sf-chart__res { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sf-1); min-width: 0; text-align: end; font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-chart__res--a { color: var(--sf-accent-ink); }
.sf-chart__res--b { color: var(--sf-ink); }
.sf-chart__team { display: block; inline-size: 100%; block-size: var(--sf-16); }
.sf-chart__track { fill: var(--sf-line-soft); }
.sf-chart__packrow { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-chart__pack { display: block; inline-size: 100%; block-size: var(--sf-12); }
.sf-chart__bracket { stroke-width: 2; }
.sf-chart__bracket--scoring { stroke: var(--sf-accent); }
.sf-chart__bracket--ghost { stroke: var(--sf-line-strong); }
.sf-chart__avg { stroke: var(--sf-ink-2); stroke-width: 1.5; stroke-dasharray: 2 2; }
.sf-chart__sub { font-size: var(--sf-text-xs); color: var(--sf-ink-3); }
.sf-chart__sub .sf-num { color: var(--sf-ink); font-weight: var(--sf-w-bold); }
.sf-chart__note { margin: 0; font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
/* States: empty = one short line; loading = a skeleton block in the chart's place; error = the line in the stop colour.
   Charts are not interactive (no hover, pressed, focus or disabled): a page wraps one in a button when it opens something. */
.sf-chart__empty { margin: 0; padding: var(--sf-3) 0; font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-chart--loading { min-block-size: var(--sf-chart-h); border-radius: var(--sf-r-md); background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite; }
.sf-chart--loading > * { visibility: hidden; }
.sf-chart--error .sf-chart__empty { color: var(--sf-stop-ink); }
/* The text equivalent: a real table, visually hidden on screen, printed in full. */
.sf-chart__table { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media print {
  .sf-chart__table { position: static; inline-size: 100%; block-size: auto; margin: var(--sf-2) 0 0; overflow: visible; clip-path: none; white-space: normal; border-collapse: collapse; font-size: var(--sf-text-xs); }
  .sf-chart__table caption { text-align: start; font-weight: var(--sf-w-bold); }
  .sf-chart__table th, .sf-chart__table td { padding: var(--sf-1) var(--sf-2); border-top: 1px solid var(--sf-line-strong); text-align: start; font-variant-numeric: tabular-nums; }
}

/* Runner marks (inside a chart svg; the diamond is a nested svg so it can sit at a percentage) */
.sf-mark--a, .sf-mark--scoring { fill: var(--sf-accent); stroke: var(--sf-paper); stroke-width: 2; }
.sf-mark--b { fill: var(--sf-paper); stroke: var(--sf-ink); stroke-width: 2.5; }
.sf-mark--hollow { fill: var(--sf-paper); stroke: var(--sf-accent); stroke-width: 2.5; }
.sf-mark--displacer { fill: var(--sf-ink-2); stroke: var(--sf-paper); stroke-width: 2; }
.sf-mark--next, .sf-mark--ghost { fill: var(--sf-line-strong); stroke: var(--sf-paper); stroke-width: 2; }
.sf-chart__keymark.sf-mark--a { stroke: var(--sf-accent); }

/* ── Range bar ──────────────────────────────── track, 80% band, expected mark (circle, or Runner B's diamond), season-best tick.
   <span class="sf-rangebar sf-rangebar--a|b|scoring|displacer|next" role="img" aria-label="…"><svg class="sf-rangebar__svg">…</svg></span>
   States: default; hover (the bar or its row) and pressed (aria-pressed, or its row :active) deepen the band; focus (when focusable)
   shows the focus ring; disabled (.sf-rangebar--disabled, an Out row) greys every mark; loading (.sf-rangebar--loading) is a skeleton;
   error (.sf-rangebar--error) a dashed stop-colour track; empty (.sf-rangebar--empty, no race yet) a dashed track with no marks. */
.sf-rangebar { position: relative; display: block; inline-size: 100%; block-size: var(--sf-rangebar-h); min-width: 0; border-radius: var(--sf-r-sm); }
.sf-rangebar__svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.sf-rangebar__track { stroke: var(--sf-line-soft); stroke-width: 2; }
.sf-rangebar__band { fill: color-mix(in srgb, var(--sf-accent) 22%, transparent); transition: fill var(--sf-fast); }
.sf-rangebar__tick { stroke: var(--sf-accent); stroke-width: 2; stroke-opacity: .5; }
.sf-rangebar--b .sf-rangebar__band { fill: color-mix(in srgb, var(--sf-ink) 12%, transparent); }
.sf-rangebar--b .sf-rangebar__tick { stroke: var(--sf-ink); }
.sf-rangebar--displacer .sf-rangebar__band { fill: color-mix(in srgb, var(--sf-ink-2) 18%, transparent); }
.sf-rangebar--next .sf-rangebar__band { fill: color-mix(in srgb, var(--sf-line-strong) 22%, transparent); }
.sf-rangebar:hover .sf-rangebar__band, .sf-ladderrow:hover .sf-rangebar__band { fill: color-mix(in srgb, var(--sf-accent) 32%, transparent); }
.sf-rangebar[aria-pressed="true"] .sf-rangebar__band, .sf-ladderrow:active .sf-rangebar__band { fill: color-mix(in srgb, var(--sf-accent) 40%, transparent); }
.sf-rangebar:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-rangebar--disabled .sf-rangebar__band, .sf-ladderrow--out .sf-rangebar__band { fill: var(--sf-sunk); }
.sf-rangebar--disabled .sf-mark--a, .sf-rangebar--disabled .sf-mark--scoring, .sf-rangebar--disabled .sf-mark--displacer { fill: var(--sf-line-strong); }
.sf-rangebar--loading { background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite; }
.sf-rangebar--loading .sf-rangebar__svg { visibility: hidden; }
.sf-rangebar--error .sf-rangebar__track { stroke: var(--sf-stop); stroke-dasharray: 4 3; }
.sf-rangebar--empty .sf-rangebar__track { stroke: var(--sf-line-strong); stroke-dasharray: 4 4; }

/* ── Top Ten ladder ─────────────────────────── band heads and rows on one shared time axis.
   Phone: a 3-line row (place · name, grade, status · expected and gap; the range bar full width; why and chips).
   600 and up: one line (place · name · bar · time · sparkline), the why under it, and the axis row on top. */
/* The one-line row switches on the ladder's own width (a container query), not the screen's: beside the rail or the side panel the screen is wide and the ladder is not. */
.sf-ladder { display: grid; min-width: 0; background: var(--sf-paper); container-type: inline-size; }
.sf-ladder__axis { display: none; }
.sf-bandhead { display: flex; align-items: baseline; gap: var(--sf-2); min-width: 0; padding: var(--sf-2) var(--sf-4); border-top: 2px solid var(--sf-line-strong); background: var(--sf-page); }
.sf-bandhead__name { flex: none; font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-bandhead__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sf-text-xs); color: var(--sf-ink-2); }
.sf-bandhead--scoring { background: var(--sf-accent-soft); border-top-color: var(--sf-accent); }
.sf-bandhead--scoring .sf-bandhead__name { color: var(--sf-accent-ink); }
.sf-bandhead--displacer { background: var(--sf-sunk); border-top-color: var(--sf-ink-2); }
.sf-bandhead--displacer .sf-bandhead__name { color: var(--sf-ink-2); }
.sf-bandhead--out { background: var(--st-out-soft); border-top-color: var(--st-out); }
.sf-bandhead--out .sf-bandhead__name { color: var(--st-out); }
/* .sf-bandhead states: not interactive (no hover, pressed, focus or disabled). Loading: .sf-bandhead--loading turns the words to a
   skeleton. Empty: a band with no rows is not drawn. Error: the ladder shows its .sf-chart__empty line instead. */
.sf-bandhead--loading .sf-bandhead__name, .sf-bandhead--loading .sf-bandhead__sub { color: transparent; border-radius: var(--sf-1); background: var(--sf-line-soft); }

.sf-ladderrow {
  display: grid; grid-template-columns: var(--sf-6) minmax(0, 1fr) auto; column-gap: var(--sf-3); row-gap: var(--sf-2); align-items: center;
  inline-size: 100%; min-block-size: var(--sf-tap); margin: 0; padding: var(--sf-3) var(--sf-4); border: 0; border-top: 1px solid var(--sf-line-soft);
  background: var(--sf-paper); color: var(--sf-ink); text-align: start; font: inherit;
}
button.sf-ladderrow { cursor: pointer; transition: background var(--sf-fast); }
.sf-ladderrow__place { grid-column: 1; grid-row: 1; font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.sf-ladderrow__who { grid-column: 2; grid-row: 1; display: grid; min-width: 0; }
.sf-ladderrow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-ladderrow__meta { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; font-size: var(--sf-text-xs); color: var(--sf-ink-3); }
.sf-ladderrow__bar { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.sf-ladderrow__time { grid-column: 3; grid-row: 1; display: grid; justify-items: end; }
.sf-ladderrow__exp { font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-ladderrow__gap { font: var(--sf-w-semi) var(--sf-text-xs)/1.3 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-3); }
.sf-ladderrow__spark { display: none; }
.sf-ladderrow__why { grid-column: 1 / -1; display: grid; gap: var(--sf-2); min-width: 0; }
.sf-ladderrow__text { font-size: var(--sf-text-sm); line-height: var(--sf-lh); color: var(--sf-ink-2); }
.sf-ladderrow__chips { display: flex; flex-wrap: wrap; gap: var(--sf-2); }
/* States: default; hover; pressed (:active); focus (ring inside the row); disabled ([disabled]: no tap, quiet text); bubble
   (--bubble, a 5/6 or 7/8 row that is too close to call); coach call (--coach, an accent rule on the start edge); out (--out,
   struck name, grey bar, moved to the bottom with the reason); empty (--none, no race yet: an empty bar); loading (--loading,
   skeleton words); error (--error, the row's own fetch failed). Band: --scoring / --displacer / --next set the dot (.sf-mark--*). */
button.sf-ladderrow:hover { background: var(--sf-sunk); }
button.sf-ladderrow:active { background: var(--sf-accent-soft); }
.sf-ladderrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-ladderrow[disabled] { cursor: not-allowed; color: var(--sf-ink-3); }
.sf-ladderrow--bubble { background: var(--sf-warn-soft); }
button.sf-ladderrow--bubble:hover { background: color-mix(in srgb, var(--sf-warn) 22%, var(--sf-paper)); }
.sf-ladderrow--coach { background-image: linear-gradient(var(--sf-accent), var(--sf-accent)); background-size: var(--sf-1) 100%; background-repeat: no-repeat; }
.sf-ladderrow--out .sf-ladderrow__name { text-decoration: line-through; color: var(--sf-ink-3); }
.sf-ladderrow--out .sf-ladderrow__place, .sf-ladderrow--none .sf-ladderrow__place { color: var(--sf-ink-3); }
.sf-ladderrow--loading { pointer-events: none; }
.sf-ladderrow--loading .sf-ladderrow__name, .sf-ladderrow--loading .sf-ladderrow__exp, .sf-ladderrow--loading .sf-ladderrow__place {
  color: transparent; border-radius: var(--sf-1); background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite;
}
.sf-ladderrow--error { background: var(--sf-stop-soft); }
.sf-ladderrow--error .sf-ladderrow__gap, .sf-ladderrow--error .sf-ladderrow__text { color: var(--sf-stop-ink); }
@container (min-width: 640px) {
  .sf-ladder__axis, .sf-ladderrow { grid-template-columns: var(--sf-ladder-place) var(--sf-ladder-name) minmax(0, 1fr) var(--sf-ladder-time) var(--sf-ladder-spark); }
  .sf-ladder__axis { display: grid; column-gap: var(--sf-3); align-items: end; padding: 0 var(--sf-4); }
  .sf-ladderrow__bar { grid-column: 3; grid-row: 1; }
  .sf-ladderrow__time { grid-column: 4; }
  .sf-ladderrow__spark { display: block; grid-column: 5; grid-row: 1; }
  .sf-ladderrow__why { grid-column: 2 / -1; }
}

/* Availability word (Clear / Check / Out): icon + word */
.sf-avail { display: inline-flex; align-items: center; gap: var(--sf-1); font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); white-space: nowrap; }
.sf-avail .sf-icon { inline-size: var(--sf-3); block-size: var(--sf-3); }
.sf-avail--clear { color: var(--sf-go-ink); }
.sf-avail--check { color: var(--st-limited); }
.sf-avail--out { color: var(--st-out); }

/* B4 sparkline: last five, faster up, last point marked */
.sf-spark { display: block; inline-size: var(--sf-ladder-spark); block-size: var(--sf-6); overflow: visible; }
.sf-spark__line { fill: none; stroke: var(--sf-ink-2); stroke-width: 1.5; stroke-linejoin: round; }
.sf-spark__last { fill: var(--sf-accent); }

/* ── Edge bar ───────────────────────────────── a diverging bar from the centre: Runner A's edge to the left, B's to the right
   (A4). (The Top Ten's B5 strip against the neighbours was replaced by the runner sheet's Head to head panels, .sf-h2h.)
   Winner word with its arrow icon: --a / --b / --even / --none (no data: no bar, "No data").
   States: not interactive (no hover, pressed, focus or disabled). Loading: .sf-edgebar--loading (skeleton track); error:
   .sf-edgebar--error (stop-colour word); empty: --none. */
.sf-edgebars { display: grid; min-width: 0; }
.sf-edgebars__legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--sf-1); font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-edgebars__legend > span { display: flex; align-items: center; gap: var(--sf-1); min-width: 0; }
.sf-edgebars__legend > span:last-child { justify-content: flex-end; }
.sf-edgebars__cond { display: flex; align-items: center; gap: var(--sf-2); margin: 0; padding: var(--sf-3) 0 var(--sf-1); border-top: 1px solid var(--sf-line-soft); font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-edgebars__cond .sf-icon { inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-edgebar { display: grid; gap: var(--sf-1); min-width: 0; padding: var(--sf-2) 0; border-top: 1px solid var(--sf-line-soft); }
.sf-edgebar__head { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-edgebar__label { flex: 1; min-width: 0; font: var(--sf-w-bold) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-edgebar__win { display: inline-flex; align-items: center; gap: var(--sf-1); white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-edgebar__win .sf-icon { inline-size: var(--sf-3); block-size: var(--sf-3); }
.sf-edgebar--a .sf-edgebar__win { color: var(--sf-accent-ink); }
.sf-edgebar--b .sf-edgebar__win { color: var(--sf-ink); }
.sf-edgebar--none .sf-edgebar__win { color: var(--sf-ink-3); }
.sf-edgebar__svg { display: block; inline-size: 100%; block-size: var(--sf-3); overflow: visible; }
.sf-edgebar__track { fill: var(--sf-page); }
.sf-edgebar__mid { stroke: var(--sf-line-strong); stroke-width: 1.5; }
.sf-edgebar__bar { fill: var(--sf-line-strong); }
.sf-edgebar--a .sf-edgebar__bar { fill: var(--sf-accent); }
.sf-edgebar--b .sf-edgebar__bar { fill: var(--sf-ink); }
.sf-edgebar__text { margin: 0; font-size: var(--sf-text-sm); line-height: var(--sf-lh); color: var(--sf-ink-2); }
.sf-edgebar--loading .sf-edgebar__track { fill: var(--sf-line-soft); }
.sf-edgebar--loading .sf-edgebar__bar { display: none; }
.sf-edgebar--error .sf-edgebar__win { color: var(--sf-stop-ink); }

/* ── Place odds grid and cell ───────────────── B2: runner rows by places 1 to 10; one accent ramp (alpha = p / 70%, capped at a 60%
   accent so the ink value keeps 4.5:1 in light and dark), the most likely place outlined, values printed from 10%.
   .sf-probcell states: not interactive (no hover, pressed, focus or disabled); loading (--loading, skeleton); empty (--empty, a
   place nobody reaches: dashed); error (--error). --pc-p is the cell's share, 0..1 (data, set inline). */
.sf-probgrid { --pg-cols: 10; display: grid; grid-template-columns: minmax(0, 5em) repeat(var(--pg-cols), minmax(0, 1fr)); gap: 2px; align-items: center; min-width: 0; font: var(--sf-w-semi) var(--sf-text-xs)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-probgrid__head { text-align: center; color: var(--sf-ink-3); }
.sf-probgrid__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-xs)/1.2 var(--sf-font-ui); }
.sf-probcell { --pc-p: 0; position: relative; isolation: isolate; display: grid; place-items: center; block-size: var(--sf-6); overflow: hidden; border-radius: var(--sf-1); background: var(--sf-paper); color: var(--sf-ink); }
.sf-probcell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sf-accent); opacity: calc(var(--pc-p) * .6); }
.sf-probcell--modal { outline: 2px solid var(--sf-ink); outline-offset: -2px; font-weight: var(--sf-w-bold); }
.sf-probcell--loading { background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite; color: transparent; }
.sf-probcell--loading::before { display: none; }
.sf-probcell--empty { outline: 1px dashed var(--sf-line); outline-offset: -1px; }
.sf-probcell--error { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }

/* ── Move chip ──────────────────────────────── icon + word, 24 tall: Could move up / Could drop / Too close to call / Low data /
   Coach call / Check health. A status, not a target; when a page makes one a button it gets hover, pressed, focus and disabled
   below. Loading (--loading, skeleton); error (--error); empty: a row with no chips draws none. */
.sf-movechip { display: inline-flex; align-items: center; gap: var(--sf-1); block-size: var(--sf-movechip-h); padding: 0 var(--sf-2); border: 0; border-radius: var(--sf-r-pill); white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); background: var(--sf-sunk); color: var(--sf-ink-2); }
.sf-movechip .sf-icon { inline-size: var(--sf-3); block-size: var(--sf-3); }
.sf-movechip--up { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-movechip--drop { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }
.sf-movechip--close, .sf-movechip--health { background: var(--sf-warn-soft); color: var(--sf-warn-ink); }
.sf-movechip--coach { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
button.sf-movechip { cursor: pointer; }
button.sf-movechip:hover { filter: brightness(.96); }
button.sf-movechip:active { transform: scale(.97); }
button.sf-movechip:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
button.sf-movechip[disabled] { cursor: not-allowed; background: var(--sf-sunk); color: var(--sf-ink-3); }
.sf-movechip--loading { min-inline-size: 6em; color: transparent; background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite; }
.sf-movechip--error { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }

/* ── Bubble callout ─────────────────────────── a 5/6 or 7/8 cut-off too close to call: title, the line, a compact range bar pair
   (B6), and one action, Compare the two. States: the action has hover, pressed, focus, disabled and busy (.is-busy, spinner);
   loading (--loading, skeleton words); error (--error); empty: no open spot, no callout. */
.sf-bubble { display: flex; gap: var(--sf-3); min-width: 0; padding: var(--sf-3) var(--sf-4); border: 1.5px solid var(--sf-warn); border-radius: var(--sf-r-xl); background: var(--sf-warn-soft); color: var(--sf-ink); }
.sf-bubble > .sf-icon { inline-size: var(--sf-5); block-size: var(--sf-5); color: var(--sf-warn-ink); }
.sf-bubble__body { display: grid; gap: var(--sf-2); flex: 1; min-width: 0; }
.sf-bubble__text { display: grid; gap: var(--sf-2); margin: 0; min-width: 0; }
.sf-bubble__title { font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-bubble__line { font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-bubble__more { display: grid; gap: var(--sf-2); min-width: 0; }
.sf-bubble.is-folded .sf-bubble__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sf-bubble.is-folded .sf-bubble__title, .sf-bubble.is-folded .sf-bubble__line { display: inline; }
.sf-bubble.is-folded .sf-bubble__more { display: none; }
/* Fold-down ring: the one cue for a header that reveals content in place (handoff_system_wide_folddown_fix). The header is the button
   (aria-expanded) and the 44+ target; the ring is only the cue, a circle with a chevron-down that turns up when open. It keeps the slot its
   component already has. Dense rows (.sf-fold--dense: bands, table rows from 1024) use 28 with a 16 icon. States: closed, hover, focus (on the
   header), open, [hidden]. Navigation chevrons and menu openers are not folds and do not use it. */
.sf-fold { --sf-fold: 36px; display: inline-grid; flex: none; place-items: center; box-sizing: border-box; inline-size: var(--sf-fold); block-size: var(--sf-fold); border: 1.5px solid var(--sf-line-strong); border-radius: 50%; background: var(--sf-sunk); color: var(--sf-ink); }
.sf-fold[hidden] { display: none; }
.sf-fold .sf-icon { inline-size: 20px; block-size: 20px; transition: transform 150ms var(--sf-ease); }
.sf-fold--dense { --sf-fold: 28px; }
.sf-fold--dense .sf-icon { inline-size: 16px; block-size: 16px; }
:is(button, a):hover > .sf-fold, :is(button, a):hover > * > .sf-fold { border-color: var(--sf-line); }
button:has(.sf-fold):focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
[aria-expanded="true"] .sf-fold, :is(.rs-group, .mr-race):not(.is-shut) > :is(.rs-group__head, .mr-race__head) > :is(.rs-group__row, .mr-race__row) > .sf-fold { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
[aria-expanded="true"] .sf-fold .sf-icon, :is(.rs-group, .mr-race):not(.is-shut) > :is(.rs-group__head, .mr-race__head) > :is(.rs-group__row, .mr-race__row) > .sf-fold .sf-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sf-fold .sf-icon { transition: none; } }
/* Open: one 3px accent bar on the container, so the header and its panel share it with no negative margin. */
.sf-duelsec:has(> .sf-duelsec__toggle[aria-expanded="true"]), .sf-imp__row[aria-expanded="true"], .sf-imp__dist[aria-expanded="true"] { box-shadow: inset 3px 0 0 var(--sf-accent); }
.sf-bubble__toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; align-self: flex-start; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); padding: 0; border: 0; border-radius: var(--sf-r-pill); background: none; color: var(--sf-warn-ink); cursor: pointer; }
.sf-bubble__toggle:hover { background: color-mix(in srgb, var(--sf-warn) 18%, transparent); }
.sf-bubble__toggle:active { transform: scale(.96); }
.sf-bubble__toggle:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-bubble__toggle[disabled] { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-bubble__action {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--sf-1); min-block-size: var(--sf-tap);
  padding: 0 var(--sf-2); border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-link); cursor: pointer; font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui);
}
.sf-bubble__action .sf-icon { inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-bubble__action:hover { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-bubble__action:active { transform: scale(.98); }
.sf-bubble__action:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-bubble__action[disabled] { cursor: not-allowed; background: none; color: var(--sf-ink-3); }
.sf-bubble__action.is-busy { pointer-events: none; }
.sf-bubble__action.is-busy::after { content: ""; inline-size: var(--sf-4); block-size: var(--sf-4); border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: sf-spin .7s linear infinite; }
.sf-bubble--loading .sf-bubble__title, .sf-bubble--loading .sf-bubble__line { color: transparent; border-radius: var(--sf-1); background: color-mix(in srgb, var(--sf-warn) 25%, transparent); }
.sf-bubble--error { border-color: var(--sf-stop); background: var(--sf-stop-soft); }
.sf-bubble--error > .sf-icon { color: var(--sf-stop-ink); }

/* ── Verdict card ───────────────────────────── the Duel's one answer: dark in every theme (--sf-verdict-*), headline, its line,
   a tile per runner (mark, name, expected, Clear / Check / Out, Top five / Top seven, the score label, Low data).
   States: not interactive (no hover, pressed, focus or disabled). Loading (--loading): skeleton tiles; error (--error): the
   headline in the stop colour; empty (a refused pair or no data): the headline and its line only, no tiles. */
.sf-verdict { display: grid; gap: var(--sf-3); min-width: 0; padding: var(--sf-4); border-radius: var(--sf-r-xl); background: var(--sf-verdict-bg); color: var(--sf-verdict-ink); }
.sf-verdict__head { margin: 0; font: var(--sf-w-bold) var(--sf-text-xl)/1.2 var(--sf-font-ui); }
.sf-verdict__line { margin: 0; font-size: var(--sf-text-md); color: var(--sf-verdict-ink-2); }
.sf-verdict__line b { color: var(--sf-verdict-ink); font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-verdict__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-verdict__tiles:empty { display: none; }
.sf-verdict__tile { display: grid; align-content: start; gap: var(--sf-2); min-width: 0; padding: var(--sf-3); border-radius: var(--sf-r-md); background: var(--sf-verdict-tile); }
.sf-verdict__who { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-verdict__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-verdict__exp { font: var(--sf-w-bold) var(--sf-text-2xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-verdict__odds { font-size: var(--sf-text-sm); color: var(--sf-verdict-ink-3); }
.sf-verdict__odds b { color: var(--sf-verdict-ink); }
.sf-verdict .sf-avail--clear { color: var(--sf-verdict-go); }
.sf-verdict .sf-avail--check { color: var(--sf-verdict-warn); }
.sf-verdict .sf-avail--out { color: var(--sf-verdict-stop); }
.sf-verdict .sf-mark--a { fill: var(--sf-verdict-a); stroke: var(--sf-verdict-a); }
.sf-verdict .sf-mark--b { fill: none; stroke: var(--sf-verdict-ink); }
.sf-verdict__label { justify-self: start; display: inline-flex; align-items: center; gap: var(--sf-1); padding: var(--sf-1) var(--sf-2); border-radius: var(--sf-r-pill); font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); }
.sf-verdict__label .sf-icon { inline-size: var(--sf-3); block-size: var(--sf-3); }
.sf-verdict__label--scores { background: var(--sf-accent); color: var(--sf-on-accent); }
.sf-verdict__label--bubble { background: var(--sf-verdict-warn-soft); color: var(--sf-verdict-warn); }
.sf-verdict__label--depth, .sf-verdict__label--low { outline: 1px solid var(--sf-verdict-ink-3); outline-offset: -1px; color: var(--sf-verdict-ink-2); }
.sf-verdict--loading .sf-verdict__tile { min-block-size: var(--sf-16); }
.sf-verdict--loading .sf-verdict__tile > * { visibility: hidden; }
.sf-verdict--error .sf-verdict__head { color: var(--sf-verdict-stop); }
@media (min-width: 600px) {
  .sf-verdict__head { font-size: var(--sf-text-2xl); }
}
.sf-verdict--loading .sf-loading { padding: var(--sf-6) var(--sf-4); color: var(--sf-verdict-ink-2); }

/* ── Runner Duel page ───────────────────────── /runners/compare (js/runnerDuel.js, card PO6; handoff Duel Body D1 to D3).
   Phone (D1): one column in the design's order: target, verdict, Expected time, Why, Season, What each adds, then Finish odds, mile by
   mile, Races together and Their last races folded (a chevron, remembered). Tablet (D2): the same order, every section open, 680 wide.
   PC (D3): two columns by grid areas: target and verdict full; A1 | A2; A3 | A5; Why down the left beside A7, A6 and Last races. */
.sf-duel { display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; }
.sf-duel > * { min-width: 0; }
.sf-duel__target {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2) var(--sf-3); padding: var(--sf-3);
  border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper);
}
.sf-duel__target > :not(.sf-duel__race):not(.sf-btn) { grid-column: 1 / -1; justify-self: start; }
.sf-duel__target > .sf-btn { grid-column: 2; grid-row: 1; }
.sf-duel__race { display: grid; min-width: 0; }
.sf-duel__racename { font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-duel__racesub { font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-duel__nowx { display: inline-flex; align-items: center; block-size: var(--sf-8); padding: 0 var(--sf-3); border: 1.5px dashed var(--sf-line-strong); border-radius: var(--sf-r-pill); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); color: var(--sf-ink-2); white-space: nowrap; }
.sf-duel__note { margin: 0; font-size: var(--sf-text-md); line-height: var(--sf-lh); }
.sf-duel__actions { display: flex; flex-wrap: wrap; gap: var(--sf-2); }
.sf-duel__actions .sf-btn { min-block-size: var(--sf-tap); }
.sf-duel__primary { flex: 1 1 12em; justify-content: center; text-decoration: none; }
.sf-duel[data-state="loading"] .sf-verdict, .sf-duel[data-state="empty"] .sf-empty, .sf-duel[data-state="error"] .sf-empty { min-block-size: var(--sf-chart-h); }

/* A section card. States: default; a folding head (phone only) has hover, pressed, focus and disabled; folded (.is-folded, the body
   hidden); loading (--loading, a skeleton body); error (--error, the body's line in the stop colour); empty (the chart's own
   .sf-chart__empty line). */
.sf-duelsec { display: grid; gap: var(--sf-2); min-width: 0; padding: var(--sf-3) var(--sf-4); border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); }
.sf-duelsec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-1) var(--sf-2); min-width: 0; }
.sf-duelsec__title { flex: 1 1 auto; min-width: 0; margin: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.25 var(--sf-font-ui); }
.sf-duelsec__sub { font-size: var(--sf-text-xs); color: var(--sf-ink-3); }
.sf-duelsec__body { display: grid; gap: var(--sf-2); min-width: 0; }
.sf-duelsec__body[hidden] { display: none; }
.sf-duelsec__toggle {
  align-items: center; inline-size: 100%; min-block-size: var(--sf-tap); padding: 0; border: 0;
  background: none; color: var(--sf-ink); text-align: start; font: inherit; cursor: pointer;
}
.sf-duelsec__toggle:hover .sf-duelsec__title { color: var(--sf-accent-ink); }
.sf-duelsec__toggle:active { transform: scale(.99); }
.sf-duelsec__toggle:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; border-radius: var(--sf-r-sm); }
.sf-duelsec__toggle[disabled] { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-duelsec--loading .sf-duelsec__body { min-block-size: var(--sf-chart-h); border-radius: var(--sf-r-md); background: linear-gradient(90deg, var(--sf-sunk) 0 40%, var(--sf-line-soft) 50%, var(--sf-sunk) 60% 100%); background-size: 300% 100%; animation: sf-shimmer 1.2s linear infinite; }
.sf-duelsec--loading .sf-duelsec__body > * { visibility: hidden; }
.sf-duelsec--error .sf-chart__empty { color: var(--sf-stop-ink); }

/* Their last races: two columns, each runner's newest five (race, date, time on this course in neutral conditions). */
.sf-duellast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-3); }
.sf-duellast__col { display: grid; align-content: start; min-width: 0; }
.sf-duellast__who { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; margin: 0 0 var(--sf-1); font: var(--sf-w-bold) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-duellast__list { margin: 0; padding: 0; list-style: none; }
.sf-duellast__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); min-block-size: var(--sf-8); border-top: 1px solid var(--sf-line-soft); }
.sf-duellast__race { display: grid; min-width: 0; }
.sf-duellast__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sf-text-xs); color: var(--sf-ink-2); }
.sf-duellast__date { font-size: var(--sf-text-xs); color: var(--sf-ink-3); }
.sf-duellast__time { font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }

/* The runner picker: the other gender's rows quieter once the first runner is ticked (they can still be picked; the Duel then says why not). */
.sf-checklist__row.is-dim .sf-checklist__name { color: var(--sf-ink-3); font-weight: var(--sf-w-reg); }

@media (min-width: 600px) {
  .sf-duel { inline-size: 100%; max-inline-size: var(--sf-report-max-tablet); margin-inline: auto; gap: var(--sf-4); }
}
@media (min-width: 1024px) {
  .sf-duel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-inline-size: var(--sf-duel-max);
    grid-template-areas: "target target" "verdict verdict" "a1 a2" "a3 a5" "a4 a7" "a4 a6" "a4 last" "act act";
  }
  .sf-duel > [data-area="target"] { grid-area: target; }
  .sf-duel > [data-area="verdict"] { grid-area: verdict; }
  .sf-duel > [data-area="a1"] { grid-area: a1; }
  .sf-duel > [data-area="a2"] { grid-area: a2; }
  .sf-duel > [data-area="a3"] { grid-area: a3; }
  .sf-duel > [data-area="a4"] { grid-area: a4; }
  .sf-duel > [data-area="a5"] { grid-area: a5; }
  .sf-duel > [data-area="a6"] { grid-area: a6; }
  .sf-duel > [data-area="a7"] { grid-area: a7; }
  .sf-duel > [data-area="last"] { grid-area: last; }
  .sf-duel > [data-area="act"] { grid-area: act; }
  .sf-duel__primary { flex: 0 1 auto; }
}

/* ── Top Ten page ───────────────────────────── /runners/topten?lineupId= (js/runnerTopTen.js, card PO7; handoff Top Ten Body T1 to T3).
   Phone (T1): one column: target, pack summary, the bubble callouts, the ladder, then Place odds and Pack folded (a chevron,
   remembered); nothing is fixed over the rows (Clear my changes and Use as lineup are in the header's menu). Tablet (T2): the same, 720 wide.
   PC (T3): the ladder (1.6fr) beside a side panel (1fr): pack summary, Place odds, Pack. The target strip and section cards
   reuse .sf-duel__target and .sf-duelsec. */
.sf-topten { display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; }
.sf-topten > * { min-width: 0; }
.sf-topten__main, .sf-topten__side { display: contents; }
/* Top ten | Second ten switch: one .sf-seg (44 tall buttons), full width on a phone, its own width from 600px. */
.sf-topten__set { display: flex; flex-wrap: wrap; gap: var(--sf-2); min-width: 0; }
.sf-topten__set .sf-seg { flex: 1 1 auto; }
.sf-topten > [data-area="target"] { order: 1; }
.sf-topten > [data-area="set"] { order: 1; }
.sf-topten__main > [data-area="course"] { order: 2; }
.sf-topten__side > [data-area="pack"] { order: 2; }
.sf-topten__main > [data-area="bubble"] { order: 3; }
.sf-topten__main > [data-area="ladder"], .sf-topten > [data-area="ladder"] { order: 4; }
.sf-topten__side > [data-area="odds"] { order: 5; }
.sf-topten__side > [data-area="packc"] { order: 6; }
.sf-topten[data-state="loading"] .sf-topten__ladder, .sf-topten[data-state="empty"] .sf-empty, .sf-topten[data-state="error"] .sf-empty { min-block-size: var(--sf-chart-h); }

/* The ladder card: a padded head, then the rows edge to edge (B1). States: loading (aria-busy: the spinner and skeleton rows);
   empty and error are the page's .sf-empty; not interactive itself (its rows are). */
.sf-topten__ladder { display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); }
.sf-topten__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-1) var(--sf-2); padding: var(--sf-3) var(--sf-4) var(--sf-2); }
.sf-topten__rows { min-width: 0; }
.sf-topten__rows .sf-chart { margin: 0; }
.sf-topten__ladder[aria-busy="true"] .sf-loading { padding: var(--sf-6) var(--sf-4); }

/* ── Runner sheet (Top ten, tap a runner) ── js/ui/runnerSheetView.js, composed by js/ui/runnerTopTenView.js rowSheet and mounted by
   js/runnerTopTen.js on the shared sheet (design/handoffs: runner sheet and meet panel redesign, file 02). The header is the sheet's
   title and sub. Body, top to bottom: the Check line (only when Check: no chip, no gap when Clear), the named panels (Head to head,
   one or two; Season), the action row. The sheet fills from data the page already holds, so it opens whole. States: no neighbour (no panel), under two marks
   (.sf-season__none), open mark (.sf-season__ring shown, .sf-season__pt.is-open). Phone sheet; 480 dialog from 600px. */
.sf-rsheet, .sf-rsheet__body { display: grid; gap: var(--sf-4); min-width: 0; }
.sf-rsheet__avail { display: grid; gap: var(--sf-2); justify-items: start; }
.sf-avail-line { display: inline-flex; align-items: center; gap: var(--sf-2); margin: 0; padding: var(--sf-2) var(--sf-3); border-radius: var(--sf-r-sm); background: var(--st-limited-soft); color: var(--st-limited); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-avail-line .sf-icon { inline-size: var(--sf-4); block-size: var(--sf-4); flex: none; }
.sf-avail-line__word { font-weight: var(--sf-w-bold); }
.sf-avail-line__why { font-weight: var(--sf-w-med); }
.sf-avail-line__more { min-block-size: var(--sf-tap-min); padding: 0 var(--sf-2); border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-link); font: var(--sf-w-semi) var(--sf-text-sm) var(--sf-font-ui); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sf-avail-line__more:hover { background: var(--sf-sunk); }
.sf-avail-line__more:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-rsheet__panels { display: grid; gap: var(--sf-4); min-width: 0; }
/* A named panel: a bordered card with a shaded header strip (small caps kicker, title, subtitle). Head to head and Season share it. */
.sf-panel, .sf-h2h, .sf-season { min-width: 0; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); }
.sf-panel__head { padding: var(--sf-3) var(--sf-4); border-bottom: 1px solid var(--sf-line); background: var(--sf-sunk); }
.sf-panel__kicker { margin: 0; font: var(--sf-w-semi) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-panel__title { margin: calc(var(--sf-1) / 2) 0 0; font: var(--sf-w-semi) var(--sf-text-md)/1.3 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-panel__sub { margin: calc(var(--sf-1) / 2) 0 0; font-size: var(--sf-text-sm); line-height: var(--sf-lh); color: var(--sf-ink-3); }
/* Head to head: a direction key over the bar column, then three rows (Baseline, Trend, Consistency) on one grid. A bar grows from the
   centre tick: right (accent) this runner is better, left (ink-2) the neighbour is. Not interactive. On a phone the result words sit
   under the bar, left-aligned, so the bar never shrinks; from 600px they take their own column. */
.sf-h2h__body { display: grid; gap: var(--sf-4); padding: var(--sf-3) var(--sf-4) var(--sf-4); }
.sf-h2h__key, .sf-h2h__row { display: grid; grid-template-columns: var(--sf-h2h-cols); column-gap: var(--sf-3); row-gap: var(--sf-1); align-items: center; min-width: 0; }
.sf-h2h__key > span:last-child { display: none; }
.sf-h2h__dir { display: flex; justify-content: space-between; gap: var(--sf-2); font: var(--sf-w-med) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-h2h__label { font: var(--sf-w-med) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-h2h__track { position: relative; display: block; block-size: calc(var(--sf-5) / 2); border-radius: var(--sf-r-pill); background: var(--sf-sunk); }
.sf-h2h__mid { position: absolute; inset-inline-start: 50%; inset-block-start: calc(50% - var(--sf-2)); inline-size: 1px; block-size: var(--sf-4); background: var(--sf-line-strong); }
.sf-h2h__fill { --w: 0%; position: absolute; inset-block: 0; inline-size: var(--w); }
.sf-h2h__fill--me { inset-inline-start: 50%; border-radius: 0 var(--sf-r-pill) var(--sf-r-pill) 0; background: var(--sf-accent); }
.sf-h2h__fill--them { inset-inline-end: 50%; border-radius: var(--sf-r-pill) 0 0 var(--sf-r-pill); background: var(--sf-ink-2); }
.sf-h2h__words { grid-column: 2; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); text-align: start; }
.sf-h2h__row--me .sf-h2h__words { color: var(--sf-accent-ink); }
.sf-h2h__row--them .sf-h2h__words { color: var(--sf-ink); }
.sf-h2h__row--even .sf-h2h__words { color: var(--sf-ink-2); }
.sf-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Season: the normalized marks over a fixed-height plot (percent x, pixel y), 48 px buttons over the marks, the footnote. */
.sf-season__body { display: grid; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4) var(--sf-4); }
.sf-season__plot { position: relative; inline-size: 100%; block-size: var(--sf-season-h); }
.sf-season__svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.sf-season__tick, .sf-season__date { font: var(--sf-w-reg) var(--sf-text-xs) var(--sf-font-num); font-variant-numeric: tabular-nums; fill: var(--sf-ink); }
.sf-season__date--open { font-weight: var(--sf-w-semi); }
.sf-season__axis { font: var(--sf-w-reg) var(--sf-text-xs) var(--sf-font-ui); fill: var(--sf-ink-3); }
.sf-season__trendlbl { font: var(--sf-w-semi) var(--sf-text-xs) var(--sf-font-ui); fill: var(--sf-accent); }
.sf-season__grid { stroke: var(--sf-line-soft); }
.sf-season__grid--base { stroke: var(--sf-line-strong); }
.sf-season__lines { overflow: visible; }
.sf-season__trend { stroke: var(--sf-accent); stroke-width: 1.5; stroke-dasharray: 2 3; }
.sf-season__line { stroke: var(--sf-accent); stroke-width: 2; stroke-linejoin: round; }
.sf-season__dot { fill: var(--sf-accent); }
.sf-season__dot--hollow { fill: var(--sf-paper); stroke: var(--sf-accent); stroke-width: 2; }
.sf-season__ring { fill: var(--sf-paper); stroke: var(--sf-accent); stroke-width: 2; }
.sf-season__ring[hidden] { display: none; }
.sf-season__pt { --x: 50%; --y: 50%; position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: var(--sf-tap); block-size: var(--sf-tap); translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sf-season__pt:hover { background: color-mix(in srgb, var(--sf-accent) 14%, transparent); }
.sf-season__pt:active { background: color-mix(in srgb, var(--sf-accent) 24%, transparent); }
.sf-season__pt:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -2px; }
.sf-season__foot, .sf-season__none { margin: 0; font-size: var(--sf-text-sm); line-height: var(--sf-lh); color: var(--sf-ink-3); }
.sf-season__legend { display: flex; flex-wrap: wrap; gap: var(--sf-1) var(--sf-4); margin: 0 0 var(--sf-2); padding: 0; list-style: none; font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-season__legend li { display: inline-flex; align-items: center; gap: var(--sf-1); }
.sf-season__key { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--sf-accent); box-sizing: border-box; }
.sf-season__key--hollow { background: var(--sf-paper); border: 2px solid var(--sf-accent); }
/* The action row: Out for this race alone on the left (48 tall); Compare with… outlined on the right only from a lineup (Q1). */
.sf-rsheet__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sf-3); padding-block-start: var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-rsheet__out, .sf-rsheet__compare { min-block-size: var(--sf-tap); }
@media (min-width: 600px) {
  .sf-h2h { --sf-h2h-cols: var(--sf-h2h-label-wide) minmax(0, 1fr) var(--sf-h2h-words); }
  .sf-h2h__key > span:last-child { display: block; }
  .sf-h2h__words { grid-column: auto; }
  .sf-modal--rsheet { width: min(480px, 92vw); }
}

/* ── Meet panel ── js/ui/meetPanelView.js on the shared sheet, `flush` (file 03): the facts rows, then the Adjusted times section on
   --sf-sunk with the Normalized mark card, the connector and the Projection card (two boxes, the lead-in, the difference rows). Rows
   are not interactive. States: Weather loading (.sf-mpanel__pill--wait, no projection), a date with no forecast yet
   (.sf-mpanel__box--pending), a missing course fact (.sf-mpanel__diff--missing). Phone sheet; 560 dialog from 600px. */
.sf-mpanel { display: grid; min-width: 0; }
.sf-mpanel__facts { display: grid; margin: 0; padding: var(--sf-1) var(--sf-6) var(--sf-2); min-width: 0; }
.sf-mpanel__fact { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-6); padding: var(--sf-3) 0; border-top: 1px solid var(--sf-line-soft); }
.sf-mpanel__fact:first-child { border-top: 0; }
.sf-mpanel__fact dt { margin: 0; font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-mpanel__fact dd { margin: 0; text-align: end; font: var(--sf-w-semi) var(--sf-text-nav)/1.3 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-mpanel__fact dd.sf-num { font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-mpanel__finish { font-size: var(--sf-text-xl); }
.sf-mpanel__fact--finish { padding-block-end: var(--sf-3); }
.sf-mpanel__fact--workout { padding-inline-start: var(--sf-3); border-inline-start: var(--sf-1) solid var(--sf-accent); color: var(--sf-accent-ink); }
.sf-mpanel__fact--workout dt { color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-mpanel__adjusted { display: grid; gap: var(--sf-3); padding: var(--sf-4) var(--sf-6) var(--sf-6); border-top: 1px solid var(--sf-line); background: var(--sf-sunk); }
.sf-mpanel__card { display: grid; gap: var(--sf-2); padding: var(--sf-4); border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); min-width: 0; }
.sf-mpanel__card--mark { gap: var(--sf-2); }
.sf-mpanel__card--proj { gap: var(--sf-3); }
.sf-mpanel__cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-3); }
.sf-mpanel__cardtitle { margin: 0; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-mpanel__cardsub { margin: 0; font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-mpanel__pill { padding: var(--sf-1) var(--sf-3); border-radius: var(--sf-r-pill); background: var(--sf-accent-soft); color: var(--sf-accent-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); white-space: nowrap; }
.sf-mpanel__pill--wait { background: var(--st-limited-soft); color: var(--st-limited); }
.sf-mpanel__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-3); }
.sf-mpanel__time, .sf-mpanel__boxtime { font: var(--sf-w-semi) var(--sf-text-3xl)/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-mpanel__under { font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-mpanel__caption, .sf-mpanel__lead { margin: 0; font-size: var(--sf-text-sm); line-height: var(--sf-lh); color: var(--sf-ink-3); }
.sf-mpanel__connector { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-2) 0 var(--sf-2) var(--sf-4); font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-mpanel__connector svg { flex: none; stroke: var(--sf-ink-3); }
.sf-mpanel__boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-3); }
.sf-mpanel__boxes--one { grid-template-columns: minmax(0, 1fr); }
.sf-mpanel__box { display: grid; gap: var(--sf-1); padding: var(--sf-3); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); min-width: 0; }
.sf-mpanel__box--day { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-mpanel__box--day .sf-mpanel__boxlabel, .sf-mpanel__box--day .sf-mpanel__boxcap { color: var(--sf-accent-ink); }
.sf-mpanel__box--pending { border-style: dashed; }
.sf-mpanel__boxlabel { font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-mpanel__boxcap { font-size: var(--sf-text-sm); line-height: var(--sf-lh); color: var(--sf-ink-3); }
.sf-mpanel__diffs { display: grid; }
.sf-mpanel__diff { display: grid; grid-template-columns: var(--sf-mpanel-label) minmax(0, 1fr) auto; column-gap: var(--sf-3); align-items: start; padding: var(--sf-2) 0; border-top: 1px solid var(--sf-line-soft); }
.sf-mpanel__diff--weather { border-top: 1px dashed var(--sf-line-strong); }
.sf-mpanel__difflabel { font-size: var(--sf-text-sm); line-height: 1.3; color: var(--sf-ink-3); }
.sf-mpanel__difftext { display: grid; gap: calc(var(--sf-1) / 2); min-width: 0; }
.sf-mpanel__diffbold { font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-mpanel__diffplain { font-size: var(--sf-text-sm); line-height: var(--sf-lh); color: var(--sf-ink-3); }
.sf-mpanel__effect { font-size: var(--sf-text-sm); line-height: 1.3; text-align: end; white-space: nowrap; }
.sf-mpanel__effect--sec { font-weight: var(--sf-w-semi); font-variant-numeric: tabular-nums; }
.sf-mpanel__diff--missing .sf-mpanel__diffbold { color: var(--sf-ink-2); }
@media (min-width: 600px) { .sf-modal--mpanel { width: min(560px, 92vw); } }

.sf-topten__swap { margin: var(--sf-3) 0 0; font-size: var(--sf-text-md); line-height: var(--sf-lh); color: var(--sf-ink-2); }

/* ── Pack summary ───────────────────────────── two tiles: Our five (total, ± half its 80% band, average) and 1st to 5th (the pack
   spread). States: not interactive (no hover, pressed, focus or disabled); loading (--loading, skeleton numerals); empty (fewer
   than five runners with a race: not drawn); error: the page's .sf-empty. */
.sf-packsum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); }
.sf-packsum__cell { min-width: 0; padding: var(--sf-3) var(--sf-4); }
.sf-packsum__cell + .sf-packsum__cell { border-inline-start: 1px solid var(--sf-line); }
.sf-packsum__k { font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-packsum__v { font-size: var(--sf-text-2xl); line-height: 1.1; }
.sf-packsum__sub { font-size: var(--sf-text-xs); color: var(--sf-ink-3); }
.sf-packsum--loading .sf-packsum__v { color: transparent; border-radius: var(--sf-1); background: var(--sf-line-soft); }

/* ── Place picker ───────────────────────────── S2: places 1 to 10 as a 5-wide grid of 48px buttons, one pressed.
   States: default; hover; pressed (:active); selected ([aria-pressed="true"]); focus; disabled; loading (the group's aria-busy);
   error (.is-error, a stop ring); empty: a race with no runners has no picker. */
.sf-placepick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sf-2); min-width: 0; }
.sf-placepick__btn {
  min-block-size: var(--sf-tap); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper);
  color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; cursor: pointer;
}
.sf-placepick__btn:hover { background: var(--sf-sunk); }
.sf-placepick__btn:active { transform: scale(.97); }
.sf-placepick__btn[aria-pressed="true"] { border-width: 2px; border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-placepick__btn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-placepick__btn:disabled { cursor: not-allowed; border-color: var(--sf-line); color: var(--sf-ink-3); }
.sf-placepick[aria-busy="true"] .sf-placepick__btn { cursor: progress; }
.sf-placepick.is-error .sf-placepick__btn { border-color: var(--sf-stop); }

@media (min-width: 600px) {
  .sf-topten__set .sf-seg { flex: 0 1 auto; grid-auto-columns: minmax(var(--sf-16), max-content); }
  .sf-topten { inline-size: 100%; max-inline-size: var(--sf-topten-max-tablet); margin-inline: auto; gap: var(--sf-4); }
}
@media (min-width: 1024px) {
  .sf-topten {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; max-inline-size: var(--sf-topten-max);
    grid-template-areas: "target target" "set set" "main side";
  }
  .sf-topten > [data-area="target"] { grid-area: target; }
  .sf-topten > [data-area="set"] { grid-area: set; }
  .sf-topten > [data-area="ladder"] { grid-column: 1 / -1; }
  .sf-topten__main { display: flex; flex-direction: column; gap: var(--sf-4); grid-area: main; min-width: 0; }
  .sf-topten__side { display: flex; flex-direction: column; gap: var(--sf-4); grid-area: side; min-width: 0; }
}

/* Runners hub (/runners, js/runnerHub.js; handoff prompt 02 B): two groups, "Roster tools" and "Rosters & runners". Phone: one card per group, 64px
   rows (a 40px icon tile, text, a 20px chevron; 16 left, 12 right; 12 between groups). From 600px each group is three equal tiles, gap 12:
   the tools 132 min and top-aligned (icon and chevron on the first line, text under), the rosters 72 min and centred. States: hover, pressed,
   focus ring, disabled (Compare without the Duel loaded), loading (skeleton rows, text hidden); no empty state (the page says so). */
.sf-hub { display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; }
.sf-hub__group { display: flex; flex-direction: column; gap: var(--sf-2); min-width: 0; }
.sf-hub__label { margin: 0; color: var(--sf-ink-3); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.sf-hub__list { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); }
.sf-hubrow { display: grid; grid-template-columns: var(--sf-10) minmax(0, 1fr) var(--sf-5); align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: var(--sf-16); padding: var(--sf-2) var(--sf-3) var(--sf-2) var(--sf-4); border: 0; border-top: 1px solid var(--sf-line-soft); background: none; color: var(--sf-ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.sf-hubrow:first-child { border-top: 0; }
.sf-hubrow:hover { background: var(--sf-page); }
.sf-hubrow:active { background: var(--sf-sunk); }
.sf-hubrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-hubrow:disabled { color: var(--sf-ink-3); cursor: not-allowed; background: none; }
.sf-hubrow__icon { display: grid; place-items: center; inline-size: var(--sf-10); block-size: var(--sf-10); border-radius: var(--sf-r-sm); background: var(--sf-sunk); color: var(--sf-ink); }
.sf-hubrow__icon svg, .sf-hubrow__go svg { inline-size: var(--sf-5); block-size: var(--sf-5); }
.sf-hubrow__go { color: var(--sf-ink-3); }
.sf-hubrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-hubrow__name { font: var(--sf-w-semi) var(--sf-text-lg)/1.25 var(--sf-font-ui); }
.sf-hubrow__sub { color: var(--sf-ink-2); font-size: var(--sf-text-sm); line-height: 1.3; }
.sf-hubrow--loading { cursor: default; }
.sf-hubrow--loading .sf-hubrow__icon, .sf-hubrow--loading .sf-hubrow__name, .sf-hubrow--loading .sf-hubrow__sub { border-radius: var(--sf-1); background: var(--sf-line-soft); color: transparent; }
@media (min-width: 600px) {
  .sf-hub__list { display: grid; grid-template-columns: repeat(var(--sf-hub-cols, 3), minmax(0, 1fr)); gap: var(--sf-3); overflow: visible; border: 0; background: none; }
  .sf-hubrow { min-block-size: 72px; padding: var(--sf-3) var(--sf-4); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); }
  .sf-hubrow:first-child { border-top: 1px solid var(--sf-line); }
  .sf-hubrow:hover { background: var(--sf-page); }
  .sf-hubrow:disabled { background: var(--sf-paper); }
  .sf-hub__list--tools .sf-hubrow { grid-template-columns: minmax(0, 1fr) var(--sf-5); grid-template-areas: "icon go" "text text"; align-content: start; align-items: start; min-block-size: 132px; }
  .sf-hub__list--tools .sf-hubrow__icon { grid-area: icon; justify-self: start; }
  .sf-hub__list--tools .sf-hubrow__go { grid-area: go; }
  .sf-hub__list--tools { --sf-hub-cols: 2; }
  .sf-hub__list--tools .sf-hubrow__text { grid-area: text; }
}
@media (min-width: 1024px) { .sf-hub__list--tools { --sf-hub-cols: 3; } }
@media (min-width: 1280px) { .sf-hub__list--tools { --sf-hub-cols: 5; } }

/* Compare picker (Runners → Compare two runners, handoff prompt 02 C; js/runnerCompare.js): a sheet on a phone, a 560px dialog from 600px.
   .sf-cmp__top holds two 56-tall slots (gap 8) and one row with the search field and the Boys | Girls | All switch; the list under it is
   56-tall rows (A/B mark, name over grade · gender, the 5K PR in the number font) under 40-tall group headers. The top stays while the
   list scrolls. States: slot empty (dashed) and filled (accent border on accent-soft, a 40px clear button); row default, hover, pressed,
   picked (accent-soft, filled mark), focus ring; loading is the sheet's spinner; empty is .sf-cmp__empty; the foot primary is disabled
   until both are picked and spins while the pair is confirmed. */
.sf-cmp__top { position: sticky; inset-block-start: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--sf-3); padding: var(--sf-1) var(--sf-4) var(--sf-3); background: var(--sf-paper); border-bottom: 1px solid var(--sf-line-soft); }
.sf-cmp__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-cmp__slot { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-1); min-width: 0; min-block-size: 56px; padding: 0 var(--sf-1) 0 var(--sf-3); border: 1.5px dashed var(--sf-line-strong); border-radius: var(--sf-r-sm); color: var(--sf-ink-3); }
.sf-cmp__slot.is-filled { border-style: solid; border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-ink); }
.sf-cmp__slottext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-cmp__slotkey { font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .05em; color: var(--sf-ink-3); }
.sf-cmp__slot.is-filled .sf-cmp__slotkey { color: var(--sf-accent-ink); }
.sf-cmp__slotname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-cmp__clear { flex: none; inline-size: var(--sf-10); block-size: var(--sf-10); color: var(--sf-ink-2); }
.sf-cmp__clear svg { inline-size: var(--sf-5); block-size: var(--sf-5); }
.sf-cmp__filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-2); }
.sf-cmp__filter .sf-searchbox { min-block-size: calc(var(--sf-tap-min) + 6px); }
.sf-cmp__list { display: flex; flex-direction: column; min-width: 0; }
.sf-cmp__group { margin: 0; display: flex; align-items: center; min-block-size: var(--sf-10); padding: 0 var(--sf-4); background: var(--sf-page); color: var(--sf-ink-3); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.sf-cmp__row { display: grid; grid-template-columns: var(--sf-6) minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: var(--sf-2) var(--sf-4); border: 0; border-bottom: 1px solid var(--sf-line-soft); background: var(--sf-paper); color: var(--sf-ink); text-align: start; cursor: pointer; }
.sf-cmp__row:hover { background: var(--sf-page); }
.sf-cmp__row:active { background: var(--sf-sunk); }
.sf-cmp__row:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-cmp__row.is-picked { background: var(--sf-accent-soft); }
.sf-cmp__mark { display: grid; place-items: center; inline-size: var(--sf-6); block-size: var(--sf-6); border: 2px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-on-accent); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); }
.sf-cmp__mark.is-on { border-color: var(--sf-accent); background: var(--sf-accent); }
.sf-cmp__who { display: flex; flex-direction: column; min-width: 0; }
.sf-cmp__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-cmp__sub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-cmp__pr { font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; text-align: end; }
.sf-cmp__pr.is-none { color: var(--sf-ink-3); }
.sf-cmp__empty { margin: 0; padding: var(--sf-6) var(--sf-4); color: var(--sf-ink-3); text-align: center; }

/* Combine runners dialog (js/combineAthletes.js, plan 2026-10-29-combine-athletes C4): a sheet on a phone, a centred dialog from 600px (ctx.sheet).
   Step 1: .sf-cmb__top (the search field, stays while the list scrolls) over .sf-cmb__row buttons, two lines each: the full name (wraps, never truncated),
   then .sf-cmb__chips (grade, gender, rosters). Step 2: .sf-cmb__choice, the two large choices (radio). States: row and choice default, hover, pressed,
   picked / chosen (accent-soft, filled mark), focus ring; loading is the sheet's spinner; empty is .sf-cmb__empty; the stop and warn lines are .sf-note. */
.sf-cmb__top { position: sticky; inset-block-start: 0; z-index: 1; padding: var(--sf-1) var(--sf-4) var(--sf-3); background: var(--sf-paper); border-bottom: 1px solid var(--sf-line-soft); }
.sf-cmb__list { display: flex; flex-direction: column; min-width: 0; }
.sf-cmb__row { display: grid; grid-template-columns: var(--sf-6) minmax(0, 1fr); align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: var(--sf-tap); padding: var(--sf-2) var(--sf-4); border: 0; border-bottom: 1px solid var(--sf-line-soft); background: var(--sf-paper); color: var(--sf-ink); text-align: start; cursor: pointer; }
.sf-cmb__row:hover { background: var(--sf-page); }
.sf-cmb__row:active { background: var(--sf-sunk); }
.sf-cmb__row:focus-visible, .sf-cmb__choice:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-cmb__row.is-picked { background: var(--sf-accent-soft); }
.sf-cmb__mark, .sf-cmb__radio { display: grid; place-items: center; inline-size: var(--sf-6); block-size: var(--sf-6); border: 2px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-on-accent); }
.sf-cmb__mark.is-on, .sf-cmb__choice.is-on .sf-cmb__radio { border-color: var(--sf-accent); background: var(--sf-accent); }
.sf-cmb__mark svg, .sf-cmb__radio svg { inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-cmb__who { display: flex; flex-direction: column; gap: var(--sf-1); min-width: 0; }
.sf-cmb__name { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-cmb__chips { display: flex; flex-wrap: wrap; gap: var(--sf-1); }
.sf-cmb__chip { display: inline-flex; align-items: center; padding: 2px var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-med) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-cmb__empty { margin: 0; padding: var(--sf-6) var(--sf-4); color: var(--sf-ink-3); text-align: center; }
.sf-cmb__bar { display: flex; align-items: center; padding: var(--sf-1) var(--sf-2) 0; }
.sf-cmb__ask { margin: 0; padding: var(--sf-2) var(--sf-4) var(--sf-3); font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-cmb__choices { display: flex; flex-direction: column; gap: var(--sf-2); padding: 0 var(--sf-4) var(--sf-3); }
.sf-cmb__choice { display: grid; grid-template-columns: var(--sf-6) minmax(0, 1fr); align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 72px; padding: var(--sf-3) var(--sf-4); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink); text-align: start; cursor: pointer; }
.sf-cmb__choice:hover { background: var(--sf-page); }
.sf-cmb__choice:active { background: var(--sf-sunk); }
.sf-cmb__choice.is-on { border-color: var(--sf-accent); background: var(--sf-accent-soft); }
.sf-cmb__moves, .sf-cmb__choices ~ .sf-note { margin-inline: var(--sf-4); }
@media (min-width: 600px) { .sf-cmb__choices { flex-direction: row; } .sf-cmb__choice { flex: 1 1 0; } }

/* Print (Duel and Top Ten ⋯ → Print): the report only, every folded section open, each chart's text table shown (.sf-chart__table). */
@media print {
  .sf-appbar, .sf-duel__actions,.sf-duel__target .sf-btn { display: none !important; }
  .sf-duelsec__toggle .sf-fold { display: none !important; }
  .sf-duelsec__body[hidden] { display: block !important; }
  .sf-duel, .sf-topten { max-inline-size: none; }
}

/* The shared report's print view (js/reportShare.js, Share → Save PDF). Hidden on screen; while printing it is the only thing on the page.
   Rows keep together; no header bar, no buttons, nothing sticky. */
.sf-printview, .sf-report { display: none; }
.sf-printview__head { display: grid; gap: var(--sf-1); padding-block-end: var(--sf-4); border-block-end: 2px solid var(--sf-ink); }
.sf-printview__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-xl)/var(--sf-lh-tight) var(--sf-font-ui); }
.sf-printview__sub { margin: 0; color: var(--sf-ink-2); font-size: var(--sf-text-md); }
.sf-printview__rows { margin: 0; padding: 0; list-style: none; }
.sf-printview__row { display: grid; grid-template-columns: var(--sf-8) minmax(0, 1fr) auto auto auto auto; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-10); border-block-end: 1px solid var(--sf-line); break-inside: avoid; }
.sf-printview__name { font-weight: var(--sf-w-semi); }
.sf-printview__time { text-align: end; font-weight: var(--sf-w-bold); }
.sf-printview__gap, .sf-printview__grade, .sf-printview__status { color: var(--sf-ink-2); text-align: end; }
.sf-printview__why { padding-block-start: var(--sf-4); break-inside: avoid; }
.sf-printview__h { margin: 0 0 var(--sf-2); font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-printview__line { margin: 0 0 var(--sf-2); break-inside: avoid; }
.sf-printview__foot { padding-block-start: var(--sf-4); color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
@media print {
  html.sf-printing-report .sf-app, html.sf-printing-report .sf-toast { display: none !important; }
  html.sf-printing-report .sf-printview, html.sf-printing-report .sf-report { display: block; }
}

/* Top ten, Print report (js/ui/reportExport.js reportDocument, js/runnerTopTen.js). A hidden document inside the page; while printing it is the only thing shown
   (html.sf-printing-report above). Page 1 is the report as the screen shows it, page 2 on is the tables. Black on white (tokens.css gives .sf-report the light set).
   A table row never splits, a caption stays with its table, a long table repeats its header row. Paper: letter, or A4 with .sf-report--a4 (named pages;
   js/runnerTopTen.js also writes the @page size for browsers without them). */
.sf-report { page: sf-report; color: var(--sf-ink); background: var(--sf-paper); font: var(--sf-text-sm)/var(--sf-lh-tight) var(--sf-font-ui); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sf-report--a4 { page: sf-report-a4; }
.sf-report__head { display: grid; gap: var(--sf-1); padding-block-end: var(--sf-3); border-block-end: 2px solid var(--sf-ink); }
.sf-report__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-xl)/var(--sf-lh-tight) var(--sf-font-ui); }
.sf-report__course { margin: 0; font-size: var(--sf-text-md); font-weight: var(--sf-w-semi); }
.sf-report__line { margin: 0; color: var(--sf-ink-2); }
.sf-report__tiles { display: flex; gap: var(--sf-3); padding-block: var(--sf-3); }
.sf-report__tile { display: grid; gap: var(--sf-1); flex: 1 1 0; padding: var(--sf-3); border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-md); break-inside: avoid; }
.sf-report__k, .sf-report__sub, .sf-report__meta { color: var(--sf-ink-2); }
.sf-report__v { font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-report__callout { display: grid; gap: var(--sf-1); margin-block: var(--sf-2); padding: var(--sf-2) var(--sf-3); border: 1px solid var(--sf-line-strong); border-inline-start-width: var(--sf-1); border-radius: var(--sf-r-md); break-inside: avoid; }
.sf-report__calltext { margin: 0; }
.sf-report__pair { display: flex; flex-wrap: wrap; gap: var(--sf-1) var(--sf-4); margin: 0; padding: 0; list-style: none; }
.sf-report__note { margin: var(--sf-2) 0; color: var(--sf-ink-2); }
.sf-report__table { inline-size: 100%; border-collapse: collapse; margin-block-start: var(--sf-3); font-variant-numeric: tabular-nums; }
.sf-report__table caption { text-align: start; font: var(--sf-w-bold) var(--sf-text-md)/var(--sf-lh-tight) var(--sf-font-ui); padding-block-end: var(--sf-1); break-after: avoid; }
.sf-report__table thead { display: table-header-group; }
.sf-report__table tr { break-inside: avoid; }
.sf-report__table th, .sf-report__table td { padding: var(--sf-1) var(--sf-2); border-block-start: 1px solid var(--sf-line-strong); text-align: start; vertical-align: top; font-weight: var(--sf-w-reg); }
.sf-report__table thead th, .sf-report__table tbody th[scope="row"] { font-weight: var(--sf-w-bold); }
.sf-report__table .sf-report__n { text-align: end; font-family: var(--sf-font-num); }
.sf-report__band th { padding-block-start: var(--sf-3); font-weight: var(--sf-w-bold); text-transform: none; border-block-start: 2px solid var(--sf-ink); break-after: avoid; }
.sf-report__barcell { inline-size: 28%; }
.sf-report__barcell .sf-rangebar { margin-block-end: var(--sf-1); }
.sf-report__name { font-weight: var(--sf-w-semi); }
.sf-report__why { display: block; color: var(--sf-ink-2); }
.sf-report__chip { display: inline-block; margin-inline-end: var(--sf-1); padding: 0 var(--sf-2); border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); font-size: var(--sf-text-xs); }
.sf-report__more { break-before: page; }
.sf-report__foot { padding-block-start: var(--sf-4); color: var(--sf-ink-2); }
@page sf-report { size: letter; margin: 14mm; @bottom-left { content: "spikefreak"; } @bottom-right { content: "Page " counter(page) " of " counter(pages); } }
@page sf-report-a4 { size: A4; margin: 14mm; @bottom-left { content: "spikefreak"; } @bottom-right { content: "Page " counter(page) " of " counter(pages); } }

/* Tag chip (race tags): a toggle on a runner row. Off is dashed, on is solid final. 28 tall, 44 hit area. */
.sf-tagchip { position: relative; display: inline-flex; align-items: center; gap: var(--sf-1); min-block-size: 28px; padding: 0 var(--sf-2); font: inherit; font-size: var(--sf-text-sm); font-weight: var(--sf-w-semi); line-height: 1; white-space: nowrap; color: var(--sf-ink-3); background: transparent; border: 1.5px dashed var(--sf-line-strong); border-radius: var(--sf-r-pill); cursor: pointer; }
.sf-tagchip::after { content: ""; position: absolute; inset: -8px -4px; }
.sf-tagchip .sf-icon { inline-size: var(--sf-4); block-size: var(--sf-4); opacity: .45; }
.sf-tagchip:hover { background: var(--sf-line-soft); }
.sf-tagchip:active { background: var(--sf-line); }
.sf-tagchip:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-tagchip[aria-pressed="true"] { color: var(--sf-final); background: var(--sf-final-soft); border-style: solid; border-color: var(--sf-final-soft); }
.sf-tagchip[aria-pressed="true"] .sf-icon { opacity: 1; }
.sf-tagchip:disabled { cursor: default; opacity: .7; }
.sf-tagchip.is-busy .sf-spinner { inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-tagchip.is-error { border-color: var(--sf-stop); border-style: solid; }
.sf-tagchip--static { cursor: default; border-style: solid; border-color: var(--sf-final-soft); }
.sf-tagchip--static::after { content: none; }

/*
 * Meet results, coach mode (js/shared/meetResultsView.js, the meet page's Results tab). Phone: the summary card, then one foldable card per race
 * with two-line rows. From 768 the rows are a table and the summary spreads across the top; from 1024 the summary is a 340 sticky left column
 * (facts, KPIs, both charts, the race list with Replay) and the races are open sections on the right. Spikefan's own page keeps its .rs-* rules.
 */
.mr-host { display: grid; gap: var(--sf-3); min-inline-size: 0; }
/* Add / update results: in the meet page's tab row (right-aligned), else above the view. */
.mr-tools { display: flex; align-items: center; justify-content: flex-end; }
.mr-import { flex: none; justify-content: center; gap: var(--sf-1); block-size: var(--sf-tap); min-block-size: var(--sf-tap); padding: 0 var(--sf-3); white-space: nowrap; }
.mr-import__what { font-size: var(--sf-text-md); }
.mr, .mr-body { min-inline-size: 0; }
/* The meet page's one frame (handoff_meet_page_shared 04): spikefan's .rs-grid and the coach page's .sf-meetgrid are this one rule. Phone: one column, gap 16.
   600 to 1023: two columns 324 | 1fr, gap 24. From 1024: 400 | 1fr. Left: the head card, then Logistics. Right: the coach strip (coach only), then the races. */
:is(.sf-meetgrid, .rs-grid) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-4); align-items: start; inline-size: 100%; min-inline-size: 0; }
:is(.sf-meetgrid__left, .sf-meetgrid__right, .rs-side, .rs-main) { display: grid; grid-auto-rows: max-content; gap: var(--sf-4); min-inline-size: 0; align-content: start; }
@media (min-width: 600px) { :is(.sf-meetgrid, .rs-grid) { grid-template-columns: 324px minmax(0, 1fr); gap: var(--sf-6); } }
@media (min-width: 1024px) { :is(.sf-meetgrid, .rs-grid) { grid-template-columns: 400px minmax(0, 1fr); } }
.mr-main { display: grid; gap: var(--sf-4); min-inline-size: 0; align-content: start; }

.mr-racelist .rs-racegrid { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--sf-line); border-radius: calc(var(--sf-r-md) + 2px); background: var(--sf-paper); overflow: hidden; }
.mr-racelist .sf-racebtn { block-size: 52px; border: 0; border-top: 1px solid var(--sf-line-soft); border-radius: 0; }
.mr-racelist .sf-racebtn:first-child { border-top: 0; }
.mr-racelist .sf-racebtn__count { min-inline-size: 56px; background: none; border-inline-start-color: var(--sf-line-soft); color: var(--sf-ink-2); }
.mr-racelist .sf-racebtn__replay { border-inline-start-color: var(--sf-line-soft); }
/* A race is a fold (meetResultsView.js buildRaceFold; spikefan's .rs-group and the coach page's .mr-race share these rules). One 16 inset on the head, the Ours band, the
   column header and every row; the card's children run to its edges with 1px dividers. Row 1: ring 36 | course tile 56 (only a race with its own course) | name and distance |
   start time, then the ring 36 at the END of the row (open and closed, it never moves), on one centre line, gap 12. A closed race with results adds one "Results in" line under row 1.
   Row 2: the standard weather pill, with the coach ⋮ at its end. Row 3: the two stat tiles. A closed race is the 64 row. */
.rs-group, .mr-race { padding: 0; min-inline-size: 0; container-type: inline-size; }
.rs-group__head, .mr-race__head { display: grid; gap: var(--sf-3); padding: var(--sf-3) var(--sf-4); background: var(--sf-race-head); border-start-start-radius: inherit; border-start-end-radius: inherit; }
.rs-group.is-shut > .rs-group__head, .mr-race.is-shut > .mr-race__head { padding-block: var(--sf-1); min-block-size: var(--sf-16); background: var(--sf-paper); border-radius: inherit; }
.rs-group__row, .mr-race__row { display: flex; align-items: center; gap: var(--sf-3); min-inline-size: 0; min-block-size: var(--sf-12); cursor: pointer; }
.rs-group.is-shut .rs-group__row, .mr-race.is-shut .mr-race__row { min-block-size: calc(var(--sf-16) - var(--sf-2)); }
.rs-group__fold, .mr-race__fold { flex: 1 1 0; min-inline-size: 0; min-block-size: var(--sf-tap-min); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; touch-action: manipulation; }
.rs-group__fold:focus-visible, .mr-race__fold:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.rs-group__tile, .mr-race__tile { flex: none; display: block; inline-size: 56px; block-size: 56px; }
:is(.rs-group__tile, .mr-race__tile) > .sf-mapthumb { inline-size: 56px; block-size: 56px; border-radius: var(--sf-r-tile); }
:is(.rs-group__tile, .mr-race__tile) .sf-mapthumb__badge { display: none; }
.rs-group__text, .mr-race__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-1) var(--sf-2); min-inline-size: 0; }
.rs-group__name, .mr-race__name { font: var(--sf-w-bold) var(--sf-text-xl)/1.2 var(--sf-font-ui); overflow-wrap: break-word; }
.rs-group__dist, .mr-race__dist { font: var(--sf-w-bold) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); white-space: nowrap; }
.rs-group__wx, .mr-race__wx { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); min-inline-size: 0; } /* the repo pill at its own size; it is never edited here */
.rs-group__start, .mr-race__start { font: var(--sf-w-reg) var(--sf-text-sm)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-3); white-space: nowrap; }
.rs-group__summary, .mr-race__summary { display: flex; align-items: center; gap: var(--sf-2); min-inline-size: 0; }
.rs-group__sumchip, .mr-race__sumchip { display: inline-flex; align-items: center; gap: var(--sf-1); block-size: 28px; padding-inline: var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-accent-soft); color: var(--sf-accent-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); white-space: nowrap; }
:is(.rs-group__sumchip, .mr-race__sumchip) .sf-icon { inline-size: 16px; block-size: 16px; }
.rs-group__sumcount, .mr-race__sumcount { font: var(--sf-w-reg) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-3); }
.rs-group:not(.is-shut) > .rs-group__head > .rs-group__summary, .mr-race:not(.is-shut) > .mr-race__head > .mr-race__summary { display: none; }
.rs-group.is-shut > .rs-group__head > .sf-racestats, .mr-race.is-shut > .mr-race__head > .sf-racestats { display: none; }
.rs-group.is-shut > .rs-group__head > .rs-group__wx { display: none; }
.mr-race.is-shut > .mr-race__head > .mr-race__wx > :not(.mr-race__more) { display: none; } /* closed: the pill hides, the coach ⋮ stays reachable */
/* The two stat tiles: one fill (accent-soft), radius 8, padding 8 / 12, one row. A phone card: the top finisher takes the rest of the row, PRs · SBs sizes to its content. */
.sf-racestats { display: grid; grid-template-columns: auto auto; justify-content: start; gap: var(--sf-2); min-inline-size: 0; }
@container (max-width: 479px) { .sf-racestats { grid-template-columns: minmax(0, 1fr) auto; } }
.sf-racestat { display: grid; gap: var(--sf-1); align-content: start; min-inline-size: 0; padding: var(--sf-2) var(--sf-3); border-radius: var(--sf-r-tile); background: var(--sf-accent-soft); color: var(--sf-ink); }
.sf-racestat__label { font: var(--sf-w-bold) 11px/1 var(--sf-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-accent-ink); white-space: nowrap; }
.sf-racestat__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-racestat__big { white-space: nowrap; font: var(--sf-w-bold) 26px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-racestat--pb .sf-racestat__big { font-size: var(--sf-text-2xl); }
/* The Ours band: 48 high, accent-soft, "Ours" left and ours/field right, both 18 bold. */
.sf-ourbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); min-block-size: var(--sf-12); padding-inline: var(--rr-inset, var(--sf-4)); border-block-start: 1px solid var(--sf-line); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-ourbar__title { font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-ourbar__count { font: var(--sf-w-bold) var(--sf-text-lg)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
/* The body is the rows' frame: --rr-cols is the one column template of the column header and every row. Wide (a card of 480 or more): place 48, name, tag 48, pace 56, time 64,
   gap 12. A narrow card: 36, name, tag 36, pace 44, time 52, gap 8. A race with a Workout or Medical chip widens the tag slot for the whole race, so the times still line up. */
.rs-group__body, .mr-race__body { --rr-tag: 48px; --rr-gap: var(--sf-3); --rr-cols: 48px minmax(0, 1fr) var(--rr-tag) 56px 64px; display: grid; min-inline-size: 0; padding: 0; }
@container (max-width: 479px) {
  /* phone: header, Ours band and rows all sit 12 in from the card edge */
  :is(.rs-group__body, .mr-race__body, .sf-ourbar) { --rr-inset: var(--sf-3); }
  .rs-group__body, .mr-race__body { --rr-tag: 36px; --rr-gap: var(--sf-2); --rr-cols: 32px minmax(0, 1fr) 48px 56px; }
  .rs-group__body:has(.sf-flag--pr, .sf-flag--sb, .has-chips), .mr-race__body:has(.sf-flag--pr, .sf-flag--sb, .has-chips) { --rr-cols: 32px minmax(0, 1fr) var(--rr-tag) 48px 56px; }
  /* the PR / SB column is not drawn on a phone unless a row in the race carries a flag or a tag chip */
  .rs-group__body:not(:has(.sf-flag--pr, .sf-flag--sb, .has-chips)) :is(.rs-flagcol, .mr-c-tag, .mr-row__tags, .sf-rhead__c--tag),
  .mr-race__body:not(:has(.sf-flag--pr, .sf-flag--sb, .has-chips)) :is(.rs-flagcol, .mr-c-tag, .mr-row__tags, .sf-rhead__c--tag) { display: none; }
}
.rs-group__body:has(.has-chips), .mr-race__body:has(.has-chips) { --rr-tag: 96px; }
.rs-group.is-shut > .rs-group__body, .mr-race.is-shut > .mr-race__body { display: none; }
.mr-race__rows { min-inline-size: 0; }
.mr-race__more { flex: none; margin-inline-start: auto; inline-size: 40px; block-size: var(--sf-tap-min); color: var(--sf-ink-2); } /* on the pill row, its centre under the ring */
.mr-race.is-painting > .mr-race__head { display: none; }
@media print { .rs-group.is-shut > .rs-group__body, .mr-race.is-shut > .mr-race__body { display: grid; } .sf-standings.is-shut > .sf-standings__panel { display: block; } }
.mr-empty { margin: 0; padding: var(--sf-4); color: var(--sf-ink-2); }
/* Team scores (card T2): Place · School · Points. One grid for the header band and every row. In a coach race card the block sits above the results
   (beside them from 1024); on spikefan it is the first child of a race group (races.css places it). */
.sf-standings { min-inline-size: 0; border-block-start: 1px solid var(--sf-line-soft); overflow: hidden; } /* a fold row inside the race card: it runs to the card's edges, a 1px top divider */
.sf-standings__head { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-12); padding-inline: var(--sf-3); border-bottom: 1px solid var(--sf-line-soft); font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-standings__head--fold { padding-inline: 0; min-block-size: 56px; }
.sf-standings__label { flex: 1; min-inline-size: 0; }
.sf-standings__toggle { display: flex; flex: 1; align-items: center; gap: var(--sf-2); min-inline-size: 0; min-block-size: 56px; padding: 0 var(--sf-4); border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sf-standings__toggle:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-standings__count { color: var(--sf-ink-2); font: var(--sf-w-reg) 14px/1 var(--sf-font-ui); }
.sf-standings__place-of { font: var(--sf-w-bold) 18px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-standings:not(.is-shut) .sf-standings__place-of { display: none; }
.sf-standings.is-shut > .sf-standings__head { border-bottom-color: transparent; }
.sf-standings.is-shut > .sf-standings__panel { display: none; }
.sf-standings__loading { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-3) var(--sf-3) 0; }
.sf-standings__state { color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); }
.sf-standings__skel { display: grid; gap: var(--sf-3); padding: var(--sf-3); }
.sf-standings__skel > span { display: block; block-size: var(--sf-5); border-radius: var(--sf-r-sm); background: var(--sf-sunk); }
.sf-standings__skel > span:nth-child(2) { inline-size: 80%; }
.sf-standings__skel > span:nth-child(3) { inline-size: 60%; }
.sf-standings__failed { display: grid; justify-items: start; gap: var(--sf-3); padding: var(--sf-3); }
.sf-standings__error { display: flex; align-items: center; gap: var(--sf-2); color: var(--sf-stop-ink); font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-standings__error svg { flex: none; inline-size: var(--sf-5); block-size: var(--sf-5); }
.sf-standings__cols, .sf-standings__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 72px; align-items: center; column-gap: var(--sf-3); padding-inline: var(--sf-4); }
.sf-standings__cols { block-size: 44px; background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.sf-standings__h--n { text-align: right; }
.sf-standings__row { min-block-size: 48px; padding-block: var(--sf-1); border-top: 1px solid var(--sf-line-soft); }
.sf-standings__row.is-ours { background: var(--sf-accent-soft); box-shadow: inset 3px 0 0 var(--sf-accent); }
.sf-standings__row.is-ours .sf-standings__name { font-weight: var(--sf-w-bold); }
.sf-standings__place { display: grid; justify-items: end; text-align: right; }
.sf-standings__num, .sf-standings__pts { font: var(--sf-w-bold) var(--sf-text-lg)/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-standings__pts { text-align: right; }
.sf-standings__tie { display: inline-flex; align-items: center; gap: var(--sf-1); color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-xs)/1.2 var(--sf-font-ui); }
.sf-standings__tie svg { inline-size: var(--sf-3); block-size: var(--sf-3); }
.sf-standings__school { display: grid; justify-items: start; gap: var(--sf-1); min-inline-size: 0; }
.sf-standings__name { min-inline-size: 0; overflow-wrap: anywhere; white-space: normal; font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); color: var(--sf-ink); text-decoration: none; }
a.sf-standings__name { color: var(--sf-accent-ink); }
a.sf-standings__name:hover { text-decoration: underline; }
a.sf-standings__name:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-standings__mine { display: inline-flex; align-items: center; gap: var(--sf-1); block-size: var(--sf-6); padding-inline: var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-accent-soft); color: var(--sf-accent-ink); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); }
.sf-standings__mine svg { inline-size: var(--sf-4); block-size: var(--sf-4); }
.sf-standings__row.is-ours .sf-standings__mine { background: var(--sf-paper); }
/* The result rows, one rule for both pages (handoff_meet_page_shared 05 items 1, 7, 8): the phone rows and the table, the coach's mr-* and spikefan's rs-*, are the same grid, --rr-cols
   (the race body sets it). One line each, min 48, padding 6 / 16: place | name (one line, an ellipsis when it does not fit: handoff_meet_page_folds 03 item 5) | PR / SB slot | pace | time.
   The column header is 36 high, 12 caps. The rows run to the card's edges: no box, no side bar. */
.mr-rows { list-style: none; margin: 0; padding: 0; }
.mr-phonerows, .rs-rows { min-inline-size: 0; }
.sf-rhead, :is(.rs-row, .mr-row, .rs-table tr, .mr-table tr) { display: grid; grid-template-columns: var(--rr-cols); align-items: center; column-gap: var(--rr-gap); padding-inline: var(--rr-inset, var(--sf-4)); }
.sf-rhead, :is(.rs-table, .mr-table) thead tr { min-block-size: calc(var(--sf-12) - var(--sf-3)); background: var(--sf-sunk); border-block-start: 1px solid var(--sf-line-soft); color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.sf-rhead__c.n, :is(.rs-table, .mr-table) th.n { text-align: end; }
:is(.rs-table, .mr-table) th { background: none; white-space: nowrap; font: inherit; }
:is(.rs-row, .mr-row, .rs-table tbody tr, .mr-table tbody tr) { position: relative; min-block-size: var(--sf-12); padding-block: calc(var(--sf-1) * 1.5); border-block-start: 1px solid var(--sf-line-soft); }
.mr-table td.mr-c-name { position: relative; }
.mr-rows .mr-row:first-child { border-block-start: 0; }
.mr-row__pl, .rs-row__order, .mr-c-pl, .rs-c-place { color: var(--sf-ink-2); font: var(--sf-w-semi) 14px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; text-align: start; white-space: nowrap; }
.mr-row__who, .rs-row__who { display: grid; min-inline-size: 0; }
.mr-row__tags, .mr-c-tag, .rs-flagcol { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: var(--sf-1); min-inline-size: 0; }
.mr-row__pace, .rs-row__pace, .mr-c-pace, .rs-c-pace { color: var(--sf-ink-2); font: var(--sf-w-semi) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; text-align: end; }
.mr-row__time, .rs-row__time, .mr-c-time, :is(.rs-table, .mr-table) td.n:last-child { font: var(--sf-w-bold) 17px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; text-align: end; }
.mr-name, .rs-row__name, .rs-t-nametext { display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); }
.mr-name { color: var(--sf-link); text-decoration: none; }
a.mr-name:hover { text-decoration: underline; }
a.mr-name:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
span.mr-name { color: var(--sf-ink); }
.rs-row { inline-size: 100%; border: 0; background: none; color: var(--sf-ink); text-align: start; cursor: pointer; touch-action: manipulation; }
.rs-namebtn { display: block; max-inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mr-tablecard, .rs-tablecard { inline-size: 100%; min-inline-size: 0; }
.mr-table, .rs-table { display: block; inline-size: 100%; min-inline-size: 0; }
:is(.mr-table, .rs-table) :is(thead, tbody) { display: block; }
/* The cells are grid items of the row: the generic .sf-table cell border, padding, sticky first column and its shadow line never reach them. The row's own border is the only line. */
:is(.mr-table, .rs-table) :is(td, th), :is(.mr-table, .rs-table) :is(td, th):first-child { border: 0; padding: 0; min-inline-size: 0; position: static; box-shadow: none; }
/* One race's own page: the summary row, then the rows in one card */
.mr-racepage { display: grid; gap: var(--sf-3); min-inline-size: 0; }
.mr-racesum { display: grid; gap: var(--sf-1); padding: var(--sf-3) var(--sf-4); }
.mr-racesum__when { font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.mr-racesum__meta { font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-3); overflow-wrap: anywhere; }
@media (min-width: 600px) { .mr-racepage { gap: var(--sf-4); } .mr-racesum { padding-inline: var(--sf-5); } }

/* Tag runners (paint mode): the race head becomes a dark bar with Done, the palette sits in the page flow under it, each row gets a check box. */
.mr-paintbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-2); min-block-size: 56px; padding: var(--sf-1) var(--sf-2) var(--sf-1) var(--sf-4); background: var(--sf-ink); color: var(--sf-paper); border-start-start-radius: inherit; border-start-end-radius: inherit; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.mr-paintbar__title { min-inline-size: 0; overflow-wrap: anywhere; margin-inline-end: auto; }
.mr-paintbar__done { flex: none; min-block-size: var(--sf-tap); }
.mr-palette { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-2); padding: var(--sf-2) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); }
.mr-paintbar .mr-palette { display: flex; padding: 0; border: 0; }
.mr-pal { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-2); min-block-size: var(--sf-tap-min); }
.mr-pal[aria-pressed="true"] { border: 2px solid var(--sf-accent); }
.mr-pal--medical { color: var(--sf-stop-ink); }
.mr-pal__key { font: var(--sf-w-semi) var(--sf-text-xs)/1 var(--sf-font-num); color: var(--sf-ink-3); }
.mr-check { display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; border: 2px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); color: var(--sf-on-accent); }
.mr-check svg { inline-size: var(--sf-4); block-size: var(--sf-4); }
.mr-check.is-off { visibility: hidden; }
.is-picked > .mr-check, .is-picked > .mr-c-check .mr-check { background: var(--sf-accent); border-color: var(--sf-accent); }
.mr-row--paint, .mr-table--paint tr { grid-template-columns: var(--sf-6) var(--rr-cols); } /* paint mode: a check box column in front of the row's own columns (the phone header gets an empty first cell) */
.mr-phonerows:has(.mr-row--paint) > .sf-rhead { grid-template-columns: var(--sf-6) var(--rr-cols); }
.mr-row--paint { cursor: pointer; }
.mr-row--paint:focus-visible, .mr-tr--paint:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.mr-tr--paint { cursor: pointer; }
.mr-row.is-picked, .mr-row.is-held, .mr-table tr.is-picked, .mr-table tr.is-held { background: var(--sf-accent-soft); }
/* A tagged result is the only tinted row: Workout warn, Medical stop. */
.mr-row.is-tag-workout, .mr-table tr.is-tag-workout { background: var(--sf-warn-soft); }
.mr-row.is-tag-medical, .mr-table tr.is-tag-medical { background: var(--sf-stop-soft); }
.mr-pop { position: absolute; inset-block-start: 100%; inset-inline: var(--sf-3); z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-2); padding: var(--sf-2); background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); box-shadow: var(--sf-shadow-2); }
.mr-pop__who { grid-column: 1 / -1; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.mr-pop .mr-pal { min-block-size: var(--sf-tap); }
.mr-table td.mr-c-name { position: relative; }
.mr-table .mr-pop { inset-inline: 0 auto; inline-size: calc(var(--sf-tap) * 6); }
.sf-tagchip--medical, .sf-tagchip--medical[aria-pressed="true"] { color: var(--sf-stop-ink); background: var(--sf-stop-soft); border-color: var(--sf-stop-soft); }

/* ── Claiming results (card X4) ───────────────────────────────────────────────────────────────────────────────────────────────
   The roster add list (.sf-addlist, .sf-addrow), the "Athletes from" field (.sf-pickfield) and "These look like yours" (.sf-claim, .sf-seasonhead,
   .sf-checkcell, .sf-claimbar), drawn by js/claims/claimsView.js. Rows have one height: 64 min with a 48 button, 48 buttons in a match row.
   States: default, hover, pressed, focus, disabled (On roster, Added), loading (the sheet's spinner), error (a toast), empty (one line). */
.sf-pickfield {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); inline-size: 100%; min-height: var(--sf-tap); padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink);
  font: var(--sf-w-reg) var(--sf-text-lg)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer;
}
.sf-pickfield:hover { background: var(--sf-sunk); }
.sf-pickfield:active { background: var(--sf-line-soft); }
.sf-pickfield:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-pickfield:disabled { background: var(--sf-sunk); color: var(--sf-ink-3); cursor: not-allowed; }
.sf-pickfield svg { flex: none; inline-size: 18px; block-size: 18px; color: var(--sf-ink-2); }
.sf-pickfield__value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.sf-addlist { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-addlist__returning { display: flex; align-items: center; gap: var(--sf-3); }
.sf-addlist__returning[hidden], .sf-addlist__rows[hidden], .sf-addlist__empty[hidden] { display: none; }
.sf-addlist__count { flex: 1 1 auto; min-width: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-addlist__count .sf-num { color: var(--sf-ink); font-size: var(--sf-text-md); font-weight: var(--sf-w-bold); }
.sf-addlist__rows { background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); overflow: hidden; }
.sf-addlist__empty { margin: 0; color: var(--sf-ink-2); }
.sf-addrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); min-height: calc(var(--sf-tap) + var(--sf-4));
  padding: var(--sf-2) var(--sf-3); border-top: 1px solid var(--sf-line-soft); cursor: pointer;
}
.sf-addrow:first-child { border-top: 0; }
.sf-addrow:hover { background: var(--sf-page); }
.sf-addrow:active { background: var(--sf-sunk); }
.sf-addrow[data-state="on"] { cursor: default; }
.sf-addrow[data-state="on"]:hover { background: none; }
.sf-addrow.is-added, .sf-addrow.is-added:hover { background: var(--sf-go-soft); cursor: default; }
.sf-addrow__text { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-addrow__name { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-addrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-addrow__grade .sf-num { color: var(--sf-ink); font-weight: var(--sf-w-bold); }
.sf-addrow__chip { display: inline-flex; align-items: center; gap: var(--sf-1); min-height: calc(var(--sf-5) + var(--sf-1)); padding: 0 var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); }
.sf-addrow__chip .sf-num { font-size: var(--sf-text-sm); }
.sf-addrow__btn { min-inline-size: var(--sf-tap); padding: 0 var(--sf-3); font-size: var(--sf-text-sm); font-weight: var(--sf-w-bold); }
.sf-addrow__btn--on { border-color: transparent; background: none; color: var(--sf-go-ink); cursor: default; }
.sf-addrow__btn--on:hover { background: none; }
.sf-addrow__btn--added, .sf-addrow__btn--added:hover { border-color: var(--sf-go); background: var(--sf-paper); color: var(--sf-go-ink); cursor: default; }

.sf-claims { min-width: 0; }
.sf-claim { display: grid; gap: var(--sf-3); padding: var(--sf-3) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); }
.sf-claim__text { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-claim__race { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-claim__meta { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-claim__meta .sf-num { color: var(--sf-ink); font-size: var(--sf-text-md); font-weight: var(--sf-w-bold); }
.sf-claim__printed { color: var(--sf-ink-2); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-claim__acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-2); }
.sf-claim__btn { min-height: var(--sf-tap); padding: 0 var(--sf-3); font-weight: var(--sf-w-bold); }
.sf-claim__btn[data-act="not-mine"] { color: var(--sf-ink-2); }
.sf-claim--bulk { grid-template-columns: var(--sf-tap) minmax(0, 1fr); align-items: center; gap: 0; min-height: calc(var(--sf-tap) + var(--sf-4)); padding: var(--sf-2) var(--sf-4) var(--sf-2) var(--sf-1); cursor: pointer; }
.sf-claim--bulk:hover { background: var(--sf-page); }
.sf-claim--bulk.is-picked { background: var(--sf-accent-soft); }
.sf-claim--bulk:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }

.sf-checkcell { display: grid; place-items: center; flex: none; inline-size: var(--sf-tap); block-size: var(--sf-tap); }
.sf-checkcell__box { display: grid; place-items: center; inline-size: var(--sf-box); block-size: var(--sf-box); border: 2px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-on-accent); }
.sf-checkcell__box svg { inline-size: var(--sf-4); block-size: var(--sf-4); opacity: 0; }
[aria-checked="true"] .sf-checkcell__box, [aria-checked="mixed"] .sf-checkcell__box { border-color: var(--sf-accent); background: var(--sf-accent); }
[aria-checked="true"] .sf-checkcell__box svg, [aria-checked="mixed"] .sf-checkcell__box svg { opacity: 1; }
[role="checkbox"]:hover .sf-checkcell__box { border-color: var(--sf-ink-3); }
[role="checkbox"]:focus-visible .sf-checkcell__box { outline: 3px solid var(--sf-focus); outline-offset: 2px; }

.sf-seasonhead { display: flex; align-items: center; gap: var(--sf-2); min-height: var(--sf-tap); padding: 0 var(--sf-2) 0 var(--sf-4); border-top: 1px solid var(--sf-line); background: var(--sf-sunk); }
.sf-seasonhead__yr { flex: 1 1 auto; min-width: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-seasonhead__meta { flex: none; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-seasonhead__meta .sf-num { color: var(--sf-ink); font-size: var(--sf-text-md); font-weight: var(--sf-w-bold); }
.sf-seasonhead__not { flex: none; min-height: var(--sf-tap); padding: 0 var(--sf-3); color: var(--sf-ink-2); font-size: var(--sf-text-sm); font-weight: var(--sf-w-bold); }
.sf-seasonhead__not svg { inline-size: var(--sf-4); block-size: var(--sf-4); }

.sf-claimbar { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; gap: var(--sf-3); min-height: calc(var(--sf-tap) + var(--sf-2)); padding: 0 var(--sf-4) 0 var(--sf-1); border-bottom: 1px solid var(--sf-line); background: var(--sf-paper); }
.sf-claimbar__all { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: var(--sf-tap); border: 0; background: none; color: inherit; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer; }
.sf-claimbar__count { flex: none; color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); }
.sf-claimbar__count .sf-num { color: var(--sf-ink); font-size: var(--sf-text-md); font-weight: var(--sf-w-bold); }
.sf-claimempty { margin: 0; padding: var(--sf-5) var(--sf-4); color: var(--sf-ink-2); font-size: var(--sf-text-md); }
.sf-claimnotice__body { margin: var(--sf-3) 0 0; color: var(--sf-ink-2); font-size: var(--sf-text-md); line-height: 1.4; }

/* Data cleanup lists (Admin, handoff prompt 05): one card per list; head = title + count, row = title, one-line detail, one secondary action. */
.sf-fixlists { display: grid; gap: var(--sf-4); align-content: start; }
.sf-fixlist { overflow: hidden; min-width: 0; }
.sf-fixlist__head { display: flex; align-items: center; gap: var(--sf-2); min-height: calc(var(--sf-tap) + var(--sf-1)); padding: 0 var(--sf-4); }
.sf-fixlist__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-fixlist__count { display: inline-grid; place-items: center; min-width: var(--sf-8); min-height: var(--sf-6); padding: 0 var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-sunk); font-weight: var(--sf-w-bold); font-size: var(--sf-text-sm); }
.sf-fixlist__count[hidden] { display: none; }
.sf-fixlist__chip { display: inline-flex; align-items: center; gap: var(--sf-1); margin-inline-start: auto; font-weight: var(--sf-w-semi); font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
.sf-fixlist__fold { border-top: 1px solid var(--sf-line-soft); }
.sf-fixlist__foldhead { display: flex; align-items: center; min-height: var(--sf-tap); padding: 0 var(--sf-4); font-weight: var(--sf-w-semi); cursor: pointer; }
.sf-fixlist__lines { display: grid; gap: var(--sf-2); padding: 0 var(--sf-4) var(--sf-4); }
.sf-fixlist__line { color: var(--sf-ink-2); font-size: var(--sf-text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.sf-fixlists__meet { inline-size: min(100%, calc(var(--sf-tap) * 4)); }
.sf-fixlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); min-height: calc(var(--sf-tap) + var(--sf-4) + var(--sf-2)); padding: var(--sf-2) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-fixlist__text { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-fixlist__name { font-weight: var(--sf-w-semi); line-height: 1.25; overflow-wrap: anywhere; }
.sf-fixlist__detail { color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.sf-fixlist__act { white-space: nowrap; }
.sf-fixlist__row.is-fixed { display: flex; align-items: center; gap: var(--sf-2); background: var(--sf-go-soft); color: var(--sf-go-ink); font-weight: var(--sf-w-bold); }
.sf-fixlist__empty { margin: 0; padding: 0 var(--sf-4) var(--sf-4); color: var(--sf-ink-2); }
.sf-fixlist__state { display: flex; align-items: center; gap: var(--sf-3); padding: var(--sf-4); border-top: 1px solid var(--sf-line-soft); color: var(--sf-ink-2); font-weight: var(--sf-w-semi); }
.sf-fixlist__state--error { display: grid; justify-items: start; gap: var(--sf-3); color: var(--sf-stop-ink); }
.sf-fixlist .sf-filters { padding: var(--sf-2) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-fixlist__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); padding: var(--sf-2) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-fixlist__pager[hidden] { display: none; }
.sf-fixlist__range { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-fixlist__errline { display: flex; align-items: center; gap: var(--sf-2); font-weight: var(--sf-w-bold); }
/* A long list scrolls inside its card instead of stretching the page. */
.sf-fixlist__scroll, .sf-fixlist__body { max-block-size: calc(var(--sf-tap) * 8); overflow-y: auto; overscroll-behavior: contain; }
.sf-fixlist__bulk { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); padding: var(--sf-2) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-fixlist__row--pick { grid-template-columns: minmax(0, 1fr) auto; }
.sf-fixlist__row--runner { grid-template-columns: minmax(0, 1fr); align-items: start; }
.sf-fixlist__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-fixlist__reason { display: flex; align-items: center; gap: var(--sf-1); color: var(--sf-ink-2); }
.sf-fixlist__pick { display: flex; align-items: center; gap: var(--sf-3); min-width: 0; cursor: pointer; }
@media (min-width: 600px) {
  .sf-fixlist__head, .sf-fixlist__foldhead { padding-inline: var(--sf-5); }
  .sf-fixlist__lines { padding-inline: var(--sf-5); }
  .sf-fixlist__row, .sf-fixlist__state, .sf-fixlist__empty, .sf-fixlist .sf-filters, .sf-fixlist__pager { padding-inline: var(--sf-5); }
  .sf-fixlist__empty { padding-bottom: var(--sf-5); }
}

/* ── Runner page: Track and Relays (js/shared/runnerTrack.js; handoff_trackcoachscreens2 05, frames 5a to 5d) ──
   Section heading 48 · season field 48 (a picker, one) · Indoor / Outdoor cards: band 36, rows 48 (Event · Mark · Place 44) · Relays: one card per season,
   rows of three lines. Coach slots sit after the sections; from 900 the sections are the left column and the slots a right column (360).
   States: default, hover / pressed / focus (field, options), loading (.sf-spinner), error, empty (the section is absent). */
.sf-rtrack__grid { display: grid; gap: var(--sf-3); min-width: 0; align-items: start; }
.sf-rtrack__grid[hidden] { display: none; }
.sf-rtrack__main-col, .sf-rtrack__slots { display: grid; gap: var(--sf-3); align-content: start; min-width: 0; }
/* A slot holds the page's own card, which hides itself when it has nothing to say: the slot and an all-empty grid give no space then. */
.sf-rtrack__slot:has(> [hidden]:only-child), .sf-rtrack__grid:not(:has(.sf-rtrack__main-col)):not(:has(.sf-rtrack__slot:not(:has(> [hidden]:only-child)))) { display: none; }
.sf-rtrack { display: grid; gap: var(--sf-2); min-width: 0; }
.sf-rtrack__title { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); margin: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-2); }
.sf-rtrack__pick { position: relative; display: grid; }
.sf-rtrack__field { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); padding: 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: 999px; background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) 15px/1.2 var(--sf-font-ui); text-align: start; cursor: pointer; }
.sf-rtrack__field:hover { background: var(--sf-page); }
.sf-rtrack__field:active { background: var(--sf-sunk); }
.sf-rtrack__field:focus-visible, .sf-rtrack__opt:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-rtrack__field:disabled { cursor: default; color: var(--sf-ink-2); background: var(--sf-paper); }
.sf-rtrack__field:disabled svg { display: none; }
.sf-rtrack__fieldtext { flex: 1; min-width: 0; }
.sf-rtrack__menu { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--sf-1)); z-index: 5; display: grid; padding: 0; list-style: none; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); box-shadow: var(--sf-shadow-2); overflow: hidden; }
.sf-rtrack__menu[hidden] { display: none; }
.sf-rtrack__opt { inline-size: 100%; min-block-size: var(--sf-tap); padding: 0 var(--sf-3); border: 0; background: none; color: var(--sf-ink); font: var(--sf-w-semi) 15px/1.2 var(--sf-font-ui); text-align: start; cursor: pointer; }
.sf-rtrack__opt:hover { background: var(--sf-page); }
.sf-rtrack__opt[aria-selected="true"] { background: var(--sf-sunk); }
.sf-rtrack__card { border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-rtrack__band { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); min-block-size: 36px; padding: 0 var(--sf-3); background: var(--sf-sunk); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-3); }
.sf-rtrack__cols { font: var(--sf-w-semi) 13px/1 var(--sf-font-ui); letter-spacing: 0; text-transform: none; }
.sf-rtrack__row { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--sf-tap-min); gap: var(--sf-2); align-items: center; min-block-size: var(--sf-tap); padding: var(--sf-1) var(--sf-3); border-block-start: 1px solid var(--sf-line-soft); }
.sf-rtrack__main { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.sf-rtrack__event { font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-rtrack__best { font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-go-ink); }
.sf-rtrack__mark { font: var(--sf-w-bold) 17px/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-rtrack__place { font: var(--sf-w-bold) 15px/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; color: var(--sf-ink-2); }
.sf-rtrack__relay { display: grid; gap: var(--sf-1); padding: var(--sf-2) var(--sf-3); border-block-start: 1px solid var(--sf-line-soft); }
.sf-rtrack__line { display: flex; align-items: center; gap: var(--sf-2); }
.sf-rtrack__line .sf-rtrack__event { flex: 1; min-width: 0; font-weight: var(--sf-w-bold); }
.sf-rtrack__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-1) var(--sf-3); font: 13px/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-rtrack__facts .sf-num { font-weight: var(--sf-w-bold); }
.sf-rtrack__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); }
.sf-rtrack__loading { display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); font: var(--sf-w-semi) var(--sf-text-md)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-rtrack__msg { margin: 0; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-rtrack__slot { min-width: 0; }
/* 900 to 1023: the page is one column wide, so the slots sit right (frame 5c). From 1024 the runner page puts this grid in its narrow right band, one column. */
@media (min-width: 900px) and (max-width: 1023px) {
  .sf-rtrack__grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .sf-rtrack__grid > :only-child { grid-column: 1 / -1; }
}

/* ── Map sources (Course map sheet, handoff 03 / venue gate D3) ─────────────────────────────────────────────
   One sheet lists every way to get a map under the draw line: .sf-mapsources > [.sf-mapsources__link] + .sf-mapsources__list of 60px option rows
   (icon 28, title + one-line sub, chevron), or .sf-mapsources__steps (three numbered lines). A centred dialog from 600px (the shared .sf-modal).
   Row states: default, hover, pressed, focus-visible, disabled, loading (.is-loading), error (.is-error). */
.sf-mapsources { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-mapsources__link { display: grid; gap: var(--sf-2); }
.sf-mapsources__list { display: grid; gap: var(--sf-2); margin: 0; padding: 0; }
.sf-mapsources__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); inline-size: 100%; min-height: 60px; padding: var(--sf-2) var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-md); background: var(--sf-paper); color: var(--sf-ink); text-align: start; text-decoration: none; font: inherit; cursor: pointer; }
.sf-mapsources__row > svg { inline-size: 28px; block-size: 28px; color: var(--sf-ink-2); }
.sf-mapsources__row > .sf-mapsources__go { inline-size: 20px; block-size: 20px; color: var(--sf-ink-3); }
.sf-mapsources__text { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-mapsources__title { font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-mapsources__sub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-mapsources__row:hover { background: var(--sf-page); }
.sf-mapsources__row:active { background: var(--sf-sunk); }
.sf-mapsources__row:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-mapsources__row:disabled, .sf-mapsources__row[aria-disabled="true"] { border-color: var(--sf-line); color: var(--sf-ink-3); cursor: not-allowed; }
.sf-mapsources__row.is-loading { background: var(--sf-sunk); cursor: progress; }
.sf-mapsources__row.is-error { border-color: var(--sf-stop-ink); }
.sf-mapsources__steps { display: grid; gap: var(--sf-1); margin: 0; padding: 0; list-style: none; }
.sf-mapsources__step { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--sf-3); min-height: 40px; font-weight: var(--sf-w-semi); }
.sf-mapsources__num { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--sf-r-pill); background: var(--sf-sunk); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }

/* Distance presets ("How far is the race?", venue gate D4 / handoff 02). .sf-distsheet stacks .sf-distgroup (a label above chips that wrap, each 48 high),
   .sf-distother (the Other chip) and the shared .sf-dfield. A centred dialog from 600px (the shared .sf-modal).
   Chip states come from .sf-chip: default, hover, pressed (aria-pressed), focus, disabled. Group states: none of its own. */
.sf-distsheet { display: grid; gap: var(--sf-4); min-width: 0; }
.sf-distgroup, .sf-distother { display: grid; gap: var(--sf-2); min-width: 0; }
.sf-distgroup__label { color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-distgroup__chips { display: flex; flex-wrap: wrap; gap: var(--sf-2); min-width: 0; }
.sf-distgroup__chips > .sf-chip { min-height: var(--sf-tap); font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-distgroup__chips > .sf-chip::after { inset: 0; }

/* Drop zone: dashed area that takes a dropped file and (with Ctrl+V anywhere in its dialog) a pasted screenshot.
   States: default (empty), hover, .is-over (a file is above it), focus-visible, disabled, .is-loading, .is-error. */
.sf-dropzone { display: grid; place-items: center; align-content: center; gap: var(--sf-2); min-height: 180px; padding: var(--sf-4); border: 2px dashed var(--sf-line-strong);
  border-radius: var(--sf-r-md); background: var(--sf-sunk); color: var(--sf-ink); text-align: center; }
.sf-dropzone > svg { inline-size: 32px; block-size: 32px; color: var(--sf-ink-2); }
.sf-dropzone__title { font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-dropzone__hint { color: var(--sf-ink-3); font-size: var(--sf-text-sm); font-weight: var(--sf-w-semi); }
.sf-dropzone:hover { border-color: var(--sf-ink-2); }
.sf-dropzone.is-over { border-color: var(--sf-accent); background: var(--sf-accent-soft); }
.sf-dropzone:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-dropzone[aria-disabled="true"] { border-color: var(--sf-line); color: var(--sf-ink-3); }
.sf-dropzone.is-loading { border-style: solid; cursor: progress; }
.sf-dropzone.is-error { border-color: var(--sf-stop-ink); }
.sf-dropzone__actions { display: flex; justify-content: flex-end; gap: var(--sf-2); }

/* ---------- the venue and course picker (js/venuePicker.js; venues plan V5, handoff prompt 01) ----------
   One search box that stays put, one list that scrolls. Venue rows 56 tall, course rows indented one tap-min, selected = accent bar + soft fill + check. */
.sf-vp { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; }
.sf-vp__above { padding: var(--sf-2) var(--sf-4) 0; }
.sf-vp__head { position: sticky; inset-block-start: 0; z-index: 1; flex: none; padding: var(--sf-1) var(--sf-4) var(--sf-2); background: var(--sf-paper); }
.sf-vp__search { display: flex; align-items: center; gap: var(--sf-2); min-inline-size: 0; block-size: var(--sf-tap); padding: 0 var(--sf-3); box-sizing: border-box; border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink-3); }
.sf-vp__search:focus-within { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-vp__search > svg { flex: none; inline-size: 20px; block-size: 20px; }
.sf-vp__input { flex: 1 1 0; min-inline-size: 0; block-size: 100%; padding: 0; border: 0; background: none; outline: 0; color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-vp__list { display: flex; flex-direction: column; min-block-size: 0; }
.sf-vp__label { padding: var(--sf-3) var(--sf-4) var(--sf-1); color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-vp__msg { display: flex; align-items: center; gap: var(--sf-3); min-block-size: 56px; padding: var(--sf-2) var(--sf-4); box-sizing: border-box; color: var(--sf-ink-2); font-size: var(--sf-text-md); }
.sf-vp__msg > svg { flex: none; inline-size: 22px; block-size: 22px; color: var(--sf-ink-3); }
.sf-vp__msg--stop { color: var(--sf-stop-ink); }
.sf-vp__msg--stop > svg { color: var(--sf-stop-ink); }
.sf-vp__btnrow { padding: var(--sf-2) var(--sf-4); }
.sf-vp__btn { inline-size: 100%; }
.sf-vp__group { display: flex; flex-direction: column; }
.sf-vp__row { display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: var(--sf-2) var(--sf-3) var(--sf-2) var(--sf-4); box-sizing: border-box; border: 0; border-block-start: 1px solid var(--sf-line-soft); border-inline-start: 3px solid transparent; background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.sf-vp__row:hover { background: var(--sf-page); }
.sf-vp__row:active { background: var(--sf-sunk); }
.sf-vp__row:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-vp__row:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-vp__row[aria-current="true"] { background: var(--sf-accent-soft); border-inline-start-color: var(--sf-accent); }
.sf-vp__row > svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--sf-ink-3); }
.sf-vp__row[aria-current="true"] > svg:last-child { inline-size: 22px; block-size: 22px; color: var(--sf-accent); }
.sf-vp__row--course { padding-inline-start: var(--sf-tap-min); }
.sf-vp__row--new { color: var(--sf-accent-ink); }
.sf-vp__row--new > svg { color: var(--sf-accent); }
.sf-vp__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-vp__title { font: var(--sf-w-semi) var(--sf-text-lg)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-vp__title.sf-num { font-size: var(--sf-text-xl); font-weight: var(--sf-w-bold); }
.sf-vp__sub { color: var(--sf-ink-2); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-vp__status { flex: none; display: inline-flex; align-items: center; gap: var(--sf-1); color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-vp__status > svg { inline-size: 16px; block-size: 16px; }
.sf-vp__tracks { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sf-1); }
.sf-vp__heading { margin: 0; padding: var(--sf-3) var(--sf-4) 0; color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-xl)/1.2 var(--sf-font-ui); }
.sf-vp__which { display: flex; flex-direction: column; }
/* Add a venue (trackMode's first row): an action, not a venue. 56 tall, dashed accent on the soft fill. */
.sf-vp__add { display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: 0 var(--sf-4); box-sizing: border-box; border: 1.5px dashed var(--sf-accent); border-radius: var(--sf-r-md); background: var(--sf-accent-soft); color: var(--sf-accent-ink); font: var(--sf-w-semi) var(--sf-text-lg)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer; }
.sf-vp__add:hover { background: var(--sf-sunk); }
.sf-vp__add:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-vp__add > svg { flex: none; inline-size: 22px; block-size: 22px; color: var(--sf-accent); }
/* A venue row's picture: 44 square (the row grows to 64 with two tracks). */
.sf-vp__row--venue { min-block-size: 64px; }
.sf-vp__thumb { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--sf-r-sm); background: var(--sf-sunk); }
.sf-vp__row > .sf-vp__thumb > svg { inline-size: 22px; block-size: 22px; color: var(--sf-ink-3); }

/* ---------- Add a venue / Add a track (js/course/addVenueSheet.js; handoff venues-and-more 05) ----------
   Two sections, Venue then Track (eyebrow + one grey line each); labels above, 48 tall fields; the place search's hits are 56 high rows; the map strip is 120 on a phone, 140 from 600. */
.sf-addvenue { gap: var(--sf-5); }
.sf-addvenue__section { gap: var(--sf-4); }
.sf-addvenue__head { display: flex; flex-direction: column; gap: var(--sf-1); }
.sf-addvenue__line { margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.4; }
.sf-addvenue__venueline { margin: 0; padding: var(--sf-3) var(--sf-4); border-radius: var(--sf-r-md); background: var(--sf-sunk); color: var(--sf-ink-2); font-size: var(--sf-text-md); overflow-wrap: anywhere; }
/* Track outline row (venues-and-more 06): 64 high, the glyph tile 44, status word + sub line, a 44 secondary button; one row, centred. */
.sf-outlinerow { display: flex; align-items: center; gap: var(--sf-3); min-block-size: 64px; padding: var(--sf-2) var(--sf-2) var(--sf-2) var(--sf-3); box-sizing: border-box; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-sunk); }
.sf-outlinerow__tile { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--sf-r-tile); background: var(--sf-paper); color: var(--sf-ink); }
.sf-outlinerow__text { flex: 1; display: grid; min-inline-size: 0; }
.sf-outlinerow__title { font: var(--sf-w-bold) var(--sf-text-md)/1.25 var(--sf-font-ui); color: var(--sf-ink); }
.sf-outlinerow__sub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.sf-outlinerow__btn { flex: none; }
.sf-addvenue__hits { display: flex; flex-direction: column; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-addvenue__hits[hidden] { display: none; }
.sf-addvenue__hit { display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: var(--sf-2) var(--sf-3); box-sizing: border-box; border: 0; border-block-start: 1px solid var(--sf-line-soft); background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.sf-addvenue__hit:first-child { border-block-start: 0; }
.sf-addvenue__hit:hover { background: var(--sf-page); }
.sf-addvenue__hit:active { background: var(--sf-sunk); }
.sf-addvenue__hit:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-addvenue__hit > svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--sf-ink-3); }
.sf-addvenue__hits > .sf-field__err { padding: var(--sf-2) var(--sf-3); }
.sf-addvenue__map { display: grid; place-items: center; inline-size: 100%; block-size: 120px; padding: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-sunk); color: var(--sf-accent); overflow: hidden; cursor: pointer; }
.sf-addvenue__map.is-dropping { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-addvenue__map:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-addvenue__map > svg { inline-size: 32px; block-size: 32px; }
.sf-addvenue__pic { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sf-addvenue__dup { display: flex; flex-direction: column; gap: var(--sf-3); }
.sf-addvenue__dup[hidden] { display: none; }
.sf-addvenue__dupmsg { display: flex; align-items: center; gap: var(--sf-2); margin: 0; font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-addvenue__dupvenue { margin: 0; color: var(--sf-ink-2); overflow-wrap: anywhere; }
.sf-addvenue__dupacts { display: flex; flex-direction: column; gap: var(--sf-2); }
.sf-addvenue__dupacts .sf-btn { inline-size: 100%; min-block-size: var(--sf-tap); }
@media (min-width: 600px) { .sf-addvenue__map { block-size: 140px; } }

/* ---------- the Courses library by venue (js/course/venueLibrary.js; venues plan V5, handoff prompt 05) ----------
   One card of rows, 64 tall: a venue (name, place and course count) or, on a venue's page, a course (distance, status, meets). */
.sf-vlist { display: flex; flex-direction: column; background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); overflow: hidden; min-inline-size: 0; }
.sf-vlist__row { display: flex; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 64px; padding: var(--sf-2) var(--sf-3) var(--sf-2) var(--sf-4); box-sizing: border-box; border: 0; border-block-start: 1px solid var(--sf-line-soft); background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.sf-vlist__row:first-child { border-block-start: 0; }
.sf-vlist__row:hover { background: var(--sf-page); }
.sf-vlist__row:active { background: var(--sf-sunk); }
.sf-vlist__row:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-vlist__row > svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--sf-ink-3); }
.sf-vlist__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-vlist__title { font: var(--sf-w-semi) var(--sf-text-lg)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-vlist__title.sf-num { font-size: var(--sf-text-xl); font-weight: var(--sf-w-bold); }
.sf-vlist__sub { color: var(--sf-ink-2); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-vlist__status { display: inline-flex; align-items: center; gap: var(--sf-1); }
.sf-vlist__status > svg { flex: none; inline-size: 16px; block-size: 16px; }

/* ── Venues and courses ────────────── Admin → Venues (js/adminVenues.js) and the coach Venues view (js/course/venuesView.js); handoff_venes_and_courses_design.
   A venue row opens the venue (plain chevron); the coach phone row folds its courses in place (.sf-fold). Thumbnails (.sf-vthumb) start when scrolled into view. */
.sf-vthumb { --vthumb: 56px; position: relative; display: grid; flex: none; place-items: center; inline-size: var(--vthumb); block-size: var(--vthumb); border-radius: var(--sf-r-md); background: var(--sf-sunk); color: var(--sf-ink-3); overflow: hidden; }
.sf-vthumb .sf-icon { inline-size: 24px; block-size: 24px; }
.sf-vthumb__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sf-vthumb--pc { --vthumb: 44px; }
.sf-vthumb--insp { inline-size: 100%; block-size: 220px; }
.av-find { display: flex; align-items: center; gap: var(--sf-2); }
.av-find .sf-searchbox { flex: 1 1 0; min-inline-size: 0; }
.av-filterbtn { position: relative; }
.av-count { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.av-list { display: flex; flex-direction: column; min-inline-size: 0; background: var(--sf-paper); border-block: 1px solid var(--sf-line); }
/* A venue row: the open button (thumb, name, chevron) and its own more-menu button side by side, so the menu never opens the venue. */
.av-vrow { display: flex; align-items: center; gap: var(--sf-1); inline-size: 100%; min-block-size: 72px; padding-inline-end: var(--sf-2); box-sizing: border-box; border-block-start: 1px solid var(--sf-line-soft); }
.av-vrow:first-child { border-block-start: 0; }
.av-vrow:hover { background: var(--sf-page); }
.av-vopen { flex: 1 1 0; min-inline-size: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; gap: var(--sf-3); min-block-size: 72px; padding: var(--sf-3) var(--sf-2) var(--sf-3) var(--sf-4); box-sizing: border-box; border: 0; background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.av-vopen:active { background: var(--sf-sunk); }
.av-vopen:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.av-vopen > .sf-icon { inline-size: 20px; block-size: 20px; color: var(--sf-ink-3); justify-self: center; }
.av-vrow > .av-more { flex: none; }
.av-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.av-name { font: var(--sf-w-semi) var(--sf-text-lg)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; }
.av-sub { color: var(--sf-ink-2); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.av-skel { display: grid; gap: var(--sf-2); align-content: center; min-block-size: 72px; padding: var(--sf-3) var(--sf-4); border-block-start: 1px solid var(--sf-line-soft); }
.av-skel > span { block-size: 16px; border-radius: var(--sf-r-sm); background: var(--sf-sunk); }
.av-skel > span:last-child { inline-size: 55%; block-size: 12px; }
.av-empty { display: grid; justify-items: center; gap: var(--sf-3); padding: var(--sf-6) var(--sf-4); text-align: center; color: var(--sf-ink-2); }
.av-chips { display: flex; flex-wrap: wrap; gap: var(--sf-2); }
.av-chip { position: relative; min-block-size: 40px; padding: 0 var(--sf-3); border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); cursor: pointer; }
.av-chip::after { content: ""; position: absolute; inset: -4px; }
.av-chip[aria-checked="true"] { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.av-chip:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.av-group { margin: 0; color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.av-place { margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.av-chead { display: none; }
.av-crow { display: grid; grid-template-columns: minmax(0, 1fr) var(--sf-tap); grid-template-areas: "main more" "status more"; align-items: center; justify-items: start; column-gap: var(--sf-1); row-gap: var(--sf-1); min-block-size: 96px; padding: var(--sf-2) 0 var(--sf-2) var(--sf-4); border-block-start: 1px solid var(--sf-line-soft); }
.av-crow:first-of-type { border-block-start: 0; }
.av-cell { grid-area: main; display: flex; flex-direction: column; gap: var(--sf-1); min-inline-size: 0; }
.av-status { grid-area: status; }
.av-meets { display: none; }
.av-crow > .av-more { grid-area: more; justify-self: center; }
.av-more { inline-size: var(--sf-tap); block-size: var(--sf-tap); }
.av-pick { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); inline-size: 100%; min-block-size: 56px; padding: var(--sf-2) var(--sf-3); box-sizing: border-box; border: 0; border-block-start: 1px solid var(--sf-line-soft); background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.av-pick.is-on { background: var(--sf-accent-soft); }
.av-pick:disabled { cursor: not-allowed; opacity: .6; }
.av-pick:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.av-pick__dot { inline-size: 22px; block-size: 22px; box-sizing: border-box; border: 2px solid var(--sf-line-strong); border-radius: 50%; background: var(--sf-paper); }
.av-pick.is-on .av-pick__dot { border-color: var(--sf-accent); box-shadow: inset 0 0 0 4px var(--sf-paper), inset 0 0 0 11px var(--sf-accent); }
.av-pick__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.av-pick__dist { color: var(--sf-ink-2); text-align: end; }
.av-pick--venue { min-block-size: 64px; }
@media (min-width: 900px) {
  .av-list { max-inline-size: 760px; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); overflow: hidden; }
  .av-chead, .av-crow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 72px var(--sf-tap); grid-template-areas: none; align-items: center; }
  .av-chead { min-block-size: 40px; padding: 0 0 0 var(--sf-4); background: var(--sf-sunk); color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
  .av-chead > :nth-child(3) { text-align: end; }
  .av-crow { min-block-size: 72px; column-gap: var(--sf-3); }
  .av-cell, .av-status, .av-crow > .av-more { grid-area: auto; }
  .av-meets { display: block; text-align: end; font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; }
  .av-inline { display: none; }
}

/* Coach Venues view (js/course/venuesView.js): phone and tablet fold rows, from 1024 a table with the inspector. */
.vv-list { display: flex; flex-direction: column; min-inline-size: 0; background: var(--sf-paper); }
.vv-venue { border-block-start: 1px solid var(--sf-line-soft); }
.vv-venue:first-child { border-block-start: 0; }
.vv-venue.is-open { box-shadow: inset 3px 0 0 var(--sf-accent); background: var(--sf-accent-soft); }
.vv-fold { display: grid; grid-template-columns: minmax(0, 1fr) var(--sf-tap) var(--sf-fold); align-items: center; column-gap: var(--sf-2); inline-size: 100%; min-block-size: 80px; padding: var(--sf-2) var(--sf-3) var(--sf-2) var(--sf-4); box-sizing: border-box; }
.vv-fold:hover { background: var(--sf-page); }
.vv-fold__open { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--sf-3); min-inline-size: 0; border: 0; padding: 0; background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.vv-fold__open .sf-vthumb { align-self: start; }
.vv-fold > button.sf-fold { padding: 0; cursor: pointer; }
.vv-tags { display: flex; flex-wrap: wrap; gap: var(--sf-1); }
.vv-tag { display: inline-flex; align-items: center; min-block-size: var(--sf-5); padding: 0 var(--sf-2); border-radius: var(--sf-r-pill); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-xs)/1 var(--sf-font-ui); white-space: nowrap; }
.vv-ihead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sf-3); }
.vv-ihead__acts { display: flex; align-items: center; gap: var(--sf-2); }
.vv-panel { background: var(--sf-paper); }
.vv-course { display: grid; grid-template-columns: minmax(0, 1fr) var(--sf-tap); align-items: center; min-block-size: 92px; padding: var(--sf-2) 0 var(--sf-2) 84px; box-sizing: border-box; border-block-start: 1px solid var(--sf-line-soft); }
.vv-course__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-1); min-inline-size: 0; }
.vv-head { display: none; }
.vv-row, .vv-icourse { display: grid; align-items: center; inline-size: 100%; box-sizing: border-box; border: 0; border-block-start: 1px solid var(--sf-line-soft); background: transparent; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.vv-row:hover, .vv-icourse:hover { background: var(--sf-page); }
.vv-row:focus-visible, .vv-icourse:focus-visible, .vv-fold__open:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.vv-row > .sf-icon, .vv-icourse > .sf-icon { inline-size: 20px; block-size: 20px; color: var(--sf-ink-3); justify-self: center; }
.vv-row { grid-template-columns: 44px minmax(200px, 1fr) 80px var(--sf-tap-min) 40px; gap: var(--sf-3); min-block-size: 64px; padding: var(--sf-2) 0 var(--sf-2) var(--sf-3); }
.vv-row.is-selected { background: var(--sf-accent-soft); }
.vv-row__n { text-align: end; }
.vv-ilist { display: flex; flex-direction: column; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); overflow: hidden; }
.vv-icourse { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--sf-3); padding: var(--sf-3); }
.vv-irow { display: flex; align-items: center; gap: var(--sf-2); padding-inline-end: var(--sf-2); border-block-start: 1px solid var(--sf-line-soft); }
.vv-irow:first-child { border-block-start: 0; }
.vv-irow > .vv-icourse { flex: 1 1 auto; min-inline-size: 0; inline-size: auto; border-block-start: 0; }
@media (min-width: 1024px) {
  .vv-head { grid-template-columns: 44px minmax(200px, 1fr) 80px var(--sf-tap-min) 40px; gap: var(--sf-3); min-block-size: 40px; padding: 0 0 0 var(--sf-3); align-items: center; background: var(--sf-sunk); color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
  .vv-head:not([hidden]) { display: grid; }
  .vv-head__n { text-align: end; }
}

/* ── Admin pages ────────────────────────────── filter fields, option sheets, count line, sticky save bar (handoff_spikefreakadminpages 02, 03)
   A filter or sort is a field (.sf-fieldbtn) that opens a sheet of radio rows (.sf-optrow), or a segmented control of two or three
   (.sf-seg); there is no chip row. Every control in the filter row is 48 tall. The tab panel of a home page stacks its parts with gap. */
.ap-shell--home .ap-panel, .sf-stack { display: flex; flex-direction: column; gap: var(--sf-3); }
/* Each mounted tab sits in its own box (kept hidden while another tab shows); the box takes no layout of its own, so the tab's parts stay the panel's children. */
.ap-tabpanel { display: contents; }
.ap-tabpanel[hidden] { display: none; }
.sf-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-2); }
.sf-filters--one { grid-template-columns: minmax(0, 1fr); }
.sf-fieldbtn {
  display: flex; align-items: center; gap: var(--sf-2); inline-size: 100%; min-width: 0; min-height: var(--sf-tap); box-sizing: border-box; padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink);
  font: var(--sf-w-reg) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer;
}
.sf-fieldbtn svg { flex: none; inline-size: 18px; block-size: 18px; color: var(--sf-ink-2); }
.sf-fieldbtn__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-fieldbtn__label { color: var(--sf-ink-3); }
.sf-fieldbtn__value { font-weight: var(--sf-w-bold); }
.sf-fieldbtn:hover { background: var(--sf-sunk); }
.sf-fieldbtn:active { background: var(--sf-line); }
.sf-fieldbtn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-fieldbtn:disabled { background: var(--sf-sunk); color: var(--sf-ink-3); cursor: not-allowed; }
.sf-fieldbtn[aria-busy="true"] { cursor: progress; }
.sf-fieldbtn.is-error { border-color: var(--sf-stop); }

.sf-optrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sf-3); inline-size: 100%; box-sizing: border-box;
  min-block-size: calc(var(--sf-tap) + var(--sf-1)); padding: 0 var(--sf-4); border: 0; border-top: 1px solid var(--sf-line-soft); background: none;
  color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-md)/1.25 var(--sf-font-ui); text-align: start; cursor: pointer;
}
.sf-optrow:first-child { border-top: 0; }
.sf-optrow__radio { display: grid; place-items: center; inline-size: 22px; block-size: 22px; box-sizing: border-box; border: 2px solid var(--sf-line-strong); border-radius: 50%; }
.sf-optrow[aria-checked="true"] .sf-optrow__radio { border-color: var(--sf-accent); }
.sf-optrow[aria-checked="true"] .sf-optrow__radio::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--sf-accent); }
.sf-optrow[aria-checked="true"] .sf-optrow__label { font-weight: var(--sf-w-bold); }
.sf-optrow__text { display: grid; min-width: 0; }
.sf-optrow__label { overflow-wrap: anywhere; }
.sf-optrow__hint { color: var(--sf-ink-3); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-optrow__count { color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-md)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-optrow.is-zero .sf-optrow__label { color: var(--sf-ink-3); }
.sf-optrow:hover { background: var(--sf-page); }
.sf-optrow:active { background: var(--sf-sunk); }
.sf-optrow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-optrow:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-optrow:disabled:hover { background: none; }

/* The School sheet (js/course/schoolSheet.js): search box and filters on top, then .sf-optrow rows (two lines: name, "Town, ST · 3 mi"). */
.sf-schoolsheet__head { display: grid; gap: var(--sf-2); padding: var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); }
.sf-schoolsheet__filters { display: flex; align-items: center; gap: var(--sf-2); }
.sf-schoolsheet__filters .sf-seg { flex: 1 1 auto; min-inline-size: 0; }
.sf-schoolsheet__state { flex: none; inline-size: calc(var(--sf-tap) * 1.5); min-block-size: var(--sf-tap); box-sizing: border-box; text-transform: uppercase; text-align: center; }
.sf-schoolsheet__wait { display: flex; align-items: center; gap: var(--sf-3); padding: var(--sf-4); color: var(--sf-ink-3); }
.sf-schoolsheet__empty, .sf-schoolsheet__more { display: grid; justify-items: start; gap: var(--sf-3); padding: var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-schoolsheet__empty p { margin: 0; color: var(--sf-ink-3); }

.sf-countline { margin: 0; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-countline:empty { display: none; }

.sf-savebar {
  position: sticky; top: calc(var(--sf-header-h) + var(--sf-2)); z-index: var(--sf-z-bar); display: flex; align-items: center; gap: var(--sf-2);
  padding: var(--sf-2) var(--sf-2) var(--sf-2) var(--sf-4); border-radius: var(--sf-r-lg); background: var(--sf-paper); box-shadow: var(--sf-shadow-2);
}
.sf-savebar__msg { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--sf-2); color: var(--sf-warn-ink); font-size: var(--sf-text-sm); }
.sf-savebar__msg svg { flex: none; inline-size: 16px; block-size: 16px; }

/* Edit rows (Distances & relays, mockups 12a / 12b): [label field | value field | ⋮ 44] all 44 tall on one centre line, then a second
   line of the group, Shown and Default as icon + word. The value field has its unit inside it; an invalid entry shows an error under it. */
.sf-fieldbtn--sm { inline-size: auto; flex: none; min-height: 36px; padding: 0 var(--sf-3); border-color: transparent; background: var(--sf-sunk); font-size: var(--sf-text-sm); position: relative; }
.sf-fieldbtn--sm::after { content: ""; position: absolute; inset: calc(var(--sf-1) * -1) 0; } /* the 44 hit area behind the 36 look */
.sf-fieldbtn--sm svg { inline-size: 14px; block-size: 14px; }
.sf-editrow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--sf-tap-min); gap: var(--sf-2); align-items: center;
  padding: var(--sf-3) var(--sf-1) var(--sf-3) var(--sf-3); border-top: 1px solid var(--sf-line-soft);
}
.sf-editrow:first-child { border-top: 0; }
.sf-editrow > * { min-width: 0; }
.sf-editrow__label { grid-column: 1; }
.sf-editrow__more { grid-column: 3; grid-row: 1; }
.sf-editrow__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-3); color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-editrow.is-hidden .sf-editrow__label, .sf-editrow.is-hidden .sf-unitfield { opacity: .6; }

.sf-unitfield {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sf-2); box-sizing: border-box; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-3);
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink);
}
.sf-unitfield:focus-within { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-unitfield.is-error { border-color: var(--sf-stop); }
.sf-unitfield__input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: inherit; text-align: end;
  font: var(--sf-w-reg) var(--sf-text-md)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums;
}
.sf-unitfield__input--text { text-align: start; }
.sf-unitfield--lg { min-block-size: var(--sf-tap); }
.sf-unitfield__unit { flex: none; color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-flagbtn {
  display: inline-flex; align-items: center; gap: var(--sf-2); min-block-size: 36px; padding: 0; border: 0; background: none; position: relative;
  color: var(--sf-ink-3); font: inherit; cursor: pointer;
}
.sf-flagbtn::after { content: ""; position: absolute; inset: calc(var(--sf-1) * -1) calc(var(--sf-2) * -1); } /* the 44 hit area behind the 36 look */
.sf-flagbtn svg { inline-size: 16px; block-size: 16px; }
.sf-flagbtn.is-on { color: var(--sf-ink-2); }
.sf-flagbtn[data-act="shown"].is-on svg { color: var(--sf-go-ink); }
.sf-flagbtn[data-act="default"].is-on svg { color: var(--sf-accent); }
.sf-flagbtn:hover { color: var(--sf-ink); }
.sf-flagbtn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-flagbtn:disabled { color: var(--sf-ink-3); cursor: not-allowed; }

/* Access (mockups 8a, 8b, 8c, pc2): a list row without a leading icon, a checkbox sheet row, and the feature-by-level table. The feature
   column stays put while the 44 cells (50 columns) scroll; from 1024px the columns widen and a reset button joins each row. */
.sf-row--plain { grid-template-columns: minmax(0, 1fr) auto auto; inline-size: 100%; box-sizing: border-box; border-width: 0 0 1px; border-style: solid; border-color: var(--sf-line-soft); background: none; font: inherit; color: inherit; text-align: start; }
button.sf-row--plain, div.sf-row--plain[role="button"] { cursor: pointer; }
.sf-row__text { display: grid; gap: var(--sf-1); min-width: 0; padding-block: var(--sf-1); }
.sf-optrow__box { display: grid; place-items: center; inline-size: 24px; block-size: 24px; box-sizing: border-box; border: 2px solid var(--sf-line-strong); border-radius: 6px; color: var(--sf-on-accent); }
.sf-optrow__box svg { inline-size: 16px; block-size: 16px; }
.sf-optrow--check[aria-checked="true"] .sf-optrow__box { border-color: var(--sf-go-ink); background: var(--sf-go-ink); }
.sf-optrow--check.is-staged .sf-optrow__box { border-color: var(--sf-warn); }
.sf-optrow--check.is-staged[aria-checked="true"] .sf-optrow__box { background: var(--sf-warn); }
.sf-optrow[aria-disabled="true"] { color: var(--sf-ink-3); cursor: not-allowed; }
.sf-optrow[aria-disabled="true"]:hover { background: none; }
.sf-axtable { --ax-n: 6; --ax-col: calc(var(--sf-tap-min) + var(--sf-1) + var(--sf-1) / 2); --ax-first: calc(var(--sf-tap) * 2 + var(--sf-1)); --ax-reset: 0px; overflow: hidden; }
.sf-axtable__scroll { overflow-x: auto; }
.sf-axtable__row {
  display: grid; grid-template-columns: var(--ax-first) repeat(var(--ax-n), var(--ax-col)) var(--ax-reset); align-items: center; min-inline-size: max-content;
  min-block-size: calc(var(--sf-tap) + var(--sf-2)); border-top: 1px solid var(--sf-line-soft);
}
.sf-axtable__head { min-block-size: var(--sf-tap-min); border-top: 0; border-bottom: 1px solid var(--sf-line); color: var(--sf-ink-3); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.sf-axtable__feature {
  position: sticky; inset-inline-start: 0; z-index: 1; display: flex; align-items: center; box-sizing: border-box; min-block-size: inherit; padding: 0 var(--sf-2) 0 var(--sf-3);
  background: var(--sf-paper); font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); overflow-wrap: anywhere; text-align: start; text-transform: none; letter-spacing: 0;
}
.sf-axtable__head .sf-axtable__feature { color: var(--sf-ink-3); font: var(--sf-w-bold) 12px/1 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.sf-axtable__reset { display: none; justify-self: center; }
.sf-axcell {
  justify-self: center; display: grid; place-items: center; inline-size: var(--sf-tap-min); block-size: var(--sf-tap-min); padding: 0; box-sizing: border-box;
  border: 1.5px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink-3); cursor: pointer;
}
.sf-axcell svg { inline-size: 20px; block-size: 20px; }
.sf-axcell[aria-checked="true"] { border-color: var(--sf-go-ink); background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-axcell:hover:not(:disabled) { background: var(--sf-sunk); }
.sf-axcell[aria-checked="true"]:hover:not(:disabled) { background: var(--sf-go-soft); }
.sf-axcell.is-staged { box-shadow: 0 0 0 2px var(--sf-warn); }
.sf-axcell:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-axcell:disabled { border-color: var(--sf-line); background: var(--sf-sunk); color: var(--sf-ink-3); cursor: not-allowed; }
@media (min-width: 1024px) {
  .sf-axtable { --ax-col: calc(var(--sf-tap) + var(--sf-5) + var(--sf-2)); --ax-first: minmax(0, 1fr); --ax-reset: var(--sf-tap-min); }
  .sf-axtable__row { min-inline-size: 0; }
  .sf-axtable__reset { display: grid; }
}

.sf-editrow .sf-field__err { grid-column: 1 / -1; }

/* People and teams (handoff_spikefreakadminpages 04): Add buttons above a list card, rows of text / status / one ⋮ or chevron, the draft row a new
   item opens at the top of the list, group headings, and the detail card of a team. Rows reuse .sf-row--plain (60 tall, gap 12). */
.sf-addbar { display: flex; gap: var(--sf-2); }
.sf-addbar > .sf-btn { flex: 1; min-width: 0; }
.sf-row__title--email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.sf-row--plain { padding-inline-end: var(--sf-1); }
.sf-row--plain > .sf-iconbtn { justify-self: end; }
.sf-row.is-gone .sf-row__text { opacity: .6; }
.sf-listgroup { margin: 0; padding: var(--sf-3) var(--sf-4) var(--sf-1); color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-draftrow { display: grid; gap: var(--sf-3); padding: var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); }
.sf-draftrow > * { min-width: 0; }
.sf-draftrow__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sf-2); }
.sf-formrow { display: flex; align-items: center; gap: var(--sf-2); }
.sf-formrow > .sf-input, .sf-formrow > .sf-field { flex: 1; min-width: 0; }
.sf-teampage { display: grid; gap: var(--sf-3); }
.sf-teampage__card { display: grid; gap: var(--sf-3); padding: var(--sf-4); }
.sf-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); }
.sf-sectionhead > .sf-listgroup { padding: 0; }

/* ── Admin data pages ────────────────────────── tiles, the one bar chart, bar rows, group heads, code blocks (handoff_spikefreakadminpages 05) */
.sf-codeblock { margin: 0; padding: var(--sf-3); max-block-size: calc(var(--sf-tap) * 5); overflow: auto; font: var(--sf-w-reg) var(--sf-text-xs)/1.4 var(--sf-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sf-sunk); color: var(--sf-ink); border-radius: var(--sf-r-sm); }
.sf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-2); }
.sf-tile { display: flex; flex-direction: column; gap: var(--sf-1); min-width: 0; padding: var(--sf-3); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); }
.sf-tile__v { font: var(--sf-w-bold) var(--sf-text-2xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-tile__k { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.sf-bars { display: flex; align-items: flex-end; gap: var(--sf-1); block-size: calc(var(--sf-tap) * 2.5); border-bottom: 1px solid var(--sf-line); }
.sf-bars__col { flex: 1 1 0; min-width: 0; block-size: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.sf-bars__seg { inline-size: 100%; background: var(--sf-accent); border-radius: var(--sf-r-sm) var(--sf-r-sm) 0 0; }
.sf-bars__seg--bad { background: var(--sf-stop); border-block-end: var(--sf-1) solid var(--sf-paper); }
.sf-bars__axis { display: flex; justify-content: space-between; gap: var(--sf-2); padding-top: var(--sf-1); font-size: var(--sf-text-xs); color: var(--sf-ink-3); }
.sf-bars__legend { display: flex; flex-wrap: wrap; gap: var(--sf-3); padding-top: var(--sf-1); font-size: var(--sf-text-xs); color: var(--sf-ink-3); }
.sf-bars__key { display: inline-block; inline-size: var(--sf-3); block-size: var(--sf-3); border-radius: var(--sf-r-sm); background: var(--sf-accent); }
.sf-bars__legend > span { display: inline-flex; align-items: center; gap: var(--sf-1); }
.sf-bars__key--bad { background: var(--sf-stop); }
.sf-barrow { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sf-1) var(--sf-3); min-block-size: var(--sf-tap); padding: var(--sf-2) var(--sf-4); border-bottom: 1px solid var(--sf-line-soft); font-size: var(--sf-text-sm); }
.sf-barrow:last-child { border-bottom: 0; }
.sf-barrow__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--sf-accent-soft); z-index: 0; }
.sf-barrow > :not(.sf-barrow__fill) { position: relative; z-index: 1; }
.sf-barrow__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--sf-ink); display: grid; gap: var(--sf-1); }
.sf-barrow__num { flex: none; white-space: nowrap; color: var(--sf-ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .sf-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sf-row__open { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }

/* ── Admin on a PC (handoff_spikefreakadminpages 06) ───── from 1024px: the Admin groups beside the open page, search + Level + Sort in one row,
   the Users table (head and rows share one column template), and every page but Users and Access in a centred column of 720. Phone and
   tablet are untouched: the nav and the table head are hidden, the date cells show only inside the row text. */
.sf-groupnav, .sf-tablehead, .sf-row__cell { display: none; }
.sf-toolrow { display: grid; gap: var(--sf-2); }
@media (min-width: 1024px) {
  .ap-shell--home { display: grid; grid-template-columns: calc(var(--sf-rail-w) + var(--sf-4)) minmax(0, 1fr); gap: var(--sf-6); align-items: start; }
  .ap-shell--home[data-tab="$home"] { grid-template-columns: minmax(0, 1fr); }
  .ap-shell--home[data-tab="$home"] > .ap-panel, .ap-shell--home:not([data-tab="users"]):not([data-tab="access"]) > .ap-panel { inline-size: 100%; max-inline-size: calc(var(--sf-tap) * 15); margin-inline: auto; }
  .sf-groupnav { display: flex; flex-direction: column; gap: var(--sf-1); position: sticky; top: calc(var(--sf-header-h) + var(--sf-4)); }
  .sf-groupnav[hidden] { display: none; }
  .sf-groupnav__head { margin: 0; padding: var(--sf-3) var(--sf-3) var(--sf-1); color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; }
  .sf-groupnav__head:first-child { padding-top: 0; }
  .sf-groupnav__item { display: flex; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-tap-min); padding: 0 var(--sf-3); border-radius: var(--sf-r-sm); color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-md)/1.2 var(--sf-font-ui); text-decoration: none; }
  .sf-groupnav__item svg { flex: none; inline-size: 20px; block-size: 20px; }
  .sf-groupnav__item:hover { background: var(--sf-sunk); }
  .sf-groupnav__item[aria-current="page"] { background: var(--sf-accent-soft); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
  .sf-groupnav__item:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
  .sf-toolrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--sf-tap) * 8)); gap: var(--sf-2); align-items: center; }
  .sf-tablehead, .sf-row--table { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--sf-tap) * 2.5) calc(var(--sf-tap) * 3) calc(var(--sf-tap) * 3) var(--sf-tap-min); gap: var(--sf-4); align-items: center; }
  .sf-tablehead { padding: 0 var(--sf-4) var(--sf-2); color: var(--sf-ink-3); border-bottom: 1px solid var(--sf-line); font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; text-align: start; }
  .sf-row--table .sf-row__chip { justify-content: flex-start; }
  .sf-row--table .sf-row__cell { display: block; font-size: var(--sf-text-md); font-variant-numeric: tabular-nums; }
  .sf-row--table .sf-row__phone { display: none; }
}


/* Season improvement report (Runners → Season improvement, /runners/improvement; js/runnerImprovement.js, handoff_runner_improvement_do_before_status,
   second pass handoff_spikefreak_season_improvement_fixes). .sf-imp: two choices (.sf-imp__choice, aria-pressed; one column on a phone, two
   from 600), the sentence, the Show adjusted switch, filters (segmented + sort chip, both 44), the KPI cells, then .sf-imp__table. A runner is
   .sf-imp__row > .sf-imp__rowbtn (the whole row is the button, aria-expanded; the last column is the system .sf-fold ring) and, open,
   .sf-imp__open on --sf-sunk: "By distance", one .sf-imp__dist fold per distance in the same column template, then the link row. From 1024 one
   grid template, --imp-cols, serves the head, runner rows and distance rows; Show adjusted off (data-adjusted="off") drops the adjusted three.
   Phone: line 1 name · big change · ring, line 2 date-over-time blocks and the verdict. The race table's head and rows share --imp-race-cols.
   States: choice and row default, hover, pressed, focus, open; switch on, off; page loading, empty, error. */
.sf-imp { --imp-cols: minmax(0, 1fr) auto var(--sf-fold); --imp-kpi: var(--sf-text-kpi-ph); display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; }
.sf-imp__choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-2); min-width: 0; }
.sf-imp__choice { display: grid; align-content: center; gap: var(--sf-1); min-block-size: var(--sf-imp-choice-h); padding: var(--sf-3) var(--sf-4); border: 2px solid var(--sf-line-strong); border-radius: var(--sf-r-xl); background: var(--sf-paper); color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.sf-imp__choice:hover { border-color: var(--sf-ink-3); }
.sf-imp__choice:active { background: var(--sf-sunk); }
.sf-imp__choice:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-imp__choice[aria-pressed="true"] { border-color: var(--sf-accent); background: var(--sf-accent); color: var(--sf-on-accent); }
.sf-imp__choice[aria-pressed="true"]:hover { border-color: var(--sf-accent-hover); background: var(--sf-accent-hover); }
.sf-imp__choicetitle { font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); }
.sf-imp__range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-1) var(--sf-2); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-imp-range)/1.2 var(--sf-font-ui); }
.sf-imp__choice[aria-pressed="true"] .sf-imp__range { color: var(--sf-on-accent); }
.sf-imp__range .sf-icon { inline-size: 16px; block-size: 16px; flex: none; }
.sf-imp__sentence { margin: 0; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-md)/1.4 var(--sf-font-ui); }
.sf-imp__adj { align-self: flex-start; min-block-size: var(--sf-tap); padding: 0; color: var(--sf-ink); font-weight: var(--sf-w-semi); }
.sf-imp__adj[aria-checked="true"] { color: var(--sf-ink); }
.sf-imp__adj .sf-switch__track { box-sizing: border-box; inline-size: var(--sf-imp-sw-w); block-size: var(--sf-imp-sw-h); border: 1.5px solid var(--sf-line-strong); background: var(--sf-sunk); }
.sf-imp__adj[aria-checked="true"] .sf-switch__track { border-color: var(--sf-accent); }
.sf-imp__adj .sf-switch__thumb { inset-block: auto; inset-block-start: 50%; translate: 0 -50%; inline-size: var(--sf-imp-knob); block-size: var(--sf-imp-knob); }
.sf-imp__adj[aria-checked="true"] .sf-switch__thumb { inset-inline-start: calc(100% - var(--sf-imp-knob) - var(--sf-ring)); }
.sf-imp__adjlabel { font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: start; }
.sf-imp__filters { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-imp__filters .sf-seg { flex: 1 1 auto; min-width: 0; }
.sf-imp__filters .sf-seg button { min-block-size: var(--sf-tap-min); }
.sf-imp__sort { min-block-size: var(--sf-tap-min); flex: none; gap: var(--sf-2); }
.sf-imp__phoneacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-2); }
.sf-imp__phoneacts .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-2); }
.sf-imp__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-imp__kpis[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-imp__kpi { display: flex; flex-direction: column; gap: var(--sf-1); min-width: 0; padding: var(--sf-3); border-inline-start: 1px solid var(--sf-line); }
.sf-imp__kpi:first-child { border-inline-start: 0; }
.sf-imp__kpival { font: var(--sf-w-bold) var(--imp-kpi)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-imp__kpilab { color: var(--sf-ink-2); font-size: var(--sf-text-sm); line-height: 1.25; }
.sf-imp__num { font-family: var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-imp__table { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-r-xl); background: var(--sf-paper); overflow: hidden; }
.sf-imp__thead { display: block; border-bottom: 1px solid var(--sf-line); }
.sf-imp__groups, .sf-imp__cols { display: grid; grid-template-columns: var(--imp-cols); column-gap: var(--sf-3); padding: 0 var(--sf-3) 0 var(--sf-4); }
.sf-imp__groups { padding-top: var(--sf-2); }
.sf-imp__gl { padding-block-end: var(--sf-1); border-block-end: 2px solid var(--sf-ink); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.sf-imp__gl--raw { grid-column: 2 / span 3; }
.sf-imp__gl--adj { grid-column: 5 / span 3; }
.sf-imp__cols { align-items: end; padding-block: var(--sf-2); }
.sf-imp__h { display: flex; flex-direction: column; color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1.25 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sf-imp__h--n { align-items: flex-end; text-align: end; }
.sf-imp__hdate { color: var(--sf-ink); letter-spacing: 0; }
.sf-imp__group { margin: 0; padding: var(--sf-3) var(--sf-4); border-top: 1px solid var(--sf-line); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.sf-imp__row { border-top: 1px solid var(--sf-line-soft); min-width: 0; }
.sf-imp__row:first-child, .sf-imp__thead + .sf-imp__row { border-top: 0; }
.sf-imp__rowbtn { display: grid; grid-template-columns: var(--imp-cols); align-items: center; gap: var(--sf-2) var(--sf-3); inline-size: 100%; min-block-size: var(--sf-imp-row); padding: var(--sf-3) var(--sf-3) var(--sf-3) var(--sf-4); border: 0; background: none; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.sf-imp__rowbtn:hover { background: var(--sf-page); }
.sf-imp__rowbtn:active { background: var(--sf-sunk); }
.sf-imp__rowbtn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-imp__rowbtn--dist { min-block-size: var(--sf-imp-dist-row); padding-block: var(--sf-2); }
.sf-imp__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-imp__name { font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-imp__name--dist { font-size: var(--sf-text-nav); }
.sf-imp__sub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-imp__c { text-align: end; font: var(--sf-w-bold) var(--sf-imp-num)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-imp__rowbtn--dist .sf-imp__c { font-size: var(--sf-imp-num-sm); }
.sf-imp__big { font: var(--sf-w-bold) var(--sf-imp-big)/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-imp__rowbtn--dist .sf-imp__big { font-size: var(--sf-imp-num); }
.sf-imp__unit { color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); }
.sf-imp__lab { color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; } /* the runner tab's hero labels */
.sf-imp__fl { color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.sf-imp__line2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sf-1) var(--sf-3); min-width: 0; color: var(--sf-ink-2); }
.sf-imp__when { display: inline-grid; line-height: 1.15; }
.sf-imp__whendate { color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-xs)/1.15 var(--sf-font-ui); }
.sf-imp__whentime { color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-imp-num)/1.15 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-imp__rowbtn--dist .sf-imp__whentime { font-size: var(--sf-imp-num-sm); }
.sf-imp__arrow { display: inline-flex; padding-block-end: 3px; color: var(--sf-ink-3); }
.sf-imp__arrow .sf-icon { inline-size: 16px; block-size: 16px; }
.sf-imp__line2 .sf-imp__verdict { align-self: center; }
.sf-imp__verdict { display: inline-flex; align-items: center; gap: var(--sf-1); font: var(--sf-w-bold) var(--sf-imp-range)/1.2 var(--sf-font-ui); white-space: nowrap; }
.sf-imp__verdict .sf-icon { inline-size: 18px; block-size: 18px; flex: none; }
.sf-imp__verdict--go { color: var(--sf-go-ink); }
.sf-imp__verdict--warn { color: var(--sf-warn-ink); }
.sf-imp__verdict--ink-3 { color: var(--sf-ink-3); }
.sf-imp__go { display: grid; place-items: center; justify-self: end; }
.sf-imp__open { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--sf-line-soft); background: var(--sf-sunk); }
.sf-imp__bydist { margin: 0; padding: var(--sf-3) var(--sf-3) var(--sf-1) var(--sf-4); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sf-imp__dist { min-width: 0; border-top: 1px solid var(--sf-line-soft); }
.sf-imp__dist[aria-expanded="true"] { background: var(--sf-paper); }
.sf-imp__dopen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-4) var(--sf-6); min-width: 0; padding: var(--sf-2) var(--sf-3) var(--sf-4) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-imp__linkrow { display: flex; align-items: center; min-block-size: var(--sf-tap); padding: var(--sf-1) var(--sf-3) var(--sf-1) var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-imp__chartbox { display: flex; flex-direction: column; gap: var(--sf-2); min-width: 0; }
.sf-imp__chart { inline-size: 100%; max-inline-size: 300px; block-size: auto; overflow: visible; }
.sf-imp__chart-raw { fill: none; stroke: var(--sf-ink-3); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round; }
.sf-imp__chart-raw--solo { stroke: var(--sf-ink); stroke-dasharray: none; }
.sf-imp__chart-adj { fill: none; stroke: var(--sf-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sf-imp__chart-rawdot { fill: var(--sf-paper); stroke: var(--sf-ink-3); stroke-width: 2; }
.sf-imp__chart-adjdot { fill: var(--sf-accent); }
.sf-imp__chart-gaindot { stroke: var(--sf-accent-soft); stroke-width: 3; }
.sf-imp__chart text { font-family: var(--sf-font-ui); font-size: var(--sf-text-xs); font-variant-numeric: tabular-nums; }
.sf-imp__chart .sf-imp__chart-up { fill: var(--sf-ink-3); font-size: var(--sf-imp-axis); font-weight: var(--sf-w-bold); }
.sf-imp__chart-adjlabel { fill: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-imp__chart-rawlabel { fill: var(--sf-ink-2); font-weight: var(--sf-w-semi); }
.sf-imp__chart-date { fill: var(--sf-ink-2); font-weight: var(--sf-w-bold); }
.sf-imp__key { display: flex; flex-wrap: wrap; gap: var(--sf-1) var(--sf-4); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-imp__keyitem { display: inline-flex; align-items: center; gap: var(--sf-2); }
.sf-imp__keyitem--adj { color: var(--sf-accent-ink); }
.sf-imp__swatch { inline-size: 22px; block-size: 8px; flex: none; }
.sf-imp__note { margin: 0; color: var(--sf-ink-2); font-size: var(--sf-imp-range); line-height: 1.4; }
.sf-imp__races { display: flex; flex-direction: column; min-width: 0; }
.sf-imp__races--wide { --imp-race-cols: 64px minmax(0, 1fr) 72px 64px 72px 64px; }
.sf-imp__races--wide[data-adjusted="off"] { --imp-race-cols: 64px minmax(0, 1fr) 72px 64px; }
.sf-imp__races--phone { --imp-race-cols: 48px minmax(0, 1fr) auto; }
.sf-imp__race { display: grid; grid-template-columns: var(--imp-race-cols); align-items: center; gap: 2px var(--sf-3); min-block-size: var(--sf-imp-dist-row); padding-block: var(--sf-2); border-top: 1px solid var(--sf-line-soft); }
.sf-imp__races--phone .sf-imp__race { min-block-size: var(--sf-16); }
.sf-imp__race--groups, .sf-imp__race--head { min-block-size: 0; border-top: 0; color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sf-imp__race--groups { padding-block: 0; }
.sf-imp__race--head .sf-imp__rc { font: inherit; color: inherit; }
.sf-imp__rg { padding-block-end: var(--sf-1); border-block-end: 2px solid var(--sf-ink); text-align: center; }
.sf-imp__rg--raw { grid-column: 3 / span 2; }
.sf-imp__rg--adj { grid-column: 5 / span 2; }
.sf-imp__race--gain { background: var(--sf-accent-soft); box-shadow: inset 3px 0 0 var(--sf-accent); }
.sf-imp__rc--date { padding-inline-start: var(--sf-2); font: var(--sf-w-semi) var(--sf-text-nav)/1.2 var(--sf-font-ui); }
.sf-imp__rc--meet { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-imp__meet { font: var(--sf-w-semi) var(--sf-text-nav)/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-imp__cond { color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.sf-imp__rawline { color: var(--sf-ink-2); font-weight: var(--sf-w-semi); }
.sf-imp__gain { display: inline-flex; align-items: center; gap: var(--sf-1); padding-block-start: var(--sf-1); color: var(--sf-go-ink); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-imp__gain .sf-icon { inline-size: 16px; block-size: 16px; flex: none; }
.sf-imp__rc--n { text-align: end; font: var(--sf-w-bold) var(--sf-imp-num-sm)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-imp__rc--pace { color: var(--sf-ink-2); }
.sf-imp__rc--tp { display: grid; justify-items: end; text-align: end; }
.sf-imp__rtime { font: var(--sf-w-bold) var(--sf-imp-num)/1.15 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-imp__rpace { color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-imp__link { display: inline-flex; align-items: center; min-block-size: var(--sf-tap); color: var(--sf-link); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); }
.sf-imp__file { margin: 0; color: var(--sf-ink-2); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .sf-imp { --imp-kpi: var(--sf-text-kpi-tab); }
  .sf-imp__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-imp__kpi { padding: var(--sf-3) var(--sf-4); }
}
@media (min-width: 1024px) {
  .sf-imp { --imp-cols: minmax(160px, 1.6fr) repeat(6, minmax(60px, 1fr)) minmax(150px, 1.3fr) var(--sf-fold); --imp-kpi: var(--sf-text-kpi-pc); --sf-fold: 28px; }
  .sf-imp[data-adjusted="off"] { --imp-cols: minmax(160px, 1.6fr) repeat(3, minmax(60px, 1fr)) minmax(150px, 1.3fr) var(--sf-fold); }
  .sf-imp__kpi { padding: var(--sf-3) var(--sf-5); }
  .sf-imp__rowbtn { padding-block: var(--sf-2); }
  .sf-imp__verdict { white-space: normal; }
  .sf-imp__dopen { grid-template-columns: var(--sf-imp-chart-w) minmax(0, 1fr); }
}
/* Personal records (Runners → Personal records, /runners/prs; js/runnerPrs.js, handoff_spikefreak_pr_report). .sf-prs: the filter row (mode and gender
   segmented, Grade and Distances pills, all 44; on a phone Gender · Grade · Distances are three equal pills), the summary strip (the .sf-imp__kpis cells), then
   .sf-prs__table. A runner is .sf-prs__row > .sf-prs__rowbtn (the whole row is the button, aria-expanded; the last column is the system .sf-fold ring) and, open,
   .sf-prs__fold on --sf-sunk. From 600px one column template (--prs-n distance columns of --prs-w) serves the head and every row: Runner · a column per shown distance · This season · ring.
   A new PR is the .sf-prs__bub--new bubble; every cell has the bubble's padding so columns never shift. Print: the body-level .pr-print sheet
   alone (Letter portrait, black on white, rows never split, the header row repeats). States: pill default, hover, pressed, focus, open; row default, hover, pressed,
   focus, open; page loading, empty, error. */
.sf-prs { --imp-kpi: var(--sf-text-kpi-ph); --prs-w: var(--sf-prs-col-4); --prs-n: 3; display: block; min-width: 0; }
.sf-prs__screen { display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; }
.sf-prs__filterbox { display: flex; flex-direction: column; gap: var(--sf-2); min-width: 0; }
.sf-prs__filters { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.sf-prs__filterbox .sf-seg button { min-block-size: var(--sf-tap-min); }
.sf-prs__spacer { flex: 1 1 auto; }
.sf-prs__wrap { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.sf-prs__pill { flex: 1 1 auto; justify-content: space-between; min-width: 0; min-block-size: var(--sf-tap-min); gap: var(--sf-2); border-radius: var(--sf-r-pill); }
.sf-prs__pilltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-prs__pill .sf-icon { inline-size: 18px; block-size: 18px; flex: none; }
.sf-prs__pop { position: absolute; inset-block-start: calc(100% + var(--sf-2)); inset-inline-end: 0; z-index: 5; display: grid; gap: var(--sf-3); inline-size: var(--sf-prs-pop-w); max-inline-size: calc(100% + var(--sf-prs-pop-w)); padding: var(--sf-4); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); box-shadow: var(--sf-shadow-2); }
.sf-prs__pophead { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); }
.sf-prs__poptitle { margin: 0; font: var(--sf-w-bold) var(--sf-text-xl)/1.2 var(--sf-font-ui); }
.sf-prs__pickrows { display: flex; flex-direction: column; min-width: 0; }
.sf-prs__pick { display: flex; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-tap); border-block-start: 1px solid var(--sf-line-soft); cursor: pointer; }
.sf-prs__pick input { inline-size: 24px; block-size: 24px; flex: none; accent-color: var(--sf-accent); }
.sf-prs__pickname { flex: 1 1 auto; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); white-space: nowrap; }
.sf-prs__picksub { color: var(--sf-ink-3); font-size: var(--sf-text-sm); white-space: nowrap; }
.sf-prs__table { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-prs__table[data-ncols="1"], .sf-prs__table[data-ncols="2"] { --prs-w: var(--sf-prs-col-1); }
.sf-prs__table[data-ncols="3"] { --prs-w: var(--sf-prs-col-3); }
.sf-prs__row { min-width: 0; border-block-start: 1px solid var(--sf-line-soft); }
.sf-prs__row:first-child { border-block-start: 0; }
.sf-prs__rowbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--sf-fold); grid-template-areas: "who new go" "cells cells cells"; align-items: center; column-gap: var(--sf-3); row-gap: var(--sf-2); inline-size: 100%; min-block-size: var(--sf-prs-row); padding: var(--sf-3) var(--sf-3) var(--sf-3) var(--sf-4); border: 0; background: none; color: var(--sf-ink); font: inherit; text-align: start; cursor: pointer; }
.sf-prs__rowbtn:hover { background: var(--sf-sunk); }
.sf-prs__rowbtn:active { background: var(--sf-accent-soft); }
.sf-prs__rowbtn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-prs__row[aria-expanded="true"] > .sf-prs__rowbtn { background: var(--sf-sunk); }
.sf-prs__row[aria-expanded="true"] .sf-fold .sf-icon { transform: rotate(180deg); }
.sf-prs__who { grid-area: who; display: flex; flex-direction: column; gap: var(--sf-1); min-width: 0; }
.sf-prs__name { font: var(--sf-w-bold) var(--sf-text-lg)/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.sf-prs__sub { color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-prs__cells { grid-area: cells; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-2); min-width: 0; }
.sf-prs__cell { display: flex; flex-direction: column; gap: var(--sf-1); min-width: 0; }
.sf-prs__celllab { order: -1; color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sf-prs__bub { display: grid; justify-items: start; gap: 0; padding: calc(var(--sf-1) * 1.5) var(--sf-3); border-radius: var(--sf-r-xl); background: transparent; line-height: 1.15; }
.sf-prs__bub--new { background: var(--sf-go-soft); color: var(--sf-go-ink); }
.sf-prs__time { font: var(--sf-w-bold) var(--sf-imp-num)/1.15 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-prs__date { color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1.15 var(--sf-font-ui); }
.sf-prs__bub--new .sf-prs__date { color: var(--sf-go-ink); font-weight: var(--sf-w-bold); }
.sf-prs__newword { grid-area: new; display: inline-flex; align-items: center; gap: var(--sf-1); color: var(--sf-go-ink); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); white-space: nowrap; }
.sf-prs__newword .sf-icon { inline-size: 16px; block-size: 16px; flex: none; }
.sf-prs__go { grid-area: go; display: grid; place-items: center; justify-self: end; }
.sf-prs__thead { display: none; }
.sf-prs__fold { display: flex; flex-direction: column; min-width: 0; border-block-start: 1px solid var(--sf-line-soft); background: var(--sf-sunk); }
.sf-prs__frow { display: grid; grid-template-columns: minmax(0, 1fr) var(--sf-prs-fpr-ph) var(--sf-prs-fdt-ph); grid-template-areas: "dist pr date" "meet pr date" "status pr date"; align-items: center; column-gap: var(--sf-3); min-block-size: var(--sf-prs-frow-ph); padding: var(--sf-2) var(--sf-3) var(--sf-2) var(--sf-4); border-block-start: 1px solid var(--sf-line-soft); }
.sf-prs__frow:first-child { border-block-start: 0; }
.sf-prs__frow--new { background: var(--sf-go-soft); }
.sf-prs__frow--head { display: none; }
.sf-prs__fc { min-width: 0; font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.sf-prs__fc--dist { grid-area: dist; }
.sf-prs__fc--bold { font-weight: var(--sf-w-bold); }
.sf-prs__fc--pr { grid-area: pr; text-align: end; font: var(--sf-w-bold) var(--sf-imp-num-sm)/1.2 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.sf-prs__fc--date { grid-area: date; text-align: end; color: var(--sf-ink-2); }
.sf-prs__fc--meet { grid-area: meet; color: var(--sf-ink-2); font-size: var(--sf-text-sm); overflow-wrap: anywhere; }
.sf-prs__fc--status { grid-area: status; }
.sf-prs__status { display: inline-flex; align-items: center; gap: var(--sf-1); color: var(--sf-ink-3); font: var(--sf-w-semi) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
.sf-prs__status--new { color: var(--sf-go-ink); font-weight: var(--sf-w-bold); }
.sf-prs__status .sf-icon { inline-size: 16px; block-size: 16px; flex: none; }
.sf-prs__nomark { margin: 0; padding: var(--sf-3) var(--sf-4); color: var(--sf-ink-2); }
.sf-prs__foot { margin: 0; padding: var(--sf-3) var(--sf-4); border-block-start: 1px solid var(--sf-line-soft); color: var(--sf-ink-3); font-size: var(--sf-text-sm); }
.pr-print { display: none; }
@media (min-width: 600px) {
  .sf-prs { --imp-kpi: var(--sf-text-kpi-tab); }
  .sf-prs__wrap { flex: none; }
  .sf-prs__pill { flex: none; }
  .sf-prs__thead, .sf-prs__rowbtn { grid-template-columns: minmax(150px, 1fr) repeat(var(--prs-n), var(--prs-w)) var(--sf-prs-season) var(--sf-fold); }
  .sf-prs__thead { display: grid; align-items: center; column-gap: var(--sf-3); padding: var(--sf-2) var(--sf-3) var(--sf-2) var(--sf-4); border-block-end: 1px solid var(--sf-line); background: var(--sf-sunk); }
  .sf-prs__h { color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); }
  .sf-prs__h--n { text-align: end; font-variant-numeric: tabular-nums; }
  .sf-prs__rowbtn { grid-template-areas: none; row-gap: 0; }
  .sf-prs__who, .sf-prs__newword, .sf-prs__go { grid-area: auto; }
  .sf-prs__cells { display: contents; }
  .sf-prs__cell { align-items: flex-end; }
  .sf-prs__bub { justify-items: end; text-align: end; }
  .sf-prs__newword { justify-self: end; }
  .sf-prs__frow { grid-template-columns: var(--sf-prs-fd-tab) var(--sf-prs-fpr-tab) var(--sf-prs-fdt-tab) minmax(0, 1fr); grid-template-areas: "dist pr date meet" "dist pr date status"; min-block-size: var(--sf-prs-frow); }
  .sf-prs__frow--head { display: grid; min-block-size: var(--sf-tap-min); background: var(--sf-sunk); }
  .sf-prs__frow--head .sf-prs__fc { color: var(--sf-ink-2); font-weight: var(--sf-w-bold); font-size: var(--sf-text-sm); }
  .sf-prs__frow--head .sf-prs__fc--status { display: none; }
}
@media (min-width: 1024px) {
  .sf-prs { --imp-kpi: var(--sf-text-kpi-pc); --sf-fold: 28px; }
  .sf-prs__frow { grid-template-columns: var(--sf-prs-fd-pc) var(--sf-prs-fpr-pc) var(--sf-prs-fdt-pc) minmax(0, 1fr) var(--sf-prs-fst); grid-template-areas: "dist pr date meet status"; }
  .sf-prs__frow--head .sf-prs__fc--status { display: block; }
}
@page { size: letter landscape; margin: 0.5in; }
@page pr-print { size: letter portrait; margin: 0.5in; }
@media print {
  body > *:not(.pr-print):not(.imp-print) { display: none; }
  html, body { width: auto; background: white; }
  .pr-print { page: pr-print; display: block; width: 100%; max-width: none; margin: 0; padding: 0; color: black; font: 12px/1.3 var(--sf-font-ui); }
  .pr-print__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid black; padding-bottom: 8px; margin-bottom: 4px; }
  .pr-print__title { font: 700 22px/1.1 var(--sf-font-ui); margin: 0; white-space: nowrap; }
  .pr-print__meta { font-size: 11px; text-align: right; white-space: nowrap; }
  .pr-print__filters { font-size: 11px; margin: 0 0 8px; }
  .pr-print table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .pr-print thead { display: table-header-group; }
  .pr-print th { font: 700 10px/1.15 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; text-align: right; padding: 0 6px 4px; border-bottom: 1px solid black; white-space: nowrap; }
  .pr-print th:first-child, .pr-print td:first-child { text-align: left; width: 22%; }
  .pr-print td { padding: 4px 6px; border-bottom: 1px solid var(--sf-line-strong); text-align: right; vertical-align: middle; font: 600 14px/1.1 var(--sf-font-num); white-space: nowrap; }
  .pr-print td:first-child { font: 700 12px/1.2 var(--sf-font-ui); white-space: normal; }
  .pr-print td:first-child small { display: block; font-weight: 400; font-size: 10px; color: color-mix(in srgb, black 80%, white); }
  .pr-print tr { break-inside: avoid; }
  .pr-print tr.pr-print__band td { background: color-mix(in srgb, black 11%, white); font: 700 10px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; text-align: left; border-bottom: 1px solid black; }
  .pr-print td.pr-new { background: color-mix(in srgb, black 17%, white); font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-print .pr-new i { font: 800 9px var(--sf-font-ui); font-style: normal; letter-spacing: .04em; margin-left: 3px; }
  .pr-print__legend { font-size: 10px; margin-top: 8px; }
}
/* Season improvement, Print (js/runnerImprovement.js paintSheet): a body-level .imp-print sheet, one real table, Letter landscape. The screen is hidden by the
   body rule above. A runner and all of their distances are one tbody (never split); the header rows repeat; the footer is the page's margin boxes (the team
   half is written by the page). Faster is bold on --sf-print-chip grey, a true minus and a verdict word: nothing needs colour. */
.imp-print { display: none; }
@page imp-print { @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 10px system-ui, sans-serif; color: black; } }
@media print {
  .imp-print { page: imp-print; display: block; width: 100%; max-width: none; margin: 0; padding: 0; color: black; font: 12px/1.3 var(--sf-font-ui); }
  .imp-print__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid black; padding-bottom: 8px; margin-bottom: 4px; }
  .imp-print__title { font: 700 22px/1.1 var(--sf-font-ui); margin: 0; white-space: nowrap; }
  .imp-print__meta { font-size: 11px; text-align: right; white-space: nowrap; }
  .imp-print__sentence { font-size: 12px; margin: 4px 0 2px; }
  .imp-print__stats, .imp-print__filters { font-size: 11px; margin: 0 0 6px; }
  .imp-print table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .imp-print col.n { width: 62px; }
  .imp-print col.chg { width: 70px; }
  .imp-print col.verdict { width: 150px; }
  .imp-print table[data-adjusted="off"] col.n, .imp-print table[data-adjusted="off"] col.chg { width: 90px; }
  .imp-print table[data-adjusted="off"] col.verdict { width: 170px; }
  .imp-print thead { display: table-header-group; }
  .imp-print th { font: 700 10px/1.15 var(--sf-font-ui); letter-spacing: .04em; text-transform: uppercase; text-align: right; padding: 0 6px 4px; border-bottom: 1px solid black; white-space: nowrap; }
  .imp-print th.grp { text-align: center; border-bottom: 2px solid black; }
  .imp-print th:first-child, .imp-print td:first-child { text-align: left; }
  .imp-print td { padding: 3px 6px; text-align: right; vertical-align: middle; font: 600 14px/1.1 var(--sf-font-num); white-space: nowrap; }
  .imp-print td:first-child { font: 700 12px/1.2 var(--sf-font-ui); white-space: normal; }
  .imp-print td:first-child small { font-weight: 400; font-size: 10px; color: color-mix(in srgb, black 80%, white); margin-left: 6px; }
  .imp-print tbody.runner { break-inside: avoid; border-bottom: 1px solid var(--sf-line-strong); }
  .imp-print tr.dist td { font-size: 12px; font-weight: 600; color: color-mix(in srgb, black 80%, white); padding: 1px 6px; }
  .imp-print tr.dist td:first-child { padding-left: 22px; font-size: 11px; font-weight: 700; color: black; }
  .imp-print tr.band td { background: color-mix(in srgb, black 11%, white); font: 700 10px/1 var(--sf-font-ui); letter-spacing: .08em; text-transform: uppercase; text-align: left; border-bottom: 1px solid black; padding: 5px 6px; }
  .imp-print td.faster { background: var(--sf-print-chip); font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .imp-print td.verdict { font: 700 11px/1.15 var(--sf-font-ui); white-space: normal; }
  .imp-print__legend { font-size: 10px; margin-top: 8px; }
}
/* ── Runner page, Improvement tab (.sf-impt): verdict line, three hero cells (2 + 1 on a phone), then the chart and the race table; the chart, table and verdict are .sf-imp__* */
.sf-impt { --imp-kpi: var(--sf-text-kpi-ph); display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; }
.sf-impt__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-1) var(--sf-3); margin: 0; }
.sf-impt__verdict .sf-imp__verdict { font-size: var(--sf-text-lg); }
.sf-impt__verdict .sf-imp__verdict .sf-icon { inline-size: 22px; block-size: 22px; }
.sf-impt__why { color: var(--sf-ink-2); font-size: var(--sf-text-md); }
.sf-impt__none { margin: 0; color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-impt__hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.sf-impt__cell { display: flex; flex-direction: column; gap: var(--sf-1); min-width: 0; padding: var(--sf-3) var(--sf-4); border-inline-start: 1px solid var(--sf-line); }
.sf-impt__cell:first-child { border-inline-start: 0; }
.sf-impt__cell:nth-child(3) { grid-column: 1 / -1; border-inline-start: 0; border-block-start: 1px solid var(--sf-line); }
.sf-impt__cell[data-hero="adjusted"] .sf-imp__lab { color: var(--sf-accent-ink); }
.sf-impt__big { display: flex; align-items: baseline; gap: var(--sf-2); font: var(--sf-w-bold) var(--imp-kpi)/1.1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-impt__big--go { color: var(--sf-go-ink); }
.sf-impt__big--warn { color: var(--sf-warn-ink); }
.sf-impt__unit { font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); color: var(--sf-ink); }
.sf-impt__body { display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; }
.sf-impt__card { display: flex; flex-direction: column; gap: var(--sf-3); min-width: 0; padding: var(--sf-4); }
.sf-impt__title { margin: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.2 var(--sf-font-ui); color: var(--sf-ink); }
.sf-impt__card .sf-imp__chart { max-inline-size: none; }
.sf-impt__card .sf-imp__note { display: none; }
.sf-impt__export { inline-size: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-2); }
@media (min-width: 600px) {
  .sf-impt { --imp-kpi: var(--sf-text-kpi-tab); }
  .sf-impt__cell { padding: var(--sf-3) var(--sf-5); }
  .sf-impt__hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-impt__cell:nth-child(3) { grid-column: auto; border-inline-start: 1px solid var(--sf-line); border-block-start: 0; }
  .sf-impt__card { padding: var(--sf-5); }
  .sf-impt__card .sf-imp__note { display: block; }
  .sf-impt__export { display: none; }
}
@media (min-width: 1200px) {
  .sf-impt { --imp-kpi: var(--sf-text-kpi-pc); }
  .sf-impt__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--sf-3); }
}
/* ── Tabs (the runner page: Overview · Races · Improvement · Status · Seasons): 48 tall, scrolls sideways on a phone, never wraps */
.sf-tabs { display: flex; align-items: stretch; gap: 0; block-size: var(--sf-tap); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-block-end: 1px solid var(--sf-line); }
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tabs__tab {
  position: relative; flex: none; display: inline-flex; align-items: center; padding: 0 var(--sf-tab-pad); border: 0; background: none; cursor: pointer;
  color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); white-space: nowrap;
}
.sf-tabs__tab:hover { background: var(--sf-sunk); color: var(--sf-ink); }
.sf-tabs__tab:active { background: var(--sf-accent-soft); }
.sf-tabs__tab:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.sf-tabs__tab[aria-selected="true"] { color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: var(--sf-tab-line); background: var(--sf-accent); }
.sf-tabpanel[hidden] { display: none; }

/* ── Status history (the runner page's Status tab, js/runnerStatusTab.js): the current-status card, the history list, the edit sheet.
   Tones are the Runners list's: healthy ink-3, limited and sick warn-ink, injured and out stop-ink; status is always icon + word. */
.sf-sttab { display: grid; gap: var(--sf-4); min-width: 0; padding-block-start: var(--sf-3); }
.sf-sttone--ok { color: var(--sf-ink-3); }
.sf-sttone--warn { color: var(--sf-warn-ink); }
.sf-sttone--stop { color: var(--sf-stop-ink); }
.sf-stcard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-3); align-items: start; padding: var(--sf-4); min-width: 0; }
.sf-stcard__now { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sf-3); align-items: center; }
.sf-stcard__now svg { inline-size: var(--sf-8); block-size: var(--sf-8); grid-row: 1 / 3; }
.sf-stcard__word { font: var(--sf-w-bold) var(--sf-text-kpi-ph)/1.1 var(--sf-font-ui); }
.sf-stcard__since { color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-stcard__stat { display: grid; gap: var(--sf-1); min-width: 0; }
.sf-stcard__num { font: var(--sf-w-bold) var(--sf-text-kpi-tab)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-stcard__lab { color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-sthead { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); min-width: 0; }
.sf-sthead .sf-scopebtn { flex: none; }
.sf-sthist { overflow: hidden; min-width: 0; }
.sf-sthist__cols { display: none; }
.sf-sthist__empty { margin: 0; padding: var(--sf-4); color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-md)/1.4 var(--sf-font-ui); }
.sf-sthist__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto var(--sf-tap-min); grid-template-areas: 'status status more' 'dates length more' 'sub sub .' 'who who .';
  column-gap: var(--sf-1); row-gap: 3px; align-items: start; padding: var(--sf-3) var(--sf-1) var(--sf-3) var(--sf-4); border-block-start: 1px solid var(--sf-line-soft); min-width: 0;
}
.sf-sthist__row:first-of-type { border-block-start: 0; }
.sf-sthist__row.is-now { background: var(--sf-sunk); }
.sf-sthist__dot { display: none; }
.sf-sthist__status { grid-area: status; display: flex; align-items: center; gap: var(--sf-2); flex-wrap: wrap; min-width: 0; font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-sthist__status svg { flex: none; inline-size: var(--sf-icon-pick); block-size: var(--sf-icon-pick); }
.sf-sthist__note { color: var(--sf-ink); font-weight: var(--sf-w-reg); overflow-wrap: anywhere; }
.sf-sthist__dates { grid-area: dates; color: var(--sf-ink); font: var(--sf-w-reg) var(--sf-text-md)/1.3 var(--sf-font-ui); }
.sf-sthist__len { grid-area: length; color: var(--sf-ink); font: var(--sf-w-bold) var(--sf-text-md)/1.3 var(--sf-font-ui); font-variant-numeric: tabular-nums; }
.sf-sthist__len::before { content: "\00b7\00a0"; font-weight: var(--sf-w-reg); }
.sf-sthist__sub { grid-area: sub; margin: 0; color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); min-width: 0; overflow-wrap: break-word; }
.sf-sthist__sub:empty { display: none; }
.sf-sthist__who { grid-area: who; color: var(--sf-ink-3); font: var(--sf-w-reg) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-sthist__more { grid-area: more; align-self: start; }
.sf-stedit { display: grid; gap: var(--sf-3); min-width: 0; }
.sf-stedit__label { font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-stedit__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-3); align-items: start; }
.sf-stedit__dates > * { min-width: 0; }
.sf-stedit__still { display: grid; gap: var(--sf-1); justify-items: start; }
.sf-stedit__still .sf-switch__word { order: 0; min-inline-size: 0; text-align: start; color: var(--sf-ink); }
.sf-stedit__why { margin: 0; color: var(--sf-ink-2); font: var(--sf-w-reg) var(--sf-text-md)/1.4 var(--sf-font-ui); }
.sf-stedit__err { margin: 0; color: var(--sf-stop-ink); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.sf-stedit__err[hidden] { display: none; }
.sf-stedit__del { justify-self: start; display: inline-flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); padding: 0 var(--sf-2); border: 0; border-radius: var(--sf-r-sm); background: none; color: var(--sf-stop-ink); font: var(--sf-w-bold) var(--sf-text-md)/1 var(--sf-font-ui); cursor: pointer; }
.sf-stedit__del svg { inline-size: var(--sf-icon-pick); block-size: var(--sf-icon-pick); }
.sf-stedit__del:hover { background: var(--sf-stop-soft); }
.sf-stedit__del:active { background: var(--sf-stop-soft); text-decoration: underline; }
.sf-stedit__del:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-stedit__del:disabled { color: var(--sf-ink-3); cursor: not-allowed; background: none; }
.sf-stedit__del.is-busy { cursor: progress; }
.sf-chip--status { min-block-size: var(--sf-tap); gap: var(--sf-2); padding: 0 var(--sf-3); font-size: var(--sf-text-md); border-radius: var(--sf-r-md); }
.sf-chip--status svg { flex: none; inline-size: var(--sf-icon-pick); block-size: var(--sf-icon-pick); }
.sf-chip--status[aria-checked="true"] { background: var(--sf-accent-soft); border-color: var(--sf-accent); color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.sf-chip--status[aria-checked="true"]::before { content: none; }
.sf-chip--status:hover { background: var(--sf-sunk); }
.sf-chip--status:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.sf-chip--status:disabled { color: var(--sf-ink-3); cursor: not-allowed; }
@media (min-width: 600px) {
  .sf-sttab { padding-block-start: var(--sf-4); }
  .sf-stcard { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-5); padding: var(--sf-4) var(--sf-5); align-items: center; }
  .sf-stcard__now { grid-column: auto; }
  .sf-stcard__stat { border-inline-start: 1px solid var(--sf-line); padding-inline-start: var(--sf-5); }
  .sf-stcard__num { font-size: var(--sf-text-kpi-tab); }
  .sf-sthist__cols, .sf-sthist__row {
    display: grid; grid-template-columns: var(--sf-6) minmax(0, 1fr) 190px 72px 150px var(--sf-tap-min); column-gap: var(--sf-3); row-gap: 0; align-items: center; padding: var(--sf-2) var(--sf-4);
  }
  .sf-sthist__cols { min-block-size: var(--sf-tap-min); background: var(--sf-sunk); color: var(--sf-ink-2); font: var(--sf-w-bold) var(--sf-text-xs)/1.2 var(--sf-font-ui); letter-spacing: .06em; text-transform: uppercase; border-block-end: 1px solid var(--sf-line); }
  .sf-sthist__cols > :nth-child(4) { text-align: end; }
  .sf-sthist__row { grid-template-areas: 'dot status dates length who more' 'dot sub dates length who more'; align-content: center; min-block-size: 68px; border-block-start: 1px solid var(--sf-line-soft); }
  .sf-sthist__row > * { align-self: center; }
  .sf-sthist__row .sf-sthist__status { align-self: end; }
  .sf-sthist__row .sf-sthist__sub { align-self: start; }
  .sf-sthist__dot { grid-area: dot; display: block; justify-self: center; inline-size: 14px; block-size: 14px; border-radius: 50%; background: currentColor; }
  .sf-sthist__len { text-align: end; font-family: var(--sf-font-num); font-size: var(--sf-text-lg); }
  .sf-sthist__len::before { content: none; }
  .sf-sthist__who { font-size: var(--sf-text-sm); color: var(--sf-ink-2); }
}
/* Our best here (js/shared/meetBest.js): one card on spikefan and spikefreak; a name that does not fit is cut on one line */
.sf-best { display: grid; gap: var(--sf-2); align-content: start; min-width: 0; }
.sf-best__label { margin: 0; padding-inline: var(--sf-1); }
.sf-best__rows { overflow: hidden; }
.sf-best__head { padding: var(--sf-2) var(--sf-4); background: var(--sf-sunk); border-top: 1px solid var(--sf-line-soft); font: var(--sf-w-bold) var(--sf-text-sm)/1.2 var(--sf-font-ui); color: var(--sf-ink-2); }
.sf-best__block:first-child > .sf-best__head { border-top: 0; }
.sf-best__row { display: flex; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-tap); padding-inline: var(--sf-4); border-top: 1px solid var(--sf-line-soft); }
.sf-best__head + .sf-best__row { border-top: 0; }
.sf-best__block:first-child > .sf-best__row:first-child { border-top: 0; }
.sf-best__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-bold) var(--sf-text-name)/1.25 var(--sf-font-ui); color: var(--sf-ink); }
.sf-best__time { flex: none; font: var(--sf-w-bold) var(--sf-text-xl)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-best__year { flex: none; inline-size: var(--sf-tap-min); text-align: end; font: var(--sf-w-reg) var(--sf-text-nav)/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
@media print {
  .sf-imp__rowbtn { break-inside: avoid; }
  .sf-imp__open { background: none; break-inside: avoid; }
  .sf-imp__table { border: 0; }
}