/* ============================================================================
 * 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 {
  /* ── TOKEN ALIASES ─────────────────────────────────────────────────────────────────────────
     Nineteen custom properties were being referenced that NOTHING defined, and 32 of those
     references carried no fallback. A `var()` with no fallback and no definition does not fall
     back to anything — the WHOLE DECLARATION IS DROPPED. So `border: 1px solid var(--c-border)`
     produced no border at all, 15 times: every table rule, lane separator, rail edge and panel
     border on the new operator dossier. The markup was correct and its entire visual language
     was silently absent, which is exactly how it looked.

     Two of these predate the sheet and are worth naming rather than quietly fixing: `.contact-link`
     has been asking for `--color-primary` and getting nothing, so contact links have rendered
     with no brand colour.

     Defined as ALIASES onto the real tokens rather than as new colours — the palette is not
     being extended here, only spelled the other way, so themes and brand packs keep working. */
  --c-border:            var(--color-border);
  --c-border-subtle:     color-mix(in oklch, var(--color-border) 55%, transparent);
  --c-text:              var(--color-text);
  --c-text-muted:        var(--color-text-muted);
  --c-brand:             var(--color-accent-solid);
  --c-ok-text:           var(--success-ink);
  --c-ok-bg:             var(--success-fill);
  --c-warn-text:         var(--warning-ink);
  --c-warn-bg:           var(--warning-fill);
  --radius-md:           var(--radius);
  --radius-pill:         999px;
  --c-inset:             color-mix(in oklch, var(--color-border) 26%, var(--color-surface));
  --focus:               var(--color-focus);
  --color-surface-strong: var(--color-surface-raised);
  --color-primary:       var(--color-accent-solid);
  --color-primary-dark:  var(--color-accent-strong);

  /* 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;
  /* The paste-photo dialog's circle (RA 2026-10-02: "go with 180px") — larger than the lead
     page's own xl avatar (112px), which keeps its size. Its inside (initials, the two lines) is
     scaled by the circle over the 112px it was designed at: 180 / 112 = 1.6. Keep the two in
     step; tests/avatar_paste_render_test.tsx derives the factor and fails if they drift. */
  --avatar-paste-size: 180px; --avatar-paste-scale: 1.6;
  /* 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);
  /* anchors .ifc-seal--login to the card's upper-right corner */
  position: relative;
}

/* IFC Cyber verification seal (RA 2026-08-30) — banner + login card.
 * `flex: none` on the banner mark matters: .app-user is a flex row, and without it the seal
 * is the one flex item that would shrink when the role name is long. */
.ifc-seal { display: block; flex: none; border-radius: 50%; }
/* Sits to the RIGHT of Sign out with a deliberately wider gap than the .app-user row's own
 * --space-3: the seal is a certification mark, not another account control, and butting it
 * against the Sign out link reads as a third button. */
.ifc-seal--banner { width: 34px; height: 34px; margin-left: var(--space-4, 1.25rem); }
/* In FLOW as the brand row's last item, not absolutely positioned — at this size an absolute
 * mark overlaps the headline, and reserving space with padding squeezes the team name. */
.ifc-seal--login { width: 112px; height: 112px; margin-left: auto; }
@media (max-width: 380px) { .ifc-seal--login { width: 84px; height: 84px; } }
.login-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
/* wrap so a long team name + the 112px seal never overflow a narrow card */
.login-brand { flex-wrap: wrap; row-gap: .5rem; }
.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);
}
/* ADR-0033 (Klemm #6) — a disabled nav item: greyed, non-interactive, no pointer. */
.nav-disabled {
  color: rgba(255, 255, 255, .34); padding: var(--space-2) var(--space-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: not-allowed; user-select: none;
}
.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);
}
/* A BROKEN photo must still occupy its box.
   An `inline` img that ATTEMPTS a load and fails stops being a replaced element and renders as
   alt text, and the browser then ignores the width/height entirely: the 112px dossier avatar
   collapsed to a 155x18 strip of the person's name — wider than it was tall, and unrecognisable
   as a photo slot. `inline-block` keeps the box in the broken state while changing nothing when
   the image loads, and nothing at all inside the flex containers (which blockify their children
   regardless).
   This does NOT fire in normal use, because `has_photo` gates whether the img renders at all —
   it fires when has_photo is stale, i.e. exactly when the photo is missing and the layout is the
   only thing telling you so. Found by §G.18 gameplay: the stub's photo route 403s, which is what
   surfaced it. Scoped to `img` so the initials chip keeps its flex centring. */
img.lead-avatar { display: inline-block; }
/* Sizes are set from what the surface is FOR, not from a neat scale (RA 2026-09-09: "the photo
   is not properly sized ... it should be large enough to see like in LinkedIn").
     sm  28  — a dense table row, where the avatar is an identity marker, not a face.
     md  64  — the CARD. This is a person the operator is deciding about; 44px rendered a face
               too small to recognise, which is the whole reason the photo was added.
     lg  72  — retained for any caller wanting the old header size.
     xl 112  — the DOSSIER header, where the rep or operator studies the face before an
               approach. Sized against the 96px VPQS ring beside it so the person leads and the
               score supports, rather than the two competing. */
.lead-avatar--md { width: 64px; height: 64px; }
.lead-avatar--sm { width: 28px; height: 28px; }
.lead-avatar--lg { width: 72px; height: 72px; }
.lead-avatar--xl { width: 112px; height: 112px; }
.lead-avatar--lg.lead-avatar--initials { font-size: 1.5rem; }
.lead-avatar--xl.lead-avatar--initials { font-size: 2.4rem; }
/* --- 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;
  /* ENLARGE MUST ENLARGE. Sizing purely to the source meant a small stored photo opened at its
     natural size — Alison Lipman's is 100x100, so "click to enlarge" produced something SMALLER
     than the 112px avatar that was clicked (RA live drive 2026-09-10). Stored photos are often
     80-200px, so this is the common case, not the edge one. A floor makes the control keep its
     promise; the upscale is soft on a small source, which is honest — it is the resolution
     LinkedIn served, and a soft large face is more use for recognition than a crisp tiny one. */
  min-width: min(78vw, 300px);
  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; }

/* --- ADR-0045: paste a lead photo (operator dossier hero) ------------------------------------
   The hero avatar becomes a small column so "Change photo" and the provenance caption sit under
   the face. With NO photo (and the server allowing a paste) the initials ARE the control: a
   dashed ring and a "+" badge say "you can add one here". */
.lead-hero__avatar {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  max-width: 9rem; text-align: center;
}
.lead-avatar-add {
  position: relative; display: inline-block; border-radius: 50%; line-height: 0;
  text-decoration: none; cursor: pointer;
}
.lead-avatar-add .lead-avatar {
  border: 2px dashed var(--color-border-strong, rgba(0, 0, 0, .3));
  transition: border-color .12s, filter .12s;
}
.lead-avatar-add:hover .lead-avatar { border-color: var(--color-accent-solid); filter: brightness(.97); }
.lead-avatar-add:focus-visible { outline: 2px solid var(--focus, #3b82f6); outline-offset: 3px; }
.lead-avatar-add::after {
  content: "+"; position: absolute; right: 2px; bottom: 2px;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-solid); color: var(--color-accent-ink);
  font-size: 1.1rem; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.lead-avatar-change { font-size: .82rem; font-weight: 600; }
.lead-hero__photo-note {
  margin: 0; font-size: .75rem; line-height: 1.3; color: var(--color-text-muted);
}
/* The dialog (0.28.2, RA 2026-10-02): ONE circle that you paste into and that then shows the
   photo — 180px across since 0.28.3 (RA: "go with 180px"; --avatar-paste-size), with its edge,
   focus ring, drag glow and inside scaled ×1.6 from the 112px it was built at. Same round shape
   and centre crop as the lead page's avatar; only the size differs. Three layers inside it: the
   empty face (initials faint +
   "Paste photo" + the shortcut), the preview canvas (exactly what Save stores), and on top a
   transparent contenteditable covering the whole circle, because right-click → Paste and
   Safari's ⌘V need an editable target (B13). Its caret and any character are transparent; the
   script clears text at once. The circle's own rules are PAIRED with `.lead-avatar` so they win
   on specificity, not on source order (the css-cascade gate). Colours are tokens only.
   The instruction above the circle (0.28.5, RA 2026-10-02: "on 1 line and in a font size smaller
   than the "Change photo" dialog title"): --fs-sm (14.4px) at regular weight, under the 16.8px
   bold title. That fits it on ONE line in the 420px dialog's 378px content box (307.6px measured
   in DejaVu Sans, the widest font we could measure); at a 360px phone the box is 286px and it
   wraps, BALANCED so the shortcut stays whole ("Paste a photo into the / circle (Ctrl+V / ⌘V).",
   not "… (Ctrl+V / / ⌘V)."). No nowrap on purpose: it would overflow the phone dialog, and a
   desktop user with an enlarged default font. */
.avatar-paste__hint {
  margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-regular); text-align: center;
  text-wrap: balance;
}
.avatar-paste__circle.lead-avatar {
  position: relative; align-self: center;
  width: var(--avatar-paste-size); height: var(--avatar-paste-size);
  border: 3px dashed var(--color-border-strong);
  background: var(--color-surface-inset);
  transition: border-color .12s, box-shadow .12s;
}
.avatar-paste__circle.lead-avatar[data-state="filled"] { border-style: solid; }
.avatar-paste__circle.lead-avatar:focus-within {
  outline: 3px solid var(--color-focus); outline-offset: 5px;
}
.avatar-paste__circle.lead-avatar[data-drag="on"] {
  border-color: var(--color-accent-solid); border-style: solid;
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-accent-solid) 22%, transparent);
}
.avatar-paste__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); line-height: var(--lh-tight); text-align: center; pointer-events: none;
}
.avatar-paste__initials {
  font-size: calc(var(--fs-display) * var(--avatar-paste-scale)); font-weight: var(--fw-bold);
  color: var(--color-text-faint); opacity: .45; letter-spacing: .01em;
}
.avatar-paste__cue {
  font-size: calc(var(--fs-micro) * var(--avatar-paste-scale)); font-weight: var(--fw-medium);
  color: var(--color-text);
}
.avatar-paste__keys { font-size: calc(var(--fs-badge) * var(--avatar-paste-scale)); color: var(--color-text-muted); }
.avatar-paste__preview {
  position: absolute; inset: 0; display: block;
  border-radius: 50%; overflow: hidden; background: var(--color-surface);
}
.avatar-paste__preview[hidden] { display: none; }
.avatar-paste__preview canvas { display: block; width: 100%; height: 100%; }
.avatar-paste__target {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 50%; overflow: hidden; outline: none; cursor: default;
  color: transparent; caret-color: transparent; background: transparent;
  font-size: var(--fs-micro); white-space: nowrap;
}
.avatar-paste__status {
  margin: 0; min-height: 1.3em; text-align: center;
  font-size: var(--fs-sm); color: var(--color-text-muted);
}
.avatar-paste__status[data-kind="error"] { color: var(--p-red); font-weight: var(--fw-medium); }
.avatar-paste__file { font-size: var(--fs-sm); }
/* With the script running, the raw "Choose File / photo.jpg" chrome is visually hidden — the
   .sr-only pattern, so it stays focusable and announced; the label is its visible face and wears
   the keyboard focus ring. Without JS it stays visible: nothing else would show the chosen file. */
.avatar-paste[data-js] .avatar-paste__file {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.avatar-paste__choose { align-self: center; display: inline-flex; align-items: center; }
.avatar-paste[data-js] .avatar-paste__file:focus-visible + .avatar-paste__choose {
  outline: 2px solid var(--color-focus); outline-offset: var(--focus-offset);
}
/* This dialog's × sits top-RIGHT (RA 2026-10-02); the shared modal default stays top-left.
   Paired with the host class so it wins on specificity. */
.assign-modal__close.avatar-paste__close { left: auto; right: var(--space-2); }
/* ONE action row (0.28.4, RA 2026-10-02): Save · Remove photo · Cancel, the dialog's last child,
   outside both forms (each button names its form with `form=`). The remove form now holds hidden
   fields only, so it takes no space. The row's side padding is the form's, so it lines up with
   the content above; it WRAPS rather than overflow a phone-width dialog, Save first. Save takes
   the row's spare width (the shared modal rule); here the red Remove keeps its own width rather
   than claim half of it — paired with the host class so this wins on specificity, not source
   order. */
.avatar-paste__remove { display: none; }
.avatar-paste__actions { flex-wrap: wrap; padding: 0 var(--space-5) var(--space-5); }
.avatar-paste__actions.assign-modal__actions .btn-danger { flex: 0 0 auto; }
/* 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); }
/* Unscored (VPQS null) — neutral: no band accent, a faint "—" label, no filled arc.
   The card's own data-band attribute is omitted (React drops null), so the card
   border stays neutral too. (RA whole-spine gameplay 2026-08-23.) */
.vpqs-ring[data-unscored="true"] .vpqs-ring__arc { stroke: var(--color-surface-inset); }
.vpqs-ring__label[data-unscored="true"] { fill: var(--color-text-faint); }
.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; }
/* UX-3/4 — panel header row with an inline Edit affordance. */
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel__head > h2 { margin: 0; }
.panel__edit {
  font-size: .85rem; font-weight: var(--fw-medium); color: var(--color-accent);
  text-decoration: none; white-space: nowrap; padding: .25rem .5rem;
  border-radius: var(--radius-sm);
}
.panel__edit:hover { background: var(--color-surface-inset); text-decoration: none; }
/* UX-3 — the unified handoff header (avatar · name · title/company). */
.lead-hero {
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0 0 var(--space-3);
}
.lead-hero__id { flex: 1; min-width: 0; }
.lead-hero__name { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.lead-hero__prof { margin: .2rem 0 0; color: var(--color-text-muted); font-size: 1rem; }
/* ADR-0033 — the lead's location under the hero professional line (faint sub-detail). */
.lead-hero__loc { margin: .1rem 0 0; color: var(--color-text-faint); font-size: .9rem; }
.lead-hero__back { flex: 0 0 auto; }
/* UX-4 — contact-edit modal: a responsive two-column field grid + error line. */
.contact-modal { max-width: 640px; }
.contact-modal__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin: var(--space-3) 0;
}
.contact-modal__grid .assign-modal__field { margin: 0; }
/* URL fields span both columns so the whole link is visible (+ a title tooltip). */
.contact-modal__grid .assign-modal__field--wide { grid-column: 1 / -1; }
.contact-modal__grid .assign-modal__field input,
.contact-modal__grid .assign-modal__field select {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text); font-size: .95rem; width: 100%;
}
.assign-modal__error {
  margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
  background: var(--danger-fill); color: var(--danger-ink);
  border: 1px solid var(--danger-line); border-radius: var(--radius-sm);
  font-size: .9rem;
}
@media (max-width: 640px) { .contact-modal__grid { grid-template-columns: 1fr; } }

.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));
}
/* UNIFORM cards (RA 2026-08-11): grid stretches every card to the row's height; each
   card is name + 3 fixed lines (title/company/location, blank when unknown) + a bottom
   badge line, so they read as a tidy matrix. */
.rel-card {
  display: flex; align-items: stretch; gap: .6rem; min-width: 0;
  padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface-inset);
}
.rel-card > .lead-avatar { align-self: flex-start; }  /* keep the avatar top-aligned */
.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; min-height: 1.15em;
  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; }
/* the bottom-most line: degree + LinkedIn/Facebook badges — anchored to the card bottom
   (margin-top:auto), with a reserved min-height so it lines up even when a card has none. */
.rel-card__badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-top: auto; padding-top: .4rem; min-height: 1.5rem;
}
.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);
}

/* Promote affordance (ADR-0039). Three mutually exclusive states, and each must LOOK like
   what it is — a disabled control styled as an active one is the fake-affordance failure
   (LL-037), and a promoted card that still looks clickable invites a duplicate lead. */
.rel-card__promote-form { display: contents; }
.rel-card__promote {
  font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .1rem .45rem; border-radius: 999px; border: 1px solid transparent;
  background: color-mix(in oklch, var(--p-blue) 14%, transparent);
  color: var(--p-blue); cursor: pointer;
}
.rel-card__promote:hover { background: color-mix(in oklch, var(--p-blue) 24%, transparent); }
.rel-card__promote:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }

/* The trash-can — take ONE connection off this lead (dossier_0015).
   MUTED UNTIL APPROACHED, on purpose. It sits on every row of a table the operator reads far
   more often than they curate, so at rest it must not compete with the promote beside it or
   with the data. It gains its destructive red on hover and on keyboard focus — the moment the
   operator is actually aiming at it — rather than painting the whole column with warning
   colour. Focus gets the SAME treatment as hover: a keyboard user must see what a mouse user
   sees before committing.
   The danger colour still never stands alone: the icon carries a title and .sr-only words that
   name the person, and the server confirms before anything is removed. */
.rel-card__remove-form { display: contents; }
/* Size comes from `.icon-btn svg` (20px), the same as every other delete control. An earlier
   16px override here made this one smaller than its siblings for no reason; the RA's read was
   that the bigger icons are "easier to see and use". */
.rel-card__remove { padding: .15rem .3rem; margin-left: .25rem; }

/* EVERY DELETE IS RED, AND RED AT REST (RA, live 2026-09-15: "the trash can is light gray and
   hard to see ... i think we should color it red, actually all delete trash cans should be
   colored red").

   Previously each delete drew itself muted and only became red on hover — a destructive control
   that looks identical to a neutral one until you are already pointing at it. The operator has
   to hunt for it, and worse, cannot tell it apart from the harmless icons beside it at a glance.
   Destructive means destructive on sight.

   ONE class, worn by every one of them — the connection trash-can, both leads-list deletes, both
   "Delete" text actions, and the rep trash — so the next delete control added inherits the rule
   by wearing the class rather than by someone remembering this decision.

   Colour is never the ONLY signal: each of these carries a title and an aria-label naming what
   it deletes, and every one routes through a confirmation. Red is the glance-level cue on top of
   that, not a replacement for it. */
/* COMPOUND SELECTORS, and that is the whole fix. The first cut wrote a bare `.trash-danger`
   colour rule — specificity (0,1,0) — at line ~1321, while `.icon-btn { color: var(--color-primary) }`
   sits at ~1560 with the SAME specificity. Equal specificity is decided by source order, the
   later rule won, and every trash can rendered BLUE. The rule was present, correct, and
   completely inert (RA: "the trash icons were better, bigger, easier to see and use but blue
   not red").

   Pairing the modifier with each host class it actually rides on takes it to (0,2,0), so it
   beats the host rule no matter where either lands in the file. Never rely on "mine comes
   later" — the next person to reorder this stylesheet has no way to know that was load-bearing. */
.trash-danger,
.icon-btn.trash-danger,
.btn-secondary.trash-danger,
.rep-trash.trash-danger { color: var(--danger-ink); opacity: 1; }

.trash-danger:hover,
.icon-btn.trash-danger:hover,
.btn-secondary.trash-danger:hover,
.rep-trash.trash-danger:hover {
  color: var(--danger-ink);
  background: color-mix(in oklch, var(--danger-ink) 14%, transparent);
}
.trash-danger:focus-visible,
.icon-btn.trash-danger:focus-visible,
.btn-secondary.trash-danger:focus-visible {
  outline: 2px solid var(--danger-ink); outline-offset: 2px;
}
/* Blocked: visibly inert, and NOT clickable. */
.rel-card__promote[data-disabled] {
  background: color-mix(in oklch, var(--color-text-faint) 12%, transparent);
  color: var(--color-text-faint); cursor: not-allowed;
}
/* The reason, VISIBLE (DEF-BLOCKED-REASON-TOOLTIP-ONLY). It used to live only in the pill's
   `title`, which an aria-disabled span cannot deliver to a keyboard and touch cannot deliver
   at all — so the explanation reached a mouse on a desktop and nobody else. Quiet, but on the
   page: a reason nobody can read is not a reason. */
.rel-card__promote-why {
  font-size: .68rem; line-height: 1.35; color: var(--color-text-muted);
  flex-basis: 100%; margin-top: .15rem;
}
/* Promoted: a settled fact, not an action. Reads as a badge beside the degree chip. */
.rel-card__promote[data-promoted] {
  background: color-mix(in oklch, var(--p-green) 16%, transparent);
  color: var(--p-green); cursor: default;
}
.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); }

/* Operator handoff Contact grid (ADR-0033) — type-aware, clickable values with NO
   mid-word / mid-URL wrapping. Wider columns so emails + phones sit on one line;
   values wrap only at spaces (addresses), never inside a token. */
.contact-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem 1.6rem; }
.contact-grid .kv-item dd { overflow-wrap: normal; word-break: normal; }
.contact-link { color: var(--color-primary); text-decoration: none; }
.contact-link:hover { text-decoration: underline; }
.contact-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
/* the shortened LinkedIn/Facebook label stays on one line (never breaks mid-URL). */
/* External links WRAP instead of nowrap (RA 2026-09-20): an engager-anchored URN URL is
   ~60 unbroken chars, and nowrap punched it through the grid cell over the Facebook row.
   overflow-wrap:anywhere keeps the full URL readable + clickable across lines; the ↗ just
   follows the final fragment. */
.contact-link--ext { overflow-wrap: anywhere; word-break: break-all; }
/* an unavailable value is left BLANK (RA preference — never "N/A"); the invisible
   nbsp keeps the empty cell's line-height so the grid rows stay aligned. */
.contact-grid .kv-blank::before { content: "\00a0"; }

/* ADR-0033 Assigned-tab per-rep grouping — each rep's leads under a header carrying
   the rep name + count + a per-rep GROUP "Download packet" button; each lead card/row
   also carries its own per-lead "Download" (both options). */
/* Structured group separation (RA 2026-08-11): a clear horizontal separator BETWEEN groups
   (above/below) + generous whitespace marks the boundaries; the header carries a rep
   avatar + bold name + a neutral count badge. Identity is the name/avatar, NOT a color, so
   the app's status colors (VPQS/compliance) stay meaningful. Cards view only — the list
   view uses its own group-header row. */
.rep-group { margin: 0; }
/* the between-group divider bar (skips the first group) — NM brand blue, a touch thicker. */
.rep-group + .rep-group {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 3px solid var(--c-primary, #1f2a5c);
}
.rep-group__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0; margin-bottom: var(--space-3);
}
.rep-group__name { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
/* the count is a small neutral BADGE (not colored status) */
.rep-group__count {
  display: inline-flex; align-items: center; padding: .1rem .5rem;
  border-radius: 999px; background: var(--color-surface-inset);
  color: var(--color-text-muted); font-size: .72rem; font-weight: 600;
  white-space: nowrap;
}
/* push the group download icon to the far right of the header */
.rep-group__packet { margin: 0 0 0 auto; }
/* list view: the group-header row gets the same avatar+name+badge treatment. */
.rep-group-row .rep-group__head { border-bottom: 0; }
.lead-packet-form { margin: 0; display: inline; }
/* list view: the group header spans the row; strip the default cell chrome. */
.rep-group-row > th { background: transparent; padding: var(--space-3) 0 0; border: 0; }

/* Icon-only action button (RA 2026-08-11 — the download control is a standard icon,
   not a text button). Clean chrome, clear hover + keyboard focus, accessible via
   aria-label/title. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem; border: 0; background: none; color: var(--color-primary);
  cursor: pointer; border-radius: 6px; line-height: 0;
}
.icon-btn:hover { background: var(--color-surface-inset); color: var(--color-primary-dark); }
.icon-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.icon-btn svg { width: 20px; height: 20px; display: block; }
/* "Download all packets" — the bulk action stays a labeled button (discoverable). */
.download-all-form { margin: 0; }
.download-all-btn { display: inline-flex; align-items: center; gap: .35rem; }
.download-all-btn svg { width: 15px; height: 15px; }

/* Contact address on two lines: street, then city/state/zip (RA 2026-08-11). */
.contact-address { display: inline-flex; flex-direction: column; }
.contact-address__line { display: block; }

.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: flex; align-items: center; gap: .45rem;
  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); }
/* EVERY Icon context must size its SVG. The Icon component emits an SVG with no
   width/height attributes, so an unsized context renders it at the replaced-element
   default (~300×150) — the HUGE download arrow the RA hit in the avatar menu
   (2026-09-21; regression from c86ff21, which retired the ⬇ glyph for <Icon> without
   adding a rule here). Second occurrence of the icon-sizing class (the oversized
   refresh icons were the first), so the whole class is now enforced by
   scripts/verify_icon_contexts_sized.py — a context added without a rule fails the
   gate, not the operator's eyes. */
.role-menu-item svg, .btn-primary svg, .btn-secondary svg,
.lead-packet-form svg, .success-banner svg {
  width: 14px; height: 14px; flex: none;
}
.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; }
/* ADR-0034: keep a gap between adjacent row actions (e.g. Unassign + Delete). */
.col-actions a.btn-xs + a.btn-xs { margin-left: var(--space-2); }

/* ── 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;
}

/* --- Assign modal (ADR-0033 operator UX) — native <dialog> ----------------- */
.assign-modal {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-2);
  max-width: 420px;
  width: calc(100% - var(--space-8));
  /* A tall modal must NEVER run off-screen — cap to the viewport + scroll inside. */
  max-height: 90vh;
  overflow-y: auto;
}
/* Center for BOTH open paths: showModal() (top layer) AND the no-JS `open`
   attribute fallback (which otherwise renders in document flow, off-screen). */
.assign-modal[open] { position: fixed; inset: 0; margin: auto; }
.assign-modal::backdrop { background: oklch(0.2 0.02 260 / 0.45); }
.assign-modal__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.assign-modal__close {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);           /* X in the upper-LEFT (per spec) */
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.assign-modal__close:hover { background: var(--color-surface-inset); color: var(--color-text); }
.assign-modal__title { margin: var(--space-3) 0 0; font-size: 1.05rem; }
.assign-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: .9rem;
  color: var(--color-text-muted);
}
.assign-modal__field select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
}
.assign-modal__actions { display: flex; gap: var(--space-3); align-items: center; }
.assign-modal__actions .btn-primary,
.assign-modal__actions .btn-danger { flex: 1 1 auto; }
.assign-modal__actions .btn-secondary { flex: 0 0 auto; }

/* ---- confirm (destructive-action) page ----------------------------------
   ConfirmPage.tsx ("Delete lead", "Unassign lead", "Add to DNC", "Send
   invitation") shipped with NO rules for these classes, so its action row had
   no layout at all: the confirm <button> sits inside a block-level <form>
   while Cancel is an inline <a>, leaving them misaligned/stacked rather than a
   proper button row (RA live-drive 2026-08-24). Give the row real layout and
   make the <a> match the <button>'s box so both render identically. */
.confirm-panel { max-width: 44rem; }
.confirm-detail {
  margin: var(--space-3) 0 0; font-size: .95rem; line-height: 1.5;
  color: var(--color-text);
}
.confirm-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3); margin-top: var(--space-5);
}
/* the <form> must not create a full-width block box in the flex row */
.confirm-form { margin: 0; display: flex; }
/* an <a> is inline by default — give it the same box as the <button> so the
   two controls share height, padding and baseline */
.confirm-actions .btn-primary,
.confirm-actions .btn-danger,
.confirm-actions .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; white-space: nowrap; text-decoration: none;
}
.assign-modal__body {
  margin: var(--space-3) 0 0; font-size: .92rem; line-height: 1.45;
  color: var(--color-text);
}
/* Destructive primary — ADR-0033 R3 remove-rep confirm. */
.btn-danger {
  font: inherit; font-weight: 600; cursor: pointer; text-align: center;
  border-radius: var(--radius-sm); padding: .58rem 1.05rem;
  border: 1px solid var(--danger-line);
  background: var(--danger-ink); color: #fff;
  transition: filter .12s;
}
.btn-danger:hover { filter: brightness(1.08); text-decoration: none; }
/* the trash affordance hints destructive on hover (R3). */
.rep-trash:hover { color: var(--danger-ink); opacity: 1; }

/* --- Toast (ADR-0033 Klemm #7) — transient auto-dismissing notification ----- */
.toast-region {
  position: fixed;
  top: calc(var(--space-4) + 3.2rem);   /* clear the app header */
  right: var(--space-4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(92vw, 30rem);
  pointer-events: none;                  /* only the toast itself is interactive */
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-2);
  font-size: .92rem;
  animation: toast-in .22s ease-out;
}
.toast--success { border-left-color: var(--p-green); }
.toast--error   { border-left-color: var(--p-red); }
.toast__msg { flex: 1; }
.toast__close {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 1.2rem; line-height: 1;
  border-radius: var(--radius-sm);
}
.toast__close:hover { background: var(--color-surface-inset); color: var(--color-text); }
.toast--hide { opacity: 0; transform: translateY(-6px); transition: opacity .26s ease, transform .26s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast--hide { transition: opacity .01s; transform: none; }
}

/* --- Operator lead cards (ADR-0033 Klemm #3) — actions + rep line + toggle row */
.stream-controls { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; margin: var(--space-3) 0 var(--space-2); }
.stream-hint { font-size: .8rem; color: var(--color-text-muted); margin-right: auto; }
/* ADR-0034 INC-2 — the Sent-tab time-window selector. */
.sent-window { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-3); font-size: .85rem; }
.sent-window__label { color: var(--color-text-muted); }
.sent-window__select {
  appearance: none; -webkit-appearance: none;
  padding: .3rem 2rem .3rem .7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm, 6px);
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit; font-size: .85rem; line-height: 1.5;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: .7rem;
  transition: border-color .12s ease;
}
.sent-window__select:hover { border-color: var(--c-primary); }
.sent-window__select:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); }
.sent-window__go {
  padding: .28rem .7rem; border: 1px solid var(--c-primary); border-radius: var(--radius-sm, 6px);
  background: var(--c-primary); color: #fff; font: inherit; font-size: .85rem; cursor: pointer;
}
.lead-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.lead-card__rep { font-size: .85rem; color: var(--color-text-muted); font-weight: var(--fw-medium); }

/* --- Bulk-assign (ADR-0033 Klemm #10) — check leads → assign to a rep --------- */
.bulk-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  background: var(--color-surface-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.bulk-bar__label { color: var(--color-text-muted); font-size: .9rem; }
.lead-card--selectable { position: relative; }
.lead-card__check { position: absolute; top: var(--space-3); right: var(--space-3); width: 1.15rem; height: 1.15rem; cursor: pointer; z-index: 2; }
.col-check { width: 2rem; text-align: center; }
/* UX-1 — the lead's own professional line (title · company) on the cards. */
.lead-card__prof { font-size: var(--fs-sm); color: var(--color-text); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* VIA chip (2026-09-11) — the prospect this lead came in through. Quiet by default: it is
   context, not a call to action, and must not compete with the prospect's own name. */
.lead-card__via{display:inline-block;font-size:11px;color:var(--c-muted,#6b7280);
  text-decoration:none;border-bottom:1px dotted currentColor;margin-top:2px}
.lead-card__via:hover,.lead-card__via:focus-visible{color:var(--c-primary,#1f2a5c)}

/* ADR-0033 — the lead's own location, a faint sub-line under the professional line
   (mirrors the connection card's location treatment). */
.lead-card__loc { font-size: var(--fs-sm); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub--loc { color: var(--color-text-faint); }
/* UX-2 — the whole card is clickable → the handoff view (stretched link). The
   name is the link; a ::after covers the card; interactive controls (checkbox,
   action buttons) sit ABOVE it via z-index so they still work. */
.lead-card--clickable { position: relative; cursor: pointer; }
.lead-card__link { text-decoration: none; color: inherit; }
.lead-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-md); }
.lead-card--clickable:hover { border-left-color: var(--color-accent); }
.lead-card--clickable .lead-card__actions { position: relative; z-index: 1; }
.prospect-name--link { text-decoration: none; color: var(--color-text); }
.prospect-name--link:hover { color: var(--color-accent); text-decoration: underline; }

/* --- Operator Reps tab (ADR-0033 Klemm rework) — cards + counts + add/trash --- */
.stream-head__actions { display: flex; align-items: center; gap: var(--space-3); }
.rep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.rep-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-left: 4px solid var(--c-accent-gold);
  border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-1);
}
.rep-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.rep-card__name { font-weight: var(--fw-bold); }
.rep-counts { font-size: .85rem; color: var(--color-text-muted); display: inline-flex; gap: .4rem; align-items: center; }
.rep-counts__new { color: var(--color-text); font-weight: var(--fw-medium); }
.rep-counts__sep { opacity: .5; }
/* ADR-0033 K6 — rep-packet download affordances. */
.rep-packet-form { margin: 0; }
/* P4: the packet control is now a submit <button> (POST — marks New → Assigned);
   reset the native button chrome so it reads as the link it replaced. */
.rep-packet-link { display: inline-block; margin-top: var(--space-2); padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--color-accent); text-decoration: none; cursor: pointer; }
.rep-packet-link:hover { text-decoration: underline; }
.packet-cta { margin: var(--space-2) 0 var(--space-3); }
/* the remove control is an icon-btn (matches the download icon) but reads DESTRUCTIVE:
   muted by default, danger tint on hover/focus (see the .rep-trash:hover rule above). */
.rep-trash { color: var(--color-text-muted); text-decoration: none; }
.rep-trash--disabled { opacity: .3; cursor: not-allowed; }

/* ─── THE SHEET (2026-09-13) ────────────────────────────────────────────────────────────────
   The operator dossier's decision layer. Two additions, both about making a judgement readable
   before any scrolling: a three-line DECISION HEADER, and SURFACE LANES that keep engagers
   visibly distinct from walked connections (R10).

   No sticky positioning. The chrome comment at :299 records a deliberate "no sticky/blur"
   choice for this app, and the adopted design's sticky command strip and pick bar would reverse
   it. Reversing a recorded decision is worth its own conversation, not a quiet CSS add — so the
   header scrolls with the page like everything else here. */

.decision-header {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-brand, var(--c-border));
  border-radius: var(--radius-md, 8px);
  background: var(--c-surface-2, var(--c-surface));
}

.decision-header__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* The three keys are a fixed-width column so the values align into a readable edge. Tabular
   figures because these lines are read as a comparison, and proportional digits make equal
   counts look unequal. */
.decision-header__key {
  flex: 0 0 5.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-muted, #6b7280);
}

.decision-header__line > span:not(.decision-header__key) {
  font-variant-numeric: tabular-nums;
}

/* A DEGRADED read is styled as a caveat, never as a value. It must not be mistakable for a
   count at a glance — the whole point is that we do NOT know. */
.decision-header__degraded {
  font-style: italic;
  color: var(--c-warn-text, #92400e);
}

/* ─── Surface lanes ──────────────────────────────────────────────────────────────────────── */

.rel-lane { margin: 0 0 1.25rem; }
.rel-lane:last-child { margin-bottom: 0; }

.rel-lane__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Says what the lane MEANS, in ordinary words, at a weight that does not compete with the
   count. "Engagers · 11" alone assumes the reader knows the term; NM only started using it
   this month. */
.rel-lane__note {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--c-text-muted, #6b7280);
}

/* The ENGAGER lane carries the accent, because it is the warmer signal and the one NM asked
   for. The connection lane stays neutral — if both were accented neither would read as the
   more interesting one. */
.rel-lane[data-surface="post_engagement"] .rel-lane__head {
  border-bottom-color: var(--c-brand, var(--c-border));
}
.rel-lane[data-surface="post_engagement"] .rel-lane__note {
  color: var(--c-brand, var(--c-text-muted));
}

@media (max-width: 640px) {
  .decision-header__key { flex-basis: 100%; }
  .decision-header__line { gap: 0.15rem; }
}

/* ─── THE SHEET · layout (§0 command strip, §3 grid, §3a ledger) ─────────────────────────────
   What makes the page read as a SHEET rather than a stack of cards: a fixed left rail for the
   contact ledger, the evidence column beside it, and one command row above both. */

.command-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-border);
}
.command-strip__spacer { flex: 1 1 auto; }

.command-strip__back,
.command-strip__action {
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-text-muted, #6b7280);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm, 5px);
}
.command-strip__back:hover,
.command-strip__action:hover {
  color: var(--c-text, #111827);
  background: var(--c-surface-2, rgba(0, 0, 0, 0.04));
}
.command-strip__back:focus-visible,
.command-strip__action:focus-visible {
  outline: 2px solid var(--c-brand, #2563eb);
  outline-offset: 2px;
}

/* §3 — the two-column sheet. Single column until there is genuinely room for a 22rem rail plus
   a readable evidence column; below that the DOM order (contact first) is the layout, which is
   the order a rep needs on a phone anyway. */
.sheet-grid {
  display: grid;
  gap: 1.1rem;
  align-items: start;
}

/* SUPERSEDED 2026-09-14. Contact was in a 20rem rail and a real work email wrapped across
   three lines the moment live data arrived. It is full-width above the body now; `.sheet-body`
   carries the two-column split below it. */
.sheet-body { display: grid; gap: 1.1rem; align-items: start; }
@media (min-width: 1040px) {
  .sheet-body { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* §3a — the contact LEDGER. `.contact-row*` rules already exist above (written for the rep
   dossier); this only supplies the container, which did not. One row per field, labels on a
   shared edge, so a missing value reads as a gap in a column rather than as a missing card. */
.contact-ledger {
  display: grid;
  gap: 0;
  margin: 0;
}
.contact-ledger .contact-row { border-bottom: 1px solid var(--c-border-subtle, rgba(0,0,0,0.06)); }
.contact-ledger .contact-row:last-child { border-bottom: 0; }

/* The lanes sit in the evidence column, so their cards want a tighter minimum than the
   full-width grid assumed — otherwise a 22rem rail squeezes them to one card per row. */
@media (min-width: 1100px) {
  .rel-lane .rel-cards { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}

/* ─── THE SHEET · lanes and tables (2026-09-14) ──────────────────────────────────────────────
   Taken from the adopted mockup. The lane is the organising unit: a head naming WHERE these
   people came from, a table comparing them, and a footer saying what was refused.

   Colours come from the existing app tokens rather than the mockup's own palette, so the sheet
   inherits the tenant's brand and both themes instead of pinning one. The mockup's structure is
   what was adopted; its literal hex values were a mockup's convenience. */

.lane { border-bottom: 1px solid var(--c-border); }
.lane:last-child { border-bottom: 0; }

/* A 3px left edge marks the lane as a provenance boundary, which is the whole point of the
   redesign — every person sits under a header that states where they came from. */
.lanehead {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.6rem 1.1rem;
  border-left: 3px solid var(--c-brand, var(--c-border));
}
.lanehead--muted { border-left-color: var(--c-text-muted, #9ca3af); }
.lane-spacer { flex: 1 1 auto; }

.lanetitle { font-weight: 700; font-size: 0.86rem; }
.laneprov { font-size: 0.76rem; color: var(--c-text-muted, #6b7280); }

/* COVERAGE reads as a warning by default and only turns positive when everything claimed was
   actually examined. "read 100 of 554" must never look like an achievement. */
.lanecov {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  color: var(--c-warn-text, #92400e);
  background: var(--c-warn-bg, #fef3c7);
}
.lanecov.full { color: var(--c-ok-text, #065f46); background: var(--c-ok-bg, #d1fae5); }

.lane-empty {
  margin: 0;
  padding: 0.55rem 1.1rem 0.8rem;
  font-size: 0.8rem;
  color: var(--c-text-muted, #6b7280);
}

/* The refusal footer. It is not decoration: "walked it and admitted nobody" and "never walked
   it" are different facts, and this is where the difference is stated. */
.refused {
  padding: 0.5rem 1.1rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--c-text-muted, #6b7280);
  background: var(--c-surface-2, rgba(0, 0, 0, 0.02));
  border-top: 1px dashed var(--c-border);
}

/* Wide content scrolls in its OWN container so the page body never scrolls sideways. */
.tw { overflow-x: auto; }

.lane table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.lane th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted, #6b7280);
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.lane th:first-child, .lane td:first-child { padding-left: 1.1rem; }
.lane td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.lane tbody tr:last-child td { border-bottom: 0; }
.lane tbody tr:hover { background: var(--c-surface-2, rgba(0, 0, 0, 0.03)); }
.lane td.act { text-align: right; white-space: nowrap; padding-right: 1.1rem; }
.lane .nm { font-weight: 600; }
.lane .hl { color: var(--c-text-muted, #6b7280); font-size: 0.78rem; }

.deg {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2, rgba(0, 0, 0, 0.03));
  color: var(--c-text-muted, #6b7280);
}
/* SAME SHAPE, DIFFERENT STYLE. The chip keeps its box so the Deg column scans as one column
   (1st · 2nd · ?), and goes dashed + muted so it cannot be read as a degree value. A solid badge
   asserts a degree; this asserts an unknown, which is a different claim and must look like one. */
.deg--unread {
  border-style: dashed;
  color: var(--c-text-muted, #9ca3af);
  background: transparent;
  cursor: help;
  font-weight: 600;
}
.done { font-size: 0.72rem; color: var(--c-ok-text, #065f46); font-variant-numeric: tabular-nums; }

/* ─── Lane tables scroll at 5 rows (RA-directed 2026-09-14) ──────────────────────────────────
   A lead with 47 connections across several postings ran to multiple screens, and the decision
   header — the thing the page exists to deliver — scrolled away before the second lane.

   VISUAL ONLY. Every row stays in the DOM: reachable by scroll, keyboard, browser-find and
   print. Nothing is filtered, which is why the lane head states the full count beside the title.
   A cap that hides rows without saying how many is the same defect as a filter that hides them.

   The height is in `em` so it tracks the table's own font size — a fixed pixel height would show
   four rows or six as soon as the type scale moved. ~2.35em per row + the header. */
.lane .tw {
  overflow-y: auto;
  max-height: calc(2.35em * 5 + 2.2em);
}

/* The header must survive the scroll, or a scrolled table is a grid of unlabelled cells. */
.lane thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-surface, #fff);
}

.lanecount {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted, #6b7280);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--c-border);
  border-radius: 3px;
}

/* Reduced motion is unaffected (no animation here), but a coarse pointer benefits from momentum
   scrolling inside the lane rather than the page. */
@media (hover: none) {
  .lane .tw { -webkit-overflow-scrolling: touch; }
}

/* ─── §RAIL ──────────────────────────────────────────────────────────────────────────────────
   A coverage panel, not a summary. Its job is to state what the page does NOT know as plainly
   as what it does, because an operator is about to brief a rep on the strength of it. */

.sheet-rail {
  align-self: start;
  padding: 0.9rem 1rem;
  background: var(--c-surface-2, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md, 8px);
  font-size: 0.8rem;
}

.rail-grp { margin: 0 0 1.1rem; }
.rail-grp:last-of-type { margin-bottom: 0.6rem; }

.sheet-rail h3 {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-muted, #6b7280);
}

.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--c-border);
}
.stat:last-child { border-bottom: 0; }
.stat .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat--muted { color: var(--c-text-muted, #6b7280); }

/* A caveat is not a stat. It must not line up in the number column, or it reads as one more
   figure rather than as the reason a figure is incomplete. */
.rail-caveat {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--c-text-muted, #6b7280);
}

.rail-empty,
.rail-degraded {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--c-text-muted, #6b7280);
}
/* DEGRADED is italic and warn-coloured so it cannot be skimmed as an ordinary empty state. The
   two mean opposite things: one is a fact about the lead, the other is a failure of ours. */
.rail-degraded { font-style: italic; color: var(--c-warn-text, #92400e); }

.rail-warn {
  margin-top: 0.8rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-warn-text, #92400e);
  border-radius: var(--radius-sm, 5px);
  background: var(--c-warn-bg, #fef3c7);
  color: var(--c-warn-text, #92400e);
  font-size: 0.74rem;
  line-height: 1.45;
}
.rail-warn b { display: block; margin-bottom: 0.15rem; color: var(--c-text, #111827); }

.rail-note {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.71rem;
  line-height: 1.5;
  color: var(--c-text-muted, #6b7280);
}

/* ─── §1 HERO CHIPS ──────────────────────────────────────────────────────────────────────────
   Score, compliance gate, and who this person came in through — the three facts a rep wants
   before reading anything else. The widgets are the SAME ones the leads list uses, so this row
   only has to place them. */
.hero-chips {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
/* The via chip is a LINK, so it gets a visible affordance the inert pills beside it do not. */
.hero-chips__via { align-self: center; }

/* ─── THE SHEET · the mockup's chrome (2026-09-14) ───────────────────────────────────────────
   What makes it read as a SHEET rather than a stack of panels: a dark command bar clamped to the
   top of a white card, on a recessed ground. */

.command-strip {
  background: var(--c-primary, #1f2a5c);
  color: #fff;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.6rem 1rem;
  margin-bottom: 0;
}
.command-strip__back,
.command-strip__action {
  color: rgba(255, 255, 255, 0.78);
  border-radius: 5px;
}
.command-strip__back:hover,
.command-strip__action:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.command-strip__back:focus-visible,
.command-strip__action:focus-visible { outline: 2px solid var(--c-accent, #c8a85a); }

/* The card the strip caps. Everything from the hero down sits inside it. */
.sheet-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--c-border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
}

/* CONTACT AS A FULL-WIDTH LEDGER: two label/value pairs per row. Half the vertical space of a
   single column, and — the reason it moved — a real email address fits on ONE line. */
@media (min-width: 900px) {
  .contact-ledger {
    grid-template-columns: 9.5rem minmax(0, 1fr) 9.5rem minmax(0, 1fr);
    column-gap: 1.2rem;
  }
  .contact-ledger .contact-row { display: contents; }
  .contact-ledger .contact-row__label,
  .contact-ledger .contact-row__value {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--c-border);
  }
}
/* An email or URL must never be the thing that decides the column width. */
.contact-row__value { overflow-wrap: anywhere; }

/* ─── THE SHEET · card interior ──────────────────────────────────────────────────────────────
   Re-grounded 2026-09-14 against the approved R12 mockup after the RA reported the built page
   "looks nothing like THE SHEET". The gap was never colour — it was that the sheet's own
   sections still looked like free-floating panels stacked on a background. In the mockup the
   card has NO padding of its own: every section is full-bleed and pads itself, which is what
   makes the horizontal rules run edge to edge instead of stopping short in a gutter. */
.sheet-card { padding: 0; }

.sheet-card > .lead-hero,
.sheet-card > .decision-header,
.sheet-card > .panel {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background: transparent;
}

/* HERO — the sheet's masthead, not a separate object floating above it. */
.sheet-card > .lead-hero {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.05rem 1.25rem;
}
.sheet-card > .lead-hero .lead-hero__name { margin: 0 0 0.15rem; }
.sheet-card > .lead-hero .lead-hero__prof,
.sheet-card > .lead-hero .lead-hero__loc { margin: 0; }
.sheet-card > .lead-hero .hero-chips { margin-top: 0.6rem; }

/* DECISION HEADER — three cells across, label above figure, hairline between. It read as
   three stacked rows because the grid had one column; the mockup's whole point is that these
   three questions are answered side by side, in one glance, before anything is scrolled. */
.decision-header { gap: 0; padding: 0; }
@media (min-width: 780px) {
  .decision-header { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.decision-header__line {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  margin: 0; padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--c-border);
}
.decision-header__line:last-child { border-bottom: 0; }
@media (min-width: 780px) {
  .decision-header__line {
    border-bottom: 0;
    border-right: 1px solid var(--c-border);
  }
  .decision-header__line:last-child { border-right: 0; }
}
.decision-header__key {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--c-text-muted);
}

/* SECTION HEADS — an inset band with an uppercase label and its count pushed right, so a
   section announces itself and its size the way the mockup's `.sechead` does. */
.sheet-card > .panel { padding: 0; }
.sheet-card > .panel > .panel__head {
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  background: var(--c-inset);
  border-bottom: 1px solid var(--c-border);
}
.sheet-card > .panel > .panel__head > h2 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-text-muted);
}
.sheet-card > .panel > .panel__head > :last-child:not(h2) { margin-left: auto; }
/* Everything in a panel that is NOT the head carries the card's gutter itself. */
.sheet-card > .panel > :not(.panel__head) { padding-left: 1.25rem; padding-right: 1.25rem; }
.sheet-card > .panel > :last-child:not(.panel__head) { padding-bottom: 1rem; }
.sheet-card > .panel > .panel__head + * { padding-top: 0.85rem; }

/* The contact ledger spans the gutter itself so its row rules reach the card edge. */
.sheet-card > .panel > .contact-ledger { padding-left: 0; padding-right: 0; }
@media (min-width: 900px) {
  .contact-ledger .contact-row__label { padding-left: 1.25rem; }
  .contact-ledger .contact-row__value:nth-of-type(even) { padding-right: 1.25rem; }
}

/* BODY — lanes beside an inset rail, both inside the card rather than beside it. */
.sheet-body { gap: 0; padding: 0; }
.sheet-body > .panel { border-bottom: 0; }
@media (min-width: 1040px) {
  .sheet-body > .sheet-rail {
    border-left: 1px solid var(--c-border);
    background: var(--c-inset);
  }
}
.sheet-rail { padding: 1rem 1.15rem; background: var(--c-inset); }

/* `.decision-header__key` carried `flex: 0 0 5.5rem` from when the line was a ROW — in a
   column that basis becomes a HEIGHT, which is why each label sat in an 88px void above its
   figure. Sized by content now; the cell's own padding does the spacing. */
.decision-header__key { flex: 0 0 auto; }

/* The lanes column is part of the sheet, not a panel resting on top of one. */
.sheet-body > .panel {
  background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.sheet-body > .panel > .panel__head {
  align-items: baseline; justify-content: flex-start; gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  background: var(--c-inset);
  border-bottom: 1px solid var(--c-border);
}
.sheet-body > .panel > .panel__head > h2 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-text-muted);
}
.sheet-body > .panel > .panel__head > :last-child:not(h2) { margin-left: auto; }
.sheet-body > .panel > :not(.panel__head) { padding: 0.85rem 1.25rem 1rem; }
/* The count beside a section head — mono + tabular so the digits sit still between reloads. */
.panel__count {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--c-text-muted);
}

/* The command strip's state line (mockup R12): where this lead stands, before anything is read. */
.command-strip__state {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-strip__state b { color: #fff; font-weight: 600; }

/* --- THE SHEET: on-page Assign (RA 2026-09-18) --------------------------------------------
   Orange because the OPERATOR is orange in the role color assignment (see
   .role-pill[data-role="OPERATOR"] above — same #dd7a33). A solid button, not a muted strip
   link: it is the page's primary act. */
.command-strip__assign {
  background: #dd7a33;
  color: #fff;
  border: 1px solid #c96a28;
}
.command-strip__assign:hover {
  background: #c96a28;
  color: #fff;
}

/* One Engagers table (RA 2026-09-18): WHERE a person engaged rides the row, not the table
   structure — "11 Aug + 18 Aug posts", or the honest "origin not recorded". */
.lane-origin-chip {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-text-muted, #6b7280);
}
/* Increment B2 — two spellings of one human. Amber, not red: a duplicate is a data
   state to act on, not a fault; the Merge control beside the trash can resolves it. */
.lane-dup-chip {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #92600a;
  background: #fdf3e0;
  border: 1px solid #f0d9ad;
  border-radius: 999px;
  vertical-align: 1px;
}
/* Fix H — "Photo ✓": a capture-state FACT (a sealed photo exists; it appears on
   promotion), never imagery (ADR-0030 §4). Green like .lanecov.full, not amber:
   good news, nothing to resolve. A NEW single class — nothing else targets it, so
   no equal-specificity override in either direction (css-cascade gate). */
.lane-photo-chip {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-ok-text, #065f46);
  background: var(--c-ok-bg, #d1fae5);
  border: 1px solid color-mix(in oklch, var(--c-ok-text, #065f46) 25%, transparent);
  border-radius: 999px;
  vertical-align: 1px;
}
/* Compound with the host class so the amber WINS BY SPECIFICITY, not source order
   (the css-cascade gate's rule — an equal-specificity override is invisible intent). */
.icon-btn.rel-card__merge { color: #92600a; }
.icon-btn.rel-card__merge:hover { color: #6e470a; }

/* =====================================================================================
   LEADS REDESIGN v2 (RA-approved mockup, 2026-09-20 — claude.ai/artifact/Hspke3RdPhVLTP7GU78Tx4)
   One quiet container · identity leads · one status pill · ONE action idiom (one labeled
   orange primary + one kebab holding EVERY action) · avatars on all surfaces.
   ===================================================================================== */

/* The v2 card overrides the legacy horizontal layout: vertical stack, content-sized. */
.lead-card--v2 {
  flex-direction: column; gap: 0.6rem; align-items: stretch;
  min-height: 0; padding: 1rem;
}
.lead-card--v2:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--color-text) 10%, transparent);
  transform: translateY(-2px);
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.lc-head { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0; }
.lc-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lead-card--v2 .lead-card__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.lead-card--v2 .lead-card__prof {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.lc-ring { flex-shrink: 0; }
/* RA mockup review: on a selectable card the ring shifts left so the (hover-revealed)
   checkbox can never touch it. */
.lc-ring--clear { margin-right: 1.9rem; }
.lead-avatar--card { width: 40px; height: 40px; font-size: 0.85rem; }
.lc-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lead-card--v2 .lead-card__loc {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-card__lifecycle { font-size: var(--fs-micro); color: var(--color-text); }
.lead-card__lifecycle b { font-weight: 600; }
.lc-foot {
  margin-top: auto; display: flex; align-items: center; gap: 0.5rem;
  justify-content: space-between; flex-wrap: nowrap; min-width: 0;
}
.lc-chips { display: inline-flex; gap: 0.5rem; align-items: center; min-width: 0; flex-wrap: nowrap; }
.lc-chips > * { min-width: 0; }
.lc-actions { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; position: relative; }

/* Hover-revealed selection: hidden at rest, shown on hover/focus-within/when checked. */
.lead-card--v2.lead-card--selectable .lead-card__check { opacity: 0; transition: opacity 100ms ease; }
.lead-card--v2.lead-card--selectable:hover .lead-card__check,
.lead-card--v2.lead-card--selectable:focus-within .lead-card__check,
.lead-card--v2.lead-card--selectable .lead-card__check:checked { opacity: 1; }
.lead-card--v2.lead-card--selectable:has(.lead-card__check:checked) {
  border-color: var(--color-accent-solid);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent-solid) 10%, transparent);
}
.lead-card--deleted .lc-head, .lead-card--deleted .lc-meta { opacity: 0.55; }
.lead-card--deleted { border-style: dashed; }

/* ONE primary action style: operator orange (the operator's role color — see
   .role-pill[data-role="OPERATOR"]), labeled, everywhere. */
.btn-op {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; line-height: 1;
  color: #ffffff; background: #dd7a33; border: 1px solid #c96a28;
  border-radius: var(--radius-sm, 7px); padding: 7px 13px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-op:hover { background: #c96a28; color: #ffffff; text-decoration: none; }
.btn-op:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-op--outline {
  color: #b45f24; background: #fdf4ec; border-color: #e9b58a;
}
.btn-op--outline:hover { background: #f9e8d8; color: #9c501c; }
.btn-op--xs { padding: 5px 10px; font-size: 0.75rem; }
.btn-op svg { width: 14px; height: 14px; }

/* The kebab: CSP/JS-free <details>; destructive red exists ONLY inside the open menu. */
.kebab { position: relative; display: inline-flex; }
.kebab__btn {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm, 7px);
  color: var(--color-text-faint); cursor: pointer; border: 1px solid transparent;
}
.kebab__btn::-webkit-details-marker { display: none; }
.kebab__btn:hover, .kebab[open] > .kebab__btn {
  color: var(--color-text); background: var(--color-surface-inset);
}
.kebab__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.kebab__btn svg { width: 16px; height: 16px; stroke-width: 3; }
.kebab__menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 10px 24px color-mix(in oklch, var(--color-text) 14%, transparent);
  padding: 4px; min-width: 176px; display: flex; flex-direction: column;
}
.kebab__item {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  font-size: 0.8rem; font-weight: 600; color: var(--color-text);
  padding: 8px 10px; border-radius: var(--radius-sm, 7px);
  text-decoration: none; background: none; border: none; cursor: pointer; text-align: left;
}
.kebab__item:hover { background: var(--color-surface-inset); text-decoration: none; }
.kebab__item svg { width: 15px; height: 15px; flex-shrink: 0; }
.kebab__item--danger { color: var(--danger-ink, #b3261e); }
.kebab__item--danger:hover { background: var(--danger-fill, #fdecea); }
.kebab__menu form { display: contents; }

/* ---- v2 LIST: 48px avatar-led rows, tabular score + band dot, hover actions ---- */
.lead-stream--v2 td { vertical-align: middle; }
.lead-stream--v2 .prospect-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.lead-stream--v2 .prospect-cell__text {
  display: inline-flex; flex-direction: column; min-width: 0; padding-right: 12px;
}
.lead-stream--v2 .prospect-cell__text .prospect-name,
.lead-stream--v2 .prospect-cell__text .cell-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 34ch;
}
.lead-stream--v2 .cell-loc, .lead-stream--v2 .cell-seg, .lead-stream--v2 .cell-via {
  font-size: var(--fs-micro); color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}
.col-vpqs-num, .lead-stream--v2 .col-vpqs-num { text-align: right; }
.vpqs-cell {
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text);
}
.vpqs-cell__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--band-low); }
.vpqs-cell[data-band="HIGH"] .vpqs-cell__dot { background: var(--band-high); }
.vpqs-cell[data-band="MED"] .vpqs-cell__dot,
.vpqs-cell[data-band="MEDIUM"] .vpqs-cell__dot { background: var(--band-med); }
.row-actions { display: inline-flex; gap: 6px; align-items: center; }
/* Actions reveal on row hover; the kebab keeps a faint persistent hint for touch. */
.lead-stream--v2 tbody tr .row-actions > .btn-op,
.lead-stream--v2 tbody tr .row-actions > .btn-op--outline,
.lead-stream--v2 tbody tr .row-actions > .lead-packet-form { opacity: 0; transition: opacity 100ms ease; }
.lead-stream--v2 tbody tr:hover .row-actions > *,
.lead-stream--v2 tbody tr:focus-within .row-actions > *,
.lead-stream--v2 tbody tr .row-actions--persistent > * { opacity: 1; }
.lead-stream--v2 tbody tr .row-actions .kebab { opacity: 0.55; }
.lead-stream--v2 tbody tr:hover .row-actions .kebab,
.lead-stream--v2 tbody tr:focus-within .row-actions .kebab { opacity: 1; }
.row-deleted .prospect-cell, .row-deleted .cell-loc { opacity: 0.6; }

/* Sortable headers */
.th-sort {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  color: inherit; font: inherit; letter-spacing: inherit;
}
.th-sort:hover { color: var(--color-text); text-decoration: none; }
.th-sort__mark { font-size: 0.65rem; opacity: 0.45; }
.th-sort--active { color: var(--color-accent-solid); }
.th-sort--active .th-sort__mark { opacity: 1; }

/* RA 2026-09-21: the refresh icons rendered at the SVG's intrinsic size — pin the leads
   header controls' icons to 13px (chip-adjacent scale). */
.stream-hint svg, .stream-controls .btn-secondary svg, .packet-cta .btn-primary svg {
  width: 13px; height: 13px; vertical-align: -2px;
}
.stream-hint { display: inline-flex; align-items: center; gap: 5px; }
.stream-controls .btn-secondary { display: inline-flex; align-items: center; gap: 5px; }

/* --- SENT_GAP 2026-10-02 — the honest Sent tab (Fix 1) + the Leads search (Fix 2) ----------
   Tokens only. The search box is a POST form above the tabs; results REPLACE the tab body. */
.sent-window-note { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.lead-search {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}
.lead-search__label { color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.lead-search__input {
  flex: 1 1 14rem; min-width: 0; max-width: 28rem;
  padding: .3rem .7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit; font-size: var(--fs-sm); line-height: 1.5;
}
.lead-search__input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); }
.search-results { margin: var(--space-3) 0; }
.search-results__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.search-results__summary { margin: 0; color: var(--color-text); }
.search-results__cap { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.search-results__clear { font-size: var(--fs-sm); white-space: nowrap; }
.search-hits { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.search-hit {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  min-width: 0;
}
.search-hit__id { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.search-hit__name { font-weight: var(--fw-medium); color: var(--color-text); overflow-wrap: anywhere; }
.search-hit__sub { color: var(--color-text-faint); font-size: var(--fs-micro); overflow-wrap: anywhere; }
.search-hit__state { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); text-align: right; }
.search-hit__badge {
  display: inline-block; padding: 2px 10px;
  border: 1px solid var(--color-border); border-radius: var(--pill);
  background: var(--color-surface-inset); color: var(--color-text);
  font-size: var(--fs-micro); overflow-wrap: anywhere;
}
.search-hit__badge[data-state="deleted"] { color: var(--color-text-muted); }
.search-hit__restore { font-size: var(--fs-micro); }
@media (max-width: 480px) {
  .search-hit__state { flex-basis: 100%; align-items: flex-start; text-align: left; }
}