:root {
  --bg: #0f1419;
  --surface: #1a2332;
  --surface-hover: #243044;
  --border: #2d3a4f;
  --text: #fcfdfe;
  --text-muted: #c9d3e1;
  --accent: #3b82f6;
  --accent-dim: #2563eb;
  --highlight: #60a5fa;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --purple: #a855f7;
  --purple-soft: #c084fc;
  --kind-bank-entity: #0d9488;
  --kind-bank-entity-fill: rgba(13, 148, 136, 0.18);
  --kind-customer: #3b82f6;
  --kind-customer-fill: rgba(59, 130, 246, 0.18);
  --kind-facility: #a855f7;
  --kind-facility-fill: rgba(168, 85, 247, 0.18);
  --kind-exposure: #f59e0b;
  --kind-exposure-fill: rgba(245, 158, 11, 0.18);
  --kind-mitigant: #22c55e;
  --kind-mitigant-fill: rgba(34, 197, 94, 0.18);
  --kind-netting-set: #06b6d4;
  --kind-netting-set-fill: rgba(6, 182, 212, 0.18);
  --kind-retail-pool: #f43f5e;
  --kind-retail-pool-fill: rgba(244, 63, 94, 0.18);
  --panel: var(--surface);
  --muted: var(--text-muted);
  --line: var(--border);
  --btn-radius: 6px;
  --btn-hover-tint: rgba(255, 255, 255, 0.06);
  --btn-focus-ring: 2px solid var(--accent);
  --header-height: 40px;
  --footer-height: 40px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

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

em {
  font-style: normal;
  color: var(--highlight);
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* Header — LibZen 40px bar; centre holds organisation · book */
.app-header {
  display: grid;
  /* Brand and controls keep their width; the book context in the middle
     shrinks (ellipsis) rather than being overrun by the controls. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.app-header-left,
.app-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-header-left {
  justify-self: start;
}

.app-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: min(52vw, 560px);
  /* Stretch within its column (centred by justify-content) so the column,
     not the text, sets the width and the labels ellipsize. */
  justify-self: stretch;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.context-folder-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.context-folder-btn:hover:not(:disabled) {
  background: var(--btn-hover-tint);
  color: var(--text);
}

.context-folder-btn:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 1px;
}

.context-folder-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.context-folder-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.context-org {
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-sep {
  color: var(--text-muted);
  flex-shrink: 0;
}

.context-book {
  min-width: 0;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-right {
  justify-self: end;
  justify-content: flex-end;
}

.app-header-right .btn {
  flex-shrink: 0;
}

.header-select {
  /* Shrinks before the header's centre is overrun; the full name is in the
     option text and the title. */
  flex: 0 1 170px;
  min-width: 80px;
  max-width: 170px;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
}

.header-select:focus {
  outline: none;
  border-color: var(--accent);
}

.plan-panel {
  margin-bottom: 16px;
}

.plan-table td.num,
.plan-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.plan-table .plan-row-off td {
  color: var(--text-muted);
}

.plan-table .plan-row-ref td {
  color: var(--text-muted);
  font-style: italic;
}

.calc-lineage-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #8b98a5);
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
}

.calc-lineage-opt input {
  margin: 0;
  cursor: pointer;
}

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

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--btn-radius);
  background: linear-gradient(135deg, var(--highlight), var(--accent));
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #0f1419;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-weight: 600;
  font-size: 13px;
}

.brand-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--btn-hover-tint);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.data-train {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  flex: 1;
}

.data-train-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.data-train-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--btn-hover-tint);
}

.data-train-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

#chipStock {
  max-width: min(560px, 100%);
  min-width: 0;
  flex: 1;
}

#chipStock .libzen-fp-trigger {
  font-size: 12px;
  color: var(--text-muted);
}

.data-book-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.data-book-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}

.data-book-header .data-train {
  min-width: min(280px, 100%);
}

.data-book-panel {
  flex-shrink: 0;
}

.data-book-panel .panel-header {
  border-bottom: none;
}

/* Body + tabs */
.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.app-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  /* Pull toward --text so the dimmer is visible; both stops follow the gauge. */
  color: color-mix(in srgb, var(--text) 62%, var(--text-muted));
  font: inherit;
  font-size: 13px;
  padding: 10px 14px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.app-tab:hover:not(:disabled) {
  color: var(--text);
  background: var(--btn-hover-tint);
}

.app-tab.active {
  color: var(--highlight);
  border-bottom-color: var(--accent);
}

.app-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.app-main {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.app-main:has(#viewLineage.active),
.app-main:has(#viewWaves.active),
.app-main:has(#viewExplorer.active),
.app-main:has(#viewLog.active),
.app-main:has(#viewReports.active),
.app-main:has(#viewDq.active),
.app-main:has(#viewTests.active),
.app-main:has(#viewPerfmon.active),
.app-main:has(#viewStock.active) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.view-lineage.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.lineage-modebar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.lineage-mode-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
}

.lineage-mode-btn:hover {
  background: var(--surface-hover);
}

.lineage-mode-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  color: var(--text);
  font-weight: 600;
}

.lineage-mode-hint {
  opacity: 0.75;
}

.lineage-mode {
  display: none;
  flex: 1;
  min-height: 0;
}

.lineage-mode.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lineage-focus {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lineage-show-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  user-select: none;
}

.lineage-order-hidden {
  opacity: 0.45;
}

.view-waves.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.wave-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  --wave-log-width: 248px;
}

.view-browse.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.browse-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.browse-card > summary.panel-header {
  list-style: none;
  cursor: pointer;
}

.browse-card > summary.panel-header::-webkit-details-marker {
  display: none;
}

.browse-card[open] > summary.panel-header {
  border-bottom: 1px solid var(--border);
}

.stock-notes {
  margin-top: 16px;
}

.stock-note {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.json-preview {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 11px;
  line-height: 1.45;
  color: var(--highlight);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

.wave-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #0c1016;
  touch-action: none;
  cursor: grab;
}

.wave-stage:active {
  cursor: grabbing;
}

#waveCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.wave-search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.wave-search-input {
  width: min(280px, 36vw);
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.wave-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: min(420px, 90vw);
  max-height: 280px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.wave-search-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.wave-search-hit:hover {
  background: var(--surface-hover);
}

.wave-search-hit strong {
  font-weight: 600;
}

.wave-search-hit span {
  color: var(--text-muted);
  font-size: 0.85em;
}

.wave-search-empty {
  padding: 0.75rem;
  color: var(--text-muted);
}

.wave-kind-btn {
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
}

.wave-kind-btn[aria-pressed="false"] {
  opacity: 0.35;
}

.wave-legend-dim {
  color: #64748b;
}

.wave-legend-lit {
  color: #e2e8f0;
  font-weight: 600;
}

.wave-slow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wave-slow-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.wave-slow-seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  overflow: hidden;
}

.wave-slow-btn {
  margin: 0;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  line-height: 1.2;
}

.wave-slow-btn:last-child {
  border-right: none;
}

.wave-slow-btn:hover {
  background: var(--btn-hover-tint);
  color: var(--text);
}

.wave-slow-btn:focus-visible {
  outline: var(--btn-focus-ring);
  outline-offset: -2px;
  z-index: 1;
}

.wave-slow-btn[aria-checked="true"] {
  background: var(--accent);
  color: #fff;
}

.wave-log-panel {
  flex: 0 0 var(--wave-log-width);
  width: var(--wave-log-width);
  min-width: 180px;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.wave-splitbar,
.landscape-splitbar {
  position: relative;
  flex: 0 0 8px;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
  z-index: 4;
  background: transparent;
}

.wave-splitbar::after,
.landscape-splitbar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: var(--border);
  pointer-events: none;
}

.wave-splitbar:hover::after,
.wave-splitbar.is-dragging::after,
.wave-splitbar:focus-visible::after,
.landscape-splitbar:hover::after,
.landscape-splitbar.is-dragging::after,
.landscape-splitbar:focus-visible::after {
  background: var(--accent);
}

.wave-splitbar:focus-visible,
.landscape-splitbar:focus-visible {
  outline: none;
}

body.wave-split-active,
body.landscape-split-active {
  cursor: col-resize;
  user-select: none;
}

body.wave-split-active .wave-stage {
  pointer-events: none;
}

body.landscape-split-active .landscape-mosaic {
  pointer-events: none;
}

.wave-now {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.wave-clock {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  color: var(--highlight);
  line-height: 1.15;
}

.wave-clock-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.wave-op {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.wave-op-phase {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.wave-op-wave {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.wave-op-detail {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.wave-log {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 0;
  overflow: auto;
  list-style: none;
  scrollbar-gutter: stable;
}

.wave-log-item {
  display: grid;
  grid-template-columns: 7.2em 1fr;
  gap: 8px;
  padding: 6px 12px;
  border-left: 2px solid transparent;
  cursor: pointer;
}

.wave-log-item:hover {
  background: var(--btn-hover-tint);
}

.wave-log-item.upcoming {
  opacity: 0.48;
}

.wave-log-item.played {
  opacity: 0.82;
}

.wave-log-item.current {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-left-color: var(--accent);
}

.wave-log-item.current:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.wave-log-t {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  color: var(--highlight);
  padding-top: 1px;
}

.wave-log-op {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.wave-log-n {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Summary KPI row — SplitZen bz-totals pattern */
.summary-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  padding: 14px 16px;
}

.stat[data-kind="rwa"] { border-top: 2px solid var(--accent); }
.stat[data-kind="ead"] { border-top: 2px solid var(--highlight); }
.stat[data-kind="rw"] { border-top: 2px solid var(--warning); }
.stat[data-kind="perf-rss"] { border-top: 2px solid #5b9bd5; }
.stat[data-kind="perf-alpha"] { border-top: 2px solid #1a9b8e; }
.stat[data-kind="perf-max"] { border-top: 2px solid #70ad47; }
.stat[data-kind="perf-swap"] { border-top: 2px solid #ed7d31; }
.stat[data-kind="perf-cpu"] { border-top: 2px solid #c27ba0; }
.stat[data-kind="perf-disk"] { border-top: 2px solid #c9a227; }

.stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.stat-value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--highlight);
  font-variant-numeric: tabular-nums;
}


.stat-meta {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Overview: stock counts + calculation results */
.overview-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* —— RWA landscape (Doc 30 gather view) —— */
.landscape-panel {
  margin: 0 0 12px;
}

.landscape-body {
  display: flex;
  gap: 0;
  padding: 0 12px 12px;
  min-height: 320px;
  --landscape-side-width: 280px;
}

.landscape-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.landscape-mosaic {
  position: relative;
  flex: 1;
  min-height: 260px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Landscape tile tip uses LibZen.FloatingCard (body portal) — see landscape.js */

.landscape-tile-tip-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.65rem;
}

.landscape-tile-tip-dl dt {
  color: var(--text-muted);
}

.landscape-tile-tip-dl dd {
  margin: 0;
  text-align: right;
}

.landscape-empty,
.landscape-empty-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px;
  text-align: center;
}

.landscape-empty-sm {
  height: auto;
  padding: 8px 0;
}

.landscape-tile {
  position: absolute;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid rgba(15, 20, 25, 0.55);
  border-radius: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: inherit;
  line-height: 1.25;
}

.landscape-tile:hover {
  outline: 1px solid var(--highlight);
  z-index: 2;
}

.landscape-tile.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  z-index: 3;
}

.landscape-tile .lt-seg {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landscape-tile .lt-le {
  font-size: 10px;
  color: rgba(232, 237, 244, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landscape-tile .lt-metrics {
  margin-top: auto;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.landscape-tile .lt-phase {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.landscape-tile.phase-queued {
  background: #2a3344;
  color: var(--text-muted);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(255, 255, 255, 0.03) 5px,
    rgba(255, 255, 255, 0.03) 10px
  );
}

.landscape-tile.phase-phase1 {
  background: #2c4a5e;
  background-image: repeating-linear-gradient(
    -45deg,
    #2c4a5e,
    #2c4a5e 5px,
    #355a70 5px,
    #355a70 10px
  );
}

.landscape-tile.phase-crm,
.landscape-tile.phase-phase3 {
  background: #5a4a2c;
  background-image: repeating-linear-gradient(
    -45deg,
    #5a4a2c,
    #5a4a2c 5px,
    #6b5a36 5px,
    #6b5a36 10px
  );
}

.landscape-tile.phase-done {
  /* background set inline from RW heat */
  color: #f4fff8;
}

.landscape-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.landscape-legend .sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -2px;
  border: 1px solid var(--border);
}

.sw-hot { background: hsl(60 55% 32%); }
.sw-cool { background: hsl(155 45% 36%); }
.sw-crm {
  background: repeating-linear-gradient(
    -45deg, #5a4a2c, #5a4a2c 3px, #6b5a36 3px, #6b5a36 6px
  );
}
.sw-phase1 {
  background: repeating-linear-gradient(
    -45deg, #2c4a5e, #2c4a5e 3px, #355a70 3px, #355a70 6px
  );
}
.sw-queued { background: #2a3344; }

.landscape-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 var(--landscape-side-width);
  width: var(--landscape-side-width);
  min-width: 0;
  max-width: 55%;
}

.landscape-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px;
}

.landscape-card-curve {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.landscape-card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.landscape-card-h h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.landscape-card-h span {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.landscape-progress {
  height: 6px;
  background: var(--surface-hover);
  margin-bottom: 10px;
  overflow: hidden;
}

.landscape-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2c4a5e, #3d8f6a);
  transition: width 0.2s ease;
}

.landscape-curve {
  width: 100%;
  height: 180px;
  min-height: 140px;
  flex: 1 1 auto;
  display: block;
  overflow: visible;
}

.landscape-curve .curve-ead {
  stroke: #7eb8da;
  stroke-width: 2;
}

.landscape-curve .curve-rwa {
  stroke: #3d8f6a;
  stroke-width: 2.4;
}

.landscape-curve .curve-axis-line {
  stroke: var(--border);
  stroke-width: 1;
}

.landscape-curve .curve-grid {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.4;
}

.landscape-curve .curve-tick {
  stroke: var(--border);
  stroke-width: 1;
}

.landscape-curve .curve-tick-label {
  fill: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.landscape-curve .curve-axis-title {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.landscape-curve-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.landscape-axis-hint {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.landscape-curve-legend i {
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.leg-ead { background: #7eb8da; }
.leg-rwa { background: #3d8f6a; }

.landscape-entities {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
}

.landscape-entity {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 52px 36px;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}

.le-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a3344;
  border: 1px solid #9aa8b5;
}

.le-dot[data-phase="done"],
.le-dot[data-phase="phase3"] {
  background: #3d8f6a;
  border-color: #3d8f6a;
}

.le-dot[data-phase="phase1"] {
  background: #7eb8da;
  border-color: #7eb8da;
}

.le-dot[data-phase="crm"] {
  background: #c4a35a;
  border-color: #c4a35a;
}

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

.le-bar {
  height: 5px;
  background: var(--surface-hover);
  overflow: hidden;
}

.le-bar > i {
  display: block;
  height: 100%;
  background: #3d8f6a;
}

.le-pct {
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
  .landscape-body {
    flex-direction: column;
  }

  .landscape-splitbar {
    display: none;
  }

  .landscape-side {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}

/* Panels */
.panel-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 12px;
  align-items: start;
}

.panel-grid-primary {
  align-items: stretch;
}

.panel-grid-primary > .panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-grid-primary > .panel .table-wrap {
  flex: 1;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  overflow: hidden;
}

.panel-wide {
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}

.panel-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.panel-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.panel-body {
  padding: 14px;
}

.entity-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.entity-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entity-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.envelope-line {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.envelope-line .pin-ok { color: var(--success); }
.envelope-line .pin-bad { color: var(--danger); }
.envelope-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.hash-ok { color: var(--success); }
.hash-bad { color: var(--danger); }

.entity-value {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.entity-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* Buttons */
.btn {
  border: none;
  border-radius: var(--btn-radius);
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-dim);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--btn-hover-tint);
  color: var(--text);
}

.icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}

.icon-btn:hover:not(:disabled) {
  background: var(--btn-hover-tint);
  color: var(--text);
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.header-pins {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-pin-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.header-pin-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Table — auth.css pattern */
.table-wrap {
  overflow-x: auto;
}

.table-wrap:has(tbody .empty-row) {
  overflow-x: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.data-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.2);
}

.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table code {
  font-size: 12px;
  color: var(--highlight);
}

.data-table tfoot td {
  background: rgba(59, 130, 246, 0.08);
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.empty-row td {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 16px;
}

/* Resizable columns — Overview results, Reports, and Pivot */
.data-table.is-resizable {
  table-layout: fixed;
}

.data-table.is-resizable th,
.data-table.is-resizable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table.is-resizable .empty-row td {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.data-table.is-resizable td.reports-name {
  white-space: normal;
}

.data-table.is-resizable .reports-name-inner {
  flex-wrap: nowrap;
}

.data-table.is-resizable th {
  position: relative;
}

/* Body cells keep the same 12px right pad whether filters are on or not. */
.data-table.is-filterable.is-resizable td,
.data-table.is-filterable td {
  padding-right: 12px;
}

/* Split drag handle between columns — always a faint rail, accent on hover. */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  touch-action: none;
}

.col-resize-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
}

.col-resize-handle::after {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 3px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.15s;
}

.col-resize-handle:hover::before,
th.is-resizing .col-resize-handle::before {
  background: var(--accent);
}

.col-resize-handle:hover::after,
th.is-resizing .col-resize-handle::after {
  background: var(--accent);
}

body.col-resizing {
  cursor: col-resize;
  user-select: none;
}

body.col-resizing * {
  cursor: col-resize !important;
}

/* Excel-style column filters.
 *
 * Journal (`.ops-events`): funnel overlays the right of the header. Labels are
 * left-aligned, so that overlay is fine.
 *
 * Overview / Reports / Pivot (`.data-table`, including RWA): match LibZen.Table
 * — label + funnel share one in-flow flex row. A wide right-aligned measure
 * header (RWA, EAD, n) then sits beside the glyph instead of under it; a
 * narrow column ellipsizes the label, same as the library table.
 */
.ops-events.is-filterable th.col-filter-th {
  position: relative;
  padding-right: 12px;
}

.data-table.is-filterable th.col-filter-th {
  position: relative;
  min-width: 0;
  overflow: hidden;
  /* Resize rail strip — same as .lz-tbl-th[data-filterable]. */
  padding-right: 0.85rem;
}

.data-table.is-filterable .col-filter-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
}

.data-table.is-filterable .col-filter-label {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table.is-filterable th.col-filter-th-center .col-filter-stack {
  justify-content: center;
}

.data-table.is-filterable th.col-filter-th-center .col-filter-label {
  flex: 0 1 auto;
  text-align: center;
}

.col-filter-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  user-select: none;
}

.ops-events .col-filter-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

.data-table.is-filterable .col-filter-btn {
  flex: 0 0 auto;
  position: relative;
  z-index: 6;
  width: 18px;
  height: 18px;
}

.col-filter-btn:hover,
.col-filter-th.col-filter-open .col-filter-btn,
.col-filter-btn.is-active {
  opacity: 1;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.12);
}

.col-filter-th.col-filter-active {
  color: var(--text);
}

.col-filter-menu {
  position: fixed;
  z-index: 2400;
  width: 220px;
  max-height: min(360px, 70vh);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.col-filter-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.col-filter-actions {
  display: flex;
  gap: 12px;
}

.col-filter-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.col-filter-link:hover {
  text-decoration: underline;
}

.col-filter-list {
  overflow: auto;
  flex: 1;
  min-height: 80px;
  max-height: 220px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding: 4px 0;
}

.col-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text);
}

.col-filter-option:hover {
  background: rgba(59, 130, 246, 0.1);
}

.col-filter-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-filter-empty {
  margin: 12px 8px;
  color: var(--text-muted);
  text-align: center;
}

.col-filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.data-table.is-resizable th.col-filter-th {
  /* Funnel is in-flow; keep the LibZen resize-rail strip. */
  padding-right: 0.85rem;
}

.data-table.is-resizable .col-resize-handle {
  z-index: 5;
}

/* Settings dialog — use :not([hidden]) so display:flex does not override [hidden] */
/* No dim: dimming is reserved for the login splash only */
.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: transparent;
}

.settings-backdrop:not([hidden]) {
  display: flex;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 440px);
  max-height: min(90vh, 720px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.settings-header h2 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.settings-body {
  padding: 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-section {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.settings-lead {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.settings-source-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-source-block[hidden] {
  display: none;
}

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

.settings-label {
  font-size: 13px;
  font-weight: 600;
}

.settings-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-select {
  margin-top: 4px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.settings-select:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-gauge {
  display: grid;
  grid-template-columns: auto 1fr auto 2.75rem;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.settings-gauge-end {
  font-size: 11px;
  color: var(--text-muted);
}

.settings-gauge-value {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}

.settings-range {
  width: 100%;
  height: 6px;
  accent-color: var(--accent);
  cursor: pointer;
}

.settings-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
}

/* Footer — LibZen 40px bar */
.app-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--footer-height);
  min-height: var(--footer-height);
  padding: 0 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.footer-brand {
  font-weight: 600;
  color: var(--text);
}

.footer-chip {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

.footer-spacer {
  flex: 1;
}

.footer-elapsed {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.footer-elapsed:hover,
.footer-elapsed:focus-visible {
  color: var(--highlight);
}

.footer-elapsed.busy {
  color: var(--warning);
}

.footer-elapsed.error {
  color: var(--danger);
}

.op-toast {
  position: fixed;
  right: 12px;
  bottom: calc(var(--footer-height) + 12px);
  z-index: 40;
  width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 12px;
}

.op-toast[hidden] {
  display: none;
}

.op-toast-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.op-toast-cancel {
  margin-left: auto;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 4px;
  padding: 1px 7px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.op-toast-cancel:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.op-toast-kind {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.op-toast-label {
  font-weight: 600;
  color: var(--text);
}

.op-toast-msg {
  margin: 6px 0 8px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-toast-bar {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--border) 70%, var(--surface));
  overflow: hidden;
}

.op-toast-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--warning);
  transition: width 200ms linear;
}

.footer-version {
  color: var(--text-muted);
}

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

.status-dot.busy {
  background: var(--warning);
  animation: pulse 1s infinite;
}

.status-dot.error {
  background: var(--danger);
}

@keyframes pulse {
  50% { opacity: 0.35; }
}

/* Source sync dialog — transparent backdrop so footer hash / UI stay readable */
.sync-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: transparent;
}

.sync-backdrop[hidden] {
  display: none;
}

.sync-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  max-height: min(90vh, 640px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.sync-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.sync-header h2 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.sync-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.sync-summary {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sync-log {
  margin: 0;
  flex: 1;
  min-height: 160px;
  max-height: 360px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.sync-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.sync-closing {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 18, 0.88);
}

.sync-closing[hidden] {
  display: none;
}

.sync-closing-card {
  max-width: 420px;
  text-align: center;
}

.sync-closing-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.sync-closing-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .summary-bar {
    grid-template-columns: 1fr;
  }

  .panel-grid,
  .panel-grid-primary {
    grid-template-columns: 1fr;
  }

  .brand-sub {
    display: none;
  }

  .data-train-btn {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

}

/* Exposures / identity graph canvas */
.graph-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.graph-filter-host {
  flex: 1 1 280px;
  min-width: 260px;
  max-width: 520px;
}

.graph-filter-host .libzen-sf-input {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
  font: inherit;
}

.graph-filter-host .libzen-sf-panel {
  --libzen-sf-panel-bg: var(--surface);
  --libzen-sf-border: var(--border);
  --libzen-sf-text: var(--text);
  --libzen-sf-muted: var(--text-muted);
  min-width: min(420px, 90vw);
}

.graph-filter-host .libzen-sf-empty {
  white-space: normal;
}

.graph-view-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.graph-order-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface, var(--panel));
}

.graph-order-stepper[hidden] {
  display: none !important;
}

.graph-order-stepper .panel-meta {
  min-width: 4.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.graph-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-toggle {
  margin: 0;
  padding: 3px 8px 3px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.15s;
}

.legend-toggle:hover {
  background: var(--btn-hover-tint);
  color: var(--text);
}

.legend-toggle:focus-visible {
  outline: var(--btn-focus-ring);
  outline-offset: 2px;
}

.legend-toggle.is-on {
  color: var(--text);
  background: var(--btn-hover-tint);
}

.legend-toggle.is-on[data-kind="bank_entity"] {
  color: var(--kind-bank-entity);
  border-color: var(--kind-bank-entity);
  background: var(--kind-bank-entity-fill);
}

.legend-toggle.is-on[data-kind="customer"] {
  color: var(--kind-customer);
  border-color: var(--kind-customer);
  background: var(--kind-customer-fill);
}

.legend-toggle.is-on[data-kind="facility"] {
  color: var(--kind-facility);
  border-color: var(--kind-facility);
  background: var(--kind-facility-fill);
}

.legend-toggle.is-on[data-kind="exposure"] {
  color: var(--kind-exposure);
  border-color: var(--kind-exposure);
  background: var(--kind-exposure-fill);
}

.legend-toggle.is-on[data-kind="exposure_pool"] {
  color: var(--kind-retail-pool);
  border-color: var(--kind-retail-pool);
  background: var(--kind-retail-pool-fill);
}

.legend-toggle.is-on[data-kind="mitigant"] {
  color: var(--kind-mitigant);
  border-color: var(--kind-mitigant);
  background: var(--kind-mitigant-fill);
}

.legend-toggle.is-on[data-kind="netting_set"] {
  color: var(--kind-netting-set);
  border-color: var(--kind-netting-set);
  background: var(--kind-netting-set-fill);
}

.graph-legend.filtering .legend-toggle.is-off {
  opacity: 0.4;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid transparent;
}

.legend-swatch.bank_entity {
  background: var(--kind-bank-entity-fill);
  border-color: var(--kind-bank-entity);
}

.legend-swatch.customer {
  background: var(--kind-customer-fill);
  border-color: var(--kind-customer);
}

.legend-swatch.facility {
  background: var(--kind-facility-fill);
  border-color: var(--kind-facility);
}

.legend-swatch.exposure {
  background: var(--kind-exposure-fill);
  border-color: var(--kind-exposure);
}

.legend-swatch.mitigant {
  background: var(--kind-mitigant-fill);
  border-color: var(--kind-mitigant);
}

.legend-swatch.netting_set {
  background: var(--kind-netting-set-fill);
  border-color: var(--kind-netting-set);
}

.legend-swatch.exposure_pool {
  background: var(--kind-retail-pool-fill);
  border-color: var(--kind-retail-pool);
}

.graph-stage {
  position: relative;
  height: min(62vh, 560px);
  min-height: 360px;
  margin-bottom: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(59, 130, 246, 0.07), transparent 45%),
    radial-gradient(ellipse at 78% 82%, rgba(168, 85, 247, 0.07), transparent 50%),
    linear-gradient(180deg, #121a24 0%, var(--surface) 100%);
  touch-action: none;
  overscroll-behavior: none;
}

.graph-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
}

.graph-svg:active {
  cursor: grabbing;
}

/* Overlay copy on the identity / wave stages only. In-flow empty
   copy uses .empty-hint — a stray .graph-hint used to pin itself to
   the viewport and paint over the footer (Log + Explorer). */
.graph-stage .graph-hint,
.wave-stage .graph-hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.85;
}

.graph-edge {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
  transition: stroke 0.15s, opacity 0.15s, stroke-width 0.15s;
}

.graph-edge.dimmed {
  opacity: 0.18;
}

.graph-edge.active {
  stroke: var(--kind-exposure);
  stroke-width: 2.25;
  opacity: 1;
}

.graph-edge.pair-focus {
  stroke: var(--kind-mitigant);
  stroke-width: 2.5;
  opacity: 1;
}

.graph-edge.covered-by {
  stroke: var(--kind-mitigant);
  stroke-width: 2.2;
  opacity: 0.95;
}

.graph-edge.child-of-facility {
  stroke: var(--kind-facility);
  stroke-width: 2;
  stroke-dasharray: 5 3;
  opacity: 0.95;
}

.graph-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 24;
  pointer-events: stroke;
}

.graph-edge-hit.crm,
.graph-edge-hit.util {
  cursor: pointer;
}

.graph-edge-label.crm-hit {
  fill: var(--kind-mitigant);
  font-size: 11px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.95;
}

.graph-edge-label.util-hit {
  fill: var(--kind-facility);
  font-size: 11px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.95;
}

.graph-popover-note {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.graph-edge-label {
  fill: var(--text-muted);
  font-size: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.graph-edge.active + .graph-edge-label,
.graph-edge-label.active {
  opacity: 0.9;
}

.graph-band-rule {
  stroke: var(--border, #2a3544);
  stroke-width: 1;
  stroke-dasharray: 5 7;
  opacity: 0.45;
  pointer-events: none;
}

.graph-band-label {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.graph-node {
  cursor: pointer;
}

.graph-node circle {
  stroke-width: 2;
  transition: r 0.12s, fill 0.12s, stroke 0.12s, opacity 0.15s, filter 0.15s;
}

.graph-node text {
  fill: var(--text);
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  transition: opacity 0.15s;
}

.graph-node .node-sub {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
}

.graph-node.bank_entity circle {
  fill: var(--kind-bank-entity-fill);
  stroke: var(--kind-bank-entity);
}

.graph-node.customer circle {
  fill: var(--kind-customer-fill);
  stroke: var(--kind-customer);
}

.graph-node.facility circle {
  fill: var(--kind-facility-fill);
  stroke: var(--kind-facility);
}

.graph-node.exposure circle {
  fill: var(--kind-exposure-fill);
  stroke: var(--kind-exposure);
}

.graph-node.mitigant circle {
  fill: var(--kind-mitigant-fill);
  stroke: var(--kind-mitigant);
}

.graph-node.netting_set circle {
  fill: var(--kind-netting-set-fill);
  stroke: var(--kind-netting-set);
}

.graph-node.exposure_pool circle {
  fill: var(--kind-retail-pool-fill);
  stroke: var(--kind-retail-pool);
}

.graph-node:hover circle,
.graph-node.selected circle {
  filter: brightness(1.15);
}

.graph-node.selected circle {
  stroke-width: 3;
}

.graph-node.dimmed {
  /* Kept for kind-filter / legacy; focus now hides outsiders instead of dimming. */
  opacity: 0.22;
}

/* Lineage Graph P2 — pocket find, order lighting, detachable panels */
.graph-workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
}
.graph-workspace .graph-stage {
  flex: 1;
  min-width: 0;
}
.lineage-panel-dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, 34vw);
  max-width: 360px;
  padding: 8px 8px 8px 0;
  overflow: auto;
}
.lineage-result-panel .panel-header,
.lineage-result-panel .lineage-panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lineage-order-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(52vh, 520px);
  overflow: hidden;
}
.lineage-order-panel[hidden] {
  display: none !important;
}
.lineage-order-now {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.lineage-order-panel .wave-slow {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.lineage-order-panel .wave-log {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lineage-order-panel .wave-log-item {
  cursor: pointer;
}
.lineage-order-panel .empty-hint {
  margin: 8px 12px 12px;
}
.lineage-result-panel.detached {
  position: fixed;
  right: 16px;
  top: 96px;
  width: min(360px, 40vw);
  max-height: calc(100vh - 120px);
  overflow: auto;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  background: var(--panel, #fff);
}
.lineage-result-panel.detached + .lineage-result-panel.detached {
  top: 360px;
}
.graph-node.order-lit circle,
.graph-node.order-lit {
  stroke: var(--accent, #c2410c);
  stroke-width: 3px;
}
.graph-node.order-lit text {
  font-weight: 700;
}
@media (max-width: 900px) {
  .graph-workspace {
    flex-direction: column;
  }
  .lineage-panel-dock {
    width: 100%;
    max-width: none;
    max-height: 40vh;
    padding: 0 0 8px;
  }
}


.graph-node.kind-dep {
  opacity: 0.42;
}

.graph-node.kind-dep circle {
  filter: saturate(0.55) brightness(0.85);
}

.graph-edge.kind-dep {
  opacity: 0.32;
}

/* Lineage inspect — LibZen FloatingCard (body-fixed; drag header to move). */
.libzen-fc-card.lineage-inspect-card {
  min-width: 16rem;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(72vh, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popover-in 0.16s ease-out;
}

.libzen-fc-card.lineage-inspect-card[hidden] {
  display: none !important;
}

@keyframes popover-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.libzen-fc-card.lineage-inspect-card .libzen-fc-header {
  align-items: flex-start;
  padding: 12px 12px 8px;
}

.libzen-fc-card.lineage-inspect-card .graph-popover-titles {
  flex: 1;
  min-width: 0;
}

.libzen-fc-card.lineage-inspect-card .libzen-fc-title {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  word-break: break-word;
}

.libzen-fc-card.lineage-inspect-card .libzen-fc-body {
  padding: 12px;
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.libzen-fc-card.lineage-inspect-card .table-wrap {
  overflow: auto;
  max-width: 100%;
}

.empty-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.graph-kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  margin: 0 0 12px;
  font-size: 13px;
}

.graph-kv dt {
  margin: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.graph-kv dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.related-block {
  margin-top: 12px;
}

.related-block h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.related-chip {
  border: 1px solid var(--border);
  background: var(--btn-hover-tint);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.related-chip:hover {
  border-color: var(--accent);
  color: var(--highlight);
}

.edge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.edge-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.edge-list code {
  color: var(--highlight);
  font-size: 11px;
}

.kind-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--btn-hover-tint);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.kind-badge.bank_entity { color: var(--kind-bank-entity); border-color: rgba(13, 148, 136, 0.4); }
.kind-badge.customer { color: var(--kind-customer); border-color: rgba(59, 130, 246, 0.4); }
.kind-badge.facility { color: var(--kind-facility); border-color: rgba(168, 85, 247, 0.4); }
.kind-badge.exposure { color: var(--kind-exposure); border-color: rgba(245, 158, 11, 0.4); }
.kind-badge.mitigant { color: var(--kind-mitigant); border-color: rgba(34, 197, 94, 0.4); }
.kind-badge.netting_set { color: var(--kind-netting-set); border-color: rgba(6, 182, 212, 0.4); }
.kind-badge.exposure_pool { color: var(--kind-retail-pool); border-color: rgba(244, 63, 94, 0.4); }

.data-subtabs {
  display: flex;
  gap: 4px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel, var(--bg-elevated, transparent));
  flex-shrink: 0;
}

.data-subtabs[hidden] {
  display: none !important;
}

.data-subtab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.data-subtab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.data-subtab.active {
  color: var(--text);
  border-color: var(--border);
  border-bottom-color: var(--panel, var(--bg));
  background: var(--panel, var(--bg));
}

.view-data.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

#dataBookPanel {
  flex-shrink: 0;
}

.data-pane[hidden] {
  display: none !important;
}

.data-pane.active {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

#dataPaneEnvelope.active {
  overflow: auto;
}

/* Vault + container sync are content-sized. Without flex-shrink:0 they lose
   height to Data lifecycle in the same column and .panel { overflow:hidden }
   clips the header titles (Identity vault / Container sync). */
#dataPaneEnvelope.active > .panel {
  flex-shrink: 0;
}

#dataPaneEnvelope.active > #retentionPanel {
  flex: 1 0 auto;
  min-height: min(240px, 40vh);
}

#dataPaneRequirements.active {
  overflow: hidden;
}

.drs-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.drs-panel .panel-header {
  flex-shrink: 0;
}

/* Iframe intrinsic size is 300×150. flex:1 alone does not grow it unless the
   Data view is a full-bleed column and the used height starts at 0. */
.drs-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 0;
  min-height: 0;
  border: 0;
  background: var(--bg);
}

.view-browser {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

.view-structure {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

.view-structure .explorer-node {
  padding-left: calc(8px + var(--depth) * 22px);
}

.view-structure .explorer-node[disabled] {
  cursor: default;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.view-structure .explorer-node[disabled]:hover {
  background: transparent;
}

.structure-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  line-height: 1.6;
}

.structure-badge-min {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.35);
}

.structure-role {
  margin: 0 0 0.85rem;
  color: var(--text);
}

.structure-facts {
  display: grid;
  gap: 0.55rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0 0 1rem;
}

.structure-facts div {
  background: var(--surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}

.structure-facts dt {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.2rem;
}

.structure-facts dd {
  margin: 0;
}

.structure-h {
  font-size: 0.92rem;
  margin: 0.4rem 0 0.35rem;
}

.structure-constraints {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
  color: var(--text-muted);
}

.structure-legend {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.structure-ob {
  display: inline-block;
  min-width: 1.15rem;
  text-align: center;
  font: 700 0.72rem/1.2 inherit;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
}

.structure-ob-m { background: rgba(239, 68, 68, 0.22); color: #fecaca; }
.structure-ob-o { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
.structure-ob-c { background: rgba(245, 158, 11, 0.22); color: #fde68a; }

.structure-fk {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.view-structure .explorer-detail-body {
  padding: 10px 12px 16px;
}

.structure-fields td:nth-child(1) code {
  white-space: nowrap;
}

/* Browser catalogue tree: same twist column as Explorer so L1 labels share a
   left edge; deeper step so L2+ reads as a nested visual tree. */
.view-browser .explorer-node {
  padding-left: calc(8px + var(--depth) * 22px);
}

.view-explorer.active {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

.explorer-tree-panel {
  flex: 0 0 360px;
  max-width: 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.explorer-tree-header {
  align-items: flex-start;
  gap: 8px;
}

.explorer-tree-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.explorer-tree-heading .panel-meta {
  line-height: 1.2;
}

.explorer-depth-actions {
  gap: 4px;
}

.explorer-depth-btn {
  min-width: 2.25rem;
  min-height: 1.75rem;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.explorer-depth-btn.is-active {
  background: var(--kind-bank-entity-fill);
  color: var(--text);
  border-color: var(--border);
}

.explorer-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--border);
}

.explorer-search-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.explorer-search-input {
  flex: 1 1 10rem;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
}

.explorer-search-input:focus {
  outline: 1px solid var(--accent);
  outline-offset: 0;
}

.explorer-search-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.explorer-search-hits,
.explorer-search-cats {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.explorer-search-hits {
  justify-content: flex-start;
}

.explorer-search-cats {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) 1.85rem;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.explorer-search-btn {
  flex: 0 0 auto;
  min-width: 1.75rem;
  min-height: 1.65rem;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
}

.explorer-search-cats .explorer-search-btn {
  /* Fixed grid columns keep Prev/Next inside the Setup panel. */
  width: 1.85rem;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.explorer-search-cat-btn {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  opacity: 1;
}

.explorer-search-cat-btn:disabled {
  opacity: 0.35;
}

.explorer-search-pos,
.explorer-search-cat {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  padding: 0 4px;
  white-space: nowrap;
}

.explorer-search-cat {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer-node.is-search-hit {
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -1px;
}

.explorer-table tr.is-search-hit td,
.explorer-table tr.is-search-hit td .explorer-edit {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.explorer-detail-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.explorer-detail-panel > .panel-header {
  padding: 8px 10px;
}

.explorer-tree {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 8px 18px 12px 6px;
}

.explorer-item {
  --depth: 0;
  min-width: 0;
  max-width: 100%;
}

.explorer-children {
  display: none;
}

.explorer-item.is-open > .explorer-children {
  display: block;
}

.explorer-node {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px calc(8px + var(--depth) * 14px);
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--btn-radius);
  overflow: hidden;
}

.explorer-node:hover {
  background: var(--btn-hover-tint);
}

.explorer-node.is-active {
  background: var(--kind-bank-entity-fill);
  color: var(--text);
}

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

.explorer-item.is-open > .explorer-node .explorer-twist {
  transform: rotate(90deg);
}

.explorer-twist.is-leaf {
  visibility: hidden;
}

.explorer-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorer-tag {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-muted);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.explorer-tag.is-dirty {
  color: var(--warning);
}

.explorer-tag.explorer-count {
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Pack provenance: this pack departs from the value its parent hands down. */
.explorer-tag.is-override {
  color: var(--accent);
  border-color: var(--accent);
}

.explorer-inherited-value {
  margin-right: 6px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.explorer-detail-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
}

/* Data → Browser / Explorer: LibZen.Table host (header filters + resize). */
.browser-lz-table-host,
.explorer-lz-table-host {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.browser-lz-table-host .lz-tbl,
.explorer-lz-table-host .lz-tbl {
  flex: 1 1 auto;
  min-height: 0;
  /* fitHeight caps max-height; the table box is the one scrollport so headers stay over cells. */
  margin: 0;
}

.browser-lz-table-host .lz-tbl-td-num,
.explorer-lz-table-host .lz-tbl-td-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.explorer-lz-table-host .lz-tbl-tr.is-search-hit .lz-tbl-td,
.explorer-lz-table-host .lz-tbl-tr.is-search-hit .explorer-edit {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/*
 * Same LibZen.Table as Browser. Explorer only differs by putting inputs in
 * cells for pack editing — keep those flat so row height/chrome match read-only.
 */
.explorer-lz-table-host .lz-tbl-td:has(.explorer-edit) {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}

.explorer-lz-table-host .explorer-edit {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.12rem 0.28rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.explorer-lz-table-host .explorer-edit:hover:not(:disabled) {
  border-color: var(--border);
}

.explorer-lz-table-host .explorer-edit:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent);
}

.explorer-lz-table-host .explorer-edit:disabled {
  opacity: 0.85;
  cursor: default;
}

.explorer-source-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  width: 100%;
}

.explorer-source-links {
  display: block;
  line-height: 1.4;
  font-size: inherit;
  color: var(--text, #111);
  word-break: break-word;
}

.explorer-reg-cite {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.explorer-reg-cite:hover,
.explorer-reg-cite:focus-visible {
  color: var(--text, #111);
  outline: none;
}

.explorer-source-edit {
  width: 100%;
}

.explorer-lz-table-host .lz-tbl-td:has(.explorer-source-cell) {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.explorer-reg-card .explorer-reg-kind {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

.explorer-reg-card .explorer-reg-text {
  margin: 0 0 0.75rem;
  max-width: 36rem;
  max-height: 18rem;
  overflow: auto;
  line-height: 1.45;
  white-space: normal;
}

.explorer-reg-card .explorer-reg-hint {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
  line-height: 1.35;
}

.explorer-reg-card .explorer-reg-official {
  margin: 0 0 0.5rem;
}

.explorer-reg-card .explorer-reg-official a {
  color: var(--accent, #2563eb);
}

.explorer-reg-card .explorer-reg-attr {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
  line-height: 1.35;
}

.explorer-lz-table-host input[type="checkbox"] {
  accent-color: var(--accent);
}

.explorer-detail-actions {
  display: flex;
  gap: 8px;
  padding: 6px 8px 8px;
}

.explorer-note {
  color: var(--text-muted);
  font-size: 12px;
  margin: 6px 0 8px;
}

.explorer-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--text);
}

.explorer-haircut-ineligible {
  color: var(--text-muted);
  font-style: italic;
}

.explorer-detail-body:has(.explorer-section-title) .explorer-lz-table-host {
  flex: 0 1 auto;
  min-height: 160px;
  max-height: 46vh;
}

.explorer-json {
  font-size: 12px;
  white-space: pre-wrap;
}

/* Legacy explorer HTML tables only — LibZen hosts use the flatter rules above. */
.explorer-table .explorer-edit {
  width: 100%;
  min-width: 4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 5px;
  font: inherit;
}

.explorer-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ead_formula (Doc 22 §7.1): the maths the engine returned for a row. */
.explorer-formula-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.5;
}

.explorer-formula-line em {
  color: var(--muted, #8b98a5);
  font-style: normal;
  font-size: 0.85em;
  min-width: 1.6em;
}

.explorer-formula-math {
  font-variant-numeric: tabular-nums;
}

.explorer-formula-bad {
  color: var(--danger);
}

.explorer-formula-blocks {
  margin-top: 10px;
}

.explorer-formula-term {
  border: 1px solid var(--line, #2a3038);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* A building block Alpha does not ingest yet: authoring it is refused at
   pack load, so the chip says so before the operator types it. */
.explorer-formula-term.is-missing {
  color: var(--muted, #8b98a5);
  border-style: dashed;
}

.explorer-table th,
.explorer-table td {
  padding: 4px 8px;
}

.explorer-table input[type="checkbox"] {
  accent-color: var(--accent);
}

@media (max-width: 900px) {
  .wave-body {
    flex-direction: column;
  }

  .wave-splitbar,
  .landscape-splitbar {
    display: none;
  }

  .wave-log-panel {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    max-height: 38%;
  }

  .view-explorer.active {
    flex-direction: column;
  }

  .explorer-tree-panel {
    flex: 0 0 38%;
    max-width: none;
  }

  .graph-legend {
    width: 100%;
    margin-left: 0;
  }

  .graph-stage {
    min-height: 300px;
    height: 52vh;
  }
}

/* Log */

/* perf Mon (server /proc graph) */
.view-perfmon.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

/* Users tab (Doc 64) */
.view-users.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 10px;
}

.users-banner {
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--danger, #b42318);
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger, #b42318) 12%, transparent);
}

.users-banner[hidden] {
  display: none;
}

.users-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
}

.users-grid.hide {
  display: none;
}

.users-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.users-panel .panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.users-org-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.users-org {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.users-org:hover {
  background: var(--surface-hover);
}

.users-org.active {
  background: color-mix(in srgb, var(--accent, #3b82f6) 16%, transparent);
  border-color: var(--accent, #3b82f6);
}

.users-org .name {
  font-weight: 600;
}

.users-org .meta {
  font-size: 11px;
  color: var(--text-muted);
}

.users-org-create,
.users-invite {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

.users-invite {
  margin-bottom: 10px;
  padding: 0 0 10px;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

.users-org-create[hidden],
.users-invite[hidden] {
  display: none;
}

.users-org-create input,
.users-invite input,
.users-invite select,
#usersRenameInput {
  height: 26px;
  min-width: 0;
  flex: 1;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
}

.users-invite select {
  flex: 0 0 auto;
}

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

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

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

.users-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
}

.users-table .btn {
  margin-right: 4px;
  margin-bottom: 2px;
}

tr.users-member {
  cursor: pointer;
}

tr.users-member:hover td {
  background: var(--surface-hover);
}

tr.users-member.selected td {
  background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent);
}

.users-you {
  font-size: 10px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.users-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.users-roles label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.users-status-active {
  color: var(--success, #22c55e);
}

.users-status-invited {
  color: var(--warning, #f59e0b);
}

.users-status-blocked {
  color: var(--text-muted);
}

.users-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.4;
}

.users-tree {
  font-size: 12px;
}

.users-tree .node {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
}

.users-tree .kids {
  margin-left: 18px;
  border-left: 1px solid var(--border);
  padding-left: 10px;
}

.users-tree .tag {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}

.users-accounts[hidden] {
  display: none;
}

.users-accounts:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
}

@media (max-width: 960px) {
  .users-grid {
    grid-template-columns: 1fr;
    overflow: auto;
  }
}

.perfmon-summary {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: 0;
  flex-shrink: 0;
}

.view-perfmon .perfmon-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.perfmon-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.perfmon-panel-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

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

.perfmon-scope-toggle,
.perfmon-x-toggle {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.perfmon-app-host {
  min-width: 220px;
  max-width: 360px;
}

.perfmon-graph-host {
  flex: 1 1 auto;
  min-height: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin: 0 12px;
}

.perfmon-graph {
  display: block;
  width: 100%;
  height: 100%;
}

.pm-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.pm-axis {
  stroke: #8b97a8;
  stroke-width: 1.2;
}

.pm-tick,
.pm-axis-title,
.pm-empty,
.pm-legend {
  fill: var(--text-muted);
  font-size: 11px;
  font-family: var(--font);
}

.pm-tick-cpu,
.pm-axis-title.pm-tick-cpu {
  fill: #c27ba0;
}

.pm-cpu-tick {
  stroke: #c27ba0;
  stroke-width: 1;
}

.pm-series-rss {
  stroke: #5b9bd5;
  stroke-width: 2;
}

.pm-series-max {
  stroke: #70ad47;
  stroke-width: 2;
}

.pm-series-swap {
  stroke: #ed7d31;
  stroke-width: 2;
}

.pm-series-cpu {
  stroke: #c27ba0;
  stroke-width: 2;
}

.pm-series-alpha {
  stroke: #1a9b8e;
  stroke-width: 2;
}

.pm-series-disk {
  stroke: #c9a227;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.pm-empty {
  fill: var(--text-muted);
  font-size: 13px;
}

/* Clickable legend: only series still on the graph. Colour rides an inline
   style so the swatch and label match the line. */
.pm-legend-item {
  cursor: pointer;
}

.pm-legend-hit {
  fill: transparent;
}

.pm-legend-swatch {
  stroke-width: 2.5;
}

.pm-legend-item:hover .pm-legend {
  text-decoration: underline;
}

/* Log overlay: a tick per main Log row, a band over a timed operation. */
.pm-event-line {
  stroke-width: 1.2;
  stroke-opacity: 0.45;
  stroke-dasharray: 3 3;
}

.pm-event-band {
  fill-opacity: 0.07;
}

.pm-event-label-bg {
  fill: var(--panel, var(--bg));
  fill-opacity: 0.82;
}

.pm-event-label {
  font-size: 10px;
  font-family: var(--font);
  fill-opacity: 0.9;
}

/* Summary cards double as the indicator switches. */
.perfmon-summary .stat[data-pm-series] {
  cursor: pointer;
  user-select: none;
}

.perfmon-summary .stat[data-pm-series]:focus-visible {
  outline: 2px solid var(--accent, #5b9bd5);
  outline-offset: 2px;
}

.perfmon-summary .stat.is-off {
  opacity: 0.4;
}

.perfmon-graph-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin: 8px 16px 12px;
}

.perfmon-status {
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.perfmon-graph-footer .perfmon-status {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 1280px) {
  .perfmon-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .perfmon-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.view-log.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

.view-log .panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.view-log #opsLogPanel {
  flex: 1 1 auto;
}

.view-log .retained-ops-panel {
  flex: 0 1 28%;
  max-height: 32%;
}

.view-log .audit-ops-panel {
  flex: 0 1 34%;
  max-height: 38%;
}

.audit-ops-panel .panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.audit-ops-panel .panel-header h2 {
  margin: 0;
}

.audit-filters {
  padding: 0 12px 8px;
}

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

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

.audit-table th {
  color: var(--text-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--panel, var(--bg));
}

.audit-table .outcome-ok {
  color: var(--ok, #1a7f4b);
}

.audit-table .outcome-rejected,
.audit-table .outcome-error {
  color: var(--danger, #b42318);
}


.view-log .panel-header {
  flex-shrink: 0;
}

.log-panel-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

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

.log-panel-title h2 {
  margin: 0;
}

#logPersistMeta {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.log-panel-actions {
  flex-shrink: 0;
}


.ops-run-chapter .ops-run-header strong {
  color: var(--text);
  font-weight: 650;
}

.ops-run-chapter + .ops-run-chapter {
  margin-top: 8px;
}

.log-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.log-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.log-level-chip:has(input:checked) {
  color: var(--text);
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.1);
}

.log-level-chip input {
  accent-color: var(--accent);
}

.log-type-filter select,
.log-search-filter input {
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.log-type-filter select {
  min-width: 9.5rem;
}

#logLayout {
  min-width: 11.5rem;
}

.log-search-filter input {
  min-width: 12rem;
  width: min(240px, 100%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.retained-ops-panel .panel-body {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.ops-log {
  padding: 8px 14px 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.ops-events {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
  font-size: 12px;
  table-layout: fixed;
}

.ops-events col.ops-col-at {
  width: 12.5em;
}

.ops-events col.ops-col-level {
  width: 6.5em;
}

.ops-events col.ops-col-category {
  width: 9.5em;
}

.ops-events col.ops-col-type {
  width: 9em;
}

.ops-events col.ops-col-duration {
  width: 7.5rem;
}

.ops-events th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 8px 6px 0;
}

.ops-events td {
  padding: 3px 10px 3px 0;
  vertical-align: top;
  line-height: 1.4;
}

.ops-events td:nth-child(1),
.ops-event-at {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.ops-event-type,
.ops-event-category {
  white-space: nowrap;
  color: var(--text-muted);
}

.ops-events th.ops-event-duration,
.ops-events td.ops-event-duration {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}


.ops-level {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ops-level-info .ops-level {
  color: var(--highlight);
}

.ops-level-warning .ops-level {
  color: var(--warning);
}

.ops-level-error .ops-level {
  color: var(--danger);
}

.ops-run {
  border-bottom: 1px solid var(--border);
  padding: 8px 0 10px;
}

.ops-run:last-child {
  border-bottom: 0;
}

.ops-run-header {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ops-run-header::-webkit-details-marker,
.ops-run-header::marker {
  display: none;
  content: none;
}

.ops-run:not([open]) > .ops-run-header {
  margin-bottom: 0;
}

.ops-run-head {
  margin: 0;
}

.ops-run > table.ops-events:not(.ops-run-head) {
  /* Match the twist + gap so Time / Level / Message line up with the header. */
  margin-left: 18px;
  width: calc(100% - 18px);
}

.ops-run-head td {
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: middle;
}

.ops-run-twist {
  width: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  display: inline-block;
  transform-origin: 50% 55%;
  transition: transform 0.12s ease;
}

.ops-run[open] > .ops-run-header > .ops-run-twist {
  transform: rotate(90deg);
}

.ops-run-label {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-run-label strong {
  font-weight: 650;
}

.ops-run-counts {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-run-total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--highlight);
}

.ops-log .empty-hint {
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Retained operations */
.operation-kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}
.operation-kv dt {
  margin: 0;
  color: var(--text-muted);
}
.operation-kv dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Operations tree */
.operation-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.operation-tree-node {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 0;
}
.operation-tree-node > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.operation-tree-node > summary::-webkit-details-marker { display: none; }
.operation-tree-kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  min-width: 110px;
}
.operation-tree-label {
  font-weight: 600;
  flex: 1;
}
.operation-tree-body {
  padding: 0 14px 12px;
  border-top: 1px solid var(--border);
}
.operation-tree-children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.operation-tree-node.kind-calculation_set,
.operation-tree-node.kind-operation {
  background: var(--surface);
}

/* Login splash — the only overlay that dims the live dashboard (guest / logout) */
.auth-splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.45);
}

.auth-splash[hidden] {
  display: none;
}

body.auth-locked .app-shell {
  pointer-events: none;
  user-select: none;
}

.auth-splash-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.auth-splash .libzen-ls-page {
  min-height: 0;
  padding: 0;
  background: transparent;
  align-items: stretch;
}

.auth-splash .libzen-ls-form {
  max-width: none;
}

.auth-forgot-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-cancel-btn {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.45rem 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

.auth-cancel-btn:hover {
  color: var(--accent);
}

/* Postgres miss — always on screen, including after guest continue. */
.postgres-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  margin: 0;
  padding: 10px 16px;
  background: var(--danger);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.postgres-banner:not([hidden]) {
  display: block;
}
.postgres-banner #postgresBannerDetail {
  font-weight: 500;
  margin-left: 0.35em;
}
body.postgres-down {
  padding-top: 44px;
}
#authStoreHint:not([hidden]) {
  background: var(--danger);
  color: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 650;
}

.session-chip {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  white-space: nowrap;
}

.session-chip[data-mode="bank"] {
  color: var(--text);
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12);
}

.session-chip[data-role="super_admin"] {
  border-color: rgba(196, 165, 90, 0.55);
  background: rgba(196, 165, 90, 0.12);
  color: var(--text);
}

.password-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 1rem;
}

.password-backdrop[hidden] {
  display: none;
}

.password-dialog {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
}

.password-dialog h1 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.password-hint {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.password-dialog label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.password-dialog input {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.85rem;
  border-radius: var(--btn-radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* —— Generate portfolio (Doc 27 P0) —— */
.generate-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1100px;
}
.generate-header-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
}
.generate-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.gen-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gen-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.gen-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.gen-text,
.gen-knob input[type="number"] {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.gen-knob {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: center;
}
.gen-knob-row {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.gen-knob input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.generate-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gen-estimate strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
.gen-warnings {
  margin: 6px 0 0;
  color: var(--warning, #c47f1a);
  font-size: 12px;
}
.gen-actions {
  display: flex;
  gap: 8px;
}
.gen-progress {
  margin-top: 12px;
}
.gen-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.gen-progress-bar > i,
.gen-progress-bar #genProgressFill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s ease;
}
.gen-progress-msg {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.gen-progress-log {
  max-height: 140px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 8px;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  white-space: pre-wrap;
}
.gen-load-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 80;
}
.gen-load-dialog[hidden] {
  display: none !important;
}
.gen-load-card {
  width: min(420px, 92vw);
}
.gen-guest .gen-actions .btn-primary {
  opacity: 0.55;
}

.gen-field { display: flex; flex-direction: column; gap: 4px; }
.gen-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.gen-hint { font-size: 11px; color: var(--text-muted); }
.gen-text {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.generate-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.gen-knobs { display: flex; flex-direction: column; gap: 2px; }
.gen-expand[hidden] { display: none !important; }
.generate-footer-row,
.generate-footer .panel-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gen-estimate strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
.gen-warnings {
  margin: 6px 0 0;
  color: #c47f1a;
  font-size: 12px;
}
.gen-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.gen-progress-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent, #3b82f6);
  transition: width 0.2s ease;
}
.gen-progress-msg {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.gen-progress-log {
  max-height: 140px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 8px;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  white-space: pre-wrap;
}


/* Generate P1 — collateral preview + format */
.gen-collateral-preview {
  display: flex;
  height: 10px;
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
}
.gen-collateral-preview .gen-bar {
  flex: 1;
  min-width: 0;
}
.gen-collateral-preview .gen-bar.cash { background: #5b8c5a; }
.gen-collateral-preview .gen-bar.sov { background: #4a6fa5; }
.gen-collateral-preview .gen-bar.eq { background: #c4a35a; }
.gen-collateral-preview .gen-bar.guar { background: #8b6b4f; }
.gen-output { display: flex; flex-direction: column; gap: 8px; }
.gen-format {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}
.gen-format legend { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-right: 8px; }
.gen-radio { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }


/* Generate P2 — presets + Aurelia compare + queue */
.gen-preset-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.gen-preset-row .settings-select,
.gen-preset-row select {
  flex: 1;
  min-width: 0;
}
.gen-aurelia {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.gen-aurelia-title {
  margin: 0 0 2px;
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}
.gen-aurelia-line {
  margin: 0;
  line-height: 1.35;
}

/* Reports — Pivot RWA */
.view-reports.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.view-reports .panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.view-reports .panel-header {
  flex-shrink: 0;
}

.reports-panel-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.reports-panel-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.reports-panel-title h2 {
  margin: 0;
}

.reports-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reports-filter select,
.reports-search-filter input {
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.reports-search-filter input {
  min-width: 180px;
}

.reports-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.reports-row.is-expandable {
  cursor: pointer;
}

.reports-row.is-expandable:hover td {
  background: var(--btn-hover-tint, rgba(255, 255, 255, 0.04));
}

.reports-row--legal_entity td {
  font-weight: 600;
}

.reports-row--tranche td {
  color: var(--text-muted);
  font-weight: 400;
}

.reports-name-inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.reports-chevron {
  flex: 0 0 16px;
  width: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.reports-chevron:disabled {
  cursor: default;
  opacity: 0.35;
}

.reports-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 4ch;
}

.reports-row--tranche .reports-label {
  flex: 0 1 auto;
  overflow: visible;
}

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

.reports-row td.muted {
  color: var(--text-muted);
  font-weight: 400;
}

.reports-row--legal_entity .kind-badge {
  color: var(--kind-bank-entity);
  border-color: rgba(13, 148, 136, 0.4);
}

.reports-row--customer .kind-badge {
  color: var(--kind-customer);
  border-color: rgba(59, 130, 246, 0.4);
}

.reports-row--exposure .kind-badge {
  color: var(--kind-exposure);
  border-color: rgba(245, 158, 11, 0.4);
}

.reports-row--tranche .kind-badge {
  color: var(--kind-mitigant);
  border-color: rgba(34, 197, 94, 0.4);
}


.reports-cog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0 6px;
  color: var(--text-muted);
}

.reports-cog-btn:hover,
.reports-cog-btn.is-active {
  color: var(--text);
}

.reports-cog-icon {
  font-size: 14px;
  line-height: 1;
}

.reports-banner {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  font-size: 13px;
  flex-shrink: 0;
}

.reports-banner.is-error {
  border-color: color-mix(in srgb, var(--danger, #c44) 45%, var(--border));
  background: color-mix(in srgb, var(--danger, #c44) 10%, transparent);
}

.reports-axis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 4px 2px 8px;
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.reports-axis-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reports-axis-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.reports-axis-glyph:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.reports-axis-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.reports-axis-leaf {
  opacity: 0.85;
}

.reports-mode-bar {
  display: flex;
  gap: 4px;
  padding: 0 0 8px;
  flex-shrink: 0;
}

.reports-mode-btn {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.reports-mode-btn.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #3a6ea5) 55%, var(--border));
  background: color-mix(in srgb, var(--accent, #3a6ea5) 12%, transparent);
}

.reports-dashboard-panel,
.reports-rwa-panel {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.reports-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 4px 0 12px;
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.reports-dash-empty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 13px;
  margin: 12px 4px;
}

.reports-dash-tile {
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--panel, #fff) 92%, var(--border));
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
}

.reports-dash-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.reports-dash-tile-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.reports-dash-tile table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.reports-dash-tile th,
.reports-dash-tile td {
  padding: 2px 4px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.reports-dash-tile td.num,
.reports-dash-tile th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.reports-dash-tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.reports-dash-expand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
}

.reports-dash-expand[hidden],
.reports-dashboard-panel[hidden],
.reports-rwa-panel[hidden] {
  display: none !important;
}

.reports-dash-expand-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.reports-dash-expand-head h3 {
  margin: 0;
  font-size: 15px;
}

.reports-dash-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
}

.reports-dash-crumb {
  border: none;
  background: transparent;
  color: var(--accent, #3a6ea5);
  cursor: pointer;
  padding: 0 2px;
  font: inherit;
}

.reports-dash-crumb:disabled {
  color: var(--text);
  cursor: default;
  font-weight: 600;
}

.reports-dash-crumb-sep {
  color: var(--text-muted);
  user-select: none;
}

.reports-axis-sep {
  opacity: 0.55;
  user-select: none;
}

.reports-cols-shelf {
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 6px;
  background: transparent;
  flex-shrink: 0;
}

.reports-cols-shelf[hidden] {
  display: none !important;
}

.reports-cols-shelf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.reports-cols-shelf-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.reports-cols-shelf-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 11px;
}

.reports-cols-shelf-body,
#reportsColsList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

#reportsColsList .field-zone {
  flex: 1 1 260px;
  min-width: 0;
}

/* —— Data Quality (Doc 33) —— */
.dq-health {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #3a4a5c);
}
.dq-health-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.dq-health-status {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dq-health-status[data-status="ok"] { color: #7dcea0; }
.dq-health-status[data-status="ok_with_warnings"] { color: #f0c674; }
.dq-health-status[data-status="blocked_subjects"],
.dq-health-status[data-status="failed"] { color: #e07474; }
.dq-health-counts {
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.view-dq.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.dq-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.dq-stat {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.dq-stat .stat-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dq-stat .stat-value {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dq-code-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.dq-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.dq-chip:hover { border-color: var(--accent); color: var(--accent); }
.dq-chip.sev-error { border-color: color-mix(in srgb, #e07474 55%, var(--border)); }
.dq-chip.sev-warn { border-color: color-mix(in srgb, #f0c674 55%, var(--border)); }
.dq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.dq-filters select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
#dqFindingsTable .sev-error { color: #e07474; }
#dqFindingsTable .sev-warn { color: #f0c674; }
#dqFindingsTable .sev-info { color: var(--text-muted); }
#dqFindingsTable tr.dq-blocking td:first-child code {
  font-weight: 600;
}
.dq-subject-type {
  color: var(--text-muted);
  font-size: 11px;
  margin-right: 4px;
}
#dqFindingsTable tr.dq-omitted td {
  color: var(--text-muted);
  font-style: italic;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Doc 35 — Pivot viewport OLAP */
.view-pivot.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.pivot-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.pivot-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pivot-chip[data-plane='hot'] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}
.pivot-chip[data-plane='warm'] {
  color: var(--warning, #d8a657);
  border-color: color-mix(in srgb, var(--warning, #d8a657) 45%, var(--border));
}
.pivot-run-select,
#pivotFact {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  max-width: 260px;
}
.pivot-fields-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  overflow: hidden;
}
.pivot-fields-panel.is-collapsed {
  gap: 0;
}
.pivot-fields-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pivot-fields-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.pivot-fields-toggle:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.pivot-twist {
  display: inline-block;
  width: 1em;
  color: var(--text-muted);
}
.pivot-fields-title {
  flex-shrink: 0;
}
.pivot-fields-summary {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pivot-fact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.pivot-shelf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px 8px;
}
.pivot-fields-panel.is-collapsed .pivot-shelf {
  display: none;
}
/* —— Field shelf: one chip and one well for Pivot, Overview, Reports —— */
.field-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-zone-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.field-well {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 80%, var(--bg));
}
.field-well.is-over {
  border-color: var(--accent, #6ea8fe);
  border-style: solid;
  background: color-mix(in srgb, var(--accent, #6ea8fe) 8%, var(--surface));
}
/* A pool (unused fields) is a source, not a slot: solid edge, no dashes. */
.field-zone-pool .field-well {
  border-style: solid;
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
.field-zone-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.field-drop-slot {
  width: 6px;
  height: 22px;
  border-radius: 2px;
  pointer-events: none;
}
.field-drop-slot.is-active {
  background: var(--accent, #6ea8fe);
}
.field-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  padding: 2px 4px 2px 3px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: grab;
  user-select: none;
}
.field-chip:active {
  cursor: grabbing;
}
/* Picking list: click to place. No grip, so the cursor must not promise a drag. */
.field-chip.is-pool {
  background: color-mix(in srgb, var(--accent, #6ea8fe) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent, #6ea8fe) 25%, var(--border));
  cursor: pointer;
  padding-left: 6px;
}
.field-chip.is-pool:active {
  cursor: pointer;
}
/* A measure reads green wherever it is picked. */
.field-chip.is-measure {
  background: color-mix(in srgb, var(--success, #22c55e) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--success, #22c55e) 28%, var(--border));
}
.field-chip.is-active,
.field-chip.is-measure.is-active {
  border-color: color-mix(in srgb, var(--accent, #6ea8fe) 45%, var(--border));
  background: color-mix(in srgb, var(--accent, #6ea8fe) 12%, var(--surface));
  color: var(--accent, #6ea8fe);
}
.field-chip.is-locked {
  cursor: default;
  opacity: 0.75;
  padding-left: 6px;
}
.field-chip.is-dragging {
  opacity: 0.5;
}
.field-chip-grip {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}
/* Row level glyph: collapse or expand every row of this field (Pivot rows). */
.field-chip-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.field-chip-level:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.field-chip-label {
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-chip .col-filter-btn {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.field-chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.field-chip-remove:hover {
  color: var(--danger);
}
.pivot-dim-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px 8px;
}
.pivot-dim-strip {
  min-height: 28px;
  padding: 2px 6px;
  border-style: none;
  background: none;
}
.pivot-ctx-menu {
  position: fixed;
  z-index: 2500;
  min-width: 160px;
  padding: 6px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.pivot-ctx-menu-label {
  padding: 4px 12px 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.pivot-ctx-menu-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.pivot-ctx-menu-item:hover {
  background: color-mix(in srgb, var(--accent, #6ea8fe) 12%, transparent);
}
.pivot-row-head.is-active {
  background: color-mix(in srgb, var(--accent, #6ea8fe) 12%, transparent);
}
.pivot-col-group {
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.pivot-col-head-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
}
.pivot-measure-head .pivot-col-head-label {
  margin-left: auto;
}
.pivot-col-head-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pivot-col-grip {
  flex-shrink: 0;
  cursor: grab;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  user-select: none;
}
.pivot-col-grip:active {
  cursor: grabbing;
}
.pivot-col-drop-before {
  box-shadow: inset 3px 0 0 var(--accent, #6ea8fe);
}
.pivot-col-drop-after {
  box-shadow: inset -3px 0 0 var(--accent, #6ea8fe);
}
#pivotTable th[data-col] {
  position: relative;
}
.pivot-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 8px;
}
.pivot-crumb {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 10px;
}
.pivot-crumb:hover {
  color: var(--text);
}
.pivot-status {
  padding: 0 16px 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.pivot-status[data-kind='error'] {
  color: var(--danger);
}
.pivot-table-wrap {
  flex: 1;
  min-height: 220px;
  overflow: auto;
  padding: 0 16px;
}
#pivotTable th[scope='row'] {
  text-align: left;
  white-space: nowrap;
}
.pivot-measure-head,
.pivot-total-head {
  cursor: pointer;
  white-space: nowrap;
}
.pivot-total,
.pivot-total-head {
  border-left: 1px solid var(--border);
}
#pivotTable tfoot th,
#pivotTable tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--surface);
  font-weight: 600;
  box-shadow: 0 -1px 0 var(--border);
}
.pivot-row-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pivot-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pivot-expand {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.pivot-expand:hover:not(:disabled) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #6ea8fe) 35%, var(--border));
}
.pivot-expand:disabled {
  opacity: 0.6;
  cursor: default;
}
.pivot-expand-spacer {
  visibility: hidden;
  pointer-events: none;
}
.pivot-cell-parent {
  background: transparent;
}
.pivot-spacer td {
  border: none;
}
.pivot-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.pivot-foot > span {
  flex: 1;
  min-width: 0;
}

/* Data lifecycle / retention panel (Doc 32) */
.retention-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.retention-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.retention-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.retention-status {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 44ch;
}

.retention-status[data-kind='ok'] {
  color: var(--ok, #2e7d32);
}

.retention-status[data-kind='error'] {
  color: var(--danger, #c62828);
}

.retention-subhead {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.retention-subhead:first-of-type {
  margin-top: 8px;
}

.retention-row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

/* Overview Calculation results (Doc 53) — landscape is a separate region */
.overview-results-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  min-width: 0;
}
.overview-results-heading h2 {
  margin: 0;
}
.overview-results-phase {
  font-size: 12px;
  color: var(--accent, #2a6f6a);
  font-weight: 600;
}
.overview-results-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.overview-results-config-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.overview-results-wells {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.overview-results-wells .field-zone {
  flex: 1 1 200px;
  min-width: 0;
}
.overview-results-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
.overview-results-chip.is-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.overview-results-chip:disabled {
  opacity: 0.55;
  cursor: default;
}
.overview-results-body {
  max-height: 360px;
  overflow: auto;
}
.overview-results-table {
  width: 100%;
}
.overview-results-hint {
  margin: 8px 14px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* —— Tests tab: validation library over the loaded book (Doc 67) —— */
.view-tests.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.view-tests .tests-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.view-tests .tests-library-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tests-lib {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Header — book, packs, coverage, verdict */
.tests-lib-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.tests-head-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.tests-head-book {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 12rem;
}
.tests-head-title {
  font-size: 15px;
  font-weight: 600;
}
.tests-head-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.tests-head-facts,
.tests-head-cover {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.tests-head-cover {
  margin-top: 8px;
}
.tests-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.tests-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 11px;
  white-space: nowrap;
}
.tests-chip-k {
  color: var(--text-muted);
}
.tests-chip-v {
  font-variant-numeric: tabular-nums;
}
.tests-verify-out {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.tests-verdict {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.tests-verdict.is-pass {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.tests-verdict.is-drift {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}
.tests-head-note,
.tests-soft {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 70rem;
}

/* Mode switch — library / report */
.tests-modes {
  display: flex;
  gap: 4px;
  padding: 6px 14px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.tests-mode {
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--btn-radius) var(--btn-radius) 0 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.tests-mode:hover {
  background: var(--btn-hover-tint);
  color: var(--text);
}
.tests-mode.is-on {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
  margin-bottom: -1px;
  padding-bottom: 6px;
}

/* Three columns: facet rail, case list, case panel */
.tests-lib-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 236px 336px minmax(0, 1fr);
}
.tests-lib-body[hidden] {
  display: none;
}
.tests-rail {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 18px;
  border-right: 1px solid var(--border);
}
.tests-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.tests-rail-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* The stack: the tags on, in the order they went on, each with the count it
   left behind. Clicking one takes it off again. */
.tests-stack {
  list-style: none;
  margin: 0 0 14px;
  padding: 0 0 0 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px solid var(--accent);
}
.tests-rail-hint {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.tests-stack-tag {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  padding: 3px 7px;
  border: 1px solid var(--accent);
  border-radius: var(--btn-radius);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.tests-stack-tag:hover {
  background: color-mix(in srgb, var(--accent) 32%, var(--surface));
}
.tests-stack-tag .tests-tag-l {
  flex: 1;
}
.tests-stack-tag .tests-tag-n {
  color: var(--text);
}
.tests-stack-x {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
}
.tests-stack-tag:hover .tests-stack-x {
  color: var(--text);
}

.tests-facet {
  margin-bottom: 14px;
}
.tests-facet-h {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.tests-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tests-tag {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.tests-tag:hover {
  background: var(--surface-hover);
}
/* Implied: every case left already carries it, so clicking takes none away.
   Dim, not dropped — that it holds over the whole set is worth reading. */
.tests-tag.is-implied .tests-tag-l,
.tests-tag.is-implied .tests-tag-n {
  opacity: 0.45;
}
.tests-tag.is-implied:hover .tests-tag-l,
.tests-tag.is-implied:hover .tests-tag-n {
  opacity: 0.75;
}
.tests-tag-l {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tests-tag-n {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* Case list */
.tests-list-col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
.tests-list-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.tests-text-filter {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--bg);
  color: var(--text);
}
.tests-text-filter:focus {
  outline: var(--btn-focus-ring);
  outline-offset: -1px;
}
.tests-list-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tests-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.tests-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: inherit;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.tests-row:hover {
  background: var(--surface-hover);
}
.tests-row.is-open {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.tests-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tests-row-id {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tests-row-title {
  font-size: 13px;
  line-height: 1.3;
}
.tests-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tests-row-tag {
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}
.tests-status {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.tests-status.is-verified {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}
.tests-status.is-drifted {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}
.tests-status.is-not_run {
  color: var(--text-muted);
}

/* Case panel */
.tests-case {
  min-height: 0;
  overflow: auto;
  padding: 12px 18px 28px;
}
.tests-case-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.tests-case-title {
  margin: 0 0 6px;
  font-size: 15px;
}
.tests-case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tests-case-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tests-sec {
  margin: 14px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--border);
}
.tests-sec-h {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tests-sub-h {
  margin: 10px 0 5px;
  font-size: 12px;
  font-weight: 600;
}
.tests-lead-p {
  margin: 0 0 6px;
  max-width: 60rem;
  line-height: 1.45;
}
.tests-regs,
.tests-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 0;
}
.tests-reg {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--highlight);
  font-variant-numeric: tabular-nums;
}
.tests-pass-line {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--success);
}
.tests-drift-line {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--warning);
}

/* Tables shared by the case panel and the engine pocket */
.tests-table-wrap {
  overflow: auto;
  max-height: min(55vh, 34rem);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--surface);
}
.tests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tests-table th,
.tests-table td {
  text-align: left;
  padding: 5px 9px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}
.tests-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-hover);
  font-weight: 600;
}
.tests-table td.is-right,
.tests-table th.is-right,
.tests-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tests-table th.is-mark,
.tests-table td.is-mark {
  text-align: center;
  width: 3.5rem;
}
.tests-table code {
  font: 0.92em/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tests-cells tr.is-drift td {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.tests-mark.is-match {
  color: var(--success);
}
.tests-mark.is-drift {
  color: var(--warning);
  font-weight: 600;
}

/* Worked sheet (Markdown) */
.tests-md {
  max-width: 62rem;
  line-height: 1.5;
  font-size: 13px;
}
.tests-md > p {
  margin: 0 0 8px;
}
.tests-md .tests-md-h {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tests-md h3.tests-md-h {
  font-size: 15px;
}
.tests-md h4.tests-md-h {
  font-size: 14px;
}
.tests-md .tests-md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}
.tests-md ul {
  margin: 0 0 8px;
  padding-left: 18px;
}
.tests-md code {
  font: 0.92em/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--surface-hover);
}
.tests-md-table-wrap {
  overflow: auto;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--surface);
}
.tests-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tests-md-table th,
.tests-md-table td {
  padding: 4px 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.tests-md-table th {
  background: var(--surface-hover);
  font-weight: 600;
}
.tests-md-table td.is-right,
.tests-md-table th.is-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tests-md-table td.is-center,
.tests-md-table th.is-center {
  text-align: center;
}

/* Report (Doc 67 §7) */
.tests-rep-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 32px;
}
.tests-rep-view[hidden] {
  display: none;
}
.tests-rep {
  max-width: 68rem;
}
.tests-rep-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.tests-rep-sec {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tests-rep-sec:first-of-type {
  border-top: none;
}
.tests-rep-h {
  margin: 0 0 6px;
  font-size: 15px;
}
.tests-rep-lead {
  margin: 0 0 10px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tests-rep-facts .tests-rep-k {
  color: var(--text-muted);
}
.tests-rep-facts .tests-rep-v {
  font-variant-numeric: tabular-nums;
}
.tests-rep-facts .tests-rep-s {
  color: var(--text-muted);
  font-size: 11px;
}
.tests-rep-step {
  margin: 10px 0 0;
}
.tests-rep-step-h {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
}
.tests-rep-step p {
  margin: 0;
  line-height: 1.5;
  max-width: 62rem;
}
.tests-rep-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
}
.tests-rep-ev-k {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 3px;
}
.tests-ev {
  font: inherit;
  font-size: 11px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--highlight);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.tests-ev:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

/* A book with no cases */
.tests-note {
  padding: 18px 20px;
  max-width: 54rem;
}
.tests-note-h {
  margin: 0 0 8px;
  font-size: 15px;
}
.tests-note p {
  margin: 0 0 8px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tests-note code {
  font: 0.92em/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text);
}

/* Buttons and the pocket graph (ui/tests-engine.js) */
.tests-btn {
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--surface-hover);
  color: var(--text);
  cursor: pointer;
}
.tests-btn:hover {
  background: var(--btn-hover-tint);
}
.tests-btn:focus-visible {
  outline: var(--btn-focus-ring);
}
.tests-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.tests-btn-sm {
  font-size: 11px;
  padding: 3px 8px;
}
.tests-muted {
  color: var(--text-muted);
  font-size: 12px;
}
.tests-engine-lead {
  margin: 0 0 8px;
  max-width: 60rem;
  color: var(--text-muted);
  font-size: 12px;
}
.tests-h4 {
  margin: 12px 0 5px;
  font-size: 12px;
  font-weight: 600;
}
.tests-order-actions {
  display: flex;
  gap: 8px;
  margin: 6px 0 4px;
}
.tests-pocket {
  margin: 0 0 6px;
}
.tests-pocket-svg {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
}
.tests-pocket-edge {
  stroke: var(--border);
  stroke-width: 1.5;
}
.tests-pocket-node rect {
  fill: var(--surface-hover);
  stroke: var(--border);
  stroke-width: 1.25;
}
.tests-pocket-node.is-lit rect {
  fill: var(--accent);
  stroke: var(--accent);
}
.tests-pocket-k {
  font-size: 9px;
  fill: var(--text-muted);
}
.tests-pocket-v {
  font-size: 10px;
  fill: var(--text);
}
.tests-pocket-node.is-lit .tests-pocket-k,
.tests-pocket-node.is-lit .tests-pocket-v {
  fill: var(--text);
}
.tests-engine .tests-table-wrap {
  max-height: none;
}


/* Container sync (Doc 49/50) */
.stock-sync-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: end;
  margin: 10px 0;
}
.stock-sync-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.stock-sync-form input,
.stock-sync-form select {
  min-width: 140px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2, rgba(0,0,0,0.2));
  color: var(--text);
}
.stock-sync-log {
  margin: 8px 0 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.4;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  white-space: pre-wrap;
}

.stock-sync-approval {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2, rgba(0,0,0,0.15));
}
.stock-sync-approval-lead {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.stock-sync-approval-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: end;
}
.stock-sync-approval-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  flex: 1 1 220px;
}
.stock-sync-approval-row input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2, rgba(0,0,0,0.2));
  color: var(--text);
}
.stock-sync-approval-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text);
}

/* Data quality — ops review sidecar (Doc 04 §13.8) */
.dq-review-pick {
  font: inherit;
  color: var(--ink);
  background: var(--panel-2, transparent);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
}
.dq-review-note {
  display: block;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.85em;
}

/* Doc 55 — Ask drawer (docked right; not a primary tab) */
.app-work {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.app-work > .app-body {
  flex: 1;
  min-width: 0;
}

#analystToggle.active {
  border-color: var(--highlight);
  color: var(--highlight);
  background: color-mix(in srgb, var(--highlight) 15%, transparent);
}

.analyst-drawer {
  width: min(400px, 100%);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  min-height: 0;
}

.analyst-drawer[hidden] {
  display: none !important;
}

.analyst-drawer-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.analyst-context {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analyst-chips,
.analyst-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analyst-chips .chip,
.analyst-scope-row .chip,
.suggest-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.analyst-sel {
  cursor: pointer;
}

.analyst-tip {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
}

.analyst-tip[data-kind="warn"] {
  color: var(--text);
}

.analyst-transcript {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analyst-user {
  align-self: flex-end;
  max-width: 92%;
  padding: 8px 10px;
  border-radius: 10px 10px 2px 10px;
  background: color-mix(in srgb, var(--accent) 35%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  font-size: 12px;
  line-height: 1.4;
}

.analyst-card {
  align-self: stretch;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analyst-card.stale {
  outline: 1px solid var(--warning, #f59e0b);
}

.analyst-claim {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.analyst-measures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.analyst-measure {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
}

.analyst-measure .l {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
}

.analyst-measure .v {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
}

.analyst-grounding,
.analyst-specs,
.analyst-card-tip {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.analyst-specs a {
  color: var(--highlight);
  text-decoration: none;
}

.analyst-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Doc 67: island worked sheet on a plane-B card — the audit record, verbatim. */
.analyst-sheet {
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.analyst-composer {
  border-top: 1px solid var(--border);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analyst-composer textarea {
  width: 100%;
  resize: vertical;
  min-height: 52px;
  max-height: 140px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}

.analyst-composer-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.suggest-chip {
  cursor: pointer;
  background: transparent;
  color: var(--highlight);
  border-color: color-mix(in srgb, var(--highlight) 45%, var(--border));
}

.suggest-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .app-work.analyst-open > .app-body {
    display: none;
  }

  .analyst-drawer {
    width: 100%;
    border-left: none;
  }
}