/* File-oriented workbench. Hidden panes stay mounted so iframe and editor state survive. */
[hidden] { display: none !important; }
.project-heading { gap: 6px; flex-wrap: wrap; }
.project-tools { display:flex; gap:2px; margin-left:auto; }
.project-tools .icon-button { width:23px; height:24px; }
.project-row[aria-selected=true] { background:#33445f; }
.project-row:focus-visible { outline:1px solid var(--accent); outline-offset:-2px; }
.project-tree { overflow:auto; flex:1; min-height:0; }
.preview-tab>button:first-child { font-style:italic; }
.document-tab { flex-shrink:0; }
.document-tab>button[role=tab] { max-width:360px; }
.document-tab>button[role=tab]>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.document-mode-toolbar { display:flex; align-items:center; flex-shrink:0; min-height:32px; padding:0 8px; gap:3px; border-bottom:1px solid var(--line); background:var(--panel-2); }
.document-mode-toolbar button { padding:4px 10px; font-size:11px; border-radius:3px; }
.document-mode[aria-pressed=true] { background:#354d74; color:#e2edff; }
.document-mode-toolbar button:disabled { opacity:.35; cursor:default; }
.document-orientation { margin-left:auto; }
.document-workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); flex:1; min-height:0; min-width:0; overflow:hidden; container-type:inline-size; }
.document-workspace[data-mode=split] { grid-template-columns:minmax(0,var(--document-ratio,50%)) 5px minmax(0,1fr); }
.document-workspace[data-mode=split][data-orientation=down] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,var(--document-ratio,50%)) 5px minmax(0,1fr); }
.document-designers { min-width:0; min-height:0; overflow:hidden; }
.document-workspace>.editor-root { min-width:0; min-height:0; }
.pane-splitter { min-width:4px; min-height:4px; background:var(--line); cursor:col-resize; touch-action:none; z-index:2; }
.pane-splitter:hover,.pane-splitter:focus-visible { background:var(--accent); outline:none; }
.pane-splitter[aria-orientation=horizontal] { cursor:row-resize; }
.secondary-editor { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.secondary-toolbar { display:flex; align-items:center; gap:6px; min-height:32px; background:var(--panel); padding:3px 6px; }
.secondary-toolbar select { flex:1; min-width:0; background:var(--bg); color:inherit; border:1px solid var(--line); }
.secondary-toolbar button { padding:3px; }
.context-menu { position:fixed; z-index:1000; background:#2b2d30; color:var(--text); border:1px solid #525863; box-shadow:0 8px 32px #0009; border-radius:5px; padding:5px; min-width:205px; max-width:calc(100vw - 8px); max-height:calc(100vh - 8px); overflow:auto; }
.context-menu>button { display:flex; align-items:center; gap:7px; width:100%; padding:6px 9px; border-radius:3px; justify-content:flex-start; text-align:left; }
.context-menu>button:focus { background:#344d73; outline:none; }
.context-menu>button:disabled { opacity:.4; }
.context-menu kbd { margin-left:auto; font-size:9px; color:var(--muted); }
.context-menu hr { border:0; border-top:1px solid var(--line); margin:4px; }
.project-commands { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.project-commands button,.recent-projects button { padding:10px; border:1px solid var(--line); border-radius:4px; justify-content:flex-start; }
.recent-projects { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow:auto; margin-bottom:14px; }
.project-dialog select { background:var(--bg); }
.document-designers { container-type:inline-size; }
@media(max-width:620px) { .workspace-toolbar { overflow-x:auto; } #file-actions { flex-shrink:0; } .workspace-toolbar .toggle-label { display:none; } .document-mode-toolbar { gap:0; padding:0 2px; } .document-mode-toolbar button { font-size:10px; padding:5px 6px; } .document-orientation .icon { display:none; } .ui-session .studio-main-toolbar>select { max-width:80px; } .studio-settings summary { font-size:9px; } }

@media(max-width:620px) { .document-workspace[data-mode=split] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,var(--document-ratio,50%)) 5px minmax(0,1fr); } .document-workspace[data-mode=split][data-orientation=down] { grid-template-rows:minmax(0,var(--document-ratio,35%)) 5px minmax(0,1fr); } .document-workspace .document-splitter { cursor:row-resize; } }