/* Surface-specific styles: table, side panel, withdrawals, coverage, docs, audit, vitals,
 * command palette. */

/* ── Table ────────────────────────────────────────────────────────────── */
.tbl-wrap {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  min-height: 0;
}
.tbl-scroll {
  flex: 1; overflow: auto;
  background: var(--bg-elev);
}
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px var(--cell-pad-x, 12px);
  white-space: nowrap;
}
.tbl thead th.sticky-first {
  left: 0; z-index: 3;
  border-right: 1px solid var(--line-soft);
}
.tbl thead th.sortable { cursor: default; }
.tbl thead th.sortable:hover { color: var(--fg-2); }
.tbl thead th.is-sorted { color: var(--fg); }
.tbl thead th.numeric { text-align: right; }
.tbl tbody td {
  padding: var(--cell-pad-y, 6px) var(--cell-pad-x, 12px);
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-2);
  vertical-align: middle;
  height: var(--row-h, 34px);
  white-space: nowrap;
}
.tbl tbody tr { background: var(--bg-elev); }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr.is-selected { background: var(--bg-selected); }
.tbl tbody tr.is-row-open { background: var(--bg-selected); }
.tbl tbody td.sticky-first {
  position: sticky; left: 0; z-index: 1;
  background: inherit;
  border-right: 1px solid var(--line-soft);
}
.tbl tbody tr:hover td.sticky-first { background: var(--bg-hover); }
.tbl tbody tr.is-selected td.sticky-first { background: var(--bg-selected); }
.tbl tbody td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Row hover actions: hidden by default, revealed on hover (keeps row density honest) */
.tbl .row-actions { display: inline-flex; gap: 4px; opacity: 0; transition: opacity 0.08s; }
.tbl tbody tr:hover .row-actions { opacity: 1; }
.tbl tbody tr.is-row-open .row-actions { opacity: 1; }
.tbl tbody tr.is-selected .row-actions { opacity: 1; }

.cell-name {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.cell-name-text { color: var(--fg); font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.cell-name-id  { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); }
.cell-kind-pill {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 4px; border-radius: 3px;
  background: var(--bg-sunk); color: var(--fg-3);
  border: 1px solid var(--line-soft);
}
.cell-action {
  font-size: 12px; color: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
}
.cell-action.is-approve { color: var(--green-fg); }
.cell-action.is-reject  { color: var(--red-fg); }
.cell-action.is-edd     { color: var(--amber-fg); }
.cell-action.is-docs    { color: var(--accent-fg); }
.cell-action.is-hold    { color: var(--slate-fg); }

.col-check { width: 28px; padding-left: 10px !important; padding-right: 4px !important; }
.col-narrow { width: 1%; }

/* Sort arrow */
.sort-arr { display: inline-block; margin-left: 4px; font-size: 9px; color: var(--fg-4); }
.tbl thead th.is-sorted .sort-arr { color: var(--accent); }

/* Footer summary */
.tbl-foot {
  flex: 0 0 auto;
  height: 32px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  font-size: 11.5px; color: var(--fg-3);
}
.tbl-foot b { color: var(--fg); font-weight: 600; }
.tbl-foot-spacer { flex: 1; }

/* Bulk action bar (when rows selected) */
.bulk-bar {
  position: absolute; left: 50%; bottom: 40px;
  transform: translateX(-50%);
  background: var(--fg);
  color: var(--bg-elev);
  border-radius: 8px;
  padding: 6px 8px 6px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md);
  z-index: 4;
  font-size: 12px;
}
.bulk-bar .bulk-count { font-weight: 600; }
.bulk-bar .bulk-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.15); }
.bulk-bar .btn-outlined { background: transparent; border-color: rgba(255,255,255,0.25); color: var(--bg-elev); }
.bulk-bar .btn-outlined:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }

/* ── Side panel (slides in over queue) ─────────────────────────────── */
.side-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.18);
  z-index: 6;
  opacity: 0;
  animation: fade-in 0.15s ease-out forwards;
}
:root[data-theme="dark"] .side-panel-backdrop { background: rgba(0,0,0,0.4); }
@keyframes fade-in { to { opacity: 1; } }
.side-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(960px, 70%);
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  z-index: 7;
  animation: slide-in 0.18s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}
@keyframes slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.sp-hd {
  flex: 0 0 auto;
  height: 48px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
}
.sp-hd-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-hd-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.sp-hd-id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); }
.sp-hd-spacer { flex: 1; }
.sp-hd-actions { display: flex; align-items: center; gap: 6px; }
.sp-hd-nav { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.sp-hd-nav .nav-btn {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 4px;
  color: var(--fg-3);
}
.sp-hd-nav .nav-btn:hover { color: var(--fg); border-color: var(--line-strong); }
.sp-hd-nav .nav-counter { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); padding: 0 4px; }

.sp-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 0;
  overflow: hidden;
}

/* Left: Sumsub-equivalent embed */
.sp-sumsub {
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  background: var(--bg-sunk);
  min-width: 0;
}
.sp-sumsub-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--fg-3);
  background: var(--bg-elev);
}
.sp-sumsub-tabs { display: flex; gap: 0; margin-right: auto; }
.sp-sumsub-tab {
  padding: 4px 8px; font: 500 12px var(--font-sans);
  color: var(--fg-3); background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sp-sumsub-tab.is-active { color: var(--fg); border-bottom-color: var(--accent); }
.sp-sumsub-tab:hover { color: var(--fg-2); }
.sp-sumsub-body {
  flex: 1; overflow: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}

/* Document tiles — placeholder for Sumsub iframe */
.doc-tile {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev);
}
.doc-tile-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; color: var(--fg-2);
}
.doc-tile-hd b { color: var(--fg); font-weight: 600; }
.doc-tile-hd .right-meta { margin-left: auto; font: 11px var(--font-mono); color: var(--fg-4); }
.doc-tile-body {
  height: 120px;
  background:
    repeating-linear-gradient(135deg,
      var(--bg-sunk) 0 8px,
      var(--bg-elev) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.doc-tile-body .doc-overlay {
  font: 10px var(--font-mono); color: var(--fg-4);
  background: var(--bg-elev); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 4px;
}
.doc-tile.is-extracted .doc-tile-body {
  background: var(--bg-elev);
  align-items: stretch; justify-content: flex-start;
  padding: 10px 12px;
}
.kv-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  font-size: 11.5px; align-items: baseline;
}
.kv-grid .k { color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.kv-grid .v { color: var(--fg); }
.kv-grid .v.mono { font-family: var(--font-mono); }

/* Right: Agio decision form */
.sp-decision {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg-elev);
}
.sp-decision-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--fg-3);
}
.sp-decision-hd b { color: var(--fg); font-size: 12.5px; font-weight: 600; }
.sp-decision-body {
  flex: 1; overflow: auto;
  display: flex; flex-direction: column;
}
.sp-block {
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 14px;
}
.sp-block-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-4);
  margin-bottom: 8px;
}
.sp-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 5px; column-gap: 14px;
  font-size: 12px;
  align-items: baseline;
}
.sp-kv .k { color: var(--fg-4); font-size: 11.5px; }
.sp-kv .v { color: var(--fg); }
.sp-kv .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sp-screening-list { display: flex; flex-direction: column; gap: 6px; }
.sp-screening-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 12px;
}
.sp-screening-row .scr-name { color: var(--fg); font-weight: 500; }
.sp-screening-row .scr-detail { color: var(--fg-4); font-size: 11.5px; }
.sp-screening-row.is-hit { background: var(--red-bg); border-color: var(--red-bg); }
.sp-screening-row.is-hit .scr-name { color: var(--red-fg); }

.sp-decision-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.sp-reason-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--fg-3);
}
.sp-reason-label .req { color: var(--red-fg); margin-left: 4px; }
.sp-reason {
  width: 100%; resize: none;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  border-radius: 6px;
  font: 12px var(--font-sans);
  color: var(--fg);
  outline: none;
}
.sp-reason:focus { border-color: var(--accent); }
.sp-reason::placeholder { color: var(--fg-4); }
.sp-actions {
  display: flex; align-items: center; gap: 6px;
}
.sp-actions .right { margin-left: auto; }

.sp-tab-content { flex: 1; overflow: auto; padding: 14px; }

/* Timeline events on the History tab */
.sp-timeline { position: relative; padding-left: 18px; }
.sp-timeline::before {
  content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px;
  width: 1px; background: var(--line);
}
.sp-tl-evt {
  position: relative;
  padding: 6px 0 10px;
  font-size: 12px;
}
.sp-tl-evt::before {
  content: ""; position: absolute; left: -16px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-elev);
  border: 1.5px solid var(--fg-4);
}
.sp-tl-evt.is-now::before { background: var(--accent); border-color: var(--accent); }
.sp-tl-evt .tl-ts { font: 10.5px var(--font-mono); color: var(--fg-4); }
.sp-tl-evt .tl-actor { color: var(--fg-3); }
.sp-tl-evt .tl-line { color: var(--fg); }

/* ── Withdrawals ────────────────────────────────────────────────────── */
.wd-row-expanded {
  background: var(--bg-sunk);
}
.wd-row-expanded > td {
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.wd-edd {
  padding: 14px 24px 16px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 18px;
  border-top: 1px dashed var(--line);
}
.wd-edd-col {
  display: flex; flex-direction: column; gap: 10px;
}
.wd-edd-col h4 {
  margin: 0; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-4); font-weight: 600;
}
.wd-edd-field { display: flex; flex-direction: column; gap: 4px; }
.wd-edd-field label { font-size: 11px; color: var(--fg-4); }
.wd-edd-field select,
.wd-edd-field input,
.wd-edd-field textarea {
  font: 12px var(--font-sans);
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--fg);
  border-radius: 5px;
  outline: none;
  resize: vertical;
}
.wd-edd-field select:focus,
.wd-edd-field input:focus,
.wd-edd-field textarea:focus { border-color: var(--accent); }
.wd-edd-attest {
  font-size: 11.5px; color: var(--fg-3);
  display: flex; align-items: flex-start; gap: 8px;
}
.wd-edd-foot {
  grid-column: 1 / -1;
  display: flex; gap: 8px; align-items: center;
  padding-top: 4px; border-top: 1px solid var(--line-soft);
}

.dest-cell {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-2);
}
.dest-risk {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 4px; border-radius: 3px;
}
.dest-risk-low { background: var(--green-bg); color: var(--green-fg); }
.dest-risk-med { background: var(--amber-bg); color: var(--amber-fg); }
.dest-risk-high{ background: var(--red-bg);   color: var(--red-fg); }

/* ── Coverage Gaps ────────────────────────────────────────────────── */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
  align-content: start;
}
.org-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.org-card-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.org-card-hd .name { font-size: 13px; font-weight: 600; color: var(--fg); }
.org-card-hd .id   { font: 10.5px var(--font-mono); color: var(--fg-4); }
.org-card-hd .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.org-card-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 14px;
}
.org-meta {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px;
}
.org-meta .meta-row { display: flex; justify-content: space-between; gap: 8px; }
.org-meta .k { color: var(--fg-4); }
.org-meta .v { color: var(--fg); font-weight: 500; }
.org-meta .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.org-coverage-bar {
  position: relative; height: 6px;
  background: var(--bg-sunk); border-radius: 3px; overflow: hidden;
  border: 1px solid var(--line-soft);
}
.org-coverage-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--amber);
  transition: width 0.2s;
}
.org-coverage-bar.is-good .org-coverage-bar-fill { background: var(--green); }
.org-coverage-bar.is-bad  .org-coverage-bar-fill { background: var(--red); }
.org-coverage-bar.is-zero .org-coverage-bar-fill { background: var(--red); width: 6px; }

.org-chart {
  position: relative;
  padding: 8px;
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  min-height: 200px;
}
.org-card-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-sunk);
}
.org-card-foot .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ── Documents (timeline + drilldown) ─────────────────────────────── */
.docs-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}
.docs-main { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.docs-stack {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 18px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 240px;
}
.docs-stack-col {
  flex: 1;
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
  height: 100%;
  cursor: default;
}
.docs-stack-bar {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column-reverse;
  background: var(--bg-sunk);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  position: relative;
}
.docs-stack-seg { width: 100%; transition: filter 0.1s; }
.docs-stack-col.is-active .docs-stack-bar { box-shadow: 0 0 0 2px var(--accent); }
.docs-stack-col:hover .docs-stack-bar { box-shadow: 0 0 0 1px var(--line-strong); }
.docs-stack-meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding-top: 4px;
}
.docs-stack-meta .lbl { font-size: 11px; color: var(--fg-4); }
.docs-stack-meta .num { font: 600 17px var(--font-mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.docs-stack-tone-red .num { color: var(--red-fg); }
.docs-stack-tone-amber .num { color: var(--amber-fg); }

.docs-list-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.docs-list-card .card-body { flex: 1; padding: 0; overflow: auto; }
.doc-row {
  display: grid;
  grid-template-columns: 22px 1fr 130px 80px 24px;
  align-items: center; gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  height: 32px;
}
.doc-row:hover { background: var(--bg-hover); }
.doc-row .doc-name { color: var(--fg); font-weight: 500; }
.doc-row .doc-type { color: var(--fg-3); }
.doc-row .doc-days { color: var(--fg-3); font: 11.5px var(--font-mono); text-align: right; }
.doc-row.is-urgent .doc-days { color: var(--red-fg); }
.doc-row.is-soon   .doc-days { color: var(--amber-fg); }

.docs-side .card-body { padding: 0; }
.docs-side-summary {
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 8px;
}
.docs-summary-num { font: 600 28px var(--font-mono); color: var(--fg); }
.docs-summary-lbl { font-size: 11.5px; color: var(--fg-3); }
.docs-bulk { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.docs-bulk-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: 6px;
  font-size: 12px; color: var(--fg-2);
  background: var(--bg-sunk);
}

/* ── Audit Trail ──────────────────────────────────────────────────── */
.audit-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--red-bg);
  border-bottom: 1px solid var(--red-bg);
  color: var(--red-fg);
  font-size: 12px;
  font-weight: 500;
}
.audit-banner .audit-banner-icon { color: var(--red-fg); }
.audit-banner .audit-banner-hint { color: var(--fg-3); font-weight: 400; margin-left: auto; }

.audit-actor {
  font: 11.5px var(--font-mono); color: var(--fg-2);
}
.audit-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--bg-sunk); color: var(--fg-2);
  border: 1px solid var(--line-soft);
}
.audit-action.is-approved   { color: var(--green-fg); background: var(--green-bg); border-color: var(--green-bg); }
.audit-action.is-rejected   { color: var(--red-fg);   background: var(--red-bg);   border-color: var(--red-bg); }
.audit-action.is-escalated  { color: var(--amber-fg); background: var(--amber-bg); border-color: var(--amber-bg); }
.audit-action.is-system     { color: var(--fg-3); }
.audit-subject { color: var(--fg); font-weight: 500; }
.audit-note    { color: var(--fg-3); font-size: 11.5px; }

/* ── Vitals (CIO/CTO card cluster) ─────────────────────────────────── */
.vitals-wrap {
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 20px;
  max-width: 1200px;
}
.vitals-hd {
  display: flex; align-items: baseline; gap: 12px;
}
.vitals-hd h2 { margin: 0; font-size: 15px; font-weight: 600; }
.vitals-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 14px;
}
.vital {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.vital-lbl { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-4); font-weight: 600; }
.vital-num { font: 600 30px var(--font-mono); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vital-sub { font-size: 11.5px; color: var(--fg-3); }
.vital.is-good .vital-num   { color: var(--fg); }
.vital.is-bad  .vital-num   { color: var(--red-fg); }
.vital.is-warn .vital-num   { color: var(--amber-fg); }

.workstreams {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.workstream {
  display: grid;
  grid-template-columns: 16px 220px 1fr max-content;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.workstream:last-child { border-bottom: 0; }
.ws-dot { width: 8px; height: 8px; border-radius: 50%; }
.ws-dot.green { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.ws-dot.amber { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.ws-dot.red   { background: var(--red);   box-shadow: 0 0 0 3px var(--red-bg);
                animation: pulse-red 1.6s ease-in-out infinite; }
.ws-name { color: var(--fg); font-weight: 500; }
.ws-hint { color: var(--fg-3); font-size: 11.5px; }
.ws-state-pill { font: 9.5px var(--font-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.ws-state-pill.green { background: var(--green-bg); color: var(--green-fg); }
.ws-state-pill.amber { background: var(--amber-bg); color: var(--amber-fg); }
.ws-state-pill.red   { background: var(--red-bg); color: var(--red-fg); }

/* ── Command palette ───────────────────────────────────────────────── */
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 100;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  animation: fade-in 0.1s ease-out forwards;
  opacity: 0;
}
:root[data-theme="dark"] .cmdk-backdrop { background: rgba(0,0,0,0.55); }
.cmdk {
  width: 560px;
  max-width: 90vw;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.25);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cmdk-search {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.cmdk-search input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font: 14px var(--font-sans);
  color: var(--fg);
}
.cmdk-search input::placeholder { color: var(--fg-4); }
.cmdk-results {
  max-height: 50vh; overflow: auto;
  padding: 6px;
}
.cmdk-section {
  padding: 6px 10px 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-4);
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  color: var(--fg-2); font-size: 13px;
  cursor: default;
}
.cmdk-item:hover, .cmdk-item.is-active { background: var(--bg-active); color: var(--fg); }
.cmdk-item-r {
  margin-left: auto;
  font: 11px var(--font-mono); color: var(--fg-4);
  display: flex; gap: 4px;
}
.cmdk-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--fg-4);
}
.cmdk-foot .kbd { font-size: 10px; }