/* Beweeg Impact V2 · huid 'In beweging' (besluit PO 2026-10-05) · tokens en componenten.
   Spec: analyse/v2/07-in-beweging.md (vervangt de huid 'Veldboekje' van 04-visuele-taal.md §1-3 en §5; de structuur
   van V2 blijft). Contrast per tokenpaar: 07 §2 en analyse/v2/tools/contrast.py.
   Alle kleuren staan alleen in :root (tests/test_design_system_v2.py). Wordt na styles.css geladen: per batch verhuizen
   schermen naar de v2-*-klassen en verdwijnt de oude CSS van dat scherm uit styles.css (analyse/v2/06-aanpak.md §3).
   Sectie 17 (brug) laat schermen die nog niet zijn omgezet alvast de V2-kleuren en -vormen volgen. */

/* ---------- 1. Tokens ---------- */
:root {
  /* kleur: oppervlak en inkt. De pagina is wit; een kaart is een zacht vlak (--v2-vlak, zonder rand of schaduw); wat
     je invult of wat bovenop ligt (veld, keuzevlak, dialoog, menu, QR) is wit (--v2-vel). */
  --v2-papier: #FFFFFF;          /* pagina */
  --v2-papier-2: #EAEFEC;        /* rij-hover, lege balk, zachte vlakken */
  --v2-vlak: #F3F6F4;            /* een kaart: .v2-vel en de andere 'vellen' op een pagina (07 §6) */
  --v2-vel: #FFFFFF;             /* wat je invult of wat bovenop ligt */
  --v2-inkt: #13221A;            /* tekst: 16,5:1 op wit, 15,2:1 op het vlak */
  --v2-inkt-2: #4B5A51;          /* tweede tekst: 7,3:1 op wit, 6,7:1 op het vlak */
  --v2-inkt-3: #7C8A82;          /* alleen decoratief: nooit betekenisvolle tekst */
  --v2-lijn: #DAE2DC;            /* hairline */
  --v2-lijn-sterk: #7F8C84;      /* rand van een veld: 3,5:1 op wit, 3,2:1 op het vlak */
  /* kleur: het merk. Veldgroen is het merkvlak (zijbalk, mobiele bovenbalk), geen actie. Het logogroen is het logo en
     de motieven (07 §4): altijd decoratie, want op wit haalt het maar 2,85:1. */
  --v2-veld: #0D3A23;            /* wit erop 12,8:1 */
  --v2-veld-2: #14502F;          /* hover en actief item in de zijbalk */
  --v2-op-veld: #FFFFFF;
  --v2-op-veld-2: #CFE3D6;       /* gewone tekst in de zijbalk: 9,5:1 op veld, 7,0:1 op veld-2 */
  --v2-lijn-op-veld: rgba(255, 255, 255, .16);
  --v2-merk: #3EAE4B;            /* logo-groen: het logo en de motieven */
  /* kleur: betekenis */
  --v2-actie: #187A42;           /* hier kun je iets doen (knop, tekstactie, link): 5,4:1 op wit, 4,95:1 op het vlak */
  --v2-actie-hover: #006E20;
  --v2-op-actie: #FFFFFF;
  --v2-actie-vlak: #E3F1E6;      /* zacht groen vlak (succes, gekozen antwoord) */
  /* de actiekleur als tekst (link, tekstactie) en als rand (keuzerondje, gekozen vlak): gelijk aan --v2-actie, maar de
     huisstijl van een vragenlijst (§20) zet hier de op contrast gecontroleerde tinten van brand_palette() */
  --v2-actie-tekst: var(--v2-actie); --v2-actie-tekst-hover: var(--v2-actie-hover); --v2-actie-rand: var(--v2-actie);
  --v2-gevaar: #B42318;          /* gesloten, verwijderen, de gevaarknop: 6,6:1 op wit, wit erop 6,6:1 */
  --v2-gevaar-vlak: #FBE6E3;
  --v2-kaart: #FFD23F;           /* de gele kaart voor 'Vraagt aandacht', de avatar 'jij'; nooit tekst (inkt erop 11,4:1) */
  /* de tekeningen (07 §8): het vlak erachter, het accent en een klein geel vlak; de huisstijl van een vragenlijst zet ze (§20) */
  --v2-illu-vul: var(--v2-actie-vlak); --v2-illu-merk: var(--v2-merk); --v2-illu-warm: var(--v2-kaart);
  --v2-deelnemer-pagina: #F4F5F6; /* de pagina van elke vragenlijst voor deelnemers, met en zonder eigen kleuren (07 §10; = branding.PAGE_NEUTRAL) */
  /* kleur: meldingen (vlak / tekst) */
  --v2-succes-vlak: #E3F1E6; --v2-succes-tekst: #006E20;
  --v2-info-vlak: #E7EDF4;   --v2-info-tekst: #1D4F91;
  --v2-waarsch-vlak: #FBEBD3; --v2-waarsch-tekst: #6E4300;
  --v2-fout-vlak: #F9E1DC;   --v2-fout-tekst: #9E2A1A;
  /* focus (BL-141): groen met een witte binnenring; op het veldgroen wit met een veldgroene binnenring (07 §2) */
  --v2-focus: #006E20; --v2-focus-binnen: #FFFFFF; --v2-focus-dikte: 3px; --v2-focus-afstand: 2px;
  --v2-focus-op-veld: #FFFFFF;
  /* typografie: één familie, Archivo (07 §3). --v2-kop is de stem van koppen en grote cijfers: vet, licht schuin en
     iets smaller, zoals de B van het logo. */
  --v2-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v2-kop: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v2-t-klein: 0.9375rem;   /* 15 */
  --v2-t-basis: 1.0625rem;   /* 17 */
  --v2-t-groot: 1.1875rem;   /* 19 */
  --v2-t-kop3: 1.375rem;     /* 22 */
  --v2-t-kop2: 1.75rem;      /* 28 */
  --v2-t-kop1: 2.375rem;     /* 38; desktop 3 */
  --v2-t-cijfer: 2.625rem;   /* 42; desktop 3 */
  --v2-t-label: 0.8125rem;   /* 13, kapitalen met spatiëring */
  --v2-lh: 1.45;
  /* ruimte */
  --v2-s1: 4px; --v2-s2: 8px; --v2-s3: 12px; --v2-s4: 16px; --v2-s5: 24px; --v2-s6: 32px; --v2-s7: 48px; --v2-s8: 64px;
  --v2-gutter: 20px; --v2-max: 1180px;
  /* vorm */
  --v2-r-vel: 8px; --v2-r-knop: 8px; --v2-r-veld: 8px;
  --v2-schaduw-vel: none;        /* een kaart is een vlak: geen schaduw (07 §6) */
  --v2-schaduw-zweef: 0 18px 40px -18px rgba(19, 34, 26, .45);
  /* beweging: drie micro-interacties, allemaal ≤ 300 ms */
  --v2-duur: 220ms; --v2-ease: cubic-bezier(.2, .7, .2, 1);
  /* maten */
  --v2-tik: 48px; --v2-onder-hoogte: 68px; --v2-zij-breedte: 240px;
  --v2-formulier-max: 42rem;     /* één formulier, één breedte: .v2-formulier (§31, BL-158); links in de inhoudskolom */
  --v2-actiebalk-hoogte: 116px;  /* de plakkende actiebalk op mobiel: knop, 'Annuleren' en de marge erboven (§7) */
  --v2-stapbalk-hoogte: 76px;    /* de plakkende actierij van de vragenlijst: 'Terug' en 'Verder'/'Versturen' (§20) */
  --v2-schaduw-balk: 0 -14px 24px -20px rgba(19, 34, 26, .35);  /* een balk die onderaan over de inhoud ligt */
}
@media (prefers-reduced-motion: reduce) { :root { --v2-duur: 0ms; } }

/* ---------- 2. Lettertypen (zelf gehost, OFL: static/fonts/LICENTIE.md) ---------- */
/* Archivo variabel: gewicht 400-800, breedte 80-100%, rechtop en cursief; latin en latin-ext (07 §3) */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 80% 100%; font-display: swap; src: url("../fonts/Archivo-normal-400-800-latin.2f7ea45bad3a.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 80% 100%; font-display: swap; src: url("../fonts/Archivo-normal-400-800-latin-ext.cde95d2797df.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400 800; font-stretch: 80% 100%; font-display: swap; src: url("../fonts/Archivo-italic-400-800-latin.f1de6d9ea318.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400 800; font-stretch: 80% 100%; font-display: swap; src: url("../fonts/Archivo-italic-400-800-latin-ext.29c26d4a91e0.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 3. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--v2-papier); color: var(--v2-inkt); font-family: var(--v2-font); font-size: var(--v2-t-basis); line-height: var(--v2-lh); font-feature-settings: "tnum" 1; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--v2-actie-tekst); text-decoration: none; }
a:hover { color: var(--v2-actie-tekst-hover); text-decoration: underline; text-underline-offset: 3px; }
/* Een link midden in lopende tekst is onderstreept: kleur alleen is niet genoeg (WCAG 1.4.1, axe link-in-text-block).
   Losse acties (knop, tekstactie, kruimel, de naam van een rij, navigatie en menu's) houden hun eigen vorm. */
:is(p, li, td, dd, blockquote, figcaption, .sub, .s, .v2-stil, .message-text) a:not(.v2-knop, .v2-tekstknop, .naam, .item-link, .v2-kruimel, .terug, .button-primary, .button-secondary, .skip-to-content):not(nav a, .v2-meer a, .sidebar a, .account-menu a) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--v2-focus-dikte) solid var(--v2-focus); outline-offset: var(--v2-focus-afstand); box-shadow: 0 0 0 var(--v2-focus-afstand) var(--v2-focus-binnen); border-radius: 4px; }
/* Een kop met tabindex="-1" krijgt de focus alleen van een script (venster open, regel weggeklikt), zodat een
   screenreader hem voorleest; het is geen bedieningselement en de Tab-toets komt er niet, dus geen zichtbare ring
   (PO 2026-10-02: groene rand om 'Welkom bij Beweeg Impact'). Transparant i.p.v. none: zichtbaar in forced-colors. */
:is(h1, h2, h3)[tabindex="-1"]:focus-visible { outline-color: transparent; box-shadow: none; }
.v2-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.v2-ico--klein { width: 16px; height: 16px; }
.v2-ico--groot { width: 28px; height: 28px; }

/* ---------- 4. Typografie ---------- */
.v2-h1 { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 82; font-size: var(--v2-t-kop1); line-height: 1.02; letter-spacing: -.015em; }
/* Motief 1 (07 §4): de snelheidsstreep van het logo onder de h1 van elk app-scherm; decoratie, dus niet op de
   deelnemerspagina's (die zijn van de organisatie), niet in print en weg in hoog contrast (achtergrond telt daar niet) */
.v2-h1::after { content: ""; display: block; width: 104px; height: 12px; margin-top: 8px; background: var(--v2-merk); clip-path: polygon(0 100%, 100% 0, 97% 42%); }
.v2-deelnemer .v2-h1::after { content: none; }
.v2-h2 { font-size: var(--v2-t-kop2); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.v2-h3 { font-size: var(--v2-t-kop3); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.v2-label { font-size: var(--v2-t-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--v2-inkt); }
/* Motief 2 (07 §4): een schuin streepje logogroen voor de kop van een sectie (h2/h3 met .v2-label), niet voor losse labels */
:is(h2, h3).v2-label::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 8px; vertical-align: 0; background: var(--v2-merk); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.v2-klein { font-size: var(--v2-t-klein); }
.v2-stil { color: var(--v2-inkt-2); }
.v2-lead { font-size: var(--v2-t-groot); color: var(--v2-inkt-2); max-width: 46ch; }
.v2-lead b, .v2-stil b { color: var(--v2-inkt); font-weight: 600; }
.v2-cijfer { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-cijfer); line-height: 1; letter-spacing: -.01em; font-feature-settings: "tnum" 1; }
.v2-cijfer small { font-family: var(--v2-font); font-weight: 400; font-style: normal; font-variation-settings: normal; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); letter-spacing: 0; margin-left: 2px; }
.v2-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--v2-s4) var(--v2-s4); }
.v2-cijfers > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v2-cijfers .l { font-size: var(--v2-t-klein); color: var(--v2-inkt-2); line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
/* Precies vier cijfers op een smal scherm als 2 x 2, niet 3 + 1 (testrun K12, PO 2026-10-02) */
@media (max-width: 600px) { .v2-cijfers:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-cijfers--lijn > div { border-top: 2px solid var(--v2-inkt); padding-top: var(--v2-s3); }

/* ---------- 5. Lay-out: shell ---------- */
.v2-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
/* De mobiele bovenbalk is het merkvlak (07 §7): veldgroen met wit; de focusring is daar wit met een veldgroene binnenring */
.v2-top { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); padding: var(--v2-s2) var(--v2-gutter); min-height: 60px; background: var(--v2-veld); color: var(--v2-op-veld); --v2-focus: var(--v2-focus-op-veld); --v2-focus-binnen: var(--v2-veld); }
.v2-top .org { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.merk-tegel { width: 32px; height: 32px; border-radius: 7px; flex: 0 0 auto; }
.v2-top .org { font-weight: 700; font-style: italic; font-variation-settings: "wdth" 88; font-size: var(--v2-t-groot); color: var(--v2-op-veld); }
.v2-top .terug { display: inline-flex; align-items: center; gap: 4px; color: var(--v2-op-veld); font-weight: 600; min-height: var(--v2-tik); }
/* Rond op elke telefoon: de V1-knopregel (styles.css: min-height 2.9rem, padding) maakte hem een ovaal (feedback PO 2026-09-28) */
.topbar-avatar { width: 40px; height: 40px; min-height: 0; min-width: 0; padding: 0; flex: none; aspect-ratio: 1; border-radius: 50%; background: var(--v2-merk); color: var(--v2-veld); display: grid; place-items: center; font-weight: 800; border: 0; cursor: pointer; }
.topbar-avatar--jij { background: var(--v2-kaart); color: var(--v2-inkt); }
.v2-main { width: 100%; max-width: var(--v2-max); margin: 0 auto; padding: var(--v2-s2) var(--v2-gutter) calc(var(--v2-onder-hoogte) + var(--v2-s6)); }
.mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--v2-onder-hoogte); background: var(--v2-vel); border-top: 1px solid var(--v2-lijn); display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 0 10px; z-index: 30; }
.mobile-bottom-nav a, .mobile-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 500; color: var(--v2-inkt-2); background: none; border: 0; min-height: var(--v2-tik); }
.mobile-bottom-nav .is-active { color: var(--v2-inkt); position: relative; font-weight: 600; }
/* Motief 3 (07 §4): een schuin streepje logogroen boven het actieve item; aria-current en de tekstkleur dragen de betekenis */
.mobile-bottom-nav .is-active::before { content: ""; position: absolute; top: -6px; left: 32%; right: 32%; height: 3px; background: var(--v2-merk); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.mobile-bottom-nav .is-active .v2-ico { stroke: var(--v2-actie); }
.mobile-bottom-nav .v2-ico { width: 24px; height: 24px; }
.sidebar { display: none; }
/* Toetsenbordfocus nooit onder de vaste onderbalk of de plakkende actiebalk van een formulier (WCAG 2.4.11, besluit PO
   vraag 40; zo deed V1 het ook): de browser houdt bij Tab onderaan zoveel ruimte vrij. Boven is niets vast (.v2-top
   scrolt mee); wat ruimte voor de focusring zelf. */
html { scroll-padding-top: var(--v2-s3); scroll-padding-bottom: var(--v2-s3); }
@media (max-width: 780px) {
  html:has(.mobile-bottom-nav) { scroll-padding-bottom: calc(var(--v2-onder-hoogte) + var(--v2-s4) + env(safe-area-inset-bottom, 0px)); }
  html:has(.mobile-bottom-nav):has(.v2-actiebalk) { scroll-padding-bottom: calc(var(--v2-onder-hoogte) + var(--v2-actiebalk-hoogte) + var(--v2-s4) + env(safe-area-inset-bottom, 0px)); }
}
/* 'Menu sluiten' (BL-117): alleen in de drawer, minstens 44x44 px */
.sidebar-close { display: none; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0; border: 0; background: none; color: var(--v2-op-veld); cursor: pointer; border-radius: var(--v2-r-veld); }
.sidebar-close .v2-ico { width: 24px; height: 24px; }
.v2-zij-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); }
.v2-zij-kop .merk { white-space: nowrap; }
@media (max-width: 780px) { .v2-desk { display: none !important; } }
@media (min-width: 781px) {
  .v2-shell { grid-template-columns: var(--v2-zij-breedte) minmax(0, 1fr); }
  .sidebar { display: flex; flex-direction: column; gap: 2px; padding: var(--v2-s5) var(--v2-s4); background: var(--v2-veld); color: var(--v2-op-veld-2); position: sticky; top: 0; height: 100dvh; }
  .sidebar .merk { display: flex; align-items: center; gap: 10px; margin: 0 var(--v2-s2) var(--v2-s6); }
  .sidebar a { display: flex; align-items: center; gap: var(--v2-s3); padding: 9px var(--v2-s3); border-radius: var(--v2-r-veld); color: var(--v2-op-veld-2); font-weight: 500; min-height: 44px; }
  .sidebar .v2-label { margin: var(--v2-s5) var(--v2-s3) var(--v2-s1); }
  .sidebar .account { margin-top: auto; padding: var(--v2-s3); border-top: 1px solid var(--v2-lijn-op-veld); font-size: var(--v2-t-klein); }
  .sidebar .account b { display: block; font-weight: 600; }
  .sidebar .account .v2-stil { display: block; }
  .sidebar .account a { padding: 6px 0; min-height: 0; display: inline-flex; }
  .v2-top, .mobile-bottom-nav { display: none; }
  .v2-main { padding: var(--v2-s5) var(--v2-s7) var(--v2-s8); }
  .v2-mob { display: none !important; }
  :root { --v2-t-kop1: 3rem; --v2-t-cijfer: 3rem; }
}

/* ---------- 6. Paginakop ---------- */
.v2-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v2-s3) var(--v2-s5); margin: var(--v2-s4) 0 var(--v2-s4); }
.v2-kop .titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--v2-s3); }
.v2-kop .titel .datum { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); text-transform: uppercase; letter-spacing: .08em; }
.v2-kop .acties { display: flex; align-items: center; gap: var(--v2-s5); }
.v2-kruimel { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-actie-tekst); font-weight: 600; margin: var(--v2-s3) 0 0; min-height: 32px; }
.v2-kruimel .v2-ico { width: 18px; height: 18px; }

/* ---------- 7. Acties ---------- */
.v2-knop { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-wrap: balance; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: var(--v2-r-knop); border: 0; background: var(--v2-actie); color: var(--v2-op-actie); font-weight: 600; font-size: var(--v2-t-groot); cursor: pointer; text-decoration: none; transition: background var(--v2-duur) var(--v2-ease), transform var(--v2-duur) var(--v2-ease); }
.v2-knop:hover { background: var(--v2-actie-hover); color: var(--v2-op-actie); text-decoration: none; }
.v2-knop:active { transform: translateY(1px); }
.v2-knop:disabled, .v2-knop[aria-disabled="true"] { background: var(--v2-inkt-3); cursor: not-allowed; }
.v2-knop--breed { width: 100%; }
/* PO 2026-10-02: 'Registreren' met de naam van de interventie als kleine tweede regel (Start: 'Verder met', 'Eerste stappen') */
.v2-knop--bij { flex-direction: column; gap: 0; padding-top: 7px; padding-bottom: 7px; line-height: 1.25; text-align: center; }
.v2-knop--bij .knop-bij { display: block; max-width: 100%; font-size: var(--v2-t-klein); font-weight: 400; overflow-wrap: anywhere; }
.v2-knop--rand { background: transparent; color: var(--v2-actie-tekst); box-shadow: inset 0 0 0 1.5px var(--v2-actie-rand); }
.v2-knop--rand:hover { background: var(--v2-actie-vlak); color: var(--v2-actie-tekst-hover); }
.v2-knop--gevaar { background: var(--v2-gevaar); }
.v2-knop--gevaar:hover { background: var(--v2-fout-tekst); }
.v2-tekstknop { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-actie-tekst); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; min-height: 32px; text-decoration: none; }
.v2-tekstknop:hover { color: var(--v2-actie-tekst-hover); text-decoration: underline; text-underline-offset: 3px; }
.v2-tekstknop--warm { color: var(--v2-gevaar); }
.v2-tekstknop--stil { color: var(--v2-inkt-2); font-weight: 500; }
.v2-tekstknop .v2-ico { width: 18px; height: 18px; }
.v2-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s3) var(--v2-s5); margin-top: var(--v2-s3); }
/* ⋯-menu: <details class="v2-meer"> */
.v2-meer { position: relative; display: inline-block; }
.v2-meer > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: var(--v2-tik); height: 40px; border-radius: var(--v2-r-veld); cursor: pointer; color: var(--v2-inkt-2); }
.v2-meer > summary::-webkit-details-marker { display: none; }
.v2-meer > summary:hover { background: var(--v2-papier-2); color: var(--v2-inkt); }
.v2-meer[open] > summary { background: var(--v2-papier-2); }
.v2-meer .paneel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--v2-vel); border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-zweef), 0 0 0 1px var(--v2-lijn); padding: 6px; z-index: 20; }
.v2-meer .paneel a, .v2-meer .paneel button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--v2-r-veld); color: var(--v2-inkt); background: none; border: 0; cursor: pointer; min-height: 44px; font-weight: 500; }
.v2-meer .paneel a:hover, .v2-meer .paneel button:hover { background: var(--v2-papier-2); text-decoration: none; }
.v2-meer .paneel .gevaar { color: var(--v2-gevaar); }
.v2-meer .paneel hr { border: 0; border-top: 1px solid var(--v2-lijn); margin: 6px 0; }

/* ---------- 8. Status en aandacht ---------- */
.v2-status { display: inline-flex; align-items: center; gap: 7px; color: var(--v2-inkt-2); font-size: var(--v2-t-klein); white-space: nowrap; }
/* Het statusmarkeertje (07 §5, besluit PO 2026-10-05): de tekst draagt de status, ervoor een schuin blokje in de
   statuskleur, zoals een rugnummer; geen gevuld label (groen blijft voor de actie) */
.v2-status::before { content: ""; width: 8px; height: 12px; border-radius: 1px; transform: skewX(-14deg); background: var(--v2-inkt-3); flex: 0 0 auto; }
.v2-status--open::before { background: var(--v2-actie); }
.v2-status--dicht::before { background: var(--v2-gevaar); }
.v2-status--dicht { color: var(--v2-gevaar); }
.v2-status--concept::before { background: transparent; box-shadow: inset 0 0 0 2px var(--v2-inkt-3); }
.v2-tag { display: inline-block; font-size: var(--v2-t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-inkt-2); border: 1px solid var(--v2-lijn-sterk); border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
/* 'Vraagt aandacht' (07 §4): voor elke regel een gele kaart, zoals de scheidsrechter hem toont; de link is gewoon de
   actie. De kaart is decoratie: de zin zegt wat er aan de hand is. */
.v2-aandacht { display: flex; flex-direction: column; border-top: 1px solid var(--v2-lijn); }
.v2-aandacht > p { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--v2-lijn); }
.v2-aandacht > p::before { content: ""; position: absolute; left: 2px; top: 13px; width: 13px; height: 18px; border-radius: 2px; transform: rotate(9deg); background: var(--v2-kaart); box-shadow: 0 0 0 1px rgba(19, 34, 26, .18); }
.v2-aandacht p b { font-weight: 600; }
.v2-aandacht a { color: var(--v2-actie-tekst); font-weight: 600; white-space: nowrap; }

/* ---------- 9. Vel, sectie, lijst, tabel ---------- */
/* Een kaart is een zacht vlak op de witte pagina, zonder rand of schaduw (besluit PO 2026-10-05, 07 §6); wat erin ligt en
   je bedient (velden, keuzevlakken, de QR) blijft wit (--v2-vel) */
.v2-vel { background: var(--v2-vlak); border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-vel); padding: var(--v2-s5) var(--v2-s5) var(--v2-s5); position: relative; }
.v2-vel--strak { padding: var(--v2-s4); }
.v2-vel .v2-h2 { padding-right: 64px; }
.v2-vel .illu { position: absolute; right: var(--v2-s3); top: var(--v2-s3); width: 64px; height: 64px; }
.v2-sectie { margin-top: var(--v2-s6); }
.v2-sectie > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v2-s3); margin-bottom: var(--v2-s2); }
.v2-sectie > .v2-label { display: block; margin-bottom: var(--v2-s2); }
.v2-sectie > header .v2-label { margin: 0; }
.v2-lijst { border-top: 1px solid var(--v2-lijn); }
.v2-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s4); padding: var(--v2-s4) 0; border-bottom: 1px solid var(--v2-lijn); }
.v2-rij > div:first-child { min-width: 0; flex: 1 1 auto; }
.v2-rij .naam { font-weight: 600; font-size: var(--v2-t-groot); color: var(--v2-inkt); }
.v2-rij .naam:hover { color: var(--v2-actie-tekst-hover); }
.v2-rij .sub { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.v2-rij .rechts { display: flex; align-items: center; gap: var(--v2-s4); flex: 0 0 auto; }
.v2-rij--klik { cursor: pointer; }
.v2-rij--klik:hover { background: var(--v2-papier-2); }
.v2-tabel { width: 100%; border-collapse: collapse; }
.v2-tabel th { text-align: left; font-size: var(--v2-t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-inkt-2); padding: 8px 0; border-bottom: 2px solid var(--v2-inkt); }
.v2-tabel td { padding: 12px 0; border-bottom: 1px solid var(--v2-lijn); vertical-align: top; }
.v2-tabel .num { text-align: right; font-variant-numeric: tabular-nums; }
.v2-tabel th.num { text-align: right; }

/* ---------- 10. Tijdlijn ---------- */
.v2-tijdlijn { position: relative; padding-left: 28px; margin-top: var(--v2-s4); }
/* De tijdlijn als baan (07 §4): een gestippelde lijn met schuine blokjes in plaats van stippen */
.v2-tijdlijn::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--v2-lijn-sterk) 0 6px, transparent 6px 10px); }
.v2-stap { position: relative; padding: 0 0 var(--v2-s5); }
.v2-stap::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 16px; border-radius: 2px; transform: skewX(-14deg); background: var(--v2-vel); border: 2px solid var(--v2-inkt-3); }
.v2-stap--klaar::before { background: var(--v2-inkt); border-color: var(--v2-inkt); }
.v2-stap--nu::before { background: var(--v2-actie); border-color: var(--v2-actie); box-shadow: 0 0 0 4px var(--v2-actie-vlak); }
.v2-stap--dicht::before { background: var(--v2-gevaar); border-color: var(--v2-gevaar); }
.v2-stap--later::before { border-style: dashed; }
.v2-stap .datum { font-size: var(--v2-t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-inkt-2); }
.v2-stap .titel { font-weight: 600; font-size: var(--v2-t-groot); }
.v2-stap .sub { color: var(--v2-inkt-2); }
.v2-stap .v2-vel { margin-top: var(--v2-s3); }
.v2-stap--periode { color: var(--v2-inkt-2); font-style: italic; font-weight: 500; font-size: var(--v2-t-basis); }
.v2-stap--periode::before { display: none; }
/* een link in die regel ('… 6 eerdere registraties') blijft een aanraakdoel van minstens 24 px (WCAG 2.5.8, M8) */
.v2-stap--periode a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- 11. Resultaten ---------- */
.v2-verhaal { font-size: var(--v2-t-groot); max-width: 60ch; }
/* De nadruk in de samenvatting (07 §9): vet met een groene markeerstreep eronder, zoals een stift */
.v2-verhaal b { font-weight: 700; background: linear-gradient(transparent 62%, rgba(62, 174, 75, .32) 62%); }
.v2-resultaat { display: grid; grid-template-columns: 1fr auto; gap: var(--v2-s2) var(--v2-s4); padding: var(--v2-s4) 0; border-bottom: 1px solid var(--v2-lijn); align-items: baseline; }
.v2-resultaat .vraag { font-weight: 600; }
.v2-resultaat .oordeel { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 82; font-size: var(--v2-t-kop3); line-height: 1; white-space: nowrap; }
.v2-resultaat .oordeel small { font-family: var(--v2-font); font-weight: 500; font-style: normal; font-variation-settings: normal; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); }
.v2-verschil { display: inline-flex; align-items: center; gap: 4px; font-family: var(--v2-font); font-style: normal; font-variation-settings: normal; font-size: var(--v2-t-klein); font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.v2-verschil--beter { color: var(--v2-succes-tekst); background: var(--v2-succes-vlak); }
.v2-verschil--slechter { color: var(--v2-fout-tekst); background: var(--v2-fout-vlak); }
.v2-verschil--gelijk { color: var(--v2-inkt-2); background: var(--v2-papier-2); }
.v2-resultaat .details { grid-column: 1 / -1; }
.v2-balken { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(120px, 3fr) auto; gap: 6px var(--v2-s3); align-items: center; font-size: var(--v2-t-klein); }
.v2-balk { height: 10px; background: var(--v2-papier-2); overflow: hidden; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.v2-balk > i { display: block; height: 100%; background: var(--v2-inkt); }
.v2-balk--start > i { background: var(--v2-inkt-3); }
.v2-balk--eind > i { background: var(--v2-actie); }
/* Een citaat met een schuine groene balk links in plaats van een lijn (07 §4) */
.v2-citaat { position: relative; font-weight: 500; font-size: var(--v2-t-groot); line-height: 1.35; padding: var(--v2-s2) 0 var(--v2-s2) var(--v2-s5); margin: var(--v2-s3) 0; }
.v2-citaat::before { content: ""; position: absolute; left: 0; top: var(--v2-s3); bottom: var(--v2-s3); width: 6px; background: var(--v2-merk); clip-path: polygon(100% 0, 100% calc(100% - 4px), 0 100%, 0 4px); }
.v2-citaat footer { font-family: var(--v2-font); font-size: var(--v2-t-klein); color: var(--v2-inkt-2); margin-top: 4px; }
details.v2-details > summary { list-style: none; cursor: pointer; color: var(--v2-actie-tekst); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
details.v2-details > summary::-webkit-details-marker { display: none; }
details.v2-details > summary::before { content: "›"; display: inline-block; transition: transform var(--v2-duur) var(--v2-ease); }
details.v2-details[open] > summary::before { transform: rotate(90deg); }

/* ---------- 12. Delen en QR ---------- */
.v2-deel { display: grid; gap: var(--v2-s4); justify-items: center; text-align: center; }
.v2-qr { width: min(280px, 72vw); aspect-ratio: 1; background: var(--v2-vel); border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-vel); padding: var(--v2-s4); animation: v2-in var(--v2-duur) var(--v2-ease) both; }
.v2-qr svg { width: 100%; height: 100%; }
.v2-qr--groot { width: min(320px, 80vw); }
/* De link breekt af waar nodig (overflow-wrap: anywhere) en 'Kopiëren' gaat eronder als de regel te smal is: nooit
   zijwaarts scrollen in een venster of op het deel-scherm, van 320 tot 1440 px (tests/test_design_system_v2.py). */
.v2-deel .link { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--v2-s2); max-width: 100%; min-width: 0; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); }
.v2-deel .link code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--v2-papier-2); padding: 4px 8px; border-radius: 4px; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
/* Op mobiel geen volledige link: QR-code, status en acties passen dan in één scherm; 'Kopiëren' kopieert hem wel (feedback PO 2026-09-28) */
@media (max-width: 780px) { .v2-deel .link code { display: none; } }
@keyframes v2-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- 13. Formulieren ---------- */
.v2-veld { display: flex; flex-direction: column; gap: 6px; margin: var(--v2-s4) 0; }
.v2-veld > label, .v2-veld > legend { font-weight: 600; }
.v2-veld .hulp { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); }
.v2-veld .fout { color: var(--v2-fout-tekst); font-size: var(--v2-t-klein); font-weight: 600; }
.v2-invoer { font: inherit; font-size: var(--v2-t-groot); color: var(--v2-inkt); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); padding: 12px 14px; min-height: var(--v2-tik); width: 100%; }
.v2-invoer:focus-visible { border-color: var(--v2-focus); }
.v2-invoer--fout { border-color: var(--v2-fout-tekst); }
.v2-invoer--groot { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-cijfer); text-align: center; padding: 8px; }
.v2-keuze { display: grid; gap: var(--v2-s2); }
.v2-keuze label { display: flex; align-items: center; gap: var(--v2-s3); min-height: 56px; padding: 0 var(--v2-s4); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); cursor: pointer; font-size: var(--v2-t-groot); }
.v2-keuze label:has(:checked) { border-color: var(--v2-actie-rand); box-shadow: inset 0 0 0 1px var(--v2-actie-rand); background: var(--v2-actie-vlak); }
.v2-keuze input { width: 22px; height: 22px; accent-color: var(--v2-actie-rand); margin: 0; }
.v2-schaal { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--v2-s2); }
.v2-schaal label { display: grid; place-items: center; min-height: 60px; background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-kop2); cursor: pointer; }
.v2-schaal label:has(:checked) { background: var(--v2-actie); color: var(--v2-op-actie); border-color: var(--v2-actie); }
.v2-schaal label { position: relative; }
.v2-schaal input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v2-schaal label:has(> input:focus-visible) { outline: var(--v2-focus-dikte) solid var(--v2-focus); outline-offset: var(--v2-focus-afstand); }
.v2-schaal-ankers { display: flex; justify-content: space-between; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); margin-top: 4px; }
.v2-segment { display: inline-flex; border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); }
.v2-segment label { position: relative; padding: 8px 14px; cursor: pointer; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; }
/* geen overflow: hidden op de groep (dat knipte de focusring af): de buitenste vakken volgen zelf de ronde hoek */
.v2-segment label:first-child { border-radius: calc(var(--v2-r-veld) - 1.5px) 0 0 calc(var(--v2-r-veld) - 1.5px); }
.v2-segment label:last-child { border-radius: 0 calc(var(--v2-r-veld) - 1.5px) calc(var(--v2-r-veld) - 1.5px) 0; }
.v2-segment label:has(:checked) { background: var(--v2-inkt); color: var(--v2-papier); }
/* het rondje is onzichtbaar maar vult het vak (dan schuift Tab het hele vak in beeld); de focusring staat op het vak (M9) */
.v2-segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v2-segment label:has(> input:focus-visible) { outline: var(--v2-focus-dikte) solid var(--v2-focus); outline-offset: var(--v2-focus-afstand); box-shadow: 0 0 0 var(--v2-focus-afstand) var(--v2-focus-binnen); z-index: 1; }
.v2-actiebalk { display: flex; flex-direction: column; gap: var(--v2-s3); margin-top: var(--v2-s5); }
/* mobiel: de balk plakt direct op de onderbalk en vult de strook ertussen zelf (padding-bottom), zodat er geen tekst
   van het formulier onder 'Annuleren' doorschemert (BL-158, op het lange INT-02 zichtbaar) */
@media (max-width: 780px) { .v2-actiebalk { position: sticky; bottom: var(--v2-onder-hoogte); background: linear-gradient(180deg, transparent, var(--v2-papier) 24px); padding-top: var(--v2-s3); padding-bottom: var(--v2-s2); } }
@media (min-width: 781px) { .v2-actiebalk { flex-direction: row; align-items: center; gap: var(--v2-s5); } }

/* Stapformulier (één vraag per scherm over één form) */
.v2-stappen .v2-stapvraag { display: none; }
.v2-stappen .v2-stapvraag.is-active { display: block; animation: v2-in var(--v2-duur) var(--v2-ease) both; }
.v2-voortgang { display: flex; align-items: center; gap: var(--v2-s3); font-size: var(--v2-t-klein); color: var(--v2-inkt-2); margin-bottom: var(--v2-s4); }
.v2-voortgang .balk { flex: 1; height: 6px; background: var(--v2-papier-2); border-radius: 3px; overflow: hidden; }
.v2-voortgang .balk > i { display: block; height: 100%; background: var(--v2-inkt); transition: width var(--v2-duur) var(--v2-ease); }
.v2-stapvraag legend, .v2-stapvraag > label { font-size: var(--v2-t-kop2); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin-bottom: var(--v2-s3); display: block; }
.v2-stapvraag fieldset { border: 0; padding: 0; margin: 0; }
.v2-stapnav { display: flex; gap: var(--v2-s4); align-items: center; justify-content: space-between; margin-top: var(--v2-s5); }
.v2-alle-vragen .v2-stapvraag { display: block !important; padding: var(--v2-s5) 0; border-bottom: 1px solid var(--v2-lijn); }

/* ---------- 14. Lege staat, melding, dialoog ---------- */
.v2-leeg { display: grid; justify-items: start; gap: var(--v2-s3); padding: var(--v2-s5) 0; max-width: 46ch; }
.v2-leeg .illu { width: 120px; height: 120px; }
.v2-leeg p { color: var(--v2-inkt-2); font-size: var(--v2-t-groot); }
.v2-leeg p b { color: var(--v2-inkt); }
/* BL-161: de lege staat als component ({% leeg %}, components/leeg.html): vette zin, uitleg, hooguit één actie.
   De vette zin is een <p> of (blok van Start) een <h2>, met hetzelfde beeld. Compact: binnen een blok van een
   pagina (resultaten, de grafiek op Start, Team), zonder tekening en met gewone tekstgrootte. */
.v2-leeg .leeg-titel { font-size: var(--v2-t-groot); font-weight: 700; line-height: 1.3; color: var(--v2-inkt); }
.v2-leeg .leeg-titel + .leeg-uitleg { margin-top: calc(-1 * var(--v2-s2)); }
.v2-leeg--compact { gap: var(--v2-s2); padding: var(--v2-s3) 0; }
.v2-leeg--compact .leeg-titel, .v2-leeg--compact p { font-size: var(--v2-t-basis); }
.v2-leeg--compact .leeg-titel + .leeg-uitleg { margin-top: 0; }
.v2-melding { display: flex; gap: var(--v2-s3); align-items: flex-start; padding: var(--v2-s3) var(--v2-s4); border-radius: var(--v2-r-veld); font-weight: 500; }
.v2-melding .v2-ico { margin-top: 2px; }
.v2-melding--succes { background: var(--v2-succes-vlak); color: var(--v2-succes-tekst); }
.v2-melding--info { background: var(--v2-info-vlak); color: var(--v2-info-tekst); }
.v2-melding--waarsch { background: var(--v2-waarsch-vlak); color: var(--v2-waarsch-tekst); }
.v2-melding--fout { background: var(--v2-fout-vlak); color: var(--v2-fout-tekst); }
.v2-melding a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.v2-dialoog { border: 0; border-radius: var(--v2-r-vel); background: var(--v2-vel); color: var(--v2-inkt); padding: var(--v2-s5); width: min(92vw, 480px); box-shadow: var(--v2-schaduw-zweef); }
.v2-dialoog::backdrop { background: rgba(31, 42, 36, .45); }
.v2-dialoog .v2-h3 { margin-bottom: var(--v2-s3); }
.v2-dialoog .acties { display: flex; flex-direction: column; gap: var(--v2-s3); margin-top: var(--v2-s5); }
@media (min-width: 560px) { .v2-dialoog .acties { flex-direction: row; justify-content: flex-end; align-items: center; } }
.v2-balk-top { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); padding: 10px var(--v2-gutter); background: var(--v2-inkt); color: var(--v2-op-veld); font-size: var(--v2-t-klein); --v2-focus: var(--v2-focus-op-veld); --v2-focus-binnen: var(--v2-inkt); }
.v2-balk-top a { color: var(--v2-op-veld); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 15. Illustraties ---------- */
/* Geometrisch in duotoon (07 §8, zoals de iconen op de website): een zacht vlak erachter (.vlak, zonder lijn), lijnen in
   inkt van 3,4 (op 64 px ruim 2 px), vlakken met een lijn eromheen: .wit, .accent (logogroen) en .geel. De accenten lezen
   hun kleur via een eigen naam, zodat de huisstijl van een vragenlijst (§20) ze kan zetten: een custom property erft wel
   door in de <use>-kopie van de sprite, een selector op de context niet */
.v2-illu { stroke: var(--v2-inkt); fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.v2-illu .vlak { fill: var(--v2-illu-vul); stroke: none; }
.v2-illu .wit { fill: var(--v2-vel); }
.v2-illu .accent { fill: var(--v2-illu-merk); }
.v2-illu .geel { fill: var(--v2-illu-warm); }

/* ---------- 16. Print ---------- */
@media print {
  :root { --v2-papier: #fff; }
  .sidebar, .v2-top, .mobile-bottom-nav, .v2-knop, .v2-tekstknop, .v2-meer, .v2-actiebalk, .v2-balk-top { display: none !important; }
  .v2-shell { display: block; }
  .v2-main { max-width: none; padding: 0; }
  .v2-vel { box-shadow: none; border: 1px solid #bbb; }
  .v2-h1::after { display: none; }
  details.v2-details { display: block; } details.v2-details > summary { display: none; } details.v2-details > * { display: block; }
  a { color: inherit; }
}
/* Eigen regel: een browser zonder ::details-content slaat alleen deze over (results-page.js opent ze ook bij printen) */
@media print { details.v2-details::details-content { content-visibility: visible; } }

/* ---------- 17. Brug voor schermen die nog niet zijn omgezet (verdwijnt als styles.css leeg is) ---------- */
:root {
  --color-surface: var(--v2-papier);
  --color-surface-strong: var(--v2-vel);
  --color-surface-container-low: var(--v2-papier-2);
  --color-surface-container: var(--v2-papier-2);
  --color-surface-container-high: var(--v2-lijn);
  --color-text: var(--v2-inkt);
  --color-muted: var(--v2-inkt-2);
  --color-border: var(--v2-lijn);
  --color-border-strong: var(--v2-lijn-sterk);
  --color-action: var(--v2-actie);
  --color-action-hover: var(--v2-actie-hover);
  --color-link: var(--v2-actie-tekst);
  --color-text-green: var(--v2-actie-hover);
  --color-focus-ring: var(--v2-focus);
  --green-50: var(--v2-actie-vlak);
  --color-success-surface: var(--v2-succes-vlak);
  --color-success-border: var(--v2-lijn);
  --color-danger: var(--v2-gevaar);
  --message-success-bg: var(--v2-succes-vlak); --message-success-strong: var(--v2-succes-tekst);
  --message-info-bg: var(--v2-info-vlak); --message-info-strong: var(--v2-info-tekst);
  --message-warning-bg: var(--v2-waarsch-vlak); --message-warning-strong: var(--v2-waarsch-tekst);
  --message-error-bg: var(--v2-fout-vlak); --message-error-strong: var(--v2-fout-tekst);
  --shadow-soft: var(--v2-schaduw-vel);
  --shadow-hover: var(--v2-schaduw-zweef);
  --chart-color-1: var(--v2-inkt); --chart-color-2: var(--v2-actie); --chart-axis: var(--v2-inkt-2);
}
body { font-family: var(--v2-font); }
.panel { border: 0; border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-vel); }
button, .button-primary, .button-secondary, .button-danger, .button-danger-outline { border-radius: var(--v2-r-knop); background-image: none; font-family: var(--v2-font); }
.button-primary { background: var(--v2-actie); box-shadow: none; min-height: 52px; padding: 0 22px; font-size: var(--v2-t-groot); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button-primary:hover { background: var(--v2-actie-hover); }
.button-secondary { background: transparent; border-color: var(--v2-lijn-sterk); color: var(--v2-inkt); }
input, select, textarea { font-family: var(--v2-font); }

/* ---------- 18. Shell in de app (base.html): zijbalk als drawer op mobiel, accountmenu, paginakop, meldingen ---------- */
.skip-to-content { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--v2-inkt); color: var(--v2-papier); padding: 10px 14px; border-radius: var(--v2-r-veld); }
.skip-to-content:focus { left: 8px; }
.v2-balk-top.environment-banner { text-align: center; }
.sidebar-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); margin: 0 0 var(--v2-s5); }
/* De zijbalk (desktop) en de lade (mobiel) zijn het merkvlak (07 §7): veldgroen, het logo als groene tegel, tekst in
   --v2-op-veld-2 en wit voor wat actief of aangewezen is. De panelen die erin openen (organisatiekiezer) blijven wit met
   de gewone tokens. De focusring is hier wit met een veldgroene binnenring (#006E20 haalt op veldgroen maar 2:1). */
.sidebar { --v2-focus: var(--v2-focus-op-veld); --v2-focus-binnen: var(--v2-veld); }
.sidebar .sidebar-org-dropdown, .account-menu { --v2-focus: var(--v2-actie-hover); --v2-focus-binnen: var(--v2-vel); }
.sidebar .merk { display: flex; align-items: center; gap: 10px; font-weight: 800; font-style: italic; font-variation-settings: "wdth" 88; color: var(--v2-op-veld); padding: 0 var(--v2-s2); min-height: 44px; }
.sidebar .merk:hover { text-decoration: none; background: none; color: var(--v2-op-veld); }
.sidebar a:hover { text-decoration: none; background: var(--v2-veld-2); color: var(--v2-op-veld); }
/* Motief 3 (07 §4): het actieve item een vlak in veld-2 met een schuine groene balk links */
.sidebar a.is-active { position: relative; background: var(--v2-veld-2); color: var(--v2-op-veld); box-shadow: none; font-weight: 600; }
.sidebar a.sidebar-link.is-active::before { content: ""; position: absolute; left: calc(-1 * var(--v2-s4)); top: 8px; bottom: 8px; width: 5px; background: var(--v2-merk); clip-path: polygon(0 3px, 100% 0, 100% 100%, 0 calc(100% - 3px)); }
.sidebar .v2-label, .sidebar .v2-stil, .sidebar .v2-tekstknop--stil { color: var(--v2-op-veld-2); }
.sidebar .v2-tekstknop--stil:hover, .sidebar .sidebar-install-ios strong { color: var(--v2-op-veld); }
.sidebar-sluit { display: none; align-items: center; gap: 6px; min-width: var(--v2-tik); min-height: var(--v2-tik); padding: 0 var(--v2-s3); border: 0; background: none; border-radius: var(--v2-r-veld); font-weight: 600; color: var(--v2-inkt-2); cursor: pointer; }
.sidebar-sluit:hover { background: var(--v2-veld-2); color: var(--v2-op-veld); }
.sidebar .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar .sidebar-nav + .sidebar-nav { margin-top: var(--v2-s4); }
.sidebar .sidebar-link-text { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar .sidebar-link-note { font-size: 12px; color: var(--v2-op-veld-2); font-weight: 400; }
.sidebar .sidebar-bottom { margin-top: auto; padding-top: var(--v2-s3); border-top: 1px solid var(--v2-lijn-op-veld); display: flex; flex-direction: column; gap: 6px; font-size: var(--v2-t-klein); }
.sidebar .sidebar-user { display: flex; flex-direction: column; gap: 4px; padding: var(--v2-s2) var(--v2-s3); }
.sidebar .sidebar-user-name { font-weight: 600; font-size: var(--v2-t-basis); color: var(--v2-op-veld); }
.sidebar .sidebar-org { position: relative; }
.sidebar .sidebar-org-dropdown { position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 240px; background: var(--v2-vel); border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-zweef), 0 0 0 1px var(--v2-lijn); padding: 6px; z-index: 20; }
.sidebar .sidebar-logout-form, .sidebar .sidebar-install-button { margin: 0; }
.sidebar .v2-tekstknop.sidebar-logout, .sidebar .v2-tekstknop.sidebar-install-button, .sidebar .v2-tekstknop.sidebar-org-trigger { min-height: 44px; padding: 0; }
.sidebar-overlay { display: none; }
/* accountmenu (mobiel en desktop-detail): een paneel onder de avatar */
.topbar-account { position: relative; }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; background: var(--v2-vel); border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-zweef), 0 0 0 1px var(--v2-lijn); padding: var(--v2-s3); z-index: 40; }
.account-menu-head { padding: 4px 6px 10px; border-bottom: 1px solid var(--v2-lijn); margin-bottom: 8px; }
.account-menu-name { font-weight: 600; }
.account-menu-email, .account-menu-org { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); }
.account-menu-orgs { padding: 4px 0 8px; border-bottom: 1px solid var(--v2-lijn); margin-bottom: 8px; }
.account-menu form { margin: 0; }
.account-menu .v2-tekstknop { min-height: 44px; padding: 0 6px; width: 100%; justify-content: flex-start; }
/* organisatie-keuzelijst (components/org_switch_list.html) in beide panelen */
.sidebar .topbar-org-list, .account-menu .topbar-org-list { list-style: none; margin: 0; padding: 0; }
.sidebar .topbar-org-dropdown-title, .account-menu .topbar-org-dropdown-title { font-size: var(--v2-t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-inkt-2); padding: 6px; }
.sidebar .topbar-org-dropdown form, .account-menu .topbar-org-dropdown form, .sidebar .topbar-org-list form, .account-menu .topbar-org-list form { margin: 0; }
.topbar-org-option { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 8px; border: 0; background: none; border-radius: var(--v2-r-veld); font: inherit; color: var(--v2-inkt); cursor: pointer; min-height: 44px; }
.topbar-org-option:hover { background: var(--v2-papier-2); }
.topbar-org-option.is-active { font-weight: 600; }
.topbar-org-check { width: 18px; height: 18px; }
/* paginakop uit block page_head voor schermen die nog niet zijn omgezet: de h1 in sans-vet (de serif-h1 is voor Start/Team) */
.v2-kop--pagina .v2-h1--pagina { font-family: var(--v2-font); font-weight: 700; font-size: var(--v2-t-kop2); letter-spacing: -.015em; line-height: 1.1; }
.v2-kop--pagina:has(.titel > :empty) { display: none; }
.v2-kop--pagina .acties:empty { display: none; }
/* een pagina met een eigen h1 (INT-05, REG-02: topbar_title_class ' topbar-title--own-heading') houdt de paginanaam alleen voor screenreaders */
.v2-kop--pagina .topbar-title--own-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.v2-kop--pagina:has(.topbar-title--own-heading) { margin: 0; }
/* meldingen (components/messages.html, message.html) in de V2-vorm */
.messages { display: grid; gap: var(--v2-s2); margin-bottom: var(--v2-s4); }
.message { display: flex; gap: var(--v2-s3); align-items: flex-start; padding: var(--v2-s3) var(--v2-s4); border-radius: var(--v2-r-veld); font-weight: 500; border: 0; margin: 0; }
.message-success { background: var(--v2-succes-vlak); color: var(--v2-succes-tekst); }
.message-info { background: var(--v2-info-vlak); color: var(--v2-info-tekst); }
.message-warning { background: var(--v2-waarsch-vlak); color: var(--v2-waarsch-tekst); }
.message-error { background: var(--v2-fout-vlak); color: var(--v2-fout-tekst); }
.message .message-icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.message .message-text { margin: 0; }
.message a, .org-context-banner-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.org-context-banner { margin-bottom: var(--v2-s4); }
.org-context-banner-title { font-weight: 600; }
.copy-toast { position: fixed; left: 50%; bottom: calc(var(--v2-onder-hoogte) + 16px); transform: translate(-50%, 8px); background: var(--v2-inkt); color: var(--v2-papier); padding: 10px 16px; border-radius: var(--v2-r-veld); display: inline-flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity var(--v2-duur) var(--v2-ease), transform var(--v2-duur) var(--v2-ease); z-index: 60; font-weight: 500; }
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 781px) { .copy-toast { bottom: 24px; } }
/* anoniem in de app (inloggen e.d.) en respondentpagina's */
.v2-los { max-width: 480px; margin: 0 auto; padding: var(--v2-s6) var(--v2-gutter) var(--v2-s8); }
.v2-resp { max-width: 560px; margin: 0 auto; padding: 0 var(--v2-gutter) var(--v2-s8); }
/* drawer op mobiel: de zijbalk schuift van links in; dicht is hij inert (base.js) en onzichtbaar */
@media (max-width: 780px) {
  .sidebar { display: flex; flex-direction: column; gap: 2px; position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); background: var(--v2-veld); padding: var(--v2-s5) var(--v2-s4); box-shadow: var(--v2-schaduw-zweef); transform: translateX(-100%); visibility: hidden; transition: transform var(--v2-duur) var(--v2-ease), visibility 0s linear var(--v2-duur); z-index: 45; overflow-y: auto; }
  body.sidebar-open .sidebar { transform: none; visibility: visible; transition: transform var(--v2-duur) var(--v2-ease); }
  .sidebar-close { display: inline-flex; }
  .sidebar a { display: flex; align-items: center; gap: var(--v2-s3); padding: 9px var(--v2-s3); border-radius: var(--v2-r-veld); color: var(--v2-op-veld-2); font-weight: 500; min-height: 44px; }
  .sidebar .v2-label { margin: var(--v2-s5) var(--v2-s3) var(--v2-s1); }
  .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(31, 42, 36, .45); opacity: 0; pointer-events: none; transition: opacity var(--v2-duur) var(--v2-ease); z-index: 44; }
  body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
  body.sidebar-open { overflow: hidden; }
}

.v2-sprite { display: none; }

/* ---------- 19. Start (templates/dashboards/home.html) ---------- */
.start-kop .datum { text-transform: none; letter-spacing: .06em; }
.start-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s5); align-items: start; }
.start-vak--aandacht, .start-vak--andere, .start-vak--maand { margin-top: var(--v2-s2); }
@media (min-width: 981px) {
  .start-kolommen { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--v2-s5) var(--v2-s7); grid-template-areas: "verder aandacht" "andere maand"; }
  .start-vak--verder { grid-area: verder; }
  .start-vak--aandacht { grid-area: aandacht; margin-top: 0; }
  .start-vak--andere { grid-area: andere; }
  .start-vak--maand { grid-area: maand; }
  .start-kolommen:not(:has(.start-vak--aandacht)) { grid-template-areas: "verder maand" "andere maand"; }
}
/* 'Verder met' en 'Eerste stappen' (07 §9): het vlak met een streep logogroen bovenaan */
.v2-vel.start-verder, .v2-vel.start-eerste { border-top: 4px solid var(--v2-merk); }
.start-verder-status { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.start-verder-cijfers { margin: var(--v2-s4) 0 var(--v2-s5); }
.start-verder .v2-h2 a { color: inherit; }
.start-verder .v2-h2 a:hover { color: var(--v2-actie-tekst-hover); text-decoration: none; }
.start-stappen { list-style: none; margin: var(--v2-s3) 0 var(--v2-s5); padding: 0; display: grid; gap: var(--v2-s2); }
.start-stap { display: flex; align-items: center; gap: var(--v2-s3); padding: 8px 0; border-bottom: 1px solid var(--v2-lijn); }
.start-stap .nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; border: 2px solid var(--v2-inkt-3); color: var(--v2-inkt-2); flex: 0 0 auto; }
.start-stap--done .nr { background: var(--v2-inkt); border-color: var(--v2-inkt); color: var(--v2-papier); }
.start-stap--current .nr { border-color: var(--v2-actie-rand); color: var(--v2-actie-tekst); }
.start-stap--done .t { color: var(--v2-inkt-2); text-decoration: line-through; }
.start-stap--current .t { font-weight: 600; }
.start-attention-item { margin: 0; }
.start-attention-item .start-attention-link { color: var(--v2-actie-tekst); font-weight: 600; white-space: nowrap; }
.start-attention-item .start-attention-link:hover { color: var(--v2-actie-tekst-hover); }
.start-grafiek { margin-top: var(--v2-s5); }
.start-grafiek .chart-panel { padding: 0; box-shadow: none; background: transparent; border-radius: 0; }
.start-grafiek .chart-panel-title { font-size: var(--v2-t-basis); font-weight: 600; }
/* installatiehint (components/pwa_install_hint.html, base.js): één regel onderaan Start, geen kaart */
.pwa-install-hint { display: none; align-items: center; gap: var(--v2-s3); margin-top: var(--v2-s6); padding: var(--v2-s3) 0; border-top: 1px solid var(--v2-lijn); font-size: var(--v2-t-klein); color: var(--v2-inkt-2); }
.pwa-install-hint.is-visible { display: flex; flex-wrap: wrap; }
.pwa-install-icon { width: 28px; height: 28px; border-radius: 6px; }
.pwa-install-copy { flex: 1 1 200px; }
.pwa-install-copy strong { color: var(--v2-inkt); }
.pwa-install-button { min-height: 36px; padding: 0 12px; font-size: var(--v2-t-klein); }
.pwa-install-dismiss { background: none; border: 0; font-size: 20px; line-height: 1; padding: 6px 8px; cursor: pointer; color: var(--v2-inkt-2); border-radius: 6px; }
@media (min-width: 781px) { .pwa-install-hint { display: none !important; } }
.start-verder-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-s3); }

/* ---------- 20. Respondentpagina's: vragenlijst, bedankt, niet beschikbaar (templates/survey_responses/) ---------- */
/* Huisstijl van de organisatie (BL-021; besluit PO 2026-10-02: de vragenlijst voor deelnemers in de stijl van de
   organisatie, de app en de QR-codes in die van Beweeg Impact; 2026-10-05: subtiel, niet de hele pagina in de kleur). components/survey_branding_style.html vult --brand-*
   met het palet van brand_palette() (apps/organizations/branding.py, alle contrasten berekend); hier gaan ze op de
   V2-tokens. Een vlak (knop, gekozen schaalvak) krijgt de kleur zelf met --brand-on-fill erop (wit of inkt); tekst
   (link, tekstactie) --brand-text (≥ 4,5:1); een rand, keuzerondje en de voortgang --brand-border (≥ 3:1); een gekozen
   antwoord het lichte vlak --brand-surface; de focusring --brand-focus (in plaats van het vaste groen, alleen hier);
   papier wordt het neutrale lichtgrijs --brand-page (geen tint van de kleur). De rand van een veld of antwoordvak
   blijft grijs (--v2-lijn-sterk): alleen het gekozen antwoord en het veld met focus krijgen de kleur, zodat de keuze
   opvalt (besluit PO 2026-10-05). Ook de V1-namen die de brug (§17) en styles.css nog lezen, want een
   custom property wordt opgelost waar hij staat: zonder deze regels bleef bv. een rand of gloed groen.
   Alleen met eigen kleuren: base.html zet dan data-huisstijl="eigen" op <body> (op ORG-02 en in de dialogen op het
   voorbeeld zelf, brand-preview.js). De koppeling geldt alleen binnen .survey-branding-vars (de balk bovenaan, de
   vragenlijst, de dialoog 'Stoppen') en voor de paginakleur op body.v2-deelnemer; de balken van Beweeg Impact
   (medewerker, voorbeeld, deelnemersmodus) staan erbuiten. Zonder eigen kleuren gelden de V2-tokens zelf. */
[data-huisstijl="eigen"] .survey-branding-vars, .survey-branding-vars[data-huisstijl="eigen"] {
  --v2-actie: var(--brand-fill); --v2-actie-hover: var(--brand-fill-hover); --v2-op-actie: var(--brand-on-fill);
  --v2-actie-tekst: var(--brand-text); --v2-actie-tekst-hover: var(--brand-text); --v2-actie-rand: var(--brand-border);
  --v2-actie-vlak: var(--brand-surface); --v2-papier: var(--brand-page); --v2-focus: var(--brand-focus);
  --color-action: var(--brand-fill); --color-action-hover: var(--brand-fill-hover); --color-on-action: var(--brand-on-fill);
  --color-action-border: var(--brand-border); --color-link: var(--brand-text); --color-text-green: var(--brand-text);
  --color-focus-ring: var(--brand-focus); --color-primary: var(--brand-fill); --color-primary-dark: var(--brand-fill-hover);
  --color-primary-rgb: var(--brand-primary-rgb); --green-50: var(--brand-surface); --color-surface: var(--brand-page);
  --v2-illu-warm: var(--brand-band); --v2-illu-merk: var(--brand-border); --v2-illu-vul: var(--brand-surface);
}
/* Elke vragenlijst voor deelnemers staat op hetzelfde neutrale lichtgrijs, met en zonder eigen kleuren (besluit PO
   2026-10-05, 07 §10): de witte keuzevlakken komen zo overal los. Papier wordt hier dat grijs, ook voor de plakkende
   actierij; met eigen kleuren zet §20 hierboven papier op --brand-page (dezelfde waarde). */
body.v2-deelnemer { --v2-papier: var(--v2-deelnemer-pagina); background: var(--v2-papier); }
body.v2-deelnemer[data-huisstijl="eigen"] { background: var(--brand-page); }
/* De voortgang 'Vraag 3 van 9' in de kleur (rand-tint ≥ 3:1 op het lichte vlak); zonder eigen kleur inkt op papier-2 */
[data-huisstijl="eigen"] .survey-voortgang .balk { background: var(--brand-surface); }
[data-huisstijl="eigen"] .survey-voortgang .balk > i { background: var(--brand-border); }
/* De balk bovenaan (survey_responses/_survey_band.html): wie de vragen stelt. Zonder eigen kleuren de kop van V2 (het
   logo op een wit vel, de naam schuin in de serif), in de kolom van de vragenlijst; met eigen kleuren een witte balk
   over de hele breedte met de naam in inkt en onderaan een smalle streep in de tweede kleur (--brand-band, besluit PO
   2026-10-05: subtiel, geen gekleurd vlak). Niet hoger dan nodig. */
.survey-band { padding: var(--v2-s5) var(--v2-gutter) 0; }
.survey-band-inhoud { max-width: calc(560px - 2 * var(--v2-gutter)); margin: 0 auto; display: flex; align-items: center; gap: var(--v2-s3); min-width: 0; }
.survey-band-tekst { min-width: 0; }
.survey-band .survey-header-org { overflow-wrap: anywhere; }
[data-huisstijl="eigen"] .survey-band { background: var(--v2-vel); color: var(--v2-inkt); border-bottom: 4px solid var(--brand-band); padding: var(--v2-s3) var(--v2-gutter); }
[data-huisstijl="eigen"] .survey-band .survey-branding-logo { box-shadow: none; }
[data-huisstijl="eigen"] .survey-band + .v2-resp .survey-header { padding-top: var(--v2-s5); }
.survey-wrapper { max-width: 560px; margin: 0 auto; }
/* De balken van Beweeg Impact boven een vragenlijst (medewerker, voorbeeld, deelnemersmodus) zijn veldgroen (besluit PO
   2026-10-05, 07 §10): herkenbaar Beweeg Impact en los van de stijl van de organisatie eronder */
.staff-respondent-bar, .survey-preview-bar > .v2-balk-top { background: var(--v2-veld); color: var(--v2-op-veld); --v2-focus: var(--v2-focus-op-veld); --v2-focus-binnen: var(--v2-veld); }
.staff-respondent-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); padding: 10px var(--v2-gutter); font-size: var(--v2-t-klein); }
.staff-respondent-bar .staff-respondent-bar-text { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.staff-respondent-bar strong { font-weight: 600; }
.survey-header { padding: var(--v2-s4) 0; }
.survey-branding-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--v2-vel); box-shadow: var(--v2-schaduw-vel); padding: 6px; }
.survey-header-org { font-weight: 700; font-style: italic; font-variation-settings: "wdth" 88; font-size: var(--v2-t-kop3); line-height: 1.15; }
.survey-header-activity { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); }
.survey-header h1 { font-size: var(--v2-t-kop2); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.survey-intro { color: var(--v2-inkt-2); margin-top: var(--v2-s2); }
.survey-badge { font-weight: 600; color: var(--v2-inkt); }
.survey-belofte { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--v2-s3); font-size: var(--v2-t-klein); color: var(--v2-inkt-2); }
.survey-wrapper .message { margin-bottom: var(--v2-s4); }
.survey-error-summary-title { font-size: var(--v2-t-basis); font-weight: 600; margin: 0 0 4px; }
.survey-error-summary-note { margin: 4px 0; }
.survey-error-summary-list { margin: 6px 0 0; padding-left: 20px; }
.survey-error-summary:focus-visible { --v2-focus: var(--v2-fout-tekst); }
.survey-voortgang { margin-bottom: var(--v2-s4); }
/* de vraag: geen kader, geen nummerbolletje (het nummer zit in 'Vraag 3 van 9'); zonder stappenlaag staan ze onder elkaar met een lijn */
.survey-question { scroll-margin-top: 1rem; }
.survey-alle-vragen .survey-question { padding: var(--v2-s5) 0; border-bottom: 1px solid var(--v2-lijn); }
.survey-alle-vragen .survey-question:first-of-type { border-top: 1px solid var(--v2-lijn); }
.survey-stappen--actief .survey-question { animation: v2-in var(--v2-duur) var(--v2-ease) both; }
.survey-q-number { display: none; }
.survey-alle-vragen .survey-q-number { display: block; font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-kop3); color: var(--v2-inkt-2); margin-bottom: 4px; }
.survey-q-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.survey-q-label { display: block; font-size: var(--v2-t-kop2); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin-bottom: var(--v2-s3); }
.survey-required { display: none; }
.survey-optioneel { font-size: var(--v2-t-klein); font-weight: 500; color: var(--v2-inkt-2); letter-spacing: 0; }
.survey-q-help { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); margin: -6px 0 var(--v2-s3); }
.survey-q-error, .survey-q-stapfout { color: var(--v2-fout-tekst); font-weight: 600; margin: 0 0 var(--v2-s3); display: flex; gap: 6px; align-items: flex-start; }
.survey-q-stapfout { margin: var(--v2-s3) 0 0; }
.survey-q--error .survey-q-input, .survey-q--stapfout .survey-q-input { box-shadow: -3px 0 0 var(--v2-fout-tekst); padding-left: 12px; }
/* keuzes: Django rendert <div><div><label><input>Tekst</label></div></div>; elke keuze is een vlak van 56 px */
.survey-q-input > div { display: grid; gap: var(--v2-s2); }
.survey-q-input > div > div > label { display: flex; align-items: center; gap: var(--v2-s3); min-height: 56px; padding: 0 var(--v2-s4); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); cursor: pointer; font-size: var(--v2-t-groot); }
.survey-q-input > div > div > label:has(input:checked) { border-color: var(--v2-actie-rand); box-shadow: inset 0 0 0 1px var(--v2-actie-rand); background: var(--v2-actie-vlak); }
.survey-q-input > div > div > label:has(> input:focus-visible) { outline: var(--v2-focus-dikte) solid var(--v2-focus); outline-offset: var(--v2-focus-afstand); }
.survey-q-input > div > div > label > input { width: 22px; height: 22px; accent-color: var(--v2-actie-rand); margin: 0; flex: 0 0 auto; }
/* schaal 1-5 en 1-10: vakken op één rij, het cijfer groot, gekozen = gevuld in de huisstijl */
.survey-q--scale_1_5 .survey-q-input > div, .survey-q--scale_1_10 .survey-q-input > div, .survey-q--yes_no .survey-q-input > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.survey-q--yes_no .survey-q-input > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.survey-q--scale_1_5 .survey-q-input > div > div > label, .survey-q--scale_1_10 .survey-q-input > div > div > label, .survey-q--yes_no .survey-q-input > div > div > label { justify-content: center; padding: 0; min-height: 60px; font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-kop2); }
.survey-q--yes_no .survey-q-input > div > div > label { font-family: var(--v2-font); font-size: var(--v2-t-kop3); font-weight: 600; min-height: 64px; }
.survey-q--scale_1_5 .survey-q-input > div > div > label > input, .survey-q--scale_1_10 .survey-q-input > div > div > label > input, .survey-q--yes_no .survey-q-input > div > div > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.survey-q--scale_1_5 .survey-q-input > div > div > label:has(input:checked), .survey-q--scale_1_10 .survey-q-input > div > div > label:has(input:checked), .survey-q--yes_no .survey-q-input > div > div > label:has(input:checked) { background: var(--v2-actie); color: var(--v2-op-actie); border-color: var(--v2-actie); box-shadow: none; }
@media (max-width: 480px) { .survey-q--scale_1_10 .survey-q-input > div { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* getal en tekst */
.survey-question input[type="number"], .survey-question textarea { font: inherit; font-size: var(--v2-t-groot); color: var(--v2-inkt); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); padding: 12px 14px; min-height: var(--v2-tik); width: 100%; }
.survey-question input[type="number"] { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-cijfer); text-align: center; max-width: 240px; }
.survey-question textarea { min-height: 120px; resize: vertical; }
.survey-question input:focus-visible, .survey-question textarea:focus-visible { border-color: var(--v2-focus); }
/* matrix (tabel met stellingen): op smal scherm kaarten, op breed een rooster */
.survey-matrix { display: grid; gap: var(--v2-s3); }
.survey-matrix-head { display: none; }
.survey-matrix-row { background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); padding: var(--v2-s3) var(--v2-s4); }
.survey-matrix-row-label { display: block; font-weight: 600; margin-bottom: var(--v2-s2); }
.survey-matrix-row-missing { display: block; color: var(--v2-fout-tekst); font-size: var(--v2-t-klein); font-weight: 600; }
.survey-matrix-options { display: grid; gap: 6px; }
.survey-matrix-option { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.survey-matrix-option > input { width: 22px; height: 22px; accent-color: var(--v2-actie-rand); margin: 0; }
.survey-matrix-option:has(> input:focus-visible) { outline: var(--v2-focus-dikte) solid var(--v2-focus); outline-offset: 2px; border-radius: 4px; }
.survey-matrix-row--fout { border-color: var(--v2-fout-tekst); }
@media (min-width: 601px) {
  .survey-matrix-head { display: flex; gap: 6px; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); text-align: center; padding: 0 var(--v2-s3); }
  .survey-matrix-corner { flex: 2 1 0; }
  .survey-matrix-col { flex: 1 1 0; }
  .survey-matrix-row { display: flex; gap: 6px; align-items: center; padding: var(--v2-s2) var(--v2-s3); }
  .survey-matrix-row-label { flex: 2 1 0; margin: 0; }
  .survey-matrix-options { display: flex; flex: var(--matrix-kolommen, 3) 1 0; gap: 6px; }
  .survey-matrix-option { flex: 1 1 0; justify-content: center; }
  .survey-matrix-option-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* versturen en de stappen-navigatie */
.survey-submit { margin-top: var(--v2-s5); display: grid; gap: var(--v2-s3); }
.survey-actierij { display: grid; gap: var(--v2-s3); }
.offline-form-live:empty { display: none; }
.survey-stapnav { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s4); }
.survey-stapnav .survey-verder { margin-left: auto; }
.survey-versturen { justify-self: end; }
/* Met de stappenlaag (besluit PO 2026-09-28): de actierij plakt onderaan het scherm, zodat 'Verder' en 'Versturen' op
   elke stap in beeld staan zonder scrollen, ook bij een lange wijklijst en met de balk van de medewerker, het voorbeeld
   of de deelnemersmodus erboven (die scrollen mee). .survey-submit valt dan weg als vak (display: contents), zodat het
   formulier het blok is waarbinnen de rij plakt; aan het eind van het formulier staat hij op zijn eigen plek, boven de
   privacyregel. Eén rij: 'Terug' links, 'Verder' of 'Versturen' rechts. Papier met een lijn en een zachte schaduw erboven;
   de knop houdt de huisstijl. Geen beweging, dus niets extra's voor prefers-reduced-motion. */
.survey-stappen--actief .survey-submit { display: contents; }
.survey-stappen--actief .survey-actierij { position: sticky; bottom: 0; z-index: 5; margin: var(--v2-s5) calc(-1 * var(--v2-gutter)) 0; padding: var(--v2-s3) var(--v2-gutter) calc(var(--v2-s3) + env(safe-area-inset-bottom, 0px)); background: var(--v2-papier); border-top: 1px solid var(--v2-lijn); box-shadow: var(--v2-schaduw-balk); display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s3) var(--v2-s4); }
.survey-stappen--actief .survey-actierij > .offline-form-live { flex: 1 0 100%; }
.survey-stappen--actief .survey-stapnav { flex: 1 1 auto; }
.survey-stappen--actief .survey-versturen { flex: 1 1 12rem; }
.survey-stappen--actief .survey-preview-submit-note, .survey-stappen--actief .survey-privacy-note { margin-top: var(--v2-s3); }
/* Een antwoord dat met Tab de focus krijgt, schuift de browser boven de rij (WCAG 2.4.11 'focus niet bedekt') */
html:has(.survey-stappen--actief) { scroll-padding-bottom: calc(var(--v2-stapbalk-hoogte) + var(--v2-s4) + env(safe-area-inset-bottom, 0px)); }
.survey-preview-submit-note { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); }
.survey-privacy-note { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); text-align: center; display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: var(--v2-s2); }
.survey-preview-bar .link-status-warning { max-width: calc(560px - 2 * var(--v2-gutter)); margin: var(--v2-s3) auto 0; }
.survey-preview-bar .survey-preview-message .message-text { margin: 0; }
.survey-preview-bar .survey-preview-back { margin-left: 8px; }
/* bedankt en niet beschikbaar */
.survey-thanks { text-align: center; padding: var(--v2-s7) 0; }
.survey-thanks-illu { width: 140px; height: 140px; margin: 0 auto var(--v2-s4); }
.survey-thanks h1 { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 82; font-size: 3rem; line-height: 1; letter-spacing: -.02em; }
.survey-thanks-lead { color: var(--v2-inkt-2); font-size: var(--v2-t-groot); margin-top: var(--v2-s3); }
.survey-thanks p + p { margin-top: var(--v2-s2); }
.survey-thanks-actions { margin-top: var(--v2-s5); display: flex; flex-direction: column; align-items: center; gap: var(--v2-s3); }
.survey-unavailable-inhoud { padding-top: var(--v2-s6); justify-items: start; }
.survey-unavailable-inhoud h1 { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 82; font-size: 2.25rem; line-height: 1.05; letter-spacing: -.02em; }
.device-mode-stop { margin-top: var(--v2-s6); text-align: center; }
.device-mode-stop-button { color: var(--v2-inkt-2); font-weight: 500; }
/* 'Stoppen met invullen op dit toestel?' zonder JavaScript (device_mode_stop.html): de vraag, één zin, 'Doorgaan met
   invullen' als de ene knop (in de huisstijl) en 'Stoppen' als tekstknop eronder */
.device-mode-stop-confirm { padding: var(--v2-s6) 0; text-align: center; }
.device-mode-stop-confirm p { margin: var(--v2-s3) auto 0; max-width: 40ch; color: var(--v2-inkt-2); }
.device-mode-stop-confirm-actions { margin-top: var(--v2-s5); display: flex; flex-direction: column; align-items: center; gap: var(--v2-s3); }
@media (min-width: 781px) { .device-mode-stop-confirm-actions .v2-knop--breed { width: auto; min-width: 240px; } }

/* ---------- 21. De eerste minuut en de randen: inloggen, uitloggen, foutpagina's, offline, geen organisatie ---------- */
.login-vel { display: grid; gap: var(--v2-s3); }
/* In de app-shell (ingelogd: AUTH-03, uitloggen) net als anoniem één smal vel in het midden (BL-097) */
.v2-main > .login-vel { max-width: 480px; margin: var(--v2-s6) auto; }
.login-vel .merk { display: flex; align-items: center; gap: 10px; font-weight: 800; font-style: italic; font-variation-settings: "wdth" 88; margin-bottom: var(--v2-s2); }
.login-vel .v2-h2 { margin: 0; }
.login-vel .login-icoon { color: var(--v2-inkt-2); }
.login-vel .v2-veld { margin: var(--v2-s2) 0 var(--v2-s3); }
.login-vel .v2-veld label { font-weight: 600; }
.login-vel .v2-veld input { font: inherit; font-size: var(--v2-t-groot); color: var(--v2-inkt); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); padding: 12px 14px; min-height: var(--v2-tik); width: 100%; }
.login-vel .v2-veld input:focus-visible { border-color: var(--v2-focus); }
.login-vel .message { margin: 0; }
.login-sent-intro { margin: 0; }
.login-sent-address { font-weight: 600; font-size: var(--v2-t-groot); word-break: break-all; margin: -8px 0 0; }
.login-sent-address--inline, .address-inline { font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.login-sent-tips { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--v2-inkt-2); }
.login-sent-tips a { font-weight: 600; }
.login-vel .v2-acties { margin-top: var(--v2-s2); }
.login-confirm-note { margin: 0; }
.logout-confirm-email { font-weight: 600; overflow-wrap: anywhere; }
.logout-confirm form { margin: var(--v2-s2) 0 0; }
/* foutpagina's: buiten de app (errors/base_error.html) en binnen de shell */
body.error-page { background: var(--v2-papier); }
.error-header { max-width: 640px; margin: 0 auto; padding: var(--v2-s5) var(--v2-gutter) 0; }
.error-header .merk { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-style: italic; font-variation-settings: "wdth" 88; color: var(--v2-inkt); }
.error-main { max-width: 640px; margin: 0 auto; padding: var(--v2-s5) var(--v2-gutter) var(--v2-s8); }
.error-state { max-width: 46ch; }
.error-title { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 82; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; color: var(--v2-inkt); }
.error-message, .error-submessage { color: var(--v2-inkt-2); font-size: var(--v2-t-groot); margin: 0; }
.error-message { color: var(--v2-inkt); }
.error-submessage a { font-weight: 600; }
.error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s3) var(--v2-s5); margin-top: var(--v2-s2); }
.error-actions form { margin: 0; }
.error-page .v2-tekstknop { min-height: 44px; }
.survey-csrf h1 { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 82; font-size: 2.25rem; line-height: 1.05; letter-spacing: -.02em; }
.survey-csrf-actions { margin-top: var(--v2-s2); }
.no-organization-state { padding-top: var(--v2-s4); }
body.offline-page .offline-card .error-title { font-size: 2.5rem; }
.offline-buffer-note { color: var(--v2-inkt-2); }
.offline-buffer-note b { color: var(--v2-inkt); }
.login-vel h1, .login-vel h2 { font-size: var(--v2-t-kop2); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.sidebar .sidebar-logout, .sidebar .sidebar-install-button, .account-menu .account-menu-logout { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-inkt-2); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; min-height: 44px; font: inherit; }
.sidebar .sidebar-logout:hover, .account-menu .account-menu-logout:hover { color: var(--v2-inkt); text-decoration: underline; }
.sidebar .sidebar-logout, .sidebar .sidebar-install-button { color: var(--v2-op-veld-2); }
.sidebar .sidebar-logout:hover { color: var(--v2-op-veld); }
.account-menu .account-menu-logout { width: 100%; padding: 0 6px; color: var(--v2-actie-tekst); font-weight: 600; }
.sidebar .sidebar-install-button { padding: 0 var(--v2-s3); }
.mobile-bottom-nav .is-active { color: var(--v2-inkt); }
.mobile-bottom-nav .is-active .v2-ico { stroke: var(--v2-actie); }

/* ---------- 22. Interventie, bijeenkomst, delen (batch V2-2: INT-01, INT-05, REG-01, REG-02/03, REG-04, INT-06, deel-scherm) ---------- */
/* kop van de interventie (templates/interventions/_intervention_head.html) */
.int-kop { align-items: flex-start; }
.int-kop .v2-h1 { font-family: var(--v2-font); font-weight: 700; font-size: var(--v2-t-kop2); letter-spacing: -.015em; line-height: 1.1; overflow-wrap: anywhere; }
@media (min-width: 781px) { .int-kop .v2-h1 { font-size: 2.25rem; } }
.int-kop .acties { align-items: center; gap: var(--v2-s3); }
.int-kop-tekst { min-width: 0; }
.int-meta { color: var(--v2-inkt-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 6px; }
.int-stap-eigen { font-weight: 400; color: var(--v2-inkt-2); }
.int-cijfers { margin: var(--v2-s5) 0 var(--v2-s3); }
.int-resultaten { margin: 0 0 var(--v2-s3); }
.int-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s5); }
@media (min-width: 981px) {
  .int-kolommen { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--v2-s7); align-items: start; }
  .int-rechts { position: sticky; top: var(--v2-s5); }
}
.int-rechts .v2-sectie:first-child { margin-top: 0; }
.int-omschrijving { margin-top: var(--v2-s2); }
.int-vragenlijsten { margin-top: var(--v2-s2); }
.int-vaste-qr-actie { margin-top: var(--v2-s2); }
.int-verloop-kop { margin-top: var(--v2-s4); }
/* Mobiel compacter (2026-10-07, kerntaak T9): sinds de huid 'In beweging' (de zwiep onder de h1, 20 px) viel
   'Alle N registraties ›' bij de kop van 'Verloop' op 390x844 net onder de onderbalk, met de regel 'eerste keer hier'
   erboven; 'Wijzigen' bij een oudere registratie kostte dan scrollen. 32 px minder lucht, niets weg: de kop 12 in plaats
   van 16 px, boven de cijfers 16 in plaats van 24, en 'Verloop' zonder eigen marge (de 12 px onder 'Resultaten ›'
   scheidt al). */
@media (max-width: 780px) {
  .int-kop { margin-bottom: var(--v2-s3); }
  .int-cijfers { margin-top: var(--v2-s4); }
  .int-verloop-kop { margin-top: 0; }
}
/* het verloop (templates/interventions/_timeline.html) */
.v2-stap .titel a { color: inherit; }
/* de naam of het aantal als link: op elke breedte een aanraakdoel van minstens 24 px (WCAG 2.5.8, M8; mobiel al in styles.css) */
a.item-link { display: inline-flex; align-items: center; min-height: 24px; }
.v2-stap .titel a:hover { color: var(--v2-actie-tekst-hover); text-decoration: none; }
.v2-stap .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.v2-stap .sub .v2-status { white-space: normal; }
.v2-stap .int-notitie { font-style: italic; }
.v2-stap.is-shared { scroll-margin-top: 1rem; }
.v2-stap.is-shared > .titel::after { content: " · nu delen"; color: var(--v2-actie-tekst); font-weight: 600; }
.int-stap-vel .v2-acties { margin: 0; justify-content: space-between; }
.int-eerder { color: inherit; }
.v2-stap--periode a:hover { color: var(--v2-actie-tekst-hover); }
/* de lijst met interventies (INT-01) */
.int-lijst .v2-rij .rechts { flex-wrap: wrap; justify-content: flex-end; gap: var(--v2-s3) var(--v2-s4); }
@media (max-width: 780px) { .int-rij-meta { display: none; } }
/* BL-054: afgeronde en gearchiveerde interventies onder het lopende werk, achter een uitklapper */
.int-afgerond { margin-top: var(--v2-s5); }
.int-afgerond > .int-lijst { margin-top: var(--v2-s2); }
.int-geen-lopend { margin: 0 0 var(--v2-s2); }
@media (max-width: 600px) {
  .v2-rij--int { flex-direction: column; align-items: stretch; }
  .v2-rij--int .rechts { justify-content: flex-start; }
}
/* registreren (REG-02/03) */
/* het formulier zelf volgt .v2-formulier (§31): breedte, velden, actiebalk */
.reg-form .v2-veld.reg-veld--aantal input:not([type="checkbox"]):not([type="radio"]) { font-feature-settings: "tnum" 1; }
.reg-form .registration-date-period, .reg-form .registration-date-same { margin-top: 6px; }
.reg-form .registration-same-day .message-text { margin: 0; }
.reg-optioneel { font-weight: 400; }
.reg-verwijderen { margin-top: var(--v2-s7); padding-top: var(--v2-s4); border-top: 1px solid var(--v2-lijn); max-width: var(--v2-formulier-max); }
.reg-verwijderen form { margin-top: var(--v2-s2); }
/* het vakje 'Ook de N ingevulde vragenlijsten … verwijderen' (PO 2026-09-28), in de dialoog en op de bevestigingspagina */
.reg-verwijder-keuze { margin: var(--v2-s3) 0; }
.reg-verwijder-vinkje { display: flex; align-items: flex-start; gap: var(--v2-s2); min-height: var(--v2-tik); padding: 10px 0; cursor: pointer; font-weight: 600; }
.reg-verwijder-vinkje input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--v2-actie-rand); }
.reg-verwijder-hint { margin: 0 0 0 calc(22px + var(--v2-s2)); }
/* de bevestiging (REG-04) en het deel-scherm */
.deel-pagina { max-width: 480px; margin: 0 auto; }
.deel-pagina .v2-h2 { text-align: center; }
.deel-pagina .v2-kruimel { display: inline-flex; }
.bevestig-melding { margin: var(--v2-s3) 0 var(--v2-s5); }
.bevestig-regel { margin: var(--v2-s3) 0 var(--v2-s4); text-align: center; }
.bevestig-notitie { margin-top: -8px; margin-bottom: var(--v2-s4); text-align: center; }
.v2-deel > .v2-melding { text-align: left; width: 100%; }
.v2-deel img.v2-qr { height: auto; }
.v2-deel .v2-acties { justify-content: center; margin-top: 0; }
.v2-deel .v2-knop--breed { max-width: 420px; }
.v2-deel form { width: 100%; display: flex; justify-content: center; }
.v2-deel .share-item-link { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.v2-deel .share-url-input { font: inherit; font-size: var(--v2-t-klein); color: var(--v2-inkt); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); padding: 10px 12px; width: 100%; }
.v2-deel .share-copy-failed:empty { display: none; }
.v2-deel .share-copy-failed { width: 100%; text-align: left; }
.deel-context { margin-bottom: -8px; }
.deel-status { margin-top: -4px; }
.deel-andere { width: 100%; text-align: left; margin-top: var(--v2-s3); }
.deel-andere .v2-lijst { margin-top: var(--v2-s2); }
.deel-sluiten { margin-top: var(--v2-s3); }
.bevestig-klaar { margin-top: var(--v2-s2); }
/* vragenlijst kiezen (INT-06) */
.int06-form { max-width: 640px; }
.int06-titel { font-family: var(--v2-font); font-weight: 700; font-size: var(--v2-t-kop2); letter-spacing: -.015em; line-height: 1.1; }
.int06-form .v2-keuze { margin: var(--v2-s4) 0; border: 0; padding: 0; }
.v2-keuze label .tekst { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; min-width: 0; }
.v2-keuze label .tekst b { font-weight: 600; }
.survey-select-current { margin: var(--v2-s3) 0; padding: var(--v2-s3) var(--v2-s4); background: var(--v2-vlak); border-radius: var(--v2-r-veld); }
.survey-select-current-line { margin: 0; }
.survey-select-current-line + .survey-select-current-line { margin-top: 6px; }

/* ---------- 23. Resultaten als verhaal (batch V2-3: DASH-02, templates/dashboards/intervention_detail.html) ---------- */
.res-sub { margin-top: 4px; }
.res-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s6); }
@media (min-width: 981px) {
  .res-kolommen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--v2-s7); align-items: start; }
  .res-zij { position: sticky; top: var(--v2-s5); }
}
.res-zij nav { display: flex; flex-direction: column; }
.res-zij nav a { display: block; padding: 6px 0; color: var(--v2-inkt-2); border-bottom: 1px solid var(--v2-lijn); font-weight: 500; }
.res-zij nav a:hover { color: var(--v2-inkt); text-decoration: none; }
.res-zij .v2-sectie > .v2-label { display: block; }
.res-cijfers { margin: var(--v2-s5) 0 0; }
.res-cijfers .l .res-uitsplitsing { display: block; font-size: 12px; margin-top: 2px; }
.res-kpis { display: flex; flex-wrap: wrap; gap: var(--v2-s2) var(--v2-s5); margin: var(--v2-s4) 0 0; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); }
.res-kpis b { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-groot); color: var(--v2-inkt); }
.res-bronnen { margin: 0 0 var(--v2-s2); }
.res-bronnen-noot { display: block; margin-top: 4px; }
/* in de lopende regel, maar een aanraakdoel van minstens 24 px (WCAG 2.5.8, M8) */
.res-bron .v2-tekstknop { min-height: 24px; padding: 0 2px; }
.v2-resultaat .res-vraag { min-width: 0; }
.v2-resultaat .vraag { font-family: var(--v2-font); font-size: var(--v2-t-basis); font-weight: 600; line-height: 1.35; margin: 0; }
.v2-resultaat .sub { margin: 2px 0 0; }
/* 'In hun woorden' breekt niet over twee regels: één vak dat in beeld schuift en één focusring (M9) */
.v2-resultaat .sub a { white-space: nowrap; }
.v2-resultaat .oordeel .v2-verschil { vertical-align: middle; margin-left: 2px; }
.v2-resultaat .oordeel--tekst { white-space: normal; text-align: right; max-width: 18rem; font-size: var(--v2-t-kop3); line-height: 1.15; }
svg.v2-balk { display: block; width: 100%; height: 10px; background: var(--v2-papier-2); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.v2-balk .vul { fill: var(--v2-inkt); }
.v2-balk--start .vul { fill: var(--v2-inkt-3); }
.v2-balk--eind .vul { fill: var(--v2-actie); }
.v2-balken .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-balken .antwoord { overflow-wrap: anywhere; }
.v2-balken--paar .antwoord--eind { min-height: 1px; }
.res-legenda { margin: 6px 0 0; }
.v2-resultaat .details { margin-top: 2px; }
.v2-resultaat .details > summary { min-height: 32px; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); }
.v2-resultaat .details > summary:hover, .v2-resultaat .details[open] > summary { color: var(--v2-inkt); }
.v2-resultaat .details .question-result { margin-top: var(--v2-s2); }
/* 'Per bijeenkomst' (BL-151): een benoemd scrollvak; aan de kant waar nog meer staat een schaduw als hint. Twee vlakken in
   de paginakleur schuiven mee met de inhoud (background-attachment: local) en dekken de schaduw af aan het eind. */
.v2-tabel-vak { overflow-x: auto; position: relative; background: linear-gradient(to right, var(--v2-papier) 30%, transparent) left center / 2.5rem 100% no-repeat local, linear-gradient(to left, var(--v2-papier) 30%, transparent) right center / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(31, 42, 36, .28), transparent) left center / .85rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(31, 42, 36, .28), transparent) right center / .85rem 100% no-repeat scroll; }
.res-bijeenkomsten th.num, .res-bijeenkomsten td.num { padding-left: var(--v2-s3); }
@media (max-width: 600px) { .res-bijeenkomsten th { letter-spacing: .02em; } .res-bijeenkomsten th.num, .res-bijeenkomsten td.num { padding-left: var(--v2-s2); } }
.res-bijeenkomsten td a { color: inherit; font-weight: 600; }
.res-bijeenkomsten tr { scroll-margin-top: var(--v2-s6); }
.res-bijeenkomsten tr:target > td { background: var(--v2-actie-vlak); }
.res-bijeenkomsten .laag { color: var(--v2-gevaar); font-weight: 600; }
/* PO 2026-10-02: 'Via de vaste QR-code' en 'Van verwijderde registraties' onder de registraties: gewone tekst, een lijn erboven */
.res-bijeenkomsten-extra th { font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--v2-inkt-2); padding: 12px 0; border-bottom: 1px solid var(--v2-lijn); vertical-align: top; }
.res-bijeenkomsten-extra tr:first-child > * { border-top: 2px solid var(--v2-lijn); }
.res-meer { margin-top: var(--v2-s2); }
.res-meer > .v2-tabel { margin-top: var(--v2-s2); }
.res-citaten { display: grid; gap: var(--v2-s2); }
.res-citaten .v2-citaat { margin: 0; font-size: var(--v2-t-groot); }
.res-meer .res-citaten { margin-top: var(--v2-s2); }
.res-leeg { margin-top: var(--v2-s2); }  /* de compacte lege staat ({% leeg %}, BL-161) */
.res-maanden { display: block; width: 100%; height: 80px; margin-top: var(--v2-s2); }
.res-maanden rect { fill: var(--v2-inkt); }
.res-maanden rect.nu { fill: var(--v2-actie); }
.res-maanden-labels { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 12px; color: var(--v2-inkt-2); text-align: center; margin-top: 4px; }
@media (max-width: 600px) {
  .v2-resultaat .oordeel { font-size: var(--v2-t-kop3); }
  /* Het antwoord krijgt de meeste ruimte, zodat 'Binnenstad' niet midden in het woord breekt (afbreken alleen met een
     streepje, hyphens) */
  .v2-balken { grid-template-columns: minmax(0, 3fr) minmax(56px, 2fr) auto; }
  .v2-balken .antwoord { overflow-wrap: break-word; hyphens: auto; }
  /* Een oordeel in woorden ('vooral <lang antwoord>') kneep de vraag tot één woord per regel: op mobiel staat het onder
     de vraag, over de hele breedte (PO 2026-10-02) */
  .v2-resultaat:has(> .oordeel--tekst) { grid-template-columns: minmax(0, 1fr); }
  .v2-resultaat .oordeel--tekst { text-align: left; max-width: none; overflow-wrap: break-word; }
}
.res-alleen > .v2-resultaat:first-of-type { margin-top: var(--v2-s2); }
@media print {
  .res-kop .acties, .res-zij nav { display: none !important; }
  .res-kolommen { display: block; }
  .v2-resultaat { break-inside: avoid; }
}

/* ---------- 24. Vragenlijsten en de editor (batch V2-4: VL-01, VL-03) ---------- */
.vl-kop { margin-bottom: var(--v2-s3); }
.vl-lijst .v2-rij .naam { font-size: var(--v2-t-groot); }
.vl-standaard { margin-top: var(--v2-s3); }
.vl-page-status { margin: 0 0 var(--v2-s2); }
/* BL-086: 'Soort vragenlijst' op VL-02 en 'Naam en soort wijzigen' als keuzevlakken (.v2-keuze) met per soort wanneer
   deelnemers hem invullen; geen voorselectie. Ligt de soort vast, dan de soort als tekst met de reden. */
.vl-soort { margin: var(--v2-s4) 0; padding: 0; border: 0; min-width: 0; }
.vl-soort > legend { padding: 0; }
.vl-soort > .hulp { margin: 0 0 var(--v2-s1); }
/* de tekst volgt .v2-keuze label .tekst (INT-06: naam vet, eronder klein de uitleg); het rondje op de regel van de naam */
.vl-soort-keuzes label { align-items: flex-start; font-size: var(--v2-t-basis); }
.vl-soort-keuzes input { margin-top: 13px; flex: none; }
.vl-soort-keuze .uitleg { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); }
/* niets gekozen na versturen (§30): de rand van de keuzes rood, de melding staat eronder */
.vl-soort-keuzes:has(input[aria-invalid="true"]) label { border-color: var(--v2-fout-tekst); }
.vl-soort-titel { margin: 0; font-weight: 600; }
.vl-soort-nu { margin: 0; }
.vl-soort-reden { margin-top: var(--v2-s1); }
.ed-kop { margin-bottom: var(--v2-s4); }
.ed-kop-tekst { min-width: 0; }
.ed-sub { margin-top: 6px; }
.ed-omschrijving { margin-top: 6px; max-width: 60ch; }
.ed-noot { margin-top: 6px; max-width: 60ch; }
.ed-kop .acties { position: relative; flex-wrap: wrap; }
.ed-kop-form { display: inline; }
.ed-kop-form--menu { display: none; }
.ed-hint { flex-basis: 100%; margin: 0; }
.v2-knop--uit, .v2-knop--uit:hover { background: var(--v2-papier-2); color: var(--v2-inkt-2); box-shadow: none; cursor: default; }
.ed-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s6); }
@media (min-width: 1101px) {
  .ed-kolommen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--v2-s7); align-items: start; }
  .ed-voorbeeld { position: sticky; top: var(--v2-s5); }
}
.ed-vragen { border-top: 1px solid var(--v2-lijn); }
.ed-vraag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--v2-s3); align-items: start; padding: var(--v2-s4) 0; border-bottom: 1px solid var(--v2-lijn); scroll-margin-top: 1rem; }
.ed-vraag .nr { font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-kop3); color: var(--v2-inkt-2); width: 28px; text-align: right; line-height: 1.2; }
.ed-vraag .t { font-weight: 600; font-size: var(--v2-t-groot); margin: 0; line-height: 1.3; }
.ed-vraag .s { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); margin: 2px 0 0; overflow-wrap: anywhere; }
.ed-vraag.q-card--incomplete { background: var(--v2-waarsch-vlak, var(--v2-papier-2)); }
.ed-vraag .q-card-gap { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: var(--v2-t-klein); color: var(--v2-gevaar); }
.ed-vraag .q-card-gap .v2-ico { flex: 0 0 auto; margin-top: 2px; }
.ed-vraag-meer > summary { margin-top: -6px; }
.v2-meer .paneel form { margin: 0; }
.v2-meer .paneel button:disabled { color: var(--v2-inkt-3); cursor: default; background: none; }
.ed-vragen .inline-form-container:not(.hidden) { margin: var(--v2-s3) 0; }
.ed-vragen .q-add-form { margin: var(--v2-s3) 0 0; }
.ed-leeg { padding: var(--v2-s4) 0; }
.ed-leeg p { margin: 0; }
.ed-geschiedenis .v2-lijst { margin-top: var(--v2-s2); }
.ed-versie .naam { font-size: var(--v2-t-basis); }
.ed-versie-links { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--v2-t-klein); }
.ed-versie-links li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s2) var(--v2-s3); }
.ed-versie-links form { margin: 0; }
.ed-geschiedenis-noot { margin: var(--v2-s2) 0 0; }
.ed-waar-gebruikt { margin-top: var(--v2-s4); }
.ed-waar-gebruikt > .v2-label { display: block; }
.ed-waar-leeg { margin: 4px 0 0; }
.ed-voorbeeld > .v2-label { display: block; }
.voorbeeld-vel { background: var(--v2-vlak); border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-vel); padding: var(--v2-s5); margin-top: var(--v2-s2); }
/* Geen vel in een vel (V2 principe 1, M19 nesting 0): in het voorbeeld zijn de antwoorden zachte vlakken in papier
   zonder rand; de echte vakken op papier ziet de coach met 'Bekijk als deelnemer'. */
.voorbeeld-vel .survey-q-input > div > div > label, .voorbeeld-vel .matrix-card-option { border: 0; background: var(--v2-papier); box-shadow: none; }
.ed-voorbeeld-noot { margin: var(--v2-s2) 0 0; }
/* De balk bovenaan het voorbeeld (paneel en dialoog; besluit PO 2026-10-02, keuze 2): dezelfde als op de publieke
   vragenlijst (_survey_band.html). Zonder eigen kleuren het logo en de naam schuin in de serif boven de kop; met eigen
   kleuren het vlak in de tweede kleur over de hele breedte van het voorbeeld (de negatieve marge heft de binnenruimte
   van .preview-survey op; het paneel zelf heeft dan geen binnenruimte en knipt de hoeken af). */
.voorbeeld-vel:has(> .preview-survey) { padding: 0; overflow: hidden; }
.preview-survey > .survey-band { padding: 0; margin: 0 0 var(--v2-s3); }
.preview-survey > .survey-band .survey-band-inhoud { max-width: none; margin: 0; }
[data-huisstijl="eigen"] .preview-survey > .survey-band { margin: -1.25rem -1.25rem var(--v2-s4); padding: var(--v2-s3) 1.25rem; }
.preview-survey-title { font-size: var(--v2-t-kop3); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.preview-survey-header .survey-intro { margin-top: 4px; }
.body-editor .preview-survey { max-width: none; }
/* BL-091: een tabel met stellingen in het voorbeeld (paneel en dialoog op VL-03) breekt nooit midden in een woord.
   In een smal vak (het paneel, de dialoog op mobiel) staan de stellingen als kaarten, zoals op het publieke formulier;
   breed is het een tabel waarvan de kolommen meegroeien met hun kop (geen vaste kolombreedte, geen afbreken binnen
   een woord; hyphens: auto met lang="nl" van de pagina). De koppen in gewone letters, zoals op het formulier. */
.preview-survey { container: voorbeeld / inline-size; }
.matrix-preview-table { table-layout: auto; }
.matrix-preview-table th { overflow-wrap: normal; word-break: normal; hyphens: auto; text-transform: none; letter-spacing: 0; font-size: var(--v2-t-klein); color: var(--v2-inkt-2); border-bottom-color: var(--v2-lijn); }
.matrix-preview-table td { border-bottom-color: var(--v2-lijn); }
.preview-survey .survey-q-input > .matrix-preview-desktop { display: block; }
.preview-survey .survey-q-input > .matrix-preview-mobile { display: none; }
@container voorbeeld (max-width: 480px) {
  .preview-survey .survey-q-input > .matrix-preview-desktop { display: none; }
  .preview-survey .survey-q-input > .matrix-preview-mobile { display: grid; }
}

/* ---------- 25. Team en Huisstijl (batch V2-4: ORG-01, ORG-02) ---------- */
.team-kop { margin-bottom: var(--v2-s3); }
.team-toegang { position: relative; }
.team-toegang-intro { margin: 4px 0 var(--v2-s3); }
.team-toegang-form { display: grid; gap: var(--v2-s3); }
.team-toegang-form .v2-veld { margin: 0; }
.team-toegang-form fieldset { border: 0; padding: 0; min-width: 0; }
.team-toegang-form legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.team-toegang-knop { display: flex; align-items: flex-end; }
@media (min-width: 900px) {
  .team-toegang-form { grid-template-columns: 1.3fr 1fr auto auto; align-items: end; }
  .team-toegang-form .v2-melding { grid-column: 1 / -1; }
  /* BL-164: een fout onder een veld maakt die kolom hoger; dan bovenaan uitlijnen, zodat de velden op één lijn blijven
     (de knop zakt de hoogte van een label mee) */
  .team-toegang-form:has(.errorlist) { align-items: start; }
  .team-toegang-form:has(.errorlist) .team-toegang-knop { padding-top: calc(var(--v2-t-basis) * var(--v2-lh) + 6px); }
}
.team-toegang-help { margin: var(--v2-s3) 0 0; }
.team-leden > .v2-label { display: block; }
.lid { display: grid; grid-template-columns: 1fr; gap: var(--v2-s2) var(--v2-s4); align-items: center; padding: var(--v2-s4) 0; border-bottom: 1px solid var(--v2-lijn); }
.lid .naam { font-weight: 600; font-size: var(--v2-t-groot); }
.lid .mail { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); overflow-wrap: anywhere; }
.lid .rechts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v2-s3); }
@media (min-width: 700px) { .lid { grid-template-columns: minmax(0, 1fr) auto; } }
.team-role-form { display: flex; align-items: center; gap: var(--v2-s2); }
.team-role-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Mobiel (PO 2026-10-02): naam en e-mail, dan het segment; staat 'Rol wijzigen' er (een andere keuze, of zonder
   JavaScript), dan staan die knop, de status en ⋯ samen op de regel eronder, anders staat ⋯ naast het segment. Het
   formulier doet niet mee aan de opmaak (display: contents; het blijft het formulier van de knop), zodat niets over het
   segment valt en ⋯ niet los op een eigen regel staat. Volgorde in beeld = volgorde in de DOM (geen CSS order). */
@media (max-width: 600px) {
  .lid .rechts { gap: var(--v2-s2); }
  .lid .team-role-form { display: contents; }
  .lid .team-role-form:has(.team-role-button:not([hidden])) .team-rol-segment { flex-basis: 100%; }
  .lid .team-role-status { flex: 1 1 6rem; min-width: 0; }
  .lid .team-role-status:empty { display: none; }
  .lid .team-meer { margin-left: auto; }
}
.team-leden-noot, .team-blocked-note { margin: var(--v2-s3) 0 0; }
.team-leeg { padding: var(--v2-s4) 0; }  /* de compacte lege staat ({% leeg %}, BL-161) */
.hs-kop { margin-bottom: var(--v2-s3); }
.hs-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s6); }
@media (min-width: 981px) { .hs-kolommen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--v2-s7); align-items: start; } }
.hs-intro { margin: 0 0 var(--v2-s2); max-width: 60ch; }
.hs-veld .hs-optioneel { font-weight: 400; }
.hs-veld input[type="text"], .hs-veld .color-picker-text { font: inherit; font-size: var(--v2-t-groot); color: var(--v2-inkt); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); padding: 10px 12px; max-width: 12rem; }
.hs-veld .hs-tekstkleur { margin: 4px 0 0; color: var(--v2-inkt); }
/* BL-139: het kleurvak is de kleurkiezer zelf, vierkant 44x44 px naast het tekstveld */
.hs-veld .color-hex-field { display: flex; align-items: center; gap: var(--v2-s2); }
.hs-veld .color-picker-native { inline-size: 44px; block-size: 44px; min-height: 0; padding: 2px; flex: none; border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); background: var(--v2-vel); cursor: pointer; }
.hs-veld .color-picker-native::-webkit-color-swatch-wrapper { padding: 0; }
.hs-veld .color-picker-native::-webkit-color-swatch { border: 0; border-radius: 5px; }
.hs-veld .color-picker-native::-moz-color-swatch { border: 0; border-radius: 5px; }
.hs-veld--logo input[type="file"] { font: inherit; font-size: var(--v2-t-klein); max-width: 100%; min-height: var(--v2-tik); }
.hs-logo-nu { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v2-s3) var(--v2-s4); margin: var(--v2-s2) 0; }
.hs-logo-weg { display: inline-flex; align-items: center; gap: var(--v2-s2); min-height: 44px; font-weight: 500; cursor: pointer; }
.hs-logo-weg input { width: 20px; height: 20px; margin: 0; accent-color: var(--v2-actie-rand); }
.hs-voorbeeld > .v2-label { display: block; margin-bottom: var(--v2-s2); }
.hs-form .v2-actiebalk { margin-top: var(--v2-s5); }
/* Huisstijl: het voorbeeld (besluit PO 2026-10-02): de echte balk bovenaan (.survey-band, §20), de voortgang, een schaal
   en een keuzevraag met een gekozen antwoord en 'Verder', in de tokens van de vragenlijst; brand-preview.js kleurt het
   via CSSOM (data-huisstijl en --brand-* op .brand-preview-frame). De achtergrond is papier, met eigen kleuren lichtgrijs. */
.brand-preview-frame { --v2-papier: var(--v2-deelnemer-pagina); max-width: 420px; padding: 0; background: var(--v2-papier); border: 1px solid var(--v2-lijn); border-radius: var(--v2-r-vel); overflow: hidden; }
.brand-preview-frame .survey-band { padding: var(--v2-s4) var(--v2-s4) 0; }
[data-huisstijl="eigen"] .brand-preview-frame .survey-band, .brand-preview-frame[data-huisstijl="eigen"] .survey-band { padding: var(--v2-s3) var(--v2-s4); }
.brand-preview-frame .survey-band-inhoud { max-width: none; }
.brand-preview-body { display: grid; gap: var(--v2-s3); padding: var(--v2-s4); }
.brand-preview-body .survey-voortgang { margin: 0; }
.brand-preview-voortgang { width: 33%; }
.brand-preview-question { font-size: var(--v2-t-kop3); font-weight: 700; line-height: 1.15; }
.brand-preview-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--v2-s2); }
.brand-preview-option { display: grid; place-items: center; min-height: 48px; background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-kop3); color: var(--v2-inkt); }
.brand-preview-option.is-chosen { background: var(--v2-actie); color: var(--v2-op-actie); border-color: var(--v2-actie); }
.brand-preview-keuzes { display: grid; gap: var(--v2-s2); }
/* Geen kader in het kader (V2 principe 1, M19 nesting 1; PO 2026-10-03): de antwoorden zijn zachte vlakken zonder rand
   op het papier van het voorbeeld, zoals in het voorbeeld op VL-03; het gekozen antwoord heeft de tint en het gevulde
   rondje (niet alleen kleur, WCAG 1.4.1). Het voorbeeld zelf is het ene kader, met de balk tegen de bovenrand. */
.brand-preview-keuze { display: flex; align-items: center; gap: var(--v2-s3); min-height: 48px; padding: 0 var(--v2-s4); background: var(--v2-vel); border: 0; border-radius: var(--v2-r-veld); color: var(--v2-inkt); }
.brand-preview-keuze.is-chosen { background: var(--v2-actie-vlak); font-weight: 600; }
.brand-preview-rondje { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--v2-lijn-sterk); flex: none; }
.brand-preview-keuze.is-chosen .brand-preview-rondje { border-color: var(--v2-actie-rand); background: var(--v2-actie-rand); box-shadow: inset 0 0 0 3px var(--v2-vel); }
.brand-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); margin-top: var(--v2-s2); }
.brand-preview-terug { color: var(--v2-inkt-2); font-weight: 600; }
.brand-preview-button { pointer-events: none; }

/* ---------- 26. Gemeente (batch V2-4: GEO-01) ---------- */
.gem-kop { margin-bottom: var(--v2-s3); }
.gem-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s6); }
@media (min-width: 981px) { .gem-kolommen { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--v2-s7); align-items: start; } }
.gem-kaart > .v2-label, .gem-cijfers .v2-sectie > .v2-label { display: block; }
.gem-kaart-vel { margin-top: var(--v2-s2); padding: var(--v2-s3); }
.gem-cijfers .v2-sectie:first-child { margin-top: 0; }
.gem-kern { margin-top: var(--v2-s3); }
.gem-kern--breed { grid-column: 1 / -1; }
.v2-cijfer--klein { font-size: var(--v2-t-kop2); }
.gem-tabel { margin-top: var(--v2-s2); }
.gem-meer { margin-top: var(--v2-s3); }
.gem-groep-titel { display: block; margin: var(--v2-s4) 0 0; }
.muni-map-cbs-attrib { margin: var(--v2-s2) 0 0; }
.muni-hint { margin: var(--v2-s2) 0 0; }
/* BL-135: de uitleg boven de kaart (klik of tik op een wijk, of Tab en Enter) */
.gem-kaart-hint { margin: var(--v2-s1) 0 0; }
/* BL-137: de keuze tussen gemeenten in de kop. Links (?gemeente=<slug>) in de vorm van een .v2-segment; de gekozen
   gemeente heeft aria-current en dezelfde inkt-vulling als een gekozen segment. */
.gem-keuze { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); }
.gem-keuze__optie { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; font-weight: 500; color: var(--v2-inkt); text-decoration: none; }
.gem-keuze__optie + .gem-keuze__optie { border-left: 1.5px solid var(--v2-lijn); }
.gem-keuze__optie:first-child { border-radius: calc(var(--v2-r-veld) - 1.5px) 0 0 calc(var(--v2-r-veld) - 1.5px); }
.gem-keuze__optie:last-child { border-radius: 0 calc(var(--v2-r-veld) - 1.5px) calc(var(--v2-r-veld) - 1.5px) 0; }
.gem-keuze__optie:hover { background: var(--v2-papier-2); color: var(--v2-inkt); }
.gem-keuze__optie[aria-current="page"] { background: var(--v2-inkt); color: var(--v2-papier); font-weight: 600; }

/* Gemeente: de kaart op het vel zonder eigen kader */
.gem-kaart-vel .muni-map-frame { border: 0; box-shadow: none; border-radius: var(--v2-r-veld); overflow: hidden; }

/* ---------- 27. Vensters (PO 2026-09-28: het deel-venster en het registreer-venster; components/venster.html) ----------
   Eén <dialog> voor beide (static/js/venster.js, BIDialog). Desktop: in het midden, hooguit 560 px. Mobiel (<= 780 px):
   een blad van onderen over bijna de hele hoogte; staat het toetsenbord open, dan schuift het blad erboven
   (--venster-onder zet venster.js via CSSOM uit visualViewport), en de actiebalk plakt onderaan het blad, zodat de
   knop bereikbaar blijft en een veld met focus niet onder de balk verdwijnt (scroll-padding, WCAG 2.4.11). De dialoog
   zelf heeft geen padding: een tik op de achtergrond is dan echt naast het blad (light dismiss, alleen het
   deel-venster). */
.venster { border: 0; padding: 0; margin: auto; width: min(560px, calc(100vw - 2 * var(--v2-gutter))); max-width: none; max-height: calc(100dvh - 2 * var(--v2-s5)); background: var(--v2-vel); color: var(--v2-inkt); border-radius: var(--v2-r-vel); box-shadow: var(--v2-schaduw-zweef); overflow: hidden; }
.venster[open] { display: flex; flex-direction: column; animation: v2-in var(--v2-duur) var(--v2-ease) both; }
.venster::backdrop { background: rgba(31, 42, 36, .45); }
.venster-balk { flex: none; display: flex; justify-content: flex-end; padding: var(--v2-s2) var(--v2-s3) 0; }
.venster-sluiten { min-height: var(--v2-tik); }
.venster-inhoud { --venster-pad-onder: var(--v2-s5); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--v2-s5) var(--venster-pad-onder); scroll-padding-bottom: calc(var(--v2-actiebalk-hoogte) + var(--v2-s4)); }
.venster-inhoud[aria-busy="true"] .venster-bericht { color: var(--v2-inkt-2); }
.venster-titel { margin: 0 0 var(--v2-s4); font-weight: 800; }  /* 07 §9: de kop van een venster in Archivo 800 */
.venster-bericht { margin: 0 0 var(--v2-s3); }
.venster-meer { margin: var(--v2-s2) 0 0; text-align: center; }
.venster-aangemaakt { margin: 0 0 var(--v2-s4); }
.venster-gekopieerd { margin: 0; color: var(--v2-succes-tekst); font-weight: 600; font-size: var(--v2-t-klein); }
.venster .v2-deel { gap: var(--v2-s3); }
.venster .v2-deel .v2-h2 { text-align: center; }
.venster .v2-qr--groot { width: min(280px, 66vw); }
.venster .bevestig-melding { margin: 0 0 var(--v2-s4); }
.venster .reg-form { max-width: none; }
.venster .reg-notitie-knop { margin-top: var(--v2-s4); }
.venster .reg-notitie-knop .reg-veld { margin-top: var(--v2-s3); }
.venster .venster-fout { margin-top: var(--v2-s3); }
/* De balk plakt tegen de echte onderrand van het blad: sticky rekent vanaf de padding van .venster-inhoud, dus zonder
   deze negatieve bottom bleef daaronder een strook waar de inhoud onder de knop doorliep (PO 2026-10-02, welkomstvenster) */
.venster .v2-actiebalk { position: sticky; bottom: calc(-1 * var(--venster-pad-onder)); z-index: 1; margin: var(--v2-s4) 0 calc(-1 * var(--venster-pad-onder)); padding: var(--v2-s3) 0 calc(var(--v2-s1) + var(--venster-pad-onder)); background: var(--v2-vel); }
@media (max-width: 780px) {
  .venster { width: 100%; margin: auto 0 var(--venster-onder, 0px); height: calc(100dvh - var(--venster-onder, 0px) - var(--v2-s5)); max-height: none; border-radius: var(--v2-r-vel) var(--v2-r-vel) 0 0; }
  .venster[open] { animation: venster-op var(--v2-duur) var(--v2-ease) both; }
  .venster-inhoud { --venster-pad-onder: calc(var(--v2-s4) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--v2-gutter) var(--venster-pad-onder); }
}
@keyframes venster-op { from { opacity: .4; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* ---------- 28. Feedback (PO 2026-09-28: 'Feedback geven'; components/feedback_venster.html, static/js/feedback.js) ----------
   Eén knop per breedte: mobiel een icoonknop van 44 px in de bovenbalk naast de avatar, desktop een stille tekstactie
   onderaan de zijbalk bij 'Uitloggen' (in de drawer op mobiel niet: daar staat hij al bovenin). Het venster is een
   gewoon venster (§27); de schermafbeelding is een <canvas> waarop je tekent (touch-action alleen op het canvas, zodat
   het blad zelf blijft scrollen). */
.topbar-rechts { display: flex; align-items: center; gap: var(--v2-s1); }
.topbar-feedback { width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--v2-op-veld-2); border-radius: var(--v2-r-veld); cursor: pointer; }
.topbar-feedback:hover { background: var(--v2-veld-2); color: var(--v2-op-veld); transform: none; }
.topbar-feedback .v2-ico { width: 24px; height: 24px; }
.sidebar .v2-tekstknop.sidebar-feedback { min-height: 44px; padding: 0; justify-content: flex-start; }
.sidebar .v2-tekstknop.sidebar-feedback:hover { color: var(--v2-op-veld); transform: none; }
/* Op mobiel ook in het menu: de bovenbalk scrollt mee weg, het menu onderaan is altijd bereikbaar */
.feedback-over { margin: calc(-1 * var(--v2-s2)) 0 var(--v2-s4); overflow-wrap: anywhere; }
.feedback-beeld { margin: 0 0 var(--v2-s2); }
.feedback-status { margin: 0; font-size: var(--v2-t-klein); }
.feedback-status:empty { display: none; }
.feedback-vak { border: 1px solid var(--v2-lijn); border-radius: var(--v2-r-veld); background: var(--v2-papier); overflow: hidden; line-height: 0; }
.feedback-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 46dvh; margin: 0 auto; touch-action: none; cursor: crosshair; }
.feedback-beeld-onder { margin-top: var(--v2-s2); }
.feedback-hulp { margin: 0 0 var(--v2-s1); font-size: var(--v2-t-klein); }
.feedback-beeld-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v2-s1) var(--v2-s4); }
.feedback-meesturen { display: inline-flex; align-items: center; gap: var(--v2-s2); min-height: 44px; }
.feedback-meesturen label { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.feedback-meesturen input { width: 20px; height: 20px; margin: 0; accent-color: var(--v2-actie-rand); }
.feedback-beeld-acties .v2-tekstknop { min-height: 44px; }
.feedback-beeld-acties .v2-tekstknop:disabled { background: none; color: var(--v2-inkt-2); cursor: default; text-decoration: none; transform: none; }
.feedback-vak.is-uit { opacity: .45; }
.feedback-bericht { min-height: 7.5rem; resize: vertical; font-size: var(--v2-t-basis); }
.feedback-veld .fout { margin: 0; }
.feedback-privacy { margin: 0; font-size: var(--v2-t-klein); }
.feedback-fout { margin-top: var(--v2-s3); }
.feedback-actiebalk .v2-tekstknop { justify-content: center; min-height: 44px; }
@media (max-width: 780px) { .feedback-canvas { max-height: 40dvh; } }
@media (min-width: 781px) { .feedback-actiebalk .v2-knop--breed { width: auto; } }
/* De toast ('Dank je! Je feedback is opgeslagen.', ook 'Link gekopieerd!') op mobiel: styles.css zet hem bovenaan (top),
   §18 onderaan boven de onderbalk (bottom); samen rekte hij over de hele hoogte. V2 geldt: onderaan. */
@media (max-width: 780px) { .copy-toast { top: auto; } }

/* ---------- 29. Uitleg (PO 2026-10-02: 'Leer de app kennen'; apps/onboarding, components/uitleg_venster.html, uitleg_regel.html,
   templates/onboarding/uitleg.html, static/js/uitleg.js) ----------
   'Uitleg' staat onderaan de zijbalk boven 'Feedback geven' (in de drawer op mobiel hetzelfde). Het welkomstvenster is een
   gewoon venster (§27) met vier stappen; de regel 'eerste keer hier' is een info-melding (§14) met 'Begrepen' rechts. */
.sidebar .v2-tekstknop.sidebar-uitleg { min-height: 44px; padding: 0; justify-content: flex-start; }
.sidebar .v2-tekstknop.sidebar-uitleg:hover { color: var(--v2-op-veld); transform: none; }
.sidebar .v2-tekstknop.sidebar-uitleg.is-active { color: var(--v2-op-veld); font-weight: 600; }
/* icoon | tekst | 'Begrepen'; op mobiel staat 'Begrepen' onder de tekst, rechts (het icoon blijft naast de tekst) */
.uitleg-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--v2-s2) var(--v2-s3); margin: 0 0 var(--v2-s4); }
.uitleg-regel .v2-ico { margin-top: 0; }
.uitleg-regel p { margin: 0; }
.uitleg-regel .uitleg-regel-form { margin: 0; }
.uitleg-regel .v2-tekstknop { min-height: 44px; }
@media (max-width: 780px) {
  .uitleg-regel { grid-template-columns: auto minmax(0, 1fr); }
  .uitleg-regel .uitleg-regel-form { grid-column: 2; justify-self: end; }
}
.uitleg-welkom .venster-titel { font-size: var(--v2-t-kop2); line-height: 1.1; margin-bottom: var(--v2-s3); }
.uitleg-welkom-intro { margin: calc(-1 * var(--v2-s1)) 0 var(--v2-s3); }
/* Compact (PO 2026-10-02): de vier stappen, de zin over Uitleg en feedback en 'Aan de slag' passen op 390x844 */
.uitleg-welkom .uitleg-stappen { gap: var(--v2-s3); }
.uitleg-welkom .uitleg-stap p { font-size: var(--v2-t-klein); line-height: 1.4; }
/* Lagere telefoons (bv. 360x740): nog wat compacter, zodat ook daar alles met de knop zonder scrollen past */
@media (max-height: 780px) { .uitleg-welkom .venster-titel { font-size: var(--v2-t-kop3); margin-bottom: var(--v2-s2); } .uitleg-welkom-intro { margin-bottom: var(--v2-s2); } .uitleg-welkom .uitleg-stappen { gap: var(--v2-s2); } .uitleg-welkom .uitleg-stap p { line-height: 1.3; } .uitleg-welkom .uitleg-welkom-menu { margin-top: var(--v2-s3); } }
.uitleg-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-s4); }
.uitleg-stap { display: flex; gap: var(--v2-s3); align-items: flex-start; }
.uitleg-stap .v2-ico { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--v2-inkt-2); }
.uitleg-stap b { display: block; font-weight: 600; }
.uitleg-stap p { margin: 2px 0 0; color: var(--v2-inkt-2); }
.uitleg-welkom-menu { margin: var(--v2-s4) 0 0; }
.uitleg-actiebalk .v2-knop--breed { margin: 0; }
@media (min-width: 781px) { .uitleg-actiebalk .v2-knop--breed { width: auto; } }
.uitleg-intro { margin: 0; }
.uitleg-stappen--pagina { max-width: 60ch; }
.uitleg-rij .naam { display: inline-block; min-height: 24px; }
.uitleg-vraag { max-width: 60ch; margin: 0 0 var(--v2-s4); }
.uitleg-vraag h3 { margin: 0 0 var(--v2-s1); }
.uitleg-vraag p { margin: 0; }
.uitleg-opnieuw p { margin: 0 0 var(--v2-s2); max-width: 60ch; }
.uitleg-opnieuw form { margin: 0; }
.uitleg-opnieuw .v2-tekstknop { min-height: 44px; }

/* ---------- 30. Veldfouten (BL-164: één patroon in de hele app; niet de vragenlijst voor deelnemers, die heeft §20) ----------
   Een veld met een fout heeft aria-invalid="true" (Django zet het, en aria-describedby naar '<veld-id>_error'; zie
   form-validation.js voor de controle vóór het versturen). De melding staat direct onder het veld: Django's
   ul.errorlist met dat id, als rode tekst met een klein icoon, zonder vlak of kader. Het veld krijgt een rode rand
   (--v2-fout-tekst: 7,5:1 op vel, 6,8:1 op papier) die ook met focus rood blijft: de groene focusring (§3) ligt er
   buiten, met de witte binnenring ertussen. Een fout van het hele formulier staat in een .message (dan geen icoon). */
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--v2-fout-tekst); font-size: var(--v2-t-klein); font-weight: 600; line-height: 1.4; }
.v2-veld > .errorlist { margin-top: 0; }
.errorlist li { position: relative; padding: 0 0 0 calc(1em + 6px); }
.errorlist li + li { margin-top: 2px; }
/* het icoon in de tekstkleur (masker, geen kleur in de url: kleuren alleen in :root) */
.errorlist li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6.5M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6.5M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain; }
.message .errorlist { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.message .errorlist li { padding-left: 0; }
.message .errorlist li::before { content: none; }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]), select, textarea)[aria-invalid="true"]:not(.survey-question *) { border-color: var(--v2-fout-tekst); box-shadow: inset 0 0 0 1px var(--v2-fout-tekst); }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]), select, textarea)[aria-invalid="true"]:not(.survey-question *):focus-visible { border-color: var(--v2-fout-tekst); box-shadow: inset 0 0 0 1px var(--v2-fout-tekst), 0 0 0 var(--v2-focus-afstand) var(--v2-focus-binnen); }
/* een segment met een fout (de rol op Team): de rand van de groep rood, de verborgen rondjes zelf niet */
.v2-segment:has(input[aria-invalid="true"]) { border-color: var(--v2-fout-tekst); box-shadow: inset 0 0 0 1px var(--v2-fout-tekst); }

/* ---------- 31. Formulieren: één layout (BL-158, besluit PO 2026-10-02) ----------
   Elk formulier volgt het patroon van REG-02: de kop van V2 (kruimel, serif-h1), geen vel eromheen, de velden als
   .v2-veld onder elkaar (label boven, fout en hulp eronder, §30), links in de inhoudskolom en hooguit
   --v2-formulier-max (42rem) breed, en onderaan de .v2-actiebalk met de ene .v2-knop en 'Annuleren' als tekstknop
   (desktop: op één regel, verticaal gecentreerd; mobiel: plakt boven de onderbalk, de knop over de volle breedte en
   'Annuleren' eronder, testrun K13). Geldt voor REG-02/03, VL-02, VL-07/08 en de inline vraageditor op VL-03.
   Bewuste uitzonderingen (BRAND_GUIDE › Formulieren): INT-02/03 op desktop twee kolommen (.v2-formulier--breed,
   BL-040/BL-042: 'Interventie aanmaken' op 1440x900 in beeld), Team (ORG-01) één rij, Huisstijl (ORG-02) de velden met
   het voorbeeld ernaast. De veldregel staat in :where(), zodat een eigen regel (zoals .reg-veld--aantal) wint. */
.v2-formulier { max-width: var(--v2-formulier-max); }
.v2-formulier .hulp { color: var(--v2-inkt-2); font-size: var(--v2-t-klein); }
.v2-formulier .v2-veld :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]), select, textarea),
.qform-option-row :where(input:not([type="hidden"])) { font: inherit; font-size: var(--v2-t-groot); color: var(--v2-inkt); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); padding: 10px 14px; min-height: var(--v2-tik); width: 100%; }
.v2-formulier .v2-veld :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]), select, textarea):focus-visible,
.qform-option-row :where(input:not([type="hidden"])):focus-visible { border-color: var(--v2-focus); }
.v2-formulier :where(input, textarea)::placeholder { color: var(--v2-inkt-2); opacity: 1; }
.v2-formulier .v2-veld textarea { min-height: 6rem; resize: vertical; line-height: var(--v2-lh); }
.v2-formulier input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--v2-actie-rand); cursor: pointer; }
.v2-formulier .v2-actiebalk .v2-tekstknop { justify-content: center; }
button.v2-tekstknop:hover { transform: none; }
@media (min-width: 781px) { .v2-formulier .v2-knop--breed { width: auto; min-width: 240px; } }
/* Een vakje met de tekst ernaast is één aanraakvlak van 44 px ('Verplicht', 'Toch deze naam gebruiken'; M8) */
.v2-formulier .qform-check-label, .v2-formulier .duplicate-name-confirm-label { display: inline-flex; align-items: center; gap: var(--v2-s2); min-height: 44px; font-weight: 600; cursor: pointer; }
/* De bevestigingspagina's zonder JavaScript (publiceren, gebruiken, overzetten, vragenlijst sluiten, registratie en
   interventie verwijderen, rol wijzigen, toegang intrekken; PO 2026-10-03): dezelfde layout als een formulier, met de
   vraag als h1, één zin of een waarschuwing, en de .v2-actiebalk met één knop (.v2-knop--gevaar bij iets dat je niet
   terugdraait) en 'Annuleren'. Geen vel, geen V1-knoppen. */
.bevestig-formulier .bevestig-tekst { margin: 0 0 var(--v2-s4); max-width: 60ch; }
.bevestig-formulier .bevestig-melding { margin: 0 0 var(--v2-s4); }
.bevestig-formulier .publish-check, .bevestig-formulier .use-at { margin: var(--v2-s4) 0; }

/* INT-02/03: één kolom op mobiel; vanaf 781 px twee kolommen (naam en publieke naam, start- en einddatum naast elkaar,
   de beschrijving en het wijkenblok over de volle breedte). De volgorde in de HTML is de leesvolgorde. */
.intervention-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s4); }
.intervention-form-grid > .v2-veld, .intervention-form-grid > .v2-actiebalk { margin: 0; }
.intervention-form-grid .v2-veld textarea { min-height: 4.5rem; }
.intervention-form-grid > .message, .intervention-form-grid > .errorlist { margin: 0; }
.int-form-kop { margin-bottom: var(--v2-s4); }
@media (min-width: 781px) {
  .v2-formulier--breed { max-width: 60rem; }
  .intervention-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--v2-s5); }
  .intervention-form-grid > * { grid-column: 1 / -1; }
  .intervention-form-grid > :is(.v2-veld--name, .v2-veld--public_name, .v2-veld--start_date, .v2-veld--end_date, .v2-veld--municipality) { grid-column: auto; }
  /* meer gemeenten (keuzelijst 'Gemeente'): beschrijving en gemeente naast elkaar, zodat het blok niet hoger wordt */
  .intervention-form-grid:has(> .v2-veld--municipality) > .v2-veld--description { grid-column: auto; }
  /* twee regels hoog: zo staat 'Interventie aanmaken' met het blok 'Vragenlijsten' op 1440x900 in beeld (T4) */
  .intervention-form-grid .v2-veld textarea { min-height: 3.5rem; }
}
/* het wijkenblok: legend, direct daaronder de uitleg, dan de lijst in kolommen van minstens 13rem (mobiel één kolom);
   elk label is het aanraakdoel van 44 px, als keuzevlak (.v2-keuze); gekozen = rand en vlak in de actiekleur, het vinkje
   zegt het ook (WCAG 1.4.1) */
.intervention-form-grid .district-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.intervention-form-grid .district-fieldset-legend { padding: 0; font-weight: 600; }
.intervention-form-grid .district-fieldset-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--v2-s4); margin: 2px 0 var(--v2-s2); }
.intervention-form-grid .district-fieldset-help, .intervention-form-grid .district-summary { margin: 0; }
.intervention-form-grid .district-summary { font-size: var(--v2-t-klein); font-weight: 600; }
.intervention-form-grid .district-choices > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 6px var(--v2-s2); }
.intervention-form-grid .district-choices label { display: flex; align-items: center; gap: 10px; min-height: 2.75rem; margin: 0; padding: 6px 12px; background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); font-weight: 500; line-height: 1.3; cursor: pointer; }
.intervention-form-grid .district-choices label:hover { border-color: var(--v2-actie-rand); }
.intervention-form-grid .district-choices label:has(input:checked) { border-color: var(--v2-actie-rand); box-shadow: inset 0 0 0 1px var(--v2-actie-rand); background: var(--v2-actie-vlak); }
.intervention-form-grid .district-scroll-hint { margin: 6px 0 0; }
/* meer gemeenten en nog geen gemeente gekozen: district-choice.js toont deze uitleg in plaats van de wijken (BL-042) */
.intervention-form-grid .district-empty-note { margin: 0; padding: 10px 14px; border: 1.5px dashed var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); color: var(--v2-inkt-2); }
/* Op een breed scherm (muis) is een wijk 40 px hoog en de lijst hooguit 3,5 rijen; met meer wijken krijgt hij een eigen
   scrollbalk in een eigen vak (district-choice.js zet .is-scrollable, de samenvatting en de hint eronder). Zo blijft
   'Interventie aanmaken' in het eerste scherm (T4). Op mobiel groeit de lijst mee en is een wijk 44 px. */
@media (min-width: 1200px) {
  .intervention-form-grid .district-choices label { min-height: 2.5rem; padding-top: 4px; padding-bottom: 4px; }
  .intervention-form-grid .district-choices { max-height: 10.75rem; overflow-y: auto; overscroll-behavior: contain; }
  .intervention-form-grid .district-choices.is-scrollable { max-height: calc(10.75rem + 10px + 3px); padding: 5px; border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-vel); }
}
/* BL-045: 'Kies een andere naam, of:' en het vinkje op één regel (smal eronder) */
.intervention-form-grid .duplicate-name-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--v2-s3); }
.intervention-form-grid .duplicate-name-confirm .hulp { margin: 0; }
.intervention-form-grid .duplicate-name-confirm-label { padding: 0 var(--v2-s3); background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); font-weight: 500; }
.intervention-form-grid .duplicate-name-confirm-label:has(input:checked) { border-color: var(--v2-actie-rand); background: var(--v2-actie-vlak); }
/* BL-046: het blok 'Vragenlijsten' als wit vlak met een hairline (op papier; op papier-2 haalden de groene tekst en de
   rand van de keuzelijsten het contrast niet): ingeklapt één regel met wat er gekozen is en 'Wijzigen'; uitgeklapt per
   vragenlijst een keuzelijst, vanaf 1280 px naast elkaar. Een <details>: werkt zonder JS. */
.intervention-form-grid .questionnaire-choice { min-width: 0; border: 0; background: var(--v2-vel); box-shadow: inset 0 0 0 1px var(--v2-lijn); border-radius: var(--v2-r-veld); }
.intervention-form-grid .questionnaire-choice-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--v2-s4); min-height: 44px; padding: 6px var(--v2-s4); border-radius: var(--v2-r-veld); cursor: pointer; list-style: none; }
.intervention-form-grid .questionnaire-choice-summary::-webkit-details-marker { display: none; }
.intervention-form-grid .questionnaire-choice-title { font-weight: 600; }
.intervention-form-grid .questionnaire-choice-chosen { flex: 1 1 22rem; display: flex; flex-wrap: wrap; gap: 2px var(--v2-s3); font-size: var(--v2-t-klein); color: var(--v2-inkt-2); }
.intervention-form-grid .questionnaire-choice-value { font-weight: 600; color: var(--v2-inkt); }
.intervention-form-grid .questionnaire-choice-toggle { font-weight: 600; color: var(--v2-actie-tekst); text-decoration: underline; text-underline-offset: 3px; }
.intervention-form-grid .questionnaire-choice-summary:hover .questionnaire-choice-toggle { color: var(--v2-actie-tekst-hover); }
.intervention-form-grid .questionnaire-choice[open] .questionnaire-choice-toggle-closed,
.intervention-form-grid .questionnaire-choice:not([open]) .questionnaire-choice-toggle-open { display: none; }
.intervention-form-grid .questionnaire-choice-body { padding: 0 var(--v2-s4) var(--v2-s4); }
.intervention-form-grid .questionnaire-choice-help { margin: 0; }
.intervention-form-grid .questionnaire-choice-fields { display: grid; gap: 0 var(--v2-s4); }
.intervention-form-grid .questionnaire-choice-fields > .v2-veld { max-width: 30rem; margin: var(--v2-s3) 0 0; }
@media (min-width: 1280px) {
  .intervention-form-grid .questionnaire-choice-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intervention-form-grid .questionnaire-choice-fields > .v2-veld { max-width: none; }
}
.intervention-form-grid > .intervention-form-note { margin: calc(-1 * var(--v2-s2)) 0 0; }

/* VL-07/VL-08: het formulier met rechts (vanaf 961 px) het live voorbeeld, dat question-form.js toont; zonder
   JavaScript (hidden) de hele breedte. Smaller: het voorbeeld onder het formulier, zoals in de DOM (geen CSS order). */
.qform-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-s6); align-items: start; }
@media (min-width: 961px) {
  .qform-layout { grid-template-columns: minmax(0, var(--v2-formulier-max)) minmax(0, 340px); }
  .qform-preview { position: sticky; top: var(--v2-s5); }
}
.qform-layout:has(> .qform-preview[hidden]) { grid-template-columns: minmax(0, 1fr); }
.qform-preview > .v2-label { display: block; }
.qform-preview-card { min-height: 120px; }
.qform-nonfield { margin: 0 0 var(--v2-s4); }
.qform-nonfield .message-text p + p { margin-top: 6px; }

/* 'Soort vraag' (BL-083) als keuzevlakken van 44 px: zoveel kolommen van minstens 9rem als er in de breedte passen (de
   inline editor staat op desktop in een smalle kolom naast het voorbeeld, PO 2026-10-02) */
.qform-type-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.qform-type-legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.qform-type-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--v2-s2); }
.qform-type-option { display: flex; align-items: center; gap: var(--v2-s2); min-height: 2.75rem; margin: 0; padding: 6px 10px; background: var(--v2-vel); border: 1.5px solid var(--v2-lijn-sterk); border-radius: var(--v2-r-veld); font-size: var(--v2-t-klein); font-weight: 600; line-height: 1.25; cursor: pointer; }
.qform-type-option:hover { border-color: var(--v2-actie-rand); }
.qform-type-option:has(input:checked) { border-color: var(--v2-actie-rand); box-shadow: inset 0 0 0 1px var(--v2-actie-rand); background: var(--v2-actie-vlak); }
.qform-type-option input[type="radio"] { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--v2-actie-rand); cursor: pointer; }
.qform-type-name { min-width: 0; overflow-wrap: break-word; }
.qform-type-name--nowrap { white-space: nowrap; }
@media (max-width: 480px) { .qform-type-option { gap: 6px; padding: 5px 7px; font-size: 0.8125rem; } }
/* een andere soort gooit antwoorden weg: dat zegt de editor vooraf, in een live-regio (WCAG 4.1.3) */
.qform-type-warning { display: flex; align-items: flex-start; gap: 6px; margin: var(--v2-s2) 0 0; font-size: var(--v2-t-klein); font-weight: 600; color: var(--v2-waarsch-tekst); }
.qform-type-warning .message-icon { flex: none; margin-top: 1px; }
.qform-type-blok { margin: var(--v2-s4) 0; }
.qform-type-blok .v2-veld { margin: 0; }

/* Antwoorden en stellingen (BL-076): kolomkoppen, per rij het nummer, het antwoord en (achter 'Waarden aanpassen')
   de waarde; choice-rows.js toont eerst 2 rijen en de volgende tijdens het typen */
.qform-options-section { margin: var(--v2-s5) 0 var(--v2-s4); }
.qform-options-header { margin-bottom: var(--v2-s2); }
.qform-options-label { font-weight: 600; }
.qform-options-desc { margin-top: 2px; }
.qform-options-section > .errorlist { margin: 0 0 var(--v2-s2); }
.qform-options-grid { display: grid; gap: 6px; }
.qform-option-row { display: flex; align-items: flex-start; gap: var(--v2-s2); }
.qform-option-row--head { align-items: flex-end; }
.qform-col-head { font-size: var(--v2-t-klein); font-weight: 600; color: var(--v2-inkt-2); }
.qform-option-num { width: 1.5rem; flex: none; padding-top: 12px; text-align: right; font-family: var(--v2-kop); font-weight: 800; font-style: italic; font-variation-settings: "wdth" 80; font-size: var(--v2-t-groot); line-height: 1.2; color: var(--v2-inkt-2); }
.qform-option-row--head .qform-option-num { padding-top: 0; }
.qform-option-input { flex: 2 1 0; min-width: 0; }
.qform-option-value { flex: 1 1 0; min-width: 0; }
.qform-option-row :where(input:not([type="hidden"])) { font-size: var(--v2-t-basis); }
.qform-options-grid--values-hidden .qform-option-value { display: none; }
.qform-options-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s2) var(--v2-s5); margin-top: var(--v2-s2); padding-left: calc(1.5rem + var(--v2-s2)); }
.qform-options-max { margin: 0; }
/* 'Korte code' achter 'Geavanceerd' (details.v2-details) */
.qform-advanced { margin: var(--v2-s3) 0 0; }
.qform-advanced-body { margin: var(--v2-s2) 0 0; }
.qform-field-check { margin: var(--v2-s2) 0; }

/* De inline vraageditor (VL-03): een vel in het document (dat zelf op papier staat, dus geen vel in een vel): het object
   waar je nu aan werkt, met de titel en het kruisje 'Formulier sluiten' (44 px). Op mobiel plakt 'Vraag opslaan' boven
   de onderbalk, op het vel. */
.inline-form-container { margin: var(--v2-s2) 0; }
.inline-qform { background: var(--v2-vlak); border-radius: var(--v2-r-vel); box-shadow: none; padding: var(--v2-s3) var(--v2-s4) var(--v2-s4); }
.inline-qform-header { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); }
.inline-qform-kruis { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: var(--v2-r-veld); background: none; color: var(--v2-inkt-2); cursor: pointer; flex: none; }
.inline-qform-kruis:hover { background: var(--v2-papier-2); color: var(--v2-inkt); transform: none; }
.inline-qform-body { max-width: none; }
.inline-qform-body > .errorlist.nonfield { margin: var(--v2-s2) 0 0; }
.inline-qform-alert { margin: var(--v2-s3) 0 0; }
.inline-qform-load-error { margin: 0; }
.inline-qform-loading { padding: var(--v2-s6); text-align: center; color: var(--v2-inkt-2); }
@media (max-width: 780px) {
  .inline-qform { padding-left: var(--v2-s3); padding-right: var(--v2-s3); }
  .inline-qform .v2-actiebalk { background: linear-gradient(180deg, transparent, var(--v2-vel) 24px); }
}

/* §N9-VELD: juiste interventie, juiste QR-code, eerlijke cijfers (naar 9+, 2026-10-03) */
/* Eerste stappen: het moment van de startvragenlijst op een eigen regel onder de titel van stap 3 (NIEUW-01) */
.start-stap-moment { display: block; font-weight: 400; color: var(--v2-inkt); }
/* Vraagt aandacht: concepten zijn editorwerk, geen veldsignaal: een gewone actielink; terracotta blijft voor de rest (VELD-10) */
/* INT-05 en REG-01: 'QR-code van vandaag' op een eigen regel in de kop, onder [[ Registreren ]] (VELD-03) */
.int-kop-vandaag { flex: 1 0 100%; margin: 0; }
/* Het registreer-venster: de naam van de interventie in de kop (VELD-04) */
.venster-titel-bij { overflow-wrap: anywhere; }
/* De melding 'Op <datum> is al een registratie': eerst de QR-code, dan wijzigen */
.registration-same-day-links { display: inline-flex; flex-wrap: wrap; gap: 0 var(--v2-s3); }

/* §N9-RES: resultaten eerlijk en op papier (naar 9+, 2026-10-03; DASH-02 templates/dashboards/intervention_detail.html,
   INT-05 de cijfers). Elk cijfer houdt zijn label, ook zonder data: eronder klein waarom, of de n bij weinig antwoorden
   (RES-06, RES-07, RES-09). Een verschil start → eind bij een eigen vraag heeft geen richting, dus geen groen of rood
   (RES-03). Op papier (RES-05): een regel met organisatie, gemeente, periode en n onder de h1, geen kruimel, de balken
   blijven een raster bij hun antwoord, en alleen 'Alle vragen van …' en 'Alle N registraties' open (results-page.js). */
.v2-cijfers .l .v2-cijfer-sub { display: block; font-size: 12px; margin-top: 2px; }
.v2-verschil--neutraal { color: var(--v2-inkt-2); background: var(--v2-papier-2); }
.res-printregel { display: none; }
.res-tabel-totaal { margin: var(--v2-s2) 0 0; }
/* De datum kort ('19 sep. 2026') op één regel (RES-12) vanaf 385 px; daaronder mag hij over twee regels, zodat de tabel
   op 360 en 375 px niet zijwaarts schuift (op 320 px veeg je binnen het benoemde vak, BL-151). De koppen zonder extra
   letterafstand en wat minder ruimte tussen de getallen, zodat de tabel op 390 px past. */
@media (min-width: 385px) { .res-bijeenkomsten td:first-child { white-space: nowrap; } }
@media (max-width: 600px) {
  .res-bijeenkomsten th { letter-spacing: 0; }
  .res-bijeenkomsten th.num, .res-bijeenkomsten td.num { padding-left: 6px; }
}
@media print {
  .v2-kruimel, .uitleg-regel { display: none !important; }
  .res-printregel { display: block; margin: 4px 0 0; color: var(--v2-inkt); }
  details.v2-details > .v2-balken, details.v2-details > .res-citaten, details.v2-details > .v2-resultaat { display: grid; }
  details.res-alleen > summary { display: block; min-height: 0; margin-top: var(--v2-s3); color: var(--v2-inkt); }
  details.res-alleen > summary::before { content: none; }
  .res-over { break-inside: avoid; }
}
/* Eigen regel (een browser zonder ::details-content slaat alleen deze over): §16 zet op papier de inhoud van elke
   uitklapper zichtbaar; een dichte uitklapper die niet in het rapport hoort ('Details' per vraag, de rest van de
   citaten) blijft dicht */
@media print {
  details.v2-details:not([open]):not(.res-alleen):not(#registraties > details)::details-content { content-visibility: hidden; }
}

/* §N9-RESP: de vragenlijst voor deelnemers en de deelnemersmodus (naar 9+, 2026-10-03) */
/* DEEL-02, DEEL-15: vanaf vraag 2 zet survey-form.js .survey-kop-compact op <body>. Boven de vraag staan dan alleen de
   kleinere balk met logo en naam en 'Vraag 3 van 9'; de activiteit, de lengte en de belofte staan alleen op vraag 1. De
   h1 blijft voor screenreaders (zelfde koppenstructuur op elke vraag). */
.survey-kop-compact .survey-header-activity, .survey-kop-compact .survey-intro, .survey-kop-compact .survey-belofte { display: none; }
.survey-kop-compact .v2-resp .survey-header, body.survey-kop-compact[data-huisstijl="eigen"] .survey-band + .v2-resp .survey-header { padding: var(--v2-s3) 0 0; }
.survey-kop-compact .survey-header h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.survey-kop-compact .survey-band { padding-top: var(--v2-s3); }
body.survey-kop-compact[data-huisstijl="eigen"] .survey-band { padding-top: var(--v2-s2); padding-bottom: var(--v2-s2); }
.survey-kop-compact .survey-branding-logo { height: 40px; padding: 4px; }
.survey-kop-compact .survey-band .survey-header-org { font-size: var(--v2-t-basis); }
/* 'mag je overslaan' op een eigen regel onder de vraag, zoals een hulpregel (prototype vragenlijst.html) */
.survey-optioneel { display: block; margin-top: var(--v2-s1); }

/* BEH-11: een breed logo houdt zijn vorm: 48 px hoog (vanaf vraag 2: 40 px), zo breed als het logo is, tot 200 px en
   nooit breder dan de balk. Past het logo met de naam niet op één regel (smal scherm, grote tekst), dan gaat de naam
   eronder. */
.survey-branding-logo { width: auto; height: 48px; max-width: min(200px, 100%); }
.survey-band-inhoud { flex-wrap: wrap; }
.survey-band-tekst { flex: 1 1 6rem; }

/* DEEL-10: bij 200% paginazoom of 200% tekst niets horizontaal scrollen en 'Verder' helemaal in beeld. De stappen-
   navigatie breekt af ('Verder' op een eigen regel, rechts; geen CSS order). Een woord dat niet op een regel past,
   breekt af (break-word; de keuzes zijn een flex-rij met een anonieme tekst erin, die alleen met anywhere smaller kan
   worden dan het langste woord). Afbreken op een lettergreep (hyphens: auto, lang="nl") alleen als er weinig tekens op
   een regel passen (de container in em: grote tekst of paginazoom), zodat de gewone weergave geen afbreekstreepjes
   krijgt (B1). */
.survey-stapnav { flex-wrap: wrap; }
.survey-stapnav .survey-verder { max-width: 100%; }
@media (max-width: 260px) { .survey-stapnav .survey-verder, .survey-stappen--actief .survey-versturen { flex: 1 1 100%; padding-left: var(--v2-s3); padding-right: var(--v2-s3); } }
.survey-header h1, .survey-q-label, .survey-q-help, .survey-matrix-row-label, .survey-band .survey-header-org { overflow-wrap: break-word; }
.survey-q-input > div > div > label, .survey-matrix-option { overflow-wrap: anywhere; }
.survey-matrix-option-text { min-width: 0; }
.survey-wrapper, .survey-band-inhoud { container-type: inline-size; }
@container (max-width: 15em) {
  .survey-header h1, .survey-q-label, .survey-q-help, .survey-matrix-row-label, .survey-header-org, .survey-q-input > div > div > label, .survey-matrix-option { hyphens: auto; }
}

/* DEEL-11, DEEL-14: 'Terug' en de antwoorden in de tabel met stellingen minstens 48 px hoog; een antwoord van twee
   regels krijgt ruimte boven en onder (de vakken blijven minstens 56 px) */
.survey-stapnav [data-survey-prev] { min-height: var(--v2-tik); min-width: 44px; }
.survey-matrix-option { min-height: var(--v2-tik); }
.survey-q-input > div > div > label { padding-top: var(--v2-s3); padding-bottom: var(--v2-s3); }

/* DEEL-05: de stapfout staat boven de antwoorden, net als de serverfout (_question_notes.html) */
.survey-q-stapfout { margin: 0 0 var(--v2-s3); scroll-margin-top: var(--v2-s4); }

/* BEH-01: de gekozen schaal en ja/nee zijn bij elke huisstijlkleur te zien. Het vlak is dezelfde kleur als de knop
   (--v2-actie met --v2-op-actie; besluit PO 2026-10-05: één kleur, geen donkerdere versie voor het vak), met een vinkje
   in de hoek: een signaal zonder kleur. Haalt de kleur geen 3:1 tegen de pagina, dan krijgen de knop en het gekozen vak
   een donkere rand: --brand-fill-edge staat er alleen dan (survey_branding_style.html, brand-preview.js); anders zijn
   --v2-knop-schaduw en --v2-gekozen-rand ongeldig, blijft de knop zonder rand en heeft het vak de rand in de kleur. */
[data-huisstijl="eigen"] .survey-branding-vars, .survey-branding-vars[data-huisstijl="eigen"] {
  --v2-knop-schaduw: inset 0 0 0 2px var(--brand-fill-edge); --v2-gekozen-rand: var(--brand-fill-edge);
}
.survey-q--scale_1_5 .survey-q-input > div > div > label, .survey-q--scale_1_10 .survey-q-input > div > div > label, .survey-q--yes_no .survey-q-input > div > div > label { position: relative; }
.survey-q--scale_1_5 .survey-q-input > div > div > label:has(input:checked), .survey-q--scale_1_10 .survey-q-input > div > div > label:has(input:checked), .survey-q--yes_no .survey-q-input > div > div > label:has(input:checked), .brand-preview-option.is-chosen { background: var(--v2-actie); color: var(--v2-op-actie); border-color: var(--v2-gekozen-rand, var(--v2-actie)); box-shadow: inset 0 0 0 1px var(--v2-gekozen-rand, transparent); }
.survey-q--scale_1_5 .survey-q-input > div > div > label:has(input:checked)::after, .survey-q--scale_1_10 .survey-q-input > div > div > label:has(input:checked)::after, .survey-q--yes_no .survey-q-input > div > div > label:has(input:checked)::after, .brand-preview-option.is-chosen::after { content: ""; position: absolute; top: 6px; right: 8px; width: 6px; height: 11px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.brand-preview-option.is-chosen { position: relative; }
.survey-branding-vars .v2-knop:not(.v2-knop--rand) { box-shadow: var(--v2-knop-schaduw, none); }

/* DEEL-06: na versturen weer op het formulier via 'terug': geen vragen, alleen deze regel met 'Nog iemand laten
   invullen' (survey-form.js). Een vel op papier, zoals de bedankpagina; de tekstknop in de huisstijl. */
.survey-al-ingevuld { margin: var(--v2-s4) 0; background: var(--v2-vel); color: var(--v2-inkt); box-shadow: var(--v2-schaduw-vel); }
.survey-al-ingevuld > .v2-ico { color: var(--v2-actie-rand); }
.survey-al-ingevuld-tekst { display: grid; gap: var(--v2-s2); justify-items: start; }
.survey-al-ingevuld-kop { font-size: var(--v2-t-groot); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.survey-al-ingevuld .v2-tekstknop { min-height: var(--v2-tik); }

/* DEEL-01: met de stappenlaag geen pull-to-refresh (de buffer zet antwoorden en stap na herladen ook terug) */
html:has(.survey-stappen--actief) { overscroll-behavior-y: contain; }

/* §N9-PLAT: opslaan dat hangt of mislukt, en herstel zonder kopiëren (naar 9+, 2026-10-03) */
/* TECH-04: 'Dit duurt lang. Je invoer is bewaard.' met 'Opnieuw proberen' (static/js/save-request.js in het venster en
   de vraageditor; base.js na 15 s bij een gewoon formulier). TECH-12/BEH-04: 'Opnieuw inloggen' en 'Opnieuw proberen'
   in de melding na een 401 of 403. De knoppen nemen de tekstkleur van de melding over (zoals .v2-melding a), zodat het
   contrast op elk meldingsvlak klopt; onderstreept, omdat ze in een melding staan. Alleen tokens. */
.opslaan-traag { margin: var(--v2-s3) 0 0; }
.opslaan-traag p { margin: 0; }
.opslaan-herstel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s1) var(--v2-s4); margin: var(--v2-s2) 0 0; }
.opslaan-herstel .v2-tekstknop { color: inherit; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.opslaan-herstel .v2-tekstknop:hover { color: inherit; text-decoration-thickness: 2px; }
.message:has(> .opslaan-herstel), .v2-melding:has(> .opslaan-herstel) { flex-wrap: wrap; }
.message:has(> .opslaan-herstel) > .message-text, .v2-melding:has(> .opslaan-herstel) > span { flex: 1 1 0; min-width: 0; }
.message > .opslaan-herstel, .v2-melding > .opslaan-herstel { flex: 1 0 100%; margin-top: 0; }
.message:has(> .message-icon) > .opslaan-herstel { padding-left: calc(20px + var(--v2-s3)); }
.v2-actiebalk + .opslaan-traag, .opslaan-traag + .v2-actiebalk { margin-top: var(--v2-s3); }

/* §N9-A11Y: toegankelijkheid voorbij axe (naar 9+, 2026-10-03) ----------
   Werkpakket 5 van analyse/naar-9-plus.md (VELD-02, A11Y-01 t/m A11Y-06, A11Y-11, GEO-01 nesting). De toetsen staan in
   analyse/tools/scorecard/n9_*.py en tests/test_naar9_a11y.py. Alleen tokens en systeemkleuren (forced-colors). */

/* VELD-02: het ⋯-menu valt nooit buiten het scherm. In de actierij van de laatste registratie (INT-05, REG-01) blijft
   de ⋯ op elke breedte rechts naast de link (die mag over twee regels lopen), zodat het paneel (right: 0) binnen beeld
   opent; base.js zet een paneel dat links buiten beeld zou vallen aan de andere kant (.paneel--links). */
.int-stap-vel .v2-acties { flex-wrap: nowrap; }
.int-stap-vel .v2-acties > a { min-width: 0; }
.int-stap-vel .v2-acties > .v2-meer { flex: none; }
.v2-meer .paneel--links { left: 0; right: auto; }
/* Knoppen in een ⋯-menu (Omhoog, Omlaag, Verwijderen, Toegang intrekken…) links uitgelijnd, net als de links ernaast
   (de V1-regel voor button in styles.css centreerde ze) */
.v2-meer .paneel button { justify-content: flex-start; }

/* A11Y-04: de zijbalk op desktop scrollt zelf, zodat 'Uitleg', 'Feedback geven' en 'Uitloggen' (op desktop de enige
   plek, besluit PO vraag 7) ook bij een lage hoogte bereikbaar zijn: een laptop van 1366x768, liggend of met zoom.
   De keuzelijst van de organisatie blijft binnen de breedte van de zijbalk (geen horizontale scroll). */
@media (min-width: 781px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--v2-s3); }
  .sidebar .sidebar-org-dropdown { min-width: 0; left: calc(-1 * var(--v2-s4)); right: calc(-1 * var(--v2-s4)); }
}

/* A11Y-05: geen overlappende tekst op INT-01. De status van de link mag afbreken (was nowrap en liep onder
   'Registreren' door), en tussen 781 en 960 px (zijbalk ernaast, de inhoud zo smal als op mobiel) staan de acties
   onder de naam, zoals op mobiel (≤ 600 px). */
.int-lijst .v2-status { white-space: normal; }
@media (min-width: 781px) and (max-width: 960px) {
  .int-lijst .v2-rij--int { flex-direction: column; align-items: stretch; }
  .int-lijst .v2-rij--int .rechts { justify-content: flex-start; }
}

/* A11Y-02: bij een lage hoogte (liggend, of 400% zoom: 1280 px wordt 320x256) bedekken de vaste balken niet meer
   dan een kwart van het scherm. BL-150 blijft op een gewone telefoon (staand) zoals hij is. Laag: de actiebalk is één
   compacte rij (knop en 'Annuleren' naast elkaar) en de onderbalk staat op een pagina met een actiebalk niet ook nog
   vast; laag én smal (≤ 480 px, zoom): de actiebalk staat gewoon onder het formulier. */
@media (max-height: 30em) {
  .v2-actiebalk { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--v2-s4); }
  .v2-actiebalk .v2-knop { min-height: 44px; padding: 0 var(--v2-s4); font-size: var(--v2-t-basis); }
  .v2-actiebalk .v2-knop--breed { width: auto; flex: 0 1 auto; }
  .v2-actiebalk .v2-tekstknop { min-height: 44px; }
  .venster .v2-actiebalk { padding-top: var(--v2-s2); }
  .venster-inhoud { scroll-padding-bottom: calc(44px + var(--v2-s5)); }
}
@media (max-width: 780px) and (max-height: 30em) {
  html:has(.v2-actiebalk) .mobile-bottom-nav { position: static; }
  html:has(.v2-actiebalk) .v2-main { padding-bottom: var(--v2-s5); }
  .v2-main .v2-actiebalk { bottom: 0; background: var(--v2-papier); padding-top: var(--v2-s2); padding-bottom: var(--v2-s2); }
  .inline-qform .v2-actiebalk { background: var(--v2-vel); }
  html:has(.mobile-bottom-nav):has(.v2-actiebalk) { scroll-padding-bottom: calc(44px + var(--v2-s5) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) and (max-height: 30em) {
  .v2-actiebalk, .venster .v2-actiebalk, .v2-main .v2-actiebalk { position: static; }
  .v2-actiebalk { flex-wrap: wrap; }
  html:has(.mobile-bottom-nav):has(.v2-actiebalk), .venster-inhoud { scroll-padding-bottom: var(--v2-s3); }
}

/* A11Y-03: Windows Hoog contrast (forced-colors). De kleuren van de app vallen dan weg; het gekozen antwoord (bij
   schaal en ja/nee is het rondje verborgen), de gekozen rol, de gekozen gemeente en de gekozen periode krijgen de
   systeemkleur voor 'geselecteerd'; knoppen houden een rand; het huidige menu-item is onderstreept; de focusring blijft
   in de tekstkleur van het systeem zichtbaar. */
@media (forced-colors: active) {
  .survey-q-input > div > div > label:has(input:checked),
  .survey-matrix-option:has(> input:checked),
  .v2-keuze label:has(:checked),
  .v2-schaal label:has(:checked),
  .v2-segment label:has(:checked),
  .gem-keuze__optie[aria-current="page"],
  .chart-toggle-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  :is(.survey-q-input, .survey-matrix-option, .v2-keuze, .v2-segment, .v2-schaal) input { forced-color-adjust: auto; }
  .survey-q-input > div > div > label:has(> input:focus-visible),
  .survey-matrix-option:has(> input:focus-visible),
  .v2-schaal label:has(> input:focus-visible),
  .v2-segment label:has(> input:focus-visible) { outline: var(--v2-focus-dikte) solid CanvasText; outline-offset: var(--v2-focus-afstand); }
  .v2-knop, .button-primary { border: 2px solid ButtonText; }
  .v2-knop:disabled, .v2-knop[aria-disabled="true"], .v2-knop--uit { border-color: GrayText; color: GrayText; }
  .sidebar a[aria-current="page"], .mobile-bottom-nav [aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  /* het schuine statusmarkeertje en de blokjes van de tijdlijn blijven zichtbaar (07 §11) */
  .v2-status::before, .v2-stap::before { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
  .v2-status--concept::before, .v2-stap:not(.v2-stap--klaar, .v2-stap--nu, .v2-stap--dicht)::before { background: Canvas; }
}

/* A11Y-11: het pijltje van een uitklapper en achter een link ('Alle interventies ›', class v2-pijl) is alleen voor het
   oog: geen '›' in de naam die een schermlezer voorleest (lege alternatieve tekst; een browser die dat niet kent, houdt
   de eerste regel). Een pseudo-element en geen <span aria-hidden>: geen extra element (M19). In een .v2-tekstknop zorgt
   de gap voor de ruimte ervoor. */
details.v2-details > summary::before { content: "›" / ""; }
.v2-pijl::after { content: "›"; content: "›" / ""; }
.v2-pijl:not(.v2-tekstknop)::after { content: "\00a0›"; content: "\00a0›" / ""; }

/* GEO-01 (M19 nesting 1): de melding over de kaart ('Kaart laden…', of de fout) is tekst op het kaartvlak, geen
   kader in het kaartvel; als de kaart klaar is, staat hij alleen nog voor de schermlezer. */
.muni-map-status__tekst { border: 0; }

/* §N9-SAMEN: samenhang en editor (naar 9+, 2026-10-03) */
/* NIEUW-09: wie in meer organisaties werkt, ziet op mobiel ook op een detailpagina (de terugweg in de bovenbalk) in
   welke organisatie hij werkt: .top-org onder de terugweg, over de hele breedte. Staat de organisatie al in de
   bovenbalk (.org, Start en de lijsten), dan niet nog een keer. Op desktop is de bovenbalk verborgen (§5); daar staat de
   organisatie in de zijbalk. */
@media (max-width: 780px) {
  .v2-top:has(> .top-org):not(:has(> .org)) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--v2-s3); }
}
.v2-top:has(> .org) > .top-org { display: none; }
.v2-top .top-org { grid-column: 1 / -1; margin: 0; color: var(--v2-op-veld-2); font-size: var(--v2-t-klein); line-height: 1.3; }
/* NIEUW-08: Uitleg als naslag; de drie momenten als lijst en een tweede alinea per vraag */
.uitleg-momenten { margin: var(--v2-s2) 0; padding-left: 1.25rem; }
.uitleg-momenten li { margin: 0 0 var(--v2-s1); }
.uitleg-vraag p + p, .uitleg-vraag ul + p { margin-top: var(--v2-s2); }
/* BEH-02: het venster 'Naam en beschrijving wijzigen' (dialog.js): de velden als in elk V2-formulier (§31) */
.bi-dialog:has(.naam-venster) { max-width: 34rem; }
.naam-venster { max-width: none; }
.naam-venster .v2-veld { margin: 0 0 var(--v2-s4); }
.naam-venster .v2-veld textarea { min-height: 4.5rem; }
.naam-venster .vl-soort { margin: 0; }
/* BEH-09: INT-06, 'Bekijken' rechts in elke keuze (buiten het label, zodat het rondje zijn eigen naam houdt) en de
   regel over een eigen vragenlijst die er nog niet bij staat */
.survey-select-optie { position: relative; }
.survey-select-optie > .survey-select-card { padding-right: calc(var(--v2-s4) + 5.5rem); }
.survey-select-bekijk { position: absolute; right: var(--v2-s4); top: 50%; transform: translateY(-50%); }
.survey-select-niet-klaar { margin: var(--v2-s3) 0 var(--v2-s4); }
.survey-select-niet-klaar-item { margin: 0 0 var(--v2-s3); }
.survey-select-niet-klaar-item p { margin: 0; max-width: 60ch; }