/* ==========================================================
   COMPOSITIONS — macrolay-out: kop, hoofdgebied, voettekst
   ========================================================== */
/* De kop is een grid van twee regels: bovenin het merk, de titel van de actieve weergave,
   de tabbalk en de knoppen van díe weergave; op de tweede regel de subtitel, onder de
   titel. De merk- en knoppenkolom hebben een vaste breedte (zie tokens.css) en de
   titelkolom slokt de rest op — daardoor staat de tabbalk in élke weergave op dezelfde
   plek, ongeacht hoe lang de titel is of hoeveel knoppen de weergave heeft.
   De titels, subtitels en knoppenrijen staan alle drie in de HTML; tabs.js toont er
   telkens één van elk (de verborgen exemplaren vallen als grid-item weg). */
header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: 24px; row-gap: 10px;
  max-width: var(--breedte); margin: 0 auto; padding: 26px 40px 30px;
}
/* Merk + titel vormen samen de linkerkolom. De twee 1fr-kolommen (links dit blok, rechts
   de knoppen) zijn even breed, waardoor de tabbalk ertussen precies in het midden van de
   pagina uitkomt — in elke weergave, hoe lang de titel ook is.
   align-items:center: de H1 staat verticaal gecentreerd t.o.v. de rij, en dus t.o.v. de
   tabbalk ernaast (die ook gecentreerd is). Het merk-blok (bloem + wordmark) is hoger dan
   de H1 en bepaalt de rijhoogte; daardoor blijft de tabbalk op zijn plek staan. */
.kop-merk-titel { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: var(--kop-gap); min-width: 0; }
/* Merk: groot icoon met het wordmark eronder. Gebruikt in de kop van index.html én van
   over.html/changelog.html. */
.merk { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: var(--merk-kolom); }
/* Alleen in de tool-kop (naast de H1): de translateY schuift het merk visueel omlaag zodat
   de BOVENKANT van de bloem uitkomt op de bovenkant van de gecentreerde H1 (het merk-blok
   is hoger, dus gecentreerd zou de bloem te hoog staan). Bewust een transform en geen
   marge: zo verandert de layout-hoogte niet en blijft de tabbalk staan waar hij stond. De
   afstand is grofweg (merkhoogte − H1-hoogte)/2, bijgesteld tot de bovenkant van de bloem
   gelijkstaat met de bovenkant van de LETTERS van de H1. Op over/changelog staat het merk
   niet in een .kop-merk-titel, dus daar geen verschuiving. */
.kop-merk-titel .merk { transform: translateY(20px); }
/* Wordmark zoals het op over.html/changelog.html staat: logo en tekst naast elkaar. */
.wordmark { display: flex; align-items: center; gap: 3px; }
.kop-titels { min-width: 0; }
header nav { grid-column: 2; grid-row: 1; }
.kop-acties { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* De subtitel staat op de tweede regel, met zijn linkerrand onder de H1 (dus voorbij de
   merk-kolom) — net als de Verzamel-lijst eronder. */
.kop-subs { grid-column: 1 / -1; grid-row: 2; padding-left: calc(var(--merk-kolom) + var(--kop-gap)); }
.view-titel[hidden], .view-sub[hidden], .kop-acties[hidden] { display: none; }

main { max-width: var(--breedte); margin: 0 auto; padding: 0 40px 12px; }
/* Verzamel is een lijst om te lezen, niet een bord om te overzien: smaller dan de matrix
   en de roadmap, en met de linkerrand precies onder de H1 (dus voorbij de merk-kolom).
   Die leesbreedte zit op de onderdelen zelf en niet op het paneel: zo loopt de knop naar de
   volgende stap eronder wél door tot de rechterrand van main, en lijnt hij uit met de
   Exporteren-knop in de kop (die staat via justify-self:end op diezelfde rand). */
#paneel-wensen { margin-left: calc(var(--merk-kolom) + var(--kop-gap)); }
#paneel-wensen > .toevoegen,
#paneel-wensen > #tabel-omhulsel,
#paneel-wensen > .leegstand { max-width: var(--breedte-verzamel); }
[role="tabpanel"] { position: relative; }
[role="tabpanel"][hidden] { display: none; }

/* Toevoeg-formulier: titel, beschrijving, (thema), knop naast elkaar */
.toevoegen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; gap: 14px; padding-bottom: 34px; }
.toevoegen[hidden] { display: none; }
.toevoegen.met-thema { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 180px) auto; }

/* Kop boven een bak ("Te prioriteren" / "Te plannen") */
.bak-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 34px 4px 16px; }

.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* De knop naar de volgende stap onder de wensenlijst. Verzamel is de eerste stap: geen
   "vorige", dus ook geen .stap-nav-rij zoals op Prioriteer en Plan. */
.volgende-rij { display: flex; justify-content: flex-end; margin-top: 44px; }
/* Stapnavigatie onder de matrix/roadmap: terug links, verder rechts. De "volgende"-knop
   staat rechts via margin-left en niet via space-between, want op Plan (de laatste stap)
   is er alleen een terug-knop — die hoort links te blijven staan. */
.stap-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.stap-nav .volgende-knop { margin-left: auto; }

/* Gestapelde (smalle) stand: matrix/roadmap boven, lade eronder. De lade staat in de HTML
   bewust vóór de matrix/roadmap (voor een logische tab-volgorde: lade → matrix/roadmap),
   dus zetten we hem hier met flex-order weer onderaan. Vanaf 900px neemt de grid-indeling
   hieronder het over (en zet de lade met order:1 links). */
.matrix-indeling,
.roadmap-indeling { display: flex; flex-direction: column; }
.matrix-zijbalk,
.roadmap-zijbalk { order: 2; }
/* .matrix-hoofd en .roadmap-hoofd (bord + legenda + stapnavigatie) zijn er alleen voor de
   brede stand hieronder; hier lossen die blokken op in losse flex-items van .matrix-indeling
   / .roadmap-indeling — display:contents laat de DOM-boom heel, maar maakt wél dat order
   over álle items kan gaan. Zo staat de stapnavigatie ónder de lade (order 3, na de lade op
   order 2): op een smal scherm scrol je eerst langs alles wat er nog te doen valt, en pas
   daarna kun je door. Het bord en de legenda houden hun plek (order 0, DOM-volgorde). */
.matrix-hoofd,
.roadmap-hoofd { display: contents; }
.matrix-hoofd > .thema-legenda { margin-top: 18px; padding: 0 4px; }
.matrix-hoofd > .stap-nav,
.roadmap-hoofd > .stap-nav { order: 3; margin-top: 26px; }

/* Matrix- en roadmapscherm: de lade met nog te plaatsen wensen staat standaard links van
   de matrix/roadmap (eerder alleen in volledig scherm). Onder deze breedte is daar geen
   ruimte voor en valt alles terug op één kolom: matrix/roadmap boven, lade eronder — dat
   is de opmaak zonder deze @media-regels. */
@media (min-width: 900px) {
  .matrix-indeling,
  .roadmap-indeling { display: grid; grid-template-columns: minmax(260px, var(--lade)) minmax(0, 1fr); align-items: start; gap: 24px; }
  /* De marge boven de lade hoort bij de gestapelde stand (zie blocks.css); hier begint
     hij gelijk met de matrix-kaart en de Now-kolom. */
  .matrix-zijbalk,
  .roadmap-zijbalk { order: 1; }
  /* .mcard blijft fit-content (zie blocks.css) zodat de rand om de matrix blijft sluiten,
     ook wanneer de hoogte en niet de breedte de beperkende factor is. */
  .mcard { margin: 0; }
  /* Hier zijn de twee blokken wél een blok: het bord bovenaan, daaronder de legenda en als
     laatste de stapnavigatie — de rechterkolom van het raster, naast de lade. */
  .matrix-hoofd,
  .roadmap-hoofd { order: 2; display: block; }
  .matrix-hoofd > .thema-legenda { margin-top: 12px; }
  .matrix-hoofd > .stap-nav,
  .roadmap-hoofd > .stap-nav { margin-top: 22px; }
  /* Wensen als lijst (één per regel) i.p.v. de horizontaal wikkelende bak-weergave. */
  .matrix-zijbalk .bak,
  .roadmap-zijbalk .bak { flex-direction: column; align-items: stretch; }
  .matrix-zijbalk .bak .postit,
  .roadmap-zijbalk .bak .postit { max-width: none; }
  /* De zijbalk is smal: de acties ("Roadmap automatisch vullen" / "Planning resetten" /
     "Matrix resetten") passen niet meer naast de kop en komen eronder. */
  .matrix-zijbalk .bak-kop,
  .roadmap-zijbalk .bak-kop { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Drie kolommen: USP's links, versienummer gecentreerd in het midden, links rechts —
   CSS grid i.p.v. flex + space-between, zodat het versienummer altijd echt gecentreerd
   staat ongeacht hoe breed de linker/rechter kolom toevallig is.
   De marge boven de scheidingslijn is ruim: de voettekst hoort duidelijk ná de pagina te
   komen, niet als laatste regel van de inhoud te lezen. */
footer { max-width: var(--breedte); margin: 48px auto 0; padding: 24px 40px 44px; border-top: 1px solid var(--lijn); display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px 24px; font-size: 14px; color: var(--inkt-vaag); }
/* Links de taalkeuze, de links en het wissen van je data; in het midden het merk + versie
   + maker; rechts waar roadmappin.net voor staat. De kolommen staan expliciet in het grid,
   want op over.html/changelog.html staan ze in een andere volgorde in de HTML (die pagina's
   hebben geen taalkeuze en geen wis-knop). */
/* grid-row staat er expliciet bij: op over.html/changelog.html staan de USP's als eerste
   in de HTML, en zonder vaste rij zou de auto-plaatsing elke kolom een eigen rij geven
   (trapsgewijs) i.p.v. ze naast elkaar te zetten. */
.voet-kolom-links,
footer > .voet-links { grid-column: 1; grid-row: 1; justify-self: start; }
.voet-kolom-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
.voet-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.voet-midden { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-self: center; gap: 5px; text-align: center; }
.voet-usps { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 8px; text-align: right; }
.voet-usp { display: inline-flex; align-items: center; gap: 7px; }