/* Remora-schil.
 *
 * Kleuren komen uit de bestaande merkinstellingen (customer-compose.yml.tmpl):
 * petrol #4C6E91, terracotta #AA5E33, grond #FAFAF8, inkt #2C3E4F. Niets
 * hier is nieuw bedacht -- het is wat de studio en PhotoPrism al gebruiken.
 *
 * Lettertypen zijn bewust van het systeem: geen webfont die de klant moet
 * downloaden voordat hij iets ziet. Deze mensen zitten soms op een trage
 * verbinding op een moeilijke dag.
 */

: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;
  --schaduw:0 1px 2px rgba(44,62,79,.06), 0 4px 12px rgba(44,62,79,.05);
  --rond:10px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--grond); color:var(--inkt);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.binnen{max-width:1120px; margin:0 auto; padding:0 20px;}
main.binnen{padding-top:32px; padding-bottom:80px;}

h1{
  font-family:Georgia,"Times New Roman",serif; font-weight:400;
  font-size:clamp(27px,4.4vw,36px); line-height:1.15; letter-spacing:-.01em;
  margin:0 0 12px;
}
h2{font-size:17px; font-weight:600; margin:0 0 6px;}
p{margin:0 0 14px;}
a{color:var(--petrol);}
.lead{font-size:17px; color:var(--inkt-zacht); max-width:62ch;}

/* ---------------------------------------------------- kopbalk */
.balk{
  background:var(--papier); border-bottom:1px solid var(--lijn);
  position:sticky; top:0; z-index:30;
  padding-top:env(safe-area-inset-top);
}
.balk .binnen{display:flex; align-items:center; gap:20px; height:58px;}
.merk{
  font-family:Georgia,serif; font-size:21px; color:var(--inkt);
  text-decoration:none; letter-spacing:-.01em; flex:none;
}
.tabs{display:flex; gap:2px; margin-left:8px; overflow-x:auto; flex:1;
  scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs a{
  padding:8px 14px; border-radius:99px; text-decoration:none;
  color:var(--inkt-zacht); font-size:15px; white-space:nowrap;
}
.tabs a:hover{background:var(--petrol-vlak);}
.tabs a.aan{background:var(--petrol); color:#fff; font-weight:500;}
.uit{font-size:14px; color:var(--inkt-vaag); text-decoration:none; flex:none;}
.uit:hover{color:var(--inkt);}

/* ---------------------------------------------------- inloggen */
.inlogvak{
  max-width:380px; margin:12vh auto 0; background:var(--papier);
  border:1px solid var(--lijn); border-radius:14px; padding:34px 32px;
  box-shadow:var(--schaduw);
}
.inlogvak h1{font-size:32px; text-align:center; margin-bottom:6px;}
.inlogvak .lead{font-size:15px; text-align:center; margin-bottom:24px;}
.inlogvak form label{margin-top:14px;}
.inlogvak form button{margin-top:18px; width:100%;}

/* ---------------------------------------------------- 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:8px 16px; margin:0 0 14px;}
.photosync dt{font-size:13px; font-weight:600; color:var(--inkt-zacht);}
.photosync dd{margin:0; overflow-wrap:anywhere;}
.photosync code{font-size:15px;}
.photosync .appww{font-size:18px; letter-spacing:.04em; user-select:all;}
@media (max-width:520px){.photosync{grid-template-columns:1fr; gap:2px;} .photosync dd{margin-bottom:8px;}}
label{display:block; font-size:13px; font-weight:600; color:var(--inkt-zacht);
  margin-bottom:6px;}
input[type=password],input[type=text],input[type=email]{
  width:100%; padding:12px 14px; font-size:16px; color:var(--inkt);
  border:1px solid var(--lijn-sterk); border-radius:8px; background:var(--grond);
}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--petrol); outline-offset:2px;
}
button{
  font:inherit; cursor:pointer; border:none; border-radius:8px;
  background:var(--petrol); color:#fff; padding:12px 20px; font-weight:500;
  margin-top:16px; width:100%;
}
button:hover{background:var(--petrol-diep);}

/* ---------------------------------------------------- hoofdstukken */
.albums{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px; margin:26px 0 22px;
}
.album{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:16px 18px; text-decoration:none; color:var(--inkt);
  transition:border-color .12s, transform .12s;
}
.album:hover{border-color:var(--petrol); transform:translateY(-1px);}
.album-titel{font-size:15.5px; line-height:1.3;}
.album-aantal{
  font-size:13px; color:var(--inkt-vaag); font-variant-numeric:tabular-nums;
  background:var(--grond); border-radius:99px; padding:3px 10px; flex:none;
}
.album.bijzonder{background:var(--terra-vlak); border-color:#F3DED4;}
.album.bijzonder .album-aantal{background:#fff;}
.voetnoot{font-size:14px; color:var(--inkt-zacht); max-width:62ch;}

/* ---------------------------------------------------- hoofdstukscherm */
.kruimels{font-size:14px; color:var(--inkt-vaag); margin-bottom:10px;}
.kruimels a{color:var(--inkt-zacht);}
.kop{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
.tel{font-size:14.5px; color:var(--inkt-zacht); margin:0;}
.springer{
  display:flex; gap:6px; overflow-x:auto; padding:14px 0 16px;
  scrollbar-width:none;
}
.springer::-webkit-scrollbar{display:none;}
.springer a{
  font-size:13.5px; padding:6px 12px; border-radius:99px; white-space:nowrap;
  background:var(--papier); border:1px solid var(--lijn); color:var(--inkt-zacht);
  text-decoration:none;
}
.springer a.aan{background:var(--inkt); border-color:var(--inkt); color:#fff;}

/* ---------------------------------------------------- het raster */
.raster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
@media (max-width:520px){
  .raster{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px;}
}
.tegel{
  position:relative; margin:0; aspect-ratio:1; overflow:hidden;
  border-radius:8px; background:var(--petrol-vlak);
}
.tegel img{width:100%; height:100%; object-fit:cover; display:block;}
.tegel.favoriet{outline:3px solid var(--terra); outline-offset:-3px;}

/* Sterretje: altijd zichtbaar op aanraakschermen, want daar bestaat hover
   niet. Op een muisscherm pas bij hover, zodat het raster rustig blijft. */
.tegel .ster{position:absolute; left:6px; bottom:6px; margin:0;}
.tegel .ster button{
  width:34px; height:34px; padding:0; margin:0; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.tegel .ster svg{fill:none; stroke:var(--inkt-zacht); stroke-width:1.6;}
.tegel.favoriet .ster svg{fill:var(--terra); stroke:var(--terra);}
.tegel .ster button:hover{background:#fff;}

.tegel .verplaats{
  position:absolute; right:6px; bottom:6px; margin:0; padding:0;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9);
  display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.tegel .verplaats svg{fill:none; stroke:var(--inkt-zacht); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;}
.tegel .verplaats:hover{background:#fff;}
.tegel.bezig{opacity:.45;}
@media (hover:hover){
  .tegel .ster,.tegel .verplaats{opacity:0; transition:opacity .12s;}
  .tegel:hover .ster,.tegel:hover .verplaats,
  .tegel:focus-within .ster,.tegel:focus-within .verplaats{opacity:1;}
  .tegel.favoriet .ster{opacity:1;}
}
.soort{
  position:absolute; top:6px; right:6px; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; background:rgba(44,62,79,.75); color:#fff;
  padding:2px 7px; border-radius:99px;
}
.tegel .fout{
  position:absolute; inset:auto 0 0 0; margin:0; font-size:11px;
  background:var(--fout); color:#fff; padding:5px 8px;
}

/* ---------------------------------------------------- uploaden */
.stappen{list-style:none; counter-reset:s; padding:0; margin:26px 0;}
.stappen li{
  counter-increment:s; position:relative; padding-left:52px; margin-bottom:24px;
}
.stappen li::before{
  content:counter(s); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:50%; background:var(--petrol-vlak);
  color:var(--petrol); font-weight:600; font-size:15px;
  display:grid; place-items:center;
}
.pad{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
  background:var(--petrol-vlak); padding:8px 12px; border-radius:6px;
  overflow-wrap:anywhere; color:var(--inkt);
}
.notitie{
  background:var(--terra-vlak); border-left:3px solid var(--terra);
  padding:16px 20px; border-radius:0 var(--rond) var(--rond) 0; max-width:64ch;
}
/* 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-weight:700; margin-bottom:4px;}

.leeg{color:var(--inkt-vaag); 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;
}

.melding{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--inkt); color:#fff; padding:11px 20px; border-radius:99px;
  font-size:14.5px; box-shadow:var(--schaduw); z-index:50;
}

@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.
 */
.kiezer{
  border:none; padding:0; background:var(--papier); color:var(--inkt);
  border-radius:16px; box-shadow:0 12px 40px rgba(44,62,79,.22);
  width:min(420px,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:18px 20px 12px; border-bottom:1px solid var(--lijn); margin:0;
}
.kiezer-kop h2{margin:0; font-size:17px;}
.kiezer-kop button{
  width:32px; height:32px; margin:0; padding:0; border-radius:50%;
  background:var(--grond); color:var(--inkt-zacht); font-size:20px; line-height:1;
}
.kiezer-kop button:hover{background:var(--lijn); color:var(--inkt);}
.kiezer-lijst{padding:8px; overflow-y:auto; max-height:60vh;}
.kiezer-lijst button{
  width:100%; margin:0; padding:14px 14px; border-radius:8px; background:none;
  color:var(--inkt); text-align:left; font-size:15.5px; font-weight:400;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  min-height:48px;                       /* aanraakvlak, niet kleiner */
}
.kiezer-lijst button:hover{background:var(--petrol-vlak);}
.kiezer-aantal{
  font-size:13px; color:var(--inkt-vaag); font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .kiezer{
    width:100%; max-width:100%; margin:auto auto 0; border-radius:18px 18px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .kiezer-lijst{max-height:56vh;}
}

.melding.slecht{background:var(--fout);}

/* ---------------------------------------------------- mensen */
.kopje{font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--inkt-vaag); margin:34px 0 10px;}
.lead.klein{font-size:15px;}

.gezichten{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px; margin-bottom:10px;}
.gezicht{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:14px; text-align:center; margin:0;
}
.gezicht img,.geen-beeld{
  width:100px; height:100px; border-radius:50%; object-fit:cover;
  display:block; margin:0 auto 10px; background:var(--petrol-vlak);
}
.gezicht input[type=text]{margin-bottom:8px; text-align:center;}
.gezicht button{margin-top:0; padding:9px 14px; font-size:14px;}
.gezicht-aantal{display:block; margin-top:8px; font-size:12.5px; color:var(--inkt-vaag);}
.gezicht-naam{display:block; font-size:15.5px; font-weight:500;}
.gezicht.benoemd{border-color:var(--goed);}

.personen{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px;}
.personen li{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--rond); padding:13px 18px;
}
.personen li.uit{background:var(--terra-vlak); border-color:#F3DED4;}
.personen li.uit .p-naam{text-decoration:line-through; color:var(--inkt-zacht);}
.p-naam{font-size:16px; flex:1;}
.p-aantal{font-size:13px; color:var(--inkt-vaag); font-variant-numeric:tabular-nums;}
.personen form{margin:0;}
.schakel{
  margin:0; width:auto; padding:8px 14px; font-size:13.5px; font-weight:400;
  background:var(--grond); color:var(--inkt-zacht); border:1px solid var(--lijn-sterk);
  min-height:40px;
}
.schakel:hover{background:var(--petrol-vlak); color:var(--inkt);}
li.uit .schakel{background:#fff;}

/* ---------------------------------------------------- kaarten, boek, limiet */
.kaart{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:22px 24px; margin:20px 0; max-width:64ch;
}
.kaart h2{margin-bottom:10px;}
.klein{font-size:14px; color:var(--inkt-zacht);}
.klein.waarschuwing{color:var(--terra); margin-bottom:0;}
.limiet{border-color:var(--lijn-sterk);}

.aantalkeuze{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0;}
.chip{margin:0;}
.chip input{position:absolute; opacity:0; width:0; height:0;}
.chip span{
  display:inline-block; padding:10px 18px; border-radius:99px; cursor:pointer;
  border:1px solid var(--lijn-sterk); background:var(--grond); font-size:15px;
  min-height:44px; line-height:24px;
}
.chip input:checked + span{background:var(--petrol); border-color:var(--petrol); color:#fff;}
.chip input:focus-visible + span{outline:2px solid var(--petrol); outline-offset:2px;}
.aantalkeuze button{width:auto; margin:0;}

.downloads{list-style:none; padding:0; margin:0; display:grid; gap:12px;}
.downloads li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--lijn);
}
.downloads li:last-child{border-bottom:none;}
.knop{
  display:inline-block; background:var(--petrol); color:#fff; text-decoration:none;
  padding:11px 18px; border-radius:8px; font-size:14.5px; min-height:44px;
  line-height:22px;
}
.knop:hover{background:var(--petrol-diep);}

/* DE VLAKKE KNOP: de handeling die NIET de volgende stap is.
 *
 * Hij stond alleen in editor.css, en die stylesheet laden de schilschermen
 * niet. Gevolg, gemeten op 8 september 2026: elke `knop-vlak` op /boek viel
 * terug op de basisstijl -- vol petrol, over de hele breedte -- en stond dus
 * even luid op het scherm als de knop waar het scherm om draait. Dat gold voor
 * "Duidelijk", voor "Terug naar ons advies" en voor "Stel opnieuw samen", en
 * juist bij die laatste staat in het sjabloon geschreven dat hij vlak hoort te
 * zijn omdat hij geld kost en niet de volgende stap is.
 *
 * Dezelfde vorm als in editor.css, met opzet: de klant komt ze allebei tegen.
 */
.knop-vlak{
  display:inline-block; width:auto; margin-top:0;
  font-size:14px; text-decoration:none; color:var(--petrol); font-weight:500;
  border:1px solid var(--lijn-sterk); border-radius:6px; padding:10px 14px;
  background:var(--papier); min-height:40px;
}
.knop-vlak:hover:not(:disabled){background:var(--petrol-vlak); border-color:var(--petrol);}
/* Uitgeschakeld en toch leesbaar: deze knop staat er juist OM te laten zien dat
   een vergissing terug te draaien is. Wegdoezelen tot hij niet meer te lezen is
   haalt precies die belofte weg. */
.knop-vlak:disabled{color:var(--inkt-vaag); border-color:var(--lijn);
  background:var(--grond); cursor:default;}

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

/* De kopbalk op een iPhone. Gemeten: tabbalk 152 px zichtbaar van 466 px
   inhoud; "Mensen" en "Boek" vielen buiten beeld en er was geen scrollbalk
   om te verraden dat ze bestonden. Oorzaak: .uit met flex:none pakte 88 px. */
@media (max-width:640px){
  .balk .binnen{height:auto; padding-top:8px; padding-bottom:6px;
    flex-wrap:wrap; gap:8px 12px;}
  .merk{font-size:19px;}
  .uit{order:3; font-size:13px;}
  .tabs{order:4; width:100%; margin-left:0; flex:1 0 100%;
    padding-bottom:2px; gap:0;}
  .tabs a{padding:9px 10px; font-size:14.5px;}

  /* WIKKELEN IN PLAATS VAN SCHUIVEN, sinds er vijf tabbladen zijn.
     Gemeten op een iPhone (375 px): de vijf tabs zijn samen 398 px breed en
     de balk is er 335. Ze schoven dus horizontaal, en "Fotoboek maken" --
     de VOLGENDE stap in de flow -- stond buiten beeld met niets dat verraadde
     dat hij bestond. Dat is precies de fout die op 28 augustus 2026 al eens
     is gerepareerd toen "Mensen" en "Boek" wegvielen.

     Wikkelen kost een regel hoogte en laat alles zien. Kleiner maken was het
     alternatief en viel af: dan wordt het laatste tabblad "Boe" -- een half
     woord, wat de kop van dit blok net verbiedt. */
  .tabs{flex-wrap:wrap; overflow-x:visible; row-gap:4px;}
}

/* Aanraakvlakken. Gemeten 34x34 met 28 px ertussen; Apple's ondergrens is 44.
   Mis je de ster en raak je verplaatsen, dan opent een blad (herstelbaar).
   Andersom verandert stil het sterkste signaal in het systeem. */
.tegel .ster button,.tegel .verplaats{
  width:44px; height:44px;
}
.tegel .ster{left:4px; bottom:4px;}
.tegel .verplaats{right:4px; bottom:4px;}
@media (max-width:520px){
  .raster{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));}
}

/* Tikken om te vergroten. */
.tegel .vergroot{
  display:block; width:100%; height:100%; padding:0; margin:0;
  border:none; border-radius:0; background:none; cursor:zoom-in;
}
.tegel .vergroot:focus-visible{outline:2px solid var(--petrol); outline-offset:-4px;}
.groot-venster{
  border:none; padding:0; background:transparent; max-width:100vw; max-height:100vh;
  width:100%; height:100%; overflow:hidden;
}
.groot-venster::backdrop{background:rgba(20,26,32,.92);}
.groot-venster img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.groot-sluit{
  position:fixed; top:calc(12px + env(safe-area-inset-top)); right:12px;
  width:44px; height:44px; margin:0; padding:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--inkt); font-size:22px; line-height:1;
}

/* De personenschakelaar. De doorhaling is weg: een doorgestreepte naam van een
   familielid in een gedenkproduct leest als "geschrapt". */
.personen li.uit{background:var(--grond); border-color:var(--lijn);}
.personen li.uit .p-naam{text-decoration:none; color:var(--inkt-vaag);}
.schakel.aan{
  background:var(--petrol-vlak); border-color:var(--petrol);
  color:var(--petrol); font-weight:500;
}

.melding-inline{
  background:var(--petrol-vlak); border-radius:8px; padding:12px 14px;
  font-size:14.5px; color:var(--inkt); margin-bottom:16px;
}

/* De toast stond op bottom:24px zonder veilige zone: op een iPhone met
   home-indicator landde hij in de veegzone. */
.melding{bottom:calc(24px + env(safe-area-inset-bottom));}

/* Het kiezerblad sleepte de pagina eronder mee bij doorscrollen. */
.kiezer-lijst{overscroll-behavior:contain;}

/* Uitloggen is een formulier geworden (POST): een prefetcher die de link
   volgde, logde de klant anders uit. */
form.uit{margin:0; flex:none;}
form.uit button{
  margin:0; padding:6px 10px; width:auto; min-height:auto;
  background:none; color:var(--inkt-vaag); font-size:14px; font-weight:400;
}
form.uit button:hover{background:none; color:var(--inkt); text-decoration:underline;}

/* ---------------------------------------------------- voortgang en filter */
.voortgang{margin:4px 0 12px; max-width:420px;}
/* Heette .balk, net als de kopbalk -- en erfde daardoor position:sticky,
   z-index:30 en een border-bottom. Naamsbotsing in mijn eigen CSS. */
.voortgang .meter{
  height:6px; background:var(--lijn); border-radius:99px; overflow:hidden;
}
.voortgang .meter span{
  display:block; height:100%; width:0; background:var(--petrol);
  border-radius:99px; transition:width .25s;
}
.voortgang-tekst{
  margin:7px 0 0; font-size:13.5px; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;
}

.filters{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px;}
.filter,.opnieuw{
  margin:0; width:auto; min-height:44px; padding:10px 16px; font-size:14.5px;
  font-weight:400; border-radius:99px; border:1px solid var(--lijn-sterk);
  background:var(--papier); color:var(--inkt-zacht);
}
.filter:hover,.opnieuw:hover{background:var(--petrol-vlak); color:var(--inkt);}
.filter.aan{background:var(--inkt); border-color:var(--inkt); color:#fff;}
.opnieuw{margin-left:auto; border-style:dashed; color:var(--inkt-vaag);}

/* Gehad: rustiger, niet doorgestreept en niet grijs weggezet. Het is een
   hulpmiddel om je plek te vinden, geen oordeel over de foto. */
.tegel.gehad img{opacity:.55;}
.tegel.gehad:hover img{opacity:1;}
.tegel.gehad::after{
  content:""; position:absolute; top:6px; left:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--petrol); box-shadow:0 0 0 2px rgba(255,255,255,.85);
}
.tegel.favoriet.gehad img{opacity:1;}

.leeg-filter{color:var(--inkt-vaag); padding:30px 0;}

.filter-hint{
  align-self:center; font-size:13.5px; color:var(--inkt-vaag);
  padding-left:4px;
}
@media (max-width:560px){
  .filter-hint{flex:1 0 100%; padding:2px 0 0;}
  .opnieuw{margin-left:0;}
}

/* ================================================================
 * Uit de UX-review van 28 augustus, tweede ronde.
 * ================================================================ */

/* De tegel draagt nog maar EEN knop. Twee van 44 px naast elkaar dwongen een
 * tegel van 112 px, en dat kostte de derde kolom op een iPhone: 39,7 schermen
 * scrollen in plaats van 18. De verplaatsknop staat nu in het grote venster.
 * Deze regel overschrijft de eerdere 112px-override bewust. */
@media (max-width:520px){
  .raster{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px;}
}

/* De stip alleen op tegels ZONDER ster. Bij 70% gesterd stonden er 264
 * stippen waarvan er 263 niets toevoegden aan de ring die er al was. */
.tegel.favoriet.gehad::after{display:none;}

/* 55% dekking is de universele weergave voor uitgeschakeld. In een
 * gedenkproduct leest een verbleekte foto als de afvalstapel -- hetzelfde
 * argument waarmee de doorhaling bij personen al is weggehaald. */
.tegel.gehad img{opacity:.85;}

/* Bij 70% gesterd is de ster de normaaltoestand en zijn de 109 zonder ster de
 * uitzondering. Een ring van 3 px op de meerderheid maakt het raster
 * onleesbaar; 2 px is nog steeds ondubbelzinnig. */
.tegel.favoriet{outline-width:2px;}

.tel.opdracht{
  max-width:56ch; font-size:15px; color:var(--inkt); line-height:1.5;
}
.filter-getal{opacity:.7; font-variant-numeric:tabular-nums;}

/* "Begin opnieuw" stond 6 px onder "Alles" op een iPhone, zelfde vorm, zelfde
 * hoogte -- precies waar een duim landt die naar het filter reikt. */
.onderaan{margin:32px 0 0; text-align:center;}
.onderaan .opnieuw{
  margin:0; width:auto; background:none; border:none; text-decoration:underline;
  color:var(--inkt-vaag); font-size:13.5px; min-height:44px;
}
.onderaan .opnieuw:hover{color:var(--inkt); background:none;}

/* Het grote venster draagt nu de handelingen. */
.groot-balk{
  position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px;
  justify-content:center; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(20,26,32,.92), rgba(20,26,32,0));
}
.groot-balk button{
  margin:0; width:auto; min-height:48px; padding:12px 22px; font-size:15px;
  border-radius:99px; background:rgba(255,255,255,.92); color:var(--inkt);
}
.groot-balk button:hover{background:#fff;}
.groot-balk .hoofdzaak{background:var(--petrol); color:#fff; font-weight:500;}
.groot-balk .hoofdzaak:hover{background:var(--petrol-diep);}
@media (max-width:420px){
  .groot-balk button{padding:12px 16px; font-size:14px;}
}

/* Lange en korte vorm van een tablabel. */
.tabs .kort{display:none;}
@media (max-width:640px){
  .tabs .lang{display:none;}
  .tabs .kort{display:inline;}
}

/* ---------------------------------------------------- analysevoortgang */
.stand{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:20px 22px; margin:22px 0; max-width:62ch;
}
.stand h2{margin-bottom:12px;}
.stand .meter{
  height:8px; background:var(--lijn); border-radius:99px; overflow:hidden;
  margin-bottom:9px;
}
.stand .meter span{
  display:block; height:100%; background:var(--petrol); border-radius:99px;
  transition:width .4s;
}
.stand-tekst{
  margin:0 0 10px; font-size:14.5px; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;
}
.stand .knop{margin-top:6px;}
.stand.geanalyseerd{border-color:var(--goed); background:#F4F9F6;}
.stand.geanalyseerd .meter span{background:var(--goed);}
.stand.onbereikbaar,.stand.geen_geboortedatum{
  background:var(--terra-vlak); border-color:#F3DED4;
}

/* ---------------------------------------------------- blokkoppen
 * Een plek om te stoppen in een lang hoofdstuk. Bij 2400 tegels is de pagina
 * 113 schermen hoog; dat is geen prestatieprobleem (gemeten: 68 ms opbouw,
 * 60 beeldjes per seconde bij het schuiven) maar wel een menselijk probleem.
 */
.blokkop{
  grid-column:1 / -1; margin:22px 0 2px; font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--inkt-vaag);
  font-variant-numeric:tabular-nums;
}
.blokkop:first-child{margin-top:0;}
.blokkop span{font-weight:400; text-transform:none; letter-spacing:0;}

/* Bij een actief filter kloppen de nummers niet meer -- dan zijn er gaten in
   de reeks. Verbergen is eerlijker dan meetellen van wat je niet ziet. */
.raster.gefilterd .blokkop{display:none;}

/* De bevestigknop op een werklijstje. Rechtsonder, waar op een gewoon
   hoofdstuk niets staat -- de ster blijft linksonder op zijn plek. */
.tegel .klopt{
  position:absolute; right:4px; bottom:4px; margin:0; padding:0;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.tegel .klopt svg{fill:none; stroke:var(--goed); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;}
.tegel .klopt:hover{background:#fff;}
@media (hover:hover){
  .tegel .klopt{opacity:0; transition:opacity .12s;}
  .tegel:hover .klopt,.tegel:focus-within .klopt{opacity:1;}
}

/* ---------------------------------------------------- meerdere kiezen */
.kies{
  margin:0; width:auto; min-height:44px; padding:10px 16px; font-size:14.5px;
  font-weight:400; border-radius:99px; border:1px dashed var(--lijn-sterk);
  background:var(--papier); color:var(--inkt-zacht);
}
.kies:hover{background:var(--petrol-vlak); color:var(--inkt);}
.kies.aan{background:var(--terra); border-color:var(--terra); border-style:solid;
  color:#fff;}

/* In de kiesmodus zijn de knoppen op de tegel uit: de tik kiest, en mag niet
   met de ster of de vergroter vechten. */
.raster.kiesmodus .tegel .ster,
.raster.kiesmodus .tegel .klopt{display:none;}
.raster.kiesmodus .tegel{cursor:pointer;}
.raster.kiesmodus .tegel::before{
  content:""; position:absolute; top:6px; left:6px; z-index:2;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.9); border:2px solid var(--inkt-vaag);
}
/* NIET terracotta: dat is de kleur van de sterrand, en bij deze klant heeft
   70% van de foto's een ster. Een selectie in dezelfde kleur is dan
   onzichtbaar. Donkerblauw contrasteert met beide toestanden. */
/* LET OP DE SPECIFICITEIT. Dit stond als `.tegel.gekozen::before` (twee
   klassen) terwijl de lege staat `.raster.kiesmodus .tegel::before` is (drie
   klassen). De lege regel won dus altijd en het bolletje bleef wit, ook al
   kreeg de tegel wel zijn blauwe rand. Vandaar de volledige keten hier.

   Van binnen naar buiten: blauw, een witte ring, en daarbuiten de rand die
   het bolletje ook ongekozen heeft. */
.raster.kiesmodus .tegel.gekozen::before{
  background:var(--inkt);
  box-shadow:inset 0 0 0 3px #fff;
}
.tegel.gekozen{outline:4px solid var(--inkt); outline-offset:-4px;}
.tegel.gekozen img{opacity:1;}
.tegel.gekozen::after{display:none;}          /* geen gezien-stip erbovenop */

.selectiebalk{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--inkt); color:#fff;
  box-shadow:0 -2px 16px rgba(44,62,79,.25);
}
/* HET ATTRIBUUT `hidden` VERLIEST VAN DE `display:flex` HIERBOVEN, en daarmee
 * stond deze balk ALTIJD op het scherm. `hidden` is niet meer dan een
 * browserstijl `display:none` met de laagste voorrang; elke eigen
 * display-regel wint ervan. Het script schakelt hem keurig
 * (`balk.hidden = ...`), en er lag een donkere strook van de volle breedte
 * onderaan elke hoofdstukpagina, over de onderste rij foto's heen -- met
 * "0 gekozen" erin. Juist op het scherm waar de klant sterretjes zet, en dat
 * is volgens paragraaf 2 van het projectgeheugen het sterkste signaal in het
 * hele systeem.
 *
 * Gemeld in de UX-doorloop van 2 september 2026 als "een zwarte balk over de
 * onderste rij foto's" en toen niet opgevolgd; op 10 september teruggevonden
 * door de hele schil af te zoeken op elementen die op `hidden` leunen terwijl
 * ze zelf een display zetten. Van de 27 zulke elementen was dit de enige.
 *
 * Bewust geen globale `[hidden]{display:none!important}`: die raakt elk
 * element in de schil, ook de panelen die met data-attributen worden
 * geschakeld, en kan daar stil iets anders breken. Eén regel bij het element
 * dat de fout maakt -- net als bij `.sleep-geest[hidden]` in editor-spread.css,
 * waar dezelfde val op 10 september al een keer toesloeg. */
.selectiebalk[hidden]{display:none;}
.sel-aantal{font-size:15px; flex:none;}
.sel-knoppen{display:flex; gap:8px; flex:1; flex-wrap:wrap;}
.selectiebalk button{
  margin:0; width:auto; min-height:44px; padding:11px 16px; font-size:14.5px;
  border-radius:99px; background:rgba(255,255,255,.15); color:#fff;
  font-weight:400;
}
.selectiebalk button:hover{background:rgba(255,255,255,.28);}
.selectiebalk .hoofdzaak{background:#fff; color:var(--inkt); font-weight:500;}
.selectiebalk .hoofdzaak:hover{background:var(--grond);}
.sel-sluit{flex:none; width:44px; padding:0 !important; font-size:22px; line-height:1;}
@media (max-width:520px){
  .sel-aantal{flex:1 0 100%;}
  .selectiebalk button{padding:11px 13px; font-size:14px;}
}

/* ---------------------------------------------------- personen, compact
 * Eén regel per persoon in plaats van vier verdiepingen. Dat was 190 px per
 * persoon; elf personen werd een pagina van 2.700 px. Nu ~68 px, ook op een
 * iPhone van 375 px breed.
 */
.personen li{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  padding:11px 12px;
}
.p-beeld{
  width:44px; height:44px; 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:17px; font-weight:600;
}
.p-naam{
  flex:1; min-width:0; font-size:15.5px; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.p-aantal{
  display:block; font-size:12.5px; color:var(--inkt-vaag);
  font-variant-numeric:tabular-nums;
}
.p-aantal::after{content:" foto\0027 s";}
.personen li.uit .p-beeld{opacity:.5;}
.personen li.uit .p-naam{color:var(--inkt-vaag);}
.personen form{margin:0; flex:none;}

/* Hernoemen: een potloodje dat een veld uitklapt. Elf invoervelden tegelijk
   maken van een lijstje een formulier, en hernoemen is de zeldzame handeling. */
.p-hernoem{margin:0; flex:none; position:relative;}
.p-hernoem summary{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  list-style:none; color:var(--inkt-vaag); border-radius:50%;
}
.p-hernoem summary::-webkit-details-marker{display:none;}
.p-hernoem summary::after{content:"\270E"; font-size:17px;}
.p-hernoem summary:hover{background:var(--petrol-vlak); color:var(--inkt);}
.p-hernoem[open] summary{background:var(--petrol-vlak); color:var(--inkt);}
.p-hernoem form{
  position:absolute; right:0; top:48px; z-index:5;
  display:flex; gap:6px; padding:10px; border-radius:10px;
  background:var(--papier); border:1px solid var(--lijn-sterk);
  box-shadow:0 6px 20px rgba(44,62,79,.16);
}
.p-hernoem input{width:150px; padding:10px 11px; font-size:15px; min-height:44px;}
.p-hernoem button{margin:0; width:auto; padding:10px 14px; font-size:14px;
  min-height:44px; white-space:nowrap;}

.schakel{
  margin:0; width:auto; padding:9px 13px; font-size:13.5px; font-weight:400;
  min-height:44px; white-space:nowrap;
  background:var(--grond); color:var(--inkt-zacht);
  border:1px solid var(--lijn-sterk);
}
.schakel:hover{background:var(--petrol-vlak); color:var(--inkt);}
.schakel.aan{
  background:var(--petrol-vlak); border-color:var(--petrol);
  color:var(--petrol); font-weight:500;
}
li.uit .schakel{background:#fff;}

@media (max-width:420px){
  .personen li{gap:8px; padding:10px;}
  .p-beeld{width:40px; height:40px;}
  .p-naam{font-size:15px;}
  .schakel{padding:9px 10px; font-size:13px;}
  .p-hernoem form{right:-8px;}
  .p-hernoem input{width:120px;}
}

/* ---------------------------------------------------- gezichten in een foto */
.groot-balk .groot-mensen{display:inline-flex; align-items:center; gap:7px;}
.groot-balk .groot-mensen svg{
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

.gezichtenblad{width:min(460px,calc(100% - 32px));}
.gezichtenlijst{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.gezichtenlijst li{
  display:flex; align-items:center; gap:12px;
  padding:8px; border-radius:10px; 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-vaag);}
.gezichtenlijst form{display:flex; gap:6px; flex:1; min-width:0; margin:0;}
.gezichtenlijst input{flex:1; min-width:0; padding:11px 12px; font-size:15px;
  min-height:44px;}
.gezichtenlijst button{margin:0; width:auto; padding:11px 14px; font-size:14px;
  min-height:44px; white-space:nowrap;}

.gezichtenlijst li.benoemd{background:#F4F9F6; padding:14px 16px; font-size:15.5px;}
.gezichtenlijst .vinkje{color:var(--goed); font-size:18px; flex:none;}

.gezichtenblad .klein{margin:14px 2px 2px; font-size:13.5px;}

/* ---------------------------------------------------- de controlevraag
 * De geboortedatum bevestigen of zelf verbeteren. Dit is de poort naar de
 * analyse: zolang hier geen antwoord staat begint er niets. Zie
 * app/bevestiging.py voor waarom.
 */
.datumvraag{border-color:var(--lijn-sterk);}
.datumvraag p{max-width:58ch;}

/* `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:10px; 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{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(--petrol);
  border:1px solid var(--lijn-sterk);
}
.knop.kaal:hover{background:var(--petrol-vlak);}

.veldlabel{display:block; font-size:13px; font-weight:600;
  color:var(--inkt-zacht); margin-bottom:6px;}
.datumvraag input[type=date]{
  padding:12px 14px; font-size:16px; color:var(--inkt); max-width:100%;
  border:1px solid var(--lijn-sterk); border-radius:8px; background:var(--grond);
}
.datumvraag .fout{color:var(--fout); font-size:14.5px; margin-bottom:0;}

/* Wachten op de klant is geen storing en geen voortgang. Petrol-vlak dus, niet
 * het terracotta van onbereikbaar en niet het groen van klaar. */
.stand.wacht_op_bevestiging{
  background:var(--petrol-vlak); border-color:#D6E2ED;
}

/* 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);}

/* ---------------------------------------------------- de drie voorbeelden
 * Het eerste wat een klant van het product ziet. De volgorde van de tekst is
 * met opzet (app/proef.py): eerst wat we doen, dan de voorbeelden, dan waar de
 * beschrijvingen voor dienen, en pas dan de prijs.
 */
.voorbeeldrij{
  list-style:none; padding:0; margin:18px 0; display:grid; gap:18px;
  grid-template-columns:repeat(3, 1fr);
}
/* Drie naast elkaar worden op een telefoon drie onleesbare postzegels met
 * onleesbare tekst eronder. Onder de 640 px dus onder elkaar, op ware grootte:
 * de foto IS het argument op dit scherm. */
@media (max-width:640px){ .voorbeeldrij{grid-template-columns:1fr;} }
.voorbeeldrij img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:8px; background:var(--petrol-vlak);
}
.voorbeeldrij .geen-beeld{
  width:100%; aspect-ratio:1; border-radius:8px; background:var(--petrol-vlak);
}
.voorbeeldrij p{margin:10px 0 0;}
.voorbeeldrij details{margin-top:8px;}
.voorbeeldrij summary{
  font-size:13.5px; color:var(--petrol); cursor:pointer; padding:6px 0;
}
.voorbeeldrij details p{margin-top:8px;}
.voorbeelden .knop{margin-top:6px;}

/* De uitkomst van de tweede ronde. Een aparte alinea onder de uitleg, met een
 * lijntje ervoor: het is nieuws over wat er gebeurd is, geen toelichting op de
 * stand. Zonder scheiding lezen de twee als één lange zin. */
.stand .verslag{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--lijn);
}
/* Gestopt is geen storing en geen voortgang: de wachter pakt het vanzelf op.
 * Zandkleur dus, niet het terracotta van onbereikbaar. */
.stand.gestopt{background:#FDF6EC; border-color:#F0E0C8;}

/* 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; }


/* ------------------------------------------------------------------ *
 * Het bestelscherm.
 *
 * Bewust karig. De klant heeft net honderd foto's van een overledene
 * doorgenomen; dit is de kassa, en een kassa hoort rustig te zijn. Geen
 * accentkleur, geen tweede aanbod, één prijs die groot genoeg is om zonder
 * zoeken te vinden.
 * ------------------------------------------------------------------ */
.kaart-fout{
  border-left:4px solid var(--terra);
  background:var(--terra-vlak, #FBF0EA);
}
.kaart-fout p{margin:0;}

.prijs{font-size:19px; margin:14px 0 6px;}
.prijs b{font-weight:600;}

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

/* Het formulier. Volle breedte binnen de kaart: een adresveld dat halverwege
   ophoudt nodigt uit tot afkorten, en een afgekapt adres is een boek dat
   nergens aankomt. */
.bestelformulier input,
.bestelformulier select{
  width:100%; padding:11px 12px; margin:0 0 14px;
  border:1px solid var(--lijn); border-radius:8px;
  font:inherit; font-size:16px;   /* 16px: iOS zoomt in onder de 16 */
  background:var(--papier); color:var(--inkt);
}
.bestelformulier input:focus,
.bestelformulier select:focus{
  outline:none; border-color:var(--petrol);
  box-shadow:0 0 0 3px rgba(76,110,145,.14);
}
.bestelformulier .veldnaam{display:block; margin-bottom:5px;}
/* Postcode en plaats horen op één regel: zo staan ze ook op een envelop. */
.veldrij{display:grid; grid-template-columns:1fr 2fr; gap:0 14px;}
@media (max-width:420px){ .veldrij{grid-template-columns:1fr;} }


/* 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 */

/* De fotokiezer voor de voorkant: een raster van miniaturen, elk een radio-
   knop. De gekozen tegel krijgt een rand in de huiskleur. */
.omslagkeuze{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
  gap:6px; margin:6px 0 14px;
}
.omslagkeuze-kop{
  grid-column:1 / -1; margin:8px 0 2px; font-size:13px; color:var(--stil, #667);
}
.omslagkeuze-tegel{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:4px;
  cursor:pointer; background:var(--grond);
}
.omslagkeuze-tegel img{width:100%; height:100%; object-fit:cover; display:block;}
.omslagkeuze-tegel input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.omslagkeuze-tegel:has(input:checked){outline:3px solid var(--petrol); outline-offset:-3px;}
.omslagkeuze-tegel:has(input:focus-visible){outline:3px solid var(--petrol); outline-offset:-3px;}


/* De kleurstaaltjes voor de kaft. Elk staaltje draagt zijn eigen kleur ALS
   ACHTERGROND en de bijbehorende tekstkleur als letter -- die twee komen samen
   uit app/boek/kleuren.palet_voor_scherm(). Zo laat het staaltje zien wat er
   werkelijk gebeurt: op de donkere kaft wordt de naam wit. Zes gekleurde
   vierkantjes zonder letter vertellen dat niet. */
.omslagkleuren{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:8px; margin:6px 0 14px;
}
.omslagkleur{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; padding:12px 6px; border-radius:6px;
  cursor:pointer; border:1px solid var(--lijn-sterk);
  font-family:Georgia,"Times New Roman",serif; text-align:center;
}
.omslagkleur input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.omslagkleur-letter{font-size:20px; line-height:1;}
.omslagkleur-naam{font-size:11px; line-height:1.25; font-family:inherit;}
.omslagkleur:has(input:checked){outline:3px solid var(--petrol); outline-offset:2px;}
.omslagkleur:has(input:focus-visible){outline:3px solid var(--petrol); outline-offset:2px;}

/* De twee indelingen van de voorkant. Geen plaatjes maar een zin per keuze:
   het verschil is met woorden korter uit te leggen dan met twee miniaturen van
   dertig pixels, en de voorvertoning ernaast toont het gekozen resultaat toch
   al op ware verhouding. */
.omslagindeling{display:grid; gap:8px; margin:6px 0 14px;}
.omslagindeling-keuze{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:start;
  padding:10px 12px; border:1px solid var(--lijn-sterk); border-radius:6px;
  cursor:pointer;
}
.omslagindeling-keuze input{grid-row:1 / span 2; margin-top:3px;}
.omslagindeling-naam{font-weight:600;}
.omslagindeling-keuze .klein{grid-column:2;}
.omslagindeling-keuze:has(input:checked){outline:2px solid var(--petrol); outline-offset:-1px;}

/* HET VAKJE "Laat de hele foto zien" ZET ZELF GEEN DISPLAY, met opzet. Het
   staat er bij de indeling `vol` met `hidden` op, en `hidden` is een
   browserstijl met de laagste voorrang -- elke eigen display-regel wint ervan.
   Hij stond hier een minuut lang als `.omslagindeling` (display:grid) en was
   daarmee gewoon zichtbaar; `tests/test_verborgen.py` ving dat, en dat is
   precies het gat waarvoor die toets op 11 september is geschreven. De marge
   hangt daarom aan het LABEL erin en niet aan het blok eromheen. */
.omslagvullend .omslagindeling-keuze{margin:6px 0 14px;}

/* Het tekstvak voor de achterkant plus de drie opmaakkeuzes. Meer standen dan
   deze drie zijn er niet, en dat is een afspraak en geen ruimtegebrek. */
.omslagscherm-tekstvak{
  width:100%; box-sizing:border-box; font:inherit; line-height:1.5;
  padding:10px 12px; border:1px solid var(--lijn-sterk); border-radius:6px;
  resize:vertical;
}
.omslagopmaak{display:grid; gap:10px; margin:12px 0 16px;}
@media (min-width:620px){ .omslagopmaak{grid-template-columns:repeat(3, 1fr);} }
.omslagopmaak-groep{display:flex; flex-direction:column; gap:4px;}
/* Ruim aantikbaar: dit scherm wordt op een telefoon bediend, en door mensen
   die niet in de stemming zijn om te mikken. */
.omslagopmaak-groep label{display:flex; align-items:center; gap:8px; padding:6px 0;
                          cursor:pointer;}
/* DE RADIOKNOP MAG NIET UITREKKEN. `.bestelformulier input` staat op
   `width:100%` -- dat is er voor de adresvelden, waar een veld dat halverwege
   ophoudt uitnodigt tot afkorten. Op een radioknop in een flexregel duwt
   diezelfde regel het bolletje en zijn woord naar weerszijden van de kolom, met
   een gat van vijf centimeter ertussen. Gemeten op het kaftscherm van
   10 september 2026; zonder deze twee regels staat "Klein" niet bij zijn eigen
   knop. */
.omslagopmaak-groep input[type=radio],
.omslagindeling-keuze input[type=radio]{width:auto; margin:0; flex:none;}


/* ------------------------------------------------------------------ *
 * Het aantallenpaneel — GEDEELD tussen twee schermen.
 *
 * De klant komt dit twee keer tegen: vóór de curatie (/boek) om te kiezen
 * hoeveel foto's per hoofdstuk hij wil, en daarna in de editor om het bij te
 * stellen. Ze gaan over hetzelfde en horen er hetzelfde uit te zien; twee
 * bedieningen die net iets verschillen laten een klant twijfelen of hij wel
 * dezelfde knop indrukt.
 *
 * Stond alleen in editor.css, en die wordt op /boek niet geladen — daar was het
 * paneel dus kaal. Verhuisd naar hier; editor.css erft het gewoon mee, want
 * schil.css wordt overal geladen.
 * ------------------------------------------------------------------ */
/* HOEVEEL FOTO'S PER HOOFDSTUK.
 *
 * Staat op het overzicht, boven de spreads: eerst bepalen hoe groot het boek
 * wordt, daarna verfijnen. Die volgorde is ook waarom het paneel waarschuwt
 * dat een tik het boek opnieuw indeelt.
 */
.aantallen {
  margin: 4px 0 28px;
  padding: 20px 22px;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.aantallen-kop h2 { margin: 0 0 4px; font-size: 19px; }
.aantallen-tel { margin: 0; color: var(--zacht, #6B7C8C); font-size: 14px; }
.aantallen-let-op {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--terra);
  max-width: 60ch;
}
.aantallen-vol {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 14px;
  background: color-mix(in srgb, var(--terra) 8%, var(--papier));
  border-radius: 6px;
}
.aantallen-lijst {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* Twee kolommen waar het past, een op smal. Twaalf hoofdstukken onder elkaar
   * is een lange lijst om doorheen te scrollen terwijl je vergelijkt. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px 24px;
}
.aantallen-rij {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lijn);
}
.aantallen-naam { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aantallen-naam strong { font-weight: 600; font-size: 15px; }
.aantallen-voorraad { font-size: 13px; color: var(--zacht, #6B7C8C); }
.aantallen-knoppen { display: flex; align-items: center; gap: 8px; }
.aantallen-reden {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--zacht, #6B7C8C);
}
/* Het verschil tussen wat de klant koos en wat er in het boek staat.
 * Alleen zichtbaar als die twee uiteenlopen -- zie het sjabloon. */
.aantallen-afgevallen {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zacht, #6B7C8C);
  max-width: 62ch;
}
/* HET ADVIES NAAST HET AANTAL.
 *
 * Een eigen kleur, want het is een ander soort getal: "2 van de 39" is een
 * feit, "advies 3" is een mening. Terra en niet petrol -- petrol is in dit
 * scherm de kleur van iets wat je kunt aanklikken, en dit is alleen om te
 * lezen. Geen vet, geen kader: het mag het aantal niet overstemmen, want de
 * klant beslist. */
.aantallen-advies {
  color: var(--terra);
  margin-left: 6px;
  white-space: nowrap;
}

/* Twee dingen die alleen het scherm VOOR de curatie kent. */
.aantallen-raster{
  display:grid; gap:2px 28px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.aantallen-weg{ color:var(--terra); }

/* Het aantallenpaneel bij "opnieuw samenstellen": ingeklapt, want het is daar
   niet de volgende stap maar een mogelijkheid. */
.aantallen-vouw { margin: 0 0 1rem; }
.aantallen-vouw > summary {
  cursor: pointer; padding: .5rem 0; font-size: .9rem; color: #5a5248;
}
.aantallen-vouw > summary:hover { color: #2f2a24; }
.aantallen-vouw .aantallen { margin-top: .5rem; }

/* ================================================================
 * DE FOTOSELECTIE (tabblad Fotoselectie, 8 september 2026)
 *
 * De hoofdstukken met hun gekozen foto's, op volgorde. Wat hier gebeurt is
 * kiezen -- niet opmaken. Vandaar dat een foto hier een RECHTHOEK is met een
 * nummer en drie knoppen, en niet de pagina die hij straks in het boek krijgt:
 * dat zou beloven dat de klant hier al aan de bladzijden werkt.
 *
 * SLEPEN EN PIJLEN, ALLEBEI. *Hier stond tot 16 september 2026 "waarom geen
 * slepen": slepen zou de gebaar-taal van een fotoboekmaker op een muis zijn,
 * en twee pijlen van 44 px zouden hetzelfde werk doen.* De opdrachtgever
 * heeft dat omgedraaid: een foto van plek 12 naar plek 2 kostte tien klikken.
 * Nu sleept de klant (muis en vinger, zie "DE FOTOSELECTIE SLEPEN" in
 * schil.js), ook naar een ander hoofdstuk. De pijlen BLIJVEN, want slepen is
 * met een toetsenbord of schermlezer niet te doen -- maar ze zijn klein en
 * rustig geworden, zodat ze de foto niet meer afdekken.
 * ================================================================ */

.fotoselectie{margin:28px 0 0;}

.sel-stand{
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--rond); padding:18px 20px; margin:0 0 18px;
}
.sel-stand-kop{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.sel-stand-kop h2{margin:0 0 2px;}
.sel-stand-kop form{margin:0;}
.sel-stand-kop button{margin:0;}
.sel-stand-tel{margin:0; font-size:15px; color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;}
.sel-uitleg{margin:12px 0 0; font-size:14px; color:var(--inkt-zacht);
  max-width:62ch;}
.sel-stand .springer{padding:14px 0 0; flex-wrap:wrap;}
.sel-stand .springer a{display:inline-flex; gap:6px; align-items:center;}
.springer-aantal{color:var(--inkt-vaag); font-variant-numeric:tabular-nums;}
/* De hoofdstukken staan onder een plakkende kopbalk; zonder deze marge
   verdwijnt de kop van het hoofdstuk waar je net naartoe sprong eronder. */
.sel-hoofdstuk{scroll-margin-top:80px;}

/* Een hoofdstuk. Zelfde ritme als de albumkaarten op /hoofdstukken, zodat de
   klant ziet dat het over dezelfde twaalf hoofdstukken gaat. */
.sel-hoofdstuk{
  background:var(--papier); border:1px solid var(--lijn);
  border-radius:var(--rond); padding:16px 18px 12px; margin:0 0 12px;
}
.sel-kop{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 10px;}
.sel-kop h3{margin:0; font-size:16px; font-weight:600;}
.sel-tel{margin:0; font-size:14px; color:var(--inkt-vaag);
  font-variant-numeric:tabular-nums;}
.sel-merk{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:99px;
  background:var(--terra-vlak); color:var(--terra); font-size:12.5px;
}
.sel-leeg{margin:0 0 8px; font-size:14px; color:var(--inkt-zacht);}

/* 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. Gemeten op de echte selectie: 3 tegels
   van 230 px naast 2 van 350 px. Grootte leest als belang, dus dat zegt tegen de
   klant dat Vorming & Identiteit belangrijker is dan Oorsprong & Fundament --
   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(170px,1fr));
  gap:14px;
}
.sel-rij.sel-klein{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:8px;}
@media (max-width:520px){
  .sel-rij{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px;}
  .sel-rij.sel-klein{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}
}

.sel-foto{position:relative; margin:0; display:flex; flex-direction:column;
  gap:6px;}
.sel-vlak{
  position:relative; display:block; aspect-ratio:1; overflow:hidden;
  border-radius:8px; 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:6px;
  font-size:11px; color:var(--inkt-vaag); 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. */
.sel-nummer{
  position:absolute; z-index:2; top:6px; left:6px; min-width:24px; height:24px;
  padding:0 6px; border-radius:99px; background:rgba(44,62,79,.82); color:#fff;
  font-size:12.5px; line-height:24px; text-align:center;
  font-variant-numeric:tabular-nums;
}
/* Vaste hoogte van twee regels, ook als er geen bijschrift is: 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-bijschrift{display:none;}
.sel-met-bijschrift .sel-bijschrift{
  font-size:12.5px; line-height:1.35; color:var(--inkt-zacht);
  height:calc(2 * 1.35em); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* De pijlen liggen OP de foto, aan de kant waar ze heen wijzen. Zie
   _selectie_hoofdstuk.html voor waarom ze niet onder het beeld staan.
 *
 * ONDERIN EN NIET IN HET MIDDEN. Ze stonden op de verticale middenlijn, en dat
 * is precies waar op een portretfoto het hoofd staat: gemeten op een tegel van
 * 144 px dekten twee knoppen van 38 px samen 53% van de tegelbreedte af, in de
 * band waar het gezicht zit. Dit is het scherm waarop de klant beslist welke
 * foto van zijn moeder gedrukt wordt; hij moet haar kunnen zien.
 *
 * SUBTIEL SINDS 16 SEPTEMBER 2026. Ze waren twee witte schijven van 40 px,
 * en op een tegel van 170 px dekten die samen bijna de helft van de onderste
 * band van het beeld af. Nu het slepen de gewone weg is (zie de kop van dit
 * blok), zijn ze een klein, halfdoorzichtig pijltje van 22 px geworden --
 * de toetsenbord- en schermlezerweg, en de terugval op een telefoon.
 *
 * HET RAAKVLAK IS GROTER DAN HET PIJLTJE: 40 px. Apple's ondergrens is 44 en
 * die halen we niet zonder de tegel op te blazen; 40 was de maat die er
 * stond en die is gemeten goed genoeg. Het vlak zit in een `::before` dat
 * 9 px om de knop heen uitsteekt (22 + 2 x 9 = 40): een pseudo-element van
 * een knop vangt de klik voor de knop, dus de knop blijft precies zo
 * bedienbaar als toen hij zelf 40 px was, alleen zie je er minder van.
 * Het raakvlak van de linker- en de rechterpijl overlapt op een tegel van
 * 140 px niet (6 + 40 en 140 - 6 - 40 liggen 48 px uit elkaar). */
.sel-pijl{
  position:absolute; z-index:2; bottom:8px;
  width:22px; height:22px; margin:0; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.72); color:var(--inkt); font-size:13px;
  line-height:22px; text-align:center; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.sel-pijl::before{content:""; position:absolute; inset:-9px; border-radius:50%;}
.sel-pijl-voor{left:8px;}
.sel-pijl-na{right:8px;}
.sel-pijl:hover:not(:disabled){background:#fff;}
/* Een pijl die niet kan, verdwijnt in plaats van grijs te worden: grijs op een
   foto is niet af te lezen, want de achtergrond is elke keer een andere kleur.
   Hij is dan ook niet aan te wijzen (`pointer-events:none`), dus zijn `title`
   verschijnt niet -- die reden staat er voor de schermlezer en voor wie met het
   toetsenbord langsloopt, niet voor de muis. */
.sel-pijl:disabled{opacity:0; pointer-events:none;}
.sel-pijl:focus-visible{outline:2px solid var(--petrol); outline-offset:2px;}

/* De knoppen staan er ALTIJD, ook zonder hover. Hover bestaat niet op een
   aanraakscherm, en een knop die je pas ziet als je hem al hebt gevonden is
   geen knop. */
/* NOWRAP: "Vervang" en "Laat weg" horen naast elkaar. Wikkelden ze, dan is een
   fotokaart drie regels hoog en telt dat bij 42 foto's op tot schermen scrollen
   waarin het beeld het kleinste element is. */
.sel-knoppen{display:flex; flex-wrap:nowrap; gap:8px;}
/* De TEKST in een knop breekt nooit. Gemeten op een iPhone: "Laat weg" viel
   uiteen over twee regels en werd daarmee hoger dan "Vervang" ernaast -- twee
   knoppen van verschillende hoogte naast elkaar, en het oog leest dat als een
   fout. */
.sel-knop{white-space:nowrap; min-width:0;}
/* 40 px hoog en 8 px ertussen. Het stond op 34 met 6 ertussen, en de rechter
   van de twee is "Laat weg" -- de enige handeling op dit scherm die iets
   weghaalt. Een mistik daar kost de klant een foto (herstelbaar, maar hij
   schrikt). Apple's ondergrens is 44; die haalt een tegel van 140 px niet
   zonder dat de knoptekst afbreekt, en dat is in dit product al eens een
   bevinding geweest. */
.sel-knop{
  margin:0; padding:0 8px; min-width:40px; min-height:40px; border-radius:7px;
  background:var(--grond); border:1px solid var(--lijn-sterk);
  color:var(--inkt); font-size:13px; line-height:38px; cursor:pointer;
}
.sel-knop.sel-breed{flex:1 1 auto;}

/* Op een smal scherm passen twee knoppen niet naast elkaar in een tegel van
   140 px; dan onder elkaar, elk over de volle breedte en op 44 px -- daar is de
   ruimte er wel en telt het aanraakvlak het zwaarst. Deze regels stonden BOVEN
   de algemene, en werden dus door de algemene overschreven (gelijke
   specificiteit, bronvolgorde wint): dood CSS met een commentaar dat gedrag
   beschreef dat niet voorkwam. */
@media (max-width:520px){
  .sel-knoppen{flex-wrap:wrap;}
  .sel-knop.sel-breed{flex:1 1 100%; min-height:44px; line-height:42px;}
}
.sel-knop:hover:not(:disabled){background:var(--petrol-vlak);
  border-color:var(--petrol);}
.sel-knop:disabled{opacity:.4; cursor:default;}
.sel-knop:focus-visible{outline:2px solid var(--petrol); outline-offset:2px;}

.sel-erbij{margin:12px 0 0;}
.sel-erbij button{width:auto; margin:0;}
.sel-weggelaten{margin:10px 0 4px;}
.sel-weggelaten summary{
  font-size:13.5px; color:var(--inkt-zacht); cursor:pointer; padding:6px 0;
}
.sel-weggelaten > ul{margin-top:8px;}

.sel-publiceren .kaart{max-width:none;}

/* Het wisselvenster. Breder dan de gewone kiezer: hier staat een raster met
   foto's in en geen lijst met hoofdstuknamen. */
.wisselaar{width:min(760px,calc(100% - 32px)); max-height:88vh;}
.wisselaar-inhoud{padding:14px 18px 20px; overflow-y:auto; max-height:74vh;}
/* 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. */
/* De knop om de foto heen is geen knop om te zien: hij is de foto. Alleen bij
   toetsenbordfocus laat hij zich zien, want dan moet je weten waar je bent. */
.sel-vergroot{
  display:block; width:100%; height:100%; margin:0; padding:0; border:none;
  background:none; border-radius:0; cursor:zoom-in;
}
.sel-vergroot img{width:100%; height:100%; object-fit:cover; display:block;}
.sel-vergroot:focus-visible{outline:3px solid var(--petrol); outline-offset:-3px;}

/* ----------------------------------------------------------------
 * HET SLEPEN IN DE FOTOSELECTIE (16 september 2026). Het script staat in
 * schil.js ("DE FOTOSELECTIE SLEPEN"); dit is wat het aan klassen zet.
 *
 * GEEN `touch-action: none` OP DE TEGELS. Dan kan de klant op een telefoon
 * niet meer door de lijst vegen -- twaalf hoofdstukken, tien schermen. De
 * sleep begint daar 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 (editor-kiezer.css).
 *
 * 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:8px;
  box-shadow:0 6px 18px rgba(20,30,40,.35);
  font-size:9px; color:var(--inkt-vaag); 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 coördinaten: dan rolt hij mee met de pagina en volgt
 * hij het raster ook als dat over meerdere regels wrapt. De helft van de
 * tussenruimte (14 px, op een telefoon 10 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:-9px;}
.sel-foto.sel-invoeg-na::after{right:-9px;}
@media (max-width:520px){
  .sel-foto.sel-invoeg-voor::before{left:-7px;}
  .sel-foto.sel-invoeg-na::after{right:-7px;}
}
/* 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;
  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-vlak{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 grote venster. Zwart eromheen: de foto is het onderwerp, niet de kaart. */
.selectiegroot{
  border:none; padding:0; background:#000; max-width:96vw; max-height:92vh;
  border-radius:10px; overflow:hidden;
}
.selectiegroot::backdrop{background:rgba(0,0,0,.72);}
.selectiegroot img{display:block; max-width:96vw; max-height:92vh;
  width:auto; height:auto;}
.selectiegroot form{margin:0;}
.selectiegroot-dicht{
  position:absolute; top:10px; right:10px; width:40px; height:40px; margin:0;
  padding:0; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--inkt); font-size:22px; line-height:40px;
}
.selectiegroot-dicht:hover{background:#fff;}

.sel-merkje{
  position:absolute; z-index:2; left:4px; right:4px; bottom:4px;
  padding:2px 6px; border-radius:5px; background:rgba(44,62,79,.82);
  color:#fff; font-size:11px; line-height:16px; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wisselaar-fout{margin:0 0 10px;}
.wisselaar-uitleg{font-size:14px; color:var(--inkt-zacht); margin:0 0 12px;}
.wisselaar-huidig{
  display:flex; align-items:center; gap:12px; margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--lijn);
}
.wisselaar-huidig .sel-vlak{width:88px; flex:none;}
.wisselaar-kop{font-size:14px; font-weight:600; margin:16px 0 8px;}
.wisselaar-meer{margin-top:16px;}
.wisselaar-meer button{width:auto;}
@media (max-width:700px){
  .wisselaar{width:100%; max-width:100%; margin:auto auto 0;
    border-radius:18px 18px 0 0;}
  .wisselaar-inhoud{max-height:66vh;}
}

/* HET REKENINGOVERZICHT op het bestelscherm. Eén regel per boek, bedragen
   rechts, een vet totaal -- de opbouw van Stripe Checkout, want dat is de
   pagina waar de klant hierna belandt. */
.rekening .rekening-product { margin: 0; font-size: 13px; color: var(--inkt-vaag); }
.rekening .rekening-totaal { margin: 2px 0 14px; font-size: 30px; line-height: 1.1;
                             font-variant-numeric: tabular-nums; }
.rekening-regels { list-style: none; margin: 0; padding: 0; }
.rekening-regels li { display: flex; justify-content: space-between; gap: 16px;
                      align-items: baseline; padding: 9px 0;
                      border-top: 1px solid var(--lijn); }
.rekening-regels li:first-child { border-top: 0; }
.rekening-regels .rekening-label { display: flex; flex-direction: column; min-width: 0; }
.rekening-regels .sub { font-size: 11.5px; color: var(--inkt-vaag); margin-top: 2px; }
.rekening-regels .bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rekening-regels .som { font-weight: 600; border-top: 1px solid var(--lijn-sterk); }
.rekening-regels .btwregel { color: var(--inkt-zacht); }
.rekening-spec { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
                 margin: 16px 0 0; font-size: 13px; }
.rekening-spec dt { color: var(--inkt-vaag); }
.rekening-spec dd { margin: 0; }
.rekening-spec dd .sub { display: block; font-size: 11.5px; color: var(--inkt-vaag); }

/* WAT JE BESTELT: de miniatuur met het aantal ernaast. De kaftkaart eronder is
   op 12 september 2026 vervallen -- opdrachtgever: "de hele box is nutteloos en
   leidt af". Wat overblijft is het boek zelf, op de plek waar de vraag "hoeveel
   hiervan" gesteld wordt. */
.bestelkop-boek { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.omslag-mini { width: 132px; flex: 0 0 auto; }
.bestelkop-tekst { flex: 1 1 220px; min-width: 0; }
.bestelkop-naam { margin: 0 0 2px; font-size: 17px; font-weight: 600;
                  font-family: Georgia, "Times New Roman", serif; }
.bestelkop-tekst > .klein { margin: 0 0 4px; }

/* DE TWEE VELDEN EVEN BREED. Ze stonden los van elkaar en kregen elk hun eigen
   breedte van de browser: een keuzelijst zo breed als zijn langste optie, een
   nummerveld zo breed als de browser toevallig koos. */
.aantalkeuze { margin-top: 14px; max-width: 260px; }
.aantalkeuze select,
.aantalkeuze input[type="number"] { width: 100%; box-sizing: border-box; }
.aantalkeuze .veldnaam { margin-top: 10px; }
.aantalkeuze .veldnaam:first-child { margin-top: 0; }

/* De kaart met alleen de betaalknop: geen kop, dus ook geen loze ruimte boven. */
.kaart-afronden { display: flex; flex-direction: column; gap: 8px; }