/**
 * simops-shell.css — Zed-flavored four-region layout for SimOps.
 *
 * Regions (CSS Grid):
 *   ┌──────┬─────────────────────────────────┬─────────┐
 *   │ tool │           HEADER                │         │
 *   │      ├─────────────────────────────────┤  RIGHT  │
 *   │ ◎    │                                 │  SHELF  │
 *   │ ⚙    │           WORKBENCH             │         │
 *   │ ⚛    │           (mode)                │ [act|   │
 *   │ ◷    │                                 │  art]   │
 *   │      │                                 │         │
 *   └──────┴─────────────────────────────────┴─────────┘
 *
 * The left tool shelf has icon-only triggers; clicking expands a contextual
 * drawer between the shelf and the workbench. Right shelf has a tab toggle
 * between Activity (live feed) and Artifacts (tabbed structured outputs).
 *
 * Visual language:
 *   - Surfaces: warm off-white (#fafaf7 / #f1eee5), monospace for labels
 *   - Active state: deep green (#1a3833) with mustard accent (#d4a373)
 *   - Borders: 1px hairline #e0dccd
 *   - All transitions: 120ms ease-out (Zed-quick, not fancy)
 */

/* ─── Variables ──────────────────────────────────────────────────── */
:root {
  --so-bg:           #fafaf7;
  --so-bg-alt:       #f1eee5;
  --so-bg-darker:    #ece6d5;
  --so-ink:          #1a1a1a;
  --so-ink-muted:    #5a554a;
  --so-ink-faint:    #9c9482;
  --so-rule:         #e0dccd;
  --so-rule-dark:    #c9c0ad;
  --so-accent:       #1a3833;
  --so-accent-soft:  #2a4a40;
  --so-mustard:      #d4a373;
  --so-cost-agentic: #b04a4a;
  --so-cost-deterministic: #1a6b9a;
  --so-cost-event:   #9c9482;
  --so-good:         #2d8659;
  --so-warn:         #c47a3a;
  --so-bad:          #cc3333;

  --so-shelf-w-collapsed: 44px;
  --so-shelf-w-expanded:  280px;
  --so-right-w:           360px;
  --so-header-h:          48px;
  --so-mono:              'JetBrains Mono', 'SF Mono', 'Menlo', 'Courier New', monospace;
}

/* ─── Reset within the shell (don't touch the rest of kask) ─────── */
#simops-shell, #simops-shell *,
#simops-shell *::before, #simops-shell *::after {
  box-sizing: border-box;
}

#simops-shell {
  position: fixed;
  inset: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--so-ink);
  background: var(--so-bg);
  display: grid;
  grid-template-columns:
    var(--so-shelf-w-collapsed)
    minmax(0, 1fr)
    var(--so-right-w);
  grid-template-rows: var(--so-header-h) minmax(0, 1fr);
  grid-template-areas:
    "shelf header header"
    "shelf workbench right";
  overflow: hidden;
  z-index: 100;
}

/* When tool-shelf drawer is open, shelf column expands */
#simops-shell[data-shelf-open="true"] {
  grid-template-columns:
    calc(var(--so-shelf-w-collapsed) + var(--so-shelf-w-expanded))
    minmax(0, 1fr)
    var(--so-right-w);
}

#simops-shell[data-right-collapsed="true"] {
  grid-template-columns:
    var(--so-shelf-w-collapsed)
    minmax(0, 1fr)
    36px;
}

/* ─── Header ─────────────────────────────────────────────────────── */
#so-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--so-bg-alt);
  border-bottom: 1px solid var(--so-rule);
}

#so-header .so-brand {
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--so-ink);
  font-weight: 700;
  margin-right: 8px;
}

#so-header .so-process-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--so-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

#so-header .so-process-stage {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--so-accent);
  color: var(--so-mustard);
}
#so-header .so-process-stage[data-stage="draft"]       { background: #5a554a; }
#so-header .so-process-stage[data-stage="candidate"]   { background: var(--so-warn); }
#so-header .so-process-stage[data-stage="operational"] { background: var(--so-good); }
#so-header .so-process-stage[data-stage="archived"]    { background: #999; }

/* Twin clock — synthetic vs live observation counts in the header.
   Headline visualisation of the digital-twin learning trajectory.
   See whitepapers/simops-learning-digital-twin.md §6. */
#so-header .so-twin-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 2px 8px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.so-twin-tick {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.so-twin-tick-label {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--so-ink-faint);
}
.so-twin-tick-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-twin-tick-live .so-twin-tick-count   { color: var(--so-good, #6f9a5b); }
.so-twin-tick-synthetic .so-twin-tick-count {
  /* synthetic stays neutral — it's the baseline */
}
.so-twin-divider { color: var(--so-ink-faint); }
.so-twin-phase {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid var(--so-rule);
  margin-left: 4px;
  color: var(--so-ink-faint);
}
.so-twin-clock[data-phase="calibration"] .so-twin-phase {
  color: var(--so-warn);
  border-color: var(--so-warn);
}
.so-twin-clock[data-phase="production"] .so-twin-phase {
  color: var(--so-good, #6f9a5b);
  border-color: var(--so-good, #6f9a5b);
}
.so-twin-clock[data-phase="operational"] .so-twin-phase {
  color: var(--so-accent);
  border-color: var(--so-accent);
  font-weight: 600;
}

#so-header .so-spacer { flex: 1; }

#so-header .so-budget {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--so-ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
#so-header .so-budget-cost-agentic { color: var(--so-cost-agentic); }
#so-header .so-budget-cost-deterministic { color: var(--so-cost-deterministic); }
#so-header .so-budget-cost-event { color: var(--so-cost-event); }

/* Low / empty budget warning states. 'low' uses amber, 'empty' red+pulse —
   same colour vocabulary as the health pip so the user reads them as a
   single signal. */
#so-header .so-budget[data-warn="low"]   { border-color: #ffb300; color: #b07500; }
#so-header .so-budget[data-warn="empty"] { border-color: #e53935; color: #b71c1c;
  animation: so-health-pulse 1.5s ease-in-out infinite; }

/* ─── Backend health pip ─────────────────────────────────────────────
   Sits next to the budget readout. The coloured dot is the only thing
   the user normally sees; on degraded states a short status word also
   appears. Click to copy diagnostics to clipboard. */
#so-header .so-health {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--so-ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
#so-header .so-health .so-health-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #999;
  flex-shrink: 0;
}
#so-header .so-health[data-state="ok"]      .so-health-pip { background: #4caf50; }
#so-header .so-health[data-state="slow"]    .so-health-pip { background: #ffb300; }
#so-header .so-health[data-state="retry"]   .so-health-pip { background: #ff9800;
  animation: so-health-pulse 1s ease-in-out infinite; }
#so-header .so-health[data-state="down"]    .so-health-pip { background: #e53935;
  animation: so-health-pulse 1s ease-in-out infinite; }
#so-header .so-health[data-state="unauth"]    .so-health-pip { background: #ab47bc; }
#so-header .so-health[data-state="no_credits"] .so-health-pip { background: #ff5722;
  animation: so-health-pulse 1s ease-in-out infinite; }
#so-header .so-health[data-state="unknown"]   .so-health-pip { background: #999; }

/* Hide the label in the most common 'ok' state to keep the header
   uncluttered. Show it for everything else where the user needs to
   notice something. */
#so-header .so-health[data-state="ok"]   .so-health-label,
#so-header .so-health[data-state="unknown"] .so-health-label {
  display: none;
}

@keyframes so-health-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ─── Tool shelf (left, narrow icon column) ──────────────────────── */
#so-shelf {
  grid-area: shelf;
  display: flex;
  background: var(--so-bg-alt);
  border-right: 1px solid var(--so-rule);
  overflow: hidden;
}

#so-shelf-icons {
  width: var(--so-shelf-w-collapsed);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 2px;
  background: var(--so-bg-darker);
  border-right: 1px solid var(--so-rule);
}

.so-shelf-icon {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--so-ink-faint);
  font-size: 16px;
  cursor: pointer;
  transition: color 120ms ease-out, background 120ms ease-out;
  position: relative;
}
.so-shelf-icon:hover { color: var(--so-ink); background: var(--so-bg); }
.so-shelf-icon[data-active="true"] {
  color: var(--so-mustard);
  background: var(--so-accent);
}
.so-shelf-icon .so-shelf-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--so-mustard);
  color: var(--so-accent);
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 6px;
  min-width: 14px;
  text-align: center;
}

#so-shelf-drawer {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--so-bg-alt);
}
#simops-shell[data-shelf-open="true"] #so-shelf-drawer { display: flex; }

.so-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  border-bottom: 1px solid var(--so-rule);
}
.so-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* ─── Workbench (center) ────────────────────────────────────────── */
#so-workbench {
  grid-area: workbench;
  display: flex;
  flex-direction: column;
  background: var(--so-bg);
  overflow: hidden;
}

#so-mode-tabs {
  display: flex;
  gap: 0;
  background: var(--so-bg-alt);
  border-bottom: 1px solid var(--so-rule);
  padding: 0 12px;
  flex-shrink: 0;
}
.so-mode-tab {
  padding: 10px 18px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.so-mode-tab:hover { color: var(--so-ink); }
.so-mode-tab[data-active="true"] {
  color: var(--so-accent);
  border-bottom-color: var(--so-mustard);
}
.so-mode-tab[data-stub="true"] {
  color: var(--so-ink-faint);
  cursor: not-allowed;
  opacity: 0.55;
}
.so-mode-tab[data-stub="true"]::after {
  content: 'soon';
  margin-left: 6px;
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--so-mustard);
}

#so-mode-mount {
  flex: 1;
  overflow: auto;
  padding: 0;
  background: var(--so-bg);
}

/* ─── Right shelf ───────────────────────────────────────────────── */
#so-right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  background: var(--so-bg-alt);
  border-left: 1px solid var(--so-rule);
  overflow: hidden;
}
#so-right-tabs {
  display: flex;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
  padding-right: 8px;
}
.so-right-tab {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}
.so-right-tab[data-active="true"] {
  color: var(--so-accent);
  border-bottom-color: var(--so-mustard);
  background: var(--so-bg-alt);
}
#so-right-collapse-btn {
  width: 32px;
  background: transparent;
  border: none;
  color: var(--so-ink-faint);
  cursor: pointer;
  font-size: 14px;
}
#so-right-collapse-btn:hover { color: var(--so-ink); }

#so-right-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#simops-shell[data-right-collapsed="true"] #so-right {
  width: 36px;
}
#simops-shell[data-right-collapsed="true"] #so-right-tabs > .so-right-tab,
#simops-shell[data-right-collapsed="true"] #so-right-body {
  display: none;
}

/* ─── Library list (in shelf drawer) ────────────────────────────── */
.so-library-group {
  padding: 12px 14px 4px;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.so-library-group .so-library-count {
  font-weight: 700;
  color: var(--so-ink-muted);
}
.so-library-item {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.so-library-item:hover { background: var(--so-bg); }
.so-library-item[data-active="true"] {
  background: var(--so-bg);
  border-left-color: var(--so-mustard);
}
.so-library-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-library-item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  align-self: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--so-ink-faint);
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 120ms ease-out, color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
  font-family: inherit;
}
.so-library-item:hover .so-library-item-action { opacity: 0.7; }
.so-library-item-action:hover {
  opacity: 1 !important;
  color: var(--so-bad);
  border-color: var(--so-rule-dark);
  background: var(--so-bg);
}
.so-library-item-action[data-lib-action="restore"]:hover {
  color: var(--so-good);
}
.so-library-item .so-library-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--so-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-library-item .so-library-item-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
}

.so-new-process-btn {
  margin: 12px 14px;
  padding: 10px 12px;
  background: var(--so-accent);
  color: var(--so-mustard);
  border: 1px solid var(--so-accent);
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 28px);
  transition: background 120ms ease-out;
}
.so-new-process-btn:hover { background: var(--so-accent-soft); }
.so-new-process-btn .so-new-icon { font-size: 14px; }

/* ─── Library danger zone (wipe affordance) ──────────────────────
   Discreet by default — visually separated from the per-row archive
   actions so it doesn't read as "another archive button". Only shown
   when there are workspaces to wipe. */
.so-library-danger {
  margin-top: 24px;
  padding: 12px 14px;
  border-top: 1px solid var(--so-rule);
}
.so-library-danger-btn {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  background: transparent;
  color: var(--so-ink-faint);
  border: 1px dashed var(--so-rule-dark);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.so-library-danger-btn:hover {
  color: var(--so-bad);
  border-color: var(--so-bad);
  background: rgba(229, 57, 53, 0.05);
}
.so-library-danger-note {
  margin-top: 6px;
  color: var(--so-ink-faint);
  font-size: 10px;
  line-height: 1.5;
}

/* ─── Wipe-all modal (type-to-confirm) ────────────────────────────
   Lives at body root, not inside the drawer, so it's centered on the
   viewport and dim-overlays the rest of kask. The high-friction shape
   (typed confirmation, two-action footer, status line) is deliberate —
   this action is irreversible. */
.so-wipe-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: so-wipe-fade-in 120ms ease-out;
}
@keyframes so-wipe-fade-in { from { opacity: 0; } to { opacity: 1; } }

.so-wipe-modal {
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-radius: 4px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  font-family: var(--so-sans, system-ui, sans-serif);
}
.so-wipe-title {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--so-bad);
  border-bottom: 1px solid var(--so-rule);
  letter-spacing: 0.3px;
}
.so-wipe-body { padding: 16px 18px; font-size: 12px; line-height: 1.55; color: var(--so-ink); }
.so-wipe-body p { margin: 0 0 12px; }
.so-wipe-body p:last-of-type { margin-bottom: 16px; }
.so-wipe-body code {
  font-family: var(--so-mono);
  background: var(--so-bg-darker);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 11px;
}

.so-wipe-label {
  display: block;
  font-size: 11px;
  color: var(--so-ink-muted);
  margin-bottom: 8px;
}
.so-wipe-label input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px 9px;
  font-family: var(--so-mono);
  font-size: 13px;
  letter-spacing: 1px;
  background: var(--so-bg-darker);
  color: var(--so-ink);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  outline: none;
  box-sizing: border-box;
}
.so-wipe-label input:focus { border-color: var(--so-accent); }

.so-wipe-status {
  margin-top: 12px;
  min-height: 18px;
  font-size: 11px;
  font-family: var(--so-mono);
}
.so-wipe-status-ok    { color: var(--so-good); }
.so-wipe-status-err   { color: var(--so-bad); }
.so-wipe-status-mixed { color: #c47b00; }

.so-wipe-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--so-rule);
}
.so-wipe-cancel,
.so-wipe-confirm {
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg-darker);
  color: var(--so-ink);
}
.so-wipe-cancel:hover { background: var(--so-bg); }
.so-wipe-confirm {
  border-color: var(--so-bad);
  background: var(--so-bad);
  color: white;
}
.so-wipe-confirm:hover:not(:disabled) { background: #c62828; border-color: #c62828; }
.so-wipe-confirm:disabled {
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
  border-color: var(--so-rule);
  cursor: not-allowed;
}

/* ─── Empty state ───────────────────────────────────────────────── */
.so-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  gap: 16px;
  color: var(--so-ink-muted);
}
.so-empty-state h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--so-ink);
  margin: 0;
}
.so-empty-state p {
  max-width: 480px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--so-ink-muted);
}
.so-empty-state button {
  padding: 12px 24px;
  background: var(--so-accent);
  color: var(--so-mustard);
  border: 1px solid var(--so-accent);
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.so-empty-state button:hover { background: var(--so-accent-soft); }

/* ─── Activity feed (right shelf) ───────────────────────────────── */
.so-activity-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-alt);
}
.so-activity-search input {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  color: var(--so-ink);
  outline: none;
}
.so-activity-search input:focus { border-color: var(--so-accent); }
.so-activity-feed {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.so-activity-event {
  display: flex;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--so-rule);
  font-size: 12px;
  line-height: 1.45;
}
.so-activity-event:hover { background: var(--so-bg); }
.so-activity-event-marker {
  font-size: 10px;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.so-activity-event[data-cost="agentic"] .so-activity-event-marker { color: var(--so-cost-agentic); }
.so-activity-event[data-cost="deterministic"] .so-activity-event-marker { color: var(--so-cost-deterministic); }
.so-activity-event[data-cost="event_append"] .so-activity-event-marker { color: var(--so-cost-event); }
.so-activity-event[data-cost="system_read"] .so-activity-event-marker { color: var(--so-cost-event); }

/* Visually de-emphasise low-value bookkeeping events (mode switches, etc.)
   without hiding them entirely — they're still searchable. */
.so-activity-event[data-kind="mode.switched"] { opacity: 0.55; }
.so-activity-event[data-kind="mode.switched"]:hover { opacity: 1; }

/* Failures stand out — red marker + red kind tag */
.so-activity-event[data-kind="agent.failed"],
.so-activity-event[data-kind="cascade.failed"] {
  background: rgba(204, 51, 51, 0.04);
}
.so-activity-event[data-kind="agent.failed"] .so-activity-event-marker,
.so-activity-event[data-kind="cascade.failed"] .so-activity-event-marker {
  color: var(--so-bad) !important;
}
.so-activity-event[data-kind="agent.failed"] .so-activity-event-content,
.so-activity-event[data-kind="cascade.failed"] .so-activity-event-content {
  color: var(--so-bad);
}
.so-activity-event[data-kind="agent.failed"] .so-activity-event-kind,
.so-activity-event[data-kind="cascade.failed"] .so-activity-event-kind {
  color: var(--so-bad);
  font-weight: 700;
}
.so-activity-event-body { flex: 1; min-width: 0; }
.so-activity-event-content {
  color: var(--so-ink);
  overflow-wrap: break-word;
}
.so-activity-event-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
  margin-top: 2px;
  display: flex;
  gap: 8px;
}
.so-activity-event-meta .so-activity-event-kind {
  color: var(--so-ink-muted);
}

/* ─── Artifacts dock (right shelf alt) ──────────────────────────── */
.so-artifacts-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-alt);
  overflow-x: auto;
  flex-shrink: 0;
}
.so-artifacts-tab {
  padding: 6px 10px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  white-space: nowrap;
}
.so-artifacts-tab[data-active="true"] {
  color: var(--so-accent);
  background: var(--so-bg);
  border-color: var(--so-rule);
}
.so-artifacts-tab .so-artifacts-tab-count {
  margin-left: 4px;
  font-weight: 700;
  color: var(--so-ink-muted);
}
.so-artifacts-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}
.so-artifacts-empty {
  padding: 24px 0;
  text-align: center;
  font-size: 12px;
  color: var(--so-ink-faint);
}

/* ─── Insights drawer ───────────────────────────────────────────── */
.so-insights-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  background: var(--so-bg-darker);
  border-bottom: 1px solid var(--so-rule);
  overflow-x: auto;
}
.so-insights-tab {
  padding: 6px 10px;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  white-space: nowrap;
}
.so-insights-tab[data-active="true"] {
  color: var(--so-accent);
  background: var(--so-bg-alt);
  border-color: var(--so-rule);
}
.so-insights-tab-count {
  margin-left: 4px;
  font-weight: 700;
  color: var(--so-ink-muted);
}
.so-insights-list {
  overflow-y: auto;
  padding: 4px 0;
}
.so-insights-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--so-ink-faint);
}
.so-insight-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--so-rule);
}
.so-insight-item:hover { background: var(--so-bg); }
.so-insight-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.so-insight-kind {
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  flex-shrink: 0;
}
.so-insight-kind-opportunity { background: var(--so-good); color: #fff; }
.so-insight-kind-risk        { background: var(--so-warn); color: #fff; }
.so-insight-kind-insight     { background: var(--so-cost-deterministic); color: #fff; }
.so-insight-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
  line-height: 1.35;
}
.so-insight-body {
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink-muted);
  margin: 4px 0;
}
.so-insight-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.so-insight-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.so-insight-action {
  padding: 4px 10px;
  font-family: var(--so-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  color: var(--so-ink-muted);
  cursor: pointer;
  border-radius: 2px;
  transition: all 120ms ease-out;
}
.so-insight-action:hover { color: var(--so-ink); border-color: var(--so-ink-muted); }
.so-insight-accept:hover { background: var(--so-good); color: #fff; border-color: var(--so-good); }
.so-insight-reject:hover { background: var(--so-bad);  color: #fff; border-color: var(--so-bad); }
.so-insight-snooze:hover { background: var(--so-ink-faint); color: #fff; border-color: var(--so-ink-faint); }

/* ─── Mode-mount inline content sane defaults ──────────────────── */
#so-mode-mount > * { max-width: 100%; }
#so-mode-mount iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ─── Compose mode ──────────────────────────────────────────────── */
.so-compose-root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px 20px 32px;
  gap: 16px;
}
.so-compose-header { display: flex; flex-direction: column; gap: 8px; }
.so-c-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.so-c-process-name {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--so-ink);
  outline: none;
  font-family: inherit;
}
.so-c-process-name:focus {
  border-color: var(--so-rule-dark);
  background: var(--so-bg-alt);
}
.so-c-process-description {
  width: 100%;
  font-size: 12px;
  color: var(--so-ink-muted);
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  outline: none;
  font-family: inherit;
}
.so-c-process-description:focus {
  border-color: var(--so-rule-dark);
  background: var(--so-bg-alt);
}
.so-c-dirty {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}
.so-c-dirty[data-dirty="true"]  { color: var(--so-warn); background: rgba(196, 122, 58, 0.1); }
.so-c-dirty[data-dirty="false"] { color: var(--so-good); }

/* Buttons */
.so-c-btn {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 14px;
  background: transparent;
  color: var(--so-ink-muted);
  border: 1px solid var(--so-rule-dark);
  cursor: pointer;
  border-radius: 2px;
  transition: all 120ms ease-out;
}
.so-c-btn:hover { color: var(--so-ink); border-color: var(--so-ink-muted); }
.so-c-btn-primary {
  background: var(--so-accent);
  color: var(--so-mustard);
  border-color: var(--so-accent);
}
.so-c-btn-primary:hover {
  background: var(--so-accent-soft);
  border-color: var(--so-accent-soft);
  color: var(--so-mustard);
}
.so-c-btn-primary:disabled,
.so-c-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.so-c-btn-mini, .so-c-btn-icon {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  background: transparent;
  color: var(--so-ink-muted);
  border: 1px solid var(--so-rule-dark);
  cursor: pointer;
  border-radius: 2px;
  transition: all 120ms ease-out;
}
.so-c-btn-mini:hover, .so-c-btn-icon:hover { color: var(--so-ink); border-color: var(--so-ink-muted); }
.so-c-btn-mini:disabled { opacity: 0.35; cursor: not-allowed; }
.so-c-btn-icon { font-size: 14px; padding: 2px 10px; }
.so-c-btn-danger:hover {
  color: #fff;
  background: var(--so-bad);
  border-color: var(--so-bad);
}

/* KPI strip */
.so-compose-kpi {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
}
.so-c-kpi-tile {
  flex: 1;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-c-kpi-label {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}
.so-c-kpi-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--so-ink);
  font-family: var(--so-mono);
}
.so-c-kpi-good { color: var(--so-good); }
.so-c-kpi-empty, .so-c-kpi-loading {
  font-size: 11px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 0;
  text-align: center;
  width: 100%;
}

/* Body: stages left, inspector right */
.so-compose-body {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  min-height: 400px;
}
@media (max-width: 1200px) {
  .so-compose-body { grid-template-columns: 1fr; }
}

.so-compose-stages, .so-compose-inspector {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.so-c-stages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  border-bottom: 1px solid var(--so-rule);
}
.so-c-stages-list { padding: 4px 0; }
.so-c-empty-small {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--so-ink-faint);
}

.so-c-stage-card {
  padding: 10px 14px;
  border-bottom: 1px solid var(--so-rule);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 120ms ease-out, border-left-color 120ms ease-out;
}
.so-c-stage-card:hover { background: var(--so-bg); }
.so-c-stage-card[data-active="true"] {
  background: var(--so-bg);
  border-left-color: var(--so-mustard);
}
.so-c-stage-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.so-c-stage-card-idx {
  font-family: var(--so-mono);
  font-size: 9px;
  background: var(--so-bg-darker);
  color: var(--so-ink-muted);
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 700;
}
.so-c-stage-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-c-stage-card-eff {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-good);
  font-weight: 600;
}
.so-c-stage-card-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.3px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.so-c-stage-card-ss, .so-c-stage-card-sen {
  color: var(--so-cost-deterministic);
}
.so-c-stage-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

/* Inspector */
.so-compose-inspector { padding: 0; }
.so-c-inspector-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--so-rule);
}
.so-c-inspector-section:last-child { border-bottom: none; }
.so-c-inspector-section-head {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.so-c-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.so-c-field > span {
  flex: 0 0 160px;
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-c-field > input,
.so-c-field > select {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  color: var(--so-ink);
  outline: none;
}
.so-c-field > input:focus,
.so-c-field > select:focus { border-color: var(--so-accent); }

/* Sidestream / sensor subitems */
.so-c-subitem {
  padding: 8px;
  background: var(--so-bg-darker);
  border-radius: 3px;
  margin-bottom: 6px;
}
.so-c-subitem-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  align-items: center;
}
.so-c-subitem-row:last-child { margin-bottom: 0; }
.so-c-subitem-row > input,
.so-c-subitem-row > select {
  flex: 1;
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--so-rule);
  background: var(--so-bg);
  color: var(--so-ink);
  outline: none;
  min-width: 0;
}
.so-c-subitem-row > input:focus,
.so-c-subitem-row > select:focus { border-color: var(--so-accent); }

/* Sankey */
.so-compose-sankey {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 12px 14px;
}
.so-c-sankey-head {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  margin-bottom: 8px;
}
.so-c-sankey-body svg { max-width: 100%; height: auto; }

.so-c-scenario-badge {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--so-mustard);
  color: var(--so-accent);
  font-weight: 700;
  margin-right: 4px;
}

/* Intake-draft badge: pipeline came from a mid-flight intake interview.
   Same shape as scenario badge but a different colour so the user can
   tell at a glance that this version isn't finalised yet. */
.so-c-draft-badge {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  background: #fde6c8;
  color: #7a4b00;
  font-weight: 700;
  margin-right: 4px;
}

/* ─── BoM table (inspector section) ──────────────────────────────── */
.so-c-bom-total {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-good);
  font-weight: 700;
  margin-left: auto;
  padding: 1px 7px;
  background: rgba(45, 134, 89, 0.10);
  border-radius: 2px;
}
.so-c-bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 6px;
}
.so-c-bom-table th {
  font-family: var(--so-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  text-align: left;
  padding: 4px 4px;
  border-bottom: 1px solid var(--so-rule);
}
.so-c-bom-table td {
  padding: 3px 3px;
  border-bottom: 1px solid var(--so-rule);
  vertical-align: middle;
}
.so-c-bom-table tr:last-child td { border-bottom: none; }
.so-c-bom-table input,
.so-c-bom-table select {
  width: 100%;
  padding: 3px 5px;
  font-family: inherit;
  font-size: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--so-ink);
  outline: none;
}
.so-c-bom-table input:focus,
.so-c-bom-table select:focus {
  border-color: var(--so-rule-dark);
  background: var(--so-bg);
}
.so-c-bom-num { text-align: right; }
.so-c-bom-src {
  font-family: var(--so-mono);
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 700;
}
.so-c-bom-src.src-manual  { background: var(--so-bg-darker); color: var(--so-ink-muted); }
.so-c-bom-src.src-catalog { background: rgba(26, 107, 154, 0.12); color: var(--so-cost-deterministic); }
.so-c-bom-src.src-agent   { background: rgba(212, 163, 115, 0.20); color: var(--so-accent); }
.so-c-bom-line-total {
  font-family: var(--so-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--so-ink);
}
.so-c-bom-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.so-c-btn-agent {
  background: rgba(212, 163, 115, 0.10) !important;
  border-color: var(--so-mustard) !important;
  color: var(--so-accent) !important;
}
.so-c-btn-agent:hover {
  background: var(--so-mustard) !important;
  color: var(--so-accent) !important;
}
.so-c-btn-agent:disabled {
  background: var(--so-bg-darker) !important;
  border-color: var(--so-rule-dark) !important;
  color: var(--so-ink-faint) !important;
}

/* ─── Compose tools (What-If + Narrate) ──────────────────────────── */
.so-compose-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 1100px) { .so-compose-tools { grid-template-columns: 1fr; } }

.so-compose-tool {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  overflow: hidden;
}
.so-c-tool-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-c-tool-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.so-c-tool-tag {
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 5px;
  background: rgba(26, 107, 154, 0.15);
  color: var(--so-cost-deterministic);
  border-radius: 2px;
}
.so-c-tool-tag-agentic {
  background: rgba(176, 74, 74, 0.15);
  color: var(--so-cost-agentic);
}
.so-c-tool-sub {
  font-size: 11px;
  color: var(--so-ink-muted);
  margin-top: 3px;
  line-height: 1.45;
}
.so-c-tool-sub code {
  font-family: var(--so-mono);
  font-size: 10px;
  background: var(--so-bg-darker);
  padding: 1px 4px;
  border-radius: 2px;
  color: var(--so-ink);
}
.so-c-tool-body {
  padding: 12px 14px;
}

.so-c-whatif-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.so-c-whatif-form input {
  flex: 1;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  outline: none;
}
.so-c-whatif-form input:focus { border-color: var(--so-accent); }
.so-c-whatif-result {
  font-size: 12px;
}
.so-c-whatif-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--so-rule);
}
.so-c-whatif-row:last-of-type { border-bottom: none; margin-bottom: 4px; }
.so-c-whatif-label {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}
.so-c-whatif-value {
  font-family: var(--so-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--so-ink);
}
.so-c-whatif-chain {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-c-whatif-step {
  display: flex;
  justify-content: space-between;
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-c-whatif-step-name { color: var(--so-ink); font-weight: 600; }
.so-c-whatif-step-flow { color: var(--so-cost-deterministic); }
.so-c-whatif-running,
.so-c-whatif-error {
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 3px;
}
.so-c-whatif-running {
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.so-c-whatif-error {
  color: var(--so-bad);
  background: rgba(204, 51, 51, 0.08);
}

/* ─── Digital Twin mode ──────────────────────────────────────────── */
.so-twin-root {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 32px;
  gap: 14px;
}
.so-twin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.so-twin-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-twin-sub {
  font-size: 12px;
  color: var(--so-ink-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.so-twin-mode {
  font-family: var(--so-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
}
.so-twin-mode-synthetic       { background: rgba(26, 107, 154, 0.15); color: var(--so-cost-deterministic); }
.so-twin-mode-observation-fed { background: rgba(45, 134, 89, 0.15); color: var(--so-good); }
.so-twin-mode-hybrid          { background: rgba(212, 163, 115, 0.20); color: var(--so-accent); }

.so-twin-timeline {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 12px 16px;
}
.so-twin-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.so-twin-timeline-label {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-right: 6px;
}
.so-twin-timeline-now {
  font-family: var(--so-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--so-accent);
  margin-right: 4px;
}
.so-twin-timeline-of {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-twin-timeline-hours {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  margin-left: 8px;
}
.so-twin-timeline-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.so-twin-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-twin-control select {
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  outline: none;
  font-family: inherit;
}
.so-twin-scrub {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--so-rule);
  border-radius: 3px;
  outline: none;
  margin: 0;
}
.so-twin-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--so-mustard);
  border: 2px solid var(--so-accent);
  border-radius: 50%;
  cursor: pointer;
}
.so-twin-scrub::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--so-mustard);
  border: 2px solid var(--so-accent);
  border-radius: 50%;
  cursor: pointer;
}

.so-twin-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) {
  .so-twin-body { grid-template-columns: 1fr; }
}

.so-twin-stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.so-twin-empty-stages {
  padding: 32px 24px;
  text-align: center;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  color: var(--so-ink-muted);
}
.so-twin-empty-stages button { margin-top: 14px; }

.so-twin-stage {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 12px 14px;
}
.so-twin-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.so-twin-stage-idx {
  font-family: var(--so-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--so-bg-darker);
  color: var(--so-ink-muted);
  padding: 2px 7px;
  border-radius: 2px;
  margin-right: 8px;
}
.so-twin-stage-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-twin-stage-meta {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}

.so-twin-sensors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 900px) { .so-twin-sensors { grid-template-columns: 1fr; } }

.so-twin-sensor {
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 8px 10px;
}
.so-twin-sensor-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  gap: 8px;
}
.so-twin-sensor-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--so-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-twin-sensor-value {
  font-family: var(--so-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--so-accent);
  white-space: nowrap;
}
.so-twin-sensor-unit {
  font-size: 9px;
  font-weight: 400;
  color: var(--so-ink-faint);
}
.so-twin-spark {
  display: block;
  width: 100%;
  height: 50px;
  margin: 4px 0;
}
.so-twin-sensor-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.3px;
}
.so-twin-sensor-measures {
  color: var(--so-cost-deterministic);
}

.so-twin-agents {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: flex-start;
  position: sticky;
  top: 12px;
}
.so-twin-agents-head {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--so-rule);
}
.so-twin-agent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-twin-agent-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.so-twin-agent-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-twin-agent-sub {
  font-size: 10px;
  color: var(--so-ink-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.so-twin-agent-sub code {
  font-family: var(--so-mono);
  font-size: 9px;
  background: var(--so-bg-darker);
  padding: 1px 4px;
  border-radius: 2px;
  color: var(--so-ink);
}
.so-twin-agent-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--so-ink);
  padding: 8px 10px;
  background: var(--so-bg);
  border-left: 3px solid var(--so-mustard);
}
.so-twin-agent-body p { margin: 0 0 6px; }
.so-twin-agent-body p:last-child { margin-bottom: 0; }
.so-twin-agent-body strong { color: var(--so-accent); }

/* ─── Chat mode ──────────────────────────────────────────────────── */
.so-chat-root {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100%;
  background: var(--so-bg);
}
@media (max-width: 900px) {
  .so-chat-root { grid-template-columns: 1fr; }
}

.so-chat-sidebar {
  border-right: 1px solid var(--so-rule);
  background: var(--so-bg-alt);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.so-chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--so-rule);
}
.so-chat-sidebar-label {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
}
.so-chat-session-list {
  overflow-y: auto;
  flex: 1;
}
.so-chat-session-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--so-rule);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.so-chat-session-item:hover { background: var(--so-bg); }
.so-chat-session-item[data-active="true"] {
  background: var(--so-bg);
  border-left-color: var(--so-mustard);
}
.so-chat-session-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--so-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-chat-session-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.so-chat-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.so-chat-pane-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-alt);
}
.so-chat-pane-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--so-ink);
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  outline: none;
  font-family: inherit;
}
.so-chat-pane-title:focus {
  border-color: var(--so-rule-dark);
  background: var(--so-bg);
}
.so-chat-pane-agent {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-muted);
  padding: 3px 7px;
  background: var(--so-bg-darker);
  border-radius: 2px;
  white-space: nowrap;
}

.so-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.so-chat-empty,
.so-chat-empty-conv {
  margin: auto;
  padding: 24px;
  text-align: center;
  color: var(--so-ink-muted);
  max-width: 560px;
}
.so-chat-empty-conv p {
  font-size: 14px;
  color: var(--so-ink);
  margin-bottom: 16px;
}
.so-chat-prompt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 700px) { .so-chat-prompt-grid { grid-template-columns: 1fr; } }
.so-chat-prompt {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 12px;
  color: var(--so-ink);
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.so-chat-prompt:hover {
  border-color: var(--so-mustard);
  background: var(--so-bg);
}

.so-chat-msg {
  padding: 10px 14px;
  border-radius: 4px;
  max-width: 78ch;
}
.so-chat-msg-user {
  align-self: flex-end;
  background: var(--so-accent);
  color: var(--so-mustard);
  border-left: none;
}
.so-chat-msg-user .so-chat-msg-label {
  color: rgba(212, 163, 115, 0.65);
}
.so-chat-msg-user .so-chat-msg-body p { color: var(--so-mustard); }
.so-chat-msg-agent {
  align-self: flex-start;
  background: var(--so-bg-alt);
  border-left: 3px solid var(--so-cost-deterministic);
}
.so-chat-msg-system {
  align-self: center;
  background: transparent;
  border: 1px dashed var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-size: 11px;
  font-style: italic;
}
.so-chat-msg-loading {
  align-self: flex-start;
}
.so-chat-msg-label {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 4px;
}
.so-chat-msg-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-chat-msg-body p { margin: 0 0 8px; }
.so-chat-msg-body p:last-child { margin-bottom: 0; }
.so-chat-msg-body strong { color: var(--so-accent); }
.so-chat-msg-body code {
  font-family: var(--so-mono);
  font-size: 11px;
  background: var(--so-bg-darker);
  padding: 1px 4px;
  border-radius: 2px;
}
.so-chat-msg-cost {
  margin-left: 8px;
  color: var(--so-cost-agentic);
  font-weight: 700;
}

.so-chat-dots {
  display: flex;
  gap: 5px;
  padding: 4px 0;
}
.so-chat-dots span {
  width: 6px; height: 6px;
  background: var(--so-mustard);
  border-radius: 50%;
  animation: so-in-pulse 1.4s ease-in-out infinite;
}
.so-chat-dots span:nth-child(2) { animation-delay: 0.18s; }
.so-chat-dots span:nth-child(3) { animation-delay: 0.36s; }

.so-chat-input-area {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--so-rule);
  background: var(--so-bg-alt);
}
.so-chat-context-disclosure {
  font-size: 11px;
  color: var(--so-ink-faint);
  margin-bottom: 8px;
}
.so-chat-context-toggle {
  cursor: pointer;
  font-family: var(--so-mono);
  letter-spacing: 0.5px;
}
.so-chat-context-toggle:hover { color: var(--so-ink-muted); }
.so-chat-context-body {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  font-family: var(--so-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--so-ink-muted);
  white-space: pre-wrap;
  border-radius: 2px;
  max-height: 200px;
  overflow-y: auto;
}
#so-chat-input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--so-ink);
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-radius: 3px;
  resize: vertical;
  outline: none;
}
#so-chat-input:focus {
  border-color: var(--so-accent);
}
.so-chat-input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}
.so-chat-input-hint {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}

/* ─── Intake mode (native) ──────────────────────────────────────── */
.so-intake-native {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Intro */
.so-in-intro h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--so-ink);
  margin: 0 0 14px;
}
.so-in-intro p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--so-ink-muted);
  margin: 0 0 10px;
  max-width: 620px;
}
.so-in-existing-note {
  margin: 20px 0;
  padding: 12px 14px;
  background: var(--so-bg-alt);
  border-left: 3px solid var(--so-mustard);
  font-size: 13px;
  color: var(--so-ink);
  line-height: 1.55;
}
.so-in-existing-note a {
  color: var(--so-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.so-in-intro-actions {
  margin-top: 22px;
}

/* Progress bar */
.so-in-bar {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 10px 14px;
}
.so-in-bar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.so-in-bar-label {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
}
.so-in-bar-turn {
  font-family: var(--so-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--so-accent);
}
.so-in-bar-credits {
  margin-left: auto;
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-cost-agentic);
}
.so-in-bar-track {
  height: 4px;
  background: var(--so-rule);
  border-radius: 2px;
  overflow: hidden;
}
.so-in-bar-fill {
  height: 100%;
  background: var(--so-mustard);
  transition: width 280ms ease-out;
}

/* Conversation log + current turn */
.so-in-conversation {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.so-in-log-turn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--so-rule);
}
.so-in-log-turn:last-child { border-bottom: none; padding-bottom: 0; }

.so-in-msg {
  padding: 12px 14px;
  border-radius: 4px;
}
.so-in-msg-advisor {
  background: var(--so-bg-alt);
  border-left: 3px solid var(--so-cost-deterministic);
}
.so-in-msg-active {
  border-left-color: var(--so-mustard);
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-left: 3px solid var(--so-mustard);
}
.so-in-msg-user {
  background: transparent;
  border-left: 3px solid var(--so-ink-faint);
  padding-left: 14px;
}
.so-in-msg-label {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 6px;
}
.so-in-msg-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--so-ink);
}
.so-in-msg-insight {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--so-ink-muted);
}
.so-in-msg-insight-label {
  display: inline-block;
  margin-right: 6px;
  font-family: var(--so-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-cost-deterministic);
}
.so-in-msg-question {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--so-ink);
  line-height: 1.5;
}

/* Input area */
.so-in-current {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.so-in-input-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-in-input-area textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--so-ink);
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-radius: 3px;
  resize: vertical;
  outline: none;
}
.so-in-input-area textarea:focus {
  border-color: var(--so-accent);
  background: var(--so-bg-alt);
}
.so-in-input-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.so-in-input-hint {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
}

/* Thinking dots */
.so-in-thinking {
  display: flex;
  gap: 6px;
  padding: 6px 0;
}
.so-in-dot {
  width: 6px; height: 6px;
  background: var(--so-mustard);
  border-radius: 50%;
  animation: so-in-pulse 1.4s ease-in-out infinite;
}
.so-in-dot:nth-child(2) { animation-delay: 0.18s; }
.so-in-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes so-in-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: scale(1); }
  30%           { opacity: 1.00; transform: scale(1.3); }
}

/* Inline error banner */
.so-in-error {
  padding: 10px 14px;
  background: rgba(204, 51, 51, 0.08);
  color: var(--so-bad);
  border-left: 3px solid var(--so-bad);
  font-size: 12px;
}

/* Final-turn results */
.so-in-final {
  margin-top: 6px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  overflow: hidden;
}
.so-in-final-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--so-bg-darker);
  border-bottom: 1px solid var(--so-rule);
}
.so-in-final-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--so-ink);
}
.so-in-final-sub {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-muted);
  margin-top: 4px;
}
.so-in-final-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 18px;
}
@media (max-width: 720px) { .so-in-final-grid { grid-template-columns: 1fr; } }
.so-in-final-block-head {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--so-rule);
}
.so-in-opp {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.so-in-opp:last-child { margin-bottom: 0; }
.so-in-opp-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
  margin-bottom: 4px;
  line-height: 1.4;
}
.so-in-opp-body {
  font-size: 11px;
  line-height: 1.55;
  color: var(--so-ink-muted);
}
.so-in-opp-potential {
  margin-top: 4px;
  font-size: 11px;
  color: var(--so-good);
  font-style: italic;
}
.so-in-eff, .so-in-sev {
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
  color: #fff;
}
.so-in-eff-low      { background: var(--so-good); }
.so-in-eff-medium   { background: var(--so-warn); }
.so-in-eff-high     { background: var(--so-bad); }
.so-in-sev-low      { background: var(--so-good); }
.so-in-sev-medium   { background: var(--so-warn); }
.so-in-sev-high     { background: var(--so-bad); }
.so-in-final-foot {
  padding: 12px 18px;
  background: var(--so-bg);
  font-size: 12px;
  color: var(--so-ink-muted);
  line-height: 1.55;
  border-top: 1px solid var(--so-rule);
}
.so-in-final-foot-note strong { color: var(--so-accent); }

/* Narrate output */
.so-c-narrate-body {
  margin-top: 10px;
  padding: 12px;
  background: var(--so-bg);
  border-left: 3px solid var(--so-mustard);
  font-size: 13px;
  line-height: 1.6;
  color: var(--so-ink);
}
.so-c-narrate-body p { margin: 0 0 8px; }
.so-c-narrate-body p:last-child { margin-bottom: 0; }
.so-c-narrate-body strong { color: var(--so-accent); }

/* ─── Scenarios mode ────────────────────────────────────────────── */
.so-scen-root {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 32px;
  gap: 16px;
}
.so-scen-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.so-scen-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-scen-subtitle {
  font-size: 12px;
  color: var(--so-ink-muted);
  margin-top: 4px;
  max-width: 540px;
  line-height: 1.5;
}
.so-scen-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.so-scen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.so-scen-card {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 120ms ease-out, background 120ms ease-out;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.so-scen-card:hover {
  background: var(--so-bg);
  border-color: var(--so-mustard);
}
.so-scen-card[data-baseline="true"] {
  border-color: var(--so-accent);
  background: var(--so-bg-darker);
}
.so-scen-pin {
  color: var(--so-mustard);
  margin-right: 4px;
}
.so-scen-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--so-ink);
  display: flex;
  align-items: center;
}
.so-scen-card-subtitle {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-scen-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.so-scen-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-scen-stat-label {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}
.so-scen-stat-value {
  font-family: var(--so-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--so-ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.so-scen-delta {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
}
.so-scen-delta-up   { color: var(--so-good); background: rgba(45, 134, 89, 0.15); }
.so-scen-delta-down { color: var(--so-bad);  background: rgba(204, 51, 51, 0.15); }
.so-scen-card-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
}
.so-scen-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* ─── Experiments mode ───────────────────────────────────────────── */
.so-exp-root {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 32px;
  gap: 16px;
}
.so-exp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.so-exp-past {
  display: flex;
  align-items: center;
  gap: 8px;
}
.so-exp-past select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  outline: none;
  font-family: inherit;
}
.so-exp-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) {
  .so-exp-setup { grid-template-columns: 1fr; }
}
.so-exp-block {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
}
.so-exp-block-head {
  padding: 10px 14px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  border-bottom: 1px solid var(--so-rule);
}
.so-exp-checklist {
  padding: 6px 0;
  max-height: 280px;
  overflow-y: auto;
}
.so-exp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
}
.so-exp-check:hover { background: var(--so-bg); }
.so-exp-check input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}
.so-exp-check-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--so-ink);
  line-height: 1.35;
}
.so-exp-check-sub {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  margin-top: 2px;
}
.so-exp-runbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  gap: 12px;
  flex-wrap: wrap;
}
.so-exp-runbar-summary {
  font-size: 12px;
  color: var(--so-ink-muted);
}
.so-exp-runbar-summary strong { color: var(--so-ink); font-family: var(--so-mono); }

.so-exp-results {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.so-exp-running {
  padding: 16px 18px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
}
.so-exp-running-label {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-muted);
  margin-bottom: 8px;
}
.so-exp-progress {
  height: 6px;
  background: var(--so-rule);
  border-radius: 3px;
  overflow: hidden;
}
.so-exp-progress-fill {
  height: 100%;
  background: var(--so-cost-deterministic);
  transition: width 200ms ease-out;
}

.so-exp-results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--so-rule);
}
.so-exp-results-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--so-ink);
  font-family: var(--so-mono);
}
.so-exp-results-sub {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-exp-results-actions { display: flex; gap: 8px; }
.so-exp-question-block {
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  overflow: hidden;
}
.so-exp-question-head {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--so-ink);
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-exp-unit {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
  margin-left: 6px;
}
.so-exp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.so-exp-table th, .so-exp-table td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--so-rule);
}
.so-exp-table th {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  font-weight: 600;
}
.so-exp-table tbody tr:last-child td { border-bottom: none; }
.so-exp-num {
  font-family: var(--so-mono);
  font-variant-numeric: tabular-nums;
  color: var(--so-ink);
}
.so-exp-winner td { background: rgba(212, 163, 115, 0.10); }
.so-exp-winner-pill {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--so-mustard);
  color: var(--so-accent);
  border-radius: 2px;
}

/* ─── Activity event coalescing badge ────────────────────────────── */
.so-activity-event-count {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--so-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  background: var(--so-bg-darker);
  color: var(--so-ink-muted);
  border-radius: 8px;
}

/* Expandable-event chevron + detail panel */
.so-activity-event-chevron {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--so-ink-faint);
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
  border-radius: 2px;
  transition: color 100ms ease-out, background 100ms ease-out;
}
.so-activity-event-chevron:hover {
  color: var(--so-accent);
  background: var(--so-bg-darker);
}
.so-activity-event-detail {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  border-left: 3px solid var(--so-rule-dark);
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 0 2px 2px 0;
}
.so-activity-event[data-expandable="true"] .so-activity-event-content {
  cursor: default;
}

/* ─── Agents drawer ──────────────────────────────────────────────── */
.so-agents-drawer { display: flex; flex-direction: column; gap: 4px; }
.so-agents-section { padding: 4px 0 6px; }
.so-agents-section-head {
  padding: 10px 14px 6px;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.so-agents-count {
  font-weight: 700;
  color: var(--so-ink-muted);
  background: var(--so-bg-darker);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
}
.so-agents-list { padding: 0; }
.so-agent-row {
  padding: 8px 14px;
  border-bottom: 1px solid var(--so-rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-agent-row:hover { background: var(--so-bg); }
.so-agent-head { display: flex; align-items: center; gap: 8px; }
.so-agent-status {
  width: 12px;
  text-align: center;
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-agent-status[data-active="true"] { color: var(--so-good); }
.so-agent-name {
  font-family: var(--so-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--so-ink);
  flex: 1;
}
.so-agent-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.3px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.so-agent-meta-summary {
  font-size: 11px;
  color: var(--so-ink-muted);
  line-height: 1.45;
  padding-left: 20px;
}
.so-agent-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-left: 20px;
}
.so-agent-hireable {
  background: rgba(212, 163, 115, 0.04);
}
.so-agent-hireable .so-agent-status { color: var(--so-mustard); font-weight: 700; }

/* ─── History drawer ─────────────────────────────────────────────── */
.so-history-drawer { display: flex; flex-direction: column; }
.so-history-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--so-rule);
}
.so-history-search input {
  width: 100%;
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  outline: none;
}
.so-history-search input:focus { border-color: var(--so-accent); }
.so-history-list { padding: 0; overflow-y: auto; }
.so-history-row {
  padding: 8px 14px;
  border-bottom: 1px solid var(--so-rule);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-history-row:hover { background: var(--so-bg); }
.so-history-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--so-mono);
}
.so-history-sha {
  font-size: 10px;
  font-weight: 700;
  color: var(--so-cost-deterministic);
  background: var(--so-bg-darker);
  padding: 1px 5px;
  border-radius: 2px;
}
.so-history-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
}
.so-history-badge-scenario {
  background: var(--so-mustard);
  color: var(--so-accent);
}
.so-history-when {
  font-size: 9px;
  color: var(--so-ink-faint);
  margin-left: auto;
}
.so-history-message {
  font-size: 11px;
  color: var(--so-ink);
  line-height: 1.4;
}
.so-history-author {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}

/* ─── Artifacts pane (right shelf) ───────────────────────────────── */
.so-art-section {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.so-art-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--so-ink);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.so-art-pipeline-provenance {
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(212, 163, 115, 0.20);
  color: var(--so-accent);
  border-radius: 2px;
}
.so-art-section-sub {
  font-size: 11px;
  color: var(--so-ink-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Pipeline artifact */
.so-art-pipeline-stages { display: flex; flex-direction: column; gap: 6px; }
.so-art-pipeline-stage {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-art-pipeline-stage-num {
  font-family: var(--so-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--so-bg-darker);
  color: var(--so-ink-muted);
  padding: 2px 7px;
  border-radius: 2px;
  align-self: flex-start;
}
.so-art-pipeline-stage-body { flex: 1; min-width: 0; }
.so-art-pipeline-stage-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-art-pipeline-stage-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.so-art-pipeline-ss {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.so-art-pipeline-ss-pill {
  font-family: var(--so-mono);
  font-size: 9px;
  padding: 1px 5px;
  background: var(--so-bg-darker);
  color: var(--so-cost-deterministic);
  border-radius: 2px;
}
.so-art-pipeline-summary {
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--so-bg-alt);
  border-radius: 3px;
  font-size: 11px;
  color: var(--so-ink-muted);
}

/* Insights artifact */
.so-art-insight {
  padding: 10px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-art-insight-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.so-art-insight-kind {
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  color: #fff;
}
.so-art-insight-kind-opportunity { background: var(--so-good); }
.so-art-insight-kind-risk        { background: var(--so-warn); }
.so-art-insight-kind-insight     { background: var(--so-cost-deterministic); }
.so-art-insight-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
  flex: 1;
}
.so-art-insight-status {
  font-family: var(--so-mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
}
.so-art-insight-status-suggested { background: var(--so-bg-darker); color: var(--so-ink-muted); }
.so-art-insight-status-accepted  { background: var(--so-good); color: #fff; }
.so-art-insight-status-rejected  { background: var(--so-bg-darker); color: var(--so-bad); }
.so-art-insight-status-snoozed   { background: var(--so-bg-darker); color: var(--so-ink-faint); }
.so-art-insight-body {
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink-muted);
  margin: 4px 0;
}
.so-art-insight-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  letter-spacing: 0.3px;
}

/* Decisions artifact */
.so-art-decision {
  padding: 10px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-art-decision-superseded { opacity: 0.55; }
.so-art-decision-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.so-art-decision-icon { color: var(--so-mustard); font-size: 12px; }
.so-art-decision-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
  flex: 1;
}
.so-art-decision-stale {
  font-family: var(--so-mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 5px;
  background: var(--so-bg-darker);
  color: var(--so-warn);
  border-radius: 2px;
}
.so-art-decision-body {
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink-muted);
  margin-bottom: 4px;
  white-space: pre-wrap;
}
.so-art-decision-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}

/* Versions artifact */
.so-art-version {
  padding: 8px 10px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-art-version-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.so-art-version-sha {
  font-family: var(--so-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--so-cost-deterministic);
}
.so-art-version-when {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  margin-left: auto;
}
.so-art-version-msg {
  font-size: 11px;
  color: var(--so-ink);
}

/* Scenarios artifact */
.so-art-scenario {
  padding: 10px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 120ms ease-out;
}
.so-art-scenario:hover { border-color: var(--so-mustard); }
.so-art-scenario-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.so-art-scenario-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-art-scenario-count {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}
.so-art-scenario-hyp {
  font-size: 11px;
  font-style: italic;
  color: var(--so-ink-muted);
  margin-bottom: 4px;
}
.so-art-scenario-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}

/* Experiments artifact */
.so-art-experiment {
  padding: 10px;
  background: var(--so-bg-alt);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-art-experiment-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.so-art-experiment-status {
  font-family: var(--so-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  color: #fff;
}
.so-art-experiment-status-queued    { background: var(--so-ink-faint); }
.so-art-experiment-status-running   { background: var(--so-warn); }
.so-art-experiment-status-completed { background: var(--so-good); }
.so-art-experiment-id {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-art-experiment-summary {
  font-size: 11px;
  color: var(--so-ink);
  margin-bottom: 3px;
}
.so-art-experiment-meta {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}

/* ─── Modal (Decision recorder) ──────────────────────────────────── */
.so-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.so-modal {
  background: var(--so-bg);
  border-radius: 6px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.so-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-alt);
}
.so-modal-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--so-ink-faint);
  cursor: pointer;
}
.so-modal-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--so-rule);
  background: var(--so-bg-alt);
}

/* ─── Loading / placeholder ─────────────────────────────────────── */
.so-loading {
  padding: 32px;
  text-align: center;
  color: var(--so-ink-faint);
  font-size: 12px;
  font-family: var(--so-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ─── Small responsive collapse on narrow viewports ─────────────── */
@media (max-width: 1024px) {
  #simops-shell {
    grid-template-columns: var(--so-shelf-w-collapsed) minmax(0, 1fr) 0;
  }
  #so-right { display: none; }
}

/* ═════════════════════════════════════════════════════════════════
   SimOps v3 page (so-pg-*)

   One scrolling page with three sections: Process, Variations,
   Companion. No mode tabs. The companion is anchored at the bottom
   and always in context. See:
     adaptogen/simops-v2/specs/v3/00_REFRAME.md
   ═════════════════════════════════════════════════════════════════ */

.so-pg {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 28px 40px;
  max-width: 980px;
  margin: 0 auto;
}
.so-pg-empty {
  padding: 64px 32px;
  text-align: center;
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
}
.so-pg-empty h2 { font-size: 20px; margin: 0 0 8px; color: var(--so-ink); }
.so-pg-loading {
  padding: 64px;
  text-align: center;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.so-pg-section {
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 16px 20px;
}
.so-pg-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-section-title {
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-accent);
  font-weight: 600;
}
.so-pg-section-meta {
  font-size: 11px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
}

/* Process section ──────────────────────────────────────────────── */
.so-pg-process-name {
  display: block;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  padding: 6px 4px;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--so-ink);
  margin-bottom: 4px;
  box-sizing: border-box;
}
.so-pg-process-name:focus { outline: none; border-bottom-color: var(--so-accent); }

.so-pg-process-description {
  display: block;
  width: 100%;
  font-size: 12px;
  padding: 4px;
  border: none;
  border-bottom: 1px dashed transparent;
  background: transparent;
  color: var(--so-ink-muted);
  margin-bottom: 14px;
  box-sizing: border-box;
}
.so-pg-process-description:focus { outline: none; border-bottom-color: var(--so-rule-dark); }

.so-pg-kpi-strip {
  display: flex;
  gap: 12px;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}
.so-pg-kpi-tile {
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 8px 12px;
  min-width: 96px;
  flex: 1 1 auto;
}
.so-pg-kpi-label {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}
.so-pg-kpi-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--so-ink);
  margin-top: 2px;
}
.so-pg-kpi-empty {
  flex: 1;
  padding: 12px;
  text-align: center;
  color: var(--so-ink-faint);
  font-size: 11px;
  font-style: italic;
}

.so-pg-stages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.so-pg-empty-stages {
  padding: 24px 14px;
  text-align: center;
  color: var(--so-ink-faint);
  font-size: 12px;
  line-height: 1.6;
  background: var(--so-bg-darker);
  border: 1px dashed var(--so-rule);
  border-radius: 3px;
}

.so-pg-stage {
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 10px 12px;
}
.so-pg-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.so-pg-stage-idx {
  display: inline-flex;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--so-accent);
  color: white;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: var(--so-mono);
}
.so-pg-stage-name {
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  color: var(--so-ink);
}
.so-pg-stage-eff {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-pg-stage-flow {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-muted);
  margin: 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.so-pg-stage-io-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-faint);
  margin-right: 4px;
}
.so-pg-stage-io-unit { color: var(--so-ink-faint); }
.so-pg-stage-arrow { color: var(--so-accent); }

.so-pg-stage-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-pg-stage-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
}
.so-pg-stage-field-label {
  width: 130px;
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-stage-field-val { flex: 1; }
.so-pg-synthetic-val {
  color: var(--so-ink);
  font-family: var(--so-mono);
}
.so-pg-live-val {
  color: var(--so-good);
  font-family: var(--so-mono);
  font-weight: 500;
}
.so-pg-empty-val { color: var(--so-ink-faint); }

.so-pg-bind-btn,
.so-pg-unbind-btn {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-size: 10px;
  font-family: var(--so-mono);
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-bind-btn:hover { color: var(--so-accent); border-color: var(--so-accent); }
.so-pg-unbind-btn:hover { color: var(--so-bad); border-color: var(--so-bad); }
.so-pg-no-contract {
  font-size: 10px;
  font-family: var(--so-mono);
  color: var(--so-ink-faint);
  font-style: italic;
}

/* 2B: sensor-link chips on metric rows. Replaces the bind/unbind
   button cluster that used to live on the metric row directly. The
   chip names which sensor is the contract source for this metric
   and is clickable (scrolls to the sensor row in the Sensors
   table). The live variant gets accented coloring so the user can
   see at a glance which metrics are operational. */
.so-pg-sensor-link {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.so-pg-sensor-link:hover {
  border-color: var(--so-rule-dark);
  color: var(--so-ink);
}
.so-pg-sensor-link-live {
  background: rgba(70, 140, 90, 0.12);
  color: rgb(50, 120, 70);
}
.so-pg-sensor-link-live:hover {
  border-color: rgb(70, 140, 90);
  color: rgb(40, 100, 60);
}
.so-pg-sensor-missing {
  font-size: 10px;
  font-family: var(--so-mono);
  color: var(--so-warn, #c97a3a);
  font-style: italic;
}

/* Sensor-table bind/source column. Mirrors the metric-row bind
   button styling so the user recognises the affordance. */
.so-pg-sen-source {
  /* Allow wrapping if both 'bind' + '+ Reading' would overflow narrow
     columns. The buttons are small enough that wrapping is rare in
     practice but it stops the column from forcing the whole table
     past its container width when the Companion panel is open on
     the right. */
  white-space: normal;
  text-align: right;
}

/* Spec 22.x: sensor table sits inside a horizontally-scrollable
   wrapper so it never bleeds past the stage card's right edge when
   the workspace shell narrows (Companion panel wide, etc.). The
   table itself stays width: 100%; overflow falls into this scroll
   container instead of overflowing the section. */
.so-pg-stage-sen-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-pg-stage-sen-scroll > .so-pg-stage-sen-table {
  /* Inside the scroll wrapper, the table's natural width is governed
     by content. Without this, the 100% width on the table fights with
     overflow-x and we lose horizontal scroll. */
  min-width: 720px;
}
.so-pg-sen-bind,
.so-pg-sen-unbind {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-size: 10px;
  font-family: var(--so-mono);
  padding: 2px 7px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-sen-bind:hover  { color: var(--so-accent); border-color: var(--so-accent); }
.so-pg-sen-unbind:hover { color: var(--so-bad);    border-color: var(--so-bad); }
.so-pg-sen-bound {
  font-family: var(--so-mono);
  font-size: 10px;
  color: rgb(50, 120, 70);
  margin-right: 6px;
}
.so-pg-sen-no-contract,
.so-pg-sen-derived-note {
  font-family: var(--so-mono);
  font-size: 10px;
  font-style: italic;
  color: var(--so-ink-faint);
}

/* Migration audit badge on sensor rows that were auto-created from
   v2 sosa_contract shapes. Sits right of the editable id cell. */
.so-pg-sen-origin {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 2px;
  background: rgba(120, 100, 70, 0.12);
  color: rgb(120, 90, 60);
  vertical-align: middle;
}

/* Brief highlight when the user clicks a sensor-link chip and the
   table scrolls to the matching sensor row. Fades after 1.5s. */
.so-pg-sen-row-flash {
  animation: so-pg-sen-row-flash-anim 1.5s ease-out;
}
@keyframes so-pg-sen-row-flash-anim {
  0%   { background: rgba(80, 130, 200, 0.20); }
  100% { background: transparent; }
}

/* 2D: sensor_advisor proposal panel. Lives between the Sensors
   sub-header and the existing sensors table. The panel is
   intentionally distinct — slight tinted background, dashed border
   — so the operator recognises it as a transient proposal rather
   than confused-it-for-the-real-table content. */
.so-pg-sen-proposal {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: rgba(140, 90, 180, 0.06);
  border: 1px dashed rgba(140, 90, 180, 0.35);
  border-radius: 4px;
}
.so-pg-sen-proposal-empty {
  background: rgba(180, 130, 60, 0.06);
  border-color: rgba(180, 130, 60, 0.35);
}
.so-pg-sen-proposal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--so-ink);
}
.so-pg-sen-proposal-head strong {
  font-family: var(--so-mono);
  font-weight: 600;
}
.so-pg-sen-proposal-version {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--so-bg-darker);
  border-radius: 8px;
  color: var(--so-ink-faint);
}
.so-pg-sen-proposal-dismiss {
  margin-left: auto;
  background: none;
  border: 1px solid transparent;
  color: var(--so-ink-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 0 6px;
  border-radius: 2px;
  line-height: 1;
}
.so-pg-sen-proposal-dismiss:hover {
  border-color: var(--so-rule-dark);
  color: var(--so-ink);
}
.so-pg-sen-proposal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 8px;
}
.so-pg-sen-proposal-table th,
.so-pg-sen-proposal-table td {
  padding: 5px 7px;
  border-bottom: 1px solid var(--so-rule);
  text-align: left;
  vertical-align: top;
}
.so-pg-sen-proposal-table th {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: transparent;
}
.so-pg-sen-proposal-check {
  width: 24px;
  text-align: center;
}
.so-pg-sen-proposal-check input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}
.so-pg-sen-proposal-row[data-accepted="false"] {
  opacity: 0.5;
}
.so-pg-sen-proposal-row[data-accepted="false"] code {
  text-decoration: line-through;
}
.so-pg-sen-proposal-id {
  font-family: var(--so-mono);
  font-size: 11px;
}
.so-pg-sen-proposal-id code {
  background: var(--so-bg-darker);
  padding: 1px 4px;
  border-radius: 2px;
}
.so-pg-sen-proposal-warn {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 0 5px;
  border-radius: 2px;
  background: rgba(180, 130, 60, 0.18);
  color: rgb(150, 100, 40);
  cursor: help;
}
.so-pg-sen-proposal-derivation-cell {
  font-size: 10.5px;
}
.so-pg-sen-proposal-derivation {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-pg-sen-proposal-method {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(140, 90, 180, 0.12);
  color: rgb(110, 70, 150);
  border-radius: 8px;
  align-self: flex-start;
}
.so-pg-sen-proposal-ref {
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-faint);
  padding-left: 4px;
}
.so-pg-sen-proposal-na {
  font-family: var(--so-mono);
  color: var(--so-ink-faint);
}
.so-pg-sen-proposal-rationale {
  font-size: 11px;
  color: var(--so-ink);
  max-width: 240px;
  cursor: help;
}
.so-pg-sen-proposal-corrs,
.so-pg-sen-proposal-note-block {
  margin-top: 8px;
  font-size: 11px;
}
.so-pg-sen-proposal-corrs summary,
.so-pg-sen-proposal-note-block summary {
  cursor: pointer;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.so-pg-sen-proposal-corrs ul {
  list-style: none;
  padding: 6px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.so-pg-sen-proposal-corrs li {
  font-family: var(--so-mono);
  font-size: 10.5px;
  color: var(--so-ink);
  padding: 2px 0;
}
.so-pg-sen-proposal-corrs li.so-pg-sen-proposal-corr-partial {
  opacity: 0.55;
}
.so-pg-sen-proposal-corr-kind {
  display: inline-block;
  font-size: 9.5px;
  padding: 0 5px;
  margin: 0 4px;
  border-radius: 8px;
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.so-pg-sen-proposal-note {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  border-left: 2px solid rgba(140, 90, 180, 0.4);
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink);
  border-radius: 2px;
}
.so-pg-sen-proposal-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-sen-proposal-actions button {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-sen-proposal-actions button:hover:not(:disabled) {
  border-color: var(--so-accent);
  color: var(--so-accent);
}
.so-pg-sen-proposal-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.so-pg-sen-proposal-commit-primary {
  margin-left: auto;
  background: rgba(140, 90, 180, 0.12) !important;
  border-color: rgba(140, 90, 180, 0.5) !important;
  color: rgb(110, 70, 150) !important;
}
.so-pg-sen-proposal-commit-primary:hover:not(:disabled) {
  background: rgba(140, 90, 180, 0.2) !important;
  border-color: rgb(110, 70, 150) !important;
}

.so-pg-stage-sidestreams {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--so-rule);
}
.so-pg-stage-sub-head {
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 4px;
}
.so-pg-stage-ss {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--so-mono);
  padding: 2px 0;
}

/* Variations section ───────────────────────────────────────────── */
.so-pg-var-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.so-pg-var-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
}
.so-pg-var-row:hover { background: var(--so-bg-darker); }
.so-pg-var-name { flex: 1; }
.so-pg-var-slug,
.so-pg-var-meta {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-pg-empty-vars {
  font-size: 12px;
  color: var(--so-ink-faint);
  padding: 12px;
  font-style: italic;
  background: var(--so-bg-darker);
  border: 1px dashed var(--so-rule);
  border-radius: 3px;
  line-height: 1.6;
}
.so-pg-var-actions { display: flex; justify-content: flex-end; }
.so-pg-compare-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  background: var(--so-accent);
  color: white;
  border: 1px solid var(--so-accent);
  border-radius: 3px;
  cursor: pointer;
}
.so-pg-compare-btn:disabled {
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
  border-color: var(--so-rule);
  cursor: not-allowed;
}

/* Companion section ────────────────────────────────────────────── */
.so-pg-conv {
  max-height: 440px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px;
  margin-bottom: 12px;
}
.so-pg-conv-empty {
  padding: 18px 12px;
  font-size: 12px;
  color: var(--so-ink-muted);
  background: var(--so-bg-darker);
  border: 1px dashed var(--so-rule);
  border-radius: 3px;
  line-height: 1.6;
}
.so-pg-conv-suggestions {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-pg-suggest {
  text-align: left;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--so-accent);
  cursor: pointer;
  font-family: inherit;
}
.so-pg-suggest:hover { border-color: var(--so-accent); background: var(--so-accent-soft); color: white; }

.so-pg-conv-thinking {
  padding: 10px 14px;
  color: var(--so-ink-faint);
  font-size: 11px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.so-pg-conv-thinking::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--so-accent);
  animation: so-pg-pulse 0.8s ease-in-out infinite;
}
@keyframes so-pg-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }

.so-pg-turn { display: flex; flex-direction: column; gap: 4px; }
.so-pg-turn-meta {
  font-size: 10px;
  font-family: var(--so-mono);
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
}
.so-pg-turn-user .so-pg-turn-body {
  background: var(--so-accent-soft);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  align-self: flex-end;
  max-width: 80%;
}
.so-pg-turn-user { align-items: flex-end; }
.so-pg-turn-companion .so-pg-turn-body {
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  color: var(--so-ink);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 90%;
}
.so-pg-turn-companion .so-pg-turn-body p { margin: 0 0 8px; }
.so-pg-turn-companion .so-pg-turn-body p:last-child { margin-bottom: 0; }
.so-pg-turn-companion .so-pg-turn-body ul { margin: 6px 0 8px 18px; padding: 0; }
.so-pg-turn-companion .so-pg-turn-body code {
  font-family: var(--so-mono);
  background: var(--so-bg);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 11px;
}
.so-pg-turn-err {
  color: var(--so-bad);
  font-size: 11px;
  font-family: var(--so-mono);
}
.so-pg-turn-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* Action result chrome (inserted from simops-actions.js) */
.so-act {
  padding: 8px 12px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  font-size: 12px;
}
.so-act-rationale {
  display: block;
  margin-top: 4px;
  color: var(--so-ink-muted);
  font-style: italic;
  font-size: 11px;
}
.so-act-agent-id {
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--so-accent);
  margin-bottom: 4px;
}
.so-act-narrative { line-height: 1.55; }
.so-act-bom, .so-act-compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 11px;
}
.so-act-bom th, .so-act-bom td,
.so-act-compare th, .so-act-compare td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--so-rule);
  font-family: var(--so-mono);
}
.so-act-err { color: var(--so-bad); font-style: italic; }
.so-act-annotate { border-left: 3px solid var(--so-accent); }
.so-act-annotate.so-act-critique { border-left-color: #ffb300; }
.so-act-annotate.so-act-risk { border-left-color: var(--so-bad); }
.so-act-annotate.so-act-decision { border-left-color: var(--so-good); }
.so-act-target {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-act-body { margin-top: 4px; }

/* Companion input ──────────────────────────────────────────────── */
.so-pg-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.so-pg-input-text {
  flex: 1;
  resize: vertical;
  min-height: 48px;
  max-height: 240px;
  padding: 8px 10px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.so-pg-input-text:focus { outline: none; border-color: var(--so-accent); }
.so-pg-input-submit {
  padding: 8px 18px;
  background: var(--so-accent);
  color: white;
  border: 1px solid var(--so-accent);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.so-pg-input-submit:disabled {
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
  border-color: var(--so-rule);
  cursor: not-allowed;
}

/* Bind-to-source modal ─────────────────────────────────────────── */
.so-pg-bind-overlay,
.so-pg-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.so-pg-bind-modal,
.so-pg-edit-modal {
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-radius: 4px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.so-pg-bind-head,
.so-pg-edit-head {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--so-rule);
  color: var(--so-ink);
}
.so-pg-bind-body { padding: 16px 18px; font-size: 12px; line-height: 1.6; }
.so-pg-bind-section { margin-bottom: 18px; }
.so-pg-bind-section h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--so-ink-faint);
  margin: 0 0 6px;
}
.so-pg-bind-sources-empty {
  padding: 12px;
  background: var(--so-bg-darker);
  border: 1px dashed var(--so-rule);
  border-radius: 3px;
  font-size: 12px;
}
.so-pg-bind-actions-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.so-pg-bind-action {
  text-align: left;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--so-accent);
  font-family: inherit;
}
.so-pg-bind-action:hover { border-color: var(--so-accent); background: var(--so-accent-soft); color: white; }
.so-pg-bind-link {
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--so-accent);
  text-decoration: none;
  border: 1px solid transparent;
}
.so-pg-bind-link:hover { text-decoration: underline; }
.so-pg-bind-contract {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
}
.so-pg-bind-contract dt {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-bind-contract dd { margin: 0; font-family: var(--so-mono); font-size: 12px; }
.so-pg-bind-why p { margin: 0 0 8px; }

.so-pg-bind-connect {
  background: var(--so-bg-darker);
  padding: 12px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  margin-top: 6px;
}
.so-pg-bind-connect label { display: block; font-size: 11px; color: var(--so-ink-muted); margin-bottom: 8px; }
.so-pg-bind-connect input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  font-family: var(--so-mono);
  font-size: 12px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  box-sizing: border-box;
}
.so-pg-bind-connect input:focus { outline: none; border-color: var(--so-accent); }
.so-pg-bind-status {
  font-size: 11px;
  font-family: var(--so-mono);
  color: var(--so-ink-muted);
  margin: 6px 0;
  min-height: 16px;
}
.so-pg-bind-connect-actions { display: flex; gap: 8px; justify-content: flex-end; }
.so-pg-bind-cancel-connect,
.so-pg-bind-test,
.so-pg-bind-close,
.so-pg-edit-decline,
.so-pg-edit-accept {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.so-pg-bind-cancel-connect,
.so-pg-bind-close,
.so-pg-edit-decline {
  background: var(--so-bg-darker);
  color: var(--so-ink);
  border: 1px solid var(--so-rule);
}
.so-pg-bind-test,
.so-pg-edit-accept {
  background: var(--so-accent);
  color: white;
  border: 1px solid var(--so-accent);
}
.so-pg-bind-footer,
.so-pg-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-bind-watched {
  color: var(--so-good);
  font-weight: 500;
}

/* Edit diff modal ──────────────────────────────────────────────── */
.so-pg-edit-body { padding: 16px 18px; font-size: 12px; }
.so-pg-edit-rationale {
  background: var(--so-bg-darker);
  padding: 10px 12px;
  border-left: 3px solid var(--so-accent);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.so-pg-edit-summary { font-size: 11px; line-height: 1.7; margin-bottom: 12px; }
.so-pg-edit-summary strong { font-family: var(--so-mono); font-size: 10px; text-transform: uppercase; color: var(--so-ink-faint); }
.so-pg-edit-details summary {
  font-size: 11px;
  font-family: var(--so-mono);
  color: var(--so-accent);
  cursor: pointer;
  margin-bottom: 6px;
}
.so-pg-edit-details pre {
  background: var(--so-bg-darker);
  padding: 10px;
  font-size: 10px;
  font-family: var(--so-mono);
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}

/* ═════════════════════════════════════════════════════════════════
   Right-shelf COMPANION (moved from main scroll into the right pane)
   See: simops-right-companion.js, simops-page.js
   ═════════════════════════════════════════════════════════════════ */

.so-rc {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--so-bg);
}
.so-rc-empty,
.so-rc-empty-inline {
  padding: 18px 16px;
  font-size: 12px;
  color: var(--so-ink-muted);
  line-height: 1.6;
}
.so-rc-suggestions {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-rc-suggest {
  text-align: left;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--so-accent);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.so-rc-suggest:hover { border-color: var(--so-accent); background: var(--so-accent-soft); color: white; }

.so-rc-conv {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
}
.so-rc-thinking {
  padding: 8px 12px;
  color: var(--so-ink-faint);
  font-size: 11px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.so-rc-thinking::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--so-accent);
  animation: so-pg-pulse 0.8s ease-in-out infinite;
}

.so-rc-turn { display: flex; flex-direction: column; gap: 4px; }
.so-rc-turn-meta {
  font-size: 10px;
  font-family: var(--so-mono);
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
}
.so-rc-turn-user { align-items: flex-end; }
.so-rc-turn-user .so-rc-turn-body {
  background: var(--so-accent-soft);
  color: white;
  padding: 7px 11px;
  border-radius: 4px;
  font-size: 12px;
  max-width: 90%;
}
.so-rc-turn-companion .so-rc-turn-body {
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  color: var(--so-ink);
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 95%;
}
.so-rc-turn-companion .so-rc-turn-body p { margin: 0 0 6px; }
.so-rc-turn-companion .so-rc-turn-body p:last-child { margin-bottom: 0; }
.so-rc-turn-companion .so-rc-turn-body ul { margin: 4px 0 6px 16px; padding: 0; }
.so-rc-turn-companion .so-rc-turn-body code {
  font-family: var(--so-mono);
  background: var(--so-bg);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}
.so-rc-turn-err {
  color: var(--so-bad);
  font-size: 11px;
  font-family: var(--so-mono);
}
.so-rc-turn-results {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.so-rc-input {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-rc-input-text {
  flex: 1;
  resize: vertical;
  min-height: 36px;
  max-height: 160px;
  padding: 6px 8px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink);
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.so-rc-input-text:focus { outline: none; border-color: var(--so-accent); }
.so-rc-input-submit {
  padding: 6px 12px;
  background: var(--so-accent);
  color: white;
  border: 1px solid var(--so-accent);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
.so-rc-input-submit:disabled {
  background: var(--so-bg);
  color: var(--so-ink-faint);
  border-color: var(--so-rule);
  cursor: not-allowed;
}

/* ═════════════════════════════════════════════════════════════════
   Right-shelf INSIGHTS (annotations + insights from event log)
   ═════════════════════════════════════════════════════════════════ */
.so-ri { display: flex; flex-direction: column; height: 100%; }

/* ─── Workspace maturity panel ───────────────────────────────────
   The visible artifact of the digital-twin thesis — sits above the
   insight tabs to make the compounding curve legible at a glance.
   See whitepapers/simops-learning-digital-twin.md §6. */
.so-ri-maturity {
  padding: 10px 12px 12px;
  background: var(--so-bg-darker);
  border-bottom: 1px solid var(--so-rule);
  font-size: 11px;
  line-height: 1.4;
}
.so-ri-maturity-loading-line {
  color: var(--so-ink-faint);
  font-style: italic;
  font-size: 10px;
  padding: 4px 0;
}
.so-ri-maturity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 8px;
}
.so-ri-maturity-stage {
  padding: 2px 7px;
  border-radius: 2px;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--so-rule);
  color: var(--so-ink-faint);
}
.so-ri-maturity-stage-draft       { color: var(--so-ink-faint); border-color: var(--so-rule); }
.so-ri-maturity-stage-candidate   { color: var(--so-warn); border-color: var(--so-warn); }
.so-ri-maturity-stage-operational { color: var(--so-good, #6f9a5b); border-color: var(--so-good, #6f9a5b); }
.so-ri-maturity-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  row-gap: 4px;
  column-gap: 8px;
}
.so-ri-maturity-row {
  display: contents;
}
.so-ri-maturity-row > .so-ri-maturity-label {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  align-self: center;
}
.so-ri-maturity-row > .so-ri-maturity-value {
  font-size: 11.5px;
  color: var(--so-ink);
}
.so-ri-maturity-value strong {
  font-weight: 600;
  color: var(--so-ink);
}
.so-ri-maturity-sub {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-faint);
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}
.so-ri-maturity-sub.so-ri-maturity-live {
  color: var(--so-good, #6f9a5b);
  border-color: var(--so-good, #6f9a5b);
}
.so-ri-maturity-faint { color: var(--so-ink-faint); }
.so-ri-maturity-pred-ready {
  color: var(--so-good, #6f9a5b);
  font-weight: 500;
}
.so-ri-maturity-pred-warming {
  color: var(--so-warn);
}
.so-ri-maturity-unlocks {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--so-rule);
}
.so-ri-maturity-unlocks-head {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 5px;
}
.so-ri-maturity-unlocks-list {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.5;
}
.so-ri-maturity-milestone {
  margin-bottom: 3px;
  cursor: help;
  color: var(--so-ink);
}
.so-ri-maturity-milestone:hover { color: var(--so-accent); }

/* Agent fleet sub-section in the maturity panel. Each row shows a
   hired agent's current version + last transition time. Forward-
   compatible with fermi #5 Capability 3 — when the platform fires
   agent_card.updated natively, this list auto-refreshes via the
   event-handler hook in 1B+. */
.so-ri-maturity-agents {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--so-rule);
}
.so-ri-maturity-agents-head {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 4px;
}
.so-ri-maturity-agents-loading {
  font-size: 10.5px;
  font-style: italic;
  color: var(--so-ink-faint);
  padding: 3px 0;
}
.so-ri-maturity-agents-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-ri-maturity-agent-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  font-size: 10.5px;
  cursor: help;
}
.so-ri-maturity-agent-name {
  flex: 1;
  font-family: var(--so-mono);
  color: var(--so-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-ri-maturity-agent-version {
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-accent);
  padding: 0 4px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}
.so-ri-maturity-agent-version-unknown {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  font-style: italic;
}
.so-ri-maturity-agent-when {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}

.so-ri-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--so-bg-darker);
  border-bottom: 1px solid var(--so-rule);
}
.so-ri-tab {
  flex: 1;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--so-ink-muted);
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.so-ri-tab[data-active="true"] {
  color: var(--so-accent);
  border-bottom-color: var(--so-accent);
  background: var(--so-bg);
}
.so-ri-count {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  background: var(--so-rule);
  color: var(--so-ink-muted);
  padding: 1px 5px;
  border-radius: 8px;
}
.so-ri-tab[data-active="true"] .so-ri-count {
  background: var(--so-accent);
  color: white;
}

.so-ri-list { flex: 1; overflow-y: auto; padding: 8px; }
.so-ri-empty,
.so-ri-empty-state {
  padding: 16px;
  color: var(--so-ink-faint);
  font-size: 12px;
  font-style: italic;
}
.so-ri-item {
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  /* Belt-and-suspenders: prevent the card itself from overflowing
     its container in narrow shelves. */
  min-width: 0;
  word-break: break-word;
}
.so-ri-item-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  min-width: 0;
}
.so-ri-item-title {
  font-weight: 500;
  /* Title can wrap (multi-line OK in a narrow shelf) but stays bounded
     so it doesn't push the kind chip off-screen. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.so-ri-item-kind {
  font-family: var(--so-mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  flex: 0 0 auto;
}
.so-ri-item-body {
  color: var(--so-ink-muted);
  line-height: 1.5;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.so-ri-item-foot {
  /* Was display:flex with justify-content:space-between, which forced
     the source label + 3 action buttons onto one row. When the source
     string is long (actuator URIs with rule_id + hash suffix) the
     buttons clipped off the right edge of the shelf.
     Fix: flex-wrap so the buttons drop to a new line when needed;
     source can take its natural width but won't push the buttons
     beyond the container. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--so-ink-faint);
  min-width: 0;
}
.so-ri-item-source {
  font-family: var(--so-mono);
  /* Truncate long source labels with ellipsis so we never push the
     button row off the right edge. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-ri-item-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-left: auto;
}
.so-ri-act {
  padding: 2px 6px;
  font-size: 9px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  border: 1px solid var(--so-rule);
  background: var(--so-bg);
  color: var(--so-ink-muted);
  border-radius: 2px;
  cursor: pointer;
}
.so-ri-act-accept:hover { color: var(--so-good); border-color: var(--so-good); }
.so-ri-act-reject:hover { color: var(--so-bad);  border-color: var(--so-bad);  }
.so-ri-act-snooze:hover { color: var(--so-accent); border-color: var(--so-accent); }

/* ═════════════════════════════════════════════════════════════════
   Process narrative + intent chips (legibility layer)
   ═════════════════════════════════════════════════════════════════ */
/* Sits above the KPI strip. The narrative is a templated 3-5
   sentence summary; the chips are 4 user-intent entry points.
   See simops-page.js _renderProcessNarrative + _renderIntentChips. */
.so-pg-narrative {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  margin: 6px 0 8px;
  background: var(--so-bg-darker);
  border-left: 3px solid var(--so-accent);
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  line-height: 1.6;
}
.so-pg-narrative-body {
  flex: 1;
  color: var(--so-ink);
}
.so-pg-narrative-body strong { color: var(--so-ink); }
.so-pg-narrative-body code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 4px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}
.so-pg-narrative-body em { font-style: italic; color: var(--so-ink-muted); }
.so-pg-narrative-elaborate {
  background: transparent;
  border: 1px solid var(--so-accent);
  color: var(--so-accent);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.so-pg-narrative-elaborate:hover {
  background: var(--so-accent);
  color: #fff;
}

/* Intent chips: 4 buttons that open inline data-grounded explainers */
.so-pg-intent {
  margin: 0 0 12px;
}
.so-pg-intent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.so-pg-intent-chip {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  color: var(--so-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 100ms, background 100ms;
}
.so-pg-intent-chip:hover {
  border-color: var(--so-accent);
  background: var(--so-bg);
}
.so-pg-intent-chip-open {
  border-color: var(--so-accent);
  background: var(--so-bg);
  box-shadow: 0 0 0 1px var(--so-accent) inset;
}
.so-pg-intent-chip-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-intent-chip-hint {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}

/* Intent panel: opens below the chips with a focused explanation */
.so-pg-intent-panel {
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-accent);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--so-ink);
}
.so-pg-intent-panel h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--so-accent);
  font-weight: 600;
}
.so-pg-intent-panel h5 {
  margin: 12px 0 4px;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  font-weight: 500;
}
.so-pg-intent-panel p { margin: 0 0 8px; }
.so-pg-intent-panel ul.so-pg-intent-list {
  margin: 0 0 8px;
  padding-left: 18px;
}
.so-pg-intent-panel ul.so-pg-intent-list li {
  margin-bottom: 4px;
}
.so-pg-intent-panel code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 4px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}
.so-pg-intent-panel em { font-style: italic; color: var(--so-ink-muted); }
.so-pg-intent-good { color: var(--so-good, #6f9a5b); }
.so-pg-intent-empty {
  color: var(--so-ink-faint);
  font-style: italic;
  padding: 12px;
}

/* Per-section explain chips. Tiny circular `?` button next to each
   sub-section head; clicking opens a focused inline panel with
   data-grounded explanation specific to this stage's current state.
   Same voice as the intent panels above. */
.so-pg-explain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 50%;
  color: var(--so-ink-faint);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
  font-family: inherit;
  padding: 0;
  line-height: 1;
}
.so-pg-explain-chip:hover {
  background: var(--so-accent);
  color: #fff;
  border-color: var(--so-accent);
}
.so-pg-explain-chip-open {
  background: var(--so-accent);
  color: #fff;
  border-color: var(--so-accent);
}
.so-pg-explain-panel {
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: var(--so-bg-darker);
  border-left: 3px solid var(--so-accent);
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-pg-explain-panel p { margin: 0 0 6px; }
.so-pg-explain-panel p:last-child { margin-bottom: 0; }
.so-pg-explain-panel strong { color: var(--so-ink); }
.so-pg-explain-panel code {
  font-family: var(--so-mono);
  font-size: 10.5px;
  padding: 1px 4px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}
.so-pg-explain-panel ul.so-pg-intent-list {
  margin: 4px 0 6px;
  padding-left: 18px;
}
.so-pg-explain-panel ul.so-pg-intent-list li {
  margin-bottom: 3px;
}

/* ═════════════════════════════════════════════════════════════════
   Economics waterfall (Process section)
   ═════════════════════════════════════════════════════════════════ */
/* Per-stage horizontal bar chart of cost build-up. Sits between
   sankey and stages list; collapsible via <details>. Each row shows
   one stage's materials/energy/labor/carbon cost on the left of a
   zero line, sidestream credit on the right (subtractive), net €
   per input unit in the rightmost column. Annualised projections
   strip below uses the live cascade × utilization × time horizon. */
.so-pg-wf {
  margin: 10px 0 14px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-pg-wf-summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--so-ink);
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.so-pg-wf-summary::marker { color: var(--so-ink-faint); }
.so-pg-wf-summary-meta {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-left: auto;
}
.so-pg-wf-body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-wf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 0;
  font-size: 10.5px;
  color: var(--so-ink-faint);
}
.so-pg-wf-legend-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--so-mono);
  font-size: 10px;
}
.so-pg-wf-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
}
.so-pg-wf-mat { fill: #4a7fc8; background: #4a7fc8; }
.so-pg-wf-ene { fill: #c47a3a; background: #c47a3a; }
.so-pg-wf-lab { fill: #8a5fa8; background: #8a5fa8; }
.so-pg-wf-car { fill: #c25555; background: #c25555; }
.so-pg-wf-cre { fill: #6f9a5b; background: #6f9a5b; }
.so-pg-wf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.so-pg-wf-table th {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-wf-table th:nth-child(3),
.so-pg-wf-table th:nth-child(4),
.so-pg-wf-table th:nth-child(5) { text-align: right; }
.so-pg-wf-bar-head { width: 40%; }
.so-pg-wf-row td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--so-rule);
  vertical-align: middle;
}
.so-pg-wf-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-wf-idx {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  background: var(--so-rule);
  color: var(--so-ink-faint);
  border-radius: 50%;
  font-family: var(--so-mono);
  font-size: 9.5px;
}
.so-pg-wf-bar-cell { padding: 4px 0; }
.so-pg-wf-bar {
  width: 100%;
  height: 30px;
  display: block;
}
.so-pg-wf-zero {
  stroke: var(--so-ink-faint);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.so-pg-wf-cost {
  font-family: var(--so-mono);
  white-space: nowrap;
  text-align: right;
}
.so-pg-wf-cost-c { color: var(--so-ink); }
.so-pg-wf-cost-r { color: var(--so-good, #6f9a5b); }
.so-pg-wf-net {
  font-family: var(--so-mono);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
.so-pg-wf-net-positive { color: var(--so-ink); }
.so-pg-wf-net-negative {
  color: var(--so-good, #6f9a5b);
  font-style: italic;
}

/* Annualised projections — derived from cascade × utilization × horizon */
.so-pg-wf-projections {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-wf-proj-head {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.so-pg-wf-proj-sub {
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-faint);
  text-transform: none;
  letter-spacing: 0;
}
.so-pg-wf-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.so-pg-wf-proj-tile {
  padding: 8px 10px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
}
.so-pg-wf-proj-label {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 4px;
}
.so-pg-wf-proj-value {
  font-family: var(--so-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-pg-wf-proj-sub:not(.so-pg-wf-summary-meta) {
  font-size: 10px;
  color: var(--so-ink-faint);
  margin-top: 3px;
}
.so-pg-wf-carbon-sink {
  color: var(--so-good, #6f9a5b);
}

/* ═════════════════════════════════════════════════════════════════
   Sankey flow diagram (Process section)
   ═════════════════════════════════════════════════════════════════ */
/* Richer SVG sankey with sidestream branches + loss arrows.
   The container scrolls horizontally if there are too many stages
   to fit the page width. */
.so-pg-sankey {
  padding: 8px 0 6px;
  margin: 10px 0 14px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  overflow-x: auto;
}
.so-pg-sankey-svg {
  display: block;
  min-width: 100%;
}
/* Uncertainty cone: translucent band behind the main flow that
   widens with cumulative uncertainty. Synthetic-only stages have
   ±10%; live-bound stages drop to ±2%; bridge-needed (cross-unit,
   no energy_density) stages add ±25%. Uncertainties compound
   quadratically forward. See _renderSankey:stageUncertainty. */
.so-pg-sankey-cone {
  fill: var(--so-accent);
  fill-opacity: 0.13;
  stroke: var(--so-accent);
  stroke-opacity: 0.25;
  stroke-width: 0.5;
  stroke-dasharray: 4 3;
}
.so-pg-sankey-stage-g:hover .so-pg-sankey-cone {
  fill-opacity: 0.18;
}
/* Main flow band: stage-to-stage trapezoid */
.so-pg-sankey-band {
  fill: var(--so-accent);
  fill-opacity: 0.85;
  stroke: var(--so-accent);
  stroke-width: 0.5;
}
.so-pg-sankey-stage-g:hover .so-pg-sankey-band {
  fill-opacity: 1;
}
/* Loss flag (efficiency loss) */
.so-pg-sankey-loss {
  fill: #c47b00;
  fill-opacity: 0.6;
  stroke: #c47b00;
  stroke-width: 0.5;
}
.so-pg-sankey-loss-label {
  font-family: var(--so-mono);
  font-size: 9px;
  fill: #c47b00;
}
/* Sidestream branches */
.so-pg-sankey-branch path,
.so-pg-sankey-branch circle {
  stroke: var(--so-good);
  fill: var(--so-good);
}
.so-pg-sankey-branch-cap path,
.so-pg-sankey-branch-cap circle {
  stroke: var(--so-good);
  fill: var(--so-good);
}
.so-pg-sankey-branch-vent path,
.so-pg-sankey-branch-vent circle {
  stroke: #c47b00;
  fill: #c47b00;
}
/* Stage labels */
.so-pg-sankey-stage-name {
  font-family: var(--so-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  fill: var(--so-ink);
}
.so-pg-sankey-stage-meta {
  font-family: var(--so-mono);
  font-size: 10px;
  fill: var(--so-ink-muted);
}
.so-pg-sankey-bom {
  font-family: var(--so-mono);
  font-size: 9px;
  fill: var(--so-accent);
}
/* Legend below the SVG */
.so-pg-sankey-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 12px 4px;
  font-size: 9px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-faint);
}
.so-pg-sankey-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.so-pg-sankey-legend-band {
  display: inline-block;
  width: 14px; height: 6px;
  background: var(--so-accent);
  opacity: 0.85;
  border-radius: 1px;
}
.so-pg-sankey-legend-cone {
  display: inline-block;
  width: 14px; height: 8px;
  background: var(--so-accent);
  opacity: 0.18;
  border: 1px dashed var(--so-accent);
  border-radius: 1px;
}
.so-pg-sankey-legend-loss {
  display: inline-block;
  width: 14px; height: 6px;
  background: #c47b00;
  opacity: 0.6;
  border-radius: 1px;
}
.so-pg-sankey-legend-cap {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--so-good);
}
.so-pg-sankey-legend-vent {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c47b00;
}

/* ═════════════════════════════════════════════════════════════════
   Inline editing affordance
   ═════════════════════════════════════════════════════════════════ */
.so-pg-inline {
  cursor: text;
  padding: 1px 4px;
  border-radius: 2px;
  border-bottom: 1px dashed transparent;
}
.so-pg-inline:hover {
  background: var(--so-bg);
  border-bottom-color: var(--so-rule-dark);
}
.so-pg-inline-empty {
  color: var(--so-ink-faint);
  font-style: italic;
}
.so-pg-inline-input {
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 2px 5px;
  background: var(--so-bg);
  border: 1px solid var(--so-accent);
  border-radius: 2px;
  color: var(--so-ink);
  outline: none;
  min-width: 60px;
  max-width: 200px;
}

/* ═════════════════════════════════════════════════════════════════
   Stage card expanded view (BoM + danger zone)
   ═════════════════════════════════════════════════════════════════ */
.so-pg-stage-head {
  cursor: pointer;
  user-select: none;
}
.so-pg-stage-toggle {
  background: none;
  border: none;
  color: var(--so-ink-faint);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  margin-left: auto;
}
.so-pg-stage-toggle:hover { color: var(--so-accent); }
.so-pg-stage[data-expanded="true"] {
  background: var(--so-bg);
  border: 1px solid var(--so-accent);
}
.so-pg-stage-expanded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--so-rule);
}
.so-pg-stage-sub-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.so-pg-stage-actions-inline {
  display: flex;
  gap: 6px;
}
.so-pg-stage-act {
  padding: 4px 10px;
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  color: var(--so-ink-muted);
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-stage-act:hover { color: var(--so-accent); border-color: var(--so-accent); }
.so-pg-stage-act-primary {
  background: var(--so-accent);
  color: white;
  border-color: var(--so-accent);
}
.so-pg-stage-act-primary:hover { background: var(--so-accent-soft); color: white; }
.so-pg-stage-act-primary:disabled {
  background: var(--so-rule);
  color: var(--so-ink-faint);
  border-color: var(--so-rule);
  cursor: not-allowed;
}
.so-pg-stage-act-danger:hover { color: var(--so-bad); border-color: var(--so-bad); }

/* Per-stage resources editor — energy_density and density_unit on
   input/output. The cascade engine bridges cross-unit stages (L \u2192
   kg etc.) via energy, so cross-unit boundaries with missing
   energy_density silently collapse the cascade. This surface makes
   the structural gap actionable: the 'needs bridge' marker calls it
   out per-side; the hint paragraph gives reference values. */
.so-pg-stage-res {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-stage-res-bridge-needed {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-warn);
  border: 1px solid var(--so-warn);
  border-radius: 2px;
  padding: 1px 6px;
}
.so-pg-stage-res-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 4px;
}
.so-pg-stage-res-table th,
.so-pg-stage-res-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--so-rule);
  vertical-align: middle;
  text-align: left;
}
.so-pg-stage-res-table th {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: var(--so-bg-darker);
}
.so-pg-stage-res-side {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  width: 64px;
}
.so-pg-stage-res-name {
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-stage-res-unit {
  font-family: var(--so-mono);
  color: var(--so-ink-faint);
}
.so-pg-stage-res-missing {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-warn);
  cursor: help;
  padding: 1px 5px;
  border: 1px solid var(--so-warn);
  border-radius: 2px;
}
.so-pg-stage-res-hint {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(196, 122, 58, 0.08);
  border-left: 3px solid var(--so-warn);
  border-radius: 0 3px 3px 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--so-ink-faint);
}
.so-pg-stage-res-hint strong { color: var(--so-ink); }
.so-pg-stage-res-hint code {
  font-family: var(--so-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  color: var(--so-ink);
}

/* Per-stage time series. One small inline SVG chart per contracted
   field, showing the synthetic baseline as a dashed line, the
   observation points overlaid (synthetic in grey, live in green),
   and a confidence band (mean ± std of last 10) when N≥4. Built
   from the workspace's sosa_observations \u2014 the operational
   manifestation of "compounding" from the thesis. */
.so-pg-ts {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-ts-summary {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--so-ink);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 0;
}
.so-pg-ts-summary-meta {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-left: auto;
}
.so-pg-ts-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}
.so-pg-ts-field {
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 6px 8px;
}
.so-pg-ts-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.so-pg-ts-label {
  font-family: var(--so-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--so-ink);
}
.so-pg-ts-property {
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-faint);
}
.so-pg-ts-live-tag {
  font-family: var(--so-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-good, #6f9a5b);
  border: 1px solid var(--so-good, #6f9a5b);
  border-radius: 2px;
  padding: 1px 5px;
  margin-left: auto;
}
.so-pg-ts-chart-slot { min-height: 80px; }
.so-pg-ts-loading,
.so-pg-ts-empty,
.so-pg-ts-error {
  font-size: 11px;
  font-style: italic;
  color: var(--so-ink-faint);
  padding: 24px 8px;
  text-align: center;
}
.so-pg-ts-error { color: var(--so-bad); }
.so-pg-ts-svg {
  background: var(--so-bg);
  border-radius: 2px;
}
.so-pg-ts-bg {
  fill: var(--so-bg);
  stroke: var(--so-rule);
  stroke-width: 0.5;
}
.so-pg-ts-band {
  fill: rgba(140, 180, 120, 0.15);
}
.so-pg-ts-band-mean {
  stroke: var(--so-good, #6f9a5b);
  stroke-width: 1;
}
.so-pg-ts-baseline {
  stroke: var(--so-ink-faint);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.so-pg-ts-pt {
  cursor: help;
}
.so-pg-ts-pt-syn {
  fill: var(--so-ink-faint);
  stroke: var(--so-bg);
  stroke-width: 1;
}
.so-pg-ts-pt-live {
  fill: var(--so-good, #6f9a5b);
  stroke: var(--so-bg);
  stroke-width: 1.5;
}
.so-pg-ts-tick {
  fill: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 8.5px;
}
.so-pg-ts-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  padding-top: 4px;
}
.so-pg-ts-sum-live { color: var(--so-good, #6f9a5b); }
.so-pg-ts-sum-baseline { color: var(--so-ink-muted); }
.so-pg-ts-sum-band {
  color: var(--so-good, #6f9a5b);
  font-style: italic;
}

/* 2E: derivation overlays for sensors with a derivation block.
   Three layers stacked above the standard observation chart:
     - base_curve (faint dashed): "what the synthetic shape says"
     - confidence band (purple translucent): widens between samples,
       collapses at sample points
     - main curve (purple solid): "what we believe after recalibration"
     - sample dots (purple, larger than observation dots): ground
       truth from the recalibrate_against sampler
   The purple palette matches the sensor_advisor proposal panel so
   the operator perceives "this curve is the derivation evaluator's
   output" as a coherent visual story across the page. */
.so-pg-ts-method-tag {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  background: rgba(140, 90, 180, 0.12);
  color: rgb(110, 70, 150);
  border-radius: 8px;
  margin-left: 6px;
  cursor: help;
}
.so-pg-ts-deriv-base {
  stroke: rgba(110, 70, 150, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}
.so-pg-ts-deriv-main {
  stroke: rgb(110, 70, 150);
  stroke-width: 1.8;
}
.so-pg-ts-deriv-band {
  fill: rgba(140, 90, 180, 0.14);
  stroke: none;
}
.so-pg-ts-deriv-sample {
  fill: rgb(110, 70, 150);
  stroke: var(--so-bg);
  stroke-width: 1.5;
  cursor: help;
}
.so-pg-ts-sum-deriv {
  color: rgb(110, 70, 150);
  font-family: var(--so-mono);
}

/* Per-stage operations editor — power and labor consumption per
   unit of input. Feeds the economics rollup directly via
   electricity_price × kWh and labor_rate × hours. Two scalar
   fields, inline-editable, with the derived euro-per-input-unit
   shown in the right column so the user can see the economic
   impact as they tune. */
.so-pg-stage-ops {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-stage-ops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 4px;
}
.so-pg-stage-ops-table td {
  padding: 5px 8px;
  vertical-align: middle;
}
.so-pg-stage-ops-label {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  width: 70px;
}
.so-pg-stage-ops-unit {
  font-family: var(--so-mono);
  font-size: 10.5px;
  color: var(--so-ink-faint);
  white-space: nowrap;
}
.so-pg-stage-ops-derived-cell {
  font-family: var(--so-mono);
  font-size: 10.5px;
  color: var(--so-ink-faint);
  text-align: right;
}
.so-pg-stage-ops-derived {
  color: var(--so-ink);
  font-weight: 500;
}
.so-pg-stage-ops-zero {
  color: var(--so-ink-faint);
  font-style: italic;
}

/* Per-stage sensors editor. SOSA-aligned: each row is a
   sosa:Sensor / sosa:Sampler / xi:simops/Sensor/Predicted with
   observes (the property URI), unit, feature_of_interest, cadence.
   The type-chip carries the visual weight; the rest is text. Same
   inline-edit affordance as the resources/operations/sidestream
   editors so the click router + commit path are uniform. */
.so-pg-stage-sen {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-stage-sen-empty {
  font-size: 11.5px;
  color: var(--so-ink-faint);
  font-style: italic;
  padding: 8px 4px;
}
.so-pg-stage-sen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 4px;
}
.so-pg-stage-sen-table th,
.so-pg-stage-sen-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--so-rule);
  text-align: left;
  vertical-align: middle;
}
.so-pg-stage-sen-table th {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: var(--so-bg-darker);
}
.so-pg-sen-id {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink);
}
.so-pg-sen-type-chip {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
  margin-right: 6px;
  vertical-align: middle;
}
.so-pg-sen-type-chip[data-type="sosa:Sensor"] {
  background: rgba(80, 130, 200, 0.12);
  color: rgb(60, 100, 160);
}
.so-pg-sen-type-chip[data-type="sosa:Sampler"] {
  background: rgba(180, 130, 60, 0.12);
  color: rgb(150, 100, 40);
}
.so-pg-sen-type-chip[data-type="xi:simops/Sensor/Predicted"] {
  background: rgba(140, 90, 180, 0.12);
  color: rgb(110, 70, 150);
}
.so-pg-sen-derived-tag {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 2px;
  background: rgba(140, 90, 180, 0.18);
  color: rgb(110, 70, 150);
}
.so-pg-sen-del {
  background: none;
  border: 1px solid transparent;
  color: var(--so-ink-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 0 6px;
  border-radius: 2px;
  line-height: 1;
}
.so-pg-sen-del:hover {
  border-color: var(--so-warn);
  color: var(--so-warn);
}

/* Per-stage sidestream editor. Inline-editable rows for capture
   fraction, value/unit USD, and current disposition. The credit
   column shows how each stream contributes to the economic rollup,
   making invisible revenue visible. */
.so-pg-stage-ss-editor {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-stage-ss-empty {
  font-size: 11.5px;
  color: var(--so-ink-faint);
  font-style: italic;
  padding: 8px 4px;
}
.so-pg-stage-ss-empty code {
  font-family: var(--so-mono);
  font-style: normal;
  padding: 1px 4px;
  background: var(--so-bg-darker);
  border-radius: 2px;
}
.so-pg-stage-ss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 4px;
}
.so-pg-stage-ss-table th,
.so-pg-stage-ss-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--so-rule);
  text-align: left;
  vertical-align: top;
}
.so-pg-stage-ss-table th {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: var(--so-bg-darker);
}
.so-pg-stage-ss-name-cell {
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-stage-ss-desc {
  font-size: 10.5px;
  color: var(--so-ink-faint);
  margin-top: 2px;
  cursor: help;
}
.so-pg-stage-ss-cap-cell {
  font-family: var(--so-mono);
  white-space: nowrap;
}
.so-pg-stage-ss-unit {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  white-space: nowrap;
}
.so-pg-stage-ss-credit-cell {
  text-align: right;
  font-family: var(--so-mono);
}
.so-pg-stage-ss-credit {
  color: var(--so-good, #6f9a5b);
  font-weight: 600;
}
.so-pg-stage-ss-needs-value {
  color: var(--so-warn);
  font-size: 10px;
  font-style: italic;
}
.so-pg-stage-ss-no-credit {
  color: var(--so-ink-faint);
  font-size: 10px;
}

/* Per-stage economics breakdown. Surfaces the components that make
   up opex_per_input_unit so the user can see WHERE the cost number
   comes from (materials + energy + labor + carbon - sidestream
   credits). See whitepapers/simops-learning-digital-twin.md §4. */
.so-pg-stage-econ {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-stage-econ-unit {
  font-size: 9.5px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  letter-spacing: 0.04em;
}
.so-pg-stage-econ-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 4px;
}
.so-pg-stage-econ-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-stage-econ-source {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-pg-stage-econ-value {
  font-family: var(--so-mono);
  text-align: right;
  white-space: nowrap;
}
.so-pg-stage-econ-zero td {
  color: var(--so-ink-faint);
  opacity: 0.6;
}
.so-pg-stage-econ-credit td {
  color: var(--so-good, #6f9a5b);
}
.so-pg-stage-econ-table tfoot td {
  border-top: 1px solid var(--so-rule-dark);
  border-bottom: none;
  padding-top: 6px;
  font-weight: 600;
}
.so-pg-stage-econ-net-positive td { color: var(--so-ink); }
.so-pg-stage-econ-net-negative td {
  color: var(--so-good, #6f9a5b);
  font-style: italic;
}
.so-pg-stage-econ-warnings {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--so-warn);
}
.so-pg-stage-econ-warnings summary {
  cursor: help;
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.so-pg-stage-econ-warnings ul {
  margin: 4px 0 0;
  padding-left: 16px;
  color: var(--so-ink-faint);
}

.so-pg-stage-danger {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--so-rule);
  display: flex;
  justify-content: flex-end;
}

/* BoM table */
.so-pg-bom-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 11px;
}
.so-pg-bom-table th,
.so-pg-bom-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-bom-table th {
  font-family: var(--so-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-faint);
  background: var(--so-bg-darker);
}
.so-pg-bom-empty td {
  text-align: center;
  font-style: italic;
  color: var(--so-ink-faint);
  padding: 12px;
}
.so-pg-bom-table tfoot td {
  font-weight: 500;
  border-top: 1px solid var(--so-rule-dark);
  border-bottom: none;
  padding-top: 6px;
}

/* BoM resolution badge — replaces the bare "Bill of materials" head
   when supply_chain_oracle has priced the items. This is the
   procurement-provenance surface; the entry point to agentic
   procurement. */
.so-pg-bom-resolved {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: rgba(140, 180, 120, 0.08);
  border-left: 3px solid var(--so-good, #6f9a5b);
  border-radius: 0 3px 3px 0;
  font-size: 11px;
}
.so-pg-bom-resolved-tag {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--so-good, #6f9a5b);
  padding: 2px 6px;
  border: 1px solid var(--so-good, #6f9a5b);
  border-radius: 2px;
}
.so-pg-bom-resolved-meta { color: var(--so-ink-faint); }
.so-pg-bom-resolved-meta code {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink);
  padding: 0 3px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}
.so-pg-bom-resolved-note { flex-basis: 100%; }
.so-pg-bom-resolved-note summary {
  font-size: 10px;
  color: var(--so-ink-faint);
  cursor: pointer;
  margin-top: 2px;
}
.so-pg-bom-resolved-note > div {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  border-left: 2px solid var(--so-rule);
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink);
}

/* Per-item risk-flag chips inline under each BoM item name. */
.so-pg-bom-risks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.so-pg-bom-risk {
  font-family: var(--so-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  color: var(--so-ink-faint);
  cursor: help;
}
.so-pg-bom-risk-single_source     { color: var(--so-warn); border-color: var(--so-warn); }
.so-pg-bom-risk-seasonal           { color: var(--so-warn); border-color: var(--so-warn); }
.so-pg-bom-risk-quality_variable   { color: var(--so-warn); border-color: var(--so-warn); }
.so-pg-bom-risk-supply_tight       { color: var(--so-bad);  border-color: var(--so-bad);  }
.so-pg-bom-risk-substitution_risk  { color: var(--so-bad);  border-color: var(--so-bad);  }
.so-pg-bom-risk-sev-low            { color: var(--so-ink-faint); border-color: var(--so-rule); }
.so-pg-bom-risk-sev-medium         { color: var(--so-warn); border-color: var(--so-warn); }
.so-pg-bom-risk-sev-high           { color: var(--so-bad);  border-color: var(--so-bad);  }

.so-pg-bom-source-detail {
  font-size: 10.5px;
  color: var(--so-ink-faint);
  cursor: help;
}

/* Process-level risks panel under the BoM table — oracle's
   cross-cutting supply-chain observations. */
.so-pg-bom-risks-panel {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--so-bg-darker);
  border-left: 3px solid var(--so-warn);
  border-radius: 0 3px 3px 0;
}
.so-pg-bom-risks-panel-head {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-warn);
  margin-bottom: 6px;
}
.so-pg-bom-risks-panel ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 11px;
  line-height: 1.55;
}
.so-pg-bom-risks-panel li {
  margin-bottom: 4px;
}

/* Toast layer — transient feedback for completed agent operations.
   Anchored to viewport top-right so it never overlaps the workspace
   content; auto-dismisses after a few seconds. */
.so-pg-toast-layer {
  position: fixed;
  top: 70px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.so-pg-toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 380px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-left: 4px solid var(--so-good, #6f9a5b);
  border-radius: 4px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  line-height: 1.5;
  animation: so-pg-toast-in 200ms ease-out;
}
.so-pg-toast-error    { border-left-color: var(--so-bad); }
.so-pg-toast-info     { border-left-color: var(--so-accent); }
.so-pg-toast-leaving {
  animation: so-pg-toast-out 250ms ease-in forwards;
}
@keyframes so-pg-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes so-pg-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
.so-pg-toast-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.so-pg-toast-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--so-good, #6f9a5b);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.so-pg-toast-error .so-pg-toast-icon { background: var(--so-bad); }
.so-pg-toast-info  .so-pg-toast-icon { background: var(--so-accent); }
.so-pg-toast-title {
  flex: 1;
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-toast-close {
  background: none;
  border: none;
  color: var(--so-ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.so-pg-toast-close:hover { color: var(--so-ink); }
.so-pg-toast-body {
  margin-top: 4px;
  color: var(--so-ink-faint);
  font-size: 11px;
}

/* Process-section actions row */
.so-pg-process-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.so-pg-add-stage,
.so-pg-add-variation {
  padding: 6px 12px;
  font-size: 11px;
  font-family: var(--so-mono);
  border: 1px dashed var(--so-rule-dark);
  background: transparent;
  color: var(--so-accent);
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-add-stage:hover,
.so-pg-add-variation:hover {
  background: var(--so-accent-soft);
  color: white;
  border-color: var(--so-accent);
  border-style: solid;
}
.so-pg-add-variation:disabled {
  color: var(--so-ink-faint);
  border-color: var(--so-rule);
  cursor: not-allowed;
}
.so-pg-add-variation:disabled:hover {
  background: transparent;
  color: var(--so-ink-faint);
  border-color: var(--so-rule);
}

/* Variation actions row needs spacing */
.so-pg-var-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 8px;
}

/* ═════════════════════════════════════════════════════════════════
   Workbench center tabs (Process / Simulations)
   ═════════════════════════════════════════════════════════════════ */
.so-pg-tabs {
  display: flex;
  gap: 0;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--so-rule);
  padding: 0 4px;
}
.so-pg-tab {
  padding: 9px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--so-ink-muted);
  font-size: 12px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.so-pg-tab[data-active="true"] {
  color: var(--so-accent);
  border-bottom-color: var(--so-accent);
}
.so-pg-tab:hover { color: var(--so-ink); }
.so-pg-tab-meta {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--so-mono);
  color: var(--so-ink-faint);
  padding-right: 8px;
}

/* Variation edit-mode badge in the Process header */
.so-pg-var-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: #fde6c8;
  color: #7a4b00;
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 3px;
  border-left: 3px solid #c47b00;
}
.so-pg-var-badge code {
  font-family: var(--so-mono);
  background: rgba(255,255,255,0.6);
  padding: 1px 5px;
  border-radius: 2px;
}
.so-pg-var-badge-back {
  background: white;
  border: 1px solid #c47b00;
  color: #7a4b00;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 2px;
  cursor: pointer;
  margin-left: 4px;
}
.so-pg-var-badge-back:hover { background: #7a4b00; color: white; }

/* Variation rows — "Edit" affordance + editing-active highlight */
.so-pg-var-row[data-editing="true"] {
  background: #fdf5e6;
  border-left: 3px solid #c47b00;
  padding-left: 5px;
}
.so-pg-var-editing-badge {
  font-family: var(--so-mono);
  font-size: 9px;
  text-transform: uppercase;
  background: #c47b00;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}
.so-pg-var-edit-btn {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  padding: 3px 8px;
  font-size: 10px;
  font-family: var(--so-mono);
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-var-edit-btn:hover { color: var(--so-accent); border-color: var(--so-accent); }

/* Stage card head — replaces the tiny chevron with named buttons */
.so-pg-stage-head-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.so-pg-stage-head-btn {
  padding: 3px 10px;
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  color: var(--so-ink-muted);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.so-pg-stage-head-btn:hover { color: var(--so-accent); border-color: var(--so-accent); }
.so-pg-stage-head-btn-primary {
  background: var(--so-accent);
  color: white;
  border-color: var(--so-accent);
}
.so-pg-stage-head-btn-primary:hover { background: var(--so-accent-soft); }
.so-pg-stage-bom-count {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 2px;
  background: var(--so-accent);
  color: white;
  border-radius: 8px;
  font-size: 9px;
  min-width: 14px;
  text-align: center;
}

/* ═════════════════════════════════════════════════════════════════
   Assumptions section
   ═════════════════════════════════════════════════════════════════ */
.so-pg-asm-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.so-pg-asm-row {
  display: grid;
  grid-template-columns: 1fr 160px 80px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  font-size: 12px;
}
.so-pg-asm-row:hover { background: var(--so-bg-darker); }
.so-pg-asm-key { color: var(--so-ink); font-family: var(--so-mono); font-size: 11px; }
.so-pg-asm-value {
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  background: var(--so-bg);
  color: var(--so-ink);
}
.so-pg-asm-value:focus { outline: none; border-color: var(--so-accent); }
.so-pg-asm-default {
  font-size: 9px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  color: var(--so-ink-faint);
  letter-spacing: 0.5px;
}
.so-pg-asm-override { color: var(--so-accent); font-weight: 600; }
.so-pg-asm-help {
  font-size: 11px;
  color: var(--so-ink-faint);
  font-style: italic;
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--so-rule);
}

/* ═════════════════════════════════════════════════════════════════
   Simulations tab
   ═════════════════════════════════════════════════════════════════ */
.so-pg-sim-intro {
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--so-ink-muted);
  background: var(--so-bg-darker);
  border-left: 3px solid var(--so-accent);
  border-radius: 0 3px 3px 0;
}
.so-pg-sim-empty {
  padding: 24px;
  text-align: center;
  color: var(--so-ink-faint);
  font-size: 12px;
  background: var(--so-bg-darker);
  border: 1px dashed var(--so-rule);
  border-radius: 3px;
}
.so-pg-sim-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.so-pg-sim-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  font-size: 12px;
}
.so-pg-sim-row:hover { border-color: var(--so-accent); cursor: pointer; }
.so-pg-sim-id { font-family: var(--so-mono); font-size: 10px; color: var(--so-ink-faint); }
.so-pg-sim-name { flex: 1; color: var(--so-ink); }
.so-pg-sim-open {
  background: var(--so-accent);
  color: white;
  border: 1px solid var(--so-accent);
  padding: 3px 10px;
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-sim-actions { display: flex; justify-content: flex-end; }

/* Simulation detail */
.so-pg-sim-back {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  padding: 3px 10px;
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 12px;
}
.so-pg-sim-back:hover { color: var(--so-accent); border-color: var(--so-accent); }
.so-pg-sim-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.so-pg-sim-block { padding: 8px 4px; }
.so-pg-sim-block h4 {
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  letter-spacing: 1px;
  margin: 0 0 8px;
}
.so-pg-sim-asm {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
}
.so-pg-sim-asm dt { font-family: var(--so-mono); font-size: 10px; color: var(--so-ink-muted); }
.so-pg-sim-asm dd { margin: 0; font-family: var(--so-mono); font-size: 11px; }
.so-pg-sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.so-pg-sim-table th,
.so-pg-sim-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--so-rule);
  font-family: var(--so-mono);
}
.so-pg-sim-table th {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: var(--so-bg-darker);
}
.so-pg-sim-err { color: var(--so-bad); font-style: italic; }

/* Calibration deltas — synthetic-vs-live comparison on a saved
   simulation. This is the closing piece of the digital-twin loop:
   what the synthetic predictions actually looked like once live
   data arrived. See whitepapers/simops-learning-digital-twin.md §6. */
.so-pg-sim-calibration-loading,
.so-pg-sim-calibration-empty,
.so-pg-sim-calibration-error {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--so-ink-faint);
  padding: 8px 12px;
  background: var(--so-bg-darker);
  border-left: 3px solid var(--so-rule);
  border-radius: 0 3px 3px 0;
}
.so-pg-sim-calibration-error { color: var(--so-bad); }
.so-pg-sim-calibration-help {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--so-ink-faint);
  margin-bottom: 8px;
}
.so-pg-sim-cal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.so-pg-sim-cal-table th,
.so-pg-sim-cal-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--so-rule);
  vertical-align: top;
}
.so-pg-sim-cal-table th {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  background: var(--so-bg-darker);
}
.so-pg-sim-cal-row code {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink);
}
.so-pg-sim-cal-property {
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-faint);
  margin-top: 2px;
}
.so-pg-sim-cal-synthetic,
.so-pg-sim-cal-live {
  font-family: var(--so-mono);
}
.so-pg-sim-cal-n {
  font-size: 9.5px;
  color: var(--so-ink-faint);
  margin-top: 2px;
}
.so-pg-sim-cal-delta {
  font-family: var(--so-mono);
  font-weight: 600;
  text-align: right;
}
.so-pg-sim-cal-dir-over  { color: var(--so-good, #6f9a5b); }
.so-pg-sim-cal-dir-under { color: var(--so-warn); }
.so-pg-sim-cal-dir-flat  { color: var(--so-ink-faint); }
.so-pg-sim-cal-sign {
  font-size: 13px;
  display: inline-block;
  width: 14px;
  text-align: center;
}

.so-pg-sim-narrative {
  background: var(--so-bg-darker);
  padding: 12px 14px;
  border-left: 3px solid var(--so-accent);
  border-radius: 0 3px 3px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-pg-sim-narrative p { margin: 0 0 8px; }
.so-pg-sim-narrative p:last-child { margin-bottom: 0; }

/* Comparator structured output — when the comparator returns JSON
   shaped like { winner_by_metric, trade_offs, recommendation,
   next_questions }, render it natively instead of as a prose blob. */
.so-pg-comp-structured {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.so-pg-comp-narrative {
  background: var(--so-bg-darker);
  padding: 12px 14px;
  border-left: 3px solid var(--so-accent);
  border-radius: 0 3px 3px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--so-ink);
  white-space: pre-wrap;
}
.so-pg-comp-block h5 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}
.so-pg-comp-table {
  width: auto;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 12px;
}
.so-pg-comp-table th,
.so-pg-comp-table td {
  padding: 5px 12px 5px 0;
  text-align: left;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-comp-table th {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}
.so-pg-comp-metric { color: var(--so-ink); }
.so-pg-comp-winner code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: rgba(140, 180, 120, 0.12);
  border: 1px solid rgba(140, 180, 120, 0.3);
  border-radius: 2px;
  color: var(--so-ink);
}
.so-pg-comp-tradeoff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.so-pg-comp-tradeoff {
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 10px 12px;
}
.so-pg-comp-tradeoff-head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-comp-tradeoff-head code {
  font-family: var(--so-mono);
  font-size: 11px;
  font-weight: 600;
}
.so-pg-comp-tradeoff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.so-pg-comp-col-label {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 4px;
}
.so-pg-comp-wins .so-pg-comp-col-label { color: #6f9a5b; }
.so-pg-comp-loses .so-pg-comp-col-label { color: var(--so-warn); }
.so-pg-comp-tradeoff ul {
  margin: 0;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.5;
}
.so-pg-comp-tradeoff li { margin-bottom: 2px; }
.so-pg-comp-empty {
  font-size: 11px;
  color: var(--so-ink-faint);
  font-style: italic;
}
.so-pg-comp-recommendation {
  background: rgba(140, 180, 120, 0.08);
  border-left: 3px solid #6f9a5b;
  border-radius: 0 3px 3px 0;
  padding: 10px 14px;
}
.so-pg-comp-recommendation h5 { color: #6f9a5b; margin-bottom: 4px; }
.so-pg-comp-recommendation div {
  font-size: 13px;
  line-height: 1.5;
}
.so-pg-comp-questions {
  margin: 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.55;
}
.so-pg-comp-questions li { margin-bottom: 4px; }

/* ═════════════════════════════════════════════════════════════════
   Account badge (in the SimOps header, replaces the bottom-right
   floating widget that was overlapping the companion input)
   ═════════════════════════════════════════════════════════════════ */
#so-header .so-account {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--so-mono);
  color: var(--so-ink-muted);
  white-space: nowrap;
  margin-left: 6px;
}
.so-account-initial {
  display: inline-flex;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--so-accent);
  color: var(--so-mustard, #f6d4a1);
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
}
.so-account-name {
  color: var(--so-ink);
  font-family: var(--so-mono);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-account-signout,
.so-account-signin-link {
  color: var(--so-ink-faint);
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 9px;
}
.so-account-signout:hover,
.so-account-signin-link:hover {
  color: var(--so-accent);
}
.so-account-signin-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9px;
}
.so-account-divider { color: var(--so-rule-dark); }

/* Action chip — visible diagnostic of what each companion turn dispatched.
   Shows "actions: edit_process · annotate × 2" under each turn that
   fired at least one action. Lets the user see whether the companion is
   actually proposing changes or just observing. */
.so-rc-turn-actions {
  margin-top: 4px;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--so-ink-faint);
  text-transform: uppercase;
}
.so-rc-turn-failnote { color: var(--so-bad); font-style: italic; }

/* ═════════════════════════════════════════════════════════════════
   New-simulation modal — mode selector + sweep presets
   ═════════════════════════════════════════════════════════════════ */
.so-pg-newsim-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin: 4px 0;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  cursor: pointer;
}
.so-pg-newsim-mode:hover { border-color: var(--so-accent); }
.so-pg-newsim-mode input[type="radio"] { margin-top: 3px; }
.so-pg-newsim-mode-label {
  flex: 1;
  font-size: 12px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-pg-newsim-mode-label strong {
  color: var(--so-accent);
  font-weight: 600;
}

.so-pg-newsim-advanced {
  margin-top: 6px;
  border-top: 1px dashed var(--so-rule);
  padding-top: 8px;
}
.so-pg-newsim-advanced > summary {
  cursor: pointer;
  font-size: 11px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-faint);
  padding: 4px 0;
}
.so-pg-newsim-advanced[open] > summary { color: var(--so-accent); }

.so-pg-newsim-sweep-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.so-pg-newsim-preset {
  padding: 4px 10px;
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--so-bg);
  color: var(--so-accent);
  border: 1px solid var(--so-rule-dark);
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-newsim-preset:hover {
  background: var(--so-accent);
  color: white;
  border-color: var(--so-accent);
}

/* Diff modal destructive-edit variant. The companion's "stages: []"
   patches can silently nuke state; the modal now flags any edit that
   reduces the stage count, opens the YAML inspector by default, and
   requires an explicit click on a red button to accept (no Cmd-Enter
   shortcut for destructive edits). */
.so-pg-edit-modal[data-destructive="true"] {
  border-left: 4px solid var(--so-bad);
}
.so-pg-edit-modal[data-destructive="true"] .so-pg-edit-head {
  color: var(--so-bad);
  font-weight: 600;
}
.so-pg-edit-warn {
  color: var(--so-bad);
  font-weight: 600;
  font-family: var(--so-mono);
}
.so-pg-edit-dropped {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(229, 57, 53, 0.08);
  border-left: 3px solid var(--so-bad);
  font-size: 11px;
  line-height: 1.6;
}
.so-pg-edit-dropped code {
  font-family: var(--so-mono);
  background: white;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
}
.so-pg-edit-accept-danger {
  background: var(--so-bad);
  border-color: var(--so-bad);
  color: white;
}
.so-pg-edit-accept-danger:hover {
  background: #c62828;
  border-color: #c62828;
}

/* BoM resolver error state — surfaces failures inline in the
   expanded stage view rather than swallowing them to the console. */
.so-pg-bom-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(229, 57, 53, 0.06);
  border-left: 3px solid var(--so-bad);
  border-radius: 0 3px 3px 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-pg-bom-error strong { color: var(--so-bad); }
.so-pg-bom-error details { margin-top: 6px; }
.so-pg-bom-error summary {
  cursor: pointer;
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-pg-bom-error pre {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  font-size: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Files-API divergence banner — surfaces when state was recovered
   by replaying the action log instead of reading the canonical
   simops/process.yaml. Uses a more muted red than full failure
   because the user's data IS intact — just via a fallback path. */
.so-pg-files-divergence {
  margin: 12px 0 14px;
  padding: 12px 14px 14px;
  background: rgba(204, 51, 51, 0.06);
  border-left: 4px solid var(--so-bad);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-pg-files-divergence-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--so-bad);
}
.so-pg-files-divergence-head strong { color: var(--so-bad); }
.so-pg-files-divergence-icon { font-size: 14px; line-height: 1; }
.so-pg-files-divergence-body { margin: 4px 0; }
.so-pg-files-divergence-detail {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--so-ink-faint);
}
.so-pg-files-divergence code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 4px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}

/* Cascade viability banner — flags the energy_density unit-bridge
   failure mode BEFORE the user sees the cascade collapse to zero
   and wonders why. Sits between the KPI strip and the sankey so the
   amber bar is impossible to miss. */
.so-pg-cascade-warn {
  margin: 12px 0 14px;
  padding: 12px 14px 14px;
  background: rgba(196, 122, 58, 0.08);
  border-left: 4px solid var(--so-warn);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-pg-cascade-warn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--so-warn);
}
.so-pg-cascade-warn-head strong { color: var(--so-warn); }
.so-pg-cascade-warn-icon {
  font-size: 14px;
  line-height: 1;
}
.so-pg-cascade-warn-body,
.so-pg-cascade-warn-detail,
.so-pg-cascade-warn-fix {
  margin: 4px 0;
}
.so-pg-cascade-warn-detail {
  color: var(--so-ink-faint);
  font-size: 11px;
}
.so-pg-cascade-warn-fix {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(196, 122, 58, 0.3);
}
.so-pg-cascade-warn-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--so-warn);
  color: #fff;
  border: 1px solid var(--so-warn);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  margin: 0 2px;
}
.so-pg-cascade-warn-cta:hover {
  background: var(--so-warn-hover, var(--so-warn));
  filter: brightness(1.1);
}
.so-pg-cascade-warn-cta code {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  margin-left: 2px;
}
.so-pg-cascade-warn code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 4px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
}
.so-pg-cascade-warn em {
  font-style: italic;
  color: var(--so-accent);
}

/* Companion thinking indicator with elapsed seconds. The indicator
   shows "Companion is thinking 12s" and adds a hint after 60s
   ("long turn, still working") + 120s ("taking unusually long").
   Hard timeout is 180s. */
.so-rc-thinking #so-rc-thinking-elapsed {
  font-family: var(--so-mono);
  color: var(--so-accent);
}
/* When the elapsed text contains a long warning, slightly amber it.
   This is a visual cue achievable just from the text content; no
   need for separate state. */

/* Retry button on failed companion turns. */
.so-rc-turn-err {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.so-rc-turn-retry {
  background: var(--so-bg);
  border: 1px solid var(--so-bad);
  color: var(--so-bad);
  padding: 3px 9px;
  font-size: 10px;
  font-family: var(--so-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 2px;
  cursor: pointer;
}
.so-rc-turn-retry:hover {
  background: var(--so-bad);
  color: white;
}

/* ═════════════════════════════════════════════════════════════════
   Pipeline visibility panel (Activity tab, Step E)
   The single best diagnostic surface — last save, last cascade,
   recent actions. Surfaces what's flowing through the data
   pipeline so the user (and Kilo!) don't have to console-dive.
   ═════════════════════════════════════════════════════════════════ */
.so-pipeline-panel {
  background: var(--so-bg);
  border-bottom: 1px solid var(--so-rule);
  padding: 8px 10px 10px;
}
.so-pipeline-title {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--so-accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.so-pipeline-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-pipeline-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  font-family: var(--so-mono);
}
.so-pipeline-row-actions { align-items: flex-start; }
.so-pipeline-label {
  width: 90px;
  flex-shrink: 0;
  color: var(--so-ink-faint);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pipeline-value {
  flex: 1;
  color: var(--so-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.so-pipeline-time {
  color: var(--so-ink-faint);
  font-size: 9px;
  flex-shrink: 0;
}
.so-pipeline-empty {
  font-style: italic;
  color: var(--so-ink-faint);
}
.so-pipeline-tag {
  font-family: var(--so-mono);
  font-size: 9px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--so-ink-muted);
}
.so-pipeline-sha {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-accent);
  background: var(--so-bg-darker);
  padding: 1px 4px;
  border-radius: 2px;
}
.so-pipeline-msg {
  color: var(--so-ink-muted);
  font-style: italic;
}
.so-pipeline-ok { color: var(--so-good); font-weight: 600; }
.so-pipeline-fail { color: var(--so-bad); font-weight: 600; }
.so-pipeline-degraded { color: var(--so-warn); font-weight: 600; }
.so-pipeline-degraded-detail {
  margin-left: 8px;
  color: var(--so-ink-faint);
  font-size: 10.5px;
}
.so-pipeline-action-chip {
  font-family: var(--so-mono);
  font-size: 9px;
  background: var(--so-bg-darker);
  color: var(--so-accent);
  border: 1px solid var(--so-rule);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.so-pipeline-action-failed {
  color: var(--so-bad);
  border-color: var(--so-bad);
}

/* Recent agent_card.updated pills in the pipeline strip. Appears
   only when one or more agents the workspace uses have had their
   card updated recently. Companion piece to the fermi #5 platform
   capability that will eventually fire these events natively. */
.so-pipeline-row-agent-updates .so-pipeline-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.so-pipeline-agent-update {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--so-bg);
  border: 1px solid var(--so-accent);
  border-radius: 3px;
  font-size: 10.5px;
  white-space: nowrap;
  cursor: help;
}
.so-pipeline-agent-update code {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-accent);
  background: none;
  border: none;
  padding: 0;
}
.so-pipeline-agent-update-time {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  margin-left: 2px;
}

/* In-flight sim chips in the pipeline panel — appears only when one
   or more sims are running in the background. Ticks every second
   to update elapsed time. */
.so-pipeline-row-sims .so-pipeline-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.so-pipeline-sim-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-accent);
  border-radius: 3px;
  font-size: 10.5px;
  white-space: nowrap;
}
.so-pipeline-sim-phase {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.so-pipeline-sim-elapsed {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}
.so-pipeline-sim-name { color: var(--so-ink); }
.so-pipeline-sim-progress {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
}
.so-pipeline-sim-src {
  font-family: var(--so-mono);
  font-size: 8.5px;
  color: var(--so-warn);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.so-pipeline-sim-done {
  color: var(--so-good);
  font-weight: 600;
}
.so-pipeline-sim-failed {
  color: var(--so-bad);
  font-weight: 600;
}

/* In-flight sim panel in the Simulations tab itself — wider rows
   with more detail than the activity-panel chips. */
.so-pg-sim-running {
  margin: 12px 0 16px;
  padding: 10px 12px;
  background: var(--so-bg-darker);
  border-left: 3px solid var(--so-accent);
  border-radius: 0 3px 3px 0;
}
.so-pg-sim-running-title {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  margin-bottom: 6px;
}
.so-pg-sim-running-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-pg-sim-running-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
}
.so-pg-sim-running-name {
  font-weight: 500;
  color: var(--so-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-pg-sim-running-progress,
.so-pg-sim-running-elapsed {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-faint);
}
.so-pg-sim-running-phase {
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-accent);
}
.so-pg-sim-running-source {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-warn);
  padding: 1px 5px;
  border: 1px solid var(--so-warn);
  border-radius: 2px;
}
.so-pg-sim-running-done { color: var(--so-good); font-weight: 600; }
.so-pg-sim-running-failed { color: var(--so-bad); font-weight: 600; }
.so-pg-sim-running-open {
  padding: 2px 8px;
  font-size: 10px;
  background: var(--so-accent);
  color: #fff;
  border: 1px solid var(--so-accent);
  border-radius: 2px;
  cursor: pointer;
}

/* Activity feed (cleaned up from the inline fallback) */
.so-act-feed-row {
  padding: 6px 10px;
  border-bottom: 1px solid var(--so-rule);
  font-size: 11px;
}
.so-act-feed-expandable { cursor: pointer; }
.so-act-feed-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.so-act-feed-kind {
  font-family: var(--so-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-accent);
  white-space: nowrap;
}
.so-act-feed-count {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-faint);
  background: var(--so-bg-darker);
  padding: 1px 5px;
  border-radius: 8px;
}
.so-act-feed-summary {
  flex: 1;
  color: var(--so-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-act-feed-time {
  color: var(--so-ink-faint);
  font-size: 9px;
  font-family: var(--so-mono);
  flex-shrink: 0;
}
.so-act-feed-detail {
  margin-top: 4px;
  font-size: 10px;
}
.so-act-feed-detail summary {
  cursor: pointer;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
}
.so-act-feed-detail pre {
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  font-family: var(--so-mono);
  font-size: 9px;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.so-act-feed-content {
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--so-bg-darker);
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.so-activity-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-activity-search input {
  width: 100%;
  padding: 4px 8px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  font-family: inherit;
  font-size: 11px;
  color: var(--so-ink);
  box-sizing: border-box;
}

/* ═════════════════════════════════════════════════════════════════
   Simulation decision affordance (Tier 2 #13)
   "Accept this design" or "Choose this" buttons on the open
   simulation. Records a kind:decision annotation tied to the
   chosen design.
   ═════════════════════════════════════════════════════════════════ */
.so-pg-sim-decision-block {
  background: var(--so-bg-darker);
  padding: 14px 16px;
  border-left: 3px solid var(--so-accent);
  border-radius: 0 3px 3px 0;
}
.so-pg-sim-decision-help {
  font-size: 12px;
  line-height: 1.55;
  color: var(--so-ink-muted);
  margin-bottom: 10px;
}
.so-pg-sim-decision-rationale-label {
  display: block;
  font-size: 11px;
  color: var(--so-ink-muted);
  margin-bottom: 10px;
}
.so-pg-sim-decision-rationale-label textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  font-family: inherit;
  font-size: 11px;
  color: var(--so-ink);
  resize: vertical;
  box-sizing: border-box;
}
.so-pg-sim-decision-rationale-label textarea:focus {
  outline: none;
  border-color: var(--so-accent);
}
.so-pg-sim-decision-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-pg-sim-decision-option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.so-pg-sim-decision-btn {
  background: var(--so-bg);
  border: 1px solid var(--so-accent);
  color: var(--so-accent);
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  border-radius: 3px;
  cursor: pointer;
}
.so-pg-sim-decision-btn:hover {
  background: var(--so-accent);
  color: white;
}
.so-pg-sim-decision-btn code {
  font-family: var(--so-mono);
  font-size: 11px;
}
.so-pg-sim-decision-summary {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}

/* Recorded decision view. */
.so-pg-sim-decision-recorded { display: flex; flex-direction: column; gap: 6px; }
.so-pg-sim-decision-tag {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--so-good);
  color: white;
  padding: 2px 8px;
  border-radius: 2px;
  align-self: flex-start;
}
.so-pg-sim-decision-when {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  margin-left: 6px;
}
.so-pg-sim-decision-rationale {
  font-size: 12px;
  line-height: 1.55;
  padding: 8px 12px;
  background: var(--so-bg);
  border-left: 2px solid var(--so-rule);
  border-radius: 0 2px 2px 0;
}
.so-pg-sim-decision-undo {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  padding: 3px 10px;
  font-size: 10px;
  font-family: var(--so-mono);
  border-radius: 2px;
  cursor: pointer;
  margin-top: 4px;
}
.so-pg-sim-decision-undo:hover {
  color: var(--so-bad);
  border-color: var(--so-bad);
}

/* ════════════════════════════════════════════════════════════════
   Move A.2 — Property chip + picker popover
   ════════════════════════════════════════════════════════════════

   Pattern: chip shows the human label as primary content, the URI
   as a faint mono suffix + tooltip. Edit-mode chips have a small
   ▾ caret + clickable border. Readonly chips just sit in a row
   without affording interaction.

   Picker popover is anchored under the chip, lives in document.body
   so click-outside dismissal works without conflicting with the
   process-section's own click router.
*/

.so-pg-prop-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--so-bg-darker);
  border: 1px solid transparent;
  font-size: 11.5px;
  font-family: inherit;
  line-height: 1.4;
  vertical-align: middle;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-pg-prop-chip-label {
  color: var(--so-ink);
  font-weight: 500;
}
.so-pg-prop-chip-uri {
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 9.5px;
  opacity: 0.7;
}
.so-pg-prop-chip-edit-mark {
  color: var(--so-ink-faint);
  font-size: 9px;
  margin-left: 1px;
}
.so-pg-prop-chip-edit {
  cursor: pointer;
  border-color: var(--so-rule);
  transition: border-color 0.12s, background 0.12s;
}
.so-pg-prop-chip-edit:hover,
.so-pg-prop-chip-edit:focus {
  border-color: var(--so-accent);
  background: var(--so-bg);
  outline: none;
}
.so-pg-prop-chip-edit:focus-visible {
  box-shadow: 0 0 0 2px rgba(80, 130, 200, 0.25);
}
/* Unknown URI: a faint amber tint cues the operator the property
   isn't in the catalogue. Not alarming — just visible. */
.so-pg-prop-chip-unknown {
  background: rgba(180, 130, 60, 0.08);
}
.so-pg-prop-chip-unknown .so-pg-prop-chip-label {
  color: rgb(140, 100, 60);
}
/* Empty / pick-prompt state. */
.so-pg-prop-chip-empty {
  background: var(--so-bg);
  border-style: dashed;
  border-color: var(--so-rule-dark);
}
.so-pg-prop-chip-empty .so-pg-prop-chip-label {
  color: var(--so-ink-faint);
  font-style: italic;
}
/* Sensors-table observes cell — give the chip room to wrap nicely
   without breaking the row rhythm. */
.so-pg-sen-observes-cell {
  max-width: 240px;
}

/* Picker popover — lives in document.body via an absolute-positioned
   layer. Floats below the anchor chip; clamps to viewport edges via
   max-width + the inline left/top set by _positionStyleFromAnchor. */
.so-pg-prop-picker-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}
.so-pg-prop-picker {
  position: absolute;
  pointer-events: auto;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.so-pg-prop-picker-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-pg-prop-picker-search {
  flex: 1;
  border: 1px solid var(--so-rule-dark);
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--so-bg);
  color: var(--so-ink);
  outline: none;
}
.so-pg-prop-picker-search:focus {
  border-color: var(--so-accent);
}
.so-pg-prop-picker-close {
  background: none;
  border: 1px solid transparent;
  color: var(--so-ink-faint);
  cursor: pointer;
  font-size: 16px;
  padding: 0 6px;
  border-radius: 2px;
  line-height: 1;
}
.so-pg-prop-picker-close:hover {
  border-color: var(--so-rule-dark);
  color: var(--so-ink);
}
.so-pg-prop-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.so-pg-prop-picker-section {
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-prop-picker-section:last-child {
  border-bottom: none;
}
.so-pg-prop-picker-section-head {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  padding: 6px 12px;
  cursor: default;
}
details.so-pg-prop-picker-section > summary.so-pg-prop-picker-section-head,
details.so-pg-prop-picker-family > summary {
  cursor: pointer;
  list-style: revert;
}
.so-pg-prop-picker-family {
  padding: 0 0 0 8px;
}
.so-pg-prop-picker-family > summary {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 8px;
  color: var(--so-ink);
  font-weight: 500;
}
.so-pg-prop-picker-family-count {
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 10px;
  margin-left: 4px;
}
.so-pg-prop-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.so-pg-prop-picker-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.08s, border-color 0.08s;
}
.so-pg-prop-picker-item:hover,
.so-pg-prop-picker-item:focus {
  background: var(--so-bg-darker);
  border-left-color: var(--so-accent);
  outline: none;
}
.so-pg-prop-picker-item-selected {
  background: rgba(80, 130, 200, 0.08);
  border-left-color: var(--so-accent);
}
.so-pg-prop-picker-item-label {
  color: var(--so-ink);
  font-weight: 500;
}
.so-pg-prop-picker-item-unit {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--so-bg);
  border-radius: 8px;
  color: var(--so-ink-muted);
  justify-self: end;
}
.so-pg-prop-picker-item-uri {
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-faint);
  grid-column: 1 / -1;
  margin-top: 1px;
  opacity: 0.75;
}
.so-pg-prop-picker-item-aliases {
  font-size: 10px;
  color: var(--so-ink-faint);
  grid-column: 1 / -1;
  font-style: italic;
}
.so-pg-prop-picker-empty {
  padding: 14px 16px;
  color: var(--so-ink-faint);
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.5;
}
.so-pg-prop-picker-loading {
  padding: 16px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 11px;
  text-align: center;
}
.so-pg-prop-picker-foot {
  padding: 6px 10px;
  border-top: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-pg-prop-picker-mint-disabled {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--so-rule-dark);
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: not-allowed;
}

/* Move A.2 follow-up: bind modal — "Link to a stage metric" section
   for the unlinked-sensor bind flow. Sits between the sensor-being-
   bound dl and the source-URL inputs. Operator chooses whether the
   sensor wires into a cascade metric (efficiency, carbon_intensity,
   opex_per_input_unit) or stays observation-only. */
.so-pg-bind-section-link {
  background: var(--so-bg-darker);
  padding: 12px 14px;
  border-radius: 4px;
  border-left: 2px solid rgba(80, 130, 200, 0.5);
}
.so-pg-bind-section-hint {
  font-size: 11.5px;
  color: var(--so-ink-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.so-pg-bind-link-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-pg-bind-link-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
}
.so-pg-bind-link-choices label:hover {
  background: var(--so-bg);
}
.so-pg-bind-link-choices code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: var(--so-bg);
  border-radius: 2px;
}
.so-pg-bind-link-taken {
  opacity: 0.55;
  cursor: not-allowed;
}
.so-pg-bind-link-taken:hover {
  background: transparent;
}
.so-pg-bind-link-taken-mark {
  font-size: 10px;
  color: var(--so-ink-faint);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   Move A.2 follow-up — "Feeds" chip + last-reading indicator on
   sensor rows; manual "+ Reading" entry popover
   ════════════════════════════════════════════════════════════════ */

/* Feeds chips: surface direct + indirect metric relationships.
   Direct = sensor.derived_for_field is set.
   Indirect = another sensor uses this one in its derivation. */
.so-pg-sen-feeds {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  cursor: help;
}
.so-pg-sen-feeds-direct {
  background: rgba(70, 140, 90, 0.14);
  color: rgb(50, 110, 70);
}
.so-pg-sen-feeds-indirect {
  background: rgba(140, 90, 180, 0.12);
  color: rgb(110, 70, 150);
}

/* Last-reading recency chip on a sensor row. Shows when
   last_observed_at is set. */
.so-pg-sen-last-obs {
  display: inline-block;
  font-family: var(--so-mono);
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  background: var(--so-bg);
  color: var(--so-ink-faint);
  cursor: help;
}

/* "+ Reading" button on the sensor row's source cell. Appears
   alongside the bind/unbind button. */
.so-pg-sen-reading-btn {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-size: 10px;
  font-family: var(--so-mono);
  padding: 2px 7px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.5px;
  margin-left: 6px;
}
.so-pg-sen-reading-btn:hover {
  color: var(--so-accent);
  border-color: var(--so-accent);
}

/* Manual reading entry popover — same posture as the property
   picker (positioned in body, click-outside dismisses). Compact:
   one number input + one datetime input + record button. */
.so-pg-reading-entry-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9100;
}
.so-pg-reading-entry {
  position: absolute;
  pointer-events: auto;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.so-pg-reading-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
  font-size: 11.5px;
}
.so-pg-reading-entry-head code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: var(--so-bg);
  border-radius: 2px;
}
.so-pg-reading-entry-close {
  background: none;
  border: 1px solid transparent;
  color: var(--so-ink-faint);
  cursor: pointer;
  font-size: 16px;
  padding: 0 6px;
  border-radius: 2px;
  line-height: 1;
}
.so-pg-reading-entry-close:hover {
  border-color: var(--so-rule-dark);
  color: var(--so-ink);
}
.so-pg-reading-entry-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-pg-reading-entry-context {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-pg-reading-entry-unit code {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: var(--so-bg-darker);
  border-radius: 2px;
}
.so-pg-reading-no-unit {
  color: var(--so-warn, #c97a3a);
}
.so-pg-reading-entry-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.so-pg-reading-entry-field > span {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
}
.so-pg-reading-entry-value,
.so-pg-reading-entry-time {
  border: 1px solid var(--so-rule-dark);
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--so-bg);
  color: var(--so-ink);
  outline: none;
}
.so-pg-reading-entry-value:focus,
.so-pg-reading-entry-time:focus {
  border-color: var(--so-accent);
}
.so-pg-reading-entry-error {
  font-size: 11px;
  color: var(--so-bad, #c0392b);
  font-style: italic;
}
.so-pg-reading-entry-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
  display: flex;
  justify-content: flex-end;
}
.so-pg-reading-entry-submit {
  background: var(--so-accent);
  border: 1px solid var(--so-accent);
  color: white;
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-reading-entry-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   Move B — Feature chip + picker
   ════════════════════════════════════════════════════════════════ */

/* Feature chip — analogous to the property chip but blue-tinted to
   distinguish "what" (property) from "where" (feature). */
.so-pg-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(80, 130, 200, 0.08);
  border: 1px solid transparent;
  font-size: 11.5px;
  font-family: inherit;
  line-height: 1.4;
  vertical-align: middle;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-pg-feat-chip-label {
  color: rgb(50, 90, 150);
  font-weight: 500;
}
.so-pg-feat-chip-suffix {
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 9.5px;
  opacity: 0.85;
}
.so-pg-feat-chip-edit-mark {
  color: var(--so-ink-faint);
  font-size: 9px;
  margin-left: 1px;
}
.so-pg-feat-chip-edit {
  cursor: pointer;
  border-color: rgba(80, 130, 200, 0.35);
  transition: border-color 0.12s, background 0.12s;
}
.so-pg-feat-chip-edit:hover,
.so-pg-feat-chip-edit:focus {
  border-color: rgb(80, 130, 200);
  background: rgba(80, 130, 200, 0.14);
  outline: none;
}
.so-pg-feat-chip-edit:focus-visible {
  box-shadow: 0 0 0 2px rgba(80, 130, 200, 0.25);
}
.so-pg-feat-chip-unknown {
  background: rgba(180, 130, 60, 0.08);
}
.so-pg-feat-chip-unknown .so-pg-feat-chip-label {
  color: rgb(140, 100, 60);
}
.so-pg-feat-chip-empty {
  background: var(--so-bg);
  border-style: dashed;
  border-color: var(--so-rule-dark);
}
.so-pg-feat-chip-empty .so-pg-feat-chip-label {
  color: var(--so-ink-faint);
  font-style: italic;
}

.so-pg-sen-foi-cell {
  max-width: 200px;
}

/* Feature picker popover — same posture as property picker but
   tree-shaped instead of list-shaped. */
.so-pg-feat-picker-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}
.so-pg-feat-picker {
  position: absolute;
  pointer-events: auto;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  background: var(--so-bg);
  border: 1px solid var(--so-rule-dark);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.so-pg-feat-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-pg-feat-picker-head strong {
  font-size: 11.5px;
  color: var(--so-ink);
}
.so-pg-feat-picker-close {
  background: none;
  border: 1px solid transparent;
  color: var(--so-ink-faint);
  cursor: pointer;
  font-size: 16px;
  padding: 0 6px;
  border-radius: 2px;
  line-height: 1;
}
.so-pg-feat-picker-close:hover {
  border-color: var(--so-rule-dark);
  color: var(--so-ink);
}
.so-pg-feat-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.so-pg-feat-picker-empty {
  padding: 14px 16px;
  color: var(--so-ink-faint);
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.5;
}
.so-pg-feat-picker-tree,
.so-pg-feat-picker-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.so-pg-feat-picker-node {
  /* depth provides left padding via --feat-depth */
}
.so-pg-feat-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px calc(12px + var(--feat-depth, 0) * 16px);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.08s, border-color 0.08s;
}
.so-pg-feat-picker-row:hover,
.so-pg-feat-picker-row:focus {
  background: var(--so-bg-darker);
  border-left-color: rgb(80, 130, 200);
  outline: none;
}
.so-pg-feat-picker-node-selected > .so-pg-feat-picker-row {
  background: rgba(80, 130, 200, 0.10);
  border-left-color: rgb(80, 130, 200);
  font-weight: 500;
}
.so-pg-feat-picker-kind {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
}
.so-pg-feat-picker-kind-stage  { background: rgba(80, 130, 200, 0.14); color: rgb(50, 90, 150); }
.so-pg-feat-picker-kind-vessel { background: rgba(140, 90, 180, 0.14); color: rgb(110, 70, 150); }
.so-pg-feat-picker-kind-batch  { background: rgba(70, 140, 90, 0.14); color: rgb(50, 110, 70); }
.so-pg-feat-picker-kind-custom { background: rgba(180, 130, 60, 0.14); color: rgb(150, 100, 40); }
.so-pg-feat-picker-label {
  color: var(--so-ink);
  flex: 1;
}
.so-pg-feat-picker-child-count {
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 10px;
}
.so-pg-feat-picker-auto {
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--so-bg-darker);
  color: var(--so-ink-faint);
}
.so-pg-feat-picker-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--so-rule);
  background: var(--so-bg-darker);
}
.so-pg-feat-picker-add-buttons {
  display: flex;
  gap: 6px;
}
.so-pg-feat-picker-add-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-feat-picker-add-btn:hover {
  border-color: rgb(80, 130, 200);
  color: rgb(50, 90, 150);
}
.so-pg-feat-picker-add-cancel {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-feat-picker-add-form {
  border-top: 1px solid var(--so-rule);
  padding: 10px 12px;
  background: var(--so-bg-darker);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-pg-feat-picker-add-head {
  font-size: 11px;
  color: var(--so-ink-faint);
}
.so-pg-feat-picker-add-head code {
  font-family: var(--so-mono);
  padding: 1px 5px;
  background: var(--so-bg);
  border-radius: 2px;
}
.so-pg-feat-picker-add-input {
  border: 1px solid var(--so-rule-dark);
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--so-bg);
  color: var(--so-ink);
  outline: none;
}
.so-pg-feat-picker-add-input:focus {
  border-color: rgb(80, 130, 200);
}
.so-pg-feat-picker-add-submit {
  align-self: flex-end;
  background: rgb(80, 130, 200);
  border: 1px solid rgb(80, 130, 200);
  color: white;
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
   Move C — Observation graph (Mermaid)
   ════════════════════════════════════════════════════════════════ */

.so-pg-obs-graph {
  margin: 24px 0 16px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
}
.so-pg-obs-graph[open] {
  background: var(--so-bg-darker);
}
.so-pg-obs-graph-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12px;
  border-radius: 4px;
}
.so-pg-obs-graph-summary::-webkit-details-marker { display: none; }
.so-pg-obs-graph-summary::before {
  content: '\25B8';
  display: inline-block;
  color: var(--so-ink-faint);
  font-size: 10px;
  transition: transform 0.15s;
}
.so-pg-obs-graph[open] > .so-pg-obs-graph-summary::before {
  transform: rotate(90deg);
}
.so-pg-obs-graph-summary span:first-of-type {
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-obs-graph-summary-meta {
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 10.5px;
}
.so-pg-obs-graph-body {
  padding: 8px 14px 16px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-obs-graph-hint {
  font-size: 11.5px;
  color: var(--so-ink-muted);
  line-height: 1.5;
  margin: 8px 0 14px;
}
.so-pg-obs-graph-hint code {
  font-family: var(--so-mono);
  background: var(--so-bg);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10.5px;
}
.so-pg-obs-graph-slot {
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  min-height: 120px;
  max-height: 360px;
  padding: 12px;
  overflow: auto;
}
.so-pg-obs-graph-loading {
  color: var(--so-ink-faint);
  font-style: italic;
  font-size: 11.5px;
  text-align: center;
  padding: 32px 16px;
}
.so-pg-obs-graph-error {
  color: var(--so-bad, #c0392b);
  font-size: 11.5px;
  padding: 14px;
  background: rgba(192, 57, 43, 0.05);
  border-radius: 3px;
}
.so-pg-obs-graph-error pre {
  margin-top: 8px;
  padding: 8px;
  background: var(--so-bg-darker);
  color: var(--so-ink);
  font-family: var(--so-mono);
  font-size: 10px;
  overflow-x: auto;
  border-radius: 2px;
}
.so-pg-obs-graph-render {
  overflow-x: auto;
}
.so-pg-obs-graph-render svg {
  max-width: 100%;
  height: auto !important;
}

/* Declared-vs-rollup comparison in the stage economics block.
   Shows when the operator's declared opex_per_input_unit diverges
   substantially from the rollup (typically because the rollup has
   warnings and the cascade is using the declared value). */
.so-pg-stage-econ-comparison {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--so-bg-darker);
  border-left: 3px solid rgba(180, 130, 60, 0.5);
  border-radius: 0 3px 3px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.so-pg-stage-econ-comparison-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.so-pg-stage-econ-comparison-label {
  font-family: var(--so-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  width: 60px;
}
.so-pg-stage-econ-comparison-value {
  font-family: var(--so-mono);
  color: var(--so-ink);
}
.so-pg-stage-econ-comparison-note {
  font-size: 10.5px;
  color: rgb(150, 100, 40);
  font-style: italic;
}
.so-pg-stage-econ-warnings-hint {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--so-ink-faint);
  font-style: italic;
}

/* Companion: dropped-action warning panel.
   Surfaced inline below the prose when the companion claimed an
   edit but the action block was truncated / malformed / unknown
   type. Without this the operator reads "I'll add X" and trusts
   it happened, but the edit was silently dropped. */
.so-rc-turn-dropped {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(192, 57, 43, 0.06);
  border-left: 3px solid rgba(192, 57, 43, 0.7);
  border-radius: 0 3px 3px 0;
  font-size: 12px;
}
.so-rc-turn-dropped + .so-rc-turn-dropped {
  margin-top: 6px;
}
.so-rc-turn-dropped-title {
  color: rgb(160, 50, 40);
  font-weight: 600;
  margin-bottom: 4px;
}
.so-rc-turn-dropped-body {
  color: var(--so-ink);
  line-height: 1.5;
}

/* Intent-panel pricing affordance: negative-margin / break-even warnings. */
.so-pg-intent-warn {
  color: var(--so-bad, #c0392b);
}
.so-pg-intent-list-hint {
  margin-top: 6px;
  color: var(--so-ink-muted);
  font-style: italic;
  font-size: 11.5px;
}

/* ════════════════════════════════════════════════════════════════
   Sankey v2 — Tufte rewrite

   Old version (-v1 classes above) had:
     - uncertainty cones competing with the data
     - sidestreams as decorative tiny arrows
     - numbers only on hover

   v2 principles:
     - high data-ink ratio
     - direct labelling (numbers on every band, not just on hover)
     - conservation visible (in → out + loss + sidestreams)
     - clean palette: ink for main flow, amber for loss, green for
       captured sidestream, dashed amber for vented
     - no decorative chrome
   ════════════════════════════════════════════════════════════════ */

.so-pg-sankey-header {
  font-family: var(--so-sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  fill: var(--so-ink);
}

.so-pg-sankey-band-v2 {
  fill: var(--so-ink);
  fill-opacity: 0.18;
  stroke: var(--so-ink);
  stroke-opacity: 0.35;
  stroke-width: 0.5;
  transition: fill-opacity 0.12s;
}
.so-pg-sankey-stage-v2:hover .so-pg-sankey-band-v2 {
  fill-opacity: 0.28;
}

/* Loss branch: amber triangle pointing down from the main flow */
.so-pg-sankey-loss-v2 {
  fill: #c47b00;
  fill-opacity: 0.55;
  stroke: #c47b00;
  stroke-opacity: 0.7;
  stroke-width: 0.5;
}
.so-pg-sankey-loss-label-v2 {
  font-family: var(--so-mono);
  font-size: 9.5px;
  fill: #8a5500;
}

/* Sidestream branches going up */
.so-pg-sankey-ss path {
  fill: none;
  stroke-linecap: round;
}
.so-pg-sankey-ss circle {
  stroke-width: 0;
}
.so-pg-sankey-ss-cap path {
  stroke: rgb(70, 140, 90);
  stroke-opacity: 0.75;
}
.so-pg-sankey-ss-cap circle {
  fill: rgb(70, 140, 90);
}
.so-pg-sankey-ss-vent path {
  stroke: #c47b00;
  stroke-opacity: 0.65;
  stroke-dasharray: 4 3;
}
.so-pg-sankey-ss-vent circle {
  fill: #c47b00;
}
.so-pg-sankey-ss-label {
  font-family: var(--so-sans, system-ui, sans-serif);
  font-size: 10px;
  fill: var(--so-ink);
  cursor: help;
}
.so-pg-sankey-ss-qty {
  font-family: var(--so-mono);
  font-size: 9.5px;
  fill: var(--so-ink-muted);
}

/* Stage labels (direct labelling, the Tufte touch) */
.so-pg-sankey-stage-name-v2 {
  font-family: var(--so-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  fill: var(--so-ink);
}
.so-pg-sankey-stage-eff-v2 {
  font-family: var(--so-mono);
  font-size: 9.5px;
  fill: var(--so-ink-muted);
}
.so-pg-sankey-stage-flow-v2 {
  font-family: var(--so-mono);
  font-size: 9px;
  fill: var(--so-ink-faint);
  letter-spacing: 0.02em;
}
.so-pg-sankey-bom-v2 {
  font-family: var(--so-mono);
  font-size: 9px;
  fill: var(--so-accent);
}

/* Source badge: projected / unknown indicators on the band */
.so-pg-sankey-source-badge {
  font-family: var(--so-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--so-ink-faint);
}
.so-pg-sankey-source-unknown {
  fill: #c47b00;
}

/* Final output label (appears after the last stage) */
.so-pg-sankey-final-label {
  font-family: var(--so-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  fill: var(--so-good);
}

/* Legend v2 — same gallery shape as v1, distinct swatch colours */
.so-pg-sankey-legend-band-v2 {
  display: inline-block;
  width: 14px; height: 6px;
  background: var(--so-ink);
  opacity: 0.18;
  border: 1px solid var(--so-ink);
  border-opacity: 0.35;
  border-radius: 1px;
}
.so-pg-sankey-legend-loss-v2 {
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #c47b00;
  opacity: 0.55;
}
.so-pg-sankey-legend-cap-v2 {
  display: inline-block;
  width: 14px; height: 0;
  border-top: 3px solid rgb(70, 140, 90);
  opacity: 0.85;
}
.so-pg-sankey-legend-vent-v2 {
  display: inline-block;
  width: 14px; height: 0;
  border-top: 3px dashed #c47b00;
  opacity: 0.7;
}
.so-pg-sankey-legend-summary {
  margin-left: auto;
  color: var(--so-ink);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.so-pg-sankey-legend-projected {
  flex-basis: 100%;
  color: #c47b00;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 2px;
}

/* ════════════════════════════════════════════════════════════════
   energy_advisor — Suggest button + proposal panel
   ════════════════════════════════════════════════════════════════ */

.so-pg-energy-suggest {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-size: 10px;
  font-family: var(--so-mono);
  padding: 3px 9px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-energy-suggest:hover {
  border-color: var(--so-accent);
  color: var(--so-accent);
}
.so-pg-energy-suggest-primary {
  background: rgba(80, 130, 200, 0.10);
  border-color: rgba(80, 130, 200, 0.55);
  color: rgb(50, 90, 150);
}
.so-pg-energy-suggest-primary:hover {
  background: rgba(80, 130, 200, 0.18);
  border-color: rgb(50, 90, 150);
  color: rgb(50, 90, 150);
}
.so-pg-energy-suggest:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Proposal panel — sits between sub-head row and the
   power/labor table when energy_advisor has responded. */
.so-pg-energy-prop {
  margin: 10px 0 8px;
  padding: 10px 12px;
  background: rgba(80, 130, 200, 0.04);
  border: 1px solid rgba(80, 130, 200, 0.25);
  border-radius: 4px;
}
.so-pg-energy-prop-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11.5px;
  color: var(--so-ink-muted);
  margin-bottom: 8px;
}
.so-pg-energy-prop-head strong {
  color: rgb(50, 90, 150);
}
.so-pg-energy-prop-dismiss {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-faint);
  font-size: 11px;
  width: 22px; height: 22px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1;
}
.so-pg-energy-prop-dismiss:hover {
  border-color: var(--so-bad);
  color: var(--so-bad);
}

.so-pg-energy-prop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.so-pg-energy-prop-table th {
  text-align: left;
  font-family: var(--so-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--so-ink-faint);
  padding: 4px 6px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-energy-prop-table td {
  padding: 6px;
  border-bottom: 1px solid var(--so-rule);
  vertical-align: top;
}
.so-pg-energy-prop-row-accepted {
  background: rgba(70, 140, 90, 0.06);
}
.so-pg-energy-prop-label {
  font-weight: 500;
  color: var(--so-ink);
  white-space: nowrap;
}
.so-pg-energy-prop-label code {
  background: var(--so-bg-darker);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}
.so-pg-energy-prop-value code {
  font-family: var(--so-mono);
  font-weight: 600;
  background: var(--so-bg);
  padding: 1px 5px;
  border-radius: 2px;
}
.so-pg-energy-prop-unit {
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  font-size: 10px;
  margin-left: 5px;
}
.so-pg-energy-prop-range {
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 9.5px;
  margin-left: 6px;
}
.so-pg-energy-prop-conf {
  white-space: nowrap;
  font-family: var(--so-mono);
  color: var(--so-ink-muted);
}
.so-pg-energy-prop-conf-dot {
  font-size: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  cursor: help;
}
.so-pg-energy-prop-conf-high  { color: rgb(70, 140, 90); }
.so-pg-energy-prop-conf-mid   { color: rgb(180, 130, 40); }
.so-pg-energy-prop-conf-low   { color: rgb(192, 57, 43); }
.so-pg-energy-prop-rationale {
  color: var(--so-ink-muted);
  font-style: italic;
  cursor: help;
  max-width: 320px;
}
.so-pg-energy-prop-actions {
  text-align: right;
  white-space: nowrap;
}
.so-pg-energy-prop-accept {
  background: rgb(50, 90, 150);
  border: 1px solid rgb(50, 90, 150);
  color: white;
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.so-pg-energy-prop-accept:hover {
  background: rgb(40, 75, 130);
  border-color: rgb(40, 75, 130);
}
.so-pg-energy-prop-applied {
  color: rgb(70, 140, 90);
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.so-pg-energy-prop-note {
  margin-top: 8px;
  font-size: 11px;
}
.so-pg-energy-prop-note summary {
  cursor: pointer;
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.so-pg-energy-prop-note > div {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  border-radius: 2px;
  color: var(--so-ink-muted);
  line-height: 1.5;
}
.so-pg-energy-prop-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-energy-prop-foot-meta {
  font-size: 10.5px;
  color: var(--so-ink-muted);
}
.so-pg-energy-prop-foot-meta strong {
  color: var(--so-ink);
}
.so-pg-energy-prop-accept-all {
  margin-left: auto;
  background: rgba(80, 130, 200, 0.10);
  border: 1px solid rgba(80, 130, 200, 0.55);
  color: rgb(50, 90, 150);
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.so-pg-energy-prop-accept-all:hover:not(:disabled) {
  background: rgba(80, 130, 200, 0.18);
  border-color: rgb(50, 90, 150);
}
.so-pg-energy-prop-accept-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   D.2: throughput header — single editable strip at top of process
   ════════════════════════════════════════════════════════════════ */

.so-pg-throughput {
  margin: 6px 0 12px;
  padding: 8px 10px;
  background: var(--so-bg-subtle, rgba(0,0,0,0.02));
  border: 1px solid var(--so-rule, rgba(0,0,0,0.08));
  border-left: 3px solid var(--so-accent, rgb(110, 130, 70));
  border-radius: 3px;
  font-family: var(--so-mono);
  font-size: 12px;
}
.so-pg-throughput-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.so-pg-throughput-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  color: var(--so-ink-muted);
  padding-right: 4px;
  border-right: 1px solid var(--so-rule);
}
.so-pg-throughput-mode {
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--so-rule-dark);
  background: var(--so-bg);
  color: var(--so-ink);
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-throughput-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.so-pg-throughput-field label {
  font-size: 10px;
  color: var(--so-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-pg-throughput-field input[type="number"] {
  width: 70px;
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 2px 5px;
  border: 1px solid var(--so-rule);
  background: var(--so-bg);
  color: var(--so-ink);
  border-radius: 2px;
  text-align: right;
}
.so-pg-throughput-field input[type="text"].so-pg-throughput-unit {
  width: 55px;
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 2px 5px;
  border: 1px solid var(--so-rule);
  background: var(--so-bg);
  color: var(--so-ink-muted);
  border-radius: 2px;
}
.so-pg-throughput-field input:focus {
  outline: none;
  border-color: var(--so-accent);
  color: var(--so-ink);
}
.so-pg-throughput-unit-static {
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-pg-throughput-explain {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--so-rule);
  color: var(--so-ink-muted);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--so-mono);
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.so-pg-throughput-explain:hover {
  border-color: var(--so-accent);
  color: var(--so-accent);
}
.so-pg-throughput-explain-panel {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--so-ink-muted);
}
.so-pg-throughput-explain-panel p {
  margin: 0 0 6px 0;
}
.so-pg-throughput-explain-panel p:last-child {
  margin-bottom: 0;
}
.so-pg-throughput-explain-panel code {
  font-size: 11px;
  background: rgba(0,0,0,0.04);
  padding: 1px 4px;
  border-radius: 2px;
}
.so-pg-throughput-explain-panel strong {
  color: var(--so-ink);
}

/* ════════════════════════════════════════════════════════════════
   D.1: BoM quantity cell — ratio / legacy / missing states
   ════════════════════════════════════════════════════════════════ */

.so-pg-bom-qty-cell {
  white-space: nowrap;
  font-family: var(--so-mono);
  font-size: 11px;
}

/* (1) Ratio form — the post-D.1 shape. Inline editable + basis chip. */
.so-pg-bom-ratio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.so-pg-bom-ratio-per {
  color: var(--so-ink-muted);
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  padding: 0 2px;
}
.so-pg-bom-ratio-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-family: var(--so-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  margin-left: 2px;
}
.so-pg-bom-ratio-chip:hover {
  border-color: var(--so-ink-muted);
}
.so-pg-bom-ratio-chip-input {
  background: rgba(70, 140, 90, 0.12);
  color: rgb(50, 100, 65);
}
.so-pg-bom-ratio-chip-output {
  background: rgba(80, 130, 200, 0.12);
  color: rgb(50, 90, 150);
}
.so-pg-bom-ratio-chip-batch {
  background: rgba(180, 130, 40, 0.14);
  color: rgb(130, 90, 20);
}

/* (2) Legacy form — needs migration. ⚠ + Convert button. */
.so-pg-bom-legacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.so-pg-bom-legacy-val {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--so-ink);
  position: relative;
}
.so-pg-bom-legacy-val::before {
  content: "⚠";
  color: rgb(180, 130, 40);
  font-size: 11px;
  padding-right: 2px;
}
.so-pg-bom-legacy-per {
  color: var(--so-ink-muted);
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
}
.so-pg-bom-convert {
  background: rgba(180, 130, 40, 0.10);
  border: 1px solid rgba(180, 130, 40, 0.35);
  color: rgb(140, 95, 20);
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-pg-bom-convert:hover {
  background: rgba(180, 130, 40, 0.20);
  border-color: rgb(140, 95, 20);
}

/* (3) Missing — set-quantity affordance. */
.so-pg-bom-missing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.so-pg-bom-set-qty {
  background: transparent;
  border: 1px dashed var(--so-rule);
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-bom-set-qty:hover {
  border-style: solid;
  border-color: var(--so-accent);
  color: var(--so-accent);
}
.so-pg-bom-missing-hint {
  color: var(--so-ink-muted);
  font-size: 10px;
  font-style: italic;
}

/* Subtle hint when the energy_advisor proposal panel is rendered on
   Resources but the Operations section is also affected. */
.so-pg-stage-ops-proposal-hint {
  padding: 6px 10px;
  background: var(--so-bg-subtle, rgba(0,0,0,0.02));
  border-left: 2px solid var(--so-accent);
  font-size: 11px;
  color: var(--so-ink-muted);
  margin-bottom: 6px;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   D.7: structured labor block on Operations editor
   ════════════════════════════════════════════════════════════════ */

.so-pg-stage-labor-block {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--so-rule);
}
.so-pg-stage-labor-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.so-pg-stage-labor-table {
  width: 100%;
  font-family: var(--so-mono);
  font-size: 11px;
  border-collapse: collapse;
}
.so-pg-stage-labor-table td {
  padding: 3px 6px;
  vertical-align: middle;
}
.so-pg-stage-labor-hint {
  color: var(--so-ink-muted);
  font-size: 10px;
  font-style: italic;
}
.so-pg-stage-labor-total-row {
  border-top: 1px solid var(--so-rule);
}
.so-pg-stage-labor-total-label {
  font-weight: 600;
  text-align: right;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-muted);
}
.so-pg-stage-ops-legacy-warn {
  margin: 6px 0;
  padding: 8px 10px;
  background: rgba(180, 130, 40, 0.08);
  border-left: 2px solid rgba(180, 130, 40, 0.6);
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink);
}
.so-pg-stage-ops-legacy-warn .so-pg-bom-convert {
  margin-left: 8px;
}

/* ════════════════════════════════════════════════════════════════
   D.8: cascade chain — dataflow diagnostic
   ════════════════════════════════════════════════════════════════ */

.so-pg-chain {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-left: 3px solid var(--so-accent, rgb(110, 130, 70));
  border-radius: 3px;
  font-family: var(--so-mono);
  font-size: 12px;
  /* Block-level container. min-width:0 lets the chain shrink with
     its parent (the section). No overflow-x: with fr-based row grids,
     rows shrink with the container; there's nothing to scroll.
     The Dataflow view's 5-column grid follows the same approach. */
  display: block;
  width: 100%;
  min-width: 0;
}
.so-pg-chain-broken {
  border-left-color: rgb(192, 57, 43);
  background: rgba(192, 57, 43, 0.03);
}
.so-pg-chain-pending {
  border-left-color: var(--so-ink-muted);
  color: var(--so-ink-muted);
  font-style: italic;
  font-size: 11px;
  padding: 8px 10px;
}
.so-pg-chain-pending p {
  margin: 6px 0 0 0;
  font-style: normal;
}
.so-pg-chain-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-chain-head-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
  color: var(--so-ink);
}
.so-pg-chain-head-summary {
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-pg-chain-head-summary strong {
  color: var(--so-ink);
}
.so-pg-chain-head-summary code {
  background: rgba(0,0,0,0.04);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}
.so-pg-chain-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* explicit — guarantee rows fill the cross axis */
  gap: 4px;
  width: 100%;
}
.so-pg-chain-row {
  /* Operator feedback: Flow view broke past the right edge when the
     main page shrinks, but the Dataflow view (same chain, different
     row class) stayed correctly bounded. The bug was: Flow row used
     `max-content` columns that refused to shrink; Dataflow row used
     `fr` units everywhere and scaled cleanly. The two layouts should
     behave identically as wrappers.
     Fix: mirror the Dataflow grid-row pattern exactly — all fr units,
     no max-content. The flow + rule columns become flexible and the
     row stays bounded inside .so-pg-chain regardless of viewport
     width. Removed width: 100% (the row is a grid CHILD of the body's
     flex-column container; cross-axis stretch via align-items already
     fills width — explicit width:100% interacts badly with shrinking).
  */
  display: grid;
  /* status · stage_name · flow · rule — all fr-shrinkable */
  grid-template-columns: 20px minmax(110px, 1.2fr) minmax(110px, 1.4fr) minmax(110px, 1.4fr);
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.04);
  min-width: 0;
  /* CRITICAL: rows are grid items inside a flex column. Without
     explicit width:100%, the grid sizes to its content (right-aligned
     inside the body's flex space) instead of filling cross-axis.
     The operator screenshot showed exactly this — rows floating
     right of the header instead of flush-left under it. Removing
     this rule was an incorrect "simplification" in the previous fix
     round. */
  width: 100%;
  justify-self: stretch;
}
.so-pg-chain-row > * {
  min-width: 0;
}
.so-pg-chain-row > .so-pg-chain-stage-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Diagnosis (rare; only on broken rows) wraps to a full-width second
   visual line via grid-column span. */
.so-pg-chain-row:has(> .so-pg-chain-diag) {
  grid-template-columns: 20px minmax(110px, 1.2fr) minmax(110px, 1.4fr) minmax(110px, 1.4fr);
}
.so-pg-chain-row > .so-pg-chain-diag {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.so-pg-chain-row:last-child {
  border-bottom: none;
}
.so-pg-chain-row-broken {
  background: rgba(192, 57, 43, 0.05);
  border-left: 2px solid rgb(192, 57, 43);
  padding-left: 6px;
  margin-left: -8px;
}
.so-pg-chain-row-inherited-zero {
  opacity: 0.55;
}
.so-pg-chain-row-ok-with-note {
  background: rgba(180, 130, 40, 0.04);
}
.so-pg-chain-status {
  font-size: 14px;
  text-align: center;
  width: 20px;
}
.so-pg-chain-status-ok       { color: rgb(70, 140, 90); }
.so-pg-chain-status-broken   { color: rgb(192, 57, 43); font-weight: 700; }
.so-pg-chain-status-note     { color: rgb(180, 130, 40); font-weight: 700; }
.so-pg-chain-status-pending  { color: var(--so-ink-muted); }
.so-pg-chain-stage-name {
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-chain-flow {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.so-pg-chain-q {
  font-weight: 600;
  color: var(--so-ink);
}
.so-pg-chain-q-out {
  color: rgb(70, 140, 90);
}
.so-pg-chain-q-zero {
  color: rgb(192, 57, 43);
}
.so-pg-chain-unit {
  font-size: 10px;
  color: var(--so-ink-muted);
  text-transform: lowercase;
}
.so-pg-chain-arrow {
  color: var(--so-ink-muted);
  padding: 0 4px;
}
.so-pg-chain-rule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-pg-chain-rule-tag {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-pg-chain-rule-mass-balance {
  background: rgba(70, 140, 90, 0.12);
  color: rgb(50, 100, 65);
}
.so-pg-chain-rule-energy-bridge {
  background: rgba(80, 130, 200, 0.12);
  color: rgb(50, 90, 150);
}
.so-pg-chain-eff {
  font-family: var(--so-mono);
  color: var(--so-ink-muted);
}
.so-pg-chain-eff-missing {
  color: rgb(180, 130, 40);
  font-style: italic;
}
.so-pg-chain-diag {
  grid-column: 2 / -1;
  margin-top: 2px;
  padding: 6px 8px;
  background: rgba(192, 57, 43, 0.05);
  border-left: 2px solid rgb(192, 57, 43);
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink);
}
.so-pg-chain-row-ok-with-note .so-pg-chain-diag {
  background: rgba(180, 130, 40, 0.05);
  border-left-color: rgb(180, 130, 40);
}
.so-pg-chain-diag-cta {
  display: inline-block;
  margin-top: 4px;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.4);
  color: rgb(192, 57, 43);
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.so-pg-chain-diag-cta:hover {
  background: rgba(192, 57, 43, 0.15);
}
.so-pg-chain-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--so-rule);
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-pg-chain-footer strong {
  color: rgb(192, 57, 43);
}

/* ════════════════════════════════════════════════════════════════
   Sim freshness banner (stale vs current process state)
   ════════════════════════════════════════════════════════════════ */

.so-pg-sim-freshness {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--so-mono);
}
.so-pg-sim-freshness-fresh {
  background: rgba(70, 140, 90, 0.06);
  border-left: 3px solid rgb(70, 140, 90);
  color: var(--so-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.so-pg-sim-freshness-fresh .so-pg-sim-freshness-icon {
  color: rgb(70, 140, 90);
  font-size: 14px;
  font-weight: 700;
}
.so-pg-sim-freshness-stale {
  background: rgba(180, 130, 40, 0.06);
  border-left: 3px solid rgb(180, 130, 40);
}
.so-pg-sim-freshness-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.so-pg-sim-freshness-head .so-pg-sim-freshness-icon {
  color: rgb(180, 130, 40);
  font-size: 14px;
  font-weight: 700;
}
.so-pg-sim-freshness-when {
  margin-left: auto;
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-pg-sim-freshness p {
  margin: 6px 0;
  font-family: inherit;
  color: var(--so-ink-muted);
}
.so-pg-sim-freshness-diff {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11px;
}
.so-pg-sim-freshness-diff th {
  text-align: left;
  padding: 4px 8px;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-sim-freshness-diff td {
  padding: 4px 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.04);
}
.so-pg-sim-freshness-diff td code {
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 2px;
}
.so-pg-sim-rerun {
  background: rgba(180, 130, 40, 0.10);
  border: 1px solid rgba(180, 130, 40, 0.5);
  color: rgb(140, 95, 20);
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.so-pg-sim-rerun:hover:not(:disabled) {
  background: rgba(180, 130, 40, 0.20);
  border-color: rgb(140, 95, 20);
}
.so-pg-sim-rerun:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* energy_advisor unmatched-resources warning (replaces the collapsed
   <details> when the agent's resources[] didn't match this stage). */
.so-pg-energy-prop-note-warn {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(180, 130, 40, 0.08);
  border-left: 2px solid rgb(180, 130, 40);
  font-size: 11px;
  line-height: 1.55;
  color: var(--so-ink);
}
.so-pg-energy-prop-note-warn strong {
  display: block;
  margin-bottom: 4px;
  color: rgb(140, 95, 20);
}

/* ════════════════════════════════════════════════════════════════
   D.9: cascade chain — Dataflow view (expanded grid)
   ════════════════════════════════════════════════════════════════ */

/* View toggle (Flow / Dataflow) */
.so-pg-chain-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  overflow: hidden;
}
.so-pg-chain-viewtoggle-btn {
  background: transparent;
  border: none;
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  padding: 4px 10px;
  cursor: pointer;
  border-right: 1px solid var(--so-rule);
}
.so-pg-chain-viewtoggle-btn:last-child { border-right: none; }
.so-pg-chain-viewtoggle-btn:hover { color: var(--so-ink); }
.so-pg-chain-viewtoggle-btn.is-active {
  background: var(--so-ink);
  color: var(--so-bg);
}

/* Grid header (visible only in dataflow view).
   Columns shrunk to minmax(110px, fr) — the previous 160-180px
   min-widths overflowed narrow Process-tab viewports. The fr ratios
   preserve the relative emphasis: stage_name slim, cost wide, output
   wide, partition wide. */
.so-pg-chain-grid-header {
  display: grid;
  grid-template-columns: 20px minmax(110px, 1.2fr) minmax(110px, 1.4fr) minmax(110px, 1.4fr) minmax(110px, 1.5fr);
  gap: 10px;
  padding: 4px 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--so-rule);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  font-weight: 600;
  min-width: 0;
}

/* Grid row */
.so-pg-chain-grid-row {
  display: grid;
  grid-template-columns: 20px minmax(110px, 1.2fr) minmax(110px, 1.4fr) minmax(110px, 1.4fr) minmax(110px, 1.5fr);
  align-items: start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
  min-width: 0;
}
.so-pg-chain-grid-row > * { min-width: 0; }
.so-pg-chain-grid-row:last-child { border-bottom: none; }
.so-pg-chain-grid-row.so-pg-chain-row-broken {
  background: rgba(192, 57, 43, 0.04);
}
.so-pg-chain-grid-row.so-pg-chain-row-inherited-zero { opacity: 0.55; }

.so-pg-chain-cell { font-family: var(--so-mono); font-size: 11px; }
.so-pg-chain-cell-name .so-pg-chain-stage-name { font-weight: 500; margin-bottom: 3px; }
.so-pg-chain-cell-name .so-pg-chain-rule { display: flex; gap: 6px; }

/* Cost cell */
.so-pg-chain-cost-total {
  font-weight: 600;
  font-size: 12px;
  color: var(--so-ink);
  margin-bottom: 4px;
}
.so-pg-chain-cost-bar {
  display: flex;
  height: 8px;
  border-radius: 1px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.so-pg-chain-cost-band {
  height: 100%;
  display: block;
}
.so-pg-chain-cost-mat    { background: rgb(60, 110, 75); }   /* green — materials */
.so-pg-chain-cost-energy { background: rgb(180, 130, 40); }  /* amber — energy */
.so-pg-chain-cost-labor  { background: rgb(80, 110, 160); }  /* blue — labor */
.so-pg-chain-cost-carbon { background: rgb(120, 70, 130); }  /* purple — carbon */
.so-pg-chain-cost-credit {
  margin-top: 3px;
  font-size: 10px;
  color: rgb(60, 110, 75);
  font-style: italic;
}

/* Output partition cell */
.so-pg-chain-part-bar {
  display: flex;
  height: 8px;
  border-radius: 1px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  margin-bottom: 4px;
}
.so-pg-chain-part-band {
  height: 100%;
  display: block;
}
.so-pg-chain-part-continues { background: rgb(60, 110, 75); }   /* green */
.so-pg-chain-part-captured  { background: rgb(140, 100, 30); }  /* amber */
.so-pg-chain-part-lost      { background: rgba(0,0,0,0.18); }   /* muted */
.so-pg-chain-part-legend {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--so-ink-muted);
  flex-wrap: wrap;
}
.so-pg-chain-part-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.so-pg-chain-part-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Diagnosis cell spans full width when present */
.so-pg-chain-cell-diag {
  grid-column: 2 / -1;
  margin-top: 4px;
  padding: 6px 8px;
  background: rgba(192, 57, 43, 0.05);
  border-left: 2px solid rgb(192, 57, 43);
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink);
}
.so-pg-chain-row-ok-with-note .so-pg-chain-cell-diag {
  background: rgba(180, 130, 40, 0.05);
  border-left-color: rgb(180, 130, 40);
}


.so-pg-sim-freshness-pct {
  font-size: 10px;
  color: var(--so-ink-muted);
  margin-left: 4px;
}
.so-pg-sim-freshness-stages {
  font-size: 11px;
  color: var(--so-ink-muted);
  margin: 4px 0 8px;
}

/* ════════════════════════════════════════════════════════════════
   D.10: system-level energy_advisor — affordance + proposal panel
   ════════════════════════════════════════════════════════════════ */

/* "Model energy assumptions" button on cascade chain header */
.so-pg-chain-energybtn {
  background: transparent;
  border: 1px solid var(--so-rule-dark);
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 8px;
}
.so-pg-chain-energybtn:hover:not(:disabled) {
  border-color: var(--so-accent);
  color: var(--so-accent);
}
.so-pg-chain-energybtn-primary {
  background: rgba(80, 130, 200, 0.10);
  border-color: rgba(80, 130, 200, 0.5);
  color: rgb(50, 90, 150);
}
.so-pg-chain-energybtn-primary:hover:not(:disabled) {
  background: rgba(80, 130, 200, 0.20);
  border-color: rgb(50, 90, 150);
}
.so-pg-chain-energybtn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.so-pg-chain-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 10px;
  background: rgba(80, 130, 200, 0.08);
  color: rgb(50, 90, 150);
  margin-left: 8px;
}

/* System-level proposal panel */
.so-pg-sysprop {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(80, 130, 200, 0.03);
  border: 1px solid rgba(80, 130, 200, 0.25);
  border-left: 3px solid rgb(50, 90, 150);
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--so-mono);
}
.so-pg-sysprop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--so-rule);
  margin-bottom: 10px;
}
.so-pg-sysprop-head strong {
  color: var(--so-ink);
}
.so-pg-sysprop-ver {
  font-size: 10px;
  color: var(--so-ink-muted);
  margin-left: 6px;
}
.so-pg-sysprop-dismiss {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--so-rule);
  color: var(--so-ink-muted);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.so-pg-sysprop-dismiss:hover { color: rgb(192, 57, 43); border-color: rgb(192, 57, 43); }

.so-pg-sysprop-section {
  margin: 10px 0;
}
.so-pg-sysprop-section h5 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-muted);
  margin: 0 0 6px 0;
  font-weight: 600;
}
.so-pg-sysprop-section p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink);
  margin: 4px 0;
}

.so-pg-sysprop-cls { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.so-pg-sysprop-cls-tag {
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.so-pg-sysprop-cls-mass_conservation {
  background: rgba(70, 140, 90, 0.12);
  color: rgb(50, 100, 65);
}
.so-pg-sysprop-cls-energy_conversion {
  background: rgba(180, 130, 40, 0.14);
  color: rgb(130, 90, 20);
}
.so-pg-sysprop-cls-hybrid {
  background: rgba(120, 70, 130, 0.14);
  color: rgb(85, 50, 100);
}
.so-pg-sysprop-cls-unknown { background: rgba(0,0,0,0.05); color: var(--so-ink-muted); }
.so-pg-sysprop-cls-rat { font-size: 11px; color: var(--so-ink); line-height: 1.5; }

.so-pg-sysprop-metric { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.so-pg-sysprop-metric > code { font-size: 12px; padding: 2px 8px; background: rgba(80,130,200,0.10); border-radius: 2px; }
.so-pg-sysprop-metric-rat { flex: 1; color: var(--so-ink); font-size: 11px; }
.so-pg-sysprop-alt { font-size: 10px; color: var(--so-ink-muted); margin-top: 4px; }

.so-pg-sysprop-balance { display: flex; align-items: stretch; gap: 12px; }
.so-pg-sysprop-balance-side { flex: 1; padding: 6px 10px; background: var(--so-bg); border: 1px solid var(--so-rule); border-radius: 2px; }
.so-pg-sysprop-balance-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--so-ink-muted); margin-bottom: 4px; }
.so-pg-sysprop-balance-total { font-size: 14px; font-weight: 600; color: var(--so-ink); margin-bottom: 4px; }
.so-pg-sysprop-balance-arrow { align-self: center; color: var(--so-ink-muted); font-size: 16px; }
.so-pg-sysprop-comp { list-style: none; padding: 0; margin: 4px 0 0; font-size: 10px; color: var(--so-ink-muted); }
.so-pg-sysprop-comp li { padding: 2px 0; }
.so-pg-sysprop-comp em { font-style: italic; }
.so-pg-sysprop-note-small { margin-top: 6px; font-size: 10px; font-style: italic; color: var(--so-ink-muted); }
.so-pg-sysprop-ner {
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(180, 130, 40, 0.05);
  border-left: 2px solid rgba(180, 130, 40, 0.4);
  font-size: 11px;
  color: var(--so-ink);
}
.so-pg-sysprop-ner em { font-style: italic; color: var(--so-ink-muted); }

.so-pg-sysprop-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.so-pg-sysprop-table th {
  text-align: left;
  padding: 4px 8px;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-sysprop-table td { padding: 4px 8px; border-bottom: 1px dashed rgba(0,0,0,0.04); }
.so-pg-sysprop-row-accepted { opacity: 0.7; }
.so-pg-sysprop-row-accepted td { background: rgba(70, 140, 90, 0.05); }
.so-pg-sysprop-unit { font-size: 10px; color: var(--so-ink-muted); }
.so-pg-sysprop-rat { font-size: 10px; color: var(--so-ink-muted); font-style: italic; max-width: 240px; }

.so-pg-sysprop-conf {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
}
.so-pg-sysprop-conf-high { background: rgba(70, 140, 90, 0.12); color: rgb(50, 100, 65); }
.so-pg-sysprop-conf-mid  { background: rgba(180, 130, 40, 0.14); color: rgb(130, 90, 20); }
.so-pg-sysprop-conf-low  { background: rgba(192, 57, 43, 0.10); color: rgb(140, 50, 40); }

.so-pg-sysprop-stage-block { margin-bottom: 12px; }
.so-pg-sysprop-stage-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--so-ink);
  margin-bottom: 4px;
}

.so-pg-sysprop-accept {
  background: rgba(80, 130, 200, 0.10);
  border: 1px solid rgba(80, 130, 200, 0.5);
  color: rgb(50, 90, 150);
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-pg-sysprop-accept:hover { background: rgba(80, 130, 200, 0.20); }
.so-pg-sysprop-applied {
  font-size: 10px;
  color: rgb(50, 100, 65);
  font-weight: 600;
}

.so-pg-sysprop-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-sysprop-foot-meta { font-size: 10px; color: var(--so-ink-muted); }
.so-pg-sysprop-accept-all {
  margin-left: auto;
  background: rgb(50, 90, 150);
  border: 1px solid rgb(50, 90, 150);
  color: var(--so-bg);
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-sysprop-accept-all:hover:not(:disabled) { background: rgb(40, 75, 130); }
.so-pg-sysprop-accept-all:disabled { opacity: 0.5; cursor: not-allowed; }

/* Partial / truncated system-energy-balance proposal indicator */
.so-pg-sysprop-partial {
  border-left-color: rgb(180, 130, 40);
  background: rgba(180, 130, 40, 0.04);
}
.so-pg-sysprop-partial-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(180, 130, 40, 0.15);
  color: rgb(130, 90, 20);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 6px;
}
.so-pg-sysprop-truncation-note {
  padding: 8px 12px;
  background: rgba(180, 130, 40, 0.08);
  border-left: 2px solid rgb(180, 130, 40);
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: var(--so-ink);
}
.so-pg-sysprop-truncation-note strong { color: rgb(140, 95, 20); }

/* ════════════════════════════════════════════════════════════════
   D.11: actionable insights — grouping + action chip + flash
   ════════════════════════════════════════════════════════════════ */

/* Flash highlight when a stage is scrolled-to via an insight action. */
@keyframes so-pg-insight-flash {
  0%   { box-shadow: 0 0 0 0 rgba(80, 130, 200, 0.5); }
  50%  { box-shadow: 0 0 0 6px rgba(80, 130, 200, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(80, 130, 200, 0); }
}
.so-pg-insight-target-flash {
  animation: so-pg-insight-flash 1.4s ease-out;
  border-radius: 3px;
}

/* Insights panel — grouped layout */
.so-ri-group {
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--so-rule, rgba(0,0,0,0.06));
  padding-bottom: 4px;
}
.so-ri-group:last-child { border-bottom: none; }
.so-ri-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--so-bg-subtle, rgba(0,0,0,0.02));
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  margin-bottom: 4px;
  border-radius: 2px;
}
.so-ri-group-head-process {
  background: rgba(80, 130, 200, 0.06);
  color: rgb(50, 90, 150);
}
.so-ri-group-icon {
  font-size: 9px;
}
.so-ri-group-label {
  flex: 1;
  font-weight: 600;
}
.so-ri-group-count {
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  font-weight: 700;
  font-size: 9px;
}
.so-ri-group-head-process .so-ri-group-count {
  background: rgba(80, 130, 200, 0.15);
  color: rgb(50, 90, 150);
}

/* Action chip beneath each insight body */
.so-ri-item-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(80, 130, 200, 0.08);
  border-left: 2px solid rgb(50, 90, 150);
  font-family: var(--so-mono);
  font-size: 10px;
  color: rgb(50, 90, 150);
}
.so-ri-action-icon {
  font-size: 11px;
}
.so-ri-action-label {
  flex: 1;
  letter-spacing: 0.2px;
}

/* Actionable Accept button — primary styling, arrow icon */
.so-ri-act-accept-actionable {
  background: rgb(50, 90, 150);
  color: var(--so-bg, white);
  border: 1px solid rgb(50, 90, 150);
}
.so-ri-act-accept-actionable:hover {
  background: rgb(40, 75, 130);
}

/* D.11.1 — spotlight pulse on a specific affordance after insight
   acceptance. The wide flash on the section tells the operator
   "you landed here;" the spotlight pulse on the button tells them
   "click THIS." Repeats for ~4.5s with a soft expanding ring.

   Stacks on top of normal button styles so it works on any
   data-pg-action button regardless of its base appearance. */
@keyframes so-pg-insight-spotlight-pulse {
  0%   {
    box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.85),
                0 0 0 0 rgba(255, 170, 0, 0.45);
    outline: 2px solid rgba(255, 170, 0, 1);
    outline-offset: 1px;
  }
  50%  {
    box-shadow: 0 0 0 8px  rgba(255, 170, 0, 0.0),
                0 0 0 18px rgba(255, 170, 0, 0.0);
    outline: 2px solid rgba(255, 170, 0, 0.5);
    outline-offset: 3px;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 170, 0, 0),
                0 0 0 0 rgba(255, 170, 0, 0);
    outline: 2px solid rgba(255, 170, 0, 1);
    outline-offset: 1px;
  }
}
.so-pg-insight-spotlight {
  animation: so-pg-insight-spotlight-pulse 1.4s ease-out infinite;
  position: relative;
  z-index: 5;
  /* High-contrast orange so the spotlight is unmissable on any
     background. Subtle blue was getting lost on already-blue
     primary buttons. */
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════
   D.12: Digital Twin section — synthetic vs reality
   ════════════════════════════════════════════════════════════════ */

.so-pg-twin {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-left: 3px solid rgb(100, 110, 180);  /* twin = blue-purple */
  border-radius: 3px;
  font-family: var(--so-mono);
}
.so-pg-twin-loading { font-style: italic; color: var(--so-ink-muted); }
.so-pg-twin-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.so-pg-twin-title {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink);
}
.so-pg-twin-meta {
  font-size: 11px;
  color: var(--so-ink-muted);
  flex: 1;
}
.so-pg-twin-meta strong {
  color: var(--so-ink);
}
.so-pg-twin-meta code {
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
}
.so-pg-twin-project-btn {
  background: rgb(100, 110, 180);
  color: var(--so-bg, white);
  border: 1px solid rgb(80, 90, 160);
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-twin-project-btn:hover:not(:disabled) { background: rgb(80, 90, 160); }
.so-pg-twin-project-btn:disabled,
.so-pg-twin-project-btn.is-busy {
  opacity: 0.6;
  cursor: wait;
}

.so-pg-twin-empty {
  font-size: 12px;
  line-height: 1.6;
  color: var(--so-ink-muted);
  padding: 8px 4px;
}
.so-pg-twin-empty code {
  font-size: 11px;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 2px;
}

.so-pg-twin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 4px;
}
.so-pg-twin-table th {
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-twin-table td {
  padding: 8px;
  vertical-align: top;
  border-bottom: 1px dashed rgba(0,0,0,0.04);
}
.so-pg-twin-row:last-child td { border-bottom: none; }

.so-pg-twin-field-cell code {
  background: rgba(100, 110, 180, 0.08);
  color: rgb(70, 80, 150);
  padding: 1px 5px;
  border-radius: 2px;
}
.so-pg-twin-property {
  font-size: 10px;
  color: var(--so-ink-muted);
  margin-top: 2px;
}
.so-pg-twin-synth, .so-pg-twin-live {
  font-family: var(--so-mono);
  font-size: 12px;
  color: var(--so-ink);
}
.so-pg-twin-unit {
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-pg-twin-livecount,
.so-pg-twin-liveago {
  display: block;
  font-size: 10px;
  color: var(--so-ink-muted);
  margin-top: 2px;
}

.so-pg-twin-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.so-pg-twin-dir-over   { background: rgba(192, 57, 43, 0.10); color: rgb(140, 50, 40); }
.so-pg-twin-dir-under  { background: rgba(80, 130, 200, 0.10); color: rgb(50, 90, 150); }
.so-pg-twin-dir-on     { background: rgba(70, 140, 90, 0.10); color: rgb(50, 100, 65); }
.so-pg-twin-delta-none { color: var(--so-ink-muted); font-size: 11px; }
.so-pg-twin-delta-sign { font-size: 11px; }

/* Sparkline */
.so-pg-twin-spark-cell { vertical-align: middle; }
.so-pg-twin-spark {
  display: block;
  width: 120px;
  height: 28px;
}
.so-pg-twin-spark-empty {
  font-size: 10px;
  color: var(--so-ink-muted);
  font-style: italic;
}
.so-pg-twin-spark-baseline {
  stroke: rgba(100, 110, 180, 0.5);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  fill: none;
}
.so-pg-twin-spark-path {
  stroke: rgba(100, 110, 180, 0.6);
  stroke-width: 1;
  fill: none;
}
.so-pg-twin-spark-synth {
  fill: rgb(100, 110, 180);
  stroke: none;
}
.so-pg-twin-spark-live {
  fill: rgb(70, 140, 90);
  stroke: none;
}

/* Recalibration signals */
.so-pg-twin-recal {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(180, 130, 40, 0.05);
  border-left: 2px solid rgb(180, 130, 40);
  border-radius: 2px;
}
.so-pg-twin-recal-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(140, 95, 20);
  margin-bottom: 6px;
}
.so-pg-twin-recal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.so-pg-twin-recal-row {
  padding: 4px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--so-ink);
  border-bottom: 1px dashed rgba(180, 130, 40, 0.2);
}
.so-pg-twin-recal-row:last-child { border-bottom: none; }
.so-pg-twin-recal-row strong { color: rgb(140, 95, 20); }
.so-pg-twin-recal-row.so-pg-twin-recal-high {
  background: rgba(192, 57, 43, 0.04);
  padding: 4px 6px;
  border-radius: 2px;
}
.so-pg-twin-recal-row.so-pg-twin-recal-high strong { color: rgb(140, 50, 40); }
.so-pg-twin-recal-reason {
  display: block;
  font-size: 10px;
  color: var(--so-ink-muted);
  margin-top: 2px;
}
.so-pg-twin-recal-foot {
  font-size: 10px;
  color: var(--so-ink-muted);
  font-style: italic;
  margin-top: 6px;
}

/* D.13: sensor-add picker skip hint */
.so-pg-prop-picker-skip-hint {
  padding: 6px 10px;
  background: rgba(80, 130, 200, 0.06);
  border-bottom: 1px solid rgba(80, 130, 200, 0.2);
  font-size: 10px;
  color: var(--so-ink-muted);
  line-height: 1.5;
}
.so-pg-prop-picker-skip-hint em {
  color: var(--so-ink);
  font-style: italic;
}
/* When the picker opens from sensor-add, the close button reads
   "skip" instead of ×. Style it as a small action, not a corner-X. */
.so-pg-prop-picker-close[title^="Skip"] {
  width: auto;
  height: auto;
  padding: 2px 8px;
  border-radius: 2px;
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* D.13: Twin view per-stage block + sensor/rollup distinctions */
.so-pg-twin-stage-block {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--so-rule);
}
.so-pg-twin-stage-block:first-of-type {
  border-top: none;
  margin-top: 6px;
  padding-top: 0;
}
.so-pg-twin-stage-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink);
  margin-bottom: 4px;
  padding: 2px 0;
}

.so-pg-twin-rollup-section {
  margin-top: 8px;
  padding: 6px 0 0;
  border-top: 1px dotted rgba(0,0,0,0.04);
}
.so-pg-twin-rollup-head {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  padding: 4px 0;
  font-style: italic;
}
.so-pg-twin-table-rollup {
  opacity: 0.92;
}
.so-pg-twin-row-rollup td {
  background: rgba(0,0,0,0.015);
}

.so-pg-twin-type-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 6px;
  vertical-align: middle;
}
.so-pg-twin-type-sensor {
  background: rgba(100, 110, 180, 0.15);
  color: rgb(70, 80, 150);
}
.so-pg-twin-type-sampler {
  background: rgba(180, 130, 40, 0.15);
  color: rgb(140, 95, 20);
}
.so-pg-twin-type-predicted {
  background: rgba(70, 140, 90, 0.15);
  color: rgb(50, 100, 65);
}
.so-pg-twin-rollup-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(0,0,0,0.06);
  color: var(--so-ink-muted);
  margin-right: 6px;
  vertical-align: middle;
}

.so-pg-twin-synthsource {
  font-size: 10px;
  color: var(--so-ink-muted);
  font-style: italic;
  margin-top: 3px;
}
.so-pg-twin-synthsource code {
  background: rgba(0,0,0,0.04);
  padding: 1px 4px;
  border-radius: 2px;
  font-style: normal;
}
.so-pg-twin-orphan {
  color: rgb(180, 130, 40);
}

/* D.13 placeholder: distributional projection button.
   Greyed out pending the platform-side fermi_project_distribution
   tool. See specs/v3/19_DISTRIBUTIONAL_PROJECTION.md for design. */
.so-pg-twin-distribution-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--so-ink-muted);
  border: 1px dashed var(--so-rule);
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 2px;
  cursor: not-allowed;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin-left: 6px;
}
.so-pg-twin-distribution-btn:hover {
  /* hover-state hint that this is the intent, not yet wired */
  border-color: rgba(100, 110, 180, 0.5);
  color: rgb(100, 110, 180);
}
.so-pg-twin-distribution-status {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(100, 110, 180, 0.15);
  color: rgb(70, 80, 150);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* D.13.1: Twin histogram (replaces sparkline when synthetic_count ≥ 6) */
.so-pg-twin-hist {
  /* shares so-pg-twin-spark base sizing */
}
.so-pg-twin-hist-bar {
  fill: rgba(100, 110, 180, 0.55);
}
.so-pg-twin-hist-baseline {
  stroke: rgba(100, 110, 180, 0.9);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  fill: none;
}
.so-pg-twin-hist-axis {
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 0.5;
  fill: none;
}
.so-pg-twin-hist-live-mark {
  fill: rgb(70, 140, 90);
}

/* D.13.1: Distribution-button active state (was greyed; now live) */
.so-pg-twin-distribution-btn {
  /* Inherit the previous "dashed grey" base but become a real
     primary action when wired. */
  border-style: solid;
  border-color: rgba(100, 110, 180, 0.5);
  color: rgb(70, 80, 150);
  background: rgba(100, 110, 180, 0.06);
  cursor: pointer;
  opacity: 1;
}
.so-pg-twin-distribution-btn:hover:not(:disabled) {
  background: rgba(100, 110, 180, 0.14);
  border-color: rgb(70, 80, 150);
}
.so-pg-twin-distribution-btn:disabled,
.so-pg-twin-distribution-btn.is-busy {
  opacity: 0.6;
  cursor: wait;
}


/* D.13.2: Run real MC button — invokes monte_carlo_sim agent v2 */
.so-pg-twin-mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(180, 130, 40, 0.06);
  color: rgb(140, 95, 20);
  border: 1px solid rgba(180, 130, 40, 0.5);
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}
.so-pg-twin-mc-btn:hover:not(:disabled) {
  background: rgba(180, 130, 40, 0.14);
  border-color: rgb(140, 95, 20);
}
.so-pg-twin-mc-btn:disabled,
.so-pg-twin-mc-btn.is-busy {
  opacity: 0.6;
  cursor: wait;
}
.so-pg-twin-mc-status {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(180, 130, 40, 0.2);
  color: rgb(110, 75, 15);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════════
   D.14: Actuator rules — Twin tab section
   ════════════════════════════════════════════════════════════════ */

.so-pg-actuators {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-left: 3px solid rgb(180, 130, 40);  /* actuator = amber */
  border-radius: 3px;
}
.so-pg-actuators-loading {
  font-size: 11px;
  color: var(--so-ink-muted);
  font-style: italic;
  padding: 8px 0;
}
.so-pg-actuators-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.so-pg-actuators-title {
  font-family: var(--so-mono);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink);
}
.so-pg-actuators-meta {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-muted);
  flex: 1;
}
.so-pg-actuators-add {
  background: rgb(180, 130, 40);
  color: var(--so-bg, white);
  border: 1px solid rgb(140, 95, 20);
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.so-pg-actuators-add:hover { background: rgb(140, 95, 20); }
.so-pg-actuators-empty {
  font-size: 12px;
  color: var(--so-ink-muted);
  line-height: 1.6;
  padding: 8px 4px;
}
.so-pg-actuators-empty code {
  font-size: 11px;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 2px;
}
.so-pg-actuators-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.so-pg-actuator-row {
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  background: var(--so-bg);
  padding: 8px 10px;
}
.so-pg-actuator-row-firing {
  border-left: 2px solid rgb(192, 57, 43);
  background: rgba(192, 57, 43, 0.04);
}
.so-pg-actuator-row-quiescent {
  border-left: 2px solid rgba(70, 140, 90, 0.5);
}
.so-pg-actuator-row-disabled {
  opacity: 0.5;
  border-left: 2px solid var(--so-rule);
}
.so-pg-actuator-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.so-pg-actuator-status {
  font-family: var(--so-mono);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.so-pg-actuator-status-firing {
  background: rgba(192, 57, 43, 0.15);
  color: rgb(140, 50, 40);
}
.so-pg-actuator-status-quiescent {
  background: rgba(70, 140, 90, 0.15);
  color: rgb(50, 100, 65);
}
.so-pg-actuator-status-disabled {
  background: rgba(0, 0, 0, 0.05);
  color: var(--so-ink-muted);
}
.so-pg-actuator-name {
  font-weight: 500;
  font-size: 12px;
  color: var(--so-ink);
  flex: 1;
}
.so-pg-actuator-controls {
  display: inline-flex;
  gap: 4px;
}
.so-pg-actuator-btn {
  background: transparent;
  border: 1px solid var(--so-rule);
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: lowercase;
}
.so-pg-actuator-btn:hover { border-color: var(--so-accent); color: var(--so-accent); }
.so-pg-actuator-btn-danger:hover {
  border-color: rgb(192, 57, 43);
  color: rgb(192, 57, 43);
}
.so-pg-actuator-btn-primary {
  background: rgb(50, 90, 150);
  color: white;
  border-color: rgb(50, 90, 150);
}
.so-pg-actuator-btn-primary:hover {
  background: rgb(40, 75, 130);
}
.so-pg-actuator-body {
  margin-top: 6px;
  font-family: var(--so-mono);
  font-size: 11px;
  line-height: 1.5;
}
.so-pg-actuator-condition {
  color: var(--so-ink);
}
.so-pg-actuator-condition code {
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
}
.so-pg-actuator-window {
  color: var(--so-ink-muted);
  font-style: italic;
  margin-left: 4px;
}
.so-pg-actuator-eval {
  margin-top: 4px;
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-pg-actuator-eval.is-firing {
  color: rgb(140, 50, 40);
}
.so-pg-actuator-lastfire {
  margin-top: 4px;
  font-size: 10px;
  color: var(--so-ink-muted);
}

/* Inline rule editor */
.so-pg-actuator-editor {
  background: rgba(180, 130, 40, 0.05);
  border: 1px solid rgba(180, 130, 40, 0.3);
  border-radius: 2px;
  padding: 12px;
  margin-bottom: 10px;
}
.so-pg-actuator-editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--so-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(140, 95, 20);
}
.so-pg-actuator-editor-head strong { flex: 1; }
.so-pg-actuator-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.so-pg-actuator-editor-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--so-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
}
.so-pg-actuator-editor-grid input,
.so-pg-actuator-editor-grid select,
.so-pg-actuator-editor-grid textarea {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--so-rule);
  background: var(--so-bg);
  color: var(--so-ink);
  border-radius: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.so-pg-actuator-editor-wide { grid-column: 1 / -1; }
.so-pg-actuator-editor-foot {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ════════════════════════════════════════════════════════════════
   Spec 23 — Sentence-first actuator rule editor
   The editor IS the rule rendered as a fill-in-the-blank sentence.
   ════════════════════════════════════════════════════════════════ */
.so-pg-actuator-editor-sentence {
  /* Reset the grid layout used by the legacy editor */
}
.so-pg-actuator-editor-namerow {
  margin-bottom: 12px;
}
.so-pg-actuator-editor-namelabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
}
.so-pg-actuator-editor-namelabel input {
  font-family: var(--so-mono);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink);
  text-transform: none;
  letter-spacing: 0;
}
.so-pg-actuator-editor-namelabel input:focus {
  outline: none;
  border-color: var(--so-accent, rgb(110, 130, 70));
}

.so-pg-rule-sentence {
  font-family: var(--so-serif, Georgia, serif);
  font-size: 14px;
  line-height: 1.9;
  padding: 12px 14px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  color: var(--so-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.so-pg-rule-when {
  font-weight: 600;
  color: var(--so-ink);
}
.so-pg-rule-comma {
  margin-left: -4px;
  color: var(--so-ink-muted);
}
.so-pg-rule-compound {
  display: inline-block;
  border-left: 2px solid var(--so-rule);
  padding: 4px 0 4px 10px;
  margin: 4px 0;
}
.so-pg-rule-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.so-pg-rule-conj {
  font-style: italic;
  color: var(--so-ink-muted);
  margin: 2px 0;
  padding-left: 0;
  font-weight: 500;
}
.so-pg-rule-empty {
  color: var(--so-ink-faint);
  font-style: italic;
  font-size: 12px;
}
.so-pg-rule-compound-controls {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
}
.so-pg-rule-add,
.so-pg-rule-add-inline,
.so-pg-rule-flip,
.so-pg-rule-remove {
  font-family: var(--so-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  background: transparent;
  border: 1px dashed var(--so-rule-dark, var(--so-ink-faint));
  border-radius: 2px;
  color: var(--so-ink-muted);
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}
.so-pg-rule-add:hover,
.so-pg-rule-add-inline:hover,
.so-pg-rule-flip:hover {
  background: var(--so-bg);
  color: var(--so-ink);
  border-style: solid;
}
.so-pg-rule-remove {
  border: none;
  font-size: 14px;
  padding: 0 6px;
  margin-left: 6px;
  color: var(--so-ink-faint);
}
.so-pg-rule-remove:hover {
  color: rgb(192, 57, 43);
}
.so-pg-rule-leaf {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.so-pg-rule-leaf select,
.so-pg-rule-leaf input.so-pg-rule-operand {
  font-family: var(--so-mono);
  font-size: 12px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 3px 6px;
  color: var(--so-ink);
}
.so-pg-rule-leaf select:focus,
.so-pg-rule-leaf input.so-pg-rule-operand:focus {
  outline: none;
  border-color: var(--so-accent, rgb(110, 130, 70));
}
.so-pg-rule-sensor { min-width: 180px; }
.so-pg-rule-comparator { min-width: 130px; }
.so-pg-rule-operand { width: 80px; }
.so-pg-rule-and {
  font-style: italic;
  color: var(--so-ink-muted);
  font-size: 12px;
}
.so-pg-rule-pct-suffix {
  color: var(--so-ink-muted);
  font-size: 11px;
}
.so-pg-rule-effect {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.so-pg-rule-effect select.so-pg-rule-effect-verb {
  font-family: var(--so-serif, Georgia, serif);
  font-size: 13px;
  font-weight: 500;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 3px 6px;
  color: var(--so-ink);
}
.so-pg-rule-effect-with {
  color: var(--so-ink-muted);
  font-size: 12px;
}
.so-pg-rule-effect-title {
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink);
  min-width: 200px;
}
.so-pg-rule-effect-advanced {
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-pg-rule-effect-advanced summary {
  cursor: pointer;
  color: var(--so-ink-faint);
  font-style: italic;
  list-style: none;
  user-select: none;
}
.so-pg-rule-effect-advanced summary::-webkit-details-marker { display: none; }
.so-pg-rule-effect-advanced[open] summary { color: var(--so-ink-muted); }
.so-pg-rule-effect-advanced label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--so-ink-faint);
}
.so-pg-rule-effect-advanced textarea {
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink);
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
  min-height: 50px;
}

/* Read-only sentence (used in saved rules list) */
.so-pg-rule-sentence-readonly {
  font-family: var(--so-serif, Georgia, serif);
  font-size: 13px;
  line-height: 1.7;
  padding: 8px 10px;
  background: transparent;
  border: none;
}
.so-pg-rule-sentence-readonly code {
  font-family: var(--so-mono);
  font-size: 11.5px;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 500;
}
.so-pg-rule-conj-ro {
  font-style: italic;
  color: var(--so-ink-muted);
}
.so-pg-rule-effect-verb-ro {
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-rule-effect-title-ro {
  color: var(--so-ink);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   Spec 22 — Hand-rolled observation graph (SVG)
   Replaces the Mermaid renderer. Three columns: features → sensors →
   properties. Stage bands behind the sensor column add spatial
   grouping without visual noise.
   ════════════════════════════════════════════════════════════════ */
.so-pg-obs-svg {
  display: block;
  font-family: var(--so-mono);
  max-width: 100%;
}
.so-pg-obs-svg-empty {
  fill: var(--so-ink-faint);
}
.so-pg-obs-svg-empty-text {
  fill: var(--so-ink-faint);
  font-size: 11px;
  font-style: italic;
}
.so-pg-obs-svg-band {
  opacity: 0.55;
}
.so-pg-obs-svg-band-label {
  fill: var(--so-ink-faint);
  font-size: 8.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.so-pg-obs-svg-node {
  fill: #fff;
  stroke: var(--so-ink-faint);
  stroke-width: 0.8;
}
.so-pg-obs-svg-node-feature  { fill: #e8eef5; stroke: #5a7196; }
.so-pg-obs-svg-node-sensor   { fill: #e8f3ed; stroke: #5a8e6f; }
.so-pg-obs-svg-node-sampler  { fill: #fcecd2; stroke: #a07a40; }
.so-pg-obs-svg-node-predicted{ fill: #efe4f4; stroke: #7c5a96; }
.so-pg-obs-svg-node-property { fill: #fff4d9; stroke: #a07a40; }
.so-pg-obs-svg-label {
  fill: var(--so-ink);
  font-size: 9.5px;
  font-family: var(--so-mono);
}
.so-pg-obs-svg-edge {
  stroke: var(--so-ink-muted);
  stroke-width: 0.7;
  fill: none;
}
.so-pg-obs-svg-edge-part_of { stroke: var(--so-ink-faint); stroke-width: 0.5; }
.so-pg-obs-svg-edge-observes,
.so-pg-obs-svg-edge-feature_of { stroke: var(--so-ink); stroke-width: 0.8; }
.so-pg-obs-svg-edge-dashed { stroke-dasharray: 2.5 2; stroke: #7c5a96; }

/* ════════════════════════════════════════════════════════════════
   Spec 22 D.15.a — Small-multiples (fleet overview) strip
   ════════════════════════════════════════════════════════════════ */
.so-pg-twin-mini-strip {
  margin: 18px 0 14px;
  background: var(--so-bg-darker);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 10px 12px 8px;
}
.so-pg-twin-mini-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.so-pg-twin-mini-title {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--so-ink);
  letter-spacing: 0.3px;
}
.so-pg-twin-mini-meta {
  font-size: 10.5px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
}
.so-pg-twin-mini-stage-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px dotted var(--so-rule);
}
.so-pg-twin-mini-stage-row:first-of-type { border-top: none; }
.so-pg-twin-mini-stage-name {
  font-size: 10.5px;
  color: var(--so-ink-muted);
  font-family: var(--so-mono);
  text-align: right;
  padding-right: 8px;
  border-right: 1px solid var(--so-rule);
  line-height: 1.2;
}
.so-pg-twin-mini-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}
.so-pg-twin-mini-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  padding: 2px 3px;
  transition: background 0.12s;
}
.so-pg-twin-mini-cell:hover { background: rgba(120, 100, 60, 0.07); }
.so-pg-twin-mini {
  width: 80px;
  height: 24px;
  display: block;
}
.so-pg-twin-mini-empty .so-pg-twin-mini-baseline {
  stroke-dasharray: 2 2;
}
.so-pg-twin-mini-baseline {
  stroke: var(--so-ink-faint);
  stroke-width: 0.5;
  opacity: 0.55;
}
.so-pg-twin-mini-path {
  fill: none;
  stroke: var(--so-ink);
  stroke-width: 0.9;
}
.so-pg-twin-mini-synth { fill: #5a8e6f; }
.so-pg-twin-mini-live  { fill: #b46a3a; }
.so-pg-twin-mini-label {
  font-family: var(--so-mono);
  font-size: 9px;
  color: var(--so-ink-muted);
  text-align: center;
  margin-top: 1px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.so-pg-twin-mini-foot {
  font-size: 10px;
  color: var(--so-ink-faint);
  font-style: italic;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted var(--so-rule);
}

/* Spotlight animation for the twin sensor row when clicked from the
   small-multiples strip. Single 1.6s flash; removes itself. */
.so-pg-twin-row-spotlight {
  animation: so-pg-twin-row-spotlight-anim 1.6s ease-out;
}
@keyframes so-pg-twin-row-spotlight-anim {
  0%   { background: rgba(180, 130, 60, 0.20); }
  50%  { background: rgba(180, 130, 60, 0.10); }
  100% { background: transparent; }
}

/* ════════════════════════════════════════════════════════════════
   Spec 22 D.15.b — Unified event timeline strip
   ════════════════════════════════════════════════════════════════ */
.so-pg-twin-events {
  margin: 14px 0 6px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 4px;
  padding: 8px 12px 4px;
}
.so-pg-twin-events-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.so-pg-twin-events-title {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--so-ink);
  letter-spacing: 0.3px;
}
.so-pg-twin-events-meta {
  font-size: 10.5px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.so-pg-twin-events-legend {
  display: inline-flex;
  gap: 8px;
}
.so-pg-twin-events-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
}
.so-pg-twin-events-legend-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.so-pg-twin-events-legend .so-pg-twin-events-live      { background: #b46a3a; }
.so-pg-twin-events-legend .so-pg-twin-events-synthetic { background: #5a8e6f; }
.so-pg-twin-events-legend .so-pg-twin-events-actuator  { background: #7c5a96; }
.so-pg-twin-events-svg {
  display: block;
  width: 100%;
  height: 30px;
}
.so-pg-twin-events-axis {
  stroke: var(--so-ink-faint);
  stroke-width: 0.5;
  opacity: 0.7;
}
.so-pg-twin-events-tick {
  fill: var(--so-ink-faint);
  font-family: var(--so-mono);
  font-size: 8px;
  text-anchor: middle;
}
.so-pg-twin-events-empty {
  fill: var(--so-ink-faint);
  font-style: italic;
  font-size: 9.5px;
}
.so-pg-twin-events-mark { cursor: default; }
.so-pg-twin-events-mark.so-pg-twin-events-live      { fill: #b46a3a; }
.so-pg-twin-events-mark.so-pg-twin-events-synthetic { fill: #5a8e6f; }
.so-pg-twin-events-mark.so-pg-twin-events-actuator  { fill: #7c5a96; }

/* ════════════════════════════════════════════════════════════════
   Step 0 (spec 22.5) — Per-stage collapse + summary strip on Twin
   The histograms ARE the dashboard. The detail table is drill-down.
   ════════════════════════════════════════════════════════════════ */
.so-pg-twin-stage-head-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  transition: background 0.12s;
}
.so-pg-twin-stage-head-row:hover {
  background: rgba(120, 100, 60, 0.06);
}
.so-pg-twin-stage-chevron {
  font-size: 10px;
  color: var(--so-ink-faint);
  width: 12px;
  display: inline-block;
  text-align: center;
}
.so-pg-twin-stage-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--so-ink);
  text-transform: uppercase;
}
.so-pg-twin-stage-counts {
  font-size: 10.5px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  margin-left: auto;
}
/* Summary strip — appears regardless of collapse state. The dashboard. */
.so-pg-twin-summary {
  padding: 4px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-pg-twin-summary-empty {
  color: var(--so-ink-faint);
  font-style: italic;
  font-size: 11px;
  padding: 6px 8px;
}
.so-pg-twin-summary-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: start;
}
.so-pg-twin-summary-row-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-faint);
  text-align: right;
  padding-top: 4px;
  font-family: var(--so-mono);
}
.so-pg-twin-summary-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.so-pg-twin-summary-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 130px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: border-color 0.12s, background 0.12s;
}
.so-pg-twin-summary-cell:hover {
  border-color: var(--so-rule);
  background: rgba(120, 100, 60, 0.05);
}
.so-pg-twin-summary-rollup {
  /* Subtle marker that this is a derived/aggregate cell, not a raw sensor */
  background: rgba(180, 130, 40, 0.04);
  border-color: rgba(180, 130, 40, 0.20);
}
.so-pg-twin-summary-rollup:hover {
  background: rgba(180, 130, 40, 0.08);
  border-color: rgba(180, 130, 40, 0.40);
}
.so-pg-twin-summary-label {
  font-family: var(--so-mono);
  font-size: 10.5px;
  color: var(--so-ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.so-pg-twin-summary-spark {
  /* The inline sparkline/histogram SVG is 120×28 by default; let it
     stretch to the cell width when slightly larger. */
  display: block;
  height: 28px;
  overflow: hidden;
}
.so-pg-twin-summary-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.so-pg-twin-summary-value {
  font-family: var(--so-mono);
  font-size: 11px;
  color: var(--so-ink-muted);
  margin-top: 2px;
  text-align: right;
}
.so-pg-twin-summary-value .so-pg-twin-unit {
  color: var(--so-ink-faint);
  font-size: 9.5px;
}
/* The detail block stays visually nested under the summary. */
.so-pg-twin-stage-detail {
  padding: 4px 8px 8px;
  border-top: 1px dotted var(--so-rule);
  margin-top: 4px;
}
.so-pg-twin-stage-detail[hidden] { display: none; }
/* Tighten stage-block spacing now that headers are clickable bars. */
.so-pg-twin-stage-block {
  margin-top: 10px;
  padding-top: 0;
  border-top: 1px solid var(--so-rule);
}
.so-pg-twin-stage-block:first-of-type {
  border-top: none;
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════
   Spec 22.6 — Honesty refactor
   "Awaiting" cells (no live data, no fake samples — just the
   declared typical_range as a band + synthetic_value as baseline)
   ════════════════════════════════════════════════════════════════ */
.so-pg-twin-spark-awaiting { opacity: 0.85; }
.so-pg-twin-await-band {
  fill: rgba(180, 130, 40, 0.10);
  stroke: rgba(180, 130, 40, 0.30);
  stroke-width: 0.4;
}
.so-pg-twin-await-edge {
  stroke: rgba(180, 130, 40, 0.45);
  stroke-width: 0.5;
  stroke-dasharray: 1.5 1.5;
}
.so-pg-twin-await-axis {
  stroke: var(--so-ink-faint);
  stroke-width: 0.4;
  opacity: 0.5;
}
.so-pg-twin-await-baseline {
  fill: rgba(180, 130, 40, 0.85);
  stroke: rgba(180, 130, 40, 0.95);
  stroke-width: 0.5;
}
.so-pg-twin-spark-empty {
  color: var(--so-ink-faint);
  font-size: 9.5px;
  font-style: italic;
  font-family: var(--so-mono);
  display: inline-block;
  line-height: 28px;
}

/* ════════════════════════════════════════════════════════════════
   Spec 22.6 — Per-stage actuator rule chips
   ════════════════════════════════════════════════════════════════ */
.so-pg-twin-summary-row-rules {
  /* same shape as rollups + sensors row */
}
.so-pg-twin-rules-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.so-pg-twin-rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--so-rule);
  border-radius: 12px;
  background: var(--so-bg);
  cursor: pointer;
  font-family: var(--so-mono);
  font-size: 10.5px;
  color: var(--so-ink);
  transition: border-color 0.12s, background 0.12s;
}
.so-pg-twin-rule-chip:hover {
  border-color: var(--so-ink-muted);
  background: rgba(120, 90, 150, 0.06);
}
.so-pg-twin-rule-chip-firing {
  border-color: rgb(70, 140, 90);
  background: rgba(70, 140, 90, 0.08);
}
.so-pg-twin-rule-chip-firing .so-pg-twin-rule-status { color: rgb(70, 140, 90); }
.so-pg-twin-rule-chip-quiescent .so-pg-twin-rule-status { color: var(--so-ink-faint); }
.so-pg-twin-rule-chip-disabled {
  opacity: 0.55;
  background: rgba(0,0,0,0.02);
}
.so-pg-twin-rule-chip-disabled .so-pg-twin-rule-status { color: var(--so-ink-faint); }
.so-pg-twin-rule-status {
  font-size: 11px;
  font-weight: 600;
  width: 12px;
  text-align: center;
}
.so-pg-twin-rule-name {
  font-weight: 500;
  color: var(--so-ink);
}
.so-pg-twin-rule-sensors {
  color: var(--so-ink-faint);
  font-size: 10px;
  border-left: 1px dotted var(--so-rule);
  padding-left: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-pg-twin-rule-add {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  background: transparent;
  border: 1px dashed var(--so-rule-dark, var(--so-ink-faint));
  border-radius: 12px;
  color: var(--so-ink-muted);
  cursor: pointer;
}
.so-pg-twin-rule-add:hover {
  background: var(--so-bg);
  color: var(--so-ink);
  border-style: solid;
}

/* ════════════════════════════════════════════════════════════════
   Spec 22.6 — Rule nodes in observation graph (4th column)
   ════════════════════════════════════════════════════════════════ */
.so-pg-obs-svg-node-rule {
  fill: rgba(120, 90, 150, 0.10);
  stroke: rgba(120, 90, 150, 0.55);
}
.so-pg-obs-svg-edge-rule_triggers {
  stroke: rgba(120, 90, 150, 0.55);
  stroke-width: 0.6;
  stroke-dasharray: 2.5 2;
}

/* ════════════════════════════════════════════════════════════════
   Spec 24 — Twin picker + per-stage instance facet
   The picker switches which twin (primary, scenario, ...) the Twin
   tab is viewing. The instance facet appears on parallel stages
   only and selects which vessel's data populates the strip.
   ════════════════════════════════════════════════════════════════ */
.so-pg-twin-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--so-mono);
  margin-left: auto;
  color: var(--so-ink-muted);
}
.so-pg-twin-picker-label {
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-pg-twin-picker-select {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink);
}
.so-pg-twin-picker-select:focus {
  outline: none;
  border-color: var(--so-accent, rgb(110, 130, 70));
}

/* Per-stage instance facet (parallel stages) */
.so-pg-twin-instance-facet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 6px;
  border-bottom: 1px dotted var(--so-rule);
  margin-bottom: 4px;
}
.so-pg-twin-instance-facet-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-ink-faint);
  font-family: var(--so-mono);
  min-width: 60px;
}
.so-pg-twin-instance-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.so-pg-twin-instance-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--so-rule);
  border-radius: 10px;
  background: var(--so-bg);
  cursor: pointer;
  font-family: var(--so-mono);
  font-size: 10.5px;
  color: var(--so-ink-muted);
  transition: border-color 0.12s, background 0.12s;
}
.so-pg-twin-instance-pill:hover {
  border-color: var(--so-ink-muted);
}
.so-pg-twin-instance-pill.is-selected {
  background: var(--so-ink);
  color: var(--so-bg);
  border-color: var(--so-ink);
}
.so-pg-twin-instance-glyph {
  font-size: 9px;
}
.so-pg-twin-instance-running       { color: rgb(70, 140, 90); }
.so-pg-twin-instance-quarantined   { color: rgb(180, 130, 40); }
.so-pg-twin-instance-harvested     { color: var(--so-ink-faint); }
.so-pg-twin-instance-failed        { color: rgb(192, 57, 43); }
.so-pg-twin-instance-pill.is-selected .so-pg-twin-instance-running,
.so-pg-twin-instance-pill.is-selected .so-pg-twin-instance-quarantined,
.so-pg-twin-instance-pill.is-selected .so-pg-twin-instance-harvested,
.so-pg-twin-instance-pill.is-selected .so-pg-twin-instance-failed {
  color: var(--so-bg);
}

/* ════════════════════════════════════════════════════════════════
   Spec 26 — Projection picker (the 4-moment gesture)
   ════════════════════════════════════════════════════════════════ */
.so-pg-projection-picker {
  margin: 12px 0;
  border: 1px solid var(--so-rule);
  border-left: 3px solid rgb(120, 90, 150);
  background: var(--so-bg-darker);
  border-radius: 4px;
  font-size: 12px;
}
.so-pg-projection-picker-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--so-rule);
}
.so-pg-projection-picker-head strong {
  font-size: 13px;
  color: var(--so-ink);
}
.so-pg-projection-picker-phase {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-pg-projection-picker-close {
  margin-left: auto;
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  color: var(--so-ink-muted);
  cursor: pointer;
}
.so-pg-projection-picker-close:hover {
  color: var(--so-ink);
  border-color: var(--so-ink-muted);
}
.so-pg-projection-picker-body {
  padding: 12px 14px;
}
.so-pg-projection-picker-hint {
  font-size: 11.5px;
  color: var(--so-ink-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
.so-pg-projection-picker-error {
  margin: 0 14px 12px;
  padding: 8px 10px;
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: rgb(192, 57, 43);
  font-size: 11.5px;
  border-radius: 3px;
}
.so-pg-projection-provider-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-pg-projection-provider {
  display: block;
  text-align: left;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
}
.so-pg-projection-provider:hover {
  border-color: rgb(120, 90, 150);
  background: rgba(120, 90, 150, 0.04);
}
.so-pg-projection-provider-name {
  font-weight: 500;
  color: var(--so-ink);
  font-size: 12px;
  margin-bottom: 3px;
}
.so-pg-projection-provider-uri {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
  margin-left: 8px;
}
.so-pg-projection-provider-desc {
  font-size: 11px;
  color: var(--so-ink-muted);
  line-height: 1.45;
  margin-bottom: 4px;
}
.so-pg-projection-provider-applies {
  font-size: 10.5px;
  color: var(--so-ink-faint);
}
.so-pg-projection-provider-applies code {
  font-family: var(--so-mono);
  font-size: 10px;
  background: rgba(0,0,0,0.05);
  padding: 0 4px;
  border-radius: 2px;
}
.so-pg-projection-back {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: transparent;
  border: 1px dashed var(--so-ink-faint);
  border-radius: 2px;
  color: var(--so-ink-muted);
  cursor: pointer;
  margin-left: 6px;
}
.so-pg-projection-back:hover {
  color: var(--so-ink);
  border-style: solid;
}
.so-pg-projection-sensor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.so-pg-projection-sensor-card {
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 8px 10px;
}
.so-pg-projection-sensor-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.so-pg-projection-sensor-head strong {
  font-family: var(--so-mono);
  color: var(--so-ink);
}
.so-pg-projection-sensor-stage {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-pg-projection-remove {
  margin-left: auto;
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--so-ink-faint);
  cursor: pointer;
  padding: 0 4px;
}
.so-pg-projection-remove:hover { color: rgb(192, 57, 43); }
.so-pg-projection-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.so-pg-projection-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.so-pg-projection-field-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
}
.so-pg-projection-field-label em {
  font-style: normal;
  color: var(--so-ink-faint);
  font-size: 9.5px;
  margin-left: 4px;
}
.so-pg-projection-field input {
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink);
}
.so-pg-projection-field input:focus {
  outline: none;
  border-color: rgb(120, 90, 150);
}
.so-pg-projection-picker-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.so-pg-projection-generate {
  font-family: var(--so-mono);
  font-size: 12px;
  padding: 6px 14px;
  background: rgb(120, 90, 150);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.so-pg-projection-generate:hover { background: rgb(140, 110, 170); }
.so-pg-projection-generate:disabled {
  background: var(--so-ink-faint);
  cursor: not-allowed;
}

/* Applicable-PREDICTED sensor highlight (purple outline) */
.so-pg-twin-summary-sensor.is-projection-applicable {
  outline: 2px solid rgba(120, 90, 150, 0.5);
  outline-offset: 1px;
  border-color: rgb(120, 90, 150);
}
.so-pg-twin-summary-sensor.is-projection-opted-in {
  outline: 2px solid rgb(120, 90, 150);
  background: rgba(120, 90, 150, 0.08);
}
/* Spec 28 follow-up: sensor whose observed property matches the
   model BUT isn't a predicted type (sosa:Sensor / sosa:Sampler).
   Greyed out + dashed outline so operator sees it's recognised
   but not eligible — projection writes to predicted only. */
.so-pg-twin-summary-sensor.is-projection-not-predicted {
  outline: 1px dashed rgba(120, 90, 150, 0.3);
  outline-offset: 1px;
  opacity: 0.5;
  cursor: not-allowed;
}
.so-pg-twin-summary-sensor.is-projection-not-predicted:hover {
  opacity: 0.65;
}

/* Expected-fire diamond on the event timeline + now marker */
.so-pg-twin-events-mark.so-pg-twin-events-expected {
  fill: none;
  stroke: rgb(120, 90, 150);
  stroke-width: 1.2;
}
.so-pg-twin-events-legend .so-pg-twin-events-expected {
  background: transparent;
  border: 1.5px solid rgb(120, 90, 150);
}
.so-pg-twin-events-now {
  stroke: var(--so-ink-faint);
  stroke-width: 0.6;
  stroke-dasharray: 1 1;
  opacity: 0.7;
}

/* Spec 26 — Projection trajectory style (overlay on sensor cells) */
.so-pg-twin-spark-projection-path {
  fill: none;
  stroke: rgb(120, 90, 150);
  stroke-width: 1.2;
  stroke-dasharray: 2.5 1.5;
}
.so-pg-twin-spark-projection .so-pg-twin-spark-live {
  fill: #b46a3a;
  stroke: rgba(255,255,255,0.6);
  stroke-width: 0.5;
}

/* ════════════════════════════════════════════════════════════════
   Spec 27 — Calibration sub-panel inside the projection picker
   ════════════════════════════════════════════════════════════════ */
.so-pg-calib-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--so-rule);
}
.so-pg-calib-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink);
  font-weight: 600;
  margin-bottom: 4px;
}
.so-pg-calib-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-pg-calib-row {
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  padding: 8px 10px;
  background: var(--so-bg);
}
.so-pg-calib-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.so-pg-calib-row-head code {
  font-family: var(--so-mono);
  font-size: 12px;
  color: var(--so-ink);
  font-weight: 500;
}
.so-pg-calib-row-stage {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-faint);
}
.so-pg-calib-row-observes {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-muted);
  margin-left: auto;
}
.so-pg-calib-fit-btn {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  background: var(--so-bg);
  color: var(--so-ink-muted);
  cursor: pointer;
}
.so-pg-calib-fit-btn:hover {
  border-color: rgb(120, 90, 150);
  color: rgb(120, 90, 150);
}
.so-pg-calib-status {
  font-size: 11px;
  color: var(--so-ink-muted);
  font-style: italic;
}
.so-pg-calib-status-ok    { color: rgb(70, 140, 90); font-style: normal; }
.so-pg-calib-status-warn  { color: rgb(180, 130, 40); }
.so-pg-calib-status-err   { color: rgb(192, 57, 43); }
.so-pg-calib-result {
  font-size: 11px;
}
.so-pg-calib-result-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--so-ink-muted);
}
.so-pg-calib-result-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-faint);
  min-width: 50px;
}
.so-pg-calib-result code {
  font-family: var(--so-mono);
  font-size: 10.5px;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--so-ink);
}
.so-pg-calib-result-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.so-pg-calib-accept,
.so-pg-calib-reject {
  font-family: var(--so-mono);
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  cursor: pointer;
}
.so-pg-calib-accept {
  background: rgb(70, 140, 90);
  color: white;
  border-color: rgb(70, 140, 90);
}
.so-pg-calib-accept:hover { background: rgb(90, 160, 110); }
.so-pg-calib-reject {
  background: transparent;
  color: var(--so-ink-muted);
}
.so-pg-calib-reject:hover { color: var(--so-ink); border-color: var(--so-ink-muted); }

/* Spec 26 — diagnostic banner in the projection picker when no
   sensors match the chosen model's applies_to. */
.so-pg-projection-diag {
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(180, 130, 40, 0.06);
  border: 1px solid rgba(180, 130, 40, 0.3);
  border-left: 3px solid rgb(180, 130, 40);
  border-radius: 3px;
  font-size: 11.5px;
  color: var(--so-ink);
  line-height: 1.55;
}
.so-pg-projection-diag strong { display: block; margin-bottom: 4px; color: rgb(180, 130, 40); }
.so-pg-projection-diag code {
  font-family: var(--so-mono);
  font-size: 10.5px;
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 2px;
}

/* Spec 26 — Field descriptions + live trajectory preview */
.so-pg-projection-field-desc {
  font-size: 9.5px;
  color: var(--so-ink-faint);
  line-height: 1.4;
  font-style: italic;
  margin-top: 2px;
}
.so-pg-projection-sensor-observes {
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-faint);
  margin-left: 8px;
}
.so-pg-projection-calibrated-from {
  font-size: 10.5px;
  color: rgb(70, 140, 90);
  background: rgba(70, 140, 90, 0.06);
  padding: 4px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
  font-style: italic;
}
.so-pg-projection-preview {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--so-bg-darker);
  border: 1px dashed var(--so-rule);
  border-radius: 3px;
}
.so-pg-projection-preview-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-faint);
  margin-bottom: 4px;
}
.so-pg-projection-preview-empty {
  color: var(--so-ink-faint);
  font-style: italic;
  font-size: 10.5px;
  text-align: center;
  padding: 10px;
}
.so-pg-projection-preview-svg {
  width: 100%;
  height: 50px;
  display: block;
}
.so-pg-projection-preview-path {
  fill: none;
  stroke: rgb(120, 90, 150);
  stroke-width: 1.2;
  stroke-dasharray: 2.5 1.5;
}
.so-pg-projection-preview-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--so-mono);
  font-size: 9.5px;
  color: var(--so-ink-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Cascade chain v2 — real <table> element, table-layout: auto.
   No CSS grid. Column visibility toggled by class on the <table>.
   Browser's native table layout handles narrow viewports.
   ═══════════════════════════════════════════════════════════════════ */
.so-cc {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-left: 3px solid var(--so-accent, rgb(110, 130, 70));
  border-radius: 3px;
  font-family: var(--so-mono);
  font-size: 12px;
}
.so-cc-broken {
  border-left-color: rgb(192, 57, 43);
  background: rgba(192, 57, 43, 0.03);
}
.so-cc-pending {
  border-left-color: var(--so-ink-muted);
  color: var(--so-ink-muted);
  font-style: italic;
  font-size: 11px;
}
.so-cc-pending-body {
  margin: 8px 0 0;
  font-style: normal;
}

/* Header — title + summary on one row, controls (energy btn + view
   toggle) on a second row. flex-wrap so narrow viewports drop the
   controls below cleanly. */
.so-cc-head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--so-rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-cc-head-titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.so-cc-head-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
  color: var(--so-ink);
}
.so-cc-head-summary {
  font-size: 11px;
  color: var(--so-ink-muted);
}
.so-cc-head-summary strong { color: var(--so-ink); }
.so-cc-head-summary code {
  background: rgba(0,0,0,0.04);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}
.so-cc-head-summary-pending { font-style: italic; }
.so-cc-head-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.so-cc-energybtn {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 3px 8px;
  background: var(--so-bg);
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  color: var(--so-ink-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-cc-energybtn-primary {
  background: var(--so-accent, rgb(110, 130, 70));
  color: white;
  border-color: var(--so-accent, rgb(110, 130, 70));
}
.so-cc-energybtn:disabled { opacity: 0.5; cursor: not-allowed; }
.so-cc-metric-chip {
  font-size: 10px;
  color: var(--so-ink-muted);
  background: rgba(0,0,0,0.04);
  padding: 1px 6px;
  border-radius: 2px;
}
.so-cc-metric-chip code { background: transparent; padding: 0; }
.so-cc-viewtoggle {
  display: flex;
  margin-left: auto;
  border: 1px solid var(--so-rule);
  border-radius: 2px;
  overflow: hidden;
}
.so-cc-viewtoggle-btn {
  font-family: var(--so-mono);
  font-size: 9.5px;
  padding: 3px 10px;
  background: var(--so-bg);
  border: none;
  color: var(--so-ink-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-right: 1px solid var(--so-rule);
}
.so-cc-viewtoggle-btn:last-child { border-right: none; }
.so-cc-viewtoggle-btn:hover { color: var(--so-ink); background: var(--so-bg-darker); }
.so-cc-viewtoggle-btn.is-active {
  background: var(--so-ink);
  color: var(--so-bg);
}

/* Table wrapper for the worst-case overflow scroll. Tables with
   long content (full unit names + large flow numbers) can exceed
   the section width; this gives a horizontal scrollbar instead of
   bleeding past the right edge. */
.so-cc-tablewrap {
  overflow-x: auto;
}
.so-cc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.so-cc-thead-cols th {
  font-family: var(--so-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-ink-muted);
  text-align: left;
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--so-rule);
  white-space: nowrap;
}
.so-cc-table td {
  padding: 5px 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
  vertical-align: middle;
}
.so-cc-table tr:last-child td { border-bottom: none; }

/* Column visibility by view mode. Flow shows 4 of 6 columns. */
.so-cc-table-flow .so-cc-col-cost,
.so-cc-table-flow .so-cc-col-partition {
  display: none;
}

/* Row status accents */
.so-cc-row-broken td { background: rgba(192, 57, 43, 0.05); }
.so-cc-row-inherited-zero td { opacity: 0.6; }
.so-cc-row-ok-with-note td { background: rgba(180, 130, 40, 0.04); }

/* Status badge */
.so-cc-status {
  font-size: 14px;
  display: inline-block;
  width: 16px;
  text-align: center;
}
.so-cc-status-ok       { color: rgb(70, 140, 90); }
.so-cc-status-broken   { color: rgb(192, 57, 43); font-weight: 700; }
.so-cc-status-ok-with-note  { color: rgb(180, 130, 40); font-weight: 700; }
.so-cc-status-inherited-zero { color: var(--so-ink-muted); }

/* Column-specific styling */
.so-cc-col-status { width: 24px; }
.so-cc-col-name   { font-weight: 500; color: var(--so-ink); min-width: 120px; }
.so-cc-col-flow   { white-space: nowrap; }
.so-cc-col-rule   { white-space: nowrap; }
.so-cc-col-cost   { min-width: 110px; }
.so-cc-col-partition { min-width: 140px; }

/* Flow cell content */
.so-cc-flow {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.so-cc-q { font-weight: 600; color: var(--so-ink); }
.so-cc-q-out { color: rgb(70, 140, 90); }
.so-cc-q-zero { color: rgb(192, 57, 43); }
.so-cc-unit {
  font-size: 10px;
  color: var(--so-ink-muted);
  text-transform: lowercase;
}
.so-cc-arrow {
  color: var(--so-ink-muted);
  padding: 0 4px;
}

/* Rule cell content */
.so-cc-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-cc-rule-tag {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-cc-rule-mass-balance {
  background: rgba(70, 140, 90, 0.12);
  color: rgb(50, 110, 70);
}
.so-cc-rule-energy-bridge {
  background: rgba(120, 90, 150, 0.12);
  color: rgb(100, 70, 130);
}
.so-cc-eff {
  font-family: var(--so-mono);
  font-size: 10px;
  color: var(--so-ink-muted);
}
.so-cc-eff-missing {
  color: rgb(180, 130, 40);
  font-style: italic;
}

/* Cost cell content */
.so-cc-cost-total {
  font-weight: 600;
  font-size: 12px;
  color: var(--so-ink);
  margin-bottom: 3px;
}
.so-cc-cost-bar {
  display: flex;
  height: 6px;
  border-radius: 1px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.so-cc-cost-band { height: 100%; display: block; }
.so-cc-cost-mat    { background: rgb(60, 110, 75); }
.so-cc-cost-energy { background: rgb(180, 130, 40); }
.so-cc-cost-labor  { background: rgb(80, 100, 150); }
.so-cc-cost-carbon { background: rgb(100, 100, 100); }
.so-cc-cost-credit {
  font-size: 9.5px;
  color: rgb(70, 140, 90);
  margin-top: 2px;
}

/* Partition cell content */
.so-cc-part-bar {
  display: flex;
  height: 6px;
  border-radius: 1px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  margin-bottom: 3px;
}
.so-cc-part-band { height: 100%; display: block; }
.so-cc-part-continues { background: rgb(70, 140, 90); }
.so-cc-part-captured  { background: rgb(180, 130, 40); }
.so-cc-part-lost      { background: rgb(192, 57, 43); opacity: 0.5; }
.so-cc-part-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 9.5px;
  color: var(--so-ink-muted);
}
.so-cc-part-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.so-cc-part-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
}
.so-cc-part-dot.so-cc-part-continues { background: rgb(70, 140, 90); }
.so-cc-part-dot.so-cc-part-captured  { background: rgb(180, 130, 40); }
.so-cc-part-dot.so-cc-part-lost      { background: rgba(192, 57, 43, 0.5); }

/* Diagnostic row — sits below its parent row, spans the full width */
.so-cc-diag-row td {
  padding: 0 8px 6px;
  background: transparent;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
}
.so-cc-diag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(192, 57, 43, 0.04);
  border-left: 2px solid rgb(192, 57, 43);
  border-radius: 2px;
  font-size: 11px;
  color: var(--so-ink);
  font-style: italic;
}
.so-cc-diag-row-ok-with-note .so-cc-diag {
  background: rgba(180, 130, 40, 0.05);
  border-left-color: rgb(180, 130, 40);
}
.so-cc-diag-row-inherited-zero .so-cc-diag {
  background: rgba(0,0,0,0.03);
  border-left-color: var(--so-ink-muted);
}
.so-cc-diag-cta {
  font-family: var(--so-mono);
  font-size: 10px;
  padding: 2px 8px;
  background: var(--so-bg);
  border: 1px solid rgb(192, 57, 43);
  color: rgb(192, 57, 43);
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-style: normal;
}
.so-cc-diag-cta:hover {
  background: rgb(192, 57, 43);
  color: white;
}

/* Footer */
.so-cc-footer {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(192, 57, 43, 0.06);
  border-radius: 2px;
  font-size: 11px;
  color: var(--so-ink);
}
.so-cc-footer strong { color: rgb(192, 57, 43); }

/* ════════════════════════════════════════════════════════════════
   ABW handoff 2026-05-26 — derived_quantities overlay on sparklines
   (viscosity, flow_index, K alongside BC yield trajectory)
   ════════════════════════════════════════════════════════════════ */
.so-pg-twin-spark-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.so-pg-twin-spark-derived {
  /* Stroke + dasharray set inline so each series gets a distinct
     palette colour. The class exists for hover targeting + future
     theming. */
}
.so-pg-twin-derived-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}
.so-pg-twin-derived-chip {
  font-family: var(--so-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 0 4px;
  border: 1px solid;
  border-radius: 2px;
  line-height: 1.3;
  background: transparent;
  cursor: help;
}