/* ============================================================================
 * PROSPECTOR portal — WOW SSR stylesheet (W5-G, v0.2.0).
 * "The brief was already written." Dark-mode-first, Linear-grade restraint.
 *
 * 3-layer design tokens:  primitive (--p-*)  →  semantic (--color-* / --band-*
 * / --gate-* / --chip-*)  →  component (used in rules below). The per-tenant
 * brand accent arrives as --c-primary from a single nonce'd <style> (theme.ts);
 * everything else is here. Strict CSP-safe: no @import, no url(), no inline
 * styles — status magnitude (VPQS ring, SHAP bars) is carried by SVG geometry
 * ATTRIBUTES, colour by [data-*] selectors. WCAG-AA contrast on the dark base.
 * ========================================================================== */

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

/* ---- themes ------------------------------------------------------------- */
/* LIGHT is the default (`:root`); DARK is opt-in via <html data-theme="dark">
 * (the banner theme-switcher, a fast-follow, sets that). Only the primitive
 * ramp + accent + shadows + bg-glow change per theme; the semantic --color-*
 * layer + every component rule below is theme-agnostic. */
:root {
  /* layer 1 — LIGHT primitives (default) */
  --p-bg:            oklch(0.985 0.003 255);
  --p-surface-1:     oklch(1 0 0);
  --p-surface-2:     oklch(0.975 0.004 255);
  --p-surface-inset: oklch(0.955 0.006 255);
  --p-border:        oklch(0.905 0.006 255);
  --p-border-strong: oklch(0.80 0.012 255);
  --p-text:          oklch(0.27 0.022 260);
  --p-text-muted:    oklch(0.46 0.02 260);
  --p-text-faint:    oklch(0.52 0.018 260); /* >=4.5:1 on white (AA) */

  /* status hues are used as TEXT (incl. over a 15% tint) — darkened for
   * on-light AA (each clears 4.5:1 over white + the raised surface). */
  --p-green:  oklch(0.50 0.15 150);
  --p-amber:  oklch(0.52 0.12 72);
  --p-red:    oklch(0.50 0.19 27);
  --p-blue:   oklch(0.47 0.16 252);

  /* layer 2 — semantic (theme-agnostic mapping) */
  --color-bg:            var(--p-bg);
  --color-surface:       var(--p-surface-1);
  --color-surface-raised:var(--p-surface-2);
  --color-surface-inset: var(--p-surface-inset);
  --color-border:        var(--p-border);
  --color-border-strong: var(--p-border-strong);
  --color-text:          var(--p-text);
  --color-text-muted:    var(--p-text-muted);
  --color-text-faint:    var(--p-text-faint);
  /* On LIGHT, darken a too-light brand toward ink for TEXT/icon contrast
   * (the symmetric counterpart of the dark-theme lift): a dark navy is
   * unchanged (~0.27L), a light teal #0a9fb5 lands ~0.47L (clears AA 4.5:1).
   * The raw brand stays as --color-accent-solid for fills. */
  --color-accent: color-mix(
    in oklch,
    var(--c-primary, oklch(0.50 0.13 255)) 52%,
    oklch(0.27 0.04 256)
  );
  --color-accent-solid:  var(--c-primary, oklch(0.50 0.13 255));
  --color-accent-strong: var(--c-primary-dark, oklch(0.42 0.12 255));
  --color-accent-ink:    oklch(0.99 0 0);
  --color-focus: color-mix(
    in oklch,
    var(--c-primary, oklch(0.50 0.13 255)) 52%,
    oklch(0.27 0.04 256)
  );

  --band-high:   var(--p-green);
  --band-med:    var(--p-amber);
  --band-low:    var(--p-text-faint);
  --gate-pass:     var(--p-green);
  --gate-review:   var(--p-amber);
  --gate-blocked:  var(--p-red);
  --gate-research: var(--p-blue);
  --chip-positive: var(--p-green);
  --chip-negative: var(--p-red);
  --chip-process:  var(--p-blue);

  /* compatibility aliases for legacy class rules (admin/login/message) */
  --c-muted: var(--color-text-muted);
  --c-line:  var(--color-border);
  --c-bg:    var(--color-bg);
  --c-surface-2: var(--color-surface-raised);

  --radius:    11px;
  --radius-sm: 7px;
  --pill:      999px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo,
    Consolas, monospace;
  --shadow-1: 0 1px 2px oklch(0.3 0.02 260 / 0.08);
  --shadow-2: 0 14px 40px oklch(0.35 0.03 260 / 0.16);
  --bg-glow: color-mix(in oklch, var(--color-accent) 5%, transparent);

  /* ---- design token scales (adopted from CLAUDE DESIGN) ---- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
  --fs-display: 1.8rem; --fs-h1: 1.5rem; --fs-h2: 1.1rem; --fs-h3: .72rem;
  --fs-body: 1rem; --fs-sm: .9rem; --fs-cap: .85rem; --fs-micro: .78rem; --fs-badge: .75rem;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700;
  --lh-body: 1.5; --lh-tight: 1.2;
  --maxw-app: 1100px; --maxw-card: 430px; --radius-card: 14px;
  --focus-offset: 2px;
  /* gold accent, scoped to where it has AA contrast (the navy header chrome) */
  --c-accent-gold: var(--c-accent, oklch(0.78 0.13 85));

  /* ---- AA semantic triads (light = the design's pre-tuned hex) ---- */
  --success-fill:#e3f4e9; --success-line:#b6dcc3; --success-ink:#1c6b3a;
  --warning-fill:#fdf3da; --warning-line:#ecd9a6; --warning-ink:#87600c;
  --danger-fill:#fdecea;  --danger-line:#f5c6c2;  --danger-ink:#8a1f17;
  --info-fill:#e7eef9;    --info-line:#c8d6ee;    --info-ink:#25457e;
  --neutral-fill:#eceff0; --neutral-line:var(--color-border); --neutral-ink:var(--color-text-muted);
}

/* DARK theme (opt-in) — the W5-G dark OKLCH ramp + the on-dark accent lift. */
:root[data-theme="dark"] {
  --p-bg:            oklch(0.17 0.013 256);
  --p-surface-1:     oklch(0.205 0.015 256);
  --p-surface-2:     oklch(0.245 0.016 256);
  --p-surface-inset: oklch(0.285 0.016 256);
  --p-border:        oklch(0.33 0.014 256);
  --p-border-strong: oklch(0.44 0.018 256);
  --p-text:          oklch(0.97 0.004 256);
  --p-text-muted:    oklch(0.745 0.012 256);
  --p-text-faint:    oklch(0.60 0.012 256);

  --p-green:  oklch(0.80 0.15 159);
  --p-amber:  oklch(0.84 0.135 85);
  --p-red:    oklch(0.72 0.17 25);
  --p-blue:   oklch(0.76 0.12 238);

  /* lift the (possibly dark) brand toward a legible on-dark tone for text. */
  --color-accent: color-mix(
    in oklch,
    var(--c-primary, oklch(0.72 0.12 215)) 48%,
    oklch(0.93 0.045 250)
  );
  --color-accent-solid:  var(--c-primary, oklch(0.55 0.12 250));
  --color-accent-strong: var(--c-primary-dark, oklch(0.46 0.12 250));
  --color-focus:         var(--c-accent, oklch(0.84 0.135 85));
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 16px 48px oklch(0 0 0 / 0.45);
  --bg-glow: oklch(0.27 0.05 235 / 0.30);

  /* AA triads — dark: a subtle dark tint fill + the bright hue as ink */
  --success-fill: color-mix(in oklch, var(--p-green) 16%, var(--p-surface-1));
  --success-line: color-mix(in oklch, var(--p-green) 34%, transparent);
  --success-ink:  var(--p-green);
  --warning-fill: color-mix(in oklch, var(--p-amber) 16%, var(--p-surface-1));
  --warning-line: color-mix(in oklch, var(--p-amber) 34%, transparent);
  --warning-ink:  var(--p-amber);
  --danger-fill:  color-mix(in oklch, var(--p-red) 16%, var(--p-surface-1));
  --danger-line:  color-mix(in oklch, var(--p-red) 34%, transparent);
  --danger-ink:   var(--p-red);
  --info-fill:    color-mix(in oklch, var(--p-blue) 16%, var(--p-surface-1));
  --info-line:    color-mix(in oklch, var(--p-blue) 34%, transparent);
  --info-ink:     var(--p-blue);
  --neutral-fill: var(--color-surface-inset);
  --neutral-line: var(--color-border);
  --neutral-ink:  var(--color-text-muted);
}

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--color-text);
  background:
    radial-gradient(1200px 600px at 78% -10%, var(--bg-glow), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}
/* gold focus only on the navy header chrome, where gold clears AA (3:1) */
.app-header a:focus-visible, .app-header button:focus-visible,
.app-header [tabindex]:focus-visible { outline-color: var(--c-accent-gold); }

h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
h2 { font-size: var(--fs-h2); letter-spacing: -0.005em; margin: var(--space-6) 0 var(--space-3); }
h3 {
  font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-faint); margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--fw-bold);
}

.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;
}
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-accent-solid); color: var(--color-accent-ink);
  padding: .5rem 1rem; z-index: 20; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---- buttons & fields --------------------------------------------------- */
.btn-primary, .btn-secondary {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-sm); padding: .58rem 1.05rem;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.btn-primary { background: var(--color-accent-solid); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-strong); text-decoration: none; }
.btn-secondary {
  background: var(--color-surface-raised); color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { border-color: var(--color-accent); text-decoration: none; }
button[disabled], [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.field label { font-weight: 600; font-size: .85rem; color: var(--color-text-muted); }
/* "Remember me" — row checkbox; brand-tinted tick, CSP-safe (no inline style). */
.field-check {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4);
}
.field-check input {
  width: 16px; height: 16px; flex: none; accent-color: var(--color-accent-solid);
}
.field-check label {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-muted);
  cursor: pointer;
}
.field input, .field select {
  font: inherit; padding: .55rem .65rem; color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-inset);
}
.form-error {
  background: color-mix(in oklch, var(--gate-blocked) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--gate-blocked) 40%, transparent);
  color: var(--gate-blocked); padding: .6rem .8rem; border-radius: var(--radius-sm);
}

/* ---- login -------------------------------------------------------------- */
.login-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 1.5rem;
  background:
    radial-gradient(900px 500px at 50% -20%,
      color-mix(in oklch, var(--color-accent) 30%, transparent), transparent 65%),
    var(--color-bg);
}
.login-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 2.1rem; width: 100%; max-width: 430px;
  box-shadow: var(--shadow-2);
}
.login-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.login-logo {
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--color-accent-solid); color: var(--color-accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  box-shadow: var(--shadow-1);
}
.login-team { font-weight: 700; font-size: 1.05rem; }
.login-subcopy { color: var(--color-text-muted); margin: .2rem 0 0; }
.login-form { margin-top: 1.2rem; }
.login-form .btn-primary { width: 100%; }
.login-links { display: flex; gap: 1.25rem; margin-top: 1rem; font-size: .9rem; }
.twofa-note { color: var(--color-text-faint); font-size: .82rem; margin-top: 1rem; }
.powered-by-mark {
  color: var(--color-text-faint); font-size: .78rem; margin-top: 1.4rem;
  text-align: center;
}

/* ---- app shell ---------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
/* solid tenant-navy chrome (the design's brand-forward header); no sticky/blur */
.app-header {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  background: color-mix(in oklch, var(--color-accent-strong) 88%, black);
  color: #fff;
  border-bottom: 1px solid color-mix(in oklch, black 30%, var(--color-accent-strong));
  padding: var(--space-3) var(--space-6);
}
.brand-mark { display: flex; align-items: center; gap: var(--space-2); }
.brand-logo {
  width: 34px; height: 34px; border-radius: 6px;
  background: rgba(255, 255, 255, .18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
}
.brand-name { font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.app-nav { flex: 1; }
.app-nav ul {
  list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0;
  flex-wrap: wrap;
}
.app-nav a {
  color: rgba(255, 255, 255, .78); padding: var(--space-2) var(--space-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.app-nav a:hover { color: #fff; text-decoration: none; }
/* active nav = 3px gold underline (the design's signature; gold on navy = AA) */
.app-nav a[aria-current="page"] {
  color: #fff; box-shadow: inset 0 -3px 0 var(--c-accent-gold);
}
.app-user { display: flex; align-items: center; gap: var(--space-3); }

/* RoleBadge — initials avatar + name + role pill, colour-coded per LKE role.
 * Dark ink on the bright role hues (keeps the design's vivid colours + clears
 * AA 4.5:1); white only on the dark SYSADMIN purple. Base sets a neutral
 * fallback so an unmapped future role degrades visibly, not invisibly. */
.role-badge { display: flex; align-items: center; gap: var(--space-2); }
.role-avatar {
  width: 32px; height: 32px; border-radius: var(--pill); flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; color: #11181c;
  background: var(--neutral-ink); border: 1px solid rgba(255, 255, 255, .35);
}
/* "Sign out" — far-right of the user cluster (DESIGN), styled as a chrome link */
.app-user .sign-out {
  color: rgba(255, 255, 255, .82); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); white-space: nowrap;
}
.app-user .sign-out:hover { color: #fff; text-decoration: none; }
.role-pill {
  border-radius: var(--pill); padding: .12rem .6rem; font-size: .68rem;
  font-weight: 700; letter-spacing: .04em; color: #11181c;
  background: var(--neutral-ink);
}
.role-avatar[data-role="REPRESENTATIVE"], .role-pill[data-role="REPRESENTATIVE"] { background: #1f9d6b; }
.role-avatar[data-role="EXECUTIVE"], .role-pill[data-role="EXECUTIVE"] { background: #d9a93a; }
.role-avatar[data-role="SYSADMIN"], .role-pill[data-role="SYSADMIN"] { background: #7d62cf; color: #fff; }
.role-avatar[data-role="COMPLIANCE"], .role-pill[data-role="COMPLIANCE"] { background: #cf5b4e; }
.role-avatar[data-role="MANAGING_PARTNER"], .role-pill[data-role="MANAGING_PARTNER"] { background: #3a93d6; }
.role-avatar[data-role="DELEGATE"], .role-pill[data-role="DELEGATE"] { background: #7888a6; }
.role-avatar[data-role="OPERATOR"], .role-pill[data-role="OPERATOR"] { background: #dd7a33; }

/* Canonical page-content container (inc-7 item 3): a single wrapper with the
 * consistent app max-width + gutters. `.app-main` (the AppShell <main>) IS the
 * page-content container; `.page-content` is the reusable alias so any future
 * SSR wrapper gets identical gutters from one source of truth. Same
 * declarations → byte-identical render + zero visual change. The `.login-screen`
 * / `.message-page` full-viewport shells are deliberately NOT folded in (they
 * own their own centered chrome and render outside the AppShell). */
.page-content,
.app-main { flex: 1; width: 100%; max-width: var(--maxw-app); margin: 0 auto; padding: var(--space-6) var(--space-5); }
/* footer mirrors the header chrome (RA: "colour the footer like the banner") —
 * same solid tenant-dark fill so the navy chrome bookends the light content.
 * Both text tiers (.92 + the muted .80 tagline) were contrast-checked against
 * the DARKEST brand fill (_default teal #067687) and clear AA 4.5:1 there. */
.app-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: var(--space-4) var(--space-6); font-size: .82rem;
  background: color-mix(in oklch, var(--color-accent-strong) 88%, black);
  color: rgba(255, 255, 255, .92);
  border-top: 1px solid color-mix(in oklch, black 30%, var(--color-accent-strong));
}
.app-footer .powered-by { color: rgba(255, 255, 255, .80); } /* ~5:1 on teal */

/* ---- shared content ----------------------------------------------------- */
.view-intro { color: var(--color-text-muted); max-width: 70ch; }
.empty-state {
  color: var(--color-text-muted); background: var(--color-surface);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
/* "planned for MVP" admin placeholder panel (AdminPlaceholderPage) */
.admin-planned {
  margin-top: var(--space-5); max-width: 72ch;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-5) var(--space-6);
}
.admin-planned__badge {
  display: inline-block; margin: 0 0 var(--space-3);
  background: var(--warning-fill); color: var(--warning-ink);
  border-radius: var(--pill); padding: .15rem .7rem;
  font-size: var(--fs-badge); font-weight: 700; letter-spacing: .02em;
}
.admin-planned__h {
  font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-faint); font-weight: var(--fw-bold);
  margin: var(--space-2) 0 var(--space-2);
}
.admin-planned__list { margin: var(--space-2) 0; padding-left: 1.2rem; color: var(--color-text); }
.admin-planned__list li { margin: .3rem 0; }
.admin-planned__meta {
  margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-micro);
}
/* mono type-role (was referenced but undefined) */
.t-mono { font-family: var(--font-mono); }

/* ---- OPERATOR workspace (ADR-0019) ------------------------------------- */
.operator-form { max-width: 560px; margin: var(--space-4) 0 var(--space-6); }
.operator-form textarea,
.field textarea {
  font: inherit; padding: .55rem .65rem; color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-inset); resize: vertical; width: 100%;
}
.assign-state {
  display: inline-block; border-radius: var(--pill); padding: .1rem .55rem;
  font-size: .72rem; font-weight: 700;
}
.assign-state[data-state="ASSIGNED"] {
  background: var(--success-fill); color: var(--success-ink);
}
.assign-state[data-state="UNASSIGNED"] {
  background: var(--neutral-fill); color: var(--neutral-ink);
}
.curate-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.btn-xs { padding: .25rem .55rem; font-size: .78rem; }
a.btn-xs { display: inline-block; text-decoration: none; }
/* allocate workbench */
.rec-panel { margin: var(--space-5) 0; }
.rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rec-row {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
}
.rec-rank {
  font-weight: 700; font-size: var(--fs-sm); color: var(--color-text-muted);
  min-width: 2.5rem;
}
.rec-name { font-weight: 600; min-width: 9rem; }
.rec-bar { flex: 1; min-width: 90px; max-width: 160px; display: inline-flex; }
.rec-reason { color: var(--color-text-muted); font-size: var(--fs-sm); flex: 1; min-width: 8rem; }
.rec-load { color: var(--color-text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.rec-row form { margin: 0 0 0 auto; }
.h-icon { display: inline-flex; vertical-align: -2px; color: var(--color-text-muted); }
.h-icon svg { width: 16px; height: 16px; }
.data-table tr[aria-current="true"] { background: var(--color-surface-inset); }
.filter-bar {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: .9rem 1rem; margin: 1rem 0;
}
.filter-bar .field { margin-bottom: 0; }
.success-banner {
  background: color-mix(in oklch, var(--gate-pass) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--gate-pass) 38%, transparent);
  color: var(--gate-pass); padding: .6rem .85rem; border-radius: var(--radius-sm);
  margin: 1rem 0; display: flex; align-items: center; gap: .5rem;
}
/* warn tone (e.g. DNC already-active — not an error, but not a fresh success) */
.success-banner[data-tone="warn"] {
  background: var(--warning-fill); border-color: var(--warning-line);
  color: var(--warning-ink);
}

/* SYSADMIN suppression tab — side-by-side DNC add/remove forms */
.admin-forms {
  display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start;
}
.admin-forms .operator-form { flex: 1 1 280px; margin-top: var(--space-3); }
.admin-forms h3 { margin: 0 0 var(--space-2); font-size: 1rem; }

/* SYSADMIN audit log */
.audit-outcome {
  display: inline-block; border-radius: var(--pill); padding: .1rem .5rem;
  font-size: .72rem; font-weight: 700;
  background: var(--neutral-fill); color: var(--neutral-ink);
}
.audit-outcome[data-outcome="success"] {
  background: var(--success-fill); color: var(--success-ink);
}
.audit-outcome[data-outcome="denied"],
.audit-outcome[data-outcome="failure"],
.audit-outcome[data-outcome="error"] {
  background: var(--danger-fill); color: var(--danger-ink);
}
.audit-detail {
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-muted); font-size: var(--fs-sm);
}
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-4);
}
.pager-pos, .pager-end {
  color: var(--color-text-muted); font-size: var(--fs-sm);
}

/* SYSADMIN Users / Tenants / System tabs */
.status-pill {
  display: inline-block; border-radius: var(--pill); padding: .1rem .5rem;
  font-size: .72rem; font-weight: 700;
  background: var(--neutral-fill); color: var(--neutral-ink);
}
.status-pill[data-status="active"], .status-pill[data-status="healthy"],
.status-pill[data-status="green"] {
  background: var(--success-fill); color: var(--success-ink);
}
.status-pill[data-status="suspended"], .status-pill[data-status="degraded"],
.status-pill[data-status="deprovisioned"], .status-pill[data-status="amber"] {
  background: var(--warning-fill); color: var(--warning-ink);
}
.status-pill[data-status="down"], .status-pill[data-status="red"],
.status-pill[data-status="failed"], .status-pill[data-status="unreachable"] {
  background: var(--danger-fill); color: var(--danger-ink);
}
.system-rollup { margin: var(--space-2) 0 var(--space-4); }

/* ===========================================================================
 * SYSTEM CONSOLE — the SYSADMIN ops "pulse". Status colour is carried by
 * [data-status] / [data-light]; SVG geometry carries magnitude (CSP-safe).
 * ======================================================================== */

/* shared status → colour (dot + tier roll-up + verdict + gauge + fleet bar) */
.status-dot {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  flex: none; background: var(--neutral-line);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--neutral-line) 22%, transparent);
}
.status-dot[data-status="healthy"], .status-dot[data-status="green"] {
  background: var(--success-ink);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--success-ink) 20%, transparent);
}
.status-dot[data-status="degraded"], .status-dot[data-status="amber"] {
  background: var(--warning-ink);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning-ink) 20%, transparent);
}
.status-dot[data-status="down"], .status-dot[data-status="red"] {
  background: var(--danger-ink);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger-ink) 22%, transparent);
}
.status-dot[data-status="unknown"] { background: var(--info-ink); box-shadow: none; }
.status-dot[data-status="disabled"] { background: var(--neutral-line); box-shadow: none; }

/* view toggle (Cards | List) */
.seg-toggle {
  display: inline-flex; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.seg-toggle a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .7rem; font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text-muted); text-decoration: none;
}
.seg-toggle a + a { border-left: 1px solid var(--color-border); }
.seg-toggle a[aria-current="page"] {
  background: var(--color-accent); color: var(--color-accent-ink);
}
.seg-toggle svg { width: .9rem; height: .9rem; }

/* hero "System Pulse" */
.sys-hero {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5); margin-bottom: var(--space-5);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--bg-glow), transparent 55%),
    var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}
.sys-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.sys-hero__verdict {
  margin: 0; font-size: var(--fs-h2); font-weight: 700; color: var(--color-text);
}
.sys-hero__verdict[data-light="green"] { color: var(--success-ink); }
.sys-hero__verdict[data-light="amber"] { color: var(--warning-ink); }
.sys-hero__verdict[data-light="red"] { color: var(--danger-ink); }
.sys-legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .15rem 0 0;
  padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-muted);
}
.sys-legend li { display: flex; align-items: center; gap: .4rem; }
.sys-legend b { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* health gauge (SVG; colour by data-light) */
.health-gauge { flex: none; }
.health-gauge__track { fill: none; stroke: var(--color-surface-inset); }
.health-gauge__arc { fill: none; stroke: var(--neutral-line); }
.health-gauge[data-light="green"] .health-gauge__arc { stroke: var(--success-ink); }
.health-gauge[data-light="amber"] .health-gauge__arc { stroke: var(--warning-ink); }
.health-gauge[data-light="red"] .health-gauge__arc { stroke: var(--danger-ink); }
.health-gauge__num { fill: var(--color-text); font-weight: 800; }
.health-gauge__den { fill: var(--color-text-muted); }

/* fleet bar (clipped pill of flush segments) */
.fleet-bar {
  width: 100%; height: 10px; display: block; border-radius: var(--pill);
  overflow: hidden; background: var(--color-surface-inset);
}
.fleet-bar__seg[data-status="healthy"] { fill: var(--success-ink); }
.fleet-bar__seg[data-status="degraded"] { fill: var(--warning-ink); }
.fleet-bar__seg[data-status="down"] { fill: var(--danger-ink); }
.fleet-bar__seg[data-status="unknown"] { fill: var(--info-ink); }
.fleet-bar__seg[data-status="disabled"] { fill: var(--neutral-line); }

/* tier sections */
.sys-tier { margin: var(--space-6) 0; }
.sys-tier__head { display: flex; align-items: center; gap: .55rem; margin-bottom: var(--space-3); }
.sys-tier__head h2 { margin: 0; font-size: var(--fs-h2); }
.sys-tier__icon { display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--color-text-muted); }
.sys-tier__icon svg { width: 100%; height: 100%; }
.sys-tier__roll {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* compact, uniform component cards */
.sys-cards {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.sys-card {
  display: flex; flex-direction: column; gap: .5rem; min-width: 0;
  padding: var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-border); border-left: 3px solid var(--neutral-line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.sys-card[data-status="healthy"] { border-left-color: var(--success-ink); }
.sys-card[data-status="degraded"] { border-left-color: var(--warning-ink); }
.sys-card[data-status="down"] { border-left-color: var(--danger-ink); }
.sys-card[data-status="unknown"] { border-left-color: var(--info-ink); }
.sys-card[data-status="disabled"] { border-left-color: var(--neutral-line); }
.sys-card__top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sys-card__name {
  flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.25;
}
.sys-card__sub {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: -.15rem;
}
.sys-card__host {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .7rem;
  color: var(--color-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-card__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; margin: 0;
}
.sys-card__meta > div { display: flex; flex-direction: column; min-width: 0; }
.sys-card__meta dt {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-faint);
}
.sys-card__meta dd {
  margin: 0; font-size: .84rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-card__reason {
  margin: 0; font-size: .76rem; color: var(--warning-ink);
  background: var(--warning-fill); border-radius: var(--radius-sm);
  padding: .3rem .5rem;
}

/* gated lifecycle controls (disabled — security-reviewed track) */
.ops-controls {
  display: flex; gap: .3rem; margin-top: auto; padding-top: .55rem;
  border-top: 1px dashed var(--color-border);
}
.ops-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); color: var(--color-text-faint);
}
.ops-btn[data-disabled] { opacity: .42; cursor: not-allowed; }
.ops-btn svg { width: .92rem; height: .92rem; }

/* list view tweaks */
.sys-list .sys-card__name { font-size: .9rem; }
.sys-list .ops-controls { border-top: none; margin: 0; padding: 0; }

/* honesty rail */
.sys-rail {
  display: flex; align-items: flex-start; gap: .55rem; margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4); background: var(--color-surface-inset);
  border-radius: var(--radius); font-size: var(--fs-sm); color: var(--color-text-muted);
  line-height: 1.5;
}
.sys-rail strong { color: var(--color-text); }
.sys-rail__lock { display: inline-flex; width: 1rem; height: 1rem; flex: none; margin-top: .15rem; }
.sys-rail__lock svg { width: 100%; height: 100%; }

.tenant-card { margin: var(--space-4) 0; }
.tenant-card h2 { margin-bottom: var(--space-2); }
.team-list { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.team-name { font-weight: 600; }
.subteam-list {
  margin: .2rem 0 var(--space-2); padding-left: var(--space-4);
  color: var(--color-text-muted);
}

/* Bare `.gate` pill (the review-queue table's raw gate-value chip; LIVE — see
 * AdminReviewQueuePage). inc-7 item 5: the co-declared bare `.band` /
 * `.status` triads were TRUE legacy duplicates — rendered NOWHERE in the app
 * (the live band pill is `.lead-card[data-band]` / the VPQS ring; the live
 * status pill is `.status-pill[data-status]`), so they are retired here.
 * `.gate` is NOT a duplicate (no other selector renders the raw gate value in
 * a table cell), so it stays — appearance byte-identical. */
.gate {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: var(--pill);
  padding: .12rem .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
/* soft semantic fill + accessible ink (the design's AA-tuned triads) */
.gate[data-gate="PASS"]            { background: var(--success-fill); color: var(--success-ink); }
.gate[data-gate="REVIEW_REQUIRED"] { background: var(--warning-fill); color: var(--warning-ink); }
.gate[data-gate="BLOCKED"]         { background: var(--danger-fill);  color: var(--danger-ink); }
.gate[data-gate="RESEARCH_ONLY"]   { background: var(--info-fill);    color: var(--info-ink); }

/* ============================ WOW: lead stream ============================ */
.stream-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
}
.stream-head__right { display: inline-flex; align-items: center; gap: var(--space-3); }
.stream-count { color: var(--color-text-faint); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* header "Refresh" link — styled like a seg-toggle anchor (icon + label) */
.leads-refresh {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .7rem; font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.leads-refresh:hover {
  border-color: var(--color-accent); color: var(--color-text); text-decoration: none;
}
.leads-refresh svg { width: .9rem; height: .9rem; }

/* leads pager (SSR/PRG) — per-page selector + page indicator + prev/next */
.leads-pager {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.leads-pager__size {
  display: inline-flex; align-items: center; gap: var(--space-2); margin: 0;
}
.leads-pager__size label {
  font-weight: 600; font-size: .85rem; color: var(--color-text-muted);
}
.leads-pager__size select {
  font: inherit; padding: .3rem .5rem; color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-inset);
}
.leads-pager__status {
  color: var(--color-text-faint); font-size: .85rem; font-variant-numeric: tabular-nums;
}
.leads-pager__nav { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.leads-pager__nav a { display: inline-flex; align-items: center; gap: .3rem; }
.leads-pager__nav svg { width: .85rem; height: .85rem; }

/* lead cards (card view of the vetted-lead stream — priority-banded, click-through) */
.lead-cards {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
  /* Uniform card height: every row equalises to the tallest card (the Yeager
     standard) so cards never stagger regardless of content length. */
  grid-auto-rows: 1fr;
}
.lead-card {
  display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0;
  flex: 1 1 auto; /* fill the (equal-height) wrap so all cards match */
  /* Fixed floor = the Yeager standard, so cards are the SAME height across
     ALL tabs (New/Working/Won/Lost) — not just equalised within one tab
     (grid-auto-rows:1fr only equalises the current view). Tune if needed. */
  min-height: 11.5rem;
  position: relative; /* anchor the top-right company label */
  padding: 1.4rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-left: 3px solid var(--neutral-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.lead-card[data-band="HIGH"] { border-left-color: var(--band-high); }
.lead-card[data-band="MED"] { border-left-color: var(--band-med); }
.lead-card[data-band="LOW"] { border-left-color: var(--band-low); }
.lead-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-2),
    0 0 0 1px color-mix(in oklch, var(--color-accent) 28%, transparent);
  transform: translateY(-3px);
}
.lead-card:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: var(--focus-offset);
}
.lead-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.lead-card__id { display: flex; flex-direction: row; align-items: center; gap: .6rem; }
.lead-card__id-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.lead-card__name {
  font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  letter-spacing: -.01em; color: var(--color-text);
}
.lead-card:hover .lead-card__name { color: var(--color-accent); }
.lead-card__seg { font-size: var(--fs-sm); color: var(--color-text-muted); }
.lead-card__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lead-card__why {
  margin: 0; font-size: .8rem; line-height: 1.45; color: var(--color-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- ProspectAvatar (Phase-1) — captured photo, or coloured initials chip ---- */
.lead-avatar {
  flex: none; border-radius: 50%; object-fit: cover; overflow: hidden;
  background: var(--neutral-ink, #b8c2cc);
  border: 1px solid rgba(0, 0, 0, .12);
}
.lead-avatar--md { width: 44px; height: 44px; }
.lead-avatar--sm { width: 28px; height: 28px; }
.lead-avatar--lg { width: 72px; height: 72px; }
.lead-avatar--lg.lead-avatar--initials { font-size: 1.5rem; }
/* --- Dossier click-to-enlarge (zero-JS :target lightbox) -------------------- */
.lead-avatar-zoom { display: inline-block; line-height: 0; border-radius: 50%; cursor: zoom-in; }
.lead-avatar-zoom:focus-visible { outline: 2px solid var(--focus, #3b82f6); outline-offset: 3px; }
.avatar-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center; padding: clamp(16px, 5vw, 48px);
}
.avatar-lightbox:target { display: flex; }
.avatar-lightbox__backdrop {
  position: absolute; inset: 0; background: rgba(3, 7, 18, .78);
  cursor: zoom-out; backdrop-filter: blur(2px);
}
.avatar-lightbox__body {
  position: relative; z-index: 1; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.avatar-lightbox__img {
  display: block; width: auto; height: auto;
  max-width: min(90vw, 440px); max-height: 82vh;
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  background: #fff;
}
.avatar-lightbox__cap {
  color: #f8fafc; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.avatar-lightbox__close {
  position: absolute; top: -14px; right: -14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #0f172a; font-size: 1.4rem; line-height: 1;
  text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.avatar-lightbox__close:focus-visible { outline: 2px solid var(--focus, #3b82f6); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .avatar-lightbox:target .avatar-lightbox__body { animation: avatar-pop .16s ease-out; }
  @keyframes avatar-pop { from { transform: scale(.92); opacity: .4; } to { transform: scale(1); opacity: 1; } }
}
.lead-avatar--initials {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #11181c; letter-spacing: .01em;
  /* a stable, name-independent tint (kept subtle so the photo is the accent) */
  background: linear-gradient(135deg, #dfe7ee 0%, #c7d2dc 100%);
}
.lead-avatar--md.lead-avatar--initials { font-size: .95rem; }
.lead-avatar--sm.lead-avatar--initials { font-size: .72rem; }
/* list Prospect cell — avatar beside the name/sub/badges stack */
.prospect-cell { display: flex; flex-direction: row; align-items: flex-start; gap: .55rem; }
.prospect-cell__text { min-width: 0; }
/* dossier header title already flexes (.answer-card__title below) — the avatar
   simply becomes its first flex child, baseline-aligned beside the h1. */

/* back link (dossier → vetted-lead stream) */
.back-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-bottom: var(--space-4); font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text-muted); text-decoration: none;
}
.back-link:hover { color: var(--color-accent); }
.back-link:hover svg { transform: translateX(-2px); }
.back-link svg { width: 1rem; height: 1rem; transition: transform .12s ease; }
.back-link:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.lead-stream {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden;
}
.lead-stream thead th {
  text-align: left; padding: .55rem .8rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-faint);
  background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.lead-stream tbody td {
  padding: .6rem .8rem; border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.lead-stream tbody tr:last-child td { border-bottom: none; }
.lead-stream tbody tr:hover td { background: var(--color-surface-raised); }
.lead-stream .col-rank { color: var(--color-text-faint); font-variant-numeric: tabular-nums; width: 2.4rem; }
.lead-stream .col-vpqs { width: 3.2rem; }
.prospect-name { font-weight: 600; font-size: .98rem; }
.prospect-name a { color: var(--color-text); }
.prospect-name a:hover { color: var(--color-accent); }
.cell-sub { color: var(--color-text-faint); font-size: .8rem; }
.routing-reason {
  color: var(--color-text-muted); font-size: .82rem; max-width: 30ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- VPQS radial ring (SSR SVG; geometry by attribute, colour by data) --- */
.vpqs-ring { display: block; }
.vpqs-ring__track { fill: none; stroke: var(--color-surface-inset); }
.vpqs-ring__arc {
  fill: none; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
}
.vpqs-ring[data-band="HIGH"] .vpqs-ring__arc { stroke: var(--band-high); }
.vpqs-ring[data-band="MED"]  .vpqs-ring__arc { stroke: var(--band-med); }
.vpqs-ring[data-band="LOW"]  .vpqs-ring__arc { stroke: var(--band-low); }
.vpqs-ring__label { fill: var(--color-text); font-weight: 700; font-family: var(--font); }
.vpqs-ring__band {
  fill: var(--color-text-faint); font-weight: 700; font-family: var(--font);
  letter-spacing: .08em;
}

/* ---- gate status pill (icon + text; never colour-only) ------------------ */
.gate-pill {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--pill);
  padding: .18rem .65rem; font-size: .74rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.gate-pill svg { width: 13px; height: 13px; flex: none; }
.gate-pill[data-gate="PASS"]            { color: var(--success-ink); background: var(--success-fill); border-color: var(--success-line); }
.gate-pill[data-gate="REVIEW_REQUIRED"] { color: var(--warning-ink); background: var(--warning-fill); border-color: var(--warning-line); }
.gate-pill[data-gate="BLOCKED"]         { color: var(--danger-ink);  background: var(--danger-fill);  border-color: var(--danger-line); }
.gate-pill[data-gate="RESEARCH_ONLY"]   { color: var(--info-ink);    background: var(--info-fill);    border-color: var(--info-line); }

/* ---- provenance pill (the trust backbone) ------------------------------- */
.prov-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .72rem; color: var(--color-text-muted);
  background: var(--color-surface-inset); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: .1rem .45rem;
}
.prov-pill svg { width: 11px; height: 11px; opacity: .8; flex: none; }

/* Data-source badges (Phase-1) — which platforms a lead's data was gathered from.
   A NEW source = one more [data-source=...] color line below (one-line add). */
.source-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 0; }
.source-badge {
  display: inline-flex; align-items: center; font-size: .68rem; font-weight: 600;
  border: 1px solid var(--color-border); color: var(--color-text-muted);
  background: var(--color-surface-inset); border-radius: var(--radius-sm);
  padding: .05rem .45rem;
}
.source-badge[data-source="LINKEDIN"] { color:#0a66c2; border-color:#7fb3e6; background:#eaf3fb; }
.source-badge[data-source="FACEBOOK"] { color:#1877f2; border-color:#8bb6f7; background:#eaf1fe; }
.source-badge[data-source="COMPANY"]  { color:#5b21b6; border-color:#b79ee0; background:#f2ecfb; }
.source-badge[data-source="CRM"]      { color:#0e7490; border-color:#7cc4d3; background:#e6f4f7; }
.source-badge[data-source="WEB"]      { color:#3f6212; border-color:#a3c26b; background:#eef5e3; }
.source-badge[data-source="CSV"]      { color:#92400e; border-color:#d6a86e; background:#fbf0e3; }
.source-badge[data-source="MANUAL"]   { color:#475467; border-color:#98a2b3; background:#f2f4f7; }

/* ---- action chip -------------------------------------------------------- */
.action-chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem;
  font-weight: 600; color: var(--color-text);
  background: var(--color-surface-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--pill); padding: .12rem .6rem; white-space: nowrap;
}
.action-chip svg { width: 12px; height: 12px; flex: none; }

/* ---- navigational chip/pill anchors (list-view deep-links) -------------- *
 * When a gate pill / action chip is rendered as an <a> (LIST view links to the
 * dossier / AI panel; the dossier answer-card chip jumps to #action-h) it must
 * KEEP the inert pill look — drop the global link underline + accent colour —
 * and gain a clear hover/focus affordance. Strict-CSP: class-driven only, no
 * inline style, no JS handler. The `[data-gate]` colour rules out-specify this,
 * so a gate pill keeps its semantic colour. */
a.gate-pill, a.action-chip { cursor: pointer; text-decoration: none; }
a.gate-pill:hover, a.action-chip:hover {
  text-decoration: none;
  border-color: var(--color-accent);
  filter: brightness(1.04);
}
a.gate-pill:focus-visible, a.action-chip:focus-visible { text-decoration: none; }

/* ============================ WOW: dossier =============================== */
.dossier { display: flex; flex-direction: column; gap: 1.1rem; }
.answer-card {
  display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
  background:
    radial-gradient(120% 160% at 0% 0%,
      color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg,
      var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  padding: 1.6rem 1.7rem; box-shadow: var(--shadow-2);
}
.answer-card__ring { flex: none; }
.answer-card__body { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: .5rem; }
.answer-card__title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.answer-card__title h1 { margin: 0; }
.answer-card__ctx { color: var(--color-text-muted); margin: 0; }
.answer-card__meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .2rem; }

.panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.2rem 1.3rem;
}
.panel > h2 { margin-top: 0; }

.conf-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.conf-badge {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radius-sm);
  padding: .3rem .6rem; font-size: .8rem; border: 1px solid var(--color-border);
  background: var(--color-surface-inset);
}
.conf-badge b { font-variant-numeric: tabular-nums; }
.conf-badge__level { font-weight: 700; }
.conf-badge[data-level="High"] .conf-badge__level { color: var(--gate-pass); }
.conf-badge[data-level="Med"]  .conf-badge__level { color: var(--gate-review); }
.conf-badge[data-level="Low"]  .conf-badge__level { color: var(--gate-blocked); }
.conf-badge__label { color: var(--color-text-muted); }

/* ---- SHAP-style impact bars (SVG width = attribute → CSP-safe) ---------- */
.shap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.shap-row { display: grid; grid-template-columns: 1fr; gap: .3rem; }
.shap-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.shap-row__label { font-weight: 600; }
.shap-row__weight { color: var(--color-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.shap-bar { display: block; width: 100%; height: 8px; border-radius: var(--pill); overflow: hidden; }
.shap-bar__track { fill: var(--color-surface-inset); }
.shap-bar__fill { fill: var(--color-accent); }
.shap-row[data-band="HIGH"] .shap-bar__fill { fill: var(--band-high); }
.shap-row[data-band="MED"]  .shap-bar__fill { fill: var(--band-med); }
.shap-row__foot { margin-top: .1rem; }
/* empty-reasons hint — a subtle promise instead of a blank block. */
.reasons-empty-hint { margin: 0; font-size: .82rem; font-style: italic; color: var(--color-text-muted); }

/* ---- item-#5 legibility (RA-approved): meaning-first "why this lead scored" ---- */
/* Anchor: the score + what it MEANS, before any weight. */
.score-anchor {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0 0 .85rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--color-border);
}
.score-anchor__num { margin: 0; display: flex; align-items: baseline; gap: .15rem; flex: none; }
.score-anchor__val {
  font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--color-accent-solid); font-variant-numeric: tabular-nums;
}
.score-anchor__of { font-size: .9rem; color: var(--color-text-muted); }
.score-anchor__meaning { flex: 1 1 12rem; min-width: 0; }
.score-anchor__meaning p { margin: .25rem 0 0; font-size: .84rem; color: var(--color-text-muted); }
.score-anchor__prio {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .16rem .55rem; border-radius: var(--pill);
  color: #fff; background: var(--color-text-muted);
}
.score-anchor__prio[data-band="HIGH"] { background: var(--band-high); }
.score-anchor__prio[data-band="MED"],
.score-anchor__prio[data-band="MEDIUM"] { background: var(--band-med); color: #15192e; }
/* "What's driving it" subhead + reframed rows */
.drivers-h { margin: 0 0 .5rem; font-size: var(--fs-h3); }
.shap-row__rank {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-muted); font-weight: 700; white-space: nowrap;
}
.shap-row__rank .shap-row__weight { color: var(--color-accent); }
.shap-row__meaning { margin: .1rem 0 0; font-size: .82rem; color: var(--color-text-muted); }
/* honest-% footnote — the fix for "26% of what?" */
.drivers-note {
  margin: .8rem 0 0; font-size: .74rem; font-style: italic; color: var(--color-text-faint);
}

/* ---- signal chips ------------------------------------------------------- */
.signal-block { margin-top: var(--space-3); }
.signal-block h3 { margin: 0 0 .35rem; font-size: var(--fs-h3); }
.signal-set { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .4rem; }
.signal-chip {
  font-size: .8rem; color: var(--color-text); background: var(--color-surface-inset);
  border: 1px solid var(--color-border); border-radius: var(--pill); padding: .2rem .65rem;
}
.signal-chip[data-tone="trigger"] {
  color: var(--gate-review);
  border-color: color-mix(in oklch, var(--gate-review) 35%, transparent);
  background: color-mix(in oklch, var(--gate-review) 12%, transparent);
}
/* observed-vs-inferred trust marker: an inferred chip reads visibly softer than
   a cited/verified fact (dashed border + muted text) — never colour-only. */
.signal-chip[data-inferred="true"] {
  border-style: dashed;
  color: var(--color-text-muted);
}
/* one plain-language footnote for the inferred signal chips (mirrors the
   wealth "not a verified net-worth figure" disclaimer's intent). */
.inferred-note {
  margin: .3rem 0 0; font-size: .74rem; font-style: italic;
  color: var(--color-text-faint);
}
.rel-path { color: var(--color-text-muted); }

/* ---- Relationships mini-cards (ADR-0030 research-only connections) -------- */
.rel-cards-note { color: var(--color-text-muted); font-size: .85rem; margin: 0 0 .8rem; }
.rel-cards {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rel-card {
  display: flex; align-items: flex-start; gap: .6rem; min-width: 0;
  padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface-inset);
}
.rel-card__text { min-width: 0; display: flex; flex-direction: column; gap: .08rem; flex: 1 1 auto; }
.rel-card__name {
  font-weight: 600; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rel-card__line {
  color: var(--color-text-muted); font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* location — a touch lighter than title/company so it reads as a sub-detail */
.rel-card__loc { color: var(--color-text-faint); font-size: .78rem; }
.rel-card__badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem;
}
.rel-card__degree {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .1rem .45rem; border-radius: 999px;
  background: color-mix(in oklch, var(--color-text-faint) 16%, transparent);
  color: var(--color-text-muted);
}
.rel-card__degree[data-degree="1st"] {
  background: color-mix(in oklch, var(--p-green) 16%, transparent); color: var(--p-green);
}
.rel-card__degree[data-degree="2nd"] {
  background: color-mix(in oklch, var(--p-blue) 16%, transparent); color: var(--p-blue);
}
.rel-card__link {
  font-size: .72rem; font-weight: 600; text-decoration: none; line-height: 1.4;
  padding: .08rem .5rem; border-radius: 999px;
  border: 1px solid var(--color-border-strong); color: var(--color-text-muted);
}
.rel-card__link:hover { border-color: var(--color-accent-solid); color: var(--color-accent-solid); }
.rel-card__link[data-net="linkedin"] {
  color: oklch(0.48 0.13 252); border-color: color-mix(in oklch, oklch(0.48 0.13 252) 45%, transparent);
}
.rel-card__link[data-net="facebook"] {
  color: oklch(0.52 0.16 262); border-color: color-mix(in oklch, oklch(0.52 0.16 262) 45%, transparent);
}
.rel-card__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- AI action drafts (human-in-the-loop, NO SEND — GR-P-3) ------------- */
.draft-banner {
  display: inline-flex; align-items: center; gap: .4rem;
  background: color-mix(in oklch, var(--gate-review) 13%, transparent);
  border: 1px solid color-mix(in oklch, var(--gate-review) 32%, transparent);
  color: var(--gate-review); padding: .4rem .7rem; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 600;
}
.draft-banner svg { width: 14px; height: 14px; flex: none; }
.draft-grid { display: flex; flex-direction: column; gap: .8rem; margin-top: .9rem; }
.draft-card {
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.draft-card__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.draft-card__kind {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted);
}
.draft-card__preview { margin: .55rem 0; color: var(--color-text); white-space: pre-wrap; }
.draft-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.draft-action {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: not-allowed;
  background: var(--color-surface-inset); color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: .28rem .7rem; display: inline-flex; align-items: center; gap: .3rem;
}
.draft-action svg { width: 12px; height: 12px; }
.draft-rationale { margin-top: .6rem; }
.draft-rationale summary { cursor: pointer; color: var(--color-text-muted); font-size: .82rem; }
.draft-rationale[open] summary { color: var(--color-text); }
.draft-rationale p { color: var(--color-text-muted); margin: .4rem 0 0; }

/* WQ-7 Action-v2 — variant picker + editable card + feedback control */
.draft-edit-note { margin: .3rem 0 .2rem; color: var(--color-text-muted); font-size: .82rem; }
.variant-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .7rem; }
.variant-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; text-decoration: none;
  padding: .28rem .7rem; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
  background: var(--color-surface-inset);
  /* wrap cleanly for 4+ tone variants on narrow/mobile widths: each pill keeps
     its label on one line but never blows out the row (the picker flex-wraps). */
  max-width: 100%; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.variant-pill:hover { border-color: var(--color-accent); text-decoration: none; }
.variant-pill[data-selected="true"] {
  background: var(--color-accent-solid); color: var(--color-accent-ink);
  border-color: var(--color-accent-solid);
}
.variant-pill__edited {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  opacity: .8; font-weight: 700;
}
.draft-edit-form { display: flex; flex-direction: column; gap: .5rem; margin: .2rem 0 .3rem; }
.draft-edit-label { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); }
.draft-edit-textarea {
  font: inherit; font-size: .9rem; width: 100%; box-sizing: border-box;
  padding: .6rem .7rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text); resize: vertical; white-space: pre-wrap;
}
.draft-edit-actions { display: inline-flex; gap: .4rem; }
.draft-card__actions { display: flex; gap: .4rem; margin: .5rem 0 .2rem; }
.draft-edited-indicator {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; font-weight: 600; color: var(--color-accent);
}
.draft-edited-indicator svg { width: 12px; height: 12px; }
.draft-saved {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem;
  font-size: .78rem; font-weight: 600; color: var(--gate-pass, var(--color-accent));
}
.draft-saved svg { width: 13px; height: 13px; }
.draft-error { margin: .45rem 0 0; font-size: .8rem; color: var(--gate-blocked); }
.draft-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .7rem 0 0; }
.draft-feedback__legend { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); }
.draft-feedback__buttons { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.draft-rating-btn {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  background: var(--color-surface-inset); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: .28rem .7rem;
}
.draft-rating-btn:hover { border-color: var(--color-accent); background: var(--color-surface-raised); }
/* "Never sent to a prospect" reassurance beside the rating buttons — rating is
   feedback, never a send (reinforces GR-P-3 drafts-only). Full-width so it sits
   on its own line under the buttons in the wrapping .draft-feedback row. */
.draft-never-sent {
  flex-basis: 100%; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-style: italic; color: var(--color-text-faint);
}
.draft-never-sent svg { width: 12px; height: 12px; flex: none; }
/* read-only variant (no owner-scoped edit route): an honest "not available"
   note rather than a silently-dropped control. */
.draft-feedback-na {
  margin: .7rem 0 0; font-size: .78rem; font-style: italic; color: var(--color-text-muted);
}

/* ---- feedback chip groups ---------------------------------------------- */
.chip-groups { display: flex; flex-direction: column; gap: 1rem; }
.chip-group { border: none; padding: 0; margin: 0; }
.chip-group legend {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--color-text-faint); padding: 0; margin-bottom: .5rem;
}
.chip-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font: inherit; font-size: .82rem; cursor: pointer; border-radius: var(--pill);
  padding: .32rem .8rem; border: 1px solid var(--color-border);
  background: var(--color-surface-inset); color: var(--color-text);
  transition: border-color .12s, background .12s;
}
.chip:hover { border-color: var(--color-border-strong); }
.chip[data-kind="positive"] { color: var(--chip-positive); border-color: color-mix(in oklch, var(--chip-positive) 32%, transparent); }
.chip[data-kind="negative"] { color: var(--chip-negative); border-color: color-mix(in oklch, var(--chip-negative) 32%, transparent); }
.chip[data-kind="process"]  { color: var(--chip-process);  border-color: color-mix(in oklch, var(--chip-process) 32%, transparent); }
.chip[data-kind="positive"]:hover { background: color-mix(in oklch, var(--chip-positive) 12%, transparent); }
.chip[data-kind="negative"]:hover { background: color-mix(in oklch, var(--chip-negative) 12%, transparent); }
.chip[data-kind="process"]:hover  { background: color-mix(in oklch, var(--chip-process) 12%, transparent); }

.provenance-foot { color: var(--color-text-faint); font-size: .78rem; font-family: var(--font-mono); }

/* ===== complete board-room dossier (v0.22.0) ============================== */
/* Contact / Professional / Wealth / Data-sources / Compliance. Reuses the
 * existing .panel / .signal-* / .gate-pill design language; adds a labeled
 * key/value grid, a muted list, provenance rows, and the always-on Contact
 * card with an edit-ready row structure. CSP-safe: no inline styles. */

/* labeled key/value grid (Professional, Wealth, Compliance) */
.kv-grid {
  display: grid; gap: .8rem 1.6rem; margin: .2rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kv-item { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kv-item--wide { grid-column: 1 / -1; }
.kv-item dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-faint); font-weight: 700;
}
.kv-item dd { margin: 0; color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
/* a small trailing "(derived)" note — computed value, explicit provenance. */
.kv-note { font-weight: 400; font-size: .72rem; font-style: italic; color: var(--color-text-faint); }

.prof-headline {
  margin: 0 0 .9rem; font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--color-text);
}

/* muted bulleted list (prior roles, liquidity events) */
.stack-list {
  list-style: none; margin: .1rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.stack-list li {
  position: relative; padding-left: 1rem;
  color: var(--color-text-muted); font-size: .9rem;
}
.stack-list li::before {
  content: ""; position: absolute; left: .15rem; top: .6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-border-strong);
}

/* net-worth disclaimer (guardrail #7 — bands + context only) */
.disclaimer {
  margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--color-border);
  font-size: .76rem; font-style: italic; color: var(--color-text-faint);
}

/* data-source provenance rows */
.source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.source-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem .1rem; border-bottom: 1px solid var(--color-border);
}
.source-row:last-child { border-bottom: none; }
.source-row__label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; min-width: 0; overflow-wrap: anywhere;
}
.source-row__label svg { width: 14px; height: 14px; flex: none; color: var(--color-text-muted); }
.source-row__meta { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.source-kind {
  font-size: .72rem; font-weight: 600; color: var(--color-text-muted);
  background: var(--color-surface-inset); border: 1px solid var(--color-border);
  border-radius: var(--pill); padding: .12rem .55rem; white-space: nowrap;
}
.source-asof { font-family: var(--font-mono); font-size: .74rem; color: var(--color-text-faint); white-space: nowrap; }

.compliance-head { margin-bottom: .3rem; }

/* Contact card — ALWAYS-ON; consistent label + value + reserved edit slot.
 * Absent fields render a muted placeholder; the edit affordance is reserved
 * (revealed on row hover) for the inline-edit fast-follow. */
.contact-list { margin: 0; padding: 0; display: flex; flex-direction: column; }
.contact-row {
  display: grid; grid-template-columns: minmax(8.5rem, 11rem) 1fr auto;
  align-items: baseline; gap: .4rem 1rem; padding: .55rem .1rem;
  border-bottom: 1px solid var(--color-border);
}
.contact-row:last-child { border-bottom: none; }
.contact-row__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-faint); font-weight: 700;
}
.contact-row__value {
  margin: 0; color: var(--color-text); font-weight: 600;
  min-width: 0; overflow-wrap: anywhere;
}
.contact-row__placeholder { color: var(--color-text-faint); font-weight: 500; font-style: italic; }
.contact-row__link { color: var(--color-accent); text-decoration: none; overflow-wrap: anywhere; }
.contact-row__link:hover, .contact-row__link:focus-visible { text-decoration: underline; }

/* Inactivity toast — fixed bottom-centre, revealed by the session guard on
   inactivity expiry. `hidden` (the HTML attribute) keeps it out of the layout
   until the script flips it on. */
.session-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: min(92vw, 26rem);
  padding: 0.85rem 1.15rem;
  border-radius: 0.6rem;
  background: var(--color-surface-strong, #1f2937);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  font-size: 0.9rem;
}
.session-toast[hidden] { display: none; }
.session-toast__title { font-weight: 700; }
.session-toast__body { opacity: 0.88; font-size: 0.82rem; }

/* Inline-edit affordance (v0.23.0) — pure-SSR progressive enhancement, no
 * client JS, no inline styles/handlers. The Edit/Add control is a GET link that
 * re-renders the row in edit mode; Save is a same-origin form POST (CSP
 * form-action 'self'); Cancel is a link back. The control is a real, focusable
 * link (subtle at rest, full on row-hover / focus) — never an opacity:0 trap. */
.contact-row__edit {
  display: inline-flex; align-items: center; gap: .28rem; justify-self: end;
  flex: none; padding: .1rem .4rem; border-radius: var(--radius-sm);
  font-size: .72rem; font-weight: 600; color: var(--color-text-faint);
  text-decoration: none; white-space: nowrap; opacity: .55;
  transition: opacity .12s, color .12s, background .12s;
}
.contact-row__edit svg { width: 13px; height: 13px; }
.contact-row:hover .contact-row__edit,
.contact-row__edit:hover,
.contact-row__edit:focus-visible { opacity: 1; color: var(--color-accent); }
.contact-row__edit:hover { text-decoration: none; background: var(--color-surface-inset); }

/* editing row: label | form (spans the value + edit-slot columns) */
.contact-row--editing { grid-template-columns: minmax(8.5rem, 11rem) 1fr; align-items: start; }
.contact-row__edit-cell { min-width: 0; }
.contact-edit-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.contact-edit-input {
  font: inherit; flex: 1 1 14rem; min-width: 0;
  padding: .4rem .55rem; color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-inset);
}
.contact-edit-actions { display: inline-flex; gap: .4rem; flex: none; }
.contact-edit-error { margin: .45rem 0 0; font-size: .8rem; color: var(--gate-blocked); }

/* subtle post-save confirmation next to the refreshed value */
.contact-saved {
  display: inline-flex; align-items: center; gap: .25rem; margin-left: .55rem;
  font-size: .72rem; font-weight: 700; color: var(--gate-pass); vertical-align: middle;
}
.contact-saved svg { width: 12px; height: 12px; }

@media (max-width: 520px) {
  .contact-row { grid-template-columns: 1fr auto; }
  .contact-row__label { grid-column: 1 / -1; }
  .contact-row--editing { grid-template-columns: 1fr; }
}

/* ---- data tables (admin) ------------------------------------------------ */
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden;
}
.data-table th, .data-table td {
  text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--color-border);
}
.data-table th {
  background: var(--color-surface-raised); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-text-faint);
}
.data-table tr:last-child td { border-bottom: none; }
.reason-cell { margin: 0; padding-left: 1.1rem; color: var(--color-text-muted); font-size: .85rem; }

/* inc-6 — review-queue drill-in link (role-gated dossier; see AdminReviewQueuePage) */
.rq-drillin { font-weight: 600; color: var(--color-text); }
.rq-drillin:hover { color: var(--color-accent); }

/* inc-6 — neutral informational banner (DNC read-only clarity, source-policy CTA) */
.info-banner {
  background: var(--info-fill); border: 1px solid var(--color-border);
  color: var(--color-text); padding: .6rem .85rem; border-radius: var(--radius-sm);
  margin: 1rem 0; font-size: .86rem; line-height: 1.5; max-width: 74ch;
}
.info-banner strong { color: var(--color-text); }

/* ============================ source policy (WOW) ======================== */
.srcpol-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }

/* segmented view toggle (Cards | List) */
.segmented { display:inline-flex; background:var(--color-surface-inset); border:1px solid var(--color-border); border-radius:10px; padding:3px; gap:2px; flex:none; }
.segmented a { padding:.4rem .9rem; border-radius:7px; font-size:.85rem; font-weight:600; color:var(--color-text-muted); }
.segmented a:hover { color:var(--color-text); text-decoration:none; }
.segmented a[aria-current="page"] { background:var(--color-surface-raised); color:var(--color-text); box-shadow:var(--shadow-1); }

/* slider toggle (read-only state; interactive edit = live-gateway follow-on) */
.toggle { display:inline-flex; align-items:center; gap:.5rem; }
.toggle-switch { position:relative; width:40px; height:22px; border-radius:999px; flex:none; border:1px solid var(--color-border-strong); background:color-mix(in oklch, var(--gate-blocked) 22%, var(--color-surface-inset)); }
.toggle-switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--color-text-muted); box-shadow:0 1px 2px oklch(0 0 0/.5); transition:transform .15s; }
.toggle-switch[data-on="true"] { background:color-mix(in oklch, var(--gate-pass) 55%, transparent); border-color:color-mix(in oklch, var(--gate-pass) 50%, transparent); }
.toggle-switch[data-on="true"]::after { transform:translateX(18px); background:#fff; }
.toggle-label { font-size:.82rem; font-weight:600; color:var(--color-text-muted); }
.toggle-switch[data-on="true"] + .toggle-label { color:var(--gate-pass); }
.toggle[data-readonly] { cursor:default; }
.toggle-lock { display:inline-flex; opacity:.5; }
.toggle-lock svg { width:11px; height:11px; }

/* class governance status pill */
.pstatus { display:inline-flex; align-items:center; border-radius:var(--pill); padding:.12rem .6rem; font-size:.72rem; font-weight:700; }
.pstatus[data-status="Permitted"]   { color:var(--success-ink); background:var(--success-fill); }
.pstatus[data-status="Conditional"] { color:var(--warning-ink); background:var(--warning-fill); }
.pstatus[data-status="Prohibited"]  { color:var(--danger-ink);  background:var(--danger-fill); }

/* circle-i info disclosure (SSR <details>; a floating popover anchored to the i) */
.policy-info { position:relative; }
.policy-info > summary { list-style:none; cursor:pointer; display:inline-flex; }
.policy-info > summary::-webkit-details-marker { display:none; }
.circle-i { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.8rem; color:var(--color-text-muted); border:1.5px solid var(--color-border-strong); }
.policy-info > summary:hover .circle-i, .policy-info[open] > summary .circle-i { color:var(--color-accent); border-color:var(--color-accent); }
.policy-info__body { position:absolute; top:1.9rem; right:0; width:min(300px,78vw); z-index:10; background:var(--color-surface-raised); border:1px solid var(--color-border-strong); border-radius:var(--radius-sm); padding:.8rem .9rem; box-shadow:var(--shadow-2); }
.policy-info__what { margin:0 0 .6rem; color:var(--color-text); font-size:.85rem; line-height:1.5; }
.policy-info__meta { display:grid; grid-template-columns:1fr 1fr; gap:.4rem .8rem; margin:0; }
.policy-info__meta dt { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-faint); }
.policy-info__meta dd { margin:0; font-size:.8rem; font-weight:600; }
.policy-info__note { margin:.6rem 0 0; font-size:.72rem; color:var(--color-text-faint); border-top:1px solid var(--color-border); padding-top:.5rem; }

/* card view */
.policy-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(310px,1fr)); }
.policy-card { position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:1.15rem 1.2rem; display:flex; flex-direction:column; gap:.85rem; box-shadow:var(--shadow-1); transition:border-color .12s; }
.policy-card:hover { border-color:var(--color-border-strong); }
.policy-card[data-allowed="false"] { opacity:.94; }
.policy-card__head { display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:start; }
.policy-card__class-no { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:var(--color-text-muted); background:var(--color-surface-inset); border:1px solid var(--color-border); }
.policy-card__title { min-width:0; }
.policy-card__name { margin:0; font-size:1rem; letter-spacing:-0.01em; }
.policy-card__src { display:inline-block; margin-top:.15rem; font-family:var(--font-mono); font-size:.76rem; color:var(--color-text-muted); word-break:break-all; }
.policy-card__row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }

/* list view */
.policy-list { width:100%; border-collapse:separate; border-spacing:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); }
.policy-list thead th { text-align:left; padding:.6rem .8rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-faint); background:var(--color-surface-raised); border-bottom:1px solid var(--color-border); }
.policy-list tbody td { padding:.65rem .8rem; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.policy-list tbody tr:last-child td { border-bottom:none; }
.policy-list tbody tr:hover td { background:var(--color-surface-raised); }
.row-name { font-weight:600; }
.row-src { font-family:var(--font-mono); font-size:.74rem; color:var(--color-text-muted); }
.class-chip { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:7px; font-weight:800; font-size:.76rem; color:var(--color-text-muted); background:var(--color-surface-inset); }

/* ---- dashboard ---------------------------------------------------------- */
.metric-grid {
  display: grid; gap: 1rem; margin: 1.1rem 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.metric-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .25rem;
}
.metric-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.metric-label { color: var(--color-text-muted); font-size: .82rem; }

/* ===== EXECUTIVE dashboard — board-room treatment (Wave 2) =============== */
.exec-hero {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-6); margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-6) var(--space-6);
  background:
    radial-gradient(120% 160% at 0% 0%,
      color-mix(in oklch, var(--color-accent) 15%, transparent), transparent 60%),
    linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
}
.exec-hero__headline { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.exec-hero__kicker {
  font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-text-muted);
}
.exec-hero__number {
  font-size: 4.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.exec-hero__sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: .3rem; }
.exec-hero__ring { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: none; }
.exec-hero__ringlabel {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-faint);
}

/* pipeline funnel — proportional SVG bars */
.funnel { display: flex; flex-direction: column; gap: .7rem; margin-top: .3rem; }
.funnel-row { display: grid; grid-template-columns: 10.5rem 1fr 4.5rem; align-items: center; gap: .8rem; }
.funnel-row__label { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: var(--color-text); }
.funnel-row__icon { display: inline-flex; width: 1rem; height: 1rem; color: var(--color-text-muted); }
.funnel-row__icon svg { width: 100%; height: 100%; }
.funnel-bar { width: 100%; height: 14px; display: block; }
.funnel-bar__track { fill: var(--color-surface-inset); }
.funnel-bar__fill { fill: var(--color-accent); }
.funnel-row:first-child .funnel-bar__fill { fill: var(--band-med); }
.funnel-row__value {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--color-text); display: flex; flex-direction: column; line-height: 1.1;
}
.funnel-row__value em { font-style: normal; font-weight: 500; font-size: .7rem; color: var(--color-text-faint); }

/* increment-5: funnel context notes (sparse-data + drill-in affordance) */
.funnel-note { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: .8rem; max-width: 70ch; }
.funnel-note--muted { color: var(--color-text-faint); margin-top: .35rem; }
/* increment-5: feedback-panel explainer + recency line */
.panel-explainer { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: -.2rem; margin-bottom: .8rem; max-width: 70ch; }

/* feedback outcome bars */
.outcome-bars { display: flex; flex-direction: column; gap: .5rem; }
.outcome-row { display: grid; grid-template-columns: 11rem 1fr 2.5rem; align-items: center; gap: .8rem; }
.outcome-row__label { font-size: var(--fs-sm); color: var(--color-text-muted); }
.outcome-bar { width: 100%; height: 8px; display: block; border-radius: var(--pill); overflow: hidden; background: var(--color-surface-inset); }
.outcome-bar__fill { fill: var(--success-ink); }
.outcome-row__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); }
@media (max-width: 620px) {
  .exec-hero__number { font-size: 3.4rem; }
  .funnel-row { grid-template-columns: 7rem 1fr 3.5rem; }
}

/* ---- message page ------------------------------------------------------- */
.message-page {
  max-width: 480px; margin: 4rem auto; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 16px; padding: 2.2rem;
  text-align: center; box-shadow: var(--shadow-2);
}
.message-page .brand-mark { justify-content: center; margin-bottom: 1rem; }

/* ---- inc-6: responsive admin-table stacking (CSS-only, no client JS) ------
 * Below 768px the admin tables (Audit / Users / Review-queue) and the
 * source-policy list block-stack: each row becomes a card and each cell puts
 * its column name (from `data-label`) ahead of the value via `::before`. This
 * removes ALL horizontal table overflow on a phone — the page body never
 * scrolls sideways. Tertiary Audit columns (already `.col-hide-sm`) stay hidden.
 * Scope is admin-only via `.app-main` + these table classes, so the FINREP
 * lead-stream (which has its own responsive treatment) is untouched. */
@media (max-width: 768px) {
  .data-table,
  .policy-list {
    border: none; background: transparent; border-radius: 0;
    overflow: visible; /* nothing to scroll — the rows are stacked cards */
  }
  .data-table thead,
  .policy-list thead {
    /* a11y-safe visual hide: labels move into each cell's ::before instead */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .data-table tr,
  .policy-list tbody tr {
    display: block; margin: 0 0 .75rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); overflow: hidden;
  }
  .data-table td,
  .policy-list tbody td {
    display: grid; grid-template-columns: 40% 1fr; gap: .5rem;
    align-items: start; padding: .5rem .8rem;
    border-bottom: 1px solid var(--color-border); white-space: normal;
  }
  .data-table tr td:last-child,
  .policy-list tbody tr td:last-child { border-bottom: none; }
  .data-table td::before,
  .policy-list tbody td::before {
    content: attr(data-label);
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-text-faint);
    padding-top: .1rem;
  }
  /* a data-label-less cell (e.g. the source-policy details-toggle column) simply
   * shows no label prefix — an empty ::before collapses cleanly. */
  .data-table td:not([data-label])::before,
  .policy-list tbody td:not([data-label])::before { content: ""; }
  /* keep the tertiary Audit "Detail" column hidden on narrow screens */
  .data-table .col-hide-sm { display: none; }
  .audit-detail { max-width: none; }
}

/* ---- responsive + motion ------------------------------------------------ */
@media (max-width: 720px) {
  .app-header { gap: .75rem; }
  .page-content,
  .app-main { padding: 1.1rem; }
  h1 { font-size: 1.3rem; }
  .lead-stream .col-hide-sm { display: none; }
  .routing-reason { max-width: 18ch; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root {
    --color-border: var(--p-border-strong);
    --color-text-muted: var(--p-text);
    --color-text-faint: var(--p-text-muted); /* lift the weakest tier too */
  }
}

/* ---- inc-7 item 4: tablet / desktop / wide breakpoints -------------------
 * Layered ON TOP of inc-6's 768px stack (and the 720/620/520 refinements).
 * These only widen the content container's max-width as the viewport grows —
 * no layout is restructured, no element repositioned — so a wide monitor uses
 * its space without the content column feeling stranded. The body never scrolls
 * horizontally at any width: the container is `width:100%; max-width:<cap>`, so
 * it can only ever be NARROWER than the viewport, never wider. */
@media (min-width: 1024px) {
  .page-content,
  .app-main { max-width: 1180px; padding: var(--space-6) var(--space-6); }
}
@media (min-width: 1400px) {
  .page-content,
  .app-main { max-width: 1320px; }
}

/* ---- inc-7 item 1: print stylesheet (dossier readable on paper) ----------
 * A REP prints a lead dossier for an in-person meeting. Goals: (a) light-on-
 * paper — force the light token ramp so a dark-theme session prints legibly,
 * never light-text-on-white; (b) the GR-P-3 no-send banner + a DRAFT marker
 * stay VISIBLE on the page; (c) no colour-only information is lost (the pills
 * already carry text/icons); (d) drop the interactive chrome (nav, footer,
 * back-link, edit affordances, feedback controls) that means nothing on paper.
 * CSP-safe: inline in the served stylesheet, no @import, no url(). */

/* the print-only DRAFT marker — display:none on screen (byte-identical render),
 * shown only in print. */
.print-only { display: none; }
.print-draft-marker {
  border: 2px solid #000; border-radius: 6px; padding: .4rem .7rem;
  font-weight: 700; letter-spacing: .02em; text-align: center; margin: 0 0 1rem;
}

@media print {
  /* force the LIGHT ramp on paper regardless of the on-screen theme, and drop
   * the glow/background so ink isn't wasted. */
  :root, :root[data-theme="dark"] {
    --color-bg: #fff; --color-surface: #fff; --color-surface-raised: #fff;
    --color-surface-inset: #f4f4f4; --color-border: #bbb;
    --color-border-strong: #888; --color-text: #111; --color-text-muted: #333;
    --color-text-faint: #555; --bg-glow: transparent;
    --shadow-1: none; --shadow-2: none;
  }
  html, body {
    background: #fff !important; color: #111 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* show the print-only DRAFT marker */
  .print-only { display: block; }
  /* drop interactive / navigational chrome that is meaningless on paper */
  .app-header, .app-footer, .app-nav, .back-link,
  .contact-row__edit, .draft-actions, .draft-card__actions,
  .draft-feedback, .draft-edit-form, .ops-controls, .skip-link,
  .seg-toggle, .segmented, .view-toggle { display: none !important; }
  .app-main, .page-content { max-width: none; padding: 0; }
  /* GR-P-3: the no-send banner STAYS visible + prints with a hard border so it
   * survives even if the browser drops background fills. */
  .draft-banner {
    display: inline-flex !important; color: #111 !important;
    background: transparent !important; border: 1.5px solid #000 !important;
  }
  /* keep panels from breaking awkwardly across pages */
  .panel, .answer-card, .draft-card, .lead-card { break-inside: avoid; }
  /* the dossier is the print target; avoid orphaned card shadows/borders bleed */
  .dossier { gap: .8rem; }
  a { color: #111 !important; text-decoration: none; }
}

/* ── §C REP lead-lifecycle: tab strip + per-lead transition actions ────────── */
.lead-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--c-line);
  margin: .25rem 0 1rem;
  flex-wrap: wrap;
}
.lead-tab {
  padding: .5rem .9rem;
  color: var(--c-muted);
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  border-radius: 6px 6px 0 0;
}
.lead-tab:hover { color: var(--c-primary); background: var(--c-surface-2); }
.lead-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-accent-gold);
  background: var(--c-surface-2);
}
/* Card + its action row stacked (the card is an <a>; actions are a sibling). */
.lead-card-wrap { display: flex; flex-direction: column; height: 100%; }
/* #4 company: top-right of the card + a list Company column (left of VPQS). */
.lead-card__company {
  position: absolute; top: .9rem; right: 1.1rem;
  max-width: 42%; text-align: right;
  font-size: .72rem; line-height: 1.2; font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-company { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 12rem; }

/* #2 avatar download menu — native zero-JS <details> disclosure on the avatar. */
.role-menu-wrap { position: relative; display: inline-flex; }
.role-menu-wrap > summary { list-style: none; cursor: pointer; }
.role-menu-wrap > summary::-webkit-details-marker { display: none; }
.role-menu-wrap > summary::marker { content: ""; }
.role-menu {
  position: absolute; top: calc(100% + .45rem); right: 0; z-index: 60;
  min-width: 13rem; padding: .35rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: .15rem;
}
.role-menu-item {
  display: block; padding: .55rem .75rem; border-radius: 7px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-text);
  text-decoration: none; white-space: nowrap;
}
.role-menu-item:hover { background: var(--color-bg); color: var(--color-accent); }
.lead-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  padding: .5rem .25rem 0;
}
.lead-action-form { margin: 0; display: inline-flex; }
.lead-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-primary);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
}
.lead-action-btn:hover { background: var(--c-bg); border-color: var(--c-primary); }
.lead-action-btn[data-to="won"] { color: #0a7d33; }
.lead-action-btn[data-to="won"]:hover { border-color: #0a7d33; }
.lead-action-btn[data-to="lost"] { color: var(--c-muted); }
.col-actions .lead-actions { padding: 0; }
.col-actions { white-space: nowrap; }

/* ── Login password show/hide eyeball (ADR-0027) ──────────────────────────── */
.password-field { position: relative; display: flex; align-items: center; }
.password-field input { flex: 1 1 auto; padding-right: 2.6rem; }
.pw-toggle {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: .3rem; margin: 0; cursor: pointer;
  color: var(--c-muted); line-height: 0;
}
.pw-toggle:hover, .pw-toggle.is-shown { color: var(--c-primary); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--c-accent-gold); outline-offset: 1px; border-radius: 4px;
}
