/* Icecream daily predictions page — static styling, no framework. */

:root {
  --bg: #0f1419;
  --panel: #1a222c;
  --panel-2: #232f3d;
  --ink: #e6edf3;
  --ink-dim: #9aa7b4;
  --accent: #5ec8d8;
  --border: #2d3a48;
  --warn: #d8a85e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}

header {
  padding: 1.6rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

header h1 { margin: 0; font-size: 1.5rem; letter-spacing: 0.2px; }
header .sub { margin: 0.35rem 0 0; color: var(--ink-dim); font-size: 0.9rem; }

main { max-width: 1040px; margin: 0 auto; padding: 1.25rem; }

#meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.meta-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  min-width: 130px;
}

.meta-item .label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-dim);
}

.meta-item .value { display: block; font-size: 1.05rem; font-weight: 600; }

.status {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  color: var(--ink-dim);
}

.status.error { color: var(--warn); border-color: var(--warn); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

thead th {
  background: var(--panel-2);
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-dim);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

tbody td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.94rem;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }

.matchup { font-weight: 600; }
.pred-num { color: var(--accent); font-weight: 600; }
.line-num { color: var(--ink-dim); }
.muted { color: var(--ink-dim); }

.disclaimer {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

footer {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--ink-dim);
  font-size: 0.8rem;
}

footer code, .disclaimer code { color: var(--accent); }

@media (max-width: 620px) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tbody tr { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
  tbody td { border: none; padding: 0.3rem 0.85rem; }
  td.num { text-align: left; }
  td::before {
    content: attr(data-label) ": ";
    color: var(--ink-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
  }
}

/* ------------------------------------------------------------------ */
/* Hub page additions (models landing page). Scoped class names only,  */
/* so the shared stylesheet does not affect the predictions page.      */
/* ------------------------------------------------------------------ */

.intro {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.intro strong { color: var(--ink); }

.section-title {
  font-size: 1.05rem;
  margin: 1.4rem 0 0.6rem;
  letter-spacing: 0.2px;
}

.section-note {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

/* Prominent call-to-action card linking to the predictions page. */
.cta-card {
  display: block;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.4rem;
  text-decoration: none;
  color: var(--ink);
}

.cta-card:hover { background: var(--panel); }
.cta-card .cta-title { font-size: 1.05rem; font-weight: 600; color: var(--accent); }
.cta-card .cta-sub { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--ink-dim); }

/* Status pills used in the model table. */
.pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink-dim);
  white-space: nowrap;
}

.pill.ensemble {
  border-color: var(--accent);
  color: var(--accent);
}

/* Daily-page Lineup column: Confirmed (StatsAPI) vs Projected (RotoWire). */
.pill.confirmed {
  border-color: #3f8f5f;
  color: #6fcf97;
  background: rgba(63, 143, 95, 0.08);
}

.pill.projected {
  border-color: var(--warn);
  color: var(--warn);
  background: rgba(216, 168, 94, 0.08);
}

.lineup-empty { color: var(--ink-dim); }

/* Score column: final (plain), live (green with dot), upcoming (dim
   dash), postponed (italic muted). */
.score-final { font-weight: 600; font-variant-numeric: tabular-nums; }
.score-live  { font-weight: 600; color: #6fcf97;
               font-variant-numeric: tabular-nums; }
.score-empty { color: var(--ink-dim); }
.state-ppd   { color: var(--ink-dim); font-style: italic;
               font-size: 0.82rem; }

td .variant-id {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

td .descriptor { color: var(--ink-dim); font-size: 0.88rem; }

/* Pick columns: over/under against DK line, graded WON / LOST / PUSH
   for Final games. Pending games render the pick plain. */
.pick-pending { font-weight: 600; }
.pick-won  { font-weight: 600; color: #2e8540; }
.pick-lost { font-weight: 600; color: #b3261e; }
.pick-push { font-weight: 600; color: var(--ink-dim); font-style: italic; }
.pick-empty { color: var(--ink-dim); }


/* ===== 2026-06-10 card redesign additions (cards only — header/meta/status
   keep the original styling above) ===== */
#pred-body { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
@media (max-width: 480px) { #pred-body { grid-template-columns: 1fr; } }

.game { background: var(--panel); border: 1px solid #2d3a48;
  border-radius: 8px; padding: 13px 15px; }
.game-head { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.game .matchup { font-size: 16px; font-weight: 600; }
.matchup-sub { color: #8a92a6; font-size: 12px; margin-top: 3px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.game .score { font-size: 15px; font-weight: 700; white-space: nowrap; }

.team-block { margin: 4px 0 10px 0; }
.team-line { display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; font-size: 13px; flex-wrap: wrap; }
.team-name { font-weight: 700; min-width: 42px; }
.team-tag { color: #8a92a6; font-size: 12px; flex: 1; }
.win-pct, .lead-pct { color: #8a92a6; white-space: nowrap; }
.win-pct.fav, .lead-pct.fav { color: #5ec8d8; font-weight: 700; }
.tiny-pct { color: #5d6678; font-size: 11px; margin-left: 3px; }
.mkt-am { color: #8a92a6; font-size: 12px; white-space: nowrap; }

table.tot { width: 100%; border-collapse: collapse; font-size: 13px; }
.tot th, .tot td { padding: 5px 8px; text-align: right;
  border-top: 1px solid #2d3a48; }
.tot th { color: #8a92a6; font-weight: 500; border-top: 0;
  font-size: 11.5px; letter-spacing: .3px; }
.tot th:first-child, .tot td:first-child { text-align: left; }
.tot td.lbl { color: #8a92a6; }
.tot td.model { color: #e6edf3; font-weight: 600; }
.tot td.primary { color: #5ec8d8; font-weight: 600; }

.ok { color: #86efac; font-weight: 700; }
.bad { color: #fca5a5; font-weight: 700; }

/* team table (2026-06-10): totals-style layout for the h2h block */
.tot.teams { margin-bottom: 10px; }
.tot.teams td.sp { text-align: left; color: #8a92a6; font-size: 12px; }
.tot.teams th:nth-child(2) { text-align: left; }
.tot.teams td.lbl { color: #e6edf3; }

/* pitcher under the team name (2026-06-10) */
.sp-under { color: #8a92a6; font-size: 11.5px; margin-top: 1px; }

/* center the market columns under their headers (Dave 2026-06-10) */
.tot.teams th:nth-child(2), .tot.teams td:nth-child(2),
.tot.teams th:nth-child(3), .tot.teams td:nth-child(3) {
  text-align: center;
}

/* pin column widths so headers sit centered ABOVE their odds (Dave) */
.tot.teams { table-layout: fixed; }
.tot.teams th:first-child, .tot.teams td:first-child { width: 16%; }
.tot.teams th:nth-child(2), .tot.teams td:nth-child(2) { width: 34%; text-align: center !important; }
.tot.teams th:nth-child(3), .tot.teams td:nth-child(3) { width: 32%; text-align: center !important; }
.tot.teams th:last-child, .tot.teams td:last-child { width: 18%; }

/* left-align ALL odds columns (Dave 2026-06-10) */
.tot.teams th:nth-child(2), .tot.teams td:nth-child(2),
.tot.teams th:nth-child(3), .tot.teams td:nth-child(3) {
  text-align: left !important;
}
.tot:not(.teams) th:nth-child(4), .tot:not(.teams) td:nth-child(4),
.tot:not(.teams) th:nth-child(5), .tot:not(.teams) td:nth-child(5) {
  text-align: left !important;
}

/* fixed-width odds so + and - stack exactly (Dave 2026-06-10) */
.tot.teams .odds-our, .tot.teams .odds-mkt {
  display: inline-block; min-width: 3.6em;
  font-variant-numeric: tabular-nums;
}
.tot.teams .odds-mkt { margin-left: 0.4em; }
.tot.teams .odds-our { margin-right: 0.4em; }

/* ------------------------------------------------------------------ */
/* Daily card lines grid (Dave 2026-06-13 redesign): team rows x       */
/* First 5 / Full game, "market opening / our line" with our accented. */
/* ------------------------------------------------------------------ */
.lines { width: 100%; border-collapse: collapse; font-size: 13px;
         margin-top: 10px; table-layout: fixed; }
.lines th { color: var(--ink-dim); font-weight: 600; font-size: 11px;
            text-align: left; padding: 5px 8px; }
.lines th:last-child { text-align: center; }
.lines td { padding: 4px 8px; vertical-align: top; }
.lines tr.sec td { color: #5d6678; font-size: 11px; padding: 8px 8px 2px;
                   border-top: 1px solid var(--border); }
.lines .rlbl { font-weight: 600; color: var(--ink); }
.lines .mkt { color: var(--ink-dim); }
.lines .our { color: var(--accent); font-weight: 600; }
.lines .res { text-align: center; white-space: nowrap; }
.lines .rtag { color: var(--ink-dim); font-size: 11px; font-weight: 400; }