/* TALAVIE · one look for every screen (owner decision, Nov 1 2026).
   The brand: Pitch Navy #0B1B3A, Ball Lime #C6F432, Back Line Slate #8FA3C7, Mist #F4F6FA;
   Space Grotesk for headings, Inter for text; rounded cards with soft shadows.
   Loaded by every page (index, play, live, approve, emergency), after the page's own <style>, so the
   shared components below win over older page rules. Feature modules use these tokens and classes
   instead of their own colours. Plain CSS, no build step.

   Tokens: colours (navy, lime, ink, muted, paper, bg, line, chip, success/warning/danger/info,
   offense/defense), type (--f-display, --f-body, --fs-*), spacing (--sp-*), radii (--r-*),
   shadows, focus ring. Dark mode follows the device unless the page sets data-theme. */

:root{
  /* brand */
  --navy:#0b1b3a; --navy-2:#0f2b5c; --lime:#c6f432; --lime-ink:#0b1b3a; --slate:#8fa3c7; --mist:#f4f6fa;
  /* surfaces and text */
  --bg:#f4f6fa; --paper:#ffffff; --ink:#0b1b3a; --muted:#4a5872; --line:#dce2ec; --chip:#eef2f8;
  --glass:rgba(255,255,255,.9); --sky:#c9d4e6; --scrim:rgba(7,18,42,.55);
  /* actions: primary is navy on light screens, lime on dark ones */
  --primary:#0b1b3a; --primary-ink:#ffffff; --bib:#0b1b3a; --bib-ink:#ffffff;
  /* messages and status (WCAG AA on paper and on their own -bg) */
  --ok:#1d7a45; --ok-bg:#e8f5ee; --ok-line:#a8d8bb;
  --success:var(--ok);
  --warn:#8a4b00; --warn-bg:#fff3e0; --warn-line:#f3c88b;
  --warning:var(--warn);
  --danger:#b3261e; --danger-bg:#fdecea; --danger-line:#f0b4ae;
  --info:#1f5fbf; --info-bg:#e8f0fc; --info-line:#b3cbf0;
  /* health status: Full / Limited / Out, the same everywhere */
  /* solid fills (dots, bars, buttons with white text): the same in light and dark */
  --ok-solid:#1d7a45; --warn-solid:#e0a91d; --danger-solid:#b3261e; --info-solid:#2f6fd8; --neutral-solid:#5b6577;
  --st-full:var(--ok); --st-limited:var(--warn); --st-out:var(--danger);
  /* basketball (and any sport): offense / defense */
  --offense:#d95a14; --defense:#2f6fd8;
  /* type */
  --f-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:24px; --fs-3xl:32px;
  /* spacing, radii, shadows */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-xs:6px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(11,27,58,.06),0 2px 8px rgba(11,27,58,.06);
  --shadow:0 1px 2px rgba(11,27,58,.06),0 10px 28px rgba(11,27,58,.10);
  --shadow-lg:0 2px 6px rgba(11,27,58,.10),0 24px 60px rgba(11,27,58,.22);
  --focus:#0b1b3a; --ring:0 0 0 3px rgba(198,244,50,.9);
  --tap:44px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07122a; --paper:#0f2247; --ink:#e9eef7; --muted:#a5b3cc; --line:#1f3561; --chip:#142a55;
    --glass:rgba(15,34,71,.88); --sky:#050d1f; --scrim:rgba(0,0,0,.6);
    --primary:#c6f432; --primary-ink:#0b1b3a; --bib:#c6f432; --bib-ink:#0b1b3a;
    --ok:#6fcf97; --ok-bg:#12341f; --ok-line:#2c6b45;
    --warn:#ffcc80; --warn-bg:#3a2a12; --warn-line:#6b4d1f;
    --danger:#ff7b72; --danger-bg:#3d1414; --danger-line:#7a2b26;
    --info:#8fb8ff; --info-bg:#132b52; --info-line:#2d4f86;
    --offense:#ff9a5c; --defense:#7aa8ff;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6);
    --focus:#c6f432; --ring:0 0 0 3px rgba(198,244,50,.75);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07122a; --paper:#0f2247; --ink:#e9eef7; --muted:#a5b3cc; --line:#1f3561; --chip:#142a55;
  --glass:rgba(15,34,71,.88); --sky:#050d1f; --scrim:rgba(0,0,0,.6);
  --primary:#c6f432; --primary-ink:#0b1b3a; --bib:#c6f432; --bib-ink:#0b1b3a;
  --ok:#6fcf97; --ok-bg:#12341f; --ok-line:#2c6b45;
  --warn:#ffcc80; --warn-bg:#3a2a12; --warn-line:#6b4d1f;
  --danger:#ff7b72; --danger-bg:#3d1414; --danger-line:#7a2b26;
  --info:#8fb8ff; --info-bg:#132b52; --info-line:#2d4f86;
  --offense:#ff9a5c; --defense:#7aa8ff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6);
  --focus:#c6f432; --ring:0 0 0 3px rgba(198,244,50,.75);
  color-scheme:dark;
}

/* ---------- base ---------- */
body{background:var(--bg);color:var(--ink);font-family:var(--f-body)}
h1,h2,h3,h4{font-family:var(--f-display)}
a{color:inherit;text-decoration-color:var(--slate);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
::selection{background:rgba(198,244,50,.55);color:#0b1b3a}

/* ---------- buttons: .btn, .btn.primary / .secondary / .ghost / .danger / .lime ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:var(--r-sm);padding:8px 14px;font:600 var(--fs-sm)/1.2 var(--f-body);white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease}
.btn:hover{border-color:var(--slate)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default}
.btn.primary,button.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.primary:hover,button.primary:hover{box-shadow:var(--shadow-sm)}
.btn.secondary{background:var(--chip);border-color:var(--line)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--chip)}
.btn.danger{color:var(--danger);border-color:var(--danger-line);background:var(--paper)}
.btn.danger.primary,button.primary.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.btn svg{width:16px;height:16px}

/* ---------- tabs and segmented controls: .tabs, .seg ---------- */
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--bg);padding:2px;gap:2px}
.seg button{flex:1;border:0;background:transparent;border-radius:8px;padding:7px 6px;font:600 var(--fs-sm)/1.2 var(--f-body);color:var(--muted)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"],.seg button.on{background:var(--ink);color:var(--paper)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button,.tabs .btn{border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:var(--r-pill);padding:7px 14px;font:600 var(--fs-sm)/1.2 var(--f-body);cursor:pointer}
.tabs button[aria-selected="true"],.tabs .btn[aria-selected="true"],.tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- chips, pills and status badges: .chip, .tv-badge ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:var(--r-pill);padding:3px 10px;font:600 var(--fs-xs)/1.4 var(--f-body)}
button.chip{cursor:pointer;padding:5px 11px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.warn,.tv-badge.warn,.tv-badge.limited{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.chip.ok,.tv-badge.ok,.tv-badge.full{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.chip.err,.chip.danger,.tv-badge.danger,.tv-badge.out{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.chip.info,.tv-badge.info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.tv-badge{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--chip);border-radius:var(--r-pill);padding:2px 9px;font:700 var(--fs-xs)/1.4 var(--f-body)}

/* ---------- cards, panels, lists ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.list{list-style:none;padding:0;margin:8px 0}
.list>li{border-top:1px solid var(--line)}
.list>li:first-child{border-top:none}
.eyebrow{font:700 var(--fs-sm)/1 var(--f-display);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.page-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 var(--sp-3)}
.page-h h1,.page-h h2{margin:0;font:700 var(--fs-2xl)/1.1 var(--f-display);letter-spacing:-.01em}

/* ---------- inputs ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field label,.lbl{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.input,.field input[type=text],.field input[type=number],.field input[type=email],.field input[type=date],.field input[type=search],.field select,.field textarea{
  border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;width:100%;min-width:0;font:inherit}

/* ---------- messages, toasts, empty states ---------- */
.msg{padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--chip);color:var(--ink)}
.msg.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.msg.err{border-color:var(--danger-line);background:var(--danger-bg);color:var(--danger)}
.msg.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.msg.info{border-color:var(--info-line);background:var(--info-bg);color:var(--info)}
.msg a{color:inherit}
.toast{background:var(--ink);color:var(--paper);border-radius:var(--r-md);box-shadow:var(--shadow-lg);font:600 var(--fs-sm)/1.35 var(--f-body)}
.empty{border:1px dashed var(--line);border-radius:var(--r-md);color:var(--muted);background:transparent}

/* ---------- dialogs and sheets ---------- */
dialog{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:var(--scrim)}
dialog h3{font-family:var(--f-display)}
.modal{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dlg-h h2,.dlg-h h3{margin:0;font:700 var(--fs-xl)/1.15 var(--f-display)}
.dlg-f{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:var(--sp-4)}

/* ---------- tables ---------- */
.tv-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tv-table th{text-align:left;font:700 var(--fs-xs)/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px;border-bottom:1px solid var(--line)}
.tv-table td{padding:8px;border-bottom:1px solid var(--line)}

/* ---------- phones: 44px tap targets ---------- */
@media (pointer:coarse){
  .btn,.tabs button,.seg button,button.chip,.chip[aria-pressed]{min-height:var(--tap)}
}
@media (prefers-reduced-motion: reduce){ .btn{transition:none} }

/* =====================================================================================
   ROUND 2 · BOLD (owner, Nov 1 5:38 PM: "go more aggressive across all pages")
   The start menu's look everywhere: navy header bands with a lime accent, white Space Grotesk
   titles, tile-style cards, navy/lime pill tabs, navy table headers, branded empty states.
   Lime is only ever a fill (with navy text) or a decoration on navy, never small text on white.
   ===================================================================================== */
:root{
  --band:#0b1b3a; --band-2:#14306a; --band-ink:#ffffff; --band-muted:#c9d4e6; --band-line:rgba(255,255,255,.22);
  --band-btn:rgba(255,255,255,.10); --band-btn-hover:rgba(255,255,255,.18);
  --track:#0b1b3a; --track-ink:#dfe6f2; --track-on:#c6f432; --track-on-ink:#0b1b3a;
  --tint:#e7ecf5; --tint-line:#d3dbea;
  --tile-shadow:0 1px 2px rgba(11,27,58,.08),0 12px 30px rgba(11,27,58,.12);
  --th-bg:#0b1b3a; --th-ink:#ffffff; --zebra:rgba(11,27,58,.035);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --band:#0a1530; --band-2:#13285a; --band-muted:#a5b3cc; --band-line:rgba(255,255,255,.16);
    --track:#050d1f; --track-ink:#c9d4e6;
    --tint:#0b1a3b; --tint-line:#1f3561;
    --tile-shadow:0 1px 2px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.5);
    --th-bg:#050d1f; --zebra:rgba(255,255,255,.03);
  }
}
:root[data-theme="dark"]{
  --band:#0a1530; --band-2:#13285a; --band-muted:#a5b3cc; --band-line:rgba(255,255,255,.16);
  --track:#050d1f; --track-ink:#c9d4e6;
  --tint:#0b1a3b; --tint-line:#1f3561;
  --tile-shadow:0 1px 2px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.5);
  --th-bg:#050d1f; --zebra:rgba(255,255,255,.03);
}

/* ---------- 1. Header band: .tv-band (and every existing dialog / page header) ---------- */
.tv-band,
.settings>.set-h, .tdr-h, .tev-h, .ts-dlg>h3:first-child, .tv-band-h{
  background:linear-gradient(120deg,var(--band) 0%,var(--band) 55%,var(--band-2) 100%);color:var(--band-ink);position:relative}
.tv-band h1,.tv-band h2,.tv-band h3,
.settings>.set-h h2, .tdr-h h2, .tev-h h2{color:var(--band-ink);font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}
/* the lime accent: a short rule under the title */
.tv-band h1::after,.tv-band h2::after,
.settings>.set-h h2::after, .tdr-h h2::after, .tev-h h2::after{
  content:"";display:block;width:36px;height:4px;border-radius:var(--r-pill);background:var(--lime);margin-top:7px}
.settings>.set-h{flex:none;padding:16px 18px 14px;margin:0 0 14px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.settings>.set-h h2{font-size:24px;line-height:1.1}
.tdr-h{border-bottom-color:transparent!important}
.tdr-h h2{font-size:24px}
.tdr-h .sub,.tdr-h .muted,.settings>.set-h .muted,.settings>.set-h .tsn-save{color:var(--band-muted)}
.tev-h{margin:-14px -16px 16px!important;padding:16px;border-radius:0 0 var(--r-lg) var(--r-lg)}
/* buttons, chips and fields sitting on a band */
.tv-band .btn,.settings>.set-h .btn,.tdr-h .btn,.tev-h .btn,.tev-h button,.tv-band button:not(.primary):not(.lp-cta),
.settings>.set-h .chip,.tdr-h .chip{background:var(--band-btn);border-color:var(--band-line);color:var(--band-ink)}
.tv-band .btn:hover,.settings>.set-h .btn:hover,.tdr-h .btn:hover{background:var(--band-btn-hover);border-color:rgba(255,255,255,.4)}
.tv-band .btn.primary,.tv-band button.primary,.settings>.set-h .btn.primary,.tdr-h .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.tdr-h input{background:rgba(255,255,255,.96);color:#0b1b3a;border-color:transparent}
.tdr-h input::placeholder{color:#4a5872}
.settings>.set-h :focus-visible,.tdr-h :focus-visible,.tv-band :focus-visible{outline-color:var(--lime)}
@media (max-width:640px){
  .settings>.set-h{padding:12px 14px 10px}
  .settings>.set-h h2,.tdr-h h2{font-size:20px}
  .tv-band h1::after,.settings>.set-h h2::after,.tdr-h h2::after{width:28px;height:3px;margin-top:5px}
}
/* the rest of a dialog keeps its parts in place (fixes the basketball tab rows overlapping) */
.settings>.set-h,.settings>.set-tabs,.settings>.set-note,.settings>.set-f,.settings>p{flex:none}

/* ---------- 2. Tabs: navy track, lime selected (one look for every tab row) ---------- */
.tv-tabs, .set-tabs, .tabs, .tev-tabs, .seg, .ad-tabs, .adr-tabs, .cs-tabs, .fm-tabs, .lg-tabs, .of-tabs, .rf-tabs, .th-tabs, .tn-tabs, .tt-tabs{
  display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--track);border:0;border-radius:var(--r-lg);width:max-content;max-width:100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.settings>.set-tabs{margin:0 18px 12px;max-width:calc(100% - 36px);padding:4px}
.tv-tabs button, .set-tabs button, .tabs button, .tabs .btn, .tev-tabs button, .seg button, .ad-tabs button, .adr-tabs button, .cs-tabs button, .fm-tabs button, .lg-tabs button, .of-tabs button, .rf-tabs button, .th-tabs button, .tn-tabs button, .tt-tabs button{
  flex:none;border:0;background:transparent;color:var(--track-ink);border-radius:var(--r-md);padding:8px 14px;font:600 var(--fs-sm)/1.2 var(--f-body);cursor:pointer;min-height:36px}
.seg{width:auto}
.seg button{flex:1}
.tv-tabs button:hover, .ad-tabs button:hover, .adr-tabs button:hover, .cs-tabs button:hover, .fm-tabs button:hover, .lg-tabs button:hover, .of-tabs button:hover, .rf-tabs button:hover, .th-tabs button:hover, .tn-tabs button:hover, .tt-tabs button:hover, .set-tabs button:hover, .tabs button:hover, .tev-tabs button:hover, .seg button:hover{background:rgba(255,255,255,.08);color:#fff}
.tv-tabs button[aria-selected="true"], .tv-tabs button[aria-pressed="true"], .tv-tabs button.on,
.set-tabs button[aria-pressed="true"], .set-tabs button[aria-selected="true"], .set-tabs button.on,
.tabs button[aria-selected="true"], .tabs .btn[aria-selected="true"], .tabs button.on, .tabs button[aria-pressed="true"],
.tev-tabs button[aria-pressed="true"],
.ad-tabs button[aria-selected="true"], .ad-tabs button[aria-pressed="true"],
.adr-tabs button[aria-selected="true"], .adr-tabs button[aria-pressed="true"],
.cs-tabs button[aria-selected="true"], .cs-tabs button[aria-pressed="true"],
.fm-tabs button[aria-selected="true"], .fm-tabs button[aria-pressed="true"],
.lg-tabs button[aria-selected="true"], .lg-tabs button[aria-pressed="true"],
.of-tabs button[aria-selected="true"], .of-tabs button[aria-pressed="true"],
.rf-tabs button[aria-selected="true"], .rf-tabs button[aria-pressed="true"],
.th-tabs button[aria-selected="true"], .th-tabs button[aria-pressed="true"],
.tn-tabs button[aria-selected="true"], .tn-tabs button[aria-pressed="true"],
.tt-tabs button[aria-selected="true"], .tt-tabs button[aria-pressed="true"],
.seg button[aria-pressed="true"], .seg button[aria-selected="true"], .seg button.on{
  background:var(--track-on);color:var(--track-on-ink);border-color:var(--track-on);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tv-tabs :focus-visible,.set-tabs :focus-visible,.tabs :focus-visible,.tev-tabs :focus-visible,.seg :focus-visible{outline:2px solid var(--lime);outline-offset:1px}
@media (max-width:640px){
  .set-tabs, .tabs, .tev-tabs, .ad-tabs, .adr-tabs, .cs-tabs, .fm-tabs, .lg-tabs, .of-tabs, .rf-tabs, .th-tabs, .tn-tabs, .tt-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:var(--r-md)}
  .settings>.set-tabs{margin:0 14px 10px;max-width:calc(100% - 28px)}
  .set-tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar,.tev-tabs::-webkit-scrollbar{display:none}
  .set-tabs button,.tabs button,.tev-tabs button,.ad-tabs button,.adr-tabs button,.cs-tabs button,.fm-tabs button,.lg-tabs button,.of-tabs button,.rf-tabs button,.th-tabs button,.tn-tabs button,.tt-tabs button{white-space:nowrap}
}
@media (pointer:coarse){ .ad-tabs button,.adr-tabs button,.cs-tabs button,.fm-tabs button,.lg-tabs button,.of-tabs button,.rf-tabs button,.th-tabs button,.tn-tabs button,.tt-tabs button,.set-tabs button,.tabs button,.tev-tabs button,.tv-tabs button,.seg button{min-height:var(--tap)} }

/* ---------- 3. Buttons: bigger and bolder ---------- */
.btn.primary,button.primary{font-weight:700;padding:9px 16px;box-shadow:0 1px 2px rgba(11,27,58,.15),0 4px 12px rgba(11,27,58,.12)}
.btn.primary:hover,button.primary:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){ .btn.primary:hover,button.primary:hover{transform:none} }

/* ---------- 4. Cards as tiles, tinted groups, section titles ---------- */
.card{border-radius:18px;box-shadow:var(--tile-shadow)}
.tv-tile{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--tile-shadow);padding:18px}
.tv-group{background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-xl);padding:14px}
/* the icon chip: a navy square with the lime ball (lime square with a navy ball in dark mode) */
.tv-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none;
  background:radial-gradient(circle at 50% 50%,var(--lime) 0 5px,transparent 5.5px),var(--navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tv-eyebrow{display:flex;align-items:center;gap:8px;font:700 var(--fs-sm)/1 var(--f-display);text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
.tv-eyebrow::before{content:"";width:5px;height:16px;border-radius:var(--r-pill);background:var(--lime);box-shadow:0 0 0 1px rgba(11,27,58,.15)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tv-ic{background:radial-gradient(circle at 50% 50%,var(--navy) 0 5px,transparent 5.5px),var(--lime)} }
:root[data-theme="dark"] .tv-ic{background:radial-gradient(circle at 50% 50%,var(--navy) 0 5px,transparent 5.5px),var(--lime)}

/* ---------- 5. Tables: navy header row, zebra rows ---------- */
.tv-table th,
main table:not(.tv-plain) th, .settings table th, dialog table th, .tev table th, .th-ov table th, #adDlg table th{
  background:var(--th-bg);color:var(--th-ink);font:700 var(--fs-xs)/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.06em;border-bottom:0}
main table:not(.tv-plain) thead th:first-child,.settings table thead th:first-child,dialog table thead th:first-child,.tev table thead th:first-child,.th-ov table thead th:first-child,#adDlg table thead th:first-child{border-top-left-radius:10px}
main table:not(.tv-plain) thead th:last-child,.settings table thead th:last-child,dialog table thead th:last-child,.tev table thead th:last-child,.th-ov table thead th:last-child,#adDlg table thead th:last-child{border-top-right-radius:10px}
.tv-table tbody tr:nth-child(even),
main table:not(.tv-plain) tbody tr:nth-child(even), .settings table tbody tr:nth-child(even), dialog table tbody tr:nth-child(even), .tev table tbody tr:nth-child(even), .th-ov table tbody tr:nth-child(even), #adDlg table tbody tr:nth-child(even){background:var(--zebra)}

/* ---------- 6. Empty states: icon, one line, the next action ---------- */
.tv-empty, .empty, .tlr-empty, .thw-empty, .sc-empty, .tls-empty, .tm-empty, .gd-empty, .tt-empty{
  display:block;text-align:center;
  background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-lg);padding:22px 18px;color:var(--ink);line-height:1.5}
.tv-empty::before, .empty::before, .tlr-empty::before, .thw-empty::before, .sc-empty::before, .tls-empty::before, .tm-empty::before, .gd-empty::before, .tt-empty::before{
  content:"";display:block;margin:0 auto 10px;width:44px;height:44px;border-radius:var(--r-md);
  background:radial-gradient(circle at 50% 50%,var(--lime) 0 7px,transparent 7.5px),var(--navy);box-shadow:var(--shadow-sm)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.tv-empty,.empty,.tlr-empty,.thw-empty,.sc-empty,.tls-empty,.tm-empty,.gd-empty,.tt-empty)::before{background:radial-gradient(circle at 50% 50%,var(--navy) 0 7px,transparent 7.5px),var(--lime)} }
:root[data-theme="dark"] :is(.tv-empty,.empty,.tlr-empty,.thw-empty,.sc-empty,.tls-empty,.tm-empty,.gd-empty,.tt-empty)::before{background:radial-gradient(circle at 50% 50%,var(--navy) 0 7px,transparent 7.5px),var(--lime)}
.tlr-list>.tlr-empty{list-style:none}

/* ---------- 7. Messages: a bolder edge ---------- */
.msg{border-left-width:4px}

/* ---------- 8. Inside a navy band, the colours flip (children adapt automatically) ---------- */
.tv-band, .settings>.set-h, .tdr-h, .tev-h, .app>.top, .dock, .panel>.panel-h, .float.tools, .float.cams, .tv-band-in, dialog>.row.between:first-child, .th-ov .th-top{
  --ink:#ffffff; --muted:var(--band-muted); --paper:var(--band); --bg:rgba(255,255,255,.08); --chip:rgba(255,255,255,.10);
  --line:var(--band-line); --primary:var(--lime); --primary-ink:var(--lime-ink); --bib:var(--lime); --bib-ink:var(--lime-ink);
  --focus:var(--lime); color:var(--ink)}

/* ---------- 9. Coach app (play.html): navy header bar, side panels, tool bars and dock ---------- */
.app>.top{background:linear-gradient(120deg,var(--band) 0%,var(--band) 60%,var(--band-2) 100%);border-radius:var(--r-lg);padding:6px 10px 6px 12px;box-shadow:var(--tile-shadow)}
.app>.top .brand .logo.lt{display:none!important}
.app>.top .brand .logo.dk{display:block!important}
.app>.top .playname h1{color:#fff}
.app>.top .pill{background:rgba(255,255,255,.12);color:#dfe6f2}
.app>.top .pill.warn{background:var(--lime);color:var(--lime-ink)}
.app>.top .btn{background:var(--band-btn);border-color:var(--band-line);color:#fff}
.app>.top .btn:hover{background:var(--band-btn-hover)}
.app>.top .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.app>.top .btn.primary:disabled{background:rgba(198,244,50,.35);border-color:transparent;color:#0b1b3a;opacity:1}
.panel{border-radius:18px;box-shadow:var(--tile-shadow)}
.panel>.panel-h{background:linear-gradient(120deg,var(--band),var(--band-2));padding:14px 14px 12px;margin-bottom:12px}
.panel>.panel-h h2{color:#fff;font-size:21px}
.panel>.panel-h h2::after{content:"";display:block;width:30px;height:4px;border-radius:var(--r-pill);background:var(--lime);margin-top:6px}
.panel>.panel-h .btn{background:var(--band-btn);border-color:var(--band-line);color:#fff}
.panel>.panel-h .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.float.tools,.float.cams{background:rgba(11,27,58,.92);border-color:rgba(255,255,255,.12)}
.float .tbtn{color:#fff}
.float .tbtn:hover{background:rgba(255,255,255,.12)}
.float .tbtn[aria-pressed="true"],.float .tbtn.accent[aria-pressed="true"]{background:var(--lime);color:var(--lime-ink)}
.float .sep{background:rgba(255,255,255,.2)}
.dock{background:linear-gradient(120deg,var(--band),var(--band-2));border-top:0}
.dock select,.dock input{background:rgba(255,255,255,.08);color:#fff;border-color:var(--band-line)}
.dock select option{background:#0b1b3a;color:#fff}
.dock .btn.primary,.dock button.primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.stage{border-radius:18px;box-shadow:var(--tile-shadow)}
/* drill details: a bold title */
.tdr-d h3{font:700 24px/1.15 var(--f-display);letter-spacing:-.01em}

/* ---------- 10. Portal (index.html: <body class="tv-portal">) ---------- */
.tv-portal>header{background:none;border-image:linear-gradient(to bottom,var(--band) calc(100% - 3px),var(--lime) 0) fill 0 / 0 / 0 100vmax;padding-top:12px;padding-bottom:15px;margin-bottom:18px}
.tv-portal>header #who{color:var(--band-muted)}
.tv-portal #app>h1{background:linear-gradient(120deg,var(--band) 0%,var(--band) 55%,var(--band-2) 100%);color:#fff;
  border-radius:var(--r-xl);padding:24px 26px 22px;margin:4px 0 18px;font-size:clamp(28px,4vw,40px);box-shadow:var(--tile-shadow);position:relative;overflow:hidden}
.tv-portal #app>h1::after{content:"";display:block;width:44px;height:5px;border-radius:var(--r-pill);background:var(--lime);margin-top:10px}
.tv-portal #app>h1::before{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;border:2px solid rgba(198,244,50,.35);box-shadow:0 0 0 34px rgba(198,244,50,.05);pointer-events:none}
.tv-portal .card.narrow{padding-top:0;overflow:hidden}
.tv-portal .card.narrow>h1:first-child{background:linear-gradient(120deg,var(--band),var(--band-2));color:#fff;margin:0 -18px 16px;padding:22px 18px 16px;font-size:28px}
.tv-portal .card.narrow>h1:first-child::after{content:"";display:block;width:36px;height:4px;border-radius:var(--r-pill);background:var(--lime);margin-top:8px}
.tv-portal #app h2,.tv-portal [data-home-slot]>h2{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;letter-spacing:.1em}
.tv-portal #app h2::before,.tv-portal [data-home-slot]>h2::before{content:"";width:5px;height:18px;border-radius:var(--r-pill);background:var(--lime);box-shadow:0 0 0 1px rgba(11,27,58,.18);flex:none}
.tv-portal #app>.grid{background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-xl);padding:14px}
.tv-portal #app .grid>.card>h3:first-child,.tv-portal #app>.card>h3:first-child,.tv-portal #app>.card>.row>h3:first-child{display:flex;align-items:center;gap:10px;font-size:19px}
.tv-portal #app .grid>.card>h3:first-child::before,.tv-portal #app>.card>h3:first-child::before,.tv-portal #app>.card>.row>h3:first-child::before{
  content:"";width:32px;height:32px;border-radius:10px;flex:none;background:radial-gradient(circle at 50% 50%,var(--lime) 0 5px,transparent 5.5px),var(--navy)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tv-portal #app .grid>.card>h3:first-child::before,:root:not([data-theme="light"]) .tv-portal #app>.card>h3:first-child::before,:root:not([data-theme="light"]) .tv-portal #app>.card>.row>h3:first-child::before{background:radial-gradient(circle at 50% 50%,var(--navy) 0 5px,transparent 5.5px),var(--lime)} }
:root[data-theme="dark"] .tv-portal #app .grid>.card>h3:first-child::before,:root[data-theme="dark"] .tv-portal #app>.card>h3:first-child::before,:root[data-theme="dark"] .tv-portal #app>.card>.row>h3:first-child::before{background:radial-gradient(circle at 50% 50%,var(--navy) 0 5px,transparent 5.5px),var(--lime)}
@media (max-width:560px){
  .tv-portal #app>h1{padding:18px 18px 16px;font-size:26px}
  .tv-portal #app>h1::before{display:none}
  .tv-portal #app>.grid{padding:10px}
}

/* ---------- 11. Portal dialogs (<dialog>) and the small in-page dialog: band title bar ---------- */
dialog{overflow:hidden}
dialog>form>h3:first-child, dialog>h3:first-child, .ts-dlg>h3:first-child{
  background:linear-gradient(120deg,var(--band),var(--band-2));color:#fff;margin:-22px -22px 16px;padding:18px 22px 14px;font:700 21px/1.2 var(--f-display)}
.ts-dlg>h3:first-child{margin:-20px -20px 16px;padding:18px 20px 14px}
dialog>form>h3:first-child::after, dialog>h3:first-child::after, .ts-dlg>h3:first-child::after{content:"";display:block;width:32px;height:4px;border-radius:var(--r-pill);background:var(--lime);margin-top:7px}

/* ---------- 12. Inset band: the title row of AD, director, trainer and S&C dialogs ---------- */
.tv-band-in, dialog>.row.between:first-child, .th-ov .th-top{
  background:linear-gradient(120deg,var(--band) 0%,var(--band) 55%,var(--band-2) 100%);border-radius:14px;padding:14px 16px 12px;margin-bottom:12px}
.tv-band-in h2,.tv-band-in h3, dialog>.row.between:first-child h3, .th-ov .th-top h2{color:#fff;font:700 21px/1.2 var(--f-display);letter-spacing:-.01em}
.tv-band-in h2::after,.tv-band-in h3::after, dialog>.row.between:first-child h3::after, .th-ov .th-top h2::after{content:"";display:block;width:32px;height:4px;border-radius:var(--r-pill);background:var(--lime);margin-top:7px}
.tv-band-in button:not(.primary), dialog>.row.between:first-child button:not(.primary), .th-ov .th-top button:not(.primary){background:var(--band-btn);border-color:var(--band-line);color:#fff}
.th-ov .th-pn{border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
@media (max-width:640px){ .tv-band-in h2,.tv-band-in h3, dialog>.row.between:first-child h3, .th-ov .th-top h2{font-size:18px} }

/* ---------- 13. A page title as a band (public pages: <h1 class="tv-band">) ---------- */
h1.tv-band{border-radius:var(--r-xl);padding:18px 20px 16px;margin:8px 0 14px;font:700 26px/1.15 var(--f-display);letter-spacing:-.01em;box-shadow:var(--tile-shadow)}
h1.tv-band::after{content:"";display:block;width:36px;height:4px;border-radius:var(--r-pill);background:var(--lime);margin-top:8px}

/* =====================================================================================
   ROUND 3 · REFINEMENT (owner, Nov 1: "what would a site with a $25 million design budget look like?")
   Restraint and precision on top of the bold look: one hairline ring instead of borders + shadows,
   layered soft shadows, a real brand icon (the pitch's centre circle with the lime ball), calmer
   chrome, a tighter type rhythm, 44px fields, quiet motion, and bottom sheets on phones.
   ===================================================================================== */
:root{
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:.14s; --t:.22s;
  --ring:0 0 0 1px rgba(11,27,58,.07);
  --lift-1:0 0 0 1px rgba(11,27,58,.06),0 1px 2px rgba(11,27,58,.05),0 6px 16px -6px rgba(11,27,58,.10);
  --lift-2:0 0 0 1px rgba(11,27,58,.06),0 2px 4px rgba(11,27,58,.05),0 18px 40px -12px rgba(11,27,58,.22);
  --band-surface:radial-gradient(120% 140% at 100% 0%,rgba(43,82,160,.55) 0%,rgba(43,82,160,0) 55%),linear-gradient(180deg,#0e2148 0%,#0b1b3a 100%);
  --band-edge:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.25);
  --ic-ball:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='14' fill='%230b1b3a'/%3E%3Crect x='.75' y='.75' width='46.5' height='46.5' rx='13.25' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.5'/%3E%3Cpath d='M24 7v34' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='24' r='11' fill='none' stroke='%23ffffff' stroke-opacity='.38' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='24' r='4.6' fill='%23c6f432'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ring:0 0 0 1px rgba(255,255,255,.07);
  --lift-1:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 8px 20px -8px rgba(0,0,0,.6);
  --lift-2:0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.4),0 22px 48px -14px rgba(0,0,0,.75);
  --band-surface:radial-gradient(120% 140% at 100% 0%,rgba(43,82,160,.45) 0%,rgba(43,82,160,0) 55%),linear-gradient(180deg,#0c1c40 0%,#091530 100%);
} }
:root[data-theme="dark"]{
  --ring:0 0 0 1px rgba(255,255,255,.07);
  --lift-1:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 8px 20px -8px rgba(0,0,0,.6);
  --lift-2:0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.4),0 22px 48px -14px rgba(0,0,0,.75);
  --band-surface:radial-gradient(120% 140% at 100% 0%,rgba(43,82,160,.45) 0%,rgba(43,82,160,0) 55%),linear-gradient(180deg,#0c1c40 0%,#091530 100%);
}

/* ---------- R3.1 Type: crisp rendering, tight display tracking, even numbers ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-feature-settings:"cv11","ss01","ss03"}
h1,h2,h3{letter-spacing:-.015em;text-wrap:balance}
p,li{text-wrap:pretty}
table,.tnum{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(74,88,114,.35);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(74,88,114,.55)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- R3.2 Surfaces: one hairline ring and a layered shadow, no double edges ---------- */
.card,.tv-tile{border-color:transparent;box-shadow:var(--lift-1)}
.panel{border-color:transparent;box-shadow:var(--lift-1)}
.stage{border-color:transparent;box-shadow:var(--lift-1)}
.settings,dialog,.th-ov .th-pn,.tdr{border-color:transparent;box-shadow:var(--lift-2)}
.th-tile{border-color:transparent!important;box-shadow:var(--lift-1)!important;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)!important}
.th-tile:hover{transform:translateY(-3px)!important;box-shadow:var(--lift-2)!important}

/* the navy band, refined: a lit corner, an inner top highlight, no hard gradient seam */
.tv-band,.settings>.set-h,.tdr-h,.tev-h,.ts-dlg>h3:first-child,.tv-band-h,.tv-band-in,dialog>.row.between:first-child,.th-ov .th-top,
.app>.top,.panel>.panel-h,.dock,.tv-portal #app>h1,.tv-portal .card.narrow>h1:first-child,dialog>form>h3:first-child,dialog>h3:first-child,h1.tv-band{
  background:var(--band-surface);box-shadow:var(--band-edge)}
.tv-portal #app>h1{box-shadow:var(--band-edge),var(--lift-2)}
.app>.top{box-shadow:var(--band-edge),var(--lift-1)}
/* the lime rule: slimmer and exact */
.tv-band h1::after,.tv-band h2::after,.settings>.set-h h2::after,.tdr-h h2::after,.tev-h h2::after,.panel>.panel-h h2::after,
.tv-band-in h2::after,.tv-band-in h3::after,dialog>.row.between:first-child h3::after,.th-ov .th-top h2::after,
dialog>form>h3:first-child::after,dialog>h3:first-child::after,.ts-dlg>h3:first-child::after,h1.tv-band::after,.tv-portal .card.narrow>h1:first-child::after{
  width:24px;height:3px;margin-top:8px}
.tv-portal #app>h1::after{width:32px;height:4px}

/* ---------- R3.3 The brand icon (centre circle + lime ball) for icon chips and empty states ---------- */
.tv-ic{background:var(--ic-ball) center/cover no-repeat;box-shadow:none}
.tv-portal #app .grid>.card>h3:first-child::before,.tv-portal #app>.card>h3:first-child::before,.tv-portal #app>.card>.row>h3:first-child::before{
  background:var(--ic-ball) center/cover no-repeat!important;width:34px;height:34px;border-radius:11px}
.tv-empty::before,.empty::before,.tlr-empty::before,.thw-empty::before,.sc-empty::before,.tls-empty::before,.tm-empty::before,.gd-empty::before,.tt-empty::before{
  background:var(--ic-ball) center/cover no-repeat!important;width:52px;height:52px;border-radius:15px;margin-bottom:12px;box-shadow:0 8px 18px -8px rgba(11,27,58,.45)}
.tv-empty,.empty,.tlr-empty,.thw-empty,.sc-empty,.tls-empty,.tm-empty,.gd-empty,.tt-empty{
  background:linear-gradient(180deg,var(--tint),transparent 140%);border:1px dashed var(--tint-line);padding:28px 22px;font-size:14px;color:var(--muted)}
:is(.tv-empty,.empty,.tlr-empty,.thw-empty,.sc-empty,.tls-empty,.tm-empty,.gd-empty,.tt-empty) b{color:var(--ink)}

/* ---------- R3.4 Controls: 40px buttons (44 on touch), pressed state, refined fields ---------- */
.btn,button.primary{min-height:40px;border-radius:12px;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:active:not(:disabled),button.primary:active:not(:disabled){transform:scale(.98)}
.btn.primary,button.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(11,27,58,.18),0 6px 14px -6px rgba(11,27,58,.35)}
.btn:not(.primary):not(.ghost):not(.lime){box-shadow:0 1px 1px rgba(11,27,58,.04)}
.tv-portal input:not([type=checkbox]):not([type=radio]):not([type=file]),.tv-portal select,.tv-portal textarea{
  min-height:44px;border-radius:12px;background:var(--paper);border-color:var(--line);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,textarea:focus-visible,
.tv-portal input:not([type=checkbox]):not([type=radio]):focus,.tv-portal select:focus,.tv-portal textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(198,244,50,.45)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(input,select,textarea):focus-visible{border-color:var(--lime)} }
:root[data-theme="dark"] :is(input,select,textarea):focus-visible{border-color:var(--lime)}
.field input[type=text],.field input[type=number],.field select,.field textarea{border-radius:11px}

/* tabs: smooth state changes, exact heights */
.tv-tabs button,.set-tabs button,.tabs button,.tev-tabs button,.seg button,
.ad-tabs button,.adr-tabs button,.cs-tabs button,.fm-tabs button,.lg-tabs button,.of-tabs button,.rf-tabs button,.th-tabs button,.tn-tabs button,.tt-tabs button{
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease);border-radius:11px}
.tv-tabs,.set-tabs,.tabs,.tev-tabs,.seg,.ad-tabs,.adr-tabs,.cs-tabs,.fm-tabs,.lg-tabs,.of-tabs,.rf-tabs,.th-tabs,.tn-tabs,.tt-tabs{border-radius:15px;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}

/* chips: quieter */
.chip{border-color:transparent;background:var(--chip);font-weight:600;letter-spacing:.01em}
button.chip{box-shadow:var(--ring)}

/* ---------- R3.5 Motion: dialogs arrive, sheets rise, all of it off for reduced motion ---------- */
@keyframes tv-pop{from{opacity:0;transform:translate(-50%,-48%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes tv-rise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes tv-sheet{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
@keyframes tv-fade{from{opacity:0}to{opacity:1}}
.settings:not([hidden]){animation:tv-pop var(--t) var(--ease)}
dialog[open]{animation:tv-rise var(--t) var(--ease)}
dialog[open]::backdrop{animation:tv-fade var(--t) var(--ease);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.th-ov .th-pn,.tdr:not([hidden]){animation:tv-rise var(--t) var(--ease)}
.th-hub .th-tile{animation:tv-rise .32s var(--ease) both}
.th-hub .th-grp:nth-of-type(2) .th-tile{animation-delay:.04s}.th-hub .th-grp:nth-of-type(3) .th-tile{animation-delay:.08s}
[aria-busy="true"],.tv-skeleton{background:linear-gradient(90deg,var(--chip) 0%,rgba(255,255,255,.55) 50%,var(--chip) 100%) 0 0/200% 100%;animation:tv-shimmer 1.2s linear infinite;color:transparent!important;border-radius:10px}
@keyframes tv-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){
  .settings:not([hidden]),dialog[open],dialog[open]::backdrop,.th-ov .th-pn,.tdr:not([hidden]),.th-hub .th-tile,[aria-busy="true"],.tv-skeleton{animation:none!important}
  .btn,button.primary,.th-tile,.tv-portal #app .grid>.card{transition:none!important}
  .btn:active,button.primary:active,.th-tile:hover{transform:none!important}
}

/* ---------- R3.6 Phones: coach dialogs become bottom sheets with a grab handle ---------- */
@media (max-width:640px){
  .settings{left:0!important;right:0!important;top:auto!important;bottom:0!important;transform:none;width:100%!important;max-width:none!important;
    max-height:calc(100dvh - 10px)!important;border-radius:22px 22px 0 0!important;padding-bottom:env(safe-area-inset-bottom,0px)}
  .settings:not([hidden]){animation:tv-sheet .26s var(--ease)}
  .settings>.set-h{border-radius:22px 22px 0 0;padding-top:20px}
  .settings>.set-h::before{content:"";position:absolute;left:50%;top:7px;width:36px;height:4px;margin-left:-18px;border-radius:999px;background:rgba(255,255,255,.32)}
  .settings>.set-f{padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
}

/* ---------- R3.7 Coach app chrome: lighter icon buttons, calmer panel titles ---------- */
.app>.top{padding:6px 8px 6px 14px}
.app>.top .btn.ghost{background:transparent;border-color:transparent;color:#dfe6f2}
.app>.top .btn.ghost:hover{background:rgba(255,255,255,.10);color:#fff}
.app>.top .btn.ghost[aria-expanded="true"]{background:rgba(255,255,255,.14)}
.panel>.panel-h{padding:14px 16px 12px}
.panel>.panel-h h2{font-size:19px}
.float.tools,.float.cams{background:rgba(11,27,58,.86);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 10px 30px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.dock{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* ---------- R3.8 Portal layout: wider canvas, sticky header, equal-height team cards ---------- */
.tv-portal>header,.tv-portal main{max-width:1120px}
.tv-portal>header{position:sticky;top:0;z-index:30}
.tv-portal>header.tv-band button:not(.primary):not(.lp-cta){background:transparent;border-color:transparent;color:#dfe6f2;min-height:38px;padding:7px 12px}
.tv-portal>header.tv-band button:not(.primary):not(.lp-cta):hover{background:rgba(255,255,255,.10);color:#fff}
.tv-portal>header.tv-band #signIn{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.tv-portal>header #who{font-weight:600;color:#fff;padding:0 6px}
.tv-portal #app>.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;background:none;border:0;padding:0}
.tv-portal #app .grid>.card{display:flex;flex-direction:column;gap:2px;padding:20px 20px 18px;transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.tv-portal #app .grid>.card:hover{box-shadow:var(--lift-2)}
.tv-portal #app .grid>.card>.row:last-of-type,.tv-portal #app .grid>.card>.list:last-child{margin-top:auto;padding-top:12px}
.tv-portal #app .grid>.card>.row{flex-wrap:nowrap}
.tv-portal #app .grid>.card>.row>*{white-space:nowrap}
.tv-portal #app h2,.tv-portal [data-home-slot]>h2{margin-top:40px;font-size:13px;letter-spacing:.12em;color:var(--muted)}
.tv-portal #app h2::before,.tv-portal [data-home-slot]>h2::before{width:4px;height:14px;box-shadow:none}
.tv-portal #app>h1{margin:8px 0 8px;padding:30px 32px 26px}
.tv-portal #app>h1+h2{margin-top:28px}
.tv-portal #app>details>summary{color:var(--ink);font-weight:600}
.tv-portal .msg{border-left-width:1px;box-shadow:var(--ring)}
@media (max-width:560px){
  .tv-portal #app>.grid{grid-template-columns:1fr}
  .tv-portal #app>h1{padding:22px 20px 18px}
  .tv-portal #app .grid>.card>.row{flex-wrap:wrap}
}
/* the sign-in card: centred, roomier */
.tv-portal .card.narrow{max-width:440px;margin-top:40px}
.tv-portal .card.narrow>h1:first-child{padding:26px 22px 20px;margin:0 -18px 18px}

/* ---------- R3.9 Messages: a quiet left marker instead of a heavy border ---------- */
.msg{border:0;border-left:3px solid var(--line);box-shadow:var(--ring);border-radius:12px}
.msg.ok{border-left-color:var(--ok)}.msg.err{border-left-color:var(--danger)}.msg.warn{border-left-color:var(--warn)}.msg.info{border-left-color:var(--info)}