/* ══════════════════════════════════════════════════════════════════════════════
   TOKENS + COMPONENTS - the repaint's single source (R1, Brett 2026-08-07).
   Pixel reference: ../survey-mockup-v2.html. Every repainted screen consumes THIS
   file; zero hardcoded colors/fonts/durations anywhere else (repaint-design.test.js
   enforces it). Register rule (B2): working screens are light/crisp; the dark
   cinematic register (x-dark) is reserved for flow covers, success moments, and the
   logged-out front door. Motion law (B4): transform/opacity only; 150-250ms UI,
   ~300ms checks; entrance staggers 60ms/step; nothing loops; the ONE spring belongs
   to celebration; prefers-reduced-motion collapses everything.
   Components are namespaced x- to coexist with the legacy styles.css during the
   section-by-section repaint; legacy dies screen by screen.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── Archivo, self-hosted (Brett 2026-08-25). One variable file carries weight
   100-900 AND width 62-125%, so "Expanded" is a font-stretch, not a second
   download. The system stack was the loudest AI-slop tell; this is the voice. ── */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(/fonts/archivo-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:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(/fonts/archivo-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;
}

:root{
  --navy:#0f2550; --deep:#0a1633; --gold:#c9a227;
  --ink:#101828; --body:#475467; --mute:#98a2b3;
  --bg:#f5f6f8; --card:#ffffff; --line:#e4e7ec;
  /* --alert is THE BANNER's color and nothing else's (Brett's ledger, final):
     never errors, never destructive buttons. r2-shell.test.js enforces it. */
  --alert:#c62828;
  --r-lg:16px; --r-md:12px;
  --t-fast:150ms; --t-med:220ms; --t-check:280ms;
  --ease-out:cubic-bezier(.2,.8,.3,1); --ease-spring:cubic-bezier(.34,1.4,.44,1);
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  /* width axis: display type expands, UI type stays normal */
  --wide:112; --xwide:125;

  /* ── docs/DESIGN.md layer (Brett 2026-08-25): Increase for structure and colour
     jobs, Franco Maria Ricci for how gold behaves, Equals for rules-not-gaps.
     Read that file before changing anything below. ── */
  --gold-ink:#644e08;          /* gold as TEXT, where gold itself fails contrast: 7.2:1 on the gold tint, 7.4 on paper (03 B4) */
  --press:#f1f3f6;             /* a tapped row, before the sheet rises (03 m9) */
  --line-sun:#c9cdd5;          /* a structural rule that must survive sun (22 #1): a group's edges and the rules between rows; inner facts rules stay on --line */
  --r-sm:8px;                  /* sidebar rows and icon wells; the tray at 20 is concentric maths (12 + 8) */
  --mute-ink:#5d6b82;          /* muted TEXT that must be read in daylight on a touchline (5:1 on paper). --mute (2.6:1) is for hairline-weight marks only: chevrons, dots, disabled */
  /* DESIGN.md amendment 2026-09-20 (Brett's standings reference): three new colour JOBS, each with one use */
  --gold-tint:#fbf3d6;         /* the FIRST-PLACE pill and its stat card icon. Nothing else */
  --navy-tint:#eef1f7;         /* icon wells, neutral pills, the team-block surface */
  --win:#06653d; --loss:#a81f15;   /* a result: won / lost; --loss is also the app's error text (Tournaments, Players, the coach reader's problems). Never a button, never a badge fill */
  --pin-blue:#2563eb; --pin-red:#d92d20;   /* the colour of a PINNIE, as a 9px dot. Younger division blue, older red. Nothing else */
  --cur-tint:#ffef9f;          /* Brett 2026-10-20, "highlight yellow current coaches": the row of an applicant who coaches an Extra team now, in the coach reader. Nothing else */
  --sat:env(safe-area-inset-top, 0px);   /* the iPhone status bar, when the app runs from the home screen */
  --r-pill:999px;              /* badges and status pills ONLY */
  --unit:4px;                  /* every gap is a multiple */
  --gutter:16px;               /* the page's side padding; flush blocks bleed to it */
  --gap-sec:28px;              /* section gap, mobile */
  /* the ONE elevated object per screen. Navy-tinted, every opacity <= .10, so it
     reads as ours rather than a framework default. Everything else is flat. */
  --lift:0 40px 60px rgba(15,37,80,.04), 0 18px 22px rgba(15,37,80,.05),
         0 6px 8px rgba(15,37,80,.05), 0 1px 2px rgba(15,37,80,.06);
}
@media (min-width:768px){ :root{ --gap-sec:40px; --gutter:20px; } }
@media (min-width:1024px){ :root{ --gutter:30px; } }

/* ── the native-app kit (DESIGN.md). Reads like a well-made Apple app: a large
   title, inset grouped lists with hairlines that start where the text starts,
   and display figures that use Archivo's WIDTH axis rather than just size. ─── */

/* Large title, iOS-style: heavy, tight, left-aligned, and it owns the top. */
.x-title{font-size:32px;line-height:1.06;letter-spacing:-.028em;font-weight:800;
  font-stretch:105%;color:var(--ink);margin:0}
@media (min-width:768px){ .x-title{font-size:40px;letter-spacing:-.03em} }
/* the eyebrow above a group, quiet and tracked */
.x-eyebrow{font-size:11.5px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  font-weight:650;color:var(--mute-ink);margin:0 0 8px;padding:0 4px}
/* rules divide; two stacked imply a boundary without enclosing a surface */
.x-rule{height:1px;background:var(--line);border:0;margin:var(--gap-sec) 0}
.x-rule.tight{margin:16px 0}
/* gold is a stroke, never a fill */
.x-goldrule{height:1px;background:var(--gold);border:0;margin:0 0 14px;opacity:.8}
.x-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--gold);
  display:inline-block;flex:0 0 auto}
.x-dot.done{background:var(--mute)}

/* Figures use the width axis: expanded reads athletic, like a squad number. */
.x-fig{font-weight:800;font-stretch:118%;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--navy)}
.x-fig.hero{font-size:56px;line-height:.92;letter-spacing:-.035em;font-stretch:125%}
@media (min-width:768px){ .x-fig.hero{font-size:72px} }

/* THE inset grouped list - the workhorse of a native app. Rounded container,
   rows divided by hairlines that inset to where the text begins. */
/* Groups sit FLUSH on the page - no floating rounded card, on any width
   (Brett 2026-08-25). Hairlines top and bottom, edges reaching the gutter, so
   content reads as part of the page rather than a tile dropped onto it. */
.x-group{background:var(--card);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);border-radius:0;
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
.x-index{display:flex;align-items:center;gap:12px;min-height:52px;
  padding:12px var(--gutter);position:relative;background:var(--card)}
.x-index + .x-index::before{content:'';position:absolute;left:var(--gutter);right:0;top:0;height:1px;
  background:var(--line)}
.x-index.tap{cursor:pointer;transition:background var(--t-fast) var(--ease-out)}
.x-index.tap:active{background:var(--press)}
@media (hover:hover){ .x-index.tap:hover{background:#f7f8fa} }
.x-chev{margin-left:auto;flex:0 0 auto;width:7px;height:7px;border-right:2px solid var(--mute);
  border-bottom:2px solid var(--mute);transform:rotate(-45deg)}
@media (min-width:768px){ .x-index{min-height:56px} }

/* ── base register ── */
.x{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
.x-page{background:var(--bg);min-height:100dvh}
.x-dark{background:linear-gradient(165deg,var(--deep) 0%,var(--navy) 100%);color:#fff}
.x-h1{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:700;margin:0 0 8px;color:var(--ink)}
.x-huge{font-size:34px;line-height:1.08;letter-spacing:-.03em;font-weight:750;margin:0 0 14px;color:#fff}
.x-huge em{font-style:normal;color:var(--gold)}
.x-lead{font-size:14.5px;line-height:1.55;color:var(--body);margin:0 0 18px}
.x-lead b{color:var(--ink);font-weight:600}
.x-dark .x-lead{color:#aebad4}.x-dark .x-lead b{color:#fff}
.x-kicker{font-size:13px;font-weight:600;color:var(--mute);margin:0 0 6px}
.x-kicker b{color:var(--ink);font-weight:600}
.x-dark .x-kicker{color:#8fa0c2}.x-dark .x-kicker b{color:#fff}
.x-num{font-variant-numeric:tabular-nums}

/* ── segmented progress: one segment per flow block, gold fill, eases to position ── */
.x-segs{display:flex;gap:6px}
.x-segs i{height:4px;flex:1;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.x-segs i::after{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease-out)}
.x-segs i.done::after{transform:scaleX(1)}
.x-segs i.half::after{transform:scaleX(.5)}
.x-dark .x-segs i{background:rgba(255,255,255,.14)}

/* ── selection rows: grouped card, dividers, ring fills (beat 1) then check draws (beat 2) ── */
.x-rowsel{background:var(--card);border:1.5px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.x-opt{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background var(--t-fast);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit}
.x-opt:last-child{border-bottom:0}
.x-opt:active{transform:scale(.99)}
.x-opt .t{font-size:15.5px;font-weight:600;letter-spacing:-.01em;transition:color var(--t-fast)}
.x-opt .s{font-size:12.5px;color:var(--mute);margin-top:1px}
.x-opt .x-ring{margin-left:auto}
.x-opt.on{background:#fbfcfe}
.x-opt.on .t{color:var(--navy)}
.x-opt.on .x-ring{background:var(--navy);border-color:var(--navy)}
.x-ring{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.x-ck path{stroke-dasharray:16;stroke-dashoffset:16;stroke:var(--card)}
.x-task .x-ck path{stroke:currentColor}
.x-opt.on .x-ck path,.x-blk.done .x-ck path,.x-drawn .x-ck path{stroke-dashoffset:0;transition:stroke-dashoffset var(--t-check) var(--ease-out) 120ms}

/* ── dark flow blocks (landing/covers) + the gold summary chip ── */
.x-blk{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 15px;display:flex;align-items:center;gap:12px}
.x-blk .x-ring{border-color:rgba(255,255,255,.35)}
.x-blk.done .x-ring{background:var(--gold);border-color:var(--gold)}
.x-blk .t{font-size:15.5px;font-weight:650;color:#fff;letter-spacing:-.01em}
.x-blk .s{font-size:12.5px;color:#8fa0c2;margin-top:1px}
.x-chip{margin-left:auto;font-size:12px;font-weight:600;color:var(--deep);background:#f2d98a;border-radius:999px;padding:4px 10px;white-space:nowrap;font-variant-numeric:tabular-nums;transform-origin:right center}

/* ── slot chips: day x time, fill = state (survey picker AND the WC A/B grid) ── */
.x-slotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.x-slotlabel{font-size:11.5px;color:var(--mute-ink);font-weight:600;margin:10px 0 6px;letter-spacing:.02em}
.x-slotchip{background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center;font:inherit;font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.x-slotchip:active{transform:scale(.96)}
.x-slotchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.x-slotchip.off{background:#eef0f3;color:#c2c8d0;border-color:#eef0f3;cursor:default}
.x-slotchip.amber{border-color:#d9a514;box-shadow:inset 0 0 0 1px #d9a514}
.x-slotchip.freed{border-style:dashed;color:var(--mute)}

/* ── time/slot display chip: the most readable element on the screen ── */
.x-slot{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px;text-align:center;font-size:19px;font-weight:650;color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ── the shared screen host: one comfortable column on every repainted screen ── */
.x-wrap{max-width:760px;margin:0 auto;padding:22px var(--gutter) 40px;overflow-x:clip}   /* clip, not hidden: hidden makes .x-wrap the sticky container and kills position:sticky (03 section 2.6) */
@media(min-width:1024px){.x-wrap{padding:28px var(--gutter) 48px}}
/* the shared host breaks out of the legacy 520px phone-column .screen frame */
body.x-shelled{background:var(--bg)}
body.x-shelled #screen-x.screen{max-width:none;width:100%;background:var(--bg);box-shadow:none;border:0}

/* ── text input ── */
.x-input{flex:1;min-width:0;font-family:inherit;font-size:15px;min-height:44px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.x-input::placeholder{color:var(--mute-ink);opacity:1}   /* WebKit's default sits near 2.3:1 (03 m10) */
.x-input:focus-visible{outline:2px solid var(--navy);outline-offset:1px}

/* ── the working card + interactive card states (hover lift on desktop, press dip) ── */
.x-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.x-card.tap{cursor:pointer;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
@media(hover:hover){.x-card.tap:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,.08)}}
.x-card.tap:active{transform:scale(.98)}
.x-card.tap:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.x-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;transition:background var(--t-fast)}
.x-row:first-of-type{border-top:0}
@media(hover:hover){a.x-row:hover,button.x-row:hover{background:var(--bg)}}

/* ── quiet stat tiles: number/label/trend, max 4 per row ── */
.x-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.x-tile{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.x-tile .n{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.x-tile .l{font-size:12px;color:var(--mute);font-weight:600;margin-top:2px}
.x-tile .tr{font-size:11.5px;color:var(--body);margin-top:4px}

/* ── task chips: gold = pending, quiet check = done ── */
.x-task{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;border-radius:999px;padding:7px 13px;border:1.5px solid var(--line);background:var(--card);color:var(--body)}
.x-task.pending{background:#faf3dd;border-color:#eadfb7;color:#8a6a10}
.x-task.done{color:var(--mute)}

/* ── buttons: navy primary (gold on dark), Back is a text link ── */
.x-btn{display:block;width:100%;border:0;border-radius:13px;background:var(--navy);color:#fff;font-family:inherit;font-size:16.5px;font-weight:600;padding:15px;cursor:pointer;transition:transform var(--t-fast),filter var(--t-fast)}
@media(hover:hover){.x-btn:hover{filter:brightness(1.12)}}
.x-btn:active{transform:scale(.97)}
.x-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.x-btn:disabled{opacity:.4;cursor:default}
.x-dark .x-btn{background:var(--gold);color:var(--deep)}
.x-btn-quiet{display:inline-block;width:auto;background:var(--card);color:var(--navy);border:1.5px solid var(--line);border-radius:var(--r-md);font-size:14px;font-weight:600;padding:9px 15px;cursor:pointer;font-family:inherit;transition:transform var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
@media(hover:hover){.x-btn-quiet:hover{border-color:var(--navy)}}
.x-btn-quiet:active{transform:scale(.97)}
.x-btn-quiet:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.x-back{display:block;text-align:center;font-size:14px;color:var(--mute);margin-top:14px;text-decoration:none;font-weight:500;background:none;border:0;width:100%;cursor:pointer;font-family:inherit;transition:color var(--t-fast)}
@media(hover:hover){.x-back:hover{color:var(--body)}}
.x-back:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ── the bottom sheet (give-back confirm, detail-choices verbatim): scrim fades,
   sheet slides up 220ms; closing reverses. Content = h3 + one sentence + primary
   + quiet "Keep it" link. ── */
.x-scrim{position:fixed;inset:0;background:rgba(10,22,51,.32);z-index:60;opacity:0;transition:opacity var(--t-med) var(--ease-out);display:flex;align-items:flex-end;justify-content:center;touch-action:none}
.x-scrim.show{opacity:1}
.x-sheet{background:var(--card);border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));width:100%;max-width:480px;transform:translateY(100%);transition:transform var(--t-med) var(--ease-out);touch-action:pan-y;overscroll-behavior:contain;outline:none}
/* the grabber every iOS sheet carries (03 M7): drag it down to dismiss */
.x-sheet::before{content:'';display:block;width:36px;height:5px;border-radius:var(--r-pill);background:var(--mute);margin:-8px auto 10px}
.x-scrim.show .x-sheet{transform:none}
.x-sheet h3{font-size:17px;letter-spacing:-.01em;margin:0 0 6px;font-weight:700}
.x-sheet p{font-size:14px;color:var(--body);line-height:1.5;margin:0 0 14px}
.x-sheet .quiet{display:block;text-align:center;font-size:14.5px;color:var(--mute);font-weight:500;text-decoration:none;padding:10px 6px 2px;background:none;border:0;width:100%;cursor:pointer;font-family:inherit}
.x-sheet .quiet:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ── THE BANNER: leadership's ONE announcement line, alert-red slab (ledger FINAL).
   Slides down 220ms, pulses ONCE <=600ms on mount, re-runs per page load while
   active. White bold text, white dismiss. --alert appears here and nowhere else. ── */
.x-banner{display:flex;align-items:center;gap:10px;background:var(--alert);border-radius:var(--r-md);padding:12px 16px;font-size:14px;font-weight:600;color:#fff;transform:translateY(-8px);opacity:0}
.x-banner.show{transform:none;opacity:1;transition:transform var(--t-med) var(--ease-out),opacity var(--t-med) var(--ease-out);animation:x-bannerpulse 560ms var(--ease-out) 240ms 1}
@keyframes x-bannerpulse{0%{box-shadow:0 0 0 0 rgba(198,40,40,.4)}100%{box-shadow:0 0 0 14px rgba(198,40,40,0)}}
.x-banner .x{margin-left:auto;background:none;border:0;color:#fff;font-size:16px;font-weight:700;cursor:pointer;padding:4px 8px;font-family:inherit;line-height:1;min-width:44px;min-height:44px;margin:-10px -12px -10px auto}

/* ── entrance stagger (60ms/step) ── */
.x-anim .in{opacity:0;transform:translateY(10px)}
.x-anim.play .in{opacity:1;transform:none;transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.x-anim.play .in.d1{transition-delay:60ms}.x-anim.play .in.d2{transition-delay:120ms}
.x-anim.play .in.d3{transition-delay:180ms}.x-anim.play .in.d4{transition-delay:240ms}.x-anim.play .in.d5{transition-delay:300ms}
.x-anim .x-chip{opacity:0;transform:scale(.7)}
.x-anim.play .x-chip{opacity:1;transform:scale(1);transition:opacity var(--t-med) var(--ease-spring) 420ms,transform var(--t-med) var(--ease-spring) 420ms}

/* ── the ONE success moment: check scales in (only spring), draws, ring pulses ONCE ── */
.x-bigcheck{width:76px;height:76px;border-radius:50%;background:var(--gold);margin:26px auto 18px;display:flex;align-items:center;justify-content:center}
.x-anim .x-bigcheck{opacity:0;transform:scale(.5)}
.x-anim.play .x-bigcheck{opacity:1;transform:scale(1);transition:opacity var(--t-med) var(--ease-spring),transform 320ms var(--ease-spring);box-shadow:0 0 0 10px rgba(201,162,39,.15)}
.x-anim.play .x-bigcheck.pulse{animation:x-ringpulse 700ms var(--ease-out) 300ms 1}
@keyframes x-ringpulse{0%{box-shadow:0 0 0 0 rgba(201,162,39,.35)}100%{box-shadow:0 0 0 18px rgba(201,162,39,0)}}
.x-bigcheck svg{width:36px;height:36px}
.x-bigcheck path{stroke:var(--deep)}
.x-bigcheck path{stroke-dasharray:26;stroke-dashoffset:26}
.x-anim.play .x-bigcheck path{stroke-dashoffset:0;transition:stroke-dashoffset 340ms var(--ease-out) 260ms}

/* ── done-summary chips (dark) ── */
.x-dchips{display:flex;flex-direction:column;gap:8px}
.x-dchip{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:11px 14px}
.x-dchip .k{font-size:13px;color:#8fa0c2;font-weight:600}
.x-dchip .v{font-size:13.5px;color:#fff;font-weight:650;font-variant-numeric:tabular-nums}

/* ── skeleton: every async surface shows one within 100ms ── */
.x-skel{border-radius:8px;background:linear-gradient(90deg,var(--line) 25%,#eef0f3 45%,var(--line) 65%);background-size:200% 100%;animation:x-shimmer 1.1s linear infinite}
@keyframes x-shimmer{to{background-position:-200% 0}}

/* ══ R2 SHELL - sidebar + account menu + mobile trio (program-home-mockup) ══
   The shell wraps LEGACY screen bodies until each section repaints; legacy chrome
   (deskbar/coachbar/per-screen bottom navs) is hidden while body.x-shelled. */
/* the legacy screens are direct body children, so the BODY is the shell's flex row.
   padding-left:0 overrides admin-ui/coach-desk, which reserve space for the DEAD
   legacy fixed sidebars (tokens.css loads after styles.css, so this wins). */
body.x-shelled{display:flex;min-height:100dvh;align-items:stretch;padding-left:0}
body.x-shelled .screen.active{flex:1;min-width:0;padding-bottom:76px}
.x-side{width:230px;background:var(--card);border-right:1px solid var(--line);padding:20px 14px 16px;display:none;flex-direction:column;flex:none;position:sticky;top:0;height:100dvh;overflow-y:auto}
.x-brand{display:flex;align-items:center;gap:8px;padding:0 10px;margin:0 0 24px}
.x-brand img{width:34px;height:auto}
.x-brand .wm{font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--navy);text-transform:uppercase}
.x-brand .wm em{font-style:normal;color:var(--gold)}
.x-nav a{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border-radius:var(--r-sm);font-size:14.5px;font-weight:550;color:var(--body);text-decoration:none;margin-bottom:4px;cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast),transform var(--t-fast)}
.x-nav a .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;transition:background var(--t-fast)}
.x-nav a:hover{background:rgba(15,37,80,.06);color:var(--ink)}   /* a hover you can see (20 #12) */
.x-nav a:hover .dot{background:var(--mute)}
.x-nav a:active{transform:scale(.97)}
.x-nav a.on{background:var(--navy);color:#fff;font-weight:600}
.x-nav a.on:hover{background:var(--navy);color:#fff}
.x-nav a.on .dot,.x-nav a.on:hover .dot{background:var(--gold)}
.x-nav a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.x-seas{margin-top:14px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font-size:12.5px;color:var(--mute)}
.x-seas b{display:block;color:var(--body);font-size:13px;margin-bottom:2px}
.x-acct{margin-top:auto;padding:12px 0 0;border-top:1px solid var(--line)}
.x-acctwho{padding:0 12px 8px}
.x-acct .who{font-weight:650;color:var(--ink);font-size:14.5px}
.x-acct .role{font-size:12px;color:var(--mute-ink);margin-top:1px}
.x-morewm .wm{display:block;font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--navy);text-transform:uppercase;margin-bottom:6px}
.x-morewm .wm em{font-style:normal;color:var(--gold)}
/* rows, the sidebar idiom (19 4.6): the shell's glyphs, 36px rows, Sign out under a gap */
.x-acct a{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border-radius:var(--r-sm);font-size:14.5px;font-weight:550;color:var(--body);text-decoration:none;cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast)}
.x-acct a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--navy)}
.x-acct a{margin-bottom:4px}
.x-acct a.out{margin-top:8px}
@media (pointer:coarse){ .x-nav a,.x-acct a,.xs-link{min-height:44px} }   /* an iPad in landscape (18 #13) */
.x-acct a:hover{background:rgba(15,37,80,.06);color:var(--ink)}
.x-acct a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* mobile trio - three, always; 44px+ targets */
.x-tabs{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.x-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--mute-ink);text-decoration:none;min-height:48px;cursor:pointer}
.x-tab svg{width:22px;height:22px}
.x-tab.on{color:var(--navy)}
.x-seas:empty{display:none}   /* RC/PD have Tryouts in the main nav: no empty dashed box */
.x-tabbtn{border:0;background:none;-webkit-appearance:none;appearance:none}
/* the pill sits on the safe-area line as MLS does (03 M3), 20px in from the edges with 10px end padding so
   "Home" and the last label clear the caps evenly (03 M4b); every label on one baseline (M4a); 24px glyphs (M4c) */
.x-tabs.five{left:20px;right:20px;bottom:max(10px, env(safe-area-inset-bottom));padding:0 10px;align-items:flex-end;
  background:var(--navy);border:0;border-radius:var(--r-pill);box-shadow:var(--lift);max-width:460px;margin:0 auto}
.x-tabs.five .x-tab{position:relative;justify-content:flex-end;gap:4px;color:rgba(255,255,255,.7);font-size:10px;line-height:12px;font-weight:600;letter-spacing:.01em;padding:8px 2px 8px;min-height:56px;border:0;background:none;-webkit-appearance:none;appearance:none}
.x-tabs.five .x-tab svg{width:24px;height:24px}
.x-tabs.five .x-tab.on{color:var(--card)}
/* where you are is marked in gold, the one rule the crest ring already follows (03 M5): glare eats a luminance-only change */
.x-tabs.five .x-tab.on:not(.crest)::after{content:'';position:absolute;bottom:3px;left:50%;width:16px;height:2px;margin-left:-8px;border-radius:1px;background:var(--gold)}
/* the page never shows around the pill: a scroll-edge fade under it, phone only (03 M3); under the fan (39) and the bar (40) */
@media (max-width:1023px){ body.x-shelled::after{content:'';position:fixed;left:0;right:0;bottom:0;height:calc(112px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg) 62%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 60%);mask-image:linear-gradient(to bottom,transparent,#000 60%);z-index:38;pointer-events:none} }
/* the status bar: the app declares `default`, so iOS draws its own opaque bar in the page's theme colour with dark
   glyphs, one material with the light header below it (cold judge report 13 #2). No strip of our own. */
.x-tabs.five .x-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:var(--r-pill)}
/* THE lifted object of the phone shell: the crest. The program's main job, one thumb away; a tap fans its tools out */
.x-tab.crest{margin-top:-22px;gap:3px;padding-top:0;cursor:pointer}
.x-tabs.five .x-tab.crest{padding-top:0;gap:3px}   /* wins the specificity fight with the slot rule (03 run 3 R2) */
.x-crest{width:58px;height:58px;border-radius:var(--r-pill);background:var(--card);border:3px solid var(--navy);display:grid;place-items:center;box-shadow:var(--lift);
  transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.x-crest img{width:38px;height:38px;object-fit:contain;pointer-events:none;-webkit-touch-callout:none}
.x-tab.crest.on .x-crest,.x-tab.crest[aria-expanded="true"] .x-crest{border-color:var(--gold)}
.x-tab.crest:active .x-crest{transform:scale(.94)}
/* the fan: three tryout tools above the crest (03 section 6). The scrim is bottom weighted so the clock, the title
   and the hero stay readable; each label sits in its own navy capsule so its contrast never depends on the scrim */
.x-fan{position:fixed;inset:0;z-index:39;touch-action:none}
.x-fan::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,22,51,.25) 0%,rgba(10,22,51,.82) 58%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to bottom,transparent 20%,#000 55%);mask-image:linear-gradient(to bottom,transparent 20%,#000 55%);opacity:0;transition:opacity var(--t-med) var(--ease-out)}   /* a layer that takes the thumb takes the screen (22 #2) */
.x-fan.show::before{opacity:1}
.x-fan:not(.show)::before{transition-duration:var(--t-fast)}
@media (prefers-reduced-motion:reduce){ .x-fan::before{transition:none} }
/* while the fan is open the crest's own label yields to the centre capsule: "Tryouts" once, not twice (03 N12) */
.x-tab.crest[aria-expanded="true"] > span:not(.x-crest){opacity:0;transition:opacity var(--t-fast) var(--ease-out)}   /* the LABEL only: the ring is a span too (cold judge, report 13 #1) */
.x-fanitem{outline:none;position:fixed;left:var(--x);top:var(--y);transform:translate(calc(-50% + var(--dx)),calc(-28px + var(--dy))) scale(.4);opacity:0;border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font);
  transition:transform var(--t-med) var(--ease-spring),opacity var(--t-fast) var(--ease-out);transition-delay:calc(var(--i) * 24ms)}
.x-fan.show .x-fanitem{transform:translate(-50%,-28px);opacity:1}
.x-fan:not(.show) .x-fanitem{transition-duration:var(--t-fast);transition-delay:0ms;transition-timing-function:var(--ease-out)}
.x-fandot{width:56px;height:56px;border-radius:var(--r-pill);background:var(--card);color:var(--navy);display:grid;place-items:center;box-shadow:var(--lift);transition:transform var(--t-fast) var(--ease-out)}
.x-fandot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.x-fanitem:active .x-fandot{transform:scale(.92)}
.x-fanlabel{font-size:13px;font-weight:600;color:var(--card);background:var(--navy);padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap}
.x-fanitem:focus-visible .x-fandot{outline:2px solid var(--gold);outline-offset:2px}
/* inside a tryout tool the crest gives way to the tool's glyph (MLS IMG_7094); the label stays "Tryouts" */
.x-crest.tool img{display:none}
.x-crest.tool svg{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the menu button, top right on a phone (as in MLS): the account and the sections that are not on the bar */
.x-menubtn{position:fixed;top:calc(var(--sat) + 14px);right:12px;z-index:38;width:44px;height:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);display:none;place-items:center;cursor:pointer}
.x-menubtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body.x-shelled .x-menubtn{display:grid}
@media (min-width:1024px){ body.x-shelled .x-menubtn{display:none} }
/* Ask Champ, one tap from any screen (decision 1a): the header action left of the menu button */
.x-champbtn{position:fixed;top:calc(var(--sat) + 14px);right:60px;z-index:38;min-width:44px;height:44px;padding:0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--navy);display:none;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:var(--font);font-size:17px;font-weight:600;line-height:22px;letter-spacing:-.01em}
.x-champbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.x-shelled .x-champbtn{display:flex}
@media (min-width:1024px){ body.x-shelled .x-champbtn{display:none} }
@media (prefers-reduced-motion:reduce){ .x-fanitem{transition:none} }
body.x-shelled .screen.active{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.x-sheet.x-more{padding-left:0;padding-right:0;background:var(--bg)}   /* grouped lists sit on the grouped background (13 #11) */
/* the header row is the sheet's title: the name and the role at the left, a 44px close at the right (03 M7) */
.x-morehead{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 0 8px var(--gutter)}
.x-morewho .who{font-size:17px;font-weight:600;color:var(--ink)}
.x-morewho .role{font-size:13px;font-weight:400;color:var(--body);margin-top:1px}
.x-moreclose{width:44px;height:44px;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-pill);-webkit-appearance:none;appearance:none}
.x-moreclose svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.x-moreclose:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
/* destinations as tiles, as MLS does: three in a row, four as 2x2, never more; the paper-filled .xh-tool */
.x-moretiles{display:grid;gap:8px;padding:0 var(--gutter);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.x-moretiles.four{grid-template-columns:repeat(2,1fr)}
.x-moretile{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px;min-height:88px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-family:var(--font);font-size:14px;font-weight:600;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform var(--t-fast) var(--ease-out)}
.x-moretile svg{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.x-moretile:active{transform:scale(.985)}
.x-moretile:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* the account actions: their own flush group 20px below, 52px rows, no chevron */
.x-more .x-group{margin:20px 0 0}
.x-morerow{width:100%;border:0;font:inherit;text-align:left;color:var(--ink);-webkit-appearance:none;appearance:none}
.x-morelabel{font-size:17px;font-weight:500}
.x-tab:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
@media(min-width:1024px){
  .x-side{display:flex}
  .x-tabs{display:none}
  body.x-shelled .screen.active{padding-bottom:0}
}
/* while the shell is live, every piece of legacy chrome dies at the stylesheet */
body.x-shelled #deskbar,body.x-shelled #coachbar,body.x-shelled .bottom-nav{display:none!important}
/* signed out, the shell's chrome goes with the role (engineer report 08 #2) */
body:not(.x-shelled) .x-tabs,body:not(.x-shelled) .x-side,body:not(.x-shelled) .x-menubtn,body:not(.x-shelled) .x-champbtn{display:none!important}
/* a legacy screen inside the shell wears ONE header: the shell's strip and header actions; its own brand bar and
   context bar hide, and it keeps room for the pill, at ID strength because styles.css caps these four screens
   (architect report 06 F1; Program Manager report 07 job 6) */
body.x-shelled .screen:not(#screen-x) .app-hdr,body.x-shelled .screen:not(#screen-x) .coach-ctxbar,body.x-shelled .screen:not(#screen-x) .bnav,body.x-shelled .champ-top-btn{display:none!important}   /* and the old bottom nav and the old Champ card: the pill and Playmaker are their doors now */
body.x-shelled .screen:not(#screen-x){padding-top:calc(52px + var(--sat))}
/* the header band on every screen that has no header row of its own: the two fixed actions never float on
   bare content, and content scrolls under one material (cold judge report 14 #4, 03 run 4 W1) */
@media (max-width:1023px){
  body.x-shelled:not(:has(.screen.active .xd-head))::before{content:'';position:fixed;top:0;left:0;right:0;height:calc(var(--sat) + 52px);z-index:37;pointer-events:none;background:rgba(245,246,248,.96);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  body.x-shelled #screen-x .x-wrap:not(.xd-wide){padding-top:calc(52px + var(--sat))}
  body.x-shelled #screen-x .x-wrap.xr-wrap{padding-top:0}   /* the Wall's title rides its own .xd-head, as Home (27 #4) */
  body.x-shelled #screen-x .x-wrap.xp-wrap{padding-top:0}   /* Practices too */
}
@media (max-width:1023px){ body.x-shelled #screen-coach.screen,body.x-shelled #screen-checkin.screen,body.x-shelled #screen-eval.screen,body.x-shelled #screen-division.screen{padding-bottom:calc(96px + env(safe-area-inset-bottom))} }

@media (prefers-reduced-motion: reduce){
  .x *,.x *::before,.x *::after,.x-anim .in,.x-anim .x-chip,.x-anim .x-bigcheck,.x-banner{transition:none!important;animation:none!important}
  .x-anim .in,.x-anim .x-chip,.x-anim .x-bigcheck,.x-banner{opacity:1!important;transform:none!important}
  .x-ck path,.x-bigcheck path{stroke-dashoffset:0!important}
}

/* ── Oversight (RC/PD): survey cards + the practice grid in the sheet's exact
   clothes (middleware/practiceGridSheet.js palette). Namespaced .xg-*. ───────── */
.xg-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.xg-cardtitle{font-weight:700;font-size:17px;color:var(--ink)}
.xg-list{margin-top:2px}
.xg-name{font-weight:600;color:var(--ink)}
.xg-right{text-align:right;max-width:58%}
.xg-answer{font-size:13px;color:var(--body)}
.xg-mute{color:var(--mute);font-style:italic}
.xg-links{display:flex;gap:14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

.xg-gridcard{padding:0;overflow:clip}
.xg-hero{background:var(--navy);text-align:center;padding:18px 12px 10px}
.xg-brand{font-weight:800;font-size:30px}
.xg-brand-a{color:#fff}
.xg-brand-b{color:var(--gold)}
.xg-hero-sub{color:#fff;font-weight:700;font-size:14px;padding-bottom:8px}
.xg-goldband{background:var(--gold);color:var(--navy);font-weight:700;font-size:12px;text-align:center;padding:5px 8px;text-wrap:balance}
.xg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.xg-table{border-collapse:collapse;width:100%;min-width:880px}
.xg-band th{background:var(--navy);color:#fff;font-weight:700;font-size:11px;padding:7px 6px;text-align:center;border-bottom:2px solid var(--gold)}
.xg-band-lead{color:var(--gold) !important;font-size:9px !important;width:130px}
.xg-window{background:#eef0f4;color:var(--ink);font-weight:700;font-size:13px;text-align:center;width:34px;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 4px}
.xg-rail{background:#eef0f4;color:var(--ink);font-weight:700;font-size:10px;text-align:center;width:88px;padding:6px 4px}
.xg-restroom{color:#997514;font-weight:700;font-size:8px;margin-top:2px}
.xg-cell{min-width:140px;height:56px;text-align:center;vertical-align:middle;padding:5px 6px;font-size:11px}
.xg-team{background:var(--card);border:1px solid #c7cedb;cursor:default;transition:box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out)}
.xg-team:hover{box-shadow:0 4px 14px rgba(15,37,80,.18);transform:translateY(-1px);position:relative;z-index:1}
.xg-hot{outline:2px solid var(--gold);outline-offset:-2px;background:#fdf9ee}
.xg-coach{color:var(--navy);font-weight:700;font-size:12px}
.xg-detail{color:var(--mute);font-size:9.5px;margin-top:1px}
.xg-dot{color:#b3382c;font-weight:700;font-size:9.5px;margin-top:1px}
.xg-ghost{background:#f5f6f8;color:var(--mute);font-style:italic;font-size:10.5px}
.xg-until{font-size:9px}
.xg-core,.xg-leinart{background:#f5f6f8 repeating-linear-gradient(45deg,transparent 0 7px,#e2e5ea 7px 9px)}
.xp-row.xp-core{background:var(--bg) repeating-linear-gradient(45deg,transparent 0 7px,var(--line-sun) 7px 9px);box-shadow:inset 3px 0 0 var(--mute-ink)}   /* a taken half on a phone: a stripe and an edge that survive the sun (36 M1) */
.xg-corelabel{color:var(--mute);font-weight:700;font-size:9px;background:rgba(245,246,248,.9);display:inline-block;padding:2px 6px;border-radius:4px}
.xg-empty.xg-ea{background:#f1f4f7}
.xg-empty.xg-eb{background:#eaeef3}
.xg-gap td{height:12px;background:var(--card)}
.xg-key{color:var(--mute);font-size:10.5px;text-align:center;padding:10px 14px 14px}
.xg-tool{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.xg-toolbtn{width:auto;margin-left:auto;padding:11px 22px;font-size:14.5px;text-decoration:none;white-space:nowrap}
.xg-subhead{margin-top:18px}
.xg-folds > *{margin-bottom:10px}
.xg-fold{padding:0}
.xg-fold > .xg-sum{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px;cursor:pointer;list-style:none}
.xg-fold > .xg-sum::-webkit-details-marker{display:none}
.xg-fold > .xg-sum::after{content:'';flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);transition:transform var(--t-fast) var(--ease-out)}
.xg-fold[open] > .xg-sum::after{transform:rotate(-135deg)}
.xg-foldbody{padding:0 16px 14px}

/* ── Surveys: the doors, and the gear order wearing the sheet's clothes ────── */
/* the survey grid: a tile, a title, a line of plain English, a fill meter */
.xs-doors{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.xs-door{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:18px;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out)}
.xs-door:hover{transform:translateY(-3px);border-color:var(--mute);box-shadow:0 12px 28px rgba(16,24,40,.12)}
.xs-dtop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.xs-tile{width:52px;height:52px;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:#f3f4f7;border:1px solid var(--line)}
.xs-tile img{width:100%;height:100%;object-fit:cover;display:block}
.xs-tile svg{width:24px;height:24px;color:var(--navy)}
.xs-livedot{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#8a6d10;background:#fdf6e8;border:1px solid #f0e3c6;border-radius:999px;padding:4px 9px}
.xs-dtitle{font-weight:700;font-size:16px;color:var(--ink);line-height:1.25}
.xs-dblurb{color:var(--body);font-size:13px;margin:4px 0 0;flex:1}
.xs-dfoot{display:flex;align-items:center;gap:10px;margin-top:14px}
.xs-meter{flex:1;height:5px;border-radius:3px;background:#e7e4de;overflow:hidden}
.xs-meter i{display:block;height:100%;background:var(--gold);border-radius:3px}
.xs-meter.full i{background:var(--navy)}
.xs-dcount{font-size:11.5px;color:var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.xs-dwhen{font-size:11px;color:var(--mute);margin-top:6px}
.xs-shots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:20px 12px 12px;background:var(--card);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.xs-shot{margin:0;width:92px;padding:6px 2px;border:0;background:none;font:inherit;cursor:zoom-in;
  border-radius:10px;transition:transform var(--t-med) var(--ease-spring), background var(--t-fast) var(--ease-out)}
.xs-shot img{width:100%;height:80px;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 1px rgba(16,24,40,.10));transition:filter var(--t-med) var(--ease-out)}
.xs-cap{display:block;font-size:10px;color:var(--mute);margin-top:3px}
.xs-shot:hover,.xs-shot:focus-visible{transform:scale(1.22);background:#f7f8fa;outline:none;position:relative;z-index:2}
.xs-shot:hover img,.xs-shot:focus-visible img{filter:drop-shadow(0 8px 16px rgba(16,24,40,.24))}
.xs-shot:hover .xs-cap,.xs-shot:focus-visible .xs-cap{color:var(--navy);font-weight:650}
.xs-shot:active{transform:scale(1.1)}
/* the strip needs room to pop, so this card rounds its own hero instead of clipping */
.xg-gridcard.xs-open{overflow:visible}
.xg-gridcard.xs-open .xg-hero{border-radius:var(--r-lg) var(--r-lg) 0 0}

.xs-lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:28px;
  background:rgba(10,22,51,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity var(--t-med) var(--ease-out);cursor:zoom-out}
.xs-lb.in{opacity:1}
/* the cutouts carry a faint white rim that only shows on a dark field, so the
   enlarged shot sits on a white panel exactly like the product photography */
.xs-lbbox{max-width:min(560px,88vw);text-align:center;transform:scale(.94);
  transition:transform var(--t-med) var(--ease-spring);
  background:#fff;border-radius:var(--r-lg);padding:26px 26px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.42);cursor:default}
.xs-lb.in .xs-lbbox{transform:none}
.xs-lbbox img{max-width:100%;max-height:64vh;object-fit:contain;display:block;margin:0 auto}
.xs-lbcap{color:var(--navy);font-weight:700;font-size:15px;margin-top:14px}
.xs-lbx{position:absolute;top:16px;right:18px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.xs-lbx:hover{background:rgba(255,255,255,.26)}
@media (prefers-reduced-motion:reduce){
  .xs-shot,.xs-shot:hover,.xs-lbbox{transition:none;transform:none}
}
.xs-sec{margin-top:14px}
.xs-sechead{margin-bottom:10px}
.xs-sectitle{font-weight:700;font-size:16px;color:var(--ink)}
.xs-mxlabel{margin:14px 0 6px}
.xs-table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:520px}
.xs-table th{background:var(--navy);color:#fff;font-weight:700;font-size:10.5px;padding:7px 8px;text-align:left;white-space:nowrap}
.xs-table th.r{text-align:right}
.xs-table th.c{text-align:center}
.xs-table td{padding:7px 8px;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
.xs-table td.r{text-align:right;font-variant-numeric:tabular-nums}
.xs-table td.c{text-align:center;font-variant-numeric:tabular-nums}
.xs-table tbody tr:nth-child(even) td{background:#fafbfc}
.xs-table tbody tr:hover td{background:#fdf9ee}
.xs-dim{color:var(--mute)}
.xs-none td{color:var(--mute);font-style:italic;text-align:center;background:#fdf9ee !important}
.xs-foot td{font-weight:700;background:#eef0f4 !important;border-bottom:0}
.xs-grand td{color:var(--navy)}
.xs-waiting{display:flex;flex-wrap:wrap;gap:8px}
.xs-wait{display:flex;flex-direction:column;gap:1px;padding:8px 11px;border-radius:10px;
  background:#fdf6e8;border:1px solid #f0e3c6}
.xs-wait.ok{background:#f5f6f8;border-color:var(--line)}
.xs-waitname{font-weight:650;font-size:13px;color:var(--ink)}
.xs-budget{margin-top:14px}
.xs-budget .x-row{display:flex;justify-content:space-between;gap:16px}
.xs-avg{font-weight:700;color:var(--navy);border-top:2px solid var(--navy)}
/* ── Home, built to docs/DESIGN.md. 390px first. ────────────────────────────── */
/* NO panel. A filled rounded card with a big number inside is the most
   over-produced dashboard component there is; the figure sits on the paper and
   a gold hairline does the punctuating (Franco Maria Ricci). */
.xh-live{padding:0}
.xh-livehead{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.xh-beat{flex:0 0 auto;width:26px;height:26px;display:block;margin-left:-4px}
.xh-livehead .x-eyebrow{margin:0}
.xh-liveline{display:block}   /* the figure, then its name under it, flush left (03 section 2) */
.xh-lead{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.xh-lead .x-fig.hero{color:var(--navy)}
.xh-leadof{font-size:15px;font-weight:600;color:var(--mute-ink);font-variant-numeric:tabular-nums}
.xh-what{min-width:0;flex:1;padding-bottom:0}
.xh-whatname{font-size:17px;font-weight:600;color:var(--ink);line-height:22px;margin-top:8px}
.xh-whatnote{font-size:12.5px;color:var(--body);margin-top:1px}
/* the fill is a hairline, not a chunky pill */
.xh-bar{height:2px;background:var(--line);overflow:hidden;margin:14px 0 0}
.xh-bar span{display:block;height:100%;background:var(--gold);
  transition:width var(--t-med) var(--ease-out)}
/* the two countdowns: a two-column grid so the second column never jumps when the labels change (03 section 2) */
.xh-sub{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin:20px 0 0;
  padding:16px 0 0;border-top:1px solid var(--line)}
.xh-subn{font-size:22px;line-height:24px;color:var(--navy);font-stretch:118%}
.xh-sub.xd-rsvp3{grid-template-columns:1fr 1fr 1fr}   /* the info night RSVP: Yes, Maybe, No (Brett 2026-10-23) */
.xh-sub .x-eyebrow{margin:4px 0 0;padding:0;font-size:13px;line-height:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--body)}
/* gold as a rule under a link, never a fill */
.xh-liveopen{margin-left:auto;color:var(--navy);font-size:13px;font-weight:600;
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid var(--gold);white-space:nowrap}
@media (hover:hover){ .xh-liveopen:hover{border-bottom-width:2px} }   /* never sticks after a tap on iOS (03 m8) */

/* index rows carry the schedule and the queue */
/* the section header, the light version of the MLS pattern (03 section 2.5): 20px bold sentence case, never smaller
   or paler than the rows it heads; an optional action at the right */
.xh-sechead{display:flex;align-items:baseline;gap:8px}
.xh-sechead .x-eyebrow{padding:0;margin:0 0 12px;font-size:20px;line-height:24px;font-weight:800;font-stretch:105%;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.xd-sechead-link{text-decoration:none;color:inherit;align-items:center;min-height:44px}
.xd-sechead-link .x-eyebrow{margin:0}
.xd-sechead-link .x-chev{margin-left:2px;border-color:var(--navy)}
.xh-count{font-size:13px;font-weight:700;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.xh-idxlabel{font-size:15px;color:var(--body)}
.xh-idxfig{margin-left:auto;font-size:20px;color:var(--ink)}
.xh-idxmain{min-width:0;flex:1}
.xh-idxtitle{font-size:17px;font-weight:500;color:var(--ink);line-height:1.3}   /* iOS rows are 17 regular (03 M11, N7) */
.xh-idxmeta{font-size:13px;color:var(--body);margin-top:1px}
.xh-empty{color:var(--mute-ink);font-size:14px}

@media (min-width:768px){
  .xh-liveline{gap:20px}
  .xh-subn{font-size:22px}
}
.xh-sec{margin-top:var(--gap-sec)}
.xh-trackwrap{padding:16px}

/* ── year tiles: multi-column reads fuller than one per row (Brett) ─────────── */
.xh-tiles{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){ .xh-tiles{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .xh-tiles{grid-template-columns:repeat(4,1fr)} }
.xh-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 12px 12px;min-height:78px;display:flex;flex-direction:column}
.xh-tiletop{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.xh-tilewhen{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);font-variant-numeric:tabular-nums}
.xh-tilelabel{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25}
.xh-tiledetail{font-size:11px;color:var(--body);margin-top:3px;line-height:1.3}
/* done: quiet, it already happened */
.xh-tile.past{background:transparent;border-color:var(--line)}
.xh-tile.past .xh-tilelabel{color:var(--body);font-weight:500}
/* now: the one stage the program is walking toward */
.xh-tile.now{background:var(--navy);border-color:var(--deep)}
.xh-tile.now .xh-tilewhen{color:var(--gold)}
.xh-tile.now .xh-tilelabel{color:#fff}
.xh-tile.now .xh-tiledetail{color:#9db0d0}

/* ── tool tiles: doors, multi-column so the page reads full (Brett) ─────────── */
.xh-tools{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){ .xh-tools{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .xh-tools{grid-template-columns:repeat(4,1fr)} }
.xh-tool{position:relative;display:flex;flex-direction:column;gap:2px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 13px 14px;min-height:96px;color:inherit;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out)}
@media (hover:hover){ .xh-tool:hover{transform:translateY(-2px);border-color:var(--mute);
  box-shadow:0 8px 20px rgba(15,37,80,.10)} }
.xh-tool:active{transform:scale(.985)}
.xh-toolicon{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:#eef1f7;color:var(--navy);margin-bottom:8px}
.xh-toolicon svg{width:18px;height:18px}
.xh-tool.live .xh-toolicon{background:var(--navy);color:#fff}
.xh-toollabel{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25}
.xh-toolnote{font-size:11px;color:var(--body);line-height:1.3;margin-top:1px}
.xh-toolive{position:absolute;top:12px;right:12px}
.xh-clear{margin-left:auto;flex:0 0 auto;border:1px solid var(--line);background:var(--card);
  color:var(--body);font:600 12px/1 var(--font);padding:8px 12px;border-radius:var(--r-md);cursor:pointer}
@media (hover:hover){ .xh-clear:hover{border-color:var(--mute);color:var(--ink)} }
.xh-clear:disabled{opacity:.5;cursor:default}
a.x-index{text-decoration:none;color:inherit}

/* A results page IS the document, not a stack of cards floating on one. Inside
   .xp-flush every card runs edge to edge, drops its rounding and shadow, and is
   parted from the next by a single hairline instead of a gap (Brett 2026-08-26,
   same rule he set for the practice schedule). */
.xp-flush .x-card{border-radius:0;border-left:0;border-right:0;box-shadow:none;
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
  padding-left:var(--gutter);padding-right:var(--gutter)}
.xp-flush .xg-gridcard{padding-left:0;padding-right:0}
.xp-flush .xg-hero{border-radius:0}
.xp-flush .xg-gridcard.xs-open .xg-hero{border-radius:0}
.xp-flush .xs-sec{margin-top:0;padding-top:20px;padding-bottom:22px}
.xp-flush .x-card + .x-card{border-top:0}      /* one hairline between, never two */
.xp-flush .xg-links{margin:0;padding:16px var(--gutter) 4px}

/* who has answered: three bars, people not seats */
.xs-tally{display:grid;gap:10px;margin-top:4px}
.xs-tline{display:flex;align-items:center;gap:12px}
.xs-tlabel{flex:0 0 128px;font-size:13px;color:var(--body)}
.xs-ttrack{flex:1;height:8px;border-radius:var(--r-pill);background:#e7e4de;overflow:hidden;min-width:60px}
.xs-ttrack span{display:block;height:100%;background:var(--gold);border-radius:var(--r-pill);
  transition:width var(--t-med) var(--ease-out)}
.xs-tnum{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.xs-tline.all{padding-top:10px;border-top:1px solid var(--line)}
.xs-tline.all .xs-tlabel{color:var(--ink);font-weight:700}
.xs-tline.all .xs-ttrack span{background:var(--navy)}
.xs-tnote{font-size:11.5px;color:var(--mute);margin:10px 0 0;line-height:1.45}
@media (max-width:520px){ .xs-tlabel{flex-basis:110px;font-size:12.5px} }

/* pull list, one banded table per cut (Brett 2026-08-26) */
.xs-cutlab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:16px 0 6px;padding:0 2px}
.xs-cutlab:first-of-type{margin-top:4px}
.xs-cutname{font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--navy)}
.xs-cutn{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}

/* A pull-list row is wider than a phone. Rather than pin or shrink columns, the
   item name is allowed to wrap on narrow screens: the row grows to fit its own
   content and the numbers come into view, which is the whole point of the table.
   A fade on the right edge says when there is still more to scroll
   (Brett 2026-08-26). */
.xg-scroll{position:relative}
.xg-scroll.more::after{content:'';position:absolute;top:0;right:0;bottom:0;width:30px;
  pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),var(--card))}
@media (max-width:560px){
  .xs-table{font-size:12px;min-width:0}
  .xs-table th,.xs-table td{padding:7px 6px}
  .xs-table td:first-child,.xs-table th:first-child{white-space:normal;min-width:104px;max-width:132px}
  .xs-table th{font-size:9.5px;letter-spacing:.02em}
}

/* the header row of the leadership home (03 section 2): the title and the two header actions on one centre line,
   persistent while the page scrolls under a light material, so rows never ghost under the title */
body.x-shelled #screen-x .x-wrap.xd-wide{padding-top:0}
.xd-head{position:sticky;top:0;z-index:37;display:flex;align-items:center;box-sizing:content-box;min-height:52px;
  margin:0 calc(var(--gutter) * -1) 16px;padding:var(--sat) var(--gutter) 0;
  background:rgba(245,246,248,.96);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.xd-head::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px;pointer-events:none;background:linear-gradient(var(--bg),transparent)}
.xd-head .x-title{font-size:28px;line-height:30px;font-stretch:105%}
@media (max-width:1023px){ .xd-head .x-eyebrow{display:none} }   /* the phone's own status bar carries the day */
@media (min-width:1024px){ .xd-head{position:static;display:block;min-height:0;margin:0 0 18px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .xd-head::after{display:none} .xd-head .x-title{font-size:40px;line-height:1.06} }
.x-menubtn{top:calc(var(--sat) + 4px);right:2px;color:var(--navy)}    /* glyph centre on the title line, glyph right edge on the gutter; navy beside navy Playmaker (03 run 4 W2) */
.x-champbtn{top:calc(var(--sat) + 4px);right:52px}   /* the title's centre line, 8px from the menu button */
/* the Needs you count on the Home tab and the sidebar's Home row */
.x-badge{position:absolute;top:4px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--card);color:var(--navy);font-size:13px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--navy)}
.x-nav a{position:relative}
.x-nav a .x-badge{position:static;margin-left:auto;background:var(--navy);color:var(--card)}

/* ══ LEADERSHIP HOME, TRYOUT-LEANING (2026-09-20, screens/dashboard.js). DESIGN.md holds: flush groups of
   index rows, rules not boxes, gold as a 7px dot only, one hero figure. The "bento" is the wide-screen
   GRID: tryouts on the left, the twelve teams on the right. On a phone everything stacks. ══ */
/* an installed iPhone app draws under the status bar (black-translucent): the shell has no coloured header to sit there */
body.x-shelled #screen-x .x-wrap{padding-top:calc(22px + var(--sat))}
.xd-head .x-eyebrow{padding:0;margin:0 0 6px}
.xd-head .x-title{white-space:nowrap}
/* the legacy bottom sheet parks just under the screen and its upward shadow bled a grey band across the
   bottom of every shell screen (seen on Brett's phone). Closed = no shadow, not drawn. */
body.x-shelled .tsheet:not(.open){box-shadow:none;visibility:hidden}
/* the legacy toast, inside the shell: above the tab bar, in the shell's voice */
body.x-shelled .toast{bottom:calc(100px + env(safe-area-inset-bottom));background:var(--navy);border-radius:var(--r-pill);font-family:var(--font);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 18px}
@media (min-width:1024px){ body.x-shelled .toast{bottom:28px} }
.xd-top{display:block}
@media (min-width:1024px){ .x-wrap.xd-wide{max-width:1180px} }
.xd-aside{font-weight:400;color:var(--mute-ink);margin-left:8px;font-size:13px}
.xd-lead > .xh-sec:first-child{margin-top:0}
.xd-needslot:not(:empty) + .xd-top{margin-top:var(--gap-sec)}   /* Needs you above the tryout group on the phone: the group keeps the house gap below it */
.xd-rowbtn{width:100%;border:0;font:inherit;text-align:left;color:inherit;-webkit-appearance:none;appearance:none}
.xd-rowfig{margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.xd-fig{font-size:20px}
.xd-fig.z{color:var(--mute-ink);font-weight:400;font-stretch:100%}   /* a zero that means nothing yet (03 m4) */
.xd-fignote{font-size:11px;color:var(--mute-ink);font-variant-numeric:tabular-nums}
.xd-rowfig + .x-chev{margin-left:0}
.xd-grid{width:100%;border-collapse:collapse;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;
  margin-left:calc(var(--gutter) * -1);width:calc(100% + var(--gutter) * 2)}
.xd-grid{table-layout:fixed}
.xd-grid th:first-child{width:27%}
.xd-grid th.xd-gtot,.xd-grid td.xd-gtot{width:22%}   /* "Registered" needs 72px at 390; 15% gave it 54 and cut it (Brett 2026-09-22) */
.xd-grid th,.xd-grid td{padding:10px 4px;text-align:center;vertical-align:middle}
.xd-grid tr + tr th,.xd-grid tr + tr td{border-top:1px solid var(--line)}
.xd-grid th b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.2}
.xd-grid thead th,.xd-grid tr:first-child th{font-weight:400}
.xd-gages{display:flex;justify-content:center;gap:8px;margin-top:4px;font-size:13px;color:var(--body)}
.xd-gage{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
@media (max-width:559px){ .xd-gages{flex-direction:column;align-items:center;gap:1px} }   /* two age groups do not fit side by side in a 70px column */
.xd-pin{display:inline-block;width:8px;height:8px;border-radius:var(--r-pill);flex:0 0 auto}
.xd-pin.blue{background:var(--pin-blue)}.xd-pin.red{background:var(--pin-red)}
.xd-grid .xd-gnight{text-align:left;padding-left:var(--gutter);white-space:nowrap}
.xd-gnight span{display:block;font-size:13px;font-weight:400;color:var(--body);margin-top:1px}
.xd-grid td{font-size:17px;font-weight:800;font-stretch:112%;color:var(--navy)}
.xd-grid td.z{color:var(--mute-ink);font-weight:400;font-stretch:100%}
.xd-grid .xd-gtot{padding-right:var(--gutter);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute-ink)}
.xd-grid td.xd-gtot{font-size:17px;letter-spacing:0;color:var(--ink);font-weight:800}
.xd-grid td.xd-gtot.z{color:var(--mute-ink);font-weight:400}
.xd-gkey{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--body);margin:8px 4px 0}
.xd-gkey .xd-pin + .xd-pin,.xd-gkey .xd-pin:not(:first-child){margin-left:10px}
.xd-second .x-fig.hero{font-size:34px;line-height:1;letter-spacing:-.02em}
.xd-div{width:100%;border-collapse:collapse;margin-top:14px;font-variant-numeric:tabular-nums;font-size:14px}
.xd-div th{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-ink);padding:6px 2px;text-align:center}
.xd-div tr + tr th{text-align:left;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--body)}
.xd-div td{text-align:center;padding:8px 2px;border-top:1px solid var(--line);font-weight:600;color:var(--ink)}
.xd-div td.z{color:var(--mute-ink);font-weight:400}
.xd-div td{padding:0}
.xd-divlink{display:block;min-height:44px;padding:12px 2px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:var(--r-sm)}
.xd-divlink:active{background:var(--press)}
@media (hover:hover){ .xd-divlink:hover{background:var(--press)} }
/* standings: stat cards, then a Boys block and a Girls block of team rows */
.xd-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:4px}
.xd-toolbtn{font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
/* tryout tools: icon + one word, four across even on a phone (no note line) */
.xd-stat{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;min-width:0}
.xd-staticon{flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--navy-tint);color:var(--navy)}
.xd-staticon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.xd-stattext{min-width:0}
.xd-statline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.xd-statfig{font-size:26px}
.xd-statlabel{font-size:13px;line-height:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--body)}
.xd-statnote{font-size:13px;color:var(--body);margin-top:2px}
.xd-cols{display:flex;flex-direction:column;gap:12px;margin-top:12px}
/* the team block is a flush group of rows (Brett 2026-09-21: one app on the phone and the desk; the tray was a box around boxes) */
.xd-block{background:var(--card);border-top:1px solid var(--line-sun);border-bottom:1px solid var(--line-sun);border-radius:0;padding:0;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);display:flex;flex-direction:column;gap:0}
.xd-blockhead{display:flex;align-items:center;gap:9px;padding:6px 8px 4px}
.xd-blockhead h3{margin:0;font-size:17px;font-weight:800;font-stretch:112%;letter-spacing:-.01em;color:var(--navy);text-transform:uppercase}
.xd-blockhead .x-eyebrow{margin:0 0 0 auto;padding:0}
.xd-ball{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.xd-team{position:relative;display:grid;border:0;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"j name place" "facts facts facts";gap:8px 10px;align-items:center;
  background:var(--card);border-radius:0;padding:12px var(--gutter);color:var(--ink);text-decoration:none;min-height:52px;transition:background var(--t-fast) var(--ease-out)}
.xd-team + .xd-team{border-top:1px solid var(--line-sun)}
@media (hover:hover){ a.xd-team:hover{background:var(--bg)} }   /* a row with no league page is not a link, so it does not light up */
.xd-team:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.xd-jersey{grid-area:j;width:28px;height:28px;fill:var(--navy);stroke:none}   /* one colour (Brett 2026-09-21); first place is the gold pill alone */
.xd-c{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.xd-c b{font-weight:600;font-size:15px;line-height:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xd-c i{font-style:normal;font-size:13px;line-height:16px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xd-name{grid-area:name}
.xd-name b{font-size:17px;line-height:22px}
.xd-facts{grid-area:facts;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);gap:12px;border-top:1px solid var(--line);padding-top:8px}
.xd-rec{flex-direction:row;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.xd-rec b{font-weight:400}
.xd-gd{font-size:13px;color:var(--body)}
.xd-last b{font-weight:700;font-variant-numeric:tabular-nums}
.xd-last b.w{color:var(--win)}.xd-last b.l{color:var(--loss)}
.xd-next{flex-direction:row;align-items:center;gap:8px}
.xd-next > div{min-width:0;display:flex;flex-direction:column}
.xd-next b{font-weight:400;font-size:15px}
.xd-cal{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--body);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xd-place{grid-area:place;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.xd-pill{display:inline-flex;align-items:center;gap:5px;width:74px;box-sizing:border-box;justify-content:center;padding:6px 10px;border-radius:var(--r-pill);background:var(--navy-tint);color:var(--navy);
  font-weight:800;font-stretch:112%;font-size:15px;font-variant-numeric:tabular-nums;line-height:1}
.xd-pill.gold{background:var(--gold-tint);color:var(--gold-ink)}
.xd-pillcup{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xd-of{font-size:13px;color:var(--body);font-variant-numeric:tabular-nums;min-width:32px}
@media (min-width:560px){ .xd-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:760px){
  .xd-team{grid-template-columns:32px minmax(96px,1fr) minmax(0,3.2fr) auto;grid-template-areas:"j name facts place";gap:0 14px;padding:10px var(--gutter)}
  .xd-facts{border-top:0;padding-top:0;grid-template-columns:minmax(84px,.8fr) minmax(0,1.2fr) minmax(0,1.5fr);gap:14px;align-items:center}
  .xd-facts > .xd-c{border-left:1px solid var(--line);padding-left:14px}
}
@media (min-width:1024px){
  .xd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 var(--gap-sec);align-items:start}
  .xd-top .xd-week{margin-top:0}
  .xd-top .x-group{margin-left:0;margin-right:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .xd-top .x-index{padding-left:16px;padding-right:16px}
  .xd-top .x-index + .x-index::before{left:16px}
  .xd-top .xd-grid{margin-left:0;width:100%;border:1px solid var(--line);border-radius:var(--r-lg);border-collapse:separate;border-spacing:0;overflow:hidden}
  .xd-top .xd-grid .xd-gnight{padding-left:16px}
}
/* the coach application reader (a sheet) */
.x-sheet.xd-reader{max-width:720px;max-height:92dvh;overflow:auto;padding-left:0;padding-right:0}
.xd-reader .x-group{margin-left:0;margin-right:0}
.xd-readhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 var(--gutter) 12px}
.xd-readhead h3{margin:0}
.xd-sorts{display:flex;gap:18px;padding:0 var(--gutter) 12px;border-bottom:1px solid var(--line)}
.xd-sort{border:0;background:none;font:inherit;font-size:13.5px;color:var(--body);padding:10px 0;min-height:44px;min-width:44px;cursor:pointer;border-bottom:2px solid transparent}
.xd-readhead .quiet{width:auto;min-height:44px;padding:0 8px;color:var(--navy)}
.xd-sort.on{color:var(--ink);font-weight:600;border-bottom-color:var(--gold)}
.xd-teamline{font-size:12.5px;font-weight:600;color:var(--navy);margin-top:3px}
.xd-detail{padding:4px var(--gutter) 16px;background:var(--card);border-top:1px solid var(--line)}
.xd-contact{font-size:14px;margin:12px 0 4px}
.xd-contact a{color:var(--navy);font-weight:600}
.xd-qa{padding:12px 0 0}
.xd-qa .x-eyebrow{padding:0;margin-bottom:4px}
.xd-answer{margin:0;font-size:15px;line-height:1.5;color:var(--ink);white-space:pre-line}
/* ── THE COACH READER (Brett 2026-10-20; round 2 after critics 190 and 191): by team, Boys 9U up then Girls 9U up, each
   team's head staying on screen; a current Extra coach in yellow; Yes / Maybe / No with one pressed look; 2027 coaches
   with a box a team (ticked for exactly one head coach) and the head coach and assistant buttons. Its own xcr- names:
   round 1 borrowed .xd-tick (the season chart) and .xd-team (the standings) and drew their styles. ── */
.x-sheet.xd-reader{padding-top:0}
.x-sheet.xd-reader::before{margin-top:8px}   /* the top padding moved here: a sticky bar sticks inside the padding in WebKit */
.xd-reader .xd-readhead{padding-bottom:0}
.xd-reader .xd-readhead p{margin:2px 0 6px}
.xcr-bar{position:sticky;top:0;z-index:3;background:var(--card);border-bottom:1px solid var(--line)}
.xcr-barline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gutter)}
/* the reader's own tabs, drawn as the standings' tabs are (the desk hides .xd-tabs, so the reader never borrows them, 192 #7) */
.xcr-tabs{display:flex;gap:24px;margin:0;padding:0}
.xcr-tab{position:relative;border:0;background:none;padding:12px 6px;margin:0 -6px;min-height:44px;font-family:var(--font);font-size:17px;font-weight:500;font-stretch:105%;letter-spacing:-.02em;color:var(--body);cursor:pointer;-webkit-appearance:none;appearance:none}
.xcr-tab.on{color:var(--ink);font-weight:700}
.xcr-tab.on::after{content:'';position:absolute;left:6px;right:6px;bottom:4px;height:3px;border-radius:1.5px;background:var(--gold)}
.xcr-tab:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.xcr-close{flex:none;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer}
.xcr-close:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.xcr-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px var(--gutter);background:var(--navy-tint);font-size:14px;line-height:1.35;font-weight:600;color:var(--loss)}
.xcr-retry{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-sm);background:var(--navy);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.xcr-retry:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.xcr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.xd-reader .xcr-grid,.xd-reader .xcr-boxgrid{width:calc(100% - var(--gutter) * 2);margin:6px var(--gutter) 0}
.xcr-grid tr:first-child th:first-child{text-align:left}
.xcr-cbtn{width:100%;border:0;background:none;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.xcr-cbtn:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.xd-reader .xcr-note{margin:0;padding:10px var(--gutter) 0;font-size:13px;line-height:1.45;color:var(--body)}
.xcr-sorts{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;padding:12px var(--gutter) 0}
.xcr-sortlabel{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-ink)}
.xcr-sort{min-height:44px;padding:0 2px;border:0;background:none;font:inherit;font-size:14px;color:var(--body);cursor:pointer}
.xcr-sort.on{color:var(--ink);font-weight:700}
.xcr-sort:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.xcr-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:0 var(--gutter) 4px;font-size:13px;color:var(--body)}
.xcr-key > span{display:inline-flex;align-items:center;gap:7px}
.xcr-swatch{flex:none;width:14px;height:14px;border-radius:4px;background:var(--cur-tint);box-shadow:inset 0 0 0 1px var(--line-sun)}
.xcr-check{flex:none;display:block;width:14px;height:14px}
.xcr-check path{stroke:var(--navy)}
/* a team: its head stays on screen under the bar while its applicants scroll under it (190 #3) */
.xcr-head{position:sticky;top:var(--xcr-barh, 45px);z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px var(--gutter) 8px;background:var(--card);border-bottom:1px solid var(--line);outline:none}
.xcr-head:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.xcr-headname{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.xcr-headcount{font-size:13px;color:var(--mute-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.xd-reader .xcr-apps{border-top:0}
.xcr-app{background:var(--card);padding:12px var(--gutter) 14px}
.xcr-app + .xcr-app{border-top:1px solid var(--line-sun)}
.xcr-app.cur{background:var(--cur-tint)}
.xcr-main{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;text-align:left;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;border-radius:var(--r-sm)}
.xcr-main:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.xcr-name{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.xcr-chev{flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:translateY(-2px) rotate(45deg)}
.xcr-chev.up{transform:translateY(2px) rotate(-135deg)}
.xcr-warn,.xcr-flag{display:block;margin-top:3px;font-size:13px;line-height:1.4;font-weight:700}
.xcr-warn{color:var(--loss)}
.xcr-flag{color:var(--ink)}
.xcr-meta{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--body)}
.xcr-now{display:block;margin-top:2px;font-size:13px;line-height:1.4;font-weight:600;color:var(--ink)}
.xcr-also{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;font-weight:600;color:var(--navy)}
.xcr-app.no .xcr-main{opacity:.45}
.xcr-app .xd-detail{margin:12px calc(var(--gutter) * -1) 0}
/* Yes, Maybe, No and the head coach and assistant buttons: one pressed look (190 #5) */
.xcr-picks{display:flex;max-width:330px;margin-top:10px;border:1px solid var(--line-sun);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.xcr-pick{flex:1 1 0;min-height:44px;margin:0;padding:0 6px;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.xcr-pick + .xcr-pick{border-left:1px solid var(--line-sun)}
.xcr-pick:active{background:var(--press)}
.xcr-pick:focus-visible{outline:2px solid var(--navy);outline-offset:-3px}
.xcr-pick[aria-pressed="true"]{background:var(--navy);color:#fff}
.xcr-pick:disabled{color:var(--mute);cursor:default}
.xd-reader .xcr-who{margin:6px 0 0;font-size:12.5px;line-height:1.3;color:var(--mute-ink)}
/* one list: an application's teams, each opening its group at the row (190 #9) */
.xcr-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.xcr-link{display:inline-flex;align-items:center;gap:10px}   /* a team that goes there, with the push chevron (192 #6) */
.xcr-link,.xcr-clear{flex:none;min-height:44px;padding:0 12px;border:1px solid var(--line-sun);border-radius:var(--r-sm);background:var(--card);font:inherit;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer}
.xcr-link:focus-visible,.xcr-clear:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.xcr-decline{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:4px;font-size:15px;line-height:1.4;color:var(--ink)}
/* 2027 coaches */
.xd-reader .xcr-cover{margin:0;padding:16px var(--gutter) 2px;font-size:15px;font-weight:600;color:var(--ink)}
.xd-reader .xcr-boxgrid{margin-bottom:14px}
.xcr-boxbtn{display:grid;place-items:center;width:100%;min-height:44px;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.xcr-boxbtn:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.xcr-box{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--line-sun);border-radius:6px;background:var(--card)}
.xcr-box.on{background:var(--navy);border-color:var(--navy)}
.xcr-box .xcr-check path{stroke:#fff}
.xcr-coaches{border-top:1px solid var(--line-sun)}
.xcr-coachrow{padding:0 var(--gutter) 12px;border-bottom:1px solid var(--line-sun)}
.xcr-coachhead{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:8px 0;border:0;background:none;font:inherit;text-align:left;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.xcr-coachhead:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--r-sm)}
.xcr-coachteam{flex:1;font-size:17px;font-weight:600;color:var(--ink)}
.xcr-coach{padding:4px 0 6px 38px}
.xcr-coachname{font-size:15px;line-height:1.35;font-weight:600;color:var(--ink)}
.xcr-coach .xcr-picks{max-width:300px;margin-top:6px}
.xd-reader .xcr-coachwho{margin:4px 0 0;font-size:12.5px;line-height:1.3;color:var(--mute-ink)}
.xd-reader .xcr-none{margin:0 0 0 38px;font-size:14px;color:var(--mute-ink)}
.xd-reader .xcr-warnline{margin:6px 0 0 38px;font-size:13.5px;line-height:1.4;font-weight:700;color:var(--loss)}
.xd-reader .xcr-noteline{margin:6px 0 0 38px;font-size:13.5px;line-height:1.4;color:var(--body)}   /* also a Yes elsewhere, nothing to decide (193 #3) */
.xcr-copy{display:block;min-height:44px;margin:18px var(--gutter) 6px;padding:0 16px;border:1px solid var(--line-sun);border-radius:var(--r-sm);background:var(--card);font:inherit;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer}
.xcr-copy:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* step 5 (2026-09-21): a tapped team row answers before the browser sheet rises (03 m9) */
.xd-team:active{background:var(--press)}
/* a row that leaves the app wears the up-right arrow, not the push chevron (03 m7) */
.x-ext{margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-top:2px solid var(--mute-ink);border-right:2px solid var(--mute-ink);position:relative}
.x-ext::after{content:'';position:absolute;top:-1px;right:-1px;width:13px;height:2px;background:var(--mute-ink);transform-origin:100% 50%;transform:rotate(-45deg)}
/* the banner control as a flush group; 44px controls (03 B6) */
.xd-bannerctl{display:flex;gap:10px;align-items:center;padding:10px var(--gutter)}
.xd-set{width:auto;min-height:44px;padding:0 16px;font-size:15px;border-radius:var(--r-md)}
.xd-clear{min-height:44px}
.xh-clear{min-height:44px}
.xh-liveopen{min-height:44px;display:inline-flex;align-items:center}
/* standings: Boys and Girls as underlined text tabs over one block (03 section 2.5, M10; Brett yes 2026-09-21).
   On: ink plus a 2px gold underline as wide as the word; off: body, never mute-ink (a tab name is must-read). */
.xd-tabs{display:flex;gap:24px;margin-top:8px;padding:0 var(--gutter) 0 0}
.xd-tab{position:relative;border:0;background:none;padding:12px 6px;margin:0 -6px;min-height:44px;font-family:var(--font);font-size:17px;font-weight:500;font-stretch:105%;letter-spacing:-.02em;color:var(--body);cursor:pointer;-webkit-appearance:none;appearance:none}
.xd-tab.on{color:var(--ink);font-weight:700}
.xd-tab.on::after{content:'';position:absolute;left:6px;right:6px;bottom:4px;height:3px;border-radius:1.5px;background:var(--gold)}
.xd-tab:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.xd-cols{margin-top:4px}
.xd-block[hidden]{display:none}
/* fix round after critic run 2 (2026-09-21) */
/* the standings stats as the countdown grid's own pattern on a phone: figure over name, no box, no icon, sentence
   case (03 N1); the first team row then clears the fade. Desktop keeps its cards until step 8. */
@media (max-width:1023px){
  .xd-stats{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:0}
  .xd-stat{display:block;background:none;border:0;border-radius:0;padding:0}
  .xd-staticon{display:none}
  .xd-statline{flex-direction:column;align-items:flex-start;gap:4px}
  .xd-statfig{font-size:22px;line-height:24px;font-stretch:118%}
  .xd-statlabel{font-size:13px;line-height:16px;font-weight:600;letter-spacing:0;text-transform:none}
  .xd-statnote{margin-top:0}
  .xd-tabs{margin-top:12px}
}
/* the word that tells opponents apart is the one that was cut (03 m3) */
@media (max-width:559px){ .xd-cal{width:16px;height:16px} .xd-facts{gap:4px;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)} .xd-c i{letter-spacing:-.01em} .xd-last i,.xd-next i{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} }   /* the whole opponent name, no new words (03 run 4 R3) */
/* the banner field and its button share one radius (03 N11) */
.xd-bannerctl .x-input{border-radius:var(--r-md)}
/* the hero's counts from the phone's last good copy: when they were true */
.xh-asof{color:var(--body)}
/* the More tiles sit on the grouped background; the tile is the card (13 #11) */
.x-moretile{border:1px solid var(--line)}
/* the band's title on a screen with no title of its own (the legacy tool screens): the section's own word (16 #1) */
.x-bandtitle{position:fixed;top:calc(var(--sat) + 4px);left:var(--gutter);z-index:38;height:44px;display:none;align-items:center;font-family:var(--font);font-size:28px;line-height:30px;font-weight:800;font-stretch:105%;letter-spacing:-.028em;color:var(--ink);pointer-events:none}
@media (max-width:1023px){ body.x-shelled:has(.screen.active:not(#screen-x)) .x-bandtitle{display:flex} }
/* ══ STEP 8, THE DESK (2026-09-21): the sidebar mirrors the bar, icons not dots; Boys beside Girls under their own
   heads where both fit; the stat cards capped (03 M14); the season chart by weekend, animated on entry. ══ */
.x-nav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--navy)}
.x-nav a.on svg{color:#fff}
.x-nav a.on .x-badge{background:var(--card);color:var(--navy);box-shadow:none}
.xd-blockhead{display:none}
.xd-chart{display:none}
@media (min-width:1024px){
  .xd-stats{grid-template-columns:repeat(3,minmax(0,300px))}
  .xd-tabs{display:none}
  .xd-block[hidden]{display:flex}
  .xd-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
  /* two blocks side by side: each team keeps the stacked card (name row, facts row); the one-line row needs the full width */
  .xd-cols .xd-team{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"j name place" "facts facts facts";gap:8px 10px;padding:12px}
  .xd-cols .xd-facts{border-top:1px solid var(--line);padding-top:8px;grid-template-columns:112px minmax(0,1fr) minmax(0,1.25fr);gap:12px;align-items:start}   /* a fixed record column: the inner rules line up row to row (20 #5) */
  .xd-blockhead{display:flex;align-items:center;padding:6px 8px 4px}
  .xd-blockhead h3{margin:0;font-size:17px;font-weight:800;font-stretch:105%;letter-spacing:-.01em;color:var(--navy);text-transform:none}
  .xd-blockhead{padding-left:13px}
  .xd-chart{display:block;margin-top:var(--gap-sec)}
}
.xd-trends{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.xd-trend{min-width:0;max-width:640px}   /* one panel today fills to a readable width; two share the row */
.xd-trendlab{font-size:13px;font-weight:600;color:var(--body);margin:0 0 4px}
.xd-trend svg{display:block;font-family:var(--font);max-width:100%;height:auto}
.xd-line{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 600ms var(--ease-out)}   /* draws in 600ms, no delay (24 #6) */
.xd-chart.play .xd-line{stroke-dashoffset:0}
.xd-dot{fill:var(--card);stroke:var(--navy);stroke-width:2;opacity:0;transition:opacity var(--t-fast) var(--ease-out) 600ms}
.xd-dot.last{fill:var(--gold);stroke:var(--navy)}
.xd-chart.play .xd-dot{opacity:1}
.xd-val{font-size:13px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round;opacity:0;transition:opacity var(--t-fast) var(--ease-out) 650ms}   /* a paper halo: a value never fights the gridline (24 #1, 25 #3) */
.xd-val.last{fill:var(--navy)}
.xd-chart.play .xd-val{opacity:1}
.xd-gridline{stroke:var(--line);stroke-width:1}
.xd-tick{font-size:11px;font-weight:600;fill:var(--mute-ink);font-variant-numeric:tabular-nums}
.xd-deskonly{display:none}
@media (min-width:1024px){ .xd-deskonly{display:flex} }
.xd-day{font-size:12px;font-weight:600;fill:var(--body)}
@media (prefers-reduced-motion:reduce){ .xd-line{stroke-dashoffset:0;transition:none} .xd-dot,.xd-val{opacity:1;transition:none} }
/* ══ THE DESK, ROUND 2 (2026-09-21, reports 18 and 19) ══ */
@media (min-width:1024px){
  body.x-shelled #screen-x .x-wrap.xd-wide{padding-top:20px}   /* the date clears the window's edge; the title's centre stays on the crest's (19 4.1) */
  .x-side{padding-top:40px}
  /* one group treatment on the wide home: every flush group sits inset within the gutters, like the trays (19 4.3, 18 #2) */
  .xd-wide .x-group{margin-left:0;margin-right:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .xd-wide .x-index{padding-left:16px;padding-right:16px}
  .xd-wide .x-index + .x-index::before{left:16px}
  .xd-wide .xd-bannerctl{padding:10px 16px}
  .xd-top .xh-sub{margin-right:0;padding-right:0}   /* the countdown rule ends at its column (19 4.8) */
  .xd-cols .xd-facts{align-items:stretch}
  .xd-cols .xd-facts > .xd-c:first-child{border-left:0;padding-left:0}   /* no divider that divides nothing (19 4.10) */
}
@media (min-width:1024px) and (max-width:1199px){
  .xd-gages{flex-direction:column;align-items:center;gap:1px}   /* the pinnie pairs stack in a narrow week column (19 4.5) */
  .xd-cols .xd-last i,.xd-cols .xd-next i{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
/* ══ THE DESK AS TWO SHEETS (Brett 2026-09-21, option A; reference lock in the handoff). One card family: a bordered
   sheet per topic, rules divide the cells, no gaps, no tray, no cards inside cards. Desk only. ══ */
@media (min-width:1024px){
  .xs-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .xs-cells{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr) auto}   /* the hero over the doors, the week beside both: no cell half empty (20 #1, 21 #2) */
  .xs-cell:nth-child(2){grid-column:2;grid-row:1/3}
  .xs-cell:nth-child(3){grid-column:1;grid-row:2;border-left:0;border-top:1px solid var(--line)}
  .xs-cells > .xs-foot{grid-row:3}   /* the desk home's foot only: the gear tables' total rows are tr.xs-foot (56 #2) */
  .xs-cell{padding:20px;min-width:0}
  .xs-cell + .xs-cell{border-left:1px solid var(--line)}
  /* a section inside a cell becomes a cell: its 20px head steps down to a 13px cell title (the GlossGenius anatomy) */
  .xs-cell .xh-sec{margin:0}
  .xs-cell .xh-sechead{margin:0 0 8px}
  .xs-cell .xh-sechead .x-eyebrow{margin:0;font-size:13px;line-height:16px;font-weight:600;font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--body)}
  .xs-cell .xh-sechead .xh-count{display:none}   /* the sheet's head carries the dates */
  .xs-cell .x-group,.xd-wide .xs-cell .x-group{margin:0;border:0;border-radius:0;background:none}
  .xs-cell .x-index,.xd-wide .xs-cell .x-index{padding-left:0;padding-right:0;background:none}
  .xs-cell .x-index + .x-index::before,.xd-wide .xs-cell .x-index + .x-index::before{left:0}
  .xs-cell .xd-grid,.xd-top .xs-cell .xd-grid{margin:0;width:100%;border:0;border-radius:0}
  .xs-cell .xd-grid .xd-gnight{padding-left:0}
  .xs-cell .xd-grid .xd-gtot{padding-right:0}
  .xs-cell .xd-gkey{padding:8px 0 0}
  .xs-cell .xd-gages{flex-direction:column;align-items:center;gap:1px}   /* the pinnie pairs stack: a cell is a narrow column */
  .xs-cell .xh-sub{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line)}
  .xs-cell .x-fig.hero{font-size:56px}
  .xs-cell .xh-subn{font-size:20px}   /* five figure sizes on the page, not six (20 #8) */
  .xs-cells > .xs-foot{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line)}
  .xs-link{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;border:0;border-radius:var(--r-sm);background:none;font:inherit;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;cursor:pointer}
  .xs-link svg{width:18px;height:18px;stroke-width:1.8}
  @media (hover:hover){ .xs-link:hover{background:rgba(15,37,80,.06)} }
  .xs-link:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
  /* the season strip: four cells, the chart the wide one */
  .xs-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}   /* three stat cells at their own height, the chart a band beneath (20 #2, 21 4.3) */
  .xs-strip.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xs-strip > .xd-chart{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .xs-strip > *{padding:20px;min-width:0}
  .xs-strip > * + *,.xs-strip > .xd-stat + .xd-stat{border-left:1px solid var(--line)}   /* the stat rule outranked the child rule (21 #1) */
  .xs-strip .xd-stat{display:block;background:none;border:0;border-radius:0}
  .xs-strip .xd-staticon{display:none}
  .xs-strip .xd-statline{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px}   /* title, then the figure, then the note */
  .xs-strip .xd-statfig{font-size:36px;line-height:38px}
  .xs-strip .xd-statlabel{color:var(--body)}
  .xs-strip .xd-statnote{margin-top:4px}
  .xs-strip .xd-chart{display:block;margin:0}
  .xs-strip .xd-trendlab{display:block;margin:0 0 8px;font-size:13px;line-height:16px;font-weight:600;color:var(--body)}   /* the panel's label is the cell title: Win rate (Brett 2026-09-21) */
  .xs-strip .xd-trends{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0}
  .xs-strip .xd-trend{max-width:none}   /* a lone panel fills the band (24 #2, 25 #2) */
  .xs-strip .xd-trend + .xd-trend{border-left:1px solid var(--line);padding-left:20px}   /* a rule, not a gap, between two panels (25 #6) */
  .xs-strip .xd-deskonly{display:block}
  /* Boys beside Girls as rows: no tray, no card edges, a rule between rows, the gold edge for first place */
  /* one grid for both halves: a Boys row and its Girls neighbour share a height at every width (20 #6, 21 #6) */
  .xs-halves.xd-cols{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--rows,7),auto);grid-auto-flow:column;gap:0;margin:0}
  .xs-halves .xd-block{display:contents}
  .xs-halves .xd-block:first-child > *{grid-column:1}
  .xs-halves .xd-block + .xd-block > *{grid-column:2;border-left:1px solid var(--line)}
  .xs-halves .xd-blockhead{padding:20px 20px 8px}
  .xs-halves .xd-blockhead h3{font-size:13px;line-height:16px;font-weight:600;font-stretch:100%;letter-spacing:0;color:var(--body)}   /* the cell register, not a third title level (20 #7, 21 #4) */
  .xs-halves .xd-team,.xs-halves.xd-cols .xd-team{border:0;border-radius:0;border-top:1px solid var(--line);padding:12px 20px;box-shadow:none}
  .xs-halves .xd-block + .xd-block > .xd-team{border-left:1px solid var(--line)}   /* the divider on every Girls row: the row rule reset it (25 #1) */
  .xs-halves .xd-team{align-content:start}   /* a paired row's content sits at its top (24 #3, 25 #4) */
  .xs-halves a.xd-team:hover{box-shadow:none;background:rgba(15,37,80,.06)}
  @media (hover:hover) and (pointer:fine){ .xs-halves .x-ext{opacity:0;transition:opacity var(--t-fast) var(--ease-out)} .xs-halves .xd-team:hover .x-ext,.xs-halves .xd-team:focus-visible .x-ext{opacity:1} }   /* twelve arrows become one, on hover (24 #5) */
  .xs-halves .xd-team:focus-visible{outline-offset:-2px}   /* the ring inside the sheet's clip (21 #9) */
  .xd-wide .xd-bannerctl .x-input,.xd-wide .xd-set{border-radius:var(--r-sm)}   /* concentric inside the 16px group (20 #11) */
  .x-nav a:active{transform:none}   /* no press-dip on a Mac sidebar (20 N3) */
}
@media (min-width:1024px) and (max-width:1199px){
  /* a narrow half: the record column tighter, no calendar glyph, so "Sat 12:45 PM" never truncates */
  .xd-cols .xd-facts{grid-template-columns:104px minmax(0,1fr) minmax(0,1.1fr);gap:8px}
  .xd-cols .xd-cal{display:none}
}
/* ══ ASK PLAYMAKER (Brett 2026-09-21): the chat in the app's own register. A full-height sheet on a phone, a 560px
   panel on a desk; Archivo; navy for the person, paper for Playmaker; the mark is /playmaker.svg. ══ */
#modal-champ{align-items:flex-end;padding:0;background:rgba(10,22,51,.55)}
#modal-champ .modal.champ-modal{font-family:var(--font);max-width:none;width:100%;height:92dvh;max-height:92dvh;margin:0;padding:0 var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--bg);box-shadow:var(--lift);color:var(--ink)}
#modal-champ .champ-hdr{padding:14px 0 12px;border-bottom:1px solid var(--line);margin:0}
#modal-champ .champ-hdr::before{content:'';position:absolute;left:50%;top:8px;width:36px;height:5px;border-radius:3px;background:var(--mute);transform:translateX(-50%)}
#modal-champ .modal.champ-modal{position:relative}
#modal-champ .champ-hdr-left{gap:12px;padding-top:6px}
#modal-champ img.champ-avatar{display:block;height:40px;width:40px;filter:none}
#modal-champ .champ-title{font-family:var(--font);font-size:17px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
#modal-champ .champ-scope-line{font-size:13px;letter-spacing:0;color:var(--body);margin-top:1px}
#modal-champ .champ-email-btn{background:none;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--navy);font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:0;padding:0 12px;min-height:36px}
#modal-champ .champ-close{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--body);font-size:20px}
#modal-champ .champ-close:hover{background:var(--navy-tint);border:0;color:var(--ink)}
#modal-champ .champ-chat{min-height:0;padding:16px 0;gap:12px}
#modal-champ .champ-msg{gap:8px}
#modal-champ .champ-avatar img{height:28px;width:28px}
#modal-champ .champ-avatar{height:28px}
#modal-champ .champ-bubble{font-size:15px;line-height:1.45;padding:10px 14px;border-radius:18px}
#modal-champ .champ-bubble-user{background:var(--navy);color:#fff;border-bottom-right-radius:6px}
#modal-champ .champ-bubble-ai{background:var(--card);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:6px}
#modal-champ .champ-bubble-ai .cm-h,#modal-champ .champ-bubble-ai strong{font-family:var(--font);color:var(--navy);letter-spacing:0}
#modal-champ .champ-sq-row{display:flex;flex-wrap:wrap;gap:8px}
#modal-champ .champ-sq-pill,#modal-champ .champ-qp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--navy);font-family:var(--font);font-size:13px;font-weight:600;padding:0 12px;min-height:36px;white-space:nowrap;cursor:pointer}
#modal-champ .champ-sq-pill:hover,#modal-champ .champ-qp:hover{background:var(--navy-tint);border-color:var(--line)}
#modal-champ .champ-typing-dots{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}
#modal-champ .champ-bottom{border-top:1px solid var(--line);padding-top:10px;margin-top:0}
#modal-champ .champ-quick-row{gap:8px;padding-bottom:10px;margin-bottom:0}
#modal-champ .champ-input-row{gap:8px;align-items:flex-end}
#modal-champ .champ-input{font-family:var(--font);font-size:16px;line-height:22px;min-height:44px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);resize:none}
#modal-champ .champ-input:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(15,37,80,.12)}
#modal-champ .champ-send{width:auto;min-width:0;height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--navy);color:#fff;font-family:var(--font);font-size:15px;font-weight:600}
@media (min-width:1024px){
  /* the old desk frame (body.admin-ui) made this a full-height right panel with no X; under the sidebar shell it is a
     modal again (architect report 26: a modal or a side panel, never a page), so the X, the backdrop and Escape close it */
  body.admin-ui #modal-champ,#modal-champ{position:fixed;inset:0;align-items:center;justify-content:center;padding:24px;background:rgba(10,22,51,.55)}
  body.admin-ui #modal-champ > .modal.champ-modal,#modal-champ .modal.champ-modal{width:560px;max-width:560px;height:min(720px,88vh);max-height:88vh;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift);padding:0 20px 16px}
  body.admin-ui #modal-champ .champ-close{display:flex}
  #modal-champ .champ-hdr::before{display:none}
  #modal-champ .champ-hdr-left{padding-top:2px}
}
#modal-champ .champ-send{text-transform:none;letter-spacing:0}
#modal-champ .champ-copy-btn{font-family:var(--font);font-size:12px;font-weight:600;color:var(--body);background:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;min-height:28px;cursor:pointer}
/* ══ THE NOTIFICATION LEDGER (Brett 2026-09-21, option 1; refs Coinbase, Sunlitt, Fernand) ══ */
.xn-sub{margin:8px 0 16px;font-size:15px;line-height:20px;color:var(--body)}
.xn-sec{margin-top:var(--gap-sec)}
.xn-item + .xn-item{position:relative}
.xn-item + .xn-item::before{content:'';position:absolute;left:var(--gutter);right:0;top:0;height:1px;background:var(--line)}
.xn-row{width:100%;text-align:left;border:0;font:inherit;color:inherit;cursor:pointer;background:var(--card)}
.xn-row[aria-expanded="true"]{background:var(--bg)}
.xn-row .xh-idxtitle{font-weight:600}
.xn-meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:18px}
.xn-lock{flex:none;width:24px;height:24px;color:var(--mute-ink);display:grid;place-items:center}
.xn-lock svg{width:20px;height:20px}
/* the iOS switch: 51x31, the knob rides 20px */
.x-switch{position:relative;flex:none;width:51px;height:31px;border:0;padding:0;border-radius:var(--r-pill);background:var(--mute);cursor:pointer;transition:background var(--t-fast) var(--ease-out)}
.x-switch .x-knob{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--card);box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform var(--t-fast) var(--ease-out)}
.x-switch.on{background:var(--navy)}
.x-switch.on .x-knob{transform:translateX(20px)}
.x-switch:disabled{opacity:.45;cursor:default}
.x-switch:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* the message as it lands */
.xn-preview{padding:4px var(--gutter) 16px;background:var(--bg)}
.xn-when{font-size:14px;line-height:19px;color:var(--body);margin:0 2px 10px}
.xn-banner{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--lift)}
.xn-appicon{width:36px;height:36px;border-radius:9px;flex:none;object-fit:cover;background:var(--navy)}
.xn-bantext{min-width:0;flex:1}
.xn-banhead{display:flex;align-items:baseline;gap:8px}
.xn-app{font-size:13px;font-weight:600;color:var(--ink)}
.xn-time{margin-left:auto;font-size:12px;color:var(--mute-ink)}
.xn-bantitle{font-size:15px;font-weight:600;color:var(--ink);line-height:20px;margin-top:1px}
.xn-banbody{font-size:15px;color:var(--ink);line-height:20px}
.xn-mail{padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.xn-mailhead{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--body)}
.xn-from{font-weight:600;color:var(--ink)}
.xn-to{margin-left:auto;color:var(--mute-ink)}
.xn-subject{font-size:15px;font-weight:600;color:var(--ink);line-height:20px;margin-top:4px}
.xn-line{font-size:14px;color:var(--body);line-height:19px;margin-top:2px}
.xn-sent{font-size:13px;color:var(--mute-ink);margin-top:8px;padding:0 2px}
.xn-foot{margin-top:var(--gap-sec)}
.xn-week{margin:0 0 12px;padding:0 4px;font-size:13px;line-height:18px;color:var(--body)}
.xn-filedrow{width:100%;text-align:left;border:0;font:inherit;color:inherit;background:var(--card);cursor:pointer}
.xn-filedbody{padding:0 0 12px}
.xn-filedbody .xh-sechead .x-eyebrow{font-size:13px;line-height:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--body);margin:16px 0 8px}
.xn-err{cursor:pointer}
/* ══ THE TRYOUTS PAGE: one page, five chips (Brett 2026-09-21, 6a) ══ */
.xt-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.xt-head .xt-range{margin:0;padding:0;font-size:13px;line-height:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gold-ink)}
.xt-chips{display:flex;gap:8px;margin:14px calc(var(--gutter) * -1) 0;padding:2px var(--gutter) 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xt-chips::-webkit-scrollbar{display:none}
.xt-chip{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);color:var(--navy);font-size:15px;font-weight:600;text-decoration:none;transition:background var(--t-fast) var(--ease-out),color var(--t-fast)}
.xt-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.xt-chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (pointer:coarse){ .xt-chip{min-height:44px} }
.xt-body{margin-top:12px}
.xt-count{margin-bottom:var(--gap-sec)}
.xt-doors{margin-top:var(--gap-sec)}
/* the Tonight chip's door rows: the gold dot keeps its distance from the words (PM critic 140 N6) */
.xt-door .xh-idxmeta .x-dot,.xt-door .xh-idxtitle .x-dot{margin:0 7px 1px 0;vertical-align:middle}
.xt-err{cursor:pointer}
/* a legacy console's body, adopted into the page: the app's type, no modal chrome */
.xt-legacy{font-family:var(--font)}
.xt-legacy .roster-empty,.xt-legacy .ec-err{padding:20px 0;color:var(--body);font-size:15px}
.xt-legacy .ec-body{padding:0}
.xt-legacy .ec-foot{position:static;margin-top:16px;padding:12px 0 0;border-top:1px solid var(--line);background:none}
.xt-legacy .ec-foot-row{display:flex;gap:8px;flex-wrap:wrap}
.xt-legacy .ec-b-invite,.xt-legacy .ec-b-code,.xt-legacy .ec-b-send{min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-family:var(--font);font-size:15px;font-weight:600}
.xt-legacy .ec-invite-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.xt-legacy .ec-invite-form input{min-height:44px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 12px;font-family:var(--font);font-size:16px;flex:1 1 160px}
@media (min-width:1024px){ .xt-chips{margin:14px 0 0;padding:2px 0 10px} }
/* practice (2026-09-24; Brett 2026-10-03): while practice is on, every Tryouts page carries this one line, Practice is on,
   with Leave (no switch: Score and Ratings start practice by themselves) */
.xt-pb{display:flex;align-items:center;gap:10px;width:calc(100% + var(--gutter) * 2);min-height:44px;margin:12px calc(var(--gutter) * -1) 0;padding:0 var(--gutter);border:0;border-top:1px solid var(--line-sun);border-bottom:1px solid var(--line-sun);background:var(--navy-tint);color:var(--navy);font:inherit;text-align:left}
.xt-pb b{font-size:14px;font-weight:800;letter-spacing:.02em}
.xt-realbtn:disabled,.xt-act:disabled{opacity:.55;cursor:default}
/* practice while a real session is on (Tonight round 3, oversight critic 147 S1): the Tonight panel's warning, repeated
   under the practice strip; navy with a gold hairline, the screen's one gold region */
.xt-real{display:flex;align-items:center;gap:12px;width:calc(100% + var(--gutter) * 2);margin:0 calc(var(--gutter) * -1);padding:10px var(--gutter);background:var(--navy);color:var(--card);border-bottom:1px solid var(--gold)}
.xt-real p{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.3}
.xt-real b{font-weight:800}
.xt-realbtn{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-md);background:var(--card);color:var(--navy);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none}
.xt-realbtn:active{transform:scale(.97)}
.xt-act{width:100%;border:0;font:inherit;text-align:left;color:inherit;-webkit-appearance:none;appearance:none}
@media (min-width:1024px){ .xt-pb{width:100%;margin:12px 0 0;border:1px solid var(--line-sun);border-radius:var(--r-md)} }
@media (min-width:1024px){ .xt-real{width:100%;margin:0;border-radius:0 0 var(--r-md) var(--r-md)} }
/* ══ ROSTERS: THE WALL (Brett 2026-09-22, option A; round 2 after critics 27, 28, 29) ══ */
.xt-chips[hidden],.xr-picker[hidden]{display:none}   /* an author display beats [hidden]; say it (27 #1) */
.xr-search{display:block;width:100%;margin:6px 0 12px;min-height:44px;border-radius:var(--r-md);padding:10px 12px 10px 40px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2550' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 12px 50%/20px no-repeat}   /* full width, a glass (27 #7) */
.xr-search::-webkit-search-decoration{display:none}
/* the picker: Boys | Girls as the home's tabs, the six ages as chips under them (Brett 2026-09-22, 5) */
.xr-tabs{margin-top:0;padding:0}
.xr-tabs .xd-tab{text-decoration:none}
.xr-tabs .xd-tab.on{color:var(--ink);font-weight:700}
.xr-chips{margin-top:2px;padding-bottom:4px;overflow:visible;flex-wrap:wrap;gap:6px}
.xr-chips .xt-chip{padding:0 12px}   /* six ages in one row at 390: 44 + 5 x 53 + 30 = 339 of 358 */
.xr-stage{margin-top:8px}
.xr-teamblock{margin-bottom:var(--gap-sec)}
/* the team head: a navy club tile with the crest, the coach and the count; the whole tile opens the staff sheet */
.xr-team{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--deep);border-radius:var(--r-lg);background:var(--navy);color:#fff;font:inherit;cursor:pointer;overflow:hidden;margin-bottom:8px;transition:background var(--t-fast)}
.xr-team:active{background:var(--deep)}
@media (hover:hover){ .xr-team:hover{filter:brightness(1.15)} }
.xr-team:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.xr-crest{width:40px;height:40px;flex:none;border-radius:50%;background:var(--card);object-fit:contain}
.xr-teamtext{min-width:0;flex:1}
.xr-teamname{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:22px}
.xr-teammeta{font-size:13px;line-height:16px;color:rgba(255,255,255,.72);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr-teamchev{flex:none;width:8px;height:8px;border-color:rgba(255,255,255,.7);margin-right:4px}
/* the wall: faces two across on a phone; the exception wears a tag on the photo, the rule is silent */
.xr-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.xr-face{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast)}
.xr-face:active{transform:scale(.98)}
.xr-face:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover){ .xr-face:hover{box-shadow:var(--lift)} }
.xr-photo{position:relative;aspect-ratio:4/5;background:var(--navy-tint);display:grid;place-items:center;overflow:hidden}
.xr-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}   /* a tall upload keeps its head (27 #14) */
.xr-initials{font-size:28px;font-weight:800;font-stretch:118%;color:var(--navy)}
.xr-flag{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:var(--r-pill);background:rgba(245,246,248,.94);color:var(--gold-ink);font-size:12px;line-height:16px;font-weight:600}
.xr-plate{padding:8px 12px 10px}
.xr-first{font-size:17px;font-weight:600;color:var(--ink);line-height:22px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr-last{display:flex;font-size:13px;color:var(--body);line-height:16px;white-space:nowrap}
.xr-ln{min-width:0;overflow:hidden;text-overflow:ellipsis}
.xr-age{flex:none;white-space:pre}
/* the family and staff sheets */
.x-sheet.xr-sheet{max-height:calc(100dvh - var(--sat) - 24px);overflow:auto;overscroll-behavior:contain}
.xr-sheethead{display:flex;align-items:center;gap:12px}
.xr-sheetphoto{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
.xr-sheetcrest{object-fit:contain;background:var(--card);border:1px solid var(--line)}
.xr-sheetinit{width:56px;height:56px;border-radius:50%;flex:none;background:var(--navy-tint);color:var(--navy);display:grid;place-items:center;font-size:20px;font-weight:800;font-stretch:118%}
.xr-late{color:var(--gold-ink)}
.xr-person{margin-top:12px}
.xr-cbtns{display:flex;gap:8px;padding:0 var(--gutter) 14px}
.xr-cbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:var(--r-md);background:var(--navy-tint);color:var(--navy);font-size:15px;font-weight:600;text-decoration:none;transition:background var(--t-fast)}   /* quiet, equal, tinted: none of the three is the primary (28 #9) */
.xr-cbtn:active{background:var(--line)}
.xr-cbtn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.xr-cbtn svg{width:18px;height:18px}
.xr-doors{margin-top:var(--gap-sec)}
.xr-door{width:100%;text-align:left;border:0;font:inherit;color:inherit;background:var(--card);cursor:pointer}
.xr-err,.xr-none{cursor:pointer;padding:12px 0}
@media (min-width:1024px){
  .xr-search{max-width:360px}
  .xr-picker{display:none}   /* a desk shows every team */
  .xr-halves{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,7),auto);column-gap:24px}   /* Boys and Girls share their rows (28 #13) */
  .xr-half{display:contents}
  .xr-halfhead{margin:0 0 12px;font-size:20px;line-height:24px;font-weight:800;font-stretch:105%;letter-spacing:-.02em;color:var(--ink)}
  .xr-staffhalves{margin-top:var(--gap-sec)}
  .xr-wall{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}   /* three across in a half; no surname gives way (27 #8, 28 #11) */
  .xr-face:active{transform:none}
  body.x-shelled #screen-x .x-wrap.xr-wrap{max-width:1180px}
}

/* ══ PRACTICES: the day view (Brett 2026-09-22, option 1; round 2 after critics 30, 31, 32) ══ */
.xp-kicker{font-weight:400;color:var(--mute-ink)}
.xp-kicker b{font-weight:600}
.xp-saved{color:var(--gold-ink);font-weight:600}
.xp-chips{position:sticky;top:calc(var(--sat) + 52px);z-index:36;margin:2px calc(var(--gutter) * -1) 0;padding:6px var(--gutter) 12px;overflow:visible;flex-wrap:wrap;gap:6px;background:var(--bg);border-bottom:1px solid var(--line-sun)}   /* the day stays on screen (31 #4); the sticky stack has a bottom edge (36 M3) */
.xp-chips .xt-chip{position:relative;min-height:44px;padding:0 14px;font:inherit;font-weight:600;cursor:pointer;border-color:var(--line-sun)}   /* 44 on every pointer (36 M2) */
.xp-chips .xt-chip.xp-today::after{content:'';position:absolute;left:50%;bottom:-9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--gold)}   /* today: the one gold mark */
.xp-window{margin-top:16px}
.xp-winhead{margin:0 0 8px;font-size:20px;line-height:24px;font-weight:800;font-stretch:105%;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.xp-row{min-height:60px}
.xp-rows .x-index + .x-index::before{background:var(--line-sun)}
.xp-rail{flex:none;width:88px}
.xp-field{font-size:13px;font-weight:600;color:var(--body);line-height:16px}
.xp-restroom{font-size:13px;font-weight:600;color:var(--gold-ink);line-height:16px}
.xp-team{font-weight:600}
.xp-noeps{font-size:13px;font-weight:600;color:var(--loss);margin-top:2px}
.xp-ghost{font-style:italic}
.xp-empty{background:var(--card)}   /* a free half is white like a team row; a taken half is paper with a hatch (33 M1) */
.xp-corelabel{font-size:13px;font-weight:600;color:var(--body)}   /* --body clears the stripe too (37) */
.xp-off{color:var(--gold-ink)}
.xp-share{margin-top:16px}
.x-sheet.xp-sheet{max-height:calc(100dvh - var(--sat) - 24px);overflow:auto;overscroll-behavior:contain}
.xp-sheethead{display:flex;align-items:center;gap:12px}
.xp-sheethead .x-morewho{flex:1;min-width:0}   /* the name fills, the close keeps the right edge, no hole beside the crest (36 M9) */
.xp-person{margin-top:12px}
.xg-dot{color:var(--loss)}
.x-index.tap:focus-visible,.xg-tap:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}   /* every button a ring (36 M7) */
.x-sheet.xp-sheet .x-morehead{position:sticky;top:0;z-index:1;background:var(--bg)}   /* the close never scrolls away (33 M3) */
@media (min-width:1024px){
  .xp-wrap .xg-table{min-width:0}
  .xp-wrap .xg-cell{min-width:132px}
  .xp-wrap .xg-team.xg-tap{cursor:pointer}
  .xp-wrap .xg-team:hover{box-shadow:none;transform:none}
  .xp-wrap .xg-team.xg-tap:hover{background:var(--navy-tint)}
  .xp-grid .x-card{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .xp-grid .xg-detail{font-size:12px;color:var(--body)}
  .xp-grid .xg-coach{font-size:13px}
  .xp-grid .xg-corelabel,.xp-grid .xg-ghost{font-size:13px;color:var(--body);text-transform:none}   /* never --mute for a word (36 M4); --body clears the stripe (37) */
  .xp-grid .xg-band-day.xg-today{box-shadow:inset 0 -3px 0 var(--gold)}   /* today's column (37) */
  .xp-grid .xg-until{font-size:11px}
  .xp-grid .xg-restroom{font-size:11px;color:var(--gold-ink)}
  .xp-grid .xg-dot{font-size:12px}
  .xp-grid .xg-tap{position:relative}
  .xp-grid .xg-tap::after{content:'';position:absolute;right:7px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--mute-ink);border-bottom:1.5px solid var(--mute-ink);transform:translateY(-50%) rotate(-45deg)}   /* a resting mark: the cell is a button (36 M6) */
  .xp-chips{top:0}   /* the header is static on a desk (36 M8) */
  .xp-grid .xg-hot{outline:2px solid var(--navy);background:var(--navy-tint)}   /* the cross-week light is navy, not a gold wash (33) */
  .xp-grid .xg-cell{height:60px}
}

/* ══ TOURNAMENTS: the leadership page (audit 2026-09-22, step 3) ══ */
.xtn-sec{margin-top:16px}
.xtn-tabs{margin:12px 0 8px;padding:0}
.xtn-count{flex:none;font-size:13px;font-weight:600;color:var(--body);white-space:nowrap}
.xtn-due{color:var(--gold-ink)}
.xtn-late{color:var(--loss)}
.xtn-first{margin-top:4px}
.xtn-wrap .x-index + .x-index::before,.xtn-sheet .x-index + .x-index::before{background:var(--line-sun)}   /* sun rules (40 #7) */
.xtn-panel{margin-top:4px}
.xtn-fold{width:100%;border:0;background:none;padding:0;cursor:pointer;font:inherit;text-align:left}
.xtn-fold .xtn-disc{margin-left:auto;align-self:center}
.xtn-disc{flex:none;width:8px;height:8px;border-right:2px solid var(--mute-ink);border-bottom:2px solid var(--mute-ink);transform:rotate(45deg);margin:0 4px 4px 12px;transition:transform var(--t-fast)}   /* a disclosure: down when closed, up when open */
.xtn-disc.open{transform:rotate(-135deg);margin:4px 4px 0 12px}
.xtn-ok{color:var(--win)}
.xtn-no{color:var(--loss)}
.xtn-wait{color:var(--gold-ink);font-weight:600}
.xtn-waiting{color:var(--body);font-weight:600}   /* waiting on the other leader: not mine to do, so no gold (Brett 2026-09-23) */
.x-sheet .xtn-intro{margin:10px 0 0}
.x-sheet.xtn-sheet{max-height:calc(100dvh - var(--sat) - 24px);overflow:auto;overscroll-behavior:contain}
.x-sheet.xtn-sheet .x-morehead{position:sticky;top:0;z-index:1;background:var(--bg)}
.xtn-sheethead{display:flex;align-items:center;gap:12px}
.xtn-sheethead .x-morewho{flex:1;min-width:0}
.xtn-teams{margin-top:12px}
.xtn-req{position:relative}
.xtn-req + .xtn-req::before{content:'';position:absolute;left:var(--gutter);right:0;top:0;height:1px;background:var(--line-sun);z-index:1}   /* one inset for every rule in the sheet (41 #7); above the row's white (44 #4, 45 #3) */
.xtn-reqhead{min-height:60px}
.xtn-reqbody{padding:0 var(--gutter) 14px}
.xtn-line{margin:0 0 8px}
.xtn-decide{margin-top:4px}
.xtn-btns{display:flex;gap:8px}
.xtn-btns .x-btn{flex:1;min-height:44px;margin:0}
.xtn-btns .x-btn-quiet{flex:1;min-height:44px;margin:0;border-radius:13px;border:1.5px solid var(--navy)}   /* a real edge (41 #2) */
.xtn-more{margin-top:10px;display:grid;gap:10px}
.xtn-more[hidden]{display:none}   /* an author display beats [hidden]; say it */
.xtn-more .x-input{width:100%;display:block}
.xtn-swrow{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;text-align:left}
.xtn-note{margin:8px 0 0;color:var(--gold-ink)}
.xtn-travel{margin-top:10px;border-top:1px solid var(--line)}
.xtn-travel .x-index{padding-left:0;padding-right:0}
.xtn-travel .x-index + .x-index::before{display:none}
.xtn-mark{flex:none;width:auto;min-height:44px;padding:0 14px;margin:0;border:1.5px solid var(--navy)}
.xtn-reopen{width:auto;min-height:44px;padding:0 16px;margin:0;border:1.5px solid var(--navy)}
.xtn-person{margin-top:12px}
@media (max-width:1023px){ body.x-shelled #screen-x .x-wrap.xtn-wrap{padding-top:0} .xtn-wrap .xd-head .x-title{font-size:24px;line-height:30px} }   /* the one long title: clear of Ask Playmaker at 390 */
@media (min-width:1024px){ .xtn-wrap .xd-tabs{display:flex} }

/* ══ TOURNAMENTS: forms, the coach side (audit 2026-09-22, steps 4 and 5) ══ */
.xtn-wrap [hidden],.xtn-sheet [hidden]{display:none!important}   /* every author display on this page loses to [hidden] (the Approve/Not approve pair stayed up in round 2) */
.xtn-kicker{margin:-8px 0 4px;color:var(--body);font-weight:600}   /* never --mute for a word */
.xtn-sheet .xh-sechead{padding:0 var(--gutter)}   /* a section head inside a full-bleed sheet keeps the gutter */
.xtn-field input[type=number]::-webkit-inner-spin-button,.xtn-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.xtn-field input[type=number]{-moz-appearance:textfield}
.xtn-form{padding:4px var(--gutter) 16px}
.xtn-field{margin-top:14px}
.xtn-label{display:block;margin:0 0 6px;font-size:13px;line-height:16px;font-weight:600;color:var(--body)}
.xtn-field .x-input{display:block;width:100%}
.xtn-field textarea.x-input{min-height:88px;resize:vertical;font:inherit;line-height:20px}
.xtn-choice{display:flex;flex-wrap:wrap;gap:8px}
.xtn-choice .xt-chip{min-height:44px;font:inherit;font-weight:600;cursor:pointer;border-color:var(--line-sun)}
.xtn-list{margin:0 calc(var(--gutter) * -1)}
.xtn-pick.on .xh-idxtitle{font-weight:600;color:var(--navy)}
.xtn-tick{flex:none;width:22px;height:22px;color:var(--navy)}
.xtn-tick svg{width:22px;height:22px}
.xtn-confirm{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px;border:1.5px solid var(--line-sun);border-radius:var(--r-md);background:var(--card);font:inherit;color:var(--ink);cursor:pointer}
.xtn-confirm.on{border-color:var(--navy);background:var(--navy-tint)}
.xtn-box{flex:none;width:24px;height:24px;margin-top:1px;border:2px solid var(--navy);border-radius:6px;display:grid;place-items:center;color:var(--card)}
.xtn-confirm.on .xtn-box{background:var(--navy)}
.xtn-box svg{width:16px;height:16px}
.xtn-confirmlist{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:20px;color:var(--body)}
.xtn-hint{margin:6px 0 0}
.xtn-err{margin:12px 0 0;font-size:14px;line-height:20px;font-weight:600;color:var(--loss)}
.xtn-formbtns{margin-top:18px}
.xtn-add .xh-idxtitle{color:var(--navy);font-weight:600}
.xtn-pad{padding:12px var(--gutter) 14px}
.xtn-pad .x-btn{margin:0}
.xtn-acts{display:grid;gap:10px}
.xtn-twostep .xtn-act{display:block;width:100%;min-height:44px;margin:0;border-radius:13px;border:1.5px solid var(--navy)}
.xtn-twostep .xtn-btns .x-btn,.xtn-twostep .xtn-btns .x-btn-quiet{min-height:44px}
.xtn-danger{color:var(--navy)}   /* --loss is a result's colour, never a button (48 m19); the words carry the danger */
.xtn-dangerfill{background:var(--navy)}
.xtn-needed .xh-idxtitle{color:var(--navy);font-weight:600}
.xtn-needed .xh-idxmeta{color:var(--loss)}
.xtn-link{color:var(--navy);font-weight:600}
.xtn-sec .xh-idxmeta.xtn-hint{padding:0 var(--gutter)}

/* ══ TOURNAMENTS round 3 (critics 44 to 47, Opus 5.5) ══ */
.xtn-state{display:inline-flex;align-items:center;gap:4px;font-weight:600}   /* a mark and a word, never colour alone (44 #3) */
.xtn-paneltitle{margin:0;font-size:15px;line-height:20px;font-weight:700;color:var(--ink)}   /* the refusal panel says what Confirm confirms (51 #14) */
.xtn-flash{margin:0 0 8px;color:var(--ink);font-weight:600}   /* a lost race: whose decision stands, and that this one was not saved */
.xtn-total .xh-idxtitle{font-weight:600}   /* the season's approved money, inside the Requests group (51 #7) */
.xtn-req + .x-index::before{content:'';position:absolute;left:var(--gutter);right:0;top:0;height:1px;background:var(--line-sun)}   /* the rule after the last request row, as between rows */
/* inside a sheet, ".x-sheet p" (body ink, 14px, 14px under) outranks a one-class rule: the page's own lines say so */
.x-sheet .xtn-err{margin:8px 0 0;color:var(--loss);font-weight:600}   /* an error reads as one, under its field (51 #19) */
.x-sheet .xtn-note{margin:8px 0 0;color:var(--loss);font-weight:600}   /* "Give the coach a reason.", a failed save */
.x-sheet .xtn-flash{margin:0 0 8px;color:var(--ink);font-weight:600}
.x-sheet .xtn-paneltitle{margin:0;font-size:15px;line-height:20px;font-weight:700;color:var(--ink)}
.xtn-field input[type=date].xtn-empty:not(:focus)::-webkit-datetime-edit,.xtn-field input[type=date].xtn-empty:not(:focus)::-webkit-datetime-edit-text,.xtn-field input[type=date].xtn-empty:not(:focus)::-webkit-datetime-edit-month-field,.xtn-field input[type=date].xtn-empty:not(:focus)::-webkit-datetime-edit-day-field,.xtn-field input[type=date].xtn-empty:not(:focus)::-webkit-datetime-edit-year-field{color:transparent;-webkit-text-fill-color:transparent}   /* WebKit paints the placeholder digits with its own fill (52 M7) */   /* an empty date shows nothing, not today's date in grey that reads as filled (51 #19) */
.xtn-field input[type=date]{text-align:left}
.xtn-field input[type=date]::-webkit-date-and-time-value{text-align:left}   /* a set date holds left on iOS, as every other field does (48 M7) */
/* round 4 (cold judge 48): the sheet head is flush with the sheet's edge and carries the grabber, so nothing scrolls
   through a strip above it (M2); the rest is the sheet's rhythm and the page's own edges */
.x-sheet.xtn-sheet{padding-top:0}
.x-sheet.xtn-sheet::before{display:none}
.x-sheet.xtn-sheet .x-morehead{z-index:2;padding-top:16px}
.x-sheet.xtn-sheet .x-morehead::before{content:'';position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:var(--r-pill);background:var(--mute)}
@media (min-width:1024px){ .x-sheet.xtn-sheet .x-morehead::before{display:none} .x-sheet.xtn-sheet.xd-reader{max-width:760px} }   /* the column lifting, no touch grabber on a desk (48 m18) */
.xtn-tabs .xd-tab.on::after{background:var(--navy)}   /* one gold region: the deadlines (48 M1) */
.x-more .xtn-teams,.x-more .xtn-person{margin-top:0}
.xtn-sheet .xtn-sec{margin-top:28px}
.x-more .xtn-list{margin:0 calc(var(--gutter) * -1)}
.xtn-personrow{position:relative}
.xtn-personrow + .xtn-personrow::before{content:'';position:absolute;left:var(--gutter);right:0;top:0;height:1px;background:var(--line-sun);z-index:1}   /* the coaches as one flush group, rules not gaps (48 m1) */
.xtn-btns .x-btn-quiet{font-size:16.5px}   /* one size per pair (48 m2) */
.xtn-state{align-items:baseline}
.xtn-state svg{align-self:center}   /* the word on the text's baseline (48 m3) */
.xtn-tail{white-space:nowrap}
.xtn-fold{align-items:center}
.xtn-fold .x-eyebrow{margin:0}
.xtn-fold.open{margin-bottom:12px}   /* the chevron centred on the label (48 m5) */
.xtn-travel{border-top-color:var(--line-sun)}
.xtn-travel .xh-idxtitle{font-size:15px}   /* a child of the request, not its sibling (48 m10) */
.xtn-wrap .x-group,.xtn-sheet .x-group{border-color:var(--line-sun)}   /* group edges that survive sun (48 m13) */
.xtn-sheet .x-input{border:1px solid var(--mute-ink)}
.xtn-sheet .x-input:focus{border-color:var(--navy)}   /* a field's edge at 4.99:1 (48 m14) */
.xtn-choice .xt-chip.on{border-color:var(--navy)}   /* the picked chip wears no grey ring (48 m15) */
.x-sheet .xtn-label{margin:0 0 6px;font-size:13px;line-height:16px;font-weight:600;color:var(--body)}   /* every label one size and one gap (48 M4) */
.x-sheet .xtn-line{margin:0 0 8px}
.x-sheet .xtn-hint{margin:6px 0 0}
.xtn-teampick{display:grid;gap:4px}
.xtn-teampick .xr-chips{margin:4px 0 0}
.xtn-teampick .xt-chip[disabled]{opacity:.45;cursor:default}
.x-sheet .xtn-picked{margin:6px 0 0;color:var(--ink);font-weight:600}
.xtn-teampick .xr-chips{margin:4px 0 0;padding:0}
.xtn-teampick .xtn-tabs{margin:0}   /* the label sits on its tabs, as on every other field */
.xtn-reason{min-height:88px;resize:vertical;font:inherit;line-height:20px}
.xtn-field .x-input.xtn-bad{border-color:var(--loss)}
.xtn-wrap .x-btn-quiet:disabled,.xtn-sheet .x-btn-quiet:disabled{opacity:.4;cursor:default}   /* a quiet button says when it is busy too (45 m7) */
.xtn-delete{margin-top:18px}
.xtn-reqbody .xtn-twostep{margin-top:10px}
.xtn-state svg{width:14px;height:14px;stroke-width:2.4;flex:none}
.xtn-clash{color:var(--gold-ink);font-weight:600}
.xtn-wrap .xh-count,.xtn-sheet .xh-count{color:var(--body)}   /* gold is the deadline alone (44 #2) */
.xtn-fold{min-height:44px}
.xtn-sheet .xtn-req{scroll-margin-top:96px}   /* a focused request lands below the sticky head (45) */
.xtn-fees{padding:10px var(--gutter) 0;margin:0}
.xtn-travel .x-index .xtn-mark{margin-left:auto}
.x-sheet.xtn-sheet.xtn-tall{min-height:calc(100dvh - var(--sat) - 24px)}   /* rows open downward, never up under the finger (45 #2); the desk too (49 m13) */
@media (min-width:1024px){ .x-sheet.xtn-sheet.xtn-tall.xd-reader{min-height:92dvh} }
@media (min-width:1024px){ body.x-shelled .x-scrim{padding-left:230px} }   /* a desk sheet centres on the page column, clear of the sidebar (44 #8) */

/* ── PLAYMAKER (the four old leader surfaces, 2026-09-23): a full-height sheet on the phone, a side panel on the desk ── */
.x-sheet.xpm-sheet{display:flex;flex-direction:column;height:calc(100dvh - var(--sat) - 24px);max-height:calc(100dvh - var(--sat) - 24px);padding:0;overflow:hidden;background:var(--bg)}
.x-sheet.xpm-sheet::before{display:none}   /* the grabber rides the head, so nothing scrolls above it */
.xpm-head{flex:none;position:relative;gap:10px;padding:16px 4px 8px var(--gutter);border-bottom:1px solid var(--line-sun)}
.xpm-head::before{content:'';position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:var(--r-pill);background:var(--mute)}
.xpm-avatar{flex:none;width:36px;height:36px;border-radius:50%}
.xpm-head .x-morewho{flex:1;min-width:0}
.xpm-mail{flex:none;width:auto;min-height:44px;margin:0;padding:0 12px;font-size:15px;border:0}
.xpm-log{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px var(--gutter) 12px;display:flex;flex-direction:column;gap:14px}
.xpm-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.xpm-me{align-items:flex-end}
.xpm-bubble{max-width:88%;padding:10px 14px;border-radius:18px;font-size:16px;line-height:22px;color:var(--ink);background:var(--card);border:1px solid var(--line-sun);overflow-wrap:anywhere}
.xpm-me .xpm-bubble{background:var(--navy);border-color:var(--navy);color:#fff}
.x-sheet .xpm-bubble p{margin:0 0 8px;font-size:16px;line-height:22px;color:inherit}
.x-sheet .xpm-bubble p:last-child{margin-bottom:0}
.xpm-bubble ul{margin:0 0 8px;padding-left:20px}
.xpm-bubble li{margin:0 0 4px}
.x-sheet .xpm-bubble .xpm-h{font-weight:700}
.xpm-err{color:var(--loss)}
.xpm-acts{display:flex;gap:4px}
.xpm-copy{min-height:44px;padding:0 10px;margin-left:-10px;border:0;background:none;color:var(--body);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.xpm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.xpm-chip{min-height:44px;height:auto;padding:8px 14px;white-space:normal;text-align:left;line-height:18px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;border-color:var(--line-sun)}
.xpm-dots{display:grid;gap:8px;width:220px;max-width:70%;padding:14px 16px}
.xpm-dots .x-skel{height:10px}
.xpm-dots .x-skel:last-child{width:60%}   /* the house's one licensed loop, the skeleton shimmer, stands in for "writing" */
.x-sheet .xpm-note{flex:none;margin:0;padding:6px var(--gutter);font-size:14px;line-height:20px;color:var(--body)}
.xpm-bar{flex:none;display:flex;align-items:flex-end;gap:8px;padding:8px var(--gutter) calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line-sun);background:var(--bg)}
.xpm-input{flex:1;min-height:44px;max-height:120px;resize:none;font:inherit;font-size:16px;line-height:22px;padding:10px 14px;border-radius:22px;border:1px solid var(--mute-ink)}   /* 16px: iOS never zooms the page */
.xpm-input:focus{border-color:var(--navy)}
.xpm-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer}
.xpm-send:disabled{opacity:.35;cursor:default}
.xpm-send svg{width:22px;height:22px}
@media (min-width:1024px){
  .x-sheet.xpm-sheet.xpm-panel{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100vw;height:100dvh;max-height:none;border-radius:0;transform:translateX(100%);box-shadow:-12px 0 32px rgba(16,24,40,.12)}
  .x-scrim.show .x-sheet.xpm-panel{transform:none}
  .xpm-panel .xpm-head::before{display:none}   /* no touch grabber on a desk */
  .xpm-panel .xpm-head{padding-top:12px}
  .xpm-panel .xpm-bar{padding-bottom:14px}
}

/* Tournaments round 5 (cold judge 52) */
@media (min-width:1024px){ .x-sheet .xtn-teampick .xd-tabs{display:flex} }   /* Boys | Girls in a desk form sheet: sheets mount on body, outside .xtn-wrap (52 M6) */
.xtn-teampick .xt-chip{min-height:44px}   /* 44 on every pointer (52 m8) */
.x-sheet.xtn-sheet .x-morehead{border-bottom:1px solid var(--line-sun)}   /* a rule under the head, so scrolled rows never peek out cut (52 M8) */
.x-sheet.xtn-sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.xtn-more{scroll-margin-bottom:24px}   /* Confirm and Cancel clear the home bar (52 m2) */
.xtn-twostep .xtn-act{font-size:16.5px}   /* Reopen at the pairs' size (52 m1) */
.xtn-sheet .x-input:focus-visible{outline:none}
.xtn-sheet .x-input:focus{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}   /* one focus ring (52 m4) */
.x-sheet .xtn-picked{min-height:20px}   /* the pick's line holds its place (53) */
.xtn-season{margin-top:28px}

/* ── SURVEYS: the works check (2026-09-23, report 56) ── */
.xs-page .x-kicker,.xs-page .xg-key,.xs-page .xs-dwhen,.xs-page .xs-cap,.xs-page .xs-tnote,.xs-page .xs-cutn{color:var(--mute-ink)}   /* must-read text never in --mute */
.xs-page .xg-links .x-btn-quiet{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.xs-page .xg-right{margin-left:auto;text-align:right}   /* the answers hold one column edge */
.xs-meter.closed i{background:var(--navy)}
.xs-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:0 0 4px -8px;padding:0 10px 0 4px;border:0;background:none;font:inherit;font-size:17px;font-weight:600;color:var(--navy);cursor:pointer}
.xs-back svg{width:20px;height:20px}
.xs-back:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:8px}
.x-sheet.xs-lbsheet img{display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain;background:var(--card)}

/* ── SIGN-IN (the sign-in plan, step 11, 2026-09-23; public/js/screens/signin.js). Light paper under the default status
   bar, one column, ONE lifted object (the card), navy as the only fill, gold only on the wordmark's period. Errors are
   ink words under the card, never --alert and never a toast. 17px inputs, 52px rows and button, 44px everything else.
   The default since 2026-09-23; /coach?signin=classic brings the July screen back for 30 days. ── */
#screen-pin.xsi-on{background:var(--bg);padding:0;align-items:stretch;justify-content:flex-start;overflow:visible}
#screen-pin.xsi-on::before{display:none}
#screen-pin.xsi-on > :not(.xsi){display:none!important}
.xsi{flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg);font-family:var(--font);color:var(--body);-webkit-font-smoothing:antialiased}
.xsi-col{width:100%;max-width:400px;margin:0 auto;padding:calc(var(--sat) + 48px) var(--gutter) 28px;display:flex;flex-direction:column}
.xsi-crest{display:block;width:44px;height:auto;margin:0 0 16px}
.xsi .xsi-title{margin:0;font-size:28px;line-height:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.xsi-dot{color:var(--gold)}
.xsi .xsi-sub{margin:6px 0 28px;font-size:15px;line-height:22px;color:var(--body)}
.xsi-form{display:flex;flex-direction:column;gap:12px;margin:0}
.xsi-group{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift)}
.xsi-row{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;min-height:52px;padding:6px 16px}
.xsi-row + .xsi-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--line-sun)}
.xsi-row[hidden]{display:none}
.xsi .xsi-lab{grid-column:1;font-size:13px;line-height:16px;font-weight:600;color:var(--body)}
.xsi .xsi-in{grid-column:1;display:block;width:100%;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:17px;line-height:24px;color:var(--ink)}
.xsi .xsi-in::placeholder{color:var(--mute);opacity:1}
.xsi .xsi-in{caret-color:var(--navy)}
.xsi .xsi-in[readonly]{pointer-events:none;text-overflow:ellipsis}   /* the address in the code step takes no tap: it would drop the number pad (report 65) */
.xsi .xsi-code.xsi-spent{color:var(--mute-ink)}   /* a rejected code goes quiet instead of a blue system selection */   /* a "nothing yet" mark, unlike typed ink (critic 60) */
.xsi .xsi-code{font-size:28px;line-height:34px;font-weight:800;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.xsi .xsi-code::placeholder{letter-spacing:normal;font-size:17px;font-weight:400}   /* a hint, not a typed code */
.xsi-group:focus-within{box-shadow:var(--lift),0 0 0 2px var(--navy)}
.xsi .xsi-edit{grid-column:2;grid-row:1 / span 2;min-height:44px;margin:-6px -16px -6px 0;padding:0 16px;border:0;background:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer}
.xsi-row-code{animation:xsi-grow var(--t-med) var(--ease-out) both}
@keyframes xsi-grow{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.xsi-group.xsi-shake{animation:xsi-shake var(--t-med) var(--ease-out)}
@keyframes xsi-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}60%{transform:translateX(5px)}85%{transform:translateX(-2px)}}
.xsi .xsi-msg{margin:0;font-size:15px;line-height:21px;color:var(--ink)}
.xsi .xsi-msg:empty{display:none}
.xsi-form.xsi-codestep .xsi-say{display:block;min-height:21px}   /* the button never jumps when a line appears (critic 60); a class, not :has() (report 64) */
.xsi .xsi-btn{display:grid;place-items:center;width:100%;height:52px;margin:0;padding:0 16px;border:0;border-radius:var(--r-md);background:var(--navy);color:#fff;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),opacity var(--t-fast)}
.xsi .xsi-btn:active{transform:scale(.985)}
.xsi .xsi-btn:disabled{opacity:.55;cursor:default;transform:none}
.xsi-btn svg{width:24px;height:24px}
.xsi-btn.xsi-done svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:xsi-draw var(--t-check) var(--ease-out) forwards}
@keyframes xsi-draw{to{stroke-dashoffset:0}}
.xsi-aux{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.xsi-aux[hidden],.xsi-aux > [hidden]{display:none}
.xsi .xsi-note{margin:0;font-size:15px;line-height:21px;color:var(--body);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;text-wrap:pretty}
.xsi .xsi-note.xsi-mute{color:var(--mute-ink)}
.xsi .xsi-link{min-height:44px;margin:-11.5px 0;padding:0;border:0;background:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer}
.xsi-foot{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:400px;min-height:calc(52px + env(safe-area-inset-bottom,0px));margin:auto auto 0;padding:0 var(--gutter);padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--line-sun);font-size:15px;font-weight:600;color:var(--navy);text-decoration:none}
.xsi-foot svg{width:18px;height:18px;color:var(--mute)}
.xsi .xsi-edit:active,.xsi .xsi-link:active{opacity:.4}   /* a press shows (styles.css removes the tap highlight) */
.xsi-foot:active{background:var(--press)}
.xsi .xsi-btn:focus-visible,.xsi .xsi-edit:focus-visible,.xsi .xsi-link:focus-visible,.xsi-foot:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--r-sm)}
/* the evaluator PIN door (2026-09-24): one quiet line under the button, to the PIN and back to the code */
.xsi-alt{display:flex;align-items:center;min-height:44px}
.xsi-alt[hidden]{display:none}
.xsi .xsi-alt .xsi-link{margin:0;text-align:left}
@media (max-width:767px){
  .xsi-col,.xsi-foot{max-width:none}
  /* the code step, phones only: the crest and the line under the title give way and the column rises, so neither
     the keyboard nor Safari's address pill hides the countdown, the resend or the help line (reports 60, 65). The
     class is set by the screen, so a failed send keeps the layout still. */
  .xsi-col.xsi-compact{padding-top:calc(var(--sat) + 16px)}
  .xsi-col.xsi-compact :is(.xsi-crest,.xsi-sub){display:none}
  .xsi-col.xsi-compact .xsi-title{margin-bottom:24px}
}
@media (min-width:768px){ .xsi-foot{max-width:360px;padding-inline:0} }
@media (min-width:1024px){ .xsi-col{padding-top:max(14vh, calc(var(--sat) + 48px))} .xsi-foot{max-width:340px;padding-inline:0} }
@media (prefers-reduced-motion:reduce){
  .xsi-row-code,.xsi-group.xsi-shake,.xsi-btn.xsi-done svg path{animation:none}
  .xsi-btn.xsi-done svg path{stroke-dashoffset:0}
  .xsi .xsi-btn{transition:none}
}
/* Two legacy layers parked at the bottom of every screen, found under the light sign-in (2026-09-23): the hidden toast
   (opacity 0) still caught taps across the bottom middle, and the closed request sheet's upward shadow drew a grey band
   along the bottom edge. Neither may act or show until it is open. */
.toast:not(.show){pointer-events:none}
.tsheet:not(.open){box-shadow:none}