/* =======================================================================
 * Single Game CPT — UHND.com (goldendome)
 *
 * Reference comp: references/game-cpt/UHND Game Recap - Header Treatments
 *                 - standalone.html ("band" treatment — matchup-only navy).
 * Parent pattern: assets/css/style.css §video-band block (sibling
 * implementations: single-video.php / .video-band wraps each content
 * region in <div class="page"> rather than dropping .page on <main>).
 *
 * Loaded on is_singular('game_entry') via goldendome_enqueue_game_css()
 * in functions.php at priority 90. Depends on goldendome-tokens and
 * goldendome-cpt-rough; the rough sheet still owns .matchup-row /
 * .team / .score-col / .scoreline / .status-pill / .game-meta-strip /
 * .cpt-tabs / .cpt-layout — this file only adds the navy-band chrome
 * around those primitives and the white-ink overrides on top.
 *
 * Layout shape (completed-game path):
 *   <main id="primary">
 *     <article class="cpt-article">
 *       <div class="page"> breadcrumbs (light bg, default style) </div>
 *       <section class="game-band">                ← full-width navy band
 *         <div class="page">                       ← page-max inside band
 *           <header class="matchup-header">…</header>
 *         </div>
 *       </section>
 *       <div class="game-tabs-wrap">               ← light bg, hairline below
 *         <div class="page">
 *           <nav class="cpt-tabs">…</nav>          ← _shared/tab-strip.php
 *         </div>
 *       </div>
 *       <div class="page">
 *         <div class="cpt-layout cpt-layout--rail …">…</div>
 *       </div>
 *     </article>
 *   </main>
 * ===================================================================== */

/* ===== Navy band ===================================================== */

.game-band {
	background: var(--bg-video-band);
	color: var(--video-band-ink);
	padding: 28px 0 30px;
}

/* ===== Matchup-header ink flips ====================================== *
 * The base typography + grid for .matchup-row / .team / .score-col /
 * .scoreline / .status-pill / .game-meta-strip stays in cpt-rough.css —
 * we only override the colors here so the same primitive reads on navy.
 * Selectors are scoped under .game-band so the Opponent-CPT series
 * header (.matchup-header--series) and any future light-background uses
 * of the same vocabulary are untouched. */

.game-band .matchup-header {
	/* Inside the band the header doesn't need its own vertical padding —
	 * the band owns top/bottom rhythm. */
	padding: 0;
}

.game-band .matchup-row .team-name {
	color: var(--video-band-ink);
}
.game-band .matchup-header--final .team:not(.team--winner) .team-name {
	color: var(--video-band-ink-3);
}

.game-band .matchup-row .team-record {
	color: var(--video-band-ink-3);
}

.game-band .matchup-row .rank-line {
	color: var(--video-band-ink-2);
}
.game-band .matchup-row .rank-line .rank-src {
	color: var(--video-band-ink-4);
}

.game-band .matchup-row .score {
	color: var(--video-band-ink);
}
.game-band .matchup-row .scoreline .score--loser {
	color: var(--video-band-ink-3);
}
.game-band .matchup-row .scoreline .dash {
	color: var(--video-band-ink-4);
}

/* Status pill — on navy, the default --pill-final-bg (= --bg-muted, a
 * light grey) reads muddy against the band. Two prior treatments were
 * tried (translucent gold per the comp; solid gold) — both read either
 * too low-contrast or too prominent. Final treatment 2026-05-19:
 * color the "Final" pill by ND's outcome — green for a win, red for a
 * loss, using the same --nd-green / --danger tokens that .wl-tag--win
 * and .wl-tag--loss use in the Series Meetings row. Non-ND games and
 * ties fall through to a neutral on-dark chip. Pill text stays "Final"
 * — the color carries the W/L semantic. */
.game-band .status-pill--final {
	/* Neutral fallback — non-ND games or ties */
	background-color: color-mix(in srgb, var(--video-band-ink) 14%, transparent);
	color: var(--video-band-ink);
	border: 1px solid var(--video-band-line-strong);
}
.game-band .status-pill--final.status-pill--win {
	background-color: var(--nd-green);
	color: #fff;
	border: none;
}
.game-band .status-pill--final.status-pill--loss {
	background-color: var(--danger);
	color: #fff;
	border: none;
}
.game-band .status-pill--scheduled {
	background-color: transparent;
	color: var(--video-band-ink);
	border: 1px solid var(--video-band-line-strong);
}

/* ===== Upcoming-game "vs" lockup =================================== *
 * For unplayed games the score column holds no scoreline, leaving the
 * 3-col matchup-row centre empty and the two teams stranded at the band
 * edges (responsive audit P1-1, Frank 2026-06-05). A large "vs" fills
 * the centre so the band reads as a matchup; the Upcoming pill sits
 * beneath it. Kickoff / venue stay in the .game-meta-strip below.
 * The score-col flex column already centres + stacks these, so the
 * markup is just `.vs-lockup` above `.status-pill--scheduled`. */
.game-band .score-col--preview {
	gap: 12px;
}
.game-band .score-col--preview .vs-lockup {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--video-band-ink-2);
}
/* Upcoming games size the team logos up a notch — without a scoreline to
 * anchor the centre, the logos carry the band's visual weight. */
.game-band .matchup-header--preview .matchup-row .team-logo {
	width: 92px;
	height: 92px;
}
.game-band .matchup-header--preview .matchup-row .team-mark {
	width: 92px;
	height: 92px;
	font-size: 24px;
}

/* Game meta strip — date / venue / network row under the matchup. Lives
 * inside the band per Frank's 2026-05-19 call, so flip the hairline and
 * ink colors to the on-dark ramp. */
.game-band .game-meta-strip {
	color: var(--video-band-ink-2);
	border-top-color: var(--video-band-line);
}
.game-band .game-meta-strip .meta-sep {
	color: var(--video-band-ink-4);
}

/* ===== Tab row wrap (light bg, below the band) ======================= */

.game-tabs-wrap {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding-top: 24px;
}
/* The existing .cpt-tabs rule in cpt-rough.css already owns the tab
 * geometry (gap, active-state navy underline). The wrap above just adds
 * band-edge breathing room above the tabs + the hairline below the row. */

/* ===== Page heading (visible <h1>, light bg, atop content) =========== *
 * The navy band has no single headline by design (it sets the two teams
 * against each other), so the page's one crawlable <h1> lives here, at the
 * top of the content column below the tab strip (template-parts/cpt/game/
 * page-heading.php). Mirrors the utility-header__title register — serif,
 * navy — one notch smaller since it sits under the band rather than leading
 * the page. Added 2026-06-01. */
.game-page-heading {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 2.2vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.12;
	color: var(--nd-navy);
	margin: 0 0 18px;
	text-wrap: pretty;
}

/* ===== Compare-table full variant (Team Stats + Advanced tabs) ======= *
 * Added 2026-05-21 per "Game CPT design pass". The full team-stats /
 * advanced tables now opt into `.data-table` for canonical thead + body
 * primitives, plus `.compare-table--full` for the alignment scheme
 * Frank specified:
 *   - Left team column   → right-aligned mono number
 *   - STAT (middle) col  → center-aligned sans label
 *   - Right team column  → left-aligned mono number
 *
 * The recap-only `.compare-table` (8-row curated) and `.compare-table--full`
 * (full team-stats / advanced) share the home-val/stat-label/away-val
 * structure; this block adds the canonical-table-compatible alignment
 * rules that mirror cpt-rough.css §"Compare table" L912-920 but apply
 * to the `data-table`-marked tables on the Team Stats / Advanced tabs. */
/* The team-stats + advanced tables ship as
 * `<table class="data-table compare-table compare-table--full">` —
 * `.compare-table` (cpt-rough.css) provides cell decoration
 * (team-h serif heads, home-val/away-val mono numeric, stat-label sans,
 * leader background wash). `.compare-table--full` only needs the
 * delta from the curated 8-row `.compare-table`: warm-tan head band on
 * team-h cells. Phase 3a (2026-05-22) collapsed the redundant cell
 * decoration. */
.compare-table--full thead th.team-h {
	background: var(--bg-header-row);
}

/* ===== Box Score 2-column grid (Box Score tab) ======================= *
 * Added 2026-05-21 per "Game CPT design pass". Box Score splits into
 * a side-by-side grid — Notre Dame Stats column | Opponent Stats column —
 * each carrying its own per-category sub-tables. Mobile stacks to a
 * single column at ≤760px. */
.box-score-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.box-score-col__head {
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--nd-navy);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	letter-spacing: -.005em;
}
.box-score-col__category {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--type-micro-tracking);
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 24px 0 8px;
}
.box-score-col__category:first-of-type {
	margin-top: 0;
}
.box-score-col__empty {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--ink-3);
}
.box-score-table th[scope="row"] {
	font-weight: 600;
	color: var(--text);
}

/* ===== Recent form ("Last 5 played") ================================
 * Preview + recap module (template-parts/cpt/game/recent-form.php). Two
 * team columns side by side, each a stack of W/L rows. Pills reuse
 * .wl-tag from cpt-rough.css. Added 2026-06-05 with the upcoming-game
 * enrichment (recent-form + series tally from cfbd-sync). */
.cpt-module--recent-form .form-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
.form-col {
	min-width: 0;
}
/* Single divider between the two tables — no box around each. */
.form-col + .form-col {
	border-left: 1px solid var(--line-soft);
	padding-left: 22px;
}
.form-team {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--line-soft);
}
.form-team-logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex: 0 0 auto;
}
.form-team-name {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--nd-navy);
	line-height: 1.1;
}
.form-team-record {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.form-games {
	list-style: none;
	margin: 0;
	padding: 0;
}
.form-game {
	display: grid;
	grid-template-columns: 22px auto 1fr;
	gap: 10px;
	align-items: center;
	padding: 7px 0;
	border-bottom: 1px solid var(--line-soft);
}
.form-game:last-child {
	border-bottom: 0;
}
.form-score {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.form-opp {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	justify-self: end;
}
.form-opp-flag {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-4);
	letter-spacing: var(--tracking-mono-tight);
	text-transform: lowercase;
}
.form-opp-logo {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex: 0 0 auto;
}
.form-opp-name {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.form-empty {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--ink-3);
	margin: 6px 0 0;
}

/* ===== Series History — rail widget ================================
 * series-tally.php renders in the upcoming-game rail (2026-06-07) under the
 * canonical `.rail-section` / `.rail-section-head` chrome (style.css, gold
 * underline) so it matches matchup-history and the other rail sections. The
 * tally body reuses the shared `.series-tally` / `.tally-*` / `.series-mark`
 * primitives (cpt-rough.css) — this `.rail-series` scope only sizes them
 * down from the old content-column tally to fit the ~300px rail. The
 * rail-section-head's gold underline is the divider, so the tally drops its
 * own bottom rule + bottom margin (rail-gap handles spacing to the next
 * section). */
.rail-series .series-tally {
	gap: 14px;
	padding: 12px 0 2px;
	border-bottom: 0;
	margin-bottom: 0;
}
.rail-series .series-mark { width: 40px; height: 40px; }
.rail-series .tally-record { font-size: 26px; }
.rail-series .tally-frame { letter-spacing: 0.14em; }

/* ===== Stat Comparison (upcoming-game matchup preview) ==============
 * template-parts/cpt/game/matchup-preview.php. Reuses the canonical
 * `.compare-table` register (cpt-rough.css: team-h heads, home-val/
 * away-val mono cells, stat-label centre column, `.leader` wash). This
 * `--matchup` delta adds only what that register doesn't carry: a logo
 * beside each team head, a national-rank sub-line under each value, and
 * a unit caption under each category label. Added 2026-06-07 with the
 * game_matchup_preview_json enrichment. */
.compare-table--matchup .mv-team {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.compare-table--matchup .mv-team-logo {
	width: 26px;
	height: 26px;
	object-fit: contain;
	flex: 0 0 auto;
}
/* Value + rank stack within each numeric cell; the register already sets
 * the mono face, tabular figures, and right/left padding on home/away. */
.compare-table--matchup .home-val,
.compare-table--matchup .away-val {
	line-height: 1.2;
}
.compare-table--matchup .mv-value {
	display: block;
}
.compare-table--matchup .mv-rank {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-4);
}
/* Restore the `.leader` wash inside the preview's `.cpt-layout` shell: the
 * shared `.cpt-layout .compare-table tbody td { background: transparent }`
 * reset (cpt-rough.css) out-specifies the register's own `.leader` rule and
 * would otherwise strip the winning side's highlight. This scoped rule
 * (3 classes) wins it back. */
.cpt-layout .compare-table--matchup .leader {
	background-color: var(--winner-bg);
}
/* On the leading side the cell flips to winner-fg; keep the rank legible
 * against the wash by inheriting that colour at a softer weight. */
.compare-table--matchup .leader .mv-rank {
	color: inherit;
	opacity: .72;
}
/* Category label + unit caption stack in the centre column. */
.compare-table--matchup .mv-cat {
	display: block;
}
.compare-table--matchup .mv-unit {
	display: block;
	margin-top: 2px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--tracking-mono-loose);
	text-transform: uppercase;
	color: var(--ink-4);
}
.cpt-module--matchup .matchup-foot {
	margin: 12px 0 0;
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--ink-3);
}

/* ===== Mobile (≤760px) ============================================== */

@media (max-width: 760px) {
	.game-band {
		padding: 22px 0 24px;
	}
	.game-tabs-wrap {
		padding-top: 16px;
	}
	.box-score-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.compare-table--full .home-val { padding-right: 12px; }
	.compare-table--full .away-val { padding-left: 12px; }
	.compare-table--matchup .home-val { padding-right: 12px; }
	.compare-table--matchup .away-val { padding-left: 12px; }
	.compare-table--matchup .mv-team-logo { width: 22px; height: 22px; }

	/* Recent form stacks to a single column on mobile; the divider flips
	 * from a vertical rule between columns to a horizontal one between rows. */
	.cpt-module--recent-form .form-cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.cpt-module--recent-form .form-col + .form-col {
		border-left: 0;
		border-top: 1px solid var(--line-soft);
		padding-left: 0;
		padding-top: 16px;
		margin-top: 10px;
	}
}

/* ===== Tooltip primitive (design-system §14.5) =====
 * Folded in from the former standalone tooltip.css (2026-06-05 Phase 3
 * consolidation) — it only ever loaded on game_entry singles alongside
 * this sheet, so a separate request bought nothing. tooltip.js is still
 * enqueued conditionally.
 * .tooltip-trigger: inline ⓘ button, keyboard-focusable.
 * .tooltip-popover: absolutely-positioned popover created by tooltip.js,
 * appended to <body> so it breaks out of overflow containers. */
.tooltip-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0 0 0 5px;
	cursor: pointer;
	color: var(--ink-4);
	font-size: 12px;
	line-height: 1;
	vertical-align: middle;
	transition: color .12s;
}
.tooltip-trigger:hover,
.tooltip-trigger:focus-visible {
	color: var(--ink-2);
	outline: none;
}
.tooltip-trigger:focus-visible {
	outline: 2px solid var(--nd-navy);
	outline-offset: 2px;
	border-radius: 2px;
}

.tooltip-popover {
	position: absolute;
	z-index: 200;
	max-width: 240px;
	background: var(--nd-navy);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	padding: 8px 12px;
	border-radius: var(--radius);
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(12, 35, 64, 0.25);
}
.tooltip-popover[hidden] {
	display: none;
}