:root {
		color-scheme: light dark;
		--bg: #f5f4f0; --card: #ffffff; --line: #e6e4de; --text: #1c2321; --muted: #6d7572;
		--accent: #0f9d8f; --accent-deep: #0b7d72; --tint: #e9f5f2;
		--warn: #d97706; --warn-tint: #fbf1e0; --bad: #d93025; --bad-tint: #fdeceb;
		--free: #b9c0bd; --vlak: #eceae5;
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--bg: #14171a; --card: #1d2126; --line: #2c3238; --text: #e7eaee; --muted: #9aa4ae;
			--accent: #38b7a7; --accent-deep: #2d9689; --tint: rgba(56, 183, 167, .13);
			--warn: #e0a23c; --warn-tint: rgba(224, 162, 60, .14);
			--bad: #ef6a5a; --bad-tint: rgba(239, 106, 90, .14);
			--free: #4d565e; --vlak: #262b31;
		}
	}
	* { box-sizing: border-box; }
	/* Lucide-icoon midden in een regel tekst (link-pijl, chip-kruisje, waarschuwing). */
	.icoon-tekst { width: 1em; height: 1em; vertical-align: -.15em; flex: none; }
	body {
		margin: 0; padding: 24px; background: var(--bg); color: var(--text);
		font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	}
	a { color: var(--accent-deep); }

	/* --- Kop ------------------------------------------------------------------ */
	header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
	.kop-tekst { display: flex; flex-direction: column; }
	h1 { font-size: 20px; margin: 0; line-height: 1.25; }
	.sub { color: var(--muted); font-size: 13px; }
	.kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
	.live-chip {
		display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted);
		background: var(--card); border: 1px solid var(--line); border-radius: 8px; height: 30px; padding: 0 12px;
	}
	.live-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
	.live-chip.storing { color: var(--warn); }
	/* Zie Knop.vue: bijsnijding op een eigen tekstblok zet de tekst echt in het midden. */
	.chip-tekst { display: block; text-box: trim-both cap alphabetic; }
	/* In een paneelkop zo hoog als een kleine knop ernaast. */
	.paneel-kop .live-chip { height: 28px; font-size: 12.5px; }
	.live-chip.storing::before { background: var(--warn); }

	/* --- Hoofdnavigatie (gedeeld door alle pagina's, #4016) --------------------- */
	nav.hoofdnav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
	.token-alarm {
		background: var(--bad-tint); color: var(--text); border: 1px solid var(--bad);
		border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: 14px;
	}
	.token-alarm strong { color: var(--bad); }
	.token-alarm-kop { font-weight: 700; color: var(--bad); font-size: 15px; }
	.token-alarm ul { margin: 6px 0 0; padding-left: 20px; }
	.token-alarm li + li { margin-top: 4px; }
	/* Weinig of net een herstelcode gebruikt (App.vue): een waarschuwing, geen storing. */
	.codes-melding {
		display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 10px 8px 14px;
		background: var(--warn-tint); border: 1px solid var(--warn); border-radius: 10px; font-size: 14px;
	}
	.codes-melding > svg { width: 18px; height: 18px; flex: none; color: var(--warn); }
	.codes-melding > span { flex: 1; }
	nav.hoofdnav a {
		padding: 8px 14px; border-radius: 10px; font-size: 14px; text-decoration: none;
		color: var(--muted); border: 1px solid transparent;
	}
	nav.hoofdnav a:hover { background: var(--card); color: var(--text); }
	nav.hoofdnav a.actief {
		background: var(--card); color: var(--text); border-color: var(--line); font-weight: 600;
	}

	/* --- KPI-strip -------------------------------------------------------------- */
	.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
	.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
	.kpi-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
	.kpi-waarde { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
	.kpi-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px; }
	.kpi-waarde.warn { color: var(--warn); }
	.kpi-waarde.bad { color: var(--bad); }

	/* Een tegel die een filter opent. Blijft eruitzien als een tegel — het is de hele
	   vlak dat klikbaar is, niet een linkje erin — dus de link-kleur en de onderstreping
	   gaan eraf en de actieve staat krijgt de accentrand. */
	a.kpi-knop { display: block; text-decoration: none; color: inherit; }
	a.kpi-knop:hover { border-color: var(--accent); }
	a.kpi-knop.actief {
		border-color: var(--accent-deep); background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent-deep);
	}
	/* Gedegradeerde tegel: geen link, want er is geen selectie om te openen. */
	.kpi-degradeert { opacity: .7; }
	.kpi-degradeert .kpi-sub { display: block; margin: 4px 0 0; font-size: 11.5px; }

	/* --- Verbruiksmatrix + globale besturing ---------------------------------------- */
	.paneel {
		background: var(--card); border: 1px solid var(--line); border-radius: 14px;
		padding: 16px; margin-bottom: 16px;
	}
	.paneel-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
	.paneel-kop h2 { font-size: 15px; margin: 0; }
	.paneel-kop .uitleg { font-size: 12px; color: var(--muted); }
	.paneel-kop form { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

	/* Dag/avond-raster: per tijdvak een poll-interval en een aantal workers tegelijk. */
	.tijdvakken {
		display: grid; grid-template-columns: auto auto auto; gap: 4px 10px; align-items: center;
	}
	.tijdvakken .tijdvak-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
	.tijdvakken .tijdvak-naam { font-size: 12px; color: var(--muted); white-space: nowrap; }
	.tijdvakken .tijdvak-naam.nu { color: var(--accent-deep); font-weight: 600; }
	.tijdvakken .tijdvak-naam.nu::after { content: " · nu"; }
	.tijdvakken input[type=number] { width: 62px; }

	table.matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
	table.matrix th { text-align: left; color: var(--muted); font-weight: 500; padding: 3px 8px; white-space: nowrap; }
	table.matrix td { padding: 3px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
	table.matrix tr.uit td { opacity: .55; }
	table.matrix tr.beurt td { background: var(--tint); }
	.matrix-wie { display: flex; align-items: center; gap: 9px; }
	.matrix-wie .avatar { width: 26px; height: 26px; font-size: 12px; }
	.matrix-naam { display: block; font-weight: 600; }
	.matrix-sub { display: block; font-size: 11px; color: var(--muted); }
	td.matrix-sub { display: table-cell; }
	.cel-balk { min-width: 128px; }
	.cel-balk .balk { height: 6px; margin-top: 4px; }
	.cel-vrij { font-variant-numeric: tabular-nums; }
	.beurt-tekst { font-size: 12px; }
	.beurt-tekst.actief { color: var(--accent-deep); font-weight: 600; }
	.beurt-tekst.beurt { color: var(--accent-deep); }
	.beurt-tekst.uit { color: var(--muted); }
	/* Vergelijkingstabel: de kwaliteitskant (niet af, mislukt) kleurt rood zodra hij > 0 is. */
	.oordeel.bad { color: var(--bad); font-weight: 600; }

	/* --- Filter-tabs -------------------------------------------------------------- */
	.tab-regel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
	.tab-meta { margin-left: auto; font-size: 13px; color: var(--muted); }

	/* --- Kaarten -------------------------------------------------------------- */
	.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
	.card {
		background: var(--card); border: 1px solid var(--line); border-radius: 14px;
		border-top: 4px solid var(--free); padding: 16px; display: flex; flex-direction: column; gap: 12px;
	}
	.card[data-category="active"] { border-top-color: var(--accent); }
	.card[data-category="paused"] { border-top-color: var(--warn); }
	.card[data-category="attention"] { border-top-color: var(--bad); }

	.card-kop { display: flex; align-items: center; gap: 10px; }
	.avatar {
		width: 36px; height: 36px; border-radius: 50%; background: var(--accent-deep); color: #fff;
		display: grid; place-items: center; font-weight: 600; font-size: 15px; flex: none;
	}
	.wie { display: flex; flex-direction: column; min-width: 0; }
	.naam { font-weight: 650; font-size: 16px; }
	.ondertitel { font-size: 12px; color: var(--muted); }
	.chip {
		margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
		font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--vlak); color: var(--muted);
	}
	.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
	.chip-active { background: var(--tint); color: var(--accent-deep); }
	.chip-paused { background: var(--warn-tint); color: var(--warn); }
	.chip-attention { background: var(--bad-tint); color: var(--bad); }

	.sectielabel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
	.werkbox { background: var(--tint); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
	.werkbox.stil { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
	.werk-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
	.limiet { font-size: 13px; color: var(--warn); }

	.feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
	.feit-label { display: block; font-size: 12px; color: var(--muted); }
	.feit-waarde { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

	.account-blok { display: flex; flex-direction: column; gap: 6px; }
	/* Ontbrekende accountdata expliciet benoemen i.p.v. het blok stil weg te laten:
	   dat ontbrekende blok was eerder de enige aanwijzing voor een verlopen login,
	   en alleen zichtbaar voor wie meerdere kaarten naast elkaar vergeleek (#3428). */
	.account-onbekend { font-size: 13px; color: var(--warn); background: var(--warn-tint); border-radius: 8px; padding: 8px 10px; }
	/* Geen benutting mét gezonde verbindingen is een feit, geen alarm — neutraal, niet oranje (#6130). */
	.account-neutraal { font-size: 13px; color: var(--muted); }
	.token-kop { display: flex; justify-content: space-between; font-size: 13px; }
	.token-kop .pct { font-weight: 600; color: var(--accent-deep); }
	.token-kop .pct.warn { color: var(--warn); }
	.token-kop .pct.bad { color: var(--bad); }
	.balk { position: relative; height: 8px; border-radius: 999px; background: var(--vlak); overflow: hidden; }
	.balk-vul { height: 100%; border-radius: 999px; background: var(--accent); }
	.balk-vul.warn { background: var(--warn); }
	.balk-vul.bad { background: var(--bad); }
	/* Het deel van de benutting dat aan de worker is toe te schrijven: donker segment
	   bovenop de lichtere totaalvulling, altijd vanaf links zodat de twee te vergelijken
	   zijn. Zie db.account_worker_share voor de schatting erachter. */
	.balk-worker { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--accent-deep); }
	.token-sub { font-size: 12px; color: var(--muted); }

	details { border-top: 1px solid var(--line); padding-top: 10px; }
	summary { cursor: pointer; color: var(--muted); font-size: 13px; }
	table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
	/* Elke rij even hoog (36px: een kleine knop van 28px plus ruimte), met of zonder knop of codelabel erin;
	   height op een cel werkt als minimum, dus een rij met twee regels tekst groeit gewoon mee. */
	th, td { text-align: left; height: 36px; padding: 3px 8px; vertical-align: middle; border-bottom: 1px dotted var(--line); }
	th { color: var(--muted); font-weight: 500; }
	td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
	.badge {
		font-size: 12px; padding: 2px 8px; border-radius: 999px;
		border: 1px solid var(--line); color: var(--muted);
	}
	.badge.sessie { color: var(--accent-deep); border-color: var(--accent-deep); }

	/* --- Verbindingen-blok (#6130) --------------------------------------------- */
	/* display:flex op de summary slikt de standaard ::marker — driehoekje staat zelf in de
	   markup en draait bij open. Zonder list-style:none blijft er anders een dubbel pijltje. */
	details.verbindingen > summary { display: flex; align-items: baseline; gap: 7px; list-style: none; flex-wrap: wrap; }
	details.verbindingen > summary::-webkit-details-marker { display: none; }
	.fold-driehoek { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform .15s ease; }
	details.verbindingen[open] > summary .fold-driehoek { transform: rotate(90deg); }
	.verb-oordeel { color: var(--text); font-weight: 600; }
	.verb-oordeel.niveau-bad { color: var(--bad); }
	.verb-oordeel.niveau-warn { color: var(--warn); }
	.verb-meta { font-size: 12px; color: var(--muted); font-weight: 400; }
	.verb-lijst { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
	.verb-dienst { display: flex; align-items: flex-start; gap: 8px; }
	.verb-stip { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--accent); }
	.verb-stip.niveau-info { background: var(--accent-deep); }
	.verb-stip.niveau-warn { background: var(--warn); }
	.verb-stip.niveau-bad { background: var(--bad); }
	.verb-kop { font-size: 14px; }
	.verb-advies { font-size: 12px; color: var(--muted); margin-top: 2px; }
	.verb-controle { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
	pre.logvenster {
		margin: 8px 0 0; padding: 10px; max-height: 340px; overflow: auto;
		background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
		font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
		white-space: pre-wrap; overflow-wrap: anywhere;
	}

	.besturing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
	label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
	/* Eén maat voor elk invoerveld en elke keuzelijst: 30px, gelijk aan de knoppen (Knop.vue). */
	input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=hidden]),
	select {
		height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line);
		background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 400; min-width: 0;
	}
	input[type=number] { width: 72px; }
	input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=hidden]):focus,
	select:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--tint); }
	input:disabled, select:disabled { background: var(--bg); color: var(--muted); }
	.verwijder-knop { margin-left: auto; }
	.opgeslagen { font-size: 12px; color: var(--accent-deep); }
	.leeg { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 32px; text-align: center; color: var(--muted); }

	/* --- Werkwijze ------------------------------------------------------------- */
	/* Brede inhoud (tabellen) scrollt in zijn eigen bak, zodat de pagina zelf nooit
	   zijwaarts gaat schuiven op een telefoon. */
	.tabel-scroll { overflow-x: auto; position: relative; } /* relative: een .sr-only-kop blijft binnen de scroll, anders schuift de pagina op een telefoon */
	/* Eigen klasse náást .tabel-scroll: die wordt ook door de labeltabellen en andere
	   pagina's gebruikt en moet ongemoeid blijven. Hier begrenzen we de hoogte tot tien
	   rijen (11 x 36px kopregel+rijen, plus de 6px margin-top van de tabel) zodat de
	   tegelstrook en de lijst-kop in beeld blijven; de kop scrollt mee als sticky rij,
	   anders scrol je je oriëntatie weg. Bij border-collapse verdwijnt de rand van een
	   sticky cel, dus die zetten we als inset-schaduw. */
	.lijst-scroll { max-height: 402px; overflow-y: auto; }
	.lijst-scroll thead th {
		position: sticky; top: 0; z-index: 1; background: var(--card);
		box-shadow: inset 0 -1px 0 var(--line);
	}
	code {
		font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
		background: var(--vlak); border-radius: 6px; padding: 2px 6px;
	}

	/* De afspraak: drie vaste momenten, dan twee uitwijkroutes. De uitwijkroutes zijn
	   visueel secundair (gestippeld, geen vlak) — ze zijn de uitzondering, en dat hoort
	   je te zien vóór je de tekst leest. */
	.afspraak { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.stap {
		background: var(--tint); border: 1px solid transparent; border-radius: 12px;
		padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
	}
	.stap.uitwijk { background: transparent; border: 1px dashed var(--line); }
	.stap-moment {
		font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
		color: var(--accent-deep); font-weight: 600;
	}
	.stap.uitwijk .stap-moment { color: var(--muted); }
	.stap-kop { font-size: 15px; margin: 0; line-height: 1.3; text-wrap: balance; }
	/* Het commando staat voluit en mag dus afbreken i.p.v. de tegel op te rekken — een
	   tegel die breder wordt dan zijn kolom breekt het hele raster. */
	.stap-cmd {
		display: block; font-size: 11.5px; line-height: 1.45; padding: 5px 8px;
		background: var(--card); color: var(--text); overflow-wrap: anywhere;
	}
	.stap.uitwijk .stap-cmd { background: var(--vlak); }
	/* De fold zit onderaan de tegel (margin-top: auto), zodat de samenvattingen op één
	   lijn staan hoe hoog de kop ook uitvalt. Geen bovenrand: binnen een tegel is de
	   streep van de basisstijl te veel lijnwerk. */
	.stap-fold { margin-top: auto; border-top: 0; padding-top: 4px; }
	.stap-fold summary { font-size: 12px; }
	.stap-tekst { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
	/* Waarom de afspraak zo is, staat bóven de tegels: het kadert ze in plaats van ze na
	   te praten. Volledige panelbreedte — geen leesbreedte-limiet. */
	.afspraak-intro { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

	/* Procesdiagram achter de fold. Dezelfde afspraak als de tegels erboven, maar dan als
	   ketting — dat is wat losse tegels niet kunnen laten zien: dat de drie momenten één
	   trein zijn, waar de uitwijkroutes aftakken, en dat de weekendbevindingen terugstromen
	   in de werkvoorraad. Achter een fold omdat de tekst het antwoord al geeft; de plaat is
	   voor wie het mechanisme wil zien. De SVG scrollt in .tabel-scroll mee i.p.v. de pagina
	   te rekken. */
	.proces { display: block; width: 760px; min-width: 620px; max-width: 100%; height: auto; }
	.proces .band { fill: var(--vlak); }
	.proces .band-naam { fill: var(--muted); font-size: 10.5px; letter-spacing: .09em; font-weight: 600; }
	.proces text {
		font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; fill: var(--text);
	}
	.proces .klein { font-size: 11px; fill: var(--muted); }
	.proces .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; }
	/* Zelfde codering als de tegels: vast moment = gevuld met accentrand, uitwijkroute =
	   gestippeld en leeg, main = het enige dichte vlak (daar gaat het naartoe). */
	.proces .knoop { fill: var(--card); stroke: var(--line); stroke-width: 1; }
	.proces .knoop.vast { fill: var(--tint); stroke: var(--accent); }
	.proces .knoop.doel { fill: var(--accent-deep); stroke: var(--accent-deep); }
	.proces .knoop.uitwijk { fill: none; stroke: var(--muted); stroke-dasharray: 5 4; }
	.proces .op-doel { fill: #fff; font-weight: 600; }
	.proces .lijn { fill: none; stroke: var(--accent); stroke-width: 1.6; }
	.proces .lijn.stip { stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 1.3; }
	.proces .punt-accent { fill: var(--accent); }
	.proces .punt-muted { fill: var(--muted); }

	/* Leeftijd van niet-afgerond werk: het cijfer draagt de ernst, niet een los icoon. */
	.toon {
		display: inline-block; min-width: 2.4em; text-align: right;
		font-variant-numeric: tabular-nums; font-weight: 600;
	}
	.toon-vers { color: var(--muted); }
	.toon-let-op { color: var(--warn); }
	.toon-oud { color: var(--bad); }
	.toon-onbekend { color: var(--muted); }

	/* --- Codegezondheid (/code) -------------------------------------------------- */
	/* De delta naast een kerncijfer: groen als de richting goed is (duplicatie omlaag,
	   adoptie omhoog), rood andersom, grijs voor context-cijfers en "gelijk". */
	.kpi-delta { font-size: 12.5px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
	.kpi-delta.goed { color: var(--accent-deep); }
	.kpi-delta.slecht { color: var(--bad); }
	.kpi-delta.neutraal { color: var(--muted); }
	.kpi-uitleg { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
	/* Trendlijn onder een /code-kaart. Context-cijfers (neutraal) grijs, richting kleurt op oordeel. */
	.kpis-trend .kpi { display: flex; flex-direction: column; }
	.kpi-trend { margin-top: auto; padding-top: 10px; color: var(--muted); }
	.kpi-trend.goed { color: var(--accent-deep); }
	.kpi-trend.slecht { color: var(--bad); }
	.kpi-trend svg { display: block; width: 100%; height: 32px; overflow: visible; }
	.kpi-trend polyline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
	.kpi-trend polyline.stip { stroke-width: 5; }
	.kpi-trend-bijschrift { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

	.cmd-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
	.cmd-groep { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
	.cmd-lijst { margin: 0; display: grid; gap: 8px; }
	.cmd-lijst dt { min-width: 0; overflow-x: auto; }
	.cmd-lijst dd { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

	/* --- Werkvoorraad (/werkvoorraad) -------------------------------------------- */
	/* Voortgangsbalk met drie segmenten: af (accent), loopt (lichter), open (leeg). Eén
	   balk i.p.v. drie losse cijfers, omdat de verhouding de boodschap is — het getal
	   ernaast houdt het navolgbaar (teller/noemer staan altijd in beeld). */
	.vg { display: flex; align-items: center; gap: 8px; min-width: 150px; }
	.vg-balk { flex: 1; display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--vlak); }
	.vg-af { background: var(--accent-deep); }
	.vg-loopt { background: var(--accent); opacity: .45; }
	.vg-pct { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; min-width: 3.2em; text-align: right; }
	.vg-onbekend { color: var(--muted); font-size: 12.5px; }

	/* De rang die de sortering al bepaalt, als cijfer erbij: zonder nummer moet je de
	   volgorde tellen om te weten wat er bovenaan staat. */
	.prio { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
	.prio-rang { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
	.prio-band { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
	.prio-band.must { color: var(--accent-deep); font-weight: 600; }
	.prio-band.nice { color: var(--muted); }
	.prio-band.geen { color: var(--line); }

	/* Roadmap: één blok per versie, de features erin als compacte chips. Grid i.p.v. een
	   tabel — een versie is geen rij met vaste kolommen maar een verzameling. */
	/* Multi-column i.p.v. grid: de versies verschillen sterk in lengte (17 features tegen
	   3), en een grid zou elke rij op de hoogste rekken. Kolommen laten de blokken
	   aansluiten zoals ze zijn. */
	.rm-blok {
		border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0;
		break-inside: avoid; margin-bottom: 14px;
	}
	.rm-blok.nu { border-color: var(--accent); background: var(--tint); }
	.rm-kop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
	.rm-kop h3 { margin: 0; font-size: 15px; }
	.rm-features { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
	.rm-features li { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
	/* Drie statussen, drie duidelijk verschillende vormen — niet drie tinten van hetzelfde:
	   af is dicht, in uitvoering is half (ring met vulling), gepland is leeg. Zo blijft
	   het onderscheid staan in donkere modus en voor wie kleur slecht onderscheidt. */
	.rm-stip {
		display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%;
		margin-top: 5px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line);
	}
	.rm-stip.done { background: var(--accent-deep); box-shadow: none; }
	.rm-stip.in_progress { background: var(--tint); box-shadow: inset 0 0 0 3px var(--accent); }
	.rm-epic { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

	/* Klantstatus: de dekking als balk per klant, details achter dezelfde fold-vorm als
	   de featuretabel eronder. */
	.kl-naam { display: flex; flex-direction: column; gap: 2px; }
	.kl-doel { font-size: 12px; color: var(--muted); }
	.kl-oordeel { font-size: 12px; color: var(--muted); }
	/* Per klant één fold over de volle breedte; kop en samenvatting delen één grid zodat
	   de kolommen onder elkaar blijven staan. Op een smal scherm stapelen ze. */
	.kl-lijst { display: grid; }
	.kl-kop, .kl-samenvatting {
		display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(200px, 1.4fr) minmax(120px, .8fr) minmax(180px, 1.2fr);
		gap: 14px; align-items: start;
	}
	.kl-kop { font-size: 12px; color: var(--muted); padding: 0 0 6px 18px; border-bottom: 1px solid var(--line); }
	.kl-rij { border-bottom: 1px solid var(--line); }
	.kl-samenvatting { cursor: pointer; padding: 10px 0; list-style: none; position: relative; padding-left: 18px; }
	.kl-samenvatting::-webkit-details-marker { display: none; }
	.kl-samenvatting::before { content: "▸"; position: absolute; left: 2px; top: 10px; color: var(--muted); }
	.kl-rij[open] > .kl-samenvatting::before { content: "▾"; }
	.kl-cel { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
	.kl-inhoud { padding: 0 0 14px 18px; display: grid; gap: 8px; }
	.kl-versie { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
	.kl-versie > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
	.kl-versie > summary .vg { flex: 1 1 160px; max-width: 280px; }
	.kl-versie.na-doel { border-color: var(--warn); background: var(--warn-tint); }
	.kl-versie .rm-features { columns: 340px; column-gap: 24px; display: block; }
	.kl-versie .rm-features li { break-inside: avoid; margin-bottom: 4px; }
	.kl-grens { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); border-top: 1px dashed var(--warn); padding-top: 6px; margin-top: 4px; }
	.kl-stories > summary { cursor: pointer; margin-top: 4px; }

	/* Epics per versie: per versie een fold, per epic een fold met features en hun werk. */
	.ev-versie { border-top: 1px solid var(--line); padding: 10px 0; }
	.ev-versie > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
	.ev-versie.nu > summary strong { color: var(--accent-deep); }
	.ev-versie.parkeer > summary strong { color: var(--warn); }
	.ev-epics { display: grid; gap: 8px; margin-top: 10px; }
	.ev-epic { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
	.ev-epic.actief { border-color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent); }
	.ev-epic.gat { border-color: var(--warn); }
	.ev-epic-kop {
		cursor: pointer; display: grid; gap: 12px; align-items: start;
		grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(200px, 1.2fr);
	}
	.ev-epic-naam { min-width: 0; }
	.ev-epic-balk { display: flex; flex-direction: column; gap: 3px; }
	.ev-epic-werk { font-size: 12px; color: var(--muted); }
	.ev-lijst { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; gap: 8px; }
	.ev-feature-kop { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13px; }
	.ev-feature-kop .rm-stip { margin-top: 0; vertical-align: -1px; }
	.ev-werk { list-style: none; margin: 4px 0 0 16px; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
	.ev-werk li.ev-residu { color: var(--muted); }
	/* Taakteksten op één regel; de volle tekst staat in de tooltip. */
	.ev-taak { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
	.ev-taak .ev-soort, .ev-taak .badge { flex: none; }
	.ev-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
	.ev-soort { display: inline-block; min-width: 34px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
	.ev-werk-leeg { margin: 2px 0 0 16px; font-size: 12px; color: var(--muted); }
	@media (max-width: 760px) {
		.ev-epic-kop { grid-template-columns: 1fr; gap: 6px; }
	}
	@media (max-width: 760px) {
		.kl-kop { display: none; }
		.kl-samenvatting { grid-template-columns: 1fr; gap: 6px; }
	}

	/* Het ontwerpbeeld bij een user story: het scherm (Ontwerp) en de datamodel-uitleg
	   (Explainer) staan als HTML in git en worden hier in een iframe getoond. Dichtgeklapt
	   omdat de klantband een lijst is en niet een galerij — je opent het beeld bij de eis
	   die je leest, niet allemaal tegelijk.

	   `loading="lazy"` op de iframe zelf doet het werk: een dichtgeklapte <details> laadt
	   het beeld niet, dus een klant met tien stories kost geen tien requests. */
	.beeld-knop { display: inline-block; margin: 4px 6px 0 0; }
	.beeld-knop > summary {
		display: inline-block; cursor: pointer; list-style: none;
		font-size: 11.5px; letter-spacing: .04em; padding: 1px 8px;
		border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
	}
	.beeld-knop > summary::-webkit-details-marker { display: none; }
	.beeld-knop > summary:hover { border-color: var(--accent); color: var(--accent-deep); }
	.beeld-knop[open] > summary { border-color: var(--accent); color: var(--accent-deep); background: var(--tint); }
	/* Dicht is het een chip tussen de tekst; open pakt hij de volle breedte van de cel —
	   anders krimpt de iframe mee met de chip en kijk je door een kier naar een scherm. */
	.beeld-knop[open] { display: block; margin-right: 0; }
	.beeld-balk { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 8px 0 6px; font-size: 12px; color: var(--muted); }
	/* Vaste hoogte met een eigen scrollbalk: een ontwerp is een hele pagina, en die mag de
	   klantband niet uit elkaar duwen. Wie het groter wil ziet, opent het in een tabblad. */
	.beeld-frame {
		display: block; width: 100%; height: 520px; resize: vertical; overflow: auto;
		border: 1px solid var(--line); border-radius: 10px; background: #fff;
	}

	/* --- Uitleg bij de werkvoorraad (/werkvoorraad/uitleg) ------------------------- */
	/* Drie lagen, elk een ketting van knopen met een pijl ertussen. De feature is in elke
	   laag hetzelfde blok (accentrand + tint): dat ís de boodschap — de lagen raken elkaar
	   daar. Alles in tokens, zodat de plaat in donkere modus meegaat. */
	.ui-intro { margin: 0; font-size: 14px; color: var(--muted); }
	.ui-kern-tekst { color: var(--accent-deep); }
	.ui-let-op { color: var(--warn); }
	.ui-laagnr {
		width: 26px; height: 26px; border-radius: 8px; background: var(--accent-deep); color: #fff;
		display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none;
	}
	.ui-keten { display: flex; align-items: stretch; gap: 0; }
	.ui-keten > .ui-knoop { flex: 1; }
	.ui-keten > .ui-knoop.kern { flex: 1.2; }
	.ui-knoop {
		display: flex; flex-direction: column; gap: 4px; min-width: 0;
		border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
	}
	.ui-knoop.kern { border: 2px solid var(--accent-deep); background: var(--tint); }
	.ui-knoop h3 { margin: 0; font-size: 15px; }
	.ui-knoop.kern h3 { color: var(--accent-deep); }
	.ui-knoop p { margin: 0; font-size: 12.5px; color: var(--muted); }
	.ui-knoop.kern p { color: var(--text); }
	.ui-nu { font-size: 12px; color: var(--accent-deep); }
	.ui-pijl {
		flex: none; width: 96px; display: flex; flex-direction: column; align-items: center;
		justify-content: center; gap: 4px; font-size: 11px; color: var(--muted); text-align: center;
	}
	table.ui-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
	table.ui-tabel th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
	table.ui-tabel td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
	table.ui-tabel td:first-child { white-space: nowrap; width: 150px; }
	table.ui-tabel td:last-child { color: var(--muted); }
	table.ui-tabel td.ui-let-op { color: var(--warn); }
	/* De draad: zes stappen naast elkaar, de feature en het signaal gemarkeerd. */
	.ui-draad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; font-size: 12.5px; }
	.ui-stap { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
	.ui-stap > span:last-child { color: var(--muted); }
	.ui-stap.kern { border: 2px solid var(--accent-deep); background: var(--tint); }
	.ui-stap.kern .sectielabel { color: var(--accent-deep); }
	.ui-stap.let-op { border-color: var(--warn); background: var(--warn-tint); }
	.ui-stap.let-op .sectielabel, .ui-stap.let-op > span:last-child { color: var(--warn); }
	@media (max-width: 1100px) {
		.ui-keten { flex-direction: column; }
		.ui-pijl { width: auto; flex-direction: row; gap: 10px; padding: 4px 0; }
		.ui-pijl svg { transform: rotate(90deg); }
		.ui-draad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	/* --- Werkvoorraad: zoeken, lenzen, samenhang (/werkvoorraad) ------------------- */
	/* Eigen chip-klasse: `.chip` is al van de worker-status (met stip en margin-left:auto). */
	.wv-chip {
		display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.5;
		padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
		background: var(--card); text-decoration: none; white-space: nowrap;
	}
	a.wv-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
	.wv-chip-link { color: var(--text); }
	.wv-chip-doel { border-color: var(--accent-deep); color: var(--accent-deep); font-weight: 600; }
	.wv-chip-na { border-color: var(--warn); color: var(--warn); }
	.wv-chip-filter { background: var(--tint); border-color: var(--accent-deep); color: var(--accent-deep); }
	.wv-chip-wis { font-size: 12px; margin-left: 4px; }
	.matrix-sub-inline { font-size: 12px; color: var(--muted); }
	.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	/* Een knop die eruitziet als link (Uitloggen in het 2FA-venster, "Terug" bij de login). */
	.link-knop {
		border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--accent-deep);
		text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
	}
	mark { background: var(--warn-tint); color: inherit; border-radius: 2px; padding: 0; }

	.zoek-onbekend { margin: 10px 0 0; font-size: 13px; color: var(--warn); }
	.zoek-resultaten { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
	.zoek-soorten { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
	.zoek-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
	.zoek-groep { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
	.zoek-groep h3 { margin: 0 0 6px; font-size: 14px; }
	.zoek-groep ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
	.zoek-groep li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
	.zoek-groep li:first-child { border-top: 0; }
	.zoek-titel { font-weight: 600; }
	.zoek-groep code { margin-left: 4px; }

	.lens-regel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
	.lens-regel .uitleg { font-size: 12.5px; color: var(--muted); }
	.warn-link { color: var(--warn); font-weight: 600; }

	.ini-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
	.ini-kaart { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
	.ini-kaart.nu { border-color: var(--accent-deep); background: var(--tint); }
	.ini-kop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
	.ini-kop h3 { margin: 0; font-size: 15px; }
	.ini-kop h3 a { color: var(--text); text-decoration: none; }
	.ini-kop h3 a:hover { color: var(--accent-deep); text-decoration: underline; }
	.ini-soort { margin-left: auto; }
	.ini-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; font-size: 12.5px; }
	.ini-cijfers dt { color: var(--muted); }
	.ini-cijfers dd { margin: 0; font-weight: 600; }
	.ini-trein { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
	.ini-voet { font-size: 12.5px; color: var(--muted); }

	.trein { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
	.trein-klein { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.trein-klein .wagon { min-height: 0; }
	.wagon {
		display: flex; flex-direction: column; gap: 5px; min-height: 140px; min-width: 0;
		border: 1px solid var(--line); border-radius: 10px; padding: 10px; color: inherit; text-decoration: none;
		background: var(--card);
	}
	a.wagon:hover { border-color: var(--accent); }
	/* Roadmap-folds: dicht tot je de wagon aanklikt. Zonder script via :target, mét script
	   via .open (de `fold-js`-klasse zet de :target-route dan uit). */
	.rm-fold { display: none; margin-top: 12px; }
	.rm-fold:target, .rm-fold.open { display: block; }
	.fold-js .rm-fold:target:not(.open) { display: none; }
	.rm-fold .rm-features { display: block; columns: 260px; column-gap: 20px; }
	.rm-fold .rm-features li { break-inside: avoid; margin-bottom: 4px; }
	.rm-fold .rm-epic { break-after: avoid; }
	.wagon-pijl { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); transition: transform .15s; }
	.wagon.fold-open { border-color: var(--accent-deep); box-shadow: inset 0 0 0 2px var(--accent); }
	.wagon.fold-open .wagon-pijl { transform: rotate(180deg); }
	.wagon.nu { border-color: var(--accent-deep); background: var(--tint); }
	.wagon.wagon-leeg { border-style: dashed; }
	.wagon.parkeer { border-color: var(--warn); background: var(--warn-tint); }
	.wagon.actief { box-shadow: inset 0 0 0 2px var(--accent-deep); }
	.wagon strong { font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
	.wagon .vg-balk { flex: none; height: 6px; }
	.wagon-nr { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
	.wagon-ini { font-size: 11px; color: var(--accent-deep); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
	.wagon.ini-grens { border-left: 3px solid var(--accent-deep); }
	.wagon-status { font-size: 11px; color: var(--muted); }
	.wagon.nu .wagon-status { color: var(--accent-deep); font-weight: 600; }
	.wagon.parkeer .wagon-status { color: var(--warn); font-weight: 600; }
	.wagon-tel { font-size: 12px; }
	.wagon-klant {
		margin-top: auto; font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line);
		background: var(--card); align-self: flex-start;
	}
	.wagon-klant + .wagon-klant { margin-top: 0; }


	.filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
	.detail-link { font-size: 12px; margin-left: 6px; }
	td.leeg-cel { padding: 18px 8px; color: var(--muted); text-align: center; }

	/* --- Detailpagina's (/werkvoorraad/feature/…, /werkvoorraad/initiatief/…) ------ */
	.kruimel { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
	.kruimel a { text-decoration: none; }
	.detail-kop { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
	.detail-kop-tekst { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
	.detail-titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
	.detail-titel h2 { margin: 0; font-size: 20px; }
	.detail-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
	.detail-bronnen a { font-size: 12.5px; }
	.detail-voortgang { flex: 0 1 300px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
	.detail-kpis { flex: 0 1 620px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; }
	.detail-kpis .kpi { margin: 0; }
	.detail-kpis dd { margin: 0; }
	.detail-kpis .kpi-uitleg { display: block; font-weight: 400; }
	.signaal { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; }
	.signaal.warn { background: var(--warn-tint); border: 1px solid var(--warn); }
	.signaal.warn > div > strong { color: var(--warn); }
	.detail-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
	.detail-grid-2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.detail-grid > .paneel { margin-bottom: 0; min-width: 0; }
	.leeg-klein { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
	.detail-lijst { margin: 6px 0 12px; padding-left: 18px; font-size: 13px; display: grid; gap: 6px; }
	.detail-lijst.gedimd { color: var(--muted); }
	.detail-lijst .matrix-sub { display: block; }
	.detail-rij-kop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
	.bucket { font-size: 12px; color: var(--muted); }
	.bucket.ok { color: var(--accent-deep); }
	.bucket.warn { color: var(--warn); }
	.bucket.bad { color: var(--bad); }
	.plaats { margin: 0; display: grid; font-size: 13px; }
	.plaats > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
	.plaats > div:first-child { border-top: 0; }
	.plaats dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
	.plaats dd { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; align-items: baseline; }
	table.ini-tabel tr.groep-kop th {
		font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
		padding-top: 12px; border-bottom: 1px solid var(--line);
	}
	table.ini-tabel tr.groep-kop.doel th { color: var(--accent-deep); }
	table.ini-tabel tr.groep-kop.let-op th { color: var(--warn); }
	table.ini-tabel .rm-stip { margin-top: 0; vertical-align: -1px; }
	.us-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
	.us-kaart { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
	.us-kaart.geblokkeerd { border-color: var(--warn); background: var(--warn-tint); }
	.us-chips { display: flex; gap: 4px; flex-wrap: wrap; }
	/* Het oordeel over de eis van een user story (ADR 0032): één chip, drie standen. */
	.us-oordeel {
		display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
		border: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums;
	}
	.us-oordeel.ingelost { color: var(--accent-deep); border-color: var(--accent-deep); background: var(--tint); }
	.us-oordeel.deels { color: var(--warn); border-color: var(--warn); background: var(--warn-tint); }
	.us-klant { font-size: 12px; color: var(--muted); }
	@media (max-width: 900px) {
		.detail-grid-2 { grid-template-columns: 1fr; }
		.ini-cijfers { grid-template-columns: 1fr; }
	}