/* A generous code surface, with project navigation outside the editing area. */
.studio-layout { grid-template-columns:220px minmax(0,1fr); gap:18px; }
.content:has(.tab-content.active .studio-layout) { padding-top:24px; }
.content:has(.tab-content.active .studio-layout)>.view-heading { margin-bottom:16px; }
.content:has(.tab-content.active .studio-layout)>.view-heading h1 { font-size:28px; }
.content:has(.tab-content.active .studio-layout) .admin-section-nav { margin-top:12px; }
.studio-workbench { grid-template-columns:minmax(0,1fr); }
#studio-versions { position:static; max-height:none; overflow:visible; }
.studio-sidebar { max-height:calc(100dvh - 140px); overflow:auto; scrollbar-width:thin; }
.studio-project { padding:12px; margin:8px 0; }
.studio-project span { line-height:1.6; }
.studio-explorer { border-block:1px solid var(--border); margin:18px 0; padding:10px 0; }
.studio-explorer summary { padding:8px 0; font-size:13px; font-weight:650; cursor:pointer; }
.studio-tree-file { display:flex; align-items:center; gap:9px; width:100%; padding:9px 8px; border:0; border-radius:5px; background:transparent; color:var(--text-primary); text-align:left; cursor:pointer; font:13px/1.5 var(--font-mono); }
.studio-tree-file>span:first-child { color:var(--work-accent); min-width:22px; flex:none; }
.studio-tree-file>span:last-child { overflow-wrap:anywhere; min-width:0; }
.studio-tree-file:hover,.studio-tree-file.selected { background:var(--work-tint); }
.studio-tree-file.selected { box-shadow:inset 2px 0 var(--work-accent); }
.studio-main { position:relative; }
.studio-process { margin-bottom:12px; }
.studio-process>span { padding:10px 14px; font-size:13px; }
.studio-process small { display:none; }
.studio-name-row { margin-bottom:12px; }
.studio-name-row input { font-size:17px; min-height:42px; }
.studio-project-heading { gap:8px; }
.studio-project-heading h2 { font-size:17px; }
.studio-project-heading .btn { font-size:13px; padding-inline:10px; }
.studio-code-tools { gap:8px; }
#studio-files { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
#studio-files .studio-file { flex:none; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-code-tools form { flex-basis:230px; }
.studio-code .monaco-editor { outline:none; }
.studio-code .monaco-editor textarea { min-height:0; padding:0; border:0; border-radius:0; box-shadow:none; }
.studio-editor-loading { padding:30px; color:var(--text-helper); }
.studio-assist-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:0 0 12px; font-size:12px; color:var(--text-helper); }
.studio-diagnostics { border:1px solid var(--border); border-radius:7px; margin:0 0 14px; background:var(--bg-page); }
.studio-diagnostics summary { cursor:pointer; padding:10px 12px; font-size:13px; font-weight:650; }
.studio-diagnostics summary span { margin-left:8px; padding:2px 7px; border-radius:4px; background:var(--bg-card); font:12px var(--font-mono); }
.studio-diagnostics>p { padding:0 12px 12px; margin:0; color:var(--text-helper); font-size:13px; }
.studio-diagnostics>button { display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-top:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); cursor:pointer; font-size:13px; overflow-wrap:anywhere; }
.studio-diagnostics>button strong { color:var(--work-accent); }
.studio-diagnostics>button:hover { background:var(--work-tint); }
.studio-quick-open { position:absolute; z-index:20; top:160px; left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 32px)); padding:16px; border:1px solid var(--work-line); border-radius:10px; background:var(--bg-card); box-shadow:0 16px 55px #0004; }
.studio-quick-open[hidden] { display:none; }
.studio-quick-open>div { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.studio-quick-open label { font-size:14px; font-weight:650; }
.studio-quick-open input { width:100%; min-height:40px; padding:8px 12px; background:var(--bg-page); color:var(--text-primary); border:1px solid var(--border); border-radius:6px; }
.studio-quick-open nav { max-height:280px; overflow:auto; margin-top:10px; }
.studio-quick-file { display:block; width:100%; padding:12px; text-align:left; background:transparent; color:var(--text-primary); border:0; border-radius:5px; cursor:pointer; font:13px/1.6 var(--font-mono); overflow-wrap:anywhere; }
.studio-quick-file:hover,.studio-quick-file:focus-visible { background:var(--work-tint); }
.studio-focused #studio-editor { height:max(360px,calc(100dvh - 300px)) !important; }
.studio-focused .studio-assist-bar { margin-top:0; }
.studio-focused .studio-main { padding:16px; }
.studio-focused .studio-quick-open { top:90px; }
@media(prefers-reduced-motion:no-preference) { .studio-tree-file,.studio-quick-file { transition:background .13s ease; } .studio-quick-open { animation:studio-open .15s ease-out; } @keyframes studio-open { from { opacity:0; translate:0 -5px; } to { opacity:1; translate:0 0; } } }
@media(max-width:1050px) { .studio-layout { grid-template-columns:minmax(0,1fr); } .studio-sidebar { max-height:none; overflow:visible; position:static; } .studio-explorer { margin:12px 0; } #studio-file-tree { display:flex; flex-wrap:wrap; gap:4px; max-height:180px; overflow:auto; } .studio-tree-file { width:auto; max-width:100%; } }
@media(max-width:600px) { .studio-process { display:flex; overflow:auto; } .studio-process>span { min-width:190px; border:0; border-right:1px solid var(--border); } .studio-code-tools form { flex-basis:100%; } .studio-focused { padding:8px; } .studio-quick-open { top:180px; } .studio-editor-footer { justify-content:flex-start; } }