/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg: #0e1116;
  --panel: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  --text-muted: #8b949e;
  --accent: #58a6ff;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 6px;
  --shadow: 0 4px 16px rgba(0,0,0,0.4);

  /* Z-order bands — modals always sit above floating windows.
     See docs/specs/cc_view_overhaul_design_v1.md §E.6 */
  --z-dock: 1;
  --z-float: 100;
  /* Bug #587: the mobile "Update available" tap target must sit ABOVE the
     floating-window band (Z_FLOAT_TOP === 199 in windowing.js) and the toast
     layer (200) so no open panel can half-obstruct it, but BELOW true modals
     (1000) so a confirm dialog still stacks on top. */
  --z-update: 900;
  --z-modal: 1000;

  --status-running-bg: #1a3a1a;
  --status-running-text: #3fb950;
  --status-blocked-bg: #3a2a00;
  --status-blocked-text: #d29922;
  --status-done-bg: #0d2140;
  --status-done-text: #58a6ff;
  --status-killed-bg: #222;
  --status-killed-text: #6e7681;

  --cat-netsuite: #1f6feb;
  --cat-personal: #2ea043;
  --cat-automotive: #d4822a;
  --cat-bridge: #8957e5;
  --cat-business: #1b8074;
  --cat-other: #6e7681;

  --danger: #da3633;
  --danger-hover: #f85149;
  --danger-muted: #9b3535;
  --danger-zombie: #da3633;
}

[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f6f8fa;
  --border: #d0d7de;
  --text: #1f2328;
  --text-muted: #656d76;
  --accent: #0969da;
  --shadow: 0 4px 16px rgba(0,0,0,0.1);

  --status-running-bg: #dafbe1;
  --status-running-text: #1a7f37;
  --status-blocked-bg: #fff8c5;
  --status-blocked-text: #9a6700;
  --status-done-bg: #ddf4ff;
  --status-done-text: #0550ae;
  --status-killed-bg: #f6f8fa;
  --status-killed-text: #57606a;
}

/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent); }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--font-mono); }

/* ─── Utilities ─────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-mono { font-family: var(--font-mono); font-size: 12px; }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: rgba(255,255,255,0.05); }
[data-theme="light"] .btn:hover { background: rgba(0,0,0,0.05); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

.btn-secondary { border-color: var(--border); }

.btn-icon {
  padding: 4px 8px;
  border: none;
  background: transparent;
}
.btn-icon:hover { background: rgba(255,255,255,0.08); border-radius: 4px; }
[data-theme="light"] .btn-icon:hover { background: rgba(0,0,0,0.06); }

.btn-sm { padding: 3px 10px; font-size: 12px; }

/* ─── Header ────────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 44px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rail-toggle-btn {
  font-size: 16px;
  line-height: 1;
}

.app-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: -0.3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
  transition: background 0.3s;
}
.sse-indicator.connected { background: var(--status-running-text); }
.sse-indicator.reconnecting { background: var(--status-blocked-text); }
.sse-indicator.error { background: var(--danger); }

/* ─── Auth screen ───────────────────────────────────────────── */
body:has(#auth-screen:not(.hidden)) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}

.auth-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 48px 56px;
  text-align: center;
  max-width: 400px;
  width: 90%;
}

.auth-box h1 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
}

.auth-sub {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.auth-setup-link {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* register-mode state toggling */
.auth-box .auth-register-section { display: none; }
.auth-box.register-mode .auth-register-section { display: block; }
.auth-box.register-mode .auth-login-section { display: none; }

.auth-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  outline: none;
  margin-bottom: 12px;
  display: block;
}
.auth-input:focus { border-color: var(--accent); }
.auth-input::placeholder { color: var(--text-muted); }
.auth-input-mono { font-family: var(--font-mono); }

.auth-helper-text {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: left;
}

/* ─── App layout ────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 380px) 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-layout.rail-collapsed {
  grid-template-columns: 48px minmax(0, 380px) 1fr;
}

/* ─── Left column ───────────────────────────────────────────── */
.left-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-height: 0;
  overflow: hidden;
}

/* ─── Panel shared ──────────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* ─── Bridge status pill ────────────────────────────────────── */
.bridge-pill {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 1px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
}
.bridge-pill.ok { border-color: var(--status-running-text); color: var(--status-running-text); }
.bridge-pill.err { border-color: var(--danger); color: var(--danger); }

/* ─── Bridge degraded banner (Bug #627) ─────────────────────────
   Shown in the worker panel when /api/workers polling repeatedly fails
   (bridge unreachable / circuit open) so the pane explains it is serving
   last-known state and has backed its cadence off, instead of looking
   frozen. The amber (busy/stale) variant is the softer disposition-cache
   note; the red .degraded variant is the full bridge-degraded state. */
.bridge-degraded-banner {
  margin: 4px 8px 0;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.35;
  color: var(--status-degraded-text, #b83);
  background: color-mix(in srgb, var(--warning, #d29922) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #d29922) 35%, transparent);
}
.bridge-degraded-banner.degraded {
  color: var(--danger);
  background: rgba(218, 54, 51, 0.10);
  border-color: rgba(218, 54, 51, 0.30);
}

/* ─── Auth-degraded banner (Bug #644) ───────────────────────────
   The session-unauthenticated counterpart to the bridge-degraded banner above.
   Created at runtime by auth_degraded.js and appended to <body> (NOT inside
   #app) so it is visible on every surface — main shell, finance route, pop-out,
   mobile — including surfaces that never wired the full-page re-auth handler.
   Fixed to the top of the viewport so a frozen page can no longer look live. */
.cc-auth-degraded-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.35;
  color: #fff;
  background: var(--danger, #da3633);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.cc-auth-degraded-banner.hidden { display: none; }
.cc-auth-degraded-msg { flex: 1; min-width: 0; font-weight: 600; }
.cc-auth-degraded-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger, #da3633);
  background: #fff;
  border: none;
  border-radius: var(--radius, 4px);
  cursor: pointer;
}
.cc-auth-degraded-btn:hover { background: #f3f3f3; }

/* Bug #670: the session re-auth modal's inline failure line. A failed click on
   the full-screen re-auth modal must ALWAYS render a reason, even on a page with
   no #toast-container (the School view). Red, bold, hidden until there is text. */
.session-reauth-error {
  margin: 8px 0 0;
  color: var(--danger, #da3633);
  font-weight: 600;
  font-size: 13px;
}
.session-reauth-error.hidden { display: none; }

/* ─── Worker panel (two-line cards) ─────────────────────────── */
.worker-panel {
  flex: 1;
  min-height: 0;
}

.worker-list-wrap {
  flex: 1;
  overflow-y: auto;
}

.worker-list {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.worker-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(48,54,61,0.5);
  cursor: pointer;
  transition: background 0.1s;
}
.worker-card:hover { background: rgba(255,255,255,0.04); }
[data-theme="light"] .worker-card:hover { background: rgba(0,0,0,0.04); }

/* Line 1: spec label + status / result badges */
.worker-card-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wc-work-item {
  font-size: 10px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(88, 130, 220, 0.15);
  color: rgba(140, 175, 255, 0.9);
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="light"] .wc-work-item {
  background: rgba(37, 99, 235, 0.1);
  color: rgba(37, 99, 235, 0.85);
}
.worker-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.worker-label-empty { color: var(--text-muted); }
.worker-card-line1-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* Action #82: last-activity "day + 24h clock" (e.g. "21 07:46"), pinned to the
   far right of line 1 — the at-a-glance liveness read for the workers pane.
   Tabular numerals so the columns line up down the list. */
.wc-last-activity {
  flex-shrink: 0;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: 2px;
}
/* Task #666: per-worker "open report" button on the card. Small + muted so it
   reads as a secondary affordance next to the status badge. */
.wc-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 10.5px;
  line-height: 1.5;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px;
  background: transparent;
  color: var(--accent, #6ea8ff);
  cursor: pointer;
  white-space: nowrap;
}
.wc-report-btn:hover {
  background: rgba(45,108,223,0.14);
  border-color: var(--accent, #2d6cdf);
}

/* Line 2: compact chip row */
.worker-card-line2 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.wc-chip {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="light"] .wc-chip { background: rgba(0,0,0,0.04); }
/* Task #630: project chip used to be flex:1 1 auto, which stretched it to
   fill all leftover row width — the "big blank gap" right of Project that
   pushed Domain/Model/Duration out without any of them ever using that
   space. Bounded width + ellipsis reclaims the gap for the Billing chip. */
.wc-chip-project {
  flex: 0 1 auto;
  max-width: 96px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.wc-chip-wid {
  font-family: var(--font-mono);
  font-size: 10px;
}
.wc-chip-empty {
  opacity: 0.45;
}
/* Bug #520: an ESTIMATED domain (id-heuristic guess for a project absent from
   the bridge registry) must be visibly distinct from an authoritative one so it
   is never mistaken for the real classification. Dashed border + dimmed italic
   plus a trailing "~" in the markup. */
.wc-chip-domain-est {
  font-style: italic;
  opacity: 0.7;
  border: 1px dashed rgba(210, 153, 34, 0.6);
}

/* Billing chip (Task #630) — always the 2nd chip on the row so flex-wrap
   overflow trims lower-priority chips (Ctx) before this one ever gets cut. */
.wc-chip-billing {
  font-weight: 600;
  font-size: 10px;
  flex-shrink: 0;
}
.wc-chip-billing-max {
  background: rgba(88, 130, 220, 0.15);
  color: rgba(140, 175, 255, 0.9);
}
.wc-chip-billing-api {
  background: rgba(210, 153, 34, 0.15);
  color: rgba(210, 153, 34, 0.9);
}
[data-theme="light"] .wc-chip-billing-max {
  background: rgba(37, 99, 235, 0.1);
  color: rgba(37, 99, 235, 0.85);
}
[data-theme="light"] .wc-chip-billing-api {
  background: rgba(154, 103, 0, 0.12);
  color: rgba(154, 103, 0, 0.85);
}

/* Host chip (worker-host-display) — Aurora (local) vs a remote tenant node
   (hem, future tenant hosts). Local stays neutral; any remote host gets a
   slight tint so "this worker ran somewhere else" is glanceable. */
.wc-chip-host {
  font-weight: 600;
  font-size: 10px;
  flex-shrink: 0;
}
.wc-chip-host-remote {
  background: rgba(163, 113, 247, 0.15);
  color: rgba(188, 155, 255, 0.9);
}
[data-theme="light"] .wc-chip-host-remote {
  background: rgba(124, 58, 237, 0.1);
  color: rgba(109, 40, 217, 0.9);
}

/* Disposition facet chips (Tasks #755/#662) — tri-state, data-driven off
   whatever facets the bridge returns. Only red/green classes exist; a chip
   simply isn't rendered for an absent facet (see workers.js). */
.wc-chip-disposition {
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.wc-chip-disposition-red {
  background: rgba(218, 54, 51, 0.15);
  color: var(--danger-muted);
}
.wc-chip-disposition-green {
  background: rgba(63, 185, 80, 0.15);
  color: var(--status-running-text);
}
/* Action #82 Item 1: ambient staleness marker on a disposition chip when its
   facet map was served last-good from cache (bridge contended). Replaces the
   unactionable amber "bridge busy" banner — the hint lives on the chip it
   describes, only when a chip exists, and vanishes on the next fresh poll. */
.wc-chip-disposition-stale { opacity: 0.72; }
.wc-chip-stale-mark { margin-left: 2px; opacity: 0.85; }

/* Line 3: undisposed-work summary + Kill/resume affordances. Only rendered
   when the card carries >=1 RED disposition facet. */
.worker-card-line3.wc-disposition-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed rgba(218, 54, 51, 0.25);
}
.wc-disposition-summary {
  color: var(--text-muted);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-disposition-btn {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.6;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
}
.wc-disposition-resume {
  border: 1px solid var(--accent, #2d6cdf);
  color: var(--accent, #2d6cdf);
}
.wc-disposition-resume:hover {
  background: rgba(45,108,223,0.14);
}
.wc-disposition-kill {
  border: 1px solid var(--danger-muted);
  color: var(--danger-muted);
}
.wc-disposition-kill:hover {
  background: rgba(218, 54, 51, 0.14);
  color: var(--danger);
  border-color: var(--danger);
}

/* Worker-ID name — line-1 title (bold, accent, monospace) */
.wc-worker-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Work-type tag — small muted uppercase pill derived from label prefix */
.wc-work-type-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(139, 148, 158, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(139, 148, 158, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}
[data-theme="light"] .wc-work-type-tag {
  background: rgba(87, 96, 106, 0.1);
  border-color: rgba(87, 96, 106, 0.2);
}
.wc-chip-ctx {
  font-family: var(--font-mono);
  margin-left: auto;
}

.worker-id { font-family: var(--font-mono); font-size: 11px; }

/* ─── Per-worker token footprint (Task #227) ─────────────────────────────── */
.worker-ctx-cell { line-height: 1.3; }
.worker-ctx-tokens {
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.worker-ctx-cost {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.75;
  margin-left: 3px;
}
.worker-ctx-nil { color: var(--text-muted); opacity: 0.5; }

/* Overloaded warm worker — amber tint + force-fresh hint badge */
.worker-card.worker-overloaded {
  background: rgba(210, 153, 34, 0.07);
}
.worker-card.worker-overloaded:hover {
  background: rgba(210, 153, 34, 0.13);
}
[data-theme="light"] .worker-card.worker-overloaded {
  background: rgba(154, 103, 0, 0.06);
}
[data-theme="light"] .worker-card.worker-overloaded:hover {
  background: rgba(154, 103, 0, 0.12);
}
.badge-fresh-hint {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.7em;
  font-weight: 600;
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.5);
  color: var(--status-blocked-text);
  vertical-align: middle;
  cursor: default;
}

/* ─── Result badge (terminal action: success | gated | error) ─── */
.badge-result {
  border: 1px solid currentColor;
  background: transparent;
}
.badge-result-success { color: var(--status-running-text); }
.badge-result-gated { color: var(--status-blocked-text); }
.badge-result-error { color: var(--danger-muted); }

.empty-row {
  color: var(--text-muted);
  text-align: center;
  padding: 16px;
  font-size: 12px;
}

/* ─── Status badges ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-running { background: var(--status-running-bg); color: var(--status-running-text); }
.badge-blocked { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.badge-done, .badge-done_at_turn_end {
  background: var(--status-done-bg); color: var(--status-done-text);
  border: 1px solid currentColor; background: transparent;
}
.badge-killed, .badge-recycled {
  background: var(--status-killed-bg); color: var(--status-killed-text);
  border: 1px solid currentColor; background: transparent;
}
.badge-crashed {
  border: 1px solid currentColor; background: transparent;
  color: var(--danger-muted);
}
.badge-warm {
  border: 1px solid currentColor; background: transparent;
  color: #a78bfa;
}
@keyframes zombie-pulse {
  from { opacity: 1; }
  to { opacity: 0.55; }
}
.badge-zombie {
  background: var(--danger-zombie);
  color: #fff;
  animation: zombie-pulse 1.2s ease-in-out infinite alternate;
}

.badge-ui-render {
  background: rgba(31, 111, 235, 0.12);
  border: 1px solid var(--cat-netsuite);
  color: var(--cat-netsuite);
  margin-left: 4px;
}

/* ─── Right column ──────────────────────────────────────────── */
.right-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.right-tabs-row {
  display: flex;
  gap: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.right-tab {
  padding: 10px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.12s, border-color 0.12s;
}
.right-tab:hover { color: var(--text); }
.right-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* ─── Projects tab ──────────────────────────────────────────── */
.projects-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.search-input {
  flex: 1;
  padding: 6px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--text-muted); }

.projects-sort {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.projects-sort:hover { color: var(--text); }

.project-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.project-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.project-card-header:hover { background: rgba(255,255,255,0.03); }
[data-theme="light"] .project-card-header:hover { background: rgba(0,0,0,0.03); }

.project-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.worker-count-badge {
  background: var(--status-running-bg);
  color: var(--status-running-text);
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.project-expand {
  border-top: 1px solid var(--border);
  padding: 16px;
}

.project-runbook {
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 12px;
}

.project-runbook h1, .project-runbook h2, .project-runbook h3 {
  margin: 12px 0 6px;
  font-size: 14px;
  color: var(--accent);
}
.project-runbook h1:first-child, .project-runbook h2:first-child { margin-top: 0; }
.project-runbook p { margin-bottom: 6px; }
.project-runbook code { font-family: var(--font-mono); font-size: 12px; background: var(--panel); padding: 1px 4px; border-radius: 3px; }
.project-runbook pre { background: var(--panel); padding: 8px; border-radius: 4px; overflow-x: auto; margin-bottom: 8px; }
.project-runbook pre code { background: transparent; padding: 0; }

.project-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.handoff-list { list-style: none; }
.handoff-list li {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 0;
  color: var(--text-muted);
}

/* ─── Tasks tab ─────────────────────────────────────────────── */
.tasks-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.filter-select {
  padding: 4px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--accent); }

.task-search {
  padding: 5px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  outline: none;
  min-width: 180px;
}
.task-search:focus { border-color: var(--accent); }
.task-search::placeholder { color: var(--text-muted); }

.tasks-table-wrap {
  overflow-x: auto;
}

.tasks-table {
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.tasks-table th {
  text-align: left;
  padding: 7px 24px 7px 10px; /* right padding leaves room for resize handle */
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.tasks-table th:hover { color: var(--text); }
.tasks-table th .sort-arrow { opacity: 0.5; font-size: 10px; margin-left: 4px; }
.tasks-table th.sort-active { color: var(--accent); }
.tasks-table th.sort-active .sort-arrow { opacity: 1; }

/* Column resize handle — positioned absolute within the sticky th */
.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 2;
}
.col-resize-handle:hover,
.col-resize-handle:active {
  background: rgba(88,166,255,0.35);
}

.tasks-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(48,54,61,0.4);
  vertical-align: top;
  overflow: hidden;
  word-break: break-word;
}

/* Title cell wraps naturally; id badge stays inline */
.task-title-cell {
  white-space: normal;
}

/* Project badge in task table */
.task-project-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: rgba(88,166,255,0.12);
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.task-project-cell {
  white-space: normal;
}

.task-row {
  cursor: pointer;
  transition: background 0.1s;
}
.task-row:hover { background: rgba(255,255,255,0.03); }
[data-theme="light"] .task-row:hover { background: rgba(0,0,0,0.03); }
.task-row.expanded { background: rgba(88,166,255,0.04); }

.task-expand-row td {
  padding: 0;
  border-bottom: 1px solid var(--border);
}

.task-inline-editor {
  padding: 16px;
  background: var(--panel);
}

.task-id-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 5px;
  flex-shrink: 0;
  user-select: text;
}

.task-inline-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.task-due-ok { color: var(--text); }
.task-due-warn { color: var(--status-blocked-text); font-weight: 500; }
.task-due-over { color: var(--danger); font-weight: 500; }

.cat-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 20px;
  color: #fff;
  font-weight: 500;
}
.cat-netsuite { background: var(--cat-netsuite); }
.cat-personal { background: var(--cat-personal); }
.cat-automotive { background: var(--cat-automotive); }
.cat-bridge { background: var(--cat-bridge); }
.cat-business { background: var(--cat-business); }
.cat-other { background: var(--cat-other); }

.dep-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 1px;
  cursor: pointer;
  transition: border-color 0.1s;
}
.dep-chip:hover { border-color: var(--accent); color: var(--accent); }

.status-select {
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

/* ─── Task inline editor form ───────────────────────────────── */
.editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: var(--font-sans);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--accent); }

.form-field textarea { min-height: 80px; resize: vertical; }

.form-field.full-width { grid-column: 1 / -1; }

.editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editor-error {
  color: var(--danger);
  font-size: 12px;
}

/* ─── Modals ────────────────────────────────────────────────── */
/* Modals MUST stack above the floating-window band (Z_FLOAT_TOP === 199 in
   windowing.js). A bare `z-index: 100` would fall inside the float band so
   a popped-out window raised to the front (z up to 199) would bury a New
   Bug / New Task / confirm dialog. Use the global modal band (1000) so any
   server-action popup is always interactive on top of every window. */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
}

.modal-content {
  position: relative;
  z-index: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.modal-content.modal-sm { max-width: 420px; }
.modal-content.modal-lg { max-width: 780px; }

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

.modal-header h2 { font-size: 16px; font-weight: 600; }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Worker detail modal body */
.worker-detail-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}

.worker-detail-label {
  color: var(--text-muted);
  font-weight: 500;
}

.worker-zombie-evidence {
  color: var(--danger-zombie);
  font-size: 12px;
}

.worker-stdout {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  max-height: 380px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
}

/* Persona modal */
.persona-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ─── Toasts ────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: var(--shadow);
  pointer-events: auto;
  animation: slide-in 0.2s ease;
  max-width: 360px;
}

.toast.error { border-color: var(--danger); background: #1a0a0a; }
.toast.success { border-color: var(--status-running-text); }
.toast.warning { border-color: var(--status-blocked-text); }

@keyframes slide-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Misc utility ───────────────────────────────────────────── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.tasks-new-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.note-preview {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.multi-select-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.pill-option {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
  user-select: none;
}
.pill-option.selected {
  border-color: var(--accent);
  background: rgba(88,166,255,0.12);
  color: var(--accent);
}

/* ─── Left navigation rail ───────────────────────────────────── */
.left-rail {
  display: flex;
  flex-direction: column;
  width: 240px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: width 0.18s ease;
  padding: 8px 0;
}

.left-rail.collapsed {
  width: 48px;
}

.left-rail.collapsed .rail-section-label,
.left-rail.collapsed .rail-project-name,
.left-rail.collapsed .rail-badge,
.left-rail.collapsed .rail-link span:not(.rail-badge),
.left-rail.collapsed .rail-empty {
  display: none;
}

.rail-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 4px 12px 2px;
  white-space: nowrap;
  overflow: hidden;
}

.rail-projects {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  /* Bug #193: with ~55 registered projects the rendered list is taller than
     the previous 800px section-body cap, and the body had overflow:hidden.
     Cap the list to a viewport-relative height and let it scroll inside the
     expanded section so every project is reachable. */
  max-height: 60vh;
  overflow-y: auto;
}

.rail-project-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 4px;
  transition: background 0.1s;
  overflow: hidden;
  white-space: nowrap;
  min-height: 28px;
}

.rail-project-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .rail-project-item:hover { background: rgba(0,0,0,0.05); }
.rail-project-item.selected {
  background: rgba(88,166,255,0.14);
  color: var(--accent);
}

.rail-project-name {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Projects pop-out list (Bug #193 + parity with tasks/bugs/alerts pop-outs).
   The pop-out shows every registered project in one searchable list, mirroring
   the layout of view-tasks: a toolbar with a search input + a scrolling list
   below. Reuses .rail-project-item row styles so submenu and pop-out rows
   look identical. */
#tab-projects-list {
  display: flex;
  flex-direction: column;
  /* override the generic .tab-content overflow so the inner scroll area owns
     scrolling; the toolbar (search input + count) stays pinned at the top. */
  overflow: hidden;
}
.projects-list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.projects-list-search {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}
.projects-list-search:focus {
  border-color: var(--accent);
}
.projects-list-count {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.projects-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 12px;
}
.projects-list-empty {
  padding: 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.status-dot, .health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.rail-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 12px;
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  margin: 0 4px;
  transition: background 0.1s, color 0.1s;
}

.rail-link:hover { background: rgba(255,255,255,0.06); color: var(--text); text-decoration: none; }
[data-theme="light"] .rail-link:hover { background: rgba(0,0,0,0.05); }
.rail-link.active { color: var(--accent); }

.rail-badge {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.rail-empty {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Rail sections (Task #313 L2) ───────────────────────────── */
.rail-section {
  display: flex;
  flex-direction: column;
  margin: 0 0 2px 0;
}

.rail-section-header {
  /* Reuses .rail-link styles via class composition. Header holds the
     toggle glyph, a title, an optional badge, and a pop-out shortcut. */
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.rail-section-toggle {
  font-size: 10px;
  width: 10px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.12s;
}

.rail-section-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-section-popout {
  opacity: 0;
  font-size: 11px;
  color: var(--text-muted);
  transition: opacity 0.12s, color 0.12s;
  margin-left: 4px;
}
.rail-section-header:hover .rail-section-popout { opacity: 1; }
.rail-section-popout:hover { color: var(--text); }

/* Accordion body — collapsed by default, max-height transitions on expand. */
.rail-section-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
  padding: 0 4px;
}
.rail-section.rail-section-expanded > .rail-section-body {
  /* Bug #193: the prior 800px cap clipped long lists (e.g. ~55 projects).
     Use a viewport-relative cap so the body grows with the screen while
     still gating the accordion transition; the inner list owns its own
     overflow-y so the scrollbar lands on the rows, not the section frame. */
  max-height: 70vh;
}

.rail-section-summary {
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.rail-summary-line {
  color: var(--text);
  line-height: 1.3;
}
.rail-summary-open {
  align-self: flex-start;
  font-size: 11px;
  padding: 2px 8px;
}

/* Wrapping container when a rail-section body shows the Projects-style
   inline list (rail_list.js). Padding aligns the rows with the rail edge
   the same way `rail-projects` does.

   Bug #200: tasks/bugs/alerts rollups grow tall enough (Unclassified +
   per-domain + per-project groups) to overflow the 70vh accordion-body
   cap. Mirror the `.rail-projects` pattern from Bug #193: keep the body's
   own max-height (drives the accordion transition) and let this inner
   wrap own its own scroll so every row stays reachable. */
.rail-section-list-wrap {
  padding: 4px 0 6px;
  gap: 0;
  max-height: 65vh;
  overflow-y: auto;
}
.rail-record-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rail-record-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
  font-size: 12px;
  min-height: 24px;
  white-space: nowrap;
  overflow: hidden;
}
.rail-record-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .rail-record-item:hover { background: rgba(0,0,0,0.05); }
.rail-record-pri {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.rl-pri-high { background: #dc2626; }
.rl-pri-med  { background: #d97706; }
.rl-pri-low  { background: #6b7280; }
.rl-pri-none { background: transparent; border: 1px solid var(--border); }

.rail-record-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.rail-record-status {
  font-size: 11px;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Project chip on Tasks/Bugs/Alerts/Workers/Conductors rail rows. Sits
   between the id and the status; gracefully truncates on narrow rails. */
.rail-record-project {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

/* Workers / Conductors rail rows: no priority pip, slightly different
   spacing. The shared .rail-record-item box-model stays unchanged so the
   accordion height is consistent across all rail sections. */
.rail-record-item-worker .rail-record-id,
.rail-record-item-conductor .rail-record-id {
  font-weight: 600;
  color: var(--text);
}
.rail-record-item-clickable {
  cursor: pointer;
}
.conductor-status-fresh .rail-record-status { color: var(--status-running-text); }
/* Spec item 8 (2026-06-14): conductor rows surface time-since-last-activity
   in place of a status badge. Colored by staleness via the .conductor-
   status-* parent class so the row at-a-glance still telegraphs health. */
.rail-record-conductor-activity {
  flex: 0 0 auto;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}
.conductor-status-fresh .rail-record-conductor-activity { color: var(--status-running-text); }
.conductor-status-idle  .rail-record-conductor-activity { color: var(--text); }
.conductor-status-stale .rail-record-conductor-activity { color: var(--status-blocked-text); }
.conductor-status-ghost .rail-record-conductor-activity { color: var(--text-muted); }

/* Task #328 — per-project rollup in Tasks/Bugs/Alerts rail. Each row is
   project + open-count; clicking drills into the section view filtered
   to that project. */
.rail-rollup-item {
  cursor: pointer;
}
.rail-rollup-item .rail-record-project {
  max-width: none;
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 500;
  padding: 0;
}
.rail-rollup-count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 8px;
  min-width: 28px;
  text-align: center;
}
.conductor-status-idle  .rail-record-status { color: var(--text); }
.conductor-status-stale .rail-record-status { color: var(--status-blocked-text); }
.conductor-status-ghost .rail-record-status { color: var(--text-muted); }

/* Record-detail popup (detail_window.js) */
.record-detail {
  padding: 10px 12px;
}
.record-detail-title {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.record-detail-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}
.record-detail-status {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.record-detail-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
  margin: 0;
}
.record-detail-fields dt {
  color: var(--text-muted);
  font-weight: 500;
}
.record-detail-fields dd {
  margin: 0;
  word-break: break-word;
}
.record-detail-pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Collapsed-rail interaction with accordion: hide bodies entirely so
   the 48px-wide rail stays clean and clickable. */
.left-rail.collapsed .rail-section-body,
.left-rail.collapsed .rail-section-toggle,
.left-rail.collapsed .rail-section-title,
.left-rail.collapsed .rail-section-popout {
  display: none;
}

/* ─── Main content views ─────────────────────────────────────── */
.main-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.right-col {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* ─── Status badge (.health-badge kept for backward compat) ─── */
.status-badge, .health-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid;
  letter-spacing: 0.3px;
}

/* ─── Project detail panel ───────────────────────────────────── */
.project-detail {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-detail-loading,
.project-detail-error {
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.pd-header-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pd-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pd-project-name {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent);
}

.pd-summary {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.pd-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}

.pd-meta-label {
  font-weight: 600;
  color: var(--text-muted);
}

.pd-meta-sep {
  color: var(--border);
  margin: 0 2px;
}

.pd-env {
  font-size: 11px;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* ─── Domain chips ───────────────────────────────────────────── */
.domain-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(88,166,255,0.12);
  color: var(--accent);
  border: 1px solid rgba(88,166,255,0.25);
}

/* ─── Artifact launcher chips (Task #238) ────────────────────── */
.pd-artifact-row {
  flex-wrap: wrap;
  gap: 4px;
}
.pd-artifact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.artifact-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(34,197,94,0.1);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.artifact-chip:hover {
  background: rgba(34,197,94,0.2);
  border-color: rgba(34,197,94,0.5);
  text-decoration: none;
}

/* ─── Detail sections ────────────────────────────────────────── */
.pd-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.pd-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.pd-empty {
  padding: 10px 12px;
  font-size: 12px;
  margin: 0;
}

/* ─── Next action ────────────────────────────────────────────── */
.pd-next-action {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pd-next-action-text {
  margin: 0;
  font-size: 13px;
}

/* ─── Bug / Action lists ─────────────────────────────────────── */
.pd-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pd-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(48,54,61,0.4);
  font-size: 12px;
}

.pd-list-item:last-child { border-bottom: none; }

.pd-item-title {
  flex: 1;
  word-break: break-word;
}

.pd-close-btn {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 11px;
}

/* ─── Severity / priority badges ─────────────────────────────── */
.severity-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.sev-high { background: rgba(220,38,38,0.15); color: #f87171; }
.sev-med  { background: rgba(217,119,6,0.15); color: #fbbf24; }
.sev-low  { background: rgba(107,114,128,0.15); color: #9ca3af; }

/* ─── Task sub-panel ─────────────────────────────────────────── */
.pd-tasks-toggle {
  cursor: pointer;
  user-select: none;
}

.pd-tasks-toggle:hover { background: rgba(255,255,255,0.04); }
[data-theme="light"] .pd-tasks-toggle:hover { background: rgba(0,0,0,0.04); }

.pd-toggle-icon {
  color: var(--text-muted);
  font-size: 11px;
}

.pd-task-list {
  list-style: none;
  padding: 8px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pd-task-item {
  display: block;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}

.pd-task-item.pd-task-expanded {
  border-color: var(--border-color, rgba(255,255,255,0.1));
  background: rgba(255,255,255,0.02);
}
[data-theme="light"] .pd-task-item.pd-task-expanded {
  background: rgba(0,0,0,0.02);
}

.pd-task-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}
.pd-task-summary:hover {
  background: rgba(255,255,255,0.05);
}
[data-theme="light"] .pd-task-summary:hover {
  background: rgba(0,0,0,0.04);
}

.pd-task-toggle {
  font-size: 10px;
  color: var(--text-muted);
  width: 12px;
  flex-shrink: 0;
}

.pd-task-title {
  flex: 1;
  white-space: normal;
  word-break: break-word;
}

/* Accordion detail — collapsed by default, expands via parent class */
.pd-task-detail {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}
.pd-task-item.pd-task-expanded .pd-task-detail {
  max-height: 600px;
}

.pd-task-detail-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 3px 10px;
  padding: 6px 8px 8px 28px;
  align-items: start;
}

.pd-td-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 2px;
}

.pd-td-value {
  font-size: 12px;
  line-height: 1.4;
}

.pd-td-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.pd-td-code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
}
[data-theme="light"] .pd-td-code {
  background: rgba(0,0,0,0.06);
}

.pd-td-priority-high   { color: #f87171; font-weight: 600; }
.pd-td-priority-medium { color: #fbbf24; }
.pd-td-priority-low    { color: var(--text-muted); }

.task-status-chip {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  min-width: 70px;
}

/* ─── Handoff list (legacy — kept for backward compat) ──────── */
.pd-handoff-list {
  list-style: none;
  padding: 8px 12px;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ─── Handoff timeline ───────────────────────────────────────── */
.pd-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.pd-timeline-entry {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
}

.pd-timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.pd-timeline-type {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--accent-blue);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
}

.pd-timeline-date {
  font-size: 11px;
  color: var(--text-muted);
}

.pd-timeline-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  word-break: break-word;
}

.pd-timeline-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 400px;
}

.btn-xs {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ─── Project description ────────────────────────────────────── */
.pd-description {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 6px;
  line-height: 1.5;
}

/* ─── Form helpers ───────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
}

.form-textarea { resize: vertical; }

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-row .form-select { flex: 1; }

.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.pd-edit-btn { margin-left: auto; }

/* ─── Runbook content ────────────────────────────────────────── */
.runbook-content {
  font-size: 12px;
  line-height: 1.6;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

/* ─── Column-config dropdown (Task #313 L3) ─────────────────── */
.col-config-menu {
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 0;
  font-size: 13px;
  max-height: 70vh;
  overflow-y: auto;
}
.col-config-menu .ccm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 6px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.col-config-menu .ccm-reset {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
}
.col-config-menu .ccm-reset:hover { text-decoration: underline; }
.col-config-menu .ccm-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.col-config-menu .ccm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  gap: 8px;
}
.col-config-menu .ccm-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="light"] .col-config-menu .ccm-item:hover { background: rgba(0,0,0,0.04); }
.col-config-menu .ccm-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  user-select: none;
}
.col-config-menu .ccm-reorder { display: flex; gap: 2px; }
.col-config-menu .ccm-reorder button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
}
.col-config-menu .ccm-reorder button:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
[data-theme="light"] .col-config-menu .ccm-reorder button:hover:not(:disabled) { background: rgba(0,0,0,0.06); }
.col-config-menu .ccm-reorder button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ─── Windowing manager (Task #313 L1, Task #345 dock-to-submenu) ──────── */
/* Tri-state: docked-in-slot (default), floating (overlay), hidden (stashed
   into the rail submenu). `window-hidden` wins over everything else so a
   "dock" action immediately removes the window from the screen, regardless
   of its previous floating coordinates — no bottom-left ghost widget. */
.window-hidden {
  display: none !important;
}

/* Docked = lives in its grid slot; default behaviour. */
.window-docked {
  position: relative;
  z-index: var(--z-dock);
}
.window-docked > .window-resize-handle {
  display: none;
}

/* view-popout-header is the drag handle when a right-col view is popped
   out. Hide it while docked — the dock-mode view doesn't need a redundant
   title strip. Shown automatically when the parent flips to floating. */
.window-docked > .view-popout-header { display: none; }
.window-floating > .view-popout-header { display: flex; }

/* Collapsed (Task #313 L4) — only the header shows; everything else hides.
   Works for docked and floating windows alike. */
.window-collapsed > *:not(.panel-header):not(.window-header):not(.window-resize-handle) {
  display: none !important;
}
.window-collapsed.window-floating {
  /* While collapsed-and-floating, ignore height so the window shrinks to
     just the header. */
  height: auto !important;
  min-height: 0 !important;
}
.window-collapsed > .window-resize-handle { display: none; }

/* Floating = absolutely positioned overlay. JS sets left/top/width/height. */
.window-floating {
  position: fixed;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.window-floating > .panel-header,
.window-floating > .window-header {
  cursor: move;
  user-select: none;
}

/* 8-direction resize handles. Edges are thin strips along each side; corners
   are small squares stacked on top so they win the cursor at the very edge. */
.window-resize-handle {
  position: absolute;
  z-index: 1;
}
.window-resize-n { top: 0; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.window-resize-s { bottom: 0; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.window-resize-e { top: 6px; right: 0; bottom: 6px; width: 6px; cursor: ew-resize; }
.window-resize-w { top: 6px; left: 0; bottom: 6px; width: 6px; cursor: ew-resize; }
.window-resize-ne { top: 0; right: 0; width: 10px; height: 10px; cursor: nesw-resize; z-index: 2; }
.window-resize-nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nwse-resize; z-index: 2; }
.window-resize-se {
  bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; z-index: 2;
  /* Visible diagonal grip lines — only on the SE corner since this is the
     "primary" affordance most users will reach for. */
  background:
    linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      var(--text-muted) 6px,
      var(--text-muted) 7px,
      transparent 7px,
      transparent 10px,
      var(--text-muted) 10px,
      var(--text-muted) 11px,
      transparent 11px
    );
  opacity: 0.6;
}
.window-resize-se:hover { opacity: 1; }
.window-resize-sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: nesw-resize; z-index: 2; }

/* Action band — small button cluster appended to a panel-header.
   Holds pop-out + reset (and in L4 will also hold collapse). */
.window-action-band {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}
.window-action-band .btn-icon {
  font-size: 12px;
  padding: 2px 6px;
  line-height: 1;
  color: var(--text-muted);
}
.window-action-band .btn-icon:hover { color: var(--text); }

/* ─── Mobile responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Windowing disabled on mobile — see Task #313 L5. Drag handles,
     resize handles, and pop-out controls all stay hidden so Task #262
     Workers-first tiers keep their layout discipline. */
  .window-floating {
    position: static !important;
    box-shadow: none;
    width: auto !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
    z-index: var(--z-dock) !important;
  }
  .window-resize-handle,
  .window-action-band { display: none !important; }
  .window-floating > .panel-header,
  .window-floating > .window-header { cursor: default; }

  /* Suppress worker detail modal on mobile (read-only view) */
  #modal-worker { display: none !important; }

  /* Bug #539: additive panel-platform windows (js/panels/cc/*, e.g. cc-mail)
     are floating-only by design — their content has no docked/in-flow slot.
     The .window-floating rule above only strips POSITIONING, so without this
     the panel still renders as a static block wherever panel_host.js appended
     it in .app-layout ("fixed in place", not part of the mobile nav). Mobile
     access to these panels goes through the mc-home two-column card grid
     (mobile_control.js) instead, which fetches the same API directly. */
  .panel-module-window { display: none !important; }

  .app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .left-rail {
    position: fixed;
    top: 44px;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }

  .left-rail.mobile-open {
    transform: translateX(0);
  }

  /* Bug #585: the desktop Workers+Conductors split (.left-col) is desktop-
     only chrome. On a phone it must NEVER paint — not even the pre-init
     first frame Steven watched for 5-10s — so it is display:none by DEFAULT,
     with no JS class required. The live mobile Workers surface is the
     mc-home Workers card + drill-in (mobile_control.js), not this split.
     Left as inert DOM for now; the Bug #585 handoff proposes splitting it
     out of index.html entirely in a follow-up. (.mobile-workers-hidden is
     no longer needed — the base is already none — but switchView may still
     toggle it harmlessly.) */
  .left-col {
    display: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
  }

  /* Bug #585: the right-col IS the phone content area, shown by DEFAULT so
     first paint is the mc-home card grid (its only non-hidden child at
     boot). switchView still toggles which .main-view inside it is visible;
     .mobile-tab-active is now a redundant confirmation, not the mechanism
     that reveals the surface. */
  .right-col {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    border-left: none;
  }

  .right-col.mobile-tab-active {
    display: flex;
  }

  /* Bug #190: hamburger trigger MUST be a real tap target on phones. Apple
     HIG floor is 44px; spec floor is 40px. Prior 4×8 padding rendered the
     glyph at ~24×28px, which is below the noise on thumb taps — the
     recurring "menu doesn't open" symptom was the user landing on the
     adjacent SSE indicator / app title instead of the button. */
  .rail-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 20px;
  }

  /* Column resize handles hidden on mobile (Task #313 L5). The Cols
     dropdown menu STAYS available — hiding columns is exactly how a
     wide table fits a narrow screen. */
  .tasks-table .col-resize-handle { display: none; }

  /* Bug #190: the rail expansion stack (Tasks/Bugs/Alerts/Workers/Conductors
     rollup rows from #342) MUST be reachable on phone. Previously the
     accordion was hard-disabled on mobile (Task #313 L5) and every body
     except Projects was force-hidden — which meant the #342 drill-through
     was rendered into the DOM but invisible. Restore visibility for every
     section that owns a rail-list body so drill-through actually works.
     Section headers continue to behave as plain navigation links on tap
     (see app.js bindRailSections); the body rows handle the filtered
     drill-in via _bindRollupClicks in rail_list.js. */
  .left-rail .rail-section .rail-section-body {
    max-height: none;
    display: block;
  }
  /* The dedicated section-toggle (▸/▾) and popout (⤢) chrome stays hidden:
     mobile rail is always-expanded, so a toggle would be confusing, and
     popout windows are disabled on mobile per Task #313 L5. */
  .left-rail .rail-section-toggle,
  .left-rail .rail-section-popout {
    display: none;
  }

  /* Bug #190: rail rows are the primary drill-through target on phone.
     Pump them to a real ≥40px hit target so a thumb tap on a rollup row
     (e.g. "command_center (4)") doesn't slide off into the neighbouring
     row. The desktop min-height stays small (24px) for information density. */
  .rail-record-item {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .rail-rollup-item .rail-record-project { font-size: 13px; }

  .tab-content { padding: 10px; }
  .editor-grid { grid-template-columns: 1fr; }
}

/* ─── Service status — shared dot + new menu/pill/table (2026-06-13) ───
   The card-based top bar was replaced by a menu-button + health-pill in
   the header and a table modal. The .service-dot rules are kept because
   both the menu rows and the table rows reuse them; .watchdog-* stays
   because the per-target log modal still renders the swatch. */

.service-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status-killed-text);
  box-shadow: 0 0 0 2px transparent;
  flex-shrink: 0;
}
.service-dot[data-status="HEALTHY"]  { background: var(--status-running-text); }
.service-dot[data-status="DEGRADED"] { background: var(--status-blocked-text); }
.service-dot[data-status="DOWN"]     { background: var(--danger); }
.service-dot[data-status="UNKNOWN"]  { background: var(--status-killed-text); }
/* 2026-08-21 — OFF: a service turned off on purpose (Conductor v2). Neutral
   gray like STOPPED/UNKNOWN, never red — off by choice is a resting state. */
.service-dot[data-status="OFF"]      { background: var(--status-killed-text); }
/* Task #874 — Art Engine (HEM) status vocabulary. RUNNING reuses the healthy
   green; STOPPED is neutral gray (default-off is normal, NOT a fault); hem
   UNREACHABLE is amber (a real but non-critical degraded signal). */
.service-dot[data-status="RUNNING"]     { background: var(--status-running-text); }
.service-dot[data-status="STOPPED"]     { background: var(--status-killed-text); }
.service-dot[data-status="UNREACHABLE"] { background: var(--status-blocked-text); }

/* Services menu button + health rollup pill in the top bar */
.svc-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.svc-menu-glyph {
  font-size: 13px;
  line-height: 1;
}
.svc-menu-label {
  font-size: 12px;
}

.service-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  white-space: nowrap;
  cursor: default;
}
.service-health-pill.svc-health-healthy {
  color: var(--status-running-text);
  border-color: var(--status-running-text);
}
.service-health-pill.svc-health-degraded {
  color: var(--status-blocked-text);
  border-color: var(--status-blocked-text);
}
.service-health-pill.svc-health-down {
  color: var(--danger);
  border-color: var(--danger);
}
.service-health-pill.svc-health-unknown {
  color: var(--text-muted);
}

/* Dropdown rows in the portal-rendered menu (reuses .col-config-menu shell) */
.svc-menu-portal { min-width: 260px; }
.svc-menu-portal .svc-menu-open-table {
  font-size: 11px;
}
.svc-menu-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The dropdown's own explicit ✕ close — desktop hides it (the menu-button
   toggle and outside-click both work fine), mobile shows it so the dropdown
   is always dismissable on touch even if the menu-button hit target is
   buried behind a crowded header row. */
.svc-menu-close {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
}
.svc-menu-close:hover { color: var(--text); }
.svc-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  font-size: 12px;
}
.svc-menu-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-menu-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.svc-menu-url {
  font-size: 12px;
  color: var(--accent, var(--text));
  text-decoration: none;
}
.svc-menu-url:hover { text-decoration: underline; }

/* ─── Services table window (rehomed 2026-06-13 follow-up) ───
   Identical pliable-window behaviour as Tasks: the windowing manager owns
   docked/floating/hidden + drag + resize. Local styles only cover the table
   cell layout and a sensible default body region.

   2026-06-14 clip-on-shrink: table-layout: fixed + nowrap/overflow:hidden so
   that as the window narrows, cells truncate at their column boundary
   instead of wrapping onto a second line. Rows stay one line tall at every
   width. (Spec Item 1, 2026-06-14.) */
.services-table { width: 100%; table-layout: fixed; }
.services-table th,
.services-table td {
  font-size: 12px;
  padding: 6px 8px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.services-table-url a {
  color: var(--accent, var(--text));
  text-decoration: none;
}
.services-table-url a:hover { text-decoration: underline; }
.services-table-url-sep {
  color: var(--text-muted);
  margin: 0 4px;
}
.services-table-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
/* Sub-note in the watchdog status cell: shows "N/M targets degraded" when
   the watchdog supervisor is cycling but one or more watched targets are down.
   Block display so it sits below the status chip without adding a new column. */
.svc-watchdog-targets-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--status-blocked-text, var(--danger, #e55));
  margin-top: 2px;
  white-space: nowrap;
}
/* Bug #320: age annotation in the STATUS cell when showing watchdog-fallback
   status (live probe unavailable). Block so it sits below the status chip.
   .is-stale signals the watchdog cycle has gone quiet (> 12 min). */
.svc-status-watchdog-age {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted, #888);
  margin-top: 2px;
  white-space: nowrap;
}
.svc-status-watchdog-age.is-stale {
  color: var(--status-degraded-text, #b83);
}
/* Bug #333 fix #3: per-row data-age chip ("Ns ago"), inline next to uptime.
   Gray while mildly stale (>10s); red .is-stale past the ~35s ceiling so a
   wedged refresh no longer passes for live data. */
.svc-freshness {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted, #888);
  margin-left: 6px;
  white-space: nowrap;
}
.svc-freshness.is-stale {
  color: var(--status-blocked-text, var(--danger, #e55));
}
/* Bug #320: "healthy · 40s ago" annotation in the watchdog toggle cell.
   Block so it sits below the toggle switch without widening the column. */
.watchdog-last-status {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted, #888);
  margin-top: 3px;
  white-space: nowrap;
  text-align: center;
}
.watchdog-last-status.is-stale {
  color: var(--status-degraded-text, #b83);
}
/* Task #510: UT-specific status sub-notes — origin probe verdict + deployed
   build chip. Rendered under the status label in the same cell so the
   split-probe signal (e2e vs origin) is visible without another column. */
.svc-ut-subnotes {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}
.svc-ut-subnotes > * + * { margin-left: 6px; }
.svc-ut-origin-ok   { color: var(--status-healthy-text, #4a8); }
.svc-ut-origin-warn { color: var(--status-degraded-text, #b83); }
.svc-ut-origin-bad  { color: var(--status-blocked-text, var(--danger, #e55)); }
.svc-ut-build-chip {
  color: var(--text-muted, #888);
  opacity: 0.85;
}
.services-table-port { white-space: nowrap; }
.services-table-uptime {
  white-space: nowrap;
}
/* 2026-06-14 (Spec Item 2): actions cell now holds a single "Actions" button
   that pops a dropdown menu rendered to <body> (escapes the row's
   overflow:hidden). Keep one-line layout and align right. */
.services-table-actions {
  text-align: right;
  white-space: nowrap;
}
.services-table-actions .btn { white-space: nowrap; }
.services-table-actions-th { text-align: right; }
.svc-actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.svc-actions-caret { font-size: 10px; line-height: 1; }
/* Portal menu reusing the .col-config-menu shell (same look as the services
   top-bar dropdown). The action items are full-width buttons styled like
   ccm-item rows. */
.svc-row-actions-menu { min-width: 140px; }
.svc-row-actions-menu .svc-row-action {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  padding: 6px 12px;
  font-size: 13px;
}
.svc-row-actions-menu .svc-row-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .svc-row-actions-menu .svc-row-action:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}
.svc-row-actions-menu .svc-row-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* 2026-06-13 column-width rebalance: reclaim horizontal space from
   Status / Port / Uptime (over-wide defaults) and route it to URL +
   Actions, which now hold multi-link content and a 3-button cluster.
   Widths are tunable defaults — Steven will eyeball and adjust.
   2026-06-14: table-layout:fixed (Item 1) honors `width` only, not
   `min-width`. URL keeps no width so it absorbs all remaining space; the
   Actions column is now ~90px since a single "Actions" button lives there
   (Item 2). */
.services-table th.services-table-th-name,
.services-table td.services-table-cell-name     { width: 160px; }
.services-table th.services-table-th-status     { width: 92px; }
.services-table th.services-table-th-port       { width: 58px; text-align: right; }
.services-table-port                            { text-align: right; }
/* Bug #257: widened from 72px so the watchdog row's "last check Xm ago"
   face (Bug #457) isn't clipped to "last chec" under overflow:hidden. */
.services-table th.services-table-th-uptime,
.services-table td.services-table-uptime         { width: 140px; }
.services-table th.services-table-th-watchdog   { width: 120px; text-align: center; }
.services-table-cell-watchdog {
  width: 120px;
  text-align: center;
}
.services-table-actions-th  { width: 90px; }
.services-table-actions     { width: 90px; }
/* Watchdog toggle inside the table cell: center it and trim default left
   gap so the slider sits flush with the header column. */
.services-table-cell-watchdog .watchdog-toggle {
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.services-table-cell-watchdog .watchdog-state-text {
  display: none;
}
/* When floating, the tab-content needs to fill the window AND scroll on
   overflow — long action buttons / long URLs would otherwise spill out of
   the fixed-height window. Docked-in-slot inherits the normal main-view
   layout from .tab-content. */
#view-service-table.window-floating > .tab-content {
  flex: 1 1 auto;
  overflow: auto;
}
#view-service-table > .tab-content { padding: 8px 12px; }
/* Explicit ✕ close button in the panel-header. On desktop it sits next to
   the windowing action-band (collapse / dock / reset). On mobile the action
   band is hidden, so the ✕ is the only close affordance — that path is what
   the spec FIX A "close/reopen via the services menu button" requires for
   touch users. */
.service-table-close {
  margin-left: auto;
  margin-right: 4px;
}
/* By default `.view-popout-header` is hidden while the parent is in the
   docked-in-slot state (see `.window-docked > .view-popout-header` rule above)
   — that's correct for views the rail navigates to (Tasks, Bugs, etc.) where
   the section header in the rail acts as a redundant title. The services
   table has NO rail entry, so without this override the panel-header (and
   its ✕ close button) would be invisible on mobile, leaving no way to close
   the window after opening it. */
#view-service-table.window-docked > .view-popout-header { display: flex; }

/* Bug #195 (2026-06-19 follow-up): keep the costs / preferences / session-log
   panel-header visible in docked state too. These surfaces are reachable from
   the rail, but the user expects the standard window control set (action band
   + close ✕) to be available WHEREVER the surface is rendered — not only after
   they undock via the rail ⤢ icon. The action band gets installed by
   windowing.js into this same header; with the header visible in docked
   state, the dock-to-submenu, collapse, reset and explicit ✕ controls are
   reachable from both the docked-in-slot view AND the floating window. */
#view-costs.window-docked > .view-popout-header,
#view-preferences.window-docked > .view-popout-header,
#view-session-log.window-docked > .view-popout-header { display: flex; }

/* Explicit ✕ close button in the panel-header. Mirrors the services-table
   pattern — visible across docked + floating states, sits right of the
   windowing action-band. */
.view-popout-close { margin-left: 4px; }

/* Preserved: watchdog-toggle / -slider / -state-text rules are still used by
   the per-target log modal (Logs button rendering). The per-card surface is
   gone but the underlying renderers stay. */
.watchdog-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.watchdog-toggle .watchdog-switch {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.watchdog-switch-slider {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 14px;
  background: var(--status-killed-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  flex-shrink: 0;
}
.watchdog-switch-slider::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--text);
  border-radius: 50%;
  transition: transform 0.18s ease;
}
.watchdog-switch:checked + .watchdog-switch-slider {
  background: var(--status-running-text);
  border-color: var(--status-running-text);
}
.watchdog-switch:checked + .watchdog-switch-slider::after {
  transform: translateX(12px);
  background: var(--panel);
}
.watchdog-switch:focus-visible + .watchdog-switch-slider {
  outline: 2px solid var(--accent, #4a90e2);
  outline-offset: 1px;
}
.watchdog-switch:disabled + .watchdog-switch-slider {
  opacity: 0.55;
  cursor: wait;
}

.watchdog-toggle-label {
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
}

.watchdog-state-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex: 1 1 auto;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watchdog-state-text[data-health="HEALTHY"]  { color: var(--status-running-text); }
.watchdog-state-text[data-health="DEGRADED"] { color: var(--status-blocked-text); }
.watchdog-state-text[data-health="DOWN"]     { color: var(--danger); }

/* Mobile: hide the verbose label in the header button; keep the glyph + pill */
@media (max-width: 768px) {
  .svc-menu-label { display: none; }

  /* 2026-06-13 follow-up fix (FIX B). The dropdown was being portal-mounted
     with `position: fixed; right: …; min-width: 260px`, anchored to the
     services button's bottom-right. On a 360–414px viewport the menu button
     sits in the middle of a crowded header row, so `right = vw - btn.right`
     could be ~150px, which pushed a 260px-wide menu's LEFT edge off-screen
     and clipped the rows + the "Open table" affordance. Worse, the user had
     no obvious way to dismiss it because the visible portion didn't include
     the menu button anymore.
     The fix: at <=768px we override the inline JS-set `right` + `min-width`
     with a full-width sheet anchored to both viewport edges, capped by a
     scrollable max-height. The dropdown now spans 8px margins left + right,
     wraps cleanly, and the explicit ✕ button in its header (services.js
     `.svc-menu-close`) becomes visible to provide an always-tappable close
     even if `mousedown` outside-click on touch misses the button. */
  .svc-menu-portal {
    left: 8px !important;
    right: 8px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 64px);
  }
  .svc-menu-close { display: inline-flex; align-items: center; justify-content: center; }
}

/* ─── Shell pliable window (Task #412, 2026-06-19) ─────────────────
   Shell is now a windowed peer (data-window-id="shell") rather than a
   .modal.modal-fullscreen overlay. The .shell-body box fills its parent
   via flex; #shell-terminal fills .shell-body with width/height:100%.

   Bug #225/#227 (2026-06-20): the `flex:1 1 auto; min-height:0` baseline
   moved out of the window-state-specific selectors and into the bare
   `.shell-body` rule below so the terminal is GUARANTEED non-zero height
   regardless of which `.window-*` class is on the parent at any given
   moment. The state-specific rules are kept (no-op-equivalent now) for
   documentation that both states share the same body layout. */
/* Service-table pattern: keep the panel-header visible in docked-in-slot
   state too, since there's no rail entry to surface the Shell. The top-bar
   Shell button calls popOut(); without this override the panel-header (and
   its ✕ close button + windowing action-band) would be invisible on the
   docked path. */
#view-shell.window-docked > .view-popout-header { display: flex; }

.shell-header-actions { display: flex; gap: 8px; align-items: center; }
.shell-window-close { margin-left: auto; margin-right: 4px; }

/* Mobile: keep the toolbar buttons large enough to tap reliably (≥40px hit
   target) and let them stay in the header row when the screen is narrow.
   Without this, .btn-sm renders at ~24px tall and is hard to hit on a
   phone — and Bug #188 (no way to copy shell text on mobile) explicitly
   requires the Copy button to be reachable on a phone-width viewport.

   2026-06-14 (submenu/CSS/shell brief): grow the surface to the full
   phone viewport so the terminal has room to render at a useful font
   size and the on-screen keyboard doesn't compress the prompt out of
   view. The font-size:16px on the terminal input prevents iOS Safari's
   "zoom to focused input" behavior — that was making the terminal
   unusable on iPhone whenever the soft keyboard came up.

   Task #412: at <=768px windowing.js disables floating entirely (panels
   render statically), so we just style the docked surface as a full-
   viewport pane. */
@media (max-width: 768px) {
  .shell-header-actions { flex-wrap: wrap; gap: 6px; }
  .shell-header-actions .btn-sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
  #view-shell {
    width: 100vw;
    height: calc(100vh - 44px);
    max-width: 100vw;
    max-height: calc(100vh - 44px);
  }
  #shell-terminal { font-size: 13px; }
  /* iOS Safari "auto-zoom" guard: input < 16px triggers a viewport zoom on
     focus. xterm.js mounts a hidden textarea inside #shell-terminal that
     keyboard input flows through — bump its font-size so iOS leaves the
     viewport alone. */
  #shell-terminal textarea { font-size: 16px !important; }
}

/* Bug #225 — connection-state pill lives in the WINDOW HEADER (a flex child
   of .shell-window-header). It NEVER appears in the terminal grid. The pill
   is inline-flex with a leading colored dot so the state is legible at a
   glance; line-height:1 keeps its computed height tight so it stays in line
   with the toolbar buttons (header height is dominated by the larger button
   row, so the pill cannot grow the header beyond what was there before). */
.shell-conn-status {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--status-killed-bg);
  color: var(--status-killed-text);
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  cursor: help;
}
.shell-conn-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex: 0 0 auto;
}

.shell-conn-status[data-state="connected"] {
  background: var(--status-running-bg);
  color: var(--status-running-text);
}
.shell-conn-status[data-state="connecting"] {
  background: var(--status-blocked-bg);
  color: var(--status-blocked-text);
}
.shell-conn-status[data-state="error"] {
  background: rgba(218, 54, 51, 0.15);
  color: var(--danger);
}

/* Bug #225/#227 (2026-06-20): baseline flex:1 1 auto + min-height:0 +
   position:relative live HERE (not gated by .window-floating /
   .window-docked) so the terminal's containing block is GUARANTEED to
   have non-zero height the moment #view-shell becomes visible — no
   matter which window-state class is on the parent at any given moment.
   The `min-height:0` is mandatory: without it, a flex column child
   refuses to shrink below its content's intrinsic height, and our
   content's intrinsic height is the terminal at height:100% — a circular
   dependency that breaks the layout math. */
.shell-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  position: relative;
}

#shell-terminal {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Task #548 (2026-07-05): Copy button + .shell-copy-flash purged. Select
   mode overlay is the only clipboard path — see below. */

/* ─── Shell Select mode (native long-press selection overlay) ───
   xterm.js renders to canvas, so phone long-press never produces drag handles
   or the system Copy menu. Select mode overlays a real <pre> sized to fill the
   shell-body so iOS Safari / Chrome Android can run their native selection UI
   over actual DOM text. Sits above the terminal canvas; pointer-events: auto
   so the overlay catches taps. */
.shell-select-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #000;
}
.shell-select-overlay.hidden { display: none; }

.shell-select-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #0d1117;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.shell-select-hint {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Scroll container wrapping the <pre>. Owns overflow so the <pre> itself is
   non-scrollable — Android Chrome treats a scrollable element's long-press as
   a scroll gesture rather than a selection; a non-scrollable <pre> inside a
   scroll container gets native drag-handles instead. */
.shell-select-scroll {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.shell-select-text {
  margin: 0;
  padding: 12px;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: none;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #e6edf3;
  background: #000;
  word-break: normal;
  tab-size: 4;
}

@media (max-width: 768px) {
  .shell-select-toolbar { padding: 10px 12px; gap: 10px; }
  .shell-select-toolbar .btn-sm { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .shell-select-hint { font-size: 11px; }
  .shell-select-scroll { padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px); }
  .shell-select-text {
    font-size: 14px;
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-all;
  }
}

/* ─── Service logs modal ─── */
.modal-logs-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.modal-logs-body {
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-logs-body pre {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
}

/* ─── Watchdog per-target log modal ───────────────────────────
   Renders the last-3-recent + up-to-17-anomalies envelope returned by
   GET /api/watchdog/targets/{name}/logs. Anomaly entries get a colored
   left-rail; routine recent entries are subdued. Text is selectable and
   a Copy button serializes the whole list. */
.modal-watchlog-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-watchlog-body {
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-watchlog-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 8px 16px 4px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.modal-watchlog-entries {
  display: flex;
  flex-direction: column;
}

.watchlog-entry {
  display: grid;
  grid-template-columns: 160px 80px 1fr;
  gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  user-select: text;
}
.watchlog-entry:last-child { border-bottom: none; }

.watchlog-entry-ts {
  color: var(--text-muted);
  white-space: nowrap;
}
.watchlog-entry-sev {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
}
.watchlog-entry-msg {
  white-space: pre-wrap;
  word-break: break-word;
}

.watchlog-entry[data-severity="INFO"]    .watchlog-entry-sev { color: var(--text-muted); }
.watchlog-entry[data-severity="WARN"]    .watchlog-entry-sev,
.watchlog-entry[data-severity="WARNING"] .watchlog-entry-sev { color: var(--status-blocked-text); }
.watchlog-entry[data-severity="ERROR"]   .watchlog-entry-sev,
.watchlog-entry[data-severity="CRIT"]    .watchlog-entry-sev,
.watchlog-entry[data-severity="CRITICAL"].watchlog-entry-sev { color: var(--danger); }

/* Anomaly rows get a colored left rail + tinted background so they stand
   out from routine recent entries. */
.watchlog-entry.is-anomaly {
  border-left: 3px solid var(--danger);
  padding-left: 13px; /* 16 - 3 border */
  background: rgba(248, 113, 113, 0.05);
}

.modal-watchlog-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* ─── Token budget pill ─────────────────────────────────────── */
.budget-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: monospace;
  line-height: 1.4;
  cursor: default;
  white-space: nowrap;
  transition: background-color 0.3s;
}
.budget-unknown { background: var(--status-killed-bg); color: var(--text-muted); }
.budget-ok   { background: var(--status-running-bg); color: var(--status-running-text); }
.budget-warn { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.budget-crit { background: #4a1a1a; color: #f87171; }
/* Stale: values present but from a prior fetch; desaturated but still readable (Bug #69) */
.budget-stale { background: #1e2a1e; color: #7a9a7a; opacity: 0.85; }

.budget-pill[data-tooltip] { position: relative; }
.budget-pill[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  white-space: pre;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  line-height: 1.6;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 300;
  min-width: 200px;
}
.budget-pill[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Bug #229: refresh-now button beside the token budget pill.
   Compact, matches the budget-pill height, becomes visibly active during
   an in-flight refresh. */
.btn-budget-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.4s ease-out;
}
.btn-budget-refresh:hover { color: var(--text); background: var(--surface-2, #1a2030); }
.btn-budget-refresh:active { transform: rotate(180deg); }
.btn-budget-refresh.refreshing { animation: budget-refresh-spin 0.8s linear infinite; }
@keyframes budget-refresh-spin { to { transform: rotate(360deg); } }

/* Bug #279 (2026-07-03): fire-escape re-auth button. Visible whenever the
   poller is in a state where re-auth is warranted (rate_limited,
   auth_expired, no_credentials, DEAD_REFRESH). Distinct amber tint so
   Steven notices it and knows he has a way out even mid-backoff. */
.btn-budget-reauth {
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid #c07020;
  border-radius: 50%;
  background: #2a1e0a;
  color: #f0a050;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.btn-budget-reauth:hover { color: #ffca80; background: #3a2810; }
.btn-budget-reauth.hidden { display: none; }
button.btn-budget-reauth[hidden] { display: none; }

/* Rate-limited state — visibly distinct from generic budget-stale. Cooler
   blue tint (endpoint is throttling us, we can wait it out) as opposed to
   the muted green of stale-with-values. */
.budget-rate-limited {
  background: #142238;
  color: #7ab0e0;
  opacity: 0.95;
}

/* ─── Hardware stats strip (Task #356) ─────────────────────────
   CPU / MEM / NET chips in the top bar next to the Shell button.
   Reuses the budget-pill colour bands but at a smaller footprint
   so three chips fit alongside the existing controls. */
.hw-stats {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hw-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: monospace;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
  transition: background-color 0.3s;
}
.hw-unknown { background: var(--status-killed-bg); color: var(--text-muted); }
.hw-ok      { background: var(--status-running-bg); color: var(--status-running-text); }
.hw-warn    { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.hw-crit    { background: #4a1a1a; color: #f87171; }

/* Task #626 item 3: Max CLI OAuth token-probe chip — same status-chip family
   as .hw-chip. Green when the last probe was ok, red when failing, gray when
   the probe verdict is unknown (bridge status file absent). */
.max-auth-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: monospace;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
  transition: background-color 0.3s;
}
.max-auth-unknown { background: var(--status-killed-bg); color: var(--text-muted); }
.max-auth-ok      { background: var(--status-running-bg); color: var(--status-running-text); }
.max-auth-bad     { background: #4a1a1a; color: #f87171; }

/* Mobile (≤768px): hide the strip — it would overflow the top bar alongside
   the existing token-budget pill and shell button. Polling continues in JS
   but the chips are invisible. */
@media (max-width: 768px) {
  .hw-stats { display: none; }
}

.modal-logs-unavailable {
  padding: 24px 16px;
  color: var(--text-muted);
  font-style: italic;
}

/* ─── Project filter bar (Active/All toggle + domain filters) ── */
.project-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Task #341: when the filter bar is promoted to the top of the rail (not
   inside the Projects section body), give it a hair of breathing room and
   a slightly stronger separator so it reads as a global control surface
   rather than as Projects-section chrome. */
.rail-global-filter-bar {
  background: var(--panel);
}

/* Task #342: rollup groups inside Tasks/Bugs rail expansions. Each axis
   (Projects / Domains) gets a small uppercase label so the user can tell
   which axis a row belongs to without parsing the row content. */
.rail-rollup-group {
  margin-bottom: 6px;
}
.rail-rollup-group:last-child { margin-bottom: 0; }

.rail-rollup-group-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 2px;
}

.filter-toggle-group {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}

.filter-toggle {
  flex: 1;
  padding: 3px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}

.filter-toggle.active {
  background: var(--accent);
  color: #fff;
}

.filter-toggle:hover:not(.active) {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

[data-theme="light"] .filter-toggle:hover:not(.active) {
  background: rgba(0,0,0,0.06);
}

/* Domain filter pill buttons */
.domain-filter-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.domain-filter-btn {
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
  line-height: 1.6;
}

.domain-filter-btn.selected {
  background: rgba(88,166,255,0.15);
  color: var(--accent);
  border-color: rgba(88,166,255,0.4);
}

.domain-filter-btn:hover:not(.selected) {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

[data-theme="light"] .domain-filter-btn:hover:not(.selected) {
  background: rgba(0,0,0,0.05);
}

/* Hide filter bar when rail is collapsed */
.left-rail.collapsed .project-filter-bar {
  display: none;
}

/* ─── Domain editor (inline chip-toggle, Bug #59) ─────────────── */
.pd-domains-row {
  align-items: center;
  flex-wrap: wrap;
}

.pd-domain-edit-btn {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.6;
}

.pd-domain-edit-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pd-domain-editor {
  margin: 6px 0 4px 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-domain-chips-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.domain-toggle-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.domain-toggle-chip.active {
  background: rgba(88,166,255,0.15);
  color: var(--accent);
  border-color: rgba(88,166,255,0.4);
}

.domain-toggle-chip:hover:not(.active) {
  background: rgba(255,255,255,0.05);
  border-color: var(--text-muted);
}

[data-theme="light"] .domain-toggle-chip:hover:not(.active) {
  background: rgba(0,0,0,0.04);
}

.pd-override-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.pd-override-label input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent);
}

.pd-domain-editor-actions {
  display: flex;
  gap: 8px;
}

.btn-xs {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
}

/* ─── Wave 2: Gate-stuck badge (B3') ─────────────────────────────────────── */
.badge-gate {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.6);
  color: #fb923c;
  vertical-align: middle;
  cursor: default;
}

/* ─── Wave 2: Worker detail collapsible sections (B4) ───────────────────── */
.worker-detail-collapsible {
  margin-top: 8px;
  border: none;
}
.worker-detail-collapsible > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.worker-detail-collapsible > summary::before {
  content: '▶';
  font-size: 0.65em;
  transition: transform 0.15s ease;
  color: var(--text-muted, #888);
}
.worker-detail-collapsible[open] > summary::before {
  transform: rotate(90deg);
}
.worker-spec-pre {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--code-bg, #1e1e1e);
  border-radius: 4px;
  font-size: 0.75em;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text, #e0e0e0);
}

/* ─── Workers-area split (Conductors top / Workers bottom) ─── */
.workers-area-split {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.workers-area-split > .panel {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* ─── Conductors panel (Task #956 rebuild — navigation-first) ─────────────
   The pane is a navigation surface first. The conductor NAME/link is the lead
   element on every row and the most prominent thing on it; everything else is
   metadata. "Last seen" is deliberately understated; SLEEPING and STALE carry
   the weight because they are the two states that are actually unambiguous. */
.conductors-panel { /* inherits .panel base */ }
/* Wave 4 type scale (Task #956): Steven judged Wave 3 "so small" on both the
   collapsed row and the expanded detail. The prior 0.85em base compounded down
   through nested `em`s to sub-9px badges. This list now anchors to a fixed 13px
   base (matching CC's other panel content, which sits at 12-13px) and the
   load-bearing lines below use fixed px so nothing compounds beneath ~11px.
   Density is not the goal here; scannability from a normal viewing distance
   across 5-8 windows is. */
.conductors-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 10px;
  font-size: 13px;
  line-height: 1.45;
}

/* Degraded marker — bridge dormant, DB fallback in use (Wave 4: names what is
   missing, and is dismissible). Visible so the pane never silently overstates
   what it knows. */
.conductor-degraded {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #3a2a1a;
  color: #e8c67a;
  border: 1px solid #5a4020;
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
.conductor-degraded-icon { flex-shrink: 0; color: #f0a020; font-size: 14px; line-height: 1.3; }
.conductor-degraded-text { flex: 1; min-width: 0; }
.conductor-degraded-text strong { color: #f5d488; }
.conductor-degraded-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #5a4020;
  border-radius: 4px;
  color: #e8c67a;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 8px;
}
.conductor-degraded-dismiss:hover { background: rgba(240,160,32,0.16); }

/* §8 counter header. SLEEPING rolls into "active"; STALE is called out. */
.conductor-roster-counts {
  font-size: 12.5px;
  color: var(--text);
  padding: 3px 4px 9px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.conductor-count-total { font-weight: 700; }
.conductor-count-active { color: var(--status-running-text, #3fb950); font-weight: 600; }
.conductor-count-stale { color: #f0a020; font-weight: 700; }

/* ── The row is a native <details>: collapsed = summary line only. ────────── */
.conductor-row {
  border-radius: 6px;
  margin-bottom: 7px;
  color: var(--text);
  border: 1px solid transparent;
  border-left: 4px solid var(--border);
  background: transparent;
}
.conductor-row:hover { background: rgba(255,255,255,0.03); }
.conductor-row[open] { background: rgba(255,255,255,0.02); }

.conductor-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 10px 12px 10px 6px;
  cursor: pointer;
  list-style: none;
}
.conductor-summary::-webkit-details-marker { display: none; }
/* Custom disclosure triangle so the whole summary stays scannable. */
.conductor-summary::before {
  content: '▸';
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 0.12s ease;
  flex-shrink: 0;
  width: 11px;
  text-align: center;
}
.conductor-row[open] > .conductor-summary::before { transform: rotate(90deg); }

.conductor-summary-lead { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.conductor-summary-meta { display: inline-flex; align-items: center; gap: 8px; row-gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.conductor-summary-seen { font-size: 12.5px; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.conductor-summary-action { display: inline-flex; align-items: center; }

/* ── §6 COLLISION — the loudest thing on the pane. ───────────────────────── */
.conductor-row-collision {
  border: 1px solid #c0392b;
  border-left: 4px solid #e74c3c;
  background: rgba(231, 76, 60, 0.10);
  box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.25) inset;
}
.conductor-row-collision:hover { background: rgba(231, 76, 60, 0.16); }
.conductor-collision-banner {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: #e74c3c;
  border-radius: 3px;
  padding: 1px 6px;
  text-transform: uppercase;
  animation: conductor-collision-pulse 1.6s ease-in-out infinite;
}
@keyframes conductor-collision-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); }
  50% { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0); }
}
.conductor-proj-collision {
  background: #e74c3c !important;
  color: #fff !important;
  font-weight: 700;
  border: 1px solid #ffb3ab;
}
.conductor-proj-warn { font-weight: 800; margin-right: 2px; }

/* ── The navigation lead: name link. ─────────────────────────────────────── */
.conductor-name {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46ch;
}
.conductor-name-link {
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  touch-action: manipulation;
  font-size: 15px;
}
.conductor-name-link:hover { text-decoration: underline; }
.conductor-name-unverified { color: var(--text-muted); cursor: default; font-size: 15px; }
.conductor-unverified-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #d9a441;
  border: 1px solid #5a4020;
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.conductor-self {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  text-transform: uppercase;
}

/* Origin badge — AEMS Bridge (Teams seat) distinct from personal Max-seat. */
.conductor-origin {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.conductor-origin-personal { color: var(--text-muted); border: 1px solid var(--border); }
.conductor-origin-aems { color: #2fd4c4; background: #0e3a37; border: 1px solid #1f6b64; }

.conductor-stype {
  background: #9333ea22;
  border: 1px solid #9333ea55;
  color: #b473ff;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.conductor-forced-tag {
  font-size: 10.5px;
  color: #c97070;
  border: 1px solid #6b2020;
  border-radius: 3px;
  padding: 0 4px;
  text-transform: uppercase;
}

/* ── §4 domains — declared vs also-spanned. ──────────────────────────────── */
.conductor-domains { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.conductor-domain {
  font-size: 12px;
  border-radius: 3px;
  padding: 1px 7px;
}
.conductor-domain-declared { color: var(--text); background: var(--border); }
.conductor-domain-extra { color: var(--text-muted); border: 1px dashed var(--border); }

.conductor-projcount { font-size: 12px; color: var(--text-muted); }
.conductor-projects { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.conductor-proj {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 1px 7px;
  font-size: 12px;
}
.conductor-proj-count {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.conductor-proj-declared { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); }
.conductor-proj-none { background: transparent; }
.conductor-workers {
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 7px;
}
.conductor-workers-none { color: var(--text-muted); }

/* ── Wave 4 collapsed-line signal: tickets rollup + last tool + awaiting-restart.
   Steven's ask — workers / last tool / tickets legible on the main card line. ── */
.conductor-tk-summary { display: inline-flex; align-items: center; gap: 5px; }
.conductor-tk-sum {
  font-size: 12px;
  border-radius: 3px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.conductor-tk-sum-claimed { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.conductor-tk-sum-generated { color: var(--text-muted); }
.conductor-tk-sum-completed { color: var(--status-running-text, #3fb950); border-color: color-mix(in srgb, #3fb950 40%, var(--border)); }

.conductor-lasttool { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.conductor-lasttool-label { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.3px; }
.conductor-lasttool-name { color: var(--text); font-size: 12px; }
.conductor-lasttool-when { font-size: 11.5px; }
/* Live roster, no stamped tool yet — honest, muted, NOT a restart claim (§2). */
.conductor-lasttool-none-val { font-style: italic; font-size: 12px; }

/* Awaiting-restart: a field null ONLY because the bridge is dormant. Muted, but
   never blank — a blank reads as "nothing happened", which is the wrong signal. */
.conductor-awaiting { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12px; font-style: italic; }
.conductor-awaiting-tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #d9a441;
  border: 1px solid #5a4020;
  border-radius: 3px;
  padding: 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ── Liveness / last-seen. Quiet by default; SLEEPING + STALE get weight. ── */
.conductor-lastseen-label { text-transform: uppercase; font-size: 11px; letter-spacing: 0.3px; }
.conductor-lastseen { color: var(--text); font-size: 12.5px; }
.conductor-liveness { font-size: 12px; border-radius: 3px; padding: 1px 7px; }
.conductor-liveness-active { color: var(--status-running-text, #3fb950); }
.conductor-liveness-idle { color: var(--text-muted); }
.conductor-liveness-sleeping {
  color: #6ea8fe;
  background: #16233f;
  border: 1px solid #274a80;
  font-weight: 700;
}
.conductor-liveness-stale {
  color: #f0a020;
  background: #3a2a10;
  border: 1px solid #6b4a10;
  font-weight: 700;
}

/* ── The single Finalize button (§5), gated off until the release audit. ── */
.conductor-act {
  font-size: 12px;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1;
}
.conductor-act-finalize {
  background: transparent;
  color: #c97070;
  border: 1px solid #6b2020;
  font-weight: 600;
}
.conductor-act-finalize:hover:not([disabled]) { background: rgba(201,112,112,0.14); }
.conductor-act-finalize[disabled] { color: var(--text-muted); border-color: var(--border); cursor: not-allowed; opacity: 0.5; }

/* ── Expanded body. ──────────────────────────────────────────────────────── */
.conductor-body {
  padding: 8px 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
}
.conductor-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Wave 4: the expanded panels were worse than the row. Raise them to comfortable
   reading size (13px), not footnote size. */
.conductor-detail-block { font-size: 13px; }
.conductor-detail-head { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.conductor-detail-empty { font-size: 12.5px; }
.conductor-expandable { cursor: pointer; user-select: none; }
.conductor-expandable::-webkit-details-marker { color: var(--text-muted); }

/* Line — visible evidence: session_id AND chat_url side by side. */
.conductor-line-evidence { font-size: 12px; color: var(--text-muted); }
.conductor-ev { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.conductor-ev-label { text-transform: uppercase; font-size: 11px; }
.conductor-ev-sid { font-family: var(--font-mono); flex-shrink: 0; color: var(--text); }
.conductor-ev-sep { opacity: 0.4; }
.conductor-ev-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.conductor-ev-url-none { font-style: italic; }

/* Micro workers view (§2). */
.conductor-w {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 13px;
}
.conductor-w:hover { background: rgba(255,255,255,0.03); }
.conductor-w-id { color: var(--text-muted); flex-shrink: 0; }
.conductor-w-proj { color: var(--text); flex-shrink: 0; }
.conductor-w-run {
  font-size: 11px;
  border-radius: 3px;
  padding: 1px 6px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.conductor-w-running { color: #fff; background: var(--status-running-text, #3fb950); font-weight: 700; }
.conductor-w-notrunning { color: var(--text-muted); border: 1px solid var(--border); }
.conductor-w-model { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }
.conductor-w-label { color: var(--text-muted); min-width: 0; }

/* Claimed / completed tickets. */
.conductor-tk { display: flex; align-items: center; gap: 7px; padding: 3px 5px; }
.conductor-tk-id { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.conductor-tk-proj { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.conductor-tk-title { color: var(--text); min-width: 0; }
.conductor-tk-bug .conductor-tk-id { color: #e0796f; }
.conductor-completed-body, .conductor-tools-all-body { padding-top: 3px; }

/* Tools run (§7). Lazy-loaded on open, bounded scroll so a 500-line log can
   never grow the row. */
.conductor-tool { display: flex; align-items: center; gap: 9px; padding: 3px 5px; font-size: 13px; }
.conductor-tool-name { color: var(--text); }
.conductor-tool-count { color: var(--text-muted); font-size: 12px; }
.conductor-tool-when { font-size: 12px; }
.conductor-tool-invocation { gap: 12px; }
.conductor-tools-unavailable { font-style: italic; font-size: 12.5px; }
.conductor-tools-summary-label { font-style: italic; color: var(--text-muted); font-weight: 600; }
.conductor-tools-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 3px;
}
/* Task #963 — empty per-invocation log is a real state (Bug #686), not an error. */
.conductor-tools-empty { font-size: 12.5px; }
/* Pagination control for the per-invocation log — secondary, sits below the
   bounded scroll container so the list itself never grows the row. */
.conductor-tools-loadmore {
  margin-top: 6px;
  font-size: 12px;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.conductor-tools-loadmore:hover:not([disabled]) { color: var(--accent); border-color: var(--accent); }
.conductor-tools-loadmore[disabled] { opacity: 0.5; cursor: default; }

/* Wave 3 §1 — ticket lifecycle sections (Claimed / Generated / Completed). Each
   is its own <details> with independent expansion (§6). */
.conductor-tickets-body, .conductor-workers-body { padding-top: 3px; }
.conductor-tk-chip { margin-right: 2px; }
.conductor-tickets-generated > summary { color: var(--text-muted); }

/* Wave 3 §3 — click-through affordances. */
.conductor-w-open-target { cursor: pointer; }
.conductor-w-open-target:hover { background: rgba(122,162,247,0.10); }
.conductor-proj-open { cursor: pointer; }
.conductor-proj-open:hover { border-color: var(--accent); color: var(--accent); }

/* Wave 3 §2 / Bug #679 — terminal worker outcome, honest not accusatory. KILLED
   is ambiguous (amber), not a bare failure; only CRASHED/FAILED read red. */
.conductor-w-ambiguous { color: #101418; background: #d9a441; font-weight: 700; }
.conductor-w-failure { color: #fff; background: var(--danger, #c0433b); font-weight: 700; }
.conductor-w-terminal-ok { color: var(--text-muted); border: 1px solid var(--border); }
.conductor-w-note { cursor: help; }

/* Wave 3 §5 — Detach affordance, on the collision warning, gated OFF (Task #961). */
.conductor-collision-block { display: inline-flex; align-items: center; gap: 6px; }
.conductor-act-detach {
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 2px 9px;
  cursor: pointer;
}
.conductor-act-detach[disabled] { cursor: not-allowed; opacity: 0.55; }

.conductor-empty { font-size: 13px; color: var(--text-muted); padding: 10px 4px; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Row status accent (left border) — mirrors the rail staleness palette. A
   collision border (above) overrides these deliberately. */
.conductor-row.conductor-status-fresh { border-left-color: var(--status-running-text, #3fb950); }
.conductor-row.conductor-status-idle { border-left-color: var(--border); }
.conductor-row.conductor-status-sleeping { border-left-color: #6ea8fe; }
.conductor-row.conductor-status-stale { border-left-color: #f0a020; }
.conductor-row.conductor-status-ghost { border-left-color: #c97070; opacity: 0.75; }
.conductor-row-forced { opacity: 0.7; }
.conductor-status-sleeping .rail-record-conductor-activity { color: #6ea8fe; }

.rail-record-inquisitor { border-left: 2px solid #9333ea; padding-left: 4px; }

/* ─── Paste-to-set chat_url input ─────────────────── */
.conductor-chat-url-set {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.conductor-chat-url-input {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 12px;
  font-family: var(--font-mono);
  height: 26px;
  width: 260px;
  max-width: 50vw;
}
.conductor-chat-url-input:focus { outline: none; border-color: var(--accent); }
.conductor-chat-url-input-invalid {
  border-color: var(--danger, #c97070);
  background: rgba(201, 112, 112, 0.12);
}
.conductor-chat-url-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  padding: 3px 10px;
  cursor: pointer;
  height: 26px;
}
.conductor-chat-url-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Wave 4: Session Log view (B7) ────────────────────────── */
.session-log-view { padding: 16px; max-width: 1000px; }
.session-log-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.session-log-header h2 { margin: 0; font-size: 1.1em; }
.session-log-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.form-select-sm, .form-input-sm {
  height: 28px;
  padding: 2px 6px;
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}
.session-log-count { font-size: 0.8em; color: var(--text-muted); margin-bottom: 8px; }
.session-log-entries { display: flex; flex-direction: column; gap: 8px; }
.sl-entry {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.sl-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.8em;
  color: var(--text-muted);
}
.sl-ts { font-family: var(--font-mono); }
.sl-session-id {
  font-family: var(--font-mono);
  background: var(--border);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--accent);
}
.sl-entry-body { font-size: 0.9em; overflow-wrap: break-word; }

/* ─── Wave 4: Costs view (B5; rebuilt for Task #346) ───────── */
.costs-view { padding: 16px; max-width: 1400px; }
.costs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.costs-search {
  flex: 1 1 240px;
  min-width: 220px;
  padding: 5px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85em;
}
.costs-project-select,
.costs-date {
  padding: 4px 8px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85em;
}
.costs-date-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.82em;
}
.costs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.82em;
  cursor: pointer;
}
.costs-reset-btn { margin-left: auto; }

.costs-summary {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
/* Task #722 — condensed Costs panel (the full table folded into the Timesheet). */
.costs-condensed { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.costs-condensed-lead { color: var(--text-muted); font-size: 0.9em; line-height: 1.5; margin: 0; }
.costs-condensed .cost-amount { display: inline-block; }
.costs-open-timesheet { align-self: flex-start; }
.costs-totals { display: flex; flex-direction: column; gap: 6px; }
.cost-total-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cost-amount { font-size: 1.5em; font-weight: 600; color: var(--accent); font-family: var(--font-mono); }
.cost-label { font-size: 0.85em; color: var(--text-muted); }
.cost-mode-note {
  font-size: 0.78em;
  color: var(--text-muted);
  background: var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
}

.costs-table-wrap { overflow-x: auto; }
.costs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
}
.costs-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  background: var(--panel);
  position: sticky;
  top: 0;
}
.costs-table th.costs-sortable { cursor: pointer; user-select: none; }
.costs-table th.costs-sortable:hover { color: var(--text); }
.costs-sort-ind { color: var(--text-muted); margin-left: 4px; font-size: 0.85em; }
.costs-sort-ind.active { color: var(--accent); }
.costs-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.costs-table tbody tr:hover td { background: var(--border); }
.costs-label-cell { font-family: var(--font-mono); font-size: 0.9em; }
.cost-cell { font-family: var(--font-mono); text-align: right; }
.worker-id-code { font-size: 0.85em; }

.costs-subtotal-row td {
  background: rgba(88, 166, 255, 0.07);
  font-weight: 500;
  font-size: 0.85em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.costs-footer-row td {
  background: var(--panel);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85em;
}
.costs-grand-row td {
  background: var(--panel);
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9em;
  border-top: 2px solid var(--accent);
}

/* ─── Wave 4: Project Current State section (B9) ───────────── */
.pd-current-state-body { padding: 8px 0; }
.pd-current-state-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85em;
  line-height: 1.5;
}

/* ─── Wave 4: Preferences scope grouping (B6.1) ────────────── */
.pref-scope-section {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pref-scope-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.pref-scope-title {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.pref-cat-group {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.pref-cat-group:last-child { border-bottom: none; }
.pref-cat-label {
  display: block;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pref-add-bar {
  padding: 10px 0;
  display: flex;
  justify-content: flex-end;
}

/* Task #536 — conductor budget-allotment setter. Wraps to a stacked
   layout on narrow viewports so the input and Save button never overflow
   a phone-width panel (mobile-first per project convention). */
.pref-budget-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pref-budget-row .form-label {
  margin-bottom: 0;
  white-space: nowrap;
}
.pref-budget-row .form-input {
  width: 90px;
  flex: 0 0 auto;
}

/* ─── CC-Phase 1b: Conductor v2 observability panel ──────────── */

.cv2-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  height: 100%;
  overflow-y: auto;
}

/* Sessions panel */
.cv2-sessions-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.cv2-session-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 220px;
  max-width: 320px;
  flex: 1 1 240px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cv2-session-card:hover,
.cv2-session-card:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  outline: none;
}

.cv2-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cv2-card-title {
  font-size: 0.9em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv2-card-meta {
  font-size: 0.78em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cv2-card-activity { color: var(--text); }

/* Token gauge */
.cv2-gauge-wrap { margin-bottom: 6px; }
.cv2-gauge-track {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 3px;
}
.cv2-gauge-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.cv2-gauge-bar.cv2-gauge-low  { background: var(--status-running-text); }
.cv2-gauge-bar.cv2-gauge-mid  { background: #d4822a; }
.cv2-gauge-bar.cv2-gauge-high { background: var(--danger); }
.cv2-gauge-label {
  font-size: 0.72em;
  color: var(--text-muted);
}

/* Cost line */
.cv2-card-costs {
  display: flex;
  gap: 12px;
  font-size: 0.78em;
  color: var(--text-muted);
}
.cv2-cost-item strong { color: var(--text); }

/* Billing account badges */
.cv2-badge {
  font-size: 0.68em;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cv2-badge-max  { background: #2d1b69; color: #b69aff; }
.cv2-badge-hgw  { background: #0d2140; color: #58a6ff; }
.cv2-badge-aems { background: #1a3a1a; color: #3fb950; }
.cv2-badge-other { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* Empty / offline states */
.cv2-empty {
  font-size: 0.85em;
  color: var(--text-muted);
  padding: 16px 0;
}
.cv2-offline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  color: var(--status-killed-text);
  padding: 12px 0;
}
.cv2-offline-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}
.cv2-error {
  font-size: 0.82em;
  color: var(--danger-hover);
  padding: 8px 0;
}

/* Per-project detail panel */
.cv2-detail-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cv2-detail-panel.hidden { display: none; }

.cv2-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cv2-detail-title {
  font-size: 0.9em;
  font-weight: 600;
  font-family: var(--font-mono);
}
.cv2-detail-close { font-size: 0.78em; }

.cv2-detail-body {
  padding: 12px;
  overflow-y: auto;
  max-height: 500px;
}
.cv2-detail-body.cv2-loading {
  color: var(--text-muted);
  font-size: 0.85em;
}

/* Detail sections */
.cv2-section {
  margin-bottom: 20px;
}
.cv2-section:last-child { margin-bottom: 0; }
.cv2-section-title {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* Transcript */
.cv2-transcript-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.cv2-transcript-row {
  border-left: 3px solid var(--border);
  padding: 6px 8px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.cv2-transcript-row.cv2-role-user     { border-left-color: var(--accent); background: rgba(88,166,255,0.05); }
.cv2-transcript-row.cv2-role-conductor { border-left-color: #3fb950; background: rgba(63,185,80,0.05); }

.cv2-msg-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.cv2-msg-role {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.cv2-msg-when {
  font-size: 0.72em;
  color: var(--text-muted);
}
.cv2-msg-content {
  font-size: 0.82em;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  color: var(--text);
  max-height: 120px;
  overflow-y: auto;
}

.cv2-load-more {
  margin-top: 8px;
  font-size: 0.78em;
}

/* Cost table */
.cv2-cost-totals {
  display: flex;
  gap: 16px;
  font-size: 0.85em;
  margin-bottom: 10px;
}
.cv2-turns-count { color: var(--text-muted); }

.cv2-cost-table-wrap { overflow-x: auto; }
.cv2-cost-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8em;
}
.cv2-cost-table th,
.cv2-cost-table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.cv2-cost-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
}

/* Memory state chips */
.cv2-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cv2-state-chip {
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ─── Conductor Chat (CC-Phase 2) ───────────────────────────────────────── */

/* Rail project card Chat button */
.rail-project-chat-btn {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.rail-project-item:hover .rail-project-chat-btn { opacity: 1; }

/* Outer wrapper: thread + side rail side by side */
.cc-chat-outer {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  min-height: 280px;
}
.cc-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
}
.cc-side-rail {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}

/* Thread */
.cc-thread {
  flex: 1;
  overflow-y: auto;
  min-height: 120px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cc-msg {
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.5;
  font-size: 13px;
  max-width: 90%;
  word-break: break-word;
}
.cc-msg-user {
  align-self: flex-end;
  background: rgba(88,166,255,0.12);
  border: 1px solid rgba(88,166,255,0.25);
  white-space: pre-wrap;
}
.cc-msg-assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.cc-msg-error { color: var(--danger); border-color: var(--danger-muted); }
.cc-empty, .cc-loading { padding: 16px; color: var(--text-muted); font-style: italic; }

@keyframes cc-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cc-streaming-cursor::after {
  content: '▋';
  animation: cc-blink 1s step-start infinite;
  margin-left: 2px;
}

/* Composer */
.cc-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-composer-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px;
  resize: vertical;
}
.cc-composer-input:focus { outline: 1px solid var(--accent); }
.cc-composer-input:disabled { opacity: 0.5; }
.cc-composer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-offline-notice {
  font-size: 12px;
  color: var(--danger);
  flex: 1;
}
.cc-streaming {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}
/* Wave 3c Item 4 — billing fallback warning chip. Shown when the bridge
   downgrades the requested billing_account (typically hgw_api) into
   max/aems_api. Stays visible until the next successful send that clears
   the warning field, so silent fallbacks are impossible. */
.cc-billing-warning {
  font-size: 12px;
  color: var(--warning, #c98a1a);
  border: 1px solid var(--warning, #c98a1a);
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--panel);
}
/* Model tier selector (2026-06-13). Sits between the streaming pill and
   the Send button; auto/haiku/sonnet/opus picker that persists to
   localStorage per project. */
.cc-tier-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-tier-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 4px;
  font-family: var(--font-sans);
}
.cc-tier-select:focus { outline: 1px solid var(--accent); }

/* Wave 3b Item 3 — mic dictation button */
.cc-mic-btn {
  font-size: 14px;
  padding: 2px 6px;
  min-width: 28px;
}
.cc-mic-btn.cc-mic-listening {
  background: var(--danger, #c0392b);
  color: #fff;
  animation: cc-mic-pulse 1s infinite alternate;
}
@keyframes cc-mic-pulse {
  from { opacity: 1; }
  to   { opacity: 0.6; }
}

/* Side rail: token gauge */
.cc-gauge { display: flex; flex-direction: column; gap: 3px; }
.cc-gauge-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cc-gauge-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.cc-gauge-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}
.cc-gauge-text { font-size: 11px; color: var(--text-muted); text-align: right; }

/* Side rail: "Last turn: <model>" badge (2026-06-13). Sits between the
   context gauge and the cost rows so it's the first thing the user sees
   when the conductor auto-routes. The text "Auto → Opus" appears when
   the user requested auto and the conductor escalated. */
.cc-last-turn-badge {
  font-size: 11px;
  color: var(--text);
  background: rgba(88,166,255,0.08);
  border: 1px solid rgba(88,166,255,0.25);
  border-radius: 4px;
  padding: 3px 6px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Side rail: cost stats */
.cc-cost-stats { display: flex; flex-direction: column; gap: 3px; }
.cc-cost-row { font-size: 11px; display: flex; gap: 4px; justify-content: space-between; }
.cc-account-badge {
  font-size: 10px;
  background: rgba(88,166,255,0.1);
  border: 1px solid rgba(88,166,255,0.3);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--accent);
}
/* Plan/account badge — inline within the cost section (Task #364) */
.cc-cost-plan-header { display: flex; align-items: center; margin-bottom: 4px; }
.cc-plan-badge {
  font-size: 10px;
  font-weight: 600;
  background: rgba(88,166,255,0.1);
  border: 1px solid rgba(88,166,255,0.3);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cc-condense-btn { margin-top: auto; width: 100%; }
.cc-rail-offline, .cc-rail-loading { font-size: 12px; color: var(--text-muted); padding: 4px 0; }

/* Dispatch bubble — proposed_dispatch from conductor */
.cc-msg-dispatch {
  background: rgba(88,166,255,0.06);
  border: 1px dashed var(--accent);
  align-self: flex-start;
}
.cc-dispatch-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}
.cc-dispatch-summary {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
  white-space: pre-wrap;
}
.cc-dispatch-confirm { margin-top: 2px; }

/* Project detail chat section body */
.pd-conductor-chat-body { padding: 0; }
.pd-conductor-chat-toggle { cursor: pointer; user-select: none; }

/* Wave 3b Item 4 — project-detail conductor sessions strip */
.pd-cc-sessions {
  font-size: 11px;
  padding: 2px 4px 4px;
}
.pd-cc-sessions-label {
  margin-bottom: 2px;
}
.pd-cc-session-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 1px 0;
}
.pd-cc-session-type {
  font-size: 10px;
  background: var(--accent, #4a9eff);
  color: #fff;
  border-radius: 3px;
  padding: 1px 4px;
}
.pd-cc-new-session-btn { margin-left: auto; }

/* btn-xs helper for the Chat button */
.btn-xs {
  padding: 1px 5px;
  font-size: 11px;
  border-radius: 4px;
}

/* ─── Multi-tab chat popup HOME (2026-06-13) ───────────────────────
   The popup is a wide modal hosting a tab strip + the existing
   conductor_chat panel reused via initConductorChat. Each tab mounts
   into its own container so DOM ids namespaced with `mountId` don't
   collide with the embedded surface in the project detail view. */
/* The chat popup was promoted 2026-06-13 from a .modal to a first-class
   pliable window (`#view-chat-popup`). Floating size comes from the layout
   store; the global `.window-floating` rule supplies border/background/
   box-shadow. Local rules below only cover the internal layout (header +
   picker panel + body flex stack) so the chat surface scrolls cleanly. */
#view-chat-popup {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#view-chat-popup > .panel-header.chat-popup-header {
  flex: 0 0 auto;
}
#view-chat-popup #chat-popup-picker-panel {
  flex: 0 0 auto;
}
#view-chat-popup > .chat-popup-body-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
/* Fallback: if body-wrap not present (no JS), flex the body directly */
#view-chat-popup > #chat-popup-body.modal-chat-popup-body {
  flex: 1 1 auto;
  min-height: 0;
}
.modal-chat-popup-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.chat-popup-close {
  margin-left: 4px;
}
/* Wave 3c Item 1 — header is now a two-row stack: top row is title +
   tabs + close controls (matches the prior layout), bottom row is the
   always-visible multi-select domain chip strip. Keep this override
   narrow to avoid disturbing other panel-header layouts. */
#view-chat-popup > .panel-header.chat-popup-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.chat-popup-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chat-popup-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.chat-popup-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Wave 3c Item 1 — always-visible domain chip strip in the chat header.
   Multi-select semantics: chips can toggle independently, and "Clear"
   appears only when at least one is lit. Empty state renders as a
   zero-height strip (browsers collapse an empty flex row). */
.chat-popup-domain-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
}
.chat-popup-domain-strip:empty { display: none; }
.chat-popup-domain-chip-clear {
  color: var(--danger, #c0392b);
  border-color: var(--danger, #c0392b);
}
.chat-popup-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.chat-popup-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-popup-tab:hover { background: var(--panel); }
.chat-popup-tab.active {
  background: var(--panel);
  border-color: var(--accent, var(--text));
  font-weight: 600;
}
.chat-popup-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 11px;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.chat-popup-tab-close:hover { background: var(--bg); color: var(--text); }
.chat-popup-tab-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 6px;
}

.chat-popup-picker {
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
}
.chat-popup-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow-y: auto;
}
.chat-popup-picker-item {
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 6px;
}
.chat-popup-picker-item:hover { background: var(--panel); }
.chat-popup-picker-item .text-muted { font-size: 11px; }
/* Wave 3c Item 2 — picker rows are toggle-buttons. Lit rows show a
   checkmark in the leading column so the multi-select state is
   glanceable without opening the row. */
.chat-popup-picker-item.picker-item-open {
  background: color-mix(in srgb, var(--accent, #4a9eff) 8%, transparent);
}
.chat-popup-picker-check {
  color: var(--accent, #4a9eff);
  font-weight: 600;
  text-align: center;
}
.chat-popup-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chat-popup-picker-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.chat-popup-picker-hint {
  font-size: 11px;
}

.chat-popup-panes {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}
.chat-popup-pane {
  flex: 1 1 auto;
  display: none;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.chat-popup-pane.active { display: flex; }
.chat-popup-pane .cc-chat-outer {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  height: 100%;
}
.chat-popup-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px;
  text-align: center;
}

/* Wave 3b — chat popup body wrapper + recent sessions panel */
.chat-popup-body-wrap {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}
#view-chat-popup > .chat-popup-body-wrap > #chat-popup-body.modal-chat-popup-body {
  flex: 1 1 auto;
  min-height: 0;
}
/* Wave 3c Item 6 — Recent sessions panel. Bottom-left drawer with a
   collapse toggle header. Widened from 130px so the project + relative
   time + first-message snippet triple can breathe. */
.chat-popup-recent-sessions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 240px;
  max-height: 45%;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-left: none;
  border-radius: 0 6px 0 0;
  padding: 2px 0 4px;
  z-index: 5;
  font-size: 11px;
}
.chat-popup-recent-sessions.collapsed {
  max-height: 22px;
  overflow: hidden;
}
.chat-popup-recent-header {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.chat-popup-recent-header:hover { color: var(--text); }
.chat-popup-recent-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 8px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  line-height: 1.3;
}
.chat-popup-recent-item:hover { background: var(--panel); }
.chat-popup-recent-line1 {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: baseline;
}
.chat-popup-recent-project {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-popup-recent-time {
  font-size: 10px;
  flex: 0 0 auto;
}
.chat-popup-recent-snippet {
  display: block;
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Wave 3b — domain filter chip-bar in picker panel */
.chat-popup-domain-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}
.chat-popup-domain-chip {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}
.chat-popup-domain-chip:hover { background: var(--panel); }
.chat-popup-domain-chip.active {
  background: var(--accent, #4a9eff);
  color: #fff;
  border-color: var(--accent, #4a9eff);
}

/* ─── Mobile control view (Task 3, 2026-06-14) ─────────────────────────
   Phone-shaped consolidated home: cost/dash chips at top, then gates,
   alerts, workers. .mc-mobile-only hides the host container on every
   width >768px so the desktop layout is untouched. */
.mc-mobile-only { display: none; }
.mc-loading {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
@media (max-width: 768px) {
  .mc-mobile-only { display: block; }

  /* Header overflow fix — the desktop top-bar crams 10 controls into a
     44px-tall row. On a 360-414px viewport that clips the app title and
     leaves the title half-cut. Strategy: shorten the title, hide
     desktop-only controls whose function is already covered by the
     mobile-control surface (chat popup, shell, theme toggle, health
     pill, budget pill — cost moves into mc-chip-cost). Keep: hamburger,
     title, sse indicator, services menu. */
  .app-header { padding: 0 8px; gap: 8px; }
  .header-left { gap: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  /* The desktop "HGW Command Center" string at 15px will not fit alongside
     the hamburger + sse indicator + services menu on a 360-414px viewport,
     leaving the title half-cut. Drop a size + min-width:0 + ellipsis so it
     gracefully truncates instead of clipping behind the next chip. */
  .app-title {
    font-size: 13px;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
  }
  .header-actions { gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
  /* Restore-cards spec (2026-06-14): BAR 1 holds ONLY the three metric
     items — token-budget %, hw-stats (CPU/MEM/NET), API MTD $. Every
     other desktop control is hidden on mobile so the bar stays low-
     profile and Steven doesn't see a desktop submenu / server-menu /
     services dropdown on the phone.

       Hidden: app-title, btn-rail-toggle (the hamburger only opens the
       desktop left rail), sse-status, btn-mc-home (a pane-header Home
       button takes its place when drilled), btn-service-menu +
       service-health-pill (the desktop services submenu), btn-chat-popup,
       btn-shell, btn-theme-toggle, btn-ingest (phone upload is in the
       mc-home sub-menu instead; Task #456 phone-fix). */
  .app-header .app-title,
  .app-header #btn-rail-toggle,
  .header-actions #sse-status,
  .header-actions #btn-mc-home,
  .header-actions #btn-service-menu,
  .header-actions #service-health-pill,
  .header-actions #btn-chat-popup,
  .header-actions #btn-shell,
  .header-actions #btn-theme-toggle,
  .header-actions #btn-ingest { display: none !important; }

  /* Belt-and-braces: even if the desktop services dropdown were to open
     (it can't because btn-service-menu is hidden) the portal layer is
     suppressed on mobile widths so a stale instance can't paint on top
     of the card grid. */
  .svc-menu-portal { display: none !important; }

  /* BAR 1 is low-profile: condense padding + gap so the metric chips
     dominate the row. Task #549 (2026-07-05): swap the wrapping /
     justify-space-around behaviour for a horizontally swipe-scrollable
     row. Default position is BAR 1 as it renders today; overflow items
     are reachable by horizontal drag. `flex-wrap: nowrap`, no shrink,
     no second row — visible chips render in canonical order and any
     surplus lives off-screen to the right. iOS momentum via
     -webkit-overflow-scrolling. Hide the native scrollbar since it
     would eat vertical pixels and break the "low-profile" mandate. */
  .app-header { padding: 4px 8px; gap: 6px; min-height: 36px; }
  .header-left { gap: 0; min-width: 0; flex: 0 0 auto; }
  .header-actions {
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header-actions::-webkit-scrollbar { display: none; }
  .header-actions > * { flex: 0 0 auto; }

  /* Task #549: hide the TOP green version stamp on mobile. Bottom-left
     #version-subscript stays (see .version-subscript media query
     below). Desktop is unaffected — this rule is gated by the mobile
     media query. */
  .header-left #vs-version-header { display: none !important; }

  /* All tap targets in the mobile-control surface meet Apple HIG 44px. */
  #view-mobile-control .btn,
  #view-mobile-control .mc-action-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* Bug #585: `display` is intentionally NOT set here. On the DESKTOP face the
   host is hidden by .mc-mobile-only { display: none }; the old unconditional
   `display: flex` (an ID selector) beat that and only stayed hidden because
   of the markup `hidden` class. With the markup no longer hidden, gating
   display behind the phone media query is what keeps the desktop face clean.
   These are the layout props that apply once it IS shown (mobile). */
#view-mobile-control {
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Shared mobile "button view" mechanics (Item 1, 2026-08-19). Consumed by the
   Finance + Academic faces via js/mobile_nav_core.js. On the card-grid HOME the
   module hides the whole panel container (.mobnav-hidden); when a card is tapped
   it shows the container and hides every panel except the selected one
   (.mobnav-panel-hidden). Both are gated to <=768px so desktop is never touched
   even if a class lingers (the module also strips them on desktop). !important
   beats the per-face position:fixed windowing left over from windowing.js. */
@media (max-width: 768px) {
  .mobnav-hidden { display: none !important; }
  .mobnav-panel-hidden { display: none !important; }
}

.mc-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.mc-section-strip {
  padding: 8px 10px;
}

.mc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.mc-section-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.mc-section-count {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 24px;
  text-align: center;
}

/* At-a-glance chip row */
.mc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.mc-chip-label {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.mc-chip-value {
  color: var(--text);
  font-weight: 600;
}
.mc-chip-cost .mc-chip-value { color: var(--accent); }

/* Section list */
.mc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

/* Cards (gates / alerts / workers all share this base) */
.mc-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-card-line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.mc-card-line2 {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-card-id {
  font-weight: 600;
  color: var(--accent);
}
.mc-card-meta { color: var(--text-muted); margin-left: auto; font-size: 11px; }
.mc-card-meta-row { color: var(--text-muted); }
.mc-card-project { font-weight: 500; color: var(--text); }
.mc-card-sep { margin: 0 4px; color: var(--text-muted); }
.mc-card-label { color: var(--text); }
.mc-card-hint {
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.mc-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.mc-alert-sev {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.mc-alert-sev-critical { background: rgba(218, 54, 51, 0.18); color: var(--danger); }
.mc-alert-sev-warning  { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.mc-alert-sev-info     { background: var(--status-done-bg); color: var(--status-done-text); }

/* Gate card emphasis (gates are highest priority) */
.mc-gate-card { border-left: 3px solid var(--status-blocked-text); }

/* Services section — compact card per service, action row underneath. */
.mc-service-card { border-left: 3px solid var(--border); }
.mc-service-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 auto;
}
.mc-service-dot.svc-dot-healthy   { background: var(--success, #2da44e); }
.mc-service-dot.svc-dot-degraded  { background: var(--warning, #d29922); }
.mc-service-dot.svc-dot-down      { background: var(--danger, #da3633); }
.mc-service-dot.svc-dot-unknown   { background: var(--text-muted); }

/* Service action row wraps so 4 buttons stay reachable on a narrow phone. */
.mc-service-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.mc-service-actions .mc-action-btn { flex: 1 1 calc(50% - 6px); min-width: 0; }

/* Bug #585: mc-home is the DEFAULT-visible mobile surface — display is set
   here (not gated on .mobile-tab-active) so the card grid paints on the very
   first frame with zero JS. The ID selector beats .mc-mobile-only's block;
   `.hidden { display:none !important }` still wins, so switchView hides the
   grid cleanly when a tier-3 view (tasks/bugs/detail) is active and shows it
   again on the way home. */
@media (max-width: 768px) {
  #view-mobile-control:not(.hidden) {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
  }
}

/* ─── Mobile-nav top bar (2026-06-14) ────────────────────────────────
   Spec: the desktop app-header doubles as the FIXED TOP BAR on mobile,
   always carrying token %, hw CPU+MEM, MTD $, HOME button. The desktop
   layout is untouched aside from the new MTD chip + HOME button (which
   only surfaces on phones via media query). */

/* MTD chip — visible on both desktop + mobile so Steven sees the same
   month-to-date $ figure on either device. Compact pill styled after
   budget-pill but in its own colour band so it doesn't read as a
   utilization percentage. */
.mtd-cost-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  font-family: monospace;
  white-space: nowrap;
}
.mtd-cost-pill .mtd-label {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.mtd-cost-pill .mtd-value {
  color: var(--text);
  font-weight: 700;
}
.mtd-cost-pill.mtd-ok       { background: rgba(45, 164, 78, 0.12); }
.mtd-cost-pill.mtd-ok .mtd-value { color: var(--success, #2da44e); }
.mtd-cost-pill.mtd-pending  { background: var(--status-blocked-bg); }
.mtd-cost-pill.mtd-pending .mtd-value { color: var(--status-blocked-text); font-weight: 600; }
.mtd-cost-pill.mtd-unknown  { background: var(--status-killed-bg); }
.mtd-cost-pill.mtd-unknown .mtd-value { color: var(--text-muted); }

/* HOME button — hidden by default (desktop has no use for it); shown on
   mobile when the user is on a detail view OR off the mobile-control
   surface entirely. The mobile_control module toggles .hidden. */
.mc-home-btn { display: none; }
@media (max-width: 768px) {
  .mc-home-btn { display: inline-flex; }
  .mc-home-btn.hidden { display: none; }
}

/* Mobile-only: un-hide the token-budget + hw-stats chips so the FIXED TOP
   BAR carries them. The desktop hide rules at lines ~3287 and ~4676 are
   reverted here for phones. version-strip is EXCLUDED — it was making the
   bar overflow at 360-414px; it moves to the bottom-left version subscript
   (#version-subscript) instead. (2026-06-28: cc-uptime-chip was removed
   entirely — per-server uptime now lives in the Servers detail view.) */
@media (max-width: 768px) {
  /* Override line ~4676 (mobile header overflow fix) — un-hide token. */
  .header-actions #token-budget { display: inline-flex; }
  /* Mobile-nav v2 (2026-06-14): NET joins CPU + MEM in the fixed top bar so
     the network chip is visible alongside CPU + MEM per spec ("CPU, memory,
     AND network"). The chips compact below to keep the row from clipping at
     360-414px viewports. */
  .hw-stats { display: inline-flex; }
  .hw-stats #hw-net { display: inline-flex; }
  /* version-strip hidden on mobile — moved to bottom-left subscript. */
  .hw-stats #version-strip { display: none; }
  /* MTD chip stays visible on mobile (overrides nothing — already shown). */
  .header-actions #mtd-cost { display: inline-flex; }
  /* Compact the chips so token + CPU/MEM/NET + MTD fit at 360-414px. */
  .header-actions #token-budget,
  .header-actions #mtd-cost { font-size: 10px; padding: 2px 6px; }
  .header-actions .hw-chip { font-size: 9px; padding: 1px 4px; }
}

/* ─── Mobile-nav HOME tile grid + detail panels (2026-06-14) ───────── */

.mc-nav-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.mc-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0;
}
.mc-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 84px;
  padding: 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mc-tile:active { background: var(--bg); }
.mc-tile-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.mc-tile-count {
  font-size: 18px;
  font-family: monospace;
  font-weight: 700;
  color: var(--accent);
  align-self: flex-end;
}
/* Action-bearing tiles (gates / alerts / workers / services) get a
   coloured left edge so they stand out from the desktop-handoff tiles. */
.mc-tile-action   { border-left: 3px solid var(--status-blocked-text); }
.mc-tile-service  { border-left: 3px solid var(--success, #2da44e); }
.mc-tile-summary  { border-left: 3px solid var(--border); }
.mc-tile-desktop  { border-left: 3px solid var(--text-muted); }

/* Detail view: header above body */
.mc-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 2px;
}
.mc-detail-title {
  font-size: 15px;
  font-weight: 700;
}
.mc-detail-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-detail-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}
.mc-summary-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  font-family: monospace;
  color: var(--text-muted);
}

/* Desktop-handoff body inside detail (Tasks/Bugs/Costs/etc tiles) */
.mc-desktop-handoff {
  padding: 16px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
}
.mc-desktop-handoff-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Mobile-nav v2 (2026-06-14) — 3-layer phone menu ────────────────
   Replaces the prior 2-column tile grid. Layer 0 favorites strip lives
   inside the mobile-control view; Layer 1 is a vertical list of category
   buttons; Layer 2 is the category-specific phone-native list; Layer 3
   is the detail/action surface. */

/* BAR 2 — favorites bar. Hosted at the top level inside #mobile-fav-bar
   (immediately under BAR 1, always visible on mobile, hidden on desktop).
   Always renders EXACTLY 5 fixed-width slots; filled slots show the
   favorite label, empty slots show a "+" affordance. */
.mobile-fav-bar { display: none; }
@media (max-width: 768px) {
  .mobile-fav-bar {
    display: block;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 4px 6px;
  }
}
.mc-fav-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}
.mc-fav-strip-5slot > .mc-fav-slot {
  flex: 1 1 0;
  min-width: 0;
}
.mc-fav-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
  line-height: 1.1;
  overflow: hidden;
}
.mc-fav-slot-filled {
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.10);
}
.mc-fav-slot-filled:active { background: rgba(88, 166, 255, 0.25); }
.mc-fav-slot-empty {
  border-style: dashed;
  color: var(--text-muted);
}
.mc-fav-slot-num {
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.mc-fav-glyph { color: var(--accent); font-size: 11px; }
.mc-fav-label {
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MAIN — HOME card grid. Two columns of expandable button cards. Pressing
   a card drills into the category list → detail. Restored 2026-06-14 to
   undo the regression where the fix-wave reverted to a 1-column list and
   reintroduced the desktop services submenu on mobile. */
.mc-home-menu { padding: 4px 0 8px; }
.mc-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── mc-home status block (Task #456 phone-fix) ─────────────────────────
   Full-width strip above the card grid. Shows CC uptime + SW/server
   version. Spans both grid columns via grid-column: 1 / -1. */
.mc-status-block {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 4px 2px;
}
.mc-status-chip {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  white-space: nowrap;
}
.mc-version-ok  { color: var(--status-running-text); border-color: var(--status-running-text); }
.mc-version-mismatch { color: var(--status-blocked-text); border-color: var(--status-blocked-text); }
/* Bug #587 (Part C): when stale, the home version chip is a real tap-to-update
   target (min touch height + pointer), so the update is reachable from the card
   grid without hunting for the bottom-left button. */
.mc-version-tappable {
  cursor: pointer;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  background: var(--status-blocked-bg);
  -webkit-tap-highlight-color: transparent;
}
.mc-menu-card-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.mc-menu-card {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 6px;
  width: 100%;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 72px;
}
.mc-menu-card:active { background: var(--bg); }
.mc-menu-card-label {
  grid-column: 1 / span 2;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-menu-card-count {
  grid-column: 1;
  grid-row: 2;
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  color: var(--accent);
  font-weight: 700;
  text-align: left;
}
.mc-menu-card-chevron {
  grid-column: 2;
  grid-row: 2;
  color: var(--text-muted);
  font-size: 16px;
  align-self: end;
}
.mc-menu-card-fav {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 28px;
  min-height: 28px;
  padding: 2px 6px;
  font-size: 14px;
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mc-menu-card-fav:active { background: var(--bg); }

/* Action vs summary cards: subtle left-edge accent so Steven can spot
   action-bearing categories (servers/workers/alerts) at a glance. */
.mc-menu-card.mc-menu-action   { border-left: 3px solid var(--status-blocked-text); }
.mc-menu-card.mc-menu-summary  { border-left: 3px solid var(--border); }

/* Compatibility shims — older selectors still match for the rare scope
   they govern. These shouldn't render on mobile any more (the cards are
   the live surface), but desktop test harnesses may instantiate the
   shapes. */
.mc-menu-row { display: flex; align-items: center; gap: 10px; }
.mc-menu-label { font-weight: 600; }
.mc-menu-count { font-family: monospace; color: var(--accent); font-weight: 700; }
.mc-menu-chevron { color: var(--text-muted); }
.mc-menu-fav { color: var(--accent); }

/* Pane header (used on Layer 2 + Layer 3) — back button + title + fav star */
.mc-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.mc-pane-back { padding: 6px 10px; font-size: 13px; }
.mc-pane-home {
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
  color: var(--accent);
}
.mc-pane-title {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-pane-fav {
  font-size: 18px;
  padding: 6px 10px;
  color: var(--accent);
}

/* Layer 2 — phone-native list rows */
.mc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 12px;
}
.mc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px;
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
}
.mc-row:active { background: var(--panel); }
.mc-row-static { cursor: default; }
.mc-row-line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  grid-column: 1 / span 1;
}
.mc-row-line2 {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1 / span 1;
}
.mc-row-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--text-muted);
  font-size: 18px;
}
.mc-row-id { color: var(--accent); font-weight: 600; }
/* Action #82: last-activity clock on the mobile worker row, pushed to the far
   right of line 1 (mirrors the desktop card). */
.mc-row-last-activity {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.mc-row-title { font-weight: 600; max-width: 100%; }
.mc-row-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  font-weight: 700;
  background: var(--status-killed-bg);
  color: var(--status-killed-text);
  text-transform: uppercase;
}
.mc-row-status.mc-status-in_process,
.mc-row-status.mc-status-open,
.mc-row-status.mc-status-in_progress { background: var(--status-running-bg); color: var(--status-running-text); }
.mc-row-status.mc-status-blocked,
.mc-row-status.mc-status-investigating,
.mc-row-status.mc-status-untriaged { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.mc-row-status.mc-status-done,
.mc-row-status.mc-status-completed,
.mc-row-status.mc-status-closed { background: var(--status-done-bg); color: var(--status-done-text); }
.mc-row-sev {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.mc-row-sev.mc-sev-critical,
.mc-row-sev.mc-sev-high { background: rgba(218, 54, 51, 0.18); color: var(--danger); }
.mc-row-sev.mc-sev-warning,
.mc-row-sev.mc-sev-medium { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.mc-row-sev.mc-sev-info,
.mc-row-sev.mc-sev-low { background: var(--status-done-bg); color: var(--status-done-text); }
.mc-row-project { font-weight: 500; color: var(--text); }
.mc-row-meta { color: var(--text-muted); font-size: 11px; }
.mc-row-cost { cursor: default; }
.mc-row-cost-value {
  font-family: monospace;
  color: var(--accent);
  font-weight: 700;
  margin-left: auto;
}

/* Costs list header (AEMS MTD aggregate, top of Layer 2) */
.mc-costs-header {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 8px;
}
.mc-costs-mtd {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mc-costs-mtd-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.mc-costs-mtd-value {
  font-size: 22px;
  font-family: monospace;
  font-weight: 700;
  color: var(--accent);
}
.mc-costs-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Layer 3 — detail surface (read-only fields + action grid) */
.mc-detail-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 12px;
}
.mc-detail-title-line {
  font-size: 15px;
  font-weight: 700;
}
.mc-detail-field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.mc-detail-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  min-width: 90px;
}
.mc-detail-val {
  flex: 1 1 auto;
  font-size: 13px;
  word-break: break-word;
}
.mc-detail-gate {
  border: 1px solid var(--status-blocked-text);
  border-radius: var(--radius);
  background: var(--status-blocked-bg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-detail-gate-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--status-blocked-text);
}
.mc-detail-gate-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.mc-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}
.mc-action-grid .mc-action-btn { min-height: 44px; }

/* Spec items 3-5 (2026-06-14): project-grouped middle step rows. Right-
   aligned count chip mimics the count display in the rail rollup. */
.mc-row-grouped {
  background: var(--panel);
}
.mc-row-grouped-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.4px;
  align-self: center;
}

/* Spec item 6 (2026-06-14): project-detail sub-menu rows that drill into
   project-scoped Tasks/Bugs/Alerts/Workers lists. */
.mc-project-subnav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.mc-row-subnav { background: var(--panel); }

/* Spec item 2 (2026-06-14): worker-detail stdout tail block. */
.mc-worker-stdout-collapsible {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 8px 10px;
}
.mc-stdout-summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.mc-worker-stdout {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

/* Spec item 7 (2026-06-14): mobile cost-spreadsheet readability fix. The
   default desktop label column wraps onto a single mono cell that grows
   freely; on a 360-414px phone the label dominates the row so Steven
   had to swipe a long way past it before reaching the cost. Constrain
   label + project to capped widths and re-allow the table to scroll
   horizontally with the rest of the row visible. */
@media (max-width: 768px) {
  .costs-view { padding: 8px; max-width: 100%; }
  .costs-toolbar { gap: 6px 8px; }
  .costs-search { min-width: 0; font-size: 0.85em; }
  .costs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .costs-table { font-size: 0.8em; min-width: 560px; }
  .costs-table th, .costs-table td { padding: 5px 6px; }
  .costs-label-cell {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .costs-table td:nth-child(2) {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ─── Mobile submenu / CSS polish (2026-06-14) ───────────────────────────
   New polish wave for the phone:

   1. Filterable list submenus (chips at top of projects/tasks/bugs/alerts)
      mirror the desktop submenu — domain chips + project chips with the
      same accent state. A horizontal-scroll strip keeps the row compact
      so the row list stays the dominant surface.

   2. Type hierarchy:
        - List/detail titles  → 14-15px, weight 600-700, near-white #e6edf3.
        - Secondary metadata  → 12px, muted gray #8b949e.
        - Micro tags (status, sev, priority) → 10px, weight 700, uppercase.
      Established here as overrides on the existing .mc-row family. Desktop
      is unaffected — every rule is gated by @media (max-width: 768px) or
      scoped to selectors that only exist inside #view-mobile-control.

   3. Contrast & accent:
        - Primary text uses a dedicated --mc-text-primary so the dark
          panel reads as intentional, not flat. Mid-gray stays for
          secondary.
        - Accent is the existing #58a6ff GitHub blue — kept restrained:
          only used for active filter chips, in-card star, the favorite
          accent edge, and counts. Steven can swap the accent later by
          editing the --mc-accent token.

   4. Semantic colors:
        - Priority high/medium/low map onto the same semantic scale as
          severity so a glance reads consistent across cats (red/amber/
          blue or gray for trivial).
        - Status pills already use the running/blocked/done buckets;
          this pass adds a "needs-attention" amber for `broken` /
          `remediation` so projects with those statuses stand out.

   5. Spacing rhythm: chips/strips/rows snap to 4 / 8 / 12 / 16 grid.
      Tap targets stay >=44px.
*/

#view-mobile-control {
  /* Tunable accent / typography tokens — change these to swap the
     mobile-control look without hunting through every rule below. */
  --mc-accent: var(--accent);
  --mc-text-primary: #e6edf3;
  --mc-text-secondary: var(--text-muted);
  --mc-radius: 8px;
  --mc-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px var(--border);
}
[data-theme="light"] #view-mobile-control {
  --mc-text-primary: #1f2328;
  --mc-text-secondary: #656d76;
  --mc-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.03), 0 0 0 1px var(--border);
}

/* ── Filter bar ──────────────────────────────────────────────────────── */
.mc-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.mc-filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px;
}
.mc-filter-row::-webkit-scrollbar { display: none; }
.mc-filter-chip {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--mc-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.mc-filter-chip:active { background: var(--bg); }
.mc-filter-chip.is-active {
  background: rgba(88, 166, 255, 0.14);
  border-color: var(--mc-accent);
  color: var(--mc-text-primary);
}
.mc-filter-chip-domain.is-active {
  background: rgba(88, 166, 255, 0.18);
}
.mc-filter-chip-project.is-active {
  background: rgba(88, 166, 255, 0.22);
}

/* ── Academic card (Wave 6) ──────────────────────────────────────────────
   Every color rides an mc-token or core token so the card flips cleanly on
   [data-theme] dark/light. The A&M maroon theme does not reach this shell. */
.mc-acad { display: flex; flex-direction: column; gap: 12px; }
.mc-acad-sec {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--mc-radius, 8px);
  padding: 10px;
}
.mc-acad-sec-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mc-text-secondary);
  margin-bottom: 8px;
}
.mc-acad-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.mc-acad-row:first-child { border-top: none; }
.mc-acad-row-title { color: var(--mc-text-primary); font-size: 14px; }
.mc-acad-row-meta { color: var(--mc-text-secondary); font-size: 12px; }
.mc-acad-lbl {
  display: block;
  color: var(--mc-text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
}
.mc-acad-lbl select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  font-size: 14px;
  color: var(--mc-text-primary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--mc-radius, 8px);
}
.mc-acad-lbl select option { color: var(--mc-text-primary); background: var(--panel); }
.mc-acad-hint { color: var(--mc-text-secondary); font-size: 12px; margin-top: 8px; line-height: 1.4; }
.mc-acad-muted { color: var(--mc-text-secondary); }
.mc-acad-rec-idle { display: flex; flex-direction: column; gap: 8px; }
.mc-acad-rec-start { width: 100%; }
.mc-acad-rec-live { display: flex; flex-direction: column; gap: 8px; }
.mc-acad-rec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-acad-rec-status { color: var(--mc-text-primary); font-weight: 600; font-size: 14px; }
.mc-acad-rec-elapsed { color: var(--mc-text-secondary); font-variant-numeric: tabular-nums; font-size: 14px; }
.mc-acad-rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--danger, #f85149);
  animation: mc-acad-pulse 1.4s ease-in-out infinite;
}
@keyframes mc-acad-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.mc-acad-chip {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--mc-text-primary);
  background: var(--bg);
  border: 1px solid var(--border);
}
.mc-acad-rec-stop { width: 100%; }

/* ── Mail card (Bug #539: mobile card, mirrors js/panels/cc/mail/panel.css) ─
   Same [data-theme] token discipline as the Academic card above. */
.mc-mail { display: flex; flex-direction: column; gap: 10px; }
.mc-mail-refresh-btn { align-self: flex-start; }
.mc-mail-body { display: flex; flex-direction: column; gap: 10px; }
.mc-mail-status-line { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.mc-mail-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 1px 6px; border-radius: 4px; border: 1px solid transparent;
  color: var(--mc-text-primary);
}
.mc-mail-status-available { color: var(--status-running-text); border-color: var(--status-running-text); }
.mc-mail-status-awaiting_first_poll { color: var(--status-blocked-text); border-color: var(--status-blocked-text); }
.mc-mail-status-unconfigured { color: var(--status-blocked-text); border-color: var(--status-blocked-text); }
.mc-mail-poll-error { font-size: 11px; color: var(--danger, #f85149); }
.mc-mail-setup {
  background: var(--panel); border: 1px dashed var(--status-blocked-text);
  border-radius: var(--mc-radius, 8px); padding: 10px;
}
.mc-mail-setup-head { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--mc-text-primary); }
.mc-mail-list { display: flex; flex-direction: column; gap: 8px; }
.mc-mail-msg {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--mc-radius, 8px); padding: 8px 10px; font-size: 13px;
}
.mc-mail-msg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-mail-msg-subject { font-weight: 600; color: var(--mc-text-primary); }
.mc-mail-msg-snippet { font-size: 12px; color: var(--mc-text-secondary); margin-top: 4px; }

/* ── Mobile-control polish (compact rows, type hierarchy) ────────────── */
@media (max-width: 768px) {
  /* Tighter container padding so the row list fills the viewport. */
  #view-mobile-control { padding: 8px 8px 24px; gap: 8px; }

  /* Type hierarchy — primary text near-white; secondary muted. The
     existing dark theme already uses --text but the mc surface bumps
     primary so it reads as deliberately dark, not flat gray-on-black. */
  #view-mobile-control,
  #view-mobile-control .mc-row,
  #view-mobile-control .mc-detail-val,
  #view-mobile-control .mc-menu-card-label {
    color: var(--mc-text-primary);
  }
  #view-mobile-control .mc-row-line2,
  #view-mobile-control .mc-row-meta,
  #view-mobile-control .mc-row-project,
  #view-mobile-control .mc-detail-key {
    color: var(--mc-text-secondary);
  }

  /* HOME cards — slightly more breathing room + a subtle card shadow so
     the surface reads as intentional rather than flat panels. */
  #view-mobile-control .mc-menu-card {
    padding: 14px 14px 12px;
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-card);
  }
  #view-mobile-control .mc-menu-card-label { font-size: 14px; letter-spacing: 0.1px; }
  #view-mobile-control .mc-menu-card-count {
    color: var(--mc-accent);
    font-weight: 700;
  }

  /* Compact row — kills the verbose two-line layout where line 2 was
     "open: N tasks". Title gets one line, metadata sits on a short
     secondary line. Rows are pill-bordered with subtle shadow. */
  #view-mobile-control .mc-row-compact {
    padding: 10px 12px;
    border-radius: var(--mc-radius);
    background: var(--bg);
    box-shadow: var(--mc-shadow-card);
    min-height: 56px;
    gap: 2px;
  }
  #view-mobile-control .mc-row-compact .mc-row-line1 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
  }
  #view-mobile-control .mc-row-compact .mc-row-line2 {
    font-size: 11px;
    line-height: 1.25;
    color: var(--mc-text-secondary);
  }
  #view-mobile-control .mc-row-compact .mc-row-title {
    font-weight: 600;
    color: var(--mc-text-primary);
  }
  #view-mobile-control .mc-row-compact .mc-row-project {
    font-weight: 500;
    color: var(--mc-text-primary);
    opacity: 0.85;
  }

  /* Pane header polish — tighter, less chrome, accent star at right. */
  #view-mobile-control .mc-pane-header {
    padding: 6px 4px 6px;
    margin-bottom: 8px;
  }
  #view-mobile-control .mc-pane-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-text-primary);
    letter-spacing: 0.1px;
  }
}

/* ── Status pills (extended) ───────────────────────────────────────────
   Adds amber needs-attention buckets for `broken` and `remediation` so
   project rows that need eyes pop without changing the running/done
   semantics elsewhere. */
.mc-row-status.mc-status-broken,
.mc-row-status.mc-status-remediation,
.mc-row-status.mc-status-fix-scoped {
  background: var(--status-blocked-bg);
  color: var(--status-blocked-text);
}
.mc-row-status.mc-status-proposal,
.mc-row-status.mc-status-paused,
.mc-row-status.mc-status-delegated {
  background: var(--status-killed-bg);
  color: var(--status-killed-text);
}

/* ── Priority badge (new) ──────────────────────────────────────────────
   Tasks/actions carry a priority field. Map onto the same red/amber/blue
   scale as severity so the visual language stays consistent. */
.mc-row-pri {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.mc-row-pri.mc-pri-high     { background: rgba(218, 54, 51, 0.18); color: var(--danger); }
.mc-row-pri.mc-pri-medium   { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.mc-row-pri.mc-pri-low      { background: var(--status-done-bg); color: var(--status-done-text); }

/* ── Domain chip in row (small inline tag for projects list) ─────────── */
.mc-row-domain {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--status-killed-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  vertical-align: middle;
}
/* Per-domain accent so a quick glance separates netsuite from personal,
   etc. The values mirror --cat-* tokens already defined at :root. */
.mc-row-domain.mc-domain-netsuite,
.mc-filter-chip.mc-domain-netsuite.is-active { background: rgba(31, 111, 235, 0.18); color: #79b8ff; border-color: #1f6feb; }
.mc-row-domain.mc-domain-bridge_infra,
.mc-filter-chip.mc-domain-bridge_infra.is-active { background: rgba(137, 87, 229, 0.18); color: #b392f0; border-color: #8957e5; }
.mc-row-domain.mc-domain-command_center,
.mc-filter-chip.mc-domain-command_center.is-active { background: rgba(45, 164, 78, 0.16); color: #3fb950; border-color: #2da44e; }
.mc-row-domain.mc-domain-business,
.mc-filter-chip.mc-domain-business.is-active { background: rgba(27, 128, 116, 0.18); color: #4fd1c5; border-color: #1b8074; }
.mc-row-domain.mc-domain-personal,
.mc-filter-chip.mc-domain-personal.is-active { background: rgba(212, 130, 42, 0.18); color: #f0b76b; border-color: #d4822a; }
.mc-row-domain.mc-domain-academic,
.mc-filter-chip.mc-domain-academic.is-active { background: rgba(110, 118, 129, 0.20); color: #c9d1d9; border-color: #6e7681; }
.mc-row-domain.mc-domain-carbon_rise,
.mc-filter-chip.mc-domain-carbon_rise.is-active { background: rgba(45, 164, 78, 0.14); color: #2da44e; border-color: #2da44e; }
.mc-row-domain.mc-domain-united_transcript,
.mc-filter-chip.mc-domain-united_transcript.is-active { background: rgba(218, 54, 51, 0.14); color: #f85149; border-color: #da3633; }

/* =========================================================================
   Task #194 — Archive / filing-away affordance
   ========================================================================= */

.archive-view {
  padding: 0 8px 16px;
}

.archive-loading,
.archive-error,
.archive-empty {
  padding: 16px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}

/* Stale tray */
.archive-stale-tray {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.archive-stale-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(217, 119, 6, 0.10);
  border-bottom: 1px solid var(--border);
}

/* Archive section (collapsed by default) */
.archive-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.archive-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-secondary, #161b22);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.archive-toggle-btn {
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  background: var(--surface-secondary, #161b22);
  color: var(--text-primary);
}

.archive-toggle-btn:hover {
  background: var(--surface-hover, #1c2128);
}

.archive-section-title {
  flex: 1;
}

.archive-section-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.archive-section-toggle {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 10px;
}

.archive-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-tertiary, #21262d);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Stale tray badge gets an amber accent */
.archive-stale-header .archive-badge {
  background: rgba(217, 119, 6, 0.20);
  color: #f0b76b;
  border-color: #d4822a;
}

.archive-section-body {
  padding: 4px 0;
}

/* Groups within the archive body */
.archive-group {
  margin: 4px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.archive-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-tertiary, #21262d);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.archive-group-list {
  max-height: 320px;
  overflow-y: auto;
}

/* Individual archive rows */
.archive-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle, rgba(48, 54, 61, 0.5));
  font-size: 12px;
  min-height: 34px;
}

.archive-row:last-child {
  border-bottom: none;
}

.archive-stale-list .archive-row {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(48, 54, 61, 0.5));
}

.archive-row-id {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  min-width: 32px;
}

.archive-row-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.archive-row-proj {
  font-size: 10px;
  color: var(--text-muted);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-tertiary, #21262d);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
}

.archive-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.archive-row-status {
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Status badge overrides for archive-specific statuses */
.status-archived  { background: rgba(147, 51, 234, 0.15); color: #c084fc; border-color: rgba(147, 51, 234, 0.4); }
.status-closed    { background: rgba(55, 65, 81, 0.30);   color: #9ca3af; border-color: rgba(55, 65, 81, 0.6); }
.status-deferred  { background: rgba(55, 65, 81, 0.20);   color: #9ca3af; border-color: rgba(55, 65, 81, 0.4); }
.status-done      { background: rgba(22, 163, 74, 0.15);  color: #4ade80; border-color: rgba(22, 163, 74, 0.4); }
.status-cancelled { background: rgba(55, 65, 81, 0.20);   color: #6b7280; border-color: rgba(55, 65, 81, 0.4); }

/* ─── V2 Autonomy Monitor ─────────────────────────────────────── */

.v2am-root {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

/* Controls bar */
.v2am-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.v2am-status-msg {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Offline banner */
.v2am-offline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(218, 54, 51, 0.10);
  color: var(--text-muted);
  font-size: 13px;
  border: 1px solid rgba(218, 54, 51, 0.25);
}

.v2am-offline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}

/* Section titles */
.v2am-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Collective metrics grid */
.v2am-collective {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.v2am-collective-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.v2am-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
}

.v2am-metric-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.v2am-metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.v2am-metric.v2am-metric-danger .v2am-metric-value { color: var(--danger); }
.v2am-metric.v2am-metric-warn   .v2am-metric-value { color: #d4822a; }
.v2am-metric.v2am-metric-muted  .v2am-metric-value { color: var(--text-muted); font-size: 12px; }

/* Actors table */
.v2am-table-wrap {
  overflow-x: auto;
}

.v2am-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.v2am-table th,
.v2am-table td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.v2am-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.v2am-table td { color: var(--text); }

/* Cross-contamination highlight — the primary signal Steven cares about */
.v2am-row-contaminated {
  background: rgba(218, 54, 51, 0.08);
}

.v2am-row-contaminated td { color: #f85149; }

.v2am-contamination-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.v2am-files-contaminated { color: var(--danger); }

/* Actor label */
.v2am-actor-label {
  font-weight: 500;
  white-space: nowrap;
}

/* Per-actor percentage */
.v2am-pct-danger { color: var(--danger); font-weight: 600; }
.v2am-pct-warn   { color: #d4822a;       font-weight: 600; }
.v2am-pct-src    { font-size: 9px; opacity: 0.7; }

/* Collective headline source badges */
.v2am-src-live { font-size: 9px; color: #2ea043; margin-left: 3px; letter-spacing: 0.02em; }
.v2am-src-est  { font-size: 9px; color: var(--text-muted); margin-left: 3px; opacity: 0.8; }

/* Truncated UUID in actor label — dotted underline signals tooltip exists */
.v2am-id-short { cursor: help; border-bottom: 1px dotted var(--text-muted); }

/* Worker / conductor status badges */
.v2am-status-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.v2am-status-active    { background: #1a3a1a; border-color: #2ea043; color: #2ea043; }
.v2am-status-recycled  { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
.v2am-status-crashed   { background: #3a1a1a; border-color: #f85149; color: #f85149; }
.v2am-status-parked    { background: #2a2a1a; border-color: #d4822a; color: #d4822a; }
.v2am-status-conductor { background: var(--bg); border-color: var(--border); color: var(--text-muted); }

/* Inline chips (projects list, etc.) */
.v2am-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Empty state */
.v2am-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 0;
}

/* Spawn dialog — floating inline overlay */
.v2am-spawn-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(440px, 90vw);
  padding: 0;
}

.v2am-spawn-inner {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v2am-spawn-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.v2am-spawn-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: -4px;
}

.v2am-spawn-input,
.v2am-spawn-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  font-family: var(--font-sans);
  resize: vertical;
}

.v2am-spawn-input:focus,
.v2am-spawn-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.v2am-spawn-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.v2am-spawn-result {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
}

/* ─── Ingest Hub (Task #453) ──────────────────────────────────────────────── */

.ingest-btn {
  font-size: 16px;
  padding: 2px 6px;
  opacity: 0.85;
}
.ingest-btn:hover { opacity: 1; }

.ingest-modal-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ingest-modal-body { display: flex; flex-direction: column; gap: 14px; }

/* File source row */
.ingest-source-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ingest-file-label { display: inline-flex; cursor: pointer; }
.ingest-file-input { display: none; }
.ingest-pick-btn {
  display: inline-block; cursor: pointer;
  user-select: none; white-space: nowrap;
}
.ingest-drop-zone {
  flex: 1; min-width: 120px; padding: 10px 14px;
  border: 1px dashed var(--border); border-radius: 6px;
  font-size: 12px; color: var(--text-muted);
  text-align: center; cursor: default;
  transition: border-color 0.15s, background 0.15s;
}
.ingest-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(99,102,241,0.08);
  color: var(--text);
}
@media (max-width: 768px) { .ingest-drop-zone { display: none; } }

.ingest-file-preview {
  font-size: 12px; color: var(--text-muted);
  display: flex; gap: 10px; align-items: center;
  padding: 4px 0;
}
.ingest-preview-name { color: var(--text); font-weight: 500; }
.ingest-preview-size { color: var(--text-muted); }

/* Destination picker */
.ingest-dest-section { display: flex; flex-direction: column; gap: 8px; }
.ingest-dest-row { display: flex; flex-direction: column; gap: 3px; }
.ingest-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.ingest-label-narrow { margin-top: 4px; }
.ingest-optional { font-weight: 400; opacity: 0.7; }
.ingest-required { color: var(--danger, #f87171); }
.ingest-select {
  padding: 6px 8px; background: var(--panel-bg, var(--panel));
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 13px; width: 100%;
}
.ingest-select:disabled { opacity: 0.45; }

/* Context note */
.ingest-context-row { display: flex; flex-direction: column; gap: 3px; }
.ingest-context-input {
  padding: 7px 10px; background: var(--panel-bg, var(--panel));
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 13px; width: 100%;
  box-sizing: border-box;
}
.ingest-context-input:focus { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }

/* Status */
.ingest-status { font-size: 12px; padding: 6px 0; }
.ingest-status-error { color: var(--danger, #f87171); }
.ingest-status-info  { color: var(--text-muted); }
.ingest-status-success { color: var(--success, #4ade80); }

/* URL fetch row */
.ingest-url-row { display: flex; flex-direction: column; gap: 4px; }
.ingest-url-input-row { display: flex; gap: 8px; align-items: center; }
.ingest-url-input {
  flex: 1; padding: 7px 10px; background: var(--panel-bg, var(--panel));
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 13px; box-sizing: border-box;
}
.ingest-url-input:focus { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }
.ingest-url-status { font-size: 12px; padding: 3px 0; }

/* Footer */
.ingest-modal-footer { justify-content: space-between; }
.ingest-find-link { font-size: 12px; color: var(--accent, #6366f1); }
.ingest-find-link a { color: inherit; text-decoration: none; }
.ingest-find-link a:hover { text-decoration: underline; }
.ingest-footer-btns { display: flex; gap: 8px; }

/* ── Bottom-left version subscript (v10 — 2026-06-28) ──────────────────
   Always-visible tiny readout: "cc-shell-v10 · abc1234". Fixed bottom-left
   so it never competes with the top bar or modal stack. The CC ↑ uptime
   that previously prefixed this line was removed when per-server uptime
   moved into the Servers detail view.
   The container is non-interactive; #vs-version itself is tappable
   (force-update on tap — stale or not). */
.version-subscript {
  position: fixed;
  /* Bug #587: hold the surface clear of the Android gesture bar so the tap
     target is never half-covered by system chrome at the extreme bottom edge. */
  bottom: max(6px, env(safe-area-inset-bottom, 0px));
  left: 8px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  opacity: 0.55;
  /* Bug #587: previously sat in the low band (10) — BELOW the floating-window
     band (100–199), so any open panel (a sibling in the body stacking order)
     painted over the bottom-left corner and half-obstructed the update button.
     Hoist it into its own isolated stacking context above the float/toast
     layers so it can never be undercut by a sibling. isolation:isolate makes
     this element a self-contained context; the high z-index keeps it on top. */
  z-index: var(--z-update, 900);
  isolation: isolate;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.5;
  user-select: none;
}
#vs-version {
  pointer-events: auto;
  cursor: pointer;
}
#vs-version:hover { opacity: 0.85; }
#vs-version.vs-mismatch {
  color: var(--status-blocked-text);
  opacity: 1;
}
#vs-version.vs-mismatch:hover { opacity: 0.8; }
/* Bug #587 (Part A): when an update is actually available, the mobile update
   button stops being a passive 10px subscript and becomes a full, obvious,
   finger-sized tap target that cannot be half-obstructed or missed. Desktop is
   unaffected — .version-subscript is display:none at >=769px (see below). */
@media (max-width: 768px) {
  #vs-version.vs-update-ready {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--status-blocked-text);
    background: var(--status-blocked-bg);
    color: var(--status-blocked-text);
    opacity: 1;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
    max-width: calc(100vw - 16px);
  }
}
/* (Bug #442) The separate "Update available / Update" toast was removed so the
   version chip is the single update affordance; its .vs-toast-action-btn style
   went with it. */

/* ── Header-inline version chip (Bug #267) ────────────────────────────────
   Sits immediately right of "HGW Command Center" in the top bar (desktop).
   Small, muted, monospace — same visual family as the bottom-left subscript
   but positioned so the sub-menu can't overlap it. Tap semantics match:
   force-update on click, amber on stale. Hidden on mobile — the existing
   .version-subscript at bottom-left remains the mobile fallback. */
.vs-version-header {
  margin-left: 10px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  opacity: 0.6;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  align-self: center;
}
.vs-version-header:hover { opacity: 0.9; }
.vs-version-header.vs-mismatch {
  color: var(--status-blocked-text);
  opacity: 1;
}
.vs-version-header.vs-mismatch:hover { opacity: 0.85; }
@media (max-width: 768px) {
  /* Mobile keeps the bottom-left subscript; hide the header chip so the
     top bar stays compact. */
  .vs-version-header { display: none; }
}
@media (min-width: 769px) {
  /* Desktop: header chip is authoritative; hide the fixed bottom-left
     subscript so we don't render the same string twice. */
  .version-subscript { display: none; }
}

/* ── About-HGW popup (2026-07-02) ─────────────────────────────────────────
   The "?" icon opens a modal that explains, in plain public language, who
   Steven is + what the bridge is + what the Command Center is. The desktop
   entry sits in the top-bar utility cluster; the mobile entry sits in the
   bottom-left subscript beside #vs-version. Same modal for both. */
.about-btn {
  min-width: 26px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
/* Mobile "?" — carves out a small clickable target next to the version
   subscript text. pointer-events restored because the parent subscript
   container disables them site-wide (for the passive readout style). */
.about-btn-mobile {
  pointer-events: auto;
  margin-left: 8px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
  vertical-align: middle;
}
.about-btn-mobile:hover { opacity: 1; }
.modal-about-body h3 {
  margin: 18px 0 6px 0;
  font-size: 15px;
  font-weight: 600;
}
.modal-about-body h3:first-child { margin-top: 4px; }
.modal-about-body .modal-about-section-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-color);
}
.modal-about-body .modal-about-section-body p { margin: 0 0 8px 0; }
.modal-about-body .modal-about-section-body p:last-child { margin-bottom: 0; }
.modal-about-body .modal-about-edit-title,
.modal-about-body .modal-about-edit-body {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--input-bg, var(--bg-color));
  color: var(--text-color);
  margin-bottom: 4px;
}
.modal-about-body .modal-about-edit-body {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.modal-about-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-about-status {
  padding: 8px 18px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
}
.modal-about-status.modal-about-status-err {
  color: var(--status-blocked-text);
}
.modal-about-loading {
  padding: 12px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* =========================================================================
   Task #268 — Family Share recipient link hub
   ========================================================================= */

.share-view {
  padding: 0 8px 16px;
}

.share-loading,
.share-empty {
  padding: 16px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}

.share-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-secondary, #161b22);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.share-section-title { flex: 1; }

.share-section-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.share-list {
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(48, 54, 61, 0.5));
  font-size: 12px;
  min-height: 34px;
}

.share-row:last-child { border-bottom: none; }

.share-row-revoked { opacity: 0.65; }

.share-row-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.share-row-created {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.share-status-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.share-status-active {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border-color: rgba(22, 163, 74, 0.4);
}

.share-status-revoked {
  background: rgba(55, 65, 81, 0.20);
  color: #9ca3af;
  border-color: rgba(55, 65, 81, 0.5);
}

.share-btn-copy { flex-shrink: 0; }

.share-footnote {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.share-error {
  padding: 14px;
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.08);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}

.share-error-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #f0b76b;
}

.share-error-reason,
.share-error-message {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.share-error-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.share-error-hint code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  background: var(--surface-tertiary, #21262d);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Gallery Access section (Task #268 Part B) */

.share-hub-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.share-ga-empty {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
}

.share-ga-row {
  justify-content: flex-start;
  gap: 8px;
}

.share-ga-role-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex-shrink: 0;
}

.share-ga-role-admin       { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.4); }
.share-ga-role-curator     { background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.4); }
.share-ga-role-family-inner { background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(16,185,129,0.4); }
.share-ga-role-family-outer { background: rgba(245,158,11,0.15); color: #fbbf24; border-color: rgba(245,158,11,0.4); }

.share-ga-account-active  { background: rgba(22,163,74,0.15); color: #4ade80; border-color: rgba(22,163,74,0.4); }
.share-ga-account-pending { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.35); }
.share-ga-account-unknown { background: rgba(55,65,81,0.20); color: #9ca3af; border-color: rgba(55,65,81,0.5); }

.share-btn-revoke {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
}

.share-ga-form {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.share-ga-form-header {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
}

.share-ga-form-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-primary, #0d1117);
}

.share-ga-email-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 8px;
}

.share-ga-role-select {
  flex-shrink: 0;
  font-size: 12px;
  padding: 4px 8px;
  min-width: 130px;
}

.share-ga-grant-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 4px 12px;
}

.share-ga-degrade {
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 0 0 6px 6px;
  background: rgba(245, 158, 11, 0.06);
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Task #428 — shipped-pending-verify tray + top-of-view delta pill
   --------------------------------------------------------------------------- */

/* Task #552 (2026-07-05): the permanent top-of-view delta rule is gone.
   The verify pill now sits inside the Verify rail-section-body and the
   rail badge shows the fraction. Both share color severity classes so
   the amber-vs-red contrast tracks tier-3 (needs Steven). */

.verify-tray-submenu-pill {
  padding: 6px 10px;
  margin: 4px 8px;
  border-radius: 4px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.35);
}
.verify-tray-submenu-pill.hidden { display: none; }

.verify-tray-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f0b76b;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

.verify-tray-delta-pill:hover { text-decoration: underline; }

.verify-tray-delta-pill--red {
  color: #ff6a6a;
}
.verify-tray-delta-pill--red .verify-tray-delta-numerator {
  color: #ff6a6a;
  font-weight: 700;
}
.verify-tray-delta-pill--amber .verify-tray-delta-numerator {
  color: #f0b76b;
}
.verify-tray-delta-pill--red .verify-tray-submenu-pill,
.verify-tray-submenu-pill:has(.verify-tray-delta-pill--red) {
  background: rgba(220, 38, 38, 0.10);
  border-color: rgba(220, 38, 38, 0.45);
}

.verify-tray-delta-fraction {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.20);
  font-variant-numeric: tabular-nums;
}
.verify-tray-delta-numerator { font-weight: 700; }
.verify-tray-delta-denominator { color: var(--text-muted, #888); }
.verify-tray-delta-slash { color: var(--text-muted, #888); padding: 0 2px; }

/* Rail badge severity paint. When the header badge shows the fraction
   and tier3 > 0 (data-severity="red"), paint the whole badge red so
   Steven's eye catches it in peripheral vision. */
.rail-badge.verify-tray-fraction-badge[data-severity="red"] {
  color: #ff6a6a;
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.45);
}
.rail-badge.verify-tray-fraction-badge[data-severity="amber"] {
  color: #f0b76b;
  background: rgba(217, 119, 6, 0.20);
}

.verify-tray-view { padding: 10px; }

.verify-tray-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-primary, #30363d);
  margin-bottom: 10px;
}

.verify-tray-section-title { font-weight: 600; color: var(--text-primary); }

.verify-tray-badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.20);
  color: #f0b76b;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.verify-tray-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  font-style: italic;
}

.verify-tray-group { margin-bottom: 12px; }

.verify-tray-group-header {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
  font-weight: 600;
}

.verify-tray-group-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verify-tray-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-primary, #30363d);
  border-radius: 4px;
  background: var(--surface-secondary, #161b22);
  font-size: 13px;
}

.verify-tray-id {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.verify-tray-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.verify-tray-proj {
  font-size: 11px;
  color: var(--text-muted);
  padding: 1px 6px;
  border: 1px solid var(--border-primary, #30363d);
  border-radius: 999px;
}

.verify-tray-evidence {
  font-size: 11px;
  color: var(--text-muted);
}

.verify-tray-evidence-missing {
  font-style: italic;
  color: #d97706;
}

.verify-tray-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.verify-tray-loading,
.verify-tray-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.verify-tray-error {
  padding: 14px;
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.08);
  color: var(--text-primary);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Task #493 — tiered evidence-based graduation
   --------------------------------------------------------------------------- */

/* Tier sections */
.verify-tray-tier-section {
  margin-bottom: 16px;
  border-radius: 6px;
  border: 1px solid var(--border-primary, #30363d);
  overflow: hidden;
}

.verify-tray-tier-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
}

.verify-tray-tier-section--t1 .verify-tray-tier-header {
  background: rgba(34, 197, 94, 0.08);
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}
.verify-tray-tier-section--t2 .verify-tray-tier-header {
  background: rgba(234, 179, 8, 0.08);
  border-bottom: 1px solid rgba(234, 179, 8, 0.2);
}
.verify-tray-tier-section--t3 .verify-tray-tier-header {
  background: rgba(239, 68, 68, 0.08);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.verify-tray-tier-label {
  color: var(--text-primary);
}

/* Tier badges on rows */
.verify-tray-tier-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.verify-tray-tier-badge--t1 {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.verify-tray-tier-badge--t2 {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
.verify-tray-tier-badge--t3 {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* "N need you" badge in header */
.verify-tray-need-you-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Blocking phrase text on tier-2 rows */
.verify-tray-blocking-phrase {
  font-size: 11px;
  color: #facc15;
  font-style: italic;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.2);
  flex-shrink: 0;
}

/* Re-verify queued badge */
.verify-tray-reverify-badge {
  font-size: 10px;
  color: #a78bfa;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  flex-shrink: 0;
}

/* "N need you" sub-count in delta pill */
.verify-tray-delta-need-you {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.20);
  color: #f87171;
  font-size: 11px;
  font-weight: 700;
}

/* Batch graduate button (tier 1 section header) */
.verify-tray-btn-batch-graduate {
  margin-left: auto;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.verify-tray-btn-batch-graduate:hover {
  background: rgba(34, 197, 94, 0.25);
}
.verify-tray-btn-batch-graduate:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Flag-for-Steven and Send-reverify per-row buttons */
.verify-tray-btn-flag-steven,
.verify-tray-btn-send-reverify {
  font-size: 11px;
  padding: 2px 7px;
}

/* ─── Wave 3b — btn-success ──────────────────────────────────── */
.btn-success {
  background: var(--status-running-text);
  border-color: var(--status-running-text);
  color: #fff;
}
.btn-success:hover { filter: brightness(1.15); }

/* ─── Wave 3b — Conductor worker tree ───────────────────────── */
.conductor-worker-tree {
  margin-top: 8px;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}
.conductor-tree-worker {
  padding: 4px 0;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.conductor-tree-role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(88,166,255,0.12);
  color: var(--accent);
}
.conductor-tree-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.conductor-tree-waves {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Wave 3b — Gate affordances (conductor tile + chat) ─────── */
.conductor-gate-row {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(210,153,34,0.4);
  border-radius: var(--radius);
  background: var(--status-blocked-bg);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.conductor-gate-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(210,153,34,0.2);
  color: var(--status-blocked-text);
}

/* Chat-thread gate bubble */
.cc-msg-gate {
  background: var(--status-blocked-bg);
  border: 1px solid rgba(210,153,34,0.35);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 4px 0;
  font-size: 12px;
}
.cc-gate-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.cc-gate-type {
  font-family: var(--font-mono);
  color: var(--status-blocked-text);
}
.cc-gate-info {
  cursor: help;
  color: var(--text-muted);
  font-size: 13px;
}
.cc-gate-rationale {
  color: var(--text-muted);
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.4;
  max-height: 80px;
  overflow-y: auto;
}
.cc-gate-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cc-gate-resolved {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Task #571 / #302 — clock-in top-bar toggle + timesheet review surface */
.clock-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 4px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.clock-toggle-btn {
  font-size: 11px;
  padding: 3px 8px;
  min-width: 68px;
}
.clock-toggle-btn[data-state="in"] {
  color: var(--status-running-text);
  border-color: var(--status-running-text);
}
.clock-timer {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  min-width: 46px;
  text-align: right;
}
.clock-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.timesheet-review-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timesheet-review-backdrop[hidden] { display: none; }
.timesheet-review-modal {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: min(1280px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.timesheet-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.timesheet-review-title {
  font-size: 14px;
  font-weight: 600;
}
.timesheet-review-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.timesheet-review-tools select {
  font-size: 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 2px 4px;
  border-radius: 4px;
}
.timesheet-review-body {
  overflow: auto;
  padding: 8px 14px 14px;
}
.timesheet-review-table {
  width: 100%;
  /* Task #722 folded the Costs columns (Model / Transcript / Actual $ /
     API-equiv $ / Stdout) in, so the table is wider; the page-body
     overflow:auto wrapper gives narrow viewports a horizontal scroll. */
  min-width: 1080px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}
.timesheet-review-table th,
.timesheet-review-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 6px;
  vertical-align: top;
  text-align: left;
  overflow: hidden;
  overflow-wrap: break-word;
}
/* Task #631: fixed-layout column shares. Notes had no width cap before,
   so it grew to whatever was left even though most rows leave it empty —
   the prime target for reclaiming space. table-layout:fixed + these
   percentages keep every column readable without dead space; the
   .timesheet-page-body overflow:auto wrapper + min-width above give narrow
   viewports a horizontal scroll instead of an unreadably squeezed table. */
.ts-col-date { width: 6%; }
.ts-col-type { width: 5%; }
.ts-col-time { width: 5.5%; }
.ts-col-project { width: 11%; }
.ts-col-domain { width: 6%; }
.ts-col-min { width: 4%; }
.ts-col-workers { width: 6%; }
.ts-col-model { width: 6%; }
.ts-col-transcript { width: 6%; }
.ts-col-cost { width: 6.5%; }
.ts-col-source { width: 5.5%; }
.ts-col-status { width: 6%; }
.ts-col-notes { width: 10%; }
.ts-col-actions { width: 7%; }
.timesheet-review-table th {
  color: var(--text-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--panel);
}
.timesheet-cell-editable {
  min-width: 32px;
  max-width: 100%;
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  outline: none;
  overflow-wrap: break-word;
}
.timesheet-cell-editable[contenteditable="true"]:hover,
.timesheet-cell-editable[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.06);
}
.timesheet-cell-minutes { text-align: right; font-family: var(--font-mono); min-width: 24px; }
.timesheet-cell-notes { color: var(--text-muted); }
.timesheet-review-actions { white-space: nowrap; }
.timesheet-review-actions .btn { margin-right: 4px; }
.timesheet-review-loading,
.timesheet-review-empty,
.timesheet-review-error {
  padding: 12px 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.timesheet-review-error { color: var(--danger); }
.timesheet-review-status-cell { text-transform: capitalize; }
.timesheet-review-linetype-cell {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 600;
  white-space: nowrap;
}
.timesheet-review-linetype-human { color: var(--warning, #d9a441); }
.timesheet-review-linetype-worker { color: var(--status-running-text); }
.timesheet-col-time {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.timesheet-col-domain {
  /* Task #631: the domain column is narrow (8%) and some registry domain
     names (e.g. united_transcript) don't fit on one line at that width —
     wrap rather than nowrap+clip so the full value stays readable. */
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.timesheet-col-concurrency {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
/* Task #722 — folded-in Costs columns. Model reads lowercase like the domain
   chip; cost columns are right-aligned monospace; transcript/stdout are
   monospace byte sizes. */
.timesheet-col-model {
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.timesheet-col-transcript {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  color: var(--text-muted);
}
.timesheet-col-cost {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .clock-cluster {
    gap: 4px;
    padding: 1px 4px;
  }
  .clock-toggle-btn { min-width: 56px; padding: 2px 6px; }
  .clock-timer { min-width: 40px; }
  .clock-meta { display: none; }
}

/* ─── Task #599: topology drift sentinel panel ─────────────────────────
   Glance-first mobile redesign (2026-07-16, Steven feedback: "none of this
   is actionable... a lot of redundancy"). Lives inside #view-service-table,
   right after the services table. Default (all-in-sync) state renders as
   ONE horizontally-scrollable summary row — no wrapping, no stacked rows.
   Non-in-sync items surface automatically below it; a "show all items"
   disclosure reveals the full list on demand. Reuses .watchdog-toggle /
   .badge families and the shared --status-*/--danger-muted custom
   properties so the panel stays visually consistent with the Services
   surface above it. */
.topology-sentinel-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.topology-sentinel-panel:empty { display: none; }

/* The collapsed default state: one scrollable row, never wraps. This is the
   ONLY thing visible when every tracked item is in_sync. */
.topo-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
  font-size: 12px;
}
.topo-summary-row > * { flex: 0 0 auto; }

.topo-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.topo-chip-ok     { background: var(--status-running-bg); color: var(--status-running-text); }
.topo-chip-warn   { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.topo-chip-info   { background: var(--status-done-bg);    color: var(--status-done-text); }
.topo-chip-danger { border: 1px solid currentColor; color: var(--danger-muted); background: transparent; }
.topo-chip-muted  { background: var(--status-killed-bg);  color: var(--status-killed-text); }

.topo-summary-count { color: var(--text); font-weight: 500; }

.topo-last-check,
.topo-manifest-sha,
.topo-repairs-flag {
  color: var(--text-muted);
}
.topo-manifest-sha { font-size: 11px; }

.topo-manifest-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 20px;
  border: 1px solid currentColor;
}
.topo-manifest-committed   { color: var(--status-running-text); }
.topo-manifest-uncommitted { color: var(--status-blocked-text); }

.topo-hold-ttl {
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 6px;
}
.topo-hold-ttl:disabled { opacity: 0.5; }
.topo-hold-countdown {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--status-blocked-text);
}

/* Problems-first: any non-in_sync item, always visible when present. */
.topo-problems {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topo-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.topo-item-row:first-child { border-top: none; }
.topo-item-key { color: var(--text); font-weight: 500; }
.topo-item-detail { color: var(--text-muted); flex: 1 1 100%; }
.topo-item-streak {
  font-size: 10px;
  color: var(--status-blocked-text);
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 0 6px;
}

/* "Show all items" disclosure — native <details>, no JS wiring needed.
   Styled as a small muted affordance so it reads as an extension of the
   summary row rather than a heavy new section. */
.topo-show-all { font-size: 11px; }
.topo-show-all > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-block;
  padding: 2px 0;
}
.topo-show-all > summary::-webkit-details-marker { display: none; }
.topo-show-all > summary::before { content: "▸ "; }
.topo-show-all[open] > summary::before { content: "▾ "; }
.topo-items-all {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

/* Compact chip line for service:* items inside the expanded view — never
   shown as full rows (they duplicate the Services table above). */
.topo-services-chipline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.topo-service-chip { font-weight: 500; }

.topo-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topo-hist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 3px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.topo-hist-row:first-child { border-top: none; }
.topo-hist-time { color: var(--text-muted); white-space: nowrap; }
.topo-hist-event { color: var(--text); font-weight: 500; }
.topo-hist-item { color: var(--text-muted); }
.topo-hist-detail { color: var(--text-muted); flex: 1 1 100%; }

@media (max-width: 768px) {
  .topo-item-detail,
  .topo-hist-detail { flex-basis: 100%; }
}


/* ── Task #762: action audience (human-only vs worker-addressable) ──────────
   Shared by the desktop Actions table, the Action detail sheet, and the mobile
   action rows/detail. Human-only = amber "your plate"; automatable = calm. */
.audience-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.02em;
  padding: 0 6px; border-radius: 9px; line-height: 1.55; margin-left: 6px;
  border: 1px solid transparent; white-space: nowrap; text-transform: uppercase;
}
.audience-badge.audience-human {
  color: #f0a020; background: rgba(240,160,32,0.14); border-color: rgba(240,160,32,0.45);
}
.audience-badge.audience-worker {
  color: #6ea8fe; background: rgba(110,168,254,0.12); border-color: rgba(110,168,254,0.30);
}
/* Human-only rows get a left accent so the "your plate" set reads at a glance. */
.tasks-table tr.audience-row-human td:first-child { box-shadow: inset 3px 0 0 rgba(240,160,32,0.75); }
.tasks-table tr.action-row { cursor: pointer; }
.tasks-table tr.action-row:hover { background: var(--row-hover-bg, rgba(255,255,255,0.04)); }

.action-audience-filter {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px;
}
.action-audience-tab {
  font: inherit; font-size: 0.85em; cursor: pointer; color: inherit;
  background: var(--chip-bg, rgba(122,162,247,0.10)); border: 1px solid var(--border, #3a3a3a);
  border-radius: 6px; padding: 3px 10px;
}
.action-audience-tab:hover { border-color: var(--accent, #7aa2f7); }
.action-audience-tab.is-active {
  background: var(--accent, #2d6cdf); color: #fff; border-color: var(--accent, #2d6cdf);
}
.action-audience-count { opacity: 0.7; font-weight: 700; margin-left: 3px; }

/* ─── Bridge merge-revert surface (Task #917, read-only listing) ───────────
   Cards stack vertically so the same markup is phone-legible and desktop-fine
   (mobile windowing rules are LOCKED — this adds no floating/positioning of
   its own; it lives inside the declared window's .tab-content). */
.brv-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bridge-revert-body, .brv-wrap { color: var(--text); }
.brv-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.brv-banner {
  border: 1px solid var(--border); border-left: 3px solid var(--status-blocked-text, #d29922);
  background: var(--panel); border-radius: var(--radius); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; line-height: 1.35;
}
.brv-banner-strong { font-weight: 600; }
.brv-banner-muted { color: var(--text-muted); font-size: 0.82rem; }
.brv-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.brv-list { display: flex; flex-direction: column; gap: 8px; }
.brv-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
  padding: 9px 11px; display: flex; flex-direction: column; gap: 6px;
}
.brv-card-clean    { border-left: 3px solid var(--status-running-text, #3fb950); }
.brv-card-conflict { border-left: 3px solid var(--danger, #da3633); }
.brv-card-unknown  { border-left: 3px solid var(--status-blocked-text, #d29922); }
.brv-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brv-sha { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); }
.brv-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 10px; white-space: nowrap;
}
.brv-badge-clean    { background: var(--status-running-bg, #1a3a1a); color: var(--status-running-text, #3fb950); }
.brv-badge-conflict { background: rgba(218,54,51,0.15); color: var(--danger-hover, #f85149); }
.brv-badge-unknown  { background: var(--status-blocked-bg, #3a2a00); color: var(--status-blocked-text, #d29922); }
.brv-subject { font-size: 0.9rem; line-height: 1.3; word-break: break-word; }
.brv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.brv-chip {
  font-size: 0.72rem; color: var(--text-muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; white-space: nowrap;
}
.brv-chip code { font-family: var(--font-mono); }
.brv-chip-tag { color: var(--accent); border-color: var(--accent); }
.brv-chip-src { color: var(--status-blocked-text, #d29922); border-color: var(--status-blocked-text, #d29922); white-space: normal; }
.brv-chip-wd  { color: var(--status-running-text, #3fb950); border-color: var(--status-running-text, #3fb950); white-space: normal; }
.brv-chip-wi  { color: var(--accent); border-color: var(--border); }
.brv-chip-reverted { color: var(--text-muted); border-color: var(--text-muted); }
.brv-add { color: var(--status-running-text, #3fb950); }
.brv-del { color: var(--danger-hover, #f85149); }
.brv-reason { font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; }
.brv-reason-conflict { color: var(--danger-hover, #f85149); }
.brv-files { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.72rem; color: var(--text-muted); }
.brv-files code { font-family: var(--font-mono); word-break: break-all; }
.brv-more { font-style: italic; }
.brv-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.brv-cmd {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px;
  word-break: break-all;
}
.brv-revert-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
/* Task #917 execute half: the enabled Revert button is now live (git revert
   -m 1, reauth-gated). It is styled as a danger action to match its weight. */
.brv-revert-enabled {
  color: var(--danger-hover, #f85149);
  border-color: var(--danger-hover, #f85149);
  cursor: pointer;
}
.brv-revert-enabled:hover { background: var(--danger-hover, #f85149); color: var(--bg, #0d1117); }
.brv-loading, .brv-empty, .brv-error { font-size: 0.85rem; color: var(--text-muted); padding: 6px 2px; }
.brv-error { color: var(--danger-hover, #f85149); }