/* Studio navigation chrome only. The editor shell owns the total panel width. */
.studio-left.studio-navigation { display:grid; grid-template-columns:52px minmax(0,1fr); min-width:0; min-height:0; padding:0; overflow:hidden; background:#fff; color:#171717; font:11px/1.4 "DM Sans",Arial,sans-serif; }
.studio-navigation .studio-navigation-rail { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; min-height:0; padding:8px 4px 12px; background:#5b5b5a; color:#fff; }
.studio-navigation .studio-navigation-rail .studio-button { flex:none; min-width:0; border:0; background:transparent; color:inherit; box-shadow:none; }
.studio-navigation .studio-navigation-home { display:flex; justify-content:center; width:40px; height:40px; padding:10px; margin-bottom:8px; }
.studio-navigation .studio-navigation-home .studio-icon { width:19px; height:23px; }
.studio-navigation .studio-navigation-rail-button { display:flex; flex-direction:column; gap:5px; width:44px; min-height:62px; padding:0; font-size:9px; line-height:12px; }
.studio-navigation .studio-navigation-rail-icon { display:grid; place-items:center; width:39px; height:39px; border:1px solid #d9d9d7; border-radius:7px; }
.studio-navigation .studio-navigation-rail-icon .studio-icon { width:19px; height:19px; filter:brightness(0) invert(1); }
.studio-navigation .studio-navigation-rail-button[aria-pressed=true] .studio-navigation-rail-icon { background:#cfe8fb; border-color:#cfe8fb; }
.studio-navigation .studio-navigation-rail-button[aria-pressed=true] .studio-navigation-rail-icon .studio-icon { filter:brightness(0); }
.studio-navigation .studio-navigation-rail-button:hover .studio-navigation-rail-icon { box-shadow:inset 0 0 0 1px #fff; }
.studio-navigation .studio-navigation-rail .studio-navigation-rail-ai { margin-top:auto; }
.studio-navigation .studio-navigation-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.studio-navigation .studio-navigation-project { position:relative; z-index:35; flex:none; min-width:0; padding:10px 10px 8px; border-bottom:1px solid #d1d1cf; }
.studio-navigation .studio-navigation-project-toggle { display:flex; gap:6px; justify-content:flex-start; width:100%; min-width:0; min-height:20px; margin:0; padding:0; border:0; border-radius:0; background:transparent; font-size:10px; line-height:16px; text-align:left; cursor:pointer; }
.studio-navigation [data-navigation-project-name] { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-navigation .studio-navigation-project-toggle .studio-icon { flex:none; width:6px; height:4px; }
.studio-navigation .studio-navigation-status { display:block; margin-top:3px; color:#858581; font-size:9px; line-height:13px; }
.studio-navigation .studio-navigation-project-menu { position:absolute; z-index:36; top:calc(100% - 2px); left:6px; right:6px; display:grid; gap:2px; padding:4px; border:1px solid #bdbdb9; border-radius:5px; background:#fff; box-shadow:0 5px 14px #0002; }
.studio-navigation .studio-navigation-project-menu .studio-button { width:100%; min-height:29px; padding:5px 7px; justify-content:flex-start; border:0; background:transparent; font-size:10px; }
.studio-navigation .studio-navigation-project-menu .studio-button:is(:hover,:focus-visible) { background:#d0e8fa; }
.studio-navigation .studio-navigation-scroll { flex:1; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:0 0 12px; }
.studio-navigation .studio-navigation-heading { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:30px; padding:4px 9px; }
.studio-navigation .studio-navigation-heading h2 { margin:0; font-size:10px; line-height:18px; font-weight:550; }
.studio-navigation .studio-navigation-heading>div { display:flex; gap:2px; }
.studio-navigation .studio-navigation-icon-button { display:grid; place-items:center; min-height:0; width:21px; height:22px; padding:4px; border:0; background:transparent; }
.studio-navigation .studio-navigation-icon-button .studio-icon { width:12px; height:12px; }
.studio-navigation .studio-navigation-display-list,.studio-navigation .studio-navigation-layer-list,.studio-navigation .studio-navigation-fields { list-style:none; padding:0; margin:0; }
.studio-navigation .studio-navigation-display { display:block; width:100%; min-width:0; min-height:26px; padding:5px 12px 5px 16px; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; font-size:10px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.studio-navigation .studio-navigation-display.is-selected { background:#cfe8fc; }
.studio-navigation .studio-website-page-settings { margin:10px 12px 14px 16px; }
.studio-navigation .studio-website-page-settings > summary { cursor:pointer; font-weight:600; }
.studio-navigation .studio-website-page-settings .studio-field { margin-top:10px; }
.studio-navigation .studio-website-page-settings input { width:100%; min-width:0; box-sizing:border-box; }
.studio-navigation .studio-website-page-settings .studio-muted { font-size:10px; line-height:1.5; }
.studio-navigation .studio-navigation-display:not(.is-selected):hover { background:#edf5fa; }
.studio-navigation .studio-navigation-layers { margin-top:10px; padding-top:6px; border-top:1px solid #d1d1cf; }
.studio-navigation .studio-navigation-layers-toggle { display:flex; gap:7px; min-height:22px; padding:0; border:0; background:transparent; font-size:10px; font-weight:550; }
.studio-navigation .studio-navigation-layers-toggle .studio-icon { width:6px; height:4px; }
.studio-navigation .studio-navigation-layers-toggle[aria-expanded=false] .studio-icon,.studio-navigation .studio-layer-toggle[aria-expanded=false] .studio-icon { transform:rotate(-90deg); }
.studio-navigation .studio-navigation-layer-row { display:flex; align-items:center; gap:2px; min-width:0; min-height:27px; padding:0 6px; margin:0; border-radius:0; }
.studio-navigation .studio-navigation-layer-row.is-selected { background:#cfe8fc; }
.studio-navigation .studio-navigation-layer-row:not(.is-selected):hover { background:#f0f6fa; }
.studio-navigation .studio-navigation-layer-row .studio-layer-toggle { display:grid; place-items:center; width:14px; min-width:14px; min-height:24px; flex:0 0 14px; padding:2px; border:0; background:transparent; }
.studio-navigation .studio-layer-toggle .studio-icon { width:6px; height:4px; }
.studio-navigation .studio-layer-toggle-space { width:14px; flex:0 0 14px; }
.studio-navigation .studio-navigation-layer-row .studio-navigation-layer-select { display:flex; align-items:center; gap:5px; flex:1; min-width:0; min-height:27px; padding:4px 2px; margin:0; border:0; background:transparent; color:inherit; font:inherit; font-size:10px; line-height:17px; text-align:left; cursor:pointer; }
.studio-navigation .studio-navigation-layer-select .studio-icon { flex:none; width:12px; height:12px; filter:brightness(0); opacity:.55; }
.studio-navigation .studio-navigation-layer-select>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-navigation .studio-navigation-fields { margin-left:16px; }
.studio-navigation .studio-navigation-fields[hidden],.studio-navigation .studio-navigation-layer-list[hidden] { display:none; }
.studio-navigation .studio-navigation-footer { margin-top:14px; padding:8px 10px 0; }
.studio-navigation .studio-navigation-brand { gap:6px; min-height:26px; padding:4px 0; border:0; background:transparent; color:#676963; font-size:10px; }
.studio-navigation .studio-navigation-brand .studio-icon { width:12px; height:12px; }
.studio-navigation .studio-navigation-search { display:flex; align-items:center; gap:5px; min-width:0; margin:2px 8px 8px; border:1px solid #bcbcb8; border-radius:4px; background:#fff; }
.studio-navigation .studio-navigation-search .studio-icon { flex:none; width:11px; height:11px; margin-left:6px; }
.studio-ui .studio-left.studio-navigation .studio-navigation-search input[data-control=navigation-search] { width:100%; min-width:0; min-height:26px; padding:4px 5px 4px 0; border:0; border-radius:0; background:transparent; font:inherit; font-size:10px; }
.studio-navigation .studio-navigation-empty { margin:0; padding:6px 12px; color:#7a7b76; font-size:10px; line-height:1.5; }
.studio-navigation .studio-navigation-tool-content { padding:14px 10px; }
.studio-navigation .studio-navigation-tool-content .studio-panel-title { margin-bottom:10px; font-size:11px; }
.studio-navigation .studio-navigation-description { margin:-5px 0 18px; color:#777972; font-size:10px; }
.studio-navigation .studio-assets-panel { min-width:0; }
.studio-navigation .studio-assets-heading { padding:12px; }
.studio-navigation .studio-assets-heading h2 { margin:0; color:#171717; font-size:11px; line-height:16px; font-weight:550; }
.studio-navigation .studio-assets-heading p { margin:4px 0 0; color:#777972; font-size:9px; line-height:14px; }
.studio-navigation .studio-assets-group { border-top:1px solid #d1d1cf; }
.studio-navigation .studio-assets-group>summary { display:flex; align-items:center; gap:7px; min-width:0; min-height:34px; padding:8px 12px; list-style:none; cursor:pointer; }
.studio-navigation .studio-assets-group>summary::-webkit-details-marker { display:none; }
.studio-navigation .studio-assets-group>summary>.studio-icon { flex:none; width:6px; height:4px; transform:rotate(-90deg); }
.studio-navigation .studio-assets-group[open]>summary>.studio-icon { transform:none; }
.studio-navigation .studio-assets-group h3 { min-width:0; margin:0; color:#171717; font-size:10px; line-height:16px; font-weight:550; }
.studio-navigation .studio-assets-count { margin-left:auto; color:#8a8c86; font-size:9px; font-variant-numeric:tabular-nums; }
.studio-navigation .studio-assets-list { display:grid; grid-template-columns:minmax(0,1fr); gap:1px; list-style:none; padding:0 6px 8px; margin:0; }
.studio-navigation .studio-assets-list>li { min-width:0; margin:0; padding:0; }
.studio-navigation .studio-assets-panel .studio-asset-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; min-width:0; min-height:28px; padding:5px 7px; border:0; border-radius:4px; background:transparent; color:#292929; font-size:10px; font-weight:400; line-height:16px; text-align:left; box-shadow:none; cursor:pointer; }
.studio-navigation .studio-asset-row>.studio-icon { flex:none; width:13px; height:13px; filter:brightness(0); opacity:.6; }
.studio-navigation .studio-asset-label { min-width:0; overflow-wrap:anywhere; }
.studio-navigation .studio-asset-plus { display:grid; place-items:center; flex:none; width:16px; height:16px; margin-left:auto; opacity:.4; }
.studio-navigation .studio-asset-plus .studio-icon { width:9px; height:9px; filter:brightness(0); }
.studio-navigation .studio-assets-panel .studio-asset-row:hover,.studio-navigation .studio-assets-panel .studio-asset-row:focus-visible { background:#edf5fa; }
.studio-navigation .studio-assets-panel .studio-asset-row:active { background:#cfe8fc; }
.studio-navigation .studio-asset-row:is(:hover,:focus-visible) .studio-asset-plus { opacity:1; }
.studio-navigation .studio-assets-panel :is(.studio-asset-row,summary):focus-visible { outline:2px solid #80aed0!important; outline-offset:-2px; }
.studio-navigation .studio-assets-saved { padding:8px 6px; border-top:1px solid #d1d1cf; }
.studio-navigation .studio-navigation-tool-content .studio-ai-suggestion { min-width:0; white-space:normal; }
.studio-navigation :is(button,input):focus-visible { outline:2px solid #80aed0; outline-offset:-2px; }
@media(max-width:950px) { .studio-left.studio-navigation { grid-template-columns:44px minmax(0,1fr); } .studio-navigation .studio-navigation-rail { padding-inline:2px; } .studio-navigation .studio-navigation-rail-button { width:40px; } .studio-navigation .studio-navigation-rail-icon { width:35px; height:37px; } }
@media(pointer:coarse) { .studio-navigation .studio-navigation-display,.studio-navigation .studio-navigation-layer-row .studio-navigation-layer-select { min-height:40px; } .studio-navigation .studio-navigation-layer-row .studio-layer-toggle { min-height:40px; width:24px; min-width:24px; flex-basis:24px; } .studio-navigation .studio-navigation-icon-button { width:30px; height:36px; } .studio-navigation .studio-navigation-project-menu .studio-button { min-height:40px; } }
@media(pointer:coarse) { .studio-navigation .studio-assets-panel .studio-asset-row,.studio-navigation .studio-assets-group>summary { min-height:44px; } .studio-navigation .studio-assets-panel .studio-asset-row { font-size:11px; } }

/* The dedicated workspace owns the persistent rail; the canonical page/layer
   controls remain in their existing independently scrolling panel. */
.studio-editor .studio-left.studio-navigation { grid-template-columns:minmax(0,1fr); }
.studio-editor .studio-navigation > .studio-navigation-rail { display:none; }