/* ==========================================================================
 * GAME RESULT PAGE — /result/{season}/{week}/{away}-{home}/
 *
 * v0.46.7. DESIGN IS A HARD GATE ON THIS SHIP (L5, law since .113): a
 * black-and-white table of half-broken stats fails regardless of test counts.
 * The enqueue chain was repaired at v0.46.5, so the ds layer is actually
 * available here — this sheet uses it rather than reinventing primitives.
 *
 * Tokens only: no raw hex, no raw geometry (the .45.5 uniformity gate globs
 * every product sheet).
 * ========================================================================== */

.nfl-result__container {
  display: flex;
  flex-direction: column;
  gap: var(--nfl-gap-5, 16px);
}

/* ---- scoreboard: the one thing the reader came for ---------------------- */

.nfl-result__header {
  display: flex;
  flex-direction: column;
  gap: var(--nfl-gap-2, 8px);
}

.nfl-result__meta {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nfl-text-muted, #6b7280);
}

/* Two sides, equal weight, read across — a scoreboard is symmetric by
   definition, so neither team gets the anchor position. */
.nfl-result__scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nfl-gap-3, 10px);
}

.nfl-result__side {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nfl-gap-3, 10px);
  padding: var(--nfl-gap-4, 12px) var(--nfl-gap-5, 16px);
  background: var(--nfl-card-bg, #fff);
  border: 1px solid var(--nfl-card-border, #e6e8ec);
  border-radius: var(--nfl-radius-card, 12px);
}

/* The winner is marked once, by weight and a single edge — not a colour
   badge, which would put a second boxed element in the row (.117). */
.nfl-result__side--won {
  border-color: var(--nfl-accent, #2563eb);
}

.nfl-result__team {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nfl-result__points {
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nfl-result__side--won .nfl-result__points {
  color: var(--nfl-accent, #2563eb);
}

.nfl-result__line {
  margin: 0;
  font-weight: 700;
}

/* ---- the house pick's verdict ------------------------------------------- */

.nfl-result__pick,
.nfl-result__box,
.nfl-result__recap {
  display: flex;
  flex-direction: column;
  gap: var(--nfl-gap-3, 10px);
  padding: var(--nfl-gap-5, 16px);
}

.nfl-result__pick-line {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Right and wrong are stated in words first; the colour is reinforcement,
   never the only carrier (a11y — §47.2 audits this, so do not create debt). */
.nfl-result__pick-line--right { color: var(--nfl-good, #15803d); }
.nfl-result__pick-line--wrong { color: var(--nfl-bad, #b91c1c); }

.nfl-result__pick-basis,
.nfl-result__box-source {
  margin: 0;
  font-size: 0.85rem;
}

/* ---- the SHARED two-column stat block ----------------------------------
 * One renderer, one stylesheet rule set, both pages (operator ruling): the
 * matchup's season comparison and this page's box score are the same block
 * with different rows. Styling it once is what makes "recognise one from the
 * other instantly" true rather than aspirational.
 * ----------------------------------------------------------------------- */

.nfl-cmp {
  display: flex;
  flex-direction: column;
  gap: var(--nfl-gap-3, 10px);
  padding: var(--nfl-gap-5, 16px);
}

.nfl-cmp__table {
  width: 100%;
  border-collapse: collapse;
}

.nfl-cmp__table th,
.nfl-cmp__table td {
  padding: var(--nfl-gap-2, 8px);
  text-align: left;
}

.nfl-cmp__table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nfl-text-muted, #6b7280);
}

.nfl-cmp__table thead th + th,
.nfl-cmp__val {
  text-align: right;
}

/* Tabular figures so the two columns line up digit for digit — a comparison
   that does not align is unreadable however correct it is. */
.nfl-cmp__val {
  font-variant-numeric: tabular-nums;
  width: 24%;
  white-space: nowrap;
}

/* The better side is marked ONCE, by weight — not a colour badge, which would
   put a second boxed element on every row (.117). */
.nfl-cmp__val--better {
  font-weight: 800;
}

.nfl-cmp__table tbody tr + tr {
  border-top: 1px solid var(--nfl-card-border, #e6e8ec);
}

/* Row labels stay quiet so the numbers carry the block. */
.nfl-cmp__table tbody th {
  font-weight: 600;
  color: var(--nfl-text, #111827);
}

.nfl-cmp__note {
  margin: 0;
  font-size: 0.85rem;
}

.nfl-result__recap-body {
  margin: 0;
  line-height: 1.6;
}

.nfl-result__back {
  margin: 0;
}

/* ---- L8: mobile is not optional ----------------------------------------- */

@media (max-width: 640px) {
  .nfl-result__scoreboard {
    grid-template-columns: 1fr;
    gap: var(--nfl-gap-2, 8px);
  }
  .nfl-result__points {
    font-size: 1.6rem;
  }
  .nfl-cmp__table th,
  .nfl-cmp__table td {
    padding: var(--nfl-gap-1, 6px);
    font-size: 0.9rem;
  }
  .nfl-cmp__val {
    width: 26%;
  }
}

/* ---- groups: a head, and members indented under it ---------------------- */

.nfl-cmp__grouphead th {
  padding-top: var(--nfl-gap-4, 12px);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nfl-text-muted, #6b7280);
}

/* The first group head sits flush — the card title already spaces it. */
.nfl-cmp__table tbody tr.nfl-cmp__grouphead:first-child th {
  padding-top: 0;
}

/* A group head is a divider, not a data row: it does not carry the row rule
   that separates values from each other. */
.nfl-cmp__table tbody tr.nfl-cmp__grouphead + tr {
  border-top: 0;
}

/* Sub-rows are the composition of the row above them, so they indent and
   read a step quieter — the total stays the thing the eye lands on. */
.nfl-cmp__label--sub {
  padding-left: var(--nfl-gap-5, 16px) !important;
  font-weight: 500 !important;
  color: var(--nfl-text-muted, #6b7280) !important;
}

@media (max-width: 640px) {
  .nfl-cmp__label--sub {
    padding-left: var(--nfl-gap-3, 10px) !important;
  }
}

/* ---- the visual half: one chart, both teams overlaid (v0.46.8.3) -------- */

.nfl-cmpchart {
  display: flex;
  flex-direction: column;
  gap: var(--nfl-gap-3, 10px);
  padding: var(--nfl-gap-5, 16px);
}

.nfl-cmpchart__caption {
  margin: 0;
  font-size: 0.85rem;
}

/* A canvas in a flex column needs an explicit min-width:0 or it refuses to
   shrink below its intrinsic size — the same flex-item trap that collapsed
   these pages at v0.46.7, one level in. */
.nfl-cmpchart canvas {
  max-width: 100%;
  min-width: 0;
}

/* v0.46.8.3.1 — the betting-splits table reuses .nfl-cmp wholesale; only the
   admin-facing chart-loader warning is new, and it reads as a state, not a
   chart. */
.nfl-cmpchart__missing {
  margin: 0;
  font-size: 0.85rem;
}