/* ================================================================
   Omega — application layout (multi-view)
   ================================================================ */

/* Single source of truth for container widths so every view + the top
   chrome share the same horizontal extent. */
:root { --view-max: 1800px; }

/* App shell: fixed left sidebar + offset main column.
   Sidebar uses `position: fixed` so it stays pinned to the viewport while
   the main column scrolls beneath the top chrome. The width is a single
   CSS variable so the collapsed-state override only needs to flip one
   value and everything (sidebar width + main margin) follows. */
:root { --sidebar-w-open: 240px; --sidebar-w: var(--sidebar-w-open); }
.app-shell.sidebar-collapsed { --sidebar-w: 64px; }
.app-shell { min-height: 100vh; }
.main-col {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .22s var(--ease);
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0.75rem 18px;
  background: linear-gradient(180deg, rgba(10, 10, 18, 0.95) 0%, rgba(10, 10, 18, 0.82) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-right: 1px solid var(--hair);
  z-index: 50;
  transition: width .22s var(--ease), padding .22s var(--ease), box-shadow .22s var(--ease);
}
/* Collapsed rail — drops to a 64px icon-only column. Labels, badges,
   "Soon" pills, group chevrons, external-link arrows, and the wordmark
   text all hide; the brand falcon and the icon glyphs survive. Items
   centre-align so the icons sit on a clean vertical axis. */
.sidebar.collapsed { padding: 0 8px 18px; }
/* The collapsed *look* rules below are gated `:not(.peek)`: during a
   hover-peek the rail keeps `.collapsed` (for its header height + icon
   column) but `.peek` switches these off, so labels reappear and the rows
   re-open to their normal layout without anything shifting vertically. */
.sidebar.collapsed:not(.peek) .sn-label,
.sidebar.collapsed:not(.peek) .sn-badge,
.sidebar.collapsed:not(.peek) .sn-soon,
.sidebar.collapsed:not(.peek) .sn-chev,
.sidebar.collapsed:not(.peek) .sn-ext-arrow,
.sidebar.collapsed:not(.peek) .wordmark { display: none; }
.sidebar.collapsed:not(.peek) .sn-item {
  justify-content: center;
  padding: 9px 6px;
  gap: 0;
}
.sidebar.collapsed:not(.peek) .brand {
  justify-content: center;
  width: 100%;
  gap: 0;
}
/* Subitems inside the (now hidden-label) Settings group still need to
   sit centred in the collapsed rail. */
.sidebar.collapsed:not(.peek) .sn-subitems,
.sidebar.collapsed:not(.peek) .sn-children { padding-left: 0; }
.sidebar.collapsed .sn-divider { margin: 8px 8px; }
/* Top sidebar toolbar — Signal-style row of icon buttons under the
   brand. Houses Search (⌘K palette) + Collapse-rail toggle. Sits
   above the primary nav and stays put in both expanded and collapsed
   states. */
.sn-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 6px;
}
.sn-toolbar-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent-soft);
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.sn-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border-color: var(--accent-faint);
}
.sn-toolbar-btn svg { display: block; }
/* Collapsed rail — toolbar drops to a single column of icons centred
   under the falcon brand. Border + bottom-margin tighten so the rail
   stays compact. */
.sidebar.collapsed .sn-toolbar {
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 8px;
}

/* ---------- Collapsed-rail hover-peek ---------- */
/* While the rail is pinned collapsed, a deliberate hover (gated by a
   ~400ms intent delay in JS) floats it open at full width *over* the
   content. Peek KEEPS `.collapsed` (see applySidebarCollapsedClass), so the
   header height, the icon column and every row's Y position are unchanged —
   the `:not(.peek)` guards above just stop hiding the labels and re-open
   the row layout. Nothing slides vertically, so the item under the cursor
   stays under the cursor. `.app-shell.sidebar-collapsed` also stays on,
   pinning --sidebar-w at 64px so .main-col never reflows; the widened rail
   floats over it. The icons (visible in collapsed) remain in place and the
   labels fade in beside them — VS Code-style. */
.sidebar.collapsed.peek {
  width: var(--sidebar-w-open);
  z-index: 60;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.66);
}
/* The toolbar stays a stacked column (that's what holds the header height
   steady); just left-align it out of its centered collapsed position now
   that the rail is wide, and pad it to sit under the brand wordmark. */
.sidebar.collapsed.peek .sn-toolbar { align-items: flex-start; padding-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ---------- Collapsed-rail tooltips ---------- */
/* A single shared tooltip element appended to <body> and positioned by
   JS via getBoundingClientRect — position: fixed means it escapes the
   .sidebar-nav's overflow clipping that would chop a CSS-only ::after
   tooltip. JS only shows it when .sidebar.collapsed, so expanded-rail
   users never see it (the visible label is already there). */
.sn-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: rgba(20, 22, 28, 0.96);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  white-space: nowrap;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity .12s ease-out, transform .12s ease-out;
}
.sn-tooltip.on {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sn-tooltip::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: rgba(20, 22, 28, 0.96);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transform: translateY(-50%) rotate(45deg);
}
.sidebar .brand {
  padding: 0;
  height: 48px;
  border-bottom: none;
  margin-bottom: 0;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding-top: 6px;
}
.sidebar-nav .sn-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--accent-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.sidebar-nav .sn-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}
.sidebar-nav .sn-item.on {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent-faint);
  color: var(--ink);
}
.sidebar-nav .sn-item.disabled {
  color: rgba(255, 255, 255, 0.22);
  cursor: not-allowed;
  pointer-events: none;
}
.sidebar-nav .sn-item.disabled .sn-soon {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.32);
}
/* Sidebar nav icons — hidden in the expanded rail so the text label
   sits flush left, shown in the collapsed rail where the icon is the
   only visual anchor. Tooltip on hover (data-tooltip → .sn-tooltip)
   identifies each icon when the rail is narrow. */
.sidebar-nav .sn-icon {
  display: none;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
  transition: opacity .12s var(--ease);
}
.sidebar.collapsed .sidebar-nav .sn-icon {
  display: inline-flex;
}
.sidebar-nav .sn-item:hover .sn-icon,
.sidebar-nav .sn-item.on .sn-icon { opacity: 1; }
.sidebar-nav .sn-icon svg { display: block; width: 100%; height: 100%; }
.sidebar-nav .sn-icon-svg svg { display: block; }
/* Image-icon variant for external links (e.g. Nova). The mark gets
   grayscale + low opacity so it reads as the same gray as the sibling
   text-glyph icons; hover/active states lift it to full ink. */
.sidebar-nav .sn-icon-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  opacity: 1; /* override .sn-icon's 0.75 — we control opacity on the img */
}
.sidebar-nav .sn-icon-mark {
  width: 16px;
  height: 16px;
  display: block;
  filter: grayscale(1) brightness(1.6);
  opacity: 0.72;
  transition: opacity .14s var(--ease), filter .14s var(--ease);
}
/* External-link sidebar item — anchor styled to match .sn-item buttons.
   The trailing ↗ glyph reads as "leaves the app". */
.sidebar-nav .sn-external {
  text-decoration: none;
}
.sidebar-nav .sn-external:hover .sn-icon-mark {
  opacity: 1;
  filter: grayscale(1) brightness(1.9);
}
.sidebar-nav .sn-ext-arrow {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  transition: color .14s var(--ease);
}
.sidebar-nav .sn-external:hover .sn-ext-arrow { color: rgba(255, 255, 255, 0.6); }
.sidebar-nav .sn-divider {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 8px 4px;
}
.sidebar-nav .sn-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(165, 180, 252, 0.18);
  color: var(--signal-cool);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--mono);
}

/* Settings group: expandable in place. */
.sidebar-nav .sn-group { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav .sn-group-toggle .sn-chev {
  margin-left: auto;
  font-size: 10px;
  opacity: .5;
  transition: transform .18s var(--ease);
}
.sidebar-nav .sn-group.open .sn-group-toggle .sn-chev { transform: rotate(90deg); }
.sidebar-nav .sn-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 24px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s var(--ease);
}
.sidebar-nav .sn-group.open .sn-children { max-height: 240px; }

.sidebar-nav .sn-bottom { margin-top: auto; }

/* On narrow screens, hide the fixed sidebar and let main-col claim full width.
   The mobile <select> in chrome handles routing. */
@media (max-width: 980px) {
  .sidebar { display: none; }
  .main-col { margin-left: 0; }
  .chrome-inner { justify-content: space-between; }
  .tabs-mobile { display: inline-block !important; max-width: 220px; }
}
@media (min-width: 981px) {
  .tabs-mobile { display: none !important; }
}

/* ---------- Top chrome (now meta-only) ---------- */
.chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(10, 10, 18, 0.82) 0%, rgba(10, 10, 18, 0.6) 70%, rgba(10, 10, 18, 0) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--hair);
}
.chrome-inner {
  max-width: var(--view-max);
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity .18s var(--ease);
}
.brand:hover { opacity: 0.85; }
.brand-mark-img {
  height: 24px; width: 24px;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.12));
}
.brand .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.wm-name { font-weight: 600; }
.wm-sep {
  width: 1px;
  height: 11px;
  background: var(--hair);
  display: inline-block;
}
.wm-os {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--soft);
  padding-top: 1px;
}
.wm-ver {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  line-height: 1;
  align-self: center;
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  width: fit-content;
  margin: 0 auto;
}
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--mid);
  transition: background .18s var(--ease), color .18s var(--ease);
  letter-spacing: 0.01em;
}
.tab:hover { color: var(--soft); background: rgba(255, 255, 255, 0.04); }
.tab.on {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tab-badge {
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--signal-high-bg);
  border: 1px solid var(--signal-high-bd);
  color: var(--signal-high);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  animation: badge-in .22s var(--ease);
}
@keyframes badge-in {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal-live);
  box-shadow: 0 0 8px var(--signal-live);
  animation: pulse 2.2s ease-in-out infinite;
}

/* ---- Chrome meta ---- */
.chrome-meta { display: flex; align-items: center; gap: 10px; justify-self: end; }
.cmd-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mid);
  letter-spacing: 0.02em;
}
.cmd-hint:hover { color: var(--ink); border-color: var(--accent-faint); }
.cmd-hint .sep { color: var(--muted); }
.backend-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mid);
  letter-spacing: 0.04em;
  cursor: default;
}
.bs-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.02);
}
.bs-dot.connected { background: var(--signal-live, #9ac2a5); box-shadow: 0 0 6px var(--signal-live, #9ac2a5); animation: pulse 2.2s ease-in-out infinite; }
.bs-dot.readonly  { background: #d4b766; box-shadow: 0 0 6px rgba(212, 183, 102, .5); }
.bs-dot.offline   { background: #d48a8a; }
.bs-dot.unknown   { background: var(--muted); opacity: 0.6; }
.bs-label { text-transform: uppercase; color: var(--soft); }
.clock {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--mid);
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
}
.client-switch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  font-size: 0.76rem;
}
.client-switch:hover { border-color: var(--accent-faint); background: rgba(255,255,255,0.07); }
.client-switch .avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b9ab6, #1a202e);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 0.7rem;
  color: var(--ink);
}
.client-switch .caret { opacity: 0.55; font-size: 0.65rem; transition: transform .18s var(--ease); }
.client-switch.scoped { border-color: var(--accent-faint); background: rgba(255,255,255,0.08); color: var(--ink); }

.client-switch-wrap { position: relative; }

.user-chip-wrap { position: relative; margin-left: 8px; }
.user-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.user-chip:hover { border-color: var(--accent-faint); transform: scale(1.05); }
.user-chip .user-avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  display: none;
}
.user-chip .user-avatar.loaded { display: block; }
.user-chip .user-initials {
  font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--ink-mid);
}
.client-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 280px;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(18, 22, 30, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  z-index: 40;
  animation: up .18s var(--ease);
}
.client-menu-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--soft);
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
.client-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.client-menu-item.on { background: rgba(255,255,255,0.07); color: var(--ink); }
.client-menu-item .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b9ab6, #1a202e);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--ink);
}
.client-menu-item .cm-name { font-weight: 500; }
.client-menu-item .cm-sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.client-menu-item .cm-sub.at_risk { color: var(--sig-warn, #d48a8a); opacity: 0.95; }
.client-menu-item .cm-sub.watch { color: #d4c89a; opacity: 0.9; }
.client-menu-item .cm-sub.on_track { color: #9ac2a5; opacity: 0.85; }
.client-menu-item .cm-sub.onboarding { color: var(--accent-faint); opacity: 0.85; }

/* ---------- View container ---------- */
.view {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--view-max);
  margin: 0 auto;
  padding: 34px 28px 80px;
  box-sizing: border-box;
}
.view.route-enter {
  animation: route-enter .22s cubic-bezier(.2, .7, .2, 1);
}
@keyframes route-enter {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .view.route-enter { animation: none; }
}

/* View Transitions API — smooth cross-fade between routes / loader→content.
   Chrome stays put because only #view's content is swapped; the API tags
   the entire root layout but the browser only animates what changed. */
@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 160ms;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
  }
}

/* ---------- Shared view header ---------- */
.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.view-head .kicker { margin-bottom: 10px; }
.view-title {
  font-family: var(--serif);
  font-size: clamp(3.6rem, 7.5vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--ink);
}
.view-title em { font-style: italic; font-weight: 400; color: var(--soft); letter-spacing: -0.01em; }
.view-sub {
  margin-top: 10px;
  color: var(--mid);
  font-size: 0.95rem;
  max-width: 720px;
  font-weight: 300;
}
.view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Shared primitives ---------- */
.searchbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
  min-width: 280px;
}
.searchbox:focus-within { border-color: var(--accent-faint); }
.searchbox .sb-icon { color: var(--muted); font-size: 0.95rem; }
.searchbox input {
  all: unset;
  flex: 1;
  font-size: 0.85rem;
  color: var(--ink);
}
.searchbox input::placeholder { color: var(--muted); }

.seg {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 0.72rem;
  color: var(--mid);
  letter-spacing: 0.03em;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.seg button:hover { color: var(--soft); }
.seg button.on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--accent-faint); color: var(--ink); }
.btn.primary { background: rgba(255, 255, 255, 0.92); color: #0a0a12; border-color: transparent; font-weight: 500; }
.btn.primary:hover { background: #ffffff; }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--signal-high-bd); color: var(--signal-high); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.7rem;
  color: var(--soft);
  white-space: nowrap;
  font-weight: 400;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { border-color: var(--accent-faint); color: var(--ink); }
.chip.on {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  border-color: var(--accent-faint);
}
.chip.off { color: var(--muted); opacity: 0.6; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.kicker { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- KPI strip ---------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  padding: 18px 22px;
  margin-bottom: 30px;
}
.kpi {
  padding: 2px 20px;
  border-left: 1px solid var(--hair);
}
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi-label {
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.kpi-value {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.kpi-value.up   { color: #9ac2a5; }
.kpi-value.down { color: #d99a9a; }
.kpi-sub {
  font-size: 0.7rem;
  color: var(--mid);
  margin-top: 5px;
  font-weight: 300;
}

/* ================================================================
   Portfolio view
   ================================================================ */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

/* Cold-boot client picker — vertical stack of clickable rows.
   Fills the view container so width is consistent with every other route. */
.client-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}
.client-picker-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
  position: relative;
  overflow: hidden;
}
.client-picker-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--muted);
  opacity: 0.4;
}
.client-picker-item.health-at_risk::before    { background: var(--signal-high, #d48a8a); opacity: 0.85; }
.client-picker-item.health-watch::before      { background: var(--signal-warn, #d4c89a); opacity: 0.8; }
.client-picker-item.health-on_track::before   { background: var(--signal-cool, #9ac2a5); opacity: 0.7; }
.client-picker-item.health-onboarding::before { background: var(--accent-faint); opacity: 0.7; }
.client-picker-item:hover {
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
}
.client-picker-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
  color: var(--bg-deep, #0c1014);
}
.client-picker-ident { min-width: 0; }
.client-picker-name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-picker-meta { font-size: 12px; opacity: .7; margin-top: 2px; }
.client-picker-chev { font-size: 18px; opacity: .55; }
.client-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
  text-align: left;
}
.client-card:hover {
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
}
.cc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cc-tier {
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.cc-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cc-vert {
  font-size: 0.75rem;
  color: var(--mid);
  font-weight: 300;
  margin-top: 2px;
}
.cc-note {
  font-size: 0.78rem;
  color: var(--soft);
  line-height: 1.5;
  font-weight: 300;
}
.cc-pace-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.cc-pace-head span.mono { color: var(--soft); }
.cc-pace-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.cc-pace-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s var(--ease);
}
.cc-pace-fill.on    { background: var(--signal-live); }
.cc-pace-fill.under { background: var(--signal-warn); }
.cc-pace-fill.over  { background: var(--signal-cool); }
.cc-pace-track.tall { height: 10px; }

/* ---------- Scoped client cockpit ---------- */
.scoped-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  margin-top: 22px;
}
.scoped-main { padding: 22px 24px; }
.scoped-rail { padding: 20px; }
.sc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 10px;
}
.sc-section-head .mono { color: var(--soft); font-size: 0.72rem; }
.sc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-rec, .sc-act {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.02);
  cursor: default;
}
.sc-rec > .pill,
.sc-act > .pill,
.sc-alert > .pill {
  width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.sc-rec { cursor: pointer; transition: border-color .18s var(--ease); }
.sc-rec:hover { border-color: var(--accent-faint); }
.sc-rec-title, .sc-act-title { font-size: 0.86rem; color: var(--ink); }
.sc-rec-detail, .sc-act-detail, .sc-alert-detail {
  font-size: 0.78rem;
  color: var(--soft);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-rec-meta, .sc-act-meta { font-size: 0.7rem; color: var(--muted); margin-top: 6px; }
.sc-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}
.sc-see-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  border: 1px dashed var(--hair);
  background: rgba(255,255,255,0.02);
  color: var(--soft);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.sc-see-more:hover {
  border-color: var(--accent-faint);
  border-style: solid;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
}
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-last { color: var(--soft); font-size: 0.82rem; }
.sc-jump { display: flex; flex-direction: column; gap: 8px; }
.sc-jump .btn { justify-content: flex-start; }

/* Back affordance + title stack */
.sc-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.sc-back {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 4px 0;
  margin-bottom: 2px;
  cursor: pointer;
  width: max-content;
  transition: color .15s var(--ease);
}
.sc-back:hover { color: var(--ink); }

/* Alerts timeline */
.sc-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-alert {
  display: grid;
  grid-template-columns: 124px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.sc-alert:hover {
  border-color: var(--accent-faint);
  background: rgba(255,255,255,0.035);
}
.sc-alert-title { font-size: 0.84rem; color: var(--ink); }
.sc-alert-meta { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.sc-alert-at { font-size: 0.66rem; color: var(--mid); white-space: nowrap; }

@media (max-width: 1100px) {
  .scoped-layout { grid-template-columns: 1fr; }
}

.cc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.cc-metric-label {
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.cc-metric-value {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.cc-metric-value.up   { color: var(--signal-live); }
.cc-metric-value.down { color: var(--signal-high); }
.cc-metric-sub {
  font-size: 0.66rem;
  color: var(--mid);
  margin-top: 2px;
  font-weight: 300;
}
.cc-services { display: flex; flex-wrap: wrap; gap: 4px; }
.svc-chip { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; min-width: 28px; }
.svc-chip img { pointer-events: none; }

/* Bird loader — shown while clients hydrate from backend.
   Falcon-wing mark drawn from a single line into a fan of feathers. */
.bird-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 80px 20px;
  color: var(--soft);
}
.bird-loader-svg { color: var(--ink); overflow: visible; }
.bird-loader-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Each feather draws in via stroke-dashoffset, staggered so the bird
   assembles from a single line outward into the wing fan, then fades
   and loops. */
.bird-loader-svg .feather {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  opacity: 0;
  animation: feather-draw 3s cubic-bezier(.4, .1, .3, 1) infinite;
}
.bird-loader-svg .f1 { animation-delay: 0s;    }
.bird-loader-svg .f2 { animation-delay: 0.12s; }
.bird-loader-svg .f3 { animation-delay: 0.24s; }
.bird-loader-svg .f4 { animation-delay: 0.36s; }
.bird-loader-svg .f5 { animation-delay: 0.48s; }
.bird-loader-svg .f6 { animation-delay: 0.60s; }
.bird-loader-svg .f7 { animation-delay: 0.72s; }

@keyframes feather-draw {
  0%   { stroke-dashoffset: 140; opacity: 0; }
  25%  { stroke-dashoffset: 0;   opacity: 1; }
  70%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -140; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bird-loader-svg .feather {
    stroke-dashoffset: 0;
    opacity: 1;
    animation: none;
  }
}
.cc-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.7rem;
  color: var(--muted);
  padding-top: 6px;
  border-top: 1px solid var(--hair);
  flex-wrap: wrap;
}
.cc-owner { color: var(--soft); }
.cc-last { color: var(--mid); text-align: right; flex: 1; min-width: 180px; }

/* ================================================================
   Watchtower view
   ================================================================ */
.wt-layout {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 16px;
  align-items: start;
}
.wt-side, .wt-timeline {
  padding: 20px;
  position: sticky;
  top: 92px;
}
.wt-side-section + .wt-side-section { margin-top: 20px; }
.wt-side-section .kicker { margin-bottom: 10px; }

.side-note {
  margin-top: 12px;
  font-size: 0.7rem;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.5;
}

.posture {
  padding: 8px 0;
}
.posture-bar {
  position: relative;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--hair);
  overflow: hidden;
}
.posture-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 18px;
  background: var(--signal-cool);
  transform: translate(-50%, -50%);
  opacity: 0.8;
  border-radius: 2px;
}
.posture-tick:nth-child(4) { background: var(--signal-warn); }
.posture-tick:nth-child(5) { background: var(--signal-high); box-shadow: 0 0 6px var(--signal-high); }
.posture-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.wt-stream { display: grid; gap: 12px; }

.rec {
  padding: 18px 20px 16px 22px;
  display: grid;
  grid-template-columns: 1fr 180px;
  grid-template-areas:
    "meta     actions"
    "signal   actions"
    "proposal actions";
  gap: 10px 24px;
  align-items: start;
  position: relative;
  overflow: hidden;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.rec::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-faint);
}
.rec[data-severity="high"]::before { background: var(--signal-high); }
.rec[data-severity="med"]::before  { background: var(--signal-warn); }
.rec[data-severity="low"]::before  { background: var(--signal-cool); }
.rec:hover { border-color: rgba(255,255,255,0.22); }
.rec.dismissed { opacity: 0.35; filter: grayscale(0.6); }

.rec-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--mid);
}
.rec-meta .agent { color: var(--ink); font-weight: 500; }
.rec-meta .client { font-family: var(--serif); color: var(--ink); font-size: 0.92rem; font-weight: 400; letter-spacing: -0.015em; }
.rec-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.rec-meta .time { margin-left: auto; color: var(--muted); font-size: 0.68rem; }

.rec-signal   { grid-area: signal;   color: var(--soft); font-size: 0.9rem; line-height: 1.55; }
.rec-proposal { grid-area: proposal; color: var(--ink);  font-size: 0.92rem; line-height: 1.55; }

.rec-signal::before, .rec-proposal::before {
  content: attr(data-label);
  display: inline-block;
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-right: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--ghost);
  vertical-align: 0.12em;
}
.rec-signal::before   { content: 'signal'; }
.rec-proposal::before { content: 'proposal'; color: var(--accent-soft); background: rgba(255, 255, 255, 0.07); font-weight: 600; }

.rec-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rec-confidence {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--mid);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ghost);
  border: 1px solid var(--hair);
  text-align: center;
  margin-bottom: 3px;
}
.rec-confidence b { color: var(--ink); font-weight: 500; }

/* Timeline */
.wt-timeline .tl { display: flex; flex-direction: column; gap: 10px; }
.tl-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .15s var(--ease);
}
.tl-row:hover { background: rgba(255, 255, 255, 0.03); }
.tl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.02);
}
.tl-dot.high { background: var(--signal-high); box-shadow: 0 0 6px var(--signal-high); }
.tl-dot.med  { background: var(--signal-warn); box-shadow: 0 0 5px var(--signal-warn); }
.tl-dot.low  { background: var(--signal-cool); }
.tl-dot.cool { background: var(--signal-cool); }
.tl-text { font-size: 0.8rem; color: var(--ink); }
.tl-sub  { font-size: 0.7rem; color: var(--mid); margin-top: 2px; font-weight: 300; }
.tl-at   { color: var(--muted); font-size: 0.65rem; }

/* ================================================================
   Queue view
   ================================================================ */

/* Kanban board: 4 columns, capped at 6 cards visible (with see-more). */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}
.kb-col {
  display: flex;
  flex-direction: column;
  /* glass-soft is composed via the class; no fixed max-height — cards drive
     intrinsic height up to MAX_VISIBLE, then "see more" expands inline. */
  overflow: hidden;
}
.kb-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kb-col-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}
.kb-col-count {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
/* Column titles get color-coded per status in the v0.3 block at the bottom
   of this file (.kb-col-queued/running/needs/completed .kb-col-title). */

.kb-col-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Cap the column body height so long lists don't push the whole page
     down; columns scroll independently inside the kanban. The compact
     Overview kanban opts out via .kb-col-body-noscroll on its parent. */
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}
.kanban-compact .kb-col-body { max-height: none; overflow: visible; }

.kb-col-more {
  text-align: center;
  padding: 10px 12px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.kb-col-more:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent-faint);
  color: var(--ink);
}

.kb-empty {
  font-size: 12px;
  color: var(--muted);
  opacity: .55;
  text-align: center;
  padding: 24px 12px;
}

.kb-card {
  flex-shrink: 0;
  text-align: left;
  /* Glass card — matches .glass-soft with tighter radius for a denser grid. */
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 4px 14px rgba(0, 0, 0, 0.18);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kb-card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 100%);
  border-color: var(--accent-faint);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 8px 22px rgba(0, 0, 0, 0.28);
}
.kb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--muted);
  opacity: 0.6;
}
/* Severity rails: cool blue is the only accent; sev pills carry the actual
   urgency cue. Keeps the board calm. */
.kb-card.sev-high::before              { background: var(--signal-cool); opacity: 1; }
.kb-card.sev-med::before               { background: var(--signal-cool); opacity: .65; }
.kb-card.sev-low::before               { background: var(--signal-cool); opacity: .35; }
.kb-card.state-running::before         { background: var(--signal-cool); opacity: 1; }
.kb-card.state-awaiting_input::before  { background: var(--signal-cool); opacity: .8; }
.kb-card.state-completed::before       { background: var(--muted); opacity: .5; }
.kb-card-review::before                { background: var(--signal-cool); opacity: .8; }

.kb-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.kb-card-head-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Category mark — channel logo or agent silhouette sitting at the top
   left of every Workflow card. The 18px wrapper holds either a PNG/SVG
   real-artwork logo or a monoline currentColor SVG; the white box
   behind it lifts the mark on cards that already carry colour. */
.kb-card-head-mark.fx-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hair);
  padding: 2px;
  color: var(--soft);
  flex-shrink: 0;
}
.kb-card-head-mark.fx-icon-logo {
  padding: 1px;
  opacity: 0.95;
}
.kb-card-client { font-weight: 600; color: var(--ink); }
.kb-card-time   { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.kb-card-title  { font-size: 13px; font-weight: 600; line-height: 1.3; }
.kb-card-body   { font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.4; }
.kb-card-foot   { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; }
.kb-sev, .kb-state {
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}
.kb-sev.sev-high  { background: rgba(165, 180, 252, .18); color: var(--signal-cool); }
.kb-sev.sev-med   { background: rgba(255, 255, 255, .07);  color: var(--accent-soft); }
.kb-sev.sev-low   { background: rgba(255, 255, 255, .04);  color: var(--muted); }
.kb-state.state-awaiting_input { background: rgba(165, 180, 252, .18); color: var(--signal-cool); }
.kb-state.state-completed      { background: rgba(255, 255, 255, .04); color: var(--muted); }
.kb-state.state-running        { background: rgba(165, 180, 252, .14); color: var(--signal-cool); }
/* User-task states (kind='user' cards). Open = neutral cool;
   Cancelled = dimmed muted with strikethrough hint. Done uses the
   shared completed pill so it visually matches an agent's finished
   run in the same Completed column. */
.kb-state.state-open           { background: rgba(165, 180, 252, .12); color: var(--signal-cool); }
.kb-state.state-cancelled      { background: rgba(255, 255, 255, .04); color: var(--muted); text-decoration: line-through; }
.kb-conf { color: var(--muted); }

/* Detail drawer — right-side slide-in panel + dim backdrop. The class
   names stay `kb-modal-*` for compat with existing JS (queue, watchtower
   activity, overview fleet) but the styling renders as a drawer now. */
.kb-modal-overlay {
  position: fixed;
  inset: 0;
  /* Dim + blur ease in via background-color + backdrop-filter, NOT opacity.
     Animating opacity on a backdrop-filtered overlay — whose panel is itself
     .glass (a second backdrop-filter) — makes Chrome flicker the filter and
     renders the translucent panel over the live page for a frame: the "flash"
     operators saw on opening a card. Fading the dim/blur directly keeps the
     panel fully opaque while it slides in. */
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 90;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  transition: background-color .18s var(--ease),
              backdrop-filter .18s var(--ease),
              -webkit-backdrop-filter .18s var(--ease);
}
.kb-modal-overlay.on {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.kb-modal-panel {
  width: min(560px, 96vw);
  max-height: none;
  height: 100vh;
  border-radius: 16px 0 0 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Whole-panel vertical scroll — head + every body section + footer
     scroll together. Previously only the 2nd .kb-modal-block had
     overflow-y, which cut off any 3rd+ block (e.g. long Summary / KPIs
     / Output on Completed Flight runs). */
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(20px);
  transition: transform .22s var(--ease);
  box-shadow:
    -16px 0 48px rgba(0, 0, 0, 0.45),
    -2px 0 6px rgba(0, 0, 0, 0.25);
}
.kb-modal-overlay.on .kb-modal-panel { transform: translateX(0); }
.kb-modal-panel > .kb-modal-block { flex-shrink: 0; }
/* Single-section modals (Fleet sub-domain list, etc.) still let their
   lone section grow to fill the panel — no point in a tiny block with
   space below. Multi-section panels let the parent's overflow handle
   scrolling instead. */
.kb-modal-panel > .kb-modal-block:only-of-type {
  flex: 1 1 auto;
  min-height: 0;
}
/* (drawer transform now declared above with translateX) */

.kb-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.kb-modal-title {
  font-size: 1.25rem;
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.025em;
  margin: 4px 0 0;
}
.kb-modal-tail { display: flex; align-items: center; gap: 12px; }
.kb-modal-close {
  background: none;
  border: 1px solid var(--hair);
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.kb-modal-close:hover { color: var(--ink); border-color: var(--accent-faint); }

.kb-modal-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-modal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 0 4px;
  border-top: 1px solid var(--hair);
  margin-top: 4px;
  flex-wrap: wrap;
}
.kb-modal-actions .rec-confidence { margin-right: auto; }

/* ---------- Split-layout panel ---------- */
/* For modals where the body needs to scroll independently of a pinned
   header + footer (e.g. the Overview → Fleet sub-domain drawer with a
   long capability list). Three rows: header (no shrink), scrollbody
   (flex: 1, the only scroller), actions (no shrink). The panel itself
   no longer scrolls. */
.kb-modal-panel.kb-modal-panel-split {
  overflow: hidden;        /* the panel itself never scrolls */
  padding-bottom: 18px;
}
.kb-modal-panel-split > .kb-modal-head {
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 4px;
}
.kb-modal-scrollbody {
  flex: 1 1 auto;
  min-height: 0;           /* required for the child overflow to bite */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 2px 14px;
  margin: 0 -2px;          /* compensate inner padding visually */
}
.kb-modal-panel-split > .kb-modal-actions {
  flex-shrink: 0;
  background: rgba(11, 11, 17, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 0 0;
}

.kb-progress {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.kb-progress-step.status-done   { color: rgba(255,255,255,.7); }
.kb-progress-step.status-running{ color: var(--signal-cool); }
.kb-progress-step.status-pending{ color: var(--muted); }
.kb-progress-detail { display: block; font-size: 11px; opacity: .65; margin-top: 2px; }

@media (max-width: 1100px) {
  .kanban { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 720px) {
  .kanban { grid-template-columns: 1fr; }
  .kb-col { max-height: none; }
}

.rq-layout {
  display: grid;
  grid-template-columns: 340px 1fr 320px;
  gap: 16px;
  align-items: start;
}
.rq-list, .rq-rail {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}
.rq-list { padding: 14px; }
.rq-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 10px;
}

.rq-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
  text-align: left;
  transition: background .15s var(--ease), border-color .15s var(--ease);
  position: relative;
  margin-bottom: 8px;
  overflow: hidden;
}
.rq-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-faint);
}
.rq-row[data-severity="high"]::before { background: var(--signal-high); }
.rq-row[data-severity="med"]::before  { background: var(--signal-warn); }
.rq-row[data-severity="low"]::before  { background: var(--signal-cool); }
.rq-row:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--hair); }
.rq-row.on    { background: rgba(255, 255, 255, 0.08); border-color: var(--accent-faint); }

.rq-row-top {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 0.7rem; color: var(--mid);
}
.rq-client {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.rq-time { color: var(--muted); font-size: 0.66rem; }
.rq-row-mid {
  display: flex; gap: 6px;
  font-size: 0.72rem;
  color: var(--soft);
}
.rq-agent { color: var(--ink); font-weight: 500; }
.rq-cap { color: var(--mid); }
.rq-row-signal {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.45;
  font-weight: 300;
}
.rq-batch {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: flex-end;
}

.rq-focus {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rq-focus.empty {
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
}
.empty-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 6px;
}
.empty p { color: var(--mid); font-size: 0.9rem; }

.rq-focus-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
  gap: 16px;
}
.rq-focus-head .kicker { margin-bottom: 6px; }
.rq-focus-title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.rq-block {}
.rq-block-label {
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.rq-block-body { color: var(--soft); font-size: 0.95rem; line-height: 1.6; font-weight: 300; }
.rq-block-body.strong { color: var(--ink); font-weight: 400; }

/* "What you asked for" panel in review focus */
.rq-review-ctx {
  background: rgba(167, 139, 250, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.rq-ctx-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 4px 0;
  font-size: 0.84rem;
  line-height: 1.5;
}
.rq-ctx-row + .rq-ctx-row { border-top: 1px dashed rgba(255,255,255,0.06); padding-top: 8px; margin-top: 4px; }
.rq-ctx-tag {
  flex: 0 0 88px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #a78bfa);
  padding-top: 2px;
}
.rq-ctx-body {
  flex: 1;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.rq-chart {
  width: 100%;
  height: 140px;
  display: block;
  margin-top: 6px;
}
.rq-reason {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--soft);
  font-size: 0.88rem;
  font-weight: 300;
}
.rq-reason li {
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.rq-reason li::before {
  content: '';
  position: absolute;
  left: 4px; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.rq-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}

.rq-rail { padding: 20px; }
.rail-client { margin: 6px 0 18px; }
.rc-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.rc-sub {
  font-size: 0.72rem;
  color: var(--mid);
  margin-top: 2px;
  font-weight: 300;
}
.rail-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0 0 8px;
}
.rail-facts dt { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.04em; }
.rail-facts dd {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: right;
}
.rail-pasts {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 0.74rem;
  color: var(--soft);
  font-weight: 300;
  line-height: 1.5;
}
.rail-pasts li {
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hair);
}

/* ================================================================
   Agent Factory view
   ================================================================ */
.factory-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}
.domain-rail {
  padding: 18px;
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.domain-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--soft);
  transition: background .15s var(--ease), color .15s var(--ease);
  text-align: left;
}
.domain-row:hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.domain-row.on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.factory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.agent-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 168px;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.agent-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-faint);
  transform: translateY(-1px);
}
.agent-card[data-status="active"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 220px 80px at 90% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
  animation: breathe 4.2s ease-in-out infinite;
}
.agent-card[data-status="idle"] { opacity: 0.68; }

.ac-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ac-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.ac-status {
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-live);
  font-weight: 500;
}
.agent-card[data-status="idle"] .ac-status { color: var(--muted); }
.ac-status::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 0.1em;
  box-shadow: 0 0 6px currentColor;
}
.agent-card[data-status="idle"] .ac-status::before { box-shadow: none; }

.ac-desc {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.5;
  font-weight: 300;
}
.ac-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 0.66rem;
  color: var(--muted);
}
.ac-foot .caps { color: var(--soft); }
.ac-bolt {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal-cool);
  opacity: 0.8;
  margin-top: 2px;
}

.agent-card.blueprint {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--faint);
  color: var(--soft);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bp-plus {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--soft);
  line-height: 1;
}

/* ================================================================
   Chat view
   ================================================================ */
.chat-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
.chat-main {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 72vh;
}
.chat-feed {
  flex: 1;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: 66vh;
}
.msg { max-width: 82%; }
.msg-user  { align-self: flex-end; }
.msg-agent { align-self: flex-start; }
.msg-head {
  display: flex; gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.msg-role {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.msg-user .msg-role { color: var(--accent-soft); }
.msg-time { font-size: 0.62rem; color: var(--muted); }
.msg-body {
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
}
.msg-user .msg-body {
  background: rgba(255, 255, 255, 0.14);
  color: #0f0f18;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(230,230,240,0.88));
  border-color: transparent;
}

.composer {
  border-top: 1px solid var(--hair);
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.22);
}
.composer-input {
  width: 100%;
  resize: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  outline: none;
  transition: border-color .15s var(--ease);
}
.composer-input::placeholder { color: var(--muted); }
.composer-input:focus { border-color: var(--accent-faint); }
.composer-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.chat-rail { padding: 20px; position: sticky; top: 92px; }
.tool-list, .thread-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tool-list li, .thread-list li {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hair);
}
.tool-name, .thread-title {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.tool-desc, .thread-when {
  font-size: 0.7rem;
  color: var(--mid);
  margin-top: 2px;
  font-weight: 300;
}

/* ================================================================
   Drawer (shared)
   ================================================================ */
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(560px, 96vw);
  z-index: 91;
  transform: translateX(104%);
  transition: transform .32s var(--ease);
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(22, 22, 32, 0.92), rgba(12, 12, 18, 0.96));
  border-left: 1px solid var(--hair);
  box-shadow: -24px 0 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.drawer-head .kicker { margin-bottom: 10px; }
.drawer-head h3 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.drawer-close {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  color: var(--mid);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.drawer-close:hover { background: rgba(255,255,255,0.05); color: var(--ink); }

.drawer-body {
  padding: 22px 28px 28px;
  overflow-y: auto;
  flex: 1;
}
.drawer-body .summary {
  color: var(--soft);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 22px;
  font-weight: 300;
}

.cap-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.015);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.cap-run-solo {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px dashed var(--hair);
  background: transparent;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.cap-run-solo:hover { color: var(--soft); border-color: var(--accent-faint); }
.cap-run-solo.disabled-soft,
.btn.disabled-soft {
  color: var(--muted);
  border-color: rgba(212, 138, 138, 0.35);
  border-style: dashed;
  background: rgba(212, 138, 138, 0.05);
}
.cap-run-solo.disabled-soft:hover,
.btn.disabled-soft:hover {
  color: var(--ink);
  border-color: rgba(212, 138, 138, 0.55);
  background: rgba(212, 138, 138, 0.10);
}
/* Fleet readiness pill — at-a-glance "this client has X/7 surfaces"
   summary, sourced from growthos_client_capabilities. Tone colors:
   ok = lots of surfaces ready, warn = mid, gap = mostly missing. */
.fleet-readiness {
  margin: 8px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hair);
}
.fleet-readiness.tone-ok   { border-left: 3px solid #9ac2a5; }
.fleet-readiness.tone-warn { border-left: 3px solid #d4b766; }
.fleet-readiness.tone-gap  { border-left: 3px solid #d48a8a; }
.fleet-readiness-head {
  display: flex; align-items: baseline; gap: 12px;
}
.fleet-readiness-score {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.fleet-readiness-flag {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(212, 138, 138, 0.15);
  color: #e3a4a4;
}
.fleet-readiness-missing {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-mid, #c9c4d6);
}
.fleet-readiness-missing-label {
  font-weight: 600;
  margin-right: 6px;
  color: var(--mid);
}
.fleet-readiness-missing.all-on { color: #9ac2a5; }
.fleet-readiness-foot {
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Blocked cap row — agent can't run for this client because the data
   surface isn't ingested. Soft-dim the row, show the reason inline. */
.cap-row.blocked       { opacity: 0.72; }
.cap-row.blocked:hover { opacity: 0.92; }
.cap-blocked-reason {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(212, 138, 138, 0.95);
  letter-spacing: 0.02em;
  font-style: italic;
}

.drawer-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair);
}
.drawer-scope-name {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9rem;
}
.drawer-scope-empty {
  border-color: rgba(212, 138, 138, 0.30);
  background: rgba(212, 138, 138, 0.05);
}
.drawer-scope-empty .kicker { color: var(--signal-high, #d48a8a); }

.cap-chains {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.cap-chain-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--accent-faint);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
}
.cap-chain-info { flex: 1; min-width: 0; }
.cap-chain-name {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.015em;
}
.cap-chain-desc {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.45;
  font-weight: 300;
}
.cap-row:hover { border-color: rgba(255, 255, 255, 0.18); }
.cap-row.inactive { opacity: 0.55; }
.cap-info { min-width: 0; }
.cap-name { font-family: var(--serif); font-size: 1.02rem; font-weight: 400; color: var(--ink); margin-bottom: 2px; letter-spacing: -0.015em; }
.cap-desc { font-size: 0.78rem; color: var(--mid); line-height: 1.5; font-weight: 300; }
.cap-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--signal-live-bd);
  background: var(--signal-live-bg);
  color: var(--signal-live);
  cursor: pointer;
  white-space: nowrap;
}
.cap-row.inactive .cap-status {
  border-color: var(--hair);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
}

/* ================================================================
   Empty state
   ================================================================ */
.empty {
  padding: 40px;
  text-align: center;
}
.empty-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 6px;
}
.empty p { color: var(--mid); font-size: 0.88rem; max-width: 460px; margin: 0 auto; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1200px) {
  .wt-layout      { grid-template-columns: 220px 1fr; }
  .wt-timeline    { display: none; }
  .rq-layout      { grid-template-columns: 280px 1fr 280px; }
}
@media (max-width: 980px) {
  .chrome-inner   { grid-template-columns: auto auto; gap: 14px; }
  .tabs           { grid-column: 1 / -1; order: 3; margin: 2px auto 0; }
  .chrome-meta    { justify-self: end; }
  .wt-layout      { grid-template-columns: 1fr; }
  .wt-side        { position: static; }
  .rq-layout      { grid-template-columns: 1fr; }
  .rq-list, .rq-rail { position: static; max-height: none; }
  .factory-layout { grid-template-columns: 1fr; }
  .domain-rail    { position: static; flex-direction: row; flex-wrap: wrap; }
  .chat-layout    { grid-template-columns: 1fr; }
  .chat-rail      { position: static; }
}
@media (max-width: 640px) {
  .view           { padding: 22px 16px 60px; }
  .client-grid    { grid-template-columns: 1fr; }
  .rec {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "signal" "proposal" "actions";
  }
  .rec-actions { flex-direction: row; flex-wrap: wrap; }
  .cmd-hint, .clock { display: none; }
}

/* ---------- Fleet (stacked by domain) ---------- */
.fleet-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 22px;
}
.fleet-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 0;
  border-top: 0;
}
/* Section heads are titles only — no separator above them. The 36px
   gap in fleet-stack handles inter-section breathing room; an inset
   padding or border-top would re-introduce the hairline the operator
   was seeing. Use padding:0 explicitly + border:0 so any cascading
   defaults can't sneak a line back in. */
.fleet-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0;
  border: 0;
}
.fs-label {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-transform: none;
}
.fs-count {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Kicker text retired from Fleet sections — the domain name + agent
   count is enough. Hidden via display:none so any caller that still
   sets a kicker (e.g. legacy data) doesn't bleed into the layout. */
.fs-kicker { display: none; }
.fleet-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* Tristan's sub-domain cards inside each Fleet section. */
.fleet-subs { display: flex; flex-direction: column; gap: 18px; }
.fleet-sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fleet-sub-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 4px;
}
.fleet-sub-name {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
}
.fleet-sub-count {
  font-size: 0.62rem;
  color: var(--muted);
  padding: 1px 6px;
  border: 1px solid var(--hair);
  border-radius: 999px;
}

/* ---------- Sub-domain tiles (Tristan layout) — click → drawer ---------- */
.fleet-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.fleet-tile-btn {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255,255,255,0.018);
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.fleet-tile-btn:hover {
  background: rgba(255,255,255,0.035);
  border-color: var(--accent-faint, rgba(167,139,250,0.45));
}
.fleet-tile-btn:active { transform: translateY(1px); }
.fleet-tile-head {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
}
/* Redesigned tile — generous mark on the left, sub-domain heading +
   tagline middle, capability count anchored right. Reads as a "card"
   rather than a "row". Brand marks (Meta, Google, TikTok, etc.) keep
   their colour for instant platform recognition. */
.fleet-tile.fleet-tile-btn {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hair);
  border-radius: 14px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.fleet-tile.fleet-tile-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--accent-faint);
  transform: translateY(-1px);
}
.fleet-tile-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
  color: var(--soft);
}
.fleet-tile-mark .fx-icon { width: 20px; height: 20px; }
/* Real-artwork tiles render an actual <img> from /assets/logos. The
   PNGs/SVGs carry more ink than a monoline silhouette, so we lift the
   wrapper a hair and let the image render at full opacity. */
.fleet-tile-brand .fleet-tile-mark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.fleet-tile-brand .fleet-tile-mark .fx-icon-logo { opacity: 0.95; }
.fleet-tile-body { min-width: 0; }
.fleet-tile-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.fleet-tile-tag {
  font-size: 0.78rem;
  color: var(--accent-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fleet-tile-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.fleet-tile-count-n {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.fleet-tile-count-l {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ft-tile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--soft);
}
.ft-tile-count { letter-spacing: 0.04em; }
.ft-tile-chains {
  color: var(--accent, #a78bfa);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ft-tile-chev { margin-left: auto; color: var(--muted); }
.fleet-tile.open .ft-tile-chev { color: var(--ink); }

.fleet-tile-body {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--hair);
}
.ft-chain-rail {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-chain-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-chain-pill {
  background: rgba(167,139,250,0.08);
  border: 1px solid rgba(167,139,250,0.3);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.ft-chain-pill:hover { background: rgba(167,139,250,0.15); border-color: rgba(167,139,250,0.55); }
.ft-chain-pill-name { font-weight: 500; }
.ft-chain-pill-steps { font-size: 0.66rem; color: var(--muted); }

.ft-cap-list {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
.ft-cap-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 8px;
}
.ft-cap-row:last-child { border-bottom: 0; }
.ft-cap-info {
  flex: 1;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}
.ft-cap-info:hover .ft-cap-name { color: var(--accent, #a78bfa); }
.ft-cap-name { font-size: 0.92rem; color: var(--ink); font-weight: 500; }
.ft-cap-desc { font-size: 0.74rem; color: var(--muted); line-height: 1.4; }
.ft-cap-run {
  align-self: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  transition: color .12s var(--ease), border-color .12s var(--ease);
}
.ft-cap-run:hover { color: var(--ink); border-color: var(--accent-faint, rgba(167,139,250,0.5)); }

/* ---------- Flight view ---------- */
.runs-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  margin-top: 22px;
  align-items: start;
}
.runs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.runs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 6px;
}
.run-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.run-row:hover { border-color: var(--accent-faint); }
.run-row.on { border-color: var(--accent-faint); background: rgba(255,255,255,0.06); }
.run-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.run-row-top .pill { font-size: 0.62rem; padding: 2px 8px; }
.run-time { font-size: 0.68rem; color: var(--muted); }
.run-row-title { font-size: 0.84rem; color: var(--ink); }
.run-row-sub { font-size: 0.7rem; color: var(--muted); }

.run-detail {
  padding: 26px 28px;
  min-height: 420px;
}
.run-detail.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--muted);
}
.run-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 20px;
}
.rd-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  margin: 4px 0 0;
  color: var(--ink);
}
.rd-block { margin-bottom: 22px; }
.rd-block-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.rd-facts {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 0.82rem;
}
.rd-facts dt { color: var(--muted); }
.rd-facts dd { margin: 0; color: var(--ink); }
.rd-progress {
  margin-top: 14px;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.rd-progress-bar {
  width: 40%;
  height: 100%;
  background: var(--signal-live);
  border-radius: 999px;
  animation: rd-slide 1.8s linear infinite;
}
@keyframes rd-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
.rd-needs-input {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255, 211, 77, 0.06);
}
.rd-needs-input p { margin: 0 0 10px; color: var(--soft); font-size: 0.82rem; }
.rd-output {
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
}
.rd-output.placeholder {
  color: var(--muted);
  font-style: italic;
}
.rd-output-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Drive link row above the output body */
.rd-deliverable-link {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.drive-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #0a0a12;
  border-color: transparent;
  text-decoration: none;
  font-weight: 500;
}
.drive-btn:hover {
  background: #ffffff;
  color: #0a0a12;
}

/* Markdown-rendered run output uses .rv-md base styles, but inside Flight
   detail we want a slightly tighter container so it sits flush with the
   surrounding Status block. */
.rd-output-md {
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  max-height: none;          /* full-height in Flight, not the Queue 480px cap */
  overflow: visible;
}

.rd-operator-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-left: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.rd-operator-note p {
  margin: 4px 0 0;
  color: var(--soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* ---------- Progress log ---------- */
.rd-progress-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rd-step {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 10px 0;
}
.rd-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: -4px;
  width: 1px;
  background: var(--hair);
}
.rd-step-marker {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--panel, #14161a);
  border: 1.5px solid var(--muted);
}
.rd-step-done .rd-step-marker {
  border-color: rgba(154, 194, 165, 0.8);
  background: rgba(154, 194, 165, 0.5);
}
.rd-step-running .rd-step-marker {
  border-color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.85);
  animation: rd-step-pulse 1.2s ease-in-out infinite;
}
.rd-step-pending .rd-step-marker {
  border-color: var(--hair);
  background: transparent;
}
@keyframes rd-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
.rd-step-body { min-width: 0; }
.rd-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rd-step-label {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
}
.rd-step-pending .rd-step-label { color: var(--muted); font-weight: 400; }
.rd-step-at {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.rd-step-detail {
  color: var(--soft);
  font-size: 0.78rem;
  line-height: 1.5;
  margin-top: 3px;
}

/* ---------- Structured output ---------- */
.rd-out-summary {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
}
.rd-out-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.rd-out-kpi {
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.rd-out-kpi-label {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rd-out-kpi-value {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.rd-out-kpi-value.bad  { color: var(--signal-high, #d48a8a); }
.rd-out-kpi-value.warn { color: var(--signal-warn, #d4c89a); }
.rd-out-kpi-value.good { color: var(--signal-cool, #9ac2a5); }

.rd-out-section {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-out-findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-out-finding {
  position: relative;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.rd-out-finding::before {
  content: '';
  position: absolute;
  top: 10px; bottom: 10px; left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--muted);
}
.rd-out-finding.sev-high::before { background: var(--signal-high, #d48a8a); }
.rd-out-finding.sev-med::before  { background: var(--signal-warn, #d4c89a); }
.rd-out-finding.sev-low::before  { background: var(--signal-cool, #9ac2a5); }
.rd-out-finding-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rd-out-finding-title {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
}
.rd-out-finding-detail {
  color: var(--soft);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 4px;
}
.rd-out-recs {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.5;
}
.rd-out-recs li::marker { color: var(--muted); }
.rd-out-artifact {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rd-out-artifact-meta { min-width: 0; }
.rd-out-artifact-name {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
}
.rd-out-artifact-path {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-out-artifact-type {
  color: var(--ink);
  letter-spacing: 0.06em;
}
.rd-out-artifact-actions {
  display: flex;
  gap: 6px;
}

@media (max-width: 1000px) {
  .runs-layout { grid-template-columns: 1fr; }
  .runs-list { max-height: none; }
}

/* ---------- Fleet / Schedule toolbar ---------- */
.fleet-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding: 0;
  margin-top: 6px;
  align-items: flex-start;
}
.ft-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ft-group .kicker { margin: 0; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  appearance: none;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.02);
  color: var(--soft);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover { border-color: rgba(255,255,255,0.22); color: var(--ink); }
.chip.on {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
  color: var(--ink);
}

/* ---------- Schedule table ---------- */
.schedule-table {
  margin-top: 18px;
  padding: 6px 4px 10px;
  border-radius: 14px;
  overflow: hidden;
}
.st-head,
.st-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.8fr 1fr 1fr 1.1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
}
.st-head {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
}
.st-row {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .16s var(--ease);
  font-size: 0.88rem;
}
.st-row:last-child { border-bottom: none; }
.st-row:hover { background: rgba(255,255,255,0.03); }
.st-row.off { opacity: 0.55; }
.st-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.st-agent { color: var(--ink); font-weight: 500; display: block; }
.st-cap { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.02em; display: block; margin-top: 2px; }
/* Small uppercase tag flagging which canonical trigger pack a row
   belongs to. Daily Watchtower rows wear a live-green tag; other
   future packs (weekly_reporter, monthly_qbr, threshold) wear neutral
   tags so the system isn't visually noisy. */
.st-trigger-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.025);
  color: var(--mid);
}
.st-trigger-tag[data-trigger="daily_watchtower"] {
  color: var(--signal-live);
  background: var(--signal-live-bg);
  border-color: var(--signal-live-bd);
}
.st-trigger-tag[data-trigger="threshold"] {
  color: var(--signal-warn);
  background: var(--signal-warn-bg);
  border-color: var(--signal-warn-bd);
}
.st-lastcell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.st-lastfired {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--hair);
  text-decoration: none;
  display: inline-block;
}
.st-lastfired.ok    { color: var(--signal-live); border-color: var(--signal-live-bd); background: var(--signal-live-bg); }
.st-lastfired.error { color: var(--signal-high); border-color: var(--signal-high-bd); background: var(--signal-high-bg); }
.st-lastfired.muted { color: var(--muted); }
.st-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.st-row .mono { font-size: 0.8rem; color: var(--soft); }
.st-row .muted { color: var(--muted); }

@media (max-width: 1100px) {
  .st-head, .st-row { grid-template-columns: 1fr; gap: 6px; }
  .st-head { display: none; }
  .st-actions { justify-content: flex-start; margin-top: 6px; }
}

/* ---------- Divisions ---------- */
.div-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  margin-top: 8px;
}
.div-rail {
  padding: 18px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  position: sticky;
  top: 92px;
}
.div-rail-row {
  appearance: none;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--soft);
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.div-rail-row:hover {
  background: rgba(255,255,255,0.03);
  color: var(--ink);
}
.div-rail-row.on {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--ink);
}
.dr-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.dr-sub { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.03em; }

.div-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.div-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.div-tab {
  appearance: none;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--soft);
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 200px;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.div-tab:hover { border-color: rgba(255,255,255,0.2); color: var(--ink); }
.div-tab.on {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  color: var(--ink);
}
.dt-code {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.div-tab.on .dt-code { color: var(--accent-faint); }
.dt-name { font-size: 0.9rem; }

.div-body {
  padding: 24px 26px 26px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}
.db-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 18px;
}
.db-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 6px 0 0;
}
.db-meta { color: var(--muted); font-size: 0.78rem; }
.db-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.db-preview {
  margin: 0;
  color: var(--soft);
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.db-editor {
  appearance: none;
  width: 100%;
  min-height: 200px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.db-editor:focus {
  outline: none;
  border-color: rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.35);
}
.db-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.db-note { color: var(--muted); font-size: 0.78rem; margin-left: auto; }

@media (max-width: 900px) {
  .div-layout { grid-template-columns: 1fr; }
  .div-rail { position: static; }
}

/* ---------- Queue inline context block ---------- */
.rq-context {
  margin-top: 14px;
}
.rq-context-input {
  appearance: none;
  width: 100%;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px 14px;
  resize: vertical;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.rq-context-input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.35);
}
.rq-context-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ---------- Watchtower redesign (client health monitor) ---------- */
.wt-health-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  margin-bottom: 22px;
  border-radius: 14px;
}
.wt-hs-chip {
  appearance: none;
  text-align: left;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.wt-hs-chip:hover { border-color: rgba(255,255,255,0.22); color: var(--ink); }
.wt-hs-chip.on {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.3);
  color: var(--ink);
}
.wt-hs-count {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.wt-hs-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wt-hs-chip.at_risk.on { border-color: rgba(212, 138, 138, 0.5); }
.wt-hs-chip.at_risk.on .wt-hs-count { color: #e6a6a6; }
.wt-hs-chip.watch.on { border-color: rgba(212, 200, 154, 0.5); }
.wt-hs-chip.watch.on .wt-hs-count { color: #e6d8a4; }
.wt-hs-chip.on_track.on { border-color: rgba(154, 194, 165, 0.45); }
.wt-hs-chip.on_track.on .wt-hs-count { color: #a8d4b3; }
.wt-hs-chip.onboarding.on { border-color: var(--accent-faint); }

.wt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  gap: 18px;
}
.wt-focus { display: grid; grid-template-columns: 1fr; }

/* Portfolio row layout — one client per row, click to expand. */
.wt-rows { display: flex; flex-direction: column; gap: 10px; }

.wt-row {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.wt-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--muted);
  opacity: 0.4;
}
.wt-row.health-at_risk::before    { background: var(--signal-high, #d48a8a); opacity: 0.85; }
.wt-row.health-watch::before      { background: var(--signal-warn, #d4c89a); opacity: 0.8; }
.wt-row.health-on_track::before   { background: var(--signal-cool, #9ac2a5); opacity: 0.7; }
.wt-row.health-onboarding::before { background: var(--accent-faint); opacity: 0.7; }

.wt-row-head {
  display: grid;
  grid-template-columns: 16px 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.wt-row-head:hover { background: rgba(255, 255, 255, .02); }

.wt-row-chev   { opacity: .6; font-size: 14px; }
.wt-row-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
  color: var(--bg-deep, #0c1014);
}
.wt-row-ident    { min-width: 0; }
.wt-row-name     { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-row-vertical { font-size: 12px; opacity: .7; margin-top: 2px; }

.wt-row-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, auto));
  gap: 22px;
  align-items: center;
}
.wt-row-stat-label { font-size: 10px; opacity: .6; letter-spacing: .04em; text-transform: uppercase; }
.wt-row-stat-value { font-size: 14px; font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 6px; }

.wt-row-tail { display: flex; align-items: center; gap: 12px; }
.wt-row-signal-count {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 200, 120, .12);
  color: #f0c994;
  white-space: nowrap;
}
.wt-row-signal-count.quiet {
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .45);
}

.wt-row-body {
  padding: 4px 18px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

@media (max-width: 880px) {
  .wt-row-head {
    grid-template-columns: 16px 32px minmax(0, 1fr) auto;
    grid-template-areas:
      'chev avatar ident tail'
      '.    .      stats stats';
    row-gap: 10px;
  }
  .wt-row-chev   { grid-area: chev; }
  .wt-row-avatar { grid-area: avatar; }
  .wt-row-ident  { grid-area: ident; }
  .wt-row-tail   { grid-area: tail; }
  .wt-row-stats  { grid-area: stats; gap: 14px; }
}

.wt-card {
  padding: 22px 22px 18px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.wt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--muted);
  opacity: 0.4;
}
.wt-card.health-at_risk::before { background: var(--signal-high, #d48a8a); opacity: 0.85; }
.wt-card.health-watch::before   { background: var(--signal-warn, #d4c89a); opacity: 0.8; }
.wt-card.health-on_track::before { background: var(--signal-cool, #9ac2a5); opacity: 0.7; }
.wt-card.health-onboarding::before { background: var(--accent-faint); opacity: 0.7; }

.wt-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.wt-card-ident {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.wt-card-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  flex-shrink: 0;
}
.wt-card-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
}
.wt-card-vertical {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 3px;
}
.wt-health-badge {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.wt-health-badge.at_risk   { color: #e6a6a6; border-color: rgba(212, 138, 138, 0.4); background: rgba(212, 138, 138, 0.06); }
.wt-health-badge.watch     { color: #e6d8a4; border-color: rgba(212, 200, 154, 0.4); background: rgba(212, 200, 154, 0.06); }
.wt-health-badge.on_track  { color: #a8d4b3; border-color: rgba(154, 194, 165, 0.35); background: rgba(154, 194, 165, 0.05); }
.wt-health-badge.onboarding { color: var(--accent-soft); border-color: var(--accent-faint); background: rgba(255,255,255,0.03); }

.wt-card-note {
  margin: 0;
  color: var(--soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.wt-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 820px) {
  .wt-metrics { grid-template-columns: repeat(2, 1fr); }
}
.wt-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wt-metric-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.wt-metric-value {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.wt-metric-value .mono { font-family: var(--mono); font-size: 1.3rem; }
.wt-metric-dir {
  font-size: 0.8rem;
  opacity: 0.85;
}
.wt-metric-dir.up   { color: #a8d4b3; }
.wt-metric-dir.down { color: #e6a6a6; }
.wt-metric-dir.over { color: #a8d4b3; }
.wt-metric-dir.under { color: #e6a6a6; }
.wt-metric-dir.ramp { color: var(--accent-soft); }
.wt-metric-dir.on   { color: var(--muted); }
/* KPI tile rendered without Looker data yet — dim the value so it reads as a skeleton, not a zero. */
.wt-metric-empty .wt-metric-value .mono { color: var(--muted); font-size: 1.1rem; }
.wt-metric-empty .wt-metric-sub { color: var(--accent-soft, #a78bfa); opacity: 0.7; }

/* "Set goals" button on the Watchtower card head */
.wt-card-head-right { display: flex; align-items: center; gap: 10px; }
.wt-set-goals {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px dashed var(--hair);
  background: transparent;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.wt-set-goals:hover { color: var(--ink); border-color: var(--accent-faint, rgba(167,139,250,0.5)); }

/* Targets modal */
.tm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0; transition: opacity .16s var(--ease);
}
.tm-overlay.on { opacity: 1; }
.tm-panel {
  background: var(--bg, #1a1a1e);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 24px 28px;
  min-width: 420px;
  max-width: 520px;
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.tm-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 300; letter-spacing: -0.025em; margin-bottom: 4px; }
.tm-sub-title { color: var(--muted); font-size: 0.82rem; margin-bottom: 20px; }
.tm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 20px; }
.tm-field { display: flex; flex-direction: column; gap: 4px; }
.tm-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tm-input-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.tm-prefix { color: var(--muted); font-family: var(--mono); }
.tm-input {
  flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--hair);
  color: var(--ink); padding: 8px 10px; border-radius: 6px;
  font-family: var(--mono); font-size: 0.92rem; outline: none;
}
.tm-input:focus { border-color: var(--accent, #a78bfa); }
.tm-sub { font-size: 0.68rem; color: var(--muted); }
.tm-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tm-meta { margin-top: 14px; font-size: 0.68rem; color: var(--muted); }
@media (max-width: 520px) { .tm-grid { grid-template-columns: 1fr; } .tm-panel { min-width: 0; width: 92vw; } }
.wt-metric-sub {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.wt-pacing-bar {
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
.wt-pacing-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--muted);
  transition: width .5s var(--ease);
}
.wt-pacing-fill.over  { background: #a8d4b3; }
.wt-pacing-fill.on    { background: #a8d4b3; }
.wt-pacing-fill.under { background: #e6a6a6; }
.wt-pacing-fill.ramp  { background: var(--accent-soft); }
.wt-dot.live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal-live, #9ac2a5);
  box-shadow: 0 0 6px var(--signal-live, #9ac2a5);
  animation: pulse 2.2s ease-in-out infinite;
}

.wt-recs { display: flex; flex-direction: column; gap: 10px; }
.wt-recs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.wt-last-action {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.wt-recs-empty {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  padding: 10px 0;
}
.wt-recs-list { display: flex; flex-direction: column; gap: 10px; }
.wt-rec {
  position: relative;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.wt-rec:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); }
.wt-rec.open {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.04);
}
.wt-rec-chev {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  transition: color .15s var(--ease);
}
.wt-rec.open .wt-rec-chev { color: var(--ink); }
.wt-rec::before {
  content: '';
  position: absolute;
  top: 10px; bottom: 10px; left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--muted);
}
.wt-rec.sev-high::before { background: var(--signal-high); }
.wt-rec.sev-med::before  { background: var(--signal-warn); }
.wt-rec.sev-low::before  { background: var(--signal-cool); }

/* Already queued — keep visible in Watchtower but visually de-emphasized */
.wt-rec.queued {
  opacity: 0.78;
  background: rgba(255,255,255,0.012);
}
.wt-rec.queued .wt-rec-signal,
.wt-rec.queued .wt-rec-agent {
  text-decoration: none;
}
.wt-rec-status {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}

.wt-rec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wt-sev {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--soft);
}
.wt-sev.high { color: var(--signal-high, #d48a8a); border-color: rgba(212, 138, 138, 0.5); }
.wt-sev.med  { color: var(--signal-warn, #d4c89a); border-color: rgba(212, 200, 154, 0.5); }
.wt-sev.low  { color: var(--signal-cool, #9ac2a5); border-color: rgba(154, 194, 165, 0.4); }
.wt-rec-agent { color: var(--ink); font-weight: 500; font-size: 0.85rem; }
.wt-rec-cap   { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.03em; }
.wt-rec-at    { color: var(--muted); font-size: 0.68rem; margin-left: auto; }

.wt-rec-signal   { color: var(--soft); font-size: 0.85rem; line-height: 1.5; }
.wt-rec-proposal { color: var(--ink);  font-size: 0.88rem; line-height: 1.5; }

.wt-rec-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.wt-rec-conf { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.03em; }
.wt-rec-actions { display: flex; gap: 6px; }

.wt-rec-detail {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: wt-rd-in .18s var(--ease);
}
@keyframes wt-rd-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wt-rd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.wt-rd-col { display: flex; flex-direction: column; gap: 8px; }
.wt-rd-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wt-rd-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--soft);
  font-size: 0.82rem;
  line-height: 1.5;
}
.wt-rd-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  margin-top: 7px;
}
.wt-rd-steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.5;
}
.wt-rd-steps li::marker { color: var(--muted); font-size: 0.75rem; }
.wt-rd-muted { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.wt-rd-row { display: flex; flex-direction: column; gap: 6px; }
.wt-rd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}
.wt-rd-related { display: flex; flex-wrap: wrap; gap: 6px; }
.wt-rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--soft);
  font-size: 0.74rem;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.wt-rd-chip:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.03);
}

/* ---------- Phase 6 RCA panel ---------- */
.wt-rca-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wt-rca-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-left: 2px solid rgba(255,255,255,0.06);
}
.wt-rca-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.wt-rca-body {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink);
}
.wt-rca-score {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--soft);
}
.wt-rca-high     { background: rgba(120,200,160,0.16); color: rgba(120,200,160,1); }
.wt-rca-moderate { background: rgba(220,180,90,0.18); color: rgba(220,180,90,1); }
.wt-rca-low      { background: rgba(200,120,120,0.18); color: rgba(220,160,160,1); }
.wt-rca-unlikely { background: rgba(180,180,180,0.10); color: var(--muted); }

/* Audit blocks — collapsed sections under the fired signals showing
   what the engine suppressed (R6 hysteresis, guards) and skipped
   (no-band-hit, missing inputs). Default closed; click summary to open. */
.wt-rca-aux {
  margin-top: 4px;
  padding: 0;
  border-left: 2px solid rgba(255,255,255,0.04);
}
.wt-rca-aux-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.wt-rca-aux-summary:hover { color: var(--soft); }
.wt-rca-aux-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px 8px 10px;
  font-size: 0.78rem;
  color: var(--soft);
}
.wt-rca-aux-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto 2fr;
  gap: 10px;
  align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.wt-rca-aux-row:last-child { border-bottom: none; }
.wt-rca-aux-id {
  color: var(--ink);
  font-size: 0.75rem;
}
.wt-rca-aux-sev {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wt-rca-aux-reason {
  color: var(--muted);
  font-size: 0.78rem;
}
.wt-rca-loading,
.wt-rca-error,
.wt-rca-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 10px 0;
}
.wt-rca-spinner {
  display: inline-block;
  animation: wt-rca-spin 1.4s linear infinite;
}
@keyframes wt-rca-spin {
  to { transform: rotate(360deg); }
}
.wt-rca-caveat {
  font-size: 0.78rem;
  color: rgba(220,180,90,0.95);
  background: rgba(220,180,90,0.08);
  padding: 6px 10px;
  border-radius: 4px;
}

/* Phase 3 Lens B + C — mix shift + pairwise ratio rows */
.wt-rca-mix-list,
.wt-rca-pair-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.wt-rca-mix-row,
.wt-rca-pair-row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 0.8fr;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.025);
}
.wt-rca-mix-row.up,
.wt-rca-pair-row.up { border-left: 2px solid rgba(120,200,160,0.6); }
.wt-rca-mix-row.down,
.wt-rca-pair-row.down { border-left: 2px solid rgba(220,140,140,0.6); }
.wt-rca-mix-name,
.wt-rca-pair-name { font-weight: 600; }
.wt-rca-mix-from,
.wt-rca-pair-vals { color: var(--muted); font-size: 0.74rem; }
.wt-rca-mix-delta.up,
.wt-rca-pair-delta.up { color: rgba(120,200,160,1); }
.wt-rca-mix-delta.down,
.wt-rca-pair-delta.down { color: rgba(220,140,140,1); }

/* Phase 4.4 — synergy loss block */
.wt-rca-synergy {
  background: rgba(220,140,90,0.06);
  border-left: 2px solid rgba(220,140,90,0.5);
}

/* Phase 6.2 — recommended lever block */
.wt-rca-lever {
  background: rgba(120,160,220,0.06);
  border-left: 2px solid rgba(120,160,220,0.5);
}
.wt-rca-lever-restore_or_substitute {
  background: rgba(220,140,90,0.10);
  border-left-color: rgba(220,140,90,0.7);
}
.wt-rca-lever-monitor {
  background: rgba(255,255,255,0.025);
  border-left-color: rgba(180,180,180,0.4);
}
.wt-rca-lever-kind {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(120,160,220,0.16);
  color: rgba(180,200,240,1);
}
.wt-rca-lever-restore_or_substitute .wt-rca-lever-kind {
  background: rgba(220,140,90,0.20);
  color: rgba(240,180,140,1);
}
.wt-rca-lever-monitor .wt-rca-lever-kind {
  background: rgba(180,180,180,0.12);
  color: var(--muted);
}

/* Phase 5.3 — follow-up checklist */
.wt-rca-nextpass {
  background: rgba(220,180,90,0.06);
  border-left: 2px solid rgba(220,180,90,0.5);
}
.wt-rca-nextpass-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.78rem;
  line-height: 1.55;
}
.wt-rca-nextpass-list li {
  margin-bottom: 3px;
}

/* ---------- Phase 7 Optimize panel ---------- */
.wt-opt-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.wt-opt-toggle {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--soft);
}
.wt-opt-loading,
.wt-opt-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 10px 0;
}
.wt-opt-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.wt-opt-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.wt-opt-input {
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,0.025);
  border-left: 2px solid rgba(255,255,255,0.08);
}
.wt-opt-input-discrete { border-left-color: rgba(120,200,160,0.5); }
.wt-opt-input-slow     { border-left-color: rgba(120,160,220,0.5); }
.wt-opt-input-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.wt-opt-input-name { font-weight: 600; font-size: 0.84rem; }
.wt-opt-input-class {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.wt-opt-input-score { color: var(--soft); }
.wt-opt-input-just  { color: var(--muted); margin-top: 2px; }
.wt-opt-action {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.wt-opt-action-scale     { background: rgba(120,200,160,0.20); color: rgba(160,220,180,1); }
.wt-opt-action-protect   { background: rgba(120,160,220,0.20); color: rgba(180,200,240,1); }
.wt-opt-action-hold      { background: rgba(255,255,255,0.06); color: var(--soft); }
.wt-opt-action-trim      { background: rgba(220,180,90,0.18); color: rgba(220,180,90,1); }
.wt-opt-action-investigate { background: rgba(220,140,140,0.16); color: rgba(220,160,160,1); }

.wt-opt-realloc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.wt-opt-realloc-row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 0.8fr 0.8fr;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.025);
}
.wt-opt-realloc-row.up   { border-left: 2px solid rgba(120,200,160,0.6); }
.wt-opt-realloc-row.down { border-left: 2px solid rgba(220,140,140,0.6); }
.wt-opt-realloc-name { font-weight: 600; }
.wt-opt-realloc-vals { color: var(--muted); font-size: 0.74rem; }
.wt-opt-realloc-delta.up   { color: rgba(120,200,160,1); }
.wt-opt-realloc-delta.down { color: rgba(220,140,140,1); }

.wt-opt-confidence.wt-opt-conf-high     { background: rgba(120,200,160,0.06); border-left: 2px solid rgba(120,200,160,0.5); }
.wt-opt-confidence.wt-opt-conf-moderate { background: rgba(220,180,90,0.06);  border-left: 2px solid rgba(220,180,90,0.5); }
.wt-opt-confidence.wt-opt-conf-low      { background: rgba(220,140,140,0.06); border-left: 2px solid rgba(220,140,140,0.5); }

@media (max-width: 640px) {
  .wt-health-strip { grid-template-columns: repeat(2, 1fr); }
  .wt-metrics { grid-template-columns: 1fr; }
  .wt-rd-grid { grid-template-columns: 1fr; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 8px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.96);
  color: var(--ink);
  border: 1px solid var(--hair);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Feedback prompt modal ---------- */
.fb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  transition: opacity .16s var(--ease);
}
.fb-overlay.on { opacity: 1; }
.fb-panel {
  width: min(460px, calc(100vw - 32px));
  background: var(--panel, #14161a);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(6px);
  opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.fb-overlay.on .fb-panel { transform: translateY(0); opacity: 1; }
.fb-title {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.fb-sub {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fb-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fb-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--soft);
  font-size: 0.74rem;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.fb-chip:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}
.fb-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.02);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 72px;
  outline: none;
  transition: border-color .15s var(--ease);
}
.fb-textarea:focus {
  border-color: rgba(255,255,255,0.35);
}
.fb-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}
.fb-foot .btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Schedule editor modal ---------- */
.se-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  transition: opacity .16s var(--ease);
}
.se-overlay.on { opacity: 1; }
.se-panel {
  /* Wider than the watchtower modal — schedule has two columns + two
     half-width textareas that need horizontal room so the form stays
     short enough to fit in a laptop viewport (≈900px tall on 13"
     screens) without scrolling. */
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Glass surface — same treatment as the watchtower rec modal so the
     two surfaces feel like one design language. */
  background: rgba(17, 19, 26, 0.72);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(6px);
  opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.se-overlay.on .se-panel { transform: translateY(0); opacity: 1; }
.se-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.se-title {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.se-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Tighter vertical gap so 6 rows fit into a 13" laptop viewport. */
  gap: 10px 16px;
}
.se-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.se-field:has(.se-presets) { grid-column: 1 / -1; }
/* Wide fields span the full grid — Brief and Why-this-cadence textareas
   and the State row need the full width to breathe. */
.se-field-wide { grid-column: 1 / -1; }
/* Textarea variant of .se-input — fixed line-height and inherit font so
   resize handles look right. min-height lets short content sit naturally
   while long content scrolls within the textarea instead of pushing the
   modal taller and taller. */
.se-textarea {
  min-height: 70px;
  line-height: 1.45;
  resize: vertical;
  font-family: var(--sans, inherit);
}
.se-label {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.se-hint {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.se-input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.02);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  transition: border-color .15s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.se-input:focus { border-color: rgba(255,255,255,0.35); }
select.se-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.se-seg {
  display: inline-flex;
  border: 1px solid var(--hair);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.se-seg-btn {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--hair);
  color: var(--soft);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-transform: capitalize;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.se-seg-btn:last-child { border-right: none; }
.se-seg-btn:hover { background: rgba(255,255,255,0.03); color: var(--ink); }
.se-seg-btn.on { background: rgba(255,255,255,0.08); color: var(--ink); }
.se-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.se-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--hair);
  margin-top: 2px;
  padding-top: 14px;
}
.se-foot-right {
  display: flex;
  gap: 8px;
}

@media (max-width: 640px) {
  .se-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Flight — agent chains (list row, SVG graph, legend)
   ================================================================ */

.chain-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-soft);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--accent-faint);
  background: rgba(255,255,255,0.04);
}

.chain-row-mini {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--hair);
}
.chain-mini-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ghost);
  border: 1px solid var(--hair);
  transition: transform .18s var(--ease);
}
.chain-mini-dot.state-completed     { background: var(--signal-live);  border-color: var(--signal-live-bd); }
.chain-mini-dot.state-running       { background: var(--signal-warn);  border-color: var(--signal-warn-bd); animation: breathe 1.8s ease-in-out infinite; }
.chain-mini-dot.state-awaiting_input { background: var(--signal-warn); border-color: var(--signal-warn-bd); }
.chain-mini-dot.state-queued        { background: var(--signal-cool);  border-color: var(--signal-cool-bd); opacity: 0.7; }
.chain-mini-dot.state-pending       { background: transparent;         border-color: var(--faint); }

/* --- Graph --- */

.chain-graph-wrap {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  overflow-x: auto;
}
.chain-graph {
  display: block;
  max-width: 100%;
  height: auto;
}

.chain-node {
  cursor: pointer;
  transition: opacity .18s var(--ease);
}
.chain-node > rect {
  fill: rgba(255,255,255,0.04);
  stroke: var(--hair);
  stroke-width: 1;
  transition: fill .18s var(--ease), stroke .18s var(--ease);
}
.chain-node:hover > rect { fill: rgba(255,255,255,0.07); stroke: var(--accent-faint); }
.chain-node.focused > rect {
  fill: rgba(255,255,255,0.09);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.chain-node-title {
  fill: var(--ink);
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 500;
}
.chain-node-sub {
  fill: var(--muted);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.chain-node-dot {
  fill: var(--muted);
  transition: fill .18s var(--ease);
}
.chain-node.state-completed .chain-node-dot     { fill: var(--signal-live); }
.chain-node.state-running .chain-node-dot       { fill: var(--signal-warn); }
.chain-node.state-running .chain-node-dot       { animation: breathe 1.8s ease-in-out infinite; }
.chain-node.state-awaiting_input .chain-node-dot { fill: var(--signal-warn); }
.chain-node.state-queued .chain-node-dot        { fill: var(--signal-cool); }
.chain-node.state-pending .chain-node-dot       { fill: var(--faint); }

.chain-node.state-pending > rect { stroke-dasharray: 4 3; opacity: 0.85; }

.chain-edge {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.25;
}
.chain-edge.done {
  stroke: var(--signal-live-bd);
  stroke-width: 1.5;
}

.chain-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.chain-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Focused step card (shared with step previews) --- */

.step-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.step-label {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 4px;
}

/* --- Queue chain preview --- */
.rq-chain-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: rq-chain-step;
}
.rq-chain-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  counter-increment: rq-chain-step;
}
.rq-chain-step::before {
  content: counter(rq-chain-step);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  width: 18px;
  text-align: center;
}
.rq-chain-step-label {
  flex: 1;
  color: var(--ink);
  font-size: 0.9rem;
}

/* ---------- App footer ---------- */
.app-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 22px 28px 28px;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}
.app-foot .af-sep { color: var(--hair); }

/* ---------- Command palette ---------- */
.cp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 12, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  z-index: 400;
  opacity: 0;
  transition: opacity .14s var(--ease);
}
.cp-overlay.on { opacity: 1; }
.cp-panel {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--panel, #14161a);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  overflow: hidden;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.cp-overlay.on .cp-panel { transform: translateY(0); opacity: 1; }
.cp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair);
}
.cp-icon {
  color: var(--muted);
  font-size: 1rem;
}
.cp-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
}
.cp-esc {
  font-size: 0.6rem;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cp-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.cp-item {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s var(--ease);
}
.cp-item + .cp-item { margin-top: 1px; }
.cp-item.on { background: rgba(255,255,255,0.06); }
.cp-kind {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-item[data-kind="chain"] .cp-kind { color: var(--signal-high); }
.cp-item[data-kind="scope"] .cp-kind { color: var(--signal-live); }
.cp-item[data-kind="agent"] .cp-kind { color: var(--soft); }
.cp-label {
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 500;
}
.cp-sub {
  font-size: 0.72rem;
  color: var(--muted);
  justify-self: end;
}
.cp-hint {
  font-size: 0.68rem;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  min-width: 18px;
  text-align: center;
}
.cp-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}
.cp-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
.cmd-hint { cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.cmd-hint:hover { background: rgba(255,255,255,0.06); color: var(--ink); }

/* ---- Review deliverable viewer (Queue right-pane) ---- */
.rv-note {
  font-size: 0.78rem; color: var(--muted);
  margin-bottom: 10px; padding: 8px 10px;
  background: rgba(255,255,255,0.03); border-radius: 6px;
  border-left: 2px solid var(--accent-faint);
}
.rv-sheet-section { margin-bottom: 16px; }
.rv-sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 2px; margin-bottom: 4px;
}
.rv-sheet-name {
  font-weight: 500; color: var(--ink);
  font-size: 0.82rem; letter-spacing: 0.01em;
}
.rv-sheet {
  max-height: 340px; overflow: auto;
  border: 1px solid var(--hair); border-radius: 8px;
  background: rgba(0,0,0,0.25);
}
.rv-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.78rem;
}
.rv-table th {
  position: sticky; top: 0;
  background: rgba(20,22,30,0.98);
  text-align: left; padding: 6px 10px;
  color: var(--soft); font-weight: 500;
  border-bottom: 1px solid var(--hair);
  font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.rv-table td {
  padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top; color: var(--ink);
  position: relative;
}
.rv-table tr:hover td { background: rgba(255,255,255,0.02); }
.rv-cell-text { display: inline-block; padding-right: 24px; white-space: pre-wrap; }
.copy-cell {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; padding: 0;
  border-radius: 4px; border: 1px solid transparent;
  background: transparent; color: var(--muted);
  cursor: pointer; font-size: 0.85rem; line-height: 1;
  opacity: 0; transition: opacity .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.rv-table td:hover .copy-cell { opacity: 1; }
.copy-cell:hover { color: var(--ink); border-color: var(--hair); background: rgba(255,255,255,0.06); }
.rv-text-wrap { display: flex; flex-direction: column; gap: 8px; }
.rv-text-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rv-text {
  font-size: 0.82rem; line-height: 1.55;
  max-height: 400px; overflow: auto;
  padding: 12px; border-radius: 8px;
  background: rgba(0,0,0,0.25); border: 1px solid var(--hair);
  white-space: pre-wrap; color: var(--ink);
}

/* ---- Markdown renderer for text deliverables ---- */
.rv-md {
  max-height: 480px; overflow: auto;
  padding: 16px 18px; border-radius: 8px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--hair);
  color: var(--ink); font-size: 0.88rem; line-height: 1.6;
}
.rv-md h1 { font-family: var(--serif); font-size: 1.45rem; margin: 16px 0 8px; line-height: 1.2; font-weight: 300; letter-spacing: -0.025em; }
.rv-md h2 { font-family: var(--serif); font-size: 1.15rem; margin: 14px 0 6px; line-height: 1.3; font-weight: 300; letter-spacing: -0.02em; color: var(--ink); }
.rv-md h3 { font-size: 0.95rem; margin: 12px 0 4px; font-weight: 600; color: var(--soft); letter-spacing: 0.01em; }
.rv-md h4 { font-size: 0.82rem; margin: 10px 0 4px; font-weight: 600; color: var(--mid); text-transform: uppercase; letter-spacing: 0.08em; }
.rv-md h1:first-child,
.rv-md h2:first-child,
.rv-md h3:first-child { margin-top: 0; }
.rv-md p  { margin: 0 0 10px; }
.rv-md ul { margin: 0 0 10px 20px; padding: 0; }
.rv-md li { margin-bottom: 4px; }
.rv-md a  { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); }
.rv-md a:hover { text-decoration-color: currentColor; }
.rv-md code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.82em;
  color: var(--ink);
}
.rv-md strong { color: var(--ink); font-weight: 600; }
.rv-md em     { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--soft); }
.rv-md-code {
  background: rgba(0,0,0,0.4); border: 1px solid var(--hair);
  border-radius: 6px; padding: 10px 12px;
  font-size: 0.8rem; line-height: 1.45;
  overflow-x: auto; margin: 10px 0;
  white-space: pre-wrap;
}

/* ================================================================
   Overview view (v0.2 — landing page per client)
   ================================================================ */
.ov-row { display: grid; gap: 16px; margin-bottom: 18px; }
.ov-row-1 { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }

.ov-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ov-section-sub { font-size: 11px; opacity: .65; margin-top: 2px; }

.ov-alerts, .ov-fleet, .ov-perf, .ov-kanban {
  border-radius: 14px;
  overflow: hidden;
}

/* Row 1 cards (Alerts + Fleet Snapshot) share a fixed height so the
   kanban below stays predictably placed and the lists scroll inside the
   card instead of extending the page. */
:root { --ov-row1-h: 480px; }
.ov-alerts, .ov-fleet {
  height: var(--ov-row1-h);
  display: flex;
  flex-direction: column;
}
.ov-alert-list, .ov-fleet-list {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.ov-alert, .ov-fleet-row, .ov-fleet-group { flex-shrink: 0; }

.ov-alert {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  text-align: left;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
  position: relative;
  overflow: hidden;
}
.ov-alert::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--signal-cool);
  opacity: .6;
}
.ov-alert.sev-high::before { opacity: 1; }
.ov-alert.sev-med::before  { opacity: .65; }
.ov-alert.sev-low::before  { opacity: .35; }
.ov-alert:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--accent-faint);
  transform: translateY(-1px);
}
.ov-alert-body { min-width: 0; }
.ov-alert-title { font-weight: 600; font-size: 13px; }
.ov-alert-signal { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 3px; }
.ov-alert-tail { display: flex; align-items: center; gap: 10px; }
.ov-alert-conf { color: var(--accent-soft); font-size: 12px; }
.ov-alert-chev { color: var(--muted); font-size: 16px; }

.ov-fleet-group {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 4px 2px;
}
.ov-fleet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  text-align: left;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.ov-fleet-row:hover {
  background: rgba(255, 255, 255, .055);
  border-color: var(--accent-faint);
}
.ov-fleet-name { font-weight: 600; font-size: 13px; }
.ov-fleet-meta { font-size: 11px; opacity: .6; margin-top: 2px; }
.ov-fleet-chev { color: var(--muted); font-size: 14px; }

/* Performance Snapshot */
.ov-perf { margin-bottom: 18px; }
.ov-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
}
.ov-kpi {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ov-kpi-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ov-kpi-value { font-size: 22px; font-weight: 600; font-family: var(--mono); margin-top: 2px; }
.ov-kpi-delta { font-size: 11px; color: var(--accent-soft); }
.ov-kpi-delta.up   { color: var(--signal-cool); }
.ov-kpi-delta.down { color: var(--signal-high); }
.ov-kpi-sub { font-size: 10px; opacity: .55; }
.ov-perf-foot { padding: 8px 18px 16px; display: flex; justify-content: flex-end; }

@media (max-width: 1100px) {
  .ov-row-1 { grid-template-columns: 1fr; }
  .ov-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ov-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================
   Workflow view (Flight + Schedule + Kanban)
   ================================================================ */

/* Top row is fixed-height so the kanban below sits above the fold on
   typical laptop viewports (~900px). Adjust --wf-top-h if more or less
   space is wanted. */
:root { --wf-top-h: 360px; }

.wf-top {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  gap: 16px;
  margin-bottom: 16px;
}
.wf-flight, .wf-schedule {
  border-radius: 14px;
  overflow: hidden;
  height: var(--wf-top-h);
  display: flex;
  flex-direction: column;
}
.wf-flight-list, .wf-sched-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.wf-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.wf-section-sub { font-size: 11px; opacity: .65; margin-top: 2px; }

.wf-flight-list, .wf-sched-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 14px;
  /* the earlier height-bound rule sets flex/overflow so this just provides
     spacing for the inner items. */
}

.wf-flight-row {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
}
.wf-flight-row.open { border-color: var(--accent-faint); }
.wf-flight-row-head {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}
.wf-flight-row-head:hover { background: rgba(255, 255, 255, .035); }
.wf-flight-chev { color: var(--muted); font-size: 12px; }
.wf-flight-ident { min-width: 0; }
.wf-flight-title { font-weight: 600; font-size: 13px; }
.wf-flight-client { font-size: 11px; opacity: .6; margin-top: 2px; }
.wf-flight-status {
  font-size: 10px;
  letter-spacing: .06em;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--accent-soft);
}
.wf-flight-status.state-running        { background: rgba(165, 180, 252, .14); color: var(--signal-cool); }
.wf-flight-status.state-awaiting_input { background: rgba(165, 180, 252, .18); color: var(--signal-cool); }
.wf-flight-status.state-completed      { background: rgba(255, 255, 255, .05); color: var(--muted); }
.wf-flight-status.state-failed         { background: rgba(212, 138, 138, .15); color: var(--signal-high); }
.wf-flight-time { font-size: 11px; color: var(--muted); }

.wf-flight-detail {
  padding: 4px 16px 14px 44px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-flight-meta { display: flex; gap: 8px; font-size: 12px; }
.wf-meta-tag {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.wf-meta-body { color: rgba(255,255,255,.78); }
.wf-flight-summary { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.82); margin: 6px 0; }
.wf-flight-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Schedule */
.wf-sched-row {
  flex-shrink: 0;
  text-align: left;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.wf-sched-row:hover { background: rgba(255, 255, 255, .055); border-color: var(--accent-faint); }
.wf-sched-row.off { opacity: .55; }
.wf-sched-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wf-sched-title { font-weight: 600; font-size: 13px; }
.wf-sched-state {
  font-size: 9px;
  letter-spacing: .12em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
}
.wf-sched-state.on { background: rgba(165, 180, 252, .15); color: var(--signal-cool); }
.wf-sched-row-mid { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--accent-soft); }
.wf-sched-row-mid .sep { opacity: .4; }

/* Chain launcher */
.wf-chain-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.wf-chain-pick {
  text-align: left;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.wf-chain-pick:hover { background: rgba(255, 255, 255, .07); border-color: var(--accent-faint); }
.wf-chain-pick-name { font-weight: 600; font-size: 13px; }
.wf-chain-pick-desc { font-size: 11px; opacity: .7; line-height: 1.4; }
.wf-chain-pick-meta { font-size: 10px; opacity: .55; }

@media (max-width: 1100px) {
  .wf-top { grid-template-columns: 1fr; }
  .wf-chain-picker { grid-template-columns: 1fr; }
}

/* ================================================================
   Watchtower — Activity Log (added v0.2)
   ================================================================ */
.wt-activity-log { font-size: 13px; }
.wt-activity-table {
  display: grid;
  grid-template-columns: 160px 1fr 110px 130px 130px;
  gap: 0;
  font-size: 12px;
}
.wt-activity-row {
  display: contents;
}
.wt-activity-row > span {
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  display: flex;
  align-items: center;
}
.wt-activity-row > span:first-child { padding-left: 0; }
.wt-activity-row > span:last-child  { padding-right: 0; }
.wt-activity-head > span {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.wt-activity-outcome {
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 600;
  /* Tight pill — without `width: fit-content` + the padding override
     below, the pill inherits the grid cell's 10x12 padding and
     stretches to fill the column. */
  padding: 3px 10px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  align-self: center;
  justify-self: start;
  text-transform: uppercase;
}
/* Specificity-match the cell's padding rule so the pill's tight
   padding actually wins. The .wt-activity-row.wt-activity-row-clickable
   > span rule has 2 classes worth of specificity; we need to beat that. */
.wt-activity-row.wt-activity-row-clickable > span.wt-activity-outcome,
.wt-activity-row > span.wt-activity-outcome {
  padding: 3px 10px;
}
/* Pill colours map to each run's terminal state. Same family as the
   accent tiles in the modal:
     completed → green (delivered)
     review    → amber (needs operator)
     running   → cool blue (in flight)
     failed    → red
     neutral   → grey (queued / unknown) */
.wt-activity-outcome.completed { background: rgba(110, 231, 183, .14); color: rgba(110, 231, 183, .95); }
.wt-activity-outcome.review    { background: rgba(252, 211, 77, .14);  color: #f7e4a8; }
.wt-activity-outcome.running   { background: rgba(165, 180, 252, .15); color: var(--signal-cool); }
.wt-activity-outcome.failed    { background: rgba(212, 138, 138, .15); color: var(--signal-high); }
.wt-activity-outcome.neutral   { background: rgba(255, 255, 255, .04); color: var(--muted); }

/* ── Activity Log v2: Type pill + Status pill (5/21 feedback) ─────── */
/* Type pill — Signal (rec-driven) gets the cool accent; Action gets
   neutral. Both pills sit in their grid cell as a compact chip. */
.wt-activity-type {
  font-size: 10px;
  letter-spacing: .06em;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
  align-self: center;
  justify-self: start;
  text-transform: uppercase;
}
.wt-activity-type-signal {
  background: rgba(165, 180, 252, .14);
  color: var(--signal-cool);
}
.wt-activity-type-action {
  background: rgba(255, 255, 255, .05);
  color: var(--soft);
}
/* Scan type — routine daily summaries (not signals, not actions).
   Muted so the operator's eye skips past them when scanning the log
   for real signal/action entries. */
.wt-activity-type-scan {
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  border: 1px solid var(--hair);
}
/* Status pill — Approved (default success), Denied (red), Failed
   (red, dimmer), Needs review (amber), In progress (cool). */
.wt-activity-status {
  font-size: 10px;
  letter-spacing: .06em;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
  align-self: center;
  justify-self: start;
  text-transform: uppercase;
}
.wt-activity-status-approved { background: rgba(110, 231, 183, .14); color: rgba(110, 231, 183, .95); }
.wt-activity-status-denied   { background: rgba(212, 138, 138, .14); color: var(--signal-high); }
.wt-activity-status-failed   { background: rgba(212, 138, 138, .10); color: rgba(212, 138, 138, .8); }
.wt-activity-status-review   { background: rgba(252, 211, 77, .14);  color: #f7e4a8; }
.wt-activity-status-running  { background: rgba(165, 180, 252, .15); color: var(--signal-cool); }
.wt-activity-status-pending  { background: rgba(255, 255, 255, .04); color: var(--muted); }
/* Scan status — "Logged" reads as historical/informational, not as
   something needing follow-up. */
.wt-activity-status-logged   { background: rgba(255, 255, 255, .03); color: var(--muted); }
/* Reason tag — surfaces which rec_filters clause silenced this scan
   row. Lets the operator audit the predicate from the UI; hover for
   the full clause label. Sits inline with the item title, dimmed so
   it doesn't compete with the title text. */
.wt-activity-reason {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hair);
  border-radius: 3px;
  vertical-align: middle;
  opacity: .75;
}
.wt-activity-row.wt-activity-row-clickable > span.wt-activity-type,
.wt-activity-row.wt-activity-row-clickable > span.wt-activity-status {
  padding: 3px 10px;
}

@media (max-width: 980px) {
  .wt-activity-table { grid-template-columns: 90px 1fr 90px 90px 80px; font-size: 11px; }
}

/* ================================================================
   Workflow v0.3 — kanban color coding, card origin badges,
   enriched run modal, new-schedule form
   ================================================================ */

/* Column color tints. Header colored, body has a subtle wash. */
.kb-col-queued    .kb-col-title { color: var(--signal-cool); }
.kb-col-running   .kb-col-title { color: #f0c994; }   /* amber */
.kb-col-needs     .kb-col-title { color: #ef9a8d; }   /* red-orange */
.kb-col-completed .kb-col-title { color: #9ac2a5; }   /* green */

.kb-col.kb-col-queued    { background: linear-gradient(180deg, rgba(165, 180, 252, 0.07) 0%, rgba(255, 255, 255, 0.02) 60%); }
.kb-col.kb-col-running   { background: linear-gradient(180deg, rgba(252, 211, 77,  0.08) 0%, rgba(255, 255, 255, 0.02) 60%); }
.kb-col.kb-col-needs     { background: linear-gradient(180deg, rgba(239, 154, 141, 0.08) 0%, rgba(255, 255, 255, 0.02) 60%); }
.kb-col.kb-col-completed { background: linear-gradient(180deg, rgba(154, 194, 165, 0.07) 0%, rgba(255, 255, 255, 0.02) 60%); }

/* Subtle column-tint stripe at top of head, makes the four columns even
   more scannable at a glance. */
.kb-col-head { border-top: 2px solid transparent; }
.kb-col-queued    .kb-col-head { border-top-color: rgba(165, 180, 252, 0.55); }
.kb-col-running   .kb-col-head { border-top-color: rgba(252, 211, 77,  0.55); }
.kb-col-needs     .kb-col-head { border-top-color: rgba(239, 154, 141, 0.55); }
.kb-col-completed .kb-col-head { border-top-color: rgba(154, 194, 165, 0.55); }

/* ---------- Card origin badge ---------- */
.kb-origin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-soft);
}
.kb-origin .kb-origin-dot { font-size: 9px; opacity: .85; }
.kb-origin.scheduled { background: rgba(165, 180, 252, 0.16); color: var(--signal-cool); }
.kb-origin.manual    { background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.kb-origin.alert.sev-high  { background: rgba(252, 165, 165, 0.20); color: var(--signal-high); }
.kb-origin.alert.sev-med   { background: rgba(252, 211, 77,  0.18); color: var(--signal-warn); }
.kb-origin.alert.sev-low   { background: rgba(255, 255, 255, 0.06); color: var(--accent-soft); }

/* Foot row gets a flex spread so kind+origin sit left, state/duration right. */
.kb-card-foot { gap: 8px; flex-wrap: wrap; }
.kb-card-foot .kb-origin   { margin-right: auto; }

/* Auto vs user kind chip (5/21 feedback). Small, low-contrast — the
   origin badge and state pill carry the louder signals; this is a
   "what kind of task" indicator that reads in passing without
   demanding attention. */
.kb-kind {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  flex-shrink: 0;
}
.kb-kind-auto {
  /* Default neutral chip — agent-driven runs are the majority. */
  color: var(--muted);
}
.kb-kind-user {
  /* User-created TODOs get a soft cool accent so they pop in the
     kanban without screaming. */
  color: rgba(165, 180, 252, 0.95);
  border-color: rgba(165, 180, 252, 0.30);
  background: rgba(165, 180, 252, 0.06);
}

/* ---------- Run modal: meta grid ---------- */
.kb-run-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
}
.kb-run-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.kb-run-meta-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kb-run-meta-value { font-size: 13px; color: var(--ink); }

/* ---------- New-schedule modal form ---------- */
.wf-ns-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.wf-ns-typetog { display: flex; gap: 6px; }
.wf-ns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wf-ns-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-ns-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.wf-ns-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--ink);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--sans);
}
.wf-ns-input:focus {
  outline: none;
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.06);
}
.wf-ns-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--accent-soft);
}

@media (max-width: 720px) {
  .wf-ns-grid { grid-template-columns: 1fr; }
  .kb-run-meta { grid-template-columns: 1fr; }
}

/* ================================================================
   Overview v0.4 — top ticker, alert tint, fleet modal list,
   inline kanban detail
   ================================================================ */

/* ── Performance Snapshot top banner ──────────────────────────────── */
.ov-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin-bottom: 16px;
  border-radius: 12px;
}
.ov-tk-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  flex: 1;
  min-width: 0;
}
.ov-tk-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 14px;
}
.ov-tk-tile:first-child { border-left: 0; padding-left: 0; }
.ov-tk-label {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ov-tk-value-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ov-tk-value {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--ink);
  white-space: nowrap;
}
.ov-tk-delta {
  font-size: 11px;
  font-family: var(--mono);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.ov-tk-delta.pos     { color: var(--signal-cool); }   /* positive — cool blue per the calmer palette */
.ov-tk-delta.neutral { color: var(--signal-warn); }   /* neutral / within threshold — amber */
.ov-tk-delta.neg     { color: var(--signal-high); }   /* negative — red */
.ov-tk-arrow { font-size: 9px; }
.ov-tk-range { flex-shrink: 0; }

@media (max-width: 1280px) {
  .ov-ticker { flex-wrap: wrap; }
  .ov-tk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ov-tk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Alert color coding (per-row tint + colored badge) ────────────── */
.ov-alert.sev-high  { background: rgba(252, 165, 165, 0.07); border-color: rgba(252, 165, 165, 0.20); }
.ov-alert.sev-med   { background: rgba(252, 211, 77,  0.07); border-color: rgba(252, 211, 77,  0.20); }
.ov-alert.sev-low   { background: rgba(154, 194, 165, 0.07); border-color: rgba(154, 194, 165, 0.22); }
.ov-alert.sev-high::before { background: var(--signal-high); opacity: 1; }
.ov-alert.sev-med::before  { background: var(--signal-warn); opacity: 1; }
.ov-alert.sev-low::before  { background: var(--signal-live); opacity: 0.85; }
.ov-alert .kb-sev.sev-high { background: rgba(252, 165, 165, 0.20); color: var(--signal-high); }
.ov-alert .kb-sev.sev-med  { background: rgba(252, 211, 77,  0.18); color: var(--signal-warn); }
.ov-alert .kb-sev.sev-low  { background: rgba(154, 194, 165, 0.16); color: var(--signal-live); }

/* ── Fleet agent modal: capability list ──────────────────────────── */
.ov-fleet-caplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ov-fleet-cap {
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 12px;
  align-items: start;
}
.ov-fleet-cap-mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
  color: var(--soft);
}
.ov-fleet-cap-body { min-width: 0; }
.ov-fleet-cap-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.ov-fleet-cap-desc {
  font-size: 12px;
  color: var(--accent-soft);
  margin-top: 4px;
  line-height: 1.45;
}

/* ── Inline detail block under a Completed card on Overview ──────── */
.kb-card.kb-card-open {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 100%);
  border-color: var(--accent-faint);
}
.kb-inline-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: default;
}
.kb-inline-summary {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  margin: 0;
}
.kb-inline-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: 11px;
  margin: 0;
}
.kb-inline-meta dt {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9.5px;
  color: var(--muted);
  align-self: center;
}
.kb-inline-meta dd { margin: 0; color: var(--accent-soft); }

/* The old .ov-perf mid-page card no longer renders — leave its rules
   harmless if anything still references them. */

/* Sidebar nested items (e.g. Flight under Workflow). Always rendered;
   indented so the visual hierarchy is obvious without an expand toggle. */
.sidebar-nav .sn-tree { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav .sn-subitems {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 24px;
  margin-top: 1px;
  position: relative;
}
.sidebar-nav .sn-subitems::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.sidebar-nav .sn-subitem { font-size: 12.5px; padding: 6px 10px; }

/* ================================================================
   Overview v0.5 — minimal severity dot, KPI sparklines, fleet catalog
   ================================================================ */

/* Severity dot replaces the labeled MEDIUM/HIGH/LOW pill on alerts.
   The color carries the meaning; tooltip preserves a11y. */
.ov-sev-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.ov-sev-dot.sev-high { background: var(--signal-high); box-shadow: 0 0 8px rgba(252, 165, 165, .35), 0 0 0 2px rgba(252, 165, 165, .1); }
.ov-sev-dot.sev-med  { background: var(--signal-warn); box-shadow: 0 0 8px rgba(252, 211, 77, .30), 0 0 0 2px rgba(252, 211, 77, .1); }
.ov-sev-dot.sev-low  { background: var(--signal-live); box-shadow: 0 0 8px rgba(154, 194, 165, .25), 0 0 0 2px rgba(154, 194, 165, .1); }

/* The alert grid was sized for a wide MEDIUM pill; tighten the leading
   column now that we're rendering a 10px dot instead. */
.ov-alert {
  grid-template-columns: 16px 1fr auto !important;
  gap: 12px !important;
}

/* KPI sparklines — small, calm trend lines under each tile. */
.ov-spark {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 4px;
  overflow: visible;
}
.ov-spark-line {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--accent-soft);
}
.ov-spark-fill {
  fill: rgba(255, 255, 255, 0.04);
  stroke: none;
}
.ov-spark.pos     .ov-spark-line { stroke: var(--signal-cool); }
.ov-spark.pos     .ov-spark-fill { fill:   rgba(165, 180, 252, 0.10); }
.ov-spark.neg     .ov-spark-line { stroke: var(--signal-high); }
.ov-spark.neg     .ov-spark-fill { fill:   rgba(252, 165, 165, 0.10); }
.ov-spark.neutral .ov-spark-line { stroke: var(--signal-warn); }
.ov-spark.neutral .ov-spark-fill { fill:   rgba(252, 211, 77, 0.08); }

/* Tile lays out as: label, value-row, sparkline; spark fills the gap. */
.ov-tk-tile { gap: 2px; }

/* Overview Fleet Snapshot row gets a row layout: name+tagline | count | chev. */
.ov-fleet-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
}
.ov-fleet-row-body { min-width: 0; }
.ov-fleet-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent-soft);
  white-space: nowrap;
}

/* ================================================================
   Watchtower v0.6 — color-coded signal cards, collapsible Activity
   Log, bounded scroll, clickable rows
   ================================================================ */

/* Signal card — left rail + tinted background by severity. The badge
   (.wt-sev) already reads severity; we add a left border accent here. */
.wt-rec {
  position: relative;
  border-left: 3px solid rgba(255, 255, 255, 0.18);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.wt-rec.sev-high  { border-left-color: var(--signal-high); background: rgba(252, 165, 165, 0.04); }
.wt-rec.sev-med   { border-left-color: var(--signal-warn); background: rgba(252, 211, 77,  0.04); }
.wt-rec.sev-low   { border-left-color: var(--signal-live); background: rgba(154, 194, 165, 0.04); }
.wt-rec.sev-high.open  { background: rgba(252, 165, 165, 0.07); }
.wt-rec.sev-med.open   { background: rgba(252, 211, 77,  0.07); }
.wt-rec.sev-low.open   { background: rgba(154, 194, 165, 0.07); }

/* Severity badge background per level. */
.wt-sev {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent-soft);
}
.wt-sev.high { background: rgba(252, 165, 165, 0.18); color: var(--signal-high); }
.wt-sev.med  { background: rgba(252, 211, 77,  0.18); color: var(--signal-warn); }
.wt-sev.low  { background: rgba(154, 194, 165, 0.16); color: var(--signal-live); }

/* Activity Log — collapsible header button + bounded scroll body. */
.wt-activity-log { padding: 0; }
.wt-activity-head-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.wt-activity-head-btn:hover { background: rgba(255, 255, 255, 0.02); }
.wt-activity-toggle {
  font-size: 13px;
  color: var(--muted);
  transition: transform .15s var(--ease);
}

.wt-activity-body {
  display: flex;
  flex-direction: column;
}
.wt-activity-scroll {
  /* Roughly 7 rows visible (each row ~38px including borders).
     Anything beyond scrolls inside the card. */
  max-height: 282px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* 5-column activity log per 5/21 feedback:
     timestamp | item | type | user | status
   Header + data rows share the same grid-template-columns so values
   stay aligned column-by-column. */
.wt-activity-row.wt-activity-row-clickable,
.wt-activity-head {
  display: grid !important;
  grid-template-columns: 160px minmax(0, 1fr) 110px 130px 130px;
  gap: 0;
  flex-shrink: 0;
}
.wt-activity-row.wt-activity-row-clickable {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.wt-activity-row.wt-activity-row-clickable:hover {
  background: rgba(255, 255, 255, 0.03);
}
.wt-activity-row.wt-activity-row-clickable > span,
.wt-activity-head > span {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  font-size: 12px;
  min-width: 0;
}
.wt-activity-row.wt-activity-row-clickable > span:first-child { padding-left: 20px; }
.wt-activity-row.wt-activity-row-clickable > span:last-child  { padding-right: 20px; }
.wt-activity-head > span:first-child { padding-left: 20px; }
.wt-activity-head > span:last-child  { padding-right: 20px; }

/* Truncate long item / user cells so grid columns stay rigid. */
.wt-act-cell-item,
.wt-act-cell-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
}

@media (max-width: 1100px) {
  .wt-activity-row.wt-activity-row-clickable,
  .wt-activity-head {
    grid-template-columns: 130px 1fr 90px 110px 110px;
  }
}
@media (max-width: 760px) {
  .wt-activity-row.wt-activity-row-clickable,
  .wt-activity-head {
    grid-template-columns: 100px 1fr 90px;
  }
  /* Hide User + Status on narrow screens — Item + Type + Timestamp
     carry the scan-level signal. */
  .wt-activity-row.wt-activity-row-clickable > span:nth-child(4),
  .wt-activity-row.wt-activity-row-clickable > span:nth-child(5),
  .wt-activity-head > span:nth-child(4),
  .wt-activity-head > span:nth-child(5) { display: none; }
}

/* ================================================================
   Watchtower v0.7 — single-row signal cards, structured expanded view
   ================================================================ */

/* Card: single-row scannable head (severity / type / title / conf / time). */
.wt-rec {
  cursor: pointer;
  padding: 0;
}
.wt-rec-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-width: 0;
}
/* Title fills the row — the row used to be a 5-column grid that
   reserved slots for cap/conf/time even when those elements were
   no longer rendered, which left the title hard-capped at ~70% of
   the row even when nothing else was there to push it. Flex with
   title:1fr lets the title eat all available width while the
   trailing pills (stale, queued) sit flush right. */
.wt-rec-row > .wt-rec-title { flex: 1 1 auto; }
.wt-rec-row > .wt-rec-stale-tag,
.wt-rec-row > .wt-rec-status { flex: 0 0 auto; }
/* Channel / brand icon sitting between the severity pill and the
   title. Small enough to read as an inline anchor without competing
   with the title text. */
.wt-rec-row > .wt-rec-row-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--soft);
}
.wt-rec.open .wt-rec-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.wt-rec-cap {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  white-space: nowrap;
}
.wt-rec-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wt-rec-conf-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(165, 180, 252, 0.16);
  color: var(--signal-cool);
}
.wt-rec-time { font-size: 11px; color: var(--muted); }
/* M20 — rec re-fire badge. Shows when the same (signal_type, leaf_id) has
   fired more than once and been collapsed into one card. */
.wt-rec-walk-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(247, 184, 100, 0.16);
  color: #f7b864;
  cursor: help;
}
.wt-rec-walk-count .fx-icon { width: 10px; height: 10px; }

/* M20.2 — Live narration in running-state run modal. */
.kb-live-action {
  font-size: 11px;
  color: var(--signal-cool);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.kb-live-narration {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.005em;
  border-left: 2px solid var(--signal-cool);
  padding-left: 10px;
}

/* Expanded detail block. */
.wt-rec-detail {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: default;
}
/* No-action rec body — daily scans that came back clean.
   Wider gaps, muted copy, no action buttons. The header above this
   already reads "Daily Check Complete. No significant flags." so the
   body just confirms there's nothing to do. */
.wt-rec-detail-noaction {
  padding: 24px 22px 28px;
  gap: 14px;
}
.wt-rec-noaction-lede {
  margin: 0;
  font-size: 0.95rem;
  color: var(--soft);
  line-height: 1.55;
}
.wt-rec-noaction-context {
  margin: 0;
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.5;
  padding: 10px 14px;
  border-left: 2px solid var(--hair);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
.wt-rec-noaction-foot {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0;
}
.wt-rec-section-head {
  /* Override the base .kicker styling so rec-modal section heads
     read as soft sentence-case labels rather than ALL-CAPS programmer
     banners. Smaller, lighter, no bullet. */
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  margin-bottom: 8px;
}
.wt-rec-section-head.kicker::before {
  display: none !important;
}

/* ── M16 human-readable diagnosis blocks ─────────────────────────────── */
.wt-rec-m16-block {
  /* Borderless by default — generic blocks are content + spacing.
     Colored accent variants below (.wt-rec-m21-recommend,
     .wt-rec-m21-risk, etc.) restore a tinted background + accent
     border-left when they need to signal action / warning. */
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 22px;
}
.wt-rec-m16-block:last-child {
  margin-bottom: 0;
}
.wt-rec-m16-block .wt-rec-section-head {
  margin-bottom: 10px;
}
/* Drop the global kicker bullet inside rec-card sections — the boxed
   container already separates them from the surrounding content. */
.wt-rec-m16-block .wt-rec-section-head.kicker::before,
.wt-rec-detail .wt-rec-section-head.kicker::before {
  display: none;
}
.wt-rec-m16-body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  white-space: pre-wrap;
}
/* The "Iris Diagnosis" block used to carry a left accent border for
   visual lift. Now that the rec modal is borderless and uses spacing
   between sections, the lone accent line read as a stray edge —
   dropped. */
.wt-rec-m16-meaning { border: none; }
.wt-rec-m16-treewalk-prose {
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-wrap;
  margin: 0;
}
/* Tree-walk visual — vertical decision chain */
.wt-rec-m16-tree { display: flex; flex-direction: column; gap: 8px; }
.wt-rec-m16-tree-pre {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
  padding: 0 4px;
}
.wt-rec-m16-tree-steps {
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  padding-left: 0;
}
.wt-rec-m16-tree-step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  position: relative;
}
.wt-rec-m16-tree-step::after {
  content: '';
  position: absolute;
  left: 26px; right: auto;
  bottom: -7px;
  width: 2px; height: 6px;
  background: rgba(255, 255, 255, 0.18);
}
.wt-rec-m16-tree-step:last-of-type::after { display: none; }
.wt-rec-m16-tree-num {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-soft);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.wt-rec-m16-tree-q { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.92); margin-bottom: 2px; }
.wt-rec-m16-tree-ev { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.66); }
.wt-rec-m16-tree-ans {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 4px;
  align-self: center;
}
.wt-rec-m16-tree-ans-yes { background: rgba(107, 214, 142, 0.18); color: #6BD68E; }
.wt-rec-m16-tree-ans-no  { background: rgba(224, 124, 124, 0.18); color: #E07C7C; }
.wt-rec-m16-tree-conclusion {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--accent-faint);
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.wt-rec-m16-tree-conc-k {
  color: var(--accent-soft);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wt-rec-m16-tree-leaf {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 8px;
}

/* Chain steps — arrow removed; cards stack flush with consistent padding. */
.wt-rec-m16-chain-list { display: flex; flex-direction: column; gap: 8px; }
.wt-rec-m16-chain-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
}
.wt-rec-m16-chain-who {
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}
.wt-rec-m16-chain-what {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

/* Expected deliverable */
.wt-rec-m16-deliv-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wt-rec-m16-deliv-format {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 9px;
  border-radius: 4px;
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
/* Office-suite color cues — XLS green, PPT orange, DOC blue, PDF red, HTML amber. */
.wt-rec-m16-deliv-format.fmt-sheet { background: rgba(78, 195, 124, 0.16); border-color: rgba(78, 195, 124, 0.32); color: #a8e6c0; }
.wt-rec-m16-deliv-format.fmt-slide { background: rgba(232, 134,  62, 0.18); border-color: rgba(232, 134,  62, 0.34); color: #f0c2a0; }
.wt-rec-m16-deliv-format.fmt-doc   { background: rgba(110, 156, 232, 0.16); border-color: rgba(110, 156, 232, 0.32); color: #c4d8f5; }
.wt-rec-m16-deliv-format.fmt-pdf   { background: rgba(220,  92,  92, 0.16); border-color: rgba(220,  92,  92, 0.32); color: #f0b4b4; }
.wt-rec-m16-deliv-format.fmt-web   { background: rgba(214, 178,  84, 0.16); border-color: rgba(214, 178,  84, 0.32); color: #efddb0; }
/* Grid-aligned label/value rows so "What it is" / "You then" line up. */
.wt-rec-m16-deliv-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: baseline;
}
.wt-rec-m16-deliv-k {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wt-rec-m16-deliv-v {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.wt-rec-description {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.wt-rec-proposal-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wt-rec-proposal-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}
.wt-rec-proposal-box .wt-rd-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Context input — matches the proposal box vibe. */
.wt-rec-ctx {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  resize: vertical;
  min-height: 56px;
  margin-top: 4px;
}
.wt-rec-ctx:focus {
  outline: none;
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.05);
}
.wt-rec-ctx::placeholder { color: var(--muted); }
.wt-rec-ctx-required {
  border-color: var(--signal-high-bd);
  background: var(--signal-high-bg);
  animation: breathe 1.2s ease-in-out 2;
}

/* Action footer */
.wt-rec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.wt-rec-conf-text {
  font-size: 12px;
  color: var(--accent-soft);
}
.wt-rec-actions { display: flex; gap: 8px; }

@media (max-width: 720px) {
  /* On narrow screens let the title wrap to a second line instead of
     truncating with an ellipsis — full headline is readable without
     opening the modal. The flex layout already handles the rest. */
  .wt-rec-row { flex-wrap: wrap; }
  .wt-rec-row > .wt-rec-title { white-space: normal; overflow: visible; }
}

/* ================================================================
   Watchtower v0.7 — Run launched notice + button loading state
   ================================================================ */

/* Inline button spinner — replaces "Approve & Run" while a launch is
   in flight. The rec disappears from the feed once the status flips,
   so the loader is only visible for a brief moment by design. */
.wt-btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--bg-deep, #0c1014);
  animation: wt-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}
.btn.primary .wt-btn-spinner {
  border-color: rgba(0, 0, 0, 0.18);
  border-top-color: var(--bg-deep, #0c1014);
}
.btn.disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; }
@keyframes wt-spin { to { transform: rotate(360deg); } }

/* Bottom-right "Run launched" notice. Persists for 10s with a manual
   close, gives a one-click jump into Flight to follow progress. */
.wt-run-notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(360px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.28);
  z-index: 80;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.wt-run-notice.on { opacity: 1; transform: translateY(0); }

.wt-rn-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(165, 180, 252, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.wt-rn-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal-cool);
  box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.6);
  animation: wt-rn-pulse 1.4s ease-out infinite;
}
@keyframes wt-rn-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(165, 180, 252, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(165, 180, 252, 0); }
  100% { box-shadow: 0 0 0 0    rgba(165, 180, 252, 0); }
}

.wt-rn-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wt-rn-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.wt-rn-sub {
  font-size: 11px;
  color: var(--accent-soft);
}
.wt-rn-actions { margin-top: 6px; }

.wt-rn-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}
.wt-rn-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

/* Top-right stack of scan-complete toasts. Each toast confirms a manual
   Watchtower scan finished — reports the new-signal count, clickable to
   jump to Watchtower for that client. Stacks vertically so concurrent
   per-client scans don't overlap. */
.wt-scan-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.wt-scan-toast {
  pointer-events: auto;
  width: min(340px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px 12px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid rgba(165, 180, 252, 0.45);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 12px 30px rgba(0, 0, 0, 0.40),
    0 3px 10px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.wt-scan-toast.on { opacity: 1; transform: translateY(0); }
.wt-scan-toast.has-signals { border-left-color: var(--signal-live, #6ee7b7); }
.wt-scan-toast.failed {
  border-left-color: #f87171;
  cursor: default;
}
.wt-scan-toast:hover:not(.failed) {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%);
}
.wt-scan-toast-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wt-scan-toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.wt-scan-toast-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.wt-scan-toast-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}
.wt-scan-toast-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

/* Watchtower decision buttons — explicit red/green so the action's
   intent is obvious at a glance. */
.wt-btn-approve {
  background: var(--signal-live, #6ee7b7);
  color: #082014;
  border: 1px solid rgba(52, 211, 153, 0.55);
  font-weight: 600;
}
.wt-btn-approve:hover:not(:disabled) {
  background: #7eecbf;
  border-color: rgba(52, 211, 153, 0.75);
}
.wt-btn-approve:disabled,
.wt-btn-approve.disabled {
  opacity: .75;
}
.wt-btn-approve .wt-btn-spinner {
  border-color: rgba(8, 32, 20, 0.25);
  border-top-color: #082014;
}

.wt-btn-deny {
  background: rgba(252, 165, 165, 0.10);
  color: var(--signal-high, #fca5a5);
  border: 1px solid rgba(252, 165, 165, 0.40);
  font-weight: 500;
}
.wt-btn-deny:hover:not(:disabled) {
  background: rgba(252, 165, 165, 0.16);
  border-color: rgba(252, 165, 165, 0.60);
  color: #fcb6b6;
}

/* Acknowledge — the sole footer button on diagnosis-only cards. Reads as
   "I saw this, file it" — calmer than approve-green (which implies an
   action is being launched) and distinct from deny-red (which implies
   the signal is invalid). Cool slate-blue tone keeps it informational. */
.wt-btn-acknowledge {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.45);
  font-weight: 600;
}
.wt-btn-acknowledge:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.24);
  border-color: rgba(148, 163, 184, 0.65);
  color: #e2e8f0;
}

/* ================================================================
   Watchtower v3.0 — UX additions for non-technical operators
   - Panel header with Run signals + freshness anchor
   - Iris explainer card
   - Provenance tags (computed / stale)
   - Heads-up caveats card
   - Tree blocks + chain/delivery rows
   ================================================================ */

/* Panel header — sits above the fired-signal blocks. Always visible
   so operators can refresh and see freshness without expanding anything. */
.wt-rca-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 4px;
}
.wt-rca-panel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.wt-rca-panel-anchor {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.wt-rca-panel-stale {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(220, 180, 90, 0.14);
  color: rgba(230, 200, 130, 1);
}
.wt-rca-rerun {
  flex-shrink: 0;
}

/* Tags inside the signal-card head row (right-aligned next to confidence). */
.wt-opt-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wt-opt-input-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wt-tag {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  cursor: help;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.wt-tag-stale {
  background: rgba(220, 180, 90, 0.14);
  color: rgba(230, 200, 130, 1);
}
.wt-tag-derived {
  background: rgba(150, 180, 220, 0.14);
  color: rgba(170, 200, 235, 1);
}
.wt-tag-relevant {
  background: rgba(120, 200, 140, 0.12);
  color: rgba(150, 220, 170, 1);
}

/* Concrete extras line — second line under the headline metric value
   that pulls ms.components into a human-readable sentence. */
.wt-opt-extras {
  color: var(--soft);
  margin-top: 2px;
}

/* Heads-up caveats card — replaces the bare ⚠ string. */
.wt-rca-caveats-card {
  background: rgba(220, 180, 90, 0.06);
  border: 1px solid rgba(220, 180, 90, 0.22);
  border-radius: 6px;
  padding: 10px 12px;
}
.wt-rca-caveats-head {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(230, 200, 130, 1);
  margin-bottom: 4px;
  font-weight: 600;
}
.wt-rca-caveats-list {
  margin: 0;
  padding-left: 18px;
  color: var(--soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Iris explainer card — sits inside each signal card, between the
   metric-snapshot line and the channel hypotheses. Designed to be the
   first thing a non-technical AM reads. */
.wt-iris-card {
  margin-top: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(140, 170, 220, 0.06), rgba(140, 170, 220, 0.02));
  border: 1px solid rgba(140, 170, 220, 0.18);
  border-radius: 6px;
}
.wt-iris-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.wt-iris-badge {
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(140, 170, 220, 0.18);
  color: rgba(170, 200, 235, 1);
  font-weight: 600;
}
.wt-iris-tagline {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.wt-iris-body p {
  margin: 0 0 8px 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink);
}
.wt-iris-body p:last-child { margin-bottom: 0; }
.wt-iris-loading,
.wt-iris-error {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}
.wt-iris-loading .wt-iris-tagline,
.wt-iris-error .wt-iris-tagline {
  color: var(--muted);
}

/* Tree hypothesis blocks — one per channel when the engine fans out. */
.wt-tree-block {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.05);
}
.wt-tree-head {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.wt-tree-row {
  font-size: 0.82rem;
  color: var(--ink);
  padding: 2px 0;
}

/* Chain routing — replaces the previous mono single-line render. */
.wt-rca-chain {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
.wt-rca-chain-head {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.wt-rca-chain-steps {
  color: var(--ink);
  font-size: 0.84rem;
}
.wt-rca-delivery,
.wt-rca-review {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--soft);
}
.wt-rca-review {
  color: rgba(230, 200, 130, 0.95);
}

/* Suppressed-block guards summary line under the reason. */
.wt-rca-aux-guards {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* ================================================================
   Watchtower v3.1 — bucket layout + Run signals from view header
   ================================================================ */

/* Run signals button in the view-header actions (scoped mode). */
.wt-view-rerun {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Per-row Run chip on portfolio cards. Compact, inherits row hover. */
.wt-row-rerun {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.wt-row-rerun:hover:not(:disabled) {
  background: rgba(110, 231, 183, 0.10);
  border-color: rgba(110, 231, 183, 0.40);
  color: rgba(110, 231, 183, 1);
}
.wt-row-rerun.busy,
.wt-row-rerun:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Panel header counts strip (firing · quieted · watching · no data). */
.wt-rca-panel-counts {
  flex-shrink: 0;
}

/* Buckets — top-level groups inside the signals panel. */
.wt-bucket {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.wt-bucket-empty {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.03);
}
.wt-bucket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  padding: 0;
  list-style: none;
}
details.wt-bucket > summary.wt-bucket-head {
  cursor: pointer;
  user-select: none;
}
details.wt-bucket > summary.wt-bucket-head::-webkit-details-marker { display: none; }
details.wt-bucket > summary.wt-bucket-head::before {
  content: '▸';
  font-size: 0.8rem;
  color: var(--muted);
  transition: transform 120ms ease;
}
details.wt-bucket[open] > summary.wt-bucket-head::before {
  transform: rotate(90deg);
}
.wt-bucket-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.wt-bucket-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--soft);
}
.wt-bucket-sub {
  flex: 1;
  min-width: 0;
}
.wt-bucket-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.04);
}
.wt-bucket-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr;
  gap: 12px;
  padding: 4px 0;
  align-items: baseline;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
}
.wt-bucket-row:last-child { border-bottom: none; }
.wt-bucket-row-name {
  color: var(--ink);
  font-size: 0.82rem;
}
.wt-bucket-row-state {
  color: var(--muted);
}

/* Bucket variants — left border accent matches the semantic. */
.wt-bucket-firing {
  border-left: 3px solid rgba(252, 165, 165, 0.55);
}
.wt-bucket-quieted {
  border-left: 3px solid rgba(220, 180, 90, 0.45);
  background: rgba(220, 180, 90, 0.025);
}
.wt-bucket-watching {
  border-left: 3px solid rgba(140, 200, 160, 0.40);
}
.wt-bucket-notwatched {
  border-left: 3px solid rgba(160, 160, 180, 0.30);
  background: rgba(255, 255, 255, 0.01);
}

/* Stale-signal rec — engine hasn't re-fired in 24h+. Operator can still
   act, but the visual cue suggests the signal may have auto-resolved. */
.wt-rec.stale-signal {
  opacity: 0.62;
}
.wt-rec.stale-signal:hover { opacity: 0.85; }
.wt-rec-stale-tag {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(180, 180, 180, 0.10);
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Compact signal-row variant — used by buildSignalsPanel(opts.compact)
   when the panel is mounted at the client-card level (per-rec view below
   already renders the full _signalCard with Iris). */
.wt-bucket-row-signal {
  grid-template-columns: minmax(180px, 1fr) 2fr;
}
.wt-bucket-row-signal.quieted {
  opacity: 0.75;
}
.wt-bucket-delta-up   { color: rgba(252, 165, 165, 0.95); }
.wt-bucket-delta-down { color: rgba(140, 200, 160, 0.95); }

/* Quieted signal-card variant: dimmer + subtle warning rail. The card
   layout is identical to a firing card so the AM still gets the full
   metric snapshot, hypotheses, chain routing, and Iris explainer. */
.wt-opt-input-quieted {
  opacity: 0.78;
  background: rgba(220, 180, 90, 0.03);
}
.wt-opt-input-quieted:hover { opacity: 1; }
.wt-opt-quieted-reason {
  color: rgba(230, 200, 130, 0.95);
  margin-top: -2px;
}
.wt-tag-quieted {
  background: rgba(220, 180, 90, 0.18);
  color: rgba(230, 200, 130, 1);
}

/* ================================================================
   Global KPI ticker (kpi_ticker.js) — used inline on Overview
   AND pinned in the chrome on every other client-scoped route.
   ================================================================ */
.kpi-ticker-slot[hidden] { display: none; }
.kpi-ticker-slot {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(10, 10, 18, 0.4) 0%, rgba(10, 10, 18, 0) 100%);
}

/* Shared ticker layout (kt-* classes). Mirrors the original ov-tk-* but
   doesn't depend on the .ov-ticker outer card; the chrome variant goes
   straight onto the chrome bar without a glass background. */
.kt-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--view-max);
  margin: 0 auto;
  padding: 10px 28px;
}
.kt-tiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 22px;
  flex: 1;
  min-width: 0;
}
.kt-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 14px;
}
.kt-tile:first-child { border-left: 0; padding-left: 0; }
.kt-label {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.kt-value-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kt-value {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--ink);
  white-space: nowrap;
}
.kt-delta {
  font-size: 11px;
  font-family: var(--mono);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.kt-delta.pos     { color: var(--signal-cool); }
.kt-delta.neutral { color: var(--signal-warn); }
.kt-delta.neg     { color: var(--signal-high); }
.kt-arrow { font-size: 9px; }

.kt-spark {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 2px;
  overflow: visible;
}
.kt-spark-line { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke: var(--accent-soft); }
.kt-spark-fill { fill: rgba(255, 255, 255, 0.04); stroke: none; }
.kt-spark.pos     .kt-spark-line { stroke: var(--signal-cool); }
.kt-spark.pos     .kt-spark-fill { fill:   rgba(165, 180, 252, 0.10); }
.kt-spark.neg     .kt-spark-line { stroke: var(--signal-high); }
.kt-spark.neg     .kt-spark-fill { fill:   rgba(252, 165, 165, 0.10); }
.kt-spark.neutral .kt-spark-line { stroke: var(--signal-warn); }
.kt-spark.neutral .kt-spark-fill { fill:   rgba(252, 211, 77, 0.08); }

.kt-range { flex-shrink: 0; }

/* When the ticker is rendered inside Overview's body (not chrome), give
   it the existing glass-card frame so the in-body version still feels
   like a card. */
.view .kt-ticker {
  padding: 12px 18px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  max-width: none;
}

@media (max-width: 1280px) {
  .kt-ticker { flex-wrap: wrap; }
  .kt-tiles  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================
   KPI ticker v0.9 — expanded vs compact layouts, range row above
   tiles in the in-body version, dropdown pill in the chrome strip
   ================================================================ */

/* Expanded ticker (Overview): range row sits ABOVE the tile grid so
   the tile row itself can use the full width for 7 metrics. */
.kt-ticker.kt-expanded {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 18px;
}
.kt-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kt-title { color: var(--accent-soft); }
/* Date-range label appended after "Performance Snapshot · ".
   Slightly muted so the title still leads visually. */
.kt-window { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Comparison-basis toggle (PoP | LY | Goal) — between the title and the range
   control. Smaller + tighter than the range chips so it reads as a secondary
   control; inactive options are dimmed. */
.kt-basis { gap: 4px; flex-shrink: 0; }
.kt-basis-chip { font-size: 11px; padding: 2px 8px; opacity: 0.7; }
.kt-basis-chip.on { opacity: 1; }
.kt-ticker.kt-expanded .kt-tiles {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Compact ticker (chrome strip): denser tiles, no sparkline below
   value, single dropdown pill for range. */
.kt-ticker.kt-compact {
  padding: 8px 28px;
  gap: 16px;
}
.kt-ticker.kt-compact .kt-tiles {
  gap: 16px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.kt-ticker.kt-compact .kt-tile { padding: 0 0 0 12px; }
.kt-ticker.kt-compact .kt-tile:first-child { padding-left: 0; }
.kt-ticker.kt-compact .kt-label { font-size: 9px; }
.kt-ticker.kt-compact .kt-value { font-size: 15px; }
.kt-ticker.kt-compact .kt-delta { font-size: 10px; }
.kt-ticker.kt-compact .kt-spark { display: none; }
.kt-ticker.kt-compact .kt-goal  { display: none; }

/* Range dropdown pill — used in compact mode. Native <select> styled
   as a glass pill to match the rest of the chrome. */
.kt-range-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 4px 22px 4px 12px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.kt-range-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-faint);
}
.kt-range-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0 4px 0 0;
  cursor: pointer;
  outline: none;
  font-family: var(--mono);
}
.kt-range-select option { background: var(--bg-1, #111117); color: var(--ink); }
.kt-range-caret {
  position: absolute;
  right: 8px;
  font-size: 9px;
  color: var(--muted);
  pointer-events: none;
}

/* Custom-range picker — popover anchored to the Custom chip (expanded
   variant) or the dropdown pill (compact variant). Position: absolute
   so it overlays the page instead of displacing the KPI tiles below
   the range control. Click-outside / Escape closes it via document-
   level handlers wired in kpi_ticker.js. */
.kt-chip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.kt-chip-custom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kt-chip-caret {
  font-size: 9px;
  opacity: 0.7;
}
.kt-range-pill { position: relative; }
.kt-range-pill.has-custom { cursor: pointer; }

.kt-custom-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(20, 20, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45),
              0 1px 0 rgba(255, 255, 255, 0.04) inset;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: kt-popover-in 0.12s var(--ease, ease-out);
}
@keyframes kt-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kt-custom-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  padding: 4px 6px;
  outline: none;
  cursor: pointer;
  color-scheme: dark;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.kt-custom-input:hover,
.kt-custom-input:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent-faint);
}
.kt-custom-sep {
  color: var(--muted);
  font-size: 11px;
}

/* Per-metric goal hint shown in expanded mode under the value row. */
.kt-goal {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 1400px) {
  .kt-ticker.kt-expanded .kt-tiles,
  .kt-ticker.kt-compact .kt-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kt-ticker.kt-expanded .kt-tiles,
  .kt-ticker.kt-compact .kt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================
   Settings > Metrics — per-client KPI configuration page
   ================================================================ */
.sm-card { padding: 0; border-radius: 14px; overflow: hidden; }
.sm-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sm-title { font-size: 1.2rem; margin: 4px 0 0; }
.sm-help { font-size: 11px; color: var(--muted); }

.sm-table { display: flex; flex-direction: column; }
.sm-row {
  display: grid;
  grid-template-columns: 1.4fr 100px 1fr 160px;
  gap: 18px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.sm-row.sm-row-head {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 22px;
  border-top: 0;
}
.sm-metric-name { font-weight: 600; font-size: 14px; }
.sm-metric-id { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Switch — checkbox styled as pill toggle */
.sm-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
}
.sm-switch input { opacity: 0; width: 0; height: 0; }
.sm-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background .15s var(--ease);
}
.sm-switch-track::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  top: 2px; left: 2px;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.sm-switch input:checked + .sm-switch-track {
  background: rgba(165, 180, 252, 0.22);
  border-color: rgba(165, 180, 252, 0.40);
}
.sm-switch input:checked + .sm-switch-track::before {
  transform: translateX(16px);
  background: var(--signal-cool);
}

.sm-goal-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--ink);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--mono);
  width: 100%;
  max-width: 220px;
}
.sm-goal-input:focus {
  outline: none;
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.06);
}
.sm-goal-input::placeholder { color: var(--muted); }

/* Watchtower weight selector — per-metric priority tier. */
.sm-weight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 150px;
}
.sm-weight-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--ink);
  padding: 7px 10px;
  font-size: 12px;
  font-family: var(--mono);
  width: 100%;
  cursor: pointer;
}
.sm-weight-select:focus {
  outline: none;
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.06);
}
/* Tier-tinted left border so the priority reads at a glance. */
.sm-weight-select.tier-0 { border-left: 3px solid var(--muted); }
.sm-weight-select.tier-1 { border-left: 3px solid var(--hair); }
.sm-weight-select.tier-2 { border-left: 3px solid var(--signal-cool); }
.sm-weight-select.tier-3 { border-left: 3px solid var(--signal-warm, #f0a868); }
.sm-weight-hint { font-size: 10px; color: var(--muted); }

@media (max-width: 720px) {
  .sm-row { grid-template-columns: 1fr 80px; }
  .sm-row > .sm-goal-input,
  .sm-row > .sm-weight { grid-column: 1 / -1; max-width: none; }
}

/* Settings > Notifications — Slack channel override per client. */
.sn-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.sn-field { display: flex; flex-direction: column; gap: 6px; }
.sn-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sn-hint  { font-size: 11px; color: var(--muted); }
.sn-current { font-size: 12px; color: var(--ink); }
.sn-current-label { color: var(--muted); }
.sn-actions { display: flex; gap: 8px; }
.sn-test-btn {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sn-test-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--accent-faint, rgba(180,155,255,0.4)); }
.sn-test-btn:disabled { opacity: 0.5; cursor: wait; }
.sn-test-result { font-size: 12px; color: var(--muted); }
.sn-test-result.ok  { color: #9ac2a5; }
.sn-test-result.bad { color: #d48a8a; }

/* Period-over-period + goal pill (Overview expanded ticker only). */
.kt-pop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.kt-pop-prior {
  font-size: 10px;
  color: var(--muted);
}
/* Placeholder shown when the active basis has no comparison value yet
   (LY still hydrating, or no goal set) so the line never reads as broken. */
.kt-pop-hint {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
}
.kt-pop-goal {
  font-size: 10px;
  letter-spacing: .04em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  white-space: nowrap;
}
.kt-pop-goal.on-track {
  background: rgba(110, 231, 183, 0.14);
  color: var(--signal-live);
  border: 1px solid rgba(110, 231, 183, 0.32);
}
.kt-pop-goal.off-track {
  background: rgba(252, 165, 165, 0.14);
  color: var(--signal-high);
  border: 1px solid rgba(252, 165, 165, 0.32);
}

/* ================================================================
   Workflow page v0.10 — filters + view toggle + list + calendar
   ================================================================ */

/* Top control bar: filter group on the left, view switcher on the right. */
.wf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.wf-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 8px 4px 12px;
  font-size: 12px;
}
.wf-filter:hover { background: rgba(255, 255, 255, 0.06); }
.wf-filter-label {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.wf-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px 4px 0;
  outline: none;
}
.wf-filter-select option { background: var(--bg-1, #111117); color: var(--ink); }

/* Toolbar tail — view switcher + new-schedule button as separate
   flex siblings so the primary-button doesn't merge into the
   segmented pill toggle. */
.wf-tail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wf-new-schedule { flex-shrink: 0; }

/* View switcher — three pill buttons. */
.wf-views {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px;
}
.wf-view-btn {
  background: transparent;
  border: 0;
  color: var(--accent-soft);
  padding: 5px 14px;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.wf-view-btn:hover { color: var(--ink); }
.wf-view-btn.on {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink);
}

/* Empty-state card shared across views. */
.wf-empty {
  padding: 40px;
  text-align: center;
  border-radius: 14px;
}

/* ── List view ─── */
.wf-list { border-radius: 14px; overflow: hidden; }
/* Header + data rows share one grid template so cells stay aligned.
   Both forms also need width: 100% (buttons don't auto-stretch). */
.wf-list-row {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1.6fr) 150px 130px 90px 130px;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}
.wf-list-row.wf-list-row-clickable {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.wf-list-row.wf-list-row-clickable:hover { background: rgba(255, 255, 255, 0.03); }
.wf-list-row > span {
  padding: 11px 14px;
  display: flex;
  align-items: center;
  font-size: 12px;
  min-width: 0;
}
.wf-list-row > span:first-child { padding-left: 20px; }
.wf-list-row > span:last-child  { padding-right: 20px; }
.wf-list-head > span {
  border-top: 0;
  padding-top: 14px;
  padding-bottom: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.wf-list-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
}
.wf-list-origin { color: var(--accent-soft); }

@media (max-width: 1100px) {
  .wf-list-row { grid-template-columns: 110px 1fr 110px 110px 80px 110px; }
}
@media (max-width: 760px) {
  .wf-list-row { grid-template-columns: 100px 1fr 80px 80px; }
  .wf-list-row > span:nth-child(5),
  .wf-list-row > span:nth-child(6) { display: none; }
}

/* ── Calendar view ─── */
.wf-cal {
  border-radius: 14px;
  overflow: hidden;
  padding: 14px 18px 18px;
}
.wf-cal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.wf-cal-month {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  flex: 1;
  text-align: center;
}
.wf-cal-nav {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-cal-nav:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-faint);
}
.wf-cal-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 420px;
  color: var(--ink-dim, rgba(255, 255, 255, 0.5));
  font-size: 0.85rem;
}
.wf-cal-status-err {
  color: var(--ink, rgba(255, 255, 255, 0.85));
}
.wf-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
}
.wf-cal-dow > span { text-align: center; }
.wf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wf-cal-cell {
  min-height: 92px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-cal-cell.on {
  border-color: rgba(165, 180, 252, 0.45);
  background: rgba(165, 180, 252, 0.05);
}
.wf-cal-cell-empty {
  background: transparent;
  border-color: transparent;
}
.wf-cal-day {
  font-size: 11px;
  color: var(--accent-soft);
  font-weight: 600;
}
.wf-cal-cell.on .wf-cal-day { color: var(--signal-cool); }
.wf-cal-items { display: flex; flex-direction: column; gap: 3px; }
.wf-cal-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--ink);
  padding: 3px 6px;
  font-size: 10px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-cal-pill.state-running        { border-left: 2px solid var(--signal-cool); }
.wf-cal-pill.state-awaiting_input { border-left: 2px solid var(--signal-warn); }
.wf-cal-pill.state-completed      { border-left: 2px solid var(--signal-live); }
.wf-cal-pill.state-queued         { border-left: 2px solid var(--accent-soft); }
.wf-cal-more { font-size: 10px; color: var(--muted); }

/* Cells with items become clickable — drill into the board filtered
   to that day. Empty cells stay inert. */
.wf-cal-cell-active { cursor: pointer; transition: background .14s var(--ease), border-color .14s var(--ease); }
.wf-cal-cell-active:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--accent-faint);
}
.wf-cal-cell-active:focus-visible {
  outline: 2px solid var(--accent-faint);
  outline-offset: 2px;
}

/* Day-filter bar shown above the Workflow board when the operator
   came in from a calendar day click. Reads "Showing <date>" + a
   clear button. */
.wf-dayfilter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.wf-dayfilter-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink);
  background: rgba(165, 180, 252, 0.08);
  border: 1px solid rgba(165, 180, 252, 0.35);
  border-radius: 999px;
}

@media (max-width: 760px) {
  .wf-cal-cell { min-height: 64px; }
  .wf-cal-pill { font-size: 9px; }
}

/* ================================================================
   Schedule calendar pills
   ================================================================ */
.sc-cal { border-radius: 14px; overflow: hidden; padding: 14px 18px 18px; margin-top: 16px; }
.sc-pill {
  background: rgba(165, 180, 252, 0.08);
  border: 1px solid rgba(165, 180, 252, 0.18);
  border-radius: 6px;
  color: var(--ink);
  padding: 3px 7px;
  font-size: 10px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.sc-pill:hover {
  background: rgba(165, 180, 252, 0.15);
  border-color: rgba(165, 180, 252, 0.35);
}
.sc-pill.chain {
  background: rgba(129, 230, 217, 0.08);
  border-color: rgba(129, 230, 217, 0.18);
}
.sc-pill.chain:hover {
  background: rgba(129, 230, 217, 0.15);
  border-color: rgba(129, 230, 217, 0.35);
}
.sc-pill.off { opacity: 0.4; }
.sc-pill-time { color: var(--muted); flex-shrink: 0; font-size: 9px; }
.sc-pill-name { overflow: hidden; text-overflow: ellipsis; }
.sc-cal-cell-clickable { cursor: pointer; }
.sc-cal-cell-clickable:hover { background: rgba(255,255,255,0.04); }

@media (max-width: 760px) {
  .sc-pill { font-size: 9px; padding: 2px 5px; }
}

/* ================================================================
   Workflow v0.11 — column-specific drawer content + tags
   ================================================================ */

/* Completed kanban-card tag — replaces the generic state pill on
   completed cards so the affirmative outcome reads at a glance. */
.kb-state-tag.wf-completed-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .06em;
  font-weight: 600;
  background: rgba(110, 231, 183, 0.16);
  color: var(--signal-live);
  border: 1px solid rgba(110, 231, 183, 0.32);
}
.wf-completed-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(110, 231, 183, 0.3);
  color: var(--signal-live);
  font-size: 9px;
  font-weight: 700;
}

/* Drawer header tags (Running / Needs / Completed). */
.wf-completed-tag {
  background: rgba(110, 231, 183, 0.14) !important;
  color: var(--signal-live) !important;
  border-color: rgba(110, 231, 183, 0.34) !important;
}
.wf-running-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wf-running-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal-cool);
  box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.6);
  animation: wt-rn-pulse 1.4s ease-out infinite;
}
.wf-needs-tag { display: inline-flex; align-items: center; gap: 6px; }
.wf-needs-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(252, 211, 77, 0.25);
  color: var(--signal-warn);
  font-size: 10px;
  font-weight: 800;
}

/* Tighter meta strip for completed/running drawers. */
.kb-run-meta-tight {
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  padding-bottom: 6px;
}

/* Deliverable hero block — the dominant element on Review/Completed.
   Structurally bigger (more padding, larger filename) so the operator
   reads "what was produced" before reading "why" or "when". */
.wf-deliverable {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 22px 22px;
}
.wf-deliverable-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.wf-deliverable-body { flex: 1; min-width: 0; }
.wf-deliverable-name {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.wf-deliverable-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.08em;
}
.wf-deliverable .btn.primary { flex-shrink: 0; }

/* Green accent variant — used in the Review/Completed modal where
   the deliverable IS the operator's pickup. Same accent family as
   the highlighted Dispatch tile + the decision-tree root-cause
   marker, so all three "action" surfaces read the same colour. */
.wf-deliverable-success {
  background: rgba(110, 231, 183, 0.06) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.04);
}
.wf-deliverable-success .wf-deliverable-eyebrow {
  color: rgba(110, 231, 183, 0.85);
}
.wf-deliverable-success .wf-deliverable-name {
  color: var(--ink);
}

/* Stage modal sections (Review / Completed / Running) — content
   blocks separated by VERTICAL SPACING, not bordered tiles. The
   only sections that keep a visible container are the colored
   accent tiles (deliverable-success green, m21-recommend cyan,
   m21-risk amber, dispatch green) — they earn the chrome because
   they signal something specific (action, warning, next step).
   Everything else is just label + content + breathing room. */
.wt-stage-running > section,
.wt-stage-review > section,
.wt-stage-completed > section,
.wt-stage-failed > section {
  margin-bottom: 28px;
}
.wt-stage-running > section:last-child,
.wt-stage-review > section:last-child,
.wt-stage-completed > section:last-child,
.wt-stage-failed > section:last-child {
  margin-bottom: 0;
}

/* "How we got here" — borderless section. Renders as a vertical
   flow of pills (icon + short title) joined by thin connector
   segments. The longer description and timestamp live in a hover
   tooltip so the chain reads at a glance. */
.wt-howwegot-here {
  background: transparent;
  border: none;
  padding: 0;
}
.wt-hwgh-flow {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.wt-hwgh-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
/* Connector between pills — a thin vertical hairline that sits
   under each step except the last. Matches the screenshot's
   subtle white-ish flow lines. */
.wt-hwgh-step + .wt-hwgh-step::before {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  margin-left: 18px;
  background: rgba(255, 255, 255, 0.18);
}
.wt-hwgh-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: default;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.wt-hwgh-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
.wt-hwgh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(203, 226, 255, 0.92);
  flex-shrink: 0;
}
.wt-hwgh-icon-lever  { color: rgba(255, 198, 138, 0.95); }
.wt-hwgh-icon-agent  { color: rgba(160, 220, 180, 0.95); }
.wt-hwgh-icon-output { color: rgba(190, 210, 255, 0.95); }
.wt-hwgh-pill-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
/* Hover tooltip — sits just below the pill, fades in. Native
   `title` is kept on the pill for accessibility / slow hover. */
.wt-hwgh-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 200px;
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: rgba(20, 22, 28, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: normal;
}
.wt-hwgh-pill:hover .wt-hwgh-tip,
.wt-hwgh-pill:focus-visible .wt-hwgh-tip {
  opacity: 1;
  transform: translateY(0);
}
.wt-hwgh-tip-line + .wt-hwgh-tip-line {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

/* "What to do now" — borderless. Operator next-step guidance reads
   as one of the modal's sections, separated by spacing not a box. */
.wt-what-to-do-now {
  background: transparent;
  border: none;
  padding: 0;
}
.wt-what-to-do-now-body {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  white-space: pre-wrap;
}

/* Running stage spin-up — centered bird-loader + headline + sub.
   Shown while the SSE stream is still empty; replaced by the live
   stream once events arrive. Reuses the .bird-loader-svg feather
   animation already loaded for boot + Flight icon, but does NOT
   inherit the boot-loader `.bird-loader` container (which has 80px
   padding and would dominate the modal). */
.wt-running-spinup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 16px 20px;
  text-align: center;
}
/* The SVG is drawn at 120×100. Constrain the box to the SVG dimensions
   plus a little breathing room so the bird stays centered and never
   gets cut off by an over-aggressive ancestor max-height. */
.wt-running-spinup-anim {
  line-height: 0;
  width: 120px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.wt-running-spinup-anim svg { display: block; overflow: visible; }
.wt-running-spinup-headline {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.wt-running-spinup-sub {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* System context — what the operator just approved. Borderless
   label + rows so it lives in the modal's spacing-only layout. Each
   row is a small mono label on the left and the rec content on the
   right. */
.wt-running-context {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wt-running-context-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: baseline;
}
.wt-running-context-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wt-running-context-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  white-space: pre-wrap;
}
@media (max-width: 720px) {
  .wt-running-context-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Server-polished outcome (run.aiSummary) — reads as the lead beneath
   the "Summary" label in the Review/Completed modal. Slightly larger
   + tighter line-height than the raw markdown render that may follow. */
.wt-output-ai-summary {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
}

/* Strip the .rv-md tile chrome inside the stage modals — the
   markdown renderer's default border + dark background was making
   the Summary section read as a nested card. In Flight detail and
   other surfaces the .rv-md tile look still applies; only the
   stage-aware modal (Review / Completed / Running) goes borderless
   so the visual hierarchy stays consistent with the rest of the
   modal sections. */
.wt-stage-review .rv-md,
.wt-stage-completed .rv-md,
.wt-stage-running .rv-md {
  background: transparent;
  border: none;
  padding: 0;
  max-height: none;
  overflow: visible;
}
/* Tiny mono label that introduces the raw response below the polished
   lead — operator can tell at a glance which is the AI overview and
   which is the verbatim agent output. */
.wt-output-raw-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 4px 0;
}

/* Hand-off details — collapsed disclosure shown under the summary
   so the operator can inspect the raw response / config without
   it dominating. Borderless by default — just the chevron + label
   provide affordance; the bordered pre below reveals on expand. */
.wt-output-rawdetails {
  margin-top: 14px;
  border: none;
  background: transparent;
  padding: 0;
}
.wt-output-rawdetails-summary {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.wt-output-rawdetails[open] .wt-output-rawdetails-summary { color: var(--ink); }
.wt-output-rawdetails-pre {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* Output blocks: highlighted summary, KPI tiles, findings, recs, table. */
.wf-output-summary {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--signal-cool);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0;
}
.wf-output-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.wf-output-kpi {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.wf-output-kpi-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.wf-output-kpi-value {
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}
.wf-output-kpi.tone-bad  { border-color: rgba(252, 165, 165, 0.30); }
.wf-output-kpi.tone-bad  .wf-output-kpi-value { color: var(--signal-high); }
.wf-output-kpi.tone-warn { border-color: rgba(252, 211, 77, 0.30); }
.wf-output-kpi.tone-warn .wf-output-kpi-value { color: var(--signal-warn); }
.wf-output-kpi.tone-good { border-color: rgba(110, 231, 183, 0.30); }
.wf-output-kpi.tone-good .wf-output-kpi-value { color: var(--signal-live); }

.wf-output-findings { display: flex; flex-direction: column; gap: 8px; }
.wf-output-finding {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}
.wf-output-finding.sev-high { border-left: 3px solid var(--signal-high); }
.wf-output-finding.sev-med  { border-left: 3px solid var(--signal-warn); }
.wf-output-finding.sev-low  { border-left: 3px solid var(--signal-live); }
.wf-output-finding-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-output-finding-title { font-weight: 600; font-size: 13px; }
.wf-output-finding-detail {
  font-size: 12px;
  color: var(--accent-soft);
  line-height: 1.5;
  margin: 6px 0 0;
}

.wf-output-recs {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.wf-output-recs li { line-height: 1.5; }

.wf-output-md {
  font-size: 13px;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 14px;
}

.wf-table-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.wf-table-preview { padding: 0; }

/* Running drawer — empty / waiting state. */
.wf-running-empty {
  padding: 18px;
  color: var(--muted);
  background: rgba(165, 180, 252, 0.05);
  border: 1px dashed rgba(165, 180, 252, 0.20);
  border-radius: 8px;
  text-align: center;
}

/* Needs Input drawer — explicit prompt block. */
.wf-needs-prompt {
  background: rgba(252, 211, 77, 0.07);
  border: 1px solid rgba(252, 211, 77, 0.20);
  border-radius: 10px;
  padding: 12px 14px;
}
.wf-needs-body {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

/* ─── Overview: Open Gaps widget ────────────────────────────────────────
   Section between Row 1 and the Workflow Queue. Surfaces falcon_open_gaps
   rows so the operator sees patterns the diagnostic trees couldn't cover. */
.ov-gaps {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}
.ov-gaps-list {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.ov-gap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.ov-gap-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--signal-warn, #d4a83e);
  opacity: .55;
}
.ov-gap-row.gap-reviewed::before     { background: var(--signal-cool); opacity: .35; }
.ov-gap-row.gap-added_to_tree::before { background: var(--ok, #4ec3a4); opacity: .55; }
.ov-gap-row.gap-rejected::before     { opacity: .15; }
.ov-gap-body { min-width: 0; }
.ov-gap-pattern { font-weight: 600; font-size: 13px; }
.ov-gap-meta { font-size: 11px; opacity: .65; margin-top: 3px; }
.ov-gap-synthesis { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 6px; line-height: 1.45; }
.ov-gap-tail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  opacity: .7;
}
.ov-gap-occ {
  background: rgba(255, 255, 255, .08);
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
}

/* ─── Watchtower: Track Record panel ───────────────────────────────────
   Bottom-of-page panel showing per-leaf attribution history sourced from
   falcon_track_record. */
.wt-track-record {
  border-radius: 14px;
  overflow: hidden;
}
.wt-track-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
}
.wt-track-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.wt-track-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  opacity: .6;
}
.wt-track-row.verdict-improved::before     { background: var(--ok, #4ec3a4); opacity: 1; }
.wt-track-row.verdict-neutral::before      { background: var(--muted); }
.wt-track-row.verdict-regressed::before    { background: var(--signal-warn, #d97a55); opacity: 1; }
.wt-track-row.verdict-inconclusive::before { background: var(--signal-cool); opacity: .5; }
.wt-track-row.verdict-pending::before      { opacity: .15; }
.wt-track-body { min-width: 0; }
.wt-track-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wt-track-leaf { font-weight: 600; font-size: 13px; }
.wt-track-spec { font-size: 12px; margin-top: 4px; opacity: .85; }
.wt-track-metric { font-size: 11px; margin-top: 6px; opacity: .7; }
.wt-track-tail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  opacity: .8;
}
.wt-track-verdict {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  font-weight: 600;
}
.wt-track-verdict.verdict-improved     { background: rgba(78, 195, 164, .18); color: #b6e8d8; }
.wt-track-verdict.verdict-regressed    { background: rgba(217, 122, 85, .18); color: #f0c2ad; }
.wt-track-verdict.verdict-inconclusive { background: rgba(160, 180, 220, .14); }
.wt-track-iters { opacity: .55; }
.wt-track-shipped { opacity: .55; }

/* Boot loader — sits in #view between auth-complete and first hydrate
   resolve so the operator never sees mock-seeded content flash through.
   Pairs the .bird-loader SVG so boot reads identically to the
   scoped-client portfolio loader (one consistent loading motif). */
.boot-loader {
  min-height: 60vh;
  padding: 48px 24px;
  opacity: 1;
  transition: opacity .2s var(--ease);
}
.boot-loader.fade-out { opacity: 0; }

/* Layout toggle (Grid / List) — top-right of the Watchtower view-actions
   row when a client is scoped. */
.wt-layout-toggle {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}
.wt-layout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: 0;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.wt-layout-btn:hover { color: rgba(255, 255, 255, .85); }
.wt-layout-btn + .wt-layout-btn { border-left: 1px solid rgba(255, 255, 255, .10); }
.wt-layout-btn.on { background: rgba(255, 255, 255, .08); color: var(--ink); }

/* Per-client signal grid — used when signalLayout='grid'. Auto-fit
   responsive, capped at 5 columns on viewports ≥ 1600px. */
.wt-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 1600px) {
  .wt-recs-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Compact signal card — square aspect on desktop, natural height on
   mobile. Click opens the rec modal; no inline expand. */
.wt-rec-card {
  display: flex; flex-direction: column;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 16px 12px;
  gap: 10px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
  position: relative;
  /* No overflow: hidden — the severity rail pseudo-element renders
     fine at the rounded-corner edge without it, and overflow was
     clipping the foot timestamp when the title-wrap min-height
     (132px) + body lines pushed past the old square-aspect height. */
  /* No aspect-ratio: 1/1 — square cards forced height to match
     column width, which was narrower than the content needed in
     2-col layouts. Cards now grow to fit their content. */
  min-height: 240px;
}
@media (max-width: 720px) {
  .wt-rec-card { min-height: 0; }
}
.wt-rec-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
.wt-rec-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}
.wt-rec-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
}
.wt-rec-card.sev-high::before { background: var(--signal-high); opacity: .9; }
.wt-rec-card.sev-med::before  { background: var(--signal-warn); opacity: .8; }
.wt-rec-card.sev-low::before  { background: var(--signal-cool); opacity: .55; }
.wt-rec-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 0.7rem;
  color: var(--soft);
}
/* Severity dot — 8px coloured circle, replaces the HIGH/MED/LOW pill.
   Picks up the same sev-* colours as the card's left border accent. */
.wt-rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wt-rec-dot.sev-high { background: var(--signal-high); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12); }
.wt-rec-dot.sev-med  { background: var(--signal-warn); box-shadow: 0 0 0 3px rgba(245, 194, 103, 0.10); }
.wt-rec-dot.sev-low  { background: var(--signal-cool); box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.08); }
/* Agent / channel icon next to the cap label. Monoline silhouettes
   inherit the surrounding text colour for a calm, consistent read. */
.wt-rec-head-icon { width: 14px; height: 14px; color: var(--soft); }
/* Client name in the rec-card head — rendered on the Workflow Queued
   column when queue.js passes showClient. Mirrors .kb-card-client on the
   run cards so Queued and Running read the same. Shrinks + ellipsizes so
   a long name never shoves the time (margin-left:auto) off the row. */
.wt-rec-client {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-rec-cap {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.wt-rec-card-head .wt-rec-time {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
}
/* Title block: short heading + lighter subtext. The heading is the
   humanized signal label (e.g. "Platform ROAS Dropped"); the subtext
   is the long Watchtower-emitted headline. Reads as a hierarchy
   instead of one wall of bold prose. */
.wt-rec-card-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Fixed visual area for title + subtitle so every card in a row
     has identical body height. Combined with line-clamp below this
     locks every card in the grid into the same vertical footprint:
        title    → up to 2 lines (most aiTitles are 8–14 words)
        subtitle → exactly 4 lines (clamped, ellipsised) */
  min-height: 132px;
}
.wt-rec-card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: .005em;
  /* Allow the title to wrap to a 2nd line if it doesn't fit on one,
     but never more — the subtitle below picks up the rest. With the
     2-line ceiling the aiTitle never ends mid-word with an ellipsis
     dangle the way a single-line nowrap clip did. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.wt-rec-card-subtitle {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
  /* Hard clamp every subtitle to 4 lines so cards are all the same
     height regardless of how long the polished headline runs. JS
     still does a 28-word soft truncate; this is the visual ceiling
     when the soft cut still produces a longer paragraph. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.wt-rec-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.66rem;
  color: var(--muted);
}
/* Foot is empty most of the time now — only renders when there's
   urgent timing, a re-fire counter, or a divergent-playbook flag.
   When empty, hide the top border + padding so the card stays tight. */
.wt-rec-card-foot:empty {
  display: none;
}
/* Quiet pill style for foot signals (urgency, divergent, walk count). */
.wt-rec-foot-pill,
.wt-rec-card-foot .wt-rec-urgency {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
}
.wt-rec-foot-pill.divergent {
  color: rgba(245, 194, 103, 0.95);
  background: rgba(245, 194, 103, 0.10);
}
.wt-rec-card-foot .wt-rec-urgency {
  color: rgba(248, 113, 113, 0.92);
  background: rgba(248, 113, 113, 0.08);
}
.wt-rec-card-foot .wt-rec-walk-count {
  font-size: 0.66rem;
  padding: 1px 7px;
}
/* Push relative-time to the right so it always anchors the same spot
   regardless of which optional pills are present. */
.wt-rec-card-foot .wt-rec-time { margin-left: auto; flex-shrink: 0; }

/* "↗ in workflow" chip on Watchtower re-fire cards/rows. Marks a pending
   rec whose signal is already being handled by a queued / running /
   awaiting_input sibling. Cool/blue accent so it reads as informational
   (vs stale-tag's muted gray and the divergent urgency's red) and the
   operator can scan it as "I've got this one already." Clickable —
   jumps to /workflow on click. */
.wt-rec-sibling-chip {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.12);
  color: rgba(147, 197, 253, 0.95);
  font-family: var(--font-mono, ui-monospace, monospace);
  cursor: pointer;
  border: 1px solid rgba(96, 165, 250, 0.18);
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.wt-rec-sibling-chip:hover {
  background: rgba(96, 165, 250, 0.20);
  border-color: rgba(96, 165, 250, 0.35);
}
/* Push the chip to the right inside the card head so the time + chip
   share the trailing space cleanly, similar to wt-rec-time. */
.wt-rec-card-head .wt-rec-sibling-chip { margin-left: auto; }
.wt-rec-card-head .wt-rec-sibling-chip + .wt-rec-time { margin-left: 8px; }
/* In the list-row layout, the chip sits between the title and the
   queued-status pill — same flex-shrink:0 treatment the sibling tags
   already use so it never gets clipped. */
.wt-rec-row > .wt-rec-sibling-chip { flex: 0 0 auto; }
/* The chip in the rec card head doubles as the nav-to-Workflow
   affordance when the modal collapses to dismiss-only — the action
   footer no longer carries an "Open queued" button, since the chip
   is the single source of that action. */

/* Rec modal — centered overlay (overrides the base .kb-modal-overlay
   which is a right-side drawer). Glass look: light, lightly-blurred
   backdrop + translucent panel with strong backdrop-filter so the page
   underneath softly bleeds through the modal surface itself. The old
   look (rgba 0.78 + opaque panel) was rendering as a near-black slab
   floating over a near-black page. */
.wt-rec-modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  /* Start transparent; dim/blur fade in on .on (see .kb-modal-overlay — we
     transition the dim/blur, never opacity, so the glass panel doesn't flash
     over the page). Inherits the base overlay's background/backdrop-filter
     transition. */
  background: rgba(8, 10, 14, 0) !important;
  backdrop-filter: blur(0px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(0px) saturate(120%) !important;
}
.wt-rec-modal-overlay.on {
  background: rgba(8, 10, 14, .42) !important;
  backdrop-filter: blur(6px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
}
.wt-rec-modal-panel {
  /* Override the right-drawer translateX from .kb-modal-panel — we want
     a centered fade-in, not a slide-from-right. */
  transform: translateY(8px) !important;
  max-width: min(960px, 92vw) !important;
  width: min(960px, 92vw);
  height: auto !important;
  max-height: 86vh;
  border-radius: 16px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  /* Translucent surface + heavy backdrop blur = glass. The panel sits
     on top of the (already lightly blurred) overlay so it's effectively
     two layers of frost — page content stays legible behind, but the
     modal contents have a calm dark base to read against. */
  background: rgba(17, 19, 26, .72) !important;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .55),
    0 4px 12px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}
.kb-modal-overlay.on .wt-rec-modal-panel { transform: translateY(0) !important; }
.wt-rec-modal-panel > .kb-modal-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.wt-rec-modal-head-body { min-width: 0; flex: 1; }
.wt-rec-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 1 !important;
}
.wt-rec-modal-kicker::before { display: none; }
.wt-rec-modal-title {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.wt-rec-modal-body {
  overflow-y: auto;
  padding: 16px 20px 20px;
  min-height: 0;
}

/* Reject-feedback modal (Workflow Review column). Three stacked fields
   the operator can fill out so the rerun has real context. */
.rj-intro {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.55;
}
.rj-field {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rj-field-label { font-size: 10px; }
.rj-textarea {
  width: 100%;
  resize: vertical;
  min-height: 56px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
}
.rj-textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .05);
}

/* Streaming-state pill on Workflow Running cards — live dot + label. */
.wf-streaming-tag { display: inline-flex; align-items: center; gap: 6px; }
.wf-streaming-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal-live, #6ee7b7);
  box-shadow: 0 0 6px var(--signal-live, #6ee7b7);
  animation: pulse 1.8s ease-in-out infinite;
}

/* Stage-aware workflow modal header right-side cluster: status pill +
   close button. Lives in the kb-modal-head row next to the title. */
.wt-rec-modal-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Workflow stage action footer — flexes the Approve/Reject buttons to
   the right. Same kb-modal-actions look but separated from the
   review block. */
.wt-stage-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* M21 lever chips — categorical tag for the active lever the rec
   recommends acting on. 12 known values per the backend spec. All
   chips use the same shape (8% alpha bg, 22% alpha border, tinted
   text) — muted, no neon. Unknown levers fall through to neutral. */
.wt-lever-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
.wt-lever-chip.faded {
  opacity: .55;
  font-weight: 500;
}
.wt-lever-chip.lever-audience      { background: rgba(110, 156, 232, .10); border-color: rgba(110, 156, 232, .26); color: #c4d8f5; }
.wt-lever-chip.lever-creative      { background: rgba(232, 134,  62, .10); border-color: rgba(232, 134,  62, .26); color: #f0c2a0; }
.wt-lever-chip.lever-offer         { background: rgba(220,  92, 140, .10); border-color: rgba(220,  92, 140, .26); color: #f0b4cf; }
.wt-lever-chip.lever-landingpage   { background: rgba( 78, 195, 200, .10); border-color: rgba( 78, 195, 200, .26); color: #a8e0e6; }
.wt-lever-chip.lever-bidstrategy   { background: rgba(154, 122, 220, .10); border-color: rgba(154, 122, 220, .26); color: #cdb8ec; }
.wt-lever-chip.lever-budget        { background: rgba( 78, 195, 124, .10); border-color: rgba( 78, 195, 124, .26); color: #a8e6c0; }
.wt-lever-chip.lever-structure     { background: rgba(140, 156, 176, .10); border-color: rgba(140, 156, 176, .26); color: #c4d0dc; }
.wt-lever-chip.lever-feed          { background: rgba( 92, 188, 188, .10); border-color: rgba( 92, 188, 188, .26); color: #b6dee0; }
.wt-lever-chip.lever-tracking      { background: rgba(214, 178,  84, .10); border-color: rgba(214, 178,  84, .26); color: #efddb0; }
.wt-lever-chip.lever-pricing       { background: rgba(220, 120, 132, .10); border-color: rgba(220, 120, 132, .26); color: #f0c2c8; }
.wt-lever-chip.lever-merchandising { background: rgba(184, 124, 220, .10); border-color: rgba(184, 124, 220, .26); color: #ddc0ec; }
.wt-lever-chip.lever-incrementality{ background: rgba(214, 188,  92, .10); border-color: rgba(214, 188,  92, .26); color: #efe1b0; }

/* Urgency pill on the rec card head — backend-provided "Act within Xh"
   short hint. Tooltip shows the full sentence. */
.wt-rec-urgency {
  font-size: 10px;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(252, 211, 77, .12);
  border: 1px solid rgba(252, 211, 77, .26);
  color: #f7e4a8;
  margin-left: auto;
}

/* "Ruled out" chip row under "How we diagnosed" — visible signal of
   diagnostic rigor. Each chip uses the same lever color palette as
   the active lever, but faded to 55% so the eye snaps to the active
   lever first. */
.wt-rec-ruledout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.wt-rec-ruledout-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .55;
  margin-right: 4px;
}

/* "If we wait" callout — amber border + faint bg so the eye snags
   on it as the warning beat in the rec drawer. Restores the padding
   the base block dropped, plus the border-radius for the tile look. */
.wt-rec-m21-risk {
  border-left: 3px solid rgba(252, 211, 77, .55) !important;
  background: rgba(252, 211, 77, .04) !important;
  border-radius: 10px;
  padding: 14px 16px !important;
}
.wt-rec-m21-risk .wt-rec-section-head {
  color: #f7e4a8;
}

/* "What to do" / Recommendation tile — cool blue tone so it pairs
   with the amber warning at the same visual weight but different
   role (action vs. cost-of-waiting). */
.wt-rec-m21-recommend {
  border-left: 3px solid rgba(165, 180, 252, .50) !important;
  background: rgba(165, 180, 252, .04) !important;
  border-radius: 10px;
  padding: 14px 16px !important;
}
.wt-rec-m21-recommend .wt-rec-section-head {
  color: var(--signal-cool, #a5b4fc);
}

/* 50/50 paired row holding What To Do + If We Wait side-by-side. On
   narrower viewports it stacks (the existing modal scrolls vertically
   anyway). The single-cell case looks identical to the pre-row layout. */
.wt-rec-action-risk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.wt-rec-action-risk-row > .wt-rec-m21-block {
  margin: 0;
  height: 100%;
}
/* Honour explicit line breaks in polished recommendation/risk fields
   so Haiku's bullet structure renders as bullets, not run-on prose. */
.wt-rec-action-risk-row .wt-rec-m16-body { white-space: pre-wrap; }
@media (max-width: 720px) {
  .wt-rec-action-risk-row { grid-template-columns: 1fr; }
}

/* M21 — lead description block (unlabeled prose at the top of the
   rec drawer). Slightly larger, no boxed container — reads as the
   card's overview before any sectioned analysis. */
.wt-rec-m21-description {
  padding: 4px 2px 0;
  margin-bottom: 4px;
}
.wt-rec-m21-description-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* M21 — diagnosis decision-tree diagram. Sits inside the "How We
   Diagnosed" collapse. Renders each lever the diagnostic touched as
   a branch:
     • ruled-out levers (muted, × icon) with the reason they were
       exonerated
     • the active lever (accented, ◆ icon, "ROOT CAUSE" tag) as the
       terminal answer
   Connector lines drawn with pseudo-elements so we don't ship an
   SVG library — the column line truncates on the last branch via
   .is-last. */
.wt-diagnosis-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.wt-diagnosis-tree-root {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 4px;
}
.wt-diagnosis-tree-branches {
  display: flex;
  flex-direction: column;
}
.wt-diagnosis-tree-branch {
  display: grid;
  grid-template-columns: 28px 22px 1fr;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 0 8px 0;
  min-height: 36px;
}
/* Vertical line + elbow drawn in the connector cell. Continues down
   on every branch; .is-last clips it to a half-height so the line
   ends cleanly at the final branch. */
.wt-diagnosis-tree-connector {
  position: relative;
  align-self: stretch;
  width: 28px;
}
.wt-diagnosis-tree-connector::before {
  /* Vertical trunk. */
  content: '';
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.wt-diagnosis-tree-connector::after {
  /* Horizontal elbow into the icon cell. */
  content: '';
  position: absolute;
  left: 13px;
  top: 18px;
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
/* On the last branch, the trunk stops at the elbow point so the tree
   doesn't have a tail dangling below the final entry. */
.wt-diagnosis-tree-branch.is-last .wt-diagnosis-tree-connector::before {
  bottom: auto;
  height: 18px;
}
.wt-diagnosis-tree-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 8px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.wt-diagnosis-tree-branch.status-ruled-out .wt-diagnosis-tree-icon {
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.wt-diagnosis-tree-branch.status-root-cause .wt-diagnosis-tree-icon {
  color: rgba(110, 231, 183, 0.95);
  background: rgba(110, 231, 183, 0.10);
  border: 1px solid rgba(110, 231, 183, 0.45);
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.06);
}
.wt-diagnosis-tree-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0 4px;
  min-width: 0;
}
.wt-diagnosis-tree-lever-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wt-diagnosis-tree-lever {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.wt-diagnosis-tree-branch.status-ruled-out .wt-diagnosis-tree-lever {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
.wt-diagnosis-tree-branch.status-root-cause .wt-diagnosis-tree-lever {
  color: var(--ink);
}
.wt-diagnosis-tree-tag {
  font-size: 9px;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(110, 231, 183, 0.14);
  color: rgba(110, 231, 183, 0.95);
  border: 1px solid rgba(110, 231, 183, 0.35);
}
/* Ruled-out verdict pill — same shape as ROOT CAUSE so the verdict
   column reads as a column, but muted because the call is "nope". */
.wt-diagnosis-tree-tag.verdict-ruled-out {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.50);
  border-color: rgba(255, 255, 255, 0.14);
}
/* Data-source logo row — small brand marks of the platforms the agent
   actually read. Per the 5/21 CEO review: show the work, don't hide
   the provenance behind prose. */
.wt-diagnosis-tree-sources {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wt-diagnosis-tree-sources-label {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.38);
}
.wt-diagnosis-tree-sources-logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wt-diagnosis-tree-source-logo {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px;
  opacity: 0.85;
  transition: opacity 0.12s ease;
}
.wt-diagnosis-tree-source-logo:hover {
  opacity: 1;
}
.wt-diagnosis-tree-source-logo .fx-icon-img,
.wt-diagnosis-tree-source-logo img,
.wt-diagnosis-tree-source-logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wt-diagnosis-tree-branch.status-ruled-out .wt-diagnosis-tree-source-logo {
  opacity: 0.55;
}
.wt-diagnosis-tree-branch.status-root-cause .wt-diagnosis-tree-source-logo {
  border-color: rgba(110, 231, 183, 0.28);
  background: rgba(110, 231, 183, 0.06);
}
/* Text-chip source — used when iconEl has no logo registered for the
   source slug (e.g. proprietary tools like Creative Affinity). Same
   visual weight as the logo squares so the DATA row reads as one
   coherent attribution strip. */
.wt-diagnosis-tree-source-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.wt-diagnosis-tree-branch.status-ruled-out .wt-diagnosis-tree-source-chip {
  color: rgba(255, 255, 255, 0.50);
}
.wt-diagnosis-tree-branch.status-root-cause .wt-diagnosis-tree-source-chip {
  color: rgba(110, 231, 183, 0.90);
  background: rgba(110, 231, 183, 0.08);
  border-color: rgba(110, 231, 183, 0.30);
}
/* Per-lever extract row — labelled chip strip of the sub-categories the
   agent inspected (PDPs/Category for Landing Page, anomaly types for
   Tracking, etc.). Lives between DATA and the prose reason. */
.wt-diagnosis-tree-extract {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wt-diagnosis-tree-extract-label {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.38);
  flex: 0 0 auto;
}
.wt-diagnosis-tree-extract-items {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wt-diagnosis-tree-extract-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.wt-diagnosis-tree-branch.status-ruled-out .wt-diagnosis-tree-extract-chip {
  color: rgba(255, 255, 255, 0.55);
}
.wt-diagnosis-tree-branch.status-root-cause .wt-diagnosis-tree-extract-chip {
  background: rgba(110, 231, 183, 0.06);
  border-color: rgba(110, 231, 183, 0.22);
  color: rgba(110, 231, 183, 0.92);
}
.wt-diagnosis-tree-reason {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.wt-diagnosis-tree-branch.status-root-cause .wt-diagnosis-tree-reason {
  color: rgba(255, 255, 255, 0.78);
}

/* Decision-tree pill flow — converging two-column tree. Ruled-out
   pills stack in the left column; the root-cause pill sits in the
   right column, vertically centered. An absolutely-positioned SVG
   layer behind both columns draws curved Bezier connectors from
   each ruled-out pill's right edge to the root pill's left edge,
   so the operator sees "we investigated N things and they all
   converged on this answer" at a glance. Matches the workflow /
   context-tree screenshots from product. */
.wt-dtp-tree {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  padding: 12px 4px 6px;
  margin-top: 4px;
  min-height: 120px;
}
.wt-dtp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.wt-dtp-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
}
.wt-dtp-col-ruled {
  gap: 10px;
  align-items: flex-start;
}
.wt-dtp-col-root {
  justify-content: center;
  align-items: flex-start;
}
.wt-dtp-single {
  display: flex;
  padding: 4px 0;
}
/* The pill — same family across both columns. Lever icon, label,
   verdict tag. No native title attribute; the CSS popover is the
   sole hover surface, so the OS tooltip never doubles up. */
.wt-dtp-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: default;
  outline: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.wt-dtp-pill:hover,
.wt-dtp-pill:focus-visible {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.22);
}
.wt-dtp-pill:focus-visible {
  box-shadow: 0 0 0 2px rgba(120, 180, 255, 0.35);
}
.wt-dtp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wt-dtp-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.wt-dtp-label {
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.wt-dtp-verdict {
  font-size: 9px;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  border-radius: 4px;
}
/* Ruled-out — muted with strikethrough label and a faint icon ring. */
.wt-dtp-pill.status-ruled-out .wt-dtp-icon {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.wt-dtp-pill.status-ruled-out .wt-dtp-label {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
.wt-dtp-verdict.verdict-ruled-out {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* Root-cause — green accent, brighter icon, raised verdict tag.
   Slightly chunkier so the eye lands on it at the end of every
   curve. */
.wt-dtp-pill.status-root-cause {
  padding: 8px 14px 8px 10px;
  background: rgba(110, 231, 183, 0.08);
  border-color: rgba(110, 231, 183, 0.40);
  box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.05);
}
.wt-dtp-pill.status-root-cause:hover,
.wt-dtp-pill.status-root-cause:focus-visible {
  background: rgba(110, 231, 183, 0.14);
  border-color: rgba(110, 231, 183, 0.55);
}
.wt-dtp-pill.status-root-cause .wt-dtp-icon {
  color: rgba(110, 231, 183, 0.95);
  background: rgba(110, 231, 183, 0.10);
  border: 1px solid rgba(110, 231, 183, 0.45);
}
.wt-dtp-verdict.verdict-root-cause {
  background: rgba(110, 231, 183, 0.16);
  color: rgba(110, 231, 183, 0.95);
  border: 1px solid rgba(110, 231, 183, 0.40);
}
/* Active pill indicator — the pill the operator is currently
   hovering / focused on (or the root cause by default). Subtle
   ring so the link between pill and the detail panel below the
   tree is obvious. */
.wt-dtp-pill[data-active] {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.32);
}
.wt-dtp-pill.status-root-cause[data-active] {
  background: rgba(110, 231, 183, 0.18);
  border-color: rgba(110, 231, 183, 0.60);
}
/* Floating hover tooltip — a single element mounted on <body> and
   shared by every decision tree on the page. position:fixed +
   body mount means no ancestor's `overflow:hidden` (e.g. the
   collapsed disclosure) can clip it; JS clamps it into the
   viewport and gives it an internal scroll only in the extreme
   case where the content is taller than the screen. Same visual
   language as the old inline detail panel — header pill + DATA /
   extract rows + reason prose. */
.wt-dtp-hover-tip {
  position: fixed;
  z-index: 1200;
  width: max-content;
  min-width: 260px;
  max-width: 380px;
  /* No overflow/scroll here — an overflow value would clip the
     caret pseudo-element that sticks out the side. Reasons are
     short; JS clamps the whole box into the viewport. */
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(20, 22, 28, 0.97);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.46);
  display: flex;
  flex-direction: column;
  gap: 9px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: normal;
}
.wt-dtp-hover-tip.side-right { transform: translateX(-4px); }
.wt-dtp-hover-tip.side-left  { transform: translateX(4px);  }
.wt-dtp-hover-tip.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
/* Caret pointing at the source pill — tracks the pill's vertical
   center via --caret-y so it keeps pointing at the right spot even
   when the tooltip body has been clamped (e.g. for the bottom-most
   pill near the edge of the tree container). */
.wt-dtp-hover-tip::before {
  content: "";
  position: absolute;
  top: var(--caret-y, 50%);
  width: 8px;
  height: 8px;
  background: inherit;
  border: 1px solid rgba(255, 255, 255, 0.10);
  transform: translateY(-50%) rotate(45deg);
}
.wt-dtp-hover-tip.side-right::before {
  left: -5px;
  border-right: none;
  border-top: none;
}
.wt-dtp-hover-tip.side-left::before {
  right: -5px;
  border-left: none;
  border-bottom: none;
}
/* Active pill indicator — subtle ring so it's clear which pill
   owns the visible tooltip. */
.wt-dtp-pill[data-active] {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.32);
}
.wt-dtp-pill.status-root-cause[data-active] {
  background: rgba(110, 231, 183, 0.18);
  border-color: rgba(110, 231, 183, 0.60);
}
/* Tooltip header — × / ◆ status dot + lever name + verdict tag. */
.wt-dtp-tip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wt-dtp-tip-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.wt-dtp-tip-dot.status-ruled-out {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.wt-dtp-tip-dot.status-root-cause {
  color: rgba(110, 231, 183, 0.95);
  background: rgba(110, 231, 183, 0.12);
  border: 1px solid rgba(110, 231, 183, 0.50);
}
.wt-dtp-tip-lever {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.wt-dtp-tip-verdict {
  font-size: 9px;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  border-radius: 4px;
}
.wt-dtp-tip-verdict.verdict-ruled-out {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.wt-dtp-tip-verdict.verdict-root-cause {
  background: rgba(110, 231, 183, 0.16);
  color: rgba(110, 231, 183, 0.95);
  border: 1px solid rgba(110, 231, 183, 0.40);
}
.wt-dtp-tip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wt-dtp-tip-label {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.42);
  flex: 0 0 auto;
}
.wt-dtp-tip-logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wt-dtp-tip-logos .wt-diagnosis-tree-source-logo {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px;
  box-sizing: border-box;
  opacity: 0.95;
}
.wt-dtp-tip-logos img,
.wt-dtp-tip-logos svg,
.wt-dtp-tip-logos .fx-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wt-dtp-tip-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wt-dtp-tip-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.wt-dtp-tip-reason {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}
/* Narrow cards — collapse the tree to a single column. The
   floating tooltip still positions correctly because it's
   placed via JS using live measurements. */
@media (max-width: 560px) {
  .wt-dtp-tree {
    flex-direction: column;
    gap: 14px;
    padding: 8px 2px 2px;
    min-height: 0;
  }
  .wt-dtp-svg { display: none; }
  .wt-dtp-col-root {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 12px;
  }
}

/* M21 — "How We Diagnosed" collapsed at the bottom of the drawer.
   <details> disclosure styled to match the in-drawer section family. */
.wt-rec-diagnosed-collapsed {
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}
.wt-rec-diagnosed-collapsed > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  transition: background .14s var(--ease);
}
.wt-rec-diagnosed-collapsed > summary::-webkit-details-marker { display: none; }
.wt-rec-diagnosed-collapsed:hover > summary,
.wt-rec-diagnosed-collapsed[open] > summary {
  background: rgba(255, 255, 255, 0.035);
}
.wt-rec-diagnosed-collapsed > summary .wt-rec-section-head {
  margin: 0;
}
.wt-rec-diagnosed-chev {
  font-size: 16px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .18s var(--ease);
}
.wt-rec-diagnosed-collapsed[open] .wt-rec-diagnosed-chev {
  transform: rotate(270deg);
}
.wt-rec-diagnosed-body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Queue button in the rec drawer footer — between Deny and Approve. */
.wt-btn-queue {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--ink);
}
.wt-btn-queue:hover:not(:disabled) {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

/* Collapsible bucket header — used by the Firing Now panel. Collapsed by
   default so the dense raw-envelope feed stays out of the way; the M16
   human briefing above each rec is the primary read. */
.wt-bucket-head-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.wt-bucket-head-toggle:hover { background: rgba(255, 255, 255, .03); }
.wt-bucket-caret { opacity: .55; font-size: 12px; width: 12px; display: inline-block; }
.wt-bucket-collapsed .wt-bucket-body,
.wt-bucket-collapsed .wt-rca-body { display: none; }

/* Rec row title — single-line clamp so 200-char headlines stop running
   off the page. The full text rides on the title attribute for hover. */
.wt-rec-row > .wt-rec-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Per-signal "Investigate" button — lives in the signal card head row
   alongside the confidence / stale / quieted tags. Behaves like a pill but
   clickable, with hover + state variants. */
.wt-tag-investigate {
  background: rgba(120, 160, 240, .14);
  color: #cbe2ff;
  border: 1px solid rgba(160, 200, 255, .22);
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.wt-tag-investigate:hover:not(:disabled) {
  background: rgba(120, 160, 240, .24);
  border-color: rgba(160, 200, 255, .4);
}
.wt-tag-investigate-sending { opacity: .7; cursor: wait; }
.wt-tag-investigate-sent {
  background: rgba(78, 195, 164, .16);
  color: #b6e8d8;
  border-color: rgba(78, 195, 164, .3);
  cursor: default;
}
.wt-tag-investigate-error {
  background: rgba(217, 122, 85, .14);
  color: #f0c2ad;
  border-color: rgba(217, 122, 85, .3);
}
.wt-tag-investigate:disabled { cursor: default; }

/* MA Watchtower diagnosis breakdown — tree / leaf / channel / action rows
   in the expanded rec detail. Lives between "This signal" and the suggested
   brief, replacing the dense legacy rationale paragraph. */
.wt-rec-diagnosis {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  margin-top: 8px;
}
.wt-rec-diag-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.wt-rec-diag-key {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  opacity: .55;
}
.wt-rec-diag-val { color: var(--ink); }
.wt-rec-diag-leaf .wt-rec-diag-val   { font-weight: 600; }
.wt-rec-diag-action .wt-rec-diag-val { font-style: italic; opacity: .9; }
/* Clickable "Dispatch <specialist>" toggle — sits between the suggested
   brief and the agent team output. Click to expand and reveal the
   specialist's capability description. Neutral monochrome — no color
   accent, brand stays clean. */
.wt-rec-dispatch-wrap {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
}
/* Dispatch toggle is the DESIGNATED action on the card — what the
   operator is being invited to do. Promoted to an accent-tinted
   tile so the eye lands here after reading the What To Do / If We
   Wait pair. Uses the green accent shared with the live / success
   states so it reads as "go" rather than "warn". */
.wt-rec-dispatch-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(110, 231, 183, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.38);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.0);
  transition: background .14s ease, border-color .14s ease, border-radius .14s ease, box-shadow .18s ease, transform .14s ease;
}
.wt-rec-dispatch-toggle:hover {
  background: rgba(110, 231, 183, 0.14);
  border-color: rgba(110, 231, 183, 0.65);
  box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.08);
  transform: translateY(-1px);
}
.wt-rec-dispatch-arrow,
.wt-rec-dispatch-caret {
  color: rgba(110, 231, 183, 0.95);
}
.wt-rec-dispatch-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(110, 231, 183, 0.18);
  color: rgba(110, 231, 183, 1);
  flex-shrink: 0;
}
.wt-rec-dispatch-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
/* When open, the toggle's bottom rounding flattens so it visually
   connects to the description card below — feels like one accordion
   panel instead of two stacked boxes. */
.wt-rec-dispatch-wrap.open .wt-rec-dispatch-toggle {
  background: rgba(110, 231, 183, 0.14);
  border-color: rgba(110, 231, 183, 0.65);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
/* The font-size + transition for arrow/caret still need to live here;
   colour is overridden above for the accent-tinted dispatch tile. */
.wt-rec-dispatch-arrow { font-size: 14px; }
.wt-rec-dispatch-caret { font-size: 11px; transition: transform .18s ease; }
/* Accordion panel — always in the DOM so we can animate it open/close.
   Collapsed: max-height 0 + 0 opacity + no border. Open: enough max-height
   to fit the description (a hard pixel cap is fine — descriptions are
   one-liners) + visible. */
.wt-rec-dispatch-desc {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 0 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height .22s ease,
    opacity   .18s ease,
    padding   .22s ease,
    border-color .14s ease;
}
.wt-rec-dispatch-wrap.open .wt-rec-dispatch-desc {
  max-height: 200px;
  opacity: 1;
  padding: 12px 14px;
}
.wt-rec-dispatch-desc-who {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .55;
  margin-bottom: 6px;
}
.wt-rec-dispatch-desc-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

/* One-line plain-English read of each signal — sits between the title row
   and the metric snapshot. The point is to translate "sig_pacing_overspend"
   into something a human can act on without remembering the slug. */
.wt-opt-input-desc {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
  color: rgba(255, 255, 255, .82);
}

/* Inline signal visualization — gradient line for prior→current pairs,
   share bars for ratio components. Sits between the metric snapshot line
   and the extras inside the signal envelope card. Severity palette is
   class-toggled on the wrapper so SVG <stop>s can reference variables. */
.wt-sig-chart {
  position: relative;
  margin-top: 10px;
  padding: 10px 12px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05);
}
.wt-sig-chart-canvas { width: 100%; position: relative; }
.wt-sig-chart-svg { display: block; width: 100%; height: 120px; overflow: visible; }

.wt-sig-chart-line {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wt-sig-chart-axis-label {
  font: 500 10px/1 var(--font-sans, system-ui);
  fill: rgba(255, 255, 255, .42);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* HTML overlays — dots stay perfectly round even when the SVG viewBox
   is stretched horizontally by preserveAspectRatio="none". */
.wt-sig-chart-dot-overlay {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(17, 19, 26, .9);
  pointer-events: none;
}
.wt-sig-chart-dot-current { width: 10px; height: 10px; }
.wt-sig-chart-val-overlay {
  position: absolute;
  transform: translate(-50%, calc(-100% - 6px));
  font: 600 11px/1 var(--font-mono, ui-monospace, monospace);
  color: rgba(255, 255, 255, .85);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.wt-sig-chart-val-overlay-current { color: var(--accent); }

/* Delta chip floats over the chart's top-right corner. Direction-colored
   without the full pill chrome — the chart already carries the severity
   coloring, so the chip just needs to read as numeric punctuation. */
.wt-sig-chart-delta {
  position: absolute;
  top: 6px;
  right: 10px;
  font: 600 10.5px/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.wt-sig-chart-delta.up   { color: var(--signal-cool); border-color: var(--signal-cool-bd); background: var(--signal-cool-bg); }
.wt-sig-chart-delta.down { color: var(--signal-high); border-color: var(--signal-high-bd); background: var(--signal-high-bg); }
.wt-sig-chart-delta.flat { color: var(--accent-soft); }

/* Severity palettes — drive line/dot/gradient color. The gradient stops
   read these via class-scoped selectors so we don't need inline styles
   per chart instance. */
.wt-sig-chart.sev-high .wt-sig-chart-line   { stroke: var(--signal-high); }
.wt-sig-chart.sev-high .wt-sig-chart-dot-overlay { background: var(--signal-high); }
.wt-sig-chart.sev-high .wt-sig-grad-top  { stop-color: #fca5a5; stop-opacity: .45; }
.wt-sig-chart.sev-high .wt-sig-grad-bot  { stop-color: #fca5a5; stop-opacity: 0; }

.wt-sig-chart.sev-med .wt-sig-chart-line    { stroke: var(--signal-warn); }
.wt-sig-chart.sev-med .wt-sig-chart-dot-overlay  { background: var(--signal-warn); }
.wt-sig-chart.sev-med .wt-sig-grad-top   { stop-color: #fcd34d; stop-opacity: .40; }
.wt-sig-chart.sev-med .wt-sig-grad-bot   { stop-color: #fcd34d; stop-opacity: 0; }

.wt-sig-chart.sev-low .wt-sig-chart-line    { stroke: var(--signal-cool); }
.wt-sig-chart.sev-low .wt-sig-chart-dot-overlay  { background: var(--signal-cool); }
.wt-sig-chart.sev-low .wt-sig-grad-top   { stop-color: #a5b4fc; stop-opacity: .42; }
.wt-sig-chart.sev-low .wt-sig-grad-bot   { stop-color: #a5b4fc; stop-opacity: 0; }

/* Share-bar variant — used when the snapshot only has ratio components
   (top3_spend_share, lost_to_*_pct). Same wrapper coloring; bars stack. */
.wt-sig-shares { padding: 10px 12px 12px; }
.wt-sig-share-row + .wt-sig-share-row { margin-top: 10px; }
.wt-sig-share-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.wt-sig-share-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .68);
  letter-spacing: 0.01em;
}
.wt-sig-share-val { font-size: 12px; color: var(--accent); }
.wt-sig-share-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.wt-sig-share-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease;
}
.wt-sig-chart.sev-high .wt-sig-share-fill { background: linear-gradient(90deg, rgba(252,165,165,.85), rgba(252,165,165,.35)); }
.wt-sig-chart.sev-med  .wt-sig-share-fill { background: linear-gradient(90deg, rgba(252,211,77,.80),  rgba(252,211,77,.30)); }
.wt-sig-chart.sev-low  .wt-sig-share-fill { background: linear-gradient(90deg, rgba(165,180,252,.82), rgba(165,180,252,.32)); }

/* Prose-extracted "Signal at a glance" grid — one mini gradient chart
   per "<label> X vs Y" pair found in the headline / Layer 0 / cost-of-
   waiting prose. Lets MA-coordinator recs (which lack a structured
   metric_snapshot) show a visual read of the issue. */
.wt-rec-metric-grid { margin: 14px 0 4px; }
.wt-rec-metric-grid .wt-rec-l0-label { margin-bottom: 8px; }
.wt-sig-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.wt-sig-mini {
  padding: 10px 12px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wt-sig-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.wt-sig-mini-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-sig-mini-delta {
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.wt-sig-mini-delta.up   { color: var(--signal-cool); background: var(--signal-cool-bg); border: 1px solid var(--signal-cool-bd); }
.wt-sig-mini-delta.down { color: var(--signal-high); background: var(--signal-high-bg); border: 1px solid var(--signal-high-bd); }
.wt-sig-mini-delta.flat { color: var(--accent-soft); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.wt-sig-mini-canvas { width: 100%; position: relative; }
.wt-sig-mini-svg { display: block; width: 100%; height: 88px; overflow: visible; }

/* HTML dot overlays on mini charts — stay perfectly round even when the
   SVG viewBox is stretched. Positioned by percentage off the canvas
   wrapper so they line up with the warped path endpoints. */
.wt-sig-mini-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(17, 19, 26, .9);
  pointer-events: none;
}
.wt-sig-mini-dot-current { width: 9px; height: 9px; }
.wt-sig-mini.sev-high .wt-sig-mini-dot { background: var(--signal-high); }
.wt-sig-mini.sev-med  .wt-sig-mini-dot { background: var(--signal-warn); }
.wt-sig-mini.sev-low  .wt-sig-mini-dot { background: var(--signal-cool); }
.wt-sig-mini-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  margin-top: 2px;
  color: rgba(255, 255, 255, .68);
}
.wt-sig-mini-foot-arrow { color: rgba(255, 255, 255, .35); }
.wt-sig-mini-foot-current { color: var(--accent); font-weight: 600; }

/* Severity palettes for the mini chart — reuses the same vars as the
   full-size chart so the visual story stays consistent. */
.wt-sig-mini.sev-high .wt-sig-chart-line { stroke: var(--signal-high); }
.wt-sig-mini.sev-high .wt-sig-grad-top   { stop-color: #fca5a5; stop-opacity: .45; }
.wt-sig-mini.sev-high .wt-sig-grad-bot   { stop-color: #fca5a5; stop-opacity: 0; }
.wt-sig-mini.sev-med  .wt-sig-chart-line { stroke: var(--signal-warn); }
.wt-sig-mini.sev-med  .wt-sig-grad-top   { stop-color: #fcd34d; stop-opacity: .40; }
.wt-sig-mini.sev-med  .wt-sig-grad-bot   { stop-color: #fcd34d; stop-opacity: 0; }
.wt-sig-mini.sev-low  .wt-sig-chart-line { stroke: var(--signal-cool); }
.wt-sig-mini.sev-low  .wt-sig-grad-top   { stop-color: #a5b4fc; stop-opacity: .42; }
.wt-sig-mini.sev-low  .wt-sig-grad-bot   { stop-color: #a5b4fc; stop-opacity: 0; }

/* MA stream rendering — prose-quality output from Watchtower / Flight
   coordinators with tool calls and status changes as side annotations. */
.rd-stream { display: flex; flex-direction: column; gap: 10px; }
.stream-prose {
  padding: 10px 12px;
  background: rgba(255, 255, 255, .03);
  border-left: 2px solid rgba(160, 200, 255, .35);
  border-radius: 8px;
}
.stream-prose-sub {
  border-left-color: rgba(180, 220, 180, .35);
  margin-left: 16px;
}
.stream-prose-handoff {
  border-left-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .03);
}
.stream-prose-handoff .stream-prose-author {
  color: var(--accent-soft);
  opacity: 1;
  font-weight: 600;
}
.stream-prose-brief {
  border-left-color: rgba(255, 200, 100, .55);
  background: rgba(255, 200, 100, .05);
}
.stream-prose-brief .stream-prose-author {
  color: rgba(255, 200, 100, 1);
  opacity: 1;
  font-weight: 600;
}
.stream-grader {
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border-left: 2px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
}
.stream-grader .stream-prose-author { font-weight: 600; opacity: 1; }
.stream-grader .stream-prose-body { margin: 0; white-space: pre-wrap; word-break: break-word; }
.stream-grader-pass {
  border-left-color: rgba(107, 214, 142, .55);
  background: rgba(107, 214, 142, .06);
}
.stream-grader-pass .stream-prose-author { color: var(--ok, #6BD68E); }
.stream-grader-fail {
  border-left-color: rgba(255, 175, 95, .55);
  background: rgba(255, 175, 95, .05);
}
.stream-grader-fail .stream-prose-author { color: rgba(255, 175, 95, 1); }

/* Gong evidence quote in rec drawer — pull-quote with call link */
.wt-rec-m16-evidence {
  border-left: 3px solid rgba(160, 200, 255, .5);
  padding: 12px 16px;
  background: rgba(160, 200, 255, .04);
  border-radius: 8px;
  margin: 12px 0;
}
.wt-rec-m16-evidence-call { opacity: .6; font-weight: normal; text-transform: none; letter-spacing: 0; }
.wt-rec-m16-evidence-quote {
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, .92);
  white-space: pre-wrap;
  line-height: 1.6;
}
.wt-rec-m16-evidence-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--accent-soft);
  text-decoration: none;
}
.wt-rec-m16-evidence-link:hover { text-decoration: underline; }

/* Operator directive on an approved rec — persisted on
   growthos_recommendations.operator_note. Sits between the suggested
   brief and the audit line. Uses the same lavender accent as other
   "human override" affordances so reviewers' eyes catch it. */
.wt-rec-operator-note {
  margin: 14px 0 2px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent-soft, #b59cff);
  background: rgba(180, 155, 255, 0.05);
  border-radius: 0 6px 6px 0;
}
.wt-rec-operator-note .kicker {
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--accent-soft, #b59cff);
}
.wt-rec-operator-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

/* Audit-trail line on a dispatched/dismissed rec */
.wt-rec-audit {
  margin: 12px 0 6px;
  padding: 6px 10px;
  font-size: 11px;
  opacity: .7;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  display: inline-block;
}
.wt-rec-audit-status { font-weight: 600; opacity: 1; }
.wt-rec-audit-by { color: rgba(255,255,255,.92); }
.stream-prose-author {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .55;
  margin-bottom: 4px;
}
.stream-prose-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Markdown-rendered prose body — agents emit `##` headings, bold,
   lists, etc. in their final messages. The `_proseEl()` helper hands
   us already-block-rendered HTML, so drop pre-wrap and lean on the
   real block structure instead. Tight vertical rhythm so the agent's
   message reads as one beat, not as a stack of cards. */
.stream-prose-md {
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stream-prose-md > *:first-child { margin-top: 0; }
.stream-prose-md > *:last-child  { margin-bottom: 0; }
.stream-prose-md h3,
.stream-prose-md h4,
.stream-prose-md h5,
.stream-prose-md h6 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.35;
  margin: 4px 0 2px;
}
.stream-prose-md h4 { font-size: 0.95rem; }
.stream-prose-md h5,
.stream-prose-md h6 { font-size: 0.88rem; color: var(--soft); }
.stream-prose-md p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stream-prose-md ul,
.stream-prose-md ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(255, 255, 255, 0.88);
}
.stream-prose-md li::marker { color: var(--muted); }
.stream-prose-md strong { color: var(--ink); font-weight: 600; }
.stream-prose-md em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--soft); }
.stream-prose-md code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stream-prose-md li {
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Collapsed raw-output disclosure — fenced code / YAML the agent emitted,
   tucked behind a click so the stream prose reads clean instead of
   dumping a `deliverable:` wall inline. */
.stream-raw {
  margin: 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.stream-raw > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}
.stream-raw > summary::-webkit-details-marker { display: none; }
.stream-raw > summary::before {
  content: '›';
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s ease;
}
.stream-raw[open] > summary::before { transform: rotate(90deg); }
.stream-raw > summary:hover { color: var(--soft); }
.stream-raw-pre {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--soft);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}
/* Summary-first stream: a plain-English headline up top, with the
   step-by-step activity tucked behind a collapsed "Show activity"
   disclosure so the default read is the gist, not the orchestration log. */
.rd-stream-wrap { display: flex; flex-direction: column; gap: 10px; }
.stream-summary {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  padding: 2px 0;
}
.stream-activity {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
.stream-activity > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}
.stream-activity > summary::-webkit-details-marker { display: none; }
.stream-activity > summary:hover { color: var(--soft); }
.stream-activity-label::after { content: 'Show activity'; }
.stream-activity[open] .stream-activity-label::after { content: 'Hide activity'; }
.stream-activity-count { text-transform: none; opacity: .7; }
.stream-activity-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok, #4ec3a4);
  box-shadow: 0 0 0 3px rgba(78, 195, 164, .16);
  animation: flightActivityPulse 1.6s ease-in-out infinite;
}
@keyframes flightActivityPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stream-activity-chev { margin-left: auto; transition: transform .15s ease; }
.stream-activity[open] .stream-activity-chev { transform: rotate(90deg); }
.stream-activity .rd-stream { padding: 0 8px 8px; }
.stream-side {
  font-size: 11px;
  padding: 2px 4px;
}
.stream-side-marker { opacity: .7; }
.stream-done {
  color: var(--ok, #4ec3a4);
  padding: 6px 0;
  font-weight: 500;
}
.stream-error {
  color: var(--signal-warn, #d97a55);
  padding: 6px 0;
  font-weight: 500;
}
.stream-side-status {
  opacity: .55;
  font-style: italic;
}
.stream-thinking {
  padding: 10px 12px;
  background: rgba(180, 160, 220, .06);
  border-left: 2px dashed rgba(180, 160, 220, .35);
  border-radius: 8px;
  font-style: italic;
  opacity: .85;
}
.stream-thinking .stream-prose-author {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .65;
  margin-bottom: 4px;
  font-style: normal;
}
.stream-thinking .stream-prose-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Narrative summary on the run detail — sits between the header and the
   status block so the operator reads a sentence before scanning fields. */
.rd-narrative {
  padding: 14px 16px;
  /* Generous gap to the next section so the narrative card reads as
     its own beat instead of crowding "What happened" into it. */
  margin-bottom: 24px;
  background: rgba(160, 200, 255, .04);
  border-left: 3px solid rgba(160, 200, 255, .4);
  border-radius: 8px;
}
.rd-narrative-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
/* Restore a clear gap between the section label and its content
   (Status, What happened, etc.) — previous layout had them touching. */
.rd-block .rd-block-label {
  margin-bottom: 10px;
}
/* The Status facts list (dt/dd grid) sits below its label with its
   own breathing room. Sits flush against the next block. */
.rd-block .rd-facts {
  margin-top: 8px;
}

/* Run detail timeline — "What happened" ordered list. Same visual language
   as the activity-modal timeline (see .wt-activity-timeline). */
.rd-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rd-tl-step { display: flex; gap: 12px; align-items: flex-start; }
.rd-tl-dot {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: rgba(120, 160, 240, .18);
  color: #cbe2ff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.rd-tl-body { min-width: 0; flex: 1; }
.rd-tl-when { font-size: 11px; opacity: .55; margin-bottom: 3px; }
.rd-tl-what { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.rd-tl-why { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5; }

/* Specialists dispatched — one chip per sub-agent invocation, with the
   elapsed time between thread_message_sent and thread_message_received.
   Running specialists pulse so the operator can see who's still working. */
.rd-specs {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.rd-spec {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.025);
  font-size: 12px;
}
.rd-spec-name { font-weight: 600; color: var(--ink); }
.rd-spec-meta { font-size: 11px; color: var(--mid); }
.rd-spec-elapsed { color: var(--mid); }
.rd-spec.running {
  border-color: var(--signal-live);
  background: rgba(120, 200, 140, .08);
}
.rd-spec.running .rd-spec-elapsed {
  color: var(--signal-live);
  animation: rd-spec-pulse 1.6s ease-in-out infinite;
}
@keyframes rd-spec-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Failed-run reason block — code-style readout so multi-line tracebacks
   stay legible. Left-bar amber so it visually corresponds with the
   failure state pill. */
.rd-error-block {
  border-left: 3px solid var(--signal-high, #f08a6e);
  background: rgba(240, 138, 110, .06);
  padding: 12px 16px;
  border-radius: 6px;
}
.rd-error-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
}

/* Elapsed cell turns amber when the run has produced no events for >5min.
   The agent might be hung, mid-tool-call against a slow backend, or just
   waiting for a long model response — operator needs to see this and
   decide whether to wait or intervene. */
.rd-facts-stuck {
  color: var(--signal-warn, #f5c267) !important;
}

/* Deliverable type badge — a tiny single-emoji glyph that sits between
   the state pill and the timestamp on completed runs so a list scan
   shows what artifact came out without a click. */
.run-row-deliv {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  margin-left: 6px;
  opacity: .85;
}

/* M22 playbook badge on rec cards. Three states map to three tones:
   confirmed (green = memory-aligned), divergent (amber = intentionally
   off-script), cold (muted = no playbook yet). The pill is tiny —
   the rec body still drives the read; this just signals provenance. */
.wt-rec-playbook {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.025);
  color: var(--mid);
}
.wt-rec-playbook.confirmed {
  color: var(--signal-live, #7bd393);
  border-color: rgba(123, 211, 147, 0.4);
  background: rgba(123, 211, 147, 0.08);
}
.wt-rec-playbook.divergent {
  color: var(--signal-warn, #f5c267);
  border-color: rgba(245, 194, 103, 0.45);
  background: rgba(245, 194, 103, 0.08);
}
.wt-rec-playbook.cold {
  color: var(--mid);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hair);
  opacity: 0.85;
}

/* ---------- Framework v2 context chips ----------
   Layer 0 business-health flag + Layer 0.5 customer-type weighting +
   cadence. Sit under the rec headline on cards and in the modal so
   the AM reads "why this channel, not that one" framing before the
   action surface. Quiet visual register — small caps + thin border. */
.wt-rec-ctx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.wt-ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
  color: var(--soft);
  white-space: nowrap;
}
/* Layer 0 — business health flag. Acquisition_efficiency = cool blue,
   revenue_per_customer = warm gold, structural_escalation = red (the
   hard-stop on channel diagnosis). */
.wt-ctx-chip.biz-acquisition_efficiency {
  color: rgba(165, 180, 252, 0.92);
  border-color: rgba(129, 140, 248, 0.30);
  background: rgba(129, 140, 248, 0.08);
}
.wt-ctx-chip.biz-revenue_per_customer {
  color: rgba(245, 194, 103, 0.92);
  border-color: rgba(245, 194, 103, 0.32);
  background: rgba(245, 194, 103, 0.08);
}
.wt-ctx-chip.biz-structural_escalation {
  color: rgba(248, 113, 113, 0.92);
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(248, 113, 113, 0.10);
}
/* Layer 0.5 — customer-type weighting. Distinct hues from biz-* so
   the two chips read as separate axes when shown side by side. */
.wt-ctx-chip.cust-acquisition_only {
  color: rgba(123, 211, 147, 0.92);
  border-color: rgba(123, 211, 147, 0.30);
  background: rgba(123, 211, 147, 0.08);
}
.wt-ctx-chip.cust-retention_only {
  color: rgba(177, 156, 255, 0.92);
  border-color: rgba(177, 156, 255, 0.30);
  background: rgba(177, 156, 255, 0.08);
}
.wt-ctx-chip.cust-both {
  color: var(--ink);
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.06);
}
.wt-ctx-chip.cust-neither {
  color: var(--mid);
}
/* Cadence — small caps, always lowercase. */
.wt-ctx-chip.cadence {
  text-transform: lowercase;
  color: var(--mid);
}
.wt-ctx-chip.cadence-weekly,
.wt-ctx-chip.cadence-monthly,
.wt-ctx-chip.cadence-quarterly {
  color: var(--ink);
  border-color: var(--accent-faint);
}

/* Layer 0 metric context — free-form prose with the actual MER / CAC
   numbers behind the flag chips above. Renders inside the modal as a
   quoted "evidence" block, not an action block. Indent + muted color
   keeps it visually subordinate to the action row. */
.wt-rec-l0-context {
  margin: 8px 0 4px;
  padding: 10px 14px;
  border-left: 2px solid var(--accent-faint);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
.wt-rec-l0-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.wt-rec-l0-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--soft);
}

/* ---------- Schedule list — inline error banner ----------
   When the slug validator marks an automation as broken, the table row
   gets a full-width error strip beneath it carrying the error message
   so the operator sees "this schedule is broken" without opening a
   failed run to discover it. */
.st-rowgroup {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.st-rowgroup:last-child { border-bottom: none; }
/* Reuse the existing .st-row borders via the wrapper instead. The
   .st-row itself no longer needs a separator since the wrap owns it. */
.st-rowgroup .st-row { border-bottom: none; }
.st-rowgroup.has-error .st-row { padding-bottom: 6px; }
.st-rowgroup.off { opacity: 0.55; }
.st-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 12px;
  font-size: 0.78rem;
  color: rgba(248, 113, 113, 0.92);
}
.st-error-tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.12);
  color: rgba(248, 113, 113, 0.95);
  border: 1px solid rgba(248, 113, 113, 0.36);
  flex-shrink: 0;
}
.st-error-msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
}
.st-error-when {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* ---------- Flight: Agent notes on failed runs ----------
   When a failed run's stream contained substantive final prose from
   the agent, surface ~280 chars under an "Agent notes" label so the
   AM sees the actual diagnosis (e.g. "guardrail broken May 19") rather
   than just the exception trace. Sits between "Why it failed" and the
   Specialists block. */
.rd-agent-notes {
  border-left: 2px solid var(--accent-faint);
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 14px;
  border-radius: 4px;
}
.rd-agent-notes .rd-block-label {
  color: var(--muted);
  margin-bottom: 6px;
}
.rd-agent-notes-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  white-space: pre-wrap;
}
/* Shown when a failed run ended on structured output with no prose —
   we point at the stream instead of dumping the YAML blob. */
.rd-agent-notes-empty {
  color: var(--muted);
  font-style: italic;
  white-space: normal;
}

/* M22 output-format badge on rec cards. Same shape as playbook badge
   but a different axis — what KIND of artifact comes out the other end.
   Operator scans the grid: sheet vs doc vs in-platform. */
.wt-rec-output {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.025);
  color: var(--mid);
}
.wt-rec-output .fx-icon { width: 11px; height: 11px; }
.wt-rec-output.spreadsheet {
  color: rgba(123, 211, 147, 0.85);
}
.wt-rec-output.document {
  color: rgba(160, 200, 255, 0.85);
}
.wt-rec-output.in-platform {
  color: rgba(177, 156, 255, 0.85);
}
/* M23 — directive-vs-artifact classification (orthogonal to the format
   colors above). Deliverable pops in teal ("work to produce"); directive
   stays muted ("apply in-platform", the default). */
.wt-rec-output.deliverable {
  color: rgba(94, 211, 196, 0.92);
  border-color: rgba(94, 211, 196, 0.30);
}
.wt-rec-output.recommendation {
  color: var(--mid);
}
.wt-rec-foot-pill.deliverable {
  color: rgba(94, 211, 196, 0.95);
  background: rgba(94, 211, 196, 0.10);
}

/* ---------- Universal icon wrapper ----------
   Every `iconEl()` from app/icons.js renders a <span class="fx-icon">
   wrapping a monoline SVG. The SVG inherits stroke colour from the
   surrounding text (currentColor), and the wrapper handles alignment +
   default size so the icon sits flush with adjacent text glyphs. */
.fx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
  color: inherit;
}
.fx-icon svg { display: block; width: 100%; height: 100%; }
.fx-icon.fx-icon-sm { width: 12px; height: 12px; }
.fx-icon.fx-icon-md { width: 16px; height: 16px; }
.fx-icon.fx-icon-lg { width: 20px; height: 20px; }
.fx-icon.fx-icon-xl { width: 28px; height: 28px; }
/* Real-artwork variant — used by `<img>`-based logos pulled from
   /assets/logos. The SVGs in that folder ship pre-tinted white so they
   sit naturally against the dark UI; opacity gives them a calm,
   non-shouting weight. Bitmap PNGs use the same contain rule so they
   never stretch out of the wrapper. */
.fx-icon.fx-icon-logo { color: inherit; opacity: 0.82; }
.fx-icon.fx-icon-logo .fx-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Memory tool I/O — violet left bar so operator can scan the stream and
   see the moments where the agent reaches into /memories or /dreams. */
.stream-side-memory {
  border-left: 2px solid rgba(177, 156, 255, .8);
  padding-left: 10px;
  color: rgba(220, 210, 255, .95) !important;
  background: rgba(177, 156, 255, .05);
  border-radius: 3px;
}
.stream-side-memory .stream-side-marker {
  color: rgba(177, 156, 255, 1);
}

/* Track Record summary header — one-row aggregate above the per-row
   list. Total + hit-rate + median iters at a glance. */
.wt-track-summary {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--hair);
  font-size: 13px;
}
.wt-track-sum-num { font-weight: 700; font-size: 15px; color: var(--ink); margin-right: 2px; }
.wt-track-sum-lbl { color: var(--mid); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.wt-track-sum-sep { color: var(--hair); opacity: .6; padding: 0 2px; }
.wt-track-sum-good     { color: var(--signal-live, #7bd393); }
.wt-track-sum-bad      { color: var(--signal-high, #f08a6e); }
.wt-track-sum-mid      { color: var(--signal-warn, #f5c267); }
.wt-track-sum-pending  { color: var(--mid); }
.wt-track-sum-iter     { color: var(--mid); opacity: .9; }

/* Activity modal — same shape as the run-detail timeline. */
.wt-activity-narrative {
  padding: 14px 16px !important;
  background: rgba(160, 200, 255, .04);
  border-left: 3px solid rgba(160, 200, 255, .4);
  border-radius: 8px;
}
.wt-activity-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.wt-act-step { display: flex; gap: 12px; align-items: flex-start; }
.wt-act-step-dot {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: rgba(120, 160, 240, .18);
  color: #cbe2ff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.wt-act-step-body { min-width: 0; flex: 1; }
.wt-act-step-when { font-size: 11px; opacity: .55; margin-bottom: 3px; }
.wt-act-step-what { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.wt-act-step-why { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5; }

/* ================================================================
   Monitoring view — real-time ticker
   ================================================================ */

.mn-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--signal-live);
  background: rgba(110, 231, 183, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.30);
  border-radius: 999px;
}
.mn-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal-live);
  box-shadow: 0 0 8px rgba(110, 231, 183, .65);
  animation: mn-live-pulse 1.6s ease-in-out infinite;
}
@keyframes mn-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.mn-live-clock { font-size: 12px; color: var(--muted); }

.mn-bar {
  display: flex; flex-direction: column; gap: 12px;
  margin: 16px 0 20px;
}
.mn-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.mn-section { padding: 18px 22px; margin-bottom: 16px; border-radius: 14px; }

.mn-chart-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.mn-chart-title {
  font-size: 18px; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}
.mn-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--muted); }
.mn-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mn-legend-swatch {
  width: 10px; height: 10px; border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.mn-legend-agent  .mn-legend-swatch { background: #6ee7b7; }
.mn-legend-signal .mn-legend-swatch { background: #ef6c5a; }

.mn-chart-wrap {
  width: 100%;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 6px 4px;
}
.mn-chart-svg { width: 100%; height: 280px; display: block; }

/* Line chart: top half = agent (green line + gradient fill down to
   the centre axis); bottom half = signal (red line + gradient fill
   up to the axis). Lines sit on top of the fills for crispness. */
.mn-line {
  fill: none;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mn-line-agent  { stroke: #6ee7b7; }
.mn-line-signal { stroke: #ef6c5a; }
.mn-area        { stroke: none; }
.mn-area-agent  { fill: url(#mn-grad-agent); }
.mn-area-signal { fill: url(#mn-grad-signal); }
.mn-dot-agent   { fill: #6ee7b7; }
.mn-dot-signal  { fill: #ef6c5a; }

.mn-axis {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}
.mn-now-band {
  fill: rgba(165, 180, 252, 0.07);
  stroke: rgba(165, 180, 252, 0.30);
  stroke-width: 1;
}
.mn-now-label {
  fill: var(--signal-cool, #a5b4fc);
  font-size: 10px; letter-spacing: 0.12em;
  font-weight: 600;
}
.mn-tick { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.mn-tick-label { fill: var(--muted); font-size: 10px; }
.mn-y-label { fill: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.mn-y-scale { fill: rgba(255, 255, 255, 0.45); font-size: 10px; }

/* ── Running log ─────────────────────────────────────────────────── */

.mn-log-section { padding-bottom: 10px; }
.mn-log-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mn-log-title { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.mn-log-count { font-size: 11px; color: var(--muted); }

.mn-log-table {
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}
.mn-log-row {
  display: grid;
  grid-template-columns: 78px 92px 1fr 200px 110px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background .12s var(--ease);
  font: inherit;
}
.mn-log-row:last-child { border-bottom: none; }
.mn-log-row:hover { background: rgba(255, 255, 255, 0.035); }
.mn-log-head-row {
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: default;
}
.mn-log-head-row:hover { background: rgba(255, 255, 255, 0.025); }
.mn-log-time  { color: var(--muted); font-size: 11px; }
.mn-log-kind  { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.mn-log-dot   { width: 7px; height: 7px; border-radius: 50%; }
.mn-log-dot-signal { background: #ef6c5a; box-shadow: 0 0 8px rgba(239, 108, 90, .5); }
.mn-log-dot-agent  { background: var(--signal-live, #6ee7b7); box-shadow: 0 0 8px rgba(110, 231, 183, .5); }
.mn-log-label {
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mn-log-client { font-size: 11px; color: var(--muted); }
.mn-log-state  { font-size: 10px; }

.mn-log-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 760px) {
  .mn-log-row {
    grid-template-columns: 62px 70px 1fr 90px;
  }
  .mn-log-client { display: none; }
  .mn-chart-svg { height: 220px; }
}

/* ================================================================
   Phase 3 — notifications: bell button + dropdown + toasts
   Mounted into .chrome-meta beside the backend-status / clock /
   client-switch chips. Toasts render into a viewport-fixed host
   on document.body so they sit above every modal & drawer.
   ================================================================ */

/* ---- Bell button + dropdown ---- */
.falcon-bell-wrap { position: relative; display: inline-flex; }

.falcon-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
  color: var(--mid);
  cursor: pointer;
  transition: background .18s var(--ease),
              border-color .18s var(--ease),
              color .18s var(--ease);
}
.falcon-bell-btn:hover { color: var(--ink); border-color: var(--accent-faint); background: rgba(255,255,255,0.06); }
.falcon-bell-btn.has-unread {
  border-color: var(--accent-faint);
  color: var(--ink);
}
.falcon-bell-btn.has-unread .falcon-bell-glyph { color: var(--accent-soft); }

.falcon-bell-glyph {
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
}

.falcon-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-soft, #b59cff);
  color: #1a1620;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg, #0c0b0f);
  pointer-events: none;
}
.falcon-bell-badge.hidden { display: none; }

.falcon-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: min(480px, 70vh);
  overflow: hidden;
  display: none;
  flex-direction: column;
  background: var(--panel, #16141b);
  border: 1px solid var(--hair);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
  z-index: 1100;
}
.falcon-bell-wrap.open .falcon-bell-dropdown { display: flex; }

.falcon-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hair);
}
.falcon-bell-head-title {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
  font-family: var(--mono);
}
.falcon-bell-head-action {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.falcon-bell-head-action:hover { color: var(--ink); background: rgba(255,255,255,0.04); }

.falcon-bell-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.falcon-bell-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.falcon-bell-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: 10px 14px 11px;
  cursor: pointer;
  color: var(--ink-mid, #c9c4d6);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.falcon-bell-row + .falcon-bell-row { border-top: 1px solid rgba(255,255,255,0.03); }
.falcon-bell-row:hover { background: rgba(255,255,255,0.04); }
.falcon-bell-row.unread { background: rgba(180, 155, 255, 0.04); border-left-color: var(--accent-soft, #b59cff); }
.falcon-bell-row.unread .falcon-bell-row-title { color: var(--ink); }

.falcon-bell-row.kind-error.unread    { border-left-color: #d48a8a; background: rgba(212,138,138,0.05); }
.falcon-bell-row.kind-warn.unread     { border-left-color: #d4b766; background: rgba(212,183,102,0.05); }
.falcon-bell-row.kind-review.unread   { border-left-color: var(--accent-soft, #b59cff); }
.falcon-bell-row.kind-success.unread  { border-left-color: #9ac2a5; background: rgba(154,194,165,0.05); }
.falcon-bell-row.kind-signal.unread   { border-left-color: #afaaf9; background: rgba(175,170,249,0.05); }

.falcon-bell-row-title {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 3px;
  color: var(--ink-mid, #c9c4d6);
}
.falcon-bell-row-body {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 4px;
}
.falcon-bell-row-time {
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---- Toasts ---- */
.falcon-toast-host {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}

.falcon-toast {
  pointer-events: auto;
  position: relative;
  background: var(--panel, #16141b);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent-soft, #b59cff);
  border-radius: 10px;
  padding: 11px 36px 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  cursor: pointer;
  transform: translateX(380px);
  opacity: 0;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.falcon-toast.on  { transform: translateX(0); opacity: 1; }
.falcon-toast.out { transform: translateX(20px); opacity: 0; }

.falcon-toast.kind-error   { border-left-color: #d48a8a; }
.falcon-toast.kind-warn    { border-left-color: #d4b766; }
.falcon-toast.kind-review  { border-left-color: var(--accent-soft, #b59cff); }
.falcon-toast.kind-success { border-left-color: #9ac2a5; }
.falcon-toast.kind-signal  { border-left-color: #afaaf9; }

.falcon-toast-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
}
.falcon-toast-body {
  font-size: 0.74rem;
  color: var(--ink-mid, #c9c4d6);
  line-height: 1.4;
}

.falcon-toast-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.falcon-toast-close:hover { background: rgba(255,255,255,0.06); color: var(--ink); }

@media (max-width: 760px) {
  .falcon-bell-dropdown { width: calc(100vw - 24px); right: -8px; }
  .falcon-toast-host    { right: 8px; top: 8px; max-width: calc(100vw - 16px); }
}

/* ================================================================
   Coverage — strategic atlas of Omega's diagnostic-tree topology.
   Aesthetic: topographic atlas. Mono numerals over serif titles,
   hairline contour rules between strata, leaf state expressed
   entirely through left-edge treatment (never fill color).
   ================================================================ */

.coverage-head { align-items: flex-end; }
.coverage-head .view-title { letter-spacing: -0.018em; }
.coverage-head-scope { display: inline-flex; align-items: center; gap: 12px; }
.coverage-head-client {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.coverage-head-pick {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--soft);
  padding: 6px 11px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.coverage-head-pick:hover { color: var(--ink); border-color: var(--accent-faint); }

.coverage-loading {
  padding: 60px 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: breathe 2.4s ease-in-out infinite;
}

.coverage-error {
  margin: 24px 0;
  padding: 18px 22px;
  border: 1px solid var(--hair);
  border-left: 2px solid #d48a8a;
  border-radius: var(--r-md);
  background: rgba(212,138,138,0.03);
}
.coverage-error p { margin-top: 6px; color: var(--soft); font-size: 0.92rem; }

/* ── Summary strip — clock-display numerals over kicker labels. ─── */

.coverage-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--hair);
  overflow: hidden;
}
.coverage-summary-cell {
  padding: 18px 22px 20px;
  background: rgba(10,10,18,0.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coverage-summary-cell .kicker { margin-bottom: 0; }
.coverage-summary-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.coverage-num-figure {
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.coverage-num-figure.tone-fired  { color: #d4b766; }
.coverage-num-figure.tone-greyed { color: var(--mid); }
.coverage-num-divider {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 300;
  margin: 0 2px;
}
.coverage-num-total {
  font-size: 1rem;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}
.coverage-summary-sub {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Filter chips ───────────────────────────────────────────────── */

.coverage-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
  padding-left: 2px;
}
.coverage-filters .kicker { margin-right: 4px; }

/* ── Matrix — seven columns of stacked tree strata ──────────────── */

.coverage-matrix {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: rgba(10,10,18,0.40);
  overflow: hidden;
}
.coverage-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.012) 0%, transparent 60%);
}
.coverage-col:last-child { border-right: 0; }
.coverage-col.shrouded   { background: linear-gradient(180deg, rgba(255,255,255,0.005) 0%, transparent 60%); }

.coverage-col-head {
  padding: 18px 14px 14px;
  border-bottom: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coverage-col-numeral {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
}
.coverage-col-head.shrouded .coverage-col-numeral { color: var(--faint); }
.coverage-col-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.coverage-col-title {
  font-size: 1.05rem;
  letter-spacing: -0.014em;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.15;
}
.coverage-col-head.shrouded .coverage-col-title { color: var(--mid); }
.coverage-col-sub {
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  color: var(--muted);
  text-transform: lowercase;
}
.coverage-col-count {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 0.74rem;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.coverage-col-count-div   { color: var(--muted); padding: 0 2px; font-weight: 300; }
.coverage-col-count-fired { color: #d4b766; margin-left: 6px; font-size: 0.66rem; letter-spacing: 0.04em; }

.coverage-col-body { display: flex; flex-direction: column; }

/* ── Tree stratum — a horizontal band within a column. ─────────── */

.coverage-tree {
  padding: 14px 12px 16px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.coverage-tree:last-child { border-bottom: 0; }
.coverage-tree.shrouded   { opacity: 0.55; }

.coverage-tree-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.coverage-tree-title {
  font-size: 0.86rem;
  color: var(--soft);
  letter-spacing: -0.005em;
  font-weight: 400;
}
.coverage-tree-count {
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.coverage-tree-shrouded {
  padding: 14px 6px 10px;
  text-align: center;
}
.coverage-tree-shrouded > .mono {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.coverage-tree-shrouded-why {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.5;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.coverage-tree-empty {
  padding: 8px 4px;
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.coverage-tree-missing {
  padding: 8px 4px;
  font-size: 0.66rem;
  color: var(--signal-warn);
  letter-spacing: 0.04em;
}

/* ── Leaf chips — atomic unit. State via left-edge only. ───────── */

.coverage-leaves { display: flex; flex-direction: column; gap: 4px; }

.coverage-leaf {
  position: relative;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px 10px 12px;
  text-align: left;
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--hair);
  border-radius: 4px;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease),
              transform .12s var(--ease);
  font-family: var(--sans);
  width: 100%;
  min-width: 0;
}
.coverage-leaf:hover {
  background: rgba(255,255,255,0.045);
  border-color: var(--accent-faint);
  transform: translateY(-0.5px);
}

.coverage-leaf.walkable        { border-left-color: rgba(110, 231, 183, 0.55); }
.coverage-leaf.walkable:hover  { border-left-color: var(--signal-live); }

.coverage-leaf.greyed {
  border-left-style: dashed;
  border-left-color: var(--faint);
  background: rgba(255,255,255,0.005);
  opacity: 0.72;
}
.coverage-leaf.greyed .coverage-leaf-label { color: var(--mid); }
.coverage-leaf.greyed .coverage-leaf-sig   { color: var(--faint); }
.coverage-leaf.greyed:hover {
  opacity: 0.92;
  border-left-color: var(--accent-faint);
}

.coverage-leaf.fired        { border-left-color: rgba(252, 211, 77, 0.70); }
.coverage-leaf.fired:hover  { border-left-color: var(--signal-warn); }

.coverage-leaf-fired-dot {
  position: absolute;
  top: 10px;
  left: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal-warn);
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.65);
  pointer-events: none;
}

.coverage-leaf-label {
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.004em;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coverage-leaf-sig {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}
.coverage-leaf-sig-anon { color: var(--faint); }

/* ── Wishlist — "Unlock more coverage" essay companion. ───────── */

.coverage-wishlist {
  margin: 32px 0 24px;
  padding: 24px 28px 26px;
  border: 1px solid var(--hair);
  border-left: 2px solid rgba(255,255,255,0.30);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.015);
  max-width: 820px;
}
.coverage-wishlist .kicker { margin-bottom: 12px; }
.coverage-wishlist-prose,
.coverage-wishlist-portfolio-prose {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--soft);
  letter-spacing: -0.005em;
}
.coverage-wishlist-list {
  margin-top: 18px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coverage-wishlist-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--ghost);
}
.coverage-wishlist-list li:last-child { border-bottom: 0; }
.coverage-wishlist-rank   { font-size: 0.62rem; color: var(--muted); letter-spacing: 0.04em; }
.coverage-wishlist-name   { font-size: 0.94rem; color: var(--ink);   letter-spacing: -0.008em; }
.coverage-wishlist-unlock { font-size: 0.68rem; color: rgba(110, 231, 183, 0.85); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.coverage-wishlist-complete  { border-left-color: rgba(110, 231, 183, 0.55); }
.coverage-wishlist-portfolio { border-left-color: rgba(165, 180, 252, 0.50); }

/* ── Leaf detail side panel. ──────────────────────────────────── */

.coverage-leaf-panel {
  position: fixed;
  top: 0; right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%),
    var(--bg-0);
  border-left: 1px solid var(--hair);
  box-shadow: -24px 0 60px rgba(0,0,0,0.45);
  z-index: 220;
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  overflow-y: auto;
  padding: 28px 26px 40px;
}
.coverage-leaf-panel.open { transform: translateX(0); }

.coverage-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.coverage-panel-title {
  font-size: 1.35rem;
  margin-top: 6px;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.18;
}
.coverage-panel-close {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 4px;
  transition: color .14s var(--ease);
}
.coverage-panel-close:hover { color: var(--ink); }

.coverage-panel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
  font-family: var(--mono);
}
.coverage-panel-status.walkable { color: var(--signal-live); background: var(--signal-live-bg); border: 1px solid var(--signal-live-bd); }
.coverage-panel-status.fired    { color: var(--signal-warn); background: var(--signal-warn-bg); border: 1px solid var(--signal-warn-bd); }
.coverage-panel-status.greyed   { color: var(--mid);          background: rgba(255,255,255,0.04);  border: 1px solid var(--hair); }

.coverage-panel-block { margin-bottom: 22px; }
.coverage-panel-block .kicker { margin-bottom: 8px; }
.coverage-panel-id,
.coverage-panel-signal {
  font-size: 0.78rem;
  color: var(--soft);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.coverage-panel-signal { color: var(--mid); }
.coverage-panel-action {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.coverage-panel-specialist {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--soft);
  background: rgba(255,255,255,0.025);
}
.coverage-panel-walk {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coverage-panel-walk-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ghost);
}
.coverage-panel-walk-step:last-child { border-bottom: 0; padding-bottom: 0; }
.coverage-panel-walk-num { font-size: 0.62rem; color: var(--muted); letter-spacing: 0.04em; }
.coverage-panel-walk-q {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink);
  letter-spacing: -0.004em;
  line-height: 1.4;
}
.coverage-panel-walk-a {
  font-size: 0.6rem;
  letter-spacing: 0.10em;
  margin-top: 3px;
  color: var(--accent-soft);
}
.coverage-panel-fires {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coverage-panel-fires li {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ghost);
  font-size: 0.7rem;
  color: var(--soft);
}
.coverage-panel-fires li:last-child { border-bottom: 0; }
.coverage-panel-fire-when { color: var(--mid); }
.coverage-panel-fire-sig  { color: var(--ink); }
.coverage-panel-fire-link { color: var(--signal-cool); text-decoration: none; }
.coverage-panel-fire-link:hover { text-decoration: underline; }
.coverage-panel-unlock {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--soft);
  letter-spacing: -0.004em;
}

/* ── Responsive — collapse columns on narrow viewports. ───────── */

@media (max-width: 1480px) {
  .coverage-matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coverage-col:nth-child(4) { border-right: 0; }
  .coverage-col:nth-child(n+5) { border-top: 1px solid var(--hair); }
}
@media (max-width: 1100px) {
  .coverage-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-col { border-right: 1px solid var(--hair); }
  .coverage-col:nth-child(2n) { border-right: 0; }
  .coverage-col:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 760px) {
  .coverage-summary { grid-template-columns: 1fr; }
  .coverage-matrix  { grid-template-columns: 1fr; }
  .coverage-col     { border-right: 0; }
  .coverage-col:nth-child(n+2) { border-top: 1px solid var(--hair); }
  .coverage-leaf-panel { width: 100vw; }
}

/* ================================================================
   Coverage v2 — diagnostician tabs + dendrogram canvas.
   The matrix selectors above are now dead code (kept temporarily
   so the older API surface doesn't break inflight clients caching
   the previous JS bundle). The active view uses the rules below.

   Aesthetic anchor: engineering schematic on graphite paper. 1px
   orthogonal connectors. Decision questions render as Fraunces
   serif prose at branch points (no boxes). Leaves are lapidary
   chips. YES/NO labels sit directly on the connector elbows.
   ================================================================ */

/* ── Diagnostician tab bar ──────────────────────────────────────── */

.coverage-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 18px;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: rgba(10, 10, 18, 0.42);
  overflow: hidden;
}

.coverage-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hair);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
  min-width: 0;
}
.coverage-tab:last-child { border-right: 0; }
.coverage-tab:hover { background: rgba(255,255,255,0.025); }
.coverage-tab.on {
  background: rgba(255,255,255,0.04);
  border-bottom-color: var(--signal-live);
}
.coverage-tab.on::after {
  /* small "active" pip glow above the tab name */
  content: '';
  position: absolute;
  top: 11px; right: 14px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--signal-live);
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.55);
}
.coverage-tab.shrouded .coverage-tab-name { color: var(--mid); }
.coverage-tab.shrouded .coverage-tab-numeral { color: var(--faint); }

.coverage-tab-numeral {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.coverage-tab-meta { display: flex; flex-direction: column; gap: 1px; }
.coverage-tab-name {
  font-size: 0.94rem;
  color: var(--ink);
  letter-spacing: -0.014em;
  font-weight: 400;
  line-height: 1.15;
}
.coverage-tab-sub {
  font-size: 0.58rem;
  letter-spacing: 0.10em;
  color: var(--muted);
  text-transform: lowercase;
}
.coverage-tab-count {
  margin-top: 2px;
  font-size: 0.66rem;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.coverage-tab-count-walk  { color: var(--ink); }
.coverage-tab-count-div   { color: var(--muted); padding: 0 2px; font-weight: 300; }
.coverage-tab-count-tot   { color: var(--mid); }
.coverage-tab-count-fire  { color: var(--signal-warn); margin-left: 4px; }

/* ── Dendrogram section ─────────────────────────────────────────── */

.coverage-dendro-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.coverage-treeblock {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background:
    /* a faint diagonal grid that reads as "drafting paper" — subtle
       enough to disappear at first glance, present enough to ground
       the schematic */
    repeating-linear-gradient(
      45deg,
      transparent 0 22px,
      rgba(255,255,255,0.012) 22px 23px
    ),
    linear-gradient(180deg, rgba(255,255,255,0.012) 0%, transparent 60%),
    rgba(10, 10, 18, 0.55);
  overflow: hidden;
}
.coverage-treeblock.shrouded {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 22px,
      rgba(255,255,255,0.005) 22px 23px
    ),
    rgba(10, 10, 18, 0.40);
}
.coverage-treeblock.shrouded .coverage-treeblock-title { color: var(--mid); }

.coverage-treeblock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--hair);
}
.coverage-treeblock-titlewrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.coverage-treeblock-title {
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: -0.016em;
  font-weight: 400;
  line-height: 1.18;
}
.coverage-treeblock-id {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.coverage-treeblock-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.66rem;
  color: var(--mid);
  letter-spacing: 0.04em;
}
.coverage-treeblock-channels { color: var(--muted); }
.coverage-treeblock-state {
  padding: 3px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 0.58rem;
}
.coverage-treeblock-state.on  { color: var(--signal-live); background: var(--signal-live-bg); border-color: var(--signal-live-bd); }
.coverage-treeblock-state.off { color: var(--mid);          background: rgba(255,255,255,0.025); }

.coverage-treeblock-empty {
  padding: 30px 22px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--mid);
  letter-spacing: -0.01em;
}

/* ── Toolbar: zoom + pan controls ───────────────────────────────── */

.coverage-dendro-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.coverage-dendro-zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  font-size: 0.85rem;
  color: var(--soft);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair);
  border-radius: 4px;
  cursor: pointer;
  transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease);
}
.coverage-dendro-zoom:hover { color: var(--ink); border-color: var(--accent-faint); background: rgba(255,255,255,0.06); }
.coverage-dendro-zoom.coverage-dendro-fit {
  width: auto;
  padding: 0 9px;
  font-size: 0.6rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.coverage-dendro-zoomlevel {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--mid);
  min-width: 36px;
  text-align: center;
  letter-spacing: 0.02em;
}
.coverage-dendro-hint {
  margin-left: auto;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Dendrogram canvas + viewport ────────────────────────────────── */

.coverage-dendro-channel {
  padding: 10px 22px 0;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.coverage-dendro-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
  cursor: grab;
}
.coverage-dendro-viewport.panning { cursor: grabbing; }
.coverage-dendro-canvas {
  position: relative;
  will-change: transform;
}

/* ── SVG layer: connectors + branch labels ───────────────────────── */

.coverage-dendro-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.coverage-dendro-trunk {
  fill: none;
  stroke: rgba(110, 231, 183, 0.55);
  stroke-width: 1.25;
  stroke-linecap: round;
}
.coverage-dendro-trunk.shrouded { stroke: var(--faint); }

.coverage-dendro-edge {
  fill: none;
  stroke-width: 1;
  stroke: rgba(110, 231, 183, 0.30);
  transition: stroke .18s var(--ease);
}
.coverage-dendro-edge.branch-no {
  stroke: rgba(255, 255, 255, 0.14);
}
.coverage-dendro-edge.shrouded {
  stroke: var(--faint);
  stroke-dasharray: 2 3;
}

.coverage-dendro-branchlabel {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  fill: var(--mid);
  pointer-events: none;
  user-select: none;
}
.coverage-dendro-branchlabel.branch-yes { fill: rgba(110, 231, 183, 0.80); }
.coverage-dendro-branchlabel.branch-no  { fill: var(--muted); }
.coverage-dendro-branchlabel.shrouded   { fill: var(--faint); }

/* ── Decision nodes — weightless serif annotations ──────────────── */

.coverage-dendro-decision {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 200px;
  padding: 4px 8px;
  background: rgba(10, 10, 18, 0.85);
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  text-align: left;
  transition: background .14s var(--ease);
}
.coverage-dendro-decision:hover { background: rgba(255,255,255,0.05); }
.coverage-dendro-decision-q {
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--soft);
  letter-spacing: -0.006em;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.coverage-treeblock.shrouded .coverage-dendro-decision-q { color: var(--muted); }
.coverage-dendro-decision-hub {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  flex-shrink: 0;
}
.coverage-dendro-decision:hover .coverage-dendro-decision-hub { background: var(--ink); }

/* ── Leaf chips — lapidary, state via left edge only ────────────── */

.coverage-dendro-leaf {
  position: absolute;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  height: 50px;
  padding: 8px 12px 9px 14px;
  text-align: left;
  background: rgba(10, 10, 18, 0.78);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--hair);
  border-radius: 4px;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .12s var(--ease);
  font-family: var(--sans);
}
.coverage-dendro-leaf:hover {
  background: rgba(255,255,255,0.045);
  border-color: var(--accent-faint);
  transform: translateY(-1px);
}
.coverage-dendro-leaf.walkable        { border-left-color: rgba(110, 231, 183, 0.65); }
.coverage-dendro-leaf.walkable:hover  { border-left-color: var(--signal-live); }
.coverage-dendro-leaf.shrouded {
  border-left-style: dashed;
  border-left-color: var(--faint);
  background: rgba(10, 10, 18, 0.55);
  opacity: 0.74;
}
.coverage-dendro-leaf.shrouded .coverage-dendro-leaf-label { color: var(--mid); }
.coverage-dendro-leaf.shrouded .coverage-dendro-leaf-sig   { color: var(--faint); }
.coverage-dendro-leaf.shrouded:hover { opacity: 0.94; border-left-color: var(--accent-faint); }
.coverage-dendro-leaf.fired        { border-left-color: rgba(252, 211, 77, 0.80); }
.coverage-dendro-leaf.fired:hover  { border-left-color: var(--signal-warn); }
/* Exit leaves — diagnostic walk terminated with "no escalation needed".
   Cool-tone slate edge distinguishes them from actionable causes. */
.coverage-dendro-leaf.exit         { border-left-color: rgba(165, 180, 252, 0.55); }
.coverage-dendro-leaf.exit:hover   { border-left-color: var(--signal-cool); }
.coverage-dendro-leaf.exit.shrouded { border-left-color: var(--faint); }
.coverage-dendro-leaf-tag {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: rgba(165, 180, 252, 0.85);
  text-transform: uppercase;
}
.coverage-dendro-leaf.shrouded .coverage-dendro-leaf-tag { color: var(--faint); }
.coverage-dendro-leaf-pip {
  position: absolute;
  top: 10px; left: -3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--signal-warn);
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.65);
  pointer-events: none;
}
.coverage-dendro-leaf-label {
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.004em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.coverage-dendro-leaf-sig {
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}
.coverage-dendro-leaf-sig.dim { color: var(--faint); }

/* ── Side-panel branch counts (decision detail) ─────────────────── */

.coverage-panel-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.coverage-panel-branch {
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.coverage-panel-branch.yes { border-left: 2px solid rgba(110, 231, 183, 0.65); }
.coverage-panel-branch.no  { border-left: 2px solid rgba(255,255,255,0.20); }
.coverage-panel-branch > .mono {
  font-size: 0.58rem;
  letter-spacing: 0.10em;
  color: var(--mid);
  margin-bottom: 4px;
}
.coverage-panel-branch-count {
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.008em;
}

/* ── Responsive collapse ────────────────────────────────────────── */

@media (max-width: 1480px) {
  .coverage-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coverage-tab:nth-child(4) { border-right: 0; }
  .coverage-tab:nth-child(n+5) { border-top: 1px solid var(--hair); }
}
@media (max-width: 1100px) {
  .coverage-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-tab:nth-child(2n) { border-right: 0; }
  .coverage-tab:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 760px) {
  .coverage-tabs { grid-template-columns: 1fr; }
  .coverage-tab { border-right: 0; }
  .coverage-tab:nth-child(n+2) { border-top: 1px solid var(--hair); }
}

/* ================================================================
   Memory view — M22 bias-loop operator surface
   ================================================================ */
.mem-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin-top: 12px;
  align-items: stretch;
  min-height: 60vh;
}
@media (max-width: 980px) {
  .mem-layout { grid-template-columns: 1fr; }
}

/* ── Client rail ───────────────────────────────────────────────── */
.mem-rail {
  border-radius: 12px;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mem-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--hair);
}
.mem-rail-count { color: var(--muted); font-size: 0.78rem; }
.mem-rail-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  padding: 6px;
}
.mem-client {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: inherit;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.mem-client:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--hair);
}
.mem-client.on {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent-faint);
}
.mem-client.off { opacity: 0.65; }
.mem-client-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mem-client-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-client-status {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.mem-client-status.ok  { color: var(--signal-live); background: rgba(110, 231, 183, 0.12); }
.mem-client-status.off { color: var(--muted);       background: rgba(255, 255, 255, 0.04); }
.mem-client-meta {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--soft);
}
.mem-client-meta .muted { color: var(--muted); }

/* ── Detail pane ──────────────────────────────────────────────── */
.mem-detail {
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.mem-detail.mem-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mem-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.mem-detail-title {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.mem-detail-actions { flex-shrink: 0; }

.mem-card {
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mem-card-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: baseline;
}
.mem-card-key { font-size: 0.65rem; }
.mem-card-val { font-size: 0.82rem; color: var(--ink); word-break: break-all; }
.mem-card-val.ok  { color: var(--signal-live); }
.mem-card-val.off { color: var(--muted); }

.mem-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mem-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 4px;
}
.mem-section-head .kicker { font-size: 0.7rem; }
.mem-section-head .fx-icon { color: var(--soft); }
.mem-section-head .muted { margin-left: auto; font-size: 0.7rem; }

.mem-dreams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mem-dream-row {
  display: grid;
  grid-template-columns: 120px 110px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}
.mem-dream-row.ok      { border-left: 2px solid var(--signal-live); }
.mem-dream-row.off     { border-left: 2px solid var(--signal-high); opacity: 0.8; }
.mem-dream-row.pending { border-left: 2px solid var(--signal-warn); }
.mem-dream-status { font-size: 0.72rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.mem-dream-sessions { font-size: 0.74rem; color: var(--soft); }
.mem-dream-when { font-size: 0.7rem; }
.mem-dream-err { font-size: 0.7rem; color: var(--signal-high); }

.mem-playbooks-split {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.4fr;
  gap: 12px;
  align-items: stretch;
  min-height: 280px;
}
@media (max-width: 1100px) {
  .mem-playbooks-split { grid-template-columns: 1fr; }
}
.mem-playbooks-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  max-height: 420px;
  overflow-y: auto;
}
.mem-playbooks-list.empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 0.78rem;
}
.mem-playbook-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: inherit;
  text-align: left;
  transition: background .12s var(--ease);
}
.mem-playbook-row:hover { background: rgba(255, 255, 255, 0.04); }
.mem-playbook-row.on {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent-faint);
}
.mem-playbook-name {
  font-size: 0.82rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-playbook-size, .mem-playbook-time { font-size: 0.66rem; }

.mem-playbook-preview {
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mem-playbook-preview.empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  font-size: 0.78rem;
}
.mem-playbook-preview.empty.off { color: var(--signal-high); }
.mem-playbook-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
  flex-shrink: 0;
}
.mem-playbook-preview-title {
  font-size: 0.78rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-playbook-preview-body {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--mono);
  white-space: pre-wrap;
  overflow-y: auto;
  max-height: 380px;
}

/* ================================================================
   Agentic stream layout — phase cards, tool rows, awaiting state
   ================================================================ */

/* Stream container in agentic mode — drops the dense flat list and
   stacks phase cards instead. Each phase is a collapsible activity
   card with an icon, descriptor title, tool count, and an inline body. */
.rd-stream.agentic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
  font-size: 13px;
  line-height: 1.6;
  background: transparent;
}

/* Phase card — a <details> with a <summary> head. Native disclosure
   widget so keyboard users get free expand/collapse. The bare details
   marker is hidden in favour of our own chevron. */
.stream-phase {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
  transition: border-color .15s var(--ease), background .15s var(--ease);
  /* Stream container is a flex column with a max-height — without
     flex-shrink:0 the other phases get squeezed when one expands,
     crushing their heads to a thin sliver. Keep natural height on
     every phase; the parent's overflow-y:auto handles the overflow. */
  flex-shrink: 0;
}
.stream-phase[open] {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.14);
}
.stream-phase summary::-webkit-details-marker { display: none; }
.stream-phase summary { list-style: none; }

.stream-phase-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--soft);
  transition: color .12s var(--ease), background .12s var(--ease);
}
.stream-phase-head.static { cursor: default; }
.stream-phase-head:hover { color: var(--ink); background: rgba(255, 255, 255, 0.02); }
.stream-phase[open] > .stream-phase-head { color: var(--ink); }

.stream-phase-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hair);
  color: var(--soft);
  flex-shrink: 0;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.stream-phase[open] .stream-phase-mark,
.stream-phase-head:hover .stream-phase-mark {
  color: var(--ink);
  border-color: var(--accent-faint);
}

.stream-phase-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stream-phase-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hair);
}

.stream-phase-chev {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .18s var(--ease);
}
.stream-phase[open] > .stream-phase-head .stream-phase-chev {
  transform: rotate(-90deg);
}

.stream-phase-body {
  padding: 6px 14px 14px 50px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* Live phase — the one currently producing events when the run is
   still running. Marks get a soft pulse so the eye lands there. */
@keyframes stream-phase-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.18); }
}
.stream-phase.live > .stream-phase-head .stream-phase-mark {
  color: var(--signal-live);
  border-color: rgba(110, 231, 183, 0.45);
  background: rgba(110, 231, 183, 0.12);
  animation: stream-phase-pulse 1.6s ease-in-out infinite;
}

/* Grader phase — green when satisfied, amber when changes requested.
   The grader-pass / grader-fail body classes also carry tone. */
.stream-phase.grader > .stream-phase-head .stream-phase-mark {
  color: var(--signal-live);
  border-color: rgba(110, 231, 183, 0.35);
}

/* Brief / handoff variants — same accordion shell, just a tinted
   border so they read as "operator's brief" vs "dispatched specialist"
   at a glance. Same head structure, same body padding, same chevron
   transform — the only difference from a worker-agent phase is the
   accent colour. */
.stream-phase.brief    { border-color: rgba(165, 180, 252, 0.30); }
.stream-phase.handoff  { border-color: rgba(110, 231, 183, 0.24); }

/* Tool rows inside a phase body — read like Claude's "Use Skills 5 >"
   pattern from the reference. Iconified mark on the left, plain-English
   verb in the middle (what the tool DID), raw call sig on the right
   (hover to see the full arguments). */
.stream-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  color: var(--soft);
  font-size: 12px;
  transition: background .12s var(--ease);
}
.stream-tool:hover { background: rgba(255, 255, 255, 0.04); }
.stream-tool-mark {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--soft);
  flex-shrink: 0;
}
/* Tool rows with real artwork (Looker / Slack / Drive / Sheets / …)
   drop the tinted square so the logo sits cleanly on its own. */
.stream-tool-mark .fx-icon-logo {
  background: transparent;
  border: 0;
  opacity: 1;
}
.stream-tool-verb {
  flex-shrink: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 12.5px;
}
.stream-tool-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}
.stream-tool-memory {
  background: rgba(177, 156, 255, 0.06);
  border-color: rgba(177, 156, 255, 0.22);
}
.stream-tool-memory .stream-tool-mark {
  color: rgba(220, 210, 255, 0.95);
  background: rgba(177, 156, 255, 0.15);
}
.stream-tool-memory .stream-tool-verb { color: rgba(220, 210, 255, 0.95); }

/* Thinking blocks — italic + muted to read as inner voice. */
.stream-thinking {
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  padding-left: 10px;
  color: var(--mid);
  font-style: italic;
}
.stream-thinking-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

/* Done / error rows inside a phase body. */
.stream-done,
.stream-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.stream-done  { color: var(--signal-live); }
.stream-error { color: var(--signal-high); }

/* Awaiting state — replaces "Waiting for events…". Soft pulse + mono
   label so the operator knows the session is reaching out. */
.stream-awaiting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  color: var(--muted);
}
.stream-awaiting-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-live);
  box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.4);
  animation: stream-awaiting-pulse 1.6s ease-in-out infinite;
}
@keyframes stream-awaiting-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(110, 231, 183, 0.4); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(110, 231, 183, 0); }
}
.stream-awaiting-text {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Polish-layer status strip on the Memory view. Quiet ok-tone when
   the backlog is zero; amber + a catch-up button when polishing is
   behind so the operator can kick it without leaving the page. */
.mem-polish-strip {
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.78rem;
}
.mem-polish-strip.ok {
  border-color: rgba(110, 231, 183, 0.25);
  background: rgba(110, 231, 183, 0.06);
  color: rgba(110, 231, 183, 0.95);
}
.mem-polish-strip.warn {
  border-color: rgba(245, 194, 103, 0.30);
  background: rgba(245, 194, 103, 0.06);
  color: rgba(245, 194, 103, 0.95);
}
.mem-polish-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.mem-polish-info .mono { color: inherit; }
.mem-polish-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ================================================================
   Overview rollup — pure dashboard layout (5/21 concept).
   Cards roll up counts/state; every CTA links into a dedicated
   page (Watchtower / Workflow / Fleet) instead of acting in place.
   ================================================================ */

/* View head — title + badge row instead of pills */
.ov-head { align-items: flex-end; }
.ov-head-badges { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-family: var(--mono);
  color: var(--soft);
  text-transform: uppercase;
}
.ov-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.ov-badge-risk, .ov-badge-at_risk {
  color: rgba(248, 165, 165, 0.95);
  border-color: rgba(248, 113, 113, 0.30);
  background: rgba(248, 113, 113, 0.06);
}
.ov-badge-risk .ov-badge-dot, .ov-badge-at_risk .ov-badge-dot {
  background: var(--signal-high);
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.55);
}
.ov-badge-watch, .ov-badge-warn {
  color: #f7e4a8;
  border-color: rgba(252, 211, 77, 0.30);
  background: rgba(252, 211, 77, 0.06);
}
.ov-badge-watch .ov-badge-dot, .ov-badge-warn .ov-badge-dot {
  background: var(--signal-warn);
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.55);
}
.ov-badge-ok, .ov-badge-on_track {
  color: rgba(110, 231, 183, 0.95);
  border-color: rgba(110, 231, 183, 0.30);
  background: rgba(110, 231, 183, 0.06);
}
.ov-badge-ok .ov-badge-dot, .ov-badge-on_track .ov-badge-dot {
  background: var(--signal-live);
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.55);
}
.ov-badge-signals {
  color: var(--signal-cool);
  border-color: rgba(165, 180, 252, 0.28);
  background: rgba(165, 180, 252, 0.05);
}
.ov-badge-signals .ov-badge-dot {
  background: var(--signal-cool);
  box-shadow: 0 0 8px rgba(165, 180, 252, 0.55);
}
.ov-badge-neutral .ov-badge-dot { background: var(--muted); }

/* Shared card chrome — flat panel, mono-uppercase title, hairline border */
.ov-card {
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 14px;
}
.ov-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.ov-card-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ov-card-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal-cool);
  box-shadow: 0 0 8px rgba(165, 180, 252, 0.55);
}
.ov-card-sub {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 6px;
}
.ov-link-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--soft);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.ov-link-btn:hover {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--accent-faint);
}

/* Performance snapshot — KPI ticker sits inside the card body */
.ov-snapshot-body { display: flex; }
.ov-snapshot-body > * { flex: 1; min-width: 0; }

/* Two-column row: alerts (left, 1fr) + workflow pipeline (right, 320px) */
.ov-row-rollup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
}
.ov-row-rollup .ov-card { margin-top: 0; display: flex; flex-direction: column; }

/* ── Data Health strip ───────────────────────────────────────────────
   Slim one-row variant of the rollup. DQS chip on the left, source pills
   in the middle, an optional warning on the right. Tier classes drive
   the left-edge accent and chip color (green/amber/red language). */
.ov-dh-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-left: 3px solid var(--hair);
  flex-wrap: wrap;
}
.ov-dh-strip.ov-dh-on_track   { border-left-color: var(--signal-cool, #9ac2a5); }
.ov-dh-strip.ov-dh-watch      { border-left-color: var(--signal-warn, #d4c89a); }
.ov-dh-strip.ov-dh-at_risk    { border-left-color: var(--signal-high, #d48a8a); }
.ov-dh-strip.ov-dh-onboarding { border-left-color: var(--accent-soft); }

.ov-dh-strip-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--bg-elev);
  font-variant-numeric: tabular-nums;
}
.ov-dh-strip-chip-label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}
.ov-dh-strip-chip-value { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.ov-dh-score-on_track  { color: #a8d4b3; border-color: rgba(154, 194, 165, 0.35); background: rgba(154, 194, 165, 0.06); }
.ov-dh-score-watch     { color: #e6d8a4; border-color: rgba(212, 200, 154, 0.4);  background: rgba(212, 200, 154, 0.06); }
.ov-dh-score-at_risk   { color: #e6a6a6; border-color: rgba(212, 138, 138, 0.4);  background: rgba(212, 138, 138, 0.06); }

.ov-dh-strip-sources {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.ov-dh-strip-source {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: 0.78rem;
  cursor: default;
}
.ov-dh-strip-source.on  { background: rgba(154, 194, 165, 0.05); border-color: rgba(154, 194, 165, 0.22); }
.ov-dh-strip-source.off { background: rgba(212, 138, 138, 0.06); border-color: rgba(212, 138, 138, 0.28); }
.ov-dh-strip-mark { font-size: 0.8rem; line-height: 1; }
.ov-dh-strip-source.on  .ov-dh-strip-mark { color: #a8d4b3; }
.ov-dh-strip-source.off .ov-dh-strip-mark { color: #e6a6a6; }
.ov-dh-strip-name { letter-spacing: 0.01em; }

.ov-dh-strip-warn {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #e6a6a6;
  margin-left: auto;
}

/* Neutral sibling of the warn label — shown at full coverage to keep the
   strip honest ("coverage only, not a data-accuracy check") without alarm. */
.ov-dh-strip-note {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-dim, #8a8a8a);
  opacity: 0.75;
  margin-left: auto;
}

/* Alerts rollup card — headline + severity counter grid + CTA */
.ov-headline {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 14px 18px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ov-headline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--signal-high);
}
.ov-headline-quiet::before { background: var(--signal-live); }
.ov-headline-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ov-headline-sep { color: var(--faint); }
.ov-headline-tag { color: var(--signal-high); }
.ov-headline-quiet .ov-headline-tag { color: var(--signal-live); }
.ov-headline-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ov-headline-sub {
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--soft);
  line-height: 1.5;
  max-width: 64ch;
}

/* Severity counter sub-cards (HIGH / MEDIUM / LOW) */
.ov-sev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.ov-sev-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 6px;
  overflow: hidden;
  cursor: default;
}
.ov-sev-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
}
.ov-sev-high::before   { background: var(--signal-high); }
.ov-sev-medium::before { background: var(--signal-warn); }
.ov-sev-low::before    { background: var(--muted); }
.ov-sev-card-head { display: flex; align-items: center; gap: 8px; }
.ov-sev-card-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.ov-sev-high .ov-sev-card-dot {
  background: var(--signal-high);
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.55);
}
.ov-sev-medium .ov-sev-card-dot {
  background: var(--signal-warn);
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.55);
}
.ov-sev-card-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.ov-sev-card-count {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ov-sev-card-sub {
  font-size: 10.5px;
  color: var(--muted);
}

/* CTA — drill into Watchtower */
.ov-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.ov-cta:hover {
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.04);
}
.ov-cta-arrow { color: var(--muted); }
.ov-cta:hover .ov-cta-arrow { color: var(--ink); }

/* Workflow pipeline — 4 vertically-stacked counter cards */
.ov-pipeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ov-pipe-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  overflow: hidden;
  transition: border-color .12s var(--ease), background .12s var(--ease);
  flex: 1;
}
.ov-pipe-card:hover {
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.04);
}
.ov-pipe-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
}
.ov-pipe-queued::before    { background: var(--muted); }
.ov-pipe-running::before   { background: var(--signal-cool); }
.ov-pipe-review::before    { background: var(--signal-warn); }
.ov-pipe-completed::before { background: var(--signal-live); }

.ov-pipe-head {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
  min-width: 0;
}
.ov-pipe-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.ov-pipe-dot-queued    { background: var(--muted); }
.ov-pipe-dot-running   {
  background: var(--signal-cool);
  box-shadow: 0 0 8px rgba(165, 180, 252, 0.55);
  animation: ov-pipe-pulse 1.6s ease-in-out infinite;
}
.ov-pipe-dot-review    {
  background: var(--signal-warn);
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.55);
}
.ov-pipe-dot-completed {
  background: var(--signal-live);
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.55);
}
@keyframes ov-pipe-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.ov-pipe-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.ov-pipe-count {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-left: auto;
}
.ov-pipe-sub { display: none; }   /* horizontal layout hides sub */

/* Fleet rollup — sub-domain tile grid */
.ov-fleet-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.ov-fleet-item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.ov-fleet-item:hover {
  border-color: var(--accent-faint);
  background: rgba(255, 255, 255, 0.04);
}
.ov-fleet-body { flex: 1; min-width: 0; width: 100%; }
.ov-fleet-title {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 500;
}
.ov-fleet-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ov-fleet-caps {
  font-size: 10px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 2px 7px;
}

/* Responsive — collapse to single column on narrower screens */
@media (max-width: 1000px) {
  .ov-row-rollup { grid-template-columns: 1fr; }
  .ov-fleet-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ov-sev-grid   { grid-template-columns: 1fr; }
  .ov-fleet-grid { grid-template-columns: 1fr; }
}