@font-face{font-family:'Dosis';font-style:normal;font-weight:500 700;font-display:swap;src:url(/letter-dosis-latin-ext-bef6b47c3b.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Dosis';font-style:normal;font-weight:500 700;font-display:swap;src:url(/letter-dosis-latin-2ed4377fea.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/letter-open-sans-latin-ext-2d4c25a2a2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/letter-open-sans-latin-441af0def9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Gegenereerd door scripts/huisstijl.ts uit de Brand Portal: label certify360,
 * namespace ui, kanaal production. Niet met de hand aanpassen: draai
 * `npm run huisstijl` en commit het resultaat. Welke rol een token in de
 * werkplek krijgt, staat in de stijlbladen ernaast. */
:root {
  --brand-font-body: Plus Jakarta Sans;
  --brand-font-button: TT Firs Neue;
  --brand-radius-full: 360px;
  --brand-radius-none: 0;
  --brand-font-heading: At Gambit;
  --brand-radius-large: 32px;
  --brand-radius-small: 4px;
  --brand-radius-medium: 12px;
  --brand-font-body-bold: Plus Jakarta Sans;
  --brand-shadow-large-x: 4px;
  --brand-shadow-large-y: 4px;
  --brand-shadow-small-x: 2px;
  --brand-shadow-small-y: 2px;
  --brand-color-icon-dark: #27434f;
  --brand-font-p-fontsize: 16px;
  --brand-color-icon-error: #d1393e;
  --brand-color-icon-light: #ffffff;
  --brand-font-alt-heading: TT Firs Neue;
  --brand-font-h1-fontsize: 60px;
  --brand-font-h2-fontsize: 48px;
  --brand-font-h3-fontsize: 36px;
  --brand-font-h4-fontsize: 28px;
  --brand-font-h5-fontsize: 22px;
  --brand-font-h6-fontsize: 18px;
  --brand-font-ps-fontsize: 14px;
  --brand-color-border-dark: #27434f;
  --brand-color-button-cart: #ebc0f6;
  --brand-color-button-dark: #9785ff;
  --brand-font-p-lineheight: 24px;
  --brand-font-pxl-fontsize: 22px;
  --brand-font-pxs-fontsize: 12px;
  --brand-shadow-large-blur: 4px;
  --brand-shadow-small-blur: 2px;
  --brand-color-border-error: #d1393e;
  --brand-color-border-light: #ffffff;
  --brand-color-button-light: #ffffff;
  --brand-color-surface-tint: #d9e3e7;
  --brand-font-h1-lineheight: 72px;
  --brand-font-h2-lineheight: 56px;
  --brand-font-h3-lineheight: 44px;
  --brand-font-h4-lineheight: 36px;
  --brand-font-h5-lineheight: 36px;
  --brand-font-h6-lineheight: 24px;
  --brand-font-ps-lineheight: 24px;
  --brand-spacing-spacing-lg: 16px;
  --brand-spacing-spacing-md: 12px;
  --brand-spacing-spacing-sm: 8px;
  --brand-spacing-spacing-xl: 24px;
  --brand-spacing-spacing-xs: 4px;
  --brand-color-button-accent: #ebc0f6;
  --brand-color-surface-white: #ffffff;
  --brand-font-client-heading: Plus Jakarta Sans;
  --brand-font-heading-weight: Bold;
  --brand-font-pxl-lineheight: 34px;
  --brand-font-pxs-lineheight: 20px;
  --brand-spacing-spacing-2xl: 32px;
  --brand-spacing-spacing-3xl: 48px;
  --brand-spacing-spacing-4xl: 60px;
  --brand-color-icon-accent-01: #9785ff;
  --brand-color-icon-accent-02: #c5f9d2;
  --brand-color-icon-tint-dark: #9785ff;
  --brand-color-text-body-dark: #1c3038;
  --brand-color-text-tint-dark: #3e697d;
  --brand-radius-button-btn-bl: 360px;
  --brand-radius-button-btn-br: 360px;
  --brand-radius-button-btn-tl: 360px;
  --brand-radius-button-btn-tr: 360px;
  --brand-radius-input-default: 12px;
  --brand-size-size-grid-col-1: 92px;
  --brand-size-size-grid-col-2: 208px;
  --brand-size-size-grid-col-3: 324px;
  --brand-size-size-grid-col-4: 440px;
  --brand-size-size-grid-col-5: 556px;
  --brand-size-size-grid-col-6: 672px;
  --brand-size-size-grid-col-7: 788px;
  --brand-size-size-grid-col-8: 904px;
  --brand-size-size-grid-col-9: 1020px;
  --brand-spacing-spacing-none: 0;
  --brand-color-button-disabled: #d9e3e7;
  --brand-color-icon-tint-light: #d9e3e7;
  --brand-color-surface-default: #ecf1f3;
  --brand-color-surface-overlay: #27434fcc;
  --brand-color-surface-primary: #27434f;
  --brand-color-text-body-light: #ffffff;
  --brand-color-text-tint-light: #b4c7cf;
  --brand-radius-button-default: 360px;
  --brand-size-size-grid-col-10: 1136px;
  --brand-size-size-grid-col-11: 1252px;
  --brand-size-size-grid-col-12: 1368px;
  --brand-spacing-gutter-mobile: 32px;
  --brand-color-border-tint-dark: #b4c7cf;
  --brand-color-button-dark-icon: #ffffff;
  --brand-color-text-action-dark: #27434f;
  --brand-spacing-gutter-desktop: 24px;
  --brand-color-border-tint-light: #d9e3e7;
  --brand-color-button-light-icon: #ebc0f6;
  --brand-color-surface-accent-01: #9785ff;
  --brand-color-surface-accent-02: #c5f9d2;
  --brand-color-surface-secondary: #9785ff;
  --brand-color-surface-springest: #9785ff;
  --brand-color-text-action-light: #ffffff;
  --brand-color-text-heading-dark: #1c3038;
  --brand-color-text-status-error: #d1393e;
  --brand-color-button-accent-icon: #27434f;
  --brand-color-surface-module-cfp: #ffc700;
  --brand-color-surface-module-seh: #004f9f;
  --brand-color-surface-tint-light: #ecf1f3;
  --brand-color-text-action-accent: #9785ff;
  --brand-color-text-heading-light: #ffffff;
  --brand-color-surface-module-zorg: #afc053;
  --brand-color-surface-status-info: #0c5fdb;
  --brand-color-text-body-accent-01: #27434f;
  --brand-color-text-body-accent-02: #c7ccf9;
  --brand-color-surface-module-basis: #bb9d83;
  --brand-color-surface-primary-dark: #1c3038;
  --brand-color-surface-status-error: #d1393e;
  --brand-color-text-heading-default: #27434f;
  --brand-size-size-frame-full-width: 1920px;
  --brand-color-surface-status-succes: #76b041;
  --brand-color-surface-module-inkomen: #77b075;
  --brand-color-surface-status-default: #9785ff;
  --brand-color-surface-status-warning: #fda03e;
  --brand-color-surface-tint-accent-01: #c7ccf9;
  --brand-color-surface-tint-accent-02: #ebc0f6;
  --brand-color-text-action-dark-hover: #9785ff;
  --brand-color-text-heading-accent-01: #c7ccf9;
  --brand-color-text-heading-accent-02: #c5f9d2;
  --brand-color-text-heading-tint-dark: #9785ff;
  --brand-color-border-header-circle-01: #9785ff;
  --brand-color-border-header-circle-02: #ebc0f6;
  --brand-color-surface-module-pensioen: #63b3d0;
  --brand-color-surface-module-vermogen: #f3a14b;
  --brand-color-text-action-light-hover: #000000;
  --brand-color-text-action-accent-hover: #ffb3a3;
  --brand-color-surface-default-secondary: #f5f3ff;
  --brand-color-surface-module-schade-zakelijk: #996aa1;
  --brand-color-surface-module-tonals-cfp-hover: #fff4cc;
  --brand-color-surface-module-tonals-seh-hover: #ccdcec;
  --brand-color-surface-module-tonals-zorg-hover: #eff2dd;
  --brand-color-surface-status-tonals-info-hover: #e2effa;
  --brand-color-surface-module-schade-particulier: #e0706d;
  --brand-color-surface-module-tonals-basis-hover: #f1ebe6;
  --brand-color-surface-status-tonals-error-hover: #f7eaea;
  --brand-color-surface-module-consumptief-krediet: #9ea597;
  --brand-color-surface-module-hypothecair-krediet: #7dbbb6;
  --brand-color-surface-status-tonals-succes-hover: #f1f7ec;
  --brand-color-surface-module-tonals-inkomen-hover: #e4efe3;
  --brand-color-surface-status-tonals-warning-hover: #fff4e4;
  --brand-color-surface-module-tonals-pensioen-hover: #e0f0f6;
  --brand-color-surface-module-tonals-vermogen-hover: #fdecdb;
  --brand-color-surface-module-tonals-schade-zakelijk-hover: #ebe1ec;
  --brand-color-surface-module-tonals-schade-particulier-hover: #f9e2e2;
  --brand-color-surface-module-tonals-consumptief-krediet-hover: #ecedea;
  --brand-color-surface-module-tonals-hypothecair-krediet-hover: #e5f1f0;
}

:root{
 /* De rollen van de werkplek op de tokens van de Brand Portal (label
    certify360, in merk/certify360.css, gegenereerd door `npm run huisstijl`).
    Hier staat alleen welke rol welk token krijgt. Een hexwaarde hieronder is
    een tint die de Brand Portal niet kent: een donkerder tint voor tekst op
    een licht vlak, waar het token zelf te weinig contrast haalt (4,5:1), of
    een tussentint voor een grafiek en de placeholder in de balk. */
 --primary:var(--brand-color-surface-primary);
 --primary-dark:var(--brand-color-surface-primary-dark);
 --accent:var(--brand-color-surface-accent-01);
 --accent-tint:var(--brand-color-surface-tint-accent-02);
 --accent-soft:var(--brand-color-surface-default-secondary);
 --badge-tekst:#5a4bcc;
 --bg:var(--brand-color-surface-default); --surface:var(--brand-color-surface-white);
 --border:var(--brand-color-border-tint-light); --border-dark:var(--brand-color-border-tint-dark);
 --ink:var(--brand-color-text-body-dark); --heading:var(--brand-color-text-heading-default);
 --muted:var(--brand-color-text-tint-dark);
 --success:var(--brand-color-surface-status-succes);
 --success-tonal:var(--brand-color-surface-status-tonals-succes-hover); --goed:#4c7a24;
 --error:var(--brand-color-surface-status-error); --error-tekst:#bf2b30;
 --error-tonal:var(--brand-color-surface-status-tonals-error-hover);
 --warning:var(--brand-color-surface-status-warning);
 --warning-tonal:var(--brand-color-surface-status-tonals-warning-hover); --let:#a05c0a;
 --info:var(--brand-color-surface-status-info);
 --info-tonal:var(--brand-color-surface-status-tonals-info-hover);
 --link:var(--brand-color-text-action-dark); --link-hover:var(--brand-color-text-action-dark-hover);
 /* 1400 zoals de Drukwerk Tool en de Brand Portal: dezelfde tokenwaarde,
    zodat de drie naast elkaar dezelfde maat houden. */
 --page-max:1400px;
 /* Lopende tekst houdt een eigen bovengrens: over de volle 1400 pixels
    wordt een alinea zo'n 180 tekens breed en verlies je bij het
    terugspringen de regel. Tabellen en grafieken mogen wel de hele
    breedte gebruiken. */
 --tekst-max:78ch;
 --space-xs:var(--brand-spacing-spacing-xs); --space-sm:var(--brand-spacing-spacing-sm);
 --space-md:var(--brand-spacing-spacing-md); --space-lg:var(--brand-spacing-spacing-lg);
 --space-xl:var(--brand-spacing-spacing-xl); --space-2xl:var(--brand-spacing-spacing-2xl);
 --radius-sm:var(--brand-radius-small); --radius:var(--brand-radius-medium);
 --radius-lg:var(--brand-radius-large); --radius-full:var(--brand-radius-full);
 --topbar-h:66px;
 /* font/heading en font/button: At Gambit en TT Firs Neue. De werkplek levert
    ze zelf mee (merk/lettertypes/, sinds 21 oktober 2026), zoals de Brand
    Portal en de Drukwerk Tool; de terugval is die van de andere tools. */
 --font-display:var(--brand-font-heading),var(--brand-font-button),Georgia,serif;
 --font-button:var(--brand-font-button),var(--brand-font-body),system-ui,sans-serif;
 --focus-ring:var(--ink); --focus-halo:var(--accent);
 /* Grafiekkleuren als tokens, zodat een staaf in beide huisstijlen klopt
    zonder dat de grafiekcode iets van huisstijlen hoeft te weten. */
 --grafiek-1:var(--primary); --grafiek-2:var(--accent);
 --grafiek-3:#7aa7bb; --grafiek-spoor:var(--bg);
 /* Statussen in een grafiek. Standaard de tekstkleur van die status; een
    huisstijl met een eigen palet zet ze apart, want een vlak mag lichter
    zijn dan tekst. */
 --grafiek-goed:var(--goed); --grafiek-let:var(--let); --grafiek-fout:var(--error-tekst);
 /* Wat de kopbalk en de knoppen aankleedt, staat apart: de tweede huisstijl
    (Groene Erkenningen, onderaan dit bestand) zet precies deze namen om en
    laat de rest van de tokens met rust. De waarden hieronder zijn die van de
    Brand Portal, zodat de balk daar 1-op-1 gelijk aan blijft. */
 --balk:var(--primary); --balk-tekst:var(--brand-color-icon-tint-light);
 --balk-tekst-op:var(--brand-color-text-body-light);
 --balk-stil:var(--brand-color-text-tint-light); --balk-lijn:var(--brand-color-text-tint-dark);
 --balk-veld:rgba(255,255,255,.10); --balk-veld-tekst:var(--brand-color-text-body-light);
 --balk-veld-stil:#94aeba;
 --balk-actief-bg:var(--brand-color-surface-white); --balk-actief-tekst:var(--primary);
 --balk-focus:var(--brand-color-text-body-light); --balk-hover:rgba(255,255,255,.12);
 --radius-knop:var(--radius-full);
 /* De hoogte van elke knop (balk-en-formulieren.css). Op een telefoon 44 px,
    het tikvlak dat Apple en Google aanhouden (smal.css). */
 --knop-h:40px;
 --knop-transform:none; --knop-spacing:normal;
 /* De tabbladen (instellingen.css), zoals de tabs van de Brand Portal
    (components/ui/tabs.tsx): TT Firs Neue op 13 px, 500 in rust en 600
    actief, een streep van 2 px in de hoofdkleur, bij aanwijzen in de donkere
    randkleur, en 16 px tussen de tabs. De andere twee huisstijlen zetten ze om. */
 --tab-font:var(--font-button); --tab-maat:13px; --tab-gewicht:500; --tab-gewicht-actief:600;
 --tab-tekst:var(--muted); --tab-tekst-actief:var(--heading);
 --tab-streep:2px; --tab-streep-actief:var(--primary); --tab-streep-hover:var(--border-dark);
 --tab-streep-radius:0; --tab-lijn:var(--border); --tab-ruimte:var(--space-lg);
 --tab-transform:none; --tab-spacing:normal; --tab-stip:var(--warning);
 /* De hoofdknop zoals in de Brand Portal en de Drukwerk Tool: de lila pil
    (button/accent) met donkere tekst (button/accent-icon), 6,69:1. Bij
    aanwijzen een tint donkerder, als vaste kleur en niet als filter: .96 van
    #ebc0f6, en daarop 6,14:1. Alleen Certify360: de andere twee zetten deze
    drie zelf. */
 --knop-primair-bg:var(--brand-color-button-accent); --knop-primair-tekst:var(--brand-color-button-accent-icon);
 --knop-primair-hover:#e2b8ec;
 /* Een hoofdknop op elke regel van een lijst: omlijnd, zoals .los
    (balk-en-formulieren.css). */
 --knop-rij-bg:var(--surface); --knop-rij-tekst:var(--heading); --knop-rij-rand:var(--border-dark);
 --knop-rij-hover:var(--surface); --knop-rij-hover-rand:var(--primary);
 /* Rollen voor de regels in de gedeelde bladen, zodat daar geen losse kleur
    staat (de keuring toetst dat). Ze staan alleen hier en geen huisstijl zet
    ze om: in alle drie is het dezelfde waarde als toen ze nog los stonden.
    Tekst op een gekleurd vlak is het token voor lichte tekst; de rest zijn
    tinten die de Brand Portal niet kent. */
 --tekst-op-kleur:var(--brand-color-text-body-light);
 /* De voetbalk: een lijn en stille tekst. Tot 21 oktober 2026 gebruikte hij
    deze twee namen zonder dat ze bestonden (alleen Examenadviesburo zette
    --lijn), en dan stond er geen lijn en was de tekst niet stil. */
 --lijn:var(--border); --tekst-stil:var(--muted);
 /* Een uitgeschakelde knop: een eigen grijs palet zoals in de Brand Portal
    (`--btn-uit`), en geen doorzichtigheid. Met opacity .45 haalde de tekst
    geen 4,5:1 meer; zo haalt hij 4,57:1. */
 --knop-uit-bg:var(--brand-color-button-disabled); --knop-uit-tekst:var(--muted);
 --knop-uit-rand:var(--border);
 --vlak-stil:#f6f7f9; --rij-hover:#f7fafb;
 --schaduw-zwevend:0 12px 28px rgba(28,48,56,.18);
 /* De tooltip (css/tooltip.css), zoals de HelpTip van de Drukwerk Tool: een
    donkere wolk met lichte tekst, en een knopje dat in rust de kleur van een
    rand heeft en bij aanwijzen, focus of open de accentkleur. Het teken op dat
    accent is hier donker en niet wit zoals in de Drukwerk Tool: wit op lila
    haalt 2,95:1, donker 4,65:1. Groene Erkenningen zet de tekens en de hoek
    zelf. */
 --tip-bg:var(--primary-dark); --tip-tekst:var(--tekst-op-kleur); --tip-radius:8px;
 --tip-knop:var(--border); --tip-knop-teken:var(--muted);
 --tip-knop-actief:var(--accent); --tip-knop-actief-teken:var(--primary-dark);
 --melding-info-tekst:#0a4dad; --melding-let-tekst:#8a5416; --melding-fout-tekst:#a02b2f;
 --mijnpil-tekst:#5a4bcc;
 --storing-rand:#eccccd; --storing-tekst:#6d2427;
 --logo-hoogte:30px; --logo-hoogte-klein:24px; --logo-verhouding:5.4375;
 /* Een getekende pijl voor knoppen die ergens heen gaan, als masker: hij
    neemt de tekstkleur van de knop aan. */
 --pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 --font-body:var(--brand-font-body),system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
 font:15px/1.6 var(--font-body);caret-color:var(--primary);overflow-wrap:break-word;
 display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/* Een voet die onderaan blijft zonder vast te zitten. Is de pagina kort, dan
   rekt de hoofdkolom op tot de voet onderaan het venster staat; is hij lang,
   dan schuift de voet gewoon mee naar het eind. Geen position:fixed, dus hij
   dekt nooit inhoud af. `width:100%` omdat een flex-kind met margin:auto
   anders krimpt tot zijn inhoud; `dvh` omdat 100vh op een telefoon de
   adresbalk meetelt. */
body>main{flex:1 0 auto;width:100%}
::selection{background:var(--accent);color:var(--tekst-op-kleur)}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--link-hover)}
/* Twee soorten focus, en dat verschil is bewust — dezelfde afweging als in de
   Drukwerk Tool en de Brand Portal.

   Een invoerveld hééft al een rand; daar is die rand de drager en volstaat een
   kleurwissel. Een ring eromheen is in gebruik te schreeuwend, zeker op een
   formulier met vijftien velden onder elkaar.

   Een knop of een link heeft die rand niet, dus daar blijft de ring staan —
   anders is er niets dat verschuift als je erheen tabt. Wel smaller dan
   hiervoor: één ring van 2 px met een haarlijn eromheen in plaats van twee
   ringen van 2 px over elkaar.

   De kleuren zijn die van de Brand Portal: de ring in `--focus-ring` (de
   inktkleur, 13,7:1 op wit) en de haarlijn in `--focus-halo` (lila). Tot
   21 oktober 2026 was de ring lila, en dat haalde 2,95:1 op wit en 2,59:1 op
   de pagina: onder de 3:1 die een focusindicator nodig heeft. Een veld krijgt
   een rand in de ringkleur met dezelfde haarlijn.

   `:focus-visible` en niet `:focus`: bij een muisklik in een veld hoort er
   niets te verschijnen. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;
 box-shadow:0 0 0 1px var(--focus-halo);border-radius:4px}
.balk :focus-visible{outline-color:var(--balk-focus)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 1px var(--focus-halo)}
.num{font-variant-numeric:tabular-nums}

/* voortgang: verschijnt meteen bij een klik, de nieuwe pagina vervangt hem.
   De balk staat op volle breedte en groeit met `transform` vanaf links: een
   animatie op `width` rekent bij elk beeld de opmaak opnieuw uit, en dat is
   juist het moment waarop de browser het druk heeft met de volgende pagina. */
#voortgang{position:fixed;inset:0 0 auto 0;height:3px;background:var(--accent);
 z-index:9;transform:scaleX(0);transform-origin:left center;opacity:0;
 transition:transform .25s ease-out,opacity .25s ease-out}
body.bezig #voortgang{transform:scaleX(.88);opacity:1;
 transition:transform 6s cubic-bezier(.05,.7,.1,1),opacity .1s}

/* --- topbar -------------------------------------------------------------
   1-op-1 overgenomen uit de Brand Portal (apps/portal/src/styles.css, sectie
   `--- topbar ---`), die hem deelt met de Drukwerk Tool en de PowerPoint Tool.
   De vier horen als één webapplicatie te voelen, dus elke maat hieronder is
   hun maat: 14/28 padding, logo op 30px, naam op 15px achter een streepje van
   #3e697d, navknoppen 14/24 in #d9e3e7 met 7/14 padding en een volle radius.
   Wijzig hier niets zonder het in de andere drie ook te doen.

   Eén verschil, met opzet: de navigatie-items zijn hier <a> en geen <button>.
   Dit is een server-gerenderde applicatie, dus het zijn echte links — je kunt
   ze delen, in een nieuw tabblad openen en met het midden van de muis klikken.
   De opmaak is identiek; alleen de selector dekt beide vormen. */
.skip-link{position:absolute;left:50%;transform:translateX(-50%);top:-100px;z-index:60;
 padding:10px 18px;border-radius:var(--radius-full);background:var(--surface);
 color:var(--ink);font-family:var(--font-button);font-weight:500;
 text-decoration:none;transition:top .12s ease}
.skip-link:focus-visible{top:var(--space-sm);outline:2px solid var(--focus-ring);
 outline-offset:2px;box-shadow:0 0 0 1px var(--focus-halo)}

.topbar{position:sticky;top:0;z-index:45;display:flex;align-items:center;
 justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);
 padding:14px 28px;background:var(--balk);color:var(--balk-tekst-op)}
.topbar .brandmark{display:flex;align-items:center;gap:12px;flex-shrink:0;
 background:none;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;
 text-decoration:none}
.topbar .brandmark:hover span{color:var(--balk-tekst-op)}
/* Hoogte uit het thema, breedte daaruit berekend met de verhouding van de SVG.
   Zo staat de ruimte vast vóórdat het logo geladen is — geen verspringende
   merknaam — én blijft hij in verhouding als de hoogte op een smal scherm
   kleiner wordt. Stond hier `width="180"` als attribuut: dat hield de breedte
   vast terwijl de hoogte kromp, en drukte het logo plat. Zelfde aanpak als de
   Drukwerk Tool, die daar `--verhouding` voor gebruikt. */
.topbar .brandmark img{height:var(--logo-hoogte);
 width:calc(var(--logo-hoogte) * var(--logo-verhouding));display:block}
.topbar .brandmark .brandmark-naam{font-family:var(--font-button);font-weight:500;
 font-size:15px;color:var(--balk-stil);white-space:nowrap;border-left:1px solid var(--balk-lijn);
 padding-left:12px}
.topbar .actions{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.topbar .actions .nav-user{margin-left:var(--space-sm)}
.topbar .nav{font-family:var(--font-button);font-weight:500;font-size:14px;
 line-height:24px;color:var(--balk-tekst);padding:7px 14px;border-radius:var(--radius-knop);
 background:transparent;border:none;text-decoration:none;display:inline-block;
 cursor:pointer;white-space:nowrap}
.topbar .nav:hover{color:var(--balk-tekst-op)}
.topbar .nav.active{color:var(--balk-actief-tekst);background:var(--balk-actief-bg);text-decoration:none}
/* Op de donkere balk draagt wit het contrast en blijft lila de band. */
.topbar .nav:focus-visible,.topbar .brandmark:focus-visible{
 outline:2px solid var(--balk-actief-bg);outline-offset:2px;box-shadow:0 0 0 1px var(--accent)}
/* Het gebruikerschip, 1-op-1 uit de Brand Portal (`.topbar .nav-user`, regel
   348 van styles.css) en de Drukwerk Tool: je naam, en daarachter je rol als
   badge. Geen invoerveld meer — wie je bent komt straks van de inlog en is
   hier geen keuze. */
.topbar .nav-user{line-height:24px;font-size:13px;color:var(--balk-stil);padding-left:12px;
 border-left:1px solid var(--balk-lijn);white-space:nowrap}
/* Eigen regelhoogte: de badge erft anders de 24 van de naam ernaast en wordt
   vier pixels te hoog. Zelfde 12/20 als daar. */
.topbar .nav-user .badge{margin-left:6px;font-size:12px;line-height:20px}
/* Op het externe adres is het chip een link naar Je account: de naam is
   onderstreept en er staat een pijltje achter, zodat te zien is dat je erop
   kunt klikken. */
.topbar a.nav-account{text-decoration:none}
.topbar a.nav-account .nav-naam{text-decoration:underline;text-underline-offset:3px}
.topbar a.nav-account .nav-pijl{margin-left:6px;font-size:16px;line-height:20px}
.topbar a.nav-account:hover .nav-naam{text-decoration-thickness:2px}
.topbar a.nav-account:focus-visible{outline:2px solid var(--balk-actief-bg);outline-offset:2px}
/* De schakelaars staan in de voetbalk en niet in de kop. Die kop draagt al een
   logo, vier menugroepen en het gebruikerschip; een keuzelijst erbij maakt hem
   op laptopbreedte krap. En het zijn hulpmiddelen om de applicatie te laten
   zien, geen navigatie — onderaan staan ze niemand in de weg. */
.voetbalk{margin-top:var(--space-xl);border-top:1px solid var(--lijn);
  background:var(--vlak-stil)}
.voetwrap{max-width:var(--page-max);margin:0 auto;padding:var(--space-md) var(--space-lg);
  display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;
  justify-content:space-between}
.voetmelding{margin:0;font-size:13px;line-height:1.5;color:var(--tekst-stil);max-width:56ch}
.voetknoppen{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center}
.voetthema{font-size:13px;color:var(--tekst-stil)}
/* De huisstijlkeuze is een knop (hij zet een koekje en gaat nergens heen), maar
   ziet eruit als de link die het eerst was. */
.voetthema button{background:none;border:0;border-radius:0;padding:0;font:inherit;text-transform:none;letter-spacing:inherit;
 color:var(--tekst-stil);text-decoration:underline;cursor:pointer}
.voetthema button:hover,.voetthema button:focus-visible{color:var(--primary)}
.rolwissel{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tekst-stil)}
/* "Kijk als" brak over twee regels zodra de voet smal werd. */
.rolwissel label{white-space:nowrap}
.rolwissel select{min-height:36px;padding:4px 28px 4px 10px;font-size:13px}
.rolwissel .rolknop{min-height:36px}
/* Wit op de balk; de rolkeuze in de voetbalk krijgt de ring van een veld. */
.topbar .rolwissel select:focus-visible,.nav-hamburger:focus-visible{
 outline:2px solid var(--balk-actief-bg);outline-offset:2px;box-shadow:0 0 0 1px var(--accent)}

/* Groepen in de hoofdnavigatie, 1-op-1 uit de Brand Portal (`.nav-groep` en co,
   components/NavMenu.tsx), die het patroon met de Drukwerk Tool deelt. Mobiel-
   eerst geschreven: in het uitklappaneel vult de groep de breedte, vanaf de
   balk is het een knop met een menu eronder. */
.nav-groep{position:relative;display:block}
@media (min-width:900px){.nav-groep{display:inline-flex}}
.nav-groep > .btn.nav{display:inline-flex;align-items:center}
/* De chevron erft de tekstkleur en draait een halve slag als het menu openstaat:
   dan zegt hij niet alleen "hier zit meer" maar ook of het openstaat. */
.nav-chevron{margin-left:7px;flex:none;transition:transform 120ms ease}
.nav-groep .btn.nav.open .nav-chevron{transform:rotate(180deg)}
.nav-groep .btn.nav.open{background:var(--balk-hover)}
.nav-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;min-width:0;
 display:flex;flex-direction:column;padding:6px;background:var(--surface);
 border:1px solid var(--border);border-radius:var(--radius);
 box-shadow:var(--schaduw-zwevend)}
.nav-menu[hidden]{display:none}
/* Ná de regel hierboven, met dezelfde specificiteit: vanaf de balk hangt het
   menu onder zijn eigen knop en is het zo breed als zijn inhoud. */
@media (min-width:900px){.nav-menu{right:auto;min-width:264px}}
.nav-item{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:0;
 border-radius:var(--radius-sm);background:transparent;text-align:left;cursor:pointer;
 font:inherit;color:var(--heading);text-decoration:none}
.nav-item:hover{background:var(--bg)}
.nav-item.actief{background:var(--bg)}
.nav-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;box-shadow:none}
/* De naam in het knopfont, de uitleg klein en stil: in een menu van drie regels
   scheelt één regel uitleg het openen van de verkeerde pagina. */
.nav-item-naam{font-family:var(--font-button);font-weight:600;font-size:14px}
.nav-item-uitleg{font-size:12px;color:var(--muted)}

.nav-hamburger{display:none;align-items:center;justify-content:center;
 min-width:44px;min-height:44px;background:none;border:none;cursor:pointer;
 border-radius:var(--radius-sm);color:var(--balk-tekst-op)}
.hamburger-lijnen,.hamburger-lijnen::before,.hamburger-lijnen::after{
 display:block;width:22px;height:2px;border-radius:2px;background:currentColor;
 transition:transform .15s,opacity .15s}
.hamburger-lijnen::before,.hamburger-lijnen::after{content:"";position:relative}
.hamburger-lijnen::before{top:-7px}
.hamburger-lijnen::after{top:5px}
.nav-hamburger.open .hamburger-lijnen{background:transparent}
.nav-hamburger.open .hamburger-lijnen::before{top:0;transform:rotate(45deg)}
.nav-hamburger.open .hamburger-lijnen::after{top:-2px;transform:rotate(-45deg)}

/* Meldingen, 1-op-1 met .notice in de Brand Portal en de Drukwerk Tool: tonale
   achtergrond, tekst in de statuskleur, radius 12. Ze staan in de inhoud en
   niet als strook tegen de balk — een melding is een regel op de pagina, geen
   tweede header. */
.verwijderpaneel{border:1px solid var(--error);border-left-width:4px;border-radius:var(--radius);
 padding:var(--space-md) var(--space-lg);margin-block:var(--space-lg);background:var(--surface)}
.verwijderpaneel h2{margin-top:0}
.inline-form{display:inline-block;margin:var(--space-sm) 0}
.pseudoform{margin-top:var(--space-lg);display:grid;gap:10px;justify-items:start;
 padding-top:var(--space-md);border-top:1px solid var(--border)}
.vinkje{display:flex;gap:8px;align-items:center;font-size:14px}
.omgeving{padding:6px 16px;border-bottom:1px solid var(--border)}
.omgeving.fout{background:var(--error-tonal);color:var(--error-tekst);font-weight:500;
 font-size:13px;letter-spacing:0;text-align:left}
.notice{padding:11px 16px;border-radius:var(--radius);margin-bottom:var(--space-md);
 max-width:var(--tekst-max);
 font-size:13px}
.notice.info{background:var(--info-tonal);color:var(--melding-info-tekst)}
.notice.success{background:var(--success-tonal);color:var(--goed)}
.notice.warning{background:var(--warning-tonal);color:var(--melding-let-tekst)}
.notice.error{background:var(--error-tonal);color:var(--melding-fout-tekst)}
.notice .r{margin-left:auto}
/* In de voetbalk staat de huisstijlkeuze eronder in plaats van
   ernaast: in een alinea werkt margin-left:auto niet en plakt hij aan de zin. */
.notice .onder{display:block;margin-top:8px;opacity:.85}
.notice a{color:inherit}

.wrap{max-width:var(--page-max);margin:0 auto;padding:28px 24px 72px}
/* "Je kijkt als": één regel over de breedte van de pagina, met de knop
   rechts, en weinig ruimte eronder, zodat de pagina er gewoon onder begint
   (23 oktober 2026). Smal mag de knop onder de tekst. */
.wrap.kijktals{width:100%;padding-bottom:0}
.wrap.kijktals + .wrap{padding-top:var(--space-lg)}
.kijktals .notice{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;max-width:none;margin:0}
.kijktals .notice form{margin:0}
/* Het inlogformulier op het externe adres (`server/handler/inloggen.ts`): één smalle
   kolom, zodat de velden en de knop niet over de hele breedte lopen. */
.wrap.inlog{max-width:28rem}
/* The second step of that login (`weergave/inlogpagina.tsx`, `enrol`): three
   numbered steps, the QR code in a box a phone camera reads easily, and the
   secret below it, which wraps per group of four and keeps its background as
   one block. */
ol.stappen{margin:0;padding-left:1.25rem}
ol.stappen>li{margin:0 0 var(--space-md)}
ol.stappen>li::marker{font-weight:700}
.qr{max-width:14rem;margin:0 auto var(--space-md)}
.qr svg{display:block;width:100%;height:auto}
.geheim{text-align:center;margin:0 0 var(--space-md)}
.geheim code{display:inline-block;max-width:100%;white-space:normal;font-size:15px;line-height:1.6;letter-spacing:.04em;
 padding:2px 8px}
/* Je account: label en waarde naast elkaar, op een telefoon onder elkaar. */
dl.gegevens{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-xs) var(--space-md);margin:0}
dl.gegevens dt{color:var(--muted)}
dl.gegevens dd{margin:0;overflow-wrap:anywhere}
@media (max-width:30rem){dl.gegevens{grid-template-columns:1fr}dl.gegevens dd{margin-bottom:var(--space-xs)}}
/* .paginatitel uit de portal: 22px, bewust ingehouden — dit is werkgereedschap,
   de titel oriënteert en schreeuwt niet. */
h1{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.25;
 margin:0 0 var(--space-md);color:var(--heading);letter-spacing:0}
h2{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.3;
 margin:var(--space-2xl) 0 var(--space-md);color:var(--heading)}
.intro{color:var(--muted);max-width:68ch;margin:0 0 20px}
/* Een korte zin in grijs, zoals "Ingepland door … sinds …" bij een
   inspectie. Een gewone alinea: tot 21 oktober 2026 was elke .stand een flexrij
   met een negatieve bovenmarge, en dan viel zo'n zin in losse stukken met gaten
   ertussen, en schoof hij tegen de knop Uitschrijven en het oordeel erboven
   (feedback van EAB). */
.stand{color:var(--muted);font-size:13px;margin:0 0 var(--space-md)}
h2 + .stand{margin-top:-8px}
.stand a{color:var(--muted)}
/* De regel "Stand van …" met Vernieuwen (`StandRegel`): die wel als rij. Met
   een telling erachter wordt de zin lang; dan schuift Vernieuwen naar een
   eigen regel in plaats van in drie stukken te breken. */
.stand.standregel{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;row-gap:2px;margin:-8px 0 20px}
/* Onder de regel met code en soort (een voorstel) eigen ruimte, en niet
   ertegenaan getrokken. */
.meta + .stand.standregel,.notice + .stand.standregel{margin-top:0}
.stand a{white-space:nowrap}

/* De hoofdkaart (radius-lg 32, padding 24) met lijstregels erin (radius 12 op
   --bg) — dezelfde opbouw als .card en .card.opleiding in de Brand Portal. */
.card{background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-md)}
.card > :first-child{margin-top:0}
.kaart{background:var(--bg);border-radius:var(--radius);padding:10px 16px;
 margin-bottom:6px;border:1px solid transparent}
.kaart:last-child{margin-bottom:0}
.kaart.mijn{border-color:var(--accent);background:var(--accent-soft)}
.rij{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rij .op{flex:1;min-width:min(240px,100%)}
.rij .op b{display:block;font-weight:600;color:var(--primary);font-size:15.5px}
.rij .op span{font-size:13px;color:var(--muted)}
/* De regel onder de titel als eigen blok, met een regelafstand op maat van
   zijn eigen letter: anders hield hij die van de titel en stonden de regels
   ver uit elkaar. */
.rij .op > span{display:block;line-height:1.5;margin-top:2px}
.rij .op .oud,.rij .op .oud .ding{color:var(--let);font-weight:600}
.rij form{margin:0}
/* De knop op een kaart: even breed op elke kaart, zodat ze in de lijst onder
   elkaar een kolom vormen ("Inplannen" en "Verder invullen" begonnen op een
   andere plek). */
.kaart .rij .pak,.kaart .rij .los,.kaart .rij .zacht{min-width:176px}

.pil{display:inline-block;padding:3px 10px;border-radius:var(--radius-knop);
 font-size:11px;font-weight:600;white-space:nowrap}
.ok{background:var(--success-tonal);color:var(--goed)} .let{background:var(--warning-tonal);color:var(--let)}
.err{background:var(--error-tonal);color:var(--error-tekst)} .neutraal{background:var(--bg);color:var(--muted)}
.mijnpil{background:var(--accent-soft);color:var(--mijnpil-tekst)}
/* Een pil op een kaart: de kaart heeft in Certify360 en Examenadviesburo zelf
   de kleur van een neutrale pil (en een eigen kaart die van "jij"), en dan
   stond er alleen een los woord. Op een kaart het vlak van een kaart met een
   rand, zoals op de pagina zelf (`.metapillen`). */
.kaart .pil.neutraal,.kaart.mijn .pil.mijnpil{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
/* De badge uit de Brand Portal (styles.css regel 880). Hier alleen in de
   variant `neutral`, want dit project gebruikt hem op één plek: de rol achter
   je naam in de balk. De tekstkleur is een token, want in de groene huisstijl
   is `--accent-soft` olijf en zou het lila van Certify360 erop wegvallen. */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-full);
 font-size:11px;font-weight:600}
.badge.neutral{background:var(--accent-soft);color:var(--badge-tekst)}
/* De uitleg onder een veld, op Instellingen en elders. De opmaak van
   Instellingen zelf staat in instellingen.css. */
.vl-uitleg{display:block;font-size:13px;color:var(--muted);margin:0 0 8px;
 max-width:52em}
/* Een getal met zijn eenheid erachter, op één regel. */
.meteenheid{display:flex;align-items:center;gap:8px}
.eenheid{font-size:13px;color:var(--muted)}
/* Een vinkje: het label is de naam, de stand staat als pil ernaast. */
.schakel{display:flex;align-items:center;gap:10px;cursor:pointer;
 font-size:14px;color:var(--ink);min-height:44px}
.schakel input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--primary)}
/* Een eindpuntnaam of veldnaam in lopende tekst. Rustig: het is een naam,
   geen codeblok. */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
 background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
 padding:1px 6px;overflow-wrap:anywhere}
.nieuwpil{background:var(--info-tonal);color:var(--melding-info-tekst)}

button,.knop{font-family:var(--font-button);font-size:14px;font-weight:500;line-height:1.3;
 border:none;border-radius:var(--radius-knop);padding:9px 20px;cursor:pointer;
 text-transform:var(--knop-transform);letter-spacing:var(--knop-spacing);
 text-decoration:none;display:inline-block;white-space:nowrap;
 transition:background .15s,color .15s,border-color .15s}
/* Eén maat voor elke knop die iets doet: de hoofdknop, de omlijnde en de
   knop in een rij of tabel. Tot 22 oktober 2026 had `.zacht` een eigen,
   kleinere maat (28 px), en stonden er naast elkaar knoppen van 28, 38 en
   44 px, ook in dezelfde rij (Filteren naast een veld, Weghalen naast Rol
   geven). Nu is het één hoogte (`--knop-h`), met de tekst in het midden.
   Een kale `.knop` krijgt de omlijnde vorm, zodat hij nooit als losse tekst
   op het scherm staat. */
.knop,.pak,.los,.zacht{display:inline-flex;align-items:center;justify-content:center;
 min-height:var(--knop-h);padding:0 18px;vertical-align:middle}
.knop{background:var(--surface);border:1px solid var(--border-dark);color:var(--heading)}
.knop:not(.pak):hover{border-color:var(--primary);color:var(--heading)}
/* Signatuur-CTA van het design system: lila pil met donkere tekst. */
.pak{background:var(--knop-primair-bg);color:var(--knop-primair-tekst);
 border:1px solid transparent}  /* even hoog als een omlijnde knop ernaast */
/* Een eigen hoverkleur per huisstijl in plaats van een brightness-filter: die
   maakte van elk blauw iets willekeurig donkerders en was niet te sturen.
   `color` staat er met opzet bij — een knop die een link is, ving anders de
   linkkleur van `a:hover` op en werd in het groene thema olijfgroen. */
.pak:hover{background:var(--knop-primair-hover);color:var(--knop-primair-tekst)}
/* Een hoofdknop op elke regel van een lijst (Inplannen op /inspecties, Ik
   pak deze op /beoordelen, Rol geven op /gebruikers). In Certify360 heeft die
   de vorm van de omlijnde knop: vierentwintig lila pillen onder elkaar waren
   het felste op de pagina, en dan valt er niets meer op. De Brand Portal en de
   Drukwerk Tool doen het ook zo: lila voor de ene hoofdactie, omlijnd in een
   rij. Groene Erkenningen en Examenadviesburo zetten deze rollen op hun
   hoofdknop, dus daar blijft alles zoals het was. */
.kaart .pak,td .pak{background:var(--knop-rij-bg);color:var(--knop-rij-tekst);border-color:var(--knop-rij-rand)}
.kaart .pak:hover,td .pak:hover{background:var(--knop-rij-hover);color:var(--knop-rij-tekst);
 border-color:var(--knop-rij-hover-rand)}
.los,.zacht{background:var(--surface);border:1px solid var(--border-dark);color:var(--heading)}
.los:hover,.zacht:hover{border-color:var(--primary);color:var(--heading)}
a.knop:hover,a.pak:hover,a.zacht:hover,a.los:hover{text-decoration:none}
/* Naast een invoerveld zo hoog als dat veld (44 px), zodat de onderkanten
   gelijk liggen: in de filterbalk, bij een rolkeuze en in een formulierrij. */
.filters .knoppen .knop,.filters .knoppen button,.rolform button,.zoekrij button{min-height:44px}

label.vl{display:block;font-size:13px;font-weight:600;color:var(--heading);margin-bottom:6px}
/* Een e-mailveld (op Instellingen) ziet eruit als elk ander tekstveld; tot
   20 oktober 2026 stond hij hier niet bij en kreeg hij de kale browserstijl. */
input[type=search],input[type=text],input[type=email],input[type=date],input[type=password],input:not([type]),select{border:1px solid var(--border-dark);
 border-radius:var(--radius);padding:9px 14px;font:inherit;width:100%;min-height:44px;
 background:var(--surface);color:var(--ink)}
/* Eigen chevron, 1-op-1 uit de Brand Portal (`select.text`), die hem op zijn
   beurt van de Drukwerk Tool heeft: de native pijl plakt tegen de rand en laat
   zich met padding niet verplaatsen, want de browser tekent hem op een vaste
   afstand van die rand. Met appearance:none tekenen we hem zelf, met ruimte
   ernaast en zonder dat de tekst hem overlapt. Stroke = --muted. */
select{appearance:none;-webkit-appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%233e697d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
input[type=search],input[type=text],input[type=email],input[type=date],input[type=password],
input:not([type]),select{max-width:440px}
/* Ook bij een muisklik een rustige rand: dat is geen focusindicator maar
   gewoon zichtbaar maken waar je typt. */
input:focus,select:focus,textarea:focus{border-color:var(--focus-ring);outline:none}
input::placeholder{color:var(--muted);opacity:1}
/* --- het inspectierapport ------------------------------------------------
   Eén lang formulier. Op een breed scherm staan de kopgegevens in twee
   kolommen, op een telefoon onder elkaar. De invoervelden erven de opmaak van
   de rest; alleen `number` en `textarea` moesten er nog bij. */
input[type=number],textarea{border:1px solid var(--border-dark);border-radius:var(--radius);
 padding:9px 14px;font:inherit;width:100%;background:var(--surface);color:var(--ink)}
/* Elk veld 44 px hoog, ook in een tabel, waar de kleinere letter het anders
   twee pixels lager maakte dan dezelfde velden erboven. */
input[type=number]{min-height:44px}
textarea{resize:vertical;min-height:40px;line-height:1.5}
input[type=number]:focus,textarea:focus{border-color:var(--focus-ring)}
/* Een datumveld valt buiten de regels hierboven zodra het een eigen type
   draagt, en viel daardoor terug op de browserstandaard: 125 bij 22 pixels in
   monospace met een inset randje, naast velden van 428 bij 44. Geen
   `appearance:none` — dan haalt Safari de kalenderknop weg en houd je een
   tekstveldje over. Alleen maat, rand en letter gelijktrekken, en het
   kalendericoon groot genoeg om met een duim te raken. */
/* Vaste hoogte en niet `min-height`: een datumveld rekent zijn regelhoogte
   zelf uit en kwam daardoor twee pixels boven zijn buren uit in dezelfde rij.
   Met `box-sizing:border-box` (globaal gezet) is dit precies 44 inclusief rand
   en padding, gelijk aan de tekstvelden ernaast. */
input[type=date]{height:44px;font-family:var(--font-body);
 font-variant-numeric:tabular-nums}
input[type=date]::-webkit-datetime-edit{padding:0}
/* 18 plus 2 padding past binnen de regelhoogte van de andere velden; bij 20
   plus 4 werd het veld vier pixels hoger dan zijn buren in dezelfde rij. */
input[type=date]::-webkit-calendar-picker-indicator{width:18px;height:18px;padding:2px;
 margin-left:6px;cursor:pointer;opacity:.55;border-radius:var(--radius-sm)}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--bg)}
input[type=date][readonly]::-webkit-calendar-picker-indicator{display:none}
input[readonly],textarea[readonly]{background:var(--bg);color:var(--muted)}
.kopraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);
 margin-bottom:var(--space-lg)}
@media (max-width:640px){.kopraster{grid-template-columns:1fr}}
.kopraster .veld input,.kopraster .veld textarea,.kopraster .veld select{max-width:none}
/* Tussen de tabel en de vraag eronder dezelfde ruimte als tussen twee velden. */
.tabelwrap + .veld{margin-top:var(--space-lg)}
.rapport h2{margin-top:var(--space-xl)}
/* De regels die meetellen voor het afwijkend aanbod zijn op papier gearceerd;
   hier ook, zodat het formulier herkenbaar blijft voor wie het op papier kent. */
table.scores tr.aa td{background:var(--warning-tonal)}
table.scores tr.bloktitel td{background:var(--bg);border-top:1px solid var(--border-dark)}
/* Een regel met een veld erin: de tekst op het midden van het veld, en niet
   erboven. */
table.scores td{vertical-align:middle}
table.scores input.punt{max-width:96px;text-align:right}
table.scores textarea{min-height:38px}
table.scores .pil{margin-left:6px}
tfoot td{font-size:16px;background:var(--bg);border-top:2px solid var(--border-dark)}
/* Het oordeel als laatste rij van de tabel, onder het totaal (21 oktober
   2026; daarvoor een losse regel die tegen de totaalrij plakte). */
table.scores tr.oordeelrij td{border-top:1px solid var(--border);font-size:15px;
 padding-top:var(--space-md);padding-bottom:var(--space-md);white-space:normal}
table.scores tr.oordeelrij.afwijkend td{background:var(--error-tonal);color:var(--heading)}
.knoppenrij{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap;
 margin-top:var(--space-lg)}
.knoppenrij .stand{margin:0}
/* Een staafje in een tabelcel. Niet `.balkje` hergebruiken: die draagt een
   negatieve bovenmarge omdat hij normaal onder een kop hangt, en hier trok dat
   het percentage acht pixels over de staaf heen. */
.staafje{width:100%;max-width:200px;height:6px;border-radius:var(--radius-full);
 background:var(--bg);overflow:hidden;margin:0 0 4px}
.staafje i{display:block;height:100%;background:var(--primary);
 border-radius:var(--radius-full);min-width:3px}
.deelcijfer{display:block;font-size:12px;color:var(--muted);
 font-variant-numeric:tabular-nums}
/* Tweede regel in een tabelcel. Niet `.stand` hergebruiken: die staat normaal
   onder een kop en draagt daarom een negatieve bovenmarge, waardoor het
   bijschrift hier tegen de regel erboven aan plakte. */
.bijschrift{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;
 color:var(--muted)}
/* Rolkiezer plus knop op één regel in de tabelcel. */
.rolform{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}
.rolform select{min-width:150px;width:auto;min-height:44px}
td .pil + .bijschrift{margin-top:4px}
/* --- grafieken -----------------------------------------------------------
   De svg's komen uit tools/grafiek.py; hier staat alleen hoe ze eruitzien.
   Tekst in een svg erft de letter niet vanzelf, vandaar `font-family`. */
.grafiek{display:block;width:100%;height:auto;margin-bottom:var(--space-md)}
.grafiek text{font-family:var(--font-button);fill:var(--muted)}
.grafiek .g-waarde{font-size:11px;fill:var(--heading);font-weight:600}
.grafiek .g-label{font-size:10.5px}
.grafiek .g-as{stroke:var(--border);stroke-width:1}
.grafiek .g-midden{font-size:26px;font-weight:700;fill:var(--heading)}
.grafiek .g-onder{font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.staafgrafiek{max-height:170px}
.grafiek-leeg{margin:0 0 var(--space-md);padding:var(--space-lg);text-align:center;
 background:var(--bg);border-radius:var(--radius);color:var(--muted);font-size:13px}
/* Ring met de legenda ernaast; onder de 380px eronder, want naast elkaar houdt
   de legenda dan nog geen honderd pixels over. */
.ringblok{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-md);
 flex-wrap:wrap}
.ringgrafiek{width:130px;flex:0 0 130px;margin:0}
/* De basis bepaalt wannéér de legenda onder de ring valt: pas als er minder
   dan 130+24+basis over is. Met 150 gebeurde dat onder 304 px, terwijl een
   blok in de tweekoloms-opmaak 310 px breed is — net niet. De legenda hield
   dan 58 px over voor een woord van 86 ("goedgekeurd") en dat schoof over het
   getal ernaast. Met 190 valt hij daar wél onder de ring, en heeft hij de
   volle blokbreedte. */
.g-legenda{list-style:none;margin:0;padding:0;flex:1 1 190px;min-width:0}
.g-legenda li{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.g-vlek{width:10px;height:10px;border-radius:2px;flex:0 0 10px}
/* Legendanamen zijn korte woorden; die mogen tussen woorden afbreken maar
   niet middenin — 'goedgekeu rd' leest als een typefout. */
/* En als het dan nog niet past, liever een leesbaar afgekapt woord dan tekst
   die over het getal heen valt. */
.g-naam{flex:1;min-width:0;color:var(--ink);overflow-wrap:normal;word-break:normal;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-aantal{font-variant-numeric:tabular-nums;font-weight:600;color:var(--heading)}
.g-deel{color:var(--muted);font-size:12px;min-width:34px;text-align:right}
/* Liggende balken: naam, spoor, waarde. */
.balken{list-style:none;margin:0 0 var(--space-md);padding:0}
/* De waardekolom groeit mee met wat erin staat. Vast op 44px brak "22
   adressen" over drie regels; de naam links krimpt in plaats daarvan. */
.balken li{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;align-items:center;
 gap:var(--space-sm);padding:4px 0;font-size:13px}
/* Alle rijen delen dezelfde kolommen. Had elke rij een eigen raster, dan
   bepaalde de breedte van zijn eigen waarde waar zijn balk begon, en stonden
   "14" en "5 adressen" onder elkaar met sporen die verspringen. */
@supports (grid-template-columns:subgrid){
 .balken{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,38%) max-content;
  column-gap:var(--space-sm)}
 .balken li{grid-column:1/-1;grid-template-columns:subgrid}
}
.b-naam{min-width:0;overflow-wrap:break-word;hyphens:auto}
.b-spoor{height:7px;border-radius:var(--radius-full);background:var(--grafiek-spoor);
 overflow:hidden}
.b-spoor i{display:block;height:100%;border-radius:var(--radius-full);min-width:3px}
.b-waarde{text-align:right;font-variant-numeric:tabular-nums;color:var(--heading);
 font-weight:600;white-space:nowrap}
@media (max-width:420px){
 .ringgrafiek{width:104px;flex:0 0 104px}
 .balken li{grid-template-columns:minmax(0,1fr) 60px auto}
 @supports (grid-template-columns:subgrid){
  .balken{grid-template-columns:minmax(0,1fr) 60px max-content}
  .balken li{grid-template-columns:subgrid}
 }
}

/* --- het overzicht -------------------------------------------------------
   Elk blok heeft dezelfde opbouw: titel met bereik, één regel uitleg, twee
   kerncijfers, één beeld op een vaste hoogte, en onderaan de weg erheen
   (`Overzichtsblok`). Daardoor zijn alle blokken even hoog, en staat een
   eigen indeling net zo strak als de standaard. Vaste kolomaantallen en geen
   `auto-fit`: met drie of zes blokken lopen de rijen precies vol. Elke rij
   even hoog (`grid-auto-rows:1fr`) kan nu wel: er is geen blok meer dat twee
   keer zo hoog is als de rest (11 oktober 2026). */
.blokken{display:grid;grid-template-columns:1fr;gap:var(--space-lg);
 margin-top:var(--space-lg)}
@media (min-width:700px){
 .blokken{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
}
@media (min-width:1120px){.blokken{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blok{--beeld:188px;display:flex;flex-direction:column;min-width:0;background:var(--surface);
 border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl)}
.blokkop{display:block;margin-bottom:var(--space-md)}
.blokkop .bloktitel{display:flex;align-items:center;gap:2px}
.blok h2{margin:0;font-size:18px;line-height:1.3}
/* Waarover de cijfers gaan, op een eigen regel onder de titel: naast een
   lange titel ("Opleiders die aandacht vragen") werd het afgekapt. */
.blokbereik{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--muted);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blokcijfers{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);
 margin-bottom:var(--space-md)}
.blokcijfers .g{display:block;font-size:26px;line-height:1.15;font-weight:600;
 color:var(--primary);font-variant-numeric:tabular-nums;font-family:var(--font-button)}
/* Een label in gewone letters: 11 punt in hoofdletters las niet weg. Twee
   regels plek, zodat de cijfers ernaast op één lijn blijven. */
.blokcijfers .l{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);
 margin-top:2px;min-height:2.7em}
.blokbeeld{margin:0;flex:1;display:flex;flex-direction:column;min-height:0}
.grafiektitel{margin:0 0 var(--space-sm);font-size:12px;letter-spacing:.02em;color:var(--muted);
 font-family:var(--font-button);font-weight:600}
/* Het vlak heeft een vaste hoogte: vijf balken, zes staven, een ring of vier
   rapporten passen erin, en een blok groeit er niet doorheen. */
.blokbeeldvlak{height:var(--beeld);display:flex;flex-direction:column;justify-content:flex-start;
 overflow:hidden}
.blokbeeldvlak > *{margin-bottom:0}
.blokbeeldvlak .staafgrafiek{height:150px;max-height:none;width:100%}
/* Ring en legenda altijd naast elkaar: eronder past de legenda niet in het vlak. */
.blokbeeldvlak .ringblok{margin:0;flex-wrap:nowrap}
.blokbeeldvlak .ringgrafiek{width:120px;flex:0 0 120px}
.blokbeeldvlak .g-legenda{flex:1 1 auto}
.blokbeeldvlak .grafiek-leeg{margin:0;flex:1;display:flex;align-items:center;justify-content:center}
/* In het vlak een naam over hooguit twee regels: een lang criterium van
   bijlage 11 duwde de balken eronder anders het blok uit. */
.blokbeeldvlak .b-naam{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blokfout{margin:0;flex:1}
/* Een lijst in een blok: per regel de titel met het cijfer ernaast, en
   daaronder wie en wanneer met de uitkomst. Twee korte regels in plaats van
   een kaart per rapport, zodat er vier in het vlak passen. */
.bloklijst{list-style:none;margin:0;padding:0}
.bloklijst li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;
 row-gap:1px;align-items:baseline;padding:5px 0;border-top:1px solid var(--border)}
.bloklijst li:first-child{border-top:0;padding-top:0}
.bloklijst a{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.bloklijst .cijfer{font-weight:600;font-size:14px;color:var(--primary);
 font-variant-numeric:tabular-nums;text-align:right}
.bloklijst .meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.bloklijst .pil{justify-self:end;font-size:10.5px;padding:1px 8px}
/* Twee soorten naast elkaar (Per soort en tarief). */
.bloktabel{font-size:13.5px}
.bloktabel [role=row]{display:grid;grid-template-columns:minmax(0,1fr) 6.5em 6.5em;gap:var(--space-sm);
 align-items:baseline;padding:8px 0;border-top:1px solid var(--border)}
.bloktabel [role=row]:first-child{border-top:0;padding-top:0}
.bloktabel [role=columnheader]{font-size:12px;color:var(--muted);font-weight:600;text-align:right}
.bloktabel [role=rowheader]{color:var(--ink)}
.bloktabel [role=cell]{text-align:right;color:var(--heading);font-weight:600;font-variant-numeric:tabular-nums}
.bloklinks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);padding-top:var(--space-md);
 min-height:calc(var(--space-md) + var(--knop-h))}
/* Een tweede weg naast de knop: een gewone link, met een tikvlak van 44 px. */
.bloklinks .bloklink{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.blokken + .zoekrij,.zoekrij + .stand{margin-bottom:var(--space-lg)}
/* In één kolom staan de blokken onder elkaar en hoeven ze niet even hoog te
   zijn: daar groeit het vlak mee, en valt er niets weg. Ook geen vaste
   minimumhoogte: dan stond er onder vier balken een leeg vlak van 100 px. */
@media (max-width:699.98px){.blokbeeldvlak{height:auto;min-height:0}}
@media (max-width:640px){
 .blokken{grid-template-columns:1fr;gap:var(--space-md)}
 .blok{padding:var(--space-lg)}
 .bloklinks .knop{flex:1 1 auto;text-align:center}
}

/* Het overzicht indelen. Boven elk blok een smalle balk met de knoppen; het
   blok zelf blijft hetzelfde, zodat je ziet wat je verplaatst. Met JavaScript
   is het hele blok te slepen (paginascript.js); de greep zegt dat. */
.indeelregel{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:center;
 justify-content:space-between;background:var(--info-tonal);color:var(--melding-info-tekst)}
.indeelregel .knopregel{display:flex;gap:var(--space-sm);margin:0;align-items:center}
.indeelregel form{margin:0}
.indelen{display:flex;gap:6px;align-items:center;margin:calc(-1 * var(--space-sm)) 0 var(--space-md);
 padding-bottom:var(--space-sm);border-bottom:1px dashed var(--border-dark)}
.indelen form{margin:0}
.indelen form:last-child{margin-left:auto}
/* De pijlen vierkant, met het icoon in het midden. */
.indelen .knop{display:inline-flex;align-items:center;justify-content:center;min-height:32px}
.indelen form:not(:last-child) .knop{width:32px;padding:0}
.indelen button[disabled]{cursor:default}
.sleepgreep{color:var(--muted);cursor:grab;flex:0 0 auto;margin-right:2px}
.blokken[data-indelen] .blok{cursor:grab}
.blokken[data-indelen] .blok.sleept{opacity:.45;outline:2px dashed var(--primary);outline-offset:2px}
.verborgenblokken{margin-top:var(--space-xl)}
.verborgenblokken h2{font-size:16px;margin:0 0 var(--space-sm)}
.verborgenblokken ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.verborgenblokken li{display:flex;gap:var(--space-sm);align-items:center;background:var(--surface);
 border:1px solid var(--border);border-radius:var(--radius);padding:6px 6px 6px 12px}
.verborgenblokken form{margin:0}

/* --- bladeren ------------------------------------------------------------
   Verschijnt alleen als er meer dan één pagina is. De stand staat er in
   woorden bij ("26-50 van 2.313"), want een rij nummers alleen zegt niet
   hoeveel er nog komt. */
.blader{display:flex;align-items:center;gap:var(--space-sm) var(--space-md);flex-wrap:wrap;
 margin:var(--space-lg) 0 var(--space-xl)}
.blader .nummers{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.blader a,.blader .nu,.blader .stap{display:inline-flex;align-items:center;
 justify-content:center;min-width:44px;min-height:44px;padding:0 12px;
 border-radius:var(--radius-knop);font-family:var(--font-button);font-size:14px;
 text-decoration:none;border:1px solid transparent}
.blader a{color:var(--link);border-color:var(--border-dark);background:var(--surface)}
.blader a:hover{border-color:var(--primary);color:var(--link)}
.blader .nu{background:var(--knop-primair-bg);color:var(--knop-primair-tekst);font-weight:600}
.blader .stap.uit{background:var(--knop-uit-bg);color:var(--knop-uit-tekst)}
.blader .gat{color:var(--muted);padding:0 2px}
.blader-stand{color:var(--muted);font-size:13px;margin-left:auto;
 font-variant-numeric:tabular-nums}
@media (max-width:640px){
 /* Op een telefoon gaat de stand onder de knoppen; naast elkaar bleef er voor
    de nummers een kolom van vijftig pixels over. */
 .blader{gap:var(--space-sm)}
 .blader-stand{margin-left:0;flex:1 1 100%;order:3}
 .blader .stap{flex:1 1 auto}
}
/* Verplicht met een sterretje, optioneel met zoveel woorden. Een veld dat je
   mag overslaan zonder dat het ergens staat, laat je twijfelen. */
abbr.moet{color:var(--error-tekst);text-decoration:none;margin-left:2px;font-weight:700}
.mag{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
/* Uitgeschakeld: het grijze palet uit basis.css, ook bij aanwijzen, en in
   elke huisstijl. `:root[data-thema]` erbij, anders wint de omlijnde knop van
   Groene Erkenningen (`:root[data-thema="groen"] .los`) en blijft hij blauw. */
:root[data-thema] button[disabled],:root[data-thema] button[disabled]:hover{opacity:1;cursor:not-allowed;
 background:var(--knop-uit-bg);border-color:var(--knop-uit-rand);color:var(--knop-uit-tekst)}
@media (max-width:640px){
 table.scores input.punt{max-width:none}
 .knoppenrij button{flex:1 1 100%}
}
/* --- filters ------------------------------------------------------------
   Opzet uit de Drukwerk Tool: een rij keuzelijsten plus een zoekveld, de
   waarden in de URL zodat een gefilterde lijst te delen en te bewaren is, en
   een 'Filters wissen' dat álles wist — ook de zoekterm, want die perkt de
   lijst net zo hard in. */
.toolbar{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}
.filters{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:flex-end;
 background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
 padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-md)}
.filterveld{display:flex;flex-direction:column;gap:6px;min-width:150px}
.filterveld.groeit{flex:1;min-width:220px}
.filterveld select,.filterveld input{width:100%}
.filters .knoppen{display:flex;gap:var(--space-sm);align-items:center;padding-bottom:1px}
/* Meer filters: de velden die zelden nodig zijn, achter de knoppen
   (`Filterbalk`, `meer`). Dicht een link met een pijltje; open een eigen rij
   onder de gewone velden, in dezelfde vorm. */
.meerfilters > summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;
 list-style:none;font-family:var(--font-button);font-size:14px;color:var(--link)}
.meerfilters > summary::-webkit-details-marker{display:none}
.meerfilters > summary:hover{color:var(--link-hover)}
.meerfilters > summary .nav-chevron{transition:transform .15s ease}
.meerfilters[open]{flex-basis:100%}
.meerfilters[open] > summary .nav-chevron{transform:rotate(180deg)}
.meerinhoud{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:flex-end;padding-top:var(--space-xs)}
/* De regel die in de bewerkstand staat. Hij vervangt de hele rij, zodat je
   nooit twee plekken ziet waar dezelfde rol staat. */
.bewerkrij td{background:var(--accent-soft)}
.bewerkform{margin:0}
/* De download van het lege importformulier: tekst links, knop rechts. */
.importformulier{display:flex;gap:var(--space-md);align-items:center;justify-content:space-between;
 flex-wrap:wrap;margin-bottom:var(--space-md)}
.importformulier .bijschrift{display:block;max-width:60ch}
/* Importformulier repareren: wat de proefuploads in EMO leerden, naast het
   werk. Op een smal scherm eronder. */
.naastkolom{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
@media (min-width:1080px){.naastkolom{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
/* De twee blokken als accordion: er staat er hooguit één open (details met
   een gedeelde name, en een script voor browsers die dat niet kennen). Sinds
   21 oktober 2026 in de rustige vorm van `.uitlegkaart`
   (uitklappers-en-upload.css): een rand en het vlak van een kaart, een kop in
   de letter van een knop, open een lijn onder de kop. Tot dan drie zware
   kaarten met een schaduw. De kop blijft een h2, voor wie per kop door de
   pagina springt. Hij krijgt de letter van de summary, met de zijkolom erbij
   in de kiezer, anders wint de maat van een h2 in de groene huisstijl. */
.zijvouw{margin-bottom:var(--space-sm);background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius)}
.zijvouw > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
 min-height:44px;padding:10px 16px;cursor:pointer;list-style:none;border-radius:var(--radius)}
.zijvouw > summary::-webkit-details-marker{display:none}
.zijvouw > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 1px var(--focus-halo)}
.zijkolom .zijvouw > summary h2{margin:0;font-family:var(--font-button);font-size:14px;font-weight:500;
 color:var(--heading);letter-spacing:normal;text-transform:none}
.zijvouw > summary .nav-chevron{transition:transform .15s ease;flex:0 0 auto;color:var(--muted)}
.zijvouw[open] > summary{border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0}
.zijvouw[open] > summary .nav-chevron{transform:rotate(180deg)}
.zijvouw > .zijinhoud{padding:12px 16px}
.zijkolom ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
.zijkolom li{margin-bottom:4px}
.zijkolom dl{margin:0;font-size:13px;line-height:1.45}
.zijkolom dt{font-weight:600;margin-top:var(--space-sm);color:var(--heading)}
.zijkolom dt:first-child{margin-top:0}
.zijkolom dd{margin:2px 0 0}
.zijkolom .bijschrift{margin-top:var(--space-sm)}
/* In de gekleurde bewerkregel geen tweede kaart: het formulier ligt plat. */
.bewerkrij .filters.bewerkform{background:transparent;border:0;box-shadow:none;padding:0}
/* Onder het bewerkformulier, met een lijn ertussen: wat je zelden doet en niet
   per ongeluk wilt doen. Rechts uitgelijnd, net als Opslaan erboven. */
.bewerk-extra{display:flex;gap:var(--space-sm);align-items:center;justify-content:flex-end;
 flex-wrap:wrap;margin-top:var(--space-md);padding-top:var(--space-sm);
 border-top:1px solid var(--border)}
.bewerk-extra .bijschrift{margin:0 auto 0 0}
.bewerk-extra form{margin:0}
/* Eén gevaarlijke knop: rood omlijnd, pas gevuld als je erop wijst. */
.gevaar,:root[data-thema] .gevaar{border-color:var(--error-tekst);color:var(--error-tekst)}
.gevaar:hover,:root[data-thema] .gevaar:hover{background:var(--error-tonal);border-color:var(--error-tekst);
 color:var(--error-tekst)}
/* De rolkeuze met zijn knop op één regel, in plaats van Wijzig eronder. */
.rolform{flex-wrap:nowrap}
.rolform select{flex:1 1 auto;min-width:0}
/* Wat eerder als style= in de schermen stond, met dezelfde waarden. Een knop
   onder een lege lijst of een filterregel op een eigen regel; ruimte boven het
   oordeel, de pdf-knop en de terugkoppeling onderaan een detailpagina; en op
   Repareren de ruimte onder het uploadvak, de opmerkingen per regel en de
   downloadknoppen. */
/* Een rij knoppen naast elkaar, met vaste ruimte ertussen in plaats van een
   harde spatie (`&nbsp;`). Alle maten op de schaal van --space. */
.knopregel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-top:var(--space-md)}
p.knopregel{margin-bottom:var(--space-md)}
.oordeelblok{margin-top:var(--space-lg)}
.pdfregel{margin-top:var(--space-xl)}
.terugregel{margin-top:var(--space-2xl)}
.uploadvak{margin-bottom:var(--space-lg)}
.opmerkingenlijst{margin:0;padding-left:18px}
.downloadknop{margin-right:8px}
.downloadrij{margin:20px 0}
/* De storing in een scherm: wat er aan de hand is, in gewone taal. De aanroep
   staat sinds 20 oktober 2026 alleen nog in de log. */
.storing-uitleg{margin:0 0 14px}
/* Wanneer en waar een bijeenkomst is, bovenaan het detail van een inspectie:
   datum, begin- en eindtijd, plaats en soort naast elkaar, op een telefoon
   onder elkaar. */
dl.wanneer{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);margin:var(--space-sm) 0 var(--space-md)}
dl.wanneer dt{color:var(--muted);font-size:12.5px;margin:0}
dl.wanneer dd{margin:0;font-weight:500;color:var(--heading)}

/* --- de kop van een pagina met een pil ernaast ---------------------------
   Voor wie alleen meeleest: "alleen lezen" naast de h1 (`Paginakop`). */
.paginakop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-sm);
 margin:0 0 var(--space-md)}
.paginakop > h1{margin:0}

/* --- Laatst afgehandeld: een kop en één regel om open te klappen ---------
   Naslag onder het werk, dus dicht en rustig: een regel in de linkkleur met
   het pijltje van de andere uitklappers, en pas daarachter de filters en de
   tabel (`schermWerkvoorraad`). */
details.afgklap > summary{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:44px;
 color:var(--link);font-weight:600;cursor:pointer;list-style:none}
details.afgklap > summary::-webkit-details-marker{display:none}
details.afgklap > summary:hover{color:var(--link-hover)}
details.afgklap > summary:hover span{text-decoration:underline}
details.afgklap > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;
 box-shadow:0 0 0 1px var(--focus-halo);border-radius:var(--radius-sm)}
details.afgklap > summary .nav-chevron{transition:transform .15s ease}
details.afgklap[open] > summary{margin-bottom:var(--space-sm)}
details.afgklap[open] > summary .nav-chevron{transform:rotate(180deg)}
h2 + details.afgklap{margin-top:calc(-1 * var(--space-sm))}

/* Een knop met een tip ernaast (Vastzetten op de uitbetalingen): samen, zodat
   ze niet uit elkaar vallen als de kaart omklapt. */
.knoptip{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.knoptip > .tip{margin-left:0}
/* In een actiekolom staat de tip alleen bij de eerste knop; de knoppen eronder
   houden zijn plek vrij, zodat ze allemaal op dezelfde lijn staan. */
td.acties .knoptip:not(:has(> .tip)){padding-right:18px}

/* De tips bij Weging en Gewogen boven de scoretabel, en die uit de koprij
   van een lijst, alleen op een smal scherm: daar is de koprij met hun tips
   weg (`SCOREUITLEG`, `kolomTipsHtml`). */
.scoreuitleg,.kolomtips{display:none}
@media (max-width:899.98px){
 .scoreuitleg,.kolomtips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-lg);
  margin:0 0 var(--space-sm);font-size:13px;color:var(--muted)}
}

/* Een pagina om te lezen (Privacy): de regels niet breder dan --tekst-max,
   en bovenaan een inhoudsopgave met ankers. De kaarten worden zo breed als
   de tekst erin plus hun opvulling. Een anker springt niet onder de
   vastgezette bovenbalk. */
.leestekst{max-width:calc(var(--tekst-max) + 2 * var(--space-xl) + 2px)}
.leestekst p,.leestekst ul{max-width:var(--tekst-max)}
.leestekst > [id]{scroll-margin-top:96px}
.inhoudsopgave{margin:0 0 var(--space-lg)}
.inhoudsopgave ul{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);margin:0;padding:0;
 list-style:none;font-size:14px}
/* --- uitklappers -------------------------------------------------------
   De filterbalk staat op een telefoon dicht.
   Op een breed scherm is de knop verborgen en staat er niets in de weg: het
   `open`-attribuut staat vast in de HTML en alleen JavaScript haalt hem op een
   smal scherm weg. Zonder JavaScript zie je dus gewoon alles. */
/* Een kaart met een detailpagina erachter. De titel is de echte link —
   dat houdt het werkbaar met een toetsenbord en met een schermlezer — en de
   rest van de kaart reageert op een tik via het script onderaan. Knoppen en
   andere links daarin blijven gewoon zichzelf. */
.kaart.klik{cursor:pointer}
.kaart.klik .op b a{color:inherit;text-decoration:none}
.kaart.klik:hover{border-color:var(--border-dark)}
.kaart.klik:hover .op b a,.kaart.klik .op b a:hover{text-decoration:underline}
.kaart.klik:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 1px var(--focus-halo)}
p.uitleg{margin:0 0 10px}
.beheerknoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.beheerknoppen form.claim{margin:0}
ul.uitleg{margin:0 0 10px;padding-left:20px}
ul.uitleg li{margin-bottom:4px}
.filterblok{margin-bottom:var(--space-md)}
.filterblok > summary{display:none}
.filterblok > .filters{margin-bottom:0}
.samenvouw{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
 width:100%;min-height:44px;padding:9px 16px;cursor:pointer;list-style:none;
 background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
 font-family:var(--font-button);font-size:14px;font-weight:500;color:var(--heading)}
.samenvouw::-webkit-details-marker{display:none}
.samenvouw .nav-chevron{transition:transform .15s ease;flex:0 0 auto;color:var(--muted)}
details[open] > .samenvouw .nav-chevron{transform:rotate(180deg)}
.filterknop{display:flex;align-items:center;gap:8px}
.filtertel{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
 height:20px;padding:0 6px;border-radius:var(--radius-full);background:var(--primary);
 color:var(--tekst-op-kleur);font-size:12px;line-height:20px}
/* Uitleg die je opent als je hem nodig hebt (`Uitklap`; op de inspecties "Hoe
   de selectie werkt" en de uitleg bij het filter). Dit is de enige vorm voor
   een uitklapper met uitleg, hooguit één per pagina, en onderaan. De oude
   `.vouwblok` (op een breed scherm open, op een telefoon dicht) is weg sinds
   20 oktober 2026.
   Eén rustige kaart, zoals details.advanced in de Drukwerk Tool en de
   tokengroepen in de Brand Portal: een rand en het vlak van een kaart, een kop
   in de letter van een knop, en open een lijn onder de kop met de uitleg in
   gewone tekst in dezelfde kaart. Tot 20 oktober 2026 een blauw vlak met een
   rand ervoor en een melding erin; dat vond de eigenaar te zwaar, vooral in de
   huisstijl van Certify360. Zo breed als de filterbalk en de lijst eronder;
   alleen tokens. Een eigen ondermarge: zonder trok de regel eronder (.stand,
   met -8px bovenmarge) zich over de dichte kop heen. */
details.uitlegkaart{margin-bottom:var(--space-md);background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius)}
.uitlegkaart > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
 min-height:44px;padding:10px 16px;cursor:pointer;list-style:none;border-radius:var(--radius);
 font-family:var(--font-button);font-size:14px;font-weight:500;color:var(--heading)}
.uitlegkaart > summary::-webkit-details-marker{display:none}
.uitlegkaart > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 1px var(--focus-halo)}
.uitlegkaart > summary .nav-chevron{flex:0 0 auto;color:var(--muted);transition:transform .15s ease}
.uitlegkaart[open] > summary{border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0}
.uitlegkaart[open] > summary .nav-chevron{transform:rotate(180deg)}
.uitleginhoud{padding:12px 16px 2px;color:var(--ink)}
.uitleginhoud > p,.uitleginhoud > ul,.uitleginhoud > ol{margin:0 0 12px}
.uitleginhoud li{margin-bottom:4px}
/* --- upload-veld --------------------------------------------------------
   Overgenomen uit de Brand Portal (`.filedrop`, components/FileDrop.tsx): een
   dropzone met slepen én klikken, in plaats van de kale browser-invoer. Maten,
   klassen en toestanden zijn gelijk gehouden. Eén afwijking: de icoontjes zijn
   getekende SVG in plaats van de tekens ⬆ ✓ ✕, in dezelfde lijndikte als de
   chevron — een glyph valt per besturingssysteem anders uit en lijnt niet mee. */
.filedrop{display:flex;align-items:center;justify-content:center;gap:10px;
 padding:18px 16px;border:1.5px dashed var(--border-dark);border-radius:var(--radius);
 background:var(--bg);color:var(--muted);font-size:13px;text-align:center;cursor:pointer;
 transition:border-color .15s,background .15s,color .15s}
.filedrop:hover,.filedrop:focus-visible{border-color:var(--accent);color:var(--ink)}
.filedrop.dragging{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.filedrop.has-file{border-style:solid;background:var(--surface)}
.filedrop-prompt,.filedrop-file{display:inline-flex;align-items:center;gap:8px}
/* `hidden` heeft dezelfde specificiteit als een klasse en staat hierboven, dus
   zonder deze regel wint de display van de regel erboven en blijft een
   verborgen staat gewoon zichtbaar. In de Brand Portal speelt dat niet: daar
   rendert React de andere tak simpelweg niet. */
.filedrop-prompt[hidden],.filedrop-file[hidden]{display:none}
.filedrop-file{color:var(--ink);font-weight:500}
.filedrop-name{word-break:break-all}
.filedrop-icon{display:inline-flex;align-items:center;justify-content:center;
 width:26px;height:26px;flex:0 0 26px;border-radius:var(--radius-full);
 background:var(--accent-soft);color:var(--accent)}
.filedrop.has-file .filedrop-icon{background:var(--success-tonal);color:var(--goed)}
.filedrop-clear{border:none;background:transparent;cursor:pointer;color:var(--muted);
 line-height:1;padding:0 2px}
.filedrop-clear:hover{color:var(--error)}
.muted{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:var(--space-md)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
 border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface);
 font-family:inherit;font-size:12px;color:var(--heading)}
.chip.toggle{cursor:pointer;color:var(--muted);text-decoration:none}
.chip.toggle:hover{border-color:var(--border-dark);color:var(--heading)}
.chip.toggle.on{background:var(--primary);border-color:var(--primary);color:var(--tekst-op-kleur)}
.chips .wis{font-size:12px;color:var(--muted)}
.zoekrij{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px}
.zoekrij .veld{flex:1;min-width:min(240px,100%);max-width:440px}

.venster{display:inline-flex;border:1px solid var(--border-dark);border-radius:var(--radius-knop);
 overflow:hidden;background:var(--surface);margin-bottom:18px}
.venster a{padding:7px 16px;font-size:13px;text-decoration:none;color:var(--muted);
 border-right:1px solid var(--border);white-space:nowrap}
.venster a:last-child{border-right:0}
.venster a[aria-current]{background:var(--primary);color:var(--tekst-op-kleur);font-weight:600}

.tabelwrap{overflow-x:auto;border:1px solid var(--border);
 border-radius:var(--radius-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
 color:var(--muted);padding:11px 16px;border-bottom:1px solid var(--border);background:var(--bg);
 font-weight:600;white-space:nowrap}
td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top}
td.dat{white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--rij-hover)}
tbody tr.klik{cursor:pointer}
/* Terug van een dossier: de regel die je aanklikte licht even op, zodat je
   ziet waar je was. `scroll-margin` houdt hem vrij van de rand. */
tbody tr:target,.wie a:target,#bewerk{scroll-margin-top:124px}
tbody tr:target{animation:hier 2.4s ease-out}
@keyframes hier{0%,40%{background:color-mix(in srgb,var(--accent) 16%,transparent)}100%{background:transparent}}
td a{font-weight:600}
/* Getallen rechts, met cijfers van gelijke breedte: dan staan eenheden,
   tientallen en bedragen onder elkaar en lees je een kolom in één oogopslag. */
th.num,td.num{text-align:right}
/* De actiekolom: rechts, zo smal als wat erin staat, en een knop of link daarin
   breekt nooit af. Tot 22 oktober 2026 stond "Naar de inspectie" op /agenda
   half op een regel achter de pil. Een knop staat met zijn midden op het
   midden van de eerste regel ernaast: een knop is 40 px hoog, een regel 22
   met 11 px opvulling erboven, dus 2 px opvulling hier. */
th.acties,td.acties{width:1%;white-space:nowrap;text-align:right}
td.acties{padding-top:2px;padding-bottom:2px}
td.acties form{display:inline-block;margin-top:0;margin-bottom:0}
td.acties > * + *{margin-left:var(--space-sm)}
td.acties > a:not(.knop){display:inline-flex;align-items:center;min-height:var(--knop-h)}
/* In een regel met invoervelden (de wachtlijst op Gebruikers) staan de knoppen
   op de hoogte van die velden, en even hoog. */
tr:has(> td > input[type=text],> td > select) > td.acties{padding-top:11px}
tr:has(> td > input[type=text],> td > select) > td.acties :is(.knop,.pak,.los,.zacht){min-height:44px}
/* Gegevens van één ding (een voorstel, een bijeenkomst, een rapport): links
   de naam, stil en smal, rechts de waarde. Zonder koprij: "Veld" en "Waarde"
   boven zo'n tabel zeiden niets. */
table.feiten td:first-child{width:30%;min-width:140px;color:var(--muted)}

.leeg{color:var(--muted);background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl)}
.leeg b{display:block;color:var(--heading);font-size:15px;margin-bottom:4px}
.leeg .knopregel{margin-top:16px}
.storing{background:var(--error-tonal);border-color:var(--storing-rand);color:var(--storing-tekst)}
.storing b{color:var(--storing-tekst)}

/* Even brede tegels in een raster, en niet elk zo breed als zijn label: drie
   tegels van 190, 177 en 165 px naast elkaar lazen als toeval. */
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:var(--space-sm);
 margin-bottom:var(--space-xl)}
.tegel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
 padding:var(--space-md) var(--space-lg);min-width:0}
.tegel .g{font-size:25px;font-weight:700;color:var(--primary);display:block;line-height:1.15;
 font-variant-numeric:tabular-nums}
.tegel .l{display:block;margin-top:2px;font-size:11px;line-height:1.4;letter-spacing:.06em;
 text-transform:uppercase;color:var(--muted)}
a.tegel{text-decoration:none;color:inherit}
.tegel.signaal{border-color:var(--warning);background:var(--warning-tonal)}
.tegel.signaal .g{color:var(--let)}
a.tegel.signaal:hover{border-color:var(--let)}

/* het oordeel waar de klantenservice om belt: bovenaan, in één zin */
.oordeel{background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-md);
 display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.oordeel .zin{flex:1;min-width:min(260px,100%)}
.oordeel .zin b{display:block;font-size:19px;color:var(--primary);line-height:1.3}
.oordeel .zin span{color:var(--muted);font-size:14px}
.oordeel.verlopen b{color:var(--error-tekst)}
.oordeel.bijna b{color:var(--let)}
.balkje{width:100%;height:6px;border-radius:360px;background:var(--bg);
 overflow:hidden;margin-top:14px}
.balkje i{display:block;height:100%;background:var(--primary);border-radius:360px;min-width:3px}
.spanwijdte{display:flex;justify-content:space-between;gap:12px;margin-top:6px;
 font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.oordeel.bijna .balkje i{background:var(--let)}
.oordeel.verlopen .balkje i{background:var(--error-tekst)}

/* Geen flex: dan werd elk vetgedrukt woord een eigen kolom ("Dit rapport is |
   ingediend | op …"). Gewone tekst, met de aanvulling er inline achter. */
.melding{display:block}
.melding .r{display:inline-block;margin-left:10px}
.fout-tekst{color:var(--error-tekst);font-size:13px;margin:6px 0 0;min-height:0}
/* Leeg neemt hij geen ruimte: anders stond een knop in een formulier zes
   pixels hoger dan dezelfde knop als link ernaast. */
.fout-tekst:empty{display:none}

.meta{color:var(--muted);font-size:13.5px;margin:0 0 4px}
/* De losse stukjes blijven bij elkaar op een regel — behalve een adres of code
   die langer is dan het scherm. Die mag overal breken, anders steekt hij de
   kaart uit. `anywhere` en niet `break-word`: alleen `anywhere` telt mee in de
   kleinste breedte die het vak mag aannemen, en daar gaat het hier om. */
.ding{white-space:nowrap}
.ding.lang{white-space:normal;overflow-wrap:anywhere}
.verborgen{display:none}
.visueel-verborgen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
 overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* De feiten van een deelnemer op één regel, als pillen (`/kandidaat`). Ze
   lopen door op de volgende regel als het scherm smal is. */
.metapillen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:var(--space-md)}
/* Een neutrale pil heeft de kleur van de pagina; hier staat hij op de pagina
   zelf en niet op een kaart, dus met het vlak en de rand van een kaart. */
.metapillen .pil.neutraal{background:var(--surface);border:1px solid var(--border)}
/* Een uploadvak met een label voor een visueel verborgen invoer (Ingediende
   bestanden): de focus staat op de invoer, de ring om het vak. Een vak met
   een fout krijgt de rand van een fout (`UITLEG_SCRIPT`). */
.filedrop:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;
 border-color:var(--accent);color:var(--ink)}
.filedrop.ongeldig{border-color:var(--error)}
.filedrop label.filedrop-prompt{cursor:pointer;flex:1;justify-content:center;align-self:stretch;margin:-18px -16px;padding:18px 16px}
.uploadkaart{max-width:760px}
/* De naam van het vak is een span (het label is het vak zelf): zelfde vorm als `label.vl`. */
.uploadveld > .vl{display:block;font-size:13px;font-weight:600;color:var(--heading)}
.uploadkaart .uploadveld + .uploadveld{margin-top:var(--space-xl)}
.uploadkaart .uploadveld .filedrop{margin-top:6px}
.uploadkaart .bijschrift{margin-top:6px}
.uploadkaart .fout-tekst:empty{display:none}
.uploadkaart .knoppenrij{margin-top:var(--space-lg)}
/* --- tooltip -----------------------------------------------------------
   Een rond knopje (?) naast een woord, en een wolk met hooguit twee zinnen
   uitleg (`Tip` en `tipHtml` in src/weergave/tip.tsx). De wolk is een popover:
   de browser legt hem boven alles, sluit hem bij Escape en bij een tik ernaast,
   en zonder JavaScript werkt hij ook. Alleen tokens, zodat hij in de drie
   huisstijlen meekleurt.

   Sinds 21 oktober 2026 zoals de HelpTip van de Drukwerk Tool
   (apps/web/src/components/helpTipStijl.ts): een gevuld knopje van 16 px met
   een vraagteken, en een donkere wolk van 12 px tekst boven het knopje, met
   een pijltje dat precies naar het midden van het knopje wijst. Twee
   verschillen, met opzet: het tikvlak is 44 px (::after), en wie er met de
   muis op wijst, kan de wolk ook aanwijzen zonder dat hij sluit. */
.tip{display:inline-flex;align-items:center;vertical-align:middle;margin-left:6px;
 line-height:1}
.tip .tip-knop{position:relative;display:inline-flex;align-items:center;justify-content:center;
 flex:0 0 auto;width:16px;height:16px;min-height:0;min-width:0;padding:0;margin:0;
 border:0;border-radius:50%;background:var(--tip-knop);color:var(--tip-knop-teken);
 font:inherit;line-height:1;text-transform:none;letter-spacing:normal;cursor:pointer;
 transition:color .12s ease,background .12s ease}
.tip .tip-knop svg{display:block;width:10px;height:10px}
/* Het tikvlak: 16 + 2 × 14 = 44 px, onzichtbaar, zonder dat de regel oprekt. */
.tip .tip-knop::after{content:"";position:absolute;inset:-14px}
.tip .tip-knop:hover,.tip .tip-knop:focus-visible,.tip:has(> .tip-wolk:popover-open) > .tip-knop{
 background:var(--tip-knop-actief);color:var(--tip-knop-actief-teken)}
/* Focus zoals elke knop: de ring van :focus-visible in basis.css, maar rond. */
.tip .tip-knop:focus-visible{border-radius:50%}

/* De wolk. Een popover krijgt van de browser een rand, opvulling, een eigen
   overloop en een plek midden in het venster; dat zetten we hier allemaal
   zelf. De lettermaat staat vast, want de wolk erft anders de 11 px van een
   pil of de vette letter van een kolomkop. `overflow:visible` voor het
   pijltje, dat net buiten de wolk staat. Hij vervaagt in .12s, zoals in de
   Drukwerk Tool; sluiten gaat meteen. Bij minder beweging zet smal.css de
   overgang uit. */
.tip .tip-wolk[popover]{margin:0;inset:auto;width:max-content;max-width:min(260px,calc(100vw - 16px));
 padding:8px 10px;background:var(--tip-bg);color:var(--tip-tekst);border:0;
 border-radius:var(--tip-radius);box-shadow:var(--schaduw-zwevend);
 font:400 12px/1.4 var(--font-body);text-align:left;text-transform:none;letter-spacing:normal;
 white-space:normal;overflow:visible;overflow-wrap:break-word;
 opacity:0;transition:opacity .12s ease}
.tip .tip-wolk[popover]:popover-open{opacity:1}
@starting-style{.tip .tip-wolk[popover]:popover-open{opacity:0}}
/* Zonder anchor positioning: een kaartje onderaan het scherm, over de volle
   breedte met 16 px ruimte aan de zijkanten. Leesbaar, en het dekt niet af
   waar je naar keek. Een pijltje heeft hier niets om naar te wijzen. */
.tip .tip-wolk[popover]:popover-open{position:fixed;left:16px;right:16px;bottom:16px;width:auto;max-width:none}
/* Met anchor positioning: 8 px boven het knopje, en eronder als daar geen
   plek is. Gecentreerd op het knopje, maar nooit dichter dan 8 px bij de rand
   van het scherm: de marge maakt het vlak waarin hij mag staan zo veel
   smaller, en de browser schuift hem binnen dat vlak. `anchor-scope` houdt de
   naam binnen deze tip, zodat elke wolk bij zijn eigen knopje hoort. */
@supports (position-area:block-end) and (anchor-scope:--tip){
 .tip{anchor-scope:--tip}
 .tip .tip-knop{anchor-name:--tip}
 .tip .tip-wolk[popover]:popover-open{inset:auto;position-anchor:--tip;
  position-area:block-start;margin:8px;width:max-content;max-width:min(260px,calc(100vw - 16px));
  position-try-fallbacks:flip-block}
}
/* Het pijltje, 5 px, in de kleur van de wolk. Waar het staat, meet het script
   onderaan de pagina (`paginascript.js`) zodra de wolk open is: het midden van
   het knopje ten opzichte van de wolk (`--pijl-x`), en of de wolk erboven of
   eronder staat (`data-pijl`). Zo wijst het ook naar het knopje als de
   browser de wolk bij de rand opzij schuift. Zonder die meting, zonder
   JavaScript of met de wolk als kaartje onderaan, staat er geen pijltje. */
.tip .tip-wolk[popover]::after{content:"";position:absolute;display:none;left:var(--pijl-x,50%);
 translate:-50% 0;border:5px solid transparent}
.tip .tip-wolk[data-pijl="onder"]::after{display:block;top:100%;border-top-color:var(--tip-bg)}
.tip .tip-wolk[data-pijl="boven"]::after{display:block;bottom:100%;border-bottom-color:var(--tip-bg)}
/* Een pil met een tip: de pil en het knopje samen, zodat ze niet uit elkaar
   vallen als de kaart omklapt. */
.piltip{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.piltip > .tip{margin-left:0}
/* Een label met een tip ernaast. De tip staat naast het label en niet erin:
   in het label zou "Uitleg bij …" in de naam van het veld komen. */
.vlmet{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.vlmet > .vl{margin-bottom:0}
/* Het laatste woord van een titel met de tip erachter: samen naar de volgende
   regel, zodat het knopje nooit alleen op een regel staat
   (`woordMetTip` in src/weergave/tip.tsx). */
.woordtip{white-space:nowrap}
.woordtip > .tip{margin-left:6px}
/* Beheer → Instellingen (src/onderdelen/instellingen/scherm.tsx): de
   tabbladen, de rijen met label en veld, en de balk met Opslaan.

   De tabbladen zijn die van de Brand Portal (components/ui/tabs.tsx, op
   Beheer → Instellingen daar): een onderstreping en geen pil. In rust de
   stille tekstkleur, bij aanwijzen de kopkleur met een streep in de donkere
   randkleur, actief de kopkleur, halfvet, met een streep in de hoofdkleur. De
   maten en kleuren staan als --tab-* in basis.css, zodat elke huisstijl ze
   kan omzetten. Hier zijn het links en geen knoppen: elk tabblad is een eigen
   adres, en dat werkt ook zonder JavaScript.

   Op een smal scherm schuiven de tabbladen opzij, binnen hun eigen strook: de
   pagina zelf schuift nooit opzij. De Brand Portal en de Drukwerk Tool laten
   ze daar afbreken. Met zeven tabbladen werden dat drie regels onderstreepte
   woorden, en dan is niet meer te zien wat bij elkaar hoort. Het actieve
   tabblad schuift in beeld (paginascript.js). */
.tabbladen{margin:0 -4px var(--space-lg);padding:4px 4px 6px;
 overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.tabbladen::-webkit-scrollbar{display:none}
.tabbladen ul{display:flex;gap:var(--tab-ruimte);margin:0;padding:0;list-style:none;
 width:max-content;min-width:100%;border-bottom:1px solid var(--tab-lijn)}
.tabbladen li{margin:0;flex:none}
.tabbladen a{display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px;
 padding:7px 2px;border-bottom:var(--tab-streep) solid transparent;
 border-radius:var(--tab-streep-radius) var(--tab-streep-radius) 0 0;
 font-family:var(--tab-font);font-size:var(--tab-maat);font-weight:var(--tab-gewicht);line-height:1.4;
 color:var(--tab-tekst);text-decoration:none;white-space:nowrap;
 text-transform:var(--tab-transform);letter-spacing:var(--tab-spacing);
 transition:color .12s ease,border-color .12s ease}
.tabbladen a:hover{color:var(--tab-tekst-actief);border-bottom-color:var(--tab-streep-hover)}
.tabbladen a[aria-current="page"]{color:var(--tab-tekst-actief);font-weight:var(--tab-gewicht-actief);
 border-bottom-color:var(--tab-streep-actief)}
/* Een tabblad dat aandacht vraagt: een stip, zoals op de sectierail van de
   Brand Portal. Een fout bij opslaan: het aantal, in de kleur van een fout. */
.tabstip{width:7px;height:7px;border-radius:50%;background:var(--tab-stip);flex:none}
.tabtel{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
 padding:0 6px;border-radius:var(--radius-full);background:var(--error-tonal);color:var(--error-tekst);
 font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:normal;text-transform:none}

.tabintro{color:var(--muted);margin:0 0 var(--space-lg);max-width:68ch}

/* Per onderwerp een fieldset, want dat is wat een schermlezer als groep
   aankondigt. De legenda binnen het kader, als kop van het blok: zwevend,
   anders zet de browser hem half op de rand (21 oktober 2026). */
.instelblok{border:1px solid var(--border);border-radius:var(--radius);
 background:var(--surface);padding:var(--space-lg) var(--space-xl);
 margin:0 0 var(--space-lg);min-width:0}
/* De kop van een blok zonder velden is een h2 en geen legenda; hij hoort er
   precies zo uit te zien, ook in een huisstijl die h2 groter zet. */
.instelblok legend,.tabinhoud .instelblok > h2.instelblokkop{float:left;width:100%;margin:0 0 var(--space-sm);padding:0;
 font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;color:var(--heading)}
.instelblok legend + *,.instelblok > h2 + *{clear:both}
/* Een rij: links het label, rechts het veld met de uitleg eronder, die via
   aria-describedby aan het veld gekoppeld is. Op een smal scherm onder
   elkaar. Tussen de rijen een haarlijn. */
.instelrij{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
 padding:var(--space-md) 0;border-top:1px solid var(--border)}
.instelblok legend + .instelrij,.instelblok > h2 + .instelrij{border-top:none;padding-top:var(--space-xs)}
.instelrij:last-child{padding-bottom:var(--space-xs)}
.instellabel,.instelveld{min-width:0}
/* Het label met zijn tip als één geheel, en de pil (waar de waarde vandaan
   komt) eronder. */
/* Het label met zijn tip: de tip loopt mee achter het laatste woord, ook als
   het label over twee regels gaat. */
.instellabel .vlgroep{display:inline}
.instellabel .vlgroep > .tip{margin-left:4px;vertical-align:-1px}
.instellabel .vl{display:inline;margin:0;font-size:14px;font-weight:600;color:var(--heading)}
.instelpillen{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
/* Gelijke breedte: elk tekstveld en elke keuzelijst even breed, elk getal
   even smal. Een getal hoeft geen 440 px; een adres wel. */
.instelveld input:not([type=checkbox]),.instelveld select{width:100%;max-width:440px}
.instelveld input[type=number]{max-width:160px}
.instelveld .vl-uitleg{margin:6px 0 0}
/* Een veld dat niet werd opgeslagen, door een fout erin. */
.instelveld [aria-invalid="true"]{border-color:var(--error-tekst);box-shadow:0 0 0 1px var(--error-tekst)}
.instelveld label.vl{margin:var(--space-md) 0 6px}
.instelveld > .vl-uitleg + label.vl{margin-top:var(--space-sm)}
.instelvast{margin:0;padding-top:10px;color:var(--ink)}
.instelveld .notice{margin:10px 0 0;max-width:52em}
.instelveld .knoppenrij{margin-top:10px}
.instelveld .scopes{margin:6px 0 var(--space-sm);padding-left:20px}
.instelveld .scopes li{margin:2px 0}
/* Een schakelaar: het vinkje met de opgeslagen stand als pil ernaast. Het
   label links is de naam, en 44 px hoog tikt het vinkje op een telefoon. */
.schakelregel{display:flex;align-items:center;gap:10px;min-height:44px}
.schakelregel input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--primary)}
@media (min-width:760px){
 .instelrij{grid-template-columns:minmax(0,240px) minmax(0,1fr);column-gap:var(--space-2xl);align-items:start}
 /* Het label op de hoogte van de tekst in het veld ernaast (44 px hoog). */
 .instellabel{padding-top:10px}
}

/* Opslaan, onderaan het tabblad, en zolang het formulier langer is dan het
   venster aan de onderkant van het venster: de knop is er altijd. */
.instelform{margin-bottom:var(--space-xl)}
.opslaanbalk{position:sticky;bottom:var(--space-sm);z-index:4;display:flex;flex-wrap:wrap;align-items:center;
 gap:var(--space-sm) var(--space-md);margin:var(--space-lg) 0 0;padding:var(--space-md) var(--space-lg);
 background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
 box-shadow:var(--schaduw-zwevend)}
.opslaanuitleg{font-size:13px;color:var(--muted)}

@media (max-width:640px){
 /* Een tik met een duim: 44 px hoog, en wat meer ruimte opzij. */
 .tabbladen a{min-height:44px;padding:0 4px}
 .instelblok{padding:var(--space-md)}
 .opslaanbalk{padding:var(--space-sm) var(--space-md)}
 .opslaanbalk button{flex:1 1 auto}
 .opslaanuitleg{flex:1 1 100%}
}
/* Grens op 900px, gelijk aan de andere drie tools: bij een andere grens zien ze
   er tussen 760 en 900 verschillend uit, en dat is precies wat we niet willen.
   Eén regel met de hamburger, de navigatie als paneel eronder. */
@media (max-width:899.98px){
 :root{--topbar-h:64px}
 .topbar{gap:6px 12px;padding:10px 12px}
 .nav-hamburger{display:inline-flex;order:2}
 .topbar .brandmark{order:0;gap:var(--space-sm)}
 .topbar .brandmark img{height:var(--logo-hoogte-klein);
  width:calc(var(--logo-hoogte-klein) * var(--logo-verhouding))}
 .topbar .brandmark .brandmark-naam{font-size:13px;padding-left:var(--space-sm)}
 /* De naam van de tool is lang: op een smal scherm mag hij over twee regels,
    naast het logo en vóór de hamburger, in plaats van van het scherm af te lopen. */
 .topbar .brandmark{flex-shrink:1;min-width:0}
 .topbar .brandmark .brandmark-naam{white-space:normal;line-height:1.2}
 .topbar .actions{display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;align-items:stretch;gap:2px;padding:var(--space-sm);
  background:var(--balk);box-shadow:var(--schaduw-zwevend);
  max-height:calc(100vh - 100%);overflow-y:auto;z-index:50}
 .topbar .actions.open{display:flex}
 .topbar .actions .nav,.topbar .actions .nav-groep{width:100%}
 /* Op een telefoon tik je hierop met een duim: 38px (7+24+7) is te laag voor
    een trefzekere tik, dus in het paneel gaan de regels naar de 44px die zowel
    Apple als Google als ondergrens aanhouden. */
 .topbar .actions .nav{text-align:left;justify-content:flex-start;
  display:flex;align-items:center;min-height:44px}
 .topbar .actions .nav-menu{position:static;box-shadow:none;padding-left:var(--space-md);
  min-width:0;margin-top:2px}
 /* Wie je bent staat onderaan het menu: logo plus hamburger houden de balk op
    één regel, en accountinformatie hoort bij het menu en niet bij de navigatie
    waar je doorheen tikt. */
 .topbar .actions .nav-user{margin:var(--space-xs) 0 0;
  padding:var(--space-sm) var(--space-md) 0;
  border-top:1px solid var(--balk-lijn);border-left:none;white-space:normal}
 /* In het uitklappaneel staat de wisselaar onder je naam op volle breedte:
    naast elkaar hield de keuzelijst ~90px over en dan las je de rollen niet. */
 .topbar .nav-user{white-space:normal;display:block}
 .topbar .rolwissel{margin:var(--space-sm) 0 0;padding:0 var(--space-md);
  flex-wrap:wrap;gap:var(--space-sm)}
 .topbar .rolwissel select{flex:1 1 100%;min-width:0;width:100%;min-height:44px}
 .topbar .rolwissel .rolknop{flex:1 1 100%;min-height:44px}
 .wrap{padding-left:20px;padding-right:20px}
 .wrap{padding-top:22px}
}
@media (max-width:899.98px){
 /* Op een telefoon zijn dit uitklappers; op een breed scherm blijft alles
    staan en is de knop er niet. */
 .filterblok > summary{display:flex}
 .filterblok:not([open]) > .filters{display:none}
 /* De uitleg boven een lijst mag drie regels zijn; de rest komt met een tik.
    Alleen als JavaScript de knop erbij heeft gezet — anders staat er niets
    om hem weer uit te klappen. */
 p.intro.klem{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:4px}
 .meer{background:none;border:0;padding:4px 0;margin:0 0 var(--space-md);cursor:pointer;
  font-family:var(--font-button);font-size:14px;color:var(--link);text-decoration:underline}
}
@media (max-width:640px){
 h1{font-size:23px}
 /* Vier tegels van 93px hoog kostten een kwart scherm. Compacter: de cijfers
    blijven alle vier zichtbaar, je hoeft er niet langs te scrollen. */
 .tegels{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:var(--space-md)}
 /* Een oneven aantal: de laatste tegel over de volle breedte, en niet alleen
    in een halve kolom (21 oktober 2026). */
 .tegels .tegel:last-child:nth-child(odd){grid-column:1 / -1}
 .tegels .tegel{padding:8px 12px}
 .tegels .tegel .g{font-size:21px;line-height:1.2}
 .tegels .tegel .l{font-size:10.5px;line-height:1.3}
 /* Onder elkaar mogen de velden de volle breedte pakken; naast elkaar zou een
    zoekveld van 335px de rij uit elkaar trekken. */
 .filters{padding:var(--space-lg);gap:var(--space-sm)}
 .filterveld,.filterveld.groeit{min-width:100%}
 .filters .knoppen{width:100%;padding-top:var(--space-xs)}
 .filters .knoppen button{width:100%}
 .meerfilters{width:100%}
 .meerinhoud{gap:var(--space-sm)}
 .bewerkform .knoppen button,.bewerkform .knoppen .knop{flex:1 1 0;width:auto;
  text-align:center}
 .tegel{min-width:0;padding:11px 16px}
 /* Vier knoppen naast elkaar passen niet op een smal toestel; twee rijen
    van twee wel, en de knoppen blijven groot genoeg om te raken. */
 .venster{display:grid;grid-template-columns:repeat(2,1fr);width:100%}
 @media (min-width:400px){.venster{grid-template-columns:repeat(4,1fr)}}
 .rij .op{min-width:100%}
 /* tabellen worden kaarten: zijwaarts scrollen is op een telefoon geen antwoord */
 .tabelwrap{border:0;background:none;overflow:visible}
 table,tbody,tr,td{display:block;width:100%}
 /* De koprij verdwijnt helemaal. Hij stond verstopt met clip-path, maar dat
    haalt hem niet uit de schermlezer: die las eerst "Naam Geboren Woonplaats
    E-mailadres Code" en daarna bij elke cel nog eens hetzelfde label uit
    `data-kop`. En omdat een verborgen cel wél breedte houdt, stonden er
    elementen tot 725 px buiten een scherm van 375. Met display:none is de
    kop weg en blijft het label staan waar het hoort: bij de waarde. */
 thead{display:none}
 tbody tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:6px 4px;margin-bottom:8px}
 tbody tr:hover{background:var(--surface)}
 td{border:0;padding:6px 14px;display:block;min-width:0;overflow-wrap:anywhere}
 td.dat{white-space:normal}
 td>*{min-width:0}
 td::before{content:attr(data-kop);display:block;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1px}
 td:empty{display:none}
 /* In een kaart staat een getal of een knop gewoon onder zijn label, links. */
 th.num,td.num,td.acties{text-align:left}
 td.acties{width:100%;white-space:normal;padding-top:6px;padding-bottom:6px}
 td.acties::before{display:none}
 /* Gegevens: de naam is hier zelf het label, dus geen tweede label erboven. */
 table.feiten td::before{display:none}
 table.feiten td:first-child{width:100%;font-size:12.5px;padding-bottom:0}
 table.feiten td + td{padding-top:2px}
 /* En één kaart met lijnen ertussen, en niet een kaart per gegeven. */
 table.feiten{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
 table.feiten tbody tr{border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;background:none}
 table.feiten tbody tr:last-child{border-bottom:0}
 /* Een onderdeel van het rapport is één vlak, zonder lijnen tussen zijn
    cellen: het is een kop boven de regels, geen eigen tabel. */
 table.scores tr.bloktitel{background:var(--bg)}
 table.scores tr.bloktitel td{background:none;border-top:0}
 /* Een kaart met een lijst erin: minder opvulling, anders blijft er op een
    telefoon voor de regels zelf maar 250 px over. */
 .card{padding:var(--space-lg)}
 /* Adressen en codes in kaarten en lijsten mogen afbreken; ze zijn langer dan
    een telefoon breed is. */
 .kaart .op span,.meta,.stand,.chip{overflow-wrap:anywhere}

 /* Alles wat je aantikt is minstens 44 px hoog. Gemeten vóór deze regel op een
    scherm van 390: knoppen 28-36 px, "Meer lezen" 26, "Filters wissen" 19, en
    de naamlinks in lijsten — de belangrijkste ingang naar een detailpagina —
    18 px. Dat is op een telefoon met een duim niet te raken zonder mikken.
    `inline-flex` in plaats van hoogte alleen: anders staat de tekst bovenin
    een doos van 44 en oogt de knop scheef. */
 button,.knop,.pak,.zacht,.los,.meer,.wis,.filterknop,.rolknop{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 /* De link die een rij opent. Alleen een directe kindlink van een cel, zodat
    een link midden in een lopende zin niet ineens 44 px hoog wordt en de
    regelval sloopt. */
 tbody td>a{min-height:44px;display:inline-flex;align-items:center}
 /* De titel van een kaart (/inspecties, de werkvoorraad): een tikvlak van
    44 px hoog, zonder dat de kaart hoger wordt. De opvulling valt weg tegen
    een even grote negatieve marge. Tot 21 oktober 2026 19 tot 22 px. */
 .kaart .op b a{display:inline-block;padding:11px 0;margin:-11px 0}
 /* Losse vervolgacties onder een lijst of kaart. */
 .tegelrij a,.toolbar a,.knoppenrij a{min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
 /* De terugkoppeling onderaan een detailpagina, het merk in de balk, de
    periodekeuze bij de verlopende certificaten en een e-mailadres dat je
    aantikt om te mailen. Allemaal losse doelen, geen tekst in een zin. */
 .terug,a[href^="mailto:"]{min-height:44px;display:inline-flex;align-items:center}
 .topbar .brandmark{min-height:44px}
 .venster a{padding:8px 4px;text-align:center;font-size:12.5px;
  min-height:44px;display:flex;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
 *{transition:none!important;animation:none!important}
}

:root[data-thema="groen"]{
 --primary:#006eb7; --primary-dark:#00538a;
 --accent:#697907; --accent-tint:#006eb7; --accent-soft:#eff4ce;
 --badge-tekst:#4f5a05;
 --bg:#f3f7fa; --surface:#fff; --border:#d7e5ef; --border-dark:#9cbdd6;
 --ink:#212529; --heading:#333; --muted:#4d5c66;
 --success:#697907; --success-tonal:#eff4ce; --goed:#4f5a05;
 --warning-tonal:#fdf3dd; --let:#8a5416;
 --error:#d23545; --error-tekst:#b02a37; --error-tonal:#fbeaec;
 --link:#006eb7; --link-hover:#697907;
 --info:#006eb7; --info-tonal:#cce2f1;
 --focus-ring:#006eb7; --focus-halo:#697907;
 --grafiek-1:#006eb7; --grafiek-2:#697907; --grafiek-3:#9cbdd6;
 --grafiek-spoor:#e4edf4;
 --radius-sm:0; --radius:0; --radius-lg:0; --radius-full:0; --radius-knop:0;
 --knop-transform:uppercase; --knop-spacing:.5px;
 /* De tabbladen als hun eigen menu: Dosis in hoofdletters, en een streep van
    3 px in hun blauw. */
 --tab-maat:15px; --tab-gewicht:600; --tab-gewicht-actief:700; --tab-streep:3px;
 --tab-transform:uppercase; --tab-spacing:.5px; --tab-ruimte:var(--space-xl);
 --knop-primair-bg:#006eb7; --knop-primair-tekst:#fff; --knop-primair-hover:#00426e;
 /* De tooltip met rechte hoeken, en wit op het olijf van het knopje (4,84:1). */
 --tip-radius:0; --tip-knop-actief-teken:#fff;
 /* Uitgeschakeld op hun eigen randkleur (--muted erop: 5,38:1). */
 --knop-uit-bg:var(--border);
 /* Een knop op elke regel is hier gewoon de hoofdknop. */
 --knop-rij-bg:var(--knop-primair-bg); --knop-rij-tekst:var(--knop-primair-tekst); --knop-rij-rand:transparent;
 --knop-rij-hover:var(--knop-primair-hover); --knop-rij-hover-rand:transparent;
 --logo-hoogte:46px; --logo-hoogte-klein:34px; --logo-verhouding:2.9295;
 --balk:#fff; --balk-tekst:#006eb7; --balk-tekst-op:#00426e;
 --balk-stil:#4d5c66; --balk-lijn:#d7e5ef; --balk-veld:#fff;
 --balk-veld-tekst:#212529; --balk-veld-stil:#7d8f9b;
 --balk-actief-bg:#006eb7; --balk-actief-tekst:#fff;
 --balk-focus:#006eb7; --balk-hover:rgba(0,110,183,.10);
 --font-display:"Dosis","Trebuchet MS",sans-serif;
 --font-button:"Dosis","Trebuchet MS",sans-serif;
 --font-body:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
/* Een witte balk heeft een rand nodig, anders zweeft hij op het vel. */
:root[data-thema="groen"] .topbar{border-bottom:1px solid var(--border)}
/* De chevron staat in een data-URI en kan geen variabele lezen, dus hier de
   donkere versie voor op het lichte vlak van de voetbalk. */
:root[data-thema="groen"] .voetbalk .rolwissel select{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%234d5c66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Dosis loopt smal en staat strak; koppen mogen daarom groter. 32 zoals de
   kop op hun site. */
:root[data-thema="groen"] h1{font-size:32px;line-height:1.15}
:root[data-thema="groen"] h2{font-size:22px}
/* Hun knoppen zijn recht, in kapitalen en met een pijl ervoor. Een getekende
   pijl en geen tekstteken: het teken "→" volgt het lettertype en stond per
   systeem anders op de basislijn. */
:root[data-thema="groen"] .pak::before{content:"";display:inline-block;width:14px;height:14px;
 margin-right:8px;vertical-align:-2px;background:currentColor;
 -webkit-mask:var(--pijl) center/contain no-repeat;mask:var(--pijl) center/contain no-repeat}
/* De navigatie zoals op hun site: Dosis in kapitalen, blauw. */
:root[data-thema="groen"] .topbar .nav{font-weight:700;font-size:15px;text-transform:uppercase;
 letter-spacing:.5px}
/* Secundaire knoppen als hun "Contact": blauw omlijnd, blauwe kapitalen. */
:root[data-thema="groen"] .pak{border-width:2px}
:root[data-thema="groen"] .los,:root[data-thema="groen"] .zacht{border:2px solid #006eb7;
 color:#006eb7;font-weight:700}
:root[data-thema="groen"] .los:hover,:root[data-thema="groen"] .zacht:hover{
 background:#006eb7;border-color:#006eb7;color:#fff}
/* Hun kaarten: wit, een dunne rand, en een dikke balk links in blauw — of in
   olijf voor wat van jou is. Dat is op hun site het herkenbaarste element. */
:root[data-thema="groen"] .card{border-color:#dee2e6}
:root[data-thema="groen"] .kaart{background:#fff;border:1px solid #dee2e6;
 border-left:6px solid #006eb7;padding-left:14px}
:root[data-thema="groen"] .kaart.mijn{background:#fafbef;border-color:#dee2e6;
 border-left-color:#697907}
:root[data-thema="groen"] .kaart.klik:hover{border-color:#9cbdd6;border-left-color:#006eb7}
:root[data-thema="groen"] .kaart.mijn.klik:hover{border-left-color:#697907}
/* Die kaarten zijn zelf al wit met een rand: een lijst ervan staat los op de
   pagina, en niet nog eens in een witte kaart (een kaart in een kaart). */
:root[data-thema="groen"] .card:has(> .kaart){background:none;border:0;padding:0}