/* assets/theme.css — McNasties shared light theme.
   Single source of the design system: tokens, header (incl. the .hdr-right /
   .btn-refresh contract auth.js depends on), chips, cards, tier & result
   badges, model-vs-market tables, stat tiles, breakdown tables, states.
   Pages add page-specific rules in their own inline <style> AFTER the link. */

:root {
  --bg:#f6f7f9; --card:#ffffff; --card2:#f1f5f9; --border:#e2e8f0; --border2:#cbd5e1;
  --text:#0f172a; --sub:#334155; --muted:#64748b; --faint:#94a3b8;
  --green:#15803d; --green-bg:#f0fdf4; --red:#b91c1c; --red-bg:#fef2f2;
  --blue:#1d4ed8; --blue-bg:#eff6ff; --amber:#b45309; --amber-bg:#fffbeb;
  --live:#dc2626;
  --tierA:#b45309; --tierA-bg:#fef3c7; --tierB:#1d4ed8; --tierB-bg:#dbeafe;
  --tierC:#475569; --tierC-bg:#e2e8f0;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.06);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.09);
  --fd:'Chakra Petch',sans-serif; --fb:'Inter',system-ui,-apple-system,sans-serif;
  --r:10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--text); font-family:var(--fb); font-size:14px; line-height:1.45; }
a { color:inherit; }
button { font-family:inherit; cursor:pointer; }

/* ── Header ─────────────────────────────── */
.hdr {
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; gap:12px;
}
.hdr-left { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0; }
.hdr-left a.back { font-family:var(--fd); font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--muted); text-decoration:none; white-space:nowrap; }
.hdr-left a.back:hover { color:var(--text); }
.hdr-title { font-family:var(--fd); font-size:16px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.hdr-title .accent { color:var(--blue); }
.hdr-sub { font-size:11px; color:var(--muted); white-space:nowrap; }
.hdr-right { display:flex; align-items:center; gap:8px; }
.btn-refresh {
  background:var(--card); border:1px solid var(--border2); border-radius:8px;
  color:var(--sub); font-family:var(--fd); font-size:11px; font-weight:600;
  letter-spacing:.06em; padding:7px 12px; transition:all .15s;
}
.btn-refresh:hover { border-color:var(--blue); color:var(--blue); }
.btn-refresh:disabled { opacity:.5; cursor:default; }

/* ── Summary strip ──────────────────────── */
.summary { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 18px 0; max-width:980px; margin:0 auto; }
.sum-chip {
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:5px 12px; font-size:12px; color:var(--sub); display:inline-flex; gap:6px; align-items:center;
  text-decoration:none; box-shadow:var(--shadow);
}
.sum-chip b { font-weight:700; color:var(--text); }
.sum-chip .dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.sum-chip.perf:hover { border-color:var(--blue); }

/* ── Filter bar ─────────────────────────── */
.filterbar {
  position:sticky; top:49px; z-index:90; background:rgba(246,247,249,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:10px 18px 12px; border-bottom:1px solid var(--border);
}
.filterbar-inner { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.chip-row { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; align-items:center; }
.chip-row::-webkit-scrollbar { display:none; }
.fchip {
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  color:var(--sub); font-size:12px; font-weight:500; padding:6px 13px;
  white-space:nowrap; transition:all .12s; flex:0 0 auto;
}
.fchip:hover { border-color:var(--border2); }
.fchip.on { background:var(--text); border-color:var(--text); color:#fff; font-weight:600; }
.fchip .n { font-size:10px; opacity:.65; margin-left:3px; }
.fchip.live-chip.on { background:var(--live); border-color:var(--live); }
.fsep { width:1px; height:20px; background:var(--border2); flex:0 0 auto; margin:0 3px; }
.fsearch {
  border:1px solid var(--border); border-radius:999px; background:var(--card);
  font-family:var(--fb); font-size:12px; color:var(--text); padding:6px 13px;
  min-width:130px; flex:0 0 auto; outline:none; transition:border .12s;
}
.fsearch:focus { border-color:var(--blue); }
.fsearch::placeholder { color:var(--faint); }

/* ── Slate layout ───────────────────────── */
#slate { max-width:980px; margin:0 auto; padding:6px 18px 60px; }
.day-hdr {
  font-family:var(--fd); font-size:13px; font-weight:700; letter-spacing:.12em;
  color:var(--text); margin:26px 2px 4px; display:flex; align-items:baseline; gap:10px;
}
.day-hdr .cnt { font-family:var(--fb); font-size:11px; font-weight:500; color:var(--faint); letter-spacing:0; }
.slot-hdr { font-family:var(--fd); font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--faint); margin:14px 2px 2px; }

/* ── Game card ──────────────────────────── */
.gc {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); margin-top:10px; overflow:hidden;
}
.gc.live { border-color:#fecaca; box-shadow:0 0 0 1px #fecaca, var(--shadow-lg); }
.gc-top { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 0; gap:8px; flex-wrap:wrap; }
.gc-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.st-live { color:var(--live); font-weight:700; display:inline-flex; align-items:center; gap:5px; }
.st-live .pulse { width:8px; height:8px; border-radius:50%; background:var(--live); animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.st-final { color:var(--muted); font-weight:600; }
.st-time { font-weight:600; color:var(--sub); }
.wk-tag, .pre-tag, .div-tag {
  font-family:var(--fd); font-size:9px; font-weight:600; letter-spacing:.1em;
  border-radius:5px; padding:2px 6px; background:var(--card2); color:var(--muted);
}
.pre-tag { background:var(--amber-bg); color:var(--amber); }
.gc-result-badge { font-size:11px; font-weight:700; border-radius:6px; padding:3px 8px; }
.res-WIN { background:var(--green-bg); color:var(--green); }
.res-LOSS { background:var(--red-bg); color:var(--red); }
.res-PUSH { background:var(--card2); color:var(--muted); }

.gc-teams { display:grid; grid-template-columns:1fr auto auto; gap:2px 14px; padding:10px 16px 4px; align-items:center; }
.gc-teams .col-hdr { font-family:var(--fd); font-size:9px; font-weight:600; letter-spacing:.12em; color:var(--faint); text-align:right; }
.trow { display:contents; }
.tname { display:flex; align-items:center; gap:9px; min-width:0; padding:3px 0; }
.tname img { width:26px; height:26px; flex:0 0 auto; }
.tname .nm { font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tname .rec { font-size:11px; color:var(--faint); font-weight:500; }
.tname.fav .nm { font-weight:800; }
.score { font-family:var(--fd); font-size:19px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.score.win { color:var(--text); } .score.lose { color:var(--faint); }
.proj { font-size:13px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; font-weight:600; min-width:44px; }
.proj.fav { color:var(--blue); font-weight:800; }

/* venue + weather strip */
.gc-venue {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 16px; margin-top:6px; border-top:1px solid var(--border);
  background:var(--card2); font-size:12px; color:var(--sub);
}
.venue-name { font-weight:600; }
.venue-city { color:var(--muted); }
.roof-badge {
  font-family:var(--fd); font-size:9px; font-weight:700; letter-spacing:.1em;
  border-radius:5px; padding:2.5px 7px;
}
.roof-dome { background:#e2e8f0; color:#475569; }
.roof-retractable { background:var(--blue-bg); color:var(--blue); }
.roof-open { background:var(--green-bg); color:var(--green); }
.neutral-badge { background:var(--amber-bg); color:var(--amber); font-family:var(--fd); font-size:9px; font-weight:700; letter-spacing:.1em; border-radius:5px; padding:2.5px 7px; }
.wx { display:inline-flex; align-items:center; gap:7px; color:var(--sub); }
.wx .wind-warn { color:var(--amber); font-weight:700; }
.wx .wind-danger { color:var(--red); font-weight:700; }
.wx-na { color:var(--faint); font-style:italic; }

/* model vs market table */
.mm-wrap { padding:10px 16px 2px; }
.mm-title { font-family:var(--fd); font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--faint); margin-bottom:6px; }
.mm-table { width:100%; border-collapse:collapse; }
.mm-table th {
  font-family:var(--fd); font-size:9px; font-weight:600; letter-spacing:.12em;
  color:var(--faint); text-align:left; padding:3px 8px 3px 0; border-bottom:1px solid var(--border);
}
.mm-table th.r, .mm-table td.r { text-align:right; }
.mm-table td { padding:6px 8px 6px 0; border-bottom:1px solid var(--border); font-size:13px; font-variant-numeric:tabular-nums; }
.mm-table tr:last-child td { border-bottom:none; }
.mm-mkt { color:var(--muted); }
.mm-lbl { font-family:var(--fd); font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--muted); }
.mm-model { font-weight:700; }
.edge-cell { display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
.tier {
  font-family:var(--fd); font-size:10px; font-weight:700; width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:6px; flex:0 0 auto;
}
.tier-A { background:var(--tierA-bg); color:var(--tierA); }
.tier-B { background:var(--tierB-bg); color:var(--tierB); }
.tier-C { background:var(--tierC-bg); color:var(--tierC); }
.edge-lean { font-size:12px; font-weight:600; color:var(--sub); }
.edge-none { color:var(--faint); }

/* reasoning */
.why { padding:8px 16px 4px; }
.why-li { font-size:12px; color:var(--muted); padding:1.5px 0 1.5px 14px; position:relative; }
.why-li::before { content:''; position:absolute; left:2px; top:8.5px; width:4px; height:4px; border-radius:50%; background:var(--border2); }
.why-li.model-line { color:var(--sub); font-weight:600; }
.why-li.model-line::before { background:var(--blue); }

/* injuries */
.inj-wrap { padding:6px 16px 6px; }
.inj-banner {
  background:var(--red-bg); border:1px solid #fecaca; color:var(--red);
  border-radius:8px; font-size:12.5px; font-weight:700; padding:7px 11px; margin:4px 0 6px;
}
.inj-chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:3px; }
.inj-chip {
  font-size:11px; border-radius:6px; padding:2.5px 8px; background:var(--card2);
  color:var(--sub); border:1px solid var(--border);
}
.inj-chip b { font-weight:700; }
.inj-chip .out { color:var(--red); font-weight:700; }
.inj-chip .q { color:var(--amber); font-weight:700; }
.inj-side-lbl { font-family:var(--fd); font-size:9px; font-weight:600; letter-spacing:.1em; color:var(--faint); margin-right:2px; }
.inj-none { font-size:11.5px; color:var(--faint); }

/* props */
.props-wrap { padding:8px 16px 10px; border-top:1px solid var(--border); margin-top:8px; }
.props-title { font-family:var(--fd); font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--faint); margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; }
.props-table { width:100%; border-collapse:collapse; }
.props-table th { font-family:var(--fd); font-size:9px; font-weight:600; letter-spacing:.1em; color:var(--faint); text-align:left; padding:3px 6px 3px 0; border-bottom:1px solid var(--border); }
.props-table th.r, .props-table td.r { text-align:right; }
.props-table td { padding:5px 6px 5px 0; font-size:12.5px; border-bottom:1px solid var(--card2); font-variant-numeric:tabular-nums; }
.props-table tr:last-child td { border-bottom:none; }
.pp-player { font-weight:600; white-space:nowrap; }
.pp-pos { color:var(--faint); font-size:10.5px; margin-left:4px; }
.pp-mkt { color:var(--muted); }
.pp-lean-over { color:var(--green); font-weight:700; }
.pp-lean-under { color:var(--red); font-weight:700; }
.pp-proj { color:var(--sub); font-weight:600; }
.props-more {
  background:none; border:none; color:var(--blue); font-size:11.5px; font-weight:600;
  padding:6px 0 0; text-decoration:underline; text-underline-offset:2px;
}
.props-empty { font-size:11.5px; color:var(--faint); padding:2px 0; }
.tt-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--sub); }
.tt-item b { font-variant-numeric:tabular-nums; }

/* books */
details.books { border-top:1px solid var(--border); margin-top:8px; }
details.books summary {
  font-family:var(--fd); font-size:10px; font-weight:600; letter-spacing:.1em;
  color:var(--faint); padding:8px 16px; cursor:pointer; list-style:none; user-select:none;
}
details.books summary::-webkit-details-marker { display:none; }
details.books summary::before { content:'▸ '; }
details.books[open] summary::before { content:'▾ '; }
.books-scroll { overflow-x:auto; padding:0 16px 10px; }
.books-table { border-collapse:collapse; min-width:430px; width:100%; }
.books-table th { font-family:var(--fd); font-size:9px; letter-spacing:.08em; color:var(--faint); text-align:right; padding:3px 8px; border-bottom:1px solid var(--border); }
.books-table th:first-child { text-align:left; }
.books-table td { font-size:12px; text-align:right; padding:4px 8px; font-variant-numeric:tabular-nums; color:var(--sub); }
.books-table td:first-child { text-align:left; font-weight:600; color:var(--text); }
.best-cell { color:var(--green); font-weight:700; }

/* pick row */
.pick-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 16px; border-top:1px solid var(--border); background:var(--blue-bg);
  font-size:12.5px; color:var(--sub);
}
.pick-row .lbl { font-family:var(--fd); font-size:9px; font-weight:700; letter-spacing:.12em; color:var(--blue); }
.pick-row b { color:var(--text); }
.pick-row .clv { color:var(--muted); font-size:11.5px; }

/* A game always shows a verdict. A lean is deliberately NOT styled like a
   graded pick — muted background, amber label, and an explicit disclaimer —
   so a sub-threshold read can never be mistaken for one the model endorses. */
/* A qualifying edge that has not been frozen yet is a real play, so it sits
   with the graded pick visually — the tier badge carries the grade. Only the
   caveat text distinguishes it. */
.pick-row.edge-row { background:var(--blue-bg); }
.pick-row.edge-row .lbl { color:var(--blue); }
.pick-row .not-frozen {
  font-family:var(--fd); font-size:9px; letter-spacing:.05em; color:var(--muted);
  border:1px dashed var(--border2); border-radius:999px; padding:2px 8px;
}
.pick-row.lean-row { background:var(--card2); border-top:1px dashed var(--border2); }
.pick-row.lean-row .lbl { color:var(--amber); }
.pick-row.lean-row b { color:var(--sub); font-weight:600; }
.pick-row .lean-size { font-family:var(--fd); font-size:11px; color:var(--muted); }
.pick-row .below-thresh {
  font-family:var(--fd); font-size:9px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--border2); border-radius:999px; padding:2px 8px;
}
.pick-row.no-market { background:var(--card2); border-top:1px dashed var(--border2); }
.pick-row.no-market .lbl { color:var(--muted); }
.pick-row .nm-txt { color:var(--muted); font-size:12px; }
.held-note {
  padding:5px 16px 7px; font-size:11.5px; color:var(--amber);
  background:var(--card2); border-bottom:1px solid var(--border);
}

/* skeletons / states */
.skel { background:var(--card); border:1px solid var(--border); border-radius:var(--r); height:150px; margin-top:10px; position:relative; overflow:hidden; }
.skel::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(15,23,42,.04),transparent); animation:shimmer 1.3s infinite; }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.state-box { max-width:520px; margin:60px auto; text-align:center; padding:34px 24px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); }
.state-box h2 { font-family:var(--fd); font-size:16px; letter-spacing:.05em; margin-bottom:8px; }
.state-box p { color:var(--muted); font-size:13px; }
.state-box button { margin-top:14px; }
.season-note {
  max-width:980px; margin:14px auto 0; padding:0 18px;
}
.season-note .inner {
  background:var(--blue-bg); border:1px solid #bfdbfe; color:var(--blue);
  border-radius:var(--r); padding:9px 14px; font-size:12.5px; font-weight:600;
}
.foot { max-width:980px; margin:30px auto 40px; padding:0 18px; font-size:11px; color:var(--faint); display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:640px) {
  .hdr { padding:10px 12px; }
  .hdr-sub { display:none; }
  .summary, .filterbar { padding-left:12px; padding-right:12px; }
  #slate { padding:6px 10px 60px; }
  .gc-teams { grid-template-columns:1fr auto auto; gap:2px 10px; padding:10px 12px 4px; }
  .gc-top, .gc-venue, .mm-wrap, .why, .inj-wrap, .props-wrap, .pick-row { padding-left:12px; padding-right:12px; }
  .tname .nm { font-size:13.5px; }
  .filterbar { top:49px; }

  /* Prop board on a phone.
     Six columns of nowrap text need ~483px; a 390px screen gives the card
     368px, so the EDGE column — the tier grade, the one thing a reader acts
     on — was pushed a clear 126px off the right edge and silently clipped.
     Let the two text columns wrap, tighten the numeric ones, and stack the
     grade above its edge figure so the column is a badge wide instead of a
     badge plus a number. */
  .pp-player { white-space:normal; }
  .props-table th, .props-table td { padding-right:4px; }
  .props-table td { font-size:12px; }
  .props-table .pp-mkt { font-size:11.5px; }
  .props-table .pp-pos { margin-left:3px; }
  .props-table .edge-cell { flex-direction:column; align-items:flex-end; gap:0; }
  .props-table .edge-lean { font-size:10.5px; line-height:1.15; }
  /* Last resort: if a board still runs wide, it scrolls rather than clips —
     nothing on the card should ever be unreachable. */
  .props-wrap { overflow-x:auto; }
}

/* ── Stat tiles / breakdown tables (performance, edge board) ── */
.wrap { max-width:980px; margin:0 auto; padding:16px 18px 60px; }
.section { margin-top:26px; }
.sec-title { font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--muted); margin-bottom:10px; }
.sec-title .sub { font-family:var(--fb); font-weight:500; letter-spacing:0; color:var(--faint); font-size:11px; }
.tile { background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:14px 16px; }
.tile .v { font-family:var(--fd); font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.tile .v.pos { color:var(--green); }
.tile .v.neg { color:var(--red); }
.tile .l { font-family:var(--fd); font-size:9px; font-weight:600; letter-spacing:.12em; color:var(--faint); margin-top:3px; }
.tile .d { font-size:11px; color:var(--muted); margin-top:2px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
table.brk { width:100%; border-collapse:collapse; }
table.brk th { font-family:var(--fd); font-size:9px; font-weight:600; letter-spacing:.1em; color:var(--faint); text-align:right; padding:4px 8px; border-bottom:1px solid var(--border); }
table.brk th:first-child { text-align:left; }
table.brk td { font-size:13px; text-align:right; padding:6px 8px; font-variant-numeric:tabular-nums; color:var(--sub); border-bottom:1px solid var(--card2); }
table.brk td:first-child { text-align:left; }
table.brk tr:last-child td { border-bottom:none; }
.pos { color:var(--green); font-weight:700; }
.neg { color:var(--red); font-weight:700; }
.roibar { height:5px; border-radius:3px; background:var(--card2); overflow:hidden; margin-top:3px; }
.roibar > div { height:100%; border-radius:3px; }
.trend .col { flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; min-width:20px; }
.trend .bar { width:100%; max-width:34px; margin:0 auto; border-radius:4px 4px 0 0; position:relative; }
.trend .bar.neg { border-radius:0 0 4px 4px; }
.trend .axis { position:absolute; left:0; right:0; height:1px; background:var(--border2); top:50%; }
.trend .col .lbl { position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:9.5px; color:var(--faint); white-space:nowrap; overflow:hidden; }
.trend .col .val { position:absolute; left:0; right:0; text-align:center; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.trend-note { font-size:11px; color:var(--faint); margin-top:14px; }
.scroll-x { overflow-x:auto; }
.mono { font-variant-numeric:tabular-nums; }
.health .h-item { background:var(--card); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:11.5px; color:var(--muted); display:inline-flex; gap:6px; align-items:center; }
.health .h-item b { color:var(--sub); font-weight:600; }
.health .ok { width:7px; height:7px; border-radius:50%; background:var(--green); }
.health .stale { width:7px; height:7px; border-radius:50%; background:var(--amber); }
.empty { text-align:center; color:var(--muted); font-size:13px; padding:26px 16px; }
.empty b { display:block; font-family:var(--fd); letter-spacing:.06em; color:var(--sub); margin-bottom:6px; }
@media (max-width:640px) {
  .wrap { padding:12px 12px 60px; }
  .grid2 { grid-template-columns:1fr; }
  .trend .col:nth-child(odd) .lbl { display:none; }
}