/* One viewport for both editors: scrollable legacy content or a full 3D canvas. */
.stlg-shell{--stlg-workspace-top:0px;--stlg-actions-height:100px;overflow-anchor:none}
.stlg-workspace{scroll-margin-top:var(--stlg-workspace-top)}
.stlg-shell.stlg-state-detail .stlg-workspace{
    height:calc(var(--stlg-viewport-height,100dvh) - var(--stlg-workspace-top) - 8px);
    min-height:0;align-items:stretch;overflow:hidden
}
.stlg-shell.stlg-state-detail .stlg-selection,
body.admin-bar .stlg-shell.stlg-state-detail .stlg-selection{
    position:relative;top:auto;height:100%;min-height:0;box-sizing:border-box
}
.stlg-shell.stlg-state-detail .stlg-card-grid{height:100%;max-height:100%;box-sizing:border-box}
.stlg-shell.stlg-state-detail .stlg-detail{
    position:relative;display:block;height:100%;min-height:0;max-height:100%;
    overflow:hidden;padding:0;box-sizing:border-box;isolation:isolate
}
.stlg-editor-viewport{
    position:relative;display:flex;flex-direction:column;gap:22px;height:100%;min-height:0;
    box-sizing:border-box;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
    scrollbar-gutter:stable;padding:2px 6px calc(var(--stlg-actions-height) + 20px) 2px;
    scroll-padding-block:12px calc(var(--stlg-actions-height) + 20px)
}
.stlg-editor-viewport > *{flex-shrink:0;min-width:0}
.stlg-editor-viewport:focus-visible{outline:2px solid var(--stlg-brand);outline-offset:-2px}
.stlg-shell.stlg-state-detail .stlg-detail-actions{
    position:absolute;inset:auto 0 0;z-index:10;box-sizing:border-box;max-height:45%;
    overflow-y:auto;overscroll-behavior:contain;gap:8px;padding:12px;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    border:1px solid var(--stlg-line);border-radius:18px;
    background:rgba(255,253,249,.96);backdrop-filter:blur(10px);
    box-shadow:0 -8px 24px rgba(31,41,51,.08)
}
.stlg-shell.stlg-state-detail .stlg-detail-actions-row{
    width:100%;justify-content:flex-end;gap:10px
}
.stlg-shell.stlg-state-detail .stlg-detail-actions .stlg-queue-panel{
    width:100%;min-width:0;box-sizing:border-box
}
/* A migrated module can occupy the whole canvas. Only the legacy path reserves
   scrolling space below its fields; the actions overlay the future 3D scene. */
.stlg-shell[data-stlg-editor="3d"] .stlg-editor-viewport{
    display:block;padding:0;overflow:hidden;scrollbar-gutter:auto
}
.stlg-shell[data-stlg-editor="3d"] .stlg-editor-viewport > *{width:100%;height:100%}
.stlg-shell .stlg-maximize{
    position:absolute;top:10px;right:10px;z-index:20;display:grid;place-items:center;
    width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--stlg-line);
    border-radius:14px;background:rgba(255,253,249,.96);color:var(--stlg-ink);
    box-shadow:0 4px 16px rgba(31,41,51,.16);backdrop-filter:blur(8px);cursor:pointer
}
.stlg-shell .stlg-maximize:hover{background:var(--stlg-panel);border-color:var(--stlg-brand);color:var(--stlg-brand-strong)}
.stlg-shell .stlg-maximize:focus-visible{outline:3px solid var(--stlg-brand);outline-offset:2px}
.stlg-shell .stlg-maximize svg{display:block;pointer-events:none}
.stlg-shell .stlg-maximize-restore{display:none}
.stlg-shell.is-maximized .stlg-maximize-expand{display:none}
.stlg-shell.is-maximized .stlg-maximize-restore{display:block}
.stlg-shell .stlg-back-button{max-width:calc(100% - 62px)}
.stlg-shell.is-maximized{
    position:fixed;inset:var(--stlg-visual-top,0px) 0 auto;z-index:2147483647;
    width:100%;max-width:none;height:var(--stlg-viewport-height,100dvh);max-height:none;
    margin:0;box-sizing:border-box;border:0;border-radius:0;box-shadow:none;
    padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    grid-template-rows:minmax(0,1fr);gap:0;overflow:hidden
}
.stlg-shell.is-maximized .stlg-hero{display:none}
.stlg-shell.is-maximized.stlg-state-detail .stlg-workspace{height:100%;min-height:0}
@media(max-width:820px){
    .stlg-shell.stlg-state-detail .stlg-workspace{grid-template-rows:78px minmax(0,1fr);gap:10px}
    .stlg-shell.stlg-state-detail .stlg-selection{padding:4px}
    .stlg-shell.stlg-state-detail .stlg-card-grid{align-items:flex-start}
    .stlg-editor-viewport{gap:16px;padding-right:2px}
    .stlg-shell.stlg-state-detail .stlg-detail-actions{padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));border-radius:14px}
    .stlg-shell.stlg-state-detail .stlg-detail-actions-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
    .stlg-shell.stlg-state-detail .stlg-detail-actions-row .button{
        min-width:0;width:100%;min-height:44px;padding:6px 10px;font-size:13px;line-height:1.25
    }
    .stlg-shell.stlg-state-detail .stlg-preview-trigger{grid-column:1 / -1}
}

/* The frame resizes in real pixels; rail icons and controls retain their own size. */
.stlg-shell.is-workspace-transitioning{overflow:hidden;will-change:width,height,left,top}