/* ═══════════════════════════════════════════════════════════════════════
   Days of Opportunities — Lead Dashboard
   Palette, type and logo follow Branding.pdf (Markuss Baltais, DoO 2022).
   Layout, contrast, target sizes and states follow Apple HIG principles —
   refined against DESIGN.md (Apple analysis): pill CTAs & search, tight 600-
   weight display type, frosted sticky headers, whisper-soft elevation. The
   DoO palette, sunburst gradient and dark-first ground are kept as identity.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Brand constants (never used directly — semantic tokens below) ───── */
:root {
  --void:    #24003E;   --purple:  #6101A5;
  --violet:  #A130F4;   --lilac:   #D777FE;
  --magenta: #EA0676;   --pink:    #FD6391;
  --red:     #FE221E;   --orange:  #FD7201;
  --ink:     #232428;   --paper:   #E5E5E5;

  --sunburst: linear-gradient(96deg, var(--violet) 0%, var(--magenta) 38%,
                              var(--red) 66%, var(--orange) 100%);

  /* Type — Söhne is the brand face; the system grotesque is the free stand-in */
  --font: "Söhne", "Söhne Kraftig", -apple-system, BlinkMacSystemFont,
          "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* 4pt spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── Dark (default — the brand's own ground) ─────────────────────────── */
:root, [data-theme="dark"] {
  /* Tell the browser this theme is dark so native controls — <select> popups,
     date pickers, scrollbars and (crucially) autofilled fields — render dark
     instead of the UA's default white. The app themes via [data-theme], so this
     must live on the theme block, not just the <meta> tag (which only tracks the
     OS setting). Without it an autofilled email/password field goes white in
     dark mode — the same class of bug as the untyped email input. */
  color-scheme: dark;
  --bg:          #1A002E;
  --bg-sidebar:  #24003E;
  --surface:     #2E0A4C;
  --surface-2:   #390F5B;
  --surface-hi:  #451770;
  --line:        rgba(215, 119, 254, .17);
  --line-strong: rgba(215, 119, 254, .30);

  --text:        #FFFFFF;
  --text-2:      rgba(255, 255, 255, .70);
  --text-3:      rgba(255, 255, 255, .48);

  --accent:      var(--lilac);
  --accent-text: #24003E;
  --focus:       var(--lilac);

  --ok-bg:   rgba(103, 224, 140, .16); --ok-fg:   #7BE8A6;
  --warn-bg: rgba(253, 114, 1, .18);   --warn-fg: #FFB264;
  --bad-bg:  rgba(254, 34, 30, .18);   --bad-fg:  #FF9B99;

  --shadow: 0 1px 1px rgba(0,0,0,.28), 0 24px 60px -20px rgba(0,0,0,.62);
  --scrim:  rgba(12, 0, 22, .72);
}

/* ── Light (the brand's #E5E5E5 paper side) ──────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg:          #E5E5E5;
  --bg-sidebar:  #24003E;
  --surface:     #FFFFFF;
  --surface-2:   #F4F1F7;
  --surface-hi:  #EAE3F1;
  --line:        rgba(35, 36, 40, .12);
  --line-strong: rgba(35, 36, 40, .24);

  --text:        #232428;
  --text-2:      rgba(35, 36, 40, .68);
  --text-3:      rgba(35, 36, 40, .48);

  --accent:      var(--purple);
  --accent-text: #FFFFFF;
  --focus:       var(--violet);

  --ok-bg:  #E3F6E8; --ok-fg:  #1B5E20;
  --warn-bg:#FDEFE0; --warn-fg:#8A4B00;
  --bad-bg: #FDE7EF; --bad-fg: #A3113F;

  --shadow: 0 0.5px 1px rgba(35,36,40,.05), 0 18px 44px -14px rgba(35,36,40,.16);
  --scrim:  rgba(36, 0, 62, .40);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: var(--s3);
  background: var(--accent); color: var(--accent-text);
  padding: var(--s2) var(--s4); border-radius: var(--r-sm); z-index: 100;
}
.skip-link:focus { left: var(--s3); }

.mono { font-family: var(--mono); font-size: 11px; }

/* ── Shell ───────────────────────────────────────────────────────────── */
/* minmax(0,1fr) — a bare 1fr floors at min-content, and the lead table would
   then push the whole page into a horizontal scroll instead of scrolling
   inside its own container. */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr);
         min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg-sidebar);
  padding: var(--s5) var(--s4) var(--s4);
  border-right: 1px solid rgba(215,119,254,.16);
}

.brand { display: flex; gap: var(--s3); align-items: center; padding: 0 var(--s2) var(--s6); }
.brand-mark { width: 46px; height: 46px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-size: 14px; font-weight: 700; line-height: 1.12;
  letter-spacing: -.01em; text-transform: uppercase; color: #FFF;
}
.brand-sub { font-size: 12px; color: rgba(255,255,255,.60); letter-spacing: .01em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 38px; padding: 0 var(--s3);
  background: none; border: 0; border-radius: var(--r-sm);
  color: rgba(255,255,255,.72); font-size: 14px; text-align: left;
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-item svg { width: 19px; height: 19px; flex: none; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #FFF; }
.nav-item.is-active { background: rgba(215,119,254,.18); color: #FFF; font-weight: 600; }
.nav-item.is-active svg { color: var(--lilac); }
.nav-count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.14); color: #FFF;
  padding: 1px var(--s2); border-radius: var(--r-full);
}
.nav-dot {
  margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
}

.sidebar-foot { margin-top: auto; padding-top: var(--s5); }
.theme-toggle {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; min-height: 34px; padding: 0 var(--s3);
  background: rgba(255,255,255,.06); border: 0; border-radius: var(--r-sm);
  color: rgba(255,255,255,.78); font-size: 13px; cursor: pointer;
  transition: background .15s var(--ease);
}
.theme-toggle:hover { background: rgba(255,255,255,.12); }
.theme-icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sunburst); flex: none;
}
.foot-note {
  margin-top: var(--s3); font-size: 11px; line-height: 1.5;
  color: rgba(255,255,255,.42);
}
.foot-note .mono { color: rgba(255,255,255,.34); word-break: break-all; }

/* ── Main ────────────────────────────────────────────────────────────── */
.main { padding: var(--s7) var(--s7) var(--s8); max-width: 1320px; }
.view { display: none; animation: rise .28s var(--ease); }
.view.is-active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

.page-head { margin-bottom: var(--s7); }   /* Apple: give the head more air */
.page-head h1 {
  /* Apple-tight display: weight 600 (not 700), negative tracking, snug leading */
  font-size: 33px; font-weight: 600; letter-spacing: -.028em; line-height: 1.06;
  margin-bottom: var(--s2);
}
.page-head h1::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: var(--s3);
  border-radius: 2px; background: var(--sunburst);
}
.page-head p { color: var(--text-2); font-size: 14px; max-width: 62ch; }

.stack { display: flex; flex-direction: column; gap: var(--s4); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.card-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-2); margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
}
.card-lede { color: var(--text-2); margin: calc(-1 * var(--s2)) 0 var(--s4); max-width: 66ch; }

.opt, .req {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--surface-hi); color: var(--text-3);
}
.req { background: var(--warn-bg); color: var(--warn-fg); }

/* ── Fields ──────────────────────────────────────────────────────────── */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.field-wide { grid-column: 1 / -1; }
.field-narrow { max-width: 220px; }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: var(--s2);
}
.field input[type="text"], .field input[type="number"], .field input[type="url"],
.field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field input[type="search"], .field select {
  min-height: 40px; padding: 0 var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
/* Autofill: WebKit paints its own opaque background (light) and near-black text
   over an input, which is unreadable in dark mode and overrides the rule above.
   `color-scheme` handles most browsers; this repaints WebKit's autofill in the
   field's own colours as a belt-and-suspenders (the huge inset shadow is the
   documented way to override the autofill background). */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text);
}
.field select { appearance: none; cursor: pointer; padding-right: var(--s6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.hint { font-size: 12px; color: var(--text-3); line-height: 1.4; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); min-height: 40px; padding: 0 var(--s5);
  /* Apple's signature pill — the DoO brand colour still fills it */
  border: 1px solid transparent; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: filter .15s var(--ease), background .15s var(--ease),
              opacity .15s var(--ease), transform .08s var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { min-height: 32px; padding: 0 var(--s3); font-size: 13px; }

.btn-primary { background: var(--sunburst); color: #FFF; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.09); }

.btn-quiet {
  background: var(--surface-2); color: var(--text);
  border-color: var(--line-strong);
}
.btn-quiet:hover:not(:disabled) { background: var(--surface-hi); }

.btn-danger { background: transparent; color: var(--bad-fg); border-color: var(--bad-fg); }
.btn-danger:hover:not(:disabled) { background: var(--bad-bg); }

.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: none; border: 0; border-radius: var(--r-full);   /* circular chip */
  color: var(--text-2); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}

.actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.actions-note { font-size: 12px; color: var(--text-3); }

.note {
  font-size: 13px; color: var(--text-2); padding: var(--s3);
  background: var(--surface-2); border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
}
.note-warn { border-left-color: var(--orange); }
.note-steps { margin: 0; padding-left: var(--s5); }
.note-steps li { margin: 2px 0; line-height: 1.5; }

/* ── Stats ───────────────────────────────────────────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3); margin-bottom: var(--s5);
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4);
  position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--sunburst);
}
.stat-value {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.toolbar {
  display: flex; gap: var(--s2); align-items: center;
  flex-wrap: wrap; margin-bottom: var(--s4);
}
.toolbar-spacer { flex: 1; }
.toolbar select {
  min-height: 34px; padding: 0 var(--s5) 0 var(--s3);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: 13px; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.search-box { position: relative; flex: 0 1 300px; }
.search-box svg {
  position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-3); pointer-events: none;
}
.search-box input {
  width: 100%; min-height: 36px; padding: 0 var(--s4) 0 var(--s6);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-full); font-size: 13px;   /* Apple pill search */
}
.search-box input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.selection-count { font-size: 13px; font-weight: 600; color: var(--accent); }

/* ── Table ───────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: auto; max-height: 62vh;
  /* position:relative confines the sticky-header table's scroll height to this
     box. Without it Chromium leaks that height to the root, so the PAGE gains
     thousands of pixels of empty scroll below the content ("scroll to infinity"). */
  position: relative;
}
.lead-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lead-table thead th {
  position: sticky; top: 0; z-index: 2;
  /* Apple frosted sub-nav: rows blur under the header as they scroll past */
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  padding: var(--s3) var(--s3);
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
  border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
/* Older engines with no backdrop-filter fall back to the solid header tint */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lead-table thead th { background: var(--surface-2); }
}
.lead-table tbody td {
  padding: var(--s3); border-bottom: 1px solid var(--line);
  vertical-align: middle; max-width: 280px;
}
.lead-table tbody tr:hover { background: var(--surface-2); }
.lead-table tbody tr.is-selected { background: var(--surface-hi); }
.col-check { width: 40px; }
.cell-truncate {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-name { font-weight: 600; }
.lead-email { color: var(--accent); text-decoration: none; }
.lead-email:hover { text-decoration: underline; }
.muted { color: var(--text-3); }

.checkbox { display: grid; place-items: center; cursor: pointer; }
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox span {
  width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--line-strong); transition: all .12s var(--ease);
}
.checkbox input:checked + span {
  background: var(--sunburst); border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--sunburst);
  background-repeat: no-repeat; background-position: center;
  background-size: 10px 8px, cover;
}
.checkbox input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Status chips — always carry a word, never colour alone */
.chip {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px var(--s2); border-radius: var(--r-full); white-space: nowrap;
}
.chip-ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.chip-warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip-bad  { background: var(--bad-bg);  color: var(--bad-fg); }
.chip-flat { background: var(--surface-hi); color: var(--text-2); }

.empty { display: none; padding: var(--s8) var(--s5); text-align: center; }
.empty.is-on { display: block; }
.empty-mark {
  width: 68px; height: 68px; margin: 0 auto var(--s4); opacity: .5;
  -webkit-mask: radial-gradient(circle, transparent 20%, #000 21%);
  background: var(--sunburst); border-radius: 50%;
}
.empty h3 { font-size: 16px; font-weight: 600; margin-bottom: var(--s2); }
.empty p { color: var(--text-2); margin-bottom: var(--s4); }

/* ── Settings key rows ───────────────────────────────────────────────── */
.key-list { display: flex; flex-direction: column; gap: var(--s3); }
.key-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4);
}
.key-card.is-primary { border-color: var(--line-strong); }
.key-top {
  display: flex; align-items: baseline; gap: var(--s2);
  flex-wrap: wrap; margin-bottom: var(--s2);
}
.key-name { font-size: 14px; font-weight: 600; }
.key-note { font-size: 12px; color: var(--text-2); flex-basis: 100%; line-height: 1.45; }
.key-note a { color: var(--accent); }
.key-row { display: flex; gap: var(--s2); align-items: flex-end; margin-top: var(--s3); }
.key-row .field { flex: 1; }
.key-row .field input { font-family: var(--mono); font-size: 12px; }
.key-status { font-size: 12px; margin-top: var(--s2); min-height: 16px; }
.key-status.is-ok  { color: var(--ok-fg); }
.key-status.is-bad { color: var(--bad-fg); }
.badge-rec {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--ok-bg); color: var(--ok-fg);
  padding: 2px 7px; border-radius: var(--r-full);
}
.badge-set {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface-hi); color: var(--text-2);
  padding: 2px 7px; border-radius: var(--r-full);
}
.key-credits {
  font-size: 12px; color: var(--text-2);
  background: var(--surface-hi); border-radius: var(--r-md);
  padding: 2px 8px; margin-left: auto;
}
.key-credits strong { color: var(--text); }
.load-more-row {
  text-align: center; padding: var(--s3) 0 var(--s4);
}

/* Always-visible Lusha balance on the Search page. */
.page-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.page-head-row > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-head-row .credit-meter { flex: 0 0 auto; }
.credit-meter {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 2px; padding: var(--s2) var(--s4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); white-space: nowrap;
}
.credit-meter .cm-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.credit-meter .cm-value {
  font-size: 20px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.credit-meter.is-low .cm-value { color: var(--bad-fg); }
.credit-meter.is-flash { animation: cmFlash .6s var(--ease); }
@keyframes cmFlash {
  0% { border-color: var(--accent); }
  100% { border-color: var(--line); }
}
/* Role pre-filter on step 1 — the control that decides what a search credit buys. */
.role-filter{
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--s2);
}
.role-filter label{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-3); font-weight:600;
}
.role-filter input{width:100%}
.role-filter .chain-hint{margin:0}

/* Cost tag shown next to any action that spends credits. */
.cost-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--text-2); background: var(--surface-hi);
  border-radius: var(--r-full); padding: 1px 8px; margin-left: var(--s2);
  white-space: nowrap;
}

/* ── Export sheet ────────────────────────────────────────────────────── */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: var(--scrim); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: var(--s5);
  animation: fade .18s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  animation: pop .22s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.sheet-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sheet-body { padding: var(--s5); overflow: auto; display: flex;
              flex-direction: column; gap: var(--s4); }
.sheet-lede { font-size: 13px; color: var(--text-2); }

/* Imported-files list (remove a whole uploaded spreadsheet) */
.imports-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
.imports-row { display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.imports-row:last-child { border-bottom: 0; }
.imports-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.imports-name { font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.imports-sub { font-size: 12px; color: var(--text-3); }
.imports-empty { color: var(--text-3); font-size: 13px; padding: var(--s3) 0; }
.sheet-foot {
  display: flex; justify-content: flex-end; gap: var(--s2);
  flex-wrap: wrap;          /* several actions wrap instead of overflowing */
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
}
.col-picker { border: 0; padding: 0; margin: 0; }
.col-picker legend {
  font-size: 13px; font-weight: 600; padding: 0 0 var(--s3);
}
.col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.col-opt {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 34px; padding: 0 var(--s3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 13px; cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.col-opt:hover { border-color: var(--line-strong); }
.col-opt.is-on { border-color: var(--accent); background: var(--surface-hi); }

/* ── Toasts ──────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; bottom: var(--s5); right: var(--s5); z-index: 60;
  display: flex; flex-direction: column; gap: var(--s2);
  max-width: 380px;
}
.toast {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); box-shadow: var(--shadow);
  font-size: 13px; animation: slide .22s var(--ease);
}
@keyframes slide { from { opacity: 0; transform: translateX(16px); } }
.toast.is-ok  { border-left-color: var(--ok-fg); }
.toast.is-bad { border-left-color: var(--bad-fg); }
.toast a { color: var(--accent); font-weight: 600; }

/* ── Role toggle (Admin / Person) ────────────────────────────────────── */
.role-box { margin-bottom: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.role-toggle {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.06); border-radius: var(--r-sm);
}
.role-btn {
  flex: 1; min-height: 30px; padding: 0 var(--s2);
  background: none; border: 0; border-radius: 6px;
  color: rgba(255,255,255,.66); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.role-btn:hover { color: #FFF; }
.role-btn.is-on { background: rgba(215,119,254,.22); color: #FFF; }
.role-person { display: flex; flex-direction: column; gap: 3px; }
.role-person > span {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
}
.role-person select {
  min-height: 32px; padding: 0 var(--s5) 0 var(--s3);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-sm); color: #FFF; font-size: 13px; cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.role-person select option { color: #232428; }

/* Person mode: the owner column is redundant (every row is you), and the
   admin overview (donut + leaderboard) + admin controls are hidden. */
/* Person mode hides the Owner column (you're looking at one person). An
   associate browsing other reps' lists still needs to see who owns each row. */
body.person-mode:not(.associate-mode) .col-owner { display: none; }
body.person-mode .admin-only { display: none !important; }
.region-box { margin-bottom: var(--s3); }
.sidebar-btn { width: 100%; margin-top: var(--s3); justify-content: center; }

/* Associate scope selector — sits below the toolbar, above the table. */
.scope-bar { display: flex; align-items: center; margin-bottom: var(--s3); }
.scope-bar label { display: inline-flex; align-items: center; gap: var(--s2); }
.scope-bar > label > span {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
}
.scope-bar select {
  min-height: 34px; padding: 0 var(--s6) 0 var(--s3); font-size: 13px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; min-width: 200px;
}
.scope-bar select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Cap the contacts list and let it scroll inside its own box. Without a cap a
   long list (150+ companies) stretched the whole page into a near-endless
   scroll; the header stays pinned to the top of the box as you scroll it. */
.crm-table-wrap { max-height: 62vh; overflow: auto; }
.crm-table-wrap .lead-table thead th { top: 0; }
/* Fill the available width exactly — fixed layout shares the container width
   across the columns instead of letting content force it wider than the box
   (which used to overflow the card and clip against the page edge). */
.crm-table-wrap .lead-table { table-layout: fixed; }
.crm-table-wrap .lead-table td { max-width: none; }
.crm-table-wrap .col-check { width: 44px; }
/* Universities: one row per institution — the Name column duplicates the org. */
body.region-universities .crm-table-wrap .col-name { display: none; }
/* Country is university-only: hidden everywhere except the Universities region,
   where it becomes the first data column (Name is hidden there). */
.crm-table-wrap .col-country { display: none; }
body.region-universities .crm-table-wrap .col-country { display: table-cell; width: 150px; }
/* Department column + read-only posture for the "All departments" admin view. */
.crm-table-wrap .col-region { display: none; }
body.region-all .crm-table-wrap .col-region { display: table-cell; width: 130px; }
body.region-all .region-scoped { display: none !important; }
body.region-all .crm-table-wrap .col-check { display: none; }
.crm-table-wrap .col-status { width: 132px; }
.crm-table-wrap .col-activity { width: 130px; }
.crm-table-wrap .col-last { width: 120px; }

/* LinkedIn quick-link chip in a row / on the detail meta */
.li-link {
  display: inline-block; margin-left: var(--s2); font-size: 11px; font-weight: 700;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.li-link:hover { text-decoration: underline; }
/* The cell stays a real table cell (so it aligns with the row and its divider
   sits on the row line); the flex layout goes on an inner wrapper. Making the
   <td> itself display:flex pulls it out of the table box and misaligns it. */
.email-cell { min-width: 0; }
.email-cell .email-inner {
  display: flex; align-items: center; gap: var(--s1); min-width: 0;
}

/* Inline row editor — the clicked line stays above; edit its details here. */
.lead-table tbody tr.is-open { background: var(--surface-hi); }
.contact-edit-row > td { padding: 0 !important; background: var(--surface-2);
                         border-bottom: 1px solid var(--line-strong); }
.contact-edit {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3);
  padding: var(--s4); border-left: 3px solid var(--accent);
}
.ce-field { display: flex; flex-direction: column; gap: var(--s1);
            font-size: 12px; font-weight: 600; color: var(--text-2); flex: 1 1 180px; }
.ce-input {
  min-height: 34px; padding: 0 var(--s3); font-size: 13px; font-weight: 400;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text);
}
.ce-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.ce-actions { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }

/* Inline "Assign to [associate]" control in the CRM toolbar */
.assign-inline { display: inline-flex; align-items: center; gap: var(--s2);
                 font-size: 13px; color: var(--text-2); }
.assign-inline select {
  min-height: 32px; padding: 0 var(--s5) 0 var(--s3); font-size: 13px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* Associates panel list */
.assoc-list { list-style: none; margin: var(--s3) 0 0; padding: 0;
              display: flex; flex-direction: column; gap: var(--s1); }
.assoc-list li { display: flex; align-items: center; gap: var(--s3);
                 padding: var(--s2) 0; border-bottom: 1px solid var(--line);
                 font-size: 13px; }
.assoc-list li:last-child { border-bottom: 0; }
.assoc-name { font-weight: 600; }
.assoc-count { color: var(--text-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.assoc-del { background: none; border: 0; color: var(--text-3); cursor: pointer;
             font-size: 12px; padding: 2px 6px; border-radius: var(--r-sm); }
.assoc-del:hover { color: var(--bad-fg); background: var(--bad-bg); }

/* Company / university manager: quick-add form above the list */
.org-add-form { display: flex; flex-direction: column; gap: var(--s3);
                margin-bottom: var(--s4); }
.org-add-grid { display: grid; gap: var(--s3);
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.org-add-form .btn-primary { align-self: flex-start; }
.org-mgr-search { margin-bottom: var(--s2); }

/* Manual assignment mode (draft / by-associate) */
.assign-head { display: flex; align-items: center; gap: var(--s3); }
.assign-head .crm-back { margin-bottom: 0; }
.assign-remaining { margin-left: auto; font-size: 12px; color: var(--text-3);
                    font-variant-numeric: tabular-nums; }
.assign-current {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: var(--s3) 0; padding: var(--s3) var(--s4);
  background: var(--surface-2); border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
}
.assign-turn { display: flex; align-items: baseline; gap: var(--s2); flex: 1; }
.assign-turn-label { font-size: 11px; font-weight: 700; letter-spacing: .05em;
                     text-transform: uppercase; color: var(--text-3); }
.assign-turn-name { font-size: 17px; font-weight: 700; }
.assign-turn-next { font-size: 12px; color: var(--text-3); }
.assign-pick { display: inline-flex; align-items: center; gap: var(--s2);
               font-size: 13px; color: var(--text-2); flex: 1; }
.assign-pick select {
  min-height: 32px; padding: 0 var(--s5) 0 var(--s3); font-size: 13px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.assign-search { margin-bottom: var(--s2); width: 100%; flex: none; }
.assign-companies { list-style: none; margin: 0; padding: 0; }
.assign-co {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line);
  cursor: pointer; border-radius: var(--r-sm);
  transition: background .12s var(--ease);
}
.assign-co:hover { background: var(--surface-hi); }
.assign-co-name { flex: 1; font-weight: 600; font-size: 13px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-co-owner { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.assign-co-go { font-size: 12px; font-weight: 600; color: var(--accent);
                opacity: 0; transition: opacity .12s var(--ease); }
.assign-co:hover .assign-co-go { opacity: 1; }
.assign-co.is-assigning { opacity: .5; }
.assign-co.just-assigned { background: var(--ok-bg); }

/* ── Admin overview (donut + activity board) ─────────────────────────── */
.overview {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s6);
  align-items: center; margin-bottom: var(--s5);
}
.overview-donut { display: flex; align-items: center; gap: var(--s4); }
.overview-donut svg { flex: none; }
.donut-total { font-size: 30px; font-weight: 700; fill: var(--text);
               font-variant-numeric: tabular-nums; }
.donut-caption { font-size: 11px; fill: var(--text-3);
                 text-transform: uppercase; letter-spacing: .05em; }
.donut-legend { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: var(--s2); }
.donut-legend li { display: flex; align-items: center; gap: var(--s2);
                   font-size: 13px; color: var(--text-2); white-space: nowrap; }
.donut-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.overview-board { display: flex; flex-direction: column; gap: var(--s3);
                  min-width: 0; }
.most-active {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--surface-2); border-left: 3px solid var(--accent);
}
.ma-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .05em; color: var(--text-3); }
.ma-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.ma-count { font-size: 12px; color: var(--text-2); }

.leaderboard { list-style: none; margin: 0; padding: 0;
               display: flex; flex-direction: column; gap: var(--s2); }
.leaderboard li { display: grid; grid-template-columns: 90px 1fr 28px;
                  align-items: center; gap: var(--s3); font-size: 13px; }
.lb-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.lb-bar { height: 8px; background: var(--surface-hi); border-radius: var(--r-full);
          overflow: hidden; }
.lb-bar span { display: block; height: 100%; border-radius: var(--r-full);
               background: var(--sunburst); }
.lb-val { text-align: right; color: var(--text); font-weight: 600;
          font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .overview { grid-template-columns: 1fr; gap: var(--s4); }
}

/* Status picker on the contact detail header */
.status-picker { display: flex; align-items: center; gap: var(--s2); }
.status-picker > span {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .03em;
}
.status-picker select {
  min-height: 32px; padding: 0 var(--s5) 0 var(--s3); font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.status-picker select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* "Proposal sent" pipeline chip — a fourth accented tone. */
.chip-accent {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

/* ── CRM ─────────────────────────────────────────────────────────────── */
.crm-back {
  display: inline-flex; margin-bottom: var(--s4);
  text-decoration: none; font-size: 13px;
}
.crm-back:hover { text-decoration: underline; }

.crm-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.crm-head-actions { display: flex; gap: var(--s2); flex: none; }

/* Editable details card, above the timeline + tasks grid. */
.crm-details { margin-bottom: var(--s4); }
.card-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}
.card-head-row .card-title { margin: 0; }
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3) var(--s5); margin: 0;
}
.detail-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.detail-value {
  margin: 0; font-size: 14px; color: var(--text);
  overflow-wrap: anywhere;
}
/* A row that carries free-text notes spans the whole grid and keeps line breaks. */
.detail-row-wide { grid-column: 1 / -1; }
.last-year { white-space: pre-wrap; }
.detail-edit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3) var(--s4); align-items: end;
}
.detail-edit .field { margin: 0; }
.detail-edit .field:has(#f-last_year) { grid-column: 1 / -1; }
.detail-edit .ce-actions { grid-column: 1 / -1; }

/* Unmatched-email queue in the CRM */
.unmatched { margin-bottom: var(--s4); border-left: 3px solid var(--orange); }
.unmatched-hint { font-size: 12px; }
.unmatched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.unmatched-item {
  display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s3); background: var(--surface-2); border-radius: var(--r-sm);
}
.um-body { flex: 1 1 320px; min-width: 0; }
.um-top { display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.um-subject { font-weight: 600; }
.um-when { font-size: 12px; flex: none; }
.um-meta { font-size: 12px; margin-top: 2px; }
.um-snippet {
  margin: var(--s2) 0 0; font-size: 13px; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.um-actions { display: flex; gap: var(--s2); align-items: center; flex: 0 1 auto; flex-wrap: wrap; }
.um-select {
  max-width: 260px; min-height: 34px; padding: 0 var(--s2); font-size: 13px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text);
}

.crm-detail-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s4);
  align-items: start;
}
.crm-log-actions {
  display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5);
}

/* clickable contact rows in the list */
.lead-table tbody tr.is-link { cursor: pointer; }

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item {
  position: relative; display: flex; gap: var(--s3);
  padding: 0 0 var(--s4) var(--s5);
}
/* the vertical thread */
.timeline-item::before {
  content: ""; position: absolute; left: 7px; top: 4px; bottom: -4px;
  width: 2px; background: var(--line-strong);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  display: grid; place-items: center; flex: none; z-index: 1;
}
.timeline-dot svg { width: 9px; height: 9px; color: var(--accent); }
.timeline-item[data-kind="email"] .timeline-dot { border-color: var(--violet); }
.timeline-item[data-kind="email"] .timeline-dot svg { color: var(--violet); }
.timeline-item[data-kind="task"]  .timeline-dot { border-color: var(--ok-fg); }
.timeline-item[data-kind="task"]  .timeline-dot svg { color: var(--ok-fg); }

.timeline-body { flex: 1; min-width: 0; }
.timeline-top {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
.timeline-title { font-size: 14px; font-weight: 600; text-transform: capitalize; }
.timeline-time {
  margin-left: auto; font-size: 12px; color: var(--text-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.timeline-sub { font-size: 13px; color: var(--text-2); margin-top: 2px;
                line-height: 1.45; word-wrap: break-word; }
/* Email bodies keep their line breaks; long ones scroll instead of dominating. */
.timeline-sub.is-email { white-space: pre-wrap; max-height: 15em; overflow-y: auto; }
.timeline-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* change-history entries: old value → new value */
.timeline-item[data-kind="change"] .timeline-dot { border-color: var(--text-3); }
.timeline-item[data-kind="change"] .timeline-dot svg { color: var(--text-3); }
.chg-old { color: var(--text-3); text-decoration: line-through;
  word-break: break-word; }
.chg-arrow { color: var(--text-3); margin: 0 var(--s1); }
.chg-new { color: var(--text); font-weight: 500; word-break: break-word; }
.timeline-del {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: var(--r-sm);
}
.timeline-del:hover { color: var(--bad-fg); background: var(--bad-bg); }
.timeline-empty { font-size: 13px; color: var(--text-3); padding: var(--s3) 0; }

/* ── Task list (contact side panel) ──────────────────────────────────── */
.task-list { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: var(--s2); }
.task-item {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line);
}
.task-item:last-child { border-bottom: 0; }
.task-check {
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: 5px;
  background: var(--surface-2); cursor: pointer; display: grid;
  place-items: center; color: transparent; transition: all .12s var(--ease);
}
.task-check:hover { border-color: var(--accent); }
.task-check svg { width: 11px; height: 9px; }
.task-item.is-done .task-check {
  background: var(--sunburst); border-color: transparent; color: #FFF;
}
.task-text { flex: 1; min-width: 0; font-size: 13px; }
.task-item.is-done .task-text { color: var(--text-3); text-decoration: line-through; }
.task-due { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.task-due.is-over { color: var(--bad-fg); }
.task-del {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 var(--s1); flex: none;
}
.task-del:hover { color: var(--bad-fg); }

/* radio group used by the interaction form */
.radio-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.radio-row label {
  flex: 1; min-width: 84px; text-align: center;
  min-height: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s3); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: 13px; cursor: pointer; text-transform: capitalize;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.radio-row input { position: absolute; opacity: 0; pointer-events: none; }
.radio-row label:hover { border-color: var(--accent); }
.radio-row input:checked + span,
.radio-row label:has(input:checked) {
  border-color: var(--accent); background: var(--surface-hi);
  color: var(--text); font-weight: 600;
}
.field textarea {
  min-height: 78px; padding: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text); resize: vertical;
  line-height: 1.45;
}
.field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.field input[type="date"] {
  min-height: 38px; padding: 0 var(--s3);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text);
}

@media (max-width: 860px) {
  .crm-detail-grid { grid-template-columns: 1fr; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: var(--s4); padding: var(--s3) var(--s4); overflow-x: auto;
    border-right: 0; border-bottom: 1px solid rgba(215,119,254,.16);
  }
  .brand { padding: 0; }
  .brand-text { display: none; }
  .nav { flex-direction: row; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; }
  .foot-note { display: none; }
  .main { padding: var(--s5) var(--s4) var(--s7); }
  .field-grid, .method-grid, .col-grid { grid-template-columns: 1fr; }
  .sub-panel { flex-direction: column; }
  .field-narrow { max-width: none; }
  .page-head h1 { font-size: 25px; }
}

/* ═══ Find-a-contact chain ═══════════════════════════════════════════════
   The associate-facing guided flow. Uses the same tokens as the rest of the
   dashboard so it reads as one product, not a bolt-on. */

/* progress rail */
.chain-rail {
  display: flex; gap: var(--s2); list-style: none; margin: 0 0 var(--s5);
  padding: 0; flex-wrap: wrap;
}
.chain-step {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 600; color: var(--text-3);
  padding: var(--s2) var(--s3); border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: color .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease);
}
.chain-step span {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--line-strong); color: var(--text);
}
.chain-step.is-on { color: var(--text); border-color: transparent;
  background: var(--surface-hi); }
.chain-step.is-on span { background: var(--sunburst); color: #fff; }
.chain-step.is-done span { background: var(--ok-fg); color: #fff; }
.chain-step.is-done { color: var(--text-2); }

/* panels swap in place */
.chain-panel { display: none; animation: rise .3s var(--ease); }
.chain-panel.is-on { display: block; }
/* `rise` is defined once, next to .view. A second @keyframes of the same name
   here silently overrode it for both views and chain panels. */
@media (prefers-reduced-motion: reduce) { .chain-panel { animation: none; } }

.chain-panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; }

/* step 1 */
.chain-target { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }
.chain-target input {
  flex: 1; min-width: 240px; min-height: 48px; padding: 0 var(--s5);
  font-size: 16px; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  color: var(--text);   /* Apple pill search — the page's hero field */
}
.chain-target input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.chain-matches { display: flex; flex-direction: column; gap: var(--s2);
  margin-top: var(--s4); }
.chain-match {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); text-align: left;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.chain-match:hover { border-color: var(--accent); background: var(--surface-hi); }
.chain-match .m-name { font-weight: 600; }
.chain-match .m-domain { font-family: var(--mono); font-size: 12px;
  color: var(--accent); margin-left: auto; }
.chain-match .m-type { font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); }
.chain-hint { font-size: 13px; color: var(--text-2); margin-top: var(--s3); }

/* loading */
.chain-loading { display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) 0; color: var(--text-2); font-size: 14px; }
.spinner { width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.chain-note { font-size: 13.5px; color: var(--text-2); margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4); background: var(--surface-2);
  border-left: 3px solid var(--accent); border-radius: var(--r-sm); }

/* Manual opt-in to the free website crawler — a deliberate, separate action */
.chain-alt { display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; margin: 0 0 var(--s4); }
.chain-alt-hint { font-size: 12px; color: var(--text-3); }

/* step 2 people list */
/* Cap the employee list too — a company can return ~100 people, and an
   uncapped list turned the step into an endless scroll. The filters above stay
   fixed; the list scrolls within its own box. */
.chain-people { display: flex; flex-direction: column; gap: var(--s2);
  max-height: 62vh; overflow-y: auto; }
.chain-person {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease),
              transform .1s var(--ease);
}
.chain-person:hover { border-color: var(--accent); background: var(--surface-hi); }
.chain-person:active { transform: translateY(1px); }
.chain-person .p-body { min-width: 0; flex: 1; }
.chain-person .p-name { font-weight: 600; }
.chain-person .p-title { font-size: 13px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-person .p-go { color: var(--accent); font-size: 18px; flex: none; }
.chain-person .p-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px var(--s2); border-radius: var(--r-full);
  background: var(--ok-bg); color: var(--ok-fg); flex: none; }
.chain-person .p-tag.credit { background: var(--warn-bg); color: var(--warn-fg); }

/* step 3 — the contact card (the deliverable) */
.contact-card {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.contact-hero { padding: var(--s5); color: #fff; background: var(--void);
  position: relative; }
.contact-hero::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: 0; height: 3px; background: var(--sunburst); }
.contact-hero .c-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.contact-hero .c-title { color: rgba(255,255,255,.72); font-size: 14px;
  margin-top: 2px; }
.contact-verdict { display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding: var(--s2) var(--s3); border-radius: var(--r-full);
  font-size: 13px; font-weight: 600; }
.contact-verdict .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.v-listed { background: rgba(103,224,140,.16); color: #7BE8A6; }
.v-listed .dot { background: #7BE8A6; }
.v-reachable { background: rgba(253,114,1,.18); color: #FFB264; }
.v-reachable .dot { background: #FFB264; }
.v-listed_nomail, .v-unknown { background: rgba(254,34,30,.16); color: #FF9B99; }
.v-listed_nomail .dot, .v-unknown .dot { background: #FF9B99; }
.contact-verdict-detail { font-size: 13px; color: var(--text-2);
  padding: var(--s3) var(--s5) 0; }

.contact-fields { display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) var(--s5); }
.contact-field { display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.contact-field:last-child { border-bottom: 0; }
.contact-field .f-label { font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); width: 78px; flex: none; }
.contact-field .f-value { font-weight: 500; word-break: break-all; }
.contact-field a.f-value { color: var(--accent); text-decoration: none; }
.contact-field a.f-value:hover { text-decoration: underline; }

/* phone is revealed on request — it bills on top of the email */
.phone-cta { display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; font-weight: 400; }
.phone-note { font-size: 12px; }

/* The reveal card's email field can carry a confirmed paid-reveal control,
   free-first. Scope this to the reveal card — the CRM table also has a
   td.email-cell, and display:flex on a <td> pulls it out of the table grid
   (see the note by the .email-cell table rule above). */
.contact-field .email-cell { display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; }
.reveal-inline { display: inline-flex; align-items: center; gap: var(--s2); }

/* reveal step: new company vs. append to one already in the CRM */
.save-target { display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) var(--s5) 0; }
.save-target .ch-label { font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); }
.attach-field { gap: var(--s2); }
.attach-hint { margin: 0; font-size: 12px; color: var(--text-3); }
/* Saving over a contact the company already holds is allowed, but never silent. */
.attach-hint.is-warn {
  color: var(--warn-fg, #B35309);
  background: var(--warn-bg, rgba(179, 83, 9, .10));
  border-left: 2px solid currentColor;
  padding: 6px 10px; border-radius: 0 var(--r-sm, 4px) var(--r-sm, 4px) 0;
}

.contact-actions { display: flex; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5) var(--s5); }
.btn-linkedin { background: #0A66C2; color: #fff; border: 0; }
.btn-linkedin:hover { background: #085aad; }

/* step 4 done */
.chain-done { text-align: center; padding: var(--s6) var(--s4); }
.chain-done .done-mark { width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto var(--s4); display: grid; place-items: center;
  background: var(--ok-bg); color: var(--ok-fg); font-size: 28px; }
.chain-done h2 { font-size: 22px; font-weight: 700; margin: 0 0 var(--s2); }
.chain-done p { color: var(--text-2); margin: 0 auto var(--s5); max-width: 44ch; }
.chain-done .done-actions { display: flex; gap: var(--s3); justify-content: center;
  flex-wrap: wrap; }

/* redesign: derived-email verdict + the "get email" person tag */
.v-derived { background: rgba(161,48,244,.18); color: #D9A6FF; }
.v-derived .dot { background: #A130F4; }
.chain-person .p-tag.find { background: var(--surface-hi); color: var(--text-3); }

/* ═══ Search flow — company select, people filters, lead check ═══════════ */
.company-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.company-card {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.company-card:hover { border-color: var(--accent); background: var(--surface-hi); }
.company-card .cc-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.company-card .cc-name { font-weight: 600; }
.company-card .cc-domain { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.company-card .cc-go { color: var(--accent); font-size: 18px; }
.manual-domain { margin-top: var(--s4); }
.manual-domain summary { font-size: 13px; font-weight: 600; color: var(--text-2);
  cursor: pointer; padding: var(--s2) 0; }
.manual-domain .chain-target { margin-top: var(--s2); }

/* step-3 decision bar */
.decision-bar {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  margin: var(--s3) 0 var(--s4); padding: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.decision-bar input[type="search"], .decision-bar select {
  min-height: 38px; padding: 0 var(--s4); font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
}
.decision-bar select { padding-right: var(--s6); }
.decision-bar input[type="search"] { flex: 1; min-width: 160px; }
.decision-bar select { cursor: pointer; }
.seg-check { display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer;
  padding: 0 var(--s2); }
.seg-check input { width: 16px; height: 16px; accent-color: var(--accent); }

.p-chips { display: flex; gap: var(--s1); margin-top: 4px; flex-wrap: wrap; }
.mini-chip { font-size: 11px; padding: 1px var(--s2); border-radius: var(--r-full);
  background: var(--surface-hi); color: var(--text-3); }

/* fit badge */
.fit-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-full);
  vertical-align: middle; margin-left: var(--s2); }
.fit-badge.big { font-size: 12px; padding: 4px var(--s3); margin: 0; align-self: flex-start; }
.fit-badge.good { background: var(--ok-bg); color: var(--ok-fg); }
.fit-badge.maybe { background: var(--warn-bg); color: var(--warn-fg); }
.fit-badge.off { background: var(--surface-hi); color: var(--text-3); }

/* step-4 check */
.check-head { margin-bottom: var(--s2); }
.check-head .ch-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.check-head .ch-title { color: var(--text-2); font-size: 14px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3); margin: var(--s4) 0; }
.check-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.check-card .ch-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); font-weight: 600; }
.check-card p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.check-card .btn { align-self: flex-start; }
.checklist { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s4) 0;
  padding: var(--s4); background: var(--surface-2); border-radius: var(--r-md);
  border-left: 3px solid var(--accent); }
.checklist label { display: flex; align-items: center; gap: var(--s3); font-size: 14px;
  cursor: pointer; }
.checklist input { width: 17px; height: 17px; accent-color: var(--accent); }
.reveal-cta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding-top: var(--s3); border-top: 1px solid var(--line); }
.reveal-cta .btn-primary { min-height: 46px; padding: 0 var(--s5); font-size: 15px; }
.reveal-note { font-size: 13px; color: var(--text-3); }

/* ── Login gate ─────────────────────────────────────────────────────────── */
.login-gate { position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: var(--s5);
  background: var(--bg); }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column;
  gap: var(--s3); text-align: center; }
.login-card h1 { font-size: 22px; margin: var(--s2) 0 0; }
.login-mark { width: 64px; height: 64px; margin: 0 auto; }
.login-sub { color: var(--text-3); font-size: 14px; margin: 0 0 var(--s2); }
.login-card .field { text-align: left; }
.login-card .btn-primary { min-height: 44px; margin-top: var(--s2); }
.login-error { color: var(--bad-fg); font-size: 13px; margin: 0; }

/* Associate accounts: no admin surfaces at all. */
body.associate-mode .assoc-hide { display: none !important; }
/* Viewing another rep's company (read-only): hide every write control. */
body.viewing-readonly #editDetailsBtn,
body.viewing-readonly .crm-log-actions,
body.viewing-readonly #deleteContactBtn,
body.viewing-readonly .task-check,
body.viewing-readonly .task-del,
body.viewing-readonly .timeline-del { display: none !important; }
.timeline-privacy {
  margin: 0 0 var(--s3); font-size: 12.5px; color: var(--text-3);
  background: var(--surface-hi); border-radius: var(--r2, 8px);
  padding: 6px 10px;
}
.logins-subhead {
  margin: var(--s4) 0 var(--s2); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.ro-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--warn-fg); border: 1px solid var(--warn-fg);
  border-radius: 999px; padding: 1px 8px;
}

/* Signed-in identity + logout in the sidebar footer. */
.account-row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-top: var(--s2); }
.account-who { font-size: 12px; color: rgba(255,255,255,.55); }
.account-who b { color: rgba(255,255,255,.82); }

/* Logins & passwords table. */
.logins-table td { vertical-align: middle; }
.pw-dots { letter-spacing: 1px; }
.pw-toggle, .pw-regen { margin-left: var(--s2); font-size: 12px; }