/* Give editing and preview scenes all available space for their camera. */
.editor-content.board-active,
.editor-content.design-active { container-type:size; }
.editor-page .board-editor > .editor-board {
    min-width:0; min-height:0; overflow:hidden;
    display:grid; place-items:center; container-type:size;
}
.editor-board > .board-wrap,
.design-preview > .board-wrap,
.detail-board > .board-wrap { width:100%; height:100%; aspect-ratio:auto; }

/* On smaller screens the inspector follows the board and can be scrolled into view. */
@media(max-width:1000px) {
    .editor-page .board-editor { grid-template-rows:100cqh auto; }
    .editor-page .board-editor > .object-list { height:auto; min-height:0; overflow:auto; }
}
@media(max-width:420px) {
    .editor-page .board-editor { grid-template-rows:120px max(0px,calc(100cqh - 120px)) auto; }
}

.design-layout { --preview-padding:28px; }
.design-preview {
    min-width:0; width:100%; aspect-ratio:1;
    max-height:calc(100cqh - 2 * var(--preview-padding));
    container-type:size; display:grid; place-items:center;
}
@media(max-width:1000px) { .design-layout { --preview-padding:20px; } }

.main-content:has(> .scenario-page) { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.main-content:has(> .scenario-page) > .page-top { flex-shrink:0; }
.scenario-page { flex:1; min-height:0; width:100%; margin:0 auto; overflow:auto; container-type:size; }
.detail-board {
    width:100%; min-width:0; min-height:0; aspect-ratio:1; max-height:100cqh;
    padding:0; container-type:size; display:grid; place-items:center;
}
@media(max-width:720px) {
    .app-shell:has(.scenario-page) { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; }
    .app-shell:has(.scenario-page) > .sidebar { flex:0 0 auto; }
    .main-content:has(> .scenario-page) { flex:1; height:auto; }
}

/* Use the same schematic board as the scenario cards. */
.hero { position:relative; isolation:isolate; }
.hero-art {
    position:absolute; inset:0; height:auto; margin:0; padding:0;
    overflow:hidden; color:var(--green); pointer-events:none;
    mask-image:linear-gradient(90deg,transparent 12%,#0003 38%,#000 72%);
}

.editor-board, .design-preview { position:relative; }
.art-board { position:absolute; left:50%; top:50%; height:150%; width:auto; aspect-ratio:1; transform:translate(-50%,-50%) rotate(-16deg); opacity:.22; pointer-events:none; }
/* The decoration spans the banner and fades smoothly beneath its text. */
.hero-art .art-board { left:76%; height:150%; opacity:.24; }
@media(max-width:720px) {
    .hero-art { mask-image:linear-gradient(110deg,transparent 5%,#0003 45%,#000 100%); }
    .hero-art .art-board { left:90%; top:62%; height:125%; opacity:.2; }
}
.art-board-border,.art-board-cell { stroke:currentColor; stroke-width:3; }
.art-board-corner { fill:currentColor; fill-opacity:.16; }