/* ── Brand fonts, SELF-HOSTED ──────────────────────────────────────────────────
   Archivo 800 (display) and Inter 400-700 (body/UI). Served from this origin,
   not fonts.googleapis.com.

   WHY, and it is not performance: the Google link was this app's FIRST external
   runtime dependency. It fired on every page load for every user — including
   the kids this app is built for — sending IP and User-Agent to a third party,
   which is a COPPA-posture change, and it put that third party in the LOGIN
   path. Self-hosting removes all three. The link was load-bearing (there is no
   other font source: zero @font-face rules existed and no font files were
   bundled), so this is a SWAP, and the visual result must be identical.

   Inter is a VARIABLE font: Google serves ONE file per subset and pins a weight
   in each @font-face rule, so the four weight files it lists are byte-identical.
   Verified by checksum before bundling — one file per subset is stored and the
   whole 400-700 range is declared on it, which is what Google was serving all
   along. 10 downloads became 4 files, 562KB became 164KB.

   SUBSETS: latin and latin-ext only, out of the seven Google offers. Dropped:
   cyrillic, cyrillic-ext, greek, greek-ext, vietnamese. latin covers Western
   European accents and latin-ext the Eastern European ones, so roster names in
   Latin script render as before. A name in Cyrillic, Greek or Vietnamese script
   would fall back to the system sans — a deliberate trade, recorded rather than
   hidden, and reversible by adding the files.

   font-display: swap matches the `&display=swap` the link carried. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/archivo-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --orange: #002147;
  --orange-light: #E8EDF5;
  --text-primary: #111111;
  --text-secondary: #666666;
  --text-muted: #999999;
  --border: #E8E8E8;
  --bg: #FFFFFF;
  --bg-surface: #F8F8F8;
  --header-h: 56px;
  --nav-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;

  /* ── Surface + content tokens (light values) ──────────────────────────────
     Added Aug 2026 for the practice screens. Adopt these on new screens.

     WHY THEY EXIST — the recurring dark-on-dark bug had one cause: components
     hardcoded a dark background but let their TEXT colour inherit from
     --text-primary, which only ever had a light value. Light mode was then
     patched back with a `prefers-color-scheme: light` block, which hid the
     problem from anyone developing in light mode.

     THE RULE — never set a --surface-* without also setting colour from a
     --content-* token. Both sides of the pair flip together per scheme, so a
     surface can never end up carrying text from the other scheme.

     Deliberately additive: the older tokens above keep their exact values and
     are NOT given dark variants, because 64 rules across the app hardcode a
     light background while inheriting text from them — flipping those globally
     would create the same bug everywhere else. Screens migrate onto these
     tokens one at a time instead. */

  --surface-base:   #FFFFFF;  /* page behind everything */
  --surface-card:   #FFFFFF;  /* a card / row sitting on the page */
  --surface-raised: #ECECF2;  /* a header or nested strip ON a card */
  --surface-hover:  #EAEAEF;
  --surface-input:  #FFFFFF;

  --content-strong: #111114;  /* titles, values, input text */
  --content:        #45454E;  /* body */
  --content-muted:  #6E6E7A;  /* labels, hints, status */

  --edge:        #E2E2E8;     /* hairline between things */
  --edge-strong: #C6C6D0;     /* input outlines, emphasis */

  --accent: #1A4FCC;
  --danger: #C0392B;

  /* ── Practice grid palettes (Phase 2a) ────────────────────────────────────
     The design's five drill-type colours plus the ad-hoc neutral — ink is the
     card's edge stripe; deep/tint/edge are the subgroup chip's text/fill/
     border, a self-contained pair that stays light in both schemes (it passes
     AA on its own fill). --pc-N are coach dots, indexed by roster order.
     Dark inks/dots are hue-preserving lighter values from the design file's
     own `edge` colours and the brand reference (Watch Sky, Sky Pale); the
     neutral takes --content-muted's value. PracticeGrid emits var() refs. */
  --pt-individual-ink: #2E8FC4; --pt-individual-deep: #1F6791; --pt-individual-tint: #E7F2F9; --pt-individual-edge: #A8CFE6;
  --pt-team-ink: #002147; --pt-team-deep: #002147; --pt-team-tint: #E4E9EF; --pt-team-edge: #A9B6C4;
  --pt-conditioning-ink: #B4552F; --pt-conditioning-deep: #8E4325; --pt-conditioning-tint: #F8EAE3; --pt-conditioning-edge: #E0B49F;
  --pt-plays-ink: #5B4B9E; --pt-plays-deep: #473A7C; --pt-plays-tint: #EBE8F5; --pt-plays-edge: #B9B1DC;
  --pt-scrimmage-ink: #10736A; --pt-scrimmage-deep: #0B564F; --pt-scrimmage-tint: #E3F1EF; --pt-scrimmage-edge: #9CC9C3;
  --pt-none-ink: #5A6B7C; --pt-none-deep: #3D4A58; --pt-none-tint: #F1F1EE; --pt-none-edge: #C0C8D1;
  --pt-break-ink: #8AA9C0; --pt-break-deep: #3F5A6E; --pt-break-tint: #EEF4F8; --pt-break-edge: #C3D6E2;
  --pc-0: #002147; --pc-1: #2E8FC4; --pc-2: #B4552F; --pc-3: #5B4B9E; --pc-4: #10736A; --pc-5: #E8B84B;
}

/* Same tokens, dark values. Nothing else in the file needs a dark block —
   components that consume these pairs follow automatically. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-base:   #131316;
    --surface-card:   #1E1E23;
    --surface-raised: #2C2C35;
    --surface-hover:  #2E2E36;
    --surface-input:  #26262C;

    --content-strong: #F0F0F3;
    --content:        #C3C3CC;
    --content-muted:  #8E8E9C;

    --edge:        #313139;
    --edge-strong: #474751;

    --accent: #85A9FF;
    --danger: #F08379;

    --pt-individual-ink: #4FA8D8; --pt-individual-deep: #1F6791; --pt-individual-tint: #E7F2F9; --pt-individual-edge: #A8CFE6;
    --pt-team-ink: #A9B6C4; --pt-team-deep: #002147; --pt-team-tint: #E4E9EF; --pt-team-edge: #A9B6C4;
    --pt-conditioning-ink: #E0B49F; --pt-conditioning-deep: #8E4325; --pt-conditioning-tint: #F8EAE3; --pt-conditioning-edge: #E0B49F;
    --pt-plays-ink: #B9B1DC; --pt-plays-deep: #473A7C; --pt-plays-tint: #EBE8F5; --pt-plays-edge: #B9B1DC;
    --pt-scrimmage-ink: #9CC9C3; --pt-scrimmage-deep: #0B564F; --pt-scrimmage-tint: #E3F1EF; --pt-scrimmage-edge: #9CC9C3;
    --pt-none-ink: #8E8E9C; --pt-none-deep: #3D4A58; --pt-none-tint: #F1F1EE; --pt-none-edge: #C0C8D1;
    --pt-break-ink: #DCE6EC; --pt-break-deep: #3F5A6E; --pt-break-tint: #EEF4F8; --pt-break-edge: #C3D6E2;
    --pc-0: #D2E9F5; --pc-1: #4FA8D8; --pc-2: #E0B49F; --pc-3: #B9B1DC; --pc-4: #9CC9C3; --pc-5: #E8B84B;
  }
}

/* Honours the manual override the file already uses for training-log badges,
   so a future theme toggle drives these too rather than only those. */
:root[data-theme="dark"] {
  --surface-base:   #131316;
  --surface-card:   #1E1E23;
  --surface-raised: #2C2C35;
  --surface-hover:  #35353F;
  --surface-input:  #26262C;
  --content-strong: #F0F0F3;
  --content:        #C3C3CC;
  --content-muted:  #8E8E9C;
  --edge:        #313139;
  --edge-strong: #474751;
  --accent: #85A9FF;
  --danger: #F08379;
  --pt-individual-ink: #4FA8D8; --pt-individual-deep: #1F6791; --pt-individual-tint: #E7F2F9; --pt-individual-edge: #A8CFE6;
  --pt-team-ink: #A9B6C4; --pt-team-deep: #002147; --pt-team-tint: #E4E9EF; --pt-team-edge: #A9B6C4;
  --pt-conditioning-ink: #E0B49F; --pt-conditioning-deep: #8E4325; --pt-conditioning-tint: #F8EAE3; --pt-conditioning-edge: #E0B49F;
  --pt-plays-ink: #B9B1DC; --pt-plays-deep: #473A7C; --pt-plays-tint: #EBE8F5; --pt-plays-edge: #B9B1DC;
  --pt-scrimmage-ink: #9CC9C3; --pt-scrimmage-deep: #0B564F; --pt-scrimmage-tint: #E3F1EF; --pt-scrimmage-edge: #9CC9C3;
  --pt-none-ink: #8E8E9C; --pt-none-deep: #3D4A58; --pt-none-tint: #F1F1EE; --pt-none-edge: #C0C8D1;
  --pt-break-ink: #DCE6EC; --pt-break-deep: #3F5A6E; --pt-break-tint: #EEF4F8; --pt-break-edge: #C3D6E2;
  --pc-0: #D2E9F5; --pc-1: #4FA8D8; --pc-2: #E0B49F; --pc-3: #B9B1DC; --pc-4: #9CC9C3; --pc-5: #E8B84B;
}
:root[data-theme="light"] {
  --surface-base:   #FFFFFF;
  --surface-card:   #FFFFFF;
  --surface-raised: #ECECF2;
  --surface-hover:  #E3E3EA;
  --surface-input:  #FFFFFF;
  --content-strong: #111114;
  --content:        #45454E;
  --content-muted:  #6E6E7A;
  --edge:        #E2E2E8;
  --edge-strong: #C6C6D0;
  --accent: #1A4FCC;
  --danger: #C0392B;
  --pt-individual-ink: #2E8FC4; --pt-individual-deep: #1F6791; --pt-individual-tint: #E7F2F9; --pt-individual-edge: #A8CFE6;
  --pt-team-ink: #002147; --pt-team-deep: #002147; --pt-team-tint: #E4E9EF; --pt-team-edge: #A9B6C4;
  --pt-conditioning-ink: #B4552F; --pt-conditioning-deep: #8E4325; --pt-conditioning-tint: #F8EAE3; --pt-conditioning-edge: #E0B49F;
  --pt-plays-ink: #5B4B9E; --pt-plays-deep: #473A7C; --pt-plays-tint: #EBE8F5; --pt-plays-edge: #B9B1DC;
  --pt-scrimmage-ink: #10736A; --pt-scrimmage-deep: #0B564F; --pt-scrimmage-tint: #E3F1EF; --pt-scrimmage-edge: #9CC9C3;
  --pt-none-ink: #5A6B7C; --pt-none-deep: #3D4A58; --pt-none-tint: #F1F1EE; --pt-none-edge: #C0C8D1;
  --pt-break-ink: #8AA9C0; --pt-break-deep: #3F5A6E; --pt-break-tint: #EEF4F8; --pt-break-edge: #C3D6E2;
  --pc-0: #002147; --pc-1: #2E8FC4; --pc-2: #B4552F; --pc-3: #5B4B9E; --pc-4: #10736A; --pc-5: #E8B84B;
}

/* ── Practice surfaces: FIXED LIGHT (Mike, Oct 2026) ──────────────────────────
   The practice surfaces read the scheme-aware tokens above, so under a dark
   device preference they turned dark inside an app shell that stays light
   (--bg has no dark value): a two-tone app that reads as broken. Pinned light
   the way #gp-overlay pins Game Prep: the same tokens re-declared on the
   practice CONTAINERS, so everything inside inherits the light values whatever
   :root resolves to. Scoped by container, not by class: the Games list, Game
   Prep, the Play Designer and the Scratchpad reuse .prac-* classes and are not
   practice surfaces. The values are :root's light defaults (not the
   data-theme="light" block's, whose --surface-hover differs), so light mode is
   pixel-unchanged. The phase modal is pinned on .pgp-wrap, not on its mount
   div #prac-phase-modal: same values, but pinning the mount shifted two
   antialiased pixels behind its scrim, and on .pgp-wrap nothing moves.
   NOT pinned: the drill form (.df-*). Its colours are literals, dark by default
   with a light-scheme override, and the same form is the admin library editor,
   so pinning it would change a surface outside practice (BACKLOG).
   The app-wide theme question stays open (BACKLOG). */
#coach-practice-content, #prac-sheet, #prac-drawer, .pgp-wrap,
#prac-new-modal, #prac-lib-modal, #prac-add-modal, .pg-lib-ghost {
  --surface-base:   #FFFFFF;
  --surface-card:   #FFFFFF;
  --surface-raised: #ECECF2;
  --surface-hover:  #EAEAEF;
  --surface-input:  #FFFFFF;
  --content-strong: #111114;
  --content:        #45454E;
  --content-muted:  #6E6E7A;
  --edge:        #E2E2E8;
  --edge-strong: #C6C6D0;
  --accent: #1A4FCC;
  --danger: #C0392B;
  --pt-individual-ink: #2E8FC4; --pt-individual-deep: #1F6791; --pt-individual-tint: #E7F2F9; --pt-individual-edge: #A8CFE6;
  --pt-team-ink: #002147; --pt-team-deep: #002147; --pt-team-tint: #E4E9EF; --pt-team-edge: #A9B6C4;
  --pt-conditioning-ink: #B4552F; --pt-conditioning-deep: #8E4325; --pt-conditioning-tint: #F8EAE3; --pt-conditioning-edge: #E0B49F;
  --pt-plays-ink: #5B4B9E; --pt-plays-deep: #473A7C; --pt-plays-tint: #EBE8F5; --pt-plays-edge: #B9B1DC;
  --pt-scrimmage-ink: #10736A; --pt-scrimmage-deep: #0B564F; --pt-scrimmage-tint: #E3F1EF; --pt-scrimmage-edge: #9CC9C3;
  --pt-none-ink: #5A6B7C; --pt-none-deep: #3D4A58; --pt-none-tint: #F1F1EE; --pt-none-edge: #C0C8D1;
  --pt-break-ink: #8AA9C0; --pt-break-deep: #3F5A6E; --pt-break-tint: #EEF4F8; --pt-break-edge: #C3D6E2;
  --pc-0: #002147; --pc-1: #2E8FC4; --pc-2: #B4552F; --pc-3: #5B4B9E; --pc-4: #10736A; --pc-5: #E8B84B;
}
/* Two practice rules are DARK by default and turn light only under a light
   preference (the light-scheme block beside the Coach Library's .cl-* rules),
   so the token pin above cannot reach them. Their light values, unconditional
   inside the practice containers. :not(.active) keeps the selected chip's own
   colours, which the light-scheme rule never overrode either. */
#coach-practice-content .prac-pick-cat:not(.active), #prac-lib-modal .prac-pick-cat:not(.active),
#prac-add-modal .prac-pick-cat:not(.active) { border-color:#ccc; color:#666; }
#coach-practice-content .prac-lib-badge, #prac-lib-modal .prac-lib-badge,
#prac-add-modal .prac-lib-badge { background:#dbeafe; color:#1d4ed8; }
/* The drill form, pinned light when opened FROM PRACTICE (.df-practice on its
   card, set by coach_practice.js from the coach items URL — the context marker
   H3 keys on). The admin library editor renders the same form without the
   class and keeps following the device: it stays consistent with the admin
   panel. The form needs more than the token pin: its own colours are literals,
   dark by default and light only under a light preference, so their light
   values are copied here, scoped to the class. Every value equals the light
   scheme's, so a light preference renders it exactly as before. */
.df-modal-card.df-practice {
  --surface-base:   #FFFFFF;
  --surface-card:   #FFFFFF;
  --surface-raised: #ECECF2;
  --surface-hover:  #EAEAEF;
  --surface-input:  #FFFFFF;
  --content-strong: #111114;
  --content:        #45454E;
  --content-muted:  #6E6E7A;
  --edge:        #E2E2E8;
  --edge-strong: #C6C6D0;
  --accent: #1A4FCC;
  --danger: #C0392B;
  --pt-individual-ink: #2E8FC4; --pt-individual-deep: #1F6791; --pt-individual-tint: #E7F2F9; --pt-individual-edge: #A8CFE6;
  --pt-team-ink: #002147; --pt-team-deep: #002147; --pt-team-tint: #E4E9EF; --pt-team-edge: #A9B6C4;
  --pt-conditioning-ink: #B4552F; --pt-conditioning-deep: #8E4325; --pt-conditioning-tint: #F8EAE3; --pt-conditioning-edge: #E0B49F;
  --pt-plays-ink: #5B4B9E; --pt-plays-deep: #473A7C; --pt-plays-tint: #EBE8F5; --pt-plays-edge: #B9B1DC;
  --pt-scrimmage-ink: #10736A; --pt-scrimmage-deep: #0B564F; --pt-scrimmage-tint: #E3F1EF; --pt-scrimmage-edge: #9CC9C3;
  --pt-none-ink: #5A6B7C; --pt-none-deep: #3D4A58; --pt-none-tint: #F1F1EE; --pt-none-edge: #C0C8D1;
  --pt-break-ink: #8AA9C0; --pt-break-deep: #3F5A6E; --pt-break-tint: #EEF4F8; --pt-break-edge: #C3D6E2;
  --pc-0: #002147; --pc-1: #2E8FC4; --pc-2: #B4552F; --pc-3: #5B4B9E; --pc-4: #10736A; --pc-5: #E8B84B;
  background:#fafafa; color:#111; border-color:#ddd;
}
.df-practice .df-modal-header           { border-color:#e0e0e0; }
.df-practice .df-divider                { color:#aaa; }
.df-practice .df-section .prac-input    { background:#fff; border-color:#ccc; color:#111; }
.df-practice .df-diagram-select         { background:#fff; }
.df-practice .df-thumb-img              { border-color:#ccc; }
.df-practice .df-no-plays               { color:#aaa; }
.df-practice .df-form-actions           { border-color:#e0e0e0; }
.df-practice .prac-modal-title          { color:#111; }
.df-practice .prac-modal-field label    { color:#555; }
.df-practice .prac-opt                  { color:#888; }
.df-practice .df-diagram-btn            { background:#e8f0fe; border-color:#93c5fd; color:#1d4ed8; }
.df-practice .df-diagram-btn:hover      { background:#dbeafe; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Form controls do NOT inherit the body font — the UA stylesheet gives them
   Arial (and monospace for date/time inputs), which is why 273 of 384
   controls measured Arial after the body flip alone. The twenty scattered
   `font-family: inherit` rules below are a partial fix for the same thing;
   this closes the rest. Element-level, so any class-scoped face still wins. */
:is(input, textarea, select, button) { font-family: inherit; }

/* ── Top Header ───────────────────────────────────────────────────────────── */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
}

.header-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.01em;
}
/* The mark, not a wordmark: block, so the span's box is the 28px SVG and not
   the SVG plus a baseline gap — the same rule .sg-foot-brand svg carries. */
.header-logo svg { display: block; }

.header-screen-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── Main Content ─────────────────────────────────────────────────────────── */
.main-content {
  position: fixed;
  top: var(--header-h);
  bottom: var(--nav-h);
  left: 0;
  right: 0;
  overflow: hidden;
}

/* ── Screens ──────────────────────────────────────────────────────────────── */
.screen {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen.active {
  display: block;
}

.screen-inner {
  max-width: 768px;
  margin: 0 auto;
  padding: 24px 20px 32px;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
.section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.section-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* ── Home — Category Cards ────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
}

.category-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 100px;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  user-select: none;
}

.category-card:active {
  background: var(--orange-light);
  border-color: var(--orange);
  transform: scale(0.97);
}

.category-icon {
  font-size: 2rem;
  line-height: 1;
}

.category-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Quick Start ──────────────────────────────────────────────────────────── */
.quick-start {
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.quick-start-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  display: block;
  width: 100%;
  min-height: 52px;
  background: var(--orange);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.12s;
}

.btn-primary:active {
  background: #cc6619;
  transform: scale(0.98);
}

/* ── Library — Category Tabs ─────────────────────────────────────────────── */
.lib-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.btn-lib-create {
  flex-shrink: 0;
  margin-top: 4px;
  padding: 7px 12px;
  background: #002147;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.btn-lib-create:hover { opacity: 0.85; }

.lib-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.lib-tab {
  min-height: 48px;
  padding: 0 4px;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.lib-tab:last-child {
  border-right: none;
}

.lib-tab.active {
  background: var(--orange);
  color: #fff;
}

/* ── Library — My Drills ─────────────────────────────────────────────────── */

.lib-my-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 32px 0;
}

.lib-my-drill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.lib-my-drill-row:last-child { border-bottom: none; }

.lib-my-drill-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.lib-my-drill-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.badge-mine {
  font-size: 0.68rem;
  font-weight: 700;
  background: #E8F0FE;
  color: #002147;
  padding: 2px 6px;
  border-radius: 4px;
}

.lib-my-drill-reps {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.lib-my-drill-del {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: #CCC;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.lib-my-drill-del:hover { color: #E53935; }

/* ── Library — Level Groups ──────────────────────────────────────────────── */
.level-group {
  margin-bottom: 8px;
}

.level-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
}

.level-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.level-group-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.4;
}

.level-group-badge.current {
  background: var(--orange-light);
  color: var(--orange);
}

.level-group-badge.locked {
  background: #F0F0F0;
  color: var(--text-muted);
}

/* ── Drill Cards ──────────────────────────────────────────────────────────── */
.drill-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drill-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
}

.drill-card.current-level {
  border-left: 3px solid var(--orange);
}

/* .drill-card.locked-level removed — all drills are accessible regardless of level */

.drill-card-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.drill-card-summary:active {
  background: #F5F5F5;
}

.drill-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.3;
}

.drill-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-level {
  background: var(--orange-light);
  color: var(--orange);
}

.badge-partner {
  background: #EBEBEB;
  color: #666;
}

.badge-video {
  background: #E8F0FF;
  color: #3355CC;
}

.expand-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.drill-card.expanded .expand-chevron {
  transform: rotate(180deg);
}

.drill-card-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}

.drill-card.expanded .drill-card-detail {
  display: block;
}

.drill-reps {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding-top: 12px;
}

.drill-cue {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #FAFAFA;
  border-left: 3px solid var(--border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}

.btn-watch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.6;
  text-decoration: none;
}

.btn-watch.btn-watch-link {
  border-color: var(--orange);
  color: var(--orange);
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s;
}

.btn-watch.btn-watch-link:hover {
  background: var(--orange-light);
}

/* ── Drill Cards ──────────────────────────────────────────────────────────── */
.drill-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drill-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 44px;
}

.drill-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.drill-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.drill-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: capitalize;
}

.badge-level {
  background: var(--orange-light);
  color: var(--orange);
}

.badge-partner {
  background: #E8F0FF;
  color: #3355CC;
}

.drill-reps {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.drill-cue {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.45;
}

/* ── Session Setup ────────────────────────────────────────────────────────── */
.session-setup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: -8px;
}

.field-select {
  min-height: 52px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 1rem;
  padding: 0 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.session-drills-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* ── Progress Screen ──────────────────────────────────────────────────────── */
.progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

.progress-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
}

.progress-stat {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 6px;
}

.progress-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── Level Bars ───────────────────────────────────────────────────────────── */
.level-list {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
}

.level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.level-row + .level-row {
  border-top: 1px solid var(--border);
}

.level-cat {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  width: 76px;
  flex-shrink: 0;
}

.level-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.level-bar {
  height: 100%;
  background: var(--orange);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}

.level-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--orange);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Progress Dashboard ───────────────────────────────────────────────────── */

.prog-content {
  padding-bottom: calc(var(--nav-h) + 20px);
}

/* Streak banner */
.prog-streak-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--orange);
  color: #fff;
  padding: 24px 20px;
}

.prog-streak-flame {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}

.prog-streak-count {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}

.prog-streak-sub {
  font-size: 0.85rem;
  opacity: 0.88;
  margin-top: 3px;
}

/* Sections */
.prog-section {
  padding: 20px 16px 0;
}

.prog-section--last {
  padding-bottom: 4px;
}

.prog-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* This Week */
.prog-week-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.prog-week-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px 14px;
  text-align: center;
}

.prog-week-emoji {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.prog-week-count {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
}

.prog-week-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 4px;
}

.prog-week-goal {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* My Levels */
.prog-levels-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.prog-level-row {
  padding: 13px 14px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 5px;
}

.prog-level-row + .prog-level-row {
  border-top: 1px solid var(--border);
}

.prog-level-cat {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  align-self: center;
}

.prog-level-badge {
  font-size: 0.65rem;
  font-weight: 800;
  background: var(--orange);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  align-self: center;
  white-space: nowrap;
}

.prog-level-bar-wrap {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.prog-level-bar {
  height: 100%;
  background: var(--orange);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.prog-level-sub {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Recent Sessions */
.prog-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prog-session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
}

.prog-sess-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.prog-sess-dot--bball   { background: var(--orange); }
.prog-sess-dot--agility { background: #34A853; }

.prog-sess-info {
  flex: 1;
  min-width: 0;
}

.prog-sess-date {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 1px;
}

.prog-sess-type {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prog-sess-meta {
  text-align: right;
  flex-shrink: 0;
}

.prog-sess-time {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.prog-sess-drills {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

.prog-empty {
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 24px 0 8px;
}

/* ── Training Log Section ──────────────────────────────────────────────────── */

.tlog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tlog-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: opacity 0.3s;
}

.tlog-entry-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tlog-entry-date {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.tlog-entry-sport {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tlog-entry-stats {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.tlog-entry-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tlog-source-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.tlog-source-session  { background: #E8F4EA; color: #2D6A35; }
.tlog-source-watch    { background: #EEE8F8; color: #5C3F99; }
.tlog-source-manual   { background: #E8F0FE; color: #1A3C6E; }

@media (prefers-color-scheme: dark) {
  .tlog-source-session  { background: #1A3A1E; color: #6EC97A; }
  .tlog-source-watch    { background: #2A1E44; color: #B59EE8; }
  .tlog-source-manual   { background: #1A2A44; color: #7FA8E8; }
}

:root[data-theme="dark"] .tlog-source-session  { background: #1A3A1E; color: #6EC97A; }
:root[data-theme="dark"] .tlog-source-watch    { background: #2A1E44; color: #B59EE8; }
:root[data-theme="dark"] .tlog-source-manual   { background: #1A2A44; color: #7FA8E8; }
:root[data-theme="light"] .tlog-source-session  { background: #E8F4EA; color: #2D6A35; }
:root[data-theme="light"] .tlog-source-watch    { background: #EEE8F8; color: #5C3F99; }
:root[data-theme="light"] .tlog-source-manual   { background: #E8F0FE; color: #1A3C6E; }

.tlog-show-more-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
}

.tlog-show-more-btn:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.tlog-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.tlog-action-btn:hover { opacity: 1; }

/* Extra bottom clearance on session screen (nav + back button) */
#screen-session .screen-inner {
  padding-bottom: calc(var(--nav-h) + 56px);
}

/* ── Session Back Button ──────────────────────────────────────────────────── */

.btn-back-session {
  position: fixed;
  bottom: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--bg);
  border: none;
  border-top: 1px solid var(--border);
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.btn-back-session:active {
  background: var(--surface);
  color: var(--text-primary);
}

/* ── Bottom Navigation ────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  min-height: 44px;
  padding: 0;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn.active {
  color: var(--orange);
}

.nav-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.nav-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Session Runner ──────────────────────────────────────────────────────── */
.sess-view {
  display: none;
}

.sess-view.active {
  display: block;
}

/* Setup */
.sess-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 24px;
}

.sess-label:first-of-type {
  margin-top: 0;
}

.sess-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 4px;
}

.sess-type-btn {
  min-height: 56px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sess-type-btn:last-child {
  border-right: none;
}

.sess-type-btn.active {
  background: var(--orange);
  color: #fff;
}

.sport-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}

.sport-toggle-btn {
  min-height: 48px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sport-toggle-btn:last-child {
  border-right: none;
}

.sport-toggle-btn.active {
  background: var(--orange);
  color: #fff;
}

.badge-hand {
  background: #EAF6EC;
  color: #2E8B4F;
}

.badge-duration {
  background: var(--orange-light);
  color: var(--orange);
}

.sess-focus-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sess-focus-btn {
  min-height: 48px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0 4px;
}

.sess-focus-btn:last-child {
  border-right: none;
}

.sess-focus-btn.active {
  background: #111;
  color: #fff;
}

.sess-partner-row {
  margin-top: 24px;
  margin-bottom: 28px;
}

.sess-check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  min-height: 44px;
}

.sess-check-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  accent-color: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-letsgo {
  display: block;
  width: 100%;
  min-height: 60px;
  background: var(--orange);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.1s;
}

.btn-letsgo:active {
  background: #cc6619;
  transform: scale(0.98);
}

/* Active drill view */
.sess-progress-wrap {
  padding: 16px 20px 0;
  max-width: 768px;
  margin: 0 auto;
}

.sess-progress-bar-bg {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.sess-progress-bar-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 3px;
  transition: width 0.35s ease;
  width: 0%;
}

.sess-progress-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0;
  text-align: right;
}

.sess-drill-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  margin-bottom: 24px;
  text-align: center;
}

.sess-drill-category {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 10px;
}

.sess-drill-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.sess-drill-reps {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.sess-drill-hand-badge {
  display: inline-block;
  font-size: 0.95rem;
  padding: 5px 14px;
  margin-bottom: 10px;
}

.sess-coaching-notes-wrap {
  margin-top: 18px;
  text-align: left;
}

.sess-coaching-toggle {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

.sess-coaching-notes {
  font-size: 0.92rem;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 8px;
}

.sess-timer {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sess-paused-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #E67E22;
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-pause-resume {
  display: block;
  width: 100%;
  min-height: 48px;
  background: #002147;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.15s, transform 0.1s;
}

.btn-pause-resume:active { transform: scale(0.98); }

.btn-pause-resume.resuming {
  background: #2E7D32;
}

.btn-undo {
  display: block;
  width: auto;
  margin: 0 auto 10px;
  padding: 5px 16px;
  background: #F0F0F0;
  color: #666;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-undo:hover { background: #E0E0E0; }

.btn-skip:disabled,
.btn-done:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.sess-action-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-skip {
  min-height: 60px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-skip:active {
  background: var(--bg-surface);
}

.btn-done {
  min-height: 60px;
  background: var(--orange);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn-done:active {
  background: #cc6619;
  transform: scale(0.98);
}

.sess-end-wrap {
  text-align: center;
}

.sess-end-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 44px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Summary view */
.sess-complete-header {
  text-align: center;
  padding: 16px 0 28px;
}

.sess-complete-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 12px;
}

.sess-complete-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.sess-total-time {
  font-size: 1rem;
  color: var(--text-secondary);
}

.sess-summary-section {
  margin-bottom: 20px;
}

.sess-summary-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sess-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}

.sess-summary-item:first-of-type {
  border-top: 1px solid var(--border);
}

.sess-summary-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.sess-summary-item-time {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.sess-empty {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding: 8px 0 20px;
  font-style: italic;
}

/* ── Home Screen ─────────────────────────────────────────────────────────── */
.home-greeting {
  margin-bottom: 28px;
}

.home-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.home-date {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ── Week Strip ───────────────────────────────────────────────────────────── */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  margin-bottom: 28px;
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  justify-content: center;
}

.week-day-abbr {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.week-day-num {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}

.week-day.is-today .week-day-num {
  background: var(--orange);
  color: #fff;
}

.week-day-dots {
  display: flex;
  gap: 3px;
  min-height: 7px;
  align-items: center;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-basketball {
  background: var(--orange);
}

.dot-agility {
  background: #34A853;
}

/* ── Today's Plan ─────────────────────────────────────────────────────────── */
.today-plan {
  margin-bottom: 24px;
}

.plan-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.plan-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.plan-item:first-of-type {
  border-top: 1px solid var(--border);
}

.plan-item-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.plan-item-text {
  flex: 1;
}

.plan-item-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.plan-item-duration {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.plan-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.btn-basketball {
  display: block;
  width: 100%;
  min-height: 56px;
  background: var(--orange);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.12s;
}

.btn-basketball:active {
  background: #cc6619;
  transform: scale(0.98);
}

.btn-agility {
  display: block;
  width: 100%;
  min-height: 52px;
  background: #fff;
  color: #2A9040;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #34A853;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.12s;
}

.btn-agility:active {
  background: #F0FFF4;
  transform: scale(0.98);
}

.rest-message {
  text-align: center;
  padding: 32px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rest-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.rest-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.rest-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ── Streak Bar ───────────────────────────────────────────────────────────── */
.streak-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  min-height: 56px;
}

.streak-emoji {
  font-size: 1.4rem;
  line-height: 1;
}

.streak-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.streak-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: auto;
}

/* ── iPad optimisations (≥ 768px) ────────────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --header-h: 60px;
    --nav-h: 72px;
  }

  .top-header {
    padding: 0 32px;
  }

  .header-logo {
    font-size: 1.2rem;
  }

  .screen-inner {
    padding: 32px 32px 40px;
  }

  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .nav-btn {
    gap: 5px;
  }

  .nav-icon {
    width: 24px;
    height: 24px;
  }

  .nav-label {
    font-size: 0.75rem;
  }
}

/* ── App shell visibility ─────────────────────────────────────────────────── */
.app-shell {
  display: none;
}

.app-shell.visible {
  display: flex;
}

.main-content.app-shell.visible {
  display: block;
}

/* ── Auth screens ─────────────────────────────────────────────────────────── */
.auth-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 60px;
}

.auth-screen.active {
  display: flex;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.auth-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-input {
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--orange);
}

.auth-error {
  font-size: 0.875rem;
  color: #d93025;
  min-height: 20px;
  margin-bottom: 8px;
}

/* Sign-out warning on the login screen (utils/auth.js _showLogoutWarning).
   A warning, not an error: the sign-out itself worked on this device, so this
   is amber rather than .auth-error's red. [hidden] is honoured explicitly
   because .auth-notice sets display. */
.auth-notice {
  display: block;
  text-align: left;
  background: #FFF6E5;
  border: 1px solid #E8B84B;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.auth-notice[hidden] { display: none; }
.auth-notice-text {
  font-size: 0.83rem;
  line-height: 1.45;
  color: #5C4708;
  margin: 0;
}

.auth-success {
  font-size: 0.875rem;
  color: #1a7a4a;
  min-height: 20px;
  margin-bottom: 8px;
  font-weight: 500;
}

.btn-auth {
  width: 100%;
  height: 52px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.15s;
}

.btn-auth:active {
  opacity: 0.85;
}

.btn-auth:disabled {
  opacity: 0.5;
  cursor: default;
}

.auth-switch {
  margin-top: 20px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.auth-switch a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}

.parent-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* ── Logout button in header ──────────────────────────────────────────────── */
.header-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.header-logout-btn:active {
  color: var(--orange);
  background: var(--orange-light);
}

.header-logout-btn svg {
  width: 20px;
  height: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.header-settings-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.header-settings-btn:active {
  color: var(--orange);
  background: var(--orange-light);
}

.header-settings-btn svg {
  width: 20px;
  height: 20px;
}

.header-signin-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-right: 4px;
}

.header-signin-btn:active { opacity: 0.85; }

/* Guest banner */
.guest-banner {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--orange);
  color: #fff;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 99;
}

.guest-banner-btn {
  background: #fff;
  color: var(--orange);
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Connectivity banner (utils/net.js) — the guest banner's shape, inverted
   surface so it reads in both themes. Above #gp-overlay (9000) on purpose: the
   planner has no outbox and its "Plan not saved" toast cannot say why. The live
   game's #sg-overlay suppresses it via data-net-quiet instead. */
.net-banner {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--text-primary);
  color: var(--bg);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 9500;
}
.net-banner[hidden] { display: none; }
.net-banner-btn {
  background: var(--bg);
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.net-banner-btn:disabled { opacity: 0.6; cursor: default; }

/* "Browse as Guest" link on login screen */
.auth-guest-link {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
}

.auth-guest-link a {
  color: #002147;
  text-decoration: underline;
  font-weight: 500;
}

.auth-guest-link a:hover { opacity: 0.75; }

/* ── Login screen — Otis Athletic Labs brand ──────────────────────────────────
   Scoped to #screen-login only, deliberately not to .auth-logo/.btn-auth/
   .form-input/.auth-switch/.auth-guest-link directly — those classes are
   shared with screen-register-parent, screen-register-kid, and .btn-auth is
   reused inside modals elsewhere in the app (see the comment at .modal-body
   .btn-auth below). Redefining them globally would restyle every one of those
   screens; overriding here under the #screen-login id changes only this one.
   Earned Gold (#E8B84B) is deliberately not used anywhere in this block — the
   brand guide reserves it for earned moments, and nothing on the login screen
   is one. */
#screen-login {
  background: #F6F4EF; /* Otis Paper */
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#screen-login .auth-logo {
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800; /* Archivo ExtraBold */
  color: #002147; /* Otis Navy */
}

#screen-login .auth-title {
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800;
  color: #002147; /* Otis Navy */
  /* Every headline-scale Archivo 800 element in the canonical brand reference
     (design_handoff_soccer_in_game/GRS Trainer Soccer In-Game.dc.html — e.g.
     "FORMATION SETUP", "GAME OPTIONS", the dialog title) carries this exact
     tightened tracking. This element didn't have it; the wordmark above did,
     inherited from the pre-existing shared .auth-logo rule. */
  letter-spacing: -0.01em;
}

#screen-login .btn-auth {
  /* Navy is the primary/dominant brand color; Sky is the accent, not a
     button fill — per the brand guide's "keep navy dominant, sky is the
     accent" rule. Text/hover/disabled states are untouched. */
  background: #002147; /* Otis Navy */
}

#screen-login .form-input:focus {
  border-color: #2E8FC4; /* Otis Sky */
}

#screen-login .auth-switch a,
#screen-login .auth-guest-link a {
  color: #2E8FC4; /* Otis Sky */
}

/* Account deletion section inside account settings modal */
.acct-delete-section {
  border: 1px solid #FEE2E2;
  border-radius: 10px;
  padding: 14px;
  background: #FFF5F5;
}

.acct-delete-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #B91C1C;
  margin-bottom: 6px;
}

.acct-delete-warning {
  font-size: 0.85rem;
  color: #7F1D1D;
  line-height: 1.5;
}

.acct-delete-btn {
  background: #DC2626;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.acct-delete-btn:hover { opacity: 0.88; }

/* ── Parent Dashboard ─────────────────────────────────────────────────────── */

/* Override auth-screen to be column, not centered */
#screen-parent-dashboard.auth-screen {
  padding: 0;
  align-items: stretch;
}

.pd-shell {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
}

.pd-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  flex-shrink: 0;
}

.pd-header-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pd-header-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1;
  margin-top: -2px;
}

.pd-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-header-delete-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-size: 0.73rem;
  font-weight: 500;
  color: #EF9A9A;
  cursor: pointer;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.pd-header-delete-btn:hover {
  color: #C62828;
  background: #FFF3F3;
}

.pd-body {
  flex: 1;
  padding: 20px 16px 80px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.pd-welcome {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pd-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 20px 0 12px;
}

.pd-loading {
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding: 24px 0;
  text-align: center;
}

.pd-empty {
  text-align: center;
  padding: 40px 20px;
}

.pd-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.pd-empty-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pd-empty-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Child card */
.child-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.child-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.child-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.child-card-username {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.child-card-age {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-radius: 20px;
  padding: 2px 10px;
  font-weight: 500;
}

/* Quick stats row */
.child-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.child-stat {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.child-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
}

.child-stat-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 3px;
  text-align: center;
}

/* Category levels */
.child-levels {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.child-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.child-level-cat {
  font-size: 0.78rem;
  color: var(--text-secondary);
  width: 56px;
  flex-shrink: 0;
}

.child-level-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.child-level-bar {
  height: 100%;
  background: var(--orange);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.child-level-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  width: 16px;
  text-align: right;
}

/* View details toggle */
.btn-view-details {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}

.btn-view-details:active,
.btn-view-details.open {
  border-color: var(--orange);
  color: var(--orange);
}

/* Sessions detail panel */
.child-detail-panel {
  margin-top: 10px;
  display: none;
}

.child-detail-panel.open {
  display: block;
}

.child-detail-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.child-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.child-session-item:last-child {
  border-bottom: none;
}

.child-session-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.child-session-type {
  font-weight: 600;
  color: var(--text-primary);
}

.child-session-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.child-session-right {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: right;
}

.child-session-drills {
  font-weight: 600;
  color: var(--orange);
}

.child-no-sessions {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0;
}

/* Add child button */
.btn-add-child {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  background: none;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}

.btn-add-child:active {
  border-color: var(--orange);
  color: var(--orange);
}

/* ── Admin Dashboard ──────────────────────────────────────────────────────── */

#screen-admin-dashboard.auth-screen {
  padding: 0;
  align-items: stretch;
}

/* "Admin" badge next to logo */
.ad-sub {
  background: var(--orange);
  color: #fff;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ad-panel-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* ── Stats row ────────────────────────────────────────────────────────────── */

.ad-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.ad-stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ad-stat-skeleton {
  min-height: 70px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ad-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
}

.ad-stat-label {
  font-size: 0.77rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.ad-stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Search ───────────────────────────────────────────────────────────────── */

.ad-search-wrap {
  margin-bottom: 10px;
}

.ad-search-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text-primary);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.ad-search-input:focus {
  border-color: var(--orange);
}

/* ── User table rows ──────────────────────────────────────────────────────── */

.ad-user-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.ad-user-row:active {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(232,119,34,0.18);
}

.ad-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  color: #fff;
}

.ad-avatar-kid    { background: var(--orange); }
.ad-avatar-parent { background: #5a7bbf; }
.ad-avatar-admin  { background: #555; }

.ad-user-info {
  flex: 1;
  min-width: 0;
}

.ad-user-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-user-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-user-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.ad-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.ad-chip-role-kid    { background: var(--orange-light); color: var(--orange); }
.ad-chip-role-parent { background: #e8eeff; color: #5a7bbf; }
.ad-chip-role-admin  { background: #eee; color: #555; }

.ad-chip-streak { background: var(--orange-light); color: var(--orange); }

.ad-no-results {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 0;
  font-size: 0.9rem;
}

/* ── Detail slide-up panel ────────────────────────────────────────────────── */

.ad-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
}

.ad-detail-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(768px, 100%);
  max-height: 70vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  z-index: 201;
  overflow-y: auto;
  padding: 0 16px 32px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.16);
}

.ad-detail-close-row {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 12px 0 10px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.ad-detail-close-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
}

.ad-detail-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ad-detail-username {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.ad-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.ad-detail-pill {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.ad-detail-pill-role-kid    { background: var(--orange-light); color: var(--orange); }
.ad-detail-pill-role-parent { background: #e8eeff; color: #5a7bbf; }
.ad-detail-pill-role-admin  { background: #eee; color: #555; }
.ad-detail-pill-age  { background: #f5f5f5; color: var(--text-secondary); }

.ad-detail-section {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 14px 0 8px;
}

.ad-detail-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.ad-detail-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.ad-detail-team-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ad-detail-team-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ad-detail-coach-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ad-detail-owner-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #7b4f00;
  background: #fff3e0;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ad-detail-make-coach-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1565c0;
  background: #e3f2fd;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.ad-detail-make-coach-btn:hover {
  background: #bbdefb;
}
.ad-detail-no-team-coach-row { margin-top: 4px; }
.ad-detail-no-team-coach-row .ad-detail-make-coach-btn { white-space: normal; text-align: left; line-height: 1.3; }

.ad-detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.ad-detail-stat-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}

.ad-detail-stat-box-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--orange);
}

.ad-detail-stat-box-lbl {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.ad-detail-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ad-detail-level-cat {
  width: 72px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ad-detail-level-bar-wrap {
  flex: 1;
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.ad-detail-level-bar {
  height: 100%;
  background: var(--orange);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.ad-detail-level-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}

/* child-session-item reuse works here */

/* ── Workout Overview ─────────────────────────────────────────────────────── */

.overview-header {
  margin-bottom: 16px;
}

.overview-meta {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 4px 0 0;
}

.overview-empty {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  padding: 24px 0 12px;
}

.overview-drill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.overview-move-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.overview-move-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 28px;
  height: 22px;
  font-size: 0.65rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.overview-move-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.overview-move-btn:not(:disabled):active {
  background: var(--surface);
}

.overview-drill-info {
  flex: 1;
  min-width: 0;
}

.overview-drill-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-drill-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.overview-remove-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #e05252;
  cursor: pointer;
  padding: 4px 6px;
  -webkit-tap-highlight-color: transparent;
}

.overview-remove-btn:active {
  opacity: 0.6;
}

/* Tappable reps button — styled as inline text */
.overview-reps-btn {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  line-height: inherit;
  vertical-align: baseline;
}
.overview-reps-btn:active {
  opacity: 0.6;
}
.overview-reps-pencil {
  font-size: 0.7rem;
  opacity: 0.5;
  margin-left: 2px;
}

/* Inline reps editor */
.overview-reps-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.overview-reps-input {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--orange);
  border-radius: 4px;
  padding: 2px 6px;
  width: 9ch;
  outline: none;
}
.overview-reps-confirm {
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--orange);
  background: none;
  border: 1px solid var(--orange);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1;
  min-height: 0;
  touch-action: manipulation;
}
.overview-reps-confirm:active {
  background: var(--orange);
  color: #fff;
}

.overview-add-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-overview-add {
  flex: 1;
  padding: 12px 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}

.btn-overview-add:active {
  background: var(--border);
}

/* ── Modals (Add Drill / Create Drill) ───────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
}

.modal-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 16px;
}

.modal-cat-header {
  position: sticky;
  top: 0;
  background: var(--surface);
  padding: 10px 20px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

.modal-drill-row {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.modal-drill-info {
  flex: 1;
  min-width: 0;
}

.modal-drill-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-drill-reps {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.modal-drill-add-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-drill-add-btn:active {
  opacity: 0.75;
}

.modal-drill-check-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #34A853;
  color: white;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-drill-check-btn:active {
  opacity: 0.75;
  background: #2d8e47;
}

.modal-empty {
  padding: 32px 20px;
  color: var(--text-secondary);
  text-align: center;
}

/* modal reuses .form-group, .form-label, .form-input, .btn-auth, .auth-error */
.modal-body .form-group { padding: 0 20px; margin-top: 16px; }
.modal-body .btn-auth   { margin: 16px 20px 0; width: calc(100% - 40px); }
.modal-body .auth-error { padding: 0 20px; }

/* ── Admin Tabs ───────────────────────────────────────────────────────────── */

.ad-tab-bar {
  display: flex;
  gap: 0;
  margin: 16px 0 0;
  border-bottom: 2px solid var(--border);
}

.ad-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, border-color 0.15s;
}

.ad-tab.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ── Admin Custom Drills Table ────────────────────────────────────────────── */

.ad-custom-drills-table {
  margin-top: 4px;
}

.ad-cd-head,
.ad-cd-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.9fr 0.75fr;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.ad-cd-head {
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ad-cd-row {
  color: var(--text-primary);
}

.ad-cd-row:active {
  background: var(--surface);
}

.ad-cd-kid  { font-weight: 600; }
.ad-cd-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-cd-reps { color: var(--text-secondary); font-size: 0.78rem; }
.ad-cd-date { color: var(--text-muted, var(--text-secondary)); font-size: 0.75rem; }

/* ── User Drills table (Admin) ───────────────────────────────────────────── */

.ad-ud-table {
  margin-top: 4px;
}

.ad-ud-head,
.ad-ud-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.9fr 0.7fr 1.1fr;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.ad-ud-head {
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ad-ud-row { color: var(--text-primary); }

.ad-ud-kid  { font-weight: 600; }
.ad-ud-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-ud-reps { color: var(--text-secondary); font-size: 0.78rem; }
.ad-ud-date { color: var(--text-muted, var(--text-secondary)); font-size: 0.75rem; }
.ad-ud-action { display: flex; align-items: center; }

.ad-ud-atl-btn {
  background: #002147;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ad-ud-atl-btn:hover { background: #1a3260; }

.badge-in-lib {
  display: inline-block;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.atl-success {
  margin-top: 12px;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
}

/* ── Archive UI (user Library My Drills) ─────────────────────────────────── */

.lib-my-drill-archive {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-secondary);
  transition: background 0.15s;
}
.lib-my-drill-archive:hover { background: var(--bg-surface); }

.lib-archive-row {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
}

.lib-view-archive-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.lib-view-archive-btn:hover { background: var(--bg-surface); }

.lib-archived-section {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.lib-archived-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding: 0 4px;
}

.lib-archived-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.lib-archived-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.lib-restore-btn {
  background: #E8F5E9;
  color: #2E7D32;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.lib-restore-btn:hover { background: #C8E6C9; }

.lib-perm-del-btn {
  background: #FFEBEE;
  color: #C62828;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.lib-perm-del-btn:hover { background: #FFCDD2; }

/* ── Archive UI (admin) ──────────────────────────────────────────────────── */

.ad-dl-archive-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.ad-dl-archive-btn:hover { background: var(--bg-surface); }

.ad-ud-archive-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  color: var(--text-secondary);
}
.ad-ud-archive-btn:hover { background: var(--bg-surface); }

.ad-archive-toggle-row {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

.ad-archive-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.ad-archive-toggle-btn:hover { background: var(--bg-surface); }

.ad-archive-section-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: 8px 16px 4px;
  border-top: 1px solid var(--border);
}

.ad-archived-drill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.ad-archived-drill-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ad-archived-drill-name {
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-archived-drill-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ad-restore-btn {
  background: #E8F5E9;
  color: #2E7D32;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ad-restore-btn:hover { background: #C8E6C9; }

.ad-perm-del-btn {
  background: #FFEBEE;
  color: #C62828;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ad-perm-del-btn:hover { background: #FFCDD2; }

/* ── My Sessions ─────────────────────────────────────────────────────────── */

.my-sessions-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #eee);
}

.my-sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.my-sessions-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.btn-build-new {
  background: transparent;
  border: 2px solid var(--color-primary, #002147);
  color: var(--color-primary, #002147);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
}

.btn-build-new:active {
  background: var(--color-primary, #002147);
  color: #fff;
}

.my-sessions-empty {
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-align: center;
  padding: 16px 0 8px;
  margin: 0;
}

.plan-empty-sport {
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-align: center;
  padding: 16px 0 8px;
}

.my-session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface, #f7f7f7);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  gap: 10px;
}

.my-session-info {
  flex: 1;
  min-width: 0;
}

.my-session-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-session-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.my-session-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-sess-start {
  background: var(--color-primary, #002147);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 36px;
}

.btn-sess-start:active { opacity: 0.85; }

.btn-sess-delete {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text-secondary);
  touch-action: manipulation;
  min-height: 36px;
}

.btn-sess-delete:active { background: #fee; border-color: #f99; }

/* ── Toast ───────────────────────────────────────────────────────────────── */

.app-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #222;
  color: #fff;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 500;
  white-space: nowrap;
}

.app-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Custom Session Builder ──────────────────────────────────────────────── */

.cb-screen {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, #eee);
  background: #fff;
  flex-shrink: 0;
}

.cb-back-btn {
  background: none;
  border: none;
  color: var(--color-primary, #002147);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 4px;
  flex-shrink: 0;
  touch-action: manipulation;
}

.cb-name-input {
  flex: 1;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface, #f7f7f7);
  outline: none;
  min-width: 0;
}

.cb-name-input:focus {
  border-color: var(--color-primary, #002147);
  background: #fff;
}

.cb-tabs-wrap {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, #eee);
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cb-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  white-space: nowrap;
}

.cb-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: color 0.15s;
}

.cb-tab.active {
  color: var(--color-primary, #002147);
  border-bottom-color: var(--color-primary, #002147);
}

.cb-drill-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 100px;
}

.cb-cat-header {
  padding: 10px 16px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface, #f7f7f7);
  position: sticky;
  top: 0;
  z-index: 1;
}

.cb-drill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #f0f0f0);
  gap: 10px;
}

.cb-drill-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cb-drill-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.cb-drill-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: #f0f0f0;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.cb-drill-reps {
  font-size: 0.78rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

.cb-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
  touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.cb-toggle-btn.selected {
  border-color: var(--color-primary, #002147);
  background: var(--color-primary, #002147);
  color: #fff;
}

.cb-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 32px 24px;
  margin: 0;
}

.cb-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 768px;
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid var(--border, #eee);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 151;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

.cb-summary {
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cb-save-btn {
  background: var(--color-primary, #002147);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.15s;
}

.cb-save-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cb-save-btn:not(:disabled):active { opacity: 0.85; }

/* ── Admin Custom Sessions table ─────────────────────────────────────────── */

.ad-cs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.82rem;
}

.ad-cs-head {
  display: grid;
  grid-template-columns: 20% 22% 9% 35% 14%;
  background: var(--surface, #f7f7f7);
  border-radius: 6px 6px 0 0;
  padding: 8px 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.ad-cs-row {
  display: grid;
  grid-template-columns: 20% 22% 9% 35% 14%;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #f0f0f0);
  align-items: start;
  gap: 4px;
}

.ad-cs-row:nth-child(even) { background: var(--surface, #fafafa); }

.ad-cs-kid   { font-weight: 600; color: var(--text-primary); word-break: break-word; }
.ad-cs-name  { color: var(--text-primary); word-break: break-word; }
.ad-cs-count { color: var(--text-secondary); text-align: center; }
.ad-cs-names { color: var(--text-secondary); word-break: break-word; }
.ad-cs-date  { color: var(--text-muted, var(--text-secondary)); font-size: 0.72rem; }

.ad-cs-more-btn {
  background: none;
  border: none;
  color: var(--color-primary, #002147);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
}

/* ── Featured session card ───────────────────────────────────────────────── */

.my-session-card--featured {
  border-left: 3px solid var(--color-primary, #002147);
  background: #eef1f7;
}

.badge-featured {
  display: inline-block;
  background: var(--color-primary, #002147);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  vertical-align: middle;
  margin-right: 6px;
  line-height: 1.5;
}

/* ── Session runner — step-by-step instructions ──────────────────────────── */

.sess-drill-instructions {
  margin: 10px 0 0 0;
  padding: 0 0 0 20px;
  list-style: decimal;
  text-align: left;
}

.sess-drill-instructions li {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
  padding-right: 4px;
}

.sess-drill-instructions li:last-child { margin-bottom: 0; }

/* ── Admin Drill Library ─────────────────────────────────────────────────── */

.ad-dl-controls {
  padding: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ad-dl-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
}

.ad-dl-cat-tab {
  background: #F5F5F5;
  border: none;
  border-radius: 16px;
  padding: 5px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ad-dl-cat-tab.active {
  background: var(--orange);
  color: #fff;
}

.ad-dl-count {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.ad-dl-drill-card {
  background: #fff;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
}

.ad-dl-drill-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ad-dl-drill-name {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.ad-dl-badge {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ad-dl-badge-level {
  background: #F3F3F3;
  color: #555;
}

.ad-dl-drill-reps {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 4px;
}

.ad-dl-drill-cue {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 6px;
}

.ad-dl-drill-instructions {
  margin: 6px 0 6px 18px;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ad-dl-drill-instructions li {
  margin-bottom: 4px;
}

.ad-dl-video-btn {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  border: 1px solid var(--orange);
  border-radius: 8px;
  padding: 4px 11px;
}

.ad-dl-video-btn:hover { background: var(--orange); color: #fff; }

.ad-dl-drill-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ad-dl-edit-btn,
.ad-dl-delete-btn,
.ad-dl-add-video-btn {
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ad-dl-edit-btn {
  background: var(--orange-light);
  color: var(--orange);
}

.ad-dl-delete-btn {
  background: #FEE2E2;
  color: #B91C1C;
}

.ad-dl-add-video-btn {
  background: transparent;
  color: #999;
  border: 1px dashed #ccc;
}

.ad-dl-edit-btn:hover,
.ad-dl-delete-btn:hover,
.ad-dl-add-video-btn:hover { opacity: 0.8; }

.ad-dl-add-workout-btn {
  background: #E8F5E9;
  color: #2E7D32;
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ad-dl-add-workout-btn:hover { opacity: 0.8; }

/* Drill Library header row */
.ad-dl-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 4px;
}

.ad-dl-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ad-dl-add-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 15px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ad-dl-add-btn:hover { opacity: 0.88; }

/* ── Add / Edit Drill Modal ──────────────────────────────────────────────── */

.dm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dm-box {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}

.dm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #EBEBEB;
}

.dm-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dm-close-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 6px;
}

.dm-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dm-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.dm-hint {
  font-weight: 400;
  color: var(--text-secondary);
}

.dm-required {
  color: #E53E3E;
}

.dm-input,
.dm-select,
.dm-textarea {
  width: 100%;
  border: 1px solid #DDD;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-primary);
  background: #fff;
  box-sizing: border-box;
}

/* iOS WebKit centres the value inside <input type="date"> whatever the input's
   text-align says; Chrome and desktop Safari keep it at the start. Left on
   every surface (Sep 13 2026). Not asserted by the walkthrough — Chrome cannot
   render WebKit's date control — verified by hand on a device. */
.dm-input[type="date"]::-webkit-date-and-time-value { text-align:left; }

.dm-input:focus,
.dm-select:focus,
.dm-textarea:focus {
  outline: 2px solid var(--orange);
  border-color: transparent;
}

.dm-textarea { resize: vertical; min-height: 60px; }

.dm-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}

.dm-error {
  font-size: 0.82rem;
  color: #B91C1C;
  min-height: 18px;
}

.dm-footer {
  padding: 12px 18px;
  border-top: 1px solid #EBEBEB;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.dm-cancel-btn {
  background: none;
  border: 1px solid #DDD;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
}

.dm-save-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.dm-save-btn:hover,
.dm-cancel-btn:hover { opacity: 0.85; }

/* ── Admin Build Workout ─────────────────────────────────────────────────── */

.ad-bw-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .ad-bw-layout { grid-template-columns: 1fr; }
}

.ad-bw-picker,
.ad-bw-builder {
  background: #FAFAFA;
  border: 1px solid #EBEBEB;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 300px;
}

.ad-bw-panel-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.ad-bw-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F0F0F0;
}

.ad-bw-pick-row:last-child { border-bottom: none; }

.ad-bw-pick-info { flex: 1; min-width: 0; }

.ad-bw-pick-name {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-bw-pick-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ad-bw-pick-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-bw-pick-btn--added {
  background: #E8F5E9;
  color: #2E7D32;
  cursor: default;
}

/* Expandable drill detail in BW picker */
.ad-bw-pick-expand {
  padding: 8px 0 10px 4px;
  border-bottom: 1px solid #F0F0F0;
  margin-top: -1px;
}
.ad-bw-expand-cue {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.ad-bw-expand-instr {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding-left: 18px;
  margin: 0 0 8px;
  line-height: 1.5;
}
.ad-bw-expand-add-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.ad-bw-name-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #DDD;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
}

.ad-bw-name-input:focus { border-color: var(--orange); }

.ad-bw-drill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #F0F0F0;
}

.ad-bw-drill-row:last-child { border-bottom: none; }

.ad-bw-move-btns { display: flex; flex-direction: column; gap: 2px; }

.ad-bw-move-btn {
  background: none;
  border: 1px solid #DDD;
  border-radius: 5px;
  font-size: 0.65rem;
  padding: 1px 5px;
  cursor: pointer;
  color: var(--text-secondary);
}

.ad-bw-move-btn:disabled { opacity: 0.3; cursor: default; }

.ad-bw-drill-info { flex: 1; min-width: 0; }

.ad-bw-drill-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-bw-drill-reps {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ad-bw-reps-btn {
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ad-bw-reps-btn:active { opacity: 0.6; }

.ad-bw-remove-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #CCC;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

.ad-bw-remove-btn:hover { color: #E53935; }

.ad-bw-empty {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 20px 0;
}

.ad-bw-meta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}

.ad-bw-save-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.ad-bw-save-btn:disabled { opacity: 0.5; cursor: default; }

.ad-bw-existing-header {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #EBEBEB;
}

.ad-bw-featured-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #F0F0F0;
}

.ad-bw-featured-row:last-child { border-bottom: none; }

.ad-bw-featured-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.ad-bw-featured-name {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ad-bw-featured-count {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ad-bw-featured-del {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #CCC;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

.ad-bw-featured-del:hover { color: #E53935; }

.ad-bw-featured-edit {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: #002147;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  opacity: 0.6;
}

.ad-bw-featured-edit:hover { opacity: 1; }

.ad-bw-cancel-edit {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: #999;
  margin-top: 6px;
  text-decoration: none;
}

.ad-bw-cancel-edit:hover { color: #555; }

/* ── Family Code — Parent Dashboard ─────────────────────────────────────────── */

.pd-code-section {
  padding: 20px 20px 0;
}

.pd-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pd-code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.pd-code-display {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.btn-copy-code {
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-copy-code:hover {
  opacity: 0.88;
}

.pd-code-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* ── Admin Family Code chips ─────────────────────────────────────────────── */

.ad-chip-code {
  background: var(--orange-light);
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.ad-chip-no-code {
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Admin Generate Codes button ─────────────────────────────────────────── */

.ad-gen-codes-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.ad-gen-codes-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.ad-gen-codes-btn:hover {
  opacity: 0.88;
}

.ad-gen-codes-result {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Team Screen ─────────────────────────────────────────────────────────── */

#screen-team {
  overflow-y: auto;
}

.team-screen-body {
  padding: 12px 16px 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Challenge cards */
.team-challenge-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.team-ch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.team-ch-name {
  font-weight: 700;
  font-size: 0.97rem;
}

.team-ch-badge {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.team-ch-badge-weekly { background: var(--orange-light); color: var(--orange); }
.team-ch-badge-season { background: #FFF3E0; color: #E65100; }

.team-ch-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.team-ch-days {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Leaderboard table */
.team-board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.team-board-table thead th {
  text-align: left;
  padding: 4px 6px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.team-board-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.team-board-table tbody tr:last-child { border-bottom: none; }

.team-board-table td {
  padding: 7px 6px;
  vertical-align: middle;
}

.team-board-rank  { color: var(--text-muted); width: 28px; }
.team-board-name  { font-weight: 500; }
.team-board-score { text-align: right; font-weight: 700; color: var(--orange); }

.team-board-me {
  background: var(--orange-light);
}

.team-board-me .team-board-name  { color: var(--orange); }
.team-board-me .team-board-score { color: var(--orange); }

.team-board-empty,
.team-board-more {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px;
}

/* My teams list */
.team-groups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  gap: 12px;
}

.team-group-info { flex: 1; min-width: 0; }

.team-group-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-group-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.team-leave-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.team-leave-btn:hover { border-color: #E53935; color: #E53935; }

.btn-join-team {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.btn-join-team:hover { opacity: 0.88; }

.btn-log-activity {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--primary, var(--navy));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin: 12px 0;
  text-align: center;
}
.btn-log-activity:hover { opacity: 0.88; }

.btn-log-activity-global {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #E8F0FE;
  color: #1A3C6E;
  border: 1px solid #C5D8F8;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn-log-activity-global:hover { background: #D4E4FB; }

/* Empty state */
/* ── Summer Training Chart ───────────────────────────────────────── */

.tr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.tr-table thead th {
  text-align: left;
  padding: 4px 6px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.tr-table tbody tr { border-bottom: 1px solid var(--border); }
.tr-table tbody tr:last-child { border-bottom: none; }
.tr-table td { padding: 7px 6px; vertical-align: middle; }
.tr-table .tr-num { text-align: right; font-weight: 600; }

.tr-me { background: rgba(26, 60, 110, 0.08); }
.tr-me-name { color: var(--primary, #1A3C6E); font-weight: 700; }

.tr-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.tr-chart-section { margin-top: 16px; }

.tr-chart-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.tr-toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tr-toggle-group {
  display: flex;
  gap: 4px;
  background: var(--border);
  border-radius: 8px;
  padding: 3px;
}

.tr-pill {
  padding: 4px 11px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tr-pill.active {
  background: #fff;
  color: var(--orange);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.tr-chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}

.tr-chart-scroll canvas {
  display: block;
  max-width: none;
}

.tr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.tr-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.tr-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Team selector (Part 1) ──────────────────────────────────────── */

/* single-team layout */
.team-selector-single {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 2px;
}

.team-selector-static {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

/* multi-team layout */
.team-selector-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-leave-link {
  flex-shrink: 0;
  background: transparent;
  border: none;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.team-leave-link:hover { color: #E53935; }

.team-all-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0 8px;
}

.team-selector-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 12px 0 14px;
  min-height: 44px;
  flex: 1;
  cursor: pointer;
}

.team-selector-select {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  padding: 10px 28px 10px 0;
  width: 100%;
}

.team-selector-chevron {
  position: absolute;
  right: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Collapsible box cards (Parts 2 & 3) ─────────────────────────── */

.team-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.team-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.team-box-header:active {
  background: var(--border);
}

.team-box-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.training-title {
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--text);
  letter-spacing: normal;
  text-transform: none;
}

.tr-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.tr-table thead th.sortable:hover { color: var(--text); }
.tr-table thead th.sort-active    { color: var(--text); }

.team-box-title-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.team-box-subtitle {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
}

.team-box-badge {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--orange);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

.team-box-chevron {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  display: inline-block;
}

.team-box-chevron.open {
  transform: rotate(180deg);
}

.team-box-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-box-empty {
  font-size: 0.83rem;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0 4px;
}

.team-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 10px;
  text-align: center;
}

.team-empty-icon  { font-size: 2.5rem; }
.team-empty-title { font-weight: 700; font-size: 1rem; }
.team-empty-sub   { font-size: 0.85rem; color: var(--text-secondary); }

/* ── Parent Teams & Challenges sections ──────────────────────────────────── */

.pd-teams-section,
.pd-challenges-section {
  padding: 20px 20px 0;
}

.pd-team-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.pd-team-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.pd-team-name { font-weight: 600; font-size: 0.9rem; }
.pd-team-meta { font-size: 0.75rem; color: var(--text-muted); }

.pd-team-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.pd-team-code {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.pd-view-members-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.pd-view-members-btn:hover { color: var(--orange); }

.pd-team-members {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pd-team-member {
  font-size: 0.8rem;
  background: var(--orange-light);
  color: var(--orange);
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 500;
}

.btn-pd-action {
  display: block;
  width: 100%;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: 8px;
  text-align: center;
}

.btn-pd-action:hover { border-color: var(--orange); color: var(--orange); }

.pd-challenge-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.pd-challenge-name { font-weight: 600; font-size: 0.88rem; }
.pd-challenge-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* ── Admin Challenges tab ────────────────────────────────────────────────── */

.ad-ch-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 0 12px;
  gap: 10px;
}

.ad-ch-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.ad-ch-row-active {
  border-color: #A5D6A7;
  background: #F1F8E9;
}

.ad-ch-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.ad-ch-row-name { font-weight: 600; font-size: 0.9rem; }

.ad-ch-status {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.ad-ch-status-active   { background: #C8E6C9; color: #2E7D32; }
.ad-ch-status-upcoming { background: #E3F2FD; color: #1565C0; }
.ad-ch-status-ended    { background: #F5F5F5; color: #9E9E9E; }

.ad-ch-row-meta    { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 2px; }
.ad-ch-row-creator { font-size: 0.75rem; color: var(--text-muted); }

/* dm-note / dm-success reuse */
.dm-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: var(--orange-light);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.dm-success {
  font-size: 0.85rem;
  color: #2E7D32;
  font-weight: 600;
  padding: 6px 0;
}

.dm-success-box {
  background: #E8F5E9;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: #2E7D32;
  line-height: 1.5;
}

/* ── Challenge Drill / Workout Pickers ─────────────────────────────────────── */

.ch-drill-picker,
.ch-workout-picker {
  background: var(--surface-2, #F8F9FC);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.ch-dp-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Category tabs inside picker */
.ch-dp-cat-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ch-dp-cat-tab {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ch-dp-cat-tab.active,
.ch-dp-cat-tab:hover {
  background: var(--navy-blue, #002147);
  color: #fff;
  border-color: var(--navy-blue, #002147);
}

/* Scrollable drill list */
.ch-dp-list {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.ch-dp-drill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.1s;
}
.ch-dp-drill-item:hover { background: rgba(0, 33, 71, 0.05); }

.ch-dp-drill-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--navy-blue, #002147);
}

.ch-dp-drill-name {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

.ch-dp-drill-cat {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

.ch-dp-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 8px 0;
  text-align: center;
}

/* Selected drill tags */
.ch-dp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
}

.ch-dp-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.ch-dp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 33, 71, 0.10);
  color: var(--navy-blue, #002147);
  border-radius: 20px;
  padding: 2px 8px 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
}

.ch-dp-tag-remove {
  background: none;
  border: none;
  color: var(--navy-blue, #002147);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.ch-dp-tag-remove:hover { opacity: 1; }

/* Detail line under challenge meta */
.team-ch-detail {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
  line-height: 1.35;
}

.pd-challenge-detail {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 1px;
  line-height: 1.3;
}

/* ── Team card edit / delete buttons (parent dashboard) ────────────────────── */

.pd-team-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.pd-team-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pd-team-edit-btn {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pd-team-edit-btn:hover {
  background: var(--navy-blue, #002147);
  color: #fff;
  border-color: var(--navy-blue, #002147);
}

.pd-team-del-btn {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pd-team-del-btn:hover {
  background: #FFEBEE;
  color: #C62828;
  border-color: #EF9A9A;
}

/* ── Admin groups table action buttons ─────────────────────────────────────── */

.ad-group-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ad-group-edit-btn,
.ad-group-del-btn {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ad-group-edit-btn { color: var(--text-secondary); }
.ad-group-edit-btn:hover {
  background: var(--navy-blue, #002147);
  color: #fff;
  border-color: var(--navy-blue, #002147);
}

.ad-group-del-btn { color: var(--text-muted); }
.ad-group-del-btn:hover {
  background: #FFEBEE;
  color: #C62828;
  border-color: #EF9A9A;
}

/* ── Admin challenge row: status + delete aligned right ────────────────────── */

.ad-ch-row-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ad-ch-del-btn {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.ad-ch-del-btn:hover {
  background: #FFEBEE;
  color: #C62828;
  border-color: #EF9A9A;
}

/* ── Parent challenge row: name + status badge ─────────────────────────────── */

.pd-challenge-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.pd-ch-status {
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
  text-transform: uppercase;
  margin-top: 1px;
}
.pd-ch-status-active   { background: #C8E6C9; color: #2E7D32; }
.pd-ch-status-upcoming { background: #E3F2FD; color: #1565C0; }
.pd-ch-status-ended    { background: #F5F5F5; color: #9E9E9E; }

/* ── Parent challenge row: actions (status + edit + delete) ────────────────── */

.pd-ch-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.pd-ch-edit-btn,
.pd-ch-del-btn {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.78rem;
  color: var(--text-muted, #6B7280);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.pd-ch-edit-btn:hover {
  background: #E8EEF6;
  color: #1a3a5c;
  border-color: #9EB4D0;
}
.pd-ch-del-btn:hover {
  background: #FFEBEE;
  color: #C62828;
  border-color: #EF9A9A;
}

/* ── Invite a Parent section (parent dashboard) ────────────────────────────── */

.pd-invite-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #E5E7EB);
}

.pd-invite-text {
  font-size: 0.85rem;
  color: var(--text-muted, #6B7280);
  margin-bottom: 10px;
}

.pd-invite-result {
  margin-top: 12px;
  background: #F0F4FF;
  border: 1px solid #C7D7F7;
  border-radius: 8px;
  padding: 12px 14px;
}

.pd-invite-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.pd-invite-code-display {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #002147;
  font-family: "SF Mono", "Fira Code", monospace;
}

.pd-invite-code-hint {
  font-size: 0.78rem;
  color: #5a6a8a;
  line-height: 1.4;
}

.pd-invite-codes-list {
  margin-top: 14px;
}

.pd-ic-history-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.pd-ic-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border, #F3F4F6);
  font-size: 0.83rem;
}

.pd-ic-history-code {
  font-family: "SF Mono", "Fira Code", monospace;
  font-weight: 700;
  color: #002147;
  letter-spacing: 0.05em;
}

.pd-ic-history-status {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: uppercase;
}
.pd-ic-status-unused  { background: #C8E6C9; color: #2E7D32; }
.pd-ic-status-used    { background: #F5F5F5; color: #9E9E9E; }
.pd-ic-status-expired { background: #FFF8E1; color: #F57F17; }

/* ── Admin Invite Codes tab ────────────────────────────────────────────────── */

.ad-ic-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 4px;
}

.ad-ic-title {
  font-size: 1rem;
  font-weight: 700;
  color: #002147;
}

.ad-ic-table-header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.4fr 0.6fr 0.8fr 0.8fr 0.7fr;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border, #E5E7EB);
  margin-bottom: 4px;
}

.ad-ic-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.4fr 0.6fr 0.8fr 0.8fr 0.7fr;
  gap: 8px;
  padding: 8px 10px;
  align-items: center;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border, #F3F4F6);
}
.ad-ic-row:hover { background: #F9FAFB; }

.ad-ic-code {
  font-family: "SF Mono", "Fira Code", monospace;
  font-weight: 800;
  color: #002147;
  letter-spacing: 0.06em;
  font-size: 0.88rem;
}

.ad-ic-note  { color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-ic-type  { color: #374151; font-size: 0.78rem; }
.ad-ic-uses  { color: #374151; font-weight: 600; }
.ad-ic-expires { color: #6B7280; font-size: 0.78rem; }

.ad-ic-status {
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: uppercase;
  display: inline-block;
}
.ad-ic-status-active    { background: #C8E6C9; color: #2E7D32; }
.ad-ic-status-expired   { background: #FFF8E1; color: #F57F17; }
.ad-ic-status-exhausted { background: #FFEBEE; color: #C62828; }

.ad-ic-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ad-ic-copy-btn,
.ad-ic-del-btn {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.ad-ic-copy-btn:hover { background: #EEF2FF; border-color: #A5B4FC; }
.ad-ic-del-btn:hover  { background: #FFEBEE; color: #C62828; border-color: #EF9A9A; }

/* ── Create Invite Code modal: success box ─────────────────────────────────── */

.ad-ic-success-box {
  background: #F0F7F0;
  border: 1px solid #A5D6A7;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}

.ad-ic-success-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #2E7D32;
  margin-bottom: 6px;
}

.ad-ic-success-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ad-ic-success-code {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #002147;
  font-family: "SF Mono", "Fira Code", monospace;
}

/* ── Parent dashboard: Danger Zone ─────────────────────────────────────────── */

.pd-danger-section {
  margin-top: 28px;
  padding: 16px;
  border: 1.5px solid #FFCDD2;
  border-radius: 10px;
  background: #FFF8F8;
}

.pd-danger-label {
  color: #C62828 !important;
}

.pd-danger-warning {
  font-size: 0.82rem;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 12px;
}

.btn-pd-danger {
  display: inline-block;
  background: transparent;
  border: 1.5px solid #EF9A9A;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #C62828;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-pd-danger:hover {
  background: #FFEBEE;
  border-color: #C62828;
}

/* ── Parent delete modal ────────────────────────────────────────────────────── */

.pd-delete-modal-warning {
  font-size: 0.87rem;
  color: #374151;
  line-height: 1.55;
  background: #FFF3F3;
  border: 1px solid #FFCDD2;
  border-radius: 8px;
  padding: 12px 14px;
}

/* ── Admin user row: delete button ─────────────────────────────────────────── */

.ad-user-del-btn {
  background: transparent;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.78rem;
  color: var(--text-muted, #9CA3AF);
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
  flex-shrink: 0;
}
.ad-user-del-btn:hover {
  background: #FFEBEE;
  color: #C62828;
  border-color: #EF9A9A;
}

/* ── Session List View ───────────────────────────────────────────────────── */

.sesslist-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sesslist-back-btn {
  background: none;
  border: none;
  color: var(--color-primary, #002147);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  flex-shrink: 0;
  touch-action: manipulation;
}

.sesslist-back-btn:hover { text-decoration: underline; }

.sesslist-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.sesslist-loading {
  padding: 32px 0;
  text-align: center;
}

.sesslist-empty-state {
  padding: 24px 0 8px;
}

.sesslist-empty-msg {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 16px;
}

.sesslist-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.1s, border-color 0.1s;
}

.sesslist-card:hover  { background: #F5F7FF; border-color: #B0BFEE; }
.sesslist-card:active { background: #ECF0FF; }

.sesslist-card-main {
  flex: 1;
  min-width: 0;
}

.sesslist-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sesslist-card-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sesslist-card-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-sesslist-new {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}

.btn-sesslist-new:hover {
  border-color: var(--color-primary, #002147);
  color: var(--color-primary, #002147);
}

/* ── Overview save row ───────────────────────────────────────────────────── */

.overview-save-row {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.btn-overview-save {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
}

.btn-overview-save:hover {
  background: #F0F4FF;
  border-color: var(--color-primary, #002147);
  color: var(--color-primary, #002147);
}

/* ── Overview title input (editable session name) ────────────────────────── */

.overview-title-input {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  padding: 4px 0;
  margin-bottom: 4px;
  outline: none;
  box-sizing: border-box;
}

.overview-title-input:focus {
  border-bottom-color: var(--color-primary, #002147);
}

/* ── Create Drill Modal extras ───────────────────────────────────────────── */

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-required {
  color: var(--color-danger, #D32F2F);
  font-weight: 700;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}

.form-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
}

/* ── Drill card detail extras ────────────────────────────────────────────── */

.drill-instructions {
  margin: 6px 0 8px 0;
  padding-left: 20px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.drill-instructions li {
  margin-bottom: 3px;
}

.drill-partner-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* ── My Drills custom card actions ───────────────────────────────────────── */

.lib-custom-drill-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ── Weekly Plan Summary (Sessions tab) ─────────────────────────────────── */

.weekly-plan-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.weekly-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.weekly-plan-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.weekly-plan-edit-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
}

.weekly-plan-edit-btn:hover { background: var(--bg-surface); }

.weekly-plan-empty,
.weekly-plan-loading {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin: 0 0 10px;
}

.btn-plan-create {
  display: block;
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
}

.btn-plan-create:hover {
  border-color: var(--color-primary, #002147);
  color: var(--color-primary, #002147);
}

.weekly-plan-summary { display: flex; flex-direction: column; gap: 5px; }

.wps-day-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 24px;
}

.wps-day-label {
  width: 30px;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding-top: 3px;
}

.wps-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wps-session-pill {
  display: inline-block;
  background: var(--orange-light, #FFF3E0);
  color: var(--orange, #E65100);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.wps-rest-label {
  font-size: 0.78rem;
  color: var(--text-muted, #bbb);
  padding-top: 3px;
}

/* ── Plan Builder Screen ─────────────────────────────────────────────────── */

.cb-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.pb-duration-wrap {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.pb-duration-wrap::-webkit-scrollbar { display: none; }

.pb-duration-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.pb-duration-btn.active {
  background: var(--color-primary, #002147);
  color: #fff;
  border-color: var(--color-primary, #002147);
}

.pb-days-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 16px;
}

.pb-day-section {
  margin-bottom: 18px;
}

.pb-day-header {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.pb-day-sessions { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }

.pb-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}

.pb-session-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  flex: 1;
}

.pb-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted, #ccc);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
  touch-action: manipulation;
}

.pb-remove-btn:hover { color: #c0392b; }

.pb-add-btn {
  display: block;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}

.pb-add-btn:hover { border-color: var(--color-primary, #002147); color: var(--color-primary, #002147); }

.pb-remove-wrap {
  padding: 8px 16px;
  text-align: center;
  flex-shrink: 0;
}

.pb-remove-link {
  background: none;
  border: none;
  font-size: 0.82rem;
  color: #c0392b;
  cursor: pointer;
  text-decoration: underline;
  touch-action: manipulation;
}

/* ── Plan Session Picker ─────────────────────────────────────────────────── */

.psp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.psp-modal {
  width: 100%;
  max-width: 520px;
  height: 75vh;          /* fixed 75% sheet — always fully visible */
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.2);
}

.psp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.psp-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.psp-cat-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  scrollbar-width: none;
}

.psp-cat-tabs::-webkit-scrollbar { display: none; }

.psp-cat-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.psp-cat-btn.active {
  background: var(--color-primary, #002147);
  color: #fff;
}

.psp-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 16px;
}

.psp-session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.psp-session-row:last-child { border-bottom: none; }

.psp-session-info { flex: 1; min-width: 0; }

.psp-session-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.psp-session-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.psp-add-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary, #002147);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}

.psp-added-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #34A853;
  color: #fff;
  border: none;
  font-size: 0.9rem;
  cursor: default;
  display: flex; align-items: center; justify-content: center;
}

.psp-auto-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.psp-auto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.psp-auto-btn {
  padding: 12px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
}

.psp-auto-btn:hover {
  background: var(--color-primary, #002147);
  color: #fff;
  border-color: var(--color-primary, #002147);
}

/* ── Today's Plan — plan-driven session rows ─────────────────────────────── */

.plan-progress {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.plan-item--sess {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  gap: 10px;
}

.plan-item--done {
  opacity: 0.7;
}

.plan-item--sess .plan-item-text {
  flex: 1;
  min-width: 0;
}

.plan-item--sess .plan-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.plan-sess-done-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #34A853;
  background: #E8F5E9;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.btn-plan-sess {
  background: var(--color-primary, #002147);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.btn-plan-sess:active { opacity: 0.8; }

.btn-plan-sess-redo {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 0.9rem;
}

/* ── Countdown timer bar ─────────────────────────────────────────────────── */

.sess-countdown-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  margin: 8px 0 4px;
  overflow: hidden;
}

.sess-countdown-bar-fill {
  height: 100%;
  background: var(--orange, #E65100);
  border-radius: 3px;
  transition: width 0.9s linear, background 0.3s;
  width: 100%;
}

.sess-round-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* ── Rest-period overlay ─────────────────────────────────────────────────── */

.sess-rest-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-surface, #f7f7f7);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 10;
  text-align: center;
  padding: 20px;
}

.sess-rest-icon {
  font-size: 1.8rem;
}

.sess-rest-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
}

.sess-rest-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.sess-rest-countdown {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-primary, #002147);
  font-variant-numeric: tabular-nums;
}

/* ── New Challenge goal input row ───────────────────────────────────────────── */

.ch-goal-row {
  margin-bottom: 4px;
}

.ch-goal-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ch-goal-number {
  flex: 1;
  min-width: 0;
}

.ch-goal-unit {
  flex: 0 0 110px;
}

/* ── Challenge form — subtype toggle & manual log ───────────────────────────── */

.ch-subtype-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.ch-subtype-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.ch-subtype-opt:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange-light, #FFF3EE);
}

.ch-subtype-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ch-subtype-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ch-subtype-opt:has(input:checked) .ch-subtype-label {
  color: var(--orange);
}

.ch-subtype-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.ch-manual-log-row {
  margin-bottom: 12px;
}

.ch-manual-log-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.ch-manual-log-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Challenge card redesign ────────────────────────────────────────────────── */

.team-ch-subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 2px;
}

/* Progress bar */
.team-progress-wrap {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
  max-width: 140px;
}

.team-progress-bar {
  height: 100%;
  background: #FF6B2B;
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* Name cell that stacks name + progress bar */
.team-board-name-cell {
  font-weight: 500;
  line-height: 1.3;
}

/* Winner banner */
.team-board-winner {
  background: #1E7D46;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

/* Auto-log note */
.team-autolog-note {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}

/* Log Activity button */
.team-log-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 0;
  background: transparent;
  border: 1.5px solid var(--orange);
  border-radius: 8px;
  color: var(--orange);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.team-log-btn:hover,
.team-log-btn:active {
  background: var(--orange);
  color: #fff;
}

/* ── Active challenge board toggle ──────────────────────────────── */

.team-ch-board-wrap {
  margin-bottom: 4px;
}

.team-toggle-board-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}

.team-toggle-board-btn:hover {
  border-color: var(--primary, #1A3C6E);
  color: var(--primary, #1A3C6E);
}

/* Summary row (collapsed state) */
.team-ch-summary {
  margin: 6px 0 2px;
}

.team-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.83rem;
}

.team-summary-rank {
  font-weight: 700;
  min-width: 28px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.team-summary-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-summary-score {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.team-summary-leader .team-summary-name,
.team-summary-leader .team-summary-score {
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Past challenges pagination ──────────────────────────────────── */

.past-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.past-show-more-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.past-show-more-btn:hover {
  border-color: var(--primary, #1A3C6E);
  color: var(--primary, #1A3C6E);
}

.past-view-all-link {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-decoration: underline;
}

/* ── Past Challenge Cards (kid Team tab) ─────────────────────────── */

.past-ch-card {
  background: var(--card-bg, #f7f7f7);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  opacity: 0.88;
}

.past-ch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.past-ch-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.past-ch-ended-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #F5F5F5;
  color: #9E9E9E;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.past-ch-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.past-ch-winner-line {
  font-size: 0.83rem;
  color: var(--text);
  margin-bottom: 10px;
  min-height: 1.2em;
}

.past-ch-trophy {
  font-size: 0.9rem;
}

.past-ch-actions {
  display: flex;
  gap: 8px;
}

.past-ch-see-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.past-ch-see-btn:hover {
  border-color: var(--primary, #1A3C6E);
  color: var(--primary, #1A3C6E);
}

.past-ch-board-wrap {
  margin-bottom: 10px;
}

.past-board-table {
  opacity: 0.9;
}

.past-board-winner-row td {
  font-weight: 700;
  color: var(--text);
}

/* ── Parent dashboard Results button ─────────────────────────────── */

.pd-ch-results-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid #9E9E9E;
  background: transparent;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pd-ch-results-btn:hover {
  background: #eee;
}

/* ── Results modal body ───────────────────────────────────────────── */

.results-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 12px;
}

/* ── Challenge Log Preview Modal ─────────────────────────────────────── */

.clp-row {
  padding: 10px 0;
  border-bottom: 1px solid #F0F0F0;
}
.clp-row:last-child { border-bottom: none; }

.clp-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 6px;
}

.clp-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary, #1A3C6E);
  cursor: pointer;
  flex-shrink: 0;
}

.clp-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.clp-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 26px;
}

.clp-amount-input {
  width: 90px !important;
  padding: 6px 10px !important;
  font-size: 0.9rem !important;
}

.clp-metric-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ── Admin sport filter tabs ─────────────────────────────────────────────── */
.ad-dl-sport-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ad-dl-sport-tab {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
}
.ad-dl-sport-tab.active {
  background: var(--primary, #1A3C6E);
  color: #fff;
  border-color: var(--primary, #1A3C6E);
}

/* ── Drill modal: reps/time toggle ───────────────────────────────────────── */
.dm-type-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.dm-type-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 4px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: none;
  border-right: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.dm-type-opt:last-child {
  border-right: none;
}
.dm-type-opt.active {
  background: var(--orange);
  color: #fff;
}
.dm-type-opt input[type="radio"] {
  accent-color: var(--primary, #1A3C6E);
  width: 16px;
  height: 16px;
}

/* ── Coach Shell ─────────────────────────────────────────────────────────── */

.role-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px 0;
  background: var(--bg-primary);
}
.role-switcher-btn {
  flex: 1;
  max-width: 140px;
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.role-switcher-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.coach-team-selector {
  padding: 12px 16px 0;
}
.coach-team-select {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
}
.coach-team-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  padding: 4px 0;
}

.coach-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  padding: 16px 16px 8px;
}

/* ── Coach Home ──────────────────────────────────────────────────────────── */

.ch-section {
  padding: 0 16px 20px;
}
.ch-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 10px;
}
.ch-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.ch-section-action {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 1px solid var(--primary);
  border-radius: 20px;
  padding: 2px 10px;
  cursor: pointer;
}

.ch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 380px) {
  .ch-grid { grid-template-columns: 1fr; }
}

.ch-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow 0.15s;
}
.ch-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}
.ch-card-team { cursor: pointer; }
.ch-card-emoji {
  font-size: 1.4rem;
  margin-bottom: 2px;
}
.ch-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.ch-card-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.ch-card-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.8;
}
.ch-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  align-self: flex-start;
}
.ch-badge-active  { background: #e8f5e9; color: #2e7d32; }
.ch-badge-urgent  { background: #fff3e0; color: #e65100; }
.ch-badge-ended   { background: #f0f0f0; color: #888; }

.ch-empty-card {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────── */

.coach-roster-list {
  padding: 0 16px calc(var(--nav-h) + 80px);
}

/* ── Coaches section (Roster tab) — names only, no role labels ───────────── */
.coach-coaches-box {
  margin: 0 16px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 16px 12px;
  max-height: 160px;
  overflow-y: auto;
}
.coach-coaches-box .coach-section-title {
  padding: 12px 0 8px;
}
.coach-coaches-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coach-coaches-name {
  font-size: 0.9rem;
  color: var(--text-primary);
  padding: 2px 0;
}

.coach-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 40px 24px;
  line-height: 1.5;
}

.coach-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 10px;
}
.coach-coming-soon-icon {
  font-size: 2.5rem;
}
.coach-coming-soon-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.coach-coming-soon-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ── Coach Roster ────────────────────────────────────────────────────────── */

.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.roster-table thead tr {
  border-bottom: 2px solid var(--border);
}
.roster-table th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: 6px 8px;
  text-align: left;
}
.roster-table tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.roster-table tbody tr:hover { background: var(--bg-card); }
.roster-table td {
  padding: 11px 8px;
  color: var(--text-primary);
  vertical-align: middle;
}
.roster-col-num {
  width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.roster-col-pos  { width: 90px; color: var(--text-secondary); font-size: 0.85rem; }
.roster-col-app  { width: 36px; text-align: center; }
.roster-app-check { color: #2e7d32; font-weight: 700; }

/* ── Team Branding Section ─────────────────────────────────────────────── */
.branding-section {
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  margin-bottom: 14px;
}
.branding-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #888);
  margin-bottom: 10px;
}
.branding-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.branding-logo-preview {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid var(--border, #e0e0e0);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #f8f8f8);
}
.branding-logo-empty {
  background: var(--bg-card, #f0f0f0);
}
.branding-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.branding-logo-placeholder {
  font-size: 0.7rem;
  color: var(--text-secondary, #aaa);
  text-align: center;
}
.branding-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.branding-team-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #111);
}
.branding-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.branding-upload-btn {
  display: inline-block;
  flex: unset;
  padding: 6px 14px;
  font-size: 0.8rem;
}
.branding-status {
  font-size: 0.78rem;
  margin-top: 2px;
}
/* ── /Team Branding Section ────────────────────────────────────────────── */

.roster-actions {
  display: flex;
  gap: 10px;
  padding: 16px 0 8px;
}
.roster-action-btn {
  flex: 1;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #f0f0f0;
  color: var(--primary, #1a3c6e);
  transition: background 0.15s;
}
.roster-action-btn:hover { background: #e0e0e0; }
.roster-action-secondary {
  background: #f0f0f0;
  border-color: #ddd;
  color: var(--primary, #1a3c6e);
  opacity: 0.8;
}
.roster-action-secondary:hover { background: #e0e0e0; opacity: 1; }

.roster-share-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.roster-share-none  { background: #f0f0f0; color: #888; }
.roster-share-agg   { background: #e3f2fd; color: #1565c0; }
.roster-share-full  { background: #e8f5e9; color: #2e7d32; }

/* ── Roster Detail Sheet ─────────────────────────────────────────────────── */

.rd-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}
.roster-detail-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: var(--bg-card, #fff);
  border-radius: 16px 16px 0 0;
  z-index: 1000;
  overflow-y: auto;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
.rd-username {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: -4px;
}
.rd-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.rd-meta-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  width: 72px;
  flex-shrink: 0;
}
.rd-meta-value {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.rd-edit-btn {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
}
.rd-remove-area {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rd-remove-btn {
  width: 100%;
  padding: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #c62828;
  background: none;
  border: 1.5px solid #c62828;
  border-radius: 10px;
  cursor: pointer;
}
.dm-cancel-btn {
  padding: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

/* ── Invite Code Modal ───────────────────────────────────────────────────── */

.rd-invite-hint {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 12px;
}
.rd-invite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rd-invite-code {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rd-copy-btn {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

/* Plays tab launch area */
.wb-plays-launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px 0;
}
.wb-launch-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.wb-launch-hint {
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-align: center;
  margin: 0;
}

/* ── Header whiteboard button (coach context only) ──────────────────────── */
.header-whiteboard-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}
.header-whiteboard-btn:hover { opacity: 1; }

/* ── Plays List ─────────────────────────────────────────────────────────── */
.plays-list-header {
  display: flex;
  gap: 10px;
  padding: 16px 16px 8px;
}
.plays-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.plays-list {
  padding: 0 16px 16px;
}
.play-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.play-row:hover { background: var(--bg-secondary); }
.play-row-main  { display: flex; align-items: center; gap: 8px; }
.play-row-name  { font-weight: 600; font-size: 0.95rem; }
.play-row-tag   { font-size: 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; color: var(--text-secondary); }
.play-row-meta  { display: flex; gap: 10px; align-items: center; font-size: 0.8rem; color: var(--text-secondary); }
.play-status-draft     { color: #888; }
.play-status-published { color: #22aa44; font-weight: 600; }
.play-row-delete {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0;
  padding: 2px 4px;
  line-height: 1;
}
.play-row:hover .play-row-delete { opacity: 0.5; }
.play-row-delete:hover { opacity: 1 !important; }

/* ── Delete confirmation dialog ─────────────────────────────────────────── */
.pd-delete-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-delete-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.pd-delete-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.pd-delete-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.pd-delete-body {
  font-size: 0.88rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.5;
}
.pd-delete-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pd-delete-cancel {
  padding: 7px 16px;
  font-size: 0.85rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  color: #555;
  cursor: pointer;
}
.pd-delete-confirm {
  padding: 7px 16px;
  font-size: 0.85rem;
  border: none;
  border-radius: 5px;
  background: #cc2200;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}
.pd-delete-confirm:hover { background: #aa1a00; }
.pd-delete-play-btn {
  font-size: 0.78rem;
  color: #cc2200;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.pd-delete-play-btn:hover { background: rgba(204,34,0,0.1); }

/* ── New Play Dialog ────────────────────────────────────────────────────── */
.np-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}
.np-card {
  position: relative;
  background: var(--bg-primary, #fff);
  border-radius: 16px;
  width: min(420px, 92vw);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.np-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.np-title  { font-size: 1.1rem; font-weight: 700; }
.np-close  { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; }
.np-close:hover { background: var(--bg-secondary); }
.np-body   { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.np-row    { display: flex; flex-direction: column; gap: 6px; }
.np-label  { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.np-select, .np-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  box-sizing: border-box;
}
.np-select:focus, .np-input:focus {
  outline: none;
  border-color: #1a3c6e;
}
.np-players-row { flex-direction: row; gap: 16px; align-items: flex-start; }
.np-player-group { display: flex; flex-direction: column; gap: 6px; }
.np-counter {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  width: 96px;
}
.np-counter-btn {
  background: var(--bg-secondary, #f5f5f5);
  border: none;
  width: 32px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-primary);
  flex-shrink: 0;
}
.np-counter-btn:hover { background: var(--bg-tertiary, #e8e8e8); }
.np-counter-val {
  border: none;
  text-align: center;
  width: 32px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  padding: 0;
  -moz-appearance: textfield;
}
.np-counter-val::-webkit-inner-spin-button,
.np-counter-val::-webkit-outer-spin-button { -webkit-appearance: none; }
.np-player-label-row { display: flex; align-items: center; gap: 6px; }
.np-color-sm { width: 20px; height: 20px; border: 1.5px solid var(--border); padding: 1px; cursor: pointer; border-radius: 4px; background: none; flex-shrink: 0; }
.np-error  { color: #d32f2f; font-size: 0.85rem; }
.np-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}
.np-btn-primary   { background: #1a3c6e; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.np-btn-primary:hover   { background: #254f92; }
.np-btn-secondary { background: none; color: var(--text-secondary); border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 16px; font-size: 0.9rem; cursor: pointer; }
.np-btn-secondary:hover { background: var(--bg-secondary); }

/* ── Play Designer Overlay ──────────────────────────────────────────────── */
.pd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: #1a1a1a;
  flex-direction: column;
  display: none;
}
.pd-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  height: 52px;
  background: #111;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
  position: relative;
}
.pd-back-btn {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 6px;
}
.pd-back-btn:hover { background: #333; color: #fff; }
.pd-play-name {
  flex: 1;
  font-weight: 600;
  color: #fff;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,0.35);
}
.pd-play-name:hover { border-bottom-color: rgba(255,255,255,0.7); }
.pd-play-name-input {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: #fff;
  font-size: 1rem;
  background: #222;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 2px 6px;
}
.pd-play-name-input:focus { outline: none; border-color: #1a6fe8; }
/* A coach's view of a library drill's diagram (Phase 4.2): nothing in it can be
   edited — the edit controls are gone and the canvas takes no input; frames,
   playback, Notes and Timing (read-only) and Export stay. Every width. */
.pd-view-only-label {
  flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
  background: #3a3a3a; color: #ddd; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.pd-view-only .pd-play-name { cursor: default; border-bottom-color: transparent; pointer-events: none; }
.pd-view-only .pd-delete-play-btn, .pd-view-only .pd-status-pill, .pd-view-only .pd-save-btn,
.pd-view-only .pd-add-tools, .pd-view-only .pd-right-tools, .pd-view-only .pd-court-open-btn,
.pd-view-only .pd-add-frame-btn, .pd-view-only .pd-add-option-btn, .pd-view-only .pd-frame-delete { display: none; }
.pd-view-only #pd-draw-canvas { pointer-events: none; }
.pd-save-btn {
  background: #1a3c6e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 600;
}
.pd-save-btn:hover { background: #254f92; }
/* Main body splits canvas column + right panel */
.pd-main-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}
.pd-canvas-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.pd-canvas-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #1e1e1e;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-canvas-inset {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55);
  /* JS sets width + height via _applyCanvasAspectRatio for correct contain fit */
}
.pd-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.pd-canvas-bg   { z-index: 1; }
.wb-textbox-editor {
  position: absolute;
  z-index: 5; /* above .pd-canvas-draw/.sp-canvas-draw (z-index 2) */
  box-sizing: border-box;
  padding: 4px;
  margin: 0;
  resize: none;
  overflow-y: auto;
  background: #fff;
  border: 1px dashed #1a6fe8;
  border-radius: 2px;
  line-height: 1.2;
}
.pd-canvas-draw {
  z-index: 2;
  /* Without this, iOS Safari/WKWebView can interpret a sustained one-finger
     drag as a page-pan gesture and send pointercancel mid-drag instead of
     pointermove — device/layout-dependent, so it doesn't reproduce on every
     phone. A quick tap (select, then an action icon) is short enough that
     the browser never gets a chance to hijack it, which is why drags broke
     but taps didn't. */
  touch-action: none;
}
.pd-tool-bar {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  background: #222;
  border-top: 1px solid #333;
  flex-shrink: 0;
  min-height: 40px;
}
.pd-tool-btn {
  background: #eee;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.pd-tool-btn:hover { background: #ddd; }
.pd-tool-active  { background: #1a3c6e; border-color: #254f92; color: #fff; }
.pd-tool-active:hover { background: #254f92; }
.pd-tool-disabled { opacity: 0.4; cursor: not-allowed; }
/* Right panel — frame strip + actions */
.pd-right-panel {
  width: 164px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  border-left: 1px solid #ccc;
  overflow: hidden;
}
.pd-right-actions {
  display: flex;
  gap: 6px;
  padding: 8px 8px 6px;
  border-bottom: 1px solid #ddd;
}
.pd-right-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
}
.pd-add-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
}
.pd-right-action-btn {
  flex: 1;
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.pd-right-action-btn:hover { background: #e8eef8; border-color: #1a3c6e; color: #1a3c6e; }
.pd-right-strip-header {
  padding: 6px 8px 3px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
}
.pd-court-open-btn {
  margin: 6px 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  color: #333;
  text-align: center;
}
.pd-court-open-btn:hover { background: #f0f0f0; }
/* Court selector dialog */
.pd-court-dialog {
  position: absolute;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
}
.pd-court-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.pd-court-dialog-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pd-court-dialog-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}
.pd-court-dialog-section { display: flex; flex-direction: column; gap: 8px; }
.pd-court-dialog-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #888;
  text-transform: uppercase;
}
.pd-court-toggle-row { display: flex; gap: 6px; }
.pd-court-toggle {
  flex: 1;
  padding: 8px 4px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #444;
  cursor: pointer;
  text-align: center;
}
.pd-court-toggle:hover { background: #f5f5f5; }
.pd-court-toggle-active {
  background: #1a3c6e;
  color: #fff;
  border-color: #1a3c6e;
}
.pd-court-toggle-active:hover { background: #254f92; }
.pd-color-row {
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.pd-color-input {
  width: 40px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1px;
  cursor: pointer;
}
.pd-court-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pd-court-cancel-btn {
  padding: 7px 14px;
  font-size: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  color: #555;
  cursor: pointer;
}
.pd-court-apply-btn {
  padding: 7px 14px;
  font-size: 0.8rem;
  border: none;
  border-radius: 5px;
  background: #1a3c6e;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}
.pd-court-apply-btn:hover { background: #254f92; }
.pd-add-frame-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-top: 1px solid #ddd;
  color: #1a3c6e;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
}
.pd-add-frame-btn:hover { background: #e8eef8; }

/* ── Play options (scoring branches) ────────────────────────────────────────
   Branch colour is UI chrome only — never applied to the objects on the canvas,
   because token colour already encodes offense/defense and must not be
   overloaded with branch identity. */
.pd-add-option-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-top: 1px solid #ddd;
  color: #7a4bbf;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
}
.pd-add-option-btn:hover { background: #f2ecfa; }

/* Canvas edge while a branch is active (editing or playing). An inset shadow
   rather than a border so the canvas keeps its exact size — a real border
   would shift the aspect-fitted inset and move every normalized coordinate. */
.pd-canvas-branch {
  box-shadow: 0 4px 20px rgba(0,0,0,0.55),
              inset 0 0 0 4px var(--pd-branch-color, #7a4bbf);
}

.pd-branch-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 6px 8px;
  /* Tinted from the branch's own colour; colour-mix keeps one hue driving the
     fill, the rule and the text without hand-picking three shades per option. */
  background: color-mix(in srgb, var(--pd-branch-color, #7a4bbf) 12%, #ffffff);
  border-bottom: 1px solid color-mix(in srgb, var(--pd-branch-color, #7a4bbf) 35%, #ffffff);
  font-size: 0.72rem;
}
.pd-branch-name   { font-weight: 700; color: var(--pd-branch-color, #5a2f96); }
.pd-branch-origin { color: #7a6b90; }
.pd-branch-exit {
  margin-left: auto;
  background: none;
  border: 1px solid color-mix(in srgb, var(--pd-branch-color, #7a4bbf) 45%, #ffffff);
  color: var(--pd-branch-color, #5a2f96);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.pd-branch-exit:hover { background: color-mix(in srgb, var(--pd-branch-color, #7a4bbf) 20%, #ffffff); }

/* Indent by tree depth so an option reads as hanging off the frame above it. */
.pd-frame-option {
  margin-left: calc(var(--pd-depth, 0) * 12px);
  border-left: 3px solid var(--pd-branch-color, #7a4bbf);
}
.pd-frame-branch {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--pd-branch-color, #5a2f96);
  padding: 1px 3px 2px;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-frame-branch-start { margin-top: 6px; }

/* Names the branch on the canvas while it plays. Chrome only — the objects
   underneath keep their offense/defense colours. */
.pd-pb-branch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--pd-branch-color, #5a2f96);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  pointer-events: none;
}
.pd-pb-autoplay { color: #c9b6e8; }
.pd-pb-autoplay-on { background: #5a2f96; color: #fff; }

/* .prac-input and .prac-modal-field are styled for the dark practice modals.
   These dialogs sit on a WHITE .pd-timing-card, where a #2a2a2a field with
   `color: inherit` renders an unreadable placeholder and near-black text on
   near-black. Re-light them for any field inside the card — this covers the
   option dialog and the text-box dialog's font select alike. */
.pd-timing-card .prac-input {
  background: #f2f2f4;
  border-color: #c6c6cf;
  color: #1a1a1a;
}
.pd-timing-card .prac-input::placeholder { color: #6b6b73; }
.pd-timing-card .prac-input:focus        { border-color: #4a8fff; }
.pd-timing-card .prac-modal-field label  { color: #333; font-weight: 600; }
.pd-timing-card .prac-opt                { color: #777; font-weight: 400; }

/* Same problem as the fields: the secondary button is transparent with #ccc
   text for dark modals, which on a white card reads as disabled rather than
   clickable. Give it a filled grey face and dark text so it looks pressable
   next to the primary action. The :hover override is needed too — the base
   rule turns the label white, which would vanish against grey. */
.pd-timing-card .prac-btn-secondary {
  background: #e3e3e8;
  color: #1a1a1a;
  border: 1px solid #bfbfc8;
  font-weight: 600;
}
.pd-timing-card .prac-btn-secondary:hover {
  background: #d4d4dc;
  border-color: #a6a6b2;
  color: #000;
}

.pd-option-origin {
  font-size: 0.8rem;
  color: #555;
  line-height: 1.45;
  padding-bottom: 10px;
}
.pd-option-hint {
  font-size: 0.72rem;
  color: #666;
  padding-top: 4px;
}

.pd-toast {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #22aa44dd;
  color: #fff;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 10;
  pointer-events: none;
}
.pd-save-error {
  position: absolute;
  bottom: 60px;
  left: 12px;
  right: 12px;
  background: #d32f2f;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  z-index: 10;
}
.pd-loading { padding: 24px; text-align: center; color: var(--text-secondary); }
.coach-error { padding: 16px; color: #d32f2f; font-size: 0.9rem; }

/* ── Frame Strip (vertical, in right panel) ───────────────────────────────── */
#pd-frame-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 4px 8px 8px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.pd-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  cursor: pointer;
}
.pd-frame-thumb {
  display: block;
  width: 140px;
  height: 110px;
  border-radius: 4px;
  border: 2px solid #ddd;
  background: #fff;
}
.pd-frame-active .pd-frame-thumb {
  border-color: #1a3c6e;
}
.pd-frame-label {
  font-size: 10px;
  color: #666;
  line-height: 1;
}
.pd-frame-active .pd-frame-label {
  color: #1a3c6e;
  font-weight: 600;
}
.pd-frame-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cc2200;
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  display: none;
  padding: 0;
}
.pd-frame:hover .pd-frame-delete {
  display: block;
}

/* ── Mobile overflow menu (iPhone only, shared by Play Designer + Scratchpad) ─
   Defined before the mobile media queries below so their `display` overrides
   win the cascade — same specificity, so source order decides. ───────────── */
.pd-overflow-btn {
  display: none; /* shown only inside the mobile media queries below */
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.pd-overflow-btn:hover { background: #333; color: #fff; }
.pd-overflow-menu {
  position: absolute;
  top: 48px;
  right: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 3000;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  overflow: hidden;
}
.pd-overflow-item {
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
}
.pd-overflow-item:hover { background: #f5f5f5; }
.pd-overflow-delete { color: #cc2200; border-top: 1px solid #eee; }

/* ── Play Designer mobile layout ─────────────────────────────────────────── */
/* Closes deferred 2B.8b: bottom toolbar + horizontal frame strip on phone.
   Canvas stays the primary viewport — chrome below it is a CSS grid so the
   frame strip and bottom toolbar can be reached without shrinking the canvas
   any more than their own minimum height requires. .pd-canvas-column and
   .pd-right-panel go `display:contents` here only, unwrapping their children
   into direct grid items — the desktop rules for those two containers (and
   every other selector in this file) are untouched, since they only apply
   outside this media query. */
@media (max-width: 768px) {
  /* Top bar: collapse secondary controls into the overflow menu */
  .pd-delete-play-btn,
  .pd-status-pill,
  #pd-status-dropdown,
  .pd-export-btn { display: none; }
  .pd-overflow-btn { display: inline-flex; }

  .pd-main-body {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas:
      "canvas   canvas   canvas"
      "timeline timeline timeline"
      "frames   frames   frames"
      "pb       tools    add";
    overflow: hidden;
    min-height: 0;
  }
  .pd-canvas-column,
  .pd-right-panel { display: contents; }

  .pd-canvas-area  { grid-area: canvas; min-height: 0; }
  #pd-timeline-bar { grid-area: timeline; }

  /* Timing / Notes / Court / Add-object tools moved into the overflow menu
     (same tier as Timing/Notes — occasional, not needed one-tap-away); the
     FRAMES label is decorative only, not an action, so it's dropped rather
     than relocated. */
  .pd-right-actions,
  .pd-right-strip-header,
  .pd-court-open-btn,
  .pd-add-tools { display: none; }

  #pd-frame-strip {
    grid-area: frames;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    height: 72px;
    padding: 4px 8px;
    gap: 6px;
    border-top: 1px solid #333;
    background: #1a1a1a;
  }
  .pd-frame-thumb { width: 80px; height: 64px; }

  /* Bottom toolbar: Play/Stop (pb) + Actions/Undo/Redo (tools) + Add Frame,
     three grid siblings sharing one visual row, all respecting the same
     safe-area-inset-bottom pattern used by .bottom-nav elsewhere in the app. */
  .pd-tool-bar {
    grid-area: pb;
    border-top: none;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .pd-playback-controls { margin-left: 0; }
  /* The options toggle shows its icon alone here; its title and aria-label
     still name it. */
  .pd-pb-autoplay .pd-pb-label { display: none; }
  .pd-right-tools {
    grid-area: tools;
    border-bottom: none;
    align-items: center;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: #222;
  }
  .pd-add-frame-btn {
    grid-area: add;
    border-top: none;
    background: #222;
    color: #eee;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
    white-space: nowrap;
  }
}

/* ── ActionPicker ─────────────────────────────────────────────────────────── */
#wb-action-picker {
  position: fixed;
  background: #1a3c6e;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  min-width: 160px;
  z-index: 2100;
}
.wb-picker-title {
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px 6px;
}
.wb-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
}
.wb-picker-option:hover { background: rgba(255,255,255,0.15); }
.wb-picker-icon { width: 40px; flex-shrink: 0; }
.wb-picker-label { font-size: 13px; font-weight: 500; }

/* ── Playback Controls ────────────────────────────────────────────────────── */
.pd-playback-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-pb-btn {
  padding: 5px 12px;
  background: #1a3c6e;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pd-pb-btn:active { background: #0f2549; }
.pd-pb-stop { background: #555; }
.pd-pb-stop:active { background: #333; }

/* ── Timeline Bar — full-play view ───────────────────────────────────────── */
.pd-timeline-bar {
  background: #111;
  border-top: 1px solid #2a2a2a;
  flex-shrink: 0;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.pd-tl-track-area {
  position: relative;
  flex: 1;
  height: 10px;
}
/* Grey background track */
.pd-tl-bg {
  position: absolute;
  inset: 0;
  background: #333;
  border-radius: 5px;
}
/* Colored segments — absolute inside the track */
.pd-tl-seg {
  position: absolute;
  top: 0;
  height: 100%;
}
.pd-tl-anim  { background: #1a6fe8; }
.pd-tl-delay { background: #f97316; }
/* Frame number bubbles at frame boundaries */
.pd-tl-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #555;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 2px solid #111;
}
/* Playhead — white circle riding the track */
.pd-tl-playhead {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  z-index: 3;
  pointer-events: none;
}

/* ── Timing Dialog ────────────────────────────────────────────────────────── */
.pd-timing-dialog {
  position: absolute;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-timing-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.pd-timing-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  width: 340px;
  max-width: calc(100% - 32px);
  z-index: 1;
}
.pd-timing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #eee;
}
.pd-timing-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
}
.pd-timing-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.pd-timing-close:hover { background: #f0f0f0; color: #333; }
.pd-timing-body {
  padding: 14px 16px 16px;
}
.pd-timing-row { margin-bottom: 14px; }
.pd-timing-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 6px;
}
.pd-timing-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-timing-num {
  width: 60px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  text-align: center;
}
.pd-timing-unit {
  font-size: 0.8rem;
  color: #888;
  flex-shrink: 0;
}
.pd-timing-range {
  flex: 1;
  accent-color: #1a3c6e;
}
.pd-timing-apply-all {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #1a3c6e;
  color: #1a3c6e;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.pd-timing-apply-all:active { background: #eef2f8; }

/* ── Diverged frame indicator ─────────────────────────────────────────────── */
.pd-frame-diverged::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 7px;
  height: 7px;
  background: #f97316;
  border-radius: 50%;
  pointer-events: none;
}
.pd-frame-recalc {
  position: absolute;
  bottom: 18px;
  left: 4px;
  background: #f97316;
  border: none;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 3px;
  cursor: pointer;
  display: none;
}
.pd-frame-diverged:hover .pd-frame-recalc { display: block; }

/* ── Notes dialog ─────────────────────────────────────────────────────────── */
/* ── Notes dialog ─────────────────────────────────────────────────────────── */
.pd-notes-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  width: min(780px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.pd-notes-card-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.pd-notes-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 14px;
  gap: 10px;
  min-width: 0;
}
.pd-notes-main-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #888;
}
.pd-notes-main-textarea {
  flex: 1;
  resize: none;
  min-height: 180px;
}
.pd-notes-nav {
  display: flex;
  gap: 8px;
}
.pd-notes-nav-btn {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f5f5f5;
  cursor: pointer;
  color: #333;
}
.pd-notes-nav-btn:disabled { opacity: 0.4; cursor: default; }
.pd-notes-nav-btn:not(:disabled):hover { background: #e8eef8; border-color: #b0c8f0; }
.pd-notes-side {
  width: 160px;
  flex-shrink: 0;
  border-left: 1px solid #eee;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  background: #f7f7f7;
  border-radius: 0 0 10px 0;
}
.pd-notes-side-frame {
  border-radius: 6px;
  padding: 7px 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.pd-notes-side-frame:hover { background: #eef2fb; border-color: #c0d4f0; }
.pd-notes-side-active {
  background: #e8f0fe;
  border-color: #1a6fe8 !important;
}
.pd-notes-side-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 3px;
}
.pd-notes-side-active .pd-notes-side-label { color: #1a6fe8; }
.pd-notes-side-text {
  font-size: 0.75rem;
  color: #444;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 72px;
  overflow: hidden;
}
.pd-notes-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.6;
  color: #333;
  background: #fff;
}
.pd-notes-textarea:focus { outline: none; border-color: #1a6fe8; }
.pd-notes-textarea[readonly] { background: #f5f5f5; color: #888; cursor: default; }

/* ── Status pill & dropdown ───────────────────────────────────────────────── */
.pd-status-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  margin: 0 6px;
}
.pd-status-draft     { background: #e8e8e8; color: #666; }
.pd-status-draft:hover { background: #ddd; }
.pd-status-published { background: #d4f4e0; color: #1a7a3a; }
.pd-status-published:hover { background: #c2edce; }

.pd-status-dropdown {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 3000;
  min-width: 220px;
  overflow: hidden;
}
.pd-status-option {
  padding: 12px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #333;
}
.pd-status-option:hover { background: #f5f5f5; }
.pd-status-option-publish { font-weight: 600; color: #1a7a3a; }
.pd-status-keep { color: #888; border-top: 1px solid #eee; }

/* ── NavigationGuard exit dialog ──────────────────────────────────────────── */
.wb-nav-guard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wb-nav-guard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.wb-nav-guard-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 28px 28px 20px;
  width: 340px;
  max-width: 90vw;
}
.wb-nav-guard-title {
  font-size: 1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.wb-nav-guard-body {
  font-size: 0.88rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.5;
}
.wb-nav-guard-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wb-nav-guard-btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.wb-nav-guard-save    { background: #1a6fe8; color: #fff; }
.wb-nav-guard-save:hover { background: #155ec4; }
.wb-nav-guard-discard { background: #f5f5f5; color: #c0392b; }
.wb-nav-guard-discard:hover { background: #fde8e8; }
.wb-nav-guard-cancel  { background: #f5f5f5; color: #555; }
.wb-nav-guard-cancel:hover { background: #ebebeb; }

/* ── Export PDF button ────────────────────────────────────────────────────── */
.pd-export-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #2a2a2a;
  color: #eee;
  cursor: pointer;
  white-space: nowrap;
}
.pd-export-btn:hover:not(:disabled) { background: #3a3a3a; border-color: #777; }
.pd-export-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Export PDF dialog ────────────────────────────────────────────────────── */
.pd-export-card { min-width: 300px; }
.pd-export-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.pd-export-check-row {
  margin-top: 12px;
}
.pd-export-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #333;
  cursor: pointer;
}
.pd-export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid #eee;
}
.pd-export-confirm-btn {
  padding: 8px 16px;
  background: #1a6fe8;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.pd-export-confirm-btn:hover { background: #155ec4; }

/* ── Scratchpad overlay ──────────────────────────────────────────────────── */
.sp-overlay { flex-direction: column; }

.sp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 12px;
  background: #1a1a1a;
  color: #fff;
  flex-shrink: 0;
  z-index: 1;
}
.sp-back-btn {
  background: none;
  border: 1px solid #555;
  color: #ccc;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.sp-back-btn:hover { border-color: #888; color: #fff; }
.sp-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.sp-toolbar-actions { display: flex; gap: 8px; }
.sp-action-btn {
  background: none;
  border: 1px solid #555;
  color: #ccc;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.sp-action-btn:hover { border-color: #888; color: #fff; }
.sp-clear-btn:hover  { border-color: #e05; color: #f66; }

.sp-canvas-wrap {
  flex: 1;
  overflow: hidden;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-canvas-inset {
  position: relative;
  /* width/height set by JS to contain-fit the court aspect ratio */
}
.sp-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.sp-canvas-draw { cursor: crosshair; touch-action: none; } /* see .pd-canvas-draw for why */
.sp-canvas-draw.sp-cursor-eraser {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='3' y='13' width='18' height='8' rx='1.5' fill='%23f9a8d4' stroke='%23374151' stroke-width='1.5'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.5' fill='%23f472b6' stroke='%23374151' stroke-width='1.5'/%3E%3Cpath d='M7 3l14 10' stroke='%23374151' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3 13L17 3' stroke='%23374151' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 3 21, cell;
}
.sp-canvas-draw.sp-cursor-select { cursor: default; }

/* ── Scratchpad Sprint B: tool buttons, color swatches, court toggle ─────── */
.sp-tool-group,
.sp-court-group { display: flex; gap: 4px; }

.sp-tool-btn {
  background: none;
  border: 1px solid #555;
  color: #ccc;
  width: 34px; height: 34px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sp-tool-btn:hover    { border-color: #888; color: #fff; }
.sp-tool-btn.sp-tool-active { background: #2a5fd4; border-color: #2a5fd4; color: #fff; }

.sp-color-group,
.wb-text-color-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sp-color-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #555;
  background: var(--sw);
  cursor: pointer;
  flex-shrink: 0;
}
.sp-color-swatch:hover         { border-color: #aaa; }
.sp-color-swatch.sp-swatch-active { border-color: #fff; outline: 2px solid #2a5fd4; outline-offset: 1px; }
.sp-custom-color {
  width: 26px; height: 26px;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  background: none;
}

.sp-court-group { position: relative; }
.sp-court-btn {
  background: none;
  border: 1px solid #555;
  color: #ccc;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.sp-court-btn:hover { border-color: #888; color: #fff; }
.sp-court-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
  min-width: 110px;
}
.sp-court-menu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: #ccc;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.sp-court-menu button:hover        { background: #3a3a3a; color: #fff; }
.sp-court-menu button.sp-court-active { color: #fff; font-weight: 600; }

.sp-pen-swatch {
  display: none; /* shown only in the mobile layout below */
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sw, #000);
  border: 1px solid rgba(255,255,255,0.6);
  margin-left: 3px;
  vertical-align: middle;
}

.sp-pen-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* ── Scratchpad mobile layout (iPhone) ───────────────────────────────────── */
/* Closes deferred 2B.8b for the Scratchpad surface, mirroring the Play
   Designer treatment above: header keeps only Back + the Court size toggle,
   Print PDF/Clear move into the (shared) overflow menu, and the Pen/Eraser/
   Select tool group — same elements, just repositioned, no duplication —
   relocates to a fixed bottom toolbar using the same safe-area-inset-bottom
   pattern as .bottom-nav elsewhere in the app. */
@media (max-width: 768px) {
  .sp-color-group,
  .sp-toolbar-actions { display: none; }
  .sp-overflow-btn { display: inline-flex; }

  .sp-tool-group {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    justify-content: center;
    gap: 10px;
    background: #1a1a1a;
    border-top: 1px solid #333;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .sp-canvas-wrap { padding-bottom: 56px; }

  .sp-pen-swatch { display: inline-block; }

  .sp-pen-picker {
    position: fixed;
    left: 12px; right: 12px;
    bottom: 64px;
    z-index: 11;
  }
}

/* ── Practice Tab ──────────────────────────────────────────────────────────── */

/* The practice screens establish their own surface context. This matters: the
   app-wide --bg is light-only (64 rules elsewhere hardcode a light background
   and inherit text from it, so it cannot be flipped without breaking them).
   Anything sitting directly on the page — the builder header's budget and save
   status — would otherwise pair light-mode page paint with dark-mode content
   colour. Declaring the pair here keeps every descendant internally consistent
   and is exactly how another screen opts in. */
#coach-practice-content {
  background: var(--surface-base);
  color: var(--content);
}

/* List */
.prac-list-header { display:flex; gap:10px; padding:16px 0 8px; flex-wrap:wrap; }
.prac-list        { display:flex; flex-direction:column; gap:8px; padding:8px 0; }
.prac-row         { display:flex; align-items:center; background:var(--surface-card); color:var(--content); border:1px solid var(--edge); border-radius:10px; padding:12px 14px; gap:10px; }
.prac-row-main    { flex:1; display:flex; flex-direction:column; gap:3px; cursor:pointer; }
.prac-row-main:hover .prac-row-title { text-decoration:underline; }
.prac-row-title   { font-size:.95rem; font-weight:600; color:var(--content-strong); }
.prac-row-meta    { font-size:.78rem; color:var(--content-muted); }
.prac-row-actions { display:flex; gap:6px; flex-shrink:0; }
.prac-row-btn     { background:none; border:1px solid var(--edge-strong); color:var(--content); padding:5px 9px; border-radius:6px; font-size:.8rem; cursor:pointer; }
.prac-row-btn:hover  { border-color:var(--accent); color:var(--content-strong); }
.prac-row-del:hover  { border-color:var(--danger); color:var(--danger); }
.prac-empty       { color:var(--content-muted); font-size:.9rem; padding:24px 0; text-align:center; }

/* Game Prep shell — the pre-game planning surface (coach_game_prep.js).
   Reuses prac-input / prac-row-btn / coach-section-title; only the header
   block and the notes field need styles of their own. */
/* flex-wrap + min-width:0 so the right cluster drops to its own row on a narrow
   screen instead of crushing the title. Without them the ← Games button and the
   title overlapped once anything else shared the row. */
/* §A: align-items flex-start, gap 24, margin-bottom 14. The back button is gone
   — the spec has no back affordance and Done planning is the exit. */
.gp-head          { display:flex; align-items:flex-start; gap:24px; margin-bottom:14px;
                    flex-wrap:wrap; }
.gp-head-text     { display:flex; flex-direction:column; gap:5px; min-width:0; }
/* Identity is the TEAM NAME. Archivo ExtraBold is the spec's display slot; the
   codebase has no Archivo, so this is the nearest available weight. */
.gp-title         { font-size:23px; font-weight:700; letter-spacing:-.5px;
                    color:var(--sg-navy,#002147); line-height:1.15; }
.gp-meta          { font-size:13px; font-weight:500; color:var(--content); }
.gp-notes         { min-height:160px; resize:vertical; font-family:inherit; line-height:1.5; }
.gp-hint          { font-size:.74rem; color:var(--content-muted); margin-top:6px; }

/* The planned pitch. Real per-formation geometry, positioned through
   FieldGeo.topPct so a slot sits exactly where the live tool would draw it —
   the design prototype's position-group rows are an acknowledged placeholder.
   Pitch green is the handoff's token. Reuses .sg-field-art / .sg-mark, which
   are already generic. (.sg-chip went with the formation chips when §D's tiles
   took the control — §B contains no formation control at all.) */
/* §B2 / .dc.html:1559 — 430px tall, radius 12, padding 16x14. max-width caps it
   so it stops stretching past the spec's proportion on a wide desktop; at 1194
   it is already under the cap and unaffected. */
/* §B2 says 430px. This is 480 — the ~50px the control band gave back when
   + Add sub moved onto the planning row. Deliberate deviation, and the reason
   is measurable: at 430 the pitch renders at 2.9x its true aspect. */
.gp-pitch         { position:relative; height:480px; border-radius:12px;
                    padding:16px 14px; max-width:820px; container-type:size;
                    background:#135C42; overflow:hidden; }
/* .dc.html:1405-1409 — a 46x46 WHITE disc carrying the jersey number, with the
   name and position code beneath it. The previous treatment inverted this: a
   navy disc holding the position code, with the number never shown on the pitch
   at all. The spec's white discs read correctly on its green, so the inversion
   was solving a problem that does not exist. */
/* The cursor caption (§B deviation — see coach_game_prep.js). Sits ON the pitch
   because it names what the pitch IS showing, not what the header says. Sky while
   drafting, matching the draft treatment the stepper and Apply already use, so
   the two modes differ by more than the presence of a button. */
.gp-cursor        { position:absolute; top:10px; left:12px; z-index:2;
                    padding:5px 10px; border-radius:7px;
                    background:rgba(0,33,71,.62); color:#fff;
                    font-size:10.5px; font-weight:700; letter-spacing:.08em;
                    text-transform:uppercase; pointer-events:none; }
.gp-cursor-draft  { background:var(--sg-sky,#2E8FC4); }

.gp-slot          { position:absolute; transform:translate(-50%,-50%);
                    display:flex; align-items:center; justify-content:center;
                    width:46px; height:46px; border-radius:50%;
                    border:2px dashed rgba(255,255,255,.55);
                    background:rgba(255,255,255,.08); }
.gp-slot-on       { flex-direction:column; align-items:center; gap:3px;
                    width:auto; height:auto; border:0; background:none; }
.gp-slot-disc     { width:46px; height:46px; border-radius:50%; display:flex;
                    align-items:center; justify-content:center;
                    background:#FFFFFF; border:2px solid #D9DFE7;
                    color:var(--sg-navy,#002147);
                    font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.gp-slot-label    { font-size:.68rem; font-weight:700; letter-spacing:.04em;
                    color:#fff; text-transform:uppercase; }
.gp-slot-name     { font-size:11px; font-weight:600; letter-spacing:-.1px; color:#fff;
                    max-width:82px; overflow:hidden; text-overflow:ellipsis;
                    white-space:nowrap; }
.gp-slot-pos      { font-size:9px; font-weight:700; letter-spacing:.8px;
                    text-transform:uppercase; color:#A8D0BE; }
.gp-bench         { display:flex; flex-direction:column; gap:8px; }
.gp-bench-l       { font-size:.66rem; font-weight:700; letter-spacing:.09em;
                    color:var(--content-muted); text-transform:uppercase;
                    margin-bottom:8px; }
.gp-bench-l span  { text-transform:none; letter-spacing:0; font-weight:500;
                    margin-left:8px; }
.gp-bench-row     { display:flex; flex-wrap:wrap; gap:8px; min-height:40px; }
.gp-bc            { display:flex; align-items:center; gap:6px; min-height:40px;
                    padding:7px 12px; border-radius:9px; cursor:grab;
                    touch-action:none; background:var(--surface-card);
                    border:1.5px solid var(--edge-strong);
                    color:var(--content-strong); font-size:.8rem; font-weight:600; }
.gp-bc-num        { font-size:.7rem; color:var(--content-muted); font-weight:600; }
.gp-dragging      { opacity:.35; }
/* Tap-to-swap selection. Earned Gold, per §B2: "the only non-fairness gold in
   the product, justified because it is a transient selection on a green field
   where Sky reads poorly." The bench chip uses the same border
   (.dc.html:1424 picks #E8B84B when fieldSel matches). */
.gp-slot-sel .gp-slot-disc { border-color:#E8B84B;
                    box-shadow:0 0 0 4px rgba(232,184,75,.35); }
.gp-bc-sel        { border-color:#E8B84B !important;
                    box-shadow:0 0 0 4px rgba(232,184,75,.35); }
.gp-slot, .gp-bc  { cursor:pointer; }
/* The prep surface sits above the app's fixed bottom nav (z-index 100). Without
   this clearance the last thing rendered — the bench, once the minutes rail and
   table made the page taller — sits UNDER the nav, where it cannot be dragged
   from at all. Found by the walkthrough: the drag's source point hit .nav-btn. */

/* Planned minutes. Values are MINUTES — the single seconds→minutes conversion
   happens in _gpMins and nowhere else. Zero renders as an em dash, per the
   design: a column of dashes reads as "nothing planned", a column of zeros
   reads as data. */
/* §B: one white card holds the band, the pitch column and the rail
   (.dc.html:280). max-width matches .gp-page so the card is the page's width. */
.gp-card          { max-width:1500px; margin:0 auto; background:var(--surface-card);
                    border:1px solid #E1E6EC; border-radius:12px; }
.gp-field-row     { display:flex; align-items:stretch; }
/* §B2: pitch + bench + timeline, flex 1, padding 18, gap 14. */
.gp-fieldcol      { flex:1; min-width:0; padding:18px; display:flex;
                    flex-direction:column; gap:14px; }
/* §B3: the card's right column — left-ruled, not a floating bordered box. */
.gp-rail          { flex:0 0 clamp(292px, 24vw, 420px); border-left:1px solid #E1E6EC;
                    background:var(--surface-card); max-height:520px; overflow:auto; }
.gp-rail-h        { display:flex; align-items:center; justify-content:space-between;
                    gap:8px; padding:13px 14px; border-bottom:1px solid var(--edge);
                    font-size:.78rem; font-weight:700; color:var(--content-strong); }
.gp-rail-sel      { appearance:none; -webkit-appearance:none; padding:7px 11px;
                    border:1.5px solid var(--edge-strong); border-radius:7px;
                    background:var(--surface-input); color:var(--content-strong);
                    font-size:.72rem; font-weight:600; cursor:pointer; }
.gp-rail-row      { display:flex; align-items:center; gap:9px; min-height:36px;
                    padding:0 14px; border-bottom:1px solid #F1F4F7; }
.gp-rail-num      { width:16px; text-align:right; font-size:.68rem; font-weight:600;
                    color:var(--content-muted); }
.gp-rail-name     { flex:1; font-size:.78rem; font-weight:600;
                    color:var(--content-strong); overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; }
.gp-rail-val      { font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums;
                    color:var(--content-strong); }

.gp-mt            { border:1px solid var(--edge); border-radius:10px; overflow:auto;
                    background:var(--surface-card); }
.gp-mt-bands      { display:flex; font-size:.62rem; font-weight:700; letter-spacing:.09em;
                    color:var(--content-muted); background:var(--surface-sunken,transparent);
                    border-bottom:1px solid var(--edge); }
.gp-mt-bands span { padding:6px 10px; }
.gp-mt-bands span:first-child { padding-left:214px; }
.gp-mt-band2      { color:var(--sg-sky,#2E8FC4); border-left:1px solid var(--edge); }
.gp-mt-row        { display:flex; align-items:center; min-height:38px;
                    border-bottom:1px solid var(--edge); }
.gp-mt-row:last-child { border-bottom:0; }
.gp-mt-head       { font-size:.62rem; font-weight:700; letter-spacing:.07em;
                    color:var(--content-muted); text-transform:uppercase; }
.gp-mt-name       { flex:0 0 200px; position:sticky; left:0; z-index:1;
                    display:flex; align-items:center; gap:8px; padding:0 12px;
                    background:var(--surface-card); font-size:.8rem; font-weight:600;
                    color:var(--content-strong); border-right:1px solid var(--edge); }
.gp-mt-num        { font-size:.68rem; font-weight:600; color:var(--content-muted); }
.gp-mt-c          { flex:0 0 76px; text-align:center; font-size:.76rem; font-weight:500;
                    font-variant-numeric:tabular-nums; color:var(--content); }
.gp-mt-total      { flex:0 0 88px; font-weight:700; color:var(--content-strong); }
.gp-mt-grp        { flex:0 0 84px; }
.gp-zero          { color:var(--content-muted); opacity:.55; }

/* Field view: the two-row planning clock, the sub log and the timeline. The
   clock is a PLANNING cursor, not a running one — it names the moment being
   planned at, and the pitch shows the lineup as of then. */
.gp-band          { display:flex; align-items:flex-start; justify-content:space-between;
                    gap:20px; padding:16px 18px 14px; border-bottom:1px solid var(--edge);
                    flex-wrap:wrap; }
/* DELIBERATE DEVIATION from §D, not a conformance fix. §D specifies a 236px
   two-row control column — the planning block above + Add sub. Side by side
   costs nothing (both are small) and returns a whole row's height to the pitch,
   which is the only lever §B's fixed-height box leaves. The design never met
   this problem: its pitch is CSS markings, which stretch to any box, while ours
   is a real asset with a fixed aspect. */
.gp-clock         { flex:0 1 auto; display:flex; flex-direction:row;
                    align-items:stretch; gap:10px; }
.gp-clock-now     { flex:0 1 auto; }
.gp-addsub        { flex:0 0 auto; }
.gp-clock-now     { background:var(--sg-navy,#002147); border-radius:10px; padding:11px 16px; }
.gp-clock-eyebrow { font-size:.56rem; font-weight:700; letter-spacing:.11em;
                    color:#8FB3CE; text-transform:uppercase; }
.gp-clock-row     { display:flex; align-items:baseline; gap:8px; }
.gp-clock-t       { font-size:30px; font-weight:700; color:#fff; line-height:1.1;
                    font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.gp-clock-sub     { font-size:.7rem; font-weight:600; color:#8FB3CE; }
/* The period control (deviation from §B1 — spec §11.12). Segments in
   the navy tile, one per regulation period, the current one filled white. 36px
   tall so a finger hits it, where the timeline's period-start dot is 10px. */
.gp-clock-periods { display:flex; gap:6px; margin-top:9px; }
.gp-per           { min-height:36px; padding:0 14px; border-radius:8px; cursor:pointer;
                    border:1.5px solid rgba(143,179,206,.55); background:transparent;
                    color:#C9DAE8; font-size:.74rem; font-weight:700; }
.gp-per:hover     { border-color:#fff; color:#fff; }
.gp-per-on        { background:#fff; border-color:#fff; color:var(--sg-navy,#002147); }
/* Disabled while a sub is being drafted — dimmed, not merely inert, with the
   reason in a note beneath: a dead control with no cue is the legibility
   problem this surface keeps having. The draft's own Cancel/Confirm are the
   exits. */
.gp-per:disabled  { opacity:.38; cursor:not-allowed; }
.gp-per:disabled:hover { border-color:rgba(143,179,206,.55); color:#C9DAE8; }
.gp-per-on:disabled:hover { border-color:#fff; color:var(--sg-navy,#002147); }
.gp-clock-note    { margin-top:7px; font-size:.66rem; font-weight:600; color:#C9DAE8; }
.gp-addsub        { padding:13px 16px; border:0; border-radius:10px; cursor:pointer;
                    background:var(--sg-sky,#2E8FC4); color:#fff;
                    font-size:13.5px; font-weight:700; }
.gp-addsub:hover  { background:#2678A6; }
.gp-pick          { background:#E6F1F9; border:1.5px solid var(--sg-sky,#2E8FC4);
                    border-radius:10px; padding:11px 14px; display:flex;
                    flex-direction:column; gap:7px; }
.gp-pick-eyebrow  { font-size:.56rem; font-weight:700; letter-spacing:.11em; color:#2678A6; }
.gp-pick-row      { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gp-pick-step     { width:34px; height:34px; border:1.75px solid #A9CDE4; border-radius:8px;
                    background:#fff; color:var(--sg-navy,#002147); font-size:1rem;
                    font-weight:700; cursor:pointer; }
.gp-pick-step:hover { border-color:var(--sg-sky,#2E8FC4); }
.gp-pick-t        { text-align:center; font-size:1.15rem; font-weight:700;
                    color:var(--sg-navy,#002147); font-variant-numeric:tabular-nums; }
.gp-pick-t span   { display:block; font-size:.56rem; font-weight:700; letter-spacing:.08em;
                    text-transform:uppercase; color:var(--sg-sky,#2E8FC4); }
.gp-pick-hint     { font-size:.66rem; color:var(--content-muted); }
.gp-legend        { display:flex; gap:16px; flex-wrap:wrap; align-items:center;
                    justify-content:flex-end; padding-top:4px;
                    font-size:11.5px; font-weight:600; color:var(--content); }
.gp-legend span   { display:flex; align-items:center; gap:7px; }
.gp-legend i      { width:16px; height:16px; border-radius:50%; display:inline-block; }
.gp-lg-in         { background:#2E8FC4; border:2px solid #2E8FC4; }
.gp-lg-moved      { background:#F2EFFB; border:2px solid #6C5DB0; }
.gp-lg-stay       { background:#fff; border:2px solid #D9DFE7; }
.gp-log           { flex:0 0 330px; border:1.5px solid #B7D8EC; border-radius:10px;
                    overflow:hidden; }
.gp-log-h         { display:flex; justify-content:space-between; padding:9px 12px;
                    background:#E6F1F9; font-size:.6rem; font-weight:700;
                    letter-spacing:.11em; color:var(--sg-navy,#002147); }
.gp-log-h span    { letter-spacing:0; color:#2678A6; }
.gp-log-body      { max-height:132px; overflow:auto; }
.gp-log-empty     { padding:14px 12px; font-size:.72rem; line-height:1.5;
                    color:var(--content-muted); }
.gp-log-row       { display:flex; align-items:center; gap:8px; padding:9px 12px;
                    border-top:1px solid var(--edge); font-size:.72rem; }
.gp-log-tag       { font-size:.52rem; font-weight:700; letter-spacing:.07em;
                    padding:3px 5px; border-radius:4px; }
.gp-log-in        { background:#2E8FC4; color:#fff; }
.gp-log-move      { background:#F2EFFB; color:#6C5DB0; }
.gp-log-n         { flex:1; font-weight:600; color:var(--content-strong); }
.gp-log-d         { font-size:.66rem; font-weight:600; color:var(--content-muted); }
.gp-log-f         { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--edge); }
.gp-log-f .prac-row-btn { flex:1; }
.gp-log-go        { flex:1.4; border:0; border-radius:8px; cursor:pointer;
                    background:var(--sg-navy,#002147); color:#fff;
                    font-size:.76rem; font-weight:700; }
.gp-timeline      { position:relative; height:44px; margin:16px 8px 4px; }
.gp-tl-rail       { position:absolute; left:0; right:0; top:3px; height:6px;
                    border-radius:3px; background:var(--edge); }
.gp-tl-mark       { position:absolute; top:0; transform:translateX(-50%); border:0;
                    background:none; cursor:pointer; display:flex; flex-direction:column;
                    align-items:center; gap:3px; padding:0; }
.gp-tl-mark i     { width:10px; height:10px; border-radius:50%;
                    background:#fff; border:2px solid var(--sg-navy,#002147); }
.gp-tl-on i       { width:14px; height:14px; background:var(--sg-sky,#2E8FC4);
                    border-color:var(--sg-sky,#2E8FC4); }
.gp-tl-mark:disabled { opacity:.35; cursor:not-allowed; }
.gp-tl-mark span  { font-size:.62rem; font-weight:600; color:var(--content-muted);
                    font-variant-numeric:tabular-nums; }
/* A period-start marker's second line: which period starts here. */
.gp-tl-per        { font-size:.56rem; font-weight:700; letter-spacing:.04em;
                    color:var(--sg-navy,#002147); text-transform:uppercase;
                    white-space:nowrap; margin-top:-2px; }

/* The sub-plan grid. Rows are positions with the bench below; columns are
   sub-times grouped by period. The three ACTIVE cell states are separated on
   three channels at once — hue (Sky vs violet), weight (solid fill vs pale
   tint) and shape (uniform border vs heavy left bar) — so they survive a squint
   and a grayscale print. Do not collapse them into one channel. */
.gp-grid          { display:flex; overflow-x:auto; border:1px solid var(--edge);
                    border-radius:10px; background:var(--surface-card); }
.gp-g-labels      { flex:0 0 158px; position:sticky; left:0; z-index:3;
                    background:var(--surface-card);
                    border-right:1px solid var(--edge); }
.gp-g-lhead       { height:88px; display:flex; align-items:flex-end; padding:0 14px 10px;
                    font-size:.62rem; font-weight:700; letter-spacing:.08em;
                    color:var(--content-muted); }
.gp-g-lrow        { height:46px; display:flex; align-items:center; padding:0 14px;
                    border-bottom:1px solid var(--edge); }
.gp-g-lcode       { font-size:.78rem; font-weight:700; color:var(--content-strong); }
.gp-g-lbench      { font-size:.7rem; font-weight:600; color:var(--content-muted); }
.gp-g-lsep        { height:26px; display:flex; align-items:center;
                    justify-content:space-between; padding:0 14px;
                    font-size:.58rem; font-weight:700; letter-spacing:.1em;
                    color:var(--content-muted); border-top:1px solid var(--edge);
                    border-bottom:1px solid var(--edge); }
.gp-g-periods     { display:flex; }
.gp-g-group       { border-right:2px solid var(--edge); }
.gp-g-band        { height:32px; display:flex; align-items:center;
                    justify-content:space-between; padding:0 12px;
                    background:var(--sg-navy,#002147); color:#fff;
                    font-size:.62rem; font-weight:700; letter-spacing:.1em;
                    text-transform:uppercase; }
.gp-g-window      { color:#8FB3CE; letter-spacing:.02em; }
.gp-g-cols        { display:flex; }
.gp-g-col         { width:138px; }
.gp-g-head        { height:56px; display:flex; flex-direction:column;
                    align-items:center; justify-content:center; gap:2px;
                    border-bottom:1px solid var(--edge); }
.gp-g-time        { font-size:.82rem; font-weight:700;
                    font-variant-numeric:tabular-nums; color:var(--content-strong); }
.gp-g-sub         { font-size:.56rem; font-weight:700; letter-spacing:.06em;
                    text-transform:uppercase; color:var(--content-muted); }
/* A column where nothing changes is still part of the plan (§11.1) — an
   inserted sub-time persists and derives zero interval rows. Without a mark it
   is indistinguishable from nothing having happened, which is how a working
   add-sub reads as broken. Light on purpose: muted italic, not a badge. */
.gp-g-sub-none    { font-style:italic; opacity:.72; }
.gp-g-sub-on      { color:var(--sg-sky,#2E8FC4); }
.gp-g-cell        { height:46px; padding:6px; border-bottom:1px solid var(--edge);
                    box-sizing:border-box; }
.gp-g-sep         { height:26px; border-top:1px solid var(--edge);
                    border-bottom:1px solid var(--edge); }
.gp-g-card        { height:34px; border-radius:6px; display:flex; align-items:center;
                    gap:5px; padding:0 7px; font-size:.74rem; }
.gp-g-num         { font-size:.64rem; font-weight:600; opacity:.75;
                    min-width:12px; text-align:right; }
.gp-g-name        { flex:1; font-weight:600; overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; }
.gp-g-tag         { font-size:.52rem; font-weight:700; letter-spacing:.06em;
                    padding:1px 4px; border-radius:3px; }
/* Entering: solid saturated fill, uniform border. */
.gp-g-in          { background:#2E8FC4; border:1.5px solid #2E8FC4; color:#fff; }
.gp-g-in .gp-g-tag { background:rgba(255,255,255,.24); color:#fff; }
/* Changing position: pale tint, violet, heavy LEFT bar — a different shape. */
.gp-g-moved       { background:#F2EFFB; border:1.5px solid #6C5DB0;
                    border-left:5px solid #6C5DB0; color:#463A80; }
.gp-g-from        { color:#6C5DB0; }
/* Staying on: deliberately quiet. */
.gp-g-staying     { background:var(--surface-card); border:1px solid var(--edge-strong);
                    color:var(--content-strong); }
/* Coming off / already off / unassigned — the three non-states. */
.gp-g-off         { background:#EDF0F4; border:1px dashed #B0BAC6; color:#5A6875; }
.gp-g-outtag      { color:#7A8794; }
.gp-g-bench       { background:var(--surface-sunken,transparent);
                    border:1px solid var(--edge); color:var(--content-muted); }
.gp-g-open        { height:34px; border:1px dashed var(--edge-strong); border-radius:6px;
                    display:flex; align-items:center; justify-content:center;
                    font-size:.62rem; font-weight:600; color:var(--content-muted);
                    opacity:.6; }

.gp-g-cell        { cursor:pointer; }
.gp-g-timerow     { display:flex; align-items:center; gap:3px; }
.gp-g-step, .gp-g-del, .gp-g-ins {
                    width:19px; height:19px; padding:0; line-height:1; cursor:pointer;
                    border:1.5px solid var(--edge-strong); border-radius:5px;
                    background:var(--surface-card); color:var(--content);
                    font-size:.72rem; font-weight:600; }
.gp-g-step:hover, .gp-g-ins:hover { border-color:var(--sg-sky,#2E8FC4);
                    color:var(--sg-sky,#2E8FC4); }
.gp-g-del:hover   { border-color:var(--danger,#B4483C); color:var(--danger,#B4483C); }
.gp-g-gutter      { width:20px; display:flex; align-items:flex-start;
                    justify-content:center; padding-top:18px; }
.gp-g-add         { width:66px; display:flex; align-items:flex-start;
                    justify-content:center; padding-top:14px; }
.gp-g-addbtn      { display:flex; flex-direction:column; align-items:center; gap:1px;
                    padding:8px 10px; cursor:pointer; border-radius:7px;
                    border:1.5px dashed #B7D8EC; background:transparent;
                    color:var(--sg-sky,#2E8FC4); font-size:.8rem; font-weight:700; }
.gp-g-addbtn span { font-size:.5rem; letter-spacing:.1em; }
.gp-g-addbtn:hover{ border-style:solid; background:rgba(46,143,196,.08); }
.gp-g-card[data-gp-drag] { cursor:grab; touch-action:none; }
/* On touch, grid and bench cards are TAP-ONLY and pan natively. touch-action:
   none on a card hands every touch that starts on it to the drag lifecycle,
   and cards cover most of each grid cell and the whole bench band — so on iPad
   a swipe to scroll the grid became a no-op drag, and the only place a swipe
   scrolled was the period band. Tap is the gesture the surface's own copy
   instructs ("Tap a player, then tap who takes their place"); drag stays for
   mice, where the pointer never needs the same pixels for scrolling. Pitch
   tokens are untouched: they never carried a touch-action rule, so their touch
   drag has always relied on the drag lifecycle claiming the pointer first,
   and a 46px disc is a small share of the page. The JS half is in the
   pointerdown listener. */
@media (pointer: coarse) {
  .gp-g-card[data-gp-drag], .gp-bc { touch-action:auto; cursor:default; }
}
/* Selection is never colour-only: a ring plus a halo, per the handoff's
   accessibility note. */
.gp-g-sel .gp-g-card,
.gp-g-sel .gp-g-open { outline:2px solid var(--sg-sky,#2E8FC4); outline-offset:-3px;
                       box-shadow:0 0 0 3px rgba(46,143,196,.18); }

/* Fairness. Earned Gold (#E8B84B) is a RESERVED token — the handoff allows it
   only for earned moments, never decoration, and the dot below is the only
   place this module uses it. Everything here disappears when the toggle is off:
   the column is not hidden, it is not rendered. */
.gp-fair-row      { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
/* The design's [Show field] toggle. Field view and table view are ALTERNATIVES
   over one plan — stacking them is what made the prep page grow unboundedly. */
/* ── Game Prep planner overlay ─────────────────────────────────────────────
   Self-contained full-screen surface (design handoff §A–§C), not a page inside
   the coach shell. Fixed above the bottom nav (z-index 100), so the app header,
   team selector and nav are COVERED — the same mechanism #sg-overlay uses.
   Below #sg-create-dialog (9000), which opens over it from the Edit link.

   FIXED LIGHT, deliberately. The tokens below are declared here rather than
   inherited, so this surface does not follow :root[data-theme="dark"] — prep
   previously used nine app tokens, eight of which flip. #sg-overlay already
   ignores the app theme, the handoff is a light design, and two full-screen
   tools behaving differently under one theme preference is a worse
   inconsistency than both ignoring it. Today's dark notes textarea goes away. */
#gp-overlay {
  position: fixed; inset: 0; z-index: 1600; display: none;
  flex-direction: column; overflow-y: auto; background: #F4F6F8;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sg-navy:#002147; --sg-sky:#2E8FC4; --sg-gold:#E8B84B; --sg-pitch:#135C42;
  /* The design's greys, named here because prep reached them through app
     tokens that flip in dark mode. */
  --content-strong:#12212F; --content:#3E4E5E; --content-muted:#7C8794;
  --edge:#EDF0F4; --edge-strong:#C9D2DC;
  --surface-card:#FFFFFF; --surface-input:#FFFFFF; --surface-sunken:#E8ECF2;
  /* §D's Alert red, not the app's #C0392B. Two rules in here already wrote
     var(--danger,#B4483C) — the design's value as a FALLBACK — while this
     declaration overrode it, so neither ever rendered the colour its own code
     named. Reconciled when Reset plan landed, which is the token's first
     deliberate use on this surface. */
  --danger:#B4483C; --danger-hover:#993B31; --danger-tint:#F6E7E4;
}
#gp-overlay *, #gp-overlay *::before, #gp-overlay *::after { box-sizing: border-box; }

/* §A/§B container: max-width 1500 centred, page padding 22 top / 24 sides /
   40 bottom. The shell version had padding-bottom only and no max-width, so the
   pitch stretched without limit on a wide screen. */
.gp-page          { width:100%; max-width:1500px; margin:0 auto;
                    padding:22px 24px 40px; }

/* The exit. The design has NO exit CTA — this is a deliberate addition, and the
   label is fixed copy. */
.gp-done          { display:block; margin:22px 0 0 auto; padding:13px 22px;
                    border:0; border-radius:9px; cursor:pointer;
                    background:var(--sg-navy); color:#fff;
                    font-size:.86rem; font-weight:700; }
.gp-done:hover    { background:#001733; }

/* Header right cluster (design README §A). The header is a flex row and this
   sits at its end, so the title/meta stack keeps the space it needs and the
   controls do not overlap it. */
.gp-head-right    { display:flex; align-items:center; gap:12px; margin-left:auto;
                    flex-wrap:wrap; padding-top:6px; }
/* The game's identity is shown here, so this is where it is corrected. Opens the
   same dialog creation uses. */
.gp-edit          { margin-left:8px; padding:0; border:0; background:none; cursor:pointer;
                    font-size:.74rem; font-weight:600; color:var(--sg-sky,#2E8FC4);
                    text-decoration:underline; }
/* Show field — the spec's pill toggle: a real track and knob, not a text button,
   because it reads as a state you can flip rather than a label. */
.gp-switch        { display:inline-flex; align-items:center; gap:10px; cursor:pointer;
                    padding:7px 12px 7px 14px; border-radius:9px;
                    border:1px solid var(--edge-strong); background:var(--surface-card); }
.gp-switch-l      { font-size:.78rem; font-weight:600; color:var(--content-strong); }
.gp-switch i      { position:relative; width:46px; height:26px; border-radius:13px;
                    background:#DFE4EA; border:1px solid #CBD4DE; transition:background .12s; }
.gp-switch i::after { content:""; position:absolute; top:3px; left:3px;
                    width:18px; height:18px; border-radius:50%; background:#fff;
                    transition:left .12s; }
.gp-switch-on i   { background:var(--sg-sky,#2E8FC4); border-color:var(--sg-sky,#2E8FC4); }
.gp-switch-on i::after { left:auto; right:3px; }
.gp-switch:hover i { background:#D3DAE2; }
.gp-switch-on:hover i { background:#2678A6; }
/* Sub plan | Notes segment. Notes is a TAB, not an always-on block — as a block
   it pushed the pitch and both tables below the fold. */
.gp-tabs          { display:flex; gap:0; padding:4px; border-radius:10px;
                    background:var(--surface-sunken,#E8ECF2); }
/* 13px per §A. The inactive half carries a hairline divider so the pair reads as
   ONE segmented control rather than two adjacent buttons — without it the
   unselected tab looks like a separate button on a light ground. */
.gp-tab           { padding:9px 18px; border:0; border-radius:8px; cursor:pointer;
                    background:transparent; color:var(--content-muted);
                    font-size:13px; font-weight:600; position:relative; }
.gp-tab + .gp-tab::before { content:""; position:absolute; left:0; top:9px; bottom:9px;
                    width:1px; background:#CBD4DE; }
.gp-tab-on + .gp-tab::before, .gp-tab:hover::before { background:transparent; }
.gp-tab-on        { background:var(--sg-navy,#002147); color:#fff; }
/* The period control's header home on a computer (spec §11.12 addendum). The
   same segments as the tile's, first in the cluster so the four existing
   controls keep their pixel positions, styled as this control's sibling.
   Shown only where there is a MOUSE and room: an iPad in landscape is 1194px
   wide and must keep the tile's segments, so width alone is not the test. At
   that breakpoint the tile's row goes, and the band is ~45px shorter. */
.gp-tabs-periods  { display:none; }
.gp-tabs-periods .gp-tab:disabled { opacity:.38; cursor:not-allowed; }
@media (min-width:1100px) and (pointer:fine) {
  .gp-tabs-periods { display:flex; }
  .gp-clock-now .gp-clock-periods { display:none; }
}
/* §A item 3: 40x40 icon-only, radius 9, 1.75px border. Active is Sky border,
   Sky tint fill, Sky glyph — the button reads as ON while its dialog is open,
   which is what tells you where the modal came from. */
.gp-gear          { width:40px; height:40px; border-radius:9px; cursor:pointer;
                    display:inline-flex; align-items:center; justify-content:center;
                    background:var(--surface-card,#fff); color:var(--content,#3E4E5E);
                    border:1.75px solid var(--edge-strong,#C9D2DC); flex-shrink:0; }
.gp-gear:hover    { background:#F0F3F7; }
.gp-gear-on       { border-color:var(--sg-sky,#2E8FC4); background:#EAF4FA;
                    color:var(--sg-sky,#2E8FC4); }

/* ── §D settings modal ──────────────────────────────────────────────────────
   Scoped under #gp-overlay and built from gp-* classes on purpose. The app's
   dm-* modal classes resolve app theme tokens, which flip under dark mode,
   while the planner is deliberately fixed light — a dm-* dialog would render
   dark over a white page. */
.gp-scrim         { position:fixed; inset:0; z-index:1700; overflow-y:auto;
                    display:flex; align-items:flex-start; justify-content:center;
                    padding:56px 24px 24px; background:rgba(0,33,71,.42); }
.gp-set-box       { width:1020px; max-width:100%; background:#fff; border-radius:14px;
                    border:1px solid var(--edge,#E1E6EC);
                    box-shadow:0 18px 48px rgba(0,33,71,.22); }
.gp-set-head      { display:flex; align-items:center; justify-content:space-between;
                    padding:14px 18px; border-bottom:1px solid var(--edge,#E1E6EC); }
.gp-set-title     { font-size:14.5px; font-weight:700; color:var(--content-strong,#12212F); }
.gp-set-done      { padding:8px 18px; border:0; border-radius:8px; cursor:pointer;
                    background:var(--sg-navy,#002147); color:#fff;
                    font-size:13px; font-weight:700; }
/* §D is a two-column grid, the left one right-ruled. The right column holds
   # of Players and Formation, neither of which ships yet — so the grid is
   declared here and the second column is simply not rendered until 2D. An
   empty ruled half would read as a broken dialog. */
.gp-set-body      { display:grid; grid-template-columns:340px 1fr; }
.gp-set-body > .gp-set-col:first-child:last-child { grid-column:1 / -1; }
.gp-set-col       { padding:16px 18px; display:flex; flex-direction:column; gap:16px; }
.gp-set-row       { display:flex; align-items:flex-start; gap:12px; }
/* 104px label slot, uppercase, per §D. */
.gp-set-label     { flex:0 0 104px; padding-top:9px; font-size:10.5px; font-weight:700;
                    letter-spacing:.9px; text-transform:uppercase;
                    color:var(--content-muted,#7C8794); }
.gp-set-ctl       { flex:1; min-width:0; }
.gp-set-input     { flex:1; min-width:0; padding:10px 12px; border-radius:8px;
                    border:1.75px solid var(--edge-strong,#C9D2DC);
                    background:var(--surface-input,#fff); color:var(--content-strong,#12212F);
                    font-size:13.5px; font-weight:600; font-family:inherit; }
.gp-set-input:focus { outline:none; border-color:var(--sg-sky,#2E8FC4); }
.gp-segs          { display:inline-flex; gap:8px; }
.gp-seg           { padding:9px 16px; border-radius:8px; cursor:pointer;
                    background:#fff; border:1.75px solid #D9DFE7;
                    color:var(--content-muted,#7C8794); font-size:12.5px; font-weight:600; }
.gp-seg-on        { background:var(--sg-sky,#2E8FC4); border-color:var(--sg-sky,#2E8FC4);
                    color:#fff; }
.gp-set-gloss     { margin-top:6px; font-size:12px; font-weight:500;
                    color:var(--content-muted,#7C8794); }
/* A field whose last save failed (D2): the line sits UNDER the input, aligned
   with it — 104px label + 12px gap — and names the value that is still stored.
   Only a row showing one wraps, so every other row keeps its layout. */
.gp-set-row:has(.gp-set-err) { flex-wrap:wrap; }
.gp-set-err       { flex:0 0 100%; margin:-6px 0 0 116px; font-size:12px; font-weight:600;
                    color:var(--danger,#B4483C); }
/* A failed period apply (D1): the message and its Retry / Discard sit under
   the period controls, in the modal the coach is looking at. */
.gp-apply-err     { margin-top:10px; padding:10px 12px; border-radius:8px;
                    background:var(--danger-tint,#FBEDEB); border:1px solid var(--danger,#B4483C); }
.gp-apply-err-msg { font-size:12.5px; font-weight:600; color:var(--danger,#B4483C); }
.gp-apply-err-acts { display:flex; gap:8px; margin-top:8px; }
.gp-apply-retry, .gp-apply-discard { padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:700;
                    border:1.5px solid var(--danger,#B4483C); background:#fff; color:var(--danger,#B4483C); cursor:pointer; }
.gp-apply-retry   { background:var(--danger,#B4483C); color:#fff; }
.gp-set-done[aria-disabled="true"], .gp-apply:disabled { opacity:.6; cursor:progress; }
/* A failed plan load (the lock): the plan body is this panel, not an editable
   empty plan, until Retry loads the stored plan. */
.gp-load-fail     { margin:18px 0; padding:22px 24px; border-radius:12px; background:#fff;
                    border:1px solid var(--danger,#B4483C); }
.gp-load-fail-msg { font-size:15px; font-weight:700; color:var(--danger,#B4483C); }
.gp-load-fail-sub { margin-top:6px; font-size:13px; color:var(--content-muted,#7C8794); }
.gp-load-retry    { margin-top:14px; padding:9px 18px; border-radius:8px; border:0; cursor:pointer;
                    background:var(--danger,#B4483C); color:#fff; font-size:13px; font-weight:700; }

/* §D's draft stepper. 38x38 buttons, the value between them in tabular 16/700 —
   and SKY WHILE UNAPPLIED, which is the whole affordance: it says the number on
   screen is not yet the number stored. */
.gp-step          { display:flex; align-items:center; gap:10px; }
.gp-step-b        { width:38px; height:38px; border-radius:8px; cursor:pointer;
                    border:1.75px solid var(--edge-strong,#C9D2DC);
                    background:var(--surface-card,#fff);
                    color:var(--content-strong,#12212F);
                    font-size:17px; font-weight:700; line-height:1; }
.gp-step-b:hover  { border-color:var(--sg-sky,#2E8FC4); color:var(--sg-sky,#2E8FC4); }
.gp-step-v        { min-width:34px; text-align:center; font-size:16px; font-weight:700;
                    font-variant-numeric:tabular-nums;
                    color:var(--content-strong,#12212F); }
.gp-step-draft    { color:var(--sg-sky,#2E8FC4); }
/* "A Sky Apply button appears only while dirty" — rendered, not disabled, so
   there is nothing to press when there is nothing to apply. */
.gp-apply         { padding:9px 16px; border:0; border-radius:8px; cursor:pointer;
                    background:var(--sg-sky,#2E8FC4); color:#fff;
                    font-size:12.5px; font-weight:600; }

/* The lossy confirm (§11.2.1's rule, §D's chrome). Sits OVER the settings
   dialog: Cancel returns to a modal that is still open and still shows what was
   being changed. */
.gp-scrim-2       { z-index:1800; align-items:center; padding:24px; }
.gp-cf-box        { width:420px; max-width:100%; background:#fff; border-radius:14px;
                    border:1px solid var(--edge,#E1E6EC); padding:20px;
                    box-shadow:0 18px 48px rgba(0,33,71,.22); }
.gp-cf-msg        { font-size:13.5px; font-weight:500; line-height:1.5;
                    color:var(--content-strong,#12212F); white-space:pre-line; }
.gp-cf-acts       { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.gp-cf-cancel     { padding:9px 16px; border-radius:8px; cursor:pointer;
                    background:#fff; border:1.75px solid var(--edge-strong,#C9D2DC);
                    color:var(--content,#3E4E5E); font-size:12.5px; font-weight:600; }
.gp-cf-go         { padding:9px 16px; border:0; border-radius:8px; cursor:pointer;
                    background:var(--sg-navy,#002147); color:#fff;
                    font-size:12.5px; font-weight:600; }
/* Reset's confirm is Alert red FILLED, where the period confirm is Navy. §D:
   "different trigger, different dialog, different destructiveness. Never merge
   them." The colour is the difference a coach reads first. */
.gp-cf-danger     { padding:9px 16px; border:0; border-radius:8px; cursor:pointer;
                    background:var(--danger,#B4483C); color:#fff;
                    font-size:12.5px; font-weight:600; }
.gp-cf-danger:hover { background:var(--danger-hover,#993B31); }

/* §A item 4 — a Navy OUTLINE button, not a filled destructive one: the header
   affordance is neutral and the dialog carries the destructiveness. */
.gp-reset         { padding:9px 14px; border-radius:9px; cursor:pointer;
                    background:var(--surface-card,#fff);
                    border:1.75px solid var(--sg-navy,#002147);
                    color:var(--sg-navy,#002147);
                    font-size:12.5px; font-weight:600; flex-shrink:0; }
.gp-reset:hover   { background:#F0F3F7; }

/* §D's formation tiles: label only, wrapping, never horizontally scrolling. */
.gp-tiles         { display:flex; flex-wrap:wrap; gap:8px; }
.gp-tile          { padding:11px 18px; border-radius:9px; cursor:pointer;
                    background:var(--surface-card,#fff);
                    border:1.75px solid var(--edge-strong,#C9D2DC);
                    color:var(--content-strong,#12212F);
                    font-size:15px; font-weight:700; letter-spacing:-0.2px;
                    white-space:nowrap; }
.gp-tile:hover    { border-color:var(--sg-sky,#2E8FC4); }
.gp-tile-on       { border-color:var(--sg-sky,#2E8FC4); background:#EAF4FA;
                    color:var(--sg-navy,#002147); }

/* Phone: full-screen sheet, columns stacked, label slots full width. */
@media (max-width:640px) {
  /* §D: "the two columns stack". Not previously built — at 375px the rail kept
     its fixed basis and the pitch column was left 36px wide, with a 28px pitch
     inside it. Found while measuring the two deviations above. */
  .gp-field-row   { flex-direction:column; }
  .gp-rail        { flex:0 0 auto; border-left:0; border-top:1px solid #E1E6EC;
                    max-height:none; }
  .gp-clock       { flex-direction:column; }
  .gp-scrim       { padding:0; }
  .gp-set-box     { width:100%; min-height:100%; border-radius:0; border:0; }
  .gp-set-body    { grid-template-columns:1fr; }
  .gp-set-row     { flex-direction:column; gap:6px; }
  .gp-set-label   { flex:none; padding-top:0; }
  .gp-set-input   { width:100%; }
}
.gp-dot           { width:7px; height:7px; border-radius:50%; background:#E8B84B;
                    flex-shrink:0; }
/* The share column carries only the rail now — the +/- delta moved into the
   sticky name cell beside the dot, so the two fairness readings a coach acts
   on are on the column that never scrolls away. 150 fits the rail; the old 190
   was rail + number. */
.gp-mt-share      { flex:0 0 150px; }
.gp-share         { display:flex; align-items:center; gap:8px; padding:0 10px; }
.gp-share-rail    { flex:1; height:7px; border-radius:4px; background:var(--edge);
                    overflow:hidden; }
.gp-share-fill    { height:100%; background:#C2CCD7; border-radius:4px; }
.gp-share-at      { background:var(--sg-sky,#2E8FC4); }
.gp-share-d       { margin-left:auto; text-align:right; font-size:.7rem; font-weight:600;
                    font-variant-numeric:tabular-nums; color:var(--content); }
.gp-mt-name .gp-share-d { padding-right:2px; }
.gp-rail-row .gp-share-d { margin-left:0; min-width:30px; }
.gp-share-neg     { color:var(--danger,#B4483C); }

/* A horizontally scrolling table that continues past its right edge paints a
   fade there, toggled by _gpScrollCues from the real overflow. Without it the
   grid and the minutes table both end on a full column and read as complete —
   on iPad the fairness columns sat entirely behind that edge. A mask on the
   scroller itself is pinned to its box, not its content, so the fade stays at
   the right edge however far the table is scrolled. */
.gp-mt.gp-more-right, .gp-grid.gp-more-right {
                    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 44px), rgba(0,0,0,.35));
                    mask-image:linear-gradient(to right, #000 calc(100% - 44px), rgba(0,0,0,.35)); }

/* §C1 Season to date (README §C1). The card-level switch sits in the section
   title row; the table's own header row is 34px on #F7F9FB with 10.5px/700
   uppercase tracked labels, body rows 36px top-ruled #F1F4F7, values
   12.5px/500 tabular; a sticky 168px player column, then 82px per stat. The
   .gp-mt base supplies the border, radius, overflow:auto and the scroll cue. */
.gp-season-head   { display:flex; align-items:center; justify-content:space-between;
                    gap:12px; margin-bottom:10px; }
.gp-season-head .coach-section-title { margin:0; }
.gp-season        { margin-bottom:22px; }
.gp-season-note   { padding:18px 16px; border:1px solid var(--edge); border-radius:10px;
                    background:var(--surface-card); font-size:.82rem; color:var(--content); }
.gp-season-error  { color:var(--danger); display:flex; align-items:center; gap:12px; }
.gp-season-retry  { padding:6px 12px; border-radius:8px; font-size:.75rem; font-weight:600;
                    border:1px solid var(--edge-strong); background:var(--surface-card);
                    color:var(--content-strong); cursor:pointer; }
.gp-season-bar    { display:flex; align-items:center; justify-content:space-between;
                    gap:12px; padding:0 0 10px; }
.gp-season-title  { font-size:.9rem; font-weight:700; color:var(--content-strong); }
.gp-season-cats   { padding:7px 12px; border-radius:8px; font-size:.75rem; font-weight:600;
                    border:1.75px solid #C9D2DC; background:var(--surface-card);
                    color:var(--content-strong); cursor:pointer; }
.gp-season-cats-open { border-color:var(--sg-sky,#2E8FC4); color:var(--sg-sky,#2E8FC4);
                    background:#EAF4FA; }
.gp-season-picker { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                    padding:10px 12px; margin-bottom:10px; border-radius:10px;
                    background:#F0F5F9; }
.gp-season-picker-l { font-size:.66rem; font-weight:700; letter-spacing:.09em;
                    text-transform:uppercase; color:var(--content-muted); }
.gp-season-chips  { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.gp-season-chip   { padding:6px 12px; border-radius:16px; font-size:.72rem; font-weight:600;
                    border:1.5px solid #D9DFE7; background:var(--surface-card);
                    color:var(--content-muted); cursor:pointer; }
.gp-season-chip-on { background:var(--sg-sky,#2E8FC4); border-color:var(--sg-sky,#2E8FC4);
                    color:#fff; }
.gp-season-done   { margin-left:auto; padding:8px 14px; border-radius:8px; border:0;
                    background:var(--sg-navy); color:#fff; font-size:.75rem; font-weight:700;
                    cursor:pointer; }
.gp-season-row    { display:flex; align-items:center; min-height:36px;
                    border-top:1px solid #F1F4F7; }
.gp-season-headrow { min-height:34px; background:#F7F9FB; border-top:0;
                    font-size:.66rem; font-weight:700; letter-spacing:.05em;
                    text-transform:uppercase; color:var(--content-muted); }
.gp-season-headrow .gp-season-name { background:#F7F9FB; font-size:.66rem;
                    font-weight:700; color:var(--content-muted); }
.gp-season-name   { flex:0 0 168px; position:sticky; left:0; z-index:1;
                    display:flex; align-items:center; gap:8px; padding:0 12px;
                    background:var(--surface-card); font-size:.8rem; font-weight:600;
                    color:var(--content-strong); border-right:1px solid var(--edge); }
.gp-season-c      { flex:0 0 82px; text-align:center; font-size:.78rem; font-weight:500;
                    font-variant-numeric:tabular-nums; color:var(--content); }
.gp-season-gp     { font-weight:700; color:var(--content-strong); }
.gp-season-nogp sup { font-size:.6em; color:var(--sg-sky,#2E8FC4); margin-left:1px; }
.gp-season-dnp .gp-season-name { color:var(--content-muted); }
.gp-season-foot   { padding:8px 2px 0; font-size:.7rem; color:var(--content-muted); }

.gp-ghost         { position:fixed; z-index:80; pointer-events:none;
                    padding:7px 12px; border-radius:9px; font-size:.8rem;
                    font-weight:600; color:#fff; background:var(--sg-sky,#2E8FC4);
                    box-shadow:0 6px 18px rgba(0,33,71,.28); }

/* Builder shell */
/* The builder carries its own side gutter — the design's page is 22px in from
   the viewport, and without it the coverage meter's right edge sat exactly on
   the edge of a `main` that clips overflow, losing its last character. 16px
   on a phone, where every other screen's gutter is 16px. */
.prac-builder        { display:flex; flex-direction:column; min-height:0; padding:0 22px; box-sizing:border-box; max-width:100%; }
@media (max-width: 600px) { .prac-builder { padding:0 16px; } }
.prac-builder-header { display:flex; align-items:center; gap:10px; padding:12px 0 14px; flex-wrap:wrap; border-bottom:1px solid var(--edge); margin-bottom:4px; }
.prac-back-btn       { background:none; border:none; color:var(--content-muted); cursor:pointer; font-size:.88rem; padding:4px 0; flex-shrink:0; }
.prac-back-btn:hover { color:var(--content-strong); }
.prac-builder-meta   { display:flex; gap:8px; flex:1; flex-wrap:wrap; min-width:0; }
.prac-title-input    { flex:1; min-width:120px; }
.prac-starttime-label  { display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--content-muted); flex-shrink:0; }
.prac-starttime-input  { width:100px; }
.prac-duration-label   { display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--content-muted); flex-shrink:0; }
.prac-plannedur-input  { width:54px; }
.prac-budget-badge  { font-size:.82rem; color:var(--content); font-weight:600; white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums; }
.prac-budget-badge.prac-budget-over { color:var(--danger); }
.prac-save-status   { font-size:.75rem; color:var(--content-muted); white-space:nowrap; flex-shrink:0; }

/* ── Practice grid (PracticeGrid, public/practice/practice-grid.js) ──────────
   The design's time grid. Every colour here is a semantic token so the grid
   flips with the scheme; the only literals on this surface are the five
   drill-type colours and the coach-dot palette, which PracticeGrid applies
   inline from the design file. Rule from the token system: a --surface-*
   never appears without its --content-* partner. */
.pg-wrap        { display:flex; flex-direction:column; gap:12px; padding:10px 0 16px; background:var(--surface-base); color:var(--content); }
.pg-toolbar     { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.pg-window      { font-size:.85rem; font-weight:600; color:var(--content-strong); font-variant-numeric:tabular-nums; }
.pg-window-note { font-size:.78rem; font-weight:400; color:var(--content-muted); margin-left:4px; }

.pg-add-btn     { padding:8px 13px; border:1px solid var(--accent); background:var(--accent); color:var(--surface-card); border-radius:8px; font-size:.76rem; font-weight:600; cursor:pointer; margin-left:auto; }
.pg-meter       { min-width:230px; flex:0 1 260px; }
.pg-meter-row   { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.pg-meter-label { font-size:.82rem; font-weight:600; color:var(--content-strong); font-variant-numeric:tabular-nums; }
.pg-meter-gap   { font-size:.74rem; color:var(--content-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pg-meter-track { height:7px; border-radius:99px; background:var(--surface-raised); overflow:hidden; }
.pg-meter-fill  { height:100%; border-radius:99px; background:var(--accent); }
.pg-meter[data-state="over"] .pg-meter-fill { background:var(--danger); }
.pg-meter[data-state="over"] .pg-meter-gap  { color:var(--danger); }

.pg-legend      { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.pg-legend-item { display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--content); }
.pg-swatch      { width:16px; height:16px; border-radius:4px; background:var(--surface-card); border:1px solid var(--edge-strong); border-left-width:4px; display:inline-block; }
.pg-legend-note { font-size:.74rem; color:var(--content-muted); }

.pg-frame  { display:flex; align-items:stretch; background:var(--surface-card); color:var(--content); border:1px solid var(--edge); border-radius:12px; padding:14px 14px 18px; overflow-x:auto; }
.pg-axis   { position:relative; width:58px; flex:0 0 58px; font-variant-numeric:tabular-nums; }
.pg-axis-label      { position:absolute; right:10px; font-size:.74rem; font-weight:500; color:var(--content); white-space:nowrap; }
.pg-axis-label.pg-axis-end  { font-weight:600; color:var(--content-strong); }
.pg-axis-label.pg-axis-past { font-weight:400; color:var(--content-muted); }
.pg-phases { position:relative; width:46px; flex:0 0 46px; border-right:1px solid var(--edge); }
.pg-phase  { position:absolute; left:6px; right:6px; border-radius:6px; background:var(--surface-raised); color:var(--content); border-left:2px solid var(--edge-strong); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pg-phase-label { writing-mode:vertical-rl; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--content); white-space:nowrap; }
.pg-phase-label-tight { font-size:11px; letter-spacing:.06em; }
.pg-phase  { cursor:pointer; }
.pg-phase-editing { background:var(--surface-hover); border-left-color:var(--accent); }
/* The empty-sidebar placeholder: same band, dashed, no fill — a hint, not a phase. */
.pg-phase-empty { background:transparent; border:1.5px dashed var(--edge-strong); border-left-width:1.5px; }
.pg-phase-empty .pg-phase-label { color:var(--content-muted); text-transform:none; letter-spacing:.04em; font-weight:600; }
.pg-phase-empty:hover { border-color:var(--accent); }
.pg-phase-empty:hover .pg-phase-label { color:var(--accent); }
.pg-toolbar-actions { display:flex; gap:7px; align-items:center; margin-left:auto; }
.pg-toolbar-actions .pg-add-btn { margin-left:0; }
/* Quick-adds are secondary to "+ Add at time": placing a break is small and
   frequent, not the primary act. Same shape as .pg-phase-btn, tinted with the
   break's own tokens so the button names the colour the card will take. */
.pg-break-btn { padding:8px 12px; border:1px solid var(--pt-break-edge); background:var(--pt-break-tint); color:var(--pt-break-deep); border-radius:8px; font-size:.76rem; font-weight:500; cursor:pointer; }
.pg-phase-btn { padding:8px 12px; border:1px solid var(--edge-strong); background:var(--surface-card); color:var(--content); border-radius:8px; font-size:.76rem; font-weight:500; cursor:pointer; }

/* ── Phase modal (Phase 2e) — centred, above the drawer, same tokens ──────── */
.pgp-wrap  { position:fixed; inset:0; z-index:1600; display:flex; align-items:center; justify-content:center; padding:24px; }
.pgp-scrim { position:absolute; inset:0; background:var(--content-strong); opacity:.34; }
.pgp-card  { position:relative; width:352px; max-width:100%; background:var(--surface-card); color:var(--content); border:1px solid var(--edge-strong); border-radius:12px; box-shadow:0 18px 44px var(--edge-strong); overflow:hidden; }
.pgp-head  { padding:15px 18px; border-bottom:1px solid var(--edge); background:var(--surface-raised); color:var(--content); }
.pgp-kicker{ font-size:.63rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--content-muted); margin-bottom:4px; }
.pgp-range { font-size:.74rem; font-weight:500; color:var(--content-muted); font-variant-numeric:tabular-nums; }
.pgp-body  { padding:16px 18px; display:flex; flex-direction:column; gap:16px; }
.pgp-label { font-weight:600; }
.pgp-footer{ display:flex; gap:8px; padding-top:2px; }

.pg-grid { position:relative; flex:1 1 0; min-width:220px; background-color:var(--surface-base);
  background-image:
    repeating-linear-gradient(to bottom, var(--edge) 0 1px, transparent 1px 25px),
    repeating-linear-gradient(to bottom, var(--edge-strong) 0 1px, transparent 1px 75px); }
.pg-overrun       { position:absolute; left:0; right:0; border-top:1.75px solid var(--edge-strong); pointer-events:none;
  background-image:repeating-linear-gradient(135deg, var(--edge-strong) 0 1px, transparent 1px 7px); }
.pg-overrun-label { position:absolute; left:8px; font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--content-muted); pointer-events:none; }

.pg-empty       { position:absolute; left:14px; right:14px; top:80px; border:1.5px dashed var(--edge-strong); border-radius:12px; padding:26px 24px; background:var(--surface-card); color:var(--content); text-align:center; }
.pg-empty-title { font-size:1rem; font-weight:700; color:var(--content-strong); margin-bottom:8px; }
.pg-empty-body  { font-size:.82rem; color:var(--content-muted); max-width:340px; margin:0 auto; }

.pg-box   { position:absolute; }
.pg-card  { position:relative; height:100%; background:var(--surface-card); color:var(--content); border:1px solid var(--edge); border-radius:7px; overflow:hidden; box-shadow:0 1px 1px var(--edge); }
.pg-stripe{ position:absolute; left:0; top:0; bottom:0; width:4px; }
.pg-card-body { height:100%; overflow:hidden; display:flex; }
.pg-roomy   { flex-direction:column; gap:4px; padding:7px 9px 7px 12px; }
.pg-narrow  { flex-direction:column; gap:3px; padding:6px 8px 6px 11px; }
.pg-compact { flex-direction:row; align-items:center; gap:8px; padding:0 8px 0 12px; }
.pg-row-top  { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; min-height:0; }
.pg-row-meta { display:flex; gap:7px; align-items:center; flex:0 0 auto; overflow:hidden; }
.pg-narrow .pg-row-meta { gap:6px; margin-top:auto; }
.pg-name { font-size:.78rem; font-weight:600; line-height:1.25; color:var(--content-strong); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-width:0; }
.pg-name-clamp { font-size:.72rem; line-height:1.2; flex:0 1 auto; }
.pg-clamp3     { -webkit-line-clamp:3; }
.pg-name-tight { font-size:.69rem; line-height:1; display:block; white-space:nowrap; text-overflow:ellipsis; }
.pg-time { font-size:.66rem; font-weight:500; color:var(--content-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pg-compact .pg-time { margin-left:auto; }
.pg-chip { font-size:.66rem; font-weight:500; border:1px solid; padding:3px 6px; border-radius:5px; white-space:nowrap; }
.pg-dots { display:flex; gap:3px; flex:0 0 auto; }
.pg-narrow .pg-dots { margin-left:auto; }
.pg-dot  { width:9px; height:9px; border-radius:99px; display:inline-block; flex:0 0 auto; box-shadow:0 0 0 1.5px var(--surface-card); }
.pg-dot-unknown { background:var(--surface-raised); border:1px dashed var(--content-muted); }
.pg-foot { font-size:.74rem; color:var(--content-muted); padding-top:2px; }

.pg-box { cursor:pointer; }
.pg-box-selected .pg-card { outline:2px solid var(--accent); outline-offset:1px; }
/* A pending item — dropped from the library, not yet added — reads as a draft:
   dashed edge, slightly lifted. It is in no request until confirmed. */
.pg-box-pending .pg-card { border-style:dashed; border-color:var(--accent); box-shadow:0 6px 18px var(--edge-strong); }

/* ── Library panel beside the grid (Phase 2d) ────────────────────────────── */
.pg-row  { display:flex; gap:18px; align-items:flex-start; min-width:0; flex-wrap:wrap; }
.pg-main { flex:1 1 520px; min-width:0; }
.pg-lib  { flex:0 0 306px; width:306px; background:var(--surface-card); color:var(--content); border:1px solid var(--edge); border-radius:12px; padding:16px; box-sizing:border-box; margin-top:10px; }
@media (max-width: 1112px) { .pg-lib { flex-basis:258px; width:258px; padding:14px 14px 16px; } }
@media (max-width: 900px)  { .pg-lib { flex:1 1 100%; width:auto; } }
.pg-lib-head   { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.pg-lib-title  { font-size:.95rem; font-weight:700; color:var(--content-strong); }
.pg-lib-count  { font-size:.74rem; color:var(--content-muted); font-variant-numeric:tabular-nums; }
.pg-lib-search { width:100%; height:34px; padding:0 10px; border:1px solid var(--edge-strong); border-radius:7px; font-size:.8rem; color:var(--content-strong); background:var(--surface-input); outline:none; margin-bottom:7px; box-sizing:border-box; }
.pg-lib-search:focus { border-color:var(--accent); }
.pg-lib-filters { display:flex; gap:6px; margin-bottom:11px; }
.pg-lib-select  { flex:1 1 0; min-width:0; height:32px; padding:0 8px; border:1px solid var(--edge-strong); border-radius:7px; background:var(--surface-input); color:var(--content-strong); font-size:.74rem; font-weight:500; cursor:pointer; }
.pg-lib-list   { display:flex; flex-direction:column; gap:4px; max-height:470px; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.pg-lib-row    { display:flex; gap:8px; align-items:center; padding:3px 8px; border:1px solid var(--edge-strong); border-radius:7px; background:var(--surface-card); color:var(--content); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.pg-lib-row:active { cursor:grabbing; }
.pg-lib-grip   { display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }
.pg-lib-grip i { width:3px; height:3px; border-radius:99px; background:var(--content-muted); display:block; }
.pg-lib-thumb  { width:46px; height:22px; flex:0 0 auto; border-radius:4px; border:1.5px dashed; display:flex; align-items:center; justify-content:center; font-size:.63rem; font-weight:600; }
.pg-lib-thumb-has { border-style:solid; background-image:repeating-linear-gradient(45deg, var(--edge-strong) 0 1px, transparent 1px 5px); }
.pg-lib-name   { flex:1 1 auto; min-width:0; font-size:.76rem; font-weight:600; line-height:1.25; color:var(--content-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-lib-dur    { flex:0 0 auto; font-size:.66rem; font-weight:600; color:var(--content-muted); font-variant-numeric:tabular-nums; }
.pg-lib-empty  { font-size:.8rem; color:var(--content-muted); padding:18px 6px; text-align:center; }
.pg-lib-foot   { margin-top:11px; padding-top:10px; border-top:1px solid var(--edge); font-size:.7rem; line-height:1.5; color:var(--content-muted); }

.pg-lib-ghost  { position:fixed; z-index:1700; pointer-events:none; background:var(--surface-card); color:var(--content); border:1px solid var(--edge-strong); border-left:4px solid; border-radius:7px; padding:7px 11px; display:flex; flex-direction:column; gap:3px; box-shadow:0 10px 24px var(--edge-strong); max-width:220px; }
.pg-lib-ghost-name { font-size:.76rem; font-weight:600; line-height:1.2; color:var(--content-strong); }
.pg-lib-ghost-dur  { font-size:.66rem; font-weight:500; color:var(--content-muted); font-variant-numeric:tabular-nums; }
.pg-drop-preview   { position:absolute; left:2px; right:4px; border:1.75px dashed var(--accent); background:var(--surface-raised); color:var(--content-strong); border-radius:7px; z-index:25; display:flex; align-items:center; padding:0 10px; pointer-events:none; font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums; }

/* ── Agenda — the phone rendering (Phase 3) ──────────────────────────────────
   Below 640px coach_practice.js renders PracticeAgenda instead of the grid
   (the one choice point, PRAC_AGENDA_MAX); the rules here only paint it. The
   same boundary hides the library panel: its rows drag onto a time grid that
   is not on screen, and the phone's add path is the bottom sheet (packet 2).
   Cards reuse .pg-stripe/.pg-dots/.pg-chip/.pg-time; the box itself is in
   list flow, so it is .pa-box, not the absolutely positioned .pg-box. */
@media (max-width: 639.98px) { .pg-lib { display:none; } }
.pa-wrap       { background:var(--surface-card); color:var(--content); border:1px solid var(--edge); border-radius:12px; overflow:hidden; margin-top:10px; }
.pa-head       { display:flex; align-items:baseline; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--edge); }
.pa-title      { font-family:Archivo, Inter, sans-serif; font-size:.95rem; font-weight:700; color:var(--content-strong); }
.pa-range      { font-size:.74rem; color:var(--content-muted); font-variant-numeric:tabular-nums; }
.pa-empty      { padding:34px 22px; text-align:center; }
.pa-group      { padding:14px 0; border-bottom:1px solid var(--edge); }
.pa-group:last-child { border-bottom:0; }
.pa-group-head { display:flex; align-items:center; gap:9px; padding:0 16px; margin-bottom:8px; }
.pa-group-time { font-size:.76rem; font-weight:600; color:var(--content-strong); font-variant-numeric:tabular-nums; }
.pa-parallel   { font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--surface-raised); padding:4px 6px; border-radius:5px; white-space:nowrap; }
.pa-rule       { flex:1 1 auto; height:1px; background:var(--edge); }
.pa-group-dur  { font-size:.7rem; font-weight:500; color:var(--content-muted); font-variant-numeric:tabular-nums; }
.pa-group-items{ display:flex; flex-direction:column; gap:7px; padding:0 16px; }
.pa-box        { cursor:pointer; }
.pa-card       { position:relative; background:var(--surface-card); color:var(--content); border:1px solid var(--edge); border-radius:10px; overflow:hidden; }
.pa-card-body  { padding:11px 12px 11px 14px; display:flex; flex-direction:column; gap:7px; }
.pa-row-top    { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.pa-row-top .pg-dots { padding-top:3px; }
.pa-name       { font-size:.88rem; font-weight:600; line-height:1.25; color:var(--content-strong); min-width:0; }
.pa-row-meta   { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pa-bar        { height:5px; border-radius:99px; background:var(--surface-raised); overflow:hidden; }
.pa-bar-fill   { height:100%; border-radius:99px; }
.pa-box-selected .pa-card { outline:2px solid var(--accent); outline-offset:1px; }
.pa-box-pending  .pa-card { border-style:dashed; border-color:var(--accent); box-shadow:0 6px 18px var(--edge-strong); }
.pa-foot       { padding:16px; border-top:1px solid var(--edge); display:flex; gap:9px; }
.pa-add-btn    { flex:1 1 auto; min-height:46px; padding:13px; border:1px solid var(--accent); background:var(--accent); color:var(--surface-card); border-radius:10px; font-size:.88rem; font-weight:600; cursor:pointer; }
.pa-break-btn  { flex:0 0 auto; min-height:46px; padding:13px 14px; border:1px solid var(--pt-break-edge); background:var(--pt-break-tint); color:var(--pt-break-deep); border-radius:10px; font-size:.86rem; font-weight:600; cursor:pointer; white-space:nowrap; }

/* ── The bottom sheet (Phase 3 packet 2) — the phone's add path ──────────────
   Design: a 392px-max panel rising from the bottom, 84% of the viewport,
   handle, "Add from library" + count, search and two selects at 44px, a
   scrolling list of 46px tap rows, and "+ Ad-hoc item" / Cancel. Rows are
   TAPS, not drag sources: no touch-action:none, no pointerdown — a finger on
   a row scrolls the list. Height is against the VISIBLE viewport (dvh, with
   vh for browsers without it) so the footer clears a mobile browser's
   toolbars. z-index sits between the drawer (1500) and the phase modal
   (1600); the sheet and the drawer are never open together. */
.pgs-wrap   { position:fixed; inset:0; z-index:1550; display:flex; flex-direction:column; justify-content:flex-end; }
.pgs-scrim  { position:absolute; inset:0; background:var(--content-strong); opacity:.34; }
.pgs-panel  { position:relative; width:392px; max-width:100%; margin:0 auto; height:84vh; height:84dvh; display:flex; flex-direction:column; background:var(--surface-card); color:var(--content); border-top:1px solid var(--edge-strong); border-radius:16px 16px 0 0; box-shadow:0 -10px 34px var(--edge-strong); }
.pgs-handle { padding:12px 16px 0; display:flex; justify-content:center; }
.pgs-handle span { width:38px; height:4px; border-radius:99px; background:var(--edge-strong); }
.pgs-head   { padding:12px 16px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pgs-title  { font-family:Archivo, Inter, sans-serif; font-size:1rem; font-weight:700; color:var(--content-strong); }
.pgs-filters{ padding:0 16px 12px; display:flex; flex-direction:column; gap:7px; }
.pgs-search { width:100%; height:44px; padding:0 12px; border:1px solid var(--edge-strong); border-radius:9px; font-size:.94rem; color:var(--content-strong); background:var(--surface-input); outline:none; box-sizing:border-box; }
.pgs-search:focus { border-color:var(--accent); }
.pgs-selects{ display:flex; gap:7px; }
.pgs-select { flex:1 1 0; min-width:0; height:44px; padding:0 10px; border:1px solid var(--edge-strong); border-radius:7px; background:var(--surface-input); color:var(--content-strong); font-size:.84rem; font-weight:500; cursor:pointer; }
.pgs-list   { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px; display:flex; flex-direction:column; gap:6px; }
.pgs-row    { display:flex; gap:10px; align-items:center; width:100%; text-align:left; padding:10px 12px; min-height:46px; border:1px solid var(--edge-strong); border-radius:9px; background:var(--surface-card); color:var(--content); cursor:pointer; box-sizing:border-box; }
.pgs-row:active { background:var(--surface-hover); }
.pgs-name   { flex:1 1 auto; min-width:0; font-size:.88rem; font-weight:600; line-height:1.25; color:var(--content-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pgs-dur    { flex:0 0 auto; font-size:.76rem; font-weight:600; color:var(--content-muted); font-variant-numeric:tabular-nums; }
.pgs-foot   { padding:14px 16px; border-top:1px solid var(--edge); display:flex; gap:9px; }
.pgs-adhoc  { flex:1 1 auto; min-height:46px; padding:13px; border:1px dashed var(--edge-strong); background:var(--surface-card); border-radius:10px; font-size:.86rem; font-weight:600; color:var(--content-strong); cursor:pointer; }
.pgs-cancel { flex:0 0 auto; min-height:46px; padding:13px 18px; border:1px solid var(--edge-strong); background:var(--surface-card); border-radius:10px; font-size:.86rem; font-weight:500; color:var(--content); cursor:pointer; }

/* ── Item detail drawer (Phase 2b) — same token discipline as the grid ─────── */
/* z-index 1400, deliberately BELOW the Play Designer's .pd-overlay (1500).
   The drawer's "Open diagram →" opens that overlay, and both mount on <body>:
   at an equal z-index the tie went to DOM order, and #prac-drawer is appended
   at runtime while #play-designer-overlay is static markup — so the drawer won
   everywhere. On a phone its panel is the full viewport, so the designer opened
   invisibly behind it; on a desktop the panel is 400px but .pgd-scrim still
   covers the rest, so the designer rendered dimmed and the first click on its
   canvas hit the scrim, which closes the drawer. One defect, two appearances.
   Below the designer the drawer simply waits underneath, still mounted, so the
   selection and any unconfirmed pending item survive the round trip untouched —
   no close, no re-render, nothing to rebuild on return. Still far above the
   fixed header (100) and nav, which is why it left the tab in the first place. */
.pgd-wrap  { position:fixed; inset:0; z-index:1400; display:flex; justify-content:flex-end; }
.pgd-scrim { position:absolute; inset:0; background:var(--content-strong); opacity:.34; }
.pgd-panel { position:relative; width:400px; max-width:92vw; height:100%; overflow-y:auto; background:var(--surface-card); color:var(--content); border-left:1px solid var(--edge-strong); box-shadow:-8px 0 32px var(--edge-strong); animation:pgdSlideIn 160ms ease-out; }
@keyframes pgdSlideIn { from { transform:translateX(24px); opacity:0; } to { transform:translateX(0); opacity:1; } }
/* Phone (Phase 3): the design's agenda-mode drawer — centred, 392px at most
   and the full viewport below that, bordered on both sides, no slide-in.
   Style only; the drawer's markup and logic are the same at every width. */
@media (max-width: 639.98px) {
  .pgd-wrap  { justify-content:center; align-items:stretch; }
  .pgd-panel { width:392px; max-width:100%; border-left:1px solid var(--edge-strong); border-right:1px solid var(--edge-strong); box-shadow:0 0 32px var(--edge-strong); animation:none; }
}
.pgd-head      { padding:18px 20px; border-bottom:1px solid var(--edge); border-left:5px solid; }
/* The head's fill is the type's tint (a fixed light value in both schemes), so
   its text takes the tint's own partner, `deep`, set inline beside it — never a
   scheme-flipping content token, which would be light-on-light in dark mode. */
.pgd-head-row  { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pgd-head-main { min-width:0; flex:1; }
.pgd-kind  { font-size:.63rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:inherit; opacity:.75; margin-bottom:7px; }
.pgd-name  { width:100%; border:1px solid transparent; background:transparent; font-size:1.15rem; font-weight:700; line-height:1.2; color:inherit; padding:2px 0; outline:none; }
.pgd-name::placeholder { color:inherit; opacity:.5; }
.pgd-name:focus { border-bottom-color:currentColor; }
.pgd-close { flex:0 0 auto; width:30px; height:30px; border:2px solid var(--edge-strong); background:var(--surface-card); color:var(--content-strong); border-radius:8px; font-size:.95rem; cursor:pointer; }
.pgd-body  { padding:18px 20px; display:flex; flex-direction:column; gap:20px; }
.pgd-row2  { display:flex; gap:12px; }
.pgd-row2 > div { flex:1 1 0; min-width:0; }
.pgd-label { font-size:.63rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--content-muted); margin-bottom:7px; }
.pgd-stepper { display:flex; align-items:center; border:1px solid var(--edge-strong); border-radius:8px; overflow:hidden; background:var(--surface-input); color:var(--content-strong); }
.pgd-stepper button { width:34px; height:38px; border:0; background:var(--surface-raised); color:var(--content-strong); font-size:.95rem; cursor:pointer; }
.pgd-stepper button:first-child { border-right:1px solid var(--edge); }
.pgd-stepper button:last-child  { border-left:1px solid var(--edge); }
.pgd-stepper button:disabled { color:var(--content-muted); cursor:default; }
.pgd-stepper span { flex:1; text-align:center; font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums; }
.pgd-input { width:100%; height:38px; padding:0 11px; border:1px solid var(--edge-strong); border-radius:8px; background:var(--surface-input); color:var(--content-strong); font-size:.82rem; outline:none; }
.pgd-input:focus { border-color:var(--accent); }
.pgd-num   { font-weight:600; font-variant-numeric:tabular-nums; }
.pgd-notes { height:auto; min-height:84px; padding:10px 11px; line-height:1.5; resize:vertical; font-family:inherit; }
.pgd-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pgd-chip  { padding:7px 10px; border-radius:7px; border:1px solid var(--edge-strong); background:var(--surface-card); color:var(--content); font-size:.72rem; font-weight:500; cursor:pointer; }
.pgd-chip-on { border-width:1.75px; font-weight:600; }
.pgd-coaches { display:flex; flex-direction:column; gap:6px; }
.pgd-coach { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:10px 11px; border-radius:9px; border:1px solid var(--edge); background:var(--surface-card); color:var(--content-strong); cursor:pointer; }
.pgd-coach-on { border:1.75px solid var(--accent); background:var(--surface-raised); }
.pgd-coach-name  { font-size:.82rem; font-weight:500; }
.pgd-coach-role  { margin-left:auto; font-size:.66rem; font-weight:500; color:var(--content-muted); }
.pgd-coach-check { margin-left:8px; min-width:12px; font-size:.75rem; font-weight:600; color:var(--accent); }
.pgd-hint  { font-size:.74rem; color:var(--content-muted); }
.pgd-content { border:1px solid var(--edge-strong); border-radius:10px; padding:13px; display:flex; gap:12px; align-items:center; background:var(--surface-card); color:var(--content); }
.pgd-thumb { width:46px; height:22px; flex:0 0 auto; border-radius:4px; border:1.5px dashed; display:flex; align-items:center; justify-content:center; font-size:.63rem; font-weight:600; }
.pgd-thumb-has { border-style:solid; background-image:repeating-linear-gradient(45deg, var(--edge-strong) 0 1px, transparent 1px 5px); }
.pgd-content-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pgd-content-name { font-size:.8rem; font-weight:600; color:var(--content-strong); }
.pgd-link  { font-size:.76rem; font-weight:600; color:var(--accent); text-decoration:none; }
.pgd-link:hover { text-decoration:underline; }
.pgd-footer { display:flex; gap:8px; padding-top:14px; border-top:1px solid var(--edge); }
.pgd-btn { flex:0 0 auto; padding:12px 14px; border:1px solid var(--edge-strong); background:var(--surface-card); color:var(--content-strong); border-radius:9px; font-size:.82rem; font-weight:500; cursor:pointer; }
.pgd-btn-primary { flex:1 1 auto; border-color:var(--accent); background:var(--accent); color:var(--surface-card); font-weight:600; }
.pgd-btn-danger  { border-color:var(--danger); color:var(--danger); }

/* Timeline */
.prac-timeline     { display:flex; flex-direction:column; gap:6px; padding:8px 0; }
.prac-empty-slots  { color:var(--content-muted); font-size:.88rem; padding:28px 0; text-align:center; }
.prac-add-slot-bar { padding:6px 0 12px; }
.prac-add-slot-btn { font-size:.88rem; }

.prac-slot {
  /* A time block is a card on the page: its own surface, a real edge, and a
     shadow so consecutive blocks read as separate objects rather than one
     continuous list. */
  border:1px solid var(--edge);
  border-radius:10px;
  overflow:hidden;
  background:var(--surface-card);
  color:var(--content);
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  touch-action:none;
}
.prac-slot.prac-item-dragging    { opacity:.4; }
.prac-slot.prac-drag-over        { border-color:var(--accent); }
.prac-slot.prac-item-drop-target { border-color:var(--accent); background:var(--surface-hover); }

.prac-slot-header {
  /* Raised surface + a full-strength divider, so the header is unmistakably
     the block's title bar and the activities below are its contents. */
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  background:var(--surface-raised);
  color:var(--content-strong);
  border-bottom:1px solid var(--edge-strong);
  /* Children were almost all flex-shrink:0 with no min-width:0, so the row
     could not shrink below ~285px and .prac-slot's overflow:hidden clipped it
     — which read as content bleeding past the right edge on iPhone. */
  flex-wrap:wrap;
  min-width:0;
}
.prac-slot-clock     { font-size:.78rem; color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; min-width:58px; }
.prac-slot-dur-input { width:44px; text-align:center; flex-shrink:0; background:var(--surface-input); border:1px solid var(--edge-strong); border-radius:6px; color:var(--content-strong); font-size:.82rem; padding:3px 5px; }
.prac-slot-dur-label { font-size:.72rem; color:var(--content-muted); flex-shrink:0; }
.prac-add-item-btn   { background:var(--surface-card); border:1px solid var(--edge-strong); color:var(--content); padding:3px 9px; border-radius:6px; font-size:.75rem; cursor:pointer; white-space:nowrap; margin-left:auto; flex-shrink:0; }
.prac-add-item-btn:hover { border-color:var(--accent); color:var(--accent); }
.prac-slot-del       { background:none; border:none; color:var(--content-muted); cursor:pointer; font-size:.85rem; padding:3px 5px; flex-shrink:0; }
.prac-slot-del:hover { color:var(--danger); }

/* Items within a slot */
.prac-slot-items   { padding:4px 0; }
.prac-slot-empty   { color:var(--content-muted); font-size:.8rem; padding:14px; font-style:italic; }
.prac-slot-item    { display:flex; align-items:flex-start; gap:8px; padding:8px 12px; }
.prac-slot-item:hover { background:var(--surface-hover); }
.prac-item-drag-handle { cursor:grab; color:var(--content-muted); font-size:1rem; flex-shrink:0; user-select:none; padding:2px 2px 0; touch-action:none; }
.prac-item-drag-handle:active { cursor:grabbing; }
.prac-item-icon    { flex-shrink:0; font-size:.95rem; padding-top:2px; }
.prac-item-body    { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.prac-item-name    { font-size:.88rem; font-weight:600; }
.prac-item-meta-row { display:flex; gap:6px; flex-wrap:wrap; }
.prac-subgroup-input { flex:0 0 auto; width:110px; background:transparent; border:1px solid var(--edge); border-radius:5px; color:var(--content); font-size:.72rem; padding:2px 6px; }
.prac-subgroup-input:focus { outline:none; border-color:var(--accent); color:var(--content-strong); background:var(--surface-input); }
.prac-note-input   { flex:1; min-width:80px; background:transparent; border:1px solid transparent; border-radius:5px; color:var(--content); font-size:.72rem; padding:2px 6px; }
.prac-note-input:focus { outline:none; border-color:var(--accent); color:var(--content-strong); background:var(--surface-input); }
.prac-note-input::placeholder { color:var(--content-muted); }
.prac-item-del     { background:none; border:none; color:var(--content-muted); cursor:pointer; font-size:.82rem; padding:3px 5px; flex-shrink:0; }
.prac-item-del:hover { color:var(--danger); }

/* Inputs */
.prac-input    { background:var(--surface-input); border:1px solid var(--edge-strong); border-radius:8px; color:var(--content-strong); font-size:.88rem; padding:8px 10px; width:100%; box-sizing:border-box; }
.prac-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
/* iOS WebKit centres the value inside <input type="date"> whatever the input's
   text-align says; Chrome and desktop Safari keep it at the start. The same
   rule already exists for .dm-input (line ~4523, Sep 13 2026) — the practice
   date fields were simply never covered by that selector. Chrome cannot render
   WebKit's date control, so this is not gate-assertable; verify on a device. */
.prac-input[type="date"]::-webkit-date-and-time-value { text-align:left; }
.prac-textarea { resize:vertical; min-height:70px; font-family:inherit; }
.prac-search   { background:var(--surface-input); border:1px solid var(--edge-strong); border-radius:8px; color:var(--content-strong); font-size:.88rem; padding:8px 10px; width:100%; box-sizing:border-box; margin-bottom:8px; }
.prac-search:focus { outline:none; border-color:var(--accent); }

/* Drag handle (slot-level) */
.prac-drag-handle { cursor:grab; color:var(--content-muted); font-size:1.1rem; flex-shrink:0; user-select:none; padding:0 2px; touch-action:none; }
.prac-drag-handle:active { cursor:grabbing; }

/* Modals — explicit dark background prevents dark-on-dark text */
.prac-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:2000; padding:16px; }
.prac-modal-card    { background:var(--surface-card); color:var(--content); border:1px solid var(--edge); border-radius:14px; padding:22px 20px; width:100%; max-width:440px; max-height:82vh; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.prac-add-card      { max-width:520px; }
.prac-lib-card      { max-width:560px; }
.prac-modal-title   { font-size:1.05rem; font-weight:700; color:var(--content-strong); }
.prac-modal-field   { display:flex; flex-direction:column; gap:5px; }
.prac-modal-field label { font-size:.8rem; color:var(--content-muted); }
.prac-opt           { color:var(--content-muted); }
.prac-modal-actions { display:flex; gap:10px; justify-content:flex-end; }

.prac-btn-primary   { background:#2a5fd4; color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:.88rem; font-weight:600; cursor:pointer; }
.prac-btn-primary:hover { background:#3a6fe4; }
.prac-btn-secondary { background:var(--surface-raised); color:var(--content-strong); border:1px solid var(--edge-strong); border-radius:8px; padding:9px 18px; font-size:.88rem; cursor:pointer; }
.prac-btn-secondary:hover { background:var(--surface-hover); border-color:var(--accent); }
.prac-btn-ghost     { background:none; border:none; color:var(--accent); font-size:.85rem; cursor:pointer; padding:4px 0; }
.prac-btn-ghost:hover { text-decoration:underline; }

/* Add-item tabs */
.prac-add-tabs    { display:flex; gap:4px; border-bottom:1px solid #3a3a3a; padding-bottom:12px; }
.prac-add-tab     { background:none; border:1px solid var(--edge-strong); border-radius:8px; color:var(--content); font-size:.82rem; padding:6px 14px; cursor:pointer; }
.prac-add-tab.prac-add-tab-active { background:#2a5fd4; border-color:#2a5fd4; color:#fff; font-weight:600; }

/* Pickers */
.prac-pick-list { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow-y:auto; }
.prac-pick-row  { display:flex; align-items:baseline; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; background:var(--surface-raised); }
.prac-pick-row:hover { background:var(--surface-hover); }
.prac-pick-name { font-size:.88rem; font-weight:600; color:var(--content-strong); flex:1; }
.prac-pick-desc { font-size:.75rem; color:var(--content-muted); flex:1; }
.prac-pick-dur  { font-size:.75rem; color:var(--content-muted); flex-shrink:0; }
.prac-pick-footer { display:flex; gap:10px; justify-content:space-between; align-items:center; padding-top:8px; }

/* Drill library */
.prac-lib-list      { display:flex; flex-direction:column; gap:5px; max-height:350px; overflow-y:auto; }
.prac-lib-row       { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--surface-raised); border-radius:8px; }
.prac-lib-row-body  { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.prac-lib-name      { font-size:.88rem; font-weight:600; color:var(--content-strong); }
.prac-lib-desc      { font-size:.75rem; color:var(--content-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prac-lib-dur       { font-size:.72rem; color:var(--content-muted); }
.prac-lib-row-actions { display:flex; gap:6px; flex-shrink:0; }
.prac-lib-footer    { display:flex; gap:10px; justify-content:space-between; align-items:center; padding-top:8px; }

/* The practice light-mode patch that used to live here is gone. Every rule it
   corrected now reads its colours from the surface/content tokens, which carry
   values for both schemes — so there is nothing scheme-specific left to patch.
   Re-introducing a block here would recreate the bug it was hiding. */

/* ── Drill form — Sprint B (video, screenshots, play diagram) ─────────────── */
.df-modal-card {
  background:#1e1e1e; color:#e8e8e8;
  border:1px solid #3a3a3a; border-radius:14px;
  padding:0; width:100%; max-width:560px; max-height:88vh;
  overflow-y:auto; display:flex; flex-direction:column;
}
.df-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 12px; border-bottom:1px solid #2e2e2e; flex-shrink:0;
}
.df-close-btn   { background:none; border:none; color:#888; font-size:1rem; cursor:pointer; padding:4px; }
.df-close-btn:hover { color:#fff; }
.df-divider     { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
                  color:#666; padding:10px 20px 0; }
.df-section     { padding:10px 20px; display:flex; flex-direction:column; gap:10px; }
.df-dur-input   { max-width:100px; }
.df-diagram-select { background:#2a2a2a; }

/* Video embed */
.df-video-preview { min-height:0; }
.df-video-embed {
  width:100%; aspect-ratio:16/9; border-radius:8px;
  border:1px solid #333; display:block; background:#000;
}

/* Screenshots */
.df-thumbs      { display:flex; flex-wrap:wrap; gap:8px; min-height:0; }
.df-thumb       { position:relative; width:80px; height:60px; flex-shrink:0; }
.df-thumb-img   { width:100%; height:100%; object-fit:cover; border-radius:6px; border:1px solid #444; display:block; }

/* Play diagram */
.df-linked-play { font-size:.82rem; color:#4a8fff; padding:4px 0; }
.df-no-plays    { font-size:.82rem; color:#666; }

.df-form-actions { padding:14px 20px; border-top:1px solid #2e2e2e; margin-top:0; }
/* View mode for an Otis library drill (H3): the reason it cannot be edited sits
   where Save would be. A token rather than this block's literals, so it reads
   in both schemes without a light-mode override of its own. */
.df-readonly-note { margin-right:auto; align-self:center; font-size:.8rem; color:var(--content-muted); }
.df-section .prac-input:disabled { cursor:default; }

@media (prefers-color-scheme: light) {
  .df-modal-card    { background:#fafafa; color:#111; border-color:#ddd; }
  .df-modal-header  { border-color:#e0e0e0; }
  .df-divider       { color:#aaa; }
  .df-section .prac-input { background:#fff; border-color:#ccc; color:#111; }
  .df-diagram-select { background:#fff; }
  .df-thumb-img     { border-color:#ccc; }
  .df-no-plays      { color:#aaa; }
  .df-form-actions  { border-color:#e0e0e0; }
  /* .df-modal-card is the only *-modal-card that switches to a light background in
     light mode (.prac-modal-card is permanently dark by design), so it must also
     re-theme the shared text classes it reuses — otherwise their hardcoded dark-mode
     colors (white title, light-gray label) render near-invisible on the new light
     background. Scoped to .df-modal-card so .prac-modal-card dialogs (New Practice,
     Add Activity, Pub Library) are untouched and stay correctly dark. */
  .df-modal-card .prac-modal-title       { color:#111; }
  .df-modal-card .prac-modal-field label { color:#555; }
  .df-modal-card .prac-opt               { color:#888; }
}

/* ── Drill form classification fields ───────────────────────────────────────── */
.df-select { appearance:none; }

/* ── Drill picker category chips ────────────────────────────────────────────── */
.prac-pick-cats { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0 2px; }
.prac-pick-cat  { font-size:.75rem; padding:3px 10px; border-radius:12px; border:1px solid #444;
                  background:transparent; color:#aaa; cursor:pointer; }
.prac-pick-cat.active { background:#4a8fff; border-color:#4a8fff; color:#fff; }
.prac-lib-badge { font-size:.68rem; padding:1px 6px; border-radius:8px;
                  background:#1a3a6b; color:#8ab4ff; margin-left:4px; vertical-align:middle; }

/* ── Coach Library browse tab ───────────────────────────────────────────────── */
.cl-header      { padding:16px 16px 4px; }
.cl-title       { font-size:1.1rem; font-weight:600; }
.cl-subtitle    { font-size:.82rem; color:#888; margin-top:2px; }
.cl-filters     { padding:10px 16px; display:flex; flex-direction:column; gap:8px; }
/* Filters are light with dark text in EVERY scheme (Mike, 2026-09-25). Built
   from the older tokens on purpose: --bg, --text-primary, --border, --orange
   and --orange-light have no dark variants, so they stay light in dark mode,
   while the surface and content token pairs would flip. color-scheme:light keeps
   the native select arrow and dropdown light too. */
.cl-search      { width:100%; box-sizing:border-box; padding:8px 12px; border-radius:8px;
                  border:1px solid var(--border); background:var(--bg); color:var(--text-primary);
                  font-size:.9rem; color-scheme:light; }
.cl-search::placeholder { color:var(--text-secondary); }
.cl-filter-row  { display:flex; gap:8px; flex-wrap:wrap; }
.cl-select      { flex:1; min-width:120px; padding:6px 10px; border-radius:8px;
                  border:1px solid var(--border); background:var(--bg); color:var(--text-primary);
                  font-size:.82rem; color-scheme:light; }
/* An ACTIVE filter — a chosen sport or category (anything but "All"), or typed
   search — reads selected without a dark fill: a navy edge and a pale navy
   tint, text still dark. */
.cl-select:has(option:checked:not([value=""]):not([value="all"])),
.cl-search:not(:placeholder-shown) { border-color:var(--orange); background:var(--orange-light);
                                     box-shadow:inset 0 0 0 1px var(--orange); font-weight:600; }
.cl-select:focus-visible,
.cl-search:focus-visible { outline:2px solid var(--orange); outline-offset:1px; }
.cl-list        { padding:0 12px 80px; }
.cl-empty       { padding:32px 16px; text-align:center; color:#666; font-size:.9rem; }
.cl-row         { padding:12px 4px; border-bottom:1px solid #222; }
.cl-row-name    { font-size:.95rem; font-weight:500; margin-bottom:3px; }
.cl-row-desc    { font-size:.8rem; color:#888; margin-bottom:5px; }
.cl-row-meta    { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cl-badge       { font-size:.72rem; padding:2px 7px; border-radius:10px; }
.cl-badge-drill   { background:#1a3a6b; color:#8ab4ff; }
.cl-badge-workout { background:#3a1a4b; color:#c084fc; }
.cl-badge-cat     { background:#1e3a1e; color:#4ade80; }
.cl-badge-subcat  { background:#2a2a1e; color:#fbbf24; }
.cl-source      { font-size:.72rem; color:#666; }
.cl-dur         { font-size:.72rem; color:#666; margin-left:auto; }

@media (prefers-color-scheme: light) {
  .cl-row      { border-color:#eee; }
  .cl-badge-drill   { background:#dbeafe; color:#1d4ed8; }
  .cl-badge-workout { background:#f3e8ff; color:#7c3aed; }
  .cl-badge-cat     { background:#dcfce7; color:#166534; }
  .cl-badge-subcat  { background:#fef9c3; color:#854d0e; }
  .prac-pick-cat    { border-color:#ccc; color:#666; }
  .prac-lib-badge   { background:#dbeafe; color:#1d4ed8; }
}

/* ── Admin Pub Library tab ──────────────────────────────────────────────────── */
.apl-header-row  { display:flex; align-items:center; gap:10px; padding:12px 16px 6px; }
.apl-title       { font-size:1rem; font-weight:600; }
.apl-count       { font-size:.8rem; color:#888; font-weight:400; }
.apl-filters     { padding:6px 16px 8px; }
.apl-filter-btns { display:flex; gap:6px; flex-wrap:wrap; }
.apl-filter-btn  { font-size:.8rem; padding:4px 12px; border-radius:12px;
                   border:1px solid #444; background:transparent; color:#aaa; cursor:pointer; }
.apl-filter-btn.active { background:#4a8fff; border-color:#4a8fff; color:#fff; }
.apl-batch-bar   { display:flex; align-items:center; gap:8px; padding:8px 16px;
                   background:#1a2a3a; border-bottom:1px solid #2a3a4a; flex-wrap:wrap; }
.apl-batch-label { font-size:.82rem; color:#aaa; margin-right:4px; }
.apl-batch-btn   { font-size:.78rem; padding:4px 10px; border-radius:6px;
                   background:#1565C0; color:#fff; border:none; cursor:pointer; }
.apl-batch-btn-rev { background:#555; }
.apl-batch-btn:hover { opacity:.85; }
#apl-list        { padding:0 0 40px; }
.apl-row         { display:flex; align-items:flex-start; gap:10px; padding:12px 16px;
                   border-bottom:1px solid #222; }
.apl-row-check   { padding-top:2px; flex-shrink:0; }
.apl-check       { width:16px; height:16px; cursor:pointer; }
.apl-row-body    { flex:1; min-width:0; }
.apl-row-top     { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.apl-row-name    { font-size:.92rem; font-weight:500; }
.apl-status-badge { font-size:.72rem; padding:2px 8px; border-radius:10px; }
.apl-type-badge  { font-size:.72rem; padding:2px 7px; border-radius:10px;
                   background:#2a2a2a; color:#aaa; }
.apl-row-meta    { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:4px; }
.apl-row-desc    { font-size:.78rem; color:#888; }
.apl-row-actions { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.apl-action-btn  { font-size:.75rem; padding:4px 10px; border-radius:6px;
                   background:#2a2a2a; color:#e8e8e8; border:1px solid #444; cursor:pointer;
                   white-space:nowrap; }
.apl-action-btn:hover        { background:#3a3a3a; }
.apl-transition-btn          { background:#1a2a3a; border-color:#2a4a6a; color:#8ab4ff; }
.apl-transition-btn:hover    { background:#1e3a5a; }
.apl-del-btn                 { color:#f87171; border-color:#3a1a1a; background:#1e1010; }
.apl-del-btn:hover           { background:#2a1414; }
.apl-del-disabled            { opacity:.35; cursor:not-allowed; }

@media (prefers-color-scheme: light) {
  .apl-filter-btn  { border-color:#ccc; color:#555; }
  .apl-batch-bar   { background:#e8f0fe; border-color:#c5d5f0; }
  .apl-batch-label { color:#555; }
  .apl-row         { border-color:#eee; }
  .apl-type-badge  { background:#f0f0f0; color:#555; }
  .apl-action-btn  { background:#f5f5f5; color:#111; border-color:#ddd; }
  .apl-action-btn:hover { background:#ebebeb; }
  .apl-transition-btn   { background:#e8f0fe; border-color:#93c5fd; color:#1d4ed8; }
  .apl-transition-btn:hover { background:#dbeafe; }
  .apl-del-btn     { color:#dc2626; border-color:#fecaca; background:#fff5f5; }
}

/* ── Drill diagram button in drill form ───────────────────────────────────── */
.df-diagram-section  { display:flex; align-items:center; gap:12px; }
.df-diagram-btn      { padding:8px 16px; border-radius:8px; border:1px solid #4a6a8a;
                       background:#1a2a3a; color:#8ab4ff; font-size:.85rem; cursor:pointer; }
.df-diagram-btn:hover { background:#1e3a5a; }
.df-diagram-badge    { font-size:.8rem; color:#4ade80; }

/* ── Drill diagram overlay title ─────────────────────────────────────────── */
.sp-doc-title        { font-size:.9rem; font-weight:600; color:#e0e0e0;
                       overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                       max-width:200px; }

@media (prefers-color-scheme: light) {
  .df-diagram-btn    { background:#e8f0fe; border-color:#93c5fd; color:#1d4ed8; }
  .df-diagram-btn:hover { background:#dbeafe; }
  .sp-doc-title      { color:#111; }
}

/* Drill diagram overlay sits above the drill form modal (z-index 2000) */
#dd-overlay { z-index: 2100; }

/* ══ Coach Games — Soccer In-Game Management ═══════════════════════════════
   Design: design_handoff_soccer_in_game/README.md (Otis Athletic Labs brand).
   This screen carries its OWN palette rather than the app's --surface/--content
   tokens: the handoff specifies a fixed navy/sky/pitch identity that has to
   read the same in any lighting, and a coach uses it outdoors mid-game. It is
   deliberately single-theme — the app's dark-mode tokens must not repaint a
   pitch or a scoreboard. Everything is scoped under #sg-overlay so nothing
   here can leak into the rest of the app.
   ════════════════════════════════════════════════════════════════════════ */

#sg-overlay {
  position: fixed; inset: 0; z-index: 1600; display: none;
  flex-direction: column; background: #001433;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sg-navy:#002147; --sg-sky:#2E8FC4; --sg-sky-l:#4FA8D8; --sg-sky-p:#D2E9F5;
  --sg-mist:#A9CDE4; --sg-muted:#7FA8C9; --sg-paper:#F6F4EF; --sg-paper-w:#F1EEE7;
  --sg-line:#E2DED4; --sg-gray:#C9CFD6; --sg-gray-d:#98A4B0; --sg-hair:#C9D6E0;
  --sg-band:#E9EDF0; --sg-slate:#3D4A57; --sg-slate-2:#5A6B7A; --sg-slate-3:#7A8794;
  --sg-gold:#E8B84B; --sg-pitch:#2F7A46;
}
#sg-overlay *, #sg-overlay *::before, #sg-overlay *::after { box-sizing: border-box; }
.sg-screen { flex:1; display:flex; flex-direction:column; background: var(--sg-paper); min-height:0; }

/* ── Formation header ─────────────────────────────────────────────────── */
.sg-head { display:flex; align-items:center; gap:26px; padding:18px 26px 16px;
  background: var(--sg-navy); flex-shrink:0; }
.sg-head-left { min-width:0; }
.sg-head-title { font-family: Archivo, Inter, sans-serif; font-weight:800; font-size:20px;
  color:#fff; letter-spacing:.01em; }
.sg-head-sub { font-size:13px; color: var(--sg-sky-p); margin-top:2px; }
.sg-rule { width:190px; margin-top:8px; }
.sg-rule i, .sg-rule b { display:block; width:100%; border-radius:2px; }
.sg-rule i { height:4px; background: var(--sg-sky); }
.sg-rule b { height:2px; background: var(--sg-gold); margin-top:2px; }
.sg-head-mid { flex:1; min-width:0; }
.sg-head-label { font-size:10px; font-weight:700; letter-spacing:.14em;
  color: var(--sg-muted); margin-bottom:6px; }
.sg-chips { display:flex; gap:8px; flex-wrap:wrap; }
.sg-chip { min-height:44px; padding:0 18px; border-radius:10px; border:0; cursor:pointer;
  background: rgba(255,255,255,.10); color: var(--sg-sky-p);
  font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:15px; }
.sg-chip-on { background: var(--sg-sky); color:#fff; }
/* On a phone the formation presets are ONE control, a select styled as the
   active chip, rather than a stack of chips (Sep 13 2026). Both renderings
   are in the markup; this chooses. 600px, not the header's 900px wrap, so an
   iPad in portrait keeps the chips. */
.sg-chip-select, .sg-size-select { display:none; min-height:44px; padding:0 40px 0 18px; border-radius:10px; border:0;
  background: var(--sg-sky) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='white' stroke-width='2'/></svg>") no-repeat right 16px center;
  color:#fff; font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:15px;
  -webkit-appearance:none; appearance:none; cursor:pointer; max-width:100%; }
/* # of Players beside the formation chips (Sep 16 2026): the chip-select's
   chrome, always shown, in the inactive chip's colours so it reads as a
   filter on the chips rather than as the selected one. */
.sg-form-row   { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sg-size-select { display:block; background-color: rgba(255,255,255,.10); color: var(--sg-sky-p); }
/* The formation picker is the SAME select everywhere (Sep 16 2026), beside
   the # of Players one — two dropdowns, one row — instead of a run of chips.
   It was pointer-gated for a day (a fine pointer got the select, an iPad
   kept the chips); with the phone already on the select below 600px, an
   iPad was the only surface left with chips, and the decision was one
   idiom for every device. Unconditional, on purpose: a media list naming
   fine, coarse-and-wide and narrow would mean the same and read as if some
   case still had chips. The chips markup in _sgArrangeHtml is now unused —
   filed for removal, not a style change. */
.sg-chips-presets { display:none; }
.sg-chip-select   { display:block; }
@media (max-width: 600px) {
  /* ── The live tool on a phone (Phase 3a group 4, Sep 14 2026) ──
     Tokens: 60px field / 56px bench in a 72px hit box, the pre-kickoff
     sizes. Scoped by the LIVE field (.sg-field-wide) and the bench that
     follows it; the pre-kickoff rule is scoped by .sg-setup-body, a different
     ancestor, so neither reaches the other's screen. */
  .sg-field-wide .sg-pw { width:72px; height:72px; margin:-36px 0 0 -36px; }
  .sg-field-wide .sg-circle { width:60px; height:60px; }
  .sg-field-wide .sg-n, .sg-field-wide ~ .sg-bench .sg-n { max-width:54px; }
  .sg-field-wide ~ .sg-bench .sg-onbench { width:56px; height:56px; }
  /* Bench: the 86px label stacks above the strip and the cards shrink with
     their circles, so the strip is 334px at 390 and holds FOUR 72px cards —
     three soccer subs, four lacrosse. Five or more scroll, with the cue. */
  .sg-field-wide ~ .sg-bench { flex-wrap:wrap; gap:0 14px; }
  .sg-field-wide ~ .sg-bench .sg-bench-l { width:100%; }
  .sg-field-wide ~ .sg-bench .sg-bench-scroll { padding:12px 0 14px; }
  .sg-field-wide ~ .sg-bench .sg-bc { width:72px; }
  /* Score row: two fixed 168px boxes overflowed 390 by 40px (scrollWidth 430
     with the TBDs gone — they were flex:1 and freed nothing). The boxes now
     share what the "+" leaves: 36 padding + 20 gap + 56 + 2 × 139 = 390. */
  .sg-team { width:auto; flex:1 1 0; min-width:0; }
  .sg-chips-presets { display:none; }
  /* The whole row beneath the title, not the title's spare ~145px: sized to
     its content the select clipped "Standard 3-3-3" to "Standar" at 390px. */
  .sg-head-mid      { flex-basis:100%; }
  .sg-chip-select   { display:block; width:100%; }
  .sg-size-select   { flex-basis:100%; }
}
.sg-head-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sg-cta { min-height:52px; padding:0 22px; border-radius:12px; border:0; cursor:pointer;
  background: var(--sg-gold); color: var(--sg-navy); font-weight:700; font-size:15px; }
/* In flight. The `disabled` attribute is what makes the second tap impossible;
   this is what makes the button LOOK busy rather than dead, which is the half
   that stops the coach reaching for it again. */
.sg-cta:disabled { opacity:.55; cursor:default; }
.sg-exit { width:44px; height:44px; border-radius:50%; cursor:pointer;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:16px; line-height:1; flex-shrink:0; }
.sg-exit-live { margin-left:4px; background:#fff; border:1px solid var(--sg-hair); color: var(--sg-navy); }

.sg-setup-body { flex:1; display:flex; gap:26px; padding:20px 26px; min-height:0; }

/* ── Field ────────────────────────────────────────────────────────────── */
.sg-field { position:relative; border-radius:12px; background: var(--sg-pitch);
  overflow:visible; flex-shrink:0; }
/* min-height is the fix for a real collision, and the number is derived — do not
   round it away.

   The field's height was ENTIRELY leftover flex space: align-self:stretch with no
   floor. The bench (.sg-bench, min-height:104px, flex-shrink:0) exists only in
   assign mode, so entering assign took 116px off the field in one step, and a
   shorter window took more. Slots are positioned by top:% of that height while
   .sg-pw is a fixed 84px box (72px circle), so the positions scale and the tokens
   do not. Measured: at a 640px viewport the goalkeeper and the centre-backs
   overlapped by 7px, which reads as the two rows swapping places.

   Sized against SOCCER's tightest adjacent rows. FieldGeo.topPct spans a formation
   gap as (Δy × SCALE) percent, SCALE = 0.82. soccer_standard's closest pair is
   4-2-3-1 at Δy = 24 → 19.68% of the height. At 470px that is 92.5px, clearing the
   84px token box by 8.5px and the 72px circle by 20.5px. Below ~427px they touch.

   NOT sized for lacrosse. Its presets place crease-adjacent slots Δy = 2 apart —
   a 1.64% span, about 7px — so those tokens overlap at any height a screen could
   have. That is a reference-data defect, not a CSS one, and sizing for it would
   need an absurd min-height. Tracked separately in BACKLOG.md.

   The ≤900px block already does exactly this (min-height:420px, align-self:auto),
   so pinning the height is the established shape here — it was only ever missing
   on the wide path, which is the one an iPad in landscape takes. */
.sg-field-tall { width:470px; align-self:stretch; min-height:470px; }

/* With a floor on the field, a short window overflows. Scroll it rather than let
   the field compress — neither #sg-overlay (position:fixed) nor .sg-screen sets
   overflow, so without this the overflow is simply unreachable. */
.sg-setup-body { overflow-y:auto; }

/* Arrange mode has no bench, so it reserves the height one will occupy. DO NOT
   remove this as dead weight because "there is no bench here" — that absence is
   precisely the reason it exists.

   The field is align-self:stretch, so its height is leftover flex space. The
   bench is 104px and flex-shrink:0, and it appears only in assign mode. Without
   this reservation the arrange field is 130px taller than the assign field the
   coach reaches one tap later, and every slot jumps at that moment — measured at
   834px viewport, 656px -> 526px.

   The min-height above stops the two rows COLLIDING; this stops them MOVING.
   Both were the same reported symptom ("centre D and the goalie swap"), and they
   have different causes: one is a floor, one is a mismatch between two screens.

   150px = the body's usual 20px bottom padding + the bench's 130px footprint.
   That 130 is MEASURED, not the CSS min-height: .sg-bench renders 118px tall
   (its content — .sg-bench-scroll's 16/18px padding around ~84px cards — beats
   the 104px min-height) plus a 12px bottom margin. Re-measure rather than
   recompute if the bench's contents change; an empty bench falls back to the
   104px minimum and is 14px shorter, which is the one case this reservation
   over-reserves. */
.sg-setup-nobench { padding-bottom:150px; }
/* Height comes from the flex column; aspect-ratio then caps the width so the
   pitch is not smeared across the whole row. Full-bleed put a lacrosse field at
   5.1x its true proportion on an iPad — the creases read as flat ovals. True
   proportion (0.58) is not reachable either: it would be ~230px wide, and the
   player tokens are 72px, so three across would not fit. This is the middle —
   wide enough for the tokens, close enough that the pitch reads as a pitch. */
.sg-field-wide { flex:1; margin:10px auto 0; align-self:center; min-height:0;
  width:auto; aspect-ratio:1.7; max-width:calc(100% - 28px); }
.sg-mark { position:absolute; pointer-events:none; }

/* Pitch artwork. The SVGs are landscape but play runs up the screen, so the
   art turns a quarter and stretches to the same box the player coordinates are
   measured against — width/height swap via container units, which is why
   .sg-field declares itself a size container. Without cq support the art still
   fills the box, just unrotated, which beats a mis-sized rotation. */
.sg-field { container-type: size; }
.sg-field-art { position:absolute; inset:0; width:100%; height:100%;
  border-radius:12px; overflow:hidden; pointer-events:none; user-select:none; }
.sg-field-art svg { display:block; width:100%; height:100%; }
@supports (width: 100cqh) {
  .sg-field-art { inset:auto; top:50%; left:50%; width:100cqh; height:100cqw;
    transform:translate(-50%,-50%) rotate(90deg); }
}

/* ── Slots (formation) ────────────────────────────────────────────────── */
.sg-slot-wrap { position:absolute; width:72px; height:72px; margin:-36px 0 0 -36px;
  display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
.sg-slot { width:58px; height:58px; border-radius:50%; background: var(--sg-gray);
  border:2.5px solid var(--sg-gray-d); display:flex; align-items:center; justify-content:center;
  font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:13px; color: var(--sg-slate);
  box-shadow:0 4px 12px rgba(0,0,0,.35); }
.sg-dragging { opacity:.5; cursor:grabbing; }

/* ── Right panel ──────────────────────────────────────────────────────── */
.sg-panel { width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; }
.sg-panel-h { font-size:11px; font-weight:700; letter-spacing:.14em; color: var(--sg-slate); }
.sg-panel-p { font-size:14px; line-height:1.5; color: var(--sg-slate-2); margin:0; }
.sg-legend { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px;
  background:#fff; border:1px solid var(--sg-line); font-size:14px; color: var(--sg-slate-2); }
.sg-legend-dot { width:34px; height:34px; border-radius:50%; background: var(--sg-gray);
  border:2px solid var(--sg-gray-d); flex-shrink:0; }
.sg-outline { padding:14px; border-radius:12px; background:#fff; border:1px solid var(--sg-line);
  font-weight:700; font-size:15px; color: var(--sg-slate); cursor:pointer; }
/* Flows after the panel's content. It used to be margin-top:auto, which in a
   panel stretched to the field's height (526px on an iPad, 592 on a desktop)
   pinned this line to the bottom, 336–402px below the Back button — a hole
   between related text, reported in the Sep 10 coach review. */
.sg-panel-foot { margin-top:0; font-size:13px; line-height:1.5; color: var(--sg-slate-3); }

/* ── Live: clock row ──────────────────────────────────────────────────── */
.sg-clockrow { display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:60px; padding:8px 14px; background: var(--sg-sky-p); flex-shrink:0; }
.sg-ico { width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--sg-hair);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.sg-ico:disabled { opacity:.4; cursor:default; }
.sg-burger { display:flex; flex-direction:column; gap:5px; }
.sg-burger i { display:block; width:18px; height:1.75px; background: var(--sg-navy); border-radius:1px; }
.sg-skip { display:flex; align-items:center; gap:3px; }
.sg-skip i { width:0; height:0; border-left:9px solid var(--sg-navy);
  border-top:7px solid transparent; border-bottom:7px solid transparent; }
.sg-skip b { width:1.75px; height:13px; background: var(--sg-navy); }
.sg-people { position:relative; width:22px; height:14px; }
.sg-people i, .sg-people b { position:absolute; border-radius:50%; border:1.75px solid var(--sg-navy); }
.sg-people i { width:5.5px; height:5.5px; top:3px; }
.sg-people i:first-child { left:0; } .sg-people i:nth-child(2) { right:0; }
.sg-people b { width:7px; height:7px; left:50%; top:0; transform:translateX(-50%); background:#fff; }
.sg-period { font-size:10px; font-weight:700; letter-spacing:.14em; color:#00426E; }
.sg-clock { font-family: Archivo, Inter, sans-serif; font-weight:800; font-size:34px;
  color: var(--sg-navy); cursor:pointer; min-width:96px; text-align:center;
  font-variant-numeric: tabular-nums; }
.sg-clock-edit { width:110px; border:2px solid var(--sg-sky); border-radius:8px;
  background:#fff; padding:0 6px; }
.sg-play { min-width:56px; height:44px; border-radius:10px; border:0; cursor:pointer;
  background: var(--sg-sky); color:#fff; font-size:16px; font-weight:700; }
.sg-play-wide { min-width:104px; font-size:15px; }
.sg-play-run { background: var(--sg-navy); }
.sg-play:disabled { opacity:.4; cursor:default; }

/* ── Live: score row ──────────────────────────────────────────────────── */
/* Centred (Sep 13 2026): the five dashed TBD placeholders that used to flank
   the scoreboard — two left, three right — are gone, and they were what held
   it 75–83px left of centre. The phone keeps flex-start below: its row
   already overflows, and a centred overflowing row clips both ends. */
.sg-scorerow { display:flex; align-items:stretch; justify-content:center; gap:10px; padding:10px 18px 12px;
  background: var(--sg-navy); flex-shrink:0; }
.sg-tbd { flex:1; min-height:52px; display:flex; align-items:center; justify-content:center;
  border:1.75px dashed rgba(255,255,255,.3); border-radius:10px;
  font-size:11px; font-weight:700; letter-spacing:.1em; color: var(--sg-muted); }
.sg-tbd-light { border-color: var(--sg-gray); color: var(--sg-slate-3);
  padding:14px; margin-top:8px; flex:none; }
.sg-team { width:168px; flex-shrink:0; border:0; cursor:pointer; border-radius:10px;
  background: rgba(255,255,255,.06); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:6px; gap:2px; }
.sg-team-n { font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:12px;
  color: var(--sg-sky-p); text-align:center; line-height:1.2; }
.sg-team-s { font-family: Archivo, Inter, sans-serif; font-weight:800; font-size:26px; color:#fff; }
.sg-plus { width:56px; min-height:52px; flex-shrink:0; border:0; border-radius:10px; cursor:pointer;
  background: var(--sg-sky); color:#fff; font-family: Archivo, Inter, sans-serif;
  font-weight:800; font-size:26px; }

/* ── Player icons ─────────────────────────────────────────────────────── */
.sg-pw { position:absolute; width:84px; height:84px; margin:-42px 0 0 -42px;
  display:flex; align-items:center; justify-content:center; touch-action:none; }
.sg-pw[data-sg-drag] { cursor:grab; }
.sg-pw-off { opacity:.45; }
.sg-circle { width:72px; height:72px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.sg-onfield { background: var(--sg-navy); border:2px solid rgba(255,255,255,.85); color:#fff; }
.sg-onbench { background: var(--sg-sky); border:2px solid #fff; color:#fff; width:68px; height:68px; }
.sg-empty { background: rgba(255,255,255,.16); border:2.5px dashed rgba(255,255,255,.75); }
.sg-sentoff { background:#8C959D !important; border-color:#6E7780 !important; }
.sg-pending { box-shadow:0 0 0 3px var(--sg-sky-l), 0 4px 12px rgba(0,0,0,.35); }
.sg-pending-b { box-shadow:0 0 0 3px var(--sg-navy), 0 4px 12px rgba(0,0,0,.35); }
.sg-t { font-size:10px; font-weight:600; opacity:.85; line-height:1.1;
  font-variant-numeric: tabular-nums; }
.sg-t-b { opacity:.7; }
.sg-n { font-size:12px; font-weight:700; line-height:1.2; max-width:66px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The pre-kickoff screen's tokens are smaller than the live tool's (Sep 13
   2026): 60px field / 56px bench in a 72px hit box, down from 72 / 68 / 84.
   Scoped by the setup body — the bench is its next sibling on that screen and
   nothing else's — so the live in-game icons keep their size. At 60 the
   tightest lacrosse pair (GK–CD) goes from 14px apart to 26px on an iPad. */
.sg-setup-body .sg-pw { width:72px; height:72px; margin:-36px 0 0 -36px; }
.sg-setup-body .sg-circle { width:60px; height:60px; }
.sg-setup-body .sg-n { max-width:54px; }
.sg-setup-body + .sg-bench .sg-onbench { width:56px; height:56px; }
.sg-setup-body + .sg-bench .sg-n { max-width:54px; }
.sg-chip-pos { position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:#fff; color: var(--sg-navy); font-size:10px; font-weight:700;
  letter-spacing:.04em; padding:1px 6px; border-radius:4px; white-space:nowrap; z-index:2; }
.sg-chip-dark { background: var(--sg-navy); color:#fff; }
.sg-dots { position:absolute; left:-12px; top:-12px; width:34px; height:34px; z-index:3;
  background:none; border:0; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:2px; padding:0; }
.sg-dots i { width:4px; height:4px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.6); }
.sg-dots-dark i { background: var(--sg-navy); box-shadow:none; }
.sg-card { position:absolute; right:-7px; top:-8px; width:15px; height:20px;
  border-radius:3px; z-index:2; }
.sg-card-yellow { background:#FFD400; border:1px solid #C79A00; }
.sg-card-red    { background:#D6453B; border:1px solid #9E2C24; }
.sg-cardchip { display:inline-block; width:14px; height:19px; border-radius:3px;
  margin-right:10px; vertical-align:-4px; }
.sg-in { position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  background: var(--sg-sky-p); color:#00426E; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:4px; white-space:nowrap; }
.sg-for { position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  background:#FBF2DC; border:1px solid var(--sg-gold); color:#6B4E00;
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; white-space:nowrap; }

/* ── Planned subs row ─────────────────────────────────────────────────── */
.sg-planrow { display:flex; align-items:center; gap:12px; min-height:50px;
  padding:8px 14px; flex-shrink:0; }
.sg-planlabel { width:86px; flex-shrink:0; font-size:9px; font-weight:700;
  letter-spacing:.12em; color: var(--sg-gray-d); }
.sg-planlist { flex:1; display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.sg-plan-empty { font-size:13px; color: var(--sg-slate-3); }
.sg-plan-chip { display:flex; align-items:center; gap:8px; background: var(--sg-navy);
  border-radius:8px; padding:5px 8px 5px 10px; }
.sg-plan-at { font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:14px;
  color:#fff; font-variant-numeric: tabular-nums; }
.sg-plan-txt { font-size:10px; font-weight:600; color: var(--sg-mist); }
.sg-plan-x { background:none; border:0; color: var(--sg-mist); font-size:16px;
  cursor:pointer; line-height:1; padding:0 2px; }
.sg-planbtn { flex-shrink:0; padding:11px 18px; border-radius:10px; cursor:pointer;
  background:#fff; border:2px solid var(--sg-navy); color: var(--sg-navy);
  font-weight:700; font-size:14px; }
.sg-planbtn-go { background: var(--sg-navy); color:#fff; }

/* ── Penalties ────────────────────────────────────────────────────────── */
/* One labelled clock per running penalty, own team and opponent alike. The
   player token can only carry a single badge, and an opponent penalty has no
   token at all, so both live here instead. */
.sg-penrow { display:flex; align-items:center; gap:12px; min-height:50px;
  padding:8px 14px; flex-shrink:0; }
.sg-penlist { flex:1; display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.sg-pen { display:flex; align-items:center; gap:8px; background:#FDF3DC;
  border:1.5px solid #E0B450; border-radius:8px; padding:4px 6px 4px 9px; }
.sg-pen-opp { background: var(--sg-band); border-color: var(--sg-slate-3); }
.sg-pen-clk { width:13px; height:13px; border-radius:50%; flex-shrink:0;
  border:2px solid #B8892B; position:relative; }
.sg-pen-clk::after { content:""; position:absolute; left:50%; top:2px;
  width:1.5px; height:4px; background:#B8892B; transform-origin:bottom center; }
.sg-pen-opp .sg-pen-clk { border-color: var(--sg-slate-2); }
.sg-pen-opp .sg-pen-clk::after { background: var(--sg-slate-2); }
.sg-pen-n { font-size:10px; font-weight:700; color: var(--sg-slate); white-space:nowrap; }
.sg-pen-t { font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:14px;
  color: var(--sg-navy); font-variant-numeric: tabular-nums; cursor:pointer;
  padding:0 2px; border-bottom:1px dashed rgba(0,33,71,.35); }
.sg-pen-t-unset { color: var(--sg-slate-3); }
.sg-pen-t-edit { width:56px; font-size:14px; border:1px solid var(--sg-navy);
  border-radius:4px; padding:1px 3px; }
.sg-pen-b { background: var(--sg-navy); border:0; color:#fff; font-size:10px;
  font-weight:700; border-radius:6px; padding:4px 7px; cursor:pointer; }
.sg-pen-x { background:none; border:0; color: var(--sg-slate-3); font-size:16px;
  cursor:pointer; line-height:1; padding:0 2px; }
.sg-strength { font-size:10px; font-weight:700; letter-spacing:.1em; color:#B8892B;
  font-variant-numeric: tabular-nums; white-space:nowrap; }

/* ── Bench ────────────────────────────────────────────────────────────── */
.sg-bench { position:relative; display:flex; align-items:center; gap:14px; background: var(--sg-band);
  border-radius:12px; margin:0 14px 12px; padding:8px 14px; flex-shrink:0; min-height:104px; }
.sg-bench-l { width:86px; flex-shrink:0; font-size:9px; font-weight:700;
  letter-spacing:.12em; color: var(--sg-slate-3); }
.sg-bench-l span { display:block; font-weight:400; letter-spacing:0; font-size:9px;
  margin-top:4px; color: var(--sg-gray-d); }
.sg-bench-scroll { flex:1; display:flex; gap:6px; overflow-x:auto; padding:16px 0 18px; min-width:0; }
.sg-bc { position:relative; width:88px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; touch-action:none; }
.sg-bc[data-sg-drag] { cursor:grab; }
/* More cards than the strip shows: a CHEVRON BUTTON at each end, shown only
   while there is more that way, that scrolls the strip one page per tap.
   Two things this replaces, both Sep 24 2026, both from a real game.
   The old cue was a mask that faded the CARDS towards transparent. The cards
   are near-white discs on the bench's own pale band, so it had almost nothing
   to act on — reported as "a faint ••", which is a half-hidden disc rather
   than a cue. A glyph does not depend on contrast with what is behind it.
   And the strip was barely scrollable by finger at all, because every card is
   a drag source carrying touch-action:none, so only the 6px gaps between them
   panned. touch-action STAYS none: pan-x was built and measured, and it makes
   the pan work while BREAKING the bench-to-field drag — the browser claims
   the gesture as a pan as soon as it accumulates horizontal travel, and a
   drag to any slot that is not directly overhead has exactly that. The strip
   scrolls on X and the drag needs X; no touch-action value separates them.
   So scrolling becomes an explicit control instead of a gesture. A
   direction-lock swipe is the planned follow-up (BACKLOG).
   The edge band carries the gradient and is pointer-events:NONE; only the
   34px button inside it is tappable. That split is load-bearing — the band
   overlays the last card, and a cue that swallowed a drag would break the
   substitution it sits on top of. */
.sg-bench-edge { position:absolute; top:1px; bottom:1px; width:54px; display:none;
  align-items:center; pointer-events:none; }
.sg-bench.sg-more-right .sg-bench-edge-r,
.sg-bench.sg-more-left  .sg-bench-edge-l { display:flex; }
.sg-bench-edge-r { right:1px; justify-content:flex-end; border-radius:0 12px 12px 0;
  background:linear-gradient(to right, rgba(233,237,240,0), var(--sg-band) 58%); }
.sg-bench-edge-l { left:1px; justify-content:flex-start; border-radius:12px 0 0 12px;
  background:linear-gradient(to left, rgba(233,237,240,0), var(--sg-band) 58%); }
.sg-bench-arrow { pointer-events:auto; flex:0 0 auto; width:34px; height:34px; margin:0 5px;
  display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--sg-line); border-radius:50%; background: var(--sg-paper);
  color: var(--sg-slate); font-size:20px; font-weight:700; line-height:1; cursor:pointer; }
.sg-bench-cap { width:120px; flex-shrink:0; font-size:11px; color: var(--sg-slate-3); line-height:1.4; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.sg-foot { display:flex; align-items:center; justify-content:space-between;
  height:42px; padding:0 20px; background: var(--sg-navy); flex-shrink:0; }
/* The brand slot holds the octagon mark (Sep 14 2026), not the wordmark. The
   delivered SVG strokes #002147 — the footer's own navy — so the path uses
   currentColor and takes this white. */
.sg-foot-brand { display:flex; align-items:center; color:#fff; }
.sg-foot-brand svg { display:block; }
.sg-foot-nav { display:flex; gap:8px; }
.sg-pill { padding:5px 14px; border-radius:8px; border:0; background:none; cursor:pointer;
  font-size:13px; font-weight:600; color: var(--sg-mist); }
.sg-pill-on { background: rgba(255,255,255,.16); color:#fff; }

/* ── Drag artefacts ───────────────────────────────────────────────────── */
/* The ghost lives INSIDE #sg-overlay (see _sgGhostHost), so 30 is under the
   dialog scrim's 40 and over everything on the field: a ghost that outlives
   its drag cannot cover a dialog — which is what it did over a live game on
   Sep 19. On document.body it had to be 2000 to clear the overlay at 1600,
   and that is precisely what put it above every dialog. The fly below keeps
   2000 because it stays on the body: it is created by an action that
   re-renders the overlay in the same tick, so inside it would be destroyed
   before it animates. It cannot strand — 620ms timer plus the sweep. */
.sg-ghost { position:fixed; z-index:30; pointer-events:none; opacity:.9; }
/* The write outbox's badge: persistent while anything is unsaved. Amber while
   retrying, red once parked — the one state a coach must act on. */
.sg-unsaved { padding:5px 10px; border:0; border-radius:8px; cursor:pointer; font-size:.72rem;
  font-weight:700; letter-spacing:.02em; background:#E8B84B; color:#12212F; white-space:nowrap; }
.sg-unsaved-parked { background:#B4483C; color:#fff; }
/* The stale-screen indicator shares the badge's slot and shape: nothing is
   unsaved, but the last refresh failed, so the screen may be behind its log.
   Sky rather than amber or red — it is information a tap resolves, not a
   write at risk. */
.sg-stale { background:#2E8FC4; color:#fff; }
.sg-unsaved-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.12); font-size:.85rem; }
.sg-unsaved-row-parked .sg-unsaved-state { color:#F0A8A0; }
.sg-unsaved-state { opacity:.8; font-size:.75rem; text-align:right; }
.sg-dlg-acts { display:flex; justify-content:flex-end; padding:12px 0 0; }
.sg-fly { position:fixed; z-index:2000; width:68px; height:68px; border-radius:50%;
  pointer-events:none; box-shadow:0 10px 24px rgba(0,0,0,.4);
  transition:left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1); }
/* A fly carrying a cloned circle: the clone brings its own size, colour and
   shadow, and the box is the slot's 84px so the clone sits where the icon sat. */
.sg-fly-id { width:84px; height:84px; background:none; box-shadow:none;
  display:flex; align-items:center; justify-content:center; }

/* ── Dialogs ──────────────────────────────────────────────────────────── */
.sg-scrim { position:fixed; inset:0; z-index:40; background: rgba(0,20,51,.55);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.sg-scrim-deep { background: rgba(0,20,51,.62); }
.sg-dialog { background: var(--sg-paper); border-radius:18px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.4); display:flex; flex-direction:column; max-height:88vh; }
.sg-dlg-sm { width:min(420px,94vw); } .sg-dlg-md { width:min(560px,94vw); }
.sg-dlg-wide { width:min(880px,94vw); }
.sg-dlg-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 22px; background: var(--sg-navy); flex-shrink:0; }
.sg-dlg-title { font-family: Archivo, Inter, sans-serif; font-weight:800; font-size:19px; color:#fff; }
.sg-dlg-sub { font-size:13px; color: var(--sg-mist); margin-top:3px; }
.sg-dlg-x { padding:9px 16px; border-radius:10px; border:0; cursor:pointer;
  background: rgba(255,255,255,.14); color:#fff; font-size:14px; font-weight:600; }
.sg-dlg-body { padding:22px; overflow-y:auto; }
.sg-dlg-actions { display:flex; gap:10px; }
.sg-dlg-foot { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; }
.sg-dlg-note { font-size:12px; color: var(--sg-slate-3); margin-top:12px; line-height:1.5; }
.sg-two { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.sg-col-h { font-size:11px; font-weight:700; letter-spacing:.12em;
  color: var(--sg-slate-3); margin-bottom:10px; }
.sg-dim { opacity:.45; pointer-events:none; }

.sg-akey { display:flex; align-items:center; width:100%; margin-bottom:10px; padding:16px 18px;
  border-radius:12px; background:#fff; border:2px solid var(--sg-navy); cursor:pointer;
  font-size:16px; font-weight:600; color: var(--sg-navy); text-align:left; }
.sg-akey-q { border-color: var(--sg-hair); }
.sg-akey-danger { background:#F6E7E5; border-color:#E4C3BE; color:#8E2A22; }

.sg-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sg-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sg-grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.sg-target { min-height:96px; border-radius:16px; background:#fff; border:1px solid var(--sg-line);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:10px; }
.sg-target-n { font-size:17px; font-weight:600; color: var(--sg-navy); }
.sg-target-p { font-size:12px; color: var(--sg-slate-3); }
.sg-target-none { border:2px solid var(--sg-navy); background: var(--sg-paper-w); }

.sg-cell { min-height:74px; border-radius:12px; background:#fff; border:1px solid var(--sg-line);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px; }
.sg-cell-n { font-size:15px; font-weight:700; color: var(--sg-navy); }
.sg-cell-s { font-size:12px; color: var(--sg-slate-3); }
.sg-cell-sel { background: var(--sg-navy); }
.sg-cell-sel .sg-cell-n, .sg-cell-sel .sg-cell-s { color:#fff; }
.sg-cell-used { background: var(--sg-sky-p); border:1px solid var(--sg-sky-l); cursor:default; }
.sg-cell-used .sg-cell-n, .sg-cell-used .sg-cell-s { color: var(--sg-slate-2); }
.sg-cell:disabled { cursor:default; }
.sg-scrolly { max-height:260px; overflow-y:auto; }
.sg-scrolly-tall { max-height:60vh; }

.sg-draft { margin-top:16px; border-top:1px solid var(--sg-line); padding-top:12px; }
/* ── Box score (BOX_SCORE.md) ─────────────────────────────────────────
   Two panels in the wide shell: a darker panel separates its own header row
   from the white data rows, so the header has no fill and no rule. Values
   are literal where the handoff names a colour the token set lacks. */
.sg-box-label { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--sg-navy); margin-bottom:8px; }
.sg-box-label-2 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:22px; }
.sg-box-legend { font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color: var(--sg-slate-3); }
.sg-box-panel { background:#E4DFD3; border-radius:11px; padding:8px; }
.sg-box-head { display:grid; gap:8px; padding:4px 12px 8px; font-size:11px; font-weight:700;
  letter-spacing:.08em; color: var(--sg-navy); }
.sg-box-head span:not(:first-child), .sg-box-row span:not(:first-child) { text-align:center; }
.sg-box-row { display:grid; gap:8px; align-items:center; background:#fff; border-radius:8px; }
.sg-box-row + .sg-box-row { margin-top:2px; }
.sg-box-row.sg-box-score { padding:11px 12px; }
/* Player stats: the stat grid's tracks are set inline from the variant's
   stat_definitions. ONE scroller for both axes, so the header can stick to
   the top and the player column to the left — a nested vertical scroller
   would capture the sticky column and let header and rows scroll apart. */
.sg-box-row.sg-box-stat { padding:9px 12px; }
.sg-box-scroll { overflow:auto; max-height:292px; -webkit-overflow-scrolling:touch; }
.sg-box-scroll .sg-box-head.sg-box-stat { position:sticky; top:0; z-index:2; background:#E4DFD3; }
.sg-box-stat > span:first-child { position:sticky; left:0; z-index:1; background:#fff; }
.sg-box-head.sg-box-stat > span:first-child { background:#E4DFD3; }
.sg-box-dnp.sg-box-stat > span:first-child { background:#EFECE6; }
.sg-box-team, .sg-box-player { font-size:14px; font-weight:600; color: var(--sg-navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-box-score .sg-box-num { font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:16px; color: var(--sg-slate); }
.sg-box-final { font-family: Archivo, Inter, sans-serif; font-weight:800; font-size:20px; color: var(--sg-navy); }
.sg-box-min, .sg-box-val { font-size:13px; font-weight:600; color: var(--sg-slate); font-variant-numeric: tabular-nums; }
.sg-box-stat .sg-box-num { font-family: Archivo, Inter, sans-serif; font-weight:700; font-size:15px; color: var(--sg-navy); }
.sg-box-card { font-size:13px; font-weight:700; }
.sg-box-card-y { color:#8A7000; } .sg-box-card-r { color:#8E2A22; } .sg-box-card-none { color:#C9CFD6; }
/* Did not play reads as recessed, not absent. */
.sg-box-dnp { background: rgba(255,255,255,.42); }

.sg-draftrow, .sg-goalrow { display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:#fff; border:1px solid var(--sg-line); border-radius:10px; margin-bottom:8px; }
.sg-draftrow .sg-plan-at, .sg-goalrow .sg-plan-at { color: var(--sg-navy); }
.sg-goal-who { flex:1; font-size:14px; color: var(--sg-slate); }
.sg-goal-badge { font-size:11px; font-weight:700; color: var(--sg-slate-3); }
.sg-row-gap { display:flex; gap:10px; }

.sg-btn { padding:13px 22px; border-radius:10px; border:0; cursor:pointer;
  background: var(--sg-navy); color:#fff; font-size:15px; font-weight:700; }
.sg-btn-secondary { padding:13px 22px; border-radius:10px; border:0; cursor:pointer;
  background: var(--sg-paper-w); color: var(--sg-slate); font-size:15px; font-weight:700; }
.sg-btn-quiet { padding:9px 16px; border-radius:8px; cursor:pointer;
  background: var(--sg-paper-w); border:0; color: var(--sg-slate-2); font-size:13px; font-weight:600; }
.sg-btn-danger { padding:9px 16px; border-radius:8px; cursor:pointer;
  background:#F6E7E5; border:0; color:#8E2A22; font-size:13px; font-weight:600; }
.sg-check { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px;
  background: var(--sg-paper-w); font-size:15px; font-weight:600; color: var(--sg-navy); cursor:pointer; }
.sg-check input { width:20px; height:20px; }

.sg-opt-l { font-size:11px; font-weight:700; letter-spacing:.12em; color: var(--sg-slate-3);
  margin:14px 0 8px; }
.sg-opt-l:first-child { margin-top:0; }
.sg-segrow { display:flex; gap:8px; flex-wrap:wrap; }
.sg-seg { padding:11px 18px; border-radius:10px; cursor:pointer; border:1px solid var(--sg-line);
  background: var(--sg-paper-w); color: var(--sg-slate); font-size:14px; font-weight:700; }
.sg-seg-on { background: var(--sg-navy); border-color: var(--sg-navy); color:#fff; }

.sg-rrow { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff;
  border:1px solid var(--sg-line); border-radius:10px; margin-bottom:8px; }
.sg-rpos { width:44px; flex-shrink:0; font-size:11px; font-weight:700; color: var(--sg-slate-3); }
.sg-rname { flex:1; font-size:15px; color: var(--sg-navy); font-weight:600; }
.sg-status { font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.sg-status-on    { background: var(--sg-sky-p); color:#00426E; }
.sg-status-bench { background: var(--sg-paper-w); color: var(--sg-slate-3); }
.sg-status-off   { background:#F6E7E5; color:#8E2A22; }

/* ── Games tab launcher (app surface, so app tokens apply here) ────────── */
/* The Games tab is fixed LIGHT, like the planner and the live tool (Sep 13
   2026). In dark mode --surface-card flips to #1E1E23 while the page body is
   still hardcoded white (the token block's own note: legacy backgrounds are
   migrated one screen at a time), so the launch card and every game row
   rendered as dark boxes on a white page — the coach review's "too dark on
   desktop", which was the Mac's dark mode, not the device. These are the
   light values verbatim, scoped to the tab, so iPad/iPhone in light mode are
   unchanged and a dark-mode device gets the same fix. */
#coach-games-content { --surface-card:#FFFFFF; --surface-raised:#ECECF2; --surface-hover:#EAEAEF;
  --content-strong:#111114; --content:#45454E; --content-muted:#6E6E7A;
  --edge:#E2E2E8; --edge-strong:#C6C6D0; }
/* 14px below the team selector and the selector's own 16px inset: the launch
   card used to start flush on the select's bottom border and run edge to
   edge, 16px wider than the control above it (Sep 13 2026). */
#coach-games-content { padding:14px 16px 0; }
.sg-launch { background: var(--surface-card); border:1px solid var(--edge); border-radius:12px;
  padding:18px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.sg-launch-title { font-size:1rem; font-weight:700; color: var(--content-strong); }
.sg-launch-sub { font-size:.85rem; color: var(--content-muted); }
.sg-launch-label { font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--content-muted); margin-top:4px; }
.sg-launch .prac-input { width:min(320px,100%); }
/* The games-list filter reuses .sport-toggle (three equal segments, app theme,
   .active = the orange fill). Only the count badge is new. */
.sg-list-filter   { margin-bottom:12px; }
.sg-list-filter .sport-toggle-btn { min-height:40px; font-size:0.8rem; }
.sg-list-count    { display:inline-block; min-width:18px; margin-left:4px; padding:0 5px;
                    border-radius:9px; font-size:0.68rem; font-weight:700; line-height:18px;
                    background:rgba(0,0,0,.08); color:inherit; }
.sport-toggle-btn.active .sg-list-count { background:rgba(255,255,255,.28); }

@media (max-width: 900px) {
  .sg-head { flex-wrap:wrap; gap:14px; }
  .sg-setup-body { flex-direction:column; }
  /* flex:1 0 auto, NOT flex:1. Measured Sep 24 at three viewports: stacked,
     .sg-setup-body (flex:1 of .sg-screen) left 306px of unused height at
     834x1194 — 26% of the screen — as a band between the panel and the bench,
     because the field was 0 0 auto and nothing grew. Grow fixes that. But the
     PHONE is the opposite case: at 390x844 the body already OVERFLOWS (field
     420 + panel 207 into a 452 box) and scrolls, so its gap measures -221.
     flex:1 (= 1 1 0%) would make the field shrinkable there and rebase it to
     0; grow-only with an auto basis takes the slack where there is slack and
     changes nothing where there is none. The floor still holds it at 420. */
  .sg-field-tall { width:100%; min-height:420px; align-self:auto; flex:1 0 auto; }
  .sg-panel { width:100%; }
  .sg-grid4 { grid-template-columns:repeat(2,1fr); }
  .sg-two { grid-template-columns:1fr; gap:18px; }
  .sg-bench-cap, .sg-tbd { display:none; }
}

/* Left-aligned on a PHONE only, and it must stay BELOW `.sg-scorerow`'s base
   rule. This was `justify-content:flex-start` inside the <=900 block above,
   which an iPad in portrait (834) also matches — so the row packed left with
   386px of empty space to its right, measured at 834x1194. Centring is the
   default and is what both iPad orientations now get.
   ⚠️ The phone rule cannot move up into the <=600 block near the top of this
   section: that block PRECEDES the base rule, and at equal specificity the
   later declaration wins, so the override would silently do nothing. Tried
   exactly that first and measured `center` at 390 — the old rule only worked
   because it happened to sit down here. The phone keeps flex-start because
   its row fills the width exactly (free space 0 and 0 at 390) and a centred
   flex row that outgrows its container overflows BOTH ways, putting the home
   score off the left edge where a finger cannot reach it. */
@media (max-width: 600px) {
  .sg-scorerow { justify-content:flex-start; }
}

/* Timed-penalty indicator — the lacrosse equivalent of a card chip. */
.sg-card-penalty { background:#E8B84B; border:1px solid #B8892B; }
.sg-modrow { display:flex; gap:8px; flex-wrap:wrap; }
/* The goal dialog's modifiers sit ABOVE the player grid (Sep 14 2026) — the
   thing to decide before picking the scorer, not after scrolling past it. */
.sg-dlg-body > .sg-modrow { margin-bottom:14px; }