/* ============================================================
   Bitkring - app-specifieke CSS
   Geladen NA css-framework core.min.css en klaslab.css.
   Uitsluitend framework-tokens (var(--color-*), var(--space-*), ...), zodat het
   thema overal gelijk blijft (één kleurprofiel en één lichte weergave,
   css-framework 7.0.0).

   Sinds css-framework 4.0/4.1 komen de bouwstenen uit het framework:
   woordmerk (.brand), login, codeblad, paginakop (.page-head), werkbalk
   (.toolbar, .btn-tool, .segmented), panelen, sketchmeldingen (.diagnostic),
   tellers (.count-badge), console, codeweergave (.code-view) en het palet
   (.palette). Hier staat alleen wat van de simulator zelf is: de indeling
   van de werkplek, het bord en zijn tekening, de inspecteurvelden en de
   projectiestand. Zaad: resources/sim/dev/harness.css (nu alleen nog de
   harnas-chrome; het harnas laadt deze CSS zelf).
   ============================================================ */

/* ─── Pagina's ─── */
/* Een radiogroep staat in een fieldset (legend als label); zonder de
   browserrand en -marge, zodat hij eruitziet als elke andere .form-group. */
fieldset.form-group { border: 0; margin-inline: 0; padding: 0; min-width: 0; }
fieldset.form-group > legend { padding: 0; }
fieldset.form-group .radio-label { display: flex; }

/* Wat met een klas gedeeld is (class-show): een lijst zonder opsommingstekens. */
.share-list { list-style: none; margin: 0; padding: 0; }
.share-list li + li { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }

/* ─── Simulatorpagina's ─── */
/* Volle breedte met een compacte kop (.page-head-compact); de simulator vult de rest. */
.sim-main { padding: var(--space-md) var(--space-lg) var(--space-xl); }

/* Projectie: kale pagina, het bord zo groot mogelijk. */
body.sim-demo { margin: 0; background: var(--color-surface-sunken); }
body.sim-demo .sim-main { padding-top: var(--space-sm); }
/* Eén smalle regel boven de werkbalk: wat er geprojecteerd wordt, en sluiten. */
.sim-demo-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    margin-bottom: var(--space-sm);
}
.sim-demo-title {
    margin: 0; min-width: 0;
    font-size: var(--text-base); font-weight: 600; color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── De werkplek: werkbalk, palet | bord | zijpaneel met tabs ───
   --sim-chrome is wat boven de werkplek staat (navigatie, paginakop,
   werkbalk); de werkplek vult de rest van het scherm, zodat bord en code
   samen in beeld staan, ook op een Chromebook (1366x768). */
.sim-host {
    --sim-chrome: 17rem;
    /* Selectie, handvatten en gatcursor op het bord: de teal van het profiel
       (accent-3). Inktblauw verdwijnt tegen de navy print (1,6:1), teal haalt
       daar 3,1:1 en op het hout meer (besluit 52). */
    --sim-accent: var(--color-accent-3);
    /* Twee kolommen tegels; breed genoeg voor "Lichtsensor" zonder afbreken (besluit 50). */
    --sim-palette-w: 12.5rem;
    color: var(--color-text);
}
body.sim-demo .sim-host { --sim-chrome: 10rem; }

.sim-toolbar.toolbar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    container-type: inline-size;
}
/* Uitvoeren wisselt tussen Uitvoeren, Pauzeren en Verder: een vaste breedte,
   zodat de werkbalk niet verspringt (besluit 49 en 50). */
.sim-run { min-inline-size: 8.5rem; }
/* Opgave vastzetten is een instelling van de leerkracht: helemaal rechts, na
   de snelheid; de statusregel blijft de laatste regel. */
.sim-toolbar-group[data-group="vergrendeling"] { order: 1; margin-left: auto; }
.sim-toolbar-status { order: 2; }
/* Een smalle werkbalk: Ongedaan en Opnieuw alleen als pijl (het label blijft
   voor de schermlezer via aria-label). */
@container (max-width: 84rem) {
    .sim-toolbar-group[data-group="geschiedenis"] .sim-tool-label { display: none; }
}
.sim-speed { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.sim-speed input { width: 6rem; }
.sim-clock { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
/* Klok, statusregel en bewaarstand: altijd één regel van vaste hoogte, zodat
   een melding die verschijnt of verdwijnt de werkplek niet verschuift (besluit 49). */
.sim-toolbar-status {
    flex: 1 0 100%;
    display: flex; align-items: center; gap: var(--space-md);
    min-width: 0; height: 1.5rem;
}
.sim-toolbar-status .sim-notice {
    flex: 1 1 auto;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sim-toolbar-status .sim-save-state { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }

.sim-body {
    display: grid;
    /* Bord | greep | zijpaneel. --sim-panel-w zet ui/panel-resize.ts; zonder
       die waarde geldt de standaardbreedte (besluit 50). */
    grid-template-columns: minmax(0, 1fr) auto var(--sim-panel-w, minmax(22rem, 30rem));
    gap: var(--space-md);
    padding-top: var(--space-md);
    height: clamp(28rem, calc(100dvh - var(--sim-chrome)), 60rem);
}
.sim-body-with-palette {
    grid-template-columns: var(--sim-palette-w) minmax(0, 1fr) auto var(--sim-panel-w, minmax(20rem, 26rem));
}
/* De greep ligt in de tussenruimte van bord en paneel, niet ernaast. */
.sim-split { margin-inline: calc(var(--space-md) * -1); }
/* Tijdens het slepen selecteert de muis geen tekst en blijft de cursor een pijl met twee punten. */
.sim-body.is-resizing { user-select: none; cursor: col-resize; }
.sim-body.is-resizing .sim-scene, .sim-body.is-resizing .cm-editor { pointer-events: none; }
.sim-body-with-palette[data-palette="collapsed"] { --sim-palette-w: 2.75rem; }

.sim-side, .sim-center { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; min-height: 0; }

/* ─── Palet (framework .palette): tegels in twee kolommen ─── */
.sim-palette.palette {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-sm);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.sim-palette-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.sim-palette-head .panel-title { margin: 0; }
/* Een uitklapknop, geen aan/uit-knop: het framework kleurt aria-expanded="true" als ingedrukt. */
.sim-palette-toggle.btn-tool[aria-expanded] {
    color: var(--color-text-muted); background: transparent; border-color: transparent;
}
.sim-palette-toggle.btn-tool[aria-expanded]:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.sim-palette { --palette-preview-h: 3.5rem; }
.sim-palette .palette-tile { gap: var(--space-xs); padding: var(--space-xs); }
.sim-body[data-palette="collapsed"] .sim-palette > :not(.sim-palette-head),
.sim-body[data-palette="collapsed"] .sim-palette-head .panel-title { display: none; }
.sim-body[data-palette="collapsed"] .sim-palette.palette { padding: var(--space-xs); }
.sim-body[data-palette="collapsed"] .sim-palette-head { justify-content: center; margin: 0; }

/* ─── Het bord: vult de middelste kolom; de tekening schaalt mee (viewBox) ─── */
/* Hout is een materiaalkleur, geen themakleur (zie CLAUDE.md). */
.sim-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 14rem;
    display: flex;
    border-radius: var(--radius-lg); overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 20%, #8a6440, #6b4b2f 70%),
        repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px);
    box-shadow: inset 0 0 80px rgba(0,0,0,.35);
}
.sim-scene { display: block; width: 100%; height: 100%; cursor: grab; }
.sim-scene:focus { outline: none; }
.sim-scene.is-panning { cursor: grabbing; }
/* De cursor zegt wat een aanraking gaat doen: verplaatsen, slepen, een draad trekken. */
.sim-host[data-sim-mode="edit"] .sim-scene [data-component],
.sim-host[data-sim-mode="work"] .sim-scene [data-component] { cursor: move; }
.sim-scene.is-dragging, .sim-scene.is-dragging * { cursor: grabbing; }
.sim-scene[data-tool="wire"], .sim-scene[data-tool="wire"] * { cursor: crosshair; }
.sim-scene[data-tool="select"] [data-wire] { cursor: pointer; }
/* Spatie ingedrukt: alles onder de cursor pant, ook in het draadgereedschap (besluit 36). */
.sim-scene.is-space-pan, .sim-scene.is-space-pan * { cursor: grab; }
.sim-scene.is-space-pan.is-panning, .sim-scene.is-space-pan.is-panning * { cursor: grabbing; }
.sim-handle { cursor: pointer; }
.sim-wire-end { cursor: grab; }
.sim-wire-end [data-handle-bg] { stroke-width: 2; }
/* Het kader rond een geselecteerd component: beter te zien dan een gloed alleen. */
.sim-selection-frame rect {
    stroke: var(--sim-accent); stroke-width: 1.4; stroke-dasharray: 4 3;
}
/* Omleggen: de draad blijft zichtbaar waar ze lag, het elastiek toont waar ze komt. */
[data-wire].is-rerouting { opacity: .35; }

/* De stroomweergave (besluiten 38 en 48): bolletjes langs de geleiders en
   door de componenten, van plus naar min, in de waarschuwingskleur. */
.sim-scene:not([data-current]) [data-layer^="current"] { display: none; }
.sim-current {
    stroke: var(--color-warning); stroke-width: 3.2;
    filter: drop-shadow(0 0 1.5px var(--color-warning));
}
.sim-current[data-flow="element"] { stroke-width: 2.6; opacity: .9; }
.sim-current-arrow { fill: var(--color-warning); }
.sim-handle [data-handle-bg] { fill: var(--color-surface-raised); stroke: var(--sim-accent); }
.sim-handle [data-handle-arrow] { stroke: var(--sim-accent); }
.sim-handle:hover [data-handle-bg] { fill: var(--sim-accent); }
.sim-handle:hover [data-handle-arrow] { stroke: var(--color-text-inverse); }
/* Tijdens het slepen vervaagt het origineel: het spook is nu het component. */
[data-component].is-dragging { opacity: .25; }
/* Een geweigerde bewerking schudt even. `translate` telt op bij het transform-attribuut
   van de groep; `transform` zelf zou de plaats van het component overschrijven. */
[data-component].is-rejected, [data-wire].is-rejected { animation: sim-shake .4s ease-in-out; }
@keyframes sim-shake {
    0%, 100% { translate: 0 0; filter: drop-shadow(0 0 3px var(--color-error)); }
    20%, 60% { translate: -3px 0; filter: drop-shadow(0 0 6px var(--color-error)); }
    40%, 80% { translate: 3px 0; filter: drop-shadow(0 0 6px var(--color-error)); }
}
[data-component].is-selected {
    outline: none; filter: drop-shadow(0 0 3px var(--sim-accent)) drop-shadow(0 0 6px var(--sim-accent));
}
/* Een draad licht op via haar trefpad: breed genoeg om als halo te dienen, en
   `pointer-events: stroke` raakt ook als de streek onzichtbaar is. */
[data-wire-hit] { stroke: var(--sim-accent); stroke-opacity: 0; transition: stroke-opacity var(--transition-fast); }
[data-wire].is-selected [data-wire-hit] { stroke-opacity: .55; }
@media (hover: hover) {
    .sim-scene[data-tool="select"]:not(.is-dragging) [data-wire]:not(.is-selected):hover [data-wire-hit] { stroke-opacity: .3; }
    .sim-host[data-sim-mode="edit"] .sim-scene[data-tool="select"]:not(.is-dragging) [data-component]:not(.is-selected):hover,
    .sim-host[data-sim-mode="work"] .sim-scene[data-tool="select"]:not(.is-dragging) [data-component]:not(.is-selected):hover {
        filter: drop-shadow(0 0 2px var(--sim-accent));
    }
}
[data-component].is-locked, [data-wire].is-locked { opacity: .92; }
.sim-host[data-sim-mode="edit"] [data-component].is-locked > g:last-of-type,
.sim-host[data-sim-mode="work"] [data-component].is-locked > g:last-of-type {
    filter: drop-shadow(0 0 2px var(--color-info));
}

/* ─── Boven het werkblad: zoomknoppen en het actiebalkje bij de selectie ─── */
.sim-zoom, .sim-selection-bar {
    position: absolute; z-index: var(--z-dropdown);
    display: flex; gap: 2px; padding: 2px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.sim-zoom { right: var(--space-sm); bottom: var(--space-sm); }
.sim-selection-bar { left: 0; top: 0; }
.sim-selection-bar[hidden], .sim-selection-bar [hidden] { display: none; }

/* ─── "Wat gebeurt er nu?": een strook onder het bord ───
   Vaste hoogte (besluit 49): groeide ze regel per regel mee, dan kromp het
   bord bij elke zin. De nieuwste zin staat bovenaan; oudere scrollen weg. */
.sim-narration {
    flex: none;
    height: 7.5rem;
    overflow-y: auto;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.sim-narration .panel-title { margin: 0 0 var(--space-xs); }
.sim-narration ul { margin: 0; padding-left: var(--space-lg); font-size: var(--text-sm); }
.sim-narration ul:empty::before {
    content: "Druk op Uitvoeren om te zien wat de schakeling doet.";
    display: block; margin-left: calc(var(--space-lg) * -1); color: var(--color-text-muted);
}

/* ─── Zijpaneel met tabs (ui/side-tabs.ts; framework .panel, .tabs, .tab) ─── */
.sim-side-right.panel {
    overflow: hidden;
    /* Tabs zonder pictogram als het paneel smal is. */
    container-type: inline-size;
}
.sim-tabhead { flex: none; display: flex; align-items: stretch; }
.sim-tablist { flex: 1 1 auto; min-width: 0; padding: 0 var(--space-xs); overflow-x: auto; scrollbar-width: thin; }
/* De knop Code breed: rechts in de tabrij, op dezelfde onderrand als de tabs. */
.sim-tabactions {
    flex: none; display: flex; align-items: center; gap: var(--space-xs);
    padding: 0 var(--space-xs); border-bottom: 2px solid var(--color-neutral-200);
}
.sim-wide-toggle.btn-tool {
    color: var(--color-text-muted); background: transparent; border-color: transparent;
}
.sim-wide-toggle.btn-tool:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.sim-wide-toggle.btn-tool[aria-pressed="true"] { color: var(--color-primary-dark); background: var(--color-primary-100); border-color: transparent; }
.sim-tablist .tab { padding: var(--space-sm); gap: var(--space-xs); white-space: nowrap; }
.sim-tablist .count-badge { margin-left: 0.15rem; }
/* .count-badge zet display: flex en wint zo van het hidden-attribuut: een lege
   teller werd een streepje op elke tab. */
.sim-host .count-badge[hidden] { display: none; }
.sim-tablist .sim-count-muted { color: var(--color-text-muted); background: var(--color-surface-sunken); }
/* Nieuw in een tab die niet open staat (seriële uitvoer): een stip. */
.sim-tablist .tab.has-news::after {
    content: ""; width: 0.5rem; height: 0.5rem; flex: none;
    border-radius: var(--radius-full); background: var(--color-primary);
}
/* Op een Chromebook is het paneel ongeveer 26rem: dan zonder pictogrammen, zodat de vier tabs passen. */
@container (max-width: 28rem) {
    .sim-tablist .tab .material-icons { display: none; }
}

.sim-tabpanel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md) var(--space-md);
}
.sim-tabpanel[hidden] { display: none; }
.sim-tabpanel .panel-title { margin: 0 0 var(--space-xs); }
.sim-panel-headline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.sim-panel-headline .panel-title { margin: 0; }

/* Code: de editor of het codevlak vult de tab; de meldingen eronder. */
.sim-tabpanel[data-sim-tabpanel="code"] { overflow: hidden; }
.sim-code { flex: 1 1 auto; min-height: 10rem; display: flex; flex-direction: column; }
.sim-code .cm-editor, .sim-code .code-view {
    flex: 1 1 auto; min-height: 0; height: 100%;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.sim-code .code-view { overflow: auto; }
/* CodeMirror zet zelf font-family: monospace op .cm-scroller (zijn thema komt na
   deze stylesheet); drie klassen winnen, zodat de editor het codefont van het
   thema toont (Atkinson Hyperlegible Mono, css-framework 5.0.0), zonder ligaturen. */
.sim-host .cm-editor .cm-scroller { font-family: var(--font-mono); font-variant-ligatures: none; }
/* Variabelen (besluit 51): naam, waarde en gedempt type en plaats; krimpt niet,
   en schuift zelf als er veel zijn. */
.sim-variables { flex: 0 0 auto; max-height: 30%; overflow-y: auto; }
.sim-variables-empty { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sim-variables-list {
    margin: 0; padding: var(--space-xs) var(--space-sm);
    display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--space-md);
    font-size: var(--text-sm);
    background: var(--color-surface-sunken); border-radius: var(--radius-sm);
}
.sim-variables-list[hidden], .sim-variables-empty[hidden] { display: none; }
.sim-variables-list dt { font-family: var(--font-mono); }
.sim-variables-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); min-width: 0; }
.sim-variables-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; overflow-wrap: anywhere; }
.sim-variables-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
/* De chip in het statische codevlak (demo, view); in de editor staat hij in EDITOR_CSS. */
.code-line .sim-cond-chip { margin-left: 1ch; padding: 0 0.4em; font-family: var(--font-body); line-height: 1.4; align-self: center; }

/* De meldingen krimpen niet: anders kreeg "Geen meldingen." een schuifbalk. De code krimpt. */
.sim-problems { flex: 0 0 auto; max-height: 45%; overflow-y: auto; }
.sim-quickfix { margin-top: var(--space-xs); }

/* Serieel: de console vult de tab. */
.sim-serial { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.sim-serial-out.console {
    flex: 1 1 auto; min-height: 8rem; max-height: none;
    white-space: pre-wrap; overflow-wrap: break-word;
}
.sim-serial-input { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.sim-serial-input .input { flex: 1 1 auto; min-width: 0; }

/* ─── Inspecteur en wereld ─── */
.inspector-title { font-size: var(--text-base); margin: 0 0 var(--space-sm); }
.inspector-field, .sim-field {
    display: flex; flex-direction: column; gap: var(--space-xs);
    margin-bottom: var(--space-sm); font-size: var(--text-sm);
}
.inspector-field select,
.inspector-field input:not([type="checkbox"]),
.sim-field input:not([type="range"]) {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}
.sim-field input[type="range"] { width: 100%; }
.inspector-lock { flex-direction: row; align-items: center; gap: var(--space-sm); }
.inspector-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-sm) 0; }
.inspector-actions .btn-tool { flex: 1 1 auto; }
.inspector-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-xs) 0; }
.inspector-legs {
    margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-text-muted);
    display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--space-sm);
}
.inspector-legs dt { font-family: var(--font-mono); }
.inspector-legs dd { margin: 0; }
/* Meetwaarden: zoals op een multimeter, cijfers in een vaste breedte. */
.inspector-meter {
    margin: 0 0 var(--space-sm); padding: var(--space-xs) var(--space-sm);
    display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--space-md);
    font-size: var(--text-sm);
    background: var(--color-surface-sunken); border-radius: var(--radius-sm);
}
.inspector-meter:empty { display: none; }
.inspector-meter dt { color: var(--color-text-muted); }
.inspector-meter dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.inspector-route { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-sm); }
.inspector-swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: 0.1rem; }
.inspector-swatch-row .swatch[disabled] { opacity: .5; cursor: default; }
/* Draadkleuren zijn materiaalkleuren (render/wire-colors.ts), geen themakleuren:
   een rode draad is rood, in licht en in donker, zoals het hout van het werkblad. */
.inspector-swatch-row [data-color="rood"] { --swatch-color: #d33a2a; }
.inspector-swatch-row [data-color="zwart"] { --swatch-color: #1a1a1a; }
.inspector-swatch-row [data-color="blauw"] { --swatch-color: #2c7fb8; }
.inspector-swatch-row [data-color="oranje"] { --swatch-color: #e8a33d; }
.inspector-swatch-row [data-color="groen"] { --swatch-color: #4b9e5f; }
.inspector-swatch-row [data-color="paars"] { --swatch-color: #8e5ea2; }
.inspector-swatch-row [data-color="roze"] { --swatch-color: #c96a9a; }
/* "Automatisch" is rood naar de plus en zwart naar de massa: allebei te zien. */
.inspector-swatch-row [data-color="auto"] { background: linear-gradient(135deg, #d33a2a 50%, #1a1a1a 50%); }

/* ─── Projectie (demo): leesbaar vanaf de achterste rij ─── */
.sim-host[data-sim-mode="demo"] .code-view { font-size: var(--text-base); }
.sim-host[data-sim-mode="demo"] .sim-tablist .tab { font-size: var(--text-base); }
.sim-host[data-sim-mode="demo"] .panel-title { font-size: var(--text-sm); }
.sim-host[data-sim-mode="demo"] .sim-narration { height: 10rem; }
.sim-host[data-sim-mode="demo"] .sim-narration ul { font-size: var(--text-lg); }
.sim-host[data-sim-mode="demo"] .diagnostic { font-size: var(--text-base); }

/* ─── Smal scherm: palet, bord en zijpaneel onder elkaar ─── */
@media (max-width: 1100px) {
    .sim-body, .sim-body-with-palette { grid-template-columns: minmax(0, 1fr); height: auto; }
    /* Onder elkaar valt er niets te verbreden. */
    .sim-split, .sim-wide-toggle { display: none; }
    .sim-palette.palette { max-height: 13rem; }
    .sim-palette .palette-grid { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
    .sim-stage { flex: none; min-height: 0; }
    .sim-scene { height: auto; }
    .sim-side-right.panel { height: 28rem; }
}