/* ==========================================================
   BLOCKS — herbruikbare onderdelen (merk, tabs, knoppen, chips,
   post-its, tabel, matrix, roadmap, modals)
   ========================================================== */

/* Waarschuwingsbalk bovenaan — standaard verborgen, alleen op smalle schermen zichtbaar
   (zie exceptions.css): roadmappin.net is bedoeld voor grote schermen. */
.mobiel-balk { display: none; background: var(--org-tint); color: var(--inkt-zacht); font-size: 13.5px; line-height: 1.4; text-align: center; padding: 9px 16px; border-bottom: 1px solid var(--lijn); }
.mobiel-icoon { color: var(--org); vertical-align: -3px; margin-right: 6px; }

/* Merk (logo + wordmark) — .merk in de kop van de tool (groot icoon, wordmark eronder),
   .wordmark op over.html/changelog.html (klein logo, wordmark ernaast). */
.merk img { width: 52px; height: 52px; display: block; }
.merk .wm, .wordmark .wm { font-family: var(--kop-font); font-weight: 800; letter-spacing: -0.02em; color: var(--inkt); }
.merk .wm { font-size: 15px; }
.wordmark img { width: 30px; height: 30px; display: block; }
.wordmark .wm { font-size: 22px; }
.merk .net, .wordmark .net { display: inline-block; color: var(--org-deep); }
.merk:hover .net, .wordmark:hover .net { color: var(--org); }
@keyframes logo-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: no-preference) {
  .merk img, .merk .net, .wordmark img, .wordmark .net { transition: transform .12s ease; }
  .merk:hover img, .merk:focus-visible img, .merk:hover .net, .merk:focus-visible .net,
  .wordmark:hover img, .wordmark:focus-visible img,
  .wordmark:hover .net, .wordmark:focus-visible .net { animation: logo-zoom .35s ease 1; }
}

/* Taalkeuze — onderaan in de voettekst (de kop is nu voor de tabbalk), als gewone
   tekstlink: EN / NL. De actieve taal is de donkere van de twee. */
.taal-toggle { display: inline-flex; align-items: center; gap: 6px; }
.taal-toggle button { padding: 0; border: none; background: none; font-size: 14px; font-weight: 600; color: #6f6f6f; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.taal-toggle button:hover { color: var(--org-deep); }
.taal-toggle button[aria-pressed="true"] { color: var(--inkt); text-decoration: none; cursor: default; }
.taal-scheiding { color: var(--lijn-sterk); }

/* Tabs */
[role="tablist"] { display: inline-flex; align-items: center; gap: 10px; }
/* De stappenbalk in de kop: geen vlakken meer, maar drie stappen op de achtergrond van de
   pagina zelf. De actieve stap herken je aan de dikke oranje streep eronder — dat is het
   enige onderscheid, dus die streep moet dik en verzadigd blijven. */
.stap-tabs { gap: 6px; position: relative; }
.stap-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 8px; border: 0; border-bottom: 4px solid transparent; border-radius: 4px 4px 0 0; background: none; color: var(--inkt-zacht); text-align: left; cursor: pointer; transition: color .12s, border-color .12s; user-select: none; }
/* De actieve onderlijn is niet meer de rand van de tab zelf, maar de bewegende .tab-onderlijn
   hieronder — die schuift zichtbaar mee naar de nieuwe stap. Hier alleen nog de tekstkleur. */
.stap-tabs [role="tab"][aria-selected="true"] { color: var(--inkt); }
/* Eén onderlijn voor de hele tablist die naar de actieve stap schuift; positie en breedte
   zet verplaatsTabOnderlijn() in tabs.js (transform + width). Zo zie je bij het wisselen van
   weergave (tab, sneltoets 1/2/3 of Vorige/Volgende) dat je van pagina verandert. */
.tab-onderlijn { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; border-radius: 4px 4px 0 0; background: var(--org); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .tab-onderlijn { transition: transform .3s cubic-bezier(.45,.05,.2,1), width .3s cubic-bezier(.45,.05,.2,1); }
}
/* Hover: het diepere oranje in de streep én in het nummer (zie .tab-nummer hieronder).
   Deze regel staat ná die van de actieve stap en heeft dezelfde specificiteit, dus hij
   wint — ook de actieve stap wordt donkerder als je erover gaat. */
.stap-tabs [role="tab"]:hover { color: var(--inkt); border-bottom-color: var(--org-deep); }
.tab-tekst { display: flex; flex-direction: column; gap: 1px; }
.tab-label { font-size: 17px; font-weight: 700; line-height: 1.2; }
/* Eén regel die de stap samenvat: klein en grijs, zodat hij de stapnaam niet verdringt. */
.tab-sub { font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--inkt-vaag); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #e6e6e6; color: #555; }
.badge.org { background: var(--org); color: var(--inkt); }
.badge[hidden] { display: none; }
/* Het nummer vóór de tabnaam is de sneltoets ernaartoe (1/2/3). In rust blijft het cijfer
   --inkt: op alle drie de oranjes (tint, org, org-deep) haalt dat 4.5:1 (WCAG 1.4.3), wit
   of --org-deep als tekstkleur halen dat niet. Alleen tijdens de vluchtige hover-staat wordt
   het cijfer wit (op --org-deep) — daar is het contrast bewust minder streng. */
.tab-nummer { flex: none; min-width: 22px; height: 22px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--org-tint); color: var(--inkt); transition: background .12s, color .12s; }
.stap-tabs [role="tab"][aria-selected="true"] .tab-nummer { background: var(--org); }
/* Hover: donkerder oranje, het cijfer wit, en één heel subtiele puls van het cirkeltje. */
.stap-tabs [role="tab"]:hover .tab-nummer { background: var(--org-deep); color: #fff; }
@keyframes tab-nummer-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
  .stap-tabs [role="tab"]:hover .tab-nummer { animation: tab-nummer-puls .35s ease 1; }
}
/* Decoratieve pijltjes tussen de tabs: suggereren de volgorde Wensen → Matrix → Roadmap. */
.tab-pijl { display: inline-flex; align-items: center; color: var(--org); }

/* Titel (H1) en subtitel van de actieve weergave, in de kop naast het merk */
.view-titel { font-family: var(--kop-font); font-weight: 700; font-size: 40px; letter-spacing: -0.025em; margin: 0; line-height: 1; }
.view-sub { margin: 0; font-size: 15px; color: var(--inkt-zacht); }

/* Wisselen van weergave (Verzamel → Prioriteer → Plan): titel, subtitel en paneel komen
   kort omhoog en faden in, zodat de omschakeling niet als een harde sprong voelt. De
   klasse zet activeerTab() (tabs.js) en haalt hij er na afloop weer af. */
@keyframes weergave-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .view-titel.wisselt,
  .view-sub.wisselt,
  [role="tabpanel"].wisselt { animation: weergave-in .28s ease-out; }
}

/* Formuliervelden */
.toevoegen input { width: 100%; min-width: 0; border: 1px solid var(--lijn-sterk); border-radius: var(--radius); padding: 16px 18px; font-size: 15.5px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.toevoegen input::placeholder { color: #a3a3a3; }
.toevoegen input:focus-visible { box-shadow: 0 0 0 1px var(--org), 0 0 0 4px rgba(255,162,19,.2); border-color: var(--org); border-radius: var(--radius); }
/* Thema-kiezer in de toevoeg-formulieren: een .export-dropdown (net als Opties/Exporteren),
   i.p.v. een losse <select>, zodat er een gekleurde stip per optie in kan. */
.thema-keuze { width: 100%; min-width: 0; }
.thema-keuze[hidden] { display: none; }
.thema-keuze summary { width: 100%; min-height: 54px; box-sizing: border-box; }
/* De thema-kiezer in het wens-formulier moet even hoog worden als de invoervelden ernaast
   en zijn inhoud verticaal meecentreren. De <details> stretcht al mee in de grid-rij, maar
   de <summary> bleef op zijn min-height staan (bovenaan uitgelijnd) zodra de velden hoger
   uitvielen; door de <details> een flexbox te maken vult de summary de volle rijhoogte.
   Op .invoer-thema (niet #invoer-wensen-thema): een id zou .thema-keuze[hidden] overrulen
   en de kiezer tonen terwijl thema's uit staan. De tabel-editkiezer heeft geen .invoer-thema. */
.invoer-thema { display: flex; }
/* In de bewerk-rij van de wenstabel moet de thema-kiezer even hoog zijn als de invoervelden
   ernaast (.wens-bewerk input), niet de 54px van de formulierkiezer hierboven. Neem daarom
   dezelfde box over: geen min-height, dezelfde padding/radius, en font-size: inherit zodat
   de summary — net als de velden — de 16px/1.6 van de body erft en exact even hoog wordt. */
.wenstabel .thema-keuze summary { min-height: 0; padding: 9px 12px; border-radius: 10px; font-size: inherit; }
.thema-keuze .thema-keuze-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.thema-keuze .export-menu { min-width: 100%; }
.thema-keuze .export-menu button { width: 100%; }
/* Zie pasThemaKeuzePositieAan() in wensenlijst.js: bij te weinig ruimte onder de rij
   klapt de menu omhoog i.p.v. omlaag open, zodat #tabel-omhulsel 'm niet afkapt. */
.thema-keuze-omhoog .export-menu { top: auto; bottom: calc(100% + 6px); }
/* Grid-item in .toevoegen: valt door de auto-plaatsing vanzelf direct onder het
   titelveld (kolom 1, nieuwe rij) — de negatieve marge trekt hem dicht tegen dat veld aan. */
.import-lijst-link { justify-self: start; margin-top: -8px; }
/* Staat expliciet in kolom 3 (dezelfde kolom als de thema-kiezer erboven), i.p.v. de
   auto-plaatsing te volgen zoals .import-lijst-link (die onder kolom 1 hoort). */
.beheer-themas-link { grid-column: 3; justify-self: start; margin-top: -8px; }

/* Knoppen en tekstlinks */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 26px; min-height: 54px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; background: var(--org-light); color: var(--inkt); font-weight: 700; font-size: 15.5px; white-space: nowrap; transition: background .12s, box-shadow .12s; }
.knop:hover { background: var(--org); box-shadow: 0 4px 16px -4px rgba(255,162,19,.45); }
/* Uitgeschakeld (bijv. "Importeer wensen" zolang er geen bestand gekozen is) */
.knop:disabled { opacity: .45; cursor: default; }
.knop:disabled:hover { background: var(--org-light); box-shadow: none; }
.knop .plus { font-size: 17px; line-height: 1; }
/* Knoppen naar de vorige/volgende stap, onderaan elke weergave. Het pijltje schuift mee bij
   hover, als hint dat je hier door de route Verzamel → Prioriteer → Plan beweegt.
   De terug-knop is even hoog als de oranje knop ernaast (ze staan op één regel), maar stil:
   vooruit is de hoofdweg, terug is de uitzondering. */
.terug-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; min-height: 54px; border: 1px solid var(--lijn-sterk); border-radius: var(--radius); background: #fff; color: var(--inkt); font-weight: 700; font-size: 15.5px; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s; }
.terug-knop:hover { border-color: #c9c9c9; background: #fafafa; }
.volgende-pijl, .terug-pijl { font-size: 17px; line-height: 1; transition: transform .12s; }
.volgende-knop:hover .volgende-pijl { transform: translateX(3px); }
.terug-knop:hover .terug-pijl { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
  .volgende-knop:hover .volgende-pijl,
  .terug-knop:hover .terug-pijl { transform: none; }
}
.knop-stil { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 1px solid #e6e6e6; border-radius: 11px; background: #fff; color: #333; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background .12s, border-color .12s; }
.knop-stil:hover { border-color: #c9c9c9; background: #fafafa; }
.knop-stil.verwijder:hover { border-color: #f0c9c9; color: var(--gevaar); background: #fdf6f5; }
.knop-stil.opslaan:hover { border-color: #bce3c7; color: #2e7d4f; background: #f2faf4; }
/* Uitgeschakeld (o.a. de Verwijder-knop terwijl je een wens bewerkt): gedimd en geen
   hover-reactie. Staat ná de :hover-regels hierboven zodat het die overschrijft. */
.knop-stil:disabled { opacity: .4; cursor: default; }
.knop-stil:disabled:hover { border-color: #e6e6e6; background: #fff; color: #333; }
.knop-stil svg { flex: none; }
.tekst-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 14px; font-weight: 600; color: #6f6f6f; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tekst-link:hover { color: var(--gevaar); }
/* Zonder deze regel wint .tekst-link's display:inline-flex van de UA-regel [hidden]{display:none}
   (zelfde randgeval als #intro-vorige) — en bleef "Thema's beheren" zichtbaar met thema's uit. */
.tekst-link[hidden] { display: none; }
.tekst-link svg { flex: none; }


/* Post-it: los label in de bak; op de matrix en in kolommen anders gestyled */
.postit { position: relative; display: inline-block; max-width: 190px; padding: 10px 16px; border: none; border-radius: 9px; background: var(--org-light); color: var(--inkt); font-family: var(--kop-font); font-weight: 600; font-size: 14.5px; line-height: 1.4; text-align: left; box-shadow: 0 5px 12px -7px rgba(0,0,0,.3); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.postit:active { cursor: grabbing; }
.postit.sleept { opacity: .95; z-index: 10; }
/* Tijdens het slepen vanuit een lade/kolom volgt een kloon de muis, terwijl het origineel op
   zijn oude plek blijft staan. Die achterblijver tonen we als lichtgrijze plek met stippellijn,
   zodat zichtbaar is dat er een actie op wordt uitgevoerd. De outline (offset naar binnen) laat
   de omringende wensen niet verspringen; !important overrulet de inline themakleur uit
   maakPostit(). De kloon zelf heeft deze klasse niet en blijft dus normaal gekleurd. */
.postit.sleep-bron { background: #f2f2f2 !important; color: #b3b3b3; box-shadow: none; outline: 2px dashed #c4c4c4; outline-offset: -2px; }
.postit.sleep-bron .tip { display: none; }
/* Hover op een wens (matrix, roadmap én de lades): subtiel groter, zodat zichtbaar is dat je
   'm kunt aanklikken en verslepen. Via de losse scale-eigenschap (niet transform), zodat de
   centrering + scheve stand op de matrix intact blijven — net als chip-geland. Transform
   verplaatst niets in de lay-out eromheen, dus de omringende wensen blijven staan. */
@media (prefers-reduced-motion: no-preference) {
  .postit { transition: scale .12s ease; }
  .postit:hover { scale: 1.04; }
}
/* Een aangewezen of gefocuste wens (met zichtbare tooltip) boven zijn buren tillen, op de
   matrix én de roadmap. Nodig omdat de hover-scale van de wens een eigen stacking-context
   maakt: zonder deze z-index zou de tooltip (.tip) achter een latere wens verdwijnen. */
.postit:hover, .postit:focus, .postit:focus-visible { z-index: 6; }
/* De laatst versleepte wens op de matrix blijft bovenop liggen (zie laatsteMatrixId in
   matrix.js) — onder een wens die je aanwijst of versleept, boven alle andere. */
.matrix .postit.laatst { z-index: 4; }
/* Duidelijke zwarte rand om de wens met toetsenbordfocus, zodat in een workshop
   zichtbaar is welke wens geselecteerd is en met de pijltjestoetsen te verplaatsen
   valt. Een outline (geen border) verspringt de lay-out niet en botst niet met de
   eigen schaduw van de post-it — anders dan de globale box-shadow-focusring, die door
   de hogere specificiteit van `.matrix .postit` / `.kolom .postit` werd overschreven. */
.postit:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }
.tip { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); background: var(--inkt); color: #fff; font-family: "Inter", sans-serif; font-size: 12.5px; line-height: 1.4; font-weight: 400; padding: 6px 10px; border-radius: 8px; width: max-content; max-width: 220px; white-space: normal; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.postit:hover .tip, .postit:focus .tip, .postit:focus-visible .tip { opacity: 1; visibility: visible; }
.postit.sleept .tip { display: none; }
.sleepkopie { position: fixed; pointer-events: none; z-index: 100; margin: 0; }

/* Export / data-dropdown */
.export { position: relative; }
.export summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--lijn-sterk); border-radius: 11px; background: #fff; font-size: 14.5px; font-weight: 600; color: #2b2b2b; cursor: pointer; transition: background .12s, border-color .12s; }
.export summary::-webkit-details-marker { display: none; }
/* De menuknoppen in de kop houden hun hoogte, ook als hun label wegvalt (zie exceptions.css):
   zonder dit staat een icoon-knop 8px lager dan de knop mét tekst ernaast — de tekstregel is
   hoger dan het icoon. 47px is de hoogte die zo'n knop mét label heeft. Alleen in de kop: de
   thema-kiezers zijn ook .export-menu's, maar die volgen de velden waar ze naast staan. */
.kop-acties .export summary { min-height: 47px; }
.export summary:hover, .export[open] summary { border-color: #c9c9c9; background: #fafafa; }
.export summary .ico { flex: none; color: var(--inkt-vaag); }
.export .chev { color: var(--inkt-vaag); }
@media (prefers-reduced-motion: no-preference) { .export .chev { transition: transform .2s ease; } }
.export[open] .chev { transform: rotate(180deg); }
/* De menu's (Opties, Exporteren, thema-kiezers) faden even omhoog in bij het openen — een
   vloeiende beweging in plaats van hard verschijnen. Werkt op alle pagina's, want elk van
   deze uitklap-menu's is een .export[open] > .export-menu. */
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .export[open] > .export-menu { animation: menu-in .16s ease-out; }
}
.export-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid var(--lijn-sterk); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.10); min-width: 220px; padding: 5px; display: flex; flex-direction: column; }
/* Kopje boven de exportkeuzes. Alleen op smalle schermen zichtbaar (zie exceptions.css):
   daar heeft de knop zelf geen label meer, en zegt dit wat er onder het icoon zit. */
.export-menu-kop { display: none; padding: 7px 11px 5px; font-size: 12px; font-weight: 700; color: var(--inkt-vaag); }
.export-menu button { display: inline-flex; align-items: center; gap: 9px; text-align: left; background: none; border: none; padding: 9px 11px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--inkt); }
.export-menu button:hover { background: var(--org-tint); }
.export-menu button svg { flex: 0 0 auto; color: var(--inkt-vaag); }
.export-menu button.gevaar:hover { background: #fdf6f5; color: var(--gevaar); }
.export-menu button.gevaar:hover svg { color: var(--gevaar); }
/* Uitgeschakeld (nu alleen: niets te verwijderen, zie updateWisKnoppen() in hoofd.js) —
   gedimd, geen hover-vlak en geen cursor die klikbaarheid suggereert. */
.export-menu button:disabled,
.tekst-link:disabled { opacity: .4; cursor: default; }
.export-menu button:disabled:hover,
.export-menu button.gevaar:disabled:hover { background: none; color: var(--inkt); }
.export-menu button.gevaar:disabled:hover svg { color: var(--inkt-vaag); }
.tekst-link:disabled:hover { color: #6f6f6f; }

.bak-kop h2 { margin: 0; font-family: var(--kop-font); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; }
.roadmap-planning-acties { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Bak (dropzone) + hint eronder */
.bak { border: 2px dashed var(--lijn-sterk); border-radius: 16px; min-height: 92px; padding: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; }
.dz-empty { color: #6f6f6f; font-size: 14.5px; }
/* Zonder wensen wijst de lade terug naar Verzamel: een link, dus ook als link herkenbaar. */
.dz-leeg-link { color: var(--inkt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--org); text-decoration-thickness: 2px; }
.dz-leeg-link:hover { color: var(--org-deep); }
.bak-label { font-size: 14px; color: var(--inkt-vaag); padding: 16px 4px 0; margin: 0; }

#invoeglijn { position: fixed; height: 2px; background: var(--org-deep); border-radius: 2px; z-index: 99; pointer-events: none; }
#invoeglijn[hidden] { display: none; }

/* Wensenlijst (tabel) */
.tabel-omhulsel { overflow-x: auto; }
.wenstabel { width: 100%; border-collapse: collapse; }
.wenstabel th { text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--inkt-vaag); padding: 0 10px 14px 4px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
/* De Thema-kolom houdt dezelfde breedte in álle standen: gewone rij, bewerk-rij (waar de
   thema-kiezer in de cel komt) en met korte of lange themanamen. Vandaar de breedte op
   zowel de th als de td, plus de max-width: die laat de inhoud afkappen i.p.v. de kolom
   oprekken (de Wens-kolom vangt het verschil op). */
.wenstabel th.k-thema,
.wenstabel td.thema-kolom { width: 170px; max-width: 170px; }
.thema-cel { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14.5px; }
.thema-cel-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wenstabel td { padding: 20px 10px 20px 4px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
/* Zebra-striping: elke tweede wens krijgt een lichtgrijze achtergrond. De hover is
   daarom iets donkerder dan die grijstint, anders zou hij op de grijze rijen
   nauwelijks zichtbaar zijn. */
.wenstabel tbody tr:nth-child(even) { background: #f6f6f6; }
.wenstabel tbody tr:hover { background: #ececec; }
.wenstabel td.acties { width: 1%; text-align: right; white-space: nowrap; }
.wenstabel td.acties button + button { margin-left: 10px; }
/* Vaste knopbreedte: de bewerk-knop wisselt van "Bewerken" naar "Opslaan" en is dan
   smaller — zonder deze min-width zou de hele actie-kolom (en daarmee de Thema-kolom
   ernaast) tijdens het bewerken opzij schuiven. */
.wenstabel td.acties .knop-stil { min-width: 122px; justify-content: center; }
.wens-tekst { display: flex; flex-direction: column; }
.wens-tekst .titel { font-family: var(--kop-font); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.wens-tekst .beschr { margin-top: 4px; font-size: 14.5px; color: #6f6f6f; overflow-wrap: anywhere; }
/* Titel, beschrijving en thema naast elkaar i.p.v. onder elkaar. De min-height wordt bij het
   openen door bewerkWens() (wensenlijst.js) op de leeshoogte gezet, zodat de rij niet
   verspringt tussen lezen en bewerken; align-items: center houdt de velden dan verticaal in
   het midden van die hoogte. */
.wens-bewerk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wens-bewerk input { border: 1px solid var(--lijn-sterk); border-radius: 10px; padding: 9px 12px; background: #fff; flex: 1 1 160px; min-width: 0; }
/* Bij het openen schuiven de velden even in vanaf de leesweergave, zodat zichtbaar is waar de
   titel en beschrijving naartoe gaan. */
@keyframes veld-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .wens-bewerk input { animation: veld-in .22s ease-out both; }
  .wens-bewerk input:nth-child(2) { animation-delay: .05s; }
}
/* Sleep-handgreep + herordenen. Ruim bemeten (44x44 met het icoon van 20px erin): een
   greep van een paar pixels is met de muis al lastig te pakken en met een vinger helemaal
   — zie ook WCAG 2.5.8 (Target Size). */
.grip-cel { width: 1%; padding-right: 0; }
.grip { display: inline-flex; align-items: center; justify-content: center; padding: 12px; border: 1px solid transparent; border-radius: 10px; background: none; color: #6f6f6f; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.grip svg { width: 20px; height: 20px; }
.grip:hover { color: var(--inkt); background: var(--org-tint); }
.grip:active { cursor: grabbing; }
/* Net toegevoegde wens: komt kort omhoog met een oranje gloed */
@keyframes wens-pop {
  from { opacity: 0; transform: translateY(-8px) scale(.985); background: var(--org-tint); }
  60%  { opacity: 1; transform: none; background: var(--org-tint); }
  to   { opacity: 1; transform: none; background: rgba(255,246,233,0); }
}
/* Zojuist versleepte wens: de rij licht op zijn nieuwe plek even amberkleurig op en dooft
   dan uit — de tegenhanger van de landingsanimaties op de matrix en de roadmap. Piek op
   een duidelijkere amber dan --org-tint (dat is te bleek om op te vallen), daarna uitdoven.
   Alleen de achtergrond (geen transform): een <tr> verschuiven laat de rest van de tabel
   niet meebewegen. Naar transparant i.p.v. wit, zodat de zebra-tint van een even rij
   eronder weer tevoorschijn komt. */
@keyframes rij-geland {
  0%   { background: rgba(255,194,77,.45); }
  100% { background: rgba(255,246,233,0); }
}
/* Import: de wensen vallen één voor één in de lijst (zoals de kaarten bij het
   automatisch vullen van de roadmap). De vertraging per rij zet animeerImportLijst()
   in wensenlijst.js; fill-mode both houdt de rij tot zijn beurt onzichtbaar. */
@keyframes rij-invliegen {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* Alles wissen: de rijen glijden één voor één naar rechts weg (vertraging per rij uit
   animeerWissenLijst() in wensenlijst.js), en pas daarna wordt de lijst echt geleegd. */
@keyframes rij-wissen {
  to { opacity: 0; transform: translateX(28px); }
}
@media (prefers-reduced-motion: no-preference) {
  .wenstabel tbody tr.nieuw { animation: wens-pop .45s ease-out; }
  .wenstabel tbody tr.geland { animation: rij-geland .6s ease-out; }
  .wenstabel tbody tr.geimporteerd { animation: rij-invliegen .35s ease-out both; }
  .wenstabel tbody tr.wist { animation: rij-wissen .32s ease-in forwards; }
}
/* Even zwaar als de zebra-regel hierboven (en er later in de bron), zodat een
   gesleepte rij ook op een grijze zebra-rij oranje kleurt. */
.wenstabel tbody tr.sleept-rij { background: var(--org-tint); }
tr.sleept-rij td { border-color: transparent; }
.leeg { color: var(--inkt-vaag); padding: 24px 0; }
/* Lege wensenlijst: het beeld en de uitleg van intro-stap 1 (zie tekenLegeWensen() in
   intro.js), gecentreerd in de ruimte die de tabel anders zou vullen. Zelfde vlak als
   het beeld in de uitleg-modal (.intro-beeld), alleen smaller. */
.leegstand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px 64px; text-align: center; }
.leegstand[hidden] { display: none; }
.leegstand-beeld { width: min(400px, 100%); height: 168px; margin-bottom: 12px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--org-tint); }
.leegstand-kop { margin: 0; font-family: var(--kop-font); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.leegstand-tekst { max-width: 48ch; margin: 0; color: var(--inkt-zacht); font-size: 15.5px; line-height: 1.55; }
/* Verwijderen: rij vervaagt en krimpt eerst weg, dan komt er een "ongedaan maken"-rij voor terug */
@keyframes wens-verwijderen { to { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  .wenstabel tbody tr.wens-verwijderen { animation: wens-verwijderen .3s ease forwards; }
}
.wens-ongedaan-rij td { padding: 18px 4px; color: var(--inkt-zacht); font-size: 14.5px; }
.wens-ongedaan-rij .tekst-link { margin-left: 4px; }

/* Matrix — .mcard krimpt om de matrix heen (i.p.v. de volle containerbreedte te
   pakken) zodat de grijze rand precies tegen de kwadranten aan sluit. */
.mcard { width: fit-content; margin: 0 auto; border: 1px solid #e6e6e6; border-radius: 20px; background: #fff; padding: 0; }
.matrix {
  /* Een vaste (niet-procentuele) breedte, want een percentage zou hier niet oplosbaar
     zijn tegen een krimpende (fit-content) ouder. Alleen de viewportbréédte begrenst de
     matrix, bewust niet de hoogte: met een hoogte-term (100vh) verspringt de matrix zodra
     de zichtbare hoogte verandert — devtools die opengaan, de URL-balk van een mobiele
     browser die in- of uitschuift. Past hij niet op een lage viewport, dan scrollt de
     pagina gewoon. Dit is de smalle (gestapelde) stand; met de lade ernaast geldt de
     regel hieronder. */
  position: relative; width: min(1000px, 90vw);
  aspect-ratio: 5 / 3; border-radius: 20px;
  /* tint linksboven en rechtsonder */
  background-image: linear-gradient(#f6f6f6, #f6f6f6), linear-gradient(#f6f6f6, #f6f6f6);
  background-size: 50% 50%; background-position: top left, bottom right; background-repeat: no-repeat;
}
/* Aslabels staan binnen de matrix: de kaart heeft geen padding meer. */
.matrix .as { position: absolute; font-size: 14px; font-weight: 500; color: #6f6f6f; white-space: nowrap; pointer-events: none; }
.as.boven { top: 12px; left: 50%; transform: translateX(-50%); }
.as.onder { bottom: 12px; left: 50%; transform: translateX(-50%); }
.as.links { left: 18px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.as.rechts { right: 18px; top: 50%; transform: translate(50%, -50%) rotate(90deg); }
/* Kwadrantnamen in de vier hoeken. Ze staan onder/boven de gecentreerde as-labels en
   in de hoeken weg van de verticaal gecentreerde zij-labels, zodat ze elkaar niet raken.
   pointer-events: none — je moet er dwars doorheen kunnen slepen; post-its worden later
   in de DOM toegevoegd en dekken een label af zodra ze eroverheen liggen. Gedempt grijs,
   behalve quick wins (dezelfde oranje-accentkleur als in de PNG-export). */
.matrix .kwadrant { position: absolute; font-family: var(--kop-font); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #bcbcbc; pointer-events: none; }
.kwadrant.linksboven { top: 31px; left: 16px; color: #d9860a; }
.kwadrant.rechtsboven { top: 31px; right: 16px; }
.kwadrant.linksonder { bottom: 31px; left: 16px; }
.kwadrant.rechtsonder { bottom: 31px; right: 16px; }
.matrix .lijn-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--lijn-sterk); }
.matrix .lijn-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--lijn-sterk); }
/* Pijlpunten aan beide uiteinden van de kwadrantlijnen, om de as te benadrukken.
   Zuivere CSS-driehoeken: de gekleurde borderzijde is de "basis", de punt wijst
   naar de tegenoverliggende zijde. Donkerder dan de aslabels en de lijnen zelf,
   anders vallen de pijlen niet op. */
.matrix .lijn-v::before, .matrix .lijn-v::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  transform: translateX(-50%);
}
.matrix .lijn-v::before { top: 0; border-bottom: 8px solid #5c5c5c; }
.matrix .lijn-v::after { bottom: 0; border-top: 8px solid #5c5c5c; }
.matrix .lijn-h::before, .matrix .lijn-h::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.matrix .lijn-h::before { left: 0; border-right: 8px solid #5c5c5c; }
.matrix .lijn-h::after { right: 0; border-left: 8px solid #5c5c5c; }
.matrix .postit { position: absolute; padding: 12px 17px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.3); transform: translate(-50%, -50%) rotate(-1.5deg); }
.matrix .postit:nth-child(even) { transform: translate(-50%, -50%) rotate(1.5deg); }
.matrix .postit.sleept { transform: translate(-50%, -50%) scale(1.03); }
/* Zojuist in de matrix neergezette wens: komt nog even "opgetild" aan en zet zich
   neer — dezelfde beweging als een kaart die op de roadmap landt (kaart-geland).
   Hier via de losse scale-eigenschap i.p.v. transform, want die is al bezet door de
   centrering + de scheve stand van de post-it (die per chip verschilt). */
@keyframes chip-geland {
  from { scale: 1.07; box-shadow: 0 14px 26px -8px rgba(0,0,0,.35); }
  to   { scale: 1; box-shadow: 0 8px 18px -8px rgba(0,0,0,.3); }
}
@media (prefers-reduced-motion: no-preference) {
  .matrix .postit { transition: transform .1s ease, scale .12s ease; }   /* scale erbij voor de hover-vergroting (zie .postit:hover) */
  .matrix .postit.geland { animation: chip-geland .25s ease-out; }
}

/* De matrix met de lade ernaast (zie compositions.css). Breedte is het kleinste van: de
   paginabreedte en de viewportbreedte, allebei minus --matrix-aftrek (de main-marge, de
   lade en de gap — zie tokens.css) — zo vult de matrix de kolom die overblijft. De hoogte
   speelt bewust niet mee, zie .matrix hierboven. Geen percentages: .mcard is fit-content,
   daar is een percentage niet tegen op te lossen. */
@media (min-width: 900px) {
  .matrix { width: min(calc(var(--breedte) - var(--matrix-aftrek)), calc(100vw - var(--matrix-aftrek))); }
}

/* Lichtgrijze achtergrond om de niet-geplotte/niet-geplande wensen visueel te
   scheiden van de matrix/roadmap. Naast het bord (vanaf 900px) begint de lade op precies
   dezelfde hoogte als de matrix-kaart en de Now-kolom: geen marge erboven. Alleen in de
   gestapelde stand, waar de lade ónder het bord hangt, is die marge de tussenruimte —
   vandaar de max-width-regel hieronder (en niet een min-width-uitzondering: deze
   basisregel staat later in het bestand en zou daar overheen walsen). */
.matrix-zijbalk,
.roadmap-zijbalk { background: #f6f6f6; border-radius: 16px; padding: 20px; }
@media (max-width: 899px) {
  .matrix-zijbalk,
  .roadmap-zijbalk { margin-top: 28px; }
}
.matrix-zijbalk .bak-kop,
.roadmap-zijbalk .bak-kop { padding-top: 0; }

/* Roadmap */
.kolom { border: 1px solid #e6e6e6; border-radius: 18px; background: #fff; padding: 24px 24px 28px; min-height: 400px; display: flex; flex-direction: column; }
.kolom.doel { border-color: var(--org); background: var(--org-tint); }
.kolom .kolom-kop { display: flex; align-items: center; gap: 10px; }
.kolom .pin { width: 9px; height: 9px; border-radius: 50%; background: var(--org); flex: none; }
.kolom h2 { margin: 0; font-family: var(--kop-font); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; }
.kolom .uitleg { font-size: 14px; color: #6f6f6f; margin: 8px 0 22px; }
.kolom .kaarten { display: flex; flex-direction: column; gap: 12px; }
.kolom .postit { display: block; max-width: none; padding: 15px 18px; border-radius: 10px; font-size: 16px; box-shadow: 0 5px 12px -7px rgba(0,0,0,.25); }
/* Handmatig in een kolom gedropte kaart: komt nog even "opgetild" aan en zet zich neer */
@keyframes kaart-geland {
  from { transform: scale(1.05); box-shadow: 0 10px 22px -8px rgba(0,0,0,.35); }
  to   { transform: none; }
}
/* Automatisch vullen: kaarten landen één voor één op de roadmap. De vertraging per
   kaart zet animeerAutoVul() (roadmap.js); fill-mode both houdt de kaart tot die
   beurt onzichtbaar. Beide klassen verdwijnen vanzelf bij de volgende hertekening. */
@keyframes kaart-invliegen {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  70%  { opacity: 1; transform: translateY(2px) scale(1.01); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .kolom .postit.geland { animation: kaart-geland .25s ease-out; }
  .kolom .postit.auto-geplant { animation: kaart-invliegen .35s ease-out both; }
}

/* Gedeelde modal-chroom (dialog-omhulsel, sluitknop) — hergebruikt door intro,
   thema's en batch-import; elke modal zet zelf zijn breedte/hoogte. */
.modal { padding: 0; border: 1px solid var(--lijn-sterk); border-radius: 20px; background: #fff; color: var(--inkt); box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); }
.modal::backdrop { background: rgba(23,23,23,.42); }
.modal-binnen { position: relative; padding: 26px 30px 30px; }
.modal-sluit { position: absolute; top: 18px; right: 18px; }
/* Op- en afgaan van een modal: korte fade met een klein zetje omhoog, de backdrop vaagt mee.
   Bewust een transition en geen @keyframes zoals de rest van de animaties hier: bij close()
   (ook de Escape-toets, die het <dialog> zelf afhandelt) springt een dialog meteen op
   display:none, en alleen een transition kan dat uitstellen — vandaar dat display en overlay
   meelopen met allow-discrete. @starting-style is de begintoestand voor het openen; de
   dichte staat hierboven is meteen de eindtoestand van het sluiten.
   Kent een browser dit alles niet (@starting-style/allow-discrete zijn van 2023-2024), dan
   sneuvelt de hele transition-regel en verschijnt de modal gewoon meteen — precies zoals
   vóór deze animatie. */
@media (prefers-reduced-motion: no-preference) {
  .modal,
  .modal::backdrop { transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete, overlay .18s allow-discrete; }
  .modal { opacity: 0; transform: translateY(8px) scale(.985); }
  .modal[open] { opacity: 1; transform: none; }
  .modal::backdrop { opacity: 0; }
  .modal[open]::backdrop { opacity: 1; }
  @starting-style {
    .modal[open] { opacity: 0; transform: translateY(8px) scale(.985); }
    .modal[open]::backdrop { opacity: 0; }
  }
}

/* Introductiemodal (alleen bij een eerste bezoek) */
.intro { width: min(520px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 64px)); overflow: auto; touch-action: pan-y; }
/* De sluitknop staat hier (i.p.v. absoluut top-right zoals bij de andere modals) gewoon
   in de normale flow, boven de illustratie — anders overlapt hij de svg's daaronder. */
.intro .modal-sluit { position: static; display: flex; width: fit-content; margin: 0 0 14px auto; }
.intro-beeld { display: block; width: 100%; height: 168px; margin: 22px 0 22px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--org-tint); }
/* Stap-overgang: beeld/titel/tekst schuiven licht in vanuit de richting waar de
   volgende stap "vandaan komt" (rechts bij volgende, links bij vorige) — de klasse
   wordt door intro.js telkens verwijderd en opnieuw gezet (met een reflow ertussen
   om de animatie te herstarten), zie tekenIntro(). */
@keyframes intro-in-rechts { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes intro-in-links { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
.intro-inhoud.stap-rechts { animation: intro-in-rechts .22s ease-out; }
.intro-inhoud.stap-links { animation: intro-in-links .22s ease-out; }
.intro h2 { font-family: var(--kop-font); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.intro h2:focus-visible { box-shadow: var(--focus); }
.intro p { margin: 10px 0 0; font-size: 15.5px; color: var(--inkt-zacht); }
#intro-tekst { min-height: 6.4em; }
/* Drie kolommen: Vorige links, stippen gecentreerd, Volgende/Start rechts — zelfde
   grid-aanpak als de footer, zodat de stippen altijd echt in het midden staan. Kolommen
   staan hier bewust expliciet (i.p.v. op auto-plaatsing te vertrouwen zoals de footer):
   Vorige is op de eerste stap [hidden] en valt dan weg als grid-item, waardoor de
   auto-plaatsing anders de stippen en de Volgende-knop een kolom zou opschuiven. */
.intro-voet { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 26px; }
#intro-vorige { grid-column: 1; justify-self: start; }
/* Zonder deze regel wint .knop-stil's display:inline-flex van de UA-regel [hidden]{display:none}
   (gelijke specificiteit, auteur-CSS geladen na de UA-stylesheet) en blijft de knop zichtbaar. */
#intro-vorige[hidden] { display: none; }
#intro-volgende { grid-column: 3; justify-self: end; }
.stappen { grid-column: 2; justify-self: center; display: inline-flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
/* Zichtbare stip blijft 8px, maar de knop krijgt er via padding + negatieve marge
   een groter (onzichtbaar) klik-/tikgebied omheen, zonder de gap-afstand te verstoren.
   box-sizing:content-box hier bewust tegen de globale border-box-reset in: anders is
   de 6px padding (12px totaal) groter dan de 8px breedte/hoogte zelf, en knijpt de
   content-box (waar background-clip op leunt) dicht tot 0 — de stip wordt dan onzichtbaar. */
.stap-stip { box-sizing: content-box; width: 8px; height: 8px; padding: 6px; margin: -6px; border: none; border-radius: 50%; background-color: #e6e6e6; background-clip: content-box; cursor: pointer; }
.stap-stip:hover { background-color: #cfcfcf; }
.stap-stip:focus-visible { box-shadow: var(--focus); }
.stappen li.nu .stap-stip { background-color: var(--org); }

/* Thema's-modal */
.themas-modal { width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 64px)); overflow: auto; }
.themas-modal h2 { font-family: var(--kop-font); font-weight: 700; font-size: 24px; margin: 0 0 6px; letter-spacing: -0.02em; }
.themas-modal h3 { font-family: var(--kop-font); font-weight: 700; font-size: 15px; margin: 24px 0 10px; }
.themas-modal .uitleg2 { margin: 0; color: var(--inkt-zacht); font-size: 14.5px; }
.thema-toggle { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.thema-toggle input { width: 17px; height: 17px; }
#thema-lijst { list-style: none; margin: 0; padding: 0; }
.thema-rij { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--lijn); }
/* box-sizing:content-box hier bewust tegen de globale border-box-reset in: met
   border-box wordt deze stip (flex-item + rand) in Chromium soms uitgerekt tot
   een ovaal i.p.v. een cirkel — content-box voorkomt dat betrouwbaar. */
/* Kleur (incl. het neutrale "geen thema"-grijs) komt altijd via inline style vanuit
   JS (zie zetStipKleur() in themas.js) — nooit via een aparte .leeg-modifierklasse:
   een tweede, specifiekere regel matchend op dit element deed Chromium de hoogte
   fout berekenen (een ovaal i.p.v. een cirkel), ook als die regel dezelfde waarden zet. */
.thema-stip { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.08); }
.thema-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.thema-naam { font-weight: 600; font-size: 14.5px; }
/* Thema bewerken: de rij wordt een formuliertje (kleurkiezer + naam + opslaan), net als
   een wens bewerken in de tabel. */
.thema-rij.bewerken { flex-wrap: wrap; gap: 10px; }
.thema-rij.bewerken input[type="text"] { flex: 1 1 140px; min-width: 0; border: 1px solid var(--lijn-sterk); border-radius: 10px; padding: 9px 12px; background: #fff; font-size: 14.5px; }
.thema-rij.bewerken input[type="text"]:focus-visible { box-shadow: 0 0 0 1px var(--org), 0 0 0 4px rgba(255,162,19,.2); border-color: var(--org); }
.thema-kleuren.compact { margin: 0; gap: 6px; }
.thema-kleuren.compact .thema-kleur-optie,
.thema-kleuren.compact .thema-kleur-optie span { width: 22px; height: 22px; }
/* Thema-legenda: één regel met alle thema's (stip + naam), onder de matrix en
   onder de roadmap-kolommen. Alleen zichtbaar met thema's actief (zie themas.js). */
.thema-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.thema-legenda[hidden] { display: none; }
.thema-legenda-label { font-size: 14px; font-weight: 600; color: var(--inkt-vaag); }
.thema-legenda-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--inkt-zacht); }
.thema-legenda-item .thema-stip { width: 12px; height: 12px; }
/* Op het matrix-scherm staat de legenda los onder de matrix-kaart (niet erin), naast de
   knop naar de volgende stap — zie .matrix-hoofd in compositions.css.
   In de roadmap-grid: over de volle breedte, onder de drie kolommen. */
.roadmap .thema-legenda { grid-column: 1 / -1; }
.thema-kleuren { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.thema-kleur-optie { position: relative; display: inline-flex; width: 32px; height: 32px; }
.thema-kleur-optie input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.thema-kleur-optie span { display: block; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); pointer-events: none; }
.thema-kleur-optie input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--inkt); }
.thema-kleur-optie input:focus-visible + span { box-shadow: var(--focus); }
/* Naamveld en toevoeg-knop naast elkaar (onder de kleurkiezer) */
.thema-invoer-rij { display: flex; align-items: center; gap: 10px; }
#thema-toevoegen-form input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--lijn-sterk); border-radius: 10px; padding: 11px 14px; background: #fff; font-size: 14.5px; }
#thema-toevoegen-form input[type="text"]:focus-visible { box-shadow: 0 0 0 1px var(--org), 0 0 0 4px rgba(255,162,19,.2); border-color: var(--org); }
#thema-toevoegen-form .knop { min-height: 46px; flex: none; }
/* Sluitknop onderaan, naast het kruisje rechtsboven: na het beheren van thema's wil je
   de modal daar kunnen sluiten waar je klaar bent. */
.themas-voet { display: flex; justify-content: flex-end; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--lijn); }

/* Import-modal (lijst plakken of een bestand kiezen) */
.batch-import-modal { width: min(560px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 64px)); overflow: auto; }
.batch-import-modal h2 { font-family: var(--kop-font); font-weight: 700; font-size: 24px; margin: 0 0 6px; letter-spacing: -0.02em; }
/* Tabbladen in de modal: losse chip'jes, bewust een andere vormtaal dan de stappenbalk in
   de kop (.stap-tabs) — dit zijn twee manieren van importeren, geen stappen in een route. */
.import-tabs { display: flex; gap: 8px; margin: 16px 0 18px; }
.import-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 9px; background: #f4f4f4; font-weight: 600; color: #5c5c5c; cursor: pointer; transition: background .12s, color .12s; user-select: none; }
.import-tabs [role="tab"]:hover { color: var(--inkt); background: var(--org-tint); }
.import-tabs [role="tab"][aria-selected="true"], .import-tabs [role="tab"][aria-selected="true"]:hover { background: var(--org-tint); border-color: #ffe1b0; color: var(--inkt); }
.import-tabs [role="tab"] { padding: 7px 14px; font-size: 14px; }
.batch-import-modal [role="tabpanel"][hidden] { display: none; }
/* Bestand kiezen: het echte <input type="file"> is verborgen (sr-only), het <label>
   ervoor is de (neutrale) knop. De naam van het gekozen bestand komt ernaast; de
   oranje "Importeer wensen"-knop eronder blijft uit tot er iets gekozen is. */
.import-bestand-rij { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.bestand-knop { cursor: pointer; }
.bestand-knop:focus-within { box-shadow: var(--focus); }
.import-bestand-naam { min-width: 0; color: var(--inkt-zacht); font-size: 14px; overflow-wrap: anywhere; }
/* Bezig met importeren: tabbladen en panelen wijken voor een draaiend rondje + tekst,
   tot de modal sluit en de lijst zich vult (zie importeren.js). */
.batch-import-modal.bezig .import-tabs,
.batch-import-modal.bezig [role="tabpanel"] { display: none; }
.import-bezig { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 46px 20px 34px; text-align: center; }
.import-bezig[hidden] { display: none; }
.import-bezig p { margin: 0; color: var(--inkt-zacht); font-size: 15px; }
.import-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--org-tint); border-top-color: var(--org); }
@keyframes import-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .import-spinner { animation: import-draai .8s linear infinite; }
}
.batch-import-modal .uitleg2 { margin: 0 0 16px; color: var(--inkt-zacht); font-size: 14.5px; }
.batch-import-modal textarea { display: block; width: 100%; min-height: 220px; resize: vertical; border: 1px solid var(--lijn-sterk); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; background: #fff; font: inherit; font-size: 14.5px; }
.batch-import-modal textarea:focus-visible { box-shadow: 0 0 0 1px var(--org), 0 0 0 4px rgba(255,162,19,.2); border-color: var(--org); }

/* Export-modal: het einde van de route (knop onderaan Plan). Drie keuzes onder elkaar —
   ruimer dan het Exporteren-menu in de kop, met een regel uitleg per bestandssoort, want
   hier kies je bewust hoe je de sessie meeneemt. */
.export-modal { width: min(560px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 64px)); overflow: auto; }
.export-modal h2 { font-family: var(--kop-font); font-weight: 700; font-size: 24px; margin: 0 0 6px; letter-spacing: -0.02em; }
.export-modal .uitleg2 { margin: 0 0 20px; color: var(--inkt-zacht); font-size: 14.5px; }
.export-keuzes { display: flex; flex-direction: column; gap: 10px; }
.export-keuzes button { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 18px; border: 1px solid var(--lijn-sterk); border-radius: var(--radius); background: #fff; color: var(--inkt); text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
.export-keuzes button:hover { border-color: var(--org); background: var(--org-tint); }
.export-keuzes button svg { flex: none; margin-top: 2px; color: var(--inkt-vaag); }
.export-keuzes button:hover svg { color: var(--org-deep); }
.export-keuze-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.export-keuze-naam { font-weight: 700; font-size: 15px; }
.export-keuze-hint { font-size: 13px; color: var(--inkt-zacht); }

/* Alles-wissen-bevestiging: eerst de kans om te exporteren, dan pas de destructieve knop */
.wis-modal { width: min(480px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 64px)); overflow: auto; }
.wis-modal h2 { font-family: var(--kop-font); font-weight: 700; font-size: 24px; margin: 0 0 6px; letter-spacing: -0.02em; }
.wis-modal .uitleg2 { margin: 0 0 20px; color: var(--inkt-zacht); font-size: 14.5px; }
.wis-export-rij { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--lijn); margin-bottom: 20px; }
.wis-acties { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.knop.gevaar-knop { background: var(--gevaar); color: #fff; }
.knop.gevaar-knop:hover { background: #a52f22; box-shadow: 0 4px 16px -4px rgba(192,57,43,.45); }

/* Roadmap automatisch vullen-bevestiging: zelfde opzet/breedte als .wis-modal */
.auto-vul-modal { width: min(480px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 64px)); overflow: auto; }
/* Sluitknop in de normale flow (rechtsboven), zodat de kop eronder valt i.p.v. er
   gedeeltelijk achter — zelfde aanpak als de intro-modal. */
.auto-vul-modal .modal-sluit { position: static; display: flex; width: fit-content; margin: 0 0 14px auto; }
.auto-vul-modal h2 { font-family: var(--kop-font); font-weight: 700; font-size: 24px; margin: 0 0 6px; letter-spacing: -0.02em; }
.auto-vul-modal .uitleg2 { margin: 0 0 20px; color: var(--inkt-zacht); font-size: 14.5px; }

/* Sneltoetsen-modal (openen met '?') — zelfde opzet als de andere modals; de sluitknop
   in de flow zodat de kop eronder valt. */
.sneltoetsen-modal { width: min(520px, calc(100vw - 32px)); max-height: min(660px, calc(100vh - 64px)); overflow: auto; }
.sneltoetsen-modal .modal-sluit { position: static; display: flex; width: fit-content; margin: 0 0 14px auto; }
.sneltoetsen-modal h2 { font-family: var(--kop-font); font-weight: 700; font-size: 24px; margin: 0 0 6px; letter-spacing: -0.02em; }
.sneltoetsen-modal .uitleg2 { margin: 0 0 18px; color: var(--inkt-zacht); font-size: 14.5px; }
.sneltoetsen-lijst { margin: 0; }
/* Rij: toetsen links (vaste kolom), uitleg rechts. */
.sneltoets-rij { display: grid; grid-template-columns: 132px 1fr; gap: 8px 16px; align-items: center; padding: 11px 0; border-top: 1px solid var(--lijn); }
.sneltoets-toetsen { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; }
.sneltoets-rij dd { margin: 0; font-size: 14.5px; color: var(--inkt-zacht); }
.sneltoets-plus { color: var(--inkt-vaag); font-size: 12px; }
/* Toetsblokje */
.sneltoetsen-modal kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid var(--lijn-sterk); border-bottom-width: 2px; border-radius: 7px; background: #fafafa; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600; color: var(--inkt-zacht); }

/* Voettekst */
.voet-link { background: none; border: none; padding: 0; font-size: 14px; font-weight: 600; color: #6f6f6f; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.voet-link:hover { color: var(--org-deep); }
/* Merkregel in het midden van de voettekst: wordmark (zoals in de kop, maar kleiner)
   met het versienummer erachter, dat naar de changelog wijst. */
.voet-merk { display: flex; align-items: center; gap: 8px; margin: 0; }
/* Klein bloempje vóór het wordmark; pulseert één keer bij hover (zelfde beweging als het
   logo in de kop, zie logo-zoom). */
/* Geen flex-gap: die zou ook tussen "roadmappin" en ".net" ruimte zetten. De bloem krijgt
   daarom zelf een margin-right; "roadmappin" en ".net" blijven zo tegen elkaar aan. */
.voet-wordmark { display: inline-flex; align-items: center; font-family: var(--kop-font); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; color: var(--inkt); }
.voet-flower { width: 18px; height: 18px; display: block; margin-right: 6px; }
.voet-wordmark .net { color: var(--org-deep); }
.voet-wordmark:hover .net { color: var(--org); }
@media (prefers-reduced-motion: no-preference) {
  .voet-flower, .voet-wordmark .net { transition: transform .12s ease; }
  .voet-wordmark:hover .voet-flower, .voet-wordmark:focus-visible .voet-flower,
  .voet-wordmark:hover .net, .voet-wordmark:focus-visible .net { animation: logo-zoom .35s ease 1; }
}
.voet-versie { font-weight: 600; }
.voet-versie:hover { color: var(--org-deep); }
/* "Mijn data verwijderen" staat onder de USP's in de rechterkolom, met wat lucht ertussen. */
.voet-wissen { margin-top: 6px; }
.voet-maker { margin: 0; }
/* Standaard grijs (net als de rest van de voettekst), niet de oranje linkkleur — het is
   een ondertekening, geen actie. Pas bij hover kleurt hij mee. De onderstreping staat op
   de tekst-span, zodat het externe-link-icoontje erachter niet mee onderstreept wordt. */
.voet-maker a { display: inline-flex; align-items: center; gap: 4px; color: var(--inkt-vaag); }
.voet-maker a span { text-decoration: underline; text-underline-offset: 3px; }
.voet-maker a:hover { color: var(--org-deep); }
/* Externe-link-icoontje (opent roelgroeneveld.nl); erft de linkkleur via currentColor. */
.ext-icoon { flex: none; }