/* structuur.css
   Aanvulling op styles.css voor de structuurpagina (monitoringskader).
   styles.css is de bron: alles wat daar al identiek of gelijkwaardig in
   staat (schil, sidebar, top, seg, dropdown, blok, tegels) is hier
   weggelaten. Laad styles.css eerst, daarna dit bestand.

   Het vormenvocabulaire is gesloten: zes vormen en drie datavisuals.
   A linkstijl (.lnk, .rij-klik, .knoopchip)  de enige drager van klikbaarheid
   B statusbadge (.badge)                     de enige drager van status
   C tellerpil (.pil)                         de enige drager van getal plus label
   D nvt-teken (.leeg)                        kaal teken in een numerieke cel
   E groepskop (.kicker, .sub-k, .lg)         een sectiekop en een legendavorm
   F lint (.lint)                             uitleg- en uitzonderingsnotitie
   datavisuals: .glyph (dekking), .staaf (meetdiepte), .nt (plaatsingsteken)
   Een zevende vorm toevoegen is een contractwijziging, geen implementatiekeuze. */

/* nieuwe tokens, aanvullend op de :root van styles.css.
   Dit is de enige plek in dit bestand waar een hexwaarde staat; elke regel
   hieronder leest uitsluitend tokens. */
:root{
  --arc:rgba(31,30,27,.07);
  --arcering:repeating-linear-gradient(45deg,transparent 0 4px,var(--arc) 4px 8px);
  --stip:#D6D2C6;
  --warn-bg:#FDF3DC; --warn-ink:#8A5F00; --warn-border:#F2E2B8; --warn-ic:#3D2B00;
  --ok-bg:#E9F6E9; --ok-ink:#0B6B0B; --ok-border:#CDE9CD;
}

[hidden]{display:none!important}

/* ================================================================
   VORM A  linkstijl, de enige drager van klikbaarheid
   Wat klikbaar oogt, klikt. Wat niet klikt, oogt niet klikbaar.
   ================================================================ */
.lnk{font:inherit;font-size:12.5px;color:var(--accent);text-decoration:underline;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.lnk.mono{font-family:var(--mono);font-size:12px}
.lnk:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:4px}

.rij-klik{cursor:pointer;border-left:2px solid transparent}
.rij-klik:hover{background:var(--bg);border-left-color:var(--accent)}
.rij-klik:focus-visible{outline:2px solid var(--accent-border);outline-offset:-2px}
tr.rij-klik:hover td{background:var(--bg)}
tr.rij-klik:hover td.sticky{background:var(--bg)}

.knoopchip{display:block;width:100%;border:1px solid var(--border);background:var(--card);border-radius:10px;padding:6px 9px;font-size:12px;line-height:1.35;color:var(--ink);cursor:pointer}
.knoopchip:hover{border-color:var(--accent-border);background:var(--accent-soft)}
.knoopchip:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
.knoopchip .kc{font-family:var(--mono);font-size:10px;color:var(--ink-3);display:block}

/* het hierarchische padnummer is de primaire weergavecode.
   Staat het in een klikbaar element, dan draagt het vorm A. */
.pad{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
button.pad,a.pad,.lnk .pad{color:var(--accent)}
button.pad{text-decoration:underline;border:0;background:none;padding:0;cursor:pointer}
button.pad:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:4px}
.pad .nt{margin-right:4px}
/* de bron-/interne code is een alias en staat nooit in een rij, alleen in het dossier */
.alias{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ================================================================
   VORM B  statusbadge, de enige drager van status en classificatie
   Vier betekenissen, vier kleuren, gesloten lijst. Een vijfde bestaat niet.
   ================================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
       border-radius:99px;padding:3px 10px;max-width:100%;border:1px solid transparent;vertical-align:middle}
.badge .ic{width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;
           justify-content:center;font-size:10px;font-weight:800;flex:0 0 15px}
.badge .rd{font-weight:400;color:var(--ink-2)}
.b-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.b-ok .ic{background:var(--st-good);color:var(--card)}
.b-let{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.b-let .ic{background:var(--st-warn);color:var(--warn-ic)}
.b-feit{background:var(--bg);color:var(--ink-2);border-color:var(--border)}
.b-feit .ic{background:var(--ink-3);color:var(--card)}
.b-nvt{background-image:var(--arcering);color:var(--ink-2);border:1px dashed var(--stip)}
.b-nvt .ic{background:transparent;color:var(--ink-2);border:1px solid var(--axis)}
/* de reden voluit onder elkaar, waar de badge alleen staat */
.badge.vol{border-radius:12px;align-items:flex-start;padding:5px 11px}
.badge.vol .rd{display:block;margin-top:1px;line-height:1.35}

/* ================================================================
   VORM C  tellerpil, de enige drager van getal plus label
   Bij nul geen tellerpil maar vorm B met een reden.
   ================================================================ */
.pil{display:inline-flex;align-items:baseline;gap:5px;font-size:11px;border:1px solid var(--border);
     background:var(--bg);color:var(--ink-2);border-radius:99px;padding:2px 9px;white-space:nowrap}
.tel{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.pillen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0}

/* ================================================================
   VORM D  nvt-teken in een numerieke cel
   De volledige reden staat in het dossier van die rij.
   ================================================================ */
.leeg{font-family:var(--mono);color:var(--ink-3)}

/* ================================================================
   VORM E  groepskop en legenda
   .kicker is uitsluitend sectiekop; een subregel onder een titel is .sub-k.
   Er is een legendavorm, niet twee.
   ================================================================ */
.sub-k{font-size:11px;color:var(--ink-3);margin-top:1px}
.kopblok{margin:22px 0 10px}
.kopblok:first-child{margin-top:0}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);
    border:1px solid var(--border-soft);border-radius:10px;padding:5px 10px;background:var(--card)}
.lgm{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
     width:13px;height:13px;font-size:13px;line-height:1;color:var(--ink-2);font-style:normal}
.lgm.vlak{width:9px;height:9px;border-radius:2px}
/* een legenda-item dat een voorbeeldcode toont in plaats van een teken */
.lgm.tx{width:auto;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink)}
/* een legenda-item dat een randstijl toont: het randje zelf zegt het sneller dan een woord */
.lgm .rnd{display:block;width:12px;height:9px;border-radius:3px;border:1.2px solid var(--ink-2)}
.lgm .rnd.stip{border-style:dashed;border-color:var(--stip)}
.legenda{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ================================================================
   VORM F  lint, uitleg- en uitzonderingsnotitie
   Een inklapbaar lint toont altijd het chevron.
   ================================================================ */
.lint{border:1px dashed var(--stip);border-radius:10px;padding:7px 10px;font-size:12px;
      color:var(--ink-2);background-image:var(--arcering);margin:8px 0}
.lint > summary{cursor:pointer;list-style:none;display:flex;gap:7px;align-items:center;
                font-weight:600;color:var(--ink)}
.lint > summary::-webkit-details-marker{display:none}
.lint > summary::before{content:"\203A";color:var(--ink-3);font-weight:700;
                        display:inline-block;transition:transform .12s ease}
.lint[open] > summary::before{transform:rotate(90deg)}
.lint > summary:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:6px}
.lint .li{margin-top:7px}

/* ================================================================
   cascade-navigatie: iedere laag voegt een rij toe
   ================================================================ */
.casc{display:flex;flex-direction:column;gap:4px;width:100%}
.casc-rij{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:28px}
.casc-rij[data-laag="lijn"]{padding-left:16px}
.casc-rij[data-laag="boom"]{padding-left:32px}
.casc-rij[data-laag="vraag"]{padding-left:48px}
.casc-rij[data-laag="indicator"]{padding-left:64px}
.casc-rij .kl{font-size:10.5px;letter-spacing:.13em;color:var(--ink-3);font-weight:700;
              text-transform:uppercase;margin-right:2px;display:inline-flex;align-items:center;gap:5px}
.casc-rij button.kl{border:0;background:none;padding:0;cursor:pointer;color:var(--accent);text-decoration:underline}
.casc-rij button.kl:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:4px}
.casc-rij .kn{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);border:1px solid var(--border-soft);
              border-radius:5px;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center}
.kchip{border:1px solid var(--border);background:var(--card);border-radius:99px;padding:4px 12px;
       font-size:12.5px;color:var(--ink-2);white-space:nowrap;cursor:pointer;max-width:340px;
       overflow:hidden;text-overflow:ellipsis}
.kchip:hover{border-color:var(--accent-border)}
.kchip:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
.kchip.on{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent);font-weight:600}
.kchip .rn{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-right:5px}
.kchip.on .rn{color:var(--accent)}

/* het doel van een klik licht kort op, zodat zichtbaar is waar de sprong landde */
@keyframes gloed{from{background:var(--accent-soft)}to{background:transparent}}
.gloed{animation:gloed 1.2s ease-out 1}

/* ================================================================
   zoeken op padnummer en op bron-alias
   ================================================================ */
.zoek{position:relative}
.zoek input{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:7px 12px;
            font:inherit;font-size:12.5px;color:var(--ink);width:210px}
.zoek input:focus{outline:2px solid var(--accent-border);outline-offset:-1px;border-color:var(--accent-border)}
.zoekuit{position:absolute;top:calc(100% + 6px);left:0;width:380px;max-height:56vh;overflow-y:auto;
         background:var(--card);border:1px solid var(--border);border-radius:14px;
         box-shadow:0 24px 50px -18px rgba(31,30,27,.3);z-index:70;padding:6px}
.zoekuit button{display:flex;gap:9px;align-items:baseline;width:100%;padding:6px 9px;border-radius:9px;cursor:pointer}
.zoekuit button:hover{background:var(--bg)}
.zoekuit button:focus-visible{outline:2px solid var(--accent-border);outline-offset:-2px}
.zoekuit .zt{font-size:12.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoekuit .zl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:7px 9px 3px}
.zoekuit .zm{font-size:12.5px;color:var(--ink-2);padding:8px 9px}

/* ================================================================
   hierarchie in de zijbalk: levende positie-indicator
   Toont waar je bent, met de concrete waarde erbij. Lagen waar je nog
   niet bent blijven als stille rest staan.
   ================================================================ */
.hier{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 13px;margin:0 0 14px}
.hier .l{font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.hier ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.hier li{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--ink-3);line-height:1.3}
.hier li:nth-child(2){padding-left:9px}
.hier li:nth-child(3){padding-left:18px}
.hier li:nth-child(4){padding-left:27px}
.hier li:nth-child(5){padding-left:36px}
.hier .n{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);border:1px solid var(--border-soft);
         border-radius:5px;width:15px;height:15px;display:inline-flex;align-items:center;
         justify-content:center;flex:0 0 auto;margin-top:1px}
.hier .laagnaam{color:var(--ink-2)}
.hier .waarde{display:block;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.hier li.gevuld .n{border-color:var(--accent-border);color:var(--accent)}
.hier li.actief{color:var(--ink)}
.hier li.actief .n{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
.hier li.actief .laagnaam{color:var(--accent);font-weight:700}
.hier li > button{border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit;min-width:0}
.hier li > button:hover .waarde{text-decoration:underline}
.hier li > button:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:5px}
.hier li > span{min-width:0}

/* ---------- schakelaar geparkeerd ---------- */
.schakelaar{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card);border-radius:12px;padding:7px 13px;font-size:12.5px;color:var(--ink-2)}
.schakelaar input{accent-color:var(--accent);width:15px;height:15px}
.schakelaar b{font-weight:600;color:var(--ink)}

/* ---------- telpaar ---------- */
.telpaar{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--border);background:var(--card);border-radius:12px;padding:7px 13px;font-size:12.5px;color:var(--ink-2)}
.telpaar b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.telpaar .st{color:var(--ink-3)}
.telpaar .lb{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

/* ---------- kaart naast blok, en de tegel-aanvullingen ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.kaart{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px 18px 12px;min-width:0}
.kaart h3{font-size:15.5px;line-height:1.35;margin:3px 0 4px;letter-spacing:-.005em}
.kaart.rij-klik{border-left:2px solid var(--border)}
.kaart.rij-klik:hover{border-left-color:var(--accent)}
.subregel{font-size:12px;color:var(--ink-2);margin:-2px 0 10px}
.tile .val{font-family:var(--mono);font-variant-numeric:tabular-nums}
.kaart.stip{border:1.5px dashed var(--stip);background:var(--bg)}
/* gedempt komt altijd BOVENOP een badge, nooit in plaats daarvan */
.gedempt{opacity:.55}
/* een regel in het vragenblad; de hele regel is de klik */
.svregel{display:flex;gap:10px;padding:9px 6px;border-top:1px solid var(--border-soft);align-items:baseline}
.svregel .vk{flex:1;min-width:0}
.svregel .vt-regel{display:flex;gap:10px;align-items:baseline}

/* ---------- tabellen in een scroller ---------- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:18px;background:var(--card)}
table.mtx{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;font-size:13px}
table.mtx th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:12px 10px 8px;border-bottom:1px solid var(--border);font-weight:700;background:var(--card);position:sticky;top:0;z-index:2}
table.mtx td{padding:8px 10px;border-bottom:1px solid var(--border-soft);vertical-align:top}
table.mtx tr:last-child td{border-bottom:0}
table.mtx td.num,table.mtx th.num{font-family:var(--mono);font-size:12px;text-align:right}
table.mtx td.sticky,table.mtx th.sticky{position:sticky;left:0;background:var(--card);z-index:1}
table.mtx th.sticky{z-index:3}
table.mtx tr.koepel td{background:var(--bg);font-weight:600}
/* de clamp staat op een div IN de cel; de cel houdt haar tabeldisplay */
.vtekst{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
        color:var(--ink-2);margin-top:2px;max-width:54ch;line-height:1.4}

/* ================================================================
   tree-startvisual op de Programmakaart
   Vijf vaste banen naast elkaar, echte verbindingslijnen, alleen
   verticale reflow. Aan het eind van elke tak hangt een tros bolletjes:
   een bolletje per sturingsvraag. Wat navigeert is een <a role="button">;
   wat niet navigeert krijgt die vorm niet en oogt dus ook niet klikbaar.
   ================================================================ */
/* de tekening rendert een op een; het venster eromheen schuift als zij niet past */
.tr-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.tr{display:block;max-width:none}
svg.tr text{font-family:inherit}

.tr-kant{fill:none;stroke:var(--axis);stroke-width:1.2;opacity:.8}
.tr-kant.stip{stroke-dasharray:3 3;opacity:.5}

.tr-vak{fill:var(--card);stroke:var(--border);stroke-width:1.2}
.tr-vak.stip{fill:var(--bg);stroke:var(--stip)}
.tr-titel{fill:var(--ink)}
.tr-titel.vet{font-weight:700}
.tr-pad{fill:var(--accent);font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.tr-leeg{fill:var(--ink-3);font-family:var(--mono)}
.tr-getal{fill:var(--ink-2);font-family:var(--mono);font-variant-numeric:tabular-nums}
.tr-spoor{fill:var(--border-soft)}
.tr-onbekend{fill:var(--stip)}

.tr-knoop{cursor:pointer}
.tr-knoop:hover .tr-vak{fill:var(--accent-soft);stroke:var(--accent-border)}
.tr-knoop:hover .tr-titel{text-decoration:underline}
.tr-knoop:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}
.tr-knoop:focus-visible .tr-vak{stroke:var(--accent);stroke-width:2.5}
/* wat niet klikt, oogt niet klikbaar */
.tr-stil{cursor:default}

/* de banen: een zachte ondergrond met een kleine kop, geen kader. Een kader zou
   een tweede rand naast de knooprand zetten en dan gaat de lezer rekenen wat het
   verschil betekent. */
.tr-baan{fill:var(--bg);opacity:.75}
.tr-baankop{fill:var(--ink-3);font-weight:700;letter-spacing:.06em}
.tr-merk{fill:var(--ink-3);font-family:var(--mono)}

/* de tros: een bolletje per sturingsvraag. Gevuld telt mee, gestippeld niet, en
   dan draagt het bolletje ook het statusteken van die vraag. */
.tr-bol{cursor:pointer}
.tr-bolvlak{fill:var(--q5);stroke:var(--card);stroke-width:1}
.tr-bolvlak.stip{fill:var(--bg);stroke:var(--axis);stroke-width:1;stroke-dasharray:2 1.6}
.tr-boltk{fill:var(--ink-2)}
.tr-bol:hover .tr-bolvlak{fill:var(--accent);stroke:var(--accent-border);stroke-width:2}
.tr-bol:hover .tr-boltk{fill:var(--card)}
.tr-bol:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:50%}
.tr-bol:focus-visible .tr-bolvlak{stroke:var(--accent);stroke-width:2}

/* ---------- de gedeelde popover: informatie, nooit een oordeel ---------- */
#sl-pop{position:fixed;z-index:120;pointer-events:none;max-width:330px;background:var(--card);
        border:1px solid var(--border);border-radius:12px;padding:10px 12px;
        box-shadow:0 18px 40px -14px rgba(31,30,27,.32)}
#sl-pop .pk{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
#sl-pop .pt{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;margin-top:2px}
#sl-pop .pm{margin-top:7px}
#sl-pop .pg{margin-top:8px;border-top:1px solid var(--border-soft)}
#sl-pop .pr{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
            font-size:12px;padding:3px 0;border-bottom:1px solid var(--border-soft)}
#sl-pop .pr:last-child{border-bottom:0}
#sl-pop .pr.lang{flex-direction:column;gap:1px;align-items:flex-start}
#sl-pop .pl{color:var(--ink-3)}
#sl-pop .pv{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
#sl-pop .pr.lang .pv{font-family:inherit;text-align:left;color:var(--ink-2);line-height:1.4}

/* ================================================================
   causale ladder: de ketens zichtbaar
   De bron koppelt de doelknopen niet met een veld; zij deelt een bronregel.
   Daarom is de keten de rij, niet de kolom: rij-uitlijning suggereert hier
   geen matrix meer, want een rij IS een keten.
   ================================================================ */
.kln{margin-top:8px}
.kln-kop,.kln-rij{display:grid;align-items:stretch;gap:0;
                  grid-template-columns:1fr 16px 1fr 16px 1fr}
.kln.geen-effect .kln-kop,.kln.geen-effect .kln-rij{grid-template-columns:1fr 16px 1fr 16px 14px}
.kln-kop{padding:0 0 4px}
.kln-kop .klk{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.kln-kop .klk.smal{text-align:center;letter-spacing:0}
.kln-rij{border-top:1px solid var(--border-soft);padding:5px 0}
.kln-rij:first-of-type{border-top:0}
.kln-cel{min-width:0;display:flex;align-items:stretch}
.kln-cel .knoopchip{align-self:stretch}
/* een ontbrekende schakel is het kale teken, klein en gecentreerd: met bijna veertig
   procent lege effectcellen zou een volle badge het beeld overnemen */
.kln-cel .leeg{align-self:center;display:flex;align-items:center;justify-content:center;
               width:100%;height:24px;border:1px dashed var(--stip);border-radius:8px;font-size:12px}
.kln.geen-effect .kln-cel.effect{display:none}
.kln-pijl{display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:13px;line-height:1}
.kln-pijl.los{color:var(--stip)}
/* hover licht de hele keten op en dimt de rest; geen tweede renderlaag, alleen opacity.
   :has zorgt dat er alleen gedimd wordt als de muis echt op een keten staat, niet zodra
   hij ergens in het blok komt. Toetsenbordfocus doet hetzelfde. */
.kln-rij{transition:opacity .12s ease}
.kln:has(.kln-rij:hover) .kln-rij,
.kln:has(.kln-rij:focus-within) .kln-rij{opacity:.4}
.kln .kln-rij:hover,.kln .kln-rij:focus-within{opacity:1}
.kln-impact{margin-top:8px;border:1px solid var(--border-soft);border-radius:12px;
            background:var(--bg);padding:8px 10px}
.kln-impact .ki{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:4px}
.kln-impact .kt{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.kln-samen{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:11px;margin-bottom:6px}
.kln-samen .lijntje{flex:1;height:1px;background:var(--border)}

/* ---------- plaatsingsteken ----------
   Drie niveaus, drie tekens: een open ring voor de hele opgave, een halfgevulde
   ring voor de hele lijn, een volle stip voor een doelenboom. Het teken staat
   nooit los: het staat binnen vorm B of binnen .pad. */
.nt{font-size:12.5px;line-height:1;color:var(--ink-2)}
table.mtx tr.koepel .nt{font-size:13.5px}

/* ---------- dekkingsglyph ---------- */
.glyph{display:inline-flex;gap:3px;align-items:center}
.glyph i{width:9px;height:14px;border-radius:2px;background:var(--q6);display:inline-block}
.glyph i.zacht{background:var(--q3)}
.glyph .rest{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-left:3px}

/* De losse meetdiepte-staaf is vervallen: de meetdiepte staat nu als aandeelbalk in de
   knopen van de programmaboom, waar zij tussen knopen te vergelijken is. */

/* ---------- drawer (knoopdossier) ---------- */
#drawerbg{position:fixed;inset:0;background:rgba(31,30,27,.28);opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:80}
body:has(#drawer.open) #drawerbg,#drawerbg.open{opacity:1;pointer-events:auto}
#drawer{position:fixed;top:0;right:0;width:min(520px,94vw);height:100vh;background:var(--card);border-left:1px solid var(--border);box-shadow:0 24px 60px -18px rgba(31,30,27,.35);padding:22px 24px 40px;overflow-y:auto;z-index:90;transform:translateX(102%);transition:transform .18s ease;visibility:hidden}
#drawer.open{transform:translateX(0);visibility:visible}
.dr-kop{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px}
.dr-kop h2{font-size:18px;letter-spacing:-.01em;line-height:1.25}
.dr-kop .kc{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.dr-sluit{margin-left:auto;border:1px solid var(--border);border-radius:99px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);flex:0 0 auto}
.dr-sluit:hover{background:var(--bg)}
.dr-sec{margin-top:18px}
.dr-h{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.dr-sec p{font-size:13px;color:var(--ink-2)}
.dr-sec .rgl{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:var(--ink-2);padding:4px 0;border-top:1px solid var(--border-soft)}
.dr-sec .rgl:first-child{border-top:0}
.dr-sec .rgl .rk{flex:0 0 118px;color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}

/* ---------- volledigheidslijst ---------- */
.vlijst{display:flex;flex-direction:column;margin-top:4px}
.vr{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:baseline;padding:9px 2px;border-top:1px solid var(--border-soft)}
.vr:first-child{border-top:0}
.vb{font-size:12.5px;color:var(--ink-2);line-height:1.45;min-width:0;overflow-wrap:anywhere}
.vb b{color:var(--ink);font-weight:600}

/* ---------- voet ---------- */
.foot{margin-top:26px;border-top:1px solid var(--border);padding-top:14px;font-size:inherit;color:inherit;text-align:left}
#vrl{font-size:12.5px;color:var(--ink-2)}
#vrl button{color:var(--accent);font-weight:600;text-decoration:underline;cursor:pointer}
.voetnoot{font-size:11.5px;color:var(--ink-3);margin-top:8px}

/* ---------- responsief ---------- */
@media (max-width:760px){
  /* smal scherm: de keten staat onder elkaar, met de pijl als liggend teken ertussen */
  .kln-kop{display:none}
  .kln-rij,.kln.geen-effect .kln-rij{grid-template-columns:1fr;gap:4px}
  .kln-pijl{transform:rotate(90deg);height:14px}
  #drawer{padding:18px 16px 34px}
  .casc-rij[data-laag="lijn"]{padding-left:8px}
  .casc-rij[data-laag="boom"]{padding-left:16px}
  .casc-rij[data-laag="vraag"]{padding-left:24px}
  .casc-rij[data-laag="indicator"]{padding-left:32px}
  .zoek input,.zoekuit{width:100%}
}

/* ================================================================
   DE INFORMATIEDICHTE VORMEN (charts-dicht.js) EN DE TWEE NIEUWE PAGINA'S
   Aanvulling, geen tweede vormenvocabulaire: de badge, de tellerpil, het
   n.v.t.-teken, de groepskop en het lint komen uit de blokken hierboven.
   Wat hier bij komt is de opmaak van de tekeningen zelf, plus de twee
   paginalayouts. Er staat hier geen enkele losse hexwaarde: alle kleur komt
   uit de tokens, en de ernstramp staat als gradientwaarde in charts-dicht.js
   omdat zij per waarde wordt uitgerekend.
   ================================================================ */

svg.cd{display:block;width:100%;height:auto}
svg.cd.vast{width:auto;height:auto;flex:0 0 auto}
svg.cd text{font-family:inherit}
.cd-ink{fill:var(--ink)}
.cd-ink.vet{font-weight:700}
.cd-mut{fill:var(--ink-3)}
.cd-as{stroke:var(--axis);stroke-width:1}
.cd-band{fill:var(--border-soft)}
.cd-lijn{stroke-width:1.5;stroke-linecap:round}
.cd-spoor{fill:var(--border-soft)}
.cd-onbekend{fill:var(--stip)}

/* de kleurschaal van de ernstramp, met de tolerantiegrens als zichtbare tick */
.cd-schaal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.cd-schaaltekst{font-size:11px;color:var(--ink-3)}
.cd-dikte{margin-top:4px}

/* het rooster dat zichzelf verdeelt */
.cd-rooster{display:grid;gap:10px;margin-top:10px}

/* de lens: hover dimt wat niet bij de aangewezen groep hoort */
.cd-dim{opacity:.22;transition:opacity .1s ease}

/* ---------- de meetdieptebalk ---------- */
.cd-md-blok{margin-top:7px}
.cd-mdcijfers{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:11px;color:var(--ink-2)}
.cd-mdc{display:inline-flex;align-items:center;gap:5px}
.cd-mdc b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.cd-mdc.leeg-uitleg{color:var(--ink-3)}
.cd-mdcompact{display:inline-block;width:96px;vertical-align:middle}
.cd-md-kort{display:flex;align-items:center;gap:8px;margin-top:5px;min-width:0}
.cd-md-kort .sub-k{margin-top:0;flex:0 0 auto}
.cd-md-kort svg.cd{width:auto;flex:0 1 150px;min-width:44px}
.cd-mdkrij{display:inline-flex;gap:8px;flex:0 0 auto}
.cd-mdk{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.cd-mdk i{font-style:normal;font-size:9px}
.cd-mdk em{font-style:normal;font-family:inherit;font-size:11px;color:var(--ink-3);margin-left:1px}
.cd-mdk.leeg{color:var(--ink-3)}
.cd-mdtel{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-left:6px}

/* ---------- de samengestelde opgavetegel ---------- */
.cd-tegel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:8px 11px;
          min-width:0;display:flex;flex-direction:column;gap:0;text-align:left}
.cd-tegel:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
.cd-tkop{display:flex;gap:7px;align-items:baseline;min-width:0}
.cd-ttitel{font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-thoofd{display:flex;align-items:baseline;gap:6px;margin:2px 0 1px}
.cd-thoofd b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;letter-spacing:-.02em}
.cd-thoofd span{font-size:10.5px;color:var(--ink-3);line-height:1.25}
.cd-tas{display:flex;justify-content:space-between;font-size:9.5px;line-height:1.25;color:var(--ink-3);
        font-family:var(--mono);margin:1px 0 2px}
.cd-tvoet{margin-top:4px}
.cd-geenreeks{font-size:11px;color:var(--ink-3);font-family:var(--mono);padding:9px 0}
.cd-bulletspoor{stroke:var(--border)}
.cd-bulletbalk{fill:var(--ink)}
.cd-doel{stroke:var(--ink);stroke-width:1.8}

/* ---------- de afwijkingsladder ---------- */
.cd-ladder{margin-top:2px}
.cd-ladlegenda{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:2px}
.cd-ladlegenda .legenda{margin-top:0;gap:10px}
.cd-ladlegenda .cd-schaal,.cd-ladlegenda .cd-dikte{margin-top:0}
.cd-tolvlak{fill:var(--bg)}
.cd-ijk{stroke:var(--border);stroke-width:1}
.cd-ijk.nul{stroke:var(--axis);stroke-width:1.4}
.cd-baanlijn{stroke:var(--border-soft);stroke-width:1}
.cd-mark{stroke-width:1}
.cd-marklabel{fill:var(--ink-2);stroke:var(--card);stroke-width:2.6;paint-order:stroke;
              stroke-linejoin:round}
.cd-raak{fill:transparent}
.cd-markknop{cursor:pointer}
.cd-markknop:hover .cd-mark{stroke:var(--accent);stroke-width:1.8}
.cd-markknop:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}
.cd-markknop:focus-visible .cd-mark{stroke:var(--accent);stroke-width:2}

/* ---------- het sparkrooster ---------- */
.cd-roosterwrap{overflow:auto;max-height:46vh;border:1px solid var(--border);border-radius:14px;
                background:var(--card);margin-top:8px}
table.cd-rooster{border-collapse:separate;border-spacing:0;width:100%;font-size:11.5px}
.cd-rooster th{position:sticky;top:0;z-index:2;background:var(--card);border-bottom:1px solid var(--border);
               font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
               font-weight:700;padding:7px 5px;text-align:center;white-space:nowrap}
.cd-rooster th.sticky,.cd-rooster td.sticky{position:sticky;left:0;z-index:1;background:var(--card);
               text-align:left;padding-left:10px;min-width:230px;max-width:300px}
.cd-rooster th.sticky{z-index:3}
.cd-rooster td{border-bottom:1px solid var(--border-soft);padding:0}
.cd-rooster tr:last-child td{border-bottom:0}
.cd-rijlabel{display:flex;gap:7px;align-items:baseline;padding:3px 0;min-width:0}
.cd-rijnaam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.cd-cel{width:22px;height:19px;text-align:center;border-left:1px solid var(--card)}
.cd-cel.geennorm{opacity:1}
.cd-cel.leeg{background-image:var(--arcering)}
.cd-teken{font-size:9.5px;color:var(--ink);line-height:1}
.cd-cel.zwaar .cd-teken{color:var(--card)}
.cd-rooster td.cd-sp{width:92px;padding:0 4px}
.cd-rooster td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
                   padding-right:10px;white-space:nowrap;color:var(--ink-2)}
.cd-rooster td.cd-st{padding:0 10px 0 6px;white-space:nowrap}
.cd-rooster tr.rij-klik:hover td{background:var(--bg)}
.cd-rooster tr.rij-klik:hover td.sticky{background:var(--bg)}
.cd-rooster tr.rij-klik:hover td.cd-cel{background-blend-mode:multiply}

/* ---------- de bulletrij ---------- */
.cd-bullets{margin-top:6px}
.cd-brij{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(110px,1fr) 96px 58px auto auto;
         gap:10px;align-items:center;padding:6px 4px;border-top:1px solid var(--border-soft)}
.cd-brij:first-child{border-top:0}
.cd-blabel{display:flex;gap:7px;align-items:baseline;min-width:0;font-size:12px}
.cd-bnaam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-bwaarde,.cd-bdelta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;text-align:right;white-space:nowrap}
.cd-bmeet{display:flex;align-items:center;gap:8px}
.cd-kpi{font-family:var(--mono);font-size:10.5px;color:var(--q6)}

/* ---------- de horizonrij ---------- */
.cd-horizon{margin-top:6px}
.cd-hrij{display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,3fr) 70px;gap:10px;
         align-items:center;padding:3px 4px;border-top:1px solid var(--border-soft)}
.cd-hrij:first-child{border-top:0}
.cd-hlabel{display:flex;gap:7px;align-items:baseline;min-width:0;font-size:12px}
.cd-hnaam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-hgeennorm{color:var(--ink-3);font-size:12px}
.cd-hgetal{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;text-align:right;color:var(--ink-2)}
.cd-hbasis{stroke:var(--axis);stroke-width:1}

/* ---------- de buurtkaart ---------- */
.cd-buurt{margin-top:10px}
.cd-rel{stroke:var(--axis);stroke-width:1.2}
.cd-knoopvak{fill:var(--card);stroke:var(--border);stroke-width:1.2}
.cd-middenvak{fill:var(--accent-soft);stroke:var(--accent-border);stroke-width:1.4}
.cd-knoopknop{cursor:pointer}
.cd-knoopknop:hover .cd-knoopvak{fill:var(--accent-soft);stroke:var(--accent-border)}
.cd-knoopknop:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}

/* ---------- de schakelaar die een blok open- en dichtklapt ---------- */
.cd-schakel,.ck-paneelkop{border:0;background:none;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.cd-schakel{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;padding:5px 2px}
.cd-schakel:hover{color:var(--accent)}
.cd-schakel:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px;border-radius:6px}
.cd-schakel .cv,.ck-paneelkop .cv{color:var(--ink-3);font-size:11px;width:11px;flex:0 0 11px}
.cd-schakel .tel{font-family:var(--mono);color:var(--ink-3)}

/* ================================================================
   COCKPIT
   ================================================================ */
.ck-stand{padding:10px 13px 11px;margin-bottom:10px}
.ck-balk{display:flex;flex-direction:column;gap:5px}
.ck-tellers{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.ck-meet{min-width:0}
.ck-meet .cd-md-blok{margin-top:0}
.ck-meet .cd-mdcijfers{margin-top:3px;gap:10px}
.ck-laddkop{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:2px}
.ck-laddkop .kicker{margin-bottom:0;flex:0 0 auto}
.ck-laddkop .sub-k{margin-top:0}
.ck-voet{margin-top:18px;font-size:11.5px;color:var(--ink-3)}

.ck-paneel{padding:10px 14px;margin-top:10px}
.ck-paneel.open{padding-bottom:14px}
.ck-paneelkop{display:flex;gap:10px;align-items:center;width:100%;padding:6px 4px;border-radius:10px}
.ck-paneelkop:hover{background:var(--bg)}
.ck-paneelkop:focus-visible{outline:2px solid var(--accent-border);outline-offset:-2px}
.ck-pt{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-pb{margin-left:auto;flex:0 0 auto}
.ck-pm{display:flex;align-items:center;flex:0 0 auto}
.ck-paneelbody{margin-top:8px}
.ck-blok{margin-top:14px}
.ck-regel{margin-top:6px}
.ck-lijst{display:flex;flex-direction:column;gap:3px;padding:4px 0 4px 18px}
.ck-lijst .lnk{display:flex;gap:7px;align-items:baseline}

/* ================================================================
   BEGRIPPENKADER
   ================================================================ */
.bg-kaart{padding-bottom:18px}
.bg-balk{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.bg-balk .zoek{flex:1 1 320px;max-width:420px}
.bg-balk .zoek input{width:100%}
.bg-facetten{display:flex;flex-direction:column;gap:5px;padding-bottom:10px;border-bottom:1px solid var(--border-soft)}
.bg-frij{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bg-frij .kl{font-size:10.5px;letter-spacing:.13em;color:var(--ink-3);font-weight:700;
             text-transform:uppercase;flex:0 0 70px}
.bg-sprong{border:1px solid var(--border);background:var(--card);border-radius:8px;width:26px;height:24px;
           font-family:var(--mono);font-size:11.5px;color:var(--ink-2);cursor:pointer}
.bg-sprong:hover{border-color:var(--accent-border);color:var(--accent)}
.bg-sprong:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
.bg-groep{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--border-soft)}
.bg-groep:first-child{border-top:0}
.bg-letter{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink-3);line-height:1.6}
.bg-termen{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px}
.bg-term{display:inline-flex;align-items:baseline;gap:6px;font:inherit;font-size:13px;color:var(--ink);
         background:none;border:0;border-left:2px solid transparent;padding:5px 8px;border-radius:8px;
         cursor:pointer;text-align:left}
.bg-term:hover{background:var(--bg);border-left-color:var(--accent);color:var(--accent)}
.bg-term:focus-visible{outline:2px solid var(--accent-border);outline-offset:-2px}
.bg-hom{font-weight:800;font-size:11px;color:var(--warn-ink);background:var(--warn-bg);
        border:1px solid var(--warn-border);border-radius:50%;width:15px;height:15px;
        display:inline-flex;align-items:center;justify-content:center;flex:0 0 15px}
.bg-leeg{padding:14px 2px}

@media (max-width:760px){
  .cd-brij{grid-template-columns:1fr;gap:4px}
  .cd-bwaarde,.cd-bdelta{text-align:left}
  .cd-hrij{grid-template-columns:1fr;gap:3px}
  .ck-paneelkop{flex-wrap:wrap}
  .bg-groep{grid-template-columns:1fr}
}