/* ══════════════════════════════════════════════════════════════════════════════
   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:#8a6d10;          /* gold as TEXT, where gold itself fails contrast */
  --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);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:#f1f3f6}
@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);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:hidden}
@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:13.5px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.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}
.x-scrim.show{opacity:1}
.x-sheet{background:var(--card);border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));width:100%;max-width:480px;transform:translateY(100%);transition:transform var(--t-med) var(--ease-out)}
.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}

/* ── 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:9px;padding:0 10px;margin:0 0 22px}
.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;padding:10px 12px;border-radius:10px;font-size:14.5px;font-weight:550;color:var(--body);text-decoration:none;margin-bottom:2px;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:var(--bg);color:var(--ink)}
.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 10px 0;border-top:1px solid var(--line)}
.x-acct .who{font-weight:650;color:var(--ink);font-size:13.5px}
.x-acct .role{font-size:12px;color:var(--mute);margin-top:1px}
.x-acct a{display:block;padding:7px 0 0;font-size:13px;font-weight:550;color:var(--body);text-decoration:none;cursor:pointer;transition:color var(--t-fast)}
.x-acct a:hover{color:var(--navy)}
.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);text-decoration:none;min-height:48px;cursor:pointer}
.x-tab svg{width:22px;height:22px}
.x-tab.on{color:var(--navy)}
.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}

@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)}
.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:#c9c4bb;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:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.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);font-variant-numeric:tabular-nums}
.xh-what{min-width:0;flex:1;padding-bottom:4px}
.xh-whatname{font-size:16px;font-weight:600;color:var(--ink);line-height:1.25}
.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)}
.xh-sub{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.xh-subn{font-size:19px;color:var(--ink)}
.xh-sub .x-eyebrow{margin:5px 0 0}
/* 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}
.xh-liveopen:hover{border-bottom-width:2px}

/* index rows carry the schedule and the queue */
.xh-sechead{display:flex;align-items:baseline;gap:8px}
.xh-count{font-size:11px;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:15px;font-weight:600;color:var(--ink);line-height:1.3}
.xh-idxmeta{font-size:12.5px;color:var(--body);margin-top:1px}
.xh-empty{color:var(--mute);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:#c9c4bb;
  box-shadow:0 8px 20px rgba(15,37,80,.10)} }
.xh-tool:active{transform:scale(.985)}
.xh-toolicon{width:32px;height:32px;border-radius:9px;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}
.xh-clear:hover{border-color:#c9c4bb;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}
}