/* Ruiz Projections — Model Accuracy page (builds on nfl.css + props.css tokens) */
:root{--ma-model:#b97f10;--ma-ref:#5b8def;--ma-good:#8ff0b2;--ma-warn:#ffb38a}
.ma-lede{margin:0;color:#c4cfdb;font-size:13.5px;line-height:1.6;max-width:880px}
.ma-help{margin:-2px 0 10px;color:var(--muted);font-size:12px;line-height:1.55}
.ma-alert{padding:10px 12px;border:1px solid var(--amber);border-radius:10px;background:rgba(245,183,72,.08);color:#ffe2a8;font-size:12.5px}

/* Sport switch */
.ma-sport{display:flex;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:10px;background:rgba(8,13,19,.85)}
.ma-sport button{padding:8px 16px;border:0;border-radius:7px;background:none;color:#cfd9e4;font:700 15px var(--head);letter-spacing:.04em}
.ma-sport button[aria-selected=true]{background:var(--brandbg);color:#fff;box-shadow:inset 0 0 0 1px var(--brand)}
body.sport-other .ma-nfl,body.sport-other #ma-nfl-week,body.sport-other #ma-alert{display:none!important}
.ma-num{font-variant-numeric:tabular-nums}
.nba-tbl th,.nba-tbl td{white-space:nowrap}
.nba-wrap{overflow-x:auto}

/* Headline tiles */
.ma-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ma-tile{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px;min-width:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ma-tile h3{margin:0 0 8px;font:700 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ma-tile .big{font:800 40px/1 var(--head);color:#fff;font-variant-numeric:tabular-nums}
.ma-tile .big small{font-size:18px;color:var(--muted);font-weight:700;margin-left:4px}
.ma-tile p{margin:8px 0 0;color:#c4cfdb;font-size:12px;line-height:1.5}
.ma-tile.accent{border-color:color-mix(in srgb,var(--brand) 55%,var(--line))}

/* Verdict pills */
.ma-legend{display:flex;gap:6px;flex-wrap:wrap}
.ma-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.3;border:1px solid var(--line2);color:var(--muted);background:rgba(255,255,255,.02)}
.ma-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ma-pill.good{border-color:#2f7a4c;color:var(--ma-good)}
.ma-pill.warn{border-color:#9a5a33;color:var(--ma-warn)}
.ma-pill.good:before{content:"✓";width:auto;height:auto;background:none;font-size:10px}
.ma-pill.warn:before{content:"!";width:auto;height:auto;background:none;font-size:10px;font-weight:800}
.ma-pills{display:flex;flex-wrap:wrap;gap:5px}

/* Market table */
.ma-group{margin:14px 0 6px;font:800 15px var(--head);letter-spacing:.06em;color:var(--brand);text-transform:uppercase}
.ma-group:first-child{margin-top:0}
.ma-rows{display:flex;flex-direction:column;gap:6px}
.ma-row{display:grid;grid-template-columns:minmax(150px,1.3fr) repeat(4,minmax(64px,.55fr)) minmax(220px,2fr);gap:10px;align-items:center;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(8,13,19,.55);text-align:left;color:inherit}
.ma-row:hover,.ma-row:focus-visible{border-color:#5a7393;outline:none}
.ma-row.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.ma-row.head{background:none;border-color:transparent;padding-top:0;padding-bottom:2px;cursor:default}
.ma-row.head span{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ma-mname{font:700 17px/1.1 var(--head);letter-spacing:.01em}
.ma-mname small{display:block;margin-top:2px;font:500 11px var(--body);color:var(--muted)}
.ma-cell{font-variant-numeric:tabular-nums;font-size:13px}
.ma-cell b{font-weight:700;color:#fff}
.ma-cell .lbl{display:none}
.ma-cell .sub{display:block;font-size:10.5px;color:var(--muted)}

/* Detail */
.ma-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ma-chart{border:1px solid var(--line);border-radius:10px;padding:12px;background:rgba(8,13,19,.5);min-width:0}
.ma-chart h3{margin:0 0 4px;font:800 16px var(--head);letter-spacing:.03em}
.ma-chart p{margin:0 0 8px;color:var(--muted);font-size:11.5px;line-height:1.5}
.ma-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ma-chart svg text{font:11px var(--body);fill:var(--muted)}
.ma-chart svg .val{fill:var(--text);font-weight:600}
.ma-chart svg .grid{stroke:var(--line);stroke-width:1}
.ma-chart svg .hit{fill:transparent;cursor:pointer}
.ma-key{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:#c4cfdb}
.ma-key span{display:inline-flex;align-items:center;gap:6px}
.ma-key i{width:12px;height:12px;border-radius:3px;display:inline-block}
.ma-key i.model{background:var(--ma-model)}
.ma-key i.ref{background:var(--ma-ref)}
.ma-key i.line{height:2px;border-radius:1px}
.ma-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.ma-fact{border:1px solid var(--line);border-radius:9px;padding:10px;background:rgba(8,13,19,.5)}
.ma-fact span{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ma-fact b{font:800 24px/1.1 var(--head);font-variant-numeric:tabular-nums}
.ma-table-toggle{margin-top:8px;padding:6px 10px;border:1px solid var(--line2);border-radius:7px;background:none;color:var(--muted);font-size:11.5px}
.ma-mini{width:100%;margin-top:8px}

/* Team scores */
.ma-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:12px}
.ma-game{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(8,13,19,.55);font-variant-numeric:tabular-nums}
.ma-game .t{font:700 16px var(--head)}
.ma-game .h{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;text-align:right}
.ma-game .n{text-align:right;font-size:13px}
.ma-game .n b{color:#fff}
.ma-game .res{grid-column:1/-1;margin-top:4px}

/* Method */
.ma-method{color:#c4cfdb;font-size:12.5px;line-height:1.6}
.ma-method ul{margin:6px 0 0;padding-left:18px}
.ma-method li{margin:3px 0}
.ma-method h3{margin:12px 0 4px;font:800 15px var(--head);letter-spacing:.04em;color:#fff}

/* Tooltip */
.ma-tip{position:fixed;z-index:50;max-width:240px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(6,10,15,.97);color:var(--text);font-size:12px;line-height:1.45;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ma-tip b{color:#fff}
.ma-select{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11.5px;font-weight:600}
.ma-select select{padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(7,10,17,.85);color:#fff;font-size:13px;max-width:220px}

/* ---------- Responsive / mobile ---------- */
@media (max-width:1200px){
  .ma-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ma-row{grid-template-columns:minmax(130px,1.2fr) repeat(4,minmax(58px,.6fr))}
  .ma-row .ma-pills{grid-column:1/-1}
  .ma-row.head span:last-child{display:none}
}
@media (max-width:980px){
  .ma-detail-grid{grid-template-columns:1fr}
  .ma-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ma-tiles{gap:8px}
  .ma-tile{padding:11px}
  .ma-tile .big{font-size:32px}
  .ma-tile p{font-size:11.5px}
  /* Market rows become cards: name on top, stats in a 2x2 grid, verdicts below. */
  .ma-row.head{display:none}
  .ma-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:12px}
  .ma-row .ma-mname{grid-column:1/-1}
  .ma-cell .lbl{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  .ma-cell{font-size:14px}
  .gc-panel-head{align-items:flex-start}
  .ma-select{width:100%}
  .ma-select select{flex:1;max-width:none;min-height:40px}
  .ma-games{grid-template-columns:1fr}
  .ma-lede{font-size:13px}
  .ma-legend{width:100%}
}
@media (max-width:380px){
  .ma-tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dropdown menus: dark list with readable text (browsers draw options on white by default). */
select{color-scheme:dark}
select option,select optgroup{background:#111827;color:#e5e7eb}
select option:checked{background:#1f2937;color:#fff}