/*
 * Trinity NBA Rundown — front-end styles.
 *
 * Ported section by section from nfl-rundown's rundown.css (trun- -> tnr-),
 * aimed at the markup this plugin already renders. Everything is scoped under
 * .tnr-* so it cannot leak into the theme, and every color is a token declared
 * on .tnr-slate, so the theme's palette is never assumed. Team colors arrive
 * per game as custom properties set inline from the payload (render.php,
 * tnr_team_color_vars()); --tnr-away-ink and --tnr-home-ink come with them and
 * are black or white, whichever is readable on that color. Never hard-code
 * text over a team color — use the ink.
 *
 * Layout switches on the *container*, not the viewport: the shortcode drops
 * into whatever column a theme gives it, and a 640px column needs the phone
 * layout even on a desktop.
 *
 * There is deliberately no `prefers-color-scheme` block. Every color here is
 * relative to currentColor, a team color paired with its ink, or the page's
 * own background as read by rundown.js, so the page follows whatever theme
 * surrounds it — including Trinity's, which is dark regardless of the OS.
 */

.tnr-slate {
	/* Neutral fallbacks. A side whose color collided, or has none, lands here. */
	--tnr-away: #4a5568;
	--tnr-home: #2d3748;
	--tnr-away-ink: #ffffff;
	--tnr-home-ink: #ffffff;

	--tnr-border: color-mix(in srgb, currentColor 15%, transparent);
	--tnr-rule: color-mix(in srgb, currentColor 28%, transparent);
	--tnr-muted: color-mix(in srgb, currentColor 65%, transparent);
	--tnr-sunk: color-mix(in srgb, currentColor 4%, transparent);
	--tnr-gap: 1rem;
	--tnr-radius: 10px;

	container-type: inline-size;
	font-variant-numeric: tabular-nums;
	/* The shortcode is usually first in the post; claim the gap under the header. */
	margin-block-start: 2rem;
}

/*
 * The browser hides [hidden] with a user-agent `display: none`, and any
 * `display` an author sets beats it. Without this, a reader whose script never
 * ran would get the tab strip and the pills on screen, doing nothing.
 */
.tnr-toolbar[hidden],
.tnr-tablist[hidden],
.tnr-pills[hidden] {
	display: none;
}

.tnr-slate-title {
	font-size: 1.25rem;
	margin-block: 0 1rem;
}

/*
 * Expand all / Collapse all, above the games. `hidden` until rundown.js
 * unhides it -- see tnr_render_toolbar().
 */
.tnr-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-block-end: 0.75rem;
}

/*
 * Every property a theme's button styles might supply is set, since this sits
 * in post content. Color inherits, so it reads on a light or dark theme.
 */
.tnr-toolbar__all {
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	background: none;
	border: 1px solid var(--tnr-rule);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	/* The label swaps between two words of different width; don't jump. */
	min-width: 7.5em;
	transition: background-color 150ms ease;
}

.tnr-toolbar__all:hover {
	background: var(--tnr-sunk);
}

.tnr-toolbar__all:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.tnr-toolbar__all {
		transition: none;
	}
}

/* ---------- Game panels ---------- */

.tnr-game {
	border: 1px solid var(--tnr-border);
	border-radius: var(--tnr-radius);
	margin-block-end: var(--tnr-gap);
	overflow: hidden;
}

.tnr-game__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding: 0.875rem 2.25rem 0.875rem 1rem;
	cursor: pointer;
	font-weight: 600;
	/* A 4px rule in the home team's color, so panels are scannable by team. */
	border-inline-start: 4px solid var(--tnr-home);
	position: relative;
	list-style: none;
}

.tnr-game__summary::-webkit-details-marker {
	display: none;
}

/*
 * The chevron: the only thing on a closed slate that says a row opens. Drawn
 * from two borders so it inherits the theme's color, and pinned to the end so
 * a long matchup that wraps on a phone never strands it on a line of its own.
 */
.tnr-game__summary::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 1rem;
	margin-block: auto;
	width: 0.45em;
	height: 0.45em;
	color: var(--tnr-muted);
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.tnr-game[open] > .tnr-game__summary::after {
	transform: rotate(-135deg);
}

.tnr-game__summary:hover {
	background: var(--tnr-sunk);
}

.tnr-game__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.tnr-game__teams {
	flex: 1 1 auto;
}

.tnr-game__line,
.tnr-game__tip {
	font-weight: 400;
	color: var(--tnr-muted);
	font-size: 0.875rem;
}

/* flow-root keeps the team bar's top margin inside, so the rule runs unbroken. */
.tnr-game__body {
	display: flow-root;
	padding: 0 1rem 1rem;
	border-inline-start: 4px solid var(--tnr-home);
}

.tnr-venue,
.tnr-as-of {
	margin-block: 0.75rem 0;
	font-size: 0.75rem;
	color: var(--tnr-muted);
}

.tnr-venue + .tnr-as-of {
	margin-block-start: 0.125rem;
}

/* ---------- Team bar ---------- */

.tnr-teambar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.75rem;
	margin-block: 1rem;
}

.tnr-teambar__side {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"badge role"
		"badge name"
		"badge meta";
	align-items: center;
	column-gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 6px;
	background: var(--tnr-sunk);
	/* The team's color as a spine, not a fill: two near-black navies filled
	   side by side would be the collision all over again. */
	border-inline-start: 5px solid var(--tnr-side, var(--tnr-border));
}

.tnr-teambar__side--away {
	--tnr-side: var(--tnr-away);
}

.tnr-teambar__side--home {
	--tnr-side: var(--tnr-home);
}

/*
 * The team's abbreviation in a circle of its color, in place of a logo: the
 * page shows no league or team images. Letters are always white; a light
 * team color gets a darker fill (--tnr-*-badge, from tnr_team_color_vars()).
 * The ring keeps navy and near-black fills visible on the black page.
 */
.tnr-teambar__side--away {
	--tnr-side-badge: var(--tnr-away-badge, var(--tnr-away));
}

.tnr-teambar__side--home {
	--tnr-side-badge: var(--tnr-home-badge, var(--tnr-home));
}

.tnr-teambar__badge {
	grid-area: badge;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--tnr-side-badge, #3a3a3a);
	color: #fff;
	box-shadow: 0 0 0 2px var(--tnr-border);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

.tnr-teambar__role {
	grid-area: role;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tnr-muted);
}

.tnr-teambar__name {
	grid-area: name;
	font-weight: 700;
	line-height: 1.25;
}

.tnr-teambar__meta {
	grid-area: meta;
	font-size: 0.875rem;
	color: var(--tnr-muted);
}

/* ---------- Odds bar and records strip ---------- */

/*
 * Both strips are three columns. The market strip's five cells read team
 * total, team total, spread / total, moneyline -- the moneyline carries both
 * prices, so it takes two columns. The records strip's six cells are one team
 * per row: SU, ATS, O/U.
 *
 * No cell paints a background of its own: nfl-rundown's were `Canvas`, always
 * white, and put light text on white at 1.21:1 on this dark theme.
 * Separators are borders on each cell's start edges; the first row and column
 * draw none, so nothing doubles up with the container's border.
 */
.tnr-oddsbar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--tnr-border);
	border-radius: 6px;
	overflow: hidden;
	margin-block: 1rem;
}

.tnr-oddsbar--records {
	margin-block-end: 1.75rem;
}

.tnr-oddsbar--market .tnr-oddsbar__cell:nth-child(5) {
	grid-column: span 2;
}

.tnr-oddsbar__cell {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem;
	border-inline-start: 1px solid var(--tnr-border);
	border-block-start: 1px solid var(--tnr-border);
}

/* The records strip is three columns at every width. */
.tnr-oddsbar--records .tnr-oddsbar__cell:nth-child(3n + 1) {
	border-inline-start: 0;
}

.tnr-oddsbar--records .tnr-oddsbar__cell:nth-child(-n + 3) {
	border-block-start: 0;
}

/* The market strip is three columns only on a wide container; see below. */
@container not (max-width: 640px) {
	.tnr-oddsbar--market .tnr-oddsbar__cell:nth-child(3n + 1) {
		border-inline-start: 0;
	}

	.tnr-oddsbar--market .tnr-oddsbar__cell:nth-child(-n + 3) {
		border-block-start: 0;
	}
}

.tnr-oddsbar__label {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tnr-muted);
}

.tnr-oddsbar__value {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.tnr-oddsbar--records .tnr-oddsbar__value {
	font-size: 1rem;
}

/* Line movement, under the line itself rather than trailing off the end of it. */
.tnr-oddsbar__note {
	font-size: 0.75rem;
	color: var(--tnr-muted);
}

.tnr-oddsbar__label abbr,
.tnr-table thead th abbr,
.tnr-defense-strip abbr {
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
	cursor: help;
}

/*
 * The sample badge: last season's numbers, or a thin sample this season.
 * Small print beside what it qualifies, never competing with it.
 */
.tnr-badge {
	display: inline-block;
	padding: 0.0625rem 0.375rem;
	border: 1px solid var(--tnr-rule);
	border-radius: 0.75rem;
	font-size: 0.6875rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
	color: var(--tnr-muted);
	vertical-align: middle;
}

.tnr-module > .tnr-badge {
	margin-block-end: 0.75rem;
}

/* ---------- Tabs inside a game ---------- */

/*
 * One strip per game, `hidden` until rundown.js wires it (tnr_render_tabs()).
 * It scrolls sideways on one line rather than wrapping into ragged rows, and
 * fades at the edge so a clean cut never reads as the end of the strip. A
 * mask, not a gradient overlay, so it assumes nothing about what is behind it.
 */
.tnr-tablist {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--tnr-rule) transparent;
	border-block-end: 1px solid var(--tnr-rule);
	margin-block-end: 1.25rem;
	padding-inline-end: 2rem;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}

.tnr-tab {
	flex: 0 0 auto;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--tnr-muted);
	background: none;
	border: 0;
	border-block-end: 3px solid transparent;
	border-radius: 0;
	margin-block-end: -1px;
	padding: 0.625rem 0.875rem 0.5rem;
	cursor: pointer;
	white-space: nowrap;
	transition: color 150ms ease, border-color 150ms ease;
}

/* The theme fills `button:hover` and `button:focus` grey; claim every state. */
.tnr-tab:hover,
.tnr-tab:focus,
.tnr-tab:active {
	background: none;
	color: inherit;
}

/*
 * The selected tab is filled with the home team's color, matching the
 * panel's home-colored rule, with the ink computed for it. A fill, not a thin
 * underline, which vanished on this dark theme for near-black team colors.
 * Weight marks it too, so it never rests on color alone. After the hover rule
 * at the same specificity, so the fill survives the pointer resting on it.
 */
.tnr-tab[aria-selected="true"] {
	color: var(--tnr-home-ink);
	background: var(--tnr-home);
	font-weight: 700;
	border-radius: 5px 5px 0 0;
	border-block-end-color: var(--tnr-home);
	/* A faint edge in the ink keeps the tab's shape when the fill is the page. */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

/* Inset: on the selected tab currentColor is the ink, which may be black on a black page. */
.tnr-tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.tnr-tabpanel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tnr-tabpanel > :first-child {
	margin-block-start: 0;
}

/* ---------- Modules and tables ---------- */

.tnr-module {
	margin-block: 1.75rem;
}

.tnr-module__heading {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tnr-muted);
	margin-block-end: 0.625rem;
	padding-block-end: 0.375rem;
	border-block-end: 1px solid var(--tnr-rule);
}

/*
 * The border reset is not tidiness: Trinity's theme ships
 * `table, td, th { border: 1px solid }`, which pushed every table one pixel
 * past its box and drew a scrollbar under each one. These rules own every
 * edge they draw.
 */
.tnr-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.tnr-table th,
.tnr-table td {
	padding: 0.5rem 0.625rem;
	text-align: left;
	border: 0;
	border-block-end: 1px solid var(--tnr-border);
	vertical-align: baseline;
}

.tnr-table thead th {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tnr-muted);
	border-block-end-color: var(--tnr-rule);
	white-space: nowrap;
}

.tnr-table thead td {
	border: 0;
}

.tnr-table tbody th {
	font-weight: 600;
}

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

.tnr-table__team {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--tnr-muted);
}

/* Numbers right-align so magnitudes line up; the name column stays left. */
.tnr-table--stats td,
.tnr-table--dvp td,
.tnr-table--stats thead th,
.tnr-table--dvp thead th {
	text-align: right;
	white-space: nowrap;
}

.tnr-table--stats thead tr:last-child th:first-child,
.tnr-table--dvp thead th:first-child {
	text-align: left;
}

/*
 * The group row over a multi-group tab (zones, play types, tracking): each
 * group's label centred over its columns with its own underline, inset so
 * neighbouring groups' underlines never run together into one rule.
 */
.tnr-table thead th[scope="colgroup"] {
	text-align: center;
	border-block-end: 0;
	background: linear-gradient(var(--tnr-rule), var(--tnr-rule)) center bottom / calc(100% - 0.75rem) 2px no-repeat;
}

/* Each team's table says whose it is, filled with that team's color and ink. */
.tnr-stat-side {
	margin-block: 0 1.5rem;
}

.tnr-stat-side--away {
	--tnr-side: var(--tnr-away);
	--tnr-side-ink: var(--tnr-away-ink);
}

.tnr-stat-side--home {
	--tnr-side: var(--tnr-home);
	--tnr-side-ink: var(--tnr-home-ink);
}

.tnr-stat-side__heading {
	margin: 0;
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 5px 5px 0 0;
	background: var(--tnr-side, transparent);
	color: var(--tnr-side-ink, inherit);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

/* A player listed out or doubtful still shows, quieter. Color, not opacity:
   the pinned name cell must stay opaque. */
.tnr-player--out th,
.tnr-player--out td {
	color: var(--tnr-muted);
}

.tnr-table--stats tbody th {
	white-space: nowrap;
}

/* Under the name, so a status never widens the name column or wraps mid-word. */
.tnr-table tbody th .tnr-status {
	display: block;
	font-size: 0.6875rem;
}

/* The opposing defense, under the players: same columns, set apart. */
.tnr-defense th,
.tnr-defense td {
	border-block-start: 2px solid var(--tnr-rule);
	background: var(--tnr-sunk);
	font-size: 0.875rem;
}

.tnr-defense-strip {
	margin-block: 0.5rem 0;
	font-size: 0.8125rem;
	color: var(--tnr-muted);
}

/*
 * The defense's rank of 30 beside its value. 1-10 is the offense's good
 * matchup, 21-30 its hard one, as a tint toward transparent so it sits on
 * whatever the theme paints. The number is always printed, so a reader who
 * cannot separate green from red loses nothing.
 */
.tnr-rank {
	display: inline-block;
	min-width: 1.75em;
	margin-inline-start: 0.25rem;
	padding: 0 0.3em;
	border-radius: 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-align: center;
	color: var(--tnr-muted);
}

.tnr-rank--soft {
	background: color-mix(in srgb, #2e9e50 22%, transparent);
	color: inherit;
}

.tnr-rank--tough {
	background: color-mix(in srgb, #c63a32 22%, transparent);
	color: inherit;
}

/* Wide tables scroll inside their own box rather than widening the page. */
.tnr-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* The UA's track is white whatever the page is; take the theme's color. */
	scrollbar-width: thin;
	scrollbar-color: var(--tnr-rule) transparent;
}

/*
 * The name column stays put while the numbers scroll under it. It needs an
 * opaque background for that, and only rundown.js knows the page's (it sets
 * --tnr-page and this class), so without script nothing is pinned and the
 * table simply scrolls.
 */
.tnr-slate--pinned .tnr-table-wrap tr > :first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	background: var(--tnr-page);
	box-shadow: 1px 0 0 var(--tnr-border);
}

.tnr-slate--pinned .tnr-table-wrap .tnr-defense > :first-child {
	background: linear-gradient(var(--tnr-sunk), var(--tnr-sunk)), var(--tnr-page);
}

/*
 * Status carries weight, not just hue: the word is always printed. Each hue
 * is mixed toward currentColor so it tracks the page, not the OS: roughly
 * 5.7:1 on Trinity's black and above 11:1 on a light theme.
 */
.tnr-status {
	font-weight: 600;
}

.tnr-status--out,
.tnr-status--out-season,
.tnr-status--injured-reserve {
	color: color-mix(in srgb, #b3261e 65%, currentColor);
}

.tnr-status--doubtful {
	color: color-mix(in srgb, #a15c00 65%, currentColor);
}

.tnr-status--questionable,
.tnr-status--day-to-day {
	color: color-mix(in srgb, #6b5900 65%, currentColor);
}

/* ---------- Defense vs. position ---------- */

.tnr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-block: 0 1rem;
}

/* Every property a theme's button styles might supply is set; color inherits. */
.tnr-pill {
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	background: none;
	border: 1px solid var(--tnr-rule);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
}

.tnr-pill:hover,
.tnr-pill:focus,
.tnr-pill:active {
	background: var(--tnr-sunk);
	color: inherit;
}

.tnr-pill[aria-pressed="true"] {
	background: var(--tnr-home);
	color: var(--tnr-home-ink);
	border-color: var(--tnr-home);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

.tnr-pill:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tnr-dvp-window {
	margin-block-start: 1rem;
}

.tnr-dvp-window__heading {
	margin-block: 0 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tnr-muted);
}

/* ---------- Editorial ---------- */

.tnr-notes {
	margin-block: 1.5rem;
}

.tnr-notes__heading {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tnr-muted);
	margin-block-end: 0.5rem;
}

.tnr-notes p:last-child {
	margin-block-end: 0;
}

.tnr-notes__byline {
	margin-block: 1rem 1.5rem;
	font-style: italic;
	color: var(--tnr-muted);
}

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

.tnr-disclaimer {
	font-size: 0.75rem;
}

/* Under the odds credit, one footer, not two. */
.tnr-footer + .tnr-disclaimer {
	margin-block-start: 0.25rem;
	padding-block-start: 0;
	border-block-start: 0;
}

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

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

@container (max-width: 640px) {
	.tnr-teambar__badge {
		width: 2.375rem;
		height: 2.375rem;
		font-size: 0.75rem;
	}

	/*
	 * The injury table reflows into one card per player. Areas are named, not
	 * auto-flowed: each row is its own grid, and auto-sized columns put every
	 * player's name somewhere different down the list.
	 */
	.tnr-table--injuries thead {
		display: none;
	}

	.tnr-table--injuries tr {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"team player pos"
			"status status status"
			"note note note";
		gap: 0.125rem 0.5rem;
		padding-block: 0.625rem;
		border-block-end: 1px solid var(--tnr-border);
	}

	.tnr-table--injuries th,
	.tnr-table--injuries td {
		border: 0;
		padding: 0;
	}

	.tnr-table--injuries td:nth-child(1) {
		grid-area: team;
	}

	.tnr-table--injuries th {
		grid-area: player;
	}

	.tnr-table--injuries td:nth-child(3) {
		grid-area: pos;
		color: var(--tnr-muted);
		font-size: 0.8125rem;
	}

	.tnr-table--injuries td:nth-child(4) {
		grid-area: status;
	}

	.tnr-table--injuries td:nth-child(5) {
		grid-area: note;
		color: var(--tnr-muted);
		font-size: 0.875rem;
	}

	.tnr-table--injuries td:nth-child(5):empty {
		display: none;
	}

	/*
	 * The stat tables keep their shape and scroll (above). The pinned name
	 * cell wraps, and the status drops under the name, so the pin never takes
	 * half a phone.
	 */
	.tnr-table--stats tbody th {
		min-width: 8rem;
		white-space: normal;
	}

	/*
	 * Here every wide table overflows, so the edge fades to say there is more
	 * to the right. The end padding is what the fade lands on once scrolled
	 * all the way, so the last column is never the thing faded out. Only
	 * here: on a wide column it left every table short of its heading.
	 */
	.tnr-table-wrap {
		padding-inline-end: 1.5rem;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
	}

	.tnr-table--stats th,
	.tnr-table--stats td,
	.tnr-table--dvp th,
	.tnr-table--dvp td {
		padding: 0.4375rem 0.5rem;
	}

	/* Three columns of market data do not fit; two do, moneyline across both. */
	.tnr-oddsbar--market {
		grid-template-columns: repeat(2, 1fr);
	}

	.tnr-oddsbar--market .tnr-oddsbar__cell:nth-child(2n + 1) {
		border-inline-start: 0;
	}

	.tnr-oddsbar--market .tnr-oddsbar__cell:nth-child(-n + 2) {
		border-block-start: 0;
	}

	.tnr-oddsbar__value {
		font-size: 1rem;
	}
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.tnr-game__summary::after,
	.tnr-tab {
		transition: none;
	}
}

/* ---------- Print ---------- */

@media print {
	.tnr-game {
		break-inside: avoid;
		border-color: #999;
	}

	/*
	 * Expand everything: paper cannot be clicked open. Current Chrome hides a
	 * closed <details> through ::details-content, which `display` alone does
	 * not reach, so both are set.
	 */
	.tnr-game::details-content {
		content-visibility: visible;
		display: block;
	}

	.tnr-game:not([open]) > .tnr-game__body {
		display: flow-root;
	}

	.tnr-game__summary::after,
	.tnr-toolbar,
	.tnr-tablist,
	.tnr-pills {
		display: none;
	}

	.tnr-tabpanel[hidden],
	.tnr-dvp-window[hidden] {
		display: block;
	}

	.tnr-teambar__badge {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		box-shadow: none;
	}

	.tnr-teambar__side {
		background: none;
	}

	/* Filled headings print as solid blocks; keep the team's color as a rule. */
	.tnr-stat-side__heading {
		background: none;
		color: inherit;
		box-shadow: none;
		border-inline-start: 4px solid var(--tnr-side, #999);
		border-radius: 0;
	}

	.tnr-table-wrap {
		overflow-x: visible;
		padding-inline-end: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
}