/* ==========================================================================
   Outreach screens — selection, analysis, findings, review, send, report.
   Builds on the design system in leads/css/style.css; no tokens redefined.
   ========================================================================== */

/* --- phase header ------------------------------------------------------- */

.phase-card { position: relative; overflow: hidden; }

.phase-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-primary);
}

.phase-top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.phase-main { flex: 1; min-width: 220px; }

.phase-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 17px;
  font-weight: 660;
}

.phase-detail {
  margin: var(--sp-1) 0 0;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 72ch;
}

/* --- sequential run panel -----------------------------------------------
   One lead at a time: which company is being read, how far through its four
   steps, and the queue behind it. Every state carries a word as well as a
   colour, so the panel is readable without relying on hue.
   ------------------------------------------------------------------------ */

.run {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.run-count {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.run-count b {
  font-size: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.run-of { font-weight: 500; }

.run-current {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-1) 0 0;
  font-size: 13px;
  color: var(--ink-2);
  min-height: 18px;
}

.run-current .icon { color: var(--p-500); flex: none; }
.run-current .mono { font-size: 12px; color: var(--ink-3); }

.run-pct {
  font-size: 20px;
  font-weight: 700;
  color: var(--p-600);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* The four per-lead steps. */
.run-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.run-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-4);
}

.run-step .icon { flex: none; }
.run-step.is-done { color: var(--ok-700); }
.run-step.is-done .icon { color: var(--ok-500); }
.run-step.is-current { color: var(--p-600); }
.run-step.is-current .icon {
  color: var(--p-500);
  animation: run-spin 1.4s linear infinite;
}

@keyframes run-spin { to { transform: rotate(360deg); } }

.run-next {
  margin: var(--sp-3) 0 0;
  font-size: 12px;
  color: var(--ink-4);
}

/* The queue. Scrolls rather than growing without limit -- a campaign can carry
   300 leads and the panel must stay a panel. */
.run-queue {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}

.run-queue > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.run-leads {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  max-height: 214px;
  overflow-y: auto;
}

.run-lead {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 12.5px;
}

.run-lead + .run-lead { margin-top: 2px; }

.run-lead-n {
  flex: none;
  min-width: 58px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.run-lead-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}

.run-lead-state { flex: none; font-size: 11px; color: var(--ink-4); }

.run-lead.is-completed .run-lead-state { color: var(--ok-700); }
.run-lead.is-failed .run-lead-state { color: var(--err-500); }

.run-lead.is-current {
  background: var(--p-50);
  box-shadow: inset 2px 0 0 var(--p-500);
}
.run-lead.is-current .run-lead-name { color: var(--ink); font-weight: 650; }
.run-lead.is-current .run-lead-state { color: var(--p-600); font-weight: 600; }
.run-lead.is-waiting { opacity: .62; }

/* Paused and cancelled leads. Neither is a failure: one is mid-wait, the other
   was never started, and both must read differently from "no email written". */
.run-lead.is-paused {
  background: var(--warn-50);
  box-shadow: inset 2px 0 0 var(--warn-500);
}
.run-lead.is-paused .run-lead-state { color: var(--warn-700); font-weight: 600; }
.run-lead.is-stopped { opacity: .55; }
.run-lead.is-stopped .run-lead-state { font-style: italic; }

/* Cancel sits with the percentage it stops, on the right of the run head. */
.run-head-end {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}

/* The one banner that explains a stopped run: paused, cancelling or cancelled. */
.control-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.control-banner .spacer { flex: 1; min-width: 0; }
.control-banner b { font-weight: 660; }

/* --- draft cards -------------------------------------------------------- */

.drafts { display: flex; flex-direction: column; gap: var(--sp-4); }

.draft {
  position: relative;
  padding: 0;
  overflow: hidden;
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.draft:hover { box-shadow: var(--sh-3); }

/* A 3px state rail down the left edge. Always paired with the status pill in
   the header, so the colour is a shortcut and never the only signal. */
.draft::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--border-strong);
}

.draft[data-status="approved"]::before { background: var(--ok-500); }
.draft[data-status="sent"]::before { background: var(--ok-700); }
.draft[data-status="failed"]::before { background: var(--err-500); }
.draft[data-status="generated"]::before { background: var(--p-500); }
.draft[data-status="rejected"]::before { background: var(--n-300); }
.draft[data-status="rejected"] { opacity: .66; }
.draft[data-status="sent"] { opacity: .86; }

.draft-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--n-100);
  background: var(--surface-2);
  flex-wrap: wrap;
}

.draft-id { flex: 1; min-width: 200px; }

.draft-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: 15.5px;
  font-weight: 660;
}

.draft-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-2) 0 0;
  font-size: 12.5px;
}

.draft-meta > div { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.draft-meta .icon { width: 13px; height: 13px; color: var(--ink-4); flex: none; }
.draft-meta dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.draft-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }

.draft-flags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.draft-section { padding: var(--sp-4) var(--sp-5); }
.draft-section + .draft-section { border-top: 1px solid var(--n-100); }

.section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-label .icon { width: 14px; height: 14px; color: var(--p-500); }
.section-label .badge { margin-left: 2px; }
.section-label-end { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* --- crawl summary line ------------------------------------------------- */

.crawl {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 12.5px;
  color: var(--ink-3);
}

.crawl .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--a-600); flex: none; }
.crawl.is-warn { color: var(--warn-700); }
.crawl.is-warn .icon { color: var(--warn-500); }

.summary-line {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  color: var(--ink);
}

.pages-line { margin: var(--sp-3) 0 0; font-size: 11.5px; color: var(--ink-4); }

/* --- findings ----------------------------------------------------------- */

.findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  counter-reset: finding;
}

.finding {
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.finding:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* Numbered by CSS so the list order in the markup is the source of truth. */
.finding::before {
  counter-increment: finding;
  content: counter(finding);
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 7px;
  background: var(--n-100);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.finding-high::before { background: var(--err-50); color: var(--err-700); }
.finding-medium::before { background: var(--warn-50); color: var(--warn-700); }
.finding-low::before { background: var(--n-100); color: var(--ink-3); }

.finding-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px var(--sp-2);
}

.finding-issue { font-size: 13.5px; font-weight: 620; color: var(--ink); }

.finding-detail {
  margin: var(--sp-3) 0 0;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--sp-1) var(--sp-3);
  font-size: 12.5px;
}

.finding-detail dt {
  color: var(--ink-4);
  font-weight: 620;
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding-top: 1px;
}

.finding-detail dd { margin: 0; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.finding-detail .evidence { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }

.finding-page {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  text-decoration: none;
}

.finding-page:hover { color: var(--p-600); }
.finding-page .icon { width: 11px; height: 11px; }

/* --- the email block ---------------------------------------------------- */

.email-block { background: var(--surface-2); }

.email-shell {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.email-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--n-100);
}

/* The standing reply invitation, appended at send time. Shown greyed and
   non-editable so it reads as part of the message but not part of the draft. */
.email-row-auto { background: var(--surface-2); }

.email-auto {
  flex: 1;
  margin: 0;
  padding: 10px var(--sp-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  font-style: italic;
}

.email-row-label {
  flex: none;
  width: 78px;
  padding: 10px var(--sp-3);
  background: var(--surface-2);
  border-right: 1px solid var(--n-100);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.d-subject, .d-body {
  width: 100%;
  border: 0;
  padding: 10px var(--sp-3);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  resize: vertical;
}

.d-subject { font-weight: 600; }
.d-body { line-height: 1.62; min-height: 190px; display: block; }
.d-subject:focus, .d-body:focus { outline: none; background: var(--p-50); }
.d-subject[readonly], .d-body[readonly] { color: var(--ink-2); cursor: default; }

.draft.is-editing .email-shell {
  border-color: var(--p-400);
  box-shadow: var(--ring);
}

.observation {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--p-50);
  border-left: 3px solid var(--p-400);
  font-size: 12px;
  color: var(--p-900);
}

.observation .icon { width: 13px; height: 13px; margin-top: 2px; color: var(--p-600); flex: none; }
.observation.is-plain { background: var(--warn-50); border-left-color: var(--warn-500); color: var(--warn-700); }
.observation.is-plain .icon { color: var(--warn-500); }

.draft-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--err-50);
  color: var(--err-700);
  font-size: 12.5px;
}

.draft-error .icon { width: 14px; height: 14px; margin-top: 1px; flex: none; }

.draft-actions {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-2);
  border-top: 1px solid var(--n-100);
  flex-wrap: wrap;
}

.draft-actions .spacer { flex: 1; }

/* --- toolbar ------------------------------------------------------------ */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.filters { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- send panel --------------------------------------------------------- */

.send-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.send-meta {
  display: grid;
  gap: var(--sp-2);
  font-size: 12.5px;
}

.send-meta-row { display: flex; align-items: center; gap: var(--sp-2); }
.send-meta-row .icon { width: 14px; height: 14px; color: var(--ink-4); flex: none; }
.send-meta-row b { color: var(--ink); font-weight: 620; }

.send-form { display: flex; flex-direction: column; gap: var(--sp-3); }

/* --- skipped list ------------------------------------------------------- */

.skipped { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.skipped li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12.5px;
  color: var(--ink-3);
}

.skipped li b { color: var(--ink-2); font-weight: 600; }

/* Rows carry the reason and, for a history match, the override action. */
.skipped-row {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.skipped-row:last-child { border-bottom: 0; }

.skipped-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.skipped-why {
  font-size: 11.5px;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- stalled run banner -------------------------------------------------- */

.stall {
  align-items: center;
  gap: var(--sp-3);
}

.stall span { flex: 1; min-width: 200px; }
.stall .btn { flex: none; }

/* --- do-not-contact list ------------------------------------------------- */

.sup-form {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(170px, 1fr) minmax(220px, 2fr) auto;
  gap: var(--sp-4);
  align-items: end;
}

.sup-form .field { margin: 0; }
.sup-form .hint { margin-top: var(--sp-1); }
.sup-form > .btn { margin-bottom: 2px; }

@media (max-width: 900px) {
  .sup-form { grid-template-columns: 1fr; align-items: stretch; }
  .sup-form > .btn { margin-bottom: 0; }
}

/* --- settings screen ---------------------------------------------------- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
}

.kv { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-2) var(--sp-3); font-size: 13px; margin: 0; }
.kv dt { color: var(--ink-3); font-weight: 550; }
.kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.kv dd .mono { font-size: 12px; }

.provider-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.provider-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.provider-row.is-active { border-color: var(--p-300); background: var(--p-50); box-shadow: var(--sh-1); }
.provider-row-main { flex: 1; min-width: 0; }
.provider-row-name { font-size: 13px; font-weight: 620; }
.provider-row-sub { font-size: 11.5px; color: var(--ink-3); }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 860px) {
  .send-grid { grid-template-columns: 1fr; }
  .finding-detail { grid-template-columns: 1fr; gap: 1px; }
  .finding-detail dt { padding-top: var(--sp-2); }
  .kv { grid-template-columns: 1fr; gap: 1px var(--sp-3); }
  .kv dt { padding-top: var(--sp-2); }
  .email-row { flex-direction: column; }
  .email-row-label {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--n-100);
    padding: 6px var(--sp-3);
  }
  .draft-head, .draft-section, .draft-actions { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .finding { padding-left: var(--sp-7); }
}

/* Already-contacted rows in the selection table. The greyed checkbox plus the
   status badge carry the meaning; the tint is only reinforcement. */
.table tbody tr.row-contacted { background: var(--warn-50); }
.table tbody tr.row-contacted:hover { background: #FCEFD8; }
.table tbody tr.row-contacted .cell-title { color: var(--ink-2); }

/* --- replies and follow-ups ---------------------------------------------
   One card per emailed lead: the thread so far, the eligibility verdict, and
   the drafted follow-up when there is one. Every state carries a word as well
   as a colour.
   ------------------------------------------------------------------------ */

.fu-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.fu-card { position: relative; overflow: hidden; }

.fu-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--border-strong);
}

.fu-card[data-state="replied"]::before { background: var(--ok-500); }
.fu-card[data-state="bounced"]::before { background: var(--err-500); }
.fu-card[data-state="unsubscribed"]::before { background: var(--err-700); }

.fu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.fu-name { margin: 0; font-size: 16px; font-weight: 660; color: var(--ink); }
.fu-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }

.fu-flags {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* The thread: initial email, each follow-up, then the outcome. */
.fu-thread {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--n-100);
  padding-left: var(--sp-4);
}

.fu-step {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.fu-step .icon { flex: none; align-self: center; }
.fu-step-label { flex: 1; min-width: 0; }
.fu-step-when { flex: none; font-size: 11px; color: var(--ink-4); }
.fu-step.is-done .icon { color: var(--ok-500); }
.fu-step.is-done .fu-step-label { color: var(--ink-2); }
.fu-step.is-reply { color: var(--ok-700); font-weight: 620; }
.fu-step.is-reply .icon { color: var(--ok-500); }
.fu-step.is-open .icon { color: var(--ink-4); }

.fu-snippet {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--ok-50);
  font-size: 12.5px;
  color: var(--ok-700);
  font-style: italic;
}

.fu-snippet .icon { flex: none; color: var(--ok-500); }

.fu-decision {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.fu-verdict {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 1;
  min-width: 240px;
  font-size: 13px;
}

.fu-verdict.is-yes { color: var(--ok-700); }
.fu-verdict.is-yes .icon { color: var(--ok-500); }
.fu-verdict.is-no { color: var(--ink-3); }
.fu-verdict.is-no .icon { color: var(--ink-4); }

.fu-timing { margin: 0; font-size: 12px; color: var(--ink-4); }

.fu-draft {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--p-100);
  border-radius: var(--r-md);
  background: var(--p-50);
}

.fu-draft .email-shell { margin-top: var(--sp-3); background: var(--surface); }
.fu-draft .draft-actions { margin-top: var(--sp-3); padding: 0; border-top: 0; }
.fu-draft .fu-error { margin-top: var(--sp-3); }

.fu-to, .fu-subject {
  flex: 1;
  min-width: 0;
  padding: 10px var(--sp-3);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
}

.fu-to { color: var(--ink-3); }
.fu-body {
  flex: 1;
  min-width: 0;
  padding: 10px var(--sp-3);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
}

.fu-draft.is-editing .fu-subject,
.fu-draft.is-editing .fu-body { background: #FFFDF5; }

/* --- The AI credential pool ----------------------------------------------
   One card per provider (the parent), holding a list of credentials (the
   children). The active child is marked three ways -- a filled dot, the word
   ACTIVE, and a tinted row -- so it never depends on colour alone.
   ------------------------------------------------------------------------ */

.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.cred-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

/* A provider with an active credential of its own reads as the live one. */
.cred-card[data-source="database"] {
  border-color: var(--p-100);
  background: linear-gradient(var(--p-50), var(--surface) 42%);
}

.cred-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cred-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: 15px;
  font-weight: 660;
  color: var(--ink);
}

.cred-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--sp-1) 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.cred-status b { color: var(--ink-2); font-weight: 620; }
.cred-source { color: var(--ink-4); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-ok { background: var(--ok-500); }
.dot-warn { background: var(--warn-500); }
.dot-off { background: var(--n-300); }

.cred-advice {
  margin: 0;
  font-size: 12px;
  color: var(--warn-700);
  background: var(--warn-50);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}

/* --- the children -------------------------------------------------------- */

.cred-children {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cred-child {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.cred-child.is-active {
  border-color: var(--ok-500);
  box-shadow: inset 3px 0 0 var(--ok-500);
}

.cred-child[data-status="failing"] { border-color: var(--err-50); }

.cred-child-empty {
  border-style: dashed;
  color: var(--ink-3);
  font-size: 12.5px;
  background: var(--n-50);
}

.cred-child-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}

.cred-child-head .spacer { flex: 1; }

.cred-mark {
  flex: none;
  font-size: 13px;
  line-height: 1;
  color: var(--n-400);
}
.cred-child.is-active .cred-mark { color: var(--ok-500); }

.cred-child-name {
  font-size: 13.5px;
  font-weight: 620;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.cred-child-key {
  font-size: 11.5px;
  color: var(--ink-4);
  overflow-wrap: anywhere;
}

.cred-child-note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}

.cred-child-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: 0;
  font-size: 12px;
}

.cred-child-meta > div { min-width: 0; }

.cred-child-meta dt {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.cred-child-meta dd {
  margin: 1px 0 0;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cred-child-err,
.cred-child-test {
  margin: 0;
  font-size: 11.5px;
  border-radius: var(--r-sm);
  padding: 5px var(--sp-2);
  overflow-wrap: anywhere;
}

.cred-child-err { color: var(--err-700); background: var(--err-50); }
.cred-child-test { color: var(--ink-3); background: var(--n-50); }

.cred-child-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.cred-child-actions .spacer { flex: 1; }

/* A fallback that is switched on is a state, so it reads as pressed. */
.cred-fallback[data-enabled="1"] {
  color: var(--warn-700);
  background: var(--warn-50);
}

/* --- adding one ---------------------------------------------------------- */

.cred-add { margin: 0; }

.cred-add-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-700);
  padding: 6px 0;
  list-style: none;
}

.cred-add-toggle::-webkit-details-marker { display: none; }
.cred-add-toggle:hover { color: var(--p-500); }
.cred-add-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

.cred-add[open] > .cred-add-toggle { color: var(--ink-2); }

.cred-add-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
}

.cred-add-body .field { margin: 0; }

.cred-activate-wrap { align-items: flex-start; }
.cred-activate-wrap .hint { display: block; margin: 2px 0 0; }

.cred-input { display: flex; gap: var(--sp-2); align-items: stretch; }
.cred-input .input { flex: 1; min-width: 0; font-family: var(--mono, monospace); }
.cred-input .btn { flex: none; white-space: nowrap; }

.cred-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.cred-actions .spacer { flex: 1; }

.cred-foot { margin: 0; font-size: 11.5px; color: var(--ink-4); }
.cred-result { margin: 0; }

/* --- the audit trail ----------------------------------------------------- */

.cred-log { margin-top: var(--sp-4); }

.cred-log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--sp-2) 0;
  padding: 0;
  list-style: none;
}

.cred-log-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-2);
}

.cred-log-row:nth-child(odd) { background: var(--n-50); }
.cred-log-row .spacer { flex: 1; }

/* Configured / not-configured ticks in the provider selector. */
.tick { font-size: 12px; font-weight: 700; line-height: 1; }
.tick-ok { color: var(--ok-500); }
.tick-no { color: var(--err-500); }

.provider-pick {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.provider-pick[data-blocked] { opacity: .62; cursor: not-allowed; }
.provider-pick:hover:not(.is-active):not([data-blocked]) { background: var(--surface-2); }

/* ==========================================================================
   Lead intelligence: dashboard, table, lead detail
   --------------------------------------------------------------------------
   Scores and priorities are the only new vocabulary here, and both follow the
   rule the rest of the design system follows: a colour never carries meaning on
   its own. Every score shows its number, every priority shows its word.
   ========================================================================== */

.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-head .icon { width: 15px; height: 15px; color: var(--p-500); }

/* A stat that is also a filter link. */
.stat-link {
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.stat-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-3);
  color: inherit;
}

.stat-accent { background: var(--a-50); border-color: var(--a-100); }
.stat-accent .stat-n { color: var(--a-700); }
.stat-warn { background: var(--warn-50); border-color: #F5E0B8; }
.stat-warn .stat-n { color: var(--warn-700); }

/* --- work queues ---------------------------------------------------------- */

.queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-3);
}

.queue {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.queue:hover { box-shadow: var(--sh-3); border-color: var(--p-200); color: inherit; }

.queue-icon { flex: none; font-size: 22px; line-height: 1; }
.queue-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.queue-label { font-size: 13.5px; font-weight: 650; color: var(--ink); }

.queue-blurb {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-4);
}

.queue-count {
  flex: none;
  min-width: 34px;
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  color: var(--p-600);
  font-variant-numeric: tabular-nums;
}

.queue[data-queue="skip"] { opacity: .72; }
.queue[data-queue="skip"] .queue-count { color: var(--ink-4); }

/* --- scores --------------------------------------------------------------- */

/* The number is the signal; the colour is a shortcut to it. */
.score {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--n-100);
  color: var(--ink-2);
}

.score-hot { background: var(--err-50); color: var(--err-700); }
.score-warm { background: var(--warn-50); color: var(--warn-700); }
.score-low { background: var(--a-50); color: var(--a-700); }
.score-skip { background: var(--n-100); color: var(--ink-4); }

.score-sm { min-width: 28px; font-size: 12px; padding: 1px 5px; }

/* Classification and priority pills. */
.pill-class.pill-website_found { background: var(--p-50); color: var(--p-700); }
.pill-class.pill-no_website_opportunity { background: var(--a-50); color: var(--a-700); }
.pill-class.pill-website_unverified { background: var(--warn-50); color: var(--warn-700); }

.pill-prio.pill-hot { background: var(--err-50); color: var(--err-700); }
.pill-prio.pill-warm { background: var(--warn-50); color: var(--warn-700); }
.pill-prio.pill-low { background: var(--a-50); color: var(--a-700); }
.pill-prio.pill-skip { background: var(--n-100); color: var(--ink-4); }

/* --- the lead table ------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.filter-label {
  flex: none;
  min-width: 78px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.filter-row .chip { text-decoration: none; }
.filter-row .select { max-width: 200px; }
.filter-row .input { max-width: 240px; }

.filter-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
}

.filter-count b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The table is wide by design -- eighteen columns of intelligence. It scrolls
   inside its own container rather than making the page scroll sideways. */
.lead-table { font-size: 12.5px; }
.lead-table th { white-space: nowrap; }
.lead-table td { vertical-align: middle; }
.lead-table .cell-title { font-size: 13px; }

.lead-table tr.is-skip { opacity: .66; }
.lead-table tr.is-hot td:first-child { box-shadow: inset 3px 0 0 var(--err-500); }
.lead-table tr.is-warm td:first-child { box-shadow: inset 3px 0 0 var(--warn-500); }

.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--p-600); }
.sort-link.is-active { color: var(--p-600); font-weight: 700; }

/* --- lead detail ---------------------------------------------------------- */

.intel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--sp-4);
  align-items: start;
}

@media (max-width: 1000px) {
  .intel-grid { grid-template-columns: minmax(0, 1fr); }
}

.subscores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.subscore {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.subscore-k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.subscore-n {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.subscore-n.is-unknown { font-size: 14px; color: var(--ink-4); font-weight: 600; }

.subscore-track {
  height: 4px;
  margin-top: var(--sp-2);
  border-radius: var(--r-full);
  background: var(--n-200);
  overflow: hidden;
}

.subscore-fill { height: 100%; border-radius: var(--r-full); background: var(--p-500); }
.subscore-fill.is-poor { background: var(--err-500); }
.subscore-fill.is-fair { background: var(--warn-500); }
.subscore-fill.is-good { background: var(--ok-500); }

.subscore-why {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--ink-3);
}

.subscore-why li { padding: 1px 0; }
.subscore-why li::before { content: "· "; color: var(--ink-4); }

/* Findings, with severity carried by a word and a rail. */
.issue {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--surface);
}

.issue + .issue { margin-top: var(--sp-3); }
.issue-critical { border-left-color: var(--err-700); }
.issue-high { border-left-color: var(--err-500); }
.issue-medium { border-left-color: var(--warn-500); }
.issue-low { border-left-color: var(--a-500); }

.issue-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.issue-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }

.issue-detail { margin: 0; display: grid; gap: 4px; font-size: 12.5px; }
.issue-detail dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.issue-detail dd { margin: 0 0 var(--sp-2); color: var(--ink-2); }

.issue-detail dd.evidence {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* The lifecycle rail on the lead page. */
.life {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 0;
  font-size: 11.5px;
  color: var(--ink-4);
}

.life li::after {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--n-200);
  margin-left: 6px;
}

.life li:last-child::after { display: none; }
.life li .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--n-300); }
.life li.is-done { color: var(--ok-700); }
.life li.is-done .dot { background: var(--ok-500); }
.life li.is-current { color: var(--p-600); font-weight: 700; }
.life li.is-current .dot { background: var(--p-500); box-shadow: 0 0 0 3px var(--p-100); }
.life li.is-ended { color: var(--err-700); font-weight: 700; }
.life li.is-ended .dot { background: var(--err-500); }

/* Benefits for a no-website lead. */
.benefits { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: 13px; }
.benefits li { padding: 2px 0; color: var(--ink-2); }

.why-box {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--p-50);
  font-size: 13px;
  color: var(--p-900);
}

.why-box .icon { flex: none; color: var(--p-500); }

/* Score factors, shown so a number can be accounted for. */
.factors { margin: 0; padding: 0; list-style: none; font-size: 12px; }

.factors li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 4px 0;
  border-bottom: 1px solid var(--n-100);
}

.factors li:last-child { border-bottom: 0; }
.factors .f-label { flex: 1; min-width: 0; color: var(--ink-2); }
.factors .f-points { flex: none; font-variant-numeric: tabular-nums; font-weight: 650; }
.factors .f-points.is-down { color: var(--err-700); }
.factors .f-points.is-up { color: var(--ok-700); }
.factors .f-evidence { flex-basis: 100%; font-size: 11px; color: var(--ink-4); }

@media (max-width: 620px) {
  .queue-grid { grid-template-columns: 1fr; }
  .filter-label { min-width: 0; }
  .filter-row .input, .filter-row .select { max-width: none; width: 100%; }
}