/*
 * Trinity NHL -- front-end styles, after the Phase 4 reference mockup
 * (docs/superpowers/plans/phase-4-reference.png), in Trinity Analytics blue
 * (#16afe5) where the mockup used orange.
 *
 * Everything is scoped under .tnhl-* so it cannot leak into the theme. The
 * site's theme is dark unconditionally, and the panels paint their own dark
 * ground, so the panel colors here are fixed rather than derived from the
 * theme. Text outside the panels (title, strip, footer) still follows
 * currentColor.
 *
 * Layout switches on the *container*, not the viewport: the shortcode drops
 * into whatever column a theme gives it.
 */

.tnhl-slate {
	--tnhl-panel: #0d1522;
	--tnhl-panel-alt: #121c2c;
	--tnhl-ink: #e8edf4;
	--tnhl-ink-muted: #9aa8bb;
	--tnhl-line: #23324a;
	/* Trinity Analytics blue: the selected chip, pressed pills, panel rules
	   and focus rings. Too light for white text (2.5:1), so anything set on
	   it uses the dark --tnhl-on-accent (7:1). */
	--tnhl-accent: #16afe5;
	--tnhl-on-accent: #0d1522;
	--tnhl-muted: color-mix(in srgb, currentColor 65%, transparent);
	--tnhl-border: color-mix(in srgb, currentColor 18%, transparent);
	--tnhl-radius: 8px;

	/* Heat: 1 = best for the shooter (green) to 5 = worst (red). Each passes
	   4.5:1 against white text. */
	--tnhl-heat-1: #1e7b34;
	--tnhl-heat-2: #4d7a1a;
	--tnhl-heat-3: #7a6c0f;
	--tnhl-heat-4: #9a5014;
	--tnhl-heat-5: #9b1f22;

	container-type: inline-size;
	font-variant-numeric: tabular-nums;
	margin-block-start: 2rem;
}

.tnhl-slate__title {
	margin-block: 0 1rem;
}

/* ---------- The stub banner and empty states ---------- */

.tnhl-stub {
	margin-block: 0 1rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid color-mix(in srgb, #c28a00 60%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, #c28a00 14%, transparent);
	font-size: 0.875rem;
}

.tnhl-empty {
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--tnhl-border);
	border-radius: 6px;
	color: var(--tnhl-muted);
}

/* ---------- The matchup strip ---------- */

.tnhl-strip {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-block-end: 0.5rem;
	margin-block-end: 0.75rem;
	scrollbar-width: thin;
	/* Windows draws a bright system scrollbar otherwise. */
	scrollbar-color: var(--tnhl-line) transparent;
}

.tnhl-chip {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--tnhl-line);
	border-radius: var(--tnhl-radius);
	background: var(--tnhl-panel);
	color: var(--tnhl-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.2;
	white-space: nowrap;
}

.tnhl-chip:hover {
	border-color: var(--tnhl-ink-muted);
}

.tnhl-chip:focus-visible {
	outline: 2px solid var(--tnhl-accent);
	outline-offset: 2px;
}

.tnhl-chip[aria-current="true"] {
	background: var(--tnhl-accent);
	border-color: var(--tnhl-accent);
	color: var(--tnhl-on-accent);
}

.tnhl-chip__teams {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

/*
 * A team's abbreviation in a circle of its colours. The site shows no league
 * or team images; the ring keeps navy and black teams visible on the dark page.
 */
.tnhl-team-badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--tnhl-team-bg, var(--tnhl-panel-alt));
	color: var(--tnhl-team-fg, var(--tnhl-ink));
	box-shadow: 0 0 0 2px var(--tnhl-line);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

.tnhl-chip__badge {
	width: 2rem;
	height: 2rem;
	font-size: 0.625rem;
}

.tnhl-chip__at {
	opacity: 0.7;
	font-weight: 600;
}

.tnhl-chip__time {
	font-weight: 500;
	font-size: 0.75rem;
	color: var(--tnhl-ink-muted);
}

.tnhl-chip[aria-current="true"] .tnhl-chip__time {
	color: var(--tnhl-on-accent);
}

/* ---------- The split toggles ---------- */

/* Without JavaScript the toggles could do nothing, so they only appear once
   nhl.js has marked the slate. */
.tnhl-toggles {
	display: none;
}

.tnhl-js .tnhl-toggles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-block-end: 1rem;
}

.tnhl-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.tnhl-pill {
	appearance: none;
	margin: 0;
	padding: 0.4375rem 0.875rem;
	border: 1px solid var(--tnhl-line);
	border-radius: 6px;
	background: var(--tnhl-panel);
	color: var(--tnhl-ink);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.tnhl-pill:hover {
	border-color: var(--tnhl-ink-muted);
}

.tnhl-pill:focus-visible {
	outline: 2px solid var(--tnhl-accent);
	outline-offset: 2px;
}

.tnhl-pill[aria-pressed="true"] {
	background: var(--tnhl-accent);
	border-color: var(--tnhl-accent);
	color: var(--tnhl-on-accent);
}

/* The admin Share button (nhl-share.js adds it; visitors never see it).
   Pushed to the end of the row, away from the reader's pills. */
.tnhl-share-group {
	margin-inline-start: auto;
}

.tnhl-share:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Shown while Home/Away mixes the home team's home games with the away
   team's road games, so nobody reads it as one venue for both. */
.tnhl-toggles__warn {
	flex-basis: 100%;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid color-mix(in srgb, #c28a00 60%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, #c28a00 14%, transparent);
	font-size: 0.8125rem;
}

.tnhl-toggles__warn[hidden] {
	display: none;
}

/* ---------- The frozen bar (desktop) ---------- */

/*
 * On a desktop the strip and the toggles stay pinned while the reader scrolls
 * down to the second team. nhl.js sets --tnhl-sticky-top to the bottom of
 * whatever the theme fixes to the top of the window (the admin bar and the
 * site header, stacked), re-measured while scrolling so the bar follows a
 * header that hides itself, and --tnhl-bar-bg to the page's own background, so the pinned bar
 * covers the tables sliding under it. Phones keep the screen for the tables.
 */
@media (min-width: 900px) and (min-height: 600px) {
	.tnhl-js .tnhl-bar {
		position: sticky;
		top: var(--tnhl-sticky-top, 0px);
		z-index: 10;
		margin-inline: -0.5rem;
		padding: 0.5rem 0.5rem 0;
		background: var(--tnhl-bar-bg, #000);
	}

	/* An inset rule, not a border: a border would grow the bar by a pixel
	   the moment it pins, and nudge the page. */
	.tnhl-js .tnhl-bar.is-stuck {
		box-shadow: inset 0 -1px 0 var(--tnhl-line), 0 6px 12px -6px rgb(0 0 0 / 0.8);
	}

	.tnhl-js .tnhl-bar .tnhl-toggles {
		margin-block-end: 0;
		padding-block-end: 0.75rem;
	}

	.tnhl-js .tnhl-bar ~ .tnhl-game {
		margin-block-start: 1rem;
	}
}

/* ---------- The matchup lists ---------- */

/*
 * Two lists of skaters facing a top-five or bottom-five defense. In a narrow
 * column they sit above the game, side by side when there is room; in a
 * column wide enough for both rails and the game (see the end of this file)
 * they move out beside it. Each list scrolls on its own.
 */
.tnhl-matchups {
	display: grid;
	gap: 0.75rem;
	margin-block: 0.25rem 1rem;
}

.tnhl-rail {
	min-width: 0;
}

/* The hide/show line: only with JS, and only while the lists sit above the
   game (the rails rule below takes it away again). */
.tnhl-mu-bar {
	display: none;
}

.tnhl-js .tnhl-mu-bar {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.tnhl-mu-bar__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tnhl-muted);
}

.tnhl-matchups.is-collapsed .tnhl-rail {
	display: none;
}

.tnhl-panel.tnhl-rail__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	margin-block-end: 0;
}

.tnhl-rail--top .tnhl-rail__inner {
	border-inline-start-color: var(--tnhl-heat-1);
}

.tnhl-rail--bottom .tnhl-rail__inner {
	border-inline-start-color: var(--tnhl-heat-5);
}

.tnhl-rail .tnhl-panel__title {
	margin-block-end: 0.25rem;
}

/* One set of lists per window and venue; nhl.js shows the chosen one. The
   wrapper adds no box, so the list still fills the rail's flex column. */
.tnhl-mu-set {
	display: contents;
}

.tnhl-matchups [data-mu-split][hidden] {
	display: none;
}

.tnhl-rail__note {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--tnhl-ink-muted);
}

.tnhl-mu {
	max-height: 18rem;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--tnhl-line) transparent;
}

.tnhl-mu > li {
	margin: 0;
}

.tnhl-mu > li + li {
	border-block-start: 1px solid var(--tnhl-line);
}

.tnhl-mu__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 2.75rem;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.375rem 0.375rem 0.5rem;
	border-radius: 4px;
	color: var(--tnhl-ink);
	text-decoration: none;
	line-height: 1.2;
}

.tnhl-mu__row:hover,
.tnhl-mu__row.is-current {
	background: var(--tnhl-panel-alt);
	color: var(--tnhl-ink);
}

.tnhl-mu__row.is-current {
	box-shadow: inset 3px 0 0 var(--tnhl-accent);
}

.tnhl-mu__row:focus-visible {
	outline: 2px solid var(--tnhl-accent);
	outline-offset: -2px;
}

.tnhl-mu__who,
.tnhl-mu__nums {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tnhl-mu__name,
.tnhl-mu__who .tnhl-mu__sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tnhl-mu__name {
	font-size: 0.875rem;
	font-weight: 600;
}

.tnhl-mu__nums {
	align-items: flex-end;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.tnhl-mu__sub {
	font-size: 0.75rem;
	color: var(--tnhl-ink-muted);
}

.tnhl-mu__rank {
	padding: 0.25rem 0;
	border-radius: 4px;
	font-size: 0.8125rem;
	text-align: center;
}

/* ---------- The admin player lookup ----------
 *
 * Admins only (includes/lookup.php). Phone first: one column, a full-width
 * search box, a card per skater. Until nhl-lookup.js runs every card is
 * listed and shows all its games; once it runs (.is-ready) cards wait for a
 * search and a card shows 5 games until "Show all", which opens the whole
 * season in a box that scrolls on its own rather than lengthening the page.
 */
.tnhl-lookup__inner {
	border-inline-start-color: var(--tnhl-ink-muted);
}

.tnhl-lookup__input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--tnhl-line);
	border-radius: 6px;
	background: var(--tnhl-panel-alt);
	color: var(--tnhl-ink);
	/* 16px keeps iOS Safari from zooming the page on focus. */
	font: inherit;
	font-size: 1rem;
}

.tnhl-lookup__input:focus-visible {
	outline: 2px solid var(--tnhl-accent);
	outline-offset: 1px;
}

.tnhl-lookup__hint,
.tnhl-lookup__none {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--tnhl-ink-muted);
}

.tnhl-lookup__list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.tnhl-lookup__item[hidden] {
	display: none;
}

.tnhl-lookup__card {
	border-block-start: 1px solid var(--tnhl-line);
}

.tnhl-lookup__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-block: 0.25rem;
	cursor: pointer;
	list-style: none;
}

.tnhl-lookup__summary::-webkit-details-marker {
	display: none;
}

.tnhl-lookup__summary:focus-visible {
	outline: 2px solid var(--tnhl-accent);
	outline-offset: 2px;
}

.tnhl-lookup__badge {
	width: 1.875rem;
	height: 1.875rem;
	font-size: 0.5625rem;
}

.tnhl-lookup__name {
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tnhl-lookup__pos {
	font-size: 0.75rem;
	color: var(--tnhl-ink-muted);
}

.tnhl-lookup__line {
	margin-inline-start: auto;
	font-weight: 600;
}

.tnhl-lookup__tonight {
	margin: 0.125rem 0 0.5rem;
	font-size: 0.875rem;
	color: var(--tnhl-ink-muted);
}

.tnhl-lookup__games {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tnhl-lookup__game {
	display: grid;
	grid-template-columns: 4rem 3.5rem 4rem 3rem 1fr auto;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.3125rem;
	font-size: 0.9375rem;
}

.tnhl-lookup__sog {
	font-weight: 700;
}

/* Attempts sit beside the SOG, quieter: the line is on SOG. */
.tnhl-lookup__att {
	font-size: 0.8125rem;
	color: var(--tnhl-ink-muted);
	white-space: nowrap;
}

/* Against his line that night. Light enough for 7:1 on the dark panel. */
.tnhl-lookup__sog--over {
	color: #5bd68a;
}

.tnhl-lookup__sog--under {
	color: #ff7b7b;
}

.tnhl-lookup__rank {
	padding: 0.125rem 0;
	border-radius: 4px;
	text-align: center;
	font-size: 0.8125rem;
}

.tnhl-lookup__rank.tnhl-heat--1,
.tnhl-lookup__rank.tnhl-heat--2,
.tnhl-lookup__rank.tnhl-heat--3,
.tnhl-lookup__rank.tnhl-heat--4,
.tnhl-lookup__rank.tnhl-heat--5 {
	color: #fff;
	font-weight: 600;
}

.tnhl-lookup__rank.tnhl-heat--1 { background: var(--tnhl-heat-1); }
.tnhl-lookup__rank.tnhl-heat--2 { background: var(--tnhl-heat-2); }
.tnhl-lookup__rank.tnhl-heat--3 { background: var(--tnhl-heat-3); }
.tnhl-lookup__rank.tnhl-heat--4 { background: var(--tnhl-heat-4); }
.tnhl-lookup__rank.tnhl-heat--5 { background: var(--tnhl-heat-5); }

.tnhl-lookup__tag {
	font-size: 0.75rem;
	color: var(--tnhl-ink-muted);
}

.tnhl-lookup__date {
	font-size: 0.75rem;
	color: var(--tnhl-ink-muted);
	white-space: nowrap;
}

.tnhl-lookup__more {
	display: none;
	margin-block-start: 0.375rem;
}

.tnhl-lookup__note {
	margin: 0.5rem 0 0.625rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--tnhl-ink-muted);
}

.tnhl-lookup.is-ready .tnhl-lookup__more {
	display: inline-block;
}

.tnhl-lookup.is-ready .tnhl-lookup__card:not(.is-expanded) .tnhl-lookup__game--more {
	display: none;
}

/*
 * About ten rows tall; the rest scroll inside, not down the page. The list is
 * a scroll box from the start, not only once expanded: iOS Safari leaves rows
 * drawn before a box became scrollable stuck in place while the rest scroll.
 * Five rows never reach the max height, so a closed card shows no scrollbar.
 */
.tnhl-lookup.is-ready .tnhl-lookup__games {
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--tnhl-line) transparent;
}

.tnhl-lookup.is-ready .tnhl-lookup__card.is-expanded .tnhl-lookup__games {
	padding-inline-end: 0.25rem;
	border-block: 1px solid var(--tnhl-line);
}

/* A phone: the tag drops under the opponent, the date stays at the end. */
@container (max-width: 400px) {
	.tnhl-lookup__game {
		grid-template-columns: 3.5rem 3.25rem 1fr 2.75rem auto;
		row-gap: 0;
	}

	.tnhl-lookup__tag {
		grid-column: 3 / 5;
		grid-row: 2;
	}

	.tnhl-lookup__tag:empty {
		display: none;
	}
}

/* ---------- One game ---------- */

.tnhl-game {
	margin-block-end: 2rem;
}

/* Themes sometimes set display on section; hidden must still win. */
.tnhl-game[hidden] {
	display: none;
}

.tnhl-head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	margin-block-end: 0.75rem;
	border-radius: var(--tnhl-radius);
	background: var(--tnhl-panel);
	color: var(--tnhl-ink);
}

.tnhl-head__team {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.tnhl-head__team--home {
	flex-direction: row-reverse;
	text-align: end;
}

.tnhl-head__abbr {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.0625rem;
}

.tnhl-head__id {
	display: flex;
	flex-direction: column;
}

.tnhl-head__name {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.15;
}

.tnhl-head__record {
	font-size: 0.875rem;
	color: var(--tnhl-ink-muted);
}

.tnhl-head__center {
	text-align: center;
}

.tnhl-head__title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: inherit;
}

.tnhl-head__meta {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--tnhl-ink-muted);
}

/* ---------- Panels ---------- */

.tnhl-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
}

.tnhl-panel {
	padding: 0.75rem 0.75rem 0.75rem 1rem;
	margin-block-end: 0.75rem;
	border-inline-start: 4px solid var(--tnhl-accent);
	border-radius: var(--tnhl-radius);
	background: var(--tnhl-panel);
	color: var(--tnhl-ink);
}

.tnhl-pair > .tnhl-panel {
	margin-block-end: 0;
}

.tnhl-panel__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.tnhl-panel__title {
	margin: 0 0 0.625rem;
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: inherit;
}

.tnhl-panel__unit {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tnhl-ink-muted);
}

.tnhl-badge {
	font-size: 0.75rem;
	color: var(--tnhl-ink-muted);
}

/* ---------- Tables ---------- */

.tnhl-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Windows draws a bright system scrollbar otherwise. */
	scrollbar-width: thin;
	scrollbar-color: var(--tnhl-line) transparent;
}

/*
 * The rules below own every edge they draw, so a theme cannot add an edge we
 * did not ask for -- on the Rundown a stray theme border made every table
 * overflow by 1px and grow a scrollbar.
 */
.tnhl-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	color: inherit;
}

.tnhl-table th,
.tnhl-table td {
	padding: 0.4375rem 0.625rem;
	text-align: center;
	border: 0;
	border-block-end: 1px solid var(--tnhl-line);
	vertical-align: middle;
	white-space: nowrap;
	background: transparent;
	color: inherit;
}

.tnhl-table thead th {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tnhl-ink-muted);
	background: var(--tnhl-panel-alt);
}

.tnhl-table thead th abbr {
	text-decoration: none;
	cursor: help;
}

/* A sortable heading: nhl.js wraps its label in this button. */
.tnhl-sort {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
	cursor: pointer;
}

.tnhl-sort abbr {
	cursor: pointer;
}

.tnhl-sort:hover,
th[aria-sort] .tnhl-sort {
	color: var(--tnhl-ink);
}

.tnhl-sort:focus-visible {
	outline: 2px solid var(--tnhl-accent);
	outline-offset: 2px;
}

/* An arrow on every sortable heading, solid on the one in use. */
.tnhl-sort::after {
	content: "\2195";
	margin-inline-start: 0.25rem;
	opacity: 0.45;
}

th[aria-sort="descending"] .tnhl-sort::after {
	content: "\2193";
	opacity: 1;
	color: var(--tnhl-accent);
}

th[aria-sort="ascending"] .tnhl-sort::after {
	content: "\2191";
	opacity: 1;
	color: var(--tnhl-accent);
}

.tnhl-table tbody th {
	font-weight: 600;
	text-align: left;
}

.tnhl-table thead th:first-child {
	text-align: left;
}

.tnhl-table tbody tr:last-child th,
.tnhl-table tbody tr:last-child td {
	border-block-end: 0;
}

/* The price and book beside a line. */
.tnhl-cell__aside {
	margin-inline-start: 0.25rem;
	font-size: 0.75rem;
	color: var(--tnhl-ink-muted);
}

/* ---------- Heat ---------- */

.tnhl-table .tnhl-heat--1,
.tnhl-table .tnhl-heat--2,
.tnhl-table .tnhl-heat--3,
.tnhl-table .tnhl-heat--4,
.tnhl-table .tnhl-heat--5,
.tnhl-mu .tnhl-heat--1,
.tnhl-mu .tnhl-heat--2,
.tnhl-mu .tnhl-heat--3,
.tnhl-mu .tnhl-heat--4,
.tnhl-mu .tnhl-heat--5 {
	color: #fff;
	font-weight: 600;
}

.tnhl-table .tnhl-heat--1,
.tnhl-mu .tnhl-heat--1 {
	background: var(--tnhl-heat-1);
}

.tnhl-table .tnhl-heat--2,
.tnhl-mu .tnhl-heat--2 {
	background: var(--tnhl-heat-2);
}

.tnhl-table .tnhl-heat--3,
.tnhl-mu .tnhl-heat--3 {
	background: var(--tnhl-heat-3);
}

.tnhl-table .tnhl-heat--4,
.tnhl-mu .tnhl-heat--4 {
	background: var(--tnhl-heat-4);
}

.tnhl-table .tnhl-heat--5,
.tnhl-mu .tnhl-heat--5 {
	background: var(--tnhl-heat-5);
}

/* ---------- The shooters table ---------- */

/*
 * On a narrow column the shooters table scrolls sideways; the player column
 * stays put, so every number keeps the name it belongs to.
 */
.tnhl-table--shooters tbody th,
.tnhl-table--shooters thead th:first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	background: var(--tnhl-panel);
}

.tnhl-table--shooters thead th:first-child {
	background: var(--tnhl-panel-alt);
}

/* ---------- Footer ---------- */

.tnhl-footer {
	font-size: 0.8125rem;
	color: var(--tnhl-muted);
	margin-block-start: 2rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--tnhl-border);
}

.tnhl-disclaimer {
	font-size: 0.75rem;
	color: var(--tnhl-muted);
	margin-block: 0.5rem 0;
}

/* With no refresh time, the disclaimer takes the footer's place and rule. */
.tnhl-disclaimer:first-child,
:not(.tnhl-footer) + .tnhl-disclaimer {
	margin-block-start: 2rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--tnhl-border);
}

/* ---------- Wide containers: the two allow tables side by side ---------- */

@container (min-width: 720px) {
	.tnhl-pair {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- The matchup lists side by side, above the game ---------- */

@container (min-width: 600px) {
	.tnhl-matchups {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * ---------- Rails: the lists beside the game ----------
 *
 * Only when the column fits two rails and a full-width game (~810px). The
 * rails are positioned against .tnhl-main, which runs the height of the bar
 * and the game, and each list pins under the theme header while the page
 * scrolls, as the bar does. Absolute rather than grid columns: the bar's
 * sticky box is its parent, and a grid cell would only be one row tall.
 */
@container (min-width: 1530px) {
	.tnhl-main {
		--tnhl-rail: 21rem;
		position: relative;
		padding-inline: calc(var(--tnhl-rail) + 1.25rem);
	}

	.tnhl-matchups {
		display: contents;
	}

	/* Beside the game the lists push nothing down: always open, no button. */
	.tnhl-js .tnhl-mu-bar {
		display: none;
	}

	.tnhl-matchups.is-collapsed .tnhl-rail {
		display: block;
	}

	.tnhl-rail {
		position: absolute;
		inset-block: 0;
		width: var(--tnhl-rail);
	}

	.tnhl-rail--top {
		inset-inline-start: 0;
	}

	.tnhl-rail--bottom {
		inset-inline-end: 0;
	}

	.tnhl-panel.tnhl-rail__inner {
		position: sticky;
		top: calc(var(--tnhl-sticky-top, 0px) + 0.5rem);
		height: auto;
		/* Never past the bottom of a short game, either. */
		max-height: min(100%, calc(100vh - var(--tnhl-sticky-top, 0px) - 1rem));
	}

	.tnhl-mu {
		flex: 1 1 auto;
		max-height: none;
	}
}

/* ---------- Narrow containers ---------- */

@container (max-width: 520px) {
	.tnhl-head {
		gap: 0.5rem;
		padding: 0.75rem 0.5rem;
	}

	.tnhl-head__team,
	.tnhl-head__team--home {
		flex-direction: column;
		text-align: center;
		gap: 0.25rem;
	}

	.tnhl-head__abbr {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 0.875rem;
	}

	.tnhl-head__name {
		font-size: 0.875rem;
	}

	.tnhl-head__title {
		font-size: 1.25rem;
	}

	.tnhl-head__meta {
		font-size: 0.75rem;
	}

	.tnhl-panel {
		padding-inline: 0.625rem 0.5rem;
	}

	.tnhl-table {
		font-size: 0.875rem;
	}

	.tnhl-table th,
	.tnhl-table td {
		padding: 0.375rem 0.5rem;
	}
}