/* Colby webfonts — self-hosted @font-face pending (see tokens.ts header TODO).
 * Until the woff2 files land, these stacks resolve to Inter/JetBrains Mono when the
 * OS has them and to the system stacks otherwise. Never @import from Google Fonts.
 */

/* ============================================================================
 * Colby — Color tokens
 * Brand identity: ELECTRIC BLUE (--blue-500) is the primary/action color;
 * cool STONE neutrals run from paper white down to ink. Base ramps first, then
 * semantic aliases — use the aliases in product code; reach for raw ramps only when
 * building new component variants.
 * ========================================================================== */
:root {
  /* -- Electric blue — brand / action / focus (built around --blue-500) ---- */
  --blue-50:  #EBF1FF;
  --blue-100: #D6E3FF;
  --blue-200: #ADC7FF;
  --blue-300: #7FA6FF;
  --blue-400: #4A83FF;
  --blue-500: #1A63FF;   /* COLBY ELECTRIC BLUE — the one place this hex exists */
  --blue-600: #0F4FD6;
  --blue-700: #0B3EAB;
  --blue-800: #082F82;
  --blue-900: #06215C;

  /* -- Stone — neutral ramp (cool, professional; 950 is "ink") ------------ */
  --stone-0:   #FFFFFF;
  --stone-50:  #F7F8FA;
  --stone-100: #EFF1F4;
  --stone-150: #E6E9EE;
  --stone-200: #D8DDE4;
  --stone-300: #BBC2CC;
  --stone-400: #8E97A3;
  --stone-500: #69727E;
  --stone-600: #4F5862;
  --stone-700: #3A424B;
  --stone-800: #272C33;
  --stone-900: #181C21;
  --stone-950: #0E1115;
  --ink:       var(--stone-950);

  /* -- Semantic status (ancestor structure kept) --------------------------- */
  --success-50:  #ECF8F1;
  --success:     #1E8A5B;
  --success-700: #135B3C;
  --warning-50:  #FCF3E4;
  --warning:     #E0982E;
  --warning-700: #99641A;
  --danger-50:   #FBEAEA;
  --danger:      #D64541;
  --danger-700:  #97302D;
  --info-50:     var(--blue-50);
  --info:        var(--blue-600);

  /* Status surface/text pairs (banners, callouts — no per-callsite fallbacks). */
  --success-bg: var(--success-50);
  --success-fg: var(--success-700);
  --warning-bg: var(--warning-50);
  --warning-fg: var(--warning-700);
  --danger-bg:  var(--danger-50);
  --danger-fg:  var(--danger-700);

  /* ---------------------------------------------------------------------- *
   * Semantic aliases — PREFER THESE IN PRODUCT CODE
   * ---------------------------------------------------------------------- */
  /* Brand — electric blue is the workhorse AND the accent (D-3). */
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-600);
  --brand-active:     var(--blue-700);
  --brand-subtle:     var(--blue-50);
  --brand-border:     var(--blue-200);
  /* Text-on-brand-subtle contexts (badge.brand, running step markers, active rails). */
  --brand-text:       var(--blue-700);
  --brand-accent:        var(--blue-400);
  --brand-accent-hover:  var(--blue-500);
  --brand-accent-subtle: var(--blue-50);
  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-600);
  --accent-subtle:  var(--blue-50);
  --accent-text:    var(--blue-700);

  /* Text */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-disabled:  var(--stone-400);
  --text-on-brand:  var(--stone-0);
  --text-on-accent: var(--stone-0);
  --text-link:      var(--blue-700);

  /* Surfaces */
  --surface-page:   var(--stone-50);
  --surface-card:   var(--stone-0);
  --surface-sunken: var(--stone-100);
  --surface-raised: var(--stone-0);
  --surface-inverse: var(--stone-900);
  --surface-brand:  var(--blue-500);
  --overlay:        rgba(14, 17, 21, 0.55);

  /* Borders */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-brand:   var(--blue-500);

  /* Focus ring */
  --ring-brand:  0 0 0 3px rgba(26, 99, 255, 0.22);
  --ring-danger: 0 0 0 3px rgba(214, 69, 65, 0.20);

  /* Text selection (was a raw brand-ramp leak in the ERP base styles). */
  --selection-bg: var(--blue-100);
  --selection-fg: var(--stone-900);

  /* App-shell sidebar (was four raw brand-ramp leaks in ERP styles.ts).
     Tenant themes may override these (src/console/theme.ts whitelist). */
  --sidebar-bg-top:        var(--stone-900);
  --sidebar-bg-bottom:     var(--ink);
  --sidebar-text:          var(--stone-0);
  --sidebar-text-muted:    var(--stone-300);
  --sidebar-hover:         rgba(255, 255, 255, 0.06);
  --sidebar-active:        rgba(255, 255, 255, 0.12);
  --sidebar-active-accent: var(--blue-400);

  /* Avatar chip (was a raw brand-ramp leak). */
  --avatar-bg: var(--brand);
  --avatar-fg: var(--text-on-brand);
}

/* ============================================================================
 * Colby — Typography tokens
 * Display + UI/Body: Inter (one family, weight does the display work)
 * Mono: JetBrains Mono (figures, money, ids, codes — tabular)
 * ========================================================================== */
:root {
  /* Families */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* Type scale — size / line-height pairs (ERP scale, verbatim) ---------- */
  --text-display-2xl: 3.75rem;  /* 60 */
  --lh-display-2xl:   1.02; /* @kind other */
  --text-display-xl:  3rem;     /* 48 */
  --lh-display-xl:    1.04; /* @kind other */
  --text-display-lg:  2.375rem; /* 38 */
  --lh-display-lg:    1.08; /* @kind other */

  --text-h1: 1.875rem;  /* 30 */
  --lh-h1:   1.15; /* @kind other */
  --text-h2: 1.5rem;    /* 24 */
  --lh-h2:   1.2; /* @kind other */
  --text-h3: 1.25rem;   /* 20 */
  --lh-h3:   1.28; /* @kind other */
  --text-h4: 1.0625rem; /* 17 */
  --lh-h4:   1.35; /* @kind other */
  /* Stat-number size used as a de-facto convention by six views (dialer, outreach,
     signalsQueue, attribution, whatWorks, digest) — was UNDEFINED until the P5 close
     (declarations silently invalidated to the inherited size). Alias of h3. */
  --text-title: var(--text-h3);

  --text-body-lg: 1.125rem;  /* 18 */
  --lh-body-lg:   1.6; /* @kind other */
  --text-body:    0.9375rem; /* 15 */
  --lh-body:      1.55; /* @kind other */
  --text-body-sm: 0.84375rem;/* 13.5 */
  --lh-body-sm:   1.5; /* @kind other */

  --text-label:   0.8125rem; /* 13 */
  --lh-label:     1.3; /* @kind other */
  --text-eyebrow: 0.75rem;   /* 12 */
  --lh-eyebrow:   1.3; /* @kind other */
  --text-caption: 0.6875rem; /* 11 */
  --lh-caption:   1.3; /* @kind other */

  --text-mono:    0.84375rem;/* 13.5 */
  --lh-mono:      1.5; /* @kind other */

  /* Letter-spacing */
  --tracking-tight:  -0.02em; /* @kind other */
  --tracking-snug:   -0.011em; /* @kind other */
  --tracking-normal: 0; /* @kind other */
  --tracking-wide:   0.04em; /* @kind other */
  --tracking-eyebrow: 0.08em;  /* @kind other */
}

/* ============================================================================
 * Colby — Spacing & layout tokens (4px base grid, ERP scale verbatim)
 * ========================================================================== */
:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0\.5: 2px;
  --space-1:   4px;
  --space-1\.5: 6px;
  --space-2:   8px;
  --space-2\.5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Container widths */
  --container-sm: 480px;
  --container-md: 768px;
  --container-lg: 1040px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* Minimum tap target (mobile) */
  --tap-target: 44px;
}

/* ============================================================================
 * Colby — Elevation: radii, shadows, borders (ERP values verbatim; the two
 * brand-tinted shadows re-based on the blue ramp)
 * ========================================================================== */
:root {
  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;   /* default card radius */
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Border widths */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Shadows — neutral, cool, layered */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.04);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.10), 0 8px 8px -4px rgba(16, 24, 40, 0.04);
  --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.22);

  /* Brand-tinted elevation for primary surfaces / CTAs */
  --shadow-brand: 0 6px 16px -4px rgba(26, 99, 255, 0.34);
  --shadow-accent: 0 6px 16px -4px rgba(26, 99, 255, 0.30);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ============================================================================
 * Colby — Base element styles & helpers (ERP base layer, .pe- classes kept —
 * renaming the namespace is churn, porting-plan WS7.3)
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* -- Display / heading helper classes ----------------------------------- */
.pe-display-2xl { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--text-display-2xl); line-height: var(--lh-display-2xl); letter-spacing: var(--tracking-tight); }
.pe-display-xl  { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--text-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tracking-tight); }
.pe-display-lg  { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--text-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tracking-tight); }
.pe-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-snug); }
.pe-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-snug); }
.pe-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h3); line-height: var(--lh-h3); }
.pe-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-h4); line-height: var(--lh-h4); }

.pe-body-lg { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.pe-body    { font-size: var(--text-body); line-height: var(--lh-body); }
.pe-body-sm { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); }

/* Eyebrow / kicker — small uppercase label */
.pe-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

.pe-mono { font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--lh-mono);
  font-variant-numeric: tabular-nums; }

/* Tabular figures helper — for money + measurement columns */
.pe-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }


/* ====================================================================== *
 * App shell — fixed dark sidebar + top bar + scrolling content region
 * ====================================================================== */
.pe-app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas: "sidebar topbar" "sidebar content";
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* -- Sidebar ----------------------------------------------------------- */
.pe-sidebar {
  grid-area: sidebar;
  background: linear-gradient(180deg, var(--sidebar-bg-top), var(--sidebar-bg-bottom));
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3) var(--space-4);
  overflow-y: auto;
}
/* Colby wordmark (text, no logo asset yet). */
.pe-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--sidebar-text);
  margin: var(--space-1) var(--space-2) var(--space-6);
}
.pe-wordmark .dot { color: var(--sidebar-active-accent); }
.pe-nav { display: flex; flex-direction: column; gap: 2px; }
.pe-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--sidebar-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.pe-nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.pe-nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text);
  box-shadow: inset 3px 0 0 0 var(--sidebar-active-accent);
}
.pe-nav-item i { width: 18px; height: 18px; flex: 0 0 18px; }
.pe-nav-item i svg { width: 18px; height: 18px; }
.pe-sidebar-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--sidebar-text-muted);
  font-size: var(--text-caption);
  line-height: 1.4;
}

/* -- Top bar ----------------------------------------------------------- */
.pe-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 50;
}
.pe-page-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  white-space: nowrap;
}
.pe-topbar-spacer { flex: 1; }
.pe-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 320px;
  flex: 1 1 200px;
}
.pe-search i {
  position: absolute;
  left: var(--space-3);
  width: 16px; height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.pe-search input { padding-left: var(--space-8); width: 100%; }
.pe-acting {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}
.pe-acting b { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* -- Content region ---------------------------------------------------- */
.pe-content {
  grid-area: content;
  overflow-y: auto;
  padding: var(--space-6);
}
.pe-content-inner { max-width: var(--container-2xl); margin: 0 auto; }
.pe-view { display: none; }
.pe-view.active { display: block; }

/* Record page (master -> detail). A view carrying .pe-view--record hides its
   list pane and view head and shows only the record pane filling the column from the
   top, so opening a record reads as its own page instead of a panel below the list. */
.pe-record-pane { display: none; }
.pe-view--record .pe-record-list-pane { display: none; }
.pe-view--record > .pe-view-head { display: none; }
.pe-view--record .pe-record-pane { display: block; }
.pe-record-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.pe-record-crumb { color: var(--text-muted); font-size: var(--text-body-sm); font-weight: var(--fw-semibold); }
.pe-table tbody tr.pe-row-recent { background: var(--surface-sunken); box-shadow: inset 3px 0 0 var(--brand); }
/* Deep-link focus: a stronger, intentional version of pe-row-recent for click-through. */
.pe-table tbody tr.pe-row-focus { background: var(--surface-sunken); box-shadow: inset 4px 0 0 var(--brand), 0 0 0 2px var(--brand) inset; }
.pe-approval-slot.pe-row-focus { border-radius: var(--radius-md); box-shadow: 0 0 0 2px var(--brand); }
.pe-view-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.pe-view-head .pe-eyebrow { margin: 0; }
.pe-view-sub { color: var(--text-muted); font-size: var(--text-body-sm); }
.pe-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

/* ====================================================================== *
 * Buttons
 * ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn i { width: 16px; height: 16px; }
.btn i svg { width: 16px; height: 16px; }
.btn.sm { height: 36px; padding: 0 var(--space-3); font-size: var(--text-caption); }
/* Touch devices get a full 44px hit target even on the compact button (§21). */
@media (pointer: coarse) { .btn.sm { height: 44px; } }

.btn-primary {
  background: var(--brand);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn-primary:active:not(:disabled) { background: var(--brand-active); }

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text-primary); }

.btn-danger { background: var(--danger); color: var(--stone-0); box-shadow: var(--shadow-sm); }
.btn-danger:hover:not(:disabled) { background: var(--danger-700); }

.btn-accent { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.btn-accent:hover:not(:disabled) { background: var(--accent-hover); }

/* Icon button — square, ghost, aria-label required at call site */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-primary); }
.icon-btn i, .icon-btn i svg { width: 18px; height: 18px; }

/* ====================================================================== *
 * Inputs & selects
 * ====================================================================== */
.input, .select, select.select, input.input, textarea.input {
  height: 44px;
  width: 100%;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.input.sm, .select.sm { height: 38px; }
.checkline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring-brand);
}
.input::placeholder { color: var(--text-disabled); }
label.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1\.5);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

/* ====================================================================== *
 * Cards
 * ====================================================================== */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.card.hoverable:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h4); }
.card-meta { color: var(--text-muted); font-size: var(--text-body-sm); }

/* Collapsible "setup / advanced" disclosure. Built on <details> so content stays in
   the DOM — and addressable by id — even when collapsed. */
.pe-collapse {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.pe-collapse > summary {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer; list-style: none; user-select: none;
}
.pe-collapse > summary::-webkit-details-marker { display: none; }
.pe-collapse > summary:hover { background: var(--brand-subtle); }
.pe-collapse-chevron {
  width: 18px; height: 18px; color: var(--text-muted); flex: none;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.pe-collapse[open] > summary .pe-collapse-chevron { transform: rotate(90deg); }
.pe-collapse-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h4); }
.pe-collapse-sub { color: var(--text-muted); font-size: var(--text-body-sm); }
.pe-collapse-meta { color: var(--text-muted); font-size: var(--text-body-sm); margin-left: auto; text-align: right; }
.pe-collapse-body { padding: 0 var(--space-5) var(--space-5); }
/* Flatten cards nested inside a collapse — the disclosure is the frame. */
.pe-collapse-body > .card { box-shadow: none; border: none; border-radius: 0; padding: 0; margin: 0; }
.pe-collapse-body > .card + .card { margin-top: var(--space-6); border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
/* Inline "show the form" disclosure inside a card. */
details.pe-inline > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  margin-top: var(--space-4); font-size: var(--text-body-sm); font-weight: var(--fw-semibold); color: var(--brand);
}
details.pe-inline > summary::-webkit-details-marker { display: none; }
details.pe-inline > summary:hover { text-decoration: underline; }
details.pe-inline[open] > summary { margin-bottom: var(--space-3); }
.inline-result { margin-top: var(--space-4); }
.inline-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.inline-result-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-lg);
  color: var(--text-primary);
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

/* ====================================================================== *
 * Tables
 * ====================================================================== */
.pe-table-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Scroll wide tables horizontally instead of clipping columns at narrow widths; the
     border-radius still needs vertical clipping. */
  overflow-x: auto;
  overflow-y: hidden;
}
table.pe-table { width: 100%; border-collapse: collapse; }
.pe-table th, .pe-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.pe-table th {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  background: var(--surface-sunken);
}
.pe-table tbody tr:last-child td { border-bottom: none; }
.pe-table tbody tr:hover { background: var(--surface-sunken); }
.pe-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Numeric/tabular cells right-align so decimal points line up. Targets cells whose
   value is rendered through mono(); degrades to left-align without :has(). */
.pe-table td:has(> .pe-num) { text-align: right; }
.pe-table th.pe-num-head { text-align: right; }
/* Sortable column headers: the table() helper marks sortable headers .pe-sort. */
.pe-table th.pe-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.pe-table th.pe-sort:hover { color: var(--text-secondary); }
.pe-table th.pe-sort .pe-sort-ind { opacity: 0; margin-left: 4px; font-size: 10px; }
.pe-table th.pe-sort:hover .pe-sort-ind { opacity: .5; }
.pe-table th.pe-sort[aria-sort="ascending"] .pe-sort-ind,
.pe-table th.pe-sort[aria-sort="descending"] .pe-sort-ind { opacity: 1; }
.row-actions { display: flex; gap: var(--space-2); }
/* Settings-style sub-tabs: one panel open at a time. */
.pe-subpanel[hidden] { display: none; }
/* Dense queue + sticky detail pane, side by side (dedup review queue, WS7.5). */
.pe-er-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .pe-er-grid { grid-template-columns: 1fr; } }
.pe-er-detail-pane { position: sticky; top: var(--space-4); }
.pe-er-cards { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.pe-er-card { flex: 1 1 8rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-raised); }
.pe-er-card .pe-er-card-val { font-size: var(--text-h3); font-weight: 600; }
.pe-er-card .pe-er-card-lbl { color: var(--text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .04em; }
.pe-er-evidence { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; }
.pe-er-evidence-row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-body-sm); }
.pe-er-row.is-selected > td { background: var(--surface-sunken); }
.pe-er-row.is-stale td:first-child { border-left: 2px solid var(--warning); }
tr.pe-er-row { cursor: pointer; }
/* Inline status banners (blocked merge, applied success, unsafe reversal). */
.pe-banner { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin: var(--space-2) 0; font-size: var(--text-body-sm); border: 1px solid var(--border-subtle); }
.pe-banner.success { background: var(--success-bg); color: var(--success-fg); }
.pe-banner.danger { background: var(--danger-bg); color: var(--danger-fg); }
.pe-banner.warning { background: var(--warning-bg); color: var(--warning-fg); }
/* A checkbox sits inline with its label inside grid-form. */
label.field.pe-check-field { flex-direction: row; align-items: center; gap: var(--space-2); }
/* Inline action rows that replace window.prompt. */
.pe-inline-complete, .pe-inline-resolve { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pe-inline-complete .input, .pe-inline-resolve .input { min-width: 8rem; }
/* Inline field validation: a small message under the field + a danger outline. */
.field-err { color: var(--danger); font-size: var(--text-caption); margin-top: var(--space-1); }
.field.has-err > .input, .field.has-err > .select, .field.has-err input, .field.has-err .select { border-color: var(--danger); }

/* ====================================================================== *
 * Guided-form field controls (segmented choice, chips, confirm note) —
 * reused by the import wizard + review flows (WS7.5).
 * ====================================================================== */
.pe-seg {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
}
.pe-seg-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  border-right: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.pe-seg-opt:last-child { border-right: none; }
.pe-seg-opt:hover { background: var(--surface-sunken); }
.pe-seg-opt.is-on { background: var(--brand); color: var(--text-on-brand); }
.pe-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }

.pe-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pe-chip {
  padding: var(--space-1\.5) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
}
.pe-chip:hover { background: var(--surface-sunken); }
.pe-chip.is-on { background: var(--brand); color: var(--text-on-brand); border-color: var(--brand); }

.pe-check {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-label); font-weight: var(--fw-semibold); color: var(--text-secondary);
  cursor: pointer;
}
.pe-check input { width: 16px; height: 16px; }

.pe-fnl-note {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-body-sm); color: var(--text-secondary);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.pe-fnl-note i, .pe-fnl-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.pe-fnl-summary {
  font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-primary);
  font-weight: var(--fw-medium);
}
.pe-fnl-subhead {
  font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-primary);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-3);
}

/* ====================================================================== *
 * Badges (status: neutral / brand / success / warning / danger / green)
 * ====================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1\.5);
  height: 22px;
  padding: 0 var(--space-2\.5);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.badge.neutral { background: var(--stone-100); color: var(--stone-700); }
.badge.brand   { background: var(--brand-subtle); color: var(--brand-text); }
.badge.success { background: var(--success-50); color: var(--success-700); }
/* Legacy "green" tone maps onto success (the ancestor's landscape accent is gone). */
.badge.green   { background: var(--success-50); color: var(--success-700); }
.badge.warning { background: var(--warning-50); color: var(--warning-700); }
.badge.danger  { background: var(--danger-50); color: var(--danger-700); }

/* ====================================================================== *
 * StatCard
 * ====================================================================== */
.statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.statcard {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.statcard .label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}
.statcard .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.statcard .delta { font-size: var(--text-body-sm); margin-top: var(--space-1); }
.statcard .delta.up { color: var(--success-700); }
.statcard .delta.down { color: var(--danger-700); }

/* ====================================================================== *
 * Avatar
 * ====================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  flex: 0 0 32px;
}

/* ====================================================================== *
 * Tabs (underline-active) — used in detail panels
 * ====================================================================== */
.pe-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-4); }
.pe-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.pe-tab:hover { color: var(--text-primary); }
.pe-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ====================================================================== *
 * Stepper — ordered saga steps (done / running / failed / awaiting)
 * ====================================================================== */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2\.5) var(--space-3);
  border-radius: var(--radius-md);
}
.step .marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-default);
  background: var(--surface-card);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.step .marker i, .step .marker i svg { width: 13px; height: 13px; }
.step .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step .step-key { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-primary); font-weight: var(--fw-semibold); }
.step .step-meta { font-size: var(--text-caption); color: var(--text-muted); }
.step.done .marker { background: var(--success-50); border-color: var(--success); color: var(--success-700); }
.step.running .marker { background: var(--brand-subtle); border-color: var(--brand); color: var(--brand-text); }
.step.failed .marker { background: var(--danger-50); border-color: var(--danger); color: var(--danger-700); }
.step.awaiting .marker { background: var(--warning-50); border-color: var(--warning); color: var(--warning-700); }
.step.is-current { background: var(--brand-subtle); }
.step.is-current .step-key { color: var(--brand-text); }

/* ====================================================================== *
 * Misc helpers
 * ====================================================================== */
.muted { color: var(--text-muted); }
.empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.empty-card {
  background: var(--surface-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}
.gated {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}
.gated i { width: 16px; height: 16px; color: var(--text-muted); }
.stack > * + * { margin-top: var(--space-3); }
.flex { display: flex; align-items: center; gap: var(--space-2); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cta-arrow { font-family: var(--font-sans); }

/* ====================================================================== *
 * Toasts
 * ====================================================================== */
/* The container never blocks clicks; only the individual toasts are interactive. */
#toasts { position: fixed; bottom: var(--space-5); right: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); z-index: 2000; pointer-events: none; }
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: var(--text-body-sm);
  max-width: 380px;
  border-left: 3px solid var(--brand);
  pointer-events: auto;
}
.toast.ok { border-left-color: var(--success); }
.toast.err { border-left-color: var(--danger); }
.toast i { width: 16px; height: 16px; flex: 0 0 16px; }
.toast.ok i { color: var(--success); }
.toast.err i { color: var(--danger); }
.toast-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.toast-close:hover { background: var(--surface-sunken); color: var(--text-primary); }
.toast-close i { width: 14px; height: 14px; flex: 0 0 14px; }

/* ====================================================================== *
 * Sidebar nav groups + Today/home worklist grid
 * ====================================================================== */
.pe-nav-group { display: flex; flex-direction: column; gap: 2px; }
.pe-nav-group + .pe-nav-group { margin-top: var(--space-4); }
.pe-nav-group-label {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-1);
  color: var(--sidebar-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pe-today-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.pe-today-card { margin: 0; }
.pe-today-card .card-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.pe-today-card .card-title i { width: 16px; height: 16px; }
.pe-today-count { color: var(--text-muted); font-size: var(--text-body-sm); font-weight: var(--fw-semibold); }
.pe-today-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.pe-today-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
}
.pe-today-item:first-child { border-top: none; }
.pe-today-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-today-item-name { font-weight: var(--fw-semibold); color: var(--text-primary); }
.pe-today-item-why { font-size: var(--text-body-sm); }
.pe-today-item-chip { flex: 0 0 auto; }
.pe-today-item-click { cursor: pointer; border-radius: var(--radius-md); }
.pe-today-item-click:hover { background: var(--surface-sunken); }
.pe-today-item-click:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pe-today-foot { margin-top: var(--space-3); }

/* ====================================================================== *
 * Filter affordance — controls collapse behind one button
 * ====================================================================== */
.pe-filter-wrap { position: relative; display: inline-flex; }
.pe-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--space-2);
  border-radius: var(--radius-full); background: var(--brand); color: var(--text-on-brand);
  font-size: var(--text-caption); font-weight: var(--fw-semibold); line-height: 1;
}
.pe-filter-panel {
  position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0;
  min-width: 360px; padding: var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.pe-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pe-filter-grid .field { margin: 0; }
.pe-filter-actions {
  display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4);
}

/* Approvals / review inbox — a calm single column of PE.approvalCard units. */
.pe-approval-inbox { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.pe-approval-slot { display: block; }

/* ====================================================================== *
 * Responsive
 * ====================================================================== */
@media (max-width: 760px) {
  .pe-app { grid-template-columns: 64px 1fr; }
  .pe-wordmark { display: none; }
  .pe-nav-item span { display: none; }
  .pe-nav-item { justify-content: center; }
  .pe-nav-group-label { display: none; }
  .pe-acting .who { display: none; }
}

/* ====================================================================== *
 * Reduced motion
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .card.hoverable:hover { transform: none; }
}


.pe-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.pe-state-empty { padding: var(--space-8) var(--space-6); }
.pe-state-icon { display: flex; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-muted); flex: 0 0 auto; }
.pe-state-icon i { width: 18px; height: 18px; }
.pe-state-title { font-weight: var(--fw-semibold); color: var(--text-secondary); font-size: var(--text-body); }
.pe-state-hint { font-size: var(--text-body-sm); color: var(--text-muted); }
.pe-state-actions { margin-top: var(--space-1); }

/* Error block: a left-aligned row with a danger accent, sized to flow inline within a card. */
.pe-state-error { flex-direction: row; align-items: flex-start; gap: var(--space-3); text-align: left; padding: var(--space-4); background: var(--danger-50); border-color: var(--border-default); }
.pe-state-error .pe-state-icon { width: auto; height: auto; background: transparent; color: var(--danger-700); }
.pe-state-error .pe-state-icon i { width: 16px; height: 16px; }
.pe-state-error .pe-state-title { color: var(--danger-700); }
.pe-state-error .pe-state-hint { color: var(--danger-700); opacity: 0.92; }
.pe-state-error .pe-state-body { flex: 1 1 auto; min-width: 0; }
.pe-state-retry { margin-left: auto; flex: 0 0 auto; align-self: center; }
.pe-state-error.is-forbidden { background: var(--surface-sunken); border-color: var(--border-default); }
.pe-state-error.is-forbidden .pe-state-icon,
.pe-state-error.is-forbidden .pe-state-title,
.pe-state-error.is-forbidden .pe-state-hint { color: var(--text-secondary); }

/* Skeleton loader: shimmering placeholder lines; honours reduced-motion. */
.pe-state-loading { align-items: stretch; gap: var(--space-3); padding: var(--space-4) 0; }
.pe-skel { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.pe-skel-line { height: 12px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--stone-100) 25%, var(--stone-200) 37%, var(--stone-100) 63%); background-size: 400% 100%; animation: pe-shimmer 1.4s ease infinite; }
@keyframes pe-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .pe-skel-line { animation: none; } }

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

/* §4.9 Provenance chip — small trust marker; one status-tone vocabulary. */
.pe-prov {
  display: inline-flex; align-items: center; gap: var(--space-1\.5);
  height: 22px; padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--stone-50);
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: 1; cursor: pointer;
  max-width: 100%;
  transition: background .12s ease, border-color .12s ease;
}
.pe-prov:hover { background: var(--stone-100); border-color: var(--stone-300); }
.pe-prov:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pe-prov .pe-prov-icon { width: 13px; height: 13px; flex: 0 0 auto; }
.pe-prov-src {
  font-weight: var(--fw-semibold); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch;
}
.pe-prov-age { white-space: nowrap; }
/* synced = green/good */
.pe-prov-synced .pe-prov-icon { color: var(--success); }
/* drift = red/bad */
.pe-prov-drift {
  background: var(--danger-50); border-color: var(--danger-50);
  color: var(--danger-700);
}
.pe-prov-drift:hover { background: var(--danger-50); border-color: var(--danger-700); }
.pe-prov-drift .pe-prov-icon, .pe-prov-drift .pe-prov-src, .pe-prov-drift .pe-prov-age {
  color: var(--danger-700);
}
/* stale / never synced = neutral-warning */
.pe-prov-stale .pe-prov-icon { color: var(--warning-700); }

/* §4.8 role-gated section — composes the existing .gated lock (styles.ts). */
.pe-rolegate { display: block; }
.pe-rolegate + .pe-rolegate { margin-top: var(--space-3); }
.pe-rolegate-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
/* The lock should read as quietly inert, never as an error. */
.pe-rolegate .gated { border: 1px dashed var(--border-default); }


/* §4.5 entity picker — composes the existing .input / .badge / status tones. */
.pe-picker { position: relative; }
.pe-picker-ico {
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.pe-picker-ico svg { width: 16px; height: 16px; }
.pe-picker-input { width: 100%; padding-left: var(--space-8); padding-right: var(--space-8); }
.pe-picker.has-value .pe-picker-input { font-weight: 500; }
.pe-picker-clear {
  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--text-muted); border-radius: var(--radius-full);
}
.pe-picker-clear:hover { background: var(--surface-sunken); color: var(--text-primary); }
.pe-picker-clear svg { width: 15px; height: 15px; }

.pe-picker-menu {
  position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto; padding: var(--space-1);
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.pe-picker-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer;
}
.pe-picker-opt.is-active { background: var(--brand-subtle); }
.pe-picker-main { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.pe-picker-label {
  font-size: var(--text-body-sm); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-picker-sec {
  font-size: var(--text-caption); color: var(--text-muted);
  font-family: var(--font-mono); white-space: nowrap;
}
.pe-picker-meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.pe-picker-type { font-size: var(--text-caption); color: var(--text-muted); }
.pe-picker-add { color: var(--brand); font-size: var(--text-body-sm); justify-content: flex-start; }
.pe-picker-add svg { width: 14px; height: 14px; flex-shrink: 0; }
.pe-picker-add-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-picker-empty {
  padding: var(--space-3); text-align: center;
  font-size: var(--text-body-sm); color: var(--text-muted);
}
.pe-picker-err { color: var(--danger); }


/* ====================================================================== *
 * §4.7 Process tracker — PE.processTracker
 * ====================================================================== */
.pe-pt { display: flex; flex-direction: column; gap: var(--space-3); }
.pe-pt-full { display: flex; flex-direction: column; gap: var(--space-3); }

/* Compact one-line summary (record headers) */
.pe-pt-line {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; text-align: left;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  cursor: pointer; color: var(--text-primary); font-size: var(--text-body-sm);
}
.pe-pt-line:hover { background: var(--surface-sunken); }
.pe-pt-line-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-pt-line-chev { width: 15px; height: 15px; color: var(--text-muted); flex: 0 0 auto; }
.pe-pt-line-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: 0 0 auto; background: var(--text-muted); }
.pe-pt-line-dot.success { background: var(--success); }
.pe-pt-line-dot.danger { background: var(--danger); }
.pe-pt-line-dot.warning { background: var(--warning); }
.pe-pt-line-dot.neutral { background: var(--border-strong, var(--border-default)); }

/* Header */
.pe-pt-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pe-pt-title { font-weight: var(--fw-semibold); color: var(--text-primary); }
.pe-pt-progress { color: var(--text-muted); font-size: var(--text-caption); margin-left: auto; }

/* Current blocker callout */
.pe-pt-blocker {
  border: 1px solid var(--border-default); border-left-width: 3px;
  border-radius: var(--radius-md); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-card);
}
.pe-pt-blocker.warning { border-left-color: var(--warning); background: var(--warning-50); }
.pe-pt-blocker.danger { border-left-color: var(--danger); background: var(--danger-50); }
.pe-pt-blocker.success { border-left-color: var(--success); }
.pe-pt-blocker-head { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--text-primary); }
.pe-pt-blocker-head i { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.pe-pt-owner-strong { font-weight: var(--fw-semibold); }
.pe-pt-actions, .pe-pt-deeplinks { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Manual-step checklist */
.pe-pt-checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.pe-pt-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--text-primary); cursor: pointer; }
.pe-pt-check input { width: 16px; height: 16px; }
.pe-pt-check.disabled { color: var(--text-muted); cursor: not-allowed; }
.pe-pt-note { color: var(--text-muted); font-size: var(--text-caption); }
.pe-pt-error { color: var(--danger-700); font-size: var(--text-caption); }

/* Step rail */
.pe-pt-steps { display: flex; flex-direction: column; gap: var(--space-1); }
.pe-pt-step { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.pe-pt-step.current { background: var(--surface-sunken); }
.pe-pt-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border-default); background: var(--surface-card);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-muted);
}
.pe-pt-marker i, .pe-pt-marker i svg { width: 13px; height: 13px; }
.pe-pt-step.done .pe-pt-marker { background: var(--success-50); border-color: var(--success); color: var(--success-700); }
.pe-pt-step.running .pe-pt-marker { background: var(--brand-subtle); border-color: var(--brand); color: var(--brand-text); }
.pe-pt-step.failed .pe-pt-marker { background: var(--danger-50); border-color: var(--danger); color: var(--danger-700); }
.pe-pt-step.awaiting .pe-pt-marker { background: var(--warning-50); border-color: var(--warning); color: var(--warning-700); }
.pe-pt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pe-pt-name { font-size: var(--text-body-sm); color: var(--text-primary); font-weight: var(--fw-semibold); }
.pe-pt-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-caption); color: var(--text-muted); }
.pe-pt-pill {
  display: inline-flex; align-items: center; padding: 1px var(--space-2);
  border-radius: var(--radius-full); border: 1px solid var(--border-default);
  background: var(--surface-card); font-size: var(--text-caption); color: var(--text-muted);
}
.pe-pt-owner { color: var(--text-muted); }

/* Open + audit */
.pe-pt-open { display: flex; }
.pe-pt-audit summary { cursor: pointer; font-size: var(--text-body-sm); color: var(--text-primary); }
.pe-pt-audit-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; font-size: var(--text-caption); border-top: 1px solid var(--border-subtle, var(--border-default)); }
.pe-pt-audit-verb { color: var(--text-primary); font-weight: var(--fw-semibold); }
.pe-pt-audit-meta { color: var(--text-muted); text-align: right; }


/* ====================================================================== *
 * PE.list -- §4.1 scannable list primitive
 * ====================================================================== */
.pe-list-toolbar { margin-bottom: var(--space-3); }
.pe-list-spacer { flex: 1 1 auto; }
.pe-list-count { font-size: var(--text-body-sm); white-space: nowrap; }
.pe-list-views { min-width: 160px; }

.pe-list-tbtn { position: relative; }
.pe-list-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* Right-aligned numeric cells from custom renderers (mono() already aligns). */
.pe-list .pe-num-cell { text-align: right; }

/* Selection + actions columns stay quiet and narrow. */
.pe-list-sel { width: 36px; text-align: center; }
.pe-list-sel input { cursor: pointer; }
.pe-list-actions { width: 44px; text-align: right; }
.pe-list-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}
/* Keep the 30px visual box but extend the clickable area to a full 44px (§21). */
.pe-list-more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.pe-list-more:hover { background: var(--surface-sunken); color: var(--text-primary); }
.pe-list-more i { width: 16px; height: 16px; }
.pe-list-row-click { cursor: pointer; }
.pe-list-row-click:hover { background: var(--surface-sunken); }
.pe-list-row-click:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Bulk action bar -- appears only with a selection. */
.pe-list-bulk {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-brand);
  background: var(--brand-subtle);
  border-radius: var(--radius-md);
}
.pe-list-bulk-count {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-right: var(--space-2);
}
.pe-list-danger { color: var(--danger); border-color: var(--danger); }

.pe-list-link {
  border: none;
  background: transparent;
  color: var(--text-link);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.pe-list-link:hover { text-decoration: underline; }
.pe-list-bulk-clear { margin-left: auto; }

/* -- Popovers (action menu / columns / filters) -- */
.pe-list-pop {
  z-index: 1000;
  min-width: 180px;
  max-width: 280px;
  max-height: 70vh;
  overflow: auto;
  padding: var(--space-1);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.pe-list-pop-title {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-2) var(--space-1);
}

.pe-list-menu { display: flex; flex-direction: column; }
.pe-list-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  text-align: left;
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pe-list-menu-item:hover { background: var(--surface-sunken); }
.pe-list-menu-item.danger { color: var(--danger); }
.pe-list-menu-item i { width: 15px; height: 15px; }
.pe-list-menu-empty { padding: var(--space-2) var(--space-3); font-size: var(--text-body-sm); }

.pe-list-cols { display: flex; flex-direction: column; }
.pe-list-col-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-body-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.pe-list-col-opt:hover { background: var(--surface-sunken); }

.pe-list-filters { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); }
.pe-list-filter-field { display: flex; flex-direction: column; gap: var(--space-1); }
.pe-list-filter-field label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.pe-list-filter-clear { align-self: flex-start; }


/* §4.2 record workspace — compact header, one collapsed process line, single-tab body. */
.pe-record { display: block; }

/* Header: identity on the left, one primary action + ⋯ on the right. */
.pe-rec-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.pe-rec-id { min-width: 0; }
.pe-rec-titlerow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pe-rec-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-h3);
  line-height: 1.2;
  margin: 0;
}
.pe-rec-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}
.pe-rec-fact { white-space: nowrap; }
.pe-rec-sep { color: var(--text-muted); }
.pe-rec-prov { display: inline-flex; align-items: center; }

.pe-rec-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ⋯ menu — a quiet popover, not a row of buttons (§0). */
.pe-rec-menu { position: relative; }
.pe-rec-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  min-width: 180px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: 40;
  display: flex;
  flex-direction: column;
}
/* The base rule's display:flex would otherwise override the [hidden] attribute the
   open/close logic toggles, leaving the menu visually open. Respect hidden. */
.pe-rec-menu-list[hidden] { display: none; }
.pe-rec-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
}
.pe-rec-menu-item:hover { background: var(--surface-sunken); }
.pe-rec-menu-item.danger { color: var(--danger); }
.pe-rec-menu-item i { width: 16px; height: 16px; }

/* Collapsed one-line process status (4.7), expands into the full tracker. */
.pe-rec-process { margin-top: var(--space-3); }
.pe-rec-process-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}
.pe-rec-process-toggle:hover { color: var(--text-primary); }
.pe-rec-process-chevron { width: 16px; height: 16px; transition: transform 0.15s ease; flex-shrink: 0; }
.pe-rec-process[data-open="true"] .pe-rec-process-chevron { transform: rotate(90deg); }
.pe-rec-process-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-rec-process-body { padding-top: var(--space-3); }

/* Tab strip — underline-style, exactly one open at a time. */
.pe-rec-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.pe-rec-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pe-rec-tab:hover { color: var(--text-primary); }
.pe-rec-tab.active { color: var(--text-primary); border-bottom-color: var(--brand); }
.pe-rec-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--radius-xs); }

.pe-rec-body { padding-top: var(--space-4); }

@media (max-width: 720px) {
  .pe-rec-header { flex-direction: column; }
  .pe-rec-actions { align-self: stretch; }
  .pe-rec-tabs { overflow-x: auto; flex-wrap: nowrap; }
}


/* §4.6 approval card — composes .card / .badge / .field / roleGate (styles.ts + primitives). */
.pe-approval { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-approval.compact { gap: var(--space-3); padding: var(--space-4); }

.pe-approval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pe-approval-head-main { min-width: 0; }
.pe-approval-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h4); }
.pe-approval-meta { font-size: var(--text-body-sm); margin-top: var(--space-1); }
.pe-approval-head-side { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* The gated rule reads as a quiet amber caution, never an error. */
.pe-approval-rule { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius-sm); background: var(--warning-50); border: 1px solid var(--border-default); }
.pe-approval-rule i { width: 16px; height: 16px; color: var(--warning-700); flex: 0 0 auto; margin-top: 2px; }
.pe-approval-rule-label { font-weight: var(--fw-semibold); color: var(--warning-700); font-size: var(--text-body-sm); }
.pe-approval-rule-detail { font-size: var(--text-body-sm); margin-top: var(--space-1); }

.pe-approval-section { display: flex; flex-direction: column; gap: var(--space-2); }
.pe-approval-section-label { font-size: var(--text-caption); font-weight: var(--fw-semibold);
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.pe-approval-reason { font-size: var(--text-body); color: var(--text-primary); white-space: pre-wrap; }

.pe-approval-fin { display: flex; flex-direction: column; }
.pe-approval-fin-row { display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-1\.5) 0; border-bottom: 1px solid var(--border-subtle); }
.pe-approval-fin-row:last-child { border-bottom: none; }
.pe-approval-fin-label { color: var(--text-secondary); font-size: var(--text-body-sm); }
.pe-approval-fin-val { font-size: var(--text-body-sm); text-align: right; }
.pe-approval-fin-hint { font-size: var(--text-caption); margin: 0 0 var(--space-1); }
.pe-approval-fin-row.tone-danger .pe-approval-fin-val { color: var(--danger-700); font-weight: var(--fw-semibold); }
.pe-approval-fin-row.tone-warning .pe-approval-fin-val { color: var(--warning-700); font-weight: var(--fw-semibold); }
.pe-approval-fin-row.tone-success .pe-approval-fin-val { color: var(--success-700); }

.pe-approval-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pe-approval-decide { display: flex; flex-direction: column; gap: var(--space-3);
  border-top: 1px solid var(--border-default); padding-top: var(--space-4); }
.pe-approval.compact .pe-approval-decide { padding-top: var(--space-3); }
.pe-approval-note-field { display: flex; flex-direction: column; gap: var(--space-1); }
.pe-approval-note { width: 100%; min-height: 56px; resize: vertical; }
.pe-approval-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

.pe-approval-decided { display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.pe-approval-decided-head { display: flex; align-items: center; gap: var(--space-1\.5); font-weight: var(--fw-semibold); }
.pe-approval-decided-head i { width: 16px; height: 16px; }
.pe-approval-decided.tone-success .pe-approval-decided-head { color: var(--success-700); }
.pe-approval-decided.tone-danger .pe-approval-decided-head { color: var(--danger-700); }
.pe-approval-decided-note { font-size: var(--text-body-sm); color: var(--text-secondary); white-space: pre-wrap; }

.pe-approval-more > summary { font-size: var(--text-body-sm); color: var(--text-secondary); }


.pe-chat { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; min-height: 0; }
.pe-chat-log { flex: 1 1 auto; min-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2); }
.pe-chat-msg { max-width: 78%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-body); line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.pe-chat-user { align-self: flex-end; background: var(--brand-subtle); color: var(--brand-text); border: var(--border-width) solid var(--brand-border); }
.pe-chat-assistant { align-self: flex-start; background: var(--surface-sunken); color: var(--text-body); border: var(--border-width) solid var(--border-default); }
.pe-chat-bubble-body { white-space: normal; }

/* Citation chips under an assistant answer. */
.pe-chat-cites { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pe-chat-cites-label { font-size: var(--text-body-sm); color: var(--text-muted); }
.pe-chat-cite { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-sm); padding: 2px var(--space-2); border-radius: var(--radius-full); border: var(--border-width) solid var(--border-default); background: var(--surface-card); color: var(--text-secondary); }
.pe-chat-cite.is-link { cursor: pointer; color: var(--accent-text); border-color: var(--accent-subtle); }
.pe-chat-cite.is-link:hover { background: var(--accent-subtle); }
.pe-chat-cite i { width: 12px; height: 12px; }

/* Composer. */
.pe-chat-composer { display: flex; gap: var(--space-2); align-items: flex-end; }
.pe-chat-input { flex: 1 1 auto; resize: vertical; min-height: 44px; padding: var(--space-3); border-radius: var(--radius-md); border: var(--border-width) solid var(--border-default); background: var(--surface-card); color: var(--text-body); font: inherit; }
.pe-chat-input:focus { outline: none; border-color: var(--border-brand); }
.pe-chat-send { flex: 0 0 auto; align-self: stretch; }
.pe-chat-hint { font-size: var(--text-body-sm); }

/* --- WS-P5-ACT --- proposal cards (propose→confirm handshake). */
.pe-proposal { align-self: flex-start; max-width: 78%; border: var(--border-width) solid var(--accent-subtle); border-left-width: 3px; border-radius: var(--radius-md); background: var(--surface-card); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.pe-proposal-saga_launch { border-left-color: var(--warning-border, var(--accent-subtle)); }
.pe-proposal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.pe-proposal-tier { font-size: var(--text-body-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-text); }
.pe-proposal-title { font-weight: 600; color: var(--text-body); }
.pe-proposal-summary { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.5; }
.pe-proposal-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }
.pe-proposal-foot .btn { font-size: var(--text-body-sm); }
.pe-proposal-done { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-sm); color: var(--success-text, var(--accent-text)); }
.pe-proposal-done i { width: 14px; height: 14px; }
.pe-proposal-muted { font-size: var(--text-body-sm); color: var(--text-muted); }
.pe-proposal-err { font-size: var(--text-body-sm); color: var(--danger-text, var(--text-muted)); }

/* Typing indicator (pending assistant turn). */
.pe-chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.pe-chat-typing span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--text-muted); opacity: 0.5; animation: pe-chat-blink 1.2s infinite ease-in-out; }
.pe-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.pe-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pe-chat-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pe-chat-typing span { animation: none; } }


/* Home stat cards double as navigation buttons. */
.pe-home-stat { text-align: left; cursor: pointer; border: 1px solid var(--border-default); font: inherit; }
.pe-home-stat:hover { border-color: var(--border-brand); }
.pe-home-stat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Error marker on a stat card — smaller than the big number, in the danger tone. */
.pe-home-stat .value.pe-home-stat-err { font-size: var(--text-body-sm); color: var(--danger); }


/* ── CRM record workspace: overview field grid, timeline, related (WS7.5) ── */
.pe-crm-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.pe-crm-field-label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}
.pe-crm-field-value { font-size: var(--text-body-sm); color: var(--text-primary); overflow-wrap: anywhere; }

.pe-crm-tl { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.pe-crm-tl-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.pe-crm-tl-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.pe-crm-tl-icon i { width: 14px; height: 14px; }
.pe-crm-tl-body { min-width: 0; flex: 1 1 auto; }
.pe-crm-tl-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-body-sm); }
.pe-crm-tl-when { margin-left: auto; font-size: var(--text-caption); }
.pe-crm-tl-content { margin-top: var(--space-1); font-size: var(--text-body-sm); color: var(--text-secondary); white-space: pre-wrap; }

.pe-crm-quickadd { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.pe-crm-quickadd-row { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.pe-crm-quickadd-grow { flex: 1 1 200px; margin: 0; }

.pe-crm-rel { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-crm-rel-label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.pe-crm-rel-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: pointer;
  text-align: left;
  font-size: var(--text-body-sm);
  color: var(--text-primary);
}
.pe-crm-rel-row + .pe-crm-rel-row { margin-top: var(--space-2); }
.pe-crm-rel-row:hover { background: var(--surface-sunken); }
.pe-crm-rel-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pe-crm-rel-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pe-crm-rel-row i { width: 14px; height: 14px; color: var(--text-muted); }


/* ── Pipeline board: one column per SPEC stage, horizontal scroll ── */
.pe-board {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: var(--space-3);
}
.pe-board-col {
  flex: 0 0 240px;
  min-width: 240px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.pe-board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-2);
}
.pe-board-count { color: var(--text-muted); font-size: var(--text-caption); font-weight: var(--fw-semibold); }
.pe-board-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.pe-board-empty { padding: var(--space-3); text-align: center; font-size: var(--text-body-sm); }
.pe-board-card {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.pe-board-card:hover { border-color: var(--border-brand); }
.pe-board-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pe-board-card-org {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-board-card-name { font-size: var(--text-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.pe-board-card-value {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}


.pe-signals-main { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pe-signal-site { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.pe-signal-site-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.pe-signal-site-head h2 { margin: 0; font-size: var(--text-title); font-weight: var(--fw-semibold); }
.pe-signal-card { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.pe-signal-score { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.pe-signal-score .pe-num { font-size: var(--text-title); font-weight: var(--fw-semibold); }
.pe-signal-score span { color: var(--text-muted); font-size: var(--text-caption); }
.pe-signal-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pe-signal-title { font-weight: var(--fw-semibold); color: var(--text-primary); }
.pe-signal-reason { color: var(--text-secondary); }
.pe-signal-facts { color: var(--text-muted); font-size: var(--text-body-sm); }
.pe-signal-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .pe-signal-card { grid-template-columns: 1fr; } .pe-signal-actions { justify-content: flex-start; } }


.pe-signals-staff { margin-top: var(--space-5); }


.pe-dialer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
.pe-dialer-confirm { grid-column: 1 / -1; }
.pe-dialer-current { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-dialer-name { font-size: var(--text-title); font-weight: var(--fw-semibold); color: var(--text-primary); }
.pe-dialer-reason { color: var(--text-secondary); }
.pe-dialer-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pe-dialer-dispositions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pe-dialer-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.pe-dialer-row { width: 100%; min-height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-default); padding: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; color: var(--text-primary); }
.pe-dialer-row small { display: block; color: var(--text-muted); margin-top: var(--space-1); }
.pe-dialer-pending-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.pe-dialer-pending { width: 100%; min-height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-default); padding: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; color: var(--text-primary); }
.pe-dialer-pending small { display: block; color: var(--text-muted); margin-top: var(--space-1); }
.pe-confirm-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.pe-confirm-values { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text-secondary); }
.pe-confirm-values span { overflow-wrap: anywhere; }
.pe-confirm-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 900px) { .pe-dialer-grid { grid-template-columns: 1fr; } .pe-confirm-item { grid-template-columns: 1fr; } .pe-confirm-actions { justify-content: flex-start; } }


.pe-outreach { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-draft-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); }
.pe-draft { display: flex; flex-direction: column; gap: var(--space-3); }
.pe-draft-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.pe-seq-create, .pe-supp-form { margin-bottom: var(--space-4); display: grid; gap: var(--space-3); }
.pe-supp-form { grid-template-columns: 160px minmax(0, 1fr) auto; align-items: end; }
.pe-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.pe-metric { font-size: var(--text-title); font-weight: var(--fw-semibold); color: var(--text-primary); margin-top: var(--space-2); }
@media (max-width: 700px) { .pe-supp-form { grid-template-columns: 1fr; } }


.pe-website { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.pe-site-form { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-site-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pe-site-status { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.pe-site-status span { color: var(--text-muted); }


.pe-seo { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-seo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-4); align-items: start; }
.pe-seo-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pe-health-row { min-height: 44px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--space-3); align-items: center; }
.pe-health-row small { display: block; color: var(--text-muted); margin-top: var(--space-1); overflow-wrap: anywhere; }
@media (max-width: 980px) { .pe-seo-grid, .pe-health-row { grid-template-columns: 1fr; } }


.pe-domain { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.pe-domain-form { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-domain-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pe-domain-status { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.pe-domain-status span { color: var(--text-muted); }


.pe-gbp { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-gbp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: var(--space-4); align-items: start; }
.pe-gbp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 980px) { .pe-gbp-grid { grid-template-columns: 1fr; } }


.pe-ads { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-ads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.pe-ads-form { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-ads-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pe-inline-note { margin-top: var(--space-3); color: var(--text-muted); }


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


.pe-attr { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-attr .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pe-attr-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-3) 0 var(--space-4); }
.pe-attr-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 72px; }
.pe-attr-stat-n { font-size: var(--text-title); font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pe-attr-stat small { color: var(--text-muted); }
.pe-attr .pe-attr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }


.pe-ww { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-ww .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pe-ww-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
.pe-ww-tab { background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); cursor: pointer; color: var(--text-muted); font: inherit; }
.pe-ww-tab.active { background: var(--surface-sunken); color: var(--text-primary); font-weight: var(--fw-semibold); }
.pe-ww-panel { padding-top: var(--space-4); }
.pe-ww-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: 0 0 var(--space-4); }
.pe-ww-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 84px; }
.pe-ww-stat-n { font-size: var(--text-title); font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pe-ww-stat small { color: var(--text-muted); }
.pe-ww-sub { font-weight: var(--fw-semibold); margin: var(--space-4) 0 var(--space-2); }
.pe-ww .pe-ww-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pe-ww-seq { margin-bottom: var(--space-4); }
.pe-ww-seq-h { margin-bottom: var(--space-2); font-weight: var(--fw-medium); }
.pe-ww-verdict { color: var(--text-muted); font-weight: var(--fw-regular); }
.pe-ww-risk { color: var(--danger); font-weight: var(--fw-semibold); }


.pe-inspect { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-inspect-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: var(--space-4); align-items: start; }
@media (max-width: 980px) { .pe-inspect-grid { grid-template-columns: 1fr; } }


.pe-sublife { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-sublife .pe-hint { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 13px; word-break: break-all; }


.pe-quoting { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-quoting-form { display: flex; flex-direction: column; gap: var(--space-3); }


.pe-reports { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-reports .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pe-reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); padding-top: var(--space-3); }
.pe-report-card { text-align: left; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; display: flex; flex-direction: column; gap: var(--space-1); }
.pe-report-card:hover { border-color: var(--accent); }
.pe-report-name { font-weight: var(--fw-semibold); }
.pe-report-cols { color: var(--text-muted); font-size: var(--text-body-sm); display: flex; align-items: center; gap: var(--space-2); }
.pe-reports-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0 var(--space-3); }
.pe-reports-title { font-weight: var(--fw-semibold); font-size: var(--text-body-lg); }
.pe-reports-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pe-reports-share { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-body-sm); }
.pe-reports-link { flex: 1; min-width: 220px; font-family: var(--font-mono, monospace); font-size: var(--text-body-sm); padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); }
.pe-reports .pe-reports-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }


.pe-copilot { height: 100%; }
.pe-copilot-card { display: flex; flex-direction: column; min-height: 520px; height: calc(100vh - 200px); }
.pe-copilot-card .card-head { flex: 0 0 auto; }
#copilot-host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: var(--space-3); }


.pe-dg { display: flex; flex-direction: column; gap: var(--space-4); }
.pe-dg .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pe-dg-list { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-4); }
.pe-dg-run { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }
.pe-dg-run-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.pe-dg-role { font-weight: var(--fw-semibold); text-transform: capitalize; }
.pe-dg-pill { font-size: var(--text-caption); padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); }
.pe-dg-delivered { color: var(--success); }
.pe-dg-empty { color: var(--text-muted); }
.pe-dg-prose { margin: var(--space-2) 0 var(--space-3); line-height: 1.55; }
.pe-dg-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-2) 0 var(--space-3); }
.pe-dg-stat { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.pe-dg-stat-n { font-size: var(--text-title); font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pe-dg-stat small { color: var(--text-muted); }
.pe-dg-sub { font-weight: var(--fw-semibold); margin: var(--space-3) 0 var(--space-2); }
.pe-dg .pe-dg-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pe-dg-risk { color: var(--danger); font-weight: var(--fw-semibold); }
.pe-dg-up { color: var(--success); }
.pe-dg-down { color: var(--danger); }


/* ── Dedup review queue: side-by-side cluster compare ── */
.pe-dd-intro { margin-bottom: var(--space-4); font-size: var(--text-body-sm); }
.pe-dd-cluster { margin-bottom: var(--space-4); }
.pe-dd-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pe-dd-title { font-weight: var(--fw-semibold); font-size: var(--text-body); }
.pe-dd-reasons { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-2); }
.pe-dd-rationale { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-body-sm); }
.pe-dd-rationale i { width: 14px; height: 14px; flex: 0 0 14px; }
.pe-dd-grid { margin-top: var(--space-3); }
.pe-dd-field-col { width: 140px; }
.pe-dd-field { color: var(--text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.03em; }
.pe-dd-differs { background: var(--warning-50); font-weight: var(--fw-medium); }
.pe-dd-survivor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  /* Consequential control — full 44px hit target (§21). */
  min-height: 44px;
}
.pe-dd-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* ── Lead links (lead ↔ contact/org association review) ── */
.pe-lc-section { margin-top: var(--space-6); }
.pe-lc-title { font-size: var(--text-h3); font-weight: var(--fw-semibold); margin: 0 0 var(--space-1); }
.pe-lc-intro { margin-bottom: var(--space-4); font-size: var(--text-body-sm); }
.pe-lc-card { margin-bottom: var(--space-4); }
.pe-lc-rec { margin-top: var(--space-1); font-size: var(--text-body-sm); }


/* ── Import wizard ── */
.pe-imp-toolbar { margin-bottom: var(--space-3); }
.pe-imp-seg { margin: var(--space-3) 0 var(--space-4); }
.pe-imp-run-row { cursor: pointer; }
.pe-imp-run-row:hover { background: var(--surface-sunken); }
.pe-imp-run-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pe-imp-map-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 180px 200px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) 0;
}
.pe-imp-map-col {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-imp-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.pe-imp-error { color: var(--danger-700); font-size: var(--text-body-sm); }
@media (max-width: 720px) {
  .pe-imp-map-row { grid-template-columns: 1fr; }
}


/* ── Saga run console ── */
.pe-wf-launchcard { margin-bottom: var(--space-4); }
.pe-wf-launch { margin-top: var(--space-2); }
.pe-wf-launch .pe-collapse-body { display: flex; flex-direction: column; gap: var(--space-2); }


.settings-p2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.pe-setting-lines { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.pe-setting-lines div { display: flex; flex-direction: column; gap: var(--space-1); }
.pe-setting-lines b { color: var(--text-primary); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.pe-invite-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: var(--space-4) 0 var(--space-2); }
#settings-invite-result { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); max-width: 32rem; }
.pe-invites-head { font-weight: var(--fw-semibold); color: var(--text-primary); margin: var(--space-4) 0 var(--space-2); }