:root{
  --girls:#b8247f; --boys:#3a4fc9; --cmp-1:#9a6b00; --cmp-2:#5a6b7b; --series-1:var(--girls); --series-2:var(--boys);
  --bg:#edf4fa; --surface:#ffffff; --surface-2:#f3f8fc; --ink:#10233f; --muted:#56708c; --line:#d3e2ee;
  --brand:#4b9cd3; --brand-strong:#2f7fb8; --brand-ink:#ffffff; --navy:#13294b; --sky:#bfe3f7;
  --ok:#128457; --ok-bg:#dcf4e8; --fast:#6a4bd0; --fast-bg:#ebe5fc; --slow:#c2620a; --slow-bg:#fdecd8; --bad:#c73232; --bad-bg:#fde3e3;
  --e-fast:#e5484d; --e-tempo:#eea11c; --e-cv:#4b9cd3; --e-race:#7b5cd6; --e-easy:#2f9e6a; --e-jog:#8ea3b9;
  --shadow:0 1px 0 rgba(19,41,75,.05), 0 6px 18px -8px rgba(19,41,75,.18);
  --r-card:18px; --r-ctl:12px;
  /* 2.10 controls: selected = filled + ring + bold/check; control edges and primary buttons at 3:1 or better */
  --sel-bg:#13294b; --sel-ink:#ffffff; --sel-ring:#13294b; --ctl-line:#6e8499; --btn-primary:#1f6aa3; --btn-primary-ink:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --girls:#f47fcf; --boys:#8c9bff; --cmp-1:#e0b84c; --cmp-2:#a7b6c4; --series-1:var(--girls); --series-2:var(--boys);
    --girls:#f47fcf; --boys:#8c9bff; --cmp-1:#e0b84c; --cmp-2:#a7b6c4; --series-1:var(--girls); --series-2:var(--boys);
  --bg:#08131f; --surface:#0f2034; --surface-2:#152a43; --ink:#e7f1fa; --muted:#94abc4; --line:#223a58;
    --brand:#6db6e6; --brand-strong:#8cc7ee; --brand-ink:#061321; --navy:#050e19; --sky:#1d3d5c;
    --ok:#44d196; --ok-bg:rgba(68,209,150,.14); --fast:#ad97f7; --fast-bg:rgba(173,151,247,.16); --slow:#f2a553; --slow-bg:rgba(242,165,83,.15); --bad:#ff7171; --bad-bg:rgba(255,113,113,.16);
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 8px 22px -10px rgba(0,0,0,.6);
    --sel-bg:#8cc7ee; --sel-ink:#061321; --sel-ring:#e7f1fa; --ctl-line:#5b7796; --btn-primary:#6db6e6; --btn-primary-ink:#061321;
  }
}
:root[data-theme="dark"]{
  --bg:#08131f; --surface:#0f2034; --surface-2:#152a43; --ink:#e7f1fa; --muted:#94abc4; --line:#223a58;
  --brand:#6db6e6; --brand-strong:#8cc7ee; --brand-ink:#061321; --navy:#050e19; --sky:#1d3d5c;
  --ok:#44d196; --ok-bg:rgba(68,209,150,.14); --fast:#ad97f7; --fast-bg:rgba(173,151,247,.16); --slow:#f2a553; --slow-bg:rgba(242,165,83,.15); --bad:#ff7171; --bad-bg:rgba(255,113,113,.16);
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 8px 22px -10px rgba(0,0,0,.6);
  --sel-bg:#8cc7ee; --sel-ink:#061321; --sel-ring:#e7f1fa; --ctl-line:#5b7796; --btn-primary:#6db6e6; --btn-primary-ink:#061321;
}
/* bottom tab bar padding: labels sit just above the home indicator. --kb is the keyboard height (set by app.js). */
:root{--font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue','Segoe UI',Roboto,Arial,sans-serif; --font-clock:'Barlow Condensed','SF Pro Display',-apple-system,'Arial Narrow',sans-serif; --tab-pb:max(8px, calc(env(safe-area-inset-bottom,0px) - 14px)); --kb:0px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(64px + env(safe-area-inset-top,0px));touch-action:manipulation}
body{margin:0;overscroll-behavior-y:none;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.45;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.num{font-family:var(--font-ui);font-variant-numeric:tabular-nums}

/* ---------- header + bottom tabs ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;border-bottom:4px solid var(--brand);padding-top:env(safe-area-inset-top,0px)}
.top-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.brand h1{margin:0;font-family:var(--font-ui);font-weight:800;font-size:1.6875rem;letter-spacing:.2px;line-height:1;white-space:nowrap}
.brand h1 span{color:var(--brand)}
.icon-top{margin-left:auto;border:0;background:rgba(255,255,255,.1);color:#fff;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.icon-top svg{width:24px;height:24px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px var(--tab-pb);display:flex;justify-content:center;gap:4px;box-shadow:0 -8px 20px -14px rgba(19,41,75,.35)}
.tab{flex:1;max-width:190px;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;font-size:0.7812rem;font-weight:600;min-height:54px}
.tab svg{width:24px;height:24px}
.tab[aria-selected="true"]{color:var(--brand-strong);background:var(--surface-2)}
.banner{max-width:1400px;margin:10px auto 0;padding:0 12px}
.banner[hidden]{display:none}
.banner-in{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--brand);border-radius:14px;padding:8px 8px 8px 14px;font-size:0.9375rem}
.banner-in span{flex:1}
.banner-in .btn{min-height:40px}

main{max-width:1400px;margin:0 auto;padding:14px 16px calc(78px + var(--tab-pb))}
.view[hidden]{display:none}

/* ---------- toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.toolbar .spacer{flex:1}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-ctl);padding:0 14px;min-height:44px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--brand)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.go{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.warn{color:var(--bad)}
.count{color:var(--muted);font-size:0.875rem}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:0.9375rem}
.set-row input[type=number]{width:80px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.set-row .hint{display:block;color:var(--muted);font-size:0.8125rem}
.switch{appearance:none;width:46px;height:28px;border-radius:99px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.switch:checked{background:var(--brand)}
.switch:checked::after{transform:translateX(18px)}

.legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:0.875rem;color:var(--muted);margin:0 0 14px}
.legend .k{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:4px;display:inline-block}
.sw.ok{background:var(--ok)}.sw.fast{background:var(--fast)}.sw.slow{background:var(--slow)}.sw.bad{background:var(--bad)}
.legend .ghost-k{width:14px;height:14px;border-radius:50%;border:2.5px dashed var(--ink);display:inline-block}
.legend .run-k{width:14px;height:14px;border-radius:50%;background:var(--brand);display:inline-block}

/* ---------- watch grid ---------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.watch{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px 14px 12px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;min-width:0}
.watch::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line)}
.watch.st-running::before{background:var(--brand)}
.watch.ph-rest::before{background:var(--sky)}
.watch.st-paused::before{background:var(--slow)}
.watch.st-done::before{background:var(--ok)}
.w-head{display:flex;gap:8px;align-items:center}
.w-name{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:10px;padding:6px 8px;margin-left:-8px;font-weight:700;font-size:1.1875rem}
.w-name:hover{border-color:var(--line)}
.w-name:focus{border-color:var(--brand);background:var(--surface-2);outline:none}
.icon-btn{border:0;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:10px;font-size:1.25rem;line-height:1;flex:none}
.icon-btn:hover{background:var(--surface-2);color:var(--bad)}
.w-plan{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:1rem;min-height:42px}
.w-plan:disabled{opacity:.75}
.plan-note{font-size:0.8125rem;color:var(--muted);margin-top:-2px}

.clock{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.big{font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-weight:700;font-size:3.75rem;line-height:.95;letter-spacing:-.5px}
.ph-rest .big{color:var(--brand-strong)}
.sub{font-size:0.875rem;color:var(--muted);text-align:right;line-height:1.25}
.sub b{color:var(--ink);font-weight:600}

.reps{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.dot{width:22px;height:8px;border-radius:99px;background:var(--line)}
.dot.done{background:var(--ok)}
.dot.cur{background:var(--brand)}

/* the lane */
.lane{position:relative;height:40px;margin:2px 6px 14px}
.track{position:absolute;left:0;right:0;top:11px;height:18px;border-radius:9px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.band{position:absolute;top:0;bottom:0;opacity:.28}
.band.e-fast{background:var(--e-fast)}.band.e-tempo{background:var(--e-tempo)}.band.e-cv{background:var(--e-cv)}.band.e-race{background:var(--e-race)}.band.e-easy{background:var(--e-easy)}.band.e-jog{background:var(--e-jog)}
.fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--brand);opacity:.35}
.tick{position:absolute;top:8px;height:24px;width:2px;margin-left:-1px;background:var(--muted);opacity:.55;border-radius:2px}
.tick.end{opacity:.9;width:3px}
.tick span{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:0.7188rem;color:var(--muted);white-space:nowrap;font-family:var(--font-ui)}
.tick.r span{left:auto;right:0;transform:none}
.ghost,.runner{position:absolute;top:20px;border-radius:50%;transform:translate(-50%,-50%);left:0}
.ghost{width:24px;height:24px;border:2.5px dashed var(--ink);background:transparent;z-index:2}
.runner{width:20px;height:20px;background:var(--brand);border:2.5px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:3}
.runner.ok{background:var(--ok)}.runner.fast{background:var(--fast)}.runner.slow{background:var(--slow)}.runner.bad{background:var(--bad)}
@media (prefers-reduced-motion:no-preference){.ghost,.runner{transition:left .12s linear}}

.pace-row{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:5px 10px;font-size:0.875rem;background:var(--surface-2);border:1px solid var(--line);min-height:34px}
.pill .d{font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-weight:700;font-size:1.1875rem}
.pill.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.pill.fast{background:var(--fast-bg);border-color:transparent;color:var(--fast)}
.pill.slow{background:var(--slow-bg);border-color:transparent;color:var(--slow)}
.pill.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.pill .lbl{color:var(--ink);opacity:.8}
.next{font-size:0.9062rem;color:var(--muted);min-height:22px}
.next b{color:var(--ink);font-weight:600}
.next .over{color:var(--slow);font-weight:600}
.next .over.bad{color:var(--bad)}
.chip{display:inline-block;font-size:0.75rem;font-weight:700;padding:1px 8px;border-radius:99px;color:#fff;vertical-align:1px}
.chip.e-fast{background:var(--e-fast)}.chip.e-tempo{background:var(--e-tempo);color:#2b1d00}.chip.e-cv{background:var(--e-cv);color:#061321}.chip.e-race{background:var(--e-race)}.chip.e-easy{background:var(--e-easy)}.chip.e-jog{background:var(--e-jog);color:#0d1b2a}

.controls{display:flex;gap:8px;margin-top:2px}
.controls .btn{flex:1;min-height:52px;font-size:1.0625rem}
.controls .btn.big-btn{flex:2.2;font-size:1.375rem;font-family:var(--font-ui);font-weight:700;flex-direction:column;gap:0;line-height:1.05}
.controls .btn.big-btn small{font-family:var(--font-ui);font-weight:500;font-size:0.8125rem;opacity:.85}
.controls .btn.undo{flex:0 0 52px;padding:0;font-size:1.25rem}
.btn.split{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.split:active,.btn.go:active{transform:scale(.98)}

.log{border-top:1px dashed var(--line)}
.log summary{cursor:pointer;color:var(--muted);font-size:0.875rem;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.log summary::-webkit-details-marker{display:none}
.log summary::before{content:"";width:7px;height:7px;margin-left:3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.log[open] summary::before{transform:rotate(45deg)}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:0.875rem}
th{font-weight:600;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap;font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-size:1rem}
td.ok{color:var(--ok);font-weight:700}td.fast{color:var(--fast);font-weight:700}td.slow{color:var(--slow);font-weight:700}td.bad{color:var(--bad);font-weight:700}
tr.rep-row td{font-family:var(--font-ui);font-size:0.8125rem;color:var(--muted);background:var(--surface-2)}

.empty{border:2px dashed var(--line);border-radius:var(--r-card);padding:32px;text-align:center;color:var(--muted)}

/* compact mode */
body.compact .grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px}
body.compact .watch{padding:10px 10px 10px 13px;gap:6px}
body.compact .w-name{font-size:1rem}
body.compact .big{font-size:2.5rem}
body.compact .sub{font-size:0.7812rem}
body.compact .w-plan,body.compact .tick span{display:none}
body.compact .watch .log .c-x{display:none}
body.compact .watch .log th,body.compact .watch .log td{padding:4px 4px}
body.compact .lane{height:28px;margin-bottom:2px}
body.compact .track{top:7px;height:14px}
body.compact .tick{top:5px;height:18px}
body.compact .ghost,body.compact .runner{top:14px}
body.compact .ghost{width:18px;height:18px}
body.compact .runner{width:16px;height:16px}
body.compact .controls .btn{min-height:46px;font-size:0.9375rem;padding:0 6px}
body.compact .controls .btn.big-btn{font-size:1.125rem}
body.compact .controls .btn.big-btn small{display:none}
body.compact .controls .btn.undo{flex-basis:40px}
body.compact .next{font-size:0.8125rem}
body.compact .pill{font-size:0.7812rem;padding:3px 8px;min-height:28px}
body.compact .pill .d{font-size:1rem}
body.compact .dot{width:14px;height:6px}

/* ---------- workouts ---------- */
.wk-layout{display:grid;gap:18px;grid-template-columns:minmax(260px,380px) 1fr;align-items:start}
@media (max-width:900px){.wk-layout{grid-template-columns:1fr}}
.wk-list{display:grid;gap:10px}
.wk{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.wk.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}
.wk-name{font-weight:700;font-size:1.0625rem}
.wk-sum{color:var(--muted);font-size:0.875rem}
.wk-btns{display:flex;gap:6px;flex-wrap:wrap}
.wk-btns .btn{min-height:44px;font-size:0.875rem;padding:0 12px}
.minibar{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px}
.minibar i{display:block;height:100%}
.minibar .e-fast{background:var(--e-fast)}.minibar .e-tempo{background:var(--e-tempo)}.minibar .e-cv{background:var(--e-cv)}.minibar .e-race{background:var(--e-race)}.minibar .e-easy{background:var(--e-easy)}.minibar .e-jog{background:var(--e-jog)}
.minibar .rest{background:repeating-linear-gradient(45deg,var(--line) 0 4px,transparent 4px 8px)}

.editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;box-shadow:var(--shadow);display:grid;gap:14px}
.ed-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ed-head h2{margin:0;font-family:var(--font-ui);font-size:1.625rem}
.field{display:grid;gap:4px;font-size:0.875rem;color:var(--muted);min-width:0}
.field input,.field select{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:1rem;min-height:44px;width:100%}
.field input:focus,.field select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
.ed-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.segs{display:grid;gap:10px}
.seg{border:1px solid var(--line);border-radius:14px;padding:14px 12px 12px;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;background:var(--surface-2);position:relative}
.seg .field input,.seg .field select{background:var(--surface)}
.seg-num{position:absolute;top:-10px;left:12px;background:var(--navy);color:#fff;font-size:0.75rem;font-weight:700;border-radius:99px;padding:1px 9px}
.seg-calc{grid-column:1/-1;font-size:0.875rem;color:var(--muted)}
.seg-calc b{color:var(--ink);font-weight:600}
.seg-calc.err{color:var(--bad)}
.seg-btns{display:flex;gap:4px}
.seg-btns .btn{min-height:42px;width:42px;padding:0}
.seg-btns{justify-content:flex-end;grid-column:1/-1}
.seg{grid-auto-flow:row dense}
.seg .tf-field{grid-column:span 2}
@media (max-width:560px){.seg{grid-template-columns:1fr 1fr}.ed-row{grid-template-columns:minmax(90px,1fr) minmax(0,2fr)}}
/* time field: input + "m:ss | sec" toggle */
.tf{display:flex;gap:6px;align-items:stretch}
.tf input{flex:1;min-width:0}
.tf-unit{display:flex;flex:none;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.tf-unit button{border:0;background:transparent;color:var(--muted);min-height:44px;min-width:46px;padding:0 8px;font-size:0.9375rem;font-weight:600}
.tf-unit button+button{border-left:1px solid var(--line)}
.tf-unit button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
@media (max-width:560px){.top-inner{padding:8px 12px}main{padding-left:12px;padding-right:12px}.big{font-size:3.5rem}.toolbar .btn{padding:0 12px}}
.preview h3{margin:0 0 8px;font-size:1.0625rem}
.preview .minibar{height:14px;margin-bottom:10px}

/* results */
.res-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.res-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.res-card h3{margin:0 0 2px;font-size:1.125rem}
.res-card .meta{color:var(--muted);font-size:0.875rem;margin-bottom:8px}
textarea.export{width:100%;min-height:180px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.8125rem}

/* modal + toast */
.overlay{position:fixed;inset:0;background:rgba(5,14,25,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.overlay[hidden]{display:none}
.modal{background:var(--surface);border-radius:18px;padding:18px;width:min(460px,100%);box-shadow:0 20px 50px rgba(0,0,0,.35);display:grid;gap:12px;max-height:90vh;overflow:auto}
.modal h2{margin:0;font-size:1.3125rem}
.modal p{margin:0;color:var(--muted)}
.modal textarea{width:100%;min-height:200px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface-2);font-size:1rem}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(72px + var(--tab-pb));transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:12px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:0.9375rem;max-width:90vw;pointer-events:none} /* never blocks a tap */
.toast[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- members line on cards ---------- */
.members{display:block;width:100%;text-align:left;border:0;background:transparent;padding:0;margin:-6px 0 -2px;color:var(--muted);font-size:0.8438rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
button.members{min-height:44px;margin:-12px 0 -8px;cursor:pointer;font-weight:500}
button.members .edit,button.members.add{color:var(--brand-strong);font-weight:600}
body.compact .members{font-size:0.7812rem}

/* ---------- bench sheet ---------- */
.modal.wide{width:min(640px,100%)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-head .icon-btn{width:44px;height:44px;font-size:1.625rem}
.bench{display:grid;gap:10px;max-height:50vh;overflow:auto;-webkit-overflow-scrolling:touch}
.bench-gh{border:0;background:transparent;display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0;text-align:left;font-weight:700;font-size:1rem;color:var(--ink)}
.bench-gh .n{color:var(--muted);font-weight:500;font-size:0.875rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-a{min-height:48px;padding:6px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface-2);font-weight:600;font-size:1rem;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15;text-align:left;max-width:100%}
.chip-a[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.chip-a[aria-pressed="true"] .nm::before{content:"\2713\00a0"}
.chip-a.busy{opacity:.5;border-style:dashed;cursor:default}
.chip-a small{font-weight:500;font-size:0.7812rem}
.bench-foot{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.bench-foot .hint{margin:0;color:var(--muted);font-size:0.8125rem}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-row .btn{min-height:52px;white-space:normal;line-height:1.15;text-align:center}

/* ---------- team tab ---------- */
.team{display:grid;gap:14px;max-width:760px}
.team-grp{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 12px 8px}
.team-gh{border:0;background:transparent;display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0;text-align:left;color:var(--ink)}
.team-gh .g{font-weight:700;font-size:1.0625rem}
.team-gh .n{color:var(--muted);font-size:0.875rem}
.team-gh .ren{margin-left:auto;color:var(--brand-strong);font-size:0.875rem;font-weight:600}
.ath{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 44px 44px 44px;gap:6px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.ath input{min-height:44px;font-size:1rem;padding:8px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);width:100%}
.ath input:focus{border-color:var(--brand);outline:none}
.ath .icon-btn{width:44px;height:44px}

/* ---------- team sync ---------- */
.icon-top{position:relative}
.icon-top[data-sync="waiting"]::after,.icon-top[data-sync="error"]::after{content:"";position:absolute;top:7px;right:7px;width:10px;height:10px;border-radius:50%;border:2px solid var(--navy);background:var(--slow)}
.icon-top[data-sync="error"]::after{background:var(--bad)}
.hint.sync-line[data-code="ok"]{color:var(--ok)}
.hint.sync-line[data-code="waiting"]{color:var(--slow)}
.hint.sync-line[data-code="error"]{color:var(--bad)}
.pw{display:flex;gap:6px}
.pw input{flex:1;min-width:0}
.pw .btn{flex:none;min-width:64px}
.modal .hint{margin:0;color:var(--muted);font-size:0.8438rem}
.form-err{margin:0;color:var(--bad) !important;font-weight:600}
.merge-btns{display:grid;gap:8px}
.merge-btns .btn{min-height:50px;white-space:normal}
.team-hint{margin:0 0 4px;color:var(--muted);font-size:0.875rem}
.hist{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 12px;margin-bottom:10px}
.hist summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:600;list-style:none}
.hist summary::-webkit-details-marker{display:none}
.hist summary .n{color:var(--muted);font-weight:500;font-size:0.875rem}
.hist[open]{padding-bottom:12px}
.hist .res-grid{margin-bottom:10px}

/* ---------- phone-first additions ---------- */
.btn.armed{background:var(--bad);border-color:var(--bad);color:#fff}
.set-row{min-height:44px}
.sheet-sec{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.ver{color:var(--muted);font-size:0.8125rem;margin:0}
body.compact .controls{flex-wrap:wrap}
body.compact .controls .btn.big-btn{flex:1 1 100%}
body.compact .controls .btn.undo{flex:0 0 46px}
@media (max-width:600px){
  body.compact .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.compact .big{font-size:2.25rem}
  body.compact .pill .lbl{display:none}
  .overlay{align-items:flex-end;padding:0}
  .modal{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:90vh}
  .legend{font-size:0.8125rem;gap:4px 10px}
}
@media (display-mode: standalone){ body{-webkit-user-select:none;user-select:none} input,textarea,select{-webkit-user-select:text;user-select:text} }
[hidden]{display:none !important}
/* keyboard open (body.kb-open): no tab bar, and room under content and sheets for the keyboard */
body.kb-open .tabbar{display:none}
body.kb-open main{padding-bottom:calc(16px + var(--kb))}
body.kb-open .overlay{padding-bottom:var(--kb)}
body.kb-open .modal{max-height:calc(100% - 12px)}
body.kb-open .toast{bottom:calc(12px + var(--kb))}
body.compact .clock{flex-direction:column;align-items:flex-start;gap:2px}
body.compact .sub{text-align:left}
body.compact .sub br{display:none}
body.compact .pill.goal{display:none}
@media (max-width:600px){
  #v-watches > .toolbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  #v-watches > .toolbar .count,#v-watches > .toolbar .spacer{display:none}
  #v-watches > .toolbar .btn{padding:0 2px;font-size:0.875rem}
}
.bench-sheet{display:grid;gap:12px}
.admin-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--navy);color:#fff;font-size:0.75rem;font-weight:700;vertical-align:2px}

/* ---------- race mode ---------- */
body.race-live .tabbar{display:none} /* 2.7.1: only the live recording and Ready screens hide the tab bar */
/* The Update and Install banners sit above the page in the flow: appearing mid-race they would push every name button down. They wait until the race screen closes. */
body.race-open #updateBanner,body.race-open #installBanner{display:none}
body.race-live main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.race-banner{margin:0 0 12px;padding:0}
.race-head{display:flex;align-items:center;gap:10px}
.race-title{display:flex;flex-direction:column;min-width:0}
.race-title #raceName{font-weight:800;font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.race-state{color:var(--muted);font-size:0.8438rem}
.race-clock{font-family:var(--font-ui);font-weight:700;font-size:4.5rem;line-height:1;text-align:center;margin:10px 0 12px;letter-spacing:-.5px}
#raceBody{display:grid;gap:14px}
#raceBody>*,.cp-ed>*,.race-cp>*,.race-cp .cp-top>*,.race-cp .quick>*{min-width:0} /* grid items may shrink: no sideways scroll on a phone */
#raceBody h3{margin:4px 0 0;font-size:1.0625rem}
#raceBody h3 .n{color:var(--muted);font-weight:500;font-size:0.875rem}
.race-gun{min-height:96px;font-size:2.125rem;font-family:var(--font-ui);font-weight:800;width:100%}
.race-at{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.race-at .lbl{align-self:center;color:var(--muted);font-size:0.875rem;white-space:nowrap}
.race-at button{flex:1 0 auto;min-height:48px;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;font-weight:700;font-size:1rem;padding:0 12px}
.race-at button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
/* 2.4: nothing above the name grid may change height during a race (fixed status line and "Time now" row). */
.race-status{margin:0;height:1.25em;line-height:1.25em;font-size:0.875rem;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.race-status.two{height:2.5em;-webkit-line-clamp:2} /* team: room for "2 coaches at Finish · Coach Jen needs to update" */
.race-now{display:flex;align-items:center;gap:8px;height:52px}
.race-mark{flex:none;min-height:44px;font-size:0.9375rem;font-weight:700;padding:0 12px;background:var(--surface);border:1.5px solid var(--brand);color:var(--brand-strong);border-radius:12px}
.mark-strip{flex:1;min-width:0;height:52px;display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden}
.mark-strip button{flex:none;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px dashed var(--brand);background:var(--surface);font-family:var(--font-ui);font-size:1.1875rem;font-weight:700}
.mark-strip button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-style:solid}
.now-hint{font-size:0.8125rem;line-height:1.3;color:var(--muted)}
.race-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
@media (max-width:600px){.race-grid.cols-2{grid-template-columns:1fr 1fr}.race-grid.cols-3{grid-template-columns:1fr 1fr 1fr;gap:6px}}
/* Fixed height: a time or a coach name appearing on one button must never make its row (and every row below) taller. */
.race-grid button{height:66px;overflow:hidden;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.125rem;font-weight:700;padding:4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-align:center;min-width:0;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.race-grid button .nm{max-width:100%;white-space:normal;overflow-wrap:normal;line-height:1.05;display:block} /* full names wrap to two lines (2.11.1); fitNames() shrinks the text to fit */
.race-grid button .t{font-family:var(--font-ui);font-size:1.0625rem;font-weight:700}
.race-grid button .by{font-size:0.75rem;font-weight:500;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-grid button .t:empty,.race-grid button .by:empty{display:none}
.race-grid button.rec{background:var(--surface-2);border-style:dashed;color:var(--muted)}
.race-grid button.rec .t{color:var(--ink)}
.race-grid button.nope{animation:nope .35s}
@keyframes nope{20%{transform:translateX(-4px)}60%{transform:translateX(4px)}100%{transform:none}}
@media (max-width:600px){.race-grid.cols-3 button{height:60px;font-size:1rem;padding:3px 4px;border-radius:12px}.race-grid.cols-3 button .t{font-size:0.9375rem}.race-grid.cols-3 button .by{font-size:0.6875rem}}
.race-actions .btn[hidden]{display:none}
.race-actions:empty{display:none}
.ord-list{display:grid;gap:6px}
.ord-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,11em);gap:6px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 6px 4px 0}
.ord-row .drag{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:1.25rem;color:var(--muted);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.ord-row .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-row .nm small{display:block;font-weight:500;font-size:0.7812rem;color:var(--muted)}
.ord-row.dragging{box-shadow:0 6px 18px rgba(0,0,0,.25);border-color:var(--brand)}
.ord-row .tf input{min-height:44px}
.race-sec{color:var(--muted);font-size:0.875rem;margin:4px 0 -6px}
.race-actions{display:flex;gap:8px;flex-wrap:wrap}
.race-actions .btn{flex:1;min-height:48px}
.race-cp{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.race-cp .cp-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.race-cp .quick{display:flex;flex-wrap:wrap;gap:6px}
.race-cp .quick button{flex:1 0 auto;min-height:44px;padding:0 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:600;font-size:0.875rem}
.cp-ed{display:grid;gap:8px}
.cp-warn{margin:0;color:var(--slow);font-size:0.875rem}
.cp-warn:empty{display:none}
.course-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.course-row select{min-height:44px;font-size:1rem;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);width:100%}
.course-row .btn{min-height:44px}
#raceBody .field select{min-height:44px;font-size:1rem}
.goal-note{margin:-6px 0 0}
.goal-note:empty{display:none}
.race-cp input,.ord-row input,.pr-row input,.pr-add input{min-height:44px;font-size:1rem;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);width:100%}
.race-cp .btns{display:flex;gap:4px}
.race-cp .btns .btn{width:44px;padding:0}
.race-table td.rc{cursor:pointer;line-height:1.15;vertical-align:top}
.race-table td .sub2{display:block;font-family:var(--font-ui);font-size:0.75rem;color:var(--muted);white-space:nowrap}
.race-table td .gd.ok{color:var(--ok);font-weight:700}.race-table td .gd.fast{color:var(--fast);font-weight:700}.race-table td .gd.slow{color:var(--slow);font-weight:700}.race-table td .gd.bad{color:var(--bad);font-weight:700}
.race-table td .dup{color:var(--bad);font-weight:700}
.race-table th:first-child,.race-table td:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
.race-res summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.snack{min-height:52px;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:61;display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:14px;padding:6px 6px 6px 16px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:1rem;max-width:calc(100vw - 24px)}
.snack .btn{min-height:44px;background:transparent;color:var(--sky);border-color:rgba(255,255,255,.3)}
body:not(.race-live) .snack{bottom:calc(76px + var(--tab-pb))}
body.kb-open .snack{bottom:calc(12px + var(--kb))}
/* In Race Mode the Undo bar sits at the top, so it never covers name buttons while a pack comes through. */
body.race-live .snack{top:calc(8px + env(safe-area-inset-top,0px));bottom:auto}
/* The race clock stays in view while scrolling through names and results. */
#v-race .race-clock{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:5;background:var(--bg);margin:6px -16px 8px;padding:4px 0;font-size:4rem}
@media (max-width:560px){#v-race .race-clock{margin-left:-12px;margin-right:-12px}}
#v-race[data-status="setup"] .race-clock{position:static} /* nothing to watch before the gun; don't cover the setup fields */
/* ---------- 2.3: + New, card menu, help, tour, workout flow ---------- */
.new-row{display:flex;gap:8px;margin-bottom:10px}
.big-new{flex:1;min-height:56px;font-size:1.25rem}
.help-btn{width:56px;min-height:56px;font-size:1.375rem;padding:0}
.bulk-row{display:flex;gap:8px;margin-bottom:12px}
.bulk-row .btn{flex:1;min-height:48px}
.bulk-row[hidden],.bulk-row .btn[hidden]{display:none}
.w-name{flex:1;min-width:0;text-align:left;border:0;background:transparent;font-weight:700;font-size:1.1875rem;padding:6px 0;min-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.more-btn{width:44px;height:44px;font-size:1.5rem;color:var(--ink)}
.w-plan-txt{color:var(--muted);font-size:0.9062rem;margin-top:-4px}
.w-plan-txt:empty{display:none}
.big-status{flex:2.2;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--r-ctl);background:var(--surface-2);border:1px solid var(--line);font-weight:700;font-size:1.125rem;color:var(--ok)}
.choices{display:grid;gap:10px}
.choice{display:flex;align-items:center;gap:14px;text-align:left;min-height:84px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.choice .ic{font-size:1.875rem;flex:none}
.choice .tx{display:flex;flex-direction:column;gap:2px}
.choice b{font-size:1.1875rem}
.choice small{color:var(--muted);font-size:0.9375rem}
.empty-start{grid-column:1/-1;display:grid;gap:12px;max-width:560px}
.empty-start h2{margin:4px 0 0;font-size:1.375rem}
.menu-list{display:grid;gap:8px}
.menu-item{min-height:52px;text-align:left;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:1.0625rem;display:flex;flex-direction:column;justify-content:center}
.menu-item small{color:var(--muted);font-weight:500;font-size:0.8438rem}
.menu-item.warn{color:var(--bad)}
.menu-item[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}
.help-row{display:flex;align-items:center;gap:12px;font-size:0.9375rem}
.help-row .ghost-k{width:18px;height:18px;border-radius:50%;border:2.5px dashed var(--ink);flex:none}
.help-row .run-k{width:18px;height:18px;border-radius:50%;background:var(--brand);flex:none}
.help-row .sw{width:16px;height:16px;flex:none}
.tour-step{color:var(--muted);font-size:0.875rem;margin:0}
.flow{display:grid;gap:12px}
.flow-next{min-height:52px}
.seg2{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg2 button{min-height:48px;border:0;background:var(--surface);font-weight:600;font-size:0.9375rem;color:var(--ink)}
.seg2 button[aria-pressed="true"]{background:var(--navy);color:#fff}
.linkish{border:0;background:none;color:var(--brand-strong);font-weight:600;padding:0;min-height:44px;font-size:0.875rem}
body.compact .w-name{font-size:1rem}
body.compact .w-plan-txt{font-size:0.7812rem}
body.compact .big-status{font-size:0.9375rem;min-height:46px;flex:1 1 100%}

/* ---------- 2.5: results cards, split changes, PRs ---------- */
.race-cards{display:none;gap:10px}
@media (max-width:640px){.race-cards{display:grid}.race-wide{display:none}} /* phone portrait: a card per runner; landscape and bigger: the table */
.rcard{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:10px 12px;display:grid;gap:2px}
.rcard.hl{border-color:var(--ok);box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 35%,transparent) inset}
.rc-head{display:flex;align-items:baseline;gap:8px}
.rc-head b{font-size:1.125rem}
.rc-head small{color:var(--muted);font-size:0.8125rem}
.rc-head .ft{margin-left:auto;font-family:var(--font-ui);font-weight:700;font-size:1.375rem}
.rc-goal{color:var(--muted);font-size:0.8438rem}
.rc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 0;min-height:44px;font:inherit}
.rc-row:disabled{opacity:1}
.rc-row .cp{font-weight:700}
.rc-row .t{font-family:var(--font-ui);font-weight:700;font-size:1.1875rem;text-align:right}
.rc-row .l2,.rc-row .l3{grid-column:1/-1;font-size:0.8438rem;color:var(--muted)}
.chg{font-weight:700}
.chg.slower{color:var(--slow)}.chg.faster{color:var(--ok)}.chg.even{color:var(--muted)}
.badge{display:inline-block;margin:2px 6px 0 0;padding:1px 8px;border-radius:99px;font-size:0.7812rem;font-weight:800}
.badge.pr{background:var(--ok);color:#fff}
.badge.sb{background:var(--ok-bg);color:var(--ok)}
.race-table tr.hl td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
.race-table td:first-child .badge{display:block;width:max-content}
.race-table th .sub2{display:block;font-weight:500;font-size:0.7188rem;color:var(--muted)}
.pr-btn{min-height:44px;padding:0 6px;font-size:0.875rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:3px}
.pr-btn small{background:var(--brand);color:var(--brand-ink);border-radius:99px;padding:0 6px;font-size:0.7188rem}
.pr-row,.pr-add{display:grid;grid-template-columns:5.5em minmax(0,1fr) 44px;gap:8px;align-items:center;padding:4px 0}
.pr-add{grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.pr-row .pl,.pr-add .pl{font-weight:700}
.pr-row .tf input,.pr-add .tf input{min-height:44px}

/* ---------- 2.6: data safety, results editor ---------- */
.snack #snackBtn{min-height:44px;min-width:72px}
.storage-banner{position:fixed;left:12px;right:12px;bottom:calc(84px + var(--tab-pb));z-index:62;background:var(--bad);color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;font-size:0.9375rem;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.storage-banner[hidden]{display:none}
body.race-live .storage-banner{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.storage-line[data-level="warn"]{color:var(--slow)}.storage-line[data-level="bad"]{color:var(--bad);font-weight:700}
.ts{display:grid;gap:10px}
.ts h2{margin:0}
.ts-warn{margin:0;color:var(--bad);font-weight:700}
.ts-list{display:grid;gap:8px}
.ts-row{border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:grid;gap:6px;background:var(--surface)}
.ts-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ts-t b{font-family:var(--font-ui);font-size:1.5rem}
.ts-t .hint{flex-basis:100%;font-size:0.8125rem;color:var(--muted)}
.ts-edit{display:grid;gap:8px;border:1.5px solid var(--brand);border-radius:12px;padding:10px}
.ts-edit[hidden]{display:none}
.ts-edit h3{margin:0;font-size:1rem}
.ts-edit select{min-height:44px;font-size:1rem}
.ts-clash{margin:0;color:var(--slow)}
.ts-clash:empty{display:none}
.ts-prev{display:grid;gap:6px}
.pv{display:grid;font-size:0.875rem;line-height:1.35;background:var(--surface-2);border-radius:10px;padding:6px 10px}
.pv .was{color:var(--muted);text-decoration:line-through}
.pv .now{font-weight:700}
.ts-hist summary,.del-grp summary{min-height:44px;display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.del-grp summary .hint{font-weight:500;color:var(--muted);font-size:0.8125rem}
.del-sheet,.snap-sheet,.purge-sheet{display:grid;gap:8px}
.del-row .race-actions{flex-wrap:nowrap}
.phones{display:grid;gap:4px;margin:6px 0}
.phones-sum{margin:0;font-weight:700}
.phones-sum.ok{color:var(--ok)}.phones-sum.warn{color:var(--slow)}
.phone-row{display:flex;justify-content:space-between;gap:8px;font-size:0.875rem}
.phone-row .old{color:var(--bad);font-weight:700}
.rc-row,.race-table td.rc{cursor:pointer}

/* ---------- 2.7: meets, divisions, goal tags, Girls/Boys ---------- */
.g-btn{min-height:44px;padding:0;font-weight:800;font-size:0.9375rem}
.gtag{display:inline-block;margin-left:4px;padding:0 6px;border-radius:99px;background:var(--sky);color:var(--navy);font-size:0.7188rem;font-weight:800;vertical-align:1px}
.div-row{display:flex;flex-wrap:wrap;gap:6px}
.div-row button{flex:1 0 auto;min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:0.9375rem}
.div-row button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.meets-sheet,.meet-edit,.link-sheet{display:grid;gap:8px}
.meets-sheet h3{margin:8px 0 0;font-size:1rem}
.meet-row b{font-weight:800}
.meet-edit input[type=date]{min-height:44px;font-size:1rem}
.link-row{display:grid;gap:6px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}
.link-row select{min-height:44px;font-size:1rem;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink)}

/* ---------- 2.7.1: race-day UX ---------- */
.new-row[hidden]{display:none}
.empty-start .linkish{justify-self:start}
/* "Race running, tap to return": fixed above the tab bar on every tab; every tab gets room for it */
.live-bar{position:fixed;left:8px;right:8px;bottom:calc(72px + var(--tab-pb));z-index:24;min-height:48px;border:0;border-radius:14px;background:var(--navy);color:#fff;font-size:0.9375rem;font-weight:600;padding:8px 12px;box-shadow:0 6px 18px rgba(0,0,0,.3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-bar[hidden]{display:none}
.live-bar .num{font-family:var(--font-ui);font-size:1.1875rem;font-weight:700}
body.has-livebar main{padding-bottom:calc(78px + 60px + var(--tab-pb))}
body.has-livebar .toast{bottom:calc(72px + 60px + var(--tab-pb))}
body.has-livebar:not(.race-live) .snack{bottom:calc(76px + 60px + var(--tab-pb))}
body.kb-open .live-bar,body.kb-open .ready-bar{display:none}
/* "Ready for the gun": fixed at the bottom of setup, never scrolled away */
.ready-bar{position:fixed;left:0;right:0;bottom:calc(66px + var(--tab-pb));z-index:24;padding:8px 12px;background:var(--bg);border-top:1px solid var(--line)}
.ready-bar[hidden]{display:none}
.ready-bar .btn{width:100%;min-height:56px;font-size:1.25rem;font-weight:800}
body.race-setup main{padding-bottom:calc(78px + 80px + var(--tab-pb))}
.ready-screen{display:grid;gap:14px}
.ready-meta{margin:0;text-align:center;color:var(--muted);font-size:1rem}
.ready-gun{min-height:55vh;font-size:4.5rem}
#raceClose[hidden]{display:none}
/* faster editing (2.7.1) */
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,35%{background:color-mix(in srgb,var(--brand) 35%,transparent);box-shadow:0 0 0 2px var(--brand) inset}100%{background:transparent;box-shadow:none}}
.ts-warns{color:var(--bad);font-size:0.875rem;font-weight:600}
.ts-warns[hidden]{display:none}
.ts-next .btn{min-height:44px}
.et-sheet{display:grid;gap:10px}
.et-cps{position:sticky;top:-1px;background:var(--surface);z-index:2;padding:4px 0}
.et-list{display:grid;gap:6px}
.et-row{display:grid;grid-template-columns:minmax(0,1fr) 9em;gap:8px;align-items:center;font-weight:700}
.et-in{min-height:44px;font-size:1rem;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);width:100%;font-family:var(--font-ui);font-size:1.1875rem}
.et-in.changed{border-color:var(--slow);background:var(--slow-bg);box-shadow:0 0 0 2px var(--slow) inset}
.et-grid .et-in{width:5.6em;font-size:1.0625rem;padding:8px 6px}
.et-grid td:first-child{white-space:nowrap}
.et-grid td{padding:4px}
.et-dup{min-height:44px;font-size:0.875rem;color:var(--bad)}
.et-warn{border:1.5px solid var(--bad);border-radius:12px;padding:10px;display:grid;gap:6px;color:var(--ink)}
.et-warn[hidden]{display:none}
.et-w{font-size:0.875rem}
body.race-setup .toast{bottom:calc(72px + 76px + var(--tab-pb))}
body.race-setup:not(.race-live) .snack{bottom:calc(76px + 76px + var(--tab-pb))}

/* ---------- 2.8: results views, runner cards, charts, tags ---------- */
.rv-switch{grid-template-columns:repeat(3,1fr);margin:0 0 14px}
.rv-tog{margin:8px 0}
.rv-search{width:100%;min-height:44px;font-size:1rem;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);margin:0 0 6px}
.ex-row{margin:6px 0 10px}
#rvRunners h3,#rvTeam h3{margin:20px 0 8px;font-size:1rem}
#rvRunners h3 .n{font-weight:500;color:var(--muted);font-size:0.8125rem}
.rv-grp{margin:12px 0 4px;font-size:0.8125rem;font-weight:700;color:var(--muted)}
.rv-row,.rv-race{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;text-align:left}
.rv-row small,.rv-race small{color:var(--muted);font-size:0.8125rem}
.rv-back{margin:0 0 6px}
.rv-name{margin:6px 0 2px;font-size:1.375rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.trend{display:inline-block;font-size:0.75rem;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink);background:var(--surface-2);vertical-align:middle}
.trend.t-improving::before{content:"↓ "}.trend.t-slowing::before{content:"↑ "}.trend.t-steady::before{content:"→ "}
.tagi{color:var(--muted)}
.tagline{display:block;font-size:0.8125rem;color:var(--muted);font-weight:500}
.rc-tags{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px}
.rc-tags .btn{min-height:44px;padding:0 12px;font-size:0.875rem}
.race-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.rc-tag.linkish{font-size:0.8125rem}
.tag-sheet .chips{margin:10px 0}
.hist-season{margin:18px 0 6px;font-size:0.9375rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hist-meet h5{margin:10px 0 4px;font-size:0.875rem;color:var(--muted)}
figure.viz{margin:8px 0 6px;position:relative}
figure.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz .grid{stroke:var(--line);stroke-width:1}
.viz .axis{fill:var(--muted);font-size:0.6875rem}
.viz .axis.lbl{fill:var(--ink);font-weight:700}
.viz .ref{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 3}
.viz .ref.pr{stroke-dasharray:1 3}
.viz path.s1{fill:none;stroke:var(--series-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz path.s2{fill:none;stroke:var(--series-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz path.band{stroke:none;opacity:.14}
.viz path.band.s1{fill:var(--series-1)}.viz path.band.s2{fill:var(--series-2)}
.viz .dot{fill:var(--series-1);stroke:var(--surface);stroke-width:2}
.viz .dot.s2{fill:var(--series-2)}
.viz .dot.hollow{fill:var(--surface);stroke:var(--series-1);stroke-width:2}
.viz .hit{fill:transparent;cursor:pointer}
.viz .pt:focus{outline:none}.viz .pt.on .dot{stroke:var(--ink)}
.viz-tip{font-size:0.8125rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-top:4px}
.viz-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:0.8125rem;color:var(--ink);margin:0 0 4px}
.viz-legend .k{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.viz-legend .k.s1{background:var(--series-1)}.viz-legend .k.s2{background:var(--series-2)}
.viz-legend .k.band-k{height:10px;background:var(--muted);opacity:.3}

/* Auto-update (2.9.0): full-screen "Updating…" for a phone below the team's minimum version */
.force-upd{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.force-upd[hidden]{display:none}
.fu-in{max-width:420px;text-align:center;display:flex;flex-direction:column;gap:12px}
.fu-in h2{margin:0;font-size:1.5rem}
.fu-in .btn{min-height:48px}
body.must-update #updText{font-weight:600}
/* Official results and the history import (2.9) */
.off-badge{display:inline-block;font-size:0.6875rem;font-weight:700;letter-spacing:.02em;padding:1px 6px;border-radius:6px;background:var(--brand);color:#fff;vertical-align:1px}
.off-table td:first-child{width:28px;color:var(--muted)}
.imp-prev h3,.imp-sheet h3{margin:16px 0 6px;font-size:0.9375rem}
.imp-list{display:flex;flex-direction:column;gap:8px}
.imp-row,.imp-meet{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.imp-row .hint,.imp-meet .hint{display:block}
.imp-row select,.imp-meet select{min-height:44px;font-size:1rem;width:100%}
.imp-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pill2{font-size:0.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink)}
.pill2.check{background:#fde7c2;color:#5c3a00}
.pill2.new{background:#dbeafe;color:#13294b}
.career{margin-top:22px;border-top:2px solid var(--line);padding-top:6px}
.career-h{font-size:1.1875rem;margin:10px 0 4px}
.yoy-list{display:flex;flex-direction:column;gap:8px}
.yoy{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.yoy span{font-size:0.875rem;line-height:1.5}
.viz .dot.faint{fill:var(--muted);opacity:.45;stroke:none}
.menu-item.static{cursor:default}
.race-table.arc td,.race-table.arc th{text-align:center}
.race-table.arc td:first-child,.race-table.arc th:first-child{text-align:left}
.race-table td.wrap{white-space:normal;min-width:180px}
/* Varsity / JV sheet (2.9.1) */
.lvl-grp h3{margin:14px 0 6px;font-size:0.9375rem}
.lvl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.lvl-row .hint{display:block}
.lvl-seg{flex:0 0 auto;width:auto}
.lvl-seg button{min-height:44px;padding:0 12px}
.lvl-note .btn{margin-top:6px}
/* Team tab sections (2.10): Girls, Boys, then runners without a setting. Two lines per runner on a phone. */
.team-sec{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 12px 10px;margin-bottom:14px}
.team-sh{display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:48px}
.team-sh h3{margin:0;font-size:1.1875rem}
.team-sh .n{color:var(--muted);font-size:0.9375rem;font-weight:600}
.team-sec .team-gh{min-height:44px;border-top:1px solid var(--line)}
.team-sec .ath{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto 44px;grid-template-areas:"name name name del" "group pr res res" "sec sec sec sec";row-gap:6px}
.team-sec .ath [data-af=name]{grid-area:name}
.team-sec .ath [data-af=group]{grid-area:group}
.team-sec .ath .ath-pr{grid-area:pr;display:flex;flex-direction:column;justify-content:center;font-family:var(--num,inherit);font-weight:700;font-size:1rem;line-height:1.1;padding-left:4px}
.team-sec .ath .ath-pr small{font-weight:600;font-size:0.6875rem;color:var(--muted);letter-spacing:.02em}
.team-sec .ath .res-btn{grid-area:res;min-height:44px;padding:0 12px;font-size:0.9375rem;font-weight:700}
.team-sec .ath .icon-btn{grid-area:del}
.team-sec .ath .sec-pick{grid-area:sec}
.team-sec .ath .sec-pick button{min-height:44px}
.pr-chip{display:inline-block;margin:2px 6px 2px 0;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.res-form{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}
.res-dist{flex-wrap:wrap}

/* ---------- selected, pressed and disabled states (2.10): one style everywhere ----------
   Selected = filled background + a ring + a bold label, and a check mark on choices. Never color alone.
   Pressed = instant darken (and a small press on buttons that aren't race name buttons). Disabled = faded + dashed. */
.btn,.seg2,.chip-a,.race-at button,.div-row button,.menu-item{border-color:var(--ctl-line)}
.seg2 button+button{border-left:1px solid var(--ctl-line)}
.btn.primary,.btn.split{background:var(--btn-primary);border-color:var(--btn-primary);color:var(--btn-primary-ink)}
.tab[aria-selected="true"],.seg2 button[aria-pressed="true"],.chip-a[aria-pressed="true"],.race-at button[aria-pressed="true"],.div-row button[aria-pressed="true"],
.tf-unit button[aria-pressed="true"],.mark-strip button[aria-pressed="true"],.menu-item[aria-pressed="true"],.lvl-seg button[aria-pressed="true"]{
  background:var(--sel-bg);color:var(--sel-ink);border-color:var(--sel-ring);box-shadow:inset 0 0 0 2px var(--sel-ring);font-weight:800}
.seg2 button[aria-pressed="true"]::before,.race-at button[aria-pressed="true"]::before,.div-row button[aria-pressed="true"]::before,.tf-unit button[aria-pressed="true"]::before,.menu-item[aria-pressed="true"]>:first-child::before,.lvl-seg button[aria-pressed="true"]::before{content:"\2713\00a0"}
.tab[aria-selected="true"]{box-shadow:inset 0 3px 0 var(--sel-ring)}
.tab[aria-selected="true"] svg{stroke-width:2.6}
.switch{border:1.5px solid var(--ctl-line)}
.switch:checked{background:var(--sel-bg);border-color:var(--sel-ring)}
button,.btn,.tab,.chip-a,.menu-item{transition:none}
button:active:not(:disabled):not([aria-disabled="true"]){filter:brightness(.86)}
.btn:active:not(:disabled),.seg2 button:active,.chip-a:active,.menu-item:active,.tab:active,.div-row button:active,.race-at button:active,.icon-btn:active{transform:scale(.97)}
button:disabled,.btn[aria-disabled="true"]{opacity:.5;border-style:dashed;cursor:not-allowed;filter:saturate(.2)}
button:disabled::before{content:none}
:focus-visible{outline:3px solid var(--sel-ring);outline-offset:2px}
/* Data charts (2.10) */
:root{--series-3:#13806b}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--series-3:#3cc7a6} }
:root[data-theme="dark"]{--series-3:#3cc7a6}
.viz path.s3{fill:none;stroke:var(--series-3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz .dot.s3{fill:var(--series-3)}
.viz-legend .k.s3,.cmp-chips .k.s3{background:var(--series-3)}
.cmp-chips .k{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px}
.cmp-chips .k.s2{background:var(--series-2)}
.cmp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.viz path.thin{stroke-width:1.5;opacity:.8}
.viz .hitln{stroke:transparent;stroke-width:14;fill:none;cursor:pointer}
.viz .slope{stroke-width:1.5}
.viz .slope.s1{stroke:var(--series-1)}.viz .slope.s2{stroke:var(--series-2)}
.viz .dot.s2.hollow{fill:var(--surface);stroke:var(--series-2)}
.viz rect.dot{fill:var(--series-1);stroke:var(--surface);stroke-width:1.5}
.viz rect.dot.hollow{fill:var(--surface);stroke:var(--series-1);stroke-width:2}
.viz .bar{fill:var(--series-1);opacity:.85}
.viz .bar.good{fill:var(--ok)}.viz .bar.off{fill:var(--slow)}
.viz .spread5{stroke:var(--ink);stroke-width:2}
.viz .spread7{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 3}
.viz [data-goto]{cursor:pointer}
.viz [data-goto]:focus-visible .dot{stroke:var(--ink);stroke-width:3}
.mt-charts{margin-top:8px}
.mt-charts>summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.mt-charts h5{margin:12px 0 4px;font-size:0.875rem}
.board{display:flex;flex-direction:column;gap:6px}
.board-row{display:grid;grid-template-columns:26px minmax(0,1fr) 70px 58px;align-items:center;gap:6px;min-height:52px;padding:6px 8px;border:1px solid var(--ctl-line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left}
.board-row .rk{font-weight:800;color:var(--muted)}
.board-row .nm small{display:block;color:var(--muted);font-size:0.7812rem}
.board-row .bar-w{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.board-row .bar-w i{display:block;height:100%}
.board-row .bar-w i.good{background:var(--ok)}.board-row .bar-w i.off{background:var(--slow)}
.board-row .pc{font-weight:800;text-align:right}
/* Suggested training paces (2.11) */
.pace-table{display:flex;flex-direction:column;gap:6px}
.pt-row{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface)}
.pt-row>b{display:block;margin-bottom:4px}
.pt-row>span{display:flex;flex-wrap:wrap;gap:4px 12px;font-variant-numeric:tabular-nums;font-weight:700}
.pt-c small{display:block;font-weight:600;font-size:0.6875rem;color:var(--muted)}
.pace-note{font-size:0.8125rem;color:var(--muted);margin:2px 0 4px}
.pace-warn{color:var(--slow)}
.adj-row{display:flex;align-items:center;gap:10px}
.adj-row .adj-v{flex:1;text-align:center}
/* One race per division, data health (2.11.1) */
.hist-meet{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:8px 0;padding:0 10px}
.hist-meet>summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-weight:800;font-size:1rem}
.hist-meet>summary .n{font-weight:600;color:var(--muted);font-size:0.8125rem}
.hist-meet[open]{padding-bottom:10px}
.div-race .dr-name{font-weight:700}
.sp-badge{display:inline-block;font-size:0.6875rem;font-weight:700;padding:1px 6px;border-radius:6px;border:1.5px solid var(--ctl-line);color:var(--ink);vertical-align:1px;margin-left:4px}
.off-badge.sm{font-size:0.5938rem;padding:0 4px}
.hand-note{color:var(--muted);font-style:italic}
.dr-note{margin:6px 0}
.mt-charts{border-top:1px solid var(--line);margin-top:10px;padding-top:4px}
.health-row{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}
.health-row .hfix{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.health-row select{min-height:44px;font-size:1rem;max-width:100%}
.hb:empty{display:none}
.hb{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--slow);color:#fff;font-size:0.75rem;font-weight:800;margin-left:4px}
.tab{position:relative}
.tab[data-badge]:not([data-badge=""])::after{content:attr(data-badge);position:absolute;top:4px;right:calc(50% - 26px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--slow);color:#fff;font-size:0.6875rem;font-weight:800;line-height:18px;text-align:center}
/* Name buttons (2.11.1): the name size comes from fitNames() (--fs). A recorded button also shows the time and maybe the
   coach, so its three lines scale down a little to fit the fixed height. */
.race-grid button .nm{font-size:var(--fs,18px)}
.race-grid button.rec .nm{font-size:calc(var(--fs,18px) * .74)}
.race-grid button.rec .t{font-size:0.9688rem;line-height:1.05}
.race-grid button.rec .by{font-size:0.6875rem;line-height:1.05}

/* Chart kit (2.12): keys drawn from the same series as the chart, shapes as well as colours, leader lines, the
   pack chart's gap lines in the team's colour, and the Team view table as two rows per meet (fits an upright phone). */
.viz-legend span{display:inline-flex;align-items:center}
figure.viz .viz-legend svg.sw,.cmp-chips svg.sw{width:24px;height:14px;margin-right:6px;flex:none;overflow:visible}
.cmp-chips svg.sw{vertical-align:middle}
.viz .kl{stroke-width:2.5;fill:none;stroke-linecap:round}
.viz .kl.s1{stroke:var(--series-1)}.viz .kl.s2{stroke:var(--series-2)}.viz .kl.s3{stroke:var(--series-3)}
.viz .kl.dash{stroke-dasharray:4 3;stroke-linecap:butt}
.viz .kl.ref{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 3;stroke-linecap:butt}.viz .kl.ref.pr{stroke-dasharray:1 3}
.viz .kb{stroke:none;opacity:.22}.viz .kb.s1{fill:var(--series-1)}.viz .kb.s2{fill:var(--series-2)}
.viz path.band{opacity:.18}
.viz .lead{stroke:var(--muted);stroke-width:1;opacity:.75}
.viz .axis.dir{font-weight:700}
.viz .axis.gap{fill:var(--ink)}
.viz .dot.su{fill:var(--muted)}.viz .dot.nolv{opacity:.55}
.viz .dot.s3.hollow{fill:var(--surface);stroke:var(--series-3)}.viz .dot.su.hollow{fill:var(--surface);stroke:var(--muted)}
.viz .spread5.s1{stroke:var(--series-1)}.viz .spread5.s2{stroke:var(--series-2)}
.viz .spread7.s1{stroke:var(--series-1)}.viz .spread7.s2{stroke:var(--series-2)}
.viz .spread5,.viz .spread7{stroke-width:2}
.tv-meets th[scope=rowgroup]{text-align:left;vertical-align:top;font-weight:700;white-space:normal;min-width:7.5em;max-width:10em}
.tv-meets th[scope=rowgroup] .sub2{display:block;font-weight:500;font-size:0.75rem;color:var(--muted)}
.tv-meets tbody.tv-meet tr:first-child>*{border-top:2px solid var(--line)}
.tv-meets td.tv-g{color:var(--muted);font-size:0.875rem}
.tv-meets td.tv-short,.tv-meets td.tv-none{color:var(--muted);font-size:0.875rem;white-space:normal}

/* Team tab (2.12): one line per runner (name, grade, season average); tap to edit. Sections collapse. */
.team-tools{margin:0 0 8px}
.team-tools .sort-sw{margin-top:2px}
details.team-sec>summary{list-style:none;cursor:pointer}
details.team-sec>summary::-webkit-details-marker{display:none}
details.team-sec>summary h3::before{content:'▾';display:inline-block;width:1.1em;color:var(--muted);transition:transform .15s}
details.team-sec:not([open])>summary h3::before{transform:rotate(-90deg)}
.team-sec .ath{display:block;padding:0;border-top:1px solid var(--line)}
.team-sec .ath-head{display:grid;grid-template-columns:minmax(0,1fr) 3.4em 6.4em;gap:8px;padding:2px 4px 4px;font-size:0.75rem;color:var(--muted);font-weight:600}
.team-sec .ath-head span:nth-child(n+2){text-align:right}
.ath-row{display:grid;grid-template-columns:minmax(0,1fr) 3.4em 6.4em;gap:8px;align-items:center;width:100%;min-height:48px;padding:6px 4px;border:0;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer;border-radius:8px}
.ath-row .ath-nm{font-weight:600;font-size:1.0625rem;overflow-wrap:anywhere}
.ath-row .ath-gr{color:var(--muted);font-size:0.875rem;text-align:right}
.ath-row .ath-avg{font-weight:700;font-size:1.0625rem;text-align:right}
.ath-row .ath-avg small{font-weight:600;font-size:0.6875rem;color:var(--muted)}
.team-sec .ath .sec-pick{display:flex;margin:0 4px 8px}
.sort-sw button{min-height:44px}
.rv-row .rv-avg{font-weight:700}
/* three-way switches (2.12: sort, stopwatch mode) and the group maker */
.seg2.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg2.seg3 button{padding:0 4px}
.grp-make{margin:10px 0}
.grp-card{border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin:8px 0;background:var(--surface)}
.grp-card h4{margin:6px 0;font-size:1rem}
.grp-card h4 .n{color:var(--muted);font-weight:600;font-size:0.875rem;margin-left:6px}
.grp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;border-top:1px solid var(--line)}
.grp-row .nm{display:flex;flex-direction:column;min-width:0;font-weight:600;overflow-wrap:anywhere}
.grp-row .nm small{font-weight:500;color:var(--muted);font-size:0.8125rem}
.grp-row select{min-height:44px;font-size:1rem;flex:none;max-width:9.5em;border:1px solid var(--ctl-line,var(--line));border-radius:10px;background:var(--surface-2);color:var(--ink);padding:0 8px}

/* Stopwatch tiles (2.13): compact. Time large, one small line for rep/target, the last split with a shape, Lap + Stop. */
.watch{gap:4px;padding:8px 12px 10px}
.watch .w-name{font-size:1.125rem;padding:4px 8px}
.watch .w-head .more-btn{width:44px;height:44px}
.watch .clock{align-items:baseline}
.watch .big{font-size:2.875rem}
.watch .sub{font-size:0.875rem;color:var(--muted);text-align:right}
.watch .next{min-height:0;font-size:0.875rem}
.watch .next:empty{display:none}
.watch .pace-row .pill{min-height:30px;padding:3px 10px}
.watch .pill .shp{font-size:0.8125rem}
.watch .pill .w{font-size:0.8125rem;font-weight:600}
.watch .controls .btn{min-height:48px}
.watch .controls .btn.big-btn{font-size:1.25rem}
.watch .controls .stop-btn{flex:1;font-weight:700}
.watch .controls .stop-btn.armed{background:var(--bad);color:#fff;border-color:var(--bad)}
.watch .big-status{flex:2;display:flex;align-items:center;font-weight:600}
.watch .t-undo{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:0.875rem;color:var(--muted)}
.watch .t-undo .btn{min-height:44px}
.watch.gone{flex-direction:row;align-items:center;justify-content:space-between;border-style:dashed;box-shadow:none}
.watch.gone::before{display:none}
.watch.gone .btn{min-height:44px}
.gone-txt{margin:0;color:var(--muted)}
.watch .members{font-size:0.8125rem}
/* The runner picker bar (2.13) */
.pick-bar{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.pick-bar .btn{min-height:44px;flex:1 1 auto;padding:0 12px}
.pick-bar .pk-groups{flex-basis:100%}
/* steppers (2.13) */
.stepper{display:flex;align-items:stretch;gap:6px}
.stepper .st-btn{flex:0 0 48px;min-height:48px;font-size:1.5rem;font-weight:700;padding:0}
.stepper .st-field{flex:1;min-width:0}
.stepper .st-field input{text-align:center}
/* Team ladder (2.13): stacked ranked lists on one time scale */
.ladders{display:grid;gap:6px}
.ld-h{margin:10px 0 2px;font-size:1rem}.ld-h .n{color:var(--muted);font-weight:600}
.ld-row{display:grid;grid-template-columns:1.4em minmax(0,1fr) 40% 3.2em;gap:8px;align-items:center}
.ld-axis{display:grid;grid-template-columns:minmax(0,1fr) 40% 3.2em;gap:8px;align-items:center;font-size:0.6875rem;color:var(--muted);height:18px}
.ld-ticks{position:relative;height:14px}
.ld-ticks i{position:absolute;transform:translateX(-50%);font-style:normal;white-space:nowrap}
.ld-faster{font-weight:700;text-align:right;white-space:nowrap}
ol.ladder{list-style:none;margin:0;padding:0;display:grid}
ol.ladder li{border-top:1px solid var(--line)}
.ld-row{width:100%;min-height:44px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;padding:4px 2px;cursor:pointer;border-radius:8px}
.ld-rk{color:var(--muted);font-size:0.8125rem;text-align:right}
.ld-nm{font-weight:600;overflow-wrap:anywhere;line-height:1.2}
.ld-tr{position:relative;height:20px}
.ld-g{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.ld-dot{position:absolute;top:50%;width:11px;height:11px;transform:translate(-50%,-50%);background:var(--series-1);border-radius:50%;border:2px solid var(--surface)}
.ld-dot.s2{background:var(--series-2);border-radius:2px}
.ld-t{text-align:right;font-weight:700}

/* Today's workout (2.14) */
.today{display:grid;gap:10px;margin-bottom:18px}
.today h2{margin:0;font-size:1.5rem}
.today-sched{margin:0}
.goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.goal-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:8px 12px;border:1px solid var(--ctl-line,var(--line));border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.goal-btn b{font-size:1rem}.goal-btn small{font-size:0.8125rem;color:var(--muted)}
.goal-btn[aria-pressed=true]{background:var(--sel-bg,var(--brand));border-color:var(--sel-ring,var(--brand));color:#fff}
.goal-btn[aria-pressed=true] small{color:inherit;opacity:.9}
.today-why{margin:0;font-weight:600}
.sugg-list{display:grid;gap:10px}
.sugg{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.sugg h3{margin:0;font-size:1.125rem}.sugg p{margin:0}
.sugg-paces{font-size:0.875rem;color:var(--muted)}
.sugg-why{font-weight:600}
.sugg.warn .sugg-why{color:var(--slow)}
.sugg .btn{justify-self:start;min-height:44px;margin-top:4px}
.today-own{margin:0;font-size:0.9375rem}
.tg-h{margin:12px 0 4px}
.tg-list{display:grid}
.tg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;border-top:1px solid var(--line);padding:4px 0}
.tg-row span{display:flex;flex-direction:column;min-width:0}
.tg-row small{color:var(--muted);font-size:0.8125rem}
.tg-row.warn small{color:var(--slow)}
.tg-fix{flex-direction:row!important;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tg-fix .btn{min-height:44px;padding:0 10px}

/* ===================== 3.0: Apple Human Interface Guidelines layer =====================
   System font (rem sizes follow the phone's text size), grouped backgrounds, a nav bar with a large title, the
   standard tab bar (tint on icon and label), iOS buttons, segmented controls, switches, grouped inset lists, sheets
   with a grab handle, action sheets. Barlow Condensed only for clock digits. */
:root{
  --bg:#f2f2f7; --surface:#ffffff; --surface-2:#f2f2f7; --ink:#111114; --muted:#636366; --line:#c6c6c8;
  --tint:#1f6aa3; --fill:#e5e5ea; --seg-track:#e3e3e8; --seg-thumb:#ffffff; --seg-ring:#767680; --ctl-line:#767680;
  --btn-primary:#1f6aa3; --btn-primary-ink:#ffffff; --sel-bg:#ffffff; --sel-ink:#111114; --sel-ring:#767680;
  --switch-on:#248a3d; --switch-off:#e9e9ea; --nav-bg:rgba(242,242,247,.92); --tab-bg:rgba(249,249,249,.94); --tab-off:#6e6e73;
  --brand:#1f6aa3; --brand-strong:#1f6aa3; --brand-ink:#ffffff; --r-card:12px; --r-ctl:10px;
  --shadow:0 1px 2px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --ink:#ffffff; --muted:#a1a1a6; --line:#38383a;
    --tint:#6cb4e8; --fill:#2c2c2e; --seg-track:#2c2c2e; --seg-thumb:#636366; --seg-ring:#a1a1a6; --ctl-line:#8e8e93;
    --btn-primary:#1f6aa3; --btn-primary-ink:#ffffff; --sel-bg:#636366; --sel-ink:#ffffff; --sel-ring:#a1a1a6;
    --switch-on:#30d158; --switch-off:#39393d; --nav-bg:rgba(0,0,0,.88); --tab-bg:rgba(22,22,24,.94); --tab-off:#98989d;
    --brand:#6cb4e8; --brand-strong:#6cb4e8; --brand-ink:#000000; --shadow:none; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --ink:#ffffff; --muted:#a1a1a6; --line:#38383a;
  --tint:#6cb4e8; --fill:#2c2c2e; --seg-track:#2c2c2e; --seg-thumb:#636366; --seg-ring:#a1a1a6; --ctl-line:#8e8e93;
  --btn-primary:#1f6aa3; --btn-primary-ink:#ffffff; --sel-bg:#636366; --sel-ink:#ffffff; --sel-ring:#a1a1a6;
  --switch-on:#30d158; --switch-off:#39393d; --nav-bg:rgba(0,0,0,.88); --tab-bg:rgba(22,22,24,.94); --tab-off:#98989d;
  --brand:#6cb4e8; --brand-strong:#6cb4e8; --brand-ink:#000000; --shadow:none; color-scheme:dark;
}
html{font:-apple-system-body;font-family:var(--font-ui)} /* the phone's text size (Dynamic Type) sets 1rem */
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);letter-spacing:-.01em}
.big,.race-clock,#liveClock,.ready-screen .big,.ready-clock{font-family:var(--font-clock);font-variant-numeric:tabular-nums}
/* nav bar: the actions row stays at the top; the large title scrolls away under it */
.top{position:sticky;top:0;z-index:20;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);border-bottom:0;padding-top:env(safe-area-inset-top,0px);box-shadow:0 .5px 0 var(--line)}
.top-inner{display:flex;align-items:center;gap:4px;padding:2px 8px 0;min-height:44px;max-width:1400px;margin:0 auto}
.nav-left{flex:1;min-width:0;display:flex;align-items:center}
.nav-actions{display:flex;align-items:center;gap:2px}
.nav-for{display:flex;align-items:center;gap:2px}.nav-for[hidden]{display:none}
.nav-btn{position:relative;width:44px;height:44px;border:0;background:transparent;color:var(--tint);display:grid;place-items:center;border-radius:10px;padding:0;cursor:pointer}
.nav-btn svg{width:24px;height:24px}
.nav-btn[hidden]{display:none}
.nav-back{border:0;background:transparent;color:var(--tint);font:inherit;font-size:1.0625rem;min-height:44px;padding:0 8px;cursor:pointer}
.nav-title{margin:0 auto;max-width:1400px;padding:2px 16px 4px;font-size:2.125rem;line-height:1.2;font-weight:700;letter-spacing:.01em;background:var(--bg)}
.top{box-shadow:none}
body.title-gone .top{box-shadow:0 .5px 0 var(--line)}
.top-inner{position:relative}
.nav-small{position:absolute;left:50%;transform:translateX(-50%);font-weight:600;font-size:1.0625rem;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis}
body.title-gone .nav-small{opacity:1}
body.race-open .nav-title{display:none}
.nav-season select{min-height:36px;border:0;background:var(--fill);color:var(--tint);font:inherit;font-size:1rem;font-weight:600;border-radius:8px;padding:0 10px}
.gear-badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b30;color:#fff;font-size:.75rem;font-weight:700;line-height:18px;text-align:center}
.gear-badge[hidden]{display:none}
#openSettings[data-sync="waiting"]::after,#openSettings[data-sync="error"]::after{content:"";position:absolute;bottom:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--slow)}
#openSettings[data-sync="error"]::after{background:var(--bad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main{padding-top:8px}
/* tab bar: the standard iOS bar; tint on the selected icon and label, nothing else */
.tabbar{background:var(--tab-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line);padding:3px 4px var(--tab-pb);box-shadow:none}
.tab{color:var(--tab-off);background:transparent!important;box-shadow:none!important;border-radius:0;font-size:.6875rem;font-weight:500;gap:1px;padding:4px 2px;min-height:49px;letter-spacing:0}
.tab svg{width:26px;height:26px}
.tab[aria-selected="true"]{color:var(--tint);font-weight:600}
.tab[aria-selected="true"] svg{stroke-width:2.2}
.tab[data-badge]:not([data-badge=""])::after{top:2px;right:auto;left:calc(50% + 6px);background:#ff3b30}
/* buttons */
.btn{border:0;background:var(--fill);color:var(--tint);border-radius:var(--r-ctl);font-weight:600;font-family:var(--font-ui);box-shadow:none}
.btn.primary,.btn.split,.btn.go{background:var(--btn-primary);color:var(--btn-primary-ink);border:0}
.btn.go{background:var(--switch-on);color:#fff}
:root .btn.go{background:#1f7a37}
.btn.warn{color:var(--bad);background:var(--fill)}
.btn.plain{background:transparent;color:var(--tint);padding:0 8px}
.btn:disabled{opacity:.45;border:0}
.icon-btn{color:var(--tint)}
/* segmented controls: a grey track, the selected segment raised (white in light, grey in dark), bold; no check mark */
.seg2,.div-row,.tf-unit,.race-at,.lvl-seg{background:var(--seg-track);border:0!important;border-radius:9px;padding:2px;gap:2px;overflow:visible}
.seg2 button,.div-row button,.tf-unit button,.race-at button,.lvl-seg button{background:transparent;border:0!important;border-radius:7px;color:var(--ink);font-weight:500;box-shadow:none;min-height:40px}
.seg2 button+button{border-left:0!important}
.seg2 button[aria-pressed="true"],.div-row button[aria-pressed="true"],.tf-unit button[aria-pressed="true"],.race-at button[aria-pressed="true"],.lvl-seg button[aria-pressed="true"]{
  background:var(--seg-thumb);color:var(--sel-ink);font-weight:700;box-shadow:0 0 0 1px var(--seg-ring),0 3px 8px rgba(0,0,0,.12)}
.seg2 button[aria-pressed="true"]::before,.div-row button[aria-pressed="true"]::before,.tf-unit button[aria-pressed="true"]::before,.race-at button[aria-pressed="true"]::before,.lvl-seg button[aria-pressed="true"]::before{content:none}
/* choices in lists keep a check mark (iOS: a checkmark accessory) */
.chip-a{border:1px solid var(--ctl-line);background:var(--surface);color:var(--ink);border-radius:18px}
.chip-a[aria-pressed="true"]{background:var(--tint);color:#fff;border-color:var(--tint);box-shadow:none;font-weight:700}
:root .chip-a[aria-pressed="true"]{background:var(--btn-primary)}
.menu-item{background:var(--surface);border:0;border-radius:0;border-bottom:.5px solid var(--line)}
.menu-item[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:none}
.menu-item[aria-pressed="true"]>:first-child::before{content:none}
.goal-btn[aria-pressed="true"]{background:var(--btn-primary);border-color:var(--btn-primary);color:#fff}
/* switches */
.switch{width:51px;height:31px;border:1.5px solid var(--ctl-line);background:var(--switch-off)}
.switch::after{top:1.5px;left:1.5px;width:25px;height:25px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.switch:checked{background:var(--switch-on);border-color:var(--switch-on)}
.switch:checked::after{transform:translateX(20px)}
/* grouped inset lists (Settings and lists) */
.ios-sec{margin:22px 16px 6px;font-size:.8125rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.ios-group{background:var(--surface);border-radius:10px;overflow:hidden}
.ios-group.ios-pad{padding:6px 16px}
.ios-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 16px;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;position:relative}
.ios-row+.ios-row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--line)}
.ios-l{display:flex;flex-direction:column;min-width:0;flex:1}
.ios-l .hint{font-size:.8125rem}
.ios-nav{cursor:pointer}
.ios-nav .chev{color:var(--muted);font-size:1.25rem;line-height:1}
.ios-nav.destructive{color:var(--bad);justify-content:center}
.ios-nav.destructive .ios-l{align-items:center}
.ios-field input,.ios-field select{max-width:55%;border:0;background:transparent;color:var(--muted);text-align:right;font:inherit;font-size:1rem;min-height:40px}
.ios-row .stepper{flex:0 0 auto;width:170px}
.ios-row .hb{background:#ff3b30;color:#fff;border-radius:10px;min-width:20px;padding:0 6px;font-size:.8125rem;font-weight:700;text-align:center;line-height:20px}
.ios-row .hb[hidden]{display:none}
.ios-foot{margin:6px 16px 0;font-size:.8125rem;color:var(--muted)}
.ios-head{position:sticky;top:-18px;z-index:2;background:var(--bg);margin:-6px -18px 0;padding:6px 18px 8px}
.modal:has(.ios-head){background:var(--bg)}
/* sheets: bottom sheets with a grab handle; drag the handle down or tap outside to close */
.overlay{align-items:flex-end;padding:0;padding-top:max(10px,env(safe-area-inset-top,0px))}
.modal{width:100%;max-width:640px;border-radius:12px 12px 0 0;max-height:100%;padding:6px 18px calc(18px + env(safe-area-inset-bottom,0px));background:var(--surface);box-shadow:0 -1px 0 var(--line),0 -10px 30px rgba(0,0,0,.18);transition:transform .2s}
.modal{position:relative;padding-top:18px}
.grab{width:36px;height:5px;border-radius:3px;background:var(--line);touch-action:none;cursor:grab;position:absolute;top:6px;left:calc(50% - 18px);margin:0}
#wkEditor .grab{position:relative;top:0;left:0;margin:0 auto 4px}
.grab::before{content:"";position:absolute;inset:-12px -40px}
.sheet-head h2,.modal>h2{font-size:1.25rem}
@media (min-width:700px){ .overlay{align-items:center} .modal{border-radius:14px;max-height:90vh} }
/* action sheets (destructive choices) */
.ov-action .modal.action{background:transparent;box-shadow:none;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;max-width:500px}
.as-group{background:var(--surface);border-radius:14px;overflow:hidden;display:grid}
.as-head{padding:14px 16px 12px;text-align:center;border-bottom:.5px solid var(--line)}
.as-head h2{margin:0;font-size:.8125rem;font-weight:600;color:var(--muted)}
.as-head p{margin:4px 0 0;font-size:.8125rem;color:var(--muted)}
.as-btn{min-height:57px;border:0;background:transparent;color:var(--tint);font:inherit;font-size:1.25rem;cursor:pointer}
.as-btn+.as-btn{border-top:.5px solid var(--line)}
.as-btn.destructive{color:var(--bad)}
.as-cancel{font-weight:600}
/* the Undo bar and toasts stay above the tab bar (2.x placement; Race Mode keeps its bar at the top) */
/* content */
.watch,.team-sec,.sugg,.wk,.empty-start .choice,.res-card,.grp-card{border:0;box-shadow:var(--shadow);border-radius:12px}
.watch::before{width:4px}
.empty-start h2{font-size:1.375rem}
.choices{background:var(--surface);border-radius:12px;overflow:hidden;gap:0}
.choices .choice{border:0;border-radius:0;box-shadow:none}
.choices .choice+.choice{border-top:.5px solid var(--line)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 8px}
.sec-h h3,.sec-title{margin:22px 0 8px;font-size:1.25rem;font-weight:700}
.sec-h h3{margin:0}
.share-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.share-btn svg{width:20px;height:20px}
.sec-note{margin:0 0 12px}
.list-h{margin:22px 0 8px;font-size:1.25rem}
.team-count{margin:0 0 8px}
.rv-switch{margin:0 0 12px}
.hist-meet{border:0;background:transparent}
/* swipe rows (3.0) */
.swipe{position:relative;overflow:hidden;background:var(--surface)}
.swipe>.sw-front{position:relative;z-index:1;background:var(--surface);transition:transform .2s;touch-action:pan-y pinch-zoom}
.sw-lead,.sw-trail{position:absolute;top:0;bottom:0;display:flex;z-index:0}
.sw-lead{left:0}.sw-trail{right:0}
.sw-act{border:0;min-width:84px;padding:0 12px;color:#fff;font:inherit;font-weight:600;font-size:.9375rem}
.sw-act.red{background:#d70015}.sw-act.gray{background:#636366}.sw-act.tint{background:var(--btn-primary)}
/* Workouts: a grouped list of saved workouts; the editor is a large sheet */
.wk-layout{display:block}
.wk-group .wk{border-radius:0;box-shadow:none;margin:0;padding:0}
.wk-group .wk+.wk{border-top:.5px solid var(--line)}
.wk-group .sw-front{padding:12px 16px;cursor:pointer}
.wk-group .wk-btns{display:none}
#wkEditor:empty{display:none}
body.wk-editing #wkEditor{position:fixed;left:0;right:0;bottom:0;top:max(10px,env(safe-area-inset-top,0px));z-index:45;background:var(--surface);border-radius:12px 12px 0 0;overflow:auto;padding:6px 16px calc(24px + env(safe-area-inset-bottom,0px) + var(--kb));box-shadow:0 -10px 40px rgba(0,0,0,.35)}
body.wk-editing::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:44}
body.wk-editing .tabbar{display:none}
body.wk-editing #wkEditor .editor{border:0;box-shadow:none;padding:0;background:transparent;max-width:640px;margin:0 auto}
#wkEditor .ed-head{position:sticky;top:-6px;z-index:2;background:var(--surface);padding:6px 0}
#wkEditor .ed-row{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){ body.wk-editing #wkEditor{left:50%;right:auto;width:640px;transform:translateX(-50%);top:5vh;bottom:5vh;border-radius:14px} }
/* Team rows */
.team-sec .ath.swipe{border-top:.5px solid var(--line)}
.team-sec .ath .sw-front{display:block}
/* the workout flow's actions stay on screen at the bottom of the sheet (3.0) */
.flow .btn-row,.flow .flow-next{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));z-index:3;margin-bottom:-18px;box-shadow:0 -8px 12px -8px rgba(0,0,0,.15)}
.flow .btn-row{background:var(--surface);padding:10px 0 calc(18px + env(safe-area-inset-bottom,0px))}
.flow .flow-next{margin-top:10px}

/* 3.0.1: team logo at the left of the nav bar (hidden while a back button shows) */
/* the wordmark uses the logo's own navy and blue (white replaces navy in dark mode, where navy can't be read) */
:root{--logo-navy:#052257;--logo-blue:#49a5f3;--brand-word:var(--logo-navy)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brand-word:#ffffff}}
:root[data-theme="dark"]{--brand-word:#ffffff}
.nav-brand{display:flex;align-items:center;gap:6px;flex:none;margin-left:6px}
.nav-brand[hidden]{display:none}
.nav-logo{width:auto;height:36px;flex:none;display:block}
.brand-word{font-family:var(--font-clock);font-weight:800;font-size:min(1.6875rem,32px);line-height:1;letter-spacing:.2px;white-space:nowrap;color:var(--brand-word)}
.brand-word span{color:var(--logo-blue)}
/* the brand holds the left of the bar, so the small centered title stays off while it shows */
.top-inner:has(.nav-brand:not([hidden])) .nav-small{display:none}
/* 3.0.1: portrait only. iOS ignores the manifest's orientation, so a phone held sideways gets a cover */
.turn-upright{display:none}
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (pointer:coarse){
  .turn-upright{display:flex;position:fixed;inset:0;z-index:10000;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;background:var(--bg);color:var(--ink);text-align:center}
  .turn-upright svg{width:56px;height:56px;color:var(--tint);transform:rotate(-90deg)}
  .turn-upright p{margin:0;font-size:1.25rem;font-weight:600}
  .turn-upright .tu-sub{font-size:1rem;font-weight:400;color:var(--muted,inherit)}
  body{overflow:hidden}
}

/* 3.1: race-day ratings */
.rd-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 8px;font-size:0.9375rem;color:var(--muted)}
.rd-conf{display:inline-block;font-size:0.75rem;font-weight:700;padding:2px 8px;border-radius:8px;white-space:nowrap;border:1px solid transparent}
.rd-high{background:var(--ok-bg);color:var(--ink);border-color:var(--ok)}
.rd-medium{background:var(--fill,var(--surface-2));color:var(--ink)}
.rd-low{background:var(--slow-bg);color:var(--ink);border-color:var(--slow)}
.rd-none{background:transparent;color:var(--muted);border-color:var(--line)}
.rd-table td .rd-conf{margin-top:4px}
.rd-table td{vertical-align:top;white-space:normal}
.rd-table td .sub2{white-space:normal}
.rd-table td:first-child{min-width:0;width:48%}
.adj-note{font-style:italic}

/* 3.2: race weather (Open-Meteo) */
.wx-block{margin:6px 0 10px;display:grid;gap:4px}
.wx-line{margin:0;font-size:0.9375rem;color:var(--ink);line-height:1.35}
.wx-line .wx-k{font-weight:700;margin-right:4px}
.wx-wait,.wx-none{color:var(--muted);font-size:0.875rem;margin:4px 0 8px}
.wx-flags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;align-items:center}
.wx-flag{display:inline-flex;align-items:center;gap:4px;font-size:0.8125rem;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--ctl-line,var(--line));background:var(--surface);color:var(--ink);white-space:nowrap}
.wx-flag[role=button]{min-height:44px;padding:0 12px;cursor:pointer}
.wx-hot,.wx-warm{border-color:var(--slow);background:var(--slow-bg)}
.wx-cold{border-color:var(--brand,#4b9cd3)}
.wx-mud{border-color:var(--ok);background:var(--ok-bg)}
.wx-attr{margin:2px 0 6px;font-size:0.75rem;color:var(--muted)}
.wx-attr a{color:inherit}
.mt-wx{display:flex;flex-wrap:wrap;gap:4px;flex-basis:100%;margin-top:4px}
.mt-wx .wx-flag{font-size:0.75rem;padding:1px 7px}
small.wx-flags{display:flex}
small.wx-flags .wx-flag{font-size:0.75rem;padding:1px 7px}
.race-table .wx-flags{margin-top:4px}
.race-table .wx-flags .wx-flag{font-size:0.6875rem;padding:1px 6px}
.rd-split{margin:-4px 0 8px;font-size:0.875rem;color:var(--muted)}
.wx-band{font-size:13px}
.wx-ico{font-size:11px}
.wx-geo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.wx-geo-row .hint{display:block}
.pl-list{display:grid;gap:10px;margin:10px 0}
.pl-row{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.pl-row.pl-done{opacity:.8}
.pl-name .hint{display:block}
.pl-sug{font-size:0.9375rem}
.pl-sug a{margin-left:6px}
.pl-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pl-acts .pl-q{flex:1 1 140px;min-width:0;min-height:44px;font-size:16px;padding:0 10px;border-radius:10px;border:1px solid var(--ctl-line,var(--line));background:var(--bg);color:var(--ink)}
.pl-acts .btn{min-height:44px}
.hist-meet>summary{flex-wrap:wrap}
.hist-meet>summary .mt-name{flex:1 1 auto;min-width:0}

.sw-btn{padding:0;margin:0}
.sw-btn[aria-checked=true]{background:var(--switch-on);border-color:var(--switch-on)}
.sw-btn[aria-checked=true]::after{transform:translateX(20px)}
.wx-geo-row .sw-btn{min-width:51px}

/* 3.3: shared stopwatches */
.watch.f-hide{display:none}
.watch-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.show-btn{min-height:44px;font-weight:600}
.coach-note{font-size:0.875rem;color:var(--muted)}
.coach-note:empty{display:none}
.tap-by{display:block;font-size:0.6875rem;color:var(--muted);font-weight:600}
.tap-alt{display:block;min-height:44px;margin-top:2px;padding:2px 8px;border-radius:8px;border:1px dashed var(--ctl-line,var(--line));background:transparent;color:var(--tint,var(--ink));font:inherit;font-size:0.75rem;cursor:pointer;text-align:left}

/* 3.3.1: labeled Undo, lap note, End workout, Edit mode */
.undo-lbl{width:100%;min-height:44px;margin-top:6px;font-size:0.875rem;font-weight:600;background:transparent;border:1px solid var(--ctl-line,var(--line));color:var(--ink)}
.lap-note{background:var(--fill,var(--surface-2))}
.end-wk{min-height:44px;font-weight:700}
.nav-txt{min-height:44px;padding:0 10px;border:0;background:transparent;color:var(--tint);font:inherit;font-size:1.0625rem;cursor:pointer}
.nav-txt[hidden]{display:none}
body.w-editing .watch{position:relative;cursor:pointer}
body.w-editing .watch::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3}

/* 3.3.1: team colors. Girls pink (circles), Boys blue (squares), everywhere; never color alone (shapes, words). */
#rvRunners[data-g="B"] .viz{--series-1:var(--boys)} /* a boy's own charts in Boys blue */
.cmp-wrap .viz{--series-1:var(--cmp-1);--series-2:var(--cmp-2)} /* comparing runners: neutral colors, not team colors */
.team-sec[data-sec="G"] .team-sh h3,.bench-gh[data-g="G"],.rv-gh[data-g="G"]{color:var(--girls)}
.team-sec[data-sec="B"] .team-sh h3,.bench-gh[data-g="B"],.rv-gh[data-g="B"]{color:var(--boys)}
.team-sec[data-sec="G"] .team-sh h3::before,.bench-gh[data-g="G"]::before,.rv-gh[data-g="G"]::before{content:"● ";color:var(--girls)}
.team-sec[data-sec="B"] .team-sh h3::before,.bench-gh[data-g="B"]::before,.rv-gh[data-g="B"]::before{content:"■ ";color:var(--boys)}
.chip-a.g-G{border-left:4px solid var(--girls)}
.chip-a.g-B{border-left:4px solid var(--boys)}
.chip-a.g-G .nm::before{content:"● ";color:var(--girls)}
.chip-a.g-B .nm::before{content:"■ ";color:var(--boys)}
.tv-g.tv-gG{color:var(--girls);font-weight:700}
.tv-g.tv-gB{color:var(--boys);font-weight:700}

/* 3.4: Settings pages (iOS Settings app) */
.ios-row{min-height:44px;line-height:1.25}
.ios-row .ios-l{font-size:1.0625rem}
.ios-v{color:var(--muted);font-size:1.0625rem;text-align:right;flex:0 1 auto;min-width:0;max-width:60%;overflow-wrap:anywhere}
.ios-nav .ios-v{margin-left:auto}
.ios-act{cursor:pointer;color:var(--tint)}
.ios-act .ios-l{flex-direction:row}
.ios-act.primary-act{font-weight:600}
.ios-act.destructive{color:var(--bad)}
.ios-act[aria-busy=true]{opacity:.6}
.set-ic{flex:0 0 29px;width:29px;height:29px;border-radius:7px;display:grid;place-items:center;background:var(--fill);font-size:17px;line-height:1}
.set-cat{gap:12px}
.set-cat+.set-cat::before{left:57px}
.set-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.set-head h2{grid-column:2;margin:0;font-size:1.0625rem;font-weight:600;text-align:center}
.set-head:not(:has(.set-back)) h2{grid-column:1;font-size:1.75rem;font-weight:700;text-align:left}
.set-head .set-back{grid-column:1;justify-self:start;min-height:44px;padding:0 4px}
.set-head [data-x=done]{grid-column:3;justify-self:end;min-height:44px}
.set-body{padding-bottom:10px}
.set-seg{flex:0 0 auto}
.set-seg button{min-height:32px;padding:0 10px;font-size:.9375rem}
.credits .ios-l{font-size:.9375rem}
.team-page .ios-group+.ios-group,.team-page .ios-foot+.ios-group{margin-top:18px}
.team-page .phones .ios-group{margin-top:0}
.phone-row .ios-v.old{color:var(--slow);font-weight:700}
.val-sheet{display:flex;align-items:center;justify-content:center;gap:22px;padding:28px 0 12px}
.val-btn{width:64px;height:64px;border-radius:32px;font-size:2rem;font-weight:500;padding:0}
.val-num{min-width:120px;text-align:center;font-family:var(--font-clock);font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums}

/* 3.4: density: one-line rows, compact weather, keys in titles */
.watch-bar{gap:8px;align-items:center}
.watch-bar .btn{min-height:44px;padding:0 14px}
.watch-bar .bulk-row{display:contents}
.watch-bar .bulk-row[hidden]{display:none}
.hist-meet>summary{flex-wrap:nowrap;align-items:center;gap:10px}
.hist-meet>summary .mt-name{flex:1 1 auto;min-width:0}
.mt-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto;text-align:right}
.wx-tag{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:.8125rem;font-weight:600;white-space:nowrap;cursor:pointer;position:relative}
.wx-tag::after{content:"";position:absolute;inset:-8px -4px} /* a 44 pt tap target around the small tag */
.wx-tag.wx-tag-f{color:var(--ink);border-color:var(--slow)}
.wx-mini{margin:4px 0 8px}
details.rd-line{margin:2px 0 8px}
details.rd-line>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;color:var(--muted);font-size:.9375rem}
details.rd-line>summary::-webkit-details-marker{display:none}
details.rd-line>summary::after{content:"ⓘ";margin-left:auto;color:var(--tint);font-size:1rem}
.rd-more{margin:0 0 6px;font-size:.875rem;color:var(--muted)}
.hist-meet details.div-race>summary{min-height:44px;padding:6px 14px}
.hist-meet details.div-race{margin:6px 0}
.race-list{list-style:none;margin:0;padding:0}
.race-list .rl-row{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border:0;border-radius:0;box-shadow:none;background:transparent}
.race-list .rl-row+.rl-row{border-top:.5px solid var(--line)}
.race-list .rl-p{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.875rem}
.race-list .rl-n{min-width:0;overflow-wrap:anywhere}
.race-list .rl-n .tagline{display:block}
.race-list .rl-t{display:flex;flex-direction:column;align-items:flex-end;border:0;background:transparent;font:inherit;color:var(--ink);min-height:44px;justify-content:center;padding:0 2px}
.race-list .rl-t b{font-variant-numeric:tabular-nums}
.race-list .rl-t small{color:var(--muted);font-size:.75rem}
.race-list .rl-t:disabled{opacity:1}
h3.h-key,h4.h-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.viz-legend.in-title{margin:0 0 0 auto;font-weight:400;font-size:.8125rem}
.team-count{display:none}
#v-race[data-status="setup"] .race-clock{display:none} /* nothing to time before the gun */
.adj-note{font-style:normal;font-size:.8125rem}
.wx-attr-in{white-space:nowrap}
/* 3.4 round 2 */
.watch-bar .bulk-row .btn{flex:0 0 auto;width:auto;min-height:44px}
.hist-meet>summary .mt-name{display:flex;flex-direction:column;gap:1px}
.mt-date{font-weight:400;font-size:.8125rem;color:var(--muted)}
.hist-meet>summary{min-height:52px;padding:4px 0}
.hist-meet details.div-race{border:0;border-radius:10px;margin:4px 0}
.hist-meet details.div-race>summary{min-height:44px;padding:4px 12px}
.race-list .rl-t{flex-direction:row;align-items:baseline;gap:8px}
.race-list .rl-t .hand-note{display:block;flex-basis:100%;text-align:right}
.race-list .rl-row{grid-template-columns:2.2em minmax(0,1fr) auto}
.hist-season{margin:14px 0 4px}
#histTitle{margin:10px 0 0}
/* 3.4 round 3 */
.ld-row{grid-template-columns:1.4em minmax(0,1fr) 28% 3.2em}
.ld-axis{grid-template-columns:minmax(0,1fr) 28% 3.2em}
.ld-nm{font-size:.9375rem}
.race-list .rl-t{flex-direction:column;align-items:flex-end;gap:0}
.race-list .rl-t small{order:2}
.race-table td.tv-g.tv-gG{color:var(--girls)}
.race-table td.tv-g.tv-gB{color:var(--boys)}
.ios-field input,.ios-field select{min-width:0;flex:0 1 55%;width:55%}
.set-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.set-head h2{min-width:0;overflow-wrap:anywhere}

/* 3.5: Boys = school sky blue (squares). Light mode keeps it readable with a deeper sky shade for text, outlines and
   a thin casing around sky lines; dark mode uses the sky blue as is. Girls stay pink (circles). */
:root{--boys:#8fd0f5;--boys-ink:#0a6e94;--boys-edge:drop-shadow(0 0 .55px #0a6e94) drop-shadow(0 0 .55px #0a6e94);--series-2:var(--boys)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--boys:#bfe3f7;--boys-ink:#bfe3f7;--boys-edge:none;--series-2:var(--boys)}}
:root[data-theme="dark"]{--boys:#bfe3f7;--boys-ink:#bfe3f7;--boys-edge:none;--series-2:var(--boys)}
.viz path.s2:not(.band),.viz .slope.s2,.viz .spread5.s2,.viz .spread7.s2,.viz .kl.s2{filter:var(--boys-edge)}
.viz .dot.s2,.viz polygon.s2{stroke:var(--boys-ink);stroke-width:1.5}
.viz path.band.s2{opacity:.4}
.viz-legend .k.s2,.ld-dot.s2{box-shadow:inset 0 0 0 1.5px var(--boys-ink)}
#rvRunners[data-g="B"] .viz path.s1:not(.band){filter:var(--boys-edge)}
#rvRunners[data-g="B"] .viz .dot:not(.s2):not(.s3){stroke:var(--boys-ink);stroke-width:1.5}
.cmp-wrap .viz{--boys-edge:none}
.cmp-wrap .viz .dot.s2{stroke:var(--surface)}
.team-sec[data-sec="B"] .team-sh h3,.bench-gh[data-g="B"],.rv-gh[data-g="B"]{color:var(--boys-ink)}
.team-sec[data-sec="B"] .team-sh h3::before,.bench-gh[data-g="B"]::before,.rv-gh[data-g="B"]::before{content:"■ ";color:var(--boys-ink)}
.chip-a.g-B{border-left:4px solid var(--boys);box-shadow:inset 1px 0 0 var(--boys-ink)}
.chip-a.g-B .nm::before{color:var(--boys-ink)}
.tv-g.tv-gB,.race-table td.tv-g.tv-gB{color:var(--boys-ink)}
/* 3.5: Schedule page */
.sched-entry{margin:0 0 14px}
.sched-entry .ios-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}
.sched-top{display:flex;gap:10px;align-items:center;margin:4px 0 12px;flex-wrap:wrap}
.sched-top .sched-season{flex:1 1 10rem;min-width:0}
.sched-top select{width:100%;min-height:44px;font-size:1rem}
.sched-top .btn{min-height:44px}
.sched-list .sw-front{background:var(--surface)}
.sched-row{display:flex;gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 16px;background:none;border:0;border-bottom:.5px solid var(--line);text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.sched-sw:last-child .sched-row{border-bottom:0}
.sd-date{flex:0 0 3.2rem;display:flex;flex-direction:column;align-items:center;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.sd-date b{font-size:1.05rem;color:var(--ink);letter-spacing:0;text-transform:none}
.sd-date.past b{color:var(--muted)}
.sd-main{display:flex;flex-direction:column;min-width:0}
.sd-main b{font-weight:600;overflow-wrap:anywhere}
.sd-main small{color:var(--muted);font-size:.8125rem}
.sched-sw.na .sd-main b{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
.sd-tag{font-style:normal;font-weight:600;font-size:.75rem;padding:1px 6px;border-radius:6px;color:var(--btn-primary);white-space:nowrap}
.sd-tag.na-tag{background:var(--surface-2);color:var(--muted)}
.imp-sched{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.imp-srow{background:var(--surface);border-radius:10px;padding:10px 12px}
.imp-srow.dup{opacity:.6}
.imp-srow .is-head{display:flex;flex-direction:column;margin-bottom:4px}
.imp-srow .is-head span{color:var(--muted);font-size:.8125rem}
.imp-srow select{width:100%;font-size:1rem;min-height:44px}
.ok-tag,.chk-tag{font-size:.75rem;font-weight:600;padding:1px 6px;border-radius:6px;margin-left:4px}
.ok-tag{background:var(--sel-bg);color:var(--ink)}
.chk-tag{background:color-mix(in srgb,var(--warn,#c77700) 18%,transparent);color:var(--ink)}
.me-na{margin:4px 0 8px;border-radius:10px;background:var(--surface)}
.imp-srow .is-lab{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.imp-srow .is-lab .hint{margin:0}
/* 3.6 / 3.6.1 tiles: one fixed size in each layout, sized for the fullest state (longest name, runners line, two laps,
   Undo, rest countdown, Edit mode). Six rows of fixed height; nothing can grow a row, nothing overlaps, and buttons,
   times and controls are never cut (long text ends in an ellipsis). Font sizes inside follow the tile's width (cqi),
   so the larger iOS text sizes fit too. Only adding or removing stopwatches moves a tile. */
#grid .watch{--t-pad-t:8px;--t-pad-b:10px;--t-pad-l:14px;--t-pad-r:10px;--t-gap:4px;--t-head:2.75rem;--t-meta:1.25rem;--t-clock:3rem;--t-stat:2.75rem;--t-laps:2.875rem;--t-ctl:3rem;
  --tile-h:calc(var(--t-pad-t) + var(--t-pad-b) + 5*var(--t-gap) + var(--t-head) + var(--t-meta) + var(--t-clock) + var(--t-stat) + var(--t-laps) + var(--t-ctl));
  container-type:inline-size;display:grid;grid-template-rows:var(--t-head) var(--t-meta) var(--t-clock) var(--t-stat) var(--t-laps) var(--t-ctl);grid-template-columns:minmax(0,1fr);gap:var(--t-gap);
  height:var(--tile-h);padding:var(--t-pad-t) var(--t-pad-r) var(--t-pad-b) var(--t-pad-l);align-content:start}
#grid .watch>*{min-height:0;min-width:0;overflow:hidden;margin:0;justify-self:stretch;width:auto;max-width:none}
#grid .watch .w-head{display:flex;align-items:center;gap:4px}
#grid .watch .w-sel{display:none}
#grid .watch .w-head .w-name{flex:1 1 auto;min-width:0;height:100%;margin:0;padding:0 6px 0 0;border-radius:10px;font-size:min(1.125rem,11.9cqi);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
#grid .watch .w-head .more-btn{flex:none;width:44px;height:44px}
#grid .watch .w-meta{display:flex;align-items:center;font-size:min(0.8125rem,8.6cqi);line-height:1.25;color:var(--muted);white-space:nowrap}
#grid .watch .w-meta>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:inherit}
#grid .watch .w-meta .members{display:block;margin:0;padding:0;width:auto;line-height:inherit;font-size:inherit;-webkit-line-clamp:unset;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#grid .watch .clock{display:flex;align-items:center;justify-content:space-between;gap:8px}
#grid .watch .clock .big{flex:none;white-space:nowrap;line-height:1;font-size:min(2.875rem,30.4cqi)}
#grid .watch .clock .sub{flex:0 1 auto;min-width:0;overflow:hidden;font-size:min(0.875rem,9.2cqi);line-height:1.2;text-align:right;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#grid .watch .w-status{display:flex;align-items:center;gap:8px;font-size:min(0.875rem,9.2cqi);color:var(--muted);white-space:nowrap}
#grid .watch .w-status>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#grid .watch .w-status .w-msg{color:var(--ink);font-weight:600}
#grid .watch .w-status .next{display:block;min-height:0}
#grid .watch .w-status .next[hidden]{display:none}
#grid .watch .w-status .btn{flex:0 1 auto;align-self:stretch;max-width:62%;min-width:max(44px,4.4em);min-height:0;height:auto;margin:0;padding:0 12px;font-size:min(0.8125rem,8.6cqi);font-weight:600}
#grid .watch .w-status .undo-lbl{width:auto;background:transparent;border:1px solid var(--ctl-line,var(--line));color:var(--ink)}
#grid .watch .w-status .btn .bl{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#grid .watch .w-laps{display:flex;flex-direction:row;align-items:center;gap:6px;width:auto;justify-self:stretch;padding:2px 8px;border-radius:10px;background:var(--surface-2);border:0;color:var(--ink);font:inherit;text-align:left;position:relative;cursor:pointer}
#grid .watch .w-laps.w-none{cursor:default;color:var(--muted);font-size:min(0.8125rem,8.6cqi);align-items:flex-start}
#grid .watch .w-laps.w-none span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#grid .watch .w-laps .lrs{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;overflow:hidden}
#grid .watch .w-laps .lr{display:flex;gap:8px;align-items:baseline;overflow:hidden;font-size:min(0.875rem,9.2cqi);line-height:1.25;white-space:nowrap;min-width:0}
#grid .watch .w-laps .lr+.lr{opacity:.7;font-size:min(0.8125rem,8.6cqi)}
#grid .watch .w-laps .lr>*{flex:none}
#grid .watch .w-laps .lr-k,#grid .watch .w-laps .lr-by,#grid .watch .w-laps .lr-w{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
#grid .watch .w-laps .lr-by{font-size:0.75em}
#grid .watch .w-laps .lr-t{font-weight:700;font-variant-numeric:tabular-nums}
#grid .watch .w-laps .lr-d{font-variant-numeric:tabular-nums}
#grid .watch .w-laps .lr.ok .lr-d{color:var(--ok)}.watch .w-laps .lr.fast .lr-d{color:var(--fast)}.watch .w-laps .lr.slow .lr-d{color:var(--slow)}.watch .w-laps .lr.bad .lr-d{color:var(--bad)}
#grid .watch .w-laps .lr .w{font-weight:600;font-size:0.85em}
#grid .watch .w-laps .more{flex:none;font-size:min(0.75rem,7.9cqi);color:var(--tint,var(--brand-strong));font-weight:600}
#grid .watch .w-laps.w-count{flex-direction:row;justify-content:space-between;align-items:center;font-size:min(0.875rem,9.2cqi)}
/* narrower lap areas drop the least useful parts first (all of it is in the sheet): coach, word, mark, "All n" */
@container (max-width:260px){ #grid .watch .w-laps .lr-by{display:none} }
@container (max-width:200px){ #grid .watch .w-laps .lr-k,#grid .watch .w-laps .lr-w{display:none} }
@container (max-width:150px){ #grid .watch .w-laps .more{display:none} }
@container (max-width:110px){ #grid .watch .w-laps .lr-d{display:none} }
#grid .watch .w-send{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;overflow-x:auto;overflow-y:hidden;padding:0 4px;cursor:default;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#grid .watch .w-send::-webkit-scrollbar{display:none}
#grid .watch .send-nm{flex:none;min-height:44px;height:44px;min-width:44px;padding:0 12px;border-radius:22px;border:1px solid var(--ctl-line,var(--line));background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:min(0.9375rem,9.9cqi);white-space:nowrap}
#grid .watch .send-nm:active{filter:brightness(.86)}
#grid .watch .controls{display:flex;gap:8px;align-items:stretch;margin:0}
#grid .watch .controls>*{min-width:0;min-height:0;height:auto;margin:0}
#grid .watch .controls .btn{padding:0 6px;white-space:nowrap;overflow:hidden;font-size:min(1.0625rem,11.2cqi)}
#grid .watch .controls .btn.big-btn{flex:2 1 0;font-size:min(1.25rem,13.2cqi)}
#grid .watch .controls .btn.big-btn:only-child{flex:1 1 auto}
#grid .watch .controls .stop-btn{flex:1 1 0}
#grid .watch .controls .stop-btn.armed{white-space:normal;line-height:1.05;font-size:min(0.8125rem,8.6cqi)}
#grid .watch .controls .big-status{flex:1 1 auto;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:min(1rem,10.6cqi);border-radius:12px;background:var(--surface-2)}
#grid .watch .controls .btn .bl{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
#grid .watch.gone{display:flex;height:var(--tile-h)}
#grid .watch.nope{animation:nope .35s}
body.compact #grid .watch{--t-pad-t:8px;--t-pad-b:8px;--t-pad-l:12px;--t-pad-r:6px;--t-clock:3.4rem;padding:var(--t-pad-t) var(--t-pad-r) var(--t-pad-b) var(--t-pad-l);gap:var(--t-gap)}
body.compact #grid .watch .clock{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
body.compact #grid .watch .clock .big{font-size:min(2.25rem,23.8cqi)}
body.compact #grid .watch .clock .sub{-webkit-line-clamp:1;text-align:left;max-width:100%}
body.compact #grid .watch .w-status{gap:4px}
body.compact #grid .watch .w-status .btn{flex:none;padding:0 8px;max-width:none;min-width:44px}
body.compact #grid .watch .btn .bl[data-sm]{font-size:0}
body.compact #grid .watch .btn .bl[data-sm]::after{content:attr(data-sm);font-size:min(0.875rem,9.2cqi)}
body.compact #grid .watch .controls .btn .bl[data-sm]::after{font-size:min(1rem,10.6cqi)}
.lap-sheet td,.lap-sheet th{white-space:nowrap}
/* Edit mode (3.6.1, like iOS): the selection circle gets its own column on the left and the content makes room (names
   end in an ellipsis); the tile keeps its size. The toolbar takes the tab bar's place. */
body.w-editing #grid .watch>*:not(.w-sel){margin-left:32px}
body.w-editing.compact #grid .watch>*:not(.w-sel){margin-left:28px}
body.w-editing #grid .watch::before{display:none}
body.w-editing #grid .watch .w-sel{display:grid;place-items:center;position:absolute;left:12px;top:calc(var(--t-pad-t) + var(--t-head)/2 - 13px);width:26px;height:26px;border-radius:50%;border:2px solid var(--ctl-line,var(--line));background:var(--surface);z-index:4}
body.w-editing.compact #grid .watch .w-sel{left:10px}
body.w-editing #grid .watch.sel .w-sel{background:var(--tint);border-color:var(--tint)}
body.w-editing #grid .watch.sel .w-sel::after{content:"✓";color:#fff;font-weight:800;font-size:15px;line-height:1}
body.w-editing #grid .watch.sel{outline:3px solid var(--tint);outline-offset:-3px}
.edit-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:8px;justify-content:space-between;padding:4px 8px var(--tab-pb);min-height:calc(52px + var(--tab-pb));background:var(--tab-bg,var(--surface));-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line)}
.edit-bar .btn{flex:0 0 auto;min-height:44px;min-width:44px;padding:0 10px;background:transparent;border:0;color:var(--tint);font-size:1.0625rem;font-weight:400}
.edit-bar .btn.danger{color:var(--bad);font-weight:600}
.edit-bar .btn:disabled{color:var(--muted);opacity:.6}
.edit-bar .ed-count{flex:1 1 auto;min-width:0;text-align:center;font-size:0.8125rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.w-editing .tabbar{display:none}
body.w-editing main{padding-bottom:calc(52px + var(--tab-pb) + 24px)}

body.w-editing .tabs{visibility:hidden}
.edit-bar[hidden]{display:none}
body.w-editing.compact #grid .watch .w-laps .more,body.w-editing.compact #grid .watch .w-laps .lr-d.num{display:none} /* 3.6.1: the circle's column leaves no room; the sheet has them */
body.compact #grid .watch .controls .btn.big-btn{flex:1.35 1 0}
body.compact #grid .watch .controls .btn{padding:0 3px}

/* ---------- 3.7: separate starts (girls and boys each with their own Gun) ---------- */
.ready-guns{display:grid;gap:12px}
.ready-gun.two{min-height:26vh;font-size:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ready-gun.two small{font-size:1.0625rem;font-weight:600;opacity:.9}
.race-guns{display:grid;grid-auto-flow:column;gap:8px;margin:0 0 10px}
.race-guns .race-gun{min-height:64px;font-size:1.5rem}
#v-race .race-clock.two{font-size:2.25rem;white-space:nowrap}
.race-grid button.wait{border-style:dotted;color:var(--muted);background:var(--surface-2)}
.race-grid button.wait .t{font-size:0.8125rem;font-weight:600;color:var(--muted)}
.starts-f .seg2{margin-top:6px}
.start-unk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.start-h{list-style:none;margin:14px 0 4px;font-size:1.0625rem;font-weight:700}
tr.start-row th{text-align:left;padding-top:12px;font-size:1.0625rem}
.cp-line{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cp-line .cp-names{flex:1;min-width:0;font-weight:600}
.cp-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cp-add-l{font-weight:600;margin-right:2px}
.cp-add .btn{min-height:44px;padding:0 12px}

/* ---------- 3.7: no zoom when typing ----------
   iOS zooms into any field whose text is under 16 px. Every text field, number field and picker is at least 16 px on
   every screen and sheet, at every iOS text size (1rem follows it and can drop to 14 px). Pinch to zoom stays
   available (no maximum-scale in the viewport; swipe rows allow pinch-zoom). tests/e2e35.js checks every field. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]),select,textarea{font-size:max(16px,1rem)!important}

/* ---------- 3.8: Latest meet (celebrations) and Growth focus, top of the Data tab ---------- */
.latest{margin:0 0 18px}
.latest .sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.latest h3{margin:8px 0}
.cele-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cele{background:var(--surface);border-radius:14px;padding:12px 14px;border-left:5px solid var(--tint)}
.cele.g-G{border-left-color:var(--girls)}
.cele.g-B{border-left-color:var(--boys)}
.cele h4{margin:0 0 4px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:1.0625rem}
.cele h4 .linkish{font-weight:700;color:var(--ink);text-align:left;min-height:44px;padding:0}
.cele-t{font-weight:600;color:var(--muted)}
.cele-head{margin:0;font-weight:600}
.cele-more{margin:6px 0 0;padding-left:18px;color:var(--muted)}
.cele-team{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.cele-team li{background:var(--surface);border-radius:12px;padding:10px 14px;font-weight:600}
#latestAll{margin-top:10px;min-height:44px}
details.growth{margin-top:14px;background:var(--surface);border-radius:14px;padding:4px 14px 10px}
details.growth summary{min-height:44px;display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.gf{border-top:1px solid var(--line);padding:10px 0}
.gf h4{margin:0 0 4px;font-size:1.0625rem}
.gf h4 .linkish{font-weight:700;padding:0;min-height:44px}
.gf p{margin:4px 0}
.gf-steps{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.gf-steps .linkish{min-height:44px;padding:0 4px}
.latest h3{margin:8px 0 0;font-size:1.375rem}
.latest-sub{margin:2px 0 8px;color:var(--muted)}
.cele h4 .linkish{font-size:1.0625rem;font-weight:700;color:var(--ink)}
.cele-head{font-weight:500}

/* ---------- 3.9: Training tab ---------- */
.sw-act.gold{background:#b25000}
.fav-star{color:#b25000}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fav-star{color:#ffb340}}
:root[data-theme="dark"] .fav-star{color:#ffb340}
.sugg-whyt{margin:2px 0 4px;font-weight:500}
.tpl-why{margin:4px 0 8px}
.tpl-vol{margin-top:8px}
.sugg-all{width:100%;min-height:44px;margin-top:10px}
.tpl-fav{width:100%;min-height:44px;margin-top:10px}
#wkFavs{margin-bottom:14px}

/* ---------- 3.10: Data sections, Raw / Adjusted, runner profiles in Team and Training, team training paces ---------- */
.rv-switch{grid-template-columns:repeat(4,minmax(0,1fr))}
.rv-switch button{padding-left:4px;padding-right:4px;white-space:nowrap}
.rv-switch button.has-dot::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bad);margin-left:4px;vertical-align:super}
#rvHigh .growth{margin-top:22px}
#rvHigh .growth h3 .n{font-weight:500}
/* the app-wide Raw / Adjusted switch with its ⓘ */
.adj-sw{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;column-gap:6px;margin:8px 0 10px}
.adj-sw .rv-tog{margin:0}
.adj-sw .adj-info,.adj-sw .time-kind{grid-column:1 / -1;margin:4px 2px 0}
.info-btn{width:44px;height:44px;border:0;background:transparent;color:var(--tint, var(--brand));font-size:1.25rem;line-height:1;cursor:pointer;border-radius:22px}
.time-kind{font-size:0.8125rem;color:var(--muted);font-weight:600}
.chart-kind{margin:4px 0}
/* Team tab: Avg and SB columns; the sorted column is bold in the header */
.team-sec .ath-head,.ath-row{grid-template-columns:minmax(0,1fr) 2.6em 4.9em 4.9em;gap:6px}
.team-sec .ath-head span{line-height:1.15}
.team-sec .ath-head span small{display:block;font-weight:500;font-size:0.6875rem}
.team-sec .ath-head span.on{color:var(--ink)}
.ath-row .ath-avg,.ath-row .ath-sb{font-size:1rem;text-align:right;white-space:nowrap;font-weight:500}
.ath-row .ath-avg.on,.ath-row .ath-sb.on{font-weight:700}
.team-tools .adj-sw{margin:6px 0 2px}
/* a runner profile pushed inside a tab hides that tab's list */
.view.prof-open > :not(.prof){display:none !important}
.prof .rv-name{margin-top:4px}
/* team training paces */
.wk-paces{margin-top:28px}
.wk-paces .sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tp-unit{margin:8px 0 10px}
.tp-unit button{min-height:44px}
.tp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:var(--surface);max-width:100%}
.tp-table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:0.9375rem}
.tp-table th,.tp-table td{padding:8px 10px;white-space:nowrap;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tp-table thead th{font-size:0.8125rem;color:var(--muted);font-weight:600;vertical-align:bottom;background:var(--surface)}
.tp-table thead th small{display:block;font-weight:500;font-size:0.6875rem}
.tp-table .tp-name{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;white-space:normal;min-width:7.5em;max-width:9.5em;box-shadow:1px 0 0 var(--line)}
.tp-table thead .tp-name{z-index:2}
.tp-table .tp-gh th,.tp-table .tp-gh td{background:var(--surface-2);font-size:0.875rem;font-weight:700;padding-top:10px;padding-bottom:6px}
.tp-gG .tp-gh th{color:var(--girls)}
.tp-gB .tp-gh th{color:var(--boys-ink, var(--boys))}
.tp-who{border:0;background:transparent;color:var(--tint, var(--brand));font:inherit;font-weight:600;text-align:left;padding:6px 0;min-height:44px;cursor:pointer;overflow-wrap:anywhere}
.tp-flag{display:block;font-size:0.75rem;color:var(--muted);font-weight:600}
.tp-none .tp-na{color:var(--muted);text-align:left;font-style:italic}
/* a pushed runner profile: its name is the page title (the tab's large title steps aside) */
body.prof-on .nav-title{display:none}
body.prof-on .nav-small{opacity:1}

/* 3.11: race-day fixes. PR / season-best pace marks: a symbol and a word, gold ★ and green ▲, each at least 4.5:1 on
   the name buttons and result cards in both themes (checked in tests/e2e39.js). */
:root{--pm-pr:#8a5f00;--pm-sb:#0f7a50}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pm-pr:#f2c14e;--pm-sb:#44d196}}
:root[data-theme="dark"]{--pm-pr:#f2c14e;--pm-sb:#44d196}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pm{font-weight:800;white-space:nowrap}
.pm-pr{color:var(--pm-pr)}
.pm-sb{color:var(--pm-sb)}
.race-grid button .t{white-space:nowrap;max-width:100%;overflow:hidden} /* one line, always: a mark never makes a button taller */
.race-grid button.rec .t .pm{font-size:.95em}
.race-grid.cols-3 button .t .pm{letter-spacing:-.02em}
/* The gun shows it fired on the touch itself, before anything else redraws. */
.race-gun.fired{filter:brightness(.82);transform:none}
/* Is this race on the team? One line, 44 pt, at the top of setup, the Ready screen and results. Tap: the Sync log. */
.race-share{display:block;width:100%;min-height:44px;margin:0 0 10px;padding:10px 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:.9375rem;font-weight:600;text-align:left;line-height:1.3}
.race-share[data-st="ok"]{color:var(--pm-sb);border-color:transparent;background:var(--ok-bg)}
.race-share[data-st="warn"]{color:var(--slow);border-color:var(--slow);background:var(--slow-bg)}
.race-share[data-st="bad"]{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
/* Two races being set up at once: the note on the setup screen (and on a finished race: the next one). */
.race-conflict{margin:0 0 12px;padding:12px;border-radius:var(--r-ctl);background:var(--slow-bg);border:1px solid var(--slow)}
.race-conflict p{margin:0 0 10px;color:var(--ink);line-height:1.35}
.race-conflict .btn{width:100%;min-height:44px}
/* Settings > Data > Sync log */
.slog-diag{margin:4px 0 8px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--surface-2);font-weight:600;line-height:1.35}
.slog-diag[data-ok="1"]{color:var(--ok)}
.slog-diag[data-ok="0"]{color:var(--bad);background:var(--bad-bg)}
.slog-seg{margin:6px 0 8px}
.slog-list{list-style:none;margin:0;padding:0}
.slog-row{display:flex;flex-direction:column;gap:2px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.3}
.slog-t{color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}
.slog-w{color:var(--ink);overflow-wrap:anywhere}
.slog-s{font-size:.8125rem;color:var(--muted);overflow-wrap:anywhere}
.slog-row[data-st="ok"] .slog-s{color:var(--ok)}
.slog-row[data-st="warn"] .slog-s{color:var(--slow)}
.slog-row[data-st="bad"] .slog-s,.slog-row[data-st="bad"] .slog-w{color:var(--bad)}
/* 3.11: result cards off screen skip layout and paint, so an arriving tap redraws only what is visible */
#raceRes .rcard,#raceRes .race-wide tr{content-visibility:auto;contain-intrinsic-size:auto 160px}
#raceRes .race-wide tr{contain-intrinsic-size:auto 56px}
.race-grid.cols-3 button .t:has(.pm) .ck{display:none} /* 3 columns: "19:50.0 ★ PR" fits where "✓ 19:50.0 ★ PR" doesn't (the dashed button already says recorded) */

/* 3.12: Paste official results */
.po-sheet textarea{width:100%;min-height:7.5em;font:inherit;font-size:max(16px,1rem);padding:10px;border:1px solid var(--ctl-line);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink)}
.po-sum{margin:12px 0 6px}
.po-row{padding:10px 12px;margin:0 0 8px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface)}
.po-row.need{border-color:var(--slow);background:var(--slow-bg)}
.po-top{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.po-t{margin-left:auto;font-weight:700}
.po-sel{display:block;margin:6px 0 2px}
.po-sel select{width:100%;min-height:44px}
.po-note{margin:4px 0 0;font-size:.875rem;color:var(--muted)}
.et-off{display:inline-flex;gap:6px;align-items:center;min-height:44px;font-weight:600}
/* 3.12 Highlights: one card per runner, a one-line summary; the race, the season, last year and a coaches-only next step inside */
.hl-h{margin:14px 0 6px;font-size:1rem}
.hl-list{display:grid;gap:8px}
.hlc{background:var(--surface);border-radius:14px;border-left:5px solid var(--tint);overflow:hidden}
.hlc.g-G{border-left-color:var(--girls)}
.hlc.g-B{border-left-color:var(--boys-ink,var(--boys))}
.hlc>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;cursor:pointer;list-style:none}
.hlc>summary::-webkit-details-marker{display:none}
.hl-line{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-sum{color:var(--ink)}
.hl-t{font-weight:600;color:var(--muted);flex:none}
.hlc[open]>summary .hl-line{white-space:normal}
.hl-body{padding:0 12px 12px}
.hl-body h5{margin:10px 0 4px;font-size:.8125rem;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.hl-body p,.hl-body ul{margin:0 0 4px;line-height:1.35}
.hl-body ul{padding-left:18px}
.hl-next{margin-top:10px;padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.hl-links .linkish{display:inline-flex;min-height:44px;align-items:center;margin-right:12px}
.hl-prof{display:inline-flex;min-height:44px;align-items:center;margin-top:6px}

/* 3.13: icons (Lucide, icons.js) instead of emoji, and icon badges: an icon and a word, never the icon alone. */
:root{--pr-bg:#fbefcf;--sb-bg:#dff3e9;--ic-hot:#c2410c;--ic-warm:#a15c00;--ic-cold:#1f6aa3;--ic-mud:#1d6b5a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pr-bg:rgba(242,193,78,.17);--sb-bg:rgba(68,209,150,.16);--ic-hot:#ff8a5c;--ic-warm:#f2c14e;--ic-cold:#7cc0f0;--ic-mud:#5fd0b5}}
:root[data-theme="dark"]{--pr-bg:rgba(242,193,78,.17);--sb-bg:rgba(68,209,150,.16);--ic-hot:#ff8a5c;--ic-warm:#f2c14e;--ic-cold:#7cc0f0;--ic-mud:#5fd0b5}
svg.ic{display:inline-block;width:1.1em;height:1.1em;flex:none;vertical-align:-.18em}
.warn-ic,.tagline .ic,.fav-ic,.tpl-fav .ic,.ts-warn .ic,.rd-conf .ic{margin-inline-end:.3em}
.bdg{display:inline-flex;align-items:center;gap:.25em;padding:.12em .45em;border-radius:6px;font-size:.8125rem;font-weight:700;line-height:1.25;white-space:nowrap;background:var(--fill,var(--surface-2));color:var(--ink);vertical-align:middle}
.bdg svg.ic{width:1.05em;height:1.05em;vertical-align:0}
.bdg-pr{background:var(--pr-bg);color:var(--pm-pr)}
.bdg-sb{background:var(--sb-bg);color:var(--pm-sb)}
.bdg-course .ic,.bdg-mile .ic,.bdg-team .ic,.bdg-pace .ic,.bdg-best .ic{color:var(--tint,var(--brand))}
.bdg-back .ic{color:var(--bad)}
.bdg.zero{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.rc-badges .bdg{margin:2px 6px 0 0}
.race-table td:first-child .bdg{display:flex;width:max-content;margin-top:3px}
/* Race Mode name buttons: the badge fits the space the ★ PR mark had; it never makes the time line taller */
.race-grid button .t .pm.bdg{padding:0 .22em;gap:.12em;font-size:.82em;line-height:1.15;border-radius:4px;vertical-align:.08em}
.race-grid button .t .pm.bdg svg.ic{width:1em;height:1em}
/* the new-stopwatch choices and Settings categories (iOS: a white glyph on a coloured square) */
.ch-ic svg.ic{width:30px;height:30px;color:var(--tint,var(--brand))}
.set-ic svg.ic{width:18px;height:18px;color:#fff;vertical-align:0}
.set-ic-team{background:#2f6fd0}.set-ic-weather{background:#1b77ad}.set-ic-workouts{background:#b85400}.set-ic-race{background:#c22f2f}
.set-ic-data{background:#5856d6}.set-ic-display{background:#6e6e73}.set-ic-about{background:#6e6e73}
.fav-star svg.ic{color:#b25000;margin-inline-end:.3em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fav-star svg.ic{color:#ffb340}}
:root[data-theme="dark"] .fav-star svg.ic{color:#ffb340}
.info-btn svg.ic{width:22px;height:22px;vertical-align:middle}
.race-share{display:flex;align-items:center;gap:6px}
.race-share .rs-ic:empty{display:none}
/* weather: flag chips, the compact tag, chart bands and keys */
.wx-flag.wx-hot .ic,.ic-c.wx-hot{color:var(--ic-hot)}
.wx-flag.wx-warm .ic,.ic-c.wx-warm{color:var(--ic-warm)}
.wx-flag.wx-cold .ic,.ic-c.wx-cold{color:var(--ic-cold)}
.wx-flag.wx-windy .ic,.ic-c.wx-windy{color:var(--muted)}
.wx-flag.wx-mud .ic,.ic-c.wx-mud{color:var(--ic-mud)}
.wx-tag svg.ic{width:1em;height:1em;vertical-align:-.12em}
.lic{white-space:pre-wrap;font-size:.75rem;line-height:1.35;background:var(--surface-2);border-radius:10px;padding:10px;color:var(--ink)}

/* 3.13: Highlights, numbers over sentences */
.hl-head h3{font-size:1.375rem;margin:8px 0 0}
.hl-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:10px;margin:0 0 6px}
.tcard{background:var(--surface);border-radius:14px;padding:12px;border-top:4px solid var(--girls);min-width:0}
.tcard.g-B{border-top-color:var(--boys)}
.tcard h4{margin:0 0 8px;font-size:1rem;display:flex;align-items:center;gap:6px}
.tcard.g-G h4{color:var(--girls)}
.tcard.g-B h4{color:var(--boys-ink,var(--boys))}
.tc-b{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tc-stats{margin:0;display:grid;gap:8px}
.tc-stats dt{font-size:.8125rem;color:var(--muted)}
.tc-stats dd{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.tc-stats b{font-size:1.25rem}
.tc-short{margin:0;color:var(--muted);font-weight:600}
.chg{font-size:.875rem;font-weight:700;color:var(--muted);white-space:nowrap}
.chg.gain{color:var(--ok)}
.hl-rows{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:12px;overflow:hidden}
.hl-rows li+li .hl-row{box-shadow:inset 0 .5px 0 var(--line)}
.hl-row{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:8px 10px 8px 12px;border:0;border-left:4px solid transparent;border-radius:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.hl-row.g-G{border-left-color:var(--girls)}
.hl-row.g-B{border-left-color:var(--boys)}
.hl-nm{flex:0 1 auto;font-weight:600;overflow-wrap:normal;word-break:normal}
/* badges and the stat: whatever doesn't fit on the line wraps out of sight (the empty first item makes even the first
   badge wrap rather than be cut), so a row never shows half a badge */
.hl-mid{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;height:1.75rem;overflow:hidden}
.hl-mid::before{content:"";width:0;height:1.75rem}
.hl-mid>*{flex:none;margin-right:6px}
.hl-st{font-size:.8125rem;font-weight:700;color:var(--ok);white-space:nowrap}
.hl-row .hl-t{flex:none;margin-left:auto;font-weight:600;color:var(--muted)}
.chev-ic{color:var(--muted)}
abbr.adj-i,button.adj-i{display:inline-block;font-size:.6875rem;font-weight:700;line-height:1.2;color:var(--tint,var(--brand));background:var(--fill,var(--surface-2));border:0;border-radius:4px;padding:1px 4px;margin-left:4px;vertical-align:.2em;text-decoration:none;font-family:var(--font-ui)}
button.adj-i{position:relative;cursor:pointer}
button.adj-i::after{content:"";position:absolute;inset:-14px -12px}
#v-results.hl-open .rv-switch{display:none}
.hld-name{font-size:1.75rem;margin:4px 0 0;line-height:1.15}
.hld-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:12px 0 2px}
.hld-t{font-family:var(--font-clock);font-size:3rem;font-weight:700;line-height:1}
.hld-b{display:flex;flex-wrap:wrap;gap:6px}
.hld-b .bdg{font-size:.875rem}
.hld-line{margin:6px 0 14px;color:var(--muted);font-weight:600}
.hld-line .hand-note{font-weight:500}
.hld-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
.cmp{background:var(--surface);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cmp-l,.cmp-s{font-size:.8125rem;color:var(--muted)}
.cmp-v{font-size:1.375rem;font-weight:700;white-space:nowrap}
.cmp-v.gain{color:var(--ok)}
.hld-sp{background:var(--surface);border-radius:12px;padding:6px 8px;margin:0 0 4px}
.hld-sp .avg-ln{stroke:var(--muted);stroke-width:1.25;stroke-dasharray:3 3}
.hld-sp line.grid{stroke:var(--line);stroke-width:1}
.hld-hl{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:12px;overflow:hidden}
.hld-hl li{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;line-height:1.35}
.hld-hl li+li{box-shadow:inset 0 .5px 0 var(--line)}
.hld-hl li>svg.ic{color:var(--tint,var(--brand));margin-top:.1em}
.hld-next{background:var(--surface);border-radius:12px;padding:12px;margin:14px 0}
.hld-next h4{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:0 0 6px;font-size:1rem}
.hld-next .lock-ic{color:var(--muted)}
.hld-priv{font-size:.75rem;color:var(--muted);font-weight:600}
.hld-next ul{margin:0;padding-left:18px;line-height:1.4}
.hld-next li+li{margin-top:4px}
.hld-more{margin:0 0 16px}
.hld-hl li.k-pr>svg.ic{color:var(--pm-pr)}
.hld-hl li.k-sb>svg.ic{color:var(--pm-sb)}
.hld-hl li.k-back>svg.ic{color:var(--bad)}
.hld-links{margin:10px 0 0;background:var(--surface-2)}
.hld-links .ios-l{display:flex;flex-direction:column;gap:1px}
.hld-links .ios-l small{color:var(--muted);font-size:.8125rem}
.hl-nm .nw{white-space:nowrap}
.hld-sp .sp-v{fill:var(--ink);font-size:.8125rem;font-weight:600}