/* Compact shell and project navigation; document surfaces keep their own palette. */
body:not(.is-editor) { --workspace-canvas-bg: #f5f5f5; }
html[data-workspace-theme=dark] body:not(.is-editor) { --workspace-canvas-bg: #171717; }
body:not(.is-login) .topbar { height:46px; min-height:46px; padding:0 20px; border-bottom:0; box-shadow:none; }
body:not(.is-login) .tabbar { --shell-tab-width:140px; --shell-tab-gap:2px; min-height:35px; top:46px; padding:4px 12px 0; border-bottom:1px solid var(--workspace-border, var(--border, #e4e4e4)); gap:8px; }
.tabbar .wtab-list { gap:var(--shell-tab-gap,2px); }
/* One shared boundary below the tabs; the canvas toolbar adds no second line. */
body:not(.is-editor) .cv-root .cv-topbar { border-top:0; border-bottom:0; box-shadow:none; }
.topbar .top-icon-btn { width:30px; height:30px; border-radius:8px; }
/* Shell controls keep the system theme while the PS editor is active. */
.topbar { --workspace-muted:#858585; --workspace-soft:#ededed; --workspace-text:#292929; --workspace-surface:#fff; background:var(--workspace-surface); color:var(--workspace-text); color-scheme:light; }
html[data-workspace-theme=dark] .topbar { --workspace-muted:#a6a6a6; --workspace-soft:#303030; --workspace-text:#ededed; --workspace-surface:#242424; color-scheme:dark; }
.topbar .top-icon-btn { border:0; background:transparent; color:var(--workspace-muted); cursor:pointer; }
.topbar .top-icon-btn:hover,.topbar .top-icon-btn.active { background:var(--workspace-soft); color:var(--workspace-text); }
.topbar .top-icon-btn:focus-visible { outline:2px solid var(--workspace-muted); outline-offset:2px; }
/* Pointer clicks keep controls quiet; keyboard navigation retains its focus ring. */
:is(.topbar,.sidebar) :is(button,a,summary):focus:not(:focus-visible),
.tabbar :is(button,[tabindex]):focus:not(:focus-visible),
body:not(.is-editor) :is(.cv-root,.vw-root) button:focus:not(:focus-visible) { outline:none; box-shadow:none; }
.sidebar :is(button,a):focus-visible { outline:2px solid #a6a6a6; outline-offset:2px; }
.topbar .top-actions { gap:5px; }
.topbar .env-badge { font-size:11px; }
/* Keep the environment and account readable; crowded action rows scroll locally. */
body:not(.is-login) .topbar .env-slot { flex:none; }
body:not(.is-login) .topbar .env-badge { flex:none; white-space:nowrap; }
body:not(.is-login) .topbar .material-top-nav.mtn-nav { min-width:142px; }
body:not(.is-login) .topbar:has(.mtn-nav:not([hidden]))>.topbar-right { flex-shrink:1; min-width:256px; }
body:not(.is-login) .topbar .topbar-right { min-width:256px; }
body:not(.is-login) .topbar .top-actions { flex:0 1 auto; min-width:38px; padding:4px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scroll-padding-inline:max(4px,calc(50% - 15px)); }
body:not(.is-login) .topbar .top-actions>:is(.top-icon-btn,.workspace-network-indicator) { flex:none; }
body:not(.is-login) .topbar .top-actions .top-icon-btn { scroll-margin-inline:4px; }
body:not(.is-login) .topbar .topbar-user { flex:none; }
body:not(.is-login) .topbar .account-name { max-width:128px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The topbar contains fixed descendants. Keep hover text below it so scrolling
   never clips the label or leaves it anchored outside the visible action row. */
@media(hover:hover){
  body:not(.is-login) .topbar .top-actions .top-icon-btn:hover::after { position:fixed; inset:50px 12px auto auto; transform:none; }
}
@media(max-width:850px){
  body:not(.is-login) .topbar .material-top-nav.mtn-nav { min-width:112px; }
  body:not(.is-login) .topbar .mtn-label { display:none; }
  body:not(.is-login) .topbar .account-name { max-width:72px; }
  body:not(.is-login) .topbar:has(.mtn-nav:not([hidden]))>.topbar-right,
  body:not(.is-login) .topbar .topbar-right { min-width:200px; }
}
@media(max-width:700px){
  body:not(.is-login) .topbar:has(.mtn-nav:not([hidden]))>.topbar-right,
  body:not(.is-login) .topbar .topbar-right { min-width:78px; }
}
@media(max-width:420px){
  body:not(.is-login) .topbar .material-top-nav.mtn-nav { min-width:104px; }
  body:not(.is-login) .topbar .env-badge { margin-left:0; padding-inline:6px; }
}
.side-head { min-height:46px; padding:8px 14px; border-bottom:0; }
.side-logo-img { width:28px; height:28px; }
.sidebar { border-right:0; box-shadow:none; }
.side-nav { scrollbar-width:none; }
.side-nav::-webkit-scrollbar { display:none; width:0; }
.side-item { color:#c4c4c4; }
.side-group-head { color:#7f7f7f; }
body:not(.is-login) .wtab { width:var(--shell-tab-width,140px); min-width:var(--shell-tab-width,140px); max-width:var(--shell-tab-width,140px); height:30px; gap:5px; padding:5px 9px; font-size:11.5px; border-radius:7px 7px 0 0; }
.wtab .wtab-close { width:16px; height:16px; border-radius:4px; }
.wtab.active::after { left:9px; right:9px; }
body:not(.is-editor) .wtab:hover { background:var(--workspace-soft); color:var(--workspace-text); }
body:not(.is-editor) .wtab.active { background:var(--workspace-surface); color:var(--workspace-text); }
.tabbar-actions { align-self:center; padding-bottom:4px; }
.tabbar-actions:empty { display:none; }
/* A narrow insertion marker keeps native tab dragging separate from activation. */
.wtab[draggable=true],.overflow-tab[draggable=true] { cursor:grab; }
#tabBar.is-tab-dragging,.is-tab-dragging .wtab,.is-tab-dragging .overflow-tab { cursor:grabbing; }
#tabBar .is-tab-drag-source { opacity:.45; }
#tabBar :is(.is-tab-drop-before,.is-tab-drop-after) { position:relative; }
#tabBar :is(.is-tab-drop-before,.is-tab-drop-after)::before { content:''; position:absolute; z-index:2; left:-3px; top:5px; bottom:5px; width:2px; border-radius:2px; background:currentColor; pointer-events:none; }
#tabBar .wtab.is-tab-drop-after::before { left:auto; right:-3px; }
#tabBar .overflow-tab:is(.is-tab-drop-before,.is-tab-drop-after)::before { left:6px; right:6px; top:-2px; bottom:auto; width:auto; height:2px; }
#tabBar .overflow-tab.is-tab-drop-after::before { top:auto; bottom:-2px; }
body:not(.is-editor) .tabs-more { display:flex; align-items:center; gap:5px; padding:0 8px; height:28px; max-width:48px; color:var(--workspace-muted); }
body:not(.is-editor) .tabs-more:hover,body:not(.is-editor) .tabs-overflow.open .tabs-more { background:var(--workspace-soft); color:var(--workspace-text); }
.tabs-more small { font-size:10px; }
body:not(.is-editor) .tabs-dropdown { top:calc(100% + 8px); width:280px; max-height:min(65dvh,560px); padding:6px; background:var(--workspace-surface); color:var(--workspace-text); border-color:var(--workspace-border); border-radius:12px; box-shadow:0 12px 38px #0002; }
.tabs-overflow:not(.open) .tabs-dropdown { display:none; }
.tabs-overflow.open .tabs-dropdown { display:block; }
.tabs-dropdown-list { display:flex; flex-direction:column; gap:2px; }
body:not(.is-editor) .overflow-tab { padding:2px; color:var(--workspace-text); }
body:not(.is-editor) .overflow-tab:hover { background:var(--workspace-soft); }
body:not(.is-editor) .overflow-tab>button:first-child { color:var(--workspace-text); font-size:12px; line-height:1.5; padding:8px; }
.overflow-tab>button:first-child .line-icon { flex:none; color:var(--workspace-muted); }
.overflow-tab>button:first-child span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body:not(.is-editor) .overflow-tab .wtab-close { color:var(--workspace-muted); }
body:not(.is-editor) .tabs-clear-others { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin-bottom:5px; border:0; border-bottom:1px solid var(--workspace-border); border-radius:6px 6px 0 0; background:transparent; color:#d55b5b; font:inherit; font-size:12px; cursor:pointer; }
body:not(.is-editor) .tabs-clear-others:hover { background:color-mix(in srgb,#d55b5b 8%,var(--workspace-surface)); }
html[data-workspace-theme=dark] body:not(.is-editor) .tabs-clear-others { color:#f08a8a; }
body:not(.is-editor) .tabs-clear-others:disabled { opacity:.45; cursor:wait; }
body:not(.is-editor) :is(.tabs-more,.tabs-clear-others,.overflow-tab button):focus-visible { outline:2px solid var(--workspace-muted); outline-offset:1px; }
body:not(.is-editor) .container:has(>.tab-pane.active>.projects-page) { padding:18px 32px 24px; }
body:not(.is-editor) .projects-page { padding:0 0 64px; }
body:not(.is-editor) .projects-page .project-heading { gap:10px; margin-bottom:22px; }
body:not(.is-editor) .projects-page .project-heading h2 { font-size:20px; letter-spacing:-.35px; }
body:not(.is-editor) .projects-page .project-type-heading { gap:20px; }
body:not(.is-editor) .projects-page .project-type.active:after { height:2px; bottom:-5px; }
body:not(.is-editor) .projects-page .project-filters :is(input,select) { height:34px; padding:6px 10px; font-size:12px; border-radius:8px; }
body:not(.is-editor) .projects-page .project-total { font-size:11px; }
body:not(.is-editor) .projects-page .project-icon:hover { background:var(--workspace-soft); }
@media(max-width:700px){
  body:not(.is-login) .topbar { padding:0 10px; }
  body:not(.is-login) .tabbar { padding-left:8px; padding-right:8px; }
  body:not(.is-editor) .container:has(>.tab-pane.active>.projects-page) { padding:14px 16px 20px; }
  body:not(.is-editor) .projects-page .project-type-heading { gap:14px; }
  body:not(.is-editor) .projects-page .project-heading h2 { font-size:18px; }
}