/* ============================================================
   project-shell.css — Aria browser workspace (Sprint 058 T1)
   3-column layout: left rail · pane grid · right sidebar.
   ============================================================ */

:root,
html[data-theme="black"], .theme-chip[data-theme="black"] {
  /* Black gloss — default. Neutral white accent, no chromatic hue. */
  --bg:            #0a0a0c;
  --bg-card:       #131318;
  --bg-elevate:    #1a1a20;
  --bg-input:      #0e0e12;
  --fg:            #ececf0;
  --fg-muted:      #8a8a93;
  --fg-dim:        #5b5b62;
  --accent:        #ececf0;
  --accent-fg:     #0a0a0c;      /* legible text ON the (near-white) accent */
  --accent-soft:   rgba(236, 236, 240, 0.08);
  --border:        #25252b;
  --border-active: #06b6d4;     /* cyan = active pane */
  --border-hover:  #f59e0b;     /* amber = hover */
  --shadow-glow:   0 0 0 1px var(--border), 0 8px 32px rgba(0, 0, 0, 0.6);
  --font-chrome:   -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display",
                   system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* CertusOrdo — optional red-accented dark theme. Doctrine palette, not default. */
html[data-theme="certusordo"], .theme-chip[data-theme="certusordo"] {
  --bg: #0a0a0c; --bg-card: #15151a; --bg-elevate: #1c1c22; --bg-input: #101013;
  --fg: #e6e6ea; --fg-muted: #8a8a93; --fg-dim: #5b5b62;
  --accent: #c1121f; --accent-fg: #ffffff; --accent-soft: rgba(193, 18, 31, 0.18);
  --border: #25252b; --border-active: #06b6d4; --border-hover: #f59e0b;
}

html[data-theme="dark"], .theme-chip[data-theme="dark"] {
  --bg: #000; --bg-card: #111; --bg-elevate: #181818; --bg-input: #0a0a0a;
  --fg: #fff; --fg-muted: #888; --fg-dim: #555;
  --accent: #fff; --accent-fg: #0a0a0c; --accent-soft: rgba(255, 255, 255, 0.08);
  --border: #2a2a2a; --border-active: #06b6d4; --border-hover: #f59e0b;
}

html[data-theme="light"], .theme-chip[data-theme="light"] {
  --bg: #f7f7f9; --bg-card: #ffffff; --bg-elevate: #f0f0f4; --bg-input: #ffffff;
  --fg: #0a0a0c; --fg-muted: #5b5b62; --fg-dim: #8a8a93;
  --accent: #c1121f; --accent-fg: #ffffff; --accent-soft: rgba(193, 18, 31, 0.10);
  --border: #d8d8de; --border-active: #06b6d4; --border-hover: #f59e0b;
}

/* Pierre Dark — Claude.ai's signature warm-brown dark theme.
   Deep terracotta/sepia background, cream text, gentle accents.
   Adopted 2026-05-26 by Ian request. */
html[data-theme="pierre"], .theme-chip[data-theme="pierre"] {
  --bg:            #2a1614;
  --bg-card:       #34201d;
  --bg-elevate:    #3d2825;
  --bg-input:      #1f0f0d;
  --fg:            #f0e1ce;
  --fg-muted:      #c0a890;
  --fg-dim:        #8a7060;
  --accent:        #d9a86c;
  --accent-fg:     #1f0f0d;
  --accent-soft:   rgba(217, 168, 108, 0.15);
  --border:        #4a342e;
  --border-active: #06b6d4;
  --border-hover:  #f59e0b;
}

/* ── Theme gallery (grafted from Odysseus, MIT — palettes are community-standard).
   Each block is a full token set; --border-active/-hover stay cyan/amber (functional:
   active pane / hover) for consistency across themes. Picker in project-shell.js. ── */
html[data-theme="dracula"], .theme-chip[data-theme="dracula"]    { --bg:#282a36; --bg-card:#21222c; --bg-elevate:#343746; --bg-input:#1e1f29; --fg:#f8f8f2; --fg-muted:#a8a8b3; --fg-dim:#6272a4; --accent:#bd93f9; --accent-fg:#282a36; --accent-soft:rgba(189,147,249,.16); --border:#3b3d4d; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="nord"], .theme-chip[data-theme="nord"]       { --bg:#2e3440; --bg-card:#2b303b; --bg-elevate:#3b4252; --bg-input:#272c36; --fg:#eceff4; --fg-muted:#a9b2c3; --fg-dim:#6c7689; --accent:#88c0d0; --accent-fg:#2e3440; --accent-soft:rgba(136,192,208,.16); --border:#3b4252; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="tokyo-night"], .theme-chip[data-theme="tokyo-night"]{ --bg:#1a1b26; --bg-card:#16161e; --bg-elevate:#24283b; --bg-input:#13131a; --fg:#c0caf5; --fg-muted:#8089b3; --fg-dim:#565f89; --accent:#7aa2f7; --accent-fg:#1a1b26; --accent-soft:rgba(122,162,247,.16); --border:#2a2e42; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="catppuccin"], .theme-chip[data-theme="catppuccin"] { --bg:#1e1e2e; --bg-card:#181825; --bg-elevate:#313244; --bg-input:#11111b; --fg:#cdd6f4; --fg-muted:#a6adc8; --fg-dim:#6c7086; --accent:#cba6f7; --accent-fg:#1e1e2e; --accent-soft:rgba(203,166,247,.16); --border:#313244; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="gruvbox"], .theme-chip[data-theme="gruvbox"]    { --bg:#282828; --bg-card:#1d2021; --bg-elevate:#3c3836; --bg-input:#1d2021; --fg:#ebdbb2; --fg-muted:#a89984; --fg-dim:#7c6f64; --accent:#fabd2f; --accent-fg:#282828; --accent-soft:rgba(250,189,47,.16); --border:#3c3836; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="solarized"], .theme-chip[data-theme="solarized"]  { --bg:#002b36; --bg-card:#073642; --bg-elevate:#0a4250; --bg-input:#00252e; --fg:#d7e0e0; --fg-muted:#93a1a1; --fg-dim:#586e75; --accent:#268bd2; --accent-fg:#002b36; --accent-soft:rgba(38,139,210,.16); --border:#0a4250; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="monokai"], .theme-chip[data-theme="monokai"]    { --bg:#272822; --bg-card:#1e1f1c; --bg-elevate:#3e3d32; --bg-input:#1e1f1c; --fg:#f8f8f2; --fg-muted:#bcbcb0; --fg-dim:#75715e; --accent:#a6e22e; --accent-fg:#272822; --accent-soft:rgba(166,226,46,.16); --border:#3e3d32; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="rose-pine"], .theme-chip[data-theme="rose-pine"]  { --bg:#191724; --bg-card:#1f1d2e; --bg-elevate:#26233a; --bg-input:#15131f; --fg:#e0def4; --fg-muted:#908caa; --fg-dim:#6e6a86; --accent:#ebbcba; --accent-fg:#191724; --accent-soft:rgba(235,188,186,.16); --border:#26233a; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="everforest"], .theme-chip[data-theme="everforest"] { --bg:#2d353b; --bg-card:#272e33; --bg-elevate:#3a454a; --bg-input:#232a2e; --fg:#d3c6aa; --fg-muted:#a6b0a0; --fg-dim:#859289; --accent:#a7c080; --accent-fg:#2d353b; --accent-soft:rgba(167,192,128,.16); --border:#3a454a; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="solarized-light"], .theme-chip[data-theme="solarized-light"] { --bg:#fdf6e3; --bg-card:#ffffff; --bg-elevate:#eee8d5; --bg-input:#ffffff; --fg:#073642; --fg-muted:#586e75; --fg-dim:#93a1a1; --accent:#b58900; --accent-fg:#fdf6e3; --accent-soft:rgba(181,137,0,.12); --border:#e3ddc7; --border-active:#06b6d4; --border-hover:#f59e0b; }
html[data-theme="github-light"], .theme-chip[data-theme="github-light"]    { --bg:#ffffff; --bg-card:#f6f8fa; --bg-elevate:#eaeef2; --bg-input:#ffffff; --fg:#1f2328; --fg-muted:#656d76; --fg-dim:#8c959f; --accent:#0969da; --accent-fg:#ffffff; --accent-soft:rgba(9,105,218,.10); --border:#d0d7de; --border-active:#06b6d4; --border-hover:#f59e0b; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-chrome);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ────────── TOP BAR ────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  user-select: none;
  -webkit-app-region: drag; /* future native wrap */
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; -webkit-app-region: no-drag; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
  width: 14px; height: 14px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), #6d010c);
}
.brand-name { font-weight: 600; letter-spacing: -0.01em; }
.breadcrumb { color: var(--fg-muted); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.bc-project { color: var(--fg); }
.bc-sep { color: var(--fg-dim); }

.nav-toggle {
  background: var(--bg-elevate);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.nav-toggle:hover { border-color: var(--border-hover); }
.nav-menu {
  position: absolute; top: 40px; right: 14px;
  min-width: 220px;
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-glow);
  padding: 6px;
  z-index: 600;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; color: var(--fg);
  border: 0; padding: 8px 10px;
  border-radius: 6px;
  font: inherit; cursor: pointer; text-align: left;
}
.nav-item:hover { background: var(--bg-card); }
.nav-item.active { background: var(--accent-soft); color: var(--fg); }
.nav-item kbd {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg-input);
  padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--border);
}
.nav-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* Sprint 076 — Session usage widget */
.usage-widget {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-muted);
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none;
  font-family: var(--font-mono);
  transition: border-color 0.15s ease;
}
.usage-widget:hover { border-color: var(--border-hover); color: var(--fg); }
.usage-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3eff8b;
  display: inline-block;
}
.usage-widget.low .usage-dot { background: var(--accent); }
.usage-widget.warn .usage-dot { background: #f59e0b; }
.usage-balance { color: var(--fg); font-weight: 500; }
.usage-sep { opacity: 0.5; }
.usage-asr { color: var(--fg-muted); }

/* Sprint 083 — runner heartbeat chip on topbar */
.runner-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--fg-muted); font-size: 11px;
  text-decoration: none; transition: border-color 0.15s, color 0.15s;
}
.runner-chip:hover { border-color: var(--border-hover); color: var(--fg); }
.runner-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #555;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(62,255,139,0); transition: box-shadow 0.3s;
}
.runner-chip.online .runner-dot {
  background: #3eff8b;
  animation: runner-pulse 2s infinite;
}
.runner-chip.offline .runner-dot { background: #f59e0b; }
@keyframes runner-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62,255,139,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(62,255,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,255,139,0); }
}

/* ────────── SHELL GRID ────────── */
/* 2026-05-27 — right sidebar moved to a topbar-button-toggled drawer.
   Shell is now 2-column (left rail + center). Tools drawer overlays. */
.shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: calc(100vh - 36px);
  overflow: hidden;
}

/* ────────── LEFT RAIL ────────── */
.left-rail {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
}
.rail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px;
}
.rail-title {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.rail-add {
  width: 22px; height: 22px;
  background: transparent; color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer; font: inherit;
  display: flex; align-items: center; justify-content: center;
}
.rail-add:hover { border-color: var(--border-hover); color: var(--fg); }
.project-list {
  list-style: none; margin: 0; padding: 0 8px;
  flex: 1; overflow-y: auto; min-height: 0;
}
.project-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin-bottom: 2px;
}
.project-item:hover { background: var(--bg-elevate); }
.project-item.active { background: var(--accent-soft); }
.project-item.active .project-name { color: var(--fg); }
.project-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, var(--fg-muted));
  flex-shrink: 0;
}
.project-name { flex: 1; font-size: 13px; color: var(--fg-muted); }
.project-badge {
  font-size: 10px; padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--fg-muted);
}
.project-close {
  display: none;
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 14px; line-height: 1; padding: 0 4px;
  cursor: pointer;
}
.project-item:hover .project-close, .project-item.active .project-close { display: inline; }

.rail-footer {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.settings-quick {
  background: transparent; border: 0; color: var(--fg-muted);
  cursor: pointer; padding: 4px;
}
.settings-quick:hover { color: var(--fg); }
.user-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); }
.user-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg); font-size: 11px;
}

/* ────────── CENTER (sections) ────────── */
.center {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}
.section {
  position: absolute; inset: 0;
  display: none;
  padding: 14px;
}
.section.active { display: block; }
/* graft #2.5 — full-page tool section: full-bleed OVER the live grid. */
.section.is-page { display: block; position: absolute; inset: 0; z-index: 380; background: var(--bg-card); }
.section-frame {
  width: 100%; height: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--bg-card);
}
.empty-state {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--fg-muted);
  gap: 6px;
}
.empty-state h2 { margin: 0; color: var(--fg); font-size: 18px; font-weight: 500; }
.empty-state p { margin: 0; }

/* ────────── PANE GRID (tree-based splits, 2026-05-27) ────────── */
/* Layout is a nested flex tree built from state.layout in project-shell.js.
   Old `data-panes="N"` uniform-grid CSS is gone — splits now isolate to the
   active pane and only that subtree reflows. */
.pane-grid {
  display: flex;
  gap: 8px;
  height: 100%;
  flex-direction: row; /* root row by default; nested splits flip direction */
  position: relative; /* W-5 anchor: a .pane.maximized uses inset:0 against this */
}
.pane-grid > .pane,
.pane-grid > .pane-split { flex: 1 1 0; min-width: 0; min-height: 0; }

.pane-split {
  display: flex;
  gap: 8px;
  min-width: 0; min-height: 0;
  flex: 1 1 0;
}
.pane-split > .pane,
.pane-split > .pane-split { flex: 1 1 0; min-width: 0; min-height: 0; }

/* dir="h" = horizontal split bar between top + bottom panes (stacked vertically) */
.pane-split-horizontal { flex-direction: column; }
/* dir="v" = vertical split bar between left + right panes (side-by-side) */
.pane-split-vertical   { flex-direction: row; }

.pane {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s ease;
}
.pane:hover { border-color: var(--border-hover); }
.pane.active { border-color: var(--border-active); }

/* ── Notification color-coding (refs 35-38) ──────────────────────────────
   The state→color source-of-truth lives in project-shell.js (window.AriaNotify);
   CSS only renders whatever --notif color it sets on the element.
   green = complete · red = error · blue = running/gate · yellow = needs-input/barrier */
.pane.notif-on {
  border-color: var(--notif, var(--border));
  box-shadow: 0 0 0 1px var(--notif), 0 0 14px -3px var(--notif);
}
/* keyboard focus still reads clearly over a state outline */
.pane.notif-on.active { box-shadow: 0 0 0 1px var(--notif); }

@keyframes notif-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35%      { box-shadow: 0 0 0 2px var(--notif); }
}
.notif-flash { animation: notif-flash 1s ease-out 3; border-radius: 6px; }
/* W-5 — maximize/restore. maximizePane() toggles `.maximized` on the pane el but
   no rule existed, so the two-arrows button was a no-op. A maximized pane fills
   the position:relative #pane-grid; siblings hide so the grid doesn't show
   through behind it. Toggling again restores the split. */
.pane.maximized {
  position: fixed;            /* W-5 fix: anchor to viewport, not the split wrapper */
  inset: 0;
  z-index: 50;
  visibility: visible;        /* W-5 fix: show even when nested in a hidden split wrapper (black-screen bug) */
}
#pane-grid:has(.pane.maximized) > :not(.pane.maximized) { visibility: hidden; }
.pane-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 28px;
  padding: 0 8px;
  background: var(--bg-elevate);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  user-select: none;
}
.pane-title { color: var(--fg); display: flex; align-items: center; gap: 6px; }
.pane-agent-icon {
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--accent);
}
.pane-controls { display: flex; gap: 2px; }
.pane-ctl {
  width: 22px; height: 22px;
  background: transparent; border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.pane-ctl:hover { background: var(--bg-input); color: var(--fg); }
.pane-ctl svg { width: 12px; height: 12px; }

/* Pane target chip + picker (disk-first workspace, 2026-05-30).
   Chip uses theme tokens (gloss-black + fg) so it's legible in every theme;
   the status dot uses explicit colors as an at-a-glance target indicator. */
.pane-target {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 6px; margin-right: auto; /* group with title; push controls right */
  height: 20px; padding: 0 8px;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border); border-radius: 5px;
  font: inherit; font-size: 11px; cursor: pointer;
}
.pane-target.pane-target-static { cursor: default; }
.pane-target:hover { border-color: var(--fg-muted); }
.pane-target.pane-target-static:hover { border-color: var(--border); }
.pane-target-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-muted); }
.pane-target-dot.pane-target-disk { background: #3ecf8e; }   /* green = your machine */
.pane-target-dot.pane-target-server { background: #f59e0b; } /* amber = hosted server */
.pane-target-dot.pane-target-peacock { background: #a855f7; }/* violet = GPU box */
.pane-target-label { white-space: nowrap; }
.pane-target-caret { color: var(--fg-muted); font-size: 9px; }

.pane-target-menu {
  position: fixed; z-index: 10000; min-width: 200px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); padding: 6px;
}
.pane-target-item {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--fg);
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font: inherit;
}
.pane-target-item:hover { background: var(--bg-elevate); }
.pane-target-item.active { background: var(--bg-input); }
.pane-target-item-label { font-size: 13px; }
.pane-target-item-hint { font-size: 11px; color: var(--fg-muted); }
.pane-body {
  flex: 1; min-height: 0;
  padding: 6px;
  font-family: var(--font-mono);
  position: relative; /* anchor for the .no-runner overlay */
}
.pane-body .xterm { height: 100%; }

/* "Connect your machine" — disk pane with no online runner (disk-first) */
.no-runner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; text-align: center;
}
.no-runner-inner { max-width: 360px; }
.no-runner-title { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.no-runner-body { font-size: 13px; color: var(--fg-muted); line-height: 1.5; margin-bottom: 16px; }
.no-runner-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.no-runner .btn {
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--fg-muted); border-radius: 6px;
  padding: 8px 14px; font: inherit; font-size: 12px; cursor: pointer;
}
.no-runner .btn:hover { border-color: var(--fg); }
.no-runner .btn.primary { font-weight: 600; }

/* Non-blocking "waiting for your machine" banner — disk pane attached but
   the runner hasn't streamed yet (registered-but-offline). Auto-clears on
   first byte. Sits over the bottom of the terminal without hiding it. */
.runner-waiting {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px;
  font-size: 12px; color: var(--fg-muted);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.runner-waiting .rw-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--border-hover); /* amber */
  animation: rwPulse 1.4s ease-in-out infinite;
}
@keyframes rwPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.runner-waiting .rw-text { flex: 1; color: var(--fg); }
.runner-waiting .rw-btn {
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--fg-muted); border-radius: 5px;
  padding: 5px 10px; font: inherit; font-size: 11px; cursor: pointer;
}
.runner-waiting .rw-btn:hover { border-color: var(--fg); }

/* Handoff dropdown */
.handoff-menu {
  position: absolute;
  top: 28px;
  right: 8px;
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-glow);
  padding: 6px;
  min-width: 180px;
  z-index: 50;
}
.handoff-menu .handoff-title {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 6px 10px;
}
.handoff-menu button {
  display: block; width: 100%;
  background: transparent; border: 0; color: var(--fg);
  text-align: left; font: inherit;
  padding: 6px 10px; border-radius: 4px;
  cursor: pointer;
}
.handoff-menu button:hover { background: var(--bg-card); }

/* ────────── TOOLS DRAWER (right-side slide-in) ────────── */
/* Sprint 058 v2 — was the always-visible .right-sidebar. Now a topbar-
   button-toggled drawer at ~33vw. Opens on click of #tools-toggle, closes
   on click of #tools-close, click-outside, or Escape. */
.tools-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
  z-index: 590; opacity: 0; transition: opacity .18s ease;
  pointer-events: auto;
}
.tools-backdrop:not([hidden]) { opacity: 1; }
.tools-drawer {
  position: fixed; top: 36px; right: 0; bottom: 0;
  width: min(33vw, 560px); min-width: 360px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
  z-index: 600;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.tools-drawer:not([hidden]) { transform: translateX(0); }
.tools-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 8px; border-bottom: 1px solid var(--border);
}
.tools-drawer-close {
  background: transparent; color: var(--fg-muted); border: 0;
  padding: 6px; cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.tools-drawer-close:hover { color: var(--fg); background: var(--bg-elevate); }

.sidebar-tabs {
  display: flex;
  padding: 8px 0 0;
  gap: 2px;
}
.sidebar-tab {
  background: transparent; color: var(--fg-muted);
  border: 0; padding: 8px 12px;
  font: inherit; font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sidebar-tab:hover { color: var(--fg); }
.sidebar-tab.active { color: var(--fg); border-bottom-color: var(--accent); }

.sidebar-body { flex: 1; overflow-y: auto; min-height: 0; }
.tab-panel { padding: 14px; }
.tab-panel[hidden] { display: none; }

/* Aria Assistant tab styling */
.aa-mode-toggle {
  display: flex;
  background: var(--bg-input);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 12px;
}
.aa-mode-toggle button {
  flex: 1;
  background: transparent; color: var(--fg-muted);
  border: 0; padding: 6px;
  font: inherit; font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.aa-mode-toggle button.active {
  background: var(--bg-elevate);
  color: var(--fg);
}
.aa-transcript {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
  font-size: 13px;
}
.aa-msg { padding: 8px 10px; border-radius: 6px; }
.aa-msg.user { background: var(--bg-elevate); color: var(--fg); align-self: flex-end; max-width: 90%; }
.aa-msg.assistant { background: var(--accent-soft); color: var(--fg); max-width: 95%; }
.aa-input-row {
  display: flex; gap: 6px;
  /* Input sits BELOW the thread (standard chat, Ian 2026-05-31); newest message
     renders directly above it. The divider separates it from the thread above. */
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.aa-input {
  flex: 1;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit; font-size: 13px;
  resize: none;
  min-height: 38px; max-height: 120px;
}
.aa-input:focus { outline: 0; border-color: var(--accent); }
.aa-send {
  /* gloss-black + white text (theme tokens). --accent is near-white in the
     default theme, so the old accent-bg + #fff text was invisible. */
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--fg-muted); padding: 0 14px;
  border-radius: 6px;
  font: inherit; font-weight: 500;
  cursor: pointer;
}
.aa-send:hover { border-color: var(--fg); }

/* Inline billing chooser (shown when Architect/Research returns billing.mode=denied) */
.aa-billing-chooser .aa-bc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}
.aa-bc-card {
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--fg);
  font: inherit;
  transition: border-color .15s ease;
}
.aa-bc-card:hover { border-color: var(--border-hover); }
.aa-bc-icon { font-size: 18px; margin-bottom: 4px; }
.aa-bc-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.aa-bc-sub { font-size: 11.5px; color: var(--fg-muted); line-height: 1.4; }

.aa-tasks {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.aa-tasks-title {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.aa-task {
  font-size: 13px;
  padding: 6px 8px;
  background: var(--bg-elevate);
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.aa-task-state {
  font-size: 10px; padding: 1px 5px;
  background: var(--bg-input);
  border-radius: 3px;
  color: var(--fg-muted);
}

/* Skills tab */
.skill-search {
  width: 100%;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit; font-size: 13px;
  margin-bottom: 12px;
}
.skill-card {
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
}
.skill-card:active { cursor: grabbing; }
.skill-card:hover { border-color: var(--border-hover); }
.skill-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.skill-card-name { font-weight: 500; font-size: 13px; }
.skill-card-tag {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent);
}
.skill-card-desc { font-size: 12px; color: var(--fg-muted); }
.skill-hint {
  font-size: 11px; color: var(--fg-dim);
  margin-top: 6px;
}

/* Editor tab */
.editor-tree {
  font-family: var(--font-mono);
  font-size: 12px;
}
.editor-row {
  padding: 3px 4px;
  cursor: pointer;
  display: flex; gap: 6px; align-items: center;
  border-radius: 3px;
}
.editor-row:hover { background: var(--bg-elevate); }

/* Browser tab */
.browser-url-bar {
  display: flex; gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  margin: -14px -14px 14px;
}
.browser-url-input {
  flex: 1;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit; font-size: 12px;
  font-family: var(--font-mono);
}
.browser-go {
  /* gloss-black + white text (theme tokens); see .aa-send note. */
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--fg-muted); padding: 0 10px;
  border-radius: 6px;
  font: inherit; cursor: pointer;
}
.browser-go:hover { border-color: var(--fg); }
.browser-frame {
  width: 100%; height: calc(100vh - 200px);
  border: 1px solid var(--border);
  border-radius: 6px;
  /* R-021 (Ian): was hardcoded #fff — a white slab on the black-gloss default
     theme during load/blank states. Follow the theme background instead; real
     loaded pages paint their own bg over this. */
  background: var(--bg);
}
.browser-block-warn {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 8px;
}

/* ────────── Drop overlay ────────── */
.drop-overlay {
  position: fixed; inset: 0;
  background: rgba(193, 18, 31, 0.10);
  border: 2px dashed var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 500;
  color: var(--fg);
  z-index: 1000;
  pointer-events: none;
}
.drop-overlay[hidden] { display: none; }

/* ────────── Utility ────────── */
.hidden, [hidden] { display: none !important; }

/* ────────── Toast notifications (toast.js) ────────── */
#aria-toast-root {
  position: fixed;
  bottom: 18px; right: 18px;
  display: flex; flex-direction: column-reverse;
  gap: 8px; z-index: 9999;
  pointer-events: none;
  max-width: calc(100vw - 36px);
}
.aria-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  min-width: 240px; max-width: 440px;
  padding: 10px 12px 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-muted);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  font-size: 13px; line-height: 1.4;
  color: var(--fg);
  opacity: 0; transform: translateX(20px);
  transition: opacity .18s ease, transform .18s ease;
}
.aria-toast.aria-toast-in  { opacity: 1; transform: translateX(0); }
.aria-toast.aria-toast-out { opacity: 0; transform: translateX(20px); }
.aria-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-muted); flex-shrink: 0;
}
.aria-toast-body { flex: 1; min-width: 0; word-break: break-word; }
.aria-toast-action {
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 9px; font: inherit; font-size: 11.5px;
  cursor: pointer; flex-shrink: 0;
}
.aria-toast-action:hover { border-color: var(--border-hover); }
.aria-toast-close {
  background: transparent; color: var(--fg-muted);
  border: 0; cursor: pointer; padding: 0 4px;
  font-size: 18px; line-height: 1; flex-shrink: 0;
}
.aria-toast-close:hover { color: var(--fg); }
.aria-toast-info    { border-left-color: #6b8aff; }
.aria-toast-info    .aria-toast-dot { background: #6b8aff; }
.aria-toast-success { border-left-color: #3eff8b; }
.aria-toast-success .aria-toast-dot { background: #3eff8b; }
.aria-toast-warn    { border-left-color: #f0b04f; }
.aria-toast-warn    .aria-toast-dot { background: #f0b04f; }
.aria-toast-error   { border-left-color: #ff5a5a; }
.aria-toast-error   .aria-toast-dot { background: #ff5a5a; }

/* ────────── Skeleton loaders ────────── */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--bg-elevate) 0%,
    var(--bg-card)    50%,
    var(--bg-elevate) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  min-height: 12px;
  vertical-align: middle;
}
.skeleton-block { display: block; height: 12px; margin: 6px 0; }
.skeleton-text  { width: 60%; height: 12px; }
.skeleton-title { width: 40%; height: 18px; margin-bottom: 10px; }
.skeleton-card  { display: block; width: 100%; height: 64px; border-radius: 8px; margin-bottom: 10px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Browser-in-Workspace pane (Terminal 5, 2026-05-31)
   A browser pane reuses the standard .pane chrome (header/controls) but its
   body is a streamed-screenshot surface with a content-titled tab strip + a
   slim omnibar. "Custom, non-traditional chrome" per Ian's spec.
   ────────────────────────────────────────────────────────────────────────── */
.browser-pane .pane-agent-icon { background: #6b8aff; } /* distinguish from CLI panes */
.browser-body {
  padding: 0;                 /* chrome is flush; the shared no-runner overlay still anchors here */
  display: flex; flex-direction: column;
  background: var(--bg);
}

/* Tab strip — each tab titled by page content */
.browser-tabs {
  display: flex; align-items: stretch; gap: 4px;
  height: 30px; min-height: 30px;
  padding: 4px 6px 0 6px;
  background: var(--bg-elevate);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden;
  font-family: var(--font-chrome);
}
.browser-tabs::-webkit-scrollbar { height: 0; }
.browser-tab {
  display: flex; align-items: center; gap: 6px;
  max-width: 200px; min-width: 60px;
  padding: 0 8px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 7px 7px 0 0;
  font-size: 12px; color: var(--fg-muted);
  cursor: pointer; white-space: nowrap;
}
.browser-tab:hover { color: var(--fg); }
.browser-tab.active { background: var(--bg); color: var(--fg); border-color: var(--border-active); }
.browser-tab-label { overflow: hidden; text-overflow: ellipsis; }
.browser-tab-x {
  font-size: 14px; line-height: 1; color: var(--fg-muted);
  border-radius: 3px; padding: 0 2px;
}
.browser-tab-x:hover { background: var(--bg-input); color: var(--fg); }
.browser-tab-add {
  flex: 0 0 auto;
  width: 26px;
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 16px; cursor: pointer; border-radius: 6px;
}
.browser-tab-add:hover { background: var(--bg-input); color: var(--fg); }

/* Omnibar row */
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  height: 36px; min-height: 36px;
  padding: 0 8px;
  background: var(--bg-elevate);
  border-bottom: 1px solid var(--border);
}
.browser-nav-btn {
  width: 26px; height: 24px;
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 5px;
}
.browser-nav-btn:hover { background: var(--bg-input); color: var(--fg); }
.browser-omni {
  flex: 1; height: 26px;
  padding: 0 12px;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border); border-radius: 13px;
  font: inherit; font-size: 12px; font-family: var(--font-chrome);
  outline: none;
}
.browser-omni:focus { border-color: var(--border-active); }
.browser-size-btn {
  width: 26px; height: 24px;
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 13px; cursor: pointer; border-radius: 5px;
}
.browser-size-btn:hover { background: var(--bg-input); color: var(--fg); }

/* Streamed view */
.browser-view {
  flex: 1; min-height: 0; position: relative;
  background: var(--bg-card);
  overflow: auto;
}
.browser-shot {
  display: block; width: 100%; height: auto;
  -webkit-user-select: none; user-select: none;
}
.browser-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 8px 14px;
  background: var(--bg-elevate); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; font-family: var(--font-chrome);
  pointer-events: none; max-width: 80%; text-align: center;
}
.browser-status.err { color: #ff7a7a; border-color: #ff5a5a; }

/* Malleable sizing presets (Ian's spec: full ↔ ⅓ ↔ ¼ ↔ corner box).
   "grid" = normal in-grid (no class). The rest pop the pane out as a floating
   overlay so it can shrink to a corner box independent of the split grid. */
.pane.browser-size-full,
.pane.browser-size-third,
.pane.browser-size-quarter,
.pane.browser-size-corner {
  position: fixed; z-index: 9500;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  border-color: var(--border-active);
}
.pane.browser-size-full    { inset: 12px; }
.pane.browser-size-third   { right: 16px; bottom: 16px; width: 34vw; height: 56vh; }
.pane.browser-size-quarter { right: 16px; bottom: 16px; width: 26vw; height: 40vh; }
.pane.browser-size-corner  { right: 16px; bottom: 16px; width: 320px; height: 220px; }

/* ============================================================
   SCOUT — the internet agent (Terminal 5, 2026-05-31)
   Chat → fan-out → result cards → click opens the page in an
   embedded browser view. Lives in section-scout, built by
   scout-tab.js. Uses the shared theme variables.
   ============================================================ */
.section-scout { overflow: hidden; }
.scout-wrap {
  display: flex; flex-direction: column;
  height: 100%; max-width: 1100px; margin: 0 auto;
  padding: 22px 22px 8px; gap: 14px; box-sizing: border-box;
  font-family: var(--font-chrome); color: var(--fg);
}
.scout-head { display: flex; align-items: flex-start; gap: 12px; }
.scout-logo { font-size: 26px; line-height: 1; }
.scout-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.scout-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; max-width: 70ch; }

.scout-search { display: flex; gap: 8px; }
.scout-input {
  flex: 1; min-width: 0;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; font-size: 14px; outline: none;
}
.scout-input:focus { border-color: var(--border-active); }
.scout-input::placeholder { color: var(--fg-dim); }
.scout-go {
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 10px; padding: 0 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.scout-go:hover { filter: brightness(1.08); }

.scout-narrate { font-size: 12.5px; color: var(--fg-muted); min-height: 16px; }
.scout-narrate.err { color: var(--border-hover); }

.scout-body { flex: 1; display: flex; gap: 14px; min-height: 0; }
.scout-cards {
  flex: 1; min-width: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px; padding-right: 4px;
}
/* When a result is open, split: cards left, browser view right. */
.scout-viewing .scout-cards { flex: 0 0 38%; }
.scout-view { flex: 1; min-width: 0; }

.scout-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.scout-card:hover, .scout-card:focus {
  border-color: var(--border-active); background: var(--bg-elevate); outline: none;
}
.scout-card-title {
  font-size: 13.5px; font-weight: 600; color: var(--fg);
  line-height: 1.3; margin-bottom: 3px;
}
.scout-card-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; margin-bottom: 4px; }
.scout-card-domain { color: var(--border-active); font-weight: 500; }
.scout-card-src { color: var(--fg-dim); }
.scout-card-snip { font-size: 12px; color: var(--fg-muted); line-height: 1.4; }

/* Embedded browser view */
.scout-view {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.scout-view[hidden] { display: none; }
.scout-view-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-bottom: 1px solid var(--border);
  background: var(--bg-elevate);
}
.scout-view-btn {
  background: transparent; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 4px 9px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.scout-view-btn:hover { color: var(--fg); border-color: var(--border-hover); }
.scout-view-omni {
  font-size: 11.5px; color: var(--border-active);
  text-decoration: none; max-width: 30ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.scout-view-omni:hover { text-decoration: underline; }
.scout-view-title {
  font-size: 11.5px; color: var(--fg-muted); margin-left: auto;
  max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scout-view-body { flex: 1; position: relative; background: var(--bg-input); min-height: 0; }
.scout-view-img { width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; }
.scout-view-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--fg-muted); pointer-events: none;
}

@media (max-width: 760px) {
  .scout-body { flex-direction: column; }
  .scout-viewing .scout-cards { flex: 0 0 auto; max-height: 40%; }
}

/* SCOUT — A2 browser-control consent banner (2026-06-01) */
.scout-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 13px;
}
.scout-banner[hidden] { display: none; }
.scout-banner-text { font-size: 12.5px; color: var(--fg-muted); flex: 1; line-height: 1.35; }
.scout-approve-btn {
  flex: 0 0 auto; background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.scout-approve-btn:hover { filter: brightness(1.08); }

/* ────────── Theme picker (graft #1, from Odysseus) ────────── */
.theme-trigger { padding: 6px 8px; }
.theme-pop {
  position: fixed; z-index: 1200; width: 340px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
  padding: 10px; animation: themePopIn .12s ease;
}
@keyframes themePopIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
.theme-pop-head {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-dim); padding: 2px 4px 8px;
}
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.theme-swatch {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; color: var(--fg-muted); font-size: 12px; text-align: left;
}
.theme-swatch:hover { background: var(--bg-elevate); color: var(--fg); }
.theme-swatch.active { border-color: var(--border-active); color: var(--fg); }
.theme-chip {
  flex: 0 0 auto; width: 34px; height: 24px; border-radius: 5px;
  background: var(--bg-card); border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.theme-chip::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent);
}
.theme-chip::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 4px;
  border-radius: 3px; background: var(--accent-soft); border: 1px solid var(--accent);
}
.theme-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════════════════════
   BRIDGEMIND RESKIN (2026-06-08) — faithful clean-shell pass.
   Source of truth: v4/audits/bridgemind_layout_extraction_2026_05_26.md +
   bridgespace_full_walk_audit_2026_06_04.md. Subtractive cleanup only —
   functionality + grafts #2/#3/#4 untouched. Appended last so it overrides by
   source order; fully reversible (delete this block to revert).

   Principles (from the audits): ONE soft accent per zone · 1px selection cue +
   soft glow, no hard color floods · icon-led top bar, no word-plates · chrome
   recedes (no elevated header strips / hard border lines) · generous padding ·
   dark-only default. ════════════════════════════════════════════════════ */

/* ── 1. Single soft-blue accent + soft glow, softer borders (default dark) ── */
:root,
html[data-theme="black"], .theme-chip[data-theme="black"] {
  --border:        #1a1a20;   /* softer than #25 — "no hard lines" */
  --border-hover:  #2c2c35;   /* subtle lift, NOT amber */
  --border-active: #5e8bff;   /* the ONE accent (BridgeMind soft blue) */
  --accent-soft:   rgba(94, 139, 255, 0.12);
  --glow-accent:   rgba(94, 139, 255, 0.38);
  --shadow-glow:   0 0 0 1px var(--border), 0 10px 34px rgba(0, 0, 0, 0.55);
}
/* Catch-all: kill the cyan selection accent under EVERY theme (not just dark),
   so the ONE accent is soft blue everywhere. html[data-theme] (0,1,1) outranks
   the per-theme html[data-theme="x"] (0,1,0) token blocks. */
html[data-theme] { --border-active: #5e8bff; }

/* ── 2. Top bar — quiet, icon-led. Kill the word-button plates. ──────────── */
.topbar { height: 40px; background: var(--bg); border-bottom: 1px solid var(--border); }
.brand-mark { background: linear-gradient(135deg, #5e8bff, #7aa0ff); } /* single-accent brand */
.nav-toggle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--fg-muted);
  padding: 5px 8px;
}
.nav-toggle:hover { background: var(--bg-elevate); border-color: transparent; color: var(--fg); }
.nav-toggle svg { opacity: 0.85; }
/* icon-only persistent cluster (tooltips remain via title=) — match BridgeMind */
#scout-link span, #forge-link span, #tools-toggle span { display: none; }
#scout-link, #forge-link, #tools-toggle { padding: 6px; }
/* section indicator stays labeled but quiet */
#nav-toggle { color: var(--fg); }

/* usage + runner chips — ghost, desaturated, low-profile (one accent rule) */
.usage-widget, .runner-chip {
  background: transparent;
  border: 1px solid transparent;
}
.usage-widget:hover, .runner-chip:hover { background: var(--bg-elevate); border-color: transparent; color: var(--fg); }
.usage-dot { background: #4ea882; }                 /* desaturated green */
.runner-chip.online .runner-dot { background: #4ea882; animation: none; box-shadow: none; }

/* ── 3. Left rail — tighter, single-accent active row with a soft cue ─────── */
.left-rail { background: var(--bg-card); border-right: 1px solid var(--border); }
.project-item { padding: 7px 10px; }
.project-item.active {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--border-active);   /* BridgeMind filled-highlight cue */
}
.project-badge { background: transparent; color: var(--fg-dim); padding: 0; min-width: 14px; text-align: right; }
.user-avatar { background: linear-gradient(135deg, #5e8bff, #7aa0ff); color: #fff; }

/* ── 4. Content tiles — generous padding + soft glow, no hard frame ──────── */
.section { padding: 20px; }
.section-frame {
  border-radius: 12px;
  box-shadow: var(--shadow-glow);
}

/* ── 5. Pane chrome — the #1 fix: chrome recedes, 1px+glow selection ─────── */
.pane {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.pane:hover { border-color: var(--border-hover); }
.pane.active {
  border-color: var(--border-active);
  box-shadow: 0 0 0 1px var(--border-active), 0 0 22px -6px var(--glow-accent);
}
/* header recedes: transparent, no hard border line, low-profile */
.pane-header {
  height: 30px;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 0 6px;
}
.pane-title { color: var(--fg-muted); font-size: 11.5px; }
.pane-agent-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim); }
.pane-ctl { color: var(--fg-dim); }
.pane-ctl:hover { background: var(--bg-elevate); color: var(--fg); }

/* target chip — strip the plate: dot + tiny muted label, no border/bg ────── */
.pane-target, .pane-target.pane-target-static {
  background: transparent;
  border: 1px solid transparent;
  padding: 0 4px;
  color: var(--fg-muted);
  font-size: 11px;
}
.pane-target:hover { background: var(--bg-elevate); border-color: transparent; }
.pane-target-disk { background: #4ea882; }    /* slightly desaturated */
.pane-target-caret { color: var(--fg-dim); }

/* ── 6. Modal/palette/task surfaces inherit the softer accent automatically
   via the token overrides above (border-active, accent-soft, shadow-glow). ── */

/* TOP-BAR MINIMALISM (Ian 06-08): hide minutes + via-your-machine; nav = icon only */
#usage-widget, #runner-chip { display: none !important; }
#nav-current { display: inline-flex; align-items: center; }
#nav-current svg { width: 15px; height: 15px; }

/* ===== GRAFTS #2/#3/#4 (modal-over-context · palette · tasks) ===== */
/* ────────── MODAL-OVER-CONTEXT WINDOWS (graft #2, Odysseus pattern) ──────────
   A tool .section gains `.is-modal` to become a draggable window floating over
   the persistent terminal grid. The grid is never hidden or re-rendered, so the
   live xterm/disk-PTY panes survive navigation (fixes bug #1). Pattern ported
   from Odysseus (pewdiepie-archdaemon/odysseus, MIT) modalManager/modalSnap. */
.section.is-modal {
  /* override the full-bleed `.section { position:absolute; inset:0 }` */
  position: absolute;
  inset: auto;
  /* left/top set inline by project-modals.js; size clamps to .center */
  width: min(1100px, 86%);
  height: min(760px, 86%);
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-glow);
  overflow: hidden;
}
.section.is-modal.modal-minimized { display: none; }
/* graft #2.5 — discrete detach affordance + resizable windows */
.aria-page-detach { position:absolute; top:8px; right:10px; width:26px; height:24px;
  display:none; align-items:center; justify-content:center; background:transparent;
  border:none; border-radius:6px; color:var(--fg-dim); font-size:15px; line-height:1;
  cursor:pointer; opacity:0.35; transition:opacity .12s, background .12s, color .12s; z-index:5; }
.section.is-page > .aria-page-detach { display:flex; }
.aria-page-detach:hover { opacity:1; background:var(--bg-card); color:var(--fg); }
.section.is-modal { min-width:160px; min-height:120px; }
.section.is-modal.is-resizing > .section-frame,
.section.is-modal.is-dragging > .section-frame { pointer-events:none; }
.aria-modal-resize { position:absolute; right:0; bottom:0; width:16px; height:16px;
  cursor:nwse-resize; z-index:6;
  background: linear-gradient(135deg, transparent 0 50%, var(--border-hover) 50% 60%,
    transparent 60% 70%, var(--border-hover) 70% 80%, transparent 80%); }

/* Window chrome — one repeated grammar across every tool window */
.aria-modal-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 34px;
  padding: 0 6px 0 12px;
  background: var(--bg-elevate);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
.amt-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.amt-glyph { font-size: 13px; opacity: 0.9; }
.amt-controls { display: flex; align-items: center; gap: 2px; }
.amt-btn {
  width: 26px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.amt-btn:hover { background: var(--bg-card); color: var(--fg); }
.amt-close:hover { background: var(--accent-soft); color: var(--fg); }

/* The tool body (iframe or inline content) fills below the titlebar */
.section.is-modal > .section-frame {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 0 0 10px 10px;
}

/* Bottom dock — one chip per minimized window */
.aria-modal-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  pointer-events: none;
  z-index: 360;
}
.aria-modal-dock:not(.has-chips) { display: none; }
.aria-modal-chip {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 10px;
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.aria-modal-chip:hover { border-color: var(--border-hover); }
.amc-glyph { font-size: 12px; opacity: 0.9; }
.amc-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: var(--fg-dim);
  font-size: 14px;
}
.amc-x:hover { background: var(--accent-soft); color: var(--fg); }

/* ────────── ⌘K COMMAND PALETTE (graft #3, Odysseus search pattern) ──────────
   Centered pill over a dimmed/blurred backdrop, keyboard-driven fuzzy search
   over surfaces · panes · projects · actions. Selecting a tool surface opens it
   through the modal-over-context layer. Pattern ported from Odysseus
   (pewdiepie-archdaemon/odysseus, MIT) search.js. */
.aria-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above modals (400) + tools drawer */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.aria-palette-backdrop[hidden] { display: none; }
.aria-palette {
  width: min(640px, 92vw);
  max-height: 64vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border);
  overflow: hidden;
}
.aria-palette-input {
  flex: 0 0 auto;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-chrome);
  font-size: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.aria-palette-input::placeholder { color: var(--fg-dim); }
.aria-palette-results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
}
.aria-palette-group {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.aria-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--fg);
  font-size: 13.5px;
}
.aria-palette-item.sel { background: var(--accent-soft); }
.api-glyph {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}
.api-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-label b { color: var(--border-active); font-weight: 700; }
.api-hint,
.api-group { flex: 0 0 auto; color: var(--fg-dim); font-size: 11.5px; }
.api-group {
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
}
.aria-palette-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}
.aria-palette-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 11px;
}
.aria-palette-foot kbd {
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
}

/* ────────── TASK LIBRARY PANEL (graft #4, Odysseus tasks pattern) ──────────
   Browsable/searchable catalog of built-in automations, rendered inline and
   opened through the modal-over-context layer. Pattern ported from Odysseus
   (pewdiepie-archdaemon/odysseus, MIT) tasks.js. */
.aria-tasks {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}
.at-top {
  flex: 0 0 auto;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.at-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.at-count { font-size: 11.5px; font-weight: 500; color: var(--fg-dim); }
.at-sub { margin: 3px 0 10px; font-size: 12px; color: var(--fg-muted); }
.at-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-chrome);
  font-size: 13px;
  padding: 8px 11px;
  outline: none;
}
.at-search:focus { border-color: var(--border-active); }
.at-search::placeholder { color: var(--fg-dim); }
.at-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.at-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  font-size: 11.5px;
  padding: 3px 10px;
  cursor: pointer;
  text-transform: capitalize;
}
.at-chip:hover { border-color: var(--border-hover); }
.at-chip.on { background: var(--accent-soft); color: var(--fg); border-color: transparent; }
.at-chip-n {
  font-size: 10px;
  color: var(--fg-dim);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 0 5px;
}
.at-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.at-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  background: var(--bg-elevate);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.at-card:hover { border-color: var(--border-hover); }
.at-card.at-ran { border-color: var(--border-active); background: var(--accent-soft); }
.at-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--fg-muted);
  font-size: 14px;
}
.at-body { flex: 1 1 auto; min-width: 0; }
.at-head { display: flex; align-items: center; gap: 8px; }
.at-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.at-builtin {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
}
.at-desc { margin: 3px 0 6px; font-size: 12px; color: var(--fg-muted); line-height: 1.4; }
.at-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; }
.at-sched, .at-out, .at-cat {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 7px;
  color: var(--fg-dim);
}
.at-cat { text-transform: capitalize; }
.at-ctl {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.at-run {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--fg-muted);
  font-size: 11.5px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.at-run:hover { border-color: var(--border-hover); color: var(--fg); }
.at-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background 0.15s;
}
.at-toggle.on { background: var(--border-active); border-color: transparent; }
.at-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg);
  transition: left 0.15s;
}
.at-toggle.on .at-knob { left: 18px; background: #fff; }
.at-empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}

/* graft #2 — scout body fills its modal window */
.section.is-modal > .scout-wrap { flex: 1 1 auto; min-height: 0; }