/* =====================================================================
   LaneArc · stylesheet
   One quiet surface system, one action colour, one memorable thing:
   the big condensed numerals a coach reads at arm's length on deck.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --canvas: #f3f6f8;
  --surface: #ffffff;
  --surface-2: #eef2f5;
  --surface-3: #e3e9ed;
  --ink: #10243a;
  --ink-2: #4a5b6a;
  --ink-3: #7c8b98;
  --line: #e2e8ec;
  --line-2: #d2dbe1;
  --primary: #0a7ea4;
  --primary-ink: #086b8c;
  --primary-soft: #e3f1f6;
  --on-primary: #ffffff;
  /* The product's own accent. A club can no longer set this: LaneArc owns the palette. */
  --accent: #c8102e;
  --brand: var(--accent);
  --on-brand: #ffffff;
  --water: var(--primary);
  --water-soft: var(--primary-soft);
  --amber: #b96a00;
  --amber-soft: #fbf0dc;
  --green: #1b7f4e;
  --green-soft: #e1f3e8;
  --danger: #c2383a;
  --danger-soft: #fbe3e3;
  --peak: #6b4bb8;
  --deck: #0b1620;
  --deck-2: #142230;
  --deck-3: #1c2e40;
  --on-deck: #f3f7f9;
  --on-deck-2: #93a6b5;
  --focus: #0a7ea4;
  --squad: var(--primary);
  --squad-soft: var(--primary-soft);
  --i-rec-bg: #e9eef1; --i-rec-fg: #3b4a56;
  --i-tech-bg: #dde9f7; --i-tech-fg: #174a80;
  --i-aer-bg: #d8f0ea; --i-aer-fg: #0f5a4a;
  --i-aerp-bg: #bfe6da; --i-aerp-fg: #084537;
  --i-th-bg: #fde6cb; --i-th-fg: #8a4300;
  --i-rp-bg: #fbdada; --i-rp-fg: #8f0b21;
  --i-spd-bg: #e8dff7; --i-spd-fg: #4c2384;
  --i-gly-bg: #f3c8c8; --i-gly-fg: #6d0000;
  --shadow: 0 1px 2px rgba(16, 36, 58, .04), 0 2px 10px rgba(16, 36, 58, .05);
  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --tap: 44px;
  --motion: 160ms;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Barlow Condensed', 'Arial Narrow', var(--font-ui);
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0b1217; --surface: #141c23; --surface-2: #1c262e; --surface-3: #26323b;
    --ink: #eaf0f4; --ink-2: #aebcc7; --ink-3: #7f8e9b; --line: #243039; --line-2: #2f3d48;
    --primary: #4cb7db; --primary-ink: #7fd0ea; --primary-soft: #123340; --on-primary: #06121a;
    --accent: #e4374f;
    --amber: #e9b35c; --amber-soft: #3a2a10; --green: #5ccb8e; --green-soft: #12331f; --danger: #ff7b7b; --danger-soft: #45191c; --peak: #a48be8;
    --deck: #070e14; --deck-2: #111c26; --deck-3: #182636; --focus: #4cb7db;
    --i-rec-bg: #2a3538; --i-rec-fg: #c4d0ce; --i-tech-bg: #1a3350; --i-tech-fg: #a9cbf1; --i-aer-bg: #123d34; --i-aer-fg: #9fe1cf;
    --i-aerp-bg: #0e4d40; --i-aerp-fg: #b5f0df; --i-th-bg: #4a2a08; --i-th-fg: #ffcf9a; --i-rp-bg: #4c1119; --i-rp-fg: #ffb3bd;
    --i-spd-bg: #36225a; --i-spd-fg: #d9c7f5; --i-gly-bg: #4d1010; --i-gly-fg: #ffb0b0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0b1217; --surface: #141c23; --surface-2: #1c262e; --surface-3: #26323b;
  --ink: #eaf0f4; --ink-2: #aebcc7; --ink-3: #7f8e9b; --line: #243039; --line-2: #2f3d48;
  --primary: #4cb7db; --primary-ink: #7fd0ea; --primary-soft: #123340; --on-primary: #06121a;
  --accent: #e4374f;
  --amber: #e9b35c; --amber-soft: #3a2a10; --green: #5ccb8e; --green-soft: #12331f; --danger: #ff7b7b; --danger-soft: #45191c; --peak: #a48be8;
  --deck: #070e14; --deck-2: #111c26; --deck-3: #182636; --focus: #4cb7db;
  --i-rec-bg: #2a3538; --i-rec-fg: #c4d0ce; --i-tech-bg: #1a3350; --i-tech-fg: #a9cbf1; --i-aer-bg: #123d34; --i-aer-fg: #9fe1cf;
  --i-aerp-bg: #0e4d40; --i-aerp-fg: #b5f0df; --i-th-bg: #4a2a08; --i-th-fg: #ffcf9a; --i-rp-bg: #4c1119; --i-rp-fg: #ffb3bd;
  --i-spd-bg: #36225a; --i-spd-fg: #d9c7f5; --i-gly-bg: #4d1010; --i-gly-fg: #ffb0b0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .3);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.45; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none; overflow-x: hidden;
}
#root { min-height: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--primary-ink); }
.num { font-variant-numeric: tabular-nums; }
.display { font-weight: 700; letter-spacing: -.015em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 13.5px; }
.note { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h-display { font-size: 24px; }
.h-section { font-size: 17px; }
.h-mini { font-size: 15.5px; }
.kicker, .section-label { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.center { text-align: center; }

/* ---------- frame ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.topbar-inner { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 52px; padding: 0 8px 0 14px; gap: 8px; }
.topbar-inner.has-back { padding-left: 4px; }
.topbar .titles { min-width: 0; }
.topbar .title { font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.topbar .right { justify-self: end; display: flex; align-items: center; gap: 2px; }
.iconbtn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); border-radius: 12px; display: grid; place-items: center; padding: 0; }
/* Only where there is a real pointer: on a phone :hover sticks after a tap, and a light
   surface tint left behind on the dark Deck reads as a white blob over the header. */
@media (hover: hover) { .iconbtn:hover { background: var(--surface-2); } }
.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn.dark { color: var(--ink-2); }
.menu { position: relative; }
/* Anchored to the button's right edge. The width is capped to the viewport so it can never be
   pushed off the screen, whatever the button's own position turns out to be. */
.menu-list { position: absolute; right: 0; top: 46px; background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: 0 8px 30px rgba(16, 36, 58, .16); border: 1px solid var(--line); min-width: min(230px, calc(100vw - 32px)); max-width: calc(100vw - 24px); z-index: 30; display: grid; padding: 6px; }
.menu-list button { border: 0; background: transparent; text-align: left; padding: 11px 12px; border-radius: 9px; font-weight: 500; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.menu-list button:hover { background: var(--surface-2); }
.menu-list button.danger { color: var(--danger); }
.menu-list .mi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rope { display: none; }

main.page {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto; min-width: 0;
  padding-inline: 16px; padding-block: 14px calc(84px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 14px; align-content: start;
}
main.page > * { min-width: 0; }
main.page.narrow { max-width: 480px; }

/* squad context row under the title */
.ctxbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 720px; margin: 0 auto; padding: 0 12px 8px 14px; }
.ctx-right { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.squadchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px 6px 10px; min-height: 36px; font-weight: 600; font-size: 14px; max-width: 100%; }
.squadchip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--squad); flex: none; }
.squadchip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); }
.squadchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squadchip .chip-note { font-weight: 500; color: var(--ink-3); font-size: 12.5px; }
.squadchip.sm { min-height: 32px; font-size: 13.5px; padding: 4px 10px 4px 9px; }
.readonly { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.readonly svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.syncchip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; padding: 4px 6px; border-radius: 8px; min-height: 32px; white-space: nowrap; }
.syncchip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.syncchip.s-synced { color: var(--green); }
.syncchip.s-local { color: var(--ink-3); }
.syncchip.s-syncing i { animation: pulse 1s ease-in-out infinite; }
.syncchip.s-waiting, .syncchip.s-offline { color: var(--amber); }
.syncchip.s-offline i { background: transparent; border: 2px solid currentColor; }
.syncchip.s-conflict { color: var(--danger); }
@keyframes pulse { 50% { opacity: .3; } }

/* tab bar: four quiet tabs */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar-inner { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.tabbar button { border: 0; background: transparent; color: var(--ink-3); min-height: 58px; display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; font-weight: 600; }
.tabbar button .ic { position: relative; display: grid; place-items: center; }
.tabbar .tabdot { position: absolute; top: -1px; right: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--surface); }
.tabbar button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion) ease; }
.tabbar button:active svg { transform: scale(.92); }
.tabbar button[aria-current="page"] { color: var(--primary-ink); }
.tabbar button[aria-current="page"] svg { fill: var(--primary-soft); }

/* Icons. The floor every inline icon lands on, so one dropped into a container
   with no svg rule of its own still has a size and a stroke rather than the SVG
   default of 300x150 filled black. Every container rule below is more specific
   and overrides it. */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- primitives ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.card.flat { box-shadow: none; }
.stack { display: grid; gap: 12px; }
.stack-tight { display: grid; gap: 8px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform .08s ease, background var(--motion) ease, filter var(--motion) ease;
}
.btn:active { transform: scale(.98); }
.btn:hover { background: var(--surface-2); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.big { min-height: 52px; font-size: 16px; border-radius: 14px; }
.btn.big svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1; }
.btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn.primary:hover { filter: brightness(1.06); background: var(--primary); }
.btn.tonal { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.btn.tonal:hover { filter: brightness(.98); background: var(--primary-soft); }
.btn.squad { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.btn.block { width: 100%; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--primary-ink); min-height: 40px; padding-inline: 8px; }
.btn.quiet:hover { background: var(--primary-soft); }
.btn.danger { color: var(--danger); border-color: var(--line-2); }
.btn.danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.danger-solid:hover { background: var(--danger); filter: brightness(1.06); }
.btn.sm { min-height: 38px; padding-inline: 12px; font-size: 13.5px; border-radius: 10px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 120px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); vertical-align: middle; white-space: nowrap; }
.pill.water { background: var(--primary-soft); color: var(--primary-ink); }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.squad { background: var(--squad); color: #fff; }
.pill.state-planned { background: var(--surface-2); color: var(--ink-2); }
.pill.state-modified { background: var(--amber-soft); color: var(--amber); }
.pill.state-in_progress { background: var(--primary-soft); color: var(--primary-ink); }
.pill.state-completed { background: var(--green-soft); color: var(--green); }
.pill.state-not_run { background: var(--danger-soft); color: var(--danger); }
.chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; background: var(--i-rec-bg); color: var(--i-rec-fg); white-space: nowrap; }
.chip.i-rec { background: var(--i-rec-bg); color: var(--i-rec-fg); }
.chip.i-tech { background: var(--i-tech-bg); color: var(--i-tech-fg); }
.chip.i-aer { background: var(--i-aer-bg); color: var(--i-aer-fg); }
.chip.i-aerp { background: var(--i-aerp-bg); color: var(--i-aerp-fg); }
.chip.i-th { background: var(--i-th-bg); color: var(--i-th-fg); }
.chip.i-rp { background: var(--i-rp-bg); color: var(--i-rp-fg); }
.chip.i-spd { background: var(--i-spd-bg); color: var(--i-spd-fg); }
.chip.i-gly { background: var(--i-gly-bg); color: var(--i-gly-fg); }
.rolebadge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.rolebadge.admin { background: var(--primary-soft); color: var(--primary-ink); }
.rolebadge.head_coach { background: var(--green-soft); color: var(--green); }
.rolebadge.waiting { background: var(--amber-soft); color: var(--amber); }

.banner { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner.amber { background: var(--amber-soft); color: var(--amber); }
.banner.danger { background: var(--danger-soft); color: var(--danger); }
.banner.water { background: var(--primary-soft); color: var(--primary-ink); }
.banner .btn { min-height: 36px; }

.field { display: grid; gap: 6px; }
.field > label, .field > .lab { font-size: 13px; font-weight: 600; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], textarea, select {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px; font-size: 16px; min-height: 46px;
}
input:focus, textarea:focus, select:focus { border-color: var(--primary); }
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.error { color: var(--danger); font-size: 14px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: center; }
.stat .v { font-family: var(--font-num); font-weight: 700; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.stat .k { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 380px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* lists */
.list { display: grid; gap: 8px; }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: inherit;
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); min-height: 56px; position: relative;
  transition: transform .08s ease;
}
.item:active { transform: scale(.995); }
.item:hover { background: var(--surface); border-color: var(--line-2); }
.item.today, .item.phase.today { border-color: var(--squad); box-shadow: 0 0 0 1px var(--squad), var(--shadow); }
.item .r svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item .s.tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.item .t { font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.item .t .d { font-weight: 500; color: var(--ink-2); margin-left: 6px; font-size: 14px; }
.item .s { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.item .r { text-align: right; }
.item .r .km { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.item .r .rs { font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.item.logged .r .km { color: var(--green); }
.item.load-up, .item.load-peak, .item.load-down, .item.load-camp { border-left: 4px solid var(--line-2); }
.item.load-up { border-left-color: var(--primary); }
.item.load-peak { border-left-color: var(--peak); }
.item.load-down { border-left-color: var(--green); }
.item.load-camp { border-left-color: var(--amber); }
.bar { height: 4px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin-top: 8px; grid-column: 1 / -1; }
.bar > i { display: block; height: 100%; background: var(--green); border-radius: 4px; }

/* ---------- landing (Home) ---------- */
main.page.landing { padding-top: 10px; gap: 12px; }
.landing .section-label { margin-top: 14px; }
.landing-head { padding-bottom: 8px; }
.landing-head { display: grid; gap: 4px; padding: 6px 2px 4px; }
.landing-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-bottom: 10px; }
.brandline { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--ink-2); }
.greeting { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.whereami { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.landing-head .squadchip { justify-self: start; margin-top: 10px; }
.notice { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 12px; padding: 11px 12px 11px 14px; min-height: 50px; box-shadow: var(--shadow); border-left: 4px solid var(--primary); }
.notice.amber { border-left-color: var(--amber); }
.notice.danger { border-left-color: var(--danger); }
.notice.water { border-left-color: var(--primary); }
.notice b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.notice small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.notice svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.attention { display: grid; gap: 8px; }
.card.next { padding: 18px 18px 16px; border-radius: var(--radius-lg); display: grid; gap: 10px; }
.card.next.today { border-color: var(--squad); box-shadow: 0 0 0 1px var(--squad), var(--shadow); }
.next-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.next-when .when { font-weight: 700; color: var(--ink); }
.next-title { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: pretty; }
.next-facts { display: flex; justify-content: space-between; gap: 8px 12px; margin: 4px 0 2px; flex-wrap: wrap; }
.next-facts > div { display: grid; gap: 1px; }
.next-facts > div.lead dd { font-size: 40px; }
.next-facts dt { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.next-facts dd { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: 0; display: flex; align-items: baseline; gap: 2px 3px; white-space: nowrap; }
.next-facts dd small { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.next-facts .fact-time.over dd { color: var(--danger); } .next-facts .fact-time.tight dd { color: var(--amber); }
.next-fit { font-size: 13.5px; font-weight: 600; margin: 2px 0 0; }
.next-fit.over { color: var(--danger); } .next-fit.tight { color: var(--amber); }
.next-progress { font-size: 13.5px; color: var(--primary-ink); font-weight: 600; }
.next-actions { display: grid; gap: 8px; margin-top: 6px; }
.next-actions.two { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.next-actions.two .btn { padding-inline: 10px; font-size: 15px; }
.card.next.empty { gap: 8px; }
.upcoming { display: grid; gap: 8px; }
.uprow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 12px; padding: 10px 14px 10px 12px; min-height: 56px; box-shadow: var(--shadow); }
.uprow:active { transform: scale(.995); }
.uprow .d { display: grid; line-height: 1.05; }
.uprow .d b { font-size: 14px; font-weight: 700; }
.uprow .d small { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.uprow .f { display: grid; min-width: 0; }
.uprow .f b { font-weight: 600; font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uprow .f small { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.uprow .k { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1; text-align: right; }
.uprow .k small { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* week at a glance */
.weekstrip { display: grid; gap: 8px; margin-top: 6px; }
.weekstrip .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.weekstrip .day { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 12px; padding: 8px 2px 7px; display: grid; justify-items: center; gap: 3px; min-height: 66px; box-shadow: var(--shadow); }
.weekstrip .day .dn { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.weekstrip .day .dd { font-family: var(--font-num); font-weight: 700; font-size: 20px; line-height: 1; color: var(--ink); }
.weekstrip .day .dots { display: flex; gap: 3px; height: 8px; align-items: center; }
.weekstrip .day .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.weekstrip .day .dots i.edited { background: var(--amber); }
.weekstrip .day .dots i.logged { background: var(--green); }
.weekstrip .day.is-today { border-color: var(--squad); box-shadow: 0 0 0 1px var(--squad), var(--shadow); }
.weekstrip .day.off { background: transparent; border-color: transparent; box-shadow: none; }
.weekstrip .day.off .dd { color: var(--ink-3); font-weight: 600; }
.weekstrip .day:disabled { cursor: default; }
.weekstrip .day:not(:disabled):active { transform: scale(.97); }
.weekline { font-size: 13px; color: var(--ink-3); }

/* hero (kept for screens that still use it) */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; padding: 16px 16px 14px; }
.hero .kicker { grid-column: 1 / -1; }
.hero .h-display { grid-column: 1; }
.hero .km { font-family: var(--font-num); font-weight: 700; font-size: 38px; line-height: .95; font-variant-numeric: tabular-nums; grid-column: 2; text-align: right; }
.hero .km small { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 4px; white-space: nowrap; }
.hero .muted, .hero .actions, .hero .tags, .hero p { grid-column: 1 / -1; }
.hero .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hero .actions { margin-top: 6px; display: grid; gap: 8px; }
.hero .actions .btn.big { width: 100%; }
.hero .actions .sub { display: flex; gap: 8px; margin: 0; }
.hero .actions .sub .btn { flex: 1 1 100px; min-height: 42px; }
.hero.empty .h-display { grid-column: 1 / -1; }

/* ---------- squad picker ---------- */
.squad-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; width: 100%; text-align: left; border: 1px solid var(--line); color: inherit; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 14px 20px; position: relative; overflow: hidden; }
.squad-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--squad); }
.squad-tile .t { font-weight: 700; font-size: 18px; line-height: 1.1; letter-spacing: -.01em; }
.squad-tile .s { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.squad-tile .code { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-num); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: #fff; background: var(--squad); padding: 4px 9px; border-radius: 6px; }
.squad-tile.active { box-shadow: 0 0 0 1px var(--squad), var(--shadow); border-color: var(--squad); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.swatch-line input[type="color"] { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; }

/* ---------- session ---------- */
.session-head { display: grid; gap: 6px; }
.session-head .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.session-head .h-display { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.editctx { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ctx-code { font-family: var(--font-num); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; background: var(--squad); color: #fff; padding: 2px 7px; border-radius: 5px; }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; }
.stepper button { height: 54px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 28px; font-weight: 500; line-height: 1; }
.stepper button:hover { background: var(--surface-3); }
.stepper .val { position: relative; display: grid; align-items: center; }
.stepper input { width: 100%; height: 54px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); text-align: center; font-family: var(--font-num); font-weight: 700; font-size: 34px; padding: 0 44px 0 12px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; min-height: 0; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--ink-3); pointer-events: none; }
.stepper.draft input { border-color: var(--amber); }
.preview { border: 1px solid var(--amber); background: var(--amber-soft); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; color: var(--ink); }
.preview ul { display: grid; gap: 4px; font-size: 14.5px; }
.preview li { display: flex; justify-content: space-between; gap: 10px; }
.preview li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview.bad { border-color: var(--danger); background: var(--surface); }
.summary-line { display: flex; gap: 10px 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.summary-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lockbox { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--green-soft); color: var(--green); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14px; }
.setlist { display: grid; gap: 8px; }
.setrow { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; position: relative; }
.setrow.scale { border-left: 4px solid var(--primary); }
.setrow.fixed { border-left: 4px solid var(--line-2); }
.setrow.balance { border-left: 4px solid var(--amber); background: var(--amber-soft); }
.setrow.changed .reps { color: var(--primary-ink); }
.setrow .lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.setrow .badge { font-size: 10.5px; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-3); text-transform: uppercase; }
.setrow.scale .badge { background: var(--primary-soft); color: var(--primary-ink); }
.setrow .reps { font-family: var(--font-num); font-weight: 700; font-size: 25px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.setrow .reps .old { color: var(--ink-3); text-decoration: line-through; font-weight: 500; margin-right: 6px; }
.setrow .reps .x { font-weight: 500; color: var(--ink-2); margin: 0 3px; }
.setrow .stroke { overflow-wrap: anywhere; font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--ink-2); margin-left: 8px; }
.setrow .side { text-align: right; display: grid; gap: 4px; justify-items: end; align-content: start; }
.setrow .m { font-family: var(--font-num); font-weight: 600; font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.setrow .rest { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.setrow .notes { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.setrow .notes .set { color: var(--ink); }
.setrow .notes .focus::before { content: '\2192  '; color: var(--ink-3); }
.total { display: grid; grid-template-columns: 1fr auto; align-items: center; background: var(--deck); color: var(--on-deck); border-color: var(--deck); }
.total .k { font-size: 13px; color: var(--on-deck-2); }
.total .v { font-family: var(--font-num); font-weight: 700; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.total .d { font-size: 13px; color: var(--on-deck-2); margin-top: 4px; }
.logged-box { border-left: 4px solid var(--green); display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.pain { color: var(--danger); font-weight: 600; }

/* ---------- time: planned minutes, send-offs, the deck clock ---------- */
.fitline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 2px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.fitline .ft b { color: var(--ink); font-family: var(--font-num); font-size: 19px; font-weight: 700; }
.fitline .fl { font-weight: 700; }
.fitline .infobtn { margin-left: auto; }
.fitline.fits { background: var(--green-soft); } .fitline.fits .fl { color: var(--green); }
.fitline.tight { background: var(--amber-soft); } .fitline.tight .fl { color: var(--amber); }
.fitline.over { background: var(--danger-soft); } .fitline.over .fl { color: var(--danger); }
.prevfit { font-weight: 600; }
.prevfit.fits { color: var(--green); } .prevfit.tight { color: var(--amber); } .prevfit.over { color: var(--danger); }
.setrow .sendoff { font-family: var(--font-num); font-weight: 700; font-size: 20px; line-height: 1; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.setrow .plan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.setrow .plan .when { font-weight: 600; color: var(--ink-2); }
.setrow .plan .tnote { color: var(--amber); }
.total .tline { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--deck-3); padding-top: 8px; margin-top: 8px; font-size: 13px; color: var(--on-deck-2); }
.total .tline b { color: var(--on-deck); font-size: 21px; font-weight: 700; white-space: nowrap; }
.total .tline.fl.fits b { color: #7fe0a8; } .total .tline.fl.tight b { color: #f2c26b; } .total .tline.fl.over b { color: #ff9a9a; }
.timepair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.timepair label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.fitlist { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 14.5px; }
.fitlist li { display: flex; justify-content: space-between; gap: 10px; }
.fitlist b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The sticky top of Deck mode. Every pixel here is a pixel of the set list the coach cannot
   see, so it is one band: exit, clock, pace, overflow on one row, the progress bar and its
   figures under it. Before the clock starts the clock's room goes to the session's name. */
.deck-top { display: block; background: var(--deck); border-bottom: 1px solid var(--deck-2); }
.deck-bar { display: flex; align-items: center; gap: 8px; padding: 5px 4px 5px 6px; }
.deck-bar .clk { font-family: var(--font-num); font-weight: 700; font-size: 33px; line-height: 1; font-variant-numeric: tabular-nums; }
.deck-bar .pace { display: grid; gap: 1px; flex: 1; min-width: 0; font-size: 11.5px; color: var(--on-deck-2); }
/* The headline never wraps; the detail under it may take a second line but never a third.
   A focus line free to wrap to four is what used to push the set list off the screen. */
.deck-bar .pace b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-bar .pace span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.3; }
.deck-bar .pace b { font-size: 16px; color: var(--on-deck); font-weight: 700; line-height: 1.15; }
.deck-bar .pace b.t { font-size: 18px; letter-spacing: -.01em; }
.deck-bar .pace b.msg { white-space: normal; }
/* Prefixed: a bare `ahead` collides with .ahead, the history row, which is a grid and
   silently took the bar's layout over whenever a session was running ahead of plan. */
.deck-top.pace-behind .pace b { color: #ffb36b; } .deck-top.pace-ahead .pace b { color: #7fe0a8; }
.deck-bar .btn { min-height: 44px; background: var(--deck-2); border-color: var(--deck-3); color: var(--on-deck); flex: none; }
.deck-bar .clk-btn { display: grid; justify-items: start; gap: 1px; background: transparent; border: 0; color: inherit; padding: 0; text-align: left; flex: none; cursor: pointer; }
.deck-bar .clk-btn small { font-size: 10.5px; color: var(--on-deck-2); white-space: nowrap; }
.deck-bar .menu { flex: none; align-self: center; }
/* The figures ride under the progress bar rather than taking a band of their own. */
.deck-tally { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 12px 5px; font-size: 12px; color: var(--on-deck-2); }
.deck-tally b { font-family: var(--font-num); font-size: 15px; color: var(--on-deck); font-variant-numeric: tabular-nums; }
.deck-tally .fitbtn { background: #b96a00; border-color: #b96a00; color: #fff; flex: none; margin-left: auto; }
.deck-top .clockbtn { background: var(--squad); border-color: var(--squad); color: #fff; }
.deck-top .bigstart { min-height: 56px; font-size: 19px; font-weight: 700; gap: 10px; width: calc(100% - 24px); margin: 2px 12px 12px; justify-content: center; box-shadow: 0 0 0 0 var(--squad); animation: startpulse 2.2s ease-out infinite; }
.deck-top .bigstart svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
@keyframes startpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--squad) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .deck-top .bigstart { animation: none; } }
.deck-row .clk-at { font-size: 12px; font-weight: 600; color: var(--on-deck-2); font-variant-numeric: tabular-nums; }
.deck-row .rest.send { font-size: 34px; font-weight: 700; }

/* ---------- deck mode ---------- */
.deck { position: fixed; inset: 0; z-index: 50; background: var(--deck); color: var(--on-deck); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.deck-exit { width: auto; flex: none; padding: 0 9px 0 6px; gap: 2px; display: inline-flex; align-items: center; border: 1px solid var(--deck-3); color: var(--on-deck); font-weight: 600; font-size: 13.5px; border-radius: 10px; }
.deck-exit svg { width: 19px; height: 19px; }
.deck-progress { height: 4px; background: var(--deck-2); }
.deck-progress i { display: block; height: 100%; background: var(--squad); transition: width .25s ease; }
/* A block, not a grid: Chrome sizes grid rows inside a scrolling flex item too short. */
.deck-list { flex: 1; overflow-y: auto; padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); display: block; max-width: 760px; width: 100%; margin: 0 auto; }
.deck-list > * + * { margin-top: 8px; }
/* A div, not a <button>: Chrome sizes a multi-row grid inside a button too short and hides the last row. */
.deck-row { border: 0; text-align: left; color: inherit; background: var(--deck-2); border-radius: 16px; padding: 12px 14px; display: block; width: 100%; border-left: 6px solid var(--deck-3); transition: opacity .15s ease; cursor: pointer; user-select: none; -webkit-user-select: none; min-height: 64px; }
.deck-row .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.deck-row .main { display: block; min-width: 0; }
.deck-row .lbl, .deck-row .reps, .deck-row .pres { display: block; }
.deck-row.scale { border-left-color: var(--squad); }
.deck-row .reps { font-family: var(--font-num); font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; white-space: normal; }
.deck-row .reps .x { font-weight: 500; color: var(--on-deck-2); margin: 0 4px; font-size: 32px; }
.deck-row .reps .stroke { font-family: var(--font-ui); font-weight: 500; font-size: 19px; color: var(--on-deck-2); margin-left: 10px; display: inline-block; white-space: normal; }
.deck-row .lbl { font-size: 15px; color: var(--on-deck-2); font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.deck-row .in .lbl { display: flex; }
.deck-row .lbl .chip { font-size: 12px; }
.deck-row .pres { grid-column: 1 / -1; font-size: 17.5px; line-height: 1.3; }
.deck-row .pres .focus { color: var(--on-deck-2); }
.deck-row .side { text-align: right; display: grid; gap: 2px; justify-items: end; }
.deck-row .rest { font-family: var(--font-num); font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; }
.deck-row .m { font-size: 14px; color: var(--on-deck-2); font-variant-numeric: tabular-nums; }
.deck-row.done { opacity: .38; }
.deck-row.done .reps .n { text-decoration: line-through; text-decoration-thickness: 3px; }
.deck-row:active { transform: scale(.985); background: var(--deck-3); }
.deck-row.next { outline: 2px solid var(--squad); outline-offset: -2px; }
.deck-row .nextmark { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--deck); background: var(--squad); border-radius: 5px; padding: 2px 6px; }
.deck-row.balance { border-left-color: var(--amber); }
.deck-foot { display: flex; gap: 10px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--deck-2); }
.deck-foot .btn { flex: 1; min-height: 48px; background: var(--deck-2); border-color: var(--deck-2); color: var(--on-deck); padding-inline: 8px; }
.deck-foot .btn.squad { background: var(--squad); border-color: var(--squad); color: #fff; }
.deck-foot .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.deck-foot .btn.quiet-deck { flex: 0 1 auto; background: transparent; border-color: transparent; color: var(--on-deck-2); font-size: 13.5px; }

/* ---------- log form ---------- */
.scale-btns { display: grid; gap: 6px; grid-template-columns: repeat(5, 1fr); }
.scale-btns button { min-height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-family: var(--font-num); font-weight: 700; font-size: 20px; }
.scale-btns button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.scale-cap { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; }
.switch button { width: 52px; height: 30px; border-radius: 999px; border: 0; background: var(--line-2); position: relative; flex: none; transition: background var(--motion) ease; }
.switch button::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left var(--motion) ease; }
.switch button[aria-checked="true"] { background: var(--primary); }
.switch button[aria-checked="true"]::after { left: 25px; }
.switch .lab { font-size: 15.5px; font-weight: 500; }

/* ---------- monitoring ---------- */
.phasebars { display: grid; gap: 10px; }
.pb { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-size: 13.5px; }
.pb .tracks { display: grid; gap: 3px; }
.pb .track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; position: relative; }
.pb .track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.pb .track > i.p { background: var(--primary); opacity: .4; }
.pb .track > i.a { background: var(--green); }
.pb .lab { font-weight: 600; }
.pb .nums { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legend-line { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.legend-line i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.legend-line i.p { background: var(--primary); opacity: .4; }
.legend-line i.a { background: var(--green); }
.tablewrap { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; }
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.notes { white-space: normal; min-width: 180px; max-width: 320px; font-size: 13px; color: var(--ink-2); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--surface-2); }
tr.unlogged td { color: var(--ink-3); }
.metrics { width: 100%; min-width: 0; font-size: 13px; }
.metrics th, .metrics td { padding: 6px 6px; white-space: nowrap; }
.metrics th:first-child, .metrics td:first-child { white-space: normal; }
.mcard { display: grid; gap: 4px; width: 100%; text-align: left; border: 1px solid var(--line); color: inherit; background: var(--surface); border-radius: 12px; padding: 11px 14px; box-shadow: var(--shadow); border-left: 4px solid var(--green); }
.mcard.unlogged { border-left-color: var(--line-2); }
.mcard:active { transform: scale(.995); }
.mcard .row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.mcard .row2 { font-size: 15px; line-height: 1.25; }
.mcard .row3 { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-num); font-weight: 700; font-size: 19px; margin-top: 2px; }
.mcard .row3 span { display: grid; }
.mcard .row3 small { font-family: var(--font-ui); font-weight: 500; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0; }
.mcard .row3 .var { color: var(--amber); }
.mcard .row4 { font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.wcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.wcard-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 11px 14px; min-height: 52px; }
.wcard-head .t { font-weight: 700; font-size: 16px; line-height: 1.15; }
.wcard-head .s { font-size: 12.5px; color: var(--ink-2); }
.wcard-head .nums { grid-column: 1; display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-num); font-weight: 700; font-size: 18px; }
.wcard-head .nums span { display: grid; }
.wcard-head .nums small { font-family: var(--font-ui); font-weight: 500; font-size: 10.5px; color: var(--ink-3); }
.wcard-head .chev { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); transition: transform var(--motion); }
.wcard-head .chev svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wcard.open .chev { transform: rotate(180deg); }
.wcard-body { display: grid; gap: 6px; padding: 0 10px 10px; }
.filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filterbar .btn svg { width: 18px; height: 18px; }
.chips { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; width: 100%; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.fchip { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; min-height: 36px; }
.fchip.on { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.readiness { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); padding: 10px 12px; font-weight: 600; }
.readiness.ok { background: var(--green-soft); color: var(--green); }
.readiness.warn { background: var(--amber-soft); color: var(--amber); }
.readiness.bad { background: var(--danger-soft); color: var(--danger); }
.readiness svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- sheets, menus, info ---------- */
.sheet { position: fixed; inset: 0; z-index: 65; background: rgba(10, 22, 34, .55); display: grid; place-items: end center; padding: 10px; }
.sheet-card { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: 18px; max-width: 520px; width: 100%; display: grid; gap: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); max-height: 82vh; overflow: auto; animation: rise var(--motion) ease-out; }
.sheet-card.wide { max-width: 640px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sheet-head .iconbtn { margin: -6px -8px -6px 0; }
.sheet.confirm { z-index: 80; place-items: center; }
.sheet.confirm .sheet-card { margin-bottom: 0; animation: fade .15s ease-out; }
.confirm-body { font-size: 15px; line-height: 1.45; color: var(--ink-2); display: grid; gap: 6px; }
.confirm-body b { color: var(--ink); }
.sheet.confirm .actions .btn { min-height: 48px; }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.infobtn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink-3); padding: 6px; border-radius: 8px; min-width: 32px; min-height: 32px; vertical-align: middle; }
.infobtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.infobtn.labelled { color: var(--primary-ink); font-weight: 600; font-size: 13.5px; padding: 6px 8px; }
.infobtn:hover { background: var(--surface-2); color: var(--ink); }
.infolines { display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.infolines li { padding-left: 14px; position: relative; }
.infolines li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 3px; }
.segmented button { border: 0; background: transparent; color: var(--ink-2); border-radius: 10px; min-height: 38px; font-weight: 600; font-size: 14px; padding: 0 8px; transition: background var(--motion) ease, color var(--motion) ease; }
.segmented button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.segmented.sm button { min-height: 34px; font-size: 13px; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.steps li { display: grid; justify-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); position: relative; }
.steps li .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: 12.5px; }
.steps li .n svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.steps li.now { color: var(--ink); }
.steps li.now .n { background: var(--primary); color: var(--on-primary); }
.steps li.done .n { background: var(--green-soft); color: var(--green); }
.steps li:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 2px; background: var(--line); }
.steps li.done:not(:last-child)::after { background: var(--green); }
.empty-state { display: grid; gap: 6px; }
.empty-state .actions { margin-top: 4px; }

/* ---------- people, settings ---------- */
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 11px 0; border-bottom: 1px solid var(--line); min-height: 58px; }
.person:last-child { border-bottom: 0; }
.person .nm { font-weight: 600; font-size: 15.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.person .ac { font-size: 13px; color: var(--ink-2); }
.person .go { color: var(--ink-3); grid-column: 2; grid-row: 1 / span 3; }
/* the verified email is secondary: it tells two coaches with the same name apart and nothing more (review 3) */
.person .ac.faint { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.person .go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.levelrow { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.levelrow .lab { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.levelrow .lab .ctx-code { font-size: 11px; }
.code-big { font-family: var(--font-num); font-weight: 700; font-size: 36px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }
.member { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.waitbox { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 28px 18px; }
.waitbox .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--amber-soft); color: var(--amber); display: grid; place-items: center; }
.waitbox .ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.statusrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; }
.audit { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.audit:last-child { border-bottom: 0; }
.audit .when { font-size: 12px; color: var(--ink-3); }
.help-list .item .t { font-size: 15.5px; }
.help-article { display: grid; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.help-article h3 { font-size: 16px; margin-top: 6px; }
.help-article ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; color: var(--ink-2); }
.legend-list { display: grid; gap: 8px; }
.legend-list li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: start; font-size: 14.5px; }
.bullets { display: grid; gap: 8px; padding-left: 18px; list-style: disc; font-size: 15px; color: var(--ink-2); }
details { border-top: 1px solid var(--line); padding-top: 10px; }
summary { cursor: pointer; font-weight: 600; font-size: 15px; padding-block: 6px; list-style: none; display: flex; justify-content: space-between; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--ink-3); font-weight: 700; }
details[open] summary::after { content: '\2212'; }
.signin-brand { display: flex; align-items: center; gap: 14px; }

/* ---------- programme management, diffs, import ---------- */
.revbanner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.revbanner .num { font-weight: 700; font-size: 15px; }
.revbanner button.pill { border: 0; cursor: pointer; }
.revrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.draftcard { border-left: 4px solid var(--primary); }
.choice { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line-2); color: inherit; width: 100%; cursor: pointer; min-height: 64px; }
.choice:disabled { opacity: .5; cursor: not-allowed; }
.choice:hover { border-color: var(--primary); }
.impact .stat.wide { grid-column: 1 / -1; }
.impact .stat.wide .v { font-size: 22px; }
.weekdiff { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.diffrow { padding: 0; overflow: hidden; border-left: 4px solid var(--line-2); }
.diffrow.danger { border-left-color: var(--danger); }
.diffrow.green { border-left-color: var(--green); }
.diffrow.amber { border-left-color: var(--amber); }
.diffhead { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 10px 12px; min-height: 48px; align-items: center; }
.diffhead small { display: block; color: var(--ink-2); font-size: 12.5px; }
.diffhead > .small { grid-column: 1; }
.diffhead .chev { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); }
.diffhead .chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.diffbody { padding: 0 12px 10px; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.old { color: var(--ink-3); text-decoration: line-through; }
.setdiff { padding: 4px 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; min-height: 36px; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }
.checks { display: grid; gap: 2px; }
.sticky-actions { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); background: var(--canvas); padding: 8px 0; z-index: 4; }
.issues { display: grid; gap: 6px; }
.issue { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 14px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.issue.error { background: var(--danger-soft); color: var(--danger); }
.issue.warning { background: var(--amber-soft); color: var(--amber); }
.issue .where { font-weight: 600; white-space: nowrap; }
.dropzone { border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 28px 16px; text-align: center; display: grid; gap: 8px; justify-items: center; background: var(--surface); position: relative; }
.dropzone.over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone > span { max-width: 100%; overflow-wrap: anywhere; }
.dropzone .h-section { font-size: 17px; }
.tagline { font-size: 16px; font-weight: 500; }
.cue { display: inline-block; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); margin-left: 6px; }

/* ---------- action bar: the session's primary action within thumb reach, above the tabs ---------- */
.actionbar { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 19; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 10px; }
.actionbar > .btn { flex: 1 1 0; }
.actionbar > .btn.tonal { flex: 0 0 auto; padding-inline: 18px; }
.actionbar > .btn.big { white-space: nowrap; }
main.page.has-actionbar { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }

/* ---------- feedback ---------- */
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--canvas); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; z-index: 60; box-shadow: 0 8px 30px rgba(0, 0, 0, .2); max-width: calc(100% - 32px); text-align: center; }
.skeleton { display: grid; gap: 10px; }
.sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 14px; }
.sk.hero { height: 190px; }
.sk.row { height: 56px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.tour { position: fixed; inset: 0; z-index: 70; background: rgba(10, 22, 34, .66); display: grid; place-items: end center; padding: 16px; }
.tour-card { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: 18px; max-width: 440px; width: 100%; display: grid; gap: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.tour-card .steps { display: flex; gap: 6px; }
.tour-card .steps i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.tour-card .steps i.on { background: var(--primary); }

/* ---------- text size preference ---------- */
html[data-size="large"] body { font-size: 17px; }
html[data-size="large"] .h-display { font-size: 28px; }
html[data-size="large"] .h-section { font-size: 20px; }
html[data-size="large"] .greeting { font-size: 34px; }
html[data-size="large"] .next-title { font-size: 26px; }
html[data-size="large"] .next-facts dd { font-size: 34px; }
html[data-size="large"] .setrow .reps { font-size: 28px; }
html[data-size="large"] .item .t { font-size: 18px; }
html[data-size="large"] .btn { min-height: 48px; font-size: 16px; }
html[data-size="large"] .scale-btns button { min-height: 48px; }
html[data-size="large"] .mcard .row3 { font-size: 21px; }
html[data-size="large"] .notice b { font-size: 16px; }
html[data-size="large"] .next-facts { gap: 6px 16px; }

/* ---------- squad timing ---------- */
.pacegrid { display: grid; gap: 8px; }
.pacerow { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 14px; }
.pacerow small { color: var(--ink-3); margin-left: 4px; }
.pacerow input { text-align: center; font-family: var(--font-num); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.allow { display: grid; gap: 12px; }


/* =====================================================================
   COMMERCIAL SYSTEM (6 Oct) · replaces the 5 Oct "friendly pass"
   Written against the Commercial UI/UX & Product Redesign Brief, Part II.
   The doctrine, in the order it is applied below:
     - Surfaces are flat. A quiet 1px boundary, or none. No 3px lip anywhere.
       Elevation is reserved for temporary layers: sheets, menus, confirmations.
     - One radius family: 12px controls, 16px cards, 22px sheets. No pill containers.
     - One dominant action per screen. Primary is filled; everything else surrenders.
     - The tab bar is navigation, flat and stable. The active tab is a brand-coloured
       label with a filled icon and a short rule above it, not a raised button.
     - Colour means something: product brand = identity, squad = context,
       green/amber/red = status. A club's colour never becomes an action or a status.
     - Status is never carried by colour alone. Every state has a word or a shape.
   ===================================================================== */
:root {
  /* radius family (brief 13.2) */
  --r-control: 12px;
  --r-card: 16px;
  --r-sheet: 22px;
  --radius-lg: var(--r-card);
  --radius: var(--r-card);
  --radius-sm: var(--r-control);
  --radius-xs: 8px;

  /* surfaces are flat: the shadow token is for temporary layers only */
  --shadow: none;
  --lift: 0 10px 34px rgba(16, 36, 58, .16), 0 2px 8px rgba(16, 36, 58, .08);
  --edge: var(--line);

  /* Type. Figtree and Barlow Condensed are the product faces. They are named first so
   * that self-hosted woff2 files are picked up the moment they are added to dist/fonts
   * (see SETUP.md). Until then the stack falls back to a deliberate, metrically close
   * system pairing, so the product looks the same offline as online and the brand never
   * changes silently on a poolside phone with no signal. (Brief 13.8, 14.5) */
  --font-ui: 'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-num: 'Barlow Condensed', 'Oswald', 'Roboto Condensed', 'Liberation Sans Narrow', 'Arial Narrow', var(--font-ui);
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow: none; --lift: 0 10px 34px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); }
}
:root[data-theme="dark"] { --shadow: none; --lift: 0 10px 34px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); }

h1, h2, h3 { font-weight: 700; }
.h-display { font-size: 23px; letter-spacing: -.02em; }
.h-section { font-size: 16.5px; letter-spacing: -.015em; }
.section-label { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.section-label small { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 8px; text-transform: none; white-space: nowrap; }
.kicker { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- surfaces: flat, quiet boundary, no lip ---------- */
.topbar { border-bottom: 1px solid var(--line); }
.topbar .title { font-weight: 700; }
.card, .item, .uprow, .stat, .squad-tile, .setrow, .mcard, .statusrow, .revbanner, .weekstrip .day {
  border-width: 1px; box-shadow: none;
}
.card { border-radius: var(--r-card); }
.card.flat { border-color: transparent; background: transparent; padding-inline: 0; }
/* "plain" lifts content out of a box entirely: used for articles and set sheets */
.card.plain { border: 0; background: transparent; padding: 0; }
.stat, .uprow, .item, .mcard, .setrow { border-radius: var(--r-control); }
.squad-tile { border-radius: var(--r-card); }
.card.next, .card.next.today { border-radius: var(--r-card); background: var(--surface); }

/* Context marker: the squad's colour is a stripe, never a fill or a tint. (Brief 13.9) */
.card.next.today, .item.today, .item.phase.today, .squad-tile.active {
  border-color: var(--line); box-shadow: inset 3px 0 0 var(--squad);
}
.weekstrip .day.is-today { border-color: var(--squad); box-shadow: inset 0 -3px 0 var(--squad); }
.weekstrip .day { border-radius: var(--r-control); box-shadow: none; }
.weekstrip .day.off { border-color: transparent; }
.squadchip { border: 1px solid var(--line-2); box-shadow: none; }

/* ---------- fields ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="time"], textarea, select {
  border: 1px solid var(--line-2); border-radius: var(--r-control); box-shadow: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--primary); }

/* ---------- buttons: one filled primary, everything else surrenders ---------- */
.btn {
  border-radius: var(--r-control); border: 1px solid var(--line-2); box-shadow: none;
  font-weight: 600; transition: background var(--motion) ease, border-color var(--motion) ease;
}
.btn:active { transform: scale(.985); box-shadow: none; }
.btn.big { border-radius: var(--r-control); min-height: 52px; font-weight: 700; }
.btn.sm { border-radius: 10px; }
.btn.primary, .btn.squad { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }
.btn.tonal { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.btn.quiet { border-color: transparent; background: transparent; }
.btn.danger { color: var(--danger); border-color: var(--line-2); background: transparent; }
.btn.danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn:disabled { box-shadow: none; transform: none; }
/* Deck keeps its own high-contrast buttons, sized for wet hands (brief 14.1) */
.deck .btn { border-width: 1px; border-radius: var(--r-control); box-shadow: none; min-height: 52px; }
.deck .btn.big { border-radius: var(--r-control); min-height: 60px; }
.deck .btn.sm { border-radius: 10px; min-height: 44px; }
.deck .btn.bigstart { min-height: 56px; }

/* ---------- status grammar: one chip, always with a word ---------- */
.pill { font-weight: 600; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; letter-spacing: .01em; }
.pill.squad { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill.squad::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--squad); margin-right: 5px; vertical-align: 0; }

/* ---------- summary band: one aligned row with separators, not four raised cards (brief 13.6) ---------- */
.band {
  display: flex; align-items: stretch; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
  overflow: hidden;
}
.band > * {
  flex: 1 1 0; min-width: 0; padding: 10px 8px; text-align: center;
  border-left: 1px solid var(--line); display: grid; align-content: center; gap: 3px;
}
.band > *:first-child { border-left: 0; }
.band .v { font-family: var(--font-num); font-weight: 700; font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.band .v small { font-family: var(--font-ui); font-weight: 600; font-size: 12px; color: var(--ink-3); letter-spacing: 0; margin-left: 1px; }
.band .k { font-size: 11px; color: var(--ink-3); line-height: 1.25; overflow-wrap: anywhere; }
.band.two > * { flex-basis: 50%; }
@media (max-width: 359px) { .band .v { font-size: 20px; } .band .k { font-size: 10.5px; } }

/* ---------- tab bar: flat and stable (brief 13.4) ---------- */
.tabbar { border-top: 1px solid var(--line); }
.tabbar-inner { padding: 0; gap: 0; }
.tabbar button {
  min-height: 56px; border-radius: 0; font-weight: 600; font-size: 11px; background: transparent;
  border-top: 2px solid transparent; transition: color var(--motion) ease, border-color var(--motion) ease;
}
.tabbar button[aria-current="page"] { background: transparent; color: var(--primary-ink); border-top-color: var(--primary); font-weight: 700; box-shadow: none; }
.tabbar button[aria-current="page"] svg { fill: var(--primary-soft); }
.tabbar .tabdot, .tabbar button[aria-current="page"] .tabdot { box-shadow: 0 0 0 2px var(--surface); }

/* ---------- temporary layers are the only things that lift ---------- */
.sheet-card { border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--lift); }
.sheet.confirm .sheet-card { border-radius: var(--r-sheet); }
.menu-list { box-shadow: var(--lift); border-radius: var(--r-control); }
.toast { border-radius: var(--r-control); box-shadow: var(--lift); }
.landing .row-between { flex-wrap: nowrap; }
.landing .row-between .section-label { min-width: 0; }

/* =====================================================================
   SET SHEET · the session reads like a typeset programme, not cards (brief 15, S15)
   The notation (6 × 50, on 1:00, 300 m) is the content; everything else recedes.
   ===================================================================== */
.setsheet { display: grid; }
.setsheet .setrow {
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent;
  box-shadow: none; padding: 12px 0 12px 14px; position: relative;
}
.setsheet .setrow:first-child { border-top: 0; }
/* scalable or fixed is a 2px rule in the left margin, with the word in the label */
.setsheet .setrow::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: var(--line-2);
}
.setsheet .setrow.scale::before { background: var(--primary); }
.setsheet .setrow.balance::before { background: var(--amber); }
.setsheet .setrow.balance { background: transparent; }
.setsheet .setrow .lbl { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.setsheet .setrow .badge { background: transparent; color: var(--ink-3); padding: 0; font-size: 11px; letter-spacing: .04em; }
.setsheet .setrow .badge::before { content: '· '; }
.setsheet .setrow.scale .badge { background: transparent; color: var(--primary-ink); }
.setsheet .setrow .reps { font-size: 27px; }
.setsheet .setrow .plan { color: var(--ink-3); }

/* =====================================================================
   TODAY · the session in hand owns the screen (brief 5, S10)
   Built from the next-session card, flattened: no greeting block, no hero tint.
   ===================================================================== */
.today-head { display: grid; gap: 6px; padding: 2px 0 6px; }
.today-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.today-brand .today-when { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.today-when h1 { font-size: 23px; letter-spacing: -.02em; }
.today-when .rel { font-size: 13px; font-weight: 600; color: var(--ink-3); }

.session-lead { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 16px; box-shadow: inset 3px 0 0 var(--squad); }
.session-lead .purpose { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.session-lead .ctx { font-size: 13px; color: var(--ink-2); }
.session-lead .facts { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.session-lead .facts div { display: flex; align-items: baseline; gap: 5px; }
.session-lead .facts .v { font-family: var(--font-num); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.session-lead .facts .u { font-size: 12.5px; color: var(--ink-3); }
.session-lead .fit { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.session-lead .fit.over { color: var(--amber); font-weight: 600; }
.session-lead .actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 2px; }
.today-note { font-size: 13px; color: var(--ink-2); }

/* a compact secondary context row: only rendered when it is actionable (brief S09 direction) */
.today-next { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); overflow: hidden; }
.today-next button, .today-next .row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: var(--surface); border: 0; border-top: 1px solid var(--line);
  color: inherit; padding: 12px 14px; min-height: var(--tap); font-size: 14px;
}
.today-next > *:first-child { border-top: 0; }
.today-next .meta { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.today-next svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.today-next .attn { color: var(--amber); font-weight: 600; }

/* =====================================================================
   AUTH SHELL · the product is the brand; the club is the context (brief S01-S05)
   ===================================================================== */
.auth { display: grid; gap: 18px; max-width: 420px; margin: 0 auto; padding-top: 28px; }
.auth-brand { display: grid; gap: 4px; justify-items: start; }
.auth-brand .wordmark { display: flex; align-items: center; gap: 10px; }
.auth-brand .product { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.auth-brand .tagline { font-size: 13.5px; color: var(--ink-2); }
.auth-brand .tenant { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.auth form { display: grid; gap: 16px; border: 0; background: transparent; padding: 0; }
.auth form .btn.block { margin-top: 4px; }
.auth .alt { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.auth .note { font-size: 12.5px; color: var(--ink-3); }

/* the product mark: a lane viewed end-on. Three rules, the middle one carrying through. */
.mark { width: 34px; height: 34px; flex: none; display: block; }
.mark .r { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; fill: none; }
.mark .r.q { stroke: var(--line-2); }

/* =====================================================================
   REVIEW · attention first, then adherence (brief S22)
   ===================================================================== */
.attn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.attn-state { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.attn-state .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--green); }
.attn-state.has .dot { background: var(--amber); }
.attn-list { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
.attn-list button {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: var(--surface); border: 0; border-top: 1px solid var(--line);
  color: inherit; padding: 12px 14px; min-height: var(--tap);
}
.attn-list button:first-child { border-top: 0; }
.attn-list .ic { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.attn-list .t { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.attn-list .s { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.attn-list svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.allclear { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); padding: 12px 14px; }

/* =====================================================================
   ARTICLE · documentation reads as an article, not a form (brief S41)
   ===================================================================== */
.article { max-width: 62ch; display: grid; gap: 14px; padding: 4px 0 8px; }
.article h3 { font-size: 16px; margin-top: 6px; }
.article p, .article li { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.article ul { display: grid; gap: 8px; padding-left: 18px; list-style: disc; }
.article li::marker { color: var(--ink-3); }
.article b { color: var(--ink); }

/* ---------- list rows: utilities, not navigation cards (brief S34, S40) ---------- */
.rows { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
.rows .item { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); min-height: 54px; }
.rows .item:first-child { border-top: 0; }
.rows .item:hover { background: var(--surface-2); }
.rows .item .t { font-size: 15.5px; font-weight: 600; }

/* ---------- sticky action bar: the one dominant action stays reachable ---------- */
.stickybar {
  position: sticky; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 5;
  display: grid; gap: 8px; grid-auto-flow: column; grid-auto-columns: 1fr auto;
  padding: 10px 0 2px; background: linear-gradient(180deg, transparent, var(--canvas) 38%);
}
.stickybar.one { grid-auto-columns: 1fr; }

/* ---------- narrow phones and large text ---------- */
@media (max-width: 359px) {
  .session-lead .facts { gap: 4px 12px; }
  .session-lead .facts .v { font-size: 23px; }
  .today-when h1 { font-size: 21px; }
}

/* =====================================================================
   SESSION · flat header, one target line, a typeset set sheet (brief S15-S18)
   ===================================================================== */
.session-top { display: grid; gap: 6px; padding: 2px 0 2px; }
.session-top .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--ink-2); }
.fitnote { font-variant-numeric: tabular-nums; }
.fitnote.over { color: var(--amber); font-weight: 600; }

.delivered { display: grid; gap: 8px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r-card); background: var(--surface); padding: 14px 16px; }
.delivered .dfacts { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; }
.delivered .dfacts div { display: flex; align-items: baseline; gap: 5px; }
.delivered .dfacts .v { font-family: var(--font-num); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.delivered .dfacts .u { font-size: 12.5px; color: var(--ink-3); }
.delivered .ref { font-size: 13px; color: var(--ink-2); }
.delivered .ref.pain { color: var(--danger); }

.targetline { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 14px 16px; }
.tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tl-val { display: flex; align-items: baseline; gap: 7px; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.tl-val b { font-family: var(--font-num); font-weight: 700; font-size: 27px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.tl-undo { display: flex; justify-content: flex-end; }
.adjust { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.adjust-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.adjust-modes .btn[aria-pressed="true"] { font-weight: 700; }

/* Preview is neutral by default. Amber is reserved for an actual constraint (brief S16). */
.preview { display: grid; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface-2); padding: 12px; }
.preview.warn { border-color: color-mix(in srgb, var(--amber) 50%, var(--line-2)); background: var(--amber-soft); }
.preview .pv-line { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.preview .pv-line b { font-weight: 700; }
.preview .pv-fit { font-size: 13px; color: var(--ink-2); }
.preview .pv-fit.over { color: var(--amber); font-weight: 600; }
.preview .pv-detail summary { font-size: 13px; color: var(--primary-ink); cursor: pointer; padding: 2px 0; }
.preview .pv-detail ul { display: grid; gap: 4px; margin-top: 6px; font-size: 13px; }
.preview .pv-detail li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.preview .pv-detail .pv-protected { color: var(--ink-3); }
.preview .actions { margin-top: 2px; }

.setsheet-wrap { display: grid; gap: 8px; }
.setsheet-wrap .setsheet { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 2px 16px; }
.sheet-total { display: grid; gap: 4px; padding: 2px 2px 0; }
.sheet-total .st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 15px; }
.sheet-total .st-row b { font-family: var(--font-num); font-weight: 700; font-size: 21px; font-variant-numeric: tabular-nums; }
.sheet-total .st-row.small { font-size: 12.5px; color: var(--ink-3); }
.sheet-total .st-row.small b { font-size: 14px; font-family: var(--font-ui); color: var(--ink-2); }
.sheet-total .st-row.fl.over b { color: var(--amber); }
.sheet-total .st-row.fl.tight b { color: var(--amber); }

/* one-time coachmark instead of a three-step tour (brief S06-S08) */
.coachmark { position: fixed; inset: 0; z-index: 60; background: rgb(8 18 28 / .45); display: grid; align-items: end; justify-items: center; padding: 16px; }
.coachmark-card { background: var(--surface); color: var(--ink); border-radius: var(--r-sheet); padding: 18px; max-width: 420px; width: 100%; display: grid; gap: 10px; box-shadow: var(--lift); margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.coachmark-card p { font-size: 14.5px; color: var(--ink-2); }
.coachmark-card .actions { justify-content: flex-end; }

/* Deck overflow and footer: one escape path, one end action (brief S20) */
.menu-dark .menu-btn { color: var(--on-deck); border-color: var(--deck-3); }
.menu-dark .menu-btn[aria-expanded="true"] { background: var(--deck-3); }
@media (hover: hover) { .deck .iconbtn:hover, .menu-dark .menu-btn:hover { background: var(--deck-3); } }
.menu-dark .menu-list { background: var(--deck-2); color: var(--on-deck); border: 1px solid var(--deck-3); }
.menu-dark .menu-list button { color: var(--on-deck); }
.menu-dark .menu-list button:hover { background: var(--deck-3); }
.deck-foot.one .btn { min-height: 60px; font-size: 17px; }
/* Completed sets stay readable: a coach still has to refer back to them (brief S20) */
.deck-row.done { opacity: .66; }
.deck-row.done .reps .n { text-decoration: line-through; text-decoration-thickness: 3px; }
.deck-row.done .lbl::after { content: 'done'; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-deck-2); }
/* current/next is a label and an outline, never colour alone (brief 14.6) */
.deck-row.next { box-shadow: inset 0 0 0 2px var(--on-deck-2); }

/* =====================================================================
   SCHEDULE · one week as a clean list (brief S14)
   ===================================================================== */
.weekpurpose { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.schedule { display: grid; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.schedule .srow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  width: 100%; text-align: left; background: var(--surface); border: 0; border-top: 1px solid var(--line);
  color: inherit; padding: 12px 14px; min-height: 60px; align-content: center;
}
.schedule .srow:first-child { border-top: 0; }
.schedule .srow:hover { background: var(--surface-2); }
.schedule .srow.is-today { box-shadow: inset 3px 0 0 var(--squad); }
.schedule .when { grid-column: 1; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.schedule .when .dt { font-weight: 600; color: var(--ink-2); }
.schedule .focus { grid-column: 1; font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.schedule .sub { grid-column: 1; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.schedule .dist { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; display: grid; justify-items: end; }
.schedule .dist b { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.schedule .dist small { font-size: 11.5px; color: var(--ink-3); }
.why summary { font-size: 13px; color: var(--primary-ink); cursor: pointer; padding: 4px 0; }

/* --- review pass fixes --- */
.attn-list .t, .attn-list .s { display: block; }
.band { flex-wrap: wrap; }
/* share the row evenly, and only wrap when a cell would genuinely be too narrow to read */
.band > * { flex: 1 1 auto; min-width: 68px; }
/* intensity codes are notation, not decoration: same shape, quieter fill (brief 13.5) */
.chip { font-size: 10.5px; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
/* the load stripe on a week carried no on-screen meaning; the "load" word does (brief S13/S14) */
.item.load-up, .item.load-peak, .item.load-down, .item.load-camp { border-left-width: 1px; border-left-color: var(--line); }
.item.phase.today { box-shadow: inset 3px 0 0 var(--squad); }
.targetline.quiet { background: transparent; border-style: dashed; }
.targetline.quiet .tl-sub { margin-top: 0; }

/* =====================================================================
   TENANT BRAND BOUNDARY (LaneArc brand brief 7)
   There is nothing to style here any more, and that is the point: a club supplies a
   name, not a crest or a colour, so no rule in this stylesheet reads club data.
   The squad colour is the one piece of tenant-ish colour that survives, because it
   carries operational meaning when a coach moves between squads.
   ===================================================================== */

/* Articles and rows pick up the page gutter rather than a card */
.help-article.article { padding-top: 2px; }

/* =====================================================================
   DIFF · one grammar for update review, compare and rollback (brief S31, S33)
   ===================================================================== */
.impact-summary { display: grid; gap: 8px; }
.diff-dir { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.diff-dir b { color: var(--ink); font-weight: 600; }
.diff-dir span { color: var(--ink-3); margin: 0 4px; }
.diff-km { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.diff-km b { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--ink); }
.difftext { border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); padding: 12px 14px; display: grid; gap: 6px; }
.difflist { border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); overflow: hidden; }
.difflist .diffrow { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0; }
.difflist .diffrow:first-child { border-top: 0; }
.diffrow.danger .diffhead > span:first-child b { color: var(--danger); }
.diffrow.green .diffhead > span:first-child b { color: var(--green); }
.assure { border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); padding: 10px 14px; }
.assure summary { font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.assure-line { font-size: 13px; color: var(--ink-3); }

/* LOG · grouped by meaning, sticky save (brief S21) */
.logform { display: grid; gap: 18px; }
.lf-group { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 14px 16px; }
.lf-group .section-label { margin-bottom: -2px; }

/* =====================================================================
   ACCEPTANCE FIXES (brief 18) · contrast, target size, 320px
   ===================================================================== */
/* --ink-3 was 3.2:1 on white, below AA for the small text it carries everywhere. */
:root { --ink-3: #636f7d; }

/* Targets. The brief asks for 44px on frequent controls and comfortably above the WCAG 2.2
 * minimum of 24px elsewhere; Deck is deliberately larger again (14.1). */
.btn.sm { min-height: 40px; }
.btn.primary { min-height: 44px; }
.infobtn { min-height: 40px; }
.infobtn.labelled { min-height: 40px; }
.squadchip { min-height: 44px; }
.syncchip { min-height: 36px; }
.scale-btns button { min-height: 44px; }

/* 320px: the stepper and its groups must be allowed to shrink. */
.logform, .logform > *, .lf-group, .lf-group > * { min-width: 0; }
.stepper { min-width: 0; }
.stepper button { min-width: 0; }
.stepper .val, .stepper input { min-width: 0; }
@media (max-width: 359px) {
  .stepper { grid-template-columns: 46px 1fr 46px; gap: 6px; }
  .stepper input { font-size: 28px; padding: 0 38px 0 8px; }
  .lf-group { padding: 12px; }
}
/* the filter chip row scrolls inside itself and must not widen the page */
.chips, .filterbar { max-width: 100%; }

/* time inputs are intrinsically wide; let them shrink on a 320px phone */
.timepair, .timepair label, .timepair input { min-width: 0; }
.timepair input { width: 100%; }
@media (max-width: 359px) { .timepair { gap: 6px; } .timepair input { padding-inline: 6px; font-size: 15px; } }
/* a scrolling chip row must clip, not widen the page */
.chips { min-width: 0; max-width: 100%; }
.audit-filters, .chips > * { flex: none; }
/* a five-way segmented filter cannot fit 320px in one row: let it wrap, and keep targets tappable */
.segmented { min-width: 0; }
.segmented button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 44px; }
.segmented.sm button { min-height: 40px; font-size: 13px; }
@media (max-width: 400px) {
  .segmented.wrap { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
}

/* Status colours carry words, but they must still meet AA on their own tints (brief 18). */
:root { --amber: #8a4f00; --green: #136338; --danger: #b32b2d; }
@media (max-width: 359px) { .segmented.wrap { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   HISTORY · a scannable record, detail on demand (brief S39)
   ===================================================================== */
.auditlist { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.arow { border-top: 1px solid var(--line); }
.arow:first-child { border-top: 0; }
.ahead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
  width: 100%; text-align: left; background: transparent; border: 0; color: inherit; padding: 12px 14px; min-height: 56px;
}
.ahead:disabled { cursor: default; }
.ahead:not(:disabled):hover { background: var(--surface-2); }
.aic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); flex: none; margin-top: 1px; }
.aic svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abody { display: grid; gap: 2px; min-width: 0; }
.at { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.am { font-size: 12px; color: var(--ink-3); }
.achev svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion) ease; }
.arow.open .achev svg { transform: rotate(180deg); }
.abefore { padding: 0 14px 12px 50px; display: grid; gap: 8px; }
.abefore .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.abefore code { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }

/* =====================================================================
   REVIEW SESSIONS · scannable rows, detail on demand (brief S23)
   ===================================================================== */
.mrow { border-top: 1px solid var(--line); background: var(--surface); }
.mrow:first-child { border-top: 0; }
.mhead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  width: 100%; text-align: left; background: transparent; border: 0; color: inherit; padding: 12px 14px; min-height: 60px; align-content: center;
}
.mhead:hover { background: var(--surface-2); }
.mwhen { grid-column: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mstate { grid-column: 2; grid-row: 1; justify-self: end; }
.mfocus { grid-column: 1 / -1; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mdist { grid-column: 1 / -1; font-family: var(--font-num); font-size: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mdist b { color: var(--ink); font-weight: 700; }
.mcue { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.mcue.bad { color: var(--amber); font-weight: 600; }
.mdetail { padding: 0 14px 14px; display: grid; gap: 10px; }
.mdetail .btn { justify-self: start; }
/* the list container */
.msessions { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
/* named colour swatches; destructive actions kept apart from Save (brief S44) */
.swatches.named { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.swatches.named .swatch { display: flex; align-items: center; gap: 7px; width: auto; height: auto; min-height: 44px; padding: 6px 10px; border-radius: var(--r-control); border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.swatches.named .swatch i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.swatches.named .swatch[aria-pressed="true"] { border-color: var(--primary); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
.danger-zone { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; display: flex; justify-content: flex-start; }

/* =====================================================================
   LANEARC BRAND (brand brief 7, 8)
   The product owns the chrome. A club is context and data, never a co-brand,
   so there is no club crest and no club accent anywhere in this file.
   ===================================================================== */
:root {
  --logo-ink: #092c50;
  --logo-accent: #1296d4;
  --logo-arc: #35bdf0;
  --logo-plate: #0b2c4e;
  --logo-plate-ink: #eaf4fb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-ink: #d4e6f6; --logo-accent: #5cc4ea; --logo-arc: #95ebff; }
}
:root[data-theme="dark"] { --logo-ink: #d4e6f6; --logo-accent: #5cc4ea; --logo-arc: #95ebff; }
.lamark { display: block; flex: none; }

/* The masthead: the LaneArc logo centred on the four primary areas. Club context is a
   quiet line underneath, never a mark beside it. */
.masthead {
  position: sticky; top: 0; z-index: 15; background: var(--surface);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px);
}
.masthead-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; max-width: 720px; margin: 0 auto; }
.masthead-in > .lead { justify-self: start; min-width: 0; }
.masthead-in > .logo { justify-self: center; }
.masthead-in > .trail { justify-self: end; display: flex; align-items: center; gap: 6px; }
.masthead-title { max-width: 720px; margin: 0 auto; padding: 0 16px 8px; }
.masthead-title .title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masthead-title .sub { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.today-club { font-size: 13px; color: var(--ink-3); margin-top: -2px; }

/* Club Management (brand brief 5) */
.joincode { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.joincode .actions { margin: 0; }
.danger-card { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.danger-card .row-between { align-items: flex-start; gap: 12px; }
.danger-card .row-between > div { min-width: 0; }

/* A build that cannot be shared says so, above everything, on every screen
   (V1 review 2.1). It is not dismissible: the whole point is that it is easy to
   forget which copy you are holding. It sits above the sticky masthead rather
   than inside it, so no screen has to opt in. */
.deploy-notice {
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--danger); color: #fff; font-size: 13px; line-height: 1.4;
}
.deploy-notice b { font-weight: 700; }

/* The safeguarding boundary, stated where the free text is typed (V1 review 6).
   Quiet, not alarming: it is guidance for every session, not a warning about this one. */
.note.safeguard { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; color: var(--ink-2); }