/* Layout: topbar, container, page header, grids, Publish app grid + drawer, overlay, toasts.
   NOTE: .container has position:relative but NO z-index. A z-index would make it a stacking context
   and the Publish drawer (z-drawer) could no longer rise above the sticky topbar. */
.topbar{position:sticky;top:0;z-index:var(--z-topbar);height:var(--topbar-h);display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-5);background:rgba(11,10,7,.92);border-bottom:1px solid var(--line-1)}
.container{position:relative;max-width:var(--container);margin:0 auto;padding:var(--sp-6) var(--sp-5)}
.view-section{display:none}.view-section.active{display:block}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);border-bottom:1px solid var(--line-1)}
.page-header__eyebrow{color:var(--accent)}
.page-meta{font:500 var(--fs-12)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-3)}.page-meta b{color:var(--accent);font-weight:500}
.toolbar-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.search-wrapper{position:relative;flex:1;min-width:240px;max-width:420px}
.search-wrapper .icon{position:absolute;left:var(--sp-3);top:50%;margin-top:-8px;color:var(--text-3);pointer-events:none}
.search-wrapper .input,.search-wrapper .input-field{padding-left:36px}
.category-pills{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.grid-cards,.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--sp-4)}
.ws-grid>.empty,.ws-grid>.sector-head{grid-column:1/-1}
.sector-head{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-2) 0 calc(var(--sp-2)*-1);font:500 var(--fs-11)/1 var(--font-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-2)}
.sector-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}
.sector-count{color:var(--accent);letter-spacing:var(--ls-label)}
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);gap:var(--sp-5)}
.tree{position:sticky;top:calc(var(--topbar-h) + var(--sp-4));align-self:start}
@media (max-width:900px){.app{grid-template-columns:1fr}.tree{position:fixed;inset:var(--topbar-h) auto 0 0;width:min(86vw,var(--sidebar-w));z-index:var(--z-drawer);background:var(--bg-surface);overflow-y:auto;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-out)}.tree.is-open{transform:none}}
@media (max-width:720px){.container{padding:var(--sp-5) var(--sp-3)}.topbar{gap:var(--sp-3);padding:0 var(--sp-3)}}
.overlay{position:fixed;inset:0;background:rgba(5,4,2,.78);z-index:var(--z-modal);display:grid;place-items:center}
/* The app opens modals by setting display:flex inline; hidden otherwise. */
.modal-overlay{display:none;align-items:center;justify-content:center}
.toasts{position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:var(--z-toast);display:grid;gap:var(--sp-2)}
@media (max-width:720px){.toasts{left:var(--sp-3);right:var(--sp-3)}}