/* ════════════════════════════════════════════════════════════════
   BitBookOS Design Token Constitution
   Governance-semantic tokens. Institutional, calm, dense.
   Visual target: Bloomberg Terminal, Linear, Stripe Dashboard.
   DO NOT add decorative/gradient tokens here.
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── Typography ─────────────────────────────────────────────── */
  --font-primary: 'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;

  /* ── Spacing (4px grid) ─────────────────────────────────────── */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Elevation ──────────────────────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.32);

  /* ── Base Surfaces ──────────────────────────────────────────── */
  --surface-base: #0f1117;
  --surface-raised: #171b24;
  --surface-overlay: #1e2330;
  --surface-inset: #0b0e14;
  --surface-hover: rgba(255, 255, 255, 0.03);

  /* ── Text ───────────────────────────────────────────────────── */
  --text-primary: #e8eaf0;
  --text-secondary: #8892a4;
  --text-tertiary: #55607a;
  --text-inverse: #0f1117;
  --text-disabled: #3a4256;
  --text-link: #60a5fa;

  /* ── Borders ────────────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: rgba(96, 165, 250, 0.50);

  /* ── Interactive ────────────────────────────────────────────── */
  --interactive-primary: #3b82f6;
  --interactive-primary-hover: #2563eb;
  --interactive-secondary: rgba(255, 255, 255, 0.08);
  --interactive-secondary-hover: rgba(255, 255, 255, 0.12);
  --interactive-danger: #ef4444;
  --interactive-danger-hover: #dc2626;

  /* ────────────────────────────────────────────────────────────
     INTEGRITY STATE GRAMMAR — 7 states, semantically distinct.
     Each state is distinguishable WITHOUT color alone:
     icons + structural properties (border style/weight) also encode state.
     ──────────────────────────────────────────────────────────── */

  /* confirmed — stable, grounded. Filing eligible. */
  --integrity-confirmed-bg:       rgba(34, 197, 94, 0.08);
  --integrity-confirmed-border:   rgba(34, 197, 94, 0.25);
  --integrity-confirmed-text:     #86efac;
  --integrity-confirmed-accent:   #22c55e;

  /* inclusive — bounded uncertainty. Under review scope. */
  --integrity-inclusive-bg:       rgba(59, 130, 246, 0.08);
  --integrity-inclusive-border:   rgba(59, 130, 246, 0.25);
  --integrity-inclusive-text:     #93c5fd;
  --integrity-inclusive-accent:   #3b82f6;

  /* candidate — preliminary, awaiting classification. */
  --integrity-candidate-bg:       rgba(168, 85, 247, 0.08);
  --integrity-candidate-border:   rgba(168, 85, 247, 0.25);
  --integrity-candidate-text:     #d8b4fe;
  --integrity-candidate-accent:   #a855f7;

  /* unresolved — awaiting determination. Review required. */
  --integrity-unresolved-bg:      rgba(234, 179, 8, 0.08);
  --integrity-unresolved-border:  rgba(234, 179, 8, 0.25);
  --integrity-unresolved-text:    #fde047;
  --integrity-unresolved-accent:  #eab308;

  /* conflicted — evidence divergence. CPA attention needed. */
  --integrity-conflicted-bg:      rgba(249, 115, 22, 0.08);
  --integrity-conflicted-border:  rgba(249, 115, 22, 0.30);
  --integrity-conflicted-text:    #fdba74;
  --integrity-conflicted-accent:  #f97316;

  /* escalated — governance transition in progress. */
  --integrity-escalated-bg:       rgba(239, 68, 68, 0.08);
  --integrity-escalated-border:   rgba(239, 68, 68, 0.30);
  --integrity-escalated-text:     #fca5a5;
  --integrity-escalated-accent:   #ef4444;

  /* blocked — operational stop. Filing gated. */
  --integrity-blocked-bg:         rgba(239, 68, 68, 0.12);
  --integrity-blocked-border:     rgba(239, 68, 68, 0.40);
  --integrity-blocked-text:       #f87171;
  --integrity-blocked-accent:     #dc2626;

  /* ── Attestation surface ────────────────────────────────────── */
  --attestation-surface:          rgba(168, 85, 247, 0.05);
  --attestation-border:           rgba(168, 85, 247, 0.20);
  --attestation-accent:           #a855f7;

  /* ── Evidence panel ─────────────────────────────────────────── */
  --evidence-panel-bg:            rgba(59, 130, 246, 0.04);
  --evidence-panel-border:        rgba(59, 130, 246, 0.15);
  --lineage-drillthrough-hover:   rgba(59, 130, 246, 0.12);

  /* ── Warning grammar ────────────────────────────────────────── */
  --warning-critical: var(--integrity-blocked-accent);
  --warning-high:     var(--integrity-escalated-accent);
  --warning-medium:   var(--integrity-unresolved-accent);
  --warning-low:      var(--integrity-candidate-accent);

  /* ── Governance context bar ─────────────────────────────────── */
  --gov-bar-height: 36px;
  --gov-bar-bg: var(--surface-raised);
  --gov-bar-border: var(--border-subtle);
}

/* ════════════════════════════════════════════════════════════════
   Integrity Badge Component
   Uses token system. Icon + label for color-independent encoding.
   ════════════════════════════════════════════════════════════════ */

.integrity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-primary);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.integrity-badge__icon {
  font-size: 10px;
  line-height: 1;
}

.integrity-badge__label {
  font-size: 11px;
  line-height: 1;
}

.integrity-badge--confirmed {
  background: var(--integrity-confirmed-bg);
  border: 1px solid var(--integrity-confirmed-border);
  color: var(--integrity-confirmed-text);
}

.integrity-badge--inclusive {
  background: var(--integrity-inclusive-bg);
  border: 1px solid var(--integrity-inclusive-border);
  color: var(--integrity-inclusive-text);
}

.integrity-badge--candidate {
  background: var(--integrity-candidate-bg);
  border: 1px solid var(--integrity-candidate-border);
  color: var(--integrity-candidate-text);
}

.integrity-badge--unresolved {
  background: var(--integrity-unresolved-bg);
  border: 1px solid var(--integrity-unresolved-border);
  color: var(--integrity-unresolved-text);
}

.integrity-badge--conflicted {
  background: var(--integrity-conflicted-bg);
  border: 1px solid var(--integrity-conflicted-border);
  color: var(--integrity-conflicted-text);
}

.integrity-badge--escalated {
  background: var(--integrity-escalated-bg);
  border: 1px solid var(--integrity-escalated-border);
  color: var(--integrity-escalated-text);
}

.integrity-badge--blocked {
  background: var(--integrity-blocked-bg);
  border: 1px solid var(--integrity-blocked-border);
  color: var(--integrity-blocked-text);
}

/* ── Phase UI-4 motion tokens ───────────────────────────────────── */
  --motion-dur-micro:   100ms;
  --motion-dur-fast:    150ms;
  --motion-dur-default: 200ms;
  --motion-dur-slow:    300ms;
  --motion-ease-out:    cubic-bezier(.32,.72,0,1);
  --motion-ease-inout:  cubic-bezier(.4,0,.2,1);

  /* Phase UI-4 depth background tokens */
  --depth-bg-base:  #0B1020;   /* deepest canvas */
  --depth-bg-1:     #111827;   /* content area */
  --depth-bg-2:     #141D2E;   /* sidebar, context bar */
  --depth-bg-3:     #1A2338;   /* cards */
  --depth-bg-4:     #1F2A42;   /* raised surfaces */
  --depth-bg-5:     #253050;   /* highest surface */

  /* Phase UI-4 desaturated accent tokens */
  --accent-institutional: #4B7CF3;      /* primary blue — institutional trust */
  --accent-caution:       #C98A1D;      /* muted amber — not alarming */
  --accent-success:       #2EAD7A;      /* restrained emerald — not celebratory */
  --accent-blocked:       #C2445A;      /* muted rose — not panic */

/* ════════════════════════════════════════════════════════════════
   Governance Context Bar
   Sticky, 36px, subdued. Shows entity + scores + filing state.
   ════════════════════════════════════════════════════════════════ */

#governance-context-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--gov-bar-height);
  background: var(--gov-bar-bg);
  border-bottom: 1px solid var(--gov-bar-border);
  padding: 0 var(--space-5);
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--font-primary);
  color: var(--text-secondary);
  overflow: hidden;
}

#governance-context-bar .gov-bar__entity {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 11px;
}

#governance-context-bar .gov-bar__divider {
  color: var(--border-strong);
  user-select: none;
}

#governance-context-bar .gov-bar__score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
}

#governance-context-bar .gov-bar__score-label {
  color: var(--text-tertiary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#governance-context-bar .gov-bar__score-value {
  color: var(--text-primary);
  font-weight: 500;
}

#governance-context-bar .gov-bar__unresolved {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#governance-context-bar .gov-bar__unresolved-count {
  color: var(--integrity-unresolved-text);
  font-family: var(--font-mono);
  font-weight: 500;
}

#governance-context-bar .gov-bar__filing-blocked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--integrity-blocked-text);
  background: var(--integrity-blocked-bg);
  border: 1px solid var(--integrity-blocked-border);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#governance-context-bar .gov-bar__filing-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--integrity-confirmed-text);
  font-size: 10px;
}

#governance-context-bar .gov-bar__spacer {
  flex: 1;
}

/* ════════════════════════════════════════════════════════════════
   Evidence Panel
   ════════════════════════════════════════════════════════════════ */

.evidence-panel {
  background: var(--evidence-panel-bg);
  border: 1px solid var(--evidence-panel-border);
  border-radius: 4px;
  padding: var(--space-3);
}

.evidence-panel__header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* Lineage drill-through hover */
.lineage-item {
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: 3px;
  transition: background 0.1s ease;
}
.lineage-item:hover {
  background: var(--lineage-drillthrough-hover);
}

/* ════════════════════════════════════════════════════════════════
   Attestation Surface
   ════════════════════════════════════════════════════════════════ */

.attestation-surface {
  background: var(--attestation-surface);
  border: 1px solid var(--attestation-border);
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════
   Dense Table Defaults
   ════════════════════════════════════════════════════════════════ */

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

.bbo-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.bbo-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

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

.bbo-table tr:hover td {
  background: var(--surface-hover);
}

/* ════════════════════════════════════════════════════════════════
   Structural integrity left-border cues
   Visual encoding of state WITHOUT relying on color alone.
   ════════════════════════════════════════════════════════════════ */

.integrity-row--confirmed  { border-left: 2px solid var(--integrity-confirmed-accent); }
.integrity-row--inclusive  { border-left: 2px dashed var(--integrity-inclusive-accent); }
.integrity-row--candidate  { border-left: 2px dotted var(--integrity-candidate-accent); }
.integrity-row--unresolved { border-left: 2px solid var(--integrity-unresolved-accent); }
.integrity-row--conflicted { border-left: 2px solid var(--integrity-conflicted-accent); }
.integrity-row--escalated  { border-left: 3px solid var(--integrity-escalated-accent); }
.integrity-row--blocked    { border-left: 3px solid var(--integrity-blocked-accent); }

/* ════════════════════════════════════════════════════════════════
   Score Bar (progress indicator for integrity thresholds)
   ════════════════════════════════════════════════════════════════ */

.score-bar {
  height: 4px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.score-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.15s ease;
}

.score-bar__fill--confirmed { background: var(--integrity-confirmed-accent); }
.score-bar__fill--inclusive { background: var(--integrity-inclusive-accent); }
.score-bar__fill--low       { background: var(--integrity-unresolved-accent); }
.score-bar__fill--blocked   { background: var(--integrity-blocked-accent); }

/* ════════════════════════════════════════════════════════════════
   Mono value display
   ════════════════════════════════════════════════════════════════ */

.mono-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}

.mono-value--secondary {
  color: var(--text-secondary);
}

/* ════════════════════════════════════════════════════════════════
   Warning set container (perceptual rate limiting support)
   ════════════════════════════════════════════════════════════════ */

.warning-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 12px;
  padding: var(--space-2) var(--space-3);
  border-radius: 3px;
}

.warning-item--critical {
  background: var(--integrity-blocked-bg);
  border: 1px solid var(--integrity-blocked-border);
  color: var(--integrity-blocked-text);
}

.warning-item--high {
  background: var(--integrity-escalated-bg);
  border: 1px solid var(--integrity-escalated-border);
  color: var(--integrity-escalated-text);
}

.warning-item--medium {
  background: var(--integrity-unresolved-bg);
  border: 1px solid var(--integrity-unresolved-border);
  color: var(--integrity-unresolved-text);
}

.warning-item--low {
  background: var(--integrity-candidate-bg);
  border: 1px solid var(--integrity-candidate-border);
  color: var(--integrity-candidate-text);
}

.warning-overflow {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: var(--space-1) var(--space-3);
  font-style: italic;
}