/* ==========================================================================
 * MATCHUP PAGE — /matchup/{season}/{week}/{away}-{home}/
 *
 * v0.46.5. The 45.17 spine shipped with NO stylesheet at all: the page ran on
 * ds primitives alone, which held it together but left every section reading
 * at the same weight. This is the design pass.
 *
 * Tokens only — no raw hex, no raw geometry (the v0.45.5 uniformity gate
 * globs every product sheet, so a literal here fails the gate).
 * ========================================================================== */

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

/* ---- header: the two teams are the loudest thing on the page ------------ */

.nfl-matchup__title {
  margin: 0;
}

.nfl-matchup__meta {
  margin: 0;
}

/* ---- cards share one rhythm so no section shouts over another ----------- */

.nfl-matchup__line,
.nfl-matchup__result,
.nfl-matchup__house,
.nfl-matchup__h2h,
.nfl-matchup__insights {
  display: flex;
  flex-direction: column;
  gap: var(--nfl-gap-3, 10px);
  padding: var(--nfl-gap-5, 16px);
}

/* The final score is the one number that earns extra size — after the game
   it is what the visitor came for. */
.nfl-matchup__score {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nfl-matchup__cover {
  margin: 0;
}

/* ---- the house algorithm's view ---------------------------------------- */

.nfl-matchup__ratings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nfl-gap-5, 16px);
}

.nfl-matchup__rating-team {
  font-weight: 800;
}

.nfl-matchup__rating-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* The edge and the pick are the page's conclusion — they read as statements,
   not as another data row. */
.nfl-matchup__edge,
.nfl-matchup__pick {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Gated copy is quiet: it tells a stranger what is behind the door without
   pretending to be the thing itself (Rule 5 — and never a link into it). */
.nfl-matchup__pick-gated {
  margin: 0;
}

.nfl-matchup__freshness {
  margin: 0;
  font-size: 0.9rem;
}

/* ---- head to head ------------------------------------------------------- */

.nfl-matchup__h2h-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nfl-gap-2, 8px);
}

.nfl-matchup__h2h-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nfl-gap-2, 8px);
}

.nfl-matchup__h2h-when {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 6.5em;
}

.nfl-matchup__h2h-score {
  font-variant-numeric: tabular-nums;
}

/* ---- insights ----------------------------------------------------------- */

.nfl-matchup__insight {
  margin: 0;
  line-height: 1.55;
}

.nfl-matchup__back {
  margin: 0;
}

/* ---- L8 mobile ---------------------------------------------------------- */

@media (max-width: 640px) {
  .nfl-matchup__ratings {
    flex-direction: column;
    gap: var(--nfl-gap-2, 8px);
  }
  .nfl-matchup__h2h-when {
    min-width: 0;
  }
  .nfl-matchup__score {
    font-size: 1.2rem;
  }
}

/* ---- the two-column comparison ------------------------------------------
 * v0.46.7: MOVED. The block is now shared with the result page and styled
 * once in nfl-result.css under .nfl-cmp — one renderer, one rule set, both
 * pages. Styling it twice is how "the same design language" quietly stops
 * being true.
 * ----------------------------------------------------------------------- */