/**
 * Sophable League — front-end stylesheet.
 *
 * Uitgangspunten (zie README voor de volledige toelichting):
 * - Alle maten in rem/em, geen px voor tekst of containerbreedtes, zodat
 *   browserzoom tot 400% blijft werken zonder verlies van content.
 * - Kleurcombinaties zijn getest op ruim voldoende contrast (AA, en waar
 *   haalbaar AAA); status wordt nooit alleen met kleur weergegeven.
 * - Onder 42rem (~672px, en dus ook effectief bij hoge zoomniveaus) klapt
 *   elke .sl-tabel om naar gestapelde kaarten met zichtbare kolomlabels,
 *   zodat niemand horizontaal hoeft te scrollen.
 * - Focus-indicatoren zijn altijd zichtbaar; er is geen automatisch
 *   verversende/bewegende content.
 */

.sl-main *,
.sl-main *::before,
.sl-main *::after,
.sl-shortcode *,
.sl-shortcode *::before,
.sl-shortcode *::after {
	box-sizing: border-box;
}

.sl-main,
.sl-shortcode {
	/* Volgt het thema, licht of donker: alleen currentColor en mengsels daarvan, net als de kaartuitstraling
	   verderop. Eerder stond hier een vast licht palet (#1a1a1a op #ffffff): onleesbaar op een donker thema
	   (bv. Sophable zelf, dat standaard donker is) — zie ook de kaartuitstraling verderop in dit bestand. */
	--sl-kleur-tekst: currentColor;
	--sl-kleur-subtiel: color-mix(in srgb, currentColor 68%, transparent);
	--sl-kleur-rand: color-mix(in srgb, currentColor 45%, transparent);
	--sl-kleur-accent: #0a3d91;
	--sl-kleur-accent-tekst: #ffffff;
	--sl-kleur-focus: #b3480a;

	--sl-status-gepland-tekst: #6b4c00;
	--sl-status-gepland-bg: #fef6e0;
	--sl-status-positief-tekst: #0f5132;
	--sl-status-positief-bg: #d9f0e3;
	--sl-status-info-tekst: #0a3d91;
	--sl-status-info-bg: #dce8fc;
	--sl-status-negatief-tekst: #7a1220;
	--sl-status-negatief-bg: #fbdfe2;

	color: var(--sl-kleur-tekst);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 64rem;
	margin-inline: auto;
	padding-inline: 1rem;
}

.sl-main :is(h1, h2, h3, h4) {
	line-height: 1.25;
}

.sl-main a,
.sl-shortcode a {
	/* Not the accent colour: #0a3d91 as plain text is under 2:1 against a dark page (it was only ever tested against
	   white). Inheriting the surrounding text colour works on any theme, light or dark, and also fixes the "subtle"
	   text nested inside a link (color-mix(currentColor, …) was picking up this blue instead of the real text
	   colour). Links are still marked by their underline, never colour alone. */
	color: inherit;
	text-decoration-thickness: 0.125em;
	text-underline-offset: 0.15em;
}

/* Zichtbare focus-indicator voor alle interactieve elementen — nooit weggehaald. */
.sl-main :is(a, button, input, select, textarea):focus-visible,
.sl-shortcode :is(a, button, input, select, textarea):focus-visible {
	outline: 0.1875rem solid var(--sl-kleur-focus);
	outline-offset: 0.125rem;
}

.sl-main button,
.sl-main input,
.sl-main select {
	font: inherit;
}

.sl-speeldag__meta,
.sl-klassement__meta,
.sl-team__meta,
.sl-team-schema__meta,
.sl-team-schema__adres {
	color: var(--sl-kleur-subtiel);
}

.sl-team-schema__meta > *:not(:last-child)::after {
	content: ' · ';
}

.sl-speeldag__filter {
	padding: 0.75rem 1rem;
	border: 0.0625rem solid var(--sl-kleur-rand);
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--sl-kleur-accent) 6%, transparent);
}

.sl-team__logo {
	max-width: 8rem;
	height: auto;
}

.sl-leeg {
	font-style: italic;
	color: var(--sl-kleur-subtiel);
}

/* Visueel verborgen, maar beschikbaar voor schermlezers (bv. tabel-captions). */
.sl-main .screen-reader-text,
.sl-shortcode .screen-reader-text {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -0.0625rem;
}

/* --------------------------------------------------------------------- */
/* Skiplinks: visueel verborgen tot ze focus krijgen (toetsenbordgebruikers  */
/* springen zo direct naar de tabel van een specifieke zaal).               */
/* --------------------------------------------------------------------- */

.sl-skiplinks ul {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sl-skiplinks a {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sl-skiplinks a:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	display: inline-block;
	padding: 0.4rem 0.8rem;
	background: var(--sl-kleur-accent);
	color: var(--sl-kleur-accent-tekst);
	border-radius: 0.25rem;
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------------------- */
/* Statusbadge: altijd icoon + tekst, nooit kleur alleen                  */
/* --------------------------------------------------------------------- */

.sl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.65em;
	border-radius: 0.25em;
	font-weight: 700;
	font-size: 0.9em;
	border: 0.0625rem solid currentColor;
	white-space: nowrap;
}

.sl-status--gepland {
	color: var(--sl-status-gepland-tekst);
	background: var(--sl-status-gepland-bg);
}

.sl-status--gespeeld,
.sl-status--afgesloten {
	color: var(--sl-status-positief-tekst);
	background: var(--sl-status-positief-bg);
}

.sl-status--uitgesteld {
	color: var(--sl-status-info-tekst);
	background: var(--sl-status-info-bg);
}

.sl-status--geannuleerd {
	color: var(--sl-status-negatief-tekst);
	background: var(--sl-status-negatief-bg);
}

/* --------------------------------------------------------------------- */
/* Toegankelijke, responsieve tabel                                       */
/* --------------------------------------------------------------------- */

.sl-tabel {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1rem 2rem;
	font-variant-numeric: tabular-nums;
}

.sl-tabel caption {
	text-align: left;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.sl-tabel th,
.sl-tabel td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 0.0625rem solid var(--sl-kleur-rand);
	vertical-align: top;
}

.sl-tabel thead th {
	border-bottom-width: 0.1875rem;
}

.sl-tabel tbody tr:hover {
	background: color-mix(in srgb, var(--sl-kleur-accent) 8%, transparent);
}

/* Onder 42rem (en dus ook bij hoge browserzoom): tabel -> gestapelde kaarten.
   De ARIA table/row/columnheader/cell-rollen in de markup houden de
   tabelsemantiek voor schermlezers overeind, ook nu display niet meer
   table/table-row/table-cell is. */
@media (max-width: 42rem) {
	.sl-tabel,
	.sl-tabel thead,
	.sl-tabel tbody,
	.sl-tabel tr,
	.sl-tabel th,
	.sl-tabel td {
		display: block;
		width: 100%;
	}

	.sl-tabel thead {
		position: absolute;
		width: 0.0625rem;
		height: 0.0625rem;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
		padding: 0;
		margin: -0.0625rem;
	}

	.sl-tabel tbody tr {
		margin-bottom: 1rem;
		border: 0.0625rem solid var(--sl-kleur-rand);
		border-radius: 0.375rem;
		padding: 0.5rem 0.75rem;
	}

	.sl-tabel tbody th,
	.sl-tabel tbody td {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		column-gap: 1rem;
		padding: 0.4rem 0;
		border: none;
		text-align: right;
	}

	.sl-tabel tbody th[data-label]::before,
	.sl-tabel tbody td[data-label]::before {
		content: attr(data-label);
		font-weight: 700;
		text-align: left;
		margin-right: auto;
	}
}

/* --------------------------------------------------------------------- */
/* Programma/uitslagen op mobiel: de <table> (cel-voor-cel voorgelezen     */
/* door een schermlezer — zes stops per wedstrijd) wordt vervangen door    */
/* .sl-programma-mobiel, een lijst waarin elke wedstrijd in één keer       */
/* wordt voorgelezen (zie render_wedstrijd_mobiel_item() in                */
/* class-sl-render.php). Op desktop is het net andersom.                  */
/* --------------------------------------------------------------------- */

.sl-programma-mobiel,
.sl-programma-mobiel__koppen {
	display: none;
}

@media (max-width: 42rem) {
	.sl-tabel.sl-tabel--programma,
	.sl-tabel.sl-tabel--uitslagen {
		display: none;
	}

	.sl-programma-mobiel {
		display: block;
		list-style: none;
		margin: 0.5rem 0 1.5rem;
		padding: 0;
	}

	.sl-programma-mobiel__item {
		border-bottom: 0.0625rem solid var(--sl-kleur-rand);
	}

	.sl-programma-mobiel__item:last-child {
		border-bottom: none;
	}

	/* Tijd · Klasse · Wedstrijd · Score. Tijd krijgt precies genoeg voor
	   "10:00" (niet meer — anders oogt de afstand tot Klasse groter dan
	   die van Klasse tot Wedstrijd); de rest van de ruimte gaat naar de
	   teamnamen. Koppen en kaart delen dezelfde kolomindeling zodat ze
	   uitlijnen. */
	.sl-programma-mobiel__koppen,
	.sl-programma-mobiel__kaart {
		display: grid;
		grid-template-columns: 2.5rem 2rem 1fr 3.2rem;
		column-gap: 0.5rem;
		align-items: center;
	}

	.sl-programma-mobiel__koppen {
		padding: 0 0.5rem 0.4rem;
		margin-top: 0.5rem;
		border-bottom: 0.1875rem solid var(--sl-kleur-rand);
		font-size: 0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--sl-kleur-subtiel);
	}

	.sl-programma-mobiel__koppen span:nth-child(2) {
		text-align: center;
	}

	.sl-programma-mobiel__koppen span:last-child {
		text-align: right;
	}

	.sl-programma-mobiel__kaart {
		padding: 0.6rem 0.5rem;
		font-size: 0.8rem;
	}

	.sl-programma-mobiel__tijd {
		display: flex;
		flex-direction: column;
		color: var(--sl-kleur-subtiel);
		font-variant-numeric: tabular-nums;
	}

	.sl-programma-mobiel__klasse {
		justify-self: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.5rem;
		height: 1.5rem;
		padding: 0 0.3rem;
		border-radius: 0.35rem;
		background: var(--sl-status-info-bg);
		color: var(--sl-status-info-tekst);
		font-weight: 700;
	}

	.sl-programma-mobiel__teams {
		display: flex;
		flex-direction: column;
		min-width: 0;
		overflow-wrap: break-word;
	}

	.sl-programma-mobiel__thuis {
		font-weight: 700;
	}

	.sl-programma-mobiel__score {
		text-align: right;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* Pauze-kaart: alleen tijd + label, dus een eigen (kortere) kolomindeling
	   i.p.v. de 4-koloms tijd/klasse/wedstrijd/score-grid hierboven. */
	.sl-programma-mobiel__item--pauze .sl-programma-mobiel__kaart {
		grid-template-columns: 2.5rem 1fr;
	}

	/* Variant voor render_team_dag_programma() (eerstvolgende competitiedag
	   op de teampagina): tijd/zaal/wedstrijd i.p.v. tijd/klasse/wedstrijd/score
	   — geen scorekolom, en de zaal staat i.p.v. de klasse-badge, als gewone
	   tekst i.p.v. een pil (zaalnummers zijn geen korte code zoals een klasse). */
	.sl-programma-mobiel__koppen.sl-programma-mobiel--team,
	.sl-programma-mobiel--team .sl-programma-mobiel__kaart {
		grid-template-columns: 2.5rem 3.5rem 1fr;
	}

	.sl-programma-mobiel__zaal {
		justify-self: center;
		text-align: center;
		color: var(--sl-kleur-subtiel);
	}

	/* De generieke kop-uitlijning (span:last-child rechts, voor de
	   scorekolom) is voor deze variant onjuist — hier is de laatste kop
	   "Wedstrijd", geen getal. */
	.sl-programma-mobiel__koppen.sl-programma-mobiel--team span:last-child {
		text-align: left;
	}

	/* Variant voor render_team_dag_uitslagen() (uitslagen laatste
	   competitiedag op de teampagina): zelfde tijd/zaal/wedstrijd-indeling als
	   --team hierboven, plus de scorekolom weer erbij. */
	.sl-programma-mobiel__koppen.sl-programma-mobiel--team-uitslagen,
	.sl-programma-mobiel--team-uitslagen .sl-programma-mobiel__kaart {
		grid-template-columns: 2.5rem 3.5rem 1fr 3.2rem;
	}

	.sl-programma-mobiel__pauze-label {
		font-style: italic;
		color: var(--sl-kleur-subtiel);
	}

	/* Teamnamen in de wedstrijdkaart zijn links naar de teampagina, maar zien
	   er precies uit als de platte tekst van vroeger (zelfde kleur, geen
	   onderstreping; die verschijnt pas bij hover en focus). Het tikgebied is
	   met een onzichtbaar ::after wat groter gemaakt zonder de opmaak te
	   veranderen (WCAG 2.5.8). */
	.sl-programma-mobiel__teamlink {
		position: relative;
		color: inherit;
		text-decoration: none;
	}

	.sl-programma-mobiel__teamlink::after {
		content: "";
		position: absolute;
		inset: -0.15rem 0;
	}

	.sl-programma-mobiel__teamlink:hover,
	.sl-programma-mobiel__teamlink:focus-visible {
		text-decoration: underline;
	}
}

/* --------------------------------------------------------------------- */
/* Tussenstand op mobiel: dezelfde aanpak als de speeldagenlijst — elke     */
/* rij is in zijn geheel de link naar de teampagina (in plaats van een      */
/* cel-voor-cel voorgelezen tabelrij).                                     */
/* --------------------------------------------------------------------- */

.sl-tussenstand-mobiel {
	display: none;
}

@media (max-width: 42rem) {
	.sl-tabel.sl-tabel--tussenstand {
		display: none;
	}

	.sl-tussenstand-mobiel {
		display: block;
		list-style: none;
		margin: 0.5rem 0 1.5rem;
		padding: 0;
	}

	.sl-tussenstand-mobiel__item {
		border-bottom: 0.0625rem solid var(--sl-kleur-rand);
	}

	.sl-tussenstand-mobiel__item:last-child {
		border-bottom: none;
	}

	/* De link (teamnaam + basisstats) is de hele rij, net als bij
	   .sl-speeldagen-lijst__link — team_id zonder gepubliceerde teampagina
	   valt terug op een gelijk ogende <span> zonder link (zie
	   render_tussenstand_mobiel_lijst()). */
	.sl-tussenstand-mobiel__link {
		display: flex;
		flex-direction: column;
		padding: 0.6rem 0.5rem;
		font-size: 0.8rem;
		text-decoration: none;
	}

	a.sl-tussenstand-mobiel__link:hover,
	a.sl-tussenstand-mobiel__link:focus-visible {
		background: color-mix(in srgb, var(--sl-kleur-accent) 8%, transparent);
	}

	.sl-tussenstand-mobiel__team {
		display: block;
		font-weight: 700;
	}

	/* De overige statistieken (W/G/V/Voor/Tegen) zitten achter een losse
	   <details>-uitklapper, als sibling van de link hierboven — een <a> mag
	   geen interactieve content zoals <details> bevatten. Eigen chevron i.p.v.
	   de standaard driehoek-marker van <summary>, die ronddraait bij openen. */
	.sl-tussenstand-mobiel__meer summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.4rem 0.5rem 0.6rem;
		cursor: pointer;
		list-style: none;
		font-size: 0.75rem;
		color: var(--sl-kleur-subtiel);
	}

	.sl-tussenstand-mobiel__meer summary::-webkit-details-marker {
		display: none;
	}

	.sl-tussenstand-mobiel__meer summary::marker {
		content: "";
	}

	.sl-tussenstand-mobiel__meer summary:hover,
	.sl-tussenstand-mobiel__meer summary:focus-visible {
		background: color-mix(in srgb, var(--sl-kleur-accent) 8%, transparent);
	}

	.sl-tussenstand-mobiel__chevron {
		flex: 0 0 auto;
		width: 0.5rem;
		height: 0.5rem;
		margin-right: 0.15rem;
		border-right: 0.1875rem solid var(--sl-kleur-subtiel);
		border-bottom: 0.1875rem solid var(--sl-kleur-subtiel);
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.sl-tussenstand-mobiel__meer[open] .sl-tussenstand-mobiel__chevron {
		margin-right: 0;
		margin-top: 0.25rem;
		transform: rotate(225deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.sl-tussenstand-mobiel__chevron {
			transition: none;
		}
	}

	/* Elke statistiek is een gelijkwaardige cel — geen ervan krijgt een eigen
	   badge of uitzonderingsopmaak. Basisrij (gespeeld/saldo/punten) staat
	   altijd open; de rest zit achter de <details>-uitklapper hierboven. */
	.sl-tussenstand-mobiel__statgrid {
		display: grid;
		gap: 0.2rem;
		margin-top: 0.3rem;
	}

	.sl-tussenstand-mobiel__statgrid--basis {
		grid-template-columns: repeat(4, 1fr);
		max-width: 14rem;
	}

	.sl-tussenstand-mobiel__statgrid--meer {
		grid-template-columns: repeat(5, 1fr);
		padding: 0 0.5rem 0.6rem;
	}

	.sl-tussenstand-mobiel__statcel {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.sl-tussenstand-mobiel__statcel-label {
		font-size: 0.62rem;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--sl-kleur-subtiel);
	}

	.sl-tussenstand-mobiel__statcel-waarde {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.sl-tussenstand-mobiel__statcel-waarde--pos {
		color: var(--sl-status-positief-tekst);
	}

	.sl-tussenstand-mobiel__statcel-waarde--neg {
		color: var(--sl-status-negatief-tekst);
	}
}

/* --------------------------------------------------------------------- */
/* Topscorers op mobiel: zelfde aanpak als programma/tussenstand — de <li> */
/* (tabindex="-1" + aria-label) leest elke speler in één keer voor, de     */
/* zichtbare kaart is aria-hidden.                                        */
/* --------------------------------------------------------------------- */

.sl-topscorers-mobiel,
.sl-topscorers-mobiel__koppen {
	display: none;
}

@media (max-width: 42rem) {
	.sl-tabel.sl-tabel--topscorers {
		display: none;
	}

	/* De desktop-uitklapper (met zijn eigen "top 5 + tweede tabel"-opzet)
	   heeft op mobiel niets te doen — de kaartenlijst hieronder regelt dat
	   daar op zijn eigen manier. */
	.sl-topscorers-meer {
		display: none;
	}

	.sl-topscorers-mobiel__koppen {
		display: grid;
		grid-template-columns: 1.6rem 1fr 3rem;
		column-gap: 0.75rem;
		padding: 0 0.5rem 0.4rem;
		margin-top: 0.5rem;
		border-bottom: 0.1875rem solid var(--sl-kleur-rand);
		font-size: 0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--sl-kleur-subtiel);
	}

	.sl-topscorers-mobiel__koppen span:first-child {
		text-align: center;
	}

	.sl-topscorers-mobiel__koppen span:last-child {
		text-align: right;
	}

	.sl-topscorers-mobiel {
		display: block;
		list-style: none;
		margin: 0.5rem 0 1.5rem;
		padding: 0;
	}

	.sl-topscorers-mobiel__item {
		border-bottom: 0.0625rem solid var(--sl-kleur-rand);
	}

	.sl-topscorers-mobiel__item:last-child {
		border-bottom: none;
	}

	.sl-topscorers-mobiel__kaart {
		display: grid;
		grid-template-columns: 1.6rem 1fr 3rem;
		column-gap: 0.75rem;
		align-items: center;
		padding: 0.6rem 0.5rem;
		font-size: 0.8rem;
	}

	.sl-topscorers-mobiel__positie {
		justify-self: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.6rem;
		height: 1.6rem;
		border-radius: 0.35rem;
		background: var(--sl-status-info-bg);
		color: var(--sl-status-info-tekst);
		font-weight: 700;
	}

	.sl-topscorers-mobiel__midden {
		display: flex;
		flex-direction: column;
		min-width: 0;
		overflow-wrap: break-word;
	}

	.sl-topscorers-mobiel__speler {
		font-weight: 700;
	}

	.sl-topscorers-mobiel__onderschrift {
		color: var(--sl-kleur-subtiel);
	}

	.sl-topscorers-mobiel__doelpunten {
		text-align: right;
		font-weight: 700;
		font-size: 1rem;
		font-variant-numeric: tabular-nums;
	}

	/* "Nog N spelers"-uitklapper onderaan de top 5 — zelfde chevron-patroon
	   als de tussenstand. */
	.sl-topscorers-mobiel__meer-item {
		border-bottom: none;
	}

	.sl-topscorers-mobiel__meer summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.6rem 0.5rem;
		cursor: pointer;
		list-style: none;
		color: inherit;
		font-weight: 600;
		font-size: 0.8rem;
	}

	.sl-topscorers-mobiel__meer summary::-webkit-details-marker {
		display: none;
	}

	.sl-topscorers-mobiel__meer:hover summary {
		background: color-mix(in srgb, var(--sl-kleur-accent) 8%, transparent);
	}

	/* Opengeklapt: de knop zelf verhuist visueel naar onderaan, ná de net
	   zichtbaar geworden spelers, in plaats van ertussen te blijven staan.
	   (De volgorde in de broncode blijft ongewijzigd — dit is puur visueel.) */
	.sl-topscorers-mobiel__meer[open] {
		display: flex;
		flex-direction: column;
	}

	.sl-topscorers-mobiel__meer[open] summary {
		order: 2;
	}

	.sl-topscorers-mobiel__meer[open] .sl-topscorers-mobiel--genest {
		order: 1;
	}

	/* De tekst wisselt mee met de open/dicht-status: "Toon nog N spelers"
	   dicht, "Toon alleen top 5" open. */
	.sl-topscorers-mobiel__meer-tekst-open {
		display: none;
	}

	.sl-topscorers-mobiel__meer[open] .sl-topscorers-mobiel__meer-tekst-dicht {
		display: none;
	}

	.sl-topscorers-mobiel__meer[open] .sl-topscorers-mobiel__meer-tekst-open {
		display: inline;
	}

	.sl-topscorers-mobiel__chevron {
		flex: 0 0 auto;
		width: 0.5rem;
		height: 0.5rem;
		margin-right: 0.15rem;
		border-right: 0.1875rem solid var(--sl-kleur-accent);
		border-bottom: 0.1875rem solid var(--sl-kleur-accent);
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.sl-topscorers-mobiel__meer[open] .sl-topscorers-mobiel__chevron {
		margin-right: 0;
		margin-top: 0.25rem;
		transform: rotate(225deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.sl-topscorers-mobiel__chevron {
			transition: none;
		}
	}

	.sl-topscorers-mobiel--genest {
		margin: 0;
	}

	.sl-topscorers-mobiel--genest .sl-topscorers-mobiel__item:last-child {
		border-bottom: none;
	}
}

/* --------------------------------------------------------------------- */
/* Topscorers op desktop: top 5 in de hoofdtabel, de rest in een tweede     */
/* tabel achter een native <details>-uitklapper (op mobiel via de regel     */
/* hierboven verborgen — de kaartenlijst regelt dat daar zelf).            */
/* --------------------------------------------------------------------- */

/* Geen ruimte onder de eerste tabel wanneer er een vervolgtabel is. */
.sl-tabel--topscorers-top {
	margin-bottom: 0;
}

/* De vervolgtabel sluit direct aan: geen ruimte erboven, en de kop/caption
   blijven staan voor schermlezers maar zijn visueel verborgen, zodat de
   rijen gewoon lijken door te lopen vanuit de eerste tabel. */
.sl-tabel--topscorers-vervolg {
	margin-top: 0;
}

.sl-tabel--topscorers-vervolg caption,
.sl-tabel--topscorers-vervolg thead {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -0.0625rem;
}

/* Beide tabellen zijn twee losse <table>-elementen die anders elk hun eigen
   kolombreedte berekenen op basis van hún inhoud — met table-layout:fixed
   én dezelfde vaste breedtes op beide tabellen sluiten de kolommen (en dus
   de rijen) wél naadloos op elkaar aan. */
.sl-tabel--topscorers {
	table-layout: fixed;
}

/* Breedtes staan op de <col>-elementen (colgroup), niet op th/td: zo blijven
   ze ook gelden wanneer de thead van de vervolgtabel visueel verborgen is
   (position:absolute haalt een thead uit de gewone tabel-layoutberekening,
   een colgroup niet). Geadresseerd op de sl-tabel-col--<kolomsleutel>-klasse
   (zie SL_Render::render_tabel()), niet op positie: de kolommen "rugnummer"
   en "team" kunnen namelijk conditioneel ontbreken (render_topscorers_tabel()
   laat ze weg als geen van de spelers die gegevens heeft) — met
   col:nth-child() zou de "speler"-kolom dan per ongeluk de smalle breedte
   van de weggelaten kolom ernaast overnemen. */
.sl-tabel--topscorers col.sl-tabel-col--positie {
	width: 3rem;
}

.sl-tabel--topscorers col.sl-tabel-col--rugnummer {
	width: 6rem;
}

.sl-tabel--topscorers col.sl-tabel-col--doelpunten {
	width: 7rem;
}

.sl-tabel--topscorers th:last-child,
.sl-tabel--topscorers td:last-child {
	text-align: right;
}

.sl-topscorers-meer summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0.5rem 1rem;
	padding: 0.4rem 0;
	cursor: pointer;
	list-style: none;
	color: inherit;
	font-weight: 700;
}

.sl-topscorers-meer summary::-webkit-details-marker {
	display: none;
}

.sl-topscorers-meer__tekst-open {
	display: none;
}

.sl-topscorers-meer[open] .sl-topscorers-meer__tekst-dicht {
	display: none;
}

.sl-topscorers-meer[open] .sl-topscorers-meer__tekst-open {
	display: inline;
}

.sl-topscorers-meer__chevron {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 0.1875rem solid var(--sl-kleur-accent);
	border-bottom: 0.1875rem solid var(--sl-kleur-accent);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.sl-topscorers-meer[open] .sl-topscorers-meer__chevron {
	transform: rotate(225deg);
	margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.sl-topscorers-meer__chevron {
		transition: none;
	}
}

/* Opengeklapt: de knop verhuist visueel naar onderaan, ná de tweede tabel,
   in plaats van ertussen te blijven staan (zelfde idee als de mobiele
   variant hierboven). */
.sl-topscorers-meer[open] {
	display: flex;
	flex-direction: column;
}

.sl-topscorers-meer[open] summary {
	order: 2;
}

.sl-topscorers-meer[open] .sl-tabel--topscorers {
	order: 1;
}

/* --------------------------------------------------------------------- */
/* Eenvoudige lineaire lijstweergave (bv. [sl_tussenstand weergave="lijst"]) */
/* --------------------------------------------------------------------- */

.sl-lijst {
	padding-left: 1.5rem;
}

.sl-lijst li {
	margin-bottom: 0.5rem;
}

.sl-lijst__team {
	font-weight: 700;
}

/* --------------------------------------------------------------------- */
/* Archief-overzicht                                                      */
/* --------------------------------------------------------------------- */

.sl-tabel--archief a {
	display: inline-block;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
}

/* --------------------------------------------------------------------- */
/* Speeldagenlijst (bv. "Wedstrijdschema's" van een seizoen): datum boven   */
/* locatie, hele regel klikbaar naar het programma van die dag.            */
/* --------------------------------------------------------------------- */

/* Koppen boven de lijst (alleen op desktop; op mobiel heeft elke kaart al
   zijn eigen "Klasse"-label en spreken datum/locatie voor zich). */
.sl-speeldagen-lijst__koppen {
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	margin-top: 0.5rem;
	padding: 0 0.5rem 0.4rem;
	border-bottom: 0.1875rem solid var(--sl-kleur-rand);
	font-weight: 700;
}

.sl-speeldagen-lijst__koppen-datum,
.sl-speeldagen-lijst__koppen-locatie {
	flex: 1 1 11rem;
}

.sl-speeldagen-lijst__koppen-klasse {
	flex: 1 1 16rem;
}

@media (max-width: 42rem) {
	.sl-speeldagen-lijst__koppen {
		display: none;
	}
}

.sl-speeldagen-lijst {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

/* Dezelfde kaartuitstraling als de tabellen (zie "Kaartuitstraling" verderop): elke speeldag een afgerond kaartje,
   op elke schermbreedte. */
.sl-speeldagen-lijst__item {
	margin-bottom: 0.6rem;
	background: var(--sl-kleur-kaart);
	border: 0.0625rem solid var(--sl-kleur-kaartrand);
	border-radius: 1.125rem;
	overflow: hidden;
}

.sl-speeldagen-lijst__item:last-child {
	margin-bottom: 0;
}

.sl-speeldagen-lijst__link {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: flex-start;
	column-gap: 1rem;
	min-height: 2.75rem;
	padding: 0.85rem 1rem;
	text-decoration: none;
}

.sl-speeldagen-lijst__link:hover {
	background: color-mix(in srgb, var(--sl-kleur-accent) 8%, var(--sl-kleur-kaart));
}

/* Op desktop doet de wrapper zelf niet mee in de layout: datum en locatie
   blijven directe flex-items van de link (vaste kolombreedtes, zie hieronder). */
.sl-speeldagen-lijst__hoofd {
	display: contents;
}

/* Datum, locatie en klassementen krijgen elk een eigen kolom die meegroeit
   met de beschikbare breedte (zoals een tabel met width:100%) — zo lijnt
   alles netjes onder elkaar uit én wordt de volledige kaartbreedte benut,
   zonder een kolom hard tegen de rechterrand te duwen. */
.sl-speeldagen-lijst__datum,
.sl-speeldagen-lijst__locatie {
	flex: 1 1 11rem;
}

/* Geen eigen linkstijl (kleur/onderstreping) voor de datum: de hele kaart
   is de link, dus alleen de datum als "klikbaar" laten ogen zou misleidend
   zijn. */
.sl-speeldagen-lijst__datum {
	font-weight: 700;
	color: var(--sl-kleur-tekst);
}

.sl-speeldagen-lijst__locatie {
	color: var(--sl-kleur-subtiel);
}

/* Net als datum en locatie een eigen meegroeiende kolom, links uitgelijnd
   binnen die kolom — geen aparte uitlijning tegen de rechterrand. */
.sl-speeldagen-lijst__klassementen-wrap {
	flex: 1 1 16rem;
}

.sl-speeldagen-lijst__klasse-label {
	display: none;
}

.sl-speeldagen-lijst__klassementen {
	color: var(--sl-kleur-subtiel);
	font-size: 0.9em;
}

/* Volledige klassementnamen op desktop (ruimte genoeg); op smalle schermen
   de korte notatie (bv. "1e") in plaats daarvan. */
.sl-speeldagen-lijst__klassementen--kort {
	display: none;
}

/* Onder 42rem: twee kolommen naast elkaar — links datum+locatie gestapeld,
   rechts een "Klasse"-kopje met daaronder de afkortingen gestapeld. */
@media (max-width: 42rem) {
	.sl-speeldagen-lijst__link {
		align-items: flex-start;
		justify-content: space-between;
	}

	.sl-speeldagen-lijst__hoofd {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.sl-speeldagen-lijst__datum,
	.sl-speeldagen-lijst__locatie {
		flex: 0 0 auto;
	}

	.sl-speeldagen-lijst__klassementen-wrap {
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		gap: 0.15rem;
	}

	.sl-speeldagen-lijst__klasse-label {
		display: block;
		font-weight: 700;
		color: var(--sl-kleur-tekst);
	}

	/* Visueel verborgen (niet display:none): de korte notatie is voor
	   schermlezers gemarkeerd als aria-hidden, dus deze volledige naam moet
	   in de toegankelijkheidsboom blijven staan om te worden voorgelezen. */
	.sl-speeldagen-lijst__klassementen--vol {
		position: absolute;
		width: 0.0625rem;
		height: 0.0625rem;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
		padding: 0;
		margin: -0.0625rem;
	}

	.sl-speeldagen-lijst__klassementen--kort {
		display: inline;
	}
}

/* --------------------------------------------------------------------- */
/* Aanmeldformulier e-mailupdates ([sl_abonneren])                         */
/* --------------------------------------------------------------------- */

.sl-abonneren-formulier {
	max-width: 28rem;
}

.sl-abonneren-formulier label {
	font-weight: 700;
}

.sl-abonneren-email {
	width: 100%;
	padding: 0.5rem 0.625rem;
	border: 0.0625rem solid var(--sl-kleur-rand);
	border-radius: 0.25rem;
	/* No background/text colour of our own: the browser's native form-control styling already reads correctly
	   on a light or a dark page. */
}

.sl-abonneren-formulier fieldset {
	border: 0.0625rem solid var(--sl-kleur-rand);
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
	margin: 1rem 0;
}

.sl-abonneren-formulier fieldset p {
	margin: 0.4rem 0;
}

.sl-abonneren-formulier legend {
	font-weight: 700;
	padding: 0 0.375rem;
}

.sl-abonneren-formulier button {
	background: var(--sl-kleur-accent);
	color: var(--sl-kleur-accent-tekst);
	border: 0;
	border-radius: 0.25rem;
	padding: 0.6rem 1.25rem;
	font-weight: 700;
	cursor: pointer;
}

.sl-melding {
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
	border: 0.125rem solid transparent;
}

/* Nooit kleur als enige informatiedrager: elke melding begint met een
   teken (✓/✕), niet alleen met een achtergrondkleur. */
.sl-melding--success::before {
	content: '✓ ';
}

.sl-melding--error::before {
	content: '✕ ';
}

.sl-melding--success {
	color: var(--sl-status-positief-tekst);
	background: var(--sl-status-positief-bg);
	border-color: var(--sl-status-positief-tekst);
}

.sl-melding--error {
	color: var(--sl-status-negatief-tekst);
	background: var(--sl-status-negatief-bg);
	border-color: var(--sl-status-negatief-tekst);
}

/* --------------------------------------------------------------------- */
/* Agenda-abonnement (.ics)                                                */
/* --------------------------------------------------------------------- */

.sl-agenda {
	margin: 1rem 0;
}

.sl-agenda__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
}

/* Bewust met de wrapper-klasse ervoor: thema-koppen (h2) zijn anders veel te groot voor dit compacte blok. */
.sl-agenda .sl-agenda__kop {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

.sl-agenda__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* De links zien eruit als knoppen (het blijven wel echte links: ze openen een
   abonnement of starten een download). Randen van 0.125rem zorgen dat ze ook in
   Windows-hoogcontrastmodus als knop herkenbaar blijven. De zichtbare tekst staat
   vooraan in de toegankelijke naam, zoals WCAG 2.5.3 vraagt. */
.sl-agenda .sl-agenda__links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 0.125rem solid var(--sl-kleur-accent);
	border-radius: 0.25rem;
	background: var(--sl-kleur-accent);
	color: var(--sl-kleur-accent-tekst);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sl-agenda .sl-agenda__links li:last-child a {
	background: transparent;
	color: inherit;
}

.sl-agenda .sl-agenda__links a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sl-agenda__hulp {
	margin-top: 0.25rem;
	color: var(--sl-kleur-subtiel);
	font-size: 0.9375rem;
}

.sl-agenda__hulp summary {
	cursor: pointer;
}

.sl-agenda__hulp p {
	margin: 0.25rem 0 0;
}

.sl-tussenstand-noot {
	color: var(--sl-kleur-subtiel);
	font-size: 0.9375rem;
	margin-top: 0.5rem;
}

/* --------------------------------------------------------------------- */
/* Seizoenskiezer (team- en klassementspagina's)                           */
/* --------------------------------------------------------------------- */

.sl-seizoenkiezer {
	margin: 1rem 0 1.5rem;
}

.sl-seizoenkiezer__label {
	margin: 0 0 0.375rem;
	font-weight: 700;
}

.sl-seizoenkiezer__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-seizoenkiezer .sl-seizoenkiezer__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 0.125rem solid var(--sl-kleur-rand);
	border-radius: 0.25rem;
	background: transparent;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

/* Het gekozen seizoen: gevuld, vetgedrukt en met een vinkje — nooit alleen kleur. */
.sl-seizoenkiezer .sl-seizoenkiezer__link--gekozen {
	background: var(--sl-kleur-accent);
	color: var(--sl-kleur-accent-tekst);
	font-weight: 700;
}

.sl-seizoenkiezer .sl-seizoenkiezer__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------- */
/* Kaartuitstraling: elke rij een afgerond kaartje                        */
/* --------------------------------------------------------------------- */

.sl-main,
.sl-shortcode {
	/* Translucent tints over whatever the page's own background is, instead of mixing towards a fixed colour —
	   so it reads correctly on a light or a dark page, same as the rest of this file. */
	--sl-kleur-kaart: color-mix(in srgb, currentColor 4%, transparent);
	--sl-kleur-kaartrand: color-mix(in srgb, currentColor 14%, transparent);
}

/* De klasse in een tabel: hetzelfde vakje als op de kaarten. */
.sl-klasse-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.3rem;
	border-radius: 0.35rem;
	background: var(--sl-status-info-bg);
	color: var(--sl-status-info-tekst);
	font-weight: 700;
}

/* Op de telefoon: elke rij van programma, tussenstand en topscorers is een kaart. */
@media (max-width: 42rem) {
	.sl-programma-mobiel__item,
	.sl-tussenstand-mobiel__item,
	.sl-topscorers-mobiel__item {
		margin-bottom: 0.6rem;
		background: var(--sl-kleur-kaart);
		border: 0.0625rem solid var(--sl-kleur-kaartrand);
		border-radius: 1.125rem;
		overflow: hidden;
	}

	.sl-programma-mobiel__item:last-child,
	.sl-tussenstand-mobiel__item:last-child,
	.sl-topscorers-mobiel__item:last-child {
		border-bottom: 0.0625rem solid var(--sl-kleur-kaartrand);
	}

	.sl-programma-mobiel__item--pauze {
		background: transparent;
		border-color: transparent;
	}
}

/* Op een groot scherm blijft het een tabel, maar elke rij is een kaartje. */
@media (min-width: 42.0625rem) {
	.sl-tabel--programma,
	.sl-tabel--uitslagen,
	.sl-tabel--tussenstand,
	.sl-tabel--topscorers {
		border-collapse: separate;
		border-spacing: 0 0.5rem;
		margin-block: 0.5rem 2rem;
	}

	.sl-tabel--programma thead th,
	.sl-tabel--uitslagen thead th,
	.sl-tabel--tussenstand thead th,
	.sl-tabel--topscorers thead th {
		border-bottom: 0;
		color: var(--sl-kleur-subtiel);
		font-size: 0.8125rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		overflow-wrap: normal;
		padding: 0.25rem 0.5rem;
		text-transform: uppercase;
		word-break: keep-all;
	}

	.sl-tabel--programma tbody :is(th, td),
	.sl-tabel--uitslagen tbody :is(th, td),
	.sl-tabel--tussenstand tbody :is(th, td),
	.sl-tabel--topscorers tbody :is(th, td) {
		background: var(--sl-kleur-kaart);
		border-block: 0.0625rem solid var(--sl-kleur-kaartrand);
		border-bottom-width: 0.0625rem;
		font-size: 0.9375rem;
		padding: 0.85rem 0.5rem;
		vertical-align: middle;
	}

	.sl-tabel--programma tbody :is(th, td):first-child,
	.sl-tabel--uitslagen tbody :is(th, td):first-child,
	.sl-tabel--tussenstand tbody :is(th, td):first-child,
	.sl-tabel--topscorers tbody :is(th, td):first-child {
		border-inline-start: 0.0625rem solid var(--sl-kleur-kaartrand);
		border-radius: 1.125rem 0 0 1.125rem;
		color: var(--sl-kleur-subtiel);
		padding-inline-start: 1rem;
	}

	.sl-tabel--programma tbody :is(th, td):last-child,
	.sl-tabel--uitslagen tbody :is(th, td):last-child,
	.sl-tabel--tussenstand tbody :is(th, td):last-child,
	.sl-tabel--topscorers tbody :is(th, td):last-child {
		border-inline-end: 0.0625rem solid var(--sl-kleur-kaartrand);
		border-radius: 0 1.125rem 1.125rem 0;
		font-size: 1.0625rem;
		font-weight: 700;
		padding-inline-end: 1rem;
		text-align: right;
	}

	.sl-tabel--programma thead th:last-child,
	.sl-tabel--uitslagen thead th:last-child,
	.sl-tabel--tussenstand thead th:last-child {
		padding-inline-end: 1rem;
		text-align: right;
	}

	.sl-tabel--programma tbody tr:hover :is(th, td),
	.sl-tabel--uitslagen tbody tr:hover :is(th, td),
	.sl-tabel--tussenstand tbody tr:hover :is(th, td),
	.sl-tabel--topscorers tbody tr:hover :is(th, td) {
		background: color-mix(in srgb, var(--sl-kleur-accent) 8%, var(--sl-kleur-kaart));
	}

	.sl-tabel--programma tbody tr:hover,
	.sl-tabel--uitslagen tbody tr:hover,
	.sl-tabel--tussenstand tbody tr:hover,
	.sl-tabel--topscorers tbody tr:hover {
		background: transparent;
	}

	/* Teamnamen: gewone tekst die bij aanwijzen onderstreept wordt; het blijft een link. */
	.sl-tabel--programma tbody :is(th, td) a,
	.sl-tabel--uitslagen tbody :is(th, td) a,
	.sl-tabel--tussenstand tbody :is(th, td) a,
	.sl-tabel--topscorers tbody :is(th, td) a {
		font-weight: 600;
		text-decoration: none;
	}

	.sl-tabel--programma tbody :is(th, td) a:hover,
	.sl-tabel--uitslagen tbody :is(th, td) a:hover,
	.sl-tabel--tussenstand tbody :is(th, td) a:hover,
	.sl-tabel--topscorers tbody :is(th, td) a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	/* Standen en topscorers: de teamnaam of speler als gewone tekst, niet gedempt. */
	.sl-tabel--tussenstand tbody th,
	.sl-tabel--topscorers tbody th {
		color: var(--sl-kleur-tekst);
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	/* Topscorers: de vervolgtabel sluit aan op de eerste, met dezelfde tussenruimte als tussen twee rijen. */
	.sl-tabel--topscorers-top {
		margin-bottom: -0.5rem;
	}
}

/* ------------------------------------------------------------------------------------------------- */
/* Instelling "Weergave van tabellen": op een breed scherm terug naar compacte rijen zonder kaartjes.  */
/* Onder 42rem blijven het altijd kaarten (zie hierboven) — dat is daar geen stijlkeuze maar de manier */
/* om horizontaal scrollen te voorkomen, dus deze instelling raakt dat bewust niet.                    */
/* ------------------------------------------------------------------------------------------------- */

body.sl-weergave-tabel .sl-speeldagen-lijst__item {
	margin-bottom: 0;
	background: transparent;
	border: 0;
	border-bottom: 0.0625rem solid var(--sl-kleur-rand);
	border-radius: 0;
}

body.sl-weergave-tabel .sl-speeldagen-lijst__item:last-child {
	border-bottom: none;
}

body.sl-weergave-tabel .sl-speeldagen-lijst__link {
	padding: 0.6rem 0.5rem;
}

body.sl-weergave-tabel .sl-speeldagen-lijst__link:hover {
	background: color-mix(in srgb, var(--sl-kleur-accent) 8%, transparent);
}

@media (min-width: 42.0625rem) {
	body.sl-weergave-tabel :is(.sl-tabel--programma, .sl-tabel--uitslagen, .sl-tabel--tussenstand, .sl-tabel--topscorers) {
		border-collapse: collapse;
		border-spacing: 0;
		margin-block: 1rem 2rem;
	}

	body.sl-weergave-tabel :is(.sl-tabel--programma, .sl-tabel--uitslagen, .sl-tabel--tussenstand, .sl-tabel--topscorers) thead th {
		border-bottom: 0.1875rem solid var(--sl-kleur-rand);
		color: inherit;
		font-size: inherit;
		font-weight: 700;
		letter-spacing: normal;
		overflow-wrap: normal;
		padding: 0.6rem 0.75rem;
		text-transform: none;
		word-break: keep-all;
	}

	body.sl-weergave-tabel :is(.sl-tabel--programma, .sl-tabel--uitslagen, .sl-tabel--tussenstand, .sl-tabel--topscorers) tbody :is(th, td) {
		background: transparent;
		border-block: 0;
		border-bottom: 0.0625rem solid var(--sl-kleur-rand);
		font-size: inherit;
		padding: 0.6rem 0.75rem;
		vertical-align: top;
	}

	body.sl-weergave-tabel :is(.sl-tabel--programma, .sl-tabel--uitslagen, .sl-tabel--tussenstand, .sl-tabel--topscorers) tbody :is(th, td):first-child,
	body.sl-weergave-tabel :is(.sl-tabel--programma, .sl-tabel--uitslagen, .sl-tabel--tussenstand, .sl-tabel--topscorers) tbody :is(th, td):last-child {
		border-inline: 0;
		border-radius: 0;
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		padding-inline: 0.75rem;
		text-align: left;
	}

	body.sl-weergave-tabel :is(.sl-tabel--programma, .sl-tabel--uitslagen, .sl-tabel--tussenstand, .sl-tabel--topscorers) thead th:last-child {
		padding-inline-end: 0.75rem;
		text-align: left;
	}

	body.sl-weergave-tabel :is(.sl-tabel--programma, .sl-tabel--uitslagen, .sl-tabel--tussenstand, .sl-tabel--topscorers) tbody tr:hover :is(th, td) {
		background: color-mix(in srgb, var(--sl-kleur-accent) 8%, transparent);
	}

	body.sl-weergave-tabel .sl-tabel--topscorers-top {
		margin-bottom: 0;
	}
}