/* Controls-paneel als pure HTML in plaats van een screenshot; zelfde
   familie als heromock.css: container queries (cqw), JetBrains Mono,
   de gedempte kleuren. Hoofdstukken zijn native <details>, dus ook
   zonder JS uitklapbaar en met toetsenbord bedienbaar; alleen de
   expand-all-knop heeft controlsmock.js nodig. De balkjes vullen met
   keyframes (zelfde les als de hero: fill-mode both, geen transities):
   de hoofdstukbalken zodra het omliggende .io-element in-view krijgt,
   de subbalken bij het openklappen (display:none naar zichtbaar start
   de animatie opnieuw). Met prefers-reduced-motion speelt er niets en
   staat alles op de eindstand. */
.e2a-controlsmock{
  --cm-ink:#0b1c27;--cm-navy:#112532;--cm-navy-mid:#2c536c;--cm-navy-soft:#5a839d;
  --cm-border-soft:rgba(44,83,108,.1);--cm-mist:#e0e7ea;
  --cm-ok:#2e7d5c;--cm-coral-tint:rgba(231,135,149,.14);--cm-fail-text:#ce6c7a;
  --cm-mono:'JetBrains Mono',ui-monospace,monospace;
  container-type:inline-size;
  background:#fff;border:1px solid var(--cm-border-soft);border-radius:6px;
  box-shadow:0 18px 44px rgba(11,28,39,.14);
  font-family:'Public Sans',system-ui,sans-serif;color:var(--cm-navy);
  padding:2.4cqw 2.8cqw 1cqw;user-select:none;
}
.e2a-controlsmock *{box-sizing:border-box;margin:0;padding:0}
.cm-kop{display:flex;align-items:center;gap:1.1cqw;margin-bottom:1.7cqw}
.cm-kop svg{width:2.1cqw;height:2.1cqw;color:var(--cm-navy);flex:none}
.cm-kop b{font-size:2cqw;font-weight:600;letter-spacing:-.01em}
.cm-expand{display:inline-flex;align-items:center;gap:.8cqw;
  font-family:var(--cm-mono);font-size:1.2cqw;letter-spacing:.08em;
  color:var(--cm-navy-mid);background:none;border:1px solid var(--cm-mist);
  border-radius:4px;padding:.65cqw 1.2cqw;margin-bottom:1.5cqw;cursor:pointer}
.cm-expand svg{width:1.35cqw;height:1.35cqw;flex:none}
.cm-h{border-top:1px solid var(--cm-border-soft)}
.cm-rij{display:flex;align-items:center;gap:1.4cqw;padding:1.45cqw .3cqw;
  list-style:none;cursor:pointer}
.cm-rij::-webkit-details-marker{display:none}
.cm-rij > svg{width:1.7cqw;height:1.7cqw;color:var(--cm-navy-soft);flex:none;
  transition:transform .18s ease}
.cm-h[open] > .cm-rij > svg{transform:rotate(-180deg)}
.cm-nr{font-family:var(--cm-mono);font-size:1.35cqw;color:var(--cm-fail-text);
  background:var(--cm-coral-tint);border-radius:4px;padding:.3cqw .7cqw;flex:none}
.cm-naam{font-size:1.65cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-balk{flex:none;width:29cqw;height:1.9cqw;margin-left:auto;
  background:var(--cm-mist);border-radius:999px;overflow:hidden}
.cm-vul{display:block;height:100%;background:var(--cm-ok);border-radius:999px;
  transform-origin:left}
.cm-pct{flex:none;width:6.2cqw;text-align:right;font-family:var(--cm-mono);
  font-size:1.45cqw;color:var(--cm-ink);font-variant-numeric:tabular-nums}
.cm-sub{padding:0 .3cqw .9cqw 5.4cqw}
.cm-srij{display:flex;align-items:center;gap:1.3cqw;padding:.85cqw 0;
  border-top:1px solid rgba(44,83,108,.06)}
.cm-snr{font-family:var(--cm-mono);font-size:1.2cqw;color:var(--cm-navy-soft);flex:none}
.cm-snaam{font-size:1.45cqw;color:var(--cm-navy-mid);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-sbalk{flex:none;width:22cqw;height:1.5cqw;margin-left:auto;
  background:var(--cm-mist);border-radius:999px;overflow:hidden}
.cm-spct{flex:none;width:6.2cqw;text-align:right;font-family:var(--cm-mono);
  font-size:1.3cqw;color:var(--cm-navy-mid);font-variant-numeric:tabular-nums}
/* Op smalle schermen schaalt cqw onder het leesbare; ondergrens in px,
   en iets ruimere rijen omdat dit sinds de uitklapversie tapdoelen zijn. */
@container (max-width:540px){
  .cm-kop b{font-size:13px}
  .cm-kop svg{width:14px;height:14px}
  .cm-expand{font-size:8.5px;padding:5px 9px}
  .cm-expand svg{width:10px;height:10px}
  .cm-rij{padding:10px 2px;gap:8px}
  .cm-rij > svg{width:12px;height:12px}
  .cm-nr{font-size:9px;padding:2px 5px}
  .cm-naam{font-size:11px}
  .cm-pct{font-size:10px;width:44px}
  .cm-balk{width:24%;height:8px}
  .cm-sub{padding:0 2px 8px 34px}
  .cm-srij{padding:7px 0;gap:7px}
  .cm-snr{font-size:8.5px}
  .cm-snaam{font-size:10px}
  .cm-spct{font-size:9px;width:40px}
  .cm-sbalk{width:20%;height:6px}
}
@keyframes cm-balk{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
  .io.in-view .cm-rij .cm-vul{animation:cm-balk .9s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--cm-uitstel,0s)}
  .io.in-view .cm-h[open] .cm-srij .cm-vul{animation:cm-balk .7s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--cm-uitstel,0s)}
}