/* =============================================================================
   ARES — Sovereign Origin Dashboard
   owner.css  —  v2 · Dark/Light theme · Premium executive redesign
   Inter self-hosted from /assets/fonts/inter-var.woff2 — no external requests.
   ============================================================================= */

/* ── Self-hosted Inter (variable font, wght 100–900) ──────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
}

/* ── Design Tokens: Dark Mode (default) ──────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:           #030311;
  --bg2:          #060620;
  --bg3:          #08082c;
  --surface:      #0c0c28;
  --surface2:     #101030;
  --surface3:     #141438;

  /* Header */
  --header-bg:     rgba(3,3,17,0.94);
  --header-border: rgba(255,255,255,0.07);

  /* Panels */
  --panel-bg:      #060620;
  --card-bg:       #0c0c28;
  --input-bg:      #0c0c28;
  --terminal-bg:   #010110;

  /* Terminal text — fixed, always readable on dark terminal */
  --terminal-fg:      #dde0f0;
  --terminal-dim:     rgba(221,224,240,0.60);
  --terminal-muted:   #5a6898;

  /* Borders */
  --border:        rgba(255,255,255,0.055);
  --border-mid:    rgba(255,255,255,0.09);
  --border-hi:     rgba(180,80,255,0.32);
  --border-glow:   rgba(180,80,255,0.14);

  /* Text */
  --text:          #e8e8f8;
  --text-dim:      rgba(232,232,248,0.62);
  --muted:         #5a6898;
  --faint:         rgba(255,255,255,0.14);

  /* Accent */
  --magenta:       #c060f8;
  --purple:        #7040ee;
  --gradient:      linear-gradient(135deg, #c060f8 0%, #7040ee 100%);

  /* Severity */
  --sev-1:         #ff4444;
  --sev-1-bg:      rgba(255,68,68,0.08);
  --sev-1-border:  rgba(255,68,68,0.28);
  --sev-2:         #ff8c00;
  --sev-2-bg:      rgba(255,140,0,0.08);
  --sev-3:         #ecc000;
  --sev-3-bg:      rgba(236,192,0,0.08);
  --sev-4:         #3ec880;
  --sev-4-bg:      rgba(62,200,128,0.08);

  /* Application statuses */
  --st-submitted:    #6878b0;
  --st-review:       #ecc000;
  --st-accepted:     #3ec880;
  --st-deferred:     #ff8c00;
  --st-declined:     #ff4444;
  --st-conversation: #c060f8;
  --st-deposit:      #8060ff;
  --st-onboarded:    #00e8b8;

  /* Shadows */
  --shadow-sm:   0 1px 6px rgba(0,0,0,0.35);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 0 1px rgba(180,80,255,0.06), 0 4px 40px rgba(0,0,0,0.55);

  /* Typography */
  --font-ui:    'Inter', 'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;

  /* Layout */
  --radius:     5px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --gap:        24px;
  --ease:       0.18s ease;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  48px;

  /* Sovereign Strip */
  --sv-height: 48px;
}

/* ── Design Tokens: Light Mode ────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:           #f0f0f8;
  --bg2:          #ffffff;
  --bg3:          #f6f6ff;
  --surface:      #ffffff;
  --surface2:     #f4f4fc;
  --surface3:     #ebebf8;

  --header-bg:     rgba(248,248,255,0.96);
  --header-border: rgba(0,0,0,0.08);

  --panel-bg:      #ffffff;
  --card-bg:       #ffffff;
  --input-bg:      #f6f6ff;
  --terminal-bg:   #010110;  /* terminal stays dark */

  /* Terminal text — same as dark, terminal is always dark */
  --terminal-fg:      #dde0f0;
  --terminal-dim:     rgba(221,224,240,0.60);
  --terminal-muted:   #5a6898;

  --border:        rgba(0,0,0,0.07);
  --border-mid:    rgba(0,0,0,0.11);
  --border-hi:     rgba(152,54,224,0.32);
  --border-glow:   rgba(152,54,224,0.12);

  --text:          #0c0c26;
  --text-dim:      rgba(12,12,38,0.62);
  --muted:         #6868a0;
  --faint:         rgba(0,0,0,0.16);

  --magenta:       #9030d0;
  --purple:        #5828c0;
  --gradient:      linear-gradient(135deg, #9030d0 0%, #5828c0 100%);

  --sev-1:         #cc2020;
  --sev-1-bg:      rgba(204,32,32,0.07);
  --sev-1-border:  rgba(204,32,32,0.22);
  --sev-2:         #c05800;
  --sev-2-bg:      rgba(192,88,0,0.07);
  --sev-3:         #906000;
  --sev-3-bg:      rgba(144,96,0,0.07);
  --sev-4:         #1a8858;
  --sev-4-bg:      rgba(26,136,88,0.07);

  --st-submitted:    #506090;
  --st-review:       #906000;
  --st-accepted:     #1a8858;
  --st-deferred:     #c05800;
  --st-declined:     #cc2020;
  --st-conversation: #9030d0;
  --st-deposit:      #5840c0;
  --st-onboarded:    #009980;

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.11);
  --shadow-glow: 0 0 0 1px rgba(152,54,224,0.08), 0 4px 24px rgba(0,0,0,0.10);
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.64;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.22s ease, color 0.22s ease;
}

a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }

/* ── Header ──────────────────────────────────────────────────────────────────── */
#owner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap);
  height: 56px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.16);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.owner-wordmark {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.wm-diamond {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 3px;
}

.header-rule {
  width: 1px;
  height: 18px;
  background: var(--border-mid);
  flex-shrink: 0;
}

.header-sys-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.header-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.session-email {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── Theme Toggle ────────────────────────────────────────────────────────────── */
.btn-theme {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  border-radius: var(--radius);
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  flex-shrink: 0;
}

.btn-theme:hover {
  border-color: var(--border-hi);
  color: var(--magenta);
  background: rgba(192,96,248,0.07);
}

/* ── End Session ─────────────────────────────────────────────────────────────── */
.btn-logout {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color var(--ease), color var(--ease);
  white-space: nowrap;
}

.btn-logout:hover {
  border-color: var(--sev-1-border);
  color: var(--sev-1);
}

/* ── Secret Pages ────────────────────────────────────────────────────────────── */
.sp-wrap {
  position: relative;
  flex-shrink: 0;
}

.btn-sp {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  cursor: pointer;
}

.btn-sp:hover,
.btn-sp[aria-expanded="true"] {
  border-color: var(--border-hi);
  color: var(--magenta);
  background: rgba(192,96,248,0.06);
}

[data-theme="light"] .btn-sp:hover,
[data-theme="light"] .btn-sp[aria-expanded="true"] {
  background: rgba(144,48,208,0.06);
}

.sp-icon {
  font-size: 11px;
  line-height: 1;
  opacity: 0.75;
}

.btn-sp:hover .sp-icon,
.btn-sp[aria-expanded="true"] .sp-icon {
  opacity: 1;
}

.sp-caret {
  font-size: 9px;
  transition: transform 0.18s ease;
  line-height: 1;
}

.btn-sp[aria-expanded="true"] .sp-caret {
  transform: rotate(180deg);
}

/* ── Dropdown menu ─────────────────────────────────────────────── */
.sp-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  min-width: 256px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-top: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-glow);
  overflow: hidden;
  /* closed state */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.20s ease, transform 0.20s ease;
}

.sp-menu.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.sp-menu-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
}

/* ── Menu items ────────────────────────────────────────────────── */
.sp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  text-decoration: none;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  transition: background var(--ease), color var(--ease);
}

.sp-item:last-child {
  border-bottom: none;
}

.sp-item:hover {
  background: rgba(192,96,248,0.05);
  color: var(--text);
  text-decoration: none;
}

[data-theme="light"] .sp-item:hover {
  background: rgba(144,48,208,0.05);
}

.sp-item-glyph {
  font-size: 13px;
  color: var(--magenta);
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity var(--ease);
}

.sp-item:hover .sp-item-glyph {
  opacity: 1;
}

.sp-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sp-item-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.sp-item-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-item-arrow {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--ease), transform var(--ease), color var(--ease);
}

.sp-item:hover .sp-item-arrow {
  opacity: 1;
  color: var(--magenta);
  transform: translateX(0);
}

/* ── Alert Banner ────────────────────────────────────────────────────────────── */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--gap);
  background: var(--sev-1-bg);
  border-bottom: 1px solid var(--sev-1-border);
}

.alert-banner-sev {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--sev-1);
  padding: 3px 9px;
  border: 1px solid var(--sev-1-border);
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.alert-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  opacity: 0.9;
}

.alert-banner-view {
  background: transparent;
  border: 1px solid var(--sev-1-border);
  color: var(--sev-1);
  border-radius: var(--radius);
  padding: 4px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  flex-shrink: 0;
  transition: background var(--ease);
}

.alert-banner-view:hover { background: rgba(255,68,68,0.12); }

/* ── State Bar ───────────────────────────────────────────────────────────────── */
.state-bar {
  display: flex;
  align-items: stretch;
  padding: 14px var(--gap);
  gap: 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}

.state-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 110px;
  gap: 5px;
  flex: 1;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.state-item:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-sm);
}

.state-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color var(--ease);
}

.state-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.state-item-alert .state-value                { color: var(--sev-2); }
.state-item-alert.has-critical .state-value   {
  color: var(--sev-1);
  animation: pulse-val 1.8s ease-in-out infinite;
}

@keyframes pulse-val {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── State bar session cluster (top-right, operator identity + logout) ─────── */
.state-session-cluster {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.state-session-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.state-session-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.state-session-clock {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* Logout in state-bar — compact variant */
.state-logout-btn {
  padding: 6px 14px;
  font-size: 11px;
}

/* ── ADI Section ─────────────────────────────────────────────────────────────── */
.adi-section {
  margin: 20px var(--gap);
  background: var(--panel-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}

.adi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}

.adi-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.adi-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.adi-label-sep {
  color: var(--border-mid);
  font-size: 12px;
}

.adi-version {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.06em;
}

.adi-status {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sev-4);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.adi-status::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: dot-ready-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-ready-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

.adi-status.busy {
  color: var(--sev-3);
  animation: status-blink 1s ease-in-out infinite;
}

.adi-status.error { color: var(--sev-1); }

@keyframes status-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── ADI Output ──────────────────────────────────────────────────────────────── */
.adi-output {
  padding: 20px 20px 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.90;
  min-height: 260px;
  max-height: 520px;
  overflow-y: auto;
  background: var(--terminal-bg);
  color: var(--terminal-fg);
  /* ADI keeps a dark terminal in both themes, so nested response surfaces
     must use terminal-safe tokens instead of page-surface tokens. */
  --adi-surface-1:   rgba(12,12,40,0.72);
  --adi-surface-2:   rgba(18,18,54,0.82);
  --adi-surface-3:   rgba(26,26,70,0.88);
  --adi-line:        rgba(221,224,240,0.10);
  --adi-line-strong: rgba(221,224,240,0.16);
}

.adi-boot-msg {
  color: var(--terminal-muted);
  opacity: 0.70;
  margin-bottom: 12px;
  line-height: 1.95;
}

.adi-boot-msg kbd {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  padding: 1px 7px;
  color: #c060f8;
  font-family: inherit;
  font-size: 13px;
}

/* ADI output line types */
.adi-entry-cmd {
  color: #c060f8;
  margin-bottom: 4px;
  margin-top: 14px;
  font-weight: 600;
}

.adi-entry-cmd:first-child { margin-top: 0; }
.adi-entry-cmd::before { content: '›  '; opacity: 0.42; }

.adi-result-line {
  color: var(--terminal-dim);
  margin-bottom: 1px;
}

.adi-result-line.muted   { color: var(--terminal-muted); }
.adi-result-line.success { color: #3ec880; }
.adi-result-line.warning { color: #ecc000; }
.adi-result-line.danger  { color: #ff4444; }
.adi-result-line.label {
  color: var(--terminal-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 4px;
  opacity: 0.72;
}

.adi-trace {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.adi-trace-line {
  font-size: 12px;
  color: var(--terminal-muted);
  opacity: 0.44;
}

/* Inline application rows in ADI output */
.adi-app-row {
  display: grid;
  grid-template-columns: 24px 1fr 1fr 96px auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.adi-app-row:last-child { border-bottom: none; }
.adi-row-idx   { color: rgba(255,255,255,0.14); font-size: 12px; }
.adi-row-name  { color: #e8e8f8; font-weight: 600; }
.adi-row-email { color: #5a6898; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adi-row-date  { color: #5a6898; font-size: 12px; }
.adi-row-actions { display: flex; gap: 6px; }

.adi-row-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #5a6898;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  font-family: var(--font-mono);
  transition: border-color var(--ease), color var(--ease);
}

.adi-row-btn:hover        { border-color: #c060f8; color: #c060f8; }
.adi-row-btn.danger:hover { border-color: #ff4444; color: #ff4444; }

/* ADI confirmation block */
.adi-confirm-block {
  background: rgba(255,140,0,0.05);
  border: 1px solid rgba(255,140,0,0.22);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 12px 0;
}

.adi-confirm-header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8c00;
  margin-bottom: 10px;
}

.adi-confirm-block .consequence {
  color: #5a6898;
  font-size: 13px;
  margin-bottom: 3px;
}

.adi-confirm-block .consequence::before { content: '— '; opacity: 0.5; }

.adi-confirm-actions { display: flex; gap: 10px; margin-top: 16px; }

.adi-confirm-btn {
  background: var(--gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 7px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity var(--ease), transform 0.10s;
}

.adi-confirm-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.adi-abort-btn {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 7px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: border-color var(--ease), color var(--ease);
}

.adi-abort-btn:hover { border-color: var(--sev-1-border); color: var(--sev-1); }

/* ── ADI Input Row ───────────────────────────────────────────────────────────── */
.adi-input-row {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border-mid);
  background: var(--bg3);
  gap: 12px;
  transition: border-top-color var(--ease), background var(--ease);
}

.adi-input-row:focus-within {
  border-top-color: var(--border-hi);
  background: rgba(180,80,255,0.025);
}

[data-theme="light"] .adi-input-row:focus-within {
  background: rgba(152,54,224,0.03);
}

.adi-prompt {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--magenta);
  user-select: none;
  flex-shrink: 0;
  opacity: 0.72;
  line-height: 1;
}

.adi-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  caret-color: var(--magenta);
  min-width: 0;
  line-height: 1.5;
}

.adi-input::placeholder {
  color: var(--muted);
  opacity: 0.30;
}

.adi-submit-btn {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--magenta);
  border-radius: var(--radius);
  padding: 5px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background var(--ease), border-color var(--ease), transform 0.10s;
}

.adi-submit-btn:hover {
  background: rgba(192,96,248,0.10);
  border-color: var(--magenta);
}

.adi-submit-btn:active {
  background: rgba(192,96,248,0.18);
  transform: scale(0.97);
}

/* ── Tab Navigation ──────────────────────────────────────────────────────────── */
.owner-tabs {
  display: flex;
  padding: 0 var(--gap);
  border-bottom: 1px solid var(--border);
  gap: 0;
  flex-shrink: 0;
}

.owner-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
  position: relative;
  top: 1px;
  white-space: nowrap;
}

.owner-tab:hover {
  color: var(--text-dim);
  background: rgba(255,255,255,0.02);
}

[data-theme="light"] .owner-tab:hover {
  background: rgba(0,0,0,0.02);
}

.owner-tab.active {
  color: var(--text);
  border-bottom-color: var(--magenta);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sev-1);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 7px;
  vertical-align: middle;
}

/* ── Tab Content ─────────────────────────────────────────────────────────────── */
.tab-content {
  padding: 22px var(--gap) 48px;
}

.tab-pane          { display: none; }
.tab-pane.active   { display: block; }

.pane-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pane-search {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 7px 14px;
  outline: none;
  flex: 1;
  max-width: 400px;
  transition: border-color var(--ease);
}

.pane-search:focus        { border-color: var(--border-hi); }
.pane-search::placeholder { color: var(--muted); opacity: 0.40; }

/* ── Filter Buttons ──────────────────────────────────────────────────────────── */
.filter-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 5px 14px;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: all var(--ease);
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--border-mid);
  color: var(--text-dim);
  background: var(--surface3);
}

.filter-btn.active {
  background: rgba(192,96,248,0.10);
  border-color: var(--border-hi);
  color: var(--magenta);
}

[data-theme="light"] .filter-btn.active {
  background: rgba(144,48,208,0.08);
}

/* Severity-tinted filter buttons */
.sev-filter-1.active { background: var(--sev-1-bg); border-color: var(--sev-1-border); color: var(--sev-1); }
.sev-filter-2.active { background: var(--sev-2-bg); border-color: rgba(255,140,0,0.28); color: var(--sev-2); }
.sev-filter-3.active { background: var(--sev-3-bg); border-color: rgba(236,192,0,0.24); color: var(--sev-3); }
.sev-filter-4.active { background: var(--sev-4-bg); border-color: rgba(62,200,128,0.24); color: var(--sev-4); }

/* ── Data Table ──────────────────────────────────────────────────────────────── */
.data-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel-bg);
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: var(--font-mono);
}

.data-table th {
  text-align: left;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border-mid);
  white-space: nowrap;
  background: var(--bg3);
}

.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.data-table tr:last-child td  { border-bottom: none; }

.data-table tr:hover td {
  background: rgba(255,255,255,0.025);
}

[data-theme="light"] .data-table tr:hover td {
  background: rgba(0,0,0,0.025);
}

.data-table td.muted { color: var(--muted); }
.data-table td.mono  { font-family: var(--font-mono); font-size: 13px; }

/* ── Status Badges ───────────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.status-submitted               { background: rgba(104,120,176,0.12); color: var(--st-submitted); }
.status-under_review            { background: rgba(236,192,0,0.10);   color: var(--st-review); }
.status-accepted                { background: rgba(62,200,128,0.10);  color: var(--st-accepted); }
.status-deferred                { background: rgba(255,140,0,0.10);   color: var(--st-deferred); }
.status-declined                { background: rgba(255,68,68,0.10);   color: var(--st-declined); }
.status-invited_to_conversation { background: rgba(192,96,248,0.10);  color: var(--st-conversation); }
.status-deposit_pending         { background: rgba(128,96,255,0.12);  color: var(--st-deposit); }
.status-onboarded               { background: rgba(0,232,184,0.08);   color: var(--st-onboarded); }

/* ── Severity Badges ─────────────────────────────────────────────────────────── */
.sev-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.sev-1 { background: var(--sev-1-bg); color: var(--sev-1); border: 1px solid var(--sev-1-border); }
.sev-2 { background: var(--sev-2-bg); color: var(--sev-2); border: 1px solid rgba(255,140,0,0.24); }
.sev-3 { background: var(--sev-3-bg); color: var(--sev-3); border: 1px solid rgba(236,192,0,0.20); }
.sev-4 { background: var(--sev-4-bg); color: var(--sev-4); border: 1px solid rgba(62,200,128,0.20); }

/* ── Table Action Buttons ────────────────────────────────────────────────────── */
.tbl-btn {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  border-radius: 4px;
  padding: 4px 11px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  transition: all var(--ease);
  white-space: nowrap;
}

.tbl-btn:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  background: rgba(192,96,248,0.06);
}

.tbl-btn.tbl-btn-danger       { border-color: rgba(255,68,68,0.14);  color: rgba(255,68,68,0.55); }
.tbl-btn.tbl-btn-danger:hover { border-color: var(--sev-1); color: var(--sev-1); background: var(--sev-1-bg); }

.tbl-actions { display: flex; gap: 6px; align-items: center; }

/* ── Empty / Loading / Error States ─────────────────────────────────────────── */
.data-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.75;
}

.data-error {
  padding: 32px 24px;
  text-align: center;
  color: var(--sev-1);
  font-family: var(--font-mono);
  font-size: 14px;
  opacity: 0.80;
}

/* ── Secondary Button ────────────────────────────────────────────────────────── */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 6px 16px;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: all var(--ease);
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: var(--border-hi);
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
}

[data-theme="light"] .btn-secondary:hover {
  background: rgba(0,0,0,0.03);
}

/* ── Login Page ──────────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 55% 45% at 50% 38%, rgba(192,80,255,0.10) 0%, transparent 66%),
    var(--bg);
}

.login-box {
  width: 100%;
  max-width: 380px;
  padding: 0 24px;
}

.login-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
  position: relative;
}

/* Radial bloom halo behind the diamond */
.login-mark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  width: 240px;
  height: 240px;
  background: radial-gradient(
    circle,
    rgba(192, 72, 255, 0.13) 0%,
    rgba(140, 48, 240, 0.05) 48%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.login-mark-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 10px rgba(192,80,255,0.62))
    drop-shadow(0 0 30px rgba(140,50,240,0.28));
  animation: loginDiamondPulse 4s ease-in-out infinite;
}

.login-mark-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

@keyframes loginDiamondPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(192,80,255,0.58))
      drop-shadow(0 0 30px rgba(140,50,240,0.26));
  }
  50% {
    filter:
      drop-shadow(0 0 18px rgba(210,88,255,0.78))
      drop-shadow(0 0 52px rgba(160,58,242,0.36));
  }
}

.login-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
}

.login-field { display: flex; flex-direction: column; gap: 8px; }

.login-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-input {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.login-input:focus {
  border-color: var(--border-hi);
  box-shadow: 0 0 0 3px rgba(180,80,255,0.08);
}

.login-input::placeholder { color: var(--muted); opacity: 0.28; }

.login-btn {
  width: 100%;
  background: var(--gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 13px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity var(--ease), transform 0.12s;
}

.login-btn:hover    { opacity: 0.88; transform: translateY(-1px); }
.login-btn:disabled { opacity: 0.35; transform: none; cursor: not-allowed; }

.login-error {
  background: var(--sev-1-bg);
  border: 1px solid var(--sev-1-border);
  border-radius: var(--radius);
  color: var(--sev-1);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 16px;
  margin-top: 14px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(192,96,248,0.35); }

/* ── Loading Pulse ───────────────────────────────────────────────────────────── */
.loading-pulse {
  display: inline-block;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.22; }
  50%       { opacity: 0.90; }
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .header-sys-label,
  .header-rule  { display: none; }
  .state-bar    { padding: 10px 16px; gap: 8px; }
  .state-item   { min-width: 88px; padding: 12px 14px; }
  .state-value  { font-size: 22px; }
  .adi-section  { margin: 12px 16px; }
  .tab-content  { padding: 16px 16px 40px; }
  .owner-tabs   { padding: 0 16px; }
}

@media (max-width: 600px) {
  #owner-header  { padding: 0 16px; height: 52px; }
  .header-clock, .state-session-clock  { display: none; }
  .session-email, .state-session-email { display: none; }
  .state-session-cluster               { display: none; }
  .adi-output    { min-height: 200px; max-height: 380px; }
}

/* =============================================================================
   Phase 1 Shell Layout — Left-rail SPA
   ============================================================================= */

/* ── Shell ───────────────────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-rows: var(--sv-height) 1fr;
  grid-template-columns: 220px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* Sovereign Strip spans both columns */
.sovereign-strip {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Sidebar + main-col occupy row 2 */
/* (column assignments set below in their respective rules) */

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ── Sidebar Brand ───────────────────────────────────────────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-brand-mark {
  font-size: 14px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  flex-shrink: 0;
}

.sidebar-brand-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.sidebar-brand-sub {
  color: var(--muted);
  font-weight: 500;
}

/* ── Sidebar Nav ─────────────────────────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-group {
  margin-bottom: 4px;
}

.sidebar-group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 16px 4px;
  opacity: 0.65;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 450;
  letter-spacing: 0.01em;
  border-left: 2px solid transparent;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
  position: relative;
}

.sidebar-link:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
}

[data-theme="light"] .sidebar-link:hover {
  background: rgba(0,0,0,0.04);
}

.sidebar-link.active {
  color: var(--magenta);
  border-left-color: var(--magenta);
  background: rgba(192,96,248,0.06);
}

[data-theme="light"] .sidebar-link.active {
  background: rgba(144,48,208,0.06);
}

.sidebar-link-icon {
  font-size: 11px;
  opacity: 0.55;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  line-height: 1;
}

.sidebar-link.active .sidebar-link-icon {
  opacity: 1;
  color: var(--magenta);
}

.sidebar-link-label {
  flex: 1;
}

.sidebar-link-ext {
  font-size: 11px;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--ease);
}

.sidebar-link:hover .sidebar-link-ext {
  opacity: 0.7;
}

.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--sev-1);
  color: #fff;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Sidebar Bottom — theme toggle only (session cluster lives in state-bar) ── */
.sidebar-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ── Sidebar foot — structural shell control at the bottom ───────────────────── */
.sidebar-foot {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 9px 14px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}

.sidebar-collapse-btn:hover {
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
}

[data-theme="light"] .sidebar-collapse-btn:hover {
  background: rgba(0,0,0,0.03);
}

/* ── Sidebar Collapsed state ─────────────────────────────────────────────────── */
.shell.sidebar-collapsed {
  grid-template-columns: 48px 1fr;
}

.shell.sidebar-collapsed .sidebar {
  width: 48px;
}

.shell.sidebar-collapsed .sidebar-brand-text,
.shell.sidebar-collapsed .sidebar-group-label,
.shell.sidebar-collapsed .sidebar-link-label,
.shell.sidebar-collapsed .sidebar-link-ext,
.shell.sidebar-collapsed .sidebar-badge,
.shell.sidebar-collapsed .sidebar-group-chevron {
  display: none;
}

.shell.sidebar-collapsed .sidebar-brand {
  padding: 14px 0;
  justify-content: center;
}

.shell.sidebar-collapsed .sidebar-link {
  padding: 10px 0;
  justify-content: center;
  gap: 0;
}

.shell.sidebar-collapsed .sidebar-link-icon {
  width: auto;
  font-size: 13px;
  opacity: 0.65;
}

.shell.sidebar-collapsed .sidebar-link.active .sidebar-link-icon {
  opacity: 1;
}

.shell.sidebar-collapsed .sidebar-foot {
  border-top-color: var(--border);
}

.shell.sidebar-collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 9px 0;
}

/* ADI overlay left offset tracks collapsed sidebar */
.shell.sidebar-collapsed .main-col:not(.console-mode) .adi-section {
  left: 48px;
}

/* ── Main Column ─────────────────────────────────────────────────────────────── */
.main-col {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* ── Owner Content (page area) ───────────────────────────────────────────────── */
.owner-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap);
  min-height: 0;
}

/* ── ADI overlay (non-console pages) ─────────────────────────────────────────── */
/* Fixed to bottom of viewport. Left offset tracks sidebar width so the overlay
   never covers the sidebar chrome. Transitions apply to shadow + border so the
   collapsed → expanded lift feels intentional rather than abrupt. */
.main-col:not(.console-mode) .adi-section {
  position: fixed;
  bottom: 0;
  left: 220px;
  right: 0;
  z-index: 50;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid var(--border-mid);
  box-shadow: 0 -3px 18px rgba(0,0,0,0.30);
  transition: box-shadow 0.22s ease, border-top-color 0.18s ease;
}

/* Expanded state: deeper shadow lift + faint magenta accent on the seam */
.main-col:not(.console-mode) .adi-section:not(.adi-collapsed) {
  border-top-color: rgba(180,80,255,0.38);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.46), 0 -1px 0 rgba(180,80,255,0.14);
}

/* Left offset breakpoints — track sidebar widths */
@media (max-width: 960px) {
  .main-col:not(.console-mode) .adi-section { left: 180px; }
}
@media (max-width: 720px) {
  .main-col:not(.console-mode) .adi-section { left: 0; }
}

/* Expanded output area — slightly taller than the old drawer default */
.main-col:not(.console-mode) .adi-output {
  min-height: 200px;
  max-height: 340px;
}

/* ── Collapsed state: header visible, output hidden, input-row visible ─────────
   The header provides identity (ARES Direct Interface · ADI v1.0) and controls
   (Clear · − · READY). The input-row remains as the command entry point.
   Only the output (terminal content) is hidden when collapsed. */
.main-col:not(.console-mode) .adi-section.adi-collapsed .adi-output { display: none; }
.main-col:not(.console-mode) .adi-section.adi-collapsed .adi-input-row {
  display: flex;
  border-top: none;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Collapsed bar — accent seam on keyboard focus */
.main-col:not(.console-mode) .adi-section.adi-collapsed:focus-within {
  border-top-color: rgba(128,64,192,0.65);
  box-shadow: 0 -2px 22px rgba(128,64,192,0.12), 0 -6px 32px rgba(0,0,0,0.22);
}

/* Pad page content so it isn't clipped under the collapsed bar.
   Collapsed height = header (~41px) + input-row (~44px) + seam (1px) ≈ 86px. */
.main-col:not(.console-mode) .owner-content {
  padding-bottom: 96px;
}

/* ── Responsive: tablet (≤960px) — no structural changes needed at this width */

/* ── Responsive: mobile (≤720px) — safe-area insets + tighter output cap */
@media (max-width: 720px) {
  /* Safe-area-inset for notched / home-bar devices */
  .main-col:not(.console-mode) .adi-section.adi-collapsed .adi-input-row {
    padding-bottom: max(11px, calc(6px + env(safe-area-inset-bottom, 0px)));
  }
  .main-col:not(.console-mode) .adi-section:not(.adi-collapsed) .adi-input-row {
    padding-bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px)));
  }
  /* Keep expanded output at a mobile-appropriate height */
  .main-col:not(.console-mode) .adi-output {
    min-height: 160px;
    max-height: 240px;
  }
  /* Content padding accounts for safe-area too (86px base + inset) */
  .main-col:not(.console-mode) .owner-content {
    padding-bottom: max(96px, calc(82px + env(safe-area-inset-bottom, 0px)));
  }
}

/* ── Page Header ─────────────────────────────────────────────────────────────── */
.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
}

.page-subtitle {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 4px;
}

/* ── Overview Operational Layout ──────────────────────────────────────────────── */
.ov-main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ov-lower-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.ov-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ov-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ov-panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ov-panel-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 0;
  transition: color var(--ease);
}

.ov-panel-link:hover { color: var(--text); }

.ov-funnel-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

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

.ov-meta-sep { color: var(--border-mid); font-size: 12px; }

.ov-qa-panel {
  margin-bottom: 16px;
}

.ov-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ov-action-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.ov-action-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.ov-action-icon {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}

.ov-action-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.ov-action-count {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  display: block;
}

.ov-action-hint {
  font-size: 10px;
  color: var(--faint);
  display: block;
}

.ov-action-card-alert .ov-action-count { color: var(--sev-2); }
.ov-action-card-alert:hover            { border-color: var(--sev-2); }

.ov-alert-clear {
  font-size: 13px;
  color: var(--sev-4);
  font-family: var(--font-mono);
  padding: 4px 0;
}

.ov-sev-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.ov-sev-row:last-child { border-bottom: none; }

.ov-sev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ov-sev-1 { background: var(--sev-1); }
.ov-sev-2 { background: var(--sev-2); }
.ov-sev-3 { background: var(--sev-3); }
.ov-sev-4 { background: var(--sev-4); }

.ov-sev-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary, var(--muted));
}

.ov-sev-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ov-activity-entry {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.ov-activity-entry:last-child { border-bottom: none; }

.ov-activity-action {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-activity-result {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ov-activity-result.success { color: var(--sev-4); }
.ov-activity-result.danger  { color: var(--sev-1); }
.ov-activity-result.muted   { color: var(--muted); }

.ov-activity-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}

/* XP Tracker panel */
.ov-xp-panel {
  margin-bottom: 20px;
}

.ov-xp-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ov-xp-total-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ov-xp-total-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.ov-xp-list {
  display: flex;
  flex-direction: column;
}

.ov-xp-entry {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.ov-xp-entry:last-child { border-bottom: none; }

.ov-xp-event {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-xp-amount {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.xp-positive { color: var(--sev-4); }
.xp-zero     { color: var(--muted); }

.ov-xp-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}

/* ── Full Ledger History ────────────────────────────────────────────────── */

.ov-xp-history {
  border-top:  1px solid var(--border);
  padding-top: 14px;
  margin-top:  4px;
  display:     flex;
  flex-direction: column;
  gap:         10px;
}

.ov-hist-toolbar {
  display:    flex;
  gap:        6px;
  flex-wrap:  wrap;
  align-items: center;
}

.ov-hist-select,
.ov-hist-date {
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-size:     0.75rem;
  padding:       4px 8px;
  min-width:     0;
}

.ov-hist-date { width: 130px; }

.ov-hist-btn {
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text-dim);
  font-size:     0.75rem;
  padding:       4px 10px;
  cursor:        pointer;
  white-space:   nowrap;
}
.ov-hist-btn:hover { border-color: var(--border-mid); color: var(--text); }

/* Summary strip */
.ov-hist-summary {
  display:    flex;
  gap:        8px;
  align-items: center;
  font-size:  0.76rem;
  padding:    6px 0;
  border-bottom: 1px solid var(--border);
}
.ov-hist-sum-stat { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ov-hist-sum-sep  { color: var(--border-mid); }
.ov-hist-sum-xp   { color: var(--accent); font-weight: 600; }

/* Table */
.ov-hist-thead,
.ov-hist-row {
  display:               grid;
  grid-template-columns: 100px 1fr 56px 62px 70px 80px;
  gap:                   6px;
  align-items:           center;
  font-size:             0.74rem;
  padding:               5px 0;
  border-bottom:         1px solid var(--border);
}

.ov-hist-thead {
  color:       var(--text-muted);
  font-weight: 600;
  font-size:   0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ov-hist-row:last-child { border-bottom: none; }
.ov-hist-row-zero       { opacity: 0.55; }

.ov-hist-cell-ts    { color: var(--text-muted); font-family: var(--mono); font-size: 0.7rem; }
.ov-hist-cell-ev    { color: var(--text); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov-hist-cell-detail { display: flex; flex-direction: row; align-items: center; gap: 5px; min-width: 0; overflow: hidden; flex-wrap: wrap; }
.ov-hist-detail-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.07em; padding: 1px 5px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.ov-hist-detail-badge--warn    { background: rgba(255,140,0,0.10);   color: var(--sev-2);   border: 1px solid rgba(255,140,0,0.28); }
.ov-hist-detail-badge--dim     { background: rgba(90,104,152,0.10);  color: var(--muted);   border: 1px solid rgba(90,104,152,0.22); }
.ov-hist-detail-badge--partial { background: rgba(255,140,0,0.08);   color: var(--sev-3);   border: 1px solid rgba(255,140,0,0.20); }
.ov-hist-detail-badge--unavail { background: rgba(90,104,152,0.08);  color: var(--muted);   border: 1px solid rgba(90,104,152,0.18); }
.ov-hist-detail-badge--nolink  { background: rgba(220,60,60,0.07);   color: var(--sev-1);   border: 1px solid rgba(220,60,60,0.22); }
.ov-hist-detail-sep { color: var(--muted); font-size: 10px; opacity: 0.4; flex-shrink: 0; user-select: none; }
.ov-hist-detail-title { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; }
.ov-hist-detail-title--missing { color: var(--muted); font-style: italic; }

/* Recover button — RECOVERABLE rows in the XP ledger detail cell.
   Visually belongs to the RECOVERABLE badge family (dim/muted palette)
   with a hover transition to prog-accent to signal primary actionability. */
.ov-hist-recover-btn {
  background:    rgba(90,104,152,0.10);
  border:        1px solid rgba(90,104,152,0.28);
  border-radius: 2px;
  color:         var(--muted);
  font-family:   var(--font-mono);
  font-size:     9px;
  font-weight:   700;
  letter-spacing: 0.05em;
  padding:       1px 5px;
  cursor:        pointer;
  flex-shrink:   0;
  white-space:   nowrap;
  transition:    background var(--ease), border-color var(--ease), color var(--ease);
}
.ov-hist-recover-btn:hover:not(:disabled) {
  background:    var(--prog-accent-dim);
  border-color:  var(--prog-border);
  color:         var(--prog-accent);
}
.ov-hist-recover-btn:disabled { opacity: 0.40; cursor: not-allowed; }
.ov-hist-recover-btn--done {
  background: rgba(80,180,110,0.10);
  border-color: rgba(80,180,110,0.32);
  color: #5cb87a;
}
.ov-hist-recover-btn--partial {
  background: rgba(255,140,0,0.08);
  border-color: rgba(255,140,0,0.25);
  color: var(--sev-3);
}
.ov-hist-recover-btn--err {
  background: rgba(220,60,60,0.07);
  border-color: rgba(220,60,60,0.25);
  color: var(--sev-1);
}

/* Edit classification button — operator confirmed rows in the XP ledger.
   Secondary ghost action — recedes behind the badge, becomes clear on hover. */
.ov-hist-edit-cls-btn {
  background:    none;
  border:        1px solid rgba(90,104,152,0.18);
  border-radius: 2px;
  color:         var(--muted);
  font-family:   var(--font-mono);
  font-size:     9px;
  font-weight:   600;
  letter-spacing: 0.04em;
  padding:       1px 5px;
  cursor:        pointer;
  flex-shrink:   0;
  white-space:   nowrap;
  opacity:       0.60;
  transition:    opacity var(--ease), border-color var(--ease), color var(--ease);
}
.ov-hist-edit-cls-btn:hover {
  border-color: var(--border-mid);
  color:        var(--text-dim);
  opacity:      1;
}

/* Action column — rightmost cell, right-aligned, flex container */
.ov-hist-cell-action {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  min-width:       0;
}

/* Action button family — Edit / Confirm? / + Classify — in the Action column */
.ov-hist-action-btn {
  background:     none;
  border:         1px solid rgba(90,104,152,0.18);
  border-radius:  2px;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 0.04em;
  padding:        1px 5px;
  cursor:         pointer;
  white-space:    nowrap;
  opacity:        0.60;
  transition:     opacity var(--ease), border-color var(--ease), color var(--ease), background var(--ease);
}
.ov-hist-action-btn:hover {
  border-color: var(--border-mid);
  color:        var(--text-dim);
  opacity:      1;
}
/* Classify — primary accent (action needed) */
.ov-hist-action-btn--classify {
  background:    var(--prog-accent-dim);
  border-color:  var(--prog-border);
  color:         var(--prog-accent);
  opacity:       1;
  font-weight:   700;
}
.ov-hist-action-btn--classify:hover {
  background:   var(--prog-accent);
  border-color: var(--prog-accent);
  color:        #fff;
}
/* Confirm? — amber (pending operator decision) */
.ov-hist-action-btn--confirm {
  background:   rgba(255,140,0,0.08);
  border-color: rgba(255,140,0,0.28);
  color:        var(--sev-3);
  opacity:      1;
}
.ov-hist-action-btn--confirm:hover {
  background:   rgba(255,140,0,0.16);
  border-color: rgba(255,140,0,0.50);
}

/* Inferred classification badge (dim italic — awaiting operator confirm) */
.cls-badge--inferred {
  font-style:  italic;
  opacity:     0.55;
  background:  rgba(90,104,152,0.07);
  border:      1px solid rgba(90,104,152,0.16);
  border-radius: 3px;
  padding:     1px 6px;
  font-size:   0.68rem;
  white-space: nowrap;
}

.ov-hist-cell-xp    { font-family: var(--mono); font-weight: 600; text-align: right; }
.ov-hist-cell-decay { color: var(--text-muted); font-family: var(--mono); font-size: 0.7rem; }
.ov-hist-cell-src   { font-size: 0.68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-hist-cell-deploy { font-family: var(--mono); font-size: 0.68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-hist-row--orphan   { opacity: 0.50; }
.ov-hist-row--low-conf { opacity: 0.70; }

/* Confidence-graded XP cell values — stored value unchanged, display reflects trust level */
.xp-conf-medium { opacity: 0.72; }
.xp-conf-low    { color: var(--sev-3); font-weight: 500; opacity: 0.80; }
.xp-conf-none   { color: var(--muted); font-weight: 400; opacity: 0.55; }

.ov-hist-src-backfill { color: var(--sev-3); }
.ov-hist-src-live     { color: var(--sev-4); }
.ov-hist-src-system   { color: var(--text-muted); }

/* Pagination */
.ov-hist-pager {
  display:     flex;
  gap:         8px;
  align-items: center;
  padding-top: 6px;
}
.ov-hist-page-info {
  font-size:  0.74rem;
  color:      var(--text-muted);
  flex:       1;
}
.ov-hist-page-btn {
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text-dim);
  font-size:     0.75rem;
  padding:       4px 12px;
  cursor:        pointer;
}
.ov-hist-page-btn:hover:not(:disabled) { border-color: var(--border-mid); color: var(--text); }
.ov-hist-page-btn:disabled             { opacity: 0.35; cursor: not-allowed; }

/* Alert History entries */
.ov-alert-hist-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.ov-alert-hist-entry:last-child { border-bottom: none; }

.ov-hist-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ov-hist-active   { color: var(--sev-1); border: 1px solid var(--sev-1); }
.ov-hist-resolved { color: var(--sev-4); border: 1px solid var(--sev-4); }
.ov-hist-acked    { color: var(--sev-3); border: 1px solid var(--sev-3); }

.ov-hist-desc {
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-hist-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}

/* ── Overview responsive ─────────────────────────────────────────────────────── */

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

@media (max-width: 720px) {
  /* Panels: tighter padding on mobile */
  .ov-panel        { padding: 14px 16px; gap: 10px; }
  .ov-xp-panel     { margin-bottom: 14px; }
  .ov-lower-grid   { gap: 12px; margin-bottom: 14px; }
  .ov-qa-panel     { margin-bottom: 12px; }

  /* Quick Access: 2x2 on tablet/mobile */
  .ov-action-grid  { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Action cards: tighter padding */
  .ov-action-card  { padding: 12px 10px; }
  .ov-action-count { font-size: 18px; }

  /* XP tracker: hide timestamp on narrow viewports */
  .ov-xp-time      { display: none; }
  .ov-xp-entry     { grid-template-columns: 1fr auto; }

  /* Alert history: stack desc + time vertically */
  .ov-alert-hist-entry {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .ov-hist-time {
    grid-column: 2;
    margin-top: 1px;
  }

  /* XP total: smaller on mobile */
  .ov-xp-total-value { font-size: 16px; }
}

@media (max-width: 480px) {
  .ov-panel        { padding: 12px 14px; }
  .ov-action-card  { padding: 10px 8px; }
  .ov-action-count { font-size: 16px; }
  .ov-action-icon  { font-size: 11px; }
}

/* ── Overview Grid ───────────────────────────────────────────────────────────── */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.overview-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.overview-card:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-sm);
}

.overview-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.overview-card-value {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.overview-card-sub {
  font-size: 12px;
  color: var(--muted);
}

.overview-card-action {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-align: left;
  align-self: flex-start;
  transition: border-color var(--ease), color var(--ease);
  white-space: nowrap;
}

.overview-card-action:hover {
  border-color: var(--magenta);
  color: var(--magenta);
}

/* ── Placeholder Pane ────────────────────────────────────────────────────────── */
.placeholder-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 32px;
  gap: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  max-width: 520px;
}

.placeholder-icon {
  font-size: 28px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.6;
}

.placeholder-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.placeholder-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

.placeholder-body kbd {
  background: rgba(192,96,248,0.10);
  border: 1px solid rgba(192,96,248,0.22);
  border-radius: 3px;
  padding: 1px 7px;
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Shell Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .shell             { grid-template-columns: 180px 1fr; }
  .sidebar           { width: 180px; }
  .state-bar         { padding: 10px 16px; gap: 8px; }
  .state-item        { min-width: 80px; padding: 10px 12px; }
  .state-value       { font-size: 22px; }
  .owner-content     { padding: 16px; }
  /* Progression values: step down slightly at tablet width */
  .sv-stat-value     { font-size: 14px; }
  /* Session cluster: hide email, keep controls */
  .sv-session-email  { display: none; }
}

@media (max-width: 720px) {
  .shell             { grid-template-columns: 1fr; grid-template-rows: var(--sv-height) 1fr; }
  .sovereign-strip   { grid-column: 1; padding: 0 14px; }
  .sidebar           { display: none; }
  .main-col          { grid-column: 1; }
  .main-col .adi-output { max-height: 220px; }
  .overview-grid      { grid-template-columns: repeat(2, 1fr); }
  /* On mobile, hide the larger stat columns; show only LVL + TIER */
  [data-sv-hide-mobile] { display: none; }
  /* Progression values: compact at mobile */
  .sv-stat-value     { font-size: 13px; }
  /* Session cluster: icon-only — hide "End Session" text label */
  .sv-session-email  { display: none; }
  .sv-btn-logout     { font-size: 0; padding: 4px 7px; }
  .sv-btn-logout::after { content: '×'; font-size: 13px; }
}

/* =============================================================================
   Phase 2 — Master-detail · Token generate · Pipeline funnel
   ============================================================================= */

/* ── Master-detail layout ────────────────────────────────────────────────────── */
.master-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-height: 0;
}

.master-detail-layout.has-detail {
  grid-template-columns: 1fr 360px;
  align-items: start;
}

.master-pane {
  min-width: 0;
  overflow-x: auto;
}

/* ── Detail panel ────────────────────────────────────────────────────────────── */
.detail-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 280px);  /* stays within viewport with state bar + ADI */
}

/* Hide empty panel without affecting layout when has-detail is set */
.detail-panel:empty {
  border: none;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.detail-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Severity-coloured alert detail titles */
.detail-title.sev-1 { color: var(--sev-1); }
.detail-title.sev-2 { color: var(--sev-2); }
.detail-title.sev-3 { color: var(--sev-3); }
.detail-title.sev-4 { color: var(--sev-4); }

.detail-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 7px;
  border-radius: var(--radius);
  flex-shrink: 0;
  transition: color var(--ease), background var(--ease);
  line-height: 1;
}

.detail-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

[data-theme="light"] .detail-close:hover {
  background: rgba(0,0,0,0.06);
}

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

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

.detail-field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-field-value {
  font-size: 13.5px;
  color: var(--text);
  word-break: break-word;
  line-height: 1.5;
}

.detail-footer {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--surface);
  flex-shrink: 0;
}

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Active table row (selected for detail) ──────────────────────────────────── */
tbody tr {
  cursor: pointer;
}

tbody tr.active {
  background: rgba(192,96,248,0.06);
  outline: 1px solid rgba(192,96,248,0.20);
  outline-offset: -1px;
}

[data-theme="light"] tbody tr.active {
  background: rgba(144,48,208,0.05);
  outline-color: rgba(144,48,208,0.18);
}

/* ── Token generate bar ──────────────────────────────────────────────────────── */
.token-generate-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.token-generate-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

/* Abstraction boundary: .token-recipient-wrap is the container that will be
   replaced (not restyled) when upgrading to applicant search/select. */
.token-recipient-wrap {
  flex: 1;
  min-width: 0;
}

.token-recipient-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13.5px;
  padding: 7px 12px;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.token-recipient-input:focus {
  border-color: var(--border-hi);
  box-shadow: 0 0 0 2px var(--border-glow);
}

.token-recipient-input.input-error {
  border-color: var(--sev-1-border);
  animation: input-shake 0.30s ease;
}

@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

/* ── Primary button ──────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--gradient);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 7px 16px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--ease), box-shadow var(--ease);
}

.btn-primary:hover {
  opacity: 0.88;
  box-shadow: 0 4px 16px rgba(192,96,248,0.28);
}

[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(144,48,208,0.20);
}

/* ── Pipeline funnel ─────────────────────────────────────────────────────────── */
.funnel-section {
  margin-top: 24px;
}

.funnel-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  opacity: 0.7;
}

.pipeline-funnel {
  display: flex;
  align-items: stretch;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.funnel-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  border-right: 1px solid var(--border);
  transition: background var(--ease);
  text-decoration: none;
  cursor: default;
}

.funnel-stage:last-child {
  border-right: none;
}

.funnel-stage:hover {
  background: rgba(255,255,255,0.025);
}

[data-theme="light"] .funnel-stage:hover {
  background: rgba(0,0,0,0.025);
}

.funnel-count {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color var(--ease);
}

.funnel-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
  white-space: nowrap;
}

.funnel-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  color: var(--border-mid);
  font-size: 14px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg2);
}

/* Per-stage count colours follow pipeline status palette */
#fn-stage-submitted    .funnel-count { color: var(--st-submitted);    }
#fn-stage-under_review .funnel-count { color: var(--st-review);       }
#fn-stage-accepted     .funnel-count { color: var(--st-accepted);     }
#fn-stage-deposit_pending .funnel-count { color: var(--st-deposit);   }
#fn-stage-onboarded    .funnel-count { color: var(--st-onboarded);    }

/* ── Phase 2 responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .master-detail-layout.has-detail {
    grid-template-columns: 1fr 320px;
  }
}

@media (max-width: 800px) {
  .master-detail-layout.has-detail {
    grid-template-columns: 1fr;
  }
  .detail-panel {
    position: static;
    max-height: none;
  }
  .token-generate-bar    { flex-wrap: wrap; }
  .token-generate-label  { width: 100%; }
  .pipeline-funnel       { overflow-x: auto; }
  .funnel-stage          { min-width: 80px; }
}

/* =============================================================================
   Phase 3 — Console · ADI drawer controls · Command reference · History
   ============================================================================= */

/* ── ADI header controls ─────────────────────────────────────────────────────── */
.adi-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 12px;
}

/* Thin vertical separator between mode switcher and action buttons */
.adi-ctrl-sep {
  width: 1px;
  height: 16px;
  background: var(--border-mid);
  flex-shrink: 0;
  opacity: 0.6;
}

.adi-ctrl-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--terminal-muted);
  border-radius: var(--radius);
  padding: 2px 9px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.adi-ctrl-btn:hover {
  border-color: rgba(255,255,255,0.12);
  color: var(--terminal-fg);
  background: rgba(255,255,255,0.04);
}

.adi-ctrl-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* ── ADI drawer collapsed state ──────────────────────────────────────────────── */
.adi-section.adi-collapsed .adi-output,
.adi-section.adi-collapsed .adi-input-row {
  display: none;
}

/* ── Console-mode layout ─────────────────────────────────────────────────────── */
/* Applied to .main-col when currentPage === 'console'.
   The Console page content is intentionally minimal (identity strip only).
   The ADI terminal fills all remaining viewport height. */

.console-mode .owner-content {
  flex: 0 0 auto;
  overflow-y: visible;
  padding: 0;
}

/* ADI section fills remaining space — this IS the primary interface on console page */
.console-mode .adi-section {
  position: static;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Accent seam: subtle magenta signals the command surface boundary */
  border-top: 1px solid rgba(180,80,255,0.28);
  border-radius: 0;
  box-shadow: none;
  transition: none; /* no transition needed — console ADI is always expanded */
}

.console-mode .adi-output {
  flex: 1;
  max-height: none;
  min-height: 0;
}

/* Console-mode header: same deep bg as bg2, seam inherits the accent border */
.console-mode .adi-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

/* Hide collapse toggle on Console — collapsing makes no sense when ADI is the primary surface */
.console-mode #adi-toggle { display: none; }

/* Console-mode input row: match header bg for a unified chrome feel */
.console-mode .adi-input-row {
  background: var(--bg2);
  border-top-color: var(--border);
}

/* ── ADI fullscreen mode — uses native Fullscreen API ────────────────────── */
/* Standard */
.adi-section:fullscreen {
  width:  100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-top: none;
}
.adi-section:fullscreen .adi-output {
  flex: 1;
  max-height: none;
  min-height: 0;
}
/* Safari / older WebKit */
.adi-section:-webkit-full-screen {
  width:  100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.adi-section:-webkit-full-screen .adi-output {
  flex: 1;
  max-height: none;
}

/* ── Console identity strip ──────────────────────────────────────────────────── */
.console-identity-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.console-id-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.console-id-email {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.console-id-sep {
  color: var(--border-mid);
  font-size: 11px;
  user-select: none;
}

.console-id-stat {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.console-id-alert { color: var(--sev-2); font-weight: 600; }

.console-id-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  margin-left: auto;
}

.console-id-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg3);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text-dim);
}

/* ── Console page-identity overrides ─────────────────────────────────────────── */
.console-page-identity {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.console-alert-count {
  color: var(--sev-2);
  font-weight: 600;
}

.console-hint-strip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.70;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.console-hint-strip kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg3);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text-dim);
  display: inline-block;
}

/* ── Console context strip ───────────────────────────────────────────────────── */
.console-context-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  flex-wrap: wrap;
}

.console-ctx-sep {
  width: 1px;
  height: 20px;
  background: var(--border-mid);
  flex-shrink: 0;
}

.console-ctx-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.console-ctx-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.console-ctx-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.console-ctx-value.ctx-value-alert {
  color: var(--sev-1);
}

/* ── Console panels (history + reference side by side) ───────────────────────── */
.console-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 2px;
}

.console-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 220px;
}

.console-panel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.console-panel-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding: 14px;
  opacity: 0.7;
}

/* ── History list ────────────────────────────────────────────────────────────── */
.console-history-list {
  overflow-y: auto;
  flex: 1;
}

.console-history-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--ease);
}

.console-history-item:last-child {
  border-bottom: none;
}

.console-history-item:hover {
  background: rgba(192,96,248,0.05);
}

[data-theme="light"] .console-history-item:hover {
  background: rgba(144,48,208,0.05);
}

.console-history-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.console-history-cmd {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.console-history-item:hover .console-history-cmd {
  color: var(--text);
}

/* ── Help reference panel ────────────────────────────────────────────────────── */
.console-help-body {
  overflow-y: auto;
  flex: 1;
  padding: 10px 0;
}

.help-ref-section {
  padding: 0 14px 10px;
}

.help-ref-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  opacity: 0.7;
}

.help-ref-cmd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.help-ref-section + .help-ref-section {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* ── Phase 3 responsive ──────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .console-panels         { grid-template-columns: 1fr; }
  .console-panel          { max-height: 160px; }
  .console-context-strip  { gap: 6px; }
}

@media (max-width: 720px) {
  .adi-header-controls    { display: none; }  /* controls hidden on very small screens */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 4 — Memory Hub · Session Intelligence · Audit Intelligence
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Page header actions ─────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

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

/* ── btn-ghost — low-prominence action button ─────────────────────────────────── */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

/* ── Memory page layout ──────────────────────────────────────────────────────── */
.memory-backup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 24px;
  overflow: hidden;
}

.memory-backup-idle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  color: var(--text-dim);
}

.memory-backup-idle-icon {
  font-size: 20px;
  color: var(--muted);
  flex-shrink: 0;
}

.memory-backup-idle-text {
  font-size: 13.5px;
  line-height: 1.5;
}

.memory-backup-idle-text strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Backup card (rendered state) ────────────────────────────────────────────── */
.backup-card {
  padding: 0;
}

.backup-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

.backup-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
}

.backup-card-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}

.backup-card-stats {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.backup-stat {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  border-right: 1px solid var(--border);
}

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

.backup-stat.warning {
  color: var(--warning, #f59e0b);
}

.backup-stat-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

.backup-card-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.backup-card-section:last-of-type {
  border-bottom: none;
}

.backup-card-section-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

.backup-card-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.backup-card-item {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.backup-card-item.success { color: var(--st-onboarded, #22c55e); }
.backup-card-item.warning { color: var(--warning, #f59e0b); }
.backup-card-item.muted   { color: var(--muted); }

.backup-card-empty {
  padding: 18px 20px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.backup-card-footer {
  padding: 10px 20px;
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* ── Memory sessions section ─────────────────────────────────────────────────── */
.memory-sessions-section {
  margin-top: 4px;
}

.memory-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.memory-section-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Sessions table ──────────────────────────────────────────────────────────── */
.sessions-table tbody tr.session-row {
  cursor: pointer;
}

.sessions-table tbody tr.session-row:hover {
  background: rgba(192,96,248,0.04);
}

[data-theme="light"] .sessions-table tbody tr.session-row:hover {
  background: rgba(144,48,208,0.04);
}

.sessions-table tbody tr.session-row.active {
  background: rgba(192,96,248,0.07);
}

.session-period {
  font-size: 11px;
}

.session-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.session-area-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: rgba(192,96,248,0.1);
  color: var(--magenta);
  border: 1px solid rgba(192,96,248,0.25);
  border-radius: 3px;
  padding: 1px 6px;
}

[data-theme="light"] .session-area-tag {
  background: rgba(144,48,208,0.08);
  color: var(--magenta);
  border-color: rgba(144,48,208,0.2);
}

/* ── Session inline detail row ───────────────────────────────────────────────── */
.session-detail-row td {
  padding: 0;
  border-top: none;
}

.session-detail {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 2px solid rgba(192,96,248,0.2);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-theme="light"] .session-detail {
  background: rgba(0,0,0,0.02);
}

.session-detail-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session-detail-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.session-detail-item {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.session-detail-item.success { color: var(--st-onboarded, #22c55e); }
.session-detail-item.warning { color: var(--warning, #f59e0b); }
.session-detail-item.muted   { color: var(--muted); }

/* ── Audit signal strip ──────────────────────────────────────────────────────── */
.audit-signal-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  min-height: 22px;
}

.signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.signal-chip strong {
  font-weight: 700;
}

.signal-chip-3 {
  background: rgba(192,96,248,0.1);
  border-color: rgba(192,96,248,0.25);
  color: var(--magenta);
}

.signal-chip-2 {
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.2);
  color: #38bdf8;
}

[data-theme="light"] .signal-chip-2 {
  background: rgba(14,116,144,0.08);
  border-color: rgba(14,116,144,0.2);
  color: #0e7490;
}

.signal-chip-1 {
  background: rgba(100,116,139,0.1);
  border-color: rgba(100,116,139,0.2);
  color: var(--text-dim);
}

.signal-chip-0 {
  background: rgba(100,116,139,0.06);
  border-color: rgba(100,116,139,0.12);
  color: var(--muted);
}

.signal-chip-muted {
  opacity: 0.45;
}

/* ── Audit signal badge (per-row) ────────────────────────────────────────────── */
.audit-sig-col {
  width: 32px;
  text-align: center;
}

/* Detail column — full text, wraps naturally */
.audit-detail-col {
  white-space: normal;
  word-break: break-word;
  min-width: 160px;
  max-width: 480px;
  line-height: 1.5;
}

/* Audit table scroll container — independent scroll, sticky header */
#audit-table-wrap {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}
#audit-table-wrap .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg3);
}

.signal-badge {
  font-size: 12px;
  line-height: 1;
}

.signal-badge-3 { color: var(--magenta); text-shadow: 0 0 6px rgba(192,96,248,0.7), 0 0 14px rgba(192,96,248,0.35); }
.signal-badge-2 { color: #38bdf8; }
.signal-badge-1 { color: var(--text-dim); opacity: 0.6; }
.signal-badge-0 { color: var(--muted); opacity: 0.4; }

[data-theme="light"] .signal-badge-3 { text-shadow: 0 0 5px rgba(144,48,208,0.55), 0 0 12px rgba(144,48,208,0.25); }

[data-theme="light"] .signal-badge-2 { color: #0e7490; }

/* ── Phase 4 responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .backup-card-stats  { flex-wrap: wrap; }
  .backup-stat        { flex: 1 1 40%; }
  .session-period     { display: none; }
}

@media (max-width: 720px) {
  .page-header-actions  { width: 100%; justify-content: flex-start; }
  .audit-signal-strip   { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 5 — Mechanics: Health · Module Grid · System Events · Danger Zone
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Mechanics section wrapper ───────────────────────────────────────────────── */
.mechanics-section {
  margin-top: 28px;
}

.mechanics-section-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 10px;
}
.mechanics-section-header .mechanics-section-note {
  margin-left: auto;
}
.btn-add-module {
  flex-shrink: 0;
  font-size:   11px;
  padding:     4px 10px;
}

.mechanics-section-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Health card ─────────────────────────────────────────────────────────────── */
.mechanics-health-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.health-card {
  display: flex;
  flex-wrap: wrap;
}

.health-stat {
  flex: 1 1 0;
  min-width: 100px;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.health-stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.health-stat-ts {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.health-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.health-stat-danger .health-stat-value { color: var(--sev-1, #ef4444); }
.health-stat-warn   .health-stat-value { color: var(--warning, #f59e0b); }
.health-stat-frozen .health-stat-value { color: var(--magenta); }

/* Schema stat always displays a text note, not a number — scale it down */
#hcat-schema .health-stat-value { font-size: 13px; font-weight: 600; line-height: 1.3; word-break: break-word; }

/* ── System Health — ARES Reports panel ─────────────────────────────────────── */
.health-reports-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

/* ── Audit runner checks grid ─────────────────────────────────────────────── */
.audit-checks-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.audit-check-item {
  display: grid;
  grid-template-columns: 20px 180px 90px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
}

.audit-check-item:last-child { border-bottom: none; }
.audit-check-item.audit-check-danger   { background: var(--surface-danger,    rgba(239,68,68,.06)); }
.audit-check-item.audit-check-warn     { background: var(--surface-warn,      rgba(245,158,11,.05)); }
.audit-check-item.audit-check-degraded { background: var(--surface-degraded,  rgba(100,116,139,.04)); }

.audit-check-icon {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}
.audit-check-ok .audit-check-icon     { color: var(--sev-4, #22c55e); }
.audit-check-warn .audit-check-icon   { color: var(--research-accent, #f59e0b); }
.audit-check-danger .audit-check-icon { color: var(--sev-1, #ef4444); }
.audit-check-degraded .audit-check-icon { color: var(--text-muted); }

.audit-check-label {
  font-weight: 500;
  color: var(--text);
}

.audit-check-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.audit-check-danger .audit-check-val { color: var(--sev-1, #ef4444); }
.audit-check-warn   .audit-check-val { color: var(--research-accent, #f59e0b); }

.audit-check-esc {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.audit-esc-blocking      { color: var(--sev-1, #ef4444); }
.audit-esc-warning       { color: var(--research-accent, #f59e0b); }
.audit-esc-observational { color: var(--text-muted); }

.audit-meta-danger   { color: var(--sev-1, #ef4444); }
.audit-meta-warn     { color: var(--research-accent, #f59e0b); }
.audit-meta-degraded { color: var(--muted); opacity: 1; }

/* ── Health reports list ──────────────────────────────────────────────────── */
.hr-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  transition: background 0.1s;
}

.hr-row:hover { background: var(--surface-raised, var(--surface)); }

.hr-row-unread { background: var(--surface-alt, var(--surface)); }
.hr-row-unread .hr-row-title { color: var(--text); font-weight: 600; }

.hr-row-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.hr-row-body    { min-width: 0; }
.hr-row-title   { font-size: 13px; color: var(--text-secondary, var(--text)); }
.hr-row-summary { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

.hr-row-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hr-row-ts { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

.hr-dot        { font-size: 10px; line-height: 1; flex-shrink: 0; margin-top: 3px; }
.hr-dot-ok       { color: var(--success, #22c55e); }
.hr-dot-warn     { color: var(--warning, #f59e0b); }
.hr-dot-critical { color: var(--sev-1, #ef4444); }
.hr-dot-info          { color: var(--muted); }
.hr-dot-observational { color: var(--text-muted); }
.hr-esc-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 1px 5px; border-radius: 2px; margin-left: 6px; vertical-align: middle; }
.hr-esc-blocking { color: var(--sev-1, #ef4444); border: 1px solid var(--sev-1, #ef4444); background: rgba(239,68,68,.08); }

/* ── System banners ───────────────────────────────────────────────────────── */
.system-banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.system-banner {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border-left: 3px solid; border-radius: 4px; font-size: 13px;
}
.system-banner--warn     { border-color: var(--research-accent, #f59e0b); background: var(--surface-warn,    rgba(245,158,11,.05)); }
.system-banner--critical { border-color: var(--sev-1, #ef4444);           background: var(--surface-danger,  rgba(239,68,68,.06));  }
.system-banner--degraded { border-color: var(--text-muted);               background: var(--surface-degraded,rgba(100,116,139,.04));}
.system-banner-icon  { font-size: 12px; flex-shrink: 0; }
.system-banner-title { font-weight: 600; flex-shrink: 0; }
.system-banner-msg   { color: var(--text-muted); }
.system-banner--warn .system-banner-icon,
.system-banner--warn .system-banner-title     { color: var(--research-accent, #f59e0b); }
.system-banner--critical .system-banner-icon,
.system-banner--critical .system-banner-title { color: var(--sev-1, #ef4444); }
.system-banner--degraded .system-banner-icon,
.system-banner--degraded .system-banner-title { color: var(--text-muted); }

.health-reports-list {
  max-height: 900px;
  overflow-y: auto;
}

.health-reports-pagination { margin-top: 12px; }

/* ── Health report category grid ─────────────────────────────────────────────── */
.hr-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 16px;
  padding: 8px 10px;
  background: var(--surface-alt, rgba(0,0,0,0.03));
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

[data-theme="dark"] .hr-cat-grid {
  background: rgba(255,255,255,0.025);
}

.hr-cat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hr-cat-item .hr-dot { margin-top: 0; }

.hr-cat-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim, var(--muted));
  width: 88px;
  flex-shrink: 0;
}

.hr-cat-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-cat-val-ok       { color: var(--success, #22c55e); }
.hr-cat-val-warn     { color: var(--warning, #f59e0b); }
.hr-cat-val-critical { color: var(--sev-1, #ef4444); }

@media (max-width: 720px) {
  .hr-cat-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Page Section — shared structural component ──────────────────────────────── */
.page-section          { margin-bottom: 32px; }
.page-section-header   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.page-section-title    { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.page-section-meta     { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; }

/* ── btn-sm modifier ─────────────────────────────────────────────────────────── */
.btn-sm { padding: 4px 11px; font-size: 12px; }

/* ── Operations Console ──────────────────────────────────────────────────────── */

/* Secret card */
.ops-secret-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ops-secret-display {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  line-height: 1.6;
}

.ops-secret-placeholder { color: var(--muted); font-style: italic; }
.ops-secret-value       { color: var(--magenta); letter-spacing: 0.03em; }

.ops-secret-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Save-to-Vercel row — appears after generation */
.ops-save-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Shared input */
.ops-input {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 7px 14px;
  outline: none;
  transition: border-color var(--ease);
  min-width: 0;
}
.ops-input:focus         { border-color: var(--border-hi); }
.ops-input::placeholder  { color: var(--muted); opacity: 0.45; }
.ops-input--wide         { flex: 1; min-width: 180px; }
.ops-input--secret       { letter-spacing: 0.05em; }

/* Shared select */
.ops-select {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 12px;
  outline: none;
  transition: border-color var(--ease);
  cursor: pointer;
}
.ops-select:focus { border-color: var(--border-hi); }

/* Status line */
.ops-status {
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 18px;
  margin-top: 10px;
  transition: color var(--ease);
}
.ops-status-ok    { color: var(--sev-4, #3ec880); }
.ops-status-error { color: var(--sev-1, #ff4444); }

/* Env var list */
/* Shared grid — all rows inherit the same column track so value dots
   always land at the same absolute x position regardless of auto column widths */
.ops-envvar-list {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto auto;
  row-gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ops-envvar-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  transition: background var(--ease);
}
.ops-envvar-row:hover { background: var(--surface2); }

.ops-title-glow {
  color: var(--magenta) !important;
  text-shadow: 0 0 8px rgba(192,96,248,0.65), 0 0 20px rgba(192,96,248,0.3);
}

[data-theme="light"] .ops-title-glow {
  text-shadow: 0 0 6px rgba(144,48,208,0.5), 0 0 14px rgba(144,48,208,0.2);
}

.ops-envvar-key    { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.ops-envvar-value  { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.ops-envvar-value[data-revealed="true"] { white-space: normal; overflow: visible; text-overflow: unset; word-break: break-all; text-align: left; }
.ops-envvar-target { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ops-envvar-ts     { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; white-space: nowrap; }
.ops-envvar-eye {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  transition: color var(--ease);
}
.ops-envvar-eye:hover { color: var(--text); }
.ops-envvar-eye:disabled { opacity: 0.4; cursor: wait; }

/* Add/Update form */
.ops-envvar-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── SQL Runner ──────────────────────────────────────────────────────────────── */
.ops-sql-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ops-sql-textarea {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 16px;
  resize: vertical;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--ease);
  tab-size: 2;
}
.ops-sql-textarea:focus { border-color: var(--border-hi); }
.ops-sql-textarea::placeholder { color: var(--muted); opacity: 0.4; }

.ops-sql-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ops-sql-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ops-sql-store-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.ops-sql-store-label input[type="checkbox"] {
  accent-color: var(--magenta);
  cursor: pointer;
}

.ops-sql-results {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ops-sql-result-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ops-sql-table-wrap {
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
}

.ops-sql-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}

.ops-sql-table thead {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.ops-sql-table th {
  text-align: left;
  padding: 8px 14px;
  color: var(--text-dim);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ops-sql-table td {
  padding: 7px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface);
}
.ops-sql-table tbody tr:hover td { background: var(--surface2); }
.ops-sql-table tbody tr:last-child td { border-bottom: none; }

/* ── Module status grid ──────────────────────────────────────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--ease);
}

.module-card-frozen {
  border-color: rgba(192,96,248,0.35);
  background: rgba(192,96,248,0.04);
}

[data-theme="light"] .module-card-frozen {
  border-color: rgba(144,48,208,0.3);
  background: rgba(144,48,208,0.04);
}

.module-card-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.module-card-state {
  display: flex;
  align-items: center;
}

.module-state-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
}

.module-state-active {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.2);
}

[data-theme="light"] .module-state-active {
  background: rgba(22,163,74,0.08);
  color: #16a34a;
  border-color: rgba(22,163,74,0.2);
}

.module-state-frozen {
  background: rgba(192,96,248,0.12);
  color: var(--magenta);
  border: 1px solid rgba(192,96,248,0.3);
}

.module-unfreeze-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  background: transparent;
  border: 1px solid rgba(192,96,248,0.3);
  color: var(--magenta);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  margin-top: 2px;
  align-self: flex-start;
}

.module-unfreeze-btn:hover {
  background: rgba(192,96,248,0.1);
  border-color: var(--magenta);
}

/* ── Mechanics section note ──────────────────────────────────────────────────── */
.mechanics-section-note {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-ui);
}

/* ── Rich module registry grid ───────────────────────────────────────────────── */
.mech-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 1400px;
}

.mech-mod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--ease);
}

.mech-mod-card-frozen {
  border-color: rgba(192,96,248,0.35);
  background: rgba(192,96,248,0.04);
}

[data-theme="light"] .mech-mod-card-frozen {
  border-color: rgba(144,48,208,0.28);
  background: rgba(144,48,208,0.04);
}

.mech-mod-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mech-mod-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.03em;
}

.mech-mod-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.mech-mod-badge-active {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.2);
}

[data-theme="light"] .mech-mod-badge-active {
  background: rgba(22,163,74,0.08);
  color: #16a34a;
  border-color: rgba(22,163,74,0.2);
}

.mech-mod-badge-frozen {
  background: rgba(192,96,248,0.12);
  color: var(--magenta);
  border: 1px solid rgba(192,96,248,0.3);
}

.mech-mod-desc {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.5;
}

.mech-mod-role {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.mech-mod-frozen-note {
  color: var(--magenta);
  font-weight: 600;
  font-size: 11px;
}

.mech-mod-unfreeze {
  font-family: var(--font-ui);
  font-size: 11px;
  background: transparent;
  border: 1px solid rgba(192,96,248,0.3);
  color: var(--magenta);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  align-self: flex-start;
  margin-top: 2px;
}

.mech-mod-unfreeze:hover {
  background: rgba(192,96,248,0.1);
  border-color: var(--magenta);
}

/* ── State reference ─────────────────────────────────────────────────────────── */
.mech-state-ref {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 600px) {
  .mech-state-ref { grid-template-columns: 1fr; }
}

.mech-state-def {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.mech-state-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

.mech-state-badge-active {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.2);
}

[data-theme="light"] .mech-state-badge-active {
  background: rgba(22,163,74,0.08);
  color: #16a34a;
  border-color: rgba(22,163,74,0.2);
}

.mech-state-badge-frozen {
  background: rgba(192,96,248,0.12);
  color: var(--magenta);
  border: 1px solid rgba(192,96,248,0.3);
}

.mech-state-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.mech-state-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.mech-state-detail {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.mech-state-detail code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text);
}

[data-theme="light"] .mech-state-detail code {
  background: rgba(0,0,0,0.04);
}

/* ── Danger zone ─────────────────────────────────────────────────────────────── */
.danger-zone {
  margin-top: 36px;
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 6px;
  overflow: hidden;
}

[data-theme="light"] .danger-zone {
  border-color: rgba(220,38,38,0.2);
}

.danger-zone-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(239,68,68,0.05);
  border-bottom: 1px solid rgba(239,68,68,0.15);
  flex-wrap: wrap;
}

[data-theme="light"] .danger-zone-header {
  background: rgba(220,38,38,0.04);
  border-bottom-color: rgba(220,38,38,0.12);
}

.danger-zone-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ef4444;
}

.danger-zone-sub {
  font-size: 12px;
  color: var(--muted);
}

.danger-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.danger-control {
  padding: 20px 20px;
  border-bottom: 1px solid rgba(239,68,68,0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.danger-control:last-child {
  border-bottom: none;
}

.danger-control-critical {
  background: rgba(239,68,68,0.03);
}

[data-theme="light"] .danger-control-critical {
  background: rgba(220,38,38,0.02);
}

.danger-control-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.03em;
}

.danger-control-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

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

.danger-select {
  font-family: var(--font-ui);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  min-width: 160px;
}

.danger-select:focus {
  outline: none;
  border-color: #ef4444;
}

.danger-btn {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.4);
  color: #ef4444;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.danger-btn:hover {
  background: rgba(239,68,68,0.08);
  border-color: #ef4444;
}

.danger-btn-lockdown {
  border-color: rgba(239,68,68,0.5);
}

.danger-btn-confirm-lockdown {
  background: rgba(239,68,68,0.1);
  border-color: #ef4444;
}

.danger-btn-confirm-lockdown:hover {
  background: rgba(239,68,68,0.2);
}

/* ── Lockdown arm/confirm UI ─────────────────────────────────────────────────── */
.lockdown-control-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lockdown-confirm-label {
  font-size: 12.5px;
  color: #ef4444;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  margin-bottom: 8px;
}

.lockdown-confirm-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Phase 5 responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .health-stat       { flex: 1 1 40%; }
  .module-grid       { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 600px) {
  .danger-control-row { flex-direction: column; align-items: flex-start; }
  .danger-select      { width: 100%; }
}

/* ── Phase 6: Research Domain ────────────────────────────────────────────────── */

/* Amber accent tokens */
:root {
  --research-accent:      #f59e0b;
  --research-accent-dim:  rgba(245,158,11,0.18);
  --research-accent-tint: rgba(245,158,11,0.08);
  --research-border:      rgba(245,158,11,0.32);
}

[data-theme="light"] {
  --research-accent:      #d97706;
  --research-accent-dim:  rgba(217,119,6,0.18);
  --research-accent-tint: rgba(217,119,6,0.07);
  --research-border:      rgba(217,119,6,0.30);
}

/* Research Banner */
.research-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--research-accent-tint);
  border: 1px solid var(--research-border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--research-accent);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.research-banner-icon { font-size: 14px; flex-shrink: 0; }
.research-banner-text { line-height: 1.4; }

/* Research Hub Grid */
.research-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}

.research-hub-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.research-hub-card:hover {
  border-color: var(--research-border);
  box-shadow: 0 0 0 1px var(--research-border), var(--shadow-md);
  text-decoration: none;
}

.research-hub-card-icon  { font-size: 20px; color: var(--research-accent); margin-bottom: 12px; }
.research-hub-card-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.research-hub-card-desc  { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* Research Grid & Cards */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap);
}

.research-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.research-card-full  { grid-column: 1 / -1; }

.research-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* ── Research Homepage ────────────────────────────────────────────────────── */
.research-mission-block {
  padding: 20px 24px;
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--research-accent);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

.research-mission-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--research-accent);
  margin-bottom: 10px;
}

.research-mission-body {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
}

.research-framework-block {
  margin-bottom: 24px;
}

.research-framework-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.research-framework-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .research-framework-grid { grid-template-columns: 1fr; }
}

.research-framework-item {
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--ease);
}
.research-framework-item:hover { border-color: var(--research-accent); }

.research-framework-item-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--research-accent);
  margin-bottom: 5px;
}

.research-framework-item-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.research-nav-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .research-nav-cards { grid-template-columns: 1fr; }
}

.research-nav-card {
  display: block;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.research-nav-card:hover {
  border-color: var(--research-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

.research-nav-card-icon {
  font-size: 18px;
  margin-bottom: 8px;
  display: block;
  color: var(--research-accent);
}

.research-nav-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.research-nav-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Density Gauge */
.research-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.research-gauge {
  flex: 1;
  height: 10px;
  background: var(--surface3);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.research-gauge-fill {
  height: 100%;
  width: 0%;
  background: var(--research-accent);
  border-radius: 5px;
  transition: width 0.5s ease;
}

.research-gauge-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 80px;
}

.research-gauge-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--research-accent);
  font-variant-numeric: tabular-nums;
}

.research-gauge-band {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.density-low      { color: var(--sev-4); }
.density-moderate { color: var(--research-accent); }
.density-high     { color: var(--sev-2); }
.density-peak     { color: var(--sev-1); }

.research-gauge-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* ── Density Breakdown Table ─────────────────────────────────────────────── */
.density-breakdown {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.density-breakdown-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.density-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}

.density-breakdown-table th {
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border);
}

.density-breakdown-table td {
  padding: 5px 8px 5px 0;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.density-breakdown-table tr:last-child td { border-bottom: none; }

.density-breakdown-table td:first-child { color: var(--text); font-weight: 600; }

.density-breakdown-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius);
  border-left: 2px solid var(--research-border);
}

.density-breakdown-band {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.density-breakdown-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Protocol Phase States */
.research-phases { display: flex; flex-direction: column; gap: 12px; }

.research-phase-item {
  padding: 12px 14px;
  background: var(--surface2);
  border-radius: var(--radius);
  border-left: 3px solid var(--research-border);
}

.research-phase-name {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--research-accent);
  margin-bottom: 4px;
}

.research-phase-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

/* HDGO Events List */
.research-hdgo-list { display: flex; flex-direction: column; gap: 16px; }

.research-hdgo-item { display: flex; gap: 16px; align-items: flex-start; }

.research-hdgo-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--research-accent-dim);
  color: var(--research-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.research-hdgo-body  { flex: 1; }
.research-hdgo-name  { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.research-hdgo-desc  { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* DANNPA Document */
.dannpa-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.dannpa-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* Content-type chips */
.dannpa-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
  flex-shrink: 0;
  white-space: nowrap;
}

.dannpa-chip.established   { background: rgba(62,200,128,0.12);       color: var(--sev-4);           border: 1px solid rgba(62,200,128,0.25); }
.dannpa-chip.interpretive  { background: var(--research-accent-tint); color: var(--research-accent); border: 1px solid var(--research-border); }
.dannpa-chip.speculative   { background: rgba(255,140,0,0.10);        color: var(--sev-2);           border: 1px solid rgba(255,140,0,0.25); }
.dannpa-chip.high-conf     { background: rgba(62,200,128,0.12);       color: var(--sev-4);           border: 1px solid rgba(62,200,128,0.25); }
.dannpa-chip.moderate-conf { background: var(--research-accent-tint); color: var(--research-accent); border: 1px solid var(--research-border); }
.dannpa-chip.low-conf      { background: rgba(90,104,152,0.12);       color: var(--muted);           border: 1px solid rgba(90,104,152,0.20); }

.research-doc   { display: flex; flex-direction: column; gap: 32px; }
.dannpa-section { display: flex; flex-direction: column; gap: 16px; }

.dannpa-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* DANNPA content-type blocks */
.dannpa-block {
  position: relative;
  padding: 16px;
  border-radius: var(--radius);
  line-height: 1.62;
  font-size: 14px;
}

.established-block  { background: var(--surface2);            border: 1px solid var(--border);          }
.interpretive-block { background: var(--card-bg);             border: 1px solid var(--border); border-left: 3px solid var(--research-accent); }
.speculative-block  { background: var(--research-accent-tint); border: 1px solid var(--research-border); }

.dannpa-block-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.established-label  { color: var(--sev-4); }
.interpretive-label { color: var(--research-accent); }
.speculative-label  { color: var(--sev-2); }

.dannpa-block p { margin: 0; }
.dannpa-block code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface3);
  padding: 2px 5px;
  border-radius: 3px;
}

/* d sin interpretations */
.dannpa-interpretations       { display: flex; flex-direction: column; gap: 12px; }
.dannpa-interpretation-label  { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 4px; }

.dannpa-interp-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.dannpa-interp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.dannpa-interp-rank { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; min-width: 20px; }
.dannpa-interp-name { font-size: 14px; font-weight: 600; flex: 1; }
.dannpa-interp-body { font-size: 13px; color: var(--text-dim); line-height: 1.57; margin: 0; }

/* Session Warning */
.notes-session-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: rgba(255,140,0,0.08);
  border: 1px solid rgba(255,140,0,0.28);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--sev-2);
  line-height: 1.5;
}

.notes-warning-icon { flex-shrink: 0; font-size: 15px; }

/* Notes Two-Panel Layout */
.notes-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  min-height: 420px;
  margin-bottom: 28px;
}

.notes-list-col,
.notes-editor-col,
.notes-preview-col {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notes-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.notes-list-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.notes-new-btn {
  background: var(--research-accent-dim);
  color: var(--research-accent);
  border: 1px solid var(--research-border);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease);
}

.notes-new-btn:hover { background: rgba(245,158,11,0.28); }

.notes-list       { flex: 1; overflow-y: auto; }
.notes-list-empty { padding: 16px; font-size: 13px; color: var(--muted); }

.notes-list-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--ease);
}

.notes-list-item:hover  { background: var(--surface2); }
.notes-list-item.active { background: var(--research-accent-tint); border-left: 3px solid var(--research-accent); }

.notes-list-item-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-list-item-date { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.notes-editor-wrap   { flex: 1; display: flex; flex-direction: column; }
.notes-editor-empty  { padding: 20px; font-size: 13px; color: var(--muted); }

.notes-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.notes-title-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-ui);
}

.notes-title-input::placeholder { color: var(--muted); }

.notes-delete-btn {
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--ease);
}

.notes-delete-btn:hover { background: rgba(239,68,68,0.1); }

.notes-textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  resize: none;
  min-height: 300px;
}

.notes-textarea::placeholder { color: var(--muted); }

.notes-preview-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface2);
}

.notes-preview { flex: 1; padding: 16px; overflow-y: auto; font-size: 14px; line-height: 1.65; }

/* Markdown preview typography */
.notes-preview .md-h1 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.notes-preview .md-h2 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.notes-preview .md-h3 { font-size: 14px; font-weight: 600; margin: 10px 0 4px; }
.notes-preview .md-p  { margin: 0 0 10px; }
.notes-preview .md-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.notes-preview .md-ul { padding-left: 20px; margin: 0 0 10px; }
.notes-preview code   { font-family: var(--font-mono); font-size: 12px; background: var(--surface3); padding: 2px 5px; border-radius: 3px; }

/* Experiments Section */
.experiments-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.experiments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.experiments-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.experiments-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.experiment-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.experiment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.experiment-status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
}

.exp-status-pending      { background: rgba(90,104,152,0.15);        color: var(--muted);           }
.exp-status-running      { background: var(--research-accent-tint);  color: var(--research-accent); }
.exp-status-complete     { background: rgba(62,200,128,0.12);        color: var(--sev-4);           }
.exp-status-inconclusive { background: rgba(255,68,68,0.08);         color: var(--sev-1);           }

.experiment-date       { font-size: 11.5px; color: var(--muted); flex: 1; }
.experiment-delete-btn { background: transparent; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }
.experiment-delete-btn:hover { color: var(--sev-1); }

.experiment-hypothesis,
.experiment-method,
.experiment-result {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 4px;
}

/* Experiment inline form */
.experiment-form {
  background: var(--surface3);
  border: 1px solid var(--research-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exp-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-ui);
  outline: none;
  width: 100%;
}

.exp-input:focus       { border-color: var(--research-border); }
.exp-input::placeholder { color: var(--muted); }

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

.exp-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-ui);
  cursor: pointer;
}

/* Phase 6 responsive */
@media (max-width: 1100px) {
  .notes-layout { grid-template-columns: 180px 1fr; }
}

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

@media (max-width: 700px) {
  .notes-layout   { grid-template-columns: 1fr; }
  .dannpa-legend  { flex-direction: column; gap: 10px; }
}

/* =============================================================================
   Phase 7 — UI/UX Polish
   All rules below are additive or scoped overrides of Phase 1–6 values.
   Nothing above this line is modified.
   ============================================================================= */

/* ── Page-enter animation ────────────────────────────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.owner-content.page-enter {
  animation: page-enter 0.15s ease forwards;
}

/* ── Focus-visible rings (keyboard navigation) ───────────────────────────────── */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(180,80,255,0.55);
  outline-offset: 2px;
  border-radius: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(180,80,255,0.45);
  outline-offset: 1px;
}

/* ── Sidebar refinements ─────────────────────────────────────────────────────── */
/* Slightly more visible hover — was 0.04, now 0.06 */
.sidebar-link:hover { background: rgba(255,255,255,0.06); }

[data-theme="light"] .sidebar-link:hover { background: rgba(0,0,0,0.055); }

/* More breathing room per item — was 8px, now 9px top/bottom */
.sidebar-link { padding: 9px 16px; }

/* More visible active state — was 0.06, now 0.09 */
.sidebar-link.active { background: rgba(192,96,248,0.09); }

[data-theme="light"] .sidebar-link.active { background: rgba(144,48,208,0.09); }

/* Section labels more legible — was 0.65, now 0.78 */
.sidebar-group-label { opacity: 0.78; }

/* ── Page header polish ─────────────────────────────────────────────────────── */
/* Bottom rule provides clear separation between header and page content */
.page-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.page-title    { font-size: 18px; }  /* was 16px */
.page-subtitle { font-size: 14px; }  /* was 13px */

/* ── Table readability ──────────────────────────────────────────────────────── */
/* Add transition to cells so hover is smooth rather than instant */
.data-table td {
  transition: background 0.12s ease;
  line-height: 1.5;
}

/* Row hover slightly more visible — was 0.025, now 0.04 */
.data-table tr:hover td               { background: rgba(255,255,255,0.04); }
[data-theme="light"] .data-table tr:hover td { background: rgba(0,0,0,0.04); }

/* ── Button active / press states ───────────────────────────────────────────── */
/* Adds tactile press feedback to all major button classes */
.tbl-btn:active                        { transform: scale(0.97); }
.filter-btn:active                     { transform: scale(0.97); }
.btn-secondary:active                  { transform: scale(0.97); }
.btn-primary:active                    { opacity: 0.80; transform: scale(0.98); }
.btn-logout:active,
.overview-card-action:active           { transform: scale(0.97); }
.notes-new-btn:active,
.notes-delete-btn:active               { transform: scale(0.97); }

/* .data-empty opacity is set canonically in the base rule above */

/* ── Status badge borders (parity with sev-badges) ─────────────────────────── */
.status-submitted               { border: 1px solid rgba(104,120,176,0.25); }
.status-under_review            { border: 1px solid rgba(236,192,0,0.25);   }
.status-accepted                { border: 1px solid rgba(62,200,128,0.25);  }
.status-deferred                { border: 1px solid rgba(255,140,0,0.25);   }
.status-declined                { border: 1px solid rgba(255,68,68,0.25);   }
.status-invited_to_conversation { border: 1px solid rgba(192,96,248,0.25);  }
.status-deposit_pending         { border: 1px solid rgba(128,96,255,0.25);  }
.status-onboarded               { border: 1px solid rgba(0,232,184,0.22);   }

/* ── Mobile navigation bar ──────────────────────────────────────────────────── */
/* Provides page orientation when the sidebar is hidden at ≤720px */
.mobile-nav {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 44px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mobile-nav-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.mobile-nav-sep {
  width: 1px;
  height: 14px;
  background: var(--border-mid);
  flex-shrink: 0;
}

.mobile-nav-page {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .mobile-nav { display: flex; }
}

/* ── Phase 7 small-screen improvements ──────────────────────────────────────── */
@media (max-width: 600px) {
  .page-title  { font-size: 15px; }
  .state-bar   { gap: 6px; }
  .state-item  { min-width: 70px; padding: 10px 8px; }
  .state-value { font-size: 20px; }
  .state-label { font-size: 10px; }
  .overview-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ── Phase 7 polish pass ─────────────────────────────────────────────────────── */

/* 1. Brand lockup — "ARES ◆ ORIGIN" centered */
.sidebar-brand {
  justify-content: center;
}

/* Diamond is now inline — switch from block/flex-item to inline styling */
.sidebar-brand-mark {
  display: inline;
  font-size: 13px;    /* matches surrounding mono text weight visually */
  flex-shrink: unset; /* was needed as a flex child, no longer applies */
}

/* 2. Collapsible sidebar groups */
.sidebar-group-label {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* opacity override from Phase 7 block already in effect (.78) */
}

.sidebar-group-label:hover {
  opacity: 1;
}

.sidebar-group-chevron {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  opacity: 0.45;
  transform: rotate(0deg);
  transition: transform 0.22s ease, opacity 0.18s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.sidebar-group.open .sidebar-group-chevron {
  transform: rotate(90deg);
  opacity: 0.85;
}

/* Collapsible link container */
.sidebar-group-links {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-group.open .sidebar-group-links {
  max-height: 400px; /* ceiling: generous for up to 11 links at ~36px each */
}

/* 3. ADI boot text — more readable against dark terminal */
/* was: color terminal-muted (#5a6898) + opacity 0.70 — very low contrast */
.adi-boot-msg {
  color: var(--terminal-dim); /* rgba(221,224,240,0.60) — visually secondary but legible */
  opacity: 1;
}

/* 4. ADI trace lines — secondary but clearly readable */
/* was: opacity 0.44 — nearly invisible */
.adi-trace-line {
  opacity: 0.72;
}

/* ── Phase A MFA: Login screen extensions ─────────────────────────────────── */

.mfa-step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.mfa-step-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 22px;
}

.mfa-qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 18px;
  min-height: 204px;
}

.mfa-qr-img {
  display: block;
  border-radius: 4px;
}

.mfa-qr-loading {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #888;
}

.mfa-secret-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.mfa-secret-wrap {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 22px;
  overflow-x: auto;
}

.mfa-secret-code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
}

.mfa-code-field {
  margin-bottom: 18px;
}

/* ── Phase C: Google OAuth — divider + secondary button ───────────────────── */

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-mid);
}

.login-btn-google {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
}
.login-btn-google:hover:not(:disabled) {
  border-color: var(--border-hi);
  color: var(--text);
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESSION CANON PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Color tokens ──────────────────────────────────────────────────────────── */
:root {
  --prog-accent:      #c060f8;
  --prog-accent-dim:  rgba(192,96,248,0.15);
  --prog-accent-tint: rgba(192,96,248,0.06);
  --prog-border:      rgba(192,96,248,0.25);
  --prog-border-hi:   rgba(192,96,248,0.50);
}
[data-theme="light"] {
  --prog-accent:      #7040ee;
  --prog-accent-dim:  rgba(112,64,238,0.12);
  --prog-accent-tint: rgba(112,64,238,0.05);
  --prog-border:      rgba(112,64,238,0.22);
  --prog-border-hi:   rgba(112,64,238,0.45);
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.prog-header {
  margin-bottom: 32px;
  background: var(--prog-accent-tint);
  border: 1px solid var(--prog-border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
}
.prog-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(192,96,248,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.prog-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
}
.prog-header-icon {
  font-size: 28px;
  color: var(--prog-accent);
  flex-shrink: 0;
  line-height: 1;
  padding-top: 3px;
}
.prog-header-body { flex: 1; min-width: 200px; }

.prog-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.prog-subtitle {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
  max-width: 600px;
}
.prog-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding-top: 4px;
}
.prog-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prog-accent);
  background: var(--prog-accent-dim);
  border: 1px solid var(--prog-border);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}
.prog-tag.prog-tag-dim {
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}

/* ── Section headings ──────────────────────────────────────────────────────── */
.prog-section-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.prog-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.prog-section-hint {
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.55;
}

/* ── Document card grid ────────────────────────────────────────────────────── */
.prog-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .prog-doc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .prog-doc-grid { grid-template-columns: 1fr; }
}
.prog-doc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
  font-family: inherit;
  width: 100%;
}
.prog-doc-card:hover {
  border-color: var(--prog-border);
  box-shadow: 0 0 0 1px var(--prog-border), var(--shadow-md);
}
.prog-doc-card.prog-card-active {
  border-color: var(--prog-accent);
  box-shadow: 0 0 0 1px var(--prog-accent), var(--shadow-md);
  background: var(--prog-accent-tint);
}
.prog-doc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
.prog-doc-seq {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
}
.prog-doc-icon {
  font-size: 16px;
  color: var(--prog-accent);
}
.prog-doc-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.prog-doc-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 9px;
}
.prog-doc-preview {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ── Detail panel ──────────────────────────────────────────────────────────── */
.prog-detail-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.38s ease, opacity 0.25s ease, margin 0.25s ease;
  margin-bottom: 0;
}
.prog-detail-panel.prog-detail-open {
  max-height: 700px;
  opacity: 1;
  margin-top: 12px;
  margin-bottom: 32px;
}
.prog-detail-inner {
  background: var(--card-bg);
  border: 1px solid var(--prog-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
.prog-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.prog-detail-icon {
  font-size: 22px;
  color: var(--prog-accent);
  flex-shrink: 0;
}
.prog-detail-head-text { flex: 1; }
.prog-detail-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.prog-detail-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.prog-detail-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--ease), color var(--ease);
}
.prog-detail-close:hover {
  border-color: var(--border-mid);
  color: var(--text);
}
.prog-detail-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0 0 20px;
}
.prog-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .prog-detail-cols { grid-template-columns: 1fr; }
}
.prog-detail-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.prog-detail-block-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--prog-accent);
  margin-bottom: 6px;
}
.prog-detail-block p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}
.prog-detail-highlights-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.prog-detail-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prog-detail-highlights li {
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.prog-detail-highlights li::before {
  content: '◆';
  position: absolute;
  left: 0;
  font-size: 7px;
  top: 4px;
  color: var(--prog-accent);
}

/* ── Lower two-column grid ─────────────────────────────────────────────────── */
.prog-lower-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
@media (max-width: 820px) {
  .prog-lower-grid { grid-template-columns: 1fr; }
}

/* Canon layout: Build Phases + Reading Order side-by-side */
.prog-lower-grid-3col {
  grid-template-columns: 3fr 2fr;
}
@media (max-width: 820px) {
  .prog-lower-grid-3col { grid-template-columns: 1fr; }
}

/* ── Panels ────────────────────────────────────────────────────────────────── */
.prog-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.prog-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}
.prog-panel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.prog-panel-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.45;
}

/* ── Reading order ─────────────────────────────────────────────────────────── */
.prog-reading-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prog-reading-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--ease);
}
.prog-reading-item:hover { background: var(--prog-accent-tint); }
.prog-reading-seq {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--prog-accent);
  flex-shrink: 0;
  width: 18px;
  text-align: right;
  padding-top: 1px;
}
.prog-reading-body { flex: 1; }
.prog-reading-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.prog-reading-why {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Build phases ──────────────────────────────────────────────────────────── */
.prog-phase-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prog-phase-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.prog-phase-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--prog-accent-dim);
  border: 1px solid var(--prog-border);
  color: var(--prog-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prog-phase-body { flex: 1; }
.prog-phase-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.prog-phase-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.prog-phase-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 6px;
}
.prog-status-pending {
  color: var(--muted);
  background: rgba(90,104,152,0.12);
  border: 1px solid rgba(90,104,152,0.20);
}
.prog-status-active {
  color: var(--sev-4);
  background: rgba(62,200,128,0.10);
  border: 1px solid rgba(62,200,128,0.25);
}
.prog-status-complete {
  color: var(--prog-accent);
  background: var(--prog-accent-dim);
  border: 1px solid var(--prog-border);
}
.prog-phase-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prog-phase-items li {
  font-size: 11px;
  color: var(--text-dim);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.prog-phase-items li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--muted);
}

/* ── Architecture table panel ─────────────────────────────────────────────── */
.prog-arch-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.prog-arch-section-label + .prog-arch-section-label,
.prog-arch-table + .prog-arch-section-label {
  margin-top: 20px;
}
.prog-arch-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}
.prog-arch-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 400;
  padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--border-low);
  letter-spacing: 0.04em;
}
.prog-arch-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border-low);
  vertical-align: top;
}
.prog-arch-table tr:last-child td { border-bottom: none; }
.prog-arch-th-num,
.prog-arch-num  { width: 20px; color: var(--muted); }
.prog-arch-th-done,
.prog-arch-done { text-align: right; padding-right: 14px !important; color: var(--muted); white-space: nowrap; }
.prog-arch-phase-name { color: var(--text-dim); }
.prog-arch-layer   { color: var(--text); white-space: nowrap; font-size: 11px; padding-right: 12px !important; }
.prog-arch-systems { font-size: 11px; color: var(--muted); }
.prog-arch-classes { font-size: 11px; color: var(--accent); white-space: nowrap; text-align: right; }

/* ── Guardrail / Laws panel ────────────────────────────────────────────────── */
.prog-guardrail {
  background: rgba(255,60,60,0.04);
  border: 1px solid rgba(255,80,80,0.18);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: var(--gap);
}
[data-theme="light"] .prog-guardrail {
  background: rgba(200,40,40,0.03);
  border-color: rgba(200,40,40,0.14);
}
.prog-guardrail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.prog-guardrail-icon {
  font-size: 17px;
  color: #ff6060;
  flex-shrink: 0;
  padding-top: 2px;
}
.prog-guardrail-title-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prog-guardrail-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.prog-guardrail-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.prog-laws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}
.prog-law-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.prog-law-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #ff6060;
  background: rgba(255,80,80,0.10);
  border: 1px solid rgba(255,80,80,0.20);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.prog-law-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Detail footer / read button ───────────────────────────────────────────── */
.prog-detail-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.prog-detail-read-btn {
  background: var(--prog-accent-dim);
  border: 1px solid var(--prog-border);
  border-radius: var(--radius);
  color: var(--prog-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.prog-detail-read-btn:hover {
  background: var(--prog-accent);
  border-color: var(--prog-accent);
  color: #fff;
  box-shadow: 0 0 12px rgba(192,96,248,0.3);
}

/* ── Document reader ───────────────────────────────────────────────────────── */
.prog-reader {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}
.prog-reader-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.prog-reader-back {
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--ease), color var(--ease);
}
.prog-reader-back:hover {
  border-color: var(--prog-border);
  color: var(--prog-accent);
}
.prog-reader-doc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.prog-reader-doc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.prog-reader-doc-file {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.prog-reader-body {
  flex: 1;
}

/* ── Markdown body ─────────────────────────────────────────────────────────── */
.prog-md-body {
  max-width: 780px;
  padding-bottom: 48px;
}
.prog-md-h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 32px 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.prog-md-h1:first-child { margin-top: 0; }
.prog-md-h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.prog-md-h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--prog-accent);
  margin: 20px 0 6px;
  letter-spacing: 0.01em;
}
.prog-md-p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 10px;
}
.prog-md-p strong { color: var(--text); }
.prog-md-p em    { color: var(--text-dim); font-style: italic; }
.prog-md-p code  {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--prog-accent);
}
.prog-md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}
.prog-md-ul, .prog-md-ol {
  padding-left: 20px;
  margin: 0 0 12px;
}
.prog-md-ul li, .prog-md-ol li {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 4px;
}
.prog-md-pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 12px 0 16px;
  overflow-x: auto;
}
.prog-md-pre code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.65;
  white-space: pre;
}
.prog-md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 12px;
}
.prog-md-td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: top;
  line-height: 1.5;
}
.prog-md-table tr:first-child .prog-md-td {
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
}

/* ── Founder header on /owner overview ────────────────────────────────────── */
.founder-header {
  display: flex;
  align-items: flex-start;   /* top-align so long messages don't stretch right col */
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.founder-avatar-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent);
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;   /* optical alignment with greeting text cap-height */
}

.founder-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-avatar-initials {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0;
}

.founder-greeting-block {
  flex: 1;
  min-width: 0;
  /* no overflow:hidden — message must grow freely with content */
}

.founder-greeting {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 6px;
}

.founder-message {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
  transition: color 0.3s;
  /* multi-line, unconstrained vertical growth */
  white-space: pre-wrap;       /* preserve intentional line breaks from ARES */
  overflow-wrap: break-word;   /* prevent long URLs / tokens from overflowing */
  word-break: break-word;
}

.founder-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-top: 2px;   /* optical alignment with greeting cap-height */
}

.founder-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.founder-alerts-hint {
  font-size: 0.72rem;
  color: var(--sev-2, #f59e0b);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.founder-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: not-allowed;
  opacity: 0.4;
  padding: 0;
  transition: opacity 0.2s;
}

.founder-voice-waves {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}

.founder-voice-bar {
  display: block;
  width: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
  animation: none;
}

.founder-voice-bar:nth-child(1) { height: 4px; }
.founder-voice-bar:nth-child(2) { height: 8px; }
.founder-voice-bar:nth-child(3) { height: 12px; }
.founder-voice-bar:nth-child(4) { height: 8px; }
.founder-voice-bar:nth-child(5) { height: 4px; }

/* ── Command switcher — placed in founder-right below voice button ─────────── */
.founder-command-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid rgba(0,212,255,0.22);
  border-radius: 6px;
  color: rgba(0,212,255,0.75);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  white-space: nowrap;
}
.founder-command-btn:hover {
  border-color: rgba(0,212,255,0.55);
  color: #40e0ff;
  background: rgba(0,212,255,0.06);
}

@media (max-width: 720px) {
  .founder-header {
    padding: 16px;
    gap: 12px;
    margin-bottom: 16px;
  }
  .founder-avatar-wrap {
    width: 42px;
    height: 42px;
  }
  .founder-greeting {
    font-size: 1rem;
  }
  .founder-right {
    display: none;
  }
}

/* ── Progression strip on /owner overview ─────────────────────────────────── */
.prog-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--prog-accent-tint);
  border: 1px solid var(--prog-border);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.prog-strip-id {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.prog-strip-icon {
  font-size: 13px;
  color: var(--prog-accent);
}
.prog-strip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--prog-accent);
}
.prog-strip-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}
.prog-strip-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.prog-strip-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.prog-strip-stat-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.prog-strip-pending {
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
}
.prog-strip-sep {
  color: var(--border);
  font-size: 14px;
  flex-shrink: 0;
}
.prog-strip-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.prog-strip-notice {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.prog-strip-link {
  background: transparent;
  border: 1px solid var(--prog-border);
  border-radius: var(--radius);
  color: var(--prog-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.prog-strip-link:hover {
  background: var(--prog-accent);
  color: #fff;
  border-color: var(--prog-accent);
}

/* =============================================================================
   Progression Feedback System — XP Toasts + Overlays
   ============================================================================= */

/* ── XP Toast Stack ─────────────────────────────────────────────────────────── */

.xp-toast-stack {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  pointer-events: none;
}

.xp-toast-item {
  background: rgba(12, 5, 24, 0.97);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-left: 3px solid #c084fc;
  border-radius: 6px;
  padding: 10px 16px;
  min-width: 152px;
  backdrop-filter: blur(10px);
  animation: xpSlideIn 0.2s ease forwards;
}

.xp-toast-item.xp-toast-exit {
  animation: xpSlideOut 0.45s ease forwards;
}

.xp-toast-xp {
  font-size: 16px;
  font-weight: 700;
  color: #c084fc;
  letter-spacing: 0.02em;
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
}

.xp-toast-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(196, 132, 252, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

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

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

/* ── Progression Overlays ───────────────────────────────────────────────────── */

.xp-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  pointer-events: none;
  animation: xpOverlayIn 0.28s ease forwards;
}

.xp-overlay.xp-overlay-exit {
  animation: xpOverlayOut 0.5s ease forwards;
}

.xp-overlay-inner {
  text-align: center;
  padding: 30px 44px;
  border-radius: 10px;
}

.xp-overlay-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: var(--font-mono, monospace);
}

.xp-overlay-subtitle {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* Level-up: amber — rarer than a toast, rarer than nothing */
.xp-overlay-levelup .xp-overlay-inner {
  background: rgba(10, 5, 20, 0.97);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-top: 2px solid #fbbf24;
  box-shadow: 0 0 48px rgba(251, 191, 36, 0.1);
}
.xp-overlay-levelup .xp-overlay-title    { color: rgba(251, 191, 36, 0.65); }
.xp-overlay-levelup .xp-overlay-subtitle { color: #fde68a; }

/* Tier ascension: magenta — rare, elevated, feels significant */
.xp-overlay-tier .xp-overlay-inner {
  background: rgba(8, 3, 18, 0.98);
  border: 1px solid rgba(232, 121, 249, 0.4);
  border-top: 2px solid #e879f9;
  box-shadow: 0 0 72px rgba(232, 121, 249, 0.15);
}
.xp-overlay-tier .xp-overlay-title    { color: rgba(232, 121, 249, 0.65); }
.xp-overlay-tier .xp-overlay-subtitle { color: #f0abfc; font-size: 22px; }

/* Session summary: muted purple — informational, not celebratory */
.xp-overlay-summary .xp-overlay-inner {
  background: rgba(10, 5, 20, 0.96);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-top: 2px solid #a855f7;
}
.xp-overlay-summary .xp-overlay-title    { color: rgba(168, 85, 247, 0.65); }
.xp-overlay-summary .xp-overlay-subtitle { color: #d8b4fe; font-size: 20px; }

@keyframes xpOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes xpOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* =============================================================================
   Symbolic Layer — Angel Number Notifications
   Appears inline in the ADI output. Distinct from XP toasts (which are
   floating overlays). Intentionally muted — rare, not attention-seeking.
   ============================================================================= */

.adi-symbolic-event {
  margin: 10px 0 4px;
  padding: 9px 14px;
  background: rgba(20, 10, 50, 0.55);
  border-left: 2px solid rgba(99, 102, 241, 0.35);
  border-radius: 2px;
  animation: symbolicFadeIn 1.4s ease forwards;
}

.adi-symbolic-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.adi-symbolic-glyph {
  font-size: 10px;
  color: rgba(129, 140, 248, 0.7);
  letter-spacing: 3px;
  flex-shrink: 0;
}

.adi-symbolic-label {
  font-size: 14px;
  font-weight: 600;
  color: #a5b4fc;
  letter-spacing: 0.5px;
}

.adi-symbolic-meaning {
  font-size: 11px;
  color: rgba(165, 180, 252, 0.5);
  font-style: italic;
  line-height: 1.5;
}

@keyframes symbolicFadeIn {
  0%   { opacity: 0; transform: translateX(-3px); }
  40%  { opacity: 0; transform: translateX(-3px); }
  100% { opacity: 1; transform: translateX(0);    }
}

/* ── DANNPA state label — prog-strip ──────────────────────────────────────── */
/* Muted, informational only. Not gamified. Consistent with prog-strip context. */

.prog-strip-dannpa {
  font-size:      0.75rem;
  letter-spacing: 0.02em;
  color:          var(--text-muted);
  font-weight:    400;
  opacity:        0.8;
}

/* ── HDGO archetype label — prog-strip ────────────────────────────────────── */
/* Slightly more identity weight than DANNPA — same muted register but        */
/* slightly warmer opacity to reflect that archetype is more stable/defining. */

.prog-strip-hdgo {
  font-size:      0.75rem;
  letter-spacing: 0.02em;
  color:          var(--text-muted);
  font-weight:    400;
  opacity:        0.9;
  font-style:     italic;
}

/* ── Order + Chamber — prog-strip ─────────────────────────────────────────── */
/* Identity tone: slightly warmer than DANNPA/HDGO labels.                    */
/* Order is stable and slow-moving — slightly more weight than Chamber.       */
/* Chamber is developmental — same muted register but a touch lighter.        */

.prog-strip-order {
  font-size:      0.75rem;
  letter-spacing: 0.03em;
  color:          var(--text-muted);
  font-weight:    500;
  opacity:        0.85;
  font-style:     italic;
}

.prog-strip-chamber {
  font-size:      0.75rem;
  letter-spacing: 0.02em;
  color:          var(--text-muted);
  font-weight:    400;
  opacity:        0.75;
  font-style:     italic;
}

/* ── Deploy Backfill ──────────────────────────────────────────────────────── */

.bf-shell {
  max-width:      960px;
  padding:        0 0 48px;
}

.bf-page-header {
  margin-bottom: 24px;
}
.bf-page-title {
  font-size:     1.35rem;
  font-weight:   600;
  color:         var(--text);
  margin:        0 0 6px;
  letter-spacing: -0.01em;
}
.bf-page-sub {
  font-size:    0.85rem;
  color:        var(--text-muted);
  margin:       0;
  line-height:  1.55;
  max-width:    640px;
}

/* Toolbar */
.bf-toolbar {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-bottom: 20px;
}
.bf-fetch-btn {
  padding:       8px 18px;
  background:    var(--magenta);
  color:         #fff;
  border:        none;
  border-radius: var(--radius);
  font-size:     0.85rem;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    opacity 0.15s;
}
.bf-fetch-btn:hover  { opacity: 0.85; }
.bf-fetch-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.bf-toolbar-hint {
  font-size:  0.78rem;
  color:      var(--text-muted);
  line-height: 1.4;
}
.bf-toolbar-hint code {
  font-family: var(--mono);
  font-size:   0.76rem;
  background:  var(--surface3);
  padding:     1px 4px;
  border-radius: 3px;
}

/* Status message */
.bf-status-msg {
  padding:       12px 16px;
  border-radius: var(--radius);
  font-size:     0.83rem;
  line-height:   1.5;
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--text-muted);
  margin-bottom: 16px;
}
.bf-status-err {
  background: rgba(220,60,60,0.08);
  border-color: rgba(220,60,60,0.3);
  color:        var(--sev-2);
}

/* Table controls */
.bf-tbl-controls {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 10px;
}
.bf-ctrl-btn {
  padding:       5px 12px;
  background:    var(--surface3);
  color:         var(--text-dim);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     0.78rem;
  cursor:        pointer;
  transition:    background 0.12s;
}
.bf-ctrl-btn:hover { background: var(--surface3); border-color: var(--border-mid); color: var(--text); }

.bf-cand-count {
  margin-left:  auto;
  font-size:    0.78rem;
  color:        var(--text-muted);
}

/* Load Older */
.bf-load-older-wrap {
  display:        flex;
  justify-content: center;
  padding:        14px 0 4px;
}
.bf-load-older-btn {
  padding:       6px 20px;
  background:    transparent;
  color:         var(--text-dim);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     0.8rem;
  cursor:        pointer;
  transition:    border-color 0.12s, color 0.12s;
}
.bf-load-older-btn:hover    { border-color: var(--border-mid); color: var(--text); }
.bf-load-older-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Repair section */
.bf-repair-section {
  margin-top:    32px;
  padding-top:   24px;
  border-top:    1px solid var(--border);
}
.bf-repair-header {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-bottom:  14px;
}
.bf-repair-title {
  font-size:   0.88rem;
  font-weight: 600;
  color:        var(--text-dim);
}
.bf-repair-desc {
  font-size:  0.78rem;
  color:      var(--text-muted);
  line-height: 1.4;
}
.bf-repair-desc code {
  font-family: var(--mono);
  font-size:   0.75rem;
  background:  var(--surface3);
  padding:     1px 4px;
  border-radius: 3px;
}
.bf-repair-controls {
  display:     flex;
  gap:         8px;
  margin-bottom: 12px;
}
.bf-repair-execute-btn {
  padding:       5px 14px;
  background:    transparent;
  color:         var(--sev-2);
  border:        1px solid rgba(220,60,60,0.35);
  border-radius: var(--radius);
  font-size:     0.78rem;
  cursor:        pointer;
  transition:    border-color 0.12s, background 0.12s;
}
.bf-repair-execute-btn:hover:not(:disabled) {
  background:   rgba(220,60,60,0.08);
  border-color: rgba(220,60,60,0.6);
}
.bf-repair-execute-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.bf-repair-output  { font-size: 0.82rem; }
.bf-repair-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.bf-repair-stat      { color: var(--text-dim); }
.bf-repair-stat-xp   { color: var(--sev-2); }
.bf-repair-rows      { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bf-repair-row {
  display:     flex;
  gap:         16px;
  padding:     4px 0;
  border-bottom: 1px solid var(--border);
  font-size:   0.78rem;
  color:       var(--text-dim);
}
.bf-repair-row-id    { font-family: var(--mono); flex: 0 0 140px; }
.bf-repair-row-ts    { flex: 1; color: var(--text-muted); }
.bf-repair-row-xp    { color: var(--sev-2); white-space: nowrap; }
.bf-repair-note      { font-size: 0.76rem; color: var(--text-muted); margin-top: 6px; }
.bf-repair-msg {
  padding:       10px 14px;
  border-radius: var(--radius);
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--text-dim);
  line-height:   1.5;
}
.bf-repair-err { background: rgba(220,60,60,0.07); border-color: rgba(220,60,60,0.25); color: var(--sev-2); }
.bf-repair-ok  { background: rgba(60,180,80,0.07); border-color: rgba(60,180,80,0.25); color: #4caf6e; }

/* Enrichment section */
.bf-enrich-label {
  font-size:  0.78rem;
  color:      var(--text-muted);
  align-self: center;
}
.bf-enrich-select {
  padding:       4px 8px;
  background:    var(--surface2);
  color:         var(--text-dim);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     0.78rem;
  cursor:        pointer;
}
.bf-enrich-execute-btn {
  padding:       5px 14px;
  background:    transparent;
  color:         #4caf6e;
  border:        1px solid rgba(60,180,80,0.35);
  border-radius: var(--radius);
  font-size:     0.78rem;
  cursor:        pointer;
  transition:    border-color 0.12s, background 0.12s;
}
.bf-enrich-execute-btn:hover:not(:disabled) {
  background:   rgba(60,180,80,0.08);
  border-color: rgba(60,180,80,0.60);
}
.bf-enrich-execute-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.bf-enrich-all-btn {
  padding:       6px 16px;
  background:    var(--magenta);
  color:         #fff;
  border:        none;
  border-radius: var(--radius);
  font-size:     0.83rem;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    opacity 0.15s;
  flex-shrink:   0;
}
.bf-enrich-all-btn:hover:not(:disabled) { opacity: 0.85; }
.bf-enrich-all-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.bf-enrich-progress {
  display:       flex;
  align-items:   center;
  margin-bottom: 10px;
}
.bf-enrich-prog-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         12px;
  align-items: center;
  font-size:   0.82rem;
  padding:     8px 12px;
  background:  var(--surface2);
  border:      1px solid var(--border);
  border-radius: var(--radius);
  width:       100%;
}
.bf-enrich-prog-batch  { color: var(--text-dim); font-style: italic; }
.bf-enrich-prog-done   { color: #4caf6e; font-weight: 600; }
.bf-enrich-prog-batches { color: var(--muted); margin-left: auto; }
.bf-enrich-stat-ok { color: #4caf6e; }
.bf-enrich-item-state {
  font-family:   var(--font-mono);
  font-size:     0.72rem;
  padding:       1px 5px;
  border-radius: 2px;
  white-space:   nowrap;
  flex-shrink:   0;
}
.bf-enrich-state-metadata_recovered  { background: rgba(60,180,80,0.10);   color: #4caf6e;        border: 1px solid rgba(60,180,80,0.25); }
.bf-enrich-state-metadata_partial    { background: rgba(255,140,0,0.10);   color: var(--sev-2);   border: 1px solid rgba(255,140,0,0.25); }
.bf-enrich-state-metadata_unavailable{ background: rgba(90,104,152,0.10); color: var(--muted);   border: 1px solid rgba(90,104,152,0.22); }

/* Candidate table */
.bf-table {
  display:               grid;
  grid-template-columns: 32px 72px 90px 1fr 138px 72px 1fr;
  border:                1px solid var(--border);
  border-radius:         var(--radius);
  overflow:              hidden;
  font-size:             0.8rem;
  margin-bottom:         16px;
}
.bf-thead {
  display:    contents;
}
.bf-thead > span {
  padding:     8px 10px;
  background:  var(--surface2);
  color:       var(--text-muted);
  font-size:   0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.bf-trow {
  display:  contents;
}
.bf-trow > span,
.bf-trow > div {
  padding:    9px 10px;
  border-bottom: 1px solid var(--border);
  display:    flex;
  align-items: center;
  color:      var(--text-dim);
  background: var(--surface);
  word-break: break-all;
  min-width:  0;
}
.bf-trow:last-child > span,
.bf-trow:last-child > div { border-bottom: none; }
.bf-trow:hover > span,
.bf-trow:hover > div      { background: var(--surface2); }
.bf-trow-skip > span,
.bf-trow-skip > div       { opacity: 0.45; }

.bf-cell-chk  { justify-content: center; }
.bf-cell-id,
.bf-cell-sha  { font-family: var(--mono); font-size: 0.75rem; }
.bf-cell-ts   { white-space: nowrap; }
.bf-col-msg   { color: var(--text-dim); }

.bf-row-note {
  grid-column:   1 / -1;
  font-size:     0.75rem;
  line-height:   1.45;
  padding:       6px 10px 8px 36px;
  border-bottom: 1px solid var(--border);
}
.bf-row-note-review {
  background:  rgba(220,180,0,0.06);
  color:       var(--sev-3);
  border-left: 3px solid var(--sev-3);
}
.bf-row-note-skip {
  background:  var(--surface2);
  color:       var(--text-muted);
}

/* Badges */
.bf-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 7px;
  border-radius: 9999px;
  font-size:     0.7rem;
  font-weight:   600;
  letter-spacing: 0.03em;
  border:        1px solid transparent;
}
.bf-badge-safe   { color: var(--sev-4); border-color: var(--sev-4); }
.bf-badge-review { color: var(--sev-3); border-color: var(--sev-3); }
.bf-badge-skip   { color: var(--text-muted); border-color: var(--border); }

/* Outcome pills */
.bf-pill {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 7px;
  border-radius: var(--radius);
  font-size:     0.7rem;
  font-weight:   600;
}
.bf-pill-ok   { background: rgba(0,200,100,0.12); color: var(--sev-4); }
.bf-pill-fail { background: rgba(220,60,60,0.12);  color: var(--sev-1); }

/* Batch bar */
.bf-batch-bar {
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  padding:       14px 16px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.bf-batch-summary {
  flex:        1;
  display:     flex;
  flex-direction: column;
  gap:         6px;
}
.bf-sel-label {
  font-size:   0.83rem;
  color:       var(--text-dim);
  font-weight: 500;
}
.bf-decay-warn {
  font-size:   0.78rem;
  color:       var(--sev-3);
  line-height: 1.45;
}
.bf-run-btn {
  padding:       9px 22px;
  background:    var(--magenta);
  color:         #fff;
  border:        none;
  border-radius: var(--radius);
  font-size:     0.85rem;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    opacity 0.15s;
  flex-shrink:   0;
}
.bf-run-btn:hover    { opacity: 0.85; }
.bf-run-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Results panel */
.bf-results {
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}
.bf-results-header {
  padding:     12px 16px;
  font-size:   0.83rem;
  font-weight: 600;
  color:       var(--text);
  background:  var(--surface2);
  border-bottom: 1px solid var(--border);
}
.bf-results-stats {
  display:   flex;
  gap:       24px;
  padding:   16px;
  border-bottom: 1px solid var(--border);
}
.bf-rstat {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            2px;
}
.bf-rstat-num {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--text-dim);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bf-rstat-ok  { color: var(--sev-4); }
.bf-rstat-err { color: var(--sev-1); }
.bf-rstat-xp  { color: var(--magenta); }
.bf-rstat-label {
  font-size:   0.72rem;
  color:       var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bf-results-items {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bf-ri {
  display:       grid;
  grid-template-columns: 80px 140px 1fr;
  gap:           8px;
  align-items:   center;
  font-size:     0.78rem;
  padding:       5px 8px;
  border-radius: 3px;
  background:    var(--surface);
}
.bf-ri-imported { background: rgba(0,200,100,0.06); }
.bf-ri-error    { background: rgba(220,60,60,0.06); }

.bf-ri-status {
  font-weight: 600;
  font-size:   0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:       var(--text-muted);
}
.bf-ri-imported .bf-ri-status { color: var(--sev-4); }
.bf-ri-error    .bf-ri-status { color: var(--sev-1); }

.bf-ri-id {
  font-family: var(--mono);
  font-size:   0.73rem;
  color:       var(--text-muted);
}
.bf-ri-detail {
  color:       var(--text-dim);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.bf-results-err {
  padding:   16px;
  font-size: 0.83rem;
  color:     var(--sev-1);
}
.bf-results-note {
  padding:    0 16px 14px;
  font-size:  0.78rem;
  color:      var(--text-muted);
  margin:     0;
}

/* ── Backfill by Day section ─────────────────────────────────────────── */

.bf-day-section {
  margin-top:  36px;
  border-top:  1px solid var(--border);
  padding-top: 28px;
}

.bf-day-section-header { margin-bottom: 20px; }

.bf-day-section-title {
  display:       block;
  font-size:     0.95rem;
  font-weight:   600;
  color:         var(--text);
  margin-bottom: 5px;
}

.bf-day-section-hint {
  display:    block;
  font-size:  0.78rem;
  color:      var(--text-muted);
  line-height: 1.5;
  max-width:  600px;
}

/* Day cards */
.bf-day-groups {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  20px;
}

.bf-day-card {
  border:        1px solid var(--border);
  border-radius: 6px;
  background:    var(--surface2);
  overflow:      hidden;
}

.bf-day-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding:         10px 14px;
  border-bottom:   1px solid var(--border);
  flex-wrap:       wrap;
}

.bf-day-card-date {
  font-family: var(--mono);
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--text);
}

.bf-day-card-counts {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}

.bf-day-count {
  font-size:     0.72rem;
  font-weight:   500;
  padding:       2px 8px;
  border-radius: 3px;
  background:    var(--surface3);
  color:         var(--text-muted);
  border:        1px solid var(--border);
}

.bf-day-count-safe   { color: var(--sev-4); border-color: var(--sev-4); background: rgba(62,200,128,0.07); }
.bf-day-count-review { color: var(--sev-3); border-color: var(--sev-3); background: rgba(236,192,0,0.07);  }
.bf-day-count-skip   { color: var(--text-muted); }

.bf-day-batch-info {
  padding:       6px 14px;
  font-size:     0.76rem;
  color:         var(--sev-3);
  background:    rgba(236,192,0,0.05);
  border-bottom: 1px solid rgba(236,192,0,0.12);
}

.bf-day-batch-ok {
  padding:       6px 14px;
  font-size:     0.74rem;
  color:         var(--sev-4);
  border-bottom: 1px solid var(--border);
}

.bf-day-review-warn {
  padding:       6px 14px;
  font-size:     0.75rem;
  color:         var(--sev-2);
  background:    rgba(220,100,0,0.05);
  border-bottom: 1px solid rgba(220,100,0,0.12);
}

.bf-day-card-actions {
  display:   flex;
  gap:       8px;
  padding:   10px 14px;
  flex-wrap: wrap;
}

.bf-day-card-result {
  padding:    8px 14px;
  font-size:  0.79rem;
  border-top: 1px solid var(--border);
}

/* Global bar */
.bf-day-global-bar {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 16px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 16px;
  flex-wrap:     wrap;
}

.bf-day-global-btn {
  padding:       8px 18px;
  background:    var(--magenta);
  color:         #fff;
  border:        none;
  border-radius: 5px;
  font-size:     0.83rem;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    opacity 0.15s;
  flex-shrink:   0;
}
.bf-day-global-btn:hover    { opacity: 0.85; }
.bf-day-global-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.bf-day-global-hint {
  font-size:   0.77rem;
  color:       var(--text-muted);
  line-height: 1.4;
}

/* Preview panel */
.bf-day-preview {
  border:        1px solid var(--border-mid);
  border-radius: 6px;
  background:    var(--surface2);
  margin-bottom: 16px;
  overflow:      hidden;
}

.bf-day-preview-header {
  padding:       10px 16px;
  font-size:     0.84rem;
  font-weight:   600;
  color:         var(--text);
  background:    var(--surface3);
  border-bottom: 1px solid var(--border);
}

.bf-day-preview-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bf-day-preview-row {
  display:     flex;
  gap:         12px;
  font-size:   0.81rem;
  align-items: baseline;
}

.bf-day-preview-label {
  color:      var(--text-muted);
  min-width:  120px;
  flex-shrink: 0;
}

.bf-day-preview-val {
  color:       var(--text-dim);
  font-weight: 600;
  font-family: var(--mono);
  font-size:   0.78rem;
}

.bf-day-preview-warn {
  margin-top:    8px;
  padding:       8px 10px;
  font-size:     0.77rem;
  color:         var(--sev-2);
  background:    rgba(220,100,0,0.06);
  border:        1px solid rgba(220,100,0,0.18);
  border-radius: 4px;
}

.bf-day-preview-actions {
  display:    flex;
  gap:        10px;
  padding:    12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface3);
}

/* Day run results panel */
.bf-day-run-results {
  border:        1px solid var(--border);
  border-radius: 6px;
  overflow:      hidden;
  margin-bottom: 16px;
}

.bf-day-run-header {
  padding:       10px 16px;
  font-size:     0.83rem;
  font-weight:   600;
  color:         var(--text);
  background:    var(--surface2);
  border-bottom: 1px solid var(--border);
}

.bf-day-run-errors { padding: 4px 16px 10px; }

/* Mobile */
@media (max-width: 720px) {
  .bf-table {
    grid-template-columns: 28px 64px 80px 1fr 110px 0 0;
  }
  .bf-thead > span:nth-child(6),
  .bf-thead > span:nth-child(7),
  .bf-cell-sha,
  .bf-col-msg { display: none; }

  .bf-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bf-batch-bar { flex-direction: column; }
  .bf-results-stats { flex-wrap: wrap; gap: 16px; }
  .bf-ri { grid-template-columns: 72px 1fr; }
  .bf-ri-id { display: none; }
}

/* ── Internal docs panel ─────────────────────────────────────────────────────── */

.ov-internal-panel {
  margin-top: 16px;
}

.ov-internal-grid {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.ov-internal-card {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         14px 16px;
  background:      var(--surface2);
  border:          1px solid var(--border);
  border-radius:   var(--radius);
  transition:      border-color var(--ease);
}

.ov-internal-card:hover {
  border-color: var(--border-mid);
}

.ov-internal-card-body {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.ov-internal-card-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
}

.ov-internal-card-sub {
  font-size: 12px;
  color:     var(--muted);
}

.ov-internal-view-btn {
  background:    none;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--muted);
  font-size:     12px;
  font-family:   var(--font-mono);
  padding:       5px 10px;
  cursor:        pointer;
  white-space:   nowrap;
  flex-shrink:   0;
  transition:    color var(--ease), border-color var(--ease);
}

.ov-internal-view-btn:hover {
  color:        var(--text);
  border-color: var(--border-mid);
}

/* ── Classification Layer ────────────────────────────────────────────────────── */

/* History table: 8-column grid with detail + classification columns */
.ov-hist-thead,
.ov-hist-row {
  grid-template-columns: 100px 90px 1fr 54px 56px 66px 74px auto;
}

.ov-hist-col-cls    { font-size: 0.7rem; }
.ov-hist-cell-cls   { font-size: 0.7rem; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; }
.ov-hist-cls-none   { color: var(--text-muted); }

/* Classification badges */
.cls-badge {
  display:       inline-block;
  padding:       2px 6px;
  border-radius: 3px;
  font-size:     0.67rem;
  font-weight:   600;
  font-family:   var(--font-mono);
  letter-spacing: 0.02em;
  white-space:   nowrap;
}
.cls-badge-test                { background: var(--surface3);   color: var(--text-muted); border: 1px solid var(--border); }
.cls-badge-bugfix               { background: rgba(217,119,6,.12);  color: #d97706; border: 1px solid rgba(217,119,6,.3); }
.cls-badge-ui_refinement        { background: rgba(139,92,246,.12); color: #8b5cf6; border: 1px solid rgba(139,92,246,.3); }
.cls-badge-infrastructure       { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }
.cls-badge-feature_shipment     { background: rgba(34,197,94,.12);  color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.cls-badge-milestone_completion { background: rgba(234,179,8,.15);  color: #ca8a04; border: 1px solid rgba(234,179,8,.3); }
.cls-badge-design_polish        { background: rgba(139,92,246,.12); color: #8b5cf6; border: 1px solid rgba(139,92,246,.3); }
.cls-badge-refactor             { background: rgba(20,184,166,.12); color: #14b8a6; border: 1px solid rgba(20,184,166,.3); }
.cls-badge-needs_review         { background: var(--surface2);      color: var(--text-dim); border: 1px solid var(--border-mid); }
.cls-badge-acknowledged         { background: var(--surface2);      color: var(--text-dim); border: 1px dashed var(--border-mid); }

/* Environment badge — shown for non-production deploys in the classification feed */
.cls-env-badge {
  display:       inline-block;
  font-size:     0.65rem;
  font-weight:   600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding:       1px 5px;
  border-radius: 3px;
  margin-right:  6px;
  vertical-align: middle;
}
.cls-env-badge--preview     { background: rgba(99,102,241,.12); color: #818cf8; border: 1px solid rgba(99,102,241,.28); }
.cls-env-badge--development { background: rgba(75,85,99,.12);   color: #9ca3af; border: 1px solid rgba(75,85,99,.28); }

/* Classify button in table row */
.cls-tag-btn {
  background:    none;
  border:        1px dashed var(--border);
  border-radius: 3px;
  color:         var(--text-muted);
  font-size:     0.68rem;
  font-family:   var(--font-mono);
  padding:       2px 6px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    color var(--ease), border-color var(--ease);
}
.cls-tag-btn:hover {
  color:        var(--text);
  border-color: var(--border-mid);
  border-style: solid;
}

/* Edit button — confirmed classification rows in the deploy feed */
.cls-edit-confirmed-btn {
  background:    none;
  border:        1px solid var(--border);
  border-radius: 3px;
  color:         var(--text-muted);
  font-size:     11px;
  padding:       2px 7px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    color var(--ease), border-color var(--ease);
}
.cls-edit-confirmed-btn:hover { color: var(--text); border-color: var(--border-mid); }

/* Classify + Milestone modals */
.cls-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.55);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         9000;
  padding:         16px;
}

.cls-modal {
  background:    var(--panel-bg);
  border:        1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  width:         100%;
  max-width:     420px;
  max-height:    90vh;
  overflow-y:    auto;
}

.cls-modal-lg { max-width: 520px; }

.cls-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px 10px;
  border-bottom:   1px solid var(--border);
}

.cls-modal-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
}

.cls-modal-close {
  background:  none;
  border:      none;
  color:       var(--text-muted);
  font-size:   16px;
  cursor:      pointer;
  padding:     0 2px;
  line-height: 1;
  transition:  color var(--ease);
}
.cls-modal-close:hover { color: var(--text); }

.cls-modal-body { padding: 16px 18px; }

.cls-deploy-id {
  font-family:   var(--font-mono);
  font-size:     11px;
  color:         var(--text-muted);
  margin-bottom: 6px;
}

.cls-commit-msg {
  font-size:     13px;
  color:         var(--text);
  font-weight:   500;
  margin-bottom: 12px;
  line-height:   1.4;
  word-break:    break-word;
}

.cls-hint {
  font-size:     12px;
  color:         var(--text-dim);
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       7px 10px;
  margin-bottom: 12px;
}
.cls-hint strong { color: var(--text); }

.cls-auto-commit-msg {
  font-size:     13px;
  color:         var(--text-dim);
  padding:       16px 0 8px;
  text-align:    center;
}
.cls-auto-commit-msg strong { color: var(--text); }

.cls-options {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  14px;
}

.cls-option {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
}

.cls-option input[type="radio"] { accent-color: var(--accent); cursor: pointer; }

.cls-option-label {
  font-size: 13px;
  color:     var(--text);
  cursor:    pointer;
}

.cls-note-row   { margin-bottom: 14px; }

.cls-note-input {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text);
  font-size:     12px;
  padding:       7px 10px;
  box-sizing:    border-box;
  transition:    border-color var(--ease);
}
.cls-note-input:focus {
  outline:      none;
  border-color: var(--accent);
}

.cls-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
  padding-top:     4px;
}

.cls-cancel-btn {
  background:    none;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-muted);
  font-size:     12px;
  padding:       6px 14px;
  cursor:        pointer;
  transition:    color var(--ease), border-color var(--ease);
}
.cls-cancel-btn:hover { color: var(--text); border-color: var(--border-mid); }

.cls-confirm-btn {
  background:    var(--magenta);
  border:        1px solid var(--magenta);
  border-radius: var(--radius);
  color:         #fff;
  font-size:     12px;
  font-weight:   600;
  padding:       6px 16px;
  cursor:        pointer;
  transition:    opacity var(--ease);
}
.cls-confirm-btn:hover:not(:disabled) { opacity: 0.85; }
.cls-confirm-btn:disabled             { opacity: 0.45; cursor: not-allowed; }

.cls-revert-btn {
  background:    transparent;
  border:        1px solid var(--border-mid);
  border-radius: var(--radius);
  color:         var(--muted);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       6px 12px;
  cursor:        pointer;
  margin-right:  auto;
  transition:    color var(--ease), border-color var(--ease);
}
.cls-revert-btn:hover { color: var(--text-dim); border-color: var(--border-hi); }

/* Milestone modal extra fields */
.cls-field        { margin-bottom: 14px; }
.cls-label        { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.cls-req          { color: var(--danger); }
.cls-input        { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; padding: 8px 10px; box-sizing: border-box; transition: border-color var(--ease); }
.cls-input:focus  { outline: none; border-color: var(--accent); }
.cls-textarea     { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12px; font-family: var(--font-mono); padding: 8px 10px; box-sizing: border-box; resize: vertical; transition: border-color var(--ease); }
.cls-textarea:focus { outline: none; border-color: var(--accent); }
.cls-field-hint   { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Milestone panel */
.ov-milestone-panel { margin-top: 16px; }

.ov-milestone-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.ov-ms-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 12px;
  background:      var(--surface2);
  border:          1px solid var(--border);
  border-radius:   var(--radius);
}

.ov-ms-main {
  display:     flex;
  align-items: center;
  gap:         8px;
  min-width:   0;
  flex:        1;
}

.ov-ms-status {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        2px 5px;
  border-radius:  3px;
  flex-shrink:    0;
}
.ov-ms-draft     { background: var(--surface3); color: var(--text-muted); border: 1px solid var(--border); }
.ov-ms-confirmed { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }

.ov-ms-title {
  font-size:     13px;
  font-weight:   500;
  color:         var(--text);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.ov-ms-meta {
  font-size:  11px;
  color:      var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.ov-ms-confirm-btn {
  background:    none;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-muted);
  font-size:     12px;
  font-family:   var(--font-mono);
  padding:       4px 10px;
  cursor:        pointer;
  white-space:   nowrap;
  flex-shrink:   0;
  transition:    color var(--ease), border-color var(--ease);
}
.ov-ms-confirm-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-mid); }
.ov-ms-confirm-btn:disabled             { opacity: 0.45; cursor: not-allowed; }

.ov-ms-confirmed-ts {
  font-size:  11px;
  color:      var(--text-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .ov-hist-thead,
  .ov-hist-row {
    grid-template-columns: 72px 80px 1fr 48px 0 0 0 80px;
  }
  .ov-hist-thead > span:nth-child(5),
  .ov-hist-thead > span:nth-child(6),
  .ov-hist-thead > span:nth-child(7),
  .ov-hist-row   > span:nth-child(5),
  .ov-hist-row   > span:nth-child(6),
  .ov-hist-row   > span:nth-child(7) { display: none; }
}

/* ── Milestone Valuation Layer ──────────────────────────────────────────── */

/* Band badges on milestone rows */
.ov-ms-band-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 6px;
  vertical-align: middle;
}
.ov-ms-band-minor        { background: rgba(156,163,175,0.12); color: #9ca3af; }
.ov-ms-band-substantial  { background: rgba(96,165,250,0.12);  color: #60a5fa; }
.ov-ms-band-major        { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.ov-ms-band-foundational { background: rgba(52,211,153,0.12);  color: #34d399; }
.ov-ms-band-breakthrough { background: rgba(192,132,252,0.12); color: #c084fc; }

/* Request / View assessment buttons on milestone rows */
.ov-ms-val-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 12px;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  white-space: nowrap;
}
.ov-ms-val-btn:hover   { border-color: var(--border-hi); color: var(--text); }
.ov-ms-val-evaluate    { border-style: dashed; }
.ov-ms-val-evaluate:hover { background: rgba(99,102,241,0.06); border-color: #6366f1; color: #a5b4fc; border-style: solid; }
.ov-ms-val-review      { border-color: rgba(99,102,241,0.4); color: #a5b4fc; }
.ov-ms-val-review:hover { background: rgba(99,102,241,0.08); border-color: #6366f1; color: #c7d2fe; }

/* ARES Assessment modal */
.val-modal { max-width: 560px; }

.val-modal-header {
  align-items: flex-start !important;
}
.val-modal-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.val-modal-subtitle {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Body content below the band strip — provides consistent side padding */
.val-modal-body {
  padding: 16px 18px 18px;
}

/* Band strip — full-width, left-border accent identifies the band */
.val-band-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
}
.val-band-minor        { border-left-color: #9ca3af; }
.val-band-substantial  { border-left-color: #60a5fa; }
.val-band-major        { border-left-color: #fbbf24; }
.val-band-foundational { border-left-color: #34d399; }
.val-band-breakthrough { border-left-color: #c084fc; }

.val-band-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.val-band-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.val-band-label {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.val-band-minor        .val-band-label { color: #9ca3af; }
.val-band-substantial  .val-band-label { color: #60a5fa; }
.val-band-major        .val-band-label { color: #d97706; }
.val-band-foundational .val-band-label { color: #059669; }
.val-band-breakthrough .val-band-label { color: #7c3aed; }

.val-band-tier-desc {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.val-band-xp {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.val-band-score {
  font-size: 11px;
  color: var(--text-dim);
}

/* Rationale block */
.val-rationale {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.val-rationale-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Score rows */
.val-scores { margin-bottom: 16px; }

.val-score-row {
  display: grid;
  grid-template-columns: 130px 90px 32px 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.val-score-row:last-child { border-bottom: none; }

.val-score-dim  { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.val-score-num  { font-size: 11px; color: var(--text-dim); text-align: right; }
.val-score-desc { font-size: 11px; color: var(--text-dim); }

.val-score-pips { display: flex; gap: 4px; }
.val-pip {
  width: 13px; height: 13px;
  border-radius: 3px;
  background: var(--surface3);
  border: 1px solid var(--border-mid);
}
.val-pip-on { background: #4f46e5; border-color: #6366f1; }

/* Award + action area */
.val-confirm-area { margin-top: 4px; }

.val-award-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(99,102,241,0.6);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.val-award-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.val-award-xp {
  font-size: 22px;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: -0.01em;
  flex: 1;
}
.val-award-note {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
  max-width: 160px;
  text-align: right;
  line-height: 1.4;
}

/* Confirmed state */
.val-confirmed-state {
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(52,211,153,0.5);
  border-radius: var(--radius);
}
.val-confirmed-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.val-confirmed-note {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* ── Milestone Candidates Panel ─────────────────────────────────────────── */

.ov-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 4px 0;
}

/* Candidate card */
.cand-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color var(--ease);
}
.cand-card:hover { border-color: var(--border-mid); }

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

/* Confidence badges */
.cand-conf-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 8px;
}
.cand-conf-high   { background: rgba(74,222,128,0.12);   color: #4ade80; }
.cand-conf-medium { background: rgba(96,165,250,0.12);   color: #60a5fa; }
.cand-conf-low    { background: rgba(251,191,36,0.12);   color: #fbbf24; }

/* Detection type badge */
.cand-type-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.cand-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cand-desc {
  font-size: 12px;
  margin-bottom: 4px;
}
.cand-rationale {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Deploy pills */
.cand-deploys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cand-deploy-pill {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--surface3);
  color: var(--text-dim);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-mid);
}

/* Candidate action buttons */
.cand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cand-dismiss-btn {
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 12px;
  transition: border-color var(--ease), color var(--ease);
}
.cand-dismiss-btn:hover { border-color: var(--border-mid); color: var(--text-dim); }
.cand-dismiss-btn:disabled { opacity: 0.4; cursor: default; }

.cand-edit-btn {
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 12px;
  transition: border-color var(--ease), color var(--ease);
}
.cand-edit-btn:hover { border-color: var(--border-hi); color: var(--magenta); }
.cand-edit-btn:disabled { opacity: 0.4; cursor: default; }

.cand-accept-btn {
  background: rgba(180,80,255,0.10);
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  color: var(--magenta);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  margin-left: auto;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.cand-accept-btn:hover { background: rgba(180,80,255,0.18); border-color: var(--magenta); color: var(--text); }
.cand-accept-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Auto-Classification Layer ──────────────────────────────────────────── */

/* Auto-classified badge: colored badge with subtle "auto" indicator */
.cls-badge-auto {
  cursor: pointer;
  position: relative;
}
.cls-badge-auto:hover { opacity: 0.85; }

.cls-auto-dot {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.65;
  margin-left: 5px;
  vertical-align: middle;
}

/* Suggested classification button (medium confidence — awaiting operator confirm) */
.cls-suggest-btn {
  background: var(--surface);
  border: 1px dashed var(--border-mid);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  white-space: nowrap;
}
.cls-suggest-btn:hover {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: var(--magenta);
}

.cls-confirm-quick-btn {
  background: #39ff14;
  border: none;
  border-radius: 8px;
  color: #0a0a0a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 5px;
  padding: 2px 9px;
  text-transform: uppercase;
  transition: opacity var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}
.cls-confirm-quick-btn:hover:not(:disabled) {
  box-shadow: 0 0 8px #39ff1480;
  opacity: 0.9;
}
.cls-confirm-quick-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cls-unknown-prefix {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.02em;
  margin-left: 6px;
  opacity: 0.75;
  white-space: nowrap;
}
.cls-unknown-prefix code {
  background: var(--surface2);
  border-radius: 3px;
  color: #f0a040;
  font-size: 10px;
  padding: 1px 4px;
}

.cls-map-prefix-btn {
  background: transparent;
  border: 1px solid #f0a040;
  border-radius: 8px;
  color: #f0a040;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 5px;
  padding: 2px 8px;
  text-transform: uppercase;
  transition: background var(--ease), opacity var(--ease);
  white-space: nowrap;
}
.cls-map-prefix-btn:hover { background: rgba(240, 160, 64, 0.12); }

.cls-map-prefix-desc {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.cls-map-prefix-desc code {
  background: var(--surface2);
  border-radius: 3px;
  color: #f0a040;
  font-size: 12px;
  padding: 1px 5px;
}

/* ── Deploy Classification Feed Panel ───────────────────────────────────── */

.ov-cls-feed-panel {
  margin-top: 0;
}

/* Filter tabs in panel header */
.ov-cls-feed-tabs,
.di-feed-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.di-tab {
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.di-tab:hover {
  background: var(--surface2);
  border-color: var(--border-mid);
  color: var(--text);
}
.di-tab.di-tab-active {
  background: rgba(180,80,255,0.10);
  border-color: var(--border-hi);
  color: var(--magenta);
}

/* Feed container */
.ov-cls-feed {
  max-height: 360px;
  overflow-y: auto;
}

/* Column header row */
.cls-feed-thead {
  display: grid;
  grid-template-columns: 140px 1fr 100px 150px 60px 55px;
  gap: 0 8px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
}

/* Data row */
.cls-feed-row {
  display: grid;
  grid-template-columns: 140px 1fr 100px 150px 60px 55px;
  gap: 0 8px;
  align-items: start;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  transition: background var(--ease);
}
.cls-feed-row:hover { background: var(--surface2); }
.cls-feed-row:last-child { border-bottom: none; }

.cls-feed-id {
  color: #6b7280;
  font-family: 'Fira Code', 'Roboto Mono', monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cls-feed-ts {
  color: #4b5563;
  font-size: 11px;
  white-space: nowrap;
}

.cls-feed-state {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Confidence badge */
.cls-feed-conf {
  color: #4b5563;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.cls-feed-conf-high   { color: #34d399; }
.cls-feed-conf-medium { color: #fbbf24; }
.cls-feed-conf-low    { color: #ef4444; }

.cls-feed-by {
  color: #4b5563;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.cls-feed-title {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 0;
  word-break: break-word;
  line-height: 1.4;
}

.cls-commit-list {
  display: block;
  margin-top: 4px;
}
.cls-commit-item {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  margin-top: 2px;
}

.cls-feed-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 10px;
  opacity: 0.6;
  transition: opacity var(--ease);
  margin-left: 4px;
}
.cls-feed-link:hover { opacity: 1; color: var(--accent); }

@media (max-width: 720px) {
  .cls-feed-thead,
  .cls-feed-row {
    grid-template-columns: 100px 1fr 0 1fr 0 0;
  }
  .cls-feed-thead > span:nth-child(3),
  .cls-feed-thead > span:nth-child(5),
  .cls-feed-thead > span:nth-child(6),
  .cls-feed-row   > span:nth-child(3),
  .cls-feed-row   > span:nth-child(5),
  .cls-feed-row   > span:nth-child(6) { display: none; }
}

/* =============================================================================
   Attention Rail — /owner overview
   ============================================================================= */

/* ── Attention Rail panel ───────────────────────────────────────────────── */
.ov-attention-rail {
  margin-top: 4px;
}

.ov-rail-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Rail card ──────────────────────────────────────────────────────────── */
.ov-rail-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--ease), transform var(--ease);
}
.ov-rail-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Priority left-border accent */
.ov-rail-high   { border-left: 3px solid var(--sev-1); }
.ov-rail-medium { border-left: 3px solid var(--sev-2); }
.ov-rail-low    { border-left: 3px solid var(--sev-3); }

.ov-rail-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.ov-rail-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ov-rail-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-rail-hint {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-rail-btn {
  background: none;
  border: 1px solid var(--border-mid);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--ease), border-color var(--ease);
}
.ov-rail-btn:hover {
  color: var(--magenta);
  border-color: var(--border-hi);
  background: rgba(180,80,255,0.06);
}

.ov-rail-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0;
}

/* ── ov-panel-sub (subtitle next to panel title) ────────────────────────── */
.ov-panel-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}

/* =============================================================================
   Deploy Intelligence — /owner/deploys
   ============================================================================= */

/* ── Stats bar ──────────────────────────────────────────────────────────── */
.di-stats-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.di-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 100px;
  gap: 5px;
  flex: 1;
  transition: border-color var(--ease);
}
.di-stat:hover { border-color: var(--border-mid); }

.di-stat-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.di-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.di-stat-warn .di-stat-value { color: var(--sev-2); }

/* ── Work queue ─────────────────────────────────────────────────────────── */
.di-queue-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.di-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--ease);
}
.di-queue-item:hover { border-color: var(--border-mid); }

.di-queue-high   { border-left: 3px solid var(--sev-1); }
.di-queue-medium { border-left: 3px solid var(--sev-2); }
.di-queue-low    { border-left: 3px solid var(--sev-3); }

.di-queue-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.di-queue-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.di-queue-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.di-queue-hint {
  font-size: 11px;
  color: var(--muted);
}

.di-queue-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0;
}

.di-queue-filter-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--radius) !important;
}

/* ── Controls strip (auto-classify) ────────────────────────────────────── */
.di-controls-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-wrap: wrap;
}

.di-classify-label {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}

.di-classify-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* =============================================================================
   Data Points — /owner/data-points
   ============================================================================= */

/* ── Metrics bar ─────────────────────────────────────────────────────────── */
.dp-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 800px) {
  .dp-metrics { grid-template-columns: repeat(2, 1fr); }
}

.dp-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  gap: 5px;
  text-align: center;
  transition: border-color var(--ease);
}
.dp-metric:hover { border-color: var(--border-mid); }

.dp-metric-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.dp-metric-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

.dp-metric-sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 400;
  opacity: 0.7;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.dp-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* ── Push cards ──────────────────────────────────────────────────────────── */
.dp-push-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--ease);
}
.dp-push-card:hover { border-color: var(--border-mid); }

.dp-push-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dp-push-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  opacity: 0.8;
}

.dp-push-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  flex: 1;
}

.dp-push-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.dp-branch-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(96,160,248,0.08);
  border: 1px solid rgba(96,160,248,0.20);
  color: #60a0f8;
}

.dp-source-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.dp-push-after {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.dp-push-after-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
}

.dp-push-after-sha {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── Commit evidence rows ────────────────────────────────────────────────── */
.dp-commit-list {
  padding: 4px 0;
}

.dp-commit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  transition: background var(--ease);
}
.dp-commit-row:hover { background: var(--surface2); }

.dp-commit-badge {
  flex-shrink: 0;
}

.dp-commit-msg {
  flex: 1;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.dp-commit-files,
.dp-commit-date {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0.6;
}

/* ── Prefix badges ───────────────────────────────────────────────────────── */
.dp-prefix-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.dp-prefix-none {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.35;
}

.dp-prefix-badge--feat {
  color: var(--sev-4);
  background: var(--sev-4-bg);
  border-color: rgba(62,200,128,0.22);
}

.dp-prefix-badge--fix {
  color: var(--research-accent);
  background: var(--research-accent-tint);
  border-color: var(--research-border);
}

.dp-prefix-badge--refactor {
  color: #60a0f8;
  background: rgba(96,160,248,0.08);
  border-color: rgba(96,160,248,0.20);
}

.dp-prefix-badge--design {
  color: var(--magenta);
  background: rgba(192,96,248,0.07);
  border-color: rgba(192,96,248,0.20);
}

.dp-prefix-badge--infra,
.dp-prefix-badge--test {
  color: var(--muted);
  background: var(--surface2);
  border-color: var(--border);
}

/* ── Commit detail modal body ────────────────────────────────────────────── */
.dp-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.dp-detail-sha {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.dp-detail-files,
.dp-detail-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.dp-detail-msg {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.dp-detail-msg span {
  display: block;
}

/* ── Commit row clickable cursor ─────────────────────────────────────────── */
.dp-commit-row { cursor: pointer; }
.dp-commit-row:focus-visible {
  outline: 1px solid var(--border-hi);
  outline-offset: -1px;
}

/* ── Expand overflow ─────────────────────────────────────────────────────── */
.dp-expand-btn {
  display: block;
  width: 100%;
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.dp-expand-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.dp-loading {
  padding: 24px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.dp-feed-empty {
  padding: 24px 10px;
  font-size: 13px;
  color: var(--muted);
}

.dp-load-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.dp-load-more:hover {
  background: var(--surface2);
  border-color: var(--border-mid);
  color: var(--text);
}

/* =============================================================================
   Milestones — /owner/milestones
   ============================================================================= */

/* ── Page layout: two-column ────────────────────────────────────────────── */
/* ── Milestones page — redesigned ──────────────────────────────────────── */

/* Section shell */
.ms-cand-section,
.ms-conf-section {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       18px 20px;
  margin-bottom: 14px;
}

/* Section header */
.ms-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   14px;
  padding-bottom:  12px;
  border-bottom:   1px solid var(--border);
}
.ms-section-title-row {
  display:     flex;
  align-items: baseline;
  gap:         10px;
}
.ms-section-title {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
}
.ms-section-sub {
  font-size:   11px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
}
.ms-rescan-btn {
  font-size: 11px;
  padding:   4px 10px;
}
.ms-new-btn {
  font-size:  11px;
  padding:    5px 12px;
  flex-shrink: 0;
}

/* Empty candidates */
.ms-cand-empty {
  font-size:   12px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
  padding:     12px 0;
  line-height: 1.5;
}
.ms-cand-section--empty .ms-section-title { opacity: 0.5; }

/* Candidate cards */
.ms-cand-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.ms-cand-card {
  background:    var(--surface3);
  border:        1px solid var(--border-mid);
  border-left:   3px solid rgba(251,191,36,0.50);   /* amber — pending */
  border-radius: 6px;
  padding:       14px 16px;
}
.ms-cand-card-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 8px;
  flex-wrap:   wrap;
}
.ms-cand-conf {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius:  3px;
  padding:        2px 6px;
  font-family:    var(--font-mono);
}
.ms-cand-conf--high   { background: rgba(34,197,94,.12);  color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.ms-cand-conf--medium { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.ms-cand-conf--low    { background: rgba(156,163,175,.10); color: #9ca3af; border: 1px solid rgba(156,163,175,.3); }
.ms-cand-type {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--text-dim);
  font-family:    var(--font-mono);
}
.ms-cand-deploys {
  font-size:   10px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
}
.ms-cand-title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.ms-cand-rationale {
  font-size:   12px;
  color:       var(--text-dim);
  line-height: 1.5;
  margin-bottom: 12px;
}
.ms-cand-actions {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}
.ms-cand-btn {
  font-size:     11px;
  font-family:   var(--font-mono);
  border-radius: 4px;
  padding:       5px 12px;
  cursor:        pointer;
  border:        1px solid var(--border-mid);
  background:    none;
  color:         var(--text-dim);
  transition:    color 0.15s, border-color 0.15s;
}
.ms-cand-btn:hover { color: var(--text); border-color: var(--border-hi); }
.ms-cand-btn--accept {
  border-color: rgba(139,92,246,0.45);
  color:        rgba(139,92,246,0.90);
}
.ms-cand-btn--accept:hover { border-color: rgba(139,92,246,0.80); color: var(--text); }
.ms-cand-btn--dismiss { opacity: 0.55; }
.ms-cand-btn--dismiss:hover { opacity: 1; }

/* Confirmed milestone cards — scrollable list */
.ms-conf-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  max-height:     520px;
  overflow-y:     auto;
  padding-right:  4px;
}
.ms-conf-card {
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-left:   3px solid var(--border-mid);
  border-radius: 6px;
  padding:       14px 16px;
}
/* Band-colored left accents */
.ms-conf-card--minor        { border-left-color: #9ca3af; }
.ms-conf-card--substantial  { border-left-color: #60a5fa; }
.ms-conf-card--major        { border-left-color: #fbbf24; }
.ms-conf-card--foundational { border-left-color: #34d399; }
.ms-conf-card--breakthrough { border-left-color: #c084fc; }
.ms-conf-card--confirmed    { border-left-color: rgba(34,197,94,0.60); }
.ms-conf-card-badges {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 8px;
  flex-wrap:   wrap;
}
.ms-conf-card-meta {
  font-size:   10px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
  white-space: nowrap;
}
.ms-conf-card-title {
  font-size:      20px;
  font-weight:    700;
  font-family:    var(--font-mono);
  letter-spacing: -0.01em;
  color:          var(--text);
  line-height:    1.25;
  margin-bottom:  6px;
}
.ms-conf-card-insight {
  font-size:    12.5px;
  font-family:  var(--font-mono);
  color:        var(--text-muted);
  line-height:  1.6;
  margin-bottom: 12px;
  opacity:      0.85;
  border-left:  2px solid rgba(139,92,246,0.35);
  padding-left: 10px;
}
.ms-conf-card-foot {
  display:     flex;
  align-items: center;
  gap:         12px;
}
.ms-conf-card-date {
  font-size:   11px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
}
.ms-conf-card-xp {
  font-size:   13px;
  font-weight: 700;
  color:       rgba(192, 96, 248, 0.90);
  font-family: var(--font-mono);
  text-shadow: 0 0 10px rgba(192, 96, 248, 0.35);
  margin-left: auto;
}

/* ── Supporting Evidence panel ───────────────────────────────────────────── */

.ms-evidence-section {
  margin-top:  10px;
  border-top:  1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}

.ms-evidence-toggle {
  background:    none;
  border:        none;
  padding:       0;
  font-size:     11px;
  font-family:   var(--font-mono);
  color:         var(--text-muted);
  cursor:        pointer;
  letter-spacing: 0.04em;
  opacity:       0.6;
  transition:    opacity 0.15s;
}
.ms-evidence-toggle:hover { opacity: 1; }

.ms-evidence-body {
  margin-top: 8px;
  display:    flex;
  flex-direction: column;
  gap:        5px;
}

.ms-evidence-commits {
  font-size:   12px;
  font-family: var(--font-mono);
  color:       var(--text-muted);
}

.ms-evidence-signal {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.ms-signal-badge {
  font-size:        10px;
  font-family:      var(--font-mono);
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  padding:          2px 7px;
  border-radius:    3px;
  color:            #60a5fa;
  background:       rgba(96, 165, 250, 0.10);
  border:           1px solid rgba(96, 165, 250, 0.25);
}

.ms-evidence-signal-date {
  font-size:  11px;
  font-family: var(--font-mono);
  color:       var(--text-muted);
  opacity:     0.6;
}

.ms-evidence-loading,
.ms-evidence-empty {
  font-size:  11px;
  font-family: var(--font-mono);
  color:       var(--text-muted);
  opacity:     0.5;
}

/* Legacy classes preserved for ov-ms-* used in milestone buttons */
.ms-page-layout { display: none; }   /* old layout retired */

/* =============================================================================
   Progression Canon — XP Ledger section
   ============================================================================= */

/* ── Progression Actions panel (Recognition Grant + Repair) ─────────────────── */

.prog-actions-panel {
  margin-bottom: 16px;
}
.prog-actions-panel .ov-panel-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-left: 8px;
}

.prog-action-sub {
  font-size:     11px;
  color:         var(--text-muted);
  margin-bottom: 10px;
  font-family:   var(--font-mono);
}

/* Collapsible action toggles */
.prog-action-toggles {
  display:         flex;
  justify-content: center;
  gap:             10px;
  margin-bottom:   12px;
  flex-wrap:       wrap;
}
.prog-action-toggle-btn {
  flex:            1;
  max-width:       280px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         10px 18px;
  background:      var(--surface3);
  border:          1px solid var(--border-mid);
  border-radius:   6px;
  font-size:       12px;
  font-family:     var(--font-mono);
  font-weight:     600;
  color:           var(--text-dim);
  cursor:          pointer;
  transition:      border-color 0.15s, color 0.15s, background 0.15s;
}
.prog-action-toggle-btn:hover {
  border-color: var(--accent);
  color:        var(--text);
}
.prog-action-toggle-btn.active {
  border-color: var(--accent);
  color:        var(--accent);
  background:   rgba(34, 211, 238, 0.06);
}
.prog-action-toggle-arrow {
  font-size:   10px;
  transition:  transform 0.2s;
}
.prog-action-toggle-btn.active .prog-action-toggle-arrow {
  transform: rotate(180deg);
}
.prog-action-body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

/* Recognition form */
.prog-recognition-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.prog-rec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 80px;
  flex-shrink: 0;
}
.prog-rec-xp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.prog-rec-quick-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.prog-rec-quick {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.prog-rec-quick:hover,
.prog-rec-quick.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.prog-rec-xp-input {
  width: 90px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
  transition: border-color var(--ease);
}
.prog-rec-xp-input:focus { border-color: var(--cyan); }

.prog-rec-rationale-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.prog-rec-rationale {
  flex: 1;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color var(--ease);
  min-height: 56px;
}
.prog-rec-rationale:focus { border-color: var(--cyan); }

.prog-rec-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prog-rec-status {
  font-family: var(--font-mono);
  font-size: 11px;
}
.prog-rec-status--ok  { color: var(--green); }
.prog-rec-status--err { color: var(--magenta); }

/* Divider */
.prog-actions-sep {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* Repair row */
.prog-repair-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.prog-repair-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prog-repair-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}
.prog-repair-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}
.prog-repair-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.prog-repair-btn,
.prog-diag-btn {
  flex-shrink: 0;
}
.prog-repair-stat--hdr {
  color: var(--text-dim);
  margin-top: 4px;
  font-weight: 600;
}
.prog-repair-stat--row {
  color: var(--text-dim);
  padding-left: 8px;
}
.prog-repair-output {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prog-repair-output > span {
  font-family: var(--font-mono);
  font-size: 11px;
}
.prog-repair-ok   { color: var(--green); }
.prog-repair-err  { color: var(--magenta); }
.prog-repair-stat { color: var(--text-dim); }

/* ── Developer XP Panel (Class E) ─────────────────────────────────────────── */

.prog-dev-xp-section {
  margin-bottom: 16px;
}

.prog-dev-xp-badge {
  display: inline-block;
  background: var(--cyan);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.prog-dev-xp-feed {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-top:     4px;
  max-height:     220px;
  overflow-y:     auto;
  padding-right:  4px;
}

.prog-dev-xp-empty {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  padding: 8px 0;
}

.prog-dev-xp-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}

.prog-dev-xp-card--new {
  border-color: var(--cyan);
}

.prog-dev-xp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.prog-dev-xp-type {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prog-dev-xp-new-badge {
  background: var(--cyan);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prog-dev-xp-xp {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  margin-left: auto;
}

.prog-dev-xp-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.prog-dev-xp-rationale {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  font-style: italic;
}

.prog-dev-xp-viewed-btn {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}

.prog-dev-xp-viewed-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.prog-ledger-section {
  margin-bottom: 24px;
}

.prog-ledger-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

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

.prog-ledger-filters .ov-hist-filter,
.prog-ledger-filters input[type="date"] {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 10px;
  outline: none;
  transition: border-color var(--ease);
}
.prog-ledger-filters .ov-hist-filter:focus,
.prog-ledger-filters input[type="date"]:focus { border-color: var(--border-mid); }

.prog-ledger-filters .ov-hist-apply-btn,
.prog-ledger-filters .ov-hist-reset-btn {
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.prog-ledger-filters .ov-hist-apply-btn:hover,
.prog-ledger-filters .ov-hist-reset-btn:hover {
  color: var(--text);
  border-color: var(--border-hi);
}

/* =============================================================================
   Progression Canon — XP Ledger command center
   KPI strip, filter bar, table overrides, classify button polish
   ============================================================================= */

/* ── Page identity modifier ─────────────────────────────────────────────── */
.page-identity--prog {
  margin-bottom: 28px;
}

.page-identity--prog .page-identity-title {
  font-size: 28px;
  letter-spacing: 0.12em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-identity--prog .page-identity-sub {
  font-size: 13.5px;
  color: var(--text-dim);
  margin-top: 6px;
  max-width: min(720px, 100%);
}

/* ── KPI strip — grid-based card row ────────────────────────────────────── */
.prog-kpi-strip {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  background: var(--prog-accent-tint);
  border: 1px solid var(--prog-border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
}

.prog-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-right: 1px solid var(--prog-border);
}

.prog-kpi:last-child { border-right: none; }

.prog-kpi--lead {
  background: var(--prog-accent-dim);
}

.prog-kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

.prog-kpi-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}

.prog-kpi--lead .prog-kpi-value {
  color: var(--prog-accent);
  font-size: 28px;
}

/* Legacy modifier classes — obsoleted by structural approach */
.prog-kpi-accent { color: var(--prog-accent); }
.prog-kpi-dim    { color: var(--text-dim); }
.prog-kpi-sep    { display: none; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.prog-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
}

.prog-filters-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.prog-filters-sep-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px;
}

.prog-filters-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.prog-filter-select,
.prog-filter-date {
  -webkit-appearance: none;
  appearance: none;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  height: 30px;
  padding: 0 10px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.prog-filter-select:focus,
.prog-filter-date:focus {
  border-color: var(--prog-border-hi);
  box-shadow: 0 0 0 2px var(--prog-accent-dim);
}

.prog-filter-apply {
  height: 30px;
  background: var(--prog-accent);
  border: 1px solid var(--prog-accent);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 16px;
  cursor: pointer;
  transition: opacity var(--ease);
}
.prog-filter-apply:hover { opacity: 0.82; }

.prog-filter-reset {
  height: 30px;
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 12px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.prog-filter-reset:hover {
  color: var(--text);
  border-color: var(--border-hi);
}

/* ── Ledger feed — card layout ──────────────────────────────────────────── */
/* Replaces the old table grid. Each entry is a structured card in a
   vertical feed. Content wraps naturally — no truncation, no columns. */

.lf-feed {
  display:        flex;
  flex-direction: column;
}

.lf-card {
  padding:       12px 0;
  border-bottom: 1px solid var(--border);
}
.lf-card:last-child { border-bottom: none; }

/* Row 1: header — timestamp · event · source */
.lf-card-hd {
  display:     flex;
  align-items: center;
  gap:         5px;
  margin-bottom: 4px;
}
.lf-ts  { font-family: var(--font-mono); font-size: 0.70rem; color: var(--text-muted); }
.lf-sep { color: var(--border-mid); font-size: 0.70rem; user-select: none; }
.lf-evt { font-family: var(--font-mono); font-size: 0.70rem; color: var(--text-dim); font-weight: 500; }
.lf-src { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; }
.lf-src-live     { color: var(--sev-4); }
.lf-src-backfill { color: var(--sev-3); }
.lf-src-system   { color: var(--text-muted); }

/* Row 2: commit title — dominant text, wraps freely */
.lf-card-body { margin-bottom: 5px; }
.lf-title {
  font-family:  var(--font-mono);
  font-size:    0.84rem;
  font-weight:  500;
  color:        var(--text);
  line-height:  1.45;
  word-break:   break-word;
  white-space:  pre-line;
}
.lf-title--missing {
  color:      var(--muted);
  font-style: italic;
  font-weight: 400;
}
.lf-title--dev-xp {
  color: var(--cyan);
}
.lf-card--developer-xp {
  border-left: 2px solid var(--cyan);
  padding-left: 10px;
}

/* Row 3: state badge · XP · decay · deploy ID */
.lf-card-meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         7px;
  margin-bottom: 0;
}
.lf-xp {
  font-family:  var(--font-mono);
  font-size:    0.78rem;
  font-weight:  700;
  color:        var(--prog-accent);
}
.lf-decay {
  font-family: var(--font-mono);
  font-size:   0.70rem;
  color:       var(--text-muted);
}
.lf-decay--live {
  color:            #d97706;
  background:       rgba(217,119,6,.08);
  border:           1px solid rgba(217,119,6,.25);
  border-radius:    3px;
  padding:          1px 5px;
}
.lf-did {
  font-family: var(--font-mono);
  font-size:   0.68rem;
  color:       var(--text-muted);
  opacity:     0.65;
  cursor:      default;
}

/* Row 4: classification badge + action (deploy rows only) */
.lf-card-ft {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         6px;
  margin-top:  7px;
}

/* Card state modifiers */
.lf-card--zero    { opacity: 0.55; }
.lf-card--orphan  { opacity: 0.45; }
.lf-card--low-conf { opacity: 0.72; }
.lf-card--archival { opacity: 0.42; }
/* Fresh: detected within 2 hours. Overrides --zero dim — XP is unchanged. */
.lf-card--fresh   { opacity: 1 !important; }
.ov-hist-detail-badge--fresh { background: rgba(40,220,120,0.12); color: #28dc78; border: 1px solid rgba(40,220,120,0.28); }

/* XP confidence grades (shared with old system) */
.lf-card .xp-positive { color: var(--prog-accent); }

/* ── Ledger feed — action buttons ───────────────────────────────────────── */
/* lf-action-btn family: Edit / Confirm? / + Classify */
.lf-action-btn {
  background:     none;
  border:         1px solid rgba(90,104,152,0.20);
  border-radius:  3px;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.04em;
  padding:        2px 7px;
  cursor:         pointer;
  white-space:    nowrap;
  opacity:        0.65;
  transition:     opacity var(--ease), border-color var(--ease), color var(--ease), background var(--ease);
}
.lf-action-btn:hover {
  border-color: var(--border-mid);
  color:        var(--text-dim);
  opacity:      1;
}
.lf-action-btn--classify {
  background:   var(--prog-accent-dim);
  border-color: var(--prog-border);
  color:        var(--prog-accent);
  opacity:      1;
  font-weight:  700;
}
.lf-action-btn--classify:hover {
  background:   var(--prog-accent);
  border-color: var(--prog-accent);
  color:        #fff;
}
.lf-action-btn--confirm {
  background:   rgba(255,140,0,0.08);
  border-color: rgba(255,140,0,0.30);
  color:        var(--sev-3);
  opacity:      1;
}
.lf-action-btn--confirm:hover {
  background:   rgba(255,140,0,0.16);
  border-color: rgba(255,140,0,0.52);
}

/* lf-recover-btn: RECOVERABLE rows — same muted palette, accent on hover */
.lf-recover-btn {
  background:     rgba(90,104,152,0.10);
  border:         1px solid rgba(90,104,152,0.28);
  border-radius:  3px;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.05em;
  padding:        2px 7px;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background var(--ease), border-color var(--ease), color var(--ease);
}
.lf-recover-btn:hover:not(:disabled) {
  background:   var(--prog-accent-dim);
  border-color: var(--prog-border);
  color:        var(--prog-accent);
}
.lf-recover-btn:disabled { opacity: 0.40; cursor: not-allowed; }
.lf-recover-btn--done    { background: rgba(80,180,110,0.10); border-color: rgba(80,180,110,0.32); color: #5cb87a; }
.lf-recover-btn--partial { background: rgba(255,140,0,0.08);  border-color: rgba(255,140,0,0.25);  color: var(--sev-3); }
.lf-recover-btn--err     { background: rgba(220,60,60,0.07);  border-color: rgba(220,60,60,0.25);  color: var(--sev-1); }

/* ── Classify button polish (classify feed — unchanged) ─────────────────── */
.cls-tag-btn {
  background:    var(--prog-accent-dim);
  border:        1px solid var(--prog-border);
  color:         var(--prog-accent);
  font-weight:   600;
}
.cls-tag-btn:hover {
  background:    var(--prog-accent);
  border-color:  var(--prog-accent);
  border-style:  solid;
  color:         #fff;
}

/* =============================================================================
   Phase 1 — Sovereign Strip
   Persistent full-width identity bar spanning both sidebar and main columns.
   ============================================================================= */

.sovereign-strip {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: var(--sv-height);
  background: var(--bg2);
  border-bottom: 1px solid var(--border-mid);
  overflow: hidden;
  font-family: var(--font-mono);
  flex-shrink: 0;
  z-index: 20;
}

/* ── LEFT cluster: brand mark + session/operator controls ── */
.sv-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Spacer: pushes progression block to the right ── */
.sv-spacer {
  flex: 1;
}

/* ── RIGHT cluster: progression identity block ── */
.sv-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sv-mark {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.sv-mark-gem {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Vertical rule separators */
.sv-sep {
  width: 1px;
  height: 24px;
  background: var(--border-mid);
  flex-shrink: 0;
  margin: 0 14px;
}

.sv-sep-sm {
  height: 28px;
  margin: 0 16px;
}

/* ── Session cluster: email · theme · End Session ── */
.sv-session-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sv-session-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Compact strip-level buttons */
.sv-btn {
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.sv-btn:hover {
  border-color: var(--border-hi);
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
}

.sv-btn-theme {
  font-size: 12px;
  padding: 3px 7px;
  letter-spacing: 0;
}

.sv-btn-logout {
  color: rgba(255, 68, 68, 0.72);
  border-color: rgba(255, 68, 68, 0.28);
}

.sv-btn-logout:hover {
  border-color: rgba(255, 68, 68, 0.55);
  color: var(--sev-1);
  background: rgba(255, 68, 68, 0.08);
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.18);
}

/* ── Progression identity stats — stacked label / value ── */
.sv-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
}

.sv-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(192,96,248,0.45), 0 0 22px rgba(192,96,248,0.18);
  line-height: 1;
}

[data-theme="light"] .sv-stat-label {
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(144,48,208,0.30);
}

/* Values: readable but not overpowering */
.sv-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* =============================================================================
   Ingest Verification page
   ============================================================================= */

/* Status bar — full-width status badge at the top */
.dlh-status-bar {
  margin-bottom: 18px;
  padding: 14px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}

.dlh-status {
  display: block;
  letter-spacing: 0.04em;
}

.dlh-status-ok {
  color: var(--sev-4);
  border-left-color: var(--sev-4);
}
.dlh-status-bar:has(.dlh-status-ok)    { border-left-color: var(--sev-4); background: rgba(52,211,153,0.04); }
.dlh-status-bar:has(.dlh-status-drift) { border-left-color: var(--sev-2); background: rgba(251,191,36,0.04); }
.dlh-status-bar:has(.dlh-status-warn)  { border-left-color: var(--sev-3); background: rgba(251,146,60,0.04); }
.dlh-status-bar:has(.dlh-status-error) { border-left-color: var(--sev-1); background: rgba(248,113,113,0.04); }

.dlh-status-drift { color: var(--sev-2); font-weight: 600; }
.dlh-status-warn  { color: var(--sev-3); }
.dlh-status-error { color: var(--sev-1); }

/* Four-column stat grid */
.dlh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (max-width: 860px) { .dlh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dlh-grid { grid-template-columns: 1fr; } }

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

.dlh-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.dlh-card-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlh-card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Missing deploy IDs block */
.dlh-missing-block {
  background: rgba(255,160,0,0.05);
  border: 1px solid rgba(255,160,0,0.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.dlh-missing-header {
  margin-bottom: 10px;
}

.dlh-missing-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sev-2);
}

.dlh-missing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.dlh-missing-row:last-child { border-bottom: none; }

.dlh-missing-uid {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  flex: 1;
}

.dlh-missing-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sev-2);
  white-space: nowrap;
}

/* Recent feed table */
.dlh-feed-wrap {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.dlh-feed-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.dlh-feed {
  display: flex;
  flex-direction: column;
}

.dlh-feed-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 0 14px;
  align-items: start;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
}
.dlh-feed-row:last-child { border-bottom: none; }

.dlh-feed-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 2px;
}

.dlh-feed-uid {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlh-feed-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
  line-height: 1.45;
}

.dlh-feed-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  margin-top: 2px;
}

.dlh-feed-tag-ok      { color: var(--sev-4); background: rgba(0,200,100,0.08); }
.dlh-feed-tag-audit   { color: var(--sev-3); background: rgba(255,180,0,0.08); }
.dlh-feed-tag-missing { color: var(--sev-1); background: rgba(255,60,60,0.08); }

/* Refresh button */
.dlh-refresh-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  color: var(--muted);
  padding: 5px 14px;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  flex-shrink: 0;
}
.dlh-refresh-btn:hover {
  border-color: var(--border-hi);
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
}

@media (max-width: 720px) {
  .dlh-feed-row { grid-template-columns: 110px 1fr auto; }
}

/* =============================================================================
   Phase 1 — Page Identity component
   Standard page-level title block used by every deep-work page.
   ============================================================================= */

.page-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-4);
}

.page-identity-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;        /* fill available row width, not content width */
  min-width: 0;   /* allow shrink below content size when actions present */
}

.page-identity-title {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
}

.page-identity-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  max-width: min(900px, 100%); /* fluid up to 900px; won't overflow narrow containers */
}

.page-identity-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* =============================================================================
   Phase 1 — Density Registers
   Applied to #owner-content to modulate information density per page type.
   ============================================================================= */

/* Sparse: generous breathing room — Overview */
.page-sparse .ov-panel     { padding: 24px 28px; }
.page-sparse .ov-panel-header { margin-bottom: 18px; }

/* Functional: tighter, data-dense — Deploy Intel, Milestones, Audit */
.page-functional .ov-panel { padding: 16px 18px; }

/* Editorial: document-style, readable line length — Canon */
.page-editorial {
  max-width: 760px;
  margin: 0 auto;
}

/* =============================================================================
   Phase 2 — Overview Redesign
   Strict summary surface: greeting, attention rail, XP preview, recent activity.
   No feeds. No tables. No candidate lists. No classification workflows.
   ============================================================================= */

/* ── Greeting header ────────────────────────────────────────────────────── */
.ov2-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border);
}

/* Top row: identity cluster + meta block */
.ov2-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
}

/* Avatar + text side-by-side */
.ov2-identity-cluster {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

/* Profile picture */
.ov2-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-mid);
  box-shadow: 0 0 0 4px rgba(180,80,255,0.08);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ov2-avatar:hover {
  border-color: rgba(180,80,255,0.50);
  box-shadow: 0 0 0 4px rgba(180,80,255,0.14);
}
.ov2-avatar-fallback {
  background: var(--surface2);
}

.ov2-greeting-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* Primary identity line — mono font, matches ARES design system */
.ov2-greeting {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* System status line — mono, clearly subordinate but legible. No artificial truncation. */
.ov2-message {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}

/* Operational context line — sits below philosophy, slightly smaller, action-oriented color */
.ov2-message--context {
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
}

/* ── Right-side meta block: date · time · command link ──────────────────── */
.ov2-meta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* Temporal context — date line */
.ov2-date {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--muted);
  opacity: 0.75;
  white-space: nowrap;
}

/* Local time + timezone line */
.ov2-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.55;
  white-space: nowrap;
}

/* Shell-level context switch to /command */
.ov2-cmd-link {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 3px 9px;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
  white-space: nowrap;
}

.ov2-cmd-link:hover {
  color: var(--magenta);
  border-color: rgba(192,96,248,0.40);
  background: rgba(192,96,248,0.05);
  text-decoration: none;
}

[data-theme="light"] .ov2-cmd-link:hover {
  background: rgba(144,48,208,0.05);
}

/* ── Full-width XP progression rail (bottom of ov2-header) ─────────────── */
.ov2-xp-rail {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 0 8px;
  border-top: 1px solid var(--border-mid);
}

/* Left group: TOTAL XP stat + divider + current/next level */
.ov2-xp-rail-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ov2-xp-rail-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ov2-xp-rail-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(192,96,248,0.35);
  line-height: 1;
}

.ov2-xp-rail-total {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}

.ov2-xp-rail-div {
  width: 1px;
  height: 32px;
  background: var(--border-mid);
  flex-shrink: 0;
  margin: 0 4px;
  opacity: 0.55;
}

.ov2-xp-rail-level {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}

.ov2-xp-rail-arrow {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.55;
  line-height: 1;
}

.ov2-xp-rail-next {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.60;
  line-height: 1;
}

/* Middle: progress bar fills available space */
.ov2-xp-rail-bar {
  flex: 1 1 auto;
  min-width: 60px;
}

.ov2-level-bar-track {
  width: 100%;
  height: 5px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}

.ov2-level-bar-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(192,96,248,0.40);
}

/* Right: XP fraction + percentage */
.ov2-xp-rail-right {
  flex-shrink: 0;
}

.ov2-level-bar-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.70;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
.ov2-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.ov2-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ov2-panel-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}

.ov2-panel-link {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.ov2-panel-link:hover { color: var(--magenta); }

/* ── Attention Rail panel ───────────────────────────────────────────────── */
.ov2-rail-panel {
  margin-top: 8px;
  margin-bottom: 24px;
  padding: 20px 22px;
}

/* ── Two-column grid ────────────────────────────────────────────────────── */
.ov2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px) {
  .ov2-grid    { grid-template-columns: 1fr; }
  .ov2-greeting { font-size: 22px; }
  .ov2-avatar   { width: 44px; height: 44px; }
}

@media (max-width: 600px) {
  .ov2-header      { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ov2-meta-block  { display: none; }
  .ov2-greeting    { font-size: 20px; }
  .ov2-avatar      { width: 38px; height: 38px; }
}

/* ── Source class labels for XP source badge ────────────────────────────── */
.ov2-xp-src {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
  white-space: nowrap;
}

/* ── Activity info column (action + optional detail) ────────────────────── */
.ov2-activity-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.ov2-activity-detail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
}

/* ── XP info column (event name + source tag) ───────────────────────────── */
.ov2-xp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

/* ── XP preview ─────────────────────────────────────────────────────────── */
.ov2-xp-total {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
}

.ov2-xp-list {
  display: flex;
  flex-direction: column;
}

.ov2-xp-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0 10px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.ov2-xp-row:last-child { border-bottom: none; }

.ov2-xp-event {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: normal;
  word-break: break-word;
}

.ov2-xp-mult {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(192,96,248,0.55);
  white-space: nowrap;
}

.ov2-xp-amount {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--sev-4);
  white-space: nowrap;
}

.ov2-xp-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Recent Activity ────────────────────────────────────────────────────── */
.ov2-activity-list {
  display: flex;
  flex-direction: column;
}

.ov2-activity-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0 10px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.ov2-activity-row:last-child { border-bottom: none; }

.ov2-activity-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

.ov2-activity-action {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov2-activity-mod {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.ov2-activity-result {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.ov2-activity-result.success { color: var(--sev-4); }
.ov2-activity-result.danger  { color: var(--sev-1); }
.ov2-activity-result.muted   { color: var(--muted); }

.ov2-activity-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* =============================================================================
   Readability Upgrade Pass — font-size increases across tables and activity rows
   ============================================================================= */

/* XP Ledger */
.ov-hist-cell-ts         { font-size: 11.5px; }
.ov-hist-cell-ev         { font-size: 12px; }
.ov-hist-detail-title    { font-size: 12px; }
.ov-hist-detail-subtitle { font-size: 10.5px; }
.ov-hist-detail-id       { font-size: 10.5px; }

/* Classification Feed */
.cls-feed-id       { font-size: 12px; }
.cls-feed-ts       { font-size: 11.5px; }
.cls-feed-title    { font-size: 12px; }
.cls-feed-conf     { font-size: 11px; }
.cls-feed-by       { font-size: 11px; }

/* Activity rows */
.ov2-activity-action { font-size: 12px; }
.ov2-activity-result { font-size: 11px; }
.ov2-activity-time   { font-size: 11px; }

/* Overview XP list */
.ov2-xp-label  { font-size: 12px; }
.ov2-xp-value  { font-size: 12px; }

/* Audit log rows */
.audit-row-action  { font-size: 12px; }
.audit-row-ts      { font-size: 11.5px; }

/* Milestone table */
.ms-row-title  { font-size: 13px; }
.ms-row-ts     { font-size: 11.5px; }

/* State bar */
.state-value   { font-size: 22px; }
.state-label   { font-size: 11px; letter-spacing: 0.05em; }

/* =============================================================================
   ARES Intelligence Analysis Pages
   Five systems: Causality, Drift, Anomaly Map, Symbolic Registry, Thresholds
   ============================================================================= */

/* ── Shared: Mock Data Badge ─────────────────────────────────────────────── */
.intel-mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  padding: 4px 10px;
}

/* =============================================================================
   1. CAUSALITY TIMELINE — XP Breakdown + Event Feed
   ============================================================================= */

/* Section wrapper: header + body */
.ct-section {
  margin-bottom: 24px;
}
.ct-section-header {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.ct-section-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Breakdown bar rows ──────────────────────────────────────────────────── */
.ct-brow {
  display: grid;
  grid-template-columns: 140px 1fr 110px 130px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ct-brow:last-child { border-bottom: none; }

.ct-brow-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-brow-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.ct-brow-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Type bars — each action type gets its own accent */
.ct-bar-type { background: rgba(99,102,241,0.65); }

/* Classification bars — consistent indigo (deploy sub-breakdown) */
.ct-bar-cls  { background: rgba(99,102,241,0.45); }

.ct-brow-xp {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.ct-brow-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
  opacity: 0.65;
}

/* ── Recent feed ─────────────────────────────────────────────────────────── */
.ct-chains-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Entry card — one card per XP award */
.ct-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
}
.ct-entry--deploy      { border-left-color: rgba(112, 64,238,0.55); }
.ct-entry--recovery    { border-left-color: rgba( 62,200,128,0.60); }
.ct-entry--milestone   { border-left-color: rgba(251,191, 36,0.55); }
.ct-entry--recognition { border-left-color: rgba(192,132,252,0.55); }
.ct-entry--developer   { border-left-color: rgba( 96,165,250,0.55); }
.ct-entry--event       { border-left-color: rgba(107,114,128,0.45); }

.ct-entry-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* Top row: badge + bonus tags + timestamp */
.ct-entry-top {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* Type badge */
.ct-entry-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ct-badge-deploy      { background: rgba(112, 64,238,0.13); color: #a78bfa; border: 1px solid rgba(112, 64,238,0.28); }
.ct-badge-recovery    { background: rgba( 62,200,128,0.12); color: #6ee7b7; border: 1px solid rgba( 62,200,128,0.28); }
.ct-badge-milestone   { background: rgba(251,191, 36,0.11); color: #fcd34d; border: 1px solid rgba(251,191, 36,0.27); }
.ct-badge-recognition { background: rgba(192,132,252,0.12); color: #e879f9; border: 1px solid rgba(192,132,252,0.28); }
.ct-badge-developer   { background: rgba( 96,165,250,0.12); color: #93c5fd; border: 1px solid rgba( 96,165,250,0.28); }
.ct-badge-event       { background: rgba(107,114,128,0.10); color: #9ca3af; border: 1px solid rgba(107,114,128,0.25); }

/* Bonus tag (recovery arc, first-type bonus) */
.ct-bonus-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #6ee7b7;
  background: rgba(62,200,128,0.08);
  border: 1px solid rgba(62,200,128,0.22);
  border-radius: 3px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}

/* Timestamp pushed to the right of the top row */
.ct-entry-ts {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.55;
  margin-left: auto;
  flex-shrink: 0;
}

/* Main description line — commit message, milestone name, etc. */
.ct-entry-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

/* Causal note — "→ classified as feature shipment" */
.ct-entry-cause {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.ct-cause-arrow {
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.45;
  flex-shrink: 0;
}
.ct-cause-text {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: capitalize;
}

/* Right slot: XP amount */
.ct-entry-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.ct-entry-xp {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: #6ee7b7;
  white-space: nowrap;
}

/* =============================================================================
   2. CLASSIFICATION DRIFT MONITOR
   ============================================================================= */

.drift-panels {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drift-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.drift-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.drift-panel-identity {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.drift-panel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.drift-current-state {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.05em;
}

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

.drift-panel-updated {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.drift-staleness-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 3px;
}

.drift-active   { background: rgba(62,200,128,0.12);  color: var(--sev-4);  border: 1px solid rgba(62,200,128,0.28); }
.drift-stale    { background: rgba(236,192,0,0.10);   color: var(--sev-3);  border: 1px solid rgba(236,192,0,0.28); }
.drift-critical { background: rgba(255,68,68,0.10);   color: var(--sev-1);  border: 1px solid rgba(255,68,68,0.28); }
.drift-unk      { background: var(--surface2);         color: var(--muted);  border: 1px solid var(--border-mid); }

.drift-panel-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 16px;
}

.drift-hist-header {
  display: grid;
  grid-template-columns: 140px 120px 1fr 1fr;
  gap: 0 12px;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.drift-hist-rows {
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}

.drift-hist-row {
  display: grid;
  grid-template-columns: 140px 120px 1fr 1fr;
  gap: 0 12px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background var(--ease);
}
.drift-hist-row:last-child { border-bottom: none; }
.drift-hist-row:hover { background: var(--surface2); }
.drift-hist-current { background: rgba(192,96,248,0.05); }

.drift-hist-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
}

.drift-hist-state {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.04em;
}

.drift-hist-conf-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drift-hist-conf-bar {
  flex: 1;
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.drift-hist-conf-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.drift-hist-conf-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  min-width: 32px;
  text-align: right;
}

.drift-hist-trigger {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .drift-hist-header,
  .drift-hist-row { grid-template-columns: 110px 100px 1fr; }
  .drift-hist-header > span:last-child,
  .drift-hist-trigger { display: none; }
}

/* =============================================================================
   2b. CAUSALITY TIMELINE
   ============================================================================= */

.caus-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.caus-filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}

.caus-filter-btn:hover {
  border-color: var(--magenta);
  color: var(--text);
}

.caus-filter-btn--active {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

[data-theme="light"] .caus-filter-btn--active { color: #fff; }

.caus-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.caus-entry {
  display: flex;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  overflow: hidden;
  transition: box-shadow var(--ease);
}

.caus-entry:hover { box-shadow: var(--shadow-md); }

/* The left color bar — driven by --caus-color CSS custom property */
.caus-entry-bar {
  width: 4px;
  flex-shrink: 0;
  background: var(--caus-color, var(--border));
}

.caus-entry-body {
  flex: 1;
  padding: 16px 20px;
  min-width: 0;
}

/* Header row */
.caus-entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.caus-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.caus-pattern-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.85;
}

.caus-entry-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.caus-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.caus-entry-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.caus-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}

.caus-revealed   { background: rgba(34,197,94,0.12);  color: var(--success, #22c55e); border: 1px solid rgba(34,197,94,0.25); }
.caus-unrevealed { background: rgba(251,191,36,0.10); color: var(--warning, #f59e0b); border: 1px solid rgba(251,191,36,0.2); }

/* Description (revealed text from DB) */
.caus-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--caus-color, var(--border));
  border-radius: 0 var(--radius) var(--radius) 0;
}

[data-theme="light"] .caus-desc { background: rgba(0,0,0,0.025); }

/* Unrevealed redaction block */
.caus-redacted {
  margin-bottom: 14px;
}

/* Trigger condition line */
.caus-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.caus-trigger-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.caus-trigger-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

/* Causal chain */
.caus-chain-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.caus-chain {
  margin: 0 0 14px 0;
  padding-left: 0;
  list-style: none;
  counter-reset: chain;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caus-chain li {
  counter-increment: chain;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.caus-chain li::before {
  content: counter(chain);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--caus-color, var(--muted));
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  line-height: 1;
}

[data-theme="light"] .caus-chain li::before { background: rgba(0,0,0,0.04); }

/* Interpretation block */
.caus-meaning {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

[data-theme="light"] .caus-meaning { background: rgba(0,0,0,0.025); }

.caus-meaning-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.caus-meaning-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  font-style: italic;
}

/* Source events */
.caus-sources {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.caus-sources-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.caus-source-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* =============================================================================
   3. ANOMALY INTELLIGENCE MAP
   ============================================================================= */

.anom-summary-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.anom-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 20px;
}

.anom-summary-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

.anom-summary-count {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.anom-summary-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.anom-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.anom-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: box-shadow var(--ease);
}
.anom-card:hover { box-shadow: var(--shadow-md); }
.anom-card.sev-high   { border-left-color: var(--sev-1); }
.anom-card.sev-med    { border-left-color: var(--sev-2); }
.anom-card.sev-low    { border-left-color: var(--sev-3); }

/* Pattern colors — match the Symbolic Patterns key swatches */
.anom-card.sym-pattern--burst     { border-left-color: #f59e0b; }
.anom-card.sym-pattern--refactor  { border-left-color: #60a5fa; }
.anom-card.sym-pattern--recursion { border-left-color: #f97316; }
.anom-card.sym-pattern--shadow    { border-left-color: #64748b; }

.anom-card-header {
  margin-bottom: 10px;
}

.anom-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.anom-sev-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.anom-sev-icon.sev-high { color: var(--sev-1); }
.anom-sev-icon.sev-med  { color: var(--sev-2); }
.anom-sev-icon.sev-low  { color: var(--sev-3); }

.anom-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.anom-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.anom-revealed   { background: rgba(62,200,128,0.10);  color: var(--sev-4);  border: 1px solid rgba(62,200,128,0.25); }
.anom-unrevealed { background: rgba(255,140,0,0.10);   color: var(--sev-2);  border: 1px solid rgba(255,140,0,0.25); }

.anom-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.anom-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 3px 8px;
}

.anom-link-icon { font-size: 12px; }

.anom-type {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.anom-ts {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.anom-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
}

.anom-linked {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.anom-linked-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

.anom-linked-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anom-event-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface3);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 2px 8px;
}

/* ── Commit Detector Glossary ─────────────────────────────────────────────── */

/* ── Symbolic Patterns key ───────────────────────────────────────────────── */
.sym-pattern-key {
  margin-bottom: 28px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.sym-pattern-key-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.sym-pattern-key-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}

@media (max-width: 680px) {
  .sym-pattern-key-grid { grid-template-columns: 1fr; }
}

.sym-pattern-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sym-pattern-swatch {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-top: 3px;
}

/* Swatch colors — each carries semantic meaning */
.sym-pattern--burst    .sym-pattern-swatch { background: #f59e0b; }  /* amber — heat, high energy */
.sym-pattern--refactor .sym-pattern-swatch { background: #60a5fa; }  /* blue — clarity, structural */
.sym-pattern--recursion .sym-pattern-swatch { background: #f97316; } /* orange — pressure, correction */
.sym-pattern--shadow   .sym-pattern-swatch { background: #64748b; }  /* dark slate — night, shadow */

.sym-pattern-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sym-pattern-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.sym-pattern-trigger {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.sym-pattern-meaning {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 1px;
}

/* =============================================================================
   4. SYMBOLIC REGISTRY
   ============================================================================= */

.sym-summary-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sym-summary-item  { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 18px; }
.sym-summary-sep   { width: 1px; height: 30px; background: var(--border); flex-shrink: 0; }
.sym-summary-count { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; }
.sym-summary-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.sym-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .sym-cards { grid-template-columns: 1fr; } }

.sym-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.sym-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-md); }

.sym-card-header { margin-bottom: 10px; }

.sym-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.sym-type-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.sym-seal  { color: var(--magenta); }
.sym-relic { color: var(--purple); }

.sym-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.sym-origin-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.origin-system { background: rgba(112,64,238,0.12); color: var(--purple); border: 1px solid rgba(112,64,238,0.28); }
.origin-manual { background: rgba(236,192,0,0.10);  color: var(--sev-3);  border: 1px solid rgba(236,192,0,0.28); }

.sym-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  flex-wrap: wrap;
}

.sym-type-label { font-weight: 700; color: var(--text-dim); }
.sym-card-sep   { opacity: 0.4; }
.sym-active     { color: var(--sev-4); }
.sym-inactive   { color: var(--sev-1); }

.sym-purpose {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
}

.sym-rule-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.sym-rule-block[open] {
  cursor: default;
}

.sym-rule-label {
  display: block;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}
.sym-rule-label::-webkit-details-marker { display: none; }
.sym-rule-label::before {
  content: '▸ ';
  font-size: 8px;
}
.sym-rule-block[open] .sym-rule-label::before {
  content: '▾ ';
}
.sym-rule-block[open] .sym-rule-label {
  margin-bottom: 6px;
}

.sym-rule-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

.sym-sources { margin-top: 10px; }

.sym-sources-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.sym-source-event {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sym-source-event:last-child { border-bottom: none; }

.sym-source-icon { color: var(--magenta); flex-shrink: 0; font-size: 12px; }

/* =============================================================================
   5. THRESHOLD & ESCALATION SYSTEM
   ============================================================================= */

/* ── Two-group layout: Risk Layer / Diagnostic Layer ─────────────────── */
.thresh-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 16px;
}

.thresh-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.thresh-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

.thresh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 960px) { .thresh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .thresh-grid { grid-template-columns: 1fr; } }

/* ── Card base ───────────────────────────────────────────────────────── */
.thresh-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 14px;
  transition: box-shadow var(--ease);
}
.thresh-card:hover { box-shadow: var(--shadow-md); }

/* Top-border + background tint per state */
.thresh-card.thresh-ok   { border-top-color: rgba(62,200,128,0.40); }
.thresh-card.thresh-warn { border-top-color: var(--sev-2); background: rgba(255,140,0,0.025); }
.thresh-card.thresh-crit {
  border-top-color: var(--sev-1);
  background: rgba(255,68,68,0.04);
  animation: thresh-crit-pulse 2.8s ease-in-out infinite;
}
.thresh-card.thresh-unk  { border-top-color: var(--border-mid); }

@keyframes thresh-crit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.00); }
  50%       { box-shadow: 0 0 0 5px rgba(255,68,68,0.10); }
}

/* ── Card header ─────────────────────────────────────────────────────── */
.thresh-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.thresh-card-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Status badge ────────────────────────────────────────────────────── */
.thresh-status-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
}
.thresh-ok   { background: rgba(62,200,128,0.08);  color: var(--sev-4);  border: 1px solid rgba(62,200,128,0.20); }
.thresh-warn { background: rgba(255,140,0,0.10);   color: var(--sev-2);  border: 1px solid rgba(255,140,0,0.30); }
.thresh-crit { background: rgba(255,68,68,0.12);   color: var(--sev-1);  border: 1px solid rgba(255,68,68,0.35); }
.thresh-unk  { background: var(--surface2);         color: var(--muted);  border: 1px solid var(--border-mid); }

/* ── Metric value — dominant, hierarchy anchor ───────────────────────── */
.thresh-card-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 14px;
}
.thresh-card.thresh-crit .thresh-card-value { color: var(--sev-1); }
.thresh-card.thresh-warn .thresh-card-value { color: var(--sev-2); }

.thresh-card-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}

/* ── Progress bar ────────────────────────────────────────────────────── */
.thresh-bar-wrap {
  margin-bottom: 6px;
}

.thresh-bar-track {
  position: relative;
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: visible;
  border: 1px solid var(--border);
}

.thresh-bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.thresh-bar-fill.thresh-ok   { background: rgba(62,200,128,0.55); }
.thresh-bar-fill.thresh-warn { background: var(--sev-2); }
.thresh-bar-fill.thresh-crit { background: var(--sev-1); }
.thresh-bar-fill.thresh-unk  { background: var(--muted); }

.thresh-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  transform: translateX(-50%);
}
.thresh-marker-warn { background: rgba(255,140,0,0.65); }
.thresh-marker-crit { background: rgba(255,68,68,0.65); }

.thresh-limits {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 10px;
  opacity: 0.75;
}

.thresh-card-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.55;
  flex: 1;
}

/* ── KPI strip state tints ───────────────────────────────────────────── */
.sys-kpi-strip.thresh-strip--ok   { background: rgba(62,200,128,0.05); }
.sys-kpi-strip.thresh-strip--warn { background: rgba(255,140,0,0.06); }
.sys-kpi-strip.thresh-strip--crit { background: rgba(255,68,68,0.08); }

.thresh-legend {
  display:        flex;
  align-items:    center;
  gap:            16px;
  margin-top:     28px;
  padding:        14px 20px;
  background:     var(--surface2);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  flex-wrap:      wrap;
}

.thresh-legend-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--text-muted);
  white-space:    nowrap;
  padding-right:  12px;
  border-right:   1px solid var(--border);
  flex-shrink:    0;
}

.thresh-legend-pills {
  display:  flex;
  gap:      8px;
  flex-wrap: wrap;
}

.thresh-legend-pill {
  display:        flex;
  align-items:    center;
  gap:            7px;
  padding:        5px 12px;
  border-radius:  20px;
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.03em;
  border:         1px solid transparent;
}
.thresh-legend-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}
.thresh-legend-pill--ok   { background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.25);   color: var(--sev-4); }
.thresh-legend-pill--ok   .thresh-legend-dot { background: var(--sev-4); }
.thresh-legend-pill--warn { background: rgba(255,140,0,0.08);   border-color: rgba(255,140,0,0.25);   color: var(--sev-2); }
.thresh-legend-pill--warn .thresh-legend-dot { background: var(--sev-2); }
.thresh-legend-pill--crit { background: rgba(255,68,68,0.08);   border-color: rgba(255,68,68,0.25);   color: var(--sev-1); }
.thresh-legend-pill--crit .thresh-legend-dot { background: var(--sev-1); }
.thresh-legend-pill--unk  { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.20); color: var(--muted); }
.thresh-legend-pill--unk  .thresh-legend-dot { background: var(--muted); }

/* =============================================================================
   ARES Structured Response Formatter
   Rich HTML output for ares_conversation ADI responses.
   ============================================================================= */

/* Outer container wrapping a full ARES response block */
.ares-resp-block {
  background: var(--adi-surface-1);
  border: 1px solid var(--adi-line-strong);
  border-left: 3px solid var(--magenta);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 4px 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--terminal-fg);
}

/* Mode label (EXPLAIN / SUMMARY / REFLECTION / ARES) */
.ares-resp-mode-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 10px;
  opacity: 0.80;
}

/* # TITLE */
.ares-resp-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terminal-fg);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--adi-line);
}

/* ## SECTION HEADER */
.ares-resp-section-hdr {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 14px 0 6px;
  opacity: 0.90;
}

/* --- divider */
.ares-resp-divider {
  height: 1px;
  background: var(--adi-line);
  margin: 12px 0;
  opacity: 0.6;
}

/* > quote / note */
.ares-resp-note {
  font-style: italic;
  font-size: 12px;
  color: var(--terminal-dim);
  border-left: 2px solid var(--border-hi);
  padding: 6px 12px;
  margin: 8px 0;
  background: rgba(192,96,248,0.04);
  border-radius: 0 3px 3px 0;
}

/* paragraph */
.ares-resp-p {
  margin: 6px 0;
  color: var(--terminal-fg);
  font-size: 13px;
  line-height: 1.65;
}

/* empty line spacer */
.ares-resp-gap { height: 8px; }

/* bullet / numbered list */
.ares-resp-list {
  margin: 6px 0 6px 18px;
  padding: 0;
}
.ares-resp-list li {
  margin-bottom: 5px;
  color: var(--terminal-fg);
  font-size: 13px;
  line-height: 1.55;
  list-style-type: disc;
}
.ares-resp-ol li { list-style-type: decimal; }

/* inline formatting */
.ares-resp-block strong { color: var(--terminal-fg); font-weight: 700; }
.ares-resp-block em     { font-style: italic; color: var(--terminal-dim); }
.ares-underline         { text-decoration: underline; text-underline-offset: 2px; }
.ares-code              { font-family: var(--font-mono); font-size: 12px; background: var(--adi-surface-3); border: 1px solid var(--adi-line-strong); border-radius: 3px; padding: 1px 5px; color: var(--magenta); }

/* color-coded spans */
.ares-warn { color: var(--sev-1); font-weight: 600; }
.ares-ok   { color: var(--sev-4); font-weight: 600; }
.ares-unk  { color: var(--sev-3); font-weight: 600; }

/* sources footer */
.ares-resp-sources {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--terminal-muted);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  opacity: 0.70;
}

/* ─────────────────────────────────────────────────────────────────────────
   PASS 3 — Provenance Badges, Freshness, Mode Switcher, Nav Links, Debug
   ───────────────────────────────────────────────────────────────────────── */

/* ── Provenance Badge ─────────────────────────────────────────────────── */
.prov-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.prov-live    { color: var(--sev-4);  background: color-mix(in srgb, var(--sev-4) 12%, transparent);  border-color: color-mix(in srgb, var(--sev-4) 30%, transparent); }
.prov-derived { color: #5eaeff;       background: color-mix(in srgb, #5eaeff 10%, transparent);        border-color: color-mix(in srgb, #5eaeff 25%, transparent); }
.prov-mock    { color: var(--muted);  background: color-mix(in srgb, var(--muted) 12%, transparent);   border-color: color-mix(in srgb, var(--muted) 25%, transparent); }
.prov-unknown { color: var(--sev-3);  background: color-mix(in srgb, var(--sev-3) 10%, transparent);   border-color: color-mix(in srgb, var(--sev-3) 22%, transparent); }

/* ── Intelligence Freshness Block ─────────────────────────────────────── */
.intel-freshness {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.intel-freshness-dot {
  font-size: 8px;
  color: var(--sev-4);
  line-height: 1;
}
.intel-freshness-ts  { color: var(--terminal-dim); }
.intel-freshness-age {
  color: var(--muted);
  font-size: 10px;
  opacity: 0.75;
}

/* ── Intelligence Toolbar (cross-page nav) ────────────────────────────── */
.intel-toolbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px 0;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.ct-toolbar { margin-bottom: 14px; }

/* ── Intel Nav Link button ────────────────────────────────────────────── */
.intel-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--magenta);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--magenta) 28%, transparent);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.intel-nav-link:hover {
  background: color-mix(in srgb, var(--magenta) 10%, transparent);
  border-color: color-mix(in srgb, var(--magenta) 50%, transparent);
  color: var(--magenta);
}

/* ── ADI Mode Switcher ────────────────────────────────────────────────── */
.adi-mode-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  border-radius: 5px;
  padding: 2px;
}
.adi-mode-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.adi-mode-btn:hover { color: var(--terminal-fg); background: var(--surface3); }
.adi-mode-active {
  color: var(--magenta) !important;
  background: color-mix(in srgb, var(--magenta) 14%, transparent) !important;
}

/* ── ARES Response: inline nav link ──────────────────────────────────── */
.ares-resp-link {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  color: var(--magenta);
  background: transparent;
  border: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--magenta) 50%, transparent);
  padding: 0 1px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
}
.ares-resp-link:hover {
  color: color-mix(in srgb, var(--magenta) 80%, white);
  border-bottom-style: solid;
}

/* ── ARES Response: output mode label ────────────────────────────────── */
.ares-resp-mode-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--magenta);
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.9;
}
.ares-resp-output-mode {
  font-size: 9px;
  font-weight: 600;
  color: var(--terminal-muted);
  background: var(--adi-surface-3);
  border: 1px solid var(--adi-line-strong);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

/* ── ARES Response: summary mode truncation hint ─────────────────────── */
.ares-resp-summary-hint {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--terminal-muted);
  background: var(--adi-surface-2);
  border: 1px dashed var(--adi-line-strong);
  border-radius: 3px;
  padding: 3px 9px;
  margin-top: 8px;
  opacity: 0.80;
  cursor: default;
}
.ares-resp-summary-mode { opacity: 0.92; }

/* ── ARES Response: debug payload ────────────────────────────────────── */
.ares-resp-debug {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--sev-3) 30%, transparent);
  border-radius: 4px;
  overflow: hidden;
}
.ares-resp-debug-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sev-3);
  background: color-mix(in srgb, var(--sev-3) 8%, transparent);
  padding: 4px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--sev-3) 20%, transparent);
}
.ares-resp-debug-pre {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.55;
  color: var(--terminal-fg);
  background: var(--adi-surface-2);
  overflow-x: auto;
  white-space: pre;
}

/* ── Causality: (chain-header-right removed — see ct-entry-top / ct-entry-ts) ── */

/* ── Anomaly / Symbolic: cross-link footer ───────────────────────────── */
.anom-cross-links,
.sym-cross-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Threshold card: header right slot + nav button ──────────────────── */
.thresh-card-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.thresh-card-nav {
  margin-top: 10px;
}

/* ── Drift history section header ────────────────────────────────────── */
.drift-hist-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 10px 0;
}
.drift-hist-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--terminal-dim);
}

/* ── Behavioral Trajectory: Phase 7 additions ───────────────────────────── */

/* History row v2 — 3 columns (ts | transition | age) replaces 4-col mock layout */
.drift-hist-header--v2,
.drift-hist-row--v2 {
  grid-template-columns: 140px 1fr 70px;
}

.drift-hist-transition-scroll {
  display:     flex;
  gap:         6px;
  overflow-x:  auto;
  min-width:   0;
  white-space: nowrap;
  scrollbar-width: none;
}
.drift-hist-transition-scroll::-webkit-scrollbar { display: none; }

.drift-hist-transition {
  display:     flex;
  gap:         6px;
  align-items: center;
}

.drift-hist-from {
  font-family: var(--font-mono);
  font-size:   12px;
  color:       var(--text-muted);
  white-space: nowrap;
}

.drift-hist-arrow {
  color:       var(--accent);
  flex-shrink: 0;
  font-size:   12px;
}

.drift-hist-to {
  font-family: var(--font-mono);
  font-size:   12px;
  font-weight: 600;
  color:       var(--text);
  white-space: nowrap;
}

.drift-hist-age {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
  text-align:  right;
}

@media (max-width: 820px) {
  .drift-hist-header--v2,
  .drift-hist-row--v2 { grid-template-columns: 110px 1fr; }
  .drift-hist-age { display: none; }
}

/* Windows row — 3 timing tiles before the history panels */
.drift-windows-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         20px;
}

@media (max-width: 700px) {
  .drift-windows-row { grid-template-columns: 1fr 1fr; }
}

/* Trajectory Projection zone */
.drift-trajectory {
  background:    var(--card-bg);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       18px 20px;
  margin-top:    20px;
}

.drift-traj-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 16px;
}

.drift-traj-label {
  font-family:     var(--font-mono);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  color:           var(--terminal-dim);
}

.drift-traj-dist {
  margin-bottom: 16px;
}

.drift-traj-dist-label {
  font-size:     11.5px;
  color:         var(--text-dim);
  margin-bottom: 12px;
}

/* ── Stat strip (replaces bar rows) ────────────────────────── */
.drift-traj-stat-strip {
  display:          grid;
  grid-template-columns: repeat(4, 1fr);
  gap:              1px;
  background:       var(--border);
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  overflow:         hidden;
  margin-bottom:    16px;
}
.drift-traj-stat {
  background:       var(--card-bg);
  padding:          14px 16px;
  display:          flex;
  flex-direction:   column;
  gap:              3px;
}
.drift-traj-stat--dom {
  background: color-mix(in srgb, rgba(139,92,246,1) 6%, var(--card-bg));
}
.drift-traj-stat-cls {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          var(--text-muted);
  text-transform: uppercase;
}
.drift-traj-stat-name {
  font-size: 11.5px;
  color:     var(--text-muted);
}
.drift-traj-stat-pct {
  font-family: var(--font-mono);
  font-size:   24px;
  font-weight: 700;
  color:       var(--text);
  margin-top:  6px;
  line-height: 1;
}
.drift-traj-stat-pct--dom {
  color: rgba(139,92,246,0.95);
}

.drift-traj-bar-row {
  display:         grid;
  grid-template-columns: 60px 100px 1fr 48px;
  gap:             0 10px;
  align-items:     center;
  margin-bottom:   7px;
}

.drift-traj-bar-label {
  font-family: var(--font-mono);
  font-size:   12px;
  font-weight: 700;
}

.drift-traj-bar-name {
  font-size: 11.5px;
  color:     var(--text-muted);
}

.drift-traj-bar-track {
  height:        6px;
  background:    var(--surface2);
  border-radius: 3px;
  overflow:      hidden;
}

.drift-traj-bar-fill {
  height:        100%;
  border-radius: 3px;
  transition:    width 0.4s ease;
}

.drift-traj-bar-pct {
  font-family: var(--font-mono);
  font-size:   11px;
  text-align:  right;
  color:       var(--text-dim);
}

.drift-traj-insufficient {
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 6px;
  padding:       12px 14px;
}

.drift-traj-insuf-icon {
  font-size:   16px;
  color:       var(--text-muted);
  flex-shrink: 0;
  margin-top:  1px;
}

.drift-traj-insuf-body {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.drift-traj-insuf-title {
  font-family: var(--font-mono);
  font-size:   12px;
  font-weight: 600;
  color:       var(--text-dim);
}

.drift-traj-insuf-msg {
  font-size:   12px;
  color:       var(--text-muted);
  line-height: 1.6;
}

.drift-traj-empty {
  font-size:   13px;
  color:       var(--text-muted);
  font-style:  italic;
  padding:     8px 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   ACTION ENGINE — Page, Cards, Inline Blocks, Status Controls
   ───────────────────────────────────────────────────────────────────────── */

/* ── Controls bar (filters + sort) ───────────────────────────────────── */
.ae-controls {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.ae-filter-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1;
}
.ae-ctrl-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ae-filter-btns {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
}
.ae-filter-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.ae-filter-btn:hover  { color: var(--terminal-fg); background: var(--surface3); }
.ae-filter-active     { color: var(--magenta) !important; background: color-mix(in srgb, var(--magenta) 12%, transparent) !important; border-color: color-mix(in srgb, var(--magenta) 30%, transparent) !important; }
.ae-filter-btn-crit   { border-color: color-mix(in srgb, var(--sev-1) 30%, transparent); color: color-mix(in srgb, var(--sev-1) 80%, var(--muted)); }
.ae-filter-btn-crit.ae-filter-active { color: var(--sev-1) !important; background: color-mix(in srgb, var(--sev-1) 10%, transparent) !important; border-color: color-mix(in srgb, var(--sev-1) 35%, transparent) !important; }
.ae-filter-btn-high   { border-color: color-mix(in srgb, var(--sev-2) 30%, transparent); color: color-mix(in srgb, var(--sev-2) 80%, var(--muted)); }
.ae-filter-btn-high.ae-filter-active { color: var(--sev-2) !important; background: color-mix(in srgb, var(--sev-2) 10%, transparent) !important; border-color: color-mix(in srgb, var(--sev-2) 35%, transparent) !important; }

/* ── Summary bar ──────────────────────────────────────────────────────── */
.ae-summary-bar {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 20px;
}
.ae-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 16px;
  flex: 1;
}
.ae-summary-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}
.ae-summary-count {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.ae-summary-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.ae-summary-open  .ae-summary-count { color: var(--magenta); }
.ae-summary-crit  .ae-summary-count { color: var(--sev-1); }
.ae-summary-high  .ae-summary-count { color: var(--sev-2); }
.ae-summary-done  .ae-summary-count { color: var(--sev-4); }

/* ── Priority group header ────────────────────────────────────────────── */
.ae-group { margin-bottom: 24px; }
.ae-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ae-group-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}
.ae-group-cards { display: flex; flex-direction: column; gap: 10px; }

/* ── Action card ─────────────────────────────────────────────────────── */
.ae-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 5px;
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ae-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.ae-card-critical { border-left-color: var(--sev-1); }
.ae-card-high     { border-left-color: var(--sev-2); }
.ae-card-medium   { border-left-color: var(--sev-3); }
.ae-card-low      { border-left-color: var(--border-hi); }
.ae-card-inactive { opacity: 0.50; }
.ae-card-inactive:hover { opacity: 0.70; }

/* card header */
.ae-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ae-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.ae-type-icon {
  font-size: 14px;
  color: var(--terminal-dim);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.ae-card-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.ae-card-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Priority badge */
.ae-priority-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ae-pri-critical { color: var(--sev-1); background: color-mix(in srgb, var(--sev-1) 10%, transparent); border-color: color-mix(in srgb, var(--sev-1) 30%, transparent); }
.ae-pri-high     { color: var(--sev-2); background: color-mix(in srgb, var(--sev-2) 10%, transparent); border-color: color-mix(in srgb, var(--sev-2) 30%, transparent); }
.ae-pri-medium   { color: var(--sev-3); background: color-mix(in srgb, var(--sev-3) 10%, transparent); border-color: color-mix(in srgb, var(--sev-3) 25%, transparent); }
.ae-pri-low      { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent);  border-color: color-mix(in srgb, var(--muted) 20%, transparent); }

/* Status badge */
.ae-status-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ae-st-open        { color: var(--terminal-dim); background: var(--surface3); border-color: var(--border-mid); }
.ae-st-in-progress { color: #5eaeff; background: color-mix(in srgb, #5eaeff 10%, transparent); border-color: color-mix(in srgb, #5eaeff 25%, transparent); }
.ae-st-completed   { color: var(--sev-4); background: color-mix(in srgb, var(--sev-4) 10%, transparent); border-color: color-mix(in srgb, var(--sev-4) 25%, transparent); }
.ae-st-dismissed   { color: var(--muted); background: transparent; border-color: var(--border); }

/* reason text */
.ae-card-reason {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text);
  margin: 6px 0 12px 0;
}

/* recommended next step */
.ae-recommended-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface3);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--magenta);
  border-radius: 4px;
  padding: 10px 13px;
  margin-bottom: 12px;
}
.ae-step-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
}
.ae-step-text {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

/* card footer */
.ae-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ae-card-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ae-conf-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ae-conf-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.ae-conf-track {
  width: 72px;
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}
.ae-conf-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.ae-conf-low  { background: var(--sev-3); }
.ae-conf-mid  { background: #5eaeff; }
.ae-conf-high { background: var(--sev-4); }
.ae-conf-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mid);
  font-weight: 600;
}
.ae-type-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ae-footer-sep {
  font-size: 10px;
  color: var(--border-hi);
  user-select: none;
}
.ae-created {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

/* destination button */
.ae-dest-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--magenta);
  background: color-mix(in srgb, var(--magenta) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--magenta) 28%, transparent);
  border-radius: 4px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.ae-dest-btn:hover {
  background: color-mix(in srgb, var(--magenta) 16%, transparent);
  border-color: color-mix(in srgb, var(--magenta) 50%, transparent);
}

/* status action buttons */
.ae-status-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.ae-status-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s, border-color 0.1s;
}
.ae-status-btn:hover              { color: var(--terminal-fg); background: var(--surface3); }
.ae-status-btn-resolve            { color: color-mix(in srgb, var(--sev-4) 80%, var(--muted)); border-color: color-mix(in srgb, var(--sev-4) 25%, transparent); }
.ae-status-btn-resolve:hover      { color: var(--sev-4); background: color-mix(in srgb, var(--sev-4) 10%, transparent); }
.ae-status-btn-dismiss            { color: color-mix(in srgb, var(--sev-1) 60%, var(--muted)); border-color: color-mix(in srgb, var(--sev-1) 20%, transparent); }
.ae-status-btn-dismiss:hover      { color: var(--sev-1); background: color-mix(in srgb, var(--sev-1) 8%, transparent); }

/* debug metadata row */
.ae-debug-row {
  display: flex;
  align-items: baseline;
  gap: 6px 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed color-mix(in srgb, var(--sev-3) 25%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
}
.ae-debug-key {
  color: var(--sev-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ae-debug-val { color: var(--terminal-dim); }

/* ── Empty state ──────────────────────────────────────────────────────── */
.ae-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}
.ae-empty-icon {
  font-size: 28px;
  color: var(--border-hi);
  opacity: 0.5;
}
.ae-empty-title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--terminal-dim);
}
.ae-empty-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  max-width: 380px;
  line-height: 1.6;
}

/* ── Inline action block in ADI ───────────────────────────────────────── */
.ae-inline-block {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--magenta) 20%, transparent);
  border-radius: 5px;
  overflow: hidden;
}
.ae-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--magenta) 7%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--magenta) 18%, transparent);
}
.ae-inline-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
}
.ae-inline-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
}
.ae-inline-block .ae-card {
  border-radius: 0;
  border-left: 3px solid transparent;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border);
}
.ae-inline-block .ae-card:last-of-type { border-bottom: none; }
.ae-inline-block .ae-card-critical { border-left-color: var(--sev-1); }
.ae-inline-block .ae-card-high     { border-left-color: var(--sev-2); }
.ae-inline-block .ae-card-medium   { border-left-color: var(--sev-3); }
.ae-inline-block .ae-card-low      { border-left-color: var(--border-hi); }
.ae-inline-nav {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--magenta) 18%, transparent);
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin-top: 0;
  padding: 7px 12px;
  font-size: 11px;
}

/* ── Pass 5: ARES Priority Intelligence ───────────────────────────────────── */

/* ARES RECOMMENDS Strip */
.ares-rec-strip {
  margin: 0 0 12px 0;
  border-radius: 6px;
  border: 1px solid var(--border-hi);
  border-left: 3px solid var(--magenta);
  background: color-mix(in srgb, var(--magenta) 6%, var(--surface2));
  padding: 10px 14px 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.ares-rec-strip-critical { border-left-color: var(--sev-1); background: color-mix(in srgb, var(--sev-1) 6%, var(--surface2)); }
.ares-rec-strip-high     { border-left-color: var(--sev-2); background: color-mix(in srgb, var(--sev-2) 5%, var(--surface2)); }
.ares-rec-strip-medium   { border-left-color: var(--sev-3); background: color-mix(in srgb, var(--sev-3) 4%, var(--surface2)); }
.ares-rec-strip-low      { border-left-color: var(--border-hi); background: var(--surface2); }
.ares-rec-strip-calm     { border-left-color: var(--text-dim); border-color: var(--border); background: var(--surface2); opacity: 0.7; }

.ares-rec-strip-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ares-rec-eyebrow {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 600;
  line-height: 1;
}
.ares-rec-strip-critical .ares-rec-eyebrow { color: var(--sev-1); }
.ares-rec-strip-high     .ares-rec-eyebrow { color: var(--sev-2); }
.ares-rec-strip-medium   .ares-rec-eyebrow { color: var(--sev-3); }
.ares-rec-strip-low      .ares-rec-eyebrow { color: var(--text-dim); }
.ares-rec-strip-calm     .ares-rec-eyebrow { color: var(--text-dim); }

.ares-rec-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ares-rec-trigger {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ares-rec-step {
  font-size: 11.5px;
  color: var(--text-mid);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ares-rec-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.ares-rec-goto {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--magenta) 40%, transparent);
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
  color: var(--magenta);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.ares-rec-goto:hover {
  background: color-mix(in srgb, var(--magenta) 22%, transparent);
  border-color: var(--magenta);
}
.ares-rec-strip-critical .ares-rec-goto { border-color: color-mix(in srgb, var(--sev-1) 40%, transparent); background: color-mix(in srgb, var(--sev-1) 10%, transparent); color: var(--sev-1); }
.ares-rec-strip-critical .ares-rec-goto:hover { background: color-mix(in srgb, var(--sev-1) 20%, transparent); border-color: var(--sev-1); }
.ares-rec-strip-high .ares-rec-goto     { border-color: color-mix(in srgb, var(--sev-2) 40%, transparent); background: color-mix(in srgb, var(--sev-2) 10%, transparent); color: var(--sev-2); }
.ares-rec-strip-high .ares-rec-goto:hover { background: color-mix(in srgb, var(--sev-2) 20%, transparent); border-color: var(--sev-2); }

.ares-rec-action-btn {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ares-rec-action-btn:hover {
  background: var(--surface3);
  color: var(--text-hi);
}
.ares-rec-calm-msg {
  font-size: 12px;
  color: var(--text-dim);
  align-self: center;
}

/* Priority Rank Badge */
.ae-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  background: color-mix(in srgb, var(--magenta) 15%, var(--surface3));
  color: var(--magenta);
  border: 1px solid color-mix(in srgb, var(--magenta) 30%, transparent);
  flex-shrink: 0;
  cursor: default;
}
.ae-card-critical .ae-rank-badge { background: color-mix(in srgb, var(--sev-1) 15%, var(--surface3)); color: var(--sev-1); border-color: color-mix(in srgb, var(--sev-1) 30%, transparent); }
.ae-card-high     .ae-rank-badge { background: color-mix(in srgb, var(--sev-2) 15%, var(--surface3)); color: var(--sev-2); border-color: color-mix(in srgb, var(--sev-2) 30%, transparent); }
.ae-card-medium   .ae-rank-badge { background: color-mix(in srgb, var(--sev-3) 15%, var(--surface3)); color: var(--sev-3); border-color: color-mix(in srgb, var(--sev-3) 30%, transparent); }

/* Trigger Basis "WHY" line */
.ae-trigger-basis {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.5;
  margin: 4px 0 8px 0;
}
.ae-trigger-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.ae-trigger-text {
  font-family: var(--font-mono);
  color: var(--text);
}

/* Feedback row */
.ae-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.ae-feedback-label {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: .05em;
}
.ae-feedback-btn {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 4px;
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ae-feedback-btn:hover { background: var(--surface3); color: var(--text-hi); }
.ae-fb-yes.ae-fb-selected  { background: color-mix(in srgb, #3c9, 12%, transparent); border-color: #3c9; color: #3c9; }
.ae-fb-no.ae-fb-selected-no { background: color-mix(in srgb, var(--sev-1) 12%, transparent); border-color: var(--sev-1); color: var(--sev-1); }
.ae-fb-recorded {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-left: 4px;
}

/* Critical top action pulse animation */
@keyframes ae-pulse-border {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sev-1) 40%, transparent); }
  60%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sev-1) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sev-1) 0%, transparent); }
}
.ae-card-top-critical {
  animation: ae-pulse-border 2.4s ease-out infinite;
}
.ae-badge-pulse {
  animation: ae-pulse-border 2.4s ease-out infinite;
  border-radius: 50%;
}

/* Action Engine Briefing Section */
.ae-briefing {
  border: 1px solid var(--border-hi);
  border-left: 3px solid var(--magenta);
  border-radius: 6px;
  background: color-mix(in srgb, var(--magenta) 5%, var(--surface2));
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ae-briefing-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ae-briefing-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ae-briefing-top-action {
  flex: 1 1 0;
  min-width: 0;
}
.ae-briefing-top-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 3px;
}
.ae-briefing-top-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.35;
}
.ae-briefing-rank-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.ae-briefing-trigger {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 2px;
}
.ae-briefing-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.ae-briefing-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.ae-briefing-stat-n {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}
.ae-briefing-stat-l {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ae-briefing-stat-crit .ae-briefing-stat-n { color: var(--sev-1); }
.ae-briefing-stat-high .ae-briefing-stat-n { color: var(--sev-2); }
.ae-briefing-stat-dim  .ae-briefing-stat-n { color: var(--text-dim); }

/* Briefing calm state */
.ae-briefing-calm {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.ae-briefing-calm-icon {
  font-size: 22px;
  flex-shrink: 0;
  opacity: .6;
}
.ae-briefing-calm-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ae-briefing-calm-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}
.ae-briefing-calm-msg {
  font-size: 12px;
  color: var(--text-dim);
}

/* ── Pass 6: ARES Memory of Resolution ────────────────────────────────────── */

/* Memory section on action cards */
.ae-memory-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px 0 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 4px 0 6px 0;
}
.ae-memory-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.ae-memory-pattern {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .05em;
  border-radius: 3px;
  padding: 1px 6px;
  border: 1px solid transparent;
}
.ae-mem-new       { color: var(--text-dim);  background: var(--surface3);                                    border-color: var(--border); }
.ae-mem-recurring { color: #7ab4f5;          background: color-mix(in srgb, #7ab4f5 10%, transparent);      border-color: color-mix(in srgb, #7ab4f5 30%, transparent); }
.ae-mem-stable    { color: #5ecf8a;          background: color-mix(in srgb, #5ecf8a 10%, transparent);      border-color: color-mix(in srgb, #5ecf8a 30%, transparent); }
.ae-mem-unstable  { color: var(--sev-2);     background: color-mix(in srgb, var(--sev-2) 10%, transparent); border-color: color-mix(in srgb, var(--sev-2) 30%, transparent); }
.ae-mem-detail {
  font-size: 10.5px;
  color: var(--text-dim);
}
.ae-mem-eff {
  font-size: 10.5px;
  color: var(--text-dim);
}
.ae-mem-eff-good { color: #5ecf8a; }
.ae-mem-eff-bad  { color: var(--sev-2); }

/* Memory context block in ADI output */
.ae-adi-memory-block {
  background: color-mix(in srgb, var(--magenta) 6%, var(--adi-surface-2));
  border: 1px solid color-mix(in srgb, var(--magenta) 22%, var(--adi-line-strong));
  border-left: 3px solid color-mix(in srgb, var(--magenta) 50%, transparent);
  border-radius: 5px;
  margin: 6px 0;
  overflow: hidden;
}
.ae-adi-memory-header {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--magenta) 18%, var(--adi-line));
}
.ae-adi-memory-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta);
}
.ae-adi-memory-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.ae-adi-memory-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--adi-line);
}
.ae-adi-memory-item:last-child { border-bottom: none; }
.ae-adi-memory-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--terminal-fg);
  line-height: 1.3;
}
.ae-adi-memory-detail {
  font-size: 10.5px;
  color: var(--terminal-dim);
  font-style: italic;
  line-height: 1.4;
}

/* ── Pass 7: ARES Strategic Insight ───────────────────────────────────────── */

/* Strategic insight cards */
.si-card {
  background: var(--surface2);
  border: 1px solid var(--border-hi);
  border-left: 3px solid var(--border-hi);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.si-card-critical { border-left-color: var(--sev-1); background: color-mix(in srgb, var(--sev-1) 4%, var(--surface2)); }
.si-card-high     { border-left-color: var(--sev-2); background: color-mix(in srgb, var(--sev-2) 4%, var(--surface2)); }
.si-card-elevated { border-left-color: var(--sev-3); background: color-mix(in srgb, var(--sev-3) 4%, var(--surface2)); }
.si-card-moderate { border-left-color: color-mix(in srgb, var(--magenta) 60%, transparent); }
.si-card-low      { border-left-color: var(--text-dim); opacity: .88; }

.si-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.si-card-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
}
.si-type-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: .75;
}
.si-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.35;
}
.si-card-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Trajectory badges */
.si-trajectory-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.si-traj-increasing { color: var(--sev-2);  background: color-mix(in srgb, var(--sev-2)  10%, transparent); border-color: color-mix(in srgb, var(--sev-2)  30%, transparent); }
.si-traj-decreasing { color: #5ecf8a;       background: color-mix(in srgb, #5ecf8a       10%, transparent); border-color: color-mix(in srgb, #5ecf8a       30%, transparent); }
.si-traj-stable     { color: #7ab4f5;       background: color-mix(in srgb, #7ab4f5       10%, transparent); border-color: color-mix(in srgb, #7ab4f5       30%, transparent); }
.si-traj-volatile   { color: var(--magenta);background: color-mix(in srgb, var(--magenta) 10%, transparent); border-color: color-mix(in srgb, var(--magenta) 30%, transparent); }
.si-traj-unknown    { color: var(--text-dim);background: var(--surface3);                                    border-color: var(--border); }

/* Risk badges */
.si-risk-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.si-risk-critical { color: var(--sev-1); background: color-mix(in srgb, var(--sev-1) 14%, transparent); border-color: color-mix(in srgb, var(--sev-1) 35%, transparent); }
.si-risk-high     { color: var(--sev-2); background: color-mix(in srgb, var(--sev-2) 14%, transparent); border-color: color-mix(in srgb, var(--sev-2) 35%, transparent); }
.si-risk-elevated { color: var(--sev-3); background: color-mix(in srgb, var(--sev-3) 14%, transparent); border-color: color-mix(in srgb, var(--sev-3) 35%, transparent); }
.si-risk-moderate { color: var(--magenta); background: color-mix(in srgb, var(--magenta) 12%, transparent); border-color: color-mix(in srgb, var(--magenta) 30%, transparent); }
.si-risk-low      { color: var(--text-dim); background: var(--surface3); border-color: var(--border); }

/* Card body */
.si-card-summary {
  font-size: 12.5px;
  color: var(--text-mid);
  line-height: 1.55;
  margin: 0 0 9px 0;
}

/* "Why ARES believes this" block */
.si-why-block {
  background: color-mix(in srgb, var(--magenta) 4%, var(--surface3));
  border: 1px solid color-mix(in srgb, var(--magenta) 18%, var(--border));
  border-radius: 4px;
  padding: 7px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.si-why-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--magenta);
}
.si-why-text {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
  font-style: italic;
}

/* Preemptive action block */
.si-preemptive {
  background: color-mix(in srgb, #7ab4f5 5%, var(--surface3));
  border: 1px solid color-mix(in srgb, #7ab4f5 22%, var(--border));
  border-radius: 4px;
  padding: 7px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.si-preemptive-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7ab4f5;
}
.si-preemptive-step {
  font-size: 11.5px;
  color: var(--text-mid);
  line-height: 1.5;
}

/* Based-on line */
.si-based-on {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.si-based-on-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.si-based-on-text {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* Card footer */
.si-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.si-type-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: .04em;
}
.si-conf-row {
  flex: 1 1 140px;
}
.si-dest-btn {
  margin-left: auto;
}

/* Group layout */
.si-group {
  margin-bottom: 18px;
}
.si-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.si-group-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.si-group-label-immediate { color: var(--sev-2); }
.si-group-label-emerging  { color: var(--magenta); }
.si-group-label-stable    { color: var(--text-dim); }
.si-group-count {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-left: auto;
}

/* Calm state */
.si-calm-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  opacity: .8;
}
.si-calm-icon {
  font-size: 26px;
  flex-shrink: 0;
  opacity: .45;
}
.si-calm-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.si-calm-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}
.si-calm-msg {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ── Phase 8: Sub-game badge ──────────────────────────────────────────────── */
.si-subgame-badge {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  font-weight:    700;
  letter-spacing: 0.04em;
  padding:        2px 5px;
  border-radius:  3px;
  border:         1px solid currentColor;
  opacity:        0.75;
  white-space:    nowrap;
}

.si-subgame-pattern   { color: var(--sev-4);    border-color: rgba(62,200,128,0.35);  background: rgba(62,200,128,0.06); }
.si-subgame-identity  { color: var(--magenta);  border-color: rgba(192,96,248,0.35);  background: rgba(192,96,248,0.06); }
.si-subgame-symbolic  { color: var(--sev-3);    border-color: rgba(236,192,0,0.35);   background: rgba(236,192,0,0.06); }
.si-subgame-integrity { color: var(--sev-2);    border-color: rgba(255,68,68,0.35);   background: rgba(255,68,68,0.06); }

/* ── Phase 8: Trust surface ───────────────────────────────────────────────── */
.si-trust-surface {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     6px 0 2px;
  font-size:   11px;
  color:       var(--text-muted);
}

.si-trust-sep {
  color: var(--border-mid);
}

.si-trust-surface strong {
  color:       var(--text-dim);
  font-weight: 600;
}

/* ── Phase 8: Degradation section ────────────────────────────────────────── */
.si-group--degradation {
  border-top:  2px solid rgba(255,68,68,0.20);
  margin-top:  8px;
  padding-top: 6px;
}

.si-group-label-degradation {
  color:       var(--sev-2);
  font-family: var(--font-mono);
}

.si-degrad-note {
  font-size:     12px;
  color:         var(--text-dim);
  line-height:   1.55;
  margin-bottom: 14px;
  padding:       8px 12px;
  background:    rgba(255,68,68,0.04);
  border-left:   2px solid rgba(255,68,68,0.28);
  border-radius: 0 4px 4px 0;
}

/* ADI Strategic Insight block */
.si-adi-block {
  background: color-mix(in srgb, #7ab4f5 6%, var(--adi-surface-2));
  border: 1px solid color-mix(in srgb, #7ab4f5 22%, var(--adi-line-strong));
  border-left: 3px solid color-mix(in srgb, #7ab4f5 55%, transparent);
  border-radius: 5px;
  margin: 6px 0;
  overflow: hidden;
}
.si-adi-header {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid color-mix(in srgb, #7ab4f5 18%, var(--adi-line));
}
.si-adi-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7ab4f5;
}
.si-adi-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.si-adi-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--adi-line);
  border-left: 2px solid transparent;
}
.si-adi-item:last-child { border-bottom: none; }
.si-adi-item-critical  { border-left-color: var(--sev-1); }
.si-adi-item-high      { border-left-color: var(--sev-2); }
.si-adi-item-elevated  { border-left-color: var(--sev-3); }
.si-adi-item-moderate  { border-left-color: color-mix(in srgb, var(--magenta) 60%, transparent); }
.si-adi-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--terminal-fg);
  line-height: 1.3;
}
.si-adi-detail {
  font-size: 10.5px;
  color: var(--terminal-dim);
  line-height: 1.4;
}
.si-adi-meta {
  font-size: 10px;
  color: var(--terminal-muted);
  font-family: var(--font-mono);
  font-style: italic;
}
.si-adi-more {
  padding: 5px 10px;
  font-size: 10.5px;
  color: var(--magenta);
  font-family: var(--font-mono);
  cursor: pointer;
  list-style: none;
  transition: color .12s;
}
.si-adi-more:hover { color: #d080ff; }

/* ── Pass 8: ARES Notification System ─────────────────────────────────────── */

/* Bell button in sovereign strip */
.sv-btn-notif {
  position: relative;
  padding: 5px 7px;
  transition: border-color var(--ease), color var(--ease), background var(--ease), box-shadow var(--ease);
}

/* SVG envelope icon */
.notif-bell-svg {
  width: 14px;
  height: 14px;
  display: block;
  pointer-events: none;
}

/* Inactive: no pending notifications */
.notif-bell-inactive {
  color: var(--muted);
  border-color: transparent;
}
.notif-bell-inactive:hover {
  color: var(--text-dim);
  border-color: var(--border-mid);
  background: rgba(255,255,255,0.04);
}

/* Active: unread notifications present */
.notif-bell-active {
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 38%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--magenta) 28%, transparent);
}
.notif-bell-active:hover {
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 58%, transparent);
  background: color-mix(in srgb, var(--magenta) 8%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--magenta) 40%, transparent);
}

/* Notification badge */
.notif-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--sev-1);
  color: #fff;
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}

/* Notification summary bar — passive one-liner below state-bar */
.notif-summary-bar {
  margin: 0 0 8px 0;
}
.notif-summary-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .12s;
}
.notif-summary-btn:hover { color: var(--text-mid); }
.notif-summary-arrow {
  font-size: 10px;
  color: var(--magenta);
}

/* Notification panel backdrop */
.notif-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 199;
}

/* Notification panel */
.notif-panel {
  position: fixed;
  top: 44px;
  right: 12px;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 60px);
  background: var(--surface2);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  box-shadow: 0 8px 32px color-mix(in srgb, #000 40%, transparent);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-hi);
  flex-shrink: 0;
}
.notif-panel-title {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-hi);
}
.notif-panel-unread {
  font-size: 10px;
  color: var(--magenta);
  font-family: var(--font-mono);
  margin-left: 4px;
}
.notif-panel-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color .12s, background .12s;
}
.notif-panel-close:hover { color: var(--text-hi); background: var(--surface3); }
.notif-panel-body {
  overflow-y: auto;
  flex: 0 0 auto;
  max-height: calc(100dvh - 120px);
  padding: 8px 0;
}

/* Notification sections */
.notif-section {
  margin-bottom: 4px;
}
.notif-section-label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px 4px 12px;
  border-bottom: 1px solid var(--border);
}
.notif-section-critical  { color: var(--sev-1); }
.notif-section-high      { color: var(--sev-2); }
.notif-section-strategic { color: var(--magenta); }

/* Notification items */
.notif-item {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item-unread { background: color-mix(in srgb, var(--magenta) 3%, transparent); }
.notif-item-read   { opacity: .75; }
.notif-item:hover  { background: var(--surface3); }

.notif-item-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.notif-item-icon {
  font-size: 12px;
  flex-shrink: 0;
  opacity: .65;
  line-height: 1.4;
}
.notif-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.35;
  flex: 1 1 0;
  min-width: 0;
}
.notif-item-reason {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 6px;
}
.notif-item-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.notif-item-conf {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-style: italic;
}
.notif-item-time {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.notif-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.notif-view-btn {
  font-size: 10.5px;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--magenta) 35%, transparent);
  background: color-mix(in srgb, var(--magenta) 8%, transparent);
  color: var(--magenta);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.notif-view-btn:hover { background: color-mix(in srgb, var(--magenta) 18%, transparent); border-color: var(--magenta); }
.notif-dismiss-btn {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.notif-dismiss-btn:hover { color: var(--text-hi); border-color: var(--text-dim); }

/* Calm state */
.notif-calm-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
}
.notif-calm-icon {
  font-size: 20px;
  flex-shrink: 0;
  opacity: .4;
}
.notif-calm-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.notif-calm-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
}
.notif-calm-msg {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Debug bar */
.notif-debug-bar {
  font-size: 9.5px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  background: var(--surface3);
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: .04em;
}

/* =============================================================================
   Phase 11 — Foundation Pages
   Resolution Memory · Outcome Verification · Calibration · Weights · Snapshots
   ============================================================================= */

/* ── Shared foundation layout ─────────────────────────────────────────────── */
.fd-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.fd-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 20px;
  flex: 1;
  min-width: 90px;
}

.fd-stat-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.fd-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.fd-section-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(192,96,248,0.25);
  margin: 22px 0 12px;
}

/* ── Resolution Memory ────────────────────────────────────────────────────── */
.fd-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.fd-pattern-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.fd-pattern-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fd-pattern-type {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.fd-pat-stable    { background: rgba(0,200,100,0.12);  color: var(--sev-4); border: 1px solid rgba(0,200,100,0.25); }
.fd-pat-unstable  { background: rgba(255,68,68,0.12);  color: var(--sev-1); border: 1px solid rgba(255,68,68,0.25); }
.fd-pat-recurring { background: rgba(255,180,0,0.10);  color: var(--sev-2); border: 1px solid rgba(255,180,0,0.25); }
.fd-pat-new       { background: rgba(100,100,200,0.10); color: var(--muted); border: 1px solid var(--border-mid); }

.fd-pattern-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-pattern-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.fd-records-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fd-record-row {
  display: grid;
  grid-template-columns: 120px 95px 1fr 85px 100px auto;
  gap: 14px;
  align-items: center;
  padding: 9px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
}

.fd-rec-type    { color: var(--text); font-weight: 600; }
.fd-rec-status  { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fd-rs-completed { color: var(--sev-4); }
.fd-rs-dismissed { color: var(--muted); }
.fd-rec-verif   { font-size: 11px; font-weight: 600; }
.fd-verif-yes   { color: var(--sev-4); }
.fd-verif-no    { color: var(--muted); opacity: 0.6; }
.fd-rec-key     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }

/* ── Outcome Verification ─────────────────────────────────────────────────── */
.fd-outcome-row {
  display: grid;
  grid-template-columns: 120px 110px 130px 65px 90px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 4px;
}

.fd-outcome-pending   { border-color: rgba(255,180,0,0.25); }
.fd-outcome-improved  { border-color: rgba(0,200,100,0.25); }
.fd-outcome-worsened  { border-color: rgba(255,68,68,0.25);  }
.fd-outcome-unchanged { border-color: var(--border-mid); }
.fd-outcome-inconclusive { border-color: var(--border); opacity: 0.75; }

.fd-vr-improved      { color: var(--sev-4); font-weight: 700; }
.fd-vr-worsened      { color: var(--sev-1); font-weight: 700; }
.fd-vr-unchanged     { color: var(--muted); }
.fd-vr-inconclusive  { color: var(--muted); opacity: 0.6; }

.fd-evaluate-btn {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.fd-evaluate-btn:hover {
  background: color-mix(in srgb, var(--magenta) 10%, transparent);
  border-color: var(--magenta);
}
.fd-evaluate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Calibration ──────────────────────────────────────────────────────────── */
.fd-verdict-block {
  background: var(--panel-bg);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin-bottom: 20px;
}

.fd-verdict-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 8px;
}

.fd-verdict-text {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}

.fd-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.fd-cal-section {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}

.fd-cal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
}
.fd-cal-row:last-child { border-bottom: none; }
.fd-cal-type  { flex: 1; color: var(--text-dim); }
.fd-cal-count { flex-shrink: 0; color: var(--text); font-weight: 600; }
.fd-cal-rate  { flex-shrink: 0; font-size: 11px; }

/* ── Adaptive Weights ─────────────────────────────────────────────────────── */
.fd-weights-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── State context banner ─────────────────────────────────────────────────── */
.fw-state-banner {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  padding: 8px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  line-height: 1.5;
}
.fw-banner-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--magenta);
  margin-right: 8px;
}

.fw-diagnostic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.fw-diag-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-right: 4px;
}
.fw-diag-boosted {
  color: var(--sev-4);
  background: rgba(0, 200, 100, 0.08);
  border: 1px solid rgba(0, 200, 100, 0.2);
  border-radius: 3px;
  padding: 2px 8px;
}
.fw-diag-suppressed {
  color: var(--sev-2);
  background: rgba(255, 180, 0, 0.08);
  border: 1px solid rgba(255, 180, 0, 0.2);
  border-radius: 3px;
  padding: 2px 8px;
}

.fd-weights-list { display: flex; flex-direction: column; gap: 4px; }

.fd-weight-row {
  display: grid;
  grid-template-columns: 1fr 1fr 180px;
  gap: 8px 24px;
  align-items: center;
  padding: 16px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  transition: border-left-color .15s, background .15s;
}
.fd-weight-row:hover {
  background: color-mix(in srgb, var(--magenta) 3%, var(--panel-bg));
  border-left-color: var(--magenta);
}

.fd-weight-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  grid-row: 1;
  grid-column: 1;
}

.fd-weight-key {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Effective value — the number that actually drives scoring */
.fd-weight-effective {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  line-height: 1;
}

/* Adaptive delta badge — shown only when non-zero */
.fd-weight-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 3px;
}
.success.fd-weight-delta { background: rgba(0, 200, 100, 0.10); }
.warning.fd-weight-delta { background: rgba(255, 180, 0, 0.10);  }

/* Base value label — smaller, secondary */
.fd-weight-base {
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}

.fd-weight-dev {
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}

.fd-weight-range {
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}

/* Adaptation reason row — spans under the info row */
.fd-weight-reasons {
  grid-row: 2;
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--magenta);
  opacity: 0.75;
  padding: 0 2px;
}

.fd-weight-bar-wrap {
  padding: 0;
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.fd-weight-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}
.fd-weight-bar-track {
  height: 8px;
  background: var(--surface3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.fd-weight-bar-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 4px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px color-mix(in srgb, var(--magenta) 40%, transparent);
}
/* Base weight marker — vertical tick overlaid on bar */
.fd-weight-bar-base {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
  transform: translateX(-50%);
}

.fd-weight-edit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  grid-row: 1;
  grid-column: 3;
}

.fd-weight-input {
  width: 64px;
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 8px;
  text-align: center;
  transition: border-color .12s;
}
.fd-weight-input:focus {
  outline: none;
  border-color: var(--magenta);
}

.fd-weight-save {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--magenta);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.fd-weight-save:hover {
  background: color-mix(in srgb, var(--magenta) 10%, transparent);
  border-color: var(--magenta);
  box-shadow: 0 0 8px color-mix(in srgb, var(--magenta) 25%, transparent);
}
.fd-weight-save:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── State Snapshots ──────────────────────────────────────────────────────── */
.fd-snap-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.fd-trend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.fd-trend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  flex: 1;
  min-width: 120px;
}

.fd-trend-lbl {
  color: var(--muted);
}

.fd-snap-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Snapshot card ──────────────────────────────────────────────────────── */
.fd-snap-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-left-color .15s;
}
.fd-snap-card:hover { border-left-color: var(--magenta); }

.fd-snap-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
}

.fd-snap-type-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta);
}

.fd-snap-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.fd-snap-card-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.fd-snap-group {
  padding: 12px 16px;
  border-right: 1px solid var(--border);
}
.fd-snap-group:last-child { border-right: none; }

.fd-snap-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.fd-snap-metrics {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fd-snap-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.fd-snap-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-snap-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Foundation Empty States ──────────────────────────────────────────────── */
.fd-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  padding: 16px 24px;
}

/* When fd-empty-state appears inside a grid, span all columns */
.fd-pattern-grid .fd-empty-state,
.fd-records-list .fd-empty-state,
.fd-snap-list .fd-empty-state {
  grid-column: 1 / -1;
}

.fd-empty-inline {
  display: block;
  text-align: center;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  padding: 12px 0;
}

/* ── Foundation Card Descriptions ─────────────────────────────────────────── */
.fd-card-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 12px;
  opacity: 0.85;
}

/* =============================================================================
   /owner — Global UI Utilities
   Use these when building new /owner pages. They are the canonical
   implementations of patterns that previously diverged across page-specific
   namespaces (fd-*, ov-*, dlh-*, etc.).

   Rules:
   - Text truncation  → u-truncate  (not ad-hoc overflow rules per page)
   - ID / hash display → u-id        (not per-page monospace inline rules)
   - Key / label display → u-key     (not per-page inline color rules)
   - Empty states      → u-empty     (not .data-empty + fd-empty-state both)
   - Section headings  → u-section-label (not fd-section-label vs ov-panel-title)
   ============================================================================= */

/* ── Text Utilities ────────────────────────────────────────────────────────── */
.u-truncate {
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  min-width:     0;
  max-width:     100%;
}

/* Monospace ID / hash — truncatable, visually distinct */
.u-id {
  font-family:   var(--font-mono);
  font-size:     11px;
  color:         var(--text-dim);
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  min-width:     0;
  max-width:     100%;
}

/* Small monospace label — for keys, type tags, short codes */
.u-key {
  font-family:     var(--font-mono);
  font-size:       11px;
  color:           var(--muted);
  letter-spacing:  0.04em;
}

/* Dim/muted shortcuts */
.u-muted { color: var(--muted);    }
.u-dim   { color: var(--text-dim); }

/* ── Section Label Utility ─────────────────────────────────────────────────── */
/* Canonical replacement for page-specific section headings.
   Matches fd-section-label scale; consistent across all /owner pages. */
.u-section-label {
  font-family:     var(--font-mono);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--muted);
  margin:          16px 0 8px;
}

/* ── Empty State Utility ────────────────────────────────────────────────────── */
/* Canonical empty state. Use instead of .data-empty inside panels/cards,
   or instead of .fd-empty-state inside Foundation lists.
   .u-empty--grid: use when the parent is a CSS grid (spans all columns).
   .u-empty--compact: tighter padding for dense contexts. */
.u-empty {
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         32px 24px;
  width:           100%;
  font-family:     var(--font-mono);
  font-size:       13px;
  color:           var(--muted);
  line-height:     1.6;
  opacity:         0.80;
}

.u-empty--grid    { grid-column: 1 / -1; }
.u-empty--compact { padding: 14px 20px; }

/* =============================================================================
   Homepage — Command Center Hierarchy Pass
   Aligns visual priority: state-bar ↓, XP strip ↑, attention ↑, grid polish
   ============================================================================= */

/* ── State bar: Homepage-only — hidden on all other /owner pages ─────────── */
/* Default: hide. The page-overview class (toggled in mountPage) re-shows it. */
.state-bar                            { display: none; }
.main-col.page-overview .state-bar    { display: flex; }

/* Slightly reduced weight on overview — XP rail is the primary metric */
.main-col.page-overview .state-item  { padding: 8px 14px; min-width: 80px; }
.main-col.page-overview .state-value { font-size: 18px; letter-spacing: -0.01em; }
.main-col.page-overview .state-label { font-size: 10px; letter-spacing: 0.08em; }

/* ── Header: controlled spacing so XP rail feels anchored ────────────────── */
.ov2-header         { margin-bottom: 20px; }
.ov2-header-top     { padding-bottom: 18px; }

/* ── XP rail — the primary system metric on the homepage ─────────────────── */
.ov2-xp-rail        { padding: 12px 0 12px; gap: 22px; }

.ov2-xp-rail-total  {
  font-size: 26px;
  color: var(--prog-accent);
  letter-spacing: -0.02em;
}

.ov2-xp-rail-label  {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(192,96,248,0.45);
}

.ov2-xp-rail-level  { font-size: 16px; }
.ov2-xp-rail-next   { font-size: 16px; }
.ov2-xp-rail-div    { height: 36px; opacity: 0.70; }

/* ── Progress bar — premium system element ───────────────────────────────── */
.ov2-level-bar-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(0,0,0,0.28);   /* dark trough behind fill */
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
}

[data-theme="light"] .ov2-level-bar-track {
  background: rgba(0,0,0,0.12);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
}

.ov2-level-bar-fill {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--prog-accent) 0%, #e488ff 100%);
  box-shadow: 0 0 14px rgba(192,96,248,0.70), 0 0 3px rgba(192,96,248,0.45);
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .ov2-level-bar-fill {
  background: linear-gradient(90deg, var(--prog-accent) 0%, #b060f0 100%);
  box-shadow: 0 0 10px rgba(112,64,238,0.45), 0 0 3px rgba(112,64,238,0.30);
}

/* Shimmer highlight — sweeps once every 3s */
.ov2-level-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: xp-bar-shimmer 3s ease-in-out infinite;
}

@keyframes xp-bar-shimmer {
  0%   { background-position: -200% center; }
  55%  { background-position:  200% center; }
  100% { background-position:  200% center; }  /* pause at end */
}

/* ── Attention rail panel — clear visual separation from header ───────────── */
.ov2-rail-panel {
  margin-top: 0;
  margin-bottom: 20px;
  padding: 18px 22px;
  border-color: var(--border-mid);
}

/* ── Panel titles: slightly larger + brighter across the board ───────────── */
.ov2-panel-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* ── Attention cards: higher contrast + more actionable appearance ────────── */
.ov-rail-card {
  background: var(--panel-bg);
  border-color: var(--border-mid);
  gap: 14px;
}

.ov-rail-icon { font-size: 20px; width: 24px; }

.ov-rail-label { font-size: 13.5px; }
.ov-rail-hint  { font-size: 11.5px; color: var(--text-dim); }

/* Action buttons styled by priority */
.ov-rail-btn {
  border-color: var(--border-hi);
  color: var(--text-dim);
  font-weight: 600;
  padding: 5px 12px;
}
.ov-rail-high   .ov-rail-btn { border-color: var(--sev-1);        color: var(--sev-1);     }
.ov-rail-medium .ov-rail-btn { border-color: var(--prog-border-hi); color: var(--prog-accent); }
.ov-rail-btn:hover {
  background: rgba(180,80,255,0.08);
  border-color: var(--prog-accent);
  color: var(--prog-accent);
}

/* ── Lower grid: tighter, stronger ──────────────────────────────────────── */
.ov2-grid         { gap: 16px; margin-top: 20px; }
.ov2-panel        { padding: 20px 22px; }
.ov2-panel-header { margin-bottom: 14px; }

/* XP amounts in prog-accent, matching Progression page */
.ov2-xp-amount { color: var(--prog-accent); font-size: 12px; }

/* Row text slightly more legible */
.ov2-xp-event     { font-size: 12px; }
.ov2-xp-time      { font-size: 11px; }
.ov2-activity-row { padding: 8px 0; }
.ov2-xp-row       { padding: 8px 0; }

/* =============================================================================
   Intelligence Design System — unified alignment pass
   Brings Pipeline, Alerts, Tokens, Audit, and Deploy Intel into the same
   visual language as Progression. Applied via .page-intel on .main-col
   (toggled in mountPage) and .page-identity--intel on each page header.
   ============================================================================= */

/* ── Page header — Intel tier ───────────────────────────────────────────── */
/* Slightly smaller than Progression (28px) since these are operational pages,
   but still premium: gradient title, richer subtitle, generous spacing. */
.page-identity--intel {
  margin-bottom: 28px;
}

.page-identity--intel .page-identity-title {
  font-size: 22px;
  letter-spacing: 0.11em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-identity--intel .page-identity-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.65;
  max-width: min(720px, 100%);
}

/* Actions row aligned with upgraded header */
.page-identity--intel .page-identity-actions {
  padding-top: 4px;
  gap: 8px;
}

/* ── Contained control bars ─────────────────────────────────────────────── */
/* .pane-controls on Pipeline + Alerts: gain background/border enclosure.
   Matches the prog-filters-bar container used on the Progression page. */
.page-intel .pane-controls {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  gap: 6px;
}

/* Unified search/filter control bar — used in Audit (and future pages) */
.intel-control-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Search input inside intel-control-bar */
.intel-search {
  flex: 1;
  min-width: 200px;
  max-width: none;
}

/* ── filter-btn refinement inside intel pages ───────────────────────────── */
.page-intel .filter-btn {
  height: 30px;
  padding: 0 13px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* ── Data surface upgrade ───────────────────────────────────────────────── */
/* Stronger card enclosure — matches Progression table treatment */
.page-intel .data-table-wrapper {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-md);
}

/* Table headers: slightly tighter tracking, stronger bg */
.page-intel .data-table th {
  font-size: 11px;
  letter-spacing: 0.13em;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-mid);
}

/* Table rows: slightly more breathing room */
.page-intel .data-table td {
  padding: 14px 16px;
}

/* Hover row slightly brighter */
.page-intel .data-table tr:hover td {
  background: rgba(255,255,255,0.032);
}

[data-theme="light"] .page-intel .data-table tr:hover td {
  background: rgba(0,0,0,0.030);
}

/* ── Empty states — intentional system states ───────────────────────────── */
/* More visual weight: slightly larger text, full opacity, wider padding */
.page-intel .data-empty {
  padding: 64px 32px;
  font-size: 14px;
  color: var(--muted);
  opacity: 1;
  letter-spacing: 0.02em;
}

/* ── Master pane — card enclosure ───────────────────────────────────────── */
/* Pipeline and Alerts: the master-pane wraps a table that needs the same
   card-level treatment as Progression's ledger section. */
.page-intel .master-pane {
  background: transparent;
}

/* ── Token generate bar — premium action surface ────────────────────────── */
.page-intel .token-generate-bar {
  border-color: var(--border-mid);
  padding: 16px 20px;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.page-intel .token-generate-label {
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--muted);
}

/* ── Deploy Intel: KPI strip alignment with Progression ─────────────────── */
/* Override flex-based di-stats-bar to match the prog-kpi-strip grid style */
.page-intel .di-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--panel-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  flex-wrap: unset;
  margin-bottom: 24px;
}

.page-intel .di-stats-bar .di-stat {
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  min-width: unset;
  flex: unset;
  padding: 18px 22px;
  align-items: flex-start;
  transition: background var(--ease);
}

.page-intel .di-stats-bar .di-stat:hover {
  background: rgba(255,255,255,0.018);
  border-color: var(--border);
}

[data-theme="light"] .page-intel .di-stats-bar .di-stat:hover {
  background: rgba(0,0,0,0.018);
}

.page-intel .di-stats-bar .di-stat:last-child {
  border-right: none;
}

/* Warn cell (Unclassified) — left accent bar */
.page-intel .di-stats-bar .di-stat-warn {
  border-left: 2px solid var(--sev-2);
}

/* Value size tightened slightly to match prog-kpi rhythm */
.page-intel .di-stat-value {
  font-size: 22px;
  letter-spacing: -0.02em;
}

/* ── Deploy Intel panel headers — aligned with Progression panels ────────── */
.page-intel .ov-panel {
  border-color: var(--border-mid);
}

.page-intel .ov-panel-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* ── Deploy Intel feed tabs — align with filter-btn system ──────────────── */
.page-intel .di-feed-tabs {
  padding: 0 0 14px;
  gap: 5px;
}

.page-intel .di-tab {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* ── Deploy Intel controls strip — unified with intel-control-bar ────────── */
.page-intel .di-controls-strip {
  background: var(--bg2);
  border-color: var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* ── Deploy Intel classification feed rows — Progression table parity ────── */
.page-intel .ov-hist-thead {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  border-bottom-color: var(--border-mid);
}

.page-intel .ov-hist-row:hover {
  background: rgba(255,255,255,0.025);
}

/* ── Audit signal strip — slight breathing room ──────────────────────────── */
.page-intel .audit-signal-strip:not(:empty) {
  margin-bottom: 14px;
}

/* =============================================================================
   Growth Design System — unified alignment pass
   Milestones and Canon aligned to Progression's design language.
   .page-growth is toggled on .main-col for milestones / canon / progression.
   .page-identity--prog (defined in the Progression section) is reused directly
   on Milestones and Canon headers — no new header class needed.
   ============================================================================= */

/* ── Milestones: upgraded panel header ──────────────────────────────────── */
/* New .ms-panel-header replaces .ov-panel-header in the Milestones markup.
   Stronger enclosure, clearer title/subtitle hierarchy. */
.ms-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.ms-panel-title-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.ms-panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ms-panel-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.ms-panel-action {
  background: none;
  border: none;
  color: var(--prog-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 0;
  transition: opacity var(--ease);
  flex-shrink: 0;
}
.ms-panel-action:hover { opacity: 0.75; }
.ms-panel-action:disabled { opacity: 0.40; cursor: not-allowed; }

/* ── Milestones: card and surface upgrades ──────────────────────────────── */
.page-growth .ms-panel {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-sm);
}

.page-growth .cand-card {
  border-color: var(--border-mid);
  padding: 18px 20px;
}

/* ── Milestones: intentional empty states ───────────────────────────────── */
/* White-space pre-line lets the \n in the JS string become a line break. */
.page-growth .data-empty {
  padding: 60px 32px;
  font-size: 13.5px;
  opacity: 1;
  white-space: pre-line;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

/* ── Canon: section heading upgrade ────────────────────────────────────── */
/* .prog-section-heading--canon: adds visual separator + more breathing room */
.prog-section-heading--canon {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.page-growth .prog-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.page-growth .prog-section-hint {
  font-size: 11.5px;
  opacity: 0.70;
}

/* ── Canon: doc cards — stronger hierarchy ──────────────────────────────── */
.page-growth .prog-doc-card {
  border-color: var(--border-mid);
  padding: 20px 22px;
}

.page-growth .prog-doc-card:hover {
  box-shadow: 0 0 0 1px var(--prog-border), var(--shadow-md);
}

.page-growth .prog-doc-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-growth .prog-doc-meta {
  font-size: 10.5px;
  letter-spacing: 0.05em;
}

.page-growth .prog-doc-preview {
  font-size: 12.5px;
  line-height: 1.55;
}

/* ── Canon: lower panels — Progression parity ───────────────────────────── */
.page-growth .prog-panel {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-sm);
}

.page-growth .prog-panel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--text-dim);
}

/* ── Canon: reading order — guided path treatment ───────────────────────── */
.page-growth .prog-reading-item {
  padding: 8px 10px;
  border-radius: var(--radius);
  gap: 14px;
}

.page-growth .prog-reading-seq {
  font-size: 14px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 20px;
}

.page-growth .prog-reading-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.page-growth .prog-reading-why {
  font-size: 11.5px;
  line-height: 1.55;
}

/* ── Canon: Eleven Hard Laws — system-law treatment ─────────────────────── */
/* The guardrail should feel like the weight of the laws behind it.
   Stronger border, top accent stripe, generous internal spacing. */
.page-growth .prog-guardrail {
  background: rgba(255,40,40,0.05);
  border: 1px solid rgba(255,70,70,0.28);
  border-top: 3px solid rgba(255,70,70,0.55);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  margin-top: 8px;
}

[data-theme="light"] .page-growth .prog-guardrail {
  background: rgba(200,30,30,0.04);
  border-color: rgba(200,30,30,0.20);
  border-top-color: rgba(200,30,30,0.40);
}

.page-growth .prog-guardrail-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,70,70,0.18);
  gap: 16px;
}

[data-theme="light"] .page-growth .prog-guardrail-header {
  border-bottom-color: rgba(200,30,30,0.14);
}

.page-growth .prog-guardrail-icon {
  font-size: 22px;
  color: rgba(255,80,80,0.90);
  padding-top: 1px;
}

.page-growth .prog-guardrail-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
}

.page-growth .prog-guardrail-sub {
  font-size: 11px;
  color: rgba(255,110,110,0.65);
  letter-spacing: 0.04em;
}

[data-theme="light"] .page-growth .prog-guardrail-sub {
  color: rgba(180,40,40,0.60);
}

/* Law grid: slightly more room per card */
.page-growth .prog-laws-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

/* Law cards: each one feels weighted and distinct */
.page-growth .prog-law-item {
  padding: 14px 16px;
  gap: 12px;
  border: 1px solid rgba(255,60,60,0.16);
  background: rgba(255,40,40,0.025);
  border-radius: var(--radius);
}

[data-theme="light"] .page-growth .prog-law-item {
  border-color: rgba(200,30,30,0.14);
  background: rgba(200,30,30,0.025);
}

/* Law number: more prominent, accent-tinted */
.page-growth .prog-law-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: rgba(255,90,90,0.85);
  flex-shrink: 0;
  min-width: 46px;
  margin-top: 0;
  padding-top: 1px;
}

[data-theme="light"] .page-growth .prog-law-num {
  color: rgba(180,40,40,0.75);
}

/* Law text: full brightness, readable */
.page-growth .prog-law-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}

/* =============================================================================
   Command Design System — Console and Memory
   Command is the live interface layer between operator and system.
   Styling is immediate, technical, and authoritative — not a dashboard.
   .page-command toggled on .main-col for console and memory pages.
   ============================================================================= */

/* ── Page header — Command tier ─────────────────────────────────────────── */
/* No gradient — mono, direct, terminal identity.
   Deliberately different from Intel (gradient) and Growth (gradient) headers. */
.page-identity--command {
  margin-bottom: 24px;
}

.page-identity--command .page-identity-title {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
  /* intentionally no gradient — terminal identity */
}

.page-identity--command .page-identity-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.6;
}

/* ── Console: ADI input — active and ready ──────────────────────────────── */
/* Accent-colored caret — makes the cursor feel alive */
.adi-input { caret-color: var(--magenta); }

/* Stronger focus-within: border brightens, faint glow tint */
.adi-input-row:focus-within {
  border-top-color: rgba(180,80,255,0.50);
  background: rgba(180,80,255,0.04);
  box-shadow: inset 0 1px 0 rgba(180,80,255,0.10);
}

/* Console-mode focus: even stronger */
.console-mode .adi-input-row:focus-within {
  border-top-color: rgba(180,80,255,0.55);
  background: rgba(180,80,255,0.05);
}

/* ── Console: terminal output — primary text slightly brighter ──────────── */
.adi-result-line {
  color: var(--terminal-fg);
  opacity: 1;
}

/* ── Memory: backup idle state — two-line system-state layout ───────────── */
.memory-backup-card {
  border-color: var(--border-mid);
  margin-bottom: 20px;
}

.memory-backup-idle {
  gap: 16px;
  align-items: flex-start;
}

.memory-backup-idle-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Primary state line: mono, slightly prominent */
.memory-backup-idle-state {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
}

/* Secondary hint: dimmer, instructional */
.memory-backup-idle-hint {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* Icon: muted, system-state feel */
.memory-backup-idle-icon {
  font-size: 18px;
  color: var(--muted);
  opacity: 0.65;
  padding-top: 2px;
  flex-shrink: 0;
}

/* ── Memory: section header ─────────────────────────────────────────────── */
.memory-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* ── Memory: sessions table surface ─────────────────────────────────────── */
.page-command .data-table-wrapper {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-md);
}

/* "Saved" column — primary anchor, full brightness */
.session-saved {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* Period column — de-emphasized, secondary context */
.session-period {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.80;
}

/* Count columns — slightly more visible */
.session-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.session-count--open {
  color: var(--sev-3);
}

/* ── Most recent session — subtle accent highlight ──────────────────────── */
.session-row--latest > td {
  background: rgba(192,96,248,0.04);
}

.session-row--latest:hover > td {
  background: rgba(192,96,248,0.08) !important;
}

[data-theme="light"] .session-row--latest > td {
  background: rgba(144,48,208,0.04);
}

/* ── Empty state — system archive tone ──────────────────────────────────── */
.page-command .data-empty {
  white-space: pre-line;
  line-height: 1.85;
  font-size: 13.5px;
  opacity: 1;
}

/* ── Memory: session timeline continuity ────────────────────────────────── */
/* Stronger row separators — each row is a discrete event in the archive */
.sessions-table tbody tr.session-row > td {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-mid);
}

.sessions-table tbody tr.session-row:last-child > td {
  border-bottom: none;
}

/* Latest row: left accent edge — "this just happened" */
.session-row--latest > td:first-child {
  border-left: 2px solid rgba(192,96,248,0.45);
  padding-left: 14px;
}

[data-theme="light"] .session-row--latest > td:first-child {
  border-left-color: rgba(144,48,208,0.38);
}

/* Slightly stronger tint on latest row so it reads clearly at a glance */
.session-row--latest > td {
  background: rgba(192,96,248,0.05);
}

/* Section spacing — clear visual gap between backup card and archive */
.memory-sessions-section {
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESEARCH SECTION  ·  .page-research scope
   Applies to: Research Hub, Intelligence Physics, DANNPA/HDGO, Notes
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Banner: subdued system notice, not attention-grabbing ─────────────── */
.page-research .research-banner {
  background: var(--surface2);
  border-color: var(--border-mid);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ── Research Hub: mission block as elevated panel ──────────────────────── */
.page-research .research-mission-block {
  background: var(--card-bg);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--research-accent);
  box-shadow: var(--shadow-sm);
}

/* ── Hub cards: tighter system alignment ───────────────────────────────── */
.page-research .research-hub-card {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-sm);
}

.page-research .research-hub-card:hover {
  border-color: var(--research-border);
  box-shadow: 0 0 0 1px var(--research-border), var(--shadow-md);
}

/* ── Framework block as elevated panel ─────────────────────────────────── */
.page-research .research-framework-block {
  background: var(--card-bg);
  border: 1px solid var(--border-mid);
  box-shadow: var(--shadow-sm);
}

/* ── Physics research cards ─────────────────────────────────────────────── */
.page-research .research-card {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-sm);
}

/* ── DANNPA: section as discrete panel ─────────────────────────────────── */
.page-research .dannpa-section {
  background: var(--card-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}

/* Section title: stronger hierarchy — readable label, not just a heading */
.page-research .dannpa-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom-color: var(--border-mid);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SYSTEM SURFACE PATTERN — .sys-kpi-strip + .page-status-badge
   Primary system panel component. Used on all intel pages below the header.
   Matches the prog-kpi-strip pattern — every page reads state before content.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Status badge (header right: LIVE / MOCK / DERIVED) ─────────────────── */
.page-status-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid currentColor;
  line-height: 1;
  flex-shrink: 0;
}
.page-status-badge--live {
  color:       #22c55e;
  border-color: rgba(34,197,94,0.45);
  background:  rgba(34,197,94,0.08);
  text-shadow: 0 0 8px rgba(34,197,94,0.70);
  box-shadow:  0 0 10px rgba(34,197,94,0.20);
}
.page-status-badge--mock    { color: var(--muted);   }
.page-status-badge--derived { color: var(--magenta); }

/* ── Primary system state KPI strip ─────────────────────────────────────── */
.sys-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sys-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-right: 1px solid var(--border-mid);
}
.sys-kpi:last-child { border-right: none; }

.sys-kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sys-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono);
  line-height: 1;
}
.sys-kpi-value--lead { font-size: 24px; }
.sys-kpi-value--ok   { color: var(--ok);      }
.sys-kpi-value--warn { color: var(--sev-2);   }
.sys-kpi-value--crit { color: var(--sev-1);   }
.sys-kpi-value--dim  {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui);
}

/* ── Notes: session warning as system notice, not alarm ────────────────── */
.page-research .notes-session-warning {
  background: var(--surface2);
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
  font-size: 12.5px;
}

/* ── Research sections: unified layered panels ──────────────────────────── */
/* Each section is a discrete panel with clear heading and content area */
.research-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--border-mid);
}

.research-section:first-of-type {
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

/* Section heading: icon + title + subtitle stack */
.research-section-heading {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  margin-bottom: 4px;
}

.research-section-icon {
  grid-row: 1 / 3;
  font-size: 18px;
  color: var(--research-accent);
  padding-top: 2px;
}

.research-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.research-section-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Hub cards that scroll to anchor sections instead of navigating */
.research-hub-card--anchor {
  cursor: pointer;
}

/* Framework grid inside research-section (no outer block wrapper needed) */
.page-research .research-framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.page-research .research-framework-item {
  background: var(--card-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

/* ── DANNPA/HDGO state + archetype grid ─────────────────────────────────── */
.rs-states-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .rs-states-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .rs-states-grid { grid-template-columns: 1fr; } }

.rs-state-card {
  background: var(--card-bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.rs-state-card:hover {
  border-color: var(--research-border);
  box-shadow: 0 0 0 1px var(--research-border), var(--shadow-md);
}

.rs-state-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

.rs-state-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.rs-state-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}

/* nav card anchor variant */
.research-nav-card--anchor { cursor: pointer; }

/* ── ARES Architecture plane title emblems ──────────────────────────────── */
.rs-plane-badge {
  display: inline-block;
  padding: 4px 13px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  margin-bottom: 12px;
  width: fit-content;
}
.rs-plane-badge--signal   {
  color:      var(--sev-4);
  background: rgba(62, 200, 128, 0.08);
  border-color: rgba(62, 200, 128, 0.35);
}
.rs-plane-badge--oracle   {
  color:      var(--research-accent);
  background: var(--research-accent-tint);
  border-color: var(--research-border);
}
.rs-plane-badge--malbolge {
  color:      var(--magenta);
  background: rgba(192, 96, 248, 0.08);
  border-color: rgba(192, 96, 248, 0.30);
}

/* Description text inside plane cards — explicit font to match design */
.page-research .research-framework-item p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-ui);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3: Action Engine — Context Header + Consequence Block
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Context Header ─────────────────────────────────────────────────────── */
.ae-context-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
}

.ae-ctx-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.ae-ctx-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.ae-ctx-archetype {
  font-size: 12px;
  color: var(--text-dim);
}

.ae-ctx-timer {
  font-size: 11px;
  color: var(--muted);
}

.ae-ctx-timer--stale {
  color: var(--sev-3);
}

.ae-ctx-class {
  font-size: 11px;
  color: var(--muted);
}

.ae-ctx-sep {
  font-size: 11px;
  color: var(--border-mid);
  padding: 0 2px;
}

/* ── Consequence Block ──────────────────────────────────────────────────── */
.ae-consequence-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 12px;
  margin-top: 2px;
  background: var(--surface2);
  border-radius: 4px;
  border-left: 2px solid var(--border-mid);
}

.ae-cq-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ae-cq-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ae-cq-execute {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--sev-4);
}

.ae-cq-ignore {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 2: Mission Control — Windows Widget + Primary Directive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Windows Widget ─────────────────────────────────────────────────────── */
.ov2-windows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.ov2-window-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
}

.ov2-window-tile--stale {
  border-color: var(--sev-3);
}

.ov2-win-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ov2-win-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(192,96,248,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov2-win-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 860px) {
  .ov2-windows { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ov2-windows { grid-template-columns: 1fr; }
}

/* ── Primary Directive Panel ────────────────────────────────────────────── */
.ov2-directive-panel {
  margin-top: 16px;
}

.ov2-directive-body {
  padding: 0 2px 2px;
}

.ov2-directive-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--border-mid);
  background: var(--surface2);
  border-radius: 0 6px 6px 0;
}

.ov2-directive-card.directive-critical { border-left-color: var(--sev-1); }
.ov2-directive-card.directive-high     { border-left-color: var(--sev-2); }
.ov2-directive-card.directive-normal   { border-left-color: var(--sev-4); }

.ov2-directive-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ov2-directive-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ov2-directive-reason {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.ov2-directive-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ov2-directive-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--sev-4);
  padding: 2px 7px;
  background: var(--sev-4-bg);
  border-radius: 3px;
  white-space: nowrap;
}

.ov2-directive-conf {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
}

.ov2-directive-priority {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-left: auto;
}

/* ── Phase 4: Deploy Intel — Session Bar, Classification Summary, Meaning Rows ── */

/* Today's Session Bar */
.di-session-bar {
  display:      flex;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          4px 0;
  padding:      9px 14px;
  background:   var(--surface2);
  border:       1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size:    12px;
  font-family:  var(--font-mono);
}
.di-sb-label {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-right:   8px;
}
.di-sb-sep { color: var(--border-mid); padding: 0 6px; }
.di-sb-item { display: inline-flex; align-items: baseline; gap: 2px; }
.di-sb-val  { color: var(--text); font-weight: 600; }
.di-sb-lbl  { color: var(--text-dim); }
.di-sb-item--muted { color: var(--text-muted); }
.di-sb-item--warn  { color: var(--sev-3); font-weight: 600; }

/* Classification Summary Bar */
.di-cls-summary {
  margin-bottom: 10px;
}
.di-cls-bar {
  display:       flex;
  height:        7px;
  border-radius: 4px;
  overflow:      hidden;
  gap:           1px;
  margin-bottom: 7px;
}
.di-cls-seg { display: block; min-width: 2px; border-radius: 2px; }
/* Segment colors mirror cls-badge colors */
.di-cls-seg--feature_shipment     { background: #22c55e; }
.di-cls-seg--bugfix               { background: #d97706; }
.di-cls-seg--refactor             { background: #14b8a6; }
.di-cls-seg--design_polish        { background: #8b5cf6; }
.di-cls-seg--ui_refinement        { background: #8b5cf6; }
.di-cls-seg--infrastructure       { background: #3b82f6; }
.di-cls-seg--test                 { background: var(--text-muted); }
.di-cls-seg--milestone_completion { background: #ca8a04; }
.di-cls-seg--needs_review         { background: var(--border-mid); }

.di-cls-legend {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px 10px;
}
.di-cls-leg-item {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   11px;
  color:       var(--text-dim);
}
.di-cls-leg-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 2px;
  flex-shrink:   0;
}

/* Commit → Meaning bridge row */
.di-meaning-row {
  display:      flex;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          0 2px;
  padding:      4px 8px 6px 12px;
  font-size:    11px;
  color:        var(--text-muted);
  border-left:  2px solid var(--border);
  margin:       0 0 2px 0;
  background:   var(--surface);
}
.di-meaning-sep    { color: var(--border-mid); padding: 0 5px; }
.di-meaning-cls    { color: var(--text-dim); font-weight: 500; }
.di-meaning-xp     { color: var(--sev-4); font-family: var(--font-mono); }
.di-meaning-xp--decay { color: var(--text-muted); }
.di-meaning-xp--zero  { color: var(--border-mid); }
.di-meaning-impact { color: var(--text-dim); font-family: var(--font-mono); font-size: 10.5px; }

/* ── Phase 5: Identity page — Mechanical Identity, Windows row, Symbolic zone ── */

/* Zone 1: DANNPA + HDGO side-by-side panels */
/* Shared class distribution panel */
.id-class-dist-panel {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       14px 18px;
  margin-bottom: 12px;
}
.id-class-dist-header {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap:     wrap;
}
.id-class-dist-title {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-muted);
  flex:           1;
}
.id-class-dist-legend {
  display: flex;
  gap:     10px;
}
.id-class-dist-legend-item {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.08em;
  border-radius:  3px;
  padding:        2px 6px;
  font-family:    var(--font-mono);
}
.id-class-dist-legend--dannpa {
  color:      rgba(34, 211, 238, 0.85);
  background: rgba(34, 211, 238, 0.10);
  border:     1px solid rgba(34, 211, 238, 0.25);
}
.id-class-dist-legend--hdgo {
  color:      rgba(192, 96, 248, 0.75);
  background: rgba(192, 96, 248, 0.08);
  border:     1px solid rgba(192, 96, 248, 0.20);
}
.id-dist-grid {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.id-dist-row {
  display:     grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap:         10px;
}
.id-dist-label {
  font-size:   11px;
  color:       var(--text-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.id-dist-bars {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.id-dist-bar-wrap {
  display:     grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
  gap:         6px;
}
.id-dist-pct {
  font-size:   10px;
  font-family: var(--font-mono);
  text-align:  right;
}
.id-dist-pct--dannpa { color: rgba(34, 211, 238, 0.75); }
.id-dist-pct--hdgo   { color: rgba(192, 96, 248, 0.60); }
.id-bar-fill--dim    { opacity: 0.55; }

.id-mech-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         12px;
}
@media (max-width: 768px) {
  .id-mech-grid { grid-template-columns: 1fr; }
}
.id-panel {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       16px 18px;
}
.id-panel--dannpa {
  border-left: 3px solid rgba(34, 211, 238, 0.55);   /* cyan — 30-day behavioral */
}
.id-panel--hdgo {
  border-left: 3px solid rgba(192, 96, 248, 0.55);   /* magenta — 90-day archetype */
}
.id-panel-header {
  display:         flex;
  align-items:     baseline;
  gap:             8px;
  margin-bottom:   12px;
  padding-bottom:  10px;
  border-bottom:   1px solid var(--border);
}
.id-panel-badge {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.1em;
  border-radius:  3px;
  padding:        2px 5px;
  font-family:    var(--font-mono);
}
.id-panel-badge--dannpa {
  color:      rgba(34, 211, 238, 0.9);
  background: rgba(34, 211, 238, 0.10);
  border:     1px solid rgba(34, 211, 238, 0.30);
}
.id-panel-badge--hdgo {
  color:      rgba(192, 96, 248, 0.9);
  background: rgba(192, 96, 248, 0.10);
  border:     1px solid rgba(192, 96, 248, 0.30);
}
.id-panel-title {
  font-size:      13px;
  font-weight:    700;
  color:          var(--text);
  letter-spacing: 0.04em;
}
.id-panel-sub {
  font-size: 11px;
  color:     var(--text-muted);
}
.id-panel-body { }

/* State display */
.id-state-display {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 6px;
  flex-wrap:     wrap;
}
.id-state-name {
  font-size:   18px;
  font-weight: 700;
  color:       var(--text);
  line-height: 1.2;
}
.id-state-conf {
  font-size:     11px;
  color:         var(--text-muted);
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       2px 6px;
}
.id-constitution {
  font-size:     12px;
  color:         var(--text-dim);
  line-height:   1.5;
  margin-bottom: 14px;
}

/* Class distribution bars */
.id-class-bars {
  display:       flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom: 10px;
}
.id-class-bar-row {
  display:     grid;
  grid-template-columns: 130px 1fr 36px;
  align-items: center;
  gap:         8px;
}
.id-class-label {
  font-size:   11px;
  color:       var(--text-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.id-bar-track {
  height:        6px;
  background:    var(--surface3);
  border-radius: 3px;
  overflow:      hidden;
}
.id-bar-fill {
  height:        100%;
  border-radius: 3px;
  transition:    width 0.4s ease;
}
.id-bar-fill--A { background: #d97706; }   /* Consequence — amber */
.id-bar-fill--B { background: #22c55e; }   /* Construction — green */
.id-bar-fill--C { background: #3b82f6; }   /* Recovery — blue */
.id-bar-fill--D { background: #8b5cf6; }   /* Recognition — purple */
.id-class-pct {
  font-size:   11px;
  font-family: var(--font-mono);
  color:       var(--text-dim);
  text-align:  right;
}

/* Trajectory hint + previous state */
.id-trajectory {
  font-size:     11px;
  color:         var(--text-muted);
  margin-bottom: 8px;
  line-height:   1.5;
}
.id-prev-state {
  font-size: 11px;
  color:     var(--text-muted);
}
.id-prev-label { }
.id-prev-value {
  color:       var(--text-dim);
  font-weight: 500;
}
.id-prev-meta { color: var(--text-muted); }

/* Zone 2: Windows row (reuses ov2-window-tile from Phase 2) */
.id-windows-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  margin-bottom:         12px;
}
@media (max-width: 600px) {
  .id-windows-row { grid-template-columns: 1fr; }
}

/* Zone 3: Symbolic Identity */
.id-symbolic {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       14px 18px;
  margin-bottom: 12px;
}
.id-symbolic-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.id-symbolic-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
.id-symbolic-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   16px 24px;
  text-align:            center;
}
.id-sym-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
}
.id-sym-key {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
.id-sym-val {
  font-size:   14px;
  color:       var(--text);
  font-weight: 500;
}
.id-sym-val--bold {
  font-size:   15px;
  font-weight: 700;
  color:       var(--text);
}

/* Class E · Intelligence strip */
/* ── Cognitive Activity Index ────────────────────────────────────────────── */

.id-cai-section {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-left:   3px solid rgba(96, 165, 250, 0.60);
  border-radius: 8px;
  padding:       16px 20px;
  margin-bottom: 16px;
}

.id-cai-header {
  display:         flex;
  align-items:     baseline;
  gap:             10px;
  margin-bottom:   12px;
}

.id-cai-label {
  font-size:     12px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:         var(--text-primary);
}

.id-cai-header .id-cai-sub {
  font-size:   11px;
  font-family: var(--font-mono);
  color:       var(--text-muted);
  opacity:     0.6;
}

.id-cai-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   10px;
}

@media (max-width: 900px) {
  .id-cai-grid { grid-template-columns: repeat(2, 1fr); }
}

.id-cai-card {
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-radius: 6px;
  padding:       10px 12px;
  display:       flex;
  flex-direction: column;
  gap:           4px;
}

.id-cai-val {
  font-size:   20px;
  font-weight: 700;
  font-family: var(--font-mono);
  color:       var(--text-primary);
  line-height: 1;
}

.id-cai-lbl {
  font-size:   11px;
  color:       var(--text-muted);
  display:     flex;
  flex-direction: column;
  gap:         2px;
}

.id-cai-sub {
  font-size:   10px;
  font-family: var(--font-mono);
  opacity:     0.5;
}

.id-cai-interp {
  font-size:    10px;
  font-family:  var(--font-mono);
  font-weight:  600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top:   2px;
}

.id-cai-interp--active,
.id-cai-interp--sustained,
.id-cai-interp--consistent,
.id-cai-interp--high     { color: rgba(52, 211, 153, 0.85); }

.id-cai-interp--moderate,
.id-cai-interp--building,
.id-cai-interp--variable { color: rgba(251, 191, 36, 0.85); }

.id-cai-interp--quiet,
.id-cai-interp--intermittent,
.id-cai-interp--irregular,
.id-cai-interp--low,
.id-cai-interp--null     { color: var(--text-muted); opacity: 0.6; }

/* ── ─────────────────────────────────────────────────────────────────────── */

.id-class-e-strip {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-left:   3px solid rgba(192, 96, 248, 0.70);
  border-radius: 8px;
  padding:       14px 18px;
  margin-bottom: 12px;
}
.id-class-e-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.id-class-e-title-row {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  margin-bottom: 4px;
}
.id-class-e-label {
  font-size:   13px;
  font-weight: 700;
  color:       rgba(192, 96, 248, 0.90);
  letter-spacing: 0.02em;
}
.id-class-e-badge {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          rgba(192, 96, 248, 0.80);
  background:     rgba(192, 96, 248, 0.10);
  border:         1px solid rgba(192, 96, 248, 0.30);
  border-radius:  3px;
  padding:        2px 5px;
  font-family:    var(--font-mono);
}
.id-class-e-sub {
  font-size: 11px;
  color:     var(--text-muted);
}
.id-class-e-stats {
  display:   flex;
  gap:       24px;
  margin-bottom: 12px;
}
.id-class-e-stat {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.id-class-e-stat-val {
  font-size:   22px;
  font-weight: 700;
  color:       rgba(192, 96, 248, 0.90);
  line-height: 1;
}
.id-class-e-stat-key {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
.id-class-e-entries {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  max-height:     220px;
  overflow-y:     auto;
  padding-right:  4px;
}
.id-class-e-entry {
  padding:       8px 10px;
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-radius: 5px;
}
.id-class-e-entry-meta {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 3px;
  flex-wrap:   wrap;
}
.id-class-e-ctype {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--text-dim);
}
.id-class-e-xp {
  font-size:   11px;
  font-weight: 600;
  color:       rgba(192, 96, 248, 0.85);
  font-family: var(--font-mono);
}
.id-class-e-date {
  font-size:   10px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
}
.id-class-e-entry-rat .id-class-e-rationale {
  font-size:   11px;
  color:       var(--text-dim);
  line-height: 1.45;
  font-style:  italic;
}
.id-class-e-more {
  font-size: 11px;
  color:     var(--text-muted);
  padding:   4px 10px;
}

/* Add Module form */
.add-module-form {
  margin-bottom: 12px;
}
.add-module-form-inner {
  background:    var(--surface3);
  border:        1px solid var(--border-mid);
  border-radius: 6px;
  padding:       14px 16px;
  display:       flex;
  flex-direction: column;
  gap:           10px;
}
.add-module-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.add-module-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
.add-module-input {
  background:    var(--surface2);
  border:        1px solid var(--border-mid);
  border-radius: 4px;
  padding:       6px 10px;
  font-size:     12px;
  font-family:   var(--font-mono);
  color:         var(--text);
  outline:       none;
  width:         100%;
  box-sizing:    border-box;
}
.add-module-input:focus {
  border-color: var(--accent);
}
.add-module-actions {
  display: flex;
  gap:     8px;
  padding-top: 2px;
}
.add-module-status {
  font-size:   11px;
  line-height: 1.5;
  padding:     6px 10px;
  border-radius: 4px;
}
.add-module-status--error {
  color:      #f87171;
  background: rgba(248, 113, 113, 0.10);
  border:     1px solid rgba(248, 113, 113, 0.25);
}
.add-module-status--info {
  color:      var(--text-dim);
  background: var(--surface2);
  border:     1px solid var(--border);
}

/* ── Phase 6: Progression — XP Decomposition, Class DNA, Velocity ── */

/* KPI strip v2: decomposition equation + secondary row */
.prog-kpi-strip--v2 {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0;
  padding:        28px 24px 0;
  background:     var(--surface2);
  border:         1px solid var(--border);
  border-top:     2px solid rgba(139,92,246,0.50);   /* violet crown line */
  border-radius:  8px;
  margin-bottom:  12px;
  text-align:     left;
  overflow:       hidden;
}
/* Left-aligned hero: Total XP glow + My Grants button */
.prog-kpi-hero-left {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            4px;
  padding-bottom: 20px;
}
.prog-kpi-hero-left .prog-kpi-value--xl {
  font-size:      40px;
  font-weight:    800;
  color:          rgba(192, 96, 248, 0.95);
  letter-spacing: -0.01em;
  line-height:    1;
  text-shadow:    0 0 28px rgba(192, 96, 248, 0.55), 0 0 60px rgba(192, 96, 248, 0.20);
}
.prog-kpi-total-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--muted);
}
.prog-grants-btn {
  margin-top:     8px;
  font-size:      11px;
  font-weight:    600;
  font-family:    var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--text-dim);
  background:     var(--surface3);
  border:         1px solid var(--border);
  border-radius:  4px;
  padding:        5px 10px;
  cursor:         pointer;
  transition:     color var(--ease), border-color var(--ease), background var(--ease);
}
.prog-grants-btn:hover {
  color:         var(--text);
  border-color:  var(--border-mid);
}

/* ── Grants modal overlay ─────────────────────────────────────── */
.prog-grants-overlay {
  position:        fixed;
  inset:           0;
  z-index:         900;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.prog-grants-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.55);
}
.prog-grants-panel {
  position:      relative;
  background:    var(--surface2);
  border:        1px solid var(--border-mid);
  border-top:    2px solid rgba(192, 96, 248, 0.50);
  border-radius: 8px;
  min-width:     300px;
  max-width:     440px;
  width:         90%;
  box-shadow:    0 8px 40px rgba(0, 0, 0, 0.55);
}
.prog-grants-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
}
.prog-grants-panel-title {
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--text);
}
.prog-grants-panel-close {
  background:  none;
  border:      none;
  color:       var(--muted);
  cursor:      pointer;
  font-size:   14px;
  padding:     4px 6px;
  line-height: 1;
  border-radius: 3px;
  transition:  color var(--ease);
}
.prog-grants-panel-close:hover { color: var(--text); }
.prog-grants-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prog-grant-item {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     14px 16px;
  background:  var(--surface3);
  border:      1px solid var(--border);
  border-radius: 6px;
}
.prog-grant-icon {
  font-size:   64px;
  line-height: 1;
  flex-shrink: 0;
}
.prog-grant-info {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.prog-grant-name {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
}
.prog-grant-xp {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
}
.prog-grants-empty {
  font-size:  12px;
  color:      var(--muted);
  text-align: center;
  padding:    20px 0;
}
/* Stats row — full-width cells with inner borders */
.prog-kpi-row {
  display:   grid;
  grid-template-columns: repeat(5, 1fr);
  width:     calc(100% + 48px);   /* bleed to panel edges */
  margin:    0 -24px;
  border-top: 1px solid var(--border);
}
.prog-kpi {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  padding:         14px 8px;
  border-right:    1px solid var(--border);
}
.prog-kpi:last-child { border-right: none; }
.prog-kpi .prog-kpi-label {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
.prog-kpi .prog-kpi-value {
  font-size:   18px;
  font-weight: 700;
  color:       var(--text);
  line-height: 1;
}
@media (max-width: 640px) {
  .prog-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .prog-kpi-strip--v2 { padding: 20px 16px 0; }
  .prog-kpi-row { width: calc(100% + 32px); margin: 0 -16px; }
}

/* Extra breathing room between Class DNA and Velocity */
.prog-dna-section { margin-bottom: 20px; }

/* Class DNA panel */
.prog-dna-body {
  display:       flex;
  flex-direction: column;
  gap:            8px;
  padding:        4px 0;
}
.prog-dna-row {
  display:     grid;
  grid-template-columns: 160px 1fr 90px 46px;
  align-items: center;
  gap:         10px;
}
.prog-dna-cls {
  font-size:   12px;
  color:       var(--text-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.prog-dna-bar-track {
  height:        7px;
  background:    var(--surface3);
  border-radius: 4px;
  overflow:      hidden;
}
.prog-dna-bar-fill {
  height:        100%;
  border-radius: 4px;
  transition:    width 0.45s ease;
}
.prog-dna-xp {
  font-size:   12px;
  font-family: var(--font-mono);
  color:       var(--text-dim);
  text-align:  right;
}
.prog-dna-pct {
  font-size:   12px;
  font-family: var(--font-mono);
  color:       var(--text-muted);
  text-align:  right;
}

/* Velocity bars */
.prog-velocity-body { padding: 4px 0; }
.prog-vel-bars {
  display:     flex;
  align-items: flex-end;
  gap:         8px;
}
.prog-vel-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  flex:           1;
  min-width:      32px;
}
.prog-vel-wrap {
  width:         100%;
  height:        60px;
  display:       flex;
  align-items:   flex-end;
  justify-content: center;
}
.prog-vel-fill {
  width:         85%;
  min-height:    2px;
  background:    var(--border-mid);
  border-radius: 3px 3px 0 0;
  transition:    height 0.4s ease;
}
.prog-vel-fill--current {
  background: var(--sev-4);
}
.prog-vel-xp {
  font-size:   10px;
  font-family: var(--font-mono);
  color:       var(--text-muted);
  white-space: nowrap;
}
.prog-vel-lbl {
  font-size:   9px;
  color:       var(--text-muted);
  white-space: nowrap;
}

/* ── Bootcamp Video Studio ───────────────────────────────────────────────── */
.bootcamp-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 24px;
}

.bootcamp-video-main,
.bootcamp-video-side {
  min-width: 0;
}

.bootcamp-video-panel {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bootcamp-video-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bootcamp-video-select {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: var(--input-bg);
  color: var(--text);
  padding: 0 14px;
  font-size: 14px;
  outline: none;
}

.bootcamp-video-select:focus {
  border-color: var(--border-hi);
  box-shadow: 0 0 0 3px rgba(192, 96, 248, 0.10);
}

.bootcamp-video-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bootcamp-video-inline-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

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

.bootcamp-video-row {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 14px;
  padding: 14px 16px;
}

.bootcamp-video-row--compact {
  padding: 12px 14px;
}

.bootcamp-video-row--error {
  border-color: var(--sev-1-border);
  background: color-mix(in srgb, var(--sev-1-bg) 78%, var(--bg2) 22%);
}

.bootcamp-video-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.bootcamp-video-row-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

.bootcamp-video-row-meta,
.bootcamp-video-row-note {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--text-dim);
}

.bootcamp-video-status-panel {
  min-height: 160px;
}

.bootcamp-video-status {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bootcamp-video-status.is-pending {
  border-color: rgba(216, 176, 96, 0.35);
}

.bootcamp-video-status.is-complete {
  border-color: rgba(88, 196, 125, 0.35);
}

.bootcamp-video-status.is-failed {
  border-color: rgba(228, 92, 92, 0.40);
}

.bootcamp-video-status-top,
.bootcamp-video-status-meta,
.bootcamp-video-status-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bootcamp-video-status-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bootcamp-video-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

[data-theme="light"] .bootcamp-video-status-chip {
  background: rgba(0, 0, 0, 0.05);
}

.bootcamp-video-status-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.bootcamp-video-status-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.bootcamp-video-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bootcamp-video-kv div {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .bootcamp-video-kv div {
  background: rgba(0, 0, 0, 0.02);
}

.bootcamp-video-kv span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.bootcamp-video-kv strong {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

.bootcamp-video-status-link {
  color: var(--magenta);
  text-decoration: none;
  font-weight: 600;
}

.bootcamp-video-status-link:hover {
  text-decoration: underline;
}

.bootcamp-video-error {
  border: 1px solid var(--sev-1-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--sev-1-bg);
  color: var(--sev-1);
  font-size: 12px;
}

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

@media (max-width: 680px) {
  .bootcamp-video-kv {
    grid-template-columns: 1fr;
  }
}