/* De zorgverdeling-editor (app/javascript/zorgverdeling/editor.js): de opmaak van de zorg-mockup v163,
   1-op-1 overgenomen (Jerry 2026-10-08: "maak het nu wel exact zo als de mockup"; plan
   2026-10-08-zorgverdeling-exact-als-mockup). Alles binnen .zv, zodat de rest van de app niet
   verandert; de mockup legde deze regels over de app-CSS heen. De mk-klassen heten zv-. */
/* Maten die de app niet als token kent: hier vastgelegd met de waarde van de mockup. */
.zv {
  --zv-radius-16: 16px;
  --zv-radius-12: 12px;
  --zv-radius-3: 3px;
  --zv-radius-2: 2px;
  --zv-chevron: 24px;
}
/* Op de agenda draait de editor zonder pagina: alleen zijn vensters (Vaste uitzondering inzetten). */
.zv--inzet .zv-scherm { display: none; }
.zv .zv-kop { font-size: var(--text-15); color: var(--color-text-muted); margin: 28px 0 10px 16px; }
.zv .zv-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 10px 0 12px 16px; }
.zv .zv-stip { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; }
.zv .zv-stip--jij { background: var(--color-accent); }
.zv .zv-stip--co { background: var(--color-btn); box-shadow: 0 0 0 1px var(--color-line); }
.zv .zv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zv .zv-chips button { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.zv .zv-chips button[aria-pressed="true"] { background: var(--color-btn); color: var(--color-on-btn); border-color: var(--color-btn); }
.zv .zv-legenda { display: flex; gap: 18px; font-size: var(--text-15); color: var(--color-text-muted); margin: 0 0 10px 16px; }
.zv .zv-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.zv .pattern-form__day.zv-leeg { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-line); }
.zv .zv-los { margin-top: 28px; }
.zv .zv-opslaan { margin-top: 24px; }
.zv .zv-stip--jij { background:var(--color-ouder-een); }
.zv .zv-stip--co { background:var(--color-ouder-twee); box-shadow:none; }
.zv .zv-stip--wissel { background:none; width:auto; font-size: var(--text-15); line-height:1; color:var(--color-text); }
.zv .zv-stip--band { background:linear-gradient(to bottom, var(--color-ouder-een) 50%, var(--color-ouder-twee) 50%); }
.zv .zv-legenda { flex-wrap:wrap; row-gap:4px; }
.zv .zv-legenda span[hidden] { display:none; }
.zv .pattern-form__week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
/* Dagtegel: afkorting, datum (klein, muted), eventueel ↔, en het ouderstreepje onderin. */
.zv .pattern-form__day { min-width:0; width:100%; height:68px; border:0; border-radius:var(--radius-rooster-dag); background:var(--color-surface)!important; color:var(--color-text)!important; position:relative; padding:9px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px; font-size: var(--text-15); line-height: var(--leading-kop); }
.zv .pattern-form__day small { font-size: var(--text-11); color:var(--color-text-muted); white-space:nowrap; }
.zv .pattern-form__day:before { content:''; position:absolute; bottom:15px; left:0; width:100%; text-align:center; font-size: var(--text-15); line-height:1; }
/* Gevuld in de ouderkleur (besluit 2026-10-05: streepjes zijn op een telefoon niet te onderscheiden);
     witte tekst, wisseldag half/half, leeg = wit met rand. */
.zv .pattern-form__day:after { display:none; }
.zv .pattern-form__day--jij { background:var(--color-ouder-een)!important; color:var(--color-on-btn)!important; }
.zv .pattern-form__day--co { background:var(--color-ouder-twee)!important; color:var(--color-on-btn)!important; }
.zv .pattern-form__day--wissel-jij-co { background:linear-gradient(90deg,var(--color-ouder-een) 50%,var(--color-ouder-twee) 50%)!important; color:var(--color-on-btn)!important; }
.zv .pattern-form__day--wissel-co-jij { background:linear-gradient(90deg,var(--color-ouder-twee) 50%,var(--color-ouder-een) 50%)!important; color:var(--color-on-btn)!important; }
.zv .pattern-form__day--jij small, .zv .pattern-form__day--co small, .zv .pattern-form__day--wissel-jij-co small, .zv .pattern-form__day--wissel-co-jij small { color:rgba(255,255,255,.85); }
.zv .pattern-form__day.zv-leeg { box-shadow:inset 0 0 0 1px var(--color-line); }
/* Dagdeel: een band in de kleur van de andere ouder, midden in de tegel (nacht = tegelkleur). */
.zv .zv-dagdeel { position:absolute; left:0; right:0; bottom:0; height:28px; background:var(--color-ouder-twee); }
.zv .pattern-form__day { overflow:hidden; }
.zv .zv-dagdeel--jij { background:var(--color-ouder-een); }
.zv .pattern-form__day:before { z-index:1; }
.zv .pattern-form__day:after { content:''; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:24px; max-width:70%; height:4px; border-radius:var(--zv-radius-3); background:var(--color-ouder-een); }
.zv .pattern-form__day--co:after { background:var(--color-ouder-twee); }
.zv .pattern-form__day--wissel-jij-co:after { background:linear-gradient(90deg,var(--color-ouder-een) 50%,var(--color-ouder-twee) 50%); }
.zv .pattern-form__day--wissel-co-jij:after { background:linear-gradient(90deg,var(--color-ouder-twee) 50%,var(--color-ouder-een) 50%); }
.zv .pattern-form__day--wissel-jij-co:before, .zv .pattern-form__day--wissel-co-jij:before { content:'↔'; }
/* Nog leeg: grijs streepje (zoals .pattern-form__day--leeg in de app), geen verborgen streepje. */
.zv .pattern-form__day.zv-leeg:after { background:var(--color-line); }
/* Weekblok zoals in de app: nummer met "× Weg" rechts (muted), datums eronder, de tik-hint onder
     de weken en "+ Week N toevoegen" als witte pil over de volle breedte. */
.zv .pattern-form__week-head { display:flex; align-items:center; gap:6px; }
.zv .pattern-form__week-nr { font-size: var(--text-17); color:var(--color-text); }
.zv .pattern-form__week-dates { margin:2px 0 16px; font-size: var(--text-15); color:var(--color-text-muted); }
.zv .pattern-form__week-del { margin-left:auto; font:inherit; font-size: var(--text-15); color:var(--color-text-muted); background:none; border:0; padding:0; min-height:44px; cursor:pointer; }
.zv .pattern-form__week { padding:0; border:0; }
.zv .pattern-form__weeks { --stack-gap: 28px; }
.zv .pattern-form__hint { margin:16px 0 0; font-size: var(--text-15); color:var(--color-text-muted); line-height: var(--leading); }
.zv .pattern-form__add-week { display:block; width:100%; margin:14px 0 0; padding:14px; min-height:52px; font:inherit; font-size: var(--text-17); color:var(--color-text); background:var(--color-surface); border:0; border-radius:var(--radius-pill); cursor:pointer; }
.zv .tekstactie { display:inline-flex; align-items:center; gap:2px; margin-left:auto; padding:0 0 0 12px; min-height:44px; border:0; background:none; color:var(--color-accent); font-size: var(--text-15); font-weight:500; cursor:pointer; }
.zv .tekstactie .zv-chevron { background:var(--color-accent); }
.zv .zv-wissel { position:relative; margin-left:auto; display:flex; }
.zv .zv-wissel .zv-pop { right:0; top:calc(100% - 4px); white-space:nowrap; }
.zv .pattern-form__week-head { position:relative; min-height:0; }
.zv .pattern-form__week-head .tekstactie { margin-top:-8px; margin-bottom:-8px; }
.zv .pattern-form__add-week:disabled { color:var(--color-faint); cursor:default; }
/* Groep rijen (conventions §3): grijze vlakken, 3px ertussen, 26px buitenhoek, 6px binnenhoek. */
.zv .zv-rijen { display: flex; flex-direction: column; gap: 3px; }
.zv .zv-rij { display: flex; align-items: center; gap: 14px; background: var(--color-card); padding: 14px 20px; min-height: 60px; border-radius: var(--radius-binnen); border: 0; width: 100%; text-align: left; font: inherit; font-size: var(--text-17); color: inherit; }
.zv button.zv-rij { cursor: pointer; }
.zv .zv-rij[hidden] { display: none; }
/* Buitenhoeken op de eerste en laatste zíchtbare rij: verborgen rijen en de keuzesheet in de groep tellen niet mee. */
.zv .zv-rijen > .zv-rij:nth-child(1 of .zv-rij:not([hidden])) { border-top-left-radius: var(--radius-groep); border-top-right-radius: var(--radius-groep); }
.zv .zv-rijen > .zv-rij:nth-last-child(1 of .zv-rij:not([hidden])) { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
/* Vraag-rij + radiogroep in één groep (§3.6 punt 2): de radiogroup-wrapper telt niet mee voor de hoeken.
     De vraag-rij vóór een radiogroep houdt binnenhoeken; de laatste radio krijgt de buitenhoeken. */
.zv .zv-rijen > .zv-rij.zv-rij.zv-rij:has(+ [role="radiogroup"]) { border-bottom-left-radius: var(--radius-binnen); border-bottom-right-radius: var(--radius-binnen); }
.zv .zv-rijen > [role="radiogroup"]:first-child > .zv-rij:first-child { border-top-left-radius: var(--radius-groep); border-top-right-radius: var(--radius-groep); }
.zv .zv-rijen > [role="radiogroup"]:last-child > .zv-rij:last-child { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
.zv .zv-rijen > [role="radiogroup"] { display: flex; flex-direction: column; gap: 3px; }
/* Uitklapbare keuze (§3.6 punt 3): dicht is de vraag-rij de enige rij (26 rondom); open krijgt de
     laatste optie-rij de onderhoeken. De opties staan in een radiogroup-wrapper, vandaar de extra regel. */
/* Eén blok met meerdere groepen (uitklapbare vragen + vervolgrijen) gedraagt zich als één groep
     (§3.5): 3px ertussen, alleen de bovenste rij 26 boven en de onderste 26 onder, de rest 6. */
.zv .zv-blok { display: flex; flex-direction: column; gap: 3px; }
.zv .zv-blok > * { display: flex; flex-direction: column; gap: 3px; }
.zv .zv-blok > * > :empty { display: none; }
.zv .zv-blok .zv-rijen > .zv-rij:first-child, .zv .zv-blok .zv-rijen > .zv-rij:last-child, .zv .zv-blok .zv-rijen > .zv-rij, .zv .zv-blok details.zv-rijen:not([open]) > summary.zv-rij, .zv .zv-blok details.zv-rijen[open] > [role="radiogroup"] > .zv-rij:last-child { border-radius: var(--radius-binnen); }
.zv .zv-blok > .zv-rijen:first-child > .zv-rij:first-child, .zv .zv-blok > details.zv-rijen:first-child > summary.zv-rij { border-top-left-radius: var(--radius-groep); border-top-right-radius: var(--radius-groep); }
.zv .zv-blok > .zv-rijen:last-child > .zv-rij:last-child, .zv .zv-blok > div:last-child > .zv-rij:last-child, .zv .zv-blok > div:last-child > .zv-rijen:last-child > .zv-rij:last-child, .zv .zv-blok > details.zv-rijen:last-child:not([open]) > summary.zv-rij, .zv .zv-blok > details.zv-rijen:last-child[open] > [role="radiogroup"] > .zv-rij:last-child { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
/* Dicht: één rij, vier buitenhoeken (§3.5); wint van de :has(+ radiogroup)-regel, want de radiogroep staat dicht ook in de HTML. */
.zv details.zv-rijen:not([open]) > summary.zv-rij.zv-rij.zv-rij.zv-rij { border-radius: var(--radius-groep); }
/* Open: de vraag-rij is de bovenste rij (26 boven, 6 onder); de radio's doen mee in de groep (3px, laatste 26 onder). */
.zv details.zv-rijen[open] > summary.zv-rij.zv-rij.zv-rij { border-radius: var(--radius-groep) var(--radius-groep) var(--radius-binnen) var(--radius-binnen); }
/* De radiogroep is zelf een kolom met 3px (display:contents werkt niet in de slot van <details>). */
.zv details.zv-rijen > [role="radiogroup"], .zv .zv-rijen > [role="radiogroup"] { display: flex; flex-direction: column; gap: 3px; }
.zv details.zv-rijen[open] > [role="radiogroup"] > .zv-rij:last-child { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
.zv .zv-sheet details.zv-rijen:not([open]) > summary.zv-rij.zv-rij.zv-rij.zv-rij { border-radius: var(--radius-groep-sheet); }
.zv .zv-sheet details.zv-rijen[open] > summary.zv-rij.zv-rij.zv-rij { border-radius: var(--radius-groep-sheet) var(--radius-groep-sheet) var(--radius-binnen) var(--radius-binnen); }
.zv .zv-sheet details.zv-rijen[open] > [role="radiogroup"] > .zv-rij:last-child { border-bottom-left-radius: var(--radius-groep-sheet); border-bottom-right-radius: var(--radius-groep-sheet); }
.zv .zv-rij__tekst { flex: 1; min-width: 0; }
.zv .zv-rij small { display: block; font-size: var(--text-15); color: var(--color-text-muted); margin-top: 3px; }
.zv .zv-sheet .zv-rij { font-size: var(--text-17); }
.zv .zv-sheet .zv-rij small { font-size: var(--text-15); margin-top: 3px; }
.zv .zv-rij__waarde { font-size: var(--text-15); color: var(--color-text-muted); }
/* Chevron = hetzelfde icoon als in de app (shared/icon expand_more / chevron_right), geen losse letter. */
.zv .zv-chevron { flex: none; width: var(--zv-chevron); height: var(--zv-chevron); background: var(--color-text-muted); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: transform .15s; }
.zv .zv-chevron--omlaag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-358.46 253.85-584.62 296-626.77l184 184 184-184 42.15 42.15L480-358.46Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-358.46 253.85-584.62 296-626.77l184 184 184-184 42.15 42.15L480-358.46Z'/%3E%3C/svg%3E"); }
.zv .zv-chevron--rechts { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m517.85-480-184-184L376-706.15 602.15-480 376-253.85 333.85-296l184-184Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m517.85-480-184-184L376-706.15 602.15-480 376-253.85 333.85-296l184-184Z'/%3E%3C/svg%3E"); }
.zv .zv-chevron--open { transform: rotate(180deg); }
/* Schakelaar 46×27, knop 23 (§3.6). */
.zv .zv-schakelaar { flex: none; width: 46px; height: 27px; border-radius: var(--radius-veld-plan); border: 0; background: var(--color-schakel-uit); position: relative; cursor: pointer; }
.zv .zv-schakelaar::after { content: ""; position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; background: var(--color-surface); transition: left .15s; }
.zv .zv-schakelaar[aria-checked="true"] { background: var(--color-btn); }
.zv .zv-schakelaar[aria-checked="true"]::after { left: 21px; }
/* Per kind: een kop met de naam, pijltjes en stipjes; daaronder de panelen naast elkaar.
     Swipen = native horizontaal scrollen met snap. Dagen vul je alleen met tikken (geen vegen),
     dus swipen kan overal. */
.zv .zv-kindkop { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 22px -16px 0; padding: 8px 16px; background: var(--color-bg); }
.zv .zv-kindkop__naam { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zv .zv-kindnaam { font-size: var(--text-22); font-weight: 600; }
.zv .zv-stippen { display: flex; }
.zv .zv-stippen button { width: 44px; height: 44px; margin: -18px -14px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.zv .zv-stippen i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); }
.zv .zv-stippen i.aan { background: var(--color-btn); }
/* In het venster: een kind dat af is krijgt een gevulde stip in muted; het huidige kind blijft inkt. */
.zv .zv-stippen i.af { background: var(--color-text-muted); }
.zv .zv-stippen i.aan.af { background: var(--color-btn); }
.zv .zv-sheet .zv-kindkop { background: var(--color-surface); margin: 28px -16px 0; top: -14px; }
.zv .zv-pijl { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-surface); color: var(--color-text); font-size: var(--text-24); line-height: 1; cursor: pointer; }
.zv .zv-pijl:disabled { opacity: .3; cursor: default; }
.zv .zv-pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; align-items: flex-start; }
.zv .zv-pager::-webkit-scrollbar { display: none; }
.zv .zv-paneel { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 16px; box-sizing: border-box; }
/* Overdrachtsvenster = volledige editor (§3.8 containerkeuze, besluit Jerry 2026-10-06): meerdere secties en
     vervolgvragen, dus geen bottom sheet maar een scherm: volle hoogte (dvh), rechte bovenkant, geen greep,
     kop met kruis, scrollende inhoud, Klaar vast in de voet (conceptdetail, §3.15). Desktop: de 520px-kolom.
     Vragen = sectiekoppen (15 muted, 16px in, 28/10). Rijen op --color-bg, 56px, groephoek 22. */
.zv .zv-sheet { border: 0; padding: 0; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto; border-radius: 0; background: var(--color-surface); color: var(--color-text); display: none; flex-direction: column; }
.zv .zv-sheet[open] { display: flex; }
.zv .zv-sheet::backdrop { background: rgba(0,0,0,.4); }
.zv .zv-sheet__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: calc(20px + env(safe-area-inset-top, 0px)) 16px 14px 20px; border-bottom: 1px solid var(--color-hair, rgba(0,0,0,.08)); }
.zv .zv-sheet__kop h2 { font-size: var(--text-22); font-weight: 500; margin: 0 0 4px; }
.zv .zv-sheet__kop p { font-size: var(--text-15); color: var(--color-text-muted); margin: 0; }
/* Kruis zoals .sheet__close: icoon zonder cirkel, muted. */
.zv .zv-sluit { width: 44px; height: 44px; border: 0; background: none; font-size: var(--text-28); line-height: 1; cursor: pointer; color: var(--color-text-muted); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.zv .zv-sluit svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zv .zv-sheet__body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.zv .zv-sheet:has([data-uitzondering-editor]) { height:100dvh; max-height:100dvh; border-radius:0; }
.zv .zv-sheet:has([data-uitzondering-editor]) .zv-sheet__greep { display:none; }
.zv .zv-sheet:has([data-uitzondering-editor]) .zv-sheet__body { min-height:0; }
.zv .zv-sheet:has([data-uitzondering-editor]) .zv-rij { background:var(--color-card); }
.zv [data-uitzondering-editor] .zv-rij__tekst { word-break:normal; overflow-wrap:normal; }
.zv .zv-sheet__body > .zv-kop:first-child { margin-top: 14px; }
.zv .zv-volgt { margin-top: 28px; }
.zv .zv-sheet__voet { padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-hair, rgba(0,0,0,.08)); }
/* Samenvatting boven Klaar: de afspraak als hele zinnen, 15 muted, 12px tot de knop. */
.zv .zv-samenvatting { margin: 0 4px 12px; font-size: var(--text-15); line-height: var(--leading-sub); color: var(--color-text-muted); }
.zv .zv-sheet .zv-rij { background: var(--color-card); min-height: 56px; }
/* Gekozen radiorij + vervolgrijen = één blok: de wrapper doet niet mee aan de opmaak
     (display: contents, zoals .plan-vervolg), dus buitenhoeken alleen op de eerste en laatste
     rij van de hele groep; binnenin 6px. */
.zv .zv-sheet .zv-rijen > .zv-rij:first-child, .zv .zv-sheet .zv-rijen > .zv-rij:nth-child(1 of .zv-rij:not([hidden])) { border-top-left-radius: var(--radius-groep-sheet); border-top-right-radius: var(--radius-groep-sheet); }
.zv .zv-sheet .zv-rijen > .zv-rij:last-child, .zv .zv-sheet .zv-rijen > .zv-rij:nth-last-child(1 of .zv-rij:not([hidden])) { border-bottom-left-radius: var(--radius-groep-sheet); border-bottom-right-radius: var(--radius-groep-sheet); }
.zv .zv-sheet .zv-rijen > .zv-rij.zv-rij.zv-rij:has(+ [role="radiogroup"]) { border-bottom-left-radius: var(--radius-binnen); border-bottom-right-radius: var(--radius-binnen); }
.zv .zv-sheet .zv-rijen > [role="radiogroup"]:first-child > .zv-rij:first-child { border-top-left-radius: var(--radius-groep-sheet); border-top-right-radius: var(--radius-groep-sheet); }
.zv .zv-sheet .zv-rijen > [role="radiogroup"]:last-child > .zv-rij:last-child { border-bottom-left-radius: var(--radius-groep-sheet); border-bottom-right-radius: var(--radius-groep-sheet); }
.zv .zv-sheet .zv-rij.zv-vraagrij { min-height: 0; }
.zv .zv-sheet .zv-vervolgblok { display: contents; }
.zv .zv-sheet .zv-rijen > .zv-vervolgblok:last-child > .zv-rij:last-child { border-bottom-left-radius: var(--radius-groep-sheet); border-bottom-right-radius: var(--radius-groep-sheet); }
.zv .zv-sheet .zv-vervolg { padding-left: 20px; }
.zv .zv-vervolg--seg { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 14px; }
.zv .zv-seglabel { font-size: var(--text-15); color: var(--color-text-muted); }
/* Vraag-rij (§3.6 punt 2): de vraag van een vervolg in een groep die al met een andere rij begint. */
.zv .zv-vraagrij { min-height: 0; padding: 14px 20px 4px; font-size: var(--text-15); color: var(--color-text-muted); }
/* Radio: 22px, 2px rand, witte vulling; gekozen = inkt met stip van 10. */
.zv .zv-slot { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--color-faint); }
.zv .zv-radio { box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-control-border); background: var(--color-surface); flex: none; display: grid; place-items: center; }
.zv .zv-radio.aan { border-color: var(--color-btn); }
.zv .zv-radio.aan::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-btn); }
/* Segment (§3.6, besluit 2026-10-01): even breed waar het past; past een optie niet in zijn
     deel, dan is die pil minstens zo breed als zijn tekst en delen de andere de rest. */
.zv .zv-seg { display: flex; gap: 8px; }
.zv .zv-seg button { flex: 1 1 0; min-width: max-content; white-space: nowrap; min-height: 44px; padding: 11px 6px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-card); color: var(--color-text-muted); font: inherit; font-size: var(--text-15); font-weight: 500; cursor: pointer; }
.zv .zv-seg button[aria-pressed="true"] { background: var(--color-btn); color: var(--color-on-btn); border-color: var(--color-btn); }
/* Velden in een rij: wit vak, 14px rond (zoals .timewheel__display--plain en .plan-getal). */
.zv .zv-tijd, .zv .zv-tekstveld, .zv .zv-getal { box-sizing: border-box; font: inherit; font-size: var(--text-17); height: 50px; padding: 0 14px; border-radius: var(--radius-veld-plan); border: 1px solid var(--color-control-border); background: var(--color-surface); color: var(--color-text); }
.zv .zv-tijd { width: 130px; text-align: left; cursor: pointer; }
.zv .zv-tijd.is-leeg { color: var(--color-text-muted); }
/* Kiezer-rij (§3.6): in een grijze rij staat de tijd als tekst rechts, leeg "Kies tijd" in faint; geen wit vak. */
.zv .zv-rij > .zv-tijd { width: auto; height: auto; padding: 0; border: 0; background: none; text-align: right; font-size: var(--text-17); color: var(--color-text); }
.zv .zv-rij > .zv-tijd.is-leeg { color: var(--color-faint); }
/* Veld binnen een vlak (grijze rij): geen rand, geen achtergrond (§3.7); tik op de rij = focus. */
.zv .zv-rij .zv-tekstveld { border: 0; background: none; border-radius: 0; height: auto; padding: 0; min-height: 24px; }
.zv .zv-sheet .zv-vervolg .zv-tekstveld { width: 100%; }
/* Getal-rij (§3.6): het getal direct in de grijze rij, zonder wit vlak of rustende rand; focus op het invoerdeel. */
/* Getal in een rij: een echt wit veld, net als het tekstveld (Jerry 2026-10-07: een leeg plat getal is onzichtbaar). */
.zv .zv-getal { width: 72px; height: 44px; padding: 0 10px; border: 1px solid var(--color-control-border); border-radius: var(--radius-veld-plan); background: var(--color-surface); text-align: center; font-size: var(--text-17); }
.zv .zv-getal:focus { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }
.zv .zv-getalrij { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-17); }
.zv .zv-getalrij .zv-seg button { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; }
.zv .zv-rij small + small { margin-top: 2px; }
.zv .zv-plus { font-size: var(--text-22); line-height: 1; width: 22px; text-align: center; }
.zv .zv-muted { color: var(--color-text-muted); }
.zv .zv-rij small.zv-faint { color: var(--color-faint); }
/* ⋯-menu in de kop van een venster (§3: verwijderen staat in het ⋯-menu, niet onderaan). */
.zv .zv-kopacties { display: flex; align-items: center; gap: 2px; flex: none; }
.zv .zv-menu { position: relative; }
.zv .zv-pop--menu { right: 0; top: 46px; }
.zv .zv-pop .zv-pop__gevaar { color: var(--color-error); }
/* (?) naast een sectiekop: opent de uitleg (kennisbank-patroon). */
.zv .zv-vraag { width: 28px; height: 28px; margin-left: 2px; border: 0; background: none; color: var(--color-text-muted); cursor: pointer; vertical-align: -8px; padding: 0; display: inline-grid; place-items: center; }
.zv .zv-uitleg-tekst { padding: 8px 4px; font-size: var(--text-17); line-height: var(--leading-lees); }
.zv .zv-uitleg-tekst h4 { font-size: var(--text-15); font-weight: 500; color: var(--color-text-muted); margin: 0 0 4px; }
/* Kennisbank-sheet: compacte witte bottomsheet bovenop het open venster (shared/_knowledge_sheet). */
.zv .zv-kennis { border: 0; padding: 0; width: min(460px, 100vw); max-width: 100vw; max-height: 70vh; margin: auto auto 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--color-surface); color: var(--color-text); }
.zv .zv-kennis[open] { display: flex; flex-direction: column; }
.zv .zv-kennis::backdrop { background: rgba(0,0,0,.4); }
.zv .zv-kennis__body { overflow-y: auto; padding: 4px 20px 4px; }
.zv .zv-kennis__greep { width: 38px; height: 4px; border-radius: var(--zv-radius-2); background: var(--color-line); margin: 10px auto 12px; }
.zv .zv-kennis__titel { font-size: var(--text-22); font-weight: 500; margin: 0 20px 8px; }
/* Naam-rij = veld-rij: label 15/500 inkt, 8px tot het veld (§3.6/§3.7). */
.zv .zv-veldlabel { font-size: var(--text-15); font-weight: 500; color: var(--color-text); }
.zv .zv-veldrij { gap: 8px !important; }
.zv .zv-veldrij .zv-tekstveld { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--color-control-border); border-radius: var(--radius-veld-plan); background: var(--color-surface); }
.zv .zv-veldrij .zv-tekstveld::placeholder { color: var(--color-text-muted); }
.zv .zv-veldrij textarea.zv-tekstveld { height: auto; min-height: 132px; padding: 12px 14px; resize: vertical; font: inherit; font-size: var(--text-17); line-height: var(--leading-sub); }
.zv .zv-afspraak { background: var(--color-bg); border-radius: var(--radius-groep-sheet); padding: 14px 20px; font-size: var(--text-15); line-height: var(--leading); color: var(--color-text); white-space: pre-wrap; }
.zv .zv-weg { text-decoration: line-through; background: var(--color-mark); border-radius: var(--radius-xs); }
.zv .zv-ai-lede { margin: 0 0 4px; font-size: var(--text-15); line-height: var(--leading-sub); color: var(--color-text-muted); }
.zv .zv-kennis .zv-kop:first-of-type { margin-top: 18px; }
.zv .zv-ai-punten p { margin: 0; }
.zv .zv-ai-punten p + p { margin-top: 10px; }
.zv .button .typing-dots span { background: var(--color-surface); }
.zv .zv-tijd.is-fout, .zv .zv-rij .zv-tijd.is-fout { border: 1px solid var(--color-error); border-radius: var(--zv-radius-12); padding: 4px 10px; color: var(--color-error); }
.zv .zv-rij small.veld-fout { color: var(--color-error); margin: 2px 0 0; }
.zv .infobox .tekstactie { margin: 2px 0 0; padding: 0; min-height: 44px; }
.zv .zv-voet-tekstactie { display: flex; justify-content: center; margin-top: 4px; }
.zv .zv-voet-tekstactie .tekstactie { margin: 0; padding: 0 12px; }
.zv .zv-afspraak small { display: block; margin-top: 6px; color: var(--color-text-muted); white-space: normal; }
.zv .zv-twee-regels, .zv .zv-rij small.zv-twee-regels { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Keuzerij: waarde rechts muted met chevron; opent een wit popovermenu (24px rond, rijen 50px, vinkje). */
/* Keuzerij (§3.8): past de waarde niet naast het label, dan komt hij op de regel eronder; de chevron
     blijft rechts, verticaal gecentreerd. */
.zv .zv-keuzerij { position: relative; cursor: pointer; flex-wrap: wrap; row-gap: 2px; padding-right: 54px; }
.zv .zv-keuzerij > .zv-rij__tekst { flex: 0 1 auto; }
.zv .zv-keuzerij__waarde { flex: 1 0 auto; text-align: right; color: var(--color-text-muted); font-size: var(--text-17); }
.zv .zv-keuzerij--onder .zv-keuzerij__waarde { flex-basis: 100%; text-align: left; font-size: var(--text-15); }
.zv .zv-keuzerij > .zv-chevron { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.zv .zv-keuzerij > .zv-chevron.zv-chevron--open { transform: translateY(-50%) rotate(180deg); }
.zv .zv-pop { display: none; position: absolute; right: 12px; top: calc(100% - 6px); z-index: 5; min-width: 200px; background: var(--color-surface); border-radius: var(--radius-groep); padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.zv .zv-pop.open { display: block; }
.zv .zv-pop--boven { top: auto; bottom: calc(100% - 6px); }
.zv .zv-pop button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-radius: var(--zv-radius-16); background: none; font: inherit; font-size: var(--text-17); color: var(--color-text); cursor: pointer; }
.zv .zv-pop button[aria-pressed="true"]::after { content: "✓"; font-size: var(--text-base); }
.zv .zv-kennis__voet { padding: 8px 16px 20px; }
/* Schema-keuze: witte bottomsheet met per schema de naam en het plaatje; vinkje bij de keuze. */
.zv .zv-schemasheet { max-height: 88vh; }
.zv .zv-schemasheet .zv-kennis__body { padding: 4px 16px 20px; }
.zv .zv-schemasheet .zv-rij { background: var(--color-card); min-height: 56px; }
.zv .zv-schemasheet .zv-rijen > .zv-rij:first-child { border-top-left-radius: var(--radius-groep-sheet); border-top-right-radius: var(--radius-groep-sheet); }
.zv .zv-schemasheet .zv-rijen > .zv-rij:last-child { border-bottom-left-radius: var(--radius-groep-sheet); border-bottom-right-radius: var(--radius-groep-sheet); }
.zv .zv-keuzelijst .zv-rij { min-height: 56px; }
.zv .zv-schemavink { width: 24px; height: 24px; flex: none; }
.zv .zv-rij[aria-pressed="true"] .zv-schemavink, .zv .zv-keuzelijst .zv-rij[aria-pressed="true"] .zv-schemavink { background: var(--color-text); -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E"); }
.zv .zv-mini { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.zv .zv-mini__week { display: flex; gap: 3px; }
.zv .zv-mini__dag { width: 24px; height: 14px; border-radius: var(--radius-xs); background: var(--color-ouder-een); }
.zv .zv-mini__dag--co { background: var(--color-ouder-twee); }
.zv .zv-mini__dag--leeg { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line); }
.zv .zv-uitleg-tekst p { margin: 0 0 14px; }
.zv .zv-link { border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-15); color: var(--color-text); text-decoration: underline; cursor: pointer; text-align: left; }
.zv .zv-rij__waarde { flex: none; }
/* Opslaan blijft in beeld (ronde 2): plakt onderaan zolang de pagina doorloopt. */
.zv .zv-opslaan { position: sticky; bottom: 12px; z-index: 3; }
/* De pager volgt de hoogte van het kind dat in beeld is (los aantal weken per kind). */
.zv .zv-pager { overflow-y: hidden; transition: height .2s; }
/* Vinkje (meerdere keuzes): 22px, 6px rond; aan = inkt met wit vinkje. */
.zv .zv-vink { box-sizing: border-box; width: 22px; height: 22px; border-radius: var(--radius-binnen); border: 2px solid var(--color-control-border); background: var(--color-surface); flex: none; display: grid; place-items: center; font-size: var(--text-sm); color: var(--color-on-btn); }
.zv .zv-vink.aan { background: var(--color-btn); border-color: var(--color-btn); }
.zv .zv-vink.aan::after { content: "✓"; }
.zv .zv-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); box-sizing: border-box; background: var(--color-btn); color: var(--color-on-btn); padding: 12px 16px; border-radius: var(--zv-radius-16); font-size: var(--text-15); z-index: 50; }
.zv .zv-rij small.zv-let { color: var(--color-text); }
.zv .zv-uitklap { cursor: pointer; }
.zv .zv-uitklap .zv-vraag { margin-left: 8px; }
/* Voetregel: een melding die van het antwoord afhangt, onder de groep (.plan-voetnoot). */
.zv .zv-let-op { color: var(--color-text) !important; font-weight: 500; }
.zv .zv-melding { background: var(--color-bg); border-radius: var(--radius-groep-sheet); padding: 18px 20px; font-size: var(--text-15); line-height: var(--leading); color: var(--color-text); margin: 0 0 6px; }
.zv .zv-voetnoot { font-size: var(--text-15); color: var(--color-text-muted); margin: 10px 0 0 20px; }
/* Lege staat: gewone grijze kaart, tekst muted (§3.3). */
.zv .zv-leeg-kaart { background: var(--color-card); border-radius: var(--radius-groep); padding: 18px 20px; font-size: var(--text-15); color: var(--color-text-muted); }
.zv .zv-sheet .zv-leeg-kaart { background: var(--color-bg); border-radius: var(--radius-groep-sheet); }
/* Tekstactie als rij (§3.6 .setrow--actie). */
.zv .zv-actie { color: var(--color-accent); }
/* ⋯-menu = actierijen in een sheet (§3.6): rij op --color-bg, 18px rond, 16/18, label 17. */
.zv .zv-pop--menu { padding: 8px; }
.zv .zv-pop--menu button { height: auto; padding: 16px 18px; border-radius: var(--radius-sheet-rij); background: var(--color-bg); }
.zv .zv-pop--menu .zv-pop__gevaar { background: var(--color-error-soft); box-shadow: inset 0 0 0 1px var(--color-error-border); color: var(--color-error); }
.zv .zv-sheet__greep { display: none; }
/* een volledige editor is een scherm en heeft geen greep (§3.8) */
.zv .zv-tekstvak { min-height: 72px !important; line-height: var(--leading); resize: none; }
/* Typen op een telefoon: de knop onderin blijft onderaan de pagina, onder het toetsenbord, en
   schuift niet mee omhoog (Jerry 2026-10-09). Na het typen staat hij er weer. */
@media (pointer: coarse) {
  .zv dialog:has(textarea:focus, input:not([type=checkbox], [type=radio], [type=button]):focus) .zv-sheet__voet { display: none; }
}
/* De eerste vraag in een sheet staat dicht onder de kop, net als een lijst (Jerry 2026-10-09). */
.zv .zv-sheet__body > .zv-kop:first-child, .zv .zv-sheet__body > :first-child > .zv-kop:first-child { margin-top: 4px; }