/* ============================================================================
 * pe-app.css — GENERATED BUNDLE (scripts/build-pe-app-css.js). DO NOT EDIT.
 * E1 ≤4 stylesheets/page: the live PE product pages load fonts + design-system
 * + this bundle + tailwind. Sources (edit these, then re-run the build):
 *   _components.css, _help-panel.css, pe-components.css, pe-surfaces.css, sosl-provocation.css
 * ============================================================================ */

/* ══════════════════ _components.css ══════════════════ */
/**
 * FundLens PE — Core Component Library (§B.6 of the UI/UX Uplift Spec)
 * ============================================================================
 * Every component inherits from _design-tokens.css. NO hardcoded colors, type,
 * spacing, radius, elevation, or motion — reference the custom properties only.
 *
 * Each component ships documented states: default, hover, focus-visible,
 * active, disabled, loading. The component gallery (/app/_gallery.html) renders
 * every component in every state and is the visual-regression target (§R.2).
 *
 * Class prefix: `pe-` so these never collide with Tailwind utilities or the
 * legacy design-system.css rules.
 *
 * Load order:  design-system.css → _design-tokens.css → _components.css
 * ============================================================================
 */

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS (§B.6) — primary / secondary / ghost / destructive
   ════════════════════════════════════════════════════════════════════════ */
.pe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-pe-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out),
              color var(--motion-fast) var(--ease-in-out);
  user-select: none;
  white-space: nowrap;
}
.pe-btn:focus-visible {
  outline: 2px solid var(--lens-400);
  outline-offset: 2px;
}
.pe-btn:disabled,
.pe-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pe-btn--primary {
  background: var(--lens-600);
  color: var(--paper);
}
.pe-btn--primary:hover { background: var(--lens-500); }
.pe-btn--primary:active { background: var(--lens-600); }

.pe-btn--secondary {
  background: var(--paper);
  border-color: var(--rule-strong);
  color: var(--ink-700);
}
.pe-btn--secondary:hover { background: var(--paper-raised); border-color: var(--ink-300); }

.pe-btn--ghost {
  background: transparent;
  color: var(--lens-600);
}
.pe-btn--ghost:hover { background: var(--lens-tint); }

.pe-btn--destructive {
  background: var(--paper);
  border-color: var(--flag-500);
  color: var(--flag-700);
}
.pe-btn--destructive:hover { background: var(--flag-100); }

/* Loading state — inline spinner, disables WITHOUT layout shift. */
.pe-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.pe-btn--loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full, 9999px);
  color: var(--paper);
  animation: pe-spin 600ms linear infinite;
}
.pe-btn--secondary.pe-btn--loading::after,
.pe-btn--ghost.pe-btn--loading::after { color: var(--lens-600); }
@keyframes pe-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   ICON BUTTONS & ROW ACTIONS — the discoverability primitives.

   Icon-only actions must never read as faint, ambiguous marks. Two canonical
   controls:
     .pe-iconbtn  — a square, always-visible icon control for compact contexts
                    (card headers, note tools, table rows with no label room).
                    Resting border + readable icon; a title attribute names it.
     .pe-rowact   — icon + LABEL chip for list/table rows that have the room;
                    the label states the action outright.
   Both lift to the lens register on hover/focus; the --danger variant goes to
   the warm register. Tokens only.
   ════════════════════════════════════════════════════════════════════════ */
.pe-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  color: var(--ink-500);
  font-size: var(--text-sm-pe);
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-iconbtn:hover { color: var(--lens-700); background: var(--lens-tint); border-color: var(--lens-400); }
.pe-iconbtn:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }
.pe-iconbtn:disabled, .pe-iconbtn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.pe-iconbtn--danger:hover { color: var(--attention-text); background: var(--attention-bg); border-color: var(--attention-border); }

.pe-rowact {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--ink-700);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-rowact i { font-size: 0.95em; color: var(--ink-500); transition: color var(--motion-fast) var(--ease-in-out); }
.pe-rowact:hover { color: var(--lens-700); border-color: var(--lens-400); background: var(--lens-tint); }
.pe-rowact:hover i { color: var(--lens-600); }
.pe-rowact:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }
.pe-rowact--danger:hover { color: var(--attention-text); border-color: var(--attention-border); background: var(--attention-bg); }
.pe-rowact--danger:hover i { color: var(--attention-text); }

/* ════════════════════════════════════════════════════════════════════════
   §B.5 — THE SOURCE CHIP (the most important component)
   `Commercial payer mix is 54%  [FDD §3.4 ↗]`
   ════════════════════════════════════════════════════════════════════════ */
.pe-source-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  /* --ink-500 (not --ink-300) so the chip clears WCAG AA (4.5:1) even on the
     tinted flagged/selected row backgrounds, and reads as an interactive control. */
  color: var(--ink-500);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-xs);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-in-out),
              color var(--motion-fast) var(--ease-in-out);
  vertical-align: baseline;
}
.pe-source-chip .pe-source-chip__arrow {
  font-size: 0.9em;
  color: var(--ink-500);
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-source-chip:hover,
.pe-source-chip:focus-visible {
  background: var(--lens-100);
  color: var(--ink-500);
  outline: none;
}
.pe-source-chip:hover .pe-source-chip__arrow,
.pe-source-chip:focus-visible .pe-source-chip__arrow { color: var(--lens-600); }
.pe-source-chip:focus-visible { box-shadow: 0 0 0 2px var(--lens-400); }

/* ════════════════════════════════════════════════════════════════════════
   PROVENANCE / CONFIDENCE BADGE (§B.2) — dot + word. NEVER a percentage.
   ════════════════════════════════════════════════════════════════════════ */
.pe-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  line-height: var(--lh-xs);
  color: var(--ink-500);
  white-space: nowrap;
}
.pe-badge::before {
  content: '';
  width: 7px; height: 7px;
  box-sizing: border-box;
  border-radius: var(--radius-full, 9999px);
  background: currentColor;
  flex: 0 0 auto;
}
/* ── The truth-type register (§C.3 / I-4) — the three canonical kinds of
   truth every displayed fact declares. Never red/amber/green, never a %. ──
   ● Verified  — deterministically calculated/parsed (lens-600 filled dot).
   ● Evidenced — extracted from a document (ink-500 filled dot).
   ○ Reasoning — inferred by FundLens, not stated (ink-300 OPEN dot). */
.pe-badge--verified { color: var(--verified); }
.pe-badge--evidenced { color: var(--evidenced); }
.pe-badge--reasoning { color: var(--ink-300); }
.pe-badge--reasoning::before {
  background: transparent;
  border: 1.5px solid currentColor;
}
/* NOT part of the truth-type register: a separate "needs review" metric-state
   signal (muted amber "look here"). Kept for the metrics surface; not one of
   the three truth kinds. */
.pe-badge--review { color: var(--review); }

/* In dense tables the register collapses to the dot alone; the label rides in
   a .pe-badge__label revealed on hover/focus (kept accessible). */
.pe-badge--dot .pe-badge__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pe-badge--dot { gap: 0; }

/* ════════════════════════════════════════════════════════════════════════
   CONTRADICTION MARKER (§B.6) — the only warm/alarm register in normal op.
   ════════════════════════════════════════════════════════════════════════ */
.pe-contradiction-marker {
  display: inline-flex;
  align-items: center;
  color: var(--flag-500);
  font-size: var(--text-sm-pe);
  line-height: 1;
  cursor: pointer;
}
.pe-contradiction-marker::before { content: '\26A0'; } /* ⚠ */

/* ════════════════════════════════════════════════════════════════════════
   SOSL CONDITIONING BADGE (§B.6) — ◊ = "shaped by your firm's thinking".
   Visually distinct from the source chip (↗ = traceable to a document).
   ════════════════════════════════════════════════════════════════════════ */
.pe-sosl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--lens-600);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.pe-sosl-badge::before { content: '\25CA'; } /* ◊ */
.pe-sosl-badge:hover { color: var(--lens-500); }
.pe-sosl-badge:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   CARDS (§B.6) — paper-raised, hairline border, generous padding.
   ════════════════════════════════════════════════════════════════════════ */
.pe-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-lg);
  box-shadow: var(--elev-0);
  transition: box-shadow var(--motion-base) var(--ease-out);
}
.pe-card--interactive:hover { box-shadow: var(--elev-1); }
.pe-card__header {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-md) 0;
}
/* Attention card — the warm register, for contradictions / breaches only. */
.pe-card--attention {
  background: var(--flag-100);
  border-color: var(--flag-300);
}

/* ════════════════════════════════════════════════════════════════════════
   TABLES (§B.6 / §F) — the diligence data surface. Zero radius, hairline
   rules, sticky paper-raised header, mono tabular figures.
   ════════════════════════════════════════════════════════════════════════ */
.pe-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-pe-none);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
}
.pe-table thead th {
  position: sticky;
  top: 0;
  background: var(--paper-raised);
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--ink-500);
  font-size: var(--text-xs-pe);
  letter-spacing: 0.02em;
  text-transform: none;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--rule-strong);
}
.pe-table tbody td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.pe-table tbody tr { height: 44px; } /* §F: ~44px rows — dense, breathing */
.pe-table tbody tr:hover { background: var(--lens-tint); }
/* Mono tabular figures for any numeric cell. */
.pe-table .pe-num {
  font-family: var(--font-mono-pe);
  font-size: var(--text-data-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Flagged / contradicted row — 2px left border in the warm register. */
.pe-table tbody tr.pe-row--flagged { box-shadow: inset 2px 0 0 0 var(--flag-500); background: var(--flag-100); }
/* Selected row — lens left border. */
.pe-table tbody tr.pe-row--selected { box-shadow: inset 2px 0 0 0 var(--lens-500); background: var(--lens-tint); }

/* ════════════════════════════════════════════════════════════════════════
   TABS (§B.6 / §C.4) — underline-style, NOT pills. 13-tab overflow handled.
   ════════════════════════════════════════════════════════════════════════ */
.pe-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-base);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans-pe);
}
.pe-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-300);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  padding: var(--space-md) var(--space-xs);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-tab:hover { color: var(--ink-500); }
.pe-tab[aria-selected='true'] { color: var(--ink-900); border-bottom-color: var(--lens-600); }
.pe-tab:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }
/* Overflow "More ▾" trigger with new-activity dot. */
.pe-tab--more { position: relative; }
.pe-tab--more[data-activity='true']::after {
  content: '';
  position: absolute;
  top: var(--space-sm);
  right: -2px;
  width: 6px; height: 6px;
  background: var(--flag-500);
  border-radius: var(--radius-full, 9999px);
}

/* ════════════════════════════════════════════════════════════════════════
   SLIDE-IN PANEL (§B.5 / §B.6) — source panel, NTB detail, override, etc.
   Slides from right, --elev-2, scrim preserves context, focus trap, Esc.
   ════════════════════════════════════════════════════════════════════════ */
.pe-scrim {
  position: fixed; inset: 0;
  background: var(--source-scrim);
  opacity: 0;
  /* Closed scrim must not eat clicks: it stays in the DOM covering the
     viewport, so gate pointer events on the open state. */
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-in-out);
  z-index: var(--z-modal-backdrop, 40);
}
.pe-scrim[data-open='true'] { opacity: 1; pointer-events: auto; }
.pe-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--source-panel-width);
  max-width: 92vw;
  background: var(--paper);
  box-shadow: var(--elev-2);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform var(--motion-slow) var(--ease-out);
  z-index: var(--z-modal, 50);
  display: flex;
  flex-direction: column;
}
.pe-panel[data-open='true'] { transform: translateX(0); }
.pe-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-base) var(--space-lg);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans-pe);
}
.pe-panel__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-lg); }
/* Citation highlight box on the rendered source page. */
.pe-citation-highlight {
  background: color-mix(in srgb, var(--citation-highlight) 28%, transparent);
  outline: 2px solid var(--citation-highlight);
  border-radius: var(--radius-pe-sm);
}

/* ════════════════════════════════════════════════════════════════════════
   TOASTS (§B.6 / §O) — bottom-right, --elev-2, auto-dismiss 4s.
   ════════════════════════════════════════════════════════════════════════ */
.pe-toast-stack {
  position: fixed; right: var(--space-lg); bottom: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
  z-index: var(--z-tooltip, 70);
}
.pe-toast {
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-pe-md);
  box-shadow: var(--elev-2);
}

/* ════════════════════════════════════════════════════════════════════════
   LOADING SKELETON (§N.2) — slow (~1.5s), low-contrast shimmer. Not flashy.
   ════════════════════════════════════════════════════════════════════════ */
.pe-skeleton {
  background: var(--paper-sunken);
  border-radius: var(--radius-pe-sm);
  position: relative;
  overflow: hidden;
}
.pe-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--paper) 60%, transparent) 50%,
    transparent 100%
  );
  animation: pe-shimmer var(--skeleton-shimmer) ease-in-out infinite;
}
@keyframes pe-shimmer { 100% { transform: translateX(100%); } }

/* ════════════════════════════════════════════════════════════════════════
   STANCE CONFIRMATION PULSE (§O) — ring on capture (causality signal).
   ════════════════════════════════════════════════════════════════════════ */
.pe-stance-pulse { animation: pe-pulse var(--motion-base) var(--ease-out); }
@keyframes pe-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lens-400) 60%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

/* ════════════════════════════════════════════════════════════════════════
   §O — prefers-reduced-motion: all motion degrades to instant.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pe-btn, .pe-source-chip, .pe-card, .pe-tab, .pe-scrim, .pe-panel,
  .pe-skeleton::after, .pe-stance-pulse, .pe-btn--loading::after {
    transition: none !important;
    animation: none !important;
  }
  /* Panel still hides off-canvas when closed and snaps in when open — only the
     slide TRANSITION is removed above. (Do NOT zero the transform, or the closed
     panel would sit visible over the working surface.) */
}

/* ════════════════════════════════════════════════════════════════════════
   §B.5 — THE SOURCE PANEL internals + hover preview (drives _provenance.js)
   ════════════════════════════════════════════════════════════════════════ */

/* Hover preview tooltip — first ~180 chars of the cited passage. */
.pe-source-preview {
  position: absolute;
  z-index: var(--z-tooltip, 70);
  max-width: 320px;
  background: var(--paper);
  color: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  box-shadow: var(--elev-2);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans-pe);
  pointer-events: none;
}
.pe-source-preview__head {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-500);
  margin-bottom: var(--space-xs);
}
.pe-source-preview__body {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}

/* The source panel — slides in from the right (base in .pe-panel). */
.pe-source-panel__nav { display: inline-flex; align-items: center; gap: var(--space-xs); }
.pe-source-panel__title { display: flex; flex-direction: column; gap: var(--space-hair); }
.pe-source-panel__doc {
  font-family: var(--font-sans-pe);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-source-panel__reconciled {
  font-size: var(--text-xs-pe);
  color: var(--lens-600);
  font-weight: var(--weight-medium);
}
.pe-source-panel__page {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  margin-bottom: var(--space-base);
  display: block;
}
.pe-source-panel__passage {
  margin: 0;
  padding: var(--space-md);
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
}
.pe-source-panel__unavailable {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  line-height: var(--lh-sm);
}
.pe-source-panel__unavailable strong { display: block; color: var(--ink-700); margin-bottom: var(--space-xs); }
.pe-source-panel__foot {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--rule);
}

/* ════════════════════════════════════════════════════════════════════════
   §M.2 — TOOLTIP. One consistent tooltip for any [data-pe-tooltip] element.
   Plain language, --elev-2, max-width ~280px, calm.
   ════════════════════════════════════════════════════════════════════════ */
.pe-tooltip {
  position: absolute;
  z-index: var(--z-tooltip, 70);
  max-width: 280px;
  background: var(--paper);
  color: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  box-shadow: var(--elev-2);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   §M.3 — COACHMARK. One-time, in-context, dismissible. Quiet authority.
   ════════════════════════════════════════════════════════════════════════ */
.pe-coachmark {
  position: absolute;
  z-index: var(--z-popover, 60);
  width: 320px;
  max-width: 92vw;
  background: var(--ink-900);
  color: var(--paper);
  border-radius: var(--radius-pe-lg);
  box-shadow: var(--elev-3);
  padding: var(--space-base) var(--space-lg);
}
.pe-coachmark--center {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
}
.pe-coachmark__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-xs);
}
.pe-coachmark__body {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  margin-bottom: var(--space-md);
}
.pe-coachmark__actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }
/* Coachmark buttons sit on the dark popover — keep the primary legible. */
.pe-coachmark .pe-btn--ghost { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.pe-coachmark .pe-btn--ghost:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }

/* The pulse on the anchored element while its coachmark is open (§O). */
.pe-coachmark-pulse {
  position: relative;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-400) 55%, transparent);
  border-radius: var(--radius-pe-sm);
  animation: pe-coachmark-pulse 1600ms var(--ease-in-out) infinite;
}
@keyframes pe-coachmark-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-400) 55%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lens-400) 22%, transparent); }
}

/* ════════════════════════════════════════════════════════════════════════
   §O — CONTRADICTION ARRIVAL (the live AHA). New card slides down + a brief
   flag-100 flash that settles. Confident, NOT alarming.
   ════════════════════════════════════════════════════════════════════════ */
.pe-contradiction-arrive {
  animation: pe-contradiction-arrive var(--motion-slow) var(--ease-out);
}
@keyframes pe-contradiction-arrive {
  0% { opacity: 0; transform: translateY(-8px); background: var(--flag-100); }
  60% { background: var(--flag-100); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-coachmark-pulse, .pe-contradiction-arrive { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   pe-confirm — the design-system confirmation dialog (Interaction System
   I-8: NO window.confirm). One reusable component, driven by _pe-confirm.js
   (window.PEConfirm.ask → Promise<boolean>). Light confirms use --primary;
   destructive actions name the object and use the --destructive button.
   Tokens only; no emoji; reduced-motion handled by the global rule.
   ═══════════════════════════════════════════════════════════════════════ */
.pe-confirm-scrim {
  position: fixed;
  inset: 0;
  background: var(--source-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  z-index: 1600;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.pe-confirm-scrim.is-open { opacity: 1; }
.pe-confirm-scrim[hidden] { display: none; }

.pe-confirm {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg);
  box-shadow: var(--elev-3, 0 12px 32px rgba(15, 24, 41, 0.12));
  width: 100%;
  max-width: 30rem;
  padding: var(--space-lg);
  transform: translateY(4px);
  transition: transform var(--motion-base) var(--ease-out);
}
.pe-confirm-scrim.is-open .pe-confirm { transform: translateY(0); }

.pe-confirm__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-sm);
}
.pe-confirm__body {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-500);
  margin: 0 0 var(--space-lg);
  white-space: pre-line;
}
.pe-confirm__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   pe-icon — the Lucide inline-SVG icon system (§B / I-2). One icon per concept
   from the fixed vocabulary, injected by _pe-icons.js. 16px (inline/table) or
   20px (nav/buttons); stroke 1.75; currentColor so it inherits the control's
   register. Icon-only controls carry an aria-label + tooltip (§W voice).
   ═══════════════════════════════════════════════════════════════════════ */
.pe-icon {
  display: inline-block;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}
/* FA-compat shim (I-2): the legacy <i class="fa-*"> stays in the DOM (so Alpine
   :class bindings keep working) but is filled with an inline Lucide
   .pe-icon.pe-icon--fa. The <i> becomes a zero-line-height inline-flex box so
   the SVG sizes cleanly and the italic default never skews it. Spinners carry
   --spin; currentColor keeps the glyph inheriting its control's register. */
i[data-pe-fa] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 0;
  vertical-align: -0.125em;
}
.pe-icon--fa { vertical-align: 0; }
@keyframes pe-icon-spin { to { transform: rotate(360deg); } }
.pe-icon--spin { animation: pe-icon-spin 0.8s linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .pe-icon--spin { animation-duration: 1.6s; }
}

/* Nav-rail glyph wrapper: the six-destination icons (§B, 20px) rendered inline
   from window.PeIcons.svg. Non-shrinking so the label never crowds the icon. */
.pe-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   pe-subnav — the segmented sub-navigation for a destination that hosts more
   than one view (North Star §2.2: 6 destinations, each with its inner views —
   Thesis: NTBs · Contradictions; Evidence: Documents · Metrics · Notes ·
   Sources; Deliverables: the outputs). One quiet row of text tabs under the
   destination; the active one carries the lens underline. Tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.pe-subnav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 var(--space-lg);
  padding: 0 0 0 2px;
}
.pe-subnav__item {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-sm) 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-300);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-subnav__item:hover { color: var(--ink-700); }
.pe-subnav__item:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
.pe-subnav__item--active {
  color: var(--ink-900);
  border-bottom-color: var(--lens-600);
  font-weight: var(--weight-semibold);
}
.pe-subnav__dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-full, 9999px);
  background: var(--flag-500);
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════
   pe-cmdbar — the ⌘K command bar (Interaction System §C.5 / North Star §5).
   A command palette overlay: ⌘K opens from anywhere, type to filter, ↑↓ move,
   Enter runs, Esc closes. Tokens only; the ONE lens accent on the active row.
   Motion (§F): 120ms fade + 2px rise; instant under reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */
.pe-cmdbar-scrim {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  background: color-mix(in srgb, var(--ink-900) 32%, transparent);
  padding-top: 12vh;
}
.pe-cmdbar-scrim[data-open="true"] { display: block; }
.pe-cmdbar {
  width: min(92vw, 640px);
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg, 14px);
  box-shadow: var(--elev-3, 0 24px 48px rgba(15, 24, 41, 0.24));
  overflow: hidden;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--motion-fast, 120ms) var(--ease-in-out),
              transform var(--motion-fast, 120ms) var(--ease-in-out);
}
.pe-cmdbar-scrim[data-open="true"] .pe-cmdbar { opacity: 1; transform: translateY(0); }
.pe-cmdbar__inputrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-base);
  border-bottom: 1px solid var(--rule);
}
.pe-cmdbar__icon { color: var(--lens-600); display: inline-flex; flex: 0 0 auto; }
.pe-cmdbar__input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe, 15px);
  color: var(--ink-900);
  outline: none;
}
.pe-cmdbar__input::placeholder { color: var(--ink-300); }
.pe-cmdbar__hint {
  flex: 0 0 auto;
  font-family: var(--font-mono-pe, monospace);
  font-size: var(--text-xs-pe, 11px);
  color: var(--ink-300);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm, 5px);
  padding: 1px 6px;
}
.pe-cmdbar__list {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
  max-height: 46vh;
  overflow-y: auto;
}
.pe-cmdbar__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-base);
  cursor: pointer;
  color: var(--ink-700);
  font-size: var(--text-sm-pe, 13px);
}
.pe-cmdbar__item-icon { display: inline-flex; width: 16px; flex: 0 0 auto; color: var(--ink-300); }
.pe-cmdbar__item-label { flex: 1 1 auto; }
.pe-cmdbar__item-hint { color: var(--ink-300); font-size: var(--text-xs-pe, 11px); }
.pe-cmdbar__item[aria-selected="true"] {
  background: var(--lens-100);
  color: var(--ink-900);
}
.pe-cmdbar__item[aria-selected="true"] .pe-cmdbar__item-icon { color: var(--lens-600); }
.pe-cmdbar__item:hover { background: var(--paper-sunken, var(--lens-100)); }
.pe-cmdbar__empty {
  padding: var(--space-md) var(--space-base);
  color: var(--ink-300);
  font-size: var(--text-sm-pe, 13px);
}

/* ----------------------------------------------------------------------------
 * S4 — document search inside the command bar
 * ----------------------------------------------------------------------------
 * A passage row is two lines where a command is one, so it needs top alignment
 * and a section heading to say the list changed register: above the rule are
 * things to DO, below it are things she has already READ. The no-hit line is
 * given body weight rather than the muted empty treatment, because it is an
 * instruction (go and check Coverage), not an absence.
 * -------------------------------------------------------------------------- */
.pe-cmdbar__section {
  padding: var(--space-sm) var(--space-base) var(--space-xs);
  margin-top: var(--space-xs);
  border-top: 1px solid var(--rule);
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pe-cmdbar__item--doc { align-items: flex-start; }
.pe-cmdbar__item--doc .pe-cmdbar__item-icon { margin-top: 2px; }
.pe-cmdbar__doc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pe-cmdbar__doc-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}
.pe-cmdbar__doc-name {
  color: var(--ink-900);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-cmdbar__doc-page {
  flex: 0 0 auto;
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
  font-variant-numeric: tabular-nums;
}
.pe-cmdbar__doc-snippet {
  color: var(--ink-700);
  font-size: var(--text-xs-pe, 11px);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pe-cmdbar__empty--nohit { color: var(--ink-700); }

/* ----------------------------------------------------------------------------
 * S4 — the passage view
 * -------------------------------------------------------------------------- */
.pe-passage__source {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: 2px;
  font-size: var(--text-xs-pe, 11px);
}
.pe-passage__doc { color: var(--ink-700); font-weight: 500; }
.pe-passage__page { color: var(--ink-300); font-variant-numeric: tabular-nums; }
.pe-passage__body {
  color: var(--ink-900);
  font-size: var(--text-sm-pe, 13px);
  line-height: 1.7;
  white-space: pre-wrap;
}
.pe-passage__mark {
  background: var(--lens-100);
  box-shadow: inset 0 -1px 0 var(--lens-600);
  color: var(--ink-900);
}
.pe-passage__note {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .pe-cmdbar { transition: none; }
}


/* ══════════════════ _help-panel.css ══════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   FundLens PE — Contextual help panel (§M.4)
   ------------------------------------------------------------------------
   Surface-scoped "what can I do here" panel. Reuses the §B.5 slide-in panel
   pattern from _components.css (.pe-panel / .pe-scrim / .pe-panel__header /
   .pe-panel__body) and only adds the help-specific internals + the quiet "?"
   trigger. Tokens only — never redefines a token, never hardcodes a value.
   Loads AFTER _components.css so the composition wins.
   ════════════════════════════════════════════════════════════════════════ */

/* The quiet "?" affordance in the workspace header. Sits in the dark gradient
   nav, so it reads as a calm, low-contrast control that brightens on hover. */
.pe-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out);
}
.pe-help-trigger:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
}
.pe-help-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lens-400);
}

/* Panel title (serif, like every other panel/section title). */
.pe-help-panel__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

/* Close control in the header. */
.pe-help-panel__close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-300);
  font-size: var(--text-body-pe);
  line-height: 1;
  padding: var(--space-xs);
  border-radius: var(--radius-pe-sm);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out);
}
.pe-help-panel__close:hover {
  color: var(--ink-700);
  background: var(--paper-sunken);
}
.pe-help-panel__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lens-400);
}

/* Body layout. */
.pe-help-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Small caps-style section eyebrow above each block. */
.pe-help-panel__eyebrow {
  margin: var(--space-base) 0 var(--space-hair);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.pe-help-panel__eyebrow:first-child { margin-top: 0; }

/* The one-plain-sentence "what this surface is for". */
.pe-help-panel__what {
  margin: 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

/* The 3–5 key actions. */
.pe-help-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.pe-help-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-hair);
  padding-left: var(--space-md);
  border-left: 2px solid var(--rule);
}
.pe-help-action__title {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-help-action__desc {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
}

/* Link to the relevant §R side documentation. */
.pe-help-doc {
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--lens-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-in-out),
              color var(--motion-fast) var(--ease-in-out);
}
.pe-help-doc:hover {
  color: var(--lens-500);
  border-bottom-color: var(--lens-400);
}
.pe-help-doc:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lens-400);
  border-radius: var(--radius-pe-sm);
}

/* Sidebar activity dot for the Contradictions tab (§G-1 nice-to-have). A single
   warm dot when substantive contradictions are present — the only warm register
   in the sidebar, consistent with the contradiction marker elsewhere. */
.pe-side-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--flag-500);
  margin-left: auto;
  flex-shrink: 0;
}


/* ══════════════════ pe-components.css ══════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   pe-components.css — the ONE PE component layer (Design Elevation §E1).
   HAND-MAINTAINED (edit directly, like _components.css). Originally seeded by
   collapsing the 18 per-surface patch stylesheets that the PE "strata" used to
   load as separate <link>s (E1-W3/W4); those source files + their generator are
   now retired and this file is the source of truth. Loaded only by PE pages +
   fixtures (NOT the shared _components.css, to keep PE rules off Equity surfaces).
   Section markers ("── source: … ──") are kept as a provenance map of where each
   block originated.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───── source: pe-ic-memo.css ───── */
/*
 * Track 1 — Stage-aware NTB-first IC memo styles (PE workspace).
 * Editorial, institutional-grade (navy/teal). Loaded by workspace.html.
 * Spec: FundLens_July8_Blackwell_Spec_FINAL.md §2.10.
 */

:root {
  --pe-navy: #1b2a4a;
  --pe-teal: #0d9488;
  --pe-gray: #6b7280;
  --pe-border: #e5e7eb;
  --pe-bg: #f0f4f8;
  --pe-red: #dc2626;
  --pe-amber: #f59e0b;
  --pe-green: #059669;
}

/* ── Stage selector ─────────────────────────────────────────────────────── */
.pe-stage-selector {
  border: 1px solid var(--pe-border);
  border-radius: 10px;
  padding: 16px 18px;
  background: #fff;
}
.pe-stage-selector__row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.pe-stage-selector__hint {
  font-size: 12px; color: var(--pe-teal); background: #e6f5f3;
  padding: 1px 8px; border-radius: 999px; margin-left: 6px;
}
.pe-stage-actions { display: flex; gap: 10px; margin-top: 14px; }
.pe-btn-primary {
  background: var(--pe-navy); color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; font-weight: 600; cursor: pointer;
}
.pe-btn-primary:hover { background: #16233d; }
.pe-btn-ghost {
  background: #fff; color: var(--pe-navy); border: 1px solid var(--pe-border);
  border-radius: 8px; padding: 9px 16px; cursor: pointer;
}

/* ── Generation progress panel ──────────────────────────────────────────── */
.pe-progress { border: 1px solid var(--pe-border); border-radius: 10px; padding: 16px; background: #fff; }
.pe-progress__title { font-weight: 700; color: var(--pe-navy); margin-bottom: 10px; }
.pe-progress__step { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; color: #374151; }
.pe-progress__step .icon { width: 18px; text-align: center; }
.pe-progress__step--done .icon { color: var(--pe-green); }
.pe-progress__step--active { color: var(--pe-navy); font-weight: 600; }
.pe-progress__step--pending { color: var(--pe-gray); }
.pe-progress__eta { margin-top: 10px; font-size: 13px; color: var(--pe-gray); }
.pe-progress__conditioned { font-size: 12px; color: var(--pe-teal); margin-bottom: 8px; }

/* ── Memo viewer ────────────────────────────────────────────────────────── */
.pe-memo { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.pe-memo__toc { position: sticky; top: 16px; align-self: start; font-size: 13px; }
.pe-memo__toc a { display: block; padding: 4px 8px; color: var(--pe-gray); text-decoration: none; border-radius: 6px; }
.pe-memo__toc a.active { color: var(--pe-navy); background: var(--pe-bg); font-weight: 600; }
.pe-memo__body { max-width: 780px; line-height: 1.6; color: #1f2937; }
.pe-memo__body h1 { color: var(--pe-navy); font-size: 22px; border-bottom: 2px solid var(--pe-teal); padding-bottom: 6px; margin-top: 28px; }
.pe-memo-ntb-header { color: var(--pe-navy); font-size: 19px; font-weight: 700; margin-top: 22px; }
.pe-memo__preamble { font-size: 13px; color: var(--pe-gray); font-style: italic; border-left: 3px solid var(--pe-teal); padding-left: 10px; margin-bottom: 16px; }

/* inline citations */
.pe-cite { color: var(--pe-teal); font-size: 11px; vertical-align: super; cursor: pointer; }
.pe-cite:hover { text-decoration: underline; }

/* evidence groups */
.pe-evidence-ws { color: var(--pe-teal); font-weight: 600; margin-top: 8px; font-size: 13px; }
.pe-evidence-item { margin-left: 14px; font-size: 14px; }
.pe-evidence-item .src { color: var(--pe-gray); font-size: 12px; }
.pe-provocation { margin-left: 14px; color: var(--pe-red); font-size: 13px; }
.pe-coverage-note { margin-left: 14px; color: #b45309; font-style: italic; font-size: 12px; }

/* ── NTB status badges ──────────────────────────────────────────────────── */
.pe-ntb-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.pe-ntb-status--active { background: #e6f5f3; color: var(--pe-teal); }
.pe-ntb-status--confirmed { background: #dcfce7; color: var(--pe-green); }
.pe-ntb-status--challenged { background: #fee2e2; color: var(--pe-red); }
.pe-ntb-status--unresolved { background: #fef3c7; color: #b45309; }
.pe-ntb-status--challenged_but_acceptable { background: #fef3c7; color: #b45309; }
.pe-ntb-status--escalated_to_kill_consideration { background: #fee2e2; color: var(--pe-red); }
.pe-ntb-status--retired { background: #f3f4f6; color: var(--pe-gray); }

/* ── NTB right-rail panel ───────────────────────────────────────────────── */
.pe-ntb-panel { border-left: 1px solid var(--pe-border); padding: 14px; width: 340px; }
.pe-ntb-panel__title { font-weight: 700; color: var(--pe-navy); }
.pe-ntb-panel__sub { font-size: 12px; color: var(--pe-gray); margin-bottom: 12px; }
.pe-ntb-card { border: 1px solid var(--pe-border); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #fff; }
.pe-ntb-card__q { font-weight: 600; color: #111827; font-size: 14px; }
.pe-ws-chip { display: inline-block; font-size: 11px; color: var(--pe-navy); background: var(--pe-bg); border-radius: 999px; padding: 1px 8px; margin: 2px 3px 0 0; }
.pe-ntb-actions { display: flex; gap: var(--space-xs); margin-top: 6px; }
/* Visible resting affordance (shared .pe-iconbtn recipe) so the edit/retire
   controls read as buttons, not faint marks. */
.pe-ntb-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  color: var(--ink-500);
  cursor: pointer;
  font-size: var(--text-sm-pe);
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-ntb-actions button:hover { color: var(--lens-700); background: var(--lens-tint); border-color: var(--lens-400); }
.pe-ntb-actions button:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }
.pe-why-link { font-size: 12px; color: var(--pe-teal); cursor: pointer; }
.pe-ntb-proposed { border: 1px dashed var(--pe-teal); background: #f0faf9; }
.pe-ntb-retired-disclosure { font-size: 12px; color: var(--pe-gray); margin-top: 10px; }


/* ───── source: pe-extracted-metrics.css ───── */
/* ============================================================================
 * Track 3 — Extracted Metrics page redesign (PE).
 * Spec: .kiro/specs/FundLens_July8_Blackwell_Spec_FINAL.md §4.13.
 * Institutional-grade restraint: subtle motion, purposeful color, high density.
 * ==========================================================================*/

/* Provenance badge dots (§4.7) — qualitative, NO numbers. */
.em-badge-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  vertical-align: middle;
  cursor: help;
}
.em-badge-green  { background: #16a34a; }   /* Deterministic */
.em-badge-blue   { background: #2563eb; }   /* Extracted — High evidence */
.em-badge-yellow { background: #d97706; }   /* Extracted — Review recommended */

/* Source citation chip (§4.8) */
.em-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  padding: 1px 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.em-source-chip:hover { background: #ccfbf1; }

/* Contradiction inline marker (§4.9 / §4.13) */
.em-warn {
  color: #b45309;
  margin-right: 4px;
}

/* Period chip — review state stands out (§4.6) */
.em-period-review {
  color: #b45309;
  font-style: italic;
}

/* Override arrow (§4.10) */
.em-override-arrow { color: #7c3aed; font-weight: 600; }

/* Metric row hover affordance (inline edit, §4.10 / Principle 6) */
.em-metric-row { cursor: pointer; transition: background 0.1s ease; }
.em-metric-row:hover { background: #f8fafc; }

/* Slide-over override panel */
.em-slideover {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: #fff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.18s ease;
}
.em-slideover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  z-index: 59;
}

/* New-metric fade-in (Principle 2 — progressive intelligence) */
@keyframes emFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.em-fade-in { animation: emFadeIn 0.25s ease; }

/* Filter bar */
.em-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.em-filter-bar select,
.em-filter-bar input {
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 5px 9px;
  background: #fff;
}


/* ───── source: pe-scope-chips.css ───── */
/* ═══════════════════════════════════════════════════════════════════════
   PE Query Scope Chips — Phase 5 §F.

   The always-visible bar beneath the chat input that lets the Principal scope
   what the AI reads for the next question: a document subset and/or specific
   workstreams. The chips ACTUALLY scope retrieval (§F-2) — this file is only
   their appearance. Tokens ONLY (no hardcoded color / type / space / radius);
   the intelligence (teal/lens) register signals an ACTIVE narrowing; the warm
   register is NOT used here (scope is not a risk). No emoji.

   Prefix: pe-scope-. Loads AFTER _components.css so this composition wins.
   ═══════════════════════════════════════════════════════════════════════ */

.pe-scope-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}

.pe-scope-bar__lead {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe, 0.8125rem);
  color: var(--ink-300);
  letter-spacing: 0.01em;
}

/* ── A single chip (documents / workstreams) ───────────────────────────── */
.pe-scope-chip {
  position: relative;
  display: inline-block;
}

.pe-scope-chip__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe, 0.8125rem);
  color: var(--ink-700);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out),
              color var(--motion-fast) var(--ease-in-out);
}
.pe-scope-chip__btn:hover {
  border-color: var(--rule-strong);
  background: var(--paper);
}
.pe-scope-chip__btn:focus-visible {
  outline: 2px solid var(--lens-400);
  outline-offset: 1px;
}
/* Active = this dimension is genuinely narrowing (intelligence register). */
.pe-scope-chip__btn--active {
  color: var(--lens-700);
  background: var(--lens-tint);
  border-color: var(--lens-400);
}

.pe-scope-chip__caret {
  font-size: 0.7em;
  color: var(--ink-300);
}

/* ── The popover with the choices ──────────────────────────────────────── */
.pe-scope-pop {
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 0;
  z-index: 40;
  min-width: 15rem;
  max-width: 22rem;
  padding: var(--space-sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  box-shadow: var(--elevation-pe-md, 0 6px 20px rgba(15, 24, 41, 0.12));
}

.pe-scope-pop__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-hair);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}

.pe-scope-pop__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-hair);
  max-height: 14rem;
  overflow-y: auto;
}

.pe-scope-pop__empty {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm-pe, 0.8125rem);
  color: var(--ink-300);
}

.pe-scope-opt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe, 0.8125rem);
  color: var(--ink-700);
  border-radius: var(--radius-pe-sm);
  cursor: pointer;
}
.pe-scope-opt:hover { background: var(--paper-raised); }
.pe-scope-opt input { accent-color: var(--lens-500); flex-shrink: 0; }
.pe-scope-opt--check span { word-break: break-word; }

/* ── Clear-scope link ──────────────────────────────────────────────────── */
.pe-scope-reset {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe, 0.8125rem);
  color: var(--lens-600);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pe-sm);
}
.pe-scope-reset:hover { color: var(--lens-700); text-decoration: underline; }
.pe-scope-reset:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* ── §F-4 honest empty-scope surface ───────────────────────────────────── */
/* This is information, not an error — intelligence register, not warm. */
.pe-scope-empty {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe, 0.8125rem);
  color: var(--ink-700);
  background: var(--lens-tint);
  border: 1px solid var(--lens-400);
  border-radius: var(--radius-pe-md);
}
.pe-scope-empty > i { color: var(--lens-600); }
.pe-scope-empty__widen {
  margin-left: auto;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm-pe, 0.8125rem);
  color: var(--lens-700);
  background: none;
  border: 1px solid var(--lens-400);
  border-radius: var(--radius-pe-sm);
  cursor: pointer;
  white-space: nowrap;
}
.pe-scope-empty__widen:hover { background: var(--paper); }
.pe-scope-empty__widen:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

[x-cloak] { display: none !important; }


/* ───── source: pe-sources.css ───── */
/* ════════════════════════════════════════════════════════════════════════
   PE — "Sources for this deal" evidence map (Phase 5 §D.3)
   ────────────────────────────────────────────────────────────────────────
   A deal-level audit surface: every DISTINCT source the deal's analysis rests
   on, and — under each — which artifacts cite it. Design-system tokens only;
   no numeric confidence; the source row is a `.pe-source-chip` so the existing
   provenance slide-in / tri-pane expand works unchanged.
   ════════════════════════════════════════════════════════════════════════ */

.pe-sources {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */
.pe-sources__masthead {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-lg);
}
.pe-sources__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  color: var(--ink-900);
  margin: 0 0 var(--space-xs) 0;
}
.pe-sources__subtitle {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: 0;
  max-width: 62ch;
}
.pe-sources__summary {
  margin-top: var(--space-sm);
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.pe-sources__summary strong { color: var(--ink-700); font-weight: var(--weight-medium); }

/* ── Document group (one issuer/document = a section of the map) ──────────── */
.pe-sources__group { margin-bottom: var(--space-lg); }
.pe-sources__group-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-sm);
}
.pe-sources__doc-name {
  font-size: var(--text-body-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}
.pe-sources__doc-icon { color: var(--ink-300); margin-right: var(--space-hair); }
.pe-sources__doc-count {
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}

/* ── A distinct source location (registry entry) ─────────────────────────── */
.pe-sources__loc {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 2px solid var(--rule);
  margin-bottom: var(--space-sm);
}
.pe-sources__loc-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.pe-sources__excerpt {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  font-style: italic;
  max-width: 72ch;
}

/* ── Citing artifacts (where this source is cited) ───────────────────────── */
.pe-sources__cited {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}
.pe-sources__cited-label {
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  margin-right: var(--space-hair);
}
.pe-sources__artifact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-hair);
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  padding: 2px var(--space-xs);
}
.pe-sources__artifact i { color: var(--ink-300); }

/* ── States: loading / error / empty ─────────────────────────────────────── */
.pe-sources__state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--ink-300);
}
.pe-sources__state-icon {
  font-size: 1.75rem;
  color: var(--ink-100);
  margin-bottom: var(--space-sm);
}
.pe-sources__state-title {
  font-size: var(--text-body-pe);
  color: var(--ink-700);
  margin: 0 0 var(--space-hair) 0;
}
.pe-sources__state-msg {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: 0;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

.pe-sources__skeleton {
  height: 56px;
  background: var(--paper-sunken);
  border-radius: var(--radius-pe-md);
  margin-bottom: var(--space-sm);
}

/* ── Notes (audit honesty: what is / isn't included) ─────────────────────── */
.pe-sources__notes {
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
}
.pe-sources__notes-title {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
  margin: 0 0 var(--space-hair) 0;
}
.pe-sources__notes-item {
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  margin: 0;
}


/* ───── source: pe-mind-uplift.css ───── */
/**
 * FundLens PE — Mind Page Uplift (§K of the UI/UX Uplift Spec — AHA 2)
 * ============================================================================
 * "It already knows how my firm thinks." The moat surface. Every rule here is
 * SCOPED under `.pe-mind` so it cannot touch the Equity Mind body (which is
 * rendered by the SHARED _sosl-mind.js / sosl-mind.css and must not regress).
 *
 * Inherits the token + component system (_design-tokens.css / _components.css).
 * NO hardcoded colors, type, spacing, radius, elevation, or motion — reference
 * the custom properties only. Confidence is NEVER a percentage and NEVER a
 * traffic light (§B.2). The warm register (--flag-*) is reserved for the ONE
 * thing that matters: a self-contradiction flag.
 *
 * Load order on the PE Mind page:
 *   design-system.css → _design-tokens.css → _components.css → pe-mind-uplift.css
 * ============================================================================ */

.pe-mind {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  font-family: var(--font-sans-pe);
  color: var(--ink-700);
  background: var(--paper);
}

/* ── First-visit intro (M.3) — dismissible, quiet ─────────────────────────── */
.pe-mind__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--intelligence-bg);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--lens-600);
  border-radius: var(--radius-pe-md);
  padding: var(--space-md) var(--space-base);
  margin-bottom: var(--space-xl);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
}
.pe-mind__intro button {
  flex: 0 0 auto;
}

/* ════════════════════════════════════════════════════════════════════════
   K-1 — THE MOAT HEADER. The single line the deck screenshots. Source Serif,
   prominent, first and most prominent thing on the page.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__moat {
  margin: 0 0 var(--space-2xl);
}
.pe-mind__moat-sentence {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.01em;
}
.pe-mind__moat-counts {
  margin-top: var(--space-md);
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe);
  color: var(--ink-300);
}
.pe-mind__moat-counts .pe-num {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}

/* ── Section scaffolding ──────────────────────────────────────────────────── */
.pe-mind__section { margin-bottom: var(--space-2xl); }
.pe-mind__section-head {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-xs);
}
.pe-mind__section-sub {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-300);
  margin: 0 0 var(--space-lg);
}

/* ════════════════════════════════════════════════════════════════════════
   K-2 — FIVE BEHAVIOR CATEGORIES (organized by how the firm REASONS).
   Collapsible sections; each pattern stated in the firm's voice.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__category {
  border-top: 1px solid var(--rule);
  padding: var(--space-base) 0;
}
.pe-mind__category-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-mind__category-head:focus-visible {
  outline: 2px solid var(--lens-400);
  outline-offset: 3px;
  border-radius: var(--radius-pe-sm);
}
.pe-mind__category-caret {
  color: var(--ink-300);
  font-size: var(--text-sm-pe);
  transition: transform var(--motion-fast) var(--ease-in-out);
}
.pe-mind__category[data-open='false'] .pe-mind__category-caret { transform: rotate(-90deg); }
.pe-mind__category-count {
  margin-left: auto;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-300);
}
.pe-mind__patterns {
  list-style: none;
  margin: var(--space-base) 0 0;
  padding: 0;
}

/* ── A learned pattern — the unit of AHA 2 ────────────────────────────────── */
.pe-mind__pattern {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-base) 0;
  border-top: 1px solid var(--rule);
}
.pe-mind__pattern:first-child { border-top: none; }
.pe-mind__pattern-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 0.55em;
  border-radius: var(--radius-full, 9999px);
  background: var(--lens-600);
}
.pe-mind__pattern-body { flex: 1 1 auto; min-width: 0; }
.pe-mind__pattern-statement {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
  margin: 0;
}
.pe-mind__pattern-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

/* Confidence in plain words. NOT a traffic light: high = lens (system sure),
   moderate = slate (calm), still forming = muted tertiary. No red/yellow/green. */
.pe-mind__confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  cursor: help;
}
.pe-mind__confidence::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--radius-full, 9999px);
  background: currentColor;
}
.pe-mind__confidence--high { color: var(--verified); }
.pe-mind__confidence--moderate { color: var(--evidenced); }
.pe-mind__confidence--forming { color: var(--ink-300); }
.pe-mind__pattern-basis {
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}
.pe-mind__pattern-basis::before { content: '· '; }

/* K-10 — shared PE+Equity scope tag. Neutral, not warm. */
.pe-mind__scope {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  padding: 0 var(--space-xs);
  letter-spacing: 0.01em;
}

.pe-mind__pattern-actions {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  margin-top: var(--space-sm);
}
.pe-mind__why {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-600);
}
.pe-mind__why::after { content: '\25CA'; font-size: 0.9em; } /* ◊ */
.pe-mind__why:hover { color: var(--lens-500); }
.pe-mind__why:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }
.pe-mind__link-action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}
.pe-mind__link-action:hover { color: var(--ink-500); }
.pe-mind__attribution {
  font-size: var(--text-xs-pe);
  font-style: italic;
  color: var(--lens-600);
}

/* ════════════════════════════════════════════════════════════════════════
   K-7 — BELIEF-FORMAT THESES (I BELIEVE / BECAUSE / WOULD CHANGE MY MIND)
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__thesis { margin-bottom: var(--space-base); }
.pe-mind__thesis-line { margin: 0 0 var(--space-sm); }
.pe-mind__thesis-label {
  display: inline-block;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin-bottom: var(--space-hair);
}
.pe-mind__thesis-text {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
}
.pe-mind__thesis .pe-mind__thesis-line--belief .pe-mind__thesis-text {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
}
/* Self-contradiction flag — the one warm register on this surface. */
.pe-mind__thesis-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--flag-700);
}
.pe-mind__thesis-flag::before { content: '\26A0'; color: var(--flag-500); } /* ⚠ */

/* ════════════════════════════════════════════════════════════════════════
   K-4 — CALIBRATION INSIGHTS (auto-derived). The "system is thinking" proof.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__calibration { margin-bottom: var(--space-base); }
.pe-mind__calibration-observation {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
  margin: 0;
}
.pe-mind__calibration-implication {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-700);
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--lens-400);
}
.pe-mind__calibration-implication strong { color: var(--ink-900); }

/* ════════════════════════════════════════════════════════════════════════
   K-5 — UNCERTAINTY (the honesty layer). Calm, never alarmed.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__uncertainty-group { margin-bottom: var(--space-lg); }
.pe-mind__uncertainty-label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-500);
  margin: 0 0 var(--space-sm);
}
.pe-mind__uncertainty-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pe-mind__uncertainty-list li {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--rule);
}
.pe-mind__uncertainty-list li:first-child { border-top: none; }

/* ════════════════════════════════════════════════════════════════════════
   K-6 — TEACH FUNDLENS. The control that makes the model feel owned.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__teach-form {
  margin-top: var(--space-base);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper-raised);
  padding: var(--space-lg);
}
.pe-mind__teach-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  resize: vertical;
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-sm) var(--space-md);
}
.pe-mind__teach-form textarea:focus-visible {
  outline: 2px solid var(--lens-400);
  outline-offset: 1px;
  border-color: var(--lens-500);
}
.pe-mind__teach-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ── Cold-start framing (K-8) — a beginning, not an emptiness ──────────────── */
.pe-mind__coldstart {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper-raised);
  padding: var(--space-2xl);
  text-align: center;
}
.pe-mind__coldstart-title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-sm);
}
.pe-mind__coldstart-body {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-500);
  margin: 0 auto;
  max-width: 56ch;
}

/* ════════════════════════════════════════════════════════════════════════
   K-9 — PER-TENANT ISOLATION FOOTER. Quiet, reassuring.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__isolation {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm-pe);
  color: var(--ink-300);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.pe-mind__isolation::before {
  content: '\1F512'; /* 🔒 — meaning glyph, not a UI action icon */
  font-size: 0.95em;
  filter: grayscale(1);
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════════
   K-3 — THE "WHY THIS?" PANEL. The credibility moment — designed with the
   same care as the source panel (§B.5). Reuses the .pe-panel / .pe-scrim
   slide-in component; content is learned-judgment provenance.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mind__why-intro {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
  font-family: var(--font-serif);
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-base);
  border-bottom: 1px solid var(--rule);
}
.pe-mind__why-grouplabel {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-500);
  margin: var(--space-lg) 0 var(--space-sm);
}
.pe-mind__evidence {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule);
}
.pe-mind__evidence:first-of-type { border-top: none; }
.pe-mind__evidence-name {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-mind__evidence-outcome {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  margin-top: var(--space-hair);
}
.pe-mind__evidence-detail {
  font-family: var(--font-mono-pe);
  font-size: var(--text-data-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
  margin-top: var(--space-hair);
}
.pe-mind__dna {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: var(--intelligence-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
}
.pe-mind__dna-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-sm-pe);
  padding: var(--space-hair) 0;
}
.pe-mind__dna-row .pe-mind__dna-value {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}


/* ───── source: pe-fund-dna-uplift.css ───── */
/**
 * FundLens PE — Fund DNA surface uplift (§L of the UI/UX Uplift Spec)
 * ============================================================================
 * AHA 2 foundation — the demo's opening surface. The partner sees Blackwell's
 * investment philosophy written down: sector, sub-sectors, geography, deal size,
 * hurdles, risk thresholds, and kill criteria — each a clear, editable field,
 * grouped logically (L-1). Thresholds and kill criteria read as the firm's
 * ACTUAL rules ("Commercial payer mix > 55%", "Kill if state Medicaid > 40%"),
 * not abstract sliders. Small causal notes show what each element drives, so the
 * page feels like the firm's brain, not a settings form (L-2).
 *
 * Inherits EVERY value from _design-tokens.css and reuses _components.css. No
 * hardcoded color / type / spacing / radius / elevation / motion here.
 *
 * Load order:  design-system.css → _design-tokens.css → _components.css → THIS
 * Class prefix: `pe-dna` / `pe-rule` / `pe-causal` (no collision with Tailwind
 * or legacy design-system.css).
 * ============================================================================
 */

/* ════════════════════════════════════════════════════════════════════════
   PAGE SHELL — an editorial document, not a dashboard.
   ════════════════════════════════════════════════════════════════════════ */
.pe-dna {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  font-family: var(--font-sans-pe);
  color: var(--ink-700);
}

.pe-dna__masthead { margin-bottom: var(--space-2xl); }
.pe-dna__title {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}
.pe-dna__subtitle {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-500);
  margin: var(--space-sm) 0 0;
  max-width: 64ch;
}

/* ════════════════════════════════════════════════════════════════════════
   DNA GROUP — a logical group of fields, read as a section of a document.
   Hairline rule above, serif header, generous breathing room.
   ════════════════════════════════════════════════════════════════════════ */
.pe-dna-group {
  border-top: 1px solid var(--rule);
  padding: var(--space-xl) 0;
}
.pe-dna-group:first-of-type { border-top: none; }
.pe-dna-group__header {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-xs);
}
.pe-dna-group__intro {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-300);
  margin: 0 0 var(--space-lg);
  max-width: 64ch;
}

/* Two-column field layout for paired fields (min/max, target/excluded). */
.pe-dna-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 720px) { .pe-dna-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   FIELDS — labels, hints, token-styled inputs (editorial, square-ish).
   ════════════════════════════════════════════════════════════════════════ */
.pe-dna-field { margin-bottom: var(--space-lg); }
.pe-dna-field:last-child { margin-bottom: 0; }
.pe-dna-field__label {
  display: block;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--ink-500);
  margin-bottom: var(--space-xs);
}
.pe-dna-field__hint {
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-300);
  margin: var(--space-xs) 0 0;
}

.pe-dna-input,
.pe-dna-textarea,
.pe-dna-select {
  width: 100%;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--motion-fast) var(--ease-in-out),
              box-shadow var(--motion-fast) var(--ease-in-out);
}
.pe-dna-textarea { resize: vertical; min-height: 7.5rem; line-height: var(--lh-body); }
.pe-dna-input:focus,
.pe-dna-textarea:focus,
.pe-dna-select:focus {
  outline: none;
  border-color: var(--lens-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-400) 28%, transparent);
}
.pe-dna-input::placeholder,
.pe-dna-textarea::placeholder { color: var(--ink-100); }

/* ════════════════════════════════════════════════════════════════════════
   CHIPS — sector / sub-sector / geography tags. Targets use the intelligence
   register (lens); exclusions stay neutral structural ink (an exclusion is a
   preference, NOT a contradiction — the warm register is reserved for breaches).
   ════════════════════════════════════════════════════════════════════════ */
.pe-dna-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pe-dna-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-700);
  background: var(--lens-100);
  border: 1px solid color-mix(in srgb, var(--lens-600) 24%, transparent);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-sm);
}
.pe-dna-chip--exclude {
  color: var(--ink-500);
  background: var(--paper-sunken);
  border-color: var(--rule-strong);
}
.pe-dna-chip__remove {
  cursor: pointer;
  color: var(--ink-300);
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
  line-height: 1;
}
.pe-dna-chip__remove:hover { color: var(--flag-500); }
.pe-dna-chip-add { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); }
/* The composer wraps on narrow widths rather than squeezing the number field. */
.pe-dna-rule-add .pe-dna-chip-add { flex-wrap: wrap; align-items: center; }
.pe-dna-rule-add { margin-top: var(--space-base); padding-top: var(--space-base); border-top: 1px solid var(--rule); }
.pe-dna-rule-add .pe-dna-input { flex: 1 1 14rem; min-width: 0; }
/* Operator / unit selects sit at their content width — they are not text fields. */
.pe-dna-input--narrow { flex: 0 0 auto; width: auto; min-width: 4.5rem; }
.pe-dna-rule-error {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--flag-700);
}

/* ════════════════════════════════════════════════════════════════════════
   THE FIRM'S ACTUAL RULES (L-1) — thresholds & kill criteria rendered as
   readable statements, not abstract sliders:
   "Commercial payer mix  >  55%"      "Kill if  state Medicaid mix  >  40%"
   The metric reads in plain Inter; the operator + value read in mono so the
   rule scans like a line from the firm's screening memo.
   ════════════════════════════════════════════════════════════════════════ */
.pe-rules { display: flex; flex-direction: column; }
.pe-rule {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule);
}
.pe-rule:first-child { border-top: none; }

.pe-rule__body { flex: 1 1 auto; min-width: 0; }

/* The rule statement — the line the partner reads. */
.pe-rule__statement {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
}
.pe-rule__metric { font-weight: var(--weight-medium); }
.pe-rule__op,
.pe-rule__value {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-data-sm);
  color: var(--ink-700);
}
.pe-rule__value { font-weight: var(--weight-medium); }

/* Kill-criterion lead-in — the most severe rule class. The "Kill if" tag is the
   ONE sanctioned warm accent here (tokens map --flag-700 to "kill-criteria
   breach"); the rest of the statement stays structural. */
.pe-rule__kill-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--flag-700);
}
.pe-rule__kill-tag::before { content: '\2298'; font-size: 1.05em; } /* ⊘ */

/* Inline edit affordances on a rule — restrained, controls register. */
.pe-rule__edit {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
}
.pe-rule__num {
  width: 5.5rem;
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-data-sm);
  text-align: right;
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-sm);
}
.pe-rule__num:focus {
  outline: none;
  border-color: var(--lens-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-400) 28%, transparent);
}
.pe-rule__unit { font-size: var(--text-xs-pe); color: var(--ink-300); }

/* ════════════════════════════════════════════════════════════════════════
   CAUSAL CONNECTING TISSUE (L-2) — what each DNA element DRIVES. Quiet,
   intelligence-register note; makes the page feel causal, not a settings form.
   "This threshold flags deals in your Contradictions and NTBs."
   ════════════════════════════════════════════════════════════════════════ */
.pe-causal {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--intelligence-bg);
  border-left: 2px solid var(--intelligence-accent);
  border-radius: 0 var(--radius-pe-sm) var(--radius-pe-sm) 0;
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
}
.pe-causal__icon {
  flex: 0 0 auto;
  color: var(--intelligence-accent);
  font-size: 1em;
  line-height: var(--lh-sm);
}
.pe-causal__icon::before { content: '\21B3'; } /* ↳ */
.pe-causal strong { color: var(--ink-700); font-weight: var(--weight-semibold); }

/* A group-level causal note sits under the header, slightly more prominent. */
.pe-causal--group { margin: 0 0 var(--space-lg); }

/* ════════════════════════════════════════════════════════════════════════
   ADD-A-RULE row — quiet ghost affordance under a rule list.
   ════════════════════════════════════════════════════════════════════════ */
.pe-rule-add { margin-top: var(--space-md); }

/* ════════════════════════════════════════════════════════════════════════
   ROADMAP LINK (L-3) — a consistent, honest pointer to the model-builder
   wireframe. Clearly marked roadmap; never implies it ships now.
   ════════════════════════════════════════════════════════════════════════ */
.pe-dna-roadmap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
}
.pe-dna-roadmap__text { min-width: 0; }
.pe-dna-roadmap__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-hair);
}
.pe-dna-roadmap__tag {
  display: inline-block;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-300);
}
.pe-dna-roadmap__note {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: var(--space-xs) 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   §O — reduced motion: degrade transitions to instant.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pe-dna-input, .pe-dna-textarea, .pe-dna-select, .pe-rule__num {
    transition: none !important;
  }
}


/* ───── source: pe-overview-uplift.css ───── */
/* ═══════════════════════════════════════════════════════════════════════
   PE Overview tab — institutional uplift (§B design system).

   Scope: the Deal Overview surface in public/app/pe/workspace.html only.
   Prefix: pe-ov-  (disjoint from pe-mc-/pe-ntb-/pe-icm-/pe-ts-/pe-mind/pe-dna).

   Rules honored (DESIGN_SYSTEM.md §5 / spec §B.7 avoid-list):
   • Tokens only — no hardcoded color / type / space / radius / elevation.
   • No gradient hero cards, no glassmorphism, no heavy shadows.
   • Warm register (--flag-*) reserved for breaches / red flags / attention.
   • Confidence is a dot + word, never a percentage, never a traffic light.
   • Overview is a SUPPORTING surface (§U) — calm and legible, restraint over
     flourish. Reuses the foundation vocabulary (pe-card, pe-badge, pe-btn,
     pe-num, pe-source-chip) and adds only composition here.

   Loads AFTER _components.css so this composition wins; never redefines a token.
   ═══════════════════════════════════════════════════════════════════════ */

.pe-ov-surface {
  color: var(--ink-700);
  font-family: var(--font-sans-pe);
}

/* ── Section container + header ─────────────────────────────────────────── */
.pe-ov-section {
  margin-bottom: var(--space-lg);
}

.pe-ov-section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
  letter-spacing: 0.01em;
}

.pe-ov-section-title__count {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  font-weight: var(--weight-regular);
}

.pe-ov-section-meta {
  margin-left: auto;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  font-weight: var(--weight-regular);
}

/* ── Deal context strip (replaces the gradient capacity callout) ─────────── */
.pe-ov-strip {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper-raised);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.pe-ov-strip__lead {
  flex: 1 1 160px;
  min-width: 0;
  padding: var(--space-md) var(--space-base);
  border-right: 1px solid var(--rule);
}

.pe-ov-strip__stat {
  padding: var(--space-md) var(--space-base);
  border-right: 1px solid var(--rule);
}

.pe-ov-strip__stat:last-child { border-right: 0; }

.pe-ov-strip__label {
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-hair);
}

.pe-ov-strip__value {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-data-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

.pe-ov-strip__value--muted {
  color: var(--ink-300);
  font-weight: var(--weight-regular);
}

.pe-ov-strip__name {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The one place a capacity number is emphasized — still calm (intelligence
   register, not warm; this is a positive, not a breach). */
.pe-ov-strip__stat--accent { background: var(--lens-tint); }
.pe-ov-strip__stat--accent .pe-ov-strip__label { color: var(--lens-600); }
.pe-ov-strip__stat--accent .pe-ov-strip__value { color: var(--lens-600); }

/* ── §J3-4 Coverage chip row — the single front-door representation of coverage.
   Compact: name · % · micro-bar; the full cards live one click down. ────── */
.pe-ov-covchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.pe-ov-covchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm, 6px);
  background: var(--paper-raised);
  cursor: pointer;
  font-size: var(--text-xs-pe);
  color: var(--ink-700);
}
.pe-ov-covchip:hover { border-color: var(--lens-300, var(--rule-strong)); }
.pe-ov-covchip__name { font-weight: var(--weight-medium); color: var(--ink-900); }
.pe-ov-covchip__pct { color: var(--ink-300); font-variant-numeric: tabular-nums; }
.pe-ov-covchip__track {
  width: 42px; height: 4px; border-radius: 2px;
  background: var(--rule); overflow: hidden;
}
.pe-ov-covchip__fill { display: block; height: 100%; background: var(--lens-500, var(--lens-600)); }
.pe-ov-covchip--blocked .pe-ov-covchip__fill { background: var(--flag-500, var(--flag-700)); }
.pe-ov-covchip--complete .pe-ov-covchip__fill { background: var(--positive-500, var(--lens-600)); }
.pe-ov-covchip__flag { color: var(--flag-700); }
.pe-ov-cov__drill {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0; margin-bottom: var(--space-md);
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--text-sm-pe); font-weight: var(--weight-medium); color: var(--lens-600);
}
.pe-ov-cov__drill:hover { color: var(--lens-700); }
.pe-ov-cov__drill i { font-size: var(--text-xs-pe); }

/* ── Quiet meta line (§J3-3) ──────────────────────────────────────────────
   Docs/rubric/findings are meta, not headline. One calm line; the deal name
   leads, the counts follow in muted ink. NO emphasized "hours saved" tile. */
.pe-ov-metaline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-xs-pe);
  line-height: var(--lh-sm);
  color: var(--ink-300);
  margin-bottom: var(--space-lg);
}
.pe-ov-metaline__name {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-ov-metaline__sep { color: var(--rule-strong); }

/* ── Next best actions (calm intelligence register, no gradient) ─────────── */
.pe-ov-nba { display: flex; flex-direction: column; gap: var(--space-sm); }

.pe-ov-nba__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
  padding: var(--space-md) var(--space-base);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out);
}

.pe-ov-nba__item:hover { border-color: var(--rule-strong); background: var(--lens-tint); }
.pe-ov-nba__item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--lens-400); }

.pe-ov-nba__rank {
  flex-shrink: 0;
  font-family: var(--font-mono-pe);
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  width: 1.25rem;
}

.pe-ov-nba__body { flex: 1; min-width: 0; }

.pe-ov-nba__title {
  font-size: var(--text-body-pe);
  color: var(--ink-900);
  font-weight: var(--weight-medium);
}

.pe-ov-nba__desc {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin-top: var(--space-hair);
}

.pe-ov-nba__pri {
  flex-shrink: 0;
  font-size: var(--text-xs-pe);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-300);
}
/* Warm ONLY when the action is a flagged / urgent one. */
.pe-ov-nba__pri--high { color: var(--flag-700); }

.pe-ov-nba__chev { flex-shrink: 0; color: var(--ink-100); font-size: var(--text-xs-pe); }
.pe-ov-nba__item:hover .pe-ov-nba__chev { color: var(--lens-600); }

/* ── Snapshot metric grid ────────────────────────────────────────────────── */
.pe-ov-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .pe-ov-metric-grid { grid-template-columns: repeat(4, 1fr); }
}

.pe-ov-metric {
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
}
/* A metric that breaches a Fund DNA rule gets the warm register — nothing else. */
.pe-ov-metric--breach { background: var(--flag-100); border-color: var(--flag-300); }

.pe-ov-metric__label {
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pe-ov-metric__value {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin-top: var(--space-hair);
}

.pe-ov-metric__note {
  margin-top: var(--space-xs);
  font-size: var(--text-xs-pe);
}

/* ── §J5/§J3-5 — a finding's source chip (opens SourceView). Quiet, inline. ─ */
.pe-ov-finding__src {
  margin-left: var(--space-xs);
  padding: 1px var(--space-xs);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm, 6px);
  background: var(--paper-raised);
  cursor: pointer;
  font-family: var(--font-mono-pe);
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  white-space: nowrap;
}
.pe-ov-finding__src:hover { border-color: var(--lens-300, var(--rule-strong)); color: var(--lens-700); }

/* ── §J5 — a sourced figure opens SourceView. Inherits the mono value type;
   a quiet dotted underline signals it is walkable to its passage. ───────── */
.pe-ov-metric__src {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: underline dotted var(--rule-strong);
  text-underline-offset: 3px;
}
.pe-ov-metric__src:hover { text-decoration-color: var(--lens-600); color: var(--lens-700); }

/* ── §S2 G3 / §J3-6 — the honest "needs review" state for a gated-out figure.
   A visible "—" with a fix path (→ Metrics) beats a wrong number, always.
   Calm/quiet, not warm: a missing value is not a breach. ────────────────── */
.pe-ov-metric--review { background: var(--paper-sunk, var(--paper-raised)); border-style: dashed; }
.pe-ov-metric__review {
  display: inline-flex;
  align-items: center;
  gap: var(--space-hair);
  margin-top: var(--space-hair);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-300);
}
.pe-ov-metric__review i { font-size: var(--text-xs-pe); }
.pe-ov-metric__review:hover { color: var(--lens-600); }

/* ── Fund DNA alignment ──────────────────────────────────────────────────── */
.pe-ov-align__summary {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
}

.pe-ov-align__track {
  width: 100%;
  height: 6px;
  background: var(--paper-sunken);
  border-radius: var(--radius-pe-sm);
  overflow: hidden;
  margin: var(--space-sm) 0 var(--space-md) 0;
}
/* Single calm fill — not a red/amber/green traffic light. */
.pe-ov-align__fill {
  height: 100%;
  background: var(--lens-500);
  border-radius: var(--radius-pe-sm);
  transition: width var(--motion-base) var(--ease-out);
}

.pe-ov-align__list { display: flex; flex-direction: column; gap: var(--space-sm); }

.pe-ov-align__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
}

/* Status glyph before each criterion — confidence/attention palette, not RYG. */
.pe-ov-crit { flex-shrink: 0; font-size: var(--text-sm-pe); line-height: 1.4; }
.pe-ov-crit--pass { color: var(--verified); }
.pe-ov-crit--warn { color: var(--review); }
.pe-ov-crit--fail { color: var(--flag-700); }

/* ── Red flags ───────────────────────────────────────────────────────────── */
.pe-ov-flags { display: flex; flex-direction: column; gap: var(--space-sm); }

.pe-ov-flag {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
}
.pe-ov-flag--triggered {
  background: var(--flag-100);
  border-color: var(--flag-300);
  border-left: 2px solid var(--flag-500);
}

.pe-ov-flag__body { flex: 1; min-width: 0; }
.pe-ov-flag__title { font-size: var(--text-sm-pe); color: var(--ink-900); font-weight: var(--weight-medium); }
.pe-ov-flag--triggered .pe-ov-flag__title { color: var(--flag-700); }
.pe-ov-flag__src { font-size: var(--text-xs-pe); color: var(--ink-300); margin-top: var(--space-hair); }
.pe-ov-flag__icon { flex-shrink: 0; margin-top: 2px; }
.pe-ov-flag__icon--triggered { color: var(--flag-500); }
.pe-ov-flag__icon--clear { color: var(--verified); }

/* ── Key findings ────────────────────────────────────────────────────────── */
.pe-ov-findings { display: flex; flex-direction: column; gap: var(--space-sm); }
.pe-ov-finding {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body-pe);
  color: var(--ink-700);
}
.pe-ov-finding__bullet { color: var(--lens-600); flex-shrink: 0; line-height: 1.4; }

/* ── Workstream coverage chips ───────────────────────────────────────────── */
.pe-ov-ws-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .pe-ov-ws-grid { grid-template-columns: repeat(4, 1fr); }
}
.pe-ov-ws {
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
  text-align: center;
}
.pe-ov-ws__name {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  text-transform: capitalize;
  font-weight: var(--weight-semibold);
}
.pe-ov-ws__summary { font-size: var(--text-sm-pe); margin-top: var(--space-xs); color: var(--ink-700); }
.pe-ov-ws--well .pe-ov-ws__summary { color: var(--verified); }
.pe-ov-ws--partial .pe-ov-ws__summary { color: var(--review); }
.pe-ov-ws--thin { opacity: 0.85; }
.pe-ov-ws--thin .pe-ov-ws__summary { color: var(--ink-500); }

/* ── Instant insights ────────────────────────────────────────────────────── */
.pe-ov-insight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .pe-ov-insight-grid { grid-template-columns: repeat(2, 1fr); }
}
.pe-ov-insight__cat {
  font-size: var(--text-xs-pe);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  font-weight: var(--weight-semibold);
}
.pe-ov-insight__cat--risk { color: var(--flag-700); }
.pe-ov-insight__body {
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  margin-top: var(--space-sm);
  line-height: var(--lh-sm);
}
.pe-ov-insight__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
}

/* ── Empty / loading states (§N) ─────────────────────────────────────────── */
.pe-ov-empty {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg);
  background: var(--paper-raised);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  max-width: 560px;
  margin: var(--space-xl) auto;
}
.pe-ov-empty__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-sm) 0;
}
.pe-ov-empty__body {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-500);
  margin: 0 0 var(--space-lg) 0;
}

.pe-ov-loading { padding: var(--space-lg) 0; }
.pe-ov-loading__row { display: flex; flex-direction: column; gap: var(--space-md); }
.pe-ov-skel { height: 14px; border-radius: var(--radius-pe-sm); }
.pe-ov-skel--title { height: 20px; width: 40%; }
.pe-ov-skel--wide { width: 100%; }
.pe-ov-skel--card { height: 96px; }
.pe-ov-loading__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
@media (min-width: 768px) {
  .pe-ov-loading__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE-4 UPLIFT — the top of the Overview tab lifted onto the design system.

   Three sub-surfaces that previously used raw Tailwind (tiny 9–12px text,
   grey-on-grey, competing red/amber/teal fills) are moved onto tokens here:

     1. Workstream detail drill-in   → pe-ov-detail__* / pe-ov-ri* / pe-ov-aside*
     2. Action Queue                 → pe-ov-aq*
     3. Diligence Coverage grid      → pe-ov-cov*

   §H polish rules honored:
   • No emoji. Warm register (--attention-*) is used ONLY for genuine risk:
     a blocked workstream, a triggered red flag, a high-severity queue item,
     a critical rubric gap. Everything else is quiet ink / teal (lens).
   • Content the partner reads is at a readable size (body ≥ 14px). Labels and
     metadata may sit at ~12px but never 9/10px.
   • Cards share the pe-card treatment (paper-raised, hairline rule).
   • Quiet pills with a single active state. Confidence is never a percentage.
   • Cited figures carry a .pe-source-chip (wired to the provenance panel).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared: a quiet section title used across the three surfaces ────────── */
.pe-ov-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--space-md) 0;
}
.pe-ov-head__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}
.pe-ov-head__count {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
  padding: 2px var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
}
.pe-ov-head__meta {
  margin-left: auto;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}
.pe-ov-head__sub {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
  margin: 0 0 var(--space-base) 0;
  max-width: 62ch;
}
.pe-ov-head__sub strong { color: var(--ink-700); font-weight: var(--weight-semibold); }

/* Quiet numeric readout (mono) used for "Overall" / "Coverage" summaries. */
.pe-ov-readout { text-align: right; flex-shrink: 0; }
.pe-ov-readout__label {
  font-size: var(--text-xs-pe);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-300);
}
.pe-ov-readout__value {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  line-height: 1.1;
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-ov-readout__sub {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}

/* ═══════════════════════════════════════════════════════════════════════
   1 — WORKSTREAM DETAIL DRILL-IN
   ═══════════════════════════════════════════════════════════════════════ */
.pe-ov-detail { margin-bottom: var(--space-lg); }

.pe-ov-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--space-md);
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-600);
}
.pe-ov-detail__back:hover { color: var(--lens-700); text-decoration: underline; }
.pe-ov-detail__back:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }

.pe-ov-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-base);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-base);
  border-bottom: 1px solid var(--rule);
}
.pe-ov-detail__eyebrow {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-300);
  margin-bottom: var(--space-hair);
}
.pe-ov-detail__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-ov-detail__title i { color: var(--lens-600); font-size: 0.8em; }
.pe-ov-detail__sub {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: var(--space-xs) 0 0 0;
}

.pe-ov-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .pe-ov-detail__grid { grid-template-columns: 2fr 1fr; }
}
.pe-ov-detail__main { display: flex; flex-direction: column; gap: var(--space-lg); }
.pe-ov-detail__aside { display: flex; flex-direction: column; gap: var(--space-lg); }

/* Status group heading — quiet dot + label + count. */
.pe-ov-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-500);
}
.pe-ov-group__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-300); flex-shrink: 0; }
.pe-ov-group--active .pe-ov-group__head { color: var(--lens-700); }
.pe-ov-group--active .pe-ov-group__dot { background: var(--lens-500); }
.pe-ov-group--done .pe-ov-group__head { color: var(--ink-500); }
.pe-ov-group--done .pe-ov-group__dot { background: var(--verified); }
.pe-ov-group__count { color: var(--ink-300); font-weight: var(--weight-regular); }
.pe-ov-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }

/* Rubric item — a quiet card, readable label. */
.pe-ov-ri {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
  padding: var(--space-md);
}
.pe-ov-ri__top { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.pe-ov-ri__badge {
  flex-shrink: 0;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pe-sm);
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-500);
}
.pe-ov-ri--covered .pe-ov-ri__badge { color: var(--verified); border-color: var(--lens-100); background: var(--lens-tint); }
.pe-ov-ri--in_progress .pe-ov-ri__badge { color: var(--lens-700); border-color: var(--lens-100); background: var(--lens-tint); }
.pe-ov-ri__label { flex: 1; min-width: 0; font-size: var(--text-body-pe); line-height: var(--lh-sm); font-weight: var(--weight-semibold); color: var(--ink-900); }
.pe-ov-ri__critical {
  flex-shrink: 0;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--attention-text);
}
.pe-ov-ri__desc { font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-500); margin: var(--space-hair) 0 0 0; }
.pe-ov-ri__evidence { font-size: var(--text-sm-pe); color: var(--ink-500); margin-top: var(--space-sm); }
.pe-ov-ri__evidence-label { font-weight: var(--weight-semibold); color: var(--ink-700); }
.pe-ov-ri__doc { display: inline-flex; align-items: baseline; gap: var(--space-xs); margin-right: var(--space-sm); color: var(--ink-700); }
.pe-ov-ri__doc i { color: var(--ink-300); font-size: 0.85em; }

.pe-ov-detail__na-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.pe-ov-detail__na-item { font-size: var(--text-sm-pe); color: var(--ink-300); text-decoration: line-through; }
.pe-ov-detail__empty { font-size: var(--text-sm-pe); color: var(--ink-500); font-style: italic; }

/* Aside sections — documents / NTBs / red flags. */
.pe-ov-aside__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-500);
}
.pe-ov-aside__title i { color: var(--lens-600); font-size: 0.9em; }
.pe-ov-aside__title--flag { color: var(--attention-text); }
.pe-ov-aside__title--flag i { color: var(--attention-marker); }
.pe-ov-aside__count { color: var(--ink-300); font-weight: var(--weight-regular); }
.pe-ov-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }

.pe-ov-aside-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
  padding: var(--space-sm) var(--space-md);
}
.pe-ov-aside-item__name { font-size: var(--text-sm-pe); font-weight: var(--weight-medium); color: var(--ink-900); }
.pe-ov-aside-item__body { font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-700); }
.pe-ov-aside-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  margin-top: var(--space-xs);
}
.pe-ov-aside-item__tag {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
  padding: 1px var(--space-sm);
  border-radius: var(--radius-pe-sm);
  background: var(--paper-sunken);
  color: var(--ink-500);
}
.pe-ov-aside-item__tag--ok { background: var(--lens-tint); color: var(--verified); }

.pe-ov-aside-flag {
  border: 1px solid var(--attention-border);
  border-left-width: 3px;
  border-radius: var(--radius-pe-md);
  background: var(--attention-bg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--attention-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   2 — ACTION QUEUE ("What needs you today")
   ═══════════════════════════════════════════════════════════════════════ */
/* Base card treatment comes from .pe-card (paper-raised, hairline, radius);
   this only adds Overview composition on top. */
.pe-ov-aq { margin-bottom: var(--space-lg); }
.pe-ov-aq__header { margin-bottom: var(--space-base); padding-bottom: var(--space-md); border-bottom: 1px solid var(--rule); }
.pe-ov-aq__intro { font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-500); margin: var(--space-sm) 0 0 0; }
.pe-ov-aq__intro strong { color: var(--ink-700); font-weight: var(--weight-semibold); }

.pe-ov-aq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }

.pe-ov-aq__item {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
  padding: var(--space-base);
}
/* The ONLY warm item: a high-severity action. A quiet left marker, no fill. */
.pe-ov-aq__item--high { border-left: 3px solid var(--attention-border); }

.pe-ov-aq__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  font-size: var(--text-xs-pe);
}
.pe-ov-aq__sev {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-semibold);
  color: var(--ink-500);
}
.pe-ov-aq__sev::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--ink-300); }
.pe-ov-aq__sev--high { color: var(--attention-text); }
.pe-ov-aq__sev--high::before { background: var(--attention-marker); }
.pe-ov-aq__ws { color: var(--ink-500); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.pe-ov-aq__deadline { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--ink-500); }
.pe-ov-aq__deadline i { font-size: 0.85em; color: var(--ink-300); }

.pe-ov-aq__title { font-size: var(--text-body-pe); line-height: var(--lh-sm); font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0 0 var(--space-hair) 0; }
.pe-ov-aq__desc { font-size: var(--text-body-pe); line-height: var(--lh-body); color: var(--ink-700); margin: 0 0 var(--space-md) 0; }

/* Cited figure — the read figure at readable size, chip wired to provenance. */
.pe-ov-aq__cite { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; margin: 0 0 var(--space-md) 0; }
.pe-ov-aq__figure { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; font-size: var(--text-sm-pe); font-weight: var(--weight-semibold); color: var(--ink-900); }

.pe-ov-aq__next {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}
.pe-ov-aq__next i { color: var(--lens-600); margin-top: 2px; flex-shrink: 0; }
.pe-ov-aq__next-label { font-weight: var(--weight-semibold); color: var(--ink-900); }

.pe-ov-aq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.pe-ov-aq__logged { margin-left: auto; font-size: var(--text-xs-pe); color: var(--ink-300); font-style: italic; }

.pe-ov-aq__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-base);
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-600);
}
.pe-ov-aq__more:hover { color: var(--lens-700); text-decoration: underline; }
.pe-ov-aq__more:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }
.pe-ov-aq__more i { font-size: 0.8em; }

/* "All caught up" — a calm, positive clear state (NOT the warm register).
   Box treatment from .pe-card; this adds the row layout only. */
.pe-ov-aq-clear {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.pe-ov-aq-clear__icon { color: var(--verified); font-size: var(--text-h3); margin-top: 2px; flex-shrink: 0; }
.pe-ov-aq-clear__title { font-size: var(--text-body-pe); font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0; }
.pe-ov-aq-clear__body { font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-500); margin: var(--space-hair) 0 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   3 — DILIGENCE COVERAGE grid
   ═══════════════════════════════════════════════════════════════════════ */
.pe-ov-cov { margin-bottom: var(--space-xl); }
.pe-ov-cov__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-base); margin-bottom: var(--space-md); }

.pe-ov-cov__rubric-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: var(--space-sm);
  padding: 2px var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--lens-600);
  vertical-align: middle;
}
.pe-ov-cov__rubric-btn:hover { border-color: var(--lens-100); background: var(--lens-tint); color: var(--lens-700); }
.pe-ov-cov__rubric-btn:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
.pe-ov-cov__rubric-btn i { font-size: 0.85em; }
.pe-ov-cov__rubric-sep { color: var(--ink-100); }
.pe-ov-cov__rubric-count { color: var(--ink-500); font-weight: var(--weight-regular); font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; }

/* Legend — quiet dots; blocked is the only warm one. */
.pe-ov-cov__legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--text-xs-pe); color: var(--ink-500); }
.pe-ov-cov__legend-item { display: inline-flex; align-items: center; gap: var(--space-xs); }
.pe-ov-cov__legend-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.pe-ov-cov__legend-dot--blocked { background: var(--attention-marker); }
.pe-ov-cov__legend-dot--in-progress { background: var(--lens-500); }
.pe-ov-cov__legend-dot--complete { background: var(--verified); }
.pe-ov-cov__legend-dot--not-started { background: var(--ink-300); }

.pe-ov-cov__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) { .pe-ov-cov__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pe-ov-cov__grid { grid-template-columns: repeat(4, 1fr); } }

/* Coverage card — quiet pe-card; only the blocked one goes warm.
   Box treatment (bg/border/radius) inherited from .pe-card; padding tightened
   for the 4-col grid. */
.pe-ov-cov-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-base);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-in-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.pe-ov-cov-card:hover { border-color: var(--rule-strong); }
.pe-ov-cov-card:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
/* "Not started" is signalled by the muted icon + quiet badge — NOT by a
   card-wide opacity, which would drop the footer text below AA contrast. */
.pe-ov-cov-card--blocked { border-color: var(--attention-border); border-left: 3px solid var(--attention-border); }

.pe-ov-cov-card__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.pe-ov-cov-card__icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-pe-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--lens-tint);
  color: var(--lens-600);
  font-size: var(--text-sm-pe);
}
.pe-ov-cov-card--complete .pe-ov-cov-card__icon { background: var(--lens-tint); color: var(--verified); }
.pe-ov-cov-card--not-started .pe-ov-cov-card__icon { background: var(--paper-sunken); color: var(--ink-300); }
.pe-ov-cov-card--blocked .pe-ov-cov-card__icon { background: var(--attention-bg); color: var(--attention-marker); }
.pe-ov-cov-card__name { flex: 1; min-width: 0; font-size: var(--text-sm-pe); font-weight: var(--weight-semibold); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pe-ov-cov-card__badge {
  flex-shrink: 0;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--space-sm);
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-500);
}
.pe-ov-cov-card--in-progress .pe-ov-cov-card__badge { color: var(--lens-700); border-color: var(--lens-100); background: var(--lens-tint); }
.pe-ov-cov-card--complete .pe-ov-cov-card__badge { color: var(--verified); border-color: var(--lens-100); background: var(--lens-tint); }
.pe-ov-cov-card--blocked .pe-ov-cov-card__badge { color: var(--attention-text); border-color: var(--attention-border); background: var(--attention-bg); }

/* Thin coverage bar — a single token fill (no traffic light). */
.pe-ov-cov-card__track { height: 4px; background: var(--paper-sunken); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-xs); }
.pe-ov-cov-card__fill { height: 100%; border-radius: 999px; background: var(--lens-500); transition: width var(--motion-base) var(--ease-out); }
.pe-ov-cov-card--complete .pe-ov-cov-card__fill { background: var(--verified); }
.pe-ov-cov-card--blocked .pe-ov-cov-card__fill { background: var(--attention-marker); }

.pe-ov-cov-card__cap {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  margin-bottom: var(--space-md);
}
.pe-ov-cov-card__cap-num { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--ink-900); }
.pe-ov-cov-card__cap-pct { margin-left: auto; font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--ink-700); }

/* 3-stat row — mono counts, red flags warm only when > 0. */
.pe-ov-cov-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-md);
}
.pe-ov-cov-card__stat { text-align: center; }
.pe-ov-cov-card__stat-num { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--ink-900); }
.pe-ov-cov-card__stat--flag .pe-ov-cov-card__stat-num { color: var(--attention-text); }
.pe-ov-cov-card__stat-label { font-size: var(--text-xs-pe); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-300); }

/* "Next" critical gap — quiet teal, not warm. */
.pe-ov-cov-card__next {
  border-left: 2px solid var(--lens-500);
  background: var(--lens-tint);
  border-radius: 0 var(--radius-pe-sm) var(--radius-pe-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.pe-ov-cov-card__next-label { font-size: var(--text-xs-pe); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--lens-700); margin-bottom: var(--space-hair); }
.pe-ov-cov-card__next-body { font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-700); }

/* Top red flag — the warm register. */
.pe-ov-cov-card__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  border-left: 2px solid var(--attention-border);
  background: var(--attention-bg);
  border-radius: 0 var(--radius-pe-sm) var(--radius-pe-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.pe-ov-cov-card__alert i { color: var(--attention-marker); font-size: 0.9em; margin-top: 2px; flex-shrink: 0; }
.pe-ov-cov-card__alert-body { font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--attention-text); }

.pe-ov-cov-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}
.pe-ov-cov-card__updated { font-size: var(--text-xs-pe); color: var(--ink-300); }
.pe-ov-cov-card__open { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs-pe); font-weight: var(--weight-semibold); color: var(--lens-600); }
.pe-ov-cov-card__open i { font-size: 0.85em; }
.pe-ov-cov-card:hover .pe-ov-cov-card__open { color: var(--lens-700); }

.pe-ov-cov__empty { font-size: var(--text-sm-pe); color: var(--ink-500); font-style: italic; }

/* Truncate long copy inside cards without dropping below readable size. */
.pe-ov-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ───── source: pe-docs-artifacts-uplift.css ───── */
/* ═══════════════════════════════════════════════════════════════════════
   PE Documents + Artifacts tabs — institutional uplift (Phase 4 §H WAVE 1).

   Scope: the Documents tab (x-show="activeTab === 'documents'") and the
   Artifacts tab (x-show="activeTab === 'artifacts'") in
   public/app/pe/workspace.html only.
   Prefixes: pe-doc-  and  pe-art-   (disjoint from pe-ov-/pe-mc-/pe-ntb-/…).

   These two surfaces were never redesigned — they still used raw Tailwind
   (tiny text-[9/10/11px], grey-on-grey, competing blue/green/red/teal fills).
   This file lifts them to the same caliber as the completed Phase-4 surfaces.

   §H rules honored (DESIGN_SYSTEM.md §5 / spec §B):
   • Tokens only — no hardcoded color / type / space / radius / elevation.
   • NO emoji. FA icons + belief/confidence palette only.
   • Warm register (--attention-*) reserved for GENUINE risk: a failed /
     error document, and a destructive delete affordance on hover. A document
     that is merely processing is the calm intelligence register (lens), NOT
     warm. Routine documents / artifacts stay quiet ink.
   • Readable type: titles/body ≥ 14px; labels / metadata ~12–13px, never
     9/10px. Confidence is never a percentage.
   • Cards share the .pe-card treatment (paper-raised, hairline rule, radius).
   • Quiet pills with a single active state.
   • Progressive loading — a staged rail / skeletons, not a bare spinner wall.

   Loads AFTER _components.css so this composition wins; never redefines a token.
   ═══════════════════════════════════════════════════════════════════════ */

.pe-doc-surface,
.pe-art-surface {
  color: var(--ink-700);
  font-family: var(--font-sans-pe);
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED — surface header (serif title + upload / hint on the right)
   ═══════════════════════════════════════════════════════════════════════ */
.pe-doc-head,
.pe-art-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-base);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.pe-doc-head__title,
.pe-art-head__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-doc-head__sub,
.pe-art-head__sub {
  margin: var(--space-hair) 0 0 0;
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
  max-width: 62ch;
}

/* Upload control — the foundation primary button hosts a hidden file input. */
.pe-doc-upload { cursor: pointer; }
.pe-doc-upload__input { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   DOCUMENTS TAB
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Phase guidance — calm intelligence register (lens), never warm ─────── */
.pe-doc-guidance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-base);
  margin-bottom: var(--space-base);
  background: var(--lens-tint);
  border: 1px solid var(--lens-100);
}
.pe-doc-guidance__icon { color: var(--lens-600); font-size: var(--text-body-pe); margin-top: 2px; flex-shrink: 0; }
.pe-doc-guidance__title { margin: 0; font-size: var(--text-body-pe); font-weight: var(--weight-semibold); color: var(--lens-700); }
.pe-doc-guidance__hint { margin: var(--space-hair) 0 0 0; font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-700); }

/* ── Upload progress — inline, quiet, intelligence register ─────────────── */
.pe-doc-progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-base);
  margin-bottom: var(--space-base);
  border: 1px solid var(--lens-100);
  border-radius: var(--radius-pe-md);
  background: var(--lens-tint);
  font-size: var(--text-sm-pe);
  color: var(--lens-700);
}
.pe-doc-progress i { color: var(--lens-600); }

/* ── Processing panel (§5 two-phase UX) — progressive staging, calm ─────── */
.pe-doc-proc { padding: var(--space-base); margin-bottom: var(--space-base); }
.pe-doc-proc__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md) 0;
  font-size: var(--text-body-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-doc-proc__title i { color: var(--lens-600); }
.pe-doc-proc__list { display: flex; flex-direction: column; gap: var(--space-md); }

.pe-doc-proc__item {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
  padding: var(--space-md);
}
/* The ONE warm item here: a document that failed to process. */
.pe-doc-proc__item--failed {
  border-color: var(--attention-border);
  border-left: 3px solid var(--attention-border);
  background: var(--attention-bg);
}
.pe-doc-proc__item-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  margin-bottom: var(--space-sm);
}
.pe-doc-proc__icon { color: var(--ink-300); flex-shrink: 0; }
.pe-doc-proc__icon--failed { color: var(--attention-marker); flex-shrink: 0; }
.pe-doc-proc__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-doc-proc__item--failed .pe-doc-proc__name { color: var(--attention-text); }
.pe-doc-proc__count { margin: var(--space-md) 0 0 0; font-size: var(--text-xs-pe); color: var(--ink-500); }

/* Skeleton fallback while a document's stage rail is loading (progressive
   loading — a shimmer, not a bare spinner). */
.pe-doc-skel {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--paper-sunken) 0%, var(--rule) 50%, var(--paper-sunken) 100%);
  background-size: 200% 100%;
  animation: pe-doc-shimmer var(--skeleton-shimmer) ease-in-out infinite;
}
@keyframes pe-doc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pe-doc-skel { animation: none; } }

/* ── Documents table — reuses the foundation .pe-table treatment ────────── */
.pe-doc-tablewrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  overflow: hidden;
  background: var(--paper);
}
.pe-doc-table { width: 100%; }
.pe-doc-table td { color: var(--ink-700); }
.pe-doc-table .pe-doc-table__name { font-weight: var(--weight-medium); color: var(--ink-900); }
.pe-doc-table .pe-doc-table__pages { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; color: var(--ink-500); }
.pe-doc-table .pe-doc-table__date { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; font-size: var(--text-xs-pe); color: var(--ink-500); }

/* Document-type — quiet neutral pill (one look; type read from the label,
   not from a per-category color that competes with the warm register). */
.pe-doc-type {
  display: inline-block;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  padding: 2px var(--space-sm);
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-500);
  text-transform: capitalize;
  white-space: nowrap;
}

/* Status — icon + word. ready/searchable verified (teal); processing calm
   (lens); failed is the warm register. Never a traffic light. */
.pe-doc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.pe-doc-status i { font-size: 0.95em; }
.pe-doc-status--ok { color: var(--verified); }
.pe-doc-status--searchable { color: var(--lens-600); }
.pe-doc-status--processing { color: var(--lens-600); }
.pe-doc-status--failed { color: var(--attention-text); }

/* ── Row actions ────────────────────────────────────────────────────────
   The canonical .pe-rowact / .pe-iconbtn primitives now live in _components.css
   (design-system layer). This file keeps only the Documents-specific gap and
   the legacy .pe-doc-actbtn alias for any surface still emitting the old class. */
.pe-doc-actions { display: inline-flex; align-items: center; gap: var(--space-xs); }

/* Legacy alias — retained for any surface still emitting the old class. */
.pe-doc-actbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  cursor: pointer;
  font-size: var(--text-xs-pe);
  color: var(--ink-700);
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out);
}
.pe-doc-actbtn:hover { color: var(--lens-700); background: var(--lens-tint); }
.pe-doc-actbtn:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }
.pe-doc-actbtn--danger:hover { color: var(--attention-text); background: var(--attention-bg); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.pe-doc-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  color: var(--ink-500);
}
.pe-doc-empty__icon { font-size: var(--text-h1); color: var(--ink-100); margin-bottom: var(--space-md); }
.pe-doc-empty__body { margin: 0; font-size: var(--text-body-pe); line-height: var(--lh-body); color: var(--ink-500); }

/* ═══════════════════════════════════════════════════════════════════════
   ARTIFACTS TAB
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Phase group ────────────────────────────────────────────────────────── */
.pe-art-group { margin-bottom: var(--space-lg); }
.pe-art-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
/* Phase pill — quiet by default; the current phase is the single active state. */
.pe-art-phase-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  padding: 2px var(--space-sm);
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-500);
}
.pe-art-phase-pill--current { color: var(--lens-700); border-color: var(--lens-100); background: var(--lens-tint); }
.pe-art-group__current {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lens-600);
}

/* ── Generation template grid ───────────────────────────────────────────── */
.pe-art-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) { .pe-art-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .pe-art-grid { grid-template-columns: repeat(4, 1fr); } }

.pe-art-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
  padding: var(--space-base);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-in-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.pe-art-card:hover { border-color: var(--rule-strong); }
.pe-art-card:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
.pe-art-card:disabled { opacity: 0.5; cursor: not-allowed; }
/* Recommended-for-current-phase card (artifactCardClass → 'recommended').
   Quiet lens accent — a left marker, not a fill that competes with risk. */
.pe-art-card.recommended {
  border-color: var(--lens-100);
  border-left: 3px solid var(--lens-500);
  background: var(--lens-tint);
}
.pe-art-card__head { display: flex; align-items: center; gap: var(--space-sm); }
.pe-art-card__icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-pe-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--lens-tint);
  color: var(--lens-600);
  font-size: var(--text-sm-pe);
}
.pe-art-card.recommended .pe-art-card__icon { background: var(--paper); }
.pe-art-card__label { font-size: var(--text-body-pe); font-weight: var(--weight-semibold); color: var(--ink-900); }
.pe-art-card__desc { margin: 0; font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-500); }

/* ── Generating banner — calm intelligence register ─────────────────────── */
.pe-art-generating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-base);
  margin-bottom: var(--space-base);
  border: 1px solid var(--lens-100);
  border-radius: var(--radius-pe-md);
  background: var(--lens-tint);
  font-size: var(--text-sm-pe);
  color: var(--lens-700);
}
.pe-art-generating i { color: var(--lens-600); }

/* ── §J6-5 Assembly state — never a bare spinner; names the artifact + the ◊
   conditioning line (calm intelligence register). ──────────────────────── */
.pe-art-assembling {
  padding: var(--space-md) var(--space-base);
  border: 1px solid var(--lens-100);
  background: var(--lens-tint);
}
.pe-art-assembling__title {
  margin: 0;
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--lens-700);
}
.pe-art-assembling__title i { color: var(--lens-600); margin-right: var(--space-xs); }
.pe-art-assembling__cond {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}

/* ── Generated artifacts list ───────────────────────────────────────────── */
.pe-art-subhead {
  margin: var(--space-lg) 0 var(--space-md) 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}
.pe-art-list { display: flex; flex-direction: column; gap: var(--space-md); }

.pe-art-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
  flex-wrap: wrap;
  padding: var(--space-base);
}
.pe-art-item__meta { min-width: 0; }
.pe-art-item__title { margin: 0; font-size: var(--text-body-pe); font-weight: var(--weight-semibold); color: var(--ink-900); }
.pe-art-item__sub {
  margin: var(--space-hair) 0 0 0;
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}
.pe-art-item__sub .pe-num {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
}

.pe-art-item__actions { display: inline-flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
/* Compact ghost actions — reuse .pe-btn vocabulary, tightened for the row. */
.pe-art-item__actions .pe-btn {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm-pe);
}
.pe-art-item__actions .pe-btn i { margin-right: var(--space-xs); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.pe-art-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  font-size: var(--text-body-pe);
  color: var(--ink-500);
}
.pe-art-empty p { margin: 0; }


/* ───── source: pe-metrics-contradictions-uplift.css ───── */
/**
 * FundLens PE — Extracted Metrics (§F, AHA 5) + Contradictions (§G, AHA 1) uplift
 * ============================================================================
 * Applies the institutional design system (§B) to the EXISTING Metrics tab and
 * the cross-document contradictions surface in public/app/pe/workspace.html.
 *
 * Inherits EVERYTHING from _design-tokens.css + _components.css (the source
 * chip, badge, contradiction marker, table, card, panel). This file adds only
 * the surface-specific composition the foundation does not cover — the trust
 * header, the metric row anatomy, and the §G contradiction-card layout.
 *
 * RULES honored here:
 *   - NO hardcoded colors / type / spacing / radius / motion — tokens only.
 *   - The warm register (--flag-*) appears ONLY on contradictions / breaches.
 *   - Confidence is NEVER a percentage — the badge is the qualitative signal.
 *
 * Load order (set in workspace.html <head>):
 *   design-system.css → _design-tokens.css → _components.css → THIS FILE
 * Class prefix: `pe-mc-` (metrics + contradictions) so nothing collides with
 * Tailwind utilities, the legacy em- classes, or the foundation pe- classes.
 * ============================================================================
 */

/* ════════════════════════════════════════════════════════════════════════
   §F.2 — THE TRUST HEADER. Plain editorial language; the contradiction count
   is the only warm element and it is clickable.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mc-surface {
  font-family: var(--font-sans-pe);
  color: var(--ink-700);
}
.pe-mc-trust-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pe-mc-trust-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-xs) 0;
}
.pe-mc-trust-count-line {
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe);
  color: var(--ink-700);
  margin: 0;
}
.pe-mc-trust-breakdown {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: var(--space-xs) 0 0 0;
}
.pe-mc-trust-breakdown .pe-mc-sep { color: var(--ink-100); margin: 0 var(--space-xs); }
.pe-mc-trust-meta {
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  margin-top: var(--space-sm);
}
/* The contradiction count — the only warm element in the header. Clickable. */
.pe-mc-count-warm {
  color: var(--flag-700);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pe-mc-count-warm:hover { color: var(--flag-500); }
.pe-mc-count-warm:focus-visible { outline: 2px solid var(--flag-500); outline-offset: 2px; border-radius: var(--radius-pe-sm); }
.pe-mc-header-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════
   §F.2 — METRIC FAMILY GROUPS + the ~44px metric row.
   The table itself uses the foundation .pe-table; these rules tune the
   surface composition (collapsible family header, row anatomy columns).
   ════════════════════════════════════════════════════════════════════════ */
.pe-mc-families { display: flex; flex-direction: column; gap: var(--space-base); }
.pe-mc-family {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  overflow: hidden;
}
.pe-mc-family-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: left;
  background: var(--paper-raised);
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: var(--space-md) var(--space-base);
  cursor: pointer;
  font-family: var(--font-sans-pe);
}
.pe-mc-family-head:focus-visible { outline: 2px solid var(--lens-400); outline-offset: -2px; }
.pe-mc-family-chevron { color: var(--ink-300); font-size: var(--text-xs-pe); width: 12px; }
.pe-mc-family-icon { color: var(--lens-600); font-size: var(--text-sm-pe); }
.pe-mc-family-name {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-mc-family-count { margin-left: auto; font-size: var(--text-xs-pe); color: var(--ink-300); }

/* Column widths so the mono figures align and the row reads left-to-right:
   name | value | period | provenance | (⚠) | source. */
.pe-mc-table .pe-mc-col-value { width: 1%; white-space: nowrap; }
.pe-mc-table .pe-mc-col-period { width: 1%; white-space: nowrap; }
.pe-mc-table .pe-mc-col-prov { width: 1%; white-space: nowrap; }
.pe-mc-table .pe-mc-col-warn { width: 24px; text-align: center; padding-left: 0; padding-right: 0; }
.pe-mc-table .pe-mc-col-source { width: 1%; white-space: nowrap; text-align: right; }

.pe-mc-metric-name {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
}
.pe-mc-period {
  font-family: var(--font-mono-pe);
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}
.pe-mc-period--review { color: var(--review); font-style: italic; }
/* G13 — projections render visually distinct everywhere: quieter ink + italic,
   so a forecast (FY25E) never reads as an actual. Never warm-colored. */
.pe-mc-value--projected,
.pe-mc-period--projected { color: var(--ink-500); font-style: italic; }
.pe-mc-proj-tag {
  color: var(--ink-500);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-style: italic;
  margin-left: var(--space-xs);
}

/* G11 — Review drawer (quarantined fragment candidates). Calm, not warm: this
   is a review queue, not an alarm. */
.pe-mc-review {
  margin-top: var(--space-lg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-base);
  background: var(--paper);
}
.pe-mc-review__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-base);
  border-bottom: 1px solid var(--rule);
}
.pe-mc-review__icon { color: var(--ink-500); }
.pe-mc-review__title { font-weight: 600; color: var(--ink-800); font-family: var(--font-sans-pe); }
.pe-mc-review__count { color: var(--lens-600); font-family: var(--font-sans-pe); font-size: var(--text-sm-pe); }
.pe-mc-review__hint { color: var(--ink-500); font-size: var(--text-xs-pe); margin-left: auto; }
.pe-mc-review__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-base);
  padding: var(--space-sm) var(--space-base);
  border-bottom: 1px solid var(--rule);
}
.pe-mc-review__row:last-child { border-bottom: none; }
.pe-mc-review__body { min-width: 0; flex: 1 1 auto; }
.pe-mc-review__reason {
  font-size: var(--text-xs-pe);
  color: var(--review);
  font-style: italic;
  margin-bottom: 2px;
}
.pe-mc-review__passage { color: var(--ink-700); font-size: var(--text-sm-pe); }
.pe-mc-review__meta { color: var(--ink-500); font-size: var(--text-xs-pe); margin-top: 2px; }
.pe-mc-review__meta span { margin-right: var(--space-xs); }
.pe-mc-review__actions { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
.pe-mc-review__name {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--text-sm-pe);
  font-family: var(--font-sans-pe);
  width: 12rem;
}
.pe-btn--sm { padding: 4px 10px; font-size: var(--text-xs-pe); }
.pe-mc-review__dismiss { color: var(--ink-500); }

/* G14 — multi-source marker (⧉ n): the canonical value came from the highest
   source class; hover exposes the others. Calm lens, not warm. */
.pe-mc-multisource {
  color: var(--lens-600);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  margin-left: var(--space-xs);
  cursor: help;
}

/* ═══ M-3 / G10 — metric × period MATRIX. One row per concept, period COLUMNS
   so the trend reads left→right (the time dimension is the point). Currency on
   every value; unresolved periods collect in a trailing "Review" column instead
   of spawning sibling rows. Tokens only; calm register. ═══ */
.pe-mc-matrix-wrap { overflow-x: auto; }
.pe-mc-matrix { width: 100%; border-collapse: collapse; }
.pe-mc-matrix th,
.pe-mc-matrix td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
/* Metric name column: the anchor — left, legible, sticky so the trend stays
   readable when many periods scroll horizontally. */
.pe-mc-matrix .pe-mc-mx-metric {
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--paper);
  z-index: 1;
}
th.pe-mc-mx-metric,
th.pe-mc-mx-period {
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-500);
}
/* Period headers: right-aligned mono to line up with the figures beneath. */
.pe-mc-mx-period { text-align: right; white-space: nowrap; }
.pe-mc-mx-period--review { color: var(--review); font-style: italic; }

.pe-mc-mx-cell {
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font-mono-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
}
.pe-mc-mx-row:hover .pe-mc-mx-cell { background: var(--paper-raised, var(--paper)); }
.pe-mc-mx-cell--empty { cursor: default; }
.pe-mc-mx-empty { color: var(--ink-300); }
.pe-mc-mx-cellinner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
}
.pe-mc-mx-val { font-variant-numeric: tabular-nums; }
/* G13 — a projected cell reads quieter + italic, never as an actual. */
.pe-mc-mx-cell--proj .pe-mc-mx-val { color: var(--ink-500); font-style: italic; }
/* Contradicted cell: a restrained warm underline (the attention register),
   not a fill — the figure is still readable, just flagged. */
.pe-mc-mx-cell--flagged { box-shadow: inset 0 -2px 0 0 var(--attention-400, var(--review)); }

/* The per-cell truth dot doubles as the source drill-down (reuses the
   .pe-source-chip provenance plumbing). Strip the chip chrome to a bare glyph;
   color comes from the machine-readable truth marker. */
.pe-mc-mx-dot {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: var(--text-xs-pe);
  cursor: pointer;
}
.pe-mc-mx-dot[data-truth="confirmed"] { color: var(--lens-600); }
.pe-mc-mx-dot[data-truth="partial"] { color: var(--review); }
.pe-mc-mx-dot[data-truth="contradicted"] { color: var(--attention-600, var(--review)); }
.pe-mc-mx-dot[data-truth="absent"] { color: var(--ink-400); }
.pe-mc-mx-dot .pe-source-chip__arrow { display: none; }

/* ═══ Layer 1 — Key Metrics block (M-6 / M-14). The curated read a Partner
   scans first: period series + derived formulas + DNA checks + gap rows. ═══ */
.pe-km {
  margin-bottom: var(--space-lg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-base);
  background: var(--paper);
}
.pe-km__head {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-base);
  border-bottom: 1px solid var(--rule);
}
.pe-km__title { font-family: var(--font-serif-pe, var(--font-sans-pe)); font-weight: 600; color: var(--ink-800); font-size: var(--text-base-pe); }
.pe-km__hint { color: var(--ink-500); font-size: var(--text-xs-pe); }
.pe-km__row { border-bottom: 1px solid var(--rule); }
.pe-km__row:last-child { border-bottom: none; }
.pe-km__line { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-base); flex-wrap: wrap; }
.pe-km__name { font-weight: 600; color: var(--ink-800); min-width: 9rem; }
.pe-km__series { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--font-mono-pe, monospace); font-size: var(--text-sm-pe); color: var(--ink-700); }
.pe-km__pt { display: inline-flex; align-items: baseline; gap: 4px; }
.pe-km__period { color: var(--ink-400); font-size: var(--text-xs-pe); }
.pe-km__pt--proj .pe-km__val, .pe-km__pt--proj .pe-km__period { color: var(--ink-500); font-style: italic; }
.pe-km__proj { color: var(--ink-500); font-style: italic; font-size: var(--text-xs-pe); }
.pe-km__arrow { color: var(--ink-300); margin: 0 2px; }
.pe-km__growth { color: var(--lens-600); font-size: var(--text-xs-pe); margin-left: 6px; }
.pe-km__formula { color: var(--ink-500); cursor: help; margin-left: 4px; font-family: var(--font-mono-pe, monospace); }
.pe-km__dna { font-size: var(--text-xs-pe); margin-left: auto; }
.pe-km__dna--pass { color: var(--lens-600); }
.pe-km__dna--fail { color: var(--flag-700, var(--review)); }
.pe-km__diamond { color: var(--ink-400); }
/* Snapshot cell: the period + basis that make the figure readable. */
.pe-ov-metric__basis {
  margin: var(--space-hair) 0 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-300);
}

.pe-km__badge { margin-left: var(--space-xs); }
/* The badge is a real control — it opens the evidence for that metric. Inherits
   the badge's own colour; only the affordance is added (no new accent). */
.pe-km__badge--action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
}
.pe-km__badge--action:hover { text-decoration-style: solid; }
.pe-km__badge--action:focus-visible {
  outline: 2px solid var(--lens-400);
  outline-offset: 2px;
  border-radius: var(--radius-pe-sm);
}
.pe-badge--verified { color: var(--lens-700, var(--lens-600)); }
.pe-badge--evidenced { color: var(--ink-600); }
.pe-badge--review { color: var(--review); }
.pe-badge--gap { color: var(--ink-400); }
.pe-km__line--gap { color: var(--ink-500); }
.pe-km__gaptext { color: var(--ink-500); font-style: italic; }
.pe-km__req { color: var(--lens-600); background: none; border: none; cursor: pointer; font-size: var(--text-sm-pe); padding: 0; }
.pe-km__req:hover { text-decoration: underline; }
.pe-km__reqdone { color: var(--ink-500); font-size: var(--text-xs-pe); }
/* Override arrow on the value (kept subtle, lens — not warm). */
.pe-mc-override {
  color: var(--lens-600);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  margin-left: var(--space-xs);
  cursor: help;
}
.pe-mc-metric-row { cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════════
   §G — THE CONTRADICTIONS SURFACE (AHA 1). Confident framing, severity-ordered
   cards, each value with a source chip, the reconciled value marked, a
   partner-voice explanation, the "Affects NTB" link, and the action row.
   This is the one place the warm/alarm register is allowed.
   ════════════════════════════════════════════════════════════════════════ */
.pe-mc-contradictions { margin-bottom: var(--space-lg); }
.pe-mc-contra-framing { margin-bottom: var(--space-base); }
.pe-mc-contra-framing__line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--flag-700);
  margin: 0;
}
.pe-mc-contra-framing__sub {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: var(--space-xs) 0 0 0;
}

.pe-mc-contra-cards { display: flex; flex-direction: column; gap: var(--space-base); }

/* The contradiction card — warm register, restrained (not flashy). */
.pe-mc-contra-card {
  background: var(--flag-100);
  border: 1px solid var(--flag-300);
  border-left: 3px solid var(--flag-500);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
}
.pe-mc-contra-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-sans-pe);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--flag-700);
  margin: 0 0 var(--space-md) 0;
}
/* The values block — each row: source label, value (mono), source chip,
   reconciled marker. Grouped under [data-source-group] for prev/next walk. */
.pe-mc-contra-values {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.pe-mc-contra-value {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
}
.pe-mc-contra-value__src { font-size: var(--text-sm-pe); color: var(--ink-700); }
.pe-mc-contra-value__num {
  font-family: var(--font-mono-pe);
  font-size: var(--text-data-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  text-align: right;
}
.pe-mc-reconciled {
  font-size: var(--text-xs-pe);
  color: var(--lens-600);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.pe-mc-contra-explain {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--flag-700);
  margin: 0 0 var(--space-sm) 0;
}
.pe-mc-affects {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: 0 0 var(--space-md) 0;
}
.pe-mc-affects__link {
  color: var(--lens-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.pe-mc-affects__link:hover { color: var(--lens-500); }
.pe-mc-contra-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Set-aside reason prompt (inline, kept in the card). */
.pe-mc-setaside {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.pe-mc-setaside textarea {
  width: 100%;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper);
  color: var(--ink-900);
  resize: vertical;
}

/* Low-signal disclosure — holds the noise (rounding / immaterial near-matches). */
.pe-mc-lowsignal { margin-top: var(--space-base); }
.pe-mc-lowsignal-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans-pe);
  text-align: left;
}
.pe-mc-lowsignal-toggle__label {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pe-mc-lowsignal-toggle:hover .pe-mc-lowsignal-toggle__label { color: var(--ink-700); }
.pe-mc-lowsignal-toggle__sub { display: block; font-size: var(--text-xs-pe); color: var(--ink-300); margin-top: var(--space-hair); }
.pe-mc-lowsignal-list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
.pe-mc-lowsignal-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--rule);
}
.pe-mc-lowsignal-item__num {
  font-family: var(--font-mono-pe);
  font-size: var(--text-data-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}

/* ════════════════════════════════════════════════════════════════════════
   STATES (§F.5 / §G.4) — empty + clean-deal framing. The clean state is a
   GOOD outcome; it reads as confidence, not absence (calm, not warm).
   ════════════════════════════════════════════════════════════════════════ */
.pe-mc-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--ink-300);
  font-size: var(--text-sm-pe);
}
.pe-mc-empty strong { display: block; color: var(--ink-700); font-size: var(--text-body-pe); margin-bottom: var(--space-xs); }
.pe-mc-clean {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-lg);
  color: var(--ink-500);
  font-size: var(--text-sm-pe);
  margin-bottom: var(--space-lg);
}
.pe-mc-clean strong { color: var(--ink-900); font-size: var(--text-body-pe); }

/* Progressive fade-in for metrics arriving during extraction (§F.9 / §O). */
@keyframes pe-mc-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.pe-mc-fade-in { animation: pe-mc-fade-in var(--motion-base) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .pe-mc-fade-in { animation: none !important; }
}


/* ───── source: pe-scratchpad-uplift.css ───── */
/* ============================================================================
   Phase 4 §D — Scratch Pad: inline, de-noised, hierarchy by severity.
   ----------------------------------------------------------------------------
   Applies the institutional design system to the EXISTING scratchpad tab in
   public/app/pe/workspace.html. Inherits everything from _design-tokens.css +
   _components.css (source chip, contradiction marker, card, panel). Adds only
   the scratchpad-specific composition:
     D-1  inline add composer (no blackout modal)
     D-2  ONE compact tag row per card ("commercial · red flag")
     D-3  red-flag notes in the attention register; routine notes quiet
     D-4  real whitespace + readable body (no grey-on-grey, no text-xs body)
     D-5  workstream filter as standard quiet pills (one active state)
     D-6  source chip on notes that cite a figure
   Tokens ONLY. The warm register (--attention-*) appears ONLY on red flags.
   Load order: design-system.css → _design-tokens.css → _components.css → THIS.
   Class prefix: pe-sp- (scratchpad) + the shared .pe-quiet-pill.
   ============================================================================ */

.pe-sp-surface { font-family: var(--font-sans-pe); color: var(--ink-700); }

.pe-sp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-base);
}
.pe-sp-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-xs) 0;
}
.pe-sp-subtitle { font-size: var(--text-sm-pe); color: var(--ink-500); margin: 0; }

/* ── D-5 — workstream filter: standard quiet pills, one active state ──── */
.pe-sp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-base);
}
.pe-quiet-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-md);
  cursor: pointer;
  text-transform: capitalize;
  transition: color var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out);
}
.pe-quiet-pill:hover { color: var(--ink-900); border-color: var(--rule-strong); }
.pe-quiet-pill.is-active {
  color: var(--lens-700);
  background: var(--lens-tint);
  border-color: var(--lens-600);
}
.pe-quiet-pill:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }

/* ── D-1 — inline add composer (no blackout modal) ─────────────────────── */
.pe-sp-composer {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pe-sp-composer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-sm);
}
.pe-sp-composer__label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pe-sp-select,
.pe-sp-textarea {
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe);
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-sm) var(--space-md);
}
.pe-sp-select { text-transform: capitalize; }
.pe-sp-textarea {
  width: 100%;
  line-height: var(--lh-body);
  resize: vertical;
  min-height: 68px;
}
.pe-sp-textarea:focus,
.pe-sp-select:focus { outline: none; border-color: var(--lens-600); box-shadow: 0 0 0 2px var(--lens-tint); }
.pe-sp-composer__actions { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-sm); }

/* ── The note cards — real whitespace, readable body (D-4) ─────────────── */
.pe-sp-notes { display: flex; flex-direction: column; gap: var(--space-base); }
.pe-sp-note {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
}
/* D-3 — red-flag note in the attention register; routine notes quiet. */
.pe-sp-note--flag {
  border-left: 3px solid var(--attention-border);
  background: var(--attention-bg);
}
.pe-sp-note__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
/* D-2 — ONE compact tag row: "commercial · red flag". */
.pe-sp-note__tagrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  text-transform: capitalize;
}
.pe-sp-note__tagrow .pe-contradiction-marker { margin-right: var(--space-hair); }
.pe-sp-note--flag .pe-sp-note__tagrow { color: var(--attention-text); font-weight: var(--weight-medium); }

.pe-sp-note__tools { display: inline-flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; }
.pe-sp-note__meta { font-size: var(--text-xs-pe); color: var(--ink-300); font-family: var(--font-mono-pe); }
/* Note tools — the shared .pe-iconbtn recipe (visible resting affordance so
   the controls don't disappear into the note). Sized for the note header. */
.pe-sp-note__iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink-500);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-sm-pe);
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-sp-note__iconbtn:hover { color: var(--lens-700); background: var(--lens-tint); border-color: var(--lens-400); }
.pe-sp-note__iconbtn:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }
.pe-sp-note__iconbtn--danger:hover { color: var(--attention-text); background: var(--attention-bg); border-color: var(--attention-border); }

/* D-4 — readable body: 16px reading size, real line-height, ink-700 (not
   grey-on-grey). Explicit 16px because the root is 14px, matching the
   deliverable-grade precedent in pe-chat-uplift.css. */
.pe-sp-note__body {
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.pe-sp-note__body p { margin: 0 0 var(--space-sm) 0; }
.pe-sp-note__body p:last-child { margin-bottom: 0; }

/* D-6 — source chip row for notes that cite a figure. */
.pe-sp-note__source { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Inline type-change on edit (D-2 — type change happens on edit, not clutter). */
.pe-sp-note__edit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }

.pe-sp-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--ink-300);
  font-size: var(--text-sm-pe);
}
.pe-sp-empty strong { display: block; color: var(--ink-700); font-size: var(--text-body-pe); margin-bottom: var(--space-xs); }


/* ───── source: pe-chat-uplift.css ───── */
/* ============================================================================
   Phase 4 §C — Chat / Deal Intelligence: the structured analysis card.
   Analytical answers render verdict-first with cited evidence, the
   contradiction in the attention register, and a clean fund-criteria block —
   never a raw markdown dump, never an emoji. Tokens only; warm ONLY for the
   contradiction. Loaded after _components.css.
   ========================================================================== */

.pe-chat-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md, 10px);
  padding: 16px 18px;
  max-width: 100%;
}

/* ── Verdict — the answer, first and unmissable ── */
.pe-chat-verdict {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: var(--text-body-pe);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin-bottom: 14px;
}
.pe-chat-verdict__glyph { flex-shrink: 0; font-size: 15px; line-height: 1.5; }
.pe-chat-verdict--confirmed .pe-chat-verdict__glyph { color: var(--lens-600); }
.pe-chat-verdict--partial .pe-chat-verdict__glyph { color: var(--lens-600); }
.pe-chat-verdict--unconfirmed .pe-chat-verdict__glyph { color: var(--ink-300); }
.pe-chat-verdict--contradicted .pe-chat-verdict__glyph { color: var(--attention-marker, #b45309); }

/* ── Section labels — quiet ── */
.pe-chat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-300);
  margin: 14px 0 6px;
}

/* ── Evidence — clean list, mono figures, source chips ── */
.pe-chat-evidence { display: flex; flex-direction: column; gap: 8px; }
.pe-chat-evidence__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
}
.pe-chat-evidence__item .pe-source-chip { flex-shrink: 0; }

/* ── Contradiction — the attention register, set apart ── */
.pe-chat-contradiction {
  margin-top: 14px;
  border-left: 3px solid var(--attention-border, #d97706);
  background: var(--attention-bg, #fff7ed);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pe-chat-contradiction__marker { color: var(--attention-marker, #b45309); flex-shrink: 0; font-weight: 700; }
.pe-chat-contradiction__body { font-size: 14px; line-height: 1.5; color: var(--attention-text, #7c2d12); }

/* ── Fund-criteria — a clean verified block, no emoji ── */
.pe-chat-criteria {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
}
.pe-chat-criteria__glyph { color: var(--lens-600); flex-shrink: 0; font-weight: 700; }

/* ── ◊ conditioning — the moat, visible in the chat ── */
.pe-chat-conditioning {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-500);
}
.pe-chat-conditioning__glyph { color: var(--lens-700); font-size: 13px; }
.pe-chat-conditioning__why {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--lens-600); font-size: 12px; font-weight: 600;
}
.pe-chat-conditioning__why:hover { color: var(--lens-700); text-decoration: underline; }

/* ── Simple answers stay light: a clean sentence + chip, not a card ── */
.pe-chat-simple { font-size: 14px; line-height: 1.55; color: var(--ink-700); }
.pe-chat-simple .pe-source-chip { margin-left: 6px; }

/* ── Answer prose — the answer's SHAPE ─────────────────────────────────────
   The backend answers in markdown. Rendered as ONE text node it collapsed into
   a wall of prose with literal `##` and `**` on screen — while the type scale
   for a properly rendered answer (headings, lists, figure tables) was already
   sitting in the .chat-bubble-ai block below, unused. The renderer now emits
   those elements; this shell only handles what a scope needs beyond type:
   no stray outer margin, and a table that scrolls instead of being squeezed. */
.pe-chat-prose > :first-child { margin-top: 0; }
.pe-chat-prose > :last-child { margin-bottom: 0; }
.pe-chat-prose__scroll { overflow-x: auto; }

/* mono figures inside chat content */
.pe-chat-card .pe-figure, .pe-chat-simple .pe-figure {
  /* Token, not a hardcoded stack — same figure face as .pe-table .pe-num and
     .pe-chat-expand .pe-num, so figures match across every surface. */
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
}


/* ───── source: pe-chat-trace.css ───── */
/*
 * FundLens PE — Phase 5 §E: the "How was this produced" reasoning-trace
 * disclosure on chat answers. Deliberately quiet — it is an audit affordance,
 * not a headline. Reuses the .pe-progress step vocabulary (pe-ic-memo.css) for
 * the step rows; this file styles only the disclosure shell + the step label/
 * detail layout. Design tokens only; no emoji; NO numeric confidence.
 */

.pe-chat-trace {
  margin-top: 10px;
  border-top: 1px solid var(--rule, #e5e7eb);
  padding-top: 8px;
}

.pe-chat-trace__summary {
  cursor: pointer;
  font-size: var(--text-xs-pe, 12px);
  color: var(--ink-500, #6b7280);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.pe-chat-trace__summary::-webkit-details-marker { display: none; }

.pe-chat-trace__summary:hover,
.pe-chat-trace[open] > .pe-chat-trace__summary {
  color: var(--ink-700, #374151);
}

.pe-chat-trace__panel {
  margin-top: 8px;
  padding: 14px 16px;
}

/* The step row already comes from .pe-progress__step; we lay the label + detail
   inline and let the detail wrap under the label on narrow widths. */
.pe-chat-trace__panel .pe-progress__step {
  align-items: baseline;
  flex-wrap: wrap;
}

.pe-chat-trace__label {
  font-weight: 600;
  color: var(--ink-900, #111827);
}

.pe-chat-trace__detail {
  color: var(--ink-500, #6b7280);
}

/* Motion (§J): the disclosure content settles gently; reduced-motion → instant. */
@media (prefers-reduced-motion: no-preference) {
  .pe-chat-trace[open] > .pe-chat-trace__panel {
    animation: peChatTraceIn var(--motion-base, 180ms) ease-out;
  }
}

@keyframes peChatTraceIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* §I-1 — the honest no-source note on an analytical answer. Calm/neutral (this
   is not risk), tokens only, no --attention register. */
.pe-chat-nosource {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rule, #e5e7eb);
  border-radius: var(--radius-pe-sm, 8px);
  background: var(--paper-raised, #f9fafb);
  color: var(--ink-500, #6b7280);
  font-size: var(--text-xs-pe, 12px);
}


/* ───── source: pe-panels-modals-uplift.css ───── */
/* ═══════════════════════════════════════════════════════════════════════
   PE right context panel + sidebar/header decoration + secondary
   modals/drawers — institutional uplift (Phase 4 §H WAVE 3, FINAL).

   Scope (public/app/pe/workspace.html only):
   • the right context panel (x-show="contextPanelOpen"): Fund Criteria,
     Strategy Fit, Phase Guidance card, Red Flags to Watch;
   • sidebar/header decorative labels + icons (avatar initial, phase-stepper
     marker, sidebar section eyebrows, the "Mind" external-link glyph);
   • two home-area strays (the phase-guide chevron + the inline red-flags list);
   • the five secondary modals/drawers that the earlier waves never reached:
     peRubricModal, peEvidenceDrawer, icMemoCite, ntbPanel.whyOpen, icMemoConfig.

   These blocks still carried the last of the raw-Tailwind residue: tiny
   text-[9/10/11px] labels, grey-on-grey metadata, and indigo/teal/red/amber
   utilities. This file lifts them to the caliber of the completed Phase-4
   surfaces WITHOUT touching any Alpine binding — only presentational class
   names change (and four emoji strings in the upload-progress JS).

   §H rules honored (DESIGN_SYSTEM.md §5 / spec §B):
   • Tokens only — no hardcoded color / type / space / radius.
   • NO emoji. FA icons + belief glyphs + .pe-source-chip only.
   • Warm register (--attention-*) reserved for GENUINE risk: the Red Flags
     list and a "Critical" rubric item. The Phase Guidance card is
     INFORMATIONAL → neutral ink + lens accent, never warm.
   • Readable type: titles/body ≥ 14px, labels / metadata ~12–13px, never
     9/10/11px. Confidence is never a percentage.

   Prefixes: pe-ctx-  (context panel), pe-nav-  (sidebar/header),
   pe-pm-  (shared panel/modal vocabulary). All disjoint from the
   pe-doc-/pe-art-/pe-ov-/pe-icm-/pe-artpv- families from Waves 1–2.

   Loads AFTER _components.css so the design-system composition wins; never
   redefines a token.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR / HEADER — decorative labels and glyphs off arbitrary px sizes.
   These were text-[9px]/[10px] on nav chrome (never partner-read content).
   Lifted to token metadata size / small icon size so the grep is clean and
   the chrome still reads as chrome.
   ═══════════════════════════════════════════════════════════════════════ */

/* User-avatar initial inside the 28px header disc (was text-[10px]). */
.pe-nav-avatar-initial {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

/* Phase-stepper marker disc content — the number / glyph inside w-5 h-5
   (was text-[10px] font-bold). Color/background stay on the inline :style. */
.pe-nav-phase-marker {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
}

/* Sidebar section eyebrow ("Workspace" / "Analysis") — was text-[10px]
   font-bold text-gray-400 uppercase tracking-wider. */
.pe-nav-section-label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

/* The "opens elsewhere" arrow glyph on the Mind nav row (was text-[9px]
   text-gray-300). A small decorative icon, quiet ink. */
.pe-nav-ext-icon {
  font-size: 0.72rem;
  color: var(--ink-300);
}

/* Shared tiny decorative icon (toast close, in-button chevrons / links,
   phase-marker check). Icons, not content — sized just under the metadata
   token, inherits currentColor from its control. */
.pe-ui-icon-xs {
  font-size: 0.72rem;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT CONTEXT PANEL — Fund Criteria / Strategy Fit / Phase Guidance /
   Red Flags. Only the residual tiny labels + the register-carrying blocks
   are re-skinned; the already-12px section eyebrows are left as-is.
   ═══════════════════════════════════════════════════════════════════════ */

/* "Edit DNA →" affordance (was text-[10px] text-teal-600). Lens link. */
.pe-ctx-editlink {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-600);
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-ctx-editlink:hover { color: var(--lens-700); }

/* Fund thesis blurb (was text-[11px] text-gray-700 leading-tight). Bumped to
   the readable secondary size — this is content the partner actually reads. */
.pe-ctx-thesis {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-700);
}

/* ── Phase Guidance card — INFORMATIONAL. Neutral ink + a lens accent, on a
   faint lens wash. Deliberately NOT the warm/--attention register. ─────── */
.pe-ctx-guide {
  background: var(--lens-tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
}
.pe-ctx-guide__phase {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-ctx-guide__goal {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}
/* "Key Steps" / "Deliverables" eyebrows (were text-[10px] text-teal-700). */
.pe-ctx-guide__eyebrow {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lens-700);
}
.pe-ctx-guide__list {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}

/* ── Red Flags to Watch — GENUINE risk → the warm register. ────────────── */
.pe-ctx-redflag {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
}
.pe-ctx-redflag__icon { color: var(--attention-text); }
.pe-ctx-redflag__text { color: var(--ink-700); }
.pe-ctx-redflag-empty {
  font-size: var(--text-sm-pe);
  color: var(--ink-300);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED PANEL / MODAL VOCABULARY  (pe-pm-*)
   Used across peRubricModal, peEvidenceDrawer, icMemoCite, the "Why these
   NTBs?" panel, and the IC-memo config slide-over. Every one had the same
   raw residue: text-[10px]/[11px] font-bold gray-400 uppercase eyebrows,
   grey-on-grey metadata, and a couple of genuine-risk affordances still on
   raw red utilities.
   ═══════════════════════════════════════════════════════════════════════ */

/* Uppercase section eyebrow (was text-[10px]/[11px] font-bold gray-400). */
.pe-pm-eyebrow {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}
/* Lens-accent eyebrow variant (was indigo-600 / teal-600). */
.pe-pm-eyebrow--lens { color: var(--lens-600); }

/* Bolder section header with an accent tick (rubric workstream header — was
   text-[11px] font-bold text-gray-700 uppercase). */
.pe-pm-section-head {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}
.pe-pm-section-head__count { color: var(--ink-300); font-weight: var(--weight-regular); }

/* Quiet metadata line (was text-[11px] text-gray-500). */
.pe-pm-meta {
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-500);
}
/* Faintest metadata / helper (was text-[10px]/[11px] text-gray-400). */
.pe-pm-meta-faint {
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-300);
}
/* Small inline form label ("order" on the config rows — was text-[10px]). */
.pe-pm-field-label {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}

/* Rubric-item body copy — descriptive content the partner reads, so the
   readable secondary size, not a metadata size (was text-[11px] gray-500). */
.pe-pm-item-desc {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
}

/* Modal footnote strip (was text-[11px] text-gray-500). */
.pe-pm-footnote {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}

/* "Critical" rubric badge — a GENUINE risk marker → the warm register
   (was text-[10px] font-bold text-red-600). */
.pe-pm-critical {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--attention-text);
}

/* Evidence-drawer severity/workstream row wrapper (was text-[11px]
   font-semibold uppercase). The severity badge inside keeps its own class. */
.pe-pm-sev-row {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

/* Document review-status pill (was bg-green-50 text-green-700 text-[10px]).
   Verified provenance, quiet — not a traffic light. */
.pe-pm-status-badge {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--verified);
  background: var(--lens-tint);
  border-radius: var(--radius-pe-sm);
  padding: 1px 6px;
}

/* Home-area inline Red Flags list item — GENUINE risk → warm register
   (was text-[11px] text-red-600). The Alpine x-text (incl. its leading
   warning glyph) is preserved byte-for-byte; only the class changes. */
.pe-pm-redflag {
  font-size: var(--text-xs-pe);
  line-height: var(--lh-sm);
  color: var(--attention-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   SURFACE + CONTENT TOKENISATION
   The context panel and the modals/drawers were built on raw Tailwind
   surfaces (bg-white) and raw gray/teal/red text. That mix cannot clear AA
   in dark mode (a raw bg-white never flips, so token text lands on white;
   raw gray-900 text never flips, so it lands on dark paper). Re-expressing
   both the surfaces AND the content on tokens lets the whole composition
   flip cleanly and clear AA in light and dark. No Alpine binding changes —
   only class names.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Context-panel surface + rows ──────────────────────────────────────── */
.pe-ctx-panel {
  background: var(--paper);
  border-color: var(--rule);
  color: var(--ink-700);
}
/* Section eyebrow ("Fund Criteria" / "Strategy Fit" / …) — was text-xs
   font-bold text-gray-400 uppercase (gray-400 fails AA). */
.pe-ctx-section-label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}
.pe-ctx-key { color: var(--ink-500); }            /* row label / block label */
.pe-ctx-val { color: var(--ink-900); font-weight: var(--weight-medium); }
.pe-ctx-empty { color: var(--ink-300); font-style: italic; }
.pe-ctx-link { color: var(--lens-600); text-decoration: underline; }
.pe-ctx-link:hover { color: var(--lens-700); }
/* Red-flag threshold figure — a genuine kill-criterion → warm + mono. */
.pe-ctx-flag-num {
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  color: var(--attention-text);
}
/* Strategy-fit metadata + criterion cells. */
.pe-ctx-fit-meta { color: var(--ink-500); }
.pe-ctx-fit-crit { color: var(--ink-900); font-weight: var(--weight-medium); }
.pe-ctx-fit-detail { color: var(--ink-500); }

/* ── Modal / drawer surface + chrome ───────────────────────────────────── */
.pe-pm-modal {
  background: var(--paper);
  color: var(--ink-700);
  border: 1px solid var(--rule);
}
.pe-pm-modal-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.pe-pm-modal-footer {
  background: var(--paper-raised);
  border-top: 1px solid var(--rule);
}
.pe-pm-title {
  font-family: var(--font-serif);
  color: var(--ink-900);
  font-weight: var(--weight-semibold);
}
.pe-pm-close {
  color: var(--ink-300);
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-pm-close:hover { color: var(--ink-700); }
.pe-pm-close:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }
.pe-pm-body { color: var(--ink-700); }
.pe-pm-meta-strong { color: var(--ink-700); font-weight: var(--weight-semibold); }

/* Cards inside a modal/drawer (was border-gray-200). */
.pe-pm-card {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.pe-pm-item-label { color: var(--ink-900); font-weight: var(--weight-medium); }
/* Decorative accent tick on a section head (was bg-teal-500). */
.pe-pm-tick { background: var(--lens-500); }

/* Severity pill — the warm attention chip (was text-white on bg-red-500,
   which fails AA). !important so the retained severityBadgeClass binding is
   overridden without touching the Alpine directive. */
.pe-pm-sev-badge {
  background: var(--attention-bg) !important;
  color: var(--attention-text) !important;
}

/* Doc-type icon tile (was bg-teal-50 text-teal-600). */
.pe-pm-doc-icon { background: var(--lens-tint); color: var(--lens-600); }

/* Callouts — a Finding (warm) and a Recommended step (lens). */
.pe-pm-callout--attention {
  background: var(--attention-bg);
  border-left: 2px solid var(--attention-border);
  color: var(--ink-900);
}
.pe-pm-callout--lens {
  background: var(--lens-tint);
  border-left: 2px solid var(--lens-500);
  color: var(--ink-900);
}

/* Buttons. Primary uses lens-700 (AA-safe under white text); ghost is quiet. */
.pe-pm-btn-primary {
  background: var(--lens-700);
  color: var(--paper);
  border-radius: var(--radius-pe-md);
  transition: background var(--motion-fast) var(--ease-in-out);
}
.pe-pm-btn-primary:hover { background: var(--lens-600); }
.pe-pm-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.pe-pm-btn-ghost {
  background: var(--paper);
  color: var(--ink-700);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  transition: background var(--motion-fast) var(--ease-in-out);
}
.pe-pm-btn-ghost:hover { background: var(--paper-raised); }


/* ═══════════════════════════════════════════════════════════════════════
   Phase-Advance Modal (§J2 / Phase 3 §D)
   Replaces the native confirm(). Editorial card: from→to transition, a
   readiness meter, and an interactive checklist (open items route to the
   surface where they get done). Warm register reserved for open items.
   Tokens only; never redefines a token.
   ═══════════════════════════════════════════════════════════════════════ */
.pe-adv {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg);
  box-shadow: var(--elev-3, 0 20px 48px rgba(15, 23, 42, 0.24));
  color: var(--ink-900);
}

/* Header */
.pe-adv__header {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--rule);
}
.pe-adv__eyebrow {
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-bottom: var(--space-hair);
}
.pe-adv__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2, 1.375rem);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  line-height: 1.2;
  margin: 0;
}
.pe-adv__transition {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
}
.pe-adv__from { color: var(--ink-500); }
.pe-adv__arrow { color: var(--lens-600); font-size: var(--text-xs-pe); }
.pe-adv__to { color: var(--ink-900); font-weight: var(--weight-semibold); }
.pe-adv__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pe-md);
  background: transparent;
  color: var(--ink-300);
  border: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out), color var(--motion-fast) var(--ease-in-out);
}
.pe-adv__close:hover { background: var(--paper-raised); color: var(--ink-700); }

/* Body */
.pe-adv__body { padding: var(--space-lg); }
.pe-adv__loading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  padding: var(--space-md) 0;
}

/* Readiness meter */
.pe-adv-meter { margin-bottom: var(--space-lg); }
.pe-adv-meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}
.pe-adv-meter__label {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  font-weight: var(--weight-medium);
}
.pe-adv-meter__pct {
  font-family: var(--font-mono-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
  font-weight: var(--weight-semibold);
}
.pe-adv-meter__track {
  height: 6px;
  border-radius: 9999px;
  background: var(--rule);
  overflow: hidden;
}
.pe-adv-meter__fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--lens-600);
  transition: width var(--motion-base, 200ms) var(--ease-in-out);
}
.pe-adv-meter__fill--complete { background: var(--positive, var(--lens-600)); }

/* Groups */
.pe-adv-group { margin-bottom: var(--space-lg); }
.pe-adv-group:last-child { margin-bottom: 0; }
.pe-adv-group__label {
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--attention-text);
  margin: 0 0 var(--space-sm);
}
.pe-adv-group__label--done { color: var(--ink-500); }
.pe-adv-group__count {
  font-family: var(--font-mono-pe);
  font-weight: var(--weight-semibold);
}

/* Checklist */
.pe-adv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.pe-adv-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  background: var(--paper);
}
.pe-adv-item--open { background: var(--attention-bg); border-color: var(--attention-border); }
.pe-adv-item__glyph { flex-shrink: 0; color: var(--attention-text); font-size: var(--text-sm-pe); }
.pe-adv-item__glyph--done { color: var(--lens-600); }
.pe-adv-item__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
}
.pe-adv-item--done .pe-adv-item__label { color: var(--ink-500); }
.pe-adv-item__cta {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-700);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-adv-item__cta:hover { color: var(--lens-600); text-decoration: underline; }

/* All-clear / muted notes */
.pe-adv-allclear {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  padding: var(--space-sm) 0;
}
.pe-adv-allclear i { color: var(--lens-600); }
.pe-adv-allclear--muted { color: var(--ink-500); }
.pe-adv-allclear--muted i { display: none; }

/* Footer */
.pe-adv__footer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.pe-adv__softnote {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  margin: 0;
}
.pe-adv__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}


/* ───── source: pe-tearsheets-uplift.css ───── */
/* ============================================================================
   Phase 4 §F — Customer Tearsheets: deliverable-grade type scale, explained
   tags, concentration that reads, clean no-data states.
   ----------------------------------------------------------------------------
   A DELTA layer over pe-ntb-icmemo-tearsheets-uplift.css (which builds the
   print-ready sheet, revenue table, sparkline, and questions). This file lifts
   the Phase-4 execution gaps on the LIVE generated-tearsheet viewer:
     F-1  deliverable-grade type scale — body/questions ~16px (--text-body-pe),
          payer name serif, revenue share prominent mono. No text-xs body.
     F-2  explain the tags — labeled category chips + a one-line legend
     F-3  concentration reads — shares weighted; threshold breaches get the
          attention treatment
     F-4  clean no-data state (honest, not an apology)
     F-6  generator/viewer separation — a calm reading area
   Tokens ONLY; warm register reserved for threshold breaches. Loads AFTER the
   base tearsheet uplift. Class prefix: pe-ts-.
   ============================================================================ */

/* ── F-6 — the calm reading area, separated from the generator controls ── */
.pe-ts-reading {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}
.pe-ts-reading__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.pe-ts-reading__count {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-ts-reading__exports { display: flex; gap: var(--space-sm); }

/* ── The generated sheet (live viewer), lifted to deliverable-grade ────── */
.pe-ts-sheet__grid { display: flex; flex-direction: column; gap: var(--space-lg); }

/* F-1 — the revenue share, prominent mono. */
.pe-ts-share {
  font-family: var(--font-mono-pe);
  font-size: var(--text-h2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  line-height: 1.1;
}
.pe-ts-share__of { font-family: var(--font-sans-pe); font-size: var(--text-sm-pe); color: var(--ink-500); font-weight: var(--weight-regular); }

/* F-3 — a threshold breach gets the attention treatment (the only warm thing). */
.pe-ts-share--breach { color: var(--attention-text); }
.pe-ts-breach {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--attention-text);
}

/* F-1 — questions at real reading size (16px), breathing room. Explicit 16px
   (root is 14px) — this is a deliverable, typeset like one. */
.pe-ts-qlist { list-style: none; margin: 0; padding: 0; counter-reset: tsq2; }
.pe-ts-q {
  counter-increment: tsq2;
  position: relative;
  padding: var(--space-md) 0 var(--space-md) var(--space-xl);
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--ink-900);
}
.pe-ts-q::before {
  content: counter(tsq2);
  position: absolute;
  left: 0;
  top: var(--space-md);
  font-family: var(--font-mono-pe);
  font-size: var(--text-sm-pe);
  color: var(--lens-600);
  font-weight: var(--weight-medium);
}

/* F-2 — labeled category chip (was an unexplained [contract_risk] token). */
.pe-ts-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-700);
  background: var(--lens-tint);
  border: 1px solid var(--lens-100);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-sm);
  margin-left: var(--space-sm);
  text-transform: capitalize;
  white-space: nowrap;
}
/* F-2 — the one-line legend explaining the taxonomy. */
.pe-ts-legend {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin: var(--space-sm) 0 var(--space-md) 0;
}

/* F-4 — clean no-data state (honest, not an apology). */
.pe-ts-nodata {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-sm) var(--space-md);
}
.pe-ts-nodata__glyph { color: var(--ink-300); flex-shrink: 0; }

/* The questions block title — a clear section label, not text-xs. */
.pe-ts-qhead {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: var(--space-base) 0 var(--space-xs) 0;
}


/* ───── source: pe-ntb-uplift.css ───── */
/* ============================================================================
   Phase 4 §E — Need-to-Believes: louder moat, inline/progressive add, cleaner
   stance, quiet cross-surface links.
   ----------------------------------------------------------------------------
   A DELTA layer over pe-ntb-icmemo-tearsheets-uplift.css (which already builds
   the belief-status iconography, card anatomy, and "Why these NTBs?" panel).
   This file only lifts the Phase-4 execution gaps:
     E-1  the ◊ moat signal is PROMINENT (legible --lens-700, not tiny grey),
          with a per-NTB "Why this?" affordance
     E-2  inline / progressive add composer (only the statement required)
     E-3  belief-status icons already present — kept
     E-6  "Ask in Research → / To Scratchpad →" as standard quiet teal links
   Tokens ONLY; warm register reserved for contradictions. Loads AFTER the
   base NTB uplift so this composition wins. Class prefix: pe-ntb-.
   ============================================================================ */

/* ── E-1 — the moat signal, made prominent (not tiny grey) ─────────────── */
.pe-ntb-autogen {
  font-size: var(--text-sm-pe);
  color: var(--ink-700);            /* legible, was --ink-500 (whisper) */
  font-weight: var(--weight-medium);
}
/* The ◊ badge reads in the intelligence color, at a legible size (16px —
   prominent, not the tiny grey whisper the screenshot showed). */
.pe-ntb-autogen .pe-sosl-badge {
  color: var(--lens-700);
  font-size: 16px;
}
.pe-ntb-autogen .pe-sosl-badge:hover { color: var(--lens-600); }

/* Per-NTB "Why this?" — echoes the panel affordance at the NTB level so the
   partner can trace THIS belief to its CIM passage + DNA element (E-1). */
.pe-ntb-why-this {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-xs);
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pe-ntb-why-this:hover { color: var(--lens-700); }
.pe-ntb-why-this:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }

/* Inline expansion surfacing this NTB's own provenance (progressive, quiet). */
.pe-ntb-why-inline {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--lens-tint);
  border: 1px solid var(--lens-100);
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}
.pe-ntb-why-inline__label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: var(--space-hair);
}
.pe-ntb-why-inline__row { margin-bottom: var(--space-sm); }
.pe-ntb-why-inline__row:last-child { margin-bottom: 0; }

/* ── E-2 — inline / progressive add composer ───────────────────────────── */
.pe-ntb-composer {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pe-ntb-composer__statement {
  width: 100%;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-sm) var(--space-md);
  resize: vertical;
  min-height: 56px;
}
.pe-ntb-composer__statement:focus { outline: none; border-color: var(--lens-600); box-shadow: 0 0 0 2px var(--lens-tint); }
.pe-ntb-composer__hint { font-size: var(--text-xs-pe); color: var(--ink-300); margin-top: var(--space-xs); }
/* The progressive-detail toggle — optional fields revealed only on request. */
.pe-ntb-composer__more {
  background: none; border: none; padding: 0;
  color: var(--lens-600); cursor: pointer;
  font-family: var(--font-sans-pe); font-size: var(--text-sm-pe); font-weight: var(--weight-medium);
  text-decoration: underline; text-underline-offset: 2px;
}
.pe-ntb-composer__more:hover { color: var(--lens-700); }
.pe-ntb-composer__detail {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.pe-ntb-composer__detail input,
.pe-ntb-composer__detail select,
.pe-ntb-composer__detail textarea {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-xs) var(--space-sm);
}
.pe-ntb-composer__detail textarea { grid-column: 1 / -1; resize: vertical; }
.pe-ntb-composer__actions { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-md); }

/* Confirmation flash on capture (E-4 — subtle, per the motion system). */
@keyframes pe-ntb-captured { from { background: var(--lens-tint); } to { background: var(--paper-raised); } }
.pe-ntb-card--captured { animation: pe-ntb-captured var(--motion-slow) var(--ease-out); }

/* ── E-6 — cross-surface links as standard quiet teal links ────────────── */
.pe-quiet-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-600);
  cursor: pointer;
  text-decoration: none;
}
.pe-quiet-link:hover { color: var(--lens-700); text-decoration: underline; text-underline-offset: 2px; }
.pe-quiet-link:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }

/* ── E-5 — provocation figures carry source chips ──────────────────────── */
.pe-ntb-prov-sources { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }

/* E-6 (live surface) — the "Ask in Research → / To Scratchpad →" links on the
   inline provocation cards render as standard quiet teal links. Overrides the
   legacy Tailwind utility colors on the two action buttons (tokens only). */
[data-sosl-surface="provocation"] .flex.gap-3.mt-2 > button {
  color: var(--lens-600) !important;
  font-weight: var(--weight-medium);
}
[data-sosl-surface="provocation"] .flex.gap-3.mt-2 > button:hover {
  color: var(--lens-700) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ───── source: pe-ntb-icmemo-tearsheets-uplift.css ───── */
/**
 * FundLens PE — NTBs (§H, deal spine) + IC Memo (§I, AHA 3) + Tearsheets &
 * Management Prep Pack (§J, AHA 4) institutional uplift.
 * ============================================================================
 * Applies the institutional design system (§B) to the EXISTING NTBs, IC Memo,
 * Tearsheets, and Prep Pack tabs in public/app/pe/workspace.html. These three
 * surfaces share one file, so they share this stylesheet.
 *
 * Inherits EVERYTHING from _design-tokens.css + _components.css (the source
 * chip, badge, contradiction marker, ◊ SOSL badge, table, card, slide-in
 * panel). This file adds only the surface-specific composition the foundation
 * does not cover — belief-status iconography, the NTB card anatomy, the IC
 * memo editorial layout, the tearsheet print-ready layout + revenue sparkline.
 *
 * RULES honored here (matching Wave A's pe-metrics-contradictions-uplift.css):
 *   - NO hardcoded colors / type / spacing / radius / motion — tokens only.
 *   - The warm register (--flag-*) appears ONLY on contradictions / breaches.
 *   - Confidence/belief is NEVER a percentage and NEVER a traffic light.
 *   - Belief-status icons are ●◐○⊘ in the ink/lens scale, NOT red/yellow/green.
 *
 * Load order (set in workspace.html <head>):
 *   design-system.css → _design-tokens.css → _components.css → THIS FILE
 * Class prefixes: `pe-ntb-` (NTBs), `pe-icm-` (IC memo), `pe-ts-` (tearsheets/
 * prep pack) so nothing collides with Tailwind, the legacy em-/pe- classes, or
 * Wave A's `pe-mc-` classes.
 * ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════
   §H — THE NTBs PANEL (the deal's analytical spine)
   ════════════════════════════════════════════════════════════════════════ */
.pe-ntb-surface { font-family: var(--font-sans-pe); color: var(--ink-700); }

.pe-ntb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pe-ntb-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-xs) 0;
}
.pe-ntb-subtitle { font-size: var(--text-sm-pe); color: var(--ink-500); margin: 0; }
.pe-ntb-header-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

/* ── Belief-status summary (the at-a-glance counts) ──────────────────── */
.pe-ntb-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-base) var(--space-lg);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  margin-bottom: var(--space-lg);
}
.pe-ntb-summary__item { display: flex; align-items: baseline; gap: var(--space-sm); }
.pe-ntb-summary__count {
  font-family: var(--font-mono-pe);
  font-size: var(--text-data);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}
.pe-ntb-summary__label { font-size: var(--text-sm-pe); color: var(--ink-500); }

/* ════════════════════════════════════════════════════════════════════════
   BELIEF-STATUS ICONOGRAPHY (§H, H-1). ●◐○⊘ — belief states, NOT a
   red/yellow/green traffic light. Confirmed reads in the intelligence color
   (the system is sure it's supported); challenged/unresolved/retired use the
   neutral ink scale. The warm register is reserved for contradictions only.
   ════════════════════════════════════════════════════════════════════════ */
.pe-belief {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: var(--text-body-pe);
  cursor: help;
}
.pe-belief--confirmed { color: var(--lens-600); }   /* ● the evidence supports it */
.pe-belief--challenged { color: var(--ink-500); }   /* ◐ cuts both ways (neutral) */
.pe-belief--unresolved { color: var(--ink-300); }   /* ○ not enough evidence yet  */
.pe-belief--retired { color: var(--ink-100); }      /* ⊘ set aside                */
.pe-belief--confirmed::before { content: '\25CF'; }                 /* ● */
.pe-belief--challenged::before,
.pe-belief--challenged_but_acceptable::before { content: '\25D0'; } /* ◐ */
.pe-belief--unresolved::before,
.pe-belief--active::before { content: '\25CB'; }                    /* ○ */
.pe-belief--escalated_to_kill_consideration::before { content: '\25D0'; }
.pe-belief--retired::before { content: '\2298'; }                   /* ⊘ */
.pe-belief--challenged_but_acceptable { color: var(--ink-500); }
.pe-belief--escalated_to_kill_consideration { color: var(--ink-500); }
.pe-belief--active { color: var(--ink-300); }

/* The status WORD next to the icon (Confirmed / Challenged / Unresolved …). */
.pe-belief-word {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-700);
  text-transform: none;
}

/* ── The NTB card ────────────────────────────────────────────────────── */
.pe-ntb-group { margin-bottom: var(--space-lg); }
.pe-ntb-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.pe-ntb-group__name {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  text-transform: none;
}
.pe-ntb-group__count { font-size: var(--text-xs-pe); color: var(--ink-300); }

.pe-ntb-cards { display: flex; flex-direction: column; gap: var(--space-base); }
.pe-ntb-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
}
.pe-ntb-card--flagged { border-left: 3px solid var(--flag-500); }
.pe-ntb-card__top { display: flex; align-items: flex-start; gap: var(--space-sm); }
.pe-ntb-card__belief {
  background: none;
  border: none;
  padding: var(--space-hair);
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.pe-ntb-card__belief:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }
.pe-ntb-card__main { flex: 1 1 auto; min-width: 0; }
/* The NTB question — phrased as a question, in the firm's voice (serif). */
.pe-ntb-card__q {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}
.pe-ntb-card__statusline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.pe-ntb-card__actions { display: flex; gap: var(--space-xs); flex-shrink: 0; }
/* Compact card actions carry a visible resting affordance (border + readable
   icon) so they don't disappear into the card — the same discoverability fix
   as the Documents .pe-rowact treatment, sized for a card header. Tooltips
   name the action. */
.pe-ntb-card__iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink-500);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-sm-pe);
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-ntb-card__iconbtn:hover { color: var(--lens-700); background: var(--lens-tint); border-color: var(--lens-400); }
.pe-ntb-card__iconbtn:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* Auto-generation note — ◊ marks the DNA-derived NTB (H-2). */
.pe-ntb-autogen {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  margin-top: var(--space-sm);
}

/* Workstream coverage chips (H-4). */
.pe-ntb-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
}
.pe-ntb-coverage__label { color: var(--ink-300); }
.pe-ntb-ws-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-700);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-sm);
}

/* Contradiction linkage (H-5) + re-eval affordance (H-7) — the only warm
   register on this surface. */
.pe-ntb-contradiction {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--flag-700);
  margin-top: var(--space-sm);
}
.pe-ntb-contradiction__link {
  color: var(--flag-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
}
.pe-ntb-reeval {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--flag-100);
  border: 1px solid var(--flag-300);
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-sm-pe);
  color: var(--flag-700);
}

.pe-ntb-card__footer { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }

/* "Why these NTBs?" link (H-3). */
.pe-ntb-why-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--lens-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pe-ntb-why-link:hover { color: var(--lens-500); }

/* "Why these NTBs?" panel body internals (uses the foundation .pe-panel). */
.pe-ntb-why__section-title {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: var(--space-base) 0 var(--space-sm) 0;
}
.pe-ntb-why__passage {
  border-left: 2px solid var(--rule-strong);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
}
.pe-ntb-why__passage-text {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
  margin: 0 0 var(--space-xs) 0;
}
.pe-ntb-why__dna-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--rule);
}

/* Generating + empty states (H-8 / H.4) — never an empty NTB panel. */
.pe-ntb-generating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg);
  color: var(--ink-500);
  font-size: var(--text-sm-pe);
  justify-content: center;
}
.pe-ntb-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--ink-300);
  font-size: var(--text-sm-pe);
}
.pe-ntb-empty strong { display: block; color: var(--ink-700); font-size: var(--text-body-pe); margin-bottom: var(--space-xs); }
.pe-ntb-empty__actions { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-base); }

/* Inline edit textarea inside a card. */
.pe-ntb-edit textarea {
  width: 100%;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper);
  color: var(--ink-900);
  resize: vertical;
}
.pe-ntb-edit__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }

/* Fade-in for cards arriving during generation. */
@keyframes pe-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.pe-fade-in { animation: pe-fade-in var(--motion-base) var(--ease-out); }

/* ════════════════════════════════════════════════════════════════════════
   §I — THE IC MEMO (AHA 3). NTB-first, organized the way PE partners actually
   structure memos. The structural fact must be legible from the TOC alone.
   ════════════════════════════════════════════════════════════════════════ */
.pe-icm-surface { font-family: var(--font-sans-pe); color: var(--ink-700); }
.pe-icm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-base);
}
.pe-icm-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}

/* ── Stage selector (I.2 / I-6) — radio-style, IC1/IC2/IC3/IC Final ──── */
.pe-icm-stages {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
  margin-bottom: var(--space-base);
}
.pe-icm-stages__label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-300);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.pe-icm-stage-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  cursor: pointer;
  font-size: var(--text-sm-pe);
}
.pe-icm-stage-row input { accent-color: var(--lens-600); }
.pe-icm-stage-row__name { font-weight: var(--weight-medium); color: var(--ink-900); }
.pe-icm-stage-row__hint { color: var(--ink-300); }
.pe-icm-stage-row__default {
  margin-left: var(--space-sm);
  font-size: var(--text-xs-pe);
  color: var(--lens-600);
  font-weight: var(--weight-medium);
}
.pe-icm-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-base);
  align-items: center;
}

/* ── Generation progress panel (I.2 / I-2) — shows the NTB questions being
   written, conditioned by SOSL. This is what makes AHA 3 land. ────────── */
.pe-icm-progress {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
  margin-bottom: var(--space-base);
}
.pe-icm-progress__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-xs) 0;
}
/* The ◊ conditioning line (I-3 thread, AHA 2 thread). */
.pe-icm-progress__conditioned {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--lens-600);
  margin-bottom: var(--space-md);
}
.pe-icm-progress__conditioned::before { content: '\25CA'; }
.pe-icm-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
}
.pe-icm-step .icon { width: 16px; text-align: center; flex-shrink: 0; }
.pe-icm-step--done .icon { color: var(--lens-600); }
.pe-icm-step--active { color: var(--ink-900); font-weight: var(--weight-medium); }
.pe-icm-step--active .icon { color: var(--lens-600); }
.pe-icm-step--pending { color: var(--ink-300); }
.pe-icm-step__detail { color: var(--ink-300); }
.pe-icm-progress__eta { font-size: var(--text-xs-pe); color: var(--ink-300); margin-top: var(--space-sm); }

/* ── The memo viewer — editorial layout, sticky NTB-first TOC ────────── */
.pe-icm-memo {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.pe-icm-toc {
  position: sticky;
  top: var(--space-base);
  align-self: start;
  font-family: var(--font-sans-pe);
}
.pe-icm-toc__label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-300);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.pe-icm-toc a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--ink-500);
  text-decoration: none;
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  border-left: 2px solid transparent;
}
.pe-icm-toc a:hover { color: var(--ink-900); background: var(--paper-raised); }
/* The NTB questions in the TOC read as questions, in the firm's voice. This
   is the single most important visual fact about the surface (AHA 3). */
.pe-icm-toc a.pe-icm-toc--ntb {
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  border-left-color: var(--lens-600);
}
.pe-icm-toc a.active { color: var(--ink-900); background: var(--lens-tint); }

.pe-icm-body { max-width: 780px; line-height: var(--lh-body); color: var(--ink-700); }

/* Conditioning preamble at the top, collapsible (I-3). */
.pe-icm-preamble {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--lens-tint);
  border: 1px solid var(--lens-100);
  border-radius: var(--radius-pe-md);
  padding: var(--space-md) var(--space-base);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  margin-bottom: var(--space-lg);
}
.pe-icm-preamble::before { content: '\25CA'; color: var(--lens-600); flex-shrink: 0; }
.pe-icm-preamble__toggle {
  background: none; border: none; padding: 0; margin-left: auto;
  color: var(--lens-600); cursor: pointer; font: inherit; font-size: var(--text-xs-pe);
  text-decoration: underline; text-underline-offset: 2px;
}

/* Fixed prose section headers (Company-overview style sections, when present). */
.pe-icm-body section { margin-top: var(--space-xl); }
.pe-icm-section-h {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-xs);
  margin: 0 0 var(--space-md) 0;
}
/* NTB section headers — Source Serif, prominent, phrased as questions. */
.pe-icm-ntb-h {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}
.pe-icm-ntb-block { margin-top: var(--space-xl); }
.pe-icm-ntb-block__head { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* Evidence grouped by workstream (I-4). */
.pe-icm-evidence-ws {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-300);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: var(--space-md) 0 var(--space-xs) 0;
}
.pe-icm-evidence-ws--challenging { color: var(--review); }
.pe-icm-evidence-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
  padding: var(--space-xs) 0;
}
.pe-icm-provocation {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  margin-top: var(--space-xs);
}
.pe-icm-provocation::before { content: '\25CA'; color: var(--lens-600); }
.pe-icm-coverage-note {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--flag-700);
  margin-top: var(--space-xs);
}
.pe-icm-edit-link {
  background: none; border: none; padding: 0;
  color: var(--lens-600); cursor: pointer; font: inherit;
  font-size: var(--text-xs-pe);
}
.pe-icm-edit-link:hover { color: var(--lens-500); }
.pe-icm-edit textarea {
  width: 100%;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper);
  color: var(--ink-900);
  resize: vertical;
}

/* Empty / placeholder. */
.pe-icm-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--ink-300);
  font-size: var(--text-sm-pe);
}

/* ── The IC-memo NTB right-rail (the deal spine alongside the memo) ──── */
.pe-icm-rail {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--rule);
  padding-left: var(--space-lg);
}
.pe-icm-rail__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-icm-rail__sub { font-size: var(--text-xs-pe); color: var(--ink-300); margin-bottom: var(--space-md); }
.pe-icm-rail-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--paper);
}
.pe-icm-rail-card__q {
  font-family: var(--font-serif);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

/* ── Version diff (I-8) — editorial diff, not code-diff ──────────────── */
.pe-icm-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.pe-icm-diff__col { font-size: var(--text-sm-pe); line-height: var(--lh-body); }
.pe-icm-diff__head { font-size: var(--text-xs-pe); color: var(--ink-300); margin-bottom: var(--space-sm); }
.pe-icm-diff ins {
  background: var(--lens-tint);
  text-decoration: none;
  border-bottom: 1px solid var(--lens-400);
}
.pe-icm-diff del {
  background: var(--paper-sunken);
  color: var(--ink-300);
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════════════
   §J — TEARSHEETS & MANAGEMENT PREP PACK (AHA 4). The work of an associate's
   weekend, collapsed to minutes — and it must read as a finished deliverable,
   not a software export.
   ════════════════════════════════════════════════════════════════════════ */
.pe-ts-surface { font-family: var(--font-sans-pe); color: var(--ink-700); }
.pe-ts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-base);
}
.pe-ts-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}
.pe-ts-header-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

/* ── The configurator (J.2 / J-1) — top payers w/ revenue contribution ─ */
.pe-ts-config {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pe-ts-config__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.pe-ts-config__title {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-ts-config__topn { font-size: var(--text-xs-pe); color: var(--ink-500); }
.pe-ts-config__topn input {
  width: 56px;
  margin-left: var(--space-xs);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-xs);
  font-family: var(--font-mono-pe);
  font-size: var(--text-xs-pe);
}
.pe-ts-customer-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-sm-pe);
  cursor: pointer;
}
.pe-ts-customer-row:hover { background: var(--lens-tint); }
.pe-ts-customer-row input { accent-color: var(--lens-600); }
.pe-ts-customer-row__name { font-weight: var(--weight-medium); color: var(--ink-900); }
.pe-ts-customer-row__type {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-hair) var(--space-sm);
}
.pe-ts-customer-row__rev {
  margin-left: auto;
  font-family: var(--font-mono-pe);
  font-size: var(--text-data-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}
.pe-ts-config__add {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.pe-ts-config__add input {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm-pe);
}
.pe-ts-limited {
  font-size: var(--text-sm-pe);
  color: var(--flag-700);
  background: var(--flag-100);
  border: 1px solid var(--flag-300);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

/* ── Generation progress (J.2 / J-9) — confident sequence, questions last ── */
.pe-ts-progress {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-base) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pe-ts-progress__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0 0 var(--space-sm) 0;
}
.pe-ts-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
}
.pe-ts-step .icon { width: 16px; text-align: center; flex-shrink: 0; }
.pe-ts-step--done .icon { color: var(--lens-600); }
.pe-ts-step--active { color: var(--ink-900); font-weight: var(--weight-medium); }
.pe-ts-step--active .icon { color: var(--lens-600); }
.pe-ts-step--pending { color: var(--ink-300); }

/* ── The customer tearsheet — single-page, print-ready, editorial (J-2/J-6) ── */
.pe-ts-sheets { display: flex; flex-direction: column; gap: var(--space-lg); }
.pe-ts-sheet {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-none);   /* document surface: square corners */
  padding: var(--space-xl);
  box-shadow: var(--elev-1);
}
.pe-ts-sheet__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 2px solid var(--ink-900);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-base);
}
.pe-ts-sheet__name {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}
.pe-ts-sheet__type {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pe-ts-sheet__block { margin-bottom: var(--space-base); }
.pe-ts-sheet__block-title {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  color: var(--ink-300);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm) 0;
}

/* Revenue contribution by year + the one chart that earns its place (J-7). */
.pe-ts-revenue { display: flex; align-items: flex-end; gap: var(--space-xl); }
.pe-ts-revenue__table { font-size: var(--text-sm-pe); }
.pe-ts-revenue__row { display: flex; align-items: baseline; gap: var(--space-md); padding: var(--space-hair) 0; }
.pe-ts-revenue__year { font-family: var(--font-mono-pe); color: var(--ink-300); width: 56px; }
.pe-ts-revenue__amt {
  font-family: var(--font-mono-pe);
  font-size: var(--text-data-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.pe-ts-revenue__pct { font-family: var(--font-mono-pe); font-size: var(--text-xs-pe); color: var(--ink-300); }
/* The sparkline — an inline SVG; a revenue trend is genuinely better seen. */
.pe-ts-sparkline { display: block; }
.pe-ts-sparkline path { fill: none; stroke: var(--lens-600); stroke-width: 1.5; }
.pe-ts-sparkline circle { fill: var(--lens-600); }
.pe-ts-sparkline__caption { font-size: var(--text-xs-pe); color: var(--ink-300); margin-top: var(--space-hair); text-align: center; }

.pe-ts-trend-note {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}

/* Auto-generated questions — the value moment (J-3). */
.pe-ts-questions { list-style: none; margin: 0; padding: 0; counter-reset: tsq; }
.pe-ts-question {
  counter-increment: tsq;
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-xl);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-900);
}
.pe-ts-question::before {
  content: counter(tsq);
  position: absolute;
  left: 0;
  top: var(--space-sm);
  font-family: var(--font-mono-pe);
  font-size: var(--text-xs-pe);
  color: var(--lens-600);
  font-weight: var(--weight-medium);
}
.pe-ts-question__pattern {
  display: inline-block;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  margin-left: var(--space-xs);
}
/* Source chips on every claim sit on their own line under the question. */
.pe-ts-sheet__sources { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }

/* The prep pack — a finished deliverable (J-5/J-6). */
.pe-ts-pack-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-none);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--elev-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.pe-ts-pack-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: 0;
}
.pe-ts-pack-card__meta { font-size: var(--text-xs-pe); color: var(--ink-300); margin-top: var(--space-hair); }
.pe-ts-pack-card__actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

/* Prep-pack configurator (session details + section toggles). */
.pe-ts-pack-config__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-base);
}
.pe-ts-pack-config__field { font-size: var(--text-xs-pe); color: var(--ink-500); }
.pe-ts-pack-config__field input {
  display: block;
  width: 100%;
  margin-top: var(--space-xs);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm-pe);
  font-family: var(--font-sans-pe);
}
.pe-ts-pack-section-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
  cursor: pointer;
}
.pe-ts-pack-section-row:hover { background: var(--lens-tint); }
.pe-ts-pack-section-row input { accent-color: var(--lens-600); }

/* The finished-deliverable footer (page numbers, confidential line). */
.pe-ts-deliverable-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  margin-top: var(--space-base);
  padding-top: var(--space-sm);
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}

/* Empty state — the honest "not enough customer detail" invitation. */
.pe-ts-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--ink-300);
  font-size: var(--text-sm-pe);
}
.pe-ts-empty strong { display: block; color: var(--ink-700); font-size: var(--text-body-pe); margin-bottom: var(--space-xs); }

/* Print rules — the tearsheet/pack reads as a printed document, one per page. */
@media print {
  .pe-ts-header-actions, .pe-ts-config, .pe-ts-progress { display: none !important; }
  .pe-ts-sheet, .pe-ts-pack-card { box-shadow: none; border: none; page-break-after: always; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-fade-in { animation: none !important; }
}


/* ───── source: pe-icmemo-artifact-uplift.css ───── */
/* ═══════════════════════════════════════════════════════════════════════
   PE IC-memo tab + Artifact Preview modal — institutional uplift
   (Phase 4 §H WAVE 2).

   Scope: the IC-memo tab (x-show="activeTab === 'ic-memo'") and the Artifact
   Preview modal (x-show="peArtifactPreview.open") in
   public/app/pe/workspace.html only.
   Prefixes: pe-icm-  and  pe-artpv-  (disjoint from pe-doc-/pe-art-/pe-ov-/…).

   Both blocks still carried raw Tailwind residue the earlier IC-memo styling
   never reached: tiny text-[9/10/11px] labels, grey-on-grey metadata, and the
   Artifact Preview modal was entirely raw (indigo gradient header, indigo/
   teal/red/amber utilities, 10/11px section labels). This file lifts them to
   the same caliber as the completed Phase-4 surfaces WITHOUT touching any
   Alpine binding — only presentational class names change.

   §H rules honored (DESIGN_SYSTEM.md §5 / spec §B):
   • Tokens only — no hardcoded color / type / space / radius / elevation.
   • NO emoji. FA icons + belief glyphs + .pe-source-chip only.
   • Warm register (--attention-*) reserved for GENUINE risk: a HIGH-severity
     artifact row. MEDIUM severity uses the muted --review "look here" amber.
     Everything else stays quiet ink — the indigo decoration is retired.
   • Readable type: titles/body ≥ 14px, labels / metadata ~12–13px, never
     9/10/11px. Confidence is never a percentage.
   • Cards share the .pe-card treatment (paper-raised, hairline rule, radius).

   Loads AFTER _components.css (and pe-ic-memo.css) so this composition wins;
   never redefines a token, never restyles the existing .pe-memo / .pe-belief /
   .pe-source-chip / .pe-ntb-* vocabulary that already lives on the tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   IC-MEMO TAB — small residual labels lifted off raw Tailwind.
   The main memo body (.pe-memo, .pe-belief, .pe-source-chip, .pe-evidence-*,
   .pe-provocation, .pe-ntb-*) is already token-driven and is left untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tab heading — serif, editorial, replaces text-xl font-bold text-gray-900. */
.pe-icm-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

/* "Open existing memo" select — quiet control on the rule hairline. */
.pe-icm-select {
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  padding: var(--space-xs) var(--space-sm);
}
.pe-icm-select:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* Small uppercase section eyebrow (e.g. "Memo stage", "Contents"). Was a
   raw text-xs/text-[10px] font-bold gray-400/500. */
.pe-icm-eyebrow {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

/* Stage-selector radio row label + hint. */
.pe-icm-stage-label {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-700);
}
.pe-icm-stage-hint {
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}

/* Prior-versions dropdown — was raw white/gray-200 popover with 10/11px rows. */
.pe-icm-versions {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  box-shadow: var(--elev-2, 0 8px 24px rgba(15, 24, 41, 0.12));
  padding: var(--space-sm);
}
.pe-icm-versions__title {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
  padding: 0 var(--space-sm) var(--space-xs);
}
.pe-icm-versions__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pe-sm);
}
.pe-icm-versions__row:hover { background: var(--paper-raised); }
.pe-icm-versions__pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}
.pe-icm-versions__empty {
  font-size: var(--text-sm-pe);
  color: var(--ink-300);
  padding: var(--space-sm);
}

/* Inline "Edit" / "Edit synthesis" affordance — was text-teal-600/800. */
.pe-icm-editlink {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-600);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-icm-editlink:hover { color: var(--lens-700); }

/* Section edit textarea. */
.pe-icm-edit-area {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
  font-family: var(--font-sans-pe);
}
.pe-icm-edit-area:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* Empty state (no memo yet). Was text-gray-400 text-sm. */
.pe-icm-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  color: var(--ink-500);
}
.pe-icm-empty__icon { font-size: var(--text-h1); color: var(--ink-100); margin-bottom: var(--space-sm); display: block; }
.pe-icm-empty__body { margin: 0; font-size: var(--text-sm-pe); line-height: var(--lh-sm); color: var(--ink-500); }

/* ═══════════════════════════════════════════════════════════════════════
   ARTIFACT PREVIEW MODAL — full rebuild on the design system.
   The old header used a decorative indigo gradient + indigo eyebrow; the body
   used indigo section rules, gray-500 uppercase keys, and red-/amber-700 for
   severity. Now: paper surface, serif title, lens eyebrow, warm register ONLY
   for a HIGH-severity row.
   ═══════════════════════════════════════════════════════════════════════ */

/* Modal card (the panel inside the scrim). Replaces bg-white rounded-xl. */
.pe-artpv {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg);
  box-shadow: var(--elev-3, 0 24px 48px rgba(15, 24, 41, 0.24));
  color: var(--ink-700);
  font-family: var(--font-sans-pe);
}

/* Header — quiet paper, hairline rule beneath (no indigo gradient). */
.pe-artpv__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-base) var(--space-lg);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
}
.pe-artpv__eyebrow {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lens-600);
  margin-bottom: var(--space-hair);
}
.pe-artpv__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-artpv__meta {
  margin: var(--space-hair) 0 0 0;
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
}
.pe-artpv__meta .pe-num { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; }

/* Header actions. */
.pe-artpv__actions { display: inline-flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.pe-artpv__dl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--paper);
  background: var(--lens-600);
  border: 1px solid var(--lens-600);
  border-radius: var(--radius-pe-md);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out);
}
.pe-artpv__dl:hover { background: var(--lens-700); border-color: var(--lens-700); }
.pe-artpv__dl:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
.pe-artpv__close {
  color: var(--ink-300);
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  border-radius: var(--radius-pe-sm);
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-artpv__close:hover { color: var(--ink-700); }
.pe-artpv__close:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* Scroll body. */
.pe-artpv__body { padding: var(--space-lg); }
.pe-artpv__empty {
  font-size: var(--text-body-pe);
  color: var(--ink-500);
  font-style: italic;
}

/* Section — serif-adjacent minor header on a hairline rule (no indigo). */
.pe-artpv-section { margin-bottom: var(--space-lg); }
.pe-artpv-section__label {
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-700);
}

/* card_list → cards. Each card shares the .pe-card treatment. */
.pe-artpv-cards { display: flex; flex-direction: column; gap: var(--space-md); }
.pe-artpv-card { padding: var(--space-md); }
.pe-artpv-card__row {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  font-size: var(--text-sm-pe);
}
.pe-artpv-card__key {
  flex-shrink: 0;
  width: 8rem;
  margin-top: 1px;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-500);
}
.pe-artpv-card__val {
  flex: 1;
  min-width: 0;
  color: var(--ink-900);
  line-height: var(--lh-sm);
}
/* Warm register — the ONE genuine-risk affordance in this modal. */
.pe-artpv-card__val--high { color: var(--attention-text); font-weight: var(--weight-semibold); }
/* Muted "look here" amber — review-recommended, not alarm. */
.pe-artpv-card__val--medium { color: var(--review); font-weight: var(--weight-semibold); }

/* bullet_list. */
.pe-artpv-bullets {
  list-style: disc;
  padding-left: var(--space-lg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
  line-height: var(--lh-sm);
}

/* object → key/value grid. */
.pe-artpv-obj { display: flex; flex-direction: column; gap: var(--space-xs); }
.pe-artpv-obj__row { display: flex; gap: var(--space-md); padding: 1px 0; }
.pe-artpv-obj__key {
  flex-shrink: 0;
  width: 10rem;
  margin-top: 1px;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-500);
}
.pe-artpv-obj__val {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
  line-height: var(--lh-sm);
}

/* text → prose paragraph. */
.pe-artpv-prose {
  margin: 0;
  font-size: var(--text-sm-pe);
  color: var(--ink-900);
  line-height: var(--lh-body);
  white-space: pre-wrap;
}

/* empty array note. */
.pe-artpv-empty-note {
  margin: 0;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
  font-style: italic;
}

/* Footer. */
.pe-artpv__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}
.pe-artpv__footer-close {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out);
}
.pe-artpv__footer-close:hover { background: var(--paper-raised); }
.pe-artpv__footer-close:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* ── IC-memo helper text classes (NTB right-rail + progress residue) ────── */
/* Quiet metadata note (was text-xs gray-400/500). */
.pe-icm-note { font-size: var(--text-sm-pe); color: var(--ink-500); }
.pe-icm-note--faint { font-size: var(--text-sm-pe); color: var(--ink-300); }
/* Lens-accent subhead (was text-xs font-bold teal-700). */
.pe-icm-note--lens {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lens-700);
}
/* Inline progress-step detail / timing (was text-gray-400 / text-gray-300). */
.pe-icm-step-detail { color: var(--ink-500); }
.pe-icm-step-ms { color: var(--ink-300); }
/* Drag grip (was text-gray-300). */
.pe-icm-grip { color: var(--ink-300); cursor: move; }
/* Color-only faint token (inline severity tag on a provocation, etc.). */
.pe-icm-faint-c { color: var(--ink-300); }

/* ═══════════════════════════════════════════════════════════════════════
   IC-MEMO TAB — token re-skin of the legacy pe-ic-memo.css surface.
   pe-ic-memo.css predates the design system: it hardcodes light-only hex
   (navy/teal/red/#fff) that fails AA contrast and has NO dark-mode support.
   Scoped under .pe-icm-tab (the tab wrapper) so ONLY the IC-memo tab is
   affected, these rules re-express every legacy color/surface on tokens —
   which adapt to dark and clear AA. Warm register is NOT used here (a
   provocation / coverage note is "look here", not alarm → --review).
   Loads after pe-ic-memo.css + pe-ntb-uplift.css, so this composition wins.
   ═══════════════════════════════════════════════════════════════════════ */

/* Stage selector */
.pe-icm-tab .pe-stage-selector {
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg);
  background: var(--paper-raised);
}
.pe-icm-tab .pe-stage-selector__hint {
  color: var(--lens-700);
  background: var(--lens-tint);
}
.pe-icm-tab .pe-btn-primary { background: var(--lens-600); color: var(--paper); border-radius: var(--radius-pe-md); }
.pe-icm-tab .pe-btn-primary:hover { background: var(--lens-700); }
.pe-icm-tab .pe-btn-ghost {
  background: var(--paper);
  color: var(--ink-700);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
}
.pe-icm-tab .pe-btn-ghost:hover { background: var(--paper-raised); }

/* Generation progress panel */
.pe-icm-tab .pe-progress { border: 1px solid var(--rule); border-radius: var(--radius-pe-md); background: var(--paper-raised); }
.pe-icm-tab .pe-progress__title { color: var(--ink-900); }
.pe-icm-tab .pe-progress__step { color: var(--ink-700); }
.pe-icm-tab .pe-progress__step--done .icon { color: var(--verified); }
.pe-icm-tab .pe-progress__step--active { color: var(--ink-900); }
.pe-icm-tab .pe-progress__step--pending { color: var(--ink-500); }
.pe-icm-tab .pe-progress__eta { color: var(--ink-500); }
.pe-icm-tab .pe-progress__conditioned { color: var(--lens-700); }

/* Memo viewer */
.pe-icm-tab .pe-memo__toc a { color: var(--ink-500); }
.pe-icm-tab .pe-memo__toc a.active { color: var(--ink-900); background: var(--paper-raised); }
.pe-icm-tab .pe-memo__body { color: var(--ink-700); }
.pe-icm-tab .pe-memo__body h1 { color: var(--ink-900); border-bottom-color: var(--lens-500); }
.pe-icm-tab .pe-memo-ntb-header { color: var(--ink-900); }
.pe-icm-tab .pe-memo__preamble { color: var(--ink-500); border-left-color: var(--lens-500); }
.pe-icm-tab .pe-cite { color: var(--lens-600); }

/* Evidence groups — teal → AA-safe lens-700; provocation/coverage → review. */
.pe-icm-tab .pe-evidence-ws { color: var(--lens-700); }
.pe-icm-tab .pe-evidence-item { color: var(--ink-700); }
.pe-icm-tab .pe-evidence-item .src { color: var(--ink-500); }
.pe-icm-tab .pe-provocation { color: var(--review); }
.pe-icm-tab .pe-coverage-note { color: var(--review); }

/* NTB right-rail panel */
.pe-icm-tab .pe-ntb-panel { border-left: 1px solid var(--rule); }
.pe-icm-tab .pe-ntb-panel__title { color: var(--ink-900); }
.pe-icm-tab .pe-ntb-panel__sub { color: var(--ink-500); }
.pe-icm-tab .pe-ntb-card { border: 1px solid var(--rule); background: var(--paper-raised); border-radius: var(--radius-pe-md); }
.pe-icm-tab .pe-ntb-card__q { color: var(--ink-900); }
.pe-icm-tab .pe-ws-chip { color: var(--ink-700); background: var(--paper); border: 1px solid var(--rule); }
.pe-icm-tab .pe-ntb-actions button { color: var(--ink-500); }
.pe-icm-tab .pe-ntb-actions button:hover { color: var(--lens-700); background: var(--lens-tint); border-color: var(--lens-400); }
.pe-icm-tab .pe-why-link { color: var(--lens-600); }
.pe-icm-tab .pe-why-link:hover { color: var(--lens-700); }
.pe-icm-tab .pe-ntb-proposed { border: 1px dashed var(--lens-500); background: var(--lens-tint); }
.pe-icm-tab .pe-ntb-retired-disclosure { color: var(--ink-500); }
.pe-icm-tab .pe-ntb-status--retired { background: var(--paper-sunken); color: var(--ink-500); }


/* ───── source: pe-tripane.css ───── */
/* ═══════════════════════════════════════════════════════════════════════
   PE Citation Tri-Pane — Phase 5 §A / §B (THE headline).

   The persistent three-region layout (answer / citation rail / source-in-
   context) that expands out of the §B.5 provenance slide-in. Rendered in the
   design system — editorial, light, whitespace — NOT a dense dark terminal grid
   (§A-12). Tokens ONLY (no hardcoded color / type / space / radius / motion).
   Warm register (--attention-*) is used for ONE thing: a rail source that is
   contradicted elsewhere (§A-8). Confidence is NEVER a number (§G).

   Prefixes: pe-tp- (the tri-pane) and pe-cite-marker (the inline claim marker).
   Loads AFTER _components.css so this composition wins; never redefines a token.

   Responsive (§A.5):
     ≥1440   three columns side by side
     1024–1440 compact rail (narrower middle column)
     <1024   collapse to answer + source; the rail becomes a toggled overlay
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The inline numbered claim marker (§B-1/§B-2) ──────────────────────── */
/* A quiet, superscript, accessible button — the entry to both depths of the
   provenance gesture. In the intelligence register (--intelligence-accent). */
.pe-cite-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  height: 1.15em;
  padding: 0 0.1em;
  margin: 0 0.06em;
  font-family: var(--font-sans-pe);
  font-size: 0.82em;
  line-height: 1;
  color: var(--intelligence-accent);
  background: none;
  border: none;
  border-radius: var(--radius-pe-sm);
  cursor: pointer;
  vertical-align: super;
  transition: color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out);
}
.pe-cite-marker:hover,
.pe-cite-marker.is-active {
  color: var(--lens-700);
  background: var(--intelligence-bg);
}
.pe-cite-marker:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* ── Panel shell ───────────────────────────────────────────────────────── */
/* Elevation §E2 (R3 "the signature interaction is a layout, not an overlay"):
   the tri-pane is a LAYOUT STATE of the workspace's main region, not a floating
   lightbox. No scrim, no position:fixed, no z-index:1400 — it fills its
   container in flow (the content column narrows and the rail + source appear as
   grid columns of the page). Closing simply hides it and the region returns. */
.pe-tp__scrim {
  /* retained for the JS toggle contract, but the evidence layout has NO scrim */
  display: none !important;
}

.pe-tp {
  display: none;
  min-height: 0;
}
.pe-tp[data-open="true"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* fill the content region it lives in (flex-column parent) */
  min-height: 0;
}

.pe-tp__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: var(--paper);
  overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.pe-tp__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-base) var(--space-lg);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
}
.pe-tp__eyebrow {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lens-600);
}
.pe-tp__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-tp__header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.pe-tp__rail-toggle {
  display: none; /* only appears on the small-screen collapse */
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
}
.pe-tp__close {
  color: var(--ink-300);
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  border-radius: var(--radius-pe-sm);
  font-size: var(--text-body-pe);
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-tp__close:hover { color: var(--ink-700); }
.pe-tp__close:focus-visible,
.pe-tp__rail-toggle:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

/* ── The three-region grid ─────────────────────────────────────────────── */
.pe-tp__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) minmax(0, 1.25fr);
}
.pe-tp__answer,
.pe-tp__rail,
.pe-tp__source {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg);
}
.pe-tp__answer { border-right: 1px solid var(--rule); }
.pe-tp__rail {
  border-right: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: var(--space-md);
}
.pe-tp__source { background: var(--paper); }

/* ── Left: the answer ──────────────────────────────────────────────────── */
.pe-tp-answer__prose {
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
}
.pe-tp-answer__prose p { margin: 0 0 var(--space-md); }
.pe-tp-answer__empty { color: var(--ink-500); font-style: italic; }

/* ── Middle: the citation rail ─────────────────────────────────────────── */
.pe-tp-rail__head {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  padding: 0 var(--space-xs) var(--space-sm);
}
.pe-tp-rail__head .pe-num { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; }

.pe-tp-rail__entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  padding: var(--space-sm) var(--space-sm);
  margin-bottom: var(--space-xs);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: var(--radius-pe-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out);
}
.pe-tp-rail__entry:hover,
.pe-tp-rail__entry.is-hover { background: var(--paper-raised); }
.pe-tp-rail__entry.is-active {
  border-left-color: var(--intelligence-accent);
  background: var(--intelligence-bg);
}
.pe-tp-rail__entry:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

.pe-tp-rail__num {
  flex-shrink: 0;
  font-size: var(--text-body-pe);
  color: var(--intelligence-accent);
  line-height: 1.2;
}
.pe-tp-rail__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-tp-rail__doc {
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}
.pe-tp-rail__loc {
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}
.pe-tp-rail__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-hair);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
}
.pe-tp-rail__empty {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  font-style: italic;
  padding: var(--space-md) var(--space-sm);
}

/* Provenance badge glyph colors — calm, non-numeric (§A-7 / §G). */
.pe-tp-badge--verified  { color: var(--verified); }
.pe-tp-badge--evidenced { color: var(--evidenced); }
.pe-tp-badge--review    { color: var(--review); }
.pe-tp-badge__glyph { font-size: 0.7em; }

/* Contradicted source (§A-8) — the ONE warm-register affordance here. */
.pe-tp-rail__warn {
  color: var(--attention-text);
  font-weight: var(--weight-semibold);
}

/* ── Right: source in context ──────────────────────────────────────────── */
.pe-tp-source__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.pe-tp-source__prev,
.pe-tp-source__next {
  font-size: var(--text-sm-pe);
  color: var(--lens-600);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pe-md);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out);
}
.pe-tp-source__prev:hover:not(:disabled),
.pe-tp-source__next:hover:not(:disabled) { background: var(--paper-raised); }
.pe-tp-source__prev:disabled,
.pe-tp-source__next:disabled { color: var(--ink-100); cursor: default; }
.pe-tp-source__prev:focus-visible,
.pe-tp-source__next:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }

.pe-tp-source__head { margin-bottom: var(--space-md); }
.pe-tp-source__doc {
  font-family: var(--font-serif);
  font-size: var(--text-h3, var(--text-body-pe));
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.pe-tp-source__loc { font-size: var(--text-sm-pe); color: var(--ink-500); }
.pe-tp-source__method {
  display: inline-flex;
  align-items: center;
  gap: var(--space-hair);
  margin-top: var(--space-xs);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
}

/* Cell / formula citation (§A-6). */
.pe-tp-source__cell {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
}
.pe-tp-source__cellref { font-size: var(--text-sm-pe); color: var(--ink-700); }
.pe-tp-source__cellref .pe-num { font-family: var(--font-mono-pe); font-weight: var(--weight-semibold); }
.pe-tp-source__formula { margin-top: var(--space-xs); font-size: var(--text-sm-pe); color: var(--ink-700); }
.pe-tp-source__formula-label {
  font-size: var(--text-xs-pe);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  margin-right: var(--space-xs);
}
.pe-tp-source__formula code {
  font-family: var(--font-mono-pe);
  background: var(--paper);
  padding: 1px var(--space-xs);
  border-radius: var(--radius-pe-sm);
}

/* The rendered source frame + highlighted passage. */
.pe-tp-source__frame {
  padding: var(--space-lg);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
}
.pe-tp-source__context,
.pe-tp-source__around {
  margin: 0;
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.pe-tp-source__around { margin-top: var(--space-sm); color: var(--ink-500); }

/* The payoff — the cited passage, highlighted (§A-3, fades in last §J-3). */
.pe-tp-highlight {
  background: var(--lens-tint, rgba(20, 184, 166, 0.16));
  color: var(--ink-900);
  box-shadow: inset 0 -0.5em 0 var(--lens-tint, rgba(20, 184, 166, 0.16));
  border-radius: var(--radius-pe-sm);
  padding: 0 0.1em;
  animation: pe-tp-highlight-in var(--motion-base) var(--ease-in-out);
}
@keyframes pe-tp-highlight-in {
  from { background: transparent; box-shadow: none; }
}

/* ── Slide-over stacking ───────────────────────────────────────────────────
   A right-hand panel has to sit above the sticky top nav. The panels carried a
   utility z-40 while the nav is z-50, so the nav (and the deal header) painted
   over the panel and its scrim: the panel looked like it opened BEHIND the
   chrome, with nav controls still clickable on top of it. */
.pe-slideover { z-index: var(--z-slideover); }

/* ── The cited FIGURE, in its own row ──────────────────────────────────────
   A figure traced to a table cell is shown inside the document's table with the
   cell marked, instead of a section breadcrumb quoted as "the cited passage".
   The row and column are tinted so the reader can see what was read, and the
   cell itself carries the same highlight as a cited passage. */
.pe-tp-source__citedcell {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-900);
}
.pe-tp-source__tablewrap { overflow-x: auto; }
.pe-tp-source__table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm-pe);
}
.pe-tp-source__table th,
.pe-tp-source__table td {
  border: 1px solid var(--rule);
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  color: var(--ink-700);
}
.pe-tp-source__table th { background: var(--paper-raised); font-weight: var(--weight-semibold); color: var(--ink-900); }
.pe-tp-source__table td:not(:first-child),
.pe-tp-source__table th:not(:first-child) {
  text-align: right;
  font-family: var(--font-mono-pe);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pe-tp-source__table .is-cited-col { background: var(--paper-sunken); }
.pe-tp-source__table .is-cited-row > td { background: var(--paper-sunken); color: var(--ink-900); }
.pe-tp-source__table .is-cited-cell { font-weight: var(--weight-semibold); }

/* Whether the cell was matched back to the figure. The unverified wording is a
   real caveat, so it reads in the same quiet register as a degrade notice — it
   must never look like a confirmation. */
.pe-tp-source__verified,
.pe-tp-source__unverified {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}
.pe-tp-source__unverified { font-style: italic; }

.pe-tp-source__caption,
.pe-tp-source__degrade {
  margin-top: var(--space-sm);
  font-size: var(--text-xs-pe);
  color: var(--ink-500);
}
/* Degrade notice (§I-3) — quiet, never an error register. */
.pe-tp-source__degrade { font-style: italic; }
.pe-tp-source__empty,
.pe-tp-source__loading {
  font-size: var(--text-sm-pe);
  color: var(--ink-500);
  font-style: italic;
}

/* ── Responsive (§A.5) ─────────────────────────────────────────────────── */
/* 1024–1440 — compact rail (narrower middle column). */
@media (max-width: 1439px) {
  .pe-tp__grid { grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.7fr) minmax(0, 1.2fr); }
  .pe-tp-rail__doc { font-size: var(--text-xs-pe); }
}

/* <1024 — collapse to answer + source; the rail becomes a toggled overlay. */
@media (max-width: 1023px) {
  .pe-tp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .pe-tp__rail-toggle { display: inline-flex; }
  .pe-tp__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(360px, 80vw);
    z-index: 2;
    transform: translateX(-102%);
    box-shadow: var(--elev-2, 0 8px 24px rgba(15, 24, 41, 0.16));
    transition: transform var(--motion-base) var(--ease-in-out);
  }
  .pe-tp--rail-open .pe-tp__rail { transform: translateX(0); }
}

/* Reduced motion (§J-5) — kill the fade; the highlight still shows. */
@media (prefers-reduced-motion: reduce) {
  .pe-tp-highlight { animation: none; }
  .pe-tp__scrim,
  .pe-tp__rail,
  .pe-cite-marker,
  .pe-tp-rail__entry { transition: none; }
}

/* ── The chat "expand ▸ see every source" affordance (§A.4 / §B.4) ─────── */
.pe-chat-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.pe-chat-expand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--intelligence-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-in-out);
}
.pe-chat-expand:hover { color: var(--lens-700); }
.pe-chat-expand:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
.pe-chat-expand .pe-num { font-family: var(--font-mono-pe); font-variant-numeric: tabular-nums; }


/* ───── pe-thesis-pulse — one NTB-status vocabulary (index → drill-down) ─────
   Color law: Confirmed teal (lens); Challenged + Forming are NEUTRAL ink and
   NEVER warm — warm (--flag) is reserved for the ⚠ attention mark and the
   Owned ▲ off-track tracker. One component, two variants (compact · labeled). */
.pe-pulse {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  text-decoration: none; cursor: pointer; line-height: 1;
  font-size: var(--text-sm-pe); color: var(--ink-500);
}
.pe-pulse:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }
.pe-pulse__glyphs { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.pe-pulse__glyph { line-height: 1; font-size: var(--text-sm-pe); }
.pe-pulse__glyph:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; border-radius: 2px; }
.pe-pulse__glyph--confirmed { color: var(--lens-600); }   /* ● teal — evidence supports it */
.pe-pulse__glyph--challenged { color: var(--ink-500); }   /* ◐ neutral — open work, NOT danger */
.pe-pulse__glyph--forming { color: var(--ink-300); }      /* ○ neutral — not enough evidence */
.pe-pulse__glyph--retired { color: var(--ink-300); }      /* ⊘ neutral — set aside */
.pe-pulse__label { color: var(--ink-500); font-size: var(--text-sm-pe); }
.pe-pulse__more { color: var(--ink-300); font-size: var(--text-xs-pe); }

/* Labeled variant — the deal-workspace summary row + Thesis page header. */
.pe-pulse--labeled { gap: var(--space-lg); flex-wrap: wrap; }
.pe-pulse--labeled .pe-pulse__count-total { color: var(--ink-900); font-weight: var(--weight-semibold); font-size: var(--text-body-pe); }
.pe-pulse--labeled .pe-pulse__stat { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--ink-700); }
.pe-pulse--labeled .pe-pulse__stat--retired { color: var(--ink-500); }

/* ───── Command Center attention deep-link (?focus=) highlight ─────
   The landing routes an at-risk item here; the target card pulses once with a
   lens ring (calm, never warm). Reduced-motion shows a static ring, no pulse. */
.pe-ov-aq__item--focus {
  box-shadow: 0 0 0 2px var(--lens-400), var(--elev-1);
  border-radius: var(--radius-pe-md);
  animation: peAqFocusPulse 2.4s var(--ease-out) 1;
}
@keyframes peAqFocusPulse {
  0%   { box-shadow: 0 0 0 2px var(--lens-500), 0 0 0 6px var(--lens-100); }
  60%  { box-shadow: 0 0 0 2px var(--lens-400), 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 2px var(--lens-400), var(--elev-1); }
}
@media (prefers-reduced-motion: reduce) {
  .pe-ov-aq__item--focus { animation: none; }
}

/* ───── pe-states — per-destination empty / loading / error (§E map, I-9) ─────
   Calm, self-labeled; loading is skeletons + progressive reveal (never a bare
   spinner); error names it + the next action (no apology, no warm register). */
.pe-state { padding: var(--space-2xl) var(--space-xl); max-width: 560px; }
.pe-state__title { margin: 0 0 var(--space-xs) 0; font-family: var(--font-serif); font-size: var(--text-h3, var(--text-body-pe)); font-weight: var(--weight-semibold); color: var(--ink-900); }
.pe-state__body { margin: 0; color: var(--ink-500); font-size: var(--text-body-pe); line-height: var(--lh-body); }
.pe-state__action { margin-top: var(--space-md); }

/* Loading — skeleton rows, progressively revealed (pulse; reduced-motion off). */
.pe-state--loading .pe-state__loading-label {
  display: block; color: var(--ink-300); font-size: var(--text-sm-pe); margin-bottom: var(--space-md);
}
.pe-state__skeleton { display: flex; flex-direction: column; gap: var(--space-sm); }
.pe-state__skel-row { height: 12px; }
.pe-state__skel-bar {
  display: block; height: 100%; border-radius: var(--radius-pe-sm);
  background: var(--rule);
  animation: peStateShimmer 1.4s var(--ease-in-out) infinite;
}
.pe-state__skel-row:nth-child(2) .pe-state__skel-bar { animation-delay: 0.18s; }
.pe-state__skel-row:nth-child(3) .pe-state__skel-bar { animation-delay: 0.36s; }
@keyframes peStateShimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pe-state__skel-bar { animation: none; opacity: 0.7; }
}

/* ── I-9 load-error banner (§E map / §W voice) ───────────────────────────────
   Named error + retry route for a destination whose primary loader failed.
   Design-token only; lives in the component layer (no surface writes CSS). */
.pe-load-error {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--danger-200, var(--rule));
  border-left: 3px solid var(--danger-500, var(--ink-500));
  border-radius: var(--radius-pe-sm);
  background: var(--danger-50, var(--surface-raised, #fff));
  color: var(--ink-700, var(--ink-900));
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
}
.pe-load-error__icon { color: var(--danger-500, var(--ink-500)); font-size: var(--text-body-pe); flex: 0 0 auto; }
.pe-load-error__msg { flex: 1 1 auto; }
.pe-load-error__retry { flex: 0 0 auto; }

/* ── A3 Owned "thesis monitor" Command Center variant ────────────────────────
   NTB trackers (underwrote / actual / kill line), scorecard, 100-day plan.
   Design-token only; component layer (no surface writes CSS). */
.pe-owned { padding: var(--space-lg); }
.pe-owned__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.pe-owned__eyebrow { font-size: var(--text-sm-pe); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-300); }
.pe-owned__title { font-family: var(--font-serif); font-size: var(--text-h2, var(--text-xl-pe)); font-weight: var(--weight-semibold); color: var(--ink-900); margin: var(--space-2xs) 0 0; }
.pe-owned__scorecard { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.pe-owned__score { font-size: var(--text-sm-pe); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pe-pill, 999px); border: 1px solid var(--rule); color: var(--ink-700); }
.pe-owned__score--on_track { background: var(--success-50, #f0fdf4); border-color: var(--success-200, #bbf7d0); color: var(--success-700, #15803d); }
.pe-owned__score--watch { background: var(--warning-50, #fffbeb); border-color: var(--warning-200, #fde68a); color: var(--warning-700, #b45309); }
.pe-owned__score--breached { background: var(--danger-50, #fef2f2); border-color: var(--danger-200, #fecaca); color: var(--danger-700, #b91c1c); }
.pe-owned__score--no_data { background: var(--surface-sunken, #f8fafc); }

.pe-owned__trackers { display: flex; flex-direction: column; gap: var(--space-sm); }
.pe-owned__tracker { border: 1px solid var(--rule); border-left: 3px solid var(--ink-200); border-radius: var(--radius-pe-sm); padding: var(--space-md); background: var(--surface-raised, #fff); }
.pe-owned__tracker--on_track { border-left-color: var(--success-500, #22c55e); }
.pe-owned__tracker--watch { border-left-color: var(--warning-500, #f59e0b); }
.pe-owned__tracker--breached { border-left-color: var(--danger-500, #ef4444); }
.pe-owned__tracker--no_data { border-left-color: var(--ink-200); }
.pe-owned__tracker-head { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm); flex-wrap: wrap; }
.pe-owned__status { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm-pe); font-weight: var(--weight-medium); white-space: nowrap; }
.pe-owned__glyph { font-size: 0.9em; }
.pe-owned__tracker--on_track .pe-owned__status { color: var(--success-700, #15803d); }
.pe-owned__tracker--watch .pe-owned__status { color: var(--warning-700, #b45309); }
.pe-owned__tracker--breached .pe-owned__status { color: var(--danger-700, #b91c1c); }
.pe-owned__tracker--no_data .pe-owned__status { color: var(--ink-300); }
.pe-owned__tracker-text { font-size: var(--text-body-pe); color: var(--ink-900); }
.pe-owned__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm); }
.pe-owned__row { display: flex; flex-direction: column; gap: 2px; }
.pe-owned__row-label { font-size: var(--text-sm-pe); color: var(--ink-300); }
.pe-owned__row-value { font-size: var(--text-body-pe); font-weight: var(--weight-medium); color: var(--ink-900); }
.pe-owned__row--kill .pe-owned__row-value { color: var(--ink-700); }
.pe-owned__row-basis { font-size: var(--text-sm-pe); color: var(--ink-300); font-style: italic; }
.pe-owned__empty { padding: var(--space-lg); color: var(--ink-500); font-size: var(--text-body-pe); text-align: center; }

.pe-owned__plan { margin-top: var(--space-lg); }
.pe-owned__plan-title { font-size: var(--text-body-pe); font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0 0 var(--space-sm); }
.pe-owned__plan-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--rule); }
.pe-owned__plan-status { font-size: var(--text-sm-pe); min-width: 92px; color: var(--ink-500); }
.pe-owned__plan-item--complete .pe-owned__plan-status { color: var(--success-700, #15803d); }
.pe-owned__plan-item--blocked .pe-owned__plan-status { color: var(--danger-700, #b91c1c); }
.pe-owned__plan-item--in_progress .pe-owned__plan-status { color: var(--info-700, #1d4ed8); }
.pe-owned__plan-name { flex: 1 1 auto; font-size: var(--text-body-pe); color: var(--ink-900); }
.pe-owned__plan-meta { font-size: var(--text-sm-pe); color: var(--ink-300); }

/* I-8 — NTB right-rail inline composer (replaces window.prompt). */
.pe-ntb-add { margin: var(--space-sm) 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.pe-ntb-add .pe-ntb-actions { display: flex; gap: var(--space-xs); }

/* ════════════════════════════════════════════════════════════════════════
   E1 — workspace.html inline <style> relocated here (0 inline <style> target).
   `*`/`body` are scoped to body[data-pe-surface="workspace"] so they don't leak
   to other PE surfaces; [x-cloak] is already defined above; the rest are
   workspace-only class names (verified unused on other PE pages). Verbatim.
   ════════════════════════════════════════════════════════════════════════ */
/* Surface font: declared ONCE on the body and inherited.
   It used to be `body[data-pe-surface="workspace"] * { font-family: 'Inter',
   sans-serif !important; }`. A wildcard with !important beats any component
   rule regardless of specificity, so on the workspace/chat surface it silently
   defeated the whole type system: `--font-serif` headings rendered as Inter and
   every mono figure (.pe-figure, .pe-num, --font-mono-pe) fell back to Inter —
   while the SAME figures rendered IBM Plex Mono on Sources/Metrics. That is the
   font inconsistency. Declaring the family on the body lets it inherit normally
   and lets components state their own intent. */
body[data-pe-surface="workspace"] { font-family: var(--font-sans-pe); background: var(--paper-raised); }
.pe-gradient { background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%); }
.sidebar-item {
  padding: var(--space-sm) var(--space-base); border-radius: var(--radius-pe-lg); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out), color var(--motion-fast) var(--ease-in-out);
  font-size: var(--text-xs-pe); display: flex; align-items: center; gap: var(--space-sm); color: var(--ink-300);
}
.sidebar-item:hover { background: var(--paper-sunken); color: var(--ink-900); }
.sidebar-item.active { background: var(--lens-500); color: var(--paper); font-weight: var(--weight-semibold); }
/* ── Chat bubbles — on the design system (tokens only) ───────────────────
   These were the last off-system block in the chat: raw hex (#0d9488, #e2e8f0,
   #1e293b, #f1f5f9 …), ad-hoc rem/em sizes outside the type scale, and
   `font-family: monospace` for code. The chat now speaks the same type, ink,
   rule and accent language as every other PE surface. The teal, paper and
   ink values map 1:1 onto their tokens (lens-500 IS #0d9488), so the accent
   reads identically — the greys move onto the ink/paper/rule ramp. */
.chat-bubble-user {
  background: var(--lens-500); color: var(--paper);
  border-radius: var(--radius-pe-lg) var(--radius-pe-lg) var(--radius-pe-sm) var(--radius-pe-lg);
  font-size: var(--text-sm-pe); line-height: var(--lh-sm);
}
.chat-bubble-ai {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg) var(--radius-pe-lg) var(--radius-pe-lg) var(--radius-pe-sm);
  font-size: var(--text-sm-pe); line-height: var(--lh-body); color: var(--ink-700);
}
/* Markdown headings inside an answer follow the PE heading register: serif for
   the two major levels (as .pe-card__header / .pe-sources__title do), sans for
   the minor one. */
/* The answer-prose type scale below is mounted on TWO surfaces: the chat bubble
   and .pe-chat-prose (the same rendered answer in the tri-pane's left region).
   One system, two mounts — never two vocabularies for the same prose. */
.chat-bubble-ai h1, .chat-bubble-ai h2, .chat-bubble-ai h3,
.pe-chat-prose h1, .pe-chat-prose h2, .pe-chat-prose h3 {
  font-weight: var(--weight-semibold); margin: var(--space-md) 0 var(--space-xs); color: var(--ink-900);
}
.chat-bubble-ai h1, .pe-chat-prose h1 { font-family: var(--font-serif); font-size: var(--text-h2); line-height: var(--lh-h2); }
.chat-bubble-ai h2, .pe-chat-prose h2 { font-family: var(--font-serif); font-size: var(--text-h3); line-height: var(--lh-h3); }
.chat-bubble-ai h3, .pe-chat-prose h3 { font-family: var(--font-sans-pe); font-size: var(--text-body-pe); line-height: var(--lh-body); }
/* h4 — the lead-in under a section label. Quieter than h3, never another size
   step up: a chat answer carries a shallow hierarchy by design. */
.chat-bubble-ai h4, .pe-chat-prose h4 {
  font-family: var(--font-sans-pe); font-size: var(--text-sm-pe); line-height: var(--lh-sm);
  font-weight: var(--weight-semibold); margin: var(--space-sm) 0 var(--space-hair); color: var(--ink-900);
}
.chat-bubble-ai p, .pe-chat-prose p { margin: var(--space-xs) 0; line-height: var(--lh-body); }
.chat-bubble-ai strong, .chat-bubble-ai b,
.pe-chat-prose strong, .pe-chat-prose b { font-weight: var(--weight-semibold); color: var(--ink-900); }
.chat-bubble-ai em, .pe-chat-prose em { font-style: italic; }
.chat-bubble-ai ul, .chat-bubble-ai ol,
.pe-chat-prose ul, .pe-chat-prose ol { margin: var(--space-sm) 0; padding-left: var(--space-lg); }
.chat-bubble-ai li, .pe-chat-prose li { margin: var(--space-xs) 0; line-height: var(--lh-sm); }
.chat-bubble-ai ul li, .pe-chat-prose ul li { list-style-type: disc; }
.chat-bubble-ai ol li, .pe-chat-prose ol li { list-style-type: decimal; }
.chat-bubble-ai blockquote, .pe-chat-prose blockquote {
  border-left: 3px solid var(--lens-500); padding-left: var(--space-md);
  margin: var(--space-sm) 0; color: var(--ink-500); font-style: italic;
}
.chat-bubble-ai code, .pe-chat-prose code {
  background: var(--paper-sunken); padding: 1px var(--space-xs); border-radius: var(--radius-pe-sm);
  font-size: var(--text-xs-pe); font-family: var(--font-mono-pe);
}
.chat-bubble-ai pre, .pe-chat-prose pre {
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-pe-md);
  padding: var(--space-sm); margin: var(--space-sm) 0; overflow-x: auto;
}
/* Tables in an answer follow the .pe-table conventions: editorial square
   corners, raised header, and MONO TABULAR figures — a number in the chat must
   line up and read like a number everywhere else in the product. */
.chat-bubble-ai table, .pe-chat-prose table {
  border-collapse: collapse; width: 100%; margin: var(--space-sm) 0;
  font-size: var(--text-sm-pe); border-radius: var(--radius-pe-none);
}
.chat-bubble-ai th, .chat-bubble-ai td,
.pe-chat-prose th, .pe-chat-prose td {
  border: 1px solid var(--rule); padding: var(--space-xs) var(--space-sm); text-align: left;
}
.chat-bubble-ai th, .pe-chat-prose th {
  background: var(--paper-raised); font-weight: var(--weight-semibold); color: var(--ink-900);
}
.chat-bubble-ai td:not(:first-child), .pe-chat-prose td:not(:first-child) {
  text-align: right;
  font-family: var(--font-mono-pe);
  font-size: var(--text-data-sm);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.chat-bubble-ai a, .pe-chat-prose a { color: var(--lens-600); text-decoration: underline; }
.workstream-pill {
  font-size: var(--text-xs-pe); padding: var(--space-hair) var(--space-sm); border-radius: 20px;
  font-weight: var(--weight-semibold); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out), color var(--motion-fast) var(--ease-in-out);
}
.workstream-pill.active { background: var(--lens-500); color: var(--paper); }
.workstream-pill:not(.active) { background: var(--paper-sunken); color: var(--ink-300); }
.tag-pill { font-size: 10px; padding: 1px 8px; border-radius: 12px; font-weight: 600; }
.tag-red_flag { background: #fee2e2; color: #dc2626; }
.pe-ws-card { box-shadow: 0 1px 2px 0 rgba(11, 24, 41, 0.04); cursor: default; }
.pe-ws-card:hover { box-shadow: 0 4px 6px -1px rgba(11, 24, 41, 0.1), 0 2px 4px -2px rgba(11, 24, 41, 0.06); border-color: #5B9DC4; transform: translateY(-1px); }
.pe-ws-card__icon { background: #EBF5FA; color: #1B4D6E; }
.pe-ws-card--complete .pe-ws-card__icon { background: #ECFDF5; color: #059669; }
.pe-ws-card--blocked { border-color: #FECACA; }
.pe-ws-card--blocked .pe-ws-card__icon { background: #FEF2F2; color: #DC2626; }
.pe-ws-card--not-started { opacity: 0.75; }
.pe-ws-card--not-started .pe-ws-card__icon { background: #F1F5F9; color: #64748B; }
.pe-ws-card .tabular-nums,
.pe-ws-card [class*='text-lg'] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag-key_finding { background: #dbeafe; color: #2563eb; }
.tag-open_question { background: #fef3c7; color: #d97706; }
.tag-action_item { background: #d1fae5; color: #059669; }
.artifact-card { transition: all 0.2s; }
.artifact-card.recommended { border-color: #0d9488; box-shadow: 0 0 0 1px #0d9488, 0 2px 8px rgba(13,148,136,0.12); }
.artifact-card.dimmed { opacity: 0.5; }
.artifact-card.dimmed:hover { opacity: 0.85; }
.phase-badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.context-panel { transition: width 0.2s ease, opacity 0.2s ease; }
.fit-pass { color: #059669; }
.fit-fail { color: #dc2626; }
.fit-unknown { color: #d97706; }
.guidance-card { background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%); border: 1px solid #99f6e4; }
.pe-scratchpad-content { line-height: 1.65; }
.pe-scratchpad-content h1, .pe-scratchpad-content h2, .pe-scratchpad-content h3 { font-weight: 700; color: #1e293b; margin: 10px 0 4px; }
.pe-scratchpad-content h1 { font-size: 1rem; }
.pe-scratchpad-content h2 { font-size: 0.95rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 3px; margin-top: 14px; }
.pe-scratchpad-content h3 { font-size: 0.875rem; color: #334155; }
.pe-scratchpad-content h1:first-child, .pe-scratchpad-content h2:first-child { margin-top: 0; }
.pe-scratchpad-content p { margin: 4px 0; }
.pe-scratchpad-content strong { font-weight: 600; color: #0f172a; }
.pe-scratchpad-content ul, .pe-scratchpad-content ol { margin: 4px 0; padding-left: 18px; }
.pe-scratchpad-content li { margin: 2px 0; line-height: 1.5; }
.pe-scratchpad-content ul li { list-style-type: disc; }
.pe-scratchpad-content ol li { list-style-type: decimal; }
.pe-scratchpad-content blockquote { border-left: 3px solid #0d9488; padding-left: 10px; margin: 6px 0; color: #475569; font-style: italic; }
.pe-scratchpad-content code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 0.85em; }
.pe-scratchpad-content table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 0.8rem; }
.pe-scratchpad-content th, .pe-scratchpad-content td { border: 1px solid #e2e8f0; padding: 4px 8px; text-align: left; }
.pe-scratchpad-content th { background: #f8fafc; font-weight: 600; }
.pe-scratchpad-content hr { border: none; border-top: 1px solid #e2e8f0; margin: 10px 0; }

/* ── E2 (R3) — evidence layout: the tri-pane fills the content region ────────
   When the tri-pane opens, the content region hides its destination panels and
   the tri-pane host fills the column in flow (no overlay). Closing restores. */
.pe-tp-host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 60vh; }
.pe-content-region[data-tripane-open="true"] { display: flex; flex-direction: column; }
.pe-content-region[data-tripane-open="true"] > *:not(.pe-tp-host) { display: none !important; }


/* ══════════════════ pe-surfaces.css ══════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   pe-surfaces.css — Design Elevation §E1

   The single home for the truly surface-unique CSS that used to live in each
   standalone PE page's inline <style> block. E1 goal: zero page-local CSS. Rules
   that are page-specific are scoped under `body[data-pe-surface="…"]` so moving
   them into one shared file cannot collide across pages; genuinely global app
   primitives ([x-cloak], .pe-gradient) are defined once. Tokens only.

   As surfaces are reworked (E1-W3), anything that turns out to be a reusable
   component graduates into _components.css; this file keeps shrinking.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global app primitives (identical across the standalone PE pages) ────── */
[x-cloak] { display: none !important; }
.pe-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); }

/* ── mind.html ──────────────────────────────────────────────────────────── */
body[data-pe-surface="mind"] { background: var(--paper); margin: 0; }

/* ── sources.html — the deal-scoped provenance index top bar ────────────── */
body[data-pe-surface="sources"] {
  margin: 0; background: var(--paper); color: var(--ink-900); font-family: var(--font-sans-pe);
}
.pe-sources-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.pe-sources-topbar__back { font-size: var(--text-sm-pe); color: var(--ink-300); text-decoration: none; }
.pe-sources-topbar__back:hover { color: var(--lens-600); }
.pe-sources-topbar__sep { color: var(--rule-strong); }
.pe-sources-topbar__crumb { font-size: var(--text-sm-pe); color: var(--ink-700); font-weight: var(--weight-medium); }

/* ── fund-dna.html — restrained title-block top bar (§E.2) ──────────────── */
body[data-pe-surface="fund-dna"] { background: var(--paper); margin: 0; font-family: var(--font-sans-pe); }
.pe-dna-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-base);
  padding: var(--space-md) var(--space-lg);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.pe-dna-topbar__left { display: flex; align-items: center; gap: var(--space-md); }
.pe-dna-topbar__back { font-size: var(--text-sm-pe); color: var(--ink-300); text-decoration: none; }
.pe-dna-topbar__back:hover { color: var(--lens-600); }
.pe-dna-topbar__crumb { font-size: var(--text-sm-pe); color: var(--ink-700); font-weight: var(--weight-medium); }
.pe-dna-topbar__sep { color: var(--rule-strong); }
.pe-dna-topbar__right { display: flex; align-items: center; gap: var(--space-md); }
.pe-dna-topbar__saving { font-size: var(--text-xs-pe); color: var(--ink-300); }

/* ── thesis.html — thesis-as-belief pillars (parity with equity §4.4) ─────
   Moved verbatim from the page's inline block (hardcoded hex preserved for
   now; tokenizing is a later E1 pass). Every rule is scoped under
   body[data-pe-surface="thesis"] so the generic names (.card, .status-badge,
   the global *) cannot leak to other pages; the fadeIn keyframes is renamed
   page-unique for the same reason. */
/* Same fix as the workspace surface: declare the family once on the body and
   let it inherit. The previous `* { … !important }` overrode every component's
   font intent (serif headings, mono figures) on this surface. */
body[data-pe-surface="thesis"] { background: var(--paper-raised); font-family: var(--font-sans-pe); }
body[data-pe-surface="thesis"] .card { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
body[data-pe-surface="thesis"] .status-badge { padding: 2px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
body[data-pe-surface="thesis"] .status-confirmed { background: #d1fae5; color: #065f46; }
body[data-pe-surface="thesis"] .status-challenged { background: #fef3c7; color: #92400e; }
body[data-pe-surface="thesis"] .status-unresolved { background: #f3f4f6; color: #6b7280; }
body[data-pe-surface="thesis"] .status-stopped_out { background: #fee2e2; color: #991b1b; }
@keyframes peThesisFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
body[data-pe-surface="thesis"] .fade-in { animation: peThesisFadeIn 0.3s ease-out; }
/* §F / I-10 — reduced-motion: the entrance animation degrades to instant. */
@media (prefers-reduced-motion: reduce) {
  body[data-pe-surface="thesis"] .fade-in { animation: none; }
}
body[data-pe-surface="thesis"] .belief-card { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; border-left: 3px solid #0d9488; }
body[data-pe-surface="thesis"] .belief-field-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
body[data-pe-surface="thesis"] .belief-field textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; font-size: 14px; line-height: 1.5; resize: vertical; }
body[data-pe-surface="thesis"] .belief-field textarea:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
body[data-pe-surface="thesis"] .conviction-dots { display: inline-flex; gap: 4px; align-items: center; }
body[data-pe-surface="thesis"] .conviction-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #0d9488; cursor: pointer; transition: all 0.12s; }
body[data-pe-surface="thesis"] .conviction-dot.filled { background: #0d9488; }
body[data-pe-surface="thesis"] .conviction-dot:hover { transform: scale(1.15); }
body[data-pe-surface="thesis"] .state-of-thesis { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 10px 12px; }
body[data-pe-surface="thesis"] .conviction-model-toggle label { cursor: pointer; padding: 4px 12px; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; border: 1px solid #e5e7eb; }
body[data-pe-surface="thesis"] .conviction-model-toggle input:checked + label { border-color: #0d9488; background: #f0fdfa; color: #0d9488; font-weight: 600; }
body[data-pe-surface="thesis"] .conviction-model-toggle input { display: none; }
body[data-pe-surface="thesis"] .pillar-prov { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
body[data-pe-surface="thesis"] .derived-prior { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* ── index.html — the firm-level landing (masthead · attention band ·
   pipeline-by-stage · forming empty state · new-deal composer). Token-based
   with page-unique .firm-* names, so moved verbatim; only body is scoped. */
body[data-pe-surface="index"] { background: var(--paper); margin: 0; }
.firm { max-width: 1180px; margin: 0 auto; padding: var(--space-2xl) var(--space-xl); }
.firm-masthead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-lg); margin-bottom: var(--space-2xl);
}
.firm-masthead__name {
  font-family: var(--font-serif);
  font-size: var(--text-display); line-height: var(--lh-display);
  font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0;
}
.firm-masthead__summary {
  margin-top: var(--space-xs); color: var(--ink-300);
  font-size: var(--text-sm-pe); line-height: var(--lh-sm);
}
.firm-band { margin-bottom: var(--space-2xl); }
.firm-band__head {
  font-family: var(--font-serif); font-size: var(--text-h2); line-height: var(--lh-h2);
  font-weight: var(--weight-semibold); color: var(--ink-900);
  margin: 0 0 var(--space-md) 0;
}
.firm-attn-list { display: flex; flex-direction: column; gap: var(--space-hair); }
.firm-attn {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-md) var(--space-base);
  border: 1px solid var(--flag-300); background: var(--flag-100);
  border-radius: var(--radius-pe-md); text-decoration: none;
  transition: box-shadow var(--motion-fast) var(--ease-in-out);
}
.firm-attn:hover { box-shadow: var(--elev-1); }
.firm-attn:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
.firm-attn__warn { color: var(--flag-500); font-size: var(--text-body-pe); line-height: 1; flex: 0 0 auto; }
.firm-attn__deal { color: var(--flag-700); font-weight: var(--weight-semibold); font-size: var(--text-body-pe); }
.firm-attn__issue { color: var(--ink-700); font-size: var(--text-body-pe); }
.firm-attn__stage { color: var(--ink-300); font-size: var(--text-sm-pe); margin-left: auto; white-space: nowrap; }
.firm-quiet {
  padding: var(--space-lg) var(--space-base);
  color: var(--ink-500); font-size: var(--text-body-pe); line-height: var(--lh-body);
}
.firm-quiet::before {
  content: '\25CF'; color: var(--verified); margin-right: var(--space-sm);
  font-size: 0.7em; position: relative; top: -1px;
}
/* ── Your book (Evaluating / Owned) — replaces the phase columns (L-1..L-3) ── */
/* ── Landing v2 — one list of deal cards, attention merged inline ── */
.firm-book { display: flex; flex-direction: column; gap: var(--space-2xl); }
.firm-group { display: flex; flex-direction: column; }
.firm-group__label {
  font-size: var(--text-xs-pe); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500); margin: 0 0 var(--space-md) 0;
}
.firm-list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Deal card — navigates (pointer: whole card; keyboard: the name link). */
.firm-deal {
  position: relative; cursor: pointer;
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md); padding: var(--space-base);
  transition: box-shadow var(--motion-base) var(--ease-out),
              border-color var(--motion-fast) var(--ease-in-out),
              transform var(--motion-fast) var(--ease-out);
}
.firm-deal:hover { box-shadow: var(--elev-1); border-color: var(--rule-strong); transform: translateY(-1px); }
/* Warm mark #1 (of exactly two on a flagged card): the --attention left border. */
.firm-deal--attention { box-shadow: inset 3px 0 0 0 var(--flag-500); }
.firm-deal--attention:hover { box-shadow: inset 3px 0 0 0 var(--flag-500), var(--elev-1); }

.firm-deal__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.firm-deal__name {
  color: var(--ink-900); font-size: var(--text-body-pe); font-weight: var(--weight-medium);
  text-decoration: none;
}
.firm-deal__name:hover { color: var(--lens-700); }
.firm-deal__name:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; border-radius: var(--radius-pe-sm); }
/* Quiet stage metadata ({stage} · committee {date}), right-aligned. */
.firm-deal__stage { color: var(--ink-300); font-size: var(--text-sm-pe); white-space: nowrap; flex: 0 0 auto; }

/* Thesis line — text only, never glyphs. */
.firm-deal__thesis {
  margin: var(--space-xs) 0 0 0;
  color: var(--ink-700); font-size: var(--text-sm-pe); line-height: var(--lh-sm);
}
/* Optional micro progress bar (confirmed/total) — lens on rule, never warm. */
.firm-deal__bar { margin-top: var(--space-xs); height: 2px; background: var(--rule); border-radius: 1px; overflow: hidden; }
.firm-deal__bar-fill { display: block; height: 100%; background: var(--lens-600); }

/* Inline attention rows — ⚠ (warm mark #2) · finding · Review. */
.firm-deal__attn { display: flex; flex-direction: column; gap: var(--space-hair); margin-top: var(--space-sm); }
.firm-attn-row {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pe-sm);
  text-decoration: none; transition: background var(--motion-fast) var(--ease-in-out);
}
.firm-attn-row:hover { background: var(--attention-bg); }
.firm-attn-row:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; }
.firm-attn-row__warn { color: var(--flag-500); font-size: var(--text-sm-pe); line-height: 1; flex: 0 0 auto; }
.firm-attn-row__text {
  color: var(--ink-700); font-size: var(--text-sm-pe); line-height: var(--lh-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto;
}
.firm-attn-row__cta { color: var(--lens-600); font-size: var(--text-sm-pe); font-weight: var(--weight-medium); flex: 0 0 auto; }
.firm-attn-more {
  margin-top: var(--space-hair); padding: var(--space-xs) var(--space-sm);
  color: var(--lens-600); font-size: var(--text-sm-pe); font-weight: var(--weight-medium); text-decoration: none;
}
.firm-attn-more:hover { text-decoration: underline; }

/* Firm-level Mind line — quiet, one line beneath the deals. */
.firm-mind-line {
  margin: var(--space-lg) 0 0 0;
  color: var(--ink-500); font-size: var(--text-sm-pe); line-height: var(--lh-sm);
}
.firm-mind-line .firm-mind-diamond { color: var(--lens-600); font-weight: var(--weight-semibold); }
.firm-mind-line .firm-mind-link { color: var(--lens-600); text-decoration: none; font-weight: var(--weight-medium); }
.firm-mind-line .firm-mind-link:hover { text-decoration: underline; }
.firm-mind-line .firm-mind-link:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 2px; }
.firm-forming {
  text-align: center; max-width: 640px; margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
}
.firm-forming__title {
  font-family: var(--font-serif); font-size: var(--text-h1); line-height: var(--lh-h1);
  font-weight: var(--weight-semibold); color: var(--ink-900);
  margin: 0 0 var(--space-lg) 0;
}
.firm-forming__invite {
  color: var(--ink-700); font-size: var(--text-body-pe); line-height: var(--lh-body);
  margin: 0 0 var(--space-2xl) 0;
}
.firm-forming__cta { margin-bottom: var(--space-2xl); }
.firm-forming__moat {
  color: var(--ink-500); font-size: var(--text-sm-pe); line-height: var(--lh-body); margin: 0;
}
.firm-forming__moat .firm-moat-diamond { color: var(--lens-600); font-weight: var(--weight-semibold); }
.firm-newdeal__field { margin-bottom: var(--space-base); }
.firm-newdeal__label {
  display: block; font-size: var(--text-sm-pe); font-weight: var(--weight-medium);
  color: var(--ink-700); margin-bottom: var(--space-xs);
}
.firm-newdeal__input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-sans-pe); font-size: var(--text-body-pe);
  color: var(--ink-900); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-pe-md);
  padding: var(--space-sm) var(--space-md);
}
.firm-newdeal__input:focus-visible { outline: 2px solid var(--lens-400); outline-offset: 1px; border-color: var(--lens-500); }
.firm-newdeal__hint { margin-top: var(--space-xs); font-size: var(--text-xs-pe); color: var(--ink-300); }
.firm-newdeal__drop {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-pe-md);
  padding: var(--space-lg); text-align: center; color: var(--ink-500);
  font-size: var(--text-sm-pe); background: var(--paper-raised); cursor: pointer; display: block;
}

/* ============================================================================
 * Notification settings (/app/settings/notifications.html)
 * ----------------------------------------------------------------------------
 * The destination of the "Change what FundLens emails you" link that EVERY
 * message from the notification spine carries. This surface existing is a
 * correctness requirement: without it that link 404s in every digest and alert.
 *
 * One page governs BOTH modules — the PE Monday digest, PE contradiction alerts,
 * and equity new-filing alerts — so nobody has to find two settings pages to
 * stop two kinds of email.
 *
 * Tokens only (§E1). No raw hex, no element-wide !important, no third-party
 * icon font.
 * ========================================================================== */

.pe-notify {
  min-height: 100vh;
  background: var(--paper-raised);
  font-family: var(--font-sans-pe);
  color: var(--ink-900);
}

.pe-notify__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.pe-notify__back {
  font-size: var(--text-sm-pe);
  color: var(--lens-600);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.pe-notify__back:hover {
  text-decoration: underline;
}

.pe-notify__crumb {
  font-size: var(--text-sm-pe);
  color: var(--ink-300);
}

.pe-notify__shell {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-base) var(--space-xl);
}

.pe-notify__header {
  margin-bottom: var(--space-lg);
}

.pe-notify__title {
  margin: 0 0 var(--space-xs) 0;
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

.pe-notify__lede {
  margin: 0;
  font-size: var(--text-body-pe);
  line-height: var(--lh-body);
  color: var(--ink-500);
}

/* Honest delivery status. Somebody setting preferences must not believe mail is
   flowing when it is not. */
.pe-notify__banner {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-base);
  background: var(--lens-tint);
  border: 1px solid var(--lens-100);
  border-radius: var(--radius-pe-md);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}

.pe-notify__banner--warn {
  background: var(--flag-100);
  border-color: var(--flag-300);
  color: var(--flag-700);
}

.pe-notify__loading {
  padding: var(--space-lg) 0;
  font-size: var(--text-sm-pe);
  color: var(--ink-300);
}

.pe-notify__group {
  margin: 0 0 var(--space-base) 0;
  padding: var(--space-base);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-lg);
}

.pe-notify__group-title {
  padding: 0 var(--space-xs);
  margin-left: calc(var(--space-xs) * -1);
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

.pe-notify__group-help {
  margin: var(--space-xs) 0 var(--space-md) 0;
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
}

.pe-notify__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
  cursor: pointer;
  background: var(--paper);
}

.pe-notify__option + .pe-notify__option {
  margin-top: var(--space-sm);
}

.pe-notify__option:hover {
  border-color: var(--rule-strong);
  background: var(--paper-raised);
}

.pe-notify__option:focus-within {
  border-color: var(--lens-500);
  box-shadow: 0 0 0 3px var(--lens-100);
}

.pe-notify__option input {
  margin-top: 0.2rem;
  accent-color: var(--lens-600);
  flex: 0 0 auto;
}

.pe-notify__option-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-hair);
}

.pe-notify__option-label {
  font-size: var(--text-body-pe);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}

.pe-notify__option-help {
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-300);
}

.pe-notify__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pe-notify__field-label {
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.pe-notify__select {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans-pe);
  font-size: var(--text-body-pe);
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
}

.pe-notify__select:focus {
  outline: none;
  border-color: var(--lens-500);
  box-shadow: 0 0 0 3px var(--lens-100);
}

.pe-notify__status {
  min-height: 1.5rem;
  padding-top: var(--space-sm);
  font-size: var(--text-sm-pe);
  color: var(--ink-300);
}

.pe-notify__status--error {
  color: var(--flag-700);
}

/* ----------------------------------------------------------------------------
 * Secondary deliverable formats
 * ----------------------------------------------------------------------------
 * The management prep pack LEADS WITH SLIDES: it is projected in the session,
 * not read at a desk. So the deck is one primary button and the document
 * formats are grouped behind it as the reference copy, separated by a hairline
 * rather than sitting at equal weight. Three equally-weighted buttons make the
 * Principal choose a format before they have decided what they are doing.
 * -------------------------------------------------------------------------- */
.pe-deliverable-alt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-left: var(--space-sm);
  margin-left: var(--space-xs);
  border-left: 1px solid var(--rule);
}

/* ----------------------------------------------------------------------------
 * S8 tracker export — the same pattern, one format behind the hairline
 * ----------------------------------------------------------------------------
 * Keeps "Export tracker" and its PPTX alternate glued together so the pair reads
 * as one control inside a header that already holds four buttons. Without this
 * the header's own gap would space them identically to the unrelated actions
 * either side, and the hairline would look like a divider rather than a picker.
 * -------------------------------------------------------------------------- */
.pe-ntb-export {
  display: inline-flex;
  align-items: center;
}

/* ----------------------------------------------------------------------------
 * S6 upload receipt — the row under each document
 * ----------------------------------------------------------------------------
 * "Every upload visibly pays." Persistent, not a toast: the receipt is the
 * evidence the upload was worth doing, and it should still be there tomorrow.
 *
 * Read as a footnote to the document above it, not as a competing row — sunken
 * ground, no top border, smaller type. A chip that links looks like a link; a
 * chip stating a zero is deliberately quiet but still fully legible, because
 * "nothing conflicts" is a finding, not an absence.
 * -------------------------------------------------------------------------- */
.pe-receipt-row > td {
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
  background: var(--paper-raised);
  border-top: 0;
}

.pe-receipt {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pe-md);
}

.pe-receipt__headline {
  margin: 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-700);
}

.pe-receipt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: center;
}

.pe-receipt__chip {
  display: inline-block;
  padding: 2px var(--space-sm);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-300);
  background: var(--paper-sunken);
  border-radius: var(--radius-pe-sm);
  white-space: nowrap;
  text-decoration: none;
}

/* An actionable chip reads as interactive; the lens family is the interactive
   register throughout PE, so no new colour is introduced here. */
.pe-receipt__chip--link {
  color: var(--lens-700);
  background: var(--lens-100);
  cursor: pointer;
}

.pe-receipt__chip--link:hover {
  background: var(--lens-tint);
  text-decoration: underline;
}

.pe-receipt__chip--link:focus-visible {
  outline: 2px solid var(--lens-500);
  outline-offset: 1px;
}

/* ----------------------------------------------------------------------------
 * S2 Reader's Brief
 * ----------------------------------------------------------------------------
 * A one-screen pre-read, so it is typeset to be SCANNED: the locator sits in a
 * fixed left gutter, so the eye runs down a column of page references, and the
 * finding sits beside it. The passage is quieter than the finding because the
 * finding is what you scan and the passage is what you check.
 *
 * Section counts are on the heading rather than inside the body, so an empty
 * section still reads as a checked section — "Conflicts 0" with a sentence
 * underneath is a finding; a missing heading is an omission.
 * -------------------------------------------------------------------------- */
.pe-brief__note {
  margin: 0 0 var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--lens-tint);
  border: 1px solid var(--lens-100);
  border-radius: var(--radius-pe-md);
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-700);
}

.pe-brief__sourcing {
  margin: 0 0 var(--space-lg) 0;
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-300);
}

.pe-brief__section {
  margin-bottom: var(--space-lg);
}

.pe-brief__heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  cursor: help;
}

.pe-brief__count {
  padding: 0 6px;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  color: var(--ink-300);
  background: var(--paper-sunken);
  border-radius: var(--radius-pe-sm);
}

.pe-brief__empty {
  margin: 0;
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-300);
}

.pe-brief__lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pe-brief__line {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--paper-sunken);
}

.pe-brief__line:last-child {
  border-bottom: 0;
}

/* Fixed gutter so the locators form a scannable column. */
.pe-brief__locator {
  flex: 0 0 7.5rem;
  font-family: var(--font-mono-pe);
  font-size: var(--text-xs-pe);
  line-height: var(--lh-body);
  color: var(--lens-700);
  text-decoration: none;
  white-space: nowrap;
}

.pe-brief__locator:hover {
  text-decoration: underline;
}

.pe-brief__body {
  flex: 1 1 auto;
  min-width: 0;
}

.pe-brief__text {
  margin: 0;
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}

.pe-brief__counterpoint {
  margin: 2px 0 0 0;
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--flag-700);
}

.pe-brief__passage {
  margin: 2px 0 0 0;
  font-size: var(--text-xs-pe);
  line-height: var(--lh-xs);
  color: var(--ink-300);
}

.pe-brief__overflow {
  margin: var(--space-sm) 0 0 0;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}

/* "Read the brief" on the receipt row — the spec links the brief from the
   receipt, since the receipt is what tells you the document was worth reading. */
.pe-receipt__brieflink {
  margin-left: var(--space-sm);
  padding: 0;
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  color: var(--lens-700);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.pe-receipt__brieflink:hover {
  color: var(--lens-600);
}

/* ----------------------------------------------------------------------------
 * S1 Coverage Ledger
 * ----------------------------------------------------------------------------
 * The honest answer to "what is it not catching?" — so the visual job is to make
 * the two coverages read as SEPARATE measurements, and to make what needs a look
 * impossible to miss without shouting.
 *
 * Each block carries its own heading with a scope chip ("per deal" / "per
 * document"), because the difference between the two figures is the whole point
 * and a shared header would invite adding them up.
 *
 * "Nothing" in the needs-a-look column is deliberately quiet but legible — a
 * checked-and-clear document is a finding, not an absence, and dimming it to
 * invisibility would undo the honesty the panel exists for.
 * -------------------------------------------------------------------------- */
.pe-cov {
  padding: var(--space-base) 0;
}

.pe-cov__loading,
.pe-cov__empty,
.pe-cov__muted {
  margin: 0;
  padding: var(--space-md) 0;
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  color: var(--ink-300);
}

/* What needs a look, before anything else. */
.pe-cov__review {
  display: inline-block;
  margin-bottom: var(--space-base);
  padding: var(--space-sm) var(--space-md);
  background: var(--flag-100);
  border: 1px solid var(--flag-300);
  border-radius: var(--radius-pe-md);
  font-size: var(--text-sm-pe);
  font-weight: var(--weight-medium);
  color: var(--flag-700);
  text-decoration: none;
}

.pe-cov__review:hover {
  text-decoration: underline;
}

.pe-cov__block {
  margin-bottom: var(--space-xl);
}

.pe-cov__heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans-pe);
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* The scope chip is what keeps the two coverages from being read as one. */
.pe-cov__scope {
  padding: 0 6px;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-300);
  background: var(--paper-sunken);
  border-radius: var(--radius-pe-sm);
}

.pe-cov__figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-mono-pe);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  color: var(--ink-900);
}

.pe-cov__figure-sub {
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe);
  color: var(--ink-300);
}

.pe-cov__ws,
.pe-cov__gaps,
.pe-cov__requests {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pe-cov__ws-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--paper-sunken);
  font-size: var(--text-sm-pe);
}

.pe-cov__ws-name { flex: 1 1 auto; color: var(--ink-700); }
.pe-cov__ws-count,
.pe-cov__ws-pct {
  flex: 0 0 auto;
  font-family: var(--font-mono-pe);
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}
.pe-cov__ws-pct { min-width: 3rem; text-align: right; color: var(--ink-500); }

.pe-cov__gap,
.pe-cov__request {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--paper-sunken);
}

.pe-cov__gap-body { flex: 1 1 auto; min-width: 0; }

.pe-cov__gap-label {
  margin: 0;
  font-size: var(--text-sm-pe);
  line-height: var(--lh-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}

.pe-cov__gap-ws {
  margin: 2px 0 0 0;
  font-size: var(--text-xs-pe);
  color: var(--ink-300);
}

.pe-cov__requested {
  flex: 0 0 auto;
  font-size: var(--text-xs-pe);
  color: var(--lens-700);
}

.pe-cov__request--closed { opacity: 0.6; }

.pe-cov__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.pe-cov__copied {
  font-size: var(--text-xs-pe);
  color: var(--lens-700);
}

.pe-cov__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm-pe);
}

.pe-cov__table th {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  font-size: var(--text-xs-pe);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-300);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.pe-cov__table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--paper-sunken);
  color: var(--ink-700);
  vertical-align: top;
}

.pe-cov__doc-name {
  font-weight: var(--weight-medium);
  color: var(--ink-900);
}

.pe-cov__needs { color: var(--review); }

/* Quiet, but readable: a clear document is a finding. */
.pe-cov__clear { color: var(--ink-300); }

.pe-cov__ocr {
  font-size: var(--text-xs-pe);
  color: var(--lens-700);
}

.pe-cov__ocr--warn { color: var(--flag-700); }

.pe-cov__caveat {
  margin: var(--space-md) 0 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--paper-raised);
  border-left: 3px solid var(--rule-strong);
  font-size: var(--text-xs-pe);
  line-height: var(--lh-sm);
  color: var(--ink-500);
}

/* ----------------------------------------------------------------------------
 * Day Zero setup checklist (Adoption Layer §3)
 * ----------------------------------------------------------------------------
 * Six steps, read as a list she works down once. Three things carry the design:
 *
 *  - THE STATE IS A WORD, not a colour or a glyph. "Done / To do / Not set /
 *    Blocked" reads the same to everyone, including a screen reader and anyone
 *    who does not share our colour vocabulary. Colour only reinforces it.
 *  - THE STATUS SENTENCE IS THE CONTENT. It is set at body size, not as caption
 *    metadata, because "2 invited, but 1 cannot be emailed" is the whole reason
 *    this page exists.
 *  - A BLOCKED STEP LOOKS DIFFERENT FROM AN UNSTARTED ONE. "Nobody has done this
 *    yet" and "this cannot be done and here is why" call for different actions.
 * -------------------------------------------------------------------------- */
.pe-dz__privacy {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-base);
  background: var(--paper-raised);
  border-left: 2px solid var(--lens-600);
  color: var(--ink-700);
  font-size: var(--text-sm-pe, 13px);
  line-height: 1.6;
}

.pe-dz__progress {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule);
}
.pe-dz__progress-line {
  margin: 0;
  color: var(--ink-900);
  font-size: var(--text-sm-pe, 13px);
}
.pe-dz__progress-next {
  margin: var(--space-xs) 0 0;
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
}

.pe-dz__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pe-dz__step {
  padding: var(--space-base) 0;
  border-bottom: 1px solid var(--rule);
}
.pe-dz__step:last-child { border-bottom: 0; }

.pe-dz__step-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.pe-dz__step-label {
  margin: 0;
  color: var(--ink-900);
  font-size: var(--text-base-pe, 15px);
  font-weight: 600;
}

/* The word, not a glyph. Tabular width so the labels line up down the list. */
.pe-dz__state {
  flex: 0 0 auto;
  min-width: 62px;
  padding: 2px var(--space-xs);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.pe-dz__state--done {
  border-color: var(--lens-600);
  color: var(--lens-600);
}
.pe-dz__state--blocked {
  border-color: var(--flag-600, var(--ink-700));
  color: var(--flag-600, var(--ink-700));
}

.pe-dz__optional {
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
  font-style: italic;
}

.pe-dz__step-detail {
  margin: var(--space-xs) 0 0;
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
  line-height: 1.6;
}
.pe-dz__step-status {
  margin: var(--space-sm) 0 0;
  color: var(--ink-900);
  font-size: var(--text-sm-pe, 13px);
  line-height: 1.6;
}
.pe-dz__step-blocker {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--flag-600, var(--rule));
  color: var(--ink-700);
  font-size: var(--text-xs-pe, 11px);
  line-height: 1.6;
}
.pe-dz__step-cta { margin-top: var(--space-md); }

/* A finished step recedes; it has nothing left to ask of her. */
.pe-dz__step--done .pe-dz__step-detail { display: none; }

/* ----------------------------------------------------------------------------
 * Day Zero — the invite form inside the team step (§3.2)
 * ----------------------------------------------------------------------------
 * Two fields and a button on one line. It sits inside the step it changes, so it
 * carries no heading of its own.
 *
 * The result line has TWO tones for a reason: "invited and reachable" and "added
 * but nothing could be sent" are different outcomes, and the second is the silent
 * dead letter §3.2 warns about. It must not read as success.
 * -------------------------------------------------------------------------- */
.pe-dz__invite {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.pe-dz__invite-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.pe-dz__invite-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}
.pe-dz__invite-field--narrow { flex: 0 0 130px; }
.pe-dz__invite-label {
  color: var(--ink-300);
  font-size: var(--text-xs-pe, 11px);
}
.pe-dz__invite-input {
  padding: var(--space-xs) var(--space-sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-900);
  /* Form controls do not inherit the page font, so it is set explicitly — through
     the token, not a literal stack (check-pe-type-tokens R2). */
  font-family: var(--font-sans-pe);
  font-size: var(--text-sm-pe, 13px);
}
.pe-dz__invite-input:focus-visible {
  outline: 2px solid var(--lens-600);
  outline-offset: 1px;
}
.pe-dz__invite-result {
  margin: var(--space-sm) 0 0;
  color: var(--ink-700);
  font-size: var(--text-xs-pe, 11px);
  line-height: 1.6;
}
.pe-dz__invite-result--warn {
  padding-left: var(--space-sm);
  border-left: 2px solid var(--flag-600, var(--rule));
  color: var(--ink-900);
}


/* ══════════════════ sosl-provocation.css ══════════════════ */
/*
 * SOSL — Provocation stance capture UI
 * Shared styles for the stance row, optional rationale, and captured-state row
 * rendered by the `public/components/provocation-card.html` partial on both the
 * Equity (`/app/deals/provocations.html`) and PE (`/app/pe/workspace.html`)
 * surfaces. Behaviour lives in `public/app/_sosl-provocation.js`.
 *
 * Spec: .kiro/specs/sosl-engine — Requirements 4.1, 4.3, 4.4, 4.8, 16.1
 */

.sosl-stance {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e5e7eb;
}

/* Row of the 5 stance buttons */
.sosl-stance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sosl-stance-prompt {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  margin-right: 0.25rem;
}

.sosl-stance-btn {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sosl-stance-btn:hover:not(:disabled) {
  border-color: #6366f1;
  color: #4f46e5;
  background: #eef2ff;
}

.sosl-stance-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Optional rationale textarea */
.sosl-rationale {
  margin-top: 0.5rem;
  width: 100%;
  min-height: 2.2rem;
  resize: vertical;
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  color: #374151;
  background: #fff;
}

.sosl-rationale:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Captured-state row: "You [stance] · [time ago] · view rationale · change stance" */
.sosl-stance-captured {
  font-size: 0.78rem;
  color: #6b7280;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.sosl-stance-captured strong {
  color: #111827;
  font-weight: 600;
}

.sosl-stance-captured a {
  color: #4f46e5;
  cursor: pointer;
  text-decoration: none;
}

.sosl-stance-captured a:hover {
  text-decoration: underline;
}

.sosl-sep {
  color: #d1d5db;
}

.sosl-rationale-view {
  flex-basis: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.6rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  color: #4b5563;
  font-style: italic;
}

.sosl-stance-error {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: #b45309;
}

/* "Why this?" provenance affordance (full behaviour lands in task 3.5) */
.sosl-why-this {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: #6366f1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sosl-why-this:hover {
  text-decoration: underline;
}


/* ==========================================================================
 * SOSL — "Why this?" Provenance Popover (task 3.5)
 * Styles for the popover built by window.soslOpenProvenance in
 * public/app/_sosl-provocation.js. Source-of-truth markup + notes live in
 * public/components/provenance-popover.html. Matches the SOSL visual language
 * (indigo accent, pill/dot style) used by the stance block above.
 *
 * Spec: .kiro/specs/sosl-engine — Requirements 14.1, 14.2, 14.3, 14.4, 14.5
 * ========================================================================== */

.sosl-prov-popover {
  position: fixed;
  z-index: 10000;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 0.85rem;
  font-family: var(--font-sans-pe);
  color: #374151;
}

.sosl-prov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}

.sosl-prov-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4f46e5;
}

.sosl-prov-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.sosl-prov-close:hover {
  color: #4b5563;
}

.sosl-prov-sub {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-bottom: 0.6rem;
}

.sosl-prov-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sosl-prov-item {
  padding: 0.5rem 0.6rem;
  background: #f9fafb;
  border: 1px solid #eef2ff;
  border-radius: 0.5rem;
}

.sosl-prov-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sosl-prov-topic {
  font-size: 0.78rem;
  font-weight: 600;
  color: #111827;
}

.sosl-prov-stance {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: lowercase;
  color: #4f46e5;
  background: #eef2ff;
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
}

.sosl-prov-dots {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #6366f1;
}

.sosl-prov-summary {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #6b7280;
}

.sosl-prov-empty {
  font-size: 0.76rem;
  color: #6b7280;
  font-style: italic;
  padding: 0.25rem 0;
}

.sosl-prov-foot {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

.sosl-prov-mind-link {
  font-size: 0.74rem;
  font-weight: 600;
  color: #4f46e5;
  text-decoration: none;
}

.sosl-prov-mind-link:hover {
  text-decoration: underline;
}


/* ==========================================================================
 * SOSL — Conditioning Preamble (task 3.6)
 * Styles for the modal panel built by window.soslConditioningPreamble in
 * public/app/_sosl-provocation.js. Source-of-truth markup + notes live in
 * public/components/conditioning-preamble.html. Matches the SOSL visual
 * language (indigo accent, pill/dot style) used by the stance block and the
 * "Why this?" popover above.
 *
 * Spec: .kiro/specs/sosl-engine — Requirements 9.1, 9.2, 9.3, 9.4, 9.5
 * ========================================================================== */

.sosl-preamble-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sosl-preamble {
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  padding: 1.1rem 1.2rem;
  font-family: var(--font-sans-pe);
  color: #374151;
}

.sosl-preamble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.sosl-preamble-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4f46e5;
}

.sosl-preamble-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
}

.sosl-preamble-close:hover {
  color: #4b5563;
}

.sosl-preamble-sub {
  font-size: 0.76rem;
  color: #9ca3af;
  margin-bottom: 0.85rem;
}

.sosl-preamble-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* One block per topic (Requirement 9.1) */
.sosl-preamble-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sosl-preamble-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #f3f4f6;
}

/* One row per prior: stance · dots · evidence · provenance summary (Req 9.2) */
.sosl-preamble-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  background: #f9fafb;
  border: 1px solid #eef2ff;
  border-radius: 0.5rem;
}

.sosl-preamble-stance {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: lowercase;
  color: #4f46e5;
  background: #eef2ff;
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
}

.sosl-preamble-dots {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: #6366f1;
}

.sosl-preamble-evidence {
  font-size: 0.72rem;
  color: #6b7280;
}

.sosl-preamble-summary {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: #6b7280;
}

.sosl-preamble-empty {
  font-size: 0.78rem;
  color: #6b7280;
  font-style: italic;
  padding: 0.5rem 0;
}

/* "Don't show again" — reflects preamble_skipped on read (persist TODO) */
.sosl-preamble-skip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.76rem;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}

.sosl-preamble-skip-input {
  width: 0.95rem;
  height: 0.95rem;
  accent-color: #6366f1;
  cursor: pointer;
}

/* Footer actions (Requirement 9.3) */
.sosl-preamble-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed #e5e7eb;
}

.sosl-preamble-adjust {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4f46e5;
  text-decoration: none;
}

.sosl-preamble-adjust:hover {
  text-decoration: underline;
}

.sosl-preamble-confirm {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.55rem 0.95rem;
  border: 1px solid #4f46e5;
  border-radius: 0.5rem;
  background: #4f46e5;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sosl-preamble-confirm:hover {
  background: #4338ca;
  border-color: #4338ca;
}

/* ==========================================================================
 * SOSL — Briefing Bar (task 5.5)
 * --------------------------------------------------------------------------
 * Styles for the "what changed since your last visit" bar injected at the top
 * of the Equity (`/app/deals/*`) and PE (`/app/pe/workspace.html`) workspaces by
 * the self-contained `window.soslBriefingBar` module in public/app/_shell.js.
 * The source-of-truth reference markup lives in
 * public/components/briefing-bar.html.
 *
 * Namespaced `.sosl-briefing-*` to avoid any collision with the unrelated
 * Source-Library `.briefing-bar` styles in public/css/analyst-experience.css.
 *
 * Spec: .kiro/specs/sosl-engine — Requirements 12.1, 12.2, 12.3, 12.4, 12.5, 13.3, 13.5
 * ========================================================================== */

.sosl-briefing-bar {
  position: relative;
  background: linear-gradient(135deg, #f8f9fc 0%, #eef2ff 100%);
  border-bottom: 1px solid #e3e8f5;
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  font-family: var(--font-sans-pe);
  color: #374151;
  z-index: 40;
}

/* Stacked list of 0–4 personalized lines + ≤1 contradiction line. */
.sosl-briefing-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* One briefing line: indicator dot · optional icon · text · [Review]. */
.sosl-briefing-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.35;
}

.sosl-briefing-dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #2563eb;
}

/* Severity colours (Requirement 12.3). */
.sosl-briefing-line--red .sosl-briefing-dot { background: #dc2626; }
.sosl-briefing-line--amber .sosl-briefing-dot { background: #d97706; }
.sosl-briefing-line--green .sosl-briefing-dot { background: #059669; }
.sosl-briefing-line--info .sosl-briefing-dot { background: #2563eb; }

.sosl-briefing-icon {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: #9ca3af;
}
.sosl-briefing-line--red .sosl-briefing-icon { color: #dc2626; }
.sosl-briefing-line--amber .sosl-briefing-icon { color: #d97706; }
.sosl-briefing-line--green .sosl-briefing-icon { color: #059669; }

.sosl-briefing-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* [Review] deep-link (Requirement 12.3). */
.sosl-briefing-review {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 600;
  color: #4f46e5;
  text-decoration: none;
  white-space: nowrap;
}
.sosl-briefing-review:hover { text-decoration: underline; }

/* × — dismisses the bar for the SESSION ONLY (Requirement 12.5). */
.sosl-briefing-close {
  position: absolute;
  top: 0.45rem;
  right: 0.7rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
}
.sosl-briefing-close:hover { color: #4b5563; }

/* Self-contradiction line: neutral framing + two actions (Requirement 13.5). */
.sosl-briefing-line--contradiction {
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem;
  margin-top: 0.15rem;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 0.4rem;
}

.sosl-briefing-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.sosl-briefing-action {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.32rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.sosl-briefing-action:hover { border-color: #6366f1; color: #4f46e5; background: #eef2ff; }
.sosl-briefing-action--primary { border-color: #4f46e5; color: #fff; background: #4f46e5; }
.sosl-briefing-action--primary:hover { background: #4338ca; border-color: #4338ca; color: #fff; }

/* Inline rationale capture for "Different reasoning, here's why". */
.sosl-briefing-rationale {
  flex: 1 1 14rem;
  min-width: 8rem;
  font-size: 0.76rem;
  padding: 0.32rem 0.55rem;
  border: 1px solid #d1d5db;
  border-radius: 0.4rem;
  color: #374151;
  background: #fff;
}
.sosl-briefing-rationale:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.sosl-briefing-error {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: #b45309;
}

@media (max-width: 640px) {
  .sosl-briefing-line { flex-wrap: wrap; }
  .sosl-briefing-text { flex-basis: 100%; }
}


/* ==========================================================================
 * SOSL — Track 6 additions
 *   §7.3  preamble "Don't show again" persist-error note
 *   §7.4/§7.5  ◊ conditioned badge (auto-decorator)
 *   §7.7  five-stance confirmation pulse + toast (also injected by _shell.js
 *         for pages that omit this stylesheet — kept here as the canonical
 *         source of truth)
 *   §7.8  per-tenant isolation small print in the preamble
 * ========================================================================== */

/* §7.3 — subtle inline error if persisting the skip preference fails. */
.sosl-preamble-skip-error {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: #b45309;
}

/* §7.8 — per-tenant isolation small print inside the conditioning preamble. */
.sosl-preamble-isolation {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid #eef2ff;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #6b7280;
}

/* §7.4/§7.5 — ◊ conditioned badge appended to conditioned outputs. */
.sosl-cond-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
  padding: 0;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.85rem;
  line-height: 1;
  color: #4f46e5;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  vertical-align: middle;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.sosl-cond-badge:hover,
.sosl-cond-badge:focus {
  outline: none;
  background: #eef2ff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

/* §7.7 — stance confirmation pulse (200ms ring) + bottom-right toast. */
@keyframes soslStancePulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
}
.sosl-stance-pulse {
  animation: soslStancePulse 200ms ease-out;
  border-radius: 0.4rem;
}
.sosl-stance-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  background: #111827;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.sosl-stance-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sosl-stance-toast .sosl-stance-check {
  color: #34d399;
  margin-right: 0.35rem;
}