/* STEAMCO Admin Shell
   Faithfully reproduces the old Svelte Sidebar.svelte styles in vanilla CSS.
   Depends on admin-tokens.css for all design tokens. */

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-base);
  line-height: var(--s-font-line-height-normal);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ══════════════════════════════════════════
   SHELL GRID
   ══════════════════════════════════════════ */

.admin-shell {
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr);
  /* 3 rows: top cluster | nav-column + main | footer (page-wide).
     v5 chrome (2026-05-14): footer spans full viewport width (col 1 / -1) under
     sidebar + main + right rail. Sidebar occupies col 1, row 2 only. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* vh-first base, dvh upgrade when supported. dvh tracks iOS Safari URL-bar
     collapse/expand so the shell doesn't sit underneath the chrome that fades
     in (otherwise the page-wide footer sinks behind it). */
  height: 100vh;
  background: var(--s-color-bg-app);
  transition: grid-template-columns var(--s-duration-normal)
    cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  /* Shell frame: row-2 minmax(0,1fr) + #contentArea scroll — no root y-clip
     (2026-05-21 responsive brief: overflow-y:hidden broke iPad touch-scroll). */
  min-height: 0;
  /* Top chrome inset (header + optional page-tools strip): overwritten by admin-shell.js from
     #shellTopCluster measured height — used for sidebar fill / fixed overlays / 100dvh math.
     Must NOT be used as .shell-header min-height (that would loop: strip grows cluster → var grows → header min grows → cluster grows). */
  --shell-header-height: calc(var(--s-font-size-active) * 2.57);
  /* Set from #shellFooter measured height in admin-shell.js */
  --shell-footer-height: 0px;
  /* Height of sidebar bottom band — matches footer band for horizontal rhyme (nav-rework-v1.2 §1) */
  --shell-sidebar-bottom-band-h: calc(var(--s-font-size-active) * 2.8);
}

/* dvh upgrade — height tracks dynamic viewport (URL-bar collapse/expand on iOS Safari). */
@supports (height: 100dvh) {
  .admin-shell {
    height: 100dvh;
  }
}

/* Shell-top-cluster spans the full viewport width across both columns.
   Caitlin direct 2026-05-11. */
.admin-shell > .shell-top-cluster {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Nav column: row 2 only — sidebar sits between top cluster and page-wide footer
   (v5 chrome 2026-05-14). Footer spans col 1 / -1 below it. */
.admin-shell > .admin-shell__nav-column {
  grid-column: 1;
  grid-row: 2;
}

/* Main content in col 2, row 2. */
.admin-shell > .main-content {
  grid-column: 2;
  grid-row: 2;
}

/* Footer is page-wide — col 1 / -1 across the full viewport width (v5 chrome 2026-05-14). */
.admin-shell > .shell-footer {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Let row 2 shrink so nav column / main respect viewport — avoids nav overlap when content is tall */
.admin-shell > .admin-shell__nav-column,
.admin-shell > .main-content {
  min-height: 0;
}

@import "./chrome-shell.css";
@import "./project-nav.css";

/* ══════════════════════════════════════════
   BILATERAL CHROME — Phase 1 scaffold
   [data-bilateral-chrome] on .admin-shell adds right rail (col 3).
   Right-rail width token can be overridden downstream.
   Draggable dock affordance ships Phase 3.
   ══════════════════════════════════════════ */

.admin-shell[data-bilateral-chrome] {
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr) var(--shell-right-rail-w);
}

/* Top cluster spans all 3 columns when bilateral chrome is active. */
.admin-shell[data-bilateral-chrome] > .shell-top-cluster {
  grid-column: 1 / -1;
}

/* Right rail: col 3, row 2 ONLY (between header and footer). Caitlin direct 2026-05-12:
   footer + header span full viewport width; right rail expands within the vertical
   middle band only, never narrowing header or footer. Previously grid-row: 2 / 4 which
   stretched the rail through the footer row. */
.admin-shell[data-bilateral-chrome] > .bilateral-right-rail {
  grid-column: 3;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

/* ── Right rail internals ── */
.bilateral-right-rail {
  display: flex;
  flex-direction: column;
  /* Caitlin direct 2026-06-07 — match the notebook surface's rail bg
     (--s-color-bg-panel) globally. Previously was --s-brand-alpha-5
     (green tint matching active-nav indicator), but the cream panel reads
     calmer and consistent across surfaces. */
  background: var(--s-color-bg-panel);
  border-left: 1px solid var(--s-color-border-subtle);
}

.bilateral-right-rail__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.bilateral-right-rail__empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4);
}

.bilateral-right-rail__empty-label {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

/* Collapsed sidebar narrows col-1 — bilateral chrome stays intact. */
.admin-shell[data-bilateral-chrome][data-sidebar="closed"] {
  grid-template-columns: 48px minmax(320px, 1fr) var(--shell-right-rail-w);
}

/* ── Context rail visibility — project pages only ──────────────────────────
   admin-shell.js sets data-context-rail="visible" on project routes and
   "hidden" on all others.  Default in HTML is "hidden".
   ────────────────────────────────────────────────────────────────────────── */

/* Hide the rail element and drop back to 2-column grid on non-project routes. */
.admin-shell[data-bilateral-chrome][data-context-rail="hidden"] > .bilateral-right-rail {
  display: none;
}

.admin-shell[data-bilateral-chrome][data-context-rail="hidden"] {
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr);
}

.admin-shell[data-bilateral-chrome][data-context-rail="hidden"][data-sidebar="closed"] {
  grid-template-columns: 48px minmax(320px, 1fr);
}

.admin-shell[data-bilateral-chrome][data-context-rail="hidden"][data-sidebar="rail"] {
  grid-template-columns: 44px minmax(0, 1fr);
}

/* ── SurfaceChrome: drawer-absent first-class state ──────────────────────
 * Brief shell-surface-chrome-slot-logic, 2026-06-09; parent spec
 * GUIDE_SURFACE_CHROME_CONTRACT v1 §1-3.
 *
 * Per contract: "rightDrawer: null is first-class — the shell must not
 * reserve drawer width when a surface declares no drawer". When the
 * mount logic (guide/shell/js/lib/surface-chrome.js) sees a descriptor
 * with `rightDrawer: null`, it writes
 * `.admin-shell[data-surface-drawer="absent"]`. We drop col-3 entirely
 * (no ghost rail, no reserved --shell-drawer-w / --shell-right-rail-w
 * gap). Mirrors the existing [data-context-rail="hidden"] mechanic so
 * the math chain stays the same.
 *
 * NB: the legacy [data-context-rail="hidden"] path remains intact for
 * unported routes — this rule is additional, not a replacement. The two
 * are independent: `data-context-rail="hidden"` is set by the router for
 * "this route has no contextual rail at all"; `data-surface-drawer="absent"`
 * is set by SurfaceChrome for "this surface DECLARED no drawer". A surface
 * may have a contextual *rail* (left) but no *drawer* (right) — e.g. the
 * Lab Tools reference port, contract §4. */
.admin-shell[data-bilateral-chrome][data-surface-drawer="absent"] > .bilateral-right-rail {
  display: none;
}

.admin-shell[data-bilateral-chrome][data-surface-drawer="absent"] {
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr);
}

.admin-shell[data-bilateral-chrome][data-surface-drawer="absent"][data-sidebar="closed"] {
  grid-template-columns: 48px minmax(320px, 1fr);
}

.admin-shell[data-bilateral-chrome][data-surface-drawer="absent"][data-sidebar="rail"] {
  grid-template-columns: 44px minmax(0, 1fr);
}

/* ── SurfaceChrome: drawer-present width override ──────────────────────
 * When a surface declares `rightDrawer: { … }`, the shell mounts into
 * `[data-surface-drawer-mount]` AND sets `data-surface-drawer="present"`
 * on .admin-shell + the right-rail. We retune the col-3 width to the
 * canonical `--shell-drawer-w` token (340px — the --nb-insp-w precedent
 * the contract calls out in §1). This stays inside the existing
 * grid-template-columns chain so collapse / sidebar-rail interactions
 * still work bit-for-bit. */
.admin-shell[data-bilateral-chrome][data-surface-drawer="present"] {
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr) var(--shell-drawer-w);
}

.admin-shell[data-bilateral-chrome][data-surface-drawer="present"][data-sidebar="closed"] {
  grid-template-columns: 48px minmax(320px, 1fr) var(--shell-drawer-w);
}

/* ── SurfaceChrome: left-rail mount default (hidden until a surface owns
 *    it). When SurfaceChrome.leftRail is non-null, the mount module
 *    removes [hidden]; CSS gives the mount full column height + scroll. */
[data-surface-rail-mount] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  background: var(--s-color-bg-panel);
  border-right: 1px solid var(--s-color-border-subtle);
  overflow-y: auto;
}

[data-surface-rail-mount][hidden] {
  display: none;
}

/* Stock contextual nav-list (kind="nav") rendered by surfaces that don't
 * build their own DOM — Lab Tools is the reference port. Tokens-only;
 * follows the same spacing/color rhythm as the sidebar's nav-section
 * links so the rail reads consistent with the rest of the shell. */
.surface-chrome-rail {
  display: flex;
  flex-direction: column;
  padding: var(--s-space-3) 0;
  width: 100%;
}

.surface-chrome-rail__heading {
  padding: 0 var(--s-space-3) var(--s-space-2);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

.surface-chrome-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.surface-chrome-rail__item {
  display: block;
}

.surface-chrome-rail__link {
  display: block;
  width: 100%;
  padding: var(--s-space-2) var(--s-space-3);
  color: var(--s-color-fg-primary);
  text-decoration: none;
  font-size: var(--s-font-size-1);
  line-height: var(--s-font-line-height-normal);
  border-left: 2px solid transparent;
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.surface-chrome-rail__link--button {
  appearance: none;
}

.surface-chrome-rail__link:hover {
  background: var(--s-color-bg-subtle);
}

.surface-chrome-rail__link[data-active="true"],
.surface-chrome-rail__link[aria-current="page"] {
  background: var(--s-color-bg-subtle);
  border-left-color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

/* When the SurfaceChrome left rail is active, hide the legacy adaptive
 * sidebar so we don't paint two left-rails. The descriptor owner is the
 * single source of truth for the contextual rail on this surface. The
 * global destination nav (hamburger overlay) is unaffected (per
 * contract §1: "left rail is the surface's contextual nav, distinct from
 * the global hamburger destination nav, which is unchanged"). */
.admin-shell[data-surface-chrome]:not([data-surface-chrome=""])
  > .admin-shell__nav-column
  > [data-surface-rail-mount]:not([hidden])
  ~ .sidebar {
  display: none;
}

/* ── SurfaceChrome: drawer mount default ──────────────────────────────
 * Shell-provided collapse chevron + icon-rail ribbon are auto-built when
 * the descriptor's `collapsible !== false`. */
[data-surface-drawer-mount] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-space-3);
}

[data-surface-drawer-mount][hidden] {
  display: none;
}

.surface-chrome__drawer-collapse {
  align-self: flex-end;
  margin: 0 0 var(--s-space-2) 0;
}

/* When a SurfaceChrome drawer is mounted, hide the legacy widget bay
 * (right-rail v5 widgets-list, add-widget affordance, library-inspector
 * mount). The surface's render() owns the drawer body; the legacy bay
 * is for unported routes only. */
.bilateral-right-rail[data-surface-chrome]:not([data-surface-chrome=""])
  .right-rail-widgets-list,
.bilateral-right-rail[data-surface-chrome]:not([data-surface-chrome=""])
  [data-right-rail-empty-prompt],
.bilateral-right-rail[data-surface-chrome]:not([data-surface-chrome=""])
  [data-add-widget],
.bilateral-right-rail[data-surface-chrome]:not([data-surface-chrome=""])
  .library-inspector-mount,
.bilateral-right-rail[data-surface-chrome]:not([data-surface-chrome=""])
  .right-rail-drawer-host:empty,
.bilateral-right-rail[data-surface-chrome]:not([data-surface-chrome=""])
  > .bilateral-right-rail__inner:empty {
  display: none;
}

/* ── Context rail collapsed state ──────────────────────────────────────────
   admin-shell.js (via rail-toggle.ts) sets data-context-rail-state="collapsed"
   on the shell element.  Rail shrinks to a 44px strip showing only the toggle.
   ────────────────────────────────────────────────────────────────────────── */

.admin-shell[data-bilateral-chrome][data-context-rail="visible"][data-context-rail-state="collapsed"] {
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr) 44px;
}

.admin-shell[data-bilateral-chrome][data-context-rail="visible"][data-context-rail-state="collapsed"][data-sidebar="closed"] {
  grid-template-columns: 48px minmax(320px, 1fr) 44px;
}

.admin-shell[data-bilateral-chrome][data-context-rail="visible"][data-context-rail-state="collapsed"][data-sidebar="rail"] {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

/* When collapsed: hide inner widgets, center the toggle in the strip. */
.admin-shell[data-context-rail-state="collapsed"] > .bilateral-right-rail > .bilateral-right-rail__inner {
  display: none;
}

.admin-shell[data-context-rail-state="collapsed"] > .bilateral-right-rail > .bilateral-right-rail__chrome {
  border-bottom: none;
  justify-content: center;
  padding: var(--s-space-2) var(--s-space-1);
}

/* ── Rail chrome: toggle button icons ─────────────────────────────────────
   Chevron direction flips based on rail state.
   Expanded → show chevron-right (collapse).
   Collapsed → show chevron-left (expand).
   ────────────────────────────────────────────────────────────────────────── */

.ctx-rail-expand-icon {
  display: none;
}
.ctx-rail-collapse-icon {
  display: block;
}

.admin-shell[data-context-rail-state="collapsed"] .ctx-rail-collapse-icon {
  display: none;
}
.admin-shell[data-context-rail-state="collapsed"] .ctx-rail-expand-icon {
  display: block;
}

/* ── Rail chrome bar ───────────────────────────────────────────────────────
   Brief 93 Part B (2026-05-15): the in-rail collapse toggle was relocated
   to the global top toolbar (`.shell-header__rail-toggle`). The chrome
   wrapper is now an empty hook — collapsed-state width math (44px strip)
   still requires a flex-shrink:0 zero-height marker so the rail width is
   driven by widget content alone. */

.bilateral-right-rail__chrome {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  justify-content: flex-start;
  border-right: 1px solid var(--s-color-border-subtle);
}

.bilateral-right-rail__collapse-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
}

.bilateral-right-rail__collapse-handle:hover {
  background: var(--s-brand-alpha-5);
  color: var(--s-color-fg-primary);
}

.bilateral-right-rail__rail-toggle-btn {
  flex-shrink: 0;
}

/* 2026-05-20 iter1e (Phase A): sidebar trailing-edge collapse handle — mirror
   of bilateral-right-rail__collapse-handle. Sits on the right edge of the
   admin-shell__nav-column. Caitlin direct: sidebar needs a collapse button
   matching how the right-rail is set up. */
.admin-shell__nav-column {
  position: relative;  /* anchor for the trailing-edge handle */
}
/* 2026-05-20 iter1o: redesign from full vertical chrome panel to a small
   floating chevron button. Caitlin direct: "the left navbar implementation
   has a full vertical panel for expand and collapse that overlays the
   contents of the bar when closed — I don't think this is the
   implementation you are hoping for, and it does not look right." */
.admin-shell__nav-column-chrome {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-panel);
  z-index: 31;
  touch-action: manipulation;
}
.admin-shell__sidebar-collapse-handle {
  width: 100%;
  height: 100%;
}
/* 2026-05-20 iter1n: hamburger touch-friendly + above any potential overlay
   (iPad Safari intercept). Caitlin direct: "hamburger menu still not
   working." Defensive: explicit pointer-events + touch-action + z-index. */
.shell-header__menu-btn {
  position: relative;
  z-index: 60;
  touch-action: manipulation;
  pointer-events: auto;
}
/* 2026-05-20 iter1n: smooth the sidebar grid-template-columns transition
   so the open/close phase is less clunky. Caitlin direct: "the open and
   closed phases of this are clunky but it is working now." */
.admin-shell {
  transition: grid-template-columns var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-shell__nav-column {
  transition: width var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-shell__sidebar-collapse-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
}
.admin-shell__sidebar-collapse-handle:hover {
  background: var(--s-brand-alpha-5);
  color: var(--s-color-fg-primary);
}
/* Chevron direction matches sidebar state — open shows "collapse" (chevron-
   left); closed shows "expand" (chevron-right). */
.sidebar-expand-icon {
  display: none;
}
.sidebar-collapse-icon {
  display: block;
}
.admin-shell[data-sidebar="ribbon"] .sidebar-collapse-icon,
.admin-shell[data-sidebar="closed"] .sidebar-collapse-icon {
  display: none;
}
.admin-shell[data-sidebar="ribbon"] .sidebar-expand-icon,
.admin-shell[data-sidebar="closed"] .sidebar-expand-icon {
  display: block;
}

.shell-breadcrumb-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  margin-left: var(--s-space-twohair);
}

.shell-breadcrumb-actions .shell-page-tools__toolbar-btn {
  min-height: 28px;
  min-width: 28px;
}

body[data-surface-classification="internal-ops"] [data-chrome-shell-host] {
  display: none;
}

body[data-surface-classification="internal-ops"] [data-nav-scoped-search] {
  display: none;
}

body[data-surface-classification="internal-ops"] [data-pane-registry-list] {
  display: none;
}

body[data-surface-classification="internal-ops"] .right-rail-widgets-list,
body[data-surface-classification="internal-ops"] .right-rail-add-widget,
body[data-surface-classification="internal-ops"] .right-rail-empty,
/* 2026-05-20 iter1h: hide "Select a brief to view details" placeholder
   on internal-ops. When the drawer is empty, the rail also auto-collapses
   (syncRailCollapseFromDrawerContent in right-rail/index.js) so the text
   wasn't load-bearing — just chrome noise. */
body[data-surface-classification="internal-ops"] .right-rail-empty-prompt {
  display: none;
}

/* 2026-05-20 iter1j: status consolidation on internal-ops.
   Caitlin direct: "consolidate 'live updates' and 'prototype' and 'ready'
   statuses — all status lives on the bottom right, minimize visual impact.
   Put bug reporting into the name/role menu. Theme stays."
   - Hide top-chrome PROTOTYPE chip (prototype indicator moves to footer)
   - Hide standalone bug button (Submit feedback already in avatar dropdown)
   - Center cluster visually moves alongside footer-right via JS relocation
   - All footer-right status text styled small + muted */
body[data-surface-classification="internal-ops"] #shellPrototypeChrome,
body[data-surface-classification="internal-ops"] #shellPrototypeChip,
body[data-surface-classification="internal-ops"] #bugReportBtn {
  display: none;
}
/* Consolidated footer status: small, muted, sentence-case middot-separated.
   Targets the readiness chip, live-tier badge, and prototype indicator. */
body[data-surface-classification="internal-ops"] .shell-footer__bottom-right .shell-footer__status,
body[data-surface-classification="internal-ops"] .shell-footer__bottom-right .shell-footer-status__live-tier,
body[data-surface-classification="internal-ops"] .shell-footer__bottom-right .shell-footer-status__calibration-tier,
body[data-surface-classification="internal-ops"] .shell-footer__bottom-right .shell-footer-status__prototype-indicator {
  font-size: var(--s-font-size-min);
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 0;
  padding: 0 var(--s-space-twohair);
  white-space: nowrap;
}

/* 2026-05-20 iter1i: slimmer + cleaner collapsed rail on internal-ops.
   Caitlin direct: "very slim and clean… look empty." The 44px collapsed
   strip with border + chevron felt like chrome-noise on kanban/briefing/
   timeline. Narrow to 16px column + transparent background + minimal
   chrome (just a thin chevron handle on the leading edge for re-expand). */
body[data-surface-classification="internal-ops"] .admin-shell[data-bilateral-chrome][data-context-rail="visible"][data-context-rail-state="collapsed"] {
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr) 16px;
}
body[data-surface-classification="internal-ops"] .admin-shell[data-bilateral-chrome][data-context-rail="visible"][data-context-rail-state="collapsed"][data-sidebar="closed"] {
  grid-template-columns: 48px minmax(320px, 1fr) 16px;
}
body[data-surface-classification="internal-ops"] .admin-shell[data-bilateral-chrome][data-context-rail="visible"][data-context-rail-state="collapsed"][data-sidebar="rail"] {
  grid-template-columns: 44px minmax(0, 1fr) 16px;
}
body[data-surface-classification="internal-ops"] .admin-shell[data-context-rail-state="collapsed"] > .bilateral-right-rail {
  background: transparent;
  border-left: none;
}
body[data-surface-classification="internal-ops"] .admin-shell[data-context-rail-state="collapsed"] > .bilateral-right-rail > .bilateral-right-rail__chrome {
  border-right: none;
  width: 16px;
  padding: 0;
}
body[data-surface-classification="internal-ops"] .admin-shell[data-context-rail-state="collapsed"] .bilateral-right-rail__collapse-handle {
  width: 16px;
  opacity: 0.5;
}
body[data-surface-classification="internal-ops"] .admin-shell[data-context-rail-state="collapsed"] .bilateral-right-rail__collapse-handle:hover {
  opacity: 1;
}

/* 2026-05-20 iter1: hide the floating global-footer launcher dock on
   internal-ops surfaces. Caitlin direct: "the floating launcher should
   just not be present here right now — we don't need it." The shell
   footer's right cluster (theme/bug/readiness) + status cluster
   (live tier / calibration tier / count) covers operator needs.
   Re-enable later by removing this block + restoring surface-aware
   defaults via global-footer.js. */
body[data-surface-classification="internal-ops"] #globalFooter {
  display: none;
}

/* 2026-05-20 iter1L: keep the FilterRail header visible on internal-ops
   even when 0 filters are active — it now hosts the count chip
   (queue-filter-toolbar__count--in-header) alongside "Filters · N active"
   + Clear all. The upstream primitive hides .s-filter-rail__header at
   n===0; override here. */
body[data-surface-classification="internal-ops"] .s-filter-rail__header[hidden] {
  display: flex;
}
/* Count chip styling INSIDE the rail header — minimal, muted, no link
   underline (it's a button). */
.queue-filter-toolbar__count--in-header {
  font-size: var(--s-font-size-min);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 0;
  padding: 0 var(--s-space-twohair);
  cursor: pointer;
  white-space: nowrap;
}
.queue-filter-toolbar__count--in-header:hover {
  color: var(--s-color-fg-default);
}

/* 2026-05-20 iter1: subtler filter-rail visibility + saved-view pills.
   Caitlin direct: pills were "huge and plain text" — restyled compact
   (smaller font, tighter padding, muted color when inactive). */
.s-filter-rail__visibility-pill,
.s-filter-rail__saved-views .s-pill-filter__pill {
  font-size: var(--s-font-size-min);
  padding: 1px var(--s-space-tight-3);
  color: var(--s-color-fg-muted);
  border: 1px solid var(--s-color-border-subtle);
  background: transparent;
  border-radius: var(--s-radius-1);
  line-height: 1.4;
}
.s-filter-rail__visibility-pill:hover,
.s-filter-rail__saved-views .s-pill-filter__pill:hover {
  color: var(--s-color-fg-default);
  border-color: var(--s-color-border-default);
}

/* 2026-05-20 iter1f/g: slider rows (Effort at top of kanban filter rail).
   Done + Priority moved into State facet — top section is sliders-only. */
.s-filter-rail__done-age-row,
.s-filter-rail__slider-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-tight-3);
}
.s-filter-rail__slider {
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  flex: 1 1 auto;
  min-width: 0;
}
.s-filter-rail__slider input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 14px;
  accent-color: var(--s-color-accent-default);
  cursor: pointer;
}
.s-filter-rail__slider-label {
  font-size: var(--s-font-size-min);
  color: var(--s-color-fg-muted);
  white-space: nowrap;
  min-width: 4ch;
  text-align: right;
}

.shell-footer-status[data-status-cluster] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-tight-3);
}

.shell-footer-status__live-tier {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  padding: 2px var(--s-space-tight-3);
  border-radius: var(--s-radius-1);
  background: var(--s-color-surface-raised);
  border: 1px solid var(--s-color-border-subtle);
}

.shell-footer-status__calibration-tier {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

/* 2026-05-20 iter1: kanban "X of Y shown" count relocated from queue-filter-toolbar
   into shell footer status cluster. Caitlin direct: count belongs in the always-
   visible status zone, not in the per-surface column toolbar. Keeps the click-to-
   clear-all-filters affordance; demoted visually to match the calibration-tier chip. */
.queue-filter-toolbar__count--in-footer {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--s-color-border-subtle);
  text-underline-offset: 2px;
}
.queue-filter-toolbar__count--in-footer:hover {
  color: var(--s-color-fg-default);
  text-decoration-color: currentColor;
}

/* ══════════════════════════════════════════
   CONTEXT WIDGETS
   Collapsible sections inside bilateral-right-rail.
   Each section: <section data-context-widget="id" data-state="expanded|collapsed">
   ══════════════════════════════════════════ */

[data-context-widget] {
  border-bottom: 1px solid var(--s-color-border-subtle);
}

[data-context-widget]:last-child {
  border-bottom: none;
}

.context-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-2);
  padding: var(--s-space-1) var(--s-space-3);
  min-height: calc(var(--s-font-size-active) * 2);
  cursor: pointer;
  user-select: none;
  transition: background var(--s-duration-fast);
}

.context-widget__header:hover {
  background: var(--s-brand-alpha-5);
}

.context-widget__title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
  min-width: 0;
}

.context-widget__toggle-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  flex-shrink: 0;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.context-widget__toggle-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.context-widget__toggle-btn:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.context-widget__chevron {
  transition: transform 0.15s ease;
  display: block;
}

[data-context-widget][data-state="collapsed"] .context-widget__chevron {
  transform: rotate(-90deg);
}

.context-widget__body {
  overflow: hidden;
}

[data-context-widget][data-state="collapsed"] .context-widget__body {
  display: none;
}

/* Reduce-motion: disable chevron rotation */
@media (prefers-reduced-motion: reduce) {
  .context-widget__chevron {
    transition: none;
  }
}

/* ══════════════════════════════════════════
   NAV COLUMN WRAPPER (sidebar + shell footer stack)
   ══════════════════════════════════════════ */

.admin-shell__nav-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  gap: var(--admin-shell-nav-footer-stack-gap);
}

.admin-shell__nav-column[hidden] {
  display: none;
}

.admin-shell__nav-column > .shell-footer {
  flex-shrink: 0;
  width: 100%;
}

/* Wide layout: in-flow sidebar + main (min-width aligns with compact drawer breakpoint <1024). */
@media (min-width: 1024px) {
  .admin-shell {
    overflow-x: auto;
    /* Compact drawer uses named grid areas — clear so two-column in-flow layout wins */
    grid-template-areas: none;
  }

  /* Left column: row 2 only — footer is page-wide below it (v5 chrome 2026-05-14).
     This @media rule must match the base rule. */
  .admin-shell > .admin-shell__nav-column {
    grid-column: 1;
    grid-row: 2;
  }

  /*
   * In-flow sidebar (not the ≤1023px overlay drawer): reset every property the compact drawer
   * sets (position, grid-area, shadow, transform) so resize/orientation cannot leave a “stuck”
   * drawer over the main column.
   */
  .admin-shell > .admin-shell__nav-column > .sidebar {
    align-self: stretch;
    position: relative;
    inset: auto;
    transform: none;
    /* Grid (not flex) so row 3 can be minmax(0,1fr): nav scrolls there.
       v5 chrome (2026-05-14): footer is page-wide so the sidebar no longer hosts an
       account/utilities row at the bottom — only [icons | scoped-search | body]. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    flex: 1 1 0%;
    height: auto;
    min-height: 0;
    max-height: none;
    width: auto;
    min-width: 0;
    box-shadow: none;
    z-index: 30;
  }

  /* Explicit rows for section-state: scoped search, sibling body (1fr).
     Without these, auto-flow can collide with legacy elements. */
  .admin-shell > .admin-shell__nav-column > .sidebar > .nav-scoped-search-row {
    grid-column: 1;
    grid-row: 1;
  }

  .admin-shell > .admin-shell__nav-column > .sidebar > .nav-sibling-body {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
  }

  .admin-shell > .admin-shell__nav-column > .sidebar > .shell-sidebar__bottom {
    grid-column: 1;
    grid-row: 4;
  }

  /* Legacy rows: elements below are display:none or [hidden] in the nav-rework
     structure and generate no box; rules retained so a future un-hide drops the
     element into the right row without re-introducing the row-2 collision. */
  .admin-shell > .admin-shell__nav-column > .sidebar > .sidebar-search-row {
    grid-column: 1;
    grid-row: 1;
  }

  .admin-shell > .admin-shell__nav-column > .sidebar > .sidebar-appearance-row {
    grid-column: 1;
    grid-row: 3;
  }

  .admin-shell > .admin-shell__nav-column > .sidebar > .sidebar-panels {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    align-self: stretch;
    /* Height comes from grid row; inner nav + telescope stay flex row. */
    flex: unset;
  }

  .admin-shell > .main-content {
    grid-column: 2;
    grid-row: 2;
    padding-bottom: 0;
  }

  /* v5 chrome (2026-05-14): footer is page-wide as the bottom grid row in all
     sidebar states; no fixed-position fallback needed for hidden/edge-overlay. */

  .admin-shell[data-sidebar="hidden"] > .admin-shell__nav-column > .sidebar {
    pointer-events: auto;
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="edge-overlay"]:not([data-sidebar="browse"])
    > .admin-shell__nav-column {
    pointer-events: none;
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="edge-overlay"]:not([data-sidebar="browse"])
    > .admin-shell__nav-column
    > .sidebar {
    pointer-events: auto;
  }

  /* SB-4: sidebar fully off-canvas; main uses full width (desktop / tablet) */
  .admin-shell[data-sidebar="hidden"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-shell[data-sidebar="hidden"] > .admin-shell__nav-column > .sidebar {
    position: fixed;
    left: 0;
    top: var(--shell-header-height);
    width: 248px;
    height: calc(100dvh - var(--shell-header-height) - var(--shell-footer-height));
    min-height: calc(100dvh - var(--shell-header-height) - var(--shell-footer-height));
    max-height: calc(100dvh - var(--shell-header-height) - var(--shell-footer-height));
    transform: translateX(-100%);
    z-index: 888;
    box-shadow: none;
  }

  .admin-shell[data-sidebar="hidden"] > .admin-shell__nav-column {
    grid-column: 1;
    grid-row: 2;
    pointer-events: none;
  }

  .admin-shell[data-sidebar="hidden"] > .main-content {
    grid-column: 1;
    grid-row: 2;
  }

  /*
   * Edge overlay nav (wide only): no in-flow left column. Main is full width;
   * nav is a fixed sheet off-canvas until hover (left edge zone) or pin.
   */
  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="edge-overlay"] {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="edge-overlay"]
    > .main-content {
    grid-column: 1;
    grid-row: 2;
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="edge-overlay"]
    > .admin-shell__nav-column
    > .sidebar {
    position: fixed;
    left: 0;
    top: var(--shell-header-height);
    width: 248px;
    max-width: min(248px, 85vw);
    height: calc(
      100dvh - var(--shell-header-height) - var(--shell-footer-height)
    );
    min-height: calc(
      100dvh - var(--shell-header-height) - var(--shell-footer-height)
    );
    z-index: 887;
    transform: translateX(-100%);
    align-self: stretch;
    transition: transform var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
  }

  html[data-reduce-motion="true"][data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="edge-overlay"]
    > .admin-shell__nav-column
    > .sidebar {
    transition: none;
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="edge-overlay"]
    > .admin-shell__nav-column
    > .sidebar.sidebar--overlay-visible {
    transform: translateX(0);
  }

  /* L3 browse with edge-overlay preference: restore in-flow two-column browse layout */
  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="browse"] {
    grid-template-columns: 440px minmax(320px, 1fr);
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="browse"]
    > .admin-shell__nav-column
    > .sidebar {
    /* Browse uses content-sized sidebar height; restore flex so panels + footer layout
       matches pre-grid behavior (minmax(0,1fr) rows need a definite grid height). */
    display: flex;
    flex-direction: column;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    transform: none;
    z-index: 30;
    transition: none;
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="browse"]
    > .admin-shell__nav-column
    > .sidebar
    > .sidebar-panels {
    grid-column: unset;
    grid-row: unset;
    flex: 1 1 0%;
    min-height: 0;
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="browse"]
    > .admin-shell__nav-column
    > .sidebar
    > .sidebar-search-row,
  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="browse"]
    > .admin-shell__nav-column
    > .sidebar
    > .sidebar-appearance-row {
    grid-column: unset;
    grid-row: unset;
  }

  html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"]
    .admin-shell[data-sidebar="browse"]
    > .main-content {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Left-edge hit target for edge-overlay hover (wide only; JS toggles hidden). */
.shell-nav-edge-zone {
  display: none;
  position: fixed;
  left: 0;
  top: var(--shell-header-height);
  width: var(--s-space-3);
  bottom: var(--shell-footer-height);
  z-index: 886;
  background: transparent;
  pointer-events: auto;
}

html[data-shell-layout="wide"][data-shell-nav-mode="edge-overlay"] .shell-nav-edge-zone:not([hidden]) {
  display: block;
}

/* Screen-reader-only live region for edge-overlay open/close (polite). */
.shell-nav-overlay-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════
   PERSISTENT SHELL FOOTER — page-wide (v5 chrome 2026-05-14)
   LEFT cluster: avatar (with chevron) | Admin (briefcase) | personal-settings (cog) | alerts (bell)
   RIGHT cluster: system-state text ("Ready · Web (frontier)")
   ══════════════════════════════════════════ */

.shell-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--s-color-border-subtle);
  /* Caitlin direct 2026-05-12: footer should be warm near-white (cream-15 #fffdf7),
     not bg-subtle (cream-100, deeper warm cream — which made footer DARKER than canvas).
     Now binds to bg-footer alias (= cream-15 via scilence pass 9). */
  background: var(--s-color-bg-footer);
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-0);
  min-height: 0;
  z-index: 40;
  /* Page-wide footer sits at viewport bottom (and edges when bilateral chrome spans
     col 1 / -1). Consume safe-area-insets so iOS home indicator + landscape notch
     don't overlap status/avatar content. env() returns 0 on non-notched devices. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.shell-footer__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-space-2);
  min-height: var(--shell-sidebar-bottom-band-h);
  /* No horizontal padding on the inner row so the avatar/account button starts flush
     at x=0. Right-cluster has its own padding-right on .shell-footer__right, so the
     right edge is unchanged. (Pre-2026-06-09 the avatar lived inside a fixed-width
     account column bound to --shell-sidebar-w; that wrapper is gone — the account
     button now sizes to its content + token padding so its hover/focus background
     spans the button itself rather than a dead column.) */
  padding: 0;
}

/* RIGHT cluster: system state text (no theme toggle, no feedback button — both relocated) */
.shell-footer__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
  padding-right: var(--s-space-2);
}

/* Brief 94 + surface-footer (2026-05-31): one centered status band between
   avatar column and bottom-right chrome. Surfaces emit `left` (context);
   project shell emits `right` (workspace); surface-footer.js composes:
   "{surface} · {shell}". */
.shell-footer__center,
.shell-footer__status-band {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-space-3);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  overflow: hidden;
}

.shell-footer__status-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.shell-footer__status-line[data-truncated="true"] {
  cursor: help;
}

.shell-footer__status-line[data-empty="true"] {
  display: none;
}

/* Legacy surface segment classes — kept for wireframes / popouts. */
.shell-footer__surface {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--s-space-3);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.shell-footer__surface[data-truncated="true"] {
  cursor: help;
}

.shell-footer__surface[data-empty="true"] {
  padding: 0;
}

/* project-surface-footer-consolidation: retire the SAR sheet's inline
   footer band — the shell footer is the single source of truth. The DOM
   element survives so popout windows (which mount a fresh sar-sheet
   without a shell footer alongside) keep their own footer; the rule
   suppresses it ONLY when a shell-level surface-footer exists in the
   document. */
body:has([data-surface-footer]) .sar-sheet__footer,
body:has([data-surface-footer]) .th-footer {
  display: none;
}

/* nav-rework-v1.1 §4 — footer bottom-right trio (readiness | bug | theme) */
.shell-footer__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.shell-footer__bottom-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-space-tight-3);
  flex-shrink: 0;
  padding-right: var(--s-space-2);
}

.shell-footer__bottom-right .shell-footer__status {
  font-variant-numeric: tabular-nums;
}

.shell-footer__bottom-right .footer-action-btn,
.shell-footer__bottom-right .header-icon-btn {
  width: calc(var(--s-font-size-active) * 1.85);
  height: calc(var(--s-font-size-active) * 1.85);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s-radius-1);
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.shell-footer__bottom-right .footer-action-btn:hover,
.shell-footer__bottom-right .header-icon-btn:hover {
  background: var(--s-brand-alpha-5);
  color: var(--s-color-fg-primary);
}

.shell-footer__theme {
  flex-shrink: 0;
}

.shell-footer__status,
.shell-footer__system-state {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* Account-chrome affordances: shared icon-button look. Brief 90 cleanup 2026-05-15:
   dropped Admin briefcase + personal settings cog. Bell moved to header (2026-05-31).
   2026-06-09: container column wrapper retired — the avatar button sizes to its
   content + token padding so any text/affordance feedback is bound to the button.
   Visceral review round 1 (Caitlin direct 2026-06-09): the hover background fill
   is unwanted on the account chip — removed entirely. The chip still surfaces
   pointer cursor + a subtle text-color shift; no background tint on hover/focus. */
.shell-footer__affordance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-tight-3);
  min-height: 100%;
  padding: 0 var(--s-space-2);
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition: color var(--s-duration-fast);
}

.shell-footer__affordance:hover {
  color: var(--s-color-fg-primary);
}

.shell-footer__affordance:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

/* Avatar trigger: includes name label + chevron; separator between avatar and Admin
   matches the brief's "Vertical rule between avatar and Admin." */
.shell-footer__affordance--avatar {
  gap: var(--s-space-tight-3);
  padding: 0 var(--s-space-2);
}

.shell-footer__avatar-name {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.shell-footer__avatar-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--s-color-fg-muted);
}

.shell-footer__name-role-sep {
  color: var(--s-color-fg-muted);
  flex-shrink: 0;
}

.shell-footer__about-slot {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.shell-sidebar-summon {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 889;
  width: var(--s-space-2);
  min-height: var(--s-space-7);
  margin-top: calc(-1 * var(--s-space-6));
  padding: 0;
  border: none;
  border-radius: 0 var(--s-radius-1) var(--s-radius-1) 0;
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  box-shadow: none;
  transform: translateX(0);
  transition:
    width var(--s-duration-fast) ease,
    background var(--s-duration-fast) ease;
}

.shell-sidebar-summon:hover,
.shell-sidebar-summon:focus-visible {
  width: var(--s-space-3);
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
}

@media (max-width: 1023px) {
  .shell-sidebar-summon {
    display: none;
  }
}

.admin-shell[data-sidebar="rail"] {
  grid-template-columns: 44px minmax(0, 1fr);
}

/* Browse mode: full nav + browse panel side by side */
.admin-shell[data-sidebar="browse"] {
  grid-template-columns: 440px minmax(320px, 1fr);
}

.admin-shell.dragging {
  transition: none;
}

/* ══════════════════════════════════════════
   TOP CLUSTER — header + optional page-tools strip (D12)
   ══════════════════════════════════════════ */

.shell-top-cluster {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

/* When strip is visible, single border between chrome and main body */
.shell-top-cluster:has(.shell-page-tools:not([hidden])) .shell-header {
  border-bottom: none;
}

.shell-page-tools:not([hidden]) {
  display: block;
  flex-shrink: 0;
  padding: var(--s-space-3) var(--s-space-3);
  min-height: calc(var(--s-font-size-active) * 2);
  background: var(--s-color-bg-subtle);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.shell-page-tools[hidden] {
  display: none;
}

.shell-page-tools__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-3);
  min-width: 0;
}

.shell-page-tools__slot {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  min-width: 0;
}

.shell-page-tools__slot--actions {
  margin-left: auto;
}

.shell-page-tools__search-input {
  min-width: var(--s-space-7);
  max-width: min(100%, 55ch);
  padding: var(--s-space-twohair) var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

.shell-page-tools__toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--s-font-size-active) * 2);
  min-height: calc(var(--s-font-size-active) * 2);
  padding: 0 var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  cursor: pointer;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.shell-page-tools__toolbar-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.shell-page-tools__toolbar-btn[data-active="true"] {
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
}

.shell-page-tools__toolbar-row,
.shell-page-tools__actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2);
}

/* Informational counts (vs lifecycle badges — draft / retired) */
.shell-page-tools__status.shell-page-tools__status--count {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  letter-spacing: normal;
  text-transform: none;
  color: var(--s-color-fg-muted);
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   SHELL HEADER (full-width top bar)
   ══════════════════════════════════════════ */

.shell-header {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  /* Top-of-viewport chrome — consume safe-area-insets so notch + status bar (iOS,
     viewport-fit=cover) don't overlap header content. max() preserves base padding
     on non-notched devices (env() returns 0). */
  padding-top: max(var(--s-space-2), env(safe-area-inset-top));
  padding-bottom: var(--s-space-2);
  padding-left: max(var(--s-space-3), env(safe-area-inset-left));
  padding-right: max(var(--s-space-3), env(safe-area-inset-right));
  /* Bar row only — see .admin-shell --shell-header-height (full cluster incl. page-tools). */
  min-height: calc(var(--s-font-size-active) * 2.57);
  min-width: 0;
  background: var(--s-color-bg-panel);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
  /* Above .sidebar (30) so rail/open toggle + chrome stay clickable if layers overlap */
  z-index: 40;
  position: relative;
}

/* Sidebar toggle — left of GUIDE (restored to header per product feedback) */
.shell-header__sidebar-toggle {
  flex-shrink: 0;
  margin-right: calc(var(--s-space-1) * -1);
}

.shell-breadcrumb {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-weight: var(--s-font-weight-medium);
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* D12.2 — contextual status from setPageTools (e.g. counts) adjacent to breadcrumb */
.shell-breadcrumb-status {
  flex-shrink: 1;
  display: none;
  align-items: baseline;
  gap: var(--s-space-2);
  min-width: 0;
  max-width: min(100%, 72ch);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-soft);
  letter-spacing: 0.01em;
  line-height: var(--s-font-line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-breadcrumb-status:not([hidden]):not(:empty) {
  display: inline-flex;
}

.shell-breadcrumb-status[hidden]:empty {
  display: none;
}

.shell-breadcrumb-status:not([hidden]):not(:empty)::before {
  content: "\00b7";
  color: var(--s-color-fg-soft);
  opacity: 0.75;
  margin-right: var(--s-space-twohair);
  flex-shrink: 0;
}

.shell-breadcrumb-status__text--count {
  font-weight: var(--s-font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  color: var(--s-color-fg-muted);
}

/* Web tier — PROTOTYPE honesty chip (hidden in Tauri; toggled from admin-shell.js) */
.shell-prototype-chrome {
  flex-shrink: 0;
  position: relative;
  display: none;
  align-items: center;
}

.shell-prototype-chrome:not([hidden]) {
  display: flex;
}

.shell-prototype-chrome__anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.shell-prototype-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  max-height: 24px;
  padding: 0 var(--s-space-2);
  margin: 0;
  border-radius: var(--s-radius-round);
  border: 1px solid var(--s-status-prototype-border);
  background: var(--s-status-prototype-bg);
  color: var(--s-status-prototype-fg);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  cursor: default;
  flex-shrink: 0;
  transition:
    background var(--s-duration-fast) ease,
    border-color var(--s-duration-fast) ease,
    color var(--s-duration-fast) ease;
}

.shell-prototype-chip:hover,
.shell-prototype-chip:focus-visible {
  background: var(--s-status-prototype-bg-hover);
}

.shell-prototype-chip:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

/* Prototype popover behavior removed in nav-rework-v1.1 — chip stays as static visual marker */

.shell-header-spacer {
  flex: 1;
  min-width: 0;
}

/* Three-zone header center slot — page-owned. Pages populate via
 * setShellHeaderCenter(node); empty by default. flex:1 absorbs free space
 * so the right-zone actions stay pinned. */
.shell-header-center {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-2);
}

.shell-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
}

.shell-header-page-actions {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
  min-width: 0;
}

/* D12.2 header-bay compose: segmented mode + scoped actions pin top-right */
.shell-header-page-actions.shell-header-page-actions--d12 {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: var(--s-space-1);
  column-gap: var(--s-space-2);
}

.shell-header-page-actions--d12 .shell-header-page-actions__segment {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 1;
}

.shell-header-page-actions--d12 .shell-header-page-actions__segment--actions {
  flex-shrink: 0;
}

.shell-page-tools__row--aux {
  row-gap: var(--s-space-2);
}

.shell-page-tools__row--aux .shell-page-tools__slot--toolbar {
  flex: 1 1 auto;
}

.shell-page-tools__row--aux .shell-page-tools__slot--search {
  margin-left: auto;
}

@media (max-width: 768px) {
  .shell-header-page-actions.shell-header-page-actions--d12 {
    max-width: min(58vw, 14rem);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-end;
  }

  .shell-header-page-actions--d12::-webkit-scrollbar {
    height: 0;
    width: 0;
  }

  /* Icon-first actions stay tappable without wrapping into a second header row */
  .shell-header-page-actions--d12 .shell-page-tools__actions-row {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .shell-header-page-actions--d12 .pw-headerc__modes--shell-actions {
    flex-shrink: 0;
  }

  .shell-breadcrumb-status:not([hidden]):not(:empty) {
    max-width: min(42vw, 12rem);
  }
}

.shell-header-actions .header-icon-btn {
  width: calc(var(--s-font-size-active) * 2);
  height: calc(var(--s-font-size-active) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
  flex-shrink: 0;
  padding: 0;
}

.shell-header-actions .header-icon-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

/* ══════════════════════════════════════════
   SIDEBAR CONTAINER
   Matches old .sidebar exactly
   ══════════════════════════════════════════ */

.sidebar {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  z-index: 30;
  flex-shrink: 0;
  overflow: hidden;
  transition: width var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--s-color-bg-panel);
  border-right: 1px solid var(--s-color-border-subtle);
}

.sidebar.dragging {
  transition: none;
  user-select: none;
}

/* Overlay scrollbars — 4px, no layout shift */
.sidebar * {
  scrollbar-width: thin;
}
.sidebar ::-webkit-scrollbar {
  width: 4px;
}
.sidebar ::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar ::-webkit-scrollbar-thumb {
  background: var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}
.sidebar ::-webkit-scrollbar-thumb:hover {
  background: var(--s-color-fg-muted);
}

/* ══════════════════════════════════════════
   SHELL HEADER ELEMENTS (logo, breadcrumbs, toggle)
   ══════════════════════════════════════════ */

.header-brand-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-space-0) var(--s-space-1);
  border-radius: var(--s-radius-1);
  flex-shrink: 0;
  transition:
    color 0.15s,
    opacity 0.2s ease,
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.header-brand-btn:hover {
  color: var(--s-color-fg-primary);
}

.sidebar-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-bold);
  margin: 0;
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--s-font-size-active) * 1.85);
  height: calc(var(--s-font-size-active) * 1.85);
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition: color var(--s-duration-fast) var(--s-ease-out);
}

.header-icon-btn:hover {
  color: var(--s-color-fg-primary);
}

/* Toggle icon: show open icon in rail, close icon when expanded */
.icon-panel-open {
  display: none;
}
.icon-panel-close {
  display: block;
}
.admin-shell[data-sidebar="rail"] .icon-panel-open {
  display: block;
}
.admin-shell[data-sidebar="rail"] .icon-panel-close {
  display: none;
}

/* Edge overlay: pinned = sheet stays open (close icon); unpinned = pin affordance (open icon) */
.admin-shell[data-sidebar="edge-overlay"].admin-shell--overlay-pinned .icon-panel-open {
  display: none;
}
.admin-shell[data-sidebar="edge-overlay"].admin-shell--overlay-pinned .icon-panel-close {
  display: block;
}
.admin-shell[data-sidebar="edge-overlay"]:not(.admin-shell--overlay-pinned) .icon-panel-open {
  display: block;
}
.admin-shell[data-sidebar="edge-overlay"]:not(.admin-shell--overlay-pinned) .icon-panel-close {
  display: none;
}

/* ══════════════════════════════════════════
   BREADCRUMBS (between header and search)
   ══════════════════════════════════════════ */

.sidebar-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-2) var(--s-space-3);
  font-size: var(--s-font-size-1);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
  max-height: 30px;
}

.bc-link {
  color: var(--s-color-fg-muted);
  text-decoration: none;
  transition: color var(--s-duration-fast) var(--s-ease-out);
  flex-shrink: 0;
}

.bc-link:hover {
  color: var(--s-color-fg-primary);
}

.bc-sep {
  color: var(--s-color-fg-soft);
  flex-shrink: 0;
  font-size: var(--s-font-size-0);
}

.bc-current {
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════
   SEARCH ROW
   ══════════════════════════════════════════ */

.sidebar-search-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  flex-shrink: 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.sidebar-search-row .nav-search-field {
  flex: 1;
  min-width: 0;
}

.sidebar-appearance-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  padding: var(--s-space-1) var(--s-space-2);
  flex-shrink: 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
}

/* Brief 92 click-bug fix (2026-05-15): initSidebarAppearanceControls() writes
   the HTML `hidden` attribute on this empty placeholder, but the class rule
   above (display: flex) overrides the UA `[hidden] { display:none }` rule due
   to equal/higher specificity. The element then renders as a full-row flex
   container at grid-row 3 — and because the global / project state panes
   span grid-row 1/-1, the empty appearance row stacks ON TOP of the global
   pane in DOM order, silently swallowing every click on LIBRARIES / LAB
   TOOLS / PROJECTS items + the search input. The pair-specificity rule
   below restores the UA semantics. */
.sidebar-appearance-row[hidden] {
  display: none;
}

.sidebar[data-state="rail"] .sidebar-appearance-row {
  display: none;
}

.sidebar-appearance-row .header-icon-btn {
  width: calc(var(--s-font-size-active) * 2);
  height: calc(var(--s-font-size-active) * 2);
}

.nav-search-field {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-3);
  margin: 0;
  height: calc(var(--s-font-size-active) * 2);
  background: var(--s-brand-alpha-5);
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  transition:
    border-color var(--s-duration-fast),
    opacity var(--s-duration-normal) ease;
  cursor: text;
}

.nav-search-field:focus-within {
  border-color: var(--s-color-border-subtle);
}

/* Rail mode: collapse search to icon only — center magnifier with L1 rail icons */
.sidebar[data-state="rail"] .sidebar-search-row {
  padding-left: 0;
  padding-right: 0;
}

.sidebar[data-state="rail"] .nav-search-field {
  background: transparent;
  border-color: transparent;
  padding: 0;
  justify-content: center;
  width: 100%;
  /* Base field uses gap between icon and input; gaps shift the icon left of center in rail */
  gap: 0;
}

.sidebar[data-state="rail"] .sidebar-search-input,
.sidebar[data-state="rail"] .keyboard-hint,
.sidebar[data-state="rail"] .search-scope-chip {
  opacity: 0;
  pointer-events: none;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}

.nav-search-icon-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  flex-grow: 0;
  color: var(--s-color-fg-muted);
}

.sidebar-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  font-family: inherit;
  min-width: 0;
}

.sidebar-search-input::placeholder {
  color: var(--s-color-fg-muted);
}

.keyboard-hint {
  font-size: var(--s-font-size-0);
  padding: 1px var(--s-space-1);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  flex-shrink: 0;
}

/* Scope chip — shows context label + close button in search field during browse mode */
.search-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: 1px var(--s-space-1) 1px var(--s-space-2);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-0);
  line-height: 1;
  color: var(--brand-accent-dark);
  background: var(--s-brand-alpha-10);
  border: 1px solid var(--s-brand-alpha-20);
  border-radius: var(--s-radius-1);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background var(--s-duration-fast) var(--s-ease-out),
    border-color var(--s-duration-fast) var(--s-ease-out);
}

.search-scope-chip:hover {
  background: var(--s-brand-alpha-20);
  border-color: var(--s-brand-alpha-30);
}

.search-scope-label {
  font-weight: var(--s-font-weight-medium);
}

.search-scope-close {
  font-size: var(--s-font-size-base);
  line-height: 1;
  opacity: 0.5;
  transition: opacity var(--s-duration-fast) var(--s-ease-out);
}

/* Hover-only reveal — touch devices don't have meaningful hover, so a sticky
   :hover after tap would leave the close affordance permanently revealed.
   Gate behind @media (hover: hover) so touch surfaces show the close at its
   base opacity (still readable, still tappable). */
@media (hover: hover) {
  .search-scope-chip:hover .search-scope-close {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════
   PANELS CONTAINER
   ══════════════════════════════════════════ */

.sidebar-panels {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.sidebar-panels.dragging,
.sidebar-panels.dragging .nav-column,
.sidebar-panels.dragging .telescope-panel,
.admin-shell.dragging .shell-header__sidebar-toggle,
.admin-shell.dragging .header-brand-btn,
.sidebar.dragging .sidebar-breadcrumbs,
.sidebar.dragging .tree-item,
.sidebar.dragging .tree-view,
.sidebar.dragging .tree-nav,
.sidebar.dragging .nav-group-header,
.sidebar.dragging .tree-label,
.sidebar.dragging .sidebar-search-row,
.sidebar.dragging .sidebar-search-row * {
  transition: none;
}

/* ══════════════════════════════════════════
   NAV COLUMN
   ══════════════════════════════════════════ */

.nav-column {
  display: flex;
  flex-direction: column;
  /* 0% basis so the column can shrink below content height and .tree-view scrolls */
  flex: 1 1 0%;
  min-width: 0;
  /* Critical: default min-height:auto prevents inner scroll areas from getting a height cap */
  min-height: 0;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  transition: flex var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

/* In browse mode, nav keeps its natural width; browse panel takes the rest */
.sidebar[data-state="browse"] .nav-column {
  flex: 0 1 auto;
  width: 200px;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Fully hidden nav column (available but not used by browse mode) */
.nav-column.hidden {
  flex: 0 0 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.nav-column.compact {
  flex: 0 0 44px;
  overflow-y: auto;
}

/* Compact mode: zero out tree-nav padding so icons center in 44px rail */
.nav-column.compact .tree-nav {
  padding-left: 0;
  padding-right: 0;
}

/* Compact mode: tree items become icon-centered, tightly packed */
.nav-column.compact .tree-item {
  overflow: visible;
  justify-content: center;
  padding: var(--s-space-2) 0;
  min-height: 0;
  gap: 0;
}

/* Hide L2/L3 depth items entirely in compact — only L1 icons show */
.nav-column.compact .tree-item.depth-1,
.nav-column.compact .tree-item.depth-2 {
  display: none;
}

.nav-column.compact .tree-chevron {
  width: 0;
  overflow: hidden;
  opacity: 0;
}

.nav-column.compact .tree-label {
  opacity: 0;
  width: 0;
  flex: 0;
  overflow: hidden;
}

.nav-column.compact .nav-group-header {
  opacity: 0;
  pointer-events: none;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-column.compact .tree-children {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   TREE VIEW & NAV
   ══════════════════════════════════════════ */

/* Scroll lives on .tree-view (not .tree-nav) so a flex child gets a definite height cap;
   nested flex + overflow on the same element often clips without showing a scrollbar. */
.tree-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

.tree-nav {
  display: flex;
  flex-direction: column;
  padding: var(--s-space-1) var(--s-space-2);
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  overflow: visible;
  transition: padding var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
  /* Align child labels with depth-0 text: .tree-icon slot is 16px (structural, matches .tree-icon width) */
  --tree-align-to-label: calc(var(--s-space-3) + 16px + var(--s-space-4));
}

/* ── Nav Group Headers ── */

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-space-1) var(--s-space-3);
  margin-top: var(--s-space-4);
  border-radius: var(--s-radius-1);
  transition:
    color 0.15s,
    height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}

.nav-group-header:hover {
  color: var(--s-color-fg-primary);
}

.nav-group-header.active .nav-group-label {
  color: var(--s-color-fg-primary);
}

.nav-group-label {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-group-chevron {
  color: var(--s-color-fg-muted);
  display: flex;
  align-items: center;
  opacity: 0.3;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

/* Hover-only reveal — touch surfaces would sticky-trigger this after a tap,
   leaving the chevron permanently translated. Gate behind @media (hover: hover);
   touch devices keep the base opacity 0.3 chevron (group state is read from
   the .active class, not hover). */
@media (hover: hover) {
  .nav-group-header:hover .nav-group-chevron {
    opacity: 0.85;
    transform: translateY(2px);
  }
}

.nav-group-header.active .nav-group-chevron {
  opacity: 0.5;
}

/* ══════════════════════════════════════════
   TREE ITEMS (L0, L1, L2)
   ══════════════════════════════════════════ */

.tree-item {
  display: flex;
  align-items: center;
  gap: var(--s-space-4);
  padding: var(--s-space-1) var(--s-space-3);
  color: var(--s-color-fg-primary);
  text-decoration: none;
  transition:
    color 0.15s,
    background-color 0.15s,
    padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    gap 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  min-width: 0;
  min-height: calc(var(--s-font-size-active) * 2);
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-1);
  line-height: 1.2;
  overflow: hidden;
  cursor: pointer;
}

.tree-item.depth-1 {
  padding-left: var(--tree-align-to-label);
  font-size: var(--s-font-size-1);
  min-height: calc(var(--s-font-size-active) * 1.85);
}

/* Hide-from-nav × — hover-revealed on tag children. */
.tree-tag-hide {
  margin-left: auto;
  margin-right: var(--s-space-2);
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-space-1);
  font-size: var(--s-font-size-1);
  line-height: 1;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.tree-item:hover .tree-tag-hide,
.tree-tag-hide:focus-visible {
  opacity: 1;
}

.tree-tag-hide:hover {
  color: var(--s-color-fg-primary);
  background: color-mix(in oklch, var(--s-color-fg-muted) 15%, transparent);
}

/* Restore-hidden footer pseudo-child — italic + muted, click toggles all back. */
.tree-tag-restore {
  font-style: italic;
  opacity: 0.7;
}

.tree-tag-restore:hover {
  opacity: 1;
}

.tree-item.depth-2 {
  padding-left: calc(var(--tree-align-to-label) + var(--s-space-3));
  font-size: var(--s-font-size-1);
  min-height: calc(var(--s-font-size-active) * 1.7);
}

.tree-item:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-brand-alpha-5); /* pass 12: green-tone hover matches active state per Caitlin direct */
}

.tree-item.active {
  color: var(--brand-accent-dark);
  font-weight: var(--s-font-weight-medium);
  background: var(--s-brand-alpha-5);
}

.tree-item.section-active {
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

/* Has-children affordance */
.tree-item.has-children {
  cursor: pointer;
}

.tree-item.has-children:hover .tree-chevron {
  opacity: 1;
}

/* ── Tree Icon (16x16 Lucide icon slot) ── */

.tree-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  color: var(--s-color-fg-muted);
  transition: color var(--s-duration-fast) var(--s-ease-out);
  overflow: visible;
}

.tree-item:hover .tree-icon,
.tree-item.active .tree-icon {
  color: inherit;
}

/* ── Tree Label ── */

.tree-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    opacity 0.2s ease,
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Tree Chevron ── */

.tree-chevron {
  color: var(--s-color-fg-muted);
  display: flex;
  align-items: center;
  opacity: 0.3;
  flex-shrink: 0;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.tree-item:hover .tree-chevron {
  opacity: 0.85;
  transform: translateY(2px);
}

.tree-item.section-active .tree-chevron {
  opacity: 0.5;
}

/* ── Browse Trigger Button ── */

.tree-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-soft);
  opacity: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition:
    opacity var(--s-duration-fast) var(--s-ease-out),
    color var(--s-duration-fast) var(--s-ease-out),
    background var(--s-duration-fast) var(--s-ease-out);
}

.tree-item:hover .tree-browse-btn {
  opacity: 1;
}

.tree-browse-btn:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

/* Hide browse trigger in compact/rail mode */
.nav-column.compact .tree-browse-btn {
  display: none;
}

/* ── Create Button (sidebar +) ── */

.nav-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-soft);
  cursor: pointer;
  opacity: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition:
    opacity var(--s-duration-fast) var(--s-ease-out),
    color var(--s-duration-fast) var(--s-ease-out),
    background var(--s-duration-fast) var(--s-ease-out);
}

.tree-item:hover .nav-create-btn {
  opacity: 1;
}

.nav-create-btn:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

/* Hide create button in compact/rail mode */
.nav-column.compact .nav-create-btn {
  display: none;
}

[data-state="rail"] .nav-create-btn {
  display: none;
}

/* ── Tree Children (inline expand) ── */

.tree-children {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.12s ease-out;
}

.tree-children.expanded {
  max-height: 2000px;
  transition: max-height 0.25s ease-in;
}

/* Sidebar search: reveal branches that contain matches without mutating expand state */
.tree-nav.nav-has-filter .tree-children.nav-filter-reveal {
  max-height: 2000px;
  transition: max-height 0.2s ease-in;
}

.tree-item.nav-filter-hidden,
.tree-children.nav-filter-hidden,
.nav-group-header.nav-filter-hidden {
  display: none;
}

/* ══════════════════════════════════════════
   TELESCOPE PANEL
   ══════════════════════════════════════════ */

.telescope-panel {
  flex: 0 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid transparent;
  transition:
    flex 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
  opacity: 0;
}

.telescope-panel.visible {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left-color: var(--s-color-border-subtle);
  opacity: 1;
  transition:
    flex 1.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 1.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.8s ease;
}

/* L3 telescope beside L0 nav: both had flex:1 — nav collapsed to unreadable slivers */
.sidebar[data-state="open"]
  .sidebar-panels:has(.telescope-panel.visible)
  .nav-column:not(.compact) {
  flex: 0 1 auto;
  min-width: 192px;
  width: clamp(192px, 42%, 260px);
  max-width: 260px;
  min-height: 0;
  max-height: 100%;
  align-self: stretch;
  overflow: hidden;
}

.telescope-nav {
  display: flex;
  flex-direction: column;
  padding: var(--s-space-1) 0 var(--s-space-1) var(--s-space-1);
  flex: 1 1 0%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  opacity: 1;
  transition: opacity var(--s-duration-slow) var(--s-ease-out);
}

.telescope-nav.content-fade {
  opacity: 0;
}

/* L3 browse index: keep scope header fixed; scroll the item list only */
.telescope-nav.telescope-nav--browse {
  overflow-y: hidden;
  padding-bottom: var(--s-space-1);
}

.telescope-nav.telescope-nav--browse .browse-panel-list {
  flex: 1 1 0%;
  min-height: 0;
}

.telescope-item {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-1) var(--s-space-0);
  color: var(--s-color-fg-primary);
  text-decoration: none;
  transition:
    color 0.15s,
    background-color 0.15s;
  white-space: nowrap;
  min-width: 0;
  min-height: calc(var(--s-font-size-active) * 1.85);
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-1);
  line-height: 1.2;
  cursor: pointer;
}

.telescope-item:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.telescope-item.active {
  color: var(--brand-accent-dark);
  font-weight: var(--s-font-weight-medium);
  background: var(--s-brand-alpha-5);
}

.telescope-item.section-active {
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

.telescope-item.telescope-sub {
  padding-left: var(--s-space-4);
  font-size: var(--s-font-size-1);
  min-height: calc(var(--s-font-size-active) * 1.7);
}

.telescope-no-matches {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-5) var(--s-space-3);
  text-align: center;
}

.no-matches-text {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.no-matches-hint {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-soft);
}

/* ══════════════════════════════════════════
   L3 BROWSE PANEL
   Back button, title, search, scrollable item list
   ══════════════════════════════════════════ */

/* Distinguish L3 index from L0/L1 tree — same panel as "telescope" column */
.browse-panel-scope-head {
  flex-shrink: 0;
  padding: var(--s-space-2) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.browse-panel-scope-head__title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  line-height: 1.3;
}

.browse-panel-scope-head__meta {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-soft);
  margin-top: var(--s-space-1);
  line-height: 1.2;
}

.browse-panel-back {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-2);
  margin-bottom: var(--s-space-1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  border-radius: var(--s-radius-1);
  transition:
    color var(--s-duration-fast) var(--s-ease-out),
    background var(--s-duration-fast) var(--s-ease-out);
}

.browse-panel-back:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.browse-panel-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  padding: 0 var(--s-space-2);
  margin-bottom: var(--s-space-3);
}

.browse-panel-search {
  padding: 0 var(--s-space-2);
  margin-bottom: var(--s-space-3);
}

.browse-panel-search-input {
  width: 100%;
  padding: var(--s-space-2) var(--s-space-3);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-surface);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  outline: none;
  transition: border-color var(--s-duration-fast) var(--s-ease-out);
  box-sizing: border-box;
}

.browse-panel-search-input:focus {
  border-color: var(--s-color-focus-border);
}

.browse-panel-search-input::placeholder {
  color: var(--s-color-fg-soft);
}

.browse-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-space-1) var(--s-space-1);
}

.browse-panel-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-space-1) var(--s-space-2);
  margin-top: var(--s-space-2);
  border-radius: var(--s-radius-1);
  transition:
    color 0.15s,
    opacity 0.15s ease;
}

.browse-panel-group-header:first-child {
  margin-top: 0;
}

.browse-panel-group-header:hover {
  color: var(--s-color-fg-primary);
}

.browse-panel-group-label-text {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}

.browse-panel-group-header:hover .browse-panel-group-label-text {
  color: var(--s-color-fg-muted);
}

.browse-panel-group-chevron {
  color: var(--s-color-fg-muted);
  display: flex;
  align-items: center;
  opacity: 0.35;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.browse-panel-group-header:hover .browse-panel-group-chevron {
  opacity: 0.85;
  transform: translateY(2px);
}

.browse-panel-group-body {
  display: flex;
  flex-direction: column;
}

.browse-panel-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px var(--s-space-2);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  line-height: 1.4;
  color: var(--s-color-fg-secondary);
  background: none;
  border: none;
  border-radius: var(--s-radius-1);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    color var(--s-duration-fast) var(--s-ease-out),
    background var(--s-duration-fast) var(--s-ease-out);
}

.browse-panel-item:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.browse-panel-item.active {
  color: var(--brand-accent-dark);
  font-weight: var(--s-font-weight-medium);
  background: var(--s-brand-alpha-5);
}

.browse-panel-empty {
  padding: var(--s-space-4) var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-soft);
  text-align: center;
}

/* ══════════════════════════════════════════
   BREADCRUMBS (in main header)
   ══════════════════════════════════════════ */

.s-breadcrumbs {
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
}

.s-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.s-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
}

.s-breadcrumbs__link {
  color: var(--s-color-fg-muted);
  text-decoration: none;
  padding: 1px var(--s-space-1);
  border-radius: var(--s-radius-1);
  transition:
    color var(--s-duration-fast) var(--s-ease-out),
    background var(--s-duration-fast) var(--s-ease-out);
}

.s-breadcrumbs__link:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-hover-bg);
}

.s-breadcrumbs__separator {
  color: var(--s-color-fg-soft);
  user-select: none;
}

.s-breadcrumbs__current {
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

/* ══════════════════════════════════════════
   RESIZE HANDLE
   ══════════════════════════════════════════ */

.sidebar-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: var(--s-z-raised);
  transition: background var(--s-duration-fast) var(--s-ease-out);
  /* Pointer capture + no touch scroll handoff while dragging shell width */
  touch-action: none;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle[data-dragging="true"] {
  background: var(--s-color-prominent-bg);
  opacity: 0.4;
}

/* ══════════════════════════════════════════
   RAIL TOOLTIP
   Matches old: brandscale bg/fg/border, 0.12s fade
   ══════════════════════════════════════════ */

.rail-tooltip {
  position: fixed;
  z-index: var(--s-z-max);
  transform: translateY(-50%);
  padding: var(--s-space-1) var(--s-space-3);
  background: var(--s-brand-200);
  color: var(--s-brand-800);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  line-height: 1.3;
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-brand-300);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.rail-tooltip.visible {
  opacity: 1;
  animation: rail-tooltip-in 0.12s ease;
}

@keyframes rail-tooltip-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════ */

.main-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Shell header breadcrumb (L1 section only) ── */
.shell-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
}

.shell-breadcrumb-sep {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-soft);
}

.shell-breadcrumb-link {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-muted);
  text-decoration: none;
  white-space: nowrap;
}
.shell-breadcrumb-link:hover {
  color: var(--s-color-fg-primary);
}

/* Density toggle — show only the icon matching the active density mode */
.density-icon {
  display: none;
}
[data-density="condensed"] .density-icon--condensed {
  display: block;
}
[data-density="standard"] .density-icon--standard,
:root:not([data-density]) .density-icon--standard {
  display: block;
}
[data-density="expanded"] .density-icon--expanded {
  display: block;
}

/* Content Area */
.content-area {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-space-3);
  background: var(--s-color-bg-surface);
}

.content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--s-space-5);
  color: var(--s-color-fg-soft);
}

.placeholder-icon {
  font-size: calc(var(--s-font-size-active) * 3.4);
  opacity: 0.5;
}

.content-placeholder p {
  font-size: var(--s-font-size-1);
  margin: 0;
}

.content-placeholder__title {
  font-size: var(--s-font-size-3);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  margin: 0;
}

.content-placeholder__meta {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  margin: 0;
}

.content-placeholder__hint {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-soft);
  margin: 0;
  max-width: 36rem;
  text-align: center;
}

.content-placeholder--coming-soon {
  gap: var(--s-space-3);
}

/* ══════════════════════════════════════════
   FOCUS RINGS (Accessibility)
   ══════════════════════════════════════════ */

.header-icon-btn:focus-visible,
.header-brand-btn:focus-visible,
.header-action:focus-visible,
.nav-group-header:focus-visible,
.tree-item:focus-visible,
.telescope-item:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
  border-radius: var(--s-radius-1);
}

/* ══════════════════════════════════════════
   SHELL FOOTER ACCOUNT WIDGET (pass 13 — lifted from sidebar-footer)
   ══════════════════════════════════════════ */

.shell-footer__account {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--s-space-3);
  margin-right: var(--s-space-1);
  border-right: 1px solid var(--s-color-border-subtle);
  /* Proportional cap: account widget claims ~25-30% of footer width max.
     Status + theme + about claim the remainder (Caitlin direct 2026-05-12). */
  max-width: 28%;
  min-width: 0;
}

.shell-footer__account .footer-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0;
  min-width: 0;
}

/* Avatar */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--s-brand-200);
  color: var(--s-brand-700);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  line-height: 1;
  user-select: none;
}

.avatar-xs {
  width: 22px;
  height: 22px;
  font-size: var(--s-font-size-xxs);
}

.footer-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Identity: name + role — horizontal layout, compact inline chip.
   Mirrors Claude's bottom-left account chip: calm, doesn't dominate.
   Caitlin direct 2026-05-12: "The segment that used to live in the main
   left nav now does not visually fit well where we have it." */
.footer-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
  gap: var(--s-space-2);
  overflow: hidden;
}

.footer-name {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.footer-role-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: 1px var(--s-space-1) 1px 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--s-radius-1);
  transition: background-color var(--s-duration-fast) var(--s-ease-out);
  max-width: fit-content;
}

.footer-role-btn:hover {
  background: var(--s-color-hover-bg);
}

.footer-role {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-chevron {
  color: var(--s-color-fg-muted);
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity var(--s-duration-fast) var(--s-ease-out);
}

.footer-role-btn:hover .footer-chevron {
  opacity: 1;
}

/* Action + rail icon hits — shared base (SB-2); size differs by mode. */
.footer-actions {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  flex-shrink: 0;
}

.footer-action-btn,
.footer-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition:
    background-color var(--s-duration-fast) var(--s-ease-out),
    color var(--s-duration-fast) var(--s-ease-out);
  text-decoration: none;
}

.footer-action-btn:hover,
.footer-rail-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.footer-action-btn {
  width: calc(var(--s-font-size-active) * 1.85);
  height: calc(var(--s-font-size-active) * 1.85);
}

.footer-rail-btn {
  width: 32px;
  height: 32px;
}

.footer-settings-icon {
  display: block;
  flex-shrink: 0;
}

/* ── Status Indicator ── */
.status-indicator {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s-color-status-success);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.status-indicator.online {
  background: var(--s-color-status-success);
}

.status-indicator.degraded {
  background: var(--s-color-status-warning);
}

.status-indicator.offline {
  background: var(--s-color-status-danger);
}

.status-indicator.placeholder {
  background: var(--s-color-fg-muted);
  opacity: 0.3;
}

/* ── Status Popover (portaled to body) ── */
.status-popover {
  position: fixed;
  z-index: 1000;
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  box-shadow: var(--s-shadow-md);
  min-width: 220px;
  max-width: 300px;
  overflow: hidden;
  font-family: var(--s-font-sans);
  opacity: 0;
  transition: opacity 100ms ease-out;
}

.status-popover.visible {
  opacity: 1;
}

.status-popover .popover-header {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-3) var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.status-popover .popover-title {
  flex: 1;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.status-popover .popover-summary {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  padding: var(--s-space-0) var(--s-space-2);
  border-radius: 999px;
}

.status-popover .popover-summary.online {
  background: var(--s-color-success-bg);
  color: var(--s-color-success-fg);
}

.status-popover .popover-summary.degraded {
  background: var(--s-color-warning-bg);
  color: var(--s-color-warning-fg);
}

.status-popover .popover-summary.offline {
  background: var(--s-color-error-bg);
  color: var(--s-color-error-fg);
}

.status-popover .popover-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: var(--s-space-1);
  border: none;
  background: transparent;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
  flex-shrink: 0;
}

.status-popover .popover-close-btn:hover {
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-primary);
}

.status-popover .popover-services {
  list-style: none;
  margin: 0;
  padding: var(--s-space-3) 0;
}

.status-popover .popover-service {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-2) var(--s-space-4);
  font-size: var(--s-font-size-0);
}

.status-popover .service-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-popover .service-dot.online {
  background: var(--s-color-status-success);
}
.status-popover .service-dot.degraded {
  background: var(--s-color-status-warning);
}
.status-popover .service-dot.offline {
  background: var(--s-color-status-danger);
}

.status-popover .service-name {
  flex: 1;
  color: var(--s-color-fg-primary);
}

.status-popover .service-status {
  font-size: var(--s-font-size-0);
  text-transform: capitalize;
}

.status-popover .service-status.online {
  color: var(--s-color-success-fg);
}
.status-popover .service-status.degraded {
  color: var(--s-color-warning-fg);
}
.status-popover .service-status.offline {
  color: var(--s-color-error-fg);
}

.status-popover .popover-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-1);
  padding: var(--s-space-3) var(--s-space-4);
  border-top: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.status-popover .popover-link:hover {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

/* ══════════════════════════════════════════
   FOOTER POPOVERS (account menu, feedback)
   Portaled to document.body, same as status popover
   ══════════════════════════════════════════ */

.footer-popover {
  position: fixed;
  z-index: 1000;
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  box-shadow: var(--s-shadow-md);
  min-width: 180px;
  max-width: 300px;
  overflow: hidden;
  font-family: var(--s-font-sans);
  opacity: 0;
  transition: opacity 100ms ease-out;
}

.footer-popover.visible {
  opacity: 1;
}

/* ── Account Menu ── */

.account-menu {
  padding: var(--s-space-2) 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  width: 100%;
  padding: var(--s-space-2) var(--s-space-4);
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  font-family: inherit;
  transition:
    background-color 0.1s,
    color 0.1s;
  text-align: left;
}

.menu-item:hover {
  background: var(--s-color-hover-bg);
}

.menu-item-danger {
  color: var(--s-color-status-danger);
}

.menu-item-danger:hover {
  background: var(--s-color-error-bg);
}

[data-theme="dark"] .menu-item-danger:hover {
  background: color-mix(
    in oklch,
    var(--s-color-status-danger) 18%,
    var(--s-color-bg-panel)
  );
}

.menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--s-color-fg-muted);
}

.menu-item:hover .menu-item-icon {
  color: inherit;
}

.menu-item-label {
  flex: 1;
}

.menu-separator {
  height: 1px;
  background: var(--s-color-border-subtle);
  margin: var(--s-space-2) 0;
}

/* ── Feedback Popover ── */

.feedback-popover {
  min-width: 280px;
  max-width: 340px;
}

.feedback-header {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-3) var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.feedback-title {
  flex: 1;
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.feedback-body {
  padding: var(--s-space-3) var(--s-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}

.feedback-type-row {
  display: flex;
  gap: var(--s-space-2);
}

.feedback-type-btn {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-1);
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.1s,
    color 0.1s,
    border-color 0.1s;
}

.feedback-type-btn:hover {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.feedback-type-btn.active {
  background: var(--s-brand-alpha-10);
  border-color: var(--s-brand-alpha-20);
  color: var(--s-color-fg-primary);
}

.feedback-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--s-space-2) var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-1);
  font-family: inherit;
  line-height: var(--s-font-line-height-normal);
  resize: vertical;
  transition: border-color 0.15s;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--s-color-focus-border);
}

.feedback-textarea::placeholder {
  color: var(--s-color-fg-soft);
}

.feedback-footer {
  padding: var(--s-space-2) var(--s-space-4) var(--s-space-3);
  display: flex;
  justify-content: flex-end;
}

.feedback-submit-btn {
  padding: var(--s-space-1) var(--s-space-4);
  border: none;
  border-radius: var(--s-radius-1);
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
}

.feedback-submit-btn:hover {
  background: var(--s-color-prominent-bg-hover);
}

.feedback-sent {
  text-align: center;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  padding: var(--s-space-3) 0;
  margin: 0;
}

/* Focus rings for footer buttons */
.footer-action-btn:focus-visible,
.footer-rail-btn:focus-visible,
.footer-role-btn:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
  border-radius: var(--s-radius-1);
}

/* ══════════════════════════════════════════
   DARK MODE OVERRIDES
   ══════════════════════════════════════════ */

[data-theme="dark"] .tree-item.active {
  color: var(--brand-accent-light);
  background: var(--s-brand-alpha-10);
}

[data-theme="dark"] .telescope-item.active {
  color: var(--brand-accent-light);
  background: var(--s-brand-alpha-10);
}

/* ══════════════════════════════════════════
   IFRAME EMBED (for press/authoring etc.)
   ══════════════════════════════════════════ */

.content-area.has-iframe,
.content-area.has-lab {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Scroll stays inside the page (e.g. .dsc-grid), not the shell — avoids huge empty document scroll */
  overflow: hidden;
}

/* Full-bleed page root must shrink inside flex (default min-height:auto grows past the viewport). */
.content-area.has-lab > :only-child,
.content-area.has-iframe > :only-child {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
}

/* Design system component detail: #dscLightbox is a second sibling of .pg-inset, so
   :only-child no longer matches and the flex height chain was lost (empty main area). */
.content-area.has-lab:has(#dscLightbox) > .pg-inset {
  display: none;
}

.content-area.has-lab > .dsc-detail {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.lab-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ══════════════════════════════════════════
   LAB SOURCE PATH (placeholder pages)
   ══════════════════════════════════════════ */

.lab-source-path {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-soft);
  font-family: var(--s-font-mono);
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .admin-shell,
  .sidebar,
  .sidebar-header,
  .header-brand-btn,
  .header-icon-btn,
  .nav-search-field,
  .nav-column,
  .tree-view,
  .tree-nav,
  .tree-item,
  .tree-label,
  .tree-chevron,
  .tree-children,
  .telescope-panel,
  .telescope-nav,
  .telescope-item,
  .telescope-indicator,
  .nav-group-header,
  .nav-group-chevron,
  .sidebar-breadcrumbs,
  .rail-tooltip,
  .sidebar-resize-handle,
  .command-palette-dialog,
  .command-palette {
    transition-duration: 0ms;
    animation-duration: 0ms;
  }
}

/* ══════════════════════════════════════════
   LARGE POPOVER / MODAL (portal-based)
   Shared component for full-screen modals
   ══════════════════════════════════════════ */

.large-popover-container {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--s-duration-normal) var(--s-ease-out);
}

.large-popover-container.large-popover-visible {
  opacity: 1;
}

.large-popover-scrim {
  position: absolute;
  inset: 0;
  background: var(--s-color-backdrop-scrim);
  cursor: pointer;
}

.large-popover-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 120px);
  height: calc(100vh - 80px);
  max-width: 1400px;
  max-height: 900px;
  background: var(--s-color-bg-surface);
  border-radius: var(--s-radius-3);
  box-shadow: none;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .large-popover-modal {
    height: calc(100dvh - 80px);
  }
}

.large-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-5);
  padding: var(--s-space-5) var(--s-space-6);
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-surface);
  flex-shrink: 0;
}

.large-popover-title {
  margin: 0;
  padding: 0;
  font-size: var(--s-font-size-2);
  font-weight: 600;
  color: var(--s-color-fg-primary);
  line-height: var(--s-font-line-height-tight);
}

.large-popover-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: var(--s-radius-2);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition:
    background-color var(--s-duration-fast) var(--s-ease-out),
    color var(--s-duration-fast) var(--s-ease-out);
  flex-shrink: 0;
}

.large-popover-close-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.large-popover-close-btn:active {
  background: var(--s-color-active-bg);
}

.large-popover-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--s-color-bg-surface);
  padding: var(--s-space-6);
}

.large-popover-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--s-color-bg-surface);
}

/* ── Small screen layout ── */
@media (max-width: 768px) {
  .large-popover-modal {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  /* dvh upgrade — modal tracks dynamic viewport on iOS Safari so the bottom edge
     stays visible across URL-bar transitions. */
  @supports (height: 100dvh) {
    .large-popover-modal {
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  .large-popover-header {
    padding: var(--s-space-4) var(--s-space-5);
  }

  .large-popover-body {
    padding: var(--s-space-4) var(--s-space-5);
  }

  .large-popover-title {
    font-size: var(--s-font-size-1);
  }
}

/* ══════════════════════════════════════════
   COMPACT LAYOUT — shell slide-over drawer (max-width 1023px)
   Viewports 768–1023: same drawer as phones. In-flow nav + nav-mode apply at 1024px+.
   ══════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Shared offset from viewport top → drawer top edge (below shell header) */
  /* Fallback before JS runs: .shell-header is min-height 36px (border-box, padding included). */
  .admin-shell {
    --sidebar-drawer-offset: var(--admin-shell-drawer-top);
  }

  /* Rail + browse grid rules are more specific — force single-column + overlay drawer
     only on phones so fixed sidebar does not steal a grid track from main. */
  .admin-shell[data-sidebar="open"],
  .admin-shell[data-sidebar="rail"],
  .admin-shell[data-sidebar="browse"],
  .admin-shell[data-sidebar="hidden"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "shellhdr"
      "shellmain";
  }

  .shell-top-cluster {
    grid-area: shellhdr;
    grid-column: auto;
  }

  .shell-header {
    /* Nested under .shell-top-cluster — placement is via cluster row */
    grid-column: auto;
    /* Drawer sidebar uses z-index 999 — keep header (toggle) above it */
    z-index: 1000;
  }

  /* Drawer + main share one grid cell; Wave F footer is fixed to viewport bottom. */
  .admin-shell__nav-column {
    grid-area: shellmain;
    grid-column: auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    position: relative;
  }

  .admin-shell > .shell-footer {
    grid-column: 1 / -1;
    grid-row: 3;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 100%;
    /* Fixed-bottom in compact bands; consume safe-areas so home indicator + landscape
       notch don't overlap the footer chrome. env() returns 0 on non-notched devices. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .main-content {
    grid-area: shellmain;
    grid-column: auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding-bottom: var(--shell-footer-height);
  }

  /* Same grid cell as main — drawer overlays content; main stays full-width in flow */
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--sidebar-drawer-offset);
    /* Explicit height fills the dynamic viewport; top+bottom+height:auto left a gap on some WebKit builds */
    bottom: auto;
    height: calc(
      100dvh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
    );
    min-height: calc(
      100dvh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
    );
    max-height: calc(
      100dvh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
    );
    /* Drawer hits left + bottom viewport edges — consume safe-area for
       landscape iPhone notch (left) and home indicator (bottom). */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    z-index: 999;
    width: min(248px, 85vw);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overscroll-behavior-y: contain;
  }

  @supports not (height: 100dvh) {
    .sidebar {
      height: calc(
        100vh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
      );
      min-height: calc(
        100vh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
      );
      max-height: calc(
        100vh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
      );
    }
  }

  .sidebar:not([data-state="rail"]) {
    box-shadow: var(--s-shadow-lg);
  }

  [data-theme="dark"] .sidebar:not([data-state="rail"]) {
    box-shadow: var(--s-shadow-lg);
  }

  .sidebar[data-state="rail"] {
    transform: translateX(-100%);
  }

  .admin-shell[data-sidebar="browse"] .sidebar {
    width: min(440px, 92vw);
  }

  .sidebar-resize-handle {
    display: none;
  }

  /*
   * Browse mode (desktop): nav column is flex: 0 0 auto + fixed width so it sizes to content.
   * On mobile that prevents a height cap — the column grows with the tree and nothing scrolls.
   * Let the column participate in flex shrink (min-height: 0) so .tree-nav can overflow-y: auto.
   */
  .sidebar[data-state="browse"] .nav-column:not(.compact) {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    width: auto;
    max-width: min(200px, 46vw);
    overflow: hidden;
  }

  .sidebar[data-state="browse"] .sidebar-panels {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
  }

  /*
   * Open + telescope (desktop): nav column is flex: 0 0 auto — same unbounded-height issue on mobile.
   */
  .sidebar[data-state="open"]
    .sidebar-panels:has(.telescope-panel.visible)
    .nav-column:not(.compact) {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    width: auto;
    max-width: min(260px, 50vw);
    overflow: hidden;
  }

  .telescope-panel.visible .telescope-nav {
    min-height: 0;
    flex: 1 1 0%;
  }

  /* Touch: keep vertical pans on the nav list (avoid parent capturing scroll) */
  .sidebar .tree-view,
  .sidebar .telescope-nav {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Tablet / compact drawer — open + L3 telescope: side-by-side nav + list in ~248px
   * crushes both columns. Stack vertically (same idea as browse + telescope in
   * landscape) so the telescope list and tree remain usable without ribbon in-flow.
   */
  .sidebar[data-state="open"] .sidebar-panels:has(.telescope-panel.visible) {
    flex-direction: column;
    align-items: stretch;
  }

  .sidebar[data-state="open"]
    .sidebar-panels:has(.telescope-panel.visible)
    .nav-column:not(.compact) {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: min(44vh, 24rem);
    overflow: hidden;
  }

  .sidebar[data-state="open"] .telescope-panel.visible {
    flex: 1 1 0%;
    min-height: min(36vh, 14rem);
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--s-color-border-subtle);
  }
}

/* Mobile drawer — portrait: one scroll region in the middle; search + footer stay visible (footer pinned to drawer bottom) */
@media (max-width: 1023px) and (orientation: portrait) {
  .sidebar {
    display: flex;
    flex-direction: column;
    /* Do not set min-height: 0 here — it overrides the fill-height from the base mobile rule and can leave a gap */
    overflow: hidden;
    overscroll-behavior-y: contain;
  }

  /* Middle scrolls; footer does not overlap nav (avoid % heights on .nav-column fighting flex shrink) */
  .sidebar > .sidebar-panels {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    max-height: none;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }

  .sidebar .nav-column:not(.compact) {
    height: auto;
    max-height: none;
  }

  /* Portrait was resetting max-height:none above — restore open+L3 telescope stack caps */
  .sidebar[data-state="open"]
    .sidebar-panels:has(.telescope-panel.visible)
    .nav-column:not(.compact) {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    max-height: min(44vh, 24rem);
    overflow: hidden;
  }

  .sidebar[data-state="open"] .sidebar-panels:has(.telescope-panel.visible) {
    flex-direction: column;
  }

  .sidebar[data-state="open"] .telescope-panel.visible {
    flex: 1 1 0%;
    min-height: min(36vh, 14rem);
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--s-color-border-subtle);
  }

  .sidebar-search-row {
    flex-shrink: 0;
  }

  .nav-column:not(.compact) {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar[data-state="browse"] .sidebar-panels {
    min-height: 0;
  }

  .sidebar[data-state="browse"]
    .sidebar-panels:has(.telescope-panel.visible)
    .nav-column:not(.compact) {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(52vh, 28rem);
    overflow: hidden;
  }

  .tree-view {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
  }

  .tree-nav {
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
  }

  .telescope-panel.visible {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

}

/* Mobile drawer — landscape: single scroll; footer scrolls with nav (not pinned) to maximize short viewport */
@media (max-width: 1023px) and (orientation: landscape) {
  .sidebar {
    display: flex;
    flex-direction: column;
    /* Same fill height as portrait; whole drawer scrolls when content is tall */
    height: calc(
      100dvh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
    );
    min-height: calc(
      100dvh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
    );
    max-height: calc(
      100dvh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
    );
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Landscape iPhone: notch is on left edge — drawer must consume the inset
       too (portrait already inherits padding-left from base mobile rule above). */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    touch-action: pan-y;
  }

  @supports not (height: 100dvh) {
    .sidebar {
      height: calc(
        100vh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
      );
      min-height: calc(
        100vh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
      );
      max-height: calc(
        100vh - var(--sidebar-drawer-offset) - var(--shell-footer-height)
      );
    }
  }

  .sidebar .nav-column:not(.compact) {
    height: auto;
    max-height: none;
  }

  .sidebar-search-row {
    flex-shrink: 0;
  }

  .sidebar-panels {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .nav-column:not(.compact) {
    overflow: visible;
    min-height: 0;
  }

  .nav-column:not(.compact) .tree-nav {
    flex: none;
    max-height: none;
    overflow: visible;
  }

  .tree-view {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .telescope-panel.visible {
    overflow: visible;
    max-height: none;
  }

  /* Browse + telescope: stack vertically so one scroll captures everything */
  .sidebar[data-state="browse"] .sidebar-panels {
    flex-direction: column;
    align-items: stretch;
  }

  .sidebar[data-state="browse"]
    .sidebar-panels:has(.telescope-panel.visible)
    .nav-column:not(.compact) {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    max-height: none;
  }

  .sidebar[data-state="browse"] .telescope-panel.visible {
    flex: 0 1 auto;
    width: 100%;
    min-height: min(40dvh, 12rem);
    border-left: none;
    border-top: 1px solid var(--s-color-border-subtle);
  }
}

/* Content-area and command-palette scrollbars */
.tree-view::-webkit-scrollbar,
.tree-nav::-webkit-scrollbar,
.content-area::-webkit-scrollbar {
  width: 4px;
}

.tree-view::-webkit-scrollbar-track,
.tree-nav::-webkit-scrollbar-track,
.content-area::-webkit-scrollbar-track {
  background: transparent;
}

.tree-view::-webkit-scrollbar-thumb,
.tree-nav::-webkit-scrollbar-thumb,
.content-area::-webkit-scrollbar-thumb {
  background: var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

.tree-view::-webkit-scrollbar-thumb:hover,
.tree-nav::-webkit-scrollbar-thumb:hover,
.content-area::-webkit-scrollbar-thumb:hover {
  background: var(--s-color-fg-muted);
}

/* Panel manager — tab context menu (composable workspace) */
.pm-context-menu {
  position: fixed;
  top: var(--pm-menu-top);
  left: var(--pm-menu-left);
  box-sizing: border-box;
  min-width: 160px;
  padding: var(--s-space-2) 0;
  z-index: var(--s-z-max);
  font-size: var(--s-font-size-1);
  background: var(--s-color-bg-surface);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
}
.pm-context-menu__sep {
  height: 1px;
  margin: var(--s-space-2) 0;
  background: var(--s-color-border-subtle);
}
.pm-context-menu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--s-space-3) var(--s-space-4);
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--s-color-fg-primary);
  background: transparent;
  transition: background 100ms ease;
}
.pm-context-menu__item:hover,
.pm-context-menu__item:focus-visible {
  background: var(--s-color-hover-bg);
  outline: none;
}

/* ══════════════════════════════════════════
   FOOTER ACCOUNT WIDGET — proportional polish (P1A)
   Caitlin direct 2026-05-12: compact, calm, doesn't crowd footer strip.
   ══════════════════════════════════════════ */

/* Compact below 768px: hide name+role text; avatar only (space-efficient). */
@media (max-width: 767px) {
  .footer-identity {
    display: none;
  }
}

/* ══════════════════════════════════════════
   PROJECT HEADER CHIPS — shell header center zone (P1A)
   TIER / PHASE / OWNER read-only inline chips on project routes.
   Selector anchors: [data-shell-top-cluster] [data-project-tier-chip] etc.
   ══════════════════════════════════════════ */

.project-header-chips {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-2);
  min-width: 0;
  flex-shrink: 1;
}

.project-header-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: 2px var(--s-space-2);
  border-radius: var(--s-radius-round);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
  font-size: var(--s-font-size-0);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.project-header-chip__key {
  font-size: 10px;
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
  opacity: 0.75;
}

.project-header-chip__value {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
}

/* ══════════════════════════════════════════
   PROJECT VIEW SWITCHER — shell header right zone (P1A)
   Notebook | SAR | Whiteboard (icon-only) + settings cog.
   Convo view removed 2026-05-16 (brief
   guide-shell-v5-sar-default-and-view-switcher-icons.md).
   Selector anchors: [data-project-view-switcher], [data-view], [data-project-settings-cog]
   ══════════════════════════════════════════ */

.project-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
}

.project-view-switcher__seg {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-panel);
  overflow: hidden;
}

.project-view-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px var(--s-space-2);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--s-color-border-subtle);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--s-duration-fast) ease,
    color var(--s-duration-fast) ease;
  min-height: 24px;
}

/* Icon-only variant (brief 2026-05-16): keep the segmented control compact
   so three icons read as a single right-rail chip. Padding tokens match the
   cog (settings) button, and the inner SVG inherits currentColor so hover /
   active states already drive the icon stroke. */
.project-view-switcher__btn--icon {
  width: 24px;
  padding: 0 var(--s-space-1);
}

.project-view-switcher__btn--icon > svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.project-view-switcher__btn:last-child {
  border-right: none;
}

.project-view-switcher__btn:hover:not(.project-view-switcher__btn--active) {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.project-view-switcher__btn--active {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

.project-view-switcher__btn:focus-visible {
  outline: 2px solid var(--s-color-focus-ring);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.project-view-switcher__cog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition:
    background var(--s-duration-fast) ease,
    color var(--s-duration-fast) ease;
}

.project-view-switcher__cog:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.project-view-switcher__cog:focus-visible {
  outline: 2px solid var(--s-color-focus-ring);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════
   PROJECT PAGE — inline details pane (GH #245, 2026-05-26)
   Brief 83 restored bilateral-right-rail on project routes; GH #245
   reverses that — the project workspace keeps ONE right rail: the legacy
   pw-project__right column (chevron + dots collapse, context widgets).
   Hide the shell bilateral-right-rail and drop col 3 from the grid.
   ══════════════════════════════════════════ */

html[data-shell-page-type="project"] .admin-shell[data-bilateral-chrome] > .bilateral-right-rail {
  display: none;
}

/* Notebook golden composite — inspector occupies shell col-3 (overrides GH #245 hide). */
html[data-guide-project-surface="notebook"][data-shell-page-type="project"]
  .admin-shell[data-bilateral-chrome]
  > .bilateral-right-rail:has([data-notebook-right-chrome]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html[data-shell-page-type="project"]
  .admin-shell[data-bilateral-chrome][data-shell-layout-band="wide"] {
  grid-template-columns: var(--shell-sidebar-w) minmax(320px, 1fr);
}

html[data-shell-page-type="project"]
  .admin-shell[data-bilateral-chrome][data-shell-layout-band="wide"][data-sidebar="browse"] {
  grid-template-columns: 440px minmax(320px, 1fr);
}

html[data-shell-page-type="project"]
  .admin-shell[data-bilateral-chrome][data-shell-layout-band="wide"][data-sidebar="ribbon"] {
  grid-template-columns: 44px minmax(0, 1fr);
}

/* ══════════════════════════════════════════
   NAV REWORK v1 — open / ribbon states
   (nav-rework-v1 brief, 2026-05-12)
   ══════════════════════════════════════════ */

/* Ribbon state: grid narrows nav column to icon-strip width */
.admin-shell[data-sidebar="ribbon"] {
  grid-template-columns: 60px minmax(0, 1fr);
}

.admin-shell[data-bilateral-chrome][data-sidebar="ribbon"] {
  grid-template-columns: 60px minmax(0, 1fr) var(--shell-right-rail-w);
}

.admin-shell[data-bilateral-chrome][data-context-rail="hidden"][data-sidebar="ribbon"] {
  grid-template-columns: 60px minmax(0, 1fr);
}

.admin-shell[data-bilateral-chrome][data-context-rail="visible"][data-context-rail-state="collapsed"][data-sidebar="ribbon"] {
  grid-template-columns: 60px minmax(0, 1fr) 44px;
}

/* project ribbon override moved to GH #245 block above (no col 3) */

/* Toggle icon visibility for ribbon state */
.admin-shell[data-sidebar="ribbon"] .icon-panel-open {
  display: block;
}
.admin-shell[data-sidebar="ribbon"] .icon-panel-close {
  display: none;
}

/* ── Rail-mode recovery (sidebar-rail-mode-recovery brief, 2026-05-23) ──
   When admin-sidebar-rail=true (data-sidebar/data-nav-state=ribbon), non-toggle
   sidebar chrome collapses to zero width. Exempt [data-sidebar-rail-toggle] and
   enforce min-size so operators can expand without DevTools. */

.sidebar-rail-mode-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--shell-sidebar-collapse-w);
  height: var(--shell-sidebar-collapse-w);
  min-width: var(--shell-sidebar-collapse-w);
  min-height: var(--shell-sidebar-collapse-w);
  margin: var(--s-space-1) var(--s-space-2);
  padding: 0;
  border: none;
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition:
    color var(--s-duration-fast),
    background var(--s-duration-fast);
}

.sidebar-rail-mode-toggle:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sidebar-rail-mode-toggle:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

/* Section + global panes: dedicated top-left toggle (no icon strip in those states). */
.admin-shell[data-sidebar="ribbon"]
  .sidebar[data-sidebar-state="section"]
  > .sidebar-rail-mode-toggle,
.admin-shell[data-sidebar="ribbon"]
  .sidebar[data-sidebar-state="global"]
  > .sidebar-rail-mode-toggle {
  display: inline-flex;
  position: relative;
  z-index: 2;
}

/* Global pane body hidden in ribbon — shell-level toggle is the recovery affordance. */
.admin-shell[data-sidebar="ribbon"]
  .sidebar[data-sidebar-state="global"]
  > [data-sidebar-state-content="global"] {
  display: none;
}

/* Project pane: keep icon-strip collapse toggle visible; hide duplicate shell toggle. */
.admin-shell[data-sidebar="ribbon"]
  .sidebar[data-sidebar-state="project"]
  > .sidebar-rail-mode-toggle {
  display: none;
}

.admin-shell[data-sidebar="ribbon"] .sidebar-rail-toggle,
.sidebar[data-nav-state="ribbon"] .sidebar-rail-toggle,
.admin-shell[data-sidebar="ribbon"] [data-sidebar-rail-toggle].sidebar-project-icon-strip__collapse,
.sidebar[data-nav-state="ribbon"] [data-sidebar-rail-toggle].sidebar-project-icon-strip__collapse,
.admin-shell[data-sidebar="ribbon"] .library-sidebar__collapse,
.sidebar[data-nav-state="ribbon"] .library-sidebar__collapse {
  flex-shrink: 0;
  min-width: var(--shell-sidebar-collapse-w);
  min-height: var(--shell-sidebar-collapse-w);
  width: var(--shell-sidebar-collapse-w);
  height: var(--shell-sidebar-collapse-w);
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* Ribbon mode: collapse icon-strip search so the rail toggle keeps its slot. */
.sidebar[data-nav-state="ribbon"] .sidebar-project-icon-strip__search,
.admin-shell[data-sidebar="ribbon"] .sidebar-project-icon-strip__search {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.sidebar[data-nav-state="ribbon"] .sidebar-project-icon-strip,
.admin-shell[data-sidebar="ribbon"] .sidebar-project-icon-strip {
  justify-content: flex-start;
  gap: 0;
  padding-left: var(--s-space-1);
  padding-right: var(--s-space-1);
}

/* Ribbon mode: hide timeline/global body chrome; toggle row remains. */
.sidebar[data-nav-state="ribbon"] [data-sidebar-state-content="project"] .sidebar-project-timeline,
.admin-shell[data-sidebar="ribbon"] [data-sidebar-state-content="project"] .sidebar-project-timeline,
.sidebar[data-nav-state="ribbon"] [data-sidebar-state-content="global"] .sidebar-global-search-row,
.admin-shell[data-sidebar="ribbon"] [data-sidebar-state-content="global"] .sidebar-global-search-row,
.sidebar[data-nav-state="ribbon"] [data-sidebar-state-content="global"] .sidebar-global-sections,
.admin-shell[data-sidebar="ribbon"] [data-sidebar-state-content="global"] .sidebar-global-sections {
  flex: 0 0 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.sidebar[data-nav-state="ribbon"] .library-sidebar__search,
.sidebar[data-nav-state="ribbon"] .library-sidebar__new,
.admin-shell[data-sidebar="ribbon"] .library-sidebar__search,
.admin-shell[data-sidebar="ribbon"] .library-sidebar__new {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   THREE-SEGMENT SHELL HEADER (§1)
   ══════════════════════════════════════════ */

.shell-header--three-segment {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 600px) 1fr;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-2) var(--s-space-3);
}

.shell-header__left-cluster {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  min-width: 0;
  flex: 1;
}

.shell-header__center-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.shell-header__right-cluster {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-space-2);
  min-width: 0;
  flex: 1;
}

/* ≡ More-menu trigger (Brief 93 Part C, 2026-05-15).
   Inherits radius + cursor + focus-visible from `.header-icon-btn`. Sizing
   matches the search input height (2x active font-size) so the top-bar
   reads as one consistent affordance row aligned to the search field; the
   `min-width / min-height: 0` overrides flex's default `auto` minimum so
   the explicit width holds even with the 16x16 SVG glyph inside.
   States layered on top:
     - hover  → one greenscale step (calm-UI; no glow / shadow)
     - focus  → existing `.header-icon-btn:focus-visible` outline applies
     - active → when the More-menu overlay is open the trigger carries
                aria-expanded="true"; we paint a subtle surface fill so
                the user can read "this affordance owns the open panel". */
.shell-header__menu-btn {
  flex-shrink: 0;
  width: calc(var(--s-font-size-active) * 2);
  height: calc(var(--s-font-size-active) * 2);
  min-width: 0;
  min-height: 0;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.shell-header__menu-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.shell-header__menu-btn[aria-expanded="true"] {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.shell-header__menu-btn[aria-expanded="true"]:hover {
  background: var(--s-color-hover-bg);
}

/* GUIDE wordmark sits immediately right of ≡ with a 4–6px micro-gap (v5 chrome §1). */
.shell-header__left-cluster [data-guide-wordmark] {
  margin-left: var(--s-space-twohair);
  padding-left: 0;
}

/* Breadcrumb project switcher pill (v5 chrome §1).
   When inside a project: shows project name + chevron, clickable for switcher.
   When NOT in a project: stays a static breadcrumb segment (no chevron). */
.shell-breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-twohair) var(--s-space-2);
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  min-height: calc(var(--s-font-size-active) * 2);
  transition: background var(--s-duration-fast), border-color var(--s-duration-fast);
  /* Entire pill (label + chevron) opens the switcher — not just the chevron glyph. */
  -webkit-tap-highlight-color: transparent;
}

.shell-breadcrumb-pill:hover,
.shell-breadcrumb-pill:focus-visible {
  background: var(--s-brand-alpha-5);
  border-color: var(--s-color-border-subtle);
}

.shell-breadcrumb-pill:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.shell-breadcrumb-pill__sep {
  color: var(--s-color-fg-soft);
  font-weight: var(--s-font-weight-regular);
  margin-right: var(--s-space-twohair);
}

.shell-breadcrumb-pill__label,
.shell-breadcrumb-pill__segments {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  flex: 1 1 auto;
  align-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  cursor: pointer;
}

/* Segment children rendered by paintBreadcrumbSegments — keep them inline. */
.shell-breadcrumb-pill__segments .shell-breadcrumb-sep {
  color: var(--s-color-fg-soft);
}

.shell-breadcrumb-pill__segments .shell-breadcrumb-link {
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.shell-breadcrumb-pill__chevron {
  display: inline-flex;
  align-items: center;
  color: var(--s-color-fg-muted);
  flex-shrink: 0;
}

/* View-switcher slot (top-right; contents land in dependent brief). */
.shell-header__view-switcher-slot {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--s-font-size-active) * 1.85);
}

.shell-header__view-switcher-slot:empty {
  display: none;
}

/* Right-rail toggle in top-right (Brief 93 Part B; relocated from rail).
   Sits between the view-switcher slot and the theme toggle so it reads
   as part of the surface's top-toolbar action cluster. ⌘\ shortcut +
   active-state synced from initContextRailToggle on the .admin-shell
   root [data-context-rail-state]. Icon glyph flips via existing
   .ctx-rail-collapse-icon / .ctx-rail-expand-icon rules.
   Sizing matches the More-menu trigger + search input height (2x active
   font-size) so all top-bar icon affordances align as one row. */
.shell-header__rail-toggle {
  flex-shrink: 0;
  width: calc(var(--s-font-size-active) * 2);
  height: calc(var(--s-font-size-active) * 2);
  min-width: 0;
  min-height: 0;
  margin-left: var(--s-space-twohair);
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.shell-header__rail-toggle:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

/* Theme toggle in top-right (relocated from footer per v5 chrome §1).
   Rightmost child of the top bar after view-switcher slot. Sizing
   matches the other top-bar icon buttons so the affordance row aligns
   to the search input height. */
.shell-header__theme-toggle {
  flex-shrink: 0;
  width: calc(var(--s-font-size-active) * 2);
  height: calc(var(--s-font-size-active) * 2);
  min-width: 0;
  min-height: 0;
  margin-left: var(--s-space-1);
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.shell-header__theme-toggle:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

/* Notification inbox — global top-right (relocated from footer 2026-05-31). */
.shell-header__alerts {
  flex-shrink: 0;
  width: calc(var(--s-font-size-active) * 2);
  height: calc(var(--s-font-size-active) * 2);
  min-width: 0;
  min-height: 0;
  margin-left: var(--s-space-1);
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.shell-header__alerts:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.shell-header__alerts[aria-expanded="true"] {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

/* ── Global search (§1 center) ─────────────────────────────────────────── */

.shell-global-search {
  width: 100%;
  max-width: 600px;
  transition: max-width var(--s-duration-normal);
}

/* 2026-05-20 iter1k/iter1m/iter1p: at narrow viewports collapse global
   search to icon + ⌘K hint sitting cleanly inline. Click opens the
   command palette modal (full search). Caitlin direct iter1p: the
   8px-absolute-positioned ⌘K badge crammed at the bottom-right corner
   looked wrong — render it in normal flow instead. */
@media (max-width: 1280px) {
  .shell-global-search {
    /* Wide enough for icon + ⌘K hint side-by-side in normal flow. */
    max-width: 76px;
  }
  .shell-global-search:focus-within {
    max-width: 400px;
  }
  /* Hide the input text + placeholder when collapsed — input shrinks to
     zero width so icon + ⌘K hint sit naturally side-by-side. */
  .shell-global-search:not(:focus-within) .shell-global-search__input {
    width: 0;
    min-width: 0;
    padding: 0;
    flex: 0 0 0;
  }
  .shell-global-search:not(:focus-within) .shell-global-search__input::placeholder {
    opacity: 0;
  }
  .shell-global-search:not(:focus-within) .shell-global-search__hint {
    opacity: 0.7;
  }
  .shell-global-search:not(:focus-within) .shell-global-search__field {
    cursor: pointer;
  }
}

.shell-global-search__field {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-3);
  min-height: 2.25rem;
  background: var(--s-brand-alpha-5);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  transition: border-color var(--s-duration-fast);
  cursor: text;
}

.shell-global-search__field:focus-within {
  border-color: var(--s-color-accent-active);
  background: var(--s-color-bg-panel);
}

.shell-global-search__icon {
  color: var(--s-color-fg-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.shell-global-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--s-font-size-2);
  line-height: 1.35;
  color: var(--s-color-fg-primary);
  font-family: inherit;
  min-width: 0;
}

.shell-global-search__input::placeholder {
  color: var(--s-color-fg-muted);
}

.shell-global-search__hint {
  font-size: var(--s-font-size-1);
  padding: 2px var(--s-space-2);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  flex-shrink: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   NAV SCOPED SEARCH (§2, open state only)
   ══════════════════════════════════════════ */

.nav-scoped-search-row {
  padding: var(--s-space-1) var(--s-space-2);
  flex-shrink: 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
}

/* Hidden in ribbon state */
.sidebar[data-nav-state="ribbon"] .nav-scoped-search-row {
  display: none;
}

.nav-scoped-search-field {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-3);
  height: calc(var(--s-font-size-active) * 2);
  background: var(--s-brand-alpha-5);
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  cursor: text;
  transition: border-color var(--s-duration-fast);
}

.nav-scoped-search-field:focus-within {
  border-color: var(--s-color-border-subtle);
}

/* ══════════════════════════════════════════
   SIBLING BODY (§4, open state only)
   ══════════════════════════════════════════ */

.nav-sibling-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* Match horizontal padding of .nav-scoped-search-row above so sibling content
     insets consistently from the sidebar edge. */
  padding: var(--s-space-1) var(--s-space-2);
}

/* Hidden in ribbon state */
.sidebar[data-nav-state="ribbon"] .nav-sibling-body {
  display: none;
}

.nav-sibling-slot {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Author override for [hidden] — the bare .nav-sibling-slot rule above has
   higher specificity than the UA stylesheet's [hidden] { display: none },
   so without this rule slot.hidden = true has no visible effect and all
   5 sibling bodies stack simultaneously (Caitlin visceral 2026-05-13 evening
   post-c2a18f6c; 307bef16 hide-loop only set the attribute, the CSS path
   was the actual gap). */
.nav-sibling-slot[hidden] {
  display: none;
}

/* Brief 103 — section-state FilterRail mount point. The operations-admin
 * roadmap page (and future per-surface FilterRail consumers) prepends a
 * `[data-section-filter-rail-host]` slot into nav-sibling-body and mounts
 * the FilterRail there. We give it explicit flex sizing so the rail's own
 * scrollable content sits inside the sidebar viewport without overflow. */
.nav-sibling-slot--filter-rail,
[data-section-filter-rail-host] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-section-filter-rail-host] .s-filter-rail {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	width: var(--shell-sidebar-w);
	max-width: 100%;
}

/* When the section-state FilterRail is active, hide the other sibling
 * slots so the rail owns the rail surface (per Brief 103: "navigating to
 * /operations/admin/roadmap shows populated FilterRail in left sidebar"). */
.nav-sibling-body[data-filter-rail-active] > .nav-sibling-slot:not(.nav-sibling-slot--filter-rail) {
  display: none;
}

/* Also hide appearance row in ribbon */
.sidebar[data-nav-state="ribbon"] .sidebar-appearance-row {
  display: none;
}

/* Sidebar-bottom trio (nav-rework-v1.1) retired — user-footer-alignment-restoration:
   account chrome lives directly in the shell footer inner row (no left-column wrapper
   as of 2026-06-09; alerts moved to shell header top-right per Brief 90 cleanup). */

/* ══════════════════════════════════════════
   HUGE MODAL (§6)
   ══════════════════════════════════════════ */

.huge-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--s-color-backdrop-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4);
}

.huge-modal {
  background: var(--s-color-bg-panel);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
  box-shadow: var(--s-shadow-xl);
  display: flex;
  flex-direction: column;
  width: calc(100vw - var(--s-space-8));
  height: calc(100dvh - var(--s-space-8));
  max-width: 1400px;
  max-height: 900px;
  overflow: hidden;
  animation: huge-modal-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
  position: relative;
}

@keyframes huge-modal-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.huge-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-space-3) var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
}

.huge-modal__title {
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.huge-modal__close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--s-font-size-active) * 2);
  height: calc(var(--s-font-size-active) * 2);
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--s-duration-fast), color var(--s-duration-fast);
}

.huge-modal__close-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.huge-modal__close-btn:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: 2px;
}

.huge-modal__body {
  flex: 1 1 0%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-space-4);
}

/* ══════════════════════════════════════════
   HAMBURGER OVERLAY (Cowork-style anchored popover — not left slide-in)
   ══════════════════════════════════════════ */

/* CSS-driven hover popover (Caitlin 2026-05-27: "only using CSS for this —
   JS not necessary"). The .hamburger-host wraps the trigger; CSS :hover,
   :focus-within, and :has(.hamburger-overlay:hover) drive visibility
   directly with no JS timer.

   Critical detail: the hover-bridge is on the HOST (::after, always present),
   NOT on the panel (::before, only present when panel is shown). With a
   panel-side bridge, the moment mouse enters the visual gap, host:hover
   becomes false → panel display:none → bridge ceases to exist → panel
   cannot re-open from bridge hover. With host-side bridge, the bridge is
   ALWAYS in layout, so mouse in the gap keeps host:hover true and the
   panel stays open across traversal. */

.hamburger-host {
  position: relative;
  display: inline-flex;
}

/* Always-on hover bridge — invisible catchment extending below the trigger.
   18px covers the 6px trigger→panel gap plus slop when the panel is
   position:fixed (JS-aligned) so traversal does not drop host:hover. */
.hamburger-host::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
  /* transparent — purely a hover catchment */
  pointer-events: auto;
}

.hamburger-overlay.shell-menu-drawer {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  padding: 0;
  width: min(360px, calc(100vw - var(--s-space-4)));
  max-height: 80vh;
  max-height: 80dvh;
  flex-direction: column;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-lg);
  background: var(--s-color-bg-panel);
  box-shadow: var(--s-shadow-lg);
  /* Above notebook cell palette (300) and shell header row (40) */
  z-index: 1200;
  overflow: hidden;
  display: none;
}

/* Show on hover, focus-within (keyboard), nested panel hover (:has), or
   explicit click-lock (.is-open). Hide explicitly when .force-closed is
   set by an X-button / Esc / click-outside dismissal — until mouseleave
   clears it. */
.hamburger-host:hover > .hamburger-overlay,
.hamburger-host:focus-within > .hamburger-overlay,
.hamburger-host:has(> .hamburger-overlay:hover) > .hamburger-overlay,
.hamburger-host.is-open > .hamburger-overlay {
  display: flex;
}

/* .force-closed must trump EVERY show selector above. Each show rule has
   its own specificity (the :has() variant is (0,4,0) — the highest), so
   pair .force-closed with the same matching state to push specificity to
   (0,5,0) and beat the show. Doctrine: state-overrides must have higher
   specificity than implicit interaction states — see
   research/memory-drops/feedback_css_specificity_defeats_state_toggle.md.
   Regression history: #230 → #249 → #263 — each later "improvement" to
   the show rules outran the single low-specificity .force-closed hide. */
.hamburger-host.force-closed > .hamburger-overlay,
.hamburger-host.force-closed:hover > .hamburger-overlay,
.hamburger-host.force-closed:focus-within > .hamburger-overlay,
.hamburger-host.force-closed:has(> .hamburger-overlay:hover) > .hamburger-overlay,
.hamburger-host.force-closed.is-open > .hamburger-overlay {
  display: none;
}

.hamburger-overlay[hidden] {
  display: none;
}

/* Fixed child of .hamburger-host — escapes shell-top-cluster stacking while
   keeping :hover / :focus-within on the host (body-portal broke hover). */
.hamburger-overlay.hamburger-overlay--portal {
  position: fixed;
  z-index: 10050;
}

.hamburger-overlay__inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}

.hamburger-overlay__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.hamburger-overlay__section {
  display: flex;
  flex-direction: column;
}

.hamburger-overlay__empty {
  margin: 0;
  padding: var(--s-space-2) var(--s-space-3);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.hamburger-overlay__item--highlighted {
  background: var(--s-color-bg-hover);
}

/* Legacy dialog drawer selectors — retained for any stale markup */
.shell-menu-drawer:not(.hamburger-overlay) {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  height: 100dvh;
  width: min(320px, 85vw);
  margin: 0;
  padding: 0;
  border: none;
  border-right: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  box-shadow: var(--s-shadow-lg);
  z-index: 950;
}
.shell-menu-drawer:not(.hamburger-overlay)[open] {
  display: flex;
  flex-direction: column;
}

.shell-menu-drawer:not(.hamburger-overlay)::backdrop {
  background: var(--s-color-backdrop-scrim);
}

.shell-menu-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hamburger-overlay .shell-menu-drawer__inner {
  height: auto;
  max-height: inherit;
}

.shell-menu-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-space-3) var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
}

/* More menu header bar: brand mark left, close X right (visual pass 2026-05-15). */
.more-menu__header {
  padding: var(--s-space-2) var(--s-space-3);
}

.more-menu__brand {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-bold);
  color: var(--s-color-fg-primary);
  letter-spacing: 0.04em;
  user-select: none;
}

.more-menu__close {
  margin-left: auto;
  flex-shrink: 0;
}

.shell-menu-drawer__title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.shell-menu-drawer__body {
  flex: 1;
  padding: var(--s-space-3) var(--s-space-2);
  display: flex;
  flex-direction: column;
}

.shell-menu-drawer__stub {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  margin: 0;
}

/* Section labels: mono, all-caps, condensed size, muted (visual pass 2026-05-15). */
.more-menu__section-label {
  display: block;
  padding: var(--s-space-2) var(--s-space-3) var(--s-space-1);
  font-family: var(--s-font-family-mono);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s-color-fg-muted);
  pointer-events: none;
}

/* More menu items (2026-05-15 visceral iter — populated destinations + clickable) */
.shell-menu-drawer__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  border-radius: var(--s-radius-md);
  color: var(--s-color-fg-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--s-duration-fast);
}

/* Subtle leading icon — decorative anchor, not a separate click target. */
.shell-menu-drawer__item-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--s-icon-sm);
  height: var(--s-icon-sm);
  color: var(--s-color-fg-muted);
  pointer-events: none;
}

.shell-menu-drawer__item:hover {
  background: var(--s-color-bg-hover);
}

.shell-menu-drawer__item:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: -2px;
}

.shell-menu-drawer__item-label {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-regular);
}

/* Active route: brand-alpha background + left accent bar + medium weight. */
.shell-menu-drawer__item--active {
  background: var(--s-brand-alpha-10);
  color: var(--s-color-fg-primary);
}

.shell-menu-drawer__item--active .shell-menu-drawer__item-label {
  font-weight: var(--s-font-weight-medium);
}

.shell-menu-drawer__item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--s-color-accent-default);
  border-radius: var(--s-radius-sm) 0 0 var(--s-radius-sm);
}

.shell-menu-drawer__item--secondary .shell-menu-drawer__item-label {
  color: var(--s-color-fg-muted);
}

.shell-menu-drawer__divider {
  border: none;
  border-top: 1px solid var(--s-color-border-subtle);
  margin: var(--s-space-2) 0;
}

/* ══════════════════════════════════════════
   FOOTER STATUS / TIER — readiness display
   Theme + feedback buttons relocated (top-right + avatar dropdown) per v5 chrome.
   ══════════════════════════════════════════ */

/* Readiness display (nav-rework-v1.2 §5): shows "Ready · Tier" inline.
   Text rendered by JS (updateReadinessDisplay in admin-shell.js). */
.shell-footer__right .shell-footer__status[data-readiness-display],
.shell-footer__right .shell-footer__system-state[data-readiness-display] {
  font-variant-numeric: tabular-nums;
}

.shell-footer__status__tier {
  opacity: 0.7;
}

/* ══════════════════════════════════════════
   SIBLING BODY INTERIORS — shared primitives
   ══════════════════════════════════════════ */

/* Projects body */
.sibling-projects__picker {
  padding: var(--s-space-2) var(--s-space-2) var(--s-space-1);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
}

.sibling-projects__picker-label {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-weight: var(--s-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-space-1);
}

.sibling-projects__picker-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
}

.sibling-projects__picker-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-1) var(--s-space-2);
  background: var(--s-brand-alpha-5);
  border-radius: var(--s-radius-1);
  border: 1px solid transparent;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--s-duration-fast), background var(--s-duration-fast);
}

.sibling-projects__picker-btn:hover {
  background: var(--s-color-hover-bg);
  border-color: var(--s-color-border-subtle);
}

.sibling-projects__picker-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sibling-projects__new-btn,
.sibling-projects__new-event-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-1);
  cursor: pointer;
  transition: background var(--s-duration-fast), color var(--s-duration-fast);
}

.sibling-projects__new-btn:hover,
.sibling-projects__new-event-btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sibling-projects__timeline {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sibling-projects__timeline-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s-space-1) 0;
}

.sibling-projects__new-event-btn {
  margin: var(--s-space-1) var(--s-space-2) var(--s-space-2);
  justify-content: flex-start;
  border: 1px dashed var(--s-color-border-subtle);
}

/* Libraries body */
.sibling-libraries__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  padding: var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
}

.sibling-libraries__tag-chip {
  padding: 2px var(--s-space-2);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-round);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition: background var(--s-duration-fast), color var(--s-duration-fast), border-color var(--s-duration-fast);
}

.sibling-libraries__tag-chip:hover,
.sibling-libraries__tag-chip.active {
  background: var(--s-brand-alpha-10);
  border-color: var(--s-brand-alpha-20);
  color: var(--s-color-fg-primary);
}

.sibling-libraries__list,
.sibling-lab-tools__list,
.sibling-docs__list,
.sibling-admin__list,
.sibling-admin__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--s-space-1) 0;
}

/* The admin nav now mounts the parent-secondary-nav primitive; the host
   inherits the same flex column rules as the legacy list, and the
   primitive's CSS owns row chrome (.psn / .psn__*). */
.sibling-admin__psn.psn {
  width: 100%;
}

/* Lab tools tabs */
.sibling-lab-tools__tabs,
.sibling-docs__tabs,
.sibling-admin__subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sibling-lab-tools__tab,
.sibling-docs__tab,
.sibling-admin__subtab {
  padding: var(--s-space-1) var(--s-space-2);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--s-duration-fast), border-color var(--s-duration-fast);
  margin-bottom: -1px;
}

.sibling-lab-tools__tab:hover,
.sibling-docs__tab:hover,
.sibling-admin__subtab:hover {
  color: var(--s-color-fg-primary);
}

.sibling-lab-tools__tab[aria-selected="true"],
.sibling-docs__tab[aria-selected="true"],
.sibling-admin__subtab[aria-selected="true"] {
  color: var(--s-color-fg-primary);
  border-bottom-color: var(--s-color-accent-active);
  font-weight: var(--s-font-weight-medium);
}

/* Glossary tab — distinct visual weight */
.sibling-docs__tab--glossary {
  font-weight: var(--s-font-weight-semibold);
}

/* Admin filter input */
.sibling-admin__filter-row {
  padding: var(--s-space-1) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
}

.sibling-admin__filter-input {
  width: 100%;
  padding: var(--s-space-1) var(--s-space-2);
  background: var(--s-brand-alpha-5);
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-1);
  font-family: inherit;
  color: var(--s-color-fg-primary);
  transition: border-color var(--s-duration-fast);
}

.sibling-admin__filter-input:focus {
  outline: none;
  border-color: var(--s-color-border-subtle);
}

.sibling-admin__filter-input::placeholder {
  color: var(--s-color-fg-muted);
}

.sibling-admin__empty {
  padding: var(--s-space-3) var(--s-space-4);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

/* Shared list item styling (reuses .tree-item for consistency) */
.sibling-projects__timeline-item,
.sibling-libraries__list-item,
.sibling-lab-tools__list-item,
.sibling-docs__list-item,
.sibling-admin__list-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   SIDEBAR POPOVER COMPONENTS (nav-rework-v1.1 §5/§6)
   Alerts stub + settings cog popovers
   ══════════════════════════════════════════ */

.sidebar-popover__header {
  display: flex;
  align-items: center;
  padding: var(--s-space-2) var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
}

.sidebar-popover__title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  letter-spacing: 0.02em;
}

.sidebar-popover__body {
  padding: var(--s-space-2) var(--s-space-3);
}

.sidebar-popover__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4) var(--s-space-3);
}

.sidebar-popover__empty-text {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.sidebar-popover__footer {
  padding: var(--s-space-2) var(--s-space-3);
  border-top: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
}

.sidebar-popover__muted {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-style: italic;
}

.project-switcher-popover {
  min-width: 220px;
  max-width: 320px;
}

/* Notebook / project workspace: popover must sit above shell-top-cluster (z-index 250). */
html[data-guide-project-surface="notebook"] .project-switcher-popover,
html[data-guide-project-surface] .project-switcher-popover {
  z-index: 1300;
}

.project-switcher-popover__body {
  max-height: min(280px, 40vh);
  overflow-y: auto;
  padding: var(--s-space-1) 0;
}

.project-switcher-popover__body .sidebar-popover__empty {
  padding: var(--s-space-3);
}

.project-switcher-popover .menu-item--active {
  background: var(--s-brand-alpha-5);
  font-weight: var(--s-font-weight-medium);
}

.project-switcher-popover__see-all {
  width: 100%;
}

/* ══════════════════════════════════════════
   DARK THEME OVERRIDES — nav-rework-v1
   ══════════════════════════════════════════ */

[data-theme="dark"] .shell-global-search__field {
  background: var(--s-brand-alpha-5);
  border-color: var(--s-color-border-subtle);
}

/* ══════════════════════════════════════════
   ACCOUNT MENU (avatar dropdown — v5 chrome §2)
   Identity header + role row + action items.
   ══════════════════════════════════════════ */

.account-menu .account-menu__identity {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
}

.account-menu__identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-menu__identity-name {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu__identity-email {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu__role-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
}

.account-menu__role-chevron {
  margin-left: auto;
  color: var(--s-color-fg-muted);
  display: inline-flex;
  align-items: center;
}

/* ══════════════════════════════════════════
   ADAPTIVE SIDEBAR (Brief 82, 2026-05-14)
   data-sidebar-state="global|project|section" on .sidebar drives which
   pane is visible. nav-scoped-search-row + nav-sibling-body are the
   section-state pane, hidden via CSS when state != "section".
   ══════════════════════════════════════════ */

/* Default-hide the project / project-hub / global state panes; the
   active pane is un-hidden by the matching state selector below. */
.sidebar [data-sidebar-state-content="project"],
.sidebar [data-sidebar-state-content="project-hub"],
.sidebar [data-sidebar-state-content="global"] {
  display: none;
}

.sidebar[data-sidebar-state="project"] [data-sidebar-state-content="project"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}

.sidebar[data-sidebar-state="project-hub"] [data-sidebar-state-content="project-hub"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}

.sidebar[data-sidebar-state="global"] [data-sidebar-state-content="global"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}

/* When the sidebar is NOT in section state, hide section-state children
   so the active state pane owns the whole sidebar body. */
.sidebar:not([data-sidebar-state="section"]):not([data-sidebar-state]) ~ .nope { /* anchor */ }

.sidebar[data-sidebar-state="project"] > .nav-scoped-search-row,
.sidebar[data-sidebar-state="project"] > .nav-sibling-body,
.sidebar[data-sidebar-state="project-hub"] > .nav-scoped-search-row,
.sidebar[data-sidebar-state="project-hub"] > .nav-sibling-body,
.sidebar[data-sidebar-state="global"] > .nav-scoped-search-row,
.sidebar[data-sidebar-state="global"] > .nav-sibling-body {
  display: none;
}

/* Wide-layout grid: project / project-hub / global state panes span
   section-state rows. */
@media (min-width: 1024px) {
  .admin-shell > .admin-shell__nav-column > .sidebar > [data-sidebar-state-content="project"],
  .admin-shell > .admin-shell__nav-column > .sidebar > [data-sidebar-state-content="project-hub"],
  .admin-shell > .admin-shell__nav-column > .sidebar > [data-sidebar-state-content="global"] {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 0;
  }
}

/* ── Project state — icon strip row (collapse arrow · local search) ── */
.sidebar-project-icon-strip {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  flex-shrink: 0;
  min-height: var(--shell-sidebar-icon-strip-h);
  overflow: hidden;
}

.sidebar-project-icon-strip__collapse {
  flex-shrink: 0;
  width: var(--shell-sidebar-collapse-w);
  height: var(--shell-sidebar-collapse-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  border-radius: var(--s-radius-1);
  cursor: pointer;
  font-size: calc(var(--s-font-size-active) * 1.1);
  line-height: 1;
  padding: 0;
  transition: color var(--s-duration-fast), background var(--s-duration-fast);
}

.sidebar-project-icon-strip__collapse:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sidebar-project-icon-strip__collapse:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.sidebar-project-icon-strip__search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: 0 var(--s-space-2);
  height: calc(var(--s-font-size-active) * 1.8);
  background: var(--s-brand-alpha-5);
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  cursor: text;
  transition: border-color var(--s-duration-fast);
}

.sidebar-project-icon-strip__search:focus-within {
  border-color: var(--s-color-border-subtle);
}

.sidebar-project-icon-strip__search-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--s-color-fg-muted);
}

.sidebar-project-icon-strip__search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-1);
  font-family: inherit;
}

.sidebar-project-icon-strip__search-input::placeholder {
  color: var(--s-color-fg-muted);
}

/* ── Project state — TIMELINE substrate ── */
.sidebar-project-timeline {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-project-timeline__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-twohair);
  padding: var(--s-space-2) var(--s-space-2) var(--s-space-1);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.sidebar-project-timeline__label-left {
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  min-width: 0;
}

.sidebar-project-timeline__new {
  flex-shrink: 0;
  width: var(--shell-sidebar-collapse-w);
  height: var(--shell-sidebar-collapse-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  border-radius: var(--s-radius-1);
  cursor: pointer;
  padding: 0;
  transition: color var(--s-duration-fast), background var(--s-duration-fast);
}

.sidebar-project-timeline__new:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sidebar-project-timeline__new:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.sidebar-project-timeline__count {
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-tertiary);
  font-size: var(--s-font-size-0);
  letter-spacing: 0;
  text-transform: none;
}

[data-sidebar-state="project"] .sidebar-project-timeline__events,
[data-sidebar-state-content="project"] .sidebar-project-timeline__events {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--s-space-2) var(--s-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.sidebar-project-timeline__empty {
  padding: var(--s-space-3) var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
}

/* ── Sidebar filter chip strip (GH #252, 2026-05-27) ──────────────────────
   Narrow-column variant of the project-timeline-view toolbar.
   Search input + since-days select + event-type chips render inline;
   author + tier-A live in a popover drawer so the strip never wraps. */

.sidebar-project-filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: var(--s-space-1) var(--s-space-2) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex-shrink: 0;
  position: relative;
}

.sidebar-project-filter-strip:empty {
  display: none;
}

.sidebar-project-filter-strip__search {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: 0 var(--s-space-2);
  height: calc(var(--s-font-size-active) * 1.7);
  background: var(--s-brand-alpha-5);
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  transition: border-color var(--s-duration-fast);
}

.sidebar-project-filter-strip__search:focus-within {
  border-color: var(--s-color-border-subtle);
}

.sidebar-project-filter-strip__search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-0);
  font-family: inherit;
}

.sidebar-project-filter-strip__search-input::placeholder {
  color: var(--s-color-fg-muted);
}

.sidebar-project-filter-strip__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-space-twohair);
  width: 100%;
  min-width: 0;
}

.sidebar-project-filter-strip__since {
  flex-shrink: 0;
  background: transparent;
  color: var(--s-color-fg-muted);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-0);
  font-family: inherit;
  padding: 0 var(--s-space-1);
  height: calc(var(--s-font-size-active) * 1.5);
  cursor: pointer;
}

.sidebar-project-filter-strip__since:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.sidebar-project-filter-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-hair);
  min-width: 0;
}

.sidebar-project-filter-strip__chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-space-1);
  height: calc(var(--s-font-size-active) * 1.5);
  font-size: var(--s-font-size-0);
  font-family: inherit;
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  cursor: pointer;
  text-transform: lowercase;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast),
    border-color var(--s-duration-fast);
}

.sidebar-project-filter-strip__chip:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sidebar-project-filter-strip__chip:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.sidebar-project-filter-strip__chip[data-on="true"] {
  background: var(--s-brand-alpha-15, var(--s-brand-alpha-5));
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-fg-secondary);
}

.sidebar-project-filter-strip__more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-space-1);
  height: calc(var(--s-font-size-active) * 1.5);
  font-size: var(--s-font-size-0);
  font-family: inherit;
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  cursor: pointer;
}

.sidebar-project-filter-strip__more:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sidebar-project-filter-strip__more[aria-expanded="true"] {
  border-color: var(--s-color-border-subtle);
  color: var(--s-color-fg-primary);
}

.sidebar-project-filter-strip__more:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.sidebar-project-filter-strip__more-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--s-space-hair);
  border-radius: 50%;
  background: var(--s-color-fg-secondary);
}

.sidebar-project-filter-strip__popover {
  position: absolute;
  z-index: 20;
  right: var(--s-space-2);
  top: 100%;
  margin-top: var(--s-space-1);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-2);
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
}

.sidebar-project-filter-strip__popover[hidden] {
  display: none;
}

.sidebar-project-filter-strip__popover-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-hair);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.sidebar-project-filter-strip__popover-row > input[type="text"] {
  appearance: none;
  background: transparent;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: 0 var(--s-space-2);
  height: calc(var(--s-font-size-active) * 1.7);
  color: var(--s-color-fg-primary);
  font-family: inherit;
  font-size: var(--s-font-size-0);
  outline: none;
  transition: border-color var(--s-duration-fast);
}

.sidebar-project-filter-strip__popover-row > input[type="text"]:focus-visible {
  border-color: var(--s-color-fg-secondary);
}

.sidebar-project-filter-strip__popover-row--check {
  flex-direction: row;
  align-items: center;
  gap: var(--s-space-twohair);
  color: var(--s-color-fg-primary);
}

.sidebar-project-filter-strip__popover-row--check > input {
  margin: 0;
}

/* Hide filter strip in ribbon mode — chips give way to the ribbon-rail
   density bands instead. The strip stays in the DOM so chip state survives
   the collapse/expand round-trip. */
.sidebar[data-nav-state="ribbon"] [data-sidebar-state-content="project"] .sidebar-project-filter-strip,
.admin-shell[data-sidebar="ribbon"] [data-sidebar-state-content="project"] .sidebar-project-filter-strip {
  display: none;
}

/* ── 36px ribbon-rail content (GH #252, 2026-05-27, v5 chrome point 16) ───
   Vertical date axis + weekly density bands + event-count pill.
   Visible only when the project pane is mounted AND the sidebar is in
   ribbon mode. Click any band → expand sidebar AND scroll to that week. */

.sidebar-project-ribbon {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  padding: var(--s-space-2) 0 var(--s-space-1);
  gap: var(--s-space-hair);
}

.sidebar[data-nav-state="ribbon"] [data-sidebar-state-content="project"] .sidebar-project-ribbon,
.admin-shell[data-sidebar="ribbon"] [data-sidebar-state-content="project"] .sidebar-project-ribbon {
  display: flex;
}

.sidebar-project-ribbon__rail {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: block;
  cursor: pointer;
}

.sidebar-project-ribbon__band {
  cursor: pointer;
  transition: opacity var(--s-duration-fast);
}

.sidebar-project-ribbon__band--has-events {
  fill: var(--s-color-prominent-bg);
}

.sidebar-project-ribbon__band--empty {
  fill: var(--s-color-border-subtle);
}

.sidebar-project-ribbon__band:hover {
  opacity: 0.7;
}

.sidebar-project-ribbon__band:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -1px;
}

.sidebar-project-ribbon__month-tick {
  stroke: var(--s-color-border-subtle);
  stroke-width: 0.5;
}

.sidebar-project-ribbon__month-label {
  fill: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  font-size: 6px;
}

.sidebar-project-ribbon__year-label {
  fill: var(--s-color-fg-secondary);
  font-family: var(--s-font-mono);
  font-size: 7px;
  font-weight: var(--s-font-weight-semibold);
}

.sidebar-project-ribbon__count {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: calc(var(--s-font-size-active) * 1.3);
  padding: 0 var(--s-space-hair);
  margin-top: var(--s-space-1);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  font-variant-numeric: tabular-nums;
  color: var(--s-color-fg-muted);
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: 999px;
}

.sidebar-project-ribbon__empty {
  align-self: center;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: var(--s-space-2) 0;
}

/* ── TIMELINE — project sidebar visual register (Brief 102, 2026-05-17) ───
   Widget-card day groups inside [data-timeline-events]: chevron + icon +
   date label + count chip header; events flush-left in .sidebar-event-list
   with SAR-drawer typographic hierarchy on each row. Tokens only — v5 sidebar
   surface (--s-color-bg-panel), not SAR drawer color-mix recipe. ───────── */

[data-sidebar-state="project"] [data-timeline-day],
[data-sidebar-state-content="project"] [data-timeline-day] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--shell-sidebar-card-surface);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  overflow: hidden;
}

.sidebar-card__header,
.sidebar-event-card > .sidebar-card__header {
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  min-height: var(--shell-sidebar-card-header-h);
  padding: 0 var(--s-space-2);
  color: var(--s-color-fg-secondary);
  flex-shrink: 0;
}

.sidebar-card__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.sidebar-card__chevron:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sidebar-card__chevron:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.sidebar-card__chevron-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--s-font-size-0);
  line-height: 1;
  transition: transform var(--s-duration-fast);
}

[data-sidebar-state="project"] [data-timeline-day][aria-expanded="false"] .sidebar-card__chevron-glyph,
[data-sidebar-state-content="project"] [data-timeline-day][aria-expanded="false"] .sidebar-card__chevron-glyph {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-card__chevron-glyph {
    transition: none;
  }
}

.sidebar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--s-color-fg-muted);
}

.sidebar-card__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-card__count {
  flex-shrink: 0;
  font-size: var(--s-font-size-0);
  font-variant-numeric: tabular-nums;
  color: var(--s-color-fg-muted);
}

[data-sidebar-state="project"] .sidebar-event-list,
[data-sidebar-state-content="project"] .sidebar-event-list,
[data-sidebar-state="project"] [data-timeline-day-events],
[data-sidebar-state-content="project"] [data-timeline-day-events] {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-width: 0;
}

[data-sidebar-state="project"] [data-timeline-day-events][hidden],
[data-sidebar-state-content="project"] [data-timeline-day-events][hidden] {
  display: none;
}

[data-sidebar-state="project"] .sidebar-project-timeline__event,
[data-sidebar-state-content="project"] .sidebar-project-timeline__event {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-space-twohair);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--s-space-2);
  border: none;
  border-radius: 0;
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    background var(--s-duration-fast),
    border-color var(--s-duration-fast);
}

[data-sidebar-state="project"] .sidebar-event-list > .sidebar-project-timeline__event:not(:last-child),
[data-sidebar-state-content="project"] .sidebar-event-list > .sidebar-project-timeline__event:not(:last-child) {
  border-bottom: 1px solid var(--s-color-border-subtle);
}

[data-sidebar-state="project"] .sidebar-project-timeline__event:hover,
[data-sidebar-state-content="project"] .sidebar-project-timeline__event:hover {
  background: var(--s-color-hover-bg);
}

[data-sidebar-state="project"] .sidebar-project-timeline__event:focus-visible,
[data-sidebar-state-content="project"] .sidebar-project-timeline__event:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

[data-sidebar-state="project"] .sidebar-project-timeline__event.is-timeline-active,
[data-sidebar-state-content="project"] .sidebar-project-timeline__event.is-timeline-active {
  border-left-color: var(--s-color-accent-default);
  background: transparent;
}

.sidebar-event-card__title {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--s-color-fg-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-event-card__title[data-tint="info"] {
  color: var(--s-color-status-info);
}
.sidebar-event-card__title[data-tint="warning"] {
  color: var(--s-color-status-warning);
}
.sidebar-event-card__title[data-tint="success"] {
  color: var(--s-color-status-success);
}

.sidebar-event-card__sub {
  margin: 0;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.04em;
  color: var(--s-color-fg-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-event-card__fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-space-3);
  row-gap: var(--s-space-2);
  margin: 0;
}

.sidebar-event-card__fields dt {
  font-family: var(--s-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
  color: var(--s-color-fg-muted);
  align-self: start;
  padding-top: var(--s-space-twohair);
}

.sidebar-event-card__fields dd {
  margin: 0;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  word-break: break-word;
}

.sidebar-event-card__fields dd[data-tint="info"] {
  color: var(--s-color-status-info);
}
.sidebar-event-card__fields dd[data-tint="warning"] {
  color: var(--s-color-status-warning);
}
.sidebar-event-card__fields dd[data-tint="success"] {
  color: var(--s-color-status-success);
}

/* ── Local search — sidebar TIMELINE highlights (Brief 84 guide-shell-v5-local-search-highlight)
   Orthogonal to Brief 93's collapse-by-day grouping above — these selectors
   target `.sidebar-project-timeline__event` (the row inside each day's list)
   plus a marker-rail overlay along the timeline pane. KEEP BOTH: search adds
   visual annotation; collapse-by-day owns row layout. ── */
.sidebar-project-timeline__event.is-search-match {
  position: relative;
  background: var(--local-search-match-bg);
  border-left: 2px solid var(--local-search-match-border);
  padding-left: calc(var(--s-space-tight-3) - 2px);
}

.sidebar-project-timeline__event.is-search-match.is-search-match-current {
  background: var(--local-search-match-current-bg);
}

/* Marker rail — overlay along the right edge of the timeline pane.
   Native scrollbar is preserved beneath; the rail just paints density
   buckets per match position so users get a one-glance overview. */
.sidebar-project-timeline {
  position: relative;
}

.sidebar-timeline-marker-rail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--local-search-marker-rail-w);
  pointer-events: none;
  z-index: 2;
}

.sidebar-timeline-marker {
  position: absolute;
  left: 1px;
  right: 1px;
  background: var(--local-search-marker-color);
  border-radius: 1px;
  pointer-events: none;
}

.sidebar-timeline-marker--current {
  left: 0;
  right: 0;
  background: var(--local-search-marker-current-color);
  outline: 1px solid var(--local-search-marker-current-color);
}

/* Search controls row — count + ↑↓ + ✕. Visible only when the orchestrator
   stamps `data-local-search-state="active"|"no-matches"` on the project
   pane root; idle hides the row entirely. */
.sidebar-project-search-controls {
  display: none;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-twohair) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  flex-shrink: 0;
  font-size: var(--s-font-size-1);
}

[data-sidebar-state="project"][data-local-search-state="active"]
  .sidebar-project-search-controls,
[data-sidebar-state-content="project"][data-local-search-state="active"]
  .sidebar-project-search-controls,
[data-sidebar-state="project"][data-local-search-state="no-matches"]
  .sidebar-project-search-controls,
[data-sidebar-state-content="project"][data-local-search-state="no-matches"]
  .sidebar-project-search-controls {
  display: flex;
}

.sidebar-project-search-controls__count {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--s-color-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-local-search-state="no-matches"] .sidebar-project-search-controls__count {
  color: var(--s-color-status-warning);
}

.sidebar-project-search-controls__btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  border-radius: var(--s-radius-1);
  cursor: pointer;
  font-size: var(--s-font-size-1);
  font-family: inherit;
  line-height: 1;
  padding: 0;
  transition: background var(--s-duration-fast), color var(--s-duration-fast);
}

.sidebar-project-search-controls__btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.sidebar-project-search-controls__btn:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

/* Visually-hidden live announcer for screen readers ("Match N of M"). */
.sidebar-project-search-live {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Cross-surface badge — small green dot on view-switcher buttons whose
   surface has local-search matches. Painted via `data-match-count` on the
   button (mirrored from `data-view`); count > 0 reveals the dot. */
.project-view-switcher__btn[data-match-count] {
  position: relative;
}

.project-view-switcher__btn[data-match-count]::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--local-search-badge-color);
  box-shadow: none;
  pointer-events: none;
}

/* Brief 84 v2 — cross-surface badge on the page-tools mode buttons
   (operations-admin-roadmap.js kanban / briefing / timeline). The mode
   wrapper is marked `data-view-switcher`; each button mirrors its
   `data-view` → `data-view-icon` so the same painter can light all three
   simultaneously while the project timeline has matches. */
.pw-headerc__mode[data-match-count] {
  position: relative;
}

.pw-headerc__mode[data-match-count]::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--local-search-badge-color);
  box-shadow: none;
  pointer-events: none;
}

/* Brief 84 v2 — browser-marker-rail "selected-marker" style. Distinct from
   the plain hit / selected / both styles: this marker is painted on top of
   any matching bucket to indicate the cursor's current match position. The
   outline + saturated fill creates the "where am I in this list" affordance
   for ⌘G stepping. */
.browser-marker--selected-marker {
  background: var(--local-search-marker-current-color, var(--s-color-accent-default));
  outline: 1px solid var(--local-search-marker-current-color, var(--s-color-accent-default));
  outline-offset: -1px;
  z-index: 1;
}

/* ── Global state — search row + collapsible sections ──────────────────────
   Brief 92 polish (2026-05-15): Fibonacci spacing, calm-UI hover/active per
   DS doctrine. Section headers are subdued orientation labels (label-style
   treatment); items are the action layer (greenscale hover, accent active
   with left-border). Count chips are pill-shaped + subdued so they don't
   compete with section titles. */
.sidebar-global-search-row {
  padding: var(--s-space-3) var(--s-space-3) var(--s-space-2);
  flex-shrink: 0;
}

.sidebar-global-search {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  cursor: text;
  transition: border-color var(--s-duration-fast),
    box-shadow var(--s-duration-fast);
}

.sidebar-global-search:hover {
  border-color: var(--s-color-fg-muted);
}

.sidebar-global-search:focus-within {
  border-color: var(--s-color-focus-border);
  box-shadow: 0 0 0 2px var(--s-brand-alpha-10);
}

.sidebar-global-search__icon {
  flex-shrink: 0;
  color: var(--s-color-fg-muted);
  display: inline-flex;
}

.sidebar-global-search__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-1);
  font-family: inherit;
}

.sidebar-global-search__input::placeholder {
  color: var(--s-color-fg-tertiary);
}

.sidebar-global-sections {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-space-1) var(--s-space-2) var(--s-space-3);
}

.sidebar-global-section {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Vertical rhythm: space-4 between sections (after the first). No borders —
   the spacing token does the separation; calm-UI doctrine. */
.sidebar-global-section + .sidebar-global-section {
  margin-top: var(--s-space-4);
}

/* visceral task 47 — Lab/Libraries live in hamburger destinations only */
[data-sidebar-state-content="global"] [data-section-libraries],
[data-sidebar-state-content="global"] [data-section-lab-tools] {
  display: none;
}

.sidebar-global-section__header {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  padding: var(--s-space-2) var(--s-space-3) var(--s-space-1);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--s-color-fg-tertiary);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  font-family: inherit;
  border-radius: var(--s-radius-1);
  transition: background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.sidebar-global-section__header:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-secondary);
}

.sidebar-global-section__header:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.sidebar-global-section__chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--s-color-fg-muted);
  transition: transform var(--s-duration-fast);
}

.sidebar-global-section__header[aria-expanded="false"] .sidebar-global-section__chevron {
  transform: rotate(-90deg);
}

.sidebar-global-section__title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Count chip: small subdued pill — orientation cue, not visually competing
   with the section title (per Brief 92 calm-UI principle). */
.sidebar-global-section__count {
  flex-shrink: 0;
  font-weight: var(--s-font-weight-regular);
  font-size: var(--s-font-size-0);
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-color-fg-tertiary);
  background: var(--s-color-bg-subtle);
  padding: 0 var(--s-space-2);
  border-radius: var(--s-radius-full);
  min-width: 1.25rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sidebar-global-section__count:empty {
  display: none;
}

.sidebar-global-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  padding: var(--s-space-1) 0 0;
}

.sidebar-global-section__header[aria-expanded="false"] + .sidebar-global-section__body {
  display: none;
}

.sidebar-global-section__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  /* Indent items inside the section content area: space-3 base + space-1
     extra for hierarchy (matches Brief 92 spec). */
  padding-left: calc(var(--s-space-3) + var(--s-space-1));
  border-radius: var(--s-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-regular);
  font-family: inherit;
  transition: background 100ms ease;
  width: 100%;
  min-width: 0;
}

.sidebar-global-section__item:hover {
  background: var(--s-color-hover-bg);
}

.sidebar-global-section__item:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

/* Active state: stronger background fill + accent left-border + medium
   font weight. No box-shadow / glow / ring — DS calm-UI doctrine. */
.sidebar-global-section__item.active {
  background: var(--s-brand-alpha-10);
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

.sidebar-global-section__item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--s-color-accent-default);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.sidebar-global-section__item-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-global-section__item-count {
  flex-shrink: 0;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
}

.sidebar-global-section__empty {
  padding: var(--s-space-2) var(--s-space-3);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
}

.sidebar-global-section__create-link {
  background: transparent;
  border: none;
  color: var(--s-color-accent-default);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: var(--s-font-size-1);
  margin-left: var(--s-space-1);
}

.sidebar-global-section__create-link:hover {
  text-decoration: underline;
}

/* Section "+ N more" affordance — info-tone link aligned to item padding
   for vertical rhythm consistency. */
.sidebar-global-section__more {
  display: block;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--s-space-1) var(--s-space-3);
  padding-left: calc(var(--s-space-3) + var(--s-space-1));
  color: var(--s-color-status-info);
  font: inherit;
  font-size: var(--s-font-size-0);
  text-align: left;
}

.sidebar-global-section__more:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
   RIGHT-RAIL WIDGETS (Brief 83, 2026-05-14)
   The right-rail container is the existing .bilateral-right-rail element,
   gaining [data-right-rail] + [data-context] attributes (added in HTML).
   On project routes admin-shell.js writes data-context="project" and the
   right-rail JS module renders the four widgets (libraries / lab-tools /
   docs / project-settings). Other contexts render an empty state.
   Selectors here are NEW (.right-rail-widget*, .right-rail-actions-menu,
   .right-rail-add-widget) — they share the bilateral-right-rail container
   styles (background, border-left) from §BILATERAL CHROME above without
   touching the legacy .context-widget pattern (kept for back-compat with
   any future P1A-era mounts that target the same shell).
   ════════════════════════════════════════════════════════════════════════ */

/* Container — when the rail carries [data-right-rail] we own its inner
   layout (column, scrollable). Empty context → only the add-widget button
   renders inside the widgets paint target; the empty state below the
   widgets list explains the rail context. */
[data-right-rail] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Brief 83 retires the P1A info-panel pattern: when the rail is governed
   by [data-right-rail] (which is now always the case), hide the legacy
   [#contextRailInner] container so the project page's mountContextRail-
   Widgets call still has a target to wipe but its output doesn't render
   above the v5 widget bay. The legacy info-panel widgets (Selection /
   Event details / Note draft) ship in the existing surface tabs OR will
   be re-platformed as v5 widgets in a follow-up brief. */
[data-right-rail] > .bilateral-right-rail__inner {
  display: none;
}

/* The v5 widget bay region sits inside the aside as a sibling of the
   legacy inner container. Owns the scroll. */
.bilateral-right-rail__v5-region {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* ── Right-rail tenancy (Brief 84, 2026-05-16) ─────────────────────────── */

[data-right-rail-empty-prompt],
[data-right-rail-drawer],
[data-right-rail-widgets],
.right-rail-add-widget {
  transition:
    opacity var(--s-duration-fast, 120ms) var(--s-ease-standard, ease),
    visibility var(--s-duration-fast, 120ms) var(--s-ease-standard, ease);
}

[data-right-rail-empty-prompt] {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4) var(--s-space-2);
  min-height: 0;
  opacity: 0;
  visibility: hidden;
}

.right-rail-empty-prompt__text {
  margin: 0;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  text-align: center;
  line-height: 1.45;
  max-width: 14rem;
}

[data-right-rail-tenant="empty"] [data-right-rail-empty-prompt] {
  display: flex;
  opacity: 1;
  visibility: visible;
}

[data-right-rail-drawer] {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

[data-right-rail-tenant="drawer"] [data-right-rail-drawer] {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Roadmap / briefing brief drawer — widen shell rail (resize persists via JS). */
.admin-shell:has([data-right-rail][data-right-rail-tenant="drawer"]) {
  --shell-right-rail-w-max: var(--shell-right-rail-drawer-w-max, min(960px, 52vw));
  --shell-right-rail-w: var(--oar-drawer-rail-width-px, 560px);
}

[data-right-rail-tenant="empty"] [data-right-rail-widgets],
[data-right-rail-tenant="drawer"] [data-right-rail-widgets] {
  display: none;
  opacity: 0;
  visibility: hidden;
}

[data-right-rail-tenant="widgets"] [data-right-rail-drawer],
[data-right-rail-tenant="empty"] [data-right-rail-drawer] {
  display: none;
  opacity: 0;
  visibility: hidden;
}

[data-right-rail-tenant="widgets"] [data-right-rail-empty-prompt] {
  display: none;
  opacity: 0;
  visibility: hidden;
}

[data-right-rail-tenant="empty"] .right-rail-add-widget,
[data-right-rail-tenant="drawer"] .right-rail-add-widget {
  display: none;
}

[data-right-rail-tenant="widgets"] [data-right-rail-widgets] {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  opacity: 1;
  visibility: visible;
}

/* Drawer mounted inside the shell rail (not a full-viewport overlay). */
[data-right-rail-drawer] .oar-drawer-backdrop {
  position: static;
  inset: auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  z-index: auto;
  justify-content: stretch;
  align-items: stretch;
}

[data-right-rail-drawer] .oar-drawer-backdrop--briefing-embed,
[data-right-rail-drawer] .oar-drawer-backdrop--rail-embed {
  position: static;
  inset: auto;
  background: transparent;
}

[data-right-rail-drawer] .oar-drawer,
[data-right-rail-drawer] .oar-briefing-drawer.oar-drawer,
[data-right-rail-drawer] .oar-roadmap-shell-drawer.oar-drawer {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  flex: 1 1 auto;
}

[data-right-rail-widgets] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* No gap — widget borders draw the divider lines (matches .context-widget
     pattern above). */
}

[data-right-rail][data-context="empty"] [data-right-rail-widgets] {
  /* Rail rendered with no widgets — push add-widget to top of empty space. */
  flex: 0 0 auto;
}

/* Empty state inside the widgets list (only visible when context="empty"
   and the registry has no widgets to render). */
.right-rail-empty {
  padding: var(--s-space-3) var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Widget shell (per-widget section) ────────────────────────────────── */

.right-rail-widget {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: transparent;
  min-width: 0;
}

.right-rail-widget:last-child {
  border-bottom: none;
}

/* The right-rail JS module sets [hidden] on widgets that are removed or
   not part of the active context. Class-selector display:flex outranks
   the UA [hidden] rule, so the explicit override is required. */
.right-rail-widget[hidden] {
  display: none;
}

/* ── Widget header — sticky inside the rail's scroll container ──────── */

.right-rail-widget__header {
  display: flex;
  align-items: center;
  gap: var(--s-space-hair);
  padding: 0 var(--s-space-2);
  min-height: var(--shell-right-rail-widget-header-h);
  background: var(--s-color-bg-subtle);
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: default;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background var(--s-duration-fast);
}

.right-rail-widget__header:hover {
  background: var(--s-brand-alpha-5);
}

/* When pinned, accent the header so the user can spot the pinned widget. */
.right-rail-widget[data-pinned="true"] > .right-rail-widget__header {
  background: var(--s-brand-alpha-5);
  border-bottom-color: var(--s-color-border-subtle);
}

.right-rail-widget__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Header buttons — collapse / search / actions all share this base. */
.right-rail-widget__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--s-font-size-1);
  line-height: 1;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.right-rail-widget__btn:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.right-rail-widget__btn:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

/* Collapse trigger glyph rotates between ▾ (expanded) and ▸ (collapsed)
   via the data-collapsed attribute on the widget root. The text content
   is set in JS for accessibility (aria-label swap), so we DON'T transform
   the glyph — we just swap which child is shown. */
.right-rail-widget__chevron {
  display: inline-block;
  font-size: var(--s-font-size-0);
  line-height: 1;
}

/* ── Widget body ─────────────────────────────────────────────────────── */

.right-rail-widget__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
  padding: var(--shell-right-rail-widget-body-pad);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  min-width: 0;
}

/* Collapsed state — body hidden via attribute. Header remains visible
   and acts as the sole interaction surface. */
.right-rail-widget[data-collapsed="true"] > .right-rail-widget__body {
  display: none;
}

/* Inline search input that expands when the widget search trigger is
   clicked. Hidden by default; widget JS toggles data-search-active. */
.right-rail-widget__search-row {
  display: none;
  padding: 0 var(--s-space-2) var(--s-space-twohair);
}

.right-rail-widget[data-search-active="true"] > .right-rail-widget__search-row {
  display: block;
}

.right-rail-widget__search-input {
  width: 100%;
  padding: var(--s-space-hair) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-1);
  font-family: inherit;
  min-width: 0;
}

.right-rail-widget__search-input:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -1px;
  border-color: transparent;
}

/* ── Widget body — content primitives ────────────────────────────────── */

/* Section label inside body (e.g. "BCL2 inhibitors · 412" / "Recent · 8" /
   "For this surface"). Uppercase, muted, with optional count after a · sep. */
.right-rail-widget__section-label {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-space-hair);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* List items inside Libraries / Lab Tools / Docs widget bodies. */
.right-rail-widget__list-item {
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: var(--s-space-hair) 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-size: var(--s-font-size-1);
  width: 100%;
  min-width: 0;
}

.right-rail-widget__list-item:hover {
  color: var(--s-color-accent-default);
}

.right-rail-widget__list-item:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: 2px;
  border-radius: var(--s-radius-1);
}

.right-rail-widget__list-item-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right-rail-widget__list-item-meta {
  flex-shrink: 0;
  color: var(--s-color-fg-tertiary);
  font-size: var(--s-font-size-0);
}

/* "browse all →" link at bottom of widget bodies that have a back-end. */
.right-rail-widget__action-link {
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--s-font-size-1);
  color: var(--s-color-accent-default);
  cursor: pointer;
  margin-top: var(--s-space-hair);
}

.right-rail-widget__action-link:hover {
  text-decoration: underline;
}

.right-rail-widget__action-link:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: 2px;
  border-radius: var(--s-radius-1);
}

/* Empty-state pattern inside widget body (e.g. "No libraries yet · + Add"). */
.right-rail-widget__empty {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
}

/* ── Project Settings widget — inline field rows ─────────────────────── */

.right-rail-widget__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.right-rail-widget__field-label {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-tertiary);
  letter-spacing: 0.04em;
}

.right-rail-widget__field-value {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tag pill chips for Project Settings tags field (display-only for v1). */
.right-rail-widget__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-hair);
}

.right-rail-widget__pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--s-space-twohair);
  border-radius: var(--s-radius-pill);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
}

/* Tier / phase / owner — compact value pills in Project Settings widget. */
.right-rail-widget__meta-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 1px var(--s-space-twohair);
  border-radius: var(--s-radius-round);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  line-height: 1.2;
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body-bottom divider before the action links (archive / open full settings). */
.right-rail-widget__body-divider {
  height: 1px;
  background: var(--s-color-border-subtle);
  margin: var(--s-space-hair) calc(var(--s-space-hair) * -1);
}

/* ── + add widget affordance (rail bottom) ───────────────────────────── */

.right-rail-add-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-twohair);
  margin: var(--s-space-2);
  padding: var(--s-space-twohair) var(--s-space-2);
  border: 1px dashed var(--s-color-border-default);
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-muted);
  font: inherit;
  font-size: var(--s-font-size-1);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--s-duration-fast),
    border-color var(--s-duration-fast),
    color var(--s-duration-fast);
}

.right-rail-add-widget:hover {
  background: var(--s-color-hover-bg);
  border-color: var(--s-color-fg-muted);
  color: var(--s-color-fg-primary);
}

.right-rail-add-widget:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: 2px;
}

/* ── Widget actions popover (⋯ menu) ─────────────────────────────────── */

.right-rail-actions-menu {
  position: absolute;
  z-index: 50;
  min-width: 180px;
  padding: var(--s-space-hair);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  box-shadow: var(--s-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.right-rail-actions-menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: var(--s-space-hair) var(--s-space-2);
  background: transparent;
  border: none;
  border-radius: var(--s-radius-1);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
}

.right-rail-actions-menu__item:hover {
  background: var(--s-color-hover-bg);
}

.right-rail-actions-menu__item:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.right-rail-actions-menu__separator {
  height: 1px;
  background: var(--s-color-border-subtle);
  margin: var(--s-space-hair) 0;
}

/* When the rail is collapsed (existing context-rail collapsed state),
   hide the widget bodies and headers so only the rail toggle shows. The
   inner-hide rule already handles the widgets list (descendant of inner). */

/* Reduce-motion: disable any chevron transitions consistent with existing
   .context-widget pattern. */
@media (prefers-reduced-motion: reduce) {
  .right-rail-widget__btn,
  .right-rail-add-widget {
    transition: none;
  }
}

/* ── Library destination (Brief 87) ───────────────────────────────────── */

.library-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.library-page__browser {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.library-page__browser [data-browser] {
  flex: 1;
  min-height: 0;
}

.shell-library-view-switcher .pg-view-toggle {
  margin: 0;
}

.sidebar[data-sidebar-state="section"][data-section-context="library"]
  .nav-scoped-search-row {
  display: none;
}

.library-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  padding: var(--s-space-2) var(--s-space-3);
}

.library-sidebar__icon-strip {
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
}

.library-sidebar__collapse {
  flex: 0 0 auto;
  width: 22px;
  height: 26px;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
  cursor: pointer;
}

.library-sidebar__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-space-hair);
  padding: var(--s-space-hair) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

.library-sidebar__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--s-font-size-1);
}

.library-sidebar__new {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: transparent;
  cursor: pointer;
}

.library-sidebar__section-title {
  font-size: var(--s-font-size-0);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-color-fg-tertiary);
  margin-bottom: var(--s-space-twohair);
}

.library-sidebar__library-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--s-space-2) calc(var(--s-space-3) + var(--s-space-1));
  border: none;
  border-radius: var(--s-radius-1);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.library-sidebar__library-item:hover {
  background: var(--s-color-hover-bg);
}

.library-sidebar__library-item.active {
  background: var(--s-brand-alpha-10);
  font-weight: 500;
}

.library-sidebar__library-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--s-color-accent-default);
}

.library-sidebar__filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-hair);
  margin-bottom: var(--s-space-2);
}

.library-sidebar__filter-chip {
  font-size: var(--s-font-size-0);
  padding: var(--s-space-hair) var(--s-space-2);
  border-radius: var(--s-radius-full);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
  cursor: pointer;
}

.library-sidebar__filter-check {
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  font-size: var(--s-font-size-1);
  padding: var(--s-space-hair) 0;
}

.library-sidebar__tag-filter-rail {
  margin-top: var(--s-space-2);
}

.library-sidebar__tag-filter-rail .s-filter-rail {
  font-size: var(--s-font-size-1);
  width: var(--shell-sidebar-w);
  max-width: 100%;
}

.library-sidebar__tag-filter-rail .s-filter-rail__search {
  display: none;
}

.right-rail-widget__citations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.right-rail-widget__citation-title {
  font-size: var(--s-font-size-1);
  font-weight: 500;
}

.right-rail-widget__citation-sub {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   SHELL-LEVEL ORIENTATION RULES (Y2 admin-shell-iphone-orientation v2)
   ──────────────────────────────────────────────────────────────────────────
   Existing drawer-only orientation rules live at admin-shell.css:3929/4032
   (max-width: 1023px portrait/landscape). Those govern the mobile *drawer*
   internals. The block below adds *shell-level* layout adjustments per
   device-class × orientation, keyed off the data attributes admin-shell.js
   sets at boot + on resize/orientation change:
     - html[data-mobile-bucket] is set on mobile-* viewports only
     - html[data-orientation="portrait" | "landscape"] is set always
     - html[data-viewport^="tablet-"] covers iPad in both orientations
   Combination selectors below are the surface where Y2 makes the four
   handheld layouts (iPhone portrait/landscape, iPad portrait/landscape)
   first-class — no more drawer-only orientation handling.
   ══════════════════════════════════════════════════════════════════════════ */

/* iPhone PORTRAIT — single column, drawer overlays nav; main content
   fills the canvas. Keep the fixed footer pinned to viewport bottom so
   status/avatar stays reachable above the home indicator. */
html[data-mobile-bucket][data-orientation="portrait"] .admin-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Visceral 2026-05-21 (Y2): on iPhone portrait the page-tools strip can
     double the top cluster height + push the kanban below the fold. Keep
     the top cluster height honest by collapsing any page-tools padding to
     the bar floor. */
  --shell-top-cluster-pad-y: var(--s-space-1);
}

html[data-mobile-bucket][data-orientation="portrait"] .admin-shell .shell-page-tools:not([hidden]) {
  padding-top: var(--s-space-1);
  padding-bottom: var(--s-space-1);
}

/* iPhone LANDSCAPE — viewport height is ~390-430 (short edge). Header +
   page-tools + footer eat the whole canvas if not compacted. Land the
   smallest possible header, hide the page-tools strip (its actions
   already live in the kanban column header), and let the footer scroll
   with the page rather than fix to a viewport bottom that has no room. */
html[data-mobile-bucket][data-orientation="landscape"] .admin-shell {
  /* Compress vertical chrome on short landscape so main canvas gets >50% height. */
  --shell-header-height: calc(var(--s-font-size-active) * 2);
}

html[data-mobile-bucket][data-orientation="landscape"] .admin-shell .shell-header {
  min-height: calc(var(--s-font-size-active) * 2);
  padding-top: max(var(--s-space-1), env(safe-area-inset-top));
  padding-bottom: var(--s-space-1);
}

html[data-mobile-bucket][data-orientation="landscape"] .admin-shell .shell-page-tools:not([hidden]) {
  /* Page-tools strip on landscape phone duplicates header affordances on a
     surface that already loses 2/3 of the canvas to chrome. Hide. */
  display: none;
}

html[data-mobile-bucket][data-orientation="landscape"] .admin-shell__nav-column > .shell-footer {
  /* Don't fix to a viewport that just lost its URL bar — let it scroll with
     the column so short landscape doesn't waste 36px on a fixed band. */
  position: relative;
  bottom: auto;
}

/* iPad PORTRAIT — 2-column in-flow (sidebar + main). Sidebar stays
   reasonably wide; the right rail is drawer-only (admin-shell-responsive.css). */
html[data-viewport^="tablet-"][data-orientation="portrait"] .admin-shell {
  /* Slightly tighter sidebar in portrait so kanban gets the breathing room
     it loses to the narrower long-edge (820 vs 1180 landscape). */
  --shell-sidebar-w: 200px;
}

/* iPad LANDSCAPE — 2-column in-flow with full sidebar width; right rail
   still drawer-only at tablet-* per admin-shell-responsive.css. */
html[data-viewport^="tablet-"][data-orientation="landscape"] .admin-shell {
  /* Wider sidebar in landscape — 1180 long-edge can spare the columns. */
  --shell-sidebar-w: 248px;
}

/* ══════════════════════════════════════════════════════════════════════════
   END SHELL-LEVEL ORIENTATION RULES
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PROJECTS-ALL — standalone PDB-thumb grid (projects-page-pdb-3d-thumbnails)
   See guide/shell/js/pages/projects-all.js. Rendered at /projects-all.
   ══════════════════════════════════════════════════════════════════════════ */

.projects-all-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-4);
  padding-bottom: var(--s-space-6);
}

.projects-all-page__heading {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  padding: var(--s-space-2) 0;
}

.projects-all-page__title {
  margin: 0;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-4);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  letter-spacing: -0.01em;
}

.projects-all-page__subtitle {
  margin: 0;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.projects-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-space-4);
}

.projects-all-grid__empty {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  padding: var(--s-space-4);
}

.projects-all-card {
  display: flex;
  flex-direction: column;
  background: var(--s-color-bg-surface);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.projects-all-card:hover {
  border-color: var(--s-color-border);
  box-shadow: none;
}

.projects-all-card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--s-color-bg-subtle);
}

.projects-all-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--s-font-mono);
  font-weight: var(--s-font-weight-semibold);
  font-size: clamp(28px, 8vw, 48px);
  letter-spacing: 0.04em;
  color: color-mix(in oklch, var(--s-color-fg-muted) 60%, transparent);
  user-select: none;
}

.projects-all-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  padding: var(--s-space-3);
}

.projects-all-card__title {
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  text-decoration: none;
  line-height: 1.25;
}

.projects-all-card__title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.projects-all-card__desc {
  margin: 0;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-secondary);
}

.projects-all-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  margin-top: var(--s-space-1);
}

.projects-all-card__tag {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

/* ── Project notebook (cellular primitive, v1) ─────────────────────────
 * Brief: research/flywheel/handoffs/briefs/project-notes-pane.md
 *
 * Mounted into the project surface's `?tab=notebook` panel. Each cell is
 * an independently editable atom (markdown-only in v1). Cell chrome (Save /
 * Cancel / Add cell) leans on existing surface + border tokens — no custom
 * shadow stack, no gradient, no hex literals.
 */

.project-notebook {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  padding: var(--s-space-5);
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.project-notebook__stream {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  max-width: 56rem;
}

.project-notebook__add-cell {
  align-self: flex-start;
  appearance: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  border: 1px dashed var(--s-color-border);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2) var(--s-space-4);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  cursor: pointer;
  transition: color 100ms ease, border-color 100ms ease, background 100ms ease;
}

.project-notebook__add-cell:hover {
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-border-default);
  background: var(--s-color-hover-bg);
}

.project-notebook__add-cell:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

/* ── Cell ── */

.notebook-cell {
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-panel);
  transition: border-color 100ms ease, background 100ms ease;
}

.notebook-cell__bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-space-1) var(--s-space-2) 0;
  opacity: 0;
  transition: opacity 100ms ease;
}

.notebook-cell:hover .notebook-cell__bar,
.notebook-cell:focus-within .notebook-cell__bar {
  opacity: 1;
}

.notebook-cell__remove {
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: none;
  padding: var(--s-space-1) var(--s-space-2);
  border-radius: var(--s-radius-0);
  cursor: pointer;
}

.notebook-cell__remove:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.notebook-cell__remove:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell--editing {
  border-color: var(--s-color-border-default);
  background: var(--s-color-bg-surface);
}

.notebook-cell--heading {
  border-color: transparent;
  background: transparent;
}

.notebook-cell--heading .notebook-cell__kind {
  color: var(--s-color-fg-muted);
  letter-spacing: 0.06em;
}

.notebook-cell__heading {
  margin: 0;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-3);
  font-weight: var(--s-font-weight-semibold);
  line-height: 1.25;
  color: var(--s-color-fg-primary);
}

.notebook-cell__body {
  padding: var(--s-space-3) var(--s-space-4);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  line-height: 1.55;
  color: var(--s-color-fg-primary);
  cursor: text;
  border-radius: var(--s-radius-1);
  /* Click target: make whole body clickable but read like prose, not a button. */
}

.notebook-cell__body:hover {
  background: var(--s-color-hover-bg);
}

.notebook-cell__body:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: -2px;
}

/* Prose inside a cell — keep render compact; admin-shell baseline already
   covers headings, but cells render in a constrained surface so trim margins. */
.notebook-cell__body > :first-child { margin-top: 0; }
.notebook-cell__body > :last-child { margin-bottom: 0; }

.notebook-cell__body h1,
.notebook-cell__body h2,
.notebook-cell__body h3 {
  font-family: var(--s-font-sans);
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-semibold);
  line-height: 1.25;
  margin: var(--s-space-3) 0 var(--s-space-2);
}

.notebook-cell__body h1 { font-size: var(--s-font-size-3); }
.notebook-cell__body h2 { font-size: var(--s-font-size-2); }
.notebook-cell__body h3 { font-size: var(--s-font-size-1); }

.notebook-cell__body p {
  margin: 0 0 var(--s-space-2);
}

.notebook-cell__body ul,
.notebook-cell__body ol {
  margin: 0 0 var(--s-space-2);
  padding-left: var(--s-space-5);
}

.notebook-cell__body li {
  margin: var(--s-space-hair) 0;
}

.notebook-cell__body code {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  padding: var(--s-space-hair) var(--s-space-1);
  background: var(--s-color-bg-hover);
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-primary);
}

.notebook-cell__body pre {
  margin: 0 0 var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  background: var(--s-color-bg-hover);
  border-radius: var(--s-radius-1);
  overflow-x: auto;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  line-height: 1.55;
}

.notebook-cell__body pre code {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.notebook-cell__body a {
  color: var(--s-color-status-info);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notebook-cell__body a:hover {
  color: var(--s-color-fg-primary);
}

/* ── Edit mode ── */

.notebook-cell__editor {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-3);
}

.notebook-cell__textarea {
  width: 100%;
  resize: vertical;
  min-height: calc(var(--s-font-size-active) * 6);
  padding: var(--s-space-2) var(--s-space-3);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  line-height: 1.55;
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
}

.notebook-cell__textarea:focus {
  outline: none;
  border-color: var(--s-color-border-default);
}

.notebook-cell__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-space-2);
}

.notebook-cell__btn {
  appearance: none;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  padding: var(--s-space-1) var(--s-space-3);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border);
  background: var(--s-color-bg-surface);
  color: var(--s-color-fg-primary);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}

.notebook-cell__btn:hover {
  background: var(--s-color-hover-bg);
  border-color: var(--s-color-border-default);
}

.notebook-cell__btn:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__btn--save {
  background: var(--s-color-fg-primary);
  color: var(--s-color-bg-app);
  border-color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-cell__btn--save:hover {
  /* One greenscale step — no filter, no shadow. */
  background: var(--s-color-fg-secondary, var(--s-color-fg-primary));
  border-color: var(--s-color-fg-secondary, var(--s-color-fg-primary));
}

/* ── Cell-kind visual register (ported from surfaces/notebook-placeholder
   per convergence brief notebook-converge-placeholder-and-cellular-primitive.md).
   PROSE / DECISION / CODE category labels sit above the cell body; decision
   cells pick up an info-accent left border + alt-chip row. markdown cells
   stay unlabelled (the v1 plain-cell affordance). All values resolve via
   existing scilence tokens — no new colors, no inline styles. ── */

.notebook-cell__kind {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
  padding: var(--s-space-2) var(--s-space-4) 0;
}

.notebook-cell__kind--decision {
  color: var(--s-color-status-info);
}

.notebook-cell__kind--prose {
  color: var(--s-color-fg-muted);
}

.notebook-cell__kind--code {
  color: var(--s-color-status-success);
}

.notebook-cell--decision {
  border-left: 2px solid var(--s-color-status-info);
}

/* Code-kind body — monospace, preserves indentation, no markdown render. */
.notebook-cell__code {
  margin: 0;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  background: var(--s-color-bg-hover);
  padding: var(--s-space-2) var(--s-space-3);
  border-radius: var(--s-radius-1);
  color: var(--s-color-fg-primary);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

.notebook-cell__code code {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  padding: 0;
}

/* Decision alt-chip row — choice chips below the body. Selected chip picks
   up the info accent; clicking a different chip updates selectedAlt. */
.notebook-cell__alts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-4) var(--s-space-3);
}

.notebook-cell__alt {
  appearance: none;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  padding: var(--s-space-twohair) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}

.notebook-cell__alt:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.notebook-cell__alt:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__alt--chosen {
  color: var(--s-color-status-info);
  border-color: var(--s-color-status-info);
  font-weight: var(--s-font-weight-semibold);
}

/* Code-kind textarea swaps in mono. Existing .notebook-cell__textarea is
   already monospace, so this modifier is currently a no-op — kept as the
   hook for future code-mode affordances (line numbers, syntax tint). */
.notebook-cell__textarea--code {
  font-family: var(--s-font-mono);
}

/* ══════════════════════════════════════════
   WHITEBOARD (demo proto — /studio/whiteboard)
   Substrate-fresh chrome for the demo-cut surface. Full chem-aware
   substrate (chem-aware-whiteboard-substrate-v1.md) replaces this
   layer when it lands. No new tokens; all values resolve through
   the existing `--s-*` scale.
   ══════════════════════════════════════════ */

.wb-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-4);
}

.wb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-space-4);
  flex-wrap: wrap;
}

.wb-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  flex: 1 1 320px;
  min-width: 0;
}

.wb-header__title {
  margin: 0;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-3, var(--s-font-size-base));
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  letter-spacing: -0.01em;
}

.wb-header__lede {
  margin: 0;
  font-size: var(--s-font-size-condensed, var(--s-font-size-0));
  color: var(--s-color-fg-muted);
  max-width: 72ch;
}

.wb-header__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  flex: 0 0 auto;
}

.wb-mode-chip {
  white-space: nowrap;
}

.wb-actions {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-wrap: wrap;
}

.wb-actions__btn {
  flex: 0 0 auto;
}

.wb-substrate-wrap {
  /* Substrate fills remaining vertical space inside the inset page; min-height
     keeps the canvas reading as a canvas even on short viewports. */
  flex: 1 1 auto;
  min-height: calc(var(--s-font-size-active) * 22);
  display: flex;
}

.wb-substrate {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(var(--s-font-size-active) * 22);
  border: 1px solid var(--s-color-border-default, var(--s-color-border-subtle));
  border-radius: var(--s-radius-2, var(--s-radius-1));
  background: var(--s-color-bg-surface, var(--s-color-bg-app));
  /* Subtle dot grid hints at the canvas affordance without competing with
     content. Falls back to a flat surface if `--s-color-border-subtle` is
     unresolved at runtime. */
  background-image: radial-gradient(
    circle,
    var(--s-color-border-subtle) 1px,
    transparent 1px
  );
  background-size: calc(var(--s-space-4) * 1.5) calc(var(--s-space-4) * 1.5);
  background-position: 0 0;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}

.wb-substrate[data-whiteboard-mode="sketch"] {
  cursor: crosshair;
}

.wb-strokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wb-strokes__path {
  fill: none;
  stroke: var(--s-color-fg-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.wb-regions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wb-region {
  position: absolute;
  left: var(--wb-region-x);
  top: var(--wb-region-y);
  width: var(--wb-region-w);
  height: var(--wb-region-h);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  padding: var(--s-space-2) var(--s-space-3);
  background: var(--s-color-bg-panel, var(--s-color-bg-surface));
  border: 1px solid var(--s-color-border-default, var(--s-color-border-subtle));
  border-radius: var(--s-radius-1);
  box-shadow: none;
  pointer-events: auto;
  cursor: default;
}

.wb-region__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-2);
}

.wb-region__label {
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.wb-region__kind {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-min);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-muted);
  padding: 0 var(--s-space-twohair);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

.wb-region__body {
  font-size: var(--s-font-size-condensed, var(--s-font-size-0));
  color: var(--s-color-fg-muted);
  line-height: var(--s-font-line-height-normal);
}

.wb-hint {
  position: absolute;
  left: 50%;
  bottom: var(--s-space-3);
  transform: translateX(-50%);
  margin: 0;
  padding: var(--s-space-1) var(--s-space-3);
  background: var(--s-color-bg-panel, var(--s-color-bg-surface));
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-min);
  color: var(--s-color-fg-muted);
  pointer-events: none;
  transition: opacity 160ms ease;
}

.wb-hint[data-state="dismissed"] {
  opacity: 0;
}

/* ══════════════════════════════════════════
   PROJECT-HUB sidebar pane — owns the /projects index filter rail.
   Per brief `projects-index-layout-refactor.md` (2026-05-26 Caitlin direct):
   filter responsibility moves from the inline page toolbar to the left rail.
   Pattern lock for every contextually-loaded index page (Molecules / Lab
   Tools / future Notes).
   ══════════════════════════════════════════ */

.sidebar-project-hub-state {
  background: var(--s-color-bg-panel, var(--s-color-bg-surface));
}

.sidebar-project-hub-state__rail-host {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Projects-index FilterRail — tight padding + dense register so the
   left rail stays calm at narrow widths. Reuses the .s-filter-rail
   primitive; this is theme-level overrides only. */
.projects-filter-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.projects-filter-rail__rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}

.projects-filter-rail__rail .s-filter-rail {
  padding: var(--s-space-2) var(--s-space-3);
  gap: var(--s-space-2);
}

.projects-filter-rail__rail .s-filter-rail__groups {
  gap: var(--s-space-3);
}

/* Visibility chip row (Show: chem · all) — sits above the rail's search
   input. Renders as a labeled chip-row so the chem/all switch reads as
   a top-level visibility toggle rather than another tag dimension. */
.projects-filter-rail__visibility-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-3) var(--s-space-3) var(--s-space-1);
}

.projects-filter-rail__visibility-label {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--s-color-fg-muted);
}

/* Visibility pill — selected state mirrors the scilence chip primitive's
   data-selected treatment so the visibility chip + group chips share
   visual language. */
.projects-filter-rail__visibility-row .s-filter-rail__visibility-pill {
  cursor: pointer;
}

.projects-filter-rail__visibility-row .s-filter-rail__visibility-pill[data-active="true"] {
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
  border-color: var(--s-color-prominent-bg);
}

/* Top-right view-controls cluster (zoom +/- and grid/list/table icons)
   lives in the shell header right segment for /projects. Marker
   `[data-view-controls="top-right"]` per brief verification asserts.
   Render as one inline strip flush with the project-surface view-
   switcher styling (see .project-view-switcher rules above).
   ══════════════════════════════════════════ */

.shell-header-page-actions [data-view-controls="top-right"] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
}

.shell-header-page-actions [data-view-controls="top-right"] .ph-zoom,
.shell-header-page-actions [data-view-controls="top-right"] .ph-viewmode {
  flex-shrink: 0;
}

/* Hide zoom in non-gallery view modes (list / table have no density to
   control). Mirrors the prior in-toolbar behavior — visibility (not
   display) keeps the view-mode toggle from shifting position when the
   active mode flips. The data-view attribute is set by project-hub.js
   on the wrapper as part of renderBody(). */
.shell-header-page-actions [data-view-controls="top-right"][data-view="list"] .ph-zoom,
.shell-header-page-actions [data-view-controls="top-right"][data-view="table"] .ph-zoom {
  visibility: hidden;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   SCRATCHBOOK MODE (homescreen-new-whiteboard-scratchbook-and-graduate)
   Adds save + graduate affordances + a small modal dialog for the
   graduate-to-project flow. Reuses .wb-* scratchbook chrome above.
   ══════════════════════════════════════════ */

.wb-actions__spacer {
  flex: 1 1 auto;
}

.wb-actions__status {
  font-size: var(--s-font-size-min);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-sans);
}

.wb-actions__status[data-tone="ok"] {
  color: var(--s-color-fg-primary);
}

.wb-actions__status[data-tone="err"] {
  color: var(--s-color-status-danger);
}

[data-scratch-save][data-state="saved"] {
  color: var(--s-color-fg-primary);
}

.wb-scratch-id-chip {
  font-family: var(--s-font-mono);
  white-space: nowrap;
}

.wb-graduate-dialog {
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-primary);
  padding: 0;
  max-width: 28rem;
  width: min(28rem, calc(100vw - var(--s-space-5)));
}

.wb-graduate-dialog::backdrop {
  background: var(--s-color-backdrop-scrim);
}

.wb-graduate-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  padding: var(--s-space-4);
}

.wb-graduate-dialog__title {
  margin: 0;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
}

.wb-graduate-dialog__lede {
  margin: 0;
  font-size: var(--s-font-size-condensed, var(--s-font-size-0));
  color: var(--s-color-fg-muted);
  line-height: var(--s-font-line-height-normal);
}

.wb-graduate-dialog__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.wb-graduate-dialog__field > span {
  font-size: var(--s-font-size-min);
  color: var(--s-color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wb-graduate-dialog__field > input {
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-surface);
  color: var(--s-color-fg-primary);
  font: inherit;
}

.wb-graduate-dialog__field > input:focus {
  outline: none;
  border-color: var(--s-color-border-strong);
}

.wb-graduate-dialog__err {
  margin: 0;
  font-size: var(--s-font-size-min);
  color: var(--s-color-status-danger);
}

.wb-graduate-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-space-2);
  margin-top: var(--s-space-2);
}

/* ══════════════════════════════════════════
   OVERVIEW LAUNCHER + RECENT SCRATCHES
   (homescreen-new-whiteboard-scratchbook-and-graduate)
   New whiteboard launcher tile + Recent scratches list. Sibling brief
   overview-homescreen-evolution expands the launcher set; these styles
   are namespaced .ov-launcher-* / .ov-recent-scratches* so they don't
   conflict if both Ottos land.
   ══════════════════════════════════════════ */

.ov-launcher-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-space-3);
}

.ov-launcher-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  padding: var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-surface);
  color: var(--s-color-fg-primary);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease;
}

.ov-launcher-tile:hover,
.ov-launcher-tile:focus-visible {
  border-color: var(--s-color-border-strong);
  outline: none;
}

.ov-launcher-tile__title {
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
}

.ov-launcher-tile__sub {
  font-size: var(--s-font-size-condensed, var(--s-font-size-0));
  color: var(--s-color-fg-muted);
  line-height: var(--s-font-line-height-normal);
}

.ov-recent-scratches {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.ov-recent-scratches__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  padding: var(--s-space-2) var(--s-space-3);
  border-radius: var(--s-radius-1);
  border: 1px solid transparent;
  color: var(--s-color-fg-primary);
  text-decoration: none;
}

.ov-recent-scratches__row:hover,
.ov-recent-scratches__row:focus-visible {
  border-color: var(--s-color-border-subtle);
  background: var(--s-color-hover-bg);
  outline: none;
}

.ov-recent-scratches__title {
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
}

.ov-recent-scratches__row[data-graduated="true"] .ov-recent-scratches__title::after {
  content: " ↗";
  color: var(--s-color-fg-muted);
}

.ov-recent-scratches__meta {
  font-size: var(--s-font-size-min);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
}

.ov-recent-scratches__empty {
  font-size: var(--s-font-size-condensed, var(--s-font-size-0));
  margin: 0;
}

/* ──────────────────────────────────────────
   Embedded variant — whiteboard mounted inside a project panel
   (brief whiteboard-as-project-view-integration.md, 2026-05-26).
   The standalone /studio/whiteboard route owns its own page chrome;
   the embedded variant is hosted inside `.pw-panel__body` which already
   provides the surrounding padding, so we collapse the page-level gap
   and let the substrate fill the panel.
   ────────────────────────────────────────── */
.wb-page--embedded {
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--s-space-3);
}

.wb-page--embedded .wb-actions {
  flex: 0 0 auto;
}

.wb-page--embedded .wb-substrate-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.wb-page--embedded .wb-substrate {
  /* Slightly taller minimum than the standalone surface — embedded canvases
     sit alongside other project chrome and a too-small canvas reads as a
     widget rather than a working surface. */
  min-height: calc(var(--s-font-size-active) * 16);
}