/*
 * De schermvullende editor.
 *
 * Maten uit het InContext-ontwerp: bovenbalk 60 hoog, rail 76 breed, paneel 340
 * breed, haarlijnen van 1 pixel, knoppen als pil. De kaart in het midden staat
 * op de verhouding van het product en krijgt een diepe zachte schaduw, zodat hij
 * van het werkblad afkomt.
 *
 * Op een telefoon kan die indeling niet: dan gaat de rail naar onderen als een
 * balk met tabs, en het paneel schuift onder de kaart. Anders zou er van de
 * 340 pixels paneel niets overblijven.
 */

.ev {
  --ev-lijn: var(--line, var(--kleur-lijn));
  --ev-grijs: var(--ink-2, var(--kleur-soft));
  --ev-zacht: var(--kleur-grond);
  /* De hoogte van de werkbalk bovenaan, als naam. Hij stond als 60 in de
     regel eronder en nog een keer in de rekensom van het bewerkvel; twee
     plekken die hetzelfde getal moeten kennen is er een te veel. */
  --ev-balk: 60px;
  /* Zoveel werkvlak houdt de kaart altijd, ook met het bewerkvel open. Onder
     deze hoogte is een kaart geen voorbeeld meer maar een vlekje. */
  --ev-kaartruimte: 280px;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  background: var(--kleur-grond);
  font-family: inherit;
}

/*
 * Het werkvlak past op het scherm, en het paneel schuift erbinnen.
 *
 * Tot 14 september 2026 groeide de editor mee met het langste paneel: op 1280
 * werd hij 1024 hoog in een venster van 900, en stonden de zoomknoppen 131
 * pixels onder de vouw. Je moest de pagina scrollen om je eigen kaart weer
 * heel te zien, en dat is precies wat een werkvlak niet hoort te doen.
 *
 * --ev-boven is de afstand van de bovenkant van de editor tot de bovenkant van
 * de pagina, dus de sitebalk erboven. Die wordt één keer gemeten in
 * editor-vol.js en hier verbruikt; in CSS is hij niet te kennen, want de kop
 * van de site is geen vaste maat.
 */
.ev { height: calc(100dvh - var(--ev-boven, 0px)); }

/* --- bovenbalk --- */
.ev__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--ev-balk);
  flex: none;
  padding: 0 24px;
  background: var(--kleur-grond);
  border-bottom:var(--lijn-dikte) solid var(--ev-lijn);
}
.ev__merk { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ev__terug {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size:var(--fs-body);
  color: var(--ev-grijs);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine){.ev__terug:hover { color: var(--ink, var(--kleur-ink)); }}
.ev__streep { width: 1px; height: 20px; background: var(--ev-lijn); flex: none; }
.ev__wat {
  font-size:var(--fs-body);
  color: var(--ink, var(--kleur-ink));
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev__acties { display: flex; align-items: center; gap: 12px; }
.ev__staat { font-size:var(--fs-label); color: var(--ev-grijs); }
.ev__knop {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 24px;
  border-radius: var(--r-rond);
  font-size:var(--fs-label);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border:var(--lijn-dikte) solid var(--knop-vol);
  color: var(--knop-vol-hover, var(--kleur-rood));
  background: var(--kleur-grond);
}
.ev__knop--vol { background: var(--knop-vol); color: var(--kleur-grond); border-color: var(--knop-vol); }

/* --- indeling --- */
.ev__body { flex: 1; display: flex; min-height: 0; }

/*
 * En weg is ook echt weg.
 *
 * `display: flex` wint van het `hidden`-attribuut, dus toen editor-vol.js bij een
 * ontbrekend ontwerp `body.hidden = true` zette, bleef de hele editor gewoon
 * staan. Wie /aanpassen/ zonder ontwerp opende, kreeg de melding "Er is nog geen
 * complimentje om aan te passen" én daaronder een complete editor met een rail,
 * een canvas, gevoelknoppen en een Klaar-knop. Alles zichtbaar, niets werkend:
 * klikken deed niets, typen bewaarde niets, Klaar sprong nergens heen.
 *
 * Vier andere elementen in dit bestand hadden hun eigen `[hidden]`-regel al; deze
 * was vergeten. Zie ook de opmerking bij `.cmpl-tekening--stil` in maak.css, waar
 * precies hetzelfde speelde.
 */
.ev__body[hidden] { display: none; }

/*
 * De rail is zo breed als zijn langste label, en geen pixel meer.
 *
 * Hij stond op 76px met knoppen van 60. "Achtergrond" is op 15px breder dan dat
 * en liep over de rand. De verleiding is dan om er tien pixels bij te doen, maar
 * dan is het over een maand weer mis zodra er een knop met een langer woord bij
 * komt. Nu bepaalt de inhoud de breedte: `max-content` op de rail, en de
 * knoppen rekken mee. De ruimte eromheen komt uit de ruimteschaal en niet uit
 * losse getallen.
 *
 * Wat hier níet gebeurt is de letter kleiner maken. --fs-label staat op 15px en
 * dat is de ondergrens uit het ontwerpsysteem; kleiner is de goedkoopste manier
 * om iets er slordig uit te laten zien.
 *
 * De min-width houdt de oude maat als bodem, zodat de rail bij korte labels niet
 * ineens smal wordt en het werkblad ernaast gaat schuiven.
 */
.ev__rail {
  width: max-content;
  min-width: 76px;
  flex: none;
  background: var(--kleur-grond);
  border-right:var(--lijn-dikte) solid var(--ev-lijn);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
  padding: var(--s4) var(--s3);
}
.ev__tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* Het raakvlak blijft minstens 44px, ook als de rail smal blijft. */
  min-width: 60px;
  min-height: 60px;
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: var(--r-vlak);
  background: none;
  cursor: pointer;
  color: var(--ev-grijs);
  font-size:var(--fs-label);
  font-family: inherit;
}
.ev__tool.is-actief { background: var(--knop-vol-zacht, var(--kleur-grond)); color: var(--knop-vol-hover, var(--kleur-rood)); font-weight: 600; }
/*
 * De maat van het icoon hoort hier en niet in de markup.
 *
 * Op het bord stonden svg's zonder width en height, en die rekken zich dan uit
 * tot de hele knop: vier iconen van veertig pixels boven een label van elf. Eén
 * regel hier en het kan in geen enkel gereedschap meer misgaan.
 */
.ev__tool svg { width: 20px; height: 20px; flex: none; }
.ev__tool:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 2px; }

/* --- het werkvlak ---
 *
 * De kaart ligt op een eigen vlak en niet op hetzelfde wit als de bediening
 * eromheen. Zonder dat verschil zie je niet waar het product ophoudt, en heeft
 * een selectierand geen ruimte om te staan.
 *
 * De kleur komt uit --kleur-werkvlak, een naam die sinds 14 september 2026 in
 * ontwerpsysteem.css staat en naar de bestaande lijnkleur wijst. Er is dus
 * geen kleurwaarde bij gekomen.
 */
.ev__vlak {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--kleur-werkvlak);
  position: relative;
  overflow: hidden;
}
/* De rol is het enige dat schuift als er ingezoomd wordt. De zoomknoppen
   staan erbuiten en blijven dus altijd op hun plek. */
.ev__rol {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*
   * `safe center` en niet gewoon `center`.
   *
   * In een vak dat kan schuiven knipt center de bovenkant eraf zodra de inhoud
   * niet past: je ziet dan de onderrand van je kaart en de zin staat buiten
   * beeld, zonder dat er iets verraadt dat je omhoog kunt. Met safe valt hij
   * terug op de bovenkant en schuif je zelf naar beneden. Gemeten op 390 met
   * het bewerkvel open: er was nog veertig pixels kaart te zien.
   */
  justify-content: safe center;
  gap: var(--s4);
  padding: var(--s6) var(--s5) var(--s5);
}
/* De voet: links de zin, rechts de zoom, en niets dat over iets anders valt. */
.ev__voet {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0 var(--s5) var(--s5);
}
.ev__hint {
  margin: 0;
  min-width: 0;
  font-size:var(--fs-label);
  color: var(--ev-grijs);
}

/* --- de contextbalk ---
 *
 * Zweeft boven de kaart en verschijnt pas als er iets aangewezen is. Hij staat
 * op een vaste plek en springt dus niet mee met de tekst: dat was de eis uit
 * het voorstel, en het is ook de enige manier waarop je een knop twee keer
 * achter elkaar op dezelfde plek terugvindt.
 */
.ev__balkje {
  flex: none;
  align-self: center;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s5) var(--s5) 0;
  padding: var(--s2) var(--s3);
  background: var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-vlak);
}
.ev__balkje[hidden] { display: none; }
.ev__balkgroep { position: relative; }
.ev__balkstreep { width: 1px; height: 24px; background: var(--ev-lijn); flex: none; }
.ev__balkstreep[hidden] { display: none; }
.ev__balkknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-keuze);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size:var(--fs-label);
  color: var(--ink, var(--kleur-ink));
}
.ev__balkknop[hidden] { display: none; }
.ev__balkknop--breed { min-width: 11ch; justify-content: space-between; }
.ev__balkknop svg { width: 20px; height: 20px; flex: none; color: var(--ev-grijs); }
.ev__balkknop:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine){
  .ev__balkknop:hover { color: var(--knop-vol-hover, var(--kleur-rood)); }
}
/* De stapper in de balk heeft de rand van de balk al om zich heen; een tweede
   rand eromheen zou een doos in een doos zijn. */
.ev__balkmaat .ev__stapper { border: 0; }
/* Het bolletje toont de inkt. Rond, want het is geen keuze maar een stand:
   een vierkant vakje zou lezen als een van de vakjes uit de kiezer. */
.ev__kleurbol {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border:var(--lijn-dikte) solid var(--ev-lijn);
  background: var(--kleur-ink);
}
.ev__kleurbol--auto {
  background:
    linear-gradient(135deg, transparent 45%, var(--kleur-soft) 45%, var(--kleur-soft) 55%, transparent 55%),
    var(--kleur-grond);
}

/* Het uitklapje onder een knop in de balk. */
.ev__pop {
  position: absolute;
  top: calc(100% + var(--s2));
  left: 0;
  z-index: 6;
  width: 260px;
  max-width: 80vw;
  padding: var(--s4);
  background: var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-vlak);
}
.ev__pop[hidden] { display: none; }
.ev__pop--rechts { left: auto; right: 0; }
.ev__pop .cmpl-acht__groepkop { display: block; margin-bottom: var(--s3); }

/* --- de zoom ---
 *
 * Rechtsonder in het werkvlak, klein en stil. Hij verandert alleen de
 * weergave, dus hij hoort niet op de bediening te lijken die het ontwerp
 * verandert: een percentage in plaats van een naam, en een eigen hoek in de
 * verte in plaats van de plek boven de kaart.
 */
.ev__zoom {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.ev__zoomstel,
.ev__passend {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s3);
  background: var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-rond);
}
.ev__passend {
  gap: var(--s2);
  border: var(--lijn-dikte) solid var(--ev-lijn);
  cursor: pointer;
  font-family: inherit;
  font-size:var(--fs-label);
  color: var(--ink, var(--kleur-ink));
}
.ev__passend svg { width: 20px; height: 20px; flex: none; color: var(--ev-grijs); }
.ev__zoomknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ev-grijs);
}
.ev__zoomknop svg { width: 20px; height: 20px; }
/* Het percentage is een gemeten waarde en mag niet springen bij elke stap,
   dus een vaste breedte en cijfers van gelijke breedte. */
.ev__zoomwaarde {
  min-width: 6ch;
  text-align: center;
  font-size:var(--fs-label);
  font-variant-numeric: tabular-nums;
  color: var(--ink, var(--kleur-ink));
}
.ev__zoomknop:focus-visible,
.ev__passend:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  .ev__zoomknop:hover { color: var(--ink, var(--kleur-ink)); }
  .ev__passend:hover { border-color: var(--knop-vol); }
}
/*
 * De hoogte komt van het doek, niet van een verhouding hier.
 *
 * Hier stond aspect-ratio: 3 / 4, terwijl de render 704 bij 900 teruggeeft
 * (0,78). De kaart was dus 480 hoog tot de render binnenkwam en daarna 460:
 * een sprong van twintig pixels, elke keer, precies op het moment dat je denkt
 * dat het klaar is. Het canvas draagt zijn eigen maat als attribuut en die komt
 * van de server, dus laat die de hoogte bepalen. Wisselt de render van formaat,
 * dan volgt de kaart vanzelf.
 */
.ev__kaart {
  position: relative;
  /* De breedte wordt door de zoom gezet (editor-vol.js). Deze waarde geldt
     alleen tot die eerste meting; zonder haar zou de kaart een tel op nul
     staan en zou het werkvlak leeg lijken. */
  width: min(360px, 70vw);
  flex: none;
  border-radius: var(--r-beeld);
  background: var(--kleur-grond);
  box-shadow:none;
}
/*
 * Twee lagen op de kaart. Onder de directe achtergrond, die meteen verspringt
 * als je een kleur of sfeer kiest; daarboven de echte render van de server.
 *
 * Waarom niet alleen die render: die kost twee tot vier seconden, en zolang je
 * niets ziet gebeuren denk je dat het stuk is. Nu zie je je keuze meteen, en
 * zakt de vorige tekening weg tot een schim tot het echte beeld er is.
 */
.ev__doek {
  display: block;
  width: 100%;
  height: auto;
  background: var(--kleur-grond);
}
/* Tijdens het wachten blijft de schets gewoon staan; alleen het label zegt dat
   de echte tekening onderweg is. Wegdimmen zou de schets onleesbaar maken en
   dat is juist wat je op dat moment wilt zien. */
.ev__kaart.is-bezig { box-shadow:none; }
/*
 * Het wachten ligt óver de kaart en niet ernaast.
 *
 * Als pilletje onderaan las het als bijschrift bij de tekening; je zag niet dat
 * het over dat beeld ging. Nu is er geen twijfel: er ligt een sluier over wat je
 * ziet, dus wat je ziet is nog niet af. De sluier is licht genoeg om er
 * doorheen te blijven kijken, want de schets eronder is juist wat je wilt zien.
 */
.ev__wachten {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 246, 241, .55);
  backdrop-filter: blur(1.5px);
  cursor: progress;
}
.ev__wachten[hidden] { display: none; }

/* Het paneel terwijl er een foto onderweg is: zichtbaar maar niet te bedienen,
   zodat je niet halverwege een kleur aanklikt die de foto zo overschrijft. */
.ev__paneel.is-op-slot { opacity: .5; pointer-events: none; }
.ev__wachten__blok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-rond);
  font-size:var(--fs-label);
  font-weight: 500;
  color: var(--ink, var(--kleur-ink));
  background: rgba(255, 255, 255, .96);
  box-shadow:none;
}
/* Een pulserend stipje in plaats van een draaiend rondje: het is geen laden
   maar tekenen, en dat duurt twee tot vier seconden. */
.ev__wachten__stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--knop-vol, var(--kleur-rood));
  animation: ev-pols 1.1s ease-in-out infinite;
}
@keyframes ev-pols {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ev__wachten { backdrop-filter: none; }
  .ev__wachten__stip { animation: none; opacity: .9; }
}

/* --- het paneel --- */
/*
 * Het paneel staat naast de rail en niet aan de andere kant van de kaart, dus
 * de lijn zit aan de rechterkant. De volgorde zit in de opmaak zelf: met een
 * CSS-order zou je oog een andere route lopen dan je toetsenbord.
 */
.ev__paneel {
  width: 340px;
  flex: none;
  background: var(--kleur-grond);
  border-right:var(--lijn-dikte) solid var(--ev-lijn);
  overflow-y: auto;
  padding: 24px;
}

/* De korte vorm van een label hoort alleen op een smal scherm, en andersom. */
.ev__terug__kort, .ev__knop__kort { display: none; }
.ev__paneelblad[hidden] { display: none; }
.ev__label { display: block; margin: 0 0 8px; font-size:var(--fs-label); font-weight: 500; }
.ev__tekstveld {
  width: 100%;
  padding: 12px 12px;
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-vlak);
  font-family: inherit;
  font-size:var(--fs-body);
  line-height: 1.5;
  resize: vertical;
}
.ev__tekstveld:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 1px; }

/* De gevoelens als chips: klein, wikkelend, en de gekozene in koraal. Ze staan
   bovenaan het paneel omdat de woorden het hart van het product zijn; de rest is
   opmaak. */
.ev__gevoelens { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ev__gevoel {
  min-height: 44px;
  padding: 12px 12px;
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-rond);
  background: var(--kleur-grond);
  cursor: pointer;
  font-family: inherit;
  font-size:var(--fs-label);
  color: var(--ink, var(--kleur-ink));
  transition: border-color .2s;
}
@media (hover: hover) and (pointer: fine){.ev__gevoel:hover { border-color: var(--knop-vol); }}
.ev__gevoel[aria-pressed="true"] {
  border-color: var(--knop-vol);
  background: var(--knop-vol-zacht, var(--kleur-grond));
  color: var(--knop-vol-hover, var(--kleur-rood));
  font-weight: 600;
}
.ev__gevoel:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 2px; }
.ev__nogeen { width: 100%; justify-content: center; margin-bottom: 16px; }

.ev__leeg { padding: 64px 24px; text-align: center; }
.ev__leeg[hidden] { display: none; }
.ev__leeg p { margin: 0 0 16px; color: var(--ev-grijs); }

/* --- telefoon ---
 *
 * De studio op een telefoon, 14 september 2026.
 *
 * De rail lag hier als een rij die zijwaarts schoof, en het paneel stond
 * eronder in de pagina. Je scrolde dus van je kaart weg om er iets aan te
 * doen, en de vier gereedschappen liepen buiten beeld. Dat was de vraag die
 * in de opmerking hierboven aan de ontwerpwacht bleef staan.
 *
 * Nu is het de indeling uit de mockup: de kaart bovenin, een vaste tabbalk
 * onderaan met alle vier de gereedschappen erop, en daartussen een vel dat
 * omhoog komt als je er een kiest. Het vel duwt de kaart niet weg maar maakt
 * hem kleiner, want --ev-velhoogte is echte ruimte onder het werkvlak en geen
 * laag eroverheen. editor-vol.js meet die hoogte en laat Passend opnieuw
 * rekenen.
 */
@media (max-width: 900px) {
  /*
   * De tabbalk is 64 hoog, de achtste stap van de ruimtereeks. Hij stond op 68
   * en dat is geen stap: controle.js meldde padding-bottom 68px op .ev__body.
   * Het icoon is 20, het label 20 en de ruimte ertussen 4, met 8 boven en
   * onder erbij is dat precies 60; 64 geeft de knop nog vier pixels lucht.
   */
  .ev { --ev-dock: var(--s8); --ev-velhoogte: 0px; }
  .ev__body {
    flex-direction: column;
    padding-bottom: var(--ev-dock);
  }
  /*
   * De ruimte die het bewerkvel inneemt gaat van het werkvlak af en niet van
   * de ruimte eromheen. Als padding zou de gemeten hoogte van het vel een maat
   * worden die op de ruimtereeks moet staan, en dat kan niet: het is geen
   * ontwerpkeuze maar een uitkomst. Als max-height is het wat het is, en
   * passend() rekent er zijn maat op.
   */
  .ev__vlak { max-height: calc(100% - var(--ev-velhoogte)); }

  /* De tabbalk staat vast onderaan, want hij is de navigatie van dit scherm.
     Vier knoppen van een kwart, dus geen zijwaarts geschuif meer: op 360 is
     dat 90 px per knop en dat haalt de 44 ruim. */
  .ev__rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    width: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: stretch;
    overflow: visible;
    border-right: 0;
    border-top:var(--lijn-dikte) solid var(--ev-lijn);
    padding: 0;
    gap: 0;
  }
  .ev__tool {
    flex: 1 1 25%;
    min-width: 0;
    min-height: var(--ev-dock);
    padding: var(--s2) var(--s1);
    border-radius: var(--r-beeld);
  }
  /* Het label mag krimpen in breedte maar nooit in lettergrootte: 15 px is de
     ondergrens van het systeem. Past het woord niet, dan breekt het af met
     een beletselteken en blijft het raakvlak heel. */
  .ev__tool span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ev__vlak { order: 1; }
  .ev__rol { padding: var(--s4) var(--s4) var(--s4); }
  /* Op een telefoon past de zin niet naast de knoppen; dan onder elkaar, met
     de zin bovenaan waar hij gelezen wordt. */
  .ev__voet {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    padding: 0 var(--s4) var(--s4);
  }
  .ev__zoom { justify-content: flex-end; }

  /* De bovenbalk krijgt de korte labels; drie woorden passen hier niet naast
     een titel en een knop. */
  .ev__terug__lang, .ev__knop__lang { display: none; }
  .ev__terug__kort, .ev__knop__kort { display: inline; }
  .ev__balk { padding: 0 var(--s4); gap: var(--s2); }
  .ev__knop { padding: var(--s2) var(--s4); }
  /*
   * De balk breekt af in plaats van buiten beeld te lopen.
   *
   * Op 390 is hij 454 breed: de naam van de letter en de naam van de trede
   * zijn woorden en geen getallen, en die passen niet allemaal op een rij.
   * Gemeten met de mobiele proef, die zes elementen buiten het scherm vond.
   *
   * Afbreken en niet zijwaarts laten schuiven: in een schuivende balk staat de
   * helft van de knoppen uit beeld zonder dat iets dat verraadt, en dan is een
   * knop die er wel is toch niet te vinden.
   */
  .ev__balkje {
    margin: var(--s4) var(--s4) 0;
    max-width: calc(100% - var(--s4));
    /*
     * Op een rij, en de naam van de letter krimpt mee.
     *
     * Met afbreken kwam de knop met de aanvullende acties alleen op een tweede
     * regel te staan: een balk van twee hoog waarvan de tweede regel bijna leeg
     * is. Alles wat een vaste maat heeft blijft staan; alleen de naam kan
     * korter, en die kan dat zonder iets te verbergen.
     */
    flex-wrap: nowrap;
    justify-content: center;
  }
  .ev__balkknop--breed { min-width: 0; flex: 0 1 auto; }
  .ev__balkknop--breed span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /*
   * En zonder scheidingsstreepjes past hij alsnog op een rij.
   *
   * Op 390 brak hij in tweeen, met twee knoppen alleen op de tweede regel.
   * De streepjes scheiden groepen, en op deze breedte zijn er geen groepen
   * meer over om te scheiden: vier knoppen naast elkaar leest ook zonder.
   */
  .ev__balkstreep { display: none; }
  .ev__balkje { gap: var(--s1); padding: var(--s1) var(--s2); }
  .ev__stapwaarde { min-width: 7ch; }
  /* Op 360 passen de zoomknoppen en Passend niet meer naast elkaar met het
     woord erbij. Het woord gaat weg, het pictogram blijft, en het raakvlak
     verandert niet. */
  .ev__passend span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ev__passend { min-width: 44px; padding: 0; justify-content: center; }

  /*
   * Het bewerkvel.
   *
   * Dicht staat hij buiten beeld en is hij niet bereikbaar, ook niet met een
   * toetsenbord: `visibility` haalt hem uit de tabvolgorde. Alleen
   * wegschuiven zou een onzichtbaar paneel achterlaten waar je wel in kunt
   * tabben.
   */
  .ev__paneel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--ev-dock);
    z-index: 6;
    width: 100%;
    /*
     * Het vel neemt hooguit de ruimte die overblijft als de kaart zijn deel
     * heeft gehad. Op 320 bij 568 was het vel 58 procent van het scherm en
     * bleef er dertig pixels kaart over: gemeten, en dat is geen voorbeeld
     * meer. De afsluitactie staat in een plakkende kop en het tekstveld erdirect
     * onder, dus een kort vel blijft bruikbaar.
     */
    max-height: min(58dvh, calc(100dvh - var(--ev-boven, 0px) - var(--ev-balk) - var(--ev-dock) - var(--ev-kaartruimte)));
    border-left: 0;
    border-top:var(--lijn-dikte) solid var(--ev-lijn);
    padding: 0 var(--s4) var(--s5);
    background: var(--kleur-grond);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .22s ease;
  }
  .ev.is-vel-open .ev__paneel { transform: translateY(0); visibility: visible; }

  .ev__velkop {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) 0;
    background: var(--kleur-grond);
    border-bottom:var(--lijn-dikte) solid var(--ev-lijn);
  }
  .ev__velgreep {
    position: absolute;
    left: 50%;
    top: var(--s1);
    width: 32px;
    height: 4px;
    border-radius: var(--r-rond);
    background: var(--kleur-lijn);
    transform: translateX(-50%);
  }
  .ev__veltitel {
    font-size:var(--fs-body);
    font-weight: 600;
    color: var(--ink, var(--kleur-ink));
  }
  .ev__gereed {
    min-height: 44px;
    padding: 0 var(--s3);
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size:var(--fs-body);
    font-weight: 600;
    color: var(--knop-vol-hover, var(--kleur-rood));
  }
  .ev__gereed:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 2px; }

  /* In het vel staat de opmaak onder het tekstveld, en de uitklapjes van de
     balk hebben daar niets te zoeken. */
  .ev.is-vel-open .ev__balkje { display: none; }

  /*
   * In het vel komt het tekstveld eerst.
   *
   * Op het paneel naast de kaart staat Op je kaart bovenaan, en dat klopt daar:
   * je kiest eerst waar je aan werkt. In een vel is de volgorde de volgorde
   * waarin je het scherm afleest, en dan hoort het veld waar je in typt boven
   * de vouw. Gemeten op 320 bij 568: het veld viel 30 pixels onder de rand van
   * het scherm, terwijl de lijst er wel stond.
   *
   * Dat is ook wat de overdracht voorschrijft: bij weinig schermhoogte mag het
   * kaartvoorbeeld kleiner worden of deels uit beeld raken, het invoerveld en
   * de afsluitactie niet.
   */
  /*
   * De kop in het blad gaat weg; de kop van het vel zegt het al.
   *
   * Twee keer het woord Tekst onder elkaar is geen structuur maar ruis, en het
   * kost vijftig pixels op een scherm waar het tekstveld om ruimte vecht.
   */
  .ev__paneelblad > .cmpl-acht__kop { display: none; }
  .ev__paneelblad[data-cmpl-ev-blad="tekst"] { display: flex; flex-direction: column; }
  .ev__paneelblad[data-cmpl-ev-blad="tekst"][hidden] { display: none; }
  .ev__oplijst { order: 2; }
  .ev__namen { order: 3; }
}

/* Op een breed scherm is het paneel gewoon een kolom; de velkop hoort daar
   niet, want er is niets om dicht te doen. */
@media (min-width: 901px) {
  .ev__velkop { display: none; }
}

/*
 * Een kort scherm: dan wint het tekstveld van het kaartvoorbeeld.
 *
 * Dat is wat de overdracht voorschrijft. Op 320 bij 568 viel het veld dertig
 * pixels onder de rand omdat de kaart zijn 224 pixels opeiste; hier krijgt de
 * kaart er nog 96 en mag hij verder uit beeld schuiven. Het werkvlak schuift,
 * dus hij is niet weg, alleen niet meer helemaal in beeld.
 */
@media (max-width: 900px) and (max-height: 640px) {
  .ev { --ev-kaartruimte: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .ev__paneel { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ev__tool, .ev__knop { transition: none; }
}

/* ============================================================
   HET TEKSTPANEEL: letter, grootte, kleur, randje, plaats.
   ============================================================ */

/* De letterknoppen tonen hun eigen letter. Een lijst met namen zegt niets over
   hoe iets eruitziet; het woord in die letter zegt alles. */
.ev__letters { display: flex; flex-wrap: wrap; gap: 8px; }
.ev__letter {
  flex: 1 1 calc(50% - 4px);
  min-height: 44px;
  padding: 12px 12px;
  border:var(--lijn-dikte) solid var(--ev-lijn, var(--kleur-lijn));
  border-radius: var(--r-vlak);
  background: var(--kleur-grond);
  color: var(--ev-ink, var(--kleur-ink));
  font-size:var(--fs-body);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
@media (hover: hover) and (pointer: fine){.ev__letter:hover { border-color: var(--knop-vol, var(--kleur-rood)); }}
.ev__letter.is-actief {
  border:var(--lijn-dikte) solid var(--knop-vol, var(--kleur-rood));
  background: var(--knop-vol-zacht, var(--kleur-grond));
  color: var(--knop-vol-hover, var(--kleur-rood));
}
.ev__letter:focus-visible { outline: 2px solid var(--knop-vol-hover, var(--kleur-rood)); outline-offset: 2px; }

.ev__schuif { width: 100%; accent-color: var(--knop-vol, var(--kleur-rood)); }

/* ---------- De stapper voor de grootte ----------
 *
 * Vijf treden met een naam. Hij lijkt met opzet niet op de zoomstapper in de
 * hoek van het werkvlak: die toont een percentage en raakt het ontwerp niet,
 * deze toont een naam en verandert wat er gedrukt wordt. Twee dingen die
 * verschillend werken horen er niet hetzelfde uit te zien, dus verschilt de
 * grond, de rand en het soort waarde ertussen.
 */
.ev__stapper {
  display: flex;
  align-items: center;
  gap: var(--s1);
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-vlak);
  background: var(--kleur-grond);
}
.ev__stapknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink, var(--kleur-ink));
}
.ev__stapknop svg { width: 20px; height: 20px; }
/* Aan het eind van de reeks: zichtbaar gedempt, en `disabled` meldt het ook
   aan een schermlezer. De cursor verandert mee, zodat de muis het ook weet. */
.ev__stapknop:disabled { color: var(--ev-grijs); opacity: .4; cursor: default; }
.ev__stapknop:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: -2px; }
.ev__stapwaarde {
  flex: 1;
  min-width: 9ch;
  text-align: center;
  font-size:var(--fs-label);
  font-weight: 500;
  color: var(--ink, var(--kleur-ink));
}

/* ---------- Hulp bij je tekst ----------
 *
 * Bij een leeg ontwerp staat hij open. De vouw is dus geen manier om hem weg
 * te stoppen maar om hem uit de weg te hebben zodra er woorden staan.
 */
.ev__hulp {
  margin-top: var(--s4);
  border-top:var(--lijn-dikte) solid var(--ev-lijn);
  border-bottom:var(--lijn-dikte) solid var(--ev-lijn);
}
.ev__hulpkop {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s3) 0;
  cursor: pointer;
  list-style: none;
  font-size:var(--fs-body);
  font-weight: 500;
  color: var(--ink, var(--kleur-ink));
}
.ev__hulpkop::-webkit-details-marker { display: none; }
.ev__hulpkop::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: var(--s3);
  flex: none;
  border-right:var(--lijn-dikte) solid var(--ev-grijs);
  border-bottom:var(--lijn-dikte) solid var(--ev-grijs);
  transform: rotate(-45deg);
}
.ev__hulp[open] .ev__hulpkop::before { transform: rotate(45deg); }
.ev__hulpkop:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 2px; }
.ev__hulpbody { padding-bottom: var(--s4); }

/* ---------- Op je kaart ----------
 *
 * Een platte lijst met een haarlijn ertussen, geen rij kaartjes. De
 * geselecteerde regel krijgt de rode balk links en geen vlak: besluit 20 van
 * 14 september 2026. In een lijst waar alles onder elkaar staat is een balk
 * genoeg; een vinkje erbij zou twee tekens voor een ding zijn.
 */
.ev__oplijst { margin-bottom: var(--s5); }
.ev__oplijst[hidden] { display: none; }
.ev__lijst { margin: 0; padding: 0; list-style: none; }
.ev__regel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 44px;
  padding: var(--s3) var(--s3) var(--s3) var(--s3);
  border: 0;
  border-top:var(--lijn-dikte) solid var(--ev-lijn);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size:var(--fs-label);
  color: var(--ink, var(--kleur-ink));
}
.ev__lijst li:last-child .ev__regel { border-bottom:var(--lijn-dikte) solid var(--ev-lijn); }
/*
 * De balk is een vlak en geen rand.
 *
 * Als border-left van 3 px botste hij met de lijndikte van het systeem: daar
 * is er maar een, en die is 1 px. Gemeten met controle.js, negen meldingen.
 * Een markeringsbalk is ook geen lijn die scheidt maar een vlak dat aanwijst,
 * dus staat hij er nu als vlak, vier pixels breed, de eerste stap van de
 * ruimtereeks.
 */
.ev__regel[aria-current="true"] { font-weight: 600; }
.ev__regel[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--s1);
  background: var(--knop-vol, var(--kleur-rood));
}
.ev__regel:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: -2px; }
.ev__regel svg { width: 20px; height: 20px; flex: none; color: var(--ev-grijs); }
.ev__regeltekst {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev__erbij {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: 44px;
  margin-top: var(--s3);
  padding: var(--s3);
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-vlak);
  background: var(--kleur-grond);
  cursor: pointer;
  font-family: inherit;
  font-size:var(--fs-label);
  color: var(--ink, var(--kleur-ink));
}
.ev__erbij[hidden] { display: none; }
.ev__erbij svg { width: 20px; height: 20px; }
/* Op is op: dezelfde demping als de stapper aan het eind van zijn reeks, en
   `disabled` meldt het ook aan wie niet kijkt. */
.ev__erbij:disabled { color: var(--ev-grijs); opacity: .4; cursor: default; }
.ev__balkknop:disabled { color: var(--ev-grijs); opacity: .4; cursor: default; }

/*
 * Wat er op dit vel niet meegaat.
 *
 * Dezelfde vorm als de uitleg onder een veld: klein, grijs, onder het ding
 * waar het over gaat. Geen rood, geen kader en geen pictogram; het is een
 * mededeling over hoe deze achtergrond werkt en geen fout van de bezoeker.
 * Zou hij rood zijn, dan belooft hij hetzelfde als een echte foutmelding, en
 * dan weet je bij de volgende rode regel niet meer of er iets stuk is.
 */
.ev__pastniet {
  margin: var(--s2) 0 0;
  font-size:var(--fs-label);
  color: var(--ev-grijs);
}
.ev__pastniet[hidden] { display: none; }

/* ---------- Het scherm na een upload ---------- */
.ev__navupload {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top:var(--lijn-dikte) solid var(--ev-lijn);
}
.ev__navupload[hidden] { display: none; }
.ev__bestandsnaam {
  margin: 0 0 var(--s3);
  font-size:var(--fs-label);
  color: var(--ev-grijs);
  overflow-wrap: anywhere;
}
.ev__uitsnede {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
}
.ev__uitsnede svg { width: 20px; height: 20px; }
.ev__terugnaar {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top:var(--lijn-dikte) solid var(--ev-lijn);
}
/* De oude knop met dezelfde bedoeling blijft in de DOM staan omdat zijn
   luisteraar het werk doet, maar hij hoort nergens in beeld te komen. */
.ev__verborgen { display: none; }

/* Een gereedschap dat in deze stand niets kan doen, staat uit en zegt dat. */
.ev__tool:disabled { opacity: .4; cursor: default; }

/* De kleurknoppen erven de vorm van het achtergrondpaneel, zodat er één soort
   kleurvakje op deze pagina is. "Automatisch" heeft geen kleur en krijgt daarom
   een schuine streep: een leeg wit vakje zou "wit" betekenen. */
/* Drie op een rij, niet vier.
   Sinds 30 aug 2026 zijn er negen tekstkleuren (roest, oker en pruim erbij);
   in het raster van vier bleef er dan een alleen op de derde rij staan. Drie
   kolommen geven een vierkant palet en meteen wat ruimere vakjes. Alleen deze
   twee rijen: het achtergrondraster heeft een ander aantal en blijft op vier. */
[data-cmpl-ev-tekstkleur],
[data-cmpl-ev-randkleur] { grid-template-columns: repeat(3, 1fr); }

.ev__tekstkleur { border:var(--lijn-dikte) solid var(--ev-lijn, var(--kleur-lijn)); }
.ev__tekstkleur--auto {
  background:
    linear-gradient(135deg, transparent 45%, var(--kleur-soft) 45%, var(--kleur-soft) 55%, transparent 55%),
    var(--kleur-grond);
}

.ev__vinkje {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size:var(--fs-label);
  cursor: pointer;
}
.ev__vinkje input { width: 17px; height: 17px; accent-color: var(--knop-vol, var(--kleur-rood)); }

/* Een stille knop voor "terug" en "zonder", in dezelfde vorm als de bestaande
   .cmpl-acht__weg onder het achtergrondpaneel. */
.ev__weg {
  display: inline-block;
  min-height: 44px;
  margin-top: 12px;
  padding: 12px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size:var(--fs-label);
  font-weight: 500;
  color: var(--knop-vol-hover, var(--kleur-rood));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ev__weg[hidden] { display: none; }

/* ---------- De selectie op de kaart ----------
 *
 * De rand en de vier handvatten zijn gewone elementen boven het canvas. Dat is
 * niet alleen makkelijker dan ze meetekenen, het is ook de enige manier waarop
 * criterium 21 vanzelf klopt: wat er gedrukt of gedownload wordt komt uit het
 * canvas, en daar wordt hier niets in gezet.
 */
.ev__sel {
  position: absolute;
  z-index: 3;
  border:var(--lijn-dikte) solid var(--knop-vol, var(--kleur-rood));
  border-radius: var(--r-beeld);
  pointer-events: none;
}
.ev__sel[hidden] { display: none; }

/* De handvatten zelf zijn klein, want ze liggen op het werk. Het raakvlak
   eromheen is 44 px via een doorzichtige rand, zodat een duim ze haalt zonder
   dat er vier grote blokken over de tekst liggen. */
.ev__handvat {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}
/* Staat de plek vast, dan gaan de grepen weg. Expliciet, want `hidden` verliest
   hier vaker van een display-regel dan je denkt; zie de andere [hidden]-regels. */
.ev__handvat[hidden] { display: none; }
.ev__handvat::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--knop-vol, var(--kleur-rood));
  border-radius: var(--r-beeld);
}
.ev__handvat--lb { left: 0; top: 0; transform: translate(-50%, -50%); }
.ev__handvat--rb { right: 0; top: 0; transform: translate(50%, -50%); }
.ev__handvat--lo { left: 0; bottom: 0; transform: translate(-50%, 50%); }
.ev__handvat--ro { right: 0; bottom: 0; transform: translate(50%, 50%); }
.ev__handvat--rb, .ev__handvat--lo { cursor: nesw-resize; }
.ev__handvat:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 0; }

/* ---------- Slepen en draaien op de kaart ---------- */

/* De greep zit op de kaart en niet in het paneel: je draait iets wat je ziet.
   translate(-50%,-50%) zet hem op zijn eigen midden, zodat left/top in procenten
   direct het draaipunt aanwijzen. */
.ev__greep {
  position: absolute;
  left: 50%;
  /* Een vaste afstand boven de selectierand, in schermpixels. In breukdelen
     van het doek lag hij op een kleine kaart midden over de woorden. */
  top: calc(-1 * var(--s5));
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border:var(--lijn-dikte) solid var(--ev-lijn, var(--kleur-lijn));
  background: rgba(255, 255, 255, .94);
  color: var(--knop-vol-hover, var(--kleur-rood));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow:none;
}
.ev__greep:active { cursor: grabbing; }
.ev__greep[hidden] { display: none; }
.ev__greep:focus-visible { outline: 2px solid var(--knop-vol-hover, var(--kleur-rood)); outline-offset: 2px; }

/* Tijdens het slepen geen tekstselectie en geen grijpende hand die omslaat. */
.ev__kaart.is-slepen { cursor: grabbing; }
.ev__kaart.is-slepen .ev__doek { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .ev__letter { transition: none; }
}

/* De kleurrij voor het randje staat onder het vinkje en komt pas als het
   randje aanstaat: een kleurkiezer voor iets dat niet getekend wordt is een
   knop die niets doet. */
.ev__randrij { margin-top: 12px; }
.ev__randrij[hidden] { display: none; }

.cmpl-acht__waas { margin-top: 16px; }
.cmpl-acht__waas[hidden] { display: none; }
.cmpl-acht__waaskeuze { display: flex; gap: 8px; }
.cmpl-acht__waasknop {
  flex: 1;
  min-height: 40px;
  padding: 12px 12px;
  border:var(--lijn-dikte) solid var(--ev-lijn, var(--kleur-lijn));
  border-radius: var(--r-vlak);
  background: var(--kleur-grond);
  color: var(--ev-ink, var(--kleur-ink));
  font-family: inherit;
  font-size:var(--fs-label);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
@media (hover: hover) and (pointer: fine){.cmpl-acht__waasknop:hover { border-color: var(--knop-vol, var(--kleur-rood)); }}
.cmpl-acht__waasknop.is-actief {
  border:var(--lijn-dikte) solid var(--knop-vol, var(--kleur-rood));
  background: var(--knop-vol-zacht, var(--kleur-grond));
  color: var(--knop-vol-hover, var(--kleur-rood));
  font-weight: 600;
}
.cmpl-acht__waasknop:focus-visible { outline: 2px solid var(--knop-vol-hover, var(--kleur-rood)); outline-offset: 2px; }

/*
 * De namen onder het tekstveld.
 *
 * Een streep erboven, want het is een aparte gedachte: eerst je woorden, dan
 * pas aan wie ze gericht zijn. Twee smalle velden onder elkaar en niet naast
 * elkaar: het paneel is 320 pixels breed en een naam mag niet halverwege
 * afgekapt lijken.
 */
.ev__namen {
  margin-top: 16px;
  padding-top: 16px;
  border-top:var(--lijn-dikte) solid var(--ev-lijn);
}
.ev__groepkop {
  display: block;
  margin-bottom: 12px;
  font-size:var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ev__naamveld {
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 12px;
  border:var(--lijn-dikte) solid var(--ev-lijn);
  border-radius: var(--r-vlak);
  font-family: inherit;
  font-size:var(--fs-body);
  line-height: 1.4;
}
.ev__naamveld:focus-visible { outline: 2px solid var(--knop-vol); outline-offset: 1px; }