:root{
  --ground:#F2F4F1; --surface:#FFFFFF; --surface-2:#FAFBFA;
  --ink:#16201C; --ink-dim:#5A6A63; --ink-faint:#8B9992;
  --line:#DCE3DE; --line-soft:#E9EEEB;
  --brand:#2F5D50; --brand-soft:#8FB3A6; --brand-wash:#E4EDE9;
  --markt:#9AA3B2; --markt-wash:#EDEFF3;
  /* Datakleuren, los van de merkkleur. De merkgroen #2F5D50 komt uit de
     bestaande werkmap en blijft de kleur van de interface, maar heeft te weinig
     chroma om als seriekleur te werken. Dit paar slaagt wel op alle zes checks:
     CVD deutan dE 19,1, normaal zicht 20,0, contrast boven 3:1. */
  --ons:#12795A; --markt-data:#2A78D6;
  /* sequentiele ramp voor de kaart: een tint, licht naar donker */
  --s1:#DDEFE8; --s2:#B9DFD1; --s3:#8ECBB6; --s4:#5FB398; --s5:#2E9679; --s6:#12795A; --s7:#0A5B44;
  /* tweede ramp voor de kansenlaag: die meet iets anders dan sterkte */
  --k1:#FBEEDA; --k2:#F5DEB2; --k3:#EDC881; --k4:#E0AD4E; --k5:#C8902E; --k6:#A6731D; --k7:#7F5713;
  --leeg:#D8DCDA; --lijn-kaart:#FFFFFF;
  --kritiek:#A34A32; --letop:#AD7F27; --goed:#3E7C5B;
  --kritiek-wash:#F6E7E2; --letop-wash:#F7EFDF; --goed-wash:#E5F0E9;
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:3px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101512; --surface:#18201C; --surface-2:#1D2621;
    --ink:#E6EDE8; --ink-dim:#93A19A; --ink-faint:#6B7A73;
    --line:#28322D; --line-soft:#212A25;
    --brand:#74AD9A; --brand-soft:#3C5F54; --brand-wash:#1E2C27;
    --markt:#79839A; --markt-wash:#20262E;
    --ons:#37997A; --markt-data:#4E8FDC;
    --s1:#1E2C27; --s2:#24413A; --s3:#2A574B; --s4:#327160; --s5:#3A8B74; --s6:#43A487; --s7:#5FBBA0;
    --k1:#3E3421; --k2:#55462D; --k3:#6B5738; --k4:#866D45; --k5:#A48755; --k6:#C2A268; --k7:#E0C083;
    --leeg:#333B37; --lijn-kaart:#0F1512;
    --kritiek:#D08064; --letop:#D6A94E; --goed:#6BAA87;
    --kritiek-wash:#2C1E1A; --letop-wash:#2B2418; --goed-wash:#1B2820;
  }
}
:root[data-theme="dark"]{
  --ground:#101512; --surface:#18201C; --surface-2:#1D2621;
  --ink:#E6EDE8; --ink-dim:#93A19A; --ink-faint:#6B7A73;
  --line:#28322D; --line-soft:#212A25;
  --brand:#74AD9A; --brand-soft:#3C5F54; --brand-wash:#1E2C27;
  --markt:#79839A; --markt-wash:#20262E;
  --ons:#37997A; --markt-data:#4E8FDC;
  --s1:#1E2C27; --s2:#24413A; --s3:#2A574B; --s4:#327160; --s5:#3A8B74; --s6:#43A487; --s7:#5FBBA0;
  --k1:#3E3421; --k2:#55462D; --k3:#6B5738; --k4:#866D45; --k5:#A48755; --k6:#C2A268; --k7:#E0C083;
  --leeg:#333B37; --lijn-kaart:#0F1512;
  --kritiek:#D08064; --letop:#D6A94E; --goed:#6BAA87;
  --kritiek-wash:#2C1E1A; --letop-wash:#2B2418; --goed-wash:#1B2820;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}

/* ---------------------------------------------------------------- schil */
.schil{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--line);
  padding:22px 18px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh;overflow-y:auto}
.merk{display:flex;flex-direction:column;gap:2px}
.merk .naam{font-family:var(--serif);font-size:19px;letter-spacing:-.01em}
.merk .sub{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.09em}
.groep{display:flex;flex-direction:column;gap:6px}
.groep>.kop{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:2px}
.bril{display:flex;flex-direction:column;gap:1px;text-align:left;padding:8px 10px;border-radius:var(--r);
  border:1px solid transparent;transition:background .12s,border-color .12s}
.bril:hover{background:var(--surface-2)}
.bril[aria-current="true"]{background:var(--brand-wash);border-color:var(--brand-soft)}
.bril b{font-weight:600;font-size:13.5px}
.bril span{font-size:11.5px;color:var(--ink-dim)}
select{width:100%;font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);color:var(--ink)}

/* ------------------------------------------------------- herkomstlegenda */
.legenda{margin-top:auto;border-top:1px solid var(--line-soft);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.legenda .rij{display:flex;gap:8px;align-items:baseline;font-size:11.5px;color:var(--ink-dim)}
.schakel{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 0;text-align:left}
.schakel .doos{width:30px;height:17px;border-radius:9px;background:var(--line);position:relative;transition:background .15s;flex:none}
.schakel .doos::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--surface);transition:transform .15s}
.schakel[aria-pressed="true"] .doos{background:var(--brand)}
.schakel[aria-pressed="true"] .doos::after{transform:translateX(13px)}

/* --------------------------------------------------------------- inhoud */
.blad{padding:26px 32px 64px;max-width:1180px}
.titelbalk{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.titelbalk h1{font-family:var(--serif);font-size:29px;letter-spacing:-.015em;line-height:1.15}
.titelbalk .kruimel{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:5px}
.vlag{font-size:11.5px;color:var(--letop);background:var(--letop-wash);border:1px solid color-mix(in srgb,var(--letop) 30%,transparent);
  padding:3px 9px;border-radius:20px;white-space:nowrap}

.rooster{display:grid;gap:14px;margin-bottom:22px}
.k4{grid-template-columns:repeat(4,1fr)} .k3{grid-template-columns:repeat(3,1fr)} .k2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.k4,.k3,.k2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.schil{grid-template-columns:1fr}.rail{position:static;height:auto}.k4,.k3,.k2{grid-template-columns:1fr}}

.kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.kaart>h2{font-size:12px;text-transform:uppercase;letter-spacing:.085em;color:var(--ink-dim);
  font-weight:600;margin-bottom:12px}
.kaart .uitleg{font-size:11.5px;color:var(--ink-faint);margin-top:10px;line-height:1.45}

.kpi .etiket{font-size:11.5px;text-transform:uppercase;letter-spacing:.085em;color:var(--ink-dim)}
.kpi .groot{font-family:var(--serif);font-size:33px;line-height:1.05;margin-top:7px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .onder{font-size:12px;color:var(--ink-dim);margin-top:5px}

/* getal met herkomst */
.g{font-variant-numeric:tabular-nums;white-space:nowrap}
.hm{font-size:.72em;margin-left:.22em;color:var(--ink-faint);vertical-align:.06em}
body.herkomst .h-telling{box-shadow:inset 0 -2px 0 var(--brand)}
body.herkomst .h-ondergrens{box-shadow:inset 0 -2px 0 var(--markt)}
body.herkomst .h-schatting{box-shadow:inset 0 -2px 0 var(--letop)}
body.herkomst .h-prognose{box-shadow:inset 0 -2px 0 var(--ink-faint)}

table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.075em;color:var(--ink-faint);
  font-weight:600;padding:0 8px 7px;border-bottom:1px solid var(--line)}
td{padding:7px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
.code{font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
.klikbaar{cursor:pointer}
.klikbaar:hover td{background:var(--surface-2)}
.schuif{overflow-x:auto}

.pil{display:inline-block;font-size:10.5px;padding:1.5px 7px;border-radius:20px;white-space:nowrap;
  border:1px solid transparent}
.pil.hoog{color:var(--kritiek);background:var(--kritiek-wash);border-color:color-mix(in srgb,var(--kritiek) 28%,transparent)}
.pil.midden{color:var(--letop);background:var(--letop-wash);border-color:color-mix(in srgb,var(--letop) 28%,transparent)}
.pil.eigen{color:var(--brand);background:var(--brand-wash);border-color:var(--brand-soft)}

.balk{display:block;width:100%;height:7px;border-radius:2px;background:var(--markt-wash);position:relative;overflow:hidden;min-width:52px}
.balk i{position:absolute;inset:0 auto 0 0;background:var(--ons);border-radius:2px;display:block}
.balk.kans i{background:var(--letop)}

.signaal{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;text-align:left;width:100%}
.signaal:last-child{border-bottom:none}
.signaal:hover .naam{color:var(--brand)}
.signaal .naam{font-weight:600;font-size:13.5px}
.signaal .tekst{font-size:12.5px;color:var(--ink-dim)}
.signaal .delta{font-family:var(--mono);font-size:13px;color:var(--kritiek)}

.merkstreep{border-left:2px solid var(--brand);padding-left:11px}
.let{background:var(--letop-wash);border:1px solid color-mix(in srgb,var(--letop) 26%,transparent);
  border-radius:var(--r);padding:10px 12px;font-size:12px;color:var(--ink-dim);margin-bottom:13px;line-height:1.5}
.let b{color:var(--ink)}

/* --------------------------------------------------------------- kaart */
.kaartveld{position:relative}
.kaartveld svg{display:block;width:100%;height:auto}
.kaartveld path{stroke:var(--lijn-kaart);stroke-width:.6}
.kaartveld path.raak{cursor:crosshair}
.kaartveld path.raak:hover{stroke:var(--ink);stroke-width:1.4}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;font-size:12px;
  box-shadow:0 3px 14px rgba(0,0,0,.18);max-width:250px;opacity:0;transition:opacity .1s;line-height:1.45}
.tip[data-aan="1"]{opacity:1}
.tip b{font-variant-numeric:tabular-nums}
.schaal{display:flex;gap:0;margin-top:12px}
.schaal .vak{height:10px;flex:1}
.schaal .vak{border-radius:0}
.schaal .vak.leegvak{flex:none;width:26px;border-radius:2px;background:var(--leeg);
  background-image:repeating-linear-gradient(45deg,transparent 0 2.5px,color-mix(in srgb,var(--ink-faint) 38%,transparent) 2.5px 3.7px)}
.schaal .vak:nth-child(3){border-radius:2px 0 0 2px}
.schaal .vak:last-child{border-radius:0 2px 2px 0}
.bij{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-faint);margin-top:4px}
.reeksuitleg{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-dim);margin-top:11px}
.reeksuitleg span{display:inline-flex;align-items:center;gap:6px}
.reeksuitleg i{width:15px;height:2.5px;border-radius:2px;display:inline-block;flex:none}
.reeksuitleg i.stippel{background:none!important;border-top:2.5px dashed var(--ons);height:0}

/* ------------------------------------------------------- afzetgebied */
.afzet{margin-bottom:22px}
.afzet .kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.keuze{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;flex:none}
.keuze button{padding:6px 13px;font-size:12.5px;color:var(--ink-dim);border-right:1px solid var(--line);
  transition:background .12s,color .12s}
.keuze button:last-child{border-right:none}
.keuze button:hover{background:var(--surface-2)}
.keuze button[aria-pressed="true"]{background:var(--ons);color:#fff;font-weight:600}
.keuze button[aria-pressed="true"].kans{background:var(--k5);color:#fff}
.afzetraster{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:900px){.afzetraster{grid-template-columns:1fr}}
.ranglijst td{padding:5px 8px}
.ranglijst .pos{color:var(--ink-faint);font-size:11px;width:20px}
.vraag{font-size:13px;color:var(--ink-dim);line-height:1.5}
.vraag b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ======================================================= app-aanvullingen */
html{background:var(--ground)}
.rail a.bril{text-decoration:none}
.rail .gebruiker{font-size:12px;color:var(--ink-dim);border-top:1px solid var(--line-soft);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.rail .gebruiker form{margin:0}
.rail .gebruiker button{font-size:12px;color:var(--ink-dim);text-decoration:underline;padding:0}
.rail .versie{font-size:11px;color:var(--ink-faint)}
.knoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.knop{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:13px;text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.2}
.knop:hover{background:var(--surface-2)}
.knop.hoofd{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.knop.hoofd:hover{filter:brightness(1.07)}
.knop.gevaar{color:var(--kritiek);border-color:color-mix(in srgb,var(--kritiek) 40%,transparent)}
.knop.klein{padding:4px 9px;font-size:12px}
.meldingen{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.meldingen li{padding:9px 12px;border-radius:var(--r);font-size:13px;border:1px solid var(--line);background:var(--surface)}
.meldingen .success{background:var(--goed-wash);border-color:color-mix(in srgb,var(--goed) 30%,transparent)}
.meldingen .error{background:var(--kritiek-wash);border-color:color-mix(in srgb,var(--kritiek) 30%,transparent)}
.meldingen .info,.meldingen .warning{background:var(--letop-wash);border-color:color-mix(in srgb,var(--letop) 30%,transparent)}
form p{margin:0 0 12px}
label{font-size:12.5px;color:var(--ink-dim);display:block;margin-bottom:3px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=file],input[type=search],textarea{
  font:inherit;font-size:13.5px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  color:var(--ink);width:100%;max-width:420px}
input[type=checkbox]{accent-color:var(--brand)}
.vinkjes{display:flex;flex-direction:column;gap:5px;font-size:13px}
.vinkjes label{display:flex;gap:7px;align-items:center;color:var(--ink);font-size:13px;margin:0}
.scholenlijst{columns:2;column-gap:28px;font-size:13px}
.scholenlijst label{display:flex;gap:7px;align-items:center;color:var(--ink);break-inside:avoid;margin:0 0 4px}
.errorlist{color:var(--kritiek);font-size:12.5px;margin:4px 0;padding-left:16px}
.helptext{font-size:11.5px;color:var(--ink-faint)}
.inlogvlak{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.inlogvlak .kaart{width:100%;max-width:400px;padding:28px}
.inlogvlak h1{font-family:var(--serif);font-size:26px;margin-bottom:4px}
.inlogvlak .sub{color:var(--ink-dim);font-size:13px;margin-bottom:20px}
.dim{color:var(--ink-dim)} .faint{color:var(--ink-faint)}
.klein{font-size:12px}
.sectie{margin:30px 0 14px;font-family:var(--serif);font-size:21px;letter-spacing:-.01em}
.sectie+.uitlegtekst{margin-top:-8px}
.uitlegtekst{font-size:13px;color:var(--ink-dim);max-width:78ch;margin:0 0 14px;line-height:1.55}
.uitlegtekst b{color:var(--ink)}
.grafiek{position:relative;height:230px}
.grafiek.hoog{height:300px}
.leaflet-kaart{height:430px;border-radius:var(--r);background:var(--surface-2)}
.leaflet-container{font-family:var(--sans)!important;background:var(--surface-2)!important}
.leaflet-tooltip{font-size:12px;line-height:1.45}
.vl{color:var(--letop);font-size:.8em;margin-left:1px}
.voortgang{height:10px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.voortgang i{display:block;height:100%;background:var(--brand);transition:width .4s}
.status{font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.status.actief{background:var(--goed-wash);color:var(--goed);border-color:color-mix(in srgb,var(--goed) 30%,transparent)}
.status.controle,.status.wachtrij,.status.rekenen{background:var(--letop-wash);color:var(--letop)}
.status.mislukt{background:var(--kritiek-wash);color:var(--kritiek)}
.ok{color:var(--goed)} .fout{color:var(--kritiek)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px}
.tabs a{padding:5px 11px;border-radius:20px;border:1px solid var(--line);font-size:12.5px;text-decoration:none;color:var(--ink-dim)}
.tabs a[aria-current="true"]{background:var(--brand-wash);border-color:var(--brand-soft);color:var(--ink);font-weight:600}
.trend-op{color:var(--goed)} .trend-neer{color:var(--kritiek)}
.niveaubalk{display:flex;height:9px;border-radius:2px;overflow:hidden;min-width:110px;background:var(--line-soft)}
.niveaubalk i{display:block;height:100%}
.n-pro{background:#9AA3B2}.n-vmbo-b{background:#C8902E}.n-vmbo-k{background:#E0AD4E}.n-vmbo-gt{background:#5FB398}
.n-havo{background:#2A78D6}.n-vwo{background:#12795A}
.n-afgeschermd{background:repeating-linear-gradient(45deg,#C9CFCB 0 3px,#E3E7E4 3px 6px)}
.legenda-niveau{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink-dim);margin-top:8px}
.legenda-niveau span{display:inline-flex;gap:5px;align-items:center}
.legenda-niveau i{width:10px;height:10px;border-radius:2px;display:inline-block}
.stip{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--letop);margin-right:4px}
details.verantwoording{font-size:12.5px;color:var(--ink-dim);margin-top:10px}
details.verantwoording summary{cursor:pointer;color:var(--ink)}
.sankey{height:520px}
@media(max-width:640px){.blad{padding:18px 16px 48px}.scholenlijst{columns:1}.leaflet-kaart{height:330px}}

/* ------------------------------------------------------------- pdf */
@page{size:A4;margin:16mm 14mm 18mm;@bottom-right{content:"pagina " counter(page) " van " counter(pages);font-size:8pt;color:#8B9992}
  @bottom-left{content:"Leerlingstromen Lucas Onderwijs — " string(rapport);font-size:8pt;color:#8B9992}}
body.pdf{background:#fff;font-size:9.5pt}
body.pdf .blad{padding:0;max-width:none}
body.pdf h1{string-set:rapport content()}
body.pdf .kaart{padding:10px 12px}
body.pdf .kpi,body.pdf .rooster>.kaart{break-inside:avoid}
body.pdf tr{break-inside:avoid}
body.pdf .rooster{gap:8px;margin-bottom:12px}
body.pdf .k4{grid-template-columns:repeat(4,1fr)} body.pdf .k3{grid-template-columns:repeat(3,1fr)} body.pdf .k2{grid-template-columns:1fr}
body.pdf .rooster.k2>.kaart{break-inside:auto}
body.pdf .reeksuitleg{gap:12px}
body.pdf .kpi .groot{font-size:20pt}
body.pdf table{font-size:8.5pt}
body.pdf td{padding:4px 6px}
body.pdf .sectie{font-size:14pt;margin:16px 0 8px;break-after:avoid}
body.pdf .nieuwe-pagina{break-before:page}
body.pdf .alleen-scherm{display:none!important}
body:not(.pdf) .alleen-pdf{display:none!important}
body.pdf .g .hm{color:#8B9992}
body.pdf .reeksuitleg i{height:3px}
.rooster>*{min-width:0}
.kaart .schuif,.kaart.schuif{max-width:100%}
.schil>*,.blad,.afzetraster>*{min-width:0}
.afzetraster .schuif{overflow-x:auto}
@media(max-width:640px){.titelbalk h1{font-size:24px}.knoppen .knop{padding:6px 10px}.blad{padding:18px 16px 48px}}
.duiding ul{margin:0;padding-left:18px;display:grid;gap:9px;max-width:95ch}
.duiding li{font-size:13.5px;line-height:1.55;color:var(--ink)}
.duiding li b{color:var(--ink)}
/* bestuur in één oogopslag: regio's naast elkaar, totaal links */
.oog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;align-items:stretch}
.oog .totaal{border-color:var(--ons)}
.oog-kop{border-bottom:2px solid var(--line);padding-bottom:6px}
.oog-kop.totaal{border-bottom-color:var(--ons)}
.oog-kop h2{font-size:16px;margin:0}
.oog-tegels{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.oog-tegel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.oog-tegels.totaal .oog-tegel{border-color:var(--ons)}
.oog-tegel span{font-size:11.5px;color:var(--ink-dim)}
.oog-tegel b{font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.oog-tegel small{font-size:11.5px;color:var(--ink-faint)}
.oog-tegel small.neer{color:#C8573E}.oog-tegel small.op{color:var(--ons)}
.oog-zinnen{margin:0;padding:10px 12px 10px 26px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);font-size:13px;line-height:1.5;display:grid;gap:6px}
.oog-blok{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.oog-blok h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);margin:0 0 6px;font-weight:600}
.oog-grafiek{position:relative;height:190px}
.oog-legenda{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ink-dim);margin:14px 0 4px}
.oog-legenda span{display:flex;align-items:center;gap:6px}
.oog-legenda i{display:inline-block;width:16px;height:3px;background:var(--markt-data)}
.oog-legenda i.stip{background:repeating-linear-gradient(90deg,var(--markt-data) 0 5px,transparent 5px 8px)}
.oog-legenda i.staaf{width:10px;height:10px;background:var(--ons)}
.oog-legenda i.staaf.licht{opacity:.45}
.oog-schuif{overflow-x:auto}.oog-schuif .oog{min-width:1040px}
/* uitleg bij de prognose: balken en kaartjes */
.up-balken{display:grid;gap:7px}
.up-balk{display:grid;grid-template-columns:minmax(110px,1.1fr) 2fr 56px;align-items:center;gap:8px;font-size:12.5px}
.up-label{color:var(--ink-dim)}
.up-spoor{position:relative;height:12px;background:var(--line-soft);border-radius:3px}
.up-nul{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--ink-faint)}
.up-vul{position:absolute;top:0;bottom:0}
.up-vul.neg{right:50%;border-radius:3px 0 0 3px}.up-vul.pos{left:50%;border-radius:0 3px 3px 0}
.up-duo .up-vul{background:var(--ink-faint)}.up-eigen .up-vul{background:var(--markt-data)}
.up-zonder .up-vul{background:var(--markt-data);opacity:.45}
.up-pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.up-kaartjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}
.up-kaartje{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.up-kaartje b{display:block;color:var(--ink);margin-bottom:4px}

/* tabel onder de brugklasgrafiek: balkje regulier + nieuwkomers */
.tabel-uitklap summary { cursor: pointer; color: var(--ink-dim); font-size: 13px; padding: 4px 0 8px; }
.tabel-uitklap[open] summary { margin-bottom: 4px; }
.bk-balk { display: inline-flex; width: 90px; height: 9px; background: var(--line-soft); border-radius: 2px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.bk-balk i { display: block; height: 100%; }
.bk-balk i.reg { background: var(--markt-data); }
.bk-balk i.isk { background: var(--k5); }
tr.dim .bk-balk i { opacity: .55; }
.nowrap { white-space: nowrap; }
.tabs .tab-knop{padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:none;font:inherit;font-size:13px;cursor:pointer;color:var(--ink-dim)}
.tabs .tab-knop[aria-selected="true"]{background:var(--brand-wash);border-color:var(--brand-soft);color:var(--ink);font-weight:600}
.tabs .tab-knop:focus-visible{outline:2px solid var(--brand-soft);outline-offset:2px}
.paneel-kop{margin:18px 0 8px}
/* delen van een regio (Westland: ISW en Den Haag Zuidwest) */
.oog-delen{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink-dim);margin-top:6px}
.oog-delen span{display:flex;align-items:center;gap:5px}
.oog-delen i,.oog-deeltotalen i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
i.deel-1{background:var(--markt-data)} i.deel-2{background:var(--k5)}
.oog-deeltotalen{list-style:none;padding:0;margin:8px 0 0;font-size:12px;color:var(--ink-dim)}
.oog-deeltotalen li{margin:3px 0}
i.deel-kleur-1,i.deel-kleur-2{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
i.deel-kleur-1{background:var(--markt-data)} i.deel-kleur-2{background:var(--ons)}
/* waarom verschilt ons model van DUO */
.verschil-duo h3{margin:14px 0 6px}
.vd-hoe{color:var(--ink-dim)}
.vd-plus,.vd-min{list-style:none;padding:0;margin:8px 0}
.vd-plus li,.vd-min li{position:relative;padding-left:22px;margin:5px 0}
.vd-plus li::before{content:"+";position:absolute;left:4px;font-weight:700;color:var(--ons)}
.vd-min li::before{content:"−";position:absolute;left:4px;font-weight:700;color:var(--k5)}
.vd-tabel{margin:6px 0 10px}
.vd-advies{border-left:3px solid var(--brand-soft);padding-left:12px;margin-top:12px}
.kern-instroom{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--k5);background:var(--brand-wash);font-size:13px}
/* verwachte instroom per school */
.instroom-po th.verw,.instroom-po td.verw{background:var(--brand-wash)}
.instroom-po tr.som td{border-top:1px solid var(--line)}
.instroom-detail{margin-top:8px;padding:10px 14px}
.instroom-detail summary{cursor:pointer}
.instroom-detail[open] summary{margin-bottom:8px}
/* regiopagina: formatie en huisvesting */
.formatie td.neer{color:#C8573E}.formatie td.op{color:var(--ons)}
.formatie th.groep-kop{text-align:center;border-bottom:1px solid var(--line)}
.formatie tr.som td{border-top:1px solid var(--line)}
.formatie td:nth-child(5),.formatie th:nth-child(4){border-right:1px solid var(--line-soft)}
/* marketingrapport: groei en verlies per basisschool */
.herkomst td.neer{color:#C8573E}
.herkomst-lijsten{display:grid;gap:14px}
.herkomst-lijsten .herkomst td:first-child{min-width:280px}
table.groepen th,table.groepen td{padding-left:6px;padding-right:6px;white-space:nowrap}
/* kaart: vast informatievak en gedempte achtergrond */
.kaart-info{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  font-size:12px;line-height:1.45;max-width:240px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ruimte-blok{display:grid;gap:14px}
.ruimte-blok .grafiek.hoog{height:380px}
table.groepen th{padding-top:8px}
/* kaart zonder externe achtergrond: het vlak rond de postcodegebieden is zee en omgeving, licht blauwgrijs */
.leaflet-kaart.leaflet-container{background:color-mix(in srgb, var(--surface-2) 82%, #4f7f9a)}
/* 'Waar ligt nog ruimte?': balkje nu tegen ons gemiddelde */
.ruimte-zin{margin:0 0 10px;color:var(--ink-dim);font-size:13px}
.ruimte-uitleg{font-size:12px;color:var(--ink-faint);margin-top:2px;max-width:56ch}
.ruimte-balk{position:relative;display:flex;width:180px;height:14px;background:var(--line-soft);border-radius:3px}
.ruimte-balk i{display:block;height:100%}
.ruimte-balk i.nu,.legenda-ruimte i.nu{background:var(--ons)}
.ruimte-balk i.tekort,.legenda-ruimte i.tekort{background:var(--k5);opacity:.75}
.ruimte-balk b.gem{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.legenda-ruimte{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);margin-top:10px}
.legenda-ruimte i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.legenda-ruimte i.gem{width:2px;background:var(--ink)}
table.ruimte b.erbij{color:var(--k5);font-size:15px}
/* 'Waar valt het meest te halen?': kaartjes, poppetjes en labels voor leken */
.kans-kaartjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:6px 0 4px}
.kans-kaartje{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.kans-naam{font-weight:600;margin-top:8px}
.kans-getal{font-size:26px;font-weight:600;color:var(--k5);margin:6px 0 8px}
.kans-getal span{font-size:13px;font-weight:400;color:var(--ink-dim)}
.kans-tekst{font-size:13px;margin:8px 0 4px}
.kans-tip{font-size:12.5px;color:var(--ink-dim);margin:4px 0 0;border-left:2px solid var(--k5);padding-left:8px}
.kans-label{font-size:11.5px;padding:2px 8px;border-radius:10px;background:var(--line-soft);color:var(--ink-dim)}
.kans-label.groot{background:color-mix(in srgb,var(--k5) 25%,transparent);color:var(--ink)}
.kans-label.sterk{background:color-mix(in srgb,var(--ons) 25%,transparent);color:var(--ink)}
.poppetjes{display:flex;flex-wrap:wrap;gap:3px;max-width:100%}
.poppetjes i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.poppetjes i.nu{background:var(--ons)}.poppetjes i.erbij{background:var(--k5)}
.legenda-ruimte i.rest{background:var(--line)}
.kans-kop{margin:16px 0 6px;font-size:14px}
table.kans-lijst td{padding-top:6px;padding-bottom:6px}
.schoolpunt{display:inline-block;width:10px;height:10px;border-radius:50%;background:#D64545;border:1.5px solid #fff;vertical-align:-1px}
table.ruimte td{vertical-align:middle;white-space:nowrap}
table.ruimte td:first-child{white-space:normal}
.ruimte-balk{display:inline-flex;vertical-align:middle}
.ruimte-getal{margin-left:10px;font-size:13px;white-space:nowrap}
/* lijst met basisscholen naast de kaart */
.bs-kop{margin:0 0 8px;font-size:14px}
.bs-kop .code{font-weight:600}
.bs-paneel .ranglijst th{vertical-align:bottom}
.bs-paneel .ranglijst td:first-child{white-space:normal}
/* schoolpagina: brugklassen per jaar en wie de verandering draagt */
table.klassen th,table.klassen td{padding:4px 6px;white-space:nowrap}
table.drager td.neer{color:#C8573E}table.drager td.op{color:var(--ons)}
table.drager td{padding:5px 6px}
/* beheer: mail */
.mailform p{margin:0 0 10px}
.mailform label{display:block;font-size:12.5px;color:var(--ink-dim);margin-bottom:3px}
.mailform .vinkjes label{display:flex;gap:8px;align-items:center;color:var(--ink)}
.mailform input[type=text],.mailform input[type=email],.mailform input[type=password],.mailform input[type=number],.mailform select{width:100%;box-sizing:border-box}
.mailform .helptext{display:block;font-size:12px;color:var(--ink-faint);margin-top:3px}
.mailform .errorlist{color:#C8573E;font-size:12px;margin:3px 0 0;padding:0;list-style:none}
.velden2{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.testrij{display:flex;gap:8px;align-items:center}.testrij input{flex:1}
.mailstatus{font-size:12px;padding:2px 8px;border-radius:10px;background:var(--line-soft)}
.mailstatus.verstuurd{background:color-mix(in srgb,var(--ons) 25%,transparent)}
.mailstatus.mislukt{background:color-mix(in srgb,#C8573E 30%,transparent)}
.mailstatus.wachtrij{background:color-mix(in srgb,var(--k5) 25%,transparent)}