/* ============================================================================
   THEME — every opaque colour, gradient and shadow lives here as a token, so the
   whole app can be reskinned by editing this block alone (see docs/THEME.md).
   Two tiers: raw palette primitives (Tailwind scale) → semantic role tokens that
   the component styles below reference. Translucent white effects layered on the
   brand gradient (e.g. rgba(255,255,255,.12) tiles, dim on-brand text) stay inline
   on purpose — they're "white on the brand", not palette colours.
   ============================================================================ */
:root {
  /* -- palette primitives (Tailwind default scale) ------------------------- */
  --white:#fff;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-150:#eef2f7; --slate-200:#e2e8f0;
  --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-900:#0f172a;
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-400:#60a5fa; --blue-600:#2563eb;
  --blue-800:#1e40af; --blue-900:#1e3a8a;
  --green-100:#dcfce7; --green-600:#16a34a; --green-800:#166534;
  --red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626; --red-800:#991b1b;
  --amber-100:#fef3c7; --amber-600:#d97706; --amber-800:#92400e;
  --yellow-100:#fef9c3; --yellow-300:#fde047; --yellow-800:#854d0e;
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-200:#c7d2fe; --indigo-300:#a5b4fc;
  --indigo-600:#4f46e5; --indigo-700:#4338ca; --indigo-800:#3730a3;
  --violet-100:#ede9fe; --violet-600:#7c3aed; --purple-50:#faf5ff; --purple-500:#a855f7;

  /* -- semantic roles (component styles reference these) ------------------- */
  --ink:#101828;                  /* primary text             */
  --muted:#5d6b82;                /* secondary / label text   */
  --line:#e6e9f2;                 /* borders, rules, dividers  */
  --card:var(--white);            /* section / card surface   */
  --bg:#f4f5fa;                   /* page bg + metric tiles   */
  --blue:var(--blue-600);         /* primary accent / brand   */
  --blue-dk:var(--blue-900);      /* brand gradient dark stop  */
  --brand-ink:var(--blue-900);    /* brand-coloured TEXT on light surfaces (light in dark mode) */
  --tint:var(--blue-50);          /* soft brand tint surface (callouts, ghosts) */
  --green:var(--green-600);       /* positive / wins / add    */
  --red:var(--red-600);           /* negative / loss / remove  */
  --amber:var(--amber-600);       /* warning / low-sample     */

  --surface:var(--white);         /* white component surfaces (inputs, chips, rows) */
  --surface-alt:var(--slate-50);  /* subtle hover / ghost surface */
  --surface-code:var(--slate-150);
  --border-strong:var(--slate-300);
  --placeholder:var(--slate-400);
  --on-brand:var(--white);        /* white text/icons on the brand gradient or solid blue */

  /* soft background / foreground pairs for pills, badges, callouts */
  --good-bg:var(--green-100);     --good-fg:var(--green-800);
  --caution-bg:var(--yellow-100); --caution-fg:var(--yellow-800);   /* medium confidence, unavailable */
  --warn-bg:var(--amber-100);     --warn-fg:var(--amber-800);       /* XI weakness */
  --danger-bg:var(--red-100);     --danger-fg:var(--red-800);
  --danger-surface:var(--red-50);                                   /* remove-button rest bg */
  --role-bg:var(--indigo-100);    --role-fg:var(--indigo-800);      /* role / locked / manual */
  --info-bg:var(--blue-100);      --info-fg:var(--blue-800);        /* powerplay, notes */
  --bowlpos-bg:var(--indigo-50);  --bowlpos-fg:var(--indigo-700);
  --you-bubble:var(--indigo-50);                                    /* coach "you" (inline variant) */

  /* Analyze-XI accent — the one deliberate non-blue */
  --accent:var(--violet-600);     --accent-2:var(--purple-500);
  --accent-panel-a:var(--purple-50); --accent-panel-b:var(--slate-50);
  --accent-border:var(--violet-100);

  /* warm-up banner (admin) */
  --warm-bg:var(--indigo-50);     --warm-border:var(--indigo-200);
  --warm-fill:var(--indigo-600);  --warm-text:var(--indigo-800); --warm-ring:var(--indigo-300);

  /* gradients */
  --brand-grad:linear-gradient(120deg,#0e1e5b 0%,#1e3a8a 45%,#2563eb 100%);
  --brand-text-grad:linear-gradient(120deg,#1e3a8a,#2563eb);   /* gradient TEXT (nav brand) */
  --accent-grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  --skeleton-grad:linear-gradient(90deg,var(--slate-150) 25%,var(--slate-200) 37%,var(--slate-150) 63%);
  /* hero glow overlays (layered on the brand gradient) */
  --hero-glow:radial-gradient(560px 300px at 86% 14%, rgba(56,189,248,.38), transparent 62%),
              radial-gradient(480px 280px at 12% 96%, rgba(139,92,246,.32), transparent 60%);
  /* glass nav */
  --nav-bg:rgba(255,255,255,.72);

  /* elevation + focus (brand-tinted rgba baked into the token) */
  --shadow-card:0 1px 3px rgba(0,0,0,.06);
  --shadow-btn:0 2px 8px rgba(37,99,235,.25);
  --shadow-btn-lg:0 2px 10px rgba(37,99,235,.30);
  --shadow-lift:0 3px 12px rgba(37,99,235,.12);
  --shadow-chosen:0 4px 16px rgba(37,99,235,.22);
  --shadow-fab:0 6px 20px rgba(30,58,138,.35);
  --shadow-fab-alt:0 4px 16px rgba(15,23,42,.18);
  --shadow-panel:0 14px 44px rgba(15,23,42,.22);
  --shadow-accent:0 3px 14px rgba(124,58,237,.35);
  --shadow-accent-lg:0 3px 22px rgba(124,58,237,.6);
  --focus-ring:0 0 0 3px rgba(37,99,235,.15);
  --nav-glow:0 0 10px rgba(37,99,235,.5);

  /* fonts — one committed pairing: Sora carries the identity, Inter does the reading */
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Sora",var(--font-body);
}

/* ============================================================================
   DARK MODE — automatic (prefers-color-scheme) with a manual override toggle
   (data-theme="dark" | "light" set by the nav button). Same semantic tokens.
   ============================================================================ */
:root[data-theme="dark"] { color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; } }
:root[data-theme="dark"],
:root:not([data-theme="light"]).cq-dark-auto { /* class set pre-paint to avoid re-declaring the block */
  --ink:#e8ecf5; --muted:#96a1b6; --line:#232b3d; --card:#151a26; --bg:#0d1017;
  --surface:#151a26; --surface-alt:#1b2231; --surface-code:#1e2635;
  --border-strong:#39445d; --placeholder:#5f6c87; --on-brand:#fff;
  --blue:#3b82f6; --blue-dk:#1e3a8a; --brand-ink:#93c5fd; --tint:rgba(59,130,246,.10);
  --green:#34d399; --red:#f87171; --amber:#fbbf24;
  --accent:#8b5cf6; --accent-2:#a78bfa;
  --good-bg:rgba(52,211,153,.15); --good-fg:#6ee7b7;
  --caution-bg:rgba(251,191,36,.15); --caution-fg:#fcd34d;
  --warn-bg:rgba(251,191,36,.15); --warn-fg:#fcd34d;
  --danger-bg:rgba(248,113,113,.15); --danger-fg:#fca5a5; --danger-surface:rgba(248,113,113,.14);
  --role-bg:rgba(139,92,246,.18); --role-fg:#c4b5fd;
  --info-bg:rgba(59,130,246,.16); --info-fg:#93c5fd;
  --bowlpos-bg:rgba(139,92,246,.16); --bowlpos-fg:#c4b5fd;
  --you-bubble:rgba(59,130,246,.16);
  --accent-panel-a:rgba(139,92,246,.12); --accent-panel-b:rgba(139,92,246,.03);
  --accent-border:rgba(139,92,246,.32);
  --warm-bg:rgba(99,102,241,.12); --warm-border:rgba(99,102,241,.3);
  --warm-fill:#818cf8; --warm-text:#c7d2fe; --warm-ring:rgba(129,140,248,.4);
  --brand-grad:linear-gradient(120deg,#0b1224 0%,#1e3a8a 55%,#2563eb 100%);
  --brand-text-grad:linear-gradient(120deg,#93c5fd,#a5b4fc);
  --skeleton-grad:linear-gradient(90deg,#1b2231 25%,#232b3d 37%,#1b2231 63%);
  --nav-bg:rgba(13,16,23,.72);
  --shadow-card:0 1px 3px rgba(0,0,0,.5); --shadow-panel:0 14px 44px rgba(0,0,0,.6);
  --focus-ring:0 0 0 3px rgba(96,165,250,.25);
}
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font-body);
       color:var(--ink); background:var(--bg); line-height:1.5; }
/* display face carries the theme's typographic identity on the prominent headings */
.phead h1, .nav .brand, h2, .metric .n, .hl-score, .hl-tier, .nextmatch .nm-teams { font-family:var(--font-display); }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1240px; margin:0 auto; padding:20px 22px 60px; }

/* top nav — sticky glass bar over the page (no more solid brand band) */
.nav { position:sticky; top:0; z-index:80; color:var(--ink);
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line); }
.nav .inner { max-width:1240px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:14px; }
.nav .brand { font-weight:800; font-size:18px; display:flex; align-items:center; gap:9px; }
.nav .brand span { background:var(--brand-text-grad); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.brand-logo { height:30px; width:30px; border-radius:8px; object-fit:cover; display:block;
              box-shadow:0 0 0 1px var(--line); }
.nav .crumbs { font-size:13px; color:var(--muted); }
.nav .crumbs a { text-decoration:underline; text-underline-offset:2px; }

/* light / dark toggle */
.theme-toggle { margin-left:auto; width:34px; height:34px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.theme-toggle:hover { border-color:var(--blue); box-shadow:var(--focus-ring); }

/* page header block — layered glow hero */
.phead { position:relative; overflow:hidden; background:var(--brand-grad); color:var(--on-brand); }
.phead::before { content:""; position:absolute; inset:0; background:var(--hero-glow); pointer-events:none; }
.phead .inner { position:relative; max-width:1240px; margin:0 auto; padding:30px 22px 28px; }
.phead h1 { margin:0 0 5px; font-size:clamp(26px,3.4vw,34px); font-weight:800; letter-spacing:-.025em; }
.phead .sub { opacity:.9; font-size:14px; }
.stats { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.stat { background:rgba(255,255,255,.12); border-radius:10px; padding:10px 14px; min-width:92px; }
.stat .n { font-size:22px; font-weight:700; }
.stat .l { font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }

section { background:var(--card); border:1px solid var(--line); border-radius:16px;
          padding:18px 20px; margin-top:18px; box-shadow:var(--shadow-card); }
h2 { margin:0 0 12px; font-size:18px; letter-spacing:-.01em; }
h2 .hint { font-size:12px; color:var(--muted); font-weight:400; margin-left:8px; }

table { width:100%; border-collapse:collapse; font-size:13.5px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
th[title] { text-decoration:underline dotted var(--line); text-underline-offset:3px; }
.sort-arrow { color:var(--blue); font-size:10px; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.clickable:hover { background:var(--surface-alt); cursor:pointer; }

.pos { display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center;
       background:var(--blue); color:var(--on-brand); border-radius:50%; font-weight:700; font-size:13px; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.c-high{background:var(--good-bg);color:var(--good-fg);} .c-medium{background:var(--caution-bg);color:var(--caution-fg);} .c-low{background:var(--danger-bg);color:var(--danger-fg);}
.role { background:var(--role-bg); color:var(--role-fg); }
.form span{font-weight:700;} .W{color:var(--green);} .L{color:var(--red);}
.rationale { color:var(--muted); font-size:12px; }
.flag { color:var(--amber); font-size:11px; }
.muted { color:var(--muted); }

/* controls */
.controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
select, input[type=search], input[type=text], input[type=email] {
  font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  padding:10px 14px; border:1px solid var(--line); border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
select { cursor:pointer; }
select:focus, input[type=search]:focus, input[type=text]:focus, input[type=email]:focus {
  outline:none; border-color:var(--blue); box-shadow:var(--focus-ring);
}
input[type=search]::placeholder, input[type=text]::placeholder { color:var(--placeholder); }
label.ctl { font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }

/* primary button (form submits like Search) — matches the composer's accent */
.btn {
  font:inherit; font-weight:600; font-size:14px; color:var(--on-brand); cursor:pointer; border:none;
  border-radius:10px; padding:10px 20px;
  background:var(--brand-grad);
  box-shadow:var(--shadow-btn); transition:filter .15s, transform .04s;
}
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(1px); }

/* teams grid */
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.tcard { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surface);
         display:flex; flex-direction:column; gap:4px; transition:.12s; }
.tcard:hover { border-color:var(--blue); box-shadow:var(--shadow-lift); transform:translateY(-1px); }
.tcard .tn { font-weight:700; font-size:15px; }
.tcard .ts { font-size:12px; color:var(--muted); }

/* top progress bar for full-page navigations */
#nav-bar { position:fixed; top:0; left:0; height:3px; width:0; z-index:10000; opacity:0;
  background:linear-gradient(90deg,var(--blue-dk),var(--blue),var(--blue-400));
  box-shadow:var(--nav-glow); }
#nav-bar.on { opacity:1; transition:width 12s cubic-bezier(.05,.6,.1,1); }
#nav-bar.done { transition:width .26s ease, opacity .3s ease .12s; }

/* skeleton loaders (shimmer placeholders) */
.sk { background:var(--skeleton-grad);
  background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:6px; }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.sk-n { height:22px; width:56%; margin-bottom:7px; }
.sk-l { height:9px; width:82%; }
.sk-title { height:15px; width:190px; margin-bottom:16px; }
.sk-row { height:34px; margin-bottom:9px; border-radius:8px; }

/* subtle fade-in for swapped-in content */
@keyframes fadein { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
#team-body > section, #player-body > section, .coach-thread .coach-msg { animation:fadein .25s ease both; }
@media (prefers-reduced-motion: reduce) {
  #nav-bar, .sk, #team-body > section, #player-body > section, .coach-thread .coach-msg { animation:none; transition:none; }
}

/* AI coach */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font:inherit; font-size:12.5px; padding:6px 12px; border:1px solid var(--line);
        border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer; }
.chip:hover { border-color:var(--blue); color:var(--blue); }
.chip-on { background:var(--blue); color:var(--on-brand); border-color:var(--blue); }
.chip-on:hover { color:var(--on-brand); }
.coach-msg { border-radius:12px; padding:12px 14px; margin-top:10px; font-size:14px; }
.coach-msg .who { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
                  color:var(--muted); margin-bottom:4px; }
.coach-msg.you { background:var(--you-bubble); }
.coach-msg.bot { background:var(--surface-alt); border:1px solid var(--line); }
.coach-msg.bot p { margin:0 0 8px; }
.coach-msg.bot ul, .coach-msg.bot ol { margin:4px 0 8px 20px; padding:0; }
.coach-msg.bot li { margin:2px 0; }
.coach-msg.bot h2, .coach-msg.bot h3, .coach-msg.bot h4 {
  margin:14px 0 6px; line-height:1.25; font-weight:700; }
.coach-msg.bot h2 { font-size:16px; } .coach-msg.bot h3 { font-size:14.5px; }
.coach-msg.bot h4 { font-size:13.5px; color:var(--muted); text-transform:none; }
.coach-msg.bot > .msg-text > :first-child { margin-top:0; }
.coach-msg.bot p:last-child, .coach-msg.bot ul:last-child, .coach-msg.bot ol:last-child { margin-bottom:0; }
.coach-msg.bot code { background:var(--surface-code); border-radius:4px; padding:1px 5px; font-size:12.5px; }
.coach-msg.bot blockquote { margin:6px 0; padding:2px 0 2px 12px; border-left:3px solid var(--line); color:var(--muted); }
.coach-msg.bot hr { border:0; border-top:1px solid var(--line); margin:12px 0; }
.coach-msg.bot .md-table { overflow-x:auto; margin:6px 0 10px; }
.coach-msg.bot .md-table table { width:auto; min-width:min(100%,340px); font-size:12.5px; border-collapse:collapse; }
.coach-msg.bot .md-table th, .coach-msg.bot .md-table td {
  border:1px solid var(--line); padding:4px 9px; text-align:left; white-space:nowrap; }
.coach-msg.bot .md-table th { background:var(--bg); font-weight:600; }
.coach-msg.unavailable { background:var(--caution-bg); color:var(--caution-fg); }
/* live streaming: a blinking caret from the moment you ask (empty bubble = "working"),
   then trailing the content as markdown renders in. */
.msg-text.streaming:empty::after,
.msg-text.streaming > :last-child::after { content:'▋'; margin-left:2px; color:var(--blue);
  font-weight:400; animation:cqcaret 1s steps(1) infinite; }
.msg-text.streaming:empty::after { margin-left:0; }
@keyframes cqcaret { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .msg-text.streaming:empty::after, .msg-text.streaming > :last-child::after { animation:none; } }
.htmx-indicator { opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity:1; }

/* metric tiles on white sections */
.metrics { display:flex; flex-wrap:wrap; gap:10px; }
.metric { background:var(--bg); border-radius:12px; padding:11px 18px; min-width:88px; }
.metric .n { font-size:24px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.metric .l { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:3px; }

/* player cards */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin-top:8px; font-size:13.5px; }
.grid2 .k { color:var(--muted); } .grid2 .v { text-align:right; font-variant-numeric:tabular-nums; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:720px){ .cols{grid-template-columns:1fr;} }
.spark svg { vertical-align:middle; }

/* Recommended XI: stack batting order (full width) above the bowling attack, so
   the per-player rationale reads as a clean one-line caption rather than wrapping
   in a cramped half column. */
.xi-layout > div + div { margin-top:18px; }
.xi-layout .rationale { margin-top:2px; }

/* pre-match conditions callout */
.conditions { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:18px;
  background:linear-gradient(135deg,var(--tint),var(--surface-alt)); border:1px solid var(--line);
  border-left:4px solid var(--blue); border-radius:14px; padding:14px 18px; }
.conditions .ct { font-weight:700; font-size:15px; color:var(--ink); }
.conditions .cp { font-weight:700; color:var(--brand-ink); font-variant-numeric:tabular-nums; }
.conditions .cn { color:var(--muted); font-size:13px; flex-basis:100%; }
.conditions .wx { font-weight:600; color:var(--brand-ink); }

/* floating "Ask the Coach" launcher */
#coach-fab { position:fixed; right:20px; bottom:20px; z-index:40; display:none;
  align-items:center; gap:8px; padding:12px 18px; border:none; border-radius:999px;
  background:var(--brand-grad); color:var(--on-brand); font:inherit;
  font-weight:600; font-size:14px; cursor:pointer; box-shadow:var(--shadow-fab); }
#coach-fab:hover { filter:brightness(1.08); }
#coach-fab.on { display:inline-flex; }
@media (max-width:720px){ #coach-fab .lbl{ display:none; } #coach-fab{ padding:14px; } }

/* coach chat thread */
.coach-thread { display:flex; flex-direction:column; gap:8px; margin:6px 0 12px;
  max-height:62vh; overflow-y:auto; }
.coach-thread:empty { display:none; }
.coach-thread .coach-msg { margin-top:0; max-width:88%; border-radius:16px; }
.coach-thread .coach-msg.you { align-self:flex-end; background:var(--blue); color:var(--on-brand);
  border-bottom-right-radius:5px; }
.coach-thread .coach-msg.you .who { color:rgba(255,255,255,.75); }
.coach-thread .coach-msg.bot { align-self:flex-start; border-bottom-left-radius:5px; }
.coach-msg .msg-text > :first-child { margin-top:0; }
.coach-msg .msg-text > :last-child { margin-bottom:0; }

/* modern coach composer (chat input bar) — the coach forms were using raw
   browser-default input/button controls; style them into a proper chat bar. */
.coach-section form { gap:8px; align-items:center; }
.coach-section form input[type=text] {
  flex:1; min-width:220px; font:inherit; font-size:14px; color:var(--ink);
  padding:12px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
}
.coach-section form input[type=text]::placeholder { color:var(--placeholder); }
.coach-section form input[type=text]:focus {
  outline:none; border-color:var(--blue); box-shadow:var(--focus-ring);
}
.coach-section form input[type=text]:disabled { background:var(--bg); cursor:not-allowed; }
.coach-section form button[type=submit] {          /* primary "Ask" send button */
  font:inherit; font-weight:600; font-size:14px; color:var(--on-brand); cursor:pointer; border:none;
  border-radius:999px; padding:12px 24px;
  background:var(--brand-grad);
  box-shadow:var(--shadow-btn-lg);
  transition:filter .15s, transform .04s, box-shadow .15s;
}
.coach-section form button[type=submit]:hover:not(:disabled) { filter:brightness(1.08); }
.coach-section form button[type=submit]:active:not(:disabled) { transform:translateY(1px); }
.coach-section form button[type=submit]:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.coach-section form button[type=button] {          /* subtle "New chat" ghost button */
  font:inherit; font-size:13px; color:var(--muted); cursor:pointer; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:10px 15px; transition:.15s;
}
.coach-section form button[type=button]:hover { border-color:var(--blue); color:var(--blue); background:var(--surface-alt); }

/* ---------------------------------------------------------------- mobile pass */
@media (max-width:720px) {
  .wrap { padding:16px 14px 48px; }
  .nav .inner { padding:12px 16px; gap:10px; flex-wrap:wrap; }
  .phead .inner { padding:20px 16px; }
  .phead h1 { font-size:23px; }
  section { padding:16px 15px; }
  h2 { font-size:16.5px; }

  /* wide tables scroll horizontally within their card instead of squashing */
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  th, td { padding:7px 9px; }
  .rationale { white-space:normal; }

  /* metric tiles: two per row, filling the width */
  .metrics { gap:8px; }
  .metric { flex:1 1 40%; }

  /* coach composer: full-width input, buttons drop to the next line */
  .coach-section form input[type=text] { flex-basis:100%; min-width:0; }
  .coach-thread .coach-msg { max-width:94%; }

  /* condition callout + controls breathe a little tighter */
  .conditions { padding:12px 14px; }
  .controls { gap:8px; }
}

/* next-match hero — the prominent pre-match entry point */
.nextmatch { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; background:linear-gradient(135deg,var(--tint),var(--surface)); border-left:4px solid var(--blue); }
.nextmatch .nm-label { font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--brand-ink); font-weight:700; }
.nextmatch .nm-teams { font-size:20px; font-weight:800; letter-spacing:-.01em; margin-top:4px; }
.nextmatch .nm-teams .vs { color:var(--muted); font-weight:600; font-size:14px; }
.nextmatch .nm-meta { font-size:13px; color:var(--muted); margin-top:4px; }
.nextmatch .nm-sub { font-size:12px; color:var(--muted); margin-top:6px; max-width:52ch; }
.nextmatch .nm-cta { font-size:15px; padding:13px 24px; white-space:nowrap; }
.btn-sm { padding:6px 13px; font-size:12.5px; }
@media (max-width:720px){ .nextmatch .nm-cta { width:100%; text-align:center; } }

/* interactive Playing XI builder */
.xi-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.xi-count { font-size:14px; }
.btn.ghost { background:var(--surface); color:var(--brand-ink); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover { border-color:var(--blue); color:var(--blue); filter:none; }
.xi-x { border:none; background:var(--danger-surface); color:var(--red); width:26px; height:26px; border-radius:8px;
  font-size:16px; line-height:1; cursor:pointer; transition:.12s; }
.xi-x:hover { background:var(--red); color:var(--on-brand); }
.xi-sub { font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin:16px 0 6px; }
.xi-add .chips { gap:7px; }
.xi-plus { border-style:dashed; }
.xi-plus:hover:not(:disabled) { border-color:var(--green); color:var(--green); border-style:solid; }
.xi-plus:disabled { opacity:.45; cursor:not-allowed; }
.xi-notes { margin-top:8px; }

/* XI lock + analyze */
.pill.xi-locked { background:var(--role-bg); color:var(--role-fg); margin-left:6px; }
.btn.disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; pointer-events:none; }
/* the muted (no ".on") analyze = the "not ready" state: looks inactive, still hoverable for the tooltip.
   not-allowed applies ONLY to the disabled variant — the enabled ".on" button keeps the pointer. */
.btn.analyze { background:var(--surface); color:var(--muted); border:1px solid var(--line); box-shadow:none; }
.btn.analyze[aria-disabled="true"] { opacity:.7; cursor:not-allowed; }
.btn.analyze.on { color:var(--on-brand); border:none;
  background:var(--accent-grad); box-shadow:var(--shadow-accent); }
.btn.analyze.on:hover { filter:brightness(1.08); }
@keyframes pulse { 0%,100%{box-shadow:var(--shadow-accent)} 50%{box-shadow:var(--shadow-accent-lg)} }

.xi-analysis { margin-top:16px; padding:16px 18px; border-radius:14px;
  background:linear-gradient(135deg,var(--accent-panel-a),var(--accent-panel-b)); border:1px solid var(--accent-border); }
.xa-headline { font-weight:700; font-size:15px; margin-bottom:12px; }
.xa-pt { display:flex; gap:9px; align-items:flex-start; margin:9px 0; }
.xa-ico { flex:none; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; margin-top:1px; }
.xa-strength .xa-ico { background:var(--good-bg); color:var(--good-fg); }
.xa-weakness .xa-ico { background:var(--warn-bg); color:var(--warn-fg); }
.xa-text { font-size:13.5px; }
.xa-counter { font-size:12.5px; color:var(--brand-ink); margin-top:3px; }
.xa-foot { font-size:11.5px; margin-top:12px; }
@media (prefers-reduced-motion: reduce){ .btn.analyze.on { animation:none; } }

/* XI analysis: opposition + context (note) rows */
.xa-note .xa-ico { background:var(--info-bg); color:var(--info-fg); }
.xa-opp { margin-top:8px; padding-top:12px; border-top:1px dashed var(--accent-border); }

/* XI manual reorder */
.pill.xi-manual { background:var(--role-bg); color:var(--role-fg); margin-left:6px; }
.xi-move { display:inline-flex; flex-direction:column; gap:1px; vertical-align:middle; margin-left:6px; }
.xi-arrow { border:1px solid var(--line); background:var(--surface); color:var(--brand-ink); cursor:pointer;
  width:20px; height:15px; line-height:1; font-size:9px; border-radius:4px; padding:0; transition:.12s; }
.xi-arrow:hover { background:var(--blue); color:var(--on-brand); border-color:var(--blue); }
.xi-arrow.off { visibility:hidden; }

/* XI builder: drag-and-drop lists */
.xi-list-head { display:grid; grid-template-columns:22px 30px 1fr auto 30px; gap:10px;
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 10px 6px; }
.xi-list { display:flex; flex-direction:column; gap:6px; }
.xi-row { display:grid; grid-template-columns:22px 30px 1fr auto 30px; gap:10px; align-items:center;
  padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.xi-row:hover { border-color:var(--border-strong); }
.xi-handle { cursor:grab; color:var(--placeholder); font-size:15px; line-height:1; user-select:none; text-align:center; }
.xi-handle:active { cursor:grabbing; }
.xi-name .rationale { margin-top:2px; }
.xi-stats { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.xi-kv { font-size:12px; color:var(--muted); }
.xi-kv b { font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums; }
.xi-ghost { opacity:.4; background:var(--tint); }
.xi-chosen { box-shadow:var(--shadow-chosen); }
.pool-list { display:flex; flex-wrap:wrap; gap:7px; min-height:22px; }
.pool-item { display:inline-flex; align-items:center; gap:4px; cursor:grab; font-size:12.5px;
  padding:7px 12px; border:1px dashed var(--line); border-radius:999px; background:var(--surface); user-select:none; }
.pool-item:hover { border-color:var(--green); color:var(--green); border-style:solid; }
.pool-item .pool-plus { font-weight:700; color:var(--green); }
.pool-item:active { cursor:grabbing; }
.pool-list.full .pool-item { opacity:.45; pointer-events:none; }
/* XI builder: batting order on the left, the addable bench alongside it on the right */
.xi-cols { display:flex; gap:18px; align-items:flex-start; }
.xi-main { flex:1; min-width:0; }
.xi-aside { flex:none; width:248px; background:var(--bg); border-radius:12px; padding:12px 14px; }
.xi-aside .xi-sub { margin-top:0; }
@media (max-width:760px){ .xi-cols { flex-direction:column; } .xi-aside { width:auto; align-self:stretch; } }
/* recommended bowling order */
.bowl-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.bowl-row { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center;
  padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.bowl-row:hover { border-color:var(--border-strong); }
.bowl-pos { background:var(--bowlpos-bg); color:var(--bowlpos-fg); }
.bowl-name { min-width:0; }
.bowl-name .rationale { margin-top:2px; }
.bowl-role { font-size:10.5px; margin-left:6px; vertical-align:1px; }
.bowl-powerplay { background:var(--info-bg); color:var(--info-fg); }
.bowl-middle { background:var(--good-bg); color:var(--good-fg); }
.bowl-death { background:var(--danger-bg); color:var(--danger-fg); }
.bowl-style { font-size:11px; margin-left:6px; text-transform:capitalize; }
.bowl-matchup { color:var(--brand-ink); margin-top:3px; font-weight:500; }
.bowl-opp-notes li { color:var(--brand-ink); }
@media (max-width:720px){
  .xi-list-head, .xi-row { grid-template-columns:20px 26px 1fr auto 26px; gap:7px; }
  .xi-stats { gap:8px; }
  .bowl-row { grid-template-columns:26px 1fr; }
  .bowl-row .xi-stats { grid-column:1 / -1; padding-left:36px; }
}

/* player highlights hero (top of player page) */
.hl { position:relative; overflow:hidden; background:var(--brand-grad); color:var(--on-brand); }
.hl::before { content:""; position:absolute; inset:0; background:var(--hero-glow); pointer-events:none; }
.hl > * { position:relative; }
.hl-top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hl-impact { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.14); border-radius:14px; padding:10px 18px; }
.hl-score { font-size:40px; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hl-score-l { font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.85; line-height:1.2; }
.hl-tier { font-size:20px; font-weight:800; letter-spacing:-.01em; }
.hl-career { font-size:13.5px; opacity:.92; margin-top:3px; }
.hl-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:16px; }
.hl-card { background:rgba(255,255,255,.1); border-radius:12px; padding:12px 14px; }
.hl-h { font-size:12px; text-transform:uppercase; letter-spacing:.05em; opacity:.85; margin-bottom:8px; }
.hl-knock, .hl-line { font-size:13px; margin:5px 0; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.hl-runs { font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; }
.hl-star { color:var(--yellow-300); font-size:11px; margin-left:1px; }
.hl .muted, .hl-card .muted, .hl-foot { color:rgba(255,255,255,.72); }
.hl-w { font-size:10px; font-weight:700; background:rgba(34,197,94,.3); color:var(--green-100); padding:1px 7px; border-radius:999px; }
.hl-l { font-size:10px; font-weight:700; background:rgba(255,255,255,.15); color:rgba(255,255,255,.75); padding:1px 7px; border-radius:999px; }
.hl-foot { font-size:11px; margin-top:12px; }

/* feedback bubble + panel */
#feedback-fab { position:fixed; left:20px; bottom:20px; z-index:40; display:inline-flex; align-items:center;
  gap:4px; padding:11px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface);
  color:var(--brand-ink); font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  box-shadow:var(--shadow-fab-alt); }
#feedback-fab:hover { border-color:var(--blue); color:var(--blue); }
#feedback-panel { position:fixed; left:20px; bottom:74px; z-index:41; width:330px; max-width:calc(100vw - 40px);
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-panel); overflow:hidden; }
#feedback-panel[hidden] { display:none; }
.fp-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  background:var(--brand-grad); color:var(--on-brand); font-weight:600; font-size:14px; }
#fp-close { background:none; border:none; color:var(--on-brand); font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
#feedback-body { padding:14px; }
#feedback-panel input[type=text], #feedback-panel textarea { width:100%; margin-bottom:10px; }
#feedback-panel textarea { resize:vertical; min-height:80px; }
.fp-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fp-req { font-size:11px; color:var(--muted); }
.fp-thanks { padding:10px 2px; font-weight:600; color:var(--green); }
@media (max-width:720px){ #feedback-fab .lbl{ display:none; } #feedback-fab{ padding:13px; } }

/* Optimistic XI edits: applied to the DOM instantly, dimmed until the server's
   swap confirms (the fresh fragment replaces the node and clears the state). */
.xi-pending #xi-list, .xi-pending #pool-list { opacity:.65; }
.xi-pending .xi-x, .xi-pending .pool-item { pointer-events:none; }
.pool-item.pool-placing { display:flex; opacity:.65; cursor:default; }
.pool-item.pool-placing .pool-plus { visibility:hidden; }

/* first-visit pre-warm progress banner */
.warmup { position: sticky; top: 0; z-index: 60; background: var(--warm-bg);
  border-bottom: 1px solid var(--warm-border); padding: 6px 14px; }
.warmup-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--warm-text); }
.warmup-track { height: 4px; background: var(--warm-border); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.warmup-fill { height: 100%; width: 0; background: var(--warm-fill); transition: width .5s ease; }
.warmup-spin { width: 12px; height: 12px; border: 2px solid var(--warm-ring); border-top-color: var(--warm-fill);
  border-radius: 50%; display: inline-block; animation: warmup-spin .8s linear infinite; }
@keyframes warmup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .warmup-spin { animation: none; } }

/* --- mode toggle feels alive: morph the big surfaces + a slow hero drift ---- */
@media (prefers-reduced-motion: no-preference) {
  body, .nav, .phead, section, .metric, .conditions, .coach-msg.bot, .tcard, .xi-aside {
    transition: background-color .4s ease, color .35s ease, border-color .35s ease;
  }
  .phead { background-size: 180% 180%; animation: pheadShift 22s ease-in-out infinite; }
  @keyframes pheadShift { 0%,100% { background-position:0% 50% } 50% { background-position:100% 50% } }
}

/* charts (Chart.js layer — see static/charts.js) */
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (min-width:1100px){ .chart-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .chart-grid .chart-card.wide { grid-column:span 3; } }
@media (max-width:820px){ .chart-grid { grid-template-columns:1fr; } }
.chart-card { position:relative; background:var(--surface-alt); border:1px solid var(--line);
  border-radius:14px; padding:14px 14px 10px; }
.chart-card h3 { margin:0 0 4px; font-size:13px; font-weight:700; color:var(--ink); }
.chart-card .ch-hint { font-size:11px; color:var(--muted); margin-bottom:8px; }
.chart-card canvas { width:100% !important; height:200px !important; }
.chart-card.tall canvas { height:240px !important; }
.chart-card.wide { grid-column:1 / -1; }

.site-foot { display:flex; gap:14px; justify-content:center; align-items:center; padding:26px 16px 34px;
  font-size:12px; color:var(--muted); }
.site-foot a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.site-foot a:hover { color:var(--fg); }

/* ---- tile navigation (tiles.js): left rail of tiles + animated expand ---- */
.tiled3 { display:grid; grid-template-columns:210px minmax(0,1fr);
  gap:0 22px; align-items:start; max-width:1700px; }
.t-contents { display:contents; }
/* top offset clears the sticky glass nav (z-index 80) — at top:10px the first
   tile slid underneath it and looked truncated */
.t-left { grid-column:1; grid-row:1 / span 90; position:sticky; top:62px;
  display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - 20px);
  overflow:auto; scrollbar-width:none; }
.tiled3 > .t-contents ~ *, .t-contents > * { min-width:0; }
.t-contents > section[data-tile], .t-contents > .tile-grid,
.tiled3 > section[data-tile], .tiled3 > .tile-grid { grid-column:2; }
/* the coach floats at EVERY width: a closed bar bottom-right by default, expanding
   into a large overlay panel on click — the content grid keeps the full width */
.t-contents > .coach-top, .tiled3 > .coach-top { position:fixed; right:14px; bottom:14px; z-index:40;
  background:var(--surface);   /* opaque: a floating panel must not let the page bleed through */
  width:min(420px, calc(100vw - 28px)); margin:0; max-height:56px; overflow:hidden;
  transition:max-height .3s ease, width .3s ease; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.t-contents > .coach-top.open, .tiled3 > .coach-top.open {
  width:min(880px, calc(100vw - 28px)); max-height:min(86vh, 950px);
  height:min(86vh, 950px);                     /* fixed tall panel, chat-app style */
  display:flex; flex-direction:column; overflow:hidden; }
.t-contents > .coach-top.open .coach-thread, .tiled3 > .coach-top.open .coach-thread {
  display:flex; flex:1 1 auto; min-height:0; overflow-y:auto; }  /* fills, scrolls, even when empty */
.t-contents > .coach-top h2, .tiled3 > .coach-top h2 { cursor:pointer; margin:0 0 10px; user-select:none; }
/* the dock header itself opens/closes the panel — the inline −/+ would be redundant */
.coach-top .coach-min { display:none; }
.t-left .tile-grid { display:flex; flex-direction:column; gap:8px; margin:12px 0 0; }
.t-left .tile { width:100%; }
.tile-grid { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 14px; }
.tile { display:flex; flex-direction:column; align-items:flex-start; gap:3px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 13px;
  color:var(--fg); font:inherit; text-align:left; width:100%;
  transition:border-color .2s, transform .15s, background .2s; }
.tile:hover { transform:translateX(3px); border-color:var(--accent, #5a82ff); }
.tile.active { background:var(--you-bubble); border-color:var(--accent, #5a82ff); }
.tile .t-ico { font-size:20px; }
.tile .t-name { font-family:var(--font-display); font-weight:700; font-size:13.5px; }
.tile .t-teaser { font-size:11px; color:var(--muted); }
section[data-tile] { display:grid; grid-template-rows:1fr; transition:grid-template-rows .35s ease,
  opacity .3s ease, margin .3s ease; }
section[data-tile] > .t-body { min-height:0; }
section[data-tile].t-closed { grid-template-rows:0fr; opacity:0; margin:0; padding-top:0;
  padding-bottom:0; border-width:0; pointer-events:none; }
section[data-tile].t-closed > .t-body { overflow:hidden; }
@media (max-width: 1100px) {  /* narrow screens: stack — hero, pins, coach, chips, section */
  .tiled3 { display:block; }
  .t-left { position:static; max-height:none; overflow:visible; }
  .t-contents { display:block; }
  .tile-grid { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px;
    -webkit-overflow-scrolling:touch; }
  .tile { flex:0 0 auto; }
  .tile .t-teaser { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, section[data-tile] { transition:none; }
}

/* ---- pinned page header (next-match banner + summary stats): stays put, sections
   scroll beneath it. Sticky only where there's room; static on small screens. ---- */
.page-pins { position:sticky; top:0; z-index:6; background:var(--bg);
  padding-top:10px; padding-bottom:6px;
  box-shadow:0 12px 18px -14px rgba(0,0,0,.55); }
.page-pins > section { margin-top:0; }
/* context strip: stays with the content column, pinned while it scrolls */
.t-contents > .page-pins, .tiled3 > .page-pins { grid-column:2; position:sticky; top:0; z-index:6; }
.page-pins .nextmatch { padding:10px 14px; }
@media (max-width: 900px), (max-height: 700px) {
  .page-pins { position:static; box-shadow:none; }
}

/* the coach tile: always leads the rail, visibly special */
.tile.t-coach { border-color:var(--accent, #5a82ff);
  background:linear-gradient(135deg, var(--you-bubble) 0%, var(--surface) 70%);
  box-shadow:0 0 14px -6px var(--accent, #5a82ff); }
.tile.t-coach .t-name { background:linear-gradient(100deg, var(--fg) 30%, #7ea2ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* the coach lives in the full-width top zone on every page — no tile, always first */

.coach-top { border:1px solid var(--accent, #5a82ff); border-radius:16px;
  padding:14px 16px; margin:0 0 18px; background:linear-gradient(135deg, var(--you-bubble) 0%, var(--surface) 78%);
  box-shadow:0 0 18px -8px var(--accent, #5a82ff); }
/* slim full-width hero band: identity deserves the width */
.phead { padding-top:16px; padding-bottom:14px; }
.phead h1 { font-size:30px; margin-bottom:2px; }
.phead .inner > .sub, .phead .sub { margin-bottom:6px; }

/* ---- UI/UX pass: mobile table containment + accessibility tokens ---- */
/* Tables scroll within their section on phones instead of forcing readers to pan the page.
   (Step 1 of the mobile table work — per-table card transforms follow for Squad/Results.) */
@media (max-width: 767.98px) {
  section[data-tile] table, .t-body table {
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; max-width:100%;
  }
}
/* Keyboard reachability: a real ring on everything interactive, token-colored. */
.tile:focus-visible, .chip:focus-visible, .btn:focus-visible, a:focus-visible,
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent, #5a82ff); outline-offset:2px; border-radius:6px;
}
/* Muted text was borderline at small sizes on dark surfaces — lift toward AA. */
[data-theme="dark"] .muted, .cq-dark-auto .muted { color:#a5b1c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .muted { color:#a5b1c8; } }

/* ---- UI/UX pass 2: touch-target minimums on coarse pointers ---- */
@media (pointer: coarse), (max-width: 767.98px) {
  .chip, .btn, .btn-sm, .theme-toggle, .xi-x { min-height:44px; min-width:44px;
    display:inline-flex; align-items:center; justify-content:center; }
  .chip { padding-top:10px; padding-bottom:10px; }
}

/* ---- UI/UX pass 3: VISIBLE hierarchy & rhythm ---- */
/* Section headers: one consistent treatment — clear title row with a hairline anchor,
   hints pushed visually to second rank. */
section[data-tile] > .t-body > h2, section[data-tile] h2:first-child, .coach-top h2 {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--line);
  margin-bottom:14px; font-size:19px; letter-spacing:-.01em;
}
section[data-tile] h2 .hint { font-weight:400; font-size:12px; }

/* Metric tiles: the number IS the content — bigger, tighter, label clearly secondary. */
.metric .n { font-size:28px; line-height:1.1; }
.metric { padding:12px 20px; border:1px solid var(--line); }

/* Rail tiles: stronger active affordance — accent bar + raised surface. */
.t-left .tile { border-left:3px solid transparent; border-radius:12px; }
.t-left .tile.active { border-left-color:var(--accent, #5a82ff);
  background:var(--you-bubble); font-weight:600; }
.t-left .tile:hover { background:var(--surface-alt, var(--you-bubble)); transform:none; }

/* Card rhythm: one radius, one border, consistent inner padding. */
.chart-card, .coach-top, section[data-tile] .card { border-radius:14px; }
.chart-card { border:1px solid var(--line); }

/* Tables: calmer headers, tabular numerals, comfortable row height. */
section[data-tile] table th { font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; }
section[data-tile] table td { font-variant-numeric:tabular-nums; padding-top:9px; padding-bottom:9px; }
section[data-tile] tr.clickable:hover td { background:var(--you-bubble); }

/* ---- mobile bottom navigation ---- */
#bottom-nav { display:none; }
@media (max-width: 767.98px) {
  #bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:flex; justify-content:space-around; align-items:stretch;
    background:var(--surface); border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom); }
  #bottom-nav a, #bottom-nav button { flex:1; display:flex; flex-direction:column;
    align-items:center; gap:2px; padding:8px 4px 10px; min-height:56px;
    background:none; border:none; color:var(--muted); font:inherit; font-size:11px;
    text-decoration:none; cursor:pointer; }
  #bottom-nav .bn-ico { font-size:20px; }
  #bottom-nav a.active { color:var(--fg); font-weight:600; }
  body { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  /* keep the floating controls and the coach dock above the bar */
  #feedback-fab, #coach-fab { bottom:calc(72px + env(safe-area-inset-bottom)); }
  .t-contents > .coach-top, .tiled3 > .coach-top { bottom:calc(70px + env(safe-area-inset-bottom)); }
  #bn-more-menu { position:fixed; right:10px; bottom:calc(70px + env(safe-area-inset-bottom));
    z-index:51; background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:8px; display:flex; flex-direction:column; gap:2px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
  /* display:flex would otherwise override the hidden attribute's UA display:none */
  #bn-more-menu[hidden] { display:none; }
  #bn-more-menu a, #bn-more-menu button { padding:12px 16px; min-height:44px; background:none;
    border:none; color:var(--fg); font:inherit; text-align:left; text-decoration:none;
    border-radius:8px; cursor:pointer; }
  #bn-more-menu a:hover, #bn-more-menu button:hover { background:var(--you-bubble); }
}

/* ---- desktop top-nav: persistent destinations + global team search ---- */
.nav-links { display:none; }
.nav-search { display:none; }
@media (min-width: 768px) {
  .nav .inner { gap:18px; }
  .nav-links { display:flex; gap:4px; margin-left:auto; }
  .nav-search { display:block; }
  .nav-links a { padding:7px 14px; border-radius:999px; color:var(--muted);
    text-decoration:none; font-weight:600; font-size:13.5px; }
  .nav-links a:hover { color:var(--fg); background:var(--you-bubble); }
  .nav-links a.active { color:var(--fg); background:var(--you-bubble);
    box-shadow:inset 0 0 0 1px var(--accent, #5a82ff); }
  .nav-search input { width:190px; padding:7px 13px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); color:var(--fg);
    font:inherit; font-size:13px; transition:width .2s ease, border-color .2s; }
  .nav-search input:focus { width:250px; border-color:var(--accent, #5a82ff); outline:none; }
}

/* ---- account: sign-in link / avatar menu (rendered only when AUTH_ENABLED) ---- */
.nav-signin { display:none; }
@media (min-width: 768px) {
  .nav-signin { display:inline-block; padding:7px 14px; border-radius:999px;
    color:var(--fg); text-decoration:none; font-weight:600; font-size:13.5px;
    border:1px solid var(--line); }
  .nav-signin:hover { border-color:var(--accent, #5a82ff); }
}
.nav-user { position:relative; display:inline-flex; }
#nav-avatar { width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--you-bubble); color:var(--fg); font:inherit; font-weight:800;
  font-size:14px; cursor:pointer; }
#nav-avatar:hover { border-color:var(--accent, #5a82ff); }
#nav-user-menu { position:absolute; right:0; top:42px; z-index:60; min-width:200px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); padding:6px; display:flex;
  flex-direction:column; }
#nav-user-menu[hidden] { display:none; }
#nav-user-menu .nu-email { padding:8px 12px; font-size:12px; color:var(--muted);
  border-bottom:1px solid var(--line); margin-bottom:4px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
#nav-user-menu a, #nav-user-menu button { display:block; width:100%; text-align:left;
  padding:9px 12px; border:0; background:none; color:var(--fg); font:inherit;
  font-size:13.5px; font-weight:600; text-decoration:none; border-radius:8px;
  cursor:pointer; }
#nav-user-menu a:hover, #nav-user-menu button:hover { background:var(--you-bubble); }
.fav-btn { vertical-align:middle; margin-left:10px; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.fav-btn:hover { background:rgba(255,255,255,.22); }
.fav-btn.on { background:#facc15; border-color:#facc15; color:#1c2430; }

/* ---- home dashboard: your teams + league pulse ---- */
.home-search { display:flex; gap:10px; margin-top:16px; max-width:520px; }
.home-search input { flex:1; padding:11px 16px; border-radius:999px; border:1px solid
  rgba(255,255,255,.45); background:rgba(255,255,255,.14); color:#fff; font:inherit;
  font-size:15px; }
.home-search input::placeholder { color:rgba(255,255,255,.75); }
.home-search input:focus { outline:none; border-color:#fff; background:rgba(255,255,255,.2); }
.home-leagues { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.home-leagues .chip { border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.12); }
.home-leagues .chip:hover { background:rgba(255,255,255,.22); }
.home-cards { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width: 900px) { .home-cards { grid-template-columns:repeat(2, 1fr); } }
.home-card { border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.hc-head { display:flex; align-items:center; gap:10px; }
.hc-name { font-family:Sora, Inter, sans-serif; font-weight:700; font-size:18px;
  color:var(--fg); text-decoration:none; }
.hc-name:hover { text-decoration:underline; }
.hc-league { font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.hc-label { font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted); margin-right:6px; }
.hc-next, .hc-last { font-size:13.5px; color:var(--fg); }
.hc-res.w { color:var(--win, #16a34a); font-weight:700; }
.hc-res.l { color:var(--loss, #dc2626); font-weight:700; }
.hc-actions { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; align-items:center; }
.home-recent td { vertical-align:middle; }
.hc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hc-row .btn, .hc-row .chip { flex-shrink:0; }
.hc-sub { font-size:12.5px; color:var(--muted); margin-top:-4px; }
.hc-coach { margin-left:auto; }

/* ---- home fixtures calendar (hero right column) ---- */
.home-hero-grid { display:grid; gap:26px; align-items:center; }
@media (min-width: 1050px) { .home-hero-grid { grid-template-columns:minmax(0,1fr) 350px; } }
#home-cal { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.35);
  border-radius:16px; padding:14px 16px 12px; color:#fff; }
.cal-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-top span { font-weight:700; font-size:14px; }
.cal-top button { width:28px; height:28px; border-radius:8px; border:1px solid
  rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font-size:16px;
  line-height:1; cursor:pointer; }
.cal-top button:hover { background:rgba(255,255,255,.25); }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center; }
.cal-wd { font-size:10px; font-weight:700; letter-spacing:.4px; opacity:.75; padding:2px 0 4px; }
.cal-day { position:relative; font-size:12.5px; padding:5px 0 12px; border-radius:8px; }
.cal-day.today { outline:1px solid rgba(255,255,255,.6); font-weight:700; }
.cal-day.has { background:rgba(255,255,255,.16); font-weight:700; cursor:default; }
.cal-dots { position:absolute; left:0; right:0; bottom:3px; display:flex; gap:3px;
  justify-content:center; }
.cal-dot { display:inline-block; width:6px; height:6px; border-radius:50%; }
.cal-dot.t0 { background:#facc15; } .cal-dot.t1 { background:#4ade80; }
.cal-dot.t2 { background:#f472b6; } .cal-dot.t3 { background:#38bdf8; }
.cal-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:11.5px; }
.cal-legend span { display:inline-flex; align-items:center; gap:6px; opacity:.95; }
.cal-legend .cal-dot { width:8px; height:8px; }

/* ---- AI coach minimize toggle ---- */
.coach-min { float:right; width:26px; height:26px; margin-left:10px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--fg);
  font:inherit; font-size:15px; font-weight:700; line-height:1; cursor:pointer; }
.coach-min:hover { border-color:var(--accent, #5a82ff); }
.coach-section.cmin > :not(h2) { display:none; }
.coach-section.cmin > h2 { margin-bottom:0; }

/* ---- typeahead dropdown (suggest.js) — one floating box shared by all searches ---- */
#sg-box { position:absolute; z-index:200; max-width:360px; max-height:320px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:5px;
  box-shadow:0 12px 32px rgba(0,0,0,.25); }
#sg-box .sg-head { padding:7px 12px 3px; font-size:10.5px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted); }
#sg-box .sg-item { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 12px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--fg); }
#sg-box .sg-item.sg-active { background:var(--you-bubble); }
#sg-box .sg-sub { font-size:11.5px; color:var(--muted); white-space:nowrap; }

/* ---- pre-match game-plan strip: the decision before the data ---- */
.gameplan { border:1px solid var(--accent, #5a82ff); border-radius:16px;
  padding:14px 16px; margin:14px 0 18px;
  background:linear-gradient(135deg, var(--you-bubble) 0%, var(--surface) 85%); }
.gp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.gp-item { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; }
.gp-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.gp-v { font-family:var(--font-display); font-weight:800; font-size:22px; margin:3px 0 2px;
  letter-spacing:-.01em; }
.gp-t { font-size:11.5px; color:var(--muted); }

/* ---- mobile column pruning: the essential columns, comfortably; full table >=768px ----
   Schedule keeps Date · Opponent · action (drops Time/Venue/Series).
   Results keeps Opponent · Us · Them · result/action (drops Date).
   Squad keeps Player · Role · Runs · SR · Form (drops Inns/Avg/HS/Wkts). */
@media (max-width: 767.98px) {
  /* slimmed 4-col schedule (When · Opponent · Venue · action): drop only Venue on phones */
  .tbl-schedule th:nth-child(3), .tbl-schedule td:nth-child(3) { display:none; }
  .tbl-results th:nth-child(1), .tbl-results td:nth-child(1) { display:none; }
  .tbl-squad th:nth-child(3), .tbl-squad td:nth-child(3),
  .tbl-squad th:nth-child(5), .tbl-squad td:nth-child(5),
  .tbl-squad th:nth-child(7), .tbl-squad td:nth-child(7),
  .tbl-squad th:nth-child(8), .tbl-squad td:nth-child(8) { display:none; }
  .tbl-schedule, .tbl-results, .tbl-squad { display:table; width:100%; }
}

/* ---- team page: flowing editorial layout (tiles retired here) ---- */
.anchor-bar { position:sticky; top:0; z-index:7; display:flex; gap:6px; overflow-x:auto;
  padding:10px 2px; margin:0 0 14px; background:var(--bg); border-bottom:1px solid var(--line);
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.anchor-bar a { flex:0 0 auto; padding:8px 14px; border-radius:999px; font-size:12.5px;
  font-weight:600; color:var(--muted); text-decoration:none; border:1px solid var(--line);
  background:var(--surface); min-height:36px; display:inline-flex; align-items:center; }
.anchor-bar a:hover { color:var(--fg); border-color:var(--accent, #5a82ff); }
#team-body > section { scroll-margin-top:64px; }
#team-body .page-pins { position:static; box-shadow:none; padding:0; }
/* desktop: purposeful grouping — wide things wide, related pairs side by side */
@media (min-width: 1100px) {
  #team-body { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 22px; }
  #team-body > * { grid-column:1 / -1; }
  #team-body > #phases { grid-column:1; }
  #team-body > #opponents { grid-column:2; }
}
/* schedule and results stack vertically (owner preference) — full width each */
/* the coach card in flow: compact, prominent, right under the match context */
#team-body > #coach.coach-top { position:static; max-height:none; overflow:visible; margin:0 0 18px; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* ---- team-flow polish (owner screenshots): cramping + clipping fixes ---- */
.nowrap { white-space:nowrap; }
.trunc { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bowl-order-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:17px; margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.bowl-order-h .hint { font-weight:400; font-size:12px; color:var(--muted); }
/* half-width cards must never clip their tables: stack the phase pair vertically */
#phases .cols-stack { display:block; }
#phases .cols-stack > div + div { margin-top:16px; }
#phases table { width:100%; }
/* grid rows: cards keep their natural height instead of stretching to the row */
@media (min-width: 1100px) { #team-body { align-items:start; } }

/* action columns align across stacked tables: same right edge, fixed width */
.tbl-schedule td:last-child, .tbl-schedule th:last-child,
.tbl-results td:last-child, .tbl-results th:last-child {
  text-align:right; width:132px; white-space:nowrap; }

/* players page search */
.players-search { display:flex; gap:8px; max-width:460px; }
.players-search input[type=search] { flex:1; padding:10px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--fg); font:inherit; }
.chip.active { border-color:var(--accent, #5a82ff); color:var(--fg); }