/* ==========================================================================
   engage-leads.css — "Engage with Leads" module view.
   Ported from Helix-Integration-prototype/engage-with-leads.html, scoped under
   #engageLeadsView. Brand/surface/ink/line map to the app's --cw-* tokens;
   semantic RAG + CTA colours stay local (the app has no equivalents). Loaded
   BEFORE module-shell.css so the shell's responsive rules still win.
   ========================================================================== */
#engageLeadsView {
  --el-surface: var(--cw-surface, #fff);
  --el-ink: var(--cw-text, #1b1b1f);
  --el-ink-2: var(--cw-text, #3c3c43);
  --el-muted: var(--cw-text-muted, #6b6b76);
  --el-faint: var(--cw-text-subtle, #9a9aa3);
  --el-line: var(--cw-border, #e8e8ec);
  --el-line-2: var(--cw-surface-muted, #f0f0f3);
  --el-brand: var(--cw-accent, #5b5fc7);
  --el-brand-weak: var(--cw-accent-tint, #eef0fe);
  --el-brand-ink: var(--cw-accent-text, #3a32c4);
  /* Semantic colours — no app token equivalents, kept local. */
  --el-wa: #1da955; --el-wa-weak: #e7f6ee; --el-wa-ink: #147a3d;
  --el-call: #2563eb; --el-call-weak: #e8f0fe; --el-call-ink: #1a4fc4;
  --el-mail: #5b5b66; --el-mail-weak: #f1f1f4;
  --el-red: #e5484d; --el-amber: #f0a823; --el-green: #1da955;
  --el-radius: 16px; --el-radius-sm: 10px;
  --el-shadow: 0 1px 2px rgba(20,20,30,.05), 0 6px 20px rgba(20,20,30,.05);
  --el-shadow-hover: 0 2px 4px rgba(20,20,30,.06), 0 12px 30px rgba(20,20,30,.10);
}

/* ---- header ---- */
#engageLeadsView .el-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
#engageLeadsView .el-eyebrow { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--el-faint); margin:0 0 6px; }
#engageLeadsView .el-h1 { font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0; line-height:1.15; color:var(--el-ink); }
#engageLeadsView .el-sub { margin:6px 0 0; color:var(--el-muted); font-size:14px; max-width:46ch; }
#engageLeadsView .el-count-pill { display:inline-flex; align-items:baseline; gap:6px; background:var(--el-surface); border:1px solid var(--el-line); border-radius:999px; padding:8px 14px; box-shadow:var(--el-shadow); }
#engageLeadsView .el-count-pill b { font-size:18px; font-weight:700; color:var(--el-ink); }
#engageLeadsView .el-count-pill span { font-size:12px; color:var(--el-muted); }

/* ---- filter chips ---- */
#engageLeadsView .el-filters { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 22px; }
#engageLeadsView .el-chip {
  appearance:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--el-ink-2); background:var(--el-surface); border:1px solid var(--el-line);
  border-radius:999px; padding:8px 14px; display:inline-flex; align-items:center; gap:7px;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
#engageLeadsView .el-chip:hover { border-color:#d9d9e0; }
#engageLeadsView .el-chip .c-num { font-weight:700; color:var(--el-faint); font-variant-numeric:tabular-nums; }
#engageLeadsView .el-chip[aria-pressed="true"] { background:var(--el-brand); border-color:var(--el-brand); color:#fff; box-shadow:var(--el-shadow); }
#engageLeadsView .el-chip[aria-pressed="true"] .c-num { color:rgba(255,255,255,.75); }
#engageLeadsView .el-chip:focus-visible { outline:2px solid var(--el-brand); outline-offset:2px; }

/* ---- grid ---- */
#engageLeadsView .el-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }

/* ---- lead card ---- */
#engageLeadsView .el-card {
  background:var(--el-surface); border:1px solid var(--el-line); border-radius:var(--el-radius);
  box-shadow:var(--el-shadow); padding:18px 18px 14px; display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
#engageLeadsView .el-card:hover { box-shadow:var(--el-shadow-hover); transform:translateY(-2px); border-color:#e0e0e6; }
#engageLeadsView .el-card-top { display:flex; gap:12px; align-items:flex-start; }
#engageLeadsView .el-avatar { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; letter-spacing:.02em; }
#engageLeadsView .el-nameblock { min-width:0; flex:1; }
#engageLeadsView .el-name-row { display:flex; align-items:center; gap:8px; }
#engageLeadsView .el-lead-name { font-size:16px; font-weight:700; letter-spacing:-.005em; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--el-ink); }
#engageLeadsView .el-rag { flex:0 0 auto; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px var(--rag-halo); }
#engageLeadsView .el-rag.Red { background:var(--el-red); --rag-halo:rgba(229,72,77,.14); }
#engageLeadsView .el-rag.Amber { background:var(--el-amber); --rag-halo:rgba(240,168,35,.16); }
#engageLeadsView .el-rag.Green { background:var(--el-green); --rag-halo:rgba(29,169,85,.16); }
#engageLeadsView .el-meta { margin:3px 0 0; font-size:12.5px; color:var(--el-muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
#engageLeadsView .el-dot { width:3px; height:3px; border-radius:50%; background:var(--el-faint); }
#engageLeadsView .el-stage { flex:0 0 auto; align-self:flex-start; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--el-brand-weak); color:var(--el-brand-ink); white-space:nowrap; }
#engageLeadsView .el-intel-btn {
  appearance:none; cursor:pointer; flex:0 0 auto; align-self:flex-start;
  width:30px; height:30px; display:grid; place-items:center; padding:0;
  border:1px solid var(--el-line); border-radius:9px; background:var(--el-surface);
  color:var(--el-brand); transition:background .15s, border-color .15s;
}
#engageLeadsView .el-intel-btn:hover { background:var(--el-brand-weak); border-color:color-mix(in srgb, var(--el-brand) 30%, var(--el-line)); }
#engageLeadsView .el-intel-btn:focus-visible { outline:2px solid var(--el-brand); outline-offset:2px; }
#engageLeadsView .el-intel-btn svg { display:block; }

/* propensity + next action */
#engageLeadsView .el-body-row { display:flex; flex-direction:column; gap:12px; }
#engageLeadsView .el-prop { display:flex; align-items:center; gap:10px; }
#engageLeadsView .el-prop-bar { flex:1; height:6px; border-radius:999px; background:var(--el-line-2); overflow:hidden; }
#engageLeadsView .el-prop-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--el-brand) 78%, #ffffff), var(--el-brand)); }
#engageLeadsView .el-prop-val { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--el-ink); min-width:34px; text-align:right; }
#engageLeadsView .el-prop-label { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--el-faint); min-width:74px; }
#engageLeadsView .el-nba { display:flex; gap:9px; align-items:flex-start; background:var(--el-line-2); border-radius:var(--el-radius-sm); padding:10px 12px; }
#engageLeadsView .el-nba svg { flex:0 0 auto; margin-top:1px; color:var(--el-brand); }
#engageLeadsView .el-nba-txt { font-size:13px; color:var(--el-ink-2); line-height:1.35; }
#engageLeadsView .el-nba-txt b { font-weight:600; color:var(--el-ink); }

/* CTA row */
#engageLeadsView .el-cta-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:2px; padding-top:14px; border-top:1px solid var(--el-line-2); }
#engageLeadsView .el-cta {
  appearance:none; cursor:pointer; text-decoration:none; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:13px; font-weight:600; border-radius:var(--el-radius-sm);
  padding:9px 8px; border:1px solid transparent; transition:filter .15s, background .15s, transform .05s;
}
#engageLeadsView .el-cta:active { transform:translateY(1px); }
#engageLeadsView .el-cta:focus-visible { outline:2px solid var(--el-brand); outline-offset:2px; }
#engageLeadsView .el-cta.wa { background:var(--el-wa-weak); color:var(--el-wa-ink); }
#engageLeadsView .el-cta.mail { background:var(--el-mail-weak); color:var(--el-mail); }
#engageLeadsView .el-cta.call { background:var(--el-call-weak); color:var(--el-call-ink); }
#engageLeadsView .el-cta:hover { filter:brightness(.97); }
#engageLeadsView .el-cta[aria-disabled="true"] { opacity:.45; pointer-events:none; }
#engageLeadsView .el-cta svg { flex:0 0 auto; }

/* loading / empty / error states */
#engageLeadsView .el-state {
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--el-muted);
  background:var(--el-surface); border:1px dashed var(--el-line); border-radius:var(--el-radius);
}
#engageLeadsView .el-state h3 { margin:0 0 6px; color:var(--el-ink); font-size:16px; }
#engageLeadsView .el-state p { margin:0; font-size:14px; }

@media (max-width:560px) {
  #engageLeadsView .el-h1 { font-size:22px; }
  #engageLeadsView .el-grid { grid-template-columns:1fr; }
}