/* ============================================================================
   SPARK Lead Intelligence — visual refresh (Phase 7c).

   A fresh, modern VISUAL LAYER over the existing, behaviourally-complete app.
   NOT a reimagining: same structure, same flows, same copy. The job is depth,
   hierarchy, spacing rhythm and refined states — to take the UI from flat to
   premium while staying unmistakably SPARK.

   ISOLATION: every rule is scoped under `body.refresh`. The class is set only on
   the Inbox and Lead-detail screens, so nothing here can reach the other screens
   or the live-run box. Drop the branch and the old skin returns untouched.

   BRAND, REFINED
     - magenta  #FC66CD  flat accent: underlines, borders, fills, tints
     - magenta-ink #b1148a  the same hue darkened to pass WCAG AA as TEXT/links
                            (raw #FC66CD on white is ~2.3:1 — fine as a fill,
                             fails as body text, so links use the ink variant)
     - gradient #FF56CF -> #FF6E52  reserved for PRIMARY actions + accent rails
     - LOCKED CONTRAST: gradient/magenta action buttons keep BLACK text; the
       verified-contact tick stays green. Never reintroduced white-on-gradient.
     - Light canvas for the data screens; magenta/gradient as accent only, never
       a fill behind dense data.
   ============================================================================ */

body.refresh {
    /* --- spacing scale (4px base) --- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

    /* --- radius scale --- */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

    /* --- type scale (modular, tuned for a data-dense tool) --- */
    --t-2xs: 0.68rem; --t-xs: 0.75rem; --t-sm: 0.82rem; --t-base: 0.9rem;
    --t-md: 1rem; --t-lg: 1.15rem; --t-xl: 1.5rem; --t-2xl: 2.4rem;

    /* --- ink + surfaces --- */
    --ink: #16161a;
    --ink-soft: #6b6b73;
    --ink-faint: #9a9aa2;
    --line: #ececf1;
    --line-soft: #f2f2f5;
    --surface: #ffffff;
    --surface-quiet: #fafafb;
    --magenta: #FC66CD;
    --magenta-ink: #b1148a;       /* AA-compliant magenta for text/links */
    --magenta-tint: #fff0fa;      /* softer than the old #ffe9f8 */
    --magenta-tint-2: #ffe6f6;
    --magenta-line: #f6cfe9;
    --gradient: linear-gradient(100deg, #FF56CF 0%, #FF6E52 100%);
    --good: #1f9d57;

    /* --- elevation scale (consistent, soft, layered — the depth system) --- */
    --e1: 0 1px 2px rgba(20,20,30,.04), 0 1px 3px rgba(20,20,30,.05);
    --e2: 0 1px 2px rgba(20,20,30,.04), 0 4px 12px rgba(20,20,30,.06);
    --e3: 0 2px 6px rgba(20,20,30,.06), 0 12px 28px rgba(20,20,30,.10);
    --glow: 0 4px 16px rgba(255,86,207,.30);

    color: var(--ink);
    /* Layered canvas: the single biggest fix for flatness. A barely-there
       brand-tinted wash at the top fades to a cool neutral, so white cards and
       the lead table lift off the page instead of sitting flush on pure white. */
    background:
        radial-gradient(130% 70% at 50% -15%, #fdeef8 0%, #f7f7fa 42%, #f5f5f8 100%) fixed,
        #f5f5f8;
}

/* honour reduced-motion: kill transitions/transforms for those who ask */
@media (prefers-reduced-motion: reduce) {
    body.refresh * { transition: none !important; animation: none !important; }
    body.refresh tbody tr:hover { transform: none !important; }
}

/* ----------------------------------------------------------------------------
   Header — was a flat 2px black rule; now a clean elevated bar.
   ---------------------------------------------------------------------------- */
body.refresh .topbar {
    position: sticky; top: 0; z-index: 40;
    gap: var(--s5);
    padding: var(--s3) var(--s8);
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--e1);
}
body.refresh .brand { gap: var(--s3); }
body.refresh .brand img.logo {
    height: 34px;
    filter: drop-shadow(0 1px 3px rgba(255,86,207,.28));
}
body.refresh .brand-sub {
    color: var(--ink-soft); font-size: var(--t-sm); font-weight: 700;
    letter-spacing: .02em; padding-left: var(--s3);
    border-left: 1px solid var(--line);
}
body.refresh .mainnav { gap: var(--s5); margin-left: var(--s3); }
body.refresh .mainnav a {
    color: var(--ink-soft); font-size: var(--t-base); font-weight: 700;
    padding: var(--s2) 0.15rem; border-bottom: 2px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}
body.refresh .mainnav a:hover { color: var(--ink); border-bottom-color: var(--magenta-line); }
body.refresh .mainnav a.active { color: var(--ink); border-image: var(--gradient) 1; border-bottom: 2px solid; }
body.refresh .env-badge {
    font-size: var(--t-2xs); letter-spacing: .08em; color: var(--ink-soft);
    background: var(--surface); border: 1px solid var(--line);
    padding: 0.28rem 0.7rem; box-shadow: var(--e1);
}

body.refresh .content { max-width: 1180px; margin: var(--s8) auto var(--s12); padding: 0 var(--s8); }
body.refresh .footer {
    max-width: 1180px; margin: var(--s10) auto; padding: var(--s5) var(--s8) 0;
    color: var(--ink-faint); font-size: var(--t-sm); border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------------------
   Screen head + hierarchy
   ---------------------------------------------------------------------------- */
body.refresh .screen-head { margin-bottom: var(--s6); }
body.refresh .screen-title { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
body.refresh .screen-sub { margin-top: var(--s2); color: var(--ink-soft); font-size: var(--t-base); }

body.refresh .back { margin-bottom: var(--s4); }
body.refresh .back a {
    color: var(--magenta-ink); font-weight: 700; font-size: var(--t-base);
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: gap .16s ease, color .16s ease;
}
body.refresh .back a:hover { gap: 0.5rem; }

/* ----------------------------------------------------------------------------
   Tabs — refined underline + count chips
   ---------------------------------------------------------------------------- */
body.refresh .tabs { gap: var(--s1); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
body.refresh .tab {
    color: var(--ink-soft); padding: var(--s3) var(--s4); font-size: var(--t-base); font-weight: 700;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: color .16s ease, border-color .16s ease;
}
body.refresh .tab:hover { color: var(--ink); }
body.refresh .tab.active { color: var(--ink); border-image: var(--gradient) 1; border-bottom: 2px solid; }
body.refresh .tab .count {
    min-width: 1.5em; text-align: center; background: #eeeef2; color: var(--ink-soft);
    border-radius: var(--r-pill); font-size: var(--t-2xs); padding: 0.1em 0.5em; font-weight: 800;
    transition: background .16s ease, color .16s ease;
}
body.refresh .tab.active .count { background: var(--magenta); color: #000; }
body.refresh .tab-set-aside { margin-left: auto; }

/* ----------------------------------------------------------------------------
   Filters — a quiet elevated control bar
   ---------------------------------------------------------------------------- */
body.refresh .filters {
    gap: var(--s2); align-items: center; padding: var(--s3);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--e1); margin-bottom: var(--s5);
}
body.refresh .filters input,
body.refresh .filters select {
    padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-quiet); font: inherit; font-size: var(--t-sm); color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.refresh .filters input:hover, body.refresh .filters select:hover { background: #fff; border-color: #dcdce2; }
body.refresh .filters input:focus, body.refresh .filters select:focus {
    outline: none; background: #fff; border-color: var(--magenta);
    box-shadow: 0 0 0 3px rgba(252,102,205,.22);
}
body.refresh .filters .f-search { flex: 1 1 260px; }
body.refresh .filters button {
    padding: 0.5rem 1.1rem; background: var(--ink); color: #fff; border: 1px solid var(--ink);
    border-radius: var(--r-sm); font-weight: 700; font-size: var(--t-sm); cursor: pointer;
    transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
body.refresh .filters button:hover { background: #2b2b30; box-shadow: var(--e1); }
body.refresh .filters button:active { transform: translateY(1px); }
body.refresh .filters .clear { color: var(--ink-soft); font-weight: 700; font-size: var(--t-sm); }
body.refresh .filters .clear:hover { color: var(--magenta-ink); }

/* ----------------------------------------------------------------------------
   The lead table — elevated white surface, generous rhythm, lift on hover
   ---------------------------------------------------------------------------- */
body.refresh table.leads {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--e2); overflow: hidden;
    font-size: var(--t-base); border-collapse: separate; border-spacing: 0;
}
body.refresh table.leads th {
    text-align: left; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-faint); font-weight: 800; padding: 0.7rem 1rem;
    background: var(--surface-quiet); border-bottom: 1px solid var(--line);
}
body.refresh table.leads th.num, body.refresh table.leads td.num { text-align: right; }
body.refresh table.leads td {
    padding: 0.85rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
body.refresh table.leads tbody tr {
    cursor: pointer; position: relative;
    transition: background .16s ease, box-shadow .16s ease;
}
body.refresh table.leads tbody tr:last-child td { border-bottom: none; }
/* hover = a gentle lift: brand-tint wash + a gradient accent rail + raised shadow.
   box-shadow (not transform) so neighbouring rows never jump. */
body.refresh table.leads tbody tr:hover { background: var(--magenta-tint); box-shadow: inset 3px 0 0 0 var(--magenta); }

/* Favourite = "flagged for follow-up", a SHARED flag (Dave flags, Louise sees it).
   Positive attention, deliberately NOT red (red reads as error/rejected). The brand
   magenta->coral gradient does the work, distinct from every other row state:
   - a persistent 4px gradient rail (thicker + gradient vs the flat 3px magenta hover
     rail, so a flagged row reads as flagged even before you hover it);
   - a barely-there warm wash at rest (lighter than the magenta-tint hover), so the
     row lifts without looking permanently hovered;
   - a magenta star by the name, the unambiguous marker the verified-green tick and
     the grey rejected state can never be confused with.
   Layered so a flagged row can still be main / nurture / degraded underneath. */
body.refresh table.leads tbody tr.lead-fav { background: #fff7fb; }
body.refresh table.leads tbody tr.lead-fav td:first-child { position: relative; }
body.refresh table.leads tbody tr.lead-fav td:first-child::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--gradient);
}
body.refresh table.leads tbody tr.lead-fav:hover { background: var(--magenta-tint); box-shadow: none; }
body.refresh .fav-star { color: var(--magenta); font-size: 1rem; line-height: 1; flex: none; }
body.refresh .fav-by {
    display: block; font-size: 0.68rem; font-weight: 700; color: var(--magenta-ink);
    text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.2rem;
}

body.refresh .c-co { width: 34%; }
body.refresh .co-name {
    font-weight: 800; font-size: var(--t-md); line-height: 1.2; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 0.5rem; color: var(--ink);
}
body.refresh .co-sub {
    color: var(--ink-faint); font-size: var(--t-xs); margin-top: 0.2rem;
    max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.refresh .c-ind { color: var(--ink-soft); font-size: var(--t-sm); white-space: nowrap; }
body.refresh .activity { font-weight: 700; font-size: var(--t-sm); line-height: 1.35; color: var(--ink); }
body.refresh .activity.is-trigger { color: var(--magenta-ink); }
body.refresh .c-date { color: var(--ink-soft); font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.refresh .con-name { font-weight: 700; font-size: var(--t-sm); }

/* score: the second-most-prominent thing on the row, after the company */
body.refresh .c-score { white-space: nowrap; }
body.refresh .score-num { font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body.refresh .score-den { color: var(--ink-faint); font-size: var(--t-2xs); font-weight: 700; }

body.refresh .muted { color: var(--ink-faint); }

/* ----------------------------------------------------------------------------
   Pills / badges — refined, consistent
   ---------------------------------------------------------------------------- */
body.refresh .pill, body.refresh .cls, body.refresh .fit, body.refresh .state {
    display: inline-flex; align-items: center; font-size: var(--t-2xs); font-weight: 800;
    padding: 0.18rem 0.55rem; border-radius: var(--r-pill); line-height: 1.4;
}
body.refresh .pill-new, body.refresh .pill-updated { text-transform: uppercase; letter-spacing: .04em; font-size: 0.6rem; }
body.refresh .pill-new { background: var(--gradient); color: #000; box-shadow: var(--e1); }
body.refresh .pill-updated { background: var(--magenta-tint-2); color: var(--magenta-ink); border: 1px solid var(--magenta-line); }

body.refresh .cls-trigger { background: var(--magenta-tint-2); color: var(--magenta-ink); border: 1px solid var(--magenta-line); }
body.refresh .cls-qualifying { background: #f0f0f3; color: var(--ink); border: 1px solid var(--line); }
body.refresh .cls-context { background: #f0f0f3; color: var(--ink-soft); }

body.refresh .fit { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); }
body.refresh .fit-high { color: #000; border-color: var(--magenta); box-shadow: 0 0 0 2px rgba(252,102,205,.12); }
body.refresh .fit-good { color: #000; border-color: var(--magenta-line); }
body.refresh .fit-moderate, body.refresh .fit-weak { background: #f0f0f3; color: var(--ink-soft); border-color: var(--line); }

body.refresh .state { text-transform: capitalize; border: 1px solid transparent; }
body.refresh .state-main { background: var(--ink); color: #fff; }
body.refresh .state-degraded { background: #fff; color: var(--ink); border-color: #dcdce2; }
body.refresh .state-nurture { background: var(--magenta-tint-2); color: var(--magenta-ink); border-color: var(--magenta-line); }
body.refresh .state-rejected { background: #f0f0f3; color: var(--ink-soft); }
body.refresh .state-pushed { background: var(--magenta); color: #000; }

body.refresh .tick, body.refresh .verified-tag { color: var(--good); font-weight: 800; }

/* ----------------------------------------------------------------------------
   Empty states — considered, not a bare line
   ---------------------------------------------------------------------------- */
body.refresh .empty-card {
    border: 1px dashed var(--magenta-line); border-radius: var(--r-lg);
    padding: var(--s12) var(--s8); text-align: center;
    background: linear-gradient(180deg, #fff 0%, var(--magenta-tint) 100%);
    box-shadow: var(--e1);
}
body.refresh .empty-card .empty { color: var(--ink-soft); padding: 0 0 var(--s4); font-size: var(--t-md); }

/* ============================================================================
   LEAD DETAIL
   ============================================================================ */
body.refresh .lead-head { align-items: flex-start; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); }
body.refresh .lead-head-main .screen-title { font-size: var(--t-2xl); }
body.refresh .lead-tags { gap: var(--s2); margin-top: var(--s3); font-size: var(--t-sm); }
body.refresh .lead-tags .muted { color: var(--ink-soft); }

/* score medallion — the hero metric, lifted off the page */
body.refresh .lead-head-score {
    text-align: center; line-height: 1; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s3) var(--s5) var(--s4); box-shadow: var(--e2); position: relative; overflow: hidden;
}
body.refresh .lead-head-score::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient);
}
body.refresh .score-num-lg { font-weight: 800; font-size: var(--t-2xl); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
body.refresh .score-den-lg { color: var(--ink-faint); font-size: var(--t-base); font-weight: 700; }

/* push-to-CRM action row */
body.refresh .actions-row { gap: var(--s3); margin-top: var(--s2); }
body.refresh .pending-note { color: var(--ink-faint); font-size: var(--t-xs); }

/* ----------------------------------------------------------------------------
   Cards — consistent elevation, clearer section labels
   ---------------------------------------------------------------------------- */
body.refresh .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s6); margin-bottom: var(--s5); box-shadow: var(--e2);
}
body.refresh .card h2 {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; font-weight: 800;
    color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: var(--s3);
    margin: 0 0 var(--s5);
}
body.refresh .card-quiet { background: var(--surface-quiet); box-shadow: var(--e1); }

/* the hero "why it's strong" — the standout card */
body.refresh .card.hero {
    border: 1px solid var(--magenta-line);
    background:
        linear-gradient(180deg, #fff 0%, #fff8fc 100%);
    box-shadow: var(--e3); position: relative; overflow: hidden;
    padding-left: calc(var(--s6) + 4px);
}
body.refresh .card.hero::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gradient);
}
body.refresh .card.hero h2.hero-title {
    font-size: var(--t-lg); text-transform: none; letter-spacing: -0.01em; color: var(--ink);
    border-bottom: none; padding: 0; margin-bottom: var(--s2); font-weight: 800;
}
body.refresh .hero-lead { font-size: var(--t-md); margin: 0 0 var(--s5); color: var(--ink); line-height: 1.55; }

/* signals */
body.refresh ul.signals li.signal { padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
body.refresh ul.signals li.signal:last-child { border-bottom: none; }
body.refresh .signal-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
body.refresh .signal-meta { color: var(--ink-soft); font-size: var(--t-sm); }
body.refresh .signal-src { color: var(--magenta-ink); font-weight: 700; font-size: var(--t-sm); text-decoration: none; margin-left: auto; }
body.refresh .signal-src:hover { text-decoration: underline; }
body.refresh .signal-why { margin: var(--s3) 0 var(--s1); font-size: var(--t-base); line-height: 1.55; }
body.refresh .signal-headline { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); font-style: italic; }

/* classifier's read — a calm tinted panel inside the hero */
body.refresh .reason-box {
    margin-top: var(--s5); background: var(--magenta-tint); border: 1px solid var(--magenta-line);
    border-radius: var(--r-md); padding: var(--s4) var(--s5);
}
body.refresh .reason-label { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--magenta-ink); }
body.refresh .reason-box p { margin: var(--s2) 0 0; font-size: var(--t-base); line-height: 1.6; color: var(--ink); }

/* score breakdown — clean ledger, tabular figures */
body.refresh table.breakdown { width: 100%; border-collapse: collapse; }
body.refresh table.breakdown th {
    text-align: left; font-weight: 400; color: var(--ink-soft); font-size: var(--t-base);
    padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft);
}
body.refresh table.breakdown td.num {
    font-weight: 800; font-variant-numeric: tabular-nums; padding: 0.5rem 0;
    border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
body.refresh table.breakdown tr:last-child th, body.refresh table.breakdown tr:last-child td { border-bottom: none; }

/* contact (the action) */
body.refresh .contact { padding: var(--s2) 0 var(--s3); }
body.refresh .contact-name { font-weight: 800; font-size: var(--t-lg); }
body.refresh .contact-title { font-weight: 400; color: var(--ink-soft); }
body.refresh .contact-email { margin-top: var(--s1); }
body.refresh .email { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-sm); }
body.refresh .suggest { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); }
body.refresh .suggest h3 { font-size: var(--t-md); margin: 0 0 var(--s3); font-weight: 800; }

/* empty / pending contact state — clean, never blank */
body.refresh .contact-empty {
    background: var(--surface-quiet); border: 1px dashed var(--line); border-radius: var(--r-md);
    padding: var(--s4) var(--s5); margin: var(--s1) 0 var(--s2);
}
body.refresh .contact-empty p { margin: 0; color: var(--ink-soft); }
body.refresh .contact-empty .btn { margin-top: var(--s3); }

/* enrich result banners */
body.refresh .enrich-banner { border-radius: var(--r-sm); padding: 0.7rem 0.9rem; margin-bottom: var(--s4); font-size: var(--t-base); font-weight: 700; border: 1px solid var(--line); }
body.refresh .enrich-good { background: #eafaf0; color: #156c3c; border-color: #b6e6c8; }
body.refresh .enrich-warn { background: #fff5e9; color: #8a5200; border-color: #f3d9b0; }
body.refresh .enrich-info { background: var(--magenta-tint-2); color: var(--magenta-ink); border-color: var(--magenta-line); }

/* company kv + notes */
body.refresh dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: 0; }
body.refresh dl.kv dt { color: var(--ink-soft); font-size: var(--t-sm); }
body.refresh dl.kv dd { margin: 0; font-size: var(--t-base); font-weight: 600; }
body.refresh .notes-form { margin-top: var(--s5); }
body.refresh textarea {
    width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3);
    font: inherit; font-size: var(--t-base); background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
body.refresh textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(252,102,205,.22); }

body.refresh pre.draft {
    white-space: pre-wrap; background: var(--surface-quiet); border: 1px solid var(--line);
    border-left: 3px solid var(--magenta); border-radius: var(--r-sm); padding: var(--s4);
    font-family: var(--font, Arial); font-size: var(--t-base); line-height: 1.55;
}

/* identity / resolve picker */
body.refresh .ch-direct { margin-top: var(--s3); gap: var(--s2); }
body.refresh .ch-direct input { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: var(--t-sm); }
body.refresh .ch-direct input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(252,102,205,.22); }

/* ----------------------------------------------------------------------------
   Buttons — primary = gradient with BLACK text (locked), refined depth + states
   ---------------------------------------------------------------------------- */
body.refresh .btn {
    background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r-sm);
    padding: 0.55rem 1.05rem; font: inherit; font-weight: 700; font-size: var(--t-base);
    cursor: pointer; transition: transform .12s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
body.refresh .btn:hover { background: #f3f3f6; box-shadow: var(--e1); }
body.refresh .btn:active { transform: translateY(1px); }
body.refresh .btn-primary {
    background: var(--gradient); color: #000; border: none; box-shadow: var(--e1);
}
body.refresh .btn-primary:hover { color: #000; filter: brightness(1.05); box-shadow: var(--glow); }
body.refresh .btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
body.refresh .btn-quiet { background: #f0f0f3; color: var(--ink-soft); border-color: transparent; }
body.refresh .btn-quiet:hover { background: #e6e6ea; color: var(--ink); }
body.refresh .tag-paid {
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    background: rgba(0,0,0,.16); color: #000; border-radius: var(--r-pill); padding: 0.08rem 0.45rem; margin-left: 0.45rem;
}

/* the Run now button in the screen head (a primary CTA) */
body.refresh .screen-head .btn-primary { padding: 0.6rem 1.3rem; font-size: var(--t-md); }

/* ============================================================================
   ROLL-OUT: the remaining screens — same system, same tokens.
   ============================================================================ */

/* --- index / landing intro --------------------------------------------------- */
body.refresh .intro-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--e3); padding: var(--s10) var(--s8); margin-top: var(--s8);
    max-width: 760px; position: relative; overflow: hidden;
}
body.refresh .intro-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient); }
body.refresh .intro-card .screen-title { font-size: var(--t-2xl); margin-bottom: var(--s4); }
body.refresh .intro-lead { font-size: var(--t-md); line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--s6); max-width: 60ch; }
body.refresh .intro-actions { display: flex; gap: var(--s3); align-items: center; margin: 0 0 var(--s6); }
/* index's own gradient CTA class (defined nowhere else) — primary treatment */
body.refresh .btn-spend { background: var(--gradient); color: #000; border: none; box-shadow: var(--e1); }
body.refresh .btn-spend:hover { filter: brightness(1.05); box-shadow: var(--glow); }
body.refresh .env { font-size: var(--t-sm); }

/* --- run history table: tame the detail sub-rows + source/warning pills ------ */
body.refresh table.leads tbody tr.subrow { cursor: default; }
body.refresh table.leads tbody tr.subrow:hover { background: var(--surface-quiet); box-shadow: none; }
body.refresh .subrow td { background: var(--surface-quiet); font-size: var(--t-sm); padding-top: 0.5rem; padding-bottom: 0.6rem; }
body.refresh .run-meta { color: var(--ink-soft); font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.refresh .run-status { text-transform: capitalize; }
body.refresh table.leads td.num { font-variant-numeric: tabular-nums; }
body.refresh .srcpill {
    display: inline-block; background: #f0f0f3; color: var(--ink-soft); font-size: var(--t-2xs);
    font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--r-pill); margin: 0 0.25rem 0.2rem 0;
}
body.refresh .warnings { margin-top: var(--s2); }
body.refresh .warnpill {
    display: inline-block; background: var(--magenta-tint-2); color: var(--magenta-ink);
    border: 1px solid var(--magenta-line); font-size: var(--t-2xs); font-weight: 800;
    padding: 0.1rem 0.5rem; border-radius: var(--r-pill); margin: 0.1rem 0.2rem;
}

/* --- run now: a real card title, the spend gate, errors ---------------------- */
body.refresh .run-now-card { max-width: 680px; }
body.refresh .run-now-card p { margin-top: 0; color: var(--ink-soft); line-height: 1.6; }
body.refresh .card h2.card-title {
    font-size: var(--t-lg); text-transform: none; letter-spacing: -0.01em; color: var(--ink);
    border-bottom: none; padding: 0; margin-bottom: var(--s3); font-weight: 800;
}
body.refresh .run-now-card .pill-new { vertical-align: baseline; }
body.refresh .checkline {
    display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s4);
    font-weight: 700; font-size: var(--t-base);
}
body.refresh .checkline input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--magenta); }
body.refresh .spend-warning {
    background: var(--magenta-tint); border: 1px solid var(--magenta-line); border-left: 3px solid var(--magenta);
    border-radius: var(--r-md); padding: var(--s4) var(--s5); font-size: var(--t-sm); color: #7a1059; line-height: 1.6;
}
body.refresh .spend-warning code, body.refresh .run-now-card code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8em;
    background: rgba(0,0,0,.06); padding: 0.05rem 0.35rem; border-radius: 5px;
}
body.refresh .run-now-card form .btn-primary { margin-top: var(--s4); }
body.refresh .error-banner {
    background: var(--magenta-tint-2); border: 1px solid var(--magenta); color: #7a1059;
    padding: var(--s4) var(--s5); border-radius: var(--r-md); font-weight: 700; box-shadow: var(--e1);
    margin-bottom: var(--s5);
}

/* --- live run progress bar (gradient fill, honest stage share) --------------- */
body.refresh .run-progress-stage { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s5) 0 var(--s3); }
body.refresh .run-progress-label { font-weight: 800; font-size: var(--t-md); }
body.refresh .run-progress-step { font-size: var(--t-sm); }
body.refresh .run-progress-track {
    height: 12px; background: #ededf1; border-radius: var(--r-pill); overflow: hidden;
    border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(20,20,30,.06);
}
body.refresh .run-progress-bar { height: 100%; background: var(--gradient); border-radius: var(--r-pill); transition: width 0.4s ease; }
body.refresh #run-progress { margin-bottom: var(--s5); }

/* --- resolve picker: Companies House candidate table ------------------------- */
body.refresh .ch-candidates {
    width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--s4) 0;
    font-size: var(--t-sm); background: var(--surface-quiet); border: 1px solid var(--line);
    border-radius: var(--r-md); overflow: hidden;
}
body.refresh .ch-candidates th {
    text-align: left; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-faint); font-weight: 800; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--line);
}
body.refresh .ch-candidates td { padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
body.refresh .ch-candidates tbody tr:last-child td { border-bottom: none; }
body.refresh .ch-candidates tbody tr:hover { background: var(--magenta-tint); }
body.refresh .ch-name { font-weight: 800; color: var(--ink); }
body.refresh .ch-num { font-variant-numeric: tabular-nums; }
body.refresh .ch-status {
    display: inline-block; font-size: var(--t-2xs); font-weight: 800; padding: 0.08rem 0.45rem;
    border-radius: var(--r-pill); background: #eafaf0; color: #156c3c; border: 1px solid #b6e6c8;
}
body.refresh .ch-sic, body.refresh .ch-addr { font-size: var(--t-sm); }
body.refresh .ch-candidates .btn { margin-top: 0; padding: 0.4rem 0.7rem; font-size: var(--t-sm); white-space: nowrap; }
body.refresh .ch-hint { margin-top: var(--s3); font-size: var(--t-sm); }
body.refresh .ch-empty-actions { margin-top: var(--s3); }

/* identity-resolve card: forms read as a clear, grouped sequence */
body.refresh #resolve-identity .ch-direct { padding-top: var(--s2); }
body.refresh #resolve-identity label { font-size: var(--t-base); color: var(--ink-soft); display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* --- Favourite control (lead detail): the flag toggle -------------------------
   Magenta, not red. Off = outlined magenta "Flag for follow-up"; on = the brand
   gradient "Flagged", reinforced with "shared with the team" so the shared
   semantics (Dave flags, Louise sees it) are explicit, not implied. */
body.refresh .fav-form { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0 var(--s2); }
body.refresh .btn-fav { border: 1.5px solid var(--magenta); color: #b1148a; background: #fff; }
body.refresh .btn-fav:hover { background: var(--magenta-tint); color: #7a1059; }
body.refresh .btn-fav.is-on { background: var(--gradient); color: #000; border: none; box-shadow: 0 1px 2px #ff56cf33; }
body.refresh .btn-fav.is-on:hover { filter: brightness(1.06); background: var(--gradient); color: #000; }
body.refresh .fav-meta { font-size: var(--t-sm); color: var(--ink-soft); }

/* --- Dismiss-reason capture (lead detail): chips + free-text ------------------
   Quick-pick chips so common reasons are captured consistently; free-text for the
   unusual case. Selected chip uses the brand magenta, matching the rest of the skin. */
body.refresh .reason-form { margin-top: var(--s3); border-top: 1px solid var(--line-soft); padding-top: var(--s3); }
body.refresh .reason-prompt { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s2); }
body.refresh .reason-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
body.refresh .reason-chips .chip { position: relative; }
body.refresh .reason-chips .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
body.refresh .reason-chips .chip span {
    display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--line);
    border-radius: 999px; font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft);
    background: #fff; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
body.refresh .reason-chips .chip:hover span { border-color: var(--magenta); }
body.refresh .reason-chips .chip input:checked + span { background: var(--magenta-tint); color: #b1148a; border-color: var(--magenta); }
body.refresh .reason-text { width: 100%; max-width: 30rem; padding: 0.45rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 0.9rem; margin-bottom: var(--s2); }

/* --- Push to Pipedrive: pushed state, banners, and the push-reason modal ------
   The modal fires on a SUCCESSFUL push (?pushed=ok), capturing WHY with the same
   chip+free-text component as dismiss. Magenta/brand, never red. */
body.refresh .pushed-tag {
    display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 800;
    font-size: var(--t-sm); color: var(--good);
}
body.refresh .banner { padding: var(--s3) var(--s4); border-radius: var(--r-md); margin: var(--s3) 0; font-size: var(--t-base); font-weight: 600; }
body.refresh .banner-info { background: var(--magenta-tint); color: var(--magenta-ink); border: 1px solid var(--magenta-line); }
body.refresh .banner-warn { background: #fff5e9; color: #8a5200; border: 1px solid #f3d9b0; }

body.refresh .reason-modal {
    position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
    background: rgba(20,20,30,.45); backdrop-filter: blur(2px); padding: var(--s4);
}
body.refresh .reason-modal-card {
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e3);
    padding: var(--s6); max-width: 620px; width: 100%;
}
body.refresh .reason-modal-title { font-size: var(--t-lg); font-weight: 800; color: var(--good); margin-bottom: var(--s2); }
body.refresh .reason-form-modal .reason-text { max-width: 100%; }

/* ============================================================================
   Share-gate login (Phase 9). Scoped like the rest of the refresh layer.
   ============================================================================ */
body.refresh.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(1200px 500px at 50% -10%, var(--magenta-tint) 0%, transparent 60%),
        var(--surface-quiet);
}
body.refresh .login-wrap { width: 100%; max-width: 380px; padding: var(--s6); text-align: center; }
body.refresh .login-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--e3); padding: var(--s10) var(--s8); display: flex; flex-direction: column;
    text-align: left;
}
body.refresh .login-card .logo { height: 34px; width: auto; align-self: center; margin-bottom: var(--s5); }
body.refresh .login-title { font-size: var(--t-xl); font-weight: 800; text-align: center; margin: 0; }
body.refresh .login-sub { color: var(--ink-soft); text-align: center; margin: var(--s1) 0 var(--s6); font-size: var(--t-sm); }
body.refresh .login-label { font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); margin-bottom: var(--s1); }
body.refresh .login-input {
    width: 100%; padding: var(--s3) var(--s4); margin-bottom: var(--s4); box-sizing: border-box;
    border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--t-base); background: var(--surface);
}
body.refresh .login-input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px var(--magenta-tint-2); }
body.refresh .login-button {
    margin-top: var(--s2); padding: var(--s3) var(--s4); border: none; border-radius: var(--r-md);
    background: var(--gradient); color: #000; font-weight: 800; font-size: var(--t-base); cursor: pointer;
    box-shadow: var(--glow);
}
body.refresh .login-button:hover { filter: brightness(1.03); }
body.refresh .login-error {
    background: #fdecec; border: 1px solid #f5c2c2; color: #a11212; border-radius: var(--r-md);
    padding: var(--s2) var(--s3); font-size: var(--t-sm); margin-bottom: var(--s4);
}
body.refresh .login-foot { color: var(--ink-faint); font-size: var(--t-xs); margin-top: var(--s5); }

/* Topbar identity + logout */
body.refresh .topbar-right { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
body.refresh .who {
    font-size: var(--t-xs); color: var(--ink-soft); max-width: 200px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
body.refresh .logout-form { margin: 0; }
body.refresh .logout-button {
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
    border-radius: var(--r-pill); padding: var(--s1) var(--s3); font-size: var(--t-xs);
    font-weight: 700; cursor: pointer;
}
body.refresh .logout-button:hover { border-color: var(--magenta-line); color: var(--magenta-ink); }