/* Schermvullend voor elke verzameling + beginscherm-app (2026-10-11, Siri; wens gebruiker: "overal"). js/volscherm.js zet ⛶ in
   de titel en legt het paneel als .vs-aan.vs-<soort> over het hele scherm; js/mobiel.js zet html.app-modus vanaf het beginscherm.
   Alleen thema-tokens. Telefoonregels (draai-tip, notch) staan in css/mobiel.css. docs/site.md "Mobiel". */

/* ⛶ in de titel: na de ⓘ van de rondleiding, anders helemaal rechts */
.vs-kop { display: flex; align-items: center; gap: 10px; }
.vs-kop > .rl-i { order: 1; }
.vs-knop { order: 2; flex: none; font-size: 1.05rem; line-height: 1; }
.vs-kop:not(:has(.rl-i)) > .vs-knop { margin-left: auto; }

/* de laag over het hele scherm; tot in de hoeken, knoppen en tekst vrij van notch en thuisstreep */
html.vs-open, html.vs-open body { overflow: hidden; }
/* vensters, toasts en NPC-dialogen boven de laag (hotfix 2026-10-15: in ⛶ opende de fotoviewer van de Tijdmachine onzichtbaar
   áchter de schatkamer; .overlay had z-index 100, .toasts 120, .dlg 800, de laag 900) */
html.vs-open .overlay, html.vs-open .dlg, html.vs-open .toasts { z-index: 950; }
body > .vs-aan.vs-aan { position: fixed; inset: 0; z-index: 900;   /* specifiek genoeg voor panelen met eigen positie (.panel.mp) */ margin: 0; width: auto; max-width: none; border: 0; border-radius: 0;
  overflow: auto; overscroll-behavior: contain; background: var(--panel-solid);
  box-shadow: 0 0 0 100vmax var(--panel-solid);   /* iOS: een vaste laag reikt soms niet tot onder de ingeklapte adresbalk */
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.vs-aan > h2, .vs-aan .mp-titel, .vs-aan .kp-kop { margin-top: 0; }
/* de scène zo groot als past (ruimte voor titel en knoppen eraf), in het midden. "body > .vs-aan" maakt deze regels sterker
   dan de telefoonregels in css/mobiel.css (die later laden en liggend ook een maat zetten). */
body > .vs-aan.vs-nest .nest-scene, body > .vs-aan.vs-pixelpit .cp-podium { width: min(100%, calc((100dvh - 130px) * 688 / 384)); margin-inline: auto; }
body > .vs-aan.vs-kaasplank .kp-plank { width: min(100%, calc((100dvh - 200px) * 688 / 384)); margin-inline: auto; }   /* keuzebanner erboven */
body > .vs-aan.vs-beurs .bv-zaal { width: min(100%, calc((100dvh - 160px) * 688 / 384)); margin-inline: auto; }
body > .vs-aan.vs-tijdmachine .tm-stage { width: min(100%, calc((100dvh - 120px) * 688 / 384)); margin-inline: auto; }
body > .vs-aan.vs-sketches .mp-podium { width: min(100%, calc((100dvh - 160px) * 16 / 9)); margin-inline: auto; }
body > .vs-aan.vs-fractal .ft-tuin { width: min(100%, calc((100dvh - 180px) * 2)); margin-inline: auto; }
body > .vs-aan.vs-kaart .km-venster { aspect-ratio: auto; width: 100%; height: max(260px, calc(100dvh - 170px)); max-height: none; }
body > .vs-aan.vs-vuurwerk .vw-lucht { height: max(240px, calc(100dvh - 200px)); }
/* liggende telefoon: titel en tekst compacter, zodat de scène meer hoogte krijgt */
@media (orientation: landscape) and (max-height: 500px) {
  body > .vs-aan.vs-aan { padding-top: max(6px, env(safe-area-inset-top)); }
  body > .vs-aan h2 { font-size: 1.1rem; margin-bottom: 4px; }
  body > .vs-aan > p.muted, body > .vs-aan .kp-kop + p, body > .vs-aan .mp-tip, body > .vs-aan .km-uitleg { display: none; }
  body > .vs-aan.vs-kaart .km-venster { height: max(220px, calc(100dvh - 90px)); }
  body > .vs-aan.vs-nest .nest-scene, body > .vs-aan.vs-pixelpit .cp-podium, body > .vs-aan.vs-beurs .bv-zaal,
  body > .vs-aan.vs-tijdmachine .tm-stage { width: min(100%, calc((100dvh - 64px) * 688 / 384)); }
  body > .vs-aan.vs-kaasplank .kp-plank { width: min(100%, calc((100dvh - 190px) * 688 / 384)); }   /* keuzebanner erboven */
  body > .vs-aan.vs-sketches .mp-podium { width: min(100%, calc((100dvh - 72px) * 16 / 9)); }
  body > .vs-aan.vs-fractal .ft-tuin { width: min(100%, calc((100dvh - 110px) * 2)); }
  body > .vs-aan.vs-vuurwerk .vw-lucht { height: max(200px, calc(100dvh - 125px)); }   /* muziekknop erboven */
}

/* De Werkbank: eigen ⛶ in de knoppenbalk (js/werkbank.js), houder als .wb-vol in <body> */
html.wb-vol-pagina { overflow: hidden; }
.wb-houder.wb-vol { position: fixed; inset: 0; z-index: 9000; overflow: hidden; background: #0c0b14;
  box-shadow: 0 0 0 100vmax #0c0b14;   /* iOS liggend (melding gebruiker): anders bleef onderin een strook website zichtbaar */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.wb-vol > .wb { height: 100%; padding: 6px; gap: 6px; grid-template-rows: auto auto minmax(0, 1fr); }
.wb-vol .wb-kader { padding: 4px; }
.wb-vol .wb-kader.sierhoek::before, .wb-vol .wb-kader.sierhoek::after { display: none; }
.wb-vol .wb-balk { gap: 6px; }
.wb-vol .wb-zwaar { height: 44px; }
.wb-vol .wb-info { flex: 1 1 100%; min-height: 44px; font-size: .78rem; padding: .3rem .6rem; }
.wb-vol .wb-la { overflow: auto; align-content: start; }
@media (orientation: landscape) {
  /* liggend: doek linksboven zo groot als past, onderdelen als veegstrook eronder, knoppen + info rechts */
  .wb-vol > .wb { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: minmax(0, 1fr) auto; }
  .wb-vol .wb-kader { grid-area: 1 / 1; width: min(100%, calc((100dvh - 112px) * 16 / 9 + 8px)); justify-self: center; align-self: start; }
  .wb-vol .wb-la { grid-area: 2 / 1; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 70px; gap: 5px;
    overflow-x: auto; overflow-y: hidden; height: auto; padding-bottom: 2px; }
  .wb-vol .wb-deel { padding: 4px 2px; }
  .wb-vol .wb-ic-plek, .wb-vol .wb-ic { width: 56px; height: 42px; }
  .wb-vol .wb-balk { grid-area: 1 / 2 / span 2; align-content: start; overflow-y: auto; max-height: 100%; }
  .wb-vol .wb-groep { padding: 3px 4px; gap: 4px; }
}

/* ---------- beginscherm-app (html.app-modus, viewport-fit=cover): balk en randen vrij van statusbalk, notch en thuisstreep ---------- */
.app-modus .topbar { padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(clamp(12px, 3vw, 28px), env(safe-area-inset-left)); padding-right: max(clamp(12px, 3vw, 28px), env(safe-area-inset-right)); }
.app-modus .gids-knop { top: calc(10px + env(safe-area-inset-top)); left: env(safe-area-inset-left); }
.app-modus main { padding-left: max(clamp(12px, 3vw, 28px), env(safe-area-inset-left)); padding-right: max(clamp(12px, 3vw, 28px), env(safe-area-inset-right)); }
.app-modus .site-footer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }