/* ── Base ─────────────────────────────────────────────────────────────────────
   The reset, the document, and the chrome that belongs to neither product: the
   auth screen, the sidebar, the layout frame, the spinner, the context menu,
   the access panel and the toasts. Both apps render inside this.

   If a rule here is only ever matched by one product's markup, it is in the
   wrong file — move it rather than duplicating it.                          */

/* graph view inherits light theme — no dark override */

/* The app's baseline reset lives in the FIRST layer (declared in index.html
   ahead of the kit) so it beats only UA defaults — every kit rule and every
   unlayered app rule outranks it. Unlayered, this universal selector was
   silently zeroing the shell's own paddings everywhere (the nav tiles' inset
   was only where it finally showed). Refractions carries the same fix. */
@layer app-reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
}
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-sans);
  background: var(--dark);
  color: var(--ink2);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* The boot splash rides the kit's Splash.css verbatim; the only app-side word
   is pace. 450ms (the kit default) is an app-switch ceremony — a refresh
   should read as a blink, just long enough to hide the assembly beneath it. */
#boot-splash { --splash-fade: 200ms; }

/* ── Auth ────────────────────────────────────────────────────────────────── */

#auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark);
  background-image: radial-gradient(ellipse 70% 60% at 55% 35%, rgba(90,107,72,0.10) 0%, transparent 70%),
                    radial-gradient(ellipse 50% 45% at 25% 80%, rgba(176,78,40,0.06) 0%, transparent 60%),
                    radial-gradient(ellipse 40% 30% at 80% 75%, rgba(196,99,106,0.05) 0%, transparent 55%);
  z-index: 1000;
}

.auth-card {
  width: 420px;
  text-align: center;
  padding: 60px 52px 52px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--dark2);
  box-shadow: var(--shadow-tile);
}

.auth-mark { margin-bottom: 28px; display: flex; justify-content: center; }

.auth-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 14px;
}

.auth-title {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 300;
  font-variation-settings: 'opsz' 48, 'SOFT' 0;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.auth-sub {
  font-size: 14px;
  color: var(--ink3);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 290px;
  margin-left: auto;
  margin-right: auto;
}

.auth-msg {
  font-size: 13px;
  color: var(--terra);
  line-height: 1.5;
}
.auth-msg:not(:empty) { margin-bottom: 14px; }

.auth-btn {
  display: block;
  padding: 14px 24px;
  background: var(--moss);
  color: var(--ink-inv);
  text-decoration: none;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s, box-shadow 0.2s;
  margin-bottom: 22px;
  box-shadow: 0 3px 12px rgba(90,107,72,0.35);
}
.auth-btn:hover { background: var(--moss-mid); box-shadow: 0 4px 16px rgba(90,107,72,0.4); }

.auth-note {
  font-size: 12px;
  color: var(--ink4);
  line-height: 1.6;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

/* #sidebar IS the kit's .ofself-nav-col now (class in index.html) — width,
   column layout, panel-surface ground, seam, and the collapse slide are all
   the kit's (GridNav.css). Only the HOST remainders stay: clipping (the
   slide needs it) and this app's stacking seat. */
#sidebar {
  overflow: hidden;
  z-index: 100;
}

/* COLLAPSED = gone, not narrowed. The old collapsed state kept a 48px stub of
   icons; this slides the column fully out and gives its space to the stage.
   Keyed off <html> so the pre-paint script in index.html can set it before
   #app-shell exists — on #app-shell it could only be applied after first paint,
   which is a visible snap on every refresh.
   (The .sidebar-title / .sidebar-user / .sidebar-header / .sidebar-brand /
   .sidebar-toggle collapse rules that stood here went with the elements
   themselves, retired 2026-08-16 with the brand header.) */
/* (the app's own collapse rule retired — html.ofself-nav-collapsed collapses
   .ofself-nav-col at the kit level, same slide as every app) */

/* ── The nav drawer: KIT-OWNED (shell 0.153.0, the kit's one collapse
   affordance): the grip-and-spine dress and the html.ofself-nav-collapsed
   law live in the shell's GridNav.css; the machinery in
   /shell/nav-drawer.js. Only the anchor context stays app-side. */
#app-shell { position: relative; }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 14px 14px;
  border-bottom: 1px solid var(--border-lt);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
}

.sidebar-mark-icon { flex-shrink: 0; }

.sidebar-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink2);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.sidebar-toggle {
  background: none; border: none;
  color: var(--ink4); cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  display: flex; align-items: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.sidebar-toggle:hover { color: var(--ink2); background: rgba(44,32,25,0.07); }
.sidebar-toggle svg { transition: transform 0.22s ease; }

/* THE PAGE COLUMN WEARS THE KIT (shell GridNav — the bespoke .sidebar-link
   dress retired 2026-08-16; the class survives only as app.js's wiring
   hook). Below: the SEAT glue and the app's active/hover mapping onto the
   kit's own [data-active] voice — everything else is the kit's GridNav.css. */
/* (the seat glue retired — .ofself-nav-col .grid-nav fills, the vertical bar
   closes its own top edge, all kit rules; .sidebar-nav survives only as
   app.js's wiring hook) */
/* The mono label register and the moss active voice were UPROOTED to the kit
   (shell 0.128.0, GridNav.css `.grid-nav--vertical` rules) — this app's
   overrides retired with it; the tiles now wear the kit organically. */

.sidebar-icon { flex-shrink: 0; opacity: 0.75; }
.sidebar-link[data-active] .sidebar-icon { opacity: 1; }
.sidebar-link:hover .sidebar-icon { opacity: 0.9; }

.sidebar-link-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.sidebar-link-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 400;
}

.sidebar-link-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--ink4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-footer {
  padding: 10px 8px 14px;
  border-top: 1px solid var(--border-lt);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* (.sidebar-status-dot retired 2026-08-16 — the dot moved onto the dock's
   you-corner avatar; see .nav-status-dot below. It was also being wiped at
   runtime: updateStatusDot sets className = 'nav-status-dot', so the moment a
   status arrived the element lost every .sidebar-status-dot rule — including
   the `margin: 4px auto` that was centring it — and dropped to the foot of the
   column. Two class names for one element is what made that invisible.) */

/* Defined here rather than beside a caller in a product stylesheet. @keyframes
   are global, so a misplaced one works perfectly right up until the products
   ship separately — at which point the name resolves to nothing and the dot
   simply stops animating, with no error anywhere. This file is the one both
   apps load, so it is where a shared keyframe belongs. */
@keyframes pulse { 0%,100%{opacity:0.3} 50%{opacity:0.8} }

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: none; border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink4);
  transition: background 0.15s, color 0.15s;
}
.sidebar-user:hover { background: rgba(44,32,25,0.06); color: var(--ink3); }

.sidebar-user-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

#app-shell { display: flex; flex-direction: row; height: 100%; }

#main-area {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  /* THE SHEET, not the void (owner report 2026-08-23, "why the drift?"):
     the shell paints sheets on .block elements — this hand-rolled pane
     never was one, so it showed the page ground while the nav column
     beside it wore the tinted --panel-surface. One token, same as every
     block in the fleet. */
  background: var(--panel-surface, var(--ofself-surface, #f5f5f5));
}

#view-container { height: 100%; }

/* ── Chat panel ──────────────────────────────────────────────────────────── */

#chat-panel {
  width: var(--chat-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--dark2);
  border-left: 1px solid var(--border);
  overflow: hidden;
}

.chat-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-header-left { display: flex; flex-direction: column; gap: 2px; }

.chat-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
}

.chat-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss-lt);
  opacity: 0.7;
}

.chat-close {
  background: none; border: none;
  color: var(--ink4);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  line-height: 1;
}
.chat-close:hover { color: var(--ink2); }

.chat-create-block {
  background: rgba(90,107,72,0.10);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: pre-wrap;
  color: var(--ink2);
}

.chat-create-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--moss);
  color: var(--ink-inv);
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-create-btn:hover { background: var(--moss-mid); }
.chat-create-btn:disabled { opacity: 0.5; cursor: default; }

#chat-input {
  flex: 1;
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  resize: none;
  outline: none;
  line-height: 1.5;
  transition: border-color 0.15s;
}
#chat-input::placeholder { color: var(--ink4); }
#chat-input:focus { border-color: rgba(90,107,72,0.45); }

#chat-send-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--moss);
  border: none;
  border-radius: 8px;
  color: var(--ink-inv);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
#chat-send-btn:hover { background: var(--moss-mid); }
#chat-send-btn:disabled { opacity: 0.4; cursor: default; }

.chat-hint {
  padding: 8px 14px 12px;
  text-align: center;
}
.chat-hint a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--terra-lt);
  text-decoration: none;
}
.chat-hint a:hover { color: var(--terra-mid); }

.story-section-label.state { color: var(--moss-lt); opacity: 0.8; }
.story-node-schema.belief { color: var(--moss-lt); }
.story-node-schema.value  { color: var(--moss-mid); }
.story-node-schema.goal   { color: var(--terra-lt); }
.story-node-schema.self   { color: var(--ink3); }
.story-node-schema.percept{ color: var(--terra-mid); }
.story-node-schema.act    { color: var(--terra-lt); }
.story-node-schema.learn  { color: var(--moss-lt); }

.story-node-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}

.story-node-body {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.7;
}

.story-node-meta {
  display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap;
}

.story-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 4px;
}
.story-tag.moss { background: var(--moss-pale); color: var(--moss-lt); }
.story-tag.terra { background: var(--terra-pale); color: var(--terra-lt); }
.story-tag.muted { background: rgba(44,32,25,0.05); color: var(--ink4); }

.story-empty {
  padding: 40px 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink4);
}

#graph-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#graph-svg { width: 100%; height: 100%; }

#graph-tooltip {
  position: absolute;
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(44,32,25,0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  white-space: nowrap;
  z-index: 20;
}

#graph-side-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--dark2);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 24px 22px 48px;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */

.loading {
  display: flex; align-items: center; justify-content: center;
  height: 200px;
}

.spinner {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border);
  border-top-color: var(--moss-lt);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Context menu ────────────────────────────────────────────────────────── */

.context-menu {
  position: fixed;
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 0;
  z-index: 999;
  min-width: 160px;
  box-shadow: var(--shadow-tile);
  overflow: hidden;
}
.context-menu button {
  display: block; width: 100%;
  padding: 7px 14px;
  background: none; border: none;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink2);
  cursor: pointer;
}
.context-menu button:hover { background: var(--moss-pale); }
.context-menu button.danger { color: var(--terra-lt); }
.context-menu button.danger:hover { background: var(--terra-pale); }
.context-menu .divider { height: 1px; background: var(--border); margin: 3px 0; }

/* ── Nav status dot ──────────────────────────────────────────────────────── */

/* THE SEAT'S BOX IS THE KIT'S (.ofself-eco-seat-host, 0.143.0) — the eight
   lines that stood here are deleted. The ONE thing left to say is local: the
   kit seats its host at z-index 60, which assumes nothing in the app outranks
   it, and THIS app's nav column declares 100. With the dock retired that
   column moved to x:0 — straight under the seat — so the disc was painting
   behind it and the top-left corner looked simply empty. Raised over the
   column and over the corner clusters (200), still far under the console's own
   950 so the surface it raises still covers it. */
#eco-seat-anchor { z-index: 210; }

/* Seated on the console's disc, top-right, with a ring in the page's own ground
   so it reads as a badge rather than a speck floating over the initials. The
   seat is a flat wash with no border by the kit's own law (0.141.0), so the
   ring here is the page behind it, not an edge drawn on the disc. */
#eco-seat-anchor .ofself-eco-seat { overflow: visible; }
#eco-seat-anchor .nav-status-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  box-shadow: 0 0 0 2px var(--dark);
}

.nav-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--moss-mid);
  flex-shrink: 0;
  padding: 0;
  pointer-events: none;   /* an indicator; the avatar underneath stays clickable */
  transition: background 0.3s;
}
.nav-status-dot.green   { background: var(--moss-lt); }
.nav-status-dot.amber   { background: #E8A04A; }
.nav-status-dot.pulsing {
  background: #E8A04A;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100%{opacity:0.4; transform:scale(0.9)} 50%{opacity:1; transform:scale(1.2)} }

/* ── Surface view ─────────────────────────────────────────────────────────── */

.surface-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.surface-header {
  padding: 22px 28px 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-shrink: 0;
}
.surface-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.surface-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--ink2);
  letter-spacing: -0.01em;
}
.surface-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink4);
  letter-spacing: 0.08em;
}
.surface-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.surface-count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(232,160,74,0.2);
  color: #E8A04A;
}
.surface-process-btn {
  background: var(--moss);
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-inv);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(90,107,72,0.3);
}
.surface-process-btn:hover { background: var(--moss-mid); box-shadow: 0 3px 12px rgba(90,107,72,0.35); }
.surface-process-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
#surface-progress-msg {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink4);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Clean state */
.surface-clean {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 48px;
  text-align: center;
}
.surface-clean-mark {
  font-size: 30px;
  color: var(--moss-lt);
  opacity: 0.55;
  line-height: 1;
}
.surface-clean-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink3);
}
.surface-clean-sub {
  font-size: 14px;
  color: var(--ink4);
  max-width: 400px;
  line-height: 1.7;
}

/* Columns */
.surface-columns {
  flex: 1;
  display: flex;
  overflow: hidden;
  margin-top: 0;
  padding: 12px 16px 16px;
  gap: 12px;
}
.surface-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--dark2);
  box-shadow: var(--shadow-card);
  min-width: 180px;
}

/* Action buttons */
.surface-action-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 11px;
  color: var(--ink3);
  cursor: pointer;
  transition: all 0.15s;
}
.surface-action-btn:hover { color: var(--ink); border-color: var(--ink3); }
.surface-action-btn.resolve {
  border-color: rgba(232,160,74,0.4);
  color: #E8A04A;
}
.surface-action-btn.resolve:hover { background: rgba(232,160,74,0.1); }
.surface-action-btn.accept {
  border-color: rgba(90,107,72,0.35);
  color: var(--moss);
}
.surface-action-btn.accept:hover { background: var(--moss-pale); }
.surface-action-btn.muted { color: var(--ink4); }

/* ── Access panel ─────────────────────────────────────────────────────────── */

.access-panel-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(44,32,25,0.22);
  z-index: 900;
}
.access-panel {
  position: fixed; top: 0; right: -340px; bottom: 0;
  width: 300px;
  background: var(--dark2);
  border-left: 1px solid var(--border);
  z-index: 901;
  display: flex; flex-direction: column;
  transition: right 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -6px 0 32px rgba(44,32,25,0.12);
}
.access-panel.open { right: 0; }
.access-panel.open + .access-panel-backdrop { display: block; }

/* Header */
.ap-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-lt);
  flex-shrink: 0;
}
.ap-title {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink3);
}
.ap-close {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--ink4); padding: 2px 4px; line-height: 1;
}
.ap-close:hover { color: var(--ink2); }

/* Scrollable body */
.ap-body {
  flex: 1; overflow-y: auto;
  padding: 18px 18px 0;
  display: flex; flex-direction: column; gap: 16px;
}

/* User block */
.ap-user { padding-bottom: 2px; }
.ap-user-name {
  font-family: var(--font-serif); font-size: 18px; font-weight: 300;
  color: var(--ink); line-height: 1.2;
}
.ap-user-id {
  font-family: var(--font-mono); font-size: 9px; color: var(--ink4);
  margin-top: 3px; word-break: break-all;
}

/* Status pill */
.ap-status {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 7px;
  font-family: var(--font-sans); font-size: 11px;
}
.ap-status-active { background: rgba(90,107,72,0.12); color: var(--moss); }
.ap-status-none   { background: var(--terra-pale); color: var(--terra-mid); }
.ap-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ap-status-active .ap-status-dot { background: var(--moss); }
.ap-status-none   .ap-status-dot { background: var(--terra-mid); }
.ap-expiry { margin-left: auto; font-family: var(--font-mono); font-size: 9px; opacity: 0.72; }

/* Tag / node scope summary pills */
.ap-tag-node-scope { display: flex; flex-wrap: wrap; gap: 5px; }
.ap-scope-pill {
  font-family: var(--font-mono); font-size: 9px;
  background: var(--dark3); color: var(--ink3);
  padding: 3px 8px; border-radius: 5px;
}

/* Resource section (NODES / TAGS / RELATIONSHIPS) */
.ap-resource { display: flex; flex-direction: column; }
.ap-resource-hdr {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink4);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border-lt);
  margin-bottom: 2px;
}

/* Verb rows */
.ap-vrow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-lt);
  font-family: var(--font-sans); font-size: 13px;
}
.ap-vrow:last-of-type { border-bottom: none; }
.ap-vcheck {
  font-family: var(--font-mono); font-size: 11px;
  width: 14px; flex-shrink: 0; text-align: center;
}
.ap-granted .ap-vcheck { color: var(--moss); }
.ap-denied  .ap-vcheck { color: var(--ink4); }
.ap-vlabel  { flex: 1; }
.ap-granted .ap-vlabel { color: var(--ink2); }
.ap-denied  .ap-vlabel { color: var(--ink4); text-decoration: line-through; text-decoration-color: var(--border); }

/* Schema scope sub-row (under Read nodes) */
.ap-scope-sub {
  padding: 0 0 8px 24px;
}
.ap-scope-count {
  font-family: var(--font-mono); font-size: 9px; color: var(--ink4);
  display: block; margin-bottom: 6px;
}
.ap-schema-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-schema-chip {
  font-family: var(--font-mono); font-size: 9px;
  background: var(--moss-pale); color: var(--moss);
  padding: 2px 7px; border-radius: 4px;
}

/* No EP state */
.ap-empty {
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--font-serif); font-size: 14px; color: var(--ink3); line-height: 1.6;
}
.ap-reconnect-btn {
  display: inline-block; padding: 9px 16px;
  background: var(--moss); color: var(--ink-inv);
  border-radius: 8px; font-family: var(--font-sans); font-size: 12px;
  text-decoration: none; text-align: center;
}
.ap-reconnect-btn:hover { background: var(--moss-mid); }

/* Footer */
.ap-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--border-lt);
  flex-shrink: 0;
  margin-top: 4px;
}
.ap-disconnect-btn {
  background: none; border: 1px solid var(--border);
  color: var(--terra-mid); cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 6px; width: 100%;
}
.ap-disconnect-btn:hover { background: var(--terra-pale); border-color: var(--terra-lt); }

/* ── Toast notifications ─────────────────────────────────────────────────────── */
#toast-rack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-visible {
  opacity: 1;
  transform: translateY(0);
}
.toast-success {
  background: var(--moss);
  color: var(--ink-inv, #fff);
}
.toast-error {
  background: var(--terra);
  color: #fff;
}
.auto-detail.hidden { display: none; }
.auto-config-panel.hidden { display: none; }
.auto-config-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.auto-config-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ── Watch schemas ── */
.auto-watch-section { margin-top: 10px; }
.auto-out-badge.golden {
  background: rgba(200, 160, 100, 0.12);
  color: #C8A064;
}
.auto-out-badge.self {
  background: rgba(140, 120, 180, 0.12);
  color: #8C78B4;
}
.auto-out-badge.context {
  background: rgba(110, 140, 180, 0.12);
  color: #6E8CB4;
}

/* ── Sidebar section labels ── */

.sidebar-section-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink3);
  padding: 16px 20px 4px;
  font-family: var(--font-mono);
  opacity: 0.6;
}
/* (.sidebar-section-label's collapse rule retired with the element itself; it
   also keyed off the old #app-shell placement of .sidebar-collapsed.) */

/* Acting-context switcher — the bottom-left identity control.
   Anatomy mirrors the shell's IdentitySwitcher that Missions uses: an avatar
   badge + label trigger, and a popover with current-space / switch-to sections. */
.sidebar-footer { position: relative; }

.ctx-avatar {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--moss-pale);
  color: var(--ink3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
}

#nav-user-btn.is-group .ctx-avatar { background: var(--moss-mid); color: var(--ink-inv); }

.ctx-arrow { margin-left: auto; font-size: 9px; color: var(--ink4); }
/* (.ctx-arrow's collapse rule retired with the footer trigger.) */

/* FIXED, not absolute: #sidebar sets `overflow: hidden`, which clips any
   absolutely-positioned child to the rail. Taking the menu out to the viewport
   is what lets it sit over the nav instead of being cut off by it — the same
   reason real popovers portal to the body. Coordinates are set at open time
   from the trigger's own rect, so this survives the collapsed sidebar and any
   change to the footer's height. */
.ctx-menu {
  position: fixed;
  min-width: 216px;
  max-width: 260px;
  padding: 6px;
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  /* Above the sidebar's own stacking context (z-index: 100). */
  z-index: 1100;
}

.ctx-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; }
.ctx-badge {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--moss-pale);
  color: var(--ink3);
  font-family: var(--font-mono);
  font-size: 9px;
}
.ctx-badge-lg { width: 26px; height: 26px; font-size: 11px; }
.ctx-head-text { display: flex; flex-direction: column; min-width: 0; }
.ctx-head-name { font-family: var(--font-sans); font-size: 12px; color: var(--ink2); }
.ctx-head-sub {
  font-family: var(--font-mono); font-size: 9px; color: var(--ink4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ctx-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink4);
  padding: 8px 8px 4px;
}

.ctx-space {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: none; border: none; border-radius: 5px;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--ink3); text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ctx-space:hover { background: rgba(44,32,25,0.05); color: var(--ink2); }
.ctx-space-current { cursor: default; background: var(--moss-pale); color: var(--ink2); }
.ctx-space-current:hover { background: var(--moss-pale); }
.ctx-space-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-space-tag,
.ctx-space-connect-tag {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.08em; color: var(--ink4);
}
.ctx-space-connect-tag { color: var(--moss); }

.ctx-note {
  font-family: var(--font-sans); font-size: 11px; line-height: 1.45;
  color: var(--ink4); padding: 4px 8px 8px;
}

.ctx-sep { height: 1px; background: var(--border-lt); margin: 6px 4px; }

.ctx-item {
  width: 100%;
  display: block; padding: 6px 8px;
  background: none; border: none; border-radius: 5px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink4);
  text-align: left; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ctx-item:hover { background: rgba(44,32,25,0.05); color: var(--ink2); }

.int-tab.active {
  color: var(--ink2);
  border-bottom-color: var(--moss);
}

/* NO RAIL STANDS HERE (the dock retired 2026-08-18 for the console). Said as
   a TOKEN rather than by overriding the kit's rules one at a time: the kit
   indents the bottom-left cluster by
   `calc(var(--rail-stack-w, var(--ofself-rail-w, 60px)) + 8px)`, so with no
   value declared it fell back to 60px and the seats began ~68px in from the
   window — the gap where the corner should be. The kit's own `data-no-rail`
   resolves this to 0, but that lives on `.shell`, which this host does not
   wear. Declaring the stack width honestly is the same statement, and every
   kit rule that reads it (walls, clusters, stage insets) follows from it.
   (The .rail--eco seat rule that stood here went with the dock.) */
:root { --rail-stack-w: 0px; }

/* the footer collapsed with its trigger — only the fixed ctx-menu overlay
   and the status dot live here now */
.sidebar-footer--quiet { padding: 0; min-height: 0; border-top: none; }

/* (THE FOCUS MODE retired 2026-08-18 with the fullscreen seat that was its
   only trigger. Nothing else set data-ig-focus, so every rule keyed on it was
   unreachable the moment that button left — dead CSS that would have read as a
   live feature to the next person. The top-right cluster went with it.) */

/* unbuilt seats stand DISABLED (owner call 2026-08-16): uniform geometry,
   honest state — dimmed, no hand */
.ofself-corner .ofself-nav-toggle[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }