/* Atkinson Hyperlegible — self-hosted (fonts/), the app's locked body face.
   Designed by the Braille Institute for maximum legibility. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('fonts/AtkinsonHyperlegibleMono-Variable.ttf') format('truetype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* SIQ platform — landing + tiered home.
   OFFICIAL BRAND (LOCKED 2026-07-11) — these five colors ONLY:
     Lightning Yellow #E1FF00 (hero) · Bolt Black #11190C (ground) ·
     Dark Grey #787664 · Mid Grey #CAC4B7 · Light Grey #F3F1EE.
   --navy/--panel are lifted shades of Bolt Black (surface depth, same hue).
   Green/red below are FUNCTIONAL only (quiz correct/wrong, status) — not brand
   colors. Themes.js overrides the brand tokens at runtime. */
:root {
  /* RAMP LIGHT CHROME — docs/ramp-build-spec.md. CJ's call 2026-07-30: the app
     wears the marketing ground; the play diagram stays a dark instrument inside
     it (option C). NOTE these are overridden at runtime by lib/themes.js — the
     `bolt` theme object is the real source of truth for the app's surfaces. */
  /* Ground is MID GREY (CJ, 2026-07-30) so cards sit ABOVE it — a real
     elevation stack: ground #CAC4B7 → card #FAF9F7 → chip #F3F1EE. */
  --navy-deep: #CAC4B7;                /* Mid Grey — page ground */
  --navy: #FAF9F7;                     /* raised card — brightest */
  --panel: #F3F1EE;                    /* Light Grey — chips / wells */
  --gold: #E1FF00;                     /* Lightning Yellow — hero accent */
  /* TYPE THAT SITS ON THE ACCENT. Always Bolt Black, never a theme colour.
     Lightning Yellow is only ever a FILL with dark type on it (ramp spec: yellow
     never carries text), and it measures 1.53:1 against the Mid Grey ground — so
     anything light on top of it is unreadable. Every `background: var(--gold)`
     rule pairs with this. Before it existed those rules said var(--navy-deep),
     which was dark in the old scheme and is now the light page ground. */
  --on-accent: #11190C;
  /* ACCENT TEXT — full monochrome (CJ, 2026-07-30). Lightning Yellow measures
     1.53:1 on the Mid Grey ground, and the ramp spec forbids yellow carrying
     text on a light ground outright. So the 58 places that used yellow as type
     (kickers, eyebrows, stat labels, the monogram) are now Bolt Black, and
     yellow survives as a FILL and a BORDER only — "one accent element per
     screen". Kept as its own token, not merged into --white, so the intent
     stays legible and the decision is reversible in one line. */
  --ink-accent: #11190C;
  /* BELOW-70 RED ON LIGHT CHROME (D-10). The dark instrument panels use
     --dg-low (#FF7D72), which measures 2.37:1 on a light card and is unusable
     here. This is the same rule on the other surface, and it is deliberately
     DARKER than an obvious "warning red": #C0392B reads fine on a card (5.17:1)
     but only 3.13:1 on the Mid Grey GROUND, and the contrast sweep audits every
     colour against every surface it can land on — correctly, since a rule does
     not know which one it will meet. #8E2016 is the lightest red that clears AA
     on all four (worst case 5.11 on the ground). */
  --ink-low: #8E2016;
  --on-solid: #F3F1EE;                 /* type ON a solid functional fill */
  /* TEXT BOXES are Light Grey (CJ, 2026-07-30). These read --navy-deep before,
     which is now the Mid Grey ground — inputs were dissolving into the page. */
  --input: #F3F1EE;
  --white: #11190C;                    /* PRIMARY TYPE — now Bolt Black.
                                          Name kept: platform.js and 700+ CSS
                                          references read it. Renaming it would
                                          be a far bigger diff than re-pointing. */
  --mist: #55513F;                     /* secondary type, dark enough for Mid Grey */
  /* Mid Grey can't be the hairline any more (it IS the ground) → Bolt Black low alpha. */
  --line: rgba(17, 25, 12, 0.18);
  --dim: #787664;                      /* Dark Grey — solid (borders/marks) */

  /* THE DIAGRAM IS NOT CHROME — pinned dark forever. Consumed by lib/field.js
     and .fld-wrap; lib/themes.js must never write these. See the note in
     lib/field.js and docs/diagram-rules.md §2. */
  --dg-ground: #11190C;
  --dg-surface: #1A2313;
  --dg-panel: #161F10;
  --dg-text: #F3F1EE;
  --dg-mist: rgba(202, 196, 183, 0.8);
  --dg-gold: #D4AF37;   /* THE GOLDEN TRIANGLE — metallic gold, dark-panel only */
  --dg-accent: #E1FF00;
  /* D-10 — "below 70" red. This is the FRONT tint from docs/diagram-rules.md §5,
     reused rather than invented, so a red score matches the red defenders in the
     play diagram on the same screen. 7.21:1 on --dg-ground. NOT for light chrome
     (2.37:1 on a #FAF9F7 card) — that surface needs #C0392B. */
  --dg-low: #FF7D72;

  /* Ramp type + motion + spacing. */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.16, .84, .44, 1);
  --s1: 4px;  --s2: 8px;   --s3: 16px; --s4: 24px; --s5: 32px;
  --s6: 48px; --s7: 72px;  --s8: 104px; --s9: 160px;
  /* Functional, not brand: */
  --ok: #23522F; --ok-bg: rgba(76,154,94,0.16);
  --bad: #7E1F1F; --bad-bg: rgba(226,75,74,0.16);
  --red: var(--bad);                   /* legacy alias → functional red */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--navy-deep);
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
.screen { display: none; }
.screen.active { display: block; }

/* Dev preview bar */
#dev-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 8px 14px; font-size: 0.75rem; color: var(--mist);
}
#dev-bar strong { color: var(--ink-accent); letter-spacing: 0.1em; }
#dev-bar button {
  background: var(--panel); border: 1px solid var(--line); color: var(--white);
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-weight: 700; font-size: 0.72rem;
}
#dev-bar button:hover { border-color: var(--gold); }
#dev-bar .note { margin-left: auto; font-style: italic; }

/* ---------- Landing ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  background: var(--navy); border-bottom: 3px solid var(--gold); padding: 56px 20px 48px;
}
.hero .yardlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to top, transparent 0 55px, rgba(255,255,255,0.05) 55px 57px);
}
.hero-inner { position: relative; }
.monogram {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  border: 2px solid var(--gold); display: grid; place-items: center;
}
.monogram span { color: var(--ink-accent); font-weight: 700; letter-spacing: 0.06em; font-size: 1.4rem; }
.hero h1 {
  font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 700; letter-spacing: 0.04em;
  line-height: 1.02; margin: 0;
}
.hero .sub { color: var(--mist); margin: 12px auto 0; max-width: 420px; font-size: 0.95rem; line-height: 1.5; }
.hero .tag { color: var(--ink-accent); font-weight: 700; letter-spacing: 0.18em; font-size: 0.78rem; display: block; margin-top: 6px; }

.entry-wrap {
  max-width: 760px; margin: 0 auto; padding: 40px 20px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.entry-card {
  background: var(--navy); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 20px; display: flex; flex-direction: column;
}
.entry-card.team { border-top: 3px solid var(--dim); }
.entry-card.individual { border-top: 3px solid var(--gold); }
.entry-card h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 6px; }
.entry-card p { color: var(--mist); font-size: 0.85rem; line-height: 1.5; margin-bottom: 16px; }
.entry-card .grow { flex: 1; }
.code-input {
  width: 100%; background: var(--input); border: 1px solid var(--line);
  color: var(--white); border-radius: 8px; padding: 11px 12px; font-size: 0.95rem; margin-bottom: 10px;
}
.code-input:focus { outline: none; border-color: var(--gold); }

/* Password show/hide (lib/pwtoggle.js). The wrapper owns the field's vertical
   rhythm; padding-right keeps typed text from running under the button. */
.pw-wrap { position: relative; display: block; }
.pw-wrap .code-input,
.pw-wrap .text-input { padding-right: 68px; }
.pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mist);
}
.pw-toggle:hover { color: var(--white); }
.hint { color: var(--mist); font-size: 0.72rem; margin-bottom: 12px; }
.btn {
  border: none; border-radius: 8px; padding: 12px 16px; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; cursor: pointer; width: 100%; text-align: center;
}
.btn-red { background: var(--navy); color: var(--white); border: 1px solid var(--dim); }
.btn-gold { background: var(--gold); color: var(--on-accent); }
.btn-red:hover { border-color: var(--gold); }
.btn-gold:hover { filter: brightness(0.92); }
.err { color: var(--bad); font-size: 0.8rem; margin-top: 8px; min-height: 1em; }

.entry-3 { grid-template-columns: repeat(3, 1fr); }
.linklike { background: none; border: none; color: var(--ink-accent); cursor: pointer; font-size: 0.85rem; text-decoration: underline; padding: 0; font-family: inherit; }

/* Auth screen */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 48px 20px 60px; text-align: center; }
.auth-form { display: grid; gap: 10px; margin: 22px 0 10px; }
.auth-form .code-input { text-align: left; }
.auth-form select.code-input { appearance: auto; }
/* "Check your email" call-out on the 6-digit-code screen — big + bright. */
.verify-cta { background: rgba(225,255,0,0.16); border: 2px solid var(--gold); border-radius: 12px; padding: 20px 16px; margin-bottom: 16px; text-align: center; animation: verifyPulse 1.5s ease-in-out 2; }
.verify-cta-icon { font-size: 2.1rem; line-height: 1; }
.verify-cta-h { font-size: 1.35rem; font-weight: 800; margin-top: 6px; color: var(--white); letter-spacing: 0.01em; }
.verify-cta-sub { font-size: 0.92rem; color: var(--mist); margin-top: 6px; line-height: 1.45; }
.verify-cta-sub b { color: var(--white); }
@keyframes verifyPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,255,0,0); } 50% { box-shadow: 0 0 0 6px rgba(225,255,0,0.28); } }
@media (prefers-reduced-motion: reduce) { .verify-cta { animation: none; } }

/* Coach team-code banner */
.team-code-banner {
  background: rgba(225,255,0,0.12); border: 1px solid var(--gold); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 0.9rem; color: var(--white);
}
.team-code-banner strong { color: var(--white); font-size: 1rem; letter-spacing: 0.06em; }
.team-code-banner.fresh { background: rgba(76,154,94,0.14); border-color: var(--ok); color: var(--ok); }
.team-code-banner span { color: var(--white); font-weight: 700; margin-left: 6px; }

/* ---------- Home ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--navy); border-bottom: 2px solid var(--gold);
}
.topbar .brand { font-weight: 700; letter-spacing: 0.06em; font-size: 1.25rem; }
.topbar .brand { cursor: pointer; }
.topbar .who { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--mist); }
.pill {
  padding: 3px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
}
.pill.coach { background: var(--gold); color: var(--on-accent); }
.pill.player { background: var(--panel); color: var(--mist); }
.pill.individual { background: var(--panel); color: var(--ink-accent); }
.pill.admin { background: var(--navy); color: var(--ink-accent); border: 1px solid var(--gold); }
.signout {
  background: none; border: 1px solid var(--gold); color: var(--ink-accent);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 0.75rem;
}

.home-wrap { max-width: 820px; margin: 0 auto; padding: 24px 18px 60px; }
.section-title {
  color: var(--ink-accent); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; margin: 24px 0 12px;
  font-family: var(--mono);
  display: flex; align-items: center; gap: 10px;
}
.section-title::before { content: '//'; opacity: 0.55; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tile {
  background: var(--navy); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 16px 14px; cursor: pointer; text-align: left; position: relative;
  transition: border-color 0.12s, transform 0.06s;
  /* A <button> inherits no colour, so iOS Safari paints its text system-blue.
     Desktop defaults to near-black, which is why this only showed on a phone.
     Set brand ink on the button itself — the h3 had no colour of its own and
     was going blue; .tile p keeps its own --mist override below. */
  color: var(--ink-accent);
}
.tile::after {
  content: ''; position: absolute; right: 7px; bottom: 7px; width: 9px; height: 9px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  opacity: 0; transition: opacity 0.12s;
}
.tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.tile:hover::after { opacity: 0.6; }
.tile h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.tile p { color: var(--mist); font-size: 0.8rem; line-height: 1.45; }
.tile .tag {
  position: absolute; top: 12px; right: 12px; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px;
}
.tag-team { background: var(--panel); color: var(--mist); }
.tag-coach { background: rgba(225,255,0,0.18); color: var(--ink-accent); }
.tag-solo { background: rgba(225,255,0,0.18); color: var(--ink-accent); }

/* ---------- Position pick ---------- */
.pick-wrap { max-width: 640px; margin: 0 auto; padding: 48px 20px 60px; text-align: center; }
.pick-context { color: var(--ink-accent); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.pick-title { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; letter-spacing: 0.03em; }
.pick-sub { color: var(--mist); font-size: 0.9rem; margin-top: 8px; }
.pos-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px; margin: 26px 0 22px;
}
.pos-chip {
  background: var(--navy); border: 1px solid var(--line); color: var(--white);
  border-radius: 10px; padding: 16px 8px; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.pos-chip:hover { border-color: var(--gold); background: var(--panel); transform: translateY(-2px); }
.pos-chip.coach { border-color: var(--gold); }
.pos-chip.coach:hover { background: rgba(226,75,74,0.15); }

.btn-ghost { background: none; border: none; color: var(--mist); cursor: pointer; text-decoration: underline; font-size: 0.85rem; }
.btn-ghost:hover { color: var(--ink-accent); }

/* ---------- Quiz builder — audience ---------- */
.aud-all {
  width: 100%; max-width: 340px; display: block; margin-bottom: 18px;
  background: var(--navy); border: 2px solid var(--line); color: var(--white);
  border-radius: 10px; padding: 14px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer; font-size: 1rem;
}
.aud-all.on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.aud-group { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: rgba(255,255,255,0.02); }
.aud-group.dim { opacity: 0.4; pointer-events: none; }
.aud-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.aud-unit-toggle {
  background: var(--panel); border: 1px solid var(--line); color: var(--white);
  border-radius: 8px; padding: 7px 14px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; font-size: 0.85rem;
}
.aud-unit-toggle.on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.aud-members { display: flex; flex-wrap: wrap; gap: 8px; }
.aud-chip {
  background: var(--navy); border: 1px solid var(--line); color: var(--white);
  border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.aud-chip.on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
/* ---------- Player dashboard (docs/dashboard-rules.md D-01..D-06) ----------
   D-01: the dashboard is an INSTRUMENT, not chrome — a Bolt-Black panel on the
   light ground, the same ruling already made for the play diagram. It therefore
   uses the pinned --dg-* instrument tokens and must NEVER be repainted by
   lib/themes.js, which writes the chrome tokens onto :root at runtime. */
.dsh {
  background: var(--dg-ground); border: 1px solid var(--dg-mist); border-radius: 14px;
  padding: 16px; margin-bottom: 22px; color: var(--dg-text);
}
.dsh-head { display: flex; align-items: center; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid rgba(243,241,238,0.16); }
.dsh-ring {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dsh-ring.empty { border-color: rgba(243,241,238,0.28); }
.dsh-ring b { font-family: var(--display); font-weight: 900; font-size: 1.9rem; line-height: 0.85; color: var(--dg-text); }
.dsh-ring i { font-style: normal; font-size: 0.55rem; letter-spacing: 0.16em; color: var(--dg-mist); margin-top: 2px; }
.dsh-id { min-width: 0; }
/* D-03 — the full name is the heading. It can wrap; it must never be clipped to
   an initial, and it can never be blank (lib/dashboard.js displayNameOf). */
.dsh-id h3 { font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--dg-text); overflow-wrap: anywhere; }
.dsh-id p { font-size: 0.8rem; color: var(--dg-mist); margin-top: 5px; line-height: 1.35; }
/* vs-past-self climb — gains only; reads as "up". Bolt Black type (NOT gold —
   gold-as-text is ~1:1 / invisible on the light card, and off-limits by brand). */
.dsh-climb { display: inline-block; margin-top: 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; color: var(--white); font-variant-numeric: tabular-nums; }
.dsh-climb span { margin-left: 3px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.58rem; color: var(--dg-mist); }
.dsh-pdelta { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; color: var(--white); font-variant-numeric: tabular-nums; }
/* θ-history: IQ trajectory sparkline — "climbs with every rep" made visible */
.dsh-spark-wrap { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--ink-accent); }
.dsh-spark-wrap span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mist); }
.dsh-spark { display: block; }

/* THE GOLDEN TRIANGLE (CJ 2026-08-22) — metallic gold, the third sanctioned
   functional color (ramp bands · position IDs · this). The ring goes gold ONLY
   when the streak is live: quiz + practice + game, week after week. */
.dsh-ring.gt { border-color: var(--dg-gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.3), 0 0 14px rgba(212,175,55,0.22); }
.gt-line { margin-top: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--dg-gold); }
.gt-line.dim { color: var(--dg-mist); font-weight: 600; }

/* Film grades on the player dashboard (published sessions only, RLS-gated). */
.dsh-film { margin-top: 4px; }
.fg-rows { display: grid; gap: 4px; margin-top: 10px; }
.fg-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.86rem; }
.fg-kind { flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); min-width: 44px; }
.fg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--white); }
.fg-val { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--white); }
/* THE FILM VAULT (player) — tappable session rows opening the rep-by-rep line */
.fg-row.fg-open { width: 100%; background: none; border: none; padding: 6px 2px; cursor: pointer; font: inherit; text-align: left; border-radius: 6px; }
.fg-row.fg-open:hover, .fg-row.fg-open:focus-visible { background: rgba(243,241,238,0.07); }
.fg-upd { flex: 0 0 auto; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-accent); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; }
.fg-hint { font-size: 0.72rem; color: var(--mist); margin-top: 6px; }
/* the three vertices under the composed SIQ — missing shows as missing */
.fg-comps { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 0.72rem; color: var(--dg-mist); }
.fg-comps b { color: var(--dg-text); font-variant-numeric: tabular-nums; }
.fg-comps i { font-style: normal; font-size: 0.62rem; color: var(--dg-mist); }
.fg-reps { margin: 2px 0 8px; padding: 8px 10px; border-left: 2px solid var(--gold); }
.fg-rep-sum { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mist); margin-bottom: 6px; }
.fg-rep { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 0.8rem; padding: 3px 0; }
.fg-rep-n { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--white); min-width: 34px; }
.fg-rep-tags { color: var(--white); }
.fg-rep-note { color: var(--mist); font-size: 0.76rem; }
.fg-clean { margin-top: 7px; font-size: 0.7rem; color: var(--mist); line-height: 1.7; }
.fg-clean i { font-style: normal; background: rgba(243,241,238,0.1); border-radius: 4px; padding: 1px 5px; margin-right: 2px; font-variant-numeric: tabular-nums; }
.fg-tips { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.fg-focus { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-accent); margin-bottom: 4px; }
.fg-tips p { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--mist); }

.dsh-rows { margin-top: 13px; }
.dsh-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dsh-row.muted .dsh-val { color: var(--dg-mist); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.04em; }
.dsh-cat { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; color: var(--dg-mist); letter-spacing: 0.05em; }
.dsh-val { flex: 0 0 auto; width: 54px; text-align: right; font-weight: 700; font-size: 0.9rem; color: var(--dg-text); font-variant-numeric: tabular-nums; }
/* D-04 — ten segments. Counting blocks survives a glance, one hand, sound off
   and a bad screen in a way that reading a number does not. */
.dsh-pips { flex: 0 0 auto; display: flex; gap: 2px; width: 118px; }
.dsh-pips .pip { flex: 1; height: 9px; border-radius: 1px; background: rgba(243,241,238,0.14); }
.dsh-pips .pip.on { background: var(--gold); }

/* D-10 — a test score below 70 reads red. --dg-low is #FF7D72, the Front tint
   already ratified in docs/diagram-rules.md §5, so a red number matches the red
   defenders in the play diagram on the same screen. It measures 7.21:1 on the
   Bolt-Black panel; it is NOT usable on light chrome (2.37:1 on a card), where
   the rule calls for #C0392B instead. Do not unify them. */
/* Rooms — the roster grouped by position (docs/dashboard-rules.md "C · Rooms").
   Dark instrument cards (D-01), same as the dashboard they sit above.
   The top rule is the room's state: Lightning Yellow normally, --dg-low when the
   room is under 70. Colour-coding rooms by LEVEL (front/box/secondary) is
   deliberately NOT done here — that mapping depends on the grouping decision
   that is still open, and inventing it would pre-empt CJ. */
.room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 22px; }
.room-card {
  background: var(--dg-ground); border: 1px solid var(--dg-mist); border-top: 3px solid var(--gold);
  border-radius: 12px; padding: 13px; color: var(--dg-text);
}
.room-card.lo { border-top-color: var(--dg-low); }
.room-card.none { border-top-color: var(--dg-mist); }
.room-lbl { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dg-mist); }
.room-top { display: flex; align-items: baseline; gap: 8px; margin: 5px 0 9px; }
.room-val { font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 0.85; font-variant-numeric: tabular-nums; }
.room-card.lo .room-val { color: var(--dg-low); }
.room-card.none .room-val { font-size: 1rem; color: var(--dg-mist); }
.room-cov { font-size: 0.68rem; color: var(--dg-mist); }
.room-pips { display: flex; gap: 2px; margin-bottom: 10px; }
.room-pips .pip { flex: 1; height: 8px; border-radius: 1px; background: rgba(243, 241, 238, 0.14); }
.room-pips .pip.on { background: var(--gold); }
.room-card.lo .room-pips .pip.on { background: var(--dg-low); }
.room-chip {
  display: inline-block; font-size: 0.7rem; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(243, 241, 238, 0.16); margin: 0 4px 4px 0; color: var(--dg-text);
}
.room-chip.lo { border-color: rgba(255, 125, 114, 0.55); color: var(--dg-low); }
.room-chip.more { color: var(--dg-mist); }

/* Roster board — the IQ meter on each member row, and the dashboard that opens
   in place beneath it. The meter is LIGHT chrome, not an instrument, so its red
   is --ink-low, NOT the panel's --dg-low, which measures 2.37:1 here and would
   be unreadable. Same rule, different surface — D-10. */
.mem-iq { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; width: 108px; }
.mem-iq-bar { flex: 1; height: 5px; border-radius: 99px; background: var(--input); border: 1px solid var(--line); overflow: hidden; }
.mem-iq-bar i { display: block; height: 100%; background: var(--gold); }
.mem-iq b { width: 22px; text-align: right; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.mem-iq.lo b { color: var(--ink-low); }
.mem-iq.lo .mem-iq-bar i { background: var(--ink-low); }
.mem-iq.none b { color: var(--mist); font-weight: 400; }
/* The dashboard panel is an INSTRUMENT and keeps its dark ground (D-01), so it
   sits inside the light roster exactly as the play diagram sits inside the app. */
.mem-dash { margin: 0 0 10px; }
.mem-dash .dsh { margin-bottom: 0; }
.mem-dash .section-title { display: none; } /* the row above already names him */
@media (max-width: 560px) { .mem-iq { width: 74px; } }

.dsh-val.lo { color: var(--dg-low); }
.dsh-pips .pip.on.lo { background: var(--dg-low); }
.dsh-ring.lo { border-color: var(--dg-low); }
.dsh-ring.lo b { color: var(--dg-low); }

.dsh-foot { display: flex; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(243,241,238,0.16); }
.dsh-foot-cell { flex: 1 1 0; min-width: 0; }
/* D-06 — the ceiling is NAMED and shown locked. Never a threshold, never the
   player's proximity to it, and never the word "unlock" (BRAND.md phrase bank). */
/* Recessed, but still READABLE. opacity:0.45 rendered this at ~4.1:1 — under
   WCAG AA, and .dsh-foot-val is 16.8px bold, which is below the large-text
   threshold that would have excused it. getComputedStyle reports the colour
   BEFORE opacity, so the sweep read it as passing while the eye did not.
   0.62 measures ~6.7:1. The lock is carried by the word "hidden", not by
   making the text hard to read. */
.dsh-foot-cell.locked { opacity: 0.62; }
.dsh-lbl { display: block; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dg-mist); }
.dsh-foot-val { display: block; font-family: var(--display); font-weight: 900; font-size: 1.05rem; line-height: 1.05; margin-top: 4px; color: var(--dg-text); overflow-wrap: anywhere; }

@media (max-width: 460px) {
  .dsh-pips { width: 88px; }
  .dsh-val { width: 46px; }
  .dsh-foot { flex-direction: column; gap: 12px; }
}

/* Share row — the coach copies this link into wherever the team already talks.
   The URL stays VISIBLE on purpose: navigator.clipboard can be refused (insecure
   context, in-app webview), and a readable field means the fallback is a
   long-press away instead of a dead end. */
.share-row { margin: 16px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); }
.share-line { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.share-url {
  flex: 1 1 220px; min-width: 0; background: var(--panel); border: 1px solid var(--line);
  color: var(--white); border-radius: 8px; padding: 10px 12px; font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis;
}
.share-url:focus { outline: none; border-color: var(--gold); }
.btn.share-copy { flex: 0 0 auto; max-width: none; width: auto; padding-left: 20px; padding-right: 20px; white-space: nowrap; }

.aud-summary { margin: 18px 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); }
.aud-summary-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.aud-summary-list .st { background: var(--gold); color: var(--on-accent); border-radius: 999px; padding: 3px 12px; font-size: 0.78rem; font-weight: 700; }
.aud-summary-list.empty { color: var(--mist); font-size: 0.85rem; }

/* ---------- Quiz builder · content step ---------- */
.form-row { margin-bottom: 16px; }
.form-label { color: var(--ink-accent); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.chip-line { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-preview { display: grid; gap: 10px; }
.plan-part { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--input); }
.plan-part-title { font-weight: 700; margin-bottom: 8px; }
.plan-stats { display: flex; flex-wrap: wrap; gap: 16px; color: var(--mist); font-size: 0.85rem; }
.plan-stats b { color: var(--white); }
.plan-warn { margin-top: 10px; color: var(--bad); font-size: 0.82rem; background: rgba(226,75,74,0.12); border-left: 3px solid var(--red); padding: 8px 12px; border-radius: 0 8px 8px 0; }

/* Source material + generation status */
.file-input { color: var(--mist); font-size: 0.85rem; }
.file-input::file-selector-button {
  background: var(--panel); border: 1px solid var(--line); color: var(--white);
  border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; margin-right: 10px;
}
.file-input::file-selector-button:hover { border-color: var(--gold); }
/* Drag-and-drop upload zone (quiz generator source file) — ported from
   styles.css; platform.html never loads that sheet, so without these rules
   the zone rendered as an invisible strip and drops fell through to the
   browser (which opened the PDF over the app). */
.drop-zone { border: 1.5px dashed var(--line); border-radius: 10px; padding: 14px; transition: border-color .15s, background .15s; }
.drop-zone .drop-hint { color: var(--mist); font-size: 0.8rem; margin-top: 6px; }
.drop-zone.drag { border-color: var(--gold); background: rgba(225, 255, 0, 0.05); }
textarea.code-input { resize: vertical; font-family: inherit; }
.create-status { margin-top: 12px; border-radius: 10px; padding: 12px 14px; font-size: 0.9rem; line-height: 1.5; }
.create-status.hidden { display: none; }
.create-status.busy { background: rgba(225,255,0,0.12); border: 1px solid var(--gold); color: var(--white); }
.create-status.error { background: rgba(226,75,74,0.14); border: 1px solid var(--red); color: var(--bad); }

/* Ingestion status */
.ingest-status { margin-top: 10px; border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; line-height: 1.5; }
.ingest-status.hidden { display: none; }
.ingest-status.busy { background: rgba(225,255,0,0.1); border: 1px solid var(--line); color: var(--white); }
.ingest-status.ok { background: rgba(76,154,94,0.12); border: 1px solid var(--ok); color: var(--ok); }
.ingest-status.ok b { color: #11190C; }
.ingest-status.warn { background: rgba(225,255,0,0.12); border: 1px solid var(--gold); color: var(--white); }
.ingest-status.error { background: rgba(226,75,74,0.14); border: 1px solid var(--red); color: var(--bad); }
.ingest-warn { margin-top: 6px; color: var(--mist); }
.ocr-btn { margin-left: 8px; background: var(--gold); color: var(--on-accent); border: none; border-radius: 6px; padding: 5px 12px; font-weight: 700; cursor: pointer; font-size: 0.8rem; }

/* Quiz result */
.result-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--mist); font-size: 0.85rem; margin-bottom: 14px; }
.result-aud { margin-bottom: 4px; }
.result-q { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: var(--navy); }
.result-q-title { font-weight: 700; margin-bottom: 10px; }
.result-choices { display: grid; gap: 6px; margin-bottom: 10px; }
.result-choice { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.9rem; color: #11190C; }
.result-choice.correct { border-color: var(--gold); background: rgba(225,255,0,0.12); color: var(--white); font-weight: 700; }
.result-exp { color: var(--mist); font-size: 0.85rem; line-height: 1.5; }

/* Quiz taking (player) */
.take-q { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--navy); }
.take-choices { display: grid; gap: 8px; margin-top: 10px; }
.take-choice {
  text-align: left; padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--line); background: var(--navy-deep); color: #11190C; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.take-choice:hover:not(:disabled) { border-color: var(--gold); }
.take-choice.chosen { border-color: var(--gold); background: rgba(225,255,0,0.16); color: var(--white); font-weight: 700; }
.take-choice.correct { border-color: #23522F; background: rgba(76,154,94,0.18); color: #11190C; font-weight: 700; }
.take-choice.wrong { border-color: var(--red); background: rgba(226,75,74,0.18); color: var(--white); font-weight: 700; }
.take-choice:disabled { cursor: default; }
.take-foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.take-foot .btn { margin: 0; }
/* Read window — the beat before the answers appear and the decision clock runs.
   The bar fills over the length-scaled read time, then the answers reveal. */
.take-read { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.take-read-lbl { font-size: 0.78rem; font-weight: 700; color: var(--mist); white-space: nowrap; }
/* Bolt Black outline around the time bar (CJ) — reads as an instrument gauge. */
.take-read-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--panel); overflow: hidden; border: 1.5px solid var(--ink-accent); }
.take-read-bar i { display: block; height: 100%; width: 0; background: var(--gold); }
.take-answer.revealed { animation: take-reveal 0.18s ease-out; }
@keyframes take-reveal { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.take-score {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px;
  background: rgba(225,255,0,0.12); border: 1px solid var(--gold); border-radius: 12px; padding: 14px 18px;
}
.take-score-num { font-size: 2rem; font-weight: 700; color: var(--ink-accent); line-height: 1; }
/* Decide-speed — the "be early" line. Its own full-width row in the box so a
   "you left early" message wraps cleanly on a phone instead of overflowing. */
.take-speed { flex-basis: 100%; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: var(--mist); }
.take-speed.early { color: var(--ink-accent); font-weight: 800; }

/* Multi-format questions */
.scenario-box {
  background: var(--navy-deep); border: 1px solid var(--gold); border-left-width: 4px;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 10px;
  font-size: 0.88rem; color: var(--white); line-height: 1.5;
}
.fib-input { max-width: 340px; margin: 0; }
.seq-item { display: flex; align-items: center; gap: 10px; }
.seq-num {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 700; color: var(--ink-accent);
}
.take-choice.chosen .seq-num { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.fmt-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mist); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}

/* Player results (coach) */
.rs-player { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--navy); }
.rs-player-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rs-player-head strong { font-size: 1rem; }
.rs-pos { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; background: var(--panel); color: var(--ink-accent); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.rs-num { font-size: 0.7rem; font-weight: 800; background: var(--gold); color: var(--on-accent); border-radius: 999px; padding: 2px 9px; }
.rs-prog { margin-left: auto; color: var(--mist); font-size: 0.8rem; }

/* ---- Team Roster hub: two section cards ---- */
.rhub { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (max-width: 640px) { .rhub { grid-template-columns: 1fr; } }
.rhub-card { text-align: left; background: var(--navy); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; cursor: pointer; font: inherit; transition: border-color .15s, transform .1s; }
.rhub-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.rhub-h { font-size: 1.1rem; font-weight: 800; color: var(--ink-accent); margin-bottom: 6px; }
.rhub-p { color: var(--mist); font-size: 0.85rem; line-height: 1.45; }
.rf-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }

/* ---- Roster invites: coach manual entry + pending list (Phase 3b) ---- */
.ri-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.ri-add .code-input { margin: 0; }
.ri-add #ri-name { flex: 2 1 150px; }
.ri-add #ri-email { flex: 2 1 180px; }
.ri-add #ri-pos { flex: 0 1 110px; }
.ri-add #ri-jersey { flex: 0 1 70px; }
.ri-add #ri-year { flex: 0 1 96px; }
.ri-add #ri-add { flex: 0 0 auto; width: auto; margin: 0; }
.ri-err { margin: 2px 0 0; }
.ri-err:empty { display: none; }
.ri-count { display: inline-block; min-width: 18px; text-align: center; background: var(--panel); border-radius: 999px; font-size: 0.7rem; padding: 1px 7px; color: var(--mist); margin-left: 4px; }
.ri-list { display: flex; flex-direction: column; gap: 6px; }
.ri-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto 26px; align-items: center; gap: 10px; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; background: var(--navy); }
.ri-name { font-weight: 700; color: var(--ink-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-email { color: var(--mist); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-meta { color: var(--mist); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ri-del { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--mist); cursor: pointer; width: 26px; height: 26px; font-size: 0.8rem; line-height: 1; padding: 0; }
.ri-del:hover { border-color: var(--red); color: var(--ink-low); }
@media (max-width: 640px) {
  .ri-row { grid-template-columns: 1fr auto; }
  .ri-email, .ri-meta { grid-column: 1 / -1; }
}

/* ---- Depth Chart: the FORMATION field (drag between/within spots or ▲▼) ---- */
.dc-sides { display: flex; gap: 8px; margin: 4px 0 14px; }
.dc-sides .chipbtn { background: var(--navy); border: 1px solid var(--line); color: var(--white); font: inherit; font-weight: 700; font-size: 0.85rem; padding: 7px 20px; border-radius: 999px; cursor: pointer; }
.dc-sides .chipbtn.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
#rd-field { overflow-x: auto; padding-bottom: 8px; }
/* THE HUDDLE (CJ 2026-08-22 latest): rows of spots shoulder to shoulder — no
   gap inside a row, each row centered, exactly like the drawn cards. Spots
   flex to share the row's full width (the pos-legend look) so a wide front
   never clips off either edge; below 640px the row scrolls from the left. */
.dcf-grid { display: flex; flex-direction: column; gap: 14px; }
.dcf-hrow { display: flex; align-items: flex-start; justify-content: center; }
.dcf-spot { flex: 1 1 0; min-width: 0; max-width: 210px; background: var(--panel); border: 1px solid var(--line); padding: 8px; align-self: start; }
@media (max-width: 640px) {
  .dcf-hrow { justify-content: flex-start; }
  .dcf-spot { min-width: 132px; }
}
.dcf-hrow .dcf-spot + .dcf-spot { margin-left: -1px; }  /* shared shoulder line */
.dcf-hrow .dcf-spot:first-child { border-radius: 12px 0 0 12px; }
.dcf-hrow .dcf-spot:last-child { border-radius: 0 12px 12px 0; }
.dcf-hrow .dcf-spot:only-child { border-radius: 12px; }
.dcf-lbl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist); text-align: center; margin-bottom: 6px; }
.dcf-empty { color: var(--mist); text-align: center; font-size: 0.85rem; padding: 8px 0; }
.dcf-card { display: flex; align-items: center; gap: 8px; min-width: 0; background: var(--navy); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; margin-bottom: 6px; cursor: grab; }
.dcf-card.starter { border-color: var(--gold); border-width: 1.5px; }
.dcf-card.dragging { opacity: 0.4; }
.dcf-num { min-width: 26px; height: 26px; border-radius: 6px; background: var(--gold); color: var(--on-accent); font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dcf-name { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcf-mv { display: flex; gap: 3px; flex-shrink: 0; }
.dcf-mv button { background: none; border: 1px solid var(--line); color: var(--white); border-radius: 6px; width: 26px; height: 26px; font-size: 0.75rem; cursor: pointer; padding: 0; }
.dcf-mv button:disabled { opacity: 0.3; cursor: default; }

/* ---- Season Vault: schedule + week/session tabs ---- */
.vault-sched { background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.vault-sched summary { font-weight: 800; color: var(--ink-accent); cursor: pointer; }
.vsr { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vsr-n { min-width: 42px; font-size: 0.8rem; font-weight: 700; color: var(--mist); }
.vsr-ha { min-width: 40px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-accent); font-weight: 800; border-radius: 8px; padding: 6px 0; cursor: pointer; }
.vsr-opp { flex: 1; max-width: 280px; }
.vault-weeks { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.vault-wk { flex: 0 0 auto; background: var(--navy); border: 1px solid var(--line); color: var(--white); font: inherit; font-size: 0.82rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.vault-wk.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.vault-wk-title { font-size: 1.15rem; font-weight: 800; color: var(--ink-accent); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 10px; }
.vault-sessions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.vault-sess { background: var(--navy); border: 1px solid var(--line); color: var(--white); font: inherit; font-size: 0.82rem; font-weight: 700; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.vault-sess.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.vault-sess.game { border-color: var(--dim); }
.vault-sess.game.on { background: var(--gold); }
.vp-head { font-size: 0.95rem; color: var(--mist); margin-bottom: 10px; }
.vp-head b { color: var(--ink-accent); }
.vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vp-card { background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.vp-card-h { font-size: 0.9rem; font-weight: 800; color: var(--ink-accent); margin-bottom: 6px; }
.vp-wide { grid-column: 1 / -1; }
/* The vault's real quiz list (CJ 2026-08-23): title · status · audience chips ·
   reopen — the audience chips are how a coach knows WHICH group he's seeing. */
.vault-quiz-list { font-size: 0.85rem; }
.vq-hint { color: var(--mist); font-size: 0.78rem; margin-bottom: 8px; }
.vq-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.vq-row:first-of-type, .vq-hint + .vq-row { border-top: 0; }
.vq-title { font-weight: 700; color: var(--ink-accent); }
.vq-st { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; border-radius: 999px; padding: 2px 8px; background: var(--panel); color: var(--mist); }
.vq-st.live { background: var(--gold); color: var(--on-accent); }
.vq-auds { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vq-chip { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--mist); }
.vq-reopen { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink-accent); font: inherit; font-size: 0.75rem; font-weight: 700; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.vq-reopen:hover { border-color: var(--gold); }
.vq-note { flex-basis: 100%; font-size: 0.72rem; color: var(--mist); }
.vq-note:empty { display: none; }
/* Role-scope note atop the coach KPI strip (spans the KPI grid). */
.kpi-scope { grid-column: 1 / -1; font-size: 0.78rem; color: var(--mist); }
.kpi-scope b { color: var(--ink-accent); }

/* ---- PROGRAM COMMAND — dark "instrument" dashboard (the Jarvis view) ---- */
.pgm { color: #11190C; position: relative; }

.pgm-load { color: #787664; font-size: 0.9rem; letter-spacing: 0.1em; }
.pgm-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }


.pgm-wk { color: #787664; font-size: 0.8rem; letter-spacing: 0.1em; }
.pgm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px) { .pgm-tiles { grid-template-columns: repeat(2, 1fr); } }
.pgm-tile { background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.pgm-tile.big { border: 1.5px solid var(--gold); }
.pgm-tval { font-size: 2rem; font-weight: 800; color: #11190C; line-height: 1; font-variant-numeric: tabular-nums; }
.pgm-slash { color: #55513F; font-size: 1.1rem; }
.pgm-tlabel { color: #55513F; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
.pgm-tsub { color: #787664; font-size: 0.72rem; margin-top: 2px; }
.pgm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .pgm-grid { grid-template-columns: 1fr; } }
.pgm-wide { grid-column: 1 / -1; }
.pgm-card { background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.pgm-ch { color: #11190C; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.pgm-ch small { color: #787664; font-weight: 400; letter-spacing: 0; text-transform: none; }
.pgm-empty { color: #787664; font-size: 0.85rem; }
.pgm-heat { width: 100%; border-collapse: separate; border-spacing: 4px; }
.pgm-heat th { color: #787664; font-size: 0.66rem; letter-spacing: 0.1em; text-align: center; font-weight: 700; padding: 2px; }
.pgm-heat-pos { color: #11190C; font-size: 0.8rem; font-weight: 700; white-space: nowrap; text-align: left; padding-right: 8px; }
.pgm-heat-pos span { color: #55513F; font-weight: 400; }
.pgm-cell { text-align: center; font-weight: 800; font-size: 0.85rem; border-radius: 6px; padding: 8px 4px; font-variant-numeric: tabular-nums; min-width: 44px; }
.pgm-mrow, .pgm-prow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pgm-mlabel { flex: 0 0 42%; font-size: 0.8rem; color: #11190C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgm-mbar, .pgm-pbar { flex: 1; height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.pgm-mbar i { display: block; height: 100%; background: #C0392B; border-radius: 4px; }
.pgm-mrow b { color: #8E2016; font-size: 0.8rem; min-width: 20px; text-align: right; }
.pgm-plabel { flex: 0 0 44px; color: #11190C; font-size: 0.78rem; font-weight: 700; }
.pgm-pbar i { display: block; height: 100%; border-radius: 4px; }
.pgm-prow b { min-width: 24px; text-align: right; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pgm-rrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(17,25,12,0.18); }
.pgm-rrow b { color: #11190C; font-size: 0.85rem; }
.pgm-rpos { color: #787664; font-size: 0.7rem; flex: 1; }
.pgm-chip { font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.pgm-chip.not { background: var(--panel); color: #55513F; }
.pgm-chip.risk { background: #F7E2E0; color: #8E2016; }
.pgm-foot { color: #55513F; font-size: 0.72rem; margin-top: 16px; text-align: center; }
.pgm-foot span { color: #11190C; font-weight: 700; }
/* ---- MA Matrix (rooms × session miss-rate; the first grade-store read) ---- */
.pgm-ma-scroll { overflow-x: auto; }
.pgm-ma { min-width: 480px; }
.pgm-ma-cell { line-height: 1.1; }
.pgm-ma-cell small { display: block; font-size: 0.6rem; font-weight: 600; opacity: 0.7; margin-top: 1px; }
.pgm-ma-cell.thin { background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(139,137,117,.14) 3px, rgba(139,137,117,.14) 6px); }
.pgm-ma-cell.sig { box-shadow: inset 0 0 0 2px #E1FF00; }
.pgm-ma-spark { font-family: ui-monospace, Menlo, Consolas, monospace; color: #55513F; letter-spacing: 1px; white-space: nowrap; text-align: left; padding-left: 8px; font-size: 0.9rem; }
.pgm-ma-flag { margin-left: 8px; font-size: 0.6rem; font-weight: 700; color: #8E2016; letter-spacing: 0.06em; }
.pgm-ma-imp { margin-left: 8px; font-size: 0.6rem; font-weight: 700; color: #0A7E4E; letter-spacing: 0.06em; }
.pgm-ma-note { color: #55513F; font-size: 0.68rem; margin-top: 10px; line-height: 1.5; }
.pgm-ma-note b { color: #787664; }

/* ---- Be-Early Board + Splash Ledger (room-level diverging bars, V5 + V7) ---- */
.pgm-dvg-legend { display: flex; gap: 14px; font-size: 0.66rem; color: #787664; letter-spacing: 0.06em; margin-bottom: 10px; }
.pgm-dvg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pgm-dvg-legend i.neg { background: #C0392B; }
.pgm-dvg-legend i.pos { background: #E1FF00; }
.pgm-dvg-nhint { margin-left: auto; color: #787664; }
.pgm-dvg-row { display: grid; grid-template-columns: 56px 1fr 1fr 26px; align-items: center; gap: 0; margin-bottom: 5px; }
.pgm-dvg-who { font-size: 0.8rem; color: #11190C; font-weight: 700; padding-right: 8px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgm-dvg-cell { display: flex; align-items: center; height: 16px; }
.pgm-dvg-cell.l { justify-content: flex-end; border-right: 1px solid rgba(17,25,12,0.18); }
.pgm-dvg-bar { height: 13px; }
.pgm-dvg-bar.neg { background: #C0392B; border-radius: 6px 0 0 6px; }
.pgm-dvg-bar.pos { background: #E1FF00; border-radius: 0 6px 6px 0; }
.pgm-dvg-val { font-size: 0.62rem; color: #787664; padding: 0 5px; }
.pgm-dvg-tot { font-size: 0.62rem; color: #787664; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Did the Fix Hold (multi-week trend; flagged concept → held/recurred) ---- */
.pgm-fh-row { display: grid; grid-template-columns: 18px 54px minmax(0, 1fr) 96px; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(17,25,12,0.18); font-size: 0.8rem; }
.pgm-fh-row:first-of-type { border-top: 0; }
.pgm-fh-mark { font-weight: 700; text-align: center; }
.pgm-fh-key { color: #11190C; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgm-fh-desc { color: #55513F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgm-fh-desc b { color: #11190C; font-weight: 700; }
.pgm-fh-spark { font-family: ui-monospace, Menlo, Consolas, monospace; color: #787664; letter-spacing: 1px; text-align: right; font-size: 0.9rem; white-space: nowrap; overflow: hidden; }
.pgm-fh-more { color: #787664; font-size: 0.7rem; margin-top: 8px; }
.fh-red { color: #8E2016; }
.fh-amber { color: #936509; }
.fh-green { color: #0A7E4E; }
.fh-grey { color: #787664; }

/* ---- Fix-hold player-lens toggle (V2.1) ---- */
.pgm-fh-seg { float: right; display: inline-flex; border: 1px solid rgba(17,25,12,0.18); border-radius: 7px; overflow: hidden; }
.pgm-seg { background: transparent; color: #787664; border: 0; padding: 3px 9px; font-size: 0.64rem; letter-spacing: 0.05em; cursor: pointer; font-family: inherit; }
.pgm-seg + .pgm-seg { border-left: 1px solid rgba(17,25,12,0.18); }
.pgm-seg.on { background: #E1FF00; color: #11190C; } /* gold FILL + Bolt Black type — never gold-as-text */
.pgm-fh-body[hidden] { display: none; }

/* ---- Growth vs past self (V3) — reuses the fix-hold row grid ---- */
.pgm-gr-row { display: grid; grid-template-columns: 18px 54px minmax(0, 1fr) 96px; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(17,25,12,0.18); font-size: 0.8rem; }
.pgm-gr-row:first-of-type { border-top: 0; }
.pgm-gr-mark { font-weight: 700; text-align: center; }
.gr-real { color: #0A7E4E; font-weight: 700; }
.gr-up { color: #567B0E; }
.gr-down { color: #8E2016; }
.gr-flat { color: #787664; }
/* Cram-vs-Learn θ tag on a growth row (dark instrument; pgm-* → contrast-exempt) */
.pgm-tf { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.pgm-tf.good { color: #0A7E4E; background: #E0F7EE; }
.pgm-tf.cram { color: #936509; background: #F7F0E0; }
.pgm-tf.grind { color: #2456A6; background: #E3EBF7; }

/* ---- Knows-it vs does-it (V4) scatter ---- */
.pgm-kd-svg { width: 100%; height: auto; display: block; margin-top: 4px; }

/* ---- Money-down split (V6) dumbbell ---- */
.pgm-md-legend { display: flex; gap: 14px; font-size: 0.66rem; color: #787664; letter-spacing: 0.06em; margin-bottom: 10px; align-items: center; }
.pgm-md-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.pgm-md-legend i.early { background: #787664; }
.pgm-md-legend i.lev { background: #C0392B; }
.pgm-md-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 62px; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(17,25,12,0.18); font-size: 0.8rem; }
.pgm-md-row:first-of-type { border-top: 0; }
.pgm-md-row.thin { opacity: 0.55; }
.pgm-md-who { color: #11190C; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgm-md-track { position: relative; height: 16px; background: var(--panel); border-radius: 8px; }
.pgm-md-line { position: absolute; top: 50%; height: 2px; background: rgba(17, 25, 12, 0.18); transform: translateY(-50%); }
.pgm-md-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid #11190C; }
.pgm-md-dot.early { background: #787664; }
.pgm-md-dot.lev.ok { background: #17A05E; }
.pgm-md-dot.lev.bad { background: #C0392B; }
.pgm-md-lift { font-size: 0.72rem; color: #55513F; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgm-md-lift small { color: #787664; font-size: 0.6rem; display: block; }

/* ---- Player surfaces: NEW notices + the season-vault frame (2026-08-23) ---- */
/* (.iq-panel/.iq-hero dead code removed — playerDashboard renders .dsh now.) */
.new-count { display: inline-block; vertical-align: 2px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; background: var(--gold); color: var(--on-accent); border-radius: 999px; padding: 2px 9px; margin-left: 8px; }
.tile { position: relative; }
.tile-new { position: absolute; top: 8px; right: 8px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; background: var(--gold); color: var(--on-accent); border-radius: 999px; padding: 2px 8px; }
.tile-fresh { border-color: var(--gold); }
.fg-new { position: static; flex-shrink: 0; }
.fg-week { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dg-mist); margin: 12px 0 4px; }
.fg-week:first-child { margin-top: 2px; }
.fg-grp { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--dg-mist); border: 1px solid rgba(154,160,142,0.35); border-radius: 999px; padding: 1px 8px; }
/* The small Block header — panel-scale kicker · slab · bar (same anatomy). */
.pg-head-sm { margin: 18px 0 10px; }
.pg-head-sm .pg-title { font-size: 1.35rem; line-height: 1; }
.pg-head-sm .pg-bar { width: 44px; height: 5px; }
/* Ramp band chips inside the dark player instrument. */
.dsh-val.chip { padding: 1px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; }

/* ---- Coach: per-player Football IQ badge + phase line ---- */
.rs-iq { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; background: var(--gold); color: var(--on-accent); border-radius: 999px; padding: 2px 9px; }
.rs-iq.none { background: var(--panel); color: var(--mist); border: 1px solid var(--line); }
.rs-iqline { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -2px 0 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--mist); }
.rs-iqline b { color: var(--ink-accent); font-weight: 700; }
.rs-rows { display: grid; gap: 6px; }
.rs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.88rem; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--navy-deep); color: #11190C; }
.rs-score { color: var(--ink-accent); font-weight: 700; }
.rs-none { color: var(--mist); }

/* Install-readiness dashboard (coach, atop Player Results) */
.readiness { margin: 2px 0 22px; }
.rdx { display: flex; flex-direction: column; gap: 14px; }
.rdx-top { display: flex; align-items: center; gap: 16px; }
.rdx-ring { --v: 0; width: 78px; height: 78px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--v) * 1%), rgba(202, 196, 183, 0.16) 0); }
.rdx-ring i { width: 60px; height: 60px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; font-style: normal; }
.rdx-ring b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rdx-ring small { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); font-weight: 700; }
.rdx-verdict { font-size: 1.15rem; font-weight: 800; }
.rdx-sub { font-size: 0.85rem; color: var(--mist); }
.rdx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rdx-mod { background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.rdx-h { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mist); font-weight: 800; margin-bottom: 10px; }
.rdx-bar-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; margin: 7px 0; font-size: 0.85rem; }
.rdx-pos { font-weight: 800; color: var(--mist); }
.rdx-bar { height: 8px; border-radius: 99px; background: rgba(202, 196, 183, 0.14); overflow: hidden; }
.rdx-bar i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.rdx-bar i.low { background: var(--bad); }
.rdx-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rdx-miss { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 6px 0; }
.rdx-tri { color: var(--bad); font-size: 0.72rem; }
.rdx-n { margin-left: auto; font-size: 0.72rem; color: var(--mist); font-weight: 700; white-space: nowrap; }
.rdx-prow { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 6px 0; }
.rdx-ppos { color: var(--mist); font-size: 0.78rem; }
.rdx-chip { margin-left: auto; font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.rdx-chip.not { color: var(--mist); background: rgba(202, 196, 183, 0.1); }
.rdx-chip.risk { color: var(--bad); background: var(--bad-bg); }
.rdx-empty { color: var(--mist); background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
@media (max-width: 640px) { .rdx-grid { grid-template-columns: 1fr; } }

/* Assign / due dates / completion (coach result screen) */
.completion:empty { display: none; }
.completion { margin: 6px 0 4px; }
.cmp-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.cmp-ring { --pct: 0; position: relative; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(202, 196, 183, 0.16) 0); }
.cmp-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--navy); }
.cmp-ring span { position: relative; font-size: 0.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-sum { display: flex; flex-direction: column; gap: 3px; }
.cmp-big { font-size: 1rem; }
.cmp-late-t { color: var(--bad); font-weight: 700; }
.cmp-list { display: flex; flex-direction: column; }
.cmp-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.cmp-row:first-child { border-top: none; }
.cmp-name { display: flex; align-items: center; gap: 8px; }
.cmp-pos { color: var(--mist); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.cmp-chip { margin-left: auto; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.cmp-chip.cmp-done { color: var(--ink-accent); background: rgba(225, 255, 0, 0.12); }
.cmp-chip.cmp-late { color: var(--bad); background: var(--bad-bg); }
.cmp-chip.cmp-miss { color: var(--mist); background: rgba(202, 196, 183, 0.1); }
.tile-overdue { border-color: var(--bad) !important; }
/* Admin player-preview: assigned tiles are look-only (no take/submit as admin). */
.tile-preview { cursor: default; }
.tile-preview:hover { transform: none; }

/* Player flag button (on the graded quiz view) */
.flag-btn { margin-top: 10px; background: none; border: 1px solid var(--line); color: var(--mist);
  font: inherit; font-size: 0.76rem; font-weight: 700; padding: 5px 12px; border-radius: 99px; cursor: pointer; }
.flag-btn:hover { border-color: var(--gold); color: var(--white); }
.flag-btn.on { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }

/* Coach item analysis */
.analysis:empty { display: none; }
.ia-list { display: flex; flex-direction: column; }
.ia-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.ia-row:first-child { border-top: none; }
.ia-q { flex: 1; min-width: 0; }
.ia-topic { color: var(--mist); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 4px; }
.ia-miss { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mist); font-weight: 700; }
.ia-miss.hi { color: var(--bad); }
.ia-flags { white-space: nowrap; color: var(--bad); font-weight: 800; font-size: 0.8rem; }
.ia-tag { white-space: nowrap; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 99px; }
.ia-tag.ia-bad { color: var(--bad); background: var(--bad-bg); }
.ia-tag.ia-flag { color: var(--ink-accent); background: rgba(225, 255, 0, 0.12); }
.ia-tag.ia-hard { color: var(--mist); background: rgba(202, 196, 183, 0.1); }
/* The misconception line — the shared wrong answer a room holds. Sits under its
   question row, indented, as the coach's re-teach target. */
.ia-misc { font-size: 0.78rem; color: var(--ink-accent); background: rgba(225, 255, 0, 0.09);
  border-left: 2px solid var(--gold); border-radius: 0 6px 6px 0; padding: 6px 10px; margin: 2px 0 8px; }
.ia-misc-k { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.66rem; margin-right: 4px; }

/* Admin teams + member management */
.admin-create { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.admin-create .code-input { flex: 1; min-width: 200px; }

/* Coach invite + Accounts directory (admin console) */
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--ink-accent); border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 0.78rem; cursor: pointer; width: auto; white-space: nowrap; }
.btn.ghost:hover { border-color: var(--gold); }
.btn.ghost:disabled { opacity: 0.55; cursor: default; }
.invite-out { margin: 2px 0 4px; }
.invite-link { display: flex; gap: 8px; align-items: center; }
.invite-link .code-input { flex: 1; min-width: 150px; font-size: 0.8rem; }
.dir-team { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--navy); }
.dir-team-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dir-team-name { font-size: 0.98rem; }
.dir-code { display: inline-flex; align-items: center; gap: 5px; }
.dir-code-lbl { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; color: var(--mist); }
.dir-code-in { width: 118px; background: var(--input); border: 1px solid var(--line); color: var(--white); border-radius: 7px; padding: 5px 8px; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.dir-count { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--mist); }
.dir-members { padding: 4px 14px 10px; }
.dir-empty { color: var(--mist); font-size: 0.82rem; padding: 8px 0 2px; }
.dir-member { display: grid; grid-template-columns: 62px minmax(0,1.2fr) minmax(0,1.5fr) auto auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.85rem; }
.dir-member:first-child { border-top: 0; }
.dir-role { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 2px 6px; text-align: center; }
.dir-role.head { background: var(--gold); color: var(--on-accent); }
.dir-role.coach { background: rgba(225,255,0,0.14); color: var(--ink-accent); border: 1px solid var(--gold); }
.dir-role.admin { background: var(--navy); color: var(--ink-accent); border: 1px solid var(--gold); }
.dir-role.player { background: rgba(85,81,63,0.12); color: var(--ink-accent); }
.dir-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-name small { font-weight: 400; color: var(--mist); }
.dir-email { color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-unconf { color: var(--bad); font-style: normal; font-size: 0.72rem; }
.dir-last { font-family: var(--mono); font-size: 0.72rem; color: var(--mist); white-space: nowrap; }
@media (max-width: 640px) {
  .dir-member { grid-template-columns: 54px 1fr auto; }
  .dir-email, .dir-last { grid-column: 2 / -1; font-size: 0.78rem; }
}
.mem-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--navy); }
.mem-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mem-role { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 999px; padding: 2px 8px; }
.mem-role.coach { background: var(--gold); color: var(--on-accent); }
.mem-role.admin { background: var(--navy); color: var(--ink-accent); border: 1px solid var(--gold); }
.mem-btn { background: none; border: 1px solid var(--gold); color: var(--ink-accent); border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.mem-btn:hover:not(:disabled) { background: rgba(225,255,0,0.14); }
.mem-btn:disabled { opacity: 0.6; cursor: default; }
/* Remove — the one destructive roster action; red border so it never reads as
   just another edit button, and never sits first in the row. */
.mem-btn.mem-remove { border-color: var(--low, #FF7D72); color: var(--low, #FF7D72); }
.mem-btn.mem-remove:hover:not(:disabled) { background: rgba(255,125,114,0.12); }

/* Admin billing ledger — one row per team; the warnings carry the meaning */
.bill-row { background: var(--navy); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.bill-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
/* The money trail (CJ 2026-08-23): per-team spend line + the program rollup. */
.bill-spend { flex-basis: 100%; font-size: 0.76rem; color: var(--mist); }
.bill-spend b { color: var(--ink-accent); }
.bill-pgm { margin: 0 0 10px; }
.bill-pgm strong { color: var(--ink-accent); }
/* Weekly spend table (admin billing) — by game week, newest first. */
.bill-wk { margin: 0 0 12px; overflow-x: auto; }
.bill-wk table { border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.bill-wk th { text-align: left; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); padding: 2px 18px 4px 0; }
.bill-wk td { padding: 3px 18px 3px 0; border-top: 1px solid var(--line); color: var(--ink-accent); }
/* Coach usage meter — what's LEFT, never a dollar (CJ 2026-08-23). */
.use-meter { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--mist); }
.use-meter.low { color: var(--ink-low); font-weight: 700; }
.use-meter.out { color: var(--ink-low); font-weight: 700; }
.use-track { display: inline-block; width: 88px; height: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
.use-track i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.use-meter.low .use-track i, .use-meter.out .use-track i { background: var(--ink-low); }
.tile-usage { display: block; margin-top: 8px; }
.tile-usage .use-meter { font-size: 0.72rem; }
/* THE WORK MAP — contribution grid, gold intensity (fills only). */
.wm { margin-bottom: 18px; }
.wm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wm-pill { background: var(--navy); border: 1px solid var(--line); color: var(--ink-accent); font: inherit; font-size: 0.74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.wm-pill.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.wm-card { background: var(--navy); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.wm-total { font-size: 0.85rem; color: var(--mist); margin-bottom: 10px; }
.wm-total strong { color: var(--ink-accent); font-size: 1rem; }
.wm-scroll { overflow-x: auto; padding-bottom: 4px; }
.wm-rail { display: grid; grid-auto-columns: 13px; grid-auto-flow: column; gap: 3px; margin-left: 34px; font-size: 0.62rem; color: var(--mist); height: 14px; }
.wm-mon { grid-row: 1; white-space: nowrap; }
.wm-grid { display: flex; gap: 3px; }
.wm-days { display: flex; flex-direction: column; justify-content: space-between; width: 30px; flex-shrink: 0; font-size: 0.62rem; color: var(--mist); padding: 14px 0 1px; }
.wm-col { display: flex; flex-direction: column; gap: 3px; }
.wm-cell { display: block; width: 13px; height: 13px; border-radius: 3px; background: var(--panel); border: 1px solid rgba(17, 25, 12, 0.06); }
.wm-l1 { background: rgba(225, 255, 0, 0.28); }
.wm-l2 { background: rgba(225, 255, 0, 0.5); }
.wm-l3 { background: rgba(209, 154, 24, 0.55); }
.wm-l4 { background: #D19A18; }
.wm-future { background: transparent; border-color: transparent; }
.wm-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 0.68rem; color: var(--mist); margin-top: 8px; }
/* FEEL IT FIRST — the coach-invite 3-rep taste (CJ 2026-08-23). */
.taste-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.taste-skip { flex-shrink: 0; }
.taste-q { margin-bottom: 16px; }
.taste-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.taste-choice { text-align: left; background: var(--navy); border: 1px solid var(--line); color: var(--ink-accent); font: inherit; font-weight: 600; padding: 12px 14px; border-radius: 10px; cursor: pointer; min-height: 44px; }
.taste-choice:hover { border-color: var(--gold); }
.taste-choice.good { border-color: var(--gold); background: rgba(225, 255, 0, 0.14); font-weight: 800; }
.taste-choice.bad { opacity: 0.55; text-decoration: line-through; }
.taste-choice:disabled { cursor: default; }
.taste-exp { margin: 0 0 12px; }
.taste-sum { margin: 0 0 16px; }
/* The 5-hour player nudge + 2-hour coach alert (in-app only). */
.tile-urgent { border-color: var(--ink-low); }
.tile-wait { position: absolute; bottom: 8px; right: 8px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; background: #F7E2E0; color: var(--ink-low); border-radius: 999px; padding: 2px 8px; }
.kpi-alert { grid-column: 1 / -1; font-size: 0.8rem; color: var(--ink-low); font-weight: 600; }
.kpi-alert b { font-weight: 800; }
/* Quiz manage (edit/delete) on the result screen. */
.result-manage-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
/* Starter Pack shelf (CJ curates; distribution comes later). */
.pack-row { display: flex; align-items: center; gap: 10px; background: var(--navy); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.pack-n { min-width: 22px; font-weight: 800; color: var(--mist); }
.pack-t { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-q { font-size: 0.78rem; color: var(--mist); flex-shrink: 0; }
.bill-flag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--mist); }
.bill-flag.on { border-color: var(--gold); color: var(--white); }
.bill-warn { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(255,125,114,0.16); color: var(--low, #FF7D72); border-radius: 999px; padding: 2px 9px; }
.bill-due { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(225,255,0,0.2); color: var(--white); border-radius: 999px; padding: 2px 9px; }
.bill-fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bill-fields .code-input { margin: 0; flex: 0 1 auto; width: auto; min-width: 110px; font-size: 0.82rem; }
.bill-note { flex: 1 1 200px !important; }
.bill-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--mist); text-transform: uppercase; letter-spacing: 0.05em; }

/* ESPN-style top-10 ticker */
.ticker {
  display: flex; align-items: stretch; overflow: hidden; margin: 0 0 16px;
  background: var(--navy); border: 1px solid var(--line); border-radius: 8px;
  border-left: 3px solid var(--gold);
}
.ticker.hidden { display: none; }
.tk-label {
  flex: none; display: flex; align-items: center; padding: 8px 12px;
  background: var(--gold); color: var(--on-accent);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  white-space: nowrap;
}
.tk-scroll { overflow: hidden; flex: 1; display: flex; align-items: center; }
.tk-track {
  display: inline-flex; align-items: center; white-space: nowrap; will-change: transform;
  animation: tk-move 40s linear infinite;
}
.tk-scroll:hover .tk-track { animation-play-state: paused; }
@keyframes tk-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk-item { font-family: var(--mono); font-size: 0.74rem; color: var(--white); letter-spacing: 0.04em; padding: 0 6px; }
.tk-item b { color: var(--ink-accent); font-weight: 700; margin-right: 4px; }
.tk-pos { color: var(--mist); font-size: 0.66rem; }
.tk-score { color: var(--ink-accent); font-weight: 700; }
.tk-sep { color: var(--mist); font-size: 0.6rem; padding: 0 8px; }

/* Roster: SPT unit tags + inline profile editor */
.mem-unit {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em;
  color: var(--ink-accent); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.mem-edit {
  border: 1px solid var(--gold); border-radius: 10px; padding: 14px;
  margin: -2px 0 8px; background: var(--navy-deep);
}
.mem-edit-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

/* Flash cards — timed 3-part test */
.vt-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.72rem; color: var(--mist); margin-bottom: 6px; }
.vt-level { color: var(--ink-accent); letter-spacing: 0.06em; }
.vt-timer { height: 6px; border-radius: 999px; background: var(--panel); overflow: hidden; margin-bottom: 16px; }
.vt-timer-bar { height: 100%; width: 100%; background: var(--gold); transition: width 0.05s linear; }
.vt-ask { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; }
.vt-prompt-term { font-size: 2rem; font-weight: 700; text-align: center; padding: 20px 10px; border: 1px solid var(--gold); border-radius: 14px; background: var(--navy); margin-bottom: 18px; }
.vt-prompt-def { font-size: 1.15rem; line-height: 1.5; text-align: center; padding: 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--navy); margin-bottom: 18px; }
#vt-prompt-img { max-width: 420px; margin: 0 auto 18px; }
.vt-opts { display: grid; gap: 10px; }
.vt-opts-img { grid-template-columns: 1fr 1fr; }
.vt-opt {
  font: inherit; font-size: 1.05rem; font-weight: 700; text-align: left; color: var(--white);
  background: var(--navy); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; cursor: pointer;
}
.vt-opt:hover:not(:disabled) { border-color: var(--gold); }
.vt-opt-img { padding: 6px; }
.vt-opt.correct { border-color: #23522F; background: rgba(76,154,94,0.22); }
.vt-opt.wrong { border-color: var(--red); background: rgba(226,75,74,0.2); }
.vt-diagram { pointer-events: none; }
.vt-opt-img .vt-diagram { margin: 0; }

/* Flash cards — browse (study flip) */
.fc-card {
  position: relative; width: 100%; max-width: 460px; min-height: 200px;
  margin: 8px 0 14px; cursor: pointer; border-radius: 14px;
  border: 1px solid var(--line); background: var(--navy);
  display: grid; place-items: center; padding: 26px 22px; text-align: center;
}
.fc-card:hover { border-color: var(--gold); }
.fc-front, .fc-back { display: none; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.fc-card:not(.flipped) .fc-front { display: flex; }
.fc-card.flipped { background: var(--navy-deep); border-color: var(--gold); }
.fc-card.flipped .fc-back { display: flex; }
.fc-cat {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-accent);
}
.fc-term { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.fc-aka { font-size: 0.82rem; color: var(--mist); font-style: italic; }
.fc-tap { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--mist); margin-top: 10px; text-transform: uppercase; }
.fc-def { font-size: 1.02rem; line-height: 1.55; color: var(--white); }
.fc-nav { display: flex; align-items: center; gap: 12px; max-width: 460px; }
.fc-count { font-family: var(--mono); font-size: 0.8rem; color: var(--mist); }

/* Timed 3-part flashcard test */
#vocab-body { position: relative; } /* anchor for the streak flash */
.vt-top { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 4px 0 6px; }
.vt-count, .vt-level { font-family: var(--mono); font-size: 0.72rem; color: var(--mist); letter-spacing: 0.04em; }
.vt-level { margin-left: auto; }
.vt-streak {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid;
}
.vt-streak.heating { color: #5E4700; border-color: #5E4700; }
.vt-streak.onfire { color: #6B4600; border-color: #6B4600; }
.vt-streak.enfuego { color: #7A2711; border-color: #7A2711; background: rgba(255,77,46,0.12); }
.vt-timer { max-width: 560px; height: 6px; background: var(--navy); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.vt-timer-bar { height: 100%; width: 100%; background: var(--gold); transition: width 0.05s linear; }
.vt-ask { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-accent); margin-bottom: 8px; }
.vt-prompt-term { font-size: 1.7rem; font-weight: 700; margin-bottom: 16px; }
.vt-prompt-def { font-size: 1.1rem; line-height: 1.5; margin-bottom: 16px; max-width: 560px; }
#vt-prompt-img { max-width: 360px; margin-bottom: 16px; }
.vt-opts { display: grid; gap: 10px; max-width: 560px; }
.vt-opts-img { grid-template-columns: 1fr 1fr; }
.vt-opt {
  text-align: left; padding: 12px 14px; border-radius: 10px; font: inherit; font-size: 0.95rem;
  border: 1px solid var(--line); background: var(--navy); color: var(--white); cursor: pointer;
}
.vt-opt:hover:not(:disabled) { border-color: var(--gold); }
.vt-opt-img { padding: 6px; }
.vt-diagram { pointer-events: none; }
.vt-opt.correct { border-color: #23522F; background: rgba(76,154,94,0.2); }
.vt-opt.wrong { border-color: var(--red); background: rgba(226,75,74,0.22); }
.vt-flash {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%);
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.1em; font-size: 1.8rem;
  padding: 10px 22px; border-radius: 12px; pointer-events: none; z-index: 40;
  animation: vt-pop 0.9s ease-out forwards;
}
.vt-flash.heating { color: #5E4700; }
.vt-flash.onfire { color: #6B4600; }
.vt-flash.enfuego { color: #7A2711; text-shadow: 0 0 18px rgba(255,77,46,0.8); }
@keyframes vt-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.7); } 20% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-58%) scale(1); } }
.vt-fuego-banner {
  text-align: center; font-family: var(--mono); font-weight: 700; letter-spacing: 0.12em;
  color: #7A2711; border: 1px solid #7A2711; background: rgba(255,77,46,0.12);
  border-radius: 12px; padding: 12px; margin-bottom: 14px; text-shadow: 0 0 14px rgba(255,77,46,0.6);
}

/* Leaderboard */
.lb-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.lb-chip-sep {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--mist); padding: 0 2px 0 8px; border-left: 1px solid var(--line);
}
/* Compact top-10 rows (CJ 2026-08-22 late): the honor roll reads at a glance —
   tighter padding, smaller rank digits, less air between rows. */
.lb-row {
  display: flex; align-items: center; gap: 10px; background: var(--navy);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; margin-bottom: 4px;
}
.lb-row.top { border-color: var(--gold); }
.lb-rank {
  font-family: var(--mono); font-weight: 700; font-size: 0.78rem; color: var(--mist);
  width: 20px; flex: none; text-align: center;
}
.lb-row.top .lb-rank { color: var(--ink-accent); }
.lb-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.lb-stats { margin-left: auto; text-align: right; display: grid; gap: 1px; }
.lb-week { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--ink-accent); }
.lb-sub { font-family: var(--mono); font-size: 0.64rem; color: var(--mist); letter-spacing: 0.03em; }

/* App-drawn field diagrams */
/* The field is the dark instrument, so it takes --dg-ground, NOT the page
   ground — --navy-deep is now near-white and would render the field as a white
   box with invisible chalk. */
.fld-wrap {
  max-width: 480px; width: 100%; background: var(--dg-ground);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin: 4px 0 10px;
}
.fld-wrap svg { display: block; }

/* Rule-engine diagrams (lib/diagram.js). Wider than .fld-wrap because the
   viewBox is 820x570, not 400x264 — a 480px cap would shrink tap targets
   further than they already are. The field paints its own Bolt-Black ground. */
.dg-wrap {
  max-width: 640px; width: 100%;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  margin: 4px 0 10px;
}
.dg-wrap svg { display: block; width: 100%; }

/* Visual (tap-on-the-play) questions */
.vq-add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vq-add-row label.mem-btn { display: inline-block; }
.vq-thumb-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vq-thumb {
  background: var(--navy); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; cursor: pointer; display: grid; gap: 4px; justify-items: center;
}
.vq-thumb:hover { border-color: var(--gold); }
.vq-thumb img { width: 86px; height: auto; border-radius: 4px; display: block; }
.vq-thumb span { font-family: var(--mono); font-size: 0.62rem; color: var(--mist); }
.vq-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  margin: 0 0 12px; background: var(--navy); display: grid; gap: 10px;
  justify-items: start;
}
.vq-status { font-size: 0.78rem; border-radius: 999px; padding: 4px 12px; }
.vq-status.ok { color: var(--ok); border: 1px solid var(--ok); background: rgba(76,154,94,0.14); }
.vq-status.warn { color: #54421D; border: 1px solid #8a6d2f; background: rgba(225,255,0,0.12); }
.vq-prompt { max-width: 420px; margin: 0; }
.vq-canvas {
  position: relative; max-width: 480px; width: 100%; cursor: crosshair;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.vq-canvas img { width: 100%; display: block; }
.vq-canvas.drawing { cursor: crosshair; touch-action: none; }
.vq-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; /* the canvas div handles the pointer events */
}
.vq-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 999px;
  transform: translate(-50%, -50%); pointer-events: none; box-sizing: border-box;
}
.vq-dot.chosen { border: 3px solid var(--gold); background: rgba(225,255,0,0.35); }
.vq-dot.ok { border: 3px solid #23522F; background: rgba(76,154,94,0.4); }
.vq-dot.bad { border: 3px solid var(--red); background: rgba(226,75,74,0.4); }
.vq-target {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  border: 2px dashed #23522F; border-radius: 999px; box-sizing: border-box;
}

/* HUD dashboard (home) — the "mono" slots also use Atkinson (all-one-typeface
   brand rule); the technical feel comes from the letterspacing + uppercase. */
/* Ramp: the real mono face. Re-pointing this one var upgrades every eyebrow,
   label and stat figure in the app at once, since they all already use it. */
:root { --mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Ramp: large headings take the display face — headings only, never UI text. */
h1, h2, .pick-title, .hud-title, .home-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
/* Any live-updating figure must be tabular or the layout jitters on each tick. */
.iq-hero-num, .price, .stat-box .num { font-variant-numeric: tabular-nums; }
.hud-head { padding: 4px 0 2px; margin-bottom: 12px; }
.hud-kicker {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-accent);
}
.hud-kicker::before { content: '// '; opacity: 0.55; }
.hud-title { font-size: 1.55rem; font-weight: 800; margin: 3px 0 6px; letter-spacing: -0.01em; }
.hud-meta {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: 0.7rem; color: var(--mist); letter-spacing: 0.06em;
}
.hud-meta .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: #3fd68f; margin-right: 7px; vertical-align: 1px;
}
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 0 0 20px;
}
.kpi {
  position: relative; background: var(--navy); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px 11px; overflow: hidden;
}
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 2px;
  background: var(--gold);
}
.kpi::after {
  content: ''; position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); opacity: 0.45;
}
.kpi-label {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist);
}
.kpi-value { font-family: var(--mono); font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin-top: 3px; }
.kpi-sub { font-family: var(--mono); font-size: 0.64rem; color: var(--mist); letter-spacing: 0.04em; }

/* ---- Admin: "Viewing team" selector ---- */
.admin-viewbar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
}
.admin-viewbar-lbl { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-accent); }
.admin-viewbar select.code-input { max-width: 260px; margin: 0; padding: 8px 10px; }
.admin-viewbar-hint { font-family: var(--mono); font-size: 0.7rem; color: var(--mist); letter-spacing: 0.04em; }

/* ---- Consent row (signup) + Terms & Privacy text ---- */
.consent-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 0.8rem; color: var(--mist); line-height: 1.45; margin: 2px 0; }
.consent-row input[type="checkbox"] { margin-top: 2px; flex: none; width: 17px; height: 17px; accent-color: var(--ink-accent); cursor: pointer; }
.consent-row .linklike { font-size: 0.8rem; }
.legal-p { color: var(--mist); font-size: 0.92rem; line-height: 1.6; margin: 0 0 14px; max-width: 62ch; }
.legal-p strong { color: var(--white); }

/* ---- Coach first-run onboarding card ---- */
.onboard-card { background: var(--navy); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.onboard-steps { list-style: none; counter-reset: step; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.onboard-steps li { position: relative; padding-left: 40px; counter-increment: step; }
.onboard-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: var(--on-accent); font-family: var(--mono); font-weight: 700;
  display: grid; place-items: center; font-size: 0.85rem;
}
.onboard-steps strong { display: block; font-size: 0.95rem; }
.onboard-steps span { display: block; color: var(--mist); font-size: 0.82rem; line-height: 1.45; margin-top: 2px; }

/* Theme switcher */
#theme-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 44px; height: 44px; border-radius: 999px; font-size: 1.15rem;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
#theme-btn:hover { border-color: var(--gold); }
#theme-panel {
  position: fixed; right: 16px; bottom: 68px; z-index: 60; width: 250px;
  background: var(--navy); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); display: grid; gap: 4px;
}
#theme-panel.hidden { display: none; }
.theme-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 9px; cursor: pointer; font: inherit; color: var(--white); text-align: left;
}
.theme-row:hover { background: var(--panel); }
.theme-row.on { border-color: var(--gold); }
.theme-dots { display: inline-flex; gap: 3px; flex: none; }
.theme-dots i {
  width: 12px; height: 12px; border-radius: 999px; display: inline-block;
  border: 1px solid rgba(255,255,255,0.25);
}
.theme-name { font-weight: 700; font-size: 0.85rem; }
.theme-hint { color: var(--mist); font-size: 0.68rem; margin-left: auto; text-align: right; }

/* Training topic outline (layout only) */
.topic-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; background: var(--navy); }
.topic-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.topic-head strong { font-size: 0.98rem; }
.topic-num { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--panel); color: var(--ink-accent); font-size: 0.78rem; font-weight: 700; border: 1px solid var(--line); }
.topic-soon { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.topic-card p { color: var(--mist); font-size: 0.85rem; line-height: 1.5; margin: 0; padding-left: 34px; }

@media (max-width: 560px) {
  .entry-wrap { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- GRADE RAMP
   How a 0-99 rating reads as colour. See lib/ramp.js for the band logic and
   docs/dashboard-rules.md D-10 for why band 0 is one flat red rather than the
   bottom of a gradient.

   Each band is an INK on a matching WASH. Both sides are declared here so the
   pair is a closed system: lib/contrast.test.js checks text against its own
   background, and a chip that carries its own ground cannot be broken by
   whatever surface it is dropped onto. Measured 2026-08-04 — every pair clears
   WCAG AA (4.5:1) against its own wash, worst case 4.50.

   Band 0 reuses --ink-low, the red already ratified for light chrome. No new
   red is introduced; D-10's "one red per surface" still holds. */
:root {
  --g0-ink: #8E2016;  --g0-bg: #F7E2E0;   /* below 70 — D-10's line */
  --g1-ink: #936509;  --g1-bg: #F7F0E0;   /* 70-77 */
  --g2-ink: #567B0E;  --g2-bg: #F0F7E0;   /* 78-85 */
  --g3-ink: #108019;  --g3-bg: #E0F7E2;   /* 86-93 */
  --g4-ink: #0A7E4E;  --g4-bg: #E0F7EE;   /* 94-99 */
}

.g-0, .g-1, .g-2, .g-3, .g-4, .g-none {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-weight: 800; font-variant-numeric: tabular-nums;
  border-radius: 6px; padding: 2px 8px;
  border: 1px solid currentColor;
}
.g-0 { color: var(--g0-ink); background: var(--g0-bg); }
.g-1 { color: var(--g1-ink); background: var(--g1-bg); }
.g-2 { color: var(--g2-ink); background: var(--g2-bg); }
.g-3 { color: var(--g3-ink); background: var(--g3-bg); }
.g-4 { color: var(--g4-ink); background: var(--g4-bg); }

/* NOT YET — an unscored player is not a failing player (D-07/D-10). No ramp
   colour, no border weight, nothing that reads as a judgement. */
.g-none {
  color: var(--mist); background: transparent;
  border-color: var(--line); font-weight: 600;
}

/* ------------------------------------------------------------- SIDES STRIP
   The head coach's three rows at the top of the merged roster/leaderboard.
   Tapping one re-scopes the ranked list beneath it — the drill-down that makes
   the roster and the leaderboard one component instead of two screens. */
.lb-sides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.side-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--navy); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; text-align: left; min-width: 0;
}
.side-tile.on { border-color: var(--gold); }
.side-key { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; color: var(--mist); }
.side-val { font-size: 1.05rem; }
.side-cov { font-size: 0.66rem; color: var(--mist); letter-spacing: 0.02em; }

@media (max-width: 420px) {
  .side-tile { padding: 8px 9px; }
  .side-cov { font-size: 0.6rem; }
}

/* ----------------------------------------------------------- CHILD STRIP
   One step under the open side: position rooms for OFF/DEF, units for SPT.
   Scrolls sideways rather than wrapping — eight units must not push the
   player list off a phone screen. */
.lb-kids { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; }
.lb-kids:empty { display: none; margin: 0; }
.kid-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  flex: 0 0 auto; background: var(--navy); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; cursor: pointer; text-align: left;
}
.kid-tile.on { border-color: var(--gold); }
.kid-key { font-size: 0.63rem; font-weight: 800; letter-spacing: 0.08em; color: var(--mist); white-space: nowrap; }
.kid-val { font-size: 0.85rem; }
.kid-cov { font-size: 0.6rem; color: var(--mist); }

/* A player no side claims. Spans the whole strip rather than becoming a fourth
   grid column. Not styled as an error — it is an accounting fact a coach can
   act on, and it is absent entirely when the roster is clean. */
.side-strays {
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: 0.68rem; line-height: 1.4; color: var(--mist);
}

/* ========================================================== RANK CARDS
   The coordinator's grid: one titled panel per room or unit, each with its
   own players ranked inside. Modelled on ScoutSZN's Position Rankings —
   parallel cards beat tap-tap-tap, because a DC wants all his rooms at once.

   Sized for a REAL roster (~120 players, CJ 2026-08-04): each card shows its
   top ten and states its depth, so a twelve-deep corner room does not push
   every other room off the screen. */
.rank-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px; margin: 0 0 14px;
}
.rank-grid:empty { display: none; margin: 0; }

/* The room accents. The three defensive values ARE diagram-rules.md §5's level
   tints — front / box / secondary — darkened until each clears 3:1 on both the
   card (#FAF9F7) and the ground (#CAC4B7). The originals do not survive light
   chrome: the box teal #14b8a6 measures 1.43:1 on the ground. Offence has no
   level convention to inherit, so it carries one family of its own. */
:root {
  --acc-front: #D8150E;   /* DL, DE   — the diagram's front red */
  --acc-box:   #0A7A6B;   /* LB       — the diagram's box teal */
  --acc-sec:   #1565E6;   /* CB, SAF  — the diagram's secondary blue */
  --acc-off:   #AB5509;   /* QB RB TE WR OL */
  --acc-spt:   #9C42C8;   /* K P LS and every unit */
}

.rank-card {
  background: var(--navy); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; min-width: 0;
}
.rank-card.on { border-color: var(--gold); }

.rank-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--panel); cursor: pointer; width: 100%;
  border: 0; text-align: left;
  /* Same iOS-blue trap as .tile: a <button> whose text child (.rank-title) has
     no colour of its own gets the system link tint on a phone. Set brand ink on
     the button; .rank-depth keeps its own --mist override. */
  color: var(--ink-accent);
}
/* The accent is the play diagram's LEVEL colour, not a new position palette:
   front / box / secondary read the same here as on every play diagram the
   same coach looks at (diagram-rules.md §5, lib/scope.js LEVEL_OF_POSITION).
   Darkened for light chrome — measured 2026-08-04, each clears 3:1 on both
   the card and the ground, the bar being a graphical object rather than text. */
.rank-accent { width: 4px; height: 17px; border-radius: 2px; flex: 0 0 auto; }
.acc-front { background: var(--acc-front); }
.acc-box   { background: var(--acc-box); }
.acc-sec   { background: var(--acc-sec); }
.acc-off   { background: var(--acc-off); }
.acc-spt   { background: var(--acc-spt); }

.rank-title {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0;
}
.rank-depth { margin-left: auto; font-size: 0.6rem; color: var(--mist); white-space: nowrap; }
/* With a total present, IT takes the auto margin and the coverage tucks after it. */
.rank-total + .rank-depth { margin-left: 8px; }

.rank-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px; border-top: 1px solid var(--line);
}
.rank-n { flex: 0 0 16px; font-size: 0.66rem; color: var(--mist); font-variant-numeric: tabular-nums; }
/* PAGE HEADERS — "Block" (CJ ratified 2026-08-22 from the four options):
   kicker · slab · Lightning-Yellow bar. One system for every page title. */
.pg-head { margin: 2px 0 16px; }
.pg-kick { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--mist); }
.pg-title { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; color: var(--white); margin: 2px 0 8px; }
.pg-bar { width: 64px; height: 7px; background: var(--gold); }

/* The leaderboard filter matrix (CJ's drawing): one pill per scope, side pills
   lead their row and read heavier than their positions. The TEAM average sits
   in the big box across from the matrix (top right); it wraps under on phones. */
.lbf-top { display: flex; gap: 14px; align-items: stretch; justify-content: space-between; flex-wrap: wrap; margin: 12px 0; }
.lbf-rows { display: grid; gap: 6px; align-content: start; }
.lbf-row { display: flex; gap: 6px; flex-wrap: wrap; }
.lbf-side { font-weight: 800; letter-spacing: 0.05em; }
.lb-team-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 158px; padding: 12px 20px; background: var(--navy);
  border: 1px solid var(--line); border-radius: 12px; flex: 0 1 auto;
}
.lb-team-box .ltb-k { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; color: var(--mist); }
.lb-team-box .ltb-v { font-family: var(--mono); font-weight: 800; font-size: 2.1rem; line-height: 1; padding: 4px 12px; border-radius: 10px; }
.lb-team-box .ltb-c { font-size: 0.6rem; color: var(--mist); }
.lb-team-box .ltb-mid { display: flex; align-items: center; gap: 10px; }
.lb-team-box .ltb-trend { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink-accent); }
.lb-team-box .ltb-trend i { font-style: normal; font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }

/* CJ's position color chart — the legend bar above the depth chart. 1:1
   spacing (every position gets the same share of the bar, like the reference),
   dressed in the site's own chrome, not a foreign black strip. */
/* T1 is the standard (CJ 2026-08-23): the legend goes flat like the huddle's
   spot headers — no pill shell, same even spread on the open ground. */
.pos-legend { display: flex; justify-content: space-between; align-items: center; padding: 9px 2px; margin: 0 0 12px; overflow-x: auto; }
.pos-leg-item { display: inline-flex; align-items: center; gap: 6px; flex: 1 0 auto; justify-content: center; font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--white); }

/* Position ID bar (CJ 2026-08-22) — a functional color layer, same sanction as
   the grade ramp. Identity at a glance; the text still names the position. */
.pos-bar { display: inline-block; flex: 0 0 4px; width: 4px; height: 14px; border-radius: 1px; }
/* The side card's oval total — the drawing's "TOTAL OFF" made typographic. */
.rank-total { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rank-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rank-name {
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rank-sub { font-size: 0.6rem; color: var(--mist); letter-spacing: 0.04em; }
.rank-row .rank-val { margin-left: auto; flex: 0 0 auto; font-size: 0.78rem; }

/* Depth beyond the top ten. A count, never a truncation the reader can't see. */
.rank-more {
  padding: 6px 12px; border-top: 1px solid var(--line);
  font-size: 0.62rem; color: var(--mist);
}
/* An empty room is a coaching gap, not a blank card. */
.rank-empty { padding: 12px; font-size: 0.68rem; color: var(--mist); }

/* --------------------------------------------------------- STAFF SCOPES
   What a coach actually runs, on his roster row (D-21). Distinct from
   .mem-unit (a PLAYER's special-teams assignments) — these say who coaches,
   not who plays, so they carry the accent rather than the muted treatment. */
.mem-scope {
  display: inline-block; margin-left: 5px; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); background: var(--panel);
}
/* The head coach reads differently because his reach is the whole program. */
.mem-scope.hc { border-color: var(--gold); }
.staff-head {
  margin: 0 0 10px; font-size: 0.72rem; color: var(--mist);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------- SHARE QR
   Bridges desktop→phone: scan on the phone that holds the group chat, then
   share from there. The Copy button stays as the guaranteed fallback. */
.share-qr-btn { max-width: 120px; margin: 0; }
.share-qr { margin-top: 12px; text-align: center; }
.share-qr canvas {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; image-rendering: pixelated; /* keep module edges crisp */
}

/* ====================================================== PRODUCTION FACE v01
   SIQ Mock v05 translated onto the existing engine hooks. This layer owns
   hierarchy, rhythm and responsive chrome only. Runtime state, screen routing,
   ids and data attributes remain untouched. */

html {
  background: var(--panel);
  color-scheme: light;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--panel);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.screen.active {
  min-height: 100vh;
}

/* Current shell: refined now, then retained as the compatibility layer while
   Claude exposes the app-shell hooks requested in docs/face-requests/. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 68px;
  padding: 0 clamp(16px, 3vw, 36px);
  background: var(--navy);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(17, 25, 12, 0.04);
}

.topbar .brand {
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar .who {
  flex: 0 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.pill {
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.2;
}

.signout {
  min-height: 38px;
  padding: 8px 12px;
  border-color: var(--line);
  border-radius: 7px;
  color: var(--white);
  font-weight: 700;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.signout:hover {
  background: var(--panel);
  border-color: var(--dim);
}

.home-wrap {
  width: min(100%, 1240px);
  max-width: none;
  padding: clamp(26px, 4vw, 48px) clamp(16px, 3.5vw, 46px) 88px;
}

.pg-head {
  margin: 0 0 28px;
}

.pg-kick {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
}

.pg-title {
  max-width: 18ch;
  margin: 5px 0 10px;
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  letter-spacing: -0.02em;
}

.pg-bar {
  width: 58px;
  height: 6px;
}

.hud-head {
  margin-bottom: 22px;
  padding: 0;
}

.hud-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--mist);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}

.hud-kicker::before {
  width: 25px;
  height: 4px;
  flex: 0 0 auto;
  background: var(--gold);
  content: '';
  opacity: 1;
}

.hud-title,
.home-title {
  margin: 7px 0 8px;
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  letter-spacing: -0.025em;
}

.hud-meta {
  gap: 10px 22px;
  font-size: 0.72rem;
  line-height: 1.45;
}

.section-title {
  gap: 10px;
  margin: 32px 0 14px;
  color: var(--mist);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.section-title::before {
  width: 24px;
  height: 4px;
  flex: 0 0 auto;
  background: var(--gold);
  content: '';
  opacity: 1;
}

.section-title::after {
  background: var(--line);
}

.kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.kpi {
  min-height: 112px;
  padding: 18px;
  background: var(--navy);
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(17, 25, 12, 0.045);
}

.kpi::before {
  width: 42px;
  height: 3px;
}

.kpi::after {
  content: none;
}

.kpi-label {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}

.kpi-value {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1;
}

.kpi-sub {
  margin-top: 6px;
  line-height: 1.4;
}

.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.tile {
  min-height: 118px;
  padding: 20px 20px 18px;
  background: var(--navy);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(17, 25, 12, 0.045);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease);
}

.tile::after {
  right: 14px;
  bottom: 14px;
  width: 10px;
  height: 10px;
  opacity: 0.45;
}

.tile:hover {
  border-color: var(--dim);
  box-shadow: 0 16px 38px rgba(17, 25, 12, 0.075);
  transform: translateY(-1px);
}

.tile h3 {
  max-width: calc(100% - 32px);
  margin-bottom: 7px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.tile p {
  max-width: 38ch;
  font-size: 0.84rem;
  line-height: 1.5;
}

.btn {
  min-height: 44px;
  border-radius: 7px;
  transition: box-shadow 140ms var(--ease), filter 140ms var(--ease), transform 140ms var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-gold {
  box-shadow: 0 8px 20px rgba(17, 25, 12, 0.09);
}

.code-input,
.text-input,
select.code-input {
  min-height: 44px;
  border-radius: 7px;
}

.onboard-card,
.topic-card,
.aud-group,
.aud-summary,
.share-row,
.rank-card,
.lb-team-box,
.side-tile,
.kid-tile {
  box-shadow: 0 10px 26px rgba(17, 25, 12, 0.035);
}

/* Claude handoff canvas: harmless until the requested hooks are emitted. */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  background: var(--panel);
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 100vh;
  padding: 24px 14px 16px;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  border-right: 1px solid var(--line);
}

.app-brand {
  min-height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.app-nav {
  margin-top: 28px;
}

.app-nav-group + .app-nav-group {
  margin-top: 22px;
}

.app-nav-label {
  display: block;
  padding: 0 12px 8px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.app-nav-item {
  position: relative;
  width: 100%;
  min-height: 43px;
  margin: 2px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--mist);
  cursor: pointer;
  text-align: left;
}

.app-nav-item:hover {
  background: var(--panel);
  color: var(--white);
}

.app-nav-item.active {
  background: var(--panel);
  box-shadow: inset 3px 0 var(--gold);
  color: var(--white);
  font-weight: 700;
}

.app-nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.app-nav-badge {
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.66rem;
  font-weight: 800;
}

.app-sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.app-identity {
  min-height: 44px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-column {
  min-width: 0;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 68px;
  padding: 0 clamp(16px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--navy);
  border-bottom: 1px solid var(--line);
}

.app-context {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.app-context-kicker {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.app-context-title {
  overflow: hidden;
  color: var(--white);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-stage {
  min-width: 0;
}

.app-mobile-nav {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 820px) {
  .topbar {
    min-height: 60px;
    padding: 8px 14px;
  }

  .topbar .who {
    gap: 6px;
    font-size: 0.72rem;
  }

  .signout {
    min-height: 36px;
    padding: 7px 10px;
  }

  .home-wrap {
    padding: 26px 16px calc(92px + env(safe-area-inset-bottom));
  }

  .pg-head {
    margin-bottom: 22px;
  }

  .pg-title {
    max-width: none;
    font-size: clamp(2.2rem, 11vw, 3.35rem);
  }

  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kpi {
    min-height: 104px;
    padding: 15px;
  }

  .kpi-value {
    font-size: 1.9rem;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .tile {
    min-height: 0;
  }

  .app-shell {
    display: block;
  }

  .app-sidebar {
    position: fixed;
    left: 0;
    width: min(86vw, 300px);
    transform: translateX(-105%);
    box-shadow: 18px 0 44px rgba(17, 25, 12, 0.16);
    transition: transform 180ms var(--ease);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .app-topbar {
    min-height: 60px;
    padding: 0 14px;
  }

  .app-context-kicker {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    min-height: calc(66px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--navy);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 28px rgba(17, 25, 12, 0.08);
  }

  .app-mobile-nav button {
    position: relative;
    min-height: 54px;
    padding: 5px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--mist);
    font-size: 0.62rem;
    font-weight: 700;
  }

  .app-mobile-nav button.active {
    color: var(--white);
  }

  .app-mobile-nav button.active::after {
    position: absolute;
    right: 32%;
    bottom: 2px;
    left: 32%;
    height: 3px;
    background: var(--gold);
    content: '';
  }
}

@media (max-width: 430px) {
  .topbar .brand {
    font-size: 1.02rem;
  }

  .pill {
    padding-inline: 7px;
    font-size: 0.62rem;
  }

  .section-title {
    margin-top: 26px;
  }

  .kpi-row {
    grid-template-columns: 1fr;
  }

  .kpi {
    min-height: 96px;
  }
}

/* ====================================================== PRODUCTION FACE v03
   The Mock v05 command experience: a sharper front door, a more useful coach
   hierarchy, and the finished responsive skin for Claude's app-shell handoff.
   This is FACE only. Existing routes, ids, data attributes, runtime state and
   information authority remain untouched. */

/* Front door — the same clean, editorial confidence as Mock v05, adapted to
   the existing two-door product choice instead of inventing a new flow. */
#screen-landing.active {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(410px, 0.88fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  background: var(--navy);
}

#screen-landing .hero {
  grid-column: 1;
  grid-row: 1 / -1;
  min-height: 100vh;
  padding: clamp(46px, 8vw, 112px);
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
  background: var(--navy);
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

#screen-landing .hero::after {
  position: absolute;
  right: clamp(30px, 5vw, 74px);
  bottom: clamp(30px, 5vw, 64px);
  width: clamp(62px, 8vw, 104px);
  height: 8px;
  background: var(--gold);
  content: '';
}

#screen-landing .yardlines {
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 0 49.85%, var(--line) 49.85% 50.15%, transparent 50.15%),
    repeating-linear-gradient(to bottom, transparent 0 84px, var(--line) 84px 85px);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.62));
}

#screen-landing .hero-inner {
  width: min(100%, 720px);
}

#screen-landing .monogram {
  width: 118px;
  height: 42px;
  margin: 0 0 clamp(54px, 9vw, 104px);
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

#screen-landing .monogram img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.12);
}

.hero-kicker,
.entry-kicker {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#screen-landing .hero h1 {
  max-width: 8ch;
  margin-top: 10px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(4.25rem, 9vw, 8.5rem);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

#screen-landing .hero .sub {
  max-width: 520px;
  margin: 24px 0 0;
  color: var(--mist);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.65;
}

#screen-landing .hero .tag {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.17em;
}

#screen-landing .hero .tag::before {
  width: 34px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--gold);
  content: '';
}

#screen-landing .entry-wrap {
  width: min(100%, 590px);
  margin: auto auto 0;
  padding: clamp(32px, 5vw, 68px) clamp(24px, 4vw, 54px) 24px;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#screen-landing .entry-card {
  min-height: 186px;
  padding: 25px 26px 22px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 16px 36px rgba(17, 25, 12, 0.055);
}

#screen-landing .entry-card.team,
#screen-landing .entry-card.individual {
  border-top: 1px solid var(--line);
}

#screen-landing .entry-card.individual {
  box-shadow: inset 4px 0 var(--gold), 0 16px 36px rgba(17, 25, 12, 0.055);
}

#screen-landing .entry-card h2 {
  margin: 4px 0 8px;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -0.015em;
}

#screen-landing .entry-card p {
  max-width: 44ch;
  margin-bottom: 20px;
  font-size: 0.84rem;
  line-height: 1.55;
}

#screen-landing .entry-card .btn {
  margin-top: 2px;
}

.entry-meta,
.entry-legal {
  grid-column: 2;
  width: min(100%, 590px);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 54px);
  color: var(--mist);
  font-size: 0.79rem;
  line-height: 1.45;
  text-align: left;
}

.entry-meta-tight {
  margin-top: 2px;
}

.entry-legal {
  padding-top: 14px;
  padding-bottom: clamp(28px, 4vw, 48px);
  font-size: 0.72rem;
}

#screen-landing .linklike {
  color: var(--white);
  font-size: inherit;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* Coach Home — the current compatibility hooks already carry real engine
   content. This makes the first viewport read as pulse → exception → action. */
#screen-home .home-wrap,
#screen-program .home-wrap {
  width: min(100%, 1320px);
}

#screen-home .hud-head {
  max-width: 760px;
  margin-bottom: 28px;
}

#screen-home .hud-title {
  max-width: 14ch;
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.9;
}

#screen-home .kpi-row {
  grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(155px, 1fr));
  align-items: stretch;
}

#screen-home .kpi {
  min-height: 126px;
  padding: 20px;
  overflow: hidden;
  border-color: var(--line);
}

#screen-home .kpi:first-of-type {
  border-top: 4px solid var(--gold);
}

#screen-home .kpi-value {
  font-size: clamp(2.2rem, 4vw, 3rem);
}

#screen-home .card-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

#screen-home .tile {
  min-height: 132px;
}

/* Program Command / Game Week instrument — still light, dense and coach-first.
   Functional result colors remain functional; yellow stays a fill or bar. */
.pgm-head {
  margin-bottom: 24px;
  align-items: flex-end;
  gap: 10px 18px;
}

.pgm-head h1,
.pgm-head h2,
.pgm-head h3 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.pgm-wk {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pgm-tiles {
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.pgm-tile {
  min-height: 132px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(17, 25, 12, 0.045);
}

.pgm-tile.big {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: inset 5px 0 var(--gold), 0 12px 30px rgba(17, 25, 12, 0.045);
}

.pgm-tile.big::after {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 5px;
  background: var(--gold);
  content: '';
}

.pgm-tval {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.6rem, 4vw, 3.55rem);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.pgm-slash {
  color: var(--mist);
}

.pgm-tlabel {
  margin-top: 9px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.pgm-tsub {
  margin-top: 5px;
  color: var(--mist);
  line-height: 1.35;
}

.pgm-grid {
  gap: 14px;
}

.pgm-card {
  padding: 20px;
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(17, 25, 12, 0.04);
}

.pgm-ch {
  margin-bottom: 16px;
  padding-bottom: 11px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-bottom: 1px solid var(--line);
}

.pgm-ch::before {
  width: 20px;
  height: 4px;
  flex: 0 0 auto;
  background: var(--gold);
  content: '';
}

.pgm-ch small {
  margin-left: auto;
  color: var(--mist);
  line-height: 1.35;
}

.pgm-empty,
.pgm-foot,
.pgm-ma-note,
.pgm-fh-more {
  color: var(--mist);
}

/* Completed shell canvas. It remains dormant until Claude emits the requested
   hooks and wires them to the existing router. */
.app-brand img {
  width: 84px;
  height: 30px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.app-nav-item {
  font-size: 0.84rem;
  font-weight: 700;
  transition: background 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.app-nav-item.active::after {
  position: absolute;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  content: '';
}

.app-mobile-more,
.app-mobile-sheet {
  background: var(--navy);
  color: var(--white);
}

.app-mobile-sheet {
  position: fixed;
  right: 10px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: 10px;
  z-index: 60;
  max-height: min(68vh, 540px);
  padding: 16px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(17, 25, 12, 0.2);
}

@media (max-width: 1080px) {
  #screen-home .kpi-row,
  .pgm-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-home .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #screen-landing.active {
    display: block;
    background: var(--panel);
  }

  #screen-landing .hero {
    min-height: auto;
    padding: 48px 24px 54px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  #screen-landing .hero::after {
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 6px;
  }

  #screen-landing .monogram {
    margin-bottom: 58px;
  }

  #screen-landing .hero h1 {
    font-size: clamp(4rem, 15vw, 6.5rem);
  }

  #screen-landing .entry-wrap {
    width: min(100%, 660px);
    padding: 24px 16px 18px;
  }

  .entry-meta,
  .entry-legal {
    width: min(100%, 660px);
    padding-inline: 16px;
  }

  .entry-legal {
    padding-bottom: 100px;
  }
}

@media (max-width: 680px) {
  #screen-home .kpi-row,
  #screen-home .card-grid,
  .pgm-tiles {
    grid-template-columns: 1fr;
  }

  #screen-home .kpi,
  .pgm-tile {
    min-height: 112px;
  }

  .pgm-grid {
    grid-template-columns: 1fr;
  }

  .pgm-card {
    padding: 16px;
  }

  .pgm-ch {
    flex-wrap: wrap;
  }

  .pgm-ch small {
    width: 100%;
    margin: 2px 0 0 28px;
  }
}

@media (max-width: 430px) {
  #screen-landing .hero {
    padding: 32px 18px 42px;
  }

  #screen-landing .monogram {
    width: 96px;
    height: 34px;
    margin-bottom: 44px;
  }

  #screen-landing .hero h1 {
    font-size: clamp(3.5rem, 18vw, 4.8rem);
  }

  #screen-landing .hero .sub {
    margin-top: 18px;
    font-size: 0.9rem;
  }

  #screen-landing .hero .tag {
    font-size: 0.59rem;
    letter-spacing: 0.12em;
  }

  #screen-landing .entry-card {
    min-height: 0;
    padding: 21px 20px 19px;
  }

  #screen-landing .entry-card h2 {
    font-size: 1.48rem;
  }
}

/* ====================================================== PRODUCTION FACE v04
   The authenticated Mock v05 shell, painted on Claude's reconciled engine
   hooks. This layer owns chrome, iconography, spacing and responsive geometry.
   Routing, role scope, screen state and every existing engine hook stay intact. */

/* One structural header now owns the signed-in experience. Claude preserved
   each legacy topbar as a compatibility hook; the shell handoff explicitly
   cleared these duplicates for visual retirement inside .app-stage. */
.app-stage > .screen > .topbar {
  display: none;
}

.app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--panel);
}

.app-column {
  min-width: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--panel);
}

.app-sidebar {
  z-index: 70;
  height: 100dvh;
  padding: 20px 14px 18px;
  background: var(--navy);
  border-right: 1px solid var(--line);
  box-shadow: 10px 0 34px rgba(17, 25, 12, 0.035);
}

.app-brand {
  position: relative;
  min-height: 54px;
  padding: 0 14px;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
}

.app-brand::after {
  position: absolute;
  right: 14px;
  bottom: 6px;
  left: 14px;
  height: 4px;
  background: var(--gold);
  content: '';
}

.app-nav {
  margin-top: 30px;
}

.app-nav-label {
  padding: 0 14px 10px;
  color: var(--mist);
  font-size: 0.59rem;
  letter-spacing: 0.2em;
}

.app-nav-item {
  min-height: 46px;
  margin: 3px 0;
  padding: 0 14px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--mist);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.2;
}

.app-nav-item:hover {
  background: var(--panel);
  border-color: var(--line);
  color: var(--white);
}

.app-nav-item.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(17, 25, 12, 0.09);
  color: var(--on-accent);
  font-weight: 800;
}

.app-nav-item.active::after {
  content: none;
}

.app-nav-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

/* Local, dependency-free line icons. The parent data-screen hook already
   belongs to the router; selectors only paint it and never change its value. */
.app-nav-item[data-screen='home'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 3l9 7.8'/%3E%3Cpath d='M5.5 9.5V21h13V9.5M9.5 21v-6h5v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 3l9 7.8'/%3E%3Cpath d='M5.5 9.5V21h13V9.5M9.5 21v-6h5v6'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='game-week'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4m10-4v4M3 10h18M8 14h3m2 0h3m-8 3h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4m10-4v4M3 10h18M8 14h3m2 0h3m-8 3h3'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='roster'] .app-nav-icon,
.app-nav-item[data-screen='admin-team'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v5'/%3E%3Ccircle cx='8.5' cy='8' r='3'/%3E%3Cpath d='M15 5.3a3 3 0 0 1 0 5.4M15.5 14h2.5a2 2 0 0 1 2 2v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v5'/%3E%3Ccircle cx='8.5' cy='8' r='3'/%3E%3Cpath d='M15 5.3a3 3 0 0 1 0 5.4M15.5 14h2.5a2 2 0 0 1 2 2v5'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='results'] .app-nav-icon,
.app-nav-item[data-screen='admin-accounts'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 21v-3.5A3.5 3.5 0 0 1 7 14h4a3.5 3.5 0 0 1 3.5 3.5V21M16 8h5m-2.5-2.5v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 21v-3.5A3.5 3.5 0 0 1 7 14h4a3.5 3.5 0 0 1 3.5 3.5V21M16 8h5m-2.5-2.5v5'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='program'] .app-nav-icon,
.app-nav-item[data-screen='admin-billing'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10m5 10V4m6 16v-7m5 7V7'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10m5 10V4m6 16v-7m5 7V7'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='vault'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h6l2 2h8v13H4z'/%3E%3Cpath d='M4 10h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h6l2 2h8v13H4z'/%3E%3Cpath d='M4 10h16'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='player-quizzes'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h5M8 16h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h5M8 16h3'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='player-film'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3zM7 5v14m10-14v14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3zM7 5v14m10-14v14'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='player-siq'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2M6.5 17.5l2-2M17.5 6.5l-2 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2M6.5 17.5l2-2M17.5 6.5l-2 2'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='board'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v4a4 4 0 0 1-8 0zM8 6H4v1a4 4 0 0 0 4 4M16 6h4v1a4 4 0 0 1-4 4M12 12v5M8 21h8M9 17h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v4a4 4 0 0 1-8 0zM8 6H4v1a4 4 0 0 0 4 4M16 6h4v1a4 4 0 0 1-4 4M12 12v5M8 21h8M9 17h6'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='admin-invites'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='m4 8 8 6 8-6M12 3v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='m4 8 8 6 8-6M12 3v3'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='admin-starter-pack'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v13H4zM3 4h18v4H3zM12 4v17M8 4c0-2 4-2 4 0M16 4c0-2-4-2-4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v13H4zM3 4h18v4H3zM12 4v17M8 4c0-2 4-2 4 0M16 4c0-2-4-2-4 0'/%3E%3C/svg%3E");
}

.app-mobile-more .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
}

.app-sidebar-foot {
  margin-top: auto;
  padding: 14px 4px 0;
  border-top: 1px solid var(--line);
}

.app-identity {
  min-height: 52px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.app-identity::before {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent);
  content: 'S';
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 900;
}

.app-topbar {
  min-height: 74px;
  padding: 0 clamp(20px, 3vw, 40px);
  background: rgba(250, 249, 247, 0.94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(17, 25, 12, 0.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.app-context {
  align-items: center;
  gap: 12px;
}

.app-context-kicker {
  padding: 5px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--mist);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

.app-context-title {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.48rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.app-actions {
  gap: 10px;
}

.app-action {
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 800;
}

.app-actions .btn-ghost {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
  box-shadow: 0 7px 18px rgba(17, 25, 12, 0.08);
}

.app-actions .btn-ghost:hover {
  filter: brightness(0.97);
}

.app-actions .signout {
  background: transparent;
  border-color: var(--line);
  color: var(--mist);
}

.app-actions .signout:hover {
  background: var(--panel);
  color: var(--white);
}

.app-stage {
  min-width: 0;
  min-height: calc(100dvh - 74px);
  background:
    linear-gradient(rgba(243, 241, 238, 0.94), rgba(243, 241, 238, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--line) 79px 80px);
}

.app-stage > .screen.active {
  min-height: calc(100dvh - 74px);
}

.app-stage .home-wrap {
  width: min(100%, 1360px);
  padding: clamp(30px, 4vw, 52px) clamp(20px, 4vw, 54px) 92px;
}

/* Empty canvases stay visually quiet during the branch-only build. They are
   intentionally not given fake data or fake controls. */
#game-week-body:empty,
#player-quizzes-body:empty,
#player-film-body:empty,
#player-siq-body:empty,
#admin-accounts-body:empty,
#admin-invites-body:empty,
#admin-starter-pack-body:empty,
#admin-billing-body:empty {
  min-height: calc(100dvh - 74px);
}

.app-mobile-sheet[hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .app-sidebar {
    padding-inline: 11px;
  }

  .app-nav-item {
    padding-inline: 11px;
  }
}

@media (max-width: 900px) {
  .app-shell {
    display: block;
  }

  .app-column {
    min-height: 100dvh;
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .app-sidebar {
    display: none;
  }

  .app-topbar {
    min-height: 62px;
    padding: 0 14px;
  }

  .app-context {
    gap: 9px;
  }

  .app-context-kicker {
    position: static;
    width: auto;
    height: auto;
    padding: 4px 6px;
    overflow: visible;
    clip-path: none;
    font-size: 0.52rem;
    white-space: nowrap;
  }

  .app-context-title {
    font-size: 1.12rem;
  }

  .app-action {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 0.68rem;
  }

  .app-stage,
  .app-stage > .screen.active {
    min-height: calc(100dvh - 62px - 70px - env(safe-area-inset-bottom));
  }

  .app-stage .home-wrap {
    padding: 28px 16px 38px;
  }

  .app-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    min-height: calc(70px + env(safe-area-inset-bottom));
    padding: 7px 6px env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: rgba(250, 249, 247, 0.97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 34px rgba(17, 25, 12, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .app-mobile-nav .app-nav-item {
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 5px 2px 4px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mist);
    font-size: 0.59rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }

  .app-mobile-nav .app-nav-item:hover {
    background: var(--panel);
    color: var(--white);
  }

  .app-mobile-nav .app-nav-item.active {
    background: var(--gold);
    color: var(--on-accent);
    box-shadow: none;
  }

  .app-mobile-nav .app-nav-item.active::after {
    content: none;
  }

  .app-mobile-nav .app-nav-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .app-mobile-sheet {
    right: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 90;
    max-height: min(70dvh, 540px);
    padding: 12px;
    display: grid;
    gap: 4px;
    background: var(--navy);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(17, 25, 12, 0.22);
    color: var(--white);
  }

  .app-mobile-sheet .app-nav-item {
    min-height: 48px;
    margin: 0;
    border-radius: 8px;
    color: var(--white);
  }

  .app-mobile-sheet .app-nav-item:hover,
  .app-mobile-sheet .app-nav-item.active {
    background: var(--panel);
    border-color: var(--line);
    color: var(--white);
    box-shadow: none;
  }

  .app-mobile-sheet .app-mobile-signout {
    margin-top: 7px;
    border-top: 1px solid var(--line);
    border-radius: 0;
    color: var(--mist);
  }
}

@media (max-width: 600px) {
  .app-context-kicker {
    display: none;
  }

  .app-actions {
    gap: 6px;
  }

  .app-actions .signout {
    padding-inline: 8px;
  }

  .app-stage .home-wrap {
    padding-top: 24px;
  }
}

@media (max-width: 420px) {
  .app-topbar {
    min-height: 58px;
    padding-inline: 12px;
  }

  .app-context-title {
    max-width: 118px;
    font-size: 1rem;
  }

  .app-action {
    padding-inline: 7px;
    font-size: 0.63rem;
  }

  .app-mobile-nav .app-nav-item {
    font-size: 0.55rem;
  }
}

/* ====================================================== PRODUCTION FACE v05
   GAME WEEK — the Mock v05 weekly command center, painted on Claude's real
   readiness, phase, attention and position-room hooks. This layer changes no
   engine value, route, state or behavior; it makes the existing truth scannable
   in one sideline glance on desktop and one thumb on a phone. */

.gw-page {
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 54px) clamp(20px, 4vw, 54px) 104px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.gw-head {
  grid-column: 1 / -1;
  min-height: 154px;
  margin-bottom: 4px;
  padding: 6px 0 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}

.gw-heading {
  min-width: 0;
}

.gw-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.gw-kicker::before {
  width: 28px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--gold);
  content: '';
}

.gw-title {
  margin-top: 11px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(3.65rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 0.79;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.gw-context {
  margin-top: 17px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.gw-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.gw-actions .btn,
.gw-actions .btn-ghost {
  width: auto;
  min-width: 132px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 8px;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.gw-actions .btn-ghost {
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--white);
  cursor: pointer;
}

.gw-actions .btn-ghost:hover {
  background: var(--panel);
  border-color: var(--dim);
}

.gw-pulse {
  grid-column: span 4;
  min-width: 0;
}

.gw-card,
.gw-metric,
.gw-room {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 14px 32px rgba(17, 25, 12, 0.045);
}

.gw-card {
  min-width: 0;
  padding: 20px;
}

.gw-card-head {
  min-height: 30px;
  margin-bottom: 19px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.gw-label {
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gw-status {
  padding: 5px 8px;
  background: var(--gold);
  border-radius: 5px;
  color: var(--on-accent);
  font-size: 0.63rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.gw-readiness {
  height: 100%;
  min-height: 250px;
  overflow: hidden;
  box-shadow: inset 5px 0 var(--gold), 0 14px 32px rgba(17, 25, 12, 0.045);
}

.gw-readiness-body {
  min-height: 165px;
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.gw-ring {
  position: relative;
  width: 146px;
  height: 146px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--gold) calc(var(--gw-value) * 1%), var(--panel) 0);
  isolation: isolate;
}

.gw-ring::before {
  position: absolute;
  inset: 12px;
  z-index: -1;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(250, 249, 247, 0.72);
  content: '';
}

.gw-ring::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border: 3px solid var(--navy);
  border-radius: 50%;
  content: '';
  transform: translate(-50%, -53px);
}

.gw-ring-value {
  color: var(--white);
  font-family: var(--display);
  font-size: 3.3rem;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-align: center;
}

.gw-ring-label {
  margin-top: 9px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.gw-readiness-copy {
  max-width: 19ch;
  color: var(--mist);
  font-size: 0.79rem;
  line-height: 1.55;
}

.gw-metrics {
  grid-column: span 8;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gw-metric {
  position: relative;
  min-width: 0;
  min-height: 250px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-top: 5px solid var(--gold);
}

.gw-metric::after {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--mist);
  content: '';
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gw-metric[data-phase='offense']::after {
  content: 'OFF';
}

.gw-metric[data-phase='defense']::after {
  content: 'DEF';
}

.gw-metric[data-phase='spt']::after {
  content: 'SPT';
}

.gw-metric-label {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
}

.gw-metric-value {
  margin-top: 13px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(3.7rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: 0.76;
  letter-spacing: -0.04em;
}

.gw-metric-note {
  margin-top: 15px;
  padding-top: 12px;
  color: var(--mist);
  font-size: 0.72rem;
  line-height: 1.4;
  border-top: 1px solid var(--line);
}

.gw-grid {
  grid-column: span 5;
  min-width: 0;
}

.gw-attention {
  height: 100%;
  min-height: 344px;
}

.gw-view-players,
.gw-open-reports {
  min-height: 36px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--white);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.gw-view-players::after,
.gw-open-reports::after {
  margin-left: 7px;
  content: '\2192';
}

.gw-view-players:hover,
.gw-open-reports:hover {
  background: var(--panel);
  border-color: var(--dim);
}

.gw-attention-list {
  display: grid;
}

.gw-att-row {
  min-height: 49px;
  padding: 9px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.gw-att-row:last-child {
  border-bottom: 0;
}

.gw-att-row b {
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  font-size: 0.78rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw-att-pos {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.gw-chip {
  min-width: 39px;
  padding: 5px 7px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.gw-chip-not {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--mist);
}

.gw-chip-risk {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--on-accent);
}

.gw-att-miss {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 3px;
  border-bottom-style: dashed;
}

.gw-att-topic {
  min-width: 0;
  overflow: hidden;
  color: var(--mist);
  font-size: 0.74rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw-att-miss b {
  min-width: 34px;
  padding: 5px 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.59rem;
  text-align: center;
}

.gw-rooms {
  grid-column: span 7;
  min-width: 0;
  min-height: 344px;
  padding: 20px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 14px 32px rgba(17, 25, 12, 0.045);
}

.gw-section-head {
  min-height: 72px;
  margin-bottom: 18px;
  padding-bottom: 15px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.gw-section-title {
  margin-top: 9px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.gw-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gw-room {
  position: relative;
  min-width: 0;
  min-height: 80px;
  padding: 14px 14px 13px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: none;
}

.gw-room::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--gold);
  content: '';
}

.gw-room-pos {
  min-width: 42px;
  padding: 7px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1;
  text-align: center;
}

.gw-room-count {
  min-width: 0;
  overflow: hidden;
  color: var(--mist);
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw-room-val {
  color: var(--white);
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.03em;
}

.gw-empty {
  min-height: 92px;
  padding: 20px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--mist);
  font-size: 0.76rem;
  line-height: 1.45;
  text-align: center;
}

.gw-load {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: gw-load-pulse 900ms ease-in-out infinite alternate;
}

@keyframes gw-load-pulse {
  to {
    opacity: 0.42;
  }
}

@media (max-width: 1120px) {
  .gw-pulse {
    grid-column: span 5;
  }

  .gw-metrics {
    grid-column: span 7;
    gap: 12px;
  }

  .gw-metric {
    padding: 18px;
  }

  .gw-readiness-body {
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 17px;
  }

  .gw-ring {
    width: 126px;
    height: 126px;
  }

  .gw-ring::after {
    transform: translate(-50%, -44px);
  }

  .gw-grid {
    grid-column: span 6;
  }

  .gw-rooms {
    grid-column: span 6;
  }

  .gw-room-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .gw-page {
    padding: 28px 16px 38px;
  }

  .gw-head {
    min-height: 132px;
  }

  .gw-pulse,
  .gw-metrics,
  .gw-grid,
  .gw-rooms {
    grid-column: 1 / -1;
  }

  .gw-readiness,
  .gw-metric {
    min-height: 220px;
  }

  .gw-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .gw-page {
    gap: 12px;
  }

  .gw-head {
    min-height: 0;
    padding: 4px 0 22px;
    display: block;
  }

  .gw-title {
    max-width: 7ch;
    font-size: clamp(3.6rem, 18vw, 5rem);
  }

  .gw-context {
    max-width: 36ch;
    font-size: 0.6rem;
  }

  .gw-actions {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gw-actions .btn,
  .gw-actions .btn-ghost {
    width: 100%;
    min-width: 0;
  }

  .gw-metrics {
    gap: 8px;
  }

  .gw-metric {
    min-height: 172px;
    padding: 14px;
  }

  .gw-metric::after {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    font-size: 0.52rem;
  }

  .gw-metric-label {
    max-width: 9ch;
    font-size: 0.54rem;
    letter-spacing: 0.1em;
  }

  .gw-metric-value {
    margin-top: 11px;
    font-size: clamp(2.75rem, 12vw, 4rem);
  }

  .gw-metric-note {
    margin-top: 11px;
    padding-top: 9px;
    font-size: 0.62rem;
  }

  .gw-attention,
  .gw-rooms {
    min-height: 0;
  }

  .gw-rooms {
    padding: 16px;
  }

  .gw-section-head {
    align-items: center;
  }

  .gw-section-title {
    font-size: 2.1rem;
  }

  .gw-room-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .gw-card {
    padding: 16px;
  }

  .gw-card-head {
    margin-bottom: 15px;
  }

  .gw-readiness {
    min-height: 226px;
  }

  .gw-readiness-body {
    grid-template-columns: 114px minmax(0, 1fr);
    gap: 15px;
  }

  .gw-ring {
    width: 114px;
    height: 114px;
  }

  .gw-ring::before {
    inset: 10px;
  }

  .gw-ring::after {
    transform: translate(-50%, -39px);
  }

  .gw-ring-value {
    font-size: 2.75rem;
  }

  .gw-readiness-copy {
    font-size: 0.72rem;
  }

  .gw-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gw-metric {
    min-height: 160px;
    padding: 12px 10px;
  }

  .gw-metric::after {
    width: 28px;
    height: 28px;
  }

  .gw-metric-label {
    font-size: 0.48rem;
  }

  .gw-metric-value {
    font-size: clamp(2.4rem, 13vw, 3.25rem);
  }

  .gw-metric-note {
    font-size: 0.55rem;
  }

  .gw-section-head {
    align-items: flex-end;
  }

  .gw-open-reports {
    width: 84px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gw-load {
    animation: none;
  }
}

/* ====================================================== PRODUCTION FACE v06
   ADMIN VIEW AS — a persistent, unmistakable preview signal plus a focused
   perspective picker. Claude owns every permission, visibility and routing
   decision; this layer only makes the engine-enforced read-only state legible. */

.app-nav-item[data-screen='admin-viewas'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M18.8 5.2 21 3m-15.8 2.2L3 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M18.8 5.2 21 3m-15.8 2.2L3 3'/%3E%3C/svg%3E");
}

.app-shell.is-previewing .app-column {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.app-preview-banner {
  position: relative;
  z-index: 60;
  min-height: 54px;
  padding: 8px clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gold);
  border-bottom: 1px solid rgba(17, 25, 12, 0.24);
  box-shadow: 0 10px 24px rgba(17, 25, 12, 0.1);
  color: var(--on-accent);
}

.app-preview-banner[hidden] {
  display: none;
}

.app-preview-banner::before {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: var(--on-accent);
  content: '';
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
}

.app-preview-label {
  min-width: 0;
  flex: 1;
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.app-preview-exit {
  min-height: 38px;
  padding: 7px 14px;
  flex: 0 0 auto;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: 6px;
  color: var(--on-solid);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-preview-exit:hover {
  background: transparent;
  color: var(--on-accent);
}

.app-preview-exit:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

.app-shell.is-previewing .app-stage,
.app-shell.is-previewing .app-stage > .screen.active {
  min-height: calc(100dvh - 128px);
}

.va-pick {
  position: relative;
  width: min(100%, 820px);
  margin-top: 26px;
  padding: clamp(22px, 4vw, 38px);
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(17, 25, 12, 0.06);
}

.va-pick::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--gold);
  content: '';
}

.va-row {
  position: relative;
  min-height: 76px;
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(132px, 0.32fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
  border-bottom: 1px solid var(--line);
}

.va-row[hidden] {
  display: none;
}

.va-row:first-child {
  padding-top: 8px;
}

.va-lbl {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.va-row .code-input {
  min-height: 48px;
  margin: 0;
  padding: 11px 42px 11px 14px;
  background: var(--panel);
  border-color: var(--line);
  border-radius: 7px;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}

.va-row .code-input:hover {
  border-color: var(--dim);
}

.va-row .code-input:focus-visible {
  outline: 3px solid rgba(225, 255, 0, 0.42);
  outline-offset: 2px;
  border-color: var(--gold);
}

.va-pick > .btn {
  width: auto;
  min-width: 210px;
  min-height: 48px;
  margin-top: 24px;
  padding-inline: 22px;
  border-radius: 7px;
  box-shadow: 0 9px 22px rgba(17, 25, 12, 0.1);
}

.va-pick > .btn:disabled {
  background: var(--panel);
  color: var(--mist);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.72;
}

.va-hint {
  position: relative;
  margin-top: 22px;
  padding: 14px 16px 14px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--mist);
  font-size: 0.76rem;
  line-height: 1.55;
}

.va-hint::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--gold);
  content: '';
}

@media (max-width: 900px) {
  .app-preview-banner {
    min-height: 58px;
    padding: 8px 14px;
  }

  .app-shell.is-previewing .app-stage,
  .app-shell.is-previewing .app-stage > .screen.active {
    min-height: calc(100dvh - 120px - 70px - env(safe-area-inset-bottom));
  }

  .va-pick {
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .app-preview-banner {
    gap: 9px;
  }

  .app-preview-banner::before {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    -webkit-mask-size: 21px 21px;
    mask-size: 21px 21px;
  }

  .app-preview-label {
    font-size: 0.59rem;
    letter-spacing: 0.055em;
  }

  .app-preview-exit {
    min-height: 44px;
    padding-inline: 12px;
  }

  .va-pick {
    padding: 22px 18px 20px;
    border-radius: 10px;
  }

  .va-row {
    min-height: 0;
    padding: 16px 0;
    display: block;
  }

  .va-lbl {
    display: block;
    margin-bottom: 8px;
  }

  .va-row .code-input {
    min-height: 50px;
  }

  .va-pick > .btn {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }

  .va-hint {
    font-size: 0.72rem;
  }
}

@media (max-width: 380px) {
  .app-preview-banner {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .app-preview-label {
    align-self: center;
  }

  .app-preview-exit {
    width: 100%;
  }
}

/* ====================================================== PRODUCTION FACE v07
   MOCK v05 SHELL PARITY — the signed-in frame now matches the quieter,
   product-first proportions CJ approved in the isolated mock. This layer is
   intentionally chrome-only: the router, role scope, screen state, actions,
   identity text and preview safety remain engine-owned. */

@media (min-width: 901px) {
  .app-shell {
    grid-template-columns: 228px minmax(0, 1fr);
  }

  .app-sidebar {
    padding: 20px 14px 18px;
  }

  .app-topbar {
    min-height: 68px;
    padding-inline: 26px;
    box-shadow: none;
  }

  .app-stage,
  .app-stage > .screen.active {
    min-height: calc(100dvh - 68px);
  }

  .app-shell.is-previewing .app-stage,
  .app-shell.is-previewing .app-stage > .screen.active {
    min-height: calc(100dvh - 122px);
  }
}

.app-sidebar {
  box-shadow: none;
}

.app-brand {
  min-height: 48px;
  padding: 0 8px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.app-brand::before {
  width: 68px;
  height: 31px;
  display: block;
  background: var(--navy) url('assets/siq-wordmark.jpeg') center / cover no-repeat;
  content: '';
}

.app-brand::after {
  content: none;
}

.app-nav {
  margin-top: 27px;
}

.app-nav-label {
  padding: 0 12px 9px;
  font-size: 0.56rem;
  letter-spacing: 0.19em;
}

.app-nav-item {
  min-height: 42px;
  margin: 2px 0;
  padding-inline: 12px;
  gap: 11px;
  border: 0;
  border-radius: 8px;
  color: var(--mist);
  font-size: 0.8rem;
}

.app-nav-item:hover {
  background: var(--panel);
  border-color: transparent;
  color: var(--white);
}

.app-nav-item.active {
  background: var(--panel);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--gold);
  color: var(--white);
  font-weight: 800;
}

.app-nav-item.active::after {
  content: none;
}

.app-nav-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

.app-sidebar-foot {
  padding: 12px 2px 0;
}

.app-identity {
  min-height: 54px;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.72rem;
}

.app-identity::before {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.9rem;
}

.app-context {
  gap: 11px;
}

.app-context-kicker {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--mist);
  font-size: 0.57rem;
  letter-spacing: 0.16em;
}

.app-context-title {
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.app-actions {
  gap: 8px;
}

.app-action {
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.app-actions .btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--white);
  box-shadow: none;
}

.app-actions .btn-ghost:hover {
  background: var(--panel);
  filter: none;
}

.app-stage {
  background: var(--panel);
}

.app-stage .home-wrap {
  width: 100%;
  max-width: none;
  padding: 40px clamp(24px, 3.25vw, 44px) 92px;
}

/* Game Week owns its own complete page padding. Removing the inherited
   home-wrap inset prevents the command center from being padded twice. */
#game-week-body {
  padding: 0;
}

.gw-page {
  width: 100%;
  max-width: none;
  padding: 40px clamp(24px, 3.25vw, 44px) 96px;
}

@media (max-width: 900px) {
  .app-topbar {
    box-shadow: none;
  }

  .app-context-kicker {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .app-context-title {
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    text-transform: none;
  }

  .app-mobile-nav {
    box-shadow: 0 -8px 24px rgba(17, 25, 12, 0.07);
  }

  .app-mobile-nav .app-nav-item.active {
    background: var(--panel);
    box-shadow: inset 0 3px 0 var(--gold);
    color: var(--white);
  }

  #game-week-body {
    padding: 0;
  }

  .gw-page {
    padding: 28px 16px 86px;
  }
}

@media (max-width: 420px) {
  .app-context-title {
    font-size: 0.84rem;
  }
}

/* ====================================================== PRODUCTION FACE v10
   V09 ADMIN BILLING ANALYTICS — an admin-only cost command center. Account
   billing and generation expense deliberately use different panels so the
   customer ledger can never be mistaken for SIQ's model cost. All values,
   access, controls and drill-down state remain engine-owned. */

.billing-page {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-bottom: 36px;
  font-variant-numeric: tabular-nums;
}

.billing-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.85fr);
  gap: 14px;
  margin: 8px 0 16px;
}

.billing-cost-panel,
.billing-account-panel,
.billing-trend,
.billing-team-table,
.billing-team-detail {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--navy);
}

.billing-cost-panel,
.billing-account-panel {
  min-height: 194px;
  padding: 22px;
  border-radius: 12px;
}

.billing-cost-panel {
  border-top: 4px solid var(--gold);
  box-shadow: 0 14px 34px rgba(17, 25, 12, 0.055);
}

.billing-cost-panel::after {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 42px;
  height: 42px;
  border-top: 1px solid var(--dim);
  border-right: 1px solid var(--dim);
  content: '';
  opacity: 0.52;
  pointer-events: none;
}

.billing-account-panel {
  background: var(--panel);
  border-top: 4px solid var(--dim);
}

.billing-account-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 76px;
  height: 4px;
  background: var(--gold);
  content: '';
}

.billing-panel-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.billing-panel-h::before {
  width: 6px;
  height: 16px;
  flex: 0 0 6px;
  background: var(--gold);
  content: '';
}

.billing-account-panel .billing-panel-h::before {
  background: var(--dim);
}

.billing-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--line);
}

.billing-kpi {
  min-width: 0;
  min-height: 108px;
  padding: 15px 14px 13px;
  background: var(--navy);
}

.billing-kpi-value {
  overflow: hidden;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-kpi-label,
.billing-kpi-sub {
  display: block;
  line-height: 1.3;
}

.billing-kpi-label {
  margin-top: 10px;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
}

.billing-kpi-sub {
  margin-top: 3px;
  color: var(--mist);
  font-size: 0.62rem;
}

.billing-statusmix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.billing-statuschip {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
}

.billing-statuschip b {
  font-family: var(--mono);
  font-size: 0.82rem;
}

.billing-note {
  margin-top: 12px;
  color: var(--mist);
  font-size: 0.68rem;
  line-height: 1.45;
}

.billing-trend {
  margin-bottom: 16px;
  padding: 18px 20px 15px;
  border-radius: 12px;
}

.billing-trend::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--gold);
  content: '';
}

.billing-trend .billing-panel-h {
  margin-bottom: 11px;
}

.billing-trend-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.3fr) repeat(3, minmax(92px, 0.7fr));
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  color: var(--mist);
  font-size: 0.74rem;
}

.billing-trend-row:first-of-type {
  border-top: 0;
}

.billing-trend-row:nth-child(even) {
  background: var(--panel);
}

.billing-trend-wk {
  color: var(--white);
  font-weight: 700;
}

.billing-trend-spend,
.billing-trend-gens,
.billing-trend-qz {
  text-align: right;
}

.billing-trend-spend {
  color: var(--white);
  font-family: var(--mono);
  font-weight: 700;
}

.billing-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.42fr) auto auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--navy);
}

.billing-search,
.billing-sort,
#billing-search,
#billing-sort,
#billing-dir {
  min-height: 44px;
  font: inherit;
}

#billing-search,
#billing-sort {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--input);
  color: var(--white);
  font-size: 0.82rem;
}

#billing-search:focus,
#billing-sort:focus,
#billing-dir:focus-visible,
.billing-team-row:focus-visible,
.billing-detail-close:focus-visible,
.bill-save:focus-visible {
  border-color: var(--dim);
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

#billing-dir {
  min-width: 46px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--white);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#billing-dir:hover {
  border-color: var(--dim);
  background: var(--gold);
  color: var(--on-accent);
}

.billing-period {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 13px;
  border-left: 3px solid var(--gold);
  background: var(--panel);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.billing-team-table {
  border-radius: 11px;
  background: var(--navy);
}

.billing-team-row {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(155px, 1.35fr)
    minmax(82px, 0.58fr)
    minmax(146px, 1.08fr)
    repeat(6, minmax(70px, 0.55fr))
    minmax(118px, 0.9fr);
  align-items: center;
  gap: 11px;
  min-height: 74px;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}

.billing-team-row:first-child {
  border-top: 0;
}

.billing-team-row:hover,
.billing-team-row.open {
  background: var(--panel);
  box-shadow: inset 4px 0 0 var(--gold);
}

.billing-team-row.open {
  font-weight: 700;
}

.billing-team-name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-team-status {
  justify-self: start;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.billing-budget {
  min-width: 0;
}

.billing-budget-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.billing-budget-fill {
  width: calc(var(--pct) * 1%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 420ms var(--ease);
}

.billing-budget-fill.over {
  background: var(--ink-low);
}

.billing-budget-label {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-team-spend,
.billing-team-total,
.billing-team-gens,
.billing-team-qz,
.billing-team-avg,
.billing-team-cpp,
.billing-team-top {
  min-width: 0;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

.billing-team-spend i,
.billing-team-total i,
.billing-team-gens i,
.billing-team-qz i,
.billing-team-avg i,
.billing-team-cpp i,
.billing-team-top i {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  color: var(--mist);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.billing-team-top {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-empty,
.billing-error {
  padding: 34px 22px;
  border: 1px dashed var(--dim);
  border-radius: 10px;
  background: var(--panel);
  color: var(--mist);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

.billing-error {
  border-style: solid;
  border-color: var(--ink-low);
  color: var(--ink-low);
  font-weight: 700;
}

.billing-team-detail {
  margin-top: 14px;
  padding: 22px;
  border-radius: 12px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 18px 42px rgba(17, 25, 12, 0.07);
}

.billing-team-detail[hidden] {
  display: none;
}

.billing-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.billing-detail-name {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: uppercase;
}

.billing-detail-close {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

.billing-detail-close:hover {
  border-color: var(--dim);
  background: var(--gold);
  color: var(--on-accent);
}

.billing-account-edit,
.billing-cost-detail,
.billing-coach-table,
.billing-model-table,
#billing-team-weekly {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.billing-account-edit {
  border-left: 4px solid var(--dim);
}

.billing-cost-detail {
  border-left: 4px solid var(--gold);
}

.billing-account-edit .bill-row {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.billing-account-edit .bill-id {
  margin-bottom: 12px;
}

.billing-account-edit .bill-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.billing-account-edit .bill-lbl {
  display: grid;
  gap: 5px;
  color: var(--mist);
}

.billing-account-edit .code-input,
.billing-account-edit .bill-fields .code-input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
}

.billing-account-edit .bill-note {
  grid-column: span 2;
}

.billing-account-edit .bill-save {
  min-height: 42px;
  align-self: end;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

.billing-account-edit .bill-save:hover:not(:disabled) {
  background: var(--gold);
  filter: brightness(0.97);
}

.billing-coach-row,
.billing-model-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 39px;
  padding: 8px 9px;
  border-top: 1px solid var(--line);
  color: var(--mist);
  font-size: 0.72rem;
}

.billing-coach-row {
  grid-template-columns: minmax(160px, 1.5fr) repeat(4, minmax(76px, 0.65fr));
}

.billing-model-row {
  grid-template-columns: minmax(160px, 1.5fr) repeat(2, minmax(82px, 0.65fr));
}

.billing-coach-row:first-child,
.billing-model-row:first-child {
  border-top: 0;
}

.billing-coach-row:nth-child(even),
.billing-model-row:nth-child(even) {
  background: var(--navy);
}

.billing-coach-name,
.billing-model-name {
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-coach-spend,
.billing-coach-mo,
.billing-coach-gens,
.billing-coach-avg,
.billing-model-spend,
.billing-model-gens {
  color: var(--white);
  font-family: var(--mono);
  font-weight: 700;
  text-align: right;
}

#billing-team-weekly {
  overflow-x: auto;
}

.billing-team-detail .bill-wk {
  margin: 0;
}

.billing-team-detail .bill-wk table {
  width: 100%;
  min-width: 520px;
}

.billing-team-detail .bill-wk th,
.billing-team-detail .bill-wk td {
  padding: 8px 12px;
}

@media (max-width: 1360px) {
  .billing-team-row {
    grid-template-columns:
      minmax(150px, 1.3fr)
      minmax(82px, 0.6fr)
      minmax(140px, 1fr)
      repeat(4, minmax(72px, 0.58fr))
      minmax(116px, 0.9fr);
  }

  .billing-team-total,
  .billing-team-cpp {
    display: none;
  }
}

@media (max-width: 1100px) {
  .billing-summary {
    grid-template-columns: 1fr;
  }

  .billing-account-panel {
    min-height: 0;
  }

  .billing-statusmix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .billing-team-row {
    grid-template-columns:
      minmax(160px, 1.4fr)
      minmax(82px, 0.6fr)
      minmax(150px, 1.15fr)
      repeat(3, minmax(76px, 0.65fr));
  }

  .billing-team-qz,
  .billing-team-top {
    display: none;
  }

  .billing-account-edit .bill-fields {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .billing-summary {
    margin-top: 4px;
  }

  .billing-cost-panel,
  .billing-account-panel,
  .billing-trend,
  .billing-team-detail {
    padding: 17px;
    border-radius: 10px;
  }

  .billing-kpis,
  .billing-statusmix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-kpi {
    min-height: 98px;
  }

  .billing-trend {
    overflow-x: auto;
  }

  .billing-trend-row {
    min-width: 540px;
  }

  .billing-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) auto;
  }

  .billing-period {
    grid-column: 1 / -1;
    min-height: 38px;
  }

  .billing-team-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .billing-team-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 15px;
    margin-bottom: 9px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--navy);
  }

  .billing-team-row:first-child {
    border-top: 1px solid var(--line);
  }

  .billing-team-row:hover,
  .billing-team-row.open {
    box-shadow: inset 4px 0 0 var(--gold);
  }

  .billing-team-name {
    font-size: 0.94rem;
  }

  .billing-team-status {
    justify-self: end;
  }

  .billing-budget {
    grid-column: 1 / -1;
  }

  .billing-team-spend,
  .billing-team-gens,
  .billing-team-avg {
    text-align: left;
  }

  .billing-team-qz,
  .billing-team-total,
  .billing-team-cpp,
  .billing-team-top {
    display: none;
  }

  .billing-account-edit,
  .billing-cost-detail,
  .billing-coach-table,
  .billing-model-table,
  #billing-team-weekly {
    padding: 13px;
  }

  .billing-coach-table,
  .billing-model-table {
    overflow-x: auto;
  }

  .billing-coach-row {
    min-width: 570px;
  }

  .billing-model-row {
    min-width: 400px;
  }
}

@media (max-width: 520px) {
  .billing-kpis,
  .billing-statusmix {
    grid-template-columns: 1fr;
  }

  .billing-kpi {
    min-height: 86px;
  }

  .billing-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
  }

  .billing-sort {
    grid-column: 1 / -1;
  }

  #billing-search,
  #billing-sort,
  #billing-dir {
    min-height: 48px;
  }

  .billing-team-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .billing-team-gens,
  .billing-team-avg {
    display: none;
  }

  .billing-team-spend {
    grid-column: 1 / -1;
  }

  .billing-detail-head {
    align-items: flex-start;
  }

  .billing-detail-name {
    font-size: 1.55rem;
  }

  .billing-account-edit .bill-fields {
    grid-template-columns: 1fr;
  }

  .billing-account-edit .bill-note {
    grid-column: auto;
  }

  .billing-account-edit .bill-save {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .billing-budget-fill,
  .billing-team-row {
    transition: none;
  }
}

/* ====================================================== PRODUCTION FACE v11
   LIBRARY — honest three-state browser on the v08 hooks. The engine currently
   owns All / Live / Archived plus Newest / A–Z; this layer makes those controls
   legible and touch-ready without inventing Draft, Scheduled, or quiz-detail
   behavior that has not been handed off yet. */

#screen-vault #vault-inner {
  display: grid;
  gap: 16px;
}

/* Schedule and session controls still drive the legacy season context. Keep
   them usable, but visually subordinate them so they do not read as Library
   filters (the quiz list itself is season-wide). */
#screen-vault .vault-sched {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-color: var(--line);
  border-radius: 10px;
}

#screen-vault .vault-sched summary {
  min-height: 44px;
  padding: 0 14px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#screen-vault .vault-sched[open] {
  padding-bottom: 14px;
  background: var(--navy);
}

#screen-vault .vault-sched[open] summary {
  margin-bottom: 10px;
  color: var(--white);
  border-bottom: 1px solid var(--line);
}

#screen-vault .vault-sched .vsr {
  padding-inline: 14px;
}

#screen-vault .vault-weeks {
  margin: 0;
  padding: 0 0 4px;
}

#screen-vault .vault-wk,
#screen-vault .vault-sess {
  min-height: 42px;
  background: transparent;
}

#screen-vault .vault-wk:hover,
#screen-vault .vault-sess:hover {
  background: var(--navy);
  border-color: var(--dim);
}

#screen-vault .vault-wk.on,
#screen-vault .vault-sess.on,
#screen-vault .vault-sess.game.on {
  background: var(--navy);
  color: var(--white);
  border-color: var(--dim);
  box-shadow: inset 3px 0 0 var(--gold);
}

#screen-vault .vault-wk-title,
#screen-vault .vp-head {
  margin: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#screen-vault .vault-sessions {
  gap: 6px;
  margin: 0;
}

#screen-vault .vp-grid {
  gap: 14px;
}

#screen-vault .vp-card {
  border-radius: 10px;
}

#screen-vault .vp-card.vp-wide {
  position: relative;
  overflow: hidden;
  padding: 22px;
  box-shadow: 0 16px 38px rgba(17, 25, 12, 0.05);
}

#screen-vault .vp-card.vp-wide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--gold);
}

#screen-vault .vp-card.vp-wide > .vp-card-h {
  margin: 2px 0 16px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Library control rail. These are live buttons/selects; the engine owns `.on`,
   `data-libtab`, and the sort values. */
#screen-vault .library-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

#screen-vault .library-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 8px;
}

#screen-vault .library-tab {
  min-width: 86px;
  min-height: 44px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--mist);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}

#screen-vault .library-tab:hover:not(.on) {
  background: var(--panel);
  border-color: var(--line);
  color: var(--white);
}

#screen-vault .library-tab.on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

#screen-vault .library-tab:focus-visible,
#screen-vault #library-sort-select:focus-visible,
#screen-vault .vq-reopen:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

#screen-vault .library-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

#screen-vault #library-sort-select {
  width: auto;
  min-width: 146px;
  margin: 0;
  padding: 9px 34px 9px 12px;
  background: var(--navy);
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Loading and empty states use the same quiet well so the browser does not
   collapse while its season-wide quiz list resolves. */
#screen-vault #vault-quizzes.pick-sub,
#screen-vault #vault-quizzes > .pick-sub {
  display: block;
  min-height: 84px;
  padding: 26px 20px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--mist);
  line-height: 1.5;
  text-align: center;
}

#screen-vault .vault-quiz-list {
  display: grid;
  gap: 8px;
  font-size: 0.86rem;
}

#screen-vault .vq-row,
#screen-vault .vq-row:first-of-type,
#screen-vault .vq-hint + .vq-row {
  min-height: 68px;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  gap: 8px 10px;
}

#screen-vault .vq-title {
  flex: 1 1 260px;
  min-width: 0;
  color: var(--white);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#screen-vault .vq-st {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

#screen-vault .vq-st.live {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

#screen-vault .vq-auds {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  gap: 5px;
}

#screen-vault .vq-chip {
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--navy);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  white-space: normal;
}

#screen-vault .vq-reopen {
  min-height: 44px;
  margin-left: auto;
  padding: 9px 13px;
  background: var(--navy);
  border-color: var(--dim);
  border-radius: 7px;
  color: var(--white);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), opacity 140ms var(--ease);
}

#screen-vault .vq-reopen:hover {
  border-color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
}

#screen-vault .vq-reopen:disabled {
  opacity: 0.58;
  cursor: wait;
  border-style: dashed;
}

#screen-vault .vq-note:not(:empty) {
  flex-basis: 100%;
  margin-top: 2px;
  padding: 9px 11px;
  background: rgba(225, 255, 0, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  color: var(--mist);
  font-size: 0.74rem;
  line-height: 1.45;
}

@media (max-width: 700px) {
  #screen-vault .vault-sched .vsr {
    flex-wrap: wrap;
  }

  #screen-vault .vault-sched .vsr-opp {
    flex-basis: calc(100% - 66px);
    max-width: none;
  }

  #screen-vault .vp-card.vp-wide {
    padding: 18px 14px 14px;
  }

  #screen-vault .vp-card.vp-wide::before {
    height: 3px;
  }

  #screen-vault .library-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  #screen-vault .library-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #screen-vault .library-tab {
    min-width: 0;
    min-height: 48px;
    padding-inline: 8px;
  }

  #screen-vault .library-sort {
    width: 100%;
    justify-content: space-between;
  }

  #screen-vault #library-sort-select {
    flex: 1;
    width: 100%;
    min-height: 48px;
    max-width: 210px;
  }

  #screen-vault .vq-row,
  #screen-vault .vq-row:first-of-type,
  #screen-vault .vq-hint + .vq-row {
    align-items: flex-start;
    padding: 14px;
  }

  #screen-vault .vq-title,
  #screen-vault .vq-auds {
    flex-basis: 100%;
  }

  #screen-vault .vq-reopen {
    width: 100%;
    min-height: 48px;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-vault .library-tab,
  #screen-vault .vq-reopen {
    transition: none;
  }
}

/* ================================================ PRODUCTION FACE v11.1
   LIBRARY — reference correction.

   CJ's live facelift mock makes Library the connected season-history hub. The
   engine has not emitted that complete shell yet, so this pass translates the
   reference language onto the honest hooks that exist: a quieter mixed-case
   header, compact week tiles, a five-card session rail, flat session detail,
   and subordinate quiz filters. Missing search / position legend / root nav /
   summary metrics remain an engine handoff; CSS does not counterfeit them. */

#screen-vault .home-wrap {
  padding-inline: clamp(13px, 3.4vw, 49px);
}

#screen-vault .pg-head {
  margin-bottom: 26px;
}

#screen-vault .pg-kick {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}

#screen-vault .pg-title {
  max-width: none;
  margin: 7px 0 9px;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: clamp(1.9rem, 3.1vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
  text-transform: none;
}

#screen-vault .pg-bar {
  width: 48px;
  height: 4px;
}

#screen-vault #vault-inner {
  min-width: 0;
  gap: 18px;
}

/* The reference moves schedule editing out of the overview. Until the engine
   hands off that placement, keep the live editor compact and plainly usable. */
#screen-vault .vault-sched {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  justify-self: start;
  background: var(--navy);
  border-color: var(--dim);
  border-radius: 8px;
}

#screen-vault .vault-sched summary {
  min-height: 44px;
  padding: 0 15px;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 0;
  text-transform: none;
}

#screen-vault .vault-sched[open] {
  width: 100%;
  padding: 0 0 14px;
  justify-self: stretch;
  background: var(--navy);
}

#screen-vault .vault-sched[open] summary {
  margin-bottom: 10px;
  padding-inline: 14px;
}

/* Season rail — the reference uses small rectangular week cards, not pills.
   Only `.on` is engine-proven today; past/future accent rails wait for state. */
#screen-vault .vault-weeks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

#screen-vault .vault-wk {
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  scroll-snap-align: start;
  background: var(--navy);
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 7px;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

#screen-vault .vault-wk:hover:not(.on) {
  background: var(--panel);
  border-color: var(--dim);
}

#screen-vault .vault-wk.on {
  background: var(--white);
  border-color: var(--white);
  color: var(--dg-mist);
  box-shadow: none;
}

#screen-vault .vault-wk-title {
  margin: 6px 0 0;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: clamp(1.55rem, 2.3vw, 2rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: none;
}

/* The five real session selectors are compact Library sections. Extra
   day/date/descriptions/counts are not invented here. */
#screen-vault .vault-sessions {
  display: grid;
  grid-template-columns: repeat(5, minmax(144px, 168px));
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 0 6px;
}

#screen-vault .vault-sess {
  min-width: 0;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 12px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  scroll-snap-align: start;
}

#screen-vault .vault-sess:hover:not(.on):not(.game) {
  background: var(--panel);
  border-color: var(--dim);
}

#screen-vault .vault-sess.on {
  background: var(--navy);
  border-color: var(--white);
  color: var(--white);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-vault .vault-sess.game {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
  box-shadow: none;
}

#screen-vault .vault-sess.game.on {
  background: var(--gold);
  border-color: var(--on-accent);
  color: var(--on-accent);
  box-shadow: inset 0 -3px 0 var(--on-accent);
}

/* Selected-session detail is an honest production addition below the mock's
   overview rail. Keep it flat so it does not overpower the Library root. */
#screen-vault .vault-panel {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

#screen-vault .vp-head {
  margin: 0 0 12px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#screen-vault .vp-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

#screen-vault .vp-card,
#screen-vault .vp-card.vp-wide {
  min-width: 0;
  padding: 16px;
  background: var(--navy);
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: none;
}

#screen-vault .vp-card.vp-wide::before {
  display: none;
}

#screen-vault .vp-card.vp-wide > .vp-card-h,
#screen-vault .vp-card-h {
  margin: 0 0 12px;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* All / Live / Archived are a secondary quiz drill-down. Their reference
   analogue is the quiet underline tab bar—not a primary yellow segmented rail. */
#screen-vault .library-controls {
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

#screen-vault .library-tabs {
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#screen-vault .library-tab {
  min-width: auto;
  min-height: 44px;
  padding: 2px 1px 10px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--mist);
  font-size: 0.78rem;
  font-weight: 700;
}

#screen-vault .library-tab:hover:not(.on) {
  background: transparent;
  border-color: var(--dim);
  color: var(--white);
}

#screen-vault .library-tab.on {
  background: transparent;
  border-color: var(--gold);
  color: var(--white);
}

#screen-vault .library-sort {
  margin-left: auto;
  padding-bottom: 5px;
}

#screen-vault #library-sort-select {
  min-width: 132px;
  min-height: 44px;
  background: var(--navy);
  border-color: var(--line);
  color: var(--white);
}

#screen-vault .vq-row,
#screen-vault .vq-row:first-of-type,
#screen-vault .vq-hint + .vq-row {
  min-height: 58px;
  padding: 11px 12px;
  background: var(--panel);
  border-color: var(--line);
  border-radius: 8px;
}

#screen-vault .vq-st {
  background: var(--navy);
}

#screen-vault .vq-reopen {
  background: var(--navy);
  border-color: var(--dim);
  color: var(--white);
}

#screen-vault .vault-wk:focus-visible,
#screen-vault .vault-sess:focus-visible,
#screen-vault .library-tab:focus-visible {
  outline: 3px solid var(--dim);
  outline-offset: -3px;
}

#screen-vault .vault-sched summary:focus-visible,
#screen-vault #library-sort-select:focus-visible,
#screen-vault .vq-reopen:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  #screen-vault .vault-sessions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 168px;
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
}

@media (max-width: 700px) {
  #screen-vault .pg-head {
    margin-bottom: 22px;
  }

  #screen-vault .pg-title {
    font-size: clamp(1.9rem, 9vw, 2.2rem);
  }

  #screen-vault .vault-sched {
    width: fit-content;
    justify-self: start;
  }

  #screen-vault .vault-sched[open] {
    width: 100%;
  }

  #screen-vault .vault-sched summary {
    min-height: 48px;
    line-height: 48px;
  }

  #screen-vault .vault-weeks {
    grid-auto-columns: 104px;
    scrollbar-width: none;
  }

  #screen-vault .vault-weeks::-webkit-scrollbar,
  #screen-vault .vault-sessions::-webkit-scrollbar,
  #screen-vault .library-tabs::-webkit-scrollbar {
    display: none;
  }

  #screen-vault .vault-wk {
    min-height: 54px;
  }

  #screen-vault .vault-wk-title {
    font-size: 1.65rem;
  }

  #screen-vault .vault-sessions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 168px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #screen-vault .vault-sess {
    min-height: 96px;
  }

  #screen-vault .vp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-vault .vp-card.vp-wide {
    padding: 15px 13px;
  }

  #screen-vault .library-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  #screen-vault .library-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #screen-vault .library-tab {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 48px;
  }

  #screen-vault .library-sort {
    width: 100%;
    margin-left: 0;
    padding: 0 0 8px;
  }

  #screen-vault #library-sort-select {
    width: min(210px, 72%);
    min-height: 48px;
  }

  #screen-vault .vq-reopen {
    width: 100%;
    min-height: 48px;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-vault .vault-weeks,
  #screen-vault .vault-sessions {
    scroll-behavior: auto;
  }
}

/* ================================================ PRODUCTION FACE v11.3
   LIBRARY — audience lens.

   Audience is a two-tier filter, not another card: side first, then the
   selected side's position groups. Keep the lens quiet so the quiz rows remain
   the content, while the black/yellow selected rail makes the active scope
   unmistakable in sun and at a glance. */

#screen-vault .library-audience-filter {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}

#screen-vault .library-audience-title,
#screen-vault .library-position-label {
  margin: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#screen-vault .library-audience-sides {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  width: min(100%, 408px);
  min-width: 0;
}

#screen-vault .library-audience-side,
#screen-vault .library-position-group {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border: 1px solid var(--dim);
  border-radius: 7px;
  color: var(--white);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  touch-action: manipulation;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

#screen-vault .library-audience-side {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  letter-spacing: 0.04em;
}

#screen-vault .library-audience-side:hover:not(.on),
#screen-vault .library-position-group:hover:not(.on) {
  background: var(--panel);
  border-color: var(--dim);
}

#screen-vault .library-audience-side.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* Do not assign display here: the engine owns this wrapper's hidden attribute. */
#screen-vault .library-position-filter {
  min-width: 0;
  padding-top: 2px;
}

#screen-vault .library-position-label {
  margin-bottom: 7px;
}

#screen-vault .library-position-groups {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 3px 16px 7px 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 3px 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

#screen-vault .library-position-group {
  flex: 0 0 auto;
  min-width: 74px;
  min-height: 44px;
  padding: 7px 13px;
  scroll-snap-align: start;
  white-space: nowrap;
}

#screen-vault .library-position-group.on {
  background: var(--panel);
  border-color: var(--on-accent);
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1px var(--on-accent),
    inset 0 -3px 0 var(--gold);
}

#screen-vault .library-audience-status {
  min-height: 1em;
  margin: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#screen-vault .library-audience-side:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

#screen-vault .library-position-group:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: -3px;
}

@media (max-width: 700px) {
  #screen-vault .library-audience-filter {
    gap: 9px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  #screen-vault .library-audience-sides {
    width: 100%;
    gap: 4px;
  }

  #screen-vault .library-audience-side {
    min-height: 48px;
    padding-inline: 8px;
  }

  #screen-vault .library-position-groups {
    padding-right: 24px;
    scrollbar-width: none;
  }

  #screen-vault .library-position-groups::-webkit-scrollbar {
    display: none;
  }

  #screen-vault .library-position-group {
    min-width: 84px;
    min-height: 48px;
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-vault .library-position-groups {
    scroll-behavior: auto;
  }

  #screen-vault .library-audience-side,
  #screen-vault .library-position-group {
    transition: none;
  }
}

/* ====================================================== PRODUCTION FACE v12
   ADMIN ACCOUNTS — collapsed team cards on Claude's engine-owned open/hidden
   states. The header stays the sole large toggle while its nested code, cost,
   and reset controls retain their own pointer and keyboard targets. */

#admin-accounts-body .dir-team {
  border-color: var(--dim);
  border-radius: 12px;
  background: var(--navy);
  box-shadow: 0 8px 22px rgba(17, 25, 12, 0.04);
  transition:
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#admin-accounts-body .dir-team.open {
  border-color: var(--on-accent);
  box-shadow: 0 12px 28px rgba(17, 25, 12, 0.07);
}

#admin-accounts-body .dir-team-head {
  min-height: 52px;
  padding: 10px 14px;
  background: var(--navy);
  border-bottom-color: transparent;
  color: var(--white);
  cursor: pointer;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#admin-accounts-body .dir-team-head:hover,
#admin-accounts-body .dir-team-head[aria-expanded='true'] {
  background: var(--panel);
}

#admin-accounts-body .dir-team-head[aria-expanded='true'] {
  border-bottom-color: var(--line);
  box-shadow: inset 4px 0 0 var(--gold);
}

#admin-accounts-body .dir-team-head:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: -3px;
}

#admin-accounts-body .dir-team-caret {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dim);
  border-radius: 8px;
  background: var(--panel);
  color: var(--white);
  font-size: 0;
  line-height: 1;
}

#admin-accounts-body .dir-team-caret::before {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: '';
  transform: rotate(-45deg);
  transition: transform 160ms var(--ease);
}

#admin-accounts-body .dir-team.open .dir-team-caret,
#admin-accounts-body .dir-team-head[aria-expanded='true'] .dir-team-caret {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

#admin-accounts-body .dir-team.open .dir-team-caret::before,
#admin-accounts-body .dir-team-head[aria-expanded='true'] .dir-team-caret::before {
  transform: rotate(45deg);
}

/* Do not assign display, visibility, height, or animation here: the engine's
   hidden attribute is the only authority for whether the member list exists. */
#admin-accounts-body .dir-members {
  padding: 8px 14px 12px;
  background: var(--panel);
}

#admin-accounts-body .dir-team-head input {
  cursor: text;
}

#admin-accounts-body .dir-team-head button,
#admin-accounts-body .dir-team-head a,
#admin-accounts-body .dir-team-head [role='button'] {
  cursor: pointer;
}

/* These four destinations use the existing dependency-free line-icon system.
   Global nav-item selectors keep desktop, mobile bar, and mobile sheet aligned. */
.app-nav-item[data-screen='depth-chart'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v3M5.5 11h13M5.5 11v3M12 11v3M18.5 11v3'/%3E%3Crect x='3' y='14' width='5' height='6' rx='1'/%3E%3Crect x='9.5' y='14' width='5' height='6' rx='1'/%3E%3Crect x='16' y='14' width='5' height='6' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v3M5.5 11h13M5.5 11v3M12 11v3M18.5 11v3'/%3E%3Crect x='3' y='14' width='5' height='6' rx='1'/%3E%3Crect x='9.5' y='14' width='5' height='6' rx='1'/%3E%3Crect x='16' y='14' width='5' height='6' rx='1'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='staff'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9' r='2.25'/%3E%3Cpath d='M5 16c0-2 1.5-3.2 3.5-3.2S12 14 12 16M14.5 8H19M14.5 12H19M14.5 16H18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9' r='2.25'/%3E%3Cpath d='M5 16c0-2 1.5-3.2 3.5-3.2S12 14 12 16M14.5 8H19M14.5 12H19M14.5 16H18'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='staff-dev'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='13' rx='2'/%3E%3Cpath d='m7 12.5 3-3 2.5 2.5L17 7.5M14.5 7.5H17V10M12 16.5V21M8 21h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='13' rx='2'/%3E%3Cpath d='m7 12.5 3-3 2.5 2.5L17 7.5M14.5 7.5H17V10M12 16.5V21M8 21h8'/%3E%3C/svg%3E");
}

.app-nav-item[data-screen='study-hall'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5c3.4-.8 6.4.1 9 2.5v11c-2.6-2.4-5.6-3.3-9-2.5zM21 5.5c-3.4-.8-6.4.1-9 2.5v11c2.6-2.4 5.6-3.3 9-2.5zM7 9.5h2M15 9.5h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5c3.4-.8 6.4.1 9 2.5v11c-2.6-2.4-5.6-3.3-9-2.5zM21 5.5c-3.4-.8-6.4.1-9 2.5v11c2.6-2.4 5.6-3.3 9-2.5zM7 9.5h2M15 9.5h2'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  #admin-accounts-body .dir-team-head {
    min-height: 48px;
    padding: 11px 12px;
    gap: 7px;
  }

  #admin-accounts-body .dir-code {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
  }

  #admin-accounts-body .dir-code-in {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #admin-accounts-body .dir-code > button {
    padding-inline: 7px;
  }

  #admin-accounts-body .dir-count {
    font-size: 0.7rem;
  }

  #admin-accounts-body .dir-members {
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #admin-accounts-body .dir-team,
  #admin-accounts-body .dir-team-head,
  #admin-accounts-body .dir-team-caret::before {
    transition: none;
  }
}

/* ================================================ PRODUCTION FACE v13
   COUNTDOWN COMMAND — coach home.

   One open command composition, ordered identity → this week → do-next
   actions → join code. The week mount is repainted asynchronously, so every
   state uses the same flexible grid without fixed child assumptions. */

#screen-home .coach-home {
  width: min(100%, 1120px);
  min-width: 0;
  margin: 0 auto;
  padding-top: clamp(8px, 1.8vw, 24px);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "logo team"
    "week week"
    "actions actions"
    "code code";
  column-gap: 22px;
  row-gap: 18px;
}

#screen-home .coach-home-logo {
  grid-area: logo;
  position: relative;
  width: 96px;
  height: 96px;
  align-self: end;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17, 25, 12, 0.05);
}

/* Empty-only mark: future uploaded content removes it automatically. */
#screen-home .coach-home-logo:empty::before {
  width: 34px;
  height: 42px;
  background: var(--gold);
  clip-path: polygon(42% 0, 100% 0, 63% 42%, 91% 42%, 24% 100%, 41% 56%, 8% 56%);
  content: '';
}

#screen-home .coach-home-logo > img,
#screen-home .coach-home-logo > picture,
#screen-home .coach-home-logo > svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

#screen-home .coach-home-logo > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

#screen-home .coach-home-team {
  grid-area: team;
  min-width: 0;
  max-width: 14ch;
  align-self: end;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(4.25rem, 8vw, 7.5rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#screen-home .coach-home-week {
  grid-area: week;
  position: relative;
  min-width: 0;
  min-height: 338px;
  padding: clamp(30px, 4.3vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "week-label location"
    "countdown countdown"
    "opponent opponent"
    "when when";
  align-content: center;
  column-gap: 18px;
  row-gap: 12px;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(17, 25, 12, 0.08);
}

#screen-home .coach-home-week::before {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 0;
  width: 5px;
  background: var(--gold);
  content: '';
}

#screen-home .coach-home-week > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

#screen-home .chw-wk {
  grid-area: week-label;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#screen-home .chw-wk::before {
  width: 24px;
  height: 4px;
  flex: 0 0 24px;
  background: var(--gold);
  content: '';
}

#screen-home .chw-count,
#screen-home .chw-bye {
  grid-area: countdown;
  max-width: 12ch;
  margin-top: 6px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(4.25rem, 8.4vw, 7.75rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.8;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-transform: uppercase;
}

#screen-home .chw-opp {
  grid-area: opponent;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#screen-home .chw-when {
  grid-area: when;
  color: var(--mist);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#screen-home .chw-loc {
  grid-area: location;
  justify-self: end;
  align-self: start;
  padding: 5px 9px;
  border: 1px solid var(--dim);
  border-radius: 999px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
}

#screen-home .coach-home-week > .pick-sub {
  grid-area: countdown;
  align-self: center;
  justify-self: start;
  margin: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#screen-home .coach-home-week-empty,
#screen-home .chw-empty {
  appearance: none;
  grid-area: countdown;
  min-width: 0;
  min-height: 52px;
  max-width: 100%;
  padding: 13px 16px;
  align-self: center;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--dim);
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    transform 150ms var(--ease);
}

#screen-home .coach-home-actions {
  grid-area: actions;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

#screen-home .coach-home-action {
  appearance: none;
  min-width: 0;
  min-height: 60px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  touch-action: manipulation;
  transition:
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease),
    transform 150ms var(--ease);
}

#screen-home .coach-home-action::after {
  flex: 0 0 auto;
  content: '\2192';
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
}

#screen-home #ch-build {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

#screen-home .coach-home-action:focus-visible,
#screen-home .coach-home-week-empty:focus-visible,
#screen-home .chw-empty:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

#screen-home .coach-home-code {
  grid-area: code;
  min-width: 0;
  margin-top: 8px;
  padding: 16px 2px 0;
  border-top: 1px solid var(--line);
  color: var(--mist);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#screen-home .coach-home-code strong {
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.13em;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .coach-home-action:hover {
    border-color: var(--dim);
    box-shadow: 0 10px 24px rgba(17, 25, 12, 0.08);
    transform: translateY(-1px);
  }

  #screen-home #ch-build:hover {
    border-color: var(--on-accent);
  }

  #screen-home .coach-home-week-empty:hover,
  #screen-home .chw-empty:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-accent);
    transform: translateY(-1px);
  }
}

#screen-home .coach-home-action:active,
#screen-home .coach-home-week-empty:active,
#screen-home .chw-empty:active {
  transform: translateY(0);
}

@media (max-width: 700px) {
  #screen-home .coach-home {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 14px;
    padding-top: 0;
  }

  #screen-home .coach-home-logo {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }

  #screen-home .coach-home-logo:empty::before {
    width: 23px;
    height: 29px;
  }

  #screen-home .coach-home-team {
    max-width: 15ch;
    font-size: clamp(3rem, 12.5vw, 4.6rem);
    line-height: 0.84;
  }

  #screen-home .coach-home-week {
    min-height: 304px;
    padding: 26px 22px 28px;
    border-radius: 12px;
  }

  #screen-home .coach-home-week::before {
    top: 24px;
    bottom: 24px;
    width: 4px;
  }

  #screen-home .chw-count,
  #screen-home .chw-bye {
    max-width: 11ch;
    font-size: clamp(3.55rem, 15vw, 5.25rem);
  }

  #screen-home .chw-opp {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
  }

  #screen-home .coach-home-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  #screen-home .coach-home-action {
    min-height: 56px;
    padding-inline: 16px;
  }

  #screen-home .coach-home-week-empty,
  #screen-home .chw-empty {
    min-height: 52px;
  }
}

@media (max-width: 430px) {
  #screen-home .coach-home {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
  }

  #screen-home .coach-home-logo {
    width: 56px;
    height: 56px;
  }

  #screen-home .coach-home-team {
    font-size: clamp(2.1rem, 10.5vw, 3.2rem);
  }

  #screen-home .coach-home-week {
    min-height: 286px;
    padding: 22px 18px 24px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "week-label"
      "location"
      "countdown"
      "opponent"
      "when";
    row-gap: 10px;
  }

  #screen-home .chw-loc {
    justify-self: start;
  }

  #screen-home .chw-count,
  #screen-home .chw-bye {
    max-width: 100%;
    margin-top: 4px;
    font-size: clamp(3.05rem, 15.5vw, 4rem);
  }

  #screen-home .chw-opp {
    font-size: clamp(1.75rem, 8.5vw, 2.1rem);
  }

  #screen-home .coach-home-week-empty,
  #screen-home .chw-empty {
    width: 100%;
    justify-self: stretch;
    text-align: center;
  }
}

@media (max-width: 360px) {
  #screen-home .coach-home {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 10px;
  }

  #screen-home .coach-home-logo {
    width: 48px;
    height: 48px;
  }

  #screen-home .coach-home-logo:empty::before {
    width: 19px;
    height: 24px;
  }

  #screen-home .coach-home-team {
    font-size: 1.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-home .coach-home-action,
  #screen-home .coach-home-week-empty,
  #screen-home .chw-empty {
    transition: none;
  }
}

/* ====================================================== PRODUCTION FACE v14
   FEEDBACK — a quiet footer entry on player/coach home and a compact command
   inbox on the admin home. Visibility and selection remain engine-owned: the
   form rides `hidden`, while type/filter choices ride `.on`. */

/* ENTRY — intentionally lighter than a card so it closes the home instead of
   competing with the work above it. The grid declaration keeps it full-width
   when it is the last child of Countdown Command's coach-home composition. */
#screen-home .feedback-entry {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: clamp(12px, 2vw, 24px);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#screen-home .feedback-open {
  appearance: none;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 2px;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--mist);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: left;
  touch-action: manipulation;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

/* The engine also hides this button while the form is open. Keep `hidden`
   authoritative by assigning its flex layout only while it is present. */
#screen-home .feedback-open:not([hidden]) {
  display: inline-flex;
}

#screen-home .feedback-open b {
  color: var(--white);
  font-weight: 800;
}

/* Do not assign display here: the engine's hidden attribute is the only
   authority for whether the form is open. */
#screen-home .feedback-form {
  width: min(100%, 680px);
  min-width: 0;
  padding: 14px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(17, 25, 12, 0.05);
}

#screen-home .feedback-types {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

#screen-home .feedback-type {
  appearance: none;
  position: relative;
  min-width: 72px;
  min-height: 44px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--white);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#screen-home .feedback-type.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-home .feedback-text.code-input {
  min-height: 104px;
  margin: 0;
  padding: 12px 13px;
  resize: vertical;
  border-color: var(--dim);
  line-height: 1.45;
}

#screen-home .feedback-text.code-input:focus {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
  border-color: var(--on-accent);
}

#screen-home .feedback-text.code-input::placeholder {
  color: var(--mist);
  opacity: 1;
}

#screen-home .feedback-actions {
  min-width: 0;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#screen-home .feedback-send.btn {
  width: auto;
  min-width: 96px;
  min-height: 44px;
  margin: 0;
  padding: 10px 18px;
}

#screen-home .feedback-send.btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

#screen-home .feedback-cancel.linklike {
  min-height: 44px;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  color: var(--mist);
  text-underline-offset: 3px;
}

#screen-home .feedback-status {
  min-height: 1.25em;
  margin: 7px 0 0;
  color: var(--ink-low);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#screen-home .feedback-open:focus-visible,
#screen-home .feedback-type:focus-visible,
#screen-home .feedback-send:focus-visible,
#screen-home .feedback-cancel:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .feedback-open:hover {
    color: var(--white);
    background: var(--panel);
  }

  #screen-home .feedback-type:hover:not(.on) {
    border-color: var(--dim);
    background: var(--navy);
  }
}

/* INBOX — one raised command surface, with its information arranged as rows
   rather than nested cards. Category is always written as well as colored. */
#feedback-inbox {
  min-width: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(17, 25, 12, 0.05);
}

#feedback-inbox > .pick-sub {
  margin: 0;
  padding: 18px;
}

#feedback-inbox .fbk-head {
  min-width: 0;
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

#feedback-inbox .fbk-h {
  color: var(--white);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

#feedback-inbox .fbk-n {
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  border-radius: 999px;
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.09em;
}

#feedback-inbox .fbk-filters {
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  padding: 5px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 5px;
  scrollbar-width: thin;
}

#feedback-inbox .fbk-filter {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 7px 11px;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--mist);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#feedback-inbox .fbk-filter.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#feedback-inbox .fbk-list {
  min-width: 0;
}

#feedback-inbox .fbk-list > .pick-sub {
  margin: 0;
  padding: 22px 16px;
  text-align: center;
}

#feedback-inbox .fbk-item {
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: 13px 15px 13px 18px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--line);
  background: var(--navy);
  box-shadow: inset 3px 0 0 var(--gold);
  transition: background-color 150ms var(--ease);
}

#feedback-inbox .fbk-item:first-child {
  border-top: 0;
}

#feedback-inbox .fbk-item.seen {
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--dim);
}

/* Urgency is a row state, not another chip. Keep the engine-emitted label
   available to assistive tech while the whole feedback box carries SIQ's
   functional wrong-answer red treatment. */
#feedback-inbox .fbk-item:has(.fbk-urgent) {
  background: var(--bad-bg);
  border-top-color: var(--bad);
  box-shadow: inset 4px 0 0 var(--bad);
}

#feedback-inbox .fbk-body {
  min-width: 0;
}

#feedback-inbox .fbk-cat {
  width: 92px;
  min-height: 28px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.59rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

#feedback-inbox .fbk-cat-bug {
  background: var(--navy);
  border-color: var(--on-accent);
  color: var(--on-accent);
  box-shadow: inset 4px 0 0 var(--on-accent);
}

#feedback-inbox .fbk-cat-idea {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

#feedback-inbox .fbk-cat-question {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
}

#feedback-inbox .fbk-cat-praise {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#feedback-inbox .fbk-cat-complaint {
  background: var(--navy-deep);
  border-color: var(--on-accent);
  color: var(--on-accent);
}

#feedback-inbox .fbk-cat-other {
  background: var(--navy);
  border-color: var(--dim);
  border-style: dashed;
  color: var(--mist);
}

#feedback-inbox .fbk-sum {
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#feedback-inbox .fbk-urgent {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#feedback-inbox .fbk-who {
  margin-top: 5px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

#feedback-inbox .fbk-resolve {
  appearance: none;
  min-width: 84px;
  min-height: 44px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--dim);
  border-radius: 7px;
  color: var(--white);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease);
}

#feedback-inbox .fbk-resolve:disabled {
  opacity: 0.55;
  cursor: default;
}

#feedback-inbox .fbk-filter:focus-visible,
#feedback-inbox .fbk-resolve:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  #feedback-inbox .fbk-filter:hover:not(.on) {
    border-color: var(--dim);
    color: var(--white);
  }

  #feedback-inbox .fbk-resolve:hover:not(:disabled) {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-accent);
  }
}

@media (max-width: 700px) {
  #screen-home .feedback-entry {
    margin-top: 10px;
    padding-top: 10px;
  }

  #screen-home .feedback-open,
  #screen-home .feedback-type,
  #screen-home .feedback-send.btn,
  #screen-home .feedback-cancel.linklike {
    min-height: 48px;
  }

  #screen-home .feedback-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #screen-home .feedback-type {
    min-width: 0;
  }

  #screen-home .feedback-text.code-input {
    min-height: 116px;
    font-size: 1rem;
  }

  #feedback-inbox .fbk-head {
    padding: 13px 12px 10px;
  }

  #feedback-inbox .fbk-filters {
    flex: 1 0 100%;
    width: 100%;
    margin-left: 0;
    padding: 5px;
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-padding-inline: 5px;
  }

  #feedback-inbox .fbk-filter {
    min-height: 48px;
    padding-inline: 13px;
  }

  #feedback-inbox .fbk-item {
    min-height: 0;
    padding: 13px 12px 14px 15px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "category resolve"
      "body body";
    align-items: center;
    gap: 10px 12px;
  }

  #feedback-inbox .fbk-cat {
    grid-area: category;
    width: max-content;
    min-width: 84px;
  }

  #feedback-inbox .fbk-body {
    grid-area: body;
  }

  #feedback-inbox .fbk-resolve {
    grid-area: resolve;
    justify-self: end;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-home .feedback-open,
  #screen-home .feedback-type,
  #feedback-inbox .fbk-filters,
  #feedback-inbox .fbk-filter,
  #feedback-inbox .fbk-item,
  #feedback-inbox .fbk-resolve {
    scroll-behavior: auto;
    transition: none;
  }
}

/* ====================================================== PRODUCTION FACE v15
   MISSION CONTROL — admin home.

   One operator sequence: identity, platform readout, what needs action,
   View-As, feedback, then the existing administration tools. Vitals and
   attention repaint asynchronously; FACE never assumes their initial copy or
   hardcodes their values. */

#screen-home .admin-home,
#screen-home #admin-tools {
  width: min(100%, 1120px);
  min-width: 0;
  margin-inline: auto;
}

#screen-home .admin-home {
  display: grid;
  gap: 20px;
}

#screen-home .admin-home-head {
  min-width: 0;
  padding: clamp(8px, 1.5vw, 20px) 0 6px;
}

#screen-home .admin-home-kick {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#screen-home .admin-home-kick::before {
  width: 26px;
  height: 4px;
  flex: 0 0 26px;
  background: var(--gold);
  content: '';
}

#screen-home .admin-home-title {
  max-width: 12ch;
  margin-top: 8px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(4.5rem, 8.2vw, 7.4rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* VITALS — one instrument with four cells, not another KPI-card wall. */
#screen-home #admin-home-vitals {
  min-width: 0;
}

#screen-home .admin-vitals-grid {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(17, 25, 12, 0.065);
}

#screen-home .admin-vital {
  min-width: 0;
  min-height: 118px;
  padding: 19px 18px 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy);
}

#screen-home .admin-vital-v {
  min-width: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.25vw, 2.85rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

#screen-home .admin-vital-l {
  margin-top: 10px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#screen-home .admin-vital-s {
  margin-top: 5px;
  color: var(--mist);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Loading and setup failure share the same engine hook/copy shape, so this is
   deliberately stable and quiet rather than an indefinite loading animation. */
#screen-home #admin-home-vitals > .pick-sub {
  min-height: 118px;
  margin: 0;
  padding: 22px;
  display: flex;
  align-items: center;
  background: var(--navy);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* ATTENTION — transparent action rail. An empty mount is the honest transient
   (or billing-error) state; it consumes no fake dashboard space. */
#screen-home #admin-home-attention:empty {
  display: none;
}

#screen-home #admin-home-attention:not(:empty) {
  min-width: 0;
  padding: 13px 0;
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#screen-home .admin-attention-lbl {
  flex: 0 0 auto;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#screen-home .admin-flags {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

#screen-home .admin-flag {
  appearance: none;
  min-width: 0;
  min-height: 44px;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--navy);
  border: 1px solid var(--dim);
  border-radius: 999px;
  color: var(--white);
  cursor: pointer;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  touch-action: manipulation;
  white-space: nowrap;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease),
    transform 150ms var(--ease);
}

#screen-home .admin-flag::after {
  flex: 0 0 auto;
  content: '\2192';
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1;
}

#screen-home .admin-flag.urgent {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
  font-weight: 800;
  box-shadow: inset 4px 0 0 var(--bad);
}

#screen-home .admin-attention-clear {
  min-height: 44px;
  padding: 8px 2px;
  display: flex;
  align-items: center;
  color: var(--mist);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#screen-home .admin-flag:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .admin-flag:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-accent);
    transform: translateY(-1px);
  }

  #screen-home .admin-flag.urgent:hover {
    background: var(--bad-bg);
    border-color: var(--bad);
    color: var(--bad);
  }
}

#screen-home .admin-flag:active {
  transform: translateY(0);
}

/* VIEW-AS — a low utility rail. Native select order and the player's hidden
   state remain engine-owned; FACE assigns no display/order to any select. */
#screen-home .admin-home-viewas {
  min-width: 0;
  min-height: 64px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 9px 11px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
}

#screen-home .admin-home-viewas > .admin-viewbar-lbl {
  flex: 0 0 auto;
  color: var(--mist);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

#screen-home .admin-home-viewas > select.code-input {
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 34px 8px 11px;
  background: var(--navy);
  border-color: var(--dim);
  font-size: 0.82rem;
}

#screen-home .admin-home-viewas > #admin-view-team {
  flex: 1 1 260px;
}

#screen-home .admin-home-viewas > #admin-view-role {
  flex: 0 1 170px;
}

#screen-home .admin-home-viewas > #admin-view-player {
  flex: 1 1 230px;
}

#screen-home .admin-home-viewas > .admin-viewbar-hint {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--mist);
  font-size: 0.68rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#screen-home .admin-home-viewas > .admin-viewbar-hint:empty {
  display: none;
}

#screen-home .admin-home-viewas > select.code-input:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
  border-color: var(--on-accent);
}

/* The v14 inbox is already the complete surface; this wrapper contributes only
   rhythm and a reliable landing point for the feedback attention flag. */
#screen-home .admin-home-panel {
  min-width: 0;
  padding-top: 4px;
}

/* The inbox already emits its own .fbk-h heading; suppress the generic wrapper
   label so Mission Control never announces or shows "Feedback" twice. */
#screen-home .admin-home-panel > .section-title {
  display: none;
}

#screen-home .admin-home-panel #feedback-inbox {
  scroll-margin-top: 96px;
}

/* Observe/triage ends here; existing team administration stays on the open
   canvas below, aligned to the same Mission Control measure. */
#screen-home #admin-tools {
  margin-top: 50px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

#screen-home #admin-tools > .section-title:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  #screen-home .admin-vitals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-home .admin-vital {
    min-height: 108px;
  }
}

@media (max-width: 700px) {
  #screen-home .admin-home {
    gap: 16px;
  }

  #screen-home .admin-home-head {
    padding-top: 0;
  }

  #screen-home .admin-home-title {
    max-width: 12ch;
    font-size: clamp(2.85rem, 14vw, 4.4rem);
    line-height: 0.84;
  }

  #screen-home .admin-vital {
    min-height: 102px;
    padding: 15px 13px 14px;
  }

  #screen-home .admin-vital-v {
    font-size: clamp(1.45rem, 7vw, 2.2rem);
  }

  #screen-home .admin-vital-l {
    margin-top: 8px;
    font-size: 0.6rem;
  }

  #screen-home .admin-vital-s {
    font-size: 0.66rem;
  }

  #screen-home #admin-home-vitals > .pick-sub {
    min-height: 102px;
    padding: 18px 15px;
  }

  #screen-home #admin-home-attention:not(:empty) {
    display: block;
    padding-block: 11px;
  }

  #screen-home .admin-attention-lbl {
    display: block;
    margin: 0 0 7px;
  }

  #screen-home .admin-flags {
    width: 100%;
    max-width: 100%;
    padding: 5px 22px 5px 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 5px 22px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #screen-home .admin-flags::-webkit-scrollbar {
    display: none;
  }

  #screen-home .admin-flag {
    flex: 0 0 auto;
    min-height: 48px;
    scroll-snap-align: start;
  }

  #screen-home .admin-attention-clear {
    min-height: 48px;
  }

  #screen-home .admin-home-viewas {
    min-height: 0;
    padding: 13px 12px;
    align-items: stretch;
    gap: 8px;
  }

  #screen-home .admin-home-viewas > .admin-viewbar-lbl,
  #screen-home .admin-home-viewas > select.code-input,
  #screen-home .admin-home-viewas > .admin-viewbar-hint {
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
  }

  #screen-home .admin-home-viewas > #admin-view-team,
  #screen-home .admin-home-viewas > #admin-view-role,
  #screen-home .admin-home-viewas > #admin-view-player {
    flex: 1 0 100%;
  }

  #screen-home .admin-home-viewas > select.code-input {
    min-height: 48px;
    font-size: 1rem;
  }

  #screen-home .admin-home-viewas > .admin-viewbar-hint {
    padding-top: 2px;
  }

  #screen-home .admin-home-panel #feedback-inbox {
    scroll-margin-top: 76px;
  }

  #screen-home #admin-tools {
    margin-top: 34px;
    padding-top: 24px;
  }
}

@media (max-width: 360px) {
  #screen-home .admin-home-title {
    font-size: 2.5rem;
  }

  #screen-home .admin-vital-v {
    font-size: 1.2rem;
  }

  #screen-home .admin-vital {
    padding-inline: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-home .admin-flags {
    scroll-behavior: auto;
  }

  #screen-home .admin-flag {
    transition: none;
  }

  #screen-home .admin-flag:hover,
  #screen-home .admin-flag:active {
    transform: none;
  }
}

/* ====================================================== PRODUCTION FACE v16
   NORTH-STAR COURSE CORRECTION — calm operational software with an athletic
   edge. The shell geometry was already right; this layer restores one quiet
   product hierarchy inside it: Atkinson-led page titles, flat bordered cards,
   compact controls, restrained elevation, and a strict semantic accent budget.
   Every existing engine hook, hidden state, async mount, and control order is
   preserved. */

:root {
  --face-type: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --face-card-radius: 10px;
  --face-control-radius: 7px;
  --face-card-shadow: none;
}

/* Shared accessibility utility. Keep clipped content in the accessibility tree:
   the engine uses this for headings, status text, and live-region context. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------- SHARED PRODUCT UI */

.pg-head {
  margin: 0 0 24px;
}

.pg-kick {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pg-title {
  max-width: none;
  margin: 6px 0 9px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.125rem, 3.15vw, 2.48rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
}

.pg-bar {
  width: 46px;
  height: 3px;
}

.pg-head-sm .pg-title {
  font-size: 1.45rem;
  line-height: 1.08;
}

.pg-head-sm .pg-bar {
  width: 36px;
  height: 3px;
}

.app-sidebar .app-nav-item {
  font-family: var(--face-type);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
}

.app-sidebar .app-nav-item.active {
  font-weight: 700;
}

.app-actions .btn-ghost,
.app-actions .linklike {
  text-decoration: none;
}

.app-action {
  min-height: 42px;
  font-size: 0.75rem;
}

.kpi,
.tile,
.onboard-card,
.topic-card,
.aud-group,
.aud-summary,
.share-row,
.rank-card,
.lb-team-box,
.side-tile,
.kid-tile,
.pgm-tile,
.pgm-card {
  border-radius: var(--face-card-radius);
  box-shadow: var(--face-card-shadow);
}

.tile:hover,
.pgm-tile:hover,
.pgm-card:hover {
  box-shadow: none;
  transform: none;
}

/* ------------------------------------------------------------ FRONT DOOR */

#screen-landing .hero h1 {
  max-width: 10ch;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(3.75rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-transform: none;
}

#screen-landing .hero::after {
  width: clamp(44px, 6vw, 72px);
  height: 4px;
}

#screen-landing .hero .tag::before {
  width: 24px;
  height: 3px;
}

#screen-landing .entry-card {
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-landing .entry-card.individual {
  border-left: 3px solid var(--gold);
  box-shadow: none;
}

#screen-landing .entry-card h2 {
  font-family: var(--face-type);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------- COACH HOME v13 */

#screen-home .coach-home {
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 14px;
  padding-top: 4px;
}

#screen-home .coach-home-logo {
  width: 72px;
  height: 72px;
  background: var(--panel);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-home .coach-home-logo:empty::before {
  width: 22px;
  height: 28px;
  background: var(--dim);
}

#screen-home .coach-home-logo > img,
#screen-home .coach-home-logo > picture,
#screen-home .coach-home-logo > svg,
#screen-home .coach-home-logo > picture > img {
  padding: 7px;
}

#screen-home .coach-home-logo > picture {
  padding: 0;
}

#screen-home .coach-home-team {
  max-width: 24ch;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.125rem, 3.15vw, 2.48rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
}

#screen-home .coach-home-week {
  min-height: 220px;
  padding: clamp(22px, 3vw, 28px);
  column-gap: 16px;
  row-gap: 9px;
  background: var(--navy);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-home .coach-home-week::before {
  top: 22px;
  bottom: 22px;
  width: 3px;
}

#screen-home .chw-wk {
  color: var(--mist);
  font-family: var(--face-type);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#screen-home .chw-wk::before {
  content: none;
}

#screen-home .chw-count,
#screen-home .chw-bye {
  max-width: 18ch;
  margin-top: 4px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.65rem, 5.2vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
  text-transform: none;
}

#screen-home .chw-opp {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: none;
}

#screen-home .chw-when {
  font-size: 0.86rem;
  font-weight: 400;
}

#screen-home .chw-loc {
  padding: 5px 9px;
  background: var(--panel);
  border-color: var(--line);
  color: var(--white);
  font-family: var(--face-type);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

#screen-home .coach-home-week:has(> .coach-home-week-empty),
#screen-home .coach-home-week:has(> .chw-empty),
#screen-home .coach-home-week:has(> .pick-sub) {
  min-height: 132px;
  align-content: center;
}

#screen-home .coach-home-week-empty,
#screen-home .chw-empty {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--face-control-radius);
}

#screen-home .coach-home-actions {
  gap: 10px;
}

#screen-home .coach-home-action {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--face-control-radius);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: none;
}

#screen-home #ch-build {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .coach-home-action:hover {
    background: var(--panel);
    border-color: var(--dim);
    box-shadow: none;
    transform: none;
  }

  #screen-home #ch-build:hover {
    background: var(--on-accent);
    border-color: var(--on-accent);
    color: var(--dg-mist);
  }
}

/* --------------------------------------------------------- FEEDBACK v14 */

#screen-home .feedback-form {
  background: var(--navy);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-home .feedback-type.on,
#feedback-inbox .fbk-filter.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#screen-home .feedback-send.btn {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: none;
}

#screen-home .feedback-status {
  color: var(--mist);
  font-weight: 400;
}

#feedback-inbox {
  background: var(--navy);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#feedback-inbox .fbk-head {
  padding: 12px 14px;
  background: var(--navy);
}

#feedback-inbox .fbk-h {
  font-family: var(--face-type);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
}

#feedback-inbox .fbk-filter {
  min-height: 38px;
  padding: 7px 10px;
  background: var(--panel);
  border-radius: var(--face-control-radius);
  font-size: 0.72rem;
}

#feedback-inbox .fbk-item {
  min-height: 68px;
  padding: 12px 14px 12px 16px;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 12px;
  background: var(--navy);
  box-shadow: inset 2px 0 0 var(--gold);
}

#feedback-inbox .fbk-item.seen {
  background: var(--panel);
  box-shadow: inset 2px 0 0 var(--dim);
}

#feedback-inbox .fbk-cat {
  width: auto;
  min-width: 72px;
  min-height: 26px;
  padding: 4px 8px;
  background: var(--panel);
  border-color: var(--line);
  border-radius: 999px;
  color: var(--white);
  box-shadow: none;
  font-family: var(--face-type);
  font-size: 0.66rem;
  letter-spacing: 0.035em;
}

#feedback-inbox .fbk-cat-bug {
  background: var(--navy);
  border-color: var(--dim);
  color: var(--white);
  box-shadow: none;
}

#feedback-inbox .fbk-cat-idea {
  background: var(--panel);
  border-color: var(--line);
  color: var(--white);
}

#feedback-inbox .fbk-cat-question {
  background: var(--navy);
  border-color: var(--on-accent);
  color: var(--white);
}

#feedback-inbox .fbk-cat-praise {
  background: var(--navy);
  border-color: var(--dim);
  color: var(--mist);
  box-shadow: inset 0 -2px 0 var(--dim);
}

#feedback-inbox .fbk-cat-complaint {
  background: var(--panel);
  border-color: var(--on-accent);
  color: var(--white);
}

#feedback-inbox .fbk-cat-other {
  background: var(--navy);
  border-color: var(--dim);
  border-style: dashed;
  color: var(--mist);
}

#feedback-inbox .fbk-sum {
  font-size: 0.875rem;
}

#feedback-inbox .fbk-who {
  color: var(--mist);
  font-family: var(--face-type);
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0;
}

#feedback-inbox .fbk-resolve {
  min-width: 72px;
  min-height: 44px;
  padding: 8px 9px;
  background: transparent;
  border-color: transparent;
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  #feedback-inbox .fbk-resolve:hover:not(:disabled) {
    background: var(--panel);
    border-color: var(--line);
    color: var(--white);
  }
}

/* Urgency stays a whole-row functional signal: no redundant visible tag and
   no decorative yellow pairing. CJ explicitly chose the wrong-answer red. */
#feedback-inbox .fbk-item:has(.fbk-urgent) {
  background: var(--bad-bg);
  border-top-color: var(--bad);
  box-shadow: inset 4px 0 0 var(--bad);
}

/* ------------------------------------------------- MISSION CONTROL v15 */

#screen-home .admin-home {
  gap: 18px;
}

#screen-home .admin-home-head {
  padding: 4px 0 2px;
}

#screen-home .admin-home-kick {
  gap: 8px;
  font-family: var(--face-type);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
}

#screen-home .admin-home-kick::before {
  width: 20px;
  height: 3px;
  flex-basis: 20px;
}

#screen-home .admin-home-title {
  max-width: none;
  margin-top: 6px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.125rem, 3.15vw, 2.48rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
}

#screen-home .admin-vitals-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#screen-home .admin-vital {
  min-height: 112px;
  padding: 16px;
  justify-content: flex-start;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-home .admin-vital-v {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

#screen-home .admin-vital-l {
  margin-top: 9px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

#screen-home .admin-vital-s {
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.4;
}

#screen-home #admin-home-vitals > .pick-sub {
  min-height: 92px;
  padding: 18px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
  font-family: var(--face-type);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
}

#screen-home .admin-attention-lbl {
  font-family: var(--face-type);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

#screen-home .admin-flag {
  background: var(--navy);
  border-color: var(--line);
  color: var(--white);
  font-weight: 700;
}

#screen-home .admin-flag::after {
  color: var(--mist);
  font-size: 0.76rem;
}

#screen-home .admin-flag.urgent {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
  box-shadow: inset 4px 0 0 var(--bad);
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .admin-flag:hover {
    background: var(--panel);
    border-color: var(--dim);
    color: var(--white);
    transform: none;
  }

  #screen-home .admin-flag.urgent:hover {
    background: var(--bad-bg);
    border-color: var(--bad);
    color: var(--bad);
  }
}

#screen-home .admin-home-viewas {
  min-height: 58px;
  padding: 8px 10px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-home .admin-home-viewas > .admin-viewbar-lbl {
  font-family: var(--face-type);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

#screen-home .admin-home-viewas > select.code-input {
  min-height: 42px;
  background: var(--panel);
  border-color: var(--line);
}

#screen-home .admin-home-viewas > .admin-viewbar-hint {
  font-family: var(--face-type);
  font-size: 0.75rem;
  letter-spacing: 0;
}

#screen-home .admin-home-panel {
  padding-top: 0;
}

#screen-home #admin-tools {
  margin-top: 26px;
  padding: 20px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-home #admin-tools > .section-title {
  margin: 22px 0 10px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

#screen-home #admin-tools > .section-title:first-child {
  margin-top: 0;
}

#screen-home #admin-tools > .section-title::before {
  width: 14px;
  height: 2px;
  background: var(--dim);
  content: '';
}

#screen-home #admin-tools .code-input {
  background: var(--panel);
  border-color: var(--line);
}

#screen-home #admin-tools .btn-gold {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: none;
}

#screen-home #admin-tools > .pick-sub {
  color: var(--mist);
  font-size: 0.78rem;
  line-height: 1.5;
}

#screen-home #admin-tools > .linklike {
  min-height: 44px;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------ ACCOUNTS v12 */

#admin-accounts-body .dir-team {
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#admin-accounts-body .dir-team.open {
  border-color: var(--dim);
  box-shadow: none;
}

#admin-accounts-body .dir-team-head {
  min-height: 48px;
  padding: 9px 12px;
  background: var(--navy);
}

#admin-accounts-body .dir-team-head:hover,
#admin-accounts-body .dir-team-head[aria-expanded='true'] {
  background: var(--panel);
}

#admin-accounts-body .dir-team-head[aria-expanded='true'] {
  border-bottom-color: var(--line);
  box-shadow: inset 3px 0 0 var(--gold);
}

#admin-accounts-body .dir-team-caret {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-color: var(--line);
  border-radius: var(--face-control-radius);
  background: var(--navy);
}

#admin-accounts-body .dir-team.open .dir-team-caret,
#admin-accounts-body .dir-team-head[aria-expanded='true'] .dir-team-caret {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
}

#admin-accounts-body .dir-members {
  padding: 6px 12px 10px;
  background: var(--navy);
}

#admin-accounts-body .dir-role.head {
  background: var(--on-accent);
  color: var(--dg-mist);
}

#admin-accounts-body .dir-role.coach,
#admin-accounts-body .dir-role.admin {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
}

#admin-accounts-body .dir-details {
  background: transparent;
  border-color: var(--line);
  color: var(--mist);
}

#admin-accounts-body .dir-reset {
  background: transparent;
  border-color: var(--bad);
  color: var(--bad);
}

@media (hover: hover) and (pointer: fine) {
  #admin-accounts-body .dir-reset:hover {
    background: var(--bad-bg);
    border-color: var(--bad);
    color: var(--bad);
  }
}

/* ------------------------------------------------------- LIBRARY v11 */

#screen-vault .vault-sessions {
  grid-template-columns: repeat(5, minmax(120px, 144px));
  gap: 7px;
}

#screen-vault .vault-weeks {
  grid-auto-columns: 96px;
  gap: 5px;
}

#screen-vault .vault-sess {
  min-height: 64px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.2;
}

#screen-vault .vault-wk.on {
  box-shadow: inset 0 -2px 0 var(--gold);
}

#screen-vault .vp-card,
#screen-vault .vp-card.vp-wide,
#screen-vault .vq-row,
#screen-vault .vq-row:first-of-type,
#screen-vault .vq-hint + .vq-row {
  box-shadow: none;
}

#screen-vault .library-audience-title,
#screen-vault .library-position-label {
  font-family: var(--face-type);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

#screen-vault .library-audience-status {
  font-family: var(--face-type);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

#screen-vault .library-audience-side,
#screen-vault .library-position-group {
  border-color: var(--line);
}

#screen-vault .library-position-group.on {
  background: var(--panel);
  border-color: var(--on-accent);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#screen-vault .library-tab {
  font-weight: 400;
}

#screen-vault .library-tab.on {
  font-weight: 700;
}

#screen-vault .vq-row,
#screen-vault .vq-row:first-of-type,
#screen-vault .vq-hint + .vq-row {
  background: transparent;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

#screen-vault .vq-reopen {
  background: transparent;
  border-color: transparent;
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1180px) {
  #screen-vault .vault-sessions {
    grid-auto-columns: 136px;
  }
}

@media (max-width: 700px) {
  .pg-head {
    margin-bottom: 22px;
  }

  .pg-title {
    font-size: 2.125rem;
  }

  #screen-landing .hero h1 {
    font-size: clamp(3.15rem, 13vw, 4.5rem);
  }

  #screen-home .coach-home {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 12px;
  }

  #screen-home .coach-home-logo {
    width: 52px;
    height: 52px;
    border-radius: 8px;
  }

  #screen-home .coach-home-logo:empty::before {
    width: 17px;
    height: 22px;
  }

  #screen-home .coach-home-team {
    font-size: clamp(1.85rem, 8vw, 2.125rem);
    line-height: 1;
  }

  #screen-home .coach-home-week {
    min-height: 0;
    padding: 20px 18px;
    border-radius: var(--face-card-radius);
  }

  #screen-home .coach-home-week::before {
    top: 18px;
    bottom: 18px;
    width: 3px;
  }

  #screen-home .chw-count,
  #screen-home .chw-bye {
    max-width: 16ch;
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  #screen-home .chw-opp {
    font-size: 1.35rem;
  }

  #screen-home .coach-home-action {
    min-height: 48px;
  }

  #screen-home .coach-home-week:has(> .coach-home-week-empty),
  #screen-home .coach-home-week:has(> .chw-empty),
  #screen-home .coach-home-week:has(> .pick-sub) {
    min-height: 112px;
  }

  #feedback-inbox .fbk-head {
    padding: 12px;
  }

  #feedback-inbox .fbk-filters {
    flex: 1 0 100%;
    width: 100%;
    margin-left: 0;
    padding: 4px 18px 4px 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0 18px;
    scrollbar-width: none;
  }

  #feedback-inbox .fbk-filters::-webkit-scrollbar {
    display: none;
  }

  #feedback-inbox .fbk-filter {
    flex: 0 0 auto;
    min-height: 48px;
  }

  #feedback-inbox .fbk-who {
    font-size: 0.75rem;
  }

  #feedback-inbox .fbk-resolve {
    min-height: 48px;
  }

  #screen-home .admin-home {
    gap: 16px;
  }

  #screen-home .admin-home-title {
    font-size: 2.125rem;
    line-height: 1;
  }

  #screen-home .admin-vitals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #screen-home .admin-vital {
    min-height: 100px;
    padding: 14px 12px;
  }

  #screen-home .admin-vital-v {
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }

  #screen-home .admin-vital-l {
    font-size: 0.64rem;
  }

  #screen-home .admin-vital-s {
    font-size: 0.72rem;
  }

  #screen-home .admin-home-viewas {
    padding: 11px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #screen-home .admin-home-viewas > .admin-viewbar-lbl,
  #screen-home .admin-home-viewas > #admin-view-team,
  #screen-home .admin-home-viewas > .admin-viewbar-hint {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }

  #screen-home .admin-home-viewas > #admin-view-role,
  #screen-home .admin-home-viewas > #admin-view-player {
    width: 100%;
    max-width: none;
  }

  #screen-home .admin-home-viewas:has(#admin-view-player[hidden]) > #admin-view-role {
    grid-column: 1 / -1;
  }

  #screen-home .admin-home-viewas > select.code-input {
    min-height: 48px;
    font-size: 1rem;
  }

  #screen-home #admin-tools {
    margin-top: 22px;
    padding: 16px 14px;
  }

  #screen-vault .vault-sessions {
    grid-auto-columns: 132px;
  }

  #screen-vault .vault-sess {
    min-height: 64px;
  }
}

@media (max-width: 430px) {
  #screen-landing .hero h1 {
    font-size: clamp(3rem, 15vw, 3.75rem);
  }

  #screen-home .coach-home-week {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "week-label location"
      "countdown countdown"
      "opponent opponent"
      "when when";
  }

  #screen-home .chw-loc {
    justify-self: end;
  }

  #screen-home .chw-count,
  #screen-home .chw-bye {
    max-width: 100%;
    font-size: clamp(2.15rem, 11.5vw, 2.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #feedback-inbox .fbk-filters {
    scroll-behavior: auto;
  }
}

/* ====================================================== PRODUCTION FACE v16
   EL JEFE — truthful admin overview.

   Calm operational software with an athletic edge: the overview is a quiet
   reading surface, the selected vital gets one restrained Lightning Yellow
   rail, and functional red appears only for verified errors / urgent feedback.
   Every value and row below is engine-owned live data. FACE supplies no sample
   figures, generated labels, or placeholder money. */

/* ----------------------------------------------------------- ADMIN HEADER */

#screen-home .admin-home {
  width: min(100%, 1120px);
  min-width: 0;
  margin-inline: auto;
  gap: 18px;
}

#screen-home .admin-home-head {
  padding: 4px 0 2px;
}

#screen-home .admin-home-sub {
  max-width: 52ch;
  margin: 8px 0 0;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ----------------------------------------------------- VITAL DISCLOSURES */

#screen-home #admin-home-vitals {
  min-width: 0;
}

#screen-home .admin-vitals-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#screen-home .admin-vital {
  appearance: none;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 116px;
  padding: 15px 38px 13px 15px;
  justify-content: flex-start;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#screen-home .admin-vital.on,
#screen-home .admin-vital[aria-expanded='true'] {
  background: var(--panel);
  border-color: var(--dim);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-home .admin-vital-l {
  font-size: 0.7rem;
}

#screen-home .admin-vital-cue {
  margin-top: auto;
  padding-top: 12px;
  color: var(--mist);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 3px;
}

#screen-home .admin-vital-caret {
  position: absolute;
  right: 15px;
  bottom: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: rotate(45deg);
  transform-origin: 62% 62%;
  transition: transform 150ms var(--ease), border-color 150ms var(--ease);
}

#screen-home .admin-vital.on .admin-vital-caret,
#screen-home .admin-vital[aria-expanded='true'] .admin-vital-caret {
  border-color: var(--white);
  transform: rotate(225deg);
}

#screen-home .admin-vital:focus-visible,
#screen-home .admin-vital-detail-close:focus-visible,
#screen-home #admin-vitals-retry:focus-visible,
#screen-home .admin-vital-detail-state button:focus-visible,
#admin-invites-body .admin-demo-link:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

#screen-home .admin-vital-detail-open:focus-visible,
#screen-home #admin-feedback-open:focus-visible,
.app-actions .app-action-viewas:focus-visible,
#admin-invites-body #admin-invite-gen:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -5px;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .admin-vital:hover {
    background: var(--panel);
    border-color: var(--dim);
  }
}

/* The panel intentionally has no display declaration. The engine reveals and
   conceals #admin-vital-detail exclusively through its hidden attribute. */
#screen-home .admin-vital-detail {
  min-width: 0;
  margin-top: 12px;
  padding: clamp(16px, 2.2vw, 22px);
  background: var(--navy);
  border: 1px solid var(--dim);
  border-top: 3px solid var(--gold);
  border-radius: var(--face-card-radius);
}

#screen-home .admin-vital-detail-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

#screen-home .admin-vital-detail-copy {
  min-width: 0;
}

#screen-home .admin-vital-detail-kick {
  display: block;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#screen-home .admin-vital-detail-title {
  margin: 5px 0 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

#screen-home .admin-vital-detail-meta {
  max-width: 72ch;
  margin: 6px 0 0;
  color: var(--mist);
  font-size: 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-home .admin-vital-detail-close {
  appearance: none;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 11px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--mist);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  touch-action: manipulation;
}

#screen-home .admin-vital-detail-body {
  min-width: 0;
  padding-top: 16px;
}

#screen-home .admin-vital-facts {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  overflow: hidden;
}

#screen-home .admin-vital-fact {
  min-width: 0;
  padding: 13px 14px;
  background: var(--panel);
}

#screen-home .admin-vital-fact-label {
  margin: 0;
  color: var(--mist);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#screen-home .admin-vital-fact-value {
  margin: 5px 0 0;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#screen-home .admin-vital-detail-scroll {
  max-width: 100%;
  margin-top: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

#screen-home .admin-vital-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  color: var(--white);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

#screen-home .admin-vital-table th,
#screen-home .admin-vital-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}

#screen-home .admin-vital-table th:first-child,
#screen-home .admin-vital-table td:first-child {
  padding-left: 0;
  text-align: left;
}

#screen-home .admin-vital-table th:last-child,
#screen-home .admin-vital-table td:last-child {
  padding-right: 0;
}

#screen-home .admin-vital-table th {
  color: var(--mist);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#screen-home .admin-vital-detail-note {
  max-width: 82ch;
  margin: 13px 0 0;
  color: var(--mist);
  font-size: 0.75rem;
  line-height: 1.5;
}

#screen-home .admin-vital-detail-open {
  appearance: none;
  min-height: 44px;
  margin-top: 16px;
  padding: 9px 14px;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .admin-vital-detail-close:hover {
    background: var(--panel);
    border-color: var(--dim);
    color: var(--white);
  }

  #screen-home .admin-vital-detail-open:hover {
    filter: brightness(1.12);
  }
}

/* Loading / empty / unavailable stay deliberately neutral. Red is reserved
   for the request-failed state, matching SIQ's wrong-answer system. */
#screen-home .admin-vitals-state,
#screen-home .admin-vital-detail-state {
  min-width: 0;
  padding: 15px 16px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--mist);
  font-size: 0.82rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#screen-home .admin-vitals-state p,
#screen-home .admin-vital-detail-state p {
  margin: 0;
}

#screen-home .admin-vitals-state.is-loading,
#screen-home .admin-vital-detail-state.is-loading {
  border-left: 3px solid var(--dim);
}

#screen-home .admin-vitals-state.is-empty,
#screen-home .admin-vital-detail-state.is-empty {
  background: var(--panel);
}

#screen-home .admin-vitals-state.is-unavailable,
#screen-home .admin-vital-detail-state.is-unavailable {
  border-style: dashed;
}

#screen-home .admin-vitals-state.is-error,
#screen-home .admin-vital-detail-state.is-error {
  background: var(--bad-bg);
  border-color: var(--bad);
  border-left: 4px solid var(--bad);
  color: var(--bad);
}

#screen-home #admin-vitals-retry,
#screen-home .admin-vital-detail-state button {
  appearance: none;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--face-control-radius);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  touch-action: manipulation;
}

/* ----------------------------------------------------- HEALTH AND USAGE */

#screen-home .admin-home-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
  align-items: start;
}

#screen-home .admin-home-program-health,
#screen-home .admin-home-usage,
#screen-home .admin-home-feedback-preview {
  min-width: 0;
  padding: 17px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-home .admin-home-program-health > h2,
#screen-home .admin-home-usage > h2,
#screen-home .admin-home-feedback-preview h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

#screen-home #admin-home-program-health-body,
#screen-home #admin-home-usage-body,
#screen-home #admin-home-feedback-preview-body {
  min-width: 0;
  margin-top: 12px;
}

#screen-home .admin-health-list {
  min-width: 0;
  display: grid;
}

#screen-home .admin-health-item {
  min-width: 0;
  padding: 11px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  border-top: 1px solid var(--line);
}

#screen-home .admin-health-item:first-child {
  padding-top: 0;
  border-top: 0;
}

#screen-home .admin-health-item:last-child {
  padding-bottom: 0;
}

#screen-home .admin-health-name {
  min-width: 0;
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#screen-home .admin-health-note {
  grid-column: 1;
  color: var(--mist);
  font-size: 0.74rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#screen-home .admin-health-clear {
  margin: 0;
  padding: 13px 14px;
  background: var(--ok-bg);
  border: 1px solid var(--ok);
  border-left: 3px solid var(--ok);
  border-radius: var(--face-control-radius);
  color: var(--ok);
  font-size: 0.8rem;
  line-height: 1.45;
}

#screen-home .admin-health-more {
  align-self: center;
  justify-self: end;
  color: var(--mist);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

#screen-home .admin-usage-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  overflow: hidden;
}

#screen-home .admin-usage-fact {
  min-width: 0;
  min-height: 82px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--panel);
}

#screen-home .admin-usage-v {
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow-wrap: anywhere;
}

#screen-home .admin-usage-l {
  margin-top: 7px;
  color: var(--mist);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------ FEEDBACK PREVIEW */

#screen-home .admin-home-feedback-preview-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#screen-home #admin-feedback-open {
  appearance: none;
  min-height: 44px;
  padding: 8px 13px;
  flex: 0 0 auto;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  touch-action: manipulation;
}

#screen-home .admin-fbk-preview {
  min-width: 0;
  padding: 11px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  border-top: 1px solid var(--line);
  color: var(--white);
}

#screen-home .admin-fbk-preview:first-child {
  padding-top: 0;
  border-top: 0;
}

#screen-home .admin-fbk-preview:last-child {
  padding-bottom: 0;
}

#screen-home .admin-fbk-preview.urgent {
  margin-inline: -10px;
  padding-inline: 14px 10px;
  background: var(--bad-bg);
  border-color: var(--bad);
  box-shadow: inset 4px 0 0 var(--bad);
  color: var(--bad);
}

#screen-home .admin-fbk-preview-sum {
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#screen-home .admin-fbk-preview-who {
  align-self: start;
  color: var(--mist);
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}

#screen-home .admin-fbk-preview.urgent .admin-fbk-preview-who {
  color: var(--bad);
}

/* The full inbox owns a real destination now. Its proven .fbk-* controls keep
   the same skin; this rule only sets the destination's reading width/rhythm. */
#admin-feedback-body > .pg-head,
#admin-feedback-body > #feedback-inbox {
  width: min(100%, 1120px);
  margin-inline: auto;
}

#admin-feedback-body > #feedback-inbox {
  min-width: 0;
}

/* ------------------------------------------------------- COACH INVITES */

#admin-invites-body > .pg-head,
#admin-invites-body > #admin-invite-tool,
#admin-invites-body > #admin-invite-out,
#admin-invites-body > .admin-demo-link {
  width: min(100%, 760px);
  margin-inline: auto;
}

#admin-invites-body .section-title {
  width: min(100%, 760px);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
}

#admin-invites-body .section-title::before {
  width: 20px;
  height: 3px;
  background: var(--gold);
}

#admin-invites-body .section-title::after {
  background: var(--line);
}

#admin-invites-body .pick-sub {
  max-width: 760px;
  margin-inline: auto;
  margin-top: 0;
  color: var(--mist);
  font-size: 0.84rem;
  line-height: 1.5;
}

#admin-invites-body #admin-invite-tool {
  min-width: 0;
}

#admin-invites-body #admin-invite-tool.admin-create,
#admin-invites-body #admin-invite-tool .admin-create {
  min-width: 0;
  margin-top: 16px;
  margin-bottom: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#admin-invites-body #admin-invite-label {
  grid-column: 1 / -1;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

#admin-invites-body #admin-invite-tool .code-input {
  min-width: 0;
  margin: 0;
  background: var(--panel);
  border-color: var(--line);
}

#admin-invites-body #admin-invite-gen {
  min-width: 150px;
  min-height: 44px;
  width: auto;
  margin: 0;
  padding: 10px 14px;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  box-shadow: none;
  touch-action: manipulation;
}

#admin-invites-body .invite-out {
  min-width: 0;
  margin-top: 10px;
}

#admin-invites-body .invite-out:empty {
  margin-top: 0;
}

#admin-invites-body .invite-link {
  min-width: 0;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--face-control-radius);
}

#admin-invites-body .invite-link .code-input {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  background: var(--navy);
  border-color: var(--line);
  color: var(--white);
}

#admin-invites-body .invite-link .btn,
#admin-invites-body .invite-link .btn.ghost {
  min-width: 76px;
  min-height: 44px;
  width: auto;
  flex: 0 0 auto;
}

#admin-invites-body .admin-demo-link {
  min-height: 44px;
  margin-top: 12px;
  padding: 9px 0;
  display: flex;
  align-items: center;
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 3px;
}

/* ------------------------------------------------------- TOP-BAR VIEW AS */

.app-actions .app-action-viewas {
  appearance: none;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .app-actions .app-action-viewas:hover,
  #screen-home #admin-feedback-open:hover,
  #admin-invites-body #admin-invite-gen:hover {
    filter: brightness(1.12);
  }
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 900px) {
  #screen-home .admin-home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  #screen-home .admin-vitals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #screen-home .admin-vital {
    min-height: 108px;
    padding: 13px 34px 12px 12px;
  }

  #screen-home .admin-vital-cue {
    padding-top: 10px;
  }

  #screen-home .admin-vital-caret {
    right: 13px;
    bottom: 15px;
  }

  #screen-home .admin-vital-l {
    font-size: 0.72rem;
  }

  #screen-home .admin-vital-detail {
    margin-top: 8px;
    padding: 14px;
  }

  #screen-home .admin-vital-detail-close,
  #screen-home .admin-vital-detail-open,
  #screen-home #admin-vitals-retry,
  #screen-home .admin-vital-detail-state button,
  #screen-home #admin-feedback-open,
  .app-actions .app-action-viewas,
  #admin-invites-body #admin-invite-gen,
  #admin-invites-body #admin-invite-tool .code-input,
  #admin-invites-body .invite-link .code-input,
  #admin-invites-body .invite-link .btn,
  #admin-invites-body .invite-link .btn.ghost,
  #admin-invites-body .admin-demo-link {
    min-height: 48px;
  }

  #screen-home .admin-vital-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-home .admin-vital-detail-scroll {
    margin-inline: 0;
    scrollbar-gutter: auto;
  }

  #screen-home .admin-home-program-health,
  #screen-home .admin-home-usage,
  #screen-home .admin-home-feedback-preview {
    padding: 14px;
  }

  #screen-home .admin-home-feedback-preview-head {
    align-items: flex-start;
  }

  #screen-home .admin-fbk-preview {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  #screen-home .admin-fbk-preview-who {
    text-align: left;
    white-space: normal;
  }

  #admin-invites-body #admin-invite-tool.admin-create,
  #admin-invites-body #admin-invite-tool .admin-create {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  #admin-invites-body #admin-invite-gen {
    width: 100%;
  }

  #admin-invites-body .invite-link {
    align-items: stretch;
    flex-direction: column;
  }

  #admin-invites-body .invite-link .btn,
  #admin-invites-body .invite-link .btn.ghost {
    width: 100%;
  }
}

@media (max-width: 430px) {
  #screen-home .admin-vital-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  #screen-home .admin-vital-detail-close {
    width: 100%;
  }

  #screen-home .admin-vital-facts,
  #screen-home .admin-usage-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-home .admin-health-item {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-home .admin-health-more {
    justify-self: start;
  }

  #screen-home .admin-home-feedback-preview-head {
    flex-direction: column;
  }

  #screen-home #admin-feedback-open {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-home .admin-vital,
  #screen-home .admin-vital-caret,
  #screen-home .admin-vital-detail-scroll,
  .app-actions .app-action-viewas {
    scroll-behavior: auto;
    transition: none;
  }
}

/* ====================================================== PRODUCTION FACE v16
   TEAM SETUP SPINE — one truthful path from roster to confirmed chart.

   The engine owns every step, count, verification, gate, and live message.
   FACE contributes progression art and reachable controls only: no generated
   setup copy, no assumed roster state, and no inert-looking-but-dead buttons. */

/* --------------------------------------------------------- COACH HOME FLOW */

#screen-home .coach-home:has(> #coach-home-setup:not(:empty)) {
  grid-template-areas:
    "logo team"
    "week week"
    "setup setup"
    "actions actions"
    "code code";
}

#screen-home #coach-home-setup {
  grid-area: setup;
  min-width: 0;
}

/* The async mount consumes no grid row before setup loads or after the engine
   removes the completed spine. Content insertion automatically cancels :empty. */
#screen-home #coach-home-setup:empty {
  display: none;
}

#screen-home .coach-setup {
  min-width: 0;
  padding: clamp(16px, 2.3vw, 20px);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-home .chs-title {
  margin: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

#screen-home .chs-steps {
  min-width: 0;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#screen-home .chs-step {
  min-width: 0;
  min-height: 62px;
  padding: 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--mist);
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#screen-home .chs-step.current,
#screen-home .chs-step[aria-current='step'] {
  background: var(--panel);
  border-color: var(--on-accent);
  color: var(--white);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-home .chs-step.done {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
}

#screen-home .chs-step-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 50%;
  color: transparent;
  font-size: 0;
}

#screen-home .chs-step-mark::before {
  width: 7px;
  height: 7px;
  background: var(--dim);
  border-radius: 50%;
  content: '';
}

#screen-home .chs-step.current .chs-step-mark,
#screen-home .chs-step[aria-current='step'] .chs-step-mark {
  background: var(--gold);
  border-color: var(--gold);
}

#screen-home .chs-step.current .chs-step-mark::before,
#screen-home .chs-step[aria-current='step'] .chs-step-mark::before {
  background: var(--on-accent);
}

#screen-home .chs-step.done .chs-step-mark {
  background: var(--ok-bg);
  border-color: var(--ok);
}

#screen-home .chs-step.done .chs-step-mark::before {
  width: 7px;
  height: 12px;
  background: transparent;
  border-right: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  border-radius: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

#screen-home .chs-step-label {
  min-width: 0;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#screen-home .chs-standard {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--panel);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
  color: var(--mist);
  font-size: 0.78rem;
  line-height: 1.45;
}

#screen-home .chs-groups {
  min-width: 0;
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
}

#screen-home .chs-group {
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  background: var(--navy);
}

#screen-home .chs-group.ok {
  background: var(--ok-bg);
  box-shadow: inset 3px 0 0 var(--ok);
}

#screen-home .chs-group-name {
  min-width: 0;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#screen-home .chs-group-count {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

#screen-home .chs-group.ok .chs-group-count {
  color: var(--ok);
}

#screen-home .chs-group-verified {
  grid-column: 1 / -1;
  color: var(--ok);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

#screen-home .chs-verify {
  appearance: none;
  min-height: 44px;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--dim);
  border-radius: var(--face-control-radius);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
}

#screen-home .chs-group:has(.chs-verify) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

#screen-home .chs-open-chart {
  appearance: none;
  min-height: 44px;
  margin-top: 14px;
  padding: 9px 14px;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  touch-action: manipulation;
}

#screen-home .chs-status {
  min-width: 0;
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--mist);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#screen-home .chs-status:empty {
  min-height: 0;
  margin-top: 0;
}

#screen-home .chs-verify:focus-visible,
#screen-home .chs-open-chart:focus-visible,
#screen-depth-chart .rd-confirm-btn:focus-visible,
#screen-home #ch-grade.is-gated:focus-visible,
.app-actions .app-action-grade.is-gated:focus-visible,
#admin-invites-body #admin-invite-team:focus-visible,
#admin-invites-body #admin-invite-label:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

#screen-home .chs-open-chart:focus-visible,
#screen-depth-chart .rd-confirm-btn:focus-visible {
  outline-color: var(--gold);
  outline-offset: -5px;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .chs-verify:hover {
    background: var(--panel);
    border-color: var(--on-accent);
  }

  #screen-home .chs-open-chart:hover,
  #screen-depth-chart .rd-confirm-btn:hover {
    filter: brightness(1.12);
  }
}

/* ------------------------------------------------------ GATED GRADE ACTION */

#screen-home #ch-grade.is-gated,
#screen-home #ch-grade[aria-disabled='true'],
.app-actions .app-action-grade.is-gated,
.app-actions .app-action-grade[aria-disabled='true'] {
  background: var(--panel);
  border: 1px dashed var(--dim);
  color: var(--mist);
  box-shadow: inset 3px 0 0 var(--dim);
  cursor: pointer;
  filter: none;
  opacity: 1;
}

.app-actions .app-action-grade.is-gated,
.app-actions .app-action-grade[aria-disabled='true'] {
  min-height: 44px;
}

#screen-home #ch-grade.is-gated::after,
#screen-home #ch-grade[aria-disabled='true']::after {
  color: var(--mist);
}

@media (hover: hover) and (pointer: fine) {
  #screen-home #ch-grade.is-gated:hover,
  #screen-home #ch-grade[aria-disabled='true']:hover,
  .app-actions .app-action-grade.is-gated:hover,
  .app-actions .app-action-grade[aria-disabled='true']:hover {
    background: var(--panel);
    border-color: var(--on-accent);
    color: var(--mist);
    box-shadow: inset 3px 0 0 var(--dim);
    filter: none;
    transform: none;
  }
}

/* ---------------------------------------------------- DEPTH CONFIRMATION */

#screen-depth-chart .rd-confirm {
  min-width: 0;
  margin-top: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-depth-chart .rd-confirm-sub {
  min-width: 0;
  color: var(--mist);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-depth-chart .rd-confirm-btn {
  appearance: none;
  min-height: 44px;
  padding: 9px 14px;
  grid-column: 2;
  grid-row: 1 / span 2;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  touch-action: manipulation;
}

#screen-depth-chart .rd-confirmed {
  min-height: 44px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  background: var(--ok-bg);
  border: 1px solid var(--ok);
  border-radius: var(--face-control-radius);
  color: var(--ok);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------------------------------------------------------- COACH INVITES */

#admin-invites-body #admin-invite-team {
  min-width: 0;
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  grid-column: 1 / -1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
  font: inherit;
  font-size: 0.9rem;
}

/* #admin-invite-label is the optional label INPUT, not a heading. The engine
   places it after the takeover select and before Generate; FACE keeps that
   order and lets the button share its desktop row. */
#admin-invites-body #admin-invite-label {
  min-width: 0;
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  grid-column: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
}

#admin-invites-body .invite-note {
  min-width: 0;
  margin: 0;
  padding: 9px 11px;
  grid-column: 1 / -1;
  background: var(--panel);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
  color: var(--mist);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 840px) {
  #screen-home .chs-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #screen-home .coach-setup {
    padding: 14px;
  }

  #screen-home .chs-verify,
  #screen-home .chs-open-chart,
  #screen-home #ch-grade.is-gated,
  #screen-home #ch-grade[aria-disabled='true'],
  .app-actions .app-action-grade.is-gated,
  .app-actions .app-action-grade[aria-disabled='true'],
  #screen-depth-chart .rd-confirm-btn,
  #screen-depth-chart .rd-confirmed,
  #admin-invites-body #admin-invite-team,
  #admin-invites-body #admin-invite-label {
    min-height: 48px;
  }

  #screen-home .chs-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-depth-chart .rd-confirm {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  #screen-depth-chart .rd-confirm-btn {
    width: 100%;
    grid-column: 1;
    grid-row: auto;
  }

  #admin-invites-body #admin-invite-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  #screen-home .chs-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-home .chs-step {
    min-height: 54px;
  }

  #screen-home .chs-group:has(.chs-verify) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #screen-home .chs-group:has(.chs-verify) .chs-verify {
    width: 100%;
    grid-column: 1 / -1;
  }

  #screen-home .chs-open-chart {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-home .chs-step,
  #screen-home .chs-step-mark,
  #screen-home .chs-verify,
  #screen-home .chs-open-chart,
  #screen-home #ch-grade,
  .app-actions .app-action-grade,
  #screen-depth-chart .rd-confirm-btn {
    transition: none;
  }
}

/* ====================================================== PRODUCTION FACE v16
   COACH QUESTIONS + ACCOUNTS TOOLS — engine-review top-up.

   The home remains one calm reading path: identity, game context, setup when
   needed, then the two questions a coach came here to answer. Accounts uses
   one flat readout/tool surface above the existing collapsible directory.
   Every count, recommendation, warning, and status remains engine-owned. */

/* --------------------------------------------------------- COACH HOME FLOW */

/* v16 nests logo + team inside an identity header and adds two sections. Reset
   the v13 named grid so DOM order is the visual order and empty async mounts do
   not leave named-row gutters. The setup :has() form repeats this reset because
   its earlier FACE rule carried the old named areas. */
#screen-home .coach-home,
#screen-home .coach-home:has(> #coach-home-setup:not(:empty)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
}

#screen-home .coach-home > .coach-home-identity,
#screen-home .coach-home > .coach-home-week,
#screen-home .coach-home > #coach-home-setup,
#screen-home .coach-home > .coach-home-send,
#screen-home .coach-home > .coach-home-help,
#screen-home .coach-home > .coach-home-actions,
#screen-home .coach-home > .coach-home-code {
  grid-area: auto;
  grid-column: 1;
  min-width: 0;
}

#screen-home .coach-home-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'logo identity-copy';
  align-items: end;
  gap: 16px;
}

#screen-home .coach-home-identity-copy {
  grid-area: identity-copy;
  min-width: 0;
  padding-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#screen-home .coach-home-kicker,
#screen-home .coach-home-section-kicker {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#screen-home .coach-home-identity .coach-home-logo {
  grid-area: logo;
  align-self: end;
}

#screen-home .coach-home-identity .coach-home-team {
  grid-area: auto;
  align-self: auto;
}

/* The engine split the number from its words. Only the proven numeric value is
   oversized; tomorrow/game-day states remain strong without imitating a count. */
#screen-home .chw-count {
  max-width: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 10px;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

#screen-home .chw-value {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(3.15rem, 6vw, 4.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.82;
  letter-spacing: -0.06em;
}

#screen-home .chw-unit {
  max-width: 15ch;
  color: var(--mist);
  font-family: var(--face-type);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

#screen-home .chw-count:not(:has(.chw-value)) .chw-unit {
  max-width: 22ch;
  color: var(--white);
  font-size: clamp(2.15rem, 4.5vw, 3.15rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

#screen-home .coach-home-send,
#screen-home .coach-home-help {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

#screen-home .coach-home-section-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

#screen-home .coach-home-section-head h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: right;
}

#screen-home #coach-home-send-body,
#screen-home #coach-home-help-body {
  min-width: 0;
  min-height: 0;
  margin-top: 11px;
}

#screen-home #coach-home-send-body:empty,
#screen-home #coach-home-help-body:empty {
  margin-top: 0;
}

#screen-home .coach-send-card {
  min-width: 0;
  padding: 12px 0 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'line action'
    'sub action';
  align-items: center;
  column-gap: 18px;
  row-gap: 3px;
  border-top: 1px solid var(--line);
}

#screen-home .coach-send-card.empty {
  grid-template-areas: 'line action';
}

#screen-home .coach-send-line {
  grid-area: line;
  min-width: 0;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#screen-home .coach-send-sub {
  grid-area: sub;
  min-width: 0;
  color: var(--mist);
  font-size: 0.75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#screen-home .coach-send-action,
#screen-home .coach-help-action {
  appearance: none;
  min-height: 44px;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  cursor: pointer;
  font-family: var(--face-type);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#screen-home .coach-send-action {
  grid-area: action;
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-home .coach-help-row {
  min-width: 0;
  min-height: 48px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}

#screen-home .coach-help-name {
  min-width: 0;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#screen-home .coach-help-pos {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#screen-home .coach-help-why {
  min-height: 28px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

#screen-home .coach-help-why.not,
#screen-home .coach-help-why.low {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

#screen-home .coach-help-action {
  margin-top: 11px;
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
}

#screen-home .coach-send-empty,
#screen-home .coach-help-empty {
  min-width: 0;
  margin: 0;
  padding: 12px 0 2px;
  border-top: 1px solid var(--line);
  color: var(--mist);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-home .coach-send-action:focus-visible,
#screen-home .coach-help-action:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .coach-send-action:hover {
    background: var(--panel);
    border-color: var(--on-accent);
    color: var(--white);
  }

  #screen-home .coach-help-action:hover {
    background: var(--navy);
    border-color: var(--on-accent);
  }
}

/* --------------------------------------------------------- ADMIN ACCOUNTS */

#admin-accounts-body .accounts-overview {
  min-width: 0;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#admin-accounts-body .accounts-vitals {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#admin-accounts-body .accounts-vital {
  min-width: 0;
  min-height: 88px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

#admin-accounts-body .accounts-vital + .accounts-vital {
  border-left: 1px solid var(--line);
}

#admin-accounts-body .accounts-vital-v {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(1.45rem, 2.5vw, 1.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

#admin-accounts-body .accounts-vital-l {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#admin-accounts-body .accounts-tools {
  min-width: 0;
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, auto);
  grid-template-areas:
    'label label'
    'search filters'
    'status status';
  align-items: center;
  gap: 7px 12px;
  border-top: 1px solid var(--line);
}

#admin-accounts-body .accounts-search-label {
  grid-area: label;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#admin-accounts-body .accounts-search {
  grid-area: search;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  border-color: var(--dim);
}

#admin-accounts-body .accounts-search:focus {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
  border-color: var(--on-accent);
}

#admin-accounts-body .accounts-filters {
  grid-area: filters;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#admin-accounts-body .accounts-filter {
  appearance: none;
  min-width: 68px;
  min-height: 44px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
  cursor: pointer;
  font-family: var(--face-type);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#admin-accounts-body .accounts-filter.on,
#admin-accounts-body .accounts-filter[aria-pressed='true'] {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#admin-accounts-body .accounts-filter:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

#admin-accounts-body #accounts-filter-status {
  grid-area: status;
  min-height: 1.2em;
  margin: 1px 0 0;
  color: var(--mist);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#admin-accounts-body #accounts-filter-status:empty {
  min-height: 0;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  #admin-accounts-body .accounts-filter:hover:not(.on):not([aria-pressed='true']) {
    background: var(--navy);
    border-color: var(--dim);
  }
}

/* ------------------------------------------------------- FEEDBACK STATUS */

/* The status now remains next to the closed form so success can be seen and
   announced. Empty live regions collapse without leaving the accessibility
   tree; semantic fill is reserved for real success/error states. */
#screen-home .feedback-entry > .feedback-status {
  width: min(100%, 680px);
  min-height: 0;
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  background: var(--panel);
  color: var(--mist);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

#screen-home .feedback-entry > .feedback-status:empty {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#screen-home .feedback-status.is-pending {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--mist);
}

#screen-home .feedback-status.is-success {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
}

#screen-home .feedback-status.is-error {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 760px) {
  #screen-home .coach-home-identity {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  #screen-home .coach-home-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  #screen-home .coach-home-section-head h2 {
    text-align: left;
  }

  #screen-home .coach-send-card,
  #screen-home .coach-send-card.empty {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'line'
      'sub'
      'action';
    gap: 6px;
  }

  #screen-home .coach-send-action,
  #screen-home .coach-help-action {
    width: 100%;
    min-height: 48px;
    margin-top: 5px;
  }

  #admin-accounts-body .accounts-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #admin-accounts-body .accounts-vital + .accounts-vital {
    border-left: 0;
  }

  #admin-accounts-body .accounts-vital:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  #admin-accounts-body .accounts-vital:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  #admin-accounts-body .accounts-tools {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'label'
      'search'
      'filters'
      'status';
  }

  #admin-accounts-body .accounts-search,
  #admin-accounts-body .accounts-filter {
    min-height: 48px;
  }

  #admin-accounts-body .accounts-filters {
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: 100%;
    padding: 6px 14px 6px 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  #admin-accounts-body .accounts-filters::-webkit-scrollbar {
    display: none;
  }

  #admin-accounts-body .accounts-filter {
    flex: 0 0 auto;
    min-width: 88px;
  }
}

@media (max-width: 430px) {
  #screen-home .chw-count {
    gap: 5px 8px;
  }

  #screen-home .chw-value {
    font-size: clamp(2.75rem, 16vw, 3.45rem);
  }

  #screen-home .chw-unit {
    max-width: 12ch;
    font-size: 0.95rem;
  }

  #screen-home .chw-count:not(:has(.chw-value)) .chw-unit {
    max-width: 18ch;
    font-size: clamp(1.85rem, 10vw, 2.4rem);
  }

  #screen-home .coach-help-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #screen-home .coach-help-why {
    grid-column: 1 / -1;
    justify-self: start;
  }

}

@media (prefers-reduced-motion: reduce) {
  #screen-home .coach-send-action,
  #screen-home .coach-help-action,
  #admin-accounts-body .accounts-filter {
    transition: none;
  }

  #admin-accounts-body .accounts-filters {
    scroll-behavior: auto;
  }
}

/* ================================================= LAUNCH-NIGHT FACE 2026-08-31
   REVIEW GATE + SAVE RECOVERY + ADMIN PROGRAM CONTROLS.

   These surfaces carry operational truth, not decoration: draft means not
   shared, red means not saved, and every program/tier value remains supplied
   asynchronously by the engine. No generated copy or figures live here. */

/* ---------------------------------------------------- QUIZ DRAFT REVIEW GATE */

/* The runtime result heading arrives with an inline yellow text color in both
   draft and sent states. Keep Lightning Yellow in its legal role (fill/rail);
   the generated title remains unchanged and fully visible. */
#screen-quiz-result #result-body > .section-title {
  color: var(--mist) !important;
}

#screen-quiz-result .result-draft {
  min-width: 0;
  min-height: 108px;
  margin: 0 0 18px;
  padding: 16px 18px 16px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'draft-head draft-action'
    'draft-sub draft-action'
    'draft-error draft-error';
  align-items: center;
  column-gap: 22px;
  row-gap: 5px;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-card-radius);
  box-shadow: inset 4px 0 0 var(--gold);
  color: var(--dg-mist);
}

#screen-quiz-result .result-draft-h {
  grid-area: draft-head;
  min-width: 0;
  color: var(--dg-text);
  font-family: var(--face-type);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

#screen-quiz-result .result-draft-sub {
  grid-area: draft-sub;
  min-width: 0;
  color: var(--dg-mist);
  font-size: 0.82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#screen-quiz-result .result-draft-send.btn {
  grid-area: draft-action;
  width: auto;
  min-width: 190px;
  min-height: 48px;
  margin: 0;
  padding: 11px 16px;
  align-self: stretch;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--on-accent);
  box-shadow: none;
  white-space: nowrap;
}

#screen-quiz-result .result-draft-send.btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

#screen-quiz-result .result-draft #q-send-err {
  grid-area: draft-error;
  min-height: 0;
  margin: 3px 0 0;
  color: var(--dg-low);
  line-height: 1.35;
}

#screen-quiz-result .result-draft #q-send-err:empty {
  margin: 0;
}

#screen-quiz-result .result-draft-send:focus-visible {
  outline: 3px solid var(--dg-text);
  outline-offset: 3px;
}

#screen-quiz-result:has(.result-draft) #result-done {
  min-width: 44px;
  min-height: 44px;
}

@media (hover: hover) and (pointer: fine) {
  #screen-quiz-result .result-draft-send.btn:hover:not(:disabled) {
    filter: brightness(0.97);
    transform: translateY(-1px);
  }
}

/* ------------------------------------------------------ PLAYER SAVE FAILURE */

#screen-quiz-take .take-save-failed {
  min-width: 0;
  margin: 0 0 14px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  background: var(--bad-bg);
  border: 1px solid var(--bad);
  border-left-width: 4px;
  border-radius: var(--face-card-radius);
  color: var(--bad);
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-quiz-take .take-save-failed b {
  color: var(--bad);
  font-weight: 700;
  letter-spacing: 0.025em;
}

/* Override btn-gold here: a not-saved alert is one functional-red system and
   never pairs red with Lightning Yellow. */
#screen-quiz-take .take-retry-save.btn {
  width: auto;
  min-width: 156px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 9px 13px;
  background: var(--bad);
  border: 1px solid var(--bad);
  color: var(--on-solid);
  box-shadow: none;
  white-space: nowrap;
}

#screen-quiz-take .take-retry-save.btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

#screen-quiz-take .take-retry-save:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

/* Until the write succeeds, the adjacent score remains factual but loses the
   normal yellow completion treatment so the red save state cannot read as a
   mixed success signal. */
#screen-quiz-take .take-save-failed + .take-score {
  background: var(--panel);
  border-color: var(--line);
}

@media (hover: hover) and (pointer: fine) {
  #screen-quiz-take .take-retry-save.btn:hover:not(:disabled) {
    background: var(--bad);
    color: var(--on-solid);
    filter: brightness(0.92);
  }
}

/* ----------------------------------------------------------- PROGRAMS TAB */

#admin-team-body .admin-programs {
  min-width: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#admin-team-body .admin-program-row {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(72px, 0.36fr)
    minmax(108px, 0.62fr)
    minmax(96px, auto)
    minmax(72px, 0.42fr);
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--white);
  cursor: pointer;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease),
    transform 150ms var(--ease);
}

#admin-team-body .admin-program-row:first-child {
  border-top: 0;
}

#admin-team-body .admin-program-name {
  min-width: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#admin-team-body .admin-program-code {
  min-width: 0;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.07em;
  overflow-wrap: anywhere;
}

#admin-team-body .admin-program-level {
  min-height: 27px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

#admin-team-body .admin-program-tier {
  min-height: 27px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

#admin-team-body .admin-program-tier.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#admin-team-body .admin-program-when {
  min-width: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

#admin-team-body .admin-program-row:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  #admin-team-body .admin-program-row:hover {
    background: var(--panel);
    box-shadow: inset 3px 0 0 var(--gold);
  }
}

/* Programs tools deliberately mirror Accounts: one operational search field,
   a compact pressed-state rail, and a factual live result line. */
#admin-team-body .programs-tools {
  min-width: 0;
  margin-bottom: 14px;
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, auto);
  grid-template-areas:
    'programs-label programs-label'
    'programs-search programs-filters'
    'programs-status programs-status';
  align-items: center;
  gap: 7px 12px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#admin-team-body .programs-search-label {
  grid-area: programs-label;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#admin-team-body .programs-search {
  grid-area: programs-search;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  border-color: var(--dim);
}

#admin-team-body .programs-search:focus {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
  border-color: var(--on-accent);
}

#admin-team-body .programs-filters {
  grid-area: programs-filters;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#admin-team-body .programs-filter {
  appearance: none;
  min-width: 72px;
  min-height: 44px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
  cursor: pointer;
  font-family: var(--face-type);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  touch-action: manipulation;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#admin-team-body .programs-filter.on,
#admin-team-body .programs-filter[aria-pressed='true'] {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#admin-team-body .programs-filter:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

#admin-team-body #programs-filter-status {
  grid-area: programs-status;
  min-height: 1.2em;
  margin: 1px 0 0;
  color: var(--mist);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#admin-team-body #programs-filter-status:empty {
  min-height: 0;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  #admin-team-body .programs-filter:hover:not(.on):not([aria-pressed='true']) {
    background: var(--navy);
    border-color: var(--dim);
  }
}

/* ---------------------------------------------------- BILLING GRADE TOGGLE */

.billing-account-edit .bill-grade-row {
  min-width: 0;
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.billing-account-edit .bill-grade-state {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--mist);
  font-size: 0.78rem;
  line-height: 1.35;
}

.billing-account-edit .bill-grade-state b {
  min-height: 25px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.billing-account-edit .bill-grade-row:has(.bill-grade-toggle[data-on='1']) .bill-grade-state b {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.billing-account-edit .bill-grade-toggle.mem-btn {
  min-width: 154px;
  min-height: 44px;
  padding: 9px 12px;
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
}

.billing-account-edit .bill-grade-toggle.mem-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.billing-account-edit .bill-grade-toggle:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .billing-account-edit .bill-grade-toggle.mem-btn:hover:not(:disabled) {
    background: var(--navy);
    border-color: var(--on-accent);
  }
}

/* ------------------------------------------------------ QUIZ STYLE CAPTION */

#screen-builder2 .chip-row-note.pick-sub {
  max-width: 64ch;
  margin: 6px 0 0;
  color: var(--mist);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 700px) {
  #screen-quiz-result .result-draft {
    min-height: 0;
    padding: 15px 14px 15px 17px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'draft-head'
      'draft-sub'
      'draft-action'
      'draft-error';
    gap: 7px;
  }

  #screen-quiz-result .result-draft-send.btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin-top: 4px;
  }

  #screen-quiz-result:has(.result-draft) #result-done {
    min-width: 48px;
    min-height: 48px;
  }

  #screen-quiz-take .take-save-failed {
    align-items: stretch;
    padding: 13px;
  }

  #screen-quiz-take .take-retry-save.btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 3px 0 0;
  }

  #admin-team-body .admin-program-row {
    min-height: 108px;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'program-name program-when'
      'program-code program-level'
      'program-tier program-tier';
    gap: 8px 12px;
  }

  #admin-team-body .admin-program-name {
    grid-area: program-name;
  }

  #admin-team-body .admin-program-code {
    grid-area: program-code;
  }

  #admin-team-body .admin-program-level {
    grid-area: program-level;
    justify-self: end;
  }

  #admin-team-body .admin-program-tier {
    grid-area: program-tier;
    justify-self: start;
  }

  #admin-team-body .admin-program-when {
    grid-area: program-when;
  }

  #admin-team-body .programs-tools {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'programs-label'
      'programs-search'
      'programs-filters'
      'programs-status';
  }

  #admin-team-body .programs-search,
  #admin-team-body .programs-filter {
    min-height: 48px;
  }

  #admin-team-body .programs-filters {
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: 100%;
    padding: 6px 14px 6px 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  #admin-team-body .programs-filters::-webkit-scrollbar {
    display: none;
  }

  #admin-team-body .programs-filter {
    flex: 0 0 auto;
    min-width: 88px;
  }

  .billing-account-edit .bill-grade-row {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-account-edit .bill-grade-toggle.mem-btn {
    width: 100%;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-quiz-result .result-draft-send,
  #screen-quiz-take .take-retry-save,
  #admin-team-body .admin-program-row,
  #admin-team-body .programs-filter,
  .billing-account-edit .bill-grade-toggle {
    transition: none;
  }

  #admin-team-body .programs-filters {
    scroll-behavior: auto;
  }
}

/* ====================================================== MY WEEK 2026-08-31
   PLAYER HOME — the player's name and real SIQ climb carry the drama. The
   surrounding surface follows the North Star: light canvas, flat readouts,
   thin rules, generous breathing room, and one decisive next-action moment. */

#screen-home .player-home {
  width: min(100%, 1120px);
  min-width: 0;
  margin: 0 auto;
}

/* ---------------------------------------------------------- THE NAMEPLATE */

#screen-home .player-home-identity {
  position: relative;
  min-width: 0;
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: 2px 0 clamp(24px, 4vw, 38px);
}

#screen-home .player-home-identity::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 54px;
  height: 4px;
  background: var(--gold);
  content: '';
}

#screen-home .player-home-identity-copy {
  min-width: 0;
}

#screen-home .player-home-kicker {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#screen-home .player-home-name {
  max-width: 18ch;
  min-width: 0;
  margin: 8px 0 7px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#screen-home .player-home-sub {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- WEEKLY READOUTS */

#screen-home .player-home #kpi-row {
  min-width: 0;
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: 0 10px 26px rgba(17, 25, 12, 0.045);
}

#screen-home .player-home #kpi-row:empty {
  min-height: 0;
  margin: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#screen-home .player-home #kpi-row .kpi {
  min-width: 0;
  min-height: 94px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#screen-home .player-home #kpi-row .kpi + .kpi {
  border-left: 1px solid var(--line);
}

#screen-home .player-home #kpi-row .kpi:first-of-type {
  border-top: 0;
}

#screen-home .player-home #kpi-row .kpi::before,
#screen-home .player-home #kpi-row .kpi::after {
  content: none;
}

#screen-home .player-home #kpi-row .kpi-label {
  color: var(--mist);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
}

#screen-home .player-home #kpi-row .kpi-value {
  margin-top: 6px;
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  line-height: 0.95;
}

#screen-home .player-home #kpi-row .kpi-sub {
  margin-top: 5px;
  color: var(--mist);
  font-size: 0.76rem;
  line-height: 1.25;
}

/* ------------------------------------------------------ EXISTING FAMILIES */

#screen-home .player-home #player-quizzes,
#screen-home .player-home #grid-assigned,
#screen-home .player-home #grid-training,
#screen-home .player-home .dsh,
#screen-home .player-home .wm,
#screen-home .player-home .dsh-film {
  min-width: 0;
}

#screen-home .player-home #grid-assigned {
  margin-bottom: 28px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

#screen-home .player-home #grid-assigned .tile {
  min-height: 108px;
  padding: 16px;
}

#screen-home .player-home #grid-training {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

#screen-home .player-home #grid-training .tile {
  min-height: 98px;
  padding: 15px 16px;
}

#screen-home .player-home #player-quizzes > .section-title:first-child {
  margin-top: 0;
}

#screen-home .player-home #player-quizzes .pg-head-sm {
  margin-top: 34px;
  margin-bottom: 14px;
}

#screen-home .player-home .dsh {
  margin-bottom: 26px;
  padding: clamp(16px, 2.5vw, 22px);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-home .player-home .dsh-head {
  gap: 18px;
}

#screen-home .player-home .dsh-ring {
  width: 98px;
  height: 98px;
}

#screen-home .player-home .dsh-ring b {
  font-size: 2.7rem;
}

#screen-home .player-home .dsh-id h3 {
  font-size: 1.35rem;
}

/* These families live on the pinned Bolt-Black instrument. Repair stale light-
   chrome tokens locally so the climb and film facts remain readable. */
#screen-home .player-home .dsh-climb,
#screen-home .player-home .dsh-pdelta,
#screen-home .player-home .dsh-spark-wrap,
#screen-home .player-home .fg-name,
#screen-home .player-home .fg-val,
#screen-home .player-home .fg-upd,
#screen-home .player-home .fg-focus,
#screen-home .player-home .fg-rep-n,
#screen-home .player-home .fg-rep-tags {
  color: var(--dg-text);
}

#screen-home .player-home .dsh-climb span,
#screen-home .player-home .dsh-spark-wrap span,
#screen-home .player-home .fg-kind,
#screen-home .player-home .fg-hint,
#screen-home .player-home .fg-rep-sum,
#screen-home .player-home .fg-rep-note,
#screen-home .player-home .fg-clean,
#screen-home .player-home .fg-tips p {
  color: var(--dg-mist);
}

#screen-home .player-home .fg-tips {
  border-top-color: rgba(243, 241, 238, 0.16);
}

#screen-home .player-home .fg-row.fg-open {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
}

#screen-home .player-home .wm-mine .wm-card {
  padding: 12px;
}

#screen-home .player-home .wm-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* -------------------------------------------------------- SHARPEN ONE THING */

#screen-home .player-home .mw-sharpen {
  min-width: 0;
  min-height: 94px;
  margin: 0 0 28px;
  padding: 16px 17px 16px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'sharpen-kick sharpen-action'
    'sharpen-line sharpen-action';
  align-items: center;
  gap: 7px 20px;
  background: rgba(225, 255, 0, 0.16);
  border: 1px solid var(--gold);
  border-radius: var(--face-card-radius);
  box-shadow: inset 4px 0 0 var(--gold);
}

#screen-home .player-home .mw-sharpen-kick {
  grid-area: sharpen-kick;
  width: fit-content;
  min-height: 25px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  border-radius: 999px;
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#screen-home .player-home .mw-sharpen-line {
  grid-area: sharpen-line;
  min-width: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

#screen-home .player-home .mw-sharpen-go {
  appearance: none;
  grid-area: sharpen-action;
  width: auto;
  min-width: 150px;
  min-height: 44px;
  margin: 0;
  padding: 10px 15px;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--on-solid);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  touch-action: manipulation;
  transition: filter 150ms var(--ease), transform 150ms var(--ease);
}

#screen-home .player-home .mw-sharpen-go:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  #screen-home .player-home .mw-sharpen-go:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
  }
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 700px) {
  #screen-home .player-home-identity {
    margin-bottom: 18px;
    padding-bottom: 25px;
  }

  #screen-home .player-home-name {
    max-width: 100%;
    font-size: clamp(2.75rem, 13.5vw, 3.75rem);
    line-height: 0.88;
  }

  #screen-home .player-home #kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 22px;
  }

  #screen-home .player-home #kpi-row .kpi {
    min-height: 90px;
    padding: 13px;
  }

  #screen-home .player-home #kpi-row .kpi + .kpi {
    border-left: 0;
  }

  #screen-home .player-home #kpi-row .kpi:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  #screen-home .player-home #kpi-row .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  #screen-home .player-home #grid-assigned,
  #screen-home .player-home #grid-training {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-home .player-home #grid-assigned .tile {
    min-height: 104px;
  }

  #screen-home .player-home #grid-training .tile {
    min-height: 96px;
  }

  #screen-home .player-home #player-quizzes .pg-head-sm {
    margin-top: 28px;
  }

  #screen-home .player-home .dsh-head {
    align-items: flex-start;
    gap: 13px;
  }

  #screen-home .player-home .dsh-ring {
    width: 82px;
    height: 82px;
  }

  #screen-home .player-home .dsh-ring b {
    font-size: 2.25rem;
  }

  #screen-home .player-home .dsh-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
  }

  #screen-home .player-home .dsh-cat {
    grid-column: 1;
    grid-row: 1;
  }

  #screen-home .player-home .dsh-val {
    grid-column: 2;
    grid-row: 1;
  }

  #screen-home .player-home .dsh-pips {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  #screen-home .player-home .dsh-pdelta {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
  }

  #screen-home .player-home .fg-row.fg-open {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 10px;
  }

  #screen-home .player-home .fg-name {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  #screen-home .player-home .fg-kind {
    grid-column: 1;
    grid-row: 1;
  }

  #screen-home .player-home .fg-val {
    grid-column: 3;
    grid-row: 1;
  }

  #screen-home .player-home .fg-upd {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
  }

  #screen-home .player-home .fg-grp {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-self: start;
  }

  #screen-home .player-home .mw-sharpen {
    min-height: 0;
    padding: 15px 14px 15px 17px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'sharpen-kick'
      'sharpen-line'
      'sharpen-action';
    gap: 8px;
  }

  #screen-home .player-home .mw-sharpen-go {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin-top: 4px;
  }
}

@media (max-width: 390px) {
  #screen-home .player-home #kpi-row .kpi {
    min-height: 86px;
    padding: 12px 11px;
  }

  #screen-home .player-home #kpi-row .kpi-value {
    font-size: 1.75rem;
  }

  #screen-home .player-home .dsh {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-home .player-home .mw-sharpen-go {
    transition: none;
  }
}

/* =============================================================================
   LANDING AUDIENCE SLABS — painted by Claude on CJ's direct order (2026-08-31:
   "you're gonna need to paint this one"). North star: the facelift mock's page
   titles (Atkinson Hyperlegible, ~670-800 weight, tight tracking, title huge
   over a quiet line). The audience word — PLAYERS / COACHES — is the fork in
   the road and becomes the BIGGEST thing on each card; everything else stays.
   ChatGPT may refine the treatment; do not shrink the slabs below the h2.
   ========================================================================== */
#screen-landing .entry-card .entry-kicker {
  display: block;
  color: var(--white);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#screen-landing .entry-card h2 {
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
}
#screen-landing .entry-card.coach {
  border-top: 3px solid var(--gold);
}
@media (max-width: 640px) {
  #screen-landing .entry-card .entry-kicker { font-size: 1.8rem; }
}

/* =================================================== PILOT PAINT 2026-09-02
   FRONT-OF-HOUSE + SUPPORT + SEND CONFIRMATIONS.

   One calm operational language across the first coach and player visits:
   light, flat surfaces; strong hierarchy; Bolt-Black selected controls with a
   restrained Lightning-Yellow rail; semantic red/green only where the state
   genuinely calls for it. Every value and state remains engine-owned. */

/* --------------------------------------------------- LANDING DOOR SYSTEM */

/* auto-fit makes the live two-door fork fill two equal tracks and lets the
   commented Train Solo door become a third equal track without another FACE
   pass. The phone breakpoint below deliberately stacks every count. */
#screen-landing.active {
  grid-template-columns: minmax(420px, 0.72fr) minmax(840px, 1.28fr);
}

#screen-landing .entry-wrap {
  width: min(100%, 960px);
  max-width: 960px;
  align-self: center;
  padding-inline: 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

#screen-landing .entry-card {
  min-width: 0;
  min-height: 230px;
  padding: 23px 21px 20px;
}

#screen-landing .entry-card p {
  max-width: 38ch;
  overflow-wrap: anywhere;
}

#screen-landing .entry-card .btn {
  min-height: 44px;
}

/* When the third door returns it stays visually available without creating a
   second yellow primary beside the coach path. */
#screen-landing .entry-card.individual {
  border-top-color: var(--line);
  border-left-color: var(--line);
}

#screen-landing .entry-card.individual .btn-gold {
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  color: var(--on-solid);
}

#screen-landing .entry-card .btn:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------- COACH FIRST-RUN */

#screen-home .coach-welcome {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

#screen-home .cw-lead {
  max-width: 34ch;
  margin: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

#screen-home .cw-intro {
  max-width: 64ch;
  margin: 7px 0 0;
  color: var(--mist);
  font-size: 0.86rem;
  line-height: 1.5;
}

#screen-home .cw-benefits {
  min-width: 0;
  margin: 17px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

#screen-home .cw-benefit {
  min-width: 0;
  padding: 1px 16px;
  display: grid;
  align-content: start;
  gap: 5px;
}

#screen-home .cw-benefit:first-child {
  padding-left: 0;
}

#screen-home .cw-benefit + .cw-benefit {
  border-left: 1px solid var(--line);
}

#screen-home .cw-benefit-step {
  color: var(--white);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#screen-home .cw-benefit-why {
  color: var(--mist);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-home .cw-payoff {
  max-width: 68ch;
  margin: 17px 0 0;
  padding: 10px 12px;
  background: var(--panel);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
  color: var(--mist);
  font-size: 0.8rem;
  line-height: 1.45;
}

#screen-home .cw-payoff strong {
  color: var(--white);
}

/* ------------------------------------------------ ONE-SCREEN QUIZ BUILDER */

#screen-builder2 #builder2-body {
  width: min(100%, 960px);
  margin-inline: auto;
}

#screen-builder2 #builder2-body > .section-title {
  color: var(--mist);
  font-size: 0.76rem;
  letter-spacing: 0.13em;
}

#screen-builder2 #builder2-body > .section-title::before {
  width: 18px;
  height: 3px;
  flex: 0 0 18px;
  background: var(--dim);
  color: transparent;
  content: '';
  opacity: 1;
}

#screen-builder2 .qb-limits {
  min-width: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-builder2 .qb-limit {
  min-width: 0;
  min-height: 54px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mist);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

#screen-builder2 .qb-limit + .qb-limit {
  border-left: 1px solid var(--line);
}

#screen-builder2 .qb-limit b {
  margin-inline: 0.22em;
  color: var(--white);
  font-family: var(--mono);
  font-weight: 700;
}

#screen-builder2 .drop-zone-lg {
  position: relative;
  min-width: 0;
  min-height: 176px;
  padding: clamp(22px, 4vw, 38px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--navy);
  border: 2px dashed var(--dim);
  border-radius: var(--face-card-radius);
  text-align: center;
}

#screen-builder2 .drop-zone-lg.drag {
  background: rgba(225, 255, 0, 0.1);
  border-color: var(--on-accent);
  box-shadow: inset 0 -4px 0 var(--gold);
}

#screen-builder2 .drop-zone-lg .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#screen-builder2 .drop-zone-lg:has(#src-file:focus-visible) {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

#screen-builder2 .drop-zone-lg .drop-hint {
  max-width: 62ch;
  margin: 0;
  color: var(--mist);
  font-size: 0.86rem;
  line-height: 1.5;
}

#screen-builder2 .drop-zone-lg .drop-hint strong,
#screen-builder2 .qb-choose {
  color: var(--white);
  font-weight: 700;
}

#screen-builder2 .qb-choose {
  min-height: 44px;
  margin-inline: 4px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: var(--face-control-radius);
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
}

#screen-builder2 .side-pick {
  min-width: 0;
}

#screen-builder2 .aud-chip {
  min-height: 44px;
  background: var(--panel);
  border-color: var(--dim);
  border-radius: var(--face-control-radius);
  color: var(--white);
}

#screen-builder2 .aud-chip.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-builder2 .side-pick > .form-row {
  margin: 0;
}

#screen-builder2 .side-pick > .form-row > .form-label:empty {
  height: 0;
  margin: 0;
  overflow: hidden;
}

#screen-builder2 .side-pick .chip-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

#screen-builder2 .side-pick .aud-chip {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
  font-size: 0.84rem;
  text-align: center;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 150ms var(--ease);
}

#screen-builder2 .side-pick .aud-chip.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-builder2 .side-pick .aud-chip:focus-visible,
#screen-builder2 .qb-practice-chip:focus-visible,
#screen-builder2 .aud-chip:focus-visible,
#screen-builder2 #aud-change:focus-visible,
#screen-builder2 .qb-advanced-summary:focus-visible,
#screen-builder2 #create-quiz:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

#screen-builder2 .code-input:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
  border-color: var(--on-accent);
}

#screen-builder2 .qb-aud {
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px 14px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
}

#screen-builder2 .qb-aud-summary {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#screen-builder2 #aud-change {
  min-height: 44px;
  margin-left: 0 !important;
  padding: 8px 4px;
  flex: 0 0 auto;
  color: var(--white);
  font-weight: 700;
  text-underline-offset: 3px;
}

#screen-builder2 .qb-when {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  align-items: end;
  gap: 12px 18px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
}

#screen-builder2 .qb-when-lbl {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#screen-builder2 .qb-when > label.qb-when-lbl {
  min-width: 0;
  display: grid;
  gap: 6px;
}

#screen-builder2 #qb-week.code-input {
  width: 100%;
  max-width: none !important;
  min-height: 44px;
  margin: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

#screen-builder2 .qb-practice {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}

#screen-builder2 .qb-practice > .qb-when-lbl {
  grid-column: 1 / -1;
  margin-bottom: 1px;
}

#screen-builder2 .qb-practice-chip {
  min-height: 44px;
  padding: 8px 11px;
  background: var(--panel);
  border-color: var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: normal;
}

#screen-builder2 .qb-practice-chip.on {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--dg-mist);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-builder2 #q-title.qb-name {
  width: min(100%, 680px);
  max-width: 680px !important;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  background: var(--navy);
  border: 2px solid var(--dim);
  border-radius: var(--face-control-radius);
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1.02rem;
  font-weight: 700;
}

#screen-builder2 #q-title.qb-name:focus {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
  border-color: var(--on-accent);
}

#screen-builder2 #create-quiz {
  min-height: 52px;
}

#screen-builder2 .qb-advanced {
  min-width: 0;
  margin-top: 28px;
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#screen-builder2 .qb-advanced-summary {
  position: relative;
  min-height: 52px;
  padding: 13px 42px 13px 2px;
  display: flex;
  align-items: center;
  color: var(--white);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}

#screen-builder2 .qb-advanced-summary::-webkit-details-marker {
  display: none;
}

#screen-builder2 .qb-advanced-summary::after {
  position: absolute;
  right: 13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: '';
  transform: rotate(45deg);
  transition: transform 150ms var(--ease);
}

#screen-builder2 .qb-advanced[open] .qb-advanced-summary::after {
  transform: rotate(225deg);
}

#screen-builder2 .qb-advanced-body {
  min-width: 0;
  padding: 18px 2px 20px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------ PLAYER TAKE + LIBRARY */

#screen-quiz-take .take-one-shot {
  max-width: 720px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
  color: var(--mist);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-player-quizzes #plib-inner {
  min-width: 0;
}

#screen-player-quizzes .plib-week {
  min-width: 0;
}

#screen-player-quizzes .plib-week + .plib-week {
  margin-top: 34px;
  padding-top: 4px;
}

#screen-player-quizzes .plib-week > .section-title {
  margin-top: 0;
}

#screen-player-quizzes .plib-week > .card-grid {
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#screen-player-quizzes .plib-tile {
  width: 100%;
  min-width: 0;
  min-height: 108px;
  padding: 16px;
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-player-quizzes .plib-tile h3 {
  padding-right: 18px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

#screen-player-quizzes .plib-tile p {
  margin-top: 7px;
  color: var(--mist);
  line-height: 1.4;
}

#screen-player-quizzes .plib-tile.tile-done {
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--dim);
}

#screen-player-quizzes .plib-tile.tile-done::after {
  border-color: var(--dim);
  opacity: 0.75;
}

#screen-player-quizzes .plib-tile:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

#screen-home .player-home-since {
  max-width: 100%;
  margin: 6px 0 0;
  color: var(--mist);
  font-family: var(--face-type);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------- ADMIN SUPPORT FACTS */

/* No display declaration here: #accounts-stranded must continue to ride the
   engine-owned hidden attribute. The whole verified help state carries red,
   matching SIQ's wrong/alert system without a redundant urgency badge. */
#admin-accounts-body .accounts-stranded {
  min-width: 0;
  margin: 0 0 18px;
  padding: 15px 16px;
  background: var(--bad-bg);
  border: 1px solid var(--bad);
  border-left-width: 4px;
  border-radius: var(--face-card-radius);
}

#admin-accounts-body .stranded-head {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#admin-accounts-body .stranded-h {
  color: var(--bad);
  font-family: var(--face-type);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

#admin-accounts-body .stranded-sub,
#admin-accounts-body .stranded-foot {
  color: var(--mist);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#admin-accounts-body .stranded-list {
  min-width: 0;
  margin-top: 12px;
  border-top: 1px solid var(--bad);
}

#admin-accounts-body .stranded-row {
  min-width: 0;
  min-height: 52px;
  padding: 10px 0;
  display: grid;
  grid-template-columns:
    minmax(140px, 1fr)
    minmax(190px, 1.4fr)
    minmax(100px, 0.7fr)
    auto;
  align-items: center;
  gap: 8px 14px;
  border-bottom: 1px solid var(--line);
}

#admin-accounts-body .stranded-who,
#admin-accounts-body .stranded-email {
  min-width: 0;
  overflow-wrap: anywhere;
}

#admin-accounts-body .stranded-who {
  color: var(--white);
  font-weight: 700;
}

#admin-accounts-body .stranded-email {
  color: var(--mist);
  font-size: 0.8rem;
}

#admin-accounts-body .stranded-state {
  min-width: 0;
  padding: 4px 7px;
  justify-self: start;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#admin-accounts-body .stranded-when {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

#admin-accounts-body .stranded-foot {
  margin: 11px 0 0;
}

#admin-accounts-body .dir-activation {
  min-width: 0;
  flex: 1 1 180px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

#admin-accounts-body .dir-delete.btn.ghost {
  min-height: 40px;
  background: transparent;
  border-color: var(--bad);
  color: var(--bad);
  box-shadow: none;
}

#admin-accounts-body .dir-delete.btn.ghost:disabled {
  opacity: 0.65;
  cursor: wait;
}

#admin-accounts-body .dir-delete:focus-visible {
  outline: 3px solid var(--bad);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  #admin-accounts-body .dir-delete.btn.ghost:hover:not(:disabled) {
    background: var(--bad-bg);
    border-color: var(--bad);
    color: var(--bad);
    filter: none;
    transform: none;
  }
}

#screen-roster #roster-members .mem-login {
  min-height: 25px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#screen-roster #roster-members .mem-login.seen {
  background: var(--panel);
  color: var(--mist);
}

#screen-roster #roster-members .mem-login.never {
  background: var(--panel);
  border-color: var(--dim);
  border-style: dashed;
  color: var(--white);
}

/* --------------------------------------------------- RESULT CONFIRMATION */

#screen-quiz-result .result-filed.pick-sub {
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 0 !important;
  padding: 7px 9px;
  background: var(--panel);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
  color: var(--mist);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#screen-quiz-result .result-filed strong {
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
}

#screen-quiz-result .result-sent-note {
  max-width: 72ch;
  min-width: 0;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--ok-bg);
  border: 1px solid var(--ok);
  border-left-width: 4px;
  border-radius: var(--face-control-radius);
  color: var(--ok);
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-quiz-result .result-sent-note b,
#screen-quiz-result .result-sent-note strong {
  color: var(--ok);
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 1260px) {
  #screen-landing.active {
    display: block;
    background: var(--panel);
  }

  #screen-landing .hero {
    min-height: auto;
    padding: 48px 24px 54px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  #screen-landing .hero::after {
    right: 24px;
    bottom: 24px;
  }

  #screen-landing .entry-wrap {
    width: min(100%, 960px);
    padding: 24px 24px 18px;
  }

  #screen-landing .entry-meta,
  #screen-landing .entry-legal {
    width: min(100%, 960px);
    padding-inline: 24px;
  }
}

@media (max-width: 900px) {
  #screen-player-quizzes .plib-week > .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #screen-home .cw-benefits {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-home .cw-benefit,
  #screen-home .cw-benefit:first-child {
    padding: 10px 0;
  }

  #screen-home .cw-benefit + .cw-benefit {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  #screen-builder2 .qb-limits {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-builder2 .qb-limit {
    min-height: 48px;
  }

  #screen-builder2 .qb-limit + .qb-limit {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  #screen-builder2 .drop-zone-lg {
    min-height: 168px;
    padding: 24px 14px;
  }

  #screen-builder2 .qb-choose,
  #screen-builder2 .aud-chip,
  #screen-builder2 #aud-change,
  #screen-builder2 #qb-week.code-input,
  #screen-builder2 #q-title.qb-name,
  #screen-builder2 #create-quiz,
  #screen-builder2 .qb-advanced-summary {
    min-height: 48px;
  }

  #screen-builder2 .side-pick .chip-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-builder2 .qb-aud {
    align-items: stretch;
    flex-direction: column;
  }

  #screen-builder2 #aud-change {
    width: 100%;
    justify-content: flex-start;
  }

  #screen-builder2 .qb-when {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 12px;
  }

  #screen-builder2 .qb-practice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-builder2 .qb-practice-chip {
    min-height: 48px;
  }

  #screen-builder2 .qb-practice-chip:last-child {
    grid-column: 1 / -1;
  }

  #screen-builder2 #create-quiz {
    width: 100%;
    max-width: none !important;
  }

  #admin-accounts-body .stranded-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'stranded-who stranded-when'
      'stranded-email stranded-email'
      'stranded-state stranded-state';
    gap: 5px 10px;
  }

  #admin-accounts-body .stranded-who {
    grid-area: stranded-who;
  }

  #admin-accounts-body .stranded-email {
    grid-area: stranded-email;
  }

  #admin-accounts-body .stranded-state {
    grid-area: stranded-state;
  }

  #admin-accounts-body .stranded-when {
    grid-area: stranded-when;
  }

  #admin-accounts-body .dir-activation {
    flex-basis: 100%;
    padding-left: 40px;
    white-space: normal;
  }

  #admin-accounts-body .dir-delete.btn.ghost {
    min-height: 48px;
  }

  #screen-roster #roster-members .mem-row:has(.mem-login) {
    align-items: stretch;
    flex-direction: column;
  }

  #screen-roster #roster-members .mem-row:has(.mem-login) .mem-id {
    width: 100%;
    min-width: 0;
  }

  #screen-roster #roster-members .mem-row:has(.mem-login) .mem-action {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  #screen-roster #roster-members .mem-row:has(.mem-login) .mem-action .mem-btn {
    min-height: 48px;
    flex: 1 1 120px;
  }

  #screen-quiz-result .result-sent-note {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  #screen-landing .entry-wrap {
    padding-inline: 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #screen-landing .entry-card {
    min-height: 0;
  }

  #screen-landing .entry-card .btn {
    min-height: 48px;
  }

  #screen-player-quizzes .plib-week > .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-player-quizzes .plib-tile {
    min-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-builder2 .side-pick .aud-chip,
  #screen-builder2 .qb-advanced-summary::after,
  #screen-player-quizzes .plib-tile {
    transition: none;
  }
}

/* =========================================== GRADES · THE GOLDEN TRIANGLE
   The three separate grades form one quiet instrument above the composed SIQ
   panel: two upper vertices, GAME as the lower anchor, and the existing ring
   centered on the same axis as the result. Values and completion stay wholly
   engine-owned; CSS only gives those states a visible hierarchy. */

/* --------------------------------------------------------- PAGE RHYTHM */

#film-tab-mount {
  width: min(100%, 1040px);
  min-width: 0;
  margin-inline: auto;
}

#film-tab-mount > .pg-head {
  margin-bottom: clamp(24px, 4vw, 38px);
}

/* Honest empty-state copy remains an ordinary, quiet operational note. */
#film-tab-mount > .pg-head + .pick-sub {
  max-width: 62ch;
  margin: 0;
  padding: 12px 14px;
  background: var(--navy);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
  color: var(--mist);
  line-height: 1.5;
}

/* --------------------------------------------------- THREE INPUT VERTICES */

.gr-tiles {
  --gr-link: var(--line);
  position: relative;
  isolation: isolate;
  width: min(100%, 900px);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(10px, 2vw, 18px);
  row-gap: clamp(54px, 7vw, 74px);
}

/* A thin, non-semantic diagram connects the three facts. The cards cover the
   portions of each line that run through them, leaving only the joins visible. */
.gr-tiles::before {
  position: absolute;
  z-index: 0;
  top: 56px;
  right: 25%;
  bottom: 56px;
  left: 25%;
  background:
    linear-gradient(var(--gr-link), var(--gr-link)) center top / 100% 1px no-repeat,
    linear-gradient(
      to top right,
      transparent 49.45%,
      var(--gr-link) 49.7%,
      var(--gr-link) 50.3%,
      transparent 50.55%
    ) left top / 50% 100% no-repeat,
    linear-gradient(
      to bottom right,
      transparent 49.45%,
      var(--gr-link) 49.7%,
      var(--gr-link) 50.3%,
      transparent 50.55%
    ) right top / 50% 100% no-repeat;
  content: '';
  pointer-events: none;
}

.gr-tile {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 118px;
  padding: 15px 16px 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  gap: 7px;
  background: var(--panel);
  border: 1px dashed var(--dim);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

.gr-tile.gr-quiz {
  grid-column: 1 / 3;
  grid-row: 1;
}

.gr-tile.gr-practice {
  grid-column: 3 / 5;
  grid-row: 1;
}

.gr-tile.gr-game {
  grid-column: 2 / 4;
  grid-row: 2;
}

/* The result-ring begins immediately below this stem, so it reads as the one
   number composed from the three visible inputs rather than a fourth card. */
.gr-tile.gr-game::after {
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 46px;
  background: var(--gr-link);
  content: '';
  pointer-events: none;
}

.gr-tile-k {
  min-width: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.gr-tile-v {
  min-width: 0;
  align-self: center;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.45rem, 5vw, 3.5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.86;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.gr-tile-s {
  min-width: 0;
  color: var(--mist);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* A fed vertex gets one narrow light rail. These are facts, not buttons, so no
   fake hover or pointer treatment is introduced. */
.gr-tile:has(.gr-tile-v:not(.gr-nyet)) {
  background: var(--navy);
  border-color: var(--on-accent);
  border-style: solid;
  box-shadow:
    inset 0 -3px 0 var(--gold),
    0 10px 24px rgba(17, 25, 12, 0.045);
}

/* Missing is a plain-language state, never a red failure and never styled like
   the numeric zero. The dashed tile boundary is a second, non-colour cue. */
.gr-tile-v.gr-nyet {
  align-self: center;
  color: var(--mist);
  font-family: var(--face-type);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

/* `.dsh-ring.gt` is the sole canonical complete-week signal. Metallic gold is
   structure only—border, rail, connector—on a pinned dark instrument; it is
   never used as text on the light canvas. */
.gr-tiles:has(+ .dsh.dsh-film .dsh-ring.gt) {
  --gr-link: var(--dg-gold);
}

.gr-tiles:has(+ .dsh.dsh-film .dsh-ring.gt) .gr-tile {
  background:
    linear-gradient(145deg, rgba(212, 175, 55, 0.18), transparent 58%),
    var(--dg-ground);
  border-color: var(--dg-gold);
  border-style: solid;
  box-shadow:
    inset 0 -4px 0 var(--dg-gold),
    0 12px 26px rgba(17, 25, 12, 0.12);
}

.gr-tiles:has(+ .dsh.dsh-film .dsh-ring.gt) .gr-tile-k,
.gr-tiles:has(+ .dsh.dsh-film .dsh-ring.gt) .gr-tile-s {
  color: var(--dg-mist);
}

.gr-tiles:has(+ .dsh.dsh-film .dsh-ring.gt) .gr-tile-v {
  color: var(--dg-text);
}

/* ------------------------------------------------- COMPOSED SIQ INSTRUMENT */

/* This adjacency only exists on the full Grades tab. My Week has no gr-tiles,
   so its already-approved dashboard geometry remains untouched. */
.gr-tiles + .dsh.dsh-film {
  width: min(100%, 900px);
  min-width: 0;
  margin: 56px auto 26px;
  padding: clamp(16px, 2.5vw, 20px);
}

.gr-tiles + .dsh.dsh-film .dsh-head {
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}

.gr-tiles + .dsh.dsh-film .dsh-ring {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  margin-top: -66px;
  background: var(--dg-ground);
  border-width: 4px;
  box-shadow: 0 0 0 8px var(--navy);
}

.gr-tiles + .dsh.dsh-film .dsh-ring.gt {
  box-shadow:
    0 0 0 8px var(--navy),
    0 0 0 10px rgba(212, 175, 55, 0.3),
    0 8px 20px rgba(17, 25, 12, 0.16);
}

.gr-tiles + .dsh.dsh-film .dsh-ring b {
  font-size: 2.45rem;
}

.gr-tiles + .dsh.dsh-film .dsh-id {
  max-width: 54ch;
}

.gr-tiles + .dsh.dsh-film .dsh-id h3 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

/* The shared film panel is a Bolt-Black instrument in every mount. Repair the
   old light-chrome aliases here by class so Grades and My Week both remain AA. */
.dsh.dsh-film .dsh-climb,
.dsh.dsh-film .dsh-pdelta,
.dsh.dsh-film .dsh-spark-wrap,
.dsh.dsh-film .fg-name,
.dsh.dsh-film .fg-val,
.dsh.dsh-film .fg-upd,
.dsh.dsh-film .fg-focus,
.dsh.dsh-film .fg-rep-n,
.dsh.dsh-film .fg-rep-tags {
  color: var(--dg-text);
}

.dsh.dsh-film .dsh-climb span,
.dsh.dsh-film .dsh-spark-wrap span,
.dsh.dsh-film .fg-kind,
.dsh.dsh-film .fg-hint,
.dsh.dsh-film .fg-rep-sum,
.dsh.dsh-film .fg-rep-note,
.dsh.dsh-film .fg-clean,
.dsh.dsh-film .fg-tips p {
  color: var(--dg-mist);
}

.dsh.dsh-film .fg-tips {
  border-top-color: rgba(243, 241, 238, 0.16);
}

/* Gold remains the completion rail while the live phrase stays readable text. */
.dsh.dsh-film .gt-line {
  width: fit-content;
  padding-left: 8px;
  display: inline-block;
  border-left: 3px solid var(--dg-gold);
  color: var(--dg-text);
}

.dsh.dsh-film .gt-line.dim {
  border-left-color: var(--dg-mist);
  color: var(--dg-mist);
}

.dsh.dsh-film .fg-row.fg-open {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
}

.dsh.dsh-film .fg-row.fg-open:focus-visible {
  outline: 3px solid var(--dg-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------- QUIZ HISTORY */

.gr-quizzes {
  width: min(100%, 900px);
  min-width: 0;
  margin: 34px auto 0;
}

.gr-quizzes > .section-title {
  margin: 0 0 10px;
}

.gr-quiz-row {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, auto) minmax(58px, 76px) 12px;
  align-items: center;
  gap: 8px 14px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-bottom-width: 0;
  border-radius: 0;
  color: var(--white);
  cursor: pointer;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
}

.gr-quiz-row:first-of-type {
  border-radius: var(--face-card-radius) var(--face-card-radius) 0 0;
}

.gr-quiz-row:last-child {
  border-bottom-width: 1px;
  border-radius: 0 0 var(--face-card-radius) var(--face-card-radius);
}

.gr-quiz-row::after {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--dim);
  border-right: 1.5px solid var(--dim);
  content: '';
  transform: rotate(45deg);
  justify-self: end;
}

.gr-quiz-name {
  min-width: 0;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gr-quiz-when {
  min-width: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gr-quiz-val {
  min-width: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  text-align: right;
  white-space: nowrap;
}

.gr-quiz-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--on-accent);
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .gr-quiz-row:hover {
    background: var(--panel);
    box-shadow: inset 3px 0 0 var(--dim);
  }
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 700px) {
  #film-tab-mount > .pg-head {
    margin-bottom: 24px;
  }

  .gr-tiles {
    column-gap: 8px;
    row-gap: 54px;
  }

  .gr-tiles::before {
    top: 52px;
    bottom: 52px;
  }

  .gr-tile {
    min-height: 108px;
    padding: 13px 11px 12px;
    gap: 6px;
  }

  .gr-tile-k {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }

  .gr-tile-v {
    font-size: clamp(2.05rem, 11vw, 2.65rem);
  }

  .gr-tile-v.gr-nyet {
    font-size: 0.86rem;
  }

  .gr-tile-s {
    font-size: 0.69rem;
  }

  .gr-tile.gr-game::after {
    height: 41px;
  }

  .gr-tiles + .dsh.dsh-film {
    margin-top: 50px;
    padding: 14px;
  }

  .gr-tiles + .dsh.dsh-film .dsh-ring {
    width: 86px;
    height: 86px;
    margin-top: -57px;
  }

  .gr-tiles + .dsh.dsh-film .dsh-ring b {
    font-size: 2.2rem;
  }

  .dsh.dsh-film .fg-row.fg-open {
    min-height: 48px;
    padding-block: 10px;
  }

  .gr-quizzes {
    margin-top: 28px;
  }

  .gr-quiz-row {
    min-height: 68px;
    padding: 11px 12px;
    grid-template-columns: minmax(0, 1fr) auto 12px;
    grid-template-areas:
      'grade-name grade-value grade-cue'
      'grade-when grade-value grade-cue';
    gap: 4px 10px;
  }

  .gr-quiz-name {
    grid-area: grade-name;
  }

  .gr-quiz-when {
    grid-area: grade-when;
  }

  .gr-quiz-val {
    grid-area: grade-value;
    font-size: 1.4rem;
  }

  .gr-quiz-row::after {
    grid-area: grade-cue;
  }
}

@media (max-width: 360px) {
  .gr-tiles {
    column-gap: 6px;
  }

  .gr-tile {
    padding-inline: 9px;
  }

  .gr-tile-k {
    font-size: 0.57rem;
    letter-spacing: 0.09em;
  }

  .gr-tile-s {
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gr-tile,
  .gr-quiz-row,
  .gr-tiles::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  .gr-tile,
  .gr-quiz-row {
    border-color: CanvasText;
  }

  .gr-quiz-row:focus-visible {
    outline-color: Highlight;
  }
}

/* ------------------------------------------- POST-GOLDEN PHONE + PLAYER AUDIT
   Real engine-emitted hooks only. These close the last one-hand target and
   narrow-screen seams found after the full visual review; no visibility,
   source order, or interaction behavior changes here. */

#screen-home .coach-home-rename {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-decoration: underline;
}

#screen-auth .pw-toggle {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 10px;
}

#screen-legal #legal-body {
  width: min(100%, 860px);
  margin-inline: auto;
}

#screen-legal #legal-body > h2 {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.05rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: none;
}

#screen-home .player-home .new-count {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--mist);
}

#screen-vocab #vocab-body > h2 {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.05rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: none;
}

#screen-vocab #vb-chips .aud-chip {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--mist);
}

#screen-vocab #vb-chips .aud-chip.on {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-vocab .vt-streak,
#screen-vocab .vt-streak.heating,
#screen-vocab .vt-streak.onfire,
#screen-vocab .vt-streak.enfuego {
  background: var(--panel);
  border-color: var(--line);
  color: var(--white);
  box-shadow: none;
}

#screen-vocab .vt-fuego-banner {
  background: var(--ok-bg);
  border-color: var(--ok);
  border-radius: var(--face-control-radius);
  color: var(--ok);
  text-shadow: none;
}

#screen-vocab .vt-flash,
#screen-vocab .vt-flash.heating,
#screen-vocab .vt-flash.onfire,
#screen-vocab .vt-flash.enfuego {
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--face-control-radius);
  color: var(--dg-text);
  font-size: 0.82rem;
  box-shadow: none;
  text-shadow: none;
  animation: none;
}

#screen-vocab .take-score {
  background: var(--navy);
  border-color: var(--line);
  border-left: 3px solid var(--ok);
  color: var(--white);
}

#screen-vocab .take-score-num {
  color: var(--white);
}

#screen-quiz-result .result-choice {
  min-height: 44px;
}

/* ======================================================= LAUNCHPAD + QC FACE
   2026-09-07 · engine base 56bc455. Calm, light, Atkinson-led surfaces.
   All values, missing states, verdicts and permissions remain engine-owned.
   No styles change the async mount order or replace operational text. */

/* My Week: the useful number leads; identity supports it. */
#screen-home .player-home {
  max-width: 900px;
}

#screen-home .player-home .player-home-identity {
  margin-bottom: 20px;
  padding-bottom: 16px;
}

#screen-home .player-home .player-home-name {
  max-width: none;
  font-family: var(--face-type);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-transform: none;
}

.mw-take,
.mw-tri {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
  color: var(--white);
  font-family: var(--face-type);
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 140ms ease;
}

.mw-take {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 16px;
  padding: 20px;
  text-align: left;
}

.mw-take-n {
  min-width: 0;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}

.mw-take-l {
  color: var(--white);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.mw-take-sub {
  grid-column: 1 / -1;
  color: var(--mist);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#screen-home .player-home .mw-take + .mw-sharpen {
  margin-block: 16px 0;
}

/* One button, three visible grades and a center ring. Missing vertices remain
   readable facts. No reserved height on #dsh-film while its content is absent. */
.mw-tri {
  --mw-link: var(--line);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 96px)) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding: 16px 20px 14px;
  text-align: center;
}

.mw-tri::before {
  position: absolute;
  z-index: -1;
  top: 80px;
  bottom: 68px;
  left: 50%;
  width: min(48%, 208px);
  transform: translateX(-50%);
  background:
    linear-gradient(var(--mw-link), var(--mw-link)) center top / 100% 1px no-repeat,
    linear-gradient(to top right, transparent 49.4%, var(--mw-link) 49.7%, var(--mw-link) 50.3%, transparent 50.6%) left top / 50% 100% no-repeat,
    linear-gradient(to bottom right, transparent 49.4%, var(--mw-link) 49.7%, var(--mw-link) 50.3%, transparent 50.6%) right top / 50% 100% no-repeat;
  content: '';
}

.mw-tri-k {
  grid-column: 1 / -1;
  grid-row: 1;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

.mw-tri-v {
  min-width: 0;
  padding: 8px;
  display: grid;
  align-self: stretch;
  align-content: start;
  justify-items: center;
  gap: 4px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
}

.mw-tri-quiz { grid-column: 2 / 4; grid-row: 2; }
.mw-tri-practice { grid-column: 4 / 6; grid-row: 2; }
.mw-tri-game { grid-column: 3 / 5; grid-row: 4; }

.mw-tri-l {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.mw-tri-n {
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.mw-tri-s {
  color: var(--mist);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mw-tri-v:has(.mw-tri-nyet) {
  background: var(--panel);
  border-style: dashed;
}

.mw-tri-n.mw-tri-nyet {
  color: var(--mist);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.mw-tri-ring {
  grid-column: 3 / 5;
  grid-row: 3;
  justify-self: center;
  width: 76px;
  height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  background: var(--navy);
  border: 3px solid var(--white);
  border-radius: 50%;
  color: var(--white);
}

.mw-tri-ring b {
  font-family: var(--face-type);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mw-tri-ring i {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.mw-tri-go {
  grid-column: 1 / -1;
  grid-row: 5;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
}

/* Gold follows only .gt. It is structure/fill, never text or a fabricated grade. */
.mw-tri.gt { --mw-link: var(--dg-gold); }
.mw-tri.gt .mw-tri-v,
.mw-tri-ring.gt {
  background: var(--dg-gold);
  border-color: var(--dg-gold);
  border-style: solid;
  color: var(--on-accent);
}
.mw-tri.gt .mw-tri-l,
.mw-tri.gt .mw-tri-n,
.mw-tri.gt .mw-tri-s { color: var(--on-accent); }

.mw-take.mw-take-preview,
.mw-tri.mw-tri-preview {
  border-style: dashed;
  cursor: default;
}

/* Coach review and player feedback: small utilities, not new hero cards.
   Drop remains first in the card; reason buttons have no selected-state hook. */
.qd-drop,
.flag-reason,
.qc-copy,
.qc-void,
.qc-keep,
.qc-snooze {
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 14px;
  background: var(--navy);
  border: 1px solid var(--dim);
  border-radius: var(--face-control-radius);
  color: var(--white);
  font: 700 0.875rem/1.35 var(--face-type);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.qd-drop {
  margin-bottom: 10px;
}

.qd-drop,
.qc-void {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

.qd-lint-note,
.qa-evidence,
.qa-void,
.take-empty {
  max-width: 80ch;
  margin: 12px 0;
  color: var(--mist);
  font: 400 0.875rem/1.5 var(--face-type);
  overflow-wrap: anywhere;
}

.qa-evidence {
  padding: 8px 12px;
  border-left: 2px solid var(--line);
}

.qa-void {
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
}

.flag-box {
  min-width: 0;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#screen-quiz-take .flag-box .flag-btn {
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.35;
  white-space: normal;
}

.flag-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.flag-reason {
  background: var(--panel);
  font-weight: 400;
}

/* The fifth vital gets a full-width continuation of the existing readout.
   Its value can be a phrase, not just a percentage. No money-bearing siblings
   or async text are altered, and expanded/hidden behavior stays engine-owned. */
#screen-home .admin-vitals-grid .admin-vital[data-admin-vital='quiz-quality'] {
  grid-column: 1 / -1;
  min-height: 104px;
  border-top: 1px solid var(--line);
  border-left: 0;
}

#screen-home .admin-vital[data-admin-vital='quiz-quality'] .admin-vital-v {
  font-family: var(--face-type);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.qc-h {
  margin: 24px 0 10px;
  color: var(--white);
  font: 700 1rem/1.35 var(--face-type);
  letter-spacing: -0.01em;
}
.qc-h:first-child { margin-top: 0; }

#screen-home .admin-vital-table.qc-classes,
#screen-home .admin-vital-table.qc-discard {
  min-width: 400px;
  font-size: 0.875rem;
}

#screen-home .qc-classes th,
#screen-home .qc-discard th {
  font-family: var(--face-type);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}

.qc-promote {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.qc-promote-l {
  color: var(--white);
  font: 700 0.875rem/1.4 var(--face-type);
  overflow-wrap: anywhere;
}
.qc-promote-rule,
.qc-fail {
  max-width: 80ch;
  margin: 8px 0 0;
  color: var(--mist);
  font: 400 0.875rem/1.5 var(--face-type);
  overflow-wrap: anywhere;
}
.qc-copy { margin-top: 10px; }

/* Percentages are the engine's unitless --pct values. The 0-height/no-data
   cases retain their real text above the baseline, with no invented bar floor.
   Week labels repeat only the engine's data-week, never inferred dates. */
.qc-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 220px;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 32px 8px 50px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
}
.qc-bar {
  position: relative;
  flex: 1 0 76px;
  height: calc(clamp(0, var(--pct, 0), 100) * 1%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--line);
  /* The translucent fill alone is too faint for sunlight/low vision. These
     edges trace only the real height, so zero/no data still draws no bar. */
  border-inline: 2px solid var(--dim);
  border-radius: 3px 3px 0 0;
  color: var(--white);
  font: 700 0.75rem/1.4 var(--face-type);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qc-bar::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 12px;
  transform: translateX(-50%);
  color: var(--mist);
  font: 400 0.6875rem/1.3 var(--mono);
  content: attr(data-week);
}

/* El Jefe queue: one flat list; no decorative urgency or preselected verdict.
   Run/Copy output stays visible, and decision buttons stay in source order. */
#admin-qc-body { min-width: 0; }
.qc-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 20px;
}
#qc-run.btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--on-accent);
  border: 1px solid var(--on-accent);
  border-radius: var(--face-control-radius);
  color: var(--dg-mist);
  font: 700 0.875rem/1.35 var(--face-type);
  box-shadow: none;
  text-transform: none;
  transform: none;
}
.qc-run-out,
#qc-count {
  min-width: 0;
  margin: 0;
  color: var(--mist);
  font: 400 0.875rem/1.5 var(--face-type);
  overflow-wrap: anywhere;
}
.qc-run-out { flex: 1 1 220px; }
#qc-count { margin-bottom: 10px; }
#qc-queue {
  min-width: 0;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}
#qc-queue > .pick-sub,
#qc-queue > .qc-empty {
  margin: 0;
  padding: 20px;
  color: var(--mist);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.qc-row {
  min-width: 0;
  padding: 18px 20px;
  overflow-wrap: anywhere;
}
.qc-row + .qc-row { border-top: 1px solid var(--line); }
.qc-row:first-child { border-radius: var(--face-card-radius) var(--face-card-radius) 0 0; }
.qc-row:last-child { border-radius: 0 0 var(--face-card-radius) var(--face-card-radius); }
.qc-row:only-child { border-radius: var(--face-card-radius); }
.qc-stem {
  max-width: 85ch;
  margin: 0;
  color: var(--white);
  font: 700 1rem/1.4 var(--face-type);
}
.qc-stem em { font-style: normal; }
.qc-fp,
.qc-meta {
  max-width: 90ch;
  margin: 8px 0 0;
  color: var(--mist);
  font: 400 0.875rem/1.5 var(--face-type);
}
.qc-meta { font-size: 0.8125rem; }
.qc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.qc-snooze { background: transparent; }
.qc-err {
  margin: 12px 0 0;
  color: var(--bad);
  font: 400 0.875rem/1.5 var(--face-type);
}
.qc-row:has(.qc-err) {
  background: var(--bad-bg);
  box-shadow: inset 3px 0 0 var(--bad);
}

.mw-take:focus-visible,
.mw-tri:focus-visible,
.qd-drop:focus-visible,
.flag-reason:focus-visible,
.qc-copy:focus-visible,
.qc-void:focus-visible,
.qc-keep:focus-visible,
.qc-snooze:focus-visible,
#qc-run:focus-visible,
.qc-bars:focus-visible,
#screen-home .admin-vital-detail-scroll:has(.qc-classes):focus-visible,
#screen-home .admin-vital-detail-scroll:has(.qc-discard):focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 3px;
}

.qd-drop:disabled,
.flag-reason:disabled,
.qc-copy:disabled,
.qc-void:disabled,
.qc-keep:disabled,
.qc-snooze:disabled,
#qc-run.btn:disabled {
  background: var(--panel);
  border-color: var(--line);
  color: var(--mist);
  opacity: 1;
  cursor: wait;
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  .mw-take:not(.mw-take-preview):hover,
  .mw-tri:not(.mw-tri-preview):hover {
    border-color: var(--dim);
  }
  .mw-take:not(.mw-take-preview):hover .mw-take-l,
  .mw-tri:not(.mw-tri-preview):hover .mw-tri-go {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .flag-reason:hover:not(:disabled),
  .qc-copy:hover:not(:disabled),
  .qc-keep:hover:not(:disabled),
  .qc-snooze:hover:not(:disabled) {
    background: var(--panel);
    border-color: var(--white);
  }
  .qd-drop:hover:not(:disabled),
  .qc-void:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #qc-run.btn:hover:not(:disabled) { filter: none; text-decoration: underline; }
}

@media (max-width: 700px) {
  .mw-take,
  .mw-tri,
  .qd-drop,
  .flag-reason,
  .qc-copy,
  .qc-void,
  .qc-keep,
  .qc-snooze,
  #qc-run.btn,
  #screen-quiz-take .flag-box .flag-btn { min-height: 48px; }
  .mw-take { padding: 16px; column-gap: 12px; }
  .mw-tri {
    grid-template-columns: 0 repeat(4, minmax(0, 1fr)) 0;
    padding: 16px 12px 12px;
    column-gap: 4px;
  }
  .mw-tri-v { padding-inline: 6px; }
  .mw-tri-n { font-size: 1.625rem; }
  .qc-row { padding: 16px; }
  .qc-actions > button { flex: 1 1 78px; }
  .qc-run { align-items: flex-start; }
  #qc-queue > .pick-sub,
  #qc-queue > .qc-empty { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-take,
  .mw-tri,
  .qd-drop,
  .flag-reason,
  .qc-copy,
  .qc-void,
  .qc-keep,
  .qc-snooze,
  #qc-run.btn { transition: none; animation: none; }
  .qc-bars { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  .mw-tri.gt .mw-tri-v,
  .mw-tri-ring.gt { outline: 2px solid Highlight; outline-offset: -2px; }
  .qc-bar { background: Canvas; color: CanvasText; border-inline: 2px solid CanvasText; }
  .qd-drop,
  .qc-void { border-style: dashed; }
}

#screen-quiz-take .take-answer > .linklike {
  min-width: 44px;
  padding-inline: 10px;
}

#screen-vault .library-tab,
#feedback-inbox .fbk-filter,
#admin-accounts-body .dir-code-regen {
  min-width: 44px;
}

#admin-accounts-body .dir-code-in {
  min-height: 44px;
}

@media (max-width: 700px) {
  #screen-depth-chart #rd-field .dcf-mv > button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }

  #screen-staff #staff-directory .staff-actions > .mem-btn,
  #screen-quiz-result #q-send.result-draft-send.btn,
  #admin-accounts-body #admin-accounts-dir .dir-code > button,
  #admin-accounts-body #admin-accounts-dir .dir-details,
  #admin-accounts-body #admin-accounts-dir .dir-reset,
  #admin-accounts-body #admin-accounts-dir .dir-delete,
  #feedback-inbox .fbk-filter[data-fbf],
  #feedback-inbox .fbk-resolve[data-id] {
    min-height: 48px;
  }

  #screen-vocab #vb-chips .aud-chip,
  #screen-board .aud-chip,
  #screen-vault .library-tab,
  #feedback-inbox .fbk-filter,
  #admin-accounts-body .dir-code-regen,
  #screen-landing .entry-meta .linklike,
  #screen-landing .entry-legal .linklike,
  #screen-auth .pw-toggle,
  #screen-quiz-take .take-answer > .linklike {
    min-width: 48px;
    min-height: 48px;
  }

  #admin-accounts-body .dir-code-in {
    min-height: 48px;
  }

  .dsh.dsh-film .fg-row.fg-open {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 10px;
  }

  .dsh.dsh-film .fg-kind {
    grid-column: 1;
    grid-row: 1;
  }

  .dsh.dsh-film .fg-name {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }

  .dsh.dsh-film .fg-val {
    grid-column: 3;
    grid-row: 1;
  }

  .dsh.dsh-film .fg-new {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .dsh.dsh-film .fg-upd {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .dsh.dsh-film .fg-grp {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
}

@media (max-width: 430px) {
  #screen-board .lb-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 20px 4px minmax(0, 1fr);
    align-items: center;
    gap: 4px 9px;
  }

  #screen-board .lb-rank {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #screen-board .lb-row > .pos-bar {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  #screen-board .lb-id {
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
  }

  #screen-board .lb-id strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #screen-board .lb-stats {
    margin-left: 0;
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px 10px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-vocab .vt-flash,
  #screen-vocab .vt-timer-bar {
    animation: none;
    transition: none;
  }
}

/* =============================================================================
   NORTH STAR SYSTEM PASS · 2026-09-02

   Calm operational software with an athletic edge. This final cascade repairs
   the visual seams left by earlier FACE generations without changing a single
   engine hook: bright work surface, quieter navigation, hairline grouping,
   Atkinson-led hierarchy, useful facts before decoration, and one intentional
   Lightning-Yellow signal at a time. */

:root {
  --face-card-radius: 10px;
  --face-control-radius: 7px;
  --face-reading-measure: 820px;
  --face-operational-measure: 1180px;
  --face-ledger-measure: 1280px;
}

/* --------------------------------------------------------- SYSTEM + SHELL */

body {
  background: var(--panel);
}

.app-shell {
  grid-template-columns: 226px minmax(0, 1fr);
  background: var(--panel);
}

.app-sidebar {
  background: var(--navy);
  border-right-color: var(--line);
  box-shadow: none;
}

.app-topbar {
  background: var(--navy);
  box-shadow: none;
}

.app-stage {
  background: var(--panel);
  box-shadow: none;
}

.app-topbar {
  min-height: 68px;
  border-bottom: 1px solid var(--line);
}

.app-stage .home-wrap {
  width: min(100%, calc(var(--face-operational-measure) + 88px));
  margin-inline: auto;
  padding: 40px clamp(24px, 3.25vw, 44px) 92px;
}

#game-week-body {
  width: 100%;
  max-width: none;
  padding: 0;
}

.app-nav-item,
.app-action,
.app-preview-exit,
.btn,
.btn-ghost,
.signout,
.code-input,
.text-input,
select.code-input {
  border-radius: var(--face-control-radius);
}

.app-sidebar .app-nav-item {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

.app-sidebar .app-nav-item:hover {
  background: rgba(17, 25, 12, 0.045);
}

.app-sidebar .app-nav-item.active {
  background: rgba(17, 25, 12, 0.07);
  box-shadow: inset 3px 0 0 var(--gold);
}

.app-action,
.app-preview-exit {
  min-height: 44px;
}

.app-actions .app-action,
.app-actions .btn-ghost,
.app-actions .app-action-viewas {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--white);
  box-shadow: none;
}

.app-actions .app-action:hover,
.app-actions .btn-ghost:hover,
.app-actions .app-action-viewas:hover {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
  filter: none;
  transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--on-accent);
}

/* Older field rules remove `outline` on focus with greater specificity. Put
   the keyboard affordance back explicitly; a border shift alone is not enough
   in sunlight or high zoom. */
.code-input:focus-visible,
.share-url:focus-visible,
.text-input:focus-visible,
select.code-input:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
  border-color: var(--dim);
}

.admin-vital-detail-open:focus-visible,
#admin-feedback-open:focus-visible {
  outline-color: var(--on-accent);
}

.btn-red:focus-visible,
.app-context .app-action:focus-visible,
.dsh button:focus-visible,
.fld-wrap button:focus-visible {
  outline-color: var(--gold);
}

.pg-head {
  margin-bottom: 28px;
}

.pg-title {
  font-size: clamp(2.2rem, 3.25vw, 2.55rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.pg-bar {
  width: 42px;
  height: 3px;
}

.section-title {
  margin: 28px 0 12px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
}

.section-title::before {
  width: 18px;
  height: 2px;
  background: var(--dim);
}

.kpi,
.tile,
.onboard-card,
.topic-card,
.aud-group,
.aud-summary,
.share-row,
.rank-card,
.lb-team-box,
.side-tile,
.kid-tile,
.vp-card,
.pgm-tile,
.pgm-card,
.billing-kpi,
.billing-trend,
.billing-account-panel,
.billing-cost-panel,
.va-pick,
.app-preview-banner {
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

.tile:hover,
.kpi:hover,
.pgm-tile:hover,
.pgm-card:hover {
  box-shadow: none;
  transform: none;
}

.btn-red {
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--navy);
}

.btn-red:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  filter: none;
}

/* Most legacy `btn-gold` controls are ordinary primary actions. Bolt Black is
   the product default; a screen-specific rule below spends yellow only where
   the action is the singular recommendation or a safety gate. */
.btn-gold {
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--navy);
  box-shadow: none;
}

.btn-gold:hover:not(:disabled) {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  filter: none;
}

.team-code-banner {
  background: var(--panel);
  border-color: var(--line);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
}

.verify-cta {
  background: var(--navy);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-card-radius) var(--face-card-radius) 0;
  box-shadow: none;
  animation: none;
}

/* Feedback has a real destination in v16. Keep its navigation slot legible. */
#app-nav [data-screen='admin-feedback'] .app-nav-icon,
.app-mobile-nav [data-screen='admin-feedback'] .app-nav-icon,
.app-mobile-sheet [data-screen='admin-feedback'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H9l-5 3v-14Z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H9l-5 3v-14Z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- FRONT DOOR */

#screen-landing {
  background: var(--navy);
}

#screen-landing .hero {
  background: var(--navy);
  border-bottom-color: var(--line);
}

#screen-landing .yardlines {
  opacity: 0.28;
}

#screen-landing .entry-card {
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
}

#screen-landing .entry-card.team,
#screen-landing .entry-card.coach,
#screen-landing .entry-card.individual {
  border-top: 1px solid var(--line);
}

#screen-landing .entry-card.coach {
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-landing .entry-card.coach .btn-gold {
  box-shadow: none;
}

.auth-wrap {
  width: min(100%, 460px);
}

.auth-wrap .pick-title {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2rem, 6vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: none;
}

.auth-wrap .btn-ghost,
.auth-wrap .linklike {
  min-height: 44px;
}

/* ----------------------------------------------------------- COACH HOME */

#screen-home .coach-home,
#screen-home .coach-home:has(> #coach-home-setup:not(:empty)) {
  width: min(100%, 1080px);
  margin-inline: auto;
  row-gap: 22px;
}

#screen-home .coach-home-identity {
  align-items: center;
}

#screen-home .coach-home-logo {
  width: 64px;
  height: 64px;
}

#screen-home .coach-home-team {
  font-size: clamp(2.25rem, 4vw, 3rem);
}

#screen-home .coach-home-rename {
  width: fit-content;
  min-height: 44px;
  margin: -6px 0 -10px;
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  color: var(--mist);
  font-size: 0.75rem;
  font-weight: 700;
  text-underline-offset: 3px;
}

#screen-home .coach-rename-form {
  width: min(100%, 620px);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 8px;
}

#screen-home .coach-rename-form .code-input,
#screen-home .coach-rename-form .btn,
#screen-home #coach-rename-cancel {
  min-height: 44px;
  margin: 0;
}

#screen-home .coach-rename-form .code-input {
  min-width: 0;
  background: var(--panel);
  border-color: var(--dim);
  font-size: 1rem;
  font-weight: 700;
}

#screen-home .coach-rename-form .btn-gold {
  width: auto;
  min-width: 76px;
  padding-inline: 14px;
}

#screen-home #coach-rename-cancel {
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  color: var(--mist);
}

#screen-home #coach-rename-err {
  grid-column: 1 / -1;
}

#screen-home .coach-home-week {
  min-height: 190px;
  background: transparent;
  border: 1px solid var(--line);
}

#screen-home .coach-home-section-head {
  display: grid;
  justify-content: start;
  gap: 5px;
}

#screen-home .coach-home-section-head h2 {
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  text-transform: none;
}

#screen-home .coach-send-card {
  padding-top: 14px;
}

#screen-home .coach-send-action {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
  box-shadow: none;
}

#screen-home .coach-home-actions {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

#screen-home .coach-home-action,
#screen-home #ch-build {
  background: transparent;
  border-color: var(--line);
  color: var(--white);
}

#screen-home .coach-home-action:hover,
#screen-home #ch-build:hover {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
}

#screen-home .coach-home-code {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Setup is one progress spine, not a card containing four more cards. */
#screen-home .coach-setup {
  padding: 16px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

#screen-home .chs-steps {
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-home .chs-step {
  min-height: 58px;
  border: 0;
  border-radius: 0;
}

#screen-home .chs-step + .chs-step {
  border-left: 1px solid var(--line);
}

#screen-home .chs-step.current,
#screen-home .chs-step[aria-current='step'] {
  background: var(--navy);
  border-color: transparent;
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-home .chs-step.done {
  background: var(--navy);
  border-color: transparent;
  color: var(--ok);
}

#screen-home .chs-standard {
  background: transparent;
  border-left-color: var(--dim);
}

#screen-home .chs-groups {
  margin-top: 10px;
  grid-template-columns: minmax(0, 1fr);
  background: transparent;
  border-radius: var(--face-card-radius);
}

#screen-home .chs-group {
  min-height: 54px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

#screen-home .chs-group:last-child {
  border-bottom: 0;
}

#screen-home .chs-group.ok {
  background: var(--navy);
  box-shadow: inset 3px 0 0 var(--ok);
}

#screen-home .chs-open-chart {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* ------------------------------------------------------------ GAME WEEK */

.gw-page {
  width: min(100%, calc(var(--face-operational-measure) + 88px));
  margin-inline: auto;
  padding: 40px clamp(24px, 3.25vw, 44px) 92px;
  gap: 12px;
}

.gw-head {
  min-height: 0;
  margin-bottom: 12px;
  padding: 0 0 24px;
  align-items: center;
}

.gw-heading {
  display: flex;
  flex-direction: column;
}

.gw-kicker::before {
  width: 18px;
  height: 3px;
  background: var(--dim);
}

.gw-title {
  max-width: none;
  margin-top: 8px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.2rem, 3.25vw, 2.55rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-transform: none;
}

.gw-context {
  margin-top: 8px;
  color: var(--mist);
  font-family: var(--face-type);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.gw-actions .btn,
.gw-actions .btn-ghost,
.gw-view-players,
.gw-open-reports {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

.gw-card,
.gw-metric,
.gw-room,
.gw-rooms {
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

.gw-card {
  padding: 16px;
}

.gw-card-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.gw-label,
.gw-metric-label,
.gw-room-pos {
  font-size: 0.7rem;
}

.gw-status {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--white);
}

.gw-readiness {
  min-height: 210px;
  box-shadow: inset 3px 0 0 var(--gold);
}

.gw-readiness-body {
  min-height: 140px;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px;
}

.gw-ring {
  width: 118px;
  height: 118px;
}

.gw-ring-value {
  font-family: var(--face-type);
  font-size: 2.8rem;
  font-weight: 700;
}

.gw-ring-label {
  font-size: 0.62rem;
}

.gw-metrics {
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

.gw-metric {
  min-height: 210px;
  padding: 16px;
  border: 0;
  border-radius: 0;
  justify-content: flex-end;
}

.gw-metric + .gw-metric {
  border-left: 1px solid var(--line);
}

.gw-metric::after {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: var(--face-control-radius);
}

.gw-metric-value {
  font-family: var(--face-type);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 0.9;
}

.gw-metric-note {
  font-size: 0.75rem;
}

.gw-chip-risk {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

.gw-att-row {
  min-height: 52px;
}

.gw-att-row b,
.gw-att-topic {
  font-size: 0.82rem;
}

.gw-att-pos,
.gw-chip {
  font-size: 0.66rem;
}

.gw-rooms {
  padding: 16px;
}

.gw-section-head {
  min-height: 0;
  margin-bottom: 12px;
  padding-bottom: 12px;
  align-items: center;
}

.gw-section-title {
  margin-top: 5px;
  font-family: var(--face-type);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
}

#screen-home .admin-home-program-health > h2,
#screen-home .admin-home-usage > h2,
#screen-home .admin-home-feedback-preview h2 {
  text-transform: none;
}

.gw-room-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

.gw-room {
  min-height: 62px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.gw-room:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.gw-room::before {
  content: none;
}

.gw-room-pos {
  background: var(--panel);
}

.gw-room-val {
  font-family: var(--face-type);
  font-size: 1.7rem;
  font-weight: 700;
}

/* ----------------------------------------------------- LEGACY AUDIENCE STEP */

#screen-builder .home-wrap {
  width: min(100%, calc(var(--face-reading-measure) + 88px));
}

#screen-builder .aud-all,
#screen-builder .aud-unit-toggle,
#screen-builder .aud-chip,
#screen-builder #aud-continue {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

#screen-builder .aud-all,
#screen-builder .aud-unit-toggle,
#screen-builder .aud-chip {
  background: var(--navy);
  border-color: var(--line);
  color: var(--white);
}

#screen-builder .aud-all.on,
#screen-builder .aud-unit-toggle.on,
#screen-builder .aud-chip.on {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-builder .aud-group,
#screen-builder .aud-summary {
  padding: 14px;
  background: transparent;
  border-color: var(--line);
}

#screen-builder .aud-pos {
  min-height: 44px;
}

/* -------------------------------------------------------------- LIBRARY */

#screen-vault .vault-sess,
#screen-vault .vault-sess.game,
#screen-vault .vault-sess.game.on {
  min-height: 62px;
  background: var(--navy);
  border-color: var(--line);
  color: var(--white);
  box-shadow: none;
}

#screen-vault .vault-sess.on,
#screen-vault .vault-sess.game.on {
  border-color: var(--white);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-vault .vp-card,
#screen-vault .vp-card.vp-wide {
  background: transparent;
}

#screen-vault .library-audience-side.on {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-vault .library-position-group.on {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--dim);
}

#screen-vault .vq-st.live {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

#screen-vault .vq-note:not(:empty) {
  background: var(--panel);
  border-left-color: var(--dim);
}

#screen-vault .vq-row,
#screen-vault .vq-row:first-of-type,
#screen-vault .vq-hint + .vq-row {
  min-height: 58px;
  background: transparent;
  border-top: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

/* ------------------------------------------------------- TEAM + ROSTER */

#screen-roster .home-wrap {
  width: min(100%, calc(var(--face-operational-measure) + 88px));
}

#screen-roster .room-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

#screen-roster .room-card {
  min-height: 116px;
  padding: 14px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-top-width: 1px;
  border-radius: var(--face-card-radius);
  color: var(--white);
}

#screen-roster .room-card.lo {
  border-color: var(--bad);
  box-shadow: inset 3px 0 0 var(--bad);
}

#screen-roster .room-card.none {
  border-color: var(--line);
  border-style: dashed;
}

#screen-roster .room-lbl,
#screen-roster .room-cov,
#screen-roster .room-chip.more {
  color: var(--mist);
}

#screen-roster .room-val {
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1.8rem;
  font-weight: 700;
}

#screen-roster .room-card.lo .room-val,
#screen-roster .room-chip.lo {
  color: var(--bad);
}

#screen-roster .room-pips .pip {
  background: var(--panel);
}

#screen-roster .room-pips .pip.on {
  background: var(--dim);
}

#screen-roster .room-card.lo .room-pips .pip.on {
  background: var(--bad);
}

#screen-roster .room-chip {
  border-color: var(--line);
  color: var(--white);
}

#screen-roster .mem-row {
  min-height: 60px;
  margin: 0;
  padding: 10px 12px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-bottom-width: 0;
  border-radius: 0;
}

#screen-roster .mem-row:first-child {
  border-radius: var(--face-card-radius) var(--face-card-radius) 0 0;
}

#screen-roster .mem-row:last-child {
  border-bottom-width: 1px;
  border-radius: 0 0 var(--face-card-radius) var(--face-card-radius);
}

#screen-roster .mem-btn,
#screen-roster .ri-del,
#screen-roster .share-copy,
#screen-roster .share-regenerate {
  min-height: 44px;
  border-color: var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
}

#screen-roster .ri-del {
  min-width: 44px;
}

#screen-roster .mem-btn:hover:not(:disabled) {
  background: var(--panel);
  border-color: var(--dim);
}

#screen-roster .mem-btn.mem-remove,
#screen-roster .ri-del {
  background: transparent;
  border-color: var(--bad);
  color: var(--bad);
}

#screen-roster .mem-btn.mem-remove:hover:not(:disabled),
#screen-roster .ri-del:hover:not(:disabled) {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

#screen-roster .mem-login.never {
  background: transparent;
  border-color: var(--dim);
  color: var(--mist);
}

/* ----------------------------------------------------------- DEPTH CHART */

#screen-depth-chart .dc-sides {
  gap: 6px;
}

#screen-depth-chart .dc-sides .chipbtn {
  min-height: 44px;
  padding: 9px 18px;
  border-radius: var(--face-control-radius);
}

#screen-depth-chart .dc-sides .chipbtn.on {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-depth-chart .dcf-spot {
  background: transparent;
  border-color: var(--line);
  border-radius: var(--face-card-radius);
}

#screen-depth-chart .dcf-card,
#screen-depth-chart .dcf-card.starter {
  min-height: 48px;
  padding: 6px 7px;
  background: var(--navy);
  border: 1px solid var(--line);
}

#screen-depth-chart .dcf-card.starter {
  border-color: var(--dim);
  box-shadow: inset 3px 0 0 var(--dim);
}

#screen-depth-chart .dcf-num {
  min-width: 30px;
  height: 30px;
  background: var(--panel);
  color: var(--white);
}

#screen-depth-chart .dcf-mv {
  gap: 4px;
}

#screen-depth-chart .dcf-mv button {
  width: 44px;
  height: 44px;
  border-color: var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
}

#screen-depth-chart .rd-confirm {
  background: transparent;
}

#screen-depth-chart .rd-confirm-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

/* ------------------------------------------------------ STAFF DIRECTORY */

#screen-staff .staff-directory {
  min-width: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-staff .staff-directory > .pick-sub {
  margin: 0;
  padding: 18px;
}

#screen-staff .staff-row {
  min-width: 0;
  min-height: 66px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  border-bottom: 1px solid var(--line);
}

#screen-staff .staff-row:last-child {
  border-bottom: 0;
}

#screen-staff .staff-id {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

#screen-staff .staff-name {
  flex: 1 0 100%;
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#screen-staff .staff-role,
#screen-staff .staff-scope {
  min-height: 24px;
  padding: 4px 7px;
  display: inline-flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#screen-staff .staff-scope.hc {
  border-color: var(--dim);
  color: var(--white);
}

#screen-staff .staff-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

#screen-staff .staff-actions .mem-btn {
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border-color: var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
}

#screen-staff .staff-actions .staff-remove {
  border-color: var(--bad);
  color: var(--bad);
}

#screen-staff .staff-actions .staff-remove:hover:not(:disabled) {
  background: var(--bad-bg);
}

/* ------------------------------------------------------- COMING SOON */

.coming-soon {
  width: min(100%, 760px);
  min-height: 340px;
  margin: 20px auto 0;
  padding: clamp(28px, 6vw, 56px);
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 48px);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

.coming-soon-art {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.coming-soon-art::before,
.coming-soon-art::after {
  position: absolute;
  content: '';
}

.coming-soon-art::before {
  inset: 18%;
  border: 1px solid var(--dim);
  border-radius: 50%;
}

.coming-soon-art::after {
  top: 50%;
  right: -10%;
  left: -10%;
  height: 3px;
  background: var(--gold);
}

.coming-soon-copy {
  min-width: 0;
}

.coming-soon-kicker {
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.coming-soon-title {
  margin-top: 7px;
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.coming-soon-sub {
  max-width: 48ch;
  margin-top: 11px;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.55;
}

.coming-soon-badge {
  width: fit-content;
  margin-top: 18px;
  padding: 6px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ------------------------------------------------- RESULTS + READINESS */

#screen-results .rdx-top {
  margin-bottom: 16px;
}

#screen-results .rdx-ring {
  width: 74px;
  height: 74px;
}

#screen-results .rdx-verdict {
  font-family: var(--face-type);
  font-size: 1.2rem;
}

#screen-results .rdx-grid {
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-results .rdx-mod {
  padding: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#screen-results .rdx-mod + .rdx-mod {
  border-left: 1px solid var(--line);
}

#screen-results .rdx-h {
  font-size: 0.7rem;
}

#screen-results .rs-player {
  margin: 0;
  padding: 13px 14px;
  background: transparent;
  border-color: var(--line);
  border-bottom-width: 0;
  border-radius: 0;
}

#screen-results .rs-player:first-of-type {
  border-radius: var(--face-card-radius) var(--face-card-radius) 0 0;
}

#screen-results .rs-player:last-child {
  border-bottom-width: 1px;
  border-radius: 0 0 var(--face-card-radius) var(--face-card-radius);
}

#screen-results .rs-num,
#screen-results .rs-iq,
#screen-results .cmp-chip.cmp-done,
#screen-results .ia-tag.ia-flag {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--white);
}

#screen-results .rs-row {
  min-height: 40px;
  padding: 7px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

/* ------------------------------------------------------ PROGRAM REPORTS */

#screen-program .home-wrap {
  width: min(100%, calc(var(--face-operational-measure) + 88px));
}

#screen-program .pgm-head h1,
#screen-program .pgm-head h2,
#screen-program .pgm-head h3,
#screen-program .pgm-tval,
#screen-program .pgm-ch {
  font-family: var(--face-type);
}

#screen-program .pgm-tiles {
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-program .pgm-tile,
#screen-program .pgm-tile.big {
  min-height: 104px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#screen-program .pgm-tile + .pgm-tile {
  border-left: 1px solid var(--line);
}

#screen-program .pgm-tile.big {
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-program .pgm-tile.big::after,
#screen-program .pgm-ch::before {
  content: none;
}

#screen-program .pgm-tval {
  color: var(--white);
  font-size: 1.9rem;
  font-weight: 700;
}

#screen-program .pgm-grid {
  gap: 10px;
}

#screen-program .pgm-card {
  padding: 16px;
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}

#screen-program .pgm-ch {
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#screen-program .pgm-ch small,
#screen-program .pgm-empty,
#screen-program .pgm-foot,
#screen-program .pgm-ma-note,
#screen-program .pgm-fh-more {
  font-size: 0.74rem;
}

#screen-program .pgm-mbar i,
#screen-program .pgm-dvg-bar.neg,
#screen-program .pgm-md-dot.lev.bad {
  background: var(--bad);
}

#screen-program .pgm-dvg-bar.pos,
#screen-program .pgm-md-dot.lev.ok {
  background: var(--ok);
}

#screen-program .pgm-chip.risk,
#screen-program .pgm-ma-flag {
  background: var(--bad-bg);
  color: var(--bad);
}

#screen-program .pgm-ma-imp,
#screen-program .pgm-tf.good {
  color: var(--ok);
}

#screen-program .pgm-seg {
  min-height: 44px;
  padding-inline: 12px;
}

#screen-program .pgm-seg.on {
  background: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* ------------------------------------------------------------- EL JEFE */

#screen-home .admin-vitals-grid {
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#screen-home .admin-vital {
  min-height: 116px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#screen-home .admin-vital + .admin-vital {
  border-left: 1px solid var(--line);
}

#screen-home .admin-vital.on,
#screen-home .admin-vital[aria-expanded='true'] {
  background: var(--panel);
  border-color: transparent;
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-home .admin-flag {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

#screen-home .admin-vital-detail-open,
#screen-home #admin-feedback-open {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--white);
  box-shadow: none;
}

#screen-home .admin-vital-detail-open:hover,
#screen-home #admin-feedback-open:hover {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
  filter: none;
}

/* ------------------------------------------------------ ADMIN FEEDBACK */

#feedback-inbox .fbk-filter {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

#feedback-inbox .fbk-filter.on {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#feedback-inbox .fbk-item,
#feedback-inbox .fbk-item.seen {
  background: transparent;
  box-shadow: none;
}

#feedback-inbox .fbk-item:not(.seen) .fbk-sum {
  font-weight: 700;
}

#feedback-inbox .fbk-cat,
#feedback-inbox .fbk-cat-bug,
#feedback-inbox .fbk-cat-idea,
#feedback-inbox .fbk-cat-question,
#feedback-inbox .fbk-cat-praise,
#feedback-inbox .fbk-cat-complaint,
#feedback-inbox .fbk-cat-other {
  background: var(--panel);
  border-color: var(--line);
  border-style: solid;
  color: var(--white);
  box-shadow: none;
}

#feedback-inbox .fbk-cat-other {
  border-style: dashed;
  color: var(--mist);
}

#feedback-inbox .fbk-item:has(.fbk-urgent) {
  background: var(--bad-bg);
  border-color: var(--bad);
  box-shadow: inset 4px 0 0 var(--bad);
}

/* --------------------------------------------------------- ADMIN PROGRAMS */

#admin-team-body,
#admin-accounts-body {
  width: min(100%, var(--face-operational-measure));
  margin-inline: auto;
}

#admin-team-body .admin-program-row {
  position: relative;
  padding-right: 42px;
}

#admin-team-body .admin-program-row::after {
  position: absolute;
  right: 17px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--dim);
  border-right: 1.5px solid var(--dim);
  content: '';
  transform: rotate(45deg);
}

#admin-team-body .admin-program-row:hover {
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--dim);
}

/* --------------------------------------------------------- ADMIN ACCOUNTS */

#admin-accounts-body .accounts-vitals {
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#admin-accounts-body .accounts-vital {
  background: transparent;
}

#admin-accounts-body .accounts-filter.on,
#admin-accounts-body .accounts-filter[aria-pressed='true'] {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#admin-accounts-body .dir-team-head {
  min-height: 64px;
  background: transparent;
}

#admin-accounts-body .dir-team-head:hover,
#admin-accounts-body .dir-team-head[aria-expanded='true'] {
  background: var(--panel);
}

#admin-accounts-body .dir-team-head[aria-expanded='true'] {
  box-shadow: inset 3px 0 0 var(--dim);
}

#admin-accounts-body .dir-code button,
#admin-accounts-body .dir-details,
#admin-accounts-body .dir-reset,
#admin-accounts-body .dir-delete.btn.ghost {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

#admin-accounts-body .dir-unconf {
  padding: 2px 5px;
  background: transparent;
  border: 1px dashed var(--dim);
  border-radius: var(--face-control-radius);
  color: var(--mist);
  font-style: normal;
}

#admin-accounts-body .dir-reset,
#admin-accounts-body .dir-delete.btn.ghost {
  background: transparent;
  border-color: var(--bad);
  color: var(--bad);
}

#admin-accounts-body .dir-reset:hover,
#admin-accounts-body .dir-delete.btn.ghost:hover:not(:disabled) {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

/* -------------------------------------------------------- COACH INVITES */

#admin-invites-body .invite-share {
  min-width: 0;
  margin-top: 14px;
  padding: 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

#admin-invites-body .invite-share-lbl {
  margin-bottom: 9px;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#admin-invites-body .invite-share .invite-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

#admin-invites-body .invite-share .code-input,
#admin-invites-body .invite-share .btn {
  min-height: 44px;
  margin: 0;
}

#admin-invites-body .invite-share .btn {
  width: auto;
  min-width: 148px;
}

#admin-invites-body:has(.invite-share) #admin-invite-gen {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: none;
}

/* ------------------------------------------------------------- BILLING */

#admin-billing-body .billing-page {
  max-width: var(--face-ledger-measure);
}

#admin-billing-body .billing-summary {
  gap: 10px;
}

#admin-billing-body .billing-cost-panel,
#admin-billing-body .billing-account-panel,
#admin-billing-body .billing-trend,
#admin-billing-body .billing-team-table,
#admin-billing-body .billing-team-detail {
  background: transparent;
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#admin-billing-body .billing-cost-panel,
#admin-billing-body .billing-account-panel {
  min-height: 0;
  padding: 18px;
  border-top-width: 1px;
}

#admin-billing-body .billing-cost-panel::after,
#admin-billing-body .billing-account-panel::before,
#admin-billing-body .billing-trend::before {
  content: none;
}

#admin-billing-body .billing-panel-h {
  margin-bottom: 12px;
  font-family: var(--face-type);
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
}

#admin-billing-body .billing-panel-h::before,
#admin-billing-body .billing-account-panel .billing-panel-h::before {
  width: 14px;
  height: 2px;
  background: var(--dim);
}

#admin-billing-body .billing-kpis {
  border-radius: var(--face-card-radius);
}

#admin-billing-body .billing-kpi {
  min-height: 96px;
  box-shadow: none;
}

#admin-billing-body .billing-kpi-value,
#admin-billing-body .billing-detail-name {
  font-family: var(--face-type);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: none;
}

#admin-billing-body .billing-statuschip {
  border-radius: var(--face-control-radius);
}

#admin-billing-body .billing-trend {
  padding: 16px 18px 14px;
}

#admin-billing-body .billing-controls {
  background: transparent;
  border-color: var(--line);
  border-radius: var(--face-card-radius);
}

#admin-billing-body #billing-search,
#admin-billing-body #billing-sort,
#admin-billing-body #billing-dir,
#admin-billing-body .billing-detail-close,
#admin-billing-body .billing-account-edit .code-input,
#admin-billing-body .billing-account-edit .bill-save,
#admin-billing-body .billing-account-edit .bill-grade-toggle {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

#admin-billing-body #billing-dir:hover,
#admin-billing-body .billing-detail-close:hover {
  background: var(--panel);
  border-color: var(--dim);
  color: var(--white);
}

#admin-billing-body #billing-search:focus,
#admin-billing-body #billing-sort:focus,
#admin-billing-body #billing-dir:focus-visible,
#admin-billing-body .billing-team-row:focus-visible,
#admin-billing-body .billing-detail-close:focus-visible,
#admin-billing-body .bill-save:focus-visible {
  outline-color: var(--on-accent);
}

#admin-billing-body .billing-period {
  border-left-color: var(--dim);
}

#admin-billing-body .billing-team-row {
  min-height: 66px;
}

#admin-billing-body .billing-team-row:hover,
#admin-billing-body .billing-team-row.open {
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--dim);
}

#admin-billing-body .billing-budget-fill.over {
  background: var(--bad);
}

#admin-billing-body .billing-error,
#admin-billing-body .bill-warn {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

#admin-billing-body .billing-team-detail {
  padding: 18px;
  border-top-width: 1px;
}

#admin-billing-body .billing-account-edit,
#admin-billing-body .billing-cost-detail,
#admin-billing-body .billing-coach-table,
#admin-billing-body .billing-model-table,
#admin-billing-body #billing-team-weekly {
  padding: 14px;
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
}

#admin-billing-body .billing-account-edit {
  border-left: 3px solid var(--dim);
}

#admin-billing-body .billing-cost-detail {
  border-left: 3px solid var(--dim);
}

#admin-billing-body .billing-account-edit .bill-save {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

#admin-billing-body .billing-account-edit .bill-grade-toggle.mem-btn {
  background: transparent;
  border-color: var(--dim);
  color: var(--white);
}

/* ------------------------------------------------------------- VIEW AS */

#admin-viewas-body .va-pick {
  width: min(100%, var(--face-reading-measure));
  padding: clamp(18px, 3vw, 28px);
  background: transparent;
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#admin-viewas-body .va-pick::before {
  content: none;
}

#admin-viewas-body .va-row {
  min-height: 68px;
  padding-block: 12px;
}

#admin-viewas-body .va-row .code-input {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

#admin-viewas-body .va-row .code-input:focus-visible {
  outline-color: var(--on-accent);
  border-color: var(--dim);
}

#admin-viewas-body .va-pick > .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
  box-shadow: none;
}

#admin-viewas-body .va-hint {
  background: var(--panel);
  border-radius: var(--face-control-radius);
}

#admin-viewas-body .va-hint::before {
  width: 3px;
  background: var(--dim);
}

.app-preview-banner {
  border-radius: 0;
  box-shadow: none;
}

.app-preview-exit {
  min-height: 44px;
}

/* -------------------------------------------------------- STARTER PACK */

#admin-starter-pack-body {
  width: min(100%, 960px);
  margin-inline: auto;
}

#admin-starter-pack-body .pack-row {
  min-height: 58px;
  margin: 0;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-bottom-width: 0;
  border-radius: 0;
}

#admin-starter-pack-body .pack-row:first-of-type {
  border-radius: var(--face-card-radius) var(--face-card-radius) 0 0;
}

#admin-starter-pack-body .pack-row:last-child {
  border-bottom-width: 1px;
  border-radius: 0 0 var(--face-card-radius) var(--face-card-radius);
}

/* --------------------------------------------------------- PLAYER SHELL */

.app-topbar,
.app-mobile-nav,
.app-mobile-sheet {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Grades is a scorecard destination now, not a film-reel destination. */
#app-nav [data-screen='player-film'] .app-nav-icon,
.app-mobile-nav [data-screen='player-film'] .app-nav-icon,
.app-mobile-sheet [data-screen='player-film'] .app-nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h14v17H5z'/%3E%3Cpath d='m8 9 2 2 5-5M8 15h8M8 18h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h14v17H5z'/%3E%3Cpath d='m8 9 2 2 5-5M8 15h8M8 18h5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- MY WEEK */

#screen-home .player-home #kpi-row {
  box-shadow: none;
}

#screen-home .player-home .mw-sharpen {
  background: var(--navy);
  border-color: var(--line);
  box-shadow: inset 4px 0 0 var(--gold);
}

#screen-home .player-home .mw-sharpen-kick {
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--mist);
}

#screen-home .player-home .mw-sharpen-go {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

#screen-home .player-home .tile-new,
#screen-home .player-home .tile-wait {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--mist);
}

#screen-home .player-home .tile-fresh {
  border-color: var(--line);
}

#screen-home .player-home .tile-overdue {
  background: var(--bad-bg);
  border-color: var(--bad);
}

.wm-l1 {
  background: rgba(225, 255, 0, 0.22);
}

.wm-l2 {
  background: rgba(225, 255, 0, 0.42);
}

.wm-l3 {
  background: rgba(225, 255, 0, 0.68);
}

.wm-l4 {
  background: var(--gold);
  box-shadow: inset 0 0 0 1px var(--white);
}

/* ------------------------------------------------------ PLAYER LIBRARY */

#screen-player-quizzes #plib-inner {
  width: min(100%, 1080px);
  margin-inline: auto;
}

#screen-player-quizzes .plib-week > .section-title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--white);
  font-family: var(--face-type);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
}

#screen-player-quizzes .plib-week > .section-title::before {
  content: none;
}

#screen-player-quizzes #plib-inner > .pick-sub {
  padding: 16px;
  background: var(--navy);
  border: 1px dashed var(--line);
  border-radius: var(--face-card-radius);
}

/* ---------------------------------------------------------- LEADERBOARD */

#screen-board .home-wrap,
#screen-board #board-body {
  width: min(100%, calc(1080px + 88px));
  margin-inline: auto;
}

#screen-board .lbf-top,
#screen-board .lb-chips,
#screen-board .lb-kids {
  min-width: 0;
}

#screen-board .aud-chip,
#screen-board .side-tile,
#screen-board .kid-tile,
#screen-board .wm-pill {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--face-control-radius);
  font-size: 0.75rem;
}

#screen-board .aud-chip.on,
#screen-board .side-tile.on,
#screen-board .kid-tile.on,
#screen-board .wm-pill.on {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-board .lb-team-box,
#screen-board .rank-card,
#screen-board .wm-card {
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-board .lb-row {
  min-height: 58px;
  padding: 9px 11px;
  border-color: var(--line);
  border-radius: 0;
}

#screen-board .lb-row.top {
  border-color: var(--line);
  box-shadow: inset 3px 0 0 var(--dim);
}

#screen-board .lb-sub,
#screen-board .rank-sub,
#screen-board .lb-team-box .ltb-c,
#screen-board .lb-team-box .ltb-trend i {
  font-size: 0.68rem;
}

/* ---------------------------------------------------- QUIZ TAKE + RESULT */

#screen-quiz-take #take-body,
#screen-quiz-result #result-body {
  width: min(100%, var(--face-reading-measure));
  margin-inline: auto;
}

#screen-quiz-take #take-body > h1,
#screen-quiz-take #take-body > h2,
#screen-quiz-result #result-body > h1,
#screen-quiz-result #result-body > h2 {
  color: var(--white);
  font-family: var(--face-type);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: none;
}

#screen-quiz-take .take-q,
#screen-quiz-result .result-q {
  padding: 14px;
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
}

#screen-quiz-take .take-choice,
#screen-vocab .vt-opt,
#screen-quiz-take .flag-btn {
  min-height: 44px;
  border-radius: var(--face-control-radius);
}

#screen-quiz-take .take-choice {
  background: var(--navy);
  border-color: var(--line);
}

#screen-quiz-take .take-choice:hover:not(:disabled) {
  border-color: var(--dim);
}

#screen-quiz-take .take-choice.chosen {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

#screen-quiz-take .take-choice.correct,
#screen-quiz-result .result-choice.correct,
#screen-vocab .vt-opt.correct {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
}

#screen-quiz-take .take-choice.wrong,
#screen-vocab .vt-opt.wrong {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

#screen-quiz-take .take-score {
  background: var(--navy);
  border-color: var(--line);
  border-left: 3px solid var(--dim);
}

#screen-quiz-result .result-choice {
  min-height: 42px;
  padding: 9px 11px;
  border-radius: var(--face-control-radius);
}

#screen-quiz-result .result-actions,
#screen-quiz-result .result-manage,
#screen-quiz-result .result-manage-form {
  gap: 8px;
}

#screen-quiz-result .result-actions button,
#screen-quiz-result .result-manage button,
#screen-quiz-result .result-manage-form button,
#screen-quiz-result .vq-remove,
#screen-quiz-result .vq-pages,
#screen-quiz-take .diag-toggle,
#screen-quiz-take .au-switch {
  min-height: 44px;
}

.create-note {
  max-width: 66ch;
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--panel);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
  color: var(--mist);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* --------------------------------------------------- FLASH CARDS + VOCAB */

#screen-vocab .home-wrap {
  width: min(100%, calc(var(--face-reading-measure) + 88px));
}

#screen-vocab .vt-prompt-term,
#screen-vocab .vt-prompt-def,
#screen-vocab .fc-card,
#screen-vocab .fc-card.flipped {
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-vocab .fc-card:hover,
#screen-vocab .vt-opt:hover:not(:disabled) {
  border-color: var(--dim);
}

#screen-vocab .vt-opt {
  background: var(--navy);
  border-color: var(--line);
}

#screen-vocab .vt-streak,
#screen-vocab .vt-streak.heating,
#screen-vocab .vt-streak.onfire,
#screen-vocab .vt-streak.enfuego {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#screen-vocab .vt-flash,
#screen-vocab .vt-flash.heating,
#screen-vocab .vt-flash.onfire,
#screen-vocab .vt-flash.enfuego,
#screen-vocab .vt-fuego-banner {
  color: var(--white);
  text-shadow: none;
}

#screen-vocab .fc-nav button,
#screen-vocab .vt-top button {
  min-height: 44px;
}

/* ---------------------------------------------------- SOLO + TOPIC SHELL */

.hud-title,
.home-title {
  color: var(--white);
  font-family: var(--face-type);
  font-size: clamp(2.1rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-transform: none;
}

.hud-kicker::before {
  width: 18px;
  height: 2px;
  background: var(--dim);
  content: '';
}

.hud-meta .dot {
  background: var(--dim);
}

#screen-topics .home-wrap {
  width: min(100%, calc(900px + 88px));
}

#screen-topics .topic-card {
  padding: 14px;
  background: var(--navy);
  border-color: var(--line);
  border-radius: var(--face-card-radius);
  box-shadow: none;
}

#screen-topics .topic-soon {
  background: var(--panel);
  color: var(--mist);
}

/* ----------------------------------------------------- INTENTIONAL YELLOW */

#screen-landing .entry-card.coach .btn-gold,
#screen-builder2 #create-quiz,
#admin-invites-body:not(:has(.invite-share)) #admin-invite-gen {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

/* Once the invite exists, Copy is the useful next step and earns the one
   accent. Generate quietly steps back into the ordinary control family. */
#admin-invites-body .invite-share #invite-copy {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}

.kpi::before,
.kpi::after {
  content: none;
}

/* ---------------------------------------------------- STALE-STATE CLEANUP */

#screen-roster .mem-role.coach,
#screen-roster .mem-role.admin {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--mist);
}

#screen-roster .mem-scope.hc {
  border-color: var(--dim);
  color: var(--white);
}

#screen-roster .mem-edit {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--face-card-radius);
}

.aud-summary-list .st {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--face-control-radius);
  color: var(--mist);
}

.ingest-status.warn,
.vq-status.warn {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
}

.scenario-box {
  background: var(--navy);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  border-radius: 0 var(--face-control-radius) var(--face-control-radius) 0;
}

.ia-misc {
  background: var(--bad-bg);
  border-left-color: var(--bad);
  color: var(--bad);
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 900px) {
  .app-stage {
    min-width: 0;
    overflow-x: clip;
  }

  .app-mobile-nav {
    background: var(--navy);
    border-top: 1px solid var(--line);
    box-shadow: none;
  }

  .app-mobile-sheet {
    background: var(--navy);
  }

  #screen-builder .aud-unit-toggle {
    min-height: 48px;
  }

  .app-mobile-nav .app-nav-item {
    font-size: 0.7rem;
  }

  .app-mobile-nav .app-nav-item.active {
    background: var(--panel);
  }
}

@media (max-width: 840px) and (min-width: 431px) {
  #screen-home .chs-step + .chs-step {
    border-left: 0;
  }

  #screen-home .chs-step:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  #screen-home .chs-step:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .app-stage .home-wrap {
    padding: 28px 16px 92px;
  }

  .pg-title {
    font-size: 2.05rem;
  }

  .app-action,
  .app-preview-exit,
  .app-sidebar .app-nav-item,
  .app-mobile-sheet .app-nav-item,
  .btn,
  .btn-ghost,
  .signout,
  .code-input,
  .text-input,
  select.code-input,
  .linklike {
    min-height: 48px;
  }

  #screen-home .coach-home-rename {
    min-height: 48px;
  }

  #admin-accounts-body .accounts-filter,
  #feedback-inbox .fbk-filter {
    min-width: 44px;
  }

  #screen-landing .entry-meta .linklike,
  #screen-landing .entry-legal .linklike,
  #screen-auth #auth-back,
  #screen-auth .pw-toggle,
  #screen-taste .taste-skip,
  #screen-taste .taste-choice {
    min-height: 48px;
    padding-block: 10px;
  }

  #screen-home .coach-rename-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #screen-home .coach-rename-form .code-input,
  #screen-home #coach-rename-err {
    grid-column: 1 / -1;
  }

  #screen-home .coach-rename-form .btn,
  #screen-home #coach-rename-cancel {
    min-height: 48px;
  }

  #screen-home .coach-home-week {
    min-height: 0;
  }

  #screen-home .coach-send-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'line'
      'sub'
      'action';
    gap: 5px;
  }

  #screen-home .coach-send-action,
  #screen-home .coach-help-action {
    width: 100%;
    min-height: 48px;
    margin-top: 5px;
  }

  #screen-home .chs-verify,
  #screen-home .chs-open-chart {
    min-height: 48px;
  }

  .gw-page {
    padding: 28px 16px 92px;
  }

  .gw-head {
    display: block;
  }

  .gw-context {
    font-size: 2.05rem;
  }

  .gw-title {
    max-width: 48ch;
    font-size: 0.9rem;
  }

  .gw-actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gw-actions .btn,
  .gw-actions .btn-ghost,
  .gw-view-players,
  .gw-open-reports {
    min-height: 48px;
  }

  .gw-pulse,
  .gw-metrics,
  .gw-grid,
  .gw-rooms {
    grid-column: 1 / -1;
  }

  .gw-readiness,
  .gw-metric {
    min-height: 174px;
  }

  .gw-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gw-metric {
    padding: 13px;
  }

  .gw-metric-value {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .gw-room-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gw-room,
  .gw-room:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .gw-room:last-child {
    border-bottom: 0;
  }

  #screen-roster .mem-btn,
  #screen-roster .ri-del,
  #screen-roster .share-copy,
  #screen-roster .share-regenerate,
  #screen-depth-chart .dc-sides .chipbtn,
  #screen-depth-chart .dcf-mv button {
    min-height: 48px;
  }

  #screen-roster .ri-del,
  #screen-depth-chart .dcf-mv button {
    min-width: 48px;
    width: 48px;
    height: 48px;
  }

  #screen-depth-chart #rd-field {
    max-width: 100%;
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  #screen-depth-chart .dcf-grid {
    width: max-content;
    min-width: 720px;
  }

  #screen-staff .staff-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  #screen-staff .staff-actions {
    width: 100%;
    justify-content: stretch;
  }

  #screen-staff .staff-actions .mem-btn {
    min-height: 48px;
    flex: 1 1 140px;
  }

  .coming-soon {
    min-height: 0;
    padding: 28px 20px;
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .coming-soon-art {
    width: 112px;
  }

  #screen-results .rdx-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-results .rdx-mod + .rdx-mod {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  #screen-program .pgm-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-program .pgm-tile + .pgm-tile {
    border-left: 0;
  }

  #screen-program .pgm-tile:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  #screen-program .pgm-tile:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  #screen-home .admin-vitals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-home .admin-vital + .admin-vital {
    border-left: 0;
  }

  #screen-home .admin-vital:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  #screen-home .admin-vital:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  #feedback-inbox .fbk-filter,
  #screen-home .admin-flag,
  #admin-accounts-body .accounts-filter,
  #admin-team-body .programs-filter,
  #admin-accounts-body .dir-code button,
  #admin-accounts-body .dir-details,
  #admin-accounts-body .dir-reset,
  #admin-accounts-body .dir-delete.btn.ghost,
  #admin-invites-body .invite-share .code-input,
  #admin-invites-body .invite-share .btn,
  #admin-viewas-body .va-row .code-input,
  #admin-viewas-body .va-pick > .btn,
  #admin-billing-body #billing-search,
  #admin-billing-body #billing-sort,
  #admin-billing-body #billing-dir,
  #admin-billing-body .billing-detail-close,
  #admin-billing-body .billing-account-edit .code-input,
  #admin-billing-body .billing-account-edit .bill-save,
  #admin-billing-body .billing-account-edit .bill-grade-toggle {
    min-height: 48px;
  }

  #admin-invites-body .invite-share .invite-link {
    grid-template-columns: minmax(0, 1fr);
  }

  #admin-invites-body .invite-share .btn {
    width: 100%;
  }

  #admin-billing-body .billing-team-table,
  #admin-billing-body .billing-trend,
  #admin-billing-body .billing-coach-table,
  #admin-billing-body .billing-model-table,
  #admin-billing-body #billing-team-weekly,
  #screen-program .pgm-ma-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  #screen-board .lb-chips,
  #screen-board .lb-kids,
  #screen-board .lbf-row {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  #screen-board .lb-chips::-webkit-scrollbar,
  #screen-board .lb-kids::-webkit-scrollbar,
  #screen-board .lbf-row::-webkit-scrollbar {
    display: none;
  }

  #screen-board .aud-chip,
  #screen-board .side-tile,
  #screen-board .kid-tile,
  #screen-board .wm-pill,
  #screen-quiz-take .take-choice,
  #screen-vocab .vt-opt,
  #screen-quiz-take .flag-btn,
  #screen-vocab .fc-nav button,
  #screen-vocab .vt-top button {
    min-height: 48px;
  }

  #screen-quiz-result .result-choice,
  #screen-quiz-result .result-actions button,
  #screen-quiz-result .result-manage button,
  #screen-quiz-result .result-manage-form button,
  #screen-quiz-result .vq-remove,
  #screen-quiz-result .vq-pages,
  #screen-quiz-take .diag-toggle,
  #screen-quiz-take .au-switch {
    min-height: 48px;
  }
}

@media (max-width: 520px) {
  .gw-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .gw-metric {
    min-height: 104px;
    padding: 13px 14px;
  }

  .gw-metric + .gw-metric {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .gw-metric::after {
    top: 12px;
  }

  .gw-metric-label {
    max-width: none;
    font-size: 0.68rem;
  }

  .gw-metric-value {
    font-size: 2.25rem;
  }

  .gw-metric-note {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 0.72rem;
  }

  #screen-vocab .vt-opts-img {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .app-mobile-nav .app-nav-item,
  .app-mobile-nav .app-nav-item span:last-child {
    font-size: 0.68rem;
  }

  #screen-home .chs-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  #screen-home .chs-step + .chs-step {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .gw-readiness-body {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .gw-ring {
    width: 96px;
    height: 96px;
  }

  .gw-ring-value {
    font-size: 2.25rem;
  }

  #screen-roster .mem-row {
    align-items: stretch;
    flex-direction: column;
  }

  #screen-roster .mem-action {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  #screen-roster .mem-action .mem-btn {
    flex: 1 1 128px;
  }

  #screen-board .lb-row {
    min-height: 64px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav-item,
  .app-action,
  .btn,
  .tile,
  .gw-metric,
  .gw-room,
  .staff-row,
  .coming-soon-art::after,
  .billing-team-row,
  .va-row,
  .vt-opt,
  .take-choice {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  .app-nav-item.active,
  .aud-chip.on,
  .library-audience-side.on,
  .accounts-filter[aria-pressed='true'],
  .programs-filter[aria-pressed='true'],
  .take-choice.chosen {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* The historical file contains multiple shipped generations. Keep these few
   state colors and target sizes after every older rule so they cannot regress
   behind the launch-era cascade. */
#screen-vocab .vt-streak,
#screen-vocab .vt-streak.heating,
#screen-vocab .vt-streak.onfire,
#screen-vocab .vt-streak.enfuego {
  background: var(--panel);
  border-color: var(--line);
  color: var(--white);
  box-shadow: none;
}

#screen-vocab .vt-fuego-banner {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
  text-shadow: none;
}

#screen-vocab .vt-flash,
#screen-vocab .vt-flash.heating,
#screen-vocab .vt-flash.onfire,
#screen-vocab .vt-flash.enfuego {
  background: var(--white);
  border-color: var(--white);
  color: var(--dg-text);
  box-shadow: none;
  text-shadow: none;
  animation: none;
}

#screen-quiz-result .result-choice {
  min-height: 44px;
}