/**
 * Complimentje — maakpagina "Studio".
 *
 * Laadt alleen op template-maak.php, na systeem.css. Twee panelen: links het
 * levende voorbeeld (de kaart met tekening en bewerkbare tekst) dat op een breed
 * scherm meescrollt; rechts de bediening in volgorde: eerst je woorden vinden
 * (de finder met tabs), dan het afmaken (naam, delen, cadeau) in een rustiger
 * paneel. Onder 992px stapelt alles: voorbeeld eerst, dan bediening.
 *
 * Alle functionele haakjes uit template-maak.php blijven staan; hier verandert
 * de opmaak en de plek. Zonder JS blijven beide finder-panelen zichtbaar.
 */

/* ============================================================
   STUDIO — het raster.
   ============================================================ */
.maak-studio--studio{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  max-width:1180px;
  margin:12px auto 0;
}
@media (min-width:992px){
  .maak-studio--studio{
    display:grid;
    /* Bediening links, kaart rechts. De kaart krijgt de ruimere kolom: daar
       staat het resultaat, en hij heeft sinds de verhouding van het drukbestand
       ook echt meer hoogte nodig. De volgorde zit in de HTML en niet in `order`,
       zodat de leesvolgorde meeloopt met wat je ziet. */
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
    gap:var(--s8);
    /* De twee kaarten even hoog. Met `start` eindigde de rechterkaart 36
       pixels boven de linker, en twee kaarten naast elkaar die niet op
       dezelfde regel eindigen lezen als een fout. */
    align-items:stretch;
  }
  /* `align-self:start` en niet `align-items:start` op de rij hierboven.
     Sticky doet niets zolang het element even hoog is als zijn houder: er valt
     dan niets binnen te schuiven. Met de stretch van de rij was deze kolom
     1462 pixels in een rij van 1462, en stond de kaart vanaf scrollpositie 1600
     volledig boven de vouw. Precies op het moment dat je hem net had vastgezet.
     De rechterkolom houdt zijn stretch, want daar ging die regel over. */
  .maak-stage{ position:sticky; top:24px; align-self:start; }
}

/* ============================================================
   LINKS — het levende voorbeeld op een licht podium.
   ============================================================ */
.maak-stage .preview{
  display:block;
  grid-template-columns:none;
  background:linear-gradient(180deg,var(--kleur-grond),var(--kleur-grond));
  border:var(--lijn-dikte) solid var(--hair,var(--kleur-lijn));
  border-radius:var(--r-vlak);
  box-shadow:none;
  padding:var(--s5);
  margin:0;
  max-width:none;
}
/* Het papier, in de kleur die de drukker krijgt.

   Cmpl_Lijnstijl::PAPIER = rgb(250,246,241), in het ontwerpsysteem
   --kleur-vlak-warm. Hier stond var(--kleur-grond), en dit is de plek waar dat
   verschil telt: de kaart is het hele onderwerp van deze pagina en belooft te
   tonen wat er gedrukt wordt.

   Eén blok voor beide plekken waar deze kaart staat.

   Dit stond twee keer uitgeschreven: hier voor de maakpagina en nog eens in
   homepage.css voor de homepage, met dezelfde vier waarden en dezelfde
   papierkleur als kale hex. Twee kopieën van dezelfde kaart lopen uit elkaar —
   dat is in deze maker al twee keer gebeurd, met de motief-knop en met de deur
   naar de editor. homepage.css laadt ná dit bestand en hoeft nu alleen nog te
   zeggen wat er op de homepage ánders is.

   De verhouding komt van de drukker.

   De kaart was tot vandaag zo hoog als zijn inhoud: 569 pixels bij een korte
   zin, 601 bij een lange, en op 390 px 429 tegen 487. Alles eronder schoof dus
   mee zodra je een andere zin haalde — 32 pixels op breed, 58 op smal, gemeten
   over drie zinnen van oplopende lengte. Dat is de sprong die het ontwerp van
   11 september wegneemt.

   704 bij 900 is Cmpl_Print_Renderer::preview_maat('canvas_30x40'), dezelfde
   bron die template-editor.php voor zijn canvas gebruikt en die generator.js
   opvraagt als hij het gerenderde vel toont. Eén maat, drie gebruikers. De
   kaart stond op ongeveer 0,96 en was dus bijna vierkant, terwijl het
   drukbestand staand is: hij toonde een verhouding die nergens bestond. */
.maak-stage .preview-art,
.preview .preview-art{
  background:var(--kleur-vlak-warm);
  border:var(--lijn-dikte) solid var(--hair,var(--kleur-lijn));
  border-radius:var(--r-vlak);
  box-shadow:none;
  padding:clamp(32px, 3.4vw, 48px) clamp(32px, 3vw, 48px);
  max-width:none;
  margin:0;
}

/* ---------------------------------------------------------------------------
   Het vel: de makerkaart met de verhouding van het drukbestand.

   Alleen deze kaart, en niet elke .preview-art. Die klasse staat op acht
   plekken — het eindscherm, de landingstegel, de winkelkaart met zijn eigen
   hoogte van 300 pixels. Die hebben dit niet nodig en zouden er alleen maar
   van vervormen.

   De verhouding is een ondergrens en geen klem.

   Met aspect-ratio alleen staat de hoogte vast, en dan valt tekst die niet past
   buiten de kaart: vijfhonderd tekens liepen er onderuit en de proef R5 in
   sanne-makerflow zag dat meteen. `min-height:max-content` leek de uitweg maar
   is het niet: max-content betekent "zonder afbreken", dus dat is de hoogte van
   één lange regel en niet van de tekst zoals hij er staat.

   Tot 12 september 2026 deed een leeg ::before met `padding-top:127.84%` dat
   werk, in hetzelfde rastervak als de inhoud. Maar een percentage in padding
   rekent tegen de bréédte van de inhoudsdoos, en die is smaller dan de kaart
   zodra er een tekening op staat: `#cmpl-preview.has-motief` zet dan 7 tot 8
   procent binnenruimte. Nagemeten op 390 px: de kaart was 398 hoog met de
   tekening erop en 417 zodra het gerenderde vel erin kwam (dat wél de
   buitenmaat aanhoudt, zie .is-gerenderd). Negentien pixels sprong, precies
   op het moment dat de kaart stil hoort te staan.

   Daarom nu een min-hoogte op de kaart zelf, in de breedte van het podium
   eromheen: `cqw` op een border-box telt de binnenruimte mee, dus 127,84 cqw
   is de buitenmaat, wat er ook aan padding op de kaart staat. Een min-hoogte
   is een vloer: staat er meer tekst dan past, dan wordt de kaart hoger in
   plaats van dat er iets uit loopt (nagemeten: 417 bij een gewone zin, 796
   bij 550 tekens). Het podium is de container en niet de kaart, want een
   element kan niet tegen zichzelf meten; .preview-art is al een container
   voor het merkje en dat blijft zo.

   704 bij 900 is Cmpl_Print_Renderer::preview_maat('canvas_30x40'); 900/704 is
   127,84 procent. Kent een browser cqw niet, dan valt de regel weg en is de
   kaart zo hoog als zijn inhoud, zoals vóór 11 september.
--------------------------------------------------------------------------- */
.preview:has(> .preview-art--vel){ container-type:inline-size; }
.preview-art--vel{
  display:grid;
  grid-template-columns:1fr;
  /* 127,84 was 900 gedeeld door 704, de preview-maat van canvas_30x40. Die
     twee getallen komen nu van de server, uit Cmpl_Print_Renderer::preview_maat()
     van het product waar de route vandaan komt: een tegeltje geeft 100cqw, een
     canvas nog steeds 127,84. Zie cmpl_vel_maat() in functions.php.

     Hetzelfde getallenpaar als bij .is-gerenderd verderop, en dat is de hele
     voorwaarde: lopen die twee uiteen, dan springt de kaart op het moment dat
     het vel binnenkomt. Het blijft een ondergrens en geen klem, dus een lange
     zin laat de kaart nog gewoon meegroeien. */
  min-height:calc(100cqw * var(--vel-hoog, 900) / var(--vel-breed, 704));
}
.preview-art--vel > .preview-art__inhoud{
  grid-area:1 / 1;
  /* De inhoud in het midden, want de hoogte komt nu van de verhouding en niet
     meer van de woorden. Zonder dit plakt een korte zin tegen de bovenrand. */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /* Het vak is één cel breed; zonder dit zou de inhoud zijn eigen breedte
     pakken en niet die van de kaart. */
  min-width:0;
  width:100%;
}
/* De letter van de drukker, uit hetzelfde bestand.
   Fraunces 600 is Cmpl_Tekststijl::LETTER_STANDAARD ('statig'), hier geladen
   als CmplStatig via Cmpl_Tekststijl::webfont_css() in functions.php.
   Newsreader is smaller: dezelfde zin brak op het scherm ergens anders af dan
   in de druk, en dat is precies het verschil dat de schermvullende editor al
   opgelost had. Regelafstand 1,45 en inkt var(--kleur-ink) komen uit
   Cmpl_Lijnstijl::TEKST_REGEL en ::TEKST. */
.maak-stage .preview-art .q{
  font-family:'CmplStatig',Georgia,serif;
  font-weight:600;
  font-size:var(--fs-kop);
  line-height:1.45;
  color:var(--kleur-ink);
  /* Hier stond min-height:2.9em, ruimte voor twee regels, om de sprong te
     temperen die ontstond doordat de kaart zo hoog werd als zijn inhoud. Dat
     was een noodgreep bij een symptoom: hij dekte twee regels af en de zes
     zinnen van drie regels sprongen alsnog. De kaart heeft nu de verhouding van
     het drukbestand en kan van maat niet meer veranderen, dus er valt niets meer
     te reserveren. */
}
/* De tekening-swatches: rustige rij onder de kaart, binnen het podium. */
.maak-stage .style-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:16px auto 0;
  max-width:none;
}
.maak-stage__hint{
  text-align:center;
  color:var(--muted);
  font-size:var(--fs-body);
  margin:12px 0 0;
}

/* ============================================================
   RECHTS — de bediening.
   ============================================================ */
.maak-bediening{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}

/* De CSS van de finder-tabs stond hier. Die tabs zijn op 28 augustus 2026 uit
   de maker gehaald en het script erbij is op 11 september verwijderd; deze
   regels konden sindsdien op geen enkele pagina meer iets raken. */

.cmpl-kiezer{
  --k-terra:var(--kleur-rood);
  --k-terra-zacht:rgba(224,85,95,.10);
}

/* ---- Afmaken: naam, delen, cadeau in een rustiger paneel ---- */
.maak-afwerking{
  background:var(--pearl,var(--kleur-grond));
  border:var(--lijn-dikte) solid var(--hair,var(--kleur-lijn));
  border-radius:var(--r-vlak);
  padding:8px 24px;
}
.maak-afwerking .preview-side{ max-width:none; margin:0; }
.maak-afwerking .cmpl-kolomblok{
  margin:0;
  padding:16px 0;
  border:none;
  border-top:var(--lijn-dikte) solid var(--hair,var(--kleur-lijn));
}
.maak-afwerking .cmpl-namen{ border-top:none; }

/* Kopjes binnen het afwerkpaneel weg: de acties spreken voor zich. */
.maak-afwerking .cmpl-kolomblok__kop{ display:none; }

/* Deel + Kopieer: korte rij i.p.v. twee volle knoppen. */
.maak-afwerking .share-acties{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:0;
}
.maak-afwerking .share-acties .btn{ width:auto; }
.maak-afwerking .channels{ margin-top:12px; }

/* Cadeau als slanke horizontale balk. */
.maak-afwerking .cmpl-cadeau{
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--hair,var(--kleur-lijn));
  border-radius:var(--r-vlak);
  padding:16px 16px;
  text-align:left;
}
.maak-afwerking .cmpl-cadeau__vrij{ display:none; }
@media (min-width:560px){
  .maak-afwerking .cmpl-cadeau{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"titel knop" "uitleg knop";
    align-items:center;
    column-gap:24px; row-gap:4px;
  }
  .maak-afwerking .cmpl-cadeau__titel{ grid-area:titel; margin:0; }
  .maak-afwerking .cmpl-cadeau__uitleg{ grid-area:uitleg; margin:0; }
  .maak-afwerking .cmpl-cadeau__knop{ grid-area:knop; width:auto; margin:0; white-space:nowrap; }
}

/* ---------- De duimenstrook mag de pagina niet breed duwen ----------
   De rij heeft al overflow-x:auto, maar dat hielp niet: .cmpl-tekening__kop is
   een flex-kind, en die krimpt standaard niet onder zijn inhoud (min-width is
   dan 'auto'). De rij werd daardoor 590 px breed in een kolom van 292, en de
   hele pagina schoof mee: op een iPhone 390 px breed was de scrollbreedte 490.

   Met min-width:0 mag het blok wel krimpen, en dan doet de overflow van de rij
   eindelijk zijn werk: de duimpjes scrollen binnen hun eigen kader.

   Dit is geen gevolg van het Studio-herontwerp; de strook-CSS is daar niet
   aangeraakt. Het viel alleen nu pas op omdat de kolom smaller werd.          */
.cmpl-tekening__kop{ min-width:0 }
.cmpl-tekening__rij{ max-width:100% }


/* ============================================================
   DE RUSTIGE HOMEPAGE (maak-studio--rustig).
   ============================================================

   Naar het ontwerp van 28 aug 2026. Wat eruit is en waarom:

   - de tabs "Op gevoel / Zelf bladeren": twee manieren om hetzelfde te doen,
     bovenaan de pagina waar iemand nog niets weet. Bladeren is nu een regel
     onderaan;
   - het kopje "Stap 1, Vind je woorden": als er maar een stap is heet die geen
     stap 1;
   - de strook van negen duimpjes met chevrons en de teller "Tekening 9 van 9":
     dat is een kiezer, en op de homepage volstaat "Andere tekening";
   - het deel-blok: delen doe je na het maken, en het stond hier ervoor.

   Wat erbij is: twee deuren die allebei het ontwerp meenemen, en het merkje op
   de kaart zodat wat je ziet is wat er gedrukt wordt.                        */

.maak-belofte{
  margin:0 0 24px;
  text-align:center;
  font-size:var(--fs-body);
  color:var(--muted);
  letter-spacing:.01em;
}
@media (min-width:992px){
  /* De belofte staat boven de twee kolommen en niet in een ervan. */
  .maak-studio--rustig{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; }
  .maak-studio--rustig .maak-belofte{ grid-column:1 / -1; }
}

/* ---- Links: de kaart en een knop ---- */

/* Het merkje onderaan de kaart, net als op het drukbestand.
   Letter, gewicht, kleur en letterafstand komen sinds 8 september 2026 uit het
   woordmerk-onderdeel (.cmpl-logo in style.css, markup in
   template-parts/site-logo.php). Het stond hier in CmplRond 500 terwijl de
   drukker Manrope 500 zette; nu zetten allebei Figtree, en de kleur is de
   gedempte inkt var(--kleur-soft) die ook Cmpl_Lijnstijl::SIGNATUUR nu draagt.
   Het merkje volgt de letterkeuze van de bezoeker bewust niet, want het is
   van ons.

   De maat schaalt mee met de kaart in plaats van vast te staan op 15 px, met
   dezelfde verhouding die de drukker gebruikt: Cmpl_Lijnstijl::SIG_GROOTTE is
   0,0364 van de kaartbreedte (12 op 330). Kent een browser cqw niet, dan geldt
   de var(--fs-body) uit .cmpl-logo--kaart als terugval.

   Geen gap tussen woord en hartje: het beeldmerk heeft zijn eigen
   margin-left van .3em, zodat het meeschaalt met de letters ernaast. */
.preview-art{container-type:inline-size}
.preview-art__merk{
  margin-top:24px;
  font-size:3.64cqw;
  gap:0;
}
/* Het hartje ernaast, koraal zoals in de druk (Cmpl_Lijnstijl::HARTJE). */
/* Het beeldmerk schaalt mee met het woordmerk ernaast.
   De ruimte ervoor stond op .3em en is bij de ruimteronde een vaste 4px
   geworden; op een kleiner scherm kroop het hartje daardoor tegen de tekst aan.
   Terug naar em, en de svg krijgt zijn maat van de regelhoogte in plaats van
   van een width-attribuut. Dit is het logo en niet een icoon uit de set, dus
   het valt buiten de regel dat iconen 20 px zijn. */
.preview-art__hart{display:inline-flex;align-items:center;margin-left:.3em;color:var(--kleur-rood);vertical-align:-.12em}
.preview-art__hart svg{display:block;width:1em;height:1em}
.preview-art.heeft-foto .preview-art__hart{color:inherit}

/* De rustige uitvoering centreert de inhoud van de kaart.

   Dit stond op de kaart zelf, met display:flex erbij. Sinds 11 september is de
   kaart een raster met één vak — een leeg blokje houdt de verhouding van het
   drukbestand aan, de inhoud ligt eroverheen — en een display:flex hier zette
   dat raster weer uit. De twee lagen gingen dan onder elkaar staan in plaats van
   over elkaar, en de kaart werd bijna twee keer zo hoog: 1225 pixels gemeten op
   1280, waar 700 de bedoeling is.

   Het centreren hoort ook inhoudelijk bij de inhoud en niet bij het papier. */
.maak-studio--rustig .maak-stage .preview-art{
  text-align:center;
}

/* Twee gelijke knoppen naast elkaar, de uitweg eronder.

   Dit was een flexrij met wrap, en dan bepaalt de tekstlengte de indeling. Op
   390 px stond "Andere woorden" (191 px) alleen op regel een, en "Andere
   tekening" (190) plus "of laat 'm weg" (94) samen op regel twee: drie knoppen,
   drie breedtes, twee regels, geen enkele lijn die klopt. Een raster van twee
   kolommen laat de tekst de maat niet meer bepalen. De uitweg staat eronder over
   de volle breedte, want hij hoort bij de tekening en niet naast de twee als
   derde gelijke. */
.maak-tekenknop{
  display:grid;
  /* Twee naast elkaar zolang ze passen, anders onder elkaar.
     Vaste `1fr 1fr` gaf in de rechterkolom knoppen van 119 pixels, en daar
     breken "Andere woorden" en "Andere tekening" op twee regels. Dat was er
     niet zolang ze links in de brede kolom stonden, en het werd zichtbaar toen
     de labels ook nog van 13,3 naar 15 pixels gingen. Zeventien tekens op een
     regel vragen 131 pixels, gemeten en niet geschat.

     De drempel is 132 en dat getal is uitgerekend, niet gekozen. Op 390 pixels
     is deze rij 276 breed: twee kolommen van 132 plus 8 ertussen is 272, dus
     ze passen naast elkaar. Op 360 is de rij 246 en zou datzelfde 272 vragen,
     dus daar vallen ze onder elkaar. Precies op de grens waar afbreken zou
     beginnen, en geen pixel eerder. */
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  /* Twaalf tussen de knoppen en de link eronder, acht tussen de twee knoppen
     naast elkaar. De link is een andere soort actie dan de twee pillen en mag
     een stap verder weg staan; naast elkaar horen de knoppen juist dicht. */
  gap:var(--s3) var(--s2);
  align-items:stretch;
  justify-items:stretch;
  margin-top:var(--s3);
  /* De link raakte de bovenrand van de keuzekaart: nul pixels ertussen, dus
     een onderstreepte grijze link precies op een lijn. Nul staat niet op de
     ladder en tussen twee groepen hoort 32. */
  margin-bottom:var(--s6);
}
.maak-tekenknop__weg{grid-column:1 / -1;justify-self:center}
/* Op een telefoon links, op één lijn met alles eronder en erboven. Op een breed
   scherm staat hij onder twee knoppen in een smalle kolom en mag hij gecentreerd
   blijven; daar valt hij niet uit een lange lijst regels. */
@media (max-width:767px){
  .maak-tekenknop__weg{justify-self:start;min-height:44px}
}
/* Staat sinds 8 september los onder de tegels en niet meer in het raster van de
   knoprij, dus geen grid-eigenschappen meer. Wel dezelfde vorm en dezelfde plek
   in het midden. */
.maak-keuze__terug,
.maak-stage__terug{display:block;margin:var(--s3) auto 0}
.maak-tekenknop__terug:not(.maak-keuze__terug){grid-column:1 / -1;justify-self:center}
/* Stond op 38 pixels hoog met een label van 12.
   Het thema schrijft zelf op dat 44 de kleinste maat is die een duim
   betrouwbaar raakt (zie .btn-icon in style.css), en dit zijn de twee knoppen
   waar op deze pagina het meest op gedrukt wordt. Nu 48, gelijk aan de rest
   van het systeem, met het label op de gewone tekstmaat. Ze blijven omlijnd
   en dus duidelijk ondergeschikt aan de gevulde knop verderop. */
.maak-tekenknop__wissel{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  /* In een raster is de kolom de maat, dus de zijkanten mogen smaller worden
     dan de 24 van de flexrij; anders past "Andere tekening" op 390 px niet in
     zijn helft. De hoogte blijft de knopmaat van het systeem: 48 px, ruim boven
     de 44 die het thema zelf als kleinste raakbare maat opschrijft. */
  min-height:var(--knop-hoogte);padding:var(--s3) var(--s2);
  min-width:0;
  border:var(--lijn-dikte) solid var(--kleur-lijn);border-radius:var(--r-rond);
  background:var(--kleur-grond);color:var(--kleur-ink);
  font-family:inherit;font-size:var(--fs-body);font-weight:500;cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.maak-tekenknop__wissel:focus-visible{border-color:var(--kleur-rood)}
@media (hover: hover) and (pointer: fine){.maak-tekenknop__wissel:hover{border-color:var(--kleur-rood)}}

/* Het icoon draagt het onderwerp (woorden of tekening) en mag het accent
   hebben; het label blijft inkt, zodat de knop rustig blijft. */
.maak-tekenknop__wissel .cmpl-ic{color:var(--kleur-rood);flex:none}

/* Onder 420 px geen icoon meer.
   Op 360 px is de knop 144 breed en past "Andere tekening" niet op een regel:
   het werkwoord kwam op de ene regel en het onderwerp op de volgende, en de
   knop groeide van 48 naar 62 pixels — een knopmaat die het systeem niet kent.
   Het icoon plus zijn tussenruimte kost 28 van die 144. Het kopje boven de rij
   zegt al waar de knoppen voor zijn, dus daar doet het icoon geen werk meer;
   op een breed scherm blijft het staan. */
@media (max-width:420px){
  .maak-tekenknop__wissel .cmpl-ic{ display:none; }
  .maak-tekenknop__wissel{ gap:0; }
}

/* "of laat 'm weg" hoort bij de tekening, niet naast de twee knoppen als
   derde gelijke. Hij stond zonder onderstreping in een rij met twee omlijnde
   pillen en zag er daardoor niet uit als iets waar je op kunt drukken; de
   onderstreping kwam pas bij hover, als je hem al gevonden had. Nu meteen
   onderstreept en in het zachte grijs: leesbaar als actie, maar duidelijk de
   kleinste van de drie. */
.maak-tekenknop__weg{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-body);color:var(--kleur-soft);
  text-decoration:underline;text-underline-offset:3px;
}
@media (hover: hover) and (pointer: fine){.maak-tekenknop__weg:hover{color:var(--kleur-rood)}}
.maak-tekenknop__wissel:focus-visible,
.maak-tekenknop__weg:focus-visible{outline:2px solid var(--knop-vol-hover,var(--kleur-rood));outline-offset:2px}

/* De weg terug na "Andere woorden". Alleen zichtbaar als er echt een eigen zin
   overschreven is, en dan onderstreept: het is een herstelactie en geen
   gelijkwaardige derde keuze naast de twee wisselknoppen. */
.maak-tekenknop__terug{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-body);color:var(--knop-vol-hover,var(--kleur-rood));
  text-decoration:underline;text-underline-offset:3px;
}
.maak-tekenknop__terug[hidden]{display:none}
.maak-tekenknop__terug:focus-visible{outline:2px solid var(--knop-vol-hover,var(--kleur-rood));outline-offset:2px}

/* Dat de kaart bewerkbaar is, was nergens te zien: geen tekstcursor, geen rand,
   geen achtergrond. Je ontdekte het per ongeluk of nooit, terwijl het het enige
   is wat het complimentje echt van jou maakt. De grijze regel die dat vertelde
   is sinds 5 sep 2026 het stapkopje "Zelf schrijven mag"; wat hieronder staat is
   wat de kaart zelf laat zien. */
.maak-stage .preview-art .q{cursor:text}
@media (hover: hover) and (pointer: fine){.maak-stage .preview-art .q:hover{
  background:rgba(29,29,31,.035);
  border-radius:var(--r-vlak);
  box-shadow:none;
}}
.maak-stage .preview-art .q:focus{
  outline:2px solid var(--knop-vol-hover,var(--kleur-rood));
  outline-offset:6px;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* ---- De maker onder een blogartikel ---- */

/* Het artikel is de hoofdzaak en de maker is het vervolg, dus hij krijgt lucht
   en een lijn erboven in plaats van een eigen kleurvlak. Een kader eromheen zou
   hem tot advertentie maken; dit is de volgende stap in hetzelfde verhaal. */
.cmpl-blogmaker{
  margin:64px 0 0;
  padding-top:48px;
  border-top:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));
}
.cmpl-blogmaker__kop{
  max-width:56ch;
  margin:0 auto 24px;
  text-align:center;
}
.cmpl-blogmaker__kop h2{
  margin:0 0 8px;
  
  font-size:var(--fs-kop);
  line-height:1.2;
  color:var(--ink,var(--kleur-ink));
}
.cmpl-blogmaker__kop p{
  margin:0;
  color:var(--muted,var(--kleur-soft));
  font-size:var(--fs-body);
  line-height:1.55;
}

/* ---- Lees ook, onder een blogartikel ---- */

.cmpl-leesook{
  margin:48px 0 0;
  padding-top:32px;
  border-top:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));
}
.cmpl-leesook__kop{
  margin:0 0 16px;
  font-size:var(--fs-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted,var(--kleur-soft));
  font-family:inherit;
  font-weight:600;
}
.cmpl-leesook__lijst{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.cmpl-leesook__item a{
  display:block;height:100%;
  padding:16px 16px;
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));
  border-radius:var(--r-vlak);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.cmpl-leesook__item a:focus-visible{
  border-color:var(--terra,var(--kleur-rood));
  transform:translateY(-2px);
}
@media (hover: hover) and (pointer: fine){.cmpl-leesook__item a:hover{
  border-color:var(--terra,var(--kleur-rood));
  transform:translateY(-2px);
}}
.cmpl-leesook__item a:focus-visible{outline:2px solid var(--knop-vol-hover,var(--kleur-rood));outline-offset:2px}
.cmpl-leesook__titel{
  display:block;
  
  font-size:var(--fs-lead);line-height:1.3;
  color:var(--ink,var(--kleur-ink));
}
.cmpl-leesook__sub{
  display:block;margin-top:8px;
  font-size:var(--fs-body);line-height:1.45;
  color:var(--muted,var(--kleur-soft));
}

/* De verborgen tekeningknoppen. Ze staan er voor generator.js; `hidden` alleen
   is niet genoeg, want een flex- of grid-ouder zet dat opzij. */
.cmpl-tekening--stil,
.cmpl-tekening--stil[hidden]{display:none}

/* ---- Rechts: een kaart met een vraag ---- */
.maak-keuze{
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--hair,var(--kleur-lijn));
  border-radius:var(--r-vlak);
  padding:32px 32px 32px;
  display:flex;
  flex-direction:column;
  /*
   * Nul, en dat is het hele punt.
   *
   * Hier stond `gap:24px`, en daarnaast droeg elk kind zijn eigen marge: het
   * stapkopje 24 boven en 12 onder, de chiprij 32 boven en 32 onder. Een
   * flexgap laat marges niet inklappen, dus die maten telden bij elkaar op. De
   * ladder die daaruit kwam is op 390 px nagemeten en las van boven naar
   * beneden 61, 68, 80, 48, 36, 24, 24, 48, 36. Geen maat kwam twee keer voor,
   * en erger: een kopje stond 68 pixels van de knoppen waar het bij hoort,
   * terwijl twee losse groepen 24 uit elkaar stonden. Dan leest je oog geen
   * groepen meer, alleen een rij losse dingen onder elkaar.
   *
   * Eén eigenaar van het ritme is genoeg. De gap gaat uit, de marges hieronder
   * doen het werk, en dan is er maar één plek waar deze maten staan.
   */
  gap:0;
  box-shadow:none;
}
/*
 * Het ritme binnen de keuzekaart: 32 tussen groepen, 12 tussen een kopje en
 * wat eronder hoort. Twee maten, allebei van de ladder.
 *
 * Marges tussen flexkinderen klappen niet in, dus deze regels tellen niet op
 * met elkaar: wat hier staat is precies wat je meet.
 */
.maak-keuze > *{margin-top:var(--s6);margin-bottom:0}
.maak-keuze > *:first-child{margin-top:0}
/* Een kopje hoort dicht op zijn eigen inhoud, en de afstand naar de vorige
   groep zit al in de regel hierboven.

   Twee klassen en niet een: `.maak-stapkop`, `.cmpl-toon` en `.maak-tekenknop`
   zetten verderop in dit bestand en in systeem.css hun eigen marges, en met
   gelijke specificiteit wint dan de regel die het laatst staat. Met de ouder
   ervoor wint deze, en dan hoeft er nergens `!important` bij. */
.maak-keuze > .maak-stapkop{margin-top:var(--s6);margin-bottom:var(--s3)}
.maak-keuze > .maak-stapkop + *{margin-top:0}
.maak-keuze > .cmpl-toon{margin-top:var(--s6);margin-bottom:0}
.maak-keuze > .maak-tekenknop{margin-top:var(--s6);margin-bottom:0}
.maak-keuze > .maak-stapkop + .cmpl-toon,
.maak-keuze > .maak-stapkop + .maak-tekenknop{margin-top:0}
/* .maak-keuze__kop, __kick en __sub stonden hier. Ze zijn opgegaan in
   .maak-stapkop hieronder, want dezelfde vorm hoort niet twee namen te hebben:
   de kop boven de toonknoppen was er een van zes en niet meer de enige. */

/* ---- Het stapkopje ----

   Een kopje en een regel, boven elk blok van de maker. De vorm komt van de
   oude kop boven de gevoelsknoppen, want die werkte; wat verandert is dat er nu
   vijf zijn in plaats van een. Zie cmpl_stapkop() in functions.php.

   De maten komen van de ladder van het ontwerpsysteem (24 boven, 12 onder, 4
   ertussen). De opdracht noemde 26, 10 en 2; die drie staan niet op de ladder
   en zouden het controlescript op drie overtredingen per kopje zetten. Het
   verschil is op het scherm niet te zien, het verschil in het systeem wel. */
.maak-stapkop{
  display:flex;
  flex-direction:column;
  gap:var(--s1);
  margin:var(--s5) 0 var(--s3);
  text-align:left;
}
/* Geen hoofdletters en geen spatiering: dan zou het weer een kicker worden
   boven elke sectie. Het is hier een kopje, en dat leest als een kopje. */
.maak-stapkop__kop{
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-size:var(--fs-body);
  font-weight:600;
  /* Inkt en geen accent. De tabel geeft de accentkleur aan vier dingen: de
     hoofdknop, de actieve keuze, het hartje en hover. Een kopje boven een stap
     is geen van vier. Met vijf van die kopjes op één scherm werd het accent
     bovendien de gewone tekstkleur, en dan wijst het nergens meer naar. Het
     vet en de grootte doen het werk al. */
  color:var(--kleur-ink);
}
.maak-stapkop__kop .cmpl-ic{flex:none}
/* De opdracht vroeg 13 px. Het thema kent er sinds 4 sep 2026 zes, en 13 is er
   geen van; --fs-body (15) is wat deze regel altijd al was en waar de opdracht
   naar verwees met "dezelfde stijl als nu". */
.maak-stapkop__regel{
  font-size:var(--fs-body);
  color:var(--muted,var(--kleur-soft));
  line-height:1.45;
}
/* Het eerste kopje staat bovenaan de maker; daar hoort geen ruimte boven. */
.maak-stage > .maak-stapkop:first-child{margin-top:0}

.maak-keuze .feelings{display:flex;flex-wrap:wrap;gap:12px;margin:0}
/* Hier stonden de regels voor `.maak-keuze .feeling`: de vijf volle pillen met
   iconen. Die zijn op 8 september 2026 vervangen door de chiprij `.cmpl-toon`
   in systeem.css. Niets rendert deze klasse hier nog, dus de regels waren dood
   en dode regels maken de volgende lezer onzeker over wat er nog geldt. */

.maak-keuze__maak{width:100%;font-size:var(--fs-body);padding:16px 24px}

.maak-keuze__deuren{display:flex;flex-direction:column;gap:12px}

.maak-keuze__blader{
  text-align:center;font-size:var(--fs-body);font-weight:500;
  color:var(--muted,var(--kleur-soft));text-decoration:none;
}
@media (hover: hover) and (pointer: fine){.maak-keuze__blader:hover{color:var(--knop-vol-hover,var(--kleur-rood));text-decoration:underline;text-underline-offset:3px}}

.maak-keuze__slot{margin:0;font-size:var(--fs-body);color:var(--muted,var(--kleur-soft));line-height:1.5;text-align:center}

/* ============================================================
   DE DEUREN.
   ============================================================

   Een rij met een icoonvakje links en een pijl rechts. Bewust geen tweede
   pil-knop: "Maak 'm van jou" erboven is de eerste keuze en moet dat blijven.
   Een rij is een andere vorm en leest als "hier ga je verder".

   De maten komen van .cmpl-acht__fotoknop uit het achtergrondpaneel. Daar een
   streepjesrand ("hier mag iets bij"), hier een hele: dit is een doorgang.   */

.maak-deur{
  display:flex;align-items:center;gap:12px;
  width:100%;min-height:58px;padding:12px 16px;
  border:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));border-radius:var(--r-vlak);
  background:var(--kleur-grond);color:var(--ink,var(--kleur-ink));text-decoration:none;
  text-align:left;font-family:inherit;cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.maak-deur:focus-visible{
  border-color:var(--terra,var(--kleur-rood));
  background:var(--cmpl-terra-tint,var(--kleur-grond));
  color:var(--ink,var(--kleur-ink));
}
@media (hover: hover) and (pointer: fine){.maak-deur:hover{
  border-color:var(--terra,var(--kleur-rood));
  background:var(--cmpl-terra-tint,var(--kleur-grond));
  color:var(--ink,var(--kleur-ink));
}}
.maak-deur:focus-visible{outline:2px solid var(--knop-vol-hover,var(--kleur-rood));outline-offset:2px}

.maak-deur__ic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-vlak);
  background:var(--cmpl-terra-tint,var(--kleur-grond));color:var(--knop-vol-hover,var(--kleur-rood));
  transition:background-color .18s ease;
}
.maak-deur:focus-visible .maak-deur__ic{background:var(--kleur-grond)}
@media (hover: hover) and (pointer: fine){.maak-deur:hover .maak-deur__ic{background:var(--kleur-grond)}}

/* Twee regels in plaats van een lange: de eerste draagt de daad, de tweede de
   uitleg, in een grijs dat op wit nog 6,4 : 1 haalt. */
.maak-deur__tekst{display:flex;flex-direction:column;gap:0;min-width:0;flex:1}
.maak-deur__titel{font-size:var(--fs-body);font-weight:600;line-height:1.25}
.maak-deur__sub{font-size:var(--fs-body);line-height:1.3;color:var(--cmpl-muted-deep,var(--kleur-soft))}

/* De pijl schuift bij het aanwijzen twee pixels mee. Niet in het lichtste grijs
   (--cmpl-subtle): dat haalt hier 2,7 : 1 en verdwijnt op een helder scherm. */
.maak-deur__pijl{
  flex:none;display:flex;color:var(--muted,var(--kleur-soft));
  transition:transform .18s ease, color .18s ease;
}
.maak-deur:focus-visible .maak-deur__pijl{transform:translateX(2px);color:var(--knop-vol-hover,var(--kleur-rood))}
@media (hover: hover) and (pointer: fine){.maak-deur:hover .maak-deur__pijl{transform:translateX(2px);color:var(--knop-vol-hover,var(--kleur-rood))}}

/* Tijdens het aanmaken van het ontwerp wisselt alleen het woord; de rij zelf
   blijft staan waar hij stond. */
.maak-deur[aria-busy="true"]{opacity:.6}

@media (max-width:991px){
  .maak-keuze{padding:24px 24px}
  .maak-belofte{font-size:var(--fs-body);margin-bottom:16px}
  /* Onder de twee kolommen staat de kaart onder de bediening, en dan raakt de
     laatste deur ("Meer aanpassen") het kopje "Zo ziet 'ie eruit" zonder een
     pixel ertussen: nagemeten op 390 px eindigde de deur op 1296 en begon het
     kopje op 1296. Het kopje heeft boven de kolommen bewust geen marge
     (.maak-stage > .maak-stapkop:first-child), want daar staat het bovenaan
     zijn kolom. Hier is het de overgang van bedienen naar kijken, en die
     krijgt een trede meer dan de 32 tussen de stappen binnen de bediening.
     Op .maak-bediening en niet op .maak-keuze: dat omhulsel is de echte buur
     van de kaartkolom in de HTML. */
  .maak-bediening + .maak-stage{margin-top:var(--s7)}
}

/*
 * Onder 768 px is de keuzekaart geen kaart meer.
 *
 * Boven die grens staat hij naast het voorbeeld en doet de rand werk: hij
 * scheidt de bediening van de kaart ernaast. Op een telefoon staat er niets
 * naast, dus scheidt hij niets, en dan kost hij alleen. Nagemeten op 390 px:
 * alles boven het voorbeeld begint op x=32, alles binnen deze kaart op x=57,
 * en rechts loopt 358 terug naar 333. De tekstkolom stapt dus halverwege de
 * pagina 25 pixels naar binnen, zonder dat er iets verandert in wat je leest.
 * Dat is de "slechte uitlijning" die je op een telefoon voelt maar op een
 * scherm niet ziet.
 *
 * Rand en padding eruit: de hele pagina loopt weer op een lijn, en elke knop
 * erin wordt 50 pixels breder op een scherm waar de breedte het schaarst is.
 */
@media (max-width:767px){
  .maak-keuze{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
  }
}

@media (prefers-reduced-motion: reduce){
  .maak-deur,.maak-deur__ic,.maak-deur__pijl,.maak-tekenknop__wissel{transition:none}
  .maak-deur:focus-visible .maak-deur__pijl{transform:none}
@media (hover: hover) and (pointer: fine){.maak-deur:hover .maak-deur__pijl{transform:none}}
}

/* ============================================================
   EIGEN FOTO ALS ACHTERGROND (maker en homepage).
   ============================================================

   generator.js zet de foto als background-image op .preview-art en hangt er
   .heeft-foto aan. Die klasse had geen enkele regel, en dus stond de donkere
   serif-tekst rechtstreeks op de foto: op een donker beeld onleesbaar, en op
   elk beeld anders dan wat er gedrukt wordt. De drukker legt namelijk een waas
   van 45 procent neer en zet de woorden in wit.

   De waas is een ::before en geen tweede achtergrond, want de foto zit al in
   background-image en die kan er maar een dragen. Zie Cmpl_Achtergrond::FOTO_WAAS;
   verandert die, verander deze mee.                                          */

.preview-art.heeft-foto::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(0,0,0,.45);
  border-radius:inherit;
  pointer-events:none;
}
/* De inhoud boven de waas. Zonder dit ligt de tekst eronder en zie je hem niet. */
.preview-art.heeft-foto > *{position:relative;z-index:1}

.maak-stage .preview-art.heeft-foto .q,
.preview-art.heeft-foto .q{color:var(--kleur-grond)}
.preview-art.heeft-foto .preview-art__merk{color:rgba(255,255,255,.82)}

/* De tekening blijft staan op een foto, maar wordt wit: het motief is een
   zwarte lijntekening en die verdwijnt in de waas. brightness(0) maakt hem
   egaal zwart (ook als er ooit grijs in zit), invert(1) maakt daar wit van.
   De server doet hetzelfde met een COLORIZE-filter. */
.preview-art.heeft-foto [data-cmpl-motief-beeld]{filter:brightness(0) invert(1)}

/* ---- Afwijkingen van de maakpagina, alleen op de rustige homepage ----

   Het ontwerp zet de kaart vrij op de pagina, zonder het lichte podium dat de
   maakpagina eromheen heeft. Daar staat de kaart tussen een kiezer en een
   strook duimpjes en heeft dat podium een taak; hier staat hij alleen en is
   een tweede kader eromheen precies het soort ruis dat we weghalen.          */
.maak-studio--rustig .maak-stage .preview{
  background:transparent;
  border:none;
  padding:0;
}
.maak-studio--rustig .maak-stage .preview-art{
  border:none;
  border-radius:var(--r-vlak);
  box-shadow:none;
}

/* De kopjes staan links, net als de deuren eronder. De pagina eromheen centreert
   alles, en dat sloeg hier door tot in de kaart. */
.maak-studio--rustig .maak-stapkop{text-align:left}

/* ============================================================
   HET MEELOPENDE STREEPJE (alleen op een telefoon).
   ============================================================

   Zie template-parts/maak-studio.php voor het waarom. Staat standaard uit, ook
   zonder JS: pas als generator.js ziet dat de kaart voorbij is komt
   `is-zichtbaar` erop. Boven 768 px bestaat hij niet, want daar staat de kaart
   sticky naast de knoppen en zou dit een tweede kaart zijn. */
.maak-streepje{display:none}

@media (max-width:767px){
  .maak-streepje.is-zichtbaar{
    display:flex;
    align-items:center;
    gap:var(--s3);
    /* Vast, niet sticky: sticky blijft binnen de maker en die scrollt weg.
       De kopbalk is zelf sticky en 67 px hoog; generator.js meet hem en zet
       --cmpl-kopbalk, zodat een menu dat ooit een regel hoger wordt dit
       streepje niet half onder zich schuift. 64 is de terugval. */
    position:fixed;
    left:0;
    right:0;
    top:var(--cmpl-kopbalk,64px);
    z-index:39;              /* onder de kopbalk (40), boven de pagina */
    height:60px;
    padding:var(--s2) var(--s4);
    background:var(--kleur-grond);
    border-bottom:var(--lijn-dikte) solid var(--kleur-lijn);
  }
  /* Het vlakje draagt de papierkleur van de kaart, zodat het als hetzelfde
     ding leest en niet als een icoontje. Cmpl_Lijnstijl::PAPIER. */
  .maak-streepje__beeld{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:var(--r-vlak);
    background:#faf6f1;
    overflow:hidden;
  }
  .maak-streepje__beeld img{
    width:34px;
    height:34px;
    object-fit:contain;
  }
  .maak-streepje__beeld img[hidden]{display:none}
  /* `display:flex` hierboven wint van het `hidden`-attribuut; zonder deze
     regel blijft het lege kader gewoon staan. Zelfde val als bij .btn en
     hidden eerder deze zomer. */
  .maak-streepje__beeld[hidden]{display:none}
  /* De letter van de drukker, net als op de kaart: dit is dezelfde zin en die
     hoort er niet ineens anders uit te zien. Twee regels, daarna afgekapt; een
     balk die meegroeit met de zin is weer iets wat beweegt. */
  .maak-streepje__zin{
    flex:1 1 auto;
    min-width:0;
    font-family:'CmplStatig',Georgia,serif;
    font-size:var(--fs-body);
    line-height:1.35;
    color:var(--kleur-ink);
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
  }
}

@media (max-width:767px) and (prefers-reduced-motion: no-preference){
  /* Hij komt van boven onder de kopbalk vandaan in plaats van te verschijnen:
     verschijnen leest als een foutmelding, schuiven als hetzelfde ding dat
     meegaat. */
  .maak-streepje.is-zichtbaar{animation:maak-streepje-in .18s ease-out}
}
@keyframes maak-streepje-in{
  from{transform:translateY(-100%)}
  to{transform:translateY(0)}
}

/* ============================================================
   BLADEREN ALS UITKLAPPER, EN DE VOORBEELDSTROOK.
   ============================================================ */

/* De tekstkiezer was een tab náást "op gevoel". Twee manieren om hetzelfde te
   doen, bovenaan, waar iemand nog niets weet. Als uitklapper is het een aanbod. */
.maak-blader-uit{ border-top:var(--lijn-dikte) solid var(--line,var(--kleur-lijn)); padding-top:12px }
/* Staat de uitklapper direct onder de wisselknoppen, dan is hij geen nieuwe
   sectie maar de derde manier om dezelfde vraag te beantwoorden: andere
   woorden. Een lijn ertussen en 32 pixels lucht maakten er twee blokken van.
   Zonder lijn en op één trede afstand lezen ze als één groep. */
.maak-tekenknop:has(+ .maak-blader-uit){ margin-bottom:0 }
.maak-tekenknop + .maak-blader-uit{
  border-top:0;
  padding-top:0;
  margin-top:var(--s3);
}
.maak-blader-uit__knop{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:var(--s2);
  /* Links, net als elke andere regel in deze kolom. Hij stond gecentreerd,
     samen met "of laat de tekening weg" een regel hoger, en die twee waren de
     enige twee dingen op de hele pagina die niet op x=32 begonnen. Dat is de
     rafeligheid die je op een telefoon voelt: een kolom met twee regels die
     ergens anders beginnen dan de rest. */
  text-align:left;font-size:var(--fs-body);font-weight:500;
  color:var(--muted,var(--kleur-soft));
  /* Vierenveertig is het raakvlak van het systeem, en een samenvouwer die de
     hele tekstkiezer opent hoort daar niet onder te zitten. */
  min-height:44px;
}
.maak-blader-uit__pijl{
  flex:none;display:inline-flex;
  color:var(--kleur-rood);
  transition:transform .18s ease;
}
.maak-blader-uit[open] .maak-blader-uit__pijl{transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce){
  .maak-blader-uit__pijl{transition:none}
}
.maak-blader-uit__knop::-webkit-details-marker{display:none}
@media (hover: hover) and (pointer: fine){.maak-blader-uit__knop:hover{color:var(--knop-vol-hover,var(--kleur-rood))}}
.maak-blader-uit__knop:focus-visible{outline:2px solid var(--knop-vol-hover,var(--kleur-rood));outline-offset:3px;border-radius:var(--r-vlak)}
.maak-blader-uit[open] .maak-blader-uit__knop{margin-bottom:12px;color:var(--ink,var(--kleur-ink));font-weight:600}
.maak-blader-uit__inhoud .maak-blader{margin:0;border:none;padding:0}
.maak-blader-uit__inhoud .maak-blader__knop{display:none}
.maak-blader-uit__inhoud .maak-blader__inhoud{display:block}

/* ---- De strook met echte voorbeelden ----

   Geen schermafdruk van de editor: die veroudert bij de eerstvolgende
   wijziging en is nooit het complimentje van de bezoeker. Dit zijn renders uit
   dezelfde tekenaar als de druk. Zie tools/cmpl-editor-voorbeelden.php.        */

/* ------------------------------------------------------------------
   "Geef je kaart een eigen stijl" (12 sep 2026): tekst links, één
   voorbeeldkaart rechts. Zie template-parts/editor-strook.php.
   ------------------------------------------------------------------ */
.editor-strook{
  max-width:1180px;
  margin:var(--s8) auto 0;
  padding-top:var(--s7);
  border-top:var(--lijn-dikte) solid var(--kleur-lijn);
  display:grid;
  gap:var(--s6);
  align-items:center;
}
@media (min-width:768px){
  .editor-strook{ grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:var(--s8); }
}
.editor-strook__titel{
  margin:0 0 var(--s4);
  font-size:var(--fs-titel);
  line-height:1.1;
  letter-spacing:-.01em;
  /* Op 390 brak hij als "Geef je kaart een eigen" en dan "stijl." alleen. */
  text-wrap:balance;
}
.editor-strook__sub{ margin:0 0 var(--s5); font-size:var(--fs-lead); color:var(--kleur-ink); }
.editor-strook__link{
  display:inline-block;
  font-weight:600;
  color:var(--kleur-rood);
  text-decoration:underline;
  text-underline-offset:.2em;
  min-height:var(--knop-hoogte,44px);
  line-height:var(--knop-hoogte,44px);
}
.editor-strook__voet{ margin:var(--s2) 0 0; font-size:var(--fs-label); color:var(--kleur-soft); }
/* Het voorbeeld is een illustratie bij de uitnodiging en niet de kaart van de
   bezoeker. Op een telefoon nam het de volle kolom: 326 bij 417 op 390 px,
   precies zo groot als de echte kaart erboven, en dan lees je het als een
   tweede kaart. Veertien rem is groot genoeg om de andere letter en de kleur
   te zien, en klein genoeg om bij de tekst te horen. Naast de tekst, boven
   768, krijgt het zijn eigen kolom en mag het weer 24 rem. */
.editor-strook__voorbeeld{ margin:0; max-width:14rem; }
@media (min-width:768px){
  .editor-strook__voorbeeld{ max-width:24rem; }
}
.editor-strook__label{ font-size:var(--fs-label); color:var(--kleur-soft); margin-bottom:var(--s2); }
.editor-strook__beeld{ display:block; width:100%; height:auto; border-radius:var(--r-vlak); }

/* Na het afronden staat dezelfde link al in het vastgezette blok; dan hoeft
   deze uitnodiging niet nog eens. De strook is een broer ná de studio. */
.maak-studio[data-cmpl-stand="vast"] ~ .editor-strook{ display:none; }


/* ==========================================================================
 * Het blok dat opengaat na "Dit is 'm", 6 september 2026
 *
 * Dit was de pagina /klaar/. Nu staat het onder de kaart op dezelfde pagina.
 * Geen kaartje eromheen en geen schaduw: één haarlijn boven het blok is genoeg
 * om te zeggen dat er iets nieuws begint.
 * ========================================================================== */

.maak-vast{
  margin-top:var(--s6);
  padding-top:var(--s6);
  border-top:var(--lijn-dikte) solid var(--kleur-lijn);
}

/* De volle knop is hier de enige. */
/* Stil, want er hoort er maar één vol te zijn.
   De opdracht vroeg een lijn van 1 px in #E5E5EA en een hoek van 100 px; dat
   is precies --lijn-dikte, --kleur-lijn en --r-rond, dus er komt geen nieuwe
   waarde bij. `` omdat `.btn` zichzelf met rood maakt. */
.maak-vast__product{
  width:100%;
  background:var(--kleur-grond);
  color:var(--kleur-ink);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-rond);
}
@media (hover: hover) and (pointer: fine){
  .maak-vast__product:hover{
    background:var(--kleur-grond);
    border-color:var(--kleur-rood);
    color:var(--kleur-rood);
  }
}
/* Het cadeau-icoontje erin erfde de rode knopkleur niet meer; het moet mee met
   de tekst, anders staat er een rood plaatje op een stille knop. */
.maak-vast__product .cmpl-ic{ color:inherit; }

.maak-vast__acties{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-top:var(--s4);
}

.maak-vast__melding{ margin:var(--s3) 0 0; }

.maak-vast__bewaard{ margin-top:var(--s7); }

.maak-vast__nogeen{
  display:inline-block;
  margin-top:var(--s7);
  font-size:var(--fs-body);
  color:var(--kleur-soft);
  text-decoration:underline;
}

/* De twee standen. In rust staat het blok op `vast`; zodra de bezoeker nog iets
   verandert schakelt generator.js naar `gewijzigd`. De acties horen dan bij een
   ontwerp dat niet meer op de kaart staat, dus die gaan weg en de knop komt
   terug. Het inschrijfblok en de lijst blijven staan: die gaan niet over dit
   ene ontwerp. */
.maak-vast__opnieuw{ display:none; }

/* ------------------------------------------------------------------
   Vastgezet: het blok vervangt de bediening, het opent er geen tweede.
   ------------------------------------------------------------------
   Tot 8 september 2026 klapte hieronder een tweede kaart open terwijl de
   eerste bleef staan. Twee keer hetzelfde beeld naast elkaar leest als een
   fout, en de bediening eromheen bleef bovendien aanbieden om te veranderen
   wat je net had vastgezet.

   Nu neemt het vastblok de plek van de bediening in. De stand staat op de
   studio, want de tegels en de knoppen zijn broers vóór het vastblok en CSS
   kan niet terugkijken naar een eerdere broer.

   Verbergen en niet weghalen: `[data-cmpl-klaar-beeld]` binnen die kaart is
   het echte getekende bestand. Klaar.js zet daar zijn bron op en de deellink
   en het drukwerk hangen aan datzelfde ontwerp. `display:none` laat het beeld
   gewoon laden; alleen het kijken ernaar vervalt. */
/* ``, en dat is hier geen luiheid: `.maak-keuze .feelings` staat zelf
   op `display:flex` en wint anders. Zolang die regel bestaat is dit
   de enige manier om hem te overstemmen zonder de specificiteit op te jagen. */
.maak-studio[data-cmpl-stand="vast"] .maak-keuze > .maak-stapkop,
.maak-studio[data-cmpl-stand="vast"] .feelings,
.maak-studio[data-cmpl-stand="vast"] .maak-tekenknop,
.maak-studio[data-cmpl-stand="vast"] .maak-alle-teksten,
.maak-studio[data-cmpl-stand="vast"] .cmpl-namen,
.maak-studio[data-cmpl-stand="vast"] .maak-keuze__maak,
/* Sinds 12 september 2026 ook het tekstpaneel, de deuren en alles onder de
   kaart dat over bewerken gaat. Die stonden open naast de deelknoppen, en dan
   is niet te zien welke versie je deelt: de kaart is dan een plaatje van wat
   vaststaat, terwijl de knoppen ernaast aanbieden om het te veranderen. */
.maak-studio[data-cmpl-stand="vast"] .maak-tekst,
.maak-studio[data-cmpl-stand="vast"] .maak-keuze__deuren,
.maak-studio[data-cmpl-stand="vast"] .maak-stage__schrijfhint,
.maak-studio[data-cmpl-stand="vast"] .maak-tekening-open,
.maak-studio[data-cmpl-stand="vast"] .maak-tekeningpaneel,
.maak-studio[data-cmpl-stand="vast"] .maak-render-terug{ display:none; }

/* De tweede kaart in het vastblok is op 12 september 2026 weggehaald: het
   gerenderde bestand komt in de kaart van de maker zelf. Zie
   `.preview-art--vel.is-gerenderd` verderop. */

/* De kaart links is nu het vastgezette beeld, en dat mag je zien. Eén lijn in
   het accent, dezelfde dikte als elke andere lijn op de site. */
.maak-studio[data-cmpl-stand="vast"] .maak-stage .preview{
  border-color:var(--kleur-rood);
}

.maak-vast__stand{
  margin:0;
  font-family:'Newsreader',Georgia,serif;
  font-size:var(--fs-titel);
  font-weight:500;
  line-height:1.15;
  color:var(--kleur-ink);
}
.maak-vast__uitleg{
  margin:var(--s2) 0 var(--s5);
  color:var(--kleur-soft);
}
.maak-vast__wachten{
  margin:0 0 var(--s3);
  font-size:var(--fs-label);
  color:var(--kleur-soft);
}
.maak-vast__wachten[hidden]{ display:none; }
/* Delen vol, downloaden stil, allebei over de volle breedte en onder elkaar. */
.maak-vast__deel,
.maak-vast__download{ width:100%; }
.maak-vast__download{ margin-top:var(--s3); }
.maak-vast__download[hidden]{ display:none; }

/* Meer mogelijkheden: een klap met een haarlijn erboven en eronder. */
.maak-vast__meer{
  margin-top:var(--s5);
  border-top:var(--lijn-dikte) solid var(--kleur-lijn);
  border-bottom:var(--lijn-dikte) solid var(--kleur-lijn);
}
.maak-vast__meer-kop{
  cursor:pointer;
  padding:var(--s3) 0;
  min-height:var(--knop-hoogte,44px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--kleur-ink);
  list-style:none;
}
.maak-vast__meer-kop::-webkit-details-marker{ display:none; }
.maak-vast__meer-kop::after{
  content:"";
  width:8px;
  height:8px;
  border-right:var(--lijn-dikte) solid currentColor;
  border-bottom:var(--lijn-dikte) solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s;
}
.maak-vast__meer[open] > .maak-vast__meer-kop::after{ transform:rotate(-135deg); }
.maak-vast__meer-kop:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }
.maak-vast__meer .maak-vast__acties{ margin-top:0; padding-bottom:var(--s3); }
.maak-vast__meer .maak-vast__product{ margin-bottom:var(--s3); }

/* De drie wegen verder, als stille regels. */
.maak-vast__wegen{
  list-style:none;
  margin:var(--s5) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  /* Geen ruimte tussen de regels: elke regel is hieronder zelf zo hoog als
     een knop, en met 12 ertussen werd de lijst luchtiger dan de knoppen
     erboven. */
  gap:0;
}
.maak-vast__wegen li{ margin:0; }
/* Stille regels, maar wel met de hoogte van een raakvlak. Als tekstregel waren
   ze 23 pixels hoog (nagemeten op 390 en 360) met 12 ertussen: drie doelen van
   35 pixels boven elkaar, onder de 44 die het thema als ondergrens hanteert
   en die de kleinknoppen erboven wél halen. Dezelfde oplossing als
   .ideeenlijn__link: de tekst blijft een regel, het doel wordt een rij, zo
   hoog als de knoppen erboven (--knop-hoogte, nagemeten 50 op deze pagina). */
.maak-vast__wegen .maak-vast__bewerken,
.maak-vast__wegen .maak-vast__editor,
.maak-vast__wegen .maak-vast__nogeen{
  /* flex en niet inline-flex: een rij is een blok, geen woord in een zin. */
  display:flex;
  align-items:center;
  min-height:var(--knop-hoogte,44px);
}
.maak-vast__editor{
  font-size:var(--fs-body);
  color:var(--kleur-soft);
  text-decoration:underline;
}
@media (hover: hover) and (pointer: fine){ .maak-vast__editor:hover{ color:var(--kleur-rood); } }
.maak-vast__wegen .maak-vast__nogeen{ margin-top:0; }
.maak-vast__wegen .maak-vast__bewerken{ margin-right:0; }
/* Alleen in de vastgezette stand. Zodra er iets verandert klopt "dit is wat je
   deelt" niet meer, en dan zegt de knoptekst het al. */
.maak-vast:not([data-cmpl-stand="vast"]) .maak-vast__stand{ display:none; }

/* De weg terug: een stille knop, want hij hoort bij de deelrij en niet bij de
   hoofdactie. Dezelfde vorm als "Maak er nog een" ernaast. */
.maak-vast__bewerken{
  background:none;
  border:0;
  padding:0;
  margin-right:var(--s4);
  font:inherit;
  color:var(--kleur-soft);
  text-decoration:underline;
  cursor:pointer;
}
@media (hover: hover) and (pointer: fine){.maak-vast__bewerken:hover{ color:var(--kleur-rood); }}
.maak-vast__bewerken:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }

.maak-vast[data-cmpl-stand="gewijzigd"] .maak-vast__opnieuw{ display:block; }
.maak-vast[data-cmpl-stand="gewijzigd"] .maak-vast__product,
.maak-vast[data-cmpl-stand="gewijzigd"] .maak-vast__acties,
.maak-vast[data-cmpl-stand="gewijzigd"] .maak-vast__melding{ display:none; }

.maak-vast__opnieuw-regel{
  margin:0 0 var(--s3);
  font-size:var(--fs-body);
  color:var(--kleur-soft);
}

@media (max-width:780px){
  .maak-vast__acties{ flex-direction:column; align-items:stretch; }
  /*
   * Vier knoppen over de volle breedte, en vier labels die op een andere plek
   * beginnen. Nagemeten op 390 px: de knoppen liepen alle vier netjes van 32
   * tot 358, maar hun tekst begon op 60, 60, 140 en 119, omdat twee ervan
   * links uitlijnen en twee gecentreerd staan. Zo gestapeld leest dat als een
   * rommelige lijst in plaats van als vier gelijkwaardige acties, en dat is wat
   * er op het scherm na "Dit is 'm" te zien was.
   *
   * Gestrekt betekent links. Gecentreerde tekst hoort bij een knop die zijn
   * eigen breedte heeft; deze vier hebben de breedte van de kolom.
   */
  .maak-vast__acties > .klaar__kleinknop,
  .maak-vast__acties > .btn{
    justify-content:flex-start;
    text-align:left;
  }
  /*
   * "Bewaar als filmpje" is een `.btn` en draagt daardoor 8 px zijpadding,
   * terwijl de drie erboven er geen hebben. Zijn icoon kwam daardoor op 40 uit
   * en dat van de andere drie op 32: de enige regel in het rijtje die niet op
   * de lijn stond.
   *
   * Die padding doet hier geen werk. De knop heeft in deze stand geen rand en
   * geen vlak (nagemeten: `border 0px none`, achtergrond doorzichtig), dus er
   * is niets om inhoud vanaf te laten inspringen; het is rode tekst met een
   * icoon, net als de drie erboven grijze tekst met een icoon zijn.
   */
  .maak-vast__acties > .btn{ padding-left:0; padding-right:0; }
}

/* ============================================================
   EEN NIEUWE ZIN LAAT ZICH ZIEN.
   ============================================================

   Tot 11 september 2026 wisselde de tekst zonder enige overgang. De wissel
   zelf is snel genoeg (nagemeten: 194 tot 203 ms tussen tik en nieuwe zin), dus
   wachten was het probleem niet; zien was het probleem. Op een telefoon staat
   de kaart na een beetje scrollen 373 pixels boven het scherm, en dan is het
   meelopende streepje bovenin het enige dat verandert. Een tekst die daar
   zonder overgang omklapt leest als "er gebeurde niets".

   Geen beweging maar licht: de zin komt op uit de papierkleur van de kaart.
   Schuiven zou de kaarthoogte laten springen, en die springt bij een langere
   zin al genoeg.                                                             */

.maak-stage .preview-art .q.is-vers,
.maak-streepje__zin.is-vers{
  animation:cmpl-zin-vers .32s ease-out;
}
@keyframes cmpl-zin-vers{
  from{opacity:0}
  to{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .maak-stage .preview-art .q.is-vers,
  .maak-streepje__zin.is-vers{animation:none}
}

/* ---- De wisselknoppen zeggen dat ze geraakt zijn ----

   Op een telefoon bestaat hover niet, dus de enige terugkoppeling die deze twee
   knoppen gaven was de nieuwe zin zelf, en die staat op dat moment vaak buiten
   beeld. `:active` is het goedkoopste antwoord dat er is: zolang je duim er op
   staat kleurt de rand mee, precies zoals hover dat op een muis doet.         */
.maak-tekenknop__wissel:active{
  border-color:var(--kleur-rood);
  color:var(--kleur-rood);
}

/* De regel naar de hub, onder de maker.

   Eén regel en geen blok: zie template-parts/ideeenrij.php voor waarom hier
   geen register staat. De vorm is die van een gewone tekstlink, want dat is wat
   het is; hij hoort niet te concurreren met de knop erboven.               */
.ideeenlijn{
  margin:var(--s6) 0 0;
  text-align:center;
  font-size:var(--fs-body);
}
.ideeenlijn__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--kleur-rood);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
}
.ideeenlijn__link:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .ideeenlijn__link:hover{color:var(--knop-vol-hover,var(--kleur-rood))}
}

/* ---------------------------------------------------------------------------
   Het gerenderde vel in de kaart

   Kom je terug uit de schermvullende editor met een aangeklede kaart — andere
   letter, eigen kleur, gedraaide woorden — dan kan deze kaart dat niet tonen.
   De <p> heeft een vaste letter en een vaste plek. generator.js zet er dan het
   bestand in dat de drukker krijgt, en verbergt de kinderen eronder.

   Geen !important. De regels hieronder staan achter .is-gerenderd, en die
   klasse zet alleen generator.js; er is dus niets om van te winnen. Dat is met
   opzet: de kaart zit al in een wedstrijd tussen drie stylesheets en daar hoort
   geen vierde deelnemer bij.
--------------------------------------------------------------------------- */
.preview-art.is-gerenderd{
  /* Geen binnenruimte meer: het vel heeft zijn eigen marges al ingebakken,
     want het ís het drukbestand. Padding eromheen zou de kaart een tweede,
     bredere rand geven dan wat er uit de drukker komt. */
  padding:0;
  overflow:hidden;
  /* De verhouding van het vel, zodat de kaart niet van maat verspringt op het
     moment dat het beeld binnenkomt. De twee getallen komen van de server, uit
     Cmpl_Print_Renderer::preview_maat() van het vel waar de route vandaan komt;
     704 bij 900 is het canvas en tegelijk de terugval. Dezelfde bron die
     template-editor.php voor zijn doek gebruikt en dezelfde die de ondergrens
     hierboven leest. Eén plek, drie gebruikers. */
  aspect-ratio:var(--vel-breed, 704) / var(--vel-hoog, 900);
  display:grid;
  place-items:stretch;
}
/* Alles behalve het vel gaat weg.

   generator.js zet er ook `hidden` op, maar dat attribuut verliest van elke
   klasse die zelf een display zet — en dat doen de bladerpijlen: die staan op
   display:flex en bleven dus over het gerenderde vel hangen. Pijlen waarmee je
   de tekening kunt wisselen boven een plaatje dat niet meeverandert, dat is een
   knop die liegt.

   Met :not() erbij is dit specifieker dan die klasseregels, dus geen !important
   nodig. */
.preview-art.is-gerenderd > *:not([data-cmpl-render]){display:none}

/* Binnen het vel ligt het beeld in hetzelfde rastervak als de inhoud en het
   verhoudingsblokje. Zonder deze regel viel het in een tweede rij, onder de
   kaart, en bleef de kaart zelf leeg. */
.preview-art--vel.is-gerenderd > [data-cmpl-render]{ grid-area:1 / 1; }
/* En verborgen is verborgen, ook voor dit beeld: het staat altijd in de
   HTML en krijgt pas een bron als er iets te tonen is. */
.preview-art > [data-cmpl-render][hidden]{ display:none; }

.preview-art.is-gerenderd [data-cmpl-render]{
  display:block;
  width:100%;
  height:100%;
  /* contain en niet cover: liever een randje wit dan een kaart waar de onderste
     regel van je compliment buiten valt. */
  object-fit:contain;
}

/* De regel onder de kaart die zegt wat je ziet en hoe je terugkomt.
   Hij hangt aan de kaart, niet aan de knoprij: het gaat over wat er bóven hem
   staat. Dezelfde reden waarom "Zelf schrijven mag" daar staat. */
/* Voor de derde keer in deze verbouwing: een klasse die zelf een display zet
   wint van het attribuut `hidden`, en dan staat er uitleg over iets dat niet op
   het scherm staat. Deze regel hoort bij display:flex hieronder en niet ergens
   anders, zodat ze samen te lezen zijn. */
.maak-render-terug[hidden]{display:none}
.maak-render-terug{
  margin:var(--s2) 0 0;
  font-size:var(--fs-label);
  color:var(--kleur-soft);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.15rem .5rem;
}
.maak-render-terug__uitleg{
  /* De geruststelling staat op een eigen regel zodra er geen ruimte is, want
     dit is de zin die voorkomt dat de knop leest als "gooi mijn werk weg". */
  flex-basis:100%;
}

/* ===========================================================================
   HET TEKSTPANEEL — kiezen in plaats van dobbelen (11 sep 2026)

   Drie voorstellen onder elkaar met een bolletje ervoor, een keuzelijst
   erboven, en een tekstveld dat hun plaats inneemt als je zelf schrijft.

   De vorm is bewust anders dan die van de chiprij die hier stond. Die was een
   rij pillen: kies één uit vijf, allemaal even belangrijk. Dit is een lijst van
   voorstellen waarvan er één gekozen is, en dat is een ander gedrag. In het
   vormregister zijn dat twee patronen, dus horen ze er niet hetzelfde uit te
   zien.
   =========================================================================== */

.maak-tekst{
  display:flex;
  flex-direction:column;
  gap:var(--s4);
}

/* De keuzelijst. Label ernaast op breed, eronder op smal: het label is kort en
   de lijst hoeft de volle breedte niet. */
.maak-tekst__soort{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s2) var(--s3);
}
.maak-tekst__soort label{
  font-size:var(--fs-label);
  color:var(--kleur-soft);
}
.maak-tekst__soort select{
  font:inherit;
  color:var(--kleur-ink);
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--kleur-veldrand);
  border-radius:var(--r-vlak);
  /* Op de ruimteladder: hier stond 10px en die bestaat niet in het systeem.
     De hoogte komt toch uit min-height, dus de binnenruimte hoeft die niet te
     maken. */
  padding:var(--s3);
  /* 44 px raakvlak, de ondergrens uit het ontwerpsysteem. */
  min-height:var(--knop-hoogte,44px);
  min-width:12rem;
}

/* De drie regels. Haarlijnen ertussen en geen kaartjes: dit is één lijst en
   geen drie losse dingen. Dezelfde keuze als in de tekstbibliotheek. */
.maak-tekst__rij{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  border-top:var(--lijn-dikte) solid var(--kleur-lijn);
}
.maak-tekst__rij:last-child{
  border-bottom:var(--lijn-dikte) solid var(--kleur-lijn);
}

/* Het bolletje. Een echte radio, zodat pijltjestoetsen en schermlezer het
   gedrag gratis meebrengen; alleen het uiterlijk is van ons. */
.maak-tekst__radio{
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  width:20px;
  height:20px;
  /* Op de ladder, en niet met een som die een willekeurig getal oplevert.
     12px boven zet het bolletje op de hoogte van de eerste regel tekst. */
  margin:var(--s3) 0 0 var(--s3);
  /* Een lijn is 1px in dit systeem. Het bolletje had 2px omdat het anders dun
     oogt, maar dat is precies het soort uitzondering waar een ontwerpsysteem
     aan doodgaat; de gekozen stand valt op aan de rode vulling en het vlak
     eromheen, niet aan de dikte van de rand. */
  border:var(--lijn-dikte) solid var(--kleur-veldrand);
  border-radius:50%;
  background:var(--kleur-grond);
  cursor:pointer;
}
.maak-tekst__radio:checked{
  border-color:var(--kleur-rood);
  /* Het rode hart van het bolletje, met een ring wit ertussen. */
  background:radial-gradient(var(--kleur-rood) 0 45%, var(--kleur-grond) 47% 100%);
}
.maak-tekst__radio:focus-visible{
  outline:2px solid var(--kleur-rood);
  outline-offset:2px;
}

/* De hele regel is klikbaar, want een bolletje van 20 pixels is een klein doel.
   Het label pakt daarom de rest van de breedte en heeft zelf de hoogte van een
   raakvlak. */
.maak-tekst__label{
  flex:1 1 auto;
  min-width:0;
  /* 12 + 12 boven en onder, met een regelhoogte van 1,5 erin: samen ruim boven
     de 44 px raakvlak, en allemaal van de ladder. */
  padding:var(--s3) var(--s3) var(--s3) 0;
  cursor:pointer;
  line-height:1.5;
}
/* De gekozen regel krijgt de zachte achtergrond. Op de regel en niet op het
   label, zodat het vlak ook onder het bolletje doorloopt. */
/* De gekozen regel krijgt het rode vlak, en dat is letterlijk de rode kleur met
   dekking erover.

   Hier stond --kleur-vlak-tint. Dat is een token, maar geen systeemkleur: het
   palet kent er zes, en de ontwerpcontrole rekent elke zevende als overtreding.
   Terecht, want een tint die naast de zes leeft gaat een eigen leven leiden.
   Een doorzichtige laag van een van de zes is wél toegestaan, en dat is precies
   wat deze roze is. */
.maak-tekst__rij:has(.maak-tekst__radio:checked){
  background:color-mix(in srgb, var(--kleur-rood) 8%, transparent);
}
@media (hover: hover) and (pointer: fine){
  /* Het rood van het systeem, zachter dan de gekozen rij; geen warm vlak
     (dat is uit het systeem sinds 12 september 2026). */
  .maak-tekst__rij:hover{ background:color-mix(in srgb, var(--kleur-rood) 4%, transparent); }
  .maak-tekst__rij:has(.maak-tekst__radio:checked):hover{ background:color-mix(in srgb, var(--kleur-rood) 8%, transparent); }
}

/* De twee wegen eronder: verder bladeren of zelf schrijven. Links en geen
   knoppen, want de keuze staat hierboven; dit zijn uitwegen. */
.maak-tekst__acties{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3) var(--s4);
  margin:0;
}
/* Staat het schrijfvak open, dan verbergt generator.js alle knoppen in deze
   rij, maar de rij zelf bleef staan: nul pixels hoog, met de 16 van het paneel
   erboven én eronder. Zo kwam het schrijfvak op 32 van de keuzelijst terwijl
   de voorstellen op 16 staan. Een rij zonder zichtbare knop is geen rij. */
.maak-tekst__acties:not(:has(> :not([hidden]))){display:none}

.maak-tekst__zelf{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}
.maak-tekst__zelf label{
  font-size:var(--fs-label);
  color:var(--kleur-soft);
}
.maak-tekst__zelf textarea{
  font:inherit;
  color:var(--kleur-ink);
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--kleur-veldrand);
  border-radius:var(--r-vlak);
  padding:12px;
  resize:vertical;
  min-height:6rem;
}
.maak-tekst__zelf textarea:focus-visible{
  outline:2px solid var(--kleur-rood);
  outline-offset:2px;
}
.maak-tekst__zelf [data-cmpl-terug-voorbeelden]{
  align-self:flex-start;
}

/* Verborgen is verborgen, ook binnen dit paneel.

   Het attribuut `hidden` zet display:none via de stijlbladen van de browser
   zelf, en dat is de zwakste laag die er is: elke klasse die zelf een display
   zet wint ervan. Hier zijn dat `.link` op de twee uitwegen en de flexregels op
   het schrijfvak, waardoor "Vorige teksten" bij binnenkomst zichtbaar was
   terwijl je nog niet gebladerd had, en het schrijfvak openstond zonder dat
   iemand op "Zelf schrijven" had gedrukt. Dezelfde val als bij de bladerpijlen
   over het gerenderde vel.

   Eén regel met een attribuutselector erbij is specifieker dan die klassen, dus
   geen !important nodig. */
.maak-tekst [hidden]{display:none}

/* ---------------------------------------------------------------------------
   De tekeningkiezer onder de kaart (11 sep 2026)

   Eén knop "Andere tekening" sprong naar een willekeurige volgende; wie een
   bepaalde tekening zocht bleef klikken. Hier staan ze allemaal, met een uitweg
   en een knop om het weer dicht te doen.
--------------------------------------------------------------------------- */
.maak-tekening-open{ margin:var(--s2) 0 0; }

.maak-tekeningpaneel{
  margin-top:var(--s3);
  padding:var(--s3);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}
/* Verborgen is verborgen: dezelfde val als elders in deze maker, waar een
   klasse met een eigen display van het attribuut wint. */
.maak-tekeningpaneel[hidden]{ display:none; }

.maak-tekeningpaneel__rij{
  display:grid;
  /* Meeschalend en geen vaste kolomtelling: op 390 px passen er vier, op een
     breed scherm zes, zonder een media query per stap. */
  grid-template-columns:repeat(auto-fill, minmax(56px, 1fr));
  gap:var(--s2);
}
.maak-tekeningpaneel__duim{
  display:grid;
  place-items:center;
  /* 56 plus de rand haalt de 44 px raakvlak ruim; het duimpje zelf is 56. */
  padding:var(--s1);
  /* Wit met een lijn; het warme vlak is uit het systeem (12 september 2026). */
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  cursor:pointer;
  /* Vierkant, wat er ook in staat. De duimpjes kwamen tot 12 september 2026
     uit de SVG-masters, en die zijn staand: 69 bij 99 op 390 px, zes rijen
     van 99 hoog. Nu komt het duimpje van 128 px (data-duim), en mocht dat
     ontbreken dan houdt dit vak de rij toch gelijk. */
  aspect-ratio:1;
}
.maak-tekeningpaneel__duim img{ display:block; width:100%; height:100%; object-fit:contain; }
.maak-tekeningpaneel__duim.is-actief{
  border-color:var(--kleur-rood);
  /* Met een rand van 1px alleen valt de gekozen tekening te weinig op; het
     zachte rode vlak doet hier het werk dat de dikke rand deed. Dezelfde
     oplossing als bij de gekozen tekstregel, en om dezelfde reden een
     doorzichtige laag van een systeemkleur in plaats van een zevende tint. */
  background:color-mix(in srgb, var(--kleur-rood) 8%, transparent);
}
.maak-tekeningpaneel__duim:focus-visible{
  outline:2px solid var(--kleur-rood);
  outline-offset:2px;
}

.maak-tekeningpaneel__acties{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--s2) var(--s3);
  margin:0;
}

/* Het gerenderde vel vult de hele kaart, ook als er een tekening op staat.

   `#cmpl-preview.has-motief` zet 8% binnenruimte, en een id wint van de klasse
   .is-gerenderd hierboven. Het vel stond daardoor in een kader van 400 pixels
   in een kaart van 476, met de papierkleur eromheen: een kaart in een kaart.
   Het vel heeft zijn eigen marges al, want het is het drukbestand. */
#cmpl-preview.has-motief.is-gerenderd{ padding:0; }

/* ==========================================================================
 * De rustige indeling van 12 september 2026
 *
 * Bediening links, kaart rechts op een breed scherm (dat stond er al). Op een
 * telefoon komt de kaart eerst en dan de bediening: je ziet waaraan je werkt
 * voordat je begint (M11 in de overdracht). De HTML blijft bediening-eerst,
 * want dat is de leesvolgorde op breed; hier draait alleen het beeld op smal.
 * ========================================================================== */
@media (max-width:991px){
  .maak-studio--rustig{ display:flex; flex-direction:column; }
  .maak-studio--rustig .maak-stage{ order:-1; }
  /* De kaart smaller dan de kolom: rond de 20 rem op een telefoon, in het
     midden. Zo wordt "meer lucht" geen kaart van een half scherm hoog. */
  .maak-studio--rustig .maak-stage .preview{ max-width:20rem; margin:0 auto; }
  /* De bediening 32 onder de kaartkolom: een taakgroep, dus een trede. */
  .maak-studio--rustig .maak-bediening + .maak-stage{ margin-top:0; }
  .maak-studio--rustig .maak-bediening{ margin-top:var(--s6); }
}

/* Het kopje "Jouw kaart": een gewoon label boven de kaart. Zonder regel
   eronder heeft het geen ruimte voor een regel nodig. */
.maak-studio--rustig .maak-stage > .maak-stapkop{ margin-bottom:var(--s2); }

/* De regel "Naar de uitgebreide maker" onder de hoofdknop: 16 ertussen (de
   overdracht zegt 16 tot 20), gecentreerd onder een knop die de volle breedte
   heeft. In de vastgezette stand staat dezelfde link al in het vastblok. */
.maak-keuze > .maak-keuze__editor{ margin:var(--s4) 0 0; text-align:center; }
.maak-keuze__editor .maak-vast__editor{
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px;
  font-size:var(--fs-body); font-weight:600;
  color:var(--kleur-ink);
  text-decoration:underline; text-underline-offset:3px;
}
@media (hover:hover) and (pointer:fine){ .maak-keuze__editor .maak-vast__editor:hover{ color:var(--kleur-rood); } }
.maak-studio[data-cmpl-stand="vast"] .maak-keuze__editor{ display:none; }

/* "Tekening aanpassen" onder de kaart, gecentreerd zoals in het ontwerp. */
.maak-studio--rustig .maak-tekening-open{ text-align:center; }

/* Vorige en volgende in de tekeningkiezer, nu de pijlen niet meer over de
   kaart liggen. Twee ronde knoppen van 44, naast "Zonder tekening". */
.maak-tekeningpaneel__acties{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin:0; }
.maak-tekeningpaneel__blader{ display:inline-flex; gap:var(--s2); }
.maak-tekeningpaneel__pijl{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-rond);
  background:var(--kleur-grond);
  color:var(--kleur-ink);
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .maak-tekeningpaneel__pijl:hover{ border-color:var(--kleur-rood); color:var(--kleur-rood); } }
.maak-tekeningpaneel__pijl:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }
.maak-tekeningpaneel__acties [data-cmpl-tekening-gereed]{ margin-left:auto; }

/* De rij "Foto als achtergrond" onder de eigen-stijl-link: een rij met een
   icoonvakje links en een chevron rechts, in de vorm van de andere rijen. */
.editor-strook__route{
  display:flex; align-items:center; gap:var(--s3);
  width:100%; max-width:26rem; min-height:48px;
  margin:var(--s4) 0 0;
  padding:var(--s2) var(--s4);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  color:var(--kleur-ink);
  text-decoration:none;
  font-size:var(--fs-body); font-weight:500;
}
@media (hover:hover) and (pointer:fine){ .editor-strook__route:hover{ border-color:var(--kleur-rood); } }
.editor-strook__route:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }
.editor-strook__route-ic{ display:inline-flex; color:var(--kleur-soft); }
.editor-strook__route-tekst{ flex:1 1 auto; min-width:0; }
.editor-strook__route-pijl{ display:inline-flex; color:var(--kleur-soft); }
.editor-strook__route[aria-busy="true"]{ opacity:.6; }

/* ==========================================================================
 * "Alle teksten bekijken": de rij naar de bladerstand, 12 september 2026
 *
 * Een link in de vorm van de andere rijen in de bedieningskolom (icoon
 * links, chevron rechts, 48 hoog). Het venster dat hier een paar uur stond
 * is weg; de bladerstand hieronder is de plek waar de bibliotheek open staat.
 * ========================================================================== */
.maak-alle-teksten{ margin:var(--s4) 0 0; }
.maak-alle-teksten__knop{
  display:flex; align-items:center; gap:var(--s3);
  width:100%; min-height:48px;
  padding:var(--s2) var(--s4);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  background:var(--kleur-grond);
  color:var(--kleur-ink);
  font-family:inherit; font-size:var(--fs-body); font-weight:500;
  text-align:left; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .maak-alle-teksten__knop:hover{ border-color:var(--kleur-rood); } }
.maak-alle-teksten__knop:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }
.maak-alle-teksten__ic{ display:inline-flex; color:var(--kleur-soft); }
.maak-alle-teksten__knop > span:nth-child(2){ flex:1 1 auto; min-width:0; }
.maak-alle-teksten__pijl{ display:inline-flex; color:var(--kleur-soft); }


/* ==========================================================================
 * De bladerstand: /maak-een-compliment/?blader=1 (12 september 2026)
 *
 * Teksten links (ruim de helft), de kaart rechts, en op een telefoon twee
 * standen. De bibliotheek staat meteen open; de keuzelijst en de drie
 * voorstellen van het tekstpaneel blijven in de HTML (generator.js heeft ze
 * nodig voor "Zelf schrijven") maar zijn hier niet te zien.
 * ========================================================================== */
@media (min-width:900px){
  .maak-studio--blader{
    grid-template-columns:minmax(0,55fr) minmax(0,38fr);
    gap:var(--s8);
    align-items:start;
  }
  .maak-studio--blader .maak-stage{ position:sticky; top:var(--s5); }
}
.maak-studio--blader .maak-keuze{ border:0; padding:0; background:transparent; border-radius:0; }

/* De kop in de werkruimte. */
.maak-blader-kop{ margin:0 0 var(--s5); }
.maak-blader-kop__titel{
  margin:0;
  font-size:var(--fs-titel);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.025em;
  color:var(--kleur-ink);
  text-wrap:balance;
}
.maak-blader-kop__regel{ margin:var(--s3) 0 0; font-size:var(--fs-lead); color:var(--kleur-soft); }
.maak-blader-kop__smal{ display:none; }

/* De twee tabbladen: een rode streep onder het actieve. Eén lijndikte, op
   de plek van de scheidingslijn; dikker mag het ontwerpsysteem niet. */
.maak-blader-tabs{
  display:flex; gap:var(--s5);
  margin:var(--s5) 0 0;
  border-bottom:var(--lijn-dikte) solid var(--kleur-lijn);
}
.maak-blader-tab{
  padding:var(--s3) 0;
  min-height:44px;
  border:0; border-bottom:var(--lijn-dikte) solid transparent;
  margin-bottom:calc(-1 * var(--lijn-dikte));
  background:none;
  font-family:inherit; font-size:var(--fs-body); font-weight:500;
  color:var(--kleur-soft);
  cursor:pointer;
}
.maak-blader-tab.is-actief{ color:var(--kleur-ink); font-weight:600; border-bottom-color:var(--kleur-rood); }
.maak-blader-tab:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }

/* De bibliotheek zelf, in de bladerstand. */
.maak-blader-lijst{ margin-top:var(--s4); }
/* De volgorde van het ontwerp: zoekveld, filters, tabbladen, rijen. De
   kiezer bouwt zoekveld, filters, kop en rijen in één ouder; blader.js zet de
   tabbladen daar tussen, en dit raster zet alles op zijn plek. De kop "Het
   vaakst gekozen" vervalt: de tabbladen zeggen het al. */
.maak-blader-lijst .cmpl-kiezer{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.maak-blader-lijst .cmpl-kiezer__zoek{ order:1; margin-bottom:var(--s4); }
.maak-blader-lijst .cmpl-kiezer__actief{ order:2; }
.maak-blader-lijst .cmpl-kiezer__filters{ order:3; margin-bottom:0; }
.maak-blader-lijst .maak-blader-tabs{ order:4; margin-top:var(--s5); }
.maak-blader-lijst .cmpl-kiezer__kop{ order:5; display:none; }
.maak-blader-lijst .cmpl-kiezer__lijst{ order:6; }
.maak-blader-lijst .cmpl-kiezer__leeg{ order:6; }
.maak-blader-lijst .cmpl-kiezer__meer{ order:7; }
/* Zolang de tabbladen nog niet verhuisd zijn (geen script) staan ze boven de
   lijst, en dat is ook goed. */
.maak-blader-tabs + .maak-blader-lijst{ margin-top:var(--s4); }
.maak-blader-lijst .cmpl-kiezer__label{ font-size:var(--fs-body); font-weight:500; color:var(--kleur-ink); }
.maak-blader-lijst .cmpl-kiezer__invoer{ min-height:48px; }

/* De filters als twee uitklapgroepen naast elkaar. De kiezer bouwt de groep
   "Waarvoor is het?" eerst; het ontwerp zet "Voor wie" links. */
.maak-blader-lijst .cmpl-kiezer__filters{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s3);
  align-items:start;
}
.maak-blader-lijst .cmpl-kiezer__groep[data-cmpl-blader-groep="wie"]{ order:1; }
.maak-blader-lijst .cmpl-kiezer__groep[data-cmpl-blader-groep="moment"]{ order:2; }
.maak-blader-lijst .cmpl-kiezer__groep{ position:relative; }
.maak-blader-lijst .cmpl-kiezer__groepkop,
.maak-blader-lijst .cmpl-kiezer__chips{ display:none; }
.maak-blader-lijst .cmpl-kiezer__groep.is-open .cmpl-kiezer__groepkop{ display:flex; margin-top:var(--s3); }
.maak-blader-lijst .cmpl-kiezer__groep.is-open .cmpl-kiezer__chips{ display:flex; }
/* Open staat de hele lijst: de "meer"-chip van de kiezer heeft dan geen werk. */
.maak-blader-lijst .cmpl-kiezer__groep.is-open .cmpl-kiezer__chip--meer{ display:none; }
.maak-blader-filter{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  width:100%; min-height:48px;
  padding:var(--s2) var(--s4);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  background:var(--kleur-grond);
  color:var(--kleur-ink);
  font-family:inherit; font-size:var(--fs-body); font-weight:500;
  text-align:left; cursor:pointer;
}
.maak-blader-filter.is-gekozen{ border-color:var(--kleur-rood); }
.maak-blader-filter:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }
.maak-blader-filter__label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maak-blader-filter__pijl{
  flex:none; width:10px; height:10px;
  border-right:var(--lijn-dikte) solid var(--kleur-soft);
  border-bottom:var(--lijn-dikte) solid var(--kleur-soft);
  transform:rotate(45deg); margin-top:-4px;
}
.maak-blader-lijst .cmpl-kiezer__groep.is-open .maak-blader-filter__pijl{ transform:rotate(225deg); margin-top:4px; }

/* De rijen: een bolletje in plaats van een hartje, en de gekozen rij in het
   zachte rood, precies als de drie voorstellen in de eenvoudige maker. */
.maak-blader-lijst .cmpl-kiezer__tekst{
  align-items:flex-start;
  padding:var(--s3) var(--s3) var(--s3) 0;
  border-radius:0;
  line-height:1.5;
  color:var(--kleur-ink);
}
.maak-blader-lijst .cmpl-kiezer__tekst::before{
  content:"";
  flex:none;
  width:20px; height:20px;
  margin:2px 0 0 var(--s3);
  border:var(--lijn-dikte) solid var(--kleur-veldrand, var(--kleur-lijn));
  border-radius:50%;
  background:var(--kleur-grond);
  opacity:1;
}
.maak-blader-lijst .cmpl-kiezer__tekst.is-gekozen{
  background:color-mix(in srgb, var(--kleur-rood) 8%, transparent);
}
.maak-blader-lijst .cmpl-kiezer__tekst.is-gekozen::before{
  border-color:var(--kleur-rood);
  background:radial-gradient(var(--kleur-rood) 0 45%, var(--kleur-grond) 47% 100%);
}
.maak-blader-lijst .cmpl-kiezer__tekst.is-actief{ background:transparent; }
.maak-blader-lijst .cmpl-kiezer__item:first-child{ border-top:var(--lijn-dikte) solid var(--kleur-lijn); }
.maak-blader-lijst .cmpl-kiezer__item:last-child{ border-bottom:var(--lijn-dikte) solid var(--kleur-lijn); }
.maak-blader-lijst .cmpl-kiezer__meer{ margin-top:var(--s4); }

/* Het tekstpaneel in de bladerstand: alleen het eigen veld doet mee. */
.maak-studio--blader .maak-tekst__soort,
.maak-studio--blader .maak-tekst__voorstellen,
.maak-studio--blader .maak-tekst__acties,
.maak-studio--blader [data-cmpl-terug-voorbeelden]{ display:none; }
/* In de kiesstand is het tekstpaneel leeg (alles eronder is verborgen);
   dan hoort er ook geen ruimte boven te staan. */
.maak-studio--blader .maak-tekst{ margin-top:0; }
.maak-studio--blader.is-schrijven .maak-tekst{ margin-top:var(--s4); }
.maak-studio--blader .maak-tekst__zelf[hidden]{ display:none; }
/* In de schrijfstand gaat de lijst dicht; het veld staat op dezelfde plek. */
/* De tabbladen staan in de kiezer (blader.js zet ze daar), dus de lijst
   zelf blijft staan en alleen de rest van de kiezer gaat dicht. */
.maak-studio--blader.is-schrijven .maak-blader-lijst .cmpl-kiezer > :not(.maak-blader-tabs){ display:none; }
.maak-studio--blader:not(.is-schrijven) .maak-tekst__zelf{ display:none; }

.maak-blader-terug-naar-drie{ margin:var(--s5) 0 0; padding-top:var(--s5); border-top:var(--lijn-dikte) solid var(--kleur-lijn); }
.maak-blader-terug-naar-drie .maak-vast__editor,
.maak-blader-inspiratie .maak-vast__editor{
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px; font-weight:600; color:var(--kleur-rood);
  text-decoration:underline; text-underline-offset:3px;
}
.maak-blader-inspiratie{ max-width:1180px; margin:var(--s8) auto 0; padding-top:var(--s5); border-top:var(--lijn-dikte) solid var(--kleur-lijn); }

/* De kaartkolom: kopje, kaart, de bediening eronder, de afrondknop. */
.maak-blader-terug{ display:none; margin:0 0 var(--s4); }
.maak-blader-terug__knop{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; padding:0; border:0; background:none;
  font-family:inherit; font-size:var(--fs-body); font-weight:500;
  color:var(--kleur-ink); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.maak-studio--blader .maak-tekening-open{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); justify-content:flex-start; text-align:left; margin-top:var(--s3); }
.maak-blader-kaartacties{ margin-top:var(--s4); display:flex; flex-direction:column; gap:var(--s4); }
.maak-blader-kaartacties .cmpl-namen{ margin:0; }
.maak-blader-kaartacties .maak-keuze__maak{ width:100%; }
.maak-blader-kaartacties .maak-keuze__editor{ margin:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s1); }
.maak-blader-kaartacties .maak-vast__editor{
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px; font-size:var(--fs-body); font-weight:600;
  color:var(--kleur-ink); text-decoration:underline; text-underline-offset:3px;
}
.maak-blader-kaartacties__uitleg{ font-size:var(--fs-label); color:var(--kleur-soft); text-align:center; }
/* In de vastgezette stand: de bibliotheek en de kaartbediening gaan weg, het
   vastblok links neemt het over (zoals overal). */
.maak-studio--blader[data-cmpl-stand="vast"] .maak-blader-werk,
.maak-studio--blader[data-cmpl-stand="vast"] .maak-blader-terug-naar-drie,
.maak-studio--blader[data-cmpl-stand="vast"] .maak-blader-kaartacties{ display:none; }
/* Het meelopende streepje hoort hier niet: op een telefoon is de kaart een
   eigen stand, en op breed staat hij vast naast de lijst. */
.maak-studio--blader .maak-streepje.is-zichtbaar{ display:none; }

/* De knop naar de kaartstand: alleen op smal. */
.maak-blader-bekijk{ display:none; }

@media (max-width:899px){
  .maak-studio--blader{ display:block; }
  .maak-blader-kop__breed{ display:none; }
  .maak-blader-kop__smal{ display:inline; }
  .maak-blader-kop__regel{ font-size:var(--fs-body); }
  .maak-blader-lijst .cmpl-kiezer__filters{ gap:var(--s2); }

  /* De twee standen: in "teksten" staat de kaartkolom uit beeld, in "kaart"
     de werkruimte. Uit beeld en niet weg: de kaart blijft dezelfde kaart, en
     generator.js blijft hem bijwerken terwijl je door de lijst gaat. */
  .maak-studio--blader[data-cmpl-blader-stand="teksten"] .maak-stage{ display:none; }
  .maak-studio--blader[data-cmpl-blader-stand="kaart"] .maak-keuze{ display:none; }
  .maak-studio--blader .maak-bediening + .maak-stage{ margin-top:0; }
  .maak-studio--blader .maak-stage .preview{ max-width:none; }
  .maak-blader-terug{ display:block; }

  /* De balk onderaan de tekststand. Sticky binnen de werkruimte, dus hij
     schuift mee tot de werkruimte op is en ligt nooit over de voettekst. */
  .maak-blader-bekijk{
    display:block;
    position:sticky; bottom:0;
    margin:var(--s5) calc(-1 * var(--s5)) 0;
    padding:var(--s3) var(--s5);
    background:var(--kleur-grond);
    border-top:var(--lijn-dikte) solid var(--kleur-lijn);
  }
  .maak-blader-bekijk__knop{ width:100%; min-height:48px; }
  .maak-blader-bekijk__knop:disabled{ opacity:.5; cursor:default; }
  .maak-studio--blader[data-cmpl-stand="vast"] .maak-blader-bekijk{ display:none; }
}

/* De twee filtergroepen: "Voor wie" eerst, zoals in het ontwerp; de kiezer
   bouwt het moment eerst. Een open groep krijgt de hele breedte, anders staan
   twintig chips in een halve kolom. De groepskop erin vervalt: de knop erboven
   zegt het al. */
.maak-studio--blader .cmpl-kiezer__groep[data-cmpl-blader-groep="wie"]{ order:-1; }
.maak-studio--blader .cmpl-kiezer__groep.is-open{ grid-column:1 / -1; }
.maak-studio--blader .cmpl-kiezer__groepkop,
.maak-studio--blader .cmpl-kiezer__groeptitel{ display:none; }

/* ---------------------------------------------------------------------------
   De terugweg naar het product waar je vandaan kwam.

   Staat boven de maker en boven het eindscherm. Tot 13 september 2026 was dit
   op de maakpagina een omkaderd vlak met een donkere chip erin, met de opmaak
   in een style-attribuut. Twee dingen klopten daar niet aan: het had de vorm
   van een keuze terwijl het navigatie is, en het kostte 147 px boven de maker
   op een telefoon. Op het eindscherm stond het helemaal niet, en dat was het
   hele probleem: wie via een tegeltje binnenkwam, kon aan het eind nergens
   terug naar dat tegeltje.

   Dezelfde vorm als .maak-blader-terug__knop hierboven, de terugweg die er al
   stond. Geen pil en geen koraal: op beide schermen is er al een gevulde knop
   en dat hoort de bestelknop te zijn.
--------------------------------------------------------------------------- */
.cmpl-terugband{ margin:0 0 var(--s3); }
.cmpl-terugband__weg{
  display:inline-flex; align-items:center; gap:var(--s2);
  /* 44 px raakvlak, ook al is de regel zelf maar 20 hoog. */
  min-height:44px; padding:var(--s1) 0;
  font-size:var(--fs-body);
  color:var(--kleur-soft);
  text-decoration:none;
}
.cmpl-terugband__weg svg{ flex:none; }
@media (hover:hover) and (pointer:fine){
  .cmpl-terugband__weg:hover{
    color:var(--kleur-ink);
    text-decoration:underline; text-underline-offset:3px;
  }
}