:root {
    /* Groene schaal (besluit PO 2026-09-23, vraag 31; zie BRAND_GUIDE.md › Kleuren).
       Dit is de enige plek met groene hexwaarden: gebruik overal de tokens hieronder.
       - 500 (#3EAE4B) is het merkaccent: logo, iconen, randen en vlakken. Nooit voor tekst
         en nooit als vlak onder witte tekst (2,85:1).
       - 600 (#1E874A) is tekstveilig op wit (4,55:1): knoppen met witte tekst, links,
         actieve navigatie.
       - 700 (#006E20) is hover/actief, en groene tekst op een lichtgrijs of lichtgroen vlak
         (daar haalt 600 geen 4,5:1; 700 haalt 5,9:1 op green-50 en 6,1:1 op --color-surface). */
    --green-50: #EEF7EF;
    --green-500: #3EAE4B;
    --green-600: #1E874A;
    --green-700: #006E20;

    /* Primary (merkaccent) */
    --color-primary: var(--green-500);
    --color-primary-rgb: 62, 174, 75;
    --color-primary-dark: var(--green-700);
    --color-primary-container: var(--green-500);

    /* Actie: knoppen met witte tekst, links en groene tekst op wit.
       Op de publieke vragenlijst volgen deze tokens de huisstijl (.survey-branding-vars). */
    --color-action: var(--green-600);
    --color-action-hover: var(--green-700);
    --color-on-action: #fff;
    /* Rand, keuzerondje of vinkje van een gekozen antwoord (>= 3:1 op wit). In de app gelijk aan de actiekleur;
       op de vragenlijst een tint van de huisstijlkleur die 3:1 haalt (BL-021). */
    --color-action-border: var(--color-action);
    --color-link: var(--color-action);
    /* Groene tekst op een lichtgrijs of lichtgroen vlak (badges, actieve nav, foutpagina's) */
    --color-text-green: var(--green-700);

    /* Toetsenbordfocus: één stijl voor de hele app (vaste kleur, ook bij een eigen huisstijl).
       Dubbele ring: een witte binnenring (box-shadow) en een donkergroene buitenring (outline),
       zodat de ring op wit (6,46:1) én op een donker of gekleurd vlak (wit, >= 4,5:1) zichtbaar is. */
    --color-focus-ring: var(--green-700);
    --color-focus-ring-inner: #fff;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;


    /* Grafieken (static/js/dashboard-charts.js leest deze tokens) */
    --chart-color-1: var(--green-600);
    --chart-color-1-fill: rgba(30, 135, 74, 0.14);
    --chart-color-2: var(--green-700);
    --chart-color-2-fill: rgba(0, 110, 32, 0.12);
    --chart-axis: #586558;
    --chart-grid: rgba(190, 202, 184, 0.45);

    /* Secondary */
    --color-secondary: #578155;
    --color-secondary-rgb: 87, 129, 85;
    --color-secondary-container: #bdecb7;
    --color-on-secondary-container: #436c42;

    /* Tertiary */
    --color-tertiary: #F56A96;
    --color-tertiary-rgb: 245, 106, 150;

    /* Text */
    --color-text: #191c1d;
    --color-muted: #586558;
    --color-muted-rgb: 88, 101, 88;

    /* Surfaces */
    --color-surface: #f8f9fa;
    --color-surface-strong: #ffffff;
    /* Achter een QR-code altijd wit (scannen), ook als de oppervlaktekleuren ooit veranderen */
    --qr-background: #ffffff;
    --color-surface-container-low: #f3f4f5;
    --color-surface-container: #edeeef;
    --color-surface-container-high: #e7e8e9;

    /* Borders */
    --color-border: #becab8;
    --color-border-strong: #c8d5ce;

    /* Feedback */
    --color-success-surface: #bdecb7;
    --color-success-border: #a4d29f;
    --color-danger: #ba1a1a;

    /* Meldingen (flash en toast): per soort een eigen kleur én een eigen icoon.
       'strong' is rand, icoon en voorvoegsel (>= 4,5:1 op wit en op het eigen vlak); de tekst is --color-text. */
    --message-success-bg: var(--green-50);
    --message-success-strong: var(--green-700);
    --message-info-bg: #EEF3FA;
    --message-info-strong: #1D4F91;
    --message-warning-bg: #FFF6E0;
    --message-warning-strong: #8A5300;
    --message-error-bg: #FEF3F2;
    --message-error-strong: #B42318;

    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.02);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.05);

    --sidebar-width: 260px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary-dark);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
}
.skip-to-content:focus {
    left: 0;
}

/* ── Toetsenbordfocus (BL-141) ──
   Eén globale stijl voor alle bedieningselementen. Alleen bij :focus-visible, dus een
   muisklik of tik op een knop of link geeft geen ring. Tekstvelden tonen de ring ook na een
   klik: dat is het standaardgedrag van :focus-visible voor invoervelden.
   Niet overschrijven met outline:none; wie een eigen focusstijl nodig heeft, past de
   tokens --color-focus-ring / --focus-ring-offset aan. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-focus-ring-inner);
}

/* Een datumveld (INT-02/INT-03, REG-02/REG-03) heeft in Chromium vier Tab-stops: dag, maand, jaar en de knop met de
   kalender. Op die knop matcht het veld zelf geen :focus-visible meer, en viel de ring weg (BL-044, BL-141). Met
   :focus-within krijgt het hele veld dezelfde ring zolang de focus erin staat, ook op de kalenderknop. */
input[type="date"]:focus-within {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-focus-ring-inner);
}

/* Antwoordopties op de vragenlijst (BL-019): het keuzerondje of vinkje is verborgen (opacity 0),
   dus de ring komt op het zichtbare label: keuze-, meerkeuze-, schaal-, ja/nee- en wijkopties, en elke optie van
   een matrixvraag (cel in de tabel, kaart op mobiel). Vaste kleur (--color-focus-ring, 6,5:1 op wit), dus ook
   leesbaar bij elke huisstijl; de ring ligt buiten het label (offset) op de witte vraagkaart. Alleen bij
   :focus-visible: een muisklik of tik op een optie geeft geen ring. */


/* In de matrix is het rondje zelf zichtbaar: de ring staat al om de hele optie, dus geen tweede ring om het
   rondje. Transparant in plaats van 'none', zodat hij in een contrastmodus (forced colors) wel zichtbaar blijft. */


body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-surface);
    color: var(--color-text);
    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Het hidden-attribuut wint altijd (BL-111): anders overschrijft bv. button { display: inline-flex } het,
   en staat er een verborgen knop (zoals 'Installeren' op iOS) toch in beeld. */
[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

button,
.button-primary,
.button-secondary,
input,
select,
textarea {
    font: inherit;
}

button,
.button-primary,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.9rem;
    padding: 0.75rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    /* Beide stops zijn tekstveilig met wit (4,55:1 en 6,46:1) */
    background: linear-gradient(135deg, var(--color-action) 0%, var(--color-action-hover) 100%);
    color: var(--color-on-action);
    cursor: pointer;
    font-weight: 600;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.button-primary {
    background: var(--color-action);
    background-image: none;
    color: var(--color-on-action);
}

button:hover,
.button-primary:hover,
.button-secondary:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.button-primary:hover {
    background: var(--color-action-hover);
    color: var(--color-on-action);
    box-shadow: 0 2px 10px rgba(0, 110, 32, 0.22);
}

.button-secondary {
    background: var(--color-surface-strong);
    background-image: none;
    border-color: var(--color-border);
    color: var(--color-text);
}

.button-secondary:hover {
    border-color: var(--color-secondary);
    color: var(--color-action-hover);
}

.button-danger {
    background: var(--color-danger);
    background-image: none;
    border-color: var(--color-danger);
    color: #fff;
}

.button-danger:hover {
    background: #9a1e14;
    border-color: #9a1e14;
}

/* Verwijderen als bijactie op een formulierpagina (REG-03, BL-036): rode rand en tekst op wit (6,5:1), zodat hij niet
   concurreert met de hoofdactie. De gevulde .button-danger blijft voor de dialoog en de bevestigingspagina. */
.button-danger-outline {
    background: var(--color-surface-strong);
    background-image: none;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.button-danger-outline:hover {
    background: var(--message-error-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.link-button {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-link);
    font-weight: 600;
}

.link-button:hover {
    background: transparent;
    transform: none;
    text-decoration: underline;
}

/* Uitgeschakelde en bezige knoppen (BL-008): zichtbaar anders dan een actieve knop (grijs vlak, grijze tekst,
   geen hover-effect). Na versturen zet base.js de knoppen uit; de gekozen knop krijgt .is-busy met een
   draaiend rondje en de tekst 'Bezig met opslaan…' of 'Bezig met versturen…'. */
button:disabled,
input[type="submit"]:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.button-danger:disabled {
    background: var(--color-surface-container-high);
    background-image: none;
    border-color: var(--color-border);
    color: var(--color-muted);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

button.is-busy,
button.is-busy:disabled,
input.is-busy,
input.is-busy:disabled {
    cursor: progress;
}

button.is-busy::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-busy-spin 0.8s linear infinite;
}

@keyframes button-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    button.is-busy::before {
        animation: none;
        border-right-color: currentColor;
        border-style: dotted;
    }
}

/* ── Layout: container (public pages) ── */

.container {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
}

.site-main {
    padding-bottom: 3rem;
}

/* ── Environment banner ── */



/* ══════════════════════════════════════════
   SIDEBAR LAYOUT (Authenticated)
   ══════════════════════════════════════════ */















/* Sidebar navigation */



/* Blok 'Beheer' (BL-118): onder de hoofdnavigatie, met een eigen kopje; alleen als er items zijn */




/* 'Backoffice' met de vermelding 'opent het platformbeheer' (doelbeeld §3.2) */




/* Kop van de zijbalk: merk en, alleen in de drawer (mobiel), 'Menu sluiten' (BL-117) */






/* Organisatie wisselen onderaan de zijbalk (doelbeeld §3.2: 'organisatie ▾ wisselen') */
























/* Sidebar user */















/* Tekstknop 'Uitloggen', minstens 44 px hoog (BL-105, M8) */




.hidden {
    display: none !important;
}





/* Mobile bottom nav (authenticated, narrow screens) */


@media (max-width: 780px) {
    

    

    

    /* 'Menu' is een knop (opent de drawer, BL-119): geen verloop of verschuiving van de gewone <button> */
    button.mobile-bottom-menu,
    button.mobile-bottom-menu:hover {
        background: transparent;
        background-image: none;
        box-shadow: none;
        transform: none;
        font: inherit;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-muted);
    }

    button.mobile-bottom-menu.is-active {
        color: var(--color-action);
        font-weight: 800;
    }

    /* Actief item (BL-115): groen én, zonder kleur herkenbaar, een balk bovenaan (6,4:1 op wit),
       een gevuld vlak achter het icoon en vetgedrukt */
    

    

    

    

    

    /* Dashboard interventiekaart: full-width knoppen op mobiel */
    

    /* BL-148: de primaire knop is minstens zo groot als de secundaire (volle breedte, >= 44 px hoog). Alleen de
       knoppen van de kaart zelf (kindselector): 'Link kopiëren' in een deelpaneel volgt de regel van het paneel. */
    

    /* BL-148: ook de ene primaire knop per scherm buiten de kaarten (in een sectiekop: '+ Nieuwe interventie' op
       DASH-01 en INT-01, '+ Nieuwe template' op VL-01; in de hero van DASH-01) is volle breedte en >= 44 px hoog,
       dus minstens zo groot als de secundaire kaartknoppen. Een kleine pil (button-small) wordt op mobiel normaal. */
    

    

    
}

/* ── App main area ── */



/* ── Top bar ── */

/* Een element dat de toetsenbordfocus krijgt, schuift niet onder de sticky topbar */




/* Titel en organisatie (BL-114). Desktop: naast elkaar. Mobiel: onder elkaar, zie het blok 'Topbar op mobiel'. */




/* Organisatie in topbar (wisselaar bij meerdere lidmaatschappen; disclosure-patroon, BL-107) */














/* De lijst: zichtbaar tenzij het hidden-attribuut staat (base.js zet dat, samen met aria-expanded) */














/* Huidige organisatie: aria-current, plus vinkje en vet (niet alleen kleur) */












/* Accountmenu achter de avatar (BL-105, besluit PO vraag 7) */




















/* ── Main content ── */

.main-content {
    flex: 1;
    padding: 1.5rem 2rem 3rem;
}

/* ══════════════════════════════════════════
   CLASSIC HEADER (Public / unauthenticated)
   ══════════════════════════════════════════ */



.nav, .hero-actions, .form-actions, .insight-list {
    display: flex;
    align-items: center;
    gap: 1rem;
}











.brand,
h2,
h3,
p {
    margin-top: 0;
}

.brand {
    margin-bottom: 0.15rem;
    font-size: 1.35rem;
    line-height: 1.1;
}

.muted, small, .table-note, .eyebrow {
    color: var(--color-muted);
}

/* BL-153: kleinere bijtekst ('muted small'). Stond in veel templates maar bestond niet. 14 px: boven de ondergrens
   van 12 px (woordenlijst, notatie). Een component met een eigen lettergrootte verderop in dit bestand gaat voor. */
.small {
    font-size: 0.875rem;
}



.nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav a,
.nav form {
    margin: 0;
}

.nav a {
    padding: 0.5rem 0;
    font-weight: 600;
    color: var(--color-text);
}

.nav a:hover {
    color: var(--color-text-green);
}

.nav a.button-secondary {
    padding: 0.75rem 1.5rem;
}









/* ══════════════════════════════════════════
   COMPONENTS
   ══════════════════════════════════════════ */

.eyebrow {
    margin-bottom: 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;  /* 12 px: labels minimaal 12 px (woordenlijst, notatie) */
    font-weight: 700;
    color: var(--color-muted);
}

.page-intro {
    margin-bottom: 1.5rem;
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.panel {
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5rem;
}

.panel-subtle {
    background: #fdfefe;
    box-shadow: none;
    border-style: dashed;
    margin-bottom: 0;
}

.panel-highlight {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.09), rgba(var(--color-primary-rgb), 0.03));
    border-color: rgba(var(--color-primary-rgb), 0.22);
}

.panel h2,
.panel h3 {
    margin-bottom: 0.65rem;
}

.hero-copy p:last-child,
.panel p:last-child {
    margin-bottom: 0;
}



.insight-list {
    flex-wrap: wrap;
    margin-top: 1rem;
}

.insight-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--green-50);
    color: var(--color-text-green);
    font-size: 0.92rem;
    font-weight: 600;
}

code {
    overflow-wrap: anywhere;
    padding: 0.18rem 0.4rem;
    border-radius: 0.4rem;
    background: rgba(110, 122, 107, 0.08);
}

/* Stats grid */



/* KPI-tegels (BL-060). Een tegel is een .panel: zonder deze regel telt zijn margin-bottom (1,5rem) op bij de gap,
   en is de rijafstand ca. 40 px tegen 16 px tussen de kolommen. Nu zijn rij- en kolomafstand gelijk (de gap). */




/* Vaste kolommen per aantal tegels (klasse stats-grid--<aantal>), zodat er op geen enkele breedte één losse tegel
   onder een volle rij staat (auto-fit gaf 5 + 1 en 4 + 1). 3, 5 en 6 tegels: 3 kolommen (3, 3 + 2, 3 + 3); 2 en 4:
   2 kolommen; vanaf 1440 px staan 4 en 5 tegels op één rij. Mobiel (<= 768 px) staat hieronder bij 'Mobile: show
   first 3 stat cards'. */






/* 7 of meer tegels (het aantal KPI's op DASH-02 is vrij in te stellen): een raster van 6 smalle kolommen, elke tegel
   2 breed (3 per rij). Zou de laatste rij één tegel krijgen (7, 10, 13 ...), dan staan de laatste 4 tegels als 2 + 2
   (elk 3 breed). Zo staat er bij geen enkel aantal één losse tegel onder een volle rij. De mobiele regel staat bij
   'Mobile: show first 3 stat cards'. */








/* Datum op een tegel (BL-060): '22 sep 2026' op één regel, iets kleiner dan een getal zodat hij ook in een smalle
   tegel past */


/* INT-05 (BL-060): de 3 tegels staan in de hoofdkolom naast het Action Center. Die kolom is tussen 961 en ca.
   1200 px maar 260 tot 470 px breed; drie tegels naast elkaar werden daar 76 tot 150 px en de labels braken midden in
   een woord. De breedte van het tegelblok zelf bepaalt de indeling (container query op .int-stats, niet de breedte
   van het scherm): smaller dan 30rem staan de tegels onder elkaar (icoon links, label op één regel); breder staan ze
   naast elkaar, met icoon, label en waarde onder elkaar tot 44rem. Labels breken alleen tussen woorden. Op mobiel
   (<= 768 px) geldt de compacte mobiele regel hieronder. */




/* DASH-01 en DASH-02 (BL-060, herstel 2): tussen ca. 781 en 960 px staat de zijbalk er en is het inhoudsvlak smal.
   Drie tegels naast elkaar werden daar 140 tot 200 px breed; met het icoon ernaast stak de datum ('22 sep 2026') uit
   de tegel (en de pagina kreeg een horizontale scrollbalk), liepen labels over de rand en braken getallen. De breedte
   van het tegelblok zelf bepaalt nu de opmaak (container query): is een tegel smaller dan 14rem, dan staan icoon,
   label en waarde onder elkaar en gecentreerd, met minder binnenruimte, zoals op mobiel. Labels breken alleen tussen
   woorden (een woord dat alleen niet past, breekt pas als laatste redmiddel), de datum blijft op één regel. Mobiel
   (<= 768 px) heeft zijn eigen regel. INT-05 heeft sinds V2 (batch V2-2) cijfers op één lijn (v2.css, .int-cijfers). */


/* Tegel zonder waarde (BL-059, components/stat_no_value.html): een streep en een korte uitleg, geen 0 */















/* Tegellabels minstens 12 px (woordenlijst, notatie; BL-159): op Start, INT-05 en de tab 'Resultaten' dezelfde maat */


/* Dashboard grid (legacy) */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-panel {
    margin-bottom: 0;
}

.chart-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.chart-panel-header .eyebrow {
    margin-bottom: 0.25rem;
}

.chart-toggle {
    display: flex;
    background: rgba(110, 122, 107, 0.08);
    border-radius: 0.5rem;
    padding: 0.15rem;
    gap: 0.1rem;
}

.chart-toggle-btn {
    padding: 0.3rem 0.55rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-muted);
    font-size: 0.75rem; /* minstens 12 px (BL-159) */
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.02em;
}

.chart-toggle-btn:hover {
    color: var(--color-text);
}

/* De gekozen periode (BL-058): aria-pressed="true" (dashboard-charts.js zet ook .is-active) */
.chart-toggle-btn.is-active,
.chart-toggle-btn[aria-pressed="true"] {
    background: var(--color-surface-strong);
    color: var(--color-text);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* De kop van een grafiek op Start (BL-068): 'Ingevuld per maand', 'Deelnemers per interventie' */
.chart-panel-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

/* Vak om het canvas: Chart.js meet dit vak. Een liggende grafiek (deelnemers per interventie) krijgt hier een hoogte
   uit dashboard-charts.js; een staande grafiek (tijdreeks) heeft een vaste hoogte, ook in een smalle zijkolom (BL-041:
   op 1024 px was hij met een vaste verhouding 115 px hoog). */
.chart-canvas {
    position: relative;
    width: 100%;
    height: 14rem;
}

/* BL-065: de selectie van de grafiek (alleen actieve interventies), direct onder de kop */
.chart-selection-note {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* BL-064: een grafiek zonder gegevens is uitleg met één vervolgactie, geen leeg assenstelsel
   (dashboards/_chart_empty.html). Sinds BL-161 de lege staat van v2.css (.v2-leeg--compact): geen eigen kader. */
.chart-empty {
    display: block;
}

/* Filter bar */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
}

.filter-bar label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
}

.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="date"] {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.85rem;
    color: var(--color-text);
}

.filter-bar select:focus,
.filter-bar input:focus {
    border-color: var(--color-action);
}

.filter-bar button[type="submit"] {
    min-height: auto;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    border-radius: 0.5rem;
}

/* Tables */

/* position: relative: tekst alleen voor screenreaders (.visually-hidden, absoluut) in een brede tabel valt zo binnen het
   scrollvlak, en maakt de pagina op mobiel niet breder dan het scherm */
.table-wrapper {
    position: relative;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.95rem 0.75rem;
    border-bottom: 1px solid #e8eeeb;
    text-align: left;
    vertical-align: top;
}

thead th {
    color: var(--color-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

tbody tr:hover {
    background: rgba(var(--color-primary-rgb), 0.03);
}

/* Een link in een smalle tabelcel die over twee regels breekt, krijgt één aaneengesloten vlak
   (en dus één focusring), in plaats van losse regelfragmenten */
td a {
    display: inline-block;
}

/* Forms */

/* Team (ORG-01, BL-133): bovenaan 'Collega toegang geven', daaronder de leden met per rij status, 'Rol wijzigen' en
   'Toegang intrekken' (BL-132). Status 'Nog niet ingelogd' als zin, niet 'Nog Niet Ingelogd' (.status-badge zet
   elders een hoofdletter per woord). */




/* .message.team-blocked-note: specifieker dan .message (margin 0 0 1rem, verderop), zodat de ruimte boven de melding
   blijft en hij niet tegen de laatste rij van de ledenlijst plakt */
.message.team-blocked-note {
    margin: 1rem 0 0;
}





/* Het paneel: op een breed vak e-mailadres, naam, rol en de knop op één regel (knop op de onderkant van de velden),
   de uitleg bij de rol eronder over de volle breedte. Smal onder elkaar. Container query: het vak, niet het venster. */


















/* 'Rol wijzigen' in de rij: de keuzelijst en de knop naast elkaar */














/* Mobiel: elk lid als blok (naam en status naast elkaar, daaronder e-mail, rol en de acties), geen zijwaarts scrollen */


/* Link in de melding: de sterke kleur van de melding (zoals .org-context-banner-link); groen haalt op het lichte
   infovlak maar 4,07:1 */


/* De keuzelijst 'Direct gebruiken bij' in de publicatiedialoog en op de bevestigingspagina (BL-084) */
.publish-use-at select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 0.95rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-surface-strong, #fafafa);
    color: var(--color-text);
    font-size: 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.publish-use-at select:hover {
    border-color: var(--color-border-strong, #b0b0b0);
    background-color: #fff;
}

.publish-use-at select:focus {
    border-color: var(--color-action);
    background-color: #fff;
}

.form-actions {
    flex-wrap: wrap;
}

.admin-form input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.error {
    color: var(--color-danger);
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* Meldingen (BL-145; templates/components/messages.html)
   Vier soorten, elk met een eigen kleur én een eigen icoon (niet alleen kleur).
   Tekst in --color-text; rand, icoon en voorvoegsel in de 'strong'-kleur (>= 4,5:1). */

.messages {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.message {
    --message-bg: var(--message-info-bg);
    --message-strong: var(--message-info-strong);
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: var(--message-bg);
    border: 1px solid var(--message-strong);
    border-left-width: 5px;
    color: var(--color-text);
}

.messages > .message {
    margin: 0;
}

.message-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    color: var(--message-strong);
}

.message-text {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.message-success {
    --message-bg: var(--message-success-bg);
    --message-strong: var(--message-success-strong);
}

.message-info {
    --message-bg: var(--message-info-bg);
    --message-strong: var(--message-info-strong);
}

.message-warning {
    --message-bg: var(--message-warning-bg);
    --message-strong: var(--message-warning-strong);
}

.message-error {
    --message-bg: var(--message-error-bg);
    --message-strong: var(--message-error-strong);
}

/* Banner met de organisatiecontext (BL-108, BL-116; components/org_context_banner.html) */
.org-context-banner .message-text p {
    margin: 0;
}

.org-context-banner .message-text p + p {
    margin-top: 0.3rem;
}

.org-context-banner-title {
    font-weight: 700;
}

.org-context-banner-link {
    font-weight: 600;
    text-decoration: underline;
    color: var(--message-strong);
}

/* Op de plek van een aanmaakknop als aanmaken nu niet kan (components/create_blocked_note.html).
   Altijd op een eigen regel (blokniveau, dus nooit naast een knop geplakt), zo breed als de tekst. */
.create-blocked-note {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.25rem 0 0.75rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    text-align: left;
}

.empty-state .create-blocked-note {
    margin-inline: auto;
}

.create-blocked-note-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
}







/* ══════════════════════════════════════════
   MARKETING / LANDING PAGE
   ══════════════════════════════════════════ */

.landing-page .site-main {
    padding-bottom: 0;
}



.landing-hero,
.landing-section {
    padding: 4rem 0;
}

.landing-section-tight {
    padding-top: 0;
}

.landing-hero {
    padding-top: 1.5rem;
}

.simple-page-hero {
    padding: 3rem 0 2rem;
}

.simple-page-shell {
    width: min(760px, 100%);
}

.landing-grid,
.product-preview,
.pilot-panel,
.privacy-panel {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: center;
}

.hero-content,
.section-heading,
.section-heading-left {
    max-width: 42rem;
}

.hero-content {
    grid-column: span 5;
}

.hero-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.75rem, 5vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.hero-lead,
.section-heading p {
    font-size: 1.05rem;
    color: var(--color-muted);
}

.hero-visual-wrap {
    grid-column: 7 / -1;
}

.hero-visual,
.product-visual {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border-radius: 1.5rem;
}

.hero-visual img,
.product-visual img {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(217, 227, 222, 0.9);
}

.mockup-badges {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    pointer-events: none;
}

.mockup-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(217, 227, 222, 0.9);
    box-shadow: 0 8px 24px rgba(31, 41, 51, 0.08);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.hero-kpis,
.trust-grid,
.card-grid,
.impact-grid,
.privacy-grid,
.content-grid {
    display: grid;
    gap: 1rem;
}

.hero-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
}

.hero-kpi {
    margin-bottom: 0;
}

.section-heading {
    margin: 0 auto 2rem;
    text-align: center;
}

.section-heading-left {
    margin-bottom: 0;
    text-align: left;
}

.section-heading h2,
.pilot-panel h2 {
    margin-bottom: 0.85rem;
    font-size: clamp(2rem, 3vw, 2.25rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.trust-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-card,
.trust-card,
.impact-card,
.content-card {
    margin-bottom: 0;
}

.trust-card {
    text-align: center;
}

.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: var(--green-50);
    color: var(--color-text-green);
    font-size: 0.9rem;
    font-weight: 700;
}

.marketing-card .icon-chip,
.trust-card .icon-chip {
    margin-bottom: 1rem;
}

.marketing-card h3,
.trust-card h3,
.privacy-item h3 {
    margin-bottom: 0.65rem;
    font-size: 1.25rem;
}

.marketing-card p,
.trust-card p,
.privacy-item p,
.footer-brand-text {
    color: var(--color-muted);
}

.product-preview > :first-child {
    grid-column: span 4;
}

.product-visual {
    grid-column: span 8;
}

.preview-list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
}

.preview-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.preview-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--color-primary);
}

.privacy-panel > :first-child {
    grid-column: span 4;
}

.privacy-grid {
    grid-column: span 8;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.privacy-item {
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.75);
}

.impact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.impact-card {
    text-align: center;
}

.impact-card strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.pilot-panel > :first-child {
    grid-column: span 8;
}

.pilot-panel > .button-primary {
    justify-self: end;
}

.site-footer {
    margin-top: 3rem;
    padding: 2rem 0 3rem;
    border-top: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.85);
}

.footer-inner,
.footer-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-links {
    flex-wrap: wrap;
}

.footer-brand-text {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════
   DETAIL PAGES
   ══════════════════════════════════════════ */




.measurement-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.empty-state {
    padding: 1.5rem 0;
    text-align: center;
}

.empty-state .muted {
    margin-bottom: 1rem;
}

/* Toast (succesmelding na kopiëren). De live region staat altijd in de pagina (onzichtbaar en leeg),
   zodat een screenreader de tekst voorleest zodra base.js die invult; display:none zou dat breken. */
.copy-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 0.75rem);
    padding: .75rem 1.5rem;
    border-radius: 999px;
    background: var(--color-text);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(31, 41, 51, .15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.copy-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.copy-toast-icon {
    flex: 0 0 auto;
    color: var(--green-500);
}

/* Op mobiel bovenaan, onder de topbar: onderin viel hij over de knoppen waarop je net tikte ('Link kopiëren', 'Delen')
   en over de bottom-nav */
@media (max-width: 780px) {
    .copy-toast {
        top: calc(4.25rem + env(safe-area-inset-top, 0));
        bottom: auto;
        max-width: calc(100% - 2rem);
        transform: translate(-50%, -0.75rem);
    }
}


/* ── Template detail: version cards ── */









/* Rechts in de kop van een versie: 'Bekijk als deelnemer' (BL-014) en bij een concept 'Publiceren' */


















/* BL-080: bovenaan VL-03 alle versies met hun status ('v2 · In gebruik'), als ankers naar de versiekaarten. Elke link
   minstens 24 px hoog (WCAG 2.5.8, besluit PO vraag 40). */








/* BL-080: 'In gebruik bij' onder de kop van een gepubliceerde versie, met per link 'Overzetten naar vN' */






















/* BL-080: de vragen van een versie in een uitklapper. Alleen de nieuwste versie en de versies in gebruik staan open;
   oudere versies zijn dicht, zodat VL-03 niet meer ca. 3000 px lang is. De driehoek van <summary> blijft (display:
   list-item): hij zegt of de versie open of dicht is. Aanraakvlak ca. 44 px hoog. */










/* VL-01, kolom 'Versies' (BL-080, besluit PO vraag 22): één regel per versie */
.version-status-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.version-status-list li + li {
    margin-top: 0.15rem;
}

/* ── VL-03, de kop van de editor (BL-083, doelbeeld §5.6), in het kop-patroon van INT-05 (BL-049) ──
   Links de naam (h1) met de badges op dezelfde regel, rechts de ene primaire knop van de staat ('Publiceren', 'Vraag
   toevoegen', 'Gebruiken bij een interventie', 'Nieuwe versie maken', 'Eigen vragenlijst maken') met de andere knoppen
   eronder. Op mobiel eerst de naam, dan de knoppen over de volle breedte, zodat de primaire knop op 390x844 bij
   scrollY=0 in beeld staat (M5). Staat er een vraagformulier open, dan is de primaire knop uitgeschakeld en staat
   'Sla eerst de vraag op.' eronder. */

















/* 'Vraag toevoegen' (een link) terwijl er al een vraagformulier open staat: zoals een uitgeschakelde knop */












/* Mobiel: eerst de naam, dan de knoppen onder elkaar en even breed (BL-148: de primaire knop minstens zo groot) */


/* ── 'Waar gebruikt' (BL-083): één tabel met alle links op deze vragenlijst. Vanaf 40rem een gewone tabel, smaller een
   blok per link (interventie, dan soort, versie, status en ingevuld in een regel, dan [ Delen ]), zonder zijwaarts
   scrollen. Het deelpaneel opent in de rij eronder, over de volle breedte (zoals 'Actieve interventies' op Start). ── */










/* Woordenlijst (notatie): labels zonder hoofdletters. Hier alvast voor 'Waar gebruikt'; de algemene th-regel hoort bij
   de notatieronde (BL-154). */












/* Een link van één registratie (oud, BL-050): de datum onder de soort */
















/* ── De keuze van een interventie (BL-084): 'Direct gebruiken bij' bij publiceren en 'Gebruiken bij een interventie',
   in de dialoog en op de pagina's zonder JavaScript. Keuzerondjes met de reden erbij als een interventie niet te kiezen
   is ('Vergrendeld: al ingevuld'). Elk rondje met zijn label minstens 44 px hoog. Een lange lijst scrolt binnen de
   dialoog, zodat 'Publiceren' of 'Gebruiken' in beeld blijft. ── */
.use-at {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.use-at-legend {
    padding: 0;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.use-at-help {
    margin: 0 0 0.5rem;
}

.use-at-error {
    margin: 0 0 0.5rem;
    color: var(--message-error-strong);
    font-weight: 600;
}

/* Geen eigen hoogte en geen eigen scrollbalk (BL-084): in de dialoog scrolt de dialoog als geheel, met de knoppen
   altijd onderaan in beeld (.bi-dialog-actions sticky); op de pagina zonder JavaScript is er geen reden om te scrollen. */
.use-at-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.use-at-option {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem 0.6rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    cursor: pointer;
}

.use-at-option input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-action);
}

.use-at-option:has(input:checked) {
    border-color: var(--color-action);
    background: var(--green-50);
}

.use-at-option--disabled {
    cursor: not-allowed;
    background: var(--color-surface-container-low, #f5f5f5);
}

.use-at-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
    min-width: 0;
}

.use-at-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Tweede regel: wat de interventie nu gebruikt, en de linkstatus als die niet open is */
.use-at-now {
    flex-basis: 100%;
    font-size: 0.875rem;
}

.use-at-link-note {
    color: var(--message-warning-strong);
    font-weight: 600;
}

.use-at-reason {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.use-at-empty {
    margin: 0;
}

/* BL-084: wat 'Publiceren' heeft gecontroleerd */
.publish-check {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: var(--green-50);
}

.publish-check-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.publish-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.publish-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.925rem;
}

.publish-check-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--color-text-green);
}

/* ── Question cards ── */





/* BL-089: 'Vraag toevoegen' staat in een GET-formulier naar VL-07 (zonder JavaScript); het anker #vraag-toevoegen-<id> */
.q-add-form {
    margin: 0;
    scroll-margin-top: 1rem;
}











/* BL-072: een vraag van een concept die nog niet compleet is (bv. nog maar 1 antwoord). Zolang dit er staat, lukt
   publiceren niet; na een geweigerde publicatie opent VL-03 bij deze kaart (#vraag-<pk>). */






/* BL-082: de soort vraag heet nu bv. 'Meer antwoorden kiezen'. Op een smalle kaart loopt dat over twee regels: dan een
   afgeronde rechthoek in plaats van een ovaal. 12 px: de ondergrens voor labels (woordenlijst, notatie). */
.q-type-badge {
    display: inline-block;
    max-width: 100%;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--color-surface-container-low, #f0f0f0);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-muted);
}









/* ── Question card actions (doelbeeld §5.6: '[ Wijzigen ] [ Omhoog ] [ Omlaag ] [ Verwijderen ]', >= 44 px, met label) ──
   Op een eigen regel onder de vraag, zodat de vraagtekst de volle breedte van de kaart krijgt (ook op 390 px). Breed
   rechts uitgelijnd zoals de schets; in een smalle kaart vier gelijke vakken met het icoon boven de tekst. */


















/* Heel smal (320 px): twee knoppen per rij, met het icoon naast de tekst */


.q-delete-form {
    display: inline;
}

.q-delete-form.q-card-action-form {
    display: contents;
}

/* ── Empty state & add button ── */

.q-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-muted);
}

.q-empty-state svg {
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.q-empty-state p {
    margin: 0.25rem 0;
}

.q-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.85rem;
    border: 2px dashed var(--color-border);
    background: transparent;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    margin-top: 0.25rem;
}

.q-add-btn:hover {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    background: rgba(var(--color-primary-rgb), 0.04);
    color: var(--color-text-green);
    text-decoration: none;
}


/* ── Template detail: split-view layout ── */







/* ── Preview panel ── */

.preview-panel {
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-container-low, #f8f8f8);
}

.preview-header .eyebrow {
    margin: 0;
}

.preview-header-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.preview-version-label {
    margin: 0;
}

.preview-survey {
    padding: 1.25rem;
}

.preview-survey-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.preview-survey-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

/* Scale down the survey components inside the preview */


















.preview-disabled {
    pointer-events: none;
    cursor: default;
}

.preview-textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: 0.65rem;
    background: #fff;
    color: var(--color-muted);
    font: inherit;
    font-size: 0.82rem;
    resize: none;
}

.preview-number-input {
    width: 100%;
    max-width: 120px;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: 0.65rem;
    background: #fff;
    color: var(--color-muted);
    font: inherit;
    font-size: 0.82rem;
}

.preview-empty {
    text-align: center;
    padding: 2rem 1rem;
}

/* ── Device toggle ── */

.device-toggle-group {
    display: flex;
    gap: 0.2rem;
    background: var(--color-surface-container-low, #f0f0f0);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.15rem;
}

/* BL-077: wisselknoppen met tekst (Computer, Telefoon) en aria-pressed; geen globale button-padding */
.device-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 0;
    height: 2.25rem;
    padding: 0 0.65rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    background-image: none;
    color: var(--color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.device-toggle svg {
    flex-shrink: 0;
}

/* Wisselknoppen (segmented control): de gekozen knop is aria-pressed="true" en blijft er ook bij hover (en na een
   tik op een aanraakscherm, waar hover blijft hangen) zo uitzien; alleen een niet-gekozen knop krijgt een hoverkleur.
   Dezelfde 'gekozen'-stijl als de periodeknoppen van de grafieken (.chart-toggle-btn). */
.device-toggle[aria-pressed="false"]:hover {
    background: var(--color-surface-strong);
    color: var(--color-text);
}

.device-toggle--active,
.device-toggle[aria-pressed="true"],
.device-toggle[aria-pressed="true"]:hover {
    background: var(--color-surface-strong);
    color: var(--color-text);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Mobile preview mode ── */

.preview-panel--mobile .preview-survey-wrapper {
    background: var(--color-surface-container-low, #f4f4f4);
    padding: 0.5rem;
}

.preview-panel--mobile .preview-survey {
    max-width: 340px;
    margin: 1.5rem auto;
    background: #fff;
    border: 2px solid #2c2c2c;
    border-radius: 1.5rem;
    padding: 1.5rem 1rem 1rem;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    min-height: 480px;
}

.preview-panel--mobile .preview-survey::before {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    background: #2c2c2c;
    border-radius: 99px;
    margin: -0.75rem auto 0.75rem;
}

.preview-panel--mobile .preview-survey-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
}

.preview-panel--mobile .preview-survey-title {
    font-size: 0.9rem;
}









.preview-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.preview-radio {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text);
    cursor: default;
}

.preview-radio input {
    width: auto;
    margin: 0;
    pointer-events: none;
}

.preview-likert {
    display: flex;
    flex-wrap: wrap;  /* schaal 1-10 in het live voorbeeld op VL-07/VL-08: niet breder dan het scherm (390 px) */
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.preview-likert-dot {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    background: #fff;
}

/* ── VL-03: de uitleg bij een gepubliceerde versie die nog niet is ingevuld (een normale staat, dus een
   informatiemelding, geen waarschuwing: BL-145), buiten de uitklapper van de vragen. Bij de versie waar je aan werkt
   staat hij in de kop (.editor-head-note). ── */



/* BL-074: waarom een versie of een standaardvragenlijst niet te bewerken is (vaste informatiemelding), met de
   volgende stap eronder ('+ Nieuwe versie' of 'Eigen vragenlijst maken'). */






/* Een actielink in een eigen alinea (geen link in lopende tekst): minstens 24 px hoog, op elke breedte (M8) */



/* ── Survey select (template picker) ── */































/* INT-06 (BL-038): de keuzerondjes staan in een fieldset (verborgen legend) */
fieldset.survey-select-list {
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

/* INT-06 (BL-038, B-054): 'Nu gekozen: <naam> (versie N)' en een nieuwere versie van die vragenlijst */








/* ══════════════════════════════════════════
   SURVEY FORM (Public)
   ══════════════════════════════════════════ */



/* Huisstijl op de pagina's voor respondenten (BL-021). apps/organizations/branding.py rekent per organisatie een
   palet uit; components/survey_branding_style.html zet dat als --brand-* in een <style nonce>:
     --brand-fill        vlak van knoppen en gekozen antwoorden: de huisstijlkleur zelf
     --brand-fill-hover  hover en tweede stop van de knopverloop
     --brand-on-fill     tekst op die vlakken: wit of donker, >= 4,5:1 op allebei
     --brand-text        tekst en links op wit, #F8F9FA en lichte tinten van de huisstijlkleur (>= 4,5:1)
     --brand-border      randen, keuzerondjes, vinkjes en de rand van een veld met focus (>= 3:1)
     --brand-primary(-rgb), --brand-secondary(-rgb)  de ruwe kleuren, alleen voor lichte tinten en decoratie
   Zonder eigen kleur zijn dat de groene tokens (#1E874A/#006E20). Tekst in de huisstijl staat op een vlak van
   hooguit 10% huisstijlkleur (TINT_MAX_ALPHA in branding.py): het vraagnummer en de badge.
   De focusring (--color-focus-ring) volgt de huisstijl bewust niet: die blijft overal donkergroen (BL-141). */


/* Een knop in een lichte huisstijlkleur (bv. geel of wit) valt anders weg tegen de witte pagina */








/* Kop van de vragenlijst (BL-026): de vaste naam of de eigen naam, daaronder wie de vragen stelt en over welke
   activiteit. De kop is de h1 van de pagina: op de respondentpagina's is er geen app-shell (BL-006). */






/* Medewerker ingelogd op een respondentpagina (BL-006): één smalle balk, zonder links naar de app. */








/* Te veel vragenlijsten via dit netwerk (BL-005) of net een nieuwe versie (BL-022): de melding staat boven de
   vragen, de antwoorden blijven staan. */


/* Bedankpagina (BL-007): 'Nog iemand laten invullen' als enige, volle knop */






/* Surveylink werkt niet (onbekend, gesloten of nog niet open) */




/* ── Question card ── */





/* De vraag als fieldset/legend (BL-025) ziet er hetzelfde uit als de vroegere vraagtekst: geen rand, geen
   inspringing, de legend als gewone kop boven de antwoorden. */
















/* Fout bij een vraag (BL-023): boven de antwoorden, met het fouticoon van de meldingen (BL-145), dus niet alleen
   rood. Vaste foutkleur (6,1:1 op wit), onafhankelijk van de huisstijl. */




/* Foutsamenvatting boven het formulier (BL-023): een .message-error (BL-145) met een kop en links per vraag.
   De links hebben de vaste foutkleur, niet de huisstijl (leesbaar bij elke huisstijlkleur). */


/* De samenvatting krijgt na het laden de focus (survey-form.js), en die telt als :focus-visible. Een groene ring om
   een rood foutvak leest als 'gelukt': hier heeft de ring de foutkleur (6,1:1 op wit). Dezelfde breedte en offset
   als de globale ring (BL-141): alleen de token wijzigt, dus geen outline: none. */










/* Compact (BL-023): per regel 'Vraag 3' als link en de korte melding erachter, in gewone tekst. */




/* ── Hide native radio/checkbox ── */



/* ── Scale 1-5: horizontal numbered circles ── */











/* ── Scale 1-10: same as 1-5 but smaller circles ── */











/* ── Yes/No: horizontal pill toggles ── */











/* ── Single choice: option cards with radio indicator ── */















/* ── Multiple choice: option cards with checkbox indicator ── */















/* ── Text & Numeric inputs ── */









/* ── Matrix in de voorbeeldweergave (VL-03, templates/survey_definitions/template_detail.html) ── */

.matrix-preview-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.matrix-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.matrix-preview-table th {
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted, #666);
    border-bottom: 2px solid var(--color-border, #e0e0e0);
}

.matrix-preview-table th:first-child {
    text-align: left;
    width: 45%;
}

.matrix-preview-table td {
    padding: 0.85rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    vertical-align: middle;
}

.matrix-row-label {
    text-align: left !important;
    font-weight: 500;
    color: var(--color-text, #1a1a1a);
    line-height: 1.4;
    padding-right: 1rem !important;
}

.matrix-radio-cell {
    text-align: center;
}

.matrix-radio-cell input[type="radio"] {
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-action);
    cursor: pointer;
}

/* Mobile stacked cards */
.matrix-card {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}

.matrix-card-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text, #1a1a1a);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.matrix-card-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--color-border, #e0e0e0);
    border-radius: 0.75rem;
    margin-bottom: 0.35rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text, #1a1a1a);
    transition: all 0.15s ease;
    user-select: none;
}

.matrix-card-option:hover {
    border-color: var(--color-action);
    background: rgba(var(--color-primary-rgb, 62, 174, 75), 0.03);
}

.matrix-card-option:has(input:checked) {
    border-color: var(--color-action);
    background: rgba(var(--color-primary-rgb, 62, 174, 75), 0.06);
}

.matrix-card-option input[type="radio"] {
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-action);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Matrixvraag op de publieke vragenlijst (BL-024) ──
   MatrixWidget (apps/survey_responses/forms.py) zet elke rij één keer in de DOM: een role=radiogroup met de zin
   als naam en per antwoord een label met een zichtbaar rondje. Breed: een tabel met kolomkoppen (aria-hidden) en
   de tekst per antwoord alleen voor screenreaders. Smal (<= 600px): per zin een kaart met de antwoorden onder
   elkaar, met tekst. Dezelfde radio's, dus een gekozen antwoord is in beide weergaven zichtbaar. */







/* Vijf of meer antwoorden: de zinnen smaller, zodat een kop als 'Helemaal oneens' niet midden in een woord breekt */










/* Na een fout: 'Nog geen antwoord' bij elke zin zonder antwoord (tekst en kleur, niet alleen kleur) */










/* Breed: de kolomkop zegt al wat het antwoord is; de tekst blijft de naam van de radio (niet display:none). */




/* Matrix results table in dashboard */
.matrix-results-table {
    width: 100%;
    border-collapse: collapse;
}

.matrix-results-table th,
.matrix-results-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.matrix-results-table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
}

.matrix-results-table th:first-child {
    text-align: left;
}

.matrix-results-table td {
    text-align: center;
}

.matrix-results-table td:first-child {
    text-align: left;
    font-weight: 500;
}

/* ── Submit area ── */





/* Op mobiel volle breedte, net als 'Nog iemand laten invullen' op de bedankpagina (één primaire knopstijl) */




/* ── Bekijk als deelnemer (BL-014): de voorbeeldbalk boven de vragenlijst en de bedankpagina ──
   In de infokleur van de app, niet in de huisstijl: zo is het duidelijk een voorbeeld, en blijft de vragenlijst
   eronder gelijk aan wat deelnemers zien. */












/* ── Deelnemersmodus (BL-018): 'Op dit toestel laten invullen' ──
   De balk bovenaan is .staff-respondent-bar met 'Invullen op dit toestel. Je antwoorden zijn anoniem.' (in plaats van
   de medewerkersbalk, niet erbij). 'Stoppen (voor de coach)' staat klein en onderaan, als tekstknop van minstens 44 px
   hoog, met een lijn erboven: los van de vragenlijst en van 'Volgende deelnemer'. */














/* ── Offline versturen (BL-015): melding boven de verzendknop en 'je invoer staat er nog' bovenaan ──
   De lege live region neemt geen plek in (ook geen rij in een raster), maar blijft in de pagina staan. */
.offline-form-live:empty {
    display: contents;
}

.offline-form-live .message {
    margin: 0 0 1rem;
    text-align: left;
}

.offline-form-restored {
    margin: 0 0 1.25rem;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 780px) {
    /* Sidebar: slide-out on mobile. Dicht is hij ook onzichtbaar voor toetsenbord en screenreader
       (visibility), zodat de focus niet op links buiten beeld belandt (BL-141, M9). */
    

    

    

    

    /* Toetsenbordfocus nooit onder de vaste bottom-nav of de sticky topbar (WCAG 2.4.11) */
    

    

    /* 'Menu sluiten' in de drawer (BL-117): zichtbaar, >= 44x44 px */
    

    

    /* Topbar op mobiel (BL-114): menuknop | titel met daaronder de organisatie voluit | avatar.
       Geen ellipsis: de titel en de organisatienaam lopen door op een volgende regel. */
    

    

    

    /* Pagina met een eigen kop in de inhoud: de titel blijft alleen voor screenreaders (de h1 blijft bestaan) */
    

    

    

    

    

    /* De lijst over de volle breedte onder de topbar */
    

    

    


    .main-content {
        padding: 1.25rem 1rem 2rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* Classic header (public) */
    

    

    

    

    

    

    

    

    

    .hero-panel {
        display: block;
    }

    

    .landing-hero,
    .landing-section {
        padding: 3rem 0;
    }

    .landing-grid,
    .product-preview,
    .pilot-panel,
    .privacy-panel {
        display: block;
    }

    .hero-kpis,
    .trust-grid,
    .card-grid-3,
    .card-grid-4,
    .impact-grid,
    .privacy-grid,
    .content-grid,
    .content-grid-2 {
        grid-template-columns: 1fr;
    }

    .hero-visual-wrap,
    .product-visual {
        margin-top: 1.5rem;
    }

    .mockup-badges {
        position: static;
        margin-bottom: 1rem;
    }

    .pilot-panel > .button-primary {
        justify-self: start;
        margin-top: 1rem;
    }

    .footer-inner {
        display: block;
    }

    .filter-bar {
        gap: 0.5rem;
    }

    /* Survey responsive */
    

    

    

    /* 10 cirkels op één rij worden te kleine tikdoelen (<44px); wrap naar 2 rijen van 5 */
    

    

    

    

}


@media (max-width: 480px) {
    

    

    .dashboard-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Guided dashboard (UX v1) ── */















.dashboard-step-num {
    flex: 0 0 auto;
    width: 2.5rem;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
}

/* Specifieker dan .panel h3 zodat titel + lead strak onder elkaar blijven */




/* Progress indicator (onboarding steps) */









/* Hero actions row */



/* Step card current indicator */



/* ── Eerste stappen (BL-063, doelbeeld §5.2) ──
   components/first_steps.html: vier stappen onder elkaar tot de eerste ingevulde vragenlijst. De stap die aan de beurt
   is, is een eigen vlak met de uitleg en de enige primaire knop; knop en deelpaneel lopen over de volle breedte van de
   stap (ook onder het bolletje), zodat er op 320 px niets buiten beeld valt (M10). Status in tekst én vorm: een vinkje
   met 'Klaar', een gevuld bolletje met 'Nu aan de beurt', een open bolletje. Labels >= 12 px, zonder hoofdletters.
   Gebruikt op DASH-01 (staat A en B), straks op Start voor de medewerker (BL-068); de compacte regel voor Start op
   mobiel (BL-013) en de hint op INT-05 (components/next_step_hint.html). */



.panel h2.first-steps-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}



/* Voortgangsbalk: versiering naast de tekst '2 van 4 klaar' (aria-hidden) */






























p.first-step-status--current {
    display: block;
    margin: 0.15rem 0 0;
}







/* De knop naast de uitleg (desktop); het deelpaneel (.share-panel, flex-basis 100%) op een eigen regel eronder */




/* Groene tekst op green-50: --color-text-green (5,9:1); --color-link haalt daar geen 4,5:1 (BRAND_GUIDE, Kleuren) */


/* Zonder gemeente: de reden en de tekstlink onder de uitleg, in lijn met de tekst (bolletje 2rem + ruimte 0,85rem) */




/* Compacte regel: Start voor de coach op mobiel (BL-013) en de hint op INT-05 */






/* Een link in een zin: onderstreept, niet alleen in kleur (WCAG 1.4.1) */


/* Hint voor de volgende stap op INT-05 (components/next_step_hint.html) */
















/* ── Start voor de coach op mobiel: 'Vandaag' (BL-013, doelbeeld §5.1) ──
   templates/dashboards/home.html heeft twee delen: .start-today (tot 780 px) en .start-overview (het dashboard vanaf
   781 px, BL-068 volgt). Er staat er altijd één op het scherm (display: none voor de ander): geen dubbele inhoud voor
   een screenreader en per breedte één primaire knop (M11). Volgorde van boven naar beneden: 'Eerste stappen' (compact),
   'Vandaag', de kaart 'Verder met' met [[ Registreren ]] over de volle breedte (M5: bij scrollY=0 in beeld),
   'Andere interventies', '› Alle interventies' en de installatiehint. Kleuren alleen via de tokens. */




















/* De enige primaire knop van het scherm: over de volle breedte en >= 48 px hoog (BL-148, doelbeeld §5) */




/* Onder [[ Registreren ]] het deelcomponent (BL-016): de link, [ Link kopiëren ] [ QR-code tonen ] en [ Delen ] */


























/* Losse tekstlink onder de lijst, op de lichtgrijze pagina: --color-text-green (--color-link haalt daar geen 4,5:1,
   BRAND_GUIDE Kleuren). >= 44 px hoog om aan te tikken (M8), onderstreept bij hover en focus. */










/* ── Start voor de medewerker op desktop (BL-068, doelbeeld §5.2) ──
   .start-overview (vanaf 781 px) in templates/dashboards/home.html. Van boven naar beneden, op elke breedte in dezelfde
   volgorde als de DOM (geen order: WCAG 1.3.2, 2.4.3): 'Eerste stappen', 'Vraagt aandacht', 'Kerncijfers', de tabel
   'Actieve interventies' over de volle breedte, en in staat C de twee grafieken naast elkaar (smaller dan 40rem onder
   elkaar). 'Nieuwe interventie' staat rechts op de regel van de kop van het eerste blok (.block-head-action).
   Kleuren alleen via de tokens. */




.block-head-action {
    flex: 0 0 auto;
    margin-left: auto;
}



/* In de kop van 'Eerste stappen': '2 van 4 klaar' bij de titel, de knop rechts */






/* Vraagt aandacht (besluit PO vraag D1): per signaal één regel met één tekstlink */














/* Kerncijfers: vier tegels. Vanaf 56rem breed (1440 px) op één rij, smaller 2 x 2 (vaste kolommen, BL-060) */
















/* De tabel 'Actieve interventies' (dashboards/_start_table.html). Vanaf 42rem breed een gewone tabel; smaller een blok
   per interventie (naam en status, de aantallen in een zin, dan de links), zonder zijwaarts scrollen. */


















/* De status en [ Delen ] naast elkaar (BL-001/BL-016), onder elkaar als de kolom te smal is (een lange status als
   'Opent op 5 okt. 2026'); het paneel opent in de rij eronder, over de volle breedte */






/* In de smalle statuskolom zonder het QR-icoon; het pijltje laat zien dat de knop iets openklapt */














/* '› Registreren' en '› Resultaten' onder elkaar: zo blijft er breedte over voor de naam. Elk aanraakvlak is minstens
   24 px hoog (WCAG 2.5.8). */












/* De cijfers onder een grafiek als tabel ('› Toon als tabel', dashboards/_chart_table.html) */
.chart-table-details {
    margin: 0.75rem 0 0;
}

.chart-table-summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-link);
    list-style: none;
}

.chart-table-summary::-webkit-details-marker {
    display: none;
}

.chart-table-hide,
.chart-table-details[open] .chart-table-show {
    display: none;
}

.chart-table-details[open] .chart-table-hide {
    display: inline;
}

.chart-table-wrapper {
    max-height: 18rem;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.chart-table th,
.chart-table td {
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

.chart-table thead th {
    font-size: 0.75rem;
}

.chart-table tbody th {
    font-weight: 400;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
}

.chart-table .chart-table-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Empty state styling */

.empty-state {
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
}

.empty-state-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* Mobile: show first 3 stat cards, hide last 2 */





.dashboard-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

@media (min-width: 1100px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* BL-147: een item (interventie, vragenlijst, registratie) open je overal op dezelfde manier: via de titel.
   Eén link met de naam als toegankelijke naam, zonder losse 'Openen'-, 'Bekijk details'- of 'Bekijken →'-knop.
   Op mobiel is zo'n losse tekstlink in een kaart of tabel minstens 24 px hoog (M8, WCAG 2.5.8). */
.item-link {
    text-decoration: none;
}

.item-link:hover,
.item-link:focus-visible {
    text-decoration: underline;
}

@media (max-width: 780px) {
    .item-link {
        display: inline-flex;
        align-items: center;
        min-height: 1.5rem;
    }
}

/* VL-01: de drie standaardvragenlijsten als één compacte lijst (BL-147, BL-149). Zo blijft de primaire knop
   van 'Eigen vragenlijsten' op mobiel in het eerste scherm (M5), zonder horizontaal scrollen (M10). */










/* VL-01 eigen vragenlijsten (BL-073): een tabel op een breed scherm, op mobiel een lijst met één kaart per
   vragenlijst. Er staat er altijd maar één op het scherm (display: none), dus geen dubbele inhoud voor een
   screenreader, geen horizontale scroll (M10) en geen scrollregio (axe scrollable-region-focusable, M6). */










/* Compact (herstel batch 3): 'Interventies' en 'Aanpasbaar' op één regel als dat past, zodat een pagina met 25
   kaarten op mobiel korter is */


/* 'Pagina 1 van 2 · 30 eigen vragenlijsten' boven de lijst (BL-075): je ziet meteen dat er meer pagina's zijn */














.quick-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-start;
}

/* ── Deelpaneel (BL-001) ──
   components/share_disclosure.html (knop + paneel) en components/share_questionnaire_panel.html (één vragenlijst).
   De knop heeft aria-expanded; het paneel opent inline (in de flow), over de volle breedte van de kaart of de rij
   knoppen, dus het ligt nooit over andere knoppen. De QR-code staat direct in het paneel (geen tweede tik).
   Gedrag (één paneel open, Escape, klik buiten, in beeld schuiven): static/js/dashboard-share-details.js. */

.share-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.share-toggle-icon,
.share-toggle-chevron {
    flex-shrink: 0;
}

.share-toggle-chevron {
    transition: transform 0.15s ease;
}

.share-toggle[aria-expanded="true"] .share-toggle-chevron {
    transform: rotate(180deg);
}

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

.share-panel {
    flex: 1 0 100%;   /* in een flex-rij met knoppen: een eigen regel over de volle breedte */
    width: 100%;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface-strong);
}

/* Meerdere vragenlijsten (INT-01): onder elkaar op mobiel, naast elkaar vanaf tabletbreedte */
.share-panel--list {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 781px) {
    .share-panel--list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.share-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    min-width: 0;
    text-align: left;
}

.share-item-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Naam en statusbadge: breekt de badge naar een eigen regel, dan staat hij links uitgelijnd (geen marge ervoor) */
.share-item-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.25rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.share-item-meta {
    margin: 0;
    overflow-wrap: anywhere;
}

/* De QR-code in de pagina (qr_open): in een deelpaneel met één vragenlijst en in het paneel na het aanmaken, 240 px.
   Elders opent 'QR-code tonen' de dialoog hierboven (280 px, BL-016). */
.share-item-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--qr-background);
}

.share-item-qr-image {
    display: block;
    width: 240px;
    height: 240px;
    max-width: 100%;
    border-radius: 8px;
    background: var(--qr-background);
}



.share-item-hint {
    margin: 0;
    text-align: center;
}

.share-item-link {
    width: 100%;
    min-width: 0;
}

.share-item-missing {
    margin: 0;
}

/* Vaste volgorde (BL-016): 'Link kopiëren', 'QR-code tonen', 'Resultaten'. Op mobiel even breed en >= 44 px hoog. */
.share-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* BL-012: 'Link weer openen' staat bij een link die niet open is in de knoppenrij; het formulier telt als knop */
.share-reopen-form {
    display: contents;
}

/* BL-012: 'Link sluiten' onder het deelcomponent, apart van de deelknoppen (VL-03, REG-04) */
.share-item-manage {
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border);
}

.share-item-manage form {
    margin: 0;
}

/* 'Meer acties' in de vragenlijstregel op INT-05 (doelbeeld §5.3): de minder gebruikte acties achter een disclosure
   (base.js, data-disclosure-toggle). Het paneel opent op de plek zelf, onder de knop, en ligt nergens overheen. */
.share-more {
    min-width: 0;
}

.share-more-chevron {
    margin-left: 0.3rem;
    transition: transform 0.15s ease;
}

.share-more-toggle[aria-expanded="true"] .share-more-chevron {
    transform: rotate(180deg);
}

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

.share-more-panel {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    margin: 0.15rem 0 0;
    padding: 0.35rem 0.75rem;
    list-style: none;
    border-left: 3px solid var(--color-border);
}

.share-more-panel li,
.share-more-panel form {
    margin: 0;
}

.share-more-panel .text-action {
    font-weight: 600;
}

/* De vragenlijstregel op INT-05 (more) is op mobiel compact (BL-049, T9): 'Delen', 'Bekijk als deelnemer' en de versie
   staan dan onder 'Meer acties' (share-more-mobile) in plaats van in de regel (share-action-wide, share-meta-detail).
   Vanaf 781 px andersom. De link, [ Link kopiëren ] en [ QR-code tonen ] blijven altijd in de regel (BL-016). */
.share-more-detail {
    flex-basis: 100%;
    padding: 0.25rem 0;
}

@media (max-width: 780px) {
    .share-item-actions > .share-action-wide,
    .share-item-meta .share-meta-detail {
        display: none;
    }
}

@media (min-width: 781px) {
    .share-more-panel > .share-more-mobile {
        display: none;
    }
}

/* Een actie als tekstlink of tekstknop, met een aanraakvlak van minstens 24 px (WCAG 2.2, 2.5.8; op mobiel 44 px) */
.text-action {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0;
}

@media (max-width: 780px) {
    .text-action {
        min-height: 2.75rem;
    }
}

/* Een regel met onderdelen gescheiden door '·': breekt de regel, dan staat het scheidingsteken nooit los aan het begin
   of eind van een regel. Opbouw, binnen een alinea: <span class="meta-line"><span class="meta-line-items">
   <span class="meta-item">…</span>…</span></span>. Het teken staat vóór elk onderdeel (::before) en de rij schuift even
   ver naar links; het teken van een onderdeel dat een regel begint, valt zo buiten het vlak en is niet te zien
   (overflow: hidden). De rand van 0,35rem rond het vlak (met een even grote negatieve marge) houdt de focusring van
   een link erin heel. */
.meta-line {
    display: block;
    overflow: hidden;
    padding: 0.35rem;
    margin: -0.35rem;
}

.meta-line-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -1.1em;
}

/* Breekt één onderdeel zelf over twee regels (bv. een lange looptijd op 320 px), dan begint de tweede regel na het
   vlak van het teken, niet in het verborgen deel: anders viel het begin weg ('026' in plaats van '2026', WCAG 1.4.10).
   Een hangende inspringing: de eerste regel begint met het teken (zoals altijd), de volgende regels 1,1em verder. */
.meta-item {
    padding-left: 1.1em;
    text-indent: -1.1em;
    min-width: 0;
}

.meta-item * {
    text-indent: 0;
}

.meta-item::before {
    content: "·";
    display: inline-block;
    width: 1.1em;
    text-align: center;
    text-indent: 0;
}

/* BL-009: 'Kopiëren lukte niet' bij de link (static/js/base.js) */
.share-copy-failed .message {
    margin: 0;
}

/* Status van de link (BL-012): badge bij de naam; bij een link die niet open is een waarschuwing in plaats van de
   QR-code (components/share_questionnaire_panel.html). */
.share-item-status {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    text-transform: none;
    vertical-align: middle;
}


.share-item-warning {
    width: 100%;
}

.share-item-warning .message {
    margin: 0;
}

.link-status-warning {
    font-size: 0.9rem;
    line-height: 1.45;
}

/* BL-074: 'Al ingevuld: deze vragenlijst ligt vast.' waar 'Andere vragenlijst kiezen' wegvalt */




.share-panel--list .share-item-hint {
    display: none;   /* één keer uitleggen is genoeg; bij drie vragenlijsten is het herhaling */
}

.share-panel--list .share-item-qr-image {
    width: 160px;
    height: 160px;
}

.share-url-label {
    display: block;
}

.share-url-input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-muted);   /* >= 3:1: het veld is duidelijk te zien (WCAG 1.4.11), ook om zelf te kopiëren */
    border-radius: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text);
    background: var(--color-surface);
}

/* Een lijst met links (VL-03, REG-04): elke link als kaart met het deelcomponent */




@media (max-width: 780px) {
    /* Drie vragenlijsten op 390 px: onder elkaar, met een lijn ertussen */
    .share-panel--list .share-item + .share-item {
        padding-top: 0.85rem;
        border-top: 1px solid var(--color-border);
    }

    /* Op mobiel knoppen van >= 44 px hoog die de regel vullen; een label breekt nooit over twee regels (op 390 px
       'Link kopiëren' + 'QR-code tonen' en 'Delen' + 'Bekijk als deelnemer'), op een heel smal scherm onder elkaar */
    .share-item-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .share-item-actions > .button-secondary,
    .share-item-actions .share-manage-button {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 2.75rem;
        white-space: nowrap;
        line-height: 1.2;
        text-align: center;
    }

    .share-item-manage .button-secondary {
        width: 100%;
        min-height: 2.75rem;
    }

    /* 16 px voorkomt dat iOS inzoomt als je het linkveld aantikt om te selecteren */
    .share-url-input {
        font-size: 1rem;
    }
}

/* ── Bevestiging na registreren (BL-017, doelbeeld §5.4B) ──
   templates/interventions/activity_detail.html (REG-04) en components/share_confirm.html. Een smalle kolom
   (body-registration-focus). Op 390x844 staan de QR-code en de hoofdknop bij scrollY=0 in beeld (M5): compacte
   ruimtes, de QR-code bovenaan in het deelcomponent, de hoofdknop op volle breedte en minstens 44 px hoog. */


/* Een link in een melding op de registratieschermen (bv. 'Open de registratie' bij een datum buiten de looptijd):
   groen op de lichte meldingskleur haalt met --color-link maar 4,2:1; --color-text-green (green-700) haalt >= 4,5:1 */


/* Groene tekst op de lichtgroene melding: --color-text-green (green-700, >= 4,5:1), onderstreept */






















.share-native-button {
    gap: 0.4rem;
}

.share-native-icon {
    flex-shrink: 0;
}





/* Op een heel smal scherm (320 px) de twee knoppen onder elkaar */


/* REG-02/REG-03 (doelbeeld §5.4A): 'Annuleren' als tekstlink, minstens 44 px hoog om aan te tikken */
.registration-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    font-weight: 600;
}

.section-title-inline {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.textarea-compact {
    min-height: 4rem;
}

.registration-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* REG-02 (doelbeeld §5.4A): waarom er na opslaan geen QR-code komt, één zin onder de knop */


/* REG-02/REG-03 (BL-036): uitleg onder de datum als die buiten de looptijd ligt (een .message-warning, iets kleiner) */
.registration-date-note {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
}

/* REG-03 (BL-036): 'Registratie verwijderen' als apart blok onder het formulier, gescheiden door een lijn */






.intervention-header-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .intervention-header-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}







/* REG-04 (BL-047): het kruimelpad 'Interventies › <naam> › Registratie <datum>' mag breder zijn dan de smalle kolom van
   de kaart (daar brak de datum naar een tweede regel). De kolom blijft in het midden (auto-marges in de flexkolom van
   .app-main: zo breed als de inhoud); het kruimelpad en de kaart beginnen links op dezelfde lijn. */




.form-row-2 {
    display: grid;
    gap: 1rem;
}

@media (min-width: 560px) {
    .form-row-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.cta-bar--secondary {
    margin-top: 0.5rem;
}

.cta-bar--secondary .button-secondary {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.panel--flat {
    background: transparent;
    border: 0;
    box-shadow: none;
}





/* Gemeente: de kaart en het wijkpaneel (GEO-01); de paginaopmaak staat sinds V2-4 in v2.css §26 */




/* width: 100%: .app-main is een flexkolom, en met auto-marges werd de breedte anders die van de inhoud (de kaart
   kromp mee met de tekst in de rechterkolom) */


/* BL-131: de kleinere ruimte onderaan geldt alleen buiten de mobiele layout. Zo overschrijft deze regel nooit de
   ruimte voor de bottom-nav (.app-main .main-content, max-width 780px), ook niet door zijn plek in dit bestand. */


/* Op mobiel ruimte voor de bottom-nav, zoals op de andere schermen: anders valt de laatste
   knop (en de focus erop) onder de nav */




.muni-muted {
    color: var(--v2-inkt-2);
    margin: 0;
}

.muni-hint {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
}

/* Link in de uitleg voor platformbeheer: onderstreept en donkergroen, ook op het grijze kaartvlak (>= 4,5:1) */
.muni-hint a {
    color: var(--color-text-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.muni-hint code {
    font-size: 0.82rem;
    padding: 0.12rem 0.35rem;
    background: var(--v2-papier-2);
    border-radius: 4px;
    border: 1px solid var(--v2-lijn);
}













/* BL-131: geen max-height met een eigen scrollbalk meer; op desktop werd de kolom daardoor afgekapt, zonder hint
   dat er meer volgt. De kolom groeit nu mee en scrolt met de pagina. */














.muni-map-frame {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    margin-top: 0;
    border-radius: var(--v2-r-veld);
    overflow: hidden;
    border: 1px solid var(--v2-lijn);
    background: #e8ecf1;
    isolation: isolate;
}

/* Vaste kaarthoogte: overlays (legenda, detail) positioneren t.o.v. dit vlak, niet t.o.v. een meegroeide flex-ruimte. */
.muni-map-stack {
    position: relative;
    width: 100%;
    height: min(56vh, 520px);
}

.muni-map-frame--static {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(56vh, 520px);
    padding: 2rem;
}

.muni-map-empty-inner {
    text-align: center;
    max-width: 36ch;
    font-size: 0.95rem;
}

.muni-map-leaflet {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Bronvermelding van de wijkgrenzen (besluit PO vraag 38). Minstens 12 px tekst en een doel van 24 px hoog (M8). */
.muni-map-cbs-attrib {
    margin: 0.35rem 0 0;
    text-align: right;
    font-size: 0.8rem;
    color: var(--v2-inkt-2);
}

.muni-map-cbs-attrib__link {
    display: inline-block;
    padding: 0.3rem 0;
    line-height: 1.4;
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.muni-map-cbs-attrib__link:hover {
    color: var(--color-action-hover);
}

/* Wijken en gemeentegrens (BL-127): één neutrale kleur zolang er geen echte wijk-KPI is. Leaflet zet de standaard-
   kleuren als SVG-attribuut; deze regels gaan daar voor, zodat alle kleuren uit de tokens in :root komen. */
/* De BRT-ondergrond (PDOK) heeft eigen plaats- en buurtnamen en groene bossen. De tegellaag is iets lichter (opacity
   0.6 in municipality_map.js) en de wijkvlakken iets voller, zodat de ondergrond niet op data lijkt en de wijklabels
   (met eigen achtergrond) de namen zijn die opvallen. */
.muni-map-leaflet path.muni-wijk-area {
    stroke: var(--green-600);
    stroke-width: 1.5px;
    stroke-opacity: 0.9;
    fill: var(--green-500);
    fill-opacity: 0.3;
}

.muni-map-leaflet path.muni-wijk-area:hover {
    fill-opacity: 0.4;
}

.muni-map-leaflet path.muni-wijk-area.is-selected {
    stroke: var(--green-700);
    stroke-width: 3px;
    stroke-opacity: 1;
    fill-opacity: 0.48;
}

/* De gekozen wijk krijgt zijn rand als kopie in een laag boven de andere wijken (municipality_map.js, wijkSelectPane),
   zodat de wijk zelf op zijn plek in de SVG blijft (Tab-volgorde). Zelfde rand als .is-selected. */
.muni-map-leaflet .leaflet-wijkSelect-pane {
    z-index: 450;
    pointer-events: none;
}

.muni-map-leaflet path.muni-wijk-selected-ring {
    stroke: var(--green-700);
    stroke-width: 3px;
    stroke-opacity: 1;
    fill: none;
}

/* Toetsenbordfocus op een wijk (BL-141, WCAG 2.4.7 en 2.4.11). De globale :focus-visible-ring staat op de wijk zelf;
   een buurwijk die later in de SVG staat, tekent daar overheen. Daarom tekent municipality_map.js bij :focus-visible
   dezelfde ring (tokens --color-focus-ring, --focus-ring-width, met de witte binnenrand) ook als kopie van de wijk in
   een eigen laag boven de wijken en de wijklabels, onder de tooltip. Zolang een wijk zo focus heeft, zijn de andere
   wijken niet aanwijsbaar en telt de hele omhullende rechthoek van de gefocuste wijk als de wijk: niets ligt er dan
   bovenop, ook niet bij een holle vorm. Muis of vinger op de kaart haalt .has-focused-wijk weg. */
.muni-map-leaflet .leaflet-wijkFocus-pane {
    z-index: 620;
    pointer-events: none;
}

.muni-map-leaflet path.muni-wijk-focus-ring {
    stroke: var(--color-focus-ring);
    stroke-width: var(--focus-ring-width);
    stroke-opacity: 1;
    fill: none;
    filter: drop-shadow(0 0 1px var(--color-focus-ring-inner)) drop-shadow(0 0 1px var(--color-focus-ring-inner));
}

.muni-map-leaflet.has-focused-wijk path.muni-wijk-area:not(:focus) {
    pointer-events: none;
}

.muni-map-leaflet.has-focused-wijk path.muni-wijk-area:focus {
    pointer-events: bounding-box;
}

.muni-map-leaflet path.muni-gemeente-outline {
    stroke: var(--green-700);
    stroke-width: 3px;
    stroke-opacity: 1;
    fill: none;
}

/* Legenda onder de kaart (BL-135): de tekens met dezelfde kleuren als de lijnen en vlakken hierboven, zodat legenda en
   kaart altijd gelijk blijven. Geen kleurschaal: alle wijken hebben één kleur (BL-127). */
.muni-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-s2) var(--v2-s5);
    margin: var(--v2-s3) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--v2-inkt-2);
}

.muni-legenda li {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-s2);
}

.muni-legenda__teken {
    flex: none;
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
    border-radius: 2px;
}

.muni-legenda__teken--grens {
    height: 0;
    border-top: 3px solid var(--green-700);
    border-radius: 0;
}

.muni-legenda__teken--wijk {
    border: 1.5px solid var(--green-600);
    background: color-mix(in srgb, var(--green-500) 30%, var(--v2-vel));
}

.muni-legenda__teken--gekozen {
    border: 3px solid var(--green-700);
    background: color-mix(in srgb, var(--green-500) 48%, var(--v2-vel));
}

/* GEO-01 (V2-4): de oude --muni-* tokens zijn weg; het paneel gebruikt de V2-tokens uit v2.css (:root) */
.muni-wijk-detail {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1100;
    width: min(260px, calc(100% - 24px));
    background: var(--v2-vel);
    border: 1px solid var(--v2-lijn);
    border-radius: var(--v2-r-veld);
    box-shadow: var(--v2-schaduw-zweef);
    padding: 0.85rem 1rem 1rem;
}

/* Vaste maat van 36 px: de algemene knopregel (min-height 2,9rem en padding) maakte de knop groter dan de ruimte
   naast de wijknaam, zodat hij over de eerste cijferregel viel */
.muni-wijk-detail__close {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    border: none;
    background: var(--v2-papier-2);
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    padding: 0;
    border-radius: 6px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--v2-inkt-2);
}

.muni-wijk-detail__close:hover {
    color: var(--v2-inkt);
}

.muni-wijk-detail__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    padding-right: 2.5rem;
    min-height: 1.85rem;
    line-height: 1.35;
}

.muni-wijk-detail__title--solo {
    padding-top: 0.15rem;
}

.muni-wijk-detail__stats {
    margin: 0.65rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.muni-wijk-detail__stats dt {
    margin: 0;
    font-weight: 500;
    color: var(--v2-inkt-2);
}

.muni-wijk-detail__stats dd {
    margin: 0;
    font-weight: 600;
    color: var(--v2-inkt);
    text-align: right;
}

.muni-wijk-detail__empty {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
}

/* BL-140: op mobiel ligt het wijkpaneel onder de kaart, niet eroverheen (het bedekte daar bijna de hele kaart). De
   kaart houdt zijn hoogte; het paneel is een strook onder de kaart in hetzelfde vlak, met de sluitknop rechtsboven
   naast de wijknaam (de titel houdt rechts ruimte vrij, dus de knop valt nooit over een waarde). */
@media (max-width: 780px) {
    .muni-map-stack { height: auto; }
    .muni-map-leaflet { height: min(56vh, 520px); }
    .muni-wijk-detail {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        border: 0;
        border-top: 1px solid var(--v2-lijn);
        border-radius: 0;
        box-shadow: none;
    }
}































/* 'Meer cijfers': een tikdoel van ruim 24 px hoog (BL-130, M8) */




/* Laden, klaar en fout in het kaartvak (BL-136; municipality_map.js zet de klasse en de tekst). Tijdens het laden
   staat 'Kaart laden…' midden in het grijze vlak; daarna is de melding alleen voor de screenreader ('De kaart is
   klaar …'). Bij een fout krimpt het kaartvak tot de melding met 'Opnieuw proberen' (.is-zonder-kaart), en komt het
   wijkpaneel eronder, zoals op mobiel. */
.muni-map-status {
    position: absolute;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--v2-s2);
    padding: var(--v2-s5);
    text-align: center;
    pointer-events: none;
}

.muni-map-status:empty {
    display: none;
}

.muni-map-status__tekst {
    margin: 0;
    max-width: 40ch;
    padding: var(--v2-s3) var(--v2-s4);
    background: var(--v2-vel);
    border: 1px solid var(--v2-lijn);
    border-radius: var(--v2-r-veld);
    color: var(--v2-inkt);
    font-weight: 600;
}

.muni-map-status.is-klaar {
    inset: auto;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.muni-map-status.is-fout {
    pointer-events: auto;
}

.muni-map-status.is-fout .muni-map-status__tekst {
    font-weight: 500;
}

.muni-map-stack.is-zonder-kaart {
    height: auto;
}

.muni-map-stack.is-zonder-kaart .muni-map-leaflet {
    display: none;
}

.muni-map-stack.is-zonder-kaart .muni-map-status {
    position: static;
}

/* Zonder kaart heeft de legenda niets om uit te leggen */
.gem-kaart-vel:has(.muni-map-stack.is-zonder-kaart) .muni-legenda {
    display: none;
}

.muni-map-stack.is-zonder-kaart .muni-wijk-detail {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    border: 0;
    border-top: 1px solid var(--v2-lijn);
    border-radius: 0;
    box-shadow: none;
}

/* De wijken als lijst onder de kaart (BL-135): dicht in een v2-details; kolommen op brede schermen */
.muni-wijk-lijst {
    margin-top: var(--v2-s2);
}

.muni-wijk-lijst__items {
    margin: var(--v2-s2) 0 0;
    padding: 0;
    list-style: none;
    columns: 2 12rem;
    column-gap: var(--v2-s5);
}

.muni-wijk-lijst__items li {
    break-inside: avoid;
}

/* Twee klassen: .v2-tekstknop (v2.css, later geladen) zet min-height 32px; in de lijst een ruimer tikdoel */
.muni-wijk-lijst .muni-wijk-lijst__knop {
    min-height: 2.75rem;
    text-align: left;
}

.muni-map-noscript {
    margin: var(--v2-s2) 0 0;
}



/* Wijk-labels op de kaart */
.muni-wijk-label {
    background: transparent !important;
    border: none !important;
}

/* Het label staat met zijn midden op het punt in de wijk. municipality_map.js verbergt labels die een ander label,
   een kaartknop of de rand van de kaart raken (BL-126): nooit overlap, ook niet op het startzoomniveau. */
.muni-wijk-label__inner {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: inline-block;
    padding: 0.12rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--v2-inkt);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--v2-lijn);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    white-space: nowrap;
}

.muni-wijk-label.is-hidden {
    visibility: hidden;
}



.muni-leaflet-tooltip {
    font-family: var(--v2-font);
    font-size: 0.82rem;
}

/* CSP: utility classes (geen inline style="" in templates) */



.heading-flush {
    margin: 0;
}

.pagination-mt-1 {
    margin-top: 1rem;
}

/* Paginering (components/pagination.html, BL-075, BL-035): INT-01, VL-01 en REG-01. Links als doel van minstens 24 px
   (M8). Drie vaste plekken: 'Vorige' links, de status in het midden, 'Volgende' rechts, ook als een link ontbreekt. */
.pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem 1rem;
}

/* REG-01: de kop met de naam boven de tabs (BL-049); het paneel zelf geeft de ruimte */


/* REG-01: 'Terug naar interventie' met afstand tot de paginering */


.pagination-prev {
    grid-column: 1;
    justify-self: start;
}

.pagination-status {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.pagination-next {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.pagination a {
    display: inline-flex;
    grid-row: 1;
    align-items: center;
    gap: 0.3em;
    min-height: 1.5rem;
    font-weight: 600;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-075 {
    margin-top: 0.75rem;
}

.m-0 { margin: 0; }








.field-error {
    color: var(--color-danger);
    margin-top: 0.25rem;
}




.response-hint-block {
    display: block;
    font-size: 0.75rem;
}

/* Resultaten per vraag (DASH-03, BL-055/BL-056/BL-059): components/question_result.html. Herbruikbaar voor BL-062 en
   BL-067 (DASH-02 en de tab 'Resultaten'). */
.questionnaire-results-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0 0 0.75rem;
}

.questionnaire-results-context > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
}

.questionnaire-results-context dt {
    color: var(--color-muted);
}

.questionnaire-results-context dd {
    margin: 0;
    font-weight: 600;
}

.questionnaire-results-empty-actions {
    margin-top: 1rem;
}

.question-result-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.question-result-meta {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.question-result-average {
    color: var(--color-text);
}

.question-result-table {
    max-width: 40rem;
}

/* BL-062: compacte rijen, zodat een vraag met vijf antwoorden niet een heel scherm vult. Op een smal scherm past de
   tabel zonder horizontaal scrollen (anders een niet-focusbare scrollregio, axe). */
.question-result-table th,
.question-result-table td {
    padding: 0.55rem 0.75rem;
}

@media (max-width: 480px) {
    .question-result-table th,
    .question-result-table td {
        padding: 0.55rem 0.5rem;
    }
}

.question-result-table tbody th {
    font-weight: 500;
}

/* BL-062: per antwoord een balk met het percentage (SVG met een breedte-attribuut, geen inline style: CSP). Breed
   staat de balk naast het antwoord, op een smal scherm eronder. De balk is alleen voor het oog; aantal en percentage
   staan als tekst in de kolommen ernaast. Kleuren uit de tokens: de balk in de actiekleur (ruim 3:1 op het spoor). */
.question-result-table {
    width: 100%;
}

.question-result-option {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(6rem, 1.25fr);
    align-items: center;
    gap: 0.35rem 1rem;
}

.question-result-option-label {
    overflow-wrap: anywhere;
}

.question-result-bar {
    display: block;
    width: 100%;
    height: 0.65rem;
    border-radius: 999px;
    overflow: hidden;
}

.question-result-bar-track {
    fill: var(--color-surface-container-high);
}

.question-result-bar-fill {
    fill: var(--color-action);
}

/* De breedte van het vraagresultaat zelf bepaalt de opmaak (container query), niet het scherm: in 'Start en eind' staan
   twee resultaten naast elkaar en is elk resultaat smal (BL-151: de tabel scrolde daar, en op 320 px). Smaller dan
   30rem staat de balk onder het antwoord; smaller dan 20rem staan de kolomkoppen alleen voor een screenreader (aantal
   en percentage spreken naast de balk voor zich) en is de binnenruimte kleiner, zodat de tabel altijd past. */
.question-result {
    container: question-result / inline-size;
}

@container question-result (max-width: 29.99rem) {
    .question-result-option {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container question-result (max-width: 19.99rem) {
    .question-result-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .question-result-table th,
    .question-result-table td {
        padding: 0.55rem 0.35rem;
    }
}

/* Matrixvraag (BL-062): per antwoord het aantal, het percentage en een balk, net als bij een keuzevraag */
.matrix-result-count {
    font-weight: 700;
}

.matrix-result-pct {
    font-size: 0.85rem;
    white-space: nowrap;
}

.matrix-result-bar {
    margin-top: 0.3rem;
}

.question-result-matrix-card dd.question-result-matrix-card-bar {
    grid-column: 1 / -1;
    margin: -0.1rem 0 0.2rem;
}

/* Matrixvraag in het resultaatcomponent (BL-055; ook voor DASH-02, BL-062): de stelling leest als de antwoorden in
   de andere resultaattabellen (zelfde grootte, gewicht en ruimte), niet als een kleine vette kop. */
.question-result .matrix-results-table th,
.question-result .matrix-results-table td {
    padding: 0.95rem 0.75rem;
}

.question-result .matrix-results-table tbody th {
    font-size: inherit;
    font-weight: 500;
    text-align: left;
    min-width: 12rem;
}

.question-result .matrix-results-table td {
    font-variant-numeric: tabular-nums;
}

/* Op een smal scherm: per stelling een blok met de verdeling (zoals het voorbeeld van de vragenlijst), in plaats
   van een tabel waarvan de laatste kolom buiten beeld valt. De tabel staat er dan niet. */
.question-result-matrix-cards {
    display: none;
}

@media (max-width: 600px) {
    .question-result-matrix-table {
        display: none;
    }

    .question-result-matrix-cards {
        display: grid;
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

.question-result-matrix-card {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
}

.question-result-matrix-card-title {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.question-result-matrix-card dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    margin: 0;
}

.question-result-matrix-card dt,
.question-result-matrix-card dd {
    margin: 0;
}

.question-result-matrix-card dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.question-result-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.question-result-answers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.question-result-answers li {
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    background: rgba(var(--color-muted-rgb), 0.06);
    border-left: 3px solid var(--green-500);
    overflow-wrap: anywhere;
}

.question-result-more {
    margin-top: 0.75rem;
}

.question-result-more > summary {
    cursor: pointer;
    color: var(--color-link);
    font-weight: 600;
    padding: 0.35rem 0;
}

.question-result-more > summary:hover {
    color: var(--color-action-hover);
}

.question-result-more[open] > summary {
    margin-bottom: 0.5rem;
}

/* BL-055: de knop zegt wat hij doet ('Alle 12 tonen' of 'Minder tonen') en de teller telt mee (alleen CSS). Met
   JavaScript (static/js/question-result.js) staan de extra antwoorden in dezelfde lijst, boven de knop. */
.question-result-more:not([open]) .when-open,
.question-result-more[open] .when-closed,
.question-result:not(:has(> .question-result-more[open])) .question-result-meta .when-open,
.question-result:has(> .question-result-more[open]) .question-result-meta .when-closed {
    display: none;
}

.question-result-more.is-joined[open] > summary {
    margin-bottom: 0;
}

/* Resultaten van een interventie (DASH-02, doelbeeld §5.5; BL-061, BL-062, BL-066). Elk deel is een paneel met een
   anker (#na-elke-keer, #start-en-eind, #registraties); BL-067 zet er 'Op deze pagina' boven. */
/* De uitsplitsing van 'Ingevulde vragenlijsten' per vragenlijst (BL-061): 'start 16 · na de bijeenkomst 42 · eind 5' */










/* De vragen van één vragenlijst onder elkaar in één paneel, gescheiden door een lijn */


/* Start en eind: eerst de twee vragenlijsten (naam, versie, 'N keer ingevuld' en één vervolgactie) naast elkaar, dan
   per vraag die in allebei staat de antwoorden bij de start en aan het eind naast elkaar; smal onder elkaar. */
















/* De breedte van de lijst bepaalt of start en eind naast elkaar staan (container query, BL-067): tussen ca. 961 en 1200
   px is het hoofdvak smal en vielen 'Aantal' en '%' rechts weg. Smaller dan 44rem onder elkaar. */









/* Luidt de vraag aan het eind anders, dan staat dat onder de vraag (niet in één kolom: dan lopen de tabellen scheef) */








/* Na de basisregel hierboven (een container query telt niet zwaarder): smaller dan 44rem onder elkaar */
@container start-end (max-width: 43.99rem) {
    

    /* Alleen een gemiddelde (getal, zonder tabel of lijst): start en eind blijven naast elkaar, zoals 'Start 2,1 |
       Eind 3,4' in doelbeeld §5.5 */
    .question-result-answers)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}







/* ── De tab 'Resultaten' van een interventie (DASH-02; BL-067, doelbeeld §5.5) ──
   Het kruimelpad, de kop (h1 'Resultaten' met 'Bijgewerkt <tijd>', daaronder de naam met de status), de tabs, 'Op deze
   pagina' met de inhoudsopgave per vraag, en de delen #kerncijfers, #na-elke-keer, #start-en-eind en #registraties.
   Een leesscherm zonder primaire knop (behalve 'Vragenlijst delen' in de lege staat). Op 1440x900 staat de
   inhoudsopgave per vraag bij scrollY=0 in beeld: de kop is daarom compact. */












/* 'Op deze pagina' en de inhoudsopgave per vraag: één paneel, direct onder de tabs */










/* Scheidingsteken alleen voor het oog, en nooit los aan het begin van een regel (hoort bij het item ervoor) */






/* De kop van de inhoudsopgave is de knop van de uitklapper: minstens 24 px hoog, met het driehoekje van de browser */




/* Genummerd zoals de koppen van de vragen ('1. Hoe tevreden ...'); breed in twee kolommen die je van boven naar
   beneden leest (1 t/m 5 links, 6 t/m 9 rechts) */








/* Nummer voor de vraag in het vraagresultaat (components/question_result.html, number) */
.question-result-number {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* Kerncijfers: vier vaste tegels. De breedte van het tegelblok bepaalt de kolommen (container query): vanaf 52rem vier
   naast elkaar, smaller 2 x 2. Tot 768 px elke tegel een lage rij (label links, waarde rechts, de uitsplitsing
   eronder), zoals de kerncijfers op INT-05. */






/* Labels op de tab minstens 12 px (woordenlijst, notatie; BL-159): de tegellabels en de eyebrows boven de delen */












/* Alle vragen van de start- en de eindvragenlijst (dashboards/_all_questions.html): één uitklapper per vragenlijst,
   onder de vergelijking. static/js/results-page.js klapt hem open als het adres naar zijn anker wijst. */


/* De gewone driehoek van <summary> blijft staan (display: list-item): hij zegt of de uitklapper open of dicht is.
   Aanraakvlak ca. 44 px hoog. */










.button-secondary--block-mt {
    margin-top: 1rem;
    display: inline-flex;
}

/* Foutpagina's (BL-110, BL-112, BL-113). Los (.error-page: anoniem, 400 en 500) of binnen de app-shell
   (.error-state--in-app: 403, 404 en de CSRF-fout voor wie is ingelogd). Opbouw in beide gevallen:
   foutcode, eventueel illustratie en sportkop (.error-kicker), dan een gewone zin en de vervolgstap. */
























/* Foutcode: één neutrale chip voor alle codes, los en binnen de app (zelfde stijl als .error-state--in-app) */




/* Kopschaal en tekstkleuren gelijk aan de foutpagina binnen de app (.error-state--in-app) */






/* Zelfde knopstijl (kleur, radius, hoogte) als .button-primary in de app */










/* Een link in een zin (bv. het mailadres op de 500-pagina) is ook zonder kleur herkenbaar (WCAG 1.4.1). */


/* Sportkop boven de gewone zin (besluit PO vraag 9): mag, maar nooit als enige uitleg en nooit bij een 403. */


/* Binnen de app-shell: een kaart in de inhoud, met menu, organisatie en uitloggen eromheen. */














/* Uitlogpagina (GET /logout/, BL-094): gecentreerde kaart zoals de foutpagina's binnen de app */






/* Het e-mailadres begint als geheel op een nieuwe regel; alleen als het zelf te lang is, breekt het af */




/* Inloggen (BL-093): de staat 'Check je mail' op AUTH-01 en 'Inloggen op dit apparaat?' op AUTH-02 */




/* Het adres staat op een eigen regel en breekt alleen af als het zelf te lang is */


/* Een adres midden in een zin (AUTH-02, meldingen op Gebruikers): als geheel naar de volgende regel, niet afgebroken
   op een koppelteken. Alleen een adres dat zelf langer is dan de regel, breekt af (inline-block + max-width). */
.address-inline {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    font-size: inherit;
    overflow-wrap: anywhere;
}



/* Een link midden in de tekst is ook zonder kleur herkenbaar (WCAG 1.4.1) */


.login-sent .registration-form-actions,
.login-confirm .registration-form-actions {
    margin-top: 1.5rem;
}



/* CSRF-fout voor respondenten (BL-110): een kaart in de huisstijl van de vragenlijst. */




/* Zelfde stijl als .button-secondary in de app */














/* Zelfde knopstijl (kleur, radius, hoogte) als .button-primary in de app */







/* ══════════════════════════════════════════
   INTERVENTIEDETAIL (INT-05), doelbeeld §5.3
   ══════════════════════════════════════════
   Eén kolom over de volle breedte, op mobiel en desktop in dezelfde volgorde als de HTML (WCAG 1.3.2, 2.4.3; BL-048,
   besluit PO vraag 34): de kop, eventueel de volgende stap, de vragenlijsten, de kerncijfers en de registraties. Geen
   smalle rechterkolom meer (die werd tussen 961 en 1260 px te krap, BL-041, en propte de deelknoppen samen). */


/* De kop (interventions/_intervention_header.html, ook op REG-01): boven het paneel het kruimelpad; in het paneel de
   naam (h1) met de status op één regel en één metaregel; rechts [[ Registreren ]] en daaronder [ Bewerken ] en voor
   beheerders [ Meer ▾ ]. Op mobiel eerst de titel, dan de knop over de volle breedte. */


























/* ── Vragenlijsten op INT-05: per standaardvragenlijst één regel met het deelcomponent ── */








/* De naam is een h3 onder de h2 'Vragenlijsten' (BL-049: de naam van de interventie is de h1): zonder de marge van
   .panel h3, zodat de regel even laag blijft */


/* Naam, status en metaregel op één regel als dat past (doelbeeld §5.3: 'Start  Standaard startvragenlijst v1  <Open>
   Ingevuld: 16'); anders breekt de metaregel naar de volgende regel. Het label 'Link' staat naast het veld. Zo is elke
   regel lager: na het aanmaken staat ook de volgende regel in het eerste scherm (K3, T10), op mobiel staan de laatste
   registraties minder ver onder de vouw (T9). */








/* Is het blok breed genoeg, dan de link en de knoppen naast elkaar: de regel blijft laag (doelbeeld §5.3). Een
   container query op het blok, niet de schermbreedte: tussen 961 en ca. 1300 px (zijbalk ernaast) werd de
   knoppenkolom anders zo smal dat elke knop op een eigen regel stond (1024 px, BL-049). Smaller staan de link en de
   knoppen onder elkaar, de knoppen op één rij. */




/* Nog geen vragenlijst gekozen: één compacte regel (naam en uitleg links, 'Vragenlijst kiezen' rechts) */








/* Op mobiel een lage vragenlijstregel (doelbeeld §5.3) en een lage kaart 'Verder met' op Start: het label 'Link' naast
   het veld in plaats van erboven. Het deelcomponent zelf blijft gelijk (volgorde en knoppen, BL-016); alleen de ruimte
   is kleiner, zodat de kerncijfers en de laatste registraties minder ver onder de vouw staan (T9). */


/* Kerncijfers op INT-05: '› Alle resultaten' als tekstlink onder de tegels (doelbeeld §5.3) */


/* De link staat op het lichtgrijze vlak van de pagina, niet in een paneel: donkergroen (BRAND_GUIDE, 4,5:1) */


/* Laatste registraties op INT-05 (doelbeeld §5.3): kop, tabel (onder 600 px kaarten) en '› Alle registraties (N)' */




/* ── De tabs van een interventie (components/intervention_tabs.html, BL-049) ──
   Links naar drie pagina's: Overzicht, Registraties (N), Resultaten. De actieve tab heeft een dikke balk onder de
   tekst en vet schrift, niet alleen een kleur (B-143), plus aria-current="page". Aanraakvlak 44 px hoog. */














/* Smal: de drie tabs delen de breedte, zodat ze op 320 px nog op één regel passen (geen zijwaarts scrollen, M10) */




/* ── Kruimelpad (components/breadcrumbs.html; doelbeeld §5.3 en §5.5, BL-049, BL-047) ──
   Breed: 'Interventies › Buurtsport Brandevoort', de huidige pagina als gewone tekst. Mobiel (<= 780 px) alleen de weg
   terug, '‹ Interventies', op één regel. Het pad staat op het lichtgrijze vlak van de pagina: links in
   --color-text-green (green-700, >= 4,5:1 op --color-surface) en vet, dus niet alleen door kleur herkenbaar. Een
   aanraakvlak van minstens 24 px (WCAG 2.2, 2.5.8), op mobiel 32 px. */
.breadcrumbs {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.35;
}

.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
}

.breadcrumbs-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--color-text-green);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.breadcrumbs-item--current {
    color: var(--color-muted);
    overflow-wrap: anywhere;
}

.breadcrumbs-sep {
    color: var(--color-muted);
}

.breadcrumbs-back-sign {
    display: none;
}

@media (max-width: 780px) {
    .breadcrumbs {
        margin-bottom: 0.25rem;
    }

    .breadcrumbs-item {
        display: none;
    }

    .breadcrumbs-item.breadcrumbs-item--back {
        display: inline-flex;
    }

    .breadcrumbs-item--back .breadcrumbs-sep {
        display: none;
    }

    .breadcrumbs-back-sign {
        display: inline;
        margin-right: 0.3em;
    }

    .breadcrumbs-link {
        min-height: 2rem;
    }
}

/* [ Meer ▾ ] in de kop van een interventie (alleen voor beheerders: 'Verwijderen…'). Het disclosure-patroon van
   base.js (data-disclosure-toggle): het paneel ligt als klein menu onder de knop, over de inhoud eronder, en sluit met
   Escape, een klik ernaast of Tab naar buiten. Breed rechts uitgelijnd onder de knop, mobiel links (de knoppen staan
   daar links), zodat het op 320 px binnen het scherm blijft. */


















/* De uitsplitsing van 'Ingevuld' (components/kpi_tile.html, BL-049, BL-061): per gekozen vragenlijst de vaste naam
   links en het aantal rechts, op INT-05 en op de tab 'Resultaten' dezelfde opmaak (P8). Tekst minstens 13 px (BL-159). */






/* Een tegel zonder uitsplitsing naast de hoge tegel 'Ingevuld': de inhoud verticaal in het midden, niet bovenin met
   een leeg vlak eronder */


/* Tegels met gecentreerde inhoud (tegelblok van 30 tot 44rem, zie .int-stats): de uitsplitsing over de hele breedte
   van de tegel, naam links en aantal rechts */


/* Mobiel (<= 768 px): de drie tegels onder elkaar, elk als lage rij (label links, waarde rechts, de uitsplitsing
   eronder), in plaats van drie smalle kolommen waarin 'Vragenlijst na de bijeenkomst 42' over drie regels breekt. */


/* REG-01, de tab 'Registraties': kop en aantal boven de tabel */








/* BL-151: een tabel die op een smal scherm nog zijwaarts scrolt (de matrix op DASH-02 en DASH-03 op een breed scherm,
   Team op ORG-01), is een benoemde regio met tabindex="0" (axe scrollable-region-focusable) en krijgt aan de kant waar
   nog meer staat een schaduw: de hint dat er meer is. Twee witte vlakken schuiven mee met de inhoud
   (background-attachment: local) en dekken de schaduw af zodra je aan dat eind bent. */
.table-wrapper[role="region"] {
    background:
        linear-gradient(to right, var(--color-surface-strong) 30%, transparent) left center / 2.5rem 100% no-repeat local,
        linear-gradient(to left, var(--color-surface-strong) 30%, transparent) right center / 2.5rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(var(--color-muted-rgb), 0.38), rgba(var(--color-muted-rgb), 0)) left center / 0.85rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(var(--color-muted-rgb), 0.38), rgba(var(--color-muted-rgb), 0)) right center / 0.85rem 100% no-repeat scroll;
    background-color: var(--color-surface-strong);
}

/* ── Registraties als tabel (interventions/_registration_table.html: INT-05 en REG-01, BL-151) ──
   Breed een gewone tabel. Is het vak smaller dan 34rem (op mobiel onder ca. 600 px, en met de zijbalk tussen 781 en
   ca. 900 px), dan een kaart per registratie: de datum (link) en 'Wijzigen' op de eerste regel, daaronder het aantal
   deelnemers en de opmerking. Zo staat 'Wijzigen' in beeld zonder zijwaarts te vegen: de tabel had ca. 31rem nodig en
   scrolde bij 781 tot 860 px in een vak zonder naam of hint. Een container query op de wrapper, niet de schermbreedte. */










/* Datum in de registratietabel van INT-05 op één regel (BL-041). Op mobiel mag hij breken: daar is de tabel smal. */


/* ══ Preview Modal ══ */

/* BL-077: #previewModal is een <dialog> (showModal via static/js/dialog.js). Het dialog-element is de volledige laag
   (transparant, de achtergrond is ::backdrop); .preview-modal is de kaart. Zonder [open] verborgen: een auteursregel
   met display gaat anders boven de browserregel dialog:not([open]). */
.preview-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    z-index: 1000;
    background: transparent;
    color: inherit;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    animation: fadeIn 0.2s ease;
}

.preview-modal-overlay[open] {
    display: flex;
}

.preview-modal-overlay::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Browser zonder showModal(): geen ::backdrop, dus de laag zelf donker */
.preview-modal-overlay.is-fallback {
    background: rgba(0, 0, 0, 0.5);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.preview-modal {
    background: var(--color-surface-strong, #fafafa);
    border-radius: 1.25rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.preview-modal-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    flex-shrink: 0;
}

.preview-modal-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* 'Bekijk als deelnemer' in het voorbeeld (E5): het echte formulier zelf invullen, zonder op te slaan */
.preview-try-link {
    flex-basis: 100%;
    font-size: 0.875rem;
}

.preview-try-link .text-action {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    font-weight: 600;
}

.preview-modal-title {
    font-size: 0.75rem;
}

/* BL-071: geen globale button-padding of min-height (het kruis kromp tot 0 px); het svg krimpt niet.
   Op desktop alleen het kruis (naam 'Voorbeeld sluiten'), op mobiel ook de tekst 'Sluiten'. */
.preview-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    background-image: none;
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.preview-modal-close svg {
    flex-shrink: 0;
}

.preview-modal-close-text {
    display: none;
}

.preview-modal-close:hover {
    background: var(--color-surface-container-low, #f0f0f0);
    color: var(--color-text);
}

.preview-modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
    background: var(--color-surface-container-low, #f4f4f4);
}

/* ── Device frames ── */

.device-frame-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 860px;
}

/* Desktop (MacBook) frame */
.device-frame {
    background: #fff;
    border: 2px solid #d1d1d1;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    width: 100%;
    max-height: 60vh;
    position: relative;
}

/* BL-077: het voorbeeld scrolt zelf en is met Tab bereikbaar; bij focus boven de 'toetsenbordrand' van het
   laptopkader, zodat de focusring rondom zichtbaar is */
.device-frame:focus-visible {
    z-index: 1;
}

/* Camera dot */
.device-frame::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #c4c4c4;
    border-radius: 50%;
    margin: 8px auto 6px;
}

/* MacBook keyboard base */
.device-frame-keyboard {
    width: 108%;
    height: 14px;
    background: linear-gradient(to bottom, #e8e8e8, #d4d4d4);
    border-radius: 0 0 8px 8px;
    border: 2px solid #d1d1d1;
    border-top: 1px solid #c8c8c8;
    position: relative;
}

/* Little notch in center of keyboard */
.device-frame-keyboard::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #c8c8c8;
    border-radius: 0 0 4px 4px;
}

/* ── Mobile (iPhone) frame ── */

.device-frame-wrapper--mobile {
    max-width: 390px;
}

.device-frame-wrapper--mobile .device-frame {
    border: 3px solid #1a1a1a;
    border-radius: 2.5rem;
    border-bottom: 3px solid #1a1a1a;
    max-height: 65vh;
    padding-top: 0;
}

/* iPhone notch */
.device-frame-wrapper--mobile .device-frame::before {
    width: 100px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 0 0 14px 14px;
    margin: 0 auto 4px;
}

/* iPhone home indicator */
.device-frame-wrapper--mobile .device-frame::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background: #1a1a1a;
    border-radius: 99px;
    margin: 8px auto 6px;
    position: sticky;
    bottom: 4px;
}

/* Hide MacBook keyboard for mobile */
.device-frame-wrapper--mobile .device-frame-keyboard {
    display: none;
}

/* Scale preview content for mobile */
.device-frame-wrapper--mobile .preview-survey {
    padding: 1rem 0.85rem;
}

.device-frame-wrapper--mobile .preview-survey-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
}

.device-frame-wrapper--mobile .preview-survey-title {
    font-size: 0.92rem;
}









.device-frame-wrapper--mobile .preview-textarea {
    min-height: 2.5rem;
    font-size: 0.78rem;
}

.device-frame-wrapper--mobile .preview-number-input {
    font-size: 0.78rem;
}

/* Matrix: desktop table visible, mobile cards hidden by default */
.matrix-preview-desktop { display: block; }
.matrix-preview-mobile { display: none; }

.device-frame-wrapper--mobile .matrix-preview-desktop { display: none; }
.device-frame-wrapper--mobile .matrix-preview-mobile { display: block; }

.device-frame-wrapper--mobile .matrix-card {
    margin-bottom: 0.75rem;
}

.device-frame-wrapper--mobile .matrix-card-label {
    font-size: 0.82rem;
}

.device-frame-wrapper--mobile .matrix-card-option {
    font-size: 0.78rem;
    padding: 0.5rem 0.65rem;
}

/* ── Preview inside modal: scale survey components ── */



















/* ── Responsive for smaller screens ── */
@media (max-width: 768px) {
    .preview-modal-overlay {
        padding: 0;
    }
    .preview-modal {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        height: 100%;
    }
    .preview-modal-header {
        border-radius: 0;
        padding: 0.6rem 0.75rem;
    }
    /* Kop op mobiel: titel en 'Sluiten' op de eerste regel, de weergaveknoppen eronder over de hele breedte */
    .preview-modal-close {
        order: 2;
        height: 2.75rem;
        padding: 0 0.9rem;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        background: var(--color-surface-strong);
        color: var(--color-text);
        font-weight: 600;
    }
    .preview-modal-close-text {
        display: inline;
    }
    .preview-modal-header .device-toggle-group {
        order: 3;
        flex: 1 1 100%;
    }
    .preview-modal-header .device-toggle {
        flex: 1 1 0;
        height: 2.5rem;
    }
    .preview-modal-body {
        padding: 1rem;
    }
}

/* De pagina achter een open dialoog scrolt niet mee (static/js/dialog.js) */
html.has-dialog-open {
    overflow: hidden;
}

/* 'App installeren' in het menu (besluit PO vraag 39): een knop in de stijl van de menu-items, of op iOS de instructie */




/* BL-018: een app-pagina uit de cache terwijl de deelnemersmodus loopt (static/js/device-guard.js): niets tonen tot de
   server de slotpagina geeft */
html.device-mode-locked body {
    visibility: hidden !important;
}

/* ══ Bevestigingsdialoog (BIDialog.confirm, static/js/dialog.js; BL-078) ══
   Een <dialog role="alertdialog"> met een vraag en twee knoppen; de focus staat eerst op de veilige keuze. */
.bi-dialog {
    width: calc(100% - 2rem);
    max-width: 28rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface-strong);
    color: var(--color-text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

.bi-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.bi-dialog-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.bi-dialog-message {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
}

.bi-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Een lange keuze in de dialoog (BL-084, bv. veel interventies bij 'Direct gebruiken bij'): de dialoog scrolt als
   geheel en de knoppen blijven onderaan in beeld, op een eigen vlak met een lijn als scrollhint (tokens). */
.bi-dialog:has(.bi-dialog-extra) {
    max-height: calc(100dvh - 2rem);
    padding-bottom: 0;
    overflow-y: auto;
}

.bi-dialog:has(.bi-dialog-extra) .bi-dialog-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -1.5rem;
    padding: 0.85rem 1.5rem 1.25rem;
    background: var(--color-surface-strong);
    border-top: 1px solid var(--color-border);
}

/* Een keuze in de dialoog (data-confirm-extra, bv. 'Direct gebruiken bij' bij publiceren, BL-084) */
.bi-dialog-extra {
    margin: 0 0 1.25rem;
}

.bi-dialog-extra .form-field,
.publish-use-at {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.bi-dialog-extra .form-field {
    margin-bottom: 0;
}


/* Mobiel: knoppen onder elkaar en even groot (BL-148), de bevestigknop bovenaan. Bij een destructieve keuze
   (Weggooien, Verwijderen: .bi-dialog-actions--danger) staat de veilige keuze bovenaan, waar de duim het eerst komt. */
@media (max-width: 480px) {
    .bi-dialog-actions {
        flex-direction: column-reverse;
    }
    .bi-dialog-actions.bi-dialog-actions--danger {
        flex-direction: column;
    }
    .bi-dialog-actions > button {
        width: 100%;
    }
}

/* Mobile/desktop visibility utilities (breakpoint matches sidebar) */
@media (max-width: 780px) {
    .desktop-only {
        display: none !important;
    }
}

/* PWA-installatiehint (BL-109; doelbeeld §3.2): alleen op het dashboard en alleen op mobiel, als kaart in de
   pagina onder de inhoud. Nooit position: fixed, dus hij dekt geen knop, bottom-nav of formulierknop af, ook niet
   bij toetsenbordfocus (WCAG 2.4.11). base.js zet .is-visible en op body .pwa-hint-open. Op 390 px <= 96 px hoog. */