/* Gedeelde basisstijl voor de twee bomen: het filter in Inzichten (inzichten2.js, tikt direct
   door) en "Wie ziet wat" in Beheer (beheer.js, werkt met conceptstand + Bewaar). Dit bestand
   is alleen weergave: niveau-label, inspringing, uitklappijl, drie standen, telling, focus,
   tikdoel, licht/donker via de bestaande tokens. De bedieningselementen verschillen bewust
   (vinkvak = kijken, schakelaar = toekennen) en staan in inzichten2.css / beheer.css.
   Ontwerp: mockups-bron/boomstructuur-filter-beheer. */

ul.boom-lijst, ul.boom-groep { list-style: none; margin: 0; padding: 0; }
ul.boom-groep { margin-left: 1.25rem; border-left: 1px solid var(--border); padding-left: 0.25rem; }
@media (max-width: 30rem) { ul.boom-groep { margin-left: 0.75rem; } }

li.boom-knoop { outline: none; }
.boom-rij { display: flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; border-radius: 0.5rem; padding: 0 0.25rem; cursor: pointer; }
.boom-rij:hover { background: var(--surface-alt); }
li.boom-knoop:focus-visible > .boom-rij { outline: 3px solid var(--focus, var(--text-strong)); outline-offset: -2px; }

/* uitklappijl: tikdoel 2,75 rem, draait 90 graden */
.boom-chev { width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; background: none; border: 0; color: var(--text-muted); border-radius: 50%; padding: 0; }
.boom-chev svg { transition: transform 0.15s; }
.boom-chev[aria-expanded="true"] svg { transform: rotate(90deg); }
.boom-chev.boom-leeg { visibility: hidden; }

/* niveau-label boven de naam, altijd tekst (nooit alleen kleur of icoon) */
.boom-naamblok { flex: 1; min-width: 0; padding: 0.25rem 0; }
.boom-eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); line-height: 1.2; }
.boom-naam { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; font: 600 1rem/1.3 var(--font-koppen); color: var(--text-strong); overflow-wrap: anywhere; }
.boom-sub { display: block; font-size: 0.875rem; color: var(--text-muted); line-height: 1.35; }

/* telling per tak: "x van y"; gedempt (geen vulling) bij 0 */
.boom-telling { flex: none; margin: 0 0.5rem 0 0.25rem; padding: 0 0.625rem; border-radius: 999px; background: var(--keuze-bg); color: var(--keuze-tekst); font-size: 0.8125rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.boom-telling.boom-nul { background: none; color: var(--text-muted); font-weight: 500; }

/* drie standen in vorm: leeg / vinkje / streepje (filter: vinkvak; beheer: schakelaar in beheer.css) */
.boom-vak { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.boom-vak span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; box-sizing: border-box; border: 1.5px solid var(--ctl-border); border-radius: 0.3125rem; background: var(--surface); color: var(--keuze-tekst); font-size: 0.8125rem; font-weight: 600; line-height: 1; }
li[aria-checked="true"] > .boom-rij .boom-vak span, li[aria-checked="mixed"] > .boom-rij .boom-vak span { background: var(--keuze-bg); }
li[aria-checked="true"] > .boom-rij .boom-vak span::after { content: "\2713"; }
li[aria-checked="mixed"] > .boom-rij .boom-vak span::after { content: "\2013"; }