/* IVR Deep Dive Dashboard — Bloomberg Terminal Dark Aesthetic */
/* Fonts: JetBrains Mono (data), Space Grotesk (headers) */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ─── CSS VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  --bg-0:        #080c14;
  --bg-1:        #0b1120;
  --bg-2:        #0f1628;
  --bg-3:        #131b30;
  --bg-4:        #182038;
  --bg-5:        #1d2640;

  --border:      #1e2a42;
  --border-1:    #243050;
  --border-2:    #2a3860;
  --border-3:    #354570;

  --surface-0:   #0d1220;
  --surface-1:   #141c30;
  --surface-2:   #1a2438;

  --text-0:      #eef0f4;
  --text-1:      #b8c0d0;
  --text-2:      #7080a0;
  --text-3:      #4a5670;
  --text-4:      #2e3850;

  --blue:        #00a8ff;
  --blue-dim:    #0060a0;
  --blue-glow:   rgba(0, 168, 255, 0.15);
  --blue-deep:   rgba(0, 168, 255, 0.06);

  --amber:       #ffaa00;
  --amber-dim:   #7a5000;
  --amber-glow:  rgba(255, 170, 0, 0.15);

  --red:         #ff3344;
  --red-dim:     #7a1020;
  --red-glow:    rgba(255, 51, 68, 0.15);

  --green:       #00cc88;
  --green-dim:   #006640;
  --green-glow:  rgba(0, 204, 136, 0.15);

  --cyan:        #00ddcc;
  --violet:      #8866ff;

  --mono:        'JetBrains Mono', 'Courier New', monospace;
  --sans:        'Space Grotesk', 'Segoe UI', sans-serif;

  --row-total-bg: #0c1218;
  --row-recon-bg:  #0c100e;

  --header-h:    44px;
  --tabs-h:      36px;
  --ctrl-h:      0px;
}

/* ─── LIGHT MODE OVERRIDES ─────────────────────────────────────────────────── */
html.light-mode {
  --bg-0:        #f4f1ec;
  --bg-1:        #eae6df;
  --bg-2:        #e0dbd3;
  --bg-3:        #d6d0c7;
  --bg-4:        #ccc5bb;
  --bg-5:        #c2bbaf;

  --border:      #b8b0a2;
  --border-1:    #c5bcad;
  --border-2:    #a89d8c;
  --border-3:    #968b78;

  --surface-0:   #ece8e1;
  --surface-1:   #e2ddd5;
  --surface-2:   #d8d2c9;

  --text-0:      #1a1610;
  --text-1:      #302a22;
  --text-2:      #5a5347;
  --text-3:      #7e7668;
  --text-4:      #a09888;

  --blue:        #0c6b8a;
  --blue-dim:    #c8dfe6;
  --blue-glow:   rgba(12, 107, 138, 0.08);
  --blue-deep:   rgba(12, 107, 138, 0.04);

  --amber:       #8c5a08;
  --amber-dim:   #e0cfa0;
  --amber-glow:  rgba(140, 90, 8, 0.08);

  --red:         #992822;
  --red-dim:     #ddb8b4;
  --red-glow:    rgba(153, 40, 34, 0.08);

  --green:       #1a6848;
  --green-dim:   #b0d4c0;
  --green-glow:  rgba(26, 104, 72, 0.08);

  --cyan:        #0c6b7a;
  --violet:      #4e3d80;

  --row-total-bg: rgba(12, 107, 138, 0.08);
  --row-recon-bg:  rgba(26, 104, 72, 0.06);
}

/* Light mode: soften all heavy dark-mode shadows globally */
html.light-mode *,
html.light-mode *::before,
html.light-mode *::after {
  --_shadow-opacity: 0.08;
}
html.light-mode .fin-save-bar {
  box-shadow: none;
  padding: 4px 18px;
}
html.light-mode [style*="box-shadow"],
html.light-mode .modal,
html.light-mode .dropdown,
html.light-mode .tooltip {
  filter: none;
}
/* Blanket shadow reduction for light mode — catches all deep rgba(0,0,0,0.4+) shadows */
html.light-mode .section-header,
html.light-mode .fin-controls-bar,
html.light-mode .chunk-b-upload-area,
html.light-mode .fin-edit-col,
html.light-mode .fin-data-col {
  box-shadow: none !important;
}


/* ─── Tab 9: Belief Accounting Viz dark-mode navy alignment ─── */
/* The BAV module has hardcoded bg constants; these CSS overrides 
   align them to the navy palette without modifying JS constants */
.bav-container { background: var(--bg-1) !important; }
.bav-landscape { background: var(--bg-0) !important; }
.bav-node { background: var(--bg-3) !important; border-color: var(--border-2) !important; }
.bav-card { background: var(--bg-3) !important; border-color: var(--border-2) !important; }
.bav-phase-bar { background: var(--bg-2) !important; }
.bav-lens-detail { background: var(--bg-1) !important; }

/* ─── THEME TOGGLE BUTTON ──────────────────────────────────────────────────── */
#theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
#theme-toggle-btn:hover {
  color: var(--text-1);
  border-color: var(--text-2);
}

/* ─── FONT SIZE CONTROLS ───────────────────────────────────────────────────── */
.font-size-ctrl {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.font-size-ctrl button {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  width: 22px;
  height: 24px;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
  padding: 0;
}
.font-size-ctrl button:hover {
  color: var(--text-1);
  border-color: var(--text-2);
}
.font-size-label {
  font-size: 9px;
  font-family: var(--mono);
  color: var(--text-3);
  letter-spacing: 0.05em;
  min-width: 28px;
  text-align: center;
  user-select: none;
}

/* ─── WORK MODE (zen / distraction-free) ───────────────────────────────────── */
/* Invisible hover trigger at top of viewport */
#work-mode-trigger {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 9999;
  cursor: default;
}
body.work-mode #work-mode-trigger { display: block; }

/* The chrome wrapper slides up off-screen */
#chrome-wrap {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  transform-origin: top center;
  position: relative;
  z-index: 200;
}
body.work-mode #chrome-wrap {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0;
}
/* Hover trigger → reveal chrome */
body.work-mode #work-mode-trigger:hover ~ #chrome-wrap,
body.work-mode #chrome-wrap:hover {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
/* Adjust financials tab in work mode to fill full viewport */
body.work-mode #tab-financials.active {
  height: calc(100vh - 2px);
}
/* Sticky section header in work mode — stick to very top */
body.work-mode #tab-financials > .section-header {
  top: 0;
}
/* Tabnav in work mode — stick to top when revealed */
body.work-mode #tabnav {
  top: 0;
}

/* Work mode toggle button */
#work-mode-btn {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
#work-mode-btn:hover {
  color: var(--text-1);
  border-color: var(--text-2);
}

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

html {
  overflow-x: hidden; /* prevent horizontal scroll — on html only so body sticky works */
}
html, body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Thin scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* Selection */
::selection { background: var(--blue-dim); color: var(--text-0); }

/* ─── GRID LINES BACKGROUND ─────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ─── HEADER BAR ─────────────────────────────────────────────────────────────── */
#header {
  position: relative; /* v6.9.5: header scrolls away, only tabnav is sticky */
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.header-logo {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

.header-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blue);
  text-shadow: 0 0 20px rgba(0,168,255,0.4);
  line-height: 1.1;
}

.header-subtitle {
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.header-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

.header-version {
  font-size: 10px;
  color: var(--text-3);
  border: 1px solid var(--border-2);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

.header-company-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.header-spacer { flex: 1; }

.header-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-clock {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.05em;
}

.sample-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--amber);
  background: rgba(255,170,0,0.08);
  border: 1px solid rgba(255,170,0,0.3);
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.08em;
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
  transition: all 0.3s;
}

.status-dot.idle    { background: var(--text-3); }
.status-dot.loading { background: var(--amber); animation: pulse 1s infinite; }
.status-dot.ready   { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.error   { background: var(--red); box-shadow: 0 0 8px var(--red); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ─── CONTROL PANEL ─────────────────────────────────────────────────────────── */
#controls {
  position: relative; /* v6.9.5: scrolls away with header */
  z-index: 90;
  background: var(--bg-2);
}

/* v6.9.5: Analyst header scrolls away, not sticky */
#analyst-header {
  position: relative;
  z-index: 85;
  background: var(--bg-1);
}

.ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ctrl-h);
  flex-wrap: wrap;
}

.ctrl-label {
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: none;
  margin-bottom: 0;
}

.ctrl-group {
  display: flex;
  flex-direction: column;
}

.ctrl-input {
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  color: var(--text-0);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 2px;
  outline: none;
  letter-spacing: 0.05em;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 160px;
}

.ctrl-input:focus {
  border-color: var(--blue-dim);
  box-shadow: 0 0 0 2px var(--blue-deep);
}

.ctrl-input::placeholder { color: var(--text-4); }

.ctrl-select {
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  width: 180px;
  transition: border-color 0.15s;
}

.ctrl-select:focus { border-color: var(--blue-dim); }

option { background: var(--bg-3); }

.analyze-btn {
  height: 28px;
  padding: 0 16px;
  background: var(--blue);
  color: #000;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-top: 0;
}

.analyze-btn:hover { background: #22bfff; box-shadow: 0 0 16px rgba(0,168,255,0.4); }
.analyze-btn:active { transform: scale(0.98); }
.analyze-btn:disabled { background: var(--text-4); cursor: not-allowed; }

.ctrl-sep { flex: 1; }

.ctrl-company-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.company-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: 0.03em;
}

.company-meta {
  display: flex;
  gap: 8px;
}

.company-tag {
  font-size: 10px;
  color: var(--text-2);
  background: var(--bg-4);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.06em;
}

/* ─── TAB NAV ────────────────────────────────────────────────────────────────── */
#tabnav {
  position: sticky;
  top: 0; /* v6.9.5: tabs are the ONLY sticky element — glued to viewport top */
  z-index: 80;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: none;
  padding: 0 20px;
  gap: 0;
  overflow-x: auto;
}
#tabnav.visible { display: flex; }

/* ─── Pane Controls ────────────────────────────────────────────────────────── */
/* Nav-level: Sherlock toggle in tabnav (right-aligned) */
.pane-controls-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
  flex-shrink: 0;
  height: 100%;
}

/* Inline: WB + RS pane controls inside the "02 — FINANCIALS" section header */
.pane-controls-inline {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 8px;
  flex-shrink: 1;             /* allow shrink when zoomed */
  flex-wrap: nowrap;          /* v16.2: single row — scroll instead of wrapping */
  height: auto;
  min-height: 24px;
  overflow-x: auto;           /* scroll when pills overflow */
  overflow-y: hidden;
  scrollbar-width: none;      /* hide scrollbar — scroll via drag/wheel */
}

.pane-controls-inline::-webkit-scrollbar { display: none; }
/* Pane group: subtle left-border tint per section */
.pane-group {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 100%;
  padding: 3px 6px 3px 5px;
  border-left: 2px solid transparent;
  border-radius: 0;
  flex-wrap: nowrap;          /* v16.2: single row, no wrapping */
  flex-shrink: 0;             /* groups don't shrink — container scrolls */
  overflow: hidden;
}

/* Workbench Belief — warm amber tint */
.pane-group[data-pane="workbench_belief"] {
  border-left-color: rgba(240, 180, 41, 0.35);
  background: rgba(240, 180, 41, 0.03);
}

/* Reformulated Statements — cool blue tint */
.pane-group[data-pane="reformulated"] {
  border-left-color: rgba(0, 168, 255, 0.35);
  background: rgba(0, 168, 255, 0.03);
}

/* Sherlock — violet tint */
.pane-group[data-pane="sherlock"] {
  border-left-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.04);
}

/* Editor & Presets — green tint */
.pane-group[data-pane="editor_presets"] {
  border-left-color: rgba(46, 204, 113, 0.35);
  background: rgba(46, 204, 113, 0.03);
}

.pane-sep {
  color: var(--border);
  font-size: 10px;
  margin: 0 2px;
  opacity: 0.25;
  user-select: none;
  flex-shrink: 99;            /* collapse separators first when zoomed */
}

/* Master pane toggle button */
.pane-toggle {
  height: 22px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  background: var(--bg-2);
  color: var(--text-3);
  flex-shrink: 0;
}

.pane-toggle:hover { background: var(--bg-4); color: var(--text-0); }

/* Workbench Belief toggle — amber accent */
.pane-group[data-pane="workbench_belief"] .pane-toggle.active {
  background: rgba(240, 180, 41, 0.18);
  color: #f0b429;
  border-color: rgba(240, 180, 41, 0.4);
}
.pane-group[data-pane="workbench_belief"] .pane-toggle.active:hover {
  background: rgba(240, 180, 41, 0.28);
}

/* Reformulated toggle — blue accent */
.pane-group[data-pane="reformulated"] .pane-toggle.active {
  background: rgba(0, 168, 255, 0.15);
  color: var(--blue);
  border-color: rgba(0, 168, 255, 0.4);
}
.pane-group[data-pane="reformulated"] .pane-toggle.active:hover {
  background: rgba(0, 168, 255, 0.25);
}

/* Sherlock toggle — violet accent */
.pane-group[data-pane="sherlock"] .pane-toggle.active {
  background: rgba(168, 85, 247, 0.18);
  color: rgb(168, 85, 247);
  border-color: rgba(168, 85, 247, 0.4);
}
.pane-group[data-pane="sherlock"] .pane-toggle.active:hover {
  background: rgba(168, 85, 247, 0.28);
}

/* Sub-tab pills */
.subtab-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 3px;
}

.subtab-pill {
  height: 18px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  background: var(--bg-1);
  color: var(--text-3);
  flex-shrink: 0;
}

.subtab-pill:hover { background: var(--bg-3); color: var(--text-1); }

/* Workbench Belief pills — amber when active */
.pane-group[data-pane="workbench_belief"] .subtab-pill.active {
  background: rgba(240, 180, 41, 0.1);
  color: #f0b429;
  border-color: rgba(240, 180, 41, 0.3);
}
.pane-group[data-pane="workbench_belief"] .subtab-pill.active:hover {
  background: rgba(240, 180, 41, 0.18);
}

/* Reformulated pills — blue when active */
.pane-group[data-pane="reformulated"] .subtab-pill.active {
  background: rgba(0, 168, 255, 0.1);
  color: var(--blue);
  border-color: rgba(0, 168, 255, 0.3);
}
.pane-group[data-pane="reformulated"] .subtab-pill.active:hover {
  background: rgba(0, 168, 255, 0.18);
}

/* Hide pills when parent pane is inactive */
.pane-group .subtab-pills { transition: opacity 0.15s; }
.pane-group:not(.pane-active) .subtab-pills { opacity: 0.3; pointer-events: none; }
.pane-group.pane-active .subtab-pills { opacity: 1; }

/* Sub-tab section visibility (controlled by pills) */
.subtab-section { transition: opacity 0.15s; position: relative; }
.subtab-section.subtab-hidden { display: none !important; }
.subtab-section.subtab-resized { overflow-y: auto; min-height: 60px; }

/* ─── Per-section vertical resize handle ─────────────────────────────────── */
.subtab-vresize {
  height: 5px;
  cursor: ns-resize;
  background: transparent;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  user-select: none;
  transition: background 0.15s;
}
.subtab-vresize::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: 2px;
  height: 1px;
  border-radius: 1px;
  background: var(--border-2);
  transition: background 0.2s, height 0.2s, top 0.2s;
}
.subtab-vresize:hover::after,
.subtab-vresize.dragging::after {
  background: var(--blue);
  height: 2px;
  top: 1px;
  left: 10%;
  right: 10%;
}
.subtab-vresize:hover {
  background: rgba(0,168,255,0.06);
}
.subtab-vresize.dragging {
  background: rgba(0,168,255,0.10);
}

.tab-btn {
  height: var(--tabs-h);
  padding: 0 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--text-1); background: var(--bg-2); }

.tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
}

.tab-num {
  font-size: 8px;
  color: var(--text-4);
  margin-right: 5px;
}

/* ─── MAIN CONTENT ───────────────────────────────────────────────────────────── */
#main-content {
  padding: 20px;
  min-height: calc(100vh - var(--header-h) - var(--tabs-h) - 120px);
  position: relative;
  z-index: 1;
}

/* ─── EMPTY STATE ────────────────────────────────────────────────────────────── */
#empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - var(--ctrl-h) - 60px);
  gap: 32px;
  color: var(--text-3);
  text-align: center;
}

.empty-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.empty-brand-title {
  font-family: var(--sans);
  font-size: 42px;
  font-weight: 300;
  color: var(--blue);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(0,168,255,0.15);
}

.empty-brand-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.empty-tickers {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.ticker-chip {
  font-size: 11px;
  color: var(--blue);
  background: var(--blue-deep);
  border: 1px solid rgba(0,168,255,0.2);
  padding: 4px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.06em;
}

.ticker-chip:hover {
  background: var(--blue-glow);
  border-color: var(--blue);
  box-shadow: 0 0 8px rgba(0,168,255,0.2);
}

/* ─── LOADING STATE ──────────────────────────────────────────────────────────── */
#loading-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
}

.loader-text {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.1em;
}

.loader-bar {
  width: 300px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}

.loader-fill {
  height: 100%;
  width: 40%;
  background: var(--blue);
  border-radius: 1px;
  animation: scan 1.5s ease-in-out infinite;
}

@keyframes scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ─── TAB PANELS ─────────────────────────────────────────────────────────────── */
.tab-panel {
  display: none;
  animation: fadeIn 0.2s ease;
}

.tab-panel.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* v6.11: Save bar notification pulse */
@keyframes saveBarPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* v6.9.2: Lens confirmation card slide-up */
@keyframes _lcCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SECTION HEADERS ────────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
/* v9.x: Financials tab — flex column layout filling viewport.
   Section header is sticky below tabnav so toggle pills are always reachable.
   fin-split fills remaining height; individual columns scroll internally. */
#tab-financials.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--tabs-h, 36px) - 2px);
  overflow: visible; /* allow sticky to work inside */
}
#tab-financials > .section-header {
  position: sticky;
  top: var(--tabs-h, 36px);
  flex-shrink: 0;
  z-index: 70;
  background: var(--bg-0);
  margin-bottom: 0;
  flex-wrap: nowrap;
}
/* v16.2: Toolbar — pane controls + save bar — sits below the section header */
.fin-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px 0;
  flex-shrink: 0;
  flex-wrap: wrap;            /* save bar wraps to second line */
  background: var(--bg-1);
}

.section-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: 0.06em;
}

.section-desc {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* ─── DATA TABLES ────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 20px;
}

/* ─── STICKY HEADER ROW ─────────────────────────────────────────────────────── */
.table-wrap .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-3);
}

/* ─── STICKY FIRST COLUMN ───────────────────────────────────────────────────── */
.table-wrap .data-table thead th:first-child,
.table-wrap .data-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-2);
}
/* v6.6.4: Sticky first-col inherits zebra stripe */
.table-wrap .data-table tbody tr:nth-child(even) > td:first-child {
  background: var(--bg-3);
}
/* v6.6.6: Sticky first-col inherits row-variant backgrounds (opaque, matching rest of row) */
.table-wrap .data-table tbody tr.row-subtotal > td:first-child {
  background: var(--bg-4);
}
.table-wrap .data-table tbody tr.row-total > td:first-child {
  background: var(--row-total-bg, #0c1218);
}
.table-wrap .data-table tbody tr.row-recon > td:first-child {
  background: var(--row-recon-bg, #0c100e);
}
.table-wrap .data-table tbody tr.row-section-header > td:first-child {
  background: var(--bg-3);
}
/* v6.6.6: Sticky first-col hover must also be opaque */
.table-wrap .data-table tbody tr:hover > td:first-child {
  background: var(--bg-4);
}

/* ─── CORNER CELL: both sticky directions ───────────────────────────────────── */
.table-wrap .data-table thead th:first-child {
  z-index: 3;
}

/* ─── SECTION HEADER ROWS also stick left ───────────────────────────────────── */
.table-wrap .data-table tbody tr.row-section-header td {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-3);
}

.data-table {
  width: 100%;
  min-width: 500px; /* v6.6.3: ensures horizontal scroll when column is narrow */
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;          /* v6.12: slightly more breathing room */
}

.data-table thead th {
  background: var(--bg-3);
  color: var(--text-2);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;          /* v6.12: slightly wider horizontal pad */
  text-align: right;
  border-bottom: 2px solid var(--border-2);  /* v6.12: heavier bottom for header distinction */
  white-space: nowrap;
  /* v6.6.7: col-resize cursor hints users can dbl-click to auto-fit */
  cursor: col-resize;
  border-right: 1px solid var(--border);
  position: relative;
}

/* v6.6.4: merged into rule block below */

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
/* v6.6.4: Zebra striping for readability */
.data-table tbody tr:nth-child(even) > td {
  background: var(--bg-3);
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table thead th:last-child,
.data-table tbody td:last-child { border-right: none; }

.data-table tbody tr:hover > td { background: var(--bg-4); }

.data-table tbody td {
  padding: 4px 8px;           /* v8: tighter padding to give columns more room */
  text-align: right;
  color: var(--text-1);
  white-space: nowrap;
  /* v6.6.7: subtle column dividers for all data cells */
  border-right: 1px solid var(--border);
  min-width: 80px;            /* v8: prevent columns from collapsing below readable width */
}

.data-table tbody td:first-child {
  text-align: left;
  color: var(--text-2);
  font-size: 10px;
  letter-spacing: 0.04em;
  /* v6.6.4: Allow long labels to wrap */
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  border-right: 1px solid var(--border);
  /* v6.6.7: width controlled by colgroup auto-fit, just set overflow */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v6.6.4: Column divider on header first-child too */
.data-table thead th:first-child {
  text-align: left;
  border-right: 1px solid var(--border);
}

/* ─── COLUMN RESIZE HANDLES ────────────────────────────────────────────────── */
.col-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 4;
  transition: background 0.15s;
}
.col-resize-handle:hover,
.col-resize-handle:active {
  background: var(--blue);
  opacity: 0.6;
}

/* ─── VERTICAL (TABLE HEIGHT) RESIZE HANDLE ────────────────────────────────── */
.table-vresize-handle {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
  background: transparent;
  z-index: 4;
  transition: background 0.15s;
}
.table-vresize-handle:hover,
.table-vresize-handle:active {
  background: var(--blue);
  opacity: 0.6;
}

/* ─── PDF PATCHES TAB PILLS ────────────────────────────────────────────────── */
.pdf-tab-pill:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-1) !important;
}

/* ─── WORKBENCH JUMP ICON (on table rows) ──────────────────────────────────── */
.wb-jump-icon {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  color: var(--text-4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  margin-left: 4px;
  vertical-align: middle;
}
tr:hover .wb-jump-icon {
  opacity: 0.6;
}
.wb-jump-icon:hover {
  opacity: 1 !important;
  color: var(--blue);
}

/* Row variants */
.row-section-header td {
  background: var(--bg-3);
  color: var(--text-2) !important;  /* v6.12: slightly brighter for clean labels */
  font-family: var(--sans) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  padding: 8px 14px !important;    /* v6.12: breathing room */
  border-top: 2px solid var(--border-2);  /* v6.12: strong top separator */
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--blue-dim) !important;  /* v6.12: accent bar */
}

.row-subtotal td {
  background: var(--bg-4);
  color: var(--text-0) !important;
  font-weight: 600;
  border-top: 1px solid var(--border-2);   /* v6.12: subtle top separator */
}

.row-total td {
  background: var(--row-total-bg, #0c1218);
  color: var(--blue) !important;
  font-weight: 700;
  border-top: 2px solid var(--blue-dim);   /* v6.12: stronger double-line accounting style */
  border-bottom: 1px solid var(--blue-dim);
}

.row-recon td {
  background: var(--row-recon-bg, #0c100e);
  color: var(--green) !important;
  font-size: 10px !important;
  border-top: 1px solid rgba(0,204,136,0.15); /* v6.12: subtle green separator */
}

.row-indent td:first-child {
  padding-left: 24px !important;
  color: var(--text-2) !important;
}

/* ─── NUMBER FORMATTING ──────────────────────────────────────────────────────── */
.num-pos  { color: var(--green); }
.num-neg  { color: var(--red); }
.num-neut { color: var(--text-1); }
/* v8: pct-dim stacks below value to prevent overlap in narrow columns at 100% zoom */
.pct-dim  { color: var(--text-3); font-size: 9px; display: block; line-height: 1.2; margin-top: 1px; }
.yoy-pos  { color: var(--green); font-size: 9px; display: block; line-height: 1.2; margin-top: 1px; }
.yoy-neg  { color: var(--red); font-size: 9px; display: block; line-height: 1.2; margin-top: 1px; }
.yoy-neut { color: var(--text-3); font-size: 9px; display: block; line-height: 1.2; margin-top: 1px; }

/* ─── BADGES ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-blue     { background: var(--blue-deep);  color: var(--blue);  border: 1px solid rgba(0,168,255,0.25); }
.badge-green    { background: var(--green-glow); color: var(--green); border: 1px solid rgba(0,204,136,0.25); }
.badge-amber    { background: var(--amber-glow); color: var(--amber); border: 1px solid rgba(255,170,0,0.25); }
.badge-red      { background: var(--red-glow);   color: var(--red);   border: 1px solid rgba(255,51,68,0.25); }
.badge-grey     { background: rgba(255,255,255,0.04); color: var(--text-3); border: 1px solid var(--border); }
.badge-violet   { background: rgba(136,102,255,0.1); color: var(--violet); border: 1px solid rgba(136,102,255,0.25); }

.badge-existential {
  background: rgba(255,51,68,0.12);
  color: var(--red);
  border: 1px solid rgba(255,51,68,0.4);
  animation: glow-red 2s ease-in-out infinite;
}

@keyframes glow-red {
  0%, 100% { box-shadow: 0 0 0 rgba(255,51,68,0); }
  50% { box-shadow: 0 0 8px rgba(255,51,68,0.4); }
}

/* ─── STATUS DOTS ─────────────────────────────────────────────────────────────── */
.sdot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.sdot-blue   { background: var(--blue);  box-shadow: 0 0 4px var(--blue); }
.sdot-green  { background: var(--green); box-shadow: 0 0 4px var(--green); }
.sdot-amber  { background: var(--amber); box-shadow: 0 0 4px var(--amber); animation: pulse 2s infinite; }
.sdot-red    { background: var(--red);   box-shadow: 0 0 4px var(--red);   animation: pulse 1s infinite; }
.sdot-grey   { background: var(--text-4); }

/* ─── SPARKLINES ─────────────────────────────────────────────────────────────── */
.sparkline {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  vertical-align: middle;
}

.spark-bar {
  width: 5px;
  border-radius: 1px 1px 0 0;
  min-height: 2px;
  transition: opacity 0.2s;
}

/* ─── FEASIBILITY PANEL ──────────────────────────────────────────────────────── */
.feasibility-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 20px;
  background: var(--bg-2);
}

.feas-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feas-status-text {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.feas-feasible    { color: var(--green); text-shadow: 0 0 30px rgba(0,204,136,0.4); }
.feas-elevated    { color: var(--cyan);  text-shadow: 0 0 30px rgba(0,221,204,0.4); }
.feas-high-risk   { color: var(--amber); text-shadow: 0 0 30px rgba(255,170,0,0.5); animation: pulse-text 2s infinite; }
.feas-infeasible  { color: var(--red);   text-shadow: 0 0 30px rgba(255,51,68,0.5); animation: pulse-text 1.5s infinite; }

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.feas-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.feas-reason {
  font-size: 11px;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 8px;
}

.feas-reason::before {
  content: '▸';
  color: var(--red);
  font-size: 10px;
}

/* ─── HAZARD CALENDAR ────────────────────────────────────────────────────────── */
.hazard-timeline {
  position: relative;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hazard-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-2);
}

.hazard-item {
  position: relative;
  padding: 14px 16px 14px 24px;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 8px;
  background: var(--bg-2);
  transition: background 0.15s;
}

.hazard-item:hover { background: var(--bg-3); }

.hazard-dot {
  position: absolute;
  left: -20px;
  top: 20px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-0);
}

.hazard-dot-high  { background: var(--red); box-shadow: 0 0 6px var(--red); }
.hazard-dot-med   { background: var(--amber); }
.hazard-dot-low   { background: var(--green); }

.hazard-row1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.hazard-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: 0.05em;
}

.hazard-label {
  font-size: 11px;
  color: var(--text-2);
}

.hazard-days {
  font-size: 10px;
  color: var(--text-3);
  margin-left: auto;
}

.hazard-rails {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.hazard-rail-chip {
  font-size: 9px;
  color: var(--text-3);
  background: var(--bg-4);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

/* ─── STATS PANELS (2-column) ────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

.stat-cell {
  background: var(--bg-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-cell:last-child { border-right: none; }

.stat-label {
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.stat-sub {
  font-size: 10px;
  color: var(--text-3);
}

/* ─── FENCE POSTS ─────────────────────────────────────────────────────────────── */
.fence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.fence-post {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
  transition: background 0.15s;
}

.fence-post:hover { background: var(--bg-3); }

.fence-post.breach {
  border-color: rgba(255,51,68,0.4);
  background: rgba(255,51,68,0.04);
}

.fence-post.near {
  border-color: rgba(255,170,0,0.3);
  background: rgba(255,170,0,0.03);
}

.fence-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fence-post-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
}

.fence-post-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 4px;
}

.fence-post-role {
  font-size: 9px;
  color: var(--text-4);
  letter-spacing: 0.06em;
}

/* ─── BREAK MAP SPECIFIC ─────────────────────────────────────────────────────── */
.break-detail {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* ─── SCOPE FOOTER ────────────────────────────────────────────────────────────── */
#footer {
  display: none; /* v9.x: removed — reclaims ~52px of viewport for panels */
}

.footer-scope {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.06em;
}

.footer-scope strong {
  color: var(--amber);
  font-weight: 600;
}

.footer-ts {
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.05em;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ctrl-row { height: auto; padding: 10px 0; }
  .ctrl-input { width: 130px; }
  .ctrl-select { width: 150px; }
  #tabnav { top: 0; } /* v6.9.5: always top:0 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .fence-grid { grid-template-columns: 1fr; }
}

/* ─── RAIL HEAT COLORS ───────────────────────────────────────────────────────── */
.heat-good    { color: var(--green); }
.heat-ok      { color: #88cc44; }
.heat-warn    { color: var(--amber); }
.heat-bad     { color: #ff7733; }
.heat-crit    { color: var(--red); }

/* ─── MISC UTILS ─────────────────────────────────────────────────────────────── */
.mono { font-family: var(--mono); }
.sans { font-family: var(--sans); }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.dim { opacity: 0.45; }
.blue { color: var(--blue); }
.green { color: var(--green); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* Tooltip — help cursor only on non-interactive info elements, not buttons/toggles */

/* Panel title row above multi-panel sections */
.panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 16px;
}

.panel-title {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ─── BELIEF MAP ADDITIONS ─────────────────────────────────────────────── */
.tier-badge {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
}
.tier-t1 { background: rgba(0,168,255,0.12); color: var(--blue); border: 1px solid rgba(0,168,255,0.3); }
.tier-t2 { background: rgba(255,170,0,0.08); color: var(--amber); border: 1px solid rgba(255,170,0,0.2); }
.tier-t3 { background: rgba(255,255,255,0.04); color: var(--text-3); border: 1px solid var(--border); }

.footnote-priority {
  font-size: 9px;
  color: var(--text-3);
  line-height: 1.6;
  padding: 8px 12px;
  margin: 8px 0 16px 0;
  border-left: 2px solid var(--border-2);
  background: var(--bg-3);
}

.role-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.role-section-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.live-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green);
  background: rgba(0,204,136,0.08);
  border: 1px solid rgba(0,204,136,0.3);
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   IVR v3 EXTENSIONS — Belief Accounting Compiler Components
   Bloomberg Terminal dark aesthetic — new component layer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── NEW CSS VARIABLES (additive) ──────────────────────────────────────────── */
:root {
  --amber-gold:   #f5a623;
  --pass-green:   #00c853;
  --fail-red:     #ff3d3d;
  --llm-amber:    rgba(245, 166, 35, 0.12);
  --llm-border:   rgba(245, 166, 35, 0.35);
  --panel-bg:     #0d0d0d;
  --scan-overlay: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
}

/* ─── COMPILER PANELS ────────────────────────────────────────────────────────── */
.compiler-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 16px;
  position: relative;
}

.compiler-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scan-overlay);
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.4;
}

/* Recon dashboard body — ensure content is visible and has z-index above scanline overlay */
.recon-body {
  position: relative;
  z-index: 2;
  padding-bottom: 8px;
}

.compiler-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.compiler-panel-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-0);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ─── IDENTITY CARD ──────────────────────────────────────────────────────────── */
.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

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

.id-field-wide {
  grid-column: span 2;
}

.id-label {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}

.id-value {
  font-size: 12px;
  color: var(--text-1);
  padding: 5px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 2px;
  min-height: 28px;
  line-height: 1.4;
}

.id-value-highlight {
  color: var(--blue);
  font-weight: 600;
  font-size: 13px;
}

.id-textarea {
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 2px;
  outline: none;
  resize: vertical;
  min-height: 42px;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.id-textarea:focus {
  border-color: var(--blue-dim);
  box-shadow: 0 0 0 2px var(--blue-deep);
}

/* ─── ARCHETYPE PANEL ────────────────────────────────────────────────────────── */
.archetype-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* ─── REFORMULATION MAP ──────────────────────────────────────────────────────── */
.map-section {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
  background: var(--bg-2);
}

.map-section-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.bullet-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.bullet-num {
  font-size: 9px;
  color: var(--text-4);
  min-width: 20px;
  padding-top: 6px;
  font-family: var(--mono);
}

.bullet-textarea {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 2px;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}

.bullet-textarea:focus { border-color: var(--blue-dim); }

.bullet-del {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.15s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bullet-del:hover { border-color: var(--red); color: var(--red); }

.add-bullet-btn {
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10px;
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.add-bullet-btn:hover {
  border-color: var(--blue-dim);
  color: var(--blue);
}

/* ─── LLM ASSIST BUTTONS ─────────────────────────────────────────────────────── */
.llm-assist-btn {
  background: var(--llm-amber);
  border: 1px solid var(--llm-border);
  color: var(--amber-gold);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.llm-assist-btn:hover {
  background: rgba(245, 166, 35, 0.2);
  border-color: var(--amber-gold);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.2);
}

/* ─── COMPILE BUTTONS ────────────────────────────────────────────────────────── */
.compile-btn {
  height: 28px;
  padding: 0 14px;
  background: rgba(0, 168, 255, 0.1);
  border: 1px solid var(--blue-dim);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.compile-btn:hover {
  background: var(--blue-glow);
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.2);
}

/* ─── VALIDATOR BADGES ───────────────────────────────────────────────────────── */
.validator-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.validator-pass {
  background: rgba(0, 200, 83, 0.1);
  color: var(--pass-green);
  border: 1px solid rgba(0, 200, 83, 0.3);
}

.validator-fail {
  background: rgba(255, 61, 61, 0.1);
  color: var(--fail-red);
  border: 1px solid rgba(255, 61, 61, 0.3);
  animation: fail-pulse 2s ease-in-out infinite;
}

@keyframes fail-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 6px rgba(255, 61, 61, 0.3); }
}

.validator-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ─── SECTION SUB-HEADERS ────────────────────────────────────────────────────── */
.section-sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.section-sub-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── MINI INPUTS (table cells) ──────────────────────────────────────────────── */
.mini-input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 2px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s;
}

.mini-input:focus { border-color: var(--blue-dim); }

textarea.mini-input { resize: vertical; }

.mini-select {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 5px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  width: 100%;
}

/* ─── RAIL BLUEPRINT TABLE ───────────────────────────────────────────────────── */
.rail-summary-row td { padding: 7px 12px; }

.rail-summary-row:hover { background: var(--bg-4); }

.rail-detail-panel {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 16px 20px;
}

.rail-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.rdf-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rdf-section-title {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.rdf-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rdf-field label {
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rdf-field-wide {
  grid-column: span 2;
}

/* ─── STABILITY CARDS ────────────────────────────────────────────────────────── */
.stability-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 12px;
}

.stability-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}

.stability-card:hover { border-color: var(--border-2); }

.stability-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.stability-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
  flex: 1;
}

.stability-fields {}

.sf-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 100px;
}

/* ─── BREAK MAP ──────────────────────────────────────────────────────────────── */
.compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.compat-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
}

.compat-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
}

.div-pair-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.div-pair-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.div-pair-id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.06em;
}

.div-pair-body {}

.div-pair-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.div-pair-col {
  flex: 1;
  min-width: 160px;
}

/* Quality checklist */
.quality-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.quality-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 11px;
  color: var(--text-1);
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid var(--border);
}

.quality-ok { background: rgba(0, 200, 83, 0.04); border-color: rgba(0, 200, 83, 0.15); }
.quality-warn { background: rgba(255, 170, 0, 0.04); border-color: rgba(255, 170, 0, 0.2); }

.quality-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  margin-top: 1px;
}

.quality-ok .quality-status { color: var(--pass-green); }
.quality-warn .quality-status { color: var(--amber); }

/* ─── FEASIBILITY TAB ────────────────────────────────────────────────────────── */
.target-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.target-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 16px;
}

.target-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.target-id {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.04em;
}

.target-fields {}

.tf-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
}

.next-action-card {
  background: rgba(0, 168, 255, 0.04);
  border: 1px solid var(--blue-dim);
  border-radius: 3px;
  padding: 18px 20px;
}

.next-action-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.next-action-id {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  text-shadow: 0 0 20px rgba(0, 168, 255, 0.3);
}

/* ─── HAZARD TAB ─────────────────────────────────────────────────────────────── */
.pass-notice {
  font-size: 11px;
  color: var(--pass-green);
  padding: 12px 16px;
  background: rgba(0, 200, 83, 0.06);
  border: 1px solid rgba(0, 200, 83, 0.2);
  border-radius: 2px;
  margin-bottom: 16px;
}

.export-gate-panel {
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 24px;
}

.export-blocked {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fail-red);
  padding: 16px;
  background: rgba(255, 61, 61, 0.06);
  border: 1px solid rgba(255, 61, 61, 0.25);
  border-radius: 2px;
}

.export-lock-icon {
  font-size: 22px;
}

.export-btn {
  height: 40px;
  padding: 0 28px;
  background: rgba(0, 200, 83, 0.1);
  border: 1px solid rgba(0, 200, 83, 0.4);
  color: var(--pass-green);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 0 20px rgba(0, 200, 83, 0.15);
}

.export-btn:hover {
  background: rgba(0, 200, 83, 0.18);
  box-shadow: 0 0 28px rgba(0, 200, 83, 0.3);
}

/* ─── LIVE BADGE ─────────────────────────────────────────────────────────────── */
.live-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green);
  background: rgba(0,204,136,0.08);
  border: 1px solid rgba(0,204,136,0.3);
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* ─── RESPONSIVE (extended) ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .identity-grid { grid-template-columns: 1fr; }
  .id-field-wide { grid-column: 1; }
  .rail-detail-grid { grid-template-columns: 1fr; }
  .stability-cards-grid { grid-template-columns: 1fr; }
  .compat-grid { grid-template-columns: 1fr; }
  .tf-row { flex-direction: column; }
  .sf-row { flex-direction: column; }
  .archetype-row { flex-direction: column; }
}

/* ═══ IVr DYNAMIC LAYER STYLES ═══════════════════════════════════════════════ */

.ivr-dynamic-layer {
  margin-bottom: 8px;
}

.ivr-context-banner {
  background: var(--surface-1);
  border: 1px solid var(--blue-dim);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 4px;
}

/* v6.11: Collapsible IVr boxes */
.ivr-box-collapsed .ivr-box-body {
  display: none;
}

.ivr-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 12px 0 4px 0;
  background: var(--surface-1);
  border-radius: 2px;
}

/* v6.9.5: Section separator rows in consolidated IVr table */
tr.ivr-section-sep td {
  background: transparent;
  border-bottom: none;
}
tr.ivr-section-sep .ivr-section-header {
  margin: 4px 0 0 0;
}
tr.ivr-section-sep:first-child .ivr-section-header {
  margin-top: 0;
}

.ivr-section-role {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--mono);
  min-width: 26px;
  text-align: center;
}

.ivr-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ivr-section-rationale {
  font-size: 9px;
  color: var(--text-3);
  margin-left: auto;
  max-width: 50%;
  text-align: right;
}

.ivr-src-badge {
  display: inline-block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}

.ivr-src-badge.as-reported {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.ivr-src-badge.ratio {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.ivr-src-badge.metric {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.ivr-src-badge.derived {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-3);
  border: 1px solid var(--border-1);
}

.ivr-lens-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--blue-dim);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: default;
  transition: border-color 0.15s;
}

.ivr-lens-chip:hover {
  border-color: var(--blue);
}

/* Override Editor (v6.3.0) */
.override-row:hover {
  background: var(--surface-2);
}
.override-row td {
  padding: 6px 8px;
  vertical-align: middle;
}
.override-row-cb {
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.override-bucket-sel {
  cursor: pointer;
}
.override-bucket-sel:focus {
  outline: 1px solid var(--blue);
}
#override-editor {
  transition: border-color 0.2s;
}
#override-editor:hover {
  border-color: var(--blue-dim);
}

/* ═══ REFORMULATION WORKBENCH ═══════════════════════════════════════════════ */
.wb-container {
  border: 1px solid var(--border-2);
  border-radius: 6px;
  overflow: clip;          /* v11.x: clip preserves border-radius but does NOT create a scroll context, so .wb-header sticky works */
  margin-top: 12px;
}
.wb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  /* v11.x: Stick to top of scrolling edit column */
  position: sticky;
  top: 0;
  z-index: 20;
}
.wb-header:hover { background: var(--bg-4); }
.wb-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue, #00a8ff);
  font-family: inherit;
  line-height: 1;
}
.wb-chevron {
  font-size: 9px;
  color: var(--text-3);
  transition: transform 0.2s;
}
.wb-chevron.open { transform: rotate(90deg); }
.wb-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.wb-badge[onclick] {
  cursor: pointer;
}
.wb-badge[onclick]:hover {
  filter: brightness(1.3);
}

/* Temporary highlight flash on bucket groups when navigated via badge click */
/* Card-level highlight when navigated via badge chip click — color matches badge */
.wb-card.wb-flash-changes {
  background: rgba(255, 170, 0, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 170, 0, 0.4);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.wb-card.wb-flash-archetype {
  background: rgba(0, 168, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 168, 255, 0.4);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.wb-card.wb-flash-custom {
  background: rgba(46, 204, 113, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.4);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.wb-card.wb-flash-fade {
  background: transparent !important;
  box-shadow: none !important;
  transition: background 1.8s ease, box-shadow 1.8s ease;
}
.wb-badge-changes {
  background: rgba(255, 170, 0, 0.12);
  color: var(--amber);
}
.wb-body { padding: 12px; }

/* Impact bar */
.wb-impact {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.wb-impact-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-2);
}
.wb-impact-label {
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.wb-impact-delta {
  font-weight: 700;
  font-family: var(--mono);
}
.wb-impact-delta.pos { color: var(--green); }
.wb-impact-delta.neg { color: var(--red); }
.wb-impact-delta.zero { color: var(--text-3); }

/* Bucket groups */
.wb-bucket-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.wb-bucket-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
}
.wb-bucket-header:hover { filter: brightness(1.15); }
.wb-bucket-header .wb-chevron { font-size: 8px; }
.wb-bucket-count {
  font-size: 8px;
  font-weight: 600;
  opacity: 0.7;
}
.wb-bkt-operating  { background: rgba(0, 204, 136, 0.08); color: var(--green); border-bottom: 1px solid rgba(0, 204, 136, 0.15); }
.wb-bkt-financing  { background: rgba(0, 168, 255, 0.08); color: var(--blue); border-bottom: 1px solid rgba(0, 168, 255, 0.15); }
.wb-bkt-tax        { background: rgba(255, 170, 0, 0.08); color: var(--amber); border-bottom: 1px solid rgba(255, 170, 0, 0.15); }
.wb-bkt-unusual       { background: rgba(255, 170, 0, 0.06); color: var(--amber); border-bottom: 1px solid rgba(255, 170, 0, 0.12); }
.wb-bkt-extraordinary { background: rgba(255, 51, 68, 0.06); color: var(--red); border-bottom: 1px solid rgba(255, 51, 68, 0.12); }
.wb-bkt-equity     { background: rgba(180, 120, 255, 0.08); color: #b478ff; border-bottom: 1px solid rgba(180, 120, 255, 0.15); }
.wb-bkt-residual   { background: rgba(255, 51, 68, 0.08); color: var(--red); border-bottom: 1px solid rgba(255, 51, 68, 0.15); }

/* Item cards */
.wb-items { padding: 4px 6px; }
.wb-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 3px;
  transition: background 0.12s;
}
.wb-card:hover { background: var(--bg-4); }
.wb-card-modified {
  border-left: 2px solid var(--amber);
  background: rgba(255, 170, 0, 0.03);
}
.wb-card-archetype {
  border-left: 2px solid var(--blue);
  background: rgba(0, 168, 255, 0.03);
}
.wb-card-name {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-card-anchor {
  font-size: 8px;
  color: var(--text-3);
  font-family: var(--mono);
  flex-shrink: 1;
  max-width: 35%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-card-conf {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding: 1px 4px;
  border-radius: 2px;
}
.wb-conf-HIGH { color: var(--green); background: rgba(0, 204, 136, 0.1); }
.wb-conf-MED  { color: var(--amber); background: rgba(255, 170, 0, 0.1); }
.wb-conf-LOW  { color: var(--red); background: rgba(255, 51, 68, 0.1); }
.wb-card-bucket-sel {
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.wb-card-bucket-sel:focus { border-color: var(--blue); outline: none; }
.wb-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.wb-ask-btn {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all 0.12s;
}
.wb-ask-btn:hover {
  border-color: var(--blue-dim);
  color: var(--blue);
  background: rgba(0, 168, 255, 0.06);
}
.wb-ask-btn.loading {
  opacity: 0.5;
  pointer-events: none;
}
.wb-acct-ref-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--blue, #00a8ff);
  background: rgba(0, 168, 255, 0.08);
  border: 1px solid rgba(0, 168, 255, 0.2);
  padding: 0 3px;
  border-radius: 2px;
  margin-left: 3px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  vertical-align: middle;
  line-height: 1;
}
.wb-acct-ref-badge:hover {
  background: rgba(0, 168, 255, 0.18);
  border-color: rgba(0, 168, 255, 0.5);
}

.wb-footnote-icon {
  font-size: 9px;
  color: var(--amber);
  cursor: help;
}
.wb-footnote-clickable {
  cursor: pointer;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.3);
  padding: 1px 4px;
  border-radius: 2px;
  transition: background 0.2s;
}
.wb-footnote-clickable:hover {
  background: rgba(255, 170, 0, 0.25);
  text-decoration: underline;
}
.wb-rule-tip {
  display: none;
  position: absolute;
  z-index: 200;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  font-size: 9px;
  color: var(--text-2);
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  pointer-events: none;
}
.wb-card:hover .wb-rule-tip { display: block; }
.wb-llm-result {
  margin: 4px 8px 8px 18px;
  padding: 8px 10px;
  background: var(--bg-4);
  border: 1px solid var(--border-2);
  border-left: 2px solid var(--blue);
  border-radius: 3px;
  font-size: 9px;
  color: var(--text-2);
  line-height: 1.5;
}
.wb-llm-result b { color: var(--text-1); }
.wb-llm-accept {
  font-size: 8px;
  padding: 2px 8px;
  margin-top: 6px;
  border-radius: 3px;
  border: 1px solid var(--green);
  background: rgba(0, 204, 136, 0.1);
  color: var(--green);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.wb-llm-accept:hover { background: rgba(0, 204, 136, 0.2); }
.wb-llm-dismiss {
  font-size: 8px;
  padding: 2px 8px;
  margin-top: 6px;
  margin-left: 4px;
  border-radius: 3px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text-3);
  cursor: pointer;
}

/* Undo bar */
.wb-undo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  background: rgba(255, 170, 0, 0.06);
  border: 1px solid rgba(255, 170, 0, 0.2);
  border-radius: 4px;
}
.wb-undo-btn {
  font-size: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--amber);
  background: rgba(255, 170, 0, 0.1);
  color: var(--amber);
  cursor: pointer;
  font-weight: 700;
}
.wb-undo-btn:hover { background: rgba(255, 170, 0, 0.2); }
.wb-reset-btn {
  font-size: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--red);
  background: rgba(255, 51, 68, 0.06);
  color: var(--red);
  cursor: pointer;
  font-weight: 700;
  margin-left: auto;
}
.wb-reset-btn:hover { background: rgba(255, 51, 68, 0.15); }

/* Search filter */
.wb-filter {
  padding: 4px 10px;
  margin-bottom: 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 10px;
  font-family: var(--sans);
  width: 100%;
  box-sizing: border-box;
}
.wb-filter:focus { border-color: var(--blue); outline: none; }
.wb-filter::placeholder { color: var(--text-3); }

.wb-stmt-chip {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.wb-stmt-IS { background: rgba(0, 168, 255, 0.1); color: var(--blue); }
.wb-stmt-BS { background: rgba(180, 120, 255, 0.1); color: #b478ff; }

/* ═══ PHASE 1: INTERACTIVE REFORMULATION EDITOR ═══════════════════════════ */

/* Custom item cards */
.wb-card-custom {
  border-left: 2px solid var(--green);
  background: rgba(46, 204, 113, 0.04);
}
.wb-custom-badge {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--green);
  color: #000;
  border-radius: 2px;
  padding: 0 3px;
  flex-shrink: 0;
}
.wb-conf-USER { color: var(--green); background: rgba(46, 204, 113, 0.1); }

.wb-edit-custom-btn, .wb-delete-custom-btn {
  font-size: 7px;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.wb-edit-custom-btn:hover { border-color: var(--blue); color: var(--blue); }
.wb-delete-custom-btn:hover { border-color: var(--red); color: var(--red); }

/* Add item panel */
.wb-add-toggle { padding: 4px 0 6px; }
.wb-add-toggle-btn {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px dashed var(--green);
  background: rgba(46, 204, 113, 0.05);
  color: var(--green);
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.wb-add-toggle-btn:hover {
  background: rgba(46, 204, 113, 0.12);
  border-style: solid;
}

.wb-add-panel {
  background: var(--bg-2);
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}
.wb-add-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(46, 204, 113, 0.08);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
}
.wb-add-close-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 12px;
}
.wb-add-form { padding: 8px 10px; }
.wb-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.wb-add-row label {
  font-size: 9px;
  color: var(--text-3);
  min-width: 80px;
  flex-shrink: 0;
}
.wb-add-row input, .wb-add-row select {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-1);
  font-size: 9px;
  padding: 4px 6px;
  font-family: var(--sans);
}
.wb-add-row input:focus, .wb-add-row select:focus {
  border-color: var(--green);
  outline: none;
}
.wb-add-values-section { align-items: flex-start; }
.wb-add-values-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}
.wb-add-value-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wb-add-value-row label {
  font-size: 8px;
  min-width: auto;
  color: var(--text-3);
}
.wb-add-value-row input {
  width: 110px;
  font-family: var(--mono);
  font-size: 9px;
}
.wb-add-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: flex-end;
}
.wb-add-submit-btn {
  font-size: 9px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 3px;
  border: 1px solid var(--green);
  background: rgba(46, 204, 113, 0.12);
  color: var(--green);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.wb-add-submit-btn:hover { background: rgba(46, 204, 113, 0.22); }
.wb-add-cancel-btn {
  font-size: 9px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
}

/* Edit modal */
.wb-edit-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wb-edit-modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 380px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.wb-edit-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
}
.wb-edit-modal-header button {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
}

/* Lock panel */
.wb-lock-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-top: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.wb-lock-info {
  font-size: 9px;
}
.wb-lock-btn {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 3px;
  border: 1px solid var(--green);
  background: rgba(46, 204, 113, 0.12);
  color: var(--green);
  cursor: pointer;
}
.wb-lock-btn:hover { background: rgba(46, 204, 113, 0.22); }
.wb-unlock-btn {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 3px;
  border: 1px solid var(--amber);
  background: rgba(255, 170, 0, 0.1);
  color: var(--amber);
  cursor: pointer;
}
.wb-unlock-btn:hover { background: rgba(255, 170, 0, 0.2); }

/* ── Multi-Column Layout (Solo Mode) ──────────────────────────────────── */
/* ─── Layout Picker (v10 freeform) ────────────────────────────────────────── */
.wb-layout-picker {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-1);
  flex-wrap: wrap;
}
.wb-picker-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.06em;
  margin-right: 2px;
  flex-shrink: 0;
}
.wb-picker-sep {
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}
/* Template buttons — now show rows of col bars */
.wb-layout-btn {
  width: auto;
  min-width: 18px;
  height: auto;
  min-height: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: stretch;
  transition: border-color 0.15s, background 0.15s;
}
.wb-lb-row {
  display: flex;
  gap: 1px;
  min-height: 6px;
}
.wb-lb-col {
  background: var(--text-3);
  border-radius: 1px;
  opacity: 0.35;
  min-width: 4px;
  min-height: 5px;
}
.wb-layout-btn:hover .wb-lb-col {
  background: var(--amber);
  opacity: 0.7;
}
.wb-layout-btn:hover {
  border-color: var(--amber);
  background: rgba(255, 193, 7, 0.08);
}
/* + ROW button */
.wb-add-row-btn {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
}
.wb-add-row-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255, 193, 7, 0.06);
}
/* Dashboard Builder toggle */
.wb-dashboard-btn {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.2s;
}
.wb-dashboard-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(46, 204, 113, 0.08);
}
.wb-dashboard-btn.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(46, 204, 113, 0.15);
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.15);
}
.pane-toggle.dashboard-btn {
  border-color: var(--border);
  color: var(--text-3);
}
.pane-toggle.dashboard-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.pane-toggle.dashboard-btn.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(46, 204, 113, 0.12);
}
/* STANDARD toggle in tabnav — amber/gold active state */
.pane-toggle.standard-btn {
  border-color: var(--border);
  color: var(--text-3);
}
.pane-toggle.standard-btn:hover {
  border-color: var(--amber, #f0b429);
  color: var(--amber, #f0b429);
}
.pane-toggle.standard-btn.active {
  border-color: var(--amber, #f0b429);
  color: var(--amber, #f0b429);
  background: rgba(240, 180, 41, 0.12);
}
/* v8: USER GENERATED toggle — purple active state (saved investigation loaded) */
.pane-toggle.user-gen-btn {
  border-color: var(--border);
  color: var(--text-3);
  font-size: 9px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pane-toggle.user-gen-btn:hover {
  border-color: rgb(168, 85, 247);
  color: rgb(168, 85, 247);
}
.pane-toggle.user-gen-btn.active {
  border-color: rgb(168, 85, 247);
  color: rgb(168, 85, 247);
  background: rgba(168, 85, 247, 0.12);
}
/* (Preset pills, chips, and save button CSS removed) */
/* Lock button */
.wb-layout-lock-btn {
  margin-left: auto;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-3);
  transition: all 0.15s;
  flex-shrink: 0;
}
.wb-layout-lock-btn.locked {
  border-color: var(--green, #00cc88);
  background: rgba(46, 204, 113, 0.12);
  color: var(--green, #00cc88);
}
.wb-layout-lock-btn:hover { border-color: var(--amber); color: var(--amber); }

/* ─── Freeform Grid (v10) ────────────────────────────────────────────────── */
.wb-freeform-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.wb-frow {
  display: flex;
  flex-direction: column;
  min-height: 80px;
  position: relative;
  transition: outline 0.15s, background 0.15s;
}

/* v15: Row edge resize handles — all four sides */
.wb-row-edge-handle {
  position: absolute;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.wb-row-edge-handle:hover {
  opacity: 1;
}
.wb-frow:hover > .wb-row-edge-handle {
  opacity: 0.35;
}
.wb-frow:hover > .wb-row-edge-handle:hover {
  opacity: 1;
}
/* Top edge */
.wb-row-edge-top {
  top: 0; left: 0; right: 0;
  height: 5px;
  cursor: row-resize;
}
.wb-row-edge-top:hover {
  background: linear-gradient(to bottom, var(--amber), transparent);
}
/* Bottom edge */
.wb-row-edge-bottom {
  bottom: 0; left: 0; right: 0;
  height: 5px;
  cursor: row-resize;
}
.wb-row-edge-bottom:hover {
  background: linear-gradient(to top, var(--amber), transparent);
}
/* Left edge */
.wb-row-edge-left {
  top: 0; bottom: 0; left: 0;
  width: 5px;
  cursor: col-resize;
}
.wb-row-edge-left:hover {
  background: linear-gradient(to right, var(--amber), transparent);
}
/* Right edge */
.wb-row-edge-right {
  top: 0; bottom: 0; right: 0;
  width: 5px;
  cursor: col-resize;
}
.wb-row-edge-right:hover {
  background: linear-gradient(to left, var(--amber), transparent);
}

/* v13: Selected row highlight */
.wb-frow-selected {
  outline: 2px solid rgba(46, 204, 113, 0.35);
  outline-offset: -1px;
  background: rgba(46, 204, 113, 0.02);
}
.wb-frow-selected .wb-frow-bar {
  background: rgba(46, 204, 113, 0.08);
  border-bottom-color: rgba(46, 204, 113, 0.2);
}
.wb-frow-selected .wb-frow-bar-label {
  color: var(--green);
}
.wb-frow-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  transition: background 0.15s;
}
.wb-frow-bar-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-right: auto;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}
.wb-frow-bar-label:hover {
  color: var(--green);
  background: rgba(46, 204, 113, 0.08);
}
.wb-frow-bar-btn {
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 600;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
}
.wb-frow-bar-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255, 193, 7, 0.06);
}
.wb-frow-del:hover {
  border-color: var(--red, #ff4444);
  color: var(--red, #ff4444);
  background: rgba(255, 68, 68, 0.06);
}

/* ═══ v16.3: Feature 1 — Row Minimize ═══ */
.wb-frow-collapse-btn {
  font-size: 7px !important;
  padding: 1px 3px !important;
  min-width: 14px;
  text-align: center;
}
.wb-frow-minimized > .wb-frow-cells {
  display: none !important;
}
.wb-frow-minimized > .wb-row-edge-handle,
.wb-frow-minimized > .wb-cell-resize-handle {
  display: none !important;
}
#dashboard-editor-overlay.db-edit-active .wb-frow.wb-frow-minimized {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
.wb-frow-minimized .wb-frow-bar {
  border-bottom: 1px dashed var(--border);
  opacity: 0.7;
}

/* ═══ v16.3: Feature 4 — Maximize ═══ */
.wb-has-maximized > .wb-frow { display: none; }
.wb-has-maximized > .wb-frow:has(.wb-maximized) { display: flex; }
/* All maximized elements need position:relative for restore button */
.wb-maximized { position: relative; }
/* Row maximized — row itself is the maximized element */
.wb-frow.wb-maximized { display: flex !important; flex: 1 1 100% !important; }
.wb-has-maximized > .wb-frow:has(> .wb-frow-cells .wb-maximized) { display: flex; }
/* Cell maximized */
.wb-has-maximized .wb-frow-cells > .wb-fcell { display: none; }
.wb-has-maximized .wb-frow-cells > .wb-fcell.wb-maximized { display: flex !important; flex: 1 1 100% !important; }
.wb-has-maximized .wb-frow-cells:has(.wb-maximized) > .wb-fcell:not(.wb-maximized) { display: none; }
/* Sub-cell maximized */
.wb-has-maximized .wb-subcell { display: none; }
.wb-has-maximized .wb-subcell.wb-maximized { display: flex !important; flex: 1 1 100% !important; }
.wb-has-maximized .wb-subcells:has(.wb-maximized) > .wb-subcell:not(.wb-maximized) { display: none; }
.wb-has-maximized .wb-subrow:has(.wb-maximized) { flex: 1 1 100% !important; }
.wb-has-maximized .wb-subcell-container:has(.wb-maximized) > .wb-subrow:not(:has(.wb-maximized)) { display: none; }
/* Hide resize handles + row bars when maximized */
.wb-has-maximized .wb-cell-resize-handle,
.wb-has-maximized .wb-subcell-resize-handle,
.wb-has-maximized .wb-subrow-resize-handle,
.wb-has-maximized .wb-row-edge-handle { display: none; }
/* Restore button */
.wb-maximize-restore-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 20;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid var(--blue);
  border-radius: 3px;
  color: var(--blue);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.04em;
}
.wb-maximize-restore-btn:hover {
  background: rgba(0, 168, 255, 0.3);
  color: var(--text-1);
}

/* v15: Insert mode selector — REMOVED (replaced by per-cell direction in v8.4) */
.wb-frow-cells {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex: 1;
  min-height: 0;
}
/* v13: Horizontal cell orientation — cells stack top-to-bottom instead of side-by-side */
.wb-frow-cells-horiz {
  flex-direction: column;
}
.wb-frow-cells-horiz > .wb-fcell {
  min-height: 100px;
  min-width: 100%;
  border-right: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wb-frow-cells-horiz > .wb-fcell:last-child { border-bottom: none; }
/* Cell resize handles become horizontal bars in horiz mode */
.wb-frow-cells-horiz > .wb-cell-resize-handle {
  width: 100%;
  height: 6px;
  min-height: 6px;
  cursor: row-resize;
}
.wb-frow-cells-horiz > .wb-cell-resize-handle::after {
  width: 24px;
  height: 2px;
}
.wb-fcell {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 60px;
  min-width: 60px;
  padding: 2px;
  transition: outline 0.15s, background 0.15s;
  border-right: 1px solid rgba(255,255,255,0.03);
}
.wb-fcell:last-child { border-right: none; }
.wb-fcell-drop-target {
  outline: 2px dashed var(--amber);
  outline-offset: -2px;
  background: rgba(255, 193, 7, 0.04);
}
/* v8.2: Cell selection highlight */
.wb-fcell-selected {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.04);
}
/* v8.4: Cell toolbar */
.wb-cell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 4px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  min-height: 18px;
  flex-shrink: 0;
}
.wb-cell-label {
  font-size: 7px;
  font-family: var(--mono);
  color: var(--text-3);
  opacity: 0.6;
  letter-spacing: 0.5px;
}
.wb-cell-bar-controls {
  display: flex;
  gap: 2px;
  align-items: center;
}
.wb-cell-bar-btn {
  font-size: 7px;
  font-family: var(--mono);
  color: var(--text-3);
  background: none;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  padding: 1px 4px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  line-height: 1.2;
}
.wb-cell-bar-btn:hover {
  opacity: 1;
  color: var(--blue);
  border-color: var(--blue);
}
.wb-cell-dir-active {
  opacity: 1;
  color: var(--cyan, #06b6d4);
  border-color: var(--cyan, #06b6d4);
  background: rgba(6, 182, 212, 0.1);
}
.wb-cell-bar-btn-danger:hover {
  opacity: 1;
  color: var(--red);
  border-color: var(--red);
  background: rgba(239, 68, 68, 0.1);
}
/* v8.4: Cell direction — side-by-side mode */
.wb-fcell-row-dir {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.wb-fcell-row-dir > .wb-cell-bar {
  width: 100%;
  flex-basis: 100%;
}
.wb-fcell-row-dir > .wb-section-draggable {
  flex: 1 1 0;
  min-width: 120px;
}
.wb-fcell-row-dir > .wb-fcell-empty {
  flex: 1 1 100%;
}
/* v16.3: Sub-container must span full width inside horizontal cells */
.wb-fcell-row-dir > .wb-subcell-container {
  flex: 1 1 100%;
  min-height: 0;
}
/* Hide cell bar in view mode */
#dashboard-editor-overlay:not(.db-edit-active) .wb-cell-bar { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-fcell-selected { outline: none; background: transparent; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-fcell-row-dir { flex-wrap: nowrap; }

/* v8.3: Nested sub-rows within cells */
.wb-subcell-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}
.wb-subrow {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 40px;
}
.wb-subrow:last-child { border-bottom: none; }
.wb-subrow-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 4px;
  background: rgba(100, 140, 255, 0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  min-height: 16px;
  flex-shrink: 0;
}
.wb-subrow-label {
  font-size: 6.5px;
  font-family: var(--mono);
  color: var(--blue);
  opacity: 0.7;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.wb-subrow-controls {
  display: flex;
  gap: 3px;
  align-items: center;
}
.wb-subrow-btn {
  font-size: 6.5px;
  font-family: var(--mono);
  padding: 1px 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wb-subrow-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: var(--text-1);
}
.wb-subrow-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--red);
}
.wb-subcells {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: 0;
}
.wb-subcell {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 40px;
  min-width: 40px;
  padding: 2px;
  border-right: 1px solid rgba(255,255,255,0.04);
  transition: outline 0.15s, background 0.15s;
}
.wb-subcell:last-child { border-right: none; }
.wb-subcell-selected {
  outline: 2px solid var(--cyan, #06b6d4);
  outline-offset: -2px;
  background: rgba(6, 182, 212, 0.05);
}
.wb-subcell-drop-target {
  outline: 2px dashed var(--amber);
  outline-offset: -2px;
  background: rgba(255, 193, 7, 0.04);
}
.wb-subcell-empty {
  min-height: 40px;
  font-size: 7px;
}
/* v16.3: Sub-cell direction toolbar (mini) */
.wb-subcell-bar {
  display: flex;
  gap: 1px;
  padding: 1px 2px;
  background: rgba(100, 140, 255, 0.03);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-shrink: 0;
  justify-content: flex-end;
}
.wb-subcell-dir-btn {
  font-size: 7px;
  padding: 0px 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1px;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1.4;
}
.wb-subcell-dir-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--text-1);
}
.wb-subcell-dir-active {
  background: rgba(0, 168, 255, 0.15);
  border-color: var(--blue);
  color: var(--blue);
}
/* v16.3: Sub-cell row direction (sections side-by-side) */
.wb-subcell-row-dir {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.wb-subcell-row-dir > .wb-subcell-bar {
  width: 100%;
  flex-basis: 100%;
}
.wb-subcell-row-dir > .wb-section-draggable {
  flex: 1 1 0;
  min-width: 100px;
}
.wb-subcell-row-dir > .wb-fcell-empty,
.wb-subcell-row-dir > .wb-subcell-empty {
  flex: 1 1 100%;
}
/* v16.3: Ensure sub-cell row direction overrides column default in edit mode */
#dashboard-editor-overlay.db-edit-active .wb-subcell.wb-subcell-row-dir {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* Hide sub-row bars, sub-cell bars, and selection in view mode */
#dashboard-editor-overlay:not(.db-edit-active) .wb-subrow-bar { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-subcell-bar { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-subcell-selected { outline: none; background: transparent; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-subcell-empty { display: none; }
.wb-fcell-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border: 2px dashed rgba(255,255,255,0.06);
  border-radius: 4px;
  color: var(--text-3);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.4;
  margin: 4px;
}

/* Resize handles between cells (vertical bars) */
.wb-cell-resize-handle {
  width: 6px;
  min-height: 100%;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
.wb-cell-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: var(--border);
  opacity: 0.4;
  transition: all 0.15s;
}
.wb-cell-resize-handle:hover::after {
  background: var(--amber);
  opacity: 1;
  height: 40px;
}

/* Resize handles between rows (horizontal bars) */
.wb-row-resize-handle {
  height: 6px;
  width: 100%;
  cursor: row-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
.wb-row-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 24px;
  border-radius: 1px;
  background: var(--border);
  opacity: 0.4;
  transition: all 0.15s;
}
.wb-row-resize-handle:hover::after {
  background: var(--amber);
  opacity: 1;
  width: 40px;
}

/* v16.3: Sub-cell resize handles (vertical bars between adjacent sub-cells) */
.wb-subcell-resize-handle {
  width: 6px;
  min-height: 100%;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
.wb-subcell-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--border);
  opacity: 0.3;
  transition: all 0.15s;
}
.wb-subcell-resize-handle:hover::after {
  background: var(--amber);
  opacity: 1;
  height: 32px;
}

/* v16.3: Sub-row resize handles (horizontal bars between adjacent sub-rows) */
.wb-subrow-resize-handle {
  height: 6px;
  width: 100%;
  cursor: row-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
.wb-subrow-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 18px;
  border-radius: 1px;
  background: var(--border);
  opacity: 0.3;
  transition: all 0.15s;
}
.wb-subrow-resize-handle:hover::after {
  background: var(--amber);
  opacity: 1;
  width: 32px;
}

/* Inter-tile drop zones — thin strips between tiles that expand on drag hover */
.wb-drop-zone {
  height: 4px;
  margin: 0 0 2px;
  border-radius: 3px;
  transition: height 0.12s, background 0.12s, margin 0.12s;
  flex-shrink: 0;
}
.wb-drop-zone.wb-dz-active {
  height: 18px;
  margin: 4px 0;
  background: rgba(255, 193, 7, 0.15);
  border: 2px dashed var(--amber);
  border-radius: 4px;
}

/* Section drag handle bar */
.wb-section-handle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  cursor: grab;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 4px 4px 0 0;
  user-select: none;
}
.wb-section-handle:active { cursor: grabbing; }
.wb-section-grip {
  font-size: 10px;
  color: var(--text-3);
  opacity: 0.5;
  transition: opacity 0.15s;
  line-height: 1;
}
.wb-section-handle:hover .wb-section-grip { opacity: 1; }
.wb-section-handle-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.wb-section-content { min-width: 0; }

/* Draggable section wrapper */
.wb-section-draggable {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 6px;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
  background: var(--bg-1);
}
.wb-section-draggable:hover {
  border-color: var(--amber);
}
.wb-section-draggable.wb-section-dragging {
  opacity: 0.4;
  border-color: var(--amber);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Hidden section — collapsed to just the handle bar */
.wb-section-draggable.wb-section-hidden {
  opacity: 0.5;
  border-style: dashed;
}
.wb-section-draggable.wb-section-hidden .wb-section-handle {
  border-bottom: none;
  border-radius: 4px;
}

/* Section hide/show toggle button */
.wb-section-hide-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.wb-section-hide-btn:hover { opacity: 1; }
.wb-section-hidden .wb-section-hide-btn { opacity: 0.7; }

/* v16.3: Lock button — pins section in place */
.wb-section-lock-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
}
.wb-section-lock-btn:hover { opacity: 1; }
.wb-section-lock-active {
  opacity: 0.9;
  filter: drop-shadow(0 0 2px rgba(0, 168, 255, 0.5));
}

/* v16.3: Locked section — content frozen, no scroll, fixed size */
.wb-section-locked {
  border-color: rgba(0, 168, 255, 0.3) !important;
  box-shadow: 0 0 0 1px rgba(0, 168, 255, 0.12) inset;
}
.wb-section-locked .wb-section-content {
  overflow: hidden !important;
}
/* In view mode: locked section keeps its size, doesn't flex-grow */
#dashboard-editor-overlay:not(.db-edit-active) .wb-section-draggable.wb-section-locked {
  flex: 0 0 auto;
}
/* Locked section handle: subtle blue accent */
.wb-section-locked .wb-section-handle {
  border-bottom-color: rgba(0, 168, 255, 0.15);
}

/* Per-tile multi-directional resize handles */
.wb-section-draggable { position: relative; }
.wb-section-draggable.wb-resizing { user-select: none; }

/* Shared base for all resize handles */
.wb-tile-rh {
  position: absolute;
  z-index: 3;
  background: transparent;
}
.wb-tile-rh:hover { background: rgba(255,193,7,0.25); }
.wb-resizing .wb-tile-rh { background: transparent; }

/* Edge handles */
.wb-resize-n  { top: 0; left: 6px; right: 6px; height: 4px; cursor: ns-resize; border-radius: 4px 4px 0 0; }
.wb-resize-s  { bottom: 0; left: 6px; right: 6px; height: 4px; cursor: ns-resize; border-radius: 0 0 4px 4px; }
.wb-resize-e  { top: 6px; right: 0; bottom: 6px; width: 4px; cursor: ew-resize; border-radius: 0 4px 4px 0; }
.wb-resize-w  { top: 6px; left: 0; bottom: 6px; width: 4px; cursor: ew-resize; border-radius: 4px 0 0 4px; }

/* Corner handles */
.wb-resize-ne { top: 0; right: 0; width: 8px; height: 8px; cursor: nesw-resize; border-radius: 0 4px 0 0; }
.wb-resize-nw { top: 0; left: 0; width: 8px; height: 8px; cursor: nwse-resize; border-radius: 4px 0 0 0; }
.wb-resize-se { bottom: 0; right: 0; width: 8px; height: 8px; cursor: nwse-resize; border-radius: 0 0 4px 0; }
.wb-resize-sw { bottom: 0; left: 0; width: 8px; height: 8px; cursor: nesw-resize; border-radius: 0 0 0 4px; }

.wb-section-content {
  overflow-y: auto;
  /* height set by JS via resize; default auto */
}

/* (Preset slot CSS removed) */

/* ─── Embedded PDF inside Annual Report Reader ─────────────────────────────── */
.focus-reader-pdf-area {
  min-height: 300px;
  height: calc(100vh - 260px);
  max-height: 800px;
  background: #333;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin: 4px 0 2px 0;
  overflow: hidden;
  position: relative;
}
.focus-reader-pdf-area iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: #444;
}

/* Title bar inside reader — compact row */
.focus-reader-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  flex-wrap: wrap;
}

/* View mode toggle (PDF | TEXT | SPLIT) */
.focus-reader-view-toggle {
  display: flex;
  gap: 0;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.focus-reader-vt-btn {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--mono);
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-3);
  transition: background 0.15s, color 0.15s;
}
.focus-reader-vt-btn:last-child { border-right: none; }
.focus-reader-vt-btn:hover { background: var(--bg-4); color: var(--text-1); }
.focus-reader-vt-btn.active {
  background: var(--amber);
  color: var(--bg-0);
}

/* Page reference badge */
.focus-reader-page-ref {
  font-size: 8px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--blue);
  padding: 2px 7px;
  border: 1px solid rgba(0,168,255,0.3);
  border-radius: 3px;
  background: rgba(0,168,255,0.08);
  letter-spacing: 0.03em;
}

/* ── PDF Zoom controls ── */
.pdf-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.pdf-zoom-btn {
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  transition: background 0.12s, color 0.12s;
  line-height: 1.2;
}
.pdf-zoom-btn:last-child { border-right: none; }
.pdf-zoom-btn:hover { background: var(--bg-4); color: var(--text-0); }
.pdf-zoom-btn.pdf-zoom-fit {
  font-size: 7px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
}
.pdf-zoom-display {
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text-1);
  background: var(--bg-2);
  min-width: 32px;
  text-align: center;
  border-right: 1px solid var(--border);
  user-select: none;
}

/* ── Per-section zoom bars (compact overlay in each pane) ── */
.section-zoom-bar {
  display: flex;
  align-items: center;
  gap: 0;
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(6px);
  opacity: 0.35;
  transition: opacity 0.2s;
}
.section-zoom-bar:hover { opacity: 1; }
.sz-btn {
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  transition: background 0.12s, color 0.12s;
  line-height: 1.2;
}
.sz-btn:last-child { border-right: none; }
.sz-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-0); }
.sz-fit { font-size: 7px; letter-spacing: 0.04em; }
.sz-display {
  padding: 2px 5px;
  font-size: 7px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text-1);
  min-width: 28px;
  text-align: center;
  border-right: 1px solid var(--border);
  user-select: none;
}
/* Parents need position:relative for absolute overlay */
#focus-reader-text-area { position: relative; }

.ivr-pdf-viewer-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  color: var(--text-3);
  font-size: 10px;
  font-family: var(--mono);
  text-align: center;
  padding: 20px;
}

/* PDF proposal banner */
.wb-pdf-proposal-banner {
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(46, 204, 113, 0.06);
  border: 1px solid rgba(46, 204, 113, 0.15);
  border-radius: 4px;
}
.wb-pdf-proposals { padding: 2px 0; }
.wb-pdf-proposal-card {
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.wb-pdf-proposal-card:hover { border-color: var(--green); }

/* ── PDF Patches Section ───────────────────────────────────────────────── */
.wb-pdf-patches-section {
  border: 1px solid rgba(255, 170, 0, 0.2);
  border-radius: 4px;
  margin-bottom: 8px;
  background: rgba(255, 170, 0, 0.02);
}
.wb-pdf-patches-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}
.wb-pdf-patches-header:hover { background: rgba(255, 170, 0, 0.05); }
.wb-pdf-patches-toggle { font-size: 9px; color: var(--amber); width: 10px; }
.wb-pdf-patches-body { padding: 0 4px 6px 4px; }

/* ── Disclosure Events section (matches PDF Patches pattern) ── */
.wb-disclosure-events-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}
.wb-disclosure-events-header:hover { background: rgba(0, 168, 255, 0.05); }
.wb-disclosure-events-toggle { font-size: 9px; color: var(--blue, #00a8ff); width: 10px; }
.wb-disclosure-events-body { padding: 0 4px 6px 4px; }
.pdf-patches-group { margin-bottom: 4px; }
.pdf-patches-group-header {
  padding: 4px 8px;
  background: rgba(255, 170, 0, 0.06);
  font-size: 8px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.04em;
  border-radius: 2px;
  margin-bottom: 2px;
}
.pdf-patch-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 8px;
  margin: 3px 4px;
  transition: border-color 0.15s;
}
.pdf-patch-card:hover { border-color: var(--amber); }
.pdf-patch-accepted {
  background: rgba(46, 204, 113, 0.04);
  border-color: rgba(46, 204, 113, 0.2);
  padding: 4px 8px;
}
.pdf-patch-rejected {
  background: rgba(128, 128, 128, 0.04);
  border-color: var(--border);
  opacity: 0.6;
  padding: 4px 8px;
}
.pdf-patch-duplicate {
  opacity: 0.5;
  border-style: dashed;
}
.pdf-patch-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pdf-patch-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-1);
}
.pdf-patch-bucket, .pdf-patch-placement {
  font-size: 8px;
  color: var(--text-3);
  padding: 1px 4px;
  background: var(--bg-4);
  border-radius: 2px;
}
.pdf-patch-conf {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}
.pdf-patch-conf-high { background: rgba(46, 204, 113, 0.15); color: var(--green); }
.pdf-patch-conf-med { background: rgba(255, 170, 0, 0.15); color: var(--amber); }
.pdf-patch-conf-low { background: rgba(231, 76, 60, 0.15); color: var(--red); }

/* ── Lens relevance badges ── */
/* ── Decomposition sub-rows in reformulated tables ── */
.row-decomp-sub td { padding-top: 2px; padding-bottom: 2px; font-size: 10px; }
.row-decomp-sub:hover { background: rgba(0, 168, 255, 0.06) !important; }

.pdf-patch-lens-badge {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  margin-left: 3px;
}
.pdf-patch-lens-t1 { background: rgba(46, 204, 113, 0.25); color: var(--green); }
.pdf-patch-lens-t2 { background: rgba(52, 152, 219, 0.25); color: var(--blue, #3498db); }
.pdf-patch-lens-t3 { background: rgba(149, 165, 166, 0.2); color: var(--text-3); }

.pdf-patch-values {
  font-size: 8px;
  color: var(--text-2);
  font-family: var(--mono);
  margin-top: 3px;
}

/* ── Year-source colored value display ── */
.pdf-patch-values-colored {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pdf-patch-yr-val {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px 1px 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s;
}
.pdf-patch-yr-val:hover {
  background: rgba(255,255,255,0.07);
}
.doc-yr-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.doc-yr-label {
  font-size: 7px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.doc-yr-amount {
  font-size: 8px;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.doc-source-dot {
  transition: opacity 0.15s, transform 0.15s;
}
.doc-source-dot:hover {
  opacity: 1 !important;
  transform: scale(1.4);
}
.pdf-patch-doc-dots {
  margin-right: 1px;
}

/* ── Doc group dividers in tab bar ── */
.pdf-tab-doc-divider {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px 0 6px;
  margin: 0 1px;
  border-left: 2px solid rgba(255,255,255,0.12);
  font-size: 7px;
  color: var(--text-4, #666);
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Assign-mode amber warning bar ── */
.pdf-patch-edit-assign-bar {
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.35);
  border-radius: 3px;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: 8px;
  font-weight: 600;
  color: var(--amber, #f0b429);
  letter-spacing: 0.02em;
}

/* ── FROM NOTE auto-assign button ── */
.pdf-patch-from-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  margin-left: 4px;
  font-size: 7px;
  font-weight: 600;
  color: var(--blue, #3498db);
  background: rgba(52, 152, 219, 0.08);
  border: 1px solid rgba(52, 152, 219, 0.25);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.pdf-patch-from-note-btn:hover {
  background: rgba(52, 152, 219, 0.18);
  border-color: rgba(52, 152, 219, 0.45);
}
.pdf-patch-from-note-btn.prominent {
  background: rgba(52, 152, 219, 0.15);
  border-color: rgba(52, 152, 219, 0.5);
  color: #5dade2;
  animation: pulse-note-btn 1.5s ease-in-out 2;
}
@keyframes pulse-note-btn {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 6px rgba(52, 152, 219, 0.3); }
}

/* ── Year/doc switcher inside note panels ── */
.pdf-note-doc-switcher {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 3px;
}
.pdf-note-doc-btn {
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pdf-note-doc-btn:hover {
  background: rgba(255,255,255,0.06) !important;
}

.pdf-patch-rationale {
  font-size: 8px;
  color: var(--text-3);
  margin-top: 2px;
  font-style: italic;
}
.pdf-patch-conflicts {
  font-size: 8px;
  color: var(--amber);
  margin-top: 2px;
}
.pdf-patch-actions {
  margin-top: 5px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.pdf-patch-accept-btn, .pdf-patch-edit-btn, .pdf-patch-reject-btn {
  font-size: 8px;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.pdf-patch-accept-btn {
  background: rgba(46, 204, 113, 0.12);
  color: var(--green);
  border-color: rgba(46, 204, 113, 0.3);
}
.pdf-patch-accept-btn:hover { background: rgba(46, 204, 113, 0.2); }
.pdf-patch-edit-btn {
  background: rgba(52, 152, 219, 0.12);
  color: var(--blue);
  border-color: rgba(52, 152, 219, 0.3);
}
.pdf-patch-edit-btn:hover { background: rgba(52, 152, 219, 0.2); }
.pdf-patch-reject-btn {
  background: var(--bg-4);
  color: var(--text-3);
}
.pdf-patch-reject-btn:hover { background: var(--bg-3); color: var(--text-2); }

/* v7.4: Polished status pills */
.pdf-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
  font-family: var(--mono);
  line-height: 1;
}
.pdf-status-pill.accepted {
  background: linear-gradient(135deg, rgba(46,204,113,0.18), rgba(46,204,113,0.08));
  color: var(--green);
  border: 1px solid rgba(46,204,113,0.25);
  box-shadow: 0 0 6px rgba(46,204,113,0.1);
}
.pdf-status-pill.dismissed {
  background: linear-gradient(135deg, rgba(128,128,128,0.12), rgba(128,128,128,0.04));
  color: var(--text-4);
  border: 1px solid rgba(128,128,128,0.2);
}
.pdf-status-pill .status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pdf-status-pill.accepted .status-dot {
  background: var(--green);
  box-shadow: 0 0 4px var(--green);
}
.pdf-status-pill.dismissed .status-dot {
  background: var(--text-4);
  opacity: 0.6;
}

/* v7.4: Flag as Important */
.pdf-patch-flag-btn {
  font-size: 7px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 600;
  transition: all 0.15s;
  flex-shrink: 0;
}
.pdf-patch-flag-btn:hover {
  border-color: rgba(255,140,0,0.4);
  color: var(--amber);
  background: rgba(255,140,0,0.06);
}
.pdf-patch-flag-btn.flagged {
  border-color: rgba(255,140,0,0.5);
  color: #ff8c00;
  background: rgba(255,140,0,0.12);
  box-shadow: 0 0 5px rgba(255,140,0,0.15);
}
.pdf-patch-card.flagged-important {
  border-left: 2px solid #ff8c00 !important;
  box-shadow: inset 0 0 8px rgba(255,140,0,0.04);
}
.pdf-patch-card.flagged-important .pdf-patch-flag-indicator {
  display: inline-flex;
}
.pdf-patch-flag-indicator {
  display: none;
  align-items: center;
  gap: 2px;
  font-size: 6px;
  font-weight: 700;
  color: #ff8c00;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(255,140,0,0.1);
  flex-shrink: 0;
}

/* v7.4: Search toolbar */
.pdf-search-toolbar input:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 4px rgba(255,170,0,0.2);
}
.pdf-search-result-card:hover {
  border-color: var(--amber) !important;
  background: rgba(255,170,0,0.04) !important;
}
.pdf-tab-pill.pdf-search-highlight {
  animation: pdfSearchPulse 2s ease-in-out 1;
}
@keyframes pdfSearchPulse {
  0% { box-shadow: 0 0 0 rgba(255,170,0,0); }
  30% { box-shadow: 0 0 12px rgba(255,170,0,0.5); }
  100% { box-shadow: 0 0 6px rgba(255,170,0,0.3); }
}

.pdf-patch-edit-form {
  padding: 4px;
}
.pdf-patch-parent {
  font-size: 8px;
  color: var(--text-2);
  margin-top: 2px;
}
.pdf-patch-parent strong {
  color: var(--text-1);
}

/* ── Source-section collapsible groups (two-pass PDF scanner) ──── */
.pdf-patches-source-section {
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.01);
  overflow: hidden;
}
.pdf-patches-source-header {
  user-select: none;
  transition: background 0.15s;
}
.pdf-patches-source-header:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.pdf-patches-source-body {
  padding: 0 2px 4px 4px;
}

/* ── Cross-reference link + flash highlight ──── */
.pdf-xref-link {
  color: var(--blue, #3498db);
  cursor: pointer;
  transition: color 0.15s;
}
.pdf-xref-link:hover {
  color: var(--cyan, #00bcd4);
}
@keyframes xref-flash {
  0% { box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}
.pdf-xref-flash {
  animation: xref-flash 1.5s ease-out;
}

/* ── Decomposition sub-rows (footnote breakdowns under parent WB cards) ──── */
.wb-decomp-container {
  margin: 0 0 2px 18px;
  padding: 3px 6px;
  border-left: 2px solid rgba(255, 170, 0, 0.25);
  background: rgba(255, 170, 0, 0.02);
  border-radius: 0 3px 3px 0;
}
.wb-decomp-header {
  font-size: 7px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.04em;
  padding: 1px 0 2px 0;
}
.wb-decomp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  font-size: 8px;
}
.wb-decomp-label {
  color: var(--text-1);
  font-weight: 500;
  min-width: 100px;
}
.wb-decomp-values {
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 7px;
}
.wb-decomp-ref {
  color: var(--text-3);
  font-size: 7px;
  margin-left: auto;
}
.wb-decomp-remove {
  font-size: 7px;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.5;
}
.wb-decomp-remove:hover { opacity: 1; color: var(--red); }

/* Drag-drop */
.wb-dragging { opacity: 0.5; }
.wb-drag-over {
  background: rgba(46, 204, 113, 0.08) !important;
  outline: 1px dashed var(--green);
  outline-offset: -1px;
}
.wb-card[draggable="true"] { cursor: grab; }
.wb-card[draggable="true"]:active { cursor: grabbing; }

/* ═══ SPLIT-PANEL FINANCIALS LAYOUT ══════════════════════════════════════ */
.fin-split {
  display: flex;
  gap: 0;
  align-items: stretch;
  position: relative;
  /* v9.x: Fill remaining space in #tab-financials flex column */
  flex: 1 1 0%;
  min-height: 0;         /* allow flex shrink — critical for viewport containment */
  /* v9.x: Prevent children from overflowing the flex container */
  overflow: hidden;
}
.fin-edit-col {
  /* v15: No hardcoded width — JS _applyPaneLayout controls flex sizing for 2/3-col layouts */
  flex: 1 1 0%;
  min-width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-2);
  /* v6.6.3: Independent vertical scroll for left column */
  overflow-y: auto;
  overflow-x: hidden;
  /* overscroll chains to master page when panel reaches top/bottom */
  overscroll-behavior: auto;
}
/* v6.6.1: Inner table-wraps in edit column should not trap scroll */
.fin-edit-col .table-wrap {
  max-height: none;
  overflow-y: visible;
}
/* v6.6.1: Resizable splitter */
.fin-splitter {
  width: 8px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  transition: background 0.15s;
  /* v6.6.2: full height accessible — no sticky, stretch with content */
  align-self: stretch;
}
.fin-splitter:hover,
.fin-splitter.dragging {
  background: var(--blue-dim, rgba(0,168,255,0.15));
}
.fin-splitter::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  border-radius: 1px;
  background: var(--border-2);
  transition: background 0.15s;
}
.fin-splitter:hover::after,
.fin-splitter.dragging::after {
  background: var(--blue);
}
/* v9.x: Embedded chat column — third pane inside fin-split */
.fin-chat-col {
  /* v8: Sherlock narrower default — chat is secondary to financials */
  flex: 0 0 300px;
  min-width: 260px;
  max-width: 380px;
  overflow: hidden;
  border-left: 1px solid rgba(0,168,255,0.08);
  background: rgba(10,12,16,0.92);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  transition: flex 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
  display: none; /* hidden until Sherlock toggled */
}
.fin-chat-col.active {
  display: flex;
  flex-direction: column;
  /* v8: Fill parent height, ensure footer (chat input) is always reachable */
  align-self: stretch;
  height: 100%;
  min-height: 0;
  max-height: calc(100vh - 48px);  /* leave room for tab nav */
  overflow: hidden;
}
/* v8: Ensure chat children stack correctly when docked — footer (input) always visible */
.fin-chat-col.active > #ivr-chat-drawer-header { flex: 0 0 auto; }
.fin-chat-col.active > #ivr-chat-drawer-body   { flex: 1 1 0%; min-height: 0; overflow-y: auto; }
.fin-chat-col.active > #ivr-chat-drawer-footer  { flex: 0 0 auto; }

/* v9.x: Second splitter between reformulated and chat */
.fin-splitter-chat {
  width: 8px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  transition: background 0.15s;
  align-self: stretch;
  display: none; /* hidden until Sherlock toggled */
}
.fin-splitter-chat.active {
  display: block;
}
.fin-splitter-chat:hover,
.fin-splitter-chat.dragging {
  background: rgba(168,85,247,0.15);
}
.fin-splitter-chat::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  border-radius: 1px;
  transition: background 0.15s;
}
.fin-splitter-chat:hover::after,
.fin-splitter-chat.dragging::after {
  background: rgb(168,85,247);
}
/* v9.x: When chat is docked inside fin-split, override its fixed positioning */
#ivr-chat-drawer.docked-inline {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  transform: none !important;
  z-index: auto !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}
/* v9.x: Hide resize handles when inline — the splitter handles resizing */
#ivr-chat-drawer.docked-inline .chat-resize-handle,
#ivr-chat-drawer.docked-inline .chat-resize-handle-top,
#ivr-chat-drawer.docked-inline .chat-resize-handle-bottom,
#ivr-chat-drawer.docked-inline .chat-resize-handle-corner,
#ivr-chat-drawer.docked-inline .chat-resize-handle-corner-bl {
  display: none !important;
}

.fin-result-col {
  flex: 1;
  min-width: 0;
  padding-left: 16px;
  /* v6.6.5: vertical scroll on column, horizontal scroll delegated to .table-wrap children */
  overflow-y: auto;
  overflow-x: hidden;
  /* overscroll chains to master page when panel reaches top/bottom */
  overscroll-behavior: auto;
  /* v6.13: smoother scroll + reduce re-paint jank on large DOMs */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  /* v7.x: smooth collapse/expand + docking transitions */
  transition: flex 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}
/* v6.6.5: Table wraps inside result column: h-scroll, no height trap */
.fin-result-col .table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;      /* v6.13: no vertical scroll trap unless explicit height set */
  display: block;
  width: 100%;
  position: relative;       /* v6.12: anchor for vresize handle */
}
/* v6.12: when user drags vertical resize, enforce the explicit height */
.fin-result-col .table-wrap[style*="height"] {
  overflow-y: auto !important;
  overscroll-behavior-y: auto; /* v6.13: chain vertical scroll to parent at boundaries */
}

/* v6.9.4: Inline zoom widget — tiny +/- controls embedded in section headers */
.fin-zoom-inline {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 2px;
  background: var(--bg-2);
  vertical-align: middle;
  margin-left: 4px;
}
.fin-zoom-inline button {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--text-3);
  transition: background 0.12s, color 0.12s;
  padding: 0;
  line-height: 1;
}
.fin-zoom-inline button:hover {
  background: var(--bg-4);
  color: var(--text-1);
}
.fin-zoom-inline span {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
  min-width: 26px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* v11.x: Save bar — lives inside the sticky section-header so it never scrolls away */
.fin-save-bar {
  flex: 0 0 100%;           /* force full-width row inside flex-wrap toolbar */
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  background: transparent;
  border-top: 1px solid var(--border-2);
  border-bottom: none;
  border-radius: 0;
  margin: 2px 0 0;          /* v16.2: clean margins inside .fin-toolbar */
  box-shadow: none;
}
/* Spacer to prevent content jumping under the fixed bar */
.fin-save-bar-spacer {
  height: 44px; /* matches save bar height */
  flex-shrink: 0;
}
.fin-save-bar-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.fin-save-chip {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
}
.fin-save-chip-wb {
  background: rgba(255, 170, 0, 0.12);
  color: var(--amber);
}
.fin-save-chip-llm {
  background: rgba(0, 168, 255, 0.12);
  color: var(--blue);
}
.fin-save-chip-clean {
  background: rgba(0, 204, 136, 0.08);
  color: var(--green);
}
.fin-save-btn {
  background: var(--green);
  color: #000;
  border: none;
  padding: 7px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.12s;
}
.fin-save-btn:hover { filter: brightness(1.15); }
.fin-save-btn:disabled {
  opacity: 0.4;
  cursor: default;
  filter: none;
}
.fin-accept-btn {
  background: var(--blue);
  color: #000;
  border: none;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.12s;
}
.fin-accept-btn:hover { filter: brightness(1.15); }

/* Edit column section headers */
.fin-edit-section {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.fin-edit-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-2);
}

/* ═══ FOCUS MODE — Belief Analyst Workstation ═══════════════════════════ */
.focus-section { margin: 8px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1, rgba(255,255,255,0.02)); overflow: hidden; }
.focus-section-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.15s; user-select: none; }
.focus-section-header:hover { background: rgba(255,255,255,0.03); }
.focus-section-title { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-1); font-family: var(--mono); }
.focus-section-count { font-size: 8px; color: var(--text-3); margin-left: auto; font-family: var(--mono); }
.focus-section-body { padding: 0 12px 12px; }

/* Reader tab bar */
.focus-reader-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 4px 0 4px; flex-wrap: wrap; }
.focus-reader-tabs::-webkit-scrollbar { height: 3px; }
.focus-reader-tabs::-webkit-scrollbar-thumb { background: rgba(0,168,255,0.15); border-radius: 3px; }
.focus-reader-tab { padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-2); color: var(--text-2); font-size: 9px; font-family: var(--mono); cursor: pointer; white-space: nowrap; transition: all 0.15s; flex-shrink: 0; }
.focus-reader-tab:hover { background: var(--bg-4); color: var(--text-0); }
.focus-reader-tab.active { background: rgba(255,176,0,0.12); color: var(--amber); border-color: rgba(255,176,0,0.3); }

/* Reader content */
.focus-reader-bar { display: flex; align-items: center; gap: 8px; padding: 6px 0; margin-bottom: 6px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.focus-reader-title { font-size: 10px; font-weight: 700; color: var(--text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-reader-action { padding: 3px 8px; font-size: 7px; font-weight: 700; letter-spacing: 0.06em; border: 1px solid var(--border); border-radius: 3px; background: var(--bg-2); color: var(--text-3); cursor: pointer; transition: all 0.15s; font-family: var(--mono); white-space: nowrap; }
.focus-reader-action:hover { background: var(--bg-4); color: var(--amber); border-color: var(--amber); }
.focus-reader-text { max-height: 40vh; overflow-y: auto; padding: 8px; background: rgba(0,0,0,0.15); border-radius: 4px; font-size: 10px; line-height: 1.6; color: var(--text-2); border: 1px solid var(--border); }
.focus-reader-text::-webkit-scrollbar { width: 4px; }
.focus-reader-text::-webkit-scrollbar-thumb { background: rgba(255,176,0,0.15); border-radius: 3px; }

/* ── Resizable tabs nav ── */
.focus-reader-tabs-wrap {
  position: relative;
  min-height: 30px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
.focus-reader-tabs-wrap .focus-reader-tabs {
  flex-wrap: wrap;
}
.focus-reader-tabs-resize-handle {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  cursor: ns-resize;
  background: transparent;
  transition: background 0.15s;
  z-index: 3;
}
.focus-reader-tabs-resize-handle:hover,
.focus-reader-tabs-wrap.resizing .focus-reader-tabs-resize-handle {
  background: var(--amber);
  opacity: 0.4;
}
.focus-reader-tabs-wrap::-webkit-scrollbar { width: 3px; }
.focus-reader-tabs-wrap::-webkit-scrollbar-thumb { background: rgba(255,176,0,0.15); border-radius: 3px; }

/* ── Side-by-side split container ── */
.focus-reader-split-wrap {
  display: flex;
  flex-direction: column;
}
.focus-reader-split-wrap.side-by-side {
  flex-direction: row;
  gap: 0;
  height: calc(100vh - 300px);
  min-height: 300px;
}
/* Draggable split handle between PDF and text panes */
.focus-reader-split-handle {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 5;
  transition: background 0.15s;
  display: none; /* shown only in split mode */
}
.side-by-side > .focus-reader-split-handle { display: block; }
.focus-reader-split-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 36px;
  border-radius: 1px;
  background: var(--border);
  opacity: 0.5;
  transition: all 0.15s;
}
.focus-reader-split-handle:hover::after {
  background: var(--amber);
  opacity: 1;
  height: 60px;
  width: 3px;
}
.focus-reader-split-handle:hover {
  background: rgba(255, 193, 7, 0.06);
}
.focus-reader-split-wrap.side-by-side #focus-reader-pdf-area {
  flex: 1;
  height: 100%;
  min-height: unset;
  max-height: unset;
}
.focus-reader-split-wrap.side-by-side #focus-reader-text-area {
  flex: 1;
  max-height: 100%;
  overflow-y: auto;
}
/* Keep zoom bar pinned at top when text area scrolls in split mode */
.focus-reader-split-wrap.side-by-side #focus-reader-text-area .section-zoom-bar {
  position: sticky;
  top: 0;
  right: 0;
  float: right;
  margin: 4px 4px 0 0;
}
.focus-reader-split-wrap.side-by-side .focus-reader-text {
  max-height: 100%;
}
.focus-reader-split-wrap.side-by-side .focus-reader-parsed {
  max-height: 40%;
  overflow-y: auto;
}

/* ── Highlight color picker ── */
.focus-reader-hl-picker {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}
.focus-reader-hl-label {
  font-size: 7px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.06em;
  font-family: var(--mono);
  margin-right: 1px;
}
.focus-reader-hl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.15s;
}
.focus-reader-hl-dot:hover {
  transform: scale(1.3);
}
.focus-reader-hl-dot.active {
  border-color: var(--text-0);
  transform: scale(1.2);
}

/* ── Reader text highlights ── */
.reader-highlight {
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.reader-highlight:hover {
  opacity: 0.7;
}

/* ── Floating toolbar (highlight + sherlock) ── */
.reader-float-toolbar {
  position: fixed;
  z-index: 9999;
  display: flex;
  gap: 1px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: rft-pop 0.12s ease-out;
}
@keyframes rft-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.rft-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 8px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  background: var(--bg-2);
  color: var(--text-2);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.rft-btn:hover {
  background: var(--bg-4);
  color: var(--text-0);
}
.rft-hl:hover { color: var(--amber); }
.rft-sherlock:hover { color: var(--blue); }
.rft-collect:hover { color: var(--green, #4caf50); }
.rft-hl-preview {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Memory panel in reader title bar */
.reader-memory-panel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(255,255,255,0.02);
  font-size: 8px;
  vertical-align: middle;
}
.reader-memory-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-size: 7px;
}
.reader-memory-badge {
  display: inline-block;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-0);
  background: var(--amber);
  padding: 0 3px;
}
.reader-memory-badge[data-count="0"] {
  background: var(--bg-3);
  color: var(--text-3);
}
.reader-memory-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 2px;
  transition: all 0.15s;
}
.reader-memory-send {
  color: var(--blue);
  border: 1px solid rgba(0,168,255,0.2);
}
.reader-memory-send:hover {
  background: rgba(0,168,255,0.12);
  color: #fff;
}
.reader-memory-clear {
  color: var(--text-3);
}
.reader-memory-clear:hover {
  color: var(--red, #ff4444);
  background: rgba(255,68,68,0.08);
}

/* Parsed table */
.focus-reader-parsed { margin-top: 8px; }
.focus-parsed-table { width: 100%; border-collapse: collapse; font-size: 9px; }
.focus-parsed-table th { text-align: left; font-size: 7px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-3); padding: 3px 6px; border-bottom: 1px solid var(--border); }
.focus-parsed-table td { padding: 2px 6px; border-bottom: 1px solid rgba(255,255,255,0.02); color: var(--text-2); }

/* Mini patch cards (shared between reader and patches sections) */
.focus-mini-patch { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 3px; font-size: 9px; transition: background 0.1s; border-left: 2px solid var(--border); margin: 1px 0; }
.focus-mini-patch:hover { background: rgba(255,255,255,0.03); }
.focus-mini-patch.accepted { border-left-color: var(--green); opacity: 0.7; }
.focus-mini-patch.rejected { border-left-color: var(--red, #ff4444); opacity: 0.4; text-decoration: line-through; }
.focus-mini-patch.pending { border-left-color: var(--amber); }
.focus-mini-patch-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.focus-mini-patch-bucket { font-size: 7px; font-weight: 700; letter-spacing: 0.04em; color: var(--blue); background: rgba(0,168,255,0.08); padding: 1px 5px; border-radius: 2px; white-space: nowrap; }
.focus-mini-patch-conf { font-size: 7px; color: var(--text-3); }
.focus-mini-patch-mat { font-size: 7px; color: var(--amber); }
.focus-mini-status { font-size: 7px; font-weight: 700; color: var(--text-3); }
.focus-mini-btn { width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg-2); cursor: pointer; font-size: 10px; line-height: 16px; text-align: center; transition: all 0.15s; padding: 0; }
.focus-mini-btn.accept:hover { background: rgba(0,204,136,0.2); border-color: var(--green); color: var(--green); }
.focus-mini-btn.reject:hover { background: rgba(255,68,68,0.2); border-color: var(--red, #ff4444); color: var(--red, #ff4444); }

/* Patch groups */
.focus-patch-group { margin-bottom: 8px; }
.focus-patch-group-title { font-size: 8px; font-weight: 700; color: var(--text-3); letter-spacing: 0.06em; padding: 4px 0 2px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }

/* Reader patches inline */
.focus-reader-patches { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }

/* Classification map section */
.focus-classmap-group { margin-bottom: 6px; }
.focus-classmap-bucket { font-size: 8px; font-weight: 700; color: var(--blue); letter-spacing: 0.06em; padding: 3px 0 2px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.focus-classmap-item { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 9px; }
.focus-classmap-item.overridden { background: rgba(0,168,255,0.04); }
.focus-classmap-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.focus-src-badge { font-size: 6px; font-weight: 700; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 2px; }
.focus-src-badge.fmp { background: rgba(255,255,255,0.05); color: var(--text-3); }
.focus-src-badge.manual { background: rgba(0,168,255,0.12); color: var(--blue); }
.focus-src-badge.arch { background: rgba(255,176,0,0.12); color: var(--amber); }

/* Responsive: stack on narrow screens */
@media (max-width: 1100px) {
  .fin-split { flex-direction: column; height: auto; }
  .fin-edit-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-2);
    max-height: 50vh;
    position: static;
  }
  .fin-result-col { padding-left: 0; padding-top: 12px; }
  .fin-chat-col.active { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; max-height: 50vh; border-left: none; border-top: 1px solid rgba(0,168,255,0.08); }
  .fin-splitter-chat { display: none !important; }
}

/* v6.6.1: IVr History Bar */
.ivr-history-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px 0;
  flex-wrap: wrap;
}
.ivr-history-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ivr-history-chip {
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ivr-history-chip:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHUNK A: Operating Engine — Profitability Decomposition Styles
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── CARD CONTAINER ──────────────────────────────────────────────────────── */
.chunk-a-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px; /* v6.9.5: compacted */
}
.chunk-a-card-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 6px;
  font-family: var(--mono);
}

/* ─── CASH SLIDER ─────────────────────────────────────────────────────────── */
.cash-slider-grid {
  display: grid;
  grid-template-columns: 120px 1fr; /* v6.9.5: narrower label column */
  gap: 4px 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px; /* v6.9.5: smaller */
}
.cash-slider-label {
  color: var(--text-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cash-slider-value {
  color: var(--text-1);
}
.cash-slider-range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  min-height: 24px;
}
.cash-slider-pct {
  color: var(--blue);
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}
.cash-all-operating {
  color: var(--amber);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
}

/* ─── RANGE SLIDER STYLING ────────────────────────────────────────────────── */
.chunk-a-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-4);
  outline: none;
  flex: 1;
  cursor: pointer;
  margin: 6px 0;
}
.chunk-a-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 4px rgba(0,122,255,0.4);
}
.chunk-a-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  border: 2px solid var(--bg-0);
}

/* ─── SLIDER MANUAL INPUT ────────────────────────────────────────────────── */
.slider-manual-input {
  width: 48px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 4px;
  border-radius: 3px;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}
.slider-manual-input::-webkit-inner-spin-button,
.slider-manual-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.slider-manual-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(0,122,255,0.3);
}
.slider-manual-unit {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10px;
  margin-left: -2px;
}

/* ─── Floor % input (independent from slider) ─── */
.cash-floor-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cash-floor-pct-input {
  width: 44px;
  background: var(--bg-2, #0d0d1a);
  border: 1px solid var(--blue, #00a8ff);
  border-radius: 3px;
  color: var(--blue, #00a8ff);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono, monospace);
  padding: 2px 4px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  display: inline-block;
}
.cash-floor-pct-input::-webkit-inner-spin-button,
.cash-floor-pct-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cash-floor-pct-input:focus {
  border-color: var(--blue, #00a8ff);
  box-shadow: 0 0 0 2px rgba(0,168,255,0.3);
}
.cash-floor-formula {
  font-size: 10px;
  margin-left: 6px;
}
/* ─── Working Cash row highlight in BS ─── */
.row-cash-working td {
  background: rgba(0,168,255,0.04);
}
.row-cash-excess td {
  background: rgba(255,255,255,0.02);
}

/* ─── Legacy inline pct input ─── */
.cash-pct-inline-input {
  width: 34px;
  background: var(--bg-2, #0d0d1a);
  border: 1px solid var(--border, #2a2a2a);
  color: var(--blue, #00a8ff);
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
  display: inline-block;
  vertical-align: baseline;
}
.cash-pct-inline-input::-webkit-inner-spin-button,
.cash-pct-inline-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cash-pct-inline-input:focus {
  border-color: var(--blue, #00a8ff);
  box-shadow: 0 0 0 1px rgba(0,168,255,0.3);
}
.cash-pct-inline-input:hover {
  border-color: var(--text-2, #888);
}

/* ─── FORMULA TABLE ───────────────────────────────────────────────────────── */
.formula-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.formula-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 10px;
}
.formula-table thead th {
  background: var(--bg-3);
  color: var(--text-2);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.formula-table thead th:last-child { border-right: none; }
.formula-label-col {
  text-align: left !important;
  min-width: 200px;
}

.formula-table tbody td {
  padding: 5px 10px;
  text-align: right;
  color: var(--text-1);
  white-space: nowrap;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.formula-table tbody td:first-child {
  text-align: left;
  color: var(--text-2);
  font-size: 10px;
  letter-spacing: 0.03em;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-1);
}
.formula-table tbody td:last-child {
  border-right: none;
}

.formula-table tbody tr:nth-child(even) > td {
  background: var(--bg-2);
}
.formula-table tbody tr:nth-child(even) > td:first-child {
  background: var(--bg-2);
}
.formula-table tbody tr:hover > td {
  background: var(--bg-4);
}
.formula-table tbody tr:hover > td:first-child {
  background: var(--bg-4);
}

/* Section header rows */
.formula-section-header > td {
  background: var(--bg-3) !important;
  color: var(--blue);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--blue);
  position: relative;
}
.formula-section-divider > td {
  border-top: 2px solid var(--border);
}

/* Highlight rows */
.formula-highlight-row > td {
  background: rgba(0,122,255,0.06) !important;
  font-weight: 700;
}
.formula-reoi-row > td {
  font-weight: 700;
  border-top: 2px solid var(--text-2);
}

/* Number styling */
.formula-neg {
  color: var(--red) !important;
}
.formula-surplus-pos {
  color: var(--green) !important;
}
.formula-surplus-neg {
  color: var(--red) !important;
}
.formula-rnoa {
  color: var(--blue) !important;
  font-weight: 700;
}
.formula-reoi {
  font-weight: 700;
}
.formula-dim {
  color: var(--text-3) !important;
}
.formula-dim-row > td {
  color: var(--text-3) !important;
  font-size: 9px;
}
.formula-warn {
  color: var(--amber);
  font-size: 11px;
  cursor: help;
}
.formula-note {
  color: var(--text-3) !important;
  font-size: 9px;
  text-align: left !important;
  font-style: italic;
  display: none;
}
.formula-table.show-notes .formula-note {
  display: table-cell;
}
.formula-note-col {
  min-width: 100px;
  text-align: left !important;
  display: none;
}
.formula-table.show-notes .formula-note-col {
  display: table-cell;
}
.formula-notes-toggle {
  display: inline-block;
  font-size: 8px;
  color: var(--text-3);
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-left: 8px;
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
.formula-notes-toggle:hover {
  color: var(--text-1);
  border-color: var(--text-3);
}
.formula-notes-toggle.active {
  color: var(--blue);
  border-color: var(--blue);
}

/* ─── RHO SLIDER INLINE ──────────────────────────────────────────────────── */
.rho-slider-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.rho-label {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 500;
}
.rho-slider {
  max-width: 200px;
}
.rho-value {
  color: var(--blue);
  font-weight: 700;
  font-size: 11px;
  min-width: 40px;
}

/* ─── DRIVER BADGE ────────────────────────────────────────────────────────── */
.driver-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.driver-margin {
  background: rgba(0,200,83,0.12);
  color: var(--green);
}
.driver-turnover {
  background: rgba(0,122,255,0.12);
  color: var(--blue);
}
.driver-balanced {
  background: rgba(255,193,7,0.12);
  color: var(--amber);
}
.driver-n\/a {
  background: var(--bg-3);
  color: var(--text-3);
}

/* ─── VERDICT BAR ─────────────────────────────────────────────────────────── */
.reoi-verdict {
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 10px;
  font-family: var(--mono);
}
.verdict-green {
  background: linear-gradient(135deg, rgba(0,200,83,0.10), rgba(0,200,83,0.04));
  border: 1px solid rgba(0,200,83,0.3);
}
.verdict-red {
  background: linear-gradient(135deg, rgba(255,69,58,0.10), rgba(255,69,58,0.04));
  border: 1px solid rgba(255,69,58,0.3);
}
.verdict-amber {
  background: linear-gradient(135deg, rgba(255,193,7,0.10), rgba(255,193,7,0.04));
  border: 1px solid rgba(255,193,7,0.3);
}
.verdict-main {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.verdict-break {
  font-size: 9px;
  color: var(--text-2);
}

/* ─── UNUSUAL ITEMS BUTTON ────────────────────────────────────────────────── */
.unusual-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
  transition: background 0.15s;
}
.unusual-add-btn:hover {
  background: var(--bg-4);
}

/* ─── UNUSUAL ITEM MODAL ─────────────────────────────────────────────────── */
.unusual-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unusual-modal-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 320px;
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.unusual-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.unusual-modal-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.unusual-modal-close:hover { color: var(--text-1); }

.unusual-modal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.unusual-modal-body label {
  color: var(--text-2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.unusual-modal-body select,
.unusual-modal-body input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 11px;
  padding: 8px 10px;
  outline: none;
}
.unusual-modal-body select:focus,
.unusual-modal-body input:focus {
  border-color: var(--blue);
}

.unusual-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.unusual-modal-cancel {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10px;
  padding: 6px 14px;
  cursor: pointer;
}
.unusual-modal-cancel:hover { background: var(--bg-4); }

.unusual-modal-save {
  background: var(--blue);
  border: none;
  border-radius: 4px;
  color: #000;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.unusual-modal-save:hover { opacity: 0.85; }

/* ─── FINANCING STRUCTURE (collapsible) ───────────────────────────────────── */
.financing-structure {
  margin-top: 12px;
}
.financing-summary {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
}
.financing-summary::-webkit-details-marker { display: none; }
.financing-summary:hover { color: var(--text-1); }

/* ─── CASH ADJUSTMENT ROW IN BS TABLE ─────────────────────────────────────── */
.row-cash-adjustment > td {
  font-style: italic;
  color: var(--text-3) !important;
  font-size: 10px;
}
.cash-adj-cell {
  color: var(--red) !important;
  font-style: italic;
}

/* ─── BANK_INSURER DISABLED BANNER ────────────────────────────────────────── */
.profitability-disabled-banner {
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
  font-style: italic;
  font-size: 10px;
  line-height: 1.6;
  font-family: var(--mono);
}

/* ─── PROFITABILITY PANEL ─────────────────────────────────────────────────── */
.profitability-panel {
  /* inherits .chunk-a-card */
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CHUNK B — Report Upload + Evidence-Grounded ASK                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Upload Area Container ──────────────────────────────────────────────── */
.chunk-b-upload-area {
  margin: 0 0 6px 0;
  padding: 0;
  flex-shrink: 0; /* v9.x: don't collapse in financials flex layout */
}

/* ─── Upload Zone (drop/click area when no doc) ──────────────────────────── */
.chunk-b-upload-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.chunk-b-upload-zone:hover {
  border-color: var(--blue-dim);
  background: var(--bg-3);
}

/* ─── Upload Button (label wrapping file input) ──────────────────────────── */
.chunk-b-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
}
.chunk-b-upload-btn:hover {
  color: var(--blue);
  border-color: var(--blue-dim);
  background: rgba(0, 168, 255, 0.06);
}

/* ─── Upload Badge (shown after successful upload) ───────────────────────── */
.chunk-b-upload-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(0, 204, 136, 0.06);
  border: 1px solid rgba(0, 204, 136, 0.2);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-2);
  line-height: 1;
  flex-wrap: wrap;           /* wrap contents when zoomed */
  max-width: 100%;           /* don't exceed parent */
}
.chunk-b-upload-badge.chunk-b-upload-warn {
  background: rgba(255, 170, 0, 0.06);
  border-color: rgba(255, 170, 0, 0.2);
}
.chunk-b-upload-icon {
  font-size: 11px;
}
.chunk-b-upload-name {
  color: var(--text-1);
  font-weight: 600;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;            /* allow name to shrink when zoomed */
  min-width: 60px;
}
.chunk-b-upload-check {
  color: var(--green);
  font-weight: 700;
}
.chunk-b-upload-meta {
  color: var(--text-3);
  font-size: 8px;
}
.chunk-b-upload-remove {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;          /* larger hit target */
  margin-left: 4px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
  border-radius: 3px;
  flex-shrink: 0;             /* never collapse the X button */
}
.chunk-b-upload-remove:hover {
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
}

/* ─── ASK Mode Selector Bar ──────────────────────────────────────────────── */
/* ASK mode bar — removed, hardcoded to AUTO routing */
.chunk-b-ask-mode-area { display: none; }

/* ─── ASK Button Doc-Mode Indicator ──────────────────────────────────────── */
.wb-ask-btn.chunk-b-ask-doc {
  border-color: rgba(0, 204, 136, 0.3);
  color: var(--green);
  background: rgba(0, 204, 136, 0.06);
}
.wb-ask-btn.chunk-b-ask-doc:hover {
  background: rgba(0, 204, 136, 0.12);
}

/* ─── Page Badge (document result page refs) ─────────────────────────────── */
.chunk-b-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 2px;
}

/* ─── Source Badge (DOCUMENT / WEB SEARCH label) ─────────────────────────── */
.chunk-b-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  font-family: var(--mono);
}

/* ─── Document Result Card ───────────────────────────────────────────────── */
.chunk-b-doc-result {
  border-left-color: var(--green);
}

/* ─── Web Result Card ────────────────────────────────────────────────────── */
.chunk-b-web-result {
  border-left-color: var(--blue);
}

/* ─── Action Buttons (shared base) ───────────────────────────────────────── */
.chunk-b-action-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  padding: 2px 8px;
  margin-top: 4px;
  margin-right: 4px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.12s;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text-2);
}
.chunk-b-action-btn:hover {
  background: var(--bg-4);
  color: var(--text-1);
}

/* Reclassify → amber */
.chunk-b-action-reclass {
  border-color: var(--amber-dim);
  color: var(--amber);
  background: rgba(255, 170, 0, 0.06);
}
.chunk-b-action-reclass:hover {
  background: rgba(255, 170, 0, 0.12);
}

/* Mark Unusual → red */
.chunk-b-action-unusual {
  border-color: var(--red-dim);
  color: var(--red);
  background: rgba(255, 51, 68, 0.06);
}
.chunk-b-action-unusual:hover {
  background: rgba(255, 51, 68, 0.12);
}

/* Keep as Core → green */
.chunk-b-action-keep {
  border-color: rgba(0, 204, 136, 0.3);
  color: var(--green);
  background: rgba(0, 204, 136, 0.06);
}
.chunk-b-action-keep:hover {
  background: rgba(0, 204, 136, 0.12);
}

/* Dismiss → muted */
.chunk-b-action-dismiss {
  border-color: var(--border);
  color: var(--text-3);
  background: var(--bg-2);
}
.chunk-b-action-dismiss:hover {
  color: var(--text-2);
  background: var(--bg-3);
}

/* Confirm (web candidate) → blue */
.chunk-b-action-confirm {
  border-color: var(--blue-dim);
  color: var(--blue);
  background: rgba(0, 168, 255, 0.06);
}
.chunk-b-action-confirm:hover {
  background: rgba(0, 168, 255, 0.12);
}

/* Open URL → neutral with arrow */
.chunk-b-action-open {
  border-color: var(--border-2);
  color: var(--text-2);
}
.chunk-b-action-open:hover {
  color: var(--blue);
  border-color: var(--blue-dim);
}

/* ─── Candidate Row (web search results) ─────────────────────────────────── */
.chunk-b-candidate-row {
  padding: 6px;
  margin-bottom: 4px;
  background: var(--bg-3);
  border-radius: 3px;
  border: 1px solid var(--border);
  transition: border-color 0.12s;
}
.chunk-b-candidate-row:hover {
  border-color: var(--border-2);
}
.chunk-b-candidate-row.confirmed {
  border-color: rgba(0, 204, 136, 0.3);
  background: rgba(0, 204, 136, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CHUNK C — Belief Financials Tab (Tab 03)                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Empty State ────────────────────────────────────────────────────────── */
.bf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.bf-empty-icon {
  font-size: 28px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.bf-empty-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  max-width: 420px;
  line-height: 1.6;
}
.bf-empty-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
  padding: 8px 0;
  font-style: italic;
}

/* ─── Shared Label & Button ──────────────────────────────────────────────── */
.bf-label {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bf-btn {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.12s;
}
.bf-btn:hover {
  background: var(--bg-4);
  color: var(--text-1);
}
.bf-btn-edit { border-color: var(--blue-dim); color: var(--blue); }
.bf-btn-edit:hover { background: rgba(0, 168, 255, 0.08); }
.bf-btn-accept { border-color: rgba(0, 204, 136, 0.3); color: var(--green); }
.bf-btn-accept:hover { background: rgba(0, 204, 136, 0.08); }
.bf-btn-add { border-color: var(--border); color: var(--text-3); }
.bf-btn-search { border-color: var(--amber-dim); color: var(--amber); }
.bf-btn-search:hover { background: rgba(255, 170, 0, 0.08); }
/* v6.9.3 FIX R2-#6: Send to Claude button */
.bf-btn-claude { border-color: rgba(0, 168, 255, 0.3); color: var(--blue); margin-top: 4px; }
.bf-btn-claude:hover { background: rgba(0, 168, 255, 0.08); }
.bf-btn-export {
  margin-top: 8px;
  padding: 4px 14px;
  font-size: 9px;
  border-color: var(--blue-dim);
  color: var(--blue);
  background: rgba(0, 168, 255, 0.06);
}
.bf-btn-export:hover { background: rgba(0, 168, 255, 0.12); }
.bf-btn-add-rail {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  padding: 4px 0;
  border-radius: 3px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.12s;
}
.bf-btn-add-rail:hover {
  border-color: var(--border-2);
  color: var(--text-2);
  background: var(--bg-2);
}

/* ─── Chat Button ────────────────────────────────────────────────────────── */
.bf-chat-btn {
  font-family: var(--mono);
  font-size: 9px;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  margin-left: auto;
}
.bf-chat-btn:hover {
  border-color: var(--blue-dim);
  color: var(--blue);
}

/* ─── Basin Card ─────────────────────────────────────────────────────────── */
.bf-basin-card {
  margin: 8px 0;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
}
.bf-basin-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bf-status {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 2px;
}
.bf-status-proposed { background: rgba(255, 170, 0, 0.1); color: var(--amber); }
.bf-status-accepted { background: rgba(0, 204, 136, 0.1); color: var(--green); }
.bf-status-edited { background: rgba(0, 168, 255, 0.1); color: var(--blue); }
.bf-basin-sentence {
  font-size: 11px;
  color: var(--text-1);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6px;
}
.bf-basin-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  background: var(--bg);
  border: 1px solid var(--blue-dim);
  border-radius: 3px;
  padding: 8px 10px;
  line-height: 1.5;
  margin-bottom: 6px;
  resize: vertical;
  outline: none;
}
.bf-basin-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue-dim);
}
.bf-basin-actions {
  display: flex;
  gap: 6px;
}

/* ─── Tension Card ───────────────────────────────────────────────────────── */
.bf-tension-card {
  margin: 6px 0;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}
.bf-tension-text {
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 4px;
}

/* ─── Operating Engine Card ──────────────────────────────────────────────── */
.bf-engine-card {
  margin: 6px 0;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.bf-engine-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.8;
}
.bf-engine-row strong {
  color: var(--text-1);
}
.bf-engine-row em {
  font-style: normal;
  color: var(--text-3);
  font-size: 9px;
}
.bf-engine-sub {
  font-size: 9px;
  color: var(--text-3);
}
.bf-engine-sep {
  color: var(--border-2);
  margin: 0 2px;
}
.bf-engine-metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── Trend Indicators ──────────────────────────────────────────────────── */
.bf-trend-up { color: var(--green); font-weight: 600; }
.bf-trend-down { color: var(--red); font-weight: 600; }
.bf-trend-flat { color: var(--text-3); }

/* ─── Rails Workspace ───────────────────────────────────────────────────── */
.bf-rails-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px 0;
}
.bf-rails-count {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
}
.bf-rails-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .bf-rails-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Rail Column ────────────────────────────────────────────────────────── */
.bf-rail-column {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  min-height: 120px;
  transition: border-color 0.15s, background 0.15s;
}
.bf-rail-column.bf-drop-target {
  border-color: var(--blue-dim);
  background: rgba(0, 168, 255, 0.03);
}
.bf-col-confirm { border-top: 2px solid var(--green); }
.bf-col-falsify { border-top: 2px solid var(--red); }
.bf-col-boundary { border-top: 2px solid var(--amber); }
.bf-col-header {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bf-col-count {
  font-weight: 400;
  font-size: 7px;
  color: var(--text-3);
}

/* ─── Rail Card ──────────────────────────────────────────────────────────── */
.bf-rail-card {
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 4px;
  cursor: grab;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.bf-rail-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.bf-rail-card:active { cursor: grabbing; }
.bf-rail-card.bf-rail-stale {
  opacity: 0.6;
  border-style: dashed;
}
.bf-rail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bf-rail-name {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-1);
}
.bf-rail-dismiss {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 10px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.12s;
}
.bf-rail-dismiss:hover { color: var(--red); }
.bf-rail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 7px;
  flex-wrap: wrap;
}
.bf-rail-cadence { color: var(--text-3); }
.bf-rail-reveal { color: var(--text-3); }
.bf-rail-prof-link {
  padding: 0 4px;
  background: rgba(0, 168, 255, 0.08);
  border: 1px solid rgba(0, 168, 255, 0.2);
  border-radius: 2px;
  color: var(--blue);
  font-weight: 600;
}
.bf-rail-stale-badge {
  padding: 0 4px;
  background: rgba(255, 170, 0, 0.08);
  border: 1px solid rgba(255, 170, 0, 0.2);
  border-radius: 2px;
  color: var(--amber);
  font-weight: 600;
}
.bf-rail-values {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */
.bf-section {
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.bf-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* ─── Open Questions ─────────────────────────────────────────────────────── */
.bf-question-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
}
.bf-checkbox {
  accent-color: var(--green);
  width: 12px;
  height: 12px;
  margin-top: 1px;
  cursor: pointer;
}
.bf-question-text {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-2);
  line-height: 1.5;
}
.bf-question-text.resolved {
  text-decoration: line-through;
  color: var(--text-3);
}
.bf-resolved-by {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--text-3);
  margin-left: 4px;
}

/* ─── Data Gaps ──────────────────────────────────────────────────────────── */
.bf-gap-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.bf-gap-row:last-child { border-bottom: none; }
.bf-gap-item {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-2);
  margin-bottom: 4px;
}
.bf-gap-item strong { color: var(--text-1); }
.bf-gap-note { color: var(--text-3); }
.bf-gap-count {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
}
.bf-gap-excerpt {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
  padding: 4px 8px;
  margin-top: 4px;
  background: var(--bg-3);
  border-radius: 3px;
  border-left: 2px solid var(--amber);
  line-height: 1.5;
}
.bf-gap-excerpt em { color: var(--text-2); font-style: normal; }
.bf-gap-hint {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
  font-style: italic;
}

/* ─── Reveal Schedule ───────────────────────────────────────────────────── */
.bf-reveal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 9px;
}
.bf-reveal-date {
  color: var(--text-1);
  font-weight: 600;
  min-width: 80px;
}
.bf-reveal-event {
  color: var(--text-2);
  flex: 1;
}
.bf-reveal-days {
  color: var(--amber);
  font-weight: 600;
  min-width: 30px;
}
.bf-reveal-rails {
  color: var(--text-3);
  font-size: 8px;
}

/* ─── Readiness Card ────────────────────────────────────────────────────── */
.bf-readiness-card {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.bf-readiness-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.bf-readiness-item {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-2);
}
.bf-readiness-item strong {
  color: var(--text-1);
}

/* ═══ MULTI-SHERLOCK INSTANCES ═════════════════════════════════════════════ */

/* Spawn button in cell headers */
.sh-spawn-btn {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  padding: 1px 6px;
  font-size: 8px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
  white-space: nowrap;
}
.sh-spawn-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-glow);
}

/* Embedded mini-chat container */
.sh-instance {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface-1);
  overflow: hidden;
  transition: height 0.25s ease, opacity 0.2s ease;
  margin-top: 6px;
}
.sh-instance.sh-minimized {
  height: 28px !important;
  min-height: 28px !important;
  overflow: hidden;
}

/* Mini-chat header */
.sh-instance-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.sh-instance-header .sh-orb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(0,168,255,0.5), rgba(0,100,200,0.15));
  flex-shrink: 0;
}
.sh-instance-header .sh-title {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-instance-header .sh-scope-badge {
  font-size: 7px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.sh-scope-badge.scope-belief   { background: var(--blue-glow);  color: var(--blue);  }
.sh-scope-badge.scope-reader   { background: var(--green-glow); color: var(--green); }
.sh-scope-badge.scope-lens     { background: var(--amber-glow); color: var(--amber); }
.sh-scope-badge.scope-general  { background: var(--border);     color: var(--text-2);}
/* v11.x: Reformulated section scope badge */
.sh-scope-badge.scope-reform   { background: rgba(0,200,83,0.10); color: var(--green); border: 1px solid rgba(0,200,83,0.20); }
.sh-instance-header button {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.sh-instance-header button:hover { color: var(--text-0); }

/* Mini-chat body */
.sh-instance-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  min-height: 0;
  font-size: 10px;
  line-height: 1.5;
}
.sh-instance-body::-webkit-scrollbar { width: 3px; }
.sh-instance-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.sh-instance-body .sh-msg-user {
  text-align: right;
  margin-bottom: 8px;
}
.sh-instance-body .sh-msg-user .sh-bubble {
  display: inline-block;
  background: var(--blue-glow);
  border: 1px solid rgba(0,168,255,0.15);
  border-radius: 10px 10px 2px 10px;
  padding: 6px 10px;
  color: var(--text-1);
  max-width: 85%;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
.sh-instance-body .sh-msg-assistant {
  margin-bottom: 8px;
}
.sh-instance-body .sh-msg-assistant .sh-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px 10px 10px 10px;
  padding: 6px 10px;
  color: var(--text-1);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.sh-instance-body .sh-time {
  font-size: 7px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Mini-chat footer / input */
.sh-instance-footer {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}
.sh-instance-footer textarea {
  flex: 1;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 9px;
  color: var(--text-1);
  font-family: var(--mono);
  resize: none;
  outline: none;
  line-height: 1.4;
}
.sh-instance-footer textarea:focus {
  border-color: var(--blue);
}
.sh-instance-footer button {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.sh-instance-footer button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Responsive: hide wide controls in narrow Sherlock main drawer */
#ivr-chat-drawer.sh-narrow .sh-ctrl-wide { display: none !important; }
#ivr-chat-drawer-header.sh-narrow .sh-ctrl-wide { display: none !important; }
/* v17: Essential action buttons (BUILD LENS, SHERLOCK SCAN) survive narrow mode.
   Only override when JS has activated them (via .sh-active data class). */
#ivr-chat-drawer-header.sh-narrow .sh-ctrl-action.sh-active { display: inline-flex !important; }
#ivr-chat-drawer-header.sh-narrow .sh-ctrl-action button {
  font-size: 6.5px !important;
  padding: 2px 6px !important;
}

/* v6.3.3: Also hide wide controls when docked in narrow fin-chat-col */
.fin-chat-col { container-type: inline-size; }
@container (max-width: 339px) {
  .sh-ctrl-wide { display: none !important; }
  /* v17: Essential action buttons stay visible even in docked narrow column */
  .sh-ctrl-action.sh-active { display: inline-flex !important; }
  .sh-ctrl-action button {
    font-size: 6.5px !important;
    padding: 2px 6px !important;
  }
}

/* v6.3.3: Prevent header children overlapping at any width */
#ivr-chat-drawer-header {
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}
#ivr-chat-drawer-header .chat-header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Empty state */
.sh-instance-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  text-align: center;
}
.sh-instance-empty .sh-orb {
  width: 28px; height: 28px; margin-bottom: 8px;
}
.sh-instance-empty .sh-hint {
  font-size: 8px;
  color: var(--text-3);
  max-width: 180px;
  line-height: 1.5;
}

/* Resize handle for embedded instances */
.sh-instance-resize {
  height: 4px;
  cursor: row-resize;
  background: transparent;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sh-instance-resize:hover { background: var(--blue-glow); }

/* ─── Light mode overrides for multi-Sherlock instances ─── */
html.light-mode .sh-instance {
  background: var(--surface-0);
  border-color: var(--border-1);
}
html.light-mode .sh-instance-header {
  background: var(--surface-1);
  border-color: var(--border-1);
}
html.light-mode .sh-instance-header .sh-title { color: var(--text-1); }
html.light-mode .sh-instance-header button { color: var(--text-3); }
html.light-mode .sh-instance-header button:hover { color: var(--text-0); }
html.light-mode .sh-instance-body { background: var(--bg-0); }
html.light-mode .sh-instance-body .sh-msg-user .sh-bubble {
  background: var(--surface-1);
  color: var(--text-0);
}
html.light-mode .sh-instance-body .sh-msg-assistant .sh-bubble {
  background: var(--surface-2);
  color: var(--text-0);
}
html.light-mode .sh-instance-footer {
  background: var(--surface-1);
  border-color: var(--border-1);
}
html.light-mode .sh-instance-footer textarea {
  background: var(--bg-0);
  color: var(--text-0);
  border-color: var(--border-1);
}
html.light-mode .sh-instance-footer button {
  background: var(--surface-2);
  color: var(--text-0);
}
html.light-mode .sh-instance-empty .sh-hint { color: var(--text-3); }
html.light-mode .sh-spawn-btn {
  color: var(--text-2);
  border-color: var(--border-1);
}
html.light-mode .sh-spawn-btn:hover {
  background: var(--surface-1);
  color: var(--text-0);
}

/* ─── Light mode: docked Sherlock column ─── */
html.light-mode .fin-chat-col {
  background: var(--surface-0) !important;
  border-left-color: var(--border-1);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.light-mode .fin-chat-col #ivr-chat-drawer-header {
  border-bottom: 1px solid var(--border-1);
  background: linear-gradient(180deg, rgba(180, 160, 130, 0.12) 0%, transparent 100%);
}
html.light-mode .fin-chat-col #ivr-chat-drawer-body {
  background: var(--bg-0);
  color: var(--text-1);
}
html.light-mode .fin-chat-col #ivr-chat-drawer-footer {
  border-top: 1px solid var(--border-1);
  background: rgba(0,0,0,0.03);
}
html.light-mode .fin-chat-col #ivr-chat-input {
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border-1);
  color: var(--text-1);
}
html.light-mode .fin-chat-col #ivr-chat-input:focus {
  border-color: var(--blue);
  background: rgba(0,0,0,0.02);
}
html.light-mode #fin-splitter-chat {
  background: var(--border-1);
}
/* v16: Light mode dashboard grid borders */
html.light-mode #dashboard-editor-overlay .wb-freeform-grid {
  border-color: var(--border-1);
}
html.light-mode #dashboard-editor-overlay .wb-frow {
  border-bottom-color: var(--border-1);
}
html.light-mode #dashboard-editor-overlay .wb-fcell {
  border-right-color: var(--border-1);
}

/* ─── Dashboard Editor Overlay (v16 — viewport-fit, bordered grid) ──── */
/* v16.2: Overlay is a flex sibling in #tab-financials, sits below the real .section-header */
#dashboard-editor-overlay {
  display: none;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  background: var(--bg-0);
  overflow: hidden;
  z-index: 5;                 /* below section-header (z:70) but above nothing special */
}
#dashboard-editor-overlay.active {
  display: flex;
}
/* v16.2: When dashboard is active, hide standard content below section-header */
#tab-financials.dashboard-active > .fin-toolbar,
#tab-financials.dashboard-active > .chunk-b-upload-area,
#tab-financials.dashboard-active > .chunk-b-ask-mode-area,
#tab-financials.dashboard-active > .fin-controls-bar,
#tab-financials.dashboard-active > .fin-split {
  display: none !important;
}
/* v12.2: No heavy header — just a thin status bar */
.dashboard-overlay-header {
  display: none; /* removed heavy header — controls live in the picker toolbar */
}
/* The body area where grid + layout picker live */
.dashboard-overlay-body {
  flex: 1 1 0%;
  min-height: 0;           /* v16: allow flex shrink — critical for viewport fit */
  display: flex;
  flex-direction: column;
  overflow: hidden;         /* v16: no body scroll — grid scrolls internally */
  position: relative;
}
/* Layout picker inside overlay — sits at top, never scrolls, no inherited margins */
#dashboard-editor-overlay .wb-layout-picker {
  position: relative;       /* v16: no sticky — picker is a flex item at top */
  z-index: 10;
  flex-shrink: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-2);
  margin: 0;                /* v16.1: kill inherited margin-bottom: 6px from base */
}
/* v16: Grid fills remaining space, scrolls internally */
#dashboard-editor-overlay .wb-freeform-grid {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* v16: Bordered dashboard area — visual delimiter for the user's eyes */
  border: 1px solid var(--border-2);
  border-top: none;         /* picker border-bottom covers this edge */
  background: var(--bg-0);
}
/* v16: Rows inside the dashboard grid — subtle row separators */
#dashboard-editor-overlay .wb-frow {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#dashboard-editor-overlay .wb-frow:last-child {
  border-bottom: none;
}
/* v16: Cells inside rows — subtle vertical separators */
#dashboard-editor-overlay .wb-fcell {
  border-right: 1px solid rgba(255,255,255,0.04);
}
#dashboard-editor-overlay .wb-fcell:last-child {
  border-right: none;
}
/* v16: Thin scrollbar for dashboard grid */
#dashboard-editor-overlay .wb-freeform-grid::-webkit-scrollbar { width: 4px; }
#dashboard-editor-overlay .wb-freeform-grid::-webkit-scrollbar-track { background: transparent; }
#dashboard-editor-overlay .wb-freeform-grid::-webkit-scrollbar-thumb {
  background: rgba(0,168,255,0.15); border-radius: 4px;
}
#dashboard-editor-overlay .wb-freeform-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0,168,255,0.3);
}
#dashboard-editor-overlay .wb-freeform-grid { scrollbar-width: thin; scrollbar-color: rgba(0,168,255,0.15) transparent; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* v14: Dashboard Editor — clean redesign                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Picker container override for v14 */
.db-picker-v14 {
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* v16.2: Dashboard no longer has its own info/section bar.
   The real #tab-financials > .section-header is always visible above the overlay. */

/* ─── Mode bar: always visible, compact ──────────────────────────────────── */
.db-mode-bar {
  display: flex;
  align-items: center;
  justify-content: center;    /* v16: center the STANDARD/EDIT controls */
  gap: 3px;
  padding: 4px 8px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}
.db-mode-btn {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.db-mode-btn:hover { background: var(--bg-4); color: var(--text-0); }
.db-mode-icon { font-size: 10px; line-height: 1; }

/* STANDARD button — amber accent */
.db-standard-exit-btn {
  color: var(--text-1);
  border-color: var(--border);
}
.db-standard-exit-btn:hover {
  border-color: var(--amber, #f0b429);
  color: var(--amber, #f0b429);
  background: rgba(240, 180, 41, 0.08);
}

/* EDIT / DONE button — green accent */
.db-edit-toggle-btn {
  color: var(--green);
  border-color: rgba(46, 204, 113, 0.3);
}
.db-edit-toggle-btn:hover {
  border-color: var(--green);
  background: rgba(46, 204, 113, 0.08);
}
/* Active edit state: inverted green */
#dashboard-editor-overlay.db-edit-active .db-edit-toggle-btn {
  color: var(--bg-0);
  background: var(--green);
  border-color: var(--green);
}

/* Undo/redo — compact icon buttons */
.db-undo-btn, .db-redo-btn {
  width: 22px;
  padding: 0;
  justify-content: center;
  color: var(--blue);
  border-color: rgba(52, 152, 219, 0.2);
  font-size: 10px;
}
.db-undo-btn:hover, .db-redo-btn:hover {
  border-color: var(--blue);
  background: rgba(52, 152, 219, 0.08);
}

/* v16.3: SAVE VIEW button — green accent */
.db-save-view-btn {
  color: var(--green, #2ecc71);
  border-color: rgba(46, 204, 113, 0.3);
  margin-left: 4px;
}
.db-save-view-btn:hover {
  border-color: var(--green, #2ecc71);
  background: rgba(46, 204, 113, 0.1);
  color: var(--green, #2ecc71);
}

/* v16.3: Saved view pills in toolbar */
.saved-view-pill {
  border-color: rgba(0, 168, 255, 0.25) !important;
}
.saved-view-pill.active {
  background: rgba(0, 168, 255, 0.15) !important;
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
.saved-view-new-btn {
  color: var(--blue) !important;
  border-color: rgba(0, 168, 255, 0.3) !important;
  border-style: dashed !important;
}
.saved-view-new-btn:hover {
  background: rgba(0, 168, 255, 0.1) !important;
}

/* v16.3: Context menu for saved views */
.saved-view-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-family: var(--mono);
  font-size: 8px;
}
.saved-view-ctx-item {
  padding: 4px 12px;
  cursor: pointer;
  color: var(--text-2);
  white-space: nowrap;
}
.saved-view-ctx-item:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.saved-view-ctx-item.danger:hover {
  background: rgba(255,68,68,0.1);
  color: var(--red);
}

/* ─── Edit panel: hidden by default, slides open ─────────────────────────── */
.db-edit-panel {
  display: none;
  flex-direction: column;
  flex-shrink: 0;              /* v16: never compress the edit panel */
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-2);
  max-height: 40vh;            /* v16: cap edit panel so grid gets most space */
  overflow-y: auto;
}
#dashboard-editor-overlay.db-edit-active .db-edit-panel {
  display: flex;
}

/* ─── Tool groups: horizontal strips ─────────────────────────────────────── */
.db-tool-group {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-wrap: wrap;
}
.db-tool-group-label {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: 1px;
  padding: 0 4px 0 0;
  opacity: 0.6;
  min-width: 32px;
}
/* v8.2: Suggest group — dimmer, collapsible feel */
.db-suggest-group {
  opacity: 0.65;
  transition: opacity 0.2s;
}
.db-suggest-group:hover {
  opacity: 1;
}
.db-tool-group-sep {
  width: 1px;
  height: 14px;
  background: var(--border-2);
  margin: 0 3px;
  opacity: 0.4;
}
.db-tool-btn {
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  height: 20px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.db-tool-btn:hover {
  border-color: var(--amber, #f0b429);
  color: var(--amber, #f0b429);
  background: rgba(240, 180, 41, 0.06);
}
.db-danger-btn:hover {
  border-color: var(--red, #e74c3c) !important;
  color: var(--red, #e74c3c) !important;
  background: rgba(231, 76, 60, 0.06) !important;
}
.db-sherlock-btn {
  color: var(--green);
  border-color: rgba(46, 204, 113, 0.25);
}
/* (Dashboard save/preset button CSS removed) */

/* ─── Sections panel: categorized grid ───────────────────────────────────── */
/* v16: Sections panel — uses same pane-group + subtab-pill classes as standard bar */
.db-sections-panel {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.db-sections-panel::-webkit-scrollbar { display: none; }
/* v16: Section pills in editor — active = in grid (green), hover-to-remove = red */
.db-sections-panel .subtab-pill.active {
  color: var(--green);
  border-color: rgba(0, 200, 83, 0.35);
  background: rgba(0, 200, 83, 0.08);
}
.db-sections-panel .subtab-pill.active:hover {
  background: rgba(231, 76, 60, 0.06);
  border-color: rgba(231, 76, 60, 0.3);
  color: var(--red, #e74c3c);
}
/* v16.2: Dashboard section pills must ALWAYS be clickable — override standard pane-group lock */
.db-sections-panel .pane-group .subtab-pills,
.db-sections-panel .pane-group:not(.pane-active) .subtab-pills {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* v16.2: db-section-bar removed — real .section-header is always visible */

/* ─── View mode overrides (v16.1 — zero-gap, seamless dashboard) ─────── */
/* Hide ALL editing chrome in view mode */
#dashboard-editor-overlay:not(.db-edit-active) .wb-frow-bar { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-section-handle { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-fcell-empty { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-frow-selected { outline: none; background: transparent; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-row-edge-handle { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-drop-zone { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-cell-resize-handle { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-subcell-resize-handle { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-subrow-resize-handle { display: none; }
#dashboard-editor-overlay:not(.db-edit-active) .wb-tile-rh { display: none; }
/* Rows: stretch to fill the grid, no minimum heights */
#dashboard-editor-overlay:not(.db-edit-active) .wb-frow {
  flex: 1 1 0%;
  min-height: 0;
}
/* v16.3: Minimized rows hide entirely in view mode */
#dashboard-editor-overlay:not(.db-edit-active) .wb-frow.wb-frow-minimized {
  display: none;
}
/* Cell container: fill the entire row (frow-bar is hidden, so cells = 100%) */
#dashboard-editor-overlay:not(.db-edit-active) .wb-frow-cells {
  flex: 1 1 0%;
  min-height: 0;
}
/* Cells: flush layout, no padding/minimums, fill available space */
#dashboard-editor-overlay:not(.db-edit-active) .wb-fcell {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
/* Section wrappers: seamless, no borders/margins/bg, fill their cell */
#dashboard-editor-overlay:not(.db-edit-active) .wb-section-draggable {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
/* Section content: fill the wrapper, scroll internally */
#dashboard-editor-overlay:not(.db-edit-active) .wb-section-content {
  flex: 1 1 0%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
/* Placeholder sections: fill like real sections */
#dashboard-editor-overlay:not(.db-edit-active) .wb-section-placeholder {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── v17: Saved View Mode — cleaner overlay matching standard view aesthetic ─── */
/* Hide the layout picker toolbar entirely in saved view mode */
#dashboard-editor-overlay.db-saved-view-mode .wb-layout-picker { display: none !important; }
/* Remove grid border to look seamless like standard columns */
#dashboard-editor-overlay.db-saved-view-mode .wb-freeform-grid {
  border: none;
  background: transparent;
}
/* Remove row separators */
#dashboard-editor-overlay.db-saved-view-mode .wb-frow {
  border-bottom: none;
}
/* Remove cell separators — use a subtle gap instead */
#dashboard-editor-overlay.db-saved-view-mode .wb-fcell {
  border-right: none;
}
/* Add subtle spacing between cells like standard column splitters */
#dashboard-editor-overlay.db-saved-view-mode .wb-frow-cells {
  gap: 6px;
}
/* Section content gets standard-view-like padding + column scroll */
#dashboard-editor-overlay.db-saved-view-mode .wb-section-content {
  overflow-y: auto;
}
/* Hide the mode bar in the overlay when in saved view mode */
#dashboard-editor-overlay.db-saved-view-mode .db-mode-bar { display: none !important; }
#dashboard-editor-overlay.db-saved-view-mode .db-edit-panel { display: none !important; }
#dashboard-editor-overlay.db-saved-view-mode .db-edit-toggle-btn { display: none !important; }

/* Edit mode: show row bars + fill grid */
#dashboard-editor-overlay.db-edit-active .wb-frow-bar { display: flex; }
/* v16.1: In edit mode, rows distribute evenly to fill the grid */
#dashboard-editor-overlay.db-edit-active .wb-frow {
  flex: 1 1 0%;
  min-height: 0;
}
#dashboard-editor-overlay.db-edit-active .wb-frow-cells {
  flex: 1 1 0%;
  min-height: 0;
}
#dashboard-editor-overlay.db-edit-active .wb-fcell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
/* v16.3: Horizontal cell direction must override the column default in edit mode */
#dashboard-editor-overlay.db-edit-active .wb-fcell.wb-fcell-row-dir {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* v16.3: Sub-container inside a row-direction cell must span full width and fill height */
#dashboard-editor-overlay.db-edit-active .wb-fcell.wb-fcell-row-dir > .wb-subcell-container {
  flex-basis: 100%;
  flex: 1 1 100%;
  min-height: 0;
}
/* (Preset delete CSS removed) */

/* ═══════════════════════════════════════════════════════════════════════════════
 * v16.4: BELIEF ACCOUNTING TAB — MAP-mode Lens Compiler
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Header ─── */
.ba-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ba-header-left { flex-shrink: 0; }
.ba-header-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  font: 8px/1 var(--mono);
  color: var(--text-3);
}
.ba-stat { display: flex; align-items: center; gap: 3px; }
.ba-stat-num { font-weight: 700; color: var(--text-1); font-size: 10px; }
.ba-stat-warn { color: var(--amber); }
.ba-stat-ts { margin-left: auto; font-size: 7px; opacity: 0.6; }

.ba-generate-btn {
  font: 700 9px/1 var(--mono);
  background: rgba(0, 168, 255, 0.12);
  color: var(--blue);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ba-generate-btn:hover { background: rgba(0, 168, 255, 0.2); border-color: var(--blue); }
.ba-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* IVr readiness badge next to generate button */
.ba-ivr-status {
  font: 700 8px/1 var(--mono);
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: 6px;
  white-space: nowrap;
}
.ba-ivr-ready {
  color: rgb(0, 200, 83);
  background: rgba(0, 200, 83, 0.12);
  border: 1px solid rgba(0, 200, 83, 0.3);
}
.ba-ivr-missing {
  color: rgb(255, 82, 82);
  background: rgba(255, 82, 82, 0.12);
  border: 1px solid rgba(255, 82, 82, 0.3);
}
.ba-ivr-running {
  color: rgb(240, 180, 41);
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.3);
  animation: ba-ivr-pulse 1.2s ease-in-out infinite;
}
@keyframes ba-ivr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.ba-mode-strip { display: flex; gap: 2px; flex-shrink: 0; }
.ba-mode-btn {
  font: 700 8px/1 var(--mono);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.ba-mode-btn.active {
  background: rgba(0, 168, 255, 0.12);
  color: var(--blue);
  border-color: rgba(0, 168, 255, 0.3);
}
.ba-mode-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── Validation banner ─── */
.ba-validation-banner {
  padding: 4px 12px;
  background: rgba(255, 68, 68, 0.08);
  border-bottom: 1px solid rgba(255, 68, 68, 0.2);
  font: 8px/1.4 var(--mono);
  color: var(--red);
}

/* ─── Three-column layout ─── */
.ba-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.ba-col-left {
  width: 220px;
  min-width: 180px;
  max-width: 280px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
}
.ba-col-center {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}
.ba-col-right {
  width: 280px;
  min-width: 200px;
  max-width: 360px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
}

/* Tab panel must be flex column to fill height */
#tab-beliefAccounting {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#tab-beliefAccounting:not(.active) { display: none; }
/* Prompt 13: .active override with explicit viewport height is in the layout CSS block below */

/* ─── Lens list (left column) ─── */
.ba-lens-list { padding: 4px 0; }
.ba-lens-item {
  padding: 6px 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.12s;
}
.ba-lens-item:hover { background: var(--bg-2); }
.ba-lens-item.selected {
  background: rgba(0, 168, 255, 0.06);
  border-left-color: var(--blue);
}
.ba-lens-item-name {
  font: 700 9px/1.3 var(--mono);
  color: var(--text-1);
  margin-bottom: 2px;
}
.ba-lens-item-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font: 7px/1 var(--mono);
  color: var(--text-3);
  margin-bottom: 3px;
}
.ba-lens-type { text-transform: uppercase; }
.ba-lens-conf { font-weight: 700; }
.ba-conf-high { color: var(--green); }
.ba-conf-med { color: var(--amber); }
.ba-conf-low { color: var(--red); }
.ba-lens-unresolved-badge {
  background: rgba(255, 68, 68, 0.1);
  color: var(--red);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 7px;
}
.ba-lens-item-chips {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.ba-role-chip {
  font: 600 7px/1 var(--mono);
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--bg-2);
  color: var(--text-2);
}
.ba-role-constraint-geometry { background: rgba(0, 168, 255, 0.1); color: var(--blue); }
.ba-role-belief-buffer { background: rgba(46, 204, 113, 0.1); color: var(--green); }
.ba-role-forced-actor-threshold { background: rgba(255, 68, 68, 0.1); color: var(--red); }
.ba-anchor-count {
  font: 7px/1 var(--mono);
  color: var(--text-3);
  margin-left: auto;
}

/* ─── Lens canvas (center column) ─── */
.ba-lens-canvas { padding: 12px 16px; }
.ba-canvas-section {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.ba-canvas-section-header {
  font: 700 8px/1 var(--mono);
  color: var(--text-2);
  padding: 5px 10px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
}
.ba-canvas-body {
  padding: 8px 10px;
  font: 8px/1.5 var(--mono);
  color: var(--text-2);
}
.ba-canvas-body p { margin: 0 0 6px; }
.ba-lens-question {
  font: 9px/1.5 var(--mono);
  color: var(--cyan, #56c8d8);
  padding: 8px 10px;
  font-style: italic;
}

/* Anchor tags */
.ba-anchor-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.ba-anchor-tag {
  font: 7px/1 var(--mono);
  padding: 2px 5px;
  background: rgba(0, 168, 255, 0.08);
  color: var(--blue);
  border-radius: 2px;
  border: 1px solid rgba(0, 168, 255, 0.15);
}

/* Pressure stats */
.ba-pressure-stats {
  display: flex;
  gap: 10px;
  font: 7px/1 var(--mono);
  color: var(--text-3);
  margin-top: 4px;
}

/* Driver / entanglement */
.ba-driver-list, .ba-entangle-notes { margin-top: 4px; }
.ba-driver-item {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font: 8px/1.4 var(--mono);
  color: var(--text-2);
}
.ba-entangle-note {
  padding: 2px 0;
  font: 8px/1.4 var(--mono);
  color: var(--amber);
}

/* Constraint groups */
.ba-constraint-group { margin-bottom: 6px; }
.ba-constraint-label {
  font: 700 7px/1 var(--mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 3px;
}
.ba-constraint-item {
  font: 8px/1.4 var(--mono);
  color: var(--text-2);
  padding: 2px 0 2px 8px;
  border-left: 2px solid rgba(255,255,255,0.06);
}

/* Confidence badge */
.ba-conf-badge {
  display: inline-block;
  font: 700 8px/1 var(--mono);
  padding: 2px 6px;
  border-radius: 2px;
  margin-bottom: 6px;
}
.ba-conf-badge.ba-conf-high { background: rgba(46,204,113,0.1); color: var(--green); }
.ba-conf-badge.ba-conf-med { background: rgba(240,180,41,0.1); color: var(--amber); }
.ba-conf-badge.ba-conf-low { background: rgba(255,68,68,0.1); color: var(--red); }

/* Fog refs */
.ba-fog-refs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.ba-fog-ref {
  font: 7px/1 var(--mono);
  padding: 1px 4px;
  background: rgba(255,68,68,0.06);
  color: var(--red);
  border-radius: 2px;
}
.ba-provenance {
  font: 7px/1 var(--mono);
  color: var(--text-3);
  margin-top: 4px;
}

/* Analyst notes textarea */
.ba-analyst-notes-section { border-color: rgba(0,168,255,0.15); }
.ba-analyst-textarea {
  width: 100%;
  min-height: 60px;
  background: var(--bg-0);
  border: none;
  color: var(--text-1);
  font: 8px/1.5 var(--mono);
  padding: 8px;
  resize: vertical;
}
.ba-analyst-textarea:focus { outline: 1px solid rgba(0,168,255,0.3); }

/* ─── Evidence panel (right column) ─── */
.ba-evidence-panel { display: flex; flex-direction: column; height: 100%; }
.ba-evidence-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ba-evidence-tab {
  font: 700 7px/1 var(--mono);
  padding: 5px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.12s;
}
.ba-evidence-tab:hover { color: var(--text-1); }
.ba-evidence-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.ba-evidence-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.ba-evidence-item {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ba-evidence-item:hover { background: var(--bg-1); }
.ba-evidence-item-header {
  font: 700 8px/1 var(--mono);
  color: var(--cyan, #56c8d8);
  margin-bottom: 2px;
}
.ba-evidence-item-body {
  font: 8px/1.4 var(--mono);
  color: var(--text-2);
}
.ba-evidence-amount {
  font: 700 8px/1 var(--mono);
  color: var(--text-1);
  margin-top: 2px;
}
.ba-evidence-values {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ba-evidence-value {
  font: 7px/1 var(--mono);
  color: var(--text-3);
}
.ba-desc-tag {
  display: inline-block;
  font: 7px/1 var(--mono);
  padding: 1px 4px;
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: 2px;
  margin-right: 3px;
}

/* ─── Empty state ─── */
.ba-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.ba-empty-msg {
  font: 9px/1.5 var(--mono);
  color: var(--text-3);
  text-align: center;
}

/* ─── Progress overlay ─── */
.ba-progress-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.ba-progress-inner {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 30px;
  min-width: 300px;
  text-align: center;
}
.ba-progress-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ba-progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.3s;
}
.ba-progress-msg {
  font: 8px/1.4 var(--mono);
  color: var(--text-2);
}

/* ─── Summary card (for dashboard tiles, Phase 2) ─── */
.ba-summary-card {
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.ba-summary-title {
  font: 700 8px/1 var(--mono);
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.ba-summary-row {
  display: flex;
  justify-content: space-between;
  font: 8px/1.4 var(--mono);
  color: var(--text-2);
  margin-bottom: 2px;
}
.ba-summary-ts {
  font: 7px/1 var(--mono);
  color: var(--text-3);
  margin-top: 4px;
}
.ba-summary-open-btn {
  font: 700 8px/1 var(--mono);
  color: var(--blue);
  background: rgba(0,168,255,0.08);
  border: 1px solid rgba(0,168,255,0.2);
  border-radius: 2px;
  padding: 3px 8px;
  cursor: pointer;
  margin-top: 6px;
}
.ba-summary-open-btn:hover { background: rgba(0,168,255,0.15); }

/* Badge strip */
.ba-badge-strip { display: flex; gap: 3px; flex-wrap: wrap; }
.ba-badge {
  font: 700 7px/1 var(--mono);
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--bg-2);
  color: var(--text-2);
}

/* Deep-link icon on reform rows */
/* ── Action icons: hover-reveal only (declutter resting state) ── */
.inv-icon {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  color: var(--text-4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  margin-left: 3px;
  vertical-align: middle;
}
tr:hover .inv-icon { opacity: 0.6; }
.inv-icon:hover { opacity: 1 !important; color: var(--blue); }

.ba-deeplink-icon {
  cursor: pointer;
  font-size: 8px;
  color: var(--blue);
  opacity: 0;
  margin-left: 3px;
  vertical-align: middle;
  transition: opacity 0.15s;
}
tr:hover .ba-deeplink-icon { opacity: 0.6; }
.ba-deeplink-icon:hover { opacity: 1 !important; }

/* ── Investigation panel: anchor indicator on source row ── */
.data-table tbody tr.investigating-row {
  border-right: 3px solid var(--blue, #00a8ff);
  background: rgba(0, 168, 255, 0.04) !important;
}
.data-table tbody tr.investigating-row > td:first-child {
  border-left: 2px solid var(--blue, #00a8ff);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * BELIEF ACCOUNTING VISUALIZATION SYSTEM — CSS
 * Observatory aesthetic: deep charcoal, luminous data, high density
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;600&display=swap');

/* ── Container ── */
.bav-container {
  background: var(--bg-1);
  color: var(--text-0);
  font-family: 'IBM Plex Sans', sans-serif;
  padding: 8px;
  min-height: 400px;
}

/* ── View Controls ── */
.bav-view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.bav-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bav-view-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--border-1);
  border-radius: 3px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.2s;
}
.bav-view-btn:hover { color: var(--text-0); border-color: var(--blue); }
.bav-view-btn.active { color: var(--text-0); background: rgba(84,160,255,0.12); border-color: var(--blue); }

.bav-deductive-trigger {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 12px;
  border: 1px solid rgba(254,202,87,0.3);
  border-radius: 3px;
  background: rgba(254,202,87,0.08);
  color: var(--amber);
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 8px;
}
.bav-deductive-trigger:hover { background: rgba(254,202,87,0.18); border-color: var(--amber); }

/* ── Deductive Mode Banner ── */
.bav-deductive-banner {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 4px 10px;
  background: rgba(254,202,87,0.08);
  border: 1px solid rgba(254,202,87,0.25);
  border-radius: 3px;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bav-deductive-banner-label { font-weight: 700; }
.bav-deductive-banner-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 11px;
  padding: 0 4px;
}
.bav-deductive-banner-close:hover { color: var(--text-0); }

/* ── Phase Bar ── */
.bav-phase-bar { display: flex; flex-direction: column; gap: 3px; min-width: 180px; }
.bav-phase-bar-compact { min-width: 120px; gap: 2px; }
.bav-phase-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.bav-phase-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  width: 16px;
  text-align: right;
}
.bav-phase-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.bav-phase-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 300ms ease-out;
  min-width: 0;
}
.bav-phase-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: var(--text-3);
  width: 20px;
  text-align: right;
}
.bav-phase-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: var(--text-3);
  width: 22px;
}

/* Mini phase bar (for list items) */
.bav-phase-mini {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  padding-top: 2px;
}
.bav-phase-mini-bar {
  width: 6px;
  border-radius: 1px;
  min-height: 2px;
  transition: height 300ms ease-out;
}

/* ── Landscape ── */
.bav-landscape-wrap {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.bav-landscape-svg {
  display: block;
  width: 100%;
  height: auto;
}
.bav-landscape-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-3);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
}

/* Node animation */
@keyframes bavFadeIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* Pulse animation for HIGH binding nodes */
.bav-pulse {
  animation: bavPulse 4s ease-in-out infinite;
}
@keyframes bavPulse {
  0%, 100% { opacity: 0.2; r: inherit; }
  50% { opacity: 0.35; }
}

/* Entanglement line animation */
.bav-entangle-line {
  stroke-dasharray: 4,4;
  animation: bavEntangleDraw 500ms ease-out forwards;
}
@keyframes bavEntangleDraw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

/* Node hover */
.bav-node { cursor: pointer; transition: transform 0.15s; }
.bav-node:hover { transform: scale(1.08); }

/* ── Detail View ── */
.bav-detail-panel {
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  overflow-y: auto;
  max-height: 600px;
}
.bav-detail { padding: 10px; }
.bav-detail-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-3);
  font-size: 11px;
}

/* Detail header */
.bav-detail-header {
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 3px;
}
.bav-detail-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 4px;
}
.bav-detail-dot { font-size: 14px; }
.bav-detail-question {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  color: #c8d6e5;
  line-height: 1.5;
  margin-bottom: 8px;
  font-style: italic;
}
.bav-detail-header-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.bav-detail-header-phase { flex: 1; }
.bav-detail-header-stats {
  min-width: 140px;
  font-family: 'JetBrains Mono', monospace;
}
.bav-stat-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  line-height: 1.7;
}
.bav-stat-label { color: var(--text-3); }
.bav-stat-value { color: var(--text-0); font-weight: 600; }
.bav-stat-dim { color: var(--text-3); font-weight: 400; }
.bav-stat-alert { color: #f9ca24; }
.bav-bind-high { color: #22c55e; }
.bav-bind-med { color: var(--amber); }
.bav-bind-low { color: var(--red); }

/* Detail sections */
.bav-detail-section {
  margin-bottom: 8px;
  border: 1px solid var(--border-1);
  border-radius: 3px;
  overflow: hidden;
}
.bav-section-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.08em;
  padding: 5px 8px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-1);
}
.bav-section-body { padding: 8px; }

/* Evidence layers */
.bav-evidence-group {
  padding: 6px 8px;
  margin: 4px 0;
}
.bav-evidence-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.bav-evidence-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  flex-wrap: wrap;
  font-size: 9px;
  line-height: 1.5;
}
.bav-evidence-dot { font-size: 10px; flex-shrink: 0; }
.bav-evidence-label {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--text-0);
  font-weight: 500;
}
.bav-evidence-amount {
  font-family: 'JetBrains Mono', monospace;
  color: var(--blue);
  font-weight: 600;
  font-size: 9px;
}
.bav-evidence-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: var(--text-3);
  padding: 1px 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
}
.bav-evidence-bind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: #4a4a5a;
}
.bav-evidence-summary {
  width: 100%;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 8px;
  color: var(--text-3);
  padding-left: 16px;
  line-height: 1.4;
  font-style: italic;
}

/* Constraint gauges */
.bav-gauge {
  margin-bottom: 10px;
}
.bav-gauge-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 9px;
  color: #c8d6e5;
  margin-bottom: 3px;
}
.bav-gauge-track {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  position: relative;
  overflow: visible;
}
.bav-gauge-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--amber) 60%, var(--red) 100%);
  transition: width 400ms ease-out;
}
.bav-gauge-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 12px;
  background: var(--text-0);
  border-radius: 1px;
  transform: translateX(-50%);
}
.bav-gauge-endpoints {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: #4a4a5a;
  margin-top: 2px;
}
.bav-gauge-danger { color: var(--red); }

/* FAT + buffer items */
.bav-fat-item, .bav-buffer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 9px;
  line-height: 1.4;
}
.bav-fat-icon { color: #f9ca24; font-size: 11px; }
.bav-fat-text { color: var(--text-0); }
.bav-buffer-icon { color: var(--blue); font-size: 8px; }
.bav-buffer-text { color: #c8d6e5; }

/* IVr boundary */
.bav-boundary-section { background: rgba(255,255,255,0.01); }
.bav-boundary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px;
}
.bav-boundary-col { font-size: 9px; }
.bav-boundary-col-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.bav-boundary-sees .bav-boundary-col-title { color: var(--blue); }
.bav-boundary-blind .bav-boundary-col-title { color: var(--text-3); }
.bav-boundary-sees .bav-boundary-item {
  color: var(--text-0);
  padding: 2px 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
.bav-boundary-blind .bav-boundary-item {
  color: var(--text-3);
  padding: 2px 0;
  font-family: 'IBM Plex Sans', sans-serif;
  opacity: 0.7;
}
.bav-boundary-conf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--border-1);
}
.bav-boundary-conf-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-3);
}
.bav-boundary-conf-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}
.bav-boundary-conf-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--amber), #22c55e);
  border-radius: 3px;
  transition: width 400ms ease-out;
}
.bav-boundary-conf-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
}

/* Timeline */
.bav-timeline { padding: 8px; }
.bav-timeline-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  position: relative;
}
.bav-timeline-dot {
  font-size: 10px;
  color: var(--amber);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.bav-timeline-adhoc { color: #f9ca24; font-weight: 700; }
.bav-timeline-connector {
  width: 1px;
  height: 100%;
  background: var(--border-1);
  position: absolute;
  left: 7px;
  top: 16px;
}
.bav-timeline-item:last-child .bav-timeline-connector { display: none; }
.bav-timeline-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 9px;
  color: #c8d6e5;
  line-height: 1.4;
}

/* Analyst handoff */
.bav-handoff-question {
  font-size: 9px;
  color: var(--amber);
  padding: 3px 8px;
  line-height: 1.4;
}
.bav-handoff-path {
  font-size: 9px;
  color: var(--blue);
  padding: 3px 8px;
  line-height: 1.4;
}

/* ── Deductive Mode Overlay ── */
.bav-deductive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bavOverlayIn 300ms ease-out;
}
@keyframes bavOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.bav-deductive-overlay.bav-deductive-exiting {
  animation: bavOverlayOut 300ms ease-in forwards;
}
@keyframes bavOverlayOut { from { opacity: 1; } to { opacity: 0; } }

.bav-deductive-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15,15,26,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bav-deductive-panel {
  position: relative;
  z-index: 101;
  background: var(--bg-3);
  border: 1px solid rgba(254,202,87,0.2);
  border-radius: 6px;
  padding: 24px 28px;
  width: 480px;
  max-width: 90%;
  box-shadow: 0 0 40px rgba(254,202,87,0.06);
  animation: bavPanelIn 300ms ease-out;
}
@keyframes bavPanelIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.bav-deductive-prompt {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: #c8d6e5;
  margin-bottom: 12px;
  text-align: center;
}
.bav-deductive-input {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  color: var(--text-0);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  padding: 10px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.bav-deductive-input:focus { border-color: var(--amber); box-shadow: 0 0 12px rgba(254,202,87,0.1); }
.bav-deductive-input::placeholder { color: #4a4a5a; }
.bav-deductive-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.bav-deductive-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s;
}
.bav-deductive-ask {
  background: rgba(254,202,87,0.12);
  border-color: rgba(254,202,87,0.3);
  color: var(--amber);
}
.bav-deductive-ask:hover { background: rgba(254,202,87,0.22); }
.bav-deductive-cancel {
  background: transparent;
  border-color: var(--border-1);
  color: var(--text-3);
}
.bav-deductive-cancel:hover { color: var(--text-0); border-color: var(--text-3); }
.bav-deductive-loading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--amber);
  animation: bavPulseText 1.5s ease-in-out infinite;
}
@keyframes bavPulseText { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ── Proposal Screen ── */
.bav-proposal { padding: 8px; }
.bav-proposal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bav-proposal-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: 0.05em;
}
.bav-proposal-compile {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 14px;
  background: rgba(84,160,255,0.12);
  border: 1px solid rgba(84,160,255,0.3);
  border-radius: 3px;
  color: var(--blue);
  cursor: pointer;
  transition: all 0.2s;
}
.bav-proposal-compile:hover { background: rgba(84,160,255,0.22); }

.bav-proposal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.bav-proposal-card {
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  padding: 10px;
  transition: all 0.2s;
  position: relative;
}
.bav-proposal-card:hover { border-color: var(--blue); }
.bav-proposal-rejected {
  opacity: 0.25;
  transform: scale(0.95);
}
.bav-proposal-card-dot { font-size: 14px; margin-bottom: 4px; }
.bav-proposal-card-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 4px;
}
.bav-proposal-card-meta {
  display: flex;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.bav-proposal-controls {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.bav-prop-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 2px 8px;
  border: 1px solid var(--border-1);
  border-radius: 2px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
}
.bav-prop-accept.active { color: #22c55e; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
.bav-prop-reject.active { color: var(--red); border-color: rgba(255,107,107,0.3); background: rgba(255,107,107,0.08); }
.bav-prop-btn:hover { color: var(--text-0); border-color: var(--text-3); }
.bav-merge-target { border-color: var(--amber) !important; cursor: crosshair; }

.bav-proposal-justification {
  font-size: 8px;
  color: #4a4a5a;
  margin-top: 6px;
  font-style: italic;
  line-height: 1.3;
  display: none;
}
.bav-proposal-card:hover .bav-proposal-justification { display: block; }

/* ── List View ── */
.bav-list-layout {
  display: flex;
  gap: 8px;
  min-height: 400px;
}
.bav-list-sidebar {
  width: 240px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border-1);
  padding-right: 8px;
}
.bav-list-detail {
  flex: 1;
  overflow-y: auto;
  max-height: 600px;
}
.bav-list-detail-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  font-size: 11px;
}
.bav-list-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-3);
  font-size: 12px;
}

.bav-list-item {
  padding: 6px 8px;
  border-left: 3px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all 0.15s;
}
.bav-list-item:hover { background: rgba(255,255,255,0.03); }
.bav-list-item.selected {
  background: rgba(84,160,255,0.06);
}
.bav-list-item-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bav-list-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-3);
  margin-bottom: 3px;
}
.bav-list-item-mass { color: var(--blue); font-weight: 600; }
.bav-list-item-disc { color: #f9ca24; }

/* ═══════════════════════════════════════════════════════
 * BELIEF ACCOUNTING — Lens Card Styles
 * ═══════════════════════════════════════════════════════ */

.ba-lens-card {
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  color: var(--text-0);
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
}

.ba-lens-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ba-lens-card .ba-lens-title {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0 0 6px 0;
}

.ba-lens-card .ba-lens-question {
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.4;
  max-width: 700px;
  margin-bottom: 12px;
}

/* ── Phase Profile Bar ── */
.ba-phase-grid {
  display: grid;
  grid-template-columns: 32px 1fr 40px;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-1);
  border-radius: 6px;
}

.ba-phase-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.ba-phase-label-ii { color: var(--red); }
.ba-phase-label-cr { color: var(--amber); }
.ba-phase-label-rr { color: var(--blue); }
.ba-phase-label-hc { color: var(--text-2); }

.ba-phase-track {
  height: 18px;
  background: var(--bg-1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.ba-phase-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease-out;
  position: relative;
}

.ba-phase-fill-ii { background: linear-gradient(90deg, var(--red), var(--red-dim)); }
.ba-phase-fill-cr { background: linear-gradient(90deg, var(--amber), #f0932b); }
.ba-phase-fill-rr { background: linear-gradient(90deg, var(--blue), var(--blue-dim)); }
.ba-phase-fill-hc { background: linear-gradient(90deg, #c8d6e5, var(--text-2)); }

.ba-phase-fill.ba-high {
  box-shadow: 0 0 8px currentColor;
}

.ba-phase-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  text-align: left;
}

.ba-phase-role-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
  display: inline-block;
}

.ba-role-cg { background: #2d3436; color: #74b9ff; }
.ba-role-bb { background: #2d3436; color: var(--green); }
.ba-role-fat { background: #2d3436; color: #ff7675; }

/* ── Mass & Skew Badges ── */
.ba-metrics-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ba-metric-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ba-mass-badge {
  background: #2d3436;
  color: var(--text-1);
  border: 1px solid var(--text-3);
}

.ba-skew-neg {
  background: rgba(255, 107, 107, 0.15);
  color: var(--red);
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.ba-skew-pos {
  background: rgba(85, 239, 196, 0.15);
  color: var(--green);
  border: 1px solid rgba(85, 239, 196, 0.3);
}

.ba-skew-sym {
  background: #2d3436;
  color: var(--text-3);
  border: 1px solid var(--text-3);
}

.ba-disc-badge {
  background: rgba(249, 202, 36, 0.15);
  color: #f9ca24;
  border: 1px solid rgba(249, 202, 36, 0.3);
}

.ba-binding-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}

.ba-binding-high { background: rgba(85, 239, 196, 0.15); color: var(--green); }
.ba-binding-med { background: rgba(254, 202, 87, 0.15); color: var(--amber); }
.ba-binding-low { background: rgba(255, 107, 107, 0.15); color: var(--red); }

/* ── Evidence Layers ── */
.ba-evidence-section {
  margin-top: 16px;
}

.ba-evidence-layer {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid;
}

.ba-evidence-layer-ii { background: rgba(255, 107, 107, 0.06); border-left-color: var(--red); }
.ba-evidence-layer-cr { background: rgba(254, 202, 87, 0.06); border-left-color: var(--amber); }
.ba-evidence-layer-rr { background: rgba(84, 160, 255, 0.06); border-left-color: var(--blue); }
.ba-evidence-layer-hc { background: rgba(131, 149, 167, 0.06); border-left-color: var(--text-2); }

.ba-evidence-layer-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ba-evidence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-1);
}

.ba-evidence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ba-evidence-dot-high { background: currentColor; }
.ba-evidence-dot-med { background: transparent; border: 2px solid currentColor; box-sizing: border-box; }
.ba-evidence-dot-low { background: transparent; border: 1px solid currentColor; box-sizing: border-box; opacity: 0.5; }

.ba-evidence-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  min-width: 70px;
  text-align: right;
}

.ba-evidence-label {
  flex: 1;
  color: var(--text-2);
}

.ba-evidence-meta {
  font-size: 10px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

/* ── IVr Boundary ── */
.ba-card-boundary {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-1);
  border-radius: 6px;
  border: 1px dashed var(--border-2);
}

.ba-card-boundary-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 8px;
}

.ba-card-boundary-row {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
  font-size: 12px;
  align-items: center;
}

.ba-card-boundary-engine {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ba-card-boundary-ivb { background: rgba(84, 160, 255, 0.2); color: var(--blue); }
.ba-card-boundary-cafn { background: rgba(162, 155, 254, 0.2); color: var(--violet); }

.ba-card-boundary-text {
  color: var(--text-2);
}

/* ── Cards container ── */
.ba-lens-cards-wrap {
  padding: 8px;
}

/* ═══════════════════════════════════════════════════════════════
 * D1 — ANALYST LENS PROPOSAL SCREEN
 * ═══════════════════════════════════════════════════════════════ */

.ba-proposal-screen { padding: 16px; }

.ba-proposal-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}

.ba-proposal-title {
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--text-0);
}

.ba-compile-btn {
  background: #27ae60; color: white; border: none; padding: 8px 20px;
  border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 13px;
}

.ba-compile-btn:hover { background: #2ecc71; }

.ba-skip-btn {
  background: transparent; color: var(--text-3); border: 1px solid var(--text-3); padding: 8px 16px;
  border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 8px;
}

.ba-proposal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px;
}

.ba-proposal-card {
  background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 6px; padding: 14px;
  position: relative; transition: opacity 0.2s, transform 0.2s;
}

.ba-proposal-dimmed { opacity: 0.35; transform: scale(0.97); }

.ba-proposal-rank {
  position: absolute; top: 8px; right: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3);
}

.ba-proposal-card-title {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
  color: var(--text-0); margin-bottom: 4px; padding-right: 30px;
}

.ba-proposal-card-question {
  font-size: 11px; color: var(--text-2); font-style: italic; line-height: 1.3; margin-bottom: 8px;
}

.ba-proposal-phase-row { display: flex; gap: 2px; margin-bottom: 6px; }

.ba-proposal-phase-pip {
  height: 6px; border-radius: 2px; display: inline-block; min-width: 4px;
}

.ba-proposal-meta {
  display: flex; gap: 8px; align-items: center; font-size: 11px; margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}

.ba-proposal-mass { color: var(--text-1); }
.ba-proposal-skew { color: var(--red); }
.ba-proposal-disc { color: #f9ca24; }
.ba-proposal-evidence { color: var(--text-3); }

.ba-proposal-justification {
  font-size: 11px; color: var(--text-3); line-height: 1.3; margin-bottom: 8px;
  border-left: 2px solid var(--border-2); padding-left: 8px;
}

.ba-proposal-controls { display: flex; gap: 6px; }

.ba-ctrl-reject, .ba-ctrl-merge, .ba-ctrl-restore {
  background: transparent; border: 1px solid var(--text-3); color: var(--text-3);
  width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

.ba-ctrl-reject:hover { border-color: var(--red); color: var(--red); }
.ba-ctrl-merge:hover { border-color: var(--amber); color: var(--amber); }
.ba-ctrl-restore:hover { border-color: var(--blue); color: var(--blue); }

.ba-ctrl-merged-label {
  font-size: 10px; color: var(--text-3); font-family: 'JetBrains Mono', monospace;
  display: flex; align-items: center;
}

.ba-deductive-banner {
  background: rgba(254, 202, 87, 0.1); border: 1px solid rgba(254, 202, 87, 0.3);
  border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; font-size: 12px;
}

.ba-deductive-label {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--amber);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}

.ba-deductive-text { color: var(--text-2); font-style: italic; }


/* ═══════════════════════════════════════════════════════════════
 * D4 — SITUATION MAP DISPLAY
 * ═══════════════════════════════════════════════════════════════ */

.ba-sitmap {
  margin-top: 24px; padding: 16px; background: var(--bg-1);
  border: 1px solid var(--border-2); border-radius: 6px;
}

.ba-sitmap-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}

.ba-sitmap-title {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-0);
}

.ba-sitmap-export {
  background: transparent; border: 1px solid var(--blue); color: var(--blue);
  padding: 4px 12px; border-radius: 4px; font-size: 11px; cursor: pointer;
}

.ba-sitmap-export:hover { background: rgba(84, 160, 255, 0.1); }

.ba-sitmap-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}

.ba-sitmap-section {
  background: var(--bg-3); border-radius: 4px; padding: 10px;
}

.ba-sitmap-section-header {
  display: flex; justify-content: space-between; align-items: center;
  border-left: 3px solid; padding-left: 8px; margin-bottom: 8px;
}

.ba-sitmap-section-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-1);
}

.ba-sitmap-adequacy {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 2px;
}

.ba-sitmap-dense { background: rgba(85, 239, 196, 0.15); color: var(--green); }
.ba-sitmap-adequate { background: rgba(84, 160, 255, 0.15); color: var(--blue); }
.ba-sitmap-thin { background: rgba(254, 202, 87, 0.15); color: var(--amber); }
.ba-sitmap-critically_sparse { background: rgba(255, 107, 107, 0.15); color: var(--red); }

.ba-sitmap-empty { font-size: 11px; color: var(--text-3); font-style: italic; }

.ba-sitmap-obs { padding: 4px 0; border-bottom: 1px solid var(--border-2); }
.ba-sitmap-obs:last-child { border-bottom: none; }

.ba-sitmap-obs-text { font-size: 11px; color: var(--text-2); line-height: 1.3; }
.ba-sitmap-obs-impl { font-size: 10px; color: var(--text-3); margin-top: 2px; }

.ba-sitmap-note {
  font-size: 10px; color: var(--text-3); margin-top: 12px; font-style: italic; text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
 * D5 — BASIN AVAILABLE BANNER
 * ═══════════════════════════════════════════════════════════════ */

.ba-basin-available {
  background: rgba(84, 160, 255, 0.08); border: 1px solid rgba(84, 160, 255, 0.2);
  border-radius: 4px; padding: 8px 12px; margin-top: 8px; font-size: 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.ba-basin-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--blue); text-transform: uppercase;
}

.ba-basin-sentence { color: var(--text-2); font-style: italic; flex: 1; }

.ba-basin-test-btn {
  background: var(--blue); color: white; border: none; padding: 4px 12px;
  border-radius: 3px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}

.ba-basin-test-btn:hover { background: var(--blue-dim); }



/* ═══════════════════════════════════════════════════════════════════════════════
 * LIGHT MODE: Belief Accounting — comprehensive overrides
 * Handles both CSS-variable colors AND JS inline-style hardcoded neon colors
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── BA Surface + Workspace backgrounds ─── */
html.light-mode .ba-surface { background: var(--bg-0); }
html.light-mode .ba-workspace { border-top-color: var(--border-1); }
html.light-mode .ba-lens-box { background: var(--bg-2); border-color: var(--border-1); }
html.light-mode .ba-lens-box .ba-box-header:hover { background: rgba(0, 0, 0, 0.04); }
html.light-mode .ba-box-field input { 
  background: var(--bg-0); border-color: var(--border-1); color: var(--text-0); 
}
html.light-mode .ba-deductive-input { 
  background: var(--bg-0); border-color: var(--border-1); color: var(--text-0); 
}
html.light-mode .ba-deductive-input::placeholder { color: var(--text-3); }

/* ─── BA binding badges: darker colors for light bg ─── */
html.light-mode .ba-bind-high { background: rgba(26, 104, 72, 0.12); color: var(--green); }
html.light-mode .ba-bind-med  { background: rgba(140, 90, 8, 0.12); color: var(--amber); }
html.light-mode .ba-bind-low  { background: rgba(153, 40, 34, 0.12); color: var(--red); }

/* ─── BA BPA status badges ─── */
html.light-mode .ba-box-bpa-sup.unimodal   { background: rgba(26, 104, 72, 0.12); color: var(--green); }
html.light-mode .ba-box-bpa-sup.bimodal    { background: rgba(140, 90, 8, 0.12); color: var(--amber); }
html.light-mode .ba-box-bpa-sup.unresolved { background: rgba(153, 40, 34, 0.12); color: var(--red); }

/* ─── BA workspace status badges ─── */
html.light-mode .ba-ws-draft     { background: rgba(0, 0, 0, 0.06); color: var(--text-2); }
html.light-mode .ba-ws-compiled  { background: rgba(12, 107, 138, 0.12); color: var(--blue); }
html.light-mode .ba-ws-committed { background: rgba(26, 104, 72, 0.12); color: var(--green); }

/* ─── BA buttons ─── */
html.light-mode .ba-action-suggest,
html.light-mode .ba-action-new { border-color: var(--blue); color: var(--blue); }
html.light-mode .ba-action-suggest:hover,
html.light-mode .ba-action-new:hover { background: rgba(12, 107, 138, 0.08); }
html.light-mode .ba-deductive-go { background: var(--red); color: #fff; }
html.light-mode .ba-deductive-go:hover { background: var(--red-dim); }
html.light-mode .ba-box-compile,
html.light-mode .ba-box-recompile { background: var(--blue); color: #fff; }
html.light-mode .ba-box-commit { background: var(--green); color: #fff; }
html.light-mode .ba-harden-btn { background: var(--green); color: #fff; }

/* ─── BA phase adjustment controls ─── */
html.light-mode .ba-box-phase-adj { color: var(--text-3); background: rgba(0, 0, 0, 0.04); }
html.light-mode .ba-box-phase-adj:hover { background: rgba(0, 0, 0, 0.08); }
html.light-mode .ba-box-phase-adj.ba-overridden { color: var(--amber); background: rgba(140, 90, 8, 0.1); }

/* ─── BA hover states ─── */
html.light-mode .ba-atom:hover { background: rgba(12, 107, 138, 0.06); }
html.light-mode .ba-atom-selected { background: rgba(12, 107, 138, 0.12); }

/* ─── BA belief field bars ─── */
html.light-mode .ba-bf-bar-track { background: rgba(0, 0, 0, 0.06); }
html.light-mode .ba-bf-bar-bel { background: var(--green); }
html.light-mode .ba-bf-bar-pl { background: var(--red); }
html.light-mode .ba-bf-ignorance-bar { background: rgba(140, 90, 8, 0.2); }

/* ─── BA atom ignorance indicator ─── */
html.light-mode .ba-atom-ignorance { background: rgba(140, 90, 8, 0.12); color: var(--amber); }

/* ─── KEY FIX: JS inline style overrides for section colors ─── 
   The JS generates inline styles like style="color:#55efc4" for neon section colors.
   These neon greens/blues/reds are invisible on light backgrounds.
   We override them to use the darkened light-mode accent palette. */

/* Section header neon text: force to dark readable colors */
html.light-mode .ba-section-header [style*="color:#54a0ff"] { color: var(--blue) !important; }
html.light-mode .ba-section-header [style*="color:#55efc4"] { color: var(--green) !important; }
html.light-mode .ba-section-header [style*="color:#ff6b6b"] { color: var(--red) !important; }
html.light-mode .ba-section-header [style*="color:#feca57"] { color: var(--amber) !important; }
html.light-mode .ba-section-header [style*="color:#a29bfe"] { color: var(--violet) !important; }

/* Binding dots in summary row */
html.light-mode [style*="color:#55efc4"] { color: var(--green) !important; }
html.light-mode [style*="color:#feca57"] { color: var(--amber) !important; }
html.light-mode [style*="color:#ff6b6b"] { color: var(--red) !important; }
html.light-mode [style*="color:#54a0ff"] { color: var(--blue) !important; }
html.light-mode [style*="color:#a29bfe"] { color: var(--violet) !important; }

/* Section distribution labels with opacity:0.7 */
html.light-mode .ba-surface [style*="opacity:0.7"] { opacity: 1 !important; }

/* Preview text in collapsed sections */
html.light-mode [style*="color:#636e72"] { color: var(--text-3) !important; }

/* Border-left on section headers — keep colored but use CSS vars */
html.light-mode .ba-section-header [style*="border-left:3px solid #54a0ff"] { border-left-color: var(--blue) !important; }
html.light-mode .ba-section-header [style*="border-left:3px solid #55efc4"] { border-left-color: var(--green) !important; }
html.light-mode .ba-section-header [style*="border-left:3px solid #ff6b6b"] { border-left-color: var(--red) !important; }
html.light-mode .ba-section-header [style*="border-left:3px solid #feca57"] { border-left-color: var(--amber) !important; }
html.light-mode .ba-section-header [style*="border-left:3px solid #a29bfe"] { border-left-color: var(--violet) !important; }

/* Also catch the inline border-left on the header itself (it's on the same element) */
html.light-mode .ba-section-header[style*="border-left:3px solid #54a0ff"] { border-left-color: var(--blue) !important; }
html.light-mode .ba-section-header[style*="border-left:3px solid #55efc4"] { border-left-color: var(--green) !important; }
html.light-mode .ba-section-header[style*="border-left:3px solid #ff6b6b"] { border-left-color: var(--red) !important; }
html.light-mode .ba-section-header[style*="border-left:3px solid #feca57"] { border-left-color: var(--amber) !important; }
html.light-mode .ba-section-header[style*="border-left:3px solid #a29bfe"] { border-left-color: var(--violet) !important; }

/* ─── Deductive banner ─── */
html.light-mode .ba-deductive-banner { 
  background: rgba(140, 90, 8, 0.08); border-color: rgba(140, 90, 8, 0.2); 
}
html.light-mode .ba-deductive-label { color: var(--amber); }
html.light-mode .ba-deductive-text { color: var(--text-2); }

/* ─── Basin test components ─── */
html.light-mode .ba-basin-test-btn { background: var(--blue); }
html.light-mode .ba-basin-test-btn:hover { background: var(--blue-dim); }

/* ═══════════════════════════════════════════════════════════════════════
 * BELIEF ACCOUNTING v3 — Evidence Surface + Lens Workspace
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Evidence Surface ── */
.ba-surface { padding: 16px; padding-bottom: 56px; }

.ba-surface-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.ba-surface-title {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 600; color: var(--text-0);
}
.ba-surface-stats { display: flex; gap: 8px; align-items: center; }
.ba-stat { font-size: 12px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.ba-stat-sep { color: var(--border-2); }
.ba-surface-actions { display: flex; gap: 8px; }
.ba-action-suggest, .ba-action-new {
  background: transparent; border: 1px solid var(--blue); color: var(--blue);
  padding: 5px 14px; border-radius: 4px; font-size: 12px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.ba-action-suggest:hover, .ba-action-new:hover { background: rgba(84, 160, 255, 0.1); }

/* Deductive bar */
.ba-deductive-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.ba-deductive-input {
  flex: 1; background: var(--bg-1); border: 1px solid var(--border-2); color: var(--text-0);
  padding: 8px 12px; border-radius: 4px; font-size: 13px;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
}
.ba-deductive-input::placeholder { color: var(--text-3); }
.ba-deductive-input:focus { border-color: var(--blue); outline: none; }
.ba-deductive-go {
  background: var(--red); color: white; border: none; padding: 8px 16px;
  border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 12px;
}
.ba-deductive-go:hover { background: var(--red-dim); }

/* Sections */
.ba-section { margin-bottom: 16px; }
.ba-section-header {
  display: flex; align-items: center; gap: 8px; border-left: 3px solid;
  padding: 6px 0 6px 10px; margin-bottom: 4px;
}
.ba-section-label {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text-0);
}
.ba-section-sub { font-size: 11px; color: var(--text-3); }
.ba-section-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3);
  margin-left: auto;
}

/* Atom rows */
.ba-atom {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 16px;
  cursor: pointer; border-radius: 3px; transition: background 0.15s;
  font-size: 12px;
}
.ba-atom:hover { background: rgba(84, 160, 255, 0.06); }
.ba-atom-selected { background: rgba(84, 160, 255, 0.12); }
.ba-atom-select { width: 16px; font-size: 10px; color: var(--blue); flex-shrink: 0; }
.ba-atom-label { min-width: 160px; color: var(--text-1); font-family: 'IBM Plex Sans', sans-serif; }
.ba-atom-value {
  min-width: 80px; text-align: right; color: var(--text-0);
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px;
}
.ba-atom-context { flex: 1; color: var(--text-3); font-size: 11px; }
.ba-atom-phase { display: flex; gap: 2px; }
.ba-atom-pip {
  font-size: 8px; padding: 1px 4px; border-radius: 2px; color: white;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
}
.ba-atom-binding {
  font-size: 9px; padding: 1px 5px; border-radius: 2px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
}
.ba-bind-high { background: rgba(85, 239, 196, 0.15); color: var(--green); }
.ba-bind-med { background: rgba(254, 202, 87, 0.15); color: var(--amber); }
.ba-bind-low { background: rgba(255, 107, 107, 0.15); color: var(--red); }

/* ─── Nature badge on atom row ─── */
.ba-atom-nature {
  font-size: 8px; padding: 1px 5px; border-radius: 2px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  white-space: nowrap;
}
.ba-nat-recurring { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.ba-nat-transitory, .ba-nat-nonrecurring { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.ba-nat-undetermined { background: rgba(148, 163, 184, 0.08); color: #94a3b8; }

/* ─── Atom explore icon ─── */
.ba-atom-explore {
  font-size: 11px; cursor: pointer; opacity: 0.35;
  transition: opacity 0.15s, transform 0.15s;
  margin-left: 4px; flex-shrink: 0;
}
.ba-atom:hover .ba-atom-explore { opacity: 0.8; }
.ba-atom-explore:hover { opacity: 1 !important; transform: scale(1.15); }

/* ─── CAF Probability / Dempster-Shafer indicators ─── */
.ba-atom-precision {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
  margin-left: 4px; white-space: nowrap;
}
.ba-atom-ignorance {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(254, 202, 87, 0.15); color: var(--amber);
  font-size: 9px; font-weight: 700; margin-left: 3px; cursor: help;
}

/* ─── Atom row Bel/Pl interval + ignorance marker (Prompt 14) ─── */
.ba-atom-bel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  min-width: 55px;
  white-space: nowrap;
}
.ba-atom-ign {
  font-size: 10px;
  color: var(--red);
  font-weight: 700;
  min-width: 12px;
  text-align: center;
  cursor: help;
}

/* ─── Lens-level BPA summary (Prompt 14: Bel/Pl, not BetP) ─── */
.ba-box-bpa {
  display: flex; gap: 6px; padding: 2px 12px 6px; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  flex-wrap: wrap;
}
.ba-box-bpa-sup { font-weight: 700; }
.ba-box-bpa-interval { white-space: nowrap; }
.ba-box-bpa-ign { color: var(--text-3); font-weight: 700; }

/* ─── Aggregate belief field (evidence surface header) ─── */
.ba-belief-field {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 0 4px;
}
.ba-bf-interval {
  display: flex; flex-direction: column; gap: 3px; min-width: 140px;
}
.ba-bf-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px;
}
.ba-bf-bar-track {
  position: relative; height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: visible;
}
.ba-bf-bar-fill {
  position: absolute; top: 0; height: 100%; border-radius: 3px; opacity: 0.35;
}
.ba-bf-bar-bel, .ba-bf-bar-pl {
  position: absolute; top: -2px; width: 2px; height: 10px; border-radius: 1px;
}
.ba-bf-bar-bel { background: var(--green); }
.ba-bf-bar-pl  { background: var(--red); }
.ba-bf-vals {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-2);
  display: flex; gap: 8px;
}
.ba-bf-ignorance {
  display: flex; flex-direction: column; gap: 3px; min-width: 100px;
}
.ba-bf-ignorance-bar {
  height: 6px; border-radius: 3px;
  background: rgba(254, 202, 87, 0.25);
}

/* ═══════════════════════════════════════════════════════
 * LENS WORKSPACE
 * ═══════════════════════════════════════════════════════ */
.ba-workspace { margin-top: 24px; padding-top: 16px; padding-bottom: 56px; border-top: 1px solid var(--border-2); }
.ba-workspace-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.ba-workspace-title {
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--text-0);
}
.ba-ws-counts { display: flex; gap: 6px; }
.ba-ws-count {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
}
.ba-ws-draft { background: rgba(131, 149, 167, 0.15); color: var(--text-2); }
.ba-ws-compiled { background: rgba(84, 160, 255, 0.15); color: var(--blue); }
.ba-ws-committed { background: rgba(85, 239, 196, 0.15); color: var(--green); }
.ba-ws-empty { font-size: 12px; color: var(--text-3); padding: 20px; text-align: center; }
.ba-harden-btn {
  margin-left: auto; background: var(--green); color: var(--bg-3); border: none;
  padding: 6px 16px; border-radius: 4px; font-weight: 700; cursor: pointer;
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
}
.ba-harden-btn:hover { background: var(--green-dim); }

/* Lens boxes */
.ba-boxes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.ba-lens-box {
  background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 6px;
  overflow: hidden; transition: all 0.2s;
}
.ba-box-draft { border-left: 3px solid var(--text-2); }
.ba-box-compiled { border-left: 3px solid var(--blue); }
.ba-box-committed { border-left: 3px solid var(--green); }
.ba-box-expanded { grid-column: 1 / -1; }
.ba-box-active { box-shadow: 0 0 0 1px var(--blue); }
.ba-box-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
}
.ba-box-header:hover { background: rgba(255, 255, 255, 0.03); }
.ba-box-status-icon { font-size: 10px; color: var(--text-3); cursor: pointer; }
.ba-box-label {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  color: var(--text-0); flex: 1;
}
.ba-box-atom-count { font-size: 10px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.ba-box-origin { font-size: 9px; color: var(--text-3); }
.ba-box-phase-bar { display: flex; gap: 1px; padding: 0 12px 8px; }
.ba-box-pip { height: 4px; border-radius: 1px; min-width: 4px; }
.ba-box-content { padding: 0 12px 12px; }
.ba-box-field { margin-bottom: 8px; }
.ba-box-field label {
  font-size: 10px; color: var(--text-3); display: block; margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
}
.ba-box-field input {
  width: 100%; background: var(--bg-1); border: 1px solid var(--border-2); color: var(--text-0);
  padding: 6px 8px; border-radius: 3px; font-size: 12px; box-sizing: border-box;
}
.ba-box-field input:focus { border-color: var(--blue); outline: none; }
.ba-box-atoms { margin: 8px 0; }
.ba-box-atoms-header {
  font-size: 10px; color: var(--text-3); font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.ba-box-atom-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
  font-size: 11px; color: var(--text-1);
}
.ba-box-atom-label { flex: 1; }
.ba-box-atom-value {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3);
}
.ba-box-atom-phase { display: flex; gap: 3px; }
.ba-box-phase-adj {
  font-size: 9px; padding: 1px 3px; border-radius: 2px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; color: var(--text-3);
  background: rgba(255, 255, 255, 0.03);
}
.ba-box-phase-adj:hover { background: rgba(255, 255, 255, 0.08); }
.ba-box-phase-adj.ba-overridden { color: var(--amber); background: rgba(254, 202, 87, 0.1); }
.ba-box-atom-remove {
  color: var(--text-3); cursor: pointer; font-size: 10px; padding: 2px 4px;
}
.ba-box-atom-remove:hover { color: var(--red); }
.ba-box-actions { display: flex; gap: 8px; margin-top: 10px; }
.ba-box-compile, .ba-box-recompile {
  background: var(--blue); color: white; border: none; padding: 5px 12px;
  border-radius: 3px; font-size: 11px; cursor: pointer; font-weight: 600;
}
.ba-box-compile:hover, .ba-box-recompile:hover { background: var(--blue-dim); }
.ba-box-commit {
  background: var(--green); color: var(--bg-3); border: none; padding: 5px 12px;
  border-radius: 3px; font-size: 11px; cursor: pointer; font-weight: 700;
}
.ba-box-commit:hover { background: var(--green-dim); }
.ba-box-uncommit {
  background: transparent; border: 1px solid var(--text-3); color: var(--text-3);
  padding: 5px 12px; border-radius: 3px; font-size: 11px; cursor: pointer;
}
.ba-box-delete {
  background: transparent; border: 1px solid var(--red); color: var(--red);
  padding: 5px 12px; border-radius: 3px; font-size: 11px; cursor: pointer;
}
.ba-box-compiled-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-2); }
.ba-box-compiled-header {
  font-size: 10px; color: var(--text-3); font-family: 'JetBrains Mono', monospace;
  margin-bottom: 8px; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
 * COMPILED LENS OUTPUT (prose sections)
 * ═══════════════════════════════════════════════════════ */
.ba-compiled-output { color: var(--text-1); font-size: 12px; line-height: 1.5; }
.ba-compiled-section { margin-bottom: 14px; }
.ba-compiled-section-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--border-2);
}
.ba-compiled-text { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.ba-compiled-break { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; }
.ba-compiled-break-icon { flex-shrink: 0; font-size: 11px; }
.ba-compiled-break-resolved { color: var(--text-3); }
.ba-compiled-break-threshold { color: var(--red); }
.ba-compiled-break-buffer { color: var(--green); }
.ba-compiled-reveal { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; color: var(--violet); }
.ba-compiled-question { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; }
.ba-compiled-question-icon { color: var(--amber); }
.ba-compiled-path { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; color: var(--text-3); }

/* Engine boundary inside compiled output */
.ba-boundary { margin-top: 12px; padding: 10px; background: var(--bg-1); border-radius: 4px; border: 1px dashed var(--border-2); }
.ba-boundary-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 6px;
}
.ba-boundary-row { display: flex; gap: 8px; margin-bottom: 4px; font-size: 11px; }
.ba-boundary-engine {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 2px; flex-shrink: 0;
}
.ba-boundary-ivr { background: rgba(85, 239, 196, 0.2); color: var(--green); }
.ba-boundary-ivb { background: rgba(84, 160, 255, 0.2); color: var(--blue); }
.ba-boundary-cafn { background: rgba(162, 155, 254, 0.2); color: var(--violet); }
.ba-boundary-text { color: var(--text-2); }

/* ═══════════════════════════════════════════════════════
 * STICKY ACTION BAR — Fixed at bottom of Tab 9
 * ═══════════════════════════════════════════════════════ */
.ba-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(18, 18, 31, 0.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-2);
  padding: 8px 16px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
}
.ba-sticky-status { flex-shrink: 0; }
.ba-sticky-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ba-sticky-btn {
  border: 1px solid var(--border-2); background: transparent;
  color: var(--text-2); padding: 5px 14px; border-radius: 4px;
  font-size: 11px; cursor: pointer; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; transition: all 0.15s;
}
.ba-sticky-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-0); }
.ba-sticky-suggest { border-color: var(--violet); color: var(--violet); }
.ba-sticky-suggest:hover { background: rgba(162,155,254,0.1); }
.ba-sticky-compile { border-color: var(--blue); color: var(--blue); }
.ba-sticky-compile:hover { background: rgba(84,160,255,0.1); }
.ba-sticky-commit { border-color: var(--green); color: var(--green); }
.ba-sticky-commit:hover { background: rgba(85,239,196,0.1); }
.ba-sticky-new { border-color: var(--text-3); color: var(--text-3); }
.ba-sticky-new:hover { border-color: var(--text-2); color: var(--text-2); }

/* ── Spinner (shared by sticky bar + inline buttons) ── */
.ba-sticky-spinner {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
}
.ba-spinner-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; border: 2px solid var(--amber);
  border-top-color: transparent;
  animation: ba-spin 0.8s linear infinite;
}
@keyframes ba-spin { to { transform: rotate(360deg); } }

/* ── Inline button loading state ── */
.ba-btn-loading {
  position: relative; pointer-events: none; opacity: 0.7;
}
.ba-btn-loading::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: ba-spin 0.8s linear infinite;
}

/* ── Origin badge ── */
.ba-box-origin-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  white-space: nowrap;
}

/* ── Lens card meta row ── */
.ba-box-meta {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 6px; font-size: 10px;
}
.ba-box-status-label {
  font-size: 9px; padding: 1px 5px; border-radius: 2px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  text-transform: uppercase;
}
.ba-box-status-draft { background: rgba(131,149,167,0.15); color: var(--text-2); }
.ba-box-status-compiled { background: rgba(84,160,255,0.15); color: var(--blue); }
.ba-box-status-committed { background: rgba(85,239,196,0.15); color: var(--green); }

/* ── Quick action buttons on lens card header ── */
.ba-box-quick-actions {
  display: flex; align-items: center; gap: 2px; margin-left: auto;
}
.ba-box-qbtn {
  width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 3px; cursor: pointer;
  font-size: 12px; color: var(--text-3); transition: all 0.15s;
}
.ba-box-qbtn:hover { background: rgba(255,255,255,0.08); }
.ba-qbtn-compile:hover { color: var(--blue); }
.ba-qbtn-commit:hover { color: var(--green); }
.ba-qbtn-recompile:hover { color: var(--amber); }
.ba-qbtn-uncommit:hover { color: var(--text-2); }
.ba-qbtn-delete:hover { color: var(--red); background: rgba(255,107,107,0.1); }

/* ── Compiling indicator ── */
.ba-box-compiling {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; font-size: 11px; color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
  background: rgba(254,202,87,0.05);
  border-top: 1px solid rgba(254,202,87,0.1);
  animation: ba-pulse 1.5s ease-in-out infinite;
}
@keyframes ba-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * PROMPT 10: BASIN TEST DASHBOARD CSS
 * ═══════════════════════════════════════════════════════════════════════ */
.ba-basin-dashboard { margin-top: 24px; padding: 16px; background: #0f0f1a; border: 1px solid var(--border-2); border-radius: 8px; }

.ba-basin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.ba-basin-header-left { flex: 1; }
.ba-basin-type-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: rgba(84,160,255,0.15); color: var(--blue); margin-right: 6px; }
.ba-basin-phase-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: rgba(131,149,167,0.15); color: var(--text-2); }
.ba-basin-sentence { font-size: 14px; color: var(--text-0); line-height: 1.4; margin-top: 8px; max-width: 700px; }

.ba-basin-verdict { border: 2px solid; border-radius: 6px; padding: 10px 16px; text-align: center; min-width: 80px; }
.ba-verdict-status { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; }
.ba-verdict-counts { font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-top: 4px; }
.ba-verdict-rationale { font-size: 12px; color: var(--text-2); margin-bottom: 16px; line-height: 1.4; padding: 8px 12px; background: rgba(255,255,255,0.02); border-radius: 4px; }

.ba-cat-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.ba-cat-tab { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 3px 10px; border-radius: 3px; cursor: pointer; background: rgba(255,255,255,0.03); color: var(--text-3); }
.ba-cat-tab:hover { background: rgba(255,255,255,0.06); }
.ba-cat-active { background: rgba(84,160,255,0.15); color: var(--blue); }

.ba-cat-group { margin-bottom: 12px; }
.ba-cat-group-header { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-2); padding: 4px 0; border-bottom: 1px solid var(--border-2); margin-bottom: 4px; }

.ba-rail-row { padding: 8px 4px; border-bottom: 1px solid rgba(45,45,68,0.5); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.ba-rail-row:hover { background: rgba(84,160,255,0.03); }
.ba-rail-polarity { font-size: 14px; width: 20px; text-align: center; }
.ba-rail-trend { font-size: 12px; width: 16px; color: var(--text-3); }
.ba-rail-label { flex: 1; min-width: 160px; color: var(--text-1); }
.ba-rail-polarity-word { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; min-width: 80px; }
.ba-rail-current { min-width: 80px; }
.ba-rail-current-label { font-size: 8px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.ba-rail-current-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text-0); }
.ba-rail-threshold { min-width: 80px; }
.ba-rail-threshold-label { font-size: 8px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.ba-rail-threshold-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-2); }
.ba-rail-source { display: flex; gap: 4px; }
.ba-rail-halflife, .ba-rail-phase, .ba-rail-evidence { font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 1px 4px; border-radius: 2px; background: rgba(255,255,255,0.03); color: var(--text-3); }
.ba-rail-forced { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--red); }
.ba-rail-annotation { width: 100%; font-size: 11px; color: var(--text-3); line-height: 1.3; padding-left: 44px; margin-top: 2px; }
.ba-rail-buffer-bar { width: 100%; height: 4px; background: var(--bg-1); border-radius: 2px; margin-top: 4px; position: relative; margin-left: 44px; max-width: 300px; }
.ba-rail-buffer-fill { height: 100%; border-radius: 2px; }
.ba-rail-buffer-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-3); position: absolute; right: -80px; top: -2px; }

.ba-reveal-schedule { margin-top: 16px; padding: 12px; background: var(--bg-1); border-radius: 6px; }
.ba-reveal-header { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text-0); margin-bottom: 8px; }
.ba-reveal-row { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-2); align-items: center; }
.ba-reveal-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--blue); min-width: 90px; }
.ba-reveal-event { font-size: 11px; color: var(--text-2); min-width: 120px; }
.ba-reveal-rails { display: flex; gap: 4px; flex-wrap: wrap; }
.ba-reveal-rail { font-size: 9px; padding: 1px 6px; border: 1px solid; border-radius: 2px; font-family: 'JetBrains Mono', monospace; color: var(--text-2); }

.ba-cliff-edges { margin-top: 16px; padding: 12px; background: var(--bg-1); border-radius: 6px; }
.ba-cliff-header { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text-0); margin-bottom: 8px; }
.ba-cliff-row { padding: 8px 0; border-bottom: 1px solid var(--border-2); }
.ba-cliff-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text-1); }
.ba-cliff-actor { font-size: 10px; color: var(--red); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.ba-cliff-detail { font-size: 11px; color: var(--text-3); line-height: 1.3; margin-top: 4px; }
.ba-cliff-proximity { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; margin-top: 4px; }

.ba-export-bar { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-2); }
.ba-export-btn { background: transparent; border: 1px solid var(--green); color: var(--green); padding: 6px 16px; border-radius: 4px; font-size: 12px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.ba-export-btn:hover { background: rgba(85,239,196,0.1); }



/* ═══════════════════════════════════════════════════════════════════════════════
 * ADDITIONAL LIGHT-MODE FIXES — Catch-all for remaining readability issues
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Force all inline-style light text to dark in light mode */
html.light-mode [style*="color:#f5f6fa"] { color: var(--text-0) !important; }
html.light-mode [style*="color: #f5f6fa"] { color: var(--text-0) !important; }
html.light-mode [style*="color:#dfe6e9"] { color: var(--text-1) !important; }
html.light-mode [style*="color: #dfe6e9"] { color: var(--text-1) !important; }
html.light-mode [style*="color:#b2bec3"] { color: var(--text-2) !important; }
html.light-mode [style*="color: #b2bec3"] { color: var(--text-2) !important; }
html.light-mode [style*="color:#8395a7"] { color: var(--text-2) !important; }
html.light-mode [style*="color: #8395a7"] { color: var(--text-2) !important; }

/* Inline dark backgrounds → light surfaces */
html.light-mode [style*="background:#1a1a2e"] { background: var(--bg-2) !important; }
html.light-mode [style*="background: #1a1a2e"] { background: var(--bg-2) !important; }
html.light-mode [style*="background-color:#1a1a2e"] { background-color: var(--bg-2) !important; }
html.light-mode [style*="background:#12121f"] { background: var(--bg-1) !important; }
html.light-mode [style*="background: #12121f"] { background: var(--bg-1) !important; }
html.light-mode [style*="background-color:#12121f"] { background-color: var(--bg-1) !important; }

/* Inline dark borders */
html.light-mode [style*="border-color:#2d2d44"] { border-color: var(--border-1) !important; }
html.light-mode [style*="border: 1px solid #2d2d44"] { border-color: var(--border-1) !important; }
html.light-mode [style*="border:1px solid #2d2d44"] { border-color: var(--border-1) !important; }

/* rgba white overlays → dark overlays for light mode */
html.light-mode [style*="rgba(255, 255, 255, 0.03)"],
html.light-mode [style*="rgba(255,255,255,0.03)"] {
  background: rgba(0, 0, 0, 0.03) !important;
}
html.light-mode [style*="rgba(255, 255, 255, 0.06)"],
html.light-mode [style*="rgba(255,255,255,0.06)"] {
  background: rgba(0, 0, 0, 0.04) !important;
}
html.light-mode [style*="rgba(255, 255, 255, 0.08)"],
html.light-mode [style*="rgba(255,255,255,0.08)"] {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* BA box hover in light mode */
html.light-mode .ba-box-header:hover { background: rgba(0, 0, 0, 0.04) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
 * COMPREHENSIVE LIGHT-MODE FIXES
 * Overrides for JS-generated inline styles with hardcoded dark-mode colors.
 * These rules use !important to override inline style="" attributes.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Global: Force text readability on all themed containers ─── */
html.light-mode [style*="color:#f0f0f0"],
html.light-mode [style*="color: #f0f0f0"],
html.light-mode [style*="color:#f5f6fa"],
html.light-mode [style*="color: #f5f6fa"],
html.light-mode [style*="color:#eee"],
html.light-mode [style*="color: #eee"],
html.light-mode [style*="color:#e0e0e0"],
html.light-mode [style*="color: #e0e0e0"],
html.light-mode [style*="color:#ddd"],
html.light-mode [style*="color: #ddd"],
html.light-mode [style*="color:#ccc"],
html.light-mode [style*="color: #ccc"],
html.light-mode [style*="color:#c8c8c8"],
html.light-mode [style*="color: #c8c8c8"] {
  color: var(--text-0) !important;
}

html.light-mode [style*="color:#aaa"],
html.light-mode [style*="color: #aaa"],
html.light-mode [style*="color:#999"],
html.light-mode [style*="color: #999"],
html.light-mode [style*="color:#8a8a8a"],
html.light-mode [style*="color: #8a8a8a"],
html.light-mode [style*="color:#888"],
html.light-mode [style*="color: #888"],
html.light-mode [style*="color:#777"],
html.light-mode [style*="color: #777"] {
  color: var(--text-2) !important;
}

html.light-mode [style*="color:#666"],
html.light-mode [style*="color: #666"],
html.light-mode [style*="color:#555"],
html.light-mode [style*="color: #555"],
html.light-mode [style*="color:#636e72"],
html.light-mode [style*="color: #636e72"],
html.light-mode [style*="color:#4a4a5a"],
html.light-mode [style*="color: #4a4a5a"] {
  color: var(--text-3) !important;
}

/* ─── Dark backgrounds generated in JS → light surfaces ─── */
html.light-mode [style*="background:#060606"],
html.light-mode [style*="background: #060606"],
html.light-mode [style*="background-color:#060606"],
html.light-mode [style*="background:#0a0a0a"],
html.light-mode [style*="background: #0a0a0a"],
html.light-mode [style*="background-color:#0a0a0a"],
html.light-mode [style*="background:#0e0e0e"],
html.light-mode [style*="background: #0e0e0e"] {
  background: var(--bg-0) !important;
  background-color: var(--bg-0) !important;
}

html.light-mode [style*="background:#111"],
html.light-mode [style*="background: #111"],
html.light-mode [style*="background-color:#111"],
html.light-mode [style*="background:#161616"],
html.light-mode [style*="background: #161616"],
html.light-mode [style*="background-color:#161616"],
html.light-mode [style*="background:#1a1a1a"],
html.light-mode [style*="background: #1a1a1a"],
html.light-mode [style*="background-color:#1a1a1a"] {
  background: var(--bg-3) !important;
  background-color: var(--bg-3) !important;
}

html.light-mode [style*="background:#1c1c1c"],
html.light-mode [style*="background: #1c1c1c"],
html.light-mode [style*="background:#222"],
html.light-mode [style*="background: #222"],
html.light-mode [style*="background-color:#222"],
html.light-mode [style*="background:#252525"],
html.light-mode [style*="background: #252525"] {
  background: var(--bg-4) !important;
  background-color: var(--bg-4) !important;
}

/* ─── Tab 9 Belief Accounting Viz: hardcoded BAV colors ─── */
html.light-mode [style*="background:#0f0f1a"],
html.light-mode [style*="background: #0f0f1a"],
html.light-mode [style*="background-color:#0f0f1a"] {
  background: var(--bg-0) !important;
  background-color: var(--bg-0) !important;
}

html.light-mode [style*="background:#1a1a2e"],
html.light-mode [style*="background: #1a1a2e"],
html.light-mode [style*="background-color:#1a1a2e"] {
  background: var(--bg-2) !important;
  background-color: var(--bg-2) !important;
}

html.light-mode [style*="background:#1e1e32"],
html.light-mode [style*="background: #1e1e32"],
html.light-mode [style*="background-color:#1e1e32"] {
  background: var(--bg-3) !important;
  background-color: var(--bg-3) !important;
}

/* ─── Border overrides for dark-mode hex borders ─── */
html.light-mode [style*="border-color:#252525"],
html.light-mode [style*="border-color: #252525"],
html.light-mode [style*="border-color:#2a2a2a"],
html.light-mode [style*="border-color: #2a2a2a"],
html.light-mode [style*="border-color:#2e2e2e"],
html.light-mode [style*="border-color: #2e2e2e"],
html.light-mode [style*="border-color:#3a3a3a"],
html.light-mode [style*="border-color: #3a3a3a"],
html.light-mode [style*="border-color:#2a2a40"],
html.light-mode [style*="border-color: #2a2a40"] {
  border-color: var(--border-1) !important;
}

html.light-mode [style*="border:1px solid #"],
html.light-mode [style*="border: 1px solid #2"],
html.light-mode [style*="border: 1px solid #1"],
html.light-mode [style*="border: 1px solid #3"] {
  border-color: var(--border-1) !important;
}

/* ─── Neon accent glow backgrounds: reduce opacity in light mode ─── */
html.light-mode [style*="rgba(0, 168, 255"],
html.light-mode [style*="rgba(0,168,255"] {
  /* Keep blue glow but lighter */
}
html.light-mode [style*="rgba(255, 170, 0"],
html.light-mode [style*="rgba(255,170,0"] {
  /* Keep amber glow but lighter */
}

/* ─── Belief Accounting: specific component overrides ─── */
html.light-mode .ba-lens-item,
html.light-mode .ba-proposal-card,
html.light-mode .ba-evidence-card,
html.light-mode .ba-rail-card,
html.light-mode .ba-atom-row,
html.light-mode .ba-compile-result,
html.light-mode .ba-hardened-section,
html.light-mode .ba-landscape-node,
html.light-mode .ba-detail-panel {
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

html.light-mode .ba-lens-item.selected,
html.light-mode .ba-proposal-card.selected {
  background: var(--bg-3) !important;
  border-color: var(--blue) !important;
}

html.light-mode .ba-lens-item-name,
html.light-mode .ba-proposal-card-title,
html.light-mode .ba-section-title {
  color: var(--text-0) !important;
}

html.light-mode .ba-lens-item-meta,
html.light-mode .ba-proposal-card-question {
  color: var(--text-2) !important;
}

html.light-mode .ba-badge {
  color: var(--text-0) !important;
}

/* ─── Belief Accounting Viz: canvas/phase components ─── */
html.light-mode .bav-container,
html.light-mode .bav-landscape,
html.light-mode .bav-phase-bar,
html.light-mode .bav-lens-detail,
html.light-mode .bav-boundary-section,
html.light-mode .bav-reveal-timeline,
html.light-mode .bav-deductive-overlay {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
}

html.light-mode .bav-node,
html.light-mode .bav-card {
  background: var(--bg-3) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

html.light-mode .bav-node text,
html.light-mode .bav-label {
  fill: var(--text-0) !important;
  color: var(--text-0) !important;
}

/* ─── Analyst Workbench (Tab 8): detector cards ─── */
html.light-mode .aw-detector-card,
html.light-mode .aw-result-row,
html.light-mode .aw-qa-panel {
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

/* ─── CAF Reform Bridge cards ─── */
html.light-mode .caf-bridge-card,
html.light-mode .caf-bridge-row {
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

/* ─── Disclosure cards and event presentations ─── */
html.light-mode .de-card,
html.light-mode .de-event-row,
html.light-mode .disclosure-card,
html.light-mode .disclosure-event {
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

/* ─── Tables: ensure header/cell readability ─── */
html.light-mode table th {
  color: var(--text-0) !important;
  background: var(--bg-3) !important;
}

html.light-mode table td {
  color: var(--text-1) !important;
}

html.light-mode table tr:hover td {
  background: var(--bg-2) !important;
}

/* ─── Buttons: ensure all button text is readable ─── */
html.light-mode button,
html.light-mode .btn,
html.light-mode [role="button"] {
  color: var(--text-1);
}

/* ─── Input fields ─── */
html.light-mode input,
html.light-mode select,
html.light-mode textarea {
  background: var(--bg-0) !important;
  color: var(--text-0) !important;
  border-color: var(--border-1) !important;
}

html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
  border-color: var(--blue) !important;
}

/* ─── Tooltips and popups ─── */
html.light-mode .tooltip,
html.light-mode .popup,
html.light-mode .dropdown-menu {
  background: var(--bg-1) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* ─── Scrollbar theming for light mode ─── */
html.light-mode ::-webkit-scrollbar-track {
  background: var(--bg-1);
}
html.light-mode ::-webkit-scrollbar-thumb {
  background: var(--border-2);
}
html.light-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--border-3);
}

/* ─── Modal overlays ─── */
html.light-mode .ivr-modal-overlay {
  background: rgba(0,0,0,0.25) !important;
}
html.light-mode .ivr-modal-box {
  background: var(--bg-0) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
}

/* ─── Section headers, control bars ─── */
html.light-mode .section-header {
  background: var(--bg-2) !important;
  color: var(--text-0) !important;
  border-color: var(--border-1) !important;
}

html.light-mode .section-sub-header {
  background: var(--bg-1) !important;
  color: var(--text-1) !important;
}

/* ─── Tab navigation ─── */
html.light-mode .tab-btn {
  color: var(--text-2) !important;
}
html.light-mode .tab-btn.active {
  color: var(--text-0) !important;
  border-bottom-color: var(--blue) !important;
}
html.light-mode .tab-btn:hover {
  color: var(--text-1) !important;
}

/* ─── Cockpit cards ─── */
html.light-mode .cockpit-card,
html.light-mode .cockpit-metric,
html.light-mode .cockpit-section {
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

/* ─── Financial editor columns ─── */
html.light-mode .fin-edit-col,
html.light-mode .fin-data-col,
html.light-mode .fin-result-col {
  background: var(--bg-0) !important;
}

/* ─── Feasibility Fence, Hazard Calendar, Break Map canvases ─── */
html.light-mode .feasibility-panel,
html.light-mode .hazard-panel,
html.light-mode .break-map-panel {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
}

/* ─── PDF viewer elements ─── */
html.light-mode .pdf-tab-pill {
  color: var(--text-2) !important;
}
html.light-mode .pdf-tab-pill.active {
  color: var(--text-0) !important;
  background: var(--bg-3) !important;
}

/* ─── Toast notifications ─── */
html.light-mode .ivr-toast {
  background: var(--bg-2) !important;
  color: var(--text-0) !important;
  border-color: var(--border-2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* ─── Status badges / pills ─── */
html.light-mode .status-pill,
html.light-mode .badge {
  color: var(--text-0) !important;
}

/* ─── Compiler panels ─── */
html.light-mode .compiler-panel,
html.light-mode .recon-dashboard {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
  border-color: var(--border-1) !important;
}

/* ─── WB containers (workbench) ─── */
html.light-mode .wb-container {
  background: var(--bg-1) !important;
  border-color: var(--border-1) !important;
}

/* ─── Dashboard grid in editor mode ─── */
html.light-mode .wb-freeform-grid {
  background: var(--bg-0) !important;
}
html.light-mode .wb-fcell {
  background: var(--bg-1) !important;
  border-color: var(--border-1) !important;
}

/* ─── Profitability panel ─── */
html.light-mode .profitability-panel {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
}

/* ─── IVr dynamic layer (reformulation) ─── */
html.light-mode .ivr-dynamic-layer {
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

/* ─── chunk-a/b cards ─── */
html.light-mode .chunk-a-card,
html.light-mode .chunk-b-card,
html.light-mode .chunk-b-upload-area {
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-0) !important;
}

/* ═══ GLOBAL ACTIVITY MONITOR ═══════════════════════════════════════════════ */

.ivr-activity-bar {
  position: fixed;
  bottom: 38px; /* above the save bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  pointer-events: none;
  max-width: 520px;
  width: 100%;
  transition: opacity 0.25s ease;
}

.ivr-activity-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px;
  background: var(--bg-2, #161e2e);
  border: 1px solid var(--border-1, #2a3550);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  font-family: var(--mono, monospace);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-1, #ccc);
  min-width: 220px;
  max-width: 520px;
  backdrop-filter: blur(10px);
  animation: actItemSlideIn 0.3s ease both;
}

@keyframes actItemSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ivr-activity-item[data-state="done"] {
  animation: actItemDone 0.35s ease both;
  border-color: rgba(0,200,83,0.3);
  background: var(--bg-2, #161e2e);
}

@keyframes actItemDone {
  0%   { border-color: rgba(0,200,83,0.6); box-shadow: 0 0 16px rgba(0,200,83,0.15); }
  100% { border-color: rgba(0,200,83,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
}

.ivr-activity-item[data-state="error"] {
  border-color: rgba(255,82,82,0.3);
}

.ivr-act-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(100,180,255,0.15);
  border-top-color: var(--blue, #00a8ff);
  border-radius: 50%;
  animation: actSpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes actSpin {
  to { transform: rotate(360deg); }
}

.ivr-act-check {
  color: rgb(0,200,83);
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
}

.ivr-act-cross {
  color: rgb(255,82,82);
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
}

.ivr-act-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivr-act-phase {
  color: var(--text-3, #666);
  font-weight: 400;
  margin-left: 4px;
}

.ivr-act-timer {
  color: var(--text-3, #666);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

/* Progress sub-bar within activity item */
.ivr-act-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--blue, #00a8ff);
  border-radius: 0 0 0 6px;
  transition: width 0.4s ease;
}

.ivr-activity-item {
  position: relative;
  overflow: hidden;
}

/* Fade-out for completed items */
.ivr-activity-item.act-fade-out {
  animation: actFadeOut 0.4s ease forwards;
}

@keyframes actFadeOut {
  to { opacity: 0; transform: translateY(-6px); }
}

/* ─── Scan button disabled/loading states ─── */
.ivr-scan-btn-loading {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: wait !important;
}

/* Light-mode overrides for activity bar */
html.light-mode .ivr-activity-item {
  background: var(--bg-1, #f4f1ec);
  border-color: var(--border-1, #d0c9bb);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  color: var(--text-0, #222);
}
html.light-mode .ivr-act-spinner {
  border-color: rgba(0,100,200,0.15);
  border-top-color: var(--blue, #0064c8);
}
html.light-mode .ivr-act-timer,
html.light-mode .ivr-act-phase {
  color: var(--text-3, #888);
}



/* ─── IVr Distribution Shape + Coverage Map (Prompt 11) ───────────────────── */

.ba-dist-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px 12px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Title bar */
.ba-dist-title-bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.ba-dist-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-1);
}
.ba-dist-subtitle {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.3px;
}

/* ─── Aggregate bars section ─── */
.ba-dist-main {
  padding: 4px 0;
}
.ba-dist-bars-title {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

/* ─── Three-bar chart container ─── */
.ba-dist-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 0;
}
.ba-dist-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 36px;
}
.ba-dist-bar-container {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 3px;
  background: var(--bg-2);
  overflow: hidden;
}
.ba-dist-bar-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 0 6px rgba(255,255,255,0.06);
}
.ba-dist-bar-range {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.6;
}
.ba-dist-bar-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.ba-dist-bar-value {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  color: var(--text-2);
}
.ba-dist-bar-interval {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Ignorance column special styling */
.ba-dist-ignorance-col .ba-dist-bar-container {
  background: transparent;
  border: 1px dashed var(--border-1);
}

/* ─── Phase-resolved distribution grid ─── */
.ba-dist-phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ba-dist-phase-col {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ba-dist-phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ba-dist-phase-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ba-dist-phase-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.ba-dist-sup {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
}
.ba-dist-atomcount {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
}
.ba-dist-empty-phase {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
  font-style: italic;
  text-align: center;
  padding: 12px 4px;
  line-height: 1.4;
}

/* Phase bars within phase-col are smaller */
.ba-dist-phase-col .ba-dist-bars {
  gap: 4px;
}
.ba-dist-phase-col .ba-dist-bar-container {
  height: 50px;
}
.ba-dist-phase-col .ba-dist-bar-label {
  font-size: 8px;
}
.ba-dist-phase-col .ba-dist-bar-value {
  font-size: 7px;
}

/* ─── Coverage badges ─── */
.ba-dist-phase-coverage {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.ba-cov-deep {
  background: var(--green-glow);
  color: var(--green);
  border: 1px solid var(--green-dim);
}
.ba-cov-moderate {
  background: var(--blue-glow);
  color: var(--blue);
  border: 1px solid var(--blue-dim);
}
.ba-cov-minimal {
  background: var(--amber-glow);
  color: var(--amber);
  border: 1px solid var(--amber-dim);
}
.ba-cov-empty {
  background: var(--red-glow);
  color: var(--red);
  border: 1px solid var(--red-dim);
}

/* ─── Coverage gap warnings ─── */
.ba-dist-gaps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ba-dist-gap-warn {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--amber);
  background: rgba(255, 170, 0, 0.04);
  border-left: 3px solid var(--amber);
  padding: 5px 8px;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}
.ba-dist-gap-ok {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--green);
  background: var(--green-glow);
  border-left: 3px solid var(--green);
  padding: 5px 8px;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

/* ─── Light mode overrides ─── */
html.light-mode .ba-dist-panel {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
html.light-mode .ba-dist-bar-container {
  background: var(--bg-2);
}
html.light-mode .ba-dist-bar-fill {
  box-shadow: 0 0 4px rgba(0,0,0,0.05);
}
html.light-mode .ba-dist-ignorance-col .ba-dist-bar-container {
  border-color: var(--border);
}
html.light-mode .ba-dist-gap-warn {
  background: rgba(140, 90, 8, 0.04);
  color: var(--amber);
}
html.light-mode .ba-dist-gap-ok {
  background: var(--green-glow);
  color: var(--green);
}
html.light-mode .ba-dist-phase-col {
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* ─── Responsive: stack phases on narrow viewports ─── */
@media (max-width: 900px) {
  .ba-dist-phases {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .ba-dist-phases {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   PROMPT 12: Coverage Diagnostic + Lens Authority
   ═══════════════════════════════════════════════════════ */

/* ─── Coverage Diagnostic Panel ─── */
.ba-coverage-diag {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: var(--bg-2, #111a2e);
  border: 1px solid var(--bg-4, #182038);
  border-radius: 8px;
}
.ba-cov-overall {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--bg-3, #141f35);
}
.ba-cov-overall-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3, #556);
}
.ba-cov-overall-status {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Five-axis grid */
.ba-cov-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ba-cov-axis {
  background: var(--bg-1, #0c1220);
  border: 1px solid var(--bg-3, #141f35);
  border-radius: 6px;
  padding: 10px 12px;
}
.ba-cov-axis-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3, #556);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bg-3, #141f35);
}
.ba-cov-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  color: var(--text-2, #8899aa);
}
.ba-cov-status {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3px;
}
.ba-cov-detail {
  font-size: 10px;
  color: var(--text-3, #556);
}
.ba-cov-warn {
  font-size: 10px;
  color: var(--amber, #ffaa00);
  padding: 3px 0 1px;
  font-style: italic;
  opacity: 0.85;
}

/* ─── Authority Badge (in lens boxes) ─── */
.ba-box-authority {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  background: var(--bg-1, #0c1220);
  border: 1px solid var(--bg-3, #141f35);
}
.ba-auth-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3, #556);
  font-size: 9px;
}
.ba-auth-score {
  font-weight: 700;
  font-size: 12px;
}
.ba-auth-breakdown {
  font-size: 9px;
  color: var(--text-3, #556);
  letter-spacing: 0.2px;
}

/* Authority levels */
.ba-auth-high .ba-auth-score { color: var(--green, #00cc88); }
.ba-auth-high { border-color: color-mix(in srgb, var(--green, #00cc88) 30%, transparent); }
.ba-auth-mid .ba-auth-score { color: var(--blue, #00a8ff); }
.ba-auth-mid { border-color: color-mix(in srgb, var(--blue, #00a8ff) 25%, transparent); }
.ba-auth-low .ba-auth-score { color: var(--amber, #ffaa00); }
.ba-auth-low { border-color: color-mix(in srgb, var(--amber, #ffaa00) 25%, transparent); }

/* ─── Light Mode Overrides ─── */
html.light-mode .ba-coverage-diag {
  background: var(--bg-1, #ede9e2);
  border-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-cov-overall {
  border-bottom-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-cov-axis {
  background: var(--bg-0, #f4f1ec);
  border-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-cov-axis-label {
  border-bottom-color: var(--bg-3, #d4cfc5);
  color: var(--text-3, #888);
}
html.light-mode .ba-cov-item {
  color: var(--text-1, #3a3a3a);
}
html.light-mode .ba-cov-detail {
  color: var(--text-3, #888);
}
html.light-mode .ba-cov-warn {
  color: var(--amber, #8c5a08);
}
html.light-mode .ba-box-authority {
  background: var(--bg-0, #f4f1ec);
  border-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-auth-label {
  color: var(--text-3, #888);
}
html.light-mode .ba-auth-breakdown {
  color: var(--text-3, #888);
}
html.light-mode .ba-auth-high .ba-auth-score { color: var(--green, #1a6848); }
html.light-mode .ba-auth-mid .ba-auth-score { color: var(--blue, #0c6b8a); }
html.light-mode .ba-auth-low .ba-auth-score { color: var(--amber, #8c5a08); }

/* ═══════════════════════════════════════════════════════
   PROMPT 13: MAP MODE + BASIN MODE LAYOUT
   Two-panel layouts for belief accounting tab
   ═══════════════════════════════════════════════════════ */

/* ── Tab container: fill viewport height ── */
#tab-beliefAccounting.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--tabs-h, 36px) - 2px);
  overflow: hidden;
  position: relative;
}

/* ── Mode containers ── */
.ba-map-mode, .ba-basin-mode {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header bar ── */
.ba-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-1, #0c1220);
  border-bottom: 1px solid var(--bg-3, #141f35);
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 40px;
}
.ba-header-bar .ba-header {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  border-bottom: none;
}
.ba-header-bar .ba-header-left { flex: 1; min-width: 0; flex-shrink: 1; }
.ba-header-bar .ba-generate-btn { font-size: 11px; padding: 4px 10px; }
.ba-header-btn {
  background: transparent;
  border: 1px solid var(--blue, #00a8ff);
  color: var(--blue, #00a8ff);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}
.ba-header-btn:hover { background: rgba(0, 168, 255, 0.08); }
.ba-header-btn-danger { border-color: var(--red, #ff3344); color: var(--red, #ff3344); }
.ba-header-btn-danger:hover { background: rgba(255, 51, 68, 0.08); }
.ba-header-btn-basin { border-color: var(--green, #00cc88); color: var(--green, #00cc88); }
.ba-header-btn-basin:hover { background: rgba(0, 204, 136, 0.08); }

/* ── Verdict inline (basin mode header) ── */
.ba-verdict-inline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Basin type/phase badges ── */
.ba-basin-type-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(0, 168, 255, 0.12);
  color: var(--blue, #00a8ff);
}
.ba-basin-phase-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 170, 0, 0.12);
  color: var(--amber, #ffaa00);
}

/* ── Strip (distribution + coverage, compact) ── */
.ba-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg-1, #0c1220);
  border-bottom: 1px solid var(--bg-3, #141f35);
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 28px;
}

.ba-dist-strip { display: flex; align-items: center; gap: 8px; }
.ba-strip-item { display: flex; align-items: center; gap: 3px; }
.ba-strip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}
.ba-strip-bar {
  height: 6px;
  background: var(--bg-2, #111a2e);
  border-radius: 2px;
  min-width: 40px;
  overflow: hidden;
}
.ba-strip-fill { height: 100%; border-radius: 2px; display: block; }
.ba-strip-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-2, #8899aa);
}
.ba-strip-sep { color: var(--bg-4, #182038); margin: 0 4px; }
.ba-strip-phase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3, #556);
  padding: 1px 4px;
  border-bottom: 2px solid transparent;
}

.ba-cov-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.ba-cov-strip-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}
.ba-cov-strip-gaps {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--amber, #ffaa00);
}

/* ── Two-panel layout ── */
.ba-two-panel {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.ba-left-panel {
  flex: 0 0 60%;
  overflow-y: auto;
  padding: 8px 12px;
  border-right: 1px solid var(--bg-3, #141f35);
}
.ba-right-panel {
  flex: 0 0 40%;
  overflow-y: auto;
  padding: 8px 12px;
}

/* ── Basin mode specifics ── */
.ba-basin-sentence-bar {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-1, #f5f6fa);
  line-height: 1.5;
  background: rgba(0, 168, 255, 0.04);
  border-bottom: 1px solid var(--bg-3, #141f35);
  flex-shrink: 0;
  font-style: italic;
}
.ba-basin-sidebar {
  background: var(--bg-0, #080c14);
}

/* ── Scrollbar styling (thin, dark) ── */
.ba-left-panel::-webkit-scrollbar,
.ba-right-panel::-webkit-scrollbar { width: 5px; }
.ba-left-panel::-webkit-scrollbar-thumb,
.ba-right-panel::-webkit-scrollbar-thumb {
  background: var(--bg-4, #182038);
  border-radius: 3px;
}
.ba-left-panel::-webkit-scrollbar-track,
.ba-right-panel::-webkit-scrollbar-track { background: transparent; }

/* ── Responsive: stack on narrow viewports ── */
@media (max-width: 900px) {
  .ba-two-panel {
    flex-direction: column;
  }
  .ba-left-panel, .ba-right-panel {
    flex: none;
    width: 100%;
    border-right: none;
    max-height: 50vh;
  }
  .ba-left-panel { border-bottom: 1px solid var(--bg-3, #141f35); }
}

/* ── Light mode overrides ── */
html.light-mode .ba-header-bar {
  background: var(--bg-1, #ede9e2);
  border-bottom-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-header-btn {
  border-color: var(--blue, #0c6b8a);
  color: var(--blue, #0c6b8a);
}
html.light-mode .ba-header-btn:hover { background: rgba(12, 107, 138, 0.06); }
html.light-mode .ba-header-btn-danger { border-color: var(--red, #992822); color: var(--red, #992822); }
html.light-mode .ba-header-btn-basin { border-color: var(--green, #1a6848); color: var(--green, #1a6848); }
html.light-mode .ba-strip {
  background: var(--bg-1, #ede9e2);
  border-bottom-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-strip-bar { background: var(--bg-3, #d4cfc5); }
html.light-mode .ba-strip-val { color: var(--text-2, #5a5a5a); }
html.light-mode .ba-strip-sep { color: var(--bg-4, #c2bbaf); }
html.light-mode .ba-strip-phase { color: var(--text-3, #888); }
html.light-mode .ba-cov-strip-status { /* uses var(--green/amber/red) which auto-switch */ }
html.light-mode .ba-cov-strip-gaps { color: var(--amber, #8c5a08); }
html.light-mode .ba-left-panel {
  border-right-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-basin-sentence-bar {
  color: var(--text-1, #1a1a1a);
  background: rgba(12, 107, 138, 0.04);
  border-bottom-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-basin-sidebar {
  background: var(--bg-0, #f4f1ec);
}
html.light-mode .ba-basin-type-badge {
  background: rgba(12, 107, 138, 0.1);
  color: var(--blue, #0c6b8a);
}
html.light-mode .ba-basin-phase-badge {
  background: rgba(140, 90, 8, 0.1);
  color: var(--amber, #8c5a08);
}
html.light-mode .ba-left-panel::-webkit-scrollbar-thumb,
html.light-mode .ba-right-panel::-webkit-scrollbar-thumb {
  background: var(--bg-4, #c2bbaf);
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIELD RENDERER — IVr Belief Field Visualization                          */
/* Dark mode base (uses CSS variables)                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Field container ── */
.fr-field {
  position: relative;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fr-field:not(.fr-compact) {
  min-height: 420px;
}
.fr-compact {
  min-height: 220px;
}

/* ── Header ── */
.fr-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fr-title {
  font: 600 11px/1 var(--sans);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.fr-phase-tabs {
  display: flex;
  gap: 2px;
  margin-left: 8px;
}
.fr-phase-tab {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
  font: 500 10px/1 var(--mono);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fr-phase-tab:hover {
  background: var(--bg-3);
  color: var(--text-1);
}
.fr-phase-active {
  background: var(--blue-glow);
  border-color: var(--blue-dim);
  color: var(--blue);
}
.fr-phase-count {
  font-size: 9px;
  background: var(--bg-3);
  border-radius: 2px;
  padding: 1px 3px;
  color: var(--text-3);
}
.fr-phase-active .fr-phase-count {
  background: var(--blue-dim);
  color: var(--blue);
}
.fr-field-strength {
  margin-left: auto;
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.06em;
}

/* ── Empty state ── */
.fr-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-3);
  font: 400 12px/1.5 var(--sans);
  text-align: center;
}
.fr-compact .fr-empty {
  padding: 20px 12px;
  font-size: 11px;
}

/* ── Canvas wrap (main field area) ── */
.fr-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 280px;
  overflow: hidden;
}
.fr-compact .fr-canvas-wrap {
  min-height: 140px;
}

/* ── Zones (θ bands) ── */
.fr-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.fr-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 8px;
  transition: opacity 0.3s ease;
}
.fr-zone-label {
  font: 600 9px/1 var(--mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.fr-zone-pull {
  font: 400 9px/1 var(--mono);
  color: var(--text-3);
  margin-top: 2px;
  opacity: 0.6;
}

/* ── Bodies ── */
.fr-bodies {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.fr-body {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  z-index: 6;
}
.fr-body:hover {
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 10;
}
.fr-body-selected {
  border-width: 3px;
  transform: translate(-50%, -50%) scale(1.12);
  z-index: 11;
}
.fr-body-nucleus {
  font: 500 9px/1.1 var(--mono);
  color: var(--text-1);
  text-align: center;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
}
.fr-body-pull {
  font: 400 8px/1 var(--mono);
  margin-top: 1px;
}
.fr-body-label {
  position: absolute;
  transform: translateX(-50%);
  font: 400 9px/1 var(--sans);
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
  pointer-events: none;
}
.fr-compact .fr-body-label {
  font-size: 8px;
  max-width: 70px;
}

/* ── Bimodal / unresolved rings ── */
.fr-body-bimodal-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed;
  pointer-events: none;
  opacity: 0.6;
  animation: fr-pulse 2s ease-in-out infinite;
}
.fr-body-unresolved-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dotted var(--text-3);
  pointer-events: none;
  opacity: 0.4;
}
@keyframes fr-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.06); }
}

/* ── No bodies message ── */
.fr-no-bodies {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font: 400 11px/1.5 var(--sans);
}

/* ── Center of Gravity ── */
.fr-cog {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}
.fr-cog-h {
  position: absolute;
  width: 40px;
  height: 1px;
  top: 50%;
  left: -20px;
  opacity: 0.35;
}
.fr-cog-v {
  position: absolute;
  width: 1px;
  height: 40px;
  left: 50%;
  top: -20px;
  opacity: 0.35;
}
.fr-cog-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: -3px;
  left: -3px;
  opacity: 0.7;
}
.fr-cog-label {
  position: absolute;
  top: -18px;
  left: 8px;
  font: 600 8px/1 var(--mono);
  white-space: nowrap;
  opacity: 0.7;
}

/* ── Dark matter haze ── */
.fr-dark-matter {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    var(--bg-3) 0%,
    transparent 70%
  );
}
.fr-dm-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  font: 400 9px/1 var(--mono);
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 6px;
  cursor: default;
}

/* ── Superposition badge ── */
.fr-superposition-badge {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 3px;
}
.fr-super-bimodal {
  background: var(--amber-glow);
  border: 1px solid var(--amber-dim);
  color: var(--amber);
}
.fr-super-unresolved {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-3);
}

/* ── Ignorance bar ── */
.fr-ignorance-bar {
  display: flex;
  height: 6px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.fr-ign-seg {
  height: 100%;
  transition: width 0.3s ease;
}
.fr-ign-ignorance {
  background: repeating-linear-gradient(
    45deg,
    var(--bg-3),
    var(--bg-3) 2px,
    var(--bg-4) 2px,
    var(--bg-4) 4px
  );
}
.fr-ign-labels {
  display: flex;
  justify-content: space-between;
  padding: 3px 12px;
  font: 400 8px/1 var(--mono);
  color: var(--text-3);
  flex-shrink: 0;
}

/* ── Accretion deltas ── */
.fr-accretion {
  border-top: 1px solid var(--border);
  padding: 6px 10px;
  flex-shrink: 0;
}
.fr-accretion-header {
  font: 600 9px/1 var(--sans);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.fr-delta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font: 400 10px/1.3 var(--mono);
}
.fr-delta-icon {
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.fr-delta-label {
  color: var(--text-1);
  flex-shrink: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-delta-detail {
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-delta-accreting .fr-delta-icon { color: var(--green); }
.fr-delta-eroding .fr-delta-icon { color: var(--red); }
.fr-delta-direction-shift .fr-delta-icon { color: var(--amber); }
.fr-delta-superposition-change .fr-delta-icon { color: var(--violet); }
.fr-delta-new .fr-delta-icon { color: var(--cyan); }
.fr-delta-vanished .fr-delta-icon { color: var(--text-3); }
.fr-delta-more {
  font: 400 9px/1 var(--mono);
  color: var(--text-3);
  padding: 2px 0;
}

/* ── Body detail panel ── */
.fr-detail {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--bg-1);
  flex-shrink: 0;
  max-height: 280px;
  overflow-y: auto;
}
.fr-compact .fr-detail {
  max-height: 180px;
  padding: 8px 10px;
}
.fr-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fr-detail-title {
  font: 600 12px/1 var(--sans);
}
.fr-detail-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.fr-detail-close:hover {
  background: var(--bg-3);
}
.fr-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font: 400 10px/1.4 var(--mono);
}
.fr-detail-key {
  color: var(--text-3);
}
.fr-detail-val {
  color: var(--text-1);
  text-align: right;
}
.fr-detail-section {
  font: 600 9px/1 var(--sans);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
  margin-bottom: 3px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.fr-detail-orbiter {
  font: 400 9px/1.4 var(--mono);
  color: var(--text-2);
  padding-left: 6px;
}

/* ── Phase comparison bars in detail ── */
.fr-detail-phases {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
  height: 56px;
}
.fr-detail-phase-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.fr-detail-phase-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height 0.2s ease;
}
.fr-detail-phase-label {
  font: 500 8px/1 var(--mono);
  color: var(--text-3);
}
.fr-detail-phase-current .fr-detail-phase-label {
  color: var(--blue);
}

/* ── fr-container wrapper used in MAP/BASIN mode ── */
.fr-container {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIELD RENDERER — Light mode overrides                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

html.light-mode .fr-field {
  background: var(--bg-0);
  border-color: var(--border);
}
html.light-mode .fr-header {
  background: var(--bg-1);
  border-bottom-color: var(--border);
}
html.light-mode .fr-phase-tab {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text-2);
}
html.light-mode .fr-phase-tab:hover {
  background: var(--bg-3);
  color: var(--text-1);
}
html.light-mode .fr-phase-active {
  background: var(--blue-glow);
  border-color: var(--blue-dim);
  color: var(--blue);
}
html.light-mode .fr-body {
  background: var(--bg-1);
}
html.light-mode .fr-body-nucleus {
  color: var(--text-0);
}
html.light-mode .fr-dark-matter {
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    var(--bg-4) 0%,
    transparent 70%
  );
}
html.light-mode .fr-dm-badge {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text-2);
}
html.light-mode .fr-ign-ignorance {
  background: repeating-linear-gradient(
    45deg,
    var(--bg-3),
    var(--bg-3) 2px,
    var(--bg-4) 2px,
    var(--bg-4) 4px
  );
}
html.light-mode .fr-detail {
  background: var(--bg-1);
}
html.light-mode .fr-detail-close {
  border-color: var(--border);
  color: var(--text-2);
}
html.light-mode .fr-detail-close:hover {
  background: var(--bg-3);
}

/* ═══════════════════════════════════════════════════════════════
 * PROMPT 15: Nucleus display in lens boxes + Coverage strip field stats
 * ═══════════════════════════════════════════════════════════════ */

/* ── Nucleus row in lens box ── */
.ba-box-nucleus {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  margin-top: 2px;
  font-size: 11px;
  background: var(--bg-1);
  border-radius: 4px;
  border-left: 2px solid var(--amber);
  opacity: 0.92;
}
.ba-box-nucleus-label {
  font-size: 13px;
  color: var(--amber);
  line-height: 1;
}
.ba-box-nucleus-atom {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.ba-box-nucleus-dir {
  font-size: 11px;
  font-weight: 600;
}
.ba-box-nucleus-phase {
  font-size: 9.5px;
  color: var(--text-3);
  padding: 1px 4px;
  background: var(--bg-2);
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Coverage strip field stats ── */
.ba-cov-strip-jupiter {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.ba-cov-strip-sup {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,170,0,0.08);
}
.ba-cov-strip-unattached {
  font-size: 10px;
  color: var(--text-3);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-2);
  white-space: nowrap;
}

/* Light mode adjustments */
html.light-mode .ba-box-nucleus {
  background: var(--bg-2);
}
html.light-mode .ba-cov-strip-jupiter {
  background: var(--bg-2);
}
html.light-mode .ba-cov-strip-sup {
  background: rgba(200,130,0,0.1);
}
html.light-mode .ba-cov-strip-unattached {
  background: var(--bg-3);
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* ATOM PICKER — Compact searchable/filterable atom list in left panel       */
/* Appears below field map when a lens is in edit mode                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Left panel stacking: field map top, picker bottom ── */
.ba-left-panel {
  display: flex;
  flex-direction: column;
}
.ba-left-panel .fr-container {
  flex: 0 0 auto;
  max-height: 45%;
  overflow: hidden;
}

/* ── Picker container ── */
.ba-atom-picker {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bg-3, #141f35);
  background: var(--bg-0, #080c14);
}

/* ── Picker header ── */
.ba-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-1, #0c1220);
  border-bottom: 1px solid var(--bg-3, #141f35);
  flex-shrink: 0;
}
.ba-picker-title {
  font: 600 11px/1 var(--sans);
  color: var(--text-2, #8a94a8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ba-picker-count {
  font: 500 10px/1 var(--mono);
  color: var(--text-3, #555e70);
  margin-left: auto;
}
.ba-picker-close {
  background: none;
  border: none;
  color: var(--text-3, #555e70);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.ba-picker-close:hover {
  color: var(--red, #ff3344);
}

/* ── Search bar ── */
.ba-picker-search-bar {
  padding: 4px 8px;
  flex-shrink: 0;
}
.ba-picker-search {
  width: 100%;
  background: var(--bg-2, #101828);
  border: 1px solid var(--bg-3, #141f35);
  border-radius: 4px;
  padding: 5px 8px;
  font: 400 11px/1.3 var(--sans);
  color: var(--text-1, #f5f6fa);
  outline: none;
  transition: border-color 0.15s;
}
.ba-picker-search::placeholder {
  color: var(--text-3, #555e70);
}
.ba-picker-search:focus {
  border-color: var(--blue, #00a8ff);
}

/* ── Filter tabs row ── */
.ba-picker-filters {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bg-2, #101828);
}
.ba-picker-filter {
  font: 500 10px/1 var(--mono);
  color: var(--text-3, #555e70);
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ba-picker-filter:hover {
  color: var(--text-2, #8a94a8);
  background: var(--bg-2, #101828);
}
.ba-picker-filter-active {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.03);
}
.ba-picker-filter-count {
  font-size: 9px;
  opacity: 0.6;
  margin-left: 1px;
}
.ba-picker-filter-sep {
  color: var(--bg-4, #182038);
  font-size: 11px;
  margin: 0 2px;
}
.ba-picker-filter-src {
  font-style: italic;
}

/* ── Atom list (scrollable) ── */
.ba-picker-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
}
.ba-picker-list::-webkit-scrollbar { width: 4px; }
.ba-picker-list::-webkit-scrollbar-thumb {
  background: var(--bg-4, #182038);
  border-radius: 2px;
}
.ba-picker-list::-webkit-scrollbar-track { background: transparent; }

/* ── Individual atom row ── */
.ba-picker-atom {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s;
  border-left: 2px solid transparent;
  min-height: 28px;
}
.ba-picker-atom:hover {
  background: var(--bg-2, #101828);
}
.ba-picker-atom-selected {
  background: rgba(0, 168, 255, 0.06);
  border-left-color: var(--blue, #00a8ff);
}
.ba-picker-atom-selected:hover {
  background: rgba(0, 168, 255, 0.1);
}

/* ── Companion Hint ── pulsing neon glow for suggested companions ── */
.ba-companion-hint {
  border-left-color: var(--neon-yellow, #feca57) !important;
  background: rgba(254, 202, 87, 0.06);
  position: relative;
}
.ba-companion-hint::after {
  content: '\2728';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.7;
  animation: companion-pulse 2s ease-in-out infinite;
}
@keyframes companion-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1.0; }
}
.ba-companion-hint:hover {
  background: rgba(254, 202, 87, 0.12);
}
.ba-companion-hint.ba-picker-atom-selected {
  border-left-color: var(--blue, #00a8ff) !important;
  background: rgba(0, 168, 255, 0.06);
}
.ba-companion-hint.ba-picker-atom-selected::after {
  content: '\2713';
  animation: none;
  opacity: 0.5;
}

/* ── Selection indicator ── */
.ba-picker-sel {
  font-size: 12px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  color: var(--text-3, #555e70);
}
.ba-picker-atom-selected .ba-picker-sel {
  color: var(--blue, #00a8ff);
}

/* ── Role pip ── */
.ba-picker-role {
  font: 700 9px/1 var(--mono);
  flex-shrink: 0;
  width: 26px;
  text-align: center;
  letter-spacing: 0.03em;
}

/* ── Label (grows) ── */
.ba-picker-label {
  font: 400 11px/1.3 var(--sans);
  color: var(--text-1, #f5f6fa);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Value display ── */
.ba-picker-value {
  font: 400 10px/1 var(--mono);
  color: var(--text-3, #555e70);
  flex-shrink: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Belief interval ── */
.ba-picker-bel {
  font: 600 9px/1 var(--mono);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Phase pips ── */
.ba-picker-phases {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.ba-picker-pip {
  font: 700 7px/1 var(--mono);
  color: var(--bg-0, #080c14);
  padding: 2px 3px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Empty state ── */
.ba-picker-empty {
  padding: 16px 10px;
  text-align: center;
  font: 400 11px/1.4 var(--sans);
  color: var(--text-3, #555e70);
}

/* ── Light mode overrides for atom picker ── */
html.light-mode .ba-atom-picker {
  background: var(--bg-0, #f4f1ec);
  border-top-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-picker-header {
  background: var(--bg-1, #ede9e2);
  border-bottom-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-picker-title {
  color: var(--text-2, #5a5a5a);
}
html.light-mode .ba-picker-count {
  color: var(--text-3, #888);
}
html.light-mode .ba-picker-close {
  color: var(--text-3, #888);
}
html.light-mode .ba-picker-search {
  background: var(--bg-2, #e3ded6);
  border-color: var(--bg-3, #d4cfc5);
  color: var(--text-1, #1a1a1a);
}
html.light-mode .ba-picker-search::placeholder {
  color: var(--text-3, #888);
}
html.light-mode .ba-picker-search:focus {
  border-color: var(--blue, #0c6b8a);
}
html.light-mode .ba-picker-filters {
  border-bottom-color: var(--bg-3, #d4cfc5);
}
html.light-mode .ba-picker-filter {
  color: var(--text-3, #888);
}
html.light-mode .ba-picker-filter:hover {
  color: var(--text-2, #5a5a5a);
  background: var(--bg-2, #e3ded6);
}
html.light-mode .ba-picker-filter-active {
  background: rgba(0, 0, 0, 0.03);
}
html.light-mode .ba-picker-filter-sep {
  color: var(--bg-4, #c2bbaf);
}
html.light-mode .ba-picker-list::-webkit-scrollbar-thumb {
  background: var(--bg-4, #c2bbaf);
}
html.light-mode .ba-picker-atom:hover {
  background: var(--bg-2, #e3ded6);
}
html.light-mode .ba-picker-atom-selected {
  background: rgba(12, 107, 138, 0.06);
  border-left-color: var(--blue, #0c6b8a);
}
html.light-mode .ba-picker-atom-selected:hover {
  background: rgba(12, 107, 138, 0.1);
}
html.light-mode .ba-companion-hint {
  border-left-color: #d4a017 !important;
  background: rgba(212, 160, 23, 0.06);
}
html.light-mode .ba-companion-hint:hover {
  background: rgba(212, 160, 23, 0.12);
}
html.light-mode .ba-picker-sel {
  color: var(--text-3, #888);
}
html.light-mode .ba-picker-atom-selected .ba-picker-sel {
  color: var(--blue, #0c6b8a);
}
html.light-mode .ba-picker-label {
  color: var(--text-1, #1a1a1a);
}
html.light-mode .ba-picker-value {
  color: var(--text-3, #888);
}
html.light-mode .ba-picker-pip {
  color: var(--bg-0, #f4f1ec);
}
html.light-mode .ba-picker-empty {
  color: var(--text-3, #888);
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIELD-FIRST UI — bf-* prefix classes for Tab 9 interactive field layout   */
/* Navy dark mode with neon accents                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Main layout ── */
.bf-main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.bf-panel-left {
  flex: 0 0 58%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border, #1e2a42);
  overflow: hidden;
  position: relative;
}
.bf-panel-right {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Engine voice (now inline in phase bar, class kept for legacy) ── */
.bf-engine-voice {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--text-3, #555e70);
  padding: 4px 12px;
  background: var(--bg-1, #0b1120);
  border-bottom: 1px solid var(--border, #1e2a42);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Field map ── */
.bf-field-map {
  flex: 1;
  position: relative;
  background: var(--bg-0, #080c14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 280px;
}

/* ── Zones ── */
.bf-zones {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 52px;
  display: flex;
  z-index: 0;
}
.bf-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  border-right: 1px solid rgba(255,255,255,0.02);
}
.bf-zone:hover {
  background: rgba(255,255,255,0.015);
}
.bf-zone:last-child {
  border-right: none;
}

/* ── Bodies ── */
.bf-body {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.2s;
  z-index: 1;
}
.bf-body:hover {
  filter: brightness(1.3);
  z-index: 5 !important;
}
.bf-body-selected {
  z-index: 3;
}
.bf-body-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin-top: 4px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bf-body:hover .bf-body-label,
.bf-body-selected .bf-body-label {
  opacity: 1;
}

/* ── CoG line ── */
.bf-cog-line {
  position: absolute;
  top: 10%;
  bottom: 52px;
  width: 1px;
  z-index: 0;
  pointer-events: none;
}

/* ── Dark matter overlay ── */
.bf-dark-matter {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 52px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ── Spread ring ── */
.bf-spread-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed;
  opacity: 0.2;
  pointer-events: none;
}

/* ── Bottom bar ── */
/* ── Field Map Navigation ── */
.bf-field-maximized {
  position: fixed !important;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  border-radius: 0 !important;
  border: none !important;
  flex: none !important;
}
.bf-nav-toolbar button:hover {
  background: var(--bg-2, #0f1628) !important;
  color: var(--text-1, #e2dcd2) !important;
}
.bf-theta-focus-btn:hover {
  filter: brightness(1.2);
}
.bf-field-viewport {
  will-change: transform;
}

.bf-bottom-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: rgba(8, 12, 20, 0.9);
  border-top: 1px solid var(--border, #1e2a42);
  backdrop-filter: blur(6px);
  z-index: 4;
  flex-shrink: 0;
}

/* ── Phase tabs in bottom bar ── */
.bf-phase-tabs {
  display: flex;
  gap: 2px;
}
.bf-phase-tab {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  background: transparent;
  border: 1px solid var(--border, #1e2a42);
  color: var(--text-3, #555e70);
  width: 32px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.bf-phase-tab:hover {
  border-color: var(--blue, #00a8ff);
  color: var(--text-2, #7080a0);
}
.bf-phase-active {
  font-weight: 700;
}

/* ── Bel/Pl strip ── */
.bf-belpl-strip {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Coverage badge ── */
.bf-coverage-badge {
  margin-left: auto;
}

/* ── Hypothesis bar ── */
.bf-hypothesis-bar {
  position: absolute;
  bottom: 52px;
  left: 12px;
  right: 12px;
  z-index: 5;
}
.bf-hypothesis-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(8, 12, 20, 0.85);
  border: 1px solid var(--border, #1e2a42);
  color: var(--text-2, #7080a0);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--sans, 'IBM Plex Sans', sans-serif);
  font-size: 11px;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.bf-hypothesis-input::placeholder {
  color: var(--text-3, #555e70);
}
.bf-hypothesis-input:focus {
  border-color: var(--amber, #ffaa00);
  box-shadow: 0 0 8px var(--amber-glow, rgba(255,170,0,0.15));
  color: var(--text-1, #b8c0d0);
}

/* ── Quick actions ── */
.bf-qbtn {
  font-family: var(--mono, monospace);
  font-size: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #1e2a42);
  color: var(--text-3, #555e70);
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.bf-qbtn:hover {
  opacity: 0.8;
  color: var(--text-2, #7080a0);
}

/* ── Body detail panel (Fix A) ── */
.bf-body-detail {
  scrollbar-width: thin;
  scrollbar-color: var(--border-1, #243050) transparent;
  animation: bf-slide-up 0.2s ease-out;
}
@keyframes bf-slide-up {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Workspace ── */
.bf-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-0, #080c14);
}
.bf-workspace-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #1e2a42);
  flex-shrink: 0;
  background: var(--bg-1, #0b1120);
}

/* ── Lens list ── */
.bf-lens-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-1, #243050) transparent;
}
.bf-lens-list::-webkit-scrollbar { width: 4px; }
.bf-lens-list::-webkit-scrollbar-thumb {
  background: var(--border-1, #243050);
  border-radius: 2px;
}
.bf-lens-list::-webkit-scrollbar-track { background: transparent; }

/* ── Lens box ── */
.bf-lens-box {
  margin: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border, #1e2a42);
  background: var(--bg-1, #0b1120);
  transition: border-color 0.15s, background 0.15s;
}
.bf-lens-box:hover {
  border-color: var(--border-2, #2a3860);
  background: var(--bg-2, #0f1628);
}
.bf-lens-expanded {
  background: var(--bg-2, #0f1628);
}
.bf-lens-active {
  box-shadow: 0 0 0 1px rgba(0, 168, 255, 0.15);
}

/* ── Lens content (expanded) ── */
.bf-lens-content {
  padding: 6px 8px;
  border-top: 1px solid var(--border, #1e2a42);
}

/* ── Atom picker ── */
.bf-atom-picker {
  border-top: 1px solid var(--border-2, #2a3860);
  background: var(--bg-0, #080c14);
  max-height: 260px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.bf-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-1, #243050) transparent;
}
.bf-picker-list::-webkit-scrollbar { width: 4px; }
.bf-picker-list::-webkit-scrollbar-thumb {
  background: var(--border-1, #243050);
  border-radius: 2px;
}
.bf-picker-list::-webkit-scrollbar-track { background: transparent; }

.bf-picker-atom {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  transition: background 0.1s;
}
.bf-picker-atom:hover {
  background: rgba(255,255,255,0.03);
}
.bf-picker-atom-selected {
  background: rgba(0, 168, 255, 0.06);
}

/* ── Lens name (workspace panel) ── */
.bf-lens-name {
  font-family: var(--sans, 'Space Grotesk', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-0, #eef0f4);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .bf-main-layout {
    flex-direction: column;
  }
  .bf-panel-left,
  .bf-panel-right {
    flex: none;
    width: 100%;
    border-right: none;
    max-height: 50vh;
  }
  .bf-panel-left {
    border-bottom: 1px solid var(--border, #1e2a42);
    min-height: 320px;
  }
}

/* ── Light mode overrides ── */
html.light-mode .bf-engine-voice {
  background: var(--bg-1, #ede9e2);
  border-bottom-color: var(--bg-3, #d4cfc5);
  color: var(--text-3, #888);
}
html.light-mode .bf-field-map {
  background: var(--bg-0, #f4f1ec);
}
html.light-mode .bf-nav-toolbar {
  background: var(--bg-1, #ede9e2) !important;
  border-bottom-color: var(--bg-3, #d4cfc5) !important;
}
html.light-mode .bf-nav-toolbar button:hover {
  background: var(--bg-2, #e3ded6) !important;
}
html.light-mode .bf-zone:hover {
  background: rgba(0,0,0,0.02);
}
html.light-mode .bf-bottom-bar {
  background: rgba(244, 241, 236, 0.92);
  border-top-color: var(--bg-3, #d4cfc5);
}
html.light-mode .bf-phase-tab {
  border-color: var(--bg-3, #d4cfc5);
  color: var(--text-3, #888);
}
html.light-mode .bf-phase-tab:hover {
  border-color: var(--blue, #0c6b8a);
  color: var(--text-2, #5a5a5a);
}
html.light-mode .bf-hypothesis-input {
  background: rgba(244, 241, 236, 0.9);
  border-color: var(--bg-3, #d4cfc5);
  color: var(--text-1, #1a1a1a);
}
html.light-mode .bf-hypothesis-input::placeholder {
  color: var(--text-3, #888);
}
html.light-mode .bf-workspace {
  background: var(--bg-0, #f4f1ec);
}
html.light-mode .bf-workspace-header {
  background: var(--bg-1, #ede9e2);
  border-bottom-color: var(--bg-3, #d4cfc5);
}
html.light-mode .bf-lens-name {
  color: var(--text-0, #1a1610);
}
html.light-mode .bf-lens-box {
  background: var(--bg-1, #ede9e2);
  border-color: var(--bg-3, #d4cfc5);
}
html.light-mode .bf-lens-box:hover {
  border-color: var(--bg-4, #c2bbaf);
  background: var(--bg-2, #e3ded6);
}
html.light-mode .bf-lens-expanded {
  background: var(--bg-2, #e3ded6);
}
html.light-mode .bf-lens-content {
  border-top-color: var(--bg-3, #d4cfc5);
}
html.light-mode .bf-atom-picker {
  background: var(--bg-0, #f4f1ec);
  border-top-color: var(--bg-3, #d4cfc5);
}
html.light-mode .bf-picker-atom:hover {
  background: rgba(0,0,0,0.03);
}
html.light-mode .bf-picker-atom-selected {
  background: rgba(12, 107, 138, 0.06);
}
html.light-mode .bf-body-detail {
  background: var(--bg-1, #ede9e2) !important;
}
html.light-mode .bf-minimal-header {
  background: var(--bg-1, #ede9e2) !important;
  border-bottom-color: var(--bg-3, #d4cfc5) !important;
}
html.light-mode .bf-lens-list::-webkit-scrollbar-thumb,
html.light-mode .bf-picker-list::-webkit-scrollbar-thumb {
  background: var(--bg-4, #c2bbaf);
}
/* ── Note extraction expand-on-click event rows ── */
.nex-evt-row:hover {
  background: rgba(255,255,255,0.04) !important;
}
.nex-evt-row:hover .nex-arrow {
  opacity: 0.9 !important;
}
html.light-mode .nex-evt-row:hover {
  background: rgba(0,0,0,0.03) !important;
}

/* ── Companion Hints (Brain Enrichment Integration 2) ── */
.companion-hint {
  padding: 2px 8px 2px 24px;
  margin: 1px 0;
  border-left: 2px solid transparent;
}
.companion-suggestion { border-left-color: #d29922; }
.companion-warning { border-left-color: #e05555; }
.companion-add-btn {
  cursor: pointer;
  background: #1a1a2e;
  color: #d29922;
  border: 1px solid #d29922;
  border-radius: 3px;
}
.companion-add-btn:hover { background: #d29922; color: #0d1117; }
html.light-mode .companion-hint { background: rgba(0,0,0,0.02); }
html.light-mode .companion-add-btn { background: #fef3e0; color: #b8860b; border-color: #b8860b; }
html.light-mode .companion-add-btn:hover { background: #b8860b; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   FONT READABILITY BOOST — Global scale-up for workbench + review + UEF
   Targets inline styles via !important. Safe to remove if unwanted.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Workbench Body ─────────────────────────────────────────────────── */

/* Tier 0: labels that were 5.5-6px → 9px */
#wb-body [style*="font-size:5"], #wb-body [style*="font-size: 5"],
#wb-body [style*="font-size:6p"], #wb-body [style*="font-size: 6p"],
#wb-body [style*="font-size:6."], #wb-body [style*="font-size: 6."] {
  font-size: 9px !important;
}

/* Tier 1: body text that was 7-7.5px → 10px */
#wb-body [style*="font-size:7p"], #wb-body [style*="font-size: 7p"],
#wb-body [style*="font-size:7."], #wb-body [style*="font-size: 7."] {
  font-size: 10px !important;
}

/* Tier 2: content that was 8px → 11px */
#wb-body [style*="font-size:8p"], #wb-body [style*="font-size: 8p"] {
  font-size: 11px !important;
}

/* Tier 3: semi-headers that were 9px → 12px */
#wb-body [style*="font-size:9p"], #wb-body [style*="font-size: 9p"] {
  font-size: 12px !important;
}

/* Tier 4: headers that were 10px → 13px */
#wb-body [style*="font-size:10p"], #wb-body [style*="font-size: 10p"] {
  font-size: 13px !important;
}

/* Workbench class-based overrides (style.css originals) */
.wb-bucket-header { font-size: 12px !important; }
.wb-bucket-count { font-size: 10px !important; }
.wb-card-name { font-size: 12px !important; }
.wb-card-anchor { font-size: 10px !important; }
.wb-card-actions button, .wb-card-actions span { font-size: 10px !important; }
.wb-card-conf { font-size: 9px !important; }
.wb-card-values span, .wb-card-values td { font-size: 11px !important; }
.wb-changes-section { font-size: 11px !important; }
.wb-add-panel label, .wb-add-row label { font-size: 10px !important; }
.wb-add-panel input, .wb-add-panel select, .wb-add-row input, .wb-add-row select { font-size: 11px !important; }
.wb-add-panel button, .wb-add-row button { font-size: 10px !important; }
.wb-add-panel-header { font-size: 12px !important; }
.wb-acct-ref-badge { font-size: 9px !important; }

/* ── B. Review Panel ────────────────────────────────────────────────────── */

#wb-review-section [style*="font-size:5"], #wb-review-section [style*="font-size: 5"],
#wb-review-section [style*="font-size:6p"], #wb-review-section [style*="font-size: 6p"],
#wb-review-section [style*="font-size:6."], #wb-review-section [style*="font-size: 6."] {
  font-size: 9px !important;
}
#wb-review-section [style*="font-size:7p"], #wb-review-section [style*="font-size: 7p"],
#wb-review-section [style*="font-size:7."], #wb-review-section [style*="font-size: 7."] {
  font-size: 10px !important;
}
#wb-review-section [style*="font-size:8p"], #wb-review-section [style*="font-size: 8p"] {
  font-size: 11px !important;
}
#wb-review-section [style*="font-size:9p"], #wb-review-section [style*="font-size: 9p"] {
  font-size: 12px !important;
}
#wb-review-section [style*="font-size:10p"], #wb-review-section [style*="font-size: 10p"] {
  font-size: 13px !important;
}

/* Review panel header */
#review-header-label { font-size: 13px !important; }
#review-pending-badge { font-size: 10px !important; }

/* Review item rows — ensure labels and badges are readable */
#wb-review-section .review-assigned-subsection { font-size: 11px !important; }
#wb-review-section button { min-height: 20px; font-size: 10px !important; }

/* ── C. Unified Entry Form (UEF) ───────────────────────────────────────── */

.uef-form [style*="font-size:5"], .uef-form [style*="font-size: 5"],
.uef-form [style*="font-size:6p"], .uef-form [style*="font-size: 6p"],
.uef-form [style*="font-size:6."], .uef-form [style*="font-size: 6."] {
  font-size: 9px !important;
}
.uef-form [style*="font-size:7p"], .uef-form [style*="font-size: 7p"],
.uef-form [style*="font-size:7."], .uef-form [style*="font-size: 7."] {
  font-size: 10.5px !important;
}
.uef-form [style*="font-size:8p"], .uef-form [style*="font-size: 8p"] {
  font-size: 11.5px !important;
}
.uef-form [style*="font-size:9p"], .uef-form [style*="font-size: 9p"] {
  font-size: 12.5px !important;
}

/* UEF inputs, selects, buttons — must be properly readable */
.uef-form input, .uef-form select, .uef-form textarea {
  font-size: 12px !important;
  padding: 4px 8px !important;
  min-height: 24px;
}
.uef-form button {
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  min-height: 22px;
}
.uef-form label {
  font-size: 10.5px !important;
}
.uef-toggle-btn, .uef-nature-btn {
  font-size: 10.5px !important;
  padding: 4px 10px !important;
}
.uef-effect-preview { font-size: 10px !important; }
.uef-value-input {
  font-size: 11px !important;
  padding: 3px 6px !important;
}

/* ── D. PDF Patches / Notes Scanner cards ───────────────────────────────── */

.pdf-patch-card [style*="font-size:5"], .pdf-patch-card [style*="font-size: 5"],
.pdf-patch-card [style*="font-size:6p"], .pdf-patch-card [style*="font-size: 6p"],
.pdf-patch-card [style*="font-size:6."], .pdf-patch-card [style*="font-size: 6."] {
  font-size: 9px !important;
}
.pdf-patch-card [style*="font-size:7p"], .pdf-patch-card [style*="font-size: 7p"],
.pdf-patch-card [style*="font-size:7."], .pdf-patch-card [style*="font-size: 7."] {
  font-size: 10px !important;
}
.pdf-patch-card [style*="font-size:8p"], .pdf-patch-card [style*="font-size: 8p"] {
  font-size: 11px !important;
}
.pdf-patch-card button { font-size: 10px !important; }

/* ── E. Global workbench area — the tab-financials panel ─────────────── */

/* Bump up the workbench header row (bucket toggle, undo/redo bar) */
#tab-financials .fin-workbench-header,
#tab-financials .wb-header-bar {
  font-size: 12px !important;
}

/* Value columns in workbench cards */
.wb-card-values { font-size: 11px !important; }
.wb-val-cell { font-size: 11px !important; }

/* ── F. Padding/spacing adjustments to prevent cramping at bigger sizes ─ */

#wb-body .wb-card, #wb-body [class*="wb-card"] {
  padding: 6px 8px !important;
}
#wb-review-section > div > div {
  line-height: 1.5;
}
.uef-form > div {
  margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   v1.3.0 TAB CONSOLIDATION — 3-tab nav + utility drawer
   Two-row fixed layout. Row1 = main tabs. Row2 = sub-tabs (swappable).
   ═══════════════════════════════════════════════════════════════════════════════ */
.v13-wrapper {
  display: flex; flex-direction: column; width: 100%;
}

/* ── ROW 1: Main tabs ── */
.v13-row1 {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg-1, #0b1120);
  border-bottom: 1px solid var(--border, #1e2a42);
  padding: 0 8px; min-height: 38px;
}
.v13-tab-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 22px; border: none; background: transparent;
  color: var(--text-3, #4a5670);
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 1.2px; cursor: pointer; transition: all 0.2s;
}
.v13-tab-btn::after {
  content: ''; position: absolute; bottom: -1px; left: 8px; right: 8px;
  height: 2px; background: transparent; border-radius: 1px;
  transition: background 0.2s;
}
.v13-tab-btn:hover { color: var(--text-1, #b8c0d0); }
.v13-tab-btn:hover::after { background: var(--tab-color, #00a8ff)33; }
.v13-tab-btn.active { color: var(--text-0, #eef0f4); }
.v13-tab-btn.active::after { background: var(--tab-color, #00a8ff); }
.v13-tab-num {
  display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 3px; background: var(--bg-3, #131b30); font-size: 9px;
  font-family: 'JetBrains Mono', monospace; color: var(--text-3, #4a5670);
  transition: all 0.2s;
}
.v13-tab-btn.active .v13-tab-num {
  background: var(--tab-color, #00a8ff); color: var(--bg-0, #080c14); font-weight: 700;
}
.v13-drawer-btn {
  margin-left: auto; align-self: center; padding: 5px 10px;
  border: 1px solid var(--border, #1e2a42); border-radius: 4px;
  background: transparent; color: var(--text-3, #4a5670);
  font-size: 14px; cursor: pointer; transition: all 0.2s;
}
.v13-drawer-btn:hover { background: var(--bg-3, #131b30); color: var(--text-1, #b8c0d0); }
.v13-drawer-btn.active { background: var(--bg-3, #131b30); color: var(--amber, #ffaa00); border-color: var(--amber, #ffaa00); }

/* ── ROW 2: Sub-tabs (fixed position, swappable content) ── */
.v13-row2 {
  display: flex; align-items: stretch; min-height: 30px;
  background: var(--bg-2, #0f1628);
  border-bottom: 1px solid var(--border, #1e2a42);
  padding: 0 8px;
}
.v13-sub-group { display: flex; align-items: stretch; gap: 0; }
.v13-sub-btn {
  position: relative; padding: 6px 16px; border: none; background: transparent;
  color: var(--text-3, #4a5670); font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5px; cursor: pointer; transition: all 0.15s;
}
.v13-sub-btn::after {
  content: ''; position: absolute; bottom: -1px; left: 6px; right: 6px;
  height: 2px; background: transparent; border-radius: 1px;
  transition: background 0.15s;
}
.v13-sub-btn:hover { color: var(--text-1, #b8c0d0); }
.v13-sub-btn.active { color: var(--text-0, #eef0f4); font-weight: 600; }
.v13-sub-btn.active::after { background: var(--blue, #00a8ff); }

/* ── Utility Drawer ── */
.v13-utility-drawer {
  position: fixed; right: 0; top: 80px; width: 240px; bottom: 0; z-index: 1000;
  flex-direction: column; background: var(--bg-1, #0b1120);
  border-left: 1px solid var(--border, #1e2a42);
  box-shadow: -4px 0 20px rgba(0,0,0,0.4);
}
.v13-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border, #1e2a42);
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--text-2, #7080a0); letter-spacing: 1.5px;
}
.v13-drawer-close { cursor: pointer; font-size: 18px; color: var(--text-3, #4a5670); line-height: 1; }
.v13-drawer-close:hover { color: var(--text-0, #eef0f4); }
.v13-drawer-items { display: flex; flex-direction: column; padding: 10px; gap: 4px; }
.v13-drawer-item {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 10px 14px; border: 1px solid var(--border, #1e2a42);
  border-radius: 4px; background: transparent; color: var(--text-1, #b8c0d0);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; cursor: pointer;
  text-align: left; transition: all 0.15s; flex-wrap: wrap;
}
.v13-drawer-item:hover { background: var(--bg-3, #131b30); border-color: var(--border-1, #243050); }
.v13-drawer-item-future {
  opacity: 0.35; cursor: not-allowed; border-style: dashed;
}
.v13-drawer-item-future:hover { background: transparent; border-color: var(--border, #1e2a42); }
.v13-di-icon { font-size: 13px; flex-shrink: 0; }
.v13-di-hint {
  display: block; width: 100%; font-size: 9px; color: var(--text-3, #4a5670);
  margin-top: 1px; padding-left: 21px; letter-spacing: 0.3px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Light mode ── */
html.light-mode .v13-row1 { background: var(--bg-0, #f4f1ec); border-bottom-color: var(--bg-3, #d4cfc5); }
html.light-mode .v13-tab-btn { color: var(--text-2, #6b7280); }
html.light-mode .v13-tab-btn.active { color: var(--text-0, #1a1a1a); }
html.light-mode .v13-row2 { background: var(--bg-1, #ede9e2); border-bottom-color: var(--bg-3, #d4cfc5); }
html.light-mode .v13-sub-btn { color: var(--text-2, #6b7280); }
html.light-mode .v13-sub-btn.active { color: var(--text-0, #1a1a1a); }
html.light-mode .v13-utility-drawer { background: var(--bg-0, #f4f1ec); border-left-color: var(--bg-3, #d4cfc5); box-shadow: -4px 0 20px rgba(0,0,0,0.08); }

/* ═══════════════════════════════════════════════════════════════════════════════
   ENGINE CANVAS — IVr Composite (ec-* classes)
   ═══════════════════════════════════════════════════════════════════════════════ */
.ec-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--bg-1, #0b1120); border-bottom: 1px solid var(--border, #1e2a42);
  flex-wrap: wrap;
}
.ec-layer-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border: 1px solid var(--border, #1e2a42); border-radius: 4px;
  background: transparent; color: var(--text-2, #7080a0);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  cursor: pointer; transition: all 0.2s;
}
.ec-layer-toggle:hover:not(.disabled) { border-color: var(--layer-color, #555e70); color: var(--text-1, #b8c0d0); }
.ec-layer-toggle.active {
  background: var(--layer-color, #555e70); color: var(--bg-0, #080c14);
  border-color: var(--layer-color, #555e70); font-weight: 600;
}
.ec-layer-toggle.disabled { opacity: 0.3; cursor: not-allowed; }
.ec-layer-icon { font-size: 12px; }
.ec-layer-name { font-size: 10px; }
.ec-toolbar-sep { width: 1px; height: 20px; background: var(--border, #1e2a42); margin: 0 4px; }
.ec-filter-select {
  padding: 4px 8px; border: 1px solid var(--border, #1e2a42); border-radius: 3px;
  background: var(--bg-2, #0f1628); color: var(--text-1, #b8c0d0);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.ec-finalize-btn {
  padding: 5px 14px; border: 1px solid var(--amber, #ffaa00); border-radius: 4px;
  background: transparent; color: var(--amber, #ffaa00);
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; margin-left: auto;
}
.ec-finalize-btn:hover { background: var(--amber, #ffaa00); color: var(--bg-0, #080c14); }
.ec-lock-btn {
  padding: 5px 12px; border: 1px solid var(--border-1, #243050); border-radius: 4px;
  background: transparent; color: var(--text-2, #7080a0);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  cursor: pointer; transition: all 0.2s;
}
.ec-lock-btn:hover { border-color: var(--text-2, #7080a0); }
.ec-lock-btn.locked { border-color: var(--red, #ff3344); color: var(--red, #ff3344); }

/* Canvas area */
.ec-canvas-area { display: flex; flex-direction: column; min-height: 0; }
.ec-header-bar {
  display: flex; align-items: center; gap: 16px; padding: 8px 14px;
  background: var(--bg-2, #0f1628); border-bottom: 1px solid var(--border, #1e2a42);
  flex-wrap: wrap;
}
.ec-agg-bpa { display: flex; align-items: center; gap: 6px; }
.ec-bpa-bar {
  display: flex; width: 100px; height: 6px; border-radius: 3px;
  overflow: hidden; background: var(--bg-4, #182038);
}
.ec-bpa-bar span { display: block; height: 100%; }
.ec-frag-score { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-2, #7080a0); }
.ec-committed-count, .ec-terminal-status { font-family: 'JetBrains Mono', monospace; }
.ec-canvas {
  position: relative; flex: 1; min-height: 400px;
  background: var(--bg-0, #080c14);
  background-image: radial-gradient(circle at 50% 50%, var(--bg-2, #0f1628) 0%, var(--bg-0, #080c14) 70%);
  overflow: hidden;
}
.ec-empty {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; color: var(--text-3, #4a5670);
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}

/* Bodies */
.ec-body {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s; border: 2px solid transparent;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.ec-body:hover { border-color: rgba(255,255,255,0.3); transform: translate(-50%, -50%) scale(1.05); z-index: 10; }
.ec-body.selected { border-color: var(--blue, #00a8ff); box-shadow: 0 0 30px rgba(0,168,255,0.3); z-index: 20; }
.ec-jupiter-badge {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber, #ffaa00); color: var(--bg-0, #080c14);
  font-size: 11px; line-height: 18px; text-align: center;
}
.ec-body-name {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: rgba(255,255,255,0.9); text-align: center;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.ec-body-bpa {
  font-family: 'JetBrains Mono', monospace; font-size: 8px;
  color: rgba(255,255,255,0.6); margin-top: 2px;
}

/* Dense mode: labels become external floating tooltips below the body */
.ec-canvas.ec-dense .ec-body .ec-body-name {
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  background: rgba(8,12,20,0.92);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  max-width: 140px;
  font-size: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s;
  z-index: 100;
}
.ec-canvas.ec-dense .ec-body .ec-body-bpa {
  position: absolute;
  bottom: -30px; left: 50%;
  transform: translateX(-50%);
  background: rgba(8,12,20,0.92);
  padding: 0 4px;
  border-radius: 2px;
  white-space: nowrap;
  font-size: 7px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s;
  z-index: 100;
}
.ec-canvas.ec-dense .ec-body:hover .ec-body-name,
.ec-canvas.ec-dense .ec-body:hover .ec-body-bpa,
.ec-canvas.ec-dense .ec-body.selected .ec-body-name,
.ec-canvas.ec-dense .ec-body.selected .ec-body-bpa,
.ec-canvas.ec-dense .ec-body.ec-jupiter .ec-body-name {
  opacity: 1;
}
/* Elevate hovered body so tooltip doesn't clip behind siblings */
.ec-canvas.ec-dense .ec-body:hover {
  z-index: 25;
}

/* Overlay elements */
.ec-fence-post {
  position: absolute; width: 8px; height: 24px;
  border: 2px solid; border-radius: 2px; transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0.8;
}
.ec-hazard-badge {
  position: absolute; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 3px; transform: translate(-50%, -50%);
  font-size: 12px; pointer-events: none; z-index: 5;
}
.ec-hazard-badge.hazard-high { background: rgba(255,51,68,0.25); color: #ff3344; }
.ec-hazard-badge.hazard-med { background: rgba(255,170,0,0.2); color: #ffaa00; }
.ec-hazard-badge.hazard-low { background: rgba(85,94,112,0.15); color: #555e70; }
.ec-break-ring {
  position: absolute; border: 2px dashed; border-radius: 50%;
  pointer-events: none; opacity: 0.6;
}
.ec-fragility-halo {
  position: absolute; border-radius: 50%; pointer-events: none;
  opacity: 0.4; filter: blur(8px);
}
.ec-fragility-halo.frag-stable { border: 1px solid #00cc8833; }
.ec-fragility-halo.frag-drifting { border: 1px solid #ffaa0044; animation: ec-drift 3s ease-in-out infinite; }
.ec-fragility-halo.frag-unstable { border: 1px solid #ff334455; animation: ec-pulse 1.5s ease-in-out infinite; }
@keyframes ec-drift { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ec-pulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.08); opacity: 0.6; } }
.ec-ignorance-halo {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #54a0ff22, transparent 70%);
  border: 1px dashed #54a0ff33;
}

/* Timeline */
.ec-timeline {
  padding: 6px 14px; background: var(--bg-1, #0b1120);
  border-top: 1px solid var(--border, #1e2a42);
}
.ec-timeline-track {
  position: relative; height: 32px; background: var(--bg-2, #0f1628);
  border-radius: 3px; overflow: hidden;
}
.ec-timeline-now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--green, #00cc88); z-index: 2;
}
.ec-timeline-marker {
  position: absolute; bottom: 0; width: 3px; border-radius: 1px 1px 0 0;
  z-index: 1;
}
.ec-timeline-months {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--text-3, #4a5670);
}

/* Detail panel */
.ec-detail-panel {
  width: 280px; min-width: 280px; overflow-y: auto;
  background: var(--bg-1, #0b1120); border-left: 1px solid var(--border, #1e2a42);
  padding: 12px;
}
.ec-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text-3, #4a5670);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: center;
}
.ec-detail-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--text-0, #eef0f4); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border, #1e2a42);
}
.ec-detail-section { margin-bottom: 14px; }
.ec-detail-sec-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--text-2, #7080a0); letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 6px;
}
.ec-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.ec-dk { color: var(--text-2, #7080a0); }
.ec-dv { color: var(--text-1, #b8c0d0); }
.ec-detail-text {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-1, #b8c0d0); line-height: 1.5;
}
.ec-detail-phase-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.ec-detail-phase-label {
  width: 24px; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600; text-align: right;
}
.ec-detail-phase-bar {
  flex: 1; height: 4px; background: var(--bg-4, #182038);
  border-radius: 2px; overflow: hidden;
}
.ec-detail-phase-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.ec-detail-phase-val {
  width: 36px; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--text-2, #7080a0); text-align: right;
}
/* Light mode ENGINE */
html.light-mode .ec-toolbar { background: var(--bg-0, #f4f1ec); border-bottom-color: var(--bg-3, #d4cfc5); }
html.light-mode .ec-layer-toggle { border-color: var(--bg-3, #d4cfc5); color: var(--text-2, #6b7280); }
html.light-mode .ec-filter-select { background: var(--bg-1, #ede9e2); color: var(--text-0, #1a1a1a); border-color: var(--bg-3, #d4cfc5); }
html.light-mode .ec-canvas { background: var(--bg-0, #f4f1ec); background-image: radial-gradient(circle at 50% 50%, var(--bg-1, #ede9e2), var(--bg-0, #f4f1ec) 70%); }
html.light-mode .ec-detail-panel { background: var(--bg-0, #f4f1ec); border-left-color: var(--bg-3, #d4cfc5); }
html.light-mode .ec-header-bar { background: var(--bg-1, #ede9e2); border-bottom-color: var(--bg-3, #d4cfc5); }
html.light-mode .ec-timeline { background: var(--bg-0, #f4f1ec); border-top-color: var(--bg-3, #d4cfc5); }

/* ═══════════════════════════════════════════════════════════════════════════════
   ENGINE LIVE — IVr Live Monitoring (el-* classes)
   ═══════════════════════════════════════════════════════════════════════════════ */
.el-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--bg-1, #0b1120);
  border-bottom: 1px solid var(--border, #1e2a42);
}
.el-header-left { display: flex; align-items: center; gap: 12px; }
.el-header-right { display: flex; align-items: center; gap: 6px; }
.el-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--text-0, #eef0f4); letter-spacing: 1px;
}
.el-status {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  padding: 2px 8px; border-radius: 3px;
}
.el-status.active { color: #00cc88; background: rgba(0,204,136,0.1); }
.el-status.paused { color: #ffaa00; background: rgba(255,170,0,0.1); }
.el-alert-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3, #4a5670);
}
.el-ctrl-btn {
  padding: 4px 10px; border: 1px solid var(--border, #1e2a42); border-radius: 3px;
  background: transparent; color: var(--text-2, #7080a0);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  cursor: pointer; transition: all 0.15s;
}
.el-ctrl-btn:hover { background: var(--bg-3, #131b30); color: var(--text-1, #b8c0d0); }
.el-ctrl-btn.active { background: var(--bg-3, #131b30); color: var(--blue, #00a8ff); border-color: var(--blue, #00a8ff); }
.el-filters {
  display: flex; gap: 6px; padding: 6px 14px;
  background: var(--bg-2, #0f1628); border-bottom: 1px solid var(--border, #1e2a42);
}
.el-filter-select {
  padding: 4px 8px; border: 1px solid var(--border, #1e2a42); border-radius: 3px;
  background: var(--bg-1, #0b1120); color: var(--text-1, #b8c0d0);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.el-main { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.el-feed {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.el-feed-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text-3, #4a5670);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.el-alert-row {
  display: flex; gap: 8px; padding: 8px 10px;
  background: var(--bg-2, #0f1628); border-radius: 4px;
  border-left: 3px solid var(--border, #1e2a42);
  transition: background 0.15s;
}
.el-alert-row:hover { background: var(--bg-3, #131b30); }
.el-sev-critical { border-left-color: #ff3344; }
.el-sev-high { border-left-color: #ffaa00; }
.el-sev-med { border-left-color: #54a0ff; }
.el-sev-low { border-left-color: var(--border-1, #243050); }
.el-alert-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.el-alert-body { flex: 1; min-width: 0; }
.el-alert-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--text-0, #eef0f4); margin-bottom: 2px;
}
.el-alert-detail {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-1, #b8c0d0); line-height: 1.4;
}
.el-alert-lens {
  display: inline-block; margin-top: 3px; padding: 1px 6px;
  background: var(--bg-4, #182038); border-radius: 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-2, #7080a0);
}
.el-alert-delta {
  display: inline-block; margin-left: 6px; margin-top: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: var(--amber, #ffaa00);
}
.el-alert-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0;
}
.el-alert-time {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-3, #4a5670);
}
.el-alert-sev {
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: 0.5px;
}

/* Delta panel */
.el-delta-panel {
  width: 260px; min-width: 260px; overflow-y: auto;
  background: var(--bg-1, #0b1120); border-left: 1px solid var(--border, #1e2a42);
  padding: 12px;
}
.el-delta-off {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-3, #4a5670);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.el-delta-header {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--text-0, #eef0f4); letter-spacing: 1px;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border, #1e2a42);
}
.el-delta-section { margin-bottom: 14px; }
.el-delta-sec-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--text-2, #7080a0); letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.el-delta-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.el-delta-arrow { font-size: 12px; flex-shrink: 0; width: 16px; text-align: center; }
.el-delta-lens { color: var(--text-1, #b8c0d0); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-delta-val { color: var(--text-2, #7080a0); flex-shrink: 0; }
.el-delta-empty {
  padding: 20px 0; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3, #4a5670);
}
.el-scope-badge {
  margin-top: 16px; padding: 4px 8px; border: 1px dashed var(--border-1, #243050);
  border-radius: 3px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-3, #4a5670);
}
/* Light mode LIVE */
html.light-mode .el-header { background: var(--bg-0, #f4f1ec); border-bottom-color: var(--bg-3, #d4cfc5); }
html.light-mode .el-filters { background: var(--bg-1, #ede9e2); border-bottom-color: var(--bg-3, #d4cfc5); }
html.light-mode .el-alert-row { background: var(--bg-1, #ede9e2); }
html.light-mode .el-alert-row:hover { background: var(--bg-2, #e5e0d8); }
html.light-mode .el-delta-panel { background: var(--bg-0, #f4f1ec); border-left-color: var(--bg-3, #d4cfc5); }