@layer layout{
*{box-sizing:border-box}
html,body,#app{min-height:100%;margin:0}
.app-shell{min-height:100vh;padding-inline-start:var(--sidebar-width)}
.shell-main{min-width:0;min-height:100vh}
.sidebar{position:fixed;z-index:var(--z-sidebar);inset-block:0;inset-inline-start:0;width:var(--sidebar-width);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--color-nav),var(--color-nav-deep));color:var(--color-nav-text);border-inline-end:1px solid var(--color-nav-border)}
.sidebar-brand{height:var(--topbar-height);display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);border-bottom:1px solid var(--color-nav-border)}
.sidebar-brand img{width:var(--brand-mark-size);height:var(--brand-mark-size);object-fit:contain}
.sidebar-brand-copy{display:grid;min-width:0}
.sidebar-brand-copy strong{font-size:var(--type-control);line-height:var(--line-compact);color:var(--color-white);white-space:nowrap}
.sidebar-brand-copy span{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--color-nav-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-nav{padding:var(--space-2);display:grid;gap:var(--space-1);overflow:auto}
.nav-item{position:relative;min-height:var(--nav-row-height);display:grid;grid-template-columns:var(--nav-icon-column) minmax(0,1fr);align-items:center;gap:var(--space-2);padding:0 var(--space-2);border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--color-nav-text);font-size:var(--type-control);font-weight:620;text-align:start}
.nav-item:hover{background:var(--color-nav-hover);color:var(--color-white)}
.nav-item.active{background:var(--color-nav-selected);border-color:var(--color-nav-border);color:var(--color-white)}
.nav-item.active::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--space-2));width:var(--nav-active-mark-width);height:var(--nav-active-mark-height);background:var(--color-accent);border-radius:var(--radius-pill)}
.sidebar-footer{margin-top:auto;padding:var(--space-2);border-top:1px solid var(--color-nav-border)}
.topbar{height:var(--topbar-height);position:sticky;z-index:var(--z-topbar);top:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 var(--page-gutter);background:var(--color-topbar);border-bottom:1px solid var(--color-border);backdrop-filter:blur(10px)}
.topbar-start,.topbar-end,.topbar-page-actions,.responsive-page-actions{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.topbar .menu-button{display:none}
.mobile-bottom-nav{display:none}
.main-content{max-width:none;margin:0;padding:var(--page-gutter)}
#page{min-width:0}

/* Global composition modes. Pages choose a mode; components do not change. */
body[data-layout="document"] #page{width:min(100%,var(--page-max-document));margin-inline:auto;display:grid;gap:var(--page-gap-document)}
body[data-layout="catalog"] #page{width:min(100%,var(--page-max-catalog));margin-inline:auto;display:grid;gap:var(--page-gap-catalog)}
body[data-layout="workspace"] #page{width:100%;display:grid;gap:var(--page-gap-workspace)}

.workspace-header,.ui-workspace-header{min-height:var(--workspace-header-min-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0;padding:var(--space-1) 0;background:transparent;border:0}
.workspace-heading{min-width:0}
.workspace-eyebrow{margin:0;color:var(--color-accent);font-size:var(--type-micro);font-weight:750;letter-spacing:.05em;text-transform:uppercase}
.workspace-title-row{display:flex;align-items:center;gap:var(--space-2)}
.workspace-title-row h1{margin:0;color:var(--color-ink);font-size:var(--type-page);font-weight:740}
.workspace-description{max-width:760px;margin:var(--space-1) 0 0;color:var(--color-ink-muted);font-size:var(--type-caption)}
.workspace-meta{display:inline-flex;align-items:center;min-height:var(--meta-height);padding:0 var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-muted);color:var(--color-ink-muted);font-size:var(--type-caption)}
.workspace-actions{display:flex;align-items:center;gap:var(--space-2)}

/* Shared composition helpers */
.ui-title-row{display:flex;align-items:center;gap:var(--space-2)}
.ui-form{display:grid}
.ui-actionbar{justify-content:flex-end}
.ui-toolbar{flex-wrap:nowrap}
.page-facet-dock,.page-facet-shell{gap:var(--space-2)}
.page-facet-nav,.page-facet-pills{gap:var(--space-1)}
.page-facet-mobile-search{display:none}
.page-action-mobile-only{display:none}
.page-action-overflow{display:none}
.toast-host{z-index:var(--z-toast)}

/* Modal geometry */
.startup,.login-shell{min-height:100vh;display:grid;place-items:center}
.startup{align-content:center}
.startup img{width:68px;height:68px;object-fit:contain}
.login-card{width:min(430px,100%);position:relative}
.login-card>img{width:64px;height:64px;object-fit:contain}
.login-card small{display:block}
.modal-backdrop{position:fixed;z-index:var(--z-modal);inset:0;display:grid;place-items:center}
.modal{position:relative;width:min(540px,100%);max-height:calc(100vh - 32px);overflow:auto}
.modal-close{position:absolute;z-index:2;inset-block-start:10px;inset-inline-end:10px}

@media(max-width:760px){
  :root{--sidebar-width:286px;--topbar-height:56px;--page-gutter:8px;--page-gap:8px;--surface-pad:10px;--control-height:44px;--control-height-compact:44px;--control-height-comfortable:44px}
  .app-shell{padding-inline-start:0;padding-bottom:var(--mobile-bottom-nav)}
  .sidebar{transform:translateX(-102%)}
  [dir="rtl"] .sidebar{transform:translateX(102%)}
  .sidebar.open{transform:translateX(0)}
  .topbar{padding-inline:var(--page-gutter);gap:var(--space-1)}
  .topbar .menu-button{display:grid}
  .main-content{padding:var(--page-gutter)}
  .mobile-bottom-nav{display:flex}
  body[data-layout] #page{width:100%;margin:0;gap:var(--page-gap)}
  .workspace-header,.ui-workspace-header{min-height:0;align-items:flex-start;gap:var(--space-2);padding:var(--space-1) 0}
  .workspace-title-row h1{font-size:var(--type-dialog)}
  .workspace-description{font-size:var(--type-caption)}
  .workspace-actions{gap:var(--space-1)}
  .ui-toolbar{min-height:var(--touch-target);gap:var(--space-1);flex-wrap:wrap}
  .ui-toolbar>.ui-search{flex-basis:100%;width:100%}
  .ui-tabs,.ui-segments{overflow-x:auto;scrollbar-width:none}
  .page-facet-mobile-search{display:flex;align-items:center;gap:var(--space-2);height:var(--touch-target);margin:var(--page-gutter) var(--page-gutter) 0;padding-inline:var(--control-pad-x);border:1px solid var(--color-border);border-radius:var(--radius-surface);background:var(--color-surface)}
  .page-facet-mobile-search input{border:0;box-shadow:none;background:transparent;padding:0}
  .page-action-mobile-only{display:inline-flex}
  .page-action-overflow{position:relative;display:block;flex:0 0 auto;width:var(--touch-target);height:var(--touch-target)}
  .page-action-overflow>.page-action-overflow-toggle{display:inline-flex;width:var(--touch-target);height:var(--touch-target);padding:0;align-items:center;justify-content:center}
  .page-action-overflow>.page-action-overflow-menu{position:fixed;z-index:calc(var(--z-topbar) + 8);inset-block-start:calc(var(--topbar-height) + var(--page-gap));inset-inline-end:var(--page-gutter);width:min(var(--action-menu-max-width),calc(100vw - 2 * var(--page-gutter)));padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-surface);background:var(--color-surface);box-shadow:var(--shadow-float)}
  .page-action-overflow[open]>.page-action-overflow-menu{display:grid;gap:var(--space-1)}
  .page-action-overflow-menu .button{width:100%;justify-content:flex-start;white-space:normal}
}
@media(max-width:360px){:root{--page-gutter:6px}.workspace-description{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.toast-host{position:fixed;z-index:var(--z-toast);inset-block-start:calc(var(--topbar-height) + var(--space-3));inset-inline-end:var(--space-4);display:grid;width:min(380px,calc(100vw - 32px))}
.toast{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:var(--space-2)}
#global-status{position:fixed;z-index:90;bottom:var(--space-4);inset-inline-start:calc(var(--sidebar-width) + var(--space-4));display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center}
.global-status-copy{display:grid}
.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#global-status[hidden],#modal-host[hidden]{display:none}
@media(max-width:1120px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-description{max-width:680px}}
@media(max-width:760px){#global-status{inset-inline-start:var(--space-2);bottom:calc(var(--mobile-bottom-nav) + var(--space-2))}}

}