/* Shared editor shell. Product styles own only their content and canvas tools. */
:root {
  --panel-padding: 20px;
  --workspace-padding: 22px;
  --panel-background: #181c23;
  --panel-gap: 16px;
}
body.editor {display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body.editor > #header,body.editor > .toolbar {flex:none}
.workspace-shell {display:grid;grid-template-columns:var(--settings-width,380px) 8px minmax(0,1fr);flex:1;min-height:0;min-width:0}
.sidebar {padding:var(--panel-padding);overflow:auto;min-width:0;background:var(--panel-background)}
.panel-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;margin-bottom:16px}
.panel-heading h2 {font-size:18px;font-weight:600;line-height:1.4;margin:0}
.inspector,.preview-area {padding:var(--workspace-padding);min-width:0;overflow:auto}
.preview-area {display:flex;flex-direction:column;gap:var(--panel-gap)}
.preview-wrap {flex:1;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0d1015;border:1px solid #252e39;border-radius:8px;padding:20px}
.settings-section,.react-section {padding:14px 0;border-top:1px solid var(--line)}
.settings-section > summary,.react-section > summary {display:flex;align-items:center;gap:8px;min-height:28px;list-style:none;font-size:12px;font-weight:600;color:#dfe7ee;margin:0}
.settings-section > summary::-webkit-details-marker,.react-section > summary::-webkit-details-marker {display:none}
.settings-section > summary::before,.react-section > summary::before {content:'▸';color:var(--muted);flex:none}
.settings-section[open] > summary::before,.react-section[open] > summary::before {content:'▾'}
.settings-section[open] > summary {margin-bottom:12px}
.settings-section > summary .emitter-summary-tools {display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.settings-section > summary button {background:transparent;color:var(--muted)}
.settings-section > summary button:hover {background:#ffffff08;color:#dfe7ee}
.sidebar small {font-size:12px;line-height:1.6;color:var(--muted)}
#scene-settings {container-type:inline-size;container-name:scene-settings}
#instruments-settings {container-type:inline-size;container-name:instrument-inputs}
body.resizing-workspace .preview-area {pointer-events:none}
/* Canvas internals stay positioned by the Spatial renderer. */
#editor-viewport.preview-wrap {padding:0}
.workspace.preview-area .transport,.workspace.preview-area .hint {margin:0}
.workspace.preview-area .hint,.transport label {font-size:12px;line-height:1.6}
#scene-settings .checks label {font-size:12px}
body.preview {height:100dvh;padding:0}
body.preview .workspace-shell {display:block}
body.preview .workspace {display:block;padding:0}
@media(max-width:850px) {
  body.editor:not(.preview) {height:auto;min-height:100dvh;overflow:auto}
  .workspace-shell {display:flex;flex-direction:column;flex:none}
  .sidebar {max-height:65vh;border-bottom:1px solid var(--line)}
  #workspace-divider {display:none}
  .preview-area {min-height:500px}
  .preview-wrap {min-height:280px}
  .inspector,.preview-area {padding:20px}
  body.preview .preview-area {min-height:0}
}