/* Drukbestand-studio (STUDIO-ontwerp.md). Geladen met ?v=<hash> uit
   build_pages.py. Werkblad donker en rustig, bediening in de huisstijl. */
.st-overlay-root{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  background:#3a3d42;color:#111;font-family:inherit}
/* Zonder deze regel wint display:flex hierboven van het browser-eigen
   [hidden]{display:none} en blijft een gesloten studio het scherm blokkeren
   (zelfde les als de proefblok-fix uit taak 7 van het drukproefwerk). */
.st-overlay-root[hidden]{display:none!important}
.st-topbalk{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fff;
  border-bottom:3px solid #111;flex-wrap:wrap}
.st-topbalk .st-titel{font-weight:700;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-topbalk .st-maat{color:#444;font-size:.92em}
.st-knop{border:3px solid #111;background:#fff;box-shadow:3px 3px 0 #111;padding:6px 12px;
  font:inherit;font-weight:700;cursor:pointer}
.st-knop:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}
.st-knop[disabled]{opacity:.45;cursor:default}
.st-knop-accent{background:#FFC914}
.st-zoomgroep{display:flex;gap:6px;margin-left:auto;align-items:center}
.st-zoomstand{min-width:4ch;text-align:center;font-weight:700}
.st-lijf{display:flex;flex:1;min-height:0}
.st-strook{flex:1;overflow:auto;padding:28px 16px;scroll-behavior:smooth}
.st-kaart{margin:0 auto 30px;position:relative}
.st-kaart-label{color:#eee;font-size:.85em;margin:0 0 6px;display:flex;gap:8px;align-items:center}
.st-vlag{display:inline-block;width:12px;height:12px;border:2px solid #111}
.st-vlag-rood{background:#E4572E}.st-vlag-oranje{background:#FFC914}
.st-beeldvlak{position:relative;background:#fff;border:2px solid #111;box-shadow:6px 6px 0 rgba(0,0,0,.35);
  width:100%;overflow:hidden}
.st-beeldvlak img{display:block;width:100%;height:100%;object-fit:fill}
.st-wacht{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#888;font-size:.9em;background:repeating-linear-gradient(45deg,#f4f4f4 0 12px,#ececec 12px 24px)}
.st-overlaysvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.st-snij{fill:none;stroke:#E4572E;stroke-width:1.6;stroke-dasharray:6 4}
.st-veilig{fill:none;stroke:#2F5BEA;stroke-width:1;stroke-dasharray:2 3;opacity:.8}
.st-snijlabel{position:absolute;top:2px;left:8px;color:#E4572E;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.82);padding:0 4px;pointer-events:none}
.st-vouw{stroke:#1E9E4B;stroke-width:1.6}
.st-vouw-binnen{stroke-dasharray:2 3}
.st-vouwlabel{position:absolute;top:2px;right:8px;color:#1E9E4B;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.82);padding:0 4px;pointer-events:none}
.st-vouwnr{color:#555;font-size:11px;font-weight:700;background:rgba(255,255,255,.85);
  border:1px solid #bbb;border-radius:9px;padding:1px 7px;pointer-events:none;white-space:nowrap}
.st-beeldfout{padding:24px 12px;color:#444;font-size:.9em;text-align:center}
.st-paneel{width:340px;flex-shrink:0;background:#fff;border-left:3px solid #111;overflow:auto;
  padding:14px;display:flex;flex-direction:column;gap:10px}
.st-paneel h2{margin:0;font-size:1.05em}
.st-oordeel{border:3px solid #111;padding:10px 12px;font-weight:700;box-shadow:4px 4px 0 #111}
.st-oordeel-groen{background:#7BE0AD}.st-oordeel-oranje{background:#FFC914}
.st-oordeel-rood{background:#E4572E;color:#fff}.st-oordeel-grijs{background:#e8e8e8}
.st-bevinding{border:2px solid #111;padding:8px 10px;font-size:.92em;background:#fff;
  text-align:left;cursor:default;font-family:inherit;width:100%}
.st-bevinding[data-pagina]{cursor:pointer}
.st-bevinding[data-pagina]:hover{background:#f5f5f5}
.st-bevinding .st-b-kop{font-weight:700;display:flex;gap:6px;align-items:center}
.st-paneel-onder{margin-top:auto;display:flex;flex-direction:column;gap:8px}
#st-pos-schuif{width:100%;accent-color:#E4572E}
.st-kaart-flits{animation:stflits 1.2s ease-out 1}
@keyframes stflits{0%{outline:6px solid #FFC914}100%{outline:0 solid transparent}}
.st-paneel-toggle{display:none}
@media (max-width:900px){
  .st-lijf{flex-direction:column}
  .st-paneel{width:auto;max-height:45vh;border-left:0;border-top:3px solid #111;display:none}
  .st-paneel.st-open{display:flex}
  .st-paneel-toggle{display:block;position:fixed;right:12px;bottom:12px;z-index:1001}
}