/* Remora-schil.
 *
 * DE STIJL IS HET EINDDESIGN VAN 1 OKTOBER 2026 (ontwerp-gauntlet/eind/STIJL.md):
 * rust en warmte. Warme, zachte vlakken, een rustig tempo, en per scherm
 * precies EEN knop met een gekleurd vlak.
 *
 * LETTERTYPES VAN ONZE EIGEN SERVER. Hier stond tot die dag dat lettertypen
 * bewust van het systeem kwamen, zodat de klant niets hoefde te downloaden
 * voordat hij iets zag. Dat is met `font-display:swap` nog steeds zo: de tekst
 * staat er meteen in het systeemlettertype en wisselt zodra het bestand binnen
 * is. Geen Google Fonts-link -- een bezoeker hoort niet ongevraagd bij Google
 * langs te gaan, en de site (remora-fotoboek.nl) doet het om dezelfde reden zo.
 * De bestanden zijn variabel. Cormorant Garamond staat hier op 400 tot 700 en
 * niet op de 400 tot 600 waarmee de site hem aangeeft: gemeten op 1 oktober 2026
 * tekent het bestand 700 gewoon (de as loopt zo ver), en STIJL.md zet de koppen
 * op 700. Met "400 600" bleef een kop van 700 op 600 steken.
 *
 * De paden zijn RELATIEF aan dit bestand (fonts/...): op de server is dat
 * /static/fonts/, en in een los proefbestand (tools/scherm_proef.py) blijft het
 * dan ook werken.
 */
@font-face{font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url(fonts/cormorant-garamond.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond'; font-style:italic; font-weight:400;
  font-display:swap; src:url(fonts/cormorant-garamond-italic.woff2) format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url(fonts/inter.woff2) format('woff2');}

:root{
  --grond:#FAFAF8;
  --papier:#FFFFFF;
  --inkt:#2C3E4F;
  --inkt-zacht:#51616F;
/* DRIE TINTEN GRIJSBLAUW, EN ALLE DRIE LEESBAAR. Tot 10 september 2026 stond
   --inkt-vaag op #8A97A3: 2,86:1 op de achtergrond, terwijl 4,5 de norm is. Hij
   droeg juist de lege toestanden ("Dit hoofdstuk is leeg") en de hoofdstuknaam
   onder elke bladzijde op 10px -- voor een moe, vaak ouder publiek onleesbaar.
   Een merkbeoordeling tegen brandbook v1.2 vond het; het brandbook zegt over
   Mist Blue letterlijk: "haalt geen 4,5:1 op wit en is dus alleen geschikt voor
   grote, niet-kritische elementen, nooit voor bodytekst."
   --inkt-zacht is nu Slate Blue uit het brandbook (6,11:1). --inkt-vaag is een
   lichtere stap op dezelfde lijn (4,81:1) -- niet Mist Blue zelf, want die
   haalt de norm niet, en niet gelijk aan --inkt-zacht, want dan is het verschil
   tussen "zacht" en "vaag" weg en daarmee de hiërarchie. */
  --inkt-vaag:#61717F;
  --petrol:#4C6E91;
  --petrol-diep:#3A5674;
  --petrol-vlak:#EDF2F7;
  --terra:#AA5E33;
  --terra-vlak:#FFEEE7;
  --lijn:#E2E6EA;
  --lijn-sterk:#CBD5E1;
  --goed:#3F7A5E;
  --fout:#A3402F;

  /* DE ROLLEN UIT STIJL.md paragraaf 2, erbij gekomen op 1 oktober 2026. De
     namen hierboven blijven bestaan (de editor-stylesheets leunen erop);
     nieuwe regels gebruiken de rolnamen hieronder.
     - warm vlak: Warm Peach, het ene zachte vlak per scherm, en de actieve tab.
     - hoofdactie: Terracotta Interactief. ALLEEN op de ene hoofdknop per scherm
       en op de gevulde ster; nooit als tekstkleur of als ander vlak. */
  --warm-vlak:#FFEEE7;
  --warme-lijn:#F3DED4;
  --rust-vlak:#D1E8DC;
  --hoofdactie:#AA5E33;
  --hoofdactie-diep:#934F2A;

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:Inter,-apple-system,'Segoe UI',sans-serif;

  /* Schaduw alleen op wat ZWEEFT (melding, dialoog, selectiebalk). Kaarten
     liggen plat met een lijn van 1px. */
  --schaduw:0 8px 30px rgba(44,62,79,.14);
  --rond:16px;          /* kaart en vlak */
  --rond-knop:12px;     /* knop en veld */
  --rond-tegel:14px;    /* fototegel */
  --overgang:background .18s, border-color .18s, color .18s;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--grond); color:var(--inkt);
  font:400 15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* GELIJK AAN DE LANDINGSPAGINA, in maat en in scherpte. Opdrachtgever,
   1 oktober 2026: "De studio in zijn geheel lijkt minder scherp dan de
   landingspagina." Vier gemeten verschillen, alle vier hier of hieronder
   rechtgezet: (1) de landingspagina tekent tekst met
   `-webkit-font-smoothing:antialiased`, de studio niet -- letters stonden
   daardoor dikker en waziger; (2) hier stond een dag `html{zoom:.9}`: dat gaf
   tekst van 15,3px en lijnen van 0,9px, en halve pixels worden zacht getekend;
   (3) schreefkoppen stonden op gewicht 700, de landingspagina op 500;
   (4) lopende tekst 17px tegen 14-15px. De maten zijn nu HELE pixels:
   15 / 14 / 17 (kaartkop), knoppen 44px hoog. Geen `zoom` terugzetten. */
.binnen{max-width:1120px; margin:0 auto; padding:0 32px;}
main.binnen{padding-top:40px; padding-bottom:96px;}
@media (max-width:700px){
  .binnen{padding:0 16px;}
  main.binnen{padding-top:16px; padding-bottom:80px;}
}

h1{
  font-family:var(--serif); font-weight:500;
  font-size:44px; line-height:1.15; letter-spacing:.01em;
  margin:0 0 12px; text-wrap:balance;
}
@media (max-width:700px){ h1{font-size:36px;} }

/* DE KOPPEN ONDER DE h1, EN WAAROM `h2` GEEN SECTIEKOP IS.
 *
 * STIJL.md kent twee soorten: de sectiekop (Cormorant 30px) en de kaartkop
 * (Inter 19px, gewicht 600). In de sjablonen staat bijna elke `<h2>` IN een
 * kaart -- het is dus een kaartkop. Zou `h2` de sectiekop worden, dan krijgt
 * elke kaart in de studio in een klap een schreefkop van 30px.
 *
 * Daarom: `h2` en `h3` zijn standaard de KAARTKOP, en de sectiekop is een
 * klasse: `class="sectiekop"`. Een scherm dat een sectiekop wil, zegt dat zelf.
 */
h2,h3{font-family:var(--sans); font-size:17px; line-height:1.4; font-weight:600;
  margin:0 0 8px;}
.sectiekop{font-family:var(--serif); font-size:30px; line-height:1.2;
  font-weight:500; letter-spacing:.01em; margin:0 0 12px;}
p{margin:0 0 16px;}
a{color:var(--petrol);}
a:hover{color:var(--petrol-diep);}
/* De intro onder de h1. */
.lead{font-size:17px; line-height:1.5; color:var(--inkt-zacht); max-width:62ch;}
@media (max-width:700px){ .lead{font-size:15px;} }

/* ---------------------------------------------------- kopbalk
 * STIJL.md paragraaf 4. Het logo van remora-fotoboek.nl (icoon plus het woord
 * Remora), de vijf tabs als zachte pillen met de actieve in Warm Peach, en
 * Uitloggen als tekstknop rechts.
 *
 * DE KLASSEN HETEN ZOALS ZE HEETTEN (.balk, .merk, .tabs, form.uit) en niet
 * zoals in het ontwerpbestand (.kop, .kop-merk, .uit-vorm): `.kop` is in deze
 * stylesheet al de titelregel van een hoofdstuk, en twee dingen die `.kop`
 * heten is de naamsbotsing die hier eerder een plakkende voortgangsbalk gaf.
 *
 * Het flex-kind rechts is het FORMULIER (form.uit), niet de knop: daarom staan
 * `margin-left:auto` en `order` op het formulier.
 */
.balk{
  background:var(--papier); border-bottom:1px solid var(--warme-lijn);
  position:sticky; top:0; z-index:30;
  padding-top:env(safe-area-inset-top);
}
.balk .binnen{display:flex; align-items:center; gap:28px; min-height:76px;}
.merk{
  display:flex; align-items:center; gap:10px; min-height:44px; flex:none;
  text-decoration:none; color:var(--inkt);
}
.merk img{width:46px; height:46px; display:block;}
.merk span{font-family:var(--serif); font-weight:400; font-size:29px;
  letter-spacing:.02em; color:var(--inkt); line-height:1;}
.tabs{display:flex; gap:4px; flex:1 1 auto; flex-wrap:wrap;}
.tabs a{
  display:flex; align-items:center; min-height:44px; padding:8px 16px;
  border-radius:999px; text-decoration:none; white-space:nowrap;
  color:var(--inkt-zacht); font-size:14px; font-weight:500;
  transition:background .18s, color .18s;
}
.tabs a:hover{background:var(--petrol-vlak); color:var(--inkt);}
.tabs a.aan,.tabs a[aria-current=page]{background:var(--warm-vlak);
  color:var(--inkt); font-weight:600;}
/* Lange en korte vorm van een tablabel. De korte staat er apart in in plaats
   van met CSS af te knippen, zodat er nooit een half woord staat. */
.tabs .kort{display:none;}
/* Uitloggen is een formulier (POST): een prefetcher die een link volgde, logde
   de klant anders uit. Het ziet eruit als een tekstknop. */
form.uit{margin:0 0 0 auto; flex:none;}
form.uit button{
  background:none; border:none; border-radius:0; color:var(--inkt-zacht);
  font-size:14px; font-weight:400; padding:10px 4px; min-height:44px;
}
form.uit button:hover{background:none; color:var(--inkt); text-decoration:underline;}

/* OP EEN SMAL SCHERM: het logo en Uitloggen op een regel, de tabs eronder, met
   de korte labels. De tabs WIKKELEN en schuiven niet: gemeten op een iPhone
   stond "Fotoboek maken" -- de volgende stap -- anders buiten beeld, met niets
   dat verraadde dat hij bestond. */
@media (max-width:700px){
  .balk .binnen{padding:12px 16px 10px; flex-wrap:wrap; gap:8px 12px; min-height:0;}
  .merk img{width:36px; height:36px;}
  .merk span{font-size:24px;}
  form.uit{order:2; margin-left:auto;}
  .tabs{order:3; flex-basis:100%; gap:4px;}
  .tabs a{padding:8px 14px;}
  .tabs .lang{display:none;}
  .tabs .kort{display:inline;}
}

/* ---------------------------------------------------- schermen zonder tabs
 * Inloggen, wachtwoord kiezen of vergeten, bewaren, wachten en de foutpagina.
 * Geen kopbalk (er valt nog nergens heen te gaan), dus het logo staat los
 * boven de kaart. De kaart ligt plat, zoals elke kaart.
 */
.merk-los{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:6vh 0 24px;
}
.merk-los img{width:46px; height:46px; display:block;}
.merk-los span{font-family:var(--serif); font-weight:400; font-size:29px;
  letter-spacing:.02em; color:var(--inkt); line-height:1;}
.inlogvak{
  max-width:440px; margin:0 auto; background:var(--papier);
  border:1px solid var(--lijn); border-radius:var(--rond); padding:32px;
}
.inlogvak h1{font-size:36px; text-align:center; margin-bottom:12px;}
.inlogvak .lead{font-size:15px; line-height:1.6; text-align:center; margin-bottom:24px;}
.inlogvak form label{margin-top:16px;}
.inlogvak form button{margin-top:24px; width:100%;}
.inlogvak .knop,.inlogvak .knop-hoofd{display:flex; width:100%;}
.inlogvak .fout{margin:16px 0 0;}
.inlogvak form .klein{margin:8px 0 0;}
/* Een losse toelichting in het vak staat in het midden, zoals de kop en de
   intro. Op het bewaarscherm stond hij links onder een gecentreerde kop
   (eindronde, blok E). Een hint ONDER EEN VELD (in het formulier) blijft links. */
.inlogvak > .klein{text-align:center;}
@media (max-width:700px){
  .merk-los{margin:16px 0 16px;}
  .merk-los img{width:36px; height:36px;}
  .merk-los span{font-size:24px;}
  .inlogvak{padding:24px 18px;}
}

/* ---------------------------------------------------- PhotoSync-gegevens
   Twee kolommen: wat PhotoSync vraagt, en wat je invult. Op een telefoon onder
   elkaar -- daar tikt de klant het over, en een smalle tweede kolom breekt een
   app-wachtwoord middenin af. */
.photosync{display:grid; grid-template-columns:max-content 1fr; gap:12px 24px;
  margin:0 0 16px; align-items:baseline;}
.photosync dt{font-size:14px; font-weight:500; color:var(--inkt-zacht);}
.photosync dd{margin:0; min-width:0; overflow-wrap:anywhere;}
.photosync code{font-family:var(--sans); font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums; background:var(--petrol-vlak);
  padding:3px 8px; border-radius:8px;}
.photosync .appww{font-size:17px; letter-spacing:.04em; user-select:all;}
/* De kopieerknop naast een gegeven: klein en vlak, nooit de hoofdknop van het
   scherm. Binnen .photosync, zodat hij geen andere knop raakt. */
.photosync .kopieer{min-height:0; padding:4px 12px; margin-left:8px; font-size:13px;
  font-weight:500; vertical-align:baseline; background:transparent; color:var(--inkt-zacht);
  border:1px solid currentColor; border-radius:999px; cursor:pointer;}
.photosync .kopieer[data-stand="ok"]{color:var(--inkt);}
@media (max-width:520px){.photosync{grid-template-columns:1fr; gap:4px 0;} .photosync dd{margin-bottom:8px;}}

/* ---------------------------------------------------- velden en labels
 * STIJL.md paragraaf 7: 48px hoog, Inter 17px, rand 1.5px, radius 12px, wit.
 * Het label staat erboven (16px, gewicht 500, inkt).
 */
label{display:block; font-size:14px; font-weight:500; color:var(--inkt);
  margin-bottom:8px;}
/* `input:not([type])` hoort erbij: een <input> zonder type IS een tekstveld, en
   de adresvelden op het bestelscherm zijn zo geschreven. */
input:not([type]),input[type=password],input[type=text],input[type=email],
input[type=date],input[type=number],input[type=tel],select,textarea{
  font:inherit; font-size:15px; color:var(--inkt); background:var(--papier);
  border:1.5px solid var(--lijn-sterk); border-radius:var(--rond-knop);
  padding:12px 14px; min-height:44px;
  transition:border-color .18s;
}
input:not([type]),input[type=password],input[type=text],input[type=email]{width:100%;}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid var(--petrol); outline-offset:3px;
}

/* ---------------------------------------------------- knoppen
 * STIJL.md paragraaf 5. EEN TERRACOTTA HOOFDKNOP PER SCHERM, de rest "gewoon".
 *
 *   gewoon   elke <button> zonder meer, `.knop` en `.knop-vlak`:
 *            wit, omlijnd, inkt-tekst. Alles wat ook mag.
 *   hoofd    `.knop-hoofd`: het terracotta vlak. De handeling waarvoor de klant
 *            op dit scherm is. Een sjabloon zet er per toestand hoogstens EEN.
 *   tekst    `.tekstknop`: geen vlak, petrol, onderstreept bij hover.
 *            (`.tekstlink` is de variant die midden in een zin staat.)
 *
 * WAT ER VERANDERDE EN WAAR JE OP MOET LETTEN. Tot 1 oktober 2026 was de kale
 * `button` de HOOFDknop: vol petrol, over de volle breedte, met 16px marge
 * erboven. Elke andere knop in deze stylesheet zette dat stuk voor stuk terug
 * (`width:auto; margin:0`). Nu is het omgekeerd: de kale knop is de rustige, en
 * alleen wie `.knop-hoofd` draagt krijgt kleur. `.knop` was de petrol
 * linkknop en is nu ook "gewoon" -- een scherm met drie `.knop`'s had anders
 * drie hoofdknoppen.
 *
 * GEEN `min-height` OP DE KALE `button`. Met 12px padding en een regel van
 * 17px/1.6 is hij vanzelf 54px hoog. Een min-height zou ook de kleine ronde
 * knoppen op een fototegel (44px, 22px) oprekken, en die zetten alleen `height`.
 */
button,.knop,.knop-vlak,.knop-hoofd{
  font:inherit; font-size:15px; font-weight:600; line-height:1.4; cursor:pointer;
  margin:0; width:auto; padding:12px 22px;
  border:1.5px solid var(--lijn-sterk); border-radius:var(--rond-knop);
  background:var(--papier); color:var(--inkt);
  transition:var(--overgang);
}
.knop,.knop-vlak,.knop-hoofd{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; text-decoration:none; text-align:center;
}
button:hover:not(:disabled),.knop:hover,.knop-vlak:hover:not(:disabled){
  border-color:var(--petrol); background:var(--petrol-vlak); color:var(--inkt);
}
.knop-hoofd,.knop.knop-hoofd{background:var(--hoofdactie);
  border-color:var(--hoofdactie); color:#fff;}
.knop-hoofd:hover:not(:disabled),.knop.knop-hoofd:hover:not(:disabled){
  background:var(--hoofdactie-diep); border-color:var(--hoofdactie-diep); color:#fff;}
/* Uitgeschakeld en toch leesbaar: zo'n knop staat er vaak juist OM te laten
   zien dat iets kan of terug te draaien is. Wegdoezelen tot hij niet meer te
   lezen is haalt precies die belofte weg. */
button:disabled,.knop-vlak:disabled,.knop-hoofd:disabled{
  color:var(--inkt-vaag); border-color:var(--lijn); background:var(--grond);
  cursor:default;
}
.tekstknop{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 4px;
  background:none; border:none; border-radius:0; color:var(--petrol);
  font-size:14px; font-weight:400; text-decoration:none; cursor:pointer;
}
.tekstknop:hover,.tekstknop:hover:not(:disabled){background:none;
  color:var(--petrol-diep); text-decoration:underline;}

.kop{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
/* `.springer` (de rij hoofdstukpillen) had hier een kale regel voor twee
   schermen. Sinds de ombouw draagt elk scherm zijn eigen opmaak:
   `.springer-rij .springer` (een hoofdstuk, blok B) en `.sel-stand .springer`
   (Fotoselectie, blok C). */


/* DE WARM PEACH-KAART: een vaste aanwijzing in de pagina, in gewone taal. Een
   VLAK met een zachte rand rondom -- tot 1 oktober 2026 had hij een terracotta
   linkerrand, en terracotta hoort alleen nog op de hoofdknop en de ster. */
.notitie{
  background:var(--warm-vlak); border:1px solid var(--warme-lijn);
  padding:24px 28px; border-radius:var(--rond); max-width:66ch;
}
@media (max-width:700px){ .notitie{padding:18px;} }
.notitie > :last-child{margin-bottom:0;}
.notitie .knoprij{margin-top:16px;}
/* DE KOP VAN EEN NOTITIE IS EEN EIGEN KLASSE, GEEN ELEMENTREGEL.
   Hier stond `.notitie b{display:block}`, en die gold voor ELKE vetgedrukte
   term in zo'n blok -- ook voor eentje midden in een zin. Op het scherm
   "Begin hier" brak dat de zin doormidden: `<b>Te beoordelen</b>` sprong naar
   een eigen regel, met de rest van de zin eronder. Gemeld op 2 september 2026.
   Vet is een nadruk binnen een zin; een kop is iets anders en zegt dat nu
   zelf. `tests/test_verborgen.py` bewaakt dat er geen elementregel terugkomt
   die een inline-element blok maakt. */
.notitie-kop{display:block; font-size:17px; line-height:1.4; font-weight:600; margin-bottom:8px;}

/* EEN LEGE TOESTAND IN EEN ZIN ("Dit hoofdstuk is leeg."). Alleen op een
   ALINEA: hier stond een kale `.leeg`, en die gaf ook elk leeg kader en elke
   lege bladzijde in de editor (`class="kader leeg"`) 40px lucht boven en onder,
   die de editor-stylesheets dan weer moesten wegpoetsen. */
p.leeg{color:var(--inkt-zacht); padding:40px 0;}
.fout{color:var(--fout); font-size:14px;}

/* Zichtbaar voor schermlezers, niet in beeld. */
.vsr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* DE MELDING (#melding, aria-live) zweeft onderin: Warm Peach met inkt-tekst.
   Een fout krijgt een linkerrand in de foutkleur, iets dat gelukt is Mint Green.
   schil.js zet de soort als klasse: `slecht` of `goed`. */
.melding{
  /* `--bedienbalk` is de gemeten hoogte van de bedienbalk van de
     fotoboekeditor (`uitsnede.js`, functie `ruimteOnder`); op elk ander scherm
     is hij 0. Zonder die term ligt de melding OVER de balk -- zie de uitleg
     daar. De terugval `0px` moet een LENGTE zijn en geen 0: `calc()` met een
     kaal getal erin is ongeldig en dan valt de hele regel weg. */
  position:fixed; left:50%;
  bottom:calc(16px + var(--bedienbalk, 0px) + env(safe-area-inset-bottom));
  transform:translateX(-50%); width:min(560px,calc(100% - 32px));
  background:var(--warm-vlak); color:var(--inkt);
  border:1px solid var(--warme-lijn); border-radius:14px; padding:16px 20px;
  font-size:15px; box-shadow:var(--schaduw); z-index:50;
}
.melding[hidden]{display:none;}
.melding.slecht{border-left:4px solid var(--fout);}
.melding.goed{background:var(--rust-vlak); border-color:var(--rust-vlak);
  border-left:4px solid var(--goed);}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}


/* ---------------------------------------------------- de kiezer
 * Op een telefoon een blad dat van onderen opkomt; op een breed scherm een
 * venster in het midden. Zelfde HTML. STIJL.md paragraaf 9: wit, radius 16px,
 * de kop in Cormorant, sluiten als ronde icoonknop, rijen van 56px.
 */
.kiezer{
  border:none; padding:0; background:var(--papier); color:var(--inkt);
  border-radius:var(--rond); box-shadow:var(--schaduw);
  width:min(460px,calc(100% - 32px)); max-height:80vh;
}
.kiezer::backdrop{background:rgba(44,62,79,.45);}
.kiezer-kop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:24px 24px 12px; margin:0;
}
.kiezer-kop h2{margin:0; font-family:var(--serif); font-size:30px;
  line-height:1.2; font-weight:700;}
/* De sluitknop: een icoonknop van 44x44. */
.kiezer-kop button{
  flex:none; width:44px; height:44px; margin:0; padding:0; border-radius:50%;
  background:var(--papier); border:1px solid var(--lijn); color:var(--petrol);
  font-size:24px; font-weight:400; line-height:1;
}
.kiezer-kop button:hover{background:var(--warm-vlak); border-color:var(--warme-lijn);
  color:var(--petrol-diep);}
.kiezer-lijst{padding:0 12px 16px; overflow-y:auto; max-height:60vh;
  overscroll-behavior:contain;}
.kiezer-lijst button{
  width:100%; margin:0; padding:12px; border:none; border-radius:var(--rond-knop);
  background:none; color:var(--inkt); text-align:left; font-size:15px;
  font-weight:500;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  min-height:56px;                       /* aanraakvlak, niet kleiner */
}
.kiezer-lijst button:hover{background:var(--warm-vlak);}
.kiezer-aantal{
  font-size:14px; font-weight:400; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .kiezer{
    width:100%; max-width:100%; margin:auto auto 0;
    border-radius:var(--rond) var(--rond) 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .kiezer-kop{padding:20px 16px 8px;}
  .kiezer-kop h2{font-size:26px;}
  .kiezer-lijst{max-height:56vh; padding:0 8px 12px;}
}


/* ---------------------------------------------------- kaarten, boek, limiet */
.kaart{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:24px 28px; margin:24px 0; max-width:66ch;
}
.kaart h2{margin-bottom:12px;}
.kaart > :last-child{margin-bottom:0;}
@media (max-width:700px){ .kaart{padding:18px;} }
/* "Klein" is 16px: nooit kleiner (STIJL.md paragraaf 1). */
.klein{font-size:14px; line-height:1.5; color:var(--inkt-zacht);}
/* Een waarschuwing is inkt en iets zwaarder, geen terracotta: dat is de kleur
   van de hoofdknop en mag geen tekst zijn. */
.klein.waarschuwing{color:var(--inkt); font-weight:500; margin-bottom:0;}
.limiet{border-color:var(--lijn-sterk);}

/* `.knop`, `.knop-vlak` en `.knop-hoofd` staan bovenaan bij de knoppen. `.knop`
   was hier de petrol linkknop en `.knop-vlak` de kleine omlijnde; sinds
   1 oktober 2026 zijn ze allebei de "gewone" knop, en draagt alleen
   `.knop-hoofd` kleur. */

/* ================================================================
 * Verwerkt uit de UX-review van 28 augustus 2026.
 * Elk blok hieronder repareert een gemeten probleem.
 * ================================================================ */



.melding-inline{
  background:var(--petrol-vlak); border-radius:var(--rond-knop); padding:14px 16px;
  font-size:14px; line-height:1.5; color:var(--inkt); margin-bottom:16px;
}










/* `button` is verderop op width:100% gezet voor het inlogformulier. Twee
 * knoppen naast elkaar worden dan twee volle regels boven elkaar, met de
 * afwijzing even zwaar als de bevestiging. Hier dus auto -- en op een smal
 * scherm mogen ze alsnog onder elkaar, want "Nee, het is een andere datum"
 * past niet naast een tweede knop op 375 px. */
.knoprij{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px;}
.knoprij button{width:auto; margin-top:0; min-height:44px;}
@media (max-width:430px){
  .knoprij{flex-direction:column; align-items:stretch;}
  .knoprij button,.knoprij .knop,.knoprij .knop-hoofd{width:100%;}
}

/* De afwijzing is geen tweede hoofdknop. Hij moet wel evengoed te vinden en
 * aan te tikken zijn -- een klant met een verkeerde datum die hem niet ziet,
 * bevestigt de verkeerde. Vandaar een echte rand en dezelfde hoogte. */
.knop.kaal{background:var(--papier); color:var(--inkt);}

.veldlabel{display:block; font-size:14px; font-weight:500;
  color:var(--inkt); margin-bottom:8px;}
.datumvraag input[type=date]{max-width:100%;}
.datumvraag .fout{color:var(--fout); font-size:14px; margin-bottom:0;}


/* Een knop die eruitziet als een link. Semantisch een knop, want hij doet iets
 * in plaats van ergens heen te gaan; visueel een link, want hij staat midden in
 * een zin. `button` staat verderop op width:100% voor het inlogformulier -- dat
 * moet hier dus terug naar inline, anders breekt de zin doormidden. */
.tekstlink{
  display:inline; width:auto; margin:0; padding:0; min-height:0;
  background:none; border:none; border-radius:0;
  color:var(--petrol); font:inherit; text-decoration:underline; cursor:pointer;
}
.tekstlink:hover{background:none; color:var(--petrol-diep);}


/* Een kaart die er bewust niet uitziet als de volgende stap: "opnieuw
 * samenstellen" kost geld en gooit werk weg. Rustiger dan de gewone kaart. */
.kaart-stil { background: var(--grond); box-shadow: none; }


/* DE FOUTKAART: Warm Peach met een linkerrand in de foutkleur. Gedeeld door
   Fotoselectie (het samenstellen of publiceren lukte niet) en het bestelscherm.
   De regels van het bestelscherm zelf staan onderaan, in "BLOK E". */
.kaart-fout{
  border-color:var(--warme-lijn); border-left:4px solid var(--fout);
  background:var(--warm-vlak);
}
.kaart-fout p{margin:0;}


/* De voorvertoning van de kaft. Dezelfde verhoudingen als druk.html (het
   fotovlak uit app/boek/omslag.fotovlak, de band eronder), zodat wat hier staat
   ook is wat er gedrukt wordt. Klein gehouden: het is een controle, geen
   pronkstuk. De vier percentages op foto en vlak komen uit dezelfde berekening
   als in de druk.

   GEEN KLEUR HIER. Achtergrond en tekstkleur staan INLINE op het element, want
   de klant kiest de kaftkleur en de tekstkleur volgt daar met een contrastsom
   uit (app/boek/kleuren.py). Wat hieronder staat is alleen een grond voor het
   geval er nog geen kaft berekend is -- zodra `omslag_proef` er is, wint de
   inline stijl.

   DE TEKST STAAT OP SCHAAL, in `cqw` en niet in pixels. Dat is een reparatie
   van 10 september 2026: de achterkant droeg 13,5 px in een vak van hooguit
   260 px en op het kaftscherm zelfs smaller, terwijl de druk 6,4 mm in 182 mm
   zet. De voorvertoning hield daarmee ongeveer een derde van wat er werkelijk
   op de achterkant past, knipte de rest weg, en veranderde ook nog mee met de
   vensterbreedte -- dus een klant met een gedicht van tien regels zag het
   afgekapt terwijl het gewoon paste. 1cqw is 1% van de breedte van de
   voorvertoning. Dit element heeft zelf geen padding, dus zijn content-box IS
   de pagina: elke maat hieronder is de MILLIMETER uit druk.html gedeeld door
   210 (de paginabreedte van het product waarop die maten gemeten zijn) maal
   honderd. Op de ACHTERKANT ligt dat anders -- daar heeft dezelfde container
   wél padding en meet cqw tegen het tekstvlak van 182 mm; zie editor.css. De
   px-regel ervoor is de terugval voor een browser zonder containervragen.

   Daarmee is de voorvertoning ook het antwoord op "past mijn tekst?": wat hier
   wegvalt, valt in de druk ook weg. Het scherm zegt dat er ook zo bij. */
.omslag-proef{
  position:relative; margin-top:18px; aspect-ratio:1/1; max-width:260px;
  overflow:hidden; background:var(--grond); border-radius:4px;
  font-family:Georgia,"Times New Roman",serif;
  container-type:inline-size;
}
.omslag-proef-foto{position:absolute; overflow:hidden;}
.omslag-proef-foto img{position:absolute; object-fit:cover; display:block; max-width:none;}
.omslag-proef-band{
  position:absolute; left:0; right:0; bottom:0; height:30%;
  box-sizing:border-box; padding:8px 16px 14px;
  padding:3.8095cqw 6.6667cqw 6.6667cqw;              /* 8mm 14mm 14mm */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center; overflow:hidden;
}
.omslag-proef-vol{height:100%; padding:22px; padding:6.6667cqw; gap:10px;}
/* De indeling `vol`: de plaat is precies zo hoog als de tekst, net als
   `.omslag-band-plaat` in druk.html. Een vaste hoogte zou hier een andere kaft
   tonen dan er gedrukt wordt. */
.omslag-proef-plaat{
  height:auto; padding:10px 16px 14px;
  padding:4.7619cqw 6.6667cqw 6.6667cqw;              /* 10mm 14mm 14mm */
}
.omslag-proef-titel{
  font-size:14px; font-size:5.2381cqw;                /* 11mm */
  line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.omslag-proef-vol .omslag-proef-titel{
  font-size:20px; font-size:6.6667cqw;                /* 14mm */
  line-height:1.25;
}
.omslag-proef-plaat .omslag-proef-titel{font-size:12px; font-size:4.2857cqw;}   /* 9mm */
.omslag-proef-onder{font-size:11px; font-size:2.6190cqw;}                       /* 5,5mm */
.omslag-proef-vol .omslag-proef-onder{font-size:13px; font-size:2.8571cqw;}     /* 6mm */
.omslag-proef-plaat .omslag-proef-onder{font-size:10px; font-size:2.3810cqw;}   /* 5mm */

/* HIER STONDEN DE REGELS VAN HET KAFTSCHERM (de fotokiezer, de kleurstaaltjes,
   de twee indelingen, het tekstvak en de drie opmaakkeuzes). Ze staan sinds
   blok D van de ombouw (1 oktober 2026) in editor.css, bij het scherm waar ze
   bij horen. Wat hier blijft is `.omslag-proef` hierboven: de voorvertoning
   zelf, die het bestelscherm ook toont. */


/* Een knop tussen twee alinea's in een kaart: lucht eromheen. */
.kaart .knop-hoofd + .klein,.kaart .knop + .klein,.kaart button + .klein{margin-top:12px;}


/* ================================================================
 * BLOK B VAN DE OMBOUW (1 oktober 2026): Uploaden, Hoofdstukken, een
 * hoofdstuk en Mensen, naar ontwerp-gauntlet/eind/project/*.dc.html.
 *
 * De oude regels van deze vier schermen stonden verspreid over zes plekken in
 * dit bestand (elke UX-ronde legde er een laag overheen). Ze zijn weggehaald
 * en staan hier een keer, in de volgorde van de schermen. Wat er aan lessen in
 * die lagen stond, staat bij de regel waar hij nu geldt.
 *
 * TWEE DINGEN DIE HIER NIET MOGEN, en `tests/test_verborgen.py` bewaakt ze:
 * - een element dat met `hidden` begint (de voortgangskaart, "nog te bekijken")
 *   mag zelf geen `display` zetten zonder een `[hidden]`-regel erna. Daarom
 *   leggen `.kaart-warm`, `.kaart-rust` en `.blok` hun kinderen op afstand met
 *   marges en niet met flex;
 * - een <dialog> zet NOOIT zelf een display: dan staat hij ook dicht in beeld.
 * ================================================================ */

/* ---------------------------------------------------- de indeling
 * `.stapel` is het scherm: de hoofdblokken onder elkaar met 32px ertussen
 * (STIJL.md paragraaf 3). De blokken zelf dragen dan geen marge meer. */
.stapel{display:flex; flex-direction:column; gap:32px;}
.stapel > *{margin-top:0; margin-bottom:0;}
@media (max-width:700px){ .stapel{gap:24px;} }
.kopblok{display:flex; flex-direction:column; gap:12px; min-width:0;}
.kopblok.dicht{gap:8px;}
.kopblok > *{margin:0;}
.sectie{display:flex; flex-direction:column; gap:16px; min-width:0;}
.sectie > *{margin-top:0; margin-bottom:0;}
.sectie.streep{padding-top:32px; border-top:1px solid var(--lijn);}
.zacht{color:var(--inkt-zacht);}
.toelichting{color:var(--inkt-zacht); max-width:62ch;}
.toelichting b{font-weight:600; color:var(--inkt);}
.hint{font-size:14px; line-height:1.5; color:var(--inkt-zacht); max-width:62ch;}

/* De twee zachte vlakken: Warm Peach (aandacht, voortgang) en Mint Green
   (klaar, gelukt). Geen `display` -- zie de kop van dit blok. */
.kaart-warm,.kaart-rust{
  border-radius:var(--rond); padding:24px 28px; min-width:0;
}
.kaart-warm{background:var(--warm-vlak); border:1px solid var(--warme-lijn);}
.kaart-rust{background:var(--rust-vlak); border:1px solid var(--rust-vlak);}
.kaart-warm > *,.kaart-rust > *,.blok > *{margin-top:0; margin-bottom:0;}
.kaart-warm > * + *,.kaart-rust > * + *,.blok > * + *{margin-top:12px;}
.kaart-warm p,.kaart-rust p,.blok p{max-width:66ch;}
@media (max-width:700px){ .kaart-warm,.kaart-rust{padding:18px;} }
/* PETROL HAALT OP MINT GREEN GEEN 4,5:1 (gemeten 4,1:1). Het ontwerp zet er
   toch petrol-links op; hier krijgen ze petrol-diep (5,9:1). */
.kaart-rust a:not(.knop):not(.knop-hoofd),.kaart-rust summary,
.kaart-rust .tekstknop{color:var(--petrol-diep);}
/* De kop van een zacht vlak: Cormorant 26px (STIJL.md paragraaf 8). */
.vlakkop,.notitie-kop{
  display:block; font-family:var(--serif); font-weight:500; font-size:26px;
  line-height:1.2; margin:0 0 8px;
}
.blok{min-width:0;}
.twee{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
@media (max-width:700px){ .twee{grid-template-columns:1fr; gap:20px;} }
/* Een zin met een knop ernaast, onder een scheidslijn. */
.regel{display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--lijn);}
.regel p{flex:1 1 320px; margin:0; max-width:66ch;}
@media (max-width:700px){ .regel{padding-top:20px;} .regel .knop{width:100%;} }
/* Een regel met een vinkje ervoor: iets dat gelukt is. */
.vinkregel{display:flex; align-items:center; justify-content:space-between;
  gap:8px 24px; flex-wrap:wrap;}
.vinkregel form{margin:0;}
.vink{display:flex; align-items:flex-start; gap:10px; flex:1 1 320px; margin:0;}
.vink svg{flex:none; margin-top:3px; fill:none; stroke:var(--goed);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
/* Een fout bij een veld: de linkerrand in de foutkleur, de zin in inkt. */
.foutregel{border-left:4px solid var(--fout); padding:2px 0 2px 14px; max-width:66ch;}
.tekstknop[hidden]{display:none;}
/* Alleen binnen `.stapel` (de vier schermen van blok B): elders kan een knop
   een gevuld icoon dragen. */
.stapel .knop svg,.stapel .knop-hoofd svg{flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.knoprij.rechts{justify-content:flex-end;}
.blok > .veldknop{margin-top:16px;}
.kaart-warm .knoprij,.kaart-rust .knoprij{margin-top:16px;}

/* ---------------------------------------------------- uploaden */
/* DE DRIE STAPPEN. Het cijfer staat in een Warm Peach-rondje, in het
   schreeflettertype; tussen de stappen een lijn. */
/* `.stappen` staat ook op het lege editorscherm (editor_leeg.html), daar met
   kale tekst in elke stap en zonder `.sectie` eromheen. Vandaar de eigen
   marge, en een inhoud die minstens zo hoog is als het rondje: zonder dat
   viel het derde rondje over de knop eronder (gezien op 1 oktober 2026). */
.stappen{list-style:none; counter-reset:s; padding:0; margin:24px 0;}
.sectie > .stappen{margin:0;}
.stappen > li{
  counter-increment:s; position:relative; padding:28px 0 28px 68px;
  border-top:1px solid var(--lijn); box-sizing:content-box; min-height:44px;
}
.stappen > li:first-child{border-top:none; padding-top:0;}
.stappen > li:last-child{padding-bottom:0;}
.stappen > li > *{margin-top:0; margin-bottom:0; max-width:66ch;}
.stappen > li > * + *{margin-top:12px;}
.stappen > li::before{
  content:counter(s); position:absolute; left:0; top:28px;
  width:48px; height:48px; border-radius:50%; background:var(--warm-vlak);
  border:1px solid var(--warme-lijn); color:var(--inkt);
  font-family:var(--serif); font-weight:500; font-size:26px; line-height:1;
  display:grid; place-items:center;
}
.stappen > li:first-child::before{top:0;}
@media (max-width:700px){
  .stappen > li{padding:22px 0 22px 52px; min-height:40px;}
  .stappen > li::before{width:40px; height:40px; font-size:22px; top:22px;}
}
/* De gegevens voor PhotoSync staan achter een uitklapregel: wie al gekoppeld
   is, hoeft ze niet elke keer te zien. */
.vouw > summary{
  list-style:none; display:flex; align-items:center; gap:10px; min-height:44px;
  padding:10px 0; color:var(--petrol); font-size:15px; font-weight:600;
  cursor:pointer;
}
.vouw > summary::-webkit-details-marker{display:none;}
.vouw > summary:hover{color:var(--petrol-diep); text-decoration:underline;}
.vouw > summary svg{flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .18s;}
.vouw[open] > summary svg{transform:rotate(90deg);}
.vouw-inhoud{padding:8px 0 4px;}
.vouw-inhoud > *{margin-top:0; margin-bottom:0;}
.vouw-inhoud > * + *{margin-top:16px;}

/* HOE VER DE ANALYSE IS (#analyse-stand). Een Warm Peach-kaart zolang er iets
   loopt of wacht, Mint Green als alles bekeken is. Een storing krijgt de
   linkerrand in de foutkleur. */
.stand{
  background:var(--warm-vlak); border:1px solid var(--warme-lijn);
  border-radius:var(--rond); padding:24px 28px;
}
.stand > *{margin-top:0; margin-bottom:0; max-width:66ch;}
.stand > * + *{margin-top:14px;}
.stand .stand-kop,.stand .meter{max-width:none;}
.stand-kop{display:flex; justify-content:space-between; align-items:baseline;
  gap:8px 16px; flex-wrap:wrap;}
.stand-kop > *{margin:0;}
.stand-tekst{font-variant-numeric:tabular-nums;}
.stand-tekst b{font-weight:600;}
.stand .meter,.voortgang .meter{height:10px; border-radius:5px;
  background:var(--papier); overflow:hidden;}
.stand .meter span,.voortgang .meter span{display:block; height:100%; width:0;
  background:var(--goed); transition:width .25s;}
.stand .verslag{color:var(--inkt-zacht);}
/* FOTO'S DIE ZIJN WEGGEVALLEN. Dezelfde vorm als `.foutregel` hierboven -- een
   linkerrand in de foutkleur, de zin in inkt en iets zwaarder -- en met opzet
   GEEN terracotta: dat is de kleur van de hoofdknop (zie de regel bij
   `.klein.waarschuwing`). Zonder dit stond hij als gewone alinea midden in het
   groene "alles is klaar"-vlak, niet te onderscheiden van de uitleg erboven --
   en dat is precies de zin die wél moet opvallen. Binnen `.stand`, want elk
   blok houdt zijn regels in zijn eigen container (paragraaf 14). */
.stand .letop{border-left:4px solid var(--fout); padding:2px 0 2px 14px;
  color:var(--inkt); max-width:66ch;}
/* GEEN font-weight:500, en dat is een meting. Een ontwerper telde de donkere
   pixels per element in dit vlak: met 500 was deze zin met 4.302 het ZWAARSTE
   tekstblok -- meer inkt dan de kop, de teller en de uitlegzin samen (3.223) --
   in een vlak dat "klaar" moet uitstralen. De rand (de enige rode markering op
   het scherm) en de inktkleur (8,5:1 tegen 5,0:1 voor de buurzin) dragen de
   nadruk al twee keer; gewicht was de derde laag. Dit WIJKT AF van `.foutregel`
   hierboven, en dat is de prijs: die staat bij een VELDFOUT waar je meteen iets
   moet doen, dit is een mededeling achteraf. De rand is identiek gebleven. */
.stand.geanalyseerd{background:var(--rust-vlak); border-color:var(--rust-vlak);}
.stand.onbereikbaar,.stand.geen_geboortedatum{border-left:4px solid var(--fout);}
@media (max-width:700px){ .stand{padding:18px;} }
/* Staat er al een ander zacht vlak op het scherm (de datumvraag, of de drie
   voorbeelden), dan is de stand gewone tekst: een zacht vlak per scherm. De
   omhulling staat in uploaden.html, BUITEN het blok dat zichzelf ververst. */
.stand-kaal .stand{background:none; border:none; border-radius:0; padding:0;}
.stand-kaal .stand .meter{background:var(--lijn);}
.stand-kaal .vlakkop{font-family:var(--sans); font-size:17px; line-height:1.4;
  font-weight:600;}

/* De drie voorbeelden. */
.voorbeelden > * + *{margin-top:20px;}
.voorbeeldrij{
  list-style:none; padding:0; display:grid; gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.voorbeeldrij li{display:flex; flex-direction:column; gap:12px; min-width:0;}
.voorbeeldrij img,.voorbeeldrij .geen-beeld{
  width:100%; max-width:240px; height:auto; aspect-ratio:1; object-fit:cover;
  display:block; border-radius:var(--rond-tegel); background:var(--petrol-vlak);
}
.voorbeeld-tekst{min-width:0;}
.voorbeeld-tekst p{margin:0; font-size:14px; line-height:1.5;}
.voorbeeldrij summary{cursor:pointer; font-size:14px; min-height:44px;
  display:flex; align-items:center;}
.voorbeeldrij summary:hover{text-decoration:underline;}
.voorbeeldrij details p{margin-bottom:8px; color:var(--inkt-zacht);}
.voorbeeldrij details b{font-weight:600; color:var(--inkt);}
/* Drie naast elkaar worden op een telefoon drie postzegels. Daar dus onder
   elkaar, met de foto links en de tekst ernaast. */
@media (max-width:700px){
  .voorbeeldrij{grid-template-columns:1fr;}
  .voorbeeldrij li{flex-direction:row; align-items:flex-start; gap:14px;}
  .voorbeeldrij img,.voorbeeldrij .geen-beeld{width:112px; flex:none;}
}

/* De vouchercode: het veld met zijn knop ernaast, op een telefoon eronder. */
.veldknop{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:0;}
.veldknop > div{flex:0 1 280px; min-width:0;}
@media (max-width:700px){
  .veldknop{flex-direction:column; align-items:stretch;}
  .veldknop > div{flex:0 1 auto;}
}
.datumvraag p{max-width:62ch;}
.photosync + .fout{margin:0;}

/* ---------------------------------------------------- hoofdstukken */
.albums{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;}
.lijstjes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.album{
  display:flex; align-items:center; gap:16px; min-height:96px;
  padding:12px 16px 12px 12px; background:var(--papier);
  border:1px solid var(--lijn); border-radius:var(--rond); color:var(--inkt);
  text-decoration:none; transition:var(--overgang);
}
.album:hover{border-color:var(--petrol); background:var(--petrol-vlak);
  color:var(--inkt);}
.album-beeld{width:72px; height:72px; border-radius:12px; object-fit:cover;
  background:var(--petrol-vlak); flex:none; display:block;}
.album-tekst{display:flex; flex-direction:column; gap:2px; min-width:0;
  flex:1 1 auto;}
.album-titel{font-size:17px; line-height:1.3; font-weight:600;
  overflow-wrap:anywhere;}
.album-aantal{font-size:14px; line-height:1.5; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;}
.album-pijl{flex:none; color:var(--petrol); fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
/* Een werklijstje: een icoon in plaats van een foto. Leeg is klaar: Mint. */
.album.lijstje{padding:16px 20px;}
.album.lijstje.rust{background:var(--rust-vlak); border-color:var(--rust-vlak);}
.album.lijstje.rust:hover{border-color:var(--goed); background:var(--rust-vlak);}
.album.lijstje.rust .album-aantal{color:var(--inkt);}
.lijstje-icoon{width:48px; height:48px; border-radius:50%;
  background:var(--papier); border:1px solid var(--lijn); display:flex;
  align-items:center; justify-content:center; flex:none;}
.lijstje-icoon svg{fill:none; stroke:var(--petrol); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;}
.lijstje.rust .lijstje-icoon svg{stroke:var(--goed); stroke-width:2.2;}
@media (max-width:700px){
  .albums,.lijstjes{grid-template-columns:minmax(0,1fr); gap:10px;}
  .album{min-height:88px; padding:8px 14px 8px 8px;}
  .album-beeld{width:64px; height:64px;}
  .album-titel{font-size:18px;}
  .album.lijstje{padding:14px 16px;}
}

/* ---------------------------------------------------- een hoofdstuk */
.kruimels{font-size:14px; color:var(--inkt-zacht);}
.kruimels span{margin:0 6px;}

/* De voortgangskaart. Staat met `hidden` in de pagina tot schil.js heeft
   geteld; `.voortgang` zet daarom zelf GEEN display. */
.voortgang-kop{display:flex; justify-content:space-between; align-items:baseline;
  gap:8px 16px; flex-wrap:wrap;}
.voortgang-kop > *{margin:0;}
.voortgang-tekst{font-variant-numeric:tabular-nums;}
.voortgang-tekst b,.tel b{font-weight:600;}
.tel{display:flex; align-items:center; gap:10px;}
.tel svg{flex:none; fill:none; stroke:var(--petrol); stroke-width:1.8;
  stroke-linejoin:round;}
@media (max-width:700px){
  .voortgang > * + *{margin-top:8px;}
  .uitleg-regel{display:none;}
}

/* Filters. DE FILTERPIL: aan = inkt-vlak met witte tekst, uit = wit met een
   rand. "Meerdere kiezen" is de stille pil (gestippelde rand) en staat aan het
   eind van de rij. */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.filter,.kies{
  display:inline-flex; align-items:center; gap:8px;
  margin:0; width:auto; min-height:44px; padding:10px 18px; font-size:14px;
  font-weight:500; border-radius:999px; border:1.5px solid var(--lijn-sterk);
  background:var(--papier); color:var(--inkt);
}
.filter:hover,.kies:hover{background:var(--petrol-vlak);
  border-color:var(--petrol); color:var(--inkt);}
.filter.aan,.filter.aan:hover,.kies.aan,.kies.aan:hover{
  background:var(--inkt); border-color:var(--inkt); color:#fff;}
.filter-getal{font-weight:400; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;}
.filter.aan .filter-getal{color:#fff; opacity:.8;}
.kies{border-style:dashed;}
.kies.aan{border-style:solid;}
.kies svg{flex:none; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;}
.kies-plek{margin-left:auto;}
.filter-hint{font-size:14px; color:var(--inkt-zacht);}
.leeg-filter{color:var(--inkt-zacht);}
@media (max-width:700px){
  .kies-plek{margin-left:0;}
  .filter-hint{flex:1 0 100%;}
}

/* HET RASTER EN DE FOTOTEGEL (STIJL.md paragraaf 6). */
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:16px;}
@media (max-width:700px){
  .raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
}
.tegel{
  position:relative; margin:0; min-width:0; aspect-ratio:1; overflow:hidden;
  border-radius:var(--rond-tegel); background:var(--petrol-vlak);
}
.tegel img{display:block; width:100%; max-width:100%; height:100%;
  object-fit:cover;}
/* De ster is een lijn die betekenis draagt: de tegel krijgt hem als rand. */
.tegel.favoriet{box-shadow:0 0 0 3px var(--hoofdactie);}
.tegel.bezig{opacity:.45;}
/* Tikken op de foto opent hem groot. */
.tegel .vergroot{
  display:block; width:100%; height:100%; min-width:0; padding:0; margin:0;
  border:none; border-radius:0; background:none; cursor:zoom-in;
}
.tegel .vergroot:hover{background:none;}
.tegel .vergroot:focus-visible{outline:3px solid var(--petrol); outline-offset:-5px;}

/* DE DRIE KNOPPEN OP EEN TEGEL: ster rechtsonder, "klopt" links daarvan (alleen
   op een werklijstje), verplaatsen rechtsboven. Het KLIKVLAK is 44x44, de
   zichtbare schijf 38px (3px naar binnen) en iets doorschijnend, zodat hij de
   foto minder afdekt. ALTIJD zichtbaar: op een aanraakscherm bestaat hover
   niet, en een knop die pas bij hover verschijnt is voor dit publiek geen knop. */
.tegel .ster{position:absolute; right:10px; bottom:10px; margin:0;}
.tegel .ster button,.tegel .verplaats,.tegel .klopt{
  width:44px; height:44px; padding:0; margin:0; border:none; border-radius:50%;
  background:transparent; display:flex; align-items:center; justify-content:center;
}
.tegel .ster button{position:relative;}
.tegel .verplaats{position:absolute; top:10px; right:10px; color:var(--petrol);}
.tegel .klopt{position:absolute; right:62px; bottom:10px; color:var(--goed);}
.tegel .ster button::before,.tegel .verplaats::before,.tegel .klopt::before{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:rgba(255,255,255,.9); border:1px solid rgba(226,230,234,.9);
  transition:background .18s;
}
.tegel .ster button:hover,.tegel .verplaats:hover,.tegel .klopt:hover{
  background:transparent;}
.tegel .verplaats:hover{color:var(--petrol);}
.tegel .klopt:hover{color:var(--goed);}
.tegel .ster button:hover::before,.tegel .verplaats:hover::before{
  background:var(--warm-vlak);}
.tegel .klopt:hover::before{background:var(--rust-vlak);}
.tegel .ster svg,.tegel .verplaats svg,.tegel .klopt svg{position:relative;}
.tegel .ster svg{fill:none; stroke:var(--petrol); stroke-width:1.5;
  stroke-linejoin:round;}
.tegel.favoriet .ster svg{fill:var(--hoofdactie); stroke:var(--hoofdactie);}
.tegel .verplaats svg{fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;}
.tegel .klopt svg{fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;}
/* De badge op een foto die beweegt: de ENIGE tekst onder de 16px. */
.soort{
  position:absolute; top:10px; left:10px; background:rgba(44,62,79,.78);
  color:#fff; font-size:15px; font-weight:600; letter-spacing:.02em;
  padding:3px 10px; border-radius:999px; line-height:1.4;
}
/* Gehad: een stip linksonder, en de foto een fractie rustiger. Geen grijs en
   geen doorhaling: het is een hulpmiddel om je plek te vinden, geen oordeel
   over de foto. De stip alleen op tegels ZONDER ster; bij 70% gesterd zegt hij
   daar niets naast de rand die er al is. */
.tegel.gehad img{opacity:.85;}
.tegel.gehad:hover img,.tegel.favoriet.gehad img,.tegel.gekozen img{opacity:1;}
.tegel.gehad::after{
  content:""; position:absolute; left:12px; bottom:12px;
  width:9px; height:9px; border-radius:50%;
  background:var(--petrol); box-shadow:0 0 0 2px rgba(255,255,255,.85);
}
.tegel.favoriet.gehad::after,.tegel.gekozen::after{display:none;}

/* Een plek om te stoppen in een lang hoofdstuk ("61-120 van 372"), en op een
   werklijstje de naam van het hoofdstuk waar de foto's in staan. */
.blokkop{
  grid-column:1 / -1; margin:16px 0 0; font-family:var(--sans); font-size:14px;
  font-weight:600; line-height:1.5; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;
}
.blokkop:first-child{margin-top:0;}
.blokkop span{font-weight:400; margin-left:6px;}
.groepkop{font-size:17px; color:var(--inkt);}
.groepkop span{font-size:14px; color:var(--inkt-zacht);}
/* Bij een actief filter kloppen de nummers niet meer; verbergen is eerlijker
   dan meetellen van wat je niet ziet. */
.raster.gefilterd .blokkop{display:none;}

/* MEERDERE KIEZEN. In de kiesmodus zijn de knoppen op de tegel uit: de tik
   kiest, en mag niet met de ster of de vergroter vechten. Linksboven komt een
   rond vinkje van 26px; de badge schuift ervoor op. */
.raster.kiesmodus .tegel .ster,
.raster.kiesmodus .tegel .klopt,
.raster.kiesmodus .tegel .verplaats{display:none;}
.raster.kiesmodus .tegel,.raster.kiesmodus .tegel .vergroot{cursor:pointer;}
.raster.kiesmodus .soort{left:44px;}
.raster.kiesmodus .tegel::before{
  content:""; position:absolute; top:10px; left:10px; z-index:2;
  width:26px; height:26px; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.9); border:1.5px solid var(--lijn-sterk);
}
/* LET OP DE SPECIFICITEIT: de lege staat hierboven telt drie klassen, dus de
   gekozen staat moet de volle keten dragen, anders blijft het bolletje wit.
   NIET terracotta: dat is de kleur van de sterrand, en een selectie in
   dezelfde kleur is op een gesterde foto onzichtbaar. */
.raster.kiesmodus .tegel.gekozen::before{
  background:rgba(44,62,79,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  border-color:rgba(255,255,255,.9);
}
.tegel.gekozen,.tegel.favoriet.gekozen{box-shadow:0 0 0 3px var(--inkt);}

/* DE SELECTIEBALK: zweeft onderin, inkt-vlak, knoppen wit; "Verplaatsen..."
   is daar de hoofdknop.
 *
 * HET ATTRIBUUT `hidden` VERLIEST VAN DE `display:flex` HIERONDER, en daarmee
 * stond deze balk ooit ALTIJD op het scherm, over de onderste rij foto's heen,
 * met "0 gekozen" erin (gemeld op 2 september 2026). Vandaar de regel
 * `.selectiebalk[hidden]` erna. Bewust geen globale
 * `[hidden]{display:none!important}`: die raakt elk element in de schil. */
.selectiebalk{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%); width:min(760px,calc(100% - 32px)); z-index:40;
  display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--rond);
  background:var(--inkt); color:#fff; box-shadow:var(--schaduw);
}
.selectiebalk[hidden]{display:none;}
/* ALLES ONDER `.selectiebalk`: de fotoselectie heeft haar eigen `.sel-knoppen`
   (de knoppen onder een foto), en een kale regel hier won daarvan omdat hij
   later in het bestand staat -- gemeten: de sleeptoets op een telefoon viel om. */
.selectiebalk .sel-aantal{font-size:15px; flex:none; margin-right:auto;}
.selectiebalk .sel-aantal b{font-weight:600;}
.selectiebalk .sel-knoppen{display:flex; gap:10px; flex-wrap:wrap; flex:0 1 auto;}
.selectiebalk button{
  margin:0; width:auto; min-height:44px; padding:12px 20px; font-size:15px;
  font-weight:600; border:none; border-radius:var(--rond-knop);
  background:#fff; color:var(--inkt);
}
.selectiebalk button:hover{background:var(--petrol-vlak); color:var(--inkt);}
.selectiebalk .hoofdzaak{background:var(--hoofdactie); color:#fff;}
.selectiebalk .hoofdzaak:hover{background:var(--hoofdactie-diep); color:#fff;}
.selectiebalk .sel-sluit{flex:none; width:44px; height:44px; min-height:0;
  padding:0; border-radius:50%; display:flex; align-items:center;
  justify-content:center;}
.selectiebalk .sel-sluit svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
@media (max-width:520px){
  .selectiebalk .sel-aantal{flex:1 1 auto;}
  .selectiebalk .sel-knoppen{order:3; flex:1 0 100%;}
  .selectiebalk .sel-knoppen button{flex:1 1 auto; padding:12px 12px;}
}

/* Onder het raster: "alles weer op nog te bekijken" links, verder naar het
   volgende hoofdstuk rechts. */
.onderaan{display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;}
.onderaan .knop{margin-left:auto;}
@media (max-width:700px){ .onderaan .knop{width:100%;} }

/* DE HOOFDSTUKRIJ staat ONDER het raster en WIKKELT: alle hoofdstukken in
   beeld, het huidige in Warm Peach. Tot 1 oktober 2026 was dit een schuifbaan
   boven het raster met pijlen; op een telefoon viel het huidige hoofdstuk daar
   buiten beeld. (De rij op Fotoselectie staat in blok C: `.sel-stand .springer`.) */
.springer-rij{padding-top:28px; border-top:1px solid var(--lijn);}
.springer-rij > p{margin:0 0 12px; font-size:14px; color:var(--inkt-zacht);}
.springer-rij .springer{display:flex; gap:8px; flex-wrap:wrap; padding:0;
  overflow:visible;}
.springer-rij .springer a{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 16px;
  border-radius:999px; background:var(--papier); border:1px solid var(--lijn);
  color:var(--inkt); text-decoration:none; font-size:14px; white-space:normal;
  transition:var(--overgang);
}
.springer-rij .springer a:hover{border-color:var(--petrol);
  background:var(--petrol-vlak);}
.springer-rij .springer a.aan{background:var(--warm-vlak);
  border-color:var(--warme-lijn); color:var(--inkt); font-weight:600;}
@media (max-width:700px){ .springer-rij{padding-top:24px;} }

/* HET GROTE FOTOVENSTER (schil.js maakt het). De foto hoogstens 70% van de
   schermhoogte, eronder drie gewone knoppen, sluiten rechtsboven. Op een
   telefoon een wit blad van onderen met de knoppen onder elkaar. */
.groot-venster{
  border:none; border-radius:var(--rond); padding:0; background:transparent;
  max-width:none; width:min(960px,calc(100% - 32px)); color:var(--inkt);
  overflow:visible;
}
.groot-venster::backdrop{background:rgba(20,26,32,.92);}
.groot-venster img{display:block; max-width:100%; max-height:70vh; margin:0 auto;
  border-radius:var(--rond); background:var(--petrol-vlak);}
.groot-balk{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  padding:16px 0 0;}
.groot-balk button{display:inline-flex; align-items:center; gap:10px;
  min-height:44px;}
.groot-balk svg{flex:none; fill:none; stroke:var(--petrol); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;}
/* Geen gekleurde knop in dit venster: de hoofdknop van het scherm staat op de
   pagina zelf. `hoofdzaak` (de klasse die schil.js op een werklijstje zet)
   blijft dus een gewone knop. */
.icoonknop,.kiezer-kop button{
  flex:none; width:44px; height:44px; min-height:0; margin:0; padding:0;
  border-radius:50%; background:var(--papier); border:1px solid var(--lijn);
  color:var(--petrol); display:inline-flex; align-items:center;
  justify-content:center;
}
/* `hidden` moet van die display winnen: een klassenregel verslaat de
   browserstijl `[hidden]`, en dan staat er een icoonknop op het scherm die
   een script net heeft weggezet (tests/test_verborgen.py). */
.icoonknop[hidden],.kiezer-kop button[hidden]{display:none;}
.icoonknop:hover,.icoonknop:hover:not(:disabled){background:var(--warm-vlak);
  border-color:var(--warme-lijn); color:var(--petrol-diep);}
.icoonknop svg,.kiezer-kop button svg{fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round;}
.groot-sluit{position:absolute; top:10px; right:10px;}
@media (max-width:700px){
  .groot-venster{width:100%; margin:auto 0 0; border-radius:var(--rond) var(--rond) 0 0;
    background:var(--papier); padding:16px 16px calc(16px + env(safe-area-inset-bottom));}
  .groot-venster img{border-radius:12px; max-height:60vh;}
  .groot-balk button{flex:1 1 100%; justify-content:center;}
  .groot-sluit{top:24px; right:24px;}
}

/* De kiezer "Naar welk hoofdstuk?": rijen van 56px met een lijn ertussen. */
#kiezer{width:min(520px,calc(100% - 32px));}
#kiezer .kiezer-lijst{padding:0 0 8px;}
#kiezer .kiezer-lijst button{border-top:1px solid var(--lijn); border-radius:0;
  padding:12px 24px; font-weight:400;}
@media (max-width:560px){ #kiezer{width:100%;} #kiezer .kiezer-lijst button{padding:12px 16px;} }

/* Wie staan er op deze foto (het blad achter "Personen"). */
.gezichtenblad{width:min(520px,calc(100% - 32px));}
.gezichtenblad .kiezer-lijst{padding:0 24px 24px;}
.gezichtenlijst{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.gezichtenlijst li{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px; border-radius:var(--rond-knop); background:var(--grond);}
.gezichtenlijst img,.geen-uitsnede{
  width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--petrol-vlak);
}
.geen-uitsnede{display:grid; place-items:center; color:var(--inkt-zacht);}
.gezichtenlijst form{display:flex; gap:8px; flex:1 1 220px; min-width:0;
  margin:0; flex-wrap:wrap;}
.gezichtenlijst input{flex:1 1 140px; min-width:0; width:auto;}
/* De knop staat IN `.kiezer-lijst`, en die maakt van elke knop een kale rij van
   de volle breedte (dat is voor "Naar welk hoofdstuk?"). Hier is het een
   gewone knop naast een veld. */
.gezichtenlijst button{
  width:auto; min-height:44px; padding:12px 22px; white-space:nowrap;
  border:1.5px solid var(--lijn-sterk); border-radius:var(--rond-knop);
  background:var(--papier); font-weight:600; justify-content:center;
}
.gezichtenlijst button:hover{border-color:var(--petrol);
  background:var(--petrol-vlak);}
.gezichtenlijst li.benoemd{background:var(--rust-vlak); padding:14px 16px;}
.gezichtenlijst .vinkje{color:var(--goed); font-size:17px; flex:none;}
.gezichtenblad .klein{margin:16px 0 0;}
.gezichtenblad .leeg{padding:8px 0;}
@media (max-width:560px){
  .gezichtenblad{width:100%;}
  .gezichtenblad .kiezer-lijst{padding:0 16px 16px;}
}

/* ---------------------------------------------------- mensen */
.melding-rust{background:var(--rust-vlak); border-left:4px solid var(--goed);
  border-radius:var(--rond); padding:20px 24px;}
.melding-rust b{font-weight:600;}
.kaart-warm .groot{font-size:17px; line-height:1.5; max-width:62ch;}
@media (max-width:700px){ .kaart-warm .groot{font-size:15px;} }

.gezichten{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;}
.gezicht{
  margin:0; background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--rond); padding:28px 24px 24px; display:flex;
  flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.gezicht img,.geen-beeld{
  width:136px; height:136px; border-radius:50%; object-fit:cover;
  display:block; background:var(--petrol-vlak);
}
.gezicht-aantal{font-size:14px; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;}
.gezicht-veld{width:100%; text-align:left;}
.gezicht-veld label{margin-bottom:6px;}
.gezicht button{width:100%;}
@media (max-width:700px){
  .gezichten{grid-template-columns:minmax(0,1fr);}
  .gezicht{padding:24px 20px 20px;}
}

/* De personenlijst: een kaart per persoon. Rechts de keuze In het boek / Niet
   in het boek; de stand die geldt is Mint Green met een vinkje. GEEN
   doorhaling bij wie er niet in komt: een doorgestreepte naam van een
   familielid in een gedenkproduct leest als "geschrapt". */
.personen{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:12px;}
.personen > li{
  display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap;
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--rond); padding:16px 20px; transition:var(--overgang);
}
.p-beeld{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--petrol-vlak);
}
.p-beeld.geen{display:grid; place-items:center; color:var(--petrol);
  font-size:21px; font-weight:600;}
.p-naam{flex:1 1 140px; min-width:0; display:flex; flex-direction:column;
  gap:2px; font-size:17px; font-weight:600; line-height:1.4;
  overflow-wrap:anywhere;}
.p-aantal{font-size:14px; font-weight:400; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;}
.personen > li.uit{background:var(--grond);}
.personen > li.uit .p-beeld{opacity:.5;}
.personen > li.uit .p-naam-tekst{color:var(--inkt-zacht);}
.personen form{margin:0;}
.p-keuze{flex:none;}
/* "Naam wijzigen" klapt een veld uit, onder de regel. Elf invoervelden tegelijk
   maken van een lijstje een formulier, en hernoemen is de zeldzame handeling. */
.p-hernoem{margin:0; flex:none;}
.p-hernoem > summary{
  list-style:none; display:inline-flex; align-items:center; min-height:44px;
  padding:10px 4px; color:var(--petrol); font-size:14px; cursor:pointer;
}
.p-hernoem > summary::-webkit-details-marker{display:none;}
.p-hernoem > summary:hover{color:var(--petrol-diep); text-decoration:underline;}
.p-hernoem[open]{flex:1 1 100%; order:10; margin:4px 0 0; padding-top:12px;
  border-top:1px solid var(--lijn);}
.p-hernoem form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  padding-top:4px;}
.p-hernoem .veldblok{flex:0 1 320px; min-width:0;}
.p-hernoem .veldblok label{margin-bottom:6px;}
.segment{display:inline-flex; border:1.5px solid var(--lijn-sterk);
  border-radius:var(--rond-knop); background:var(--papier); overflow:hidden;}
.segment .seg{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; margin:0; padding:10px 18px; border:none; border-radius:0;
  background:var(--papier); color:var(--inkt); font-size:14px; font-weight:600;
  white-space:nowrap;
}
.segment .seg + .seg{border-left:1.5px solid var(--lijn-sterk);}
.segment .seg:hover{background:var(--petrol-vlak);}
.segment .seg[aria-pressed=true],.segment .seg[aria-pressed=true]:hover{
  background:var(--rust-vlak); color:var(--inkt); cursor:default;}
.seg svg{display:none; flex:none; fill:none; stroke:var(--goed);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.seg[aria-pressed=true] svg{display:inline;}
@media (max-width:700px){
  .personen > li{padding:14px 16px; gap:10px 12px;}
  .p-beeld{width:52px; height:52px; font-size:17px;}
  .p-naam{font-size:15px; flex:1 1 auto;}
  .p-keuze{flex:1 1 100%;}
  .segment{display:flex; width:100%;}
  .segment .seg{flex:1 1 50%; padding:10px 8px;}
  .p-hernoem .veldblok{flex:1 1 100%;}
  .p-hernoem form button{width:100%;}
}
/* De stand die geldt is uitgeschakeld (er valt niets te wisselen), maar hoort
   er niet uitgeschakeld uit te zien: het is juist het antwoord. */
.segment .seg:disabled{background:var(--rust-vlak); color:var(--inkt);
  border-color:var(--lijn-sterk); cursor:default;}
/* De voortgangskaart op een werklijstje of onder een controleregel is een
   gewone kaart; dan over de volle breedte, net als de Warm Peach-variant. */
.kaart.voortgang{max-width:none; padding:24px 28px;}
.kaart.voortgang > *{margin-top:0; margin-bottom:0;}
.kaart.voortgang > * + *{margin-top:12px;}
.kaart.voortgang .meter{background:var(--lijn);}
/* Nadruk in de intro: inkt, zodat het getal of de kernzin eruit springt. */
.kopblok .lead b{font-weight:600; color:var(--inkt);}


/* ================================================================
 * BLOK C VAN DE OMBOUW (1 oktober 2026): het tabblad Fotoselectie (/boek),
 * naar ontwerp-gauntlet/eind/project/Fotoselectie.dc.html.
 *
 * De oude regels van dit scherm (het aantallenpaneel, "DE FOTOSELECTIE" van
 * 8 september, het slepen van 16 september, het wisselvenster) zijn weggehaald
 * en staan hier een keer. Wat er aan lessen in stond, staat bij de regel waar
 * hij nu geldt.
 *
 * WAT HET SCRIPT HIER LEEST (schil.js, "DE FOTOSELECTIE SLEPEN" en de ketting
 * `verstuur`): `.sel-hoofdstuk`, `.sel-rij` / `.sel-klein`, `.sel-foto`,
 * `.sel-vergroot`, `.sel-pijl`, `.sel-knop`, `.sel-knoppen`, `.sel-weggelaten`,
 * en het ZET: `.sel-geest`, `.sel-sleept-bron`, `.sel-invoeg-voor/-na`,
 * `.sel-doel`, `.sel-bezig`, `body.sel-sleept`. Hernoem ze niet zonder het
 * script; tests/test_fotoselectie_slepen.py en _browser.py bewaken het.
 *
 * ALLES BINNEN DE EIGEN CONTAINER. `.sel-knoppen` en `.sel-aantal` bestaan ook
 * in de selectiebalk van het hoofdstukscherm (blok B); een kale regel hier of
 * daar wint van de ander op bronvolgorde. Vandaar `.sel-foto .sel-knoppen`.
 *
 * GEEN `touch-action` IN DIT BLOK (de toets leest vanaf `.fotoselectie{`):
 * dan kan de klant op een telefoon niet meer door twaalf hoofdstukken vegen.
 * ================================================================ */

/* ---------------------------------------------------- de indeling
 * `#curatorblok` is het scherm onder de h1: de hoofdblokken onder elkaar met
 * 32px ertussen (STIJL.md paragraaf 3). NIET op de <dialog> die er ook in
 * staat: een dialoog centreert zichzelf met `margin:auto`, en een display
 * zetten we er nooit op (zie de kop van blok B). */
#curatorblok{display:flex; flex-direction:column; gap:32px; min-width:0;}
#curatorblok > :not(dialog){margin-top:0; margin-bottom:0;}
@media (max-width:700px){ #curatorblok{gap:24px;} }
#curatorblok .kaart{max-width:none; margin:0;}
#curatorblok .kaart p,#curatorblok .kaart-warm p,#curatorblok .kaart-rust p{max-width:62ch;}
#curatorblok .kaart form{margin:0;}
#curatorblok .kaart-fout p + form{margin-top:16px;}
#curatorblok .kaart > .vouw{margin-top:8px;}
#curatorblok .notitie{max-width:none;}
/* Iconen in een knop: een petrol lijn; op de hoofdknop en op een knop die uit
   staat de kleur van de tekst. */
#curatorblok .knop svg,#curatorblok .knop-hoofd svg{flex:none; fill:none;
  stroke:var(--petrol); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
#curatorblok .knop-hoofd svg,#curatorblok .knop:disabled svg{stroke:currentColor;}
#curatorblok .waarschuwing{font-weight:500;}
/* Een rij knoppen onder een kaarttekst; op een telefoon elk over de volle
   breedte. `display:flex` op een div die nooit `hidden` draagt. */
.boek-rij{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:20px;}
.boek-rij form{margin:0;}
@media (max-width:700px){
  .boek-rij > *,.boek-rij form > button,.boek-rij form{width:100%;}
}
/* De download: tekst links, de knop rechts ernaast. */
.download-rij{display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap;}
.download-tekst{flex:1 1 420px; min-width:0;}
.download-tekst > :last-child{margin-bottom:0;}
.download-rij .knop{flex:none; margin-left:auto;}
@media (max-width:700px){ .download-rij .knop{margin-left:0; width:100%;} }
.punt{margin:0 4px; color:var(--inkt-zacht);}

/* ---------------------------------------------------- het aantallenpaneel
 * Voor de curatie: per hoofdstuk hoeveel foto's. Staat los als kaart (de
 * eerste keer) en ingeklapt in de kaart "opnieuw samenstellen".
 *
 * GEEN TERRACOTTA ALS TEKST. Het advies ("advies 9") en "niet in het boek"
 * stonden in terracotta; dat is sinds het einddesign alleen de kleur van de
 * hoofdknop en de ster. Het advies is nu inkt-zacht (het is een mening naast
 * het aantal, en mag het aantal niet overstemmen), de waarschuwing dat een
 * hoofdstuk wegvalt is inkt en iets zwaarder. */
.aantallen{
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--rond); padding:24px 28px; min-width:0;
}
@media (max-width:700px){ .aantallen{padding:18px;} }
.aantallen > *{margin-top:0; margin-bottom:0;}
.aantallen > * + *{margin-top:12px;}
.aantallen > p{max-width:66ch;}
.aantallen-kop{display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap;}
.aantallen-kop h2{margin:0;}
.aantallen-tel{margin:0; font-size:14px; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;}
.aantallen-raster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:0 32px;
}
.aantallen > .aantallen-raster{margin-top:16px;}
.aantallen-rij{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:60px; padding:6px 0; border-top:1px solid var(--lijn);
}
.aantallen-naam{display:flex; flex-direction:column; min-width:0;}
/* DE NAAM IS ZWAARDER DAN DE NOTITIE ERONDER, en dat was omgekeerd.
   Gemeten op de afdruk van 20 oktober 2026 (cel Familie): de naam 191
   donkere pixels, "advies 13" 188, en de notitie eronder 264 -- het
   zwaarste merk in de cel was de voetnoot bij een uitgeschakelde knop.
   De klant herkent de rij aan de NAAM, dus daar hoort de nadruk. */
.aantallen-hoofdstuk{font-weight:500;}
.aantallen-advies{font-size:14px; line-height:1.4; color:var(--inkt-zacht);}
.aantallen-weg{color:var(--inkt); font-weight:500;}
.aantallen-knoppen{display:flex; align-items:center; gap:8px; flex:none;}
/* De min en de plus: icoonknoppen van 44 x 44 (STIJL.md paragraaf 5). */
.aantallen-knop{
  flex:none; width:44px; height:44px; padding:0; border-radius:50%;
  background:var(--papier); border:1px solid var(--lijn); color:var(--petrol);
  display:inline-flex; align-items:center; justify-content:center;
}
.aantallen-knop:hover:not(:disabled){background:var(--warm-vlak);
  border-color:var(--warme-lijn); color:var(--petrol-diep);}
.aantallen-knop:disabled{color:var(--lijn-sterk); background:var(--papier);
  border-color:var(--lijn);}
.aantallen-knop svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.aantallen-getal{min-width:32px; text-align:center; font-weight:600;
  font-variant-numeric:tabular-nums;}
@media (max-width:700px){ .aantallen-raster{grid-template-columns:1fr;} }
/* Ingeklapt in de kaart "opnieuw samenstellen": daar is het geen kaart in een
   kaart maar gewoon inhoud. */
.aantallen-vouw .aantallen{border:none; border-radius:0; padding:4px 0 8px;
  background:none;}

/* ---------------------------------------------------- de selectie */
.fotoselectie{display:flex; flex-direction:column; gap:32px; margin:0; min-width:0;}
.fotoselectie > *{margin-top:0; margin-bottom:0;}
@media (max-width:700px){ .fotoselectie{gap:24px;} }

/* DE STAND: het ene Warm Peach-vlak van dit scherm. De telling, de stap terug,
   de uitleg en de springlijst. */
.sel-stand-kop{display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap;}
.sel-stand-tekst > *{margin:0;}
.sel-stand-tekst .vlakkop{margin-bottom:4px;}
.sel-stand-tel{font-variant-numeric:tabular-nums;}
.sel-stand-tel b{font-weight:600;}
.sel-uitleg{display:flex; flex-direction:column; gap:8px; max-width:62ch;}
.sel-uitleg > *{margin:0;}
.sel-uitleg .vouw-inhoud > * + *{margin-top:8px;}
.sel-stand .vouw > summary{min-height:44px; padding:6px 0;}
@media (max-width:700px){
  .sel-terug,.sel-terug .knop{width:100%;}
}
/* De springlijst: alle hoofdstukken als pil, met het aantal erachter. Ze
   WIKKELEN (geen schuifbaan): alles in beeld. De hoofdstukken staan onder een
   plakkende kopbalk, vandaar de scroll-marge op `.sel-hoofdstuk`. */
.sel-stand .springer{display:flex; gap:8px; flex-wrap:wrap; padding:8px 0 0;}
.sel-stand .springer a{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:8px 16px; border-radius:999px; background:var(--papier);
  border:1px solid var(--warme-lijn); color:var(--inkt); text-decoration:none;
  font-size:14px; transition:var(--overgang);
}
.sel-stand .springer a:hover{border-color:var(--petrol); background:var(--petrol-vlak);}
.springer-aantal{color:var(--inkt-zacht); font-variant-numeric:tabular-nums;}

/* EEN HOOFDSTUK. Geen kaart meer maar een sectie onder een lijn: de foto's
   zijn het onderwerp, en twaalf kaarten onder elkaar maakten er twaalf
   kaders van. */
.sel-hoofdstuk{
  position:relative; display:flex; flex-direction:column; gap:20px;
  padding:40px 12px 0; margin-left:-12px; margin-right:-12px;
  scroll-margin-top:96px; min-width:0;
}
/* 12 PX RAND LINKS EN RECHTS, MET EEN EVEN GROTE NEGATIEVE MARGE. Zo staat de
   inhoud nog steeds in lijn met de kaarten erboven, maar HOORT de strook naast
   een regel tegels bij het hoofdstuk: wie een foto vlak naast de laatste tegel
   van een regel loslaat, mikt op het eind van die regel (schil.js, `doelVan`),
   en zonder rand viel dat punt buiten het hoofdstuk en gebeurde er niets. De
   lijn erboven is daarom een pseudo-element, zodat hij niet mee uitsteekt. */
.sel-hoofdstuk::before{content:""; position:absolute; top:0; left:12px; right:12px;
  border-top:1px solid var(--lijn);}
.sel-hoofdstuk > *{margin-top:0; margin-bottom:0;}
.sel-kop{display:flex; align-items:flex-start; gap:16px 24px; flex-wrap:wrap;}
.sel-kop-tekst{display:flex; flex-direction:column; gap:6px; flex:1 1 360px; min-width:0;}
.sel-kop-tekst > *{margin:0;}
.sel-kop .sel-erbij{flex:none; margin-left:auto;}
.sel-tel{font-size:14px; line-height:1.5; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;}
/* "voor de kaft": een woord in de telling, geen gekleurd etiket. */
.sel-merk{color:var(--inkt); font-weight:500;}
/* HET VERHAAL VAN DE CURATOR (`chapter_story`): lopende tekst in inkt-zacht,
   op een leesbare regellengte en VOLLEDIG -- geen afkapping. De tekst komt van
   een AI en kan een lang woord of een adres bevatten; dat mag de pagina op een
   telefoon niet breder maken. */
.sel-verhaal{font-size:15px; line-height:1.6; color:var(--inkt-zacht);
  max-width:62ch; overflow-wrap:anywhere;}
.sel-leeg{color:var(--inkt-zacht); max-width:62ch;}
@media (max-width:700px){
  .sel-hoofdstuk{padding-top:28px; gap:16px;}
  .sel-kop .sel-erbij{margin-left:0; width:100%;}
}

/* AUTO-FILL EN GEEN AUTO-FIT, en dat is met opzet lelijker.
   Auto-fit laat de kolommen uitzetten tot de rij vol is, en dan krijgt een
   hoofdstuk van twee foto's twee halve schermen groot beeld terwijl een
   hoofdstuk van zes kleine tegels krijgt. Grootte leest als belang, dus dat
   zegt tegen de klant dat het ene hoofdstuk belangrijker is dan het andere --
   puur omdat de curator er een minder koos. Auto-fill houdt elke tegel even
   groot en laat rechts wit staan; dat wit kost niets. */
.sel-rij{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(208px,1fr));
  gap:24px 16px;
}
.sel-rij.sel-klein{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
@media (max-width:700px){
  .sel-rij{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px;}
  .sel-rij.sel-klein{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
}

.sel-foto{position:relative; margin:0; display:flex; flex-direction:column;
  gap:6px; min-width:0;}
.sel-vlak{
  position:relative; display:block; aspect-ratio:1; overflow:hidden;
  border-radius:var(--rond-tegel); background:var(--petrol-vlak);
}
.sel-vlak img{width:100%; height:100%; object-fit:cover; display:block;}
/* Een foto zonder miniatuur laat zijn id zien. Met opzet zichtbaar: een
   gebroken plaatje is af te lezen, een stil weggelaten foto niet. */
.sel-geenbeeld{
  position:absolute; inset:0; display:grid; place-items:center; padding:8px;
  font-size:14px; line-height:1.3; color:var(--inkt-zacht);
  word-break:break-all; text-align:center;
}
/* HET NUMMER IS DE VOLGORDE, en dat is het hele onderwerp van dit scherm.
   Daarom staat het op de foto en niet ernaast: wie schuift, kijkt naar de
   foto's en moet aan het beeld zelf kunnen zien wat er verschoof. Een witte
   pil met inkt: de foto-badge van STIJL.md is 15px op gewicht 600. */
.sel-nummer{
  position:absolute; z-index:2; top:8px; left:8px; min-width:34px;
  padding:5px 0; border-radius:999px; background:rgba(255,255,255,.92);
  color:var(--inkt); font-size:15px; font-weight:600; line-height:1.4;
  letter-spacing:.02em; text-align:center; font-variant-numeric:tabular-nums;
}
/* De knop om de foto heen is geen knop om te zien: hij is de foto, en de
   greep om te slepen. Alleen bij toetsenbordfocus laat hij zich zien. */
.sel-vergroot{
  display:block; width:100%; height:100%; margin:0; padding:0; border:none;
  background:none; border-radius:0; cursor:grab;
}
.sel-vergroot:hover:not(:disabled){background:none;}
.sel-vergroot img{width:100%; height:100%; object-fit:cover; display:block;}
.sel-vergroot:focus-visible{outline:3px solid var(--petrol); outline-offset:-3px;}
.sel-klein .sel-vergroot{cursor:zoom-in;}

/* ONDER DE FOTO: het bijschrift links, de twee pijlen rechts ernaast. Dit deel
   rekt mee (`flex:1`), zodat "Vervang" en "Laat weg" in een rij kaarten op
   dezelfde hoogte staan, ook als een bijschrift drie regels telt. */
.sel-onder{display:flex; align-items:flex-start; gap:8px; flex:1 1 auto;}
.sel-bijschrift{display:block; flex:1 1 auto; min-width:0; font-size:14px;
  line-height:1.5; color:var(--inkt); padding-top:10px; overflow-wrap:anywhere;}
/* Twee regels hoog zodra er in dit hoofdstuk bijschriften ZIJN, ook bij de
   foto die er geen heeft: anders staan de knoppen van de ene kaart hoger dan
   die van de buur, en tikt de klant naast de kaart waar hij net keek. */
.sel-met-bijschrift .sel-bijschrift{min-height:58px;}
.sel-pijlen{display:flex; gap:6px; flex:none; margin-left:auto;}
@media (max-width:700px){
  .sel-onder{flex-wrap:wrap; gap:4px;}
  .sel-bijschrift{flex-basis:100%; padding-top:4px;}
  .sel-met-bijschrift .sel-bijschrift{min-height:52px;}
  .sel-rij:not(.sel-met-bijschrift) .sel-bijschrift{display:none;}
  .sel-pijlen{margin-left:0;}
}

/* DE PIJLEN. Klikvlak 44 x 44, de zichtbare schijf 38 (inset 3px), het icoon
   17px op lijndikte 1.7 (STIJL.md paragraaf 6). De knop zelf is doorzichtig;
   de schijf is een `::before` erin.
 *
 * Tot 1 oktober 2026 lagen ze OP de foto: eerst twee witte schijven van 40px
 * (samen de helft van de onderste band van het beeld), daarna pijltjes van
 * 22px met een raakvlak van 40. Nu staan ze onder de foto en is het beeld
 * vrij; het raakvlak is daarmee ook de 44px die er op de foto niet bij kon.
 *
 * EEN PIJL DIE NIET KAN STAAT ER GRIJS. Op de foto verdween hij (grijs op een
 * foto is niet af te lezen); hier ligt hij op de paginagrond en houdt hij zijn
 * plek, zodat de andere pijl niet verspringt. Hij is dan niet aan te wijzen. */
.sel-pijl{
  position:relative; flex:none; width:44px; height:44px; margin:0; padding:0;
  border:none; border-radius:50%; background:transparent; color:var(--petrol);
  display:inline-flex; align-items:center; justify-content:center;
}
.sel-pijl::before{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:rgba(255,255,255,.9); border:1px solid rgba(226,230,234,.9);
  transition:var(--overgang);
}
.sel-pijl svg{position:relative; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;}
.sel-pijl:hover:not(:disabled){background:transparent; color:var(--petrol-diep);}
.sel-pijl:hover:not(:disabled)::before{background:var(--warm-vlak);
  border-color:var(--warme-lijn);}
.sel-pijl:disabled{background:transparent; color:var(--lijn-sterk);
  pointer-events:none; cursor:default;}
.sel-pijl:focus-visible{outline:3px solid var(--petrol); outline-offset:1px;}

/* "Vervang" en "Laat weg": stille tekstknoppen, naast elkaar. Ze staan er
   ALTIJD, ook zonder hover: hover bestaat niet op een aanraakscherm. De tekst
   in een knop breekt nooit ("Laat weg" viel op een iPhone ooit over twee
   regels). 44px hoog: "Laat weg" is de enige handeling hier die iets weghaalt,
   en een mistik daar laat de klant schrikken. */
.sel-foto .sel-knoppen{display:flex; flex-wrap:wrap; gap:0 16px; margin-top:-4px;}
.sel-stil{
  margin:0; padding:10px 0; min-height:44px; border:none; border-radius:0;
  background:none; color:var(--petrol); font-size:14px; font-weight:500;
  white-space:nowrap;
}
.sel-stil:hover:not(:disabled){background:none; color:var(--petrol-diep);
  text-decoration:underline;}
/* In het kleine raster (weggelaten, het wisselvenster) een gewone knop over de
   breedte van de tegel. */
.sel-klein .sel-knoppen{margin-top:0;}
.sel-klein .sel-knoppen .knop{flex:1 1 0; min-width:0; padding:12px 8px;
  white-space:nowrap;}
/* Een merkje OP de foto in het albumraster. Onderaan en niet bovenaan: het
   nummer van een gekozen foto zit linksboven, en twee etiketten op dezelfde
   hoek lezen als een fout. */
.sel-merkje{
  position:absolute; z-index:2; left:8px; right:8px; bottom:8px;
  padding:4px 10px; border-radius:12px; background:rgba(44,62,79,.78);
  color:#fff; font-size:15px; font-weight:600; line-height:1.3; text-align:center;
}
.sel-weggelaten > summary{font-size:14px; font-weight:400; min-height:44px; padding:6px 0;}
.sel-weggelaten > ul{margin-top:12px;}
.sel-publiceren > *{margin:0;}

/* ---------------------------------------------------- het slepen
 * Het script staat in schil.js ("DE FOTOSELECTIE SLEPEN"); dit is wat het aan
 * klassen zet. De sleep begint op een telefoon pas na vasthouden, en het
 * script houdt het rollen tegen met een niet-passieve touchmove-luisteraar
 * zolang er gesleept wordt. Dezelfde afspraak als bij de fotobalk in de editor.
 *
 * Wat er WEL op de greep staat: geen iOS-callout bij lang drukken (anders
 * opent Safari zijn eigen menu op het beeld precies als de sleep loskomt),
 * geen eigen beeldsleep van Safari, en geen tekstselectie. */
.sel-rij:not(.sel-klein) .sel-vergroot,
.sel-rij:not(.sel-klein) .sel-vergroot img{
  -webkit-touch-callout:none; -webkit-user-drag:none;
  -webkit-user-select:none; user-select:none;
}
/* De geest aan de aanwijzer: een kleine kopie van de foto. `pointer-events:
 * none` is werking, geen opmaak: het script zoekt het doel met
 * elementFromPoint en zou anders alleen de geest vinden. Boven de plakkende
 * kopbalk en boven de tegels. */
.sel-geest{
  position:fixed; left:0; top:0; width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  padding:2px; overflow:hidden; box-sizing:border-box;
  background:var(--papier); border:1px solid var(--lijn-sterk);
  border-radius:var(--rond-knop); box-shadow:var(--schaduw);
  font-size:14px; line-height:1.2; color:var(--inkt-zacht); word-break:break-all;
  pointer-events:none; z-index:60; opacity:.92;
}
/* `hidden` VERLIEST VAN `display:flex` HIERBOVEN. Dezelfde val als
 * `.sleep-geest` in editor-spread.css, waar de geest van 96 px op het scherm
 * bleef staan nadat de foto was neergezet: `hidden` is een browserstijl
 * `display:none` met de laagste voorrang. Deze regel moet NA de regel met de
 * eigen display staan (gelijke specificiteit, dus de volgorde beslist);
 * tests/test_verborgen.py meet dat. */
.sel-geest[hidden]{display:none;}
.sel-geest img{width:100%; height:100%; object-fit:contain; display:block;
  max-width:none; max-height:none;}
/* De bron wordt bleek: de foto "zit aan de aanwijzer". */
.sel-foto.sel-sleept-bron{opacity:.4;}
/* DE INVOEGMARKERING: een streep in de tussenruimte, links of rechts van de
 * tegel onder de aanwijzer. Op de tegel zelf (een pseudo-element) en niet als
 * los element op vaste coordinaten: dan rolt hij mee met de pagina en volgt
 * hij het raster ook als dat over meerdere regels wrapt. De helft van de
 * tussenruimte (16 px, op een telefoon 12 px) plus de halve streepbreedte. */
.sel-foto.sel-invoeg-voor::before,
.sel-foto.sel-invoeg-na::after{
  content:""; position:absolute; top:0; bottom:0; width:4px; z-index:3;
  background:var(--petrol); border-radius:2px; pointer-events:none;
}
.sel-foto.sel-invoeg-voor::before{left:-10px;}
.sel-foto.sel-invoeg-na::after{right:-10px;}
@media (max-width:700px){
  .sel-foto.sel-invoeg-voor::before{left:-8px;}
  .sel-foto.sel-invoeg-na::after{right:-8px;}
}
/* Het hoofdstuk waar de foto ACHTERAAN komt: loslaten op de kop of op een
 * leeg deel. Het hele blok licht op, want dat is het doel. */
.sel-hoofdstuk.sel-doel{
  outline:3px solid var(--petrol); outline-offset:-3px;
  border-radius:var(--rond-knop); background:var(--petrol-vlak);
}
/* EEN KLIK DIE IS AANGENOMEN MAAR NOG WACHT. Achter een trage hoofdstukwissel
 * laat een pijl seconden niets zien; zonder dit klikt de klant nog eens. De
 * knop dimt en de tegel krijgt een stippellijn tot het antwoord er is. */
.sel-bezig.sel-pijl,.sel-bezig.sel-knop,.sel-bezig.knop{opacity:.45; cursor:progress;}
.sel-foto.sel-bezig .sel-vlak{outline:2px dashed var(--petrol); outline-offset:-2px;}
body.sel-sleept{cursor:grabbing; -webkit-user-select:none; user-select:none;}
body.sel-sleept .sel-vergroot{cursor:grabbing;}

/* ---------------------------------------------------- het wisselvenster
 * `.kiezer` (blok A) geeft het venster: wit, radius 16, de kop in Cormorant,
 * sluiten als icoonknop; op een telefoon een blad van onderen. Hier alleen
 * wat dit venster anders heeft: het is breder (een raster met foto's, geen
 * lijst met namen) en zijn inhoud rolt.
 * GEEN display op de <dialog>: dan staat hij ook dicht in beeld. */
.wisselaar{width:min(760px,calc(100% - 32px)); max-height:88vh;}
#wisselaarinhoud{padding:4px 24px 24px; max-height:calc(88vh - 92px); overflow-y:auto;
  overscroll-behavior:contain;}
.wisselaar-inhoud > *{margin-top:0; margin-bottom:0;}
.wisselaar-inhoud > * + *{margin-top:20px;}
.wisselaar-inhoud > .sel-rij{margin-top:12px;}
/* WAAR EEN MISLUKKING TE LEZEN IS: in het venster zelf (het ligt boven de
   meldingsbalk). De linkerrand in de foutkleur, de zin in inkt. De regel begint
   met `hidden`; hij zet daarom zelf geen display. */
.wisselaar-fout{border-left:4px solid var(--fout); padding:2px 0 2px 14px;}
.wisselaar-huidig{display:flex; align-items:center; gap:16px;}
.wisselaar-huidig .sel-vlak{width:96px; flex:none;}
.wisselaar-kop{font-size:17px; line-height:1.4; font-weight:600;}
.wisselaar .knop svg{flex:none; fill:none; stroke:var(--petrol); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:700px){
  .wisselaar{width:100%; max-width:100%; margin:auto 0 0;
    border-radius:var(--rond) var(--rond) 0 0;}
  #wisselaarinhoud{padding:4px 16px calc(16px + env(safe-area-inset-bottom));
    max-height:calc(88vh - 84px);}
}
.selectiegroot form{margin:0;}
/* Zonder intro (geen selectie: de kaart "stel samen", "bezig", een fout) staat
   het eerste blok anders tegen de h1 aan. */
#curatorblok > :first-child:not(.lead):not(dialog){margin-top:20px;}
/* De regel bovenaan die naar de download onderaan wijst, en het anker zelf:
   onder de vaste kopbalk vandaan, zoals de hoofdstukken. */
.download-wijzer{margin:8px 0 0; max-width:62ch;}
#download{scroll-margin-top:96px;}


/* ================================================================
 * BLOK E VAN DE OMBOUW (1 oktober 2026): het bestelscherm
 * (/editor/bestellen), naar ontwerp-gauntlet/eind/project/Bestellen.dc.html.
 *
 * Alles hangt in `.bestel`. De kassa hoort rustig te zijn: een warm vlak (de
 * rekening), een terracotta knop (Betalen), en verder wit.
 *
 * DRIE INDELINGEN, EEN PER SOORT TOESTAND:
 *   het formulier      `.bestel-stappen`: links het adres en het boek, rechts
 *                      "Wat het kost" met de knop; onder 900px onder elkaar.
 *   al het andere      `.bestel-kolom`: de kaarten onder elkaar, niet breder
 *                      dan een leesregel (de terugval "nog een stap", betaling
 *                      onderweg, de statussen, mislukt, niet bestelbaar).
 *
 * DE KOP VAN EEN KAART IS HIER EEN SECTIEKOP (Cormorant 30px), zoals het
 * ontwerp hem tekent: op dit scherm IS een kaart een stap. Een stille kaart
 * ("Je boek ligt nu vast", "Toch niet?") houdt de gewone kaartkop.
 *
 * GELD: geen enkele regel hier maakt een bedrag, een toelichting of een
 * rekeningregel onzichtbaar of knipt hem af. Bedragen breken niet
 * (`white-space:nowrap`), de toelichting eronder wel.
 * ================================================================ */
.bestel{display:flex; flex-direction:column; gap:32px;}
.bestel-kop{display:flex; flex-direction:column; gap:12px;}
.bestel-kop > *{margin:0;}

.bestel .kaart{margin:0; max-width:none; padding:24px;
  display:flex; flex-direction:column; gap:16px;}
.bestel .kaart > *{margin:0;}
.bestel > .kaart,.bestel-kolom{max-width:720px;}
.bestel-kolom{display:flex; flex-direction:column; gap:24px;}
.bestel .kaart h2{font-family:var(--serif); font-size:30px; line-height:1.2;
  font-weight:700;}
.bestel .kaart-stil h2{font-family:var(--sans); font-size:17px; line-height:1.4;
  font-weight:600;}
/* Een knop of link die los in een kaart staat is zo breed als zijn tekst, niet
   zo breed als de kaart. */
.bestel .kaart > .knop-vlak,.bestel .kaart > .knop-hoofd{align-self:flex-start;}
.bestel .kaart form{margin:0;}
/* Een knop met zijn uitweg ernaast ("Bestelling intrekken" - "Terug naar je
   boek"). */
.bestel-rij{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;}
.bestel .prijs{font-size:17px;}
.bestel .prijs b{font-weight:600;}

.bestel-redenen{padding-left:20px;}
.bestel-redenen li{margin-bottom:8px;}
.bestel-redenen li:last-child{margin-bottom:0;}
.bestel-redenen span{display:block; color:var(--inkt-zacht); font-size:14px;}

/* ------------------------------------------------ het formulier */
.bestel-stappen{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:24px; align-items:start;}
.bestel-links,.bestel-rechts{display:flex; flex-direction:column; gap:24px; min-width:0;}
/* De rekening loopt mee terwijl de klant zijn adres invult. Onder de kopbalk
   (76px) met lucht ertussen. */
.bestel-rechts{position:sticky; top:100px;}
.bestel-terug{margin:0; font-size:14px;}

/* Volle breedte binnen de kaart: een adresveld dat halverwege ophoudt nodigt
   uit tot afkorten, en een afgekapt adres is een boek dat nergens aankomt. De
   vorm van het veld zelf komt uit de basis bovenaan. */
.bestelformulier{display:flex; flex-direction:column; gap:8px;}
.bestelformulier input,.bestelformulier select{width:100%; margin:0 0 8px;}
.bestelformulier > :last-child,.bestelformulier .veldrij input{margin-bottom:0;}
.bestelformulier .veldrij{margin-bottom:8px;}
.bestel .veldnaam{display:block; margin:0;}
.bestel .veldnaam .klein{font-weight:400;}
/* Postcode en plaats horen op een regel: zo staan ze ook op een envelop. */
.veldrij{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:16px;}
.veldrij > div{display:flex; flex-direction:column; gap:8px; min-width:0;}
/* De keuzelijst met het pijltje van het ontwerp in plaats van dat van het
   besturingssysteem. */
.bestel select{
  appearance:none; -webkit-appearance:none; padding-right:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='none' stroke='%234C6E91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
}

/* WAT JE BESTELT: de miniatuur van de kaft met het aantal ernaast. */
.bestelkop-boek{display:grid; grid-template-columns:168px minmax(0,1fr);
  gap:24px; align-items:start;}
.bestel .omslag-mini{width:168px; max-width:none; margin:0; border-radius:6px;
  box-shadow:0 1px 0 var(--lijn-sterk), 0 0 0 1px var(--lijn);}
.bestelkop-tekst{display:flex; flex-direction:column; gap:16px; min-width:0;}
.bestelkop-tekst > *{margin:0;}
.aantalkeuze,.aantalregel{display:flex; flex-direction:column; gap:8px;}
.aantalkeuze select,.aantalregel select{width:100%; max-width:200px;}

/* WAT HET KOST: het ene warme vlak van dit scherm. */
.bestel .bestel-kosten{background:var(--warm-vlak); border-color:var(--warme-lijn);
  gap:20px;}
.bestel .bestel-kosten h2{font-size:26px;}
.rekening-spec{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:12px 16px; font-size:14px; align-items:baseline;}
.rekening-spec dt{color:var(--inkt-zacht); margin:0;}
.rekening-spec dd{margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.bestel-kosten .rekening-regels{border-top:1px solid var(--warme-lijn); padding-top:14px;}
.bestel-kosten .rekening-regels li{border-top-color:var(--warme-lijn);}
.bestel-kosten > .knop-hoofd{margin-top:4px;}

/* DE REKENING: een regel per boek, het bedrag rechts, een vet totaal -- de
   opbouw van Stripe Checkout, want dat is de pagina waar de klant hierna
   belandt. Dezelfde lijst op het formulier en op de terugval. */
.rekening-regels{list-style:none; padding:0; display:flex; flex-direction:column;}
.rekening-regels li{display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; padding:14px 0; border-top:1px solid var(--lijn);
  font-variant-numeric:tabular-nums;}
.rekening-regels li:first-child{border-top:none; padding-top:0;}
.rekening-regels .rekening-label{display:flex; flex-direction:column; gap:2px; min-width:0;}
.rekening-regels .sub{font-size:14px; line-height:1.5; color:var(--inkt-zacht);}
.rekening-regels .bedrag{white-space:nowrap;}
.rekening-regels .btwregel{color:var(--inkt-zacht);}
.rekening-regels li.som,.bestel-kosten .rekening-regels li.som{font-weight:600;
  font-size:17px; border-top:1.5px solid var(--inkt); padding-top:16px; padding-bottom:0;}
.bestel-kolom .rekening-regels{border-top:1px solid var(--lijn); padding-top:14px;}

@media (max-width:900px){
  .bestel-stappen{grid-template-columns:minmax(0,1fr);}
  .bestel-rechts{position:static;}
}
@media (max-width:700px){
  .bestel{gap:20px;}
  .bestel .kaart{padding:20px 18px;}
  .bestel-stappen,.bestel-links,.bestel-rechts,.bestel-kolom{gap:16px;}
  .bestelkop-boek{grid-template-columns:minmax(0,1fr); gap:16px;}
  .bestel .omslag-mini{width:140px;}
  /* De hoofdknop over de volle breedte: op een telefoon is dat de duim. */
  .bestel .knop-hoofd,.bestel .kaart > .knop-hoofd{width:100%; align-self:stretch;}
  .bestel-rij{flex-direction:column; align-items:stretch;}
  .bestel-rij button,.bestel .kaart > .knop-vlak{width:100%; align-self:stretch;}
  .bestel-rij .tekstknop{justify-content:center;}
}


/* ============================================================ het vraagvenster
 * De bevestigvraag (hx-confirm) in de stijl van de studio in plaats van het
 * grijze venster van de browser: wit, radius 16px, de vraag in gewone letters,
 * twee gewone knoppen. Het script staat in schil.js (`remoraVraag`). Stond tot
 * blok E in editor.css en gold alleen in de editor; nu voor elk scherm dat een
 * vraag stelt (ook het app-wachtwoord op Uploaden). GEEN `display` op de
 * <dialog> zelf: dan staat hij ook dicht in beeld. */
.vraagvenster{
  width:min(560px, calc(100% - 32px)); margin:auto; padding:24px;
  border:none; border-radius:var(--rond); background:var(--papier);
  color:var(--inkt); box-shadow:var(--schaduw);
}
.vraagvenster::backdrop{background:rgba(20,26,32,.55);}
.vraagvenster-kop{font-family:var(--serif); font-weight:500; font-size:30px;
  line-height:1.2; margin:0 0 12px;}
.vraagvenster-tekst{margin:0 0 20px; font-size:15px; line-height:1.6;}
.vraagvenster-knoppen{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end;}
@media (max-width:700px){
  .vraagvenster{width:100%; max-width:100%; margin:auto 0 0;
    border-radius:var(--rond) var(--rond) 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));}
  .vraagvenster-knoppen button{flex:1 1 100%;}
}

/* "PREMIUM" naast Layflat (papierkeuze en bestelscherm). Opdrachtgever,
   1 oktober 2026: "in een chique kleur in Remora branding stijl". Diep
   terracotta op papierwit met een haarlijn: 6,0:1, en leesbaar op zowel de
   witte als de gekozen (Warm Peach) kaart. Geen vlak in terracotta: dat blijft
   van de ene hoofdknop per scherm. */
.premium{
  display:inline-block; vertical-align:middle; margin-left:8px;
  padding:2px 10px 1px; border:1px solid var(--hoofdactie-diep);
  border-radius:999px; background:var(--papier); color:var(--hoofdactie-diep);
  font-family:var(--sans); font-size:12px; font-weight:600; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}

/* Op een telefoon blijft een invulveld 16px: onder die maat zoomt iOS Safari
   bij het aantikken vanzelf in. */
@media (max-width:700px){ input,select,textarea{font-size:16px;} }