/* Weer Top 10 — donker thema, gebaseerd op het "data resolutie / interval / parameters"
   exportpaneel-ontwerp (donkere navy kaart, muted teal-grijze sectiebalken, mintgroene accent). */
.wwt10-widget {
	--wwt10-bg: #1b2230;          /* kaartachtergrond */
	--wwt10-panel: #232b3d;       /* tabelachtergrond / inactieve knoppen */
	--wwt10-panel-alt: #2a3346;   /* hover / alt rij */
	--wwt10-row-a: #2b3550;
	--wwt10-row-b: #161b28;
	--wwt10-border: #333d54;
	--wwt10-text: #e9ecf2;
	--wwt10-text-dim: #8b93a7;
	--wwt10-header-bar: #5f8b97;  /* muted teal-grijze sectiebalk, zoals "DATA RESOLUTIE" */
	--wwt10-accent: #3fcda0;      /* mintgroen, actieve knop / OK / export */
	--wwt10-accent-text: #0d2420;
	--wwt10-min-color: #4a90d9;      /* blauw voor Min-vakken (achtergrond, met witte tekst erop) */
	--wwt10-min-color-dark: #1f3a52;
	--wwt10-max-color: #e2574c;      /* rood voor Max-vakken (achtergrond, met witte tekst erop) */
	--wwt10-max-color-dark: #4a2422;
	/* Aparte tekstkleur-variant voor min/max-waarden ín een tabelrij (bv. bij
	   Dagrecords en de Top 10 min/max-tabellen): daar staat de kleur zelf op
	   de (donkere) rijachtergrond i.p.v. andersom, dus die heeft andere
	   contrasteisen dan de vlakke -min-color/-max-color hierboven (die als
	   achtergrond met wítte tekst erop dienen). */
	--wwt10-min-text: #4a90d9;
	--wwt10-max-text: #e2574c;

	background: var(--wwt10-bg);
	color: var(--wwt10-text);
	border-radius: 12px;
	padding: 0 0 22px;
	max-width: 800px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
	overflow: hidden;
}

.wwt10-widget * {
	box-sizing: border-box;
}

.wwt10-widget.wwt10-theme-grijs {
	/* Alternatieve, lichtgrijze/tealkleurige stijl — gebaseerd op de klassieke
	   Cumulus "Records"-pagina-look — als tweede optie naast de blauwe
	   standaardstijl van Top 10. Kies via het shortcode-attribuut stijl="grijs". */
	--wwt10-bg: #3a3a3a;
	--wwt10-panel: #4a4a4a;
	--wwt10-panel-alt: #565656;
	--wwt10-row-a: #6e6e6e;
	--wwt10-row-b: #595959;
	--wwt10-border: #2a2a2a;
	--wwt10-text: #f2f2f2;
	--wwt10-text-dim: #c9c9c9;
	--wwt10-header-bar: #5f8b97;
	--wwt10-accent: #c3d426;
	--wwt10-accent-text: #1c2400;
	/* Het standaard blauw/rood (afgestemd op de donkere navy kaart van Top 10)
	   oogde te gedempt tegen deze grijze rijen — hier iets feller/lichter zodat
	   hoogste/laagste-waarden even duidelijk opvallen als bij Top 10/Records. */
	--wwt10-min-color: #6fc3ff;
	--wwt10-max-color: #ff6b5e;
	/* Los van de vlakke -min-color/-max-color hierboven (achtergrond +
	   witte tekst): dít zijn de tekstkleuren voor min/max-waarden die
	   rechtstreeks op een grijze rij staan (Dagrecords, Top 10 min/max-
	   tabellen). Het origineel (#6fc3ff/#ff6b5e) oogde daar te gedempt om
	   goed leesbaar te zijn tegen het grijs van de rijen — hier lichter/
	   feller zodat de waarden duidelijker opvallen. */
	--wwt10-min-text: #a8dcff;
	--wwt10-max-text: #ffab9e;
}

.wwt10-widget.wwt10-records-widget,
.wwt10-widget.wwt10-dagrecords-widget {
	/* Deze pagina's hebben meer/bredere kolommen per rij en krijgen daarom
	   sowieso wat meer ademruimte dan de standaardkaart. */
	max-width: 1100px;
}

.wwt10-widget:has(.wwt10-columns-quad) {
	/* De 4-koloms weergave (Absolute temperatuur) krijgt meer ademruimte dan de
	   normale 2-koloms Min/Max-weergave, zodat alle 4 tabellen deftig naast
	   elkaar passen i.p.v. krap tegen elkaar te staan. Enkel breder wanneer de
	   pagina die ruimte ook effectief heeft — op een smallere pagina/kolom
	   blijft de kaart gewoon meekrimpen zoals voorheen. */
	max-width: 1100px;
}

.wwt10-title {
	text-align: center;
	color: #fff;
	background: var(--wwt10-header-bar);
	padding: 12px 16px;
	margin-bottom: 20px;
}

.wwt10-title-main {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 2px;
}

.wwt10-title-sub {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 4px;
}

.wwt10-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	margin-bottom: 22px;
}

.wwt10-widget select.wwt10-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--wwt10-panel) !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23e9ecf2' d='M5.8 7.5h8.4L10 13.2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	color: var(--wwt10-text) !important;
	border: 1px solid var(--wwt10-border);
	border-radius: 999px;
	padding: 8px 30px 8px 16px;
	font-size: 13px;
	font-weight: 600;
	max-width: 100%;
	line-height: 1.4;
}

.wwt10-widget select.wwt10-select option {
	background-color: var(--wwt10-panel);
	color: var(--wwt10-text);
}

.wwt10-select:focus {
	outline: 2px solid var(--wwt10-accent);
}

.wwt10-widget button.wwt10-button.wwt10-ok {
	background-color: var(--wwt10-accent) !important;
	color: var(--wwt10-accent-text) !important;
	border: none;
	border-radius: 999px;
	padding: 8px 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: filter 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wwt10-button.wwt10-ok:hover {
	filter: brightness(1.08);
}

.wwt10-results {
	min-height: 60px;
	padding: 0 20px;
	/* Veiligheidsklep: de kolommen blijven altijd naast elkaar staan (zie
	   .wwt10-columns-quad hieronder). Past dat écht niet in de beschikbare
	   breedte, dan scrollt enkel dit gedeelte horizontaal i.p.v. dat de
	   inhoud wordt afgekapt of de kolommen worden gestapeld. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wwt10-loading,
.wwt10-nodata {
	text-align: center;
	color: var(--wwt10-text-dim);
	font-size: 13px;
	padding: 20px 0;
}

.wwt10-error {
	text-align: center;
	color: #e2574c;
	font-size: 13px;
	padding: 20px 0;
}

.wwt10-columns {
	display: grid;
	/* Altijd naast elkaar (vaste 2 kolommen) — geen auto-fit dat kolommen
	   onder elkaar zou zetten wanneer de kaart smal staat. Wordt het écht te
	   smal, dan krimpen de kolommen (zie .wwt10-column min-width: 0 hieronder)
	   en scrollt .wwt10-results zo nodig horizontaal in plaats van te stapelen. */
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.wwt10-columns-single {
	grid-template-columns: 1fr;
	max-width: 420px;
	margin: 0 auto;
}

.wwt10-columns-quad {
	/* Altijd 4 naast elkaar, ook op smalle schermen — zie toelichting hierboven. */
	grid-template-columns: repeat(4, 1fr);
}

.wwt10-column {
	/* Cruciale CSS Grid-fix: zonder dit weigeren grid-items te krimpen onder hun
	   intrinsieke inhoudsbreedte, waardoor brede tabelinhoud (bv. "26 augustus 2026"
	   + het "NIEUW"-label) de kolom buiten de kaart kon duwen en afgekapt werd. */
	min-width: 0;
}

.wwt10-col-heading {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #fff;
	background: var(--wwt10-header-bar);
	border-radius: 6px 6px 0 0;
	padding: 7px 8px;
}

.wwt10-col-heading.wwt10-side-min {
	background: var(--wwt10-min-color);
}

.wwt10-col-heading.wwt10-side-max {
	background: var(--wwt10-max-color);
}

.wwt10-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wwt10-panel);
	border-radius: 6px;
	overflow: hidden;
	font-size: 13px;
}

.wwt10-col-heading + .wwt10-table {
	border-radius: 0 0 6px 6px;
}

.wwt10-table thead th {
	background: var(--wwt10-panel-alt);
	color: var(--wwt10-text);
	font-weight: 600;
	text-align: left;
	padding: 8px 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 11px;
	border-bottom: 1px solid var(--wwt10-border);
}

.wwt10-table thead th:last-child {
	text-align: right;
}

.wwt10-table tbody td {
	padding: 7px 12px;
	border-top: 1px solid var(--wwt10-border);
	color: var(--wwt10-text);
}

.wwt10-table tbody td:first-child {
	/* Datum + "NIEUW"-badge blijven altijd op één lijn naast elkaar staan
	   (geen wrap). Past dat niet, dan scrollt .wwt10-results horizontaal
	   (zie hierboven) i.p.v. de badge onder de datum te duwen. */
	white-space: nowrap;
}

.wwt10-table tbody td:last-child {
	text-align: right;
	font-weight: 700;
	color: var(--wwt10-accent);
	white-space: nowrap;
}

.wwt10-table-min thead th {
	background: var(--wwt10-min-color-dark);
}

.wwt10-table-min tbody td:last-child {
	color: var(--wwt10-min-text);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.wwt10-table-max thead th {
	background: var(--wwt10-max-color-dark);
}

.wwt10-table-max tbody td:last-child {
	color: var(--wwt10-max-text);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.wwt10-table tbody tr:nth-child(odd) {
	background: var(--wwt10-row-a);
}

.wwt10-table tbody tr:nth-child(even) {
	background: var(--wwt10-row-b);
}

.wwt10-table tbody tr:hover {
	background: var(--wwt10-panel-alt);
}

.wwt10-table tbody tr.wwt10-row-recent {
	background: rgba(63, 205, 160, 0.18);
}

/* Het accentstreepje links staat op de cel zelf (niet meer op de <tr>): een
   box-shadow op een tabelrij wordt door sommige browsers onvoorspelbaar
   samen met border-collapse getekend, waardoor de lijn tussen rijen "hier en
   daar" kan wegvallen. Op de td zelf wordt zowel de rand als de schaduw
   betrouwbaar getekend, ongeacht welke rij ervoor of erna komt. */
.wwt10-table tbody tr.wwt10-row-recent td:first-child {
	box-shadow: inset 3px 0 0 var(--wwt10-accent);
}

.wwt10-table tbody tr.wwt10-row-recent:hover {
	background: rgba(63, 205, 160, 0.28);
}

.wwt10-new-badge {
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--wwt10-accent);
	color: var(--wwt10-accent-text);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

/* Bij een exact gedeeld record (twee dagen met precies dezelfde waarde) toont
   de Records-pagina bewust enkel de eerste dag, dus geen "gedeeld"-badge meer
   nodig hier. De "nieuw"-badge staat vóór de datum, op dezelfde regel (zie
   .wwt10-records-date-line) i.p.v. op een eigen regel eronder/erboven — dat
   hield de rij nodeloos hoger dan de andere rijen in de tabel. */
.wwt10-records-date .wwt10-new-badge {
	margin-left: 0;
}

.wwt10-extra {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--wwt10-text-dim);
}

.wwt10-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 18px;
	padding: 14px 20px 0;
	border-top: 1px solid var(--wwt10-border);
	font-size: 11px;
	color: var(--wwt10-text-dim);
}

.wwt10-legend {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wwt10-legend .wwt10-new-badge {
	margin-left: 0;
	vertical-align: baseline;
}

.wwt10-legend-text {
	white-space: nowrap;
}

.wwt10-copyright {
	white-space: nowrap;
}

.wwt10-records-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0 20px;
	margin-bottom: 22px;
}

.wwt10-widget button.wwt10-records-filter-btn {
	background-color: var(--wwt10-panel) !important;
	color: var(--wwt10-text) !important;
	border: 1px solid var(--wwt10-border);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wwt10-widget button.wwt10-records-filter-btn:hover {
	filter: brightness(1.1);
}

.wwt10-widget button.wwt10-records-filter-btn.is-active {
	background-color: var(--wwt10-accent) !important;
	color: var(--wwt10-accent-text) !important;
	border-color: var(--wwt10-accent);
}

.wwt10-records-cat {
	margin-bottom: 18px;
}

.wwt10-records-cat:last-child {
	margin-bottom: 0;
}

.wwt10-cat-heading {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wwt10-accent);
	background: #1c1c1c;
	border-radius: 6px 6px 0 0;
	padding: 8px 12px;
}

.wwt10-records-table {
	/* table-layout: fixed + vaste kolombreedtes (zie hieronder) zodat de
	   kolommen van élke categorie-tabel op de pagina exact even breed zijn en
	   dus onder elkaar uitlijnen — anders berekent elke <table> zijn
	   kolombreedtes onafhankelijk op basis van zijn eigen inhoud (bv. een
	   lange datum/badge in één categorie duwt enkel dáár de kolom breder). */
	width: 100%;
	table-layout: fixed;
	/* "collapse" (niet "separate"): bij "separate" krijgt elke cel een eigen,
	   onafhankelijk afgeronde breedte, en door de afronding van percentages
	   naar hele pixels kan er dan een haardun tussenruimte-lijntje ontstaan
	   tussen twee cellen — precies zichtbaar als een extra verticale lijn bij
	   elke kolomgrens. Bij "collapse" delen twee aangrenzende cellen exact
	   dezelfde rand, dus kan zo'n afrondingsnaad niet ontstaan. De
	   horizontale scheidingslijn tussen rijen gebeurt hieronder bewust via
	   box-shadow i.p.v. via border-top: box-shadow doet niet mee aan het
	   "samenvoegen" van randen dat border-collapse regelt, en werd — anders
	   dan een border-top — altijd betrouwbaar getekend, ongeacht de rij
	   ervoor of erna. */
	border-collapse: collapse;
	background: var(--wwt10-panel);
	border-radius: 0 0 6px 6px;
	overflow: hidden;
	font-size: 13px;
}

.wwt10-records-table tbody td {
	padding: 7px 12px;
	/* Een inset box-shadow i.p.v. border-top: die van elke cel wordt altijd
	   op exact dezelfde plek getekend, ongeacht de rij ervoor/erna, en is niet
	   afhankelijk van de rand-samenvoeging van border-collapse. */
	box-shadow: inset 0 1px 0 0 var(--wwt10-border);
	color: var(--wwt10-text);
}

/* Kolombreedtes staan op de <colgroup>/<col>-elementen (zie hieronder), niet
   hier op de cel zelf: .wwt10-records-date heeft display:flex, en een breedte
   die je op zo'n cel zet, geldt dan voor die flex-box i.p.v. voor de echte
   tabelkolom — de browser wikkelt de cel dan in een onzichtbare "anonieme"
   tabelcel die zelf gewoon op de inhoud smelt, met een lege strook als gevolg
   (precies het probleem dat hier optrad). Kolombreedtes via <col> werken wél
   altijd op de echte kolom, ongeacht het display-type van de cel erin. */
.wwt10-records-col-label {
	width: 44%;
}

.wwt10-records-col-value {
	width: 20%;
}

.wwt10-records-col-date {
	width: 36%;
}

.wwt10-records-label {
	white-space: normal;
}

.wwt10-records-value {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

.wwt10-records-unit {
	font-weight: 400;
	font-size: 11px;
	color: var(--wwt10-text-dim);
	margin-left: 3px;
}

/* De <td> zelf blijft een gewone tabelcel (geen display:flex): sommige
   browsers wikkelen een <td> met display:flex stilletjes in een onzichtbare
   "anonieme" tabelcel om de tabelstructuur overeind te houden, waardoor de
   échte celgrens niet meer exact samenvalt met wat je op het scherm ziet —
   dat bleek de oorzaak van zowel de eerder verkeerd berekende kolombreedte
   als een extra verticaal lijntje net op die kolomgrens. De flex-opmaak
   staat daarom op een gewone <div> ín de cel (.wwt10-records-date-inner),
   niet op de cel zelf. */
.wwt10-records-date {
	text-align: right;
	color: var(--wwt10-text-dim);
	font-size: 12px;
}

.wwt10-records-date-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

/* Groepeert de "nieuw"-badge en de begindatum op één regel (badge vóór de
   datum), zodat een gewoon record (zonder datumbereik) maar één regel hoog
   blijft — net als de andere rijen in de tabel. */
.wwt10-records-date-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Bij een reeks van meerdere dagen (bv. "Langste periode warme dagen") staat
   de einddatum op een eigen regel eronder i.p.v. samengeperst op één regel
   met een streepje ertussen. */
.wwt10-records-date-start,
.wwt10-records-date-end {
	white-space: nowrap;
}

.wwt10-records-table tbody tr:nth-child(odd) {
	background: var(--wwt10-row-a);
}

.wwt10-records-table tbody tr:nth-child(even) {
	background: var(--wwt10-row-b);
}

.wwt10-records-table tbody tr:hover {
	background: var(--wwt10-panel-alt);
}

.wwt10-records-table tbody tr.wwt10-row-recent {
	background: rgba(63, 205, 160, 0.18);
}

/* Zie toelichting bij .wwt10-table hierboven: het accentstreepje links staat
   op de eerste cel i.p.v. op de <tr>, zodat de scheidingslijn tussen rijen
   niet "hier en daar" kan wegvallen door een onbetrouwbare box-shadow op een
   tabelrij in combinatie met border-collapse. */
.wwt10-records-table tbody tr.wwt10-row-recent td:first-child {
	box-shadow: inset 3px 0 0 var(--wwt10-accent);
}

.wwt10-records-table tbody tr.wwt10-row-recent:hover {
	background: rgba(63, 205, 160, 0.28);
}

.wwt10-dagrecords-scroll {
	/* Deze tabel heeft 7 kolommen en past op smalle schermen niet altijd zonder
	   te krimpen — laat ze dan liever horizontaal scrollen dan afkappen. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 6px;
}

.wwt10-dagrecords-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	background: var(--wwt10-panel);
	font-size: 13px;
}

.wwt10-dagrecords-table .wwt10-col-heading-bar {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	background: var(--wwt10-header-bar);
	padding: 8px 12px;
}

.wwt10-dagrecords-table thead tr:last-child th {
	background: var(--wwt10-panel-alt);
	color: var(--wwt10-text);
	font-weight: 600;
	text-align: center;
	padding: 8px 10px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border-bottom: 1px solid var(--wwt10-border);
	white-space: nowrap;
}

.wwt10-dagrecords-table tbody td {
	padding: 6px 10px;
	border-top: 1px solid var(--wwt10-border);
	color: var(--wwt10-text);
	text-align: center;
	white-space: nowrap;
}

.wwt10-dr-day {
	font-weight: 700;
	color: var(--wwt10-text-dim);
}

.wwt10-dagrecords-table tbody tr:nth-child(odd) {
	background: var(--wwt10-row-a);
}

.wwt10-dagrecords-table tbody tr:nth-child(even) {
	background: var(--wwt10-row-b);
}

.wwt10-dagrecords-table tbody tr:hover {
	background: var(--wwt10-panel-alt);
}

.wwt10-dr-value {
	display: block;
	font-weight: 700;
}

.wwt10-dr-value.wwt10-dr-single {
	color: var(--wwt10-accent);
}

.wwt10-dr-value.wwt10-dr-hi {
	color: var(--wwt10-max-text);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.wwt10-dr-value.wwt10-dr-lo {
	color: var(--wwt10-min-text);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.wwt10-dr-year {
	font-weight: 400;
	color: var(--wwt10-text-dim);
	font-size: 11px;
}

.wwt10-dr-badge {
	margin-left: 4px;
	padding: 0 5px;
	font-size: 8px;
}

/* Geen breakpoint meer dat de kolommen laat stapelen: .wwt10-columns en
   .wwt10-columns-quad blijven altijd naast elkaar staan (zie hierboven) en
   krimpen/scrollen zo nodig. Enkel het lettertype/padding wordt op erg smalle
   schermen iets compacter. */
@media (max-width: 560px) {
	.wwt10-table,
	.wwt10-records-table {
		font-size: 12px;
	}
	.wwt10-table tbody td,
	.wwt10-table thead th,
	.wwt10-records-table tbody td {
		padding: 6px 8px;
	}
	/* Op smalle schermen weegt exacte kolomuitlijning tussen categorieën
	   minder zwaar dan ruimte voor de datum/badge — daarom hier terug een
	   automatische kolombreedte i.p.v. de vaste percentages. */
	.wwt10-records-table {
		table-layout: auto;
	}
	.wwt10-records-col-label,
	.wwt10-records-col-value,
	.wwt10-records-col-date {
		width: auto;
	}
}

/* =====================================================================
   Compacte kaart "Laatste nieuwe records" — [weer_laatste_records]
   Bewust een aparte, lichte kaartstijl (los van .wwt10-widget hierboven):
   dezelfde vormgeving als de compacte kaarten van de andere Kempen-plugins
   (bv. Brandgevaarmeter FWI), inclusief dezelfde gedeelde CSS-variabelen
   --wsk-card-width/--wsk-card-height, zodat deze kaart naast die andere
   kaarten op bv. een startpagina een strak, gelijkvormig geheel vormt. Wil
   je alle Kempen-kaarten samen een ander formaat geven, zet dan in je
   thema/Extra CSS: :root { --wsk-card-width: 400px; --wsk-card-height: 540px; }
   ===================================================================== */
.wwt10-compact-card {
	width: 100%;
	max-width: var(--wsk-card-width, 420px);
	min-height: var(--wsk-card-height, 520px);
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	text-align: center;
	background: #fafbfc;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 20px 16px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #222;
}

.wwt10-compact-card * {
	box-sizing: border-box;
}

.wwt10-compact-title {
	font-size: 1rem;
	font-weight: 600;
	opacity: 0.85;
	margin-bottom: 4px;
}

.wwt10-compact-subtitle {
	margin: 0 0 14px;
	font-size: 0.82rem;
	color: #888;
}

/* CSS-only tabbladen (Records / Dagrecords / Top 10 noteringen) in de
   compacte kaart — geen JS nodig: verborgen radio-knoppen bepalen welk
   paneel getoond wordt via :checked, en een <details>/<summary>-uitvouwmenu
   (i.p.v. een rij pillen die op smalle kaarten lelijk naar een tweede regel
   afbreekt) laat de bezoeker een ander tabblad kiezen. */
.wwt10-compact-tabs {
	position: relative;
	margin-top: 12px;
	text-align: left;
}

.wwt10-compact-tab-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wwt10-compact-tab-menu {
	margin-bottom: 14px;
}

.wwt10-compact-tab-summary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	list-style: none;
	padding: 7px 14px;
	border-radius: 999px;
	background: #f0f0f0;
	color: #444;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.wwt10-compact-tab-summary::-webkit-details-marker {
	display: none;
}

/* Duidelijke, effen pijlpunt (i.p.v. een klein grijs lettertekentje) zodat
   meteen zichtbaar is dat dit een uitklapbaar menu is. */
.wwt10-compact-tab-summary::after {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	opacity: 0.85;
	transition: transform 0.15s ease;
}

.wwt10-compact-tab-menu[open] > .wwt10-compact-tab-summary::after {
	transform: rotate(180deg);
}

.wwt10-compact-tab-summary:hover,
.wwt10-compact-tab-summary:focus {
	background: #e6e6e6;
}

/* Toont enkel de naam van het momenteel actieve tabblad in de samenvatting —
   welke van de drie zichtbaar is, hangt af van welke radio :checked is. */
.wwt10-compact-tab-current span {
	display: none;
}

.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(1):checked) .wwt10-compact-tab-current span:nth-of-type(1),
.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(2):checked) .wwt10-compact-tab-current span:nth-of-type(2),
.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(3):checked) .wwt10-compact-tab-current span:nth-of-type(3) {
	display: inline;
}

.wwt10-compact-tab-options {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 8px;
	padding: 6px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #eee;
}

.wwt10-compact-tab-options .wwt10-compact-tab-label {
	display: block;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	user-select: none;
	text-align: left;
	transition: background 0.15s ease, color 0.15s ease;
}

.wwt10-compact-tab-options .wwt10-compact-tab-label:hover {
	background: #e0e0e0;
}

.wwt10-compact-tab-radio:focus-visible ~ .wwt10-compact-tab-menu .wwt10-compact-tab-summary {
	outline: 2px solid #2563eb;
	outline-offset: 1px;
}

.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(1):checked) .wwt10-compact-tab-options .wwt10-compact-tab-label:nth-of-type(1),
.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(2):checked) .wwt10-compact-tab-options .wwt10-compact-tab-label:nth-of-type(2),
.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(3):checked) .wwt10-compact-tab-options .wwt10-compact-tab-label:nth-of-type(3) {
	background: #2563eb;
	color: #fff;
}

.wwt10-compact-panel {
	display: none;
}

.wwt10-compact-tab-radio:nth-of-type(1):checked ~ .wwt10-compact-panel-records {
	display: block;
}

.wwt10-compact-tab-radio:nth-of-type(2):checked ~ .wwt10-compact-panel-dagrecords {
	display: block;
}

.wwt10-compact-tab-radio:nth-of-type(3):checked ~ .wwt10-compact-panel-notering {
	display: block;
}

/* Uitvouwbaar stuk onderaan elk tabblad met de resterende records van de
   laatste 12 maanden — native <details>/<summary>, dus ook zonder JS. */
.wwt10-compact-more {
	margin-top: 10px;
}

.wwt10-compact-more > .wwt10-compact-list {
	margin-top: 10px;
}

.wwt10-compact-more-toggle {
	list-style: none;
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 600;
	color: #555;
	text-align: center;
	padding: 7px 10px;
	border-radius: 8px;
	border: 1px dashed #ccc;
	user-select: none;
}

.wwt10-compact-more-toggle::-webkit-details-marker {
	display: none;
}

.wwt10-compact-more-toggle::before {
	content: "▾ ";
}

.wwt10-compact-more[open] > .wwt10-compact-more-toggle::before {
	content: "▴ ";
}

.wwt10-compact-more-toggle:hover,
.wwt10-compact-more-toggle:focus {
	background: #f0f0f0;
	color: #333;
}

.wwt10-compact-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
	margin-top: 10px;
}

.wwt10-compact-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #ececec;
}

.wwt10-compact-row-recent {
	border-color: #3fcda0;
	background: rgba(63, 205, 160, 0.08);
}

.wwt10-compact-row-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wwt10-compact-value {
	font-weight: 700;
	font-size: 0.95rem;
	color: #222;
}

.wwt10-compact-unit {
	font-weight: 400;
	font-size: 0.75rem;
	color: #888;
}

.wwt10-compact-label {
	font-size: 0.75rem;
	color: #666;
}

.wwt10-compact-date {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	font-size: 0.72rem;
	color: #999;
	text-align: right;
	flex: none;
}

/* Bij een reeks van meerdere dagen (bv. "Langste periode warme dagen") staan
   begin- en einddatum elk op hun eigen regel i.p.v. samengeperst op één regel
   met een streepje ertussen. */
.wwt10-compact-date-start,
.wwt10-compact-date-end {
	white-space: nowrap;
}

.wwt10-compact-empty {
	color: #888;
	font-size: 0.9rem;
	padding: 16px;
	border: 1px dashed #ccc;
	border-radius: 8px;
	margin-top: 10px;
}

.wwt10-compact-link-wrap {
	margin: 16px 0 0;
}

.wwt10-compact-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.82rem;
	font-weight: 600;
	color: #555;
	background: #f0f0f0;
	border-radius: 999px;
	padding: 5px 14px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.wwt10-compact-link:hover,
.wwt10-compact-link:focus {
	background: #e2e2e2;
	color: #333;
}

.wwt10-compact-source {
	margin: 14px 0 0;
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.72rem;
	color: #999;
}

.wwt10-compact-source a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(153, 153, 153, 0.5);
}

.wwt10-compact-source a:hover,
.wwt10-compact-source a:focus {
	color: #555;
}

@media (prefers-color-scheme: dark) {
	.wwt10-compact-card {
		background: #232323;
		border-color: #333;
		color: #f2f2f2;
	}
	.wwt10-compact-row {
		background: #1c1c1c;
		border-color: #333;
	}
	.wwt10-compact-value {
		color: #f2f2f2;
	}
	.wwt10-compact-label,
	.wwt10-compact-unit {
		color: #aaa;
	}
	.wwt10-compact-subtitle,
	.wwt10-compact-date,
	.wwt10-compact-source {
		color: #999;
	}
	.wwt10-compact-link {
		background: #2a2a2a;
		color: #ddd;
	}
	.wwt10-compact-link:hover,
	.wwt10-compact-link:focus {
		background: #3a3a3a;
		color: #fff;
	}
	.wwt10-compact-tab-summary {
		background: #2a2a2a;
		color: #ddd;
	}
	.wwt10-compact-tab-summary:hover,
	.wwt10-compact-tab-summary:focus {
		background: #3a3a3a;
	}
	.wwt10-compact-tab-options {
		background: #1c1c1c;
		border-color: #3a3a3a;
	}
	.wwt10-compact-tab-options .wwt10-compact-tab-label {
		color: #ccc;
	}
	.wwt10-compact-tab-options .wwt10-compact-tab-label:hover {
		background: #2a2a2a;
	}
	.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(1):checked) .wwt10-compact-tab-options .wwt10-compact-tab-label:nth-of-type(1),
	.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(2):checked) .wwt10-compact-tab-options .wwt10-compact-tab-label:nth-of-type(2),
	.wwt10-compact-tabs:has(.wwt10-compact-tab-radio:nth-of-type(3):checked) .wwt10-compact-tab-options .wwt10-compact-tab-label:nth-of-type(3) {
		background: #3b82f6;
		color: #fff;
	}
	.wwt10-compact-more-toggle {
		color: #ccc;
		border-color: #444;
	}
	.wwt10-compact-more-toggle:hover,
	.wwt10-compact-more-toggle:focus {
		background: #2a2a2a;
		color: #fff;
	}
}