/* theme.css — Visualize Sport design system.
 *
 * A shared token layer + primitives so every page reads as one product:
 * one accent, chalk-on-blue-black neutrals (both themes), stat-sheet
 * typography, and no emoji chrome. Include AFTER style.css on a page, then use
 * the .vs-* primitives. Semantic win/loss/amber are separate from the accent.
 */
:root{
  --vs-bg:#0a0e13; --vs-surface:#111823; --vs-surface-2:#0d141d; --vs-raise:#16202c;
  --vs-line:#1c2836; --vs-line-2:#293a4d;
  --vs-ink:#eaf1f8; --vs-ink-dim:#93a6ba; --vs-ink-faint:#617488;
  --vs-accent:#3d8bff; --vs-accent-ink:#b4d1ff; --vs-accent-dim:#1d3a63;
  --vs-us:#4c9dff; --vs-them:#e8994a;
  --vs-win:#39c98a; --vs-loss:#ff6d6d; --vs-tie:#e0c74a;
  --vs-radius:14px; --vs-radius-s:9px;
  --vs-shadow:0 1px 0 rgba(255,255,255,.02), 0 12px 30px -18px rgba(0,0,0,.8);
  --vs-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --vs-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --vs-bg:#eef1f5; --vs-surface:#ffffff; --vs-surface-2:#f6f8fb; --vs-raise:#ffffff;
    --vs-line:#e3e9ef; --vs-line-2:#d2dbe4;
    --vs-ink:#0d151e; --vs-ink-dim:#54687b; --vs-ink-faint:#8496a7;
    --vs-accent:#1f6fe5; --vs-accent-ink:#134aa0; --vs-accent-dim:#dbe8fd;
    --vs-us:#1f6fe5; --vs-them:#cf7a26;
    --vs-win:#12a06a; --vs-loss:#dc4b4b; --vs-tie:#b79512;
    --vs-shadow:0 1px 0 rgba(0,0,0,.02), 0 14px 30px -20px rgba(20,40,70,.28);
  }
}
:root[data-theme="dark"]{
  --vs-bg:#0a0e13; --vs-surface:#111823; --vs-surface-2:#0d141d; --vs-raise:#16202c;
  --vs-line:#1c2836; --vs-line-2:#293a4d;
  --vs-ink:#eaf1f8; --vs-ink-dim:#93a6ba; --vs-ink-faint:#617488;
  --vs-accent:#3d8bff; --vs-accent-ink:#b4d1ff; --vs-accent-dim:#1d3a63;
  --vs-us:#4c9dff; --vs-them:#e8994a; --vs-win:#39c98a; --vs-loss:#ff6d6d; --vs-tie:#e0c74a;
  --vs-shadow:0 1px 0 rgba(255,255,255,.02), 0 12px 30px -18px rgba(0,0,0,.8);
}
:root[data-theme="light"]{
  --vs-bg:#eef1f5; --vs-surface:#ffffff; --vs-surface-2:#f6f8fb; --vs-raise:#ffffff;
  --vs-line:#e3e9ef; --vs-line-2:#d2dbe4;
  --vs-ink:#0d151e; --vs-ink-dim:#54687b; --vs-ink-faint:#8496a7;
  --vs-accent:#1f6fe5; --vs-accent-ink:#134aa0; --vs-accent-dim:#dbe8fd;
  --vs-us:#1f6fe5; --vs-them:#cf7a26; --vs-win:#12a06a; --vs-loss:#dc4b4b; --vs-tie:#b79512;
  --vs-shadow:0 1px 0 rgba(0,0,0,.02), 0 14px 30px -20px rgba(20,40,70,.28);
}

/* ── Page shell ─────────────────────────────────────────────────────────── */
body.vs{background:var(--vs-bg);color:var(--vs-ink);font-family:var(--vs-sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;}
.vs-wrap{max-width:860px;margin:0 auto;padding:26px 18px 72px;}
.vs *{box-sizing:border-box;}

/* ── Type primitives ────────────────────────────────────────────────────── */
.vs-eyebrow{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--vs-ink-faint);}
.vs-h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0;}
.vs-sechead{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px;}
.vs-sechead h2{font-size:.95rem;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--vs-ink);}
.vs-section{margin-top:30px;}
.vs-back{display:inline-flex;align-items:center;gap:6px;color:var(--vs-ink-dim);
  text-decoration:none;font-size:.82rem;font-weight:600;cursor:pointer;background:none;border:0;padding:0;}
.vs-back:hover{color:var(--vs-ink);}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.vs-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--vs-sans);
  font-size:.84rem;font-weight:700;color:var(--vs-ink);background:var(--vs-surface-2);
  border:1px solid var(--vs-line);border-radius:9px;padding:8px 13px;cursor:pointer;
  transition:border-color .12s,background .12s;}
.vs-btn:hover{border-color:var(--vs-line-2);}
.vs-btn.primary{background:var(--vs-accent);border-color:var(--vs-accent);color:#fff;}
.vs-btn.primary:hover{filter:brightness(1.06);}
.vs-btn.ghost{background:transparent;}
.vs-btn:disabled{opacity:.5;cursor:default;}

/* ── Chips ──────────────────────────────────────────────────────────────── */
.vs-chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;
  letter-spacing:.03em;padding:4px 10px;border-radius:99px;text-transform:uppercase;}
.vs-chip .dot{width:6px;height:6px;border-radius:99px;background:currentColor;}
.vs-chip.win{background:color-mix(in srgb,var(--vs-win) 16%,transparent);color:var(--vs-win);}
.vs-chip.loss{background:color-mix(in srgb,var(--vs-loss) 16%,transparent);color:var(--vs-loss);}
.vs-chip.tie{background:color-mix(in srgb,var(--vs-tie) 16%,transparent);color:var(--vs-tie);}
.vs-chip.neutral{background:var(--vs-surface-2);color:var(--vs-ink-dim);border:1px solid var(--vs-line);}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.vs-card{background:var(--vs-surface);border:1px solid var(--vs-line);
  border-radius:var(--vs-radius);box-shadow:var(--vs-shadow);}
.vs-card.pad{padding:16px 18px;}

/* ── Stat-sheet meters ──────────────────────────────────────────────────── */
.vs-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--vs-line);border:1px solid var(--vs-line);border-radius:var(--vs-radius);overflow:hidden;}
.vs-meter{background:var(--vs-surface);padding:15px 16px 16px;}
.vs-meter .lab{font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--vs-ink-faint);}
.vs-meter .big{display:flex;align-items:baseline;gap:6px;margin:9px 0 11px;}
.vs-meter .big .pct{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;}
.vs-meter .big .frac{font-size:.8rem;color:var(--vs-ink-dim);font-weight:600;}
.vs-bar{height:5px;border-radius:99px;background:var(--vs-surface-2);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--vs-line);}
.vs-bar>i{display:block;height:100%;border-radius:99px;background:var(--vs-accent);
  width:0;transition:width 1s cubic-bezier(.2,.7,.2,1);}
.vs-meter.warn .vs-bar>i{background:var(--vs-them);}

/* ── Score header ───────────────────────────────────────────────────────── */
.vs-score{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;}
.vs-score .side{min-width:0;}
.vs-score .side .team{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;}
.vs-score .side .sub{color:var(--vs-ink-dim);font-size:.8rem;margin-top:2px;}
.vs-score .nums{display:flex;align-items:baseline;gap:12px;margin-left:auto;}
.vs-score .n{font-size:2.8rem;font-weight:800;letter-spacing:-.03em;line-height:.9;}
.vs-score .n.dim{color:var(--vs-ink-faint);}
.vs-score .dash{color:var(--vs-line-2);font-size:1.9rem;font-weight:300;}
.vs-metaline{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;color:var(--vs-ink-dim);
  font-size:.82rem;padding-bottom:22px;border-bottom:1px solid var(--vs-line);}
.vs-metaline b{color:var(--vs-ink);font-weight:700;}

/* ── Tables (box score) ─────────────────────────────────────────────────── */
.vs-tablecard{border:1px solid var(--vs-line);border-radius:var(--vs-radius);
  overflow:hidden;background:var(--vs-surface);}
.vs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.vs-table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:560px;}
.vs-table thead th{position:sticky;top:0;background:var(--vs-surface-2);color:var(--vs-ink-faint);
  font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  padding:11px 9px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--vs-line);}
.vs-table thead th.l{text-align:left;}
.vs-table tbody td{padding:10px 9px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--vs-line);font-variant-numeric:tabular-nums;}
.vs-table tbody td.l{text-align:left;}
.vs-table tbody tr:last-child td{border-bottom:0;}
.vs-table tbody tr:hover td{background:var(--vs-surface-2);}
.vs-pl{display:flex;align-items:center;gap:9px;}
.vs-pl .num{font-family:var(--vs-mono);font-size:.72rem;color:var(--vs-ink-faint);min-width:22px;text-align:right;}
.vs-pl .nm{font-weight:600;}
.vs-table tbody tr.lead td{background:color-mix(in srgb,var(--vs-accent) 7%,transparent);}
.vs-table tbody tr.lead .nm{color:var(--vs-accent-ink);font-weight:700;}
.vs-table tbody tr.lead td:first-child{box-shadow:inset 3px 0 0 var(--vs-accent);}
.vs-table .z{color:var(--vs-ink-faint);}
.vs-table tfoot td{padding:11px 9px;text-align:right;font-weight:800;
  border-top:1px solid var(--vs-line-2);background:var(--vs-surface-2);}
.vs-table tfoot td.l{text-align:left;text-transform:uppercase;font-size:.66rem;
  letter-spacing:.1em;color:var(--vs-ink-dim);}

/* ── Empty / states ─────────────────────────────────────────────────────── */
.vs-empty{color:var(--vs-ink-faint);text-align:center;padding:38px 16px;font-size:.9rem;}
.vs-gate{background:color-mix(in srgb,var(--vs-loss) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--vs-loss) 40%,transparent);
  color:var(--vs-ink);border-radius:var(--vs-radius);padding:18px;}

.vs :focus-visible{outline:2px solid var(--vs-accent);outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){.vs *{transition:none!important;}}