/**
 * Notebook shell chrome — 3a chrome parity (rail · stream · view switcher).
 * Ported from `spike/convergence-wireframes/notebook-views.html`; scilence tokens only.
 */

html[data-guide-project-surface="notebook"] {
  /* Center surfacebar + inspector header share one Y-band (view chips ↔ PROTOTYPE chip) */
  --notebook-column-header-min-h: 2rem;
}

.notebook-shell {
  --ns-rail-w: var(--shell-rail-expanded-w);
  --ns-insp-w: var(--shell-inspector-expanded-w);
  display: grid;
  grid-template-columns: var(--ns-rail-w) minmax(0, 1fr) var(--ns-insp-w);
  min-height: 0;
  height: 100%;
  flex: 1;
  background: var(--s-color-bg-app);
  position: relative;
}

.notebook-shell[data-rail-collapsed="true"] {
  --ns-rail-w: var(--shell-rail-collapsed-w);
}

.notebook-shell[data-insp-collapsed="true"] {
  --ns-insp-w: var(--shell-rail-collapsed-w);
}

.notebook-shell[data-insp-collapsed="true"] .notebook-shell__insp-header {
  display: none;
}

/* Collapsed rails — icon ribbon + edge reopen tabs (golden composite parity) */
.notebook-shell__rail-ribbon,
.notebook-shell__insp-ribbon {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-2) 0;
  flex: 1;
  min-height: 0;
}

.notebook-shell[data-rail-collapsed="true"] .notebook-shell__rail-ribbon,
.notebook-shell[data-insp-collapsed="true"] .notebook-shell__insp-ribbon,
[data-notebook-left-chrome][data-rail-collapsed="true"] .notebook-shell__rail-ribbon {
  display: flex;
}

.notebook-shell[data-rail-collapsed="true"] .notebook-shell__rail > :not(.notebook-shell__rail-ribbon):not(.notebook-shell__rail-grip),
.notebook-shell[data-insp-collapsed="true"]
  .notebook-shell__inspector
  > :not(.notebook-shell__insp-ribbon):not(.notebook-shell__insp-grip),
[data-notebook-right-chrome][data-insp-collapsed="true"]
  .notebook-shell__inspector
  > :not(.notebook-shell__insp-ribbon):not(.notebook-shell__insp-grip),
[data-notebook-left-chrome][data-rail-collapsed="true"]
  .notebook-shell__rail
  > :not(.notebook-shell__rail-ribbon):not(.notebook-shell__rail-grip) {
  display: none;
}

[data-notebook-right-chrome][data-insp-collapsed="true"] .notebook-shell__insp-ribbon {
  display: flex;
}

.notebook-shell[data-rail-collapsed="true"] .notebook-shell__rail-grip,
.notebook-shell[data-insp-collapsed="true"] .notebook-shell__insp-grip {
  display: none;
}

.notebook-shell__ribbon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--s-radius-sm);
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: pointer;
  padding: 0;
}

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

.notebook-shell__ribbon-sep {
  width: 18px;
  height: 1px;
  background: var(--s-color-border-subtle);
  margin: var(--s-space-1) 0;
}

.notebook-shell__ribbon-dots {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
  align-items: center;
}

.notebook-shell__ribbon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.notebook-shell__ribbon-dot--stale {
  background: var(--s-color-status-warning);
}

[data-notebook-left-chrome] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.notebook-inspector-mount {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.notebook-inspector-mount[data-notebook-right-chrome] {
  display: flex;
}

[data-notebook-right-chrome] {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
}

[data-notebook-right-chrome] .notebook-shell__inspector {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-left: none;
}

html[data-guide-project-surface="notebook"]
  .bilateral-right-rail:has([data-notebook-right-chrome]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--s-color-bg-panel);
  border-left: 1px solid var(--s-color-border-default);
}

html[data-guide-project-surface="notebook"]
  .bilateral-right-rail:has([data-notebook-right-chrome])
  > .bilateral-right-rail__chrome,
html[data-guide-project-surface="notebook"]
  .bilateral-right-rail:has([data-notebook-right-chrome])
  > .bilateral-right-rail__inner,
html[data-guide-project-surface="notebook"]
  .bilateral-right-rail:has([data-notebook-right-chrome])
  > .bilateral-right-rail__v5-region {
  display: none;
}

html[data-guide-project-surface="notebook"]
  [data-notebook-right-chrome][data-insp-collapsed="true"] {
  width: var(--shell-rail-collapsed-w);
  max-width: var(--shell-rail-collapsed-w);
  flex: 0 0 var(--shell-rail-collapsed-w);
}

html[data-guide-project-surface="notebook"]
  [data-notebook-right-chrome][data-insp-collapsed="true"]
  .notebook-shell__inspector {
  width: 100%;
  max-width: var(--shell-rail-collapsed-w);
}

/*
 * Notebook shell grid — 3 columns when both rails are hoisted to app chrome
 * (var(--shell-rail-collapsed-w) / var(--shell-rail-expanded-w) left · 1fr center · var(--shell-rail-collapsed-w) / var(--shell-inspector-expanded-w) inspector).
 */
html[data-guide-project-surface="notebook"]:not(:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"]))
  .admin-shell[data-bilateral-chrome]:has([data-notebook-left-chrome]):has(
    [data-notebook-right-chrome]
  ):not(:has([data-notebook-left-chrome][data-rail-collapsed="true"])):not(
    :has([data-notebook-right-chrome][data-insp-collapsed="true"])
  ) {
  --shell-sidebar-w: var(--shell-rail-expanded-w);
  --shell-right-rail-w: var(--shell-inspector-expanded-w);
  --ns-rail-w: var(--shell-rail-expanded-w);
  --ns-insp-w: var(--shell-inspector-expanded-w);
  grid-template-columns: var(--ns-rail-w) minmax(320px, 1fr)
    var(--ns-insp-w);
}

html[data-guide-project-surface="notebook"]:not(:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"]))
  .admin-shell[data-bilateral-chrome]:has([data-notebook-left-chrome][data-rail-collapsed="true"]):has(
    [data-notebook-right-chrome]
  ):not(:has([data-notebook-right-chrome][data-insp-collapsed="true"])),
html[data-guide-project-surface="notebook"]:not(:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"]))
  .admin-shell[data-notebook-rail-collapsed="true"][data-bilateral-chrome]:has(
    [data-notebook-right-chrome]
  ):not(:has([data-notebook-right-chrome][data-insp-collapsed="true"])) {
  --shell-sidebar-w: var(--shell-rail-collapsed-w);
  --shell-right-rail-w: var(--shell-inspector-expanded-w);
  grid-template-columns: var(--shell-rail-collapsed-w) minmax(320px, 1fr) var(--ns-insp-w);
}

html[data-guide-project-surface="notebook"]:not(:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"]))
  .admin-shell[data-bilateral-chrome]:has([data-notebook-left-chrome]):has(
    [data-notebook-right-chrome][data-insp-collapsed="true"]
  ):not(:has([data-notebook-left-chrome][data-rail-collapsed="true"])),
html[data-guide-project-surface="notebook"]:not(:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"]))
  .admin-shell[data-notebook-insp-collapsed="true"][data-bilateral-chrome]:has(
    [data-notebook-left-chrome]
  ):has([data-notebook-right-chrome]):not(
    :has([data-notebook-left-chrome][data-rail-collapsed="true"])
  ) {
  --shell-sidebar-w: var(--shell-rail-expanded-w);
  --shell-right-rail-w: var(--shell-rail-collapsed-w);
  grid-template-columns: var(--ns-rail-w) minmax(320px, 1fr) var(--shell-rail-collapsed-w);
}

html[data-guide-project-surface="notebook"]:not(:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"]))
  .admin-shell[data-bilateral-chrome]:has([data-notebook-left-chrome][data-rail-collapsed="true"]):has(
    [data-notebook-right-chrome][data-insp-collapsed="true"]
  ),
html[data-guide-project-surface="notebook"]:not(:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"]))
  .admin-shell[data-notebook-rail-collapsed="true"][data-notebook-insp-collapsed="true"][data-bilateral-chrome]:has(
    [data-notebook-left-chrome]
  ):has([data-notebook-right-chrome]) {
  --shell-sidebar-w: var(--shell-rail-collapsed-w);
  --shell-right-rail-w: var(--shell-rail-collapsed-w);
  grid-template-columns: var(--shell-rail-collapsed-w) minmax(320px, 1fr) var(--shell-rail-collapsed-w);
}

html[data-guide-project-surface="notebook"]
  .admin-shell__nav-column:has([data-notebook-left-chrome]) {
  min-width: 0;
  overflow: hidden;
}

/* ── Narrow viewports — 3-column inline ribbons (mobile-m through tablet-lg)
 *
 * Goal (Caitlin direct 2026-06-06): both rails in ribbon mode, both visible
 * inline on screen, center stream content readable. Below mobile-m (≤389px,
 * "super small screen") a different pattern applies — handled separately,
 * the existing mobile-s rules win for that band.
 *
 * Two systems we have to override:
 *   1. notebook-shell.css:197-249 forces 244+minmax(320,1fr)+340 on the
 *      admin-shell regardless of viewport — 904px minimum, breaks at
 *      anything under 1024.
 *   2. admin-shell-responsive.css:150-163 takes the right rail off-canvas
 *      (position:fixed, translateX(100%)) at tablet; line 214 sets it to
 *      display:none at mobile.
 *
 * Fix: at mobile-m through tablet-lg, force a var(--shell-rail-collapsed-w)+stream+var(--shell-rail-collapsed-w) grid, pin
 * both [data-notebook-*-chrome] panels to var(--shell-rail-collapsed-w) ribbon mode, and override
 * .bilateral-right-rail's fixed-position drawer to be in-grid.
 * ───────────────────────────────────────────────────────────────────── */

/* Outer admin-shell: 3-column ribbon | stream | ribbon. Specificity high
 * enough to beat both the line 197-249 notebook rules and the line 80+
 * tablet rules. Also reset grid-template-areas — admin-shell.css:3851 sets
 * "shellhdr" / "shellmain" at @media(max-width:1023px) which would otherwise
 * force .main-content into column 1 via grid-area:shellmain. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell[data-bilateral-chrome]:has([data-notebook-left-chrome]):has(
    [data-notebook-right-chrome]
  ) {
  --shell-sidebar-w: var(--shell-rail-collapsed-w);
  --shell-right-rail-w: var(--shell-rail-collapsed-w);
  grid-template-columns: var(--shell-rail-collapsed-w) minmax(0, 1fr) var(--shell-rail-collapsed-w);
  grid-template-areas: none;
}

/* Re-pin the grid items to their proper columns — admin-shell.css:3870 +
 * :3895 assign grid-area:shellmain to both nav-column and main-content at
 * narrow widths (single-cell drawer overlay pattern). At our 3-column
 * notebook layout we want them in distinct columns. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell
  > .admin-shell__nav-column {
  grid-area: auto;
  grid-column: 1;
  grid-row: 2;
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell
  > .main-content {
  grid-area: auto;
  grid-column: 2;
  grid-row: 2;
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell
  > .bilateral-right-rail {
  grid-area: auto;
  grid-column: 3;
  grid-row: 2;
}

/* Right rail: pull back into grid flow (was fixed off-canvas at tablet,
 * display:none at mobile per admin-shell-responsive.css). */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell[data-bilateral-chrome]
  > .bilateral-right-rail {
  display: flex;
  position: static;
  transform: none;
  width: var(--shell-rail-collapsed-w);
  max-width: var(--shell-rail-collapsed-w);
  flex: 0 0 var(--shell-rail-collapsed-w);
  box-shadow: none;
  transition: none;
}

/* Pin both chrome panels to var(--shell-rail-collapsed-w) ribbon mode — ONLY when they're in
 * collapsed state. Otherwise the user's expand click is ignored because
 * width stays clamped at 46. The rail/inspector grow to their natural
 * widths when the user uncollapses (at narrow viewport, they may overlay
 * the stream if there isn't enough room — that's intentional vs. clipping
 * the center).
 *
 * IMPORTANT: parent .admin-shell__nav-column / .bilateral-right-rail are
 * column flex containers, so `flex: 0 0 var(--shell-rail-collapsed-w)` would clamp HEIGHT not width
 * (flex-basis is main axis). Use `width: var(--shell-rail-collapsed-w)` to clamp the cross axis and
 * `flex: 1 1 auto` so the chrome grows to fill the column's full height —
 * otherwise the ribbon collapses to var(--shell-rail-collapsed-w) tall and clips its own buttons. */
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-left-chrome][data-rail-collapsed="true"],
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-right-chrome][data-insp-collapsed="true"] {
  width: var(--shell-rail-collapsed-w);
  max-width: var(--shell-rail-collapsed-w);
  flex: 1 1 auto;
  overflow: hidden;
}

/* When uncollapsed at narrow viewport: chrome panel can grow vertically
 * but isn't pinned to 46 width. Allow it to use its natural width. */
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-left-chrome]:not([data-rail-collapsed="true"]),
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-right-chrome]:not([data-insp-collapsed="true"]) {
  flex: 1 1 auto;
}

/* Pin the OUTER grid track containers — but ONLY when collapsed. Otherwise
 * the user's expand click is visually ignored because nav-column stays
 * clamped at 46. When uncollapsed at narrow viewport, the rail becomes a
 * fixed-position overlay drawer (handled by the rule block below). */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell:has([data-notebook-left-chrome][data-rail-collapsed="true"])
  > .admin-shell__nav-column {
  width: var(--shell-rail-collapsed-w);
  max-width: var(--shell-rail-collapsed-w);
  min-width: 0;
  overflow: hidden;
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell:has([data-notebook-right-chrome][data-insp-collapsed="true"])
  > .bilateral-right-rail {
  width: var(--shell-rail-collapsed-w);
  max-width: var(--shell-rail-collapsed-w);
  min-width: 0;
  overflow: hidden;
}

/* Uncollapsed at narrow viewport: rail/inspector becomes fixed overlay
 * drawer — escapes the var(--shell-rail-collapsed-w) grid column, drops in over the stream with a
 * shadow, sits above other content (z-index > shell header / footer but
 * below modals). Click outside dismisses via the existing toggle logic. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell:has([data-notebook-left-chrome]:not([data-rail-collapsed="true"]))
  > .admin-shell__nav-column {
  position: fixed;
  left: 0;
  top: var(--shell-header-height, 0);
  bottom: 0;
  width: min(280px, 80vw);
  max-width: min(280px, 80vw);
  z-index: 1100;
  box-shadow: none;
  overflow: hidden;
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell:has([data-notebook-right-chrome]:not([data-insp-collapsed="true"]))
  > .bilateral-right-rail {
  /* `display: flex` defeats admin-shell-responsive.css:214-216
   * which pins `display: none` on .bilateral-right-rail at all
   * mobile-* viewports unconditionally — that rule predates the notebook
   * drawer pattern. Diagnosed 2026-06-06 via Playwright CDP
   * getMatchedStylesForNode (the chromeInspCollapsed flips "true"→"false"
   * and rail position becomes fixed 280px, but display stays none, leaving
   * the user with no visible drawer). */
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: var(--shell-header-height, 0);
  bottom: 0;
  width: min(280px, 80vw);
  max-width: min(280px, 80vw);
  z-index: 1100;
  box-shadow: none;
  overflow: hidden;
}

/* Force .main-content (admin-shell center column) to fill its grid track —
 * something was letting it collapse, leaving .notebook-shell at 8px wide. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .admin-shell
  > .main-content {
  width: 100%;
  min-width: 0;
}

/* And the notebook-shell itself — collapsed to 8px when it should fill the
 * center column. Force it to its parent's full width. */
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell {
  width: 100%;
  min-width: 0;
}

/* Hide non-ribbon rail content — ONLY when collapsed. When uncollapsed at
 * narrow viewport (overlay drawer), the full rail/inspector content needs
 * to render including the collapse button so the user can dismiss. */
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-left-chrome][data-rail-collapsed="true"]
  .notebook-shell__rail
  > :not(.notebook-shell__rail-ribbon):not(.notebook-shell__rail-grip),
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-right-chrome][data-insp-collapsed="true"]
  .notebook-shell__inspector
  > :not(.notebook-shell__insp-ribbon):not(.notebook-shell__insp-grip) {
  display: none;
}

/* And the inverse — hide the ribbon when uncollapsed (otherwise the
 * ribbon icons render on top of the full rail content in the drawer). */
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-left-chrome]:not([data-rail-collapsed="true"])
  .notebook-shell__rail-ribbon,
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-right-chrome]:not([data-insp-collapsed="true"])
  .notebook-shell__insp-ribbon {
  display: none;
}

html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell__rail-ribbon,
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell__insp-ribbon {
  display: flex;
}

/* Inner notebook-shell: single-column (rail/inspector are external — the
 * inner 244+min(0,1fr)+340 columns just reserve empty space). */
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell {
  --ns-rail-w: 0px;
  --ns-insp-w: 0px;
  grid-template-columns: minmax(0, 1fr);
}

html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell
  > .notebook-shell__rail,
html:is(
    [data-viewport="mobile-s"],
    [data-viewport="mobile-m"],
    [data-viewport="mobile-lg"],
    [data-viewport="tablet-s"],
    [data-viewport="tablet-m"],
    [data-viewport="tablet-lg"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell
  > .notebook-shell__inspector {
  display: none;
}

/* Rail needs to fill its parent's full height so the ribbon (flex:1) can
 * grow tall enough to fit all 3 ribbon buttons (chev, search, filter).
 * Without flex:1, .notebook-shell__rail sizes to content (~var(--shell-rail-collapsed-w)) which
 * clips the filter button at the bottom. */
html:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-left-chrome]
  > .notebook-shell__rail,
html:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  [data-notebook-right-chrome]
  > .notebook-shell__inspector {
  flex: 1;
  min-height: 0;
}

/* User chip → avatar bubble in the bottom of the left rail at narrow widths.
 * The full chip (avatar + name + role + chevron) lives in .shell-footer__left
 * — at narrow viewports, hide everything except the avatar circle, and let
 * the var(--shell-rail-collapsed-w) --shell-sidebar-w token (set by my outer rule above) collapse the
 * footer-left column to var(--shell-rail-collapsed-w). The avatar button stays clickable; tapping it
 * opens the same account menu. */
html:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .shell-footer__affordance--avatar
  > :not(.avatar) {
  display: none;
}

html:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .shell-footer__affordance--avatar {
  width: var(--shell-rail-collapsed-w);
  justify-content: center;
  padding: var(--s-space-1);
  gap: 0;
}

/* Drop the 22px right reserved column on the inner pw-project grid at
 * narrow viewports. project-workspace-responsive.css:183-202 reserves 22px
 * for context-rail icons at mobile, but for the notebook surface those
 * icons are already in the external [data-notebook-right-chrome] ribbon
 * (var(--shell-rail-collapsed-w) column 3 of admin-shell) — the inner 22px is duplicate margin. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .pw-project__grid,
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .pw-project__grid--no-timeline-side {
  /* `` defeats project-workspace-responsive.css:183-202 which
   * pins a 22px right-edge column at all mobile-* viewports for the
   * pre-notebook context-rail icons. On the notebook surface those icons
   * live in the external [data-notebook-right-chrome] ribbon (var(--shell-rail-collapsed-w) col 3
   * of admin-shell), so the inner 22px is duplicate margin — diagnosed
   * 2026-06-06 via Playwright (notebook-shell rendered at 371px in a
   * 393px viewport, asymmetric right margin visible on iPhone). */
  grid-template-columns: 0 0 minmax(0, 1fr) 0 0;
}

/* mobile-s baseline — at super-small widths (≤389px) the user will iterate
 * on header/footer + 3-column-vs-single-column separately. Bare minimum
 * for now: collapse the inner notebook-shell grid so the stream renders
 * (otherwise the 244+340 inner reservations leave the stream invisible
 * since admin-shell-responsive already collapses the outer to 1-col). */
html[data-viewport="mobile-s"] .notebook-shell {
  --ns-rail-w: 0px;
  --ns-insp-w: 0px;
  grid-template-columns: minmax(0, 1fr);
}

html[data-viewport="mobile-s"] .notebook-shell > .notebook-shell__rail,
html[data-viewport="mobile-s"] .notebook-shell > .notebook-shell__inspector {
  display: none;
}

/* Rail-hide logic — driven by whether the constrained axis has room for
 * 46+var(--shell-rail-collapsed-w) of chrome.
 *
 *   - PORTRAIT phone (tall + narrow) → hide rails. Narrow horizontal axis
 *     can't spare the 92px; C-header injection is the entry point.
 *   - LANDSCAPE phone at mobile-m / mobile-lg (wide + short) → KEEP rails.
 *     The wide axis has horizontal room.
 *   - mobile-s in EITHER orientation → hide rails. Super-narrow iPhone
 *     (iPhone SE 375×667 portrait or 667×375 landscape) doesn't have
 *     enough comfortable horizontal width even when wide; 667 - 92 =
 *     575px stream is too tight. */
@media (orientation: portrait) {
  html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
    .admin-shell:has([data-notebook-left-chrome][data-rail-collapsed="true"])
    > .admin-shell__nav-column,
  html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
    [data-notebook-left-chrome][data-rail-collapsed="true"],
  html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
    .admin-shell:has([data-notebook-right-chrome][data-insp-collapsed="true"])
    > .bilateral-right-rail,
  html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
    [data-notebook-right-chrome][data-insp-collapsed="true"] {
    display: none;
  }
}

/* mobile-s rail-hide — fires regardless of orientation. */
html[data-guide-project-surface="notebook"][data-viewport="mobile-s"]
  .admin-shell:has([data-notebook-left-chrome][data-rail-collapsed="true"])
  > .admin-shell__nav-column,
html[data-guide-project-surface="notebook"][data-viewport="mobile-s"]
  [data-notebook-left-chrome][data-rail-collapsed="true"],
html[data-guide-project-surface="notebook"][data-viewport="mobile-s"]
  .admin-shell:has([data-notebook-right-chrome][data-insp-collapsed="true"])
  > .bilateral-right-rail,
html[data-guide-project-surface="notebook"][data-viewport="mobile-s"]
  [data-notebook-right-chrome][data-insp-collapsed="true"] {
  display: none;
}

html[data-guide-project-surface="notebook"]
  [data-notebook-left-chrome][data-rail-collapsed="true"] {
  width: var(--shell-rail-collapsed-w);
  max-width: var(--shell-rail-collapsed-w);
  flex: 0 0 var(--shell-rail-collapsed-w);
  align-self: stretch;
}

html[data-guide-project-surface="notebook"]
  [data-notebook-left-chrome][data-rail-collapsed="true"]
  .notebook-shell__rail {
  width: 100%;
  max-width: var(--shell-rail-collapsed-w);
}

/* Shell sidebar collapse handle conflicts with notebook rail collapse + reopen tab. */
html[data-guide-project-surface="notebook"] .admin-shell__nav-column-chrome,
html[data-guide-project-surface="notebook"] .sidebar-rail-mode-toggle {
  display: none;
}

.notebook-chrome-header__panel-toggles {
  margin-right: var(--s-space-2);
}

.notebook-chrome-header__panel-toggles[hidden] {
  display: none;
}

/* Column-header pill chip — shared geometry (inspector PROTOTYPE + view-mode tabs) */
.notebook-shell__column-chip,
.notebook-shell__prototype-badge,
.notebook-shell__view-tab {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
  padding: 2px var(--s-space-2);
  min-height: 1.375rem;
  border-radius: var(--s-radius-pill);
}

.notebook-shell__prototype-badge {
  border: 1px solid var(--s-status-prototype-border);
  color: var(--s-status-prototype-fg);
  background: var(--s-status-prototype-bg);
}

/* Top shell breadcrumb PROTOTYPE chip — match notebook column-header rhythm */
html[data-guide-project-surface="notebook"] .shell-prototype-chip {
  min-height: 1.375rem;
  max-height: none;
  padding: 2px var(--s-space-2);
  font-size: var(--s-font-size-0);
  letter-spacing: 0.04em;
  line-height: 1.25;
}

/* ── Left rail (outline) ── */

.notebook-shell__rail {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--s-color-border-default);
  background: var(--s-color-bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notebook-shell__rail-grip {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 3;
}

.notebook-shell__rail-grip:hover {
  background: var(--s-color-accent-subtle);
}

.notebook-shell[data-rail-collapsed="true"] .notebook-shell__rail-grip {
  display: none;
}

.notebook-shell__rail-top,
.notebook-shell__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-space-2) var(--s-space-2) 0;
  gap: var(--s-space-2);
  min-height: 1.625rem;
  box-sizing: border-box;
}

/* Center column header — view-mode chips at trailing edge, Y-band matches inspector */
.notebook-shell__surfacebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-space-2);
  flex: none;
  min-height: var(--notebook-column-header-min-h);
  padding: var(--s-space-2) var(--s-space-3) var(--s-space-2) var(--s-space-4);
  box-sizing: border-box;
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.notebook-shell__rail-title,
.notebook-shell__rail-section-title {
  font-size: var(--s-font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-tertiary);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-shell__rail-section-title {
  padding: var(--s-space-2) var(--s-space-2) var(--s-space-tight-3);
}

.notebook-shell__icon-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--s-color-fg-tertiary);
  padding: var(--s-space-1);
  border-radius: var(--s-radius-sm);
}

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

.notebook-shell__icon-btn--sm {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.notebook-shell__menuwrap {
  position: relative;
}

.notebook-shell__menu {
  position: absolute;
  z-index: 30;
  min-width: 172px;
  background: var(--s-color-bg-card);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-md);
  box-shadow: none;
  padding: var(--s-space-1);
  margin-top: 2px;
}

.notebook-shell__menu[hidden] {
  display: none;
}

.notebook-shell__menu--right {
  right: 0;
  left: auto;
}

.notebook-shell__menu--up {
  bottom: calc(100% + 2px);
  right: 0;
  margin-top: 0;
}

.notebook-shell__menu-label {
  font-size: var(--s-font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-tertiary);
  font-weight: var(--s-font-weight-semibold);
  padding: var(--s-space-1) var(--s-space-2);
}

.notebook-shell__menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  background: transparent;
  border: 0;
  border-radius: var(--s-radius-sm);
  padding: var(--s-space-2);
  cursor: pointer;
}

.notebook-shell__menu-item:hover {
  background: var(--s-color-bg-subtle);
}

.notebook-shell__menu-sep {
  height: 1px;
  background: var(--s-color-border-subtle);
  margin: var(--s-space-1) 0;
}

/* spike v13b — keyboard shortcut badges on menu items (Notion-style). */
.notebook-shell__menu-item {
  justify-content: flex-start;
}

.notebook-shell__menu-item-kbd {
  margin-left: auto;
  font-family: var(--s-font-mono);
  font-size: 0.85em;
  color: var(--s-color-fg-tertiary);
  background: transparent;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: var(--s-font-weight-regular);
}

.notebook-shell__menu-item-arrow {
  color: var(--s-color-fg-tertiary);
  font-size: 1em;
  margin-left: var(--s-space-1);
  line-height: 1;
}

.notebook-shell__menu-item--has-submenu {
  position: relative;
}

/* spike v13d — search input at top of cell action menu. */
.notebook-shell__menu-search {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  padding: var(--s-space-2) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  margin-bottom: var(--s-space-1);
  border-radius: 0;
  box-sizing: border-box;
}

.notebook-shell__menu-search::placeholder {
  color: var(--s-color-fg-tertiary);
}

.notebook-shell__menu-search:focus-visible {
  outline: 0;
  border-bottom-color: var(--s-color-border-default);
}

/* spike v13c — Turn-into submenu floats to the right of its parent menu. */
.notebook-shell__menu--submenu {
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  min-width: 180px;
  background: var(--s-color-bg-card);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-md);
  box-shadow: none;
  padding: var(--s-space-1);
}

.notebook-shell__menu--submenu[hidden] {
  display: none;
}

/* FilterRail head — filter field + filter/sort menus (convergence notebook.html) */
.notebook-shell__rail-search {
  padding: var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-tight-3);
}

.notebook-shell__rail-search-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  min-width: 0;
}

.notebook-shell__rail-search .notebook-shell__field {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.notebook-shell__field--filter-active {
  border-color: color-mix(in oklch, var(--s-brand-700) 55%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--s-brand-700) 6%, var(--s-color-bg-app));
}

.notebook-shell__rail-filter-status {
  margin: 0;
  padding: 0 var(--s-space-1);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  line-height: 1.35;
  color: var(--s-brand-700);
  font-variant-numeric: tabular-nums;
}

.notebook-shell__rail-head-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--s-space-tight-3);
}

.notebook-shell__rail-head-actions .notebook-shell__menuwrap {
  display: flex;
}

.notebook-shell__outline--filtered .notebook-shell__outline-row[hidden],
.notebook-shell__outline--filtered .notebook-shell__outline-group[hidden] {
  display: none;
}

.notebook-shell__outline--filtered .notebook-shell__outline-row--filter-match {
  background: color-mix(in oklch, var(--s-brand-700) 10%, var(--s-color-bg-panel));
}

.notebook-shell__outline--filtered
  .notebook-shell__outline-row--filter-match
  .notebook-shell__outline-label {
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-shell__field {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-tight-3) var(--s-space-2);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-input);
  width: 100%;
  box-sizing: border-box;
}

.notebook-shell__field input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  font: inherit;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.notebook-shell__field svg {
  flex: none;
  color: var(--s-color-fg-tertiary);
}

.notebook-shell__pgraph {
  position: relative;
  padding: var(--s-space-2) var(--s-space-2) var(--s-space-tight-3);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.notebook-shell__pgraph-expand {
  position: absolute;
  top: var(--s-space-1);
  right: var(--s-space-1);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--s-color-fg-tertiary);
  padding: 2px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.notebook-shell__pgraph:hover .notebook-shell__pgraph-expand,
.notebook-shell__pgraph:focus-within .notebook-shell__pgraph-expand {
  opacity: 1;
  pointer-events: auto;
}

.notebook-shell__pgraph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.notebook-shell__pgraph-title {
  font-size: var(--s-font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-tertiary);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-shell__pgraph-svg-host {
  display: block;
  width: 100%;
}

.notebook-shell__pgraph-svg {
  display: block;
  width: 100%;
  height: 44px;
  color: var(--s-color-fg-primary);
}

.notebook-shell__pgraph-node {
  cursor: pointer;
}

.notebook-shell__pgraph-node circle {
  fill: var(--s-color-fg-secondary);
  transition: fill 0.12s ease, r 0.12s ease;
}

.notebook-shell__pgraph-node:hover circle {
  fill: var(--s-color-fg-primary);
}

.notebook-shell__pgraph-node[aria-current="true"] circle {
  fill: var(--s-brand-700);
}

.notebook-shell__graph-modal {
  position: fixed;
  inset: 0;
  z-index: var(--s-z-modal, 900);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-6);
  background: var(--s-brand-alpha-30, color-mix(in oklch, var(--s-brand-700) 18%, transparent));
}

.notebook-shell__graph-modal[hidden] {
  display: none;
}

.notebook-shell__graph-modal-panel {
  width: min(760px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: var(--s-space-5);
  background: var(--s-color-bg-card);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-lg);
  box-shadow: var(--s-shadow-xl);
  transition: width 0.18s ease, max-width 0.18s ease, max-height 0.18s ease;
}

/* Modal stays as quick checkpoint picker — Caitlin 2026-06-03 reframe.
   Examination at scale lives in the Timeline view-mode (center column),
   not in a "blown up" modal. The maximize toggle was retired; the
   "Open in Timeline view" bridge button replaces it. */

.notebook-shell__graph-modal-head {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  margin-bottom: var(--s-space-3);
}

.notebook-shell__graph-modal-title {
  flex: 1;
}

.notebook-shell__graph-modal-timeline-bridge:hover {
  color: var(--s-brand-700);
}

/* Timeline view host (Phase 1 placeholder; Phase 2 mounts the renderer-host).
   When the user picks the Timeline tab, streamHost hides and this shows. */
.notebook-shell__timeline-host {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-space-5);
  background: var(--s-color-bg-app);
}

.notebook-shell__timeline-host[hidden] {
  display: none;
}

.notebook-shell__timeline-placeholder {
  max-width: 640px;
  margin: var(--s-space-8) auto;
  padding: var(--s-space-5);
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-secondary);
}

.notebook-shell__timeline-placeholder-title {
  margin: 0 0 var(--s-space-3);
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-bold);
  color: var(--s-color-fg-primary);
}

.notebook-shell__timeline-placeholder-body {
  margin: 0;
  font-size: var(--s-font-size-0);
  line-height: 1.55;
}

.notebook-shell__graph-modal-title {
  margin: 0;
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-bold);
}

.notebook-shell__graph-modal-graph {
  margin-bottom: var(--s-space-4);
}

.notebook-shell__graph-node {
  cursor: pointer;
}

.notebook-shell__graph-node:hover circle {
  stroke: var(--s-color-fg-primary);
}

.notebook-shell__graph-node[aria-current="true"] .notebook-shell__graph-node-ring {
  stroke: var(--s-brand-700);
}

.notebook-shell__graph-modal-aside {
  border-top: 1px solid var(--s-color-border-subtle);
  padding-top: var(--s-space-3);
}

.notebook-shell__graph-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 200px;
  overflow: auto;
  padding-left: var(--s-space-3);
  margin-top: var(--s-space-2);
}

.notebook-shell__graph-timeline-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-space-twohair);
  width: 100%;
  padding: var(--s-space-2) var(--s-space-2) var(--s-space-2) var(--s-space-5);
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
  cursor: pointer;
  border-radius: var(--s-radius-sm);
}

.notebook-shell__graph-timeline-row::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--s-color-border-subtle);
}

.notebook-shell__graph-timeline-row::after {
  content: "";
  position: absolute;
  left: 3px;
  top: var(--s-space-3);
  width: 7px;
  height: 7px;
  border-radius: var(--s-radius-round);
  background: var(--s-color-fg-tertiary);
  border: 2px solid var(--s-color-bg-card);
}

.notebook-shell__graph-timeline-row:hover,
.notebook-shell__graph-timeline-row[aria-current="true"] {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.notebook-shell__graph-timeline-row[aria-current="true"]::after {
  background: var(--s-brand-700);
}

.notebook-shell__graph-timeline-verb {
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.notebook-shell__graph-timeline-meta {
  color: var(--s-color-fg-tertiary);
}

.notebook-shell__graph-latest-tag {
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-status-success);
}

.notebook-shell__rail-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-space-2);
}

.notebook-shell__outline {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-hair);
  /* Rail fg names alias the standard neutral fg tokens. The calming is done
   * by the scilence [data-chrome='calm'] variant set on the rail container
   * (notebook-shell.js), which de-tints --s-color-fg-* within this subtree —
   * brandscaled, no literals here. */
  --nb-rail-fg: var(--s-color-fg-secondary);
  --nb-rail-fg-soft: var(--s-color-fg-tertiary);
  --nb-rail-fg-faint: var(--s-color-fg-tertiary);
  color: var(--nb-rail-fg);
}

.notebook-shell__outline-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-tight-3) var(--s-space-2);
  border-radius: var(--s-radius-sm);
  cursor: pointer;
  color: var(--nb-rail-fg);
  font-size: var(--s-font-size-0);
  text-align: left;
  border: 0;
  background: transparent;
  width: 100%;
}

.notebook-shell__outline-glyph {
  flex: none;
  color: var(--nb-rail-fg-soft);
  /* Muted — de-noise the rail so it reads text-first (Caitlin 2026-06-07). */
  opacity: 0.45;
  display: flex;
  align-items: center;
}

.notebook-shell__outline-row[aria-current="true"] .notebook-shell__outline-glyph {
  color: var(--s-color-fg-primary);
}

.notebook-shell__rail-filter-empty {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
  padding: var(--s-space-2);
  margin: 0;
}

.notebook-shell__outline-row:hover {
  background: var(--s-color-bg-subtle);
}

.notebook-shell__outline-row[aria-current="true"] {
  background: var(--s-color-accent-subtle);
  color: var(--s-color-fg-primary);
}

.notebook-shell__outline-row--archived {
  opacity: 0.35;
  font-style: italic;
  cursor: default;
}

.notebook-shell__outline-row--archived:hover {
  background: transparent;
}

.notebook-shell__outline-restore {
  flex: none;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-micro);
  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-sm);
  padding: 2px var(--s-space-twohair);
  cursor: pointer;
}

.notebook-shell__outline-restore:hover {
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-border-default);
}

.notebook-shell__outline-kind {
  flex: none;
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-tertiary);
  min-width: 3.25rem;
}

.notebook-shell__outline-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-shell__outline-row--child {
  padding-left: var(--s-space-2);
}

.notebook-shell__outline-row--child2 {
  padding-left: var(--s-space-3);
}

.notebook-shell__outline-children {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-hair);
  position: relative;
  /* Tight leaf indent — Fibonacci tokens only (Caitlin 2026-06-07). */
  margin-left: var(--s-space-1);
  padding-left: var(--s-space-1);
  border-left: 1px solid var(--s-color-border-subtle);
}

.notebook-shell__outline-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-hair);
}

.notebook-shell__outline-group-hd {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-tight-3) var(--s-space-2);
  border-radius: var(--s-radius-sm);
  cursor: pointer;
  color: var(--nb-rail-fg);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  text-align: left;
  border: 0;
  background: transparent;
  width: 100%;
}

.notebook-shell__outline-group-hd:hover {
  background: var(--s-color-bg-subtle);
}

.notebook-shell__outline-caret {
  flex: none;
  /* Hidden at rest; revealed on group hover/focus where it replaces the
   * folder glyph in the same slot (chevron-swap). Removes the always-on
   * caret and the chevron+folder doubling (Caitlin 2026-06-07). */
  display: none;
  color: var(--nb-rail-fg-soft);
  transition: transform 0.12s ease;
}

.notebook-shell__outline-group:not([data-collapsed="true"]) .notebook-shell__outline-caret {
  transform: rotate(90deg);
}

/* Chevron-swap on hover/focus — folder out, disclosure chevron in, same slot. */
.notebook-shell__outline-group-hd:hover .notebook-shell__outline-caret,
.notebook-shell__outline-group-hd:focus-visible .notebook-shell__outline-caret {
  display: inline-flex;
}

.notebook-shell__outline-group-hd:hover .notebook-shell__outline-glyph,
.notebook-shell__outline-group-hd:focus-visible .notebook-shell__outline-glyph {
  display: none;
}

.notebook-shell__outline-group[data-collapsed="true"] .notebook-shell__outline-children {
  display: none;
}

.notebook-shell__outline-subgroups {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-hair);
  margin-left: var(--s-space-1);
  padding-left: var(--s-space-1);
  border-left: 2px solid var(--s-color-border-subtle);
}

.notebook-shell__outline-subgroups .notebook-shell__outline-group-hd {
  padding-left: var(--s-space-1);
  font-weight: var(--s-font-weight-medium);
}

.notebook-shell__outline-subgroups .notebook-shell__outline-subgroups .notebook-shell__outline-group-hd {
  font-weight: var(--s-font-weight-regular);
  color: var(--nb-rail-fg-soft);
}

.notebook-shell__outline-group[data-collapsed="true"] .notebook-shell__outline-subgroups {
  display: none;
}

.notebook-shell__outline-count {
  flex: none;
  font-size: var(--s-font-size-micro);
  color: var(--nb-rail-fg-faint);
  font-variant-numeric: tabular-nums;
}

.notebook-shell__outline-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--s-radius-round, 50%);
}

.notebook-shell__outline-dot--stale {
  background: var(--s-color-status-warning);
}

.notebook-shell__outline-dot--stub {
  background: var(--s-status-prototype-fg);
}

.notebook-shell__insp-stale {
  color: var(--s-color-status-warning);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-shell__insp-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-space-tight-3) var(--s-space-3);
  margin: 0;
  font-size: var(--s-font-size-0);
}

.notebook-shell__insp-kv dt {
  color: var(--nb-rail-fg-soft);
  font-weight: var(--s-font-weight-medium);
}

.notebook-shell__insp-kv dd {
  margin: 0;
  color: var(--s-color-fg-primary);
}

.notebook-shell__insp-excerpt {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
  margin: 0;
  line-height: var(--s-line-height-relaxed, 1.45);
}

.notebook-shell__rail-foot {
  flex: none;
  margin-top: auto;
  border-top: 1px solid var(--s-color-border-subtle);
  padding: var(--s-space-2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-space-2);
}

.notebook-shell__new-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-2);
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  border-radius: var(--s-radius-md);
  padding: var(--s-space-2) var(--s-space-3);
  cursor: pointer;
  border: 1px solid var(--s-brand-700);
  background: var(--s-brand-700);
  color: var(--s-cream-50);
}

.notebook-shell__new-cell:hover {
  filter: brightness(0.95);
}

.notebook-shell__new-cell:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

/* ── Center stream column ── */

.notebook-shell__center {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notebook-shell__surfacebar-spacer {
  flex: 1;
  min-width: 0;
}

.notebook-shell__view-switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-space-2);
  flex: none;
}

.notebook-shell__view-tab {
  appearance: none;
  margin: 0;
  width: auto;
  align-self: center;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid
    color-mix(in oklch, var(--s-brand-700) 40%, var(--s-color-border-subtle));
  color: var(--s-brand-700);
  background: transparent;
  transition:
    background var(--s-duration-fast) ease,
    border-color var(--s-duration-fast) ease,
    color var(--s-duration-fast) ease;
}

.notebook-shell__view-tab:hover:not(:disabled):not([aria-selected="true"]) {
  background: color-mix(in oklch, var(--s-brand-700) 8%, var(--s-color-bg-app));
  border-color: color-mix(in oklch, var(--s-brand-700) 65%, var(--s-color-border-subtle));
}

.notebook-shell__view-tab[aria-selected="true"] {
  color: var(--s-brand-700);
  background: color-mix(in oklch, var(--s-brand-700) 14%, var(--s-color-bg-app));
  border-color: var(--s-brand-700);
}

.notebook-shell__view-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.notebook-shell__view-tab:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

/* View-tab icon + label layout — icon sits left of label at wide widths,
 * label hides at narrow viewports leaving icon-only buttons. Native title=
 * tooltip on the button handles hover labelling. */
.notebook-shell__view-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
}

.notebook-shell__view-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

html:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell__view-tab-label {
  display: none;
}

html:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .notebook-shell__view-tab {
  gap: 0;
}

/* Hide the narrative variant's "viewing as" ::before prefix at narrow widths
 * — the prefix adds visual noise once the labels are icons. */
html:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  body[data-notebook-stream-variant="narrative"]
  .notebook-shell__view-switch::before {
  content: none;
}

/* Surfacebar drawer-toggle buttons — hidden by default; surface only at
 * super-narrow (mobile-s) where the var(--shell-rail-collapsed-w) ribbon columns are hidden by the
 * existing mobile system. Tap → opens the rail/inspector drawer overlay. */
.notebook-shell__surfacebar-toggle {
  display: none;
  appearance: none;
  margin: 0;
  padding: 4px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-secondary);
  cursor: pointer;
  flex: none;
}

.notebook-shell__surfacebar-toggle:hover {
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-primary);
}

.notebook-shell__surfacebar-toggle:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

html[data-viewport^="mobile-"] .notebook-shell__surfacebar-toggle {
  display: inline-flex;
}

/* Reduce stream-host padding at narrow widths — more reading space, less
 * frame. Default narrative variant sets var(--s-space-5) = 21px each side,
 * which eats ~12% of a 350px viewport. Drop to var(--s-space-2) = 5px. */
html[data-viewport^="mobile-"] .notebook-shell__stream-host {
  padding-left: var(--s-space-2);
  padding-right: var(--s-space-2);
  padding-bottom: var(--s-space-2);
}

/* Surfacebar own padding — tighten at narrow so the toggle icons sit close
 * to the edges and don't waste horizontal space. */
html[data-viewport^="mobile-"] .notebook-shell__surfacebar {
  padding-left: var(--s-space-2);
  padding-right: var(--s-space-2);
}

/* Admin-shell grid — collapse the var(--shell-rail-collapsed-w) tracks to 0 when the rails are
 * hidden so the stream fills the full viewport width. Mirrors the rail-
 * hide logic above:
 *   - PORTRAIT mobile-* → collapse
 *   - LANDSCAPE mobile-s → collapse (rails hidden either way at mobile-s)
 *   - LANDSCAPE mobile-m/lg, tablet+ → keep 46+1fr+46. */
@media (orientation: portrait) {
  html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
    .admin-shell[data-bilateral-chrome]:has([data-notebook-left-chrome]):has(
      [data-notebook-right-chrome]
    ) {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }
}

html[data-guide-project-surface="notebook"][data-viewport="mobile-s"]
  .admin-shell[data-bilateral-chrome]:has([data-notebook-left-chrome]):has(
    [data-notebook-right-chrome]
  ) {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}

/* pw-panel__body padding eats another 16px at narrow widths — drop it. */
html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
  .pw-panel__body {
  padding-left: 0;
  padding-right: 0;
}

/* C-header / C-footer pattern (Caitlin direct 2026-06-06): at mobile-*,
 * the dedicated notebook surfacebar is replaced by a view-picker + tools
 * button in the global header (injected via JS). The status footer
 * collapses to a single readiness dot in the header. Reading area
 * reclaims ~36px (surfacebar) + ~32px (footer) of vertical space.
 *
 * Landscape phones (wide but short, ~880×400) hit a tablet width band so
 * the data-viewport attribute is "tablet-*", but the chrome compression
 * is still useful. Mirror the rules with a @media (max-height: 500px)
 * query that fires for any constrained-height viewport. */
/* Surfacebar hidden entirely at mobile-* and landscape phone. */
html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
  .notebook-shell__surfacebar {
  display: none;
}

@media (max-height: 500px) {
  html[data-guide-project-surface="notebook"]
    .notebook-shell__surfacebar {
    display: none;
  }
}

/* Footer scroll-end reveal at mobile-* / landscape phone (Caitlin direct
 * 2026-06-06):
 *   - Default: footer is position:fixed at the viewport bottom, slid out
 *     of view via translateY(100%). It stays in the DOM (display:flex) so
 *     IntersectionObserver / measurements still work and there's no
 *     layout-shift when it slides in.
 *   - When body[data-notebook-footer-revealed="true"] is set (by JS when
 *     the bottom-of-stream sentinel enters the viewport), it slides up
 *     into place — sticky from that moment on while the user is at the
 *     end of the stream.
 *   - Scrolling away from the end unsets the attribute → footer slides
 *     back out. */
html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
  .admin-shell
  > .shell-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  transform: translateY(100%);
  transition: transform var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}

/* Drop the padding-bottom that admin-shell.css reserves for the footer
 * (var(--shell-footer-height)) — at mobile the footer is position:fixed
 * and overlays content when revealed, so the reservation just creates
 * dead space at the bottom that artificially cuts off the stream. */
html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
  .admin-shell
  > .main-content {
  padding-bottom: 0;
}

html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
  body[data-notebook-footer-revealed="true"]
  .admin-shell
  > .shell-footer {
  transform: translateY(0);
}

@media (max-height: 500px) {
  html[data-guide-project-surface="notebook"]
    .admin-shell
    > .shell-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    transform: translateY(100%);
    transition:
      transform var(--s-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }
  html[data-guide-project-surface="notebook"]
    body[data-notebook-footer-revealed="true"]
    .admin-shell
    > .shell-footer {
    transform: translateY(0);
  }
  /* Same padding drop at landscape phone (max-height path). */
  html[data-guide-project-surface="notebook"]
    .admin-shell
    > .main-content {
    padding-bottom: 0;
  }
}

/* Mobile header injections — view-picker + tools button. */
.notebook-mobile-header-injection {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
}

/* Redundancy guard — when the rails are visible (landscape mobile-m/lg
 * or tablet+ if the injection ever fires there via max-height), the nav
 * button and tools button are visual duplicates of the rail chev. Hide
 * them; keep the view-picker (no rail equivalent) and the readiness dot. */
@media (orientation: landscape) {
  html[data-guide-project-surface="notebook"]:is(
      [data-viewport="mobile-m"],
      [data-viewport="mobile-lg"]
    )
    .notebook-mobile-header__nav,
  html[data-guide-project-surface="notebook"]:is(
      [data-viewport="mobile-m"],
      [data-viewport="mobile-lg"]
    )
    .notebook-mobile-header__tools {
    display: none;
  }
}

.notebook-mobile-header-injection button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: transparent;
  color: var(--s-color-fg-secondary);
  cursor: pointer;
}

.notebook-mobile-header-injection button:hover {
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}

.notebook-mobile-header-injection
  button.notebook-mobile-header__view-picker {
  width: auto;
  padding: 4px 6px;
  gap: var(--s-space-twohair);
}

.notebook-mobile-header__view-picker-chev {
  font-size: var(--s-font-size-micro);
  color: var(--s-color-fg-tertiary);
  line-height: 1;
}

/* View-picker popover — anchors below the trigger. */
.notebook-mobile-header__view-popover {
  position: fixed;
  z-index: 10100;
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  box-shadow: var(--s-shadow-lg);
  padding: var(--s-space-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-hair);
  min-width: 140px;
}

.notebook-mobile-header__view-popover[hidden] {
  display: none;
}

.notebook-mobile-header__view-popover button {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  padding: var(--s-space-2) var(--s-space-3);
  border: 0;
  background: transparent;
  color: var(--s-color-fg-primary);
  font-family: inherit;
  font-size: var(--s-font-size-0);
  text-align: left;
  cursor: pointer;
  border-radius: var(--s-radius-sm);
}

.notebook-mobile-header__view-popover button:hover {
  background: var(--s-color-bg-hover);
}

.notebook-mobile-header__view-popover button[aria-selected="true"] {
  color: var(--s-brand-700);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-mobile-header__view-popover button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Readiness dot in header (footer compression). */
.notebook-mobile-header__readiness {
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(73% 0.18 158);
  margin: 0 var(--s-space-1);
  align-self: center;
  flex: none;
}

/* ── GH-431 spike — read-only checkpoint banner ─────────────────────────
 *
 * Capabilities tier: PROVISIONAL — sits between the view-switcher and
 * the stream host. Persists for the duration of checkpoint view, the
 * primary-colored Return-to-latest button at the right edge.
 *
 * `data-checkpoint-readonly` on the shell root drives:
 *   - host-level `pointer-events: none` over the stream so CAS chips
 *     (mount-locked) and prose/decision/markdown cells can't be clicked
 *     into edit. We don't touch CAS code; we cap interaction one layer up.
 *   - desaturation on the stream so it visually reads "audit, not edit".
 *
 * Note: the banner itself stays interactive (Return-to-latest button).
 */
.notebook-shell__checkpoint-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-3);
  padding: var(--s-space-2) var(--s-space-5);
  background: color-mix(in oklch, var(--s-brand-700) 14%, var(--s-color-bg-app));
  border-bottom: 1px solid var(--s-brand-700);
  color: var(--s-brand-700);
  font-size: 0.8125rem;
  line-height: 1.4;
  flex: none;
}

.notebook-shell__checkpoint-banner[hidden] {
  display: none;
}

.notebook-shell__checkpoint-banner-text {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.notebook-shell__checkpoint-return {
  appearance: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: var(--s-space-1) var(--s-space-3);
  border: 1px solid var(--s-brand-700);
  color: var(--s-color-bg-app);
  background: var(--s-brand-700);
  transition:
    background var(--s-duration-fast) ease,
    border-color var(--s-duration-fast) ease;
}

.notebook-shell__checkpoint-return:hover {
  background: color-mix(in oklch, var(--s-brand-700) 88%, var(--s-color-fg-primary));
  border-color: color-mix(in oklch, var(--s-brand-700) 88%, var(--s-color-fg-primary));
}

.notebook-shell__checkpoint-return:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

/* While viewing a checkpoint, suppress interaction in the stream host
 * without touching the CAS widget code (mount lock). The stream visibly
 * desaturates so the read-only state reads as "audit, not edit". */
.notebook-shell[data-checkpoint-readonly="true"] .notebook-shell__stream-host,
.notebook-shell[data-checkpoint-readonly="true"]
  .notebook-shell__stream-host .project-notebook,
.notebook-shell[data-checkpoint-readonly="true"]
  .notebook-shell__stream-host [data-notebook-cell] {
  pointer-events: none;
}

.notebook-shell[data-checkpoint-readonly="true"] .notebook-shell__stream-host {
  filter: saturate(0.55);
}

/* The + Add cell affordance in the rail foot reads as disabled while in
 * checkpoint view — the click handler short-circuits, the styling matches. */
.notebook-shell[data-checkpoint-readonly="true"] .notebook-shell__new-cell {
  opacity: 0.45;
  cursor: not-allowed;
}

.notebook-shell__stream-host {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-space-3) var(--s-space-5) var(--s-space-5);
}

/* Cellular primitive inside shell — hide flat add-cell; shell owns palette */
.notebook-shell .project-notebook {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  padding: 0;
  overflow: visible;
  flex: none;
  min-height: auto;
}

.notebook-shell .project-notebook__stream {
  max-width: 56rem;
  margin: 0 auto;
  width: 100%;
}

.notebook-shell .project-notebook__stream[data-palette-drop-target="true"] {
  outline: 2px dashed var(--s-color-border-default);
  outline-offset: 4px;
  border-radius: var(--s-radius-md);
}

.notebook-shell .project-notebook__add-cell {
  display: none;
}

/* ── New-cell palette (ported from wireframe) ── */

.notebook-cell-palette {
  position: fixed;
  z-index: 300;
  width: 520px;
  max-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--s-color-bg-card);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-lg);
  box-shadow: none;
  padding: var(--s-space-2);
}

.notebook-cell-palette[hidden] {
  display: none;
}

.notebook-cell-palette__search {
  flex: none;
  width: 100%;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-input);
  padding: var(--s-space-2);
  font: inherit;
  font-size: var(--s-font-size-0);
  margin-bottom: var(--s-space-2);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
}

.notebook-cell-palette__layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: var(--s-space-2);
}

.notebook-cell-palette__nav {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
  width: 5.5rem;
  padding-right: var(--s-space-1);
  border-right: 1px solid var(--s-color-border-subtle);
}

.notebook-cell-palette__nav-btn {
  border: 0;
  background: transparent;
  border-radius: var(--s-radius-sm);
  padding: var(--s-space-tight-3) var(--s-space-2);
  font: inherit;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-secondary);
  text-align: left;
  cursor: pointer;
}

.notebook-cell-palette__nav-btn:hover {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.notebook-cell-palette__nav-btn[aria-selected="true"] {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-cell-palette__nav-btn[hidden] {
  display: none;
}

.notebook-cell-palette__body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.notebook-cell-palette__panel-title {
  font-size: var(--s-font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-tertiary);
  font-weight: var(--s-font-weight-semibold);
  padding: 0 var(--s-space-1) var(--s-space-2);
}

.notebook-cell-palette__panel[hidden] {
  display: none;
}

.notebook-cell-palette--searching .notebook-cell-palette__nav {
  opacity: 0.45;
  pointer-events: none;
}

.notebook-cell-palette__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-hair);
}

.notebook-cell-palette__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-space-1);
  margin-top: var(--s-space-1);
}

.notebook-cell-palette__group {
  font-size: var(--s-font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-tertiary);
  font-weight: var(--s-font-weight-semibold);
  padding: var(--s-space-2) var(--s-space-2) var(--s-space-tight-3);
}

.notebook-cell-palette__subgroup {
  margin: 0 var(--s-space-1) var(--s-space-1);
}

.notebook-cell-palette__subhead {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  padding: var(--s-space-2);
  font: inherit;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  cursor: pointer;
}

.notebook-cell-palette__subhead:hover {
  background: var(--s-color-bg-app);
  border-color: var(--s-color-border-subtle);
}

.notebook-cell-palette__subhead-caret {
  display: inline-flex;
  transition: transform 0.12s ease;
  color: var(--s-color-fg-tertiary);
  flex: none;
}

.notebook-cell-palette__subgroup[data-collapsed="true"] .notebook-cell-palette__children {
  display: none;
}

.notebook-cell-palette__subgroup[data-collapsed="true"] .notebook-cell-palette__subhead-caret {
  transform: rotate(-90deg);
}

.notebook-cell-palette__subhead-meta {
  margin-left: auto;
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-tertiary);
  font-family: var(--s-font-mono);
}

.notebook-cell-palette__children {
  margin: var(--s-space-1) 0 0;
  padding: 0;
  border: 0;
}

.notebook-cell-palette__item {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: var(--s-radius-sm);
  padding: var(--s-space-2);
  font: inherit;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  cursor: pointer;
}

.notebook-cell-palette__item--tile {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-space-tight-3);
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-app);
  min-height: 4.25rem;
}

.notebook-cell-palette__item--tile:hover {
  border-color: var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.notebook-cell-palette__item--tile .notebook-cell-palette__item-label {
  flex: none;
  font-size: var(--s-font-size-0);
  line-height: 1.25;
}

.notebook-cell-palette__item--tile .notebook-cell-palette__item-badge {
  align-self: flex-start;
}

.notebook-cell-palette__tile-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-semibold);
  font-family: var(--s-font-mono);
  color: var(--s-color-fg-secondary);
  letter-spacing: 0.02em;
}

.notebook-cell-palette__item[hidden] {
  display: none;
}

.notebook-cell-palette--dragging .notebook-cell-palette__item[draggable="true"] {
  cursor: grab;
}

.notebook-cell-palette__item[draggable="true"]:active {
  cursor: grabbing;
}

.notebook-cell-palette__item:hover {
  background: var(--s-color-bg-subtle);
}

.notebook-cell-palette__item--child {
  font-size: var(--s-font-size-0);
  padding: var(--s-space-tight-3) var(--s-space-2);
}

.notebook-cell-palette__item-label {
  flex: 1;
  min-width: 0;
}

.notebook-cell-palette__item-badge {
  flex: none;
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--s-space-2);
  border-radius: var(--s-radius-pill);
  border: 1px solid var(--s-color-status-warning);
  color: var(--s-color-status-warning);
  background: var(--s-color-bg-subtle);
}

.notebook-cell-palette__item-badge--shipped {
  color: var(--s-brand-700);
  background: var(--s-color-bg-subtle);
  border-color: var(--s-color-border-default);
}

/* ── Right inspector stub ── */

/* Golden composite parity — left edge separates inspector from the stream */
.notebook-shell__inspector {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--s-color-border-default);
  background: var(--s-color-bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Inspector fg names alias the standard neutral fg tokens. Calming is done
   * by the scilence [data-chrome='calm'] variant set on the inspector
   * container (notebook-shell.js), which de-tints --s-color-fg-* within this
   * subtree — brandscaled, no literals here. Action accents (route buttons,
   * CAS link) use accent tokens, so they're unaffected. */
  --nb-rail-fg: var(--s-color-fg-secondary);
  --nb-rail-fg-soft: var(--s-color-fg-tertiary);
  --nb-rail-fg-faint: var(--s-color-fg-tertiary);
}

.notebook-shell__insp-grip {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 3;
}

.notebook-shell__insp-grip:hover {
  background: var(--s-color-accent-subtle);
}

[data-notebook-right-chrome][data-insp-collapsed="true"] .notebook-shell__insp-grip,
.notebook-shell[data-insp-collapsed="true"] .notebook-shell__insp-grip {
  display: none;
}

.notebook-shell__insp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  min-height: var(--notebook-column-header-min-h);
  box-sizing: border-box;
  border-bottom: 1px solid var(--s-color-border-subtle);
  flex: none;
}

.notebook-shell__insp-title {
  flex: 1;
  min-width: 0;
  font-size: var(--s-font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nb-rail-fg-soft);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-shell__insp-header .notebook-shell__prototype-badge {
  flex: none;
}

/* Whole-rail collapse — chevron only (not ✕ close); golden composite #insp-collapse */
.notebook-shell__insp-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-left: var(--s-space-1);
}

.notebook-shell__insp-collapse svg {
  display: block;
}

/* Cowork-style stacked inspector cards */
.notebook-shell__insp-stack {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-space-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  background: var(--s-color-bg-app);
}

/* Notebook inspector card grip — match the middle-column cell drag handle:
 * a compact 22x22 box (not a full-height divider bar), calm icon. Scoped to
 * the notebook inspector so the shared inspector-stack primitive (other
 * surfaces) is untouched. Caitlin 2026-06-07. */
.notebook-shell__inspector .inspector-stack__grip {
  align-self: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-right: 0;
  border-radius: var(--s-radius-sm);
  color: var(--nb-rail-fg-soft);
}

.notebook-insp-widget {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-panel);
  overflow: hidden;
}

.notebook-insp-widget__header {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  padding: var(--s-space-1) var(--s-space-2);
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}

.notebook-insp-widget__header:hover {
  background: var(--s-color-bg-subtle);
}

.notebook-insp-widget__header:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: -2px;
}

.notebook-insp-widget__title {
  flex: 1;
  min-width: 0;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notebook-insp-widget__chevron {
  flex: none;
  display: inline-flex;
  color: var(--nb-rail-fg-soft);
  transition: transform var(--s-duration-fast) ease;
}

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

.notebook-insp-widget__body {
  padding: 0 var(--s-space-2) var(--s-space-2);
  font-size: var(--s-font-size-0);
  color: var(--nb-rail-fg);
  line-height: 1.5;
}

.notebook-insp-widget[data-collapsed="true"] .notebook-insp-widget__body {
  display: none;
}

.notebook-shell__insp-cell-host,
.notebook-shell__insp-stub-body {
  min-width: 0;
}

.notebook-shell__insp-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-space-3);
  font-size: var(--s-font-size-0);
  color: var(--nb-rail-fg);
  line-height: 1.5;
}

.notebook-shell__insp-lead {
  margin: 0 0 var(--s-space-3);
}

.notebook-shell__insp-tabs {
  display: flex;
  gap: var(--s-space-1);
  margin-bottom: var(--s-space-3);
}

.notebook-shell__insp-tab {
  font: inherit;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

.notebook-shell__insp-tab[aria-selected="true"] {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.notebook-shell__insp-note {
  margin: 0;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
}

.notebook-shell__insp-route-btn {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-space-2);
  padding: var(--s-space-1) var(--s-space-2);
  font: inherit;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-brand-700);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-sm);
  cursor: pointer;
}

.notebook-shell__insp-route-btn:hover {
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-primary);
}

.notebook-shell__insp-route-btn--secondary {
  margin-left: 0;
  color: var(--s-color-fg-secondary);
  border-color: var(--s-color-border-subtle);
}

/* Header panel toggles removed — collapse via rail/inspector chrome only. */
html[data-guide-project-surface="notebook"] .notebook-chrome-header__panel-toggles {
  display: none;
}

/* ── Notebook surface: app-shell left chrome hosts the navigator rail ── */

/* Narrow viewports + landscape phone: drop the GUIDE wordmark and the
 * breadcrumb pill to free horizontal space for the right-side
 * affordances. iPhone Pro Max landscape (~956×440) needs the room.
 * The hamburger menu still navigates home; project switcher is still
 * reachable via tap on the title area in the hamburger drawer. Selector
 * matches the earlier breadcrumb-restore rule's specificity (which fires
 * at mobile-* / tablet-*) so this override actually wins. */
html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
  [data-guide-wordmark],
html[data-guide-project-surface="notebook"][data-viewport^="mobile-"]
  .shell-breadcrumb-pill,
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )[data-viewport]
  .shell-breadcrumb-pill {
  display: none;
}

@media (max-height: 500px) {
  html[data-guide-project-surface="notebook"][data-viewport]
    [data-guide-wordmark],
  html[data-guide-project-surface="notebook"][data-viewport]
    .shell-breadcrumb-pill {
    display: none;
  }
}

/* (Earlier override for data-shell-mobile-drawer="open" was removed —
 * the hamburger now triggers the hamburger overlay popover on phone, same
 * as desktop. Mobile sidebar drawer mechanism is no longer in play at
 * notebook surface.) */

/* Smaller header + footer at mobile / tablet (Caitlin direct 2026-06-06):
 * the standard chrome bands feel too tall; err on the smaller side when
 * picking from the token scale. Specificity (0,5,1) — beats the base
 * .shell-header (0,1,0) without. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .admin-shell
  > .shell-top-cluster
  > .shell-header {
  padding-top: max(var(--s-space-1), env(safe-area-inset-top));
  padding-bottom: var(--s-space-1);
  min-height: calc(var(--s-font-size-active) * 2);
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .admin-shell
  > .shell-footer
  .shell-footer__inner {
  min-height: calc(var(--s-font-size-active) * 1.75);
  gap: var(--s-space-1);
}

/* Landscape phone — same compression via @media. */
@media (max-height: 500px) {
  html[data-guide-project-surface="notebook"]
    .admin-shell
    > .shell-top-cluster
    > .shell-header {
    padding-top: max(var(--s-space-1), env(safe-area-inset-top));
    padding-bottom: var(--s-space-1);
    min-height: calc(var(--s-font-size-active) * 2);
  }
  html[data-guide-project-surface="notebook"]
    .admin-shell
    > .shell-footer
    .shell-footer__inner {
    min-height: calc(var(--s-font-size-active) * 1.75);
    gap: var(--s-space-1);
  }
}

/* Unified header affordance treatment (Caitlin direct 2026-06-06): the 6
 * header items came from 4 different style sources, looking visually
 * inconsistent — hamburger + bell had no chrome (.header-icon-btn:
 * transparent, no border), search had its own field chrome (.shell-
 * global-search__field: tinted bg + border), the injection buttons had
 * yet another treatment. Unify all 4 BUTTONS (hamburger / search / nav /
 * view / tools / bell) to 28×28 bordered cards with transparent bg and
 * larger 18px SVGs. Readiness dot stays separate (not a button).
 *
 * Selector chain has high specificity (0,4-5,1) but admin-shell.css
 * background rules on .shell-global-search__field also have
 * upstream — the `background` line uses to defeat that. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  :is(
    .shell-header__left-cluster .hamburger-host > button,
    .shell-global-search,
    .notebook-mobile-header-injection > button,
    .shell-header__alerts
  ) {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
  padding: 4px;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: transparent;
  color: var(--s-color-fg-secondary);
  box-sizing: border-box;
  overflow: hidden;
}

/* When the search is :focus-within, drop the 28×28 clamp so the input +
 * close affordance can render at usable width (Caitlin direct 2026-06-06:
 * "make sure there's a way to close each of them easily"). */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .shell-global-search:focus-within {
  width: auto;
  min-width: 200px;
  max-width: min(400px, 80vw);
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  overflow: visible;
}

/* Hide the ⌘K kbd hint at narrow viewports — no physical keyboard on
 * mobile/tablet, and it overflows the 28×28 clamp creating a phantom
 * second bordered card visually (Caitlin direct 2026-06-06 iPhone). */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .shell-global-search__hint {
  display: none;
}

/* Close X button shown when search is expanded at narrow viewports.
 * Injected by admin-shell.js initGlobalSearch. */
.shell-global-search__close {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--s-color-fg-secondary);
  padding: 4px;
  margin-right: 4px;
  cursor: pointer;
  border-radius: var(--s-radius-sm);
  align-items: center;
  justify-content: center;
}
.shell-global-search__close:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .shell-global-search:focus-within
  .shell-global-search__close {
  display: inline-flex;
}

/* Search inner field — defer to outer wrapper border so we don't get a
 * double border. Fill the parent, no chrome of its own. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .shell-global-search:not(:focus-within)
  > .shell-global-search__field {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

/* The view-picker has a ▾ chev that needs ~6px extra width — special-
 * case it so the 28×28 clamp doesn't crop the chev. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .notebook-mobile-header__view-picker {
  width: auto;
  min-width: 34px;
  max-width: 40px;
  padding: 4px 4px 4px 5px;
}

/* Larger SVG icons inside the unified buttons. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  :is(
    .shell-header__left-cluster .hamburger-host > button,
    .shell-global-search,
    .notebook-mobile-header-injection > button,
    .shell-header__alerts
  )
  > svg,
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"],
    [data-viewport="desktop-s"]
  )
  .shell-global-search
  svg {
  width: 18px;
  height: 18px;
}

/* Same unification at landscape phone (height-constrained but might land
 * outside mobile-*/tablet-* / desktop-s band on some devices). */
@media (max-height: 500px) {
  html[data-guide-project-surface="notebook"]
    :is(
      .shell-header__left-cluster .hamburger-host > button,
      .shell-global-search,
      .notebook-mobile-header-injection > button,
      .shell-header__alerts
    ) {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    padding: 4px;
    border: 1px solid var(--s-color-border-subtle);
    border-radius: var(--s-radius-sm);
    background: transparent;
    color: var(--s-color-fg-secondary);
    box-sizing: border-box;
  }
  html[data-guide-project-surface="notebook"]
    .shell-global-search:not(:focus-within)
    > .shell-global-search__field {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
  }
  html[data-guide-project-surface="notebook"]
    .notebook-mobile-header__view-picker {
    width: auto;
    min-width: 34px;
    max-width: 40px;
    padding: 4px 4px 4px 5px;
  }
}

/* Mobile header polish for the notebook surface — Caitlin direct 2026-06-06:
 * (1) show the breadcrumb + project switcher at narrow widths (was hidden
 *     by admin-shell-responsive.css:281-284); (2) right-align the search
 *     in the center segment so it sits next to the bell instead of
 *     mid-header; (3) tighten the gap between search and bell. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .shell-breadcrumb-pill {
  display: inline-flex;
  max-width: min(40vw, 12rem);
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .shell-header__center-segment {
  justify-content: flex-end;
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .shell-header__right-cluster {
  gap: var(--s-space-1);
}

/* Empty legacy slots inside the right cluster eat ~15px of horizontal
 * space (padding + grid gap). Collapse them at narrow widths so the
 * search visually butts up to the bell. */
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .shell-header-center:empty,
html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .shell-header-actions:has(.shell-header-page-actions:empty) {
  display: none;
}

html[data-guide-project-surface="notebook"]:is(
    [data-viewport^="mobile-"],
    [data-viewport^="tablet-"]
  )
  .shell-header--three-segment {
  gap: var(--s-space-1);
}

/* Keep global header (≡ menu, project switcher, view switcher) above workspace layers.
 * Raised from 250 → 1200 to clear the nav-column (z=999) and the expanded
 * rail overlay (z=1100) at narrow viewports — otherwise the hamburger menu
 * gets rendered behind the rail since it's portal'd inside this cluster. */
html[data-guide-project-surface="notebook"] .shell-top-cluster {
  position: relative;
  z-index: 1200;
}

html[data-guide-project-surface="notebook"] .main-content {
  position: relative;
  z-index: 0;
}

html[data-guide-project-surface="notebook"] .main-content > .content-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

html[data-guide-project-surface="notebook"] .main-content > .content-area > .notebook-shell,
html[data-guide-project-surface="notebook"] .main-content > .content-area > [data-surface-host] {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.notebook-shell--external-rail.notebook-shell--external-insp {
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.notebook-shell--external-rail:not(.notebook-shell--external-insp) {
  grid-template-columns: minmax(0, 1fr) var(--ns-insp-w);
  height: 100%;
  min-height: 0;
}

html[data-guide-project-surface="notebook"] .admin-shell > .admin-shell__nav-column > .sidebar {
  display: none;
}

html[data-guide-project-surface="notebook"] [data-chrome-left-panel][data-notebook-chrome-active]
  [data-project-nav-mount] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html[data-guide-project-surface="notebook"] [data-notebook-left-chrome] {
  border-right: 1px solid var(--s-color-border-default);
  background: var(--s-color-bg-panel);
}

html[data-guide-project-surface="notebook"] [data-notebook-left-chrome] .notebook-shell__rail {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  border-right: none;
}

/*
 * Golden composite footer: navigator rail may collapse to var(--shell-rail-collapsed-w), but the page-wide
 * shell-footer account band stays at expanded width (avatar + name + bell on one row).
 * --shell-sidebar-w still drives the nav column; do not squeeze .shell-footer__left to var(--shell-rail-collapsed-w).
 */
html[data-guide-project-surface="notebook"]
  .admin-shell[data-notebook-rail-collapsed="true"]
  .shell-footer__left,
html[data-guide-project-surface="notebook"]
  .admin-shell:has([data-notebook-left-chrome][data-rail-collapsed="true"])
  .shell-footer__left {
  width: var(--shell-rail-expanded-w);
  flex: 0 0 var(--shell-rail-expanded-w);
  max-width: min(var(--shell-rail-expanded-w), 42vw);
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-space-2);
}

.notebook-shell__events {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
  margin-bottom: var(--s-space-3, 12px);
}

.notebook-shell__event-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s-space-2, 8px);
  align-items: start;
  width: 100%;
  padding: var(--s-space-1, 4px) var(--s-space-2, 8px);
  border: none;
  border-radius: var(--s-radius-sm, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notebook-shell__event-row:hover {
  background: var(--s-color-bg-subtle);
}

.notebook-shell__event-row:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 1px;
}

.notebook-shell__event-when {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  line-height: 1.3;
}

.notebook-shell__event-label {
  font-size: var(--s-font-size-1);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Brief `surface-chrome-port-project` (2026-06-09): the project surface
 * declares its left rail + right drawer via the SurfaceChrome descriptor
 * (pages/project-chrome.js). When the notebook surface is active, the
 * declared `[data-surface-rail-mount]` (notebook navigator) +
 * `[data-surface-drawer-mount]` (notebook inspector) own the rail/drawer
 * regions on the SHELL side; the in-grid project leftCol/rightCol go
 * full-bleed-out of the way. The selectors below scope on the html
 * `data-guide-project-surface` dataset (set by `setNotebookSurfaceLayout-
 * Active` in surfaces/notebook/notebook-surface-layout.js) rather than
 * the legacy manual suppression classes the project page used to toggle
 * (`pw-project__grid--notebook-surface`, `pw-project__left--notebook-
 * suppressed`, `pw-project__right--notebook-suppressed` — all retired
 * by this brief in favor of the SurfaceChrome contract honoring the
 * declared slot presence). */
html[data-guide-project-surface="notebook"] .pw-project__grid {
  grid-template-columns: 0 0 minmax(0, 1fr) 0 0;
}

html[data-guide-project-surface="notebook"] .pw-project__grid .pw-resize-handle--left-center,
html[data-guide-project-surface="notebook"] .pw-project__grid .pw-resize-handle--center-right {
  display: none;
}

html[data-guide-project-surface="notebook"] .pw-project__left,
html[data-guide-project-surface="notebook"] .pw-project__right {
  display: none;
}

/* Notebook owns panel chrome — hide legacy ghost corner-tray if any panel still mounts it. */
html[data-guide-project-surface="notebook"] .pw-panel__corner-tray {
  display: none;
  pointer-events: none;
}

html[data-guide-project-surface="notebook"] .pw-context-rail {
  display: none;
}

html[data-guide-project-surface="notebook"] .pw-project__footer {
  /* keep status footer; timeline vignette still optional */
}

/* ── GH-432 — outline-group bands (in-stream collapsible sections) ────────
 *
 * Bands are post-processed onto the notebook stream by notebook-shell.js,
 * wrapping consecutive cells with the same `outlineGroup`. Class names
 * carry BOTH the surface-shell prefix and the golden-composite
 * `nb-group*` shorthand so future ports / golden-composite rules apply.
 *
 * Title is contenteditable (in-situ edit); chevron toggles collapse via
 * `data-collapsed="true"` on the band root. Persistence lives in
 * `notebook-view-state-store.js` — UI state, not a ledger event.
 *
 * Read-only mode (`data-checkpoint-readonly="true"` on shell root) silences
 * title editing (contenteditable="false" via JS) but leaves chevrons live.
 */
.notebook-shell__group-band,
.nb-group {
  display: flex;
  flex-direction: column;
  margin: var(--s-space-4) 0 var(--s-space-2);
}

.notebook-shell__group-band-head,
.nb-group__band {
  display: flex;
  align-items: baseline;
  gap: var(--s-space-2);
  padding: var(--s-space-1) var(--s-space-4) var(--s-space-2) 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
  cursor: pointer;
}

.notebook-shell__group-chev,
.nb-group__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: pointer;
  padding: var(--s-space-1);
  border-radius: var(--s-radius-sm);
  transition: transform 120ms ease;
  flex: none;
}

.notebook-shell__group-chev:hover,
.nb-group__chev:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.notebook-shell__group-chev:focus-visible,
.nb-group__chev:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 1px;
}

.notebook-shell__group-band[data-collapsed="true"] .notebook-shell__group-chev,
.notebook-shell__group-band[data-collapsed="true"] .nb-group__chev,
.nb-group[data-collapsed="true"] .nb-group__chev,
.nb-group[data-collapsed="true"] .notebook-shell__group-chev {
  transform: rotate(-90deg);
}

.notebook-shell__group-icon,
.nb-group__icon {
  display: inline-flex;
  align-items: center;
  color: var(--s-color-fg-tertiary);
  flex: none;
}

.notebook-shell__group-title,
.nb-group__title {
  margin: 0;
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  line-height: 1.3;
  color: var(--s-color-fg-primary);
  outline: none;
  cursor: text;
  padding: 1px var(--s-space-1);
  border-radius: var(--s-radius-sm);
  flex: none;
}

.notebook-shell__group-title:focus,
.nb-group__title:focus {
  background: var(--s-color-bg-subtle);
}

.notebook-shell__group-title:focus-visible,
.nb-group__title:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 1px;
}

.notebook-shell__group-sub,
.nb-group__sub {
  margin-left: auto;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}

/* GH-436 — band-head add-cell + collapse-all/expand-all (hover-revealed). */
.notebook-shell__group-actions,
.nb-group__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  margin-left: var(--s-space-1);
  opacity: 0;
  transition: opacity 100ms ease;
  flex: none;
}

.notebook-shell__group-band-head:hover .notebook-shell__group-actions,
.nb-group__band:hover .nb-group__actions,
.notebook-shell__group-band-head:focus-within .notebook-shell__group-actions,
.nb-group__band:focus-within .nb-group__actions {
  opacity: 1;
}

.notebook-shell__group-add,
.nb-group__add,
.notebook-shell__group-collapse-all,
.nb-group__collapse-all {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: pointer;
  padding: 0;
  border-radius: var(--s-radius-sm);
  transition: color 120ms ease, background 120ms ease;
}

.notebook-shell__group-add:hover,
.nb-group__add:hover,
.notebook-shell__group-collapse-all:hover,
.nb-group__collapse-all:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.notebook-shell__group-add:focus-visible,
.nb-group__add:focus-visible,
.notebook-shell__group-collapse-all:focus-visible,
.nb-group__collapse-all:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 1px;
}

.notebook-shell__group-body,
.nb-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  /* Amped 2026-06-03 per Caitlin: nested cells should have nested
   * boundaries. Previous indent (8 + 13 + 2 = 23px) was subtle; bumped
   * to 13 + 21 + 2 = 36px so nesting is visually unmistakable for both
   * single-band depth and nested-band depth (which compounds). */
  margin: var(--s-space-3) 0 0 var(--s-space-3);
  padding-left: var(--s-space-5);
  border-left: 2px solid var(--s-color-border-subtle);
}

/* Bare cells (not wrapped in a band) that still have an outlineGroup
 * pointer get per-cell depth-based indent via CSS custom property
 * `--cell-depth` set by the shell at render time. Cells without
 * outlineGroup (no depth) stay flush. Cells inside bands inherit indent
 * from the band body and don't get this rule (band-body parent provides
 * the offset). Caitlin 2026-06-03: cell boundaries should reflect nesting. */
.notebook-cell[style*="--cell-depth"] {
  margin-left: calc(var(--cell-depth, 0) * var(--s-space-5));
}

.notebook-shell__group-band[data-collapsed="true"] .notebook-shell__group-body,
.notebook-shell__group-band[data-collapsed="true"] .nb-group__body,
.nb-group[data-collapsed="true"] .notebook-shell__group-body,
.nb-group[data-collapsed="true"] .nb-group__body {
  display: none;
}

/* While viewing a read-only checkpoint, band titles read static (no edit
 * cursor) but chevrons remain interactive. JS also strips contenteditable
 * via setCheckpoint — this rule reinforces the visual cue. */
.notebook-shell[data-checkpoint-readonly="true"] .notebook-shell__group-title,
.notebook-shell[data-checkpoint-readonly="true"] .nb-group__title {
  cursor: default;
}

/* ── Cell chrome (golden composite parity) — GH-434 Phase A ───────────────
 *
 * Left margin gutter holds collapse chevron + drag grip (Phase B wires drag).
 * Kebab (⋮) flush-right replaces inline Remove. Header border-bottom dropped;
 * cell wrappers use transparent borders until hover / aria-selected.
 *
 * Click delegation lives in notebook-shell.js (stream-level) so the chevron
 * survives view↔edit rerender + checkpoint-projection setCells; margin +
 * header are preserved across rerender by replaceCellContent.
 */
.notebook-shell .notebook-cell {
  padding-left: 24px;
  border-color: transparent;
}

.notebook-shell .notebook-cell:hover {
  border-color: var(--s-color-border-subtle);
}

.notebook-shell .notebook-cell[aria-selected="true"] {
  border-color: var(--s-brand-700);
  background: var(--s-color-bg-card);
  box-shadow: none;
}

.notebook-cell {
  position: relative;
}

/* Margin gutter — Caitlin 2026-06-03 UX pass:
 * - Horizontal row (was vertical column) — saves vertical footprint so
 *   collapsed cells don't need to grow to fit affordances.
 * - Positioned OUTSIDE the cell card's left edge (negative left) — reads as
 *   "this whole cell" rather than "a control inside the cell."
 * - `flex-direction: row-reverse` so visual order is [+] [drag] [chev] | card
 *   (chev closest to card = collapse-this; drag middle = move-this; + furthest
 *   out = insert-above). JS appends chev/drag/add in that order; reverse flips
 *   it visually without touching the DOM order.
 * - Drag-grip + add hidden when cell is collapsed (only chev needed to re-expand).
 * - Drag-grip + add hover-only ALWAYS (no persistent visual noise).
 */
.notebook-cell__margin {
  position: absolute;
  left: -76px;
  top: var(--s-space-tight-3);
  /* Fixed width so the chev anchors to the right edge of the cluster
   * (closest to the cell card) regardless of which icons are visible.
   * Without this, when drag-grip + add hide on collapse, the chev was the
   * only flex item left and (with row-reverse) collapsed to the FAR LEFT
   * of the auto-sized container — making the chev jump leftward 50+ px on
   * collapse. Fixed width keeps the chev at a constant x. Caitlin 2026-06-03:
   * "chevron jumps to the left when collapsed." */
  width: 76px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--s-space-twohair);
  opacity: 0;
  transition: opacity 100ms ease;
  /* pointer-events stays AUTO so the gutter receives hover even when the cell
   * isn't being hovered. Without this, moving the mouse from inside the cell
   * toward the gutter crossed a dead zone. */
  pointer-events: auto;
}

.notebook-cell:hover .notebook-cell__margin,
.notebook-cell:focus-within .notebook-cell__margin,
.notebook-cell__margin:hover {
  opacity: 1;
}

/* Project-presets cell has internal padding (var(--s-space-3)) for its
 * card register; the gutter sits relative to the cell root, so it would
 * float above where the header actually renders. Push it down to align
 * with the header's icon-chip center. (Caitlin 2026-06-03: "these should
 * all align nicely - as if a horizontal line runs through the center of
 * all of them.") */
.notebook-cell--project-presets .notebook-cell__margin {
  top: calc(var(--s-space-3) + var(--s-space-tight-3));
}

/* Collapsed cell: drop drag + add entirely (they'd grow the cell vertically);
 * keep chev alone as the single re-expand affordance. Chev still gets the
 * hover opacity boost. */
.notebook-cell[data-collapsed="true"] .notebook-cell__drag-grip,
.notebook-cell[data-collapsed="true"] .notebook-cell__add {
  display: none;
}

.notebook-cell[data-collapsed="true"] .notebook-cell__margin {
  opacity: 0.7;
  pointer-events: auto;
}

.notebook-cell[data-collapsed="true"]:hover .notebook-cell__margin,
.notebook-cell[data-collapsed="true"]:focus-within .notebook-cell__margin {
  opacity: 1;
}

.notebook-cell__hd {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-tight-3) 0;
  margin-bottom: var(--s-space-2);
}

/* Density: prose/markdown header is icon-only (no title) — no border, no
 * extra margin, just a thin marker row. Heading header carries the section
 * title in-place — no body underneath, so no separator needed either. */
.notebook-cell__hd--prose,
.notebook-cell__hd--markdown,
.notebook-cell__hd--heading {
  margin-bottom: var(--s-space-1);
  padding-bottom: 0;
}

.notebook-cell__hd--decision,
.notebook-cell__hd--code,
.notebook-cell__hd--cas-sar {
  padding-bottom: var(--s-space-2);
}

/* Heading kind: in-place contenteditable title styled as a section heading.
 * No body h2 below (retired 2026-06-03 to drop duplicate-title redundancy). */
.notebook-cell--heading {
  padding-top: var(--s-space-2);
  padding-bottom: var(--s-space-2);
}

/* ── Project-presets head node (cell #20) — design-walk-pending #406 ─────
 *
 * Pinnable head node of every project notebook. Visually distinguished as
 * a "settings" card — soft-tinted background, accent border, dense chip
 * sections (Targets / Docking / Defaults / Alerts).
 *
 * `data-pinned="true"` on the cell wrapper flips it to a sticky position
 * at the top of stream-host so it stays visible when the user scrolls
 * down through the notebook.
 */
.notebook-cell--project-presets {
  background: var(--s-color-bg-card);
  border: 1px solid transparent;
  border-radius: var(--s-radius-md);
  padding: var(--s-space-3);
  box-shadow: none;
}

.notebook-shell .notebook-cell--project-presets:hover {
  border-color: var(--s-color-border-subtle);
}

.notebook-cell--project-presets[data-pinned="true"] {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: none;
}

/* .notebook-cell__pin retired 2026-06-03 — pin folded into kebab menu
 * (Caitlin direct: kebab + pin occupied the same space). The pin verb is
 * now a kebab menu item with label "Pin to top" / "Unpin from top". */

/* Editable cell title — placeholder appears on hover or focus when title
 * is empty, so the affordance is discoverable without permanent visual
 * noise. Caitlin 2026-06-03: "this widget has no title - and i cannot
 * seem to add one." Placeholder reads from data-placeholder; styled
 * faint + italic so it doesn't compete with actual content. */
.notebook-cell__hd-title[data-editable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--s-color-fg-tertiary);
  font-style: italic;
  font-weight: var(--s-font-weight-regular);
  opacity: 0;
  transition: opacity 100ms ease;
  pointer-events: none;
}

.notebook-cell:hover .notebook-cell__hd-title[data-editable="true"]:empty::before,
.notebook-cell__hd-title[data-editable="true"]:focus:empty::before {
  opacity: 0.7;
}

.notebook-cell__hd-title[data-editable="true"]:focus {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
  border-radius: var(--s-radius-sm);
}

/* Body sections — stacked rows of (head + chip row) */
.notebook-cell__body--project-presets {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}

.notebook-presets__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.notebook-presets__section-head {
  margin: 0;
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-tertiary);
}

.notebook-presets__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1) var(--s-space-2);
  align-items: center;
}

.notebook-presets__chip,
.notebook-presets__target-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-tight-3) var(--s-space-2);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-pill);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
}

.notebook-presets__chip-label,
.notebook-presets__target-label {
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.notebook-presets__chip-mode,
.notebook-presets__target-kind {
  font-size: var(--s-font-size-micro);
  color: var(--s-color-fg-tertiary);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* Target chip with thumbnail placeholder square */
.notebook-presets__target-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-bold);
  color: var(--s-color-fg-tertiary);
}

.notebook-presets__alerts-note {
  margin: 0;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
}

.notebook-presets__alerts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 var(--s-space-1);
  height: 18px;
  border-radius: var(--s-radius-pill);
  background: var(--s-color-status-warning);
  color: var(--s-color-fg-on-warning, white);
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-bold);
}

.notebook-presets__footer {
  margin: 0;
  padding-top: var(--s-space-2);
  border-top: 1px dashed var(--s-color-border-subtle);
  font-size: var(--s-font-size-micro);
  color: var(--s-color-fg-tertiary);
  font-style: italic;
}

.notebook-cell__hd--heading .notebook-cell__hd-title {
  cursor: text;
}

.notebook-cell__hd--heading .notebook-cell__hd-title:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
  border-radius: var(--s-radius-sm);
}

.notebook-cell__icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  color: var(--s-color-fg-tertiary);
}

.notebook-cell__hd-title {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-secondary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Heading cells: the header title IS the section heading — bigger,
 * stronger, primary text color. Body h2 stays as click-to-edit target. */
.notebook-cell__hd--heading .notebook-cell__hd-title {
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-bold);
  color: var(--s-color-fg-primary);
}

.notebook-cell__hd-spacer {
  flex: 1;
}

/* Collapsed strip — project-presets only (GH-434) */
.notebook-cell__hd-condensed {
  display: none;
  gap: var(--s-space-1);
  align-items: center;
  flex: none;
}

.notebook-cell--project-presets[data-collapsed="true"] .notebook-cell__hd-condensed {
  display: inline-flex;
}

.notebook-cell__hd-condensed-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--s-radius-round, 50%);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-bold);
  color: var(--s-color-fg-secondary);
}

.notebook-cell__hd-condensed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 var(--s-space-1);
  height: 18px;
  border-radius: var(--s-radius-pill);
  background: var(--s-color-status-warning);
  color: var(--s-color-fg-on-warning, white);
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-bold);
}

/* Kebab menu — flush right, hover-revealed (GH-434) */
.notebook-cell__kebab {
  position: absolute;
  top: var(--s-space-tight-3);
  right: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 120ms ease;
}

.notebook-cell:hover .notebook-cell__kebab,
.notebook-cell:focus-within .notebook-cell__kebab {
  opacity: 1;
}

.notebook-cell__kebab-trigger {
  color: var(--s-color-fg-tertiary);
}

.notebook-cell__kebab-trigger:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.notebook-shell__menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.notebook-shell__menu-item:disabled:hover {
  background: transparent;
}

.notebook-cell__collapse,
.notebook-cell__drag-grip,
.notebook-cell__add {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: pointer;
  padding: 0;
  border-radius: var(--s-radius-sm);
  transition: transform 120ms ease, color 120ms ease, background 120ms ease;
}

.notebook-cell__drag-grip {
  cursor: grab;
}

.notebook-cell__drag-grip:active {
  cursor: grabbing;
}

.notebook-cell__collapse:hover,
.notebook-cell__drag-grip:hover,
.notebook-cell__add:hover,
.nb-cellplus:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.notebook-cell__collapse:focus-visible,
.notebook-cell__drag-grip:focus-visible,
.notebook-cell__add:focus-visible,
.nb-cellplus:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 1px;
}

/* GH-435 — nest drag lane indicator (Notion-style vertical guide). */
.notebook-shell__stream-host {
  position: relative;
}

.notebook-shell__nest-lane {
  position: absolute;
  left: var(--nest-lane-offset, 32px);
  width: 2px;
  border-radius: 1px;
  background: var(--s-color-accent-default);
  opacity: 0.85;
  pointer-events: none;
  z-index: 4;
}

.notebook-shell__nest-lane[data-nest-direction="outdent"] {
  background: var(--s-color-fg-secondary);
}

.notebook-shell[data-nest-drag-active="true"] .notebook-cell__drag-grip {
  color: var(--s-color-accent-default);
}

.notebook-shell[data-nest-drag-active="true"]
  .notebook-shell__outline-row[aria-current="true"] {
  outline: 1px dashed var(--s-color-accent-default);
  outline-offset: 2px;
}

.notebook-cell[data-collapsed="true"] .notebook-cell__collapse {
  transform: rotate(-90deg);
}

.notebook-cell[data-collapsed="true"] .notebook-cell__body,
.notebook-cell[data-collapsed="true"] .notebook-cell__alts,
.notebook-cell[data-collapsed="true"] .notebook-cell__editor {
  display: none;
}

/* Collapsed cells shrink to the header strip — gutter chevron stays visible. */
.notebook-cell[data-collapsed="true"] .notebook-cell__hd {
  margin-bottom: 0;
  border-bottom: 0;
}

/* Checkpoint read-only: gutter collapse stays interactive; add-cell disabled. */
.notebook-shell[data-checkpoint-readonly="true"]
  .notebook-shell__stream-host
  [data-notebook-cell]
  .notebook-cell__margin,
.notebook-shell[data-checkpoint-readonly="true"]
  .notebook-shell__stream-host
  [data-notebook-cell]
  .notebook-cell__kebab {
  pointer-events: auto;
}

.notebook-shell[data-checkpoint-readonly="true"]
  .notebook-shell__stream-host
  [data-notebook-cell]
  .notebook-cell__add,
.notebook-shell[data-checkpoint-readonly="true"]
  .notebook-shell__group-add,
.notebook-shell[data-checkpoint-readonly="true"]
  .nb-group__add {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;
}

/* ── Vertical drag-reorder (measured affordance) ────────────────────────
 * Drop-indicator line shown while the user holds ⋮⋮ and drags vertically.
 * Mounted into .notebook-shell__stream-host (position:relative); top is
 * driven by JS in stream-affordance-overlay.js. */

.notebook-stream-reorder-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--s-color-accent-default);
  pointer-events: none;
  z-index: 6;
  transition: top 80ms ease;
  border-radius: 1px;
}

.notebook-cell--reorder-dragging {
  opacity: 0.4;
  transition: opacity 80ms ease;
}

/* ── Cell selection (multi-select) ───────────────────────────────────────
 * Subtle brand-tinted overlay when a cell or band is in the selection set.
 * Two-tier strategy:
 *   • Band head — full tint at brand-alpha-8 (lower than per-cell so nested
 *     bands don't stack visually into a chunky-stripe pattern).
 *   • Cell — full tint at brand-alpha-8 too; rectangles align flush
 *     without per-row border-radius, so a continuous selection reads as
 *     ONE column of tint instead of separate pills.
 * The inset shadow trick paints on top of variant backgrounds so any
 * narrative-variant cell/band bg is respected underneath. */

.notebook-shell .notebook-cell[data-cell-selected="true"],
body[data-notebook-stream-variant] .notebook-shell .notebook-cell[data-cell-selected="true"] {
  box-shadow: inset 0 0 0 1000px var(--s-brand-alpha-5);
}

/* When a band's cells are fully selected, tint the WHOLE container
 * (head + body) instead of just the head row. The container is the row
 * that holds the band title, the "X cells" sub-label, AND the cells
 * underneath — so the tint reaches edge-to-edge horizontally and top-to-
 * bottom across the section. Per-cell tints inside are suppressed
 * (rule below) so the section reads as ONE calm tinted block. */
.notebook-shell .nb-group[data-band-selected-container="true"],
.notebook-shell .notebook-shell__group-band[data-band-selected-container="true"],
body[data-notebook-stream-variant] .notebook-shell .nb-group[data-band-selected-container="true"],
body[data-notebook-stream-variant] .notebook-shell .notebook-shell__group-band[data-band-selected-container="true"] {
  box-shadow: inset 0 0 0 1000px var(--s-brand-alpha-5);
}

.notebook-shell .nb-group[data-band-selected-container="true"]
  .notebook-cell[data-cell-selected="true"],
body[data-notebook-stream-variant] .notebook-shell .nb-group[data-band-selected-container="true"]
  .notebook-cell[data-cell-selected="true"] {
  box-shadow: none;
}

/* ────────────────────────────────────────────────────────────────────────
 * Leaf cells — Brief A "simple five" (2026-06-09)
 * Image / Attachment · Callout / Admonition · Checklist / Task
 *
 * Composition rule 2 — leaves are honest: every kind here has an
 * explicit empty + error state, never a silent blank box. Tokens only;
 * no hardcoded color/spacing.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Image / Attachment ──────────────────────────────────────────────── */

.notebook-cell__body--image {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.notebook-cell__image-empty,
.notebook-cell__image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-2);
  padding: var(--s-space-4) var(--s-space-3);
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-tertiary);
  text-align: center;
  min-height: 96px;
}

.notebook-cell__body--image.notebook-cell__body--image-dragover
  .notebook-cell__image-empty {
  border-color: var(--s-color-accent-active);
  background: var(--s-color-bg-card);
}

.notebook-cell__image-empty-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--s-color-fg-tertiary);
}

.notebook-cell__image-empty-note,
.notebook-cell__image-error-title,
.notebook-cell__image-error-detail {
  margin: 0;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
}

.notebook-cell__image-error {
  border-style: solid;
  border-color: var(--s-color-error-border);
  background: var(--s-color-error-bg);
  color: var(--s-color-error-fg);
}

.notebook-cell__image-error-title {
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-error-fg);
}

.notebook-cell__image-error-detail {
  color: var(--s-color-error-fg);
  font-size: var(--s-font-size-micro);
}

.notebook-cell__image-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-0);
  cursor: pointer;
}

.notebook-cell__image-pick:hover {
  background: var(--s-color-bg-app);
  border-color: var(--s-color-fg-tertiary);
}

.notebook-cell__image-pick:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__image-input {
  display: none;
}

.notebook-cell__image-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.notebook-cell__image-thumb {
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-subtle);
  cursor: zoom-in;
  overflow: hidden;
  max-width: 100%;
}

.notebook-cell__image-thumb:hover {
  border-color: var(--s-color-fg-tertiary);
}

.notebook-cell__image-thumb:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__image-img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--s-color-bg-subtle);
}

.notebook-cell__image-caption {
  margin: 0;
  font-size: var(--s-font-size-micro);
  color: var(--s-color-fg-tertiary);
}

/* Lightbox — full-viewport overlay with dim backdrop. Modal pattern;
 * ESC + click-outside dismisses. No box-shadow (ds-audit V6 guard) —
 * the backdrop tint provides depth. */
.notebook-cell__image-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4);
  background: var(--s-color-overlay-scrim, var(--s-color-bg-app));
  z-index: 1000;
}

.notebook-cell__image-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-2);
}

.notebook-cell__image-lightbox-img {
  max-width: min(96vw, 1200px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-card);
}

.notebook-cell__image-lightbox-close {
  padding: var(--s-space-1) var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
  cursor: pointer;
  font-size: var(--s-font-size-0);
}

.notebook-cell__image-lightbox-close:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

/* ── Callout / Admonition ────────────────────────────────────────────── */

.notebook-cell__body--callout {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  border-left: 3px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.notebook-cell__body--callout-info {
  border-left-color: var(--s-color-info-border);
  background: var(--s-color-info-bg);
  color: var(--s-color-info-fg);
}

.notebook-cell__body--callout-warn {
  border-left-color: var(--s-color-warning-border);
  background: var(--s-color-warning-bg);
  color: var(--s-color-warning-fg);
}

.notebook-cell__body--callout-caution {
  border-left-color: var(--s-color-error-border);
  background: var(--s-color-error-bg);
  color: var(--s-color-error-fg);
}

.notebook-cell__callout-head {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
}

.notebook-cell__callout-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.notebook-cell__callout-variants {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  flex-wrap: wrap;
}

.notebook-cell__callout-variant-chip {
  padding: var(--s-space-tight-3) var(--s-space-1);
  border: 1px solid transparent;
  border-radius: var(--s-radius-pill);
  background: transparent;
  color: currentColor;
  font-size: var(--s-font-size-micro);
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.7;
}

.notebook-cell__callout-variant-chip:hover {
  opacity: 1;
}

.notebook-cell__callout-variant-chip--chosen {
  border-color: currentColor;
  opacity: 1;
}

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

.notebook-cell__callout-body {
  min-height: 1.5em;
  font-size: var(--s-font-size-0);
  line-height: var(--s-font-line-height-snug, 1.5);
}

.notebook-cell__callout-body:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
  border-radius: var(--s-radius-sm);
}

.notebook-cell__callout-empty {
  margin: 0;
  font-style: italic;
  opacity: 0.6;
}

/* ── Checklist / Task ────────────────────────────────────────────────── */

.notebook-cell__body--checklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.notebook-cell__checklist-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-space-2);
  padding: var(--s-space-3);
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-subtle);
}

.notebook-cell__checklist-empty-note {
  margin: 0;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
}

.notebook-cell__checklist-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.notebook-cell__checklist-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-space-2);
  padding: var(--s-space-tight-3) 0;
  border-bottom: 1px solid transparent;
}

.notebook-cell__checklist-item:hover {
  border-bottom-color: var(--s-color-border-subtle);
}

.notebook-cell__checklist-checkbox {
  margin: 0;
  margin-top: var(--s-space-tight-3);
  width: 16px;
  height: 16px;
  accent-color: var(--s-color-accent-active);
  cursor: pointer;
}

.notebook-cell__checklist-checkbox:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__checklist-text {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  line-height: var(--s-font-line-height-snug, 1.5);
  min-width: 0;
  word-break: break-word;
  cursor: text;
}

.notebook-cell__checklist-item[data-item-done="true"] .notebook-cell__checklist-text {
  color: var(--s-color-fg-tertiary);
  text-decoration: line-through;
}

.notebook-cell__checklist-text:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
  border-radius: var(--s-radius-sm);
}

.notebook-cell__checklist-text[data-editable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--s-color-fg-tertiary);
  font-style: italic;
}

.notebook-cell__checklist-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: var(--s-space-tight-3);
  border: 0;
  border-radius: var(--s-radius-sm);
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms ease;
}

.notebook-cell__checklist-item:hover .notebook-cell__checklist-del,
.notebook-cell__checklist-del:focus-visible {
  opacity: 1;
}

.notebook-cell__checklist-del:hover {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.notebook-cell__checklist-del:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__checklist-add {
  align-self: flex-start;
  padding: var(--s-space-tight-3) var(--s-space-2);
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: transparent;
  color: var(--s-color-fg-tertiary);
  font-size: var(--s-font-size-0);
  cursor: pointer;
}

.notebook-cell__checklist-add:hover {
  border-style: solid;
  color: var(--s-color-fg-primary);
}

.notebook-cell__checklist-add:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__checklist-add--primary {
  border-style: solid;
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
}

/* ────────────────────────────────────────────────────────────────────────
 * Leaf cells — Brief B "citation + equation" (2026-06-09)
 * Citation · Equation (display-only LaTeX via KaTeX)
 *
 * Both are non-reactive leaves with explicit failure states:
 *   - Citation: an honest "unresolved" state — raw reference + marker,
 *     never fabricates metadata. Three-tier resolver provenance surfaces
 *     as a `data-citation-tier` badge ("via internal" / "via cache" /
 *     "via live" / "unresolved").
 *   - Equation: invalid LaTeX renders an inline error block with the
 *     offending source quoted, never a silent blank.
 *
 * Tokens only; no hardcoded color/spacing. KaTeX's own typeset DOM gets
 * inherited tokens (color / font-family) from the parent — we don't
 * override KaTeX's internal classes here.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Equation / LaTeX (display-only) ─────────────────────────────────── */

.notebook-cell__body--equation {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-2);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-subtle);
  cursor: text;
  min-height: 56px;
}

.notebook-cell__body--equation:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__body--equation[data-equation-state="empty"] {
  border: 1px dashed var(--s-color-border-subtle);
  background: transparent;
  color: var(--s-color-fg-tertiary);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.notebook-cell__body--equation[data-equation-state="error"] {
  background: var(--s-color-error-bg);
  color: var(--s-color-error-fg);
}

.notebook-cell__equation-empty-note {
  margin: 0;
  font-size: var(--s-font-size-0);
  font-style: italic;
  color: var(--s-color-fg-tertiary);
}

.notebook-cell__equation-stage {
  display: block;
  width: 100%;
  font-size: var(--s-font-size-2, var(--s-font-size-1));
  color: var(--s-color-fg-primary);
  overflow-x: auto;
  text-align: center;
}

.notebook-cell__equation-error {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  border: 1px solid var(--s-color-error-border);
  border-radius: var(--s-radius-sm);
  padding: var(--s-space-2);
  background: var(--s-color-error-bg);
  color: var(--s-color-error-fg);
  text-align: left;
}

.notebook-cell__equation-error-title {
  margin: 0;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-error-fg);
}

.notebook-cell__equation-error-detail {
  margin: 0;
  font-size: var(--s-font-size-micro);
  color: var(--s-color-error-fg);
}

.notebook-cell__equation-error-source {
  margin: 0;
  padding: var(--s-space-1) var(--s-space-2);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-family-mono, monospace);
  font-size: var(--s-font-size-micro);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Citation ────────────────────────────────────────────────────────── */

.notebook-cell__body--citation {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.notebook-cell__citation-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-3);
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-tertiary);
  text-align: center;
}

.notebook-cell__citation-empty-note {
  margin: 0;
  font-size: var(--s-font-size-0);
  font-style: italic;
}

.notebook-cell__citation-loading {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
  font-style: italic;
}

.notebook-cell__citation-head {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-wrap: wrap;
}

.notebook-cell__citation-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  padding: var(--s-space-tight-3) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-pill);
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-0);
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-cell__citation-chip:hover {
  border-color: var(--s-color-accent-active);
}

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

.notebook-cell__body--citation[data-citation-state="unresolved"] .notebook-cell__citation-chip {
  border-style: dashed;
  border-color: var(--s-color-warning-border);
  background: var(--s-color-warning-bg);
  color: var(--s-color-warning-fg);
  cursor: default;
}

.notebook-cell__citation-tier {
  display: inline-flex;
  align-items: center;
  padding: var(--s-space-tight-3) var(--s-space-1);
  border-radius: var(--s-radius-pill);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-tertiary);
  font-size: var(--s-font-size-micro);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.notebook-cell__citation-tier[data-citation-tier="internal"] {
  background: var(--s-color-info-bg);
  color: var(--s-color-info-fg);
}

.notebook-cell__citation-tier[data-citation-tier="cache"] {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-secondary);
}

.notebook-cell__citation-tier[data-citation-tier="live"] {
  background: var(--s-color-success-bg, var(--s-color-bg-subtle));
  color: var(--s-color-success-fg, var(--s-color-fg-secondary));
}

.notebook-cell__citation-tier[data-citation-tier="unresolved"] {
  background: var(--s-color-warning-bg);
  color: var(--s-color-warning-fg);
}

.notebook-cell__citation-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--s-radius-sm);
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: pointer;
}

.notebook-cell__citation-edit:hover {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.notebook-cell__citation-edit:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 2px;
}

.notebook-cell__citation-drawer {
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-bg-card);
}

.notebook-cell__citation-card {
  font-size: var(--s-font-size-0);
  line-height: var(--s-font-line-height-snug, 1.5);
  color: var(--s-color-fg-primary);
}

.notebook-cell__citation-unresolved {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  color: var(--s-color-warning-fg);
}

.notebook-cell__citation-unresolved-title {
  margin: 0;
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
}

.notebook-cell__citation-unresolved-detail {
  margin: 0;
  font-size: var(--s-font-size-micro);
  color: var(--s-color-warning-fg);
}

.notebook-cell__citation-unresolved-raw {
  margin: 0;
  padding: var(--s-space-1) var(--s-space-2);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-family-mono, monospace);
  font-size: var(--s-font-size-micro);
  white-space: pre-wrap;
  word-break: break-word;
}