/**
 * Snelladers Frankrijk — kaartpagina.
 * Gebruikt de bestaande thema-variabelen uit :root (style.css).
 */

/* ── Volle breedte ────────────────────────────────────────────────────────────
 * Dit sjabloon heeft geen zijbalk: de kaart krijgt de hele contentbreedte. */
.content-area--breed {
	grid-template-columns: 1fr;
}

/* HIER STOND DE OPMAAK VAN DE GERELATEERDE ARTIKELEN, en die is weg omdat het
 * blok zelf weg is: page-laadpalen.php rendert ze sinds 26-08-2026 niet meer (zie
 * de map-app-sectie onderaan). Dat scheelde vijftig regels raster- en
 * kolomopmaak die alleen bestonden om vier kaartjes te tonen die daarna toch op
 * display:none gingen. `.content-area--breed` blijft: die klasse staat op deze
 * pagina en zet de zijbalkkolom uit. */

/* Alleen zichtbaar voor schermlezers. */
.lp-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* ── Samenvattingscijfers ─────────────────────────────────────────────────── */
.lp-cijfers {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: .75rem;
	margin: 1.5rem 0;
}

.lp-cijfer {
	background: #f5f7f9;
	border-radius: 8px;
	padding: .9rem .75rem;
	text-align: center;
}

.lp-cijfer-getal {
	display: block;
	font-family: var( --font-heading, sans-serif );
	font-weight: 800;
	font-size: 1.65rem;
	line-height: 1.1;
	color: var( --color-primary, #1982d1 );
}

.lp-cijfer-getal small { font-size: .95rem; font-weight: 700; }

.lp-cijfer-label {
	display: block;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #5a6b7b;
	margin-top: .2rem;
}

/* ── Filterblok ───────────────────────────────────────────────────────────────
 * Mobile first: op een telefoon zit alles achter één knop van ~44px, zodat de
 * kaart bovenaan blijft. Vanaf 768px staat het blok altijd open en verdwijnt de
 * knop (laadpalen.js zet het 'open'-attribuut per schermbreedte). */
.lp-filterblok {
	margin: 0 0 .75rem;
	border: 1px solid #dde3e9;
	border-radius: 8px;
	overflow: hidden;
}

.lp-filterknop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .7rem .9rem;
	background: #f5f7f9;
	font-family: var( --font-heading, sans-serif );
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	list-style: none;
	min-height: 44px;           /* comfortabel aantikbaar */
	user-select: none;
}

.lp-filterknop::-webkit-details-marker { display: none; }

.lp-filterknop::after {
	content: '';
	width: .55rem;
	height: .55rem;
	border-right: 2px solid #5a6b7b;
	border-bottom: 2px solid #5a6b7b;
	transform: rotate( 45deg );
	transition: transform .18s ease;
	flex: none;
	margin-left: auto;
}

.lp-filterblok[open] .lp-filterknop::after { transform: rotate( -135deg ); }

.lp-filterknop-tekst { display: inline-flex; align-items: center; gap: .45rem; }
.lp-filterknop-tekst i { color: var( --color-primary, #1982d1 ); }

.lp-filterknop-telling {
	background: var( --color-primary, #1982d1 );
	color: #fff;
	border-radius: 999px;
	padding: .1rem .5rem;
	font-size: .78rem;
	font-weight: 700;
}

.lp-filterknop-telling[hidden] { display: none; }

/* ── Filtervelden ─────────────────────────────────────────────────────────── */
.lp-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: .7rem;
	padding: .9rem;
}

.lp-filter { display: flex; flex-direction: column; min-width: 0; }

.lp-filter label {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #5a6b7b;
	margin-bottom: .25rem;
}


.lp-filter select {
	width: 100%;
	/* 16px voorkomt dat iOS bij focus op het veld inzoomt. */
	font-size: 16px;
	min-height: 44px;
	padding: .5rem .6rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
}

.lp-reset {
	width: 100%;
	min-height: 44px;
	padding: .55rem .9rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
	white-space: nowrap;
}

.lp-reset:hover { background: #f0f3f6; }

/* ── Vertrekplaats ────────────────────────────────────────────────────────── */
.lp-vertrek {
	margin: 0 .9rem .9rem;
	padding: .8rem;
	background: #f5f7f9;
	border-radius: 8px;
}

.lp-vertrek > label {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #5a6b7b;
	margin-bottom: .35rem;
}

/* Op een telefoon onder elkaar, zodat veld en knoppen aantikbaar blijven. */
.lp-vertrek-rij { display: flex; flex-wrap: wrap; gap: .5rem; }
.lp-vertrek-rij .lp-knop { flex: 1 1 auto; min-height: 44px; }

/* Wrapper om het veld heen, zodat de suggestielijst eronder kan hangen. */
.lp-invoer-wrap { position: relative; flex: 1 1 240px; min-width: 0; }

.lp-suggesties {
	position: absolute;
	/* De kaart vormt een eigen stacking context (.lp-kaart-wrap), dus deze lijst
	   hoeft er alleen binnen het filterblok bovenop te liggen. */
	z-index: 5;
	top: calc( 100% + 2px );
	left: 0;
	right: 0;
	margin: 0;
	padding: .25rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .13 );
	max-height: 260px;
	overflow-y: auto;
}

.lp-suggesties[hidden] { display: none; }

.lp-suggestie {
	padding: .42rem .7rem;
	font-size: .92rem;
	cursor: pointer;
	line-height: 1.3;
}

.lp-suggestie:hover,
.lp-suggestie.is-actief {
	background: var( --color-primary, #1982d1 );
	color: #fff;
}

/* "Buiten het gebied van deze kaart". Geen keuze, dus bewust géén cursor:pointer
   en geen hover-kleur — anders ziet het eruit als een aanwijsbare suggestie en
   klikt iemand erop. */
.lp-suggestie-leeg {
	padding: .42rem .7rem;
	font-size: .85rem;
	line-height: 1.35;
	color: #7a8a99;
	cursor: default;
}

/* ── Thuis en Werk in de snelkeuze ────────────────────────────────────────
 * Twee vaste rijen naast Mijn locatie en Eerder gepland — zie thuisWerkRegel()
 * in koppelSuggesties(). Elke rij is zelf al een keuze (net als een gewone
 * suggestie) mét een los knopje ernaast om hem te zetten of te wijzigen; die
 * twee mogen niet op elkaar lijken, dus het tweede knopje krijgt geen
 * .lp-suggestie-stijl maar een eigen, stillere vorm. */
.lp-suggestie-thuiswerk {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: 0 .3rem 0 .7rem;
}

.lp-suggestie-thuiswerk-kies {
	flex: 1 1 auto;
	min-width: 0;
	padding: .42rem 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	line-height: 1.3;
	color: inherit;
	cursor: pointer;
}

.lp-suggestie-thuiswerk-kies strong { display: block; font-weight: 600; }
.lp-suggestie-thuiswerk-kies strong i { width: 1.1em; text-align: center; }
.lp-suggestie-thuiswerk-kies small { display: block; font-size: .8rem; color: #7a8ba0; }

/* Nog niet ingesteld: de rij is dan geen keuze — geen hover, geen cursor. Het
   'Bewerken'-knopje ernaast is in die stand de enige aanwijsbare handeling. */
.lp-suggestie-thuiswerk-kies:disabled { cursor: default; opacity: .7; }

.lp-suggestie-thuiswerk:hover .lp-suggestie-thuiswerk-kies:not( :disabled ),
.lp-suggestie-thuiswerk-kies:not( :disabled ):focus-visible {
	color: var( --color-primary, #1982d1 );
}

.lp-suggestie-thuiswerk-bewerk {
	flex: none;
	padding: .35rem .55rem;
	border: 1px solid #ccd5dd;
	border-radius: 5px;
	background: #fff;
	font: inherit;
	font-size: .78rem;
	font-weight: 600;
	color: #40515f;
	cursor: pointer;
	white-space: nowrap;
}

.lp-suggestie-thuiswerk-bewerk:hover { border-color: var( --color-primary, #1982d1 );
	color: var( --color-primary, #1982d1 ); }

/* Los icoontje, alleen als er iets te wissen valt (thuisWerkRegel() voegt hem
   dan pas toe) — vandaar geen eigen 'staat uit'-vorm nodig. Klein en stil
   zolang je 'm niet aanraakt: dit is de enige destructieve knop in de hele
   snelkeuze en mag niet even zwaar ogen als 'Bewerken' ernaast. */
.lp-suggestie-thuiswerk-wis {
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 5px;
	background: none;
	color: #9aa7b4;
	cursor: pointer;
}
.lp-suggestie-thuiswerk-wis:hover { background: #fdecea; color: #c0392b; }

/* Een tekstknop zonder rand of vulling — 'Annuleren' naast een melding is geen
   volwaardige handeling zoals 'Rit plannen', dus geen .lp-knop. */
.lp-knop-tekst {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var( --color-primary, #1982d1 );
	text-decoration: underline;
	cursor: pointer;
}

/* ── Het locatiezoekvenster ───────────────────────────────────────────────
 * Eén scherm voor élk punt van de reis (zie koppelLocatieVeld() en
 * initLocatieDialoog() in laadpalen.js).
 *
 * TWEE LAGEN, EN DAT IS GEEN VERSIERING. Op mobiel ís #lp-locatiedialoog het
 * scherm: vólledig dekkend, op een hoger z-index dan alles op de kaart, met
 * .lp-locatiedialoog-kaart als een doorzichtige binnenlaag erin. Vanaf 768px
 * (@media hieronder) wordt #lp-locatiedialoog zelf het zwevende kaartje,
 * rechtsboven op precies de plek waar #lp-planner[open] daar al staat — dit
 * scherm ís het vervolg van die pil, dus hoort ook op zijn plek te
 * verschijnen. Geen gedimde achtergrond: een volscherm overlay (eerst) en een
 * gecentreerde modaal (daarna) namen allebei meer van de kaart in beslag dan
 * nodig was op een scherm met ruimte genoeg, en #lp-planner[open] dimt de kaart
 * er ook niet bij weg.
 *
 * DE PLANNEN-PIL WORDT DAAROM APART VERBORGEN, in plaats van gratis mee te
 * komen met een dekkend scherm. initLocatieDialoog() in laadpalen.js zet de
 * klasse .lp-locatiedialoog-actief op <body> zodra dit scherm opent, en de
 * regel hieronder verbergt #lp-planner daarmee expliciet — anders stonden de
 * Plannen-pil en dit scherm op brede schermen naast elkaar.
 *
 * Geen `background: var(--color-bg)` van het thema nodig: deze kleuren staan
 * los van .lp-planner (dat zijn CSS-variabelen die alleen dáár gelden), dus
 * hier gewoon expliciet. */
.lp-locatiedialoog {
	position: fixed;
	/* Zelfde grens als de andere twee volscherm-panelen (#lp-planner[open],
	   #lp-filterblok[open]): onder de sticky header van het thema, niet erover. */
	left: 0; right: 0; bottom: 0;
	top: var( --header-height, 53px );
	z-index: 1300;
	display: block;
	background: transparent;
	/* Mijn locatie + Thuis + Werk + zes eerdere bestemmingen kan hoger zijn dan
	   een kort scherm; dit venster scrolt dan zelf, zoals #lp-planner[open] dat
	   ook doet. */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.lp-locatiedialoog[hidden] { display: none; }

/* MET .lp-kaartpagina ERBIJ, en niet omdat het mooier leest. De overlay-pil
   verderop in dit bestand (body.lp-kaartpagina #lp-planner, regel ~4398) zet
   zelf al `display: flex` op precies dezelfde specificiteit (één id, één
   klasse); zonder .lp-kaartpagina hier ook te herhalen wint die latere regel
   het bij gelijke specificiteit gewoon van bronvolgorde, en bleef de pil
   zichtbaar staan. */
body.lp-kaartpagina.lp-locatiedialoog-actief #lp-planner { display: none; }

/* Op mobiel is dit gewoon de zichtbare pagina-achtergrond over de volle
   (resterende) hoogte; vanaf 768px wordt dit het zwevende kaartje — zie de
   @media hieronder. */
.lp-locatiedialoog-kaart {
	min-height: 100%;
	padding: .9rem;
	background: #fff;
	color: #1b2733;
}

.lp-locatiedialoog-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 .9rem;
}

.lp-locatiedialoog-titel {
	margin: 0;
	font-family: var( --font-heading, sans-serif );
	font-size: 1.2rem;
	font-weight: 700;
}

/* Zelfde vorm als de kruisjes van de Plannen- en Filters-knop (.lp-paneel-sluit),
   maar hier een gewone knop en geen <summary>-versiering: dit scherm is geen
   <details> die dichtklapt, het wordt met JS verborgen. */
.lp-locatiedialoog-sluit {
	flex: none;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #eef2f5;
	color: #40515f;
	font-size: 1.1rem;
	cursor: pointer;
}

.lp-locatiedialoog-sluit:hover { background: #e3e9ee; }
.lp-locatiedialoog-sluit:focus-visible { outline: 2px solid var( --color-primary, #1982d1 ); outline-offset: 2px; }

/* .lp-invoer-wrap draagt normaal `flex: 1 1 240px` voor een flexRIJ (meerdere
   velden naast elkaar, bijv. .lp-vertrek-rij). Dit scherm is een flexKOLOM, en
   daarin liet diezelfde regel het veld meegroeien tot de hele resterende
   hoogte — met de opslaan-banner ver onderaan het scherm tot gevolg in plaats
   van vlak onder de lijst. */
.lp-locatiedialoog-veldwrap { flex: none; }

.lp-locatiedialoog-veldwrap input {
	width: 100%;
	min-height: 48px;
	padding: .6rem .8rem;
	border: 1px solid #ccd5dd;
	border-radius: 8px;
	font: inherit;
	font-size: 16px;   /* voorkomt inzoomen bij focus op iOS */
}

.lp-locatiedialoog .lp-suggesties {
	position: static;
	margin-top: .6rem;
	max-height: none;
	box-shadow: none;
	border-color: #dde3e9;
}

.lp-locatiedialoog-opslaan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin: .7rem 0 0;
	padding: .55rem .7rem;
	border-radius: 6px;
	background: #eaf4fc;
	font-size: .85rem;
	color: #33414e;
}
.lp-locatiedialoog-opslaan[hidden] { display: none; }

/* ── Vanaf 768px: dezelfde hoek als 'Waar ga je heen?', geen volscherm overlay ─
 * Gemeld: op een bureaubladscherm nam dit venster eerst de hele pagina in
 * beslag, en een tweede poging als gedimde, gecentreerde modaal stond zomaar
 * ergens midden op de kaart — niet waar de Plannen-pil hem zou hebben
 * geopend. Dit scherm ís het vervolg van die pil (hij verdwijnt zelfs zolang
 * dit openstaat, zie body.lp-locatiedialoog-actief hierboven), dus hoort het
 * ook op precies diens plek te verschijnen: rechtsboven, exact de positie en
 * afmeting die `#lp-planner[open]` op deze breedte al heeft. Geen gedimde
 * achtergrond — die heeft #lp-planner[open] ook niet, en de rest van de kaart
 * blijft dus gewoon te zien en te bedienen terwijl je zoekt. */
@media ( min-width: 768px ) {
	.lp-locatiedialoog {
		position: absolute;
		left: auto; right: .75rem;
		top: .75rem; bottom: auto;
		width: min( 420px, calc( 100% - 1.5rem ) );
		max-width: calc( 100% - 1.5rem );
		padding: 0;
		background: transparent;
		overflow: visible;
	}

	.lp-locatiedialoog-kaart {
		min-height: 0;
		max-height: calc( 100dvh - 1.5rem );
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba( 0, 0, 0, .25 );
		overflow-y: auto;
	}
}

/* ── De routekeuze-strook ─────────────────────────────────────────────────
 * Verschijnt zodra je op 'Rit plannen' drukt (toonRouteKeuze() in
 * laadpalen.js): één kaartje per routevariant, onderin over de volle breedte
 * — een horizontaal schuivende rij en geen verticale lijst, want er zijn er
 * zelden meer dan drie en dit laat de kaart erboven vrij, waar de lijnen zelf
 * staan. Actief-kaartje volgt een klik op de kaart mee (highlightRouteKaart());
 * de bovenkant van een kaartje doet het omgekeerde en wijst de lijn op de kaart
 * aan, en alleen de knop 'Kies deze' onderin rekent het volledige plan uit. */
.lp-routekeuze {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1000;
	padding: .7rem .7rem calc( .7rem + env( safe-area-inset-bottom, 0px ) );
	/* Een verloop en geen vlakke achtergrond: de kaart moet onder de strook nog
	   even herkenbaar doorlopen, niet met een harde rand afgesneden worden. */
	background: linear-gradient( to top, rgba( 255, 255, 255, .97 ) 65%, rgba( 255, 255, 255, .8 ) );
}
.lp-routekeuze[hidden] { display: none; }

.lp-routekeuze-lijst {
	display: flex;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}
.lp-routekeuze-lijst li { flex: none; scroll-snap-align: start; }

/* VASTE, SMALLE BREEDTE — GEEN min-width DIE MEEGROEIT MET DE TEKST. Met
   min-width alleen groeide een kaartje mee met zijn langste regel, en
   routeKaartjeHtml() zet die info juist daarom op drie korte regels onder
   elkaar (rijtijd, afstand, laadstand) in plaats van op één lange regel met
   het verkeer erbij — gemeten liep dat op tot 280px per kaartje, veel te
   breed om er meer dan anderhalve op een telefoonscherm te krijgen.

   100px en niet 92px sinds 'Kies deze' erin staat: die knop is het smalste
   deel dat er nog bij moet, en op één regel passen is hier de eis — afbreken
   maakt het kaartje twee regels hoger in plaats van breder. */
.lp-routekeuze-kaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100px;
	min-height: 44px;
	padding: .4rem .5rem;
	border: 2px solid transparent;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .18 );
	text-align: left;
}

/* De bovenkant van het kaartje: de drie regels, en tegelijk het tikvlak dat
   de route op de kaart aanwijst. Ziet er niet als een knop uit — hij vult het
   kaartje en het kaartje ís het doel — maar hij moet er wel een zijn, want een
   div is niet met een toetsenbord te bereiken. Vandaar de knop-reset: geen
   rand, geen achtergrond, geen eigen lettertype. min-height op de knop en niet
   alleen op het kaartje, zodat het tikvlak zelf de 44px haalt. */
.lp-routekeuze-toon {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* 'Kies deze' staat op élk kaartje, dus is de omlijnde vorm de rustige stand
   en de gevulde het aangewezen kaartje: drie gevulde knoppen naast elkaar
   zeggen niet meer welke route je op de kaart voor je hebt. */
.lp-routekeuze-kies {
	align-self: stretch;
	margin-top: .4rem;
	padding: .25rem .3rem;
	border: 1px solid var( --color-primary, #1982d1 );
	border-radius: 6px;
	background: none;
	font-family: inherit;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --color-primary, #1982d1 );
	white-space: nowrap;
	cursor: pointer;
}
.lp-routekeuze-kaart.is-actief .lp-routekeuze-kies {
	background: var( --color-primary, #1982d1 );
	color: #fff;
}
.lp-routekeuze-kaart strong {
	font-family: var( --font-heading, sans-serif );
	font-size: .86rem;
	font-weight: 800;
	line-height: 1.2;
	color: #1b2733;
}
.lp-routekeuze-kaart small {
	display: block;
	font-size: .7rem;
	line-height: 1.3;
	color: #5a6b7b;
}

/* De laadstand is het getal waarop je vergelijkt, dus zwaarder dan de
   afstand erboven — en in de kleur van de laadstand-slider (socKleur() zet
   'm inline): zelfde betekenis, zelfde signaal. */
.lp-routekeuze-soc { font-weight: 700; }

.lp-routekeuze-kaart.is-actief {
	border-color: var( --color-primary, #1982d1 );
	box-shadow: 0 2px 12px rgba( 25, 130, 209, .4 );
}
.lp-routekeuze-kaart.is-actief strong { color: var( --color-primary, #1982d1 ); }
.lp-routekeuze-toon:focus-visible,
.lp-routekeuze-kies:focus-visible { outline: 2px solid var( --color-primary, #1982d1 ); outline-offset: 2px; }

@media ( min-width: 768px ) {
	/* Op een breed scherm dezelfde logica als de andere overlays: geen balk
	   over de volle breedte, maar losse kaartjes die op hun eigen maat blijven
	   staan — gecentreerd, met ruimte om de kaart eromheen te blijven zien. */
	.lp-routekeuze {
		display: flex;
		justify-content: center;
		background: none;
		padding-bottom: 1.5rem;
	}
	.lp-routekeuze-lijst { overflow-x: visible; flex-wrap: wrap; justify-content: center; }
}

.lp-vertrek-rij input {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: .5rem .6rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	font: inherit;
	font-size: 16px;            /* voorkomt inzoomen bij focus op iOS */
	-webkit-appearance: none;   /* Safari geeft type=search anders een afwijkende vorm */
	appearance: none;
}

/* Het kruisje van type=search wel behouden — dat is hier nuttig. */
.lp-vertrek-rij input::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
}

.lp-knop {
	padding: .5rem .9rem;
	border: 1px solid var( --color-primary, #1982d1 );
	border-radius: 6px;
	background: var( --color-primary, #1982d1 );
	color: #fff;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.lp-knop:hover { filter: brightness( .93 ); }
.lp-knop:disabled { opacity: .6; cursor: default; }

.lp-knop-stil {
	background: #fff;
	color: #40515f;
	border-color: #ccd5dd;
	font-weight: 400;
}

.lp-vertrek-melding {
	margin: .5rem 0 0;
	font-size: .82rem;
	color: #5a6b7b;
}

.lp-vertrek-fout  { color: #b45309; font-weight: 600; }
.lp-vertrek-bezig { color: #5a6b7b; font-style: italic; }

/* ── Zoom-terugknop ───────────────────────────────────────────────────────── */
.lp-zoomreset a {
	font-size: 1.05rem;
	line-height: 26px;
	font-weight: 700;
	text-align: center;
}

.lp-telling { font-size: .85rem; color: #5a6b7b; margin: 0 0 .6rem; }
.lp-telling-leeg { color: #b45309; font-weight: 600; }
/* Voorbehoud bij een stekkerfilter: hoort bij de telling, maar mag die niet
   overstemmen — vandaar een eigen regel in een rustiger kleur. */
.lp-telling-kanttekening { display: block; margin-top: .25rem; color: #b45309; font-weight: 400; }
.lp-zoomhint { color: #7a8ba0; font-style: italic; }
.lp-verbruik-hoog { color: #b45309; font-weight: 600; font-style: normal; }

/* ── Files en wegwerk (NDW) ───────────────────────────────────────────────────
   De laag staat standaard uit; deze melding zegt hoeveel er staan, hoe oud het
   beeld is, of waarom er niets is. Zie includes/laadpalen-verkeer.php. */
.lp-verkeer-melding {
	font-size: .8rem;
	color: #5a6b7b;
	margin: 0 0 .6rem;
	line-height: 1.35;
}

/* De knop zelf: uit is neutraal, aan is oranje zodat je ziet dát er een extra
   laag over de kaart ligt. Niet alleen kleur — de knop draagt ook aria-pressed
   en een andere title, want een kleurverschil is onzichtbaar voor wie kleuren
   slecht onderscheidt. */
.lp-verkeerknop a.is-aan { color: #b45309; background: #fff7ed; }
.lp-verkeerknop a.is-bezig i { animation: lp-klop 1s ease-in-out infinite; }

/* De knop voor de ondergrond. Blauw en niet oranje: oranje betekent op deze kaart
   'er ligt een extra laag overheen', en dit legt er niets bij — het verandert
   alleen hoe de kaart eronder getekend is. */
.lp-stijlknop a.is-aan { color: #1d4ed8; background: #eff6ff; }

/* ── 'Toon snelladers' ───────────────────────────────────────────────────────
   Zelfde soort knop als de ondergrondkiezer hieronder, met hetzelfde uitklapmenu
   (`.lp-stijl-menu`) eraan — één opmaak voor twee keuzemenu's in dezelfde hoek.
   Het icoon volgt de stand (bliksem / route / oog-doorgestreept) en de title
   zegt hem voluit.

   Kleur alleen waar de stand van de standaard afwijkt: 'langs je route' is de
   gewone gang van zaken en hoort er dus neutraal bij te staan, anders lijkt de
   kaart altijd in een bijzondere stand te staan. Blauw voor 'alles' (zelfde
   betekenis als bij de ondergrondknop: dit legt geen laag bij maar verandert wat
   je ziet), oranje voor 'verborgen' — de kleur waarmee deze kaart overal 'let op,
   dit is niet de gewone stand' zegt. */
.lp-ladersknop a.lp-laders-alles { color: #1d4ed8; background: #eff6ff; }
.lp-ladersknop a.lp-laders-geen  { color: #b45309; background: #fff7ed; }

/* ── De ondergrondkiezer ──────────────────────────────────────────────────────
   Het lijstje dat onder de lagenknop uitklapt; zie stijlMenuZet() in laadpalen.js.
   Dezelfde opmaak dient het snelladermenu hierboven — zie de noot bij
   LADERS_KEUZES: het is hetzelfde ding met een andere lijst erin.

   NAAST DE KNOP EN NIET ERONDER. Eronder is de vertrouwde plek voor een menu, maar
   daar staan in deze hoek de volgende knoppen al (locatie, files, wegwerk) en het
   menu zou er precies overheen vallen. Naast de balk is de kaart altijd leeg. */
.lp-stijlknop,
.lp-ladersknop { position: relative; }

.lp-stijl-menu {
	position: absolute;
	top: 0;
	left: calc( 100% + 6px );
	z-index: 1000;              /* boven de tegels, onder een geopende popup */
	/* Breed genoeg voor 'alleen Nederland · jan-jun 2026' op één regel; op 15rem
	   viel de jaargang er net af. */
	width: 16.5rem;
	/* Op een smalle telefoon is dat breder dan wat er naast de knop over is. */
	max-width: calc( 100vw - 4.5rem );
	padding: .25rem;
	box-sizing: border-box;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .3 );
}

.lp-stijl-menu[hidden] { display: none; }

.lp-stijl-optie {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .4rem .45rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	font: inherit;
	color: #234;
	text-align: left;
	cursor: pointer;
}

.lp-stijl-optie:hover,
.lp-stijl-optie:focus-visible { background: #eef3f8; }
.lp-stijl-optie:focus-visible { outline: 2px solid #0b6bb5; outline-offset: -2px; }

/* Het icoontje links krijgt een vaste kolom, anders staan de namen niet onder
   elkaar: fa-map is breder dan fa-satellite. */
.lp-stijl-optie > i:first-child {
	flex: 0 0 1.1rem;
	text-align: center;
	color: #6b7c8c;
}

.lp-stijl-tekst { display: flex; flex-direction: column; min-width: 0; }
.lp-stijl-tekst strong { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.lp-stijl-tekst small  { font-size: .74rem; line-height: 1.3; color: #6b7c8c; }

/* Het vinkje staat er altijd, maar alleen zichtbaar bij de gekozen ondergrond.
   Zo verspringt de tekst niet als je een andere kiest. */
.lp-stijl-vink { margin-left: auto; color: #1d4ed8; visibility: hidden; }
.lp-stijl-optie.is-aan { background: #eff6ff; }
.lp-stijl-optie.is-aan .lp-stijl-vink { visibility: visible; }
.lp-stijl-optie.is-aan > i:first-child,
.lp-stijl-optie.is-aan strong { color: #1d4ed8; }

/* De knop zelf blijft ingedrukt zolang het menu openstaat. */
.lp-stijlknop a.is-open { background: #eef3f8; }

html[data-theme="dark"] .lp-stijl-menu {
	background: var( --color-surface, #1c2530 );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .6 );
}
html[data-theme="dark"] .lp-stijl-optie { color: var( --color-text, #e6ecf2 ); }
html[data-theme="dark"] .lp-stijl-optie:hover,
html[data-theme="dark"] .lp-stijl-optie:focus-visible { background: rgba( 255, 255, 255, .08 ); }
html[data-theme="dark"] .lp-stijl-optie > i:first-child,
html[data-theme="dark"] .lp-stijl-tekst small { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-stijl-vink { color: #93c5fd; }
html[data-theme="dark"] .lp-stijl-optie.is-aan { background: rgba( 147, 197, 253, .16 ); }
html[data-theme="dark"] .lp-stijl-optie.is-aan > i:first-child,
html[data-theme="dark"] .lp-stijl-optie.is-aan strong { color: #93c5fd; }
html[data-theme="dark"] .lp-stijlknop a.is-open { background: rgba( 255, 255, 255, .08 ); }

/* Knop om de bezetting op te halen. Grijs zodra er niets (meer) op te halen valt
   of er te veel stations in beeld staan. */





.lp-filter select option:disabled { color: #aab4bd; }

/* ── Voorzieningen: aanvinkbare chips ─────────────────────────────────────── */
/* Meerdere tegelijk aanvinken moet kunnen, en met de duim. Vandaar chips in
   plaats van een keuzemenu: alles staat naast elkaar, één tik per keuze. */
.lp-filter-label {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #5a6b7b;
	margin-bottom: .25rem;
}

.lp-voorz-keuze { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Het vinkje zelf blijft bereikbaar voor toetsenbord en schermlezer, maar is
   onzichtbaar: de chip eromheen ís de knop. De planner gebruikt een eigen
   inputklasse (.lp-pl-voorz-vink, voor JS-scoping los van het kaartfilter), maar
   moet er identiek uitzien — vandaar dat beide klassen overal meelopen. */
.lp-voorz-vink,
.lp-pl-voorz-vink {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap;
}

.lp-voorz-chip { margin: 0; }

.lp-voorz-chip > span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 40px;
	padding: .35rem .7rem;
	border: 1px solid #ccd5dd;
	border-radius: 999px;
	background: #fff;
	font-size: .88rem;
	line-height: 1.2;
	color: #33414e;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}

.lp-voorz-chip > span i { font-size: .95em; color: #6b7c8c; }

.lp-voorz-telling {
	font-style: normal;
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: #7a8a99;
}

.lp-voorz-vink:checked + span,
.lp-pl-voorz-vink:checked + span {
	background: #0b6bb5;
	border-color: #0b6bb5;
	color: #fff;
}
.lp-voorz-vink:checked + span i,
.lp-voorz-vink:checked + span .lp-voorz-telling,
.lp-pl-voorz-vink:checked + span i { color: rgba( 255, 255, 255, .8 ); }

.lp-voorz-vink:focus-visible + span,
.lp-pl-voorz-vink:focus-visible + span { outline: 2px solid #0b6bb5; outline-offset: 2px; }

/* Levert niets op met de rest van de filters erbij: wel zichtbaar, niet
   uitnodigend. Aanklikken mag, dan zie je meteen dat de lijst leeg wordt. */
.lp-voorz-chip.is-leeg > span { opacity: .45; }

@media ( hover: hover ) {
	.lp-voorz-vink:not(:checked) + span:hover,
	.lp-pl-voorz-vink:not(:checked) + span:hover { border-color: #0b6bb5; color: #0b6bb5; }
}

/* ── Aanbieders (meerdere tegelijk) ──────────────────────────────────────────
 * Een eigen uitklapmenu, geen open lijst in het filterblok. Er zijn 95
 * aanbieders, waarvan 26 met één station: uitgeklapt naast de andere filters
 * duwde dat het hele blok uit model. Dichtgeklapt is dit net zo hoog als de
 * keuzemenu's ernaast; opengeklapt groeit het naar beneden.
 *
 * Alles hieronder staat op min-width: 0 / max-width: 100%. Een grid- of
 * flex-kind krijgt anders `min-width: auto` en dan bepaalt de bréédste
 * aanbiedernaam de kolombreedte — dát duwde de pagina buiten het scherm. */
.lp-op-menu { min-width: 0; max-width: 100%; }

.lp-op-knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: .5rem .6rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	background: #fff;
	/* 16px voorkomt dat iOS bij focus inzoomt — zelfde reden als bij
	   .lp-filter select hierboven. */
	font-size: 16px;
	line-height: 1.2;
	color: #33414e;
	cursor: pointer;
	list-style: none;
}
.lp-op-knop::-webkit-details-marker { display: none; }
.lp-op-knop i { font-size: .8em; color: #6b7c8c; transition: transform .15s; }
.lp-op-menu[open] > .lp-op-knop i { transform: rotate( 180deg ); }
.lp-op-knop:focus-visible { outline: 2px solid #0b6bb5; outline-offset: 2px; }

/* De naam van de keuze mag de knop nooit breder maken dan zijn kolom. */
.lp-op-knop-tekst {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lp-op-menu[data-gekozen="ja"] .lp-op-knop-tekst { font-weight: 600; color: #0b6bb5; }

.lp-op-paneel {
	max-width: 100%;
	margin-top: .4rem;
	padding: .5rem;
	border: 1px solid #dde3e9;
	border-radius: 8px;
	background: #f7f9fb;
}

.lp-op-zoek {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: .5rem .6rem;
	margin-bottom: .5rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	/* Zie de knop hierboven: onder 16px zoomt iOS bij focus de hele pagina in,
	   en dán valt de kaart buiten het scherm. */
	font-size: 16px;
	color: #33414e;
}
.lp-op-zoek::placeholder { color: #8b9aa8; }

.lp-op-lijst {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	max-width: 100%;
	max-height: 168px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: .1rem;
}

/* Het vinkje verdwijnt, de chip eromheen ís de knop — net als bij de
   voorzieningen; zie de toelichting daar. */
.lp-op-vink {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap;
}

/* De chips zijn <label>-elementen en vielen daarmee onder de regel voor
   filterlabels (`.lp-filter label`, regel 168): HOOFDLETTERS, extra letterafstand,
   halfvet en een marge eronder. Op desktop stond de hele lijst daardoor te
   schreeuwen. Hier teruggezet, met genoeg specificiteit om die regel te verslaan.
   Doe hetzelfde bij een nieuwe chipsoort in dit blok — het is niet zichtbaar in de
   HTML dat er een labelregel overheen ligt. */
.lp-filter .lp-op-chip,
.lp-filter .lp-op-chip > span {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	font-size: .88rem;
	color: #33414e;
	margin-bottom: 0;
}

.lp-op-chip { margin: 0; max-width: 100%; min-width: 0; }

.lp-op-chip > span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	min-height: 40px;
	padding: .35rem .7rem;
	border: 1px solid #ccd5dd;
	border-radius: 999px;
	background: #fff;
	font-size: .88rem;
	line-height: 1.2;
	color: #33414e;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}

.lp-op-telling {
	font-style: normal;
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: #7a8a99;
}

.lp-op-vink:checked + span { background: #0b6bb5; border-color: #0b6bb5; color: #fff; }
.lp-op-vink:checked + span .lp-op-telling { color: rgba( 255, 255, 255, .8 ); }
.lp-op-vink:focus-visible + span { outline: 2px solid #0b6bb5; outline-offset: 2px; }

/* Levert niets op met de rest van de filters erbij — zelfde behandeling als een
   lege voorzieningchip: zichtbaar, niet uitnodigend. */
.lp-op-chip.is-leeg > span { opacity: .45; }

.lp-op-leeg {
	font-size: .85rem;
	color: #7a8a99;
	padding: .2rem .1rem;
}

/* "nog 1.839 aanbieders — typ om te zoeken", onderaan de begrensde lijst.
   Zonder die regel lijkt de lijst compleet en concludeert iemand die zijn
   aanbieder niet ziet dat die er niet in zit, terwijl hij op plek 61 staat.
   Bewust gedempt en klein: het is een voetnoot, geen knop. De bovenrand scheidt
   hem van de laatste chip zodat hij niet als lijstitem leest. */
.lp-op-meer {
	margin: .3rem 0 0;
	padding: .35rem .1rem 0;
	border-top: 1px solid #e2e8ee;
	font-size: .8rem;
	color: #7a8a99;
	font-style: italic;
}

@media ( hover: hover ) {
	.lp-op-vink:not(:checked) + span:hover { border-color: #0b6bb5; color: #0b6bb5; }
}

/* Op desktop staan de filters in kolommen van ~165px (kaart) respectievelijk drie
 * gelijke delen (planner). Daar past geen aanbiedernaam in: "Plenitude On The
 * Road" werd afgekapt, en het zoekveld ook. Uitgeklapt neemt het menu daarom de
 * hele rij; dichtgeklapt blijft het een gewone kolom, even breed als de
 * keuzemenu's ernaast.
 *
 * Bewust géén zwevend paneel: beide filterkaarten zijn op desktop zelf al
 * absoluut geplaatste overlays bij de kaartrand, en een dropdown daarbinnen valt
 * of buiten het kaartje of buiten het scherm. In de rij meegroeien kan niet
 * clippen.
 *
 * :has() wordt sinds 2023 breed ondersteund; kent een browser het niet, dan blijft
 * het menu simpelweg zo breed als zijn kolom — precies de situatie van hiervoor,
 * dus geen kapotte opmaak. */
@media ( min-width: 768px ) {
	.lp-filter:has( .lp-op-menu[open] ) { grid-column: 1 / -1; }

	/* Dezelfde maatvoering als .lp-filter select op desktop. De 16px-regel geldt
	   alleen voor invoervelden (iOS zoomt daarop in); een <summary> is dat niet,
	   het zoekveld in het paneel blijft wél op 16px. */
	.lp-op-knop { font-size: .92rem; min-height: 40px; }
	.lp-op-lijst { max-height: 200px; }
}

/* ── De kaart ─────────────────────────────────────────────────────────────── */
.lp-kaart-wrap {
	border: 1px solid #dde3e9;
	border-radius: 8px;
	overflow: hidden;
}

/* Een deel van het scherm in plaats van een vast aantal pixels: op een telefoon
 * vult de kaart zo bijna het beeld, zonder op een grote monitor absurd hoog te
 * worden. dvh houdt rekening met de in- en uitschuivende browserbalk. */
#lp-kaart {
	/* Nooit hoger dan het scherm min een strook. Met alleen 68dvh leek dat goed,
	   maar min-height won op een laag scherm: een telefoon in liggende stand
	   (~390px) kreeg 330px kaart, en dan is er met de sticky header erbij
	   nauwelijks pagina meer over om mee te scrollen. Juist dat scrollen is de
	   manier om de kaart weer op slot te zetten zodra hij je vinger vangt. */
	height: min( 68dvh, calc( 100dvh - 170px ) );
	min-height: 240px;
	max-height: 560px;
	width: 100%;
	background: #e8edf1;
}

/* ── Schermvullend ────────────────────────────────────────────────────────────
 * Twee wegen: de Fullscreen API (desktop, Android) en een terugval met vaste
 * positie voor iOS Safari, dat de API niet kent voor gewone elementen. In dat
 * tweede geval verhuist het blok naar <body>, want een 'position: fixed' kind
 * ontsnapt niet aan een voorouder met een transform of eigen stacking context.
 * De z-index moet boven de sticky header van het thema (1000) uitkomen. */
.lp-kaart-wrap.is-vol {
	position: fixed;
	inset: 0;
	z-index: 1100;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.lp-kaart-wrap.is-vol #lp-kaart {
	height: 100%;
	max-height: none;
	min-height: 0;
}

/* De pagina eronder mag niet meescrollen. */
body.lp-vol-open { overflow: hidden; }

/* De Fullscreen API zet het blok zelf schermvullend; de kaart moet dan mee. */
.lp-kaart-wrap:fullscreen #lp-kaart,
.lp-kaart-wrap:-webkit-full-screen #lp-kaart {
	height: 100%;
	max-height: none;
	min-height: 0;
}

.lp-kaart-wrap:fullscreen { border: 0; border-radius: 0; }

/* Knop 'toon mijn locatie': twee tijdelijke standen, bezig en mislukt. */
.lp-hierknop a.is-bezig i { animation: lp-klop 1s ease-in-out infinite; }
.lp-hierknop a.is-fout    { color: #b45309; }

/* ── Zoeken op de kaart ───────────────────────────────────────────────────────
   Een vergrootglas dat uitklapt tot een invoerveld met plaatssuggesties; zie
   het blok bij `zoek.onAdd` in laadpalen.js voor waarom dit op de kaart staat
   en niet in het filterblok.

   De regelaar is `position: relative` zodat de suggestielijst (die absoluut
   positioneert op `top: 100%`) zich aan dít bakje ophangt en niet aan de kaart.
   Zonder dat hangt hij linksboven in beeld, los van het veld waar hij bij hoort. */
.lp-zoekregelaar {
	position: relative;
	display: flex;
	align-items: stretch;
	/* De .leaflet-bar-rand hoort om het geheel, niet om de knop alleen. */
	background: #fff;
}

.lp-zoekveld {
	position: relative;
	width: 240px;
	max-width: calc( 100vw - 6rem );
	border-left: 1px solid #ccd5dd;
}

.lp-zoekveld[hidden] { display: none; }

.lp-zoekveld input {
	width: 100%;
	height: 30px;              /* gelijk aan de Leaflet-knop ernaast */
	box-sizing: border-box;
	border: 0;
	padding: 0 .55rem;
	font-size: .9rem;
	color: #234;
	background: transparent;
	border-radius: 0 4px 4px 0;
}

.lp-zoekveld input:focus { outline: 2px solid #0b6bb5; outline-offset: -2px; }

/* De lijst is breder dan het veld op een telefoon nuttig zou zijn, dus hij mag
   naar links uitlopen — anders staat een adres van drie regels in een kolom van
   240 pixels. */
.lp-zoekregelaar .lp-suggesties {
	left: auto;
	right: 0;
	width: max( 240px, 100% );
	min-width: 240px;
}

html[data-theme="dark"] .lp-zoekregelaar { background: var( --color-surface, #1c2530 ); }
html[data-theme="dark"] .lp-zoekveld     { border-left-color: #33414f; }
html[data-theme="dark"] .lp-zoekveld input { color: var( --color-text, #e6ecf2 ); }

/* Leaflet moet onder de sticky header van het thema (z-index 1000) blijven.
 * Dat doen we met een stacking context op de wrapper, NIET door de lagen van
 * Leaflet zelf plat te slaan: die had ik allemaal op 400 gezet, waardoor de
 * zoomknoppen (normaal 800) en de popup (normaal 700) gelijk kwamen te liggen
 * en de DOM-volgorde ging beslissen — de knoppen dekten de popuptitel af. */
.lp-kaart-wrap {
	position: relative;
	z-index: 0;
}

/* Binnen die context mag de popup wél boven de knoppen: bij een grote popup is
 * een onleesbare titel erger dan een tijdelijk bedekte zoomknop.
 *
 * Alleen de popup-laag ophogen was niet genoeg. Leaflet zet de hoeken waar de
 * knoppen in zitten (.leaflet-top / .leaflet-bottom) op z-index 1000, dus die
 * bleven er dwars doorheen tekenen. Ze moeten omlaag, maar wel boven de
 * kaartlagen blijven: tegels 200, overlays 400, markers 600, tooltips 650. */
.leaflet-popup-pane { z-index: 850; }
.leaflet-top,
.leaflet-bottom { z-index: 800; }

/* Groter dan Leaflets standaard 24px — makkelijker te raken op een telefoon,
 * en op zo'n compacte popup mag hij niet per ongeluk mis getikt worden. */
.leaflet-popup-close-button {
	top: .5rem !important;
	right: .5rem !important;
	width: 36px !important;
	height: 36px !important;
	font-size: 26px !important;
	line-height: 36px !important;
	z-index: 2;
}

/* Op een telefoon vult de popup bijna het scherm. De knoppen liggen er dan
 * onder, maar wat er langs de rand uitsteekt leidt af — en indrukken kan toch
 * niet. Even wegdimmen dus. */
#lp-kaart.lp-popup-open .leaflet-control-container { opacity: .25; pointer-events: none; }
#lp-kaart.lp-popup-open .lp-kaart-hint { display: none; }

/* Hint over het scrollwiel — verdwijnt zodra zoomen is ingeschakeld. */
.lp-kaart-hint {
	background: rgba( 255, 255, 255, .92 );
	border-radius: 6px;
	padding: .4rem .6rem;
	font-size: .78rem;
	color: #40515f;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .2 );
	max-width: 210px;
	pointer-events: none;
}

#lp-kaart.lp-kaart-actief .lp-kaart-hint { display: none; }

/* Zichtbaar dat de kaart nu op je vinger reageert. */
#lp-kaart.lp-kaart-actief { box-shadow: inset 0 0 0 3px rgba( 25, 130, 209, .5 ); }

/* Uitweg uit de actieve kaart: staat er alleen als slepen aanstaat, want dan is
   de pagina niet meer te scrollen. Bewust een echte knop met een ruim tikvlak —
   dit is het laatste redmiddel van iemand die vastzit. */
.lp-kaart-slot {
	display: none;
	align-items: center;
	gap: .35rem;
	min-height: 40px;
	padding: .45rem .7rem;
	border: 0;
	border-radius: 6px;
	background: #1f2d3a;
	color: #fff;
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 5px rgba( 0, 0, 0, .35 );
}

#lp-kaart.lp-kaart-actief .lp-kaart-slot { display: inline-flex; }
#lp-kaart.lp-popup-open .lp-kaart-slot { display: none; }

.lp-status-uitleg {
	display: block;
	font-size: .78rem;
	color: #7a8ba0;
}

/* ── Stationsmarkers ──────────────────────────────────────────────────────────
 * De vulkleur staat voor de aanbieder. Eerder stond hij voor het vermogen, maar
 * groen/oranje botste met de groen/rode ringen van de bezettingslaag: een
 * groene stip las als 'vrij' terwijl hij 'snel' betekende.
 *
 * Alleen de drie netwerken die je onderweg aan het bord herkent hebben een
 * eigen kleur; al het andere is neutraal leisteenblauw. Houd deze waarden
 * gelijk aan MERK_KLEUR in laadpalen.js — daar staan dezelfde kleuren voor de
 * cirkels van de onderweg-laag. */
.lp-pin {
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .35 );
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.lp-pin-tesla   { background: #e31937; }
.lp-pin-ionity  { background: #e94fad; }
.lp-pin-overig  { background: #5a6b7b; }

/* Electra: mint met donkerblauw, hun eigen combinatie. De mint is te licht voor
   een wit cijfer (contrast 1,4) én valt tegen lichte kaarttegels weg, dus het
   donkerblauw doet hier zowel de rand als het cijfer. */
.lp-pin-electra { background: #43f5b9; border-color: #0b2936; }
.lp-pin-allego  { background: #85b112; }

/* Circle K's rood MÉT hun oranje rand, en die rand is er gekomen na een melding.
   Hun #ee2e24 ligt op 22 RGB-eenheden van Tesla's #e31937 — nog dichter dan Eneco
   zat (26), dus twee rode stippen naast elkaar waren één rode stip.

   Bij Eneco kon het verloop uit hun logo het onderscheid maken; hier niet, want hun
   logo is een vlak rood veld met een oranje onderstreping. Die onderstreping doet
   nu de rand: #f99b2a, uit datzelfde logo gemeten. Zelfde ingreep als bij Fastned,
   waar het geel de witte rand vervangt.

   HET CIJFER BLIJFT WIT — anders dan bij Fastned, waar het geel ook het cijfer
   kleurt. Wit haalt op dit rood contrast 4,2; oranje zou daar rond de 2 uitkomen,
   en de rand alleen is al genoeg om het merk te herkennen.

   Het witte haarlijntje eromheen om dezelfde reden als bij Fastned: oranje tegen
   een lichte kaarttegel haalt maar 1,9 en zonder dat lijntje loopt de stip visueel
   in de kaart over. */
.lp-pin-circlek {
	background: #ee2e24;
	border-color: #f99b2a;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, .9 ), 0 1px 3px rgba( 0, 0, 0, .35 );
}

/* Eneco's bellen. GEMELD ALS "die rondjes zien eruit als Tesla", en dat klopte:
   hun vlakke #d80848 ligt op **26 RGB-eenheden** van Tesla's #e31937. Dat is niets —
   Ionity zit op 58 en dáár was al een correctie voor nodig (zie MERK_KLEUR). Twee
   rode stippen naast elkaar op een kaart zijn één rode stip.

   Hun logo lost het zelf op: links van het woordmerk staan bellen met een verloop
   van warm oranje linksboven naar diep rood. Gemeten over de diagonaal van de
   grootste bel in eneco.webp: #f5b97a → #ea8a62 → #db463e → #cc001b. Dat oranje
   ligt op 181 van Tesla, dus de stip is nu in de ooghoek te onderscheiden zonder
   dat hij ophoudt Eneco te zijn.

   HET HOOGTELICHT STAAT LINKSBOVEN EN NIET IN HET MIDDEN, want daar staat het
   cijfer. Wit haalt op dat oranje maar 1,7; op het midden 4,2 en op de kern 5,9.
   Vandaar deze verdeling én de halo hieronder — zelfde ingreep als bij Vattenfall
   en E-Flux, waar het cijfer ook over twee tinten heen valt.

   De onderweg-laag tekent een Leaflet-circleMarker en die kan geen verloop; die valt
   terug op `kleur` uit MERK_KLEUR (#d80848). Zelfde beperking als bij TotalEnergies
   en bp pulse. */
.lp-pin-eneco {
	background: radial-gradient( circle at 30% 26%,
		#f8c78c 0%, #f2a25c 10%, #e4643f 22%, #d21a3c 44%, #c1003a 100% );
}

/* T-Electric's groen, ook uit hun logobestand. Het cijfer donker, want wit haalt
   op dit groen contrast 2,4. */
.lp-pin-telectric { background: #78b848; }
.lp-pin-telectric.lp-pin-cijfer span { color: #14310a; text-shadow: none; }

/* Ketens en energiebedrijven; kleuren uit hun eigen logobestanden. Zie de noot bij
   MERK_VOORVOEGSEL in laadpalen.js — samen een vijfde van alle stations, die tot nu
   toe het grijs van 'overig' kregen. */
.lp-pin-enbw       { background: #00007a; }
.lp-pin-lidl       { background: #0050aa; }
.lp-pin-kaufland   { background: #e10915; }
.lp-pin-aldisud    { background: #00005f; }
.lp-pin-aldinord   { background: #001e78; }
.lp-pin-edeka      { background: #0062ae; }
.lp-pin-engie      { background: #007bc5; }
.lp-pin-pfalzwerke { background: #dd243b; }

/* Vattenfall: geel boven, blauw onder, zoals hun logo. Twee harde stops op 50% —
   geen verloop, want dat is het in hun merk ook niet.

   Het cijfer krijgt hieronder een eigen behandeling: wit op #ffda00 haalt contrast
   1,3 en is onleesbaar, terwijl datzelfde wit op het blauw juist nodig is. Zie
   .lp-pin-vattenfall.lp-pin-cijfer span.

   Onder twee namen in de bronnen (Smarter Living, InCharge); die worden op
   voorvoegsel herkend, zie MERK_VOORVOEGSEL in laadpalen.js. */
.lp-pin-vattenfall {
	background: linear-gradient( #ffda00 0 50%, #2071b5 50% 100% );
}

/* E-Flux: paars en mintgroen uit hun eigen logo (#6102D3 en #00FFB0, uit de inline
   SVG op e-flux.io), schuin gedeeld van linksboven naar rechtsonder.

   45deg IS DE JUISTE HOEK EN DAT IS EEN KWARTSLAG-VAL. De hoek in een
   linear-gradient is de richting waarín het verloop loopt, niet de scheidingslijn:
   die staat er loodrecht op. Een deellijn van linksboven naar rechtsonder vraagt
   dus een verloop naar rechtsboven — 45deg. Met 135deg krijg je dezelfde twee
   kleuren over de ándere diagonaal.

   Paars linksonder, mint rechtsboven. Omdraaien is de twee kleuren wisselen.

   DE RAND BLIJFT WIT, anders dan bij Electra. Daar is de héle vulling licht en
   moest de rand het contrast leveren; hier is de onderste helft donkerpaars, dus de
   stip staat al vast op een lichte tegel. Een paarse rand geprobeerd en weer
   teruggedraaid: die loopt over in de paarse helft en dan lijkt de deling scheef te
   staan — op een stip van 22 px valt driekwart paars uit. */
.lp-pin-eflux {
	background: linear-gradient( 45deg, #6102d3 0 50%, #00ffb0 50% 100% );
}

/* Shell: gele schijf, rode rand — hun pecten. Kleuren uit het logo: #FFCD00 en
   #DA291C.

   Hier is de rand wél gekleurd, anders dan bij E-Flux, en om de reden die daar
   niet gold: de hele vulling is licht. Geel haalt op een lichte kaarttegel contrast
   1,3 en zou zonder die rode ring wegvallen. Zelfde afweging als bij Electra.

   Het cijfer krijgt hieronder een donkere kleur; wit haalt op dit geel 1,5. */
.lp-pin-shell {
	background: #ffcd00;
	border-color: #da291c;
}

/* De TotalEnergies-vlam loopt door het hele kleurenspectrum — uitgelezen uit
   hun logo: rood, oranje, geel, groen, turkoois, blauw, violet, magenta. Op een
   stip van 22-30px leest dat als 'veelkleurig', wat precies het merk is.
   De onderweg-laag kan geen verloop; die gebruikt hun blauw (zie laadpalen.js). */
.lp-pin-total {
	background: conic-gradient( from 90deg,
		#ff0000, #ff7800, #ffd700, #8edb00, #00ce78,
		#00c3bd, #006bff, #5140ff, #b400b5, #d80064, #ff0000 );
}

/* BP's Helios: een zon die van groen aan de rand via limoen en geel naar wit in
   het hart loopt. De drie kleuren staan zo op bp.com. Het lichte hart draagt het
   cijfer, dus dat wordt donkergroen — wit zou daar verdwijnen. */
.lp-pin-bp {
	background: radial-gradient( circle,
		#ffffff 0%, #ffe600 34%, #99cc00 62%, #009900 100% );
}

/* Fastned voert bruin mét geel: gele rand, geel cijfer. Het geel doet hier het
   werk dat bij de andere stippen de witte rand doet, maar tegen lichte
   kaarttegels valt het bijna weg (contrast 1,3). Vandaar een haarscherp wit
   lijntje eromheen via box-shadow — dat houdt de stip los van de kaart zonder
   het geel te verdringen. De tweede schaduw is dezelfde als op .lp-pin. */
.lp-pin-fastned {
	background: #8b5a2b;
	border-color: #ffd200;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, .9 ), 0 1px 3px rgba( 0, 0, 0, .35 );
}

/* Stip met het aantal snelladers erin. */
.lp-pin-cijfer span {
	font-family: var( --font-heading, sans-serif );
	font-weight: 800;
	font-size: .7rem;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .5 );
}

/* Twee klassen, zodat dit wint van de regel hierboven ongeacht de volgorde. */
.lp-pin-fastned.lp-pin-cijfer span { color: #ffd200; }

/* Donker cijfer op een lichte vulling: de donkere schaduw van hierboven maakt
   het dan juist vuil, dus die gaat eruit. */
.lp-pin-electra.lp-pin-cijfer span { color: #0b2936; text-shadow: none; }

/* Vattenfall is het lastige geval: het cijfer staat middenin en raakt dus béide
   helften. Wit haalt op het blauw contrast 4,4 maar op het geel 1,3 — onleesbaar —
   en een donker cijfer draait dat probleem precies om. Vandaar wit met een donkere
   halo eromheen: die doet op het geel het werk en valt op het blauw weg. */
.lp-pin-vattenfall.lp-pin-cijfer span {
	color: #fff;
	text-shadow: 0 0 2px rgba( 0, 0, 0, .95 ), 0 0 3px rgba( 0, 0, 0, .7 );
}

/* Donkerrood cijfer op het Shell-geel: contrast 8,8, tegen 1,5 voor wit en 3,2 voor
   hun eigen rood — dat laatste haalt de norm voor deze tekstgrootte net niet. De
   donkere schaduw van de basisregel maakt een donker cijfer vuil, dus die gaat eruit;
   zelfde ingreep als bij Electra en bp. */
.lp-pin-shell.lp-pin-cijfer span { color: #5a1a10; text-shadow: none; }

/* HIER STOND EEN HALO OM HET ENECO-CIJFER, en die is eruit — hij was zichtbaar als
   een donkere rand om het getal. De eerste versie kopieerde de Vattenfall-aanpak
   (wit met een zware halo), en dat was het verkeerde gereedschap: bij Vattenfall
   staat het cijfer op geel met contrast 1,3 en is er geen andere uitweg, hier stond
   het op het verloop.

   Opgelost aan de bron in plaats van eroverheen: de kleurstops zijn naar binnen
   gehaald (44% in plaats van 68% voor het rood), zodat het hoogtelicht nog steeds
   linksboven zit maar het cijfer op de rode kern valt. Gemeten in het cijfervak
   ná die ingreep: 3,6 tot 5,4, midden 4,8 — tegen 2,5 tot 4,2 daarvoor. Daarmee is
   de gewone schaduw van .lp-pin-cijfer genoeg en hoeft er geen rand omheen.

   Kortom: als een cijfer een zware halo nodig heeft, kijk eerst of de achtergrond
   eronder wel klopt. */

/* E-Flux heeft precies hetzelfde probleem als Vattenfall, en gemeten nog scherper:
   wit haalt op hun paars contrast 8,5 en op het mint 1,3. Zelfde oplossing, zodat
   de twee stippen zich ook hetzelfde gedragen. */
.lp-pin-eflux.lp-pin-cijfer span {
	color: #fff;
	text-shadow: 0 0 2px rgba( 0, 0, 0, .95 ), 0 0 3px rgba( 0, 0, 0, .7 );
}
.lp-pin-bp.lp-pin-cijfer span      { color: #005232; text-shadow: none; }

/* Wit cijfer op een lichte of wisselende vulling heeft meer dan de standaard
   schaduw nodig: op Allego-groen haalt wit maar contrast 2,5, en op het geel in
   het TotalEnergies-verloop zelfs 1,4. Een donkere halo eromheen maakt het op
   elke ondergrond leesbaar zonder de kleur zelf aan te tasten. */
.lp-pin-allego.lp-pin-cijfer span,
.lp-pin-total.lp-pin-cijfer span {
	text-shadow: 0 0 3px rgba( 0, 0, 0, .9 ), 0 1px 2px rgba( 0, 0, 0, .85 );
}

/* ── PROEF: het QualiCharge-bordje ────────────────────────────────────────────
 *
 * Naar het voorbeeld van qualicharge.beta.gouv.fr: vermogen boven, 'vrij / totaal'
 * eronder. Hangt aan `#bordjes` in de URL; zie bordjeIcoon() in laadpalen.js voor
 * waarom dit proefwerk is en wat het kost aan informatie (de merkkleur van de stip).
 *
 * DE KLEUR IS DIE VAN DE STIP en komt uit dezelfde `lp-pin-*`-klassen: het merk dus,
 * niet het vermogen. Hier stond een groentrap naar vermogen (zoals QualiCharge doet) en
 * die is er op verzoek uit — zie de noot bij bordjeIcoon() in laadpalen.js. Kort: de
 * stip, de clusterbol en de onderweg-laag spreken allemaal merk, en één laag die als
 * enige vermogen spreekt maakt de kaart dubbelzinnig. Het vermogen staat er als getal.
 *
 * DE BAND ERFT DUS OOK DE UITZONDERINGEN op de cijferkleur (`.lp-pin-fastned
 * .lp-pin-cijfer span` en de rest), en dat is de hele reden om die klassen te
 * hergebruiken in plaats van de kleuren over te schrijven.
 *
 * DE ONDERSTE REGEL IS WIT EN NIET DOORZICHTIG. Op een luchtfoto of een drukke
 * vectorkaart is '2/4' in donkere letters op de kaart zelf niet te lezen; het witte
 * strookje maakt er een bordje van in plaats van zwevende tekst. Zo doet QualiCharge
 * het ook, en het is dezelfde reden dat het verbodsbord en de matrixborden hun eigen
 * ondergrond dragen. */
.lp-bordje {
	position: relative;
	box-sizing: border-box;
	height: 34px;
	border: 2px solid #fff;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .4 );
	font-family: var( --font-heading, sans-serif );
	line-height: 1;
}

/* Alleen de vorm; kleur en letter komen van de merkklassen. `display: flex` omdat het
   getal een eigen span is — die eist `.lp-pin-cijfer span`, en zo staat hij gecentreerd
   zonder dat de regelhoogte van de kaart eraan trekt. */
.lp-bordje-kw {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 17px;
	box-sizing: border-box;
	border-radius: 3px 3px 0 0;

	/* Een paar merken dragen een eigen box-shadow (Fastned, Circle K) om de stip van
	   een lichte tegel los te houden. Op een band midden in het bordje tekent dat een
	   ring dwars door de vorm; de witte rand van het bordje doet dat werk hier al. */
	box-shadow: none;
}

/* HIER STOND EEN DOORZICHTIGE RAND IN `:where()`, die de `border-color` van vier
   merkklassen (Circle K oranje, Shell rood, Electra donkerblauw, Fastned geel) op de
   band zichtbaar maakte. OP VERZOEK WEG: op een band van 17 px las die tweede kleur
   niet als merkteken maar als een ring om het vlak — geel om bruin bij Fastned.

   Zonder deze regel heeft de band geen randbreedte, dus de `border-color` van de
   merkklassen doet er niets meer; de stippen houden hun rand gewoon. Zet je hem
   terug, dan moet het via `:where()`: een gewone `.lp-bordje-kw { border: ... }` heeft
   dezelfde soortelijkheid als `.lp-pin-circlek` en staat verderop in dit bestand, dus
   die wint en maakt élke rand doorzichtig. */

/* CIRCLE K KRIJGT ZIJN EIGEN BAND IN PLAATS VAN EEN RANDJE.
 *
 * Op de stip doet een oranje rand het werk: hun #ee2e24 ligt 22 RGB-eenheden van
 * Tesla's #e31937, en zonder dat verschil zijn het twee dezelfde rode stippen. Op dit
 * bordje bleek die rand te weinig — een lijn van 2 px om een band van 17 valt niet op
 * naast een effen rood vlak van dezelfde maat.
 *
 * Vandaar hun vlag zelf: onderste derde oranje, een haarlijn wit ertussen, rood
 * daarboven. Dat is in één oogopslag iets ánders dan Tesla, en het is nog steeds
 * Circle K — dezelfde twee kleuren als de stip, alleen anders verdeeld.
 *
 * ALLEEN OP HET BORDJE, NIET OP DE STIP. Deze regel staat daarom op de combinatie van
 * beide klassen; `.lp-pin-circlek` zelf blijft wat het was, anders verandert de stip
 * mee en dat is niet gevraagd. De twee kleuren staan daarmee wél op twee plekken —
 * wijzig je er één, wijzig dan de ander mee.
 *
 * DE BAND BLIJFT NU DE RANDEN WEG ZIJN. Circle K was juist het merk waarvoor een
 * randje niet volstond, dus dit is de plek waar het onderscheid met Tesla vandaan
 * moet komen. */
.lp-bordje-kw.lp-pin-circlek {
	/* DE ONDERSTE BAND IS EEN KWART EN GEEN DERDE, en dat is een botsing die je pas
	   ziet als het getal erin staat. Een derde van 17 px is 5,7 px, plus 1 px wit,
	   plus 11 px cijfer is 17,7 — dat past niet. Bij een derde liep de witte streep
	   dwars door de '150' en stond de onderste rand van de cijfers wit op oranje.
	   Op een kwart staan de cijfers volledig op het rood en blijft de vlag herkenbaar.
	   Wil je de derde tóch, dan moet de band 2 px hoger en het bordje dus ook. */
	background: linear-gradient( to bottom,
		#ee2e24 0 70%,
		#fff    70% 76%,
		#f99b2a 76% 100% );
	/* De cijfers naar boven, weg van de vlag: gecentreerd zouden ze er middenin
	   hangen. Alleen hier, dus het scheelt hooguit een pixel met de andere merken. */
	align-items: flex-start;
	padding-top: 1px;
}

/* HIER STOND `text-shadow: none` OM DE CIJFERS SCHERPER TE KRIJGEN, en dat brak stil
   vier merken. Vattenfall, E-Flux, Allego en TotalEnergies dragen hun leesbaarheid
   juist in een donkere halo — hun cijfer valt over twee tinten, en wit haalt op het
   gele deel contrast 1,3. Die halo's staan in regels met dezelfde soortelijkheid als
   deze, dus wie hier later staat wint: mijn regel stond eronder en zette ze alle vier
   uit. Op de bordjesproef was dat te zien als een wit getal op geel.

   De stipregel zet .7rem (11 px) — precies de maat die dit bordje wil — en haar
   schaduw hoort er dus gewoon bij. Zet hier niets uit zonder eerst de zes
   uitzonderingen hierboven na te lopen. */

.lp-bordje-tel {
	display: block;
	height: 13px;
	padding-top: 2px;
	box-sizing: border-box;
	text-align: center;
	background: #fff;
	color: #1c2b36;
	font-weight: 700;
	font-size: 10px;
	border-radius: 0 0 3px 3px;
}

/* ALLES BEZET: '0/2' in het rood van de volle regel in de popup (.lp-lader-vol),
   zodat 'vol' op de kaart hetzelfde betekent als in het kaartje. Alleen de kleur en
   geen vlak: het strookje is 13 px hoog en een gevulde achtergrond zou de bodem van
   het bordje overnemen. Ook in donkere modus dit rood — het strookje zelf blijft wit,
   want het is een markering op de kaart en niet een blok in de pagina. */
.lp-bordje-tel.is-bezet { color: #a3271a; }

/* Het puntje onderaan, zodat het bordje op een plek wijst en niet zweeft. Buiten de
   afgeronde hoeken getekend, dus geen overflow:hidden op .lp-bordje. */
.lp-bordje::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #fff;
	border-bottom: 0;
	filter: drop-shadow( 0 1px 1px rgba( 0, 0, 0, .3 ) );
}

/* Zelfde twee randen als bij de stip, zodat favoriet en gemeden overal hetzelfde
   betekenen. */
.lp-bordje.is-fav     { box-shadow: 0 0 0 2px #e8a800, 0 1px 3px rgba( 0, 0, 0, .4 ); }
.lp-bordje.is-gemeden { box-shadow: 0 0 0 2px #b04a3f, 0 1px 3px rgba( 0, 0, 0, .4 ); opacity: .55; }

/* ── Taartring: één partje per lader ──────────────────────────────────────────
 * Groen is vrij, rood bezet, grijs onbekend of buiten dienst. De kern houdt de
 * vermogenskleur aan, zodat die betekenis overeind blijft. */
.lp-taart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, .35 ) );
}

.lp-taart svg { position: absolute; inset: 0; }

.lp-taart-kern {
	position: relative;
	border-radius: 50%;
	border: 2px solid #fff;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --font-heading, sans-serif );
	font-weight: 800;
	font-size: .66rem;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .5 );
}

/* ── Clusters ─────────────────────────────────────────────────────────────────
 * Neutraal blauw, zodat groen/geel op de kaart altijd vermogen betekent en nooit
 * "aantal stations". Overschrijft de standaardstyling van Leaflet.markercluster. */
.lp-cluster {
	background: rgba( 25, 130, 209, .28 );
	border-radius: 50%;
	text-align: center;
}

.lp-cluster div {
	width: 26px;
	height: 26px;
	margin: 4px auto;
	background: var( --color-primary, #1982d1 );
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --font-heading, sans-serif );
	font-weight: 700;
	font-size: .78rem;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .3 );
}

.lp-cluster-m div { width: 32px; height: 32px; font-size: .82rem; }
.lp-cluster-l div { width: 38px; height: 38px; font-size: .86rem; }

/* ── Ritplanner ───────────────────────────────────────────────────────────────
 * Hergebruikt de opmaak van de onderweg-modus (.lp-onderweg-*, .lp-ow-*); hier
 * staat alleen wat daar niet in zit. */
.lp-filter-breed { grid-column: 1 / -1; }

/* ── Het plannerpaneel ───────────────────────────────────────────────────────
 *
 * WAT HIER MIS WAS. Het paneel was één lange kolom invoervelden met overal
 * hetzelfde gewicht: dezelfde kapitalen boven elk veld, dezelfde vakjes eronder.
 * Op een telefoon, waar het het hele scherm vult, betekende dat ruim tweeduizend
 * pixels vegen voordat je 'Rit plannen' tegenkwam — en tot die tijd zag je
 * niet waar je was.
 *
 * DRIE LAGEN, GESORTEERD OP HOE VAAK ZE VERANDEREN. De reis staat open (elke rit
 * anders), je auto en de stopregels zijn dichtgeklapt (zelden anders) en dragen
 * hun eigen waarden in de kop. De knop staat in een plakkende voet. Kapitalen
 * zijn daarmee gereserveerd voor die koppen: hoofdletters betekenen hier 'nieuw
 * onderdeel' en niets anders meer.
 *
 * De reis heeft er zelf géén: een kop die alleen 'DE REIS' zegt herhaalt de
 * kopbalk van het paneel, en op een telefoon kostte dat ~55px vóór rij A. Een
 * dichtgeklapt onderdeel kan niet zonder — dáár is de kop het hele onderdeel —
 * maar dit onderdeel staat altijd open en begint met een gemarkeerde rij A.
 *
 * TWEE KLEUREN MET EEN BETEKENIS, uit het thema:
 *   --pl-weg     Carblogger-blauw, voor alles wat jij aanwijst (route, markers).
 *   --pl-stroom  het gele accent, donker genoeg voor tekst, voor alles wat over
 *                stroom gaat (kW, procenten, de bliksem op de planknop).
 * Zo zegt de kleur waar iets vandaan komt in plaats van dat het opvalt. */
.lp-planner {
	--pl-weg:        var( --color-primary-dark, #1267ab );
	--pl-stroom:     #a86a05;
	--pl-lijn:       #c3d1dd;
	--pl-blad:       #ffffff;
	--pl-inkt:       #1b2733;
	--pl-inkt-zacht: #5a6b7b;

	/* De maten van de reisstrook. De lijn wordt op deze getallen uitgerekend, dus
	   ze staan hier bij elkaar en niet verspreid door de regels hieronder. */
	--pl-marker:     28px;
	--pl-rij-links:  4px;
	--pl-rij-gat:    8px;
	--pl-rij-h:      46px;
	--pl-knop-h:     32px;
	--pl-doelrij-h:  44px;   /* de bestemmingsrij van de voordeur; daar mikt de lijn op */
	--pl-spoor-x:    calc( var( --pl-rij-links ) + var( --pl-marker ) / 2 );
}

/* Geen raster meer: de kolommen zitten nu binnen een onderdeel, niet erboven.
   Gescopet op .lp-planner, want .lp-onderweg-velden staat ook in de
   onderweg-modus en die is ongemoeid gelaten. */
.lp-planner .lp-onderweg-velden {
	display: block;
	margin-bottom: 0;
}

.lp-pl-deel {
	border-top: 1px solid var( --pl-lijn );
	padding: 0;
}
.lp-pl-deel:first-of-type { border-top: 0; }

/* De reis heeft geen kop (zie de toelichting bovenaan), dus ook niet de .5rem +
   48px die zo'n kop meebracht. Zonder deze regel raakt marker A bijna de
   plakkende kopbalk van het paneel; .35rem bovenop de .9rem van
   .lp-onderweg-inhoud houdt daar net genoeg lucht. */
.lp-pl-deel-reis { padding-top: .35rem; }

/* De kop van een onderdeel. Bij een dichtgeklapt onderdeel is dit een <summary>
   en dus het hele tikvlak; vandaar de 48px, ruim boven de duimondergrens. */
.lp-pl-deelkop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .6rem;
	min-height: 48px;
	padding: .5rem 0;
}

summary.lp-pl-deelkop { cursor: pointer; list-style: none; }
summary.lp-pl-deelkop::-webkit-details-marker { display: none; }
summary.lp-pl-deelkop:focus-visible { outline: 2px solid var( --pl-weg ); outline-offset: 2px; }

.lp-pl-deeltitel {
	order: 1;
	font-family: var( --font-heading, sans-serif );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --pl-inkt-zacht );
}

/* Het chevronnetje, met de hand getekend zodat er geen icoonlettertype voor
   nodig is op een plek waar het alleen open/dicht zegt. */
summary.lp-pl-deelkop::after {
	content: '';
	order: 2;
	flex: none;
	margin-left: auto;
	width: .5rem;
	height: .5rem;
	border-right: 2px solid var( --pl-inkt-zacht );
	border-bottom: 2px solid var( --pl-inkt-zacht );
	transform: translateY( -.15rem ) rotate( 45deg );
	transition: transform .18s ease;
}
.lp-pl-vouw[open] > summary.lp-pl-deelkop::after {
	transform: translateY( .1rem ) rotate( -135deg );
}
@media ( prefers-reduced-motion: reduce ) {
	summary.lp-pl-deelkop::after { transition: none; }
}

/* De waarden van een dichtgeklapt onderdeel, op een eigen regel onder de kop:
   op 390px is er geen ruimte om ze naast de titel te zetten zonder ze af te
   kappen, en een half afgekapte samenvatting is erger dan geen. Openklappen
   laat ze weg — dan staan de velden er zelf. */
.lp-pl-samenvat {
	order: 3;
	flex: 1 0 100%;
	font-size: .88rem;
	line-height: 1.35;
	color: var( --pl-inkt );
	font-variant-numeric: tabular-nums;
}
.lp-pl-samenvat:empty { display: none; }
.lp-pl-vouw[open] .lp-pl-samenvat { display: none; }

/* Het gele accent draagt hier de stroomwaarden (kW, %) uit de samenvatting. */
.lp-pl-samenvat b { color: var( --pl-stroom ); font-weight: 700; }

.lp-pl-deelinhoud {
	display: grid;
	grid-template-columns: 1fr;
	gap: .7rem;
	padding: 0 0 1rem;
}

/* Vertrekmoment: één regel, label ervoor in plaats van erboven. Het is een
   bijzin bij de route, geen eigen onderwerp. */
.lp-pl-tijdrij {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .9rem 0 1rem;
}
.lp-pl-tijdrij label {
	flex: none;
	font-size: .88rem;
	color: var( --pl-inkt-zacht );
}
.lp-pl-tijdrij .lp-pl-tijd { flex: 1 1 auto; min-width: 0; }

/* ── De voet ─────────────────────────────────────────────────────────────────
 * Plakt onderaan het scrollende paneel, dus 'Rit plannen' is altijd één
 * tik ver — ook halverwege de velden en ook terwijl je door de uitslag scrollt.
 * Op mobiel is de <details> zelf het scrollgebied (zie de mediaquery verderop),
 * en daar werkt sticky op dit element omdat er geen overflow tussen zit. */
.lp-pl-voet {
	position: sticky;
	bottom: 0;
	z-index: 3;
	margin: 0;
	padding: .7rem 0 calc( .7rem + env( safe-area-inset-bottom, 0px ) );
	background: var( --pl-blad );
	box-shadow: 0 -1px 0 var( --pl-lijn ), 0 -8px 14px -10px rgba( 0, 0, 0, .25 );
}

.lp-pl-voet .lp-knop i { color: var( --color-accent, #ffcc00 ); }

/* ── Eerst de bestemming ─────────────────────────────────────────────────────
 *
 * De voordeur van het paneel: één vraag, één veld, en de plekken waar je eerder
 * heen wilde. Het volle paneel komt daarna. Zie de toelichting in
 * templates/page-laadpalen.php voor het waarom.
 *
 * DE VRAAG IS HET ENIGE GROTE TYPE IN DE HELE PLUGIN. Overal elders draagt de
 * kop een kapitaaltjeslabel dat vertelt wat het veld eronder ís; hier is de kop
 * de vraag zélf, en het veld het antwoord. Dat verschil mag je zien: dit is het
 * enige scherm met maar één ding te doen.
 *
 * DE STREEP TUSSEN 'VANAF …' EN DE SPELD IS GEEN VERSIERING. Het is hetzelfde
 * lijntje als in de reeks eronder, en het zegt hetzelfde: hier begint de rit,
 * daar eindigt hij. Hij hangt aan .lp-pl-vanaf en niet aan de speld, zodat hij
 * vanzelf verdwijnt als er geen vertrekpunt te melden is — een lijn die uit het
 * niets komt zou een punt beloven dat er niet is. */
.lp-pl-start { padding-top: .4rem; }
.lp-pl-start[hidden] { display: none; }

/* Is de voordeur open, dan is de rest van het paneel er niet: geen velden en
   geen 'Rit plannen' — die knop hoort bij een rit die nog niet bestaat. */
.lp-planner.is-eerst-waarheen .lp-onderweg-velden,
.lp-planner.is-eerst-waarheen .lp-pl-voet,
.lp-planner.is-eerst-waarheen #lp-pl-uitslag { display: none; }

.lp-pl-vraag {
	margin: 0 0 .15rem;
	font-family: var( --font-heading, sans-serif );
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var( --pl-inkt );
}

/* Vertrek en bestemming als wat ze zijn: twee punten met een lijn ertussen.
   Een open ringetje voor waar je vandaan komt (dat staat al vast, er valt hier
   niets te doen), de volle speld voor waar je heen gaat (dat is de vraag).
   Zonder die ring hing er een lijn aan een stuk tekst, en dat is geen route. */
.lp-pl-vanaf {
	position: relative;
	display: flex;
	align-items: center;
	gap: var( --pl-rij-gat );
	margin: 0;
	padding: 0 0 .5rem var( --pl-rij-links );
	font-size: .88rem;
	color: var( --pl-inkt-zacht );
}
.lp-pl-vanaf[hidden] { display: none; }

/* De ring staat midden in een kolom zo breed als de speld eronder, zodat de twee
   op dezelfde lijn liggen en de tekst met het invoerveld uitlijnt. */
.lp-pl-vanaf::before {
	content: '';
	flex: none;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	margin: 0 calc( ( var( --pl-marker ) - 14px ) / 2 );
	border: 2px solid var( --pl-lijn );
	border-radius: 50%;
}

/* En de lijn ertussen: van onder de ring tot in het hart van de speld. */
.lp-pl-vanaf::after {
	content: '';
	position: absolute;
	left: calc( var( --pl-spoor-x ) - 1px );
	top: calc( 50% + 7px );
	bottom: calc( -1 * var( --pl-doelrij-h ) / 2 );
	width: 2px;
	border-radius: 1px;
	background: var( --pl-lijn );
}

.lp-pl-doelrij {
	display: flex;
	align-items: center;
	gap: var( --pl-rij-gat );
	min-height: var( --pl-doelrij-h );
	padding: 0 0 0 var( --pl-rij-links );
	margin-bottom: 1.4rem;
}

/* Het eind van de lijn. Geen letter en geen vlaggetje erin: op 28px wordt dat
   pap, en het zegt niets wat de plek in de lijn niet al zegt. */
.lp-pl-doelspeld {
	flex: none;
	width: var( --pl-marker );
	height: var( --pl-marker );
	border-radius: 50%;
	background: var( --pl-weg );
}

.lp-pl-start:not( .heeft-vanaf ) .lp-pl-doelspeld { display: none; }

.lp-pl-doelrij .lp-invoer-wrap { flex: 1 1 auto; min-width: 0; }

/* ── De vertrek-SoC: een slider in plaats van 'Eerder gepland' ───────────────
 * Deze plek op de voordeur was de lijst met eerdere bestemmingen; die staat nu
 * in het locatiezoekvenster (samen met Thuis, Werk en Mijn locatie). Hier komt
 * in de plaats de andere vraag die toch beantwoord moet zijn vóór er iets te
 * plannen valt. `--soc-kleur` en `--soc-pct` worden per aanslag door
 * laadpalen.js gezet (socVernieuw()); zonder JavaScript blijft de standaard
 * (groen, 90%) gewoon staan. */
.lp-pl-startsoc-kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 .4rem;
}

.lp-pl-startsoc-kop label {
	font-family: var( --font-heading, sans-serif );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --pl-inkt-zacht );
}

.lp-pl-startsoc-kop output {
	font-size: 1.1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var( --soc-kleur, #1a9850 );
}

/* Bewust géén CSS-nesting (oudere Safari) en géén gedeelde regel tussen de
   -webkit- en -moz-varianten: elke browser negeert een selector met de
   pseudo-elementen van de ándere volledig, dus samenvoegen zou de hele regel
   laten vallen in plaats van alleen het onbekende stuk. */
.lp-pl-soc-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 10px;
	margin: 0;
	border-radius: 5px;
	/* Het gevulde deel is de kleur van het moment, de rest een neutrale rail —
	   zie de toelichting bij .lp-pl-soc-slider::-webkit-slider-runnable-track
	   hieronder voor waarom dit hier en niet dáár de kleur moet dragen. */
	background: linear-gradient( to right,
		var( --soc-kleur, #1a9850 ) var( --soc-pct, 90% ),
		#dde3e9 var( --soc-pct, 90% ) );
	cursor: pointer;
}

/* WebKit/Blink tekenen desondanks hun eigen ondoorzichtige rail bovenop de
   achtergrond van het element; die moet dus doorzichtig, anders zie je de
   gradient hierboven nooit. */
.lp-pl-soc-slider::-webkit-slider-runnable-track {
	height: 10px;
	border-radius: 5px;
	background: transparent;
}

.lp-pl-soc-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	margin-top: -8px;
	border-radius: 50%;
	background: var( --soc-kleur, #1a9850 );
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .35 );
	cursor: pointer;
}

/* Firefox kent geen achtergrond-truc: -moz-range-progress is zijn eigen
   pseudo-element voor precies het gevulde stuk, dus die krijgt de kleur en
   -moz-range-track de neutrale rail. */
.lp-pl-soc-slider::-moz-range-track {
	height: 10px;
	border-radius: 5px;
	background: #dde3e9;
}

.lp-pl-soc-slider::-moz-range-progress {
	height: 10px;
	border-radius: 5px 0 0 5px;
	background: var( --soc-kleur, #1a9850 );
}

.lp-pl-soc-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --soc-kleur, #1a9850 );
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .35 );
	cursor: pointer;
}

.lp-pl-soc-slider:focus-visible { outline: 2px solid var( --pl-weg ); outline-offset: 2px; }

/* ── DE UITWEG PLAKT NIET ONDERAAN, EN DAT IS EEN CORRECTIE ──────────────────
 * Hij deed dat wel, net als de voet van het volle paneel. Op een iPhone bleek
 * dat verkeerd: zodra het toetsenbord opengaat krimpt het venster, en dan
 * verspringt alles wat op de vensterhoogte gerekend is. De knop schoof omhoog en
 * kwam mét zijn eigen ondergrond bovenop de laadstand-slider te staan — precies
 * waar je net aan zat te schuiven.
 *
 * Hij hoort ook niet vastgezet te zijn: bij 'Rit plannen' is dat terecht,
 * want dat is de knop waar het paneel voor bestaat, maar dit is een uitweg. Die
 * mag gewoon onder de lijst staan en meescrollen. Zie ook de regel verderop die
 * de vensterhoogte van dit scherm afhaalt. */
/* MET .lp-pl-start ERVOOR, en niet omdat het mooier leest. Deze voet draagt ook
   .lp-onderweg-knoppen, en dat staat verderop in dit bestand met `margin: 0 0
   .6rem`. Bij gelijke specificiteit wint de laatste, dus een kale
   `.lp-pl-startvoet { margin: … }` deed hier niets: de knop plakte tegen de
   onderste regel van de lijst en las als een vierde bestemming. */
.lp-pl-start .lp-pl-startvoet { margin: 1.75rem 0 0; }
.lp-pl-startvoet .lp-knop { flex: 1 1 auto; }

/* ── 'Haal op uit de auto' ────────────────────────────────────────────────────
 *
 * Staat er alleen voor een beheerder op een site waar elroq draait — het sjabloon
 * rendert hem anders niet (cb26_lp_autoknop()). Twee keer in het paneel: onder de
 * laadstand-slider op de voordeur, en bij 'Vertrek met'.
 *
 * BEWUST EEN STILLE KNOP. Hij vult een veld dat ook gewoon in te tikken is, en de
 * hoofdhandeling van dit paneel is en blijft 'Rit plannen'. Volle breedte omdat
 * hij in beide gevallen alleen op zijn regel staat.
 *
 * De regel eronder is leeg tot je klikt en draagt daarna wat de auto zei plus hoe
 * oud dat is. Drie standen: gewoon, `is-oud` (ouder dan een etmaal — dezelfde
 * grens waarop elroq zelf vergrijst) en `is-fout`. Die laatste twee zijn de reden
 * dat het een regel tekst is en geen tooltip: een laadstand van gisteren plant een
 * rit die niet klopt, en dat mag niet weg te klikken zijn. */
.lp-pl-auto { margin: .75rem 0 0; }
.lp-pl-auto .lp-pl-autoknop { width: 100%; }

.lp-pl-autonoot {
	margin: .4rem 0 0;
	font-size: .78rem;
	color: var( --pl-inkt-zacht );
}
.lp-pl-autonoot[hidden] { display: none; }
/* Oranje en niet rood: het getal klópt, het is alleen oud. Zelfde kleur als de
   stroomaccenten elders in het paneel. */
.lp-pl-autonoot.is-oud  { color: var( --pl-stroom ); }
.lp-pl-autonoot.is-fout { color: #d7301f; }
/* In donkere modus is #d7301f te donker om nog als tekst te lezen; zelfde
   opgehelderde rood als de andere foutmeldingen op de kaart. */
html[data-theme="dark"] .lp-pl-autonoot.is-fout { color: #f08a80; }

/* Eén focusring voor het hele paneel, in het blauw van de route. De zwarte ring
   van de browser was het enige zwart in dit blok en trok daarmee meer aandacht
   dan een veld met de cursor erin verdient. */
.lp-planner input:focus-visible,
.lp-planner select:focus-visible,
.lp-planner .lp-invoer-wrap input:focus {
	outline: 2px solid var( --pl-weg );
	outline-offset: 1px;
	border-color: var( --pl-weg );
}


/* ── De reis als route en niet als formulier ──────────────────────────────────
 *
 * De volgorde ván deze rijen ís de rit. Dat stond er wel, maar was nergens te
 * zien: het waren drie identieke kaartjes onder elkaar, en dan lijkt het een
 * lijstje instellingen waarvan de volgorde toevallig is. Nu loopt er één lijn
 * door de markers — dezelfde letters als de spelden op de kaart — en hangt de
 * knop 'Stop toevoegen' aan het ónderste eind daarvan, precies waar een nieuwe
 * stop terechtkomt. Sleep je een rij, dan verschuif je zichtbaar een punt op die
 * lijn.
 *
 * DE MARKER IS DE GREEP. Er stond eerst een apart greepje met zes puntjes
 * náást de letter: twee kleine dingen naast elkaar in de krapste kolom van het
 * paneel, die samen zeiden wat één ding kan zeggen. Je pakt nu de letter zelf
 * beet — groter raakvlak (28px), en het is ook eerlijker: je verplaatst dát
 * punt. laadpalen.js hangt het slepen daarom aan .lp-pl-letter.
 *
 * HET KAARTJE OM DE RIJ IS WEG. Een kaartje mét een veld erin is een doos in
 * een doos; het veld draagt zijn eigen rand en de rij is alleen nog opmaak.
 * Daardoor loopt de lijn ook echt dóór — hij werd eerst door de witte
 * rij-achtergrond afgedekt en was alleen in de tussenruimtes te zien.
 *
 * min-width: 0 op het invoerveld is niet optioneel: een flex-item weigert
 * anders te krimpen onder zijn inhoud, en dan duwt een lange plaatsnaam het
 * kruisje van het paneel af — op een telefoon buiten beeld. */

/* De doos waarin de lijn getekend wordt: de reeks plus de knop, en niets
   daaronder. De keuzelijst bij een dubbelzinnige naam valt er bewust buiten,
   anders liep de lijn dóór tot onder die lijst. */
.lp-pl-spoor { position: relative; }

.lp-pl-spoor::before {
	content: '';
	position: absolute;
	left: calc( var( --pl-spoor-x ) - 1px );
	top: calc( var( --pl-rij-h ) / 2 );
	bottom: calc( var( --pl-knop-h ) / 2 );
	width: 2px;
	border-radius: 1px;
	background: var( --pl-lijn );
}

.lp-pl-reeks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --pl-rij-gat );
}

.lp-pl-rij {
	position: relative;
	display: flex;
	align-items: center;
	gap: var( --pl-rij-gat );
	min-height: var( --pl-rij-h );
	padding: 0 0 0 var( --pl-rij-links );
}

/* Tijdens het slepen: de opgepakte rij gedempt, en nergens een tekstcursor —
   anders selecteer je halverwege een sleep de tekst van de rij eronder. */
.lp-pl-rij.is-sleept { opacity: .45; }
.lp-pl-reeks.is-sleepbezig { user-select: none; cursor: grabbing; }

/* ── De marker ───────────────────────────────────────────────────────────────
 * Dezelfde letter als de speld op de kaart, zodat 'B' hier en 'B' daar elkaar
 * aanwijzen — maar nu ook het handvat waarmee je hem verschuift.
 *
 * Begin en eind zijn gevuld, een tussenstop is een ring. Dat is geen versiering:
 * het zegt dat een rit altijd een begin en een eind heeft (die kun je leegmaken
 * maar niet weghalen) en dat alles daartussen erbij is
 * gezet. :first-child/:last-child doen dat zonder dat laadpalen.js er een klasse
 * voor hoeft te stempelen.
 *
 * `touch-action: none` is niet optioneel: zonder die regel ziet de browser een
 * verticale veeg als scrollen, pakt hij hem zelf af en komt er nooit een
 * pointermove aan. */
.lp-pl-letter {
	position: relative;
	z-index: 1;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --pl-marker );
	height: var( --pl-marker );
	box-sizing: border-box;
	border: 2px solid var( --pl-weg );
	border-radius: 50%;
	background: var( --pl-blad );
	color: var( --pl-weg );
	font-family: var( --font-heading, sans-serif );
	font-weight: 700;
	font-size: .72rem;
	line-height: 1;
	cursor: grab;
	touch-action: none;
	transition: transform .12s ease, box-shadow .12s ease;
}

.lp-pl-reeks > li:first-child .lp-pl-letter,
.lp-pl-reeks > li:last-child  .lp-pl-letter {
	background: var( --pl-weg );
	color: #fff;
}

.lp-pl-letter:hover { transform: scale( 1.08 ); }
.lp-pl-letter:active { cursor: grabbing; }
.lp-pl-rij.is-sleept .lp-pl-letter {
	transform: scale( 1.12 );
	box-shadow: 0 3px 10px rgba( 0, 0, 0, .28 );
}

@media ( prefers-reduced-motion: reduce ) {
	.lp-pl-letter { transition: none; }
	.lp-pl-letter:hover { transform: none; }
}

.lp-pl-rij .lp-invoer-wrap { flex: 1 1 auto; width: auto; min-width: 0; }

/* HET EIGEN KRUISJE VAN type="search" MOET HIER WEG. Elders in de planner staat
   het aan (zie de regel bij .lp-invoer-wrap input), maar in een rij staat er al
   een kruisje van onszelf pal naast — en die twee doen niet hetzelfde: het ene
   maakt het veld leeg, het andere haalt het punt uit de rit. Twee identieke
   kruisjes met verschillende gevolgen is erger dan er één missen. */
.lp-planner .lp-pl-rij .lp-invoer-wrap input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

/* HET KRUISJE WAS TE KLEIN OM TE GELOVEN. Het raakvlak was met 34px al ruim
   genoeg, maar wat je zag was een glyph van veertien pixels naast een veld van
   46 — en op een kruisje kijk je, je meet het niet. Gemeld als 'dat kleine
   kruisje werkt niet': het deed wel degelijk iets, maar het las als versiering.
   Nu 1,25rem in een raakdoel van 38px, en donkerder dan de rand ernaast.

   Nooit meer uitgegrijsd: zie zetWegKnop() in laadpalen.js — elke rij heeft
   altijd iets weg te doen. */
.lp-pl-weg {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	/* 38px, want dit is op een telefoon een raakdoel en geen muisdoel. */
	width: 38px;
	height: 38px;
	padding: 0;
	color: #7d8b99;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.lp-pl-weg:hover { color: #b1531a; }

/* De knop staat op de lijn: het plusje neemt de plaats van een marker in, want
   dáár komt de volgende stop. Een tekstknop en geen omlijnde — hij hoort bij de
   route erboven en concurreert niet met 'Rit plannen' in de voet. */
.lp-pl-toevoegen {
	display: flex;
	align-items: center;
	gap: var( --pl-rij-gat );
	width: 100%;
	min-height: var( --pl-knop-h );
	margin-top: var( --pl-rij-gat );
	border: 0;
	background: none;
	padding: 0 0 0 var( --pl-rij-links );
	color: var( --pl-weg );
	font-family: inherit;
	font-size: .92rem;
	text-align: left;
	cursor: pointer;
}

.lp-pl-toevoegen i {
	position: relative;
	z-index: 1;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --pl-marker );
	height: var( --pl-marker );
	box-sizing: border-box;
	border: 2px dashed var( --pl-lijn );
	border-radius: 50%;
	background: var( --pl-blad );
	font-size: .72rem;
}

.lp-pl-toevoegen:hover:not( [disabled] ) i { border-color: var( --pl-weg ); border-style: solid; }
.lp-pl-toevoegen[disabled] { opacity: .45; cursor: default; color: var( --pl-inkt-zacht ); }

/* Slepen is met niets aangekondigd zolang er twee punten zijn — dan valt er ook
   niets te verschuiven. Vanaf drie zet laadpalen.js deze regel aan. */
.lp-pl-hint {
	margin: .45rem 0 0;
	padding-left: var( --pl-rij-links );
	font-size: .78rem;
	color: var( --pl-inkt-zacht );
}
.lp-pl-hint[hidden] { display: none; }

/* De keuzelijst bij een dubbelzinnige naam hangt onder de hele reeks. */
.lp-pl-reeksvak { position: relative; }

.lp-planner .lp-invoer-wrap input {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: .5rem .6rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
	/* 16px voorkomt dat iOS bij focus inzoomt. */
	font-size: 16px;
	box-sizing: border-box;
}

.lp-planner .lp-invoer-wrap input::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
}

.lp-pl-kop { margin: .2rem 0 .1rem; font-size: .95rem; }

.lp-pl-totaal { margin: 0 0 .7rem; font-size: .9rem; color: #40515f; }

/* Zichtbaar maken dát de filters meetellen. Zonder deze regel lijkt een mager
   plan een fout in de planner, terwijl het gewoon je eigen instelling is. */
.lp-pl-filters {
	margin: 0 0 .5rem;
	padding: .35rem .6rem;
	font-size: .82rem;
	color: #40515f;
	background: #f0f4f8;
	border-radius: 6px;
}

.lp-pl-kanttekening {
	display: block;
	font-size: .78rem;
	color: #7a8ba0;
	font-weight: 400;
}

/* Laadtijd rechts in de regel, tegenhanger van .lp-ow-km links. */
.lp-pl-laden {
	flex: none;
	text-align: right;
	font-size: .84rem;
	line-height: 1.2;
	color: #40515f;
}

.lp-pl-laden small { display: block; color: #7a8ba0; font-size: .76rem; }
.lp-pl-soc { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Vertrekmoment: zelfde look als de andere invoervelden. */
.lp-pl-tijd {
	width: 100%;
	min-height: 44px;
	padding: .5rem .6rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 16px;   /* voorkomt inzoomen bij focus op iOS */
	color: #33414e;
	box-sizing: border-box;
}

/* Geschat aankomsttijdstip + drukte-indicatie onder een stop. */
.lp-pl-aanktijd { display: block; color: #7a8ba0; font-size: .76rem; margin-top: .1rem; }
/* Dagteller achter een aankomsttijd die op een volgende kalenderdag valt. Een
   kale '06:12' bij een rit van twaalf uur leest anders als vanochtend. */
.lp-pl-dag {
	display: inline-block;
	margin-left: .25em;
	padding: 0 .3em;
	border-radius: 3px;
	background: #eef2f6;
	color: #4a5a6a;
	font-size: .92em;
	font-weight: 700;
}
/* De uitleg waaróm het druk kan zijn — verborgen tot je op het label tikt. */
.lp-druk-waarom { display: block; color: #6b7c8c; font-size: .72rem; line-height: 1.35; margin-top: .15rem; }
.lp-druk-waarom[hidden] { display: none; }
/* Het label is een knop (tik = uitleg open/dicht), dus de button-standaarden weg. */
.lp-druk {
	display: inline-block;
	padding: 0 .45rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	vertical-align: baseline;
}
.lp-druk i { font-size: .9em; margin-left: .15em; opacity: .85; }
.lp-druk-rustig { background: #e2f3e8; color: #1b7a3d; }
.lp-druk-matig  { background: #fbefd0; color: #8a6a12; }
.lp-druk-druk   { background: #fbe0cd; color: #b1531a; }
.lp-druk-vol    { background: #f9dcdc; color: #ad2626; }

/* Start-/bestemmingsregel in het plan: zelfde 3-koloms opbouw als een stop, maar
   rustiger (geen laadtijd, alleen de lading), zodat begin- en eindstand meelezen. */
.lp-pl-eindpunt { background: #f4f7fa; }
.lp-pl-punt {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b7c8c;
	margin-right: .35rem;
}
.lp-pl-eindpunt .lp-pl-soc { font-size: .92rem; }

/* Een eigen tussenstop in de reislijst. Zelfde opbouw als een laadstop, maar
   zonder laadtijd en met een gedempte achtergrond: hier gebeurt niets met de
   accu, en dat verschil moet je in één oogopslag zien. Wél een laadstand, in
   dezelfde maat als de vertrek- en aankomstregel — zo staan de percentages van
   A tot Z onder elkaar. */
.lp-pl-tussenstop { background: #f4f7fa; }
.lp-pl-tussenstop .lp-pl-soc { font-size: .92rem; }

/* Merk-accent: kleine kleurstip vóór de aanbieder van een herkenbaar netwerk. */
.lp-merk {
	display: inline-block;
	width: .58rem;
	height: .58rem;
	border-radius: 50%;
	margin-right: .3rem;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .12 );
}

.lp-pl-slot { margin: .6rem 0 0; font-size: .9rem; }

.lp-pl-vink {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	font-size: .9rem;
	cursor: pointer;
}

.lp-pl-vink input { width: 18px; height: 18px; flex: none; }

/* ── Vaste stops (favorieten) ─────────────────────────────────────────────── */
.lp-fav-ster { color: #e8a800; }

/* De duim staat naast de titel in .lp-popup-titelrij (zie laadpalen.css bij
   .lp-popup-kop), niet meer gefloat ín de titel — dat floatte hem tot tegen
   de popuprand, tegen Leaflets sluitknop aan. Kleiner tikvlak dan voorheen
   (38px → 30px) kan nu ook: hij hoeft niet meer een hele titelregel te vullen. */
.lp-popup-titelrij .lp-fav-knop {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	/* Kleiner dan de 1,6rem die de ster had: een Font Awesome-duim vult zijn
	   vierkant helemaal, een sterglyph liet rondom witruimte. Op 1,6rem werd de
	   duim te fors voor de titelregel. */
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}

/* Uit is een omlijnde duim (far), aan een gevulde (fas) — zie de klassenwissel in
   laadpalen.js. De stand mag niet alleen aan kleur hangen. Het grijs is donker
   genoeg om als knop te lezen; #c3ccd5 was zo licht dat hij op de kaart wegviel. */
.lp-popup-titelrij .lp-fav-ster { color: #8a97a3; }
.lp-popup-titelrij .lp-fav-knop:hover { background: #f2f5f8; }
.lp-popup-titelrij .lp-fav-knop:hover .lp-fav-ster { color: #e8a800; }

.lp-popup-titelrij .lp-fav-knop.is-fav .lp-fav-ster {
	color: #e8a800;
	/* Een dun donker randje om de gevulde duim, zodat hij ook op een lichte
	   ondergrond een duidelijke vorm houdt. */
	text-shadow: 0 0 1px rgba( 120, 85, 0, .55 );
}

.lp-popup-titelrij .lp-fav-knop:focus-visible { outline: 2px solid #0b6bb5; outline-offset: 1px; }

/* Ring om de stip. Twee klassen, zodat dit wint van de merkkleuren hierboven —
   ook van Fastned, dat zijn eigen box-shadow zet. */
.lp-pin.is-fav {
	box-shadow: 0 0 0 2px #e8a800, 0 1px 3px rgba( 0, 0, 0, .4 );
}

.lp-planstop.is-fav { border-color: #e8a800; background: #7a5c00; }

.lp-ow-rij.is-fav { background: #fffbf0; }

/* Overzicht in het plannerblok. */
.lp-pl-fav { margin: .3rem 0 .5rem; font-size: .85rem; line-height: 1.8; }

/* Losse toelichting tussen de stops; geen eigen nummer in de genummerde lijst. */
.lp-pl-notitie {
	list-style: none;
	margin: -.2rem 0 .4rem;
	padding: .3rem .6rem;
	font-size: .8rem;
	color: #6b5200;
	background: #fff8e1;
	border-radius: 6px;
}

/* Vaste stops die het plan niet haalde. Dezelfde amberfamilie als de chips en de
   duim omhoog — het gaat over dezelfde keuze — maar met een rand links, want dit
   is een mededeling over dit plan en geen knop. */
.lp-pl-mist {
	margin: 0 0 .5rem;
	padding: .4rem .6rem;
	border-left: 4px solid #e8a800;
	border-radius: 0 6px 6px 0;
	font-size: .82rem;
	line-height: 1.5;
	color: #6b5200;
	background: #fff8e1;
}

.lp-fav-chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	min-height: 30px;
	padding: .15rem .5rem;
	border: 1px solid #e8a800;
	border-radius: 999px;
	background: #fff8e1;
	font: inherit;
	font-size: .8rem;
	color: #6b5200;
	cursor: pointer;
}

.lp-fav-chip:hover { background: #ffeeba; }
.lp-pl-krap { color: #b45309; font-weight: 600; }

/* ── Vermijden: het spiegelbeeld van de duim omhoog ──────────────────────────
   Zelfde maatvoering en dezelfde plek in de titelregel, maar in gedempt rood en
   omlijnd/gevuld (far/fas) — de stand mag ook hier niet alleen aan kleur hangen. */
.lp-mijd-teken { color: #b04a3f; }

.lp-popup-titelrij .lp-mijd-knop {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	/* Gelijk aan de duim omhoog hiernaast: twee even grote iconen naast elkaar. */
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}

.lp-popup-titelrij .lp-mijd-teken { color: #8a97a3; }
.lp-popup-titelrij .lp-mijd-knop:hover { background: #f7f2f2; }
.lp-popup-titelrij .lp-mijd-knop:hover .lp-mijd-teken { color: #b04a3f; }
.lp-popup-titelrij .lp-mijd-knop.is-gemeden .lp-mijd-teken {
	color: #b04a3f;
	text-shadow: 0 0 1px rgba( 110, 30, 20, .5 );
}
.lp-popup-titelrij .lp-mijd-knop:focus-visible { outline: 2px solid #0b6bb5; outline-offset: 1px; }

/* De regel die in de popup verschijnt zodra je een station vermijdt. */
.lp-popup-gemeden {
	margin: .1rem 0 .3rem;
	font-size: .82rem;
	color: #8f3b32;
}

/* Vrachtwagenlader: doorzichtiger, op verzoek. Hij blijft staan en blijft
   aanklikbaar — de stekker is gewoon CCS en past op een auto — maar het laadplein
   eromheen is voor vrachtverkeer ingericht, en dat mag je aan de stip zien zonder
   dat je hem hoeft aan te klikken. Zestien stations in de dataset.

   .62 en niet lager: het cijfer moet leesbaar blijven op een lichte tegel. Wél
   lichter gedempt dan .is-gemeden (.55), want dat is een keuze die jij hebt gemaakt
   en dit een eigenschap van de plek — die eerste hoort zwaarder te wegen. Staan ze
   allebei aan, dan wint .is-gemeden doordat hij hieronder staat.

   ALLEEN DOORZICHTIGHEID IS GEEN BOODSCHAP: wie dat verschil niet ziet, leest het
   in de popup ('Vrachtwagenlader — de stekker past op een auto, maar dit laadplein
   is voor vrachtverkeer ingericht'). Haal die regel dus niet weg. */
.lp-pin.is-vracht { opacity: .62; }

/* Gedempte stip met een rode ring: nog steeds vindbaar op de kaart — je kunt hem
   in nood nodig hebben — maar duidelijk niet in de running. Twee klassen, zodat
   dit wint van de merkkleuren. */
.lp-pin.is-gemeden {
	box-shadow: 0 0 0 2px #b04a3f, 0 1px 3px rgba( 0, 0, 0, .4 );
	opacity: .55;
}

.lp-mijd-chip {
	border-color: #d8a49d;
	background: #fdf1ef;
	color: #8f3b32;
}
.lp-mijd-chip:hover { background: #fbe2de; }

/* 'richtprijs' — het woord dat het verschil maakt tussen een prijs van dit station
   en een gemiddelde van het netwerk. Gedempt, maar nooit weglaten.

   De voorwaarden staan op een eigen regel eronder, kleiner: bij Fastned is die
   noot ('contactloze pas 0,77; via de app…') drie regels lang, en achter het
   bedrag aan las het als één doorlopende zin waarin het bedrag zelf verdronk. */
.lp-richtprijs {
	display: block;
	margin-top: .1rem;
	font-size: .74rem;
	line-height: 1.35;
	color: #6b7c8c;
}

/* Wanneer de prijs voor het laatst is nagekeken. Zelfde vorm als .lp-richtprijs
   hierboven — het staat er vlak onder en twee maten door elkaar leest als twee
   soorten informatie — maar een tint lichter en cursief, zodat het als bijschrift
   bij de prijs leest en niet als nog een voorwaarde. Zie tariefDatumRegel(). */
.lp-tariefdatum {
	display: block;
	margin-top: .1rem;
	font-size: .74rem;
	line-height: 1.35;
	font-style: italic;
	color: #8b98a5;
}

/* 'incl. btw' achter het bedrag. Bewust NIET display:block zoals de twee hierboven:
   dit hoort bij het bedrag zelf en niet eronder — het is de eenheid, geen noot. Wel
   dezelfde gedempte kleur en kleinere maat, zodat het bedrag het zwaartepunt van de
   regel blijft. Zie btwNoot() in laadpalen.js. */
.lp-btw {
	font-size: .74rem;
	font-weight: 400;
	color: #6b7c8c;
	white-space: nowrap;
}

/* Genummerde stop op de kaart: bewust een ring in de accentkleur en niet nog
   een gekleurde stip, zodat hij niet met de merkkleuren concurreert. */
.lp-planstop {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1f2d3a;
	border: 3px solid #ffcc00;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .45 );
	color: #fff;
	font-family: var( --font-heading, sans-serif );
	font-weight: 800;
	font-size: .8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* ── Popup ────────────────────────────────────────────────────────────────────
 * Bewust compact: de popup deelt de ruimte met de kaart eronder. Elke extra
 * regelhoogte gaat af van wat je van de omgeving ziet. */
.lp-popup { font-size: .84rem; line-height: 1.35; }

/* Ruimte houden voor de sluitknop rechtsboven, anders loopt een lange titel
 * eronderdoor. */
.lp-popup h3 {
	margin: 0 .9rem .1rem 0;
	font-size: .95rem;
	line-height: 1.25;
	font-family: var( --font-heading, sans-serif );
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* De aanbieder is een ondertitel, geen kop. Hij stond in vol blauw op
 * kapitalen met letterafstand — bij een lange netwerknaam (E-FLUX BY ROAD)
 * schreeuwde dat harder dan de stationsnaam erboven, en die is waar je naar
 * zoekt. Nu gedempt en in normale schrijfwijze. */
.lp-popup .lp-popup-op {
	margin: 0;
	font-size: .78rem;
	color: #5a6b7b;
	font-weight: 600;
}

/* DE MERKNAAM IS DE UITZONDERING: op verzoek groter. 'Tesla' of 'Fastned' is voor
   veel bezoekers het eerste waar ze op afgaan — welk netwerk het is bepaalt of je
   er kunt laden, wat het kost en of je pas hoeft te pinnen. Op .78rem verdween dat
   onder de stationsnaam.

   .88rem en niet groter, want de kop erboven staat op .95rem: de naam van de plek
   moet de kop blijven. Dat was ook de reden dat deze regel ooit gedempt is (hij
   stond in blauwe kapitalen en schreeuwde harder dan de titel) — die les blijft
   staan, alleen de maat verschuift.

   Eigen klasse, want .lp-popup-op zit óók op de eerste regel van de filekaartjes. */
.lp-popup .lp-popup-merk { font-size: .88rem; }

/* De platformexploitant achter de merknaam ('Shell Recharge via E-Flux by Road').
   Kleiner en grijzer, want het is een bijzin: het merk is waar je op zoekt, dit is
   wie de paal draait. Staat er alleen als de twee uiteenlopen — zie popupHtml(). */
.lp-popup .lp-popup-exploitant {
	color: #5a6b7b;
	font-size: .8rem;
	font-weight: 400;
	white-space: nowrap;
}

/* Het merkvlak linksboven: het logo neemt de plaats van de letterbadge in. Zie
   popupBadge() in laadpalen.js voor waarom.

   HOOGTE STUURT, BREEDTE VOLGT — met een grens. De logo's verschillen enorm van
   verhouding: Vattenfall is 708×109 (6,5:1), Tesla 279×360 (staand). Zou dit vlak
   vierkant blijven, dan wordt een woordmerk vijf pixels hoog en onleesbaar; zou de
   breedte vrij zijn, dan duwt Vattenfall de titel van het kaartje. Vandaar 36 px
   hoog — dezelfde maat als de letterbadge, zodat de kop niet verspringt tussen een
   merk mét en zonder logo — en hoogstens 104 px breed.

   Geen achtergrond en geen randje: de logo's dragen hun eigen kleur. Shell op een
   geel vierkant is het merk twee keer. */
.lp-popup-badge-logo {
	flex: none;
	height: 36px;
	width: auto;
	max-width: 104px;
	object-fit: contain;
	object-position: left center;
	margin-top: .1rem;
}

/* Eén merk heeft een vlak nodig: Electra's woordmerk is donkerblauw en hoort in hun
   huisstijl op mint. Padding en border-box, zodat het vlak even hoog blijft als de
   letterbadge (36 px) en het logo er niet tegenaan plakt. */
.lp-popup-badge-logo.op-vlak {
	box-sizing: border-box;
	padding: 4px 6px;
	border-radius: 8px;
}

/* ── Kop: merkbalk + badge + naam/aanbieder ────────────────────────────────
 * Drie lagen die hetzelfde zeggen, van grof naar fijn: de balk is van ver
 * zichtbaar, de badge geeft de letter zodra je dichterbij kijkt, de naam
 * eronder is voor de zekerheid. Alle drie dezelfde MERK_KLEUR — zie
 * popupHtml() en popupBadge() — dus geen tweede kleurbeslissing die uit de
 * pas kan gaan lopen met de stippen op de kaart. */
.lp-popup-kop {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin-bottom: .35rem;
}
/* De merkstreep hoort langs het HÉLE kaartje, niet langs de kop.
 *
 * Als los element binnen de kop rekte hij met 'stretch' mee tot onder de
 * aanbiedersregel en hield hij daar willekeurig op — een streep die eruitzag
 * alsof hij er per ongeluk stond. Nu zet popupopen (laadpalen.js) de merkkleur
 * als --lp-merk op het popup-element, en pakt de wrapper daarvan zijn
 * linkerrand. Dat is het element dat Leaflet zelf om de inhoud zet, dus de
 * streep loopt automatisch precies zo hoog als het kaartje.
 *
 * Het losse element blijft in de HTML staan als terugval: krijgt de wrapper om
 * welke reden dan ook geen variabele mee, dan is er geen streep — en dat is
 * beter dan een halve. */
.lp-popup-merkbalk { display: none; }

/* Een inset-schaduw en géén border-left: een rand telt mee in de breedte van de
 * wrapper, bovenop de breedte die Leaflet aan de inhoud geeft (maxWidth) plus de
 * binnenmarge daarvan. Daarmee werd het kaartje 5px breder dan het budget en
 * viel de rechterkolom van de voorzieningenlijst buiten het scherm. Een inset
 * schaduw kost geen layoutbreedte. */
.leaflet-popup-content-wrapper {
	box-shadow: inset 5px 0 0 0 var( --lp-merk, transparent );
}
.lp-popup-badge {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var( --font-heading, sans-serif );
	font-weight: 800;
	font-size: .9rem;
	margin-top: .1rem;
	/* Dun lichtrandje binnen de badge — anders vallen de donkerdere merkkleuren
	   (Fastned-bruin, Allego-groen) qua vorm bijna weg tegen de popup-rand. */
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .35 );
}
.lp-popup-kop-tekst { flex: 1; min-width: 0; }

/* Titel + duimknoppen op één regel, met de titel voorop.
 *
 * NIET WRAPPEN. Met flex-wrap sprong bij een lange naam ("Wolf Energy B.V")
 * alleen de tweede duim naar een eigen regel, en die stond dan los midden in
 * de popup te zweven terwijl de eerste bovenin naast de sluitknop bleef —
 * twee knoppen van hetzelfde paar op twee verschillende plekken. De duimen
 * zitten daarom in één ondeelbaar groepje (.lp-popup-duimen) en de titel
 * krimpt in plaats van te wrappen.
 *
 * De rechtermarge houdt de sluitknop vrij: die is 36px en ligt op .5rem van
 * de rand, dus ~2,6rem in totaal. Zonder die marge kwam de duim omhoog er
 * pal naast te staan. */
.lp-popup-titelrij {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: .4rem;
	margin-right: 2.6rem;
}
.lp-popup-titelrij .lp-popup-titel { margin-right: 0; flex: 1 1 auto; min-width: 0; }
.lp-popup-duimen { flex: none; display: flex; gap: .1rem; margin-top: -.15rem; }
.lp-popup-kop-tekst h3 { margin-right: 0; }

/* ── Navigeren, opzoeken, alternatieven: alle drie een klein linkje ─────── */
/* Links uitgelijnd, niet gecentreerd — gecentreerde tekst leest als een
 * onderschrift, en dit zijn knoppen. Een linksuitgelijnde rij leest als wat
 * het is: een setje acties, op volgorde van belang. */
.lp-popup-subacties {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: .4rem .9rem;
	margin: 0 0 .2rem;
	font-size: .83rem;
}
/* De tweede rij (Alternatieven) hoort dicht tegen de eerste aan: het zijn twee
 * regels van hetzelfde blokje acties, geen twee blokken. */
.lp-popup-subacties + .lp-popup-subacties { margin-top: -.2rem; }
.lp-popup-subacties:last-of-type { margin-bottom: .85rem; }

/* Blauw, want het zijn de acties van dit kaartje — grijs las als uitgeschakeld.
 * Alternatieven is de uitzondering: zie hieronder. */
.lp-popup-subacties a {
	color: var( --color-primary, #1982d1 );
	text-decoration: none;
	font-weight: 700;
	font-size: .83rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .1rem;
}
.lp-popup-subacties a:hover { text-decoration: underline; }
/* Iconen op vaste maat, zodat de drie links even hoog zijn ook al verschillen
   de glyphs (een speld is smaller dan een loep). */
.lp-popup-subacties a > i { width: 1em; text-align: center; font-size: .95em; }

/* 'via Google Maps' — een bijschrift bij de twee links erboven, geen actie. Zelfde
   grijs als Alternatieven maar lichter van gewicht en een maat kleiner, zodat het
   onder de links door leest in plaats van ertussen. `margin-left: auto` duwt het naar
   het eind van de regel; wrapt de regel op een smal scherm, dan zakt het netjes naar
   de volgende regel in plaats van de links uit elkaar te trekken. */
.lp-popup-bron {
	margin-left: auto;
	color: #5a6b7b;
	font-weight: 500;
	font-size: .76rem;
	white-space: nowrap;
}

.lp-popup-scheiding {
	flex: none;
	width: 1px;
	height: 14px;
	background: var( --color-border, #d2d5d7 );
}

/* Alternatieven zoekt binnen de kaart zelf, niet naar buiten — een andere soort
 * actie dan de twee erboven, en eentje die je pas nodig hebt als het hier niet
 * lukt. Gedempt dus, zodat de rij erboven voorop blijft staan. */
.lp-popup-subacties a.lp-alt-knop { color: #5a6b7b; font-weight: 600; }
.lp-popup-subacties a.lp-alt-knop:hover { color: var( --color-text, #222 ); }

/* 'Probleem melden' — nog verder op de achtergrond dan Alternatieven: dit is
 * geen actie die je zoekt, hij mag alleen niet ontbreken als je hem nodig hebt.
 * Kleiner en lichter, geen vet. */
.lp-popup-subacties a.lp-meld-knop { color: #8b95a0; font-weight: 500; font-size: .78rem; }
.lp-popup-subacties a.lp-meld-knop:hover { color: #5a6b7b; }

/* ── Gegroepeerd kaartje: openingstijden, prijs, adres ────────────────────
 * Voorheen los onder elkaar (een <ul> gevolgd door een los adresregeltje),
 * wat niet liet zien dat het bij elkaar hoort. Eén vlak met een net iets
 * andere tint doet dat wél, zonder de tekst zelf te veranderen. */
.lp-popup-kaart {
	background: #eef1f4;
	border: 1px solid #dfe4e8;   /* zelfde rand als de ladersrijen */
	border-radius: 10px;
	padding: .6rem .7rem;
	margin: 0 0 .5rem;
}
.lp-popup-kaart .lp-popup-specs { margin: 0; }

/* Elke rij een eigen regel met een lijntje ertussen. De negatieve marges laten
 * dat lijntje van rand tot rand lopen, dwars door de binnenmarge heen — anders
 * hangt het los in het midden en leest het als onderstreepte tekst in plaats van
 * als scheiding. Prijs, openingstijd en adres zijn drie losse feiten; zonder die
 * lijntjes liepen ze als één lap tekst in elkaar over. */
.lp-popup-kaart .lp-popup-specs li {
	padding: .4rem 0;
	border-top: 1px solid rgba( 0, 0, 0, .09 );
	margin: 0 -.7rem;
	padding-left: .7rem;
	padding-right: .7rem;
}
.lp-popup-kaart .lp-popup-specs li:first-child { border-top: 0; padding-top: 0; }
.lp-popup-kaart .lp-popup-specs li:last-child  { padding-bottom: 0; }

/* De icoontjes voor de rijen (€, klok, speld): gedempt, want ze labelen de
 * regel — ze zijn niet zelf de informatie. */
.lp-popup-kaart .lp-popup-specs li > i {
	width: 1em;
	margin-right: .15rem;
	color: #7a8ba0;
	text-align: center;
}

.lp-popup-kaart .lp-popup-adres { color: #5a6b7b; }

/* Adres kopiëren: icoon-only naast de adrestekst, dus geen eigen regel erbij.
   Zelfde tikvlak-truc als .lp-bezet-knop — het icoontje is maar ~14px, ruim
   onder de 24px die WCAG 2.5.8 vraagt. */
.lp-adres-kopieer {
	position: relative;
	border: 0;
	background: none;
	padding: 0 .25rem;
	margin-left: .1rem;
	color: #7a8ba0;
	cursor: pointer;
	font-size: .85em;
}
.lp-adres-kopieer::after {
	content: '';
	position: absolute;
	inset: -10px -.25rem;
}
.lp-adres-kopieer:hover,
.lp-adres-kopieer:focus-visible { color: #0b6bb5; }
.lp-adres-kopieer:focus-visible { outline: 2px solid #0b6bb5; outline-offset: 1px; }
.lp-adres-kopieer.is-fout { color: #b45309; }

html[data-theme="dark"] .lp-adres-kopieer { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-adres-kopieer:hover,
html[data-theme="dark"] .lp-adres-kopieer:focus-visible { color: #6cb6ea; }

/* ── Sectielabel: "Laders", "Voorzieningen" ───────────────────────────────
 * Klein en dof met kapitalen — het is een kopje, geen tekst om te lezen. */
.lp-popup-sectie { margin: 0 0 .5rem; }

/* Label links, versheid/verversknop rechts, op één regel. Bij 'Laders' stond
 * de ouderdom eerst op een eigen regel eronder, wat drie regels kostte voor
 * twee dingen die bij elkaar horen. Zie ladersKop() voor waarom het label in
 * dat blok zit en niet in popupHtml(). */
.lp-popup-sectiekop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}
.lp-popup-sectiekop .lp-popup-sectielabel { margin-bottom: .3rem; }
.lp-popup-sectiekop .lp-live {
	margin: 0 0 .3rem;
	display: flex;
	align-items: center;
	gap: .3rem;
	text-align: right;
}
.lp-popup-sectielabel {
	margin: 0 0 .3rem;
	font-family: var( --font-heading, sans-serif );
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8a97a3;
}

.lp-popup-specs { margin: 0 0 .35rem; padding: 0; list-style: none; }
.lp-popup-specs li { margin: 0; }

/* 'Geen informatie over oorzaak' — de regel staat er altijd, ook zonder oorzaak,
   zodat 'onbekend' zichtbaar is in plaats van weggelaten. Gedempt, want het is een
   mededeling over wat er ontbreekt en niet iets om te lezen als er wél een file
   staat; het icoontje dempt mee zodat de regel als geheel naar achteren zakt. */
.lp-file-reden.is-leeg,
.lp-file-reden.is-leeg i { color: #7a8ba0; }

/* De richtingspijltjes op een filelijn, alleen ingezoomd; zie stemFilePijlenAf() in
   laadpalen.js. Ze bestaan omdat onze lijn de richtingspijl van de OSM-tegel eronder
   afdekt, en dan is niet meer te zien wélke rijbaan vaststaat.

   GEEN ACHTERGROND EN GEEN RAND: een divIcon krijgt die standaard van Leaflet mee, en
   dan staat er een wit blokje op de lijn in plaats van een pijltje. Ook geen
   pointer-events — de klik hoort bij de lijn eronder, want daar hangt de popup aan. */
.lp-file-pijl {
	background: none;
	border: 0;
	pointer-events: none;
}

.lp-file-pijl svg { display: block; }

/* Het wegnummer boven de file — zie stemFileSchildenAf() in laadpalen.js voor waarom
   we dit bordje zelf tekenen in plaats van dat van de kaart te gebruiken.

   DE KLEUREN ZIJN DIE VAN SCHILD_SOORTEN in laadpalen.js, en dat is geen toeval maar
   een afspraak: dat zijn de bordjes die de vectorkaart zelf zet (RAL 3020
   verkeersrood, RAL 1023 verkeersgeel, RAL 6024 verkeersgroen). Verandert daar een
   kleur, verander hem hier mee — anders staan er twee soorten wegnummerbordjes op
   dezelfde kaart.

   HET BORDJE KLAPT NIET OM IN DONKERE MODUS, om dezelfde reden als het verbodsbord en
   de matrixborden: een wegnummerbord dat meekleurt met de site is geen wegnummerbord
   meer. Dat gaat vanzelf goed — het donkere-modusfilter staat op de lagen ín het
   tegelvlak en dit is een marker — maar zet er dus ook geen regel voor terug.

   DE SCHILDJES VAN DE KAART ZELF DRAAIEN WÉL MEE en zien er in donkere modus dus
   anders uit dan deze. Dat is geen fout om weg te poetsen: die zitten in het
   tegelplaatje of het MapLibre-canvas en zijn van daaruit niet uit te zonderen.

   `transform` centreert het bordje op zijn punt: de divIcon heeft bewust geen
   `iconSize` (een 'A2' is smaller dan een 'N270'), en zonder maat zet Leaflet geen
   anker.

   DE MAAT IS DIE VAN DE SPRITE VAN DE KAART ZELF EN NIET EEN SMAAKKWESTIE. `road_1`
   t/m `road_6` zijn 14 px hoog (zie SCHILD_BREEDTE in laadpalen.js, dat zijn dezelfde
   plaatjes op dubbele maat), en de ring eromheen is er 1,5 px van. Vandaar 9 px tekst
   plus 1 px voering plus 1,5 px rand = precies 14, en 'N332' komt daarmee op 31 px
   breed uit — de breedte van `road_4`. Stond eerst op 11 px tekst met een rand van 2
   (18 px hoog) en dat was op verzoek te groot: het bordje was anderhalf keer dat van
   de kaart eronder, en dan leest het als een eigen speld in plaats van als het
   wegnummer. Wijk hier dus niet van af zonder ook SCHILD_BREEDTE erbij te pakken. */
/* De omhullende marker-div. Krijgt de maat van het bordje (shrink-to-fit) en zou
   dus de aanwijzing opvangen; de popup hoort bij de filelijn eronder.

   `line-height: 0` EN `font-size: 0` ZIJN GEEN OPSMUK MAAR DE UITLIJNING. Het bordje
   binnenin is een inline-block en gaat dus op een régel staan, en die regel heeft een
   strut: een onzichtbare letter met de regelhoogte van de kaartcontainer. Die duwt het
   bordje omlaag ten opzichte van de linkerbovenhoek van de marker, en de
   `translate( -50%, -50% )` hieronder rekent daar niet mee. Gemeten tegen een kruisje op
   het ankerpunt lag het midden van het bordje op 81 waar het anker op 75 lag: **6 px te
   laag op een bordje van 13** — op de kaart net naast de filelijn in plaats van erop, en
   net genoeg om als slordig te lezen zonder dat je ziet waaróm. Met een strut van nul
   begint het bordje wél in de hoek en centreert de transform hem zuiver; nagemeten komt
   het midden dan exact op het anker uit. */
.lp-file-schild-omhulsel {
	pointer-events: none;
	line-height: 0;
	font-size: 0;
}

.lp-file-schild {
	display: inline-block;
	transform: translate( -50%, -50% );
	padding: 1px 3px;
	border: 1.5px solid #fff;
	border-radius: 3px;
	background: #5a5a5a;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .35 ), 0 1px 3px rgba( 0, 0, 0, .45 );
	color: #fff;
	font-family: var( --font-heading, sans-serif );
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.lp-file-schild-a { background: #c1121c; }
.lp-file-schild-e { background: #008754; }

/* Het gele bord heeft een zwarte rand en zwarte letters. Zie de noot bij
   SCHILD_SOORTEN.

   DE DONKERE BUITENRAND VAN 1 PX STOND HIER EERST UIT, en dat maakte het bord
   kleiner dan het rode. De ring uit de box-shadow hierboven is namelijk geen opsmuk
   maar maat: hij ligt búiten de rand, dus een bordje mét ring beslaat 15 px hoog en
   een bordje zonder 13. Nagemeten op de kaart bij Leiden (A4 tegenover N444): het
   rode bord liep van y 439 tot 453, het gele van 453 tot 466. Naast elkaar leest dat
   als een kleiner N-bord, en de N-nummers zijn juist de langere namen.

   Op zwart is die ring onzichtbaar — hij ligt tegen een zwarte rand aan — dus het
   gele bord verandert alleen van maat, niet van uiterlijk. Wat blijft is de reden dat
   hij hier ooit uit ging: geel houdt zich op elke ondergrond staande en heeft de
   donkere hulplijn niet nódig. Alleen dán moet de rand zelf die pixel dragen, en dat
   deed hij niet. */
.lp-file-schild-n {
	background: #f7b500;
	border-color: #000;
	color: #000;
}

/* Het matrixportaal in de filepopup — de echte standen uit NDW, zie
   includes/laadpalen-matrix.php en matrixRij() in laadpalen.js.

   DE BORDEN HOUDEN HUN EIGEN KLEUREN OP ELK THEMA, om dezelfde reden als het
   verbodsbord bij de afsluitingen: een matrixbord dat meekleurt met de site is geen
   matrixbord meer. Het zwart, het amber en het rood komen van de weg en niet uit de
   themavariabelen. */
.lp-mx { margin: 0 0 .35rem; }

.lp-mx-rij {
	display: flex;
	gap: 3px;
	/* Een portaal kan zeven borden dragen; dat past niet in de popupbreedte. Laten
	   afbreken is beter dan schuiven: de rij blijft dan compleet en de bezoeker ziet
	   nog steeds elk bord, alleen op twee regels. */
	flex-wrap: wrap;
	margin-bottom: .25rem;
}

.lp-mx-bord { display: block; flex: 0 0 auto; }

.lp-mx-bij { margin: 0; font-size: .72rem; color: #7a8ba0; }

/* De twee knipperlampjes gaan om en om, zoals op het echte bord: de één aan terwijl
   de ander uit is. Vandaar dezelfde animatie met een halve slag verschil in plaats
   van twee losse. */
@keyframes lp-mx-knipper {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: .12; }
}

.lp-mx-lamp-a { animation: lp-mx-knipper 1s steps( 1, end ) infinite; }
.lp-mx-lamp-b { animation: lp-mx-knipper 1s steps( 1, end ) infinite -.5s; }

/* MET RUST: allebei de lampjes stil aan. Het knipperen is hier informatie — het
   onderscheidt een waarschuwing van een gewone snelheidsbeperking — dus het lampje
   helemaal verbergen zou die informatie wegnemen. Alleen de beweging gaat eruit; het
   aria-label zegt nog steeds 'knipperend'. */
@media ( prefers-reduced-motion: reduce ) {
	.lp-mx-lamp-a,
	.lp-mx-lamp-b { animation: none; opacity: 1; }
}

/* Vorige/volgende geplande stop — één compacte regel, alleen bij een plan-stop. */
.lp-planwissel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	margin: 0 0 .45rem;
	padding: .25rem .3rem;
	background: #f2f6fb;
	border-radius: 6px;
}
.lp-planwissel-knop {
	flex: none;
	border: 0;
	background: none;
	padding: .15rem .3rem;
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: var( --color-primary, #1982d1 );
	cursor: pointer;
	border-radius: 4px;
}
.lp-planwissel-knop:hover { background: #e2ecf7; }
.lp-planwissel-knop:disabled { color: #aab6c2; cursor: default; background: none; }
.lp-planwissel-tel {
	flex: 1 1 auto;
	text-align: center;
	font-size: .76rem;
	font-variant-numeric: tabular-nums;
	color: #5a6b7b;
}
html[data-theme="dark"] .lp-planwissel { background: rgba( 255, 255, 255, .06 ); }
html[data-theme="dark"] .lp-planwissel-knop { color: #6cb6ea; }
html[data-theme="dark"] .lp-planwissel-knop:hover { background: rgba( 255, 255, 255, .1 ); }
html[data-theme="dark"] .lp-planwissel-knop:disabled { color: #66727e; background: none; }
html[data-theme="dark"] .lp-planwissel-tel { color: #9aa7b4; }

/* De popup hangt in .post-body, dus de alinea-marges van het thema werken hier
 * door. Die zetten we terug — met .lp-popup ervoor, zodat de regels hieronder
 * (die twee klassen diep zijn) er alsnog overheen gaan. */
.lp-popup p { margin: 0; }

/* ── Laders per stekkertype en vermogen ───────────────────────────────────────
 * Eén regel per combinatie, met rechts hoeveel er vrij zijn. Zo zie je meteen
 * of het de snelle of de trage laders zijn die vrij staan. */
.lp-laders {
	margin: .45rem 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.lp-lader {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .7rem;
	background: #eef1f4;
	/* Dunne rand erbij: op een lichte kaart met veel wit eromheen is een vlak
	   van #eef1f4 alléén nauwelijks een vorm. */
	border: 1px solid #dfe4e8;
	border-radius: 10px;
	font-size: .84rem;
	line-height: 1.25;
}

/* Rond kleurchipje in plaats van een kaal glyph — hetzelfde idee als de
 * merkbadge boven de kop: een vlak van kleur draagt verder dan een dun
 * lijntje op .8rem. */
.lp-lader i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba( 25, 130, 209, .12 );
	color: var( --color-primary, #1982d1 );
	font-size: .72rem;
}

/* Naam boven, vermogen als eigen regeltje eronder — vandaar block op de
 * <small>. Zie liveLadersHtml() voor waarom dat niet achter de naam staat. */
.lp-lader-naam {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
}
.lp-lader-kw {
	display: block;
	margin-top: .05rem;
	color: #7a8ba0;
	font-size: .78rem;
	font-weight: 600;
}

/* De vermogensverdeling onder de stekkerlijst: '4× 600 · 8× 400 · 4× 300 kW'.
   Bewust géén eigen vlak zoals .lp-lader — het is een bijschrift bij de lijst
   erboven en geen zevende rij erin. Zie kvHtml() in laadpalen.js. */
.lp-vermogens {
	margin: -.15rem 0 .45rem;
	padding: 0 .2rem;
	color: #7a8ba0;
	font-size: .78rem;
	font-weight: 600;
}

/* Eigen regel onder de beschikbaarheidsbadges: hoeveel laadpunten er buiten
   dienst of onbekend zijn (zie buitenDienstRegel() in laadpalen.js). Zelfde
   amber als .lp-lader-druk — dit is precies zo'n kanttekening bij de badges
   erboven, geen los feitje zoals .lp-vermogens, dus wél een eigen vlak. */
.lp-buiten-dienst {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: -.15rem 0 .45rem;
	padding: .4rem .6rem;
	border-radius: 8px;
	background: #fdf1dd;
	color: #8a5a08;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.3;
}
.lp-buiten-dienst i { flex: none; font-size: .74rem; }

/* Trage laders horen er wel bij voor de volledigheid, maar mogen niet de
   aandacht trekken op een kaart over snelladen.

   ALLEEN DE NAAM DOFFER, NIET HET TELLETJE. Stond de dekking op de hele regel,
   dan werd ook het beschikbaarheidsbadge gedempt — een vrije CHAdeMO zag er dan
   uit als een uitgeschakelde. De nadruk hoort op wélke lader het is, niet op of
   je er terecht kunt. */
.lp-lader-traag .lp-lader-naam,
.lp-lader-traag > i { opacity: .6; }

/* Het getal is het antwoord op "kan ik hier terecht", dus het mag de ruimte
   hebben die het balkje eronder innam. */
.lp-lader-telling {
	flex: none;
	padding: .15rem .5rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lp-lader-vrij { background: #e3f5e8; color: #146c3a; }
.lp-lader-druk { background: #fdf1dd; color: #8a5a08; }
.lp-lader-vol  { background: #fbe4e1; color: #a3271a; }

/* Alleen een aantal, geen bezetting: bewust neutraal grijs. Groen zou hier
   suggereren dat die laders vrij zijn, en dat weten we niet. */
.lp-lader-aantal { background: #eef1f4; color: #40515f; }

.lp-lader-cijfer {
	flex: none;
	display: flex;
	align-items: center;
}

/* HET BALKJE IS ERUIT. Het herhaalde alleen wat "6/6" er al staat te zeggen, en
 * het kostte precies de hoogte die het getal nu gebruikt om groot genoeg te zijn
 * om vanaf een armlengte te lezen — wat op een telefoon in de auto de enige
 * afstand is die telt. De HTML zet het niet meer neer (zie liveLadersHtml); deze
 * regel is de terugval voor een popup die nog uit een oude cache komt. */
.lp-lader-meter { display: none; }

.lp-popup-kanttekening-in { color: #7a8ba0; font-size: .78rem; }

/* Het voorbehoud bij TomToms cijfer: beide rijrichtingen samen, merk niet
   bevestigd, of kabels tegen laadpunten. De cijfers zelf staan in het ladersblok;
   dit is wat dat blok niet kan zeggen. Geen inspringing meer — de statusbol waar
   dit ooit onder uitlijnde staat er bij een TomTom-uitslag niet meer. */
.lp-status-sub {
	display: block;
	color: #7a8ba0;
	font-size: .74rem;
	line-height: 1.25;
}

/* Zit in de bestaande statusregel en mag die niet hoger maken: de popup heeft
   nog ~20px speling (zie het hoogtebudget). Vandaar geen eigen achtergrond of
   kader — een onderstreepte tekstknop op de plek waar eerst 'bezetting
   onbekend' stond. De ruimere horizontale binnenmarge maakt hem op een telefoon
   toch aantikbaar zonder de regelhoogte te raken. */
.lp-bezet-knop {
	position: relative;
	padding: 0 .3rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: .78rem;
	color: var( --color-primary, #1982d1 );
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* De knop is maar ~16px hoog — te weinig om op een telefoon te raken (WCAG 2.5.8
   vraagt 24px). Het hoogtebudget van de popup laat geen echte hoogte toe, dus
   rekt een onzichtbaar vlak het tikgebied op tot ~36px. Boven en onder liggen
   alleen tekstregels, niets aanklikbaars, dus dit neemt geen tikken af. */
.lp-bezet-knop::after {
	content: '';
	position: absolute;
	inset: -10px -.3rem;
}

.lp-bezet-knop:hover { color: #0b6bb5; }
.lp-bezet-knop:focus-visible { outline: 2px solid #0b6bb5; outline-offset: 1px; }

.lp-popup .lp-popup-adres {
	margin: 0 0 .35rem;
	color: #5a6b7b;
	font-size: .78rem;
	line-height: 1.3;
}

.leaflet-popup-content { margin: .7rem .8rem; }

/* Voorbehoud bij CHAdeMO: het kW-getal hierboven is het piekvermogen van het
 * station, dat deze stekker niet haalt. */
.lp-popup-kanttekening {
	display: block;
	font-size: .76rem;
	color: #8a6d1f;
	line-height: 1.3;
}

.lp-popup .lp-popup-status {
	margin: 0 0 .35rem;
	padding-top: .35rem;
	border-top: 1px solid #e3e8ed;
	font-size: .8rem;
	line-height: 1.3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}

.lp-popup-status .lp-status-uitleg { flex: 0 0 100%; margin-left: 13px; }

.lp-status-bol { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lp-status-onbekend { background: #b9c3cc; }
.lp-status-vrij     { background: #1a9850; }
.lp-status-druk     { background: #e6a020; }
.lp-status-vol      { background: #d7301f; }

/* Zolang het verzoek loopt: kloppend bolletje, zodat het niet lijkt alsof er
   al een uitkomst is. */
.lp-status-bezig {
	background: var( --color-primary, #1982d1 );
	animation: lp-klop 1s ease-in-out infinite;
}

.lp-status-laden { color: #5a6b7b; font-style: italic; }

@keyframes lp-klop {
	0%, 100% { opacity: 1;  transform: scale( 1 ); }
	50%      { opacity: .35; transform: scale( .7 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.lp-status-bezig { animation: none; }
}

.lp-popup .lp-popup-route { margin: 0; }

/* Past de inhoud niet in de popup, dan zet Leaflet er een scrollbalk in en
 * verdween de navigatielink onderlangs — precies de knop waarvoor je de popup
 * opent als je onderweg bent. Die blijft nu onderaan plakken; de rest schuift
 * eronderdoor. De negatieve waarden vangen de marge van Leaflets contentblok
 * (.7rem .8rem) op, zodat de balk tot aan de randen loopt. */
.leaflet-popup-scrolled .lp-popup-route {
	position: sticky;
	bottom: -.7rem;
	margin: .4rem -.8rem -.7rem;
	padding: .55rem .8rem .7rem;
	/* Zelfde vlak als de popup zelf; in donkere modus schuift die variabele mee
	   (zie het dark-blok onderaan), zodat er nooit een lichte strook in een
	   donker vlak achterblijft. */
	background: var( --lp-popup-vlak, #fff );
	border-top: 1px solid var( --lp-popup-rand, #e4eaef );
}

/* Onder de balk schuift tekst door, en die werd pal op een regel afgekapt — dat
 * leest als een weergavefout in plaats van als 'er is meer'. Een verloopje laat
 * hem vervagen. Sticky vormt zelf een positioneercontext, dus absolute
 * plaatsing hierbinnen kan zonder extra position: relative. */
.leaflet-popup-scrolled .lp-popup-route::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 1.1rem;
	background: linear-gradient( to top, var( --lp-popup-vlak, #fff ), transparent );
	pointer-events: none;
}

.lp-popup .lp-popup-route a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
}

/* Géén pictogram via ::before meer. Dat stond hier toen er precies één link was
   ('Open met Google Maps') die er zelf geen had. Sinds er twee links staan die
   elk hun eigen icoon dragen — een navigatiepijl en een vergrootglas — leverde
   deze regel een tweede, betekenisloze kaartspeld op vóór dat eigen icoon. Elke
   link zegt nu met zijn eigen pictogram wat hij doet. */

/* ── Toelichting ──────────────────────────────────────────────────────────── */
.lp-toelichting { margin-top: 2rem; }

.lp-waarschuwing {
	background: #fff8e5;
	border-left: 4px solid var( --color-accent, #ffcc00 );
	border-radius: 0 6px 6px 0;
	padding: .85rem 1rem;
	font-size: .9rem;
}

.lp-waarschuwing i { color: #b98900; margin-right: .3rem; }

.lp-leeg {
	padding: 2rem 1rem;
	text-align: center;
	color: #5a6b7b;
	background: #f5f7f9;
	border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Vanaf tablet: filters naast elkaar, knop verdwijnt, kaart wordt hoger.
   Alles hierboven is de mobiele basis.
   ══════════════════════════════════════════════════════════════════════════ */
@media ( min-width: 768px ) {

	/* Het filterblok staat op desktop altijd open (JS zet het 'open'-attribuut),
	   dus díé knop heeft geen functie meer. Rand en achtergrond ook weg — dan
	   oogt het weer als de losse filterbalk van voorheen.
	   Nadrukkelijk alleen dít blok: de onderweg-modus en de ritplanner lenen
	   dezelfde klasse voor hun <summary>, en die blokken gaan op desktop niet
	   vanzelf open. Met een kale `.lp-filterknop { display: none }` verdwenen ze
	   allebei volledig — geen knop om te openen, en dichtgeklapt. */
	.lp-filterblok > .lp-filterknop { display: none; }

	.lp-filterblok {
		border: 0;
		border-radius: 0;
		overflow: visible;
		margin-bottom: .5rem;
	}

	.lp-filters {
		grid-template-columns: repeat( auto-fit, minmax( 165px, 1fr ) );
		gap: .75rem;
		align-items: end;
		padding: 0;
		margin: 1.25rem 0 .75rem;
	}

	.lp-filter select { font-size: .92rem; min-height: 0; }

	.lp-reset {
		width: auto;
		min-height: 0;
		align-self: end;
		font-size: .88rem;
	}

	.lp-vertrek { margin: 0 0 1rem; padding: .85rem 1rem; }
	.lp-vertrek-rij .lp-knop { flex: 0 0 auto; min-height: 0; }
	.lp-vertrek-rij input { min-height: 0; font-size: .92rem; }
	.lp-planner .lp-invoer-wrap input { min-height: 0; font-size: .92rem; }


	#lp-kaart {
		height: 620px;
		max-height: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Onderweg: waar kan ik nog laden?
   Je positie op de route + wat je boordcomputer nog aangeeft, omgerekend naar
   de stations die je nog haalt. Werkt volledig op de eigen data.
   ══════════════════════════════════════════════════════════════════════════ */
.lp-onderweg {
	margin: 0 0 .75rem;
	border: 1px solid #cfe0ef;
	border-radius: 8px;
	overflow: hidden;
	background: #f7fbff;
}

.lp-onderweg-knop { background: #eaf4fc; }

.lp-onderweg-inhoud { padding: .9rem; }

.lp-onderweg-velden {
	display: grid;
	grid-template-columns: 1fr;
	gap: .7rem;
	margin-bottom: .7rem;
}

/* Hoogte- en windkosten onder de reistijd: zelfde toon als de andere
   kanttekeningen in het plan — informatief, niet alarmerend. */
.lp-pl-wind,
.lp-pl-hoogte {
	margin: .2rem 0 .4rem;
	font-size: .9rem;
	color: #33414e;
}

/* ── De rekenfactoren van het plan ─────────────────────────────────────────
   Vier vaste regels plus een som: naam, waarde, effect. Drie kolommen en geen
   tabel, want op een telefoon van 390px moet de middelste kolom kunnen
   afbreken zonder dat de effectkolom van de regel valt — vandaar flex met een
   vaste rechterkolom en `flex: 1 1 0` in het midden (zelfde reden als bij
   .lp-vz-naam; zie de toelichting daar).

   Deze lijst verving vier alinea's met uitleg. De regels staan er ook als het
   effect nul is: een factor die alleen bij een uitkomst verschijnt, is niet te
   onderscheiden van een factor die helemaal niet meedoet. */
.lp-pl-factoren {
	margin: .4rem 0 .6rem;
	padding: 0;
	list-style: none;
	font-size: .88rem;
	color: #33414e;
}

.lp-pl-factoren > li {
	display: flex;
	align-items: baseline;
	column-gap: .5rem;
	padding: .3rem 0;
	border-bottom: 1px solid rgba( 0, 0, 0, .07 );
}
.lp-pl-factoren > li:last-child { border-bottom: 0; }

/* Vaste breedte zodat de vier namen onder elkaar uitlijnen; 'Temperatuur' is de
   langste en past er net in. Niet ruimer: elke tiende rem hier gaat af van de
   middelste kolom. Maar niet krapper dan 'Temperatuur' vet breed is: de kolom heeft
   `flex: none` en krimpt dus niet, dus te smal betekent niet afbreken maar over de
   waarde heen lopen. Gemeten liep 6,2rem nog over; 6,8 heeft lucht, ook als een
   bezoeker zijn lettergrootte een stap omhoog zet. De middelste kolom breekt dan
   maar af — dat is precies waar afbreken voor is. */
.lp-f-naam {
	flex: none;
	width: 6.8rem;
	font-weight: 700;
}

.lp-f-waarde {
	flex: 1 1 0;
	min-width: 0;
	color: #61707f;
}

/* Rechts uitgelijnd en met cijfers van gelijke breedte, zodat de percentages
   onder elkaar een kolom vormen in plaats van te dansen. */
.lp-f-effect {
	flex: none;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* De som staat los van de vier: een streep erboven en geen scheiding eronder. */
.lp-pl-factoren > li.lp-f-totaal {
	margin-top: .15rem;
	border-top: 2px solid rgba( 0, 0, 0, .12 );
	border-bottom: 0;
	padding-top: .4rem;
}

/* Waarom het weer ontbreekt, en de waarschuwing bij vorst. Zelfde toon als de
   factorenlijst, iets ingetogener. */
.lp-pl-geenweer,
.lp-pl-koud {
	margin: .1rem 0 .5rem;
	font-size: .84rem;
	color: #61707f;
}

/* Getalveld met de eenheid ernaast, zodat 'km' niet in de placeholder hoeft. */
.lp-veld-eenheid { display: flex; align-items: center; gap: .4rem; }

.lp-veld-eenheid input {
	/* GEEN width: 100%. Naast `flex: 1 1 auto` wordt dat de flexbasis, en dan duwt
	   het veld de eenheid ernaast van de regel af — op een telefoon van 390px liep
	   'kWh/100km' letterlijk buiten het scherm. `auto` laat het veld de ruimte
	   nemen die overblijft ná de eenheid, wat de bedoeling was. */
	width: auto;
	/* Ondergrens zodat het getal zichtbaar blijft: in de 3-koloms planner-rij
	   ('Je auto') duwde het lange eenheidslabel 'kWh/100km' dit vakje anders tot
	   ~20px dicht, waardoor de waarde wegviel en het veld leeg leek. */
	flex: 1 1 auto;
	min-width: 2.8rem;
	min-height: 44px;
	padding: .5rem .6rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	font: inherit;
	font-size: 16px;          /* voorkomt inzoomen bij focus op iOS */
	/* Weg met de spinner-pijltjes: in de smalle planner-kolom aten die net de
	   ruimte op waardoor '21' tot '2' werd afgekapt. inputmode blijft numeriek. */
	-moz-appearance: textfield;
	appearance: textfield;
	font-variant-numeric: tabular-nums;
}

.lp-veld-eenheid input::-webkit-outer-spin-button,
.lp-veld-eenheid input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.lp-veld-eenheid span { color: #5a6b7b; font-size: .9rem; flex: none; white-space: nowrap; }

.lp-onderweg-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .6rem;
}

.lp-onderweg-knoppen .lp-knop { flex: 1 1 auto; }

.lp-onderweg-melding { margin: 0 0 .6rem; font-size: .85rem; color: #40515f; }
.lp-melding-fout     { color: #b45309; font-weight: 600; }
.lp-onderweg-bezig   { font-size: .85rem; color: #5a6b7b; font-style: italic; margin: .4rem 0; }

.lp-onderweg-kop  { margin: .5rem 0 .4rem; font-size: .9rem; }
.lp-onderweg-leeg { margin: .5rem 0; font-size: .87rem; color: #7a4a09; background: #fff8e5;
                    padding: .6rem .7rem; border-radius: 6px; }
.lp-onderweg-meer { margin: .3rem 0 0; font-size: .82rem; color: #7a8ba0; }

/* De aanrader: het station waar je het verst komt zonder het krap te maken. */
.lp-tip {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	background: #e8f4ea;
	border: 1px solid #b9dcc2;
	border-radius: 8px;
	padding: .7rem .8rem;
	margin: 0 0 .7rem;
}

.lp-tip-label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 800;
	color: #146c3a;
}

.lp-tip strong { font-size: .98rem; }
.lp-tip-meta   { font-size: .82rem; color: #40515f; }

.lp-onderweg-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e3e8ed;
}

.lp-onderweg-lijst li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem 0;
	border-bottom: 1px solid #e3e8ed;
	font-size: .86rem;
}

.lp-onderweg-lijst li.is-tip { background: #f2fbf4; }

.lp-ow-km {
	flex: none;
	min-width: 3.6rem;
	font-weight: 800;
	font-family: var( --font-heading, sans-serif );
	font-variant-numeric: tabular-nums;
	color: var( --color-primary, #1982d1 );
}

.lp-ow-naam { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.lp-ow-naam small { display: block; color: #7a8ba0; font-size: .76rem; }

.lp-ow-over {
	flex: none;
	text-align: right;
	font-size: .8rem;
	color: #5a6b7b;
	font-variant-numeric: tabular-nums;
}

.lp-ow-over small { display: block; font-size: .68rem; color: #97a3ad; }

.lp-ow-laatste {
	flex: none;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #a3271a;
	font-weight: 700;
}

/* ── Alternatieven in de buurt (in de popup) ──────────────────────────────── */
.lp-popup .lp-popup-alt { margin: .35rem 0 0; }
.lp-popup .lp-popup-alt a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 700;
	font-size: .82rem;
	color: var( --color-primary, #1982d1 );
	text-decoration: none;
}
.lp-popup .lp-popup-alt a:hover { text-decoration: underline; }

.lp-alt-view .lp-alt-kop { margin: 0 0 .2rem; }
.lp-alt-terug {
	display: inline-flex;
	align-items: center;
	font-size: .82rem;
	font-weight: 700;
	color: var( --color-primary, #1982d1 );
	text-decoration: none;
}
.lp-alt-terug:hover { text-decoration: underline; }

.lp-alt-sub { margin: .1rem 0 .3rem; font-size: .78rem; color: #5a6b7b; }

/* Elke rij is aantikbaar (opent het station op de kaart). */
.lp-alt-lijst li { cursor: pointer; gap: .5rem; }
.lp-alt-lijst li:hover { background: #f2f7fb; }
.lp-alt-lijst li:focus-visible { outline: 2px solid #0b6bb5; outline-offset: -2px; }

.lp-alt-status { flex: none; margin-left: auto; text-align: right; }

/* Kleine 'bezetting'-knop per rij: op verzoek, want elke opvraag kost tegoed. */
.lp-alt-bezet {
	border: 1px solid #ccd5dd;
	border-radius: 999px;
	background: #fff;
	color: var( --color-primary, #1982d1 );
	font: inherit;
	font-size: .74rem;
	font-weight: 700;
	padding: .2rem .55rem;
	min-height: 30px;
	cursor: pointer;
	white-space: nowrap;
}
.lp-alt-bezet:hover { background: #f0f3f6; }
.lp-alt-bezig    { font-size: .74rem; color: #5a6b7b; font-style: italic; }
.lp-alt-onbekend { font-size: .72rem; color: #7a8ba0; }

/* Jouw positie op de kaart. */
/* 16 EN NIET 20 PIXELS: op verzoek een maat kleiner. De maat in `iconSize` in
   zetMarker() moet hiermee meebewegen — staat die groter, dan zit de stip niet meer
   op de gemeten positie. De rand blijft 3 px, anders wordt de blauwe kern zo klein
   dat hij op een drukke kaart wegvalt. */
.lp-ik {
	position: relative;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #1982d1;
	border: 3px solid #fff;
	box-shadow: 0 0 0 3px rgba( 25, 130, 209, .35 ), 0 1px 4px rgba( 0, 0, 0, .4 );
}

/* DE WITTE RING KLOPT, DE STIP NIET. Dit is de enige marker op de kaart die een
   meting van dít moment toont in plaats van een vaste plek, en dat was aan niets te
   zien: een stilstaande blauwe stip ziet er precies zo uit als een speld die je zelf
   hebt neergezet. De beweging zegt 'dit is live'.

   Het pulseren zit op een pseudo-element en niet op .lp-ik zelf, want de stip mág
   niet meebewegen — hij markeert een positie, en een schalende stip verschuift zijn
   eigen rand terwijl het punt eronder stilstaat.

   De dunne blauwe rand om de witte ring is geen versiering: een uitdijende witte ring
   die naar nul vervaagt is op lichte tegels (weiland, water) onzichtbaar, en dan
   klopt er iets wat je niet ziet. */
.lp-ik::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba( 25, 130, 209, .5 );
	pointer-events: none;
	animation: lp-ik-puls 1.8s ease-out infinite;
}

@keyframes lp-ik-puls {
	0%        { transform: scale( 1 );   opacity: .95; }
	70%, 100% { transform: scale( 2.6 ); opacity: 0; }
}

/* Zelfde afspraak als bij lp-klop en lp-draai: wie beweging heeft uitgezet krijgt
   een stilstaande ring, niet een verdwenen ring. */
@media ( prefers-reduced-motion: reduce ) {
	.lp-ik::before { animation: none; transform: scale( 1.8 ); opacity: .55; }
}

/* Terwijl je een plek aanwijst. */
#lp-kaart.lp-prikken { cursor: crosshair; }

@media ( min-width: 768px ) {
	.lp-onderweg-velden { grid-template-columns: repeat( 3, 1fr ); }
	/* De kolommen zitten in de planner binnen een onderdeel. Twee en niet drie:
	   elk van deze velden draagt een eenheid of een lang label, en in drie
	   kolommen werd 'Minimaal vermogen aanwezig' een blok van drie regels met een
	   afgekapt keuzemenu ernaast. */
	.lp-planner .lp-pl-deelinhoud { grid-template-columns: repeat( 2, 1fr ); gap: .75rem; }
	.lp-onderweg-knoppen .lp-knop { flex: 0 0 auto; }
	.lp-veld-eenheid input { min-height: 0; font-size: .92rem; }
}

/* Wél te halen, maar het gaat ten koste van je reserve. Nadrukkelijker dan een
   gewone melding: dit is precies het moment dat je die informatie nodig hebt. */
.lp-onderweg-krap {
	margin: .5rem 0;
	padding: .7rem .8rem;
	background: #fdf1dd;
	border-left: 4px solid #e6a020;
	border-radius: 0 6px 6px 0;
	font-size: .87rem;
	line-height: 1.4;
	color: #5c4108;
}

/* Positie bekend, bereik nog niet: vertel wat de volgende stap is in plaats van
   een lege plek te laten. De placeholder van dat veld lijkt op een waarde. */
.lp-onderweg-vraag {
	margin: .5rem 0;
	padding: .6rem .7rem;
	background: #eaf4fc;
	border-left: 4px solid var( --color-primary, #1982d1 );
	border-radius: 0 6px 6px 0;
	font-size: .87rem;
	color: #234;
}

/* Knoprij onder de filters: wissen links, toepassen rechts. */
.lp-filter-acties {
	display: flex;
	gap: .5rem;
	align-items: stretch;
}

.lp-filter-acties .lp-reset    { flex: 1 1 auto; width: auto; }
.lp-filter-acties .lp-knop     { flex: 1 1 auto; min-height: 44px; }

@media ( min-width: 768px ) {
	/* Op desktop staat de rij in het raster; daar mag hij compact. Hij pakt de
	   volle rasterbreedte (1 / -1) en gaat rechts staan: als één rastercel met
	   twee knoppen naast elkaar puilde 'Toepassen' anders rechts buiten het
	   paneel — en daarmee buiten het scherm. */
	.lp-filter-acties { grid-column: 1 / -1; justify-content: flex-end; align-items: end; }
	.lp-filter-acties .lp-knop { flex: 0 0 auto; min-height: 0; }
	.lp-filter-acties .lp-reset { flex: 0 0 auto; }
}

/* Bron-regel onder de onderweg-lijst. */
.lp-onderweg-bron {
	margin: .5rem 0 0;
	font-size: .82rem;
	color: #40515f;
}

.lp-onderweg-bron small { color: #7a8ba0; }

/* De bezetting staat in de lijstregel zelf, waar anders 'km over' stond. */
.lp-onderweg-lijst .lp-lader-telling { flex: none; }

/* ── Route naar een gekozen station ────────────────────────────────────────── */
.lp-ow-rij { cursor: pointer; }
.lp-ow-rij:hover,
.lp-ow-rij:focus-visible { background: #eaf4fc; outline: none; }
.lp-ow-rij:focus-visible { box-shadow: inset 0 0 0 2px var( --color-primary, #1982d1 ); }

.lp-routevak {
	margin: .6rem 0 0;
	padding: .7rem .8rem;
	background: #eaf4fc;
	border: 1px solid #cfe0ef;
	border-radius: 8px;
}

.lp-routevak[hidden] { display: none; }

.lp-routevak-kop {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .2rem;
}

.lp-routevak-kop strong { flex: 1 1 auto; line-height: 1.25; }

.lp-routevak-sluit {
	flex: none;
	border: 0;
	background: none;
	font-size: 1.3rem;
	line-height: 1;
	color: #5a6b7b;
	cursor: pointer;
	padding: 0 .2rem;
}

.lp-routevak-meting { margin: 0 0 .5rem; font-size: .88rem; color: #234; }
.lp-route-bezig { color: #5a6b7b; font-style: italic; }
.lp-route-fout  { color: #b45309; font-weight: 600; }

.lp-routevak-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
}

.lp-routevak-knoppen .lp-knop {
	flex: 1 1 auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	text-decoration: none;
}

@media ( min-width: 768px ) {
	.lp-routevak-knoppen .lp-knop { flex: 0 0 auto; min-height: 0; }
}

/* Detailvak: alles wat we van één locatie weten. */
.lp-routevak-kop span { flex: 1 1 auto; line-height: 1.25; }
/* Zelfde maat als .lp-popup-merk: dit is dezelfde merknaam, alleen in het
   routevak in plaats van in de popup. Lopen die twee uiteen, dan lijkt het
   dezelfde locatie in twee schermen net niet hetzelfde te zeggen. */
.lp-routevak-kop small { display: block; color: #5a6b7b; font-size: .88rem; }

.lp-routevak .lp-laders { margin: .5rem 0; border-color: #cfe0ef; }
.lp-routevak .lp-lader  { border-color: #cfe0ef; }

.lp-detail-regel {
	margin: .4rem 0;
	font-size: .86rem;
	color: #234;
}

.lp-detail-leeg { color: #7a8ba0; font-style: italic; }

/* ── Het Tesla-dagverloop ───────────────────────────────────────────────────
   Eén reeks, dus één kleur: de hoogte draagt de grootte, de kleur alleen de
   identiteit. Geen groen-voor-goedkoop tegenover rood-voor-duur — dat leest voor
   wie kleurenblind is als één vlakke tint en plakt bovendien een oordeel op een
   getal dat de bezoeker zelf moet wegen.

   Beide tinten zijn nagerekend op de achtergrond waarop ze staan (lichtheidsband
   en contrast ≥ 3:1): #1982d1 op wit, #4593d6 op het donkere popupvlak. Vervang
   ze niet op het oog — een tint die op wit klopt, zakt op donker door de bodem. */
.lp-tt-grafiek {
	--tt-lijn: var( --color-primary, #1982d1 );
	--tt-as: #d2d5d7;

	display: block;
	width: 100%;
	height: auto;
	margin: .35rem 0 .1rem;
	overflow: visible;
}

/* Het vlak is een wás, geen blok: het geeft de lijn een bodem zonder de popup
   in te nemen. */
.lp-tt-vlak { fill: var( --tt-lijn ); fill-opacity: .1; }

.lp-tt-lijn {
	fill: none;
	stroke: var( --tt-lijn );
	stroke-width: 2;
	stroke-linejoin: round;
}

/* Assen en raster blijven terugtreden: haarlijn, en nooit gestreept — streepjes
   maken ruis en gaan er als data uitzien. */
.lp-tt-as { stroke: var( --tt-as ); stroke-width: 1; }

.lp-tt-uur {
	fill: #6b7c8c;
	font-size: 9px;
}

/* De 'nu'-streep draagt de tekstkleur en niet de reekskleur: hij is een
   aanwijzing bij de data, geen tweede meetreeks. */
.lp-tt-nu {
	stroke: #6b7c8c;
	stroke-width: 2;
	stroke-opacity: .45;
}

/* De stip krijgt een ring in de achtergrondkleur, zodat hij op de lijn niet
   met zijn eigen reeks versmelt. */
.lp-tt-stip {
	fill: var( --tt-lijn );
	stroke: var( --lp-popup-vlak, #fff );
	stroke-width: 2;
}

.lp-tt-nulabel {
	fill: var( --color-text, #234 );
	font-size: 10px;
	font-weight: 600;
}

html[data-theme="dark"] .lp-tt-grafiek {
	--tt-lijn: #4593d6;
	--tt-as: rgba( 255, 255, 255, .18 );
}
html[data-theme="dark"] .lp-tt-uur,
html[data-theme="dark"] .lp-tt-nu { fill: var( --color-text-muted ); stroke: var( --color-text-muted ); }
html[data-theme="dark"] .lp-tt-nulabel { fill: var( --color-text ); }
html[data-theme="dark"] .lp-tt-stip { stroke: var( --color-surface, #1c2530 ); }

/* Het laadpasvoorbehoud onder de prijsregel van het onderweg-kaartje. Zelfde
   kleur en maat als .lp-richtprijs in de popup: het is dezelfde noot, en twee
   verschillende grijstinten voor één boodschap laten hem als twee dingen lezen.
   Strakker tegen de regel erboven aan (-.25rem) omdat hij daarbij hoort en niet
   bij wat eronder komt. */
.lp-detail-noot {
	margin: -.25rem 0 .4rem;
	font-size: .74rem;
	line-height: 1.35;
	color: #6b7c8c;
}

.lp-detail-bezet {
	margin: .5rem 0 0;
	font-size: .88rem;
	display: flex;
	align-items: center;
	gap: .4rem;
}

.lp-detail-bezet small { color: #7a8ba0; }

.lp-routevak-meting i { color: var( --color-primary, #1982d1 ); margin-right: .2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Map-app (body.lp-kaartpagina)
   De kaart vult het scherm; de ritplanner ligt als overlay rechtsboven en de
   laderfilters rechtsonder. Mobile first: de basisregels maken van een
   uitgeklapt paneel een bottom-sheet, de 768px-breakpoint maakt er zwevende
   hoekpanelen van. De onderweg-modus is hier uit beeld (blijft in de DOM voor
   de JS). Alles is gescoped op body.lp-kaartpagina zodat de rest van de site
   onaangeroerd blijft.
   ══════════════════════════════════════════════════════════════════════════ */

/* Alleen de sitebalk bovenin en daaronder de kaart — al het overige op deze
   pagina is verborgen. De kaart breekt uit de artikelbox naar de volle
   vensterbreedte; overflow:hidden op de body voorkomt dat er iets te scrollen
   valt (er staat immers niets meer onder de kaart). */
body.lp-kaartpagina { overflow: hidden; }

body.lp-kaartpagina .page-wrapper { max-width: none; margin: 0; padding: 0; }

/* ── DE NEGATIEVE MARGES VAN HET THEMA MOETEN HIER WEG ───────────────────────
 * Het thema maakt .page-single op mobiel full-bleed met `margin: 0 -.75rem`, en
 * dat klopt daar: het heft precies de horizontale padding van .page-wrapper op.
 * Alleen haalt de regel hierboven diezelfde padding weg, en dan heffen die
 * marges niets meer op — ze duwen het artikel 12px links én rechts buiten het
 * scherm. Samen 24px die er niet zijn.
 *
 * `overflow: hidden` op de body verbergt dat in een gewone browser, en daarom
 * viel het nooit op. iOS Safari trekt zich er niet aan: tik je een invoerveld
 * aan, dan schuift het de pagina alsnog opzij om het veld 'in beeld' te
 * brengen. Gemeld als: het scherm verschuift naar links zodra je in het
 * bestemmingsveld typt — met een witte strook naast de zwarte sitebalk. */
body.lp-kaartpagina .page-single,
body.lp-kaartpagina .post-navigation {
	margin-left: 0;
	margin-right: 0;
}

body.lp-kaartpagina .page-single {
	overflow: visible;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
body.lp-kaartpagina .page-single .post-body { padding: 0; }

/* De titel blijft in de DOM (voor SEO en schermlezers) maar is visueel weg;
   inleiding, cijfers en uitleg worden verborgen. Alleen de sitebalk en de kaart
   blijven over.

 * WAT HIER NIET MEER STAAT, STAAT ER OOK NIET MEER IN DE HTML. De sitevoettekst,
 * de deelknop, de gerelateerde artikelen, de broodkruimel en het
 * weergavetellertje werden eerst gerenderd en daarna hier op display:none gezet.
 * Sinds 26-08-2026 rendert page-laadpalen.php ze niet meer (get_footer() is
 * vervangen door een kale wp_footer()), dus die vier regels konden weg. Komt er
 * ooit weer themaopmaak op deze pagina, verberg hem dan niet hier maar laat hem
 * weg in het sjabloon — verbergen kost dezelfde HTML én een regel om te
 * onderhouden.
 *
 * DAT WAS EERDER AL EENS TERUGGEDRAAID, VOOR EEN RONDE VAN SEO: alles onder
 * de kaart verbergen liet een pagina van 475 woorden achter met vrijwel alles op
 * display:none, en dan is er voor Google niets om op te ranken behalve de titel.
 * Die afweging staat, maar de expliciete wens hier is een strakke, kale
 * kaart-app-pagina: alleen de sitebalk erboven, niets van het thema erna. Wint
 * dus. De bronvermelding die verplicht is (CC BY 4.0, Duitsland en Wallonië) mag
 * daardoor niet gewoon verdwijnen — die staat daarom altijd op de kaart zelf, in
 * Leaflets attributieregel linksonder (zie laadpalen.js, bij attributionControl),
 * onafhankelijk van dit blok. */
body.lp-kaartpagina .page-header-wrap {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap;
}
body.lp-kaartpagina .lp-intro { display: none; }

/* De vier cijfertegels gaan om dezelfde reden weg: op een telefoon staan ze pal
   onder de kaart en vullen ze het hele onderste deel van het scherm met een grijs
   vlak. De getallen staan al in de telling linksonder óp de kaart. */
body.lp-kaartpagina .lp-cijfers { display: none; }

/* De uitleg ("Over deze kaart") — kleuren, stippen, voorzieningen, bronnen. */
body.lp-kaartpagina .lp-toelichting { display: none; }


/* Het ⓘ-knopje linksonder op de kaart (Leaflet-control, aangemaakt in
   laadpalen.js): opent 'Kaartgegevens en rechten', met daarin ook de build van de
   webapp. Tot 30-08-2026 stond hier het buildstempel uitgeschreven met de ⓘ
   erachter; nu alleen het icoon, dus het bakje is nog net zo groot als zijn inhoud.
   Klassenamen bleven -build en -nieuw: dezelfde opmaak, alleen minder erin. */
.lp-build {
	padding: .18rem .34rem;
	background: rgba( 0, 0, 0, .62 );
	color: #fff;
	line-height: 1;
	border-radius: 4px;
	/* Het bakje zelf vangt geen muis (zodat het niet in de weg zit bij het slepen
	   van de kaart); het linkje erin zet dat voor zichzelf weer aan. */
	pointer-events: none;
	white-space: nowrap;
}

/* LET OP DE SPECIFICITEIT. Leaflet zet zelf `.leaflet-container a { color: #0078a8 }`
   — één klasse plus één element, en dat wint van een losse klasse. Vandaar dat de
   ⓘ blauw bleef. De selectors hieronder noemen daarom allebei de container én het
   element; korter maken betekent hier: blauw terug. */
.leaflet-container a.lp-build-nieuw {
	display: block;
	/* Wit en zonder rand: het is één klein aanwijspunt, geen element dat om
	   aandacht vraagt. Het amberen bolletje doet dat wel, en alleen als er iets
	   ongelezen is. */
	color: #fff;
	/* Geen onderstreping: het is een icoon, geen woord in een zin. */
	text-decoration: none;
	font-size: .92rem;
	line-height: 1;
	pointer-events: auto;
}
/* Bij aanwijzen iets helderder dan de labeltekst eromheen; wit-op-wit zou geen
   terugkoppeling zijn. */
.leaflet-container a.lp-build-nieuw:hover,
.leaflet-container a.lp-build-nieuw:focus { color: #fff; opacity: .75; }

/* Is er iets ongelezen, dan een bolletje erachter — in dezelfde amber als de rest
   van de 'let hier op'-signalen op deze kaart. */
.leaflet-container a.lp-build-nieuw.is-nieuw::after {
	content: "";
	display: inline-block;
	width: .4rem;
	height: .4rem;
	margin-left: .25rem;
	border-radius: 50%;
	background: #e8a800;
	vertical-align: .08rem;
}

/* De dialoog zelf. Breedte als een leesregel, hoogte begrensd zodat een lange lijst
   schuift in plaats van onder het scherm door te lopen. */
.lp-nieuw {
	/* MIDDEN OP HET SCHERM, EXPLICIET. De browser doet dat zelf met `margin: auto`
	   bij een `inset: 0`-dialoog, maar het thema zet een eigen marge op blokelementen
	   en die wint van de UA-stijl: gemeten stond het venster daardoor tegen de
	   linkerbovenhoek geplakt, over de sitebalk heen. */
	margin: auto;
	width: min( 32rem, calc( 100vw - 2rem ) );
	max-height: min( 34rem, calc( 100vh - 4rem ) );
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: #1f2937;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, .3 );
}
.lp-nieuw::backdrop { background: rgba( 0, 0, 0, .45 ); }

.lp-nieuw-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid #e5e7eb;
	/* Blijft staan als de lijst eronder schuift. */
	position: sticky;
	top: 0;
	background: inherit;
	border-radius: 10px 10px 0 0;
}
.lp-nieuw-kop h2 { margin: 0; font-size: 1.05rem; }

.lp-nieuw-sluit {
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: .2rem .3rem;
}

/* Het schuivende deel: alleen de lijst, niet de kop. */
.lp-nieuw-lijst {
	padding: .3rem 1.1rem 1.1rem;
	overflow-y: auto;
	max-height: calc( min( 34rem, 100vh - 4rem ) - 3.4rem );
}
.lp-nieuw-lijst section + section { margin-top: 1.1rem; }
.lp-nieuw-lijst h3 {
	margin: .9rem 0 .35rem;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b7280;
}
.lp-nieuw-lijst ul { margin: 0; padding-left: 1.1rem; }
.lp-nieuw-lijst li { margin: .3rem 0; line-height: 1.5; font-size: .92rem; }

/* ── HET BRONNENVENSTER ('Kaartgegevens en rechten') ────────────────────────
   Zelfde dialoog als 'Wat is er nieuw' (.lp-nieuw levert kop, romp en backdrop);
   hierbinnen hangt Leaflets éígen attributie-element, verplaatst uit de hoek van
   de kaart — zie bouwBronnenvenster() in laadpalen.js.

   DAT ELEMENT DRAAGT NOG ZIJN LEAFLET-KLASSEN, en die zijn gemaakt voor een strook
   over een kaart heen: wit doorschijnend vlak, 11 px, alles op één regel. Binnen een
   venster leest dat als een restje UI in plaats van als tekst. Vandaar dat het hier
   wordt teruggezet naar gewone lopende tekst — niet met !important, gewoon met een
   selector die specifieker is dan Leaflets losse klasse. */
.lp-bronvenster { width: min( 30rem, calc( 100vw - 2rem ) ); }

.lp-bronvenster-lijst .leaflet-control-attribution {
	margin: 0;
	padding: .6rem 0 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: .92rem;
	line-height: 1.7;
	/* HET ELEMENT DRAAGT OOK NOG `leaflet-control`, EN DIE KLASSE ZWEEFT.
	 * Leaflets eigen basisregel is `.leaflet-control { float: left; clear: both; }`
	 * — nodig zolang het element in Leaflets hoekcontainer staat, waar meerdere
	 * controls naast elkaar moeten passen. Die klasse verhuist mee wanneer het
	 * element hierboven in het venster wordt gezet (`appendChild`), en `float`
	 * overleeft dat: het vlak klapt samen tot de breedte van zijn tekst en de
	 * regel(s) erna vloeien ernaast, in plaats van eronder te beginnen.
	 *
	 * Bij een lange bronvermelding (meerdere landen, dus meerdere linkjes) viel dat
	 * niet op — de tekst vulde toch de hele breedte. Met maar één land aan
	 * (bijvoorbeeld alleen Nederland: enkel '© OpenStreetMap-bijdragers') is de
	 * strook smal genoeg dat 'Laadpalen bijgewerkt:' ernaast bleef staan in plaats
	 * van op de regel eronder. Vandaar expliciet terug naar normale blokstroom. */
	float: none;
	clear: none;
	display: block;
}
/* Leaflet zet `.leaflet-container a { color: #0078a8 }`; die container is hier niet
   de ouder meer, maar de themalink-kleur is dat evenmin. Expliciet dus. */
.lp-bronvenster-lijst .leaflet-control-attribution a {
	color: #1d4ed8;
	text-decoration: underline;
}
.lp-bronvenster-lijst .leaflet-control-attribution a:hover,
.lp-bronvenster-lijst .leaflet-control-attribution a:focus { color: #1e40af; }

/* Welke routeservice de rijtijden levert, en wanneer de laadpalen van de actieve
   landen zijn bijgewerkt. Zelfde maat en kleur als de attributie erboven — het is
   dezelfde soort mededeling, alleen komt hij niet van Leaflet. */
.lp-bronvenster-stations,
.lp-bronvenster-route,
.lp-bronvenster-build {
	margin: .5rem 0 0;
	font-size: .92rem;
	line-height: 1.7;
}

/* ── HET MELDVENSTER ('Probleem melden') ─────────────────────────────────────
   Zelfde dialoog als hierboven (.lp-nieuw levert kop, romp en backdrop); alleen
   de inhoud van .lp-meld-lijst is eigen. Zie bouwMeldVenster() in laadpalen.js. */
.lp-meld-station {
	margin: 0 0 .6rem;
	font-weight: 600;
	font-size: .92rem;
}
.lp-meld-tekst {
	width: 100%;
	box-sizing: border-box;
	padding: .55rem .7rem;
	border: 1px solid #ccd5dd;
	border-radius: 6px;
	font: inherit;
	font-size: .92rem;
	line-height: 1.4;
	resize: vertical;
}
/* 16px en niet kleiner: op iOS zoomt Safari bij focus in op een invoerveld met
   een kleinere font-size, en dat sleept de rest van de dialoog scheef mee. */
.lp-meld-tekst { font-size: max( .92rem, 16px ); }

/* HONEYPOT, BUITEN BEELD EN NIET display:none. Een script dat op zichtbaarheid
   test (offsetWidth/-Height) laat display:none-velden vaak juist met rust —
   dan is dit veld precies het veld dat een simpel formulierscript wél invult.
   `tabindex="-1"` op de input houdt hem uit de tabvolgorde voor wie met het
   toetsenbord navigeert; het label blijft bereikbaar voor een schermlezer die
   toch aankomt, met een tekst die zegt wat er moet gebeuren. */
.lp-meld-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	left: -9999px;
}

.lp-meld-status {
	min-height: 1.3em;
	margin: .6rem 0 0;
	font-size: .85rem;
}
.lp-meld-status.lp-meld-fout   { color: #b45309; font-weight: 600; }
.lp-meld-status.lp-meld-gelukt { color: #1a9850; font-weight: 600; }

.lp-meld-lijst .lp-meld-verstuur { margin-top: .7rem; }

/* ── DE LINKERONDERHOEK OP DESKTOP ──────────────────────────────────────────
   Leaflet geeft elke control 10 px marge van de rand. Voor de ⓘ — die je alleen
   aankijkt als je iets wilt názoeken — mag dat weg: hij hoort in de hoek, uit de
   weg. Dus marge eruit en alleen de bovenhoek afronden, zodat hij tegen de rand
   aansluit.

   Onder de ⓘ staat niets meer: de bronvermelding én de build zitten in het
   venster erachter.

   Alleen op desktop: op een telefoon is de hoek te dicht bij de duim. */
@media ( min-width: 768px ) {
	body.lp-kaartpagina .leaflet-bottom.leaflet-left .lp-build {
		margin: 0;
		border-radius: 0 4px 0 0;
	}
}

/* Onderweg-modus verborgen (het blok blijft in de DOM voor de JS-bedrading). */
body.lp-kaartpagina #lp-onderweg { display: none; }

/* De kaart-wrap: volle vensterbreedte (full-bleed), volle hoogte onder de header. */
body.lp-kaartpagina .lp-kaart-wrap {
	left: 50%;
	width: 100vw;
	margin: 0 0 0 -50vw;
	/* `--lp-vh` (laadpalen.js) volgt `window.innerHeight` en herstelt daarmee de
	 * witte strook die `dvh` alleen op een koude paginalading kan achterlaten —
	 * zie de toelichting bij het zetten van die variabele.
	 *
	 * `max()` EN NIET DE VARIABELE ALLEEN. Hij verving `dvh` eerst helemaal, en
	 * daarmee kon één te kleine meting (gemeten 08-09-2026 op iOS: 446 px in een
	 * venster van 673 px, vermoedelijk het toetsenbord dat na een navigatie
	 * vanuit de adresbalk nog stond) dezelfde witte strook terugzetten die hij
	 * moest wegnemen — en de browser mocht het niet meer goedmaken. Als
	 * ondergrens blijft `dvh` gelden en kan de variabele de hoogte alleen nog
	 * vergroten, precies waar hij voor bedoeld was.
	 *
	 * De eerste regel is de terugval voor een browser zonder `max()`; zonder
	 * JavaScript blijft daar gewoon `100dvh` staan. */
	height: calc( var( --lp-vh, 100dvh ) - var( --header-height, 53px ) );
	height: calc( max( 100dvh, var( --lp-vh, 0px ) ) - var( --header-height, 53px ) );
	min-height: 320px;
	border: 0;
	border-radius: 0;
}

/* Ben je ingelogd, dan zet WordPress zijn adminbalk (32px, ≤782px: 46px) boven
 * de pagina en duwt alles zoveel omlaag. De wrap-hoogte trok dat niet af, dus
 * schoof de onderrand — met de Filters-pil rechtsonder en de 'twee vingers'-hint
 * — precies die hoogte onder de vouw, onbereikbaar door overflow:hidden op body. */
body.admin-bar.lp-kaartpagina .lp-kaart-wrap {
	height: calc( var( --lp-vh, 100dvh ) - var( --header-height, 53px ) - 32px );
	height: calc( max( 100dvh, var( --lp-vh, 0px ) ) - var( --header-height, 53px ) - 32px );
}
@media screen and ( max-width: 782px ) {
	body.admin-bar.lp-kaartpagina .lp-kaart-wrap {
		height: calc( var( --lp-vh, 100dvh ) - var( --header-height, 53px ) - 46px );
		height: calc( max( 100dvh, var( --lp-vh, 0px ) ) - var( --header-height, 53px ) - 46px );
	}
}

body.lp-kaartpagina #lp-kaart {
	height: 100%;
	min-height: 0;
	max-height: none;
}

/* ── Schermvullend moet de app-weergave hierboven overrulen ───────────────────
 * DE GRIJZE STROOK ONDERAAN OP DE TELEFOON KWAM HIERVANDAAN. `.lp-kaart-wrap.is-vol`
 * (0,2,0) is minder specifiek dan `body.lp-kaartpagina .lp-kaart-wrap` (0,3,1), dus
 * bij schermvullend bleef de app-hoogte `100dvh - sitebalk` staan. Met `position:
 * fixed` én een expliciete `height` wint die hoogte van `inset: 0` — en dan hield je
 * precies de hoogte van de sitebalk (53px) aan de onderkant over. Zichtbaar op de
 * telefoon omdat de header daar al weggescrold was; op desktop viel dezelfde strook
 * minder op.
 *
 * Deze regels moeten NÁ het app-weergaveblok staan: bij gelijke specificiteit wint
 * de laatste. De webkit-variant staat apart, want een browser die `:-webkit-full-screen`
 * niet kent gooit een hele selectorlijst weg — inclusief de regel die hij wél kent. */
body.lp-kaartpagina .lp-kaart-wrap.is-vol,
body.admin-bar.lp-kaartpagina .lp-kaart-wrap.is-vol {
	left: 0;
	width: 100%;
	height: var( --lp-vh, 100dvh );
	height: max( 100dvh, var( --lp-vh, 0px ) );
	min-height: 0;
	margin: 0;
}

body.lp-kaartpagina .lp-kaart-wrap:fullscreen,
body.admin-bar.lp-kaartpagina .lp-kaart-wrap:fullscreen {
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
}

body.lp-kaartpagina .lp-kaart-wrap:-webkit-full-screen,
body.admin-bar.lp-kaartpagina .lp-kaart-wrap:-webkit-full-screen {
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
}

/* ── Overlay-pillen (planner rechtsboven, filters rechtsonder) ─────────────── */
body.lp-kaartpagina #lp-planner,
body.lp-kaartpagina #lp-filterblok {
	position: absolute;
	z-index: 900;
	margin: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: calc( 100% - 1.5rem );
}

body.lp-kaartpagina #lp-planner    { top: .75rem;    right: .75rem; }
body.lp-kaartpagina #lp-filterblok { bottom: .75rem; right: .75rem; }

/* De <summary> wordt een zwevende pil. */
body.lp-kaartpagina #lp-planner > summary,
body.lp-kaartpagina #lp-filterblok > summary {
	width: auto;
	border-radius: 999px;
	background: #eaf4fc;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .22 );
	white-space: nowrap;
}

/* Geen uitklap-chevron op de planner- en filterpil: het openen wijst zich vanzelf,
   en in de volscherm-weergave zit er al een kruisje. */
body.lp-kaartpagina #lp-planner > summary::after,
body.lp-kaartpagina #lp-filterblok > summary::after {
	display: none;
}

/* Mobiel: de dichte pil is icoon-only, want de labels ("Plan mijn rit met
   laadstops") zijn te breed voor een telefoonhoek. Het label blijft in de DOM
   voor schermlezers en komt zichtbaar terug zodra de summary de kop van de
   bottom-sheet wordt (dan is de pil niet meer :not([open])). */
body.lp-kaartpagina #lp-planner:not( [open] ) .lp-pil-label,
body.lp-kaartpagina #lp-filterblok:not( [open] ) .lp-pil-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* ── Uitgeklapt paneel op mobiel: bottom-sheet ────────────────────────────────
 * Bewust de HELE <details> als scrollgebied (overflow-y:auto + max-height), met de
 * summary als plakkende kop. De eerdere opzet met een inner flex-scroller
 * (flex:1 + min-height:0 binnen een overflow:hidden-sheet) scrolde op mobiel niet
 * betrouwbaar — daar bleven de onderste velden onbereikbaar. Deze opzet is de
 * simpelste die gegarandeerd scrollt. Apart in een max-width-query zodat hij het
 * zwevende desktop-kaartje niet raakt. */
@media ( max-width: 767.98px ) {
	/* Beide overlay-panelen — ritplanner én filters — vullen op mobiel het HELE
	   scherm onder de sitebalk, met een kruisje rechtsboven en een plakkende kop.
	   De <details> zelf is het scrollgebied (overflow-y:auto), zodat alle velden
	   bereikbaar zijn ongeacht de hoogte. */
	body.lp-kaartpagina #lp-planner[open],
	body.lp-kaartpagina #lp-filterblok[open] {
		display: block;
		position: fixed;
		left: 0; right: 0;
		top: var( --header-height, 53px ); bottom: 0;
		width: auto;
		max-width: none;
		z-index: 1200;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
		background: #fff;
		border-radius: 0;
	}

	/* De kop blijft in beeld terwijl je scrollt (tik op de kop of het kruis = sluiten).
	 *
	 * ZO LAAG ALS HET KAN, want elke pixel hier gaat van de velden af. Gemeten op een
	 * telefoon van 390×740 viel de actiebalk ('Filters wissen' / 'Toepassen') net
	 * onder de vouw; met .85rem marge en een kruis van 40px was deze kop 67 px hoog,
	 * nu 52. De hoogte komt van het kruisje plus de marge, niet van de tekst — het
	 * heeft dus geen zin de letters kleiner te maken zonder het kruis mee te nemen
	 * (zie .lp-paneel-sluit hieronder).
	 *
	 * NIET VERDER OMLAAG. De hele kopbalk is het sluitvlak, en onder de 48 px wordt
	 * dat krap voor een duim; 52 px houdt hem ruim boven de 44 px die als ondergrens
	 * geldt. Ruimte tekort? Dan is de padding-bottom van het paneel de plek. */
	body.lp-kaartpagina #lp-planner[open] > summary,
	body.lp-kaartpagina #lp-filterblok[open] > summary {
		position: sticky;
		top: 0;
		z-index: 2;
		border-radius: 0;
		justify-content: space-between;
		align-items: center;
		padding: .5rem 1rem;
		font-size: 1rem;
		min-height: 0;
		box-shadow: 0 1px 4px rgba( 0, 0, 0, .12 );
	}

	/* Kruisje tonen, de chevron verbergen zolang het paneel het scherm vult. */
	body.lp-kaartpagina #lp-planner[open] > summary::after,
	body.lp-kaartpagina #lp-filterblok[open] > summary::after { display: none; }

	body.lp-kaartpagina #lp-planner[open] .lp-paneel-sluit,
	body.lp-kaartpagina #lp-filterblok[open] .lp-paneel-sluit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		/* 36 en niet 40: dit kruisje bepaalt de hoogte van de kopbalk hierboven.
		   Het blijft ruim aantikbaar doordat de hele balk (52 px) sluit, niet
		   alleen het icoon. */
		min-width: 36px;
		min-height: 36px;
		font-size: 1.35rem;
		line-height: 1;
		color: #40515f;
	}

	/* Ruimte onderaan zodat de laatste knop vrij van de browserbalk blijft. */
	body.lp-kaartpagina #lp-planner[open] > .lp-onderweg-inhoud,
	body.lp-kaartpagina #lp-filterblok[open] > .lp-filters {
		padding-bottom: 2.5rem;
	}

	/* DE VOET MOET OOK ZAKKEN ALS ER WEINIG STAAT. `position: sticky` doet niets
	   zolang de inhoud past — dan bleef 'Rit plannen' halverwege het scherm
	   hangen met een half scherm wit eronder, alsof het paneel was afgekapt. Met
	   een kolom die minstens het scherm vult duwt `margin-top: auto` de voet naar
	   onderen; wordt de inhoud langer (beide onderdelen open, of een uitslag
	   eronder), dan is die marge nul en neemt sticky het over. */
	body.lp-kaartpagina #lp-planner[open] > .lp-onderweg-inhoud {
		display: flex;
		flex-direction: column;
		min-height: calc( 100dvh - var( --header-height, 53px ) - 52px );
		box-sizing: border-box;
	}

	body.lp-kaartpagina #lp-planner[open] .lp-pl-voet { margin-top: auto; }

	/* Behalve op de voordeur. Daar staat één invoerveld, en zodra het toetsenbord
	   opengaat is `100dvh` iets anders dan een tel eerder — met deze regel erin
	   herschikte het hele scherm onder je vingers. Zonder vaste hoogte gebeurt er
	   niets: iOS schuift het veld zelf in beeld en de rest blijft staan. */
	body.lp-kaartpagina #lp-planner[open].is-eerst-waarheen > .lp-onderweg-inhoud {
		display: block;
		min-height: 0;
	}

	/* ── Schermvullend: het paneel begint bovenaan, niet onder de sitebalk ──────
	 * De `top` hierboven houdt ruimte vrij voor de balk van het thema, en dat is
	 * normaal precies goed. Schermvullend staat die balk er niet: het blok dekt dan
	 * het hele scherm, dus die 53px lieten een strook kaart boven het paneel staan
	 * — zichtbaar als een half geopend paneel dat het scherm niet vult.
	 *
	 * DRIE LOSSE REGELS EN GEEN SELECTORLIJST, om dezelfde reden als bij de
	 * wrap-hoogte hierboven: kent een browser `:-webkit-full-screen` niet, dan gooit
	 * hij de héle lijst weg — inclusief de vorm die hij wél begrijpt.
	 *
	 * `.is-vol` is de terugval zonder Fullscreen API en juist de variant die op
	 * iOS Safari draait, waar dit gemeld is; die mag dus niet ontbreken. */
	body.lp-kaartpagina .lp-kaart-wrap.is-vol #lp-planner[open],
	body.lp-kaartpagina .lp-kaart-wrap.is-vol #lp-filterblok[open] {
		top: 0;
	}

	body.lp-kaartpagina .lp-kaart-wrap:fullscreen #lp-planner[open],
	body.lp-kaartpagina .lp-kaart-wrap:fullscreen #lp-filterblok[open] {
		top: 0;
	}

	body.lp-kaartpagina .lp-kaart-wrap:-webkit-full-screen #lp-planner[open],
	body.lp-kaartpagina .lp-kaart-wrap:-webkit-full-screen #lp-filterblok[open] {
		top: 0;
	}
}

/* ── De ritbalk: het antwoord blijft op de kaart ─────────────────────────────
 *
 * WAT HIER MIS WAS. De uitslag van het plan stond alleen in het paneel, en het
 * paneel vult op een telefoon het scherm. Je moest het dus sluiten om je route te
 * zien, en daarmee verdween het antwoord: een blauwe lijn over Gelderland zonder
 * kilometers, zonder reistijd, zonder aantal stops.
 *
 * DEZELFDE PLEK ALS DE TELLING, EN DAT IS DE HELE GEDACHTE. Bovenaan de kaart
 * staat één regel die zegt waar je naar kijkt. Zonder rit is dat 'hoeveel
 * snelladers staan hier'; met een rit is dat de rit. Twee badges naast elkaar
 * zouden allebei om aandacht vragen op het moment dat er nog maar één vraag over
 * is, dus de telling stapt opzij (zie .lp-heeft-plan hieronder).
 *
 * DE KLEUR ZEGT WAAR HET GETAL VANDAAN KOMT, precies zoals in het paneel:
 * afstand en tijd in --pl-inkt, het laden in --pl-stroom. Zo leest de balk als
 * een verkorte versie van de uitslag eronder en niet als een nieuw soort ding.
 *
 * Het chevronnetje is met de hand getekend, zelfde reden en zelfde vorm als bij
 * .lp-pl-deelkop: geen icoonlettertype voor een pijl die alleen 'hier zit meer
 * achter' zegt. Hij is de enige aanwijzing dat de balk aantikbaar is — de badge
 * ernaast heeft dezelfde pilvorm maar pointer-events: none. */
body.lp-kaartpagina .lp-ritbalk {
	position: absolute;
	top: .75rem;
	left: 50%;
	transform: translateX( -50% );
	z-index: 851;
	display: flex;
	align-items: center;
	gap: .5rem;
	max-width: min( 92%, 560px );
	margin: 0;
	padding: .4rem .7rem .4rem .85rem;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .96 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 );
	font-family: inherit;
	font-size: .82rem;
	line-height: 1.3;
	color: #1b2733;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

body.lp-kaartpagina .lp-ritbalk[hidden] { display: none; }

.lp-ritbalk-tekst {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Het laadgedeelte in het gele accent — zelfde regel als in het paneel: geel is
   stroom. Zo zie je in één oogopslag welk deel van de balk over laden gaat. */
.lp-ritbalk-stroom { color: #a86a05; }

/* De scheidingspunten mogen zachter dan de getallen die ze scheiden. */
.lp-ritbalk-scheid { color: #93a2b0; }

.lp-ritbalk::after {
	content: '';
	flex: none;
	width: .42rem;
	height: .42rem;
	border-right: 2px solid #5a6b7b;
	border-bottom: 2px solid #5a6b7b;
	transform: translateX( -.1rem ) rotate( -45deg );
}

body.lp-kaartpagina .lp-ritbalk:hover { background: #fff; }
body.lp-kaartpagina .lp-ritbalk:focus-visible {
	outline: 2px solid var( --color-primary-dark, #1267ab );
	outline-offset: 2px;
}

/* Ligt er een plan, dan stapt de telling opzij — zie de toelichting hierboven.
   Ook de verkeersmelding zakt mee, want die hangt onder de telling. */
body.lp-kaartpagina .lp-kaart-wrap.lp-heeft-plan .lp-telling { display: none; }
body.lp-kaartpagina .lp-kaart-wrap.lp-heeft-plan .lp-verkeer-melding { top: 3.1rem; }

/* Een openstaand paneel dekt de kaart af; dan hoeft de balk er niet overheen te
   liggen. Zelfde regel als voor de telling en de verkeersmelding. */
body.lp-kaartpagina #lp-planner[open] ~ .lp-ritbalk,
body.lp-kaartpagina #lp-filterblok[open] ~ .lp-ritbalk,
body.lp-kaartpagina #lp-kaart.lp-popup-open ~ .lp-ritbalk {
	display: none;
}

html[data-theme="dark"] body.lp-kaartpagina .lp-ritbalk {
	background: rgba( 32, 38, 45, .96 );
	color: #e7edf3;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .5 );
}
html[data-theme="dark"] body.lp-kaartpagina .lp-ritbalk:hover { background: #262d35; }
html[data-theme="dark"] .lp-ritbalk-stroom { color: #fbbf24; }
html[data-theme="dark"] .lp-ritbalk-scheid { color: #7b8b99; }
html[data-theme="dark"] .lp-ritbalk::after {
	border-right-color: #9aa7b4;
	border-bottom-color: #9aa7b4;
}

/* ── Ligt er een rit, dan is de rit de hoofdzaak ─────────────────────────────
 *
 * WAT HIER MIS WAS. De routelijn is `#1982d1` en de clusterbellen zijn
 * `var(--color-primary)` — precies dezelfde blauw. Op een geplande rit door
 * Gelderland liep de lijn dwars door een bel '29' heen en was daar simpelweg
 * niet meer te volgen: twee vlakken van één kleur, geen rand ertussen.
 *
 * WAAROM GEEN ANDERE KLEUR. Dat was de eerste ingeving — clusters okergeel, want
 * in het paneel betekent geel 'stroom' en blauw 'weg'. Maar de kleuren op deze
 * kaart zijn nagerekend en niet gekozen: SKILL.md (regel 94) heeft okergeel al
 * afgewezen omdat het maar contrast 1,8 haalt op een lichte OSM-tegel, en elke
 * merkkleur en routelijn is met een ΔE-afstand tegen de rest geijkt. Eén tint
 * verzetten haalt daar een streep door.
 *
 * WAT ER WEL GEBEURT: geen kleur verandert, alleen de rangorde. Zodra er een rit
 * op de kaart ligt, is de vraag niet meer 'wat staat hier allemaal' maar 'waar
 * rijd ik' — dus zakken de clusters en de losse stations naar de achtergrond. Ze
 * blijven leesbaar als context; de lijn wint. Sluit je de rit, dan komen ze
 * onveranderd terug.
 *
 * De routelijnen zelf zitten in Leaflets overlay-pane (SVG) en niet in de
 * marker-pane, dus die raakt dit niet. De genummerde laadstops van het plan en de
 * reisletters staan er wél in en horen juist vol te blijven: dat zijn de punten
 * waar de rit over gaat.
 *
 * ÉÉN REGEL EN GEEN KLASSENLIJST. Eerst stonden hier de drie klassen waarmee de
 * kaart stations tekent (.lp-overzicht-bel uitgezoomd, .lp-cluster op het
 * clusterniveau, .lp-pin voor een losse paal) — en die lijst was meteen al
 * incompleet: de vermogensbordjes (.lp-bordje) bleven vol staan. Zo'n opsomming
 * veroudert bij de eerste markersoort die erbij komt.
 *
 * Nu andersom: alles in de markerlaag dempt, behálve wat zichzelf als onderdeel
 * van de rit aanmeldt. De reisletters, de genummerde laadstops en het label op een
 * alternatieve route krijgen daarvoor `className: 'lp-ritmarker'` mee in
 * laadpalen.js. Wie een nieuwe markersoort toevoegt hoeft hier niets te doen —
 * behalve als hij bij de rit hoort, en dan zegt hij dat zelf. */
body.lp-kaartpagina #lp-kaart.lp-heeft-rit .leaflet-marker-pane > .leaflet-marker-icon:not( .lp-ritmarker ) {
	opacity: .38;
	transition: opacity .25s ease;
}

/* Op een donkere ondergrond slikt dekking meer dan op een lichte: dezelfde .38
   liet de bellen daar vrijwel verdwijnen, en context die je niet meer ziet is geen
   context. */
html[data-theme="dark"] body.lp-kaartpagina #lp-kaart.lp-heeft-rit .leaflet-marker-pane > .leaflet-marker-icon:not( .lp-ritmarker ) {
	opacity: .5;
}

/* Aanwijzen mag altijd: wie een gedempte stip aantikt, wil hem juist zien. */
body.lp-kaartpagina #lp-kaart.lp-heeft-rit .leaflet-marker-pane > .leaflet-marker-icon:not( .lp-ritmarker ):hover {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	body.lp-kaartpagina #lp-kaart.lp-heeft-rit .leaflet-marker-pane > .leaflet-marker-icon { transition: none; }
}

/* ── De twee bordjes op de routekeuze ────────────────────────────────────────
 *
 * Op de kaart liggen tijdens het kiezen twee soorten lijn: de route die nu geldt
 * en de alternatieven ernaast. Ze dragen allebei een bordje, en samen vormen die
 * één zin: 'deze rit duurt 8 u 40 min, die andere weg kost 27 minuten extra'.
 *
 * ÉÉN ABSOLUUT ANKER, DE REST RELATIEF. Zo vergelijk je routes ook in je hoofd.
 * Twee absolute tijden naast elkaar dwingen de lezer tot een aftreksom die de
 * kaart net zo goed zelf kan maken; twee verschillen zonder anker zeggen niet hoe
 * lang je onderweg bent. Vandaar: het gekozen bordje noemt de rijtijd, elk ander
 * bordje het verschil daarmee.
 *
 * DE KLEUR ZEGT BIJ WELKE LIJN HET BORDJE HOORT. Het gekozen bordje is gevuld in
 * het routeblauw en heeft dezelfde witte ring als de reisspelden — het is
 * onderdeel van de rit. Een alternatief is wit met de grijsblauwe rand van zijn
 * eigen streepjeslijn: het staat er wel, maar het is nog geen rit. Geen nieuwe
 * tinten; allebei bestaande tokens, dus de ΔE-afweging uit SKILL.md blijft heel.
 * Wit op #1267ab haalt 5,9:1, #47576a op wit 7,0:1.
 *
 * ALLEEN HET ALTERNATIEF IS EEN KNOP. Daar valt iets te kiezen — en een
 * streepjeslijn van 3px is met een vinger geen doel, dit bordje wel. Het gekozen
 * bordje is een label en niets meer: het laat kliks door naar de lijn eronder, die
 * het laadplan opent. Een label labelt. */
.lp-wegbordje {
	display: inline-block;
	/* --duw-x / --duw-y worden door ontwarBordjes() in laadpalen.js gezet als twee
	   bordjes elkaar raken; standaard nul, dus deze regel gedraagt zich zonder die
	   functie precies zoals hij deed. */
	transform: translate( calc( -50% + var( --duw-x, 0px ) ),
	                      calc( -50% + var( --duw-y, 0px ) ) );
	padding: .15rem .45rem;
	border-radius: 999px;
	font-family: var( --font-heading, sans-serif );
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* De afstand onder de tijd, en duidelijk ondergeschikt daaraan: kleiner, lichter
   en met minder dekking. De vraag is 'hoe lang doe ik erover' — de kilometers zijn
   het antwoord op de vraag erna. Zou de tweede regel even zwaar staan, dan moet je
   elke keer opnieuw kiezen welk getal je aan het lezen bent.

   Een radius van 999px op een blokje van twee regels wordt een ovaal met te veel
   lucht links en rechts; 12px houdt de pilvorm zonder dat de hoeken de tekst
   wegduwen. */
.lp-wegbordje:has( .lp-wegbordje-onder ) { border-radius: 12px; }

.lp-wegbordje-onder {
	display: block;
	margin-top: -.05rem;
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .01em;
	opacity: .78;
}

/* NAAST DE LIJN IN PLAATS VAN EROP. De genummerde laadstops liggen zelf op de
   route, om de etappe een — uitgezoomd zo'n vijftig pixels uit elkaar. Een bordje
   past daar wel tussen, maar raakt boven en onder nog net de ringen, en dan is geen
   van beide meer te lezen. middenVrij() in laadpalen.js zoekt de ruimste plek en
   dat helpt, maar het maakt geen ruimte die er niet is; ernaast is die er wel.
   bordjeKant() kiest de kant uit de vorm van de rit.

   22px EN NIET 14px, want de afstand telt vanaf het punt op de lijn en niet vanaf
   de rand van wat daar staat: een laadstop is 26px breed, dus 13px daarvan steekt
   naar de kant waar het bordje heen wil. Met 14px lucht raakten ze elkaar alsnog
   op één pixel na — gemeten op de rit naar Bordeaux, waar het bordje tegen stop 3
   aan lag. 13 voor de halve ring plus 9 lucht. */
/* Elk hangt aan één kant vast en houdt zijn speelruimte in de andere as: een
   bordje naast een noord-zuidlijn schuift omhoog of omlaag, eentje boven een
   oost-westlijn schuift opzij. Zo blijft het even ver van zijn eigen weg staan. */
.lp-wegbordje-naast-links {
	transform: translate( calc( -100% - 22px ), calc( -50% + var( --duw-y, 0px ) ) );
}
.lp-wegbordje-naast-boven {
	transform: translate( calc( -50% + var( --duw-x, 0px ) ), calc( -100% - 22px ) );
}

/* De route die nu geldt. */
.lp-wegbordje-gekozen {
	border: 0;
	background: var( --color-primary-dark, #1267ab );
	color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba( 0, 0, 0, .45 );
	pointer-events: none;
}

/* Een weg die je nog kunt kiezen. */
.lp-wegbordje-ander {
	border: 1px solid #5a6b7b;
	background: rgba( 255, 255, 255, .94 );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .3 );
	color: #47576a;
	cursor: pointer;
}

.leaflet-marker-icon:focus-visible .lp-wegbordje-ander {
	outline: 2px solid var( --color-primary-dark, #1267ab );
	outline-offset: 2px;
}

html[data-theme="dark"] .lp-wegbordje-ander {
	background: rgba( 32, 38, 45, .94 );
	border-color: #8d9dad;
	color: #cbd5df;
}

/* De witte ring om het gekozen bordje is op een donkere kaart te hard; daar doet
   een donkere rand hetzelfde werk — loskomen van de ondergrond. */
html[data-theme="dark"] .lp-wegbordje-gekozen {
	box-shadow: 0 0 0 2px #1b2733, 0 1px 5px rgba( 0, 0, 0, .6 );
}

/* Het kruisje is standaard verborgen; alleen de mobiele volscherm-panelen tonen het. */
.lp-paneel-sluit { display: none; }

/* ── Tellingbadge: zwevende HUD bovenaan, midden ──────────────────────────── */
/* Schaalbalk: rechtsonder, net boven de Filters-pil. Uit de Leaflet-hoek naar de
   wrap verplaatst (zie laadpalen.js), dus hier absoluut positioneren. z-index 840
   houdt hem onder de panelen (900), zodat een geopend filterpaneel hem netjes
   afdekt. Lichte styling; de donkere tegenhanger staat in het dark-mode-blok. */
body.lp-kaartpagina .leaflet-control-scale {
	position: absolute;
	right: .75rem;
	bottom: 3.6rem;
	left: auto;
	top: auto;
	z-index: 840;
	margin: 0;
	pointer-events: none;
}
body.lp-kaartpagina .leaflet-control-scale-line {
	background: rgba( 255, 255, 255, .88 );
	border: 2px solid #40515f;
	border-top: none;
	color: #2b3a47;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 1px 6px 2px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .18 );
}

/* Mobiel: schaalbalk en Filters-knop wisselen van plek.
 * Op desktop is de pil breed ('Filters' met telling) en staat de schaalbalk daar
 * netjes bovenop. Op een telefoon is de pil een rond duimknopje in de hoek, en dan
 * hoort dát het onderste ding te zijn: de schaalbalk zakt naar de onderrand en de
 * knop schuift erboven.
 *
 * Bewust ná de regels hierboven en niet erin: een mediaquery telt niet mee voor de
 * specificiteit, dus alleen een látere regel wint van de `bottom` daar.
 * `:not([open])` omdat het geopende filterpaneel op mobiel het hele scherm vult en
 * zijn eigen positie houdt. */
@media ( max-width: 767.98px ) {
	body.lp-kaartpagina .leaflet-control-scale { bottom: .75rem; }

	/* .75rem onderrand + ~22px schaalbalk + wat lucht. */
	body.lp-kaartpagina #lp-filterblok:not( [open] ) { bottom: 2.6rem; }
}

body.lp-kaartpagina .lp-telling {
	position: absolute;
	top: .75rem;
	left: 50%;
	transform: translateX( -50% );
	z-index: 850;
	margin: 0;
	max-width: min( 60%, 420px );
	padding: .35rem .7rem;
	background: rgba( 255, 255, 255, .92 );
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .2 );
	font-size: .78rem;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/* Met een kanttekening erbij: breder, meerregelig en zonder afkappen. Een pil van
   één regel met puntjes werkt voor 'x snelladers op y locaties', maar een zin van
   twee regels die middenin een woord ophoudt is onleesbaar. */
body.lp-kaartpagina .lp-telling.lp-telling-met-noot {
	/* max-content naast max-width: de kanttekening is een display:block binnen een
	   inline span, en dan komt de browser bij een absoluut gepositioneerde pil op
	   een krappe tussenbreedte uit — gemeten 195px waar 92% van het scherm mocht,
	   zodat de eerste zin over drie regels brak. Zo wordt hij zo breed als de
	   langste regel wil en niet breder dan het scherm toestaat. */
	width: max-content;
	max-width: min( 92%, 560px );
	white-space: normal;
	text-overflow: clip;
	border-radius: 12px;
	line-height: 1.35;
	padding: .45rem .8rem;
}

/* Zodra een stationspopup openstaat, moeten de zwevende HUD-elementen weg — de
 * pillen (z-index 900) en de tellingbadge lagen anders over de popup heen. Leaflet
 * zet 'lp-popup-open' op #lp-kaart; de overlays zijn daarvan zusters binnen
 * .lp-kaart-wrap, vandaar de ~-selector. Sluit de popup, dan komen ze terug.
 * (Dit sluit aan op het bestaande dimmen van Leaflets eigen bediening.) */
body.lp-kaartpagina #lp-kaart.lp-popup-open ~ #lp-planner,
body.lp-kaartpagina #lp-kaart.lp-popup-open ~ #lp-filterblok,
body.lp-kaartpagina #lp-kaart.lp-popup-open ~ .lp-telling,
body.lp-kaartpagina #lp-kaart.lp-popup-open ~ .lp-verkeer-melding {
	display: none;
}

/* De verkeersmelding hangt ónder de tellingbadge, niet ernaast: allebei
   gecentreerd bovenaan zou ze over elkaar leggen. Bewust geen `nowrap` met
   puntjes zoals de telling — dit is een zin van twee regels, en die middenin een
   woord afkappen is onleesbaar (zelfde reden als bij .lp-telling-met-noot). */
body.lp-kaartpagina .lp-verkeer-melding {
	position: absolute;
	top: 3.1rem;
	left: 50%;
	transform: translateX( -50% );
	z-index: 849;
	margin: 0;
	max-width: min( 92%, 520px );
	padding: .4rem .8rem;
	background: rgba( 255, 255, 255, .94 );
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .2 );
	font-size: .76rem;
	text-align: center;
	pointer-events: none;
}

/* Staat de telling zelf al op twee regels, dan moet deze verder omlaag. */
body.lp-kaartpagina .lp-telling.lp-telling-met-noot ~ .lp-verkeer-melding {
	top: 4.4rem;
}

/* Staat de planner of het filterblok open, dan verbergt de gecentreerde
 * stations-teller zich: op smallere desktopschermen liep hij anders onder de
 * planner-pil rechtsboven. De teller is een later broertje van beide panelen
 * binnen .lp-kaart-wrap (zie de popup-regel hierboven), dus ~ werkt. */
body.lp-kaartpagina #lp-planner[open] ~ .lp-telling,
body.lp-kaartpagina #lp-filterblok[open] ~ .lp-telling,
body.lp-kaartpagina #lp-planner[open] ~ .lp-verkeer-melding,
body.lp-kaartpagina #lp-filterblok[open] ~ .lp-verkeer-melding {
	display: none;
}

/* ── Vanaf tablet: zwevende hoekpanelen in plaats van bottom-sheets ────────── */
@media ( min-width: 768px ) {
	/* De filter-pil moet hier zichtbaar blijven: hij is de overlay-trigger. De
	   generieke regel verbergt hem op desktop, want daar stond het filterblok
	   vroeger altijd open. */
	body.lp-kaartpagina .lp-filterblok > .lp-filterknop { display: flex; }

	/* Op desktop is er ruimte: het label staat gewoon in de pil. */
	body.lp-kaartpagina #lp-planner:not( [open] ) .lp-pil-label,
	body.lp-kaartpagina #lp-filterblok:not( [open] ) .lp-pil-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	body.lp-kaartpagina #lp-planner,
	body.lp-kaartpagina #lp-filterblok { width: min( 420px, calc( 100% - 1.5rem ) ); }

	body.lp-kaartpagina #lp-planner[open],
	body.lp-kaartpagina #lp-filterblok[open] {
		position: absolute;
		left: auto; right: .75rem;
		width: min( 420px, calc( 100% - 1.5rem ) );
		max-width: calc( 100% - 1.5rem );
		max-height: none;
		z-index: 900;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
		align-items: flex-end;
	}

	/* Planner klapt naar beneden open, de filters (rechtsonder) naar boven. */
	body.lp-kaartpagina #lp-planner[open]    { top: .75rem;    bottom: auto; flex-direction: column; }
	body.lp-kaartpagina #lp-filterblok[open] { bottom: .75rem; top: auto;    flex-direction: column-reverse; }

	body.lp-kaartpagina #lp-planner[open] > summary,
	body.lp-kaartpagina #lp-filterblok[open] > summary {
		border-radius: 999px;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, .22 );
	}

	/* Het uitgeklapte deel is een los zwevend kaartje naast de pil. */
	body.lp-kaartpagina #lp-planner[open] > .lp-onderweg-inhoud,
	body.lp-kaartpagina #lp-filterblok[open] > .lp-filters {
		width: 100%;
		margin: .5rem 0;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba( 0, 0, 0, .25 );
		overflow-y: auto;
		overscroll-behavior: contain;
		max-height: calc( 100dvh - var( --header-height, 53px ) - 10rem );
	}

	/* ── De voordeur mag breder ───────────────────────────────────────────────
	 * Hij draagt hele plaatsnamen ('Col du Galibier, Auvergne-Rhône-Alpes,
	 * France') en één grote vraag, en op desktop is er ruimte zat.
	 *
	 * MET EEN LENGTE EN NIET MET EEN PERCENTAGE, en dat is hier geen smaak. Het
	 * kaartje hierboven staat op `width: 100%`, en dat viel in deze toestand terug
	 * op de inhoudsbreedte — gemeten 263px tegen 420px voor het volle paneel. Met
	 * alleen de voordeur zichtbaar is er geen brede inhoud meer om zich aan op te
	 * trekken, en dan is 100% van een kaartje dat zichzelf meet 100% van niets.
	 * Vandaar dat de breedte hier op beide staat: op het zwevende blok én op het
	 * kaartje erin. */
	body.lp-kaartpagina #lp-planner[open].is-eerst-waarheen,
	body.lp-kaartpagina #lp-planner[open].is-eerst-waarheen > .lp-onderweg-inhoud {
		width: min( 520px, calc( 100vw - 1.5rem ) );
	}

	/* Binnenmarge terug. `.lp-filters` krijgt hierboven `padding: 0`, uit de tijd
	   dat het filterblok een balk in de pagina was en zijn ruimte van de
	   paginakolom kreeg. Als zwevend kaartje is er niets meer omheen, dus plakten
	   de velden tegen de rand — links, rechts en onder. De planner had dit niet:
	   `.lp-onderweg-inhoud` houdt gewoon zijn eigen .9rem.
	   Ruim bovenaan, want daar hangt het sluitkruis. */
	body.lp-kaartpagina #lp-filterblok[open] > .lp-filters {
		padding: 2.5rem .9rem .9rem;
	}

	/* ── Sluitkruis in plaats van de pil ──────────────────────────────────────
	 * Openstaand paneel + pil ernaast is dubbelop: de pil zegt "Filters" terwijl
	 * de filters al in beeld staan, en je moest hem opzoeken om te sluiten. Open
	 * verdwijnt de pil daarom en wordt de <summary> een kruisje in de hoek van
	 * het kaartje. De summary blíjft de schakelaar — dat is de eigen werking van
	 * <details> — dus het kruisje sluit zonder een regel JavaScript, en dan komt
	 * de pil vanzelf terug.
	 *
	 * Absoluut t.o.v. #lp-filterblok, dat hier al position:absolute is en
	 * overflow:visible heeft. Alleen de filters: de planner klapt naar beneden
	 * open en houdt zijn pil als kop. */
	body.lp-kaartpagina #lp-filterblok[open] > summary {
		position: absolute;
		top: .55rem;
		right: .3rem;
		z-index: 2;
		width: 40px;
		min-height: 40px;
		padding: 0;
		justify-content: center;
		background: transparent;
		border-radius: 999px;
		box-shadow: none;
	}

	body.lp-kaartpagina #lp-filterblok[open] > summary:hover {
		background: #eef2f5;
	}

	/* Het label blijft in de DOM: zonder tekst heeft de summary geen naam voor een
	   schermlezer, en het kruisje is een aria-hidden icoon. */
	body.lp-kaartpagina #lp-filterblok[open] > summary .lp-filterknop-tekst {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}

	/* De telling hoort bij de dichte pil; open staat ze onder in het paneel. */
	body.lp-kaartpagina #lp-filterblok[open] > summary .lp-filterknop-telling {
		display: none;
	}

	body.lp-kaartpagina #lp-filterblok[open] .lp-paneel-sluit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 1.2rem;
		line-height: 1;
		color: #5a6b7b;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Donkere modus
   Het thema klapt om via html[data-theme="dark"] en zet daar zijn eigen
   variabelen. Alles hierboven is in lichte kleuren geschreven, dus hier
   overschrijven we wat anders als een wit blok op een donkere pagina blijft
   staan. De markers blijven wél licht: witte randen om een stip houden hem
   leesbaar, ook op een donkere ondergrond.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── De kaarttegels ────────────────────────────────────────────────────────
 *
 * EEN FILTER OP DE TEGELS, GEEN TWEEDE TEGELBRON. Er zijn kant-en-klare donkere
 * basiskaarten (CARTO dark_all, Stadia Alidade Smooth Dark), en die zien er beter
 * uit dan dit. Maar ze kosten alle drie iets wat hier zwaarder weegt: een tweede
 * externe host in het paginaverkeer, een andere verplichte bronvermelding dan de
 * OpenStreetMap-regel die er nu staat, en bij Stadia sinds 2023 een API-sleutel
 * met een gebruikslimiet. Voor een kaart die live gaat op gedeelde hosting is een
 * CSS-filter dat nul extra verzoeken kost de nuchtere keuze.
 *
 * DE RECEPTUUR. `invert(1)` maakt papier zwart en tekst wit, maar draait ook alle
 * kleuren om: water zou oranje worden. `hue-rotate(180deg)` zet die tint terug, dus
 * water blijft blauw en groen blijft groen. De rest tempert alleen: onbewerkt is
 * het resultaat te fel voor een donkere pagina.
 *
 * ALLEEN HET TEGELvlak. Markers, clusterbellen, routelijnen (SVG in de overlay-laag)
 * en popups zitten in ándere Leaflet-lagen en blijven onaangeroerd — precies de
 * bedoeling, want de merkkleuren van de stippen en de ΔE-afstanden tussen de
 * routelijnen zijn zorgvuldig gekozen. Zet dit filter dus nooit op #lp-kaart als
 * geheel; dan draaien die kleuren mee om en klopt er niets meer van.
 *
 * EN NIET OP HET TEGELVLAK ZELF, MAAR OP DE LAGEN DAARIN. Een luchtfoto hóórt
 * niet om te klappen: `invert` maakt er een negatief van waarin gras paars is en
 * een dak wit — geen donkere kaart maar een kapotte foto. Een filter op de pane
 * valt van bovenaf over álles wat erin ligt en is van onderaf niet terug te
 * draaien; CSS kent geen 'filter: none' die die van een voorouder opheft. Daarom
 * staat hij hier op de laag, en zet `geenInvert()` in laadpalen.js de vlag op de
 * luchtfoto — in beide vormen: het MapLibre-canvas met de foto erin, en de
 * rastervorm uit het vangnet (foto + CARTO-labels, twee lagen).
 *
 * Elke ondergrond is één kind van de pane (gemeten: `.leaflet-layer` bij OSM,
 * `.leaflet-gl-layer maplibregl-map` bij de vector- en luchtkaart), dus voor de
 * kaarten die wél omklappen verandert er niets aan het resultaat. */
html[data-theme="dark"] #lp-kaart .leaflet-tile-pane > :not( .lp-geen-invert ) {
	filter: invert( 1 ) hue-rotate( 180deg ) brightness( .92 ) contrast( .92 ) saturate( .85 );
}

/* Leaflets eigen bediening gaat uit van een lichte kaart: de zoomknoppen, de
   bronvermelding en onze schaalbalk zijn alle drie wit. Op donkere tegels zijn dat
   drie felle vlekken. Ze liggen buiten het tegelvlak, dus het filter hierboven
   raakt ze niet en moeten ze hier apart om. */
html[data-theme="dark"] #lp-kaart .leaflet-bar a,
html[data-theme="dark"] #lp-kaart .leaflet-bar a:hover {
	background: var( --color-bg-alt );
	color: var( --color-text );
	border-bottom-color: var( --color-border );
}
html[data-theme="dark"] #lp-kaart .leaflet-bar a:hover { background: var( --color-bg ); }
html[data-theme="dark"] #lp-kaart .leaflet-bar a.leaflet-disabled {
	background: var( --color-bg );
	color: var( --color-text-muted );
}

html[data-theme="dark"] #lp-kaart .leaflet-control-attribution {
	background: rgba( 20, 28, 36, .85 );
	color: var( --color-text-muted );
}
html[data-theme="dark"] #lp-kaart .leaflet-control-attribution a { color: #6cb6ea; }

html[data-theme="dark"] body.lp-kaartpagina .leaflet-control-scale-line {
	background: rgba( 20, 28, 36, .85 );
	border-color: var( --color-border );
	color: var( --color-text );
}

/* Het scrollwiel-hulpje linksonder. Zelfde verhaal: eigen zwevend vlak, buiten het
   tegelvlak, dus wit gebleven op een donkere kaart. De ⓘ eronder heeft dit niet
   nodig — die zit al in een zwart bakje. */
html[data-theme="dark"] #lp-kaart .lp-kaart-hint {
	background: rgba( 20, 28, 36, .9 );
	color: var( --color-text );
}
	/* ── Panelen en randen ─────────────────────────────────────────────── */
html[data-theme="dark"] .lp-filterblok,
html[data-theme="dark"] .lp-onderweg,
html[data-theme="dark"] .lp-kaart-wrap {
		border-color: var( --color-border );
}
html[data-theme="dark"] .lp-onderweg { background: var( --color-bg );
}
html[data-theme="dark"] .lp-filterknop,
html[data-theme="dark"] .lp-onderweg-knop {
		background: var( --color-bg-alt );
		color: var( --color-secondary );
}
html[data-theme="dark"] .lp-filterknop::after {
		border-right-color: var( --color-text-muted );
		border-bottom-color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-cijfer { background: var( --color-bg-alt );
}
html[data-theme="dark"] .lp-cijfer-label { color: var( --color-text-muted );
}
	/* ── Labels en losse tekst ─────────────────────────────────────────── */
html[data-theme="dark"] .lp-filter label,
html[data-theme="dark"] .lp-onderweg > label,
html[data-theme="dark"] .lp-veld-eenheid span,
html[data-theme="dark"] .lp-telling,
html[data-theme="dark"] .lp-onderweg-meer,
html[data-theme="dark"] .lp-ow-over,
html[data-theme="dark"] .lp-ow-naam small,
html[data-theme="dark"] .lp-lader-kw,
html[data-theme="dark"] .lp-vermogens,
html[data-theme="dark"] .lp-detail-bezet small,
html[data-theme="dark"] .lp-routevak-kop small,
html[data-theme="dark"] .lp-onderweg-bron small,
html[data-theme="dark"] .lp-popup-adres {
		color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-onderweg-melding,
html[data-theme="dark"] .lp-onderweg-bron,
html[data-theme="dark"] .lp-detail-regel,
html[data-theme="dark"] .lp-routevak-meting {
		color: var( --color-text );
}
	/* ── Invoervelden ──────────────────────────────────────────────────── */
html[data-theme="dark"] .lp-filter select,
html[data-theme="dark"] .lp-veld-eenheid input,
html[data-theme="dark"] .lp-vertrek-rij input,
html[data-theme="dark"] .lp-planner .lp-invoer-wrap input,
html[data-theme="dark"] .lp-meld-tekst,
html[data-theme="dark"] .lp-reset,
html[data-theme="dark"] .lp-knop-stil {
		background: var( --color-bg );
		color: var( --color-text );
		border-color: var( --color-border );
}
html[data-theme="dark"] .lp-reset:hover { background: var( --color-bg-alt );
}
	/* ── Lijsten ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .lp-laders,
html[data-theme="dark"] .lp-onderweg-lijst,
html[data-theme="dark"] .lp-onderweg-lijst li,
html[data-theme="dark"] .lp-popup-status {
		border-color: var( --color-border );
}
html[data-theme="dark"] .lp-lader { background: var( --color-bg-alt ); border-color: var( --color-border ); }
html[data-theme="dark"] .lp-ow-rij:hover,
html[data-theme="dark"] .lp-ow-rij:focus-visible { background: var( --color-bg-alt );
}
html[data-theme="dark"] .lp-onderweg-lijst li.is-tip { background: rgba( 26, 152, 80, .12 );
}
html[data-theme="dark"] /* ── Gekleurde vlakken: dezelfde betekenis,
html[data-theme="dark"] gedempt voor een donkere
	      achtergrond. Volle kleuren worden hier fel en onleesbaar. ──────── */
	.lp-tip {
		background: rgba( 26, 152, 80, .16 );
		border-color: rgba( 26, 152, 80, .45 );
}
html[data-theme="dark"] .lp-tip-label { color: #6ed48f;
}
html[data-theme="dark"] .lp-tip-meta { color: var( --color-text );
}
html[data-theme="dark"] .lp-tip strong { color: var( --color-secondary );
}
html[data-theme="dark"] .lp-routevak,
html[data-theme="dark"] .lp-onderweg-vraag {
		background: rgba( 25, 130, 209, .14 );
		border-color: rgba( 25, 130, 209, .4 );
		color: var( --color-text );
}
html[data-theme="dark"] .lp-pl-totaal,
html[data-theme="dark"] .lp-pl-laden,
html[data-theme="dark"] .lp-pl-slot,
html[data-theme="dark"] .lp-pl-kop,
html[data-theme="dark"] .lp-pl-vink,
html[data-theme="dark"] .lp-pl-fav { color: var( --color-text ); }
/* De popup houdt in donkere modus Leaflets lichte achtergrond (zie verderop), dus
   de knop in de titelregel hoeft daar niets; deze chips staan wél in het donkere
   plannerblok. */
html[data-theme="dark"] .lp-mijd-chip {
		background: #3a2523;
		border-color: #7d4a43;
		color: #f0c7c1;
}
html[data-theme="dark"] .lp-mijd-chip:hover { background: #4a2d2a; }
/* Het hele plannerpaneel draait op de tokens bovenaan, dus donkere modus is
   hier één blok en geen rij losse overschrijvingen. Blauw en geel worden allebei
   opgetild: op #1f2a33 zakt #1267ab weg en is #a86a05 modderig. */
html[data-theme="dark"] .lp-planner {
		--pl-weg:        #57aef0;
		--pl-stroom:     #f0c04a;
		--pl-lijn:       #47555f;
		--pl-blad:       var( --color-bg, #1f2a33 );
		--pl-inkt:       var( --color-text, #e6ebf0 );
		--pl-inkt-zacht: #9aa7b4;
}

html[data-theme="dark"] .lp-pl-tijdrij label { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-pl-voet {
		box-shadow: 0 -1px 0 var( --pl-lijn ), 0 -8px 14px -10px rgba( 0, 0, 0, .6 );
}

html[data-theme="dark"] .lp-pl-filters {
		background: var( --color-bg-alt );
		color: var( --color-text );
}
/* De popup houdt in dark mode Leaflets witte achtergrond, dus de sterknop daarin
   ook — alleen het overzicht in het plannerblok klapt om. */
html[data-theme="dark"] .lp-fav-chip {
		background: rgba( 232, 168, 0, .18 );
		color: var( --color-text );
}
html[data-theme="dark"] .lp-ow-rij.is-fav { background: rgba( 232, 168, 0, .12 ); }
html[data-theme="dark"] .lp-nieuw {
		background: var( --color-card, #16202b );
		color: var( --color-text, #e6ecf2 );
}
html[data-theme="dark"] .lp-nieuw-kop { border-bottom-color: rgba( 255, 255, 255, .12 ); }
html[data-theme="dark"] .lp-nieuw-lijst h3 { color: #9aa7b4; }
/* Het bronnenvenster erft de donkere dialoog van .lp-nieuw; alleen de links uit
   Leaflets attributie moeten mee, die staan anders donkerblauw op donkergrijs. */
html[data-theme="dark"] .lp-bronvenster-lijst .leaflet-control-attribution a { color: #7fb2ff; }
html[data-theme="dark"] .lp-bronvenster-lijst .leaflet-control-attribution a:hover,
html[data-theme="dark"] .lp-bronvenster-lijst .leaflet-control-attribution a:focus { color: #a8ccff; }

html[data-theme="dark"] .lp-pl-notitie,
html[data-theme="dark"] .lp-pl-mist {
		background: rgba( 232, 168, 0, .14 );
		color: var( --color-text );
}
html[data-theme="dark"] .lp-pl-kanttekening,
html[data-theme="dark"] .lp-pl-laden small,
html[data-theme="dark"] .lp-pl-aanktijd,
html[data-theme="dark"] .lp-druk-waarom { color: var( --color-text-muted ); }

html[data-theme="dark"] .lp-pl-factoren { color: var( --color-text ); }
html[data-theme="dark"] .lp-pl-factoren > li { border-bottom-color: rgba( 255, 255, 255, .12 ); }
html[data-theme="dark"] .lp-pl-factoren > li.lp-f-totaal { border-top-color: rgba( 255, 255, 255, .2 ); }
html[data-theme="dark"] .lp-f-waarde,
html[data-theme="dark"] .lp-pl-geenweer,
html[data-theme="dark"] .lp-pl-koud { color: var( --color-text-muted ); }

html[data-theme="dark"] .lp-pl-dag {
	background: rgba( 255, 255, 255, .12 );
	color: var( --color-text );
}

html[data-theme="dark"] .lp-pl-tijd {
		background: var( --color-bg );
		border-color: var( --color-border );
		color: var( --color-text );
}
/* Drukte-labels: volle pasteltinten worden fel op donker; vandaar doorzichtige
   tinten met een lichte, leesbare tekstkleur. */
html[data-theme="dark"] .lp-druk-rustig { background: rgba( 39, 174, 96, .22 );  color: #7ee0a3; }
html[data-theme="dark"] .lp-druk-matig  { background: rgba( 230, 176, 32, .22 ); color: #f0cf90; }
html[data-theme="dark"] .lp-druk-druk   { background: rgba( 230, 126, 34, .24 ); color: #f4b382; }
html[data-theme="dark"] .lp-druk-vol    { background: rgba( 220, 60, 60, .26 );  color: #f2a0a0; }

html[data-theme="dark"] .lp-pl-eindpunt   { background: rgba( 255, 255, 255, .04 ); }
html[data-theme="dark"] .lp-pl-tussenstop { background: rgba( 255, 255, 255, .04 ); }
html[data-theme="dark"] .lp-pl-punt     { color: var( --color-text-muted ); }

/* De rij is geen kaartje meer maar alleen opmaak (zie 'De reis als route'), dus
   hier valt niets in te kleuren; de marker en de lijn lopen op de tokens. */
html[data-theme="dark"] .lp-pl-weg { color: #8b96a1; }
html[data-theme="dark"] .lp-merk        { box-shadow: 0 0 0 1px rgba( 255, 255, 255, .25 ); }
html[data-theme="dark"] .lp-onderweg-krap,
html[data-theme="dark"] .lp-waarschuwing {
		background: rgba( 230, 160, 32, .14 );
		border-left-color: #e6a020;
		color: #f0cf90;
}
html[data-theme="dark"] .lp-onderweg-leeg {
		background: rgba( 230, 160, 32, .12 );
		color: #f0cf90;
}
html[data-theme="dark"] .lp-leeg {
		background: var( --color-bg-alt );
		color: var( --color-text-muted );
}
html[data-theme="dark"] /* Telbadges: pastel werkt niet op donker,
html[data-theme="dark"] dus doorzichtige tinten. */
	.lp-lader-vrij { background: rgba( 26, 152, 80, .22 );  color: #7fd99b;
}
html[data-theme="dark"] .lp-lader-druk { background: rgba( 230, 160, 32, .22 ); color: #f0c274;
}
html[data-theme="dark"] .lp-lader-vol { background: rgba( 215, 48, 31, .22 );  color: #f0908a;
}
html[data-theme="dark"] .lp-buiten-dienst { background: rgba( 230, 160, 32, .22 ); color: #f0c274;
}
html[data-theme="dark"] .lp-lader-aantal { background: var( --color-bg-alt );     color: var( --color-text );
}
html[data-theme="dark"] .lp-telling-kanttekening { color: #fbbf24; }
html[data-theme="dark"] .lp-telling-leeg,
html[data-theme="dark"] .lp-verbruik-hoog,
html[data-theme="dark"] .lp-melding-fout,
html[data-theme="dark"] .lp-route-fout { color: #f0b060;
}
html[data-theme="dark"] .lp-zoomhint { color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-routevak-sluit { color: var( --color-text-muted );
}
/* ── Voorzieningen bij een station ─────────────────────────────────────────
 * Uit OpenStreetMap, binnen 350 m. Pictogram plus woord: alleen een icoontje
 * is een raadsel, alleen tekst neemt te veel ruimte in een popup. */
.lp-voorz {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: .45rem 0;
	padding: 0;
	list-style: none;
}

.lp-voorz-item {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .18rem .45rem;
	background: #eef1f4;
	border-radius: 999px;
	font-size: .74rem;
	color: #40515f;
	white-space: nowrap;
}

.lp-voorz-item i { font-size: .78rem; color: var( --color-primary, #1982d1 ); }

/* ── Uitklaplijst met de voorzieningen ───────────────────────────────────────
 * Dichtgeklapt één regel, want het hoogtebudget van de popup is krap. De chips
 * erboven blijven de samenvatting; dit is de uitsplitsing per zaak. */
.lp-voorz-meer { margin: .1rem 0 .35rem; }

.lp-voorz-meer > summary {
	cursor: pointer;
	font-size: .78rem;
	color: var( --color-primary, #1982d1 );
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .1rem 0;
}
.lp-voorz-meer > summary::-webkit-details-marker { display: none; }
.lp-voorz-meer > summary::after {
	content: '';
	width: .38rem; height: .38rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg ) translate( -1px, -1px );
	transition: transform .15s ease;
}
.lp-voorz-meer[open] > summary::after { transform: rotate( -135deg ) translate( -1px, -1px ); }

/* Geen vlak meer eronder — dat gaf precies dezelfde grijsblauwe achtergrond
   als het ladersblok en het prijs/adres-kaartje, drie keer op een rij. De
   dunne lijn tussen de rijen (.lp-vz-rij) scheidt ze net zo goed, met minder
   herhaling. */
.lp-voorz-lijst {
	margin: .25rem 0 0;
	padding: 0;
	list-style: none;
}

.lp-vz-rij {
	display: flex;
	flex-wrap: wrap;   /* de openingstijden vallen zo op een eigen regel */
	align-items: flex-start;
	/* KOLOMGAP EN RIJGAP APART. Met één `gap: .5rem` gold die 8px in een
	   wrappende flexrij óók tussen de regels, dus stonden de openingstijden 8px
	   onder de naam te zweven terwijl ze erbij horen. De horizontale ruimte
	   tussen icoon, naam en afstand moet wél blijven. */
	column-gap: .5rem;
	row-gap: .1rem;
	padding: .45rem 0;
	border-bottom: 1px solid rgba( 0, 0, 0, .08 );
	font-size: .8rem;
	line-height: 1.25;
}
.lp-vz-rij:last-child { border-bottom: 0; }

/* Grijs en met afgeronde hoeken, niet de blauwe rondjes van het ladersblok.
 * Dat verschil is opzet: de laders zijn waar de kaart over gáát, de
 * voorzieningen zijn de bijvangst. Dezelfde chip voor beide zou ze even zwaar
 * maken. */
/* 28 en niet 24, en de glyph mee omhoog: op een telefoon was 24px met een
   10,9px-glyph net te klein om een vork van een winkelwagen te onderscheiden
   zonder erop te turen. De verhouding glyph/tegel blijft gelijk (0,46), dus het
   is één maat groter en geen ander ontwerp. */
.lp-vz-rij > i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	margin-top: .05rem;
	border-radius: 8px;
	background: #eaeef1;
	color: #6b7684;
	font-size: .8rem;
}

/* De naam mag afbreken, de afstand nooit — anders valt '135 m · 2 min' uiteen.
 *
 * `flex: 1 1 0` en niet `1 1 auto`, en dat verschil is sinds flex-wrap dragend.
 * Met `auto` wordt de naam op zijn ínhoudsbreedte ingedeeld, en zodra die breed is
 * ('Albert Heijn to go' met een 24/7-badge erachter) past de afstand niet meer op
 * de regel en wipt hij eronder — flexbox wrapt namelijk vóórdat hij krimpt. Met
 * basis 0 vraagt de naam niets op en krijgt hij simpelweg de ruimte die overblijft,
 * waarbij zijn eigen tekst afbreekt als het moet. De afstand blijft zo altijd naast
 * de naam staan, en alleen de openingstijden pakken een eigen regel. */
.lp-vz-naam { flex: 1 1 0; min-width: 0; font-weight: 700; }

/* Looptijd boven, meters eronder: de minuten zijn waarop je beslist, de meters
 * zijn de onderbouwing. Rechts uitgelijnd zodat de kolom zelf uitlijnt. */
.lp-vz-afs {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: #7a8ba0;
	font-size: .74rem;
	line-height: 1.3;
	white-space: nowrap;
}
.lp-vz-afs strong {
	color: var( --color-text, #222 );
	font-size: .78rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Openingstijden. '24/7' past achter de naam; de rest krijgt een eigen regel
   eronder — flex-basis 100% duwt hem naar de volgende regel binnen dezelfde <li>.
   Bewust géén tooltip: op een telefoon bestaat hover niet, en dan is de informatie
   onbereikbaar op precies het apparaat waarop deze kaart gebruikt wordt. */
.lp-vz-uren {
	flex: 1 0 100%;
	/* 24px icoon + .5rem kolomgap = precies 2rem, dus hij begint exact onder de
	   eerste letter van de naam. Stond op 1,4rem uit de tijd dat het icoontje een
	   kaal glyph van 1em was; sinds het een chip van 24px is week hij ~10px af. */
	padding-left: 2rem;
	color: #7a8ba0;
	font-size: .85em;
	line-height: 1.3;
}
/* '24/7' is een bijzin bij de naam, geen kop. Hij stond op dezelfde grootte als de
   naam mét een gevuld vlak, en trok daardoor meer aandacht dan de zaak zelf —
   zeker op het donkere thema, waar een groen blok fel oplicht. Nu kleiner, met een
   dunnere achtergrond: zichtbaar als je ernaar kijkt, maar hij roept niet. */
.lp-vz-altijd {
	padding: 0 .25rem;
	border-radius: 3px;
	background: rgba( 61, 107, 70, .1 );
	color: #3d6b46;
	font-size: .8em;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: baseline;
}
html[data-theme="dark"] .lp-vz-uren   { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-vz-altijd { background: rgba( 90, 160, 105, .14 ); color: #8fc79c; }

html[data-theme="dark"] .lp-vz-rij { border-bottom-color: rgba( 255, 255, 255, .12 ); }
html[data-theme="dark"] .lp-vz-rij > i { background: var( --color-bg-alt ); color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-vz-afs { color: var( --color-text-muted ); }

/* De looptijd achter het label. Bewust kleiner en doffer dan de naam: je leest
   eerst wát er is en pas daarna hoe ver. */
.lp-voorz-min {
	font-style: normal;
	font-size: .92em;
	opacity: .7;
	margin-left: .1rem;
}

/* ── Popup in donkere modus ───────────────────────────────────────────────────
 * De popup bleef bewust wit toen de rest van de pagina omklapte: hij ligt op
 * lichte kaarttegels, en een donker vlak daarin leest als een gat. Maar de
 * inhoud klapte wél om — voorzieningen-chips en het aantal-badge werden donker —
 * en dat gaf een half omgeklapte kaart: donkere pillen in een wit vlak.
 *
 * Nu klapt hij helemaal om. De variabele --lp-popup-vlak stuurt ook de
 * vastgezette navigatiebalk en het verloop erboven, zodat die niet los kunnen
 * lopen van de achtergrond. */
html[data-theme="dark"] .lp-kaart-wrap {
	--lp-popup-vlak: var( --color-bg );
	--lp-popup-rand: var( --color-border );
}

/* De inset-merkstreep moet mee in deze box-shadow, anders overschrijft de
   slagschaduw hem en verdwijnt de streep in het donkere thema. */
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
	background: var( --color-bg );
	color: var( --color-text );
	box-shadow: inset 5px 0 0 0 var( --lp-merk, transparent ), 0 3px 16px rgba( 0, 0, 0, .55 );
}

html[data-theme="dark"] .leaflet-popup-close-button { color: var( --color-text-muted ); }
html[data-theme="dark"] .leaflet-popup-close-button:hover { color: var( --color-text ); }

html[data-theme="dark"] .lp-popup h3,
html[data-theme="dark"] .lp-popup-specs li { color: var( --color-text ); }

html[data-theme="dark"] .lp-popup-kaart { background: var( --color-bg-alt ); border-color: var( --color-border ); }
/* De scheidingslijntjes in dat kaartje zijn zwart-transparant en dus onzichtbaar
   op een donker vlak. */
html[data-theme="dark"] .lp-popup-kaart .lp-popup-specs li { border-top-color: rgba( 255, 255, 255, .12 ); }
html[data-theme="dark"] .lp-popup-kaart .lp-popup-specs li > i { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-popup-sectielabel { color: var( --color-text-muted ); }
/* Navigeer/Opzoeken houden de accentkleur, opgelicht: --color-primary (#1982d1)
   haalt maar 3,8 op dit donkere vlak. Alternatieven blijft ook hier de gedempte
   van de twee. */
html[data-theme="dark"] .lp-popup-subacties a { color: #6cb6ea; }
html[data-theme="dark"] .lp-popup-bron { color: #9aa7b2; }
html[data-theme="dark"] .lp-popup-subacties a.lp-alt-knop { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-popup-subacties a.lp-alt-knop:hover { color: var( --color-text ); }

html[data-theme="dark"] .lp-popup-kanttekening { color: #e2b455; }

/* De titelscheiding en de statusregel hebben een lijn die op wit was gekozen. */
html[data-theme="dark"] .lp-popup .lp-popup-status { border-top-color: var( --color-border ); }

html[data-theme="dark"] .lp-popup-titelrij .lp-fav-knop:hover { background: var( --color-bg-alt ); }

html[data-theme="dark"] .lp-bezet-knop { color: #6cb6ea; }
html[data-theme="dark"] .lp-bezet-knop:hover { color: #9ed0f2; }

/* Gedempte tekst in de popup. #7a8ba0 haalde op dit vlak maar 4,4 en dat is te
   krap voor tekst van .76rem; #9aa7b4 komt op 6,3. */
html[data-theme="dark"] .lp-popup-uitleg,
html[data-theme="dark"] .lp-popup-kanttekening-in,
html[data-theme="dark"] .lp-status-sub,
html[data-theme="dark"] .lp-status-uitleg { color: #9aa7b4; }

/* De navigatielink stond op --color-primary (#1982d1): 3,8 op dit vlak, te
   weinig. De aanbiedersregel is inmiddels geen blauwe kapitalenregel meer maar
   gedempte tekst, en volgt hier dus de gedempte themakleur. */
html[data-theme="dark"] .lp-popup .lp-popup-op { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-popup .lp-popup-route a { color: #6cb6ea; }

/* De looptijd in de voorzieningenlijst is het enige vette getal in die kolom en
   moet dus de normale tekstkleur houden, niet de gedempte van zijn ouder. */
html[data-theme="dark"] .lp-vz-afs strong { color: var( --color-text ); }

/* Alternatieven-in-de-buurt in de (donkere) popup. */
html[data-theme="dark"] .lp-popup .lp-popup-alt a,
html[data-theme="dark"] .lp-alt-terug { color: #6cb6ea; }
html[data-theme="dark"] .lp-alt-sub,
html[data-theme="dark"] .lp-alt-onbekend,
html[data-theme="dark"] .lp-alt-bezig { color: var( --color-text-muted ); }
html[data-theme="dark"] .lp-alt-lijst li:hover { background: rgba( 255, 255, 255, .06 ); }
html[data-theme="dark"] .lp-alt-bezet {
	background: var( --color-bg-alt );
	border-color: var( --color-border );
	color: #6cb6ea;
}

html[data-theme="dark"] .lp-voorz-item {
	background: var( --color-bg-alt );
	color: var( --color-text );
}

	/* ── Voorzieningchips ──────────────────────────────────────────────── */
html[data-theme="dark"] .lp-filter-label { color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-voorz-chip > span {
		background: var( --color-bg );
		border-color: var( --color-border );
		color: var( --color-text );
}
html[data-theme="dark"] .lp-voorz-chip > span i,
html[data-theme="dark"] .lp-voorz-telling { color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-voorz-vink:checked + span,
html[data-theme="dark"] .lp-pl-voorz-vink:checked + span {
		background: #2b8fd8;
		border-color: #2b8fd8;
		color: #06131d;
}
html[data-theme="dark"] .lp-voorz-vink:checked + span i,
html[data-theme="dark"] .lp-voorz-vink:checked + span .lp-voorz-telling,
html[data-theme="dark"] .lp-pl-voorz-vink:checked + span i { color: rgba( 6, 19, 29, .75 );
}

	/* ── Aanbiedermenu ────────────────────────────────────────────────── */
html[data-theme="dark"] .lp-op-knop {
		background: var( --color-bg );
		border-color: var( --color-border );
		color: var( --color-text );
}
html[data-theme="dark"] .lp-op-knop i { color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-op-menu[data-gekozen="ja"] .lp-op-knop-tekst { color: #2b8fd8;
}
html[data-theme="dark"] .lp-op-paneel {
		background: var( --color-bg-alt );
		border-color: var( --color-border );
}
html[data-theme="dark"] .lp-op-zoek {
		background: var( --color-bg );
		border-color: var( --color-border );
		color: var( --color-text );
}
html[data-theme="dark"] .lp-op-zoek::placeholder { color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-op-chip > span {
		background: var( --color-bg );
		border-color: var( --color-border );
		color: var( --color-text );
}
html[data-theme="dark"] .lp-op-telling,
html[data-theme="dark"] .lp-op-meer,
html[data-theme="dark"] .lp-op-leeg { color: var( --color-text-muted );
}
html[data-theme="dark"] .lp-op-meer { border-top-color: var( --color-border ); }
html[data-theme="dark"] .lp-op-vink:checked + span {
		background: #2b8fd8;
		border-color: #2b8fd8;
		color: #06131d;
}
html[data-theme="dark"] .lp-op-vink:checked + span .lp-op-telling { color: rgba( 6, 19, 29, .75 );
}

/* ── Map-app-overlays in donkere modus ────────────────────────────────────────
 * De scoped map-app-regels zetten expliciete lichte achtergronden (pil, kaartje,
 * bottom-sheet, tellingbadge) met id-specificiteit, dus die moeten hier terug
 * naar donker — anders staan er witte vlakken op een donkere kaart. */
html[data-theme="dark"] body.lp-kaartpagina #lp-planner > summary,
html[data-theme="dark"] body.lp-kaartpagina #lp-filterblok > summary {
		background: var( --color-bg-alt );
		color: var( --color-secondary );
}
html[data-theme="dark"] body.lp-kaartpagina #lp-planner[open],
html[data-theme="dark"] body.lp-kaartpagina #lp-filterblok[open],
html[data-theme="dark"] body.lp-kaartpagina #lp-planner[open] > .lp-onderweg-inhoud,
html[data-theme="dark"] body.lp-kaartpagina #lp-filterblok[open] > .lp-filters {
		background: var( --color-bg );
}
html[data-theme="dark"] body.lp-kaartpagina .lp-telling {
		background: rgba( 20, 28, 36, .92 );
		color: var( --color-text );
}
html[data-theme="dark"] body.lp-kaartpagina #lp-planner[open] .lp-paneel-sluit,
html[data-theme="dark"] body.lp-kaartpagina #lp-filterblok[open] .lp-paneel-sluit {
		color: var( --color-secondary );
}

/* Het sluitkruis van de filters is geen pil maar een kaal knopje op het paneel;
   de regel hierboven zou het anders een eigen donkere achtergrond geven. Alleen
   vanaf tablet, want daar bestaat die vorm — mobiel houdt de plakkende kop. */
@media ( min-width: 768px ) {
	html[data-theme="dark"] body.lp-kaartpagina #lp-filterblok[open] > summary {
		background: transparent;
	}
	html[data-theme="dark"] body.lp-kaartpagina #lp-filterblok[open] > summary:hover {
		background: var( --color-bg-alt );
	}
}

/* Live bezetting uit NDW (alleen Nederland, gratis en zonder sleutel).
   Kleur zegt de toestand, het tijdstempel zegt hoe hard die is — Fastned pusht
   elke paar minuten, maar in de stad staan er stations van uren oud tussen, en
   dan is "5 van 6 vrij" zonder tijd een belofte in plaats van een meting. */
/* De statusregel is leeg zodra hij niets meer te melden heeft — de aantallen en de
   bezetting staan in het ladersblok eronder. Een lege <p> die zijn marge behoudt
   zou een gat in het kaartje laten. Het element zelf moet blijven bestaan: het
   draagt data-station en startBezetting() schrijft erin terug. */
.lp-popup-status:empty { display: none; }

/* GEEN TINT OVER HET HELE BLOK, en dat is een correctie. De kopregel en de
   stekkerrijen zitten samen in .lp-laders-blok, en even leek één gekleurd vlak
   daaromheen logisch: ze horen immers bij elkaar. Maar dan kleurt een vak van vijf
   regels mee op een uitspraak die alleen over de gétallen gaat — veel te veel
   nadruk voor "er zijn er nog twaalf vrij". De badges dragen de status, de rest
   blijft neutraal. */
.lp-laders-blok {
	margin: .35rem 0 .2rem;
}

.lp-live {
	margin: .35rem 0 .2rem;
	font-size: .9rem;
	line-height: 1.3;
}
.lp-laders-blok > .lp-live { margin: 0 0 .1rem; }

.lp-live small { color: #5a6b7b; font-weight: 400; }
html[data-theme="dark"] .lp-live small { color: #9aa7b4; }

/* De korte terugkoppeling na een handmatige verversing ('nog geen nieuwe melding',
   'net opgehaald'). Cursief zoals de plaatshouder, want het is een opmerking over
   het ophalen en niet over de bezetting zelf. Verdwijnt na vier seconden. */
.lp-live-noot { font-style: italic; }

/* Verversknop naast de tijdstempel. Klein en grijs — het is een hulpmiddel, geen
   oproep. Wel een ruim tikvlak (min 28px) want hij staat op een telefoon naast
   tekst van .9rem, en dan is het icoontje zelf te klein om te raken. */
.lp-live-ververs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	margin-left: .15rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #7a8ba0;
	font-size: .8rem;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
}
.lp-live-ververs:hover { background: rgba( 0, 0, 0, .06 ); color: #40515f; }
.lp-live-ververs[disabled] { cursor: default; opacity: .7; }
.lp-live-ververs.is-bezig i { animation: lp-draai 1s linear infinite; }

@keyframes lp-draai { to { transform: rotate( 360deg ); } }

/* Wie liever geen beweging ziet, krijgt hem stil — de knop is dan nog steeds
   uitgeschakeld, dus de toestand blijft afleesbaar. */
@media ( prefers-reduced-motion: reduce ) {
	.lp-live-ververs.is-bezig i { animation: none; }
}

html[data-theme="dark"] .lp-live-ververs { color: #9aa7b4; }
html[data-theme="dark"] .lp-live-ververs:hover {
	background: rgba( 255, 255, 255, .08 );
	color: var( --color-text );
}

/* De plaatshouder reserveert de hoogte terwijl het ophalen loopt, zodat het
   invullen een tekstwissel is en geen herindeling van de popup. */
.lp-live-wacht { color: #7a8ba0; font-style: italic; }
html[data-theme="dark"] .lp-live-wacht { color: #9aa7b4; }

/* Overzichtsbellen: het rooster dat uitgezoomd de stations vervangt. Bewust
   dezelfde vorm en kleur als een clusterbel, want dat ís het voor de kijker —
   alleen voorberekend. Een klik zoomt in; er zit geen popup onder, want een cel
   is een telling en geen station. */
.lp-overzicht-bel {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba( 25, 130, 209, .85 );
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	box-shadow: 0 0 0 4px rgba( 25, 130, 209, .3 );
	cursor: zoom-in;
}

/* Suggestieregel met twee niveaus: de naam vet, de context eronder in het klein —
   zoals je het van een navigatie-app kent. Zonder dat onderscheid leest
   "Alpe d'Huez, Route de la Poste, Huez, Frankrijk" als één lange grijze regel en
   moet je zoeken waar de plaatsnaam ophoudt. */
.lp-suggestie strong { display: block; font-weight: 600; }
.lp-suggestie small {
	display: block;
	font-size: .82em;
	color: #5a6b7b;
	margin-top: .05rem;
}
.lp-suggestie:hover small,
.lp-suggestie.is-actief small { color: rgba( 255, 255, 255, .85 ); }

/* ── De snelkeuze onder een veld van de reis ─────────────────────────────────
   'Mijn locatie' en daaronder je laatste bestemmingen (zie toonSnelkeuze() in
   laadpalen.js). Dezelfde lijst en dezelfde regels als de zoeksuggesties — het
   is dezelfde soort keuze op dezelfde plek — met één streep ertussen: je locatie
   is iets anders dan een plek uit je geschiedenis, en zonder scheiding leest de
   eerste regel als de meest recente bestemming. */
.lp-suggestie-hier + .lp-suggestie-thuiswerk,
.lp-suggestie-hier + .lp-suggestie-eerder,
.lp-suggestie-thuiswerk + .lp-suggestie-eerder {
	border-top: 1px solid #e2e8ee;
	margin-top: .25rem;
	padding-top: .5rem;
}

/* Het pijltje krijgt de accentkleur en blijft op zijn plaats staan als de regel
   oplicht — een icoon dat van kleur wisselt trekt de aandacht van de tekst weg. */
.lp-suggestie-hier strong i {
	width: 1em;
	margin-right: .15rem;
	color: var( --color-primary, #1982d1 );
}
.lp-suggestie-hier:hover strong i,
.lp-suggestie-hier.is-actief strong i { color: inherit; }

html[data-theme="dark"] .lp-suggestie-hier + .lp-suggestie-thuiswerk,
html[data-theme="dark"] .lp-suggestie-hier + .lp-suggestie-eerder,
html[data-theme="dark"] .lp-suggestie-thuiswerk + .lp-suggestie-eerder { border-top-color: #3a4550; }

html[data-theme="dark"] .lp-suggesties {
	background: #252525;
	border-color: #3a4550;
}
html[data-theme="dark"] .lp-suggestie small { color: #9aa7b4; }
html[data-theme="dark"] .lp-suggestie-leeg { color: #9aa7b4; }

html[data-theme="dark"] .lp-suggestie-thuiswerk-kies small { color: #9aa7b4; }
html[data-theme="dark"] .lp-suggestie-thuiswerk-bewerk {
	background: #2f3944;
	border-color: #47555f;
	color: #cdd6de;
}
html[data-theme="dark"] .lp-suggestie-thuiswerk-bewerk:hover {
	border-color: #6cb6ea;
	color: #6cb6ea;
}
html[data-theme="dark"] .lp-suggestie-thuiswerk-wis { color: #7a8a99; }
html[data-theme="dark"] .lp-suggestie-thuiswerk-wis:hover { background: rgba( 215, 48, 31, .2 ); color: #ff8a7a; }
html[data-theme="dark"] .lp-knop-tekst { color: #6cb6ea; }

html[data-theme="dark"] .lp-locatiedialoog-kaart {
	background: var( --color-bg, #1b2226 );
	color: var( --color-text, #e6ebf0 );
}
html[data-theme="dark"] .lp-locatiedialoog-sluit {
	background: rgba( 255, 255, 255, .08 );
	color: #cdd6de;
}
html[data-theme="dark"] .lp-locatiedialoog-sluit:hover { background: rgba( 255, 255, 255, .14 ); }
html[data-theme="dark"] .lp-locatiedialoog-veldwrap input {
	background: #252525;
	border-color: #3a4550;
	color: var( --color-text, #e6ebf0 );
}
html[data-theme="dark"] .lp-locatiedialoog .lp-suggesties { border-color: #3a4550; }
html[data-theme="dark"] .lp-locatiedialoog-opslaan { background: rgba( 255, 255, 255, .06 ); color: #cdd6de; }

html[data-theme="dark"] .lp-routekeuze {
	background: linear-gradient( to top, rgba( 15, 20, 26, .97 ) 65%, rgba( 15, 20, 26, .8 ) );
}
html[data-theme="dark"] .lp-routekeuze-kaart {
	background: #1b2226;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .45 );
}
html[data-theme="dark"] .lp-routekeuze-kaart strong { color: var( --color-text, #e6ebf0 ); }
html[data-theme="dark"] .lp-routekeuze-kaart small { color: #9aa7b4; }
html[data-theme="dark"] .lp-routekeuze-kaart.is-actief { border-color: #57aef0; box-shadow: 0 2px 12px rgba( 87, 174, 240, .4 ); }
html[data-theme="dark"] .lp-routekeuze-kaart.is-actief strong { color: #57aef0; }
html[data-theme="dark"] .lp-routekeuze-kies { border-color: #57aef0; color: #57aef0; }
html[data-theme="dark"] .lp-routekeuze-kaart.is-actief .lp-routekeuze-kies { background: #57aef0; color: #10171c; }


/* De SoC-slider draagt zijn kleur al via --soc-kleur (rood-tot-groen, op elk
   thema); alleen de neutrale rail is licht en moet in het donker mee. */
html[data-theme="dark"] .lp-pl-soc-slider,
html[data-theme="dark"] .lp-pl-soc-slider::-webkit-slider-runnable-track { background-color: transparent; }
html[data-theme="dark"] .lp-pl-soc-slider { background-image: linear-gradient( to right,
	var( --soc-kleur, #1a9850 ) var( --soc-pct, 90% ),
	#3a4550 var( --soc-pct, 90% ) ); }
html[data-theme="dark"] .lp-pl-soc-slider::-moz-range-track { background: #3a4550; }
html[data-theme="dark"] .lp-pl-soc-slider::-webkit-slider-thumb,
html[data-theme="dark"] .lp-pl-soc-slider::-moz-range-thumb { border-color: #1b2226; }

/* Het bestemmingsveld zit in een .lp-invoer-wrap zodat de suggestielijst eronder
   kan hangen.
   
   DE FLEX-BASIS MOET HIER UIT. .lp-invoer-wrap draagt 'flex: 1 1 240px' uit het
   oude vertrekblok, waar het in een rij stond en die 240px dus een bréédte was.
   .lp-filter is een kolom, en daar wordt diezelfde 240px een HOOGTE: het veld
   kreeg een leeg vak van ruim tweehonderd pixels onder zich, met de suggestielijst
   helemaal onderaan. Op een telefoon viel dat niet op omdat alles daar toch smal
   en gestapeld is. */
.lp-filter > .lp-invoer-wrap { position: relative; flex: 0 0 auto; }

/* Stopvoorkeuren zijn pas zinvol als de route bekend is: de aantallen achter de
   aanbieders tellen langs jóuw rit. Tot die tijd op slot, met de reden erboven —
   uitgrijzen zonder uitleg leest als een storing. */
.lp-pl-routewacht {
	grid-column: 1 / -1;
	margin: -.2rem 0 .2rem;
	font-size: .86rem;
	line-height: 1.35;
	color: #7a8ba0;
}
.lp-pl-routeafh.is-vergrendeld {
	opacity: .45;
	pointer-events: none;
}
#lp-pl-bereken[disabled] { opacity: .5; cursor: not-allowed; }

html[data-theme="dark"] .lp-pl-routewacht { color: #9aa7b4; }

/* Vlaggen bij begin en eind van het routevoorbeeld. Wit vlak met een schaduw,
   zodat ze op elke tegelkleur leesbaar blijven — net als de stationstippen. */
.lp-vlag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50% 50% 50% 0;
	transform: rotate( -45deg );
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .4 );
	font-size: .8rem;
}
.lp-vlag i,
.lp-vlag span { transform: rotate( 45deg ); }
.lp-vlag-start  { color: var( --color-primary, #1982d1 ); }
.lp-vlag-finish { color: #1a1a1a; }
.lp-vlag-tussen { color: #6b7c8c; }

/* De letter in de speld. Zwaarder dan het icoon dat hier stond: een 'B' van 13
   pixels tussen de wegen moet je kunnen lezen zonder in te zoomen. */
.lp-vlag-letter {
	font-family: var( --font-heading, sans-serif );
	font-weight: 800;
	font-size: .82rem;
}

/* ── De accustand naast de speld ─────────────────────────────────────────────
 *
 * Waarmee je vertrekt bij A en waarmee je aankomt bij de bestemming. Dat stond
 * alleen in het paneel, en dat is nu juist het paneel dat je dichtdoet om je rit
 * te zien — dus was de vraag 'kom ik daar met genoeg over aan' alleen te
 * beantwoorden door het scherm dat je route afdekt weer te openen.
 *
 * EEN PERCENTAGE HOORT BIJ EEN PLEK, NIET BIJ EEN LIJN. Vandaar naast de speld en
 * niet in het bordje midden op de route: dat bordje gaat over de hele rit, dit
 * over dit ene punt erop.
 *
 * De vlagvak-doos bestaat alleen om de druppel en het pilletje naast elkaar te
 * zetten; `width: max-content` omdat Leaflet zonder iconSize geen breedte
 * meegeeft, en zonder dat rekt een divIcon tot de kaartbreedte en vangt hij kliks
 * op de halve kaart af.
 *
 * Geel is stroom, zelfde regel als in het paneel — maar een tint donkerder dan
 * --pl-stroom: #a86a05 haalt op wit 4,4:1 en dat is voor 11px te weinig met een
 * kaart eronder. #8f5c04 haalt 5,7:1. */
.lp-vlagvak {
	display: flex;
	align-items: center;
	gap: 3px;
	width: max-content;
}

.lp-vlagvak .lp-vlag { flex: none; width: 26px; height: 26px; }

.lp-vlag-soc {
	flex: none;
	padding: .05rem .3rem;
	border: 1px solid #8f5c04;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .95 );
	font-family: var( --font-heading, sans-serif );
	font-size: .68rem;
	font-weight: 800;
	line-height: 1.3;
	color: #8f5c04;
	font-variant-numeric: tabular-nums;
	/* Het is een bijschrift bij de speld, geen tweede tikvlak ernaast: de speld
	   houdt zijn eigen tooltip, en die noemt het percentage ook. */
	pointer-events: none;
}

html[data-theme="dark"] .lp-vlag-soc {
	border-color: #fbbf24;
	background: rgba( 27, 39, 51, .95 );
	color: #fbbf24;
}

/* Onder nul: dit is geen accustand meer maar een tekort — 'zoveel kom je te kort
   als je doorrijdt'. Bij de routekeuze staat dat getal er (zie letterSpeld); in
   het geel van 'stroom' zou −40% als een gewone stand lezen.

   Dezelfde rode tint als het kaartje eronder gebruikt voor 'niet in 1 keer'
   (SOC_ROOD, #d7301f) — één betekenis, één kleur. Contrast op het witte pilletje
   is 5,0:1; in het donker een lichtere tint, want #d7301f haalt op #1b2733 maar
   3,4 en dit is tekst van 11px. */
.lp-vlag-soc.is-tekort {
	border-color: #d7301f;
	color: #d7301f;
}

html[data-theme="dark"] .lp-vlag-soc.is-tekort {
	border-color: #f47c6c;
	color: #f47c6c;
}

/* ── De reisspeld spreekt dezelfde taal als het paneel ───────────────────────
 *
 * WAT HIER MIS WAS. De speld was wit met een gekleurde letter, en bij het
 * vertrekpunt was die letter `--color-primary` — blauw op wit, bovenop de blauwe
 * locatiestip en met een blauwe clusterbel erachter. Op een schermafdruk uit
 * Arnhem was de 'A' domweg niet te vinden. De 'B' was zwart en las prima; twee
 * eindpunten van dezelfde rit hoorden niet in leesbaarheid te verschillen.
 *
 * DAARBIJ STONDEN ER TWEE TALEN NAAST ELKAAR. In het invoerpaneel zijn A en B
 * gevulde schijfjes met een witte letter; op de kaart witte druppels met een
 * gekleurde letter. Dezelfde punten, twee vormentalen — terwijl het hele nut van
 * die letters is dat je ze van het paneel naar de kaart volgt.
 *
 * Nu overal gevuld met een witte letter, in de tokens die het paneel al gebruikt:
 * --pl-weg voor vertrek en tussenstops, --pl-inkt voor de bestemming (dat
 * onderscheid blijft nuttig op de kaart, waar geen volgorde van boven naar
 * beneden bestaat). Geen nieuwe tinten dus — de ΔE-afstanden uit SKILL.md blijven
 * heel. Wit op #1267ab haalt 5,9:1, op #5a6b7b 5,5:1 en op #1b2733 ruim meer; de
 * oude 'A' zat op 4,1 en dat was voor 13px vet te weinig.
 *
 * De witte ring is een box-shadow en geen border: die volgt de druppelvorm en
 * verandert de 26px van het icoon niet, dus de punt blijft op de coördinaat staan
 * waar hij hoort. */
.lp-vlag-letter {
	color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba( 0, 0, 0, .45 );
}

.lp-vlag-letter.lp-vlag-start  { background: var( --color-primary-dark, #1267ab ); }
.lp-vlag-letter.lp-vlag-tussen { background: #5a6b7b; }
.lp-vlag-letter.lp-vlag-finish { background: #1b2733; }

/* De donkere modus lichtte de witte druppel op; een gevulde speld heeft dat niet
   nodig en zou er zijn vulling door verliezen. */
html[data-theme="dark"] .lp-vlag:not( .lp-vlag-letter ) { background: #f2f2f2; }

/* Bronnenlijst in het uitlegblok. Eén regel per land, met het land vetgedrukt —
   dat leest sneller dan de lopende alinea die er stond toen er nog twee bronnen
   waren. Bewust een gewone <ul> met bescheiden inspringing: dit blok staat ónder
   de kaart en hoort geen aandacht te trekken. */
.lp-bronnen {
	margin: .6rem 0 1rem;
	padding-left: 1.15rem;
	list-style: disc;
}
.lp-bronnen li {
	margin-bottom: .35rem;
	line-height: 1.5;
}
.lp-bronnen a { text-decoration: underline; }

/* Donkere modus: de lijst erft zijn tekstkleur van het uitlegblok, maar de links
   niet — die staan op --color-primary (#1982d1) en halen op #252525 maar 3,8
   contrast. Zelfde correctie als in de popup, om dezelfde reden. */
html[data-theme="dark"] .lp-bronnen a { color: #6cb6ea; }

/* "Hele rit in Google Maps" onder de stoplijst. De kanttekening over de drie
   tussenstops op mobiel staat eronder in plaats van ernaast: naast de knop wordt
   hij op een telefoon een smalle kolom van losse woorden. */
.lp-pl-maps {
	margin: .8rem 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
}
.lp-pl-maps .lp-kanttekening,
.lp-pl-maps .lp-pl-kanttekening { margin: 0; }

/* Licentie- en hergebruikregel onder de bronnenlijst. Gedempt en klein: het is een
   voorwaarde, geen verkooppraatje — maar hij moet er staan, want de databestanden
   zijn met één download te kopiëren en dan is dit het enige wat zegt wat er mag. */
.lp-licentie {
	margin: .8rem 0 1rem;
	padding: .6rem .8rem;
	border-left: 3px solid #cbd5de;
	background: #f6f8fa;
	font-size: .88rem;
	line-height: 1.5;
}
html[data-theme="dark"] .lp-licentie {
	background: rgba( 255, 255, 255, .04 );
	border-left-color: #3a4149;
}

/* ── Donkere modus: files en wegwerk (NDW) ────────────────────────────────────
   Plat uitgeschreven, geen CSS-nesting: nesting werkt niet in oudere Safari en
   dan valt het hele blok weg. Zelfde regel als de rest van dit bestand. */
html[data-theme="dark"] .lp-verkeer-melding { color: var( --color-text-muted ); }

html[data-theme="dark"] body.lp-kaartpagina .lp-verkeer-melding {
	background: rgba( 37, 37, 37, .94 );
	color: var( --color-text );
}

/* Het oranje van de aan-stand wordt op donker te fel; getemperd tot een
   doorzichtige tint met een lichtere letter, zelfde aanpak als de andere
   pastelbadges in dit blok. */
html[data-theme="dark"] .lp-verkeerknop a.is-aan {
	color: #fbbf24;
	background: rgba( 251, 191, 36, .16 );
}

/* Zelfde temperingsslag voor de stijlknop. */
html[data-theme="dark"] .lp-stijlknop a.is-aan {
	color: #93c5fd;
	background: rgba( 147, 197, 253, .16 );
}

/* En voor de twee afwijkende standen van 'Toon snelladers'; de standaardstand
   (langs je route) blijft neutraal en heeft hier dus niets nodig. */
html[data-theme="dark"] .lp-ladersknop a.lp-laders-alles {
	color: #93c5fd;
	background: rgba( 147, 197, 253, .16 );
}

html[data-theme="dark"] .lp-ladersknop a.lp-laders-geen {
	color: #fbbf24;
	background: rgba( 251, 191, 36, .16 );
}

/* De popup van een file of wegwerk erft .lp-popup, dus achtergrond en tekst
   klappen al mee. Alleen de uitlegregel heeft hier een eigen kleur nodig. */
html[data-theme="dark"] .lp-verkeer-popup .lp-popup-uitleg,
html[data-theme="dark"] .lp-file-reden.is-leeg,
html[data-theme="dark"] .lp-file-reden.is-leeg i { color: var( --color-text-muted ); }

/* ── Verbodsbord aan het begin van een afsluiting ─────────────────────────────
   Het Nederlandse C1-bord ('verboden in te rijden'): rode schijf met een witte
   balk. Nagemaakt in CSS en niet als icoonfont — Font Awesome's fa-ban is een
   diagonale streep door een cirkel en dat is een ánder bord (fa-circle-minus komt
   dichterbij maar heeft de verkeerde verhoudingen).

   Staat op het púnt waar je op de versperring stuit, per rijrichting; zie
   tekenVerkeer() voor waarom g[0] dat punt is en hoe dat is geverifieerd.

   18 EN NIET 22 PIXELS: op verzoek een maat kleiner. Bij een reeks afsluitingen
   dicht bij elkaar dekten de bordjes op lage zoom de weg af die ze aanwijzen. De
   maat in `iconSize` in tekenVerkeer() moet hiermee meebewegen — staat die groter,
   dan zit het bord niet meer op het punt waar hij hoort. */
.lp-dicht-bord {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #c1121f;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .45 );
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.lp-dicht-balk {
	display: block;
	width: 10px;
	height: 3px;
	border-radius: 1px;
	background: #fff;
}

/* Op donker blijft het bord zijn eigen kleuren houden — een verkeersbord dat
   meekleurt met het thema is geen verkeersbord meer. Alleen de witte rand wordt
   iets gedempt zodat hij niet gloeit op de donkere tegels. */
html[data-theme="dark"] .lp-dicht-bord { border-color: rgba( 255, 255, 255, .82 ); }