/* Steigersimulator (proef, Stefan 2-11): een pagina van de shop (?pagina=simulator), met de bouwstenen van de calculator:
   de kopband, .card, de chips, de tabel .dt, .xbtn en .frm. Hier staat alleen wat daar niet bestaat. De versie staat in de
   link (tools/bouw-site.mjs), zodat een telefoon met de service worker meteen de nieuwe opmaak krijgt. */
.sim-buhne{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
/* het model blijft in beeld terwijl de materiaalstaat ernaast scrolt */
.sim-model{position:sticky;top:12px;min-width:0;height:clamp(420px,calc(100dvh - 170px),640px);background:#f6f8fa;border:1px solid var(--line);overflow:hidden}
.sim-doek{position:absolute;inset:0}.sim-doek canvas{display:block;cursor:grab}.sim-doek canvas:active{cursor:grabbing}
.sim-laden{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted)}
/* bediening rechtsboven in het model, zoals Beginstand bij de interactieve steiger op de assortimentspagina */
.sim-bediening{position:absolute;z-index:2;top:10px;right:10px;display:flex;gap:6px}
.sim-speel,.sim-opnieuw{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font:600 12.5px/1 'Open Sans',sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(0,30,60,.08);transition:background-color .15s,border-color .15s,color .15s}
.sim-speel{padding:0 13px 0 10px}.sim-opnieuw{width:34px;padding:0}
.sim-speel:hover,.sim-opnieuw:hover{border-color:var(--navy)}
.sim-speel[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.sim-speel:focus-visible,.sim-opnieuw:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sim-speel svg,.sim-opnieuw svg{width:15px;height:15px;fill:currentColor;flex:none}
.sim-speel .i-pauze,.sim-speel .t-pauze{display:none}
.sim-speel[aria-pressed="true"] .i-speel,.sim-speel[aria-pressed="true"] .t-speel{display:none}
.sim-speel[aria-pressed="true"] .i-pauze{display:block}.sim-speel[aria-pressed="true"] .t-pauze{display:inline}
/* het paneel: één kaart, letters en kleuren als in de calculator (kpi-cijfers in Oswald, labels grijs, tabel .dt) */
.sim-paneel{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}
.sim-groot{margin:0;font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;line-height:1;color:var(--navy)}
.sim-groot b{font-size:29px;font-weight:600}
.sim-stap{margin:-4px 0 0;min-height:1.45em;font-size:12.5px;font-weight:600;color:var(--blue)}
.sim-kpi{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
.sim-kpi dt{color:var(--muted)}.sim-kpi dd{margin:0;font-weight:600;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.sim-schuif{display:grid;gap:2px;font-size:12px;font-weight:600;color:var(--navy)}.sim-schuif input{width:100%;margin:0;accent-color:var(--blue)}
.sim-schuif input:focus{box-shadow:none}.sim-schuif input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* onderdelen als de ovale voorbeeldchips (Rijtjeshuis, Rechte gevel), een maat kleiner */
.sim-groepen{display:flex;flex-wrap:wrap;gap:5px}
.sim-groepen .chip{position:relative;border-radius:999px;background:#fff;border:1px solid var(--blue);color:var(--blue);padding:0 9px;height:24px;min-height:0;font-size:11px;font-weight:600;line-height:22px;white-space:nowrap}
.sim-groepen .chip::after{content:'';position:absolute;inset:-3px -2px}
/* telefoon: de chips blijven klein (Stefan 2-11), het tikvlak is groter dan wat je ziet */
@media (pointer:coarse){.sim-groepen{gap:8px 6px}.sim-groepen .chip::after{inset:-7px -3px}}
.sim-groepen .chip:hover{border-color:var(--navy);color:var(--navy)}
.sim-groepen .chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.sim-staat td.oms{white-space:normal}
.sim-staat .sim-code{display:block;font-size:11px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.sim-staat td.sim-erbij{color:var(--muted)}.sim-staat tr.sim-nieuw td.sim-erbij{color:var(--blue);font-weight:700}
.sim-paneel .noot.klein{margin:-6px 0 0}
.sim-eigen{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.sim-eigen h2{margin:0}
.sim-eigen .xbtn{justify-self:start}
.sim-eigen .xbtn:disabled{opacity:.55;cursor:not-allowed}
.sim-eigen .frm{display:flex;gap:6px;margin:0}.sim-eigen .frm input{flex:1;min-width:0}
.sim-melding{margin:0;font-size:12px;color:var(--navy)}.sim-melding:empty{display:none}
.sim-geen3d .sim-model{display:none}.sim-geen3d .sim-buhne{grid-template-columns:minmax(0,1fr)}
/* tablet en telefoon: het model boven het paneel, niet hoger dan breed (minder lege ruimte boven en onder de steiger, en
   genoeg pagina naast het model om te scrollen) */
@media (max-width:980px){
  .sim-buhne{grid-template-columns:minmax(0,1fr);gap:12px}
  .sim-model{position:relative;top:0;height:auto;aspect-ratio:4/3;max-height:58vh}
}
@media (max-width:640px){.sim-model{aspect-ratio:1/1;max-height:52vh}}