/* SPARK Lead Intelligence - brand visual system.
   Locked on the Inbox first (Phase 7). Brand: Arial; black text on white for the
   data screens (readability first); magenta as a flat accent; the logo's
   magenta-to-coral gradient reserved for PRIMARY action buttons only.

   Colour tokens come straight from the brand:
     --magenta      #FC66CD  flat accent (links, active states, tints)
     --grad-magenta #FF56CF  gradient start (sampled from spark-logo.png)
     --grad-coral   #FF6E52  gradient end   (sampled from spark-logo.png)
   Accessibility: black text on the gradient scores 7.5:1 (WCAG AA pass); white
   text scores 2.8:1 (fail) - so action buttons use BLACK text, never white. */

:root {
    --ink: #000000;
    --ink-soft: #5a5a5f;
    --line: #e6e6ea;
    --bg: #ffffff;
    --panel: #ffffff;
    --panel-alt: #fafafb;
    --magenta: #FC66CD;
    --magenta-tint: #ffe9f8;
    --grad-magenta: #FF56CF;
    --grad-coral: #FF6E52;
    --gradient: linear-gradient(100deg, #FF56CF 0%, #FF6E52 100%);
    --good: #1f9d57;
    --radius: 10px;
    --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font);
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    font-weight: 400;
}

/* --- header / nav --- */
.topbar {
    display: flex; align-items: center; gap: 1.5rem;
    background: #fff; color: var(--ink);
    padding: 0.6rem 1.5rem;
    border-bottom: 2px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand img.logo { height: 34px; width: auto; display: block; }
.brand-sub { color: var(--ink-soft); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; }
.mainnav { display: flex; gap: 1.4rem; margin-left: 1rem; }
.mainnav a {
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.92rem;
    padding: 0.35rem 0.1rem; border-bottom: 3px solid transparent;
}
.mainnav a:hover { border-bottom-color: var(--magenta); }
.mainnav a.active { border-bottom-color: var(--magenta); }
.env-badge {
    margin-left: auto; font-size: 0.7rem; text-transform: uppercase; font-weight: 700;
    letter-spacing: 0.06em; color: var(--ink-soft);
    border: 1px solid var(--line); padding: 0.2rem 0.6rem; border-radius: 999px;
}

.content { max-width: 1140px; margin: 1.6rem auto; padding: 0 1.5rem; }
.footer { max-width: 1140px; margin: 2rem auto; padding: 1rem 1.5rem; color: var(--ink-soft); font-size: 0.85rem; border-top: 1px solid var(--line); }

.screen-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.screen-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.screen-head .spacer { margin-left: auto; }
.back a { color: var(--magenta); text-decoration: none; font-size: 0.9rem; font-weight: 700; }

/* --- tabs --- */
.tabs { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; }
.tab {
    text-decoration: none; color: var(--ink-soft); padding: 0.55rem 1rem; font-weight: 700; font-size: 0.9rem;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--magenta); }
.tab .count {
    display: inline-block; min-width: 1.5em; text-align: center; background: #f0f0f2; color: var(--ink-soft);
    border-radius: 999px; font-size: 0.72rem; padding: 0.05em 0.45em; margin-left: 0.35em; font-weight: 700;
}
.tab.active .count { background: var(--magenta); color: #000; }

/* --- filters --- */
.filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filters input, .filters select, .filters button { padding: 0.45rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 0.9rem; }
.filters input:focus, .filters select:focus { outline: 2px solid var(--magenta); border-color: var(--magenta); }
.filters button { background: var(--ink); color: #fff; cursor: pointer; border-color: var(--ink); font-weight: 700; }
.filters button:hover { background: #2b2b2b; border-color: #2b2b2b; }  /* lighter shade of black */

/* --- tables --- */
table.leads { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.leads th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding: 0.6rem 0.85rem; background: var(--panel-alt); border-bottom: 2px solid var(--ink); font-weight: 700; }
table.leads td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; }
table.leads tbody tr { cursor: pointer; }
table.leads tbody tr:hover { background: var(--magenta-tint); }
.company { font-weight: 700; }
.subrow td { background: var(--panel-alt); cursor: default; font-size: 0.82rem; }
.subrow:hover { background: var(--panel-alt); }

/* --- pills / badges --- */
.pill, .cls, .fit, .state, .srcpill, .warnpill { display: inline-block; font-size: 0.68rem; padding: 0.12rem 0.5rem; border-radius: 999px; font-weight: 700; }
.pill-new { background: var(--magenta); color: #000; }
.pill-updated { background: var(--magenta-tint); color: #b1148a; }
.cls-trigger { background: var(--magenta-tint); color: #b1148a; border: 1px solid #f7c8e9; }
.cls-qualifying { background: #f0f0f2; color: var(--ink); border: 1px solid var(--line); }
.cls-context { background: #f0f0f2; color: var(--ink-soft); }
.fit { border: 1px solid var(--line); }
.fit-high { background: #fff; color: #000; border-color: var(--magenta); }
.fit-good { background: #fff; color: #000; border-color: #f7c8e9; }
.fit-moderate, .fit-weak, .fit-not_applicable { background: #f0f0f2; color: var(--ink-soft); }
.state { text-transform: capitalize; border: 1px solid var(--line); }
.state-main { background: #000; color: #fff; border-color: #000; }
.state-degraded { background: #fff; color: #000; }
.state-nurture { background: var(--magenta-tint); color: #b1148a; }
.state-rejected { background: #f0f0f2; color: var(--ink-soft); }
.state-pushed { background: var(--magenta); color: #000; }
.tick { color: var(--good); font-weight: 700; }
.verified-tag { color: var(--good); font-weight: 700; }
.muted { color: var(--ink-soft); }
.score { font-variant-numeric: tabular-nums; font-weight: 700; }
.empty { color: var(--ink-soft); padding: 2rem 0; }

/* --- lead detail --- */
.lead-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.score-badge { background: #000; color: #fff; border-radius: 999px; font-size: 0.75rem; padding: 0.15rem 0.65rem; font-weight: 700; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.card h2 { font-size: 1rem; font-weight: 700; margin: 0 0 0.7rem; }
/* Enrich-click result banner: every paid click leaves a visible outcome. */
.enrich-banner { border-radius: 8px; padding: 0.6rem 0.85rem; margin-bottom: 0.85rem; font-size: 0.88rem; font-weight: 700; border: 1px solid var(--line); }
.enrich-good { background: #eafaf0; color: #156c3c; border-color: #b6e6c8; }
.enrich-warn { background: #fff5e9; color: #8a5200; border-color: #f3d9b0; }
.enrich-info { background: var(--magenta-tint); color: #b1148a; border-color: #f7c8e9; }
/* Resolve picker: Companies House candidate table + direct-number entry. */
.ch-candidates { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.85rem; }
.ch-candidates th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding: 0.4rem 0.5rem; border-bottom: 1.5px solid var(--ink); }
.ch-candidates td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ch-candidates tbody tr:hover { background: var(--magenta-tint); }
.ch-name { font-weight: 700; }
.ch-num { font-variant-numeric: tabular-nums; }
.ch-status { font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; background: #eafaf0; color: #156c3c; }
.ch-sic, .ch-addr { font-size: 0.8rem; }
.ch-hint { margin-top: 0.4rem; font-size: 0.82rem; }
.ch-direct { margin-top: 0.6rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ch-direct input { padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 0.85rem; }
.htmx-indicator { opacity: 0; margin-left: 0.6rem; font-size: 0.82rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
dl.kv dt { color: var(--ink-soft); font-size: 0.85rem; }
dl.kv dd { margin: 0; font-size: 0.9rem; }
.reason { margin-top: 0.7rem; font-style: italic; color: var(--ink-soft); }
ul.signals { list-style: none; padding: 0; margin: 0; }
ul.signals li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
ul.signals a { color: var(--magenta); font-size: 0.85rem; margin-left: 0.4rem; font-weight: 700; }
.contact { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.email { font-family: ui-monospace, monospace; font-size: 0.85rem; }
.src { font-size: 0.75rem; margin-top: 0.2rem; }
pre.draft { white-space: pre-wrap; background: var(--panel-alt); border: 1px solid var(--line); border-left: 3px solid var(--magenta); border-radius: 8px; padding: 0.9rem; font-family: var(--font); font-size: 0.9rem; }
textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem; font: inherit; }
textarea:focus { outline: 2px solid var(--magenta); border-color: var(--magenta); }

/* --- buttons ---
   Primary action = the logo gradient with BLACK text (AA 7.5:1). Secondary =
   solid black. Quiet = bordered. White-on-gradient is intentionally never used. */
.btn { background: #fff; color: #000; border: 1.5px solid #000; border-radius: 8px; padding: 0.5rem 0.95rem; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; margin-top: 0.5rem; }
/* Hover = a LIGHTER shade of each button's resting colour, never an invert to
   black. The old .btn:hover filled black, which also hit .btn-primary (it carries
   .btn) and, with .btn-primary's black text, rendered black-on-black (invisible). */
.btn:hover { background: #ededf0; color: #000; }
.btn-primary {
    background: var(--gradient); color: #000; border: none;
    box-shadow: 0 1px 2px #0000001a;
}
.btn-primary:hover { background: var(--gradient); color: #000; filter: brightness(1.08); box-shadow: 0 2px 8px #ff56cf55; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; }
.tag-paid { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: #00000022; color: #000; border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.45rem; }
.pending-note { color: var(--ink-soft); font-size: 0.78rem; margin: 0.3rem 0 0; }
.actions-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.3rem; }
.btn-quiet { background: #f0f0f2; color: var(--ink-soft); border-color: transparent; }
.btn-quiet:hover { background: #e2e2e6; color: #000; }
.inline { display: inline; }
.dismiss { margin-left: 0.5rem; }
.checkline { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; font-weight: 700; }
.spend-warning { background: var(--magenta-tint); border: 1px solid #f7c8e9; border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.85rem; color: #7a1059; }
.error-banner { background: var(--magenta-tint); border: 1px solid var(--magenta); color: #7a1059; padding: 0.7rem 0.9rem; border-radius: 8px; font-weight: 700; }
.srcpill { background: #f0f0f2; color: var(--ink-soft); margin: 0 0.2rem; }
.warnings { margin-top: 0.3rem; }
.warnpill { background: var(--magenta-tint); color: #b1148a; margin: 0.1rem 0.2rem; }

/* ============================================================================
   PKB-polish redesign (Phase 7b): density, alignment, hierarchy.
   Same light SPARK canvas + magenta/gradient accents; matches PKB's discipline,
   not its colours. Overrides the thinner defaults above.
   ============================================================================ */

.nounderline { text-decoration: none; }
.num { text-align: right; }

/* --- screen head --- */
.screen-head { align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.screen-sub { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }

/* --- filters: real and aligned --- */
.filters { gap: 0.45rem; align-items: center; padding: 0.7rem; background: var(--panel-alt); border: 1px solid var(--line); border-radius: var(--radius); }
.filters .f-search { flex: 1 1 240px; min-width: 180px; }
.filters select, .filters input { font-size: 0.86rem; }
.filters .clear { color: var(--ink-soft); font-weight: 700; font-size: 0.85rem; text-decoration: none; padding: 0 0.35rem; }
.filters .clear:hover { color: var(--magenta); }

/* --- the lead table: dense, aligned, scannable --- */
table.leads { font-size: 0.875rem; box-shadow: 0 1px 2px #0000000a; }
table.leads th { padding: 0.5rem 0.8rem; font-size: 0.66rem; }
table.leads td { padding: 0.55rem 0.8rem; vertical-align: middle; border-bottom: 1px solid var(--line); }
table.leads tbody tr:last-child td { border-bottom: none; }
table.leads th.num, table.leads td.num { text-align: right; }

.c-co { width: 32%; }
.co-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; display: flex; align-items: center; gap: 0.45rem; }
.co-sub { color: var(--ink-soft); font-size: 0.77rem; line-height: 1.25; margin-top: 0.12rem; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ind { color: var(--ink-soft); white-space: nowrap; }
.activity { font-weight: 700; font-size: 0.84rem; line-height: 1.3; }
.activity.is-trigger { color: #b1148a; }
.c-date { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.con-name { font-weight: 600; }
.c-score { white-space: nowrap; }
.score-num { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.score-den { color: var(--ink-soft); font-size: 0.72rem; }
.pill-new, .pill-updated { text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.03em; }

.empty-card { border: 1px dashed var(--line); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; background: var(--panel-alt); }
.empty-card .empty { padding: 0 0 1rem; }

/* --- lead detail: head with big score --- */
.lead-head { align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.lead-head-main .screen-title { line-height: 1.15; }
.lead-tags { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.45rem; font-size: 0.85rem; }
.lead-head-score { text-align: right; line-height: 1; white-space: nowrap; }
.score-num-lg { font-weight: 800; font-size: 2.3rem; font-variant-numeric: tabular-nums; }
.score-den-lg { color: var(--ink-soft); font-size: 0.95rem; }

/* --- cards --- */
.card { padding: 1.1rem 1.3rem; box-shadow: 0 1px 2px #0000000a; }
.card h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; margin: 0 0 0.85rem; }
.card-quiet { background: var(--panel-alt); }

/* --- the hero: why it's strong --- */
.card.hero { border: 1px solid #f3cbe8; border-left: 4px solid transparent; border-image: var(--gradient) 1; background: linear-gradient(180deg, #ffffff 0%, #fff8fc 100%); }
.card.hero h2.hero-title { font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--ink); border-bottom: none; padding: 0; margin-bottom: 0.3rem; }
.hero-lead { font-size: 1rem; margin: 0 0 0.9rem; color: var(--ink); }

/* --- signals --- */
ul.signals { list-style: none; padding: 0; margin: 0; }
ul.signals li.signal { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
ul.signals li.signal:last-child { border-bottom: none; }
.signal-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.signal-meta { color: var(--ink-soft); font-size: 0.8rem; }
.signal-src { color: var(--magenta); font-weight: 700; font-size: 0.8rem; text-decoration: none; margin-left: auto; }
.signal-src:hover { text-decoration: underline; }
.signal-why { margin: 0.45rem 0 0.25rem; font-size: 0.95rem; line-height: 1.45; }
.signal-headline { margin: 0; color: var(--ink-soft); font-size: 0.85rem; font-style: italic; }

.reason-box { margin-top: 1rem; background: var(--magenta-tint); border-radius: 8px; padding: 0.75rem 0.95rem; }
.reason-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: #b1148a; }
.reason-box p { margin: 0.35rem 0 0; font-size: 0.88rem; line-height: 1.5; }

/* --- score breakdown table --- */
table.breakdown { width: 100%; border-collapse: collapse; }
table.breakdown th { text-align: left; font-weight: 400; color: var(--ink-soft); font-size: 0.86rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
table.breakdown td.num { font-weight: 700; font-variant-numeric: tabular-nums; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
table.breakdown tr:last-child th, table.breakdown tr:last-child td { border-bottom: none; }

/* --- contact (the action) --- */
.contact { padding: 0.2rem 0 0.5rem; }
.contact-name { font-weight: 700; font-size: 1.1rem; }
.contact-title { font-weight: 400; color: var(--ink-soft); }
.contact-email { margin-top: 0.25rem; }
.suggest { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.suggest h3 { font-size: 0.95rem; margin: 0 0 0.55rem; }
.notes-form { margin-top: 0.6rem; }

/* --- empty / pending contact state (clean, never blank) --- */
.contact-empty { background: var(--panel-alt); border: 1px dashed var(--line); border-radius: 8px; padding: 0.85rem 1rem; margin: 0.2rem 0 0.3rem; }
.contact-empty p { margin: 0; color: var(--ink-soft); }
.contact-empty .btn { margin-top: 0.6rem; }

/* --- run history + run now: same cards/pills as the rest of the system --- */
.run-status { text-transform: capitalize; }
.run-meta { color: var(--ink-soft); font-size: 0.82rem; }
.run-now-card { max-width: 640px; }
.run-now-card p { margin-top: 0; }
.card h2.card-title { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); border-bottom: none; padding-bottom: 0; margin-bottom: 0.6rem; }

/* --- run progress (the live, stage-based bar on Run now) --- */
.run-progress-stage { display: flex; justify-content: space-between; align-items: baseline; margin: 0.6rem 0 0.4rem; }
.run-progress-label { font-weight: 700; }
.run-progress-step { font-size: 0.82rem; }
.run-progress-track { height: 10px; background: #f0f0f2; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.run-progress-bar { height: 100%; background: var(--gradient); border-radius: 999px; transition: width 0.4s ease; }