/* Navigation uses the shared application tokens and controls. */
.sidebar{width:250px;min-width:250px;overflow:hidden}
.sidebar-nav{overflow-y:auto;min-height:0;padding:.5rem 0;scrollbar-color:var(--border) var(--surface);scrollbar-width:thin}
.main-content{margin-left:250px}
.main-content.no-sidebar{margin-left:0}
.sidebar-brand,.sidebar-footer{flex-shrink:0}
.context-bar{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border)}
.context-organization{min-width:0;color:var(--text)}
.context-account{margin-left:auto;min-width:12rem;padding:.25rem 0}
.context-organization strong{display:block;overflow-wrap:anywhere;font-size:1rem;margin-bottom:.5rem}
.context-bar span,.nav-search label{display:block;font-size:.7rem;color:var(--text-muted);font-weight:600}
.context-environments{display:flex;flex-direction:row;gap:1.5rem;align-items:flex-start}
.context-env-row{display:grid;grid-template-columns:4.7rem minmax(0,1fr);align-items:center;gap:.5rem}
.context-bar .context-env-label{text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.context-env-value{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.context-env-value .env-badge{font-size:.85rem;overflow-wrap:anywhere;white-space:normal;padding:.2rem .65rem}
.context-env-version{font-size:.7rem;line-height:1.3;color:var(--text-muted);padding-left:.1rem}
.context-env-value button:disabled{cursor:default;opacity:.65}
.nav-search{padding:.5rem 1rem}
.nav-search input{width:100%;padding:.5rem .65rem;margin:.25rem 0;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:.85rem}
.nav-search small{color:var(--text-muted);font-size:.7rem}
.nav-entry{display:flex;align-items:center;min-width:0}
.nav-entry>a{flex:1;min-width:0}
.nav-pin{border:0;background:transparent;color:var(--text-muted);padding:.35rem .65rem;cursor:pointer;font-size:1rem}
.nav-pin[aria-pressed=true]{color:var(--text)}
.nav-group summary{padding:.5rem 1rem;color:var(--text);cursor:pointer;font-size:.85rem}
.nav-group .sidebar-link{font-size:.82rem;padding:.4rem .5rem .4rem 1.7rem}
.nav-group:has(.active)>summary{font-weight:600}
.sidebar-section{padding-top:.75rem}
#nav-search-status{font-size:.8rem;color:var(--text-muted);padding:0 1rem}
#nav-search-status:empty{display:none}
.sidebar [hidden],.home-workspace [hidden]{display:none!important}
.sidebar :focus-visible,.context-bar :focus-visible,.home-workspace :focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#toggle-navigation{display:none}
.home-workspace{max-width:72rem}
.home-workspace .page-header{margin-bottom:1.25rem}
.home-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.home-section{margin-bottom:1.5rem}
.home-section h3{font-size:1rem;margin-bottom:.5rem}
.home-section p{font-size:.85rem;color:var(--text-muted)}
.home-tool{display:flex;justify-content:space-between;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);color:var(--text);font-size:.9rem}
.home-tool small{color:var(--text-muted)}
.home-browse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.home-browse a{padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text)}
.home-browse strong,.home-browse small{display:block}
.home-browse small{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}
@media(max-width:800px){.sidebar{display:none;z-index:110;top:4.5rem;width:250px}.sidebar.nav-open{display:flex}.main-content{margin-left:0}#toggle-navigation{display:inline-block}.context-bar{padding:.5rem .75rem;gap:.75rem;flex-wrap:wrap}.context-environments{gap:1rem}.home-browse{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.home-columns,.home-browse{grid-template-columns:1fr}.context-environments{width:100%;justify-content:space-between}.sidebar{top:7.5rem}}
@media(max-width:800px){.sidebar{top:var(--context-bar-height,7.5rem)}}

/* Artwork uses the height established by the existing environment controls. */
.context-brand-art{position:relative;align-self:stretch;flex:1 1 0;min-width:0;margin:-.75rem 0 -.75rem -1.5rem;overflow:hidden;mask-image:linear-gradient(to right,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 80%,transparent 100%)}
.context-brand-art img{position:absolute;top:0;left:0;width:auto;max-width:none;height:100%;mask-image:linear-gradient(to right,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 75%,transparent 100%)}
@media(max-width:800px){.context-brand-art{margin:-.5rem 0;}}

/* Keep bottom controls clear of the browser's hovered-link preview. */
:root{--browser-status-space:2rem}
.sidebar-footer{padding-bottom:calc(1rem + var(--browser-status-space) + env(safe-area-inset-bottom,0px))}
.main-content>.container{padding-bottom:calc(2rem + var(--browser-status-space) + env(safe-area-inset-bottom,0px))}

/* Organization and environment context shares the artwork header's top band. */
:root{--p3-context-height:7.5rem}
.sidebar-context{flex-shrink:0;min-height:7.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center}
.sidebar-context .context-account{margin:0;padding:0;min-width:0;width:100%}
.sidebar-context .context-environments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.sidebar-context .context-env-row{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-width:0}
.sidebar-context .context-env-label{text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--text-muted);font-weight:600}
.sidebar-context .context-env-value{max-width:100%}
.sidebar-context .env-badge{max-width:100%}
.context-bar{height:var(--p3-context-height);min-height:var(--p3-context-height)}