/**
 * Sportradar blocks — front end (also loaded in the editor).
 *
 * Neutral defaults; themes adjust through the custom properties below or their own CSS.
 * Uses native nesting, container queries, :has() and logical properties
 * (all baseline in current Chrome, Edge, Firefox and Safari 16.5+/17.2+).
 */

.sr-block {
	--sr-border: color-mix(in srgb, currentcolor 14%, transparent);
	--sr-stripe: color-mix(in srgb, currentcolor 4%, transparent);
	--sr-highlight: color-mix(in srgb, var(--wp--preset--color--primary, #2271b1) 14%, transparent);
	--sr-accent: var(--wp--preset--color--primary, #2271b1);
	--sr-muted: color-mix(in srgb, currentcolor 60%, transparent);
	--sr-live: #d63638;
	--sr-up: #00a32a;
	--sr-down: #d63638;
	--sr-radius: 4px;
	--sr-cell-pad: 0.5em 0.6em;
	/* Rank column; the pinned name column starts right after it. */
	--sr-rank-width: 2.75rem; /* rem: the same in header and body cells, which have different font sizes. */

	container-type: inline-size;
	container-name: sr;
	font-variant-numeric: tabular-nums;
	margin-block: 1.5em;

	&.is-compact {
		--sr-cell-pad: 0.25em 0.4em;
		font-size: 0.9em;
	}
}

/* Titles and collapsible sections (<details>) */

.sr-block .sr-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.5em;
	font-size: 1.15em;
	font-weight: 700;
}

.sr-block details > summary:is(.sr-title, .sr-subtitle) {
	cursor: pointer;
	list-style: none;

	&::-webkit-details-marker {
		display: none;
	}

	&::after {
		content: "";
		/* A flex item: without this a long, wrapping title squeezes the chevron to nothing. */
		flex-shrink: 0;
		inline-size: 0.5em;
		block-size: 0.5em;
		margin-inline-start: auto;
		border-inline-end: 2px solid currentcolor;
		border-block-end: 2px solid currentcolor;
		transform: rotate(45deg);
		transition: transform 0.2s;
	}
}

.sr-block details[open] > summary:is(.sr-title, .sr-subtitle)::after {
	transform: rotate(-135deg);
}

/*
 * Opening and closing slides (block, group, month, round). CSS only: ::details-content plus
 * interpolate-size, which lets the height animate to auto. Chromium 131+ animates; browsers
 * without interpolate-size (Safari, Firefox for now) open instantly, as before. Rounds shown by
 * "Show more" fade in. Off for people who prefer reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
	.sr-block details:has(> summary:is(.sr-title, .sr-subtitle)) {
		interpolate-size: allow-keywords;

		&::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
		}

		&[open]::details-content {
			block-size: auto;
		}
	}

	.sr-block .sr-round {
		transition: opacity 0.25s ease, translate 0.25s ease;

		@starting-style {
			opacity: 0;
			translate: 0 -0.5em;
		}
	}
}

/* Opacity on the label rather than a muted colour, so it works on themes' dark title bars too. */
.sr-block .sr-month.is-past > summary .sr-month__label {
	opacity: 0.7;
}

/* Group headings inside a block (groups, rounds, dates); each group collapses on its own. */
.sr-block .sr-subtitle {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: var(--sr-subtitle-pad, 0.75em 0.6em);
	border-block-end: 1px solid var(--sr-border);
	font-size: 1.05em;
	font-weight: 700;
}

.sr-block .sr-group + .sr-group,
.sr-block .sr-table-wrap + .sr-group,
.sr-block .sr-group + .sr-table-wrap {
	margin-block-start: 0.5em;
}

.sr-block .sr-group:not([open]) > .sr-subtitle {
	color: var(--sr-muted);
}

/*
 * The plugin's lists (podium, goals, three stars, bracket) are part of the layout. Themes style
 * content lists (".post-content ol": margins, bullets, li indents) with selectors that beat
 * ".sr-block .sr-x", so margins and markers are reset here, a step stronger: the repeated
 * attribute only adds specificity. Rows that need their own inline padding use two classes.
 */
.sr-block :is(ol, ul)[class*="sr-"][class] {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;

	& > li {
		margin: 0;
		list-style: none;
	}

	& > li::marker {
		content: none;
	}
}

/* Tables */

.sr-block .sr-table-wrap {
	margin: 0;
	overflow-x: auto;
}

/* Several tables in one block (all groups, schedule grouped by date/round, tennis rounds). */
.sr-block .sr-table-wrap + .sr-table-wrap {
	margin-block-start: 1em;
}

.sr-block .sr-table {
	inline-size: 100%;
	border-collapse: collapse;
	margin: 0;

	& th,
	& td {
		padding: var(--sr-cell-pad);
		border-block-end: 1px solid var(--sr-border);
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
	}

	& th {
		font-weight: 600;
		font-size: 0.85em;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		/* A multi-word heading ("Viim 10") wraps rather than running into the next one. */
		white-space: normal;
		overflow-wrap: normal;
	}

	& tbody tr:nth-child(even) {
		background: var(--sr-stripe);
	}

	& .sr-col-name,
	& .sr-col-player,
	& .sr-col-team,
	& .sr-col-tournament,
	& .sr-col-match,
	& .sr-col-players,
	& .sr-col-race,
	& .sr-col-podium {
		text-align: start;
		white-space: normal;
	}

	& .sr-col-points {
		font-weight: 700;
	}

	& .is-primary {
		font-weight: 700;
	}

	& tr.is-highlighted {
		background: var(--sr-highlight);
		font-weight: 600;
	}

	/* Divider where the outcome (promotion, playoffs, relegation…) changes. */
	& tr.sr-outcome-change > td {
		border-block-start: 2px solid currentcolor;
	}

	& tr.is-live .sr-col-result,
	& tr.is-live .sr-col-sets {
		color: var(--sr-live);
	}
}

/*
 * When a table scrolls sideways (narrow screens), the rank and name columns stay put and the
 * stats scroll under them. Sticky cells need an opaque background: the row's stripe or highlight
 * is layered over the card colour (--sr-sticky-bg, Canvas by default).
 */
.sr-block .sr-table {
	& tbody tr:nth-child(even) {
		--sr-row-tint: var(--sr-stripe);
	}

	& tbody tr.is-highlighted {
		--sr-row-tint: var(--sr-highlight);
	}

	& :is(th, td).sr-col-rank:first-child,
	& :is(th, td).sr-col-rank:first-child + :is(.sr-col-name, .sr-col-player) {
		position: sticky;
		z-index: 1;
		background: linear-gradient(var(--sr-row-tint, transparent), var(--sr-row-tint, transparent)), var(--sr-sticky-bg, Canvas);
	}

	& :is(th, td).sr-col-rank:first-child {
		inset-inline-start: 0;
		box-sizing: border-box;
		inline-size: var(--sr-rank-width);
		min-inline-size: var(--sr-rank-width);
		max-inline-size: var(--sr-rank-width);
	}

	& :is(th, td).sr-col-rank:first-child + :is(.sr-col-name, .sr-col-player) {
		inset-inline-start: var(--sr-rank-width);
		box-shadow: inset -1px 0 0 var(--sr-border);
		/* One line: rows stay even; if that's too wide the table scrolls and this column stays put. */
		white-space: nowrap;
	}

	/* Sticky header cells take the header's colour (themes often give thead one). */
	& thead tr {
		background-color: inherit;
	}

	& thead th.sr-col-rank:first-child,
	& thead th.sr-col-rank:first-child + :is(.sr-col-name, .sr-col-player) {
		background: inherit;
	}
}

/* A header colour to inherit when the theme sets none (no specificity, so themes win). */
:where(.sr-block .sr-table thead) {
	background-color: var(--sr-sticky-bg, Canvas);
}

/* Mouse-draggable horizontal scrollers (tables, bracket) while they overflow; see dragScroll(). */
.sr-block .sr-draggable {
	cursor: grab;
}

.sr-block .is-dragging {
	cursor: grabbing;
	user-select: none;

	& img {
		pointer-events: none;
	}
}

/* Snap points would fight the drag (each step would jump a whole round); the strip settles
   on a round when the drag and its glide end. More specific than the bracket's own snap rule. */
.sr-block .sr-bracket__stages.is-dragging {
	scroll-snap-type: none;
}

/* Outcome zones (playoffs, promotion, relegation…): a coloured rank badge and a legend under the
   table. "up" tones for zones at the top, "down" tones for zones that start further down. */
.sr-block {
	--sr-tone-up-0: #1e8e3e;
	--sr-tone-up-1: #2271b1;
	--sr-tone-up-2: #00838f;
	--sr-tone-up-3: #7e57c2;
	--sr-tone-down-0: #d63638;
	--sr-tone-down-1: #e26f00;
}

.sr-block .sr-tone--up-0 { --sr-tone: var(--sr-tone-up-0); }
.sr-block .sr-tone--up-1 { --sr-tone: var(--sr-tone-up-1); }
.sr-block .sr-tone--up-2 { --sr-tone: var(--sr-tone-up-2); }
.sr-block .sr-tone--up-3 { --sr-tone: var(--sr-tone-up-3); }
.sr-block .sr-tone--down-0 { --sr-tone: var(--sr-tone-down-0); }
.sr-block .sr-tone--down-1 { --sr-tone: var(--sr-tone-down-1); }

.sr-block abbr.sr-tip.sr-rank {
	text-decoration: none;
	cursor: default;
}

.sr-block .sr-rank {
	display: inline-block;
	min-inline-size: 1.7em;
	padding: 0.15em 0;
	border-radius: 3px;
	background: var(--sr-tone);
	color: #fff;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.3;
}

.sr-block .sr-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.25em;
	justify-content: center;
	margin: 0;
	padding: 0.6em var(--sr-cell-pad-inline, 0.6em);
	font-size: 0.85em;
	color: var(--sr-muted);
}

.sr-block .sr-legend__item {
	display: flex;
	gap: 0.4em;
	align-items: center;
}

.sr-block .sr-legend__swatch {
	inline-size: 0.8em;
	block-size: 0.8em;
	border-radius: 2px;
	background: var(--sr-tone);
}

/* Notes under a table (after the table, legend or pager): padded like the cells, so they line up
   with them and keep off the card's edges. */
.sr-block .sr-comments {
	margin: 0;
	padding: var(--sr-cell-pad);
	font-size: 0.85em;
	color: var(--sr-muted);
}

/* "Data updated" (i) (Registry::with_updated()): its own line at the bottom right, or at the end
   of the block's footer line (has-updated, moved there by the script). */
.sr-block .sr-updated {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0.25em var(--sr-cell-pad-inline, 0.6em) 0.5em;
	line-height: 1;
}

.sr-block .sr-updated__icon {
	display: inline-flex;
	color: var(--sr-muted);
	text-decoration: none;

	& svg {
		inline-size: 1.1em;
		block-size: 1.1em;
	}

	.has-updated > & {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: var(--sr-cell-pad-inline, 0.6em);
		translate: 0 -50%;
	}
}

.sr-block .has-updated {
	position: relative;
	padding-inline-end: 2.25em;

	/* The pager is centred: room on both sides keeps it so. */
	&.sr-pager {
		padding-inline-start: 2.25em;
	}
}

/*
 * Stats-table layout when there's room: fixed column widths for the name / date columns, and the
 * stat columns share the rest evenly instead of bunching up at the edge. Only up to 9 columns:
 * with more, even shares get narrower than the content (numbers run into each other), so wide
 * tables keep their natural widths. Narrow containers keep the automatic layout too (with
 * abbreviated names) and scroll only if the content really doesn't fit.
 */
@container sr (min-width: 520px) {
	.sr-block .sr-table:not(.sr-tennis, .sr-periods, .sr-team-stats, :has(thead tr > :nth-child(10))) {
		table-layout: fixed;

		/* No overflow clipping on th: it would cut off the heading tooltips. */

		& .sr-col-rank {
			inline-size: var(--sr-rank-width);
		}

		& .sr-col-name,
		& .sr-col-player {
			inline-size: 34%;
		}

		& .sr-col-team {
			inline-size: 24%;
		}

		& .sr-col-country {
			inline-size: 18%;
		}

		& .sr-col-date {
			inline-size: 7.5em;
		}

		& .sr-col-time {
			inline-size: 5em;
		}

		& .sr-col-result {
			inline-size: 7em;
		}

		& .sr-col-match,
		& .sr-col-race,
		& .sr-col-tournament,
		& .sr-col-podium {
			inline-size: auto;
		}

		/* Safety net: a one-line cell that still doesn't fit its share ends in "…" instead of
		   running into the next column (columns without a class of their own, long values). */
		& td {
			overflow: hidden;
			text-overflow: ellipsis;
		}

		& .sr-col-number,
		& .sr-col-position,
		& .sr-col-nationality,
		& .sr-col-age {
			inline-size: 3.5em;
		}

		/* Records ("7-2-1") and streaks ("V3") are wider than single numbers. */
		& :is(.sr-col-last_10, .sr-col-home_record, .sr-col-road_record) {
			inline-size: 4.5em;
		}

		& .sr-col-streak {
			inline-size: 3.5em;
		}

		& .sr-col-form {
			inline-size: 8.5em;
		}

		/*
		 * Rank, name and one or two stats (winter standings, short custom tables): even shares
		 * would give a lone points column half the table. The stats get a set width instead and
		 * the name takes the rest.
		 */
		&:has(thead .sr-col-rank):has(thead :is(.sr-col-name, .sr-col-player)):not(:has(thead tr > :nth-child(5))) {
			& thead th:not(.sr-col-rank, .sr-col-name, .sr-col-player, .sr-col-team) {
				inline-size: 7em;
			}

			& :is(.sr-col-name, .sr-col-player, .sr-col-team) {
				inline-size: auto;
			}
		}

		/* Long names truncate rather than wrap, keeping rows even. */
		& :is(td.sr-col-name, td.sr-col-player, td.sr-col-team) {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			/*
			 * The name sits in an inline-flex team/person box, which an ellipsis can't cut into:
			 * the box fills the cell instead, and the name (or its link) beside the flag truncates.
			 */
			& :is(.sr-team, .sr-person) {
				display: flex;
				min-inline-size: 0;
			}

			/* Only the name (or its link): a jersey number or ranking movement beside it keeps its size. */
			& :is(.sr-team, .sr-person) > :is(.sr-name, a) {
				min-inline-size: 0;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

/* Teams, people, flags */

.sr-block .sr-team,
.sr-block .sr-person {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	vertical-align: middle;

	&.is-winner {
		font-weight: 700;
	}
}

.sr-block .is-winner .sr-team {
	font-weight: 700;
}

.sr-block .sr-flag {
	/* Themes often make every img a block; a flag in a line of text has to stay in the line. */
	display: inline-block;
	inline-size: 1.25em;

	/* Standing in for a country code in text ("only [flag] athletes"): sits on the line like a letter. */
	&.sr-flag--text {
		vertical-align: -0.15em;
	}
	block-size: auto;
	aspect-ratio: 4 / 3;
	flex: none;
	box-shadow: 0 0 0 1px var(--sr-border);
}

.sr-block .sr-name--short {
	display: none;
}

/* Narrow containers (sidebars, mobile): abbreviations instead of full names. */
@container sr (max-width: 480px) {
	.sr-block .sr-table {
		--sr-cell-pad: 0.45em 0.3em;
	}

	.sr-block .sr-name--full {
		display: none;
	}

	.sr-block .sr-name--short {
		display: inline;
	}

	.sr-block .sr-table .sr-col-time,
	.sr-block .sr-tennis .sr-col-set {
		font-size: 0.9em;
	}
}

/*
 * A copy of a table's header row pinned to the top of the screen while the real one is scrolled
 * out of view (see floatingHeads()). A sideways-scrolling wrapper is also the sticky boundary,
 * so the real header can't stick to the page. Themes with a fixed top bar set --sr-sticky-top.
 */
.sr-block .sr-head-float {
	position: fixed;
	inset-block-start: var(--sr-sticky-top, 0px);
	z-index: 50;
	overflow: hidden;
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.12);

	&[hidden] {
		display: none;
	}

	/* Cell widths are copied from the real header, padding included. */
	& .sr-table {
		table-layout: fixed;
	}

	& th {
		box-sizing: border-box;
	}
}

/* Very narrow (e.g. a sidebar on a small screen): flags make way for the numbers. */
@container sr (max-width: 360px) {
	.sr-block .sr-table .sr-flag {
		display: none;
	}
}

.sr-block .sr-vs {
	margin-inline: 0.35em;
	color: var(--sr-muted);
}

.sr-block .sr-suffix,
.sr-block .sr-tiebreak {
	font-size: 0.8em;
	color: var(--sr-muted);
}

.sr-block .sr-live {
	display: inline-block;
	margin-inline-start: 0.35em;
	padding: 0 0.35em;
	border-radius: var(--sr-radius);
	background: var(--sr-live);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
}

/* Ranking movement after the name, inside the person box (Html::person() $after): same line. */
.sr-block .sr-movement {
	flex: none;
	font-size: 0.8em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;

	&.is-up {
		color: var(--sr-up);
	}

	&.is-down {
		color: var(--sr-down);
	}
}

/* Tooltips: CSS only, focusable for touch. <abbr class="sr-tip"> (team abbreviations, short names)
   gets the same look; browsers' own abbr underline is replaced by the tip's. */
.sr-block abbr.sr-tip {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	border: 0;
}

.sr-block .sr-tip {
	position: relative;
	cursor: help;
	text-decoration: underline dotted;
	text-underline-offset: 3px;

	&::after {
		content: attr(data-tip);
		position: absolute;
		inset-block-end: calc(100% + 6px);
		inset-inline-start: 50%;
		translate: -50% 0;
		z-index: 10;
		padding: 0.3em 0.6em;
		border-radius: var(--sr-radius);
		background: rgb(30 30 30 / 0.95);
		color: #fff;
		font-size: 0.8rem;
		font-weight: 400;
		text-transform: none;
		letter-spacing: normal;
		/* One line per line of the tip (no wrapping: this fallback has no width to wrap in). */
		white-space: pre;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s;
	}

	&:hover::after,
	&:focus-visible::after {
		opacity: 1;
	}
}

/*
 * Table wrappers scroll horizontally, which also clips anything above them, so tooltips in the
 * header open downwards over the table. First/last columns align to the edge instead of centering.
 */
.sr-block .sr-table thead .sr-tip::after {
	inset-block-end: auto;
	inset-block-start: calc(100% + 6px);
}

.sr-block .sr-table :is(th, td):first-child .sr-tip::after {
	inset-inline-start: 0;
	translate: none;
}

.sr-block .sr-table :is(th, td):last-child .sr-tip::after {
	inset-inline-start: auto;
	inset-inline-end: 0;
	translate: none;
}

/*
 * With the script, one shared tooltip on <body> replaces the ::after tips; it can't be clipped
 * by scroll wrappers or themes' overflow: hidden. Lives outside .sr-block, so it has its own
 * custom properties (set them on :root in a theme).
 */
.sr-tips .sr-block .sr-tip::after {
	content: none;
}

.sr-tooltip {
	/* Also a manual popover (top layer): undo the browser's popover box. */
	inset: auto;
	margin: 0;
	border: 0;
	overflow: visible;
	position: fixed;
	z-index: 100000;
	/* No minimum: as wide as the text, up to the screen's width on mobile. */
	max-inline-size: min(20rem, calc(100vw - 8px));
	padding: 0.3em 0.6em;
	border-radius: var(--sr-tooltip-radius, 4px);
	background: var(--sr-tooltip-bg, rgb(30 30 30 / 0.95));
	/* Multi-line tips (a form game: date / teams / score) keep their line breaks. */
	white-space: pre-line;
	color: var(--sr-tooltip-color, #fff);
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	pointer-events: none;

	&[hidden] {
		display: none;
	}
}

/* Tennis */

.sr-block .sr-tennis .sr-side {
	line-height: 1.6;
}

.sr-block .sr-pair-sep {
	color: var(--sr-muted);
}

.sr-block .sr-round {
	/* Many rounds of many matches: skip rendering off-screen ones. */
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

/* Long tables (rankings) */

.sr-block.sr-tennis-rankings tbody tr {
	content-visibility: auto;
	contain-intrinsic-size: auto 2.5em;
}

/* Table tools added by the script (search, paging, sort) */

/* Search above a table: the pager's control style, with room around it. */
.sr-block .sr-tools {
	display: flex;
	justify-content: flex-end;
	padding: 10px var(--sr-cell-pad-inline, 0.6em);

	& input {
		inline-size: min(100%, 16em);
		margin: 0;
		padding: 5px 8px;
		border: 1px solid var(--sr-pager-border, #ccc);
		border-radius: 4px;
		background: var(--sr-pager-bg, #fff);
		color: inherit;
		font: inherit;
		font-size: 0.9rem;
		line-height: 1.3;
		box-shadow: none;
	}

	& input:focus-visible {
		outline: 2px solid var(--sr-accent);
		outline-offset: 1px;
	}
}

/* Pager: rows per page, "1 – 10 / 510", first / previous / next / last. Plain buttons, not the theme's. */
.sr-block .sr-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 15px;
	align-items: center;
	justify-content: center;
	padding: 10px var(--sr-cell-pad-inline, 0.6em);
	font-size: 0.9em;

	&[hidden] {
		display: none;
	}

	& label {
		display: flex;
		gap: 5px;
		align-items: center;
		margin: 0;
	}
}

/* Small plain controls shared by the pager and the bracket's scroll buttons (not the theme's buttons). */
.sr-block :is(.sr-pager select, .sr-pager button, .sr-bracket__nav button) {
	margin: 0;
	padding: 3px 6px;
	border: 1px solid var(--sr-pager-border, #ccc);
	border-radius: 4px;
	background: var(--sr-pager-bg, #fff);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.3;
	text-transform: none;
	box-shadow: none;
}

.sr-block :is(.sr-pager, .sr-bracket__nav) button {
	min-inline-size: 2.2em;
	cursor: pointer;

	&:hover:not(:disabled) {
		background: var(--sr-pager-hover, #f5f5f5);
	}

	&:disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}
}

.sr-block .sr-pager__info {
	color: var(--sr-muted);
}

.sr-block .sr-pager__buttons {
	display: flex;
	gap: 4px;
}

.sr-block th[aria-sort] {
	cursor: pointer;
	user-select: none;

	&::after {
		content: "\00a0↕";
		opacity: 0.4;
		/* A bigger tap target: on touch the heading text opens its tooltip, the arrow sorts. */
		padding-inline: 0.15em 0.3em;
	}

	&[aria-sort="ascending"]::after {
		content: "\00a0↑";
		opacity: 1;
	}

	&[aria-sort="descending"]::after {
		content: "\00a0↓";
		opacity: 1;
	}
}

/* "Show more / less": a quiet text control with the accent-coloured chevron, not a theme button. */
.sr-block .sr-more {
	all: unset;
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin: 0.75em auto 0;
	padding: 0.5em 0.75em;
	cursor: pointer;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sr-more-color, color-mix(in srgb, currentcolor 75%, transparent));

	&[hidden] {
		display: none;
	}

	&:hover {
		color: inherit;
	}

	&:focus-visible {
		outline: 2px solid var(--sr-accent);
		outline-offset: 2px;
	}

	/* The same chevron as on collapsible headings, pointing down (up for "show less"). */
	&::after {
		content: "";
		flex-shrink: 0;
		inline-size: 0.45em;
		block-size: 0.45em;
		margin-block-start: -0.25em;
		border-inline-end: 2px solid var(--sr-accent);
		border-block-end: 2px solid var(--sr-accent);
		transform: rotate(45deg);
	}

	&[aria-expanded="true"]::after {
		margin-block: 0.3em 0;
		transform: rotate(-135deg);
	}
}

/* Bracket: horizontal scroll with snap; arrows are added by the script. */

.sr-block .sr-bracket {
	position: relative;
	padding-block-start: 0.75em;
}

/* Scroll buttons float in the bracket's top corner (over the column headings if need be). */
.sr-block .sr-bracket__nav {
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-end: 0.5em;
	z-index: 2;
	display: flex;
	gap: 4px;

	&[hidden] {
		display: none;
	}
}

/* The bracket's lists are layout, not lists: no inline padding either. */
.sr-block .sr-bracket :is(.sr-bracket__stages, .sr-bracket__ties, .sr-bracket__games) {
	padding-inline: 0;

	& > li {
		padding-inline-start: 0;
	}

	& > li::before {
		content: none;
	}
}

.sr-block .sr-bracket__lines {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 0;
	overflow: visible;
	pointer-events: none;
	fill: none;
	stroke: var(--sr-bracket-line, color-mix(in srgb, currentcolor 30%, transparent));
	stroke-width: 1.5;
}

.sr-block .sr-bracket__stages {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(13em, 1fr);
	gap: 1em;
	margin: 0;
	padding: 0 0 0.5em;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.sr-block .sr-bracket__stage {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.sr-block .sr-bracket__name {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	text-transform: uppercase;
}

.sr-block .sr-bracket__ties {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-around;
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-block .sr-bracket__tie {
	position: relative;
	z-index: 1;
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius);
	background: var(--sr-bracket-bg, Canvas);

	& summary {
		display: grid;
		gap: 0.35em;
		padding: 0.6em 0.75em;
		line-height: 1.35;
		cursor: pointer;
		list-style: none;
	}

	& summary::-webkit-details-marker {
		display: none;
	}

	& details[open] summary {
		border-block-end: 1px solid var(--sr-border);
	}
}

/* The bronze match sits under the final, captioned, with space above. */
.sr-block .sr-bracket__tie.is-bronze {
	margin-block-start: 1.5em;
}

.sr-block .sr-bracket__caption {
	position: absolute;
	inset-block-end: 100%;
	inset-inline-start: 0;
	margin-block-end: 0.2em;
	font-size: 0.75em;
	text-transform: uppercase;
	color: var(--sr-muted);
}

.sr-block .sr-bracket__team {
	display: flex;
	justify-content: space-between;
	gap: 0.5em;

	&.is-winner {
		font-weight: 700;
	}
}

.sr-block .sr-bracket__tbd {
	display: block;
	padding: 0.4em 0.6em;
	color: var(--sr-muted);
}

/* A series' games: date, teams and score on one line each. */
.sr-block .sr-bracket__games {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.5em 0.9em;
	margin: 0;
	padding: 0.7em 0.75em 0.8em;
	line-height: 1.35;
	list-style: none;
	font-size: 0.85em;
	white-space: nowrap;

	& li {
		display: contents;
	}

	& .sr-date {
		color: var(--sr-muted);
	}

	& .sr-score {
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	& .sr-vs {
		margin-inline: 0.3em;
	}

	& .sr-teams__team.is-winner {
		font-weight: 700;
	}
}

/* Form: the last five games as small W / L / D badges, newest first; a corner marks overtime.
   abbr.sr-form__game beats the tooltip's dotted underline (the badge is the hint). */
.sr-block abbr.sr-tip.sr-form__game {
	text-decoration: none;
}

.sr-block .sr-form {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
}

.sr-block .sr-form__game {
	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: 1.85em;
	block-size: 2em;
	border-radius: 3px;
	background: var(--sr-form-draw, #8c8f94);
	color: #fff;
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1;
	cursor: default;
	overflow: hidden;

	&.is-win {
		background: var(--sr-form-win, #1e8e3e);
	}

	&.is-loss {
		background: var(--sr-form-loss, #d63638);
	}

	&.is-extra::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		border-block-start: 0.45em solid var(--sr-form-extra, #f0b400);
		border-inline-start: 0.45em solid transparent;
	}
}

/* NHL: injuries and rosters */

/* Jersey number before the name, inside the person box (Html::person() $before): same line. */
.sr-block .sr-number {
	display: inline-block;
	flex: none;
	min-inline-size: 1.75em;
	color: var(--sr-muted);
	font-size: 0.85em;
}

.sr-block .sr-injury-comment {
	margin: 0.25em 0 0;
	font-size: 0.85em;
	color: var(--sr-muted);
	white-space: normal;
}

.sr-block .sr-status {
	font-size: 0.85em;
	font-weight: 600;

	&.sr-status--out,
	&.sr-status--out-for-season,
	&.sr-status--out-indefinitely {
		color: var(--sr-down);
	}

	&.sr-status--day-to-day {
		color: #996800;
	}
}

.sr-block .sr-injuries :is(th, .sr-col-injury, .sr-col-status) {
	white-space: normal;
}

/* NHL: box score */

.sr-block .sr-game__header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.5em 1em;
	padding: var(--sr-cell-pad);
	text-align: center;

	& .sr-team {
		font-weight: 700;
	}
}

.sr-block .sr-game__team--home {
	justify-self: end;
}

.sr-block .sr-game__team--away {
	justify-self: start;
}

.sr-block .sr-game__score {
	display: flex;
	gap: 0.35em;
	align-items: baseline;
	font-size: 2em;
	font-weight: 800;
	line-height: 1;
}

.sr-block .sr-game__dash {
	color: var(--sr-muted);
	font-weight: 400;
}

.sr-block .sr-game.is-live .sr-game__score {
	color: var(--sr-live);
}

.sr-block .sr-game__status {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.85em;
	color: var(--sr-muted);
}

.sr-block .sr-game__venue::before {
	content: " · ";
}

/* Narrow: team names above and below the score. */
@container sr (max-width: 420px) {
	.sr-block .sr-game__header {
		grid-template-columns: 1fr;
	}

	.sr-block .sr-game__team--home,
	.sr-block .sr-game__team--away {
		justify-self: center;
	}

	.sr-block .sr-game__score {
		justify-content: center;
	}
}

.sr-block .sr-periods .sr-col-total {
	font-weight: 700;
}

.sr-block .sr-game > * + * {
	margin-block-start: 1em;
}

.sr-block .sr-game__period {
	margin: 0.75em 0 0.25em;
	padding-inline: 0.6em;
	font-size: 0.85em;
	text-transform: uppercase;
	color: var(--sr-muted);
}

.sr-block .sr-goals > .sr-goal {
	display: grid;
	grid-template-columns: 3.5em 3.5em 1fr auto;
	gap: 0.5em;
	align-items: baseline;
	padding: var(--sr-cell-pad);
	border-block-end: 1px solid var(--sr-border);
}

.sr-block .sr-goal__time,
.sr-block .sr-goal__team {
	color: var(--sr-muted);
	font-size: 0.9em;
}

.sr-block .sr-goal__assists {
	margin-inline-start: 0.35em;
	color: var(--sr-muted);
	font-size: 0.85em;
}

.sr-block .sr-goal__tag {
	margin-inline-start: 0.35em;
	padding: 0 0.3em;
	border: 1px solid currentcolor;
	border-radius: var(--sr-radius);
	font-size: 0.7em;
	font-weight: 700;
}

.sr-block .sr-goal__score {
	font-weight: 700;
}

.sr-block .sr-team-stats {
	& td {
		inline-size: 25%;
		font-weight: 600;
	}

	& .sr-col-stat {
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		color: var(--sr-muted);
	}
}

.sr-block .sr-stars {
	counter-reset: star;

	& > .sr-star {
		display: flex;
		gap: 0.5em;
		align-items: baseline;
		padding: var(--sr-cell-pad);
		counter-increment: star;
	}

	& > .sr-star::before {
		content: counter(star) ".";
		font-weight: 700;
	}
}

.sr-block .sr-stars__team {
	color: var(--sr-muted);
	font-size: 0.9em;
}

/* Winter sports */

.sr-block .sr-table tr.sr-after-cut > td {
	border-block-start: 2px dashed var(--sr-border);
}

.sr-block .sr-winter .sr-col-run,
.sr-block .sr-winter .sr-col-handicap {
	color: var(--sr-muted);
	font-size: 0.9em;
}

.sr-block .sr-race {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	/* Like .sr-person: in a line of text (the results footer) the flag would set the baseline. */
	vertical-align: middle;
}

.sr-block .sr-race__discipline {
	display: block;
	font-size: 0.85em;
	color: var(--sr-muted);
}

.sr-block .sr-winter-calendar .sr-col-podium {
	text-align: start;
}

/* Rank in its own column, so a wrapped name lines up under the first line. */
.sr-block .sr-podium {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15em 0.4em;
	font-size: 0.9em;
	counter-reset: podium;

	/* A subgrid row rather than display: contents, which can drop the item's list semantics. */
	& > .sr-podium__item {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		counter-increment: podium;
	}

	& > .sr-podium__item::before {
		content: counter(podium) ".";
		color: var(--sr-muted);
		text-align: end;
	}
}

.sr-block .sr-best {
	display: block;
	font-size: 0.85em;
	font-weight: 600;

	/* A line of text ("Best [flag]: 16. E. Hallberg"): the name (no flag of its own here) on the text's baseline. */
	& .sr-person {
		vertical-align: baseline;
	}
}

.sr-block tr.is-cancelled {
	color: var(--sr-muted);
	text-decoration: line-through;

	& .sr-col-podium {
		text-decoration: none;
	}
}

/* A bracket series' games, opened by the script (the shared native popover). */
.sr-block.sr-popover {
	/* Not a size container: at 280px the narrow rules would abbreviate the team names. */
	container-type: normal;
	inset: auto;
	position: fixed;
	inline-size: 280px;
	max-inline-size: calc(100vw - 16px);
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-popover-bg, #fff);
	color: var(--sr-popover-color, #1d2327);
	font-size: 14px;
	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);

	& .sr-popover__title {
		margin: 0 0 10px;
		font-weight: 600;
	}

	& .sr-bracket__games {
		padding: 0;
		font-size: 13px;
	}
}

/* Errors (only shown to editors) */

.sr-notice {
	padding: 0.75em 1em;
	border-inline-start: 4px solid #dba617;
	background: #fcf9e8;
	color: #1e1e1e;
}