@import url("/workspace-shared/workspace-tokens.css");
@import url("/workspace-shared/platform-identity.css");
/* Platform shell only. Work-area components retain their own contracts. */
#app.page{padding:0}
.studio-shell{--navigation-width:calc(var(--brand-rail-width) + var(--sidebar-width));min-height:100dvh}
.studio-shell[data-collapsed=true]{--navigation-width:var(--brand-rail-width)}
.studio-navigation{position:fixed;inset:0 auto 0 0;width:var(--navigation-width);display:flex;z-index:30;border-right:var(--rule) solid var(--inset-2)}
.brand-rail{width:var(--brand-rail-width);flex:none;background:var(--shell-rail-bg);display:flex;align-items:center;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s2)}
.platform-home{display:grid;place-items:center;width:var(--brand-mark-size);height:var(--brand-mark-size);color:var(--ink);font-size:var(--t-3);font-weight:700;text-decoration:none;flex:none}
.rail-brands{display:flex;flex-direction:column;align-items:center;gap:var(--s3);width:100%;overflow-y:auto;min-height:0;padding:var(--s2) 0}
.brand-button{width:var(--brand-mark-size);height:var(--brand-mark-size);min-height:var(--brand-mark-size);border-radius:var(--r);background:var(--shell-sidebar-bg);color:var(--ink-2);font-size:var(--t-small);font-weight:500;position:relative}
.brand-button:hover{box-shadow:inset 0 0 0 var(--rule) var(--ink-3)}
.brand-button[aria-pressed=true]{background:var(--ink);color:var(--card);box-shadow:0 0 0 var(--focus-width) var(--shell-rail-bg),0 0 0 var(--selection-width) var(--ink-3)}
.rail-bottom{margin-top:auto}
.shell-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--nav-control-size);height:var(--nav-control-size);min-height:var(--nav-control-size);border-radius:var(--nav-radius);color:var(--ink-2);flex:none}
.shell-icon:hover{color:var(--ink);background:var(--shell-hover)}
.studio-shell .ico{width:var(--shell-icon-size);height:var(--shell-icon-size);flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.workspace-sidebar{width:var(--sidebar-width);min-width:0;background:var(--shell-sidebar-bg);display:flex;flex-direction:column;padding:var(--s3) var(--s3) var(--s4)}
.studio-shell[data-collapsed=true] .workspace-sidebar{display:none}
.workspace-heading{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s2);margin-bottom:var(--s4)}
.workspace-heading strong{font-size:var(--t-4);font-weight:500;overflow-wrap:anywhere;display:block}
.workspace-heading span{display:block;color:var(--ink-3);font-size:var(--t-label);margin-top:var(--s1)}
.sidebar-search{display:flex;gap:var(--s2);align-items:center;padding:var(--s2);font-size:var(--t-small);color:var(--ink-3);border-radius:var(--nav-radius);text-align:left;min-height:var(--control-height)}
.sidebar-search:hover{background:var(--shell-hover);color:var(--ink)}
.sidebar-search kbd{margin-left:auto;font:inherit;font-size:var(--t-label);white-space:nowrap}
.project-switcher{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3);margin:var(--s3) 0 var(--s4);background:var(--shell-active);border:var(--rule) solid var(--ink-4);border-radius:var(--nav-radius);width:100%;text-align:left;flex:none}
.project-switcher>span{min-width:0}.project-switcher small{display:block;color:var(--ink-3);font-size:var(--t-label);margin-bottom:var(--s1)}
.project-switcher strong{font-size:var(--t-small);font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.project-switcher:hover{border-color:var(--ink-3)}
.workspace-areas{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:var(--s1)}
.nav-group+.nav-group{margin-top:var(--nav-group-gap)}
.nav-group h2{font-size:var(--t-label);font-weight:400;color:var(--ink-3);margin:0 0 var(--s2);padding:0 var(--s2)}
.workspace-link{display:flex;align-items:center;gap:var(--s3);min-height:var(--control-height);padding:var(--s2);border-radius:var(--nav-radius);font-size:var(--t-small);text-decoration:none;color:var(--ink-2)}
.workspace-link:hover{background:var(--shell-hover);color:var(--ink)}
.workspace-link[aria-current=page]{background:var(--shell-active);color:var(--ink);font-weight:500}
.workspace-link[aria-current=page] .ico{stroke-width:2}
.nav-guidance{font-size:var(--t-small);color:var(--ink-3);padding:var(--s2)}
.sidebar-footer{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:center;padding:var(--s4) var(--s2) 0;margin-top:var(--s4);border-top:var(--rule) solid var(--inset-2);color:var(--ink-3);font-size:var(--t-label)}
.sidebar-footer .wordmark{width:var(--sidebar-footer-mark);height:auto}.sidebar-footer small{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-label)}
.studio-workbench{margin-left:var(--navigation-width);min-width:0;container:workspace / inline-size}
.workspace-topbar{height:var(--workspace-bar-height);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s5);border-bottom:var(--rule) solid var(--inset-2);position:sticky;top:0;z-index:20;background:var(--ground)}
.workspace-breadcrumb{display:flex;align-items:center;gap:var(--s3);min-width:0;font-size:var(--t-small);color:var(--ink-3)}
.workspace-breadcrumb>a{white-space:nowrap;text-decoration:none}.workspace-breadcrumb>a:hover{text-decoration:underline;color:var(--ink)}
.workspace-breadcrumb>span{display:flex;gap:var(--s3);align-items:center;min-width:0}.workspace-breadcrumb .ico{transform:rotate(-90deg);width:var(--s3);height:var(--s3)}
.crumb-project{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--picker-width)}.crumb-area{color:var(--ink);white-space:nowrap;flex:none}
.studio-workbench #main{max-width:var(--workspace-max);margin:0 auto;padding:var(--s6) var(--s5) var(--s7);min-width:0}
.studio-workbench #main:focus{outline:none}.studio-workbench #main h1{font-size:var(--t-3)}
.workspace-picker{width:var(--picker-width);max-width:calc(100vw - var(--s6));max-height:calc(100dvh - var(--s8));padding:var(--s5);background:var(--card);color:var(--ink);border:var(--rule) solid var(--ink-4);border-radius:var(--r-m);box-shadow:var(--shadow-lift)}
.workspace-picker::backdrop{background:var(--shell-backdrop)}
.picker-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.picker-heading h2{font-size:var(--t-3);font-weight:500;margin:0}
.workspace-search{width:100%;border:var(--rule) solid var(--ink-4);border-radius:var(--nav-radius);padding:var(--s3);background:var(--inset);color:var(--ink);font:inherit}
.workspace-results{max-height:var(--picker-results-max);overflow:auto;min-height:var(--s8)}
.workspace-result{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s3);min-height:var(--workspace-bar-height);text-align:left;text-decoration:none;border-radius:var(--nav-radius)}
.workspace-result:hover,.workspace-result:focus-visible{background:var(--inset)}.workspace-result>span{min-width:0}
.workspace-result strong{display:block;font-weight:500;font-size:var(--t-body);overflow-wrap:anywhere}.workspace-result small{display:block;color:var(--ink-3);font-size:var(--t-label);overflow-wrap:anywhere}.workspace-result>small{margin-left:auto;flex:none}
.brand-monogram{display:grid;place-items:center;flex:none;width:var(--brand-mark-size);height:var(--brand-mark-size);background:var(--inset-2);border-radius:var(--nav-radius);font-size:var(--t-small)}
.picker-empty{color:var(--ink-3);font-size:var(--t-small);padding:var(--s4)}
.mobile-close{display:none}.nav-scrim{position:fixed;inset:0;z-index:29;background:var(--shell-backdrop);width:100%;height:100%}
.skip-content{position:fixed;top:var(--s2);left:var(--s2);z-index:100;padding:var(--s3);background:var(--ink);color:var(--card);transform:translateY(-200%)}.skip-content:focus{transform:none}

@media(max-width:900px){
 .studio-shell,.studio-shell[data-collapsed=true]{--navigation-width:0px}
 .studio-navigation{display:none;width:calc(var(--brand-rail-width) + var(--sidebar-width));max-width:calc(100vw - var(--s7));border:0;box-shadow:var(--shadow-lift)}
 .studio-navigation[data-open]{display:flex}.studio-shell[data-collapsed=true] .workspace-sidebar{display:flex}.workspace-sidebar{flex:1;min-width:0;padding-top:var(--s4)}
 .mobile-close{display:flex}.workspace-heading{padding-right:0}.workspace-heading>div{min-width:0}.workspace-topbar{padding:0 var(--s4)}
 .studio-workbench #main{padding:var(--s5) var(--s4) var(--s7)}.workspace-breadcrumb{gap:var(--s2)}.workspace-breadcrumb>span{gap:var(--s2)}.crumb-area{display:none!important}
}
@media(prefers-reduced-motion:reduce){.studio-shell *{scroll-behavior:auto;transition:none}}
.shell-utilities{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex:none}
.workspace-breadcrumb>span>a,.workspace-breadcrumb>span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.workspace-breadcrumb a{text-decoration:none}.workspace-breadcrumb a:hover{text-decoration:underline}
.crumb-current{color:var(--ink)}
.brand-button[data-aggregate]{margin-top:var(--s4);border:var(--rule) solid var(--ink-4)}
.workspace-areas{margin-top:var(--s4)}
@media(max-width:600px){.workspace-breadcrumb .crumb-parent:not(:nth-last-child(2)){display:none}.workspace-breadcrumb{flex:1}.workspace-breadcrumb>span{flex:1}.workspace-topbar{gap:var(--s2)}}

/* Stable utility and content alignment across application adapters. */
.workspace-topbar .workspace-breadcrumb{border-left:var(--rule) solid var(--inset-2);padding-left:var(--s3)}
.workspace-topbar .shell-icon,.brand-rail .shell-icon{min-width:var(--platform-target);min-height:var(--platform-target)}
.studio-shell :is(button,a,input):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.studio-shell .workspace-link span{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){
 .workspace-breadcrumb .crumb-parent{display:none!important}
 .workspace-breadcrumb .crumb-current{display:flex;min-width:0}
 .workspace-topbar{gap:var(--s1);padding-inline:var(--s2)}
 .workspace-topbar .workspace-breadcrumb{padding-left:var(--s2)}
 .application-trigger{font-size:var(--t-small);gap:var(--s1);padding-inline:var(--s1)}
}
