/* Lead Staging app layer, Option A (Dynamics / Fluent look). Colors, spacing and radius come from _ds/fluent/styles.css. */

body { font-variant-numeric: tabular-nums; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-2); background: var(--color-surface); padding: var(--space-2); z-index: 30; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-neutral-700); }
.small { font-size: 13px; }
.text-danger { color: var(--color-danger); }
h1 { font-size: 20px; line-height: 28px; margin: 0; }
h2 { font-size: 16px; line-height: 22px; margin: var(--space-6) 0 var(--space-2); }
h3 { font-size: 14px; line-height: 20px; margin: var(--space-4) 0 var(--space-1); }
p { margin: 0 0 var(--space-3); max-width: 72ch; }

/* ---- top bar */
/* top bar and alert stay put while the page scrolls; app.js keeps --shell-top-h in step with their height */
.shell-top { position: sticky; top: 0; z-index: 20; }
html { scroll-padding-top: var(--shell-top-h, 0px); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-2) 20px; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); font-size: 16px; font-weight: 600; text-decoration: none; }
.brand:hover { color: var(--color-text); }
.brand-logo { display: block; height: 40px; width: auto; }
.global-search { flex: 0 1 440px; min-width: 200px; }
.global-search .input { height: 34px; padding-left: 34px; background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5c5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center; }
.env { font-size: 12px; line-height: 18px; padding: 0 8px; border: 1px solid var(--color-neutral-400); color: var(--color-neutral-800); border-radius: 9px; }
.who { margin-left: auto; display: flex; gap: var(--space-3); align-items: center; font-size: 13px; }
.who-name strong { font-weight: 600; }
.who-sep { color: var(--color-neutral-500); }
.link-button { padding: 0; border: 0; background: none; color: var(--color-accent-700); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-button:hover { color: var(--color-accent-800); }
.link-button:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; border-radius: 2px; }
.who select { font-size: 13px; height: 30px; border: 1px solid var(--color-neutral-400); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); padding: 0 6px; }

.banner { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 20px; background: var(--color-accent-2-100); color: var(--color-accent-2-800); border-bottom: 1px solid var(--color-accent-2-300); font-size: 14px; }
.banner[hidden] { display: none; }

/* ---- side navigation: four sections, the active one lists its pages */
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 51px); }
.side { padding: var(--space-3) var(--space-2); background: var(--color-surface); border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 2px; }
.nav-top { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--color-neutral-800); text-decoration: none; }
.nav-top:hover { background: var(--color-neutral-200); color: var(--color-text); }
.nav-sec.active .nav-top { background: var(--color-accent-100); color: var(--color-accent-700); font-weight: 600; }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; }
.nav-sub[hidden] { display: none; }
.nav-sub a { display: flex; justify-content: space-between; align-items: center; min-height: 30px; padding: 0 12px 0 40px; border-radius: var(--radius-sm); color: var(--color-neutral-800); text-decoration: none; font-size: 13px; }
.nav-sub a:hover { background: var(--color-neutral-200); color: var(--color-text); }
.nav-sub a[aria-current="page"] { color: var(--color-accent-700); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent); }
.side .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--color-accent-2-100); color: var(--color-accent-2-700); font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; }
.side .count:empty { display: none; }

/* Page width: fluid, the full window beside the side menu. --content-max caps it (for example 1600px or 90%) and
   centers the page in the space; "none" uses the whole width. Side gutters grow with the window. */
:root { --content-max: none; }
main { box-sizing: border-box; width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding: 20px clamp(16px, 2vw, 40px) var(--space-8); min-width: 0; }
main:focus { outline: none; }

/* ---- page head */
.page-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.page-head > div:first-child { flex: 1; min-width: 260px; }
.lede { color: var(--color-neutral-800); margin: var(--space-1) 0 0; }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- the dashboard figures: the one bold element */
.funnel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin: var(--space-1) 0 var(--space-4); }
.figure { display: flex; flex-direction: column; text-decoration: none; color: var(--color-text); }
.figure b { font-family: var(--font-heading); font-weight: 600; font-size: 38px; line-height: 1; letter-spacing: -0.02em; }
.figure span { font-size: 14px; color: var(--color-neutral-700); }
.figure:hover b { color: var(--color-accent-700); }
.figure.side-fig b { font-size: 26px; color: var(--color-neutral-800); }
.funnel .gt { font-size: 28px; color: var(--color-neutral-500); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--space-3) var(--space-4); }
.tile { font-size: 14px; }
.tile .val { font-size: 20px; font-family: var(--font-heading); line-height: 1.2; }
.tile .rule { font-size: 13px; color: var(--color-neutral-700); }
.tile.off .val { color: var(--color-accent-2-700); }

/* ---- chips (small labels) and status pills; text always carries the meaning */
.chip { display: inline-flex; align-items: center; font-size: 12px; line-height: 18px; padding: 0 8px; border-radius: 9px; white-space: nowrap; border: 1px solid transparent; font-weight: 600; }
.chip-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.chip-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.chip-solid { background: var(--color-accent); color: #fff; }
.chip-solid-dark { background: var(--color-accent-800); color: #fff; }
.chip-dark { background: var(--color-neutral-800); color: #fff; }
.chip-warn { background: var(--color-accent-2-100); color: var(--color-accent-2-700); border-color: var(--color-accent-2-300); }
.chip-warn-outline { border-color: var(--color-accent-2-300); color: var(--color-accent-2-700); }
.chip-outline { border-color: var(--color-neutral-400); color: var(--color-neutral-800); }
.chip-accent-outline { border-color: var(--color-accent-300); color: var(--color-accent-700); }
.chip-dashed { border: 1px dashed var(--color-neutral-500); color: var(--color-neutral-700); font-weight: 400; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--color-neutral-400); background: var(--color-surface); color: var(--color-neutral-800); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-ok { border-color: var(--color-ok-300); background: var(--color-ok-100); color: var(--color-ok-700); }
.pill-warn { border-color: var(--color-accent-2-300); background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.pill-muted { background: var(--color-bg); color: var(--color-neutral-800); }
.pill-info { border-color: var(--color-accent-300); background: var(--color-accent-100); color: var(--color-accent-700); }
.pill-dark { border-color: var(--color-neutral-800); background: var(--color-neutral-800); color: #fff; }

/* ---- tables */
.table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 6px; }
.table-wrap .table tbody tr:last-child td { border-bottom: 0; }
.table td, .table th { vertical-align: top; }
.table .num { text-align: right; }
.table tr.clickable { cursor: pointer; }
.table tbody tr.selected { background: var(--color-accent-100); }
.table .empty { padding: var(--space-6) var(--space-3); color: var(--color-neutral-700); }
.col-check { width: 44px; }
.col-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); vertical-align: middle; }
/* column header menu: sort and filter one column */
.th-menu { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; }
.th-menu:hover { background: var(--color-neutral-200); color: var(--color-text); }
.th-menu:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.th-menu.active { color: var(--color-accent-700); }
.th-menu svg { flex: none; }
.col-menu { position: absolute; z-index: 35; width: 304px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 14px; }
.col-menu hr { border: 0; border-top: 1px solid var(--color-divider); margin: 6px 0; }
.col-menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer; }
.col-menu-item:hover { background: var(--color-neutral-200); }
.col-menu-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.col-menu-label { display: flex; align-items: center; gap: 6px; padding: 4px 10px 6px; font-size: 12px; font-weight: 600; color: var(--color-neutral-800); }
.col-menu .input[type=search] { width: 100%; height: 32px; margin-bottom: 4px; }
.col-menu-values { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--color-divider); padding-top: 2px; }
.col-menu-value { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.col-menu-value:hover { background: var(--color-neutral-200); }
.col-menu-value[hidden] { display: none; }
.col-menu-value input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); flex: none; }
.col-menu-value span:first-of-type { flex: 1; line-height: 18px; overflow-wrap: anywhere; }
.col-menu-all { font-weight: 600; }
.col-menu-values.col-pick { max-height: none; } /* every column visible at once */
.col-menu-hint { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--color-neutral-700); }
.col-menu-value:has(.col-menu-hint) { align-items: flex-start; }
.col-menu-value:has(.col-menu-hint) input { margin-top: 1px; }
.col-menu-actions { display: flex; gap: var(--space-2); padding: 8px 4px 2px; border-top: 1px solid var(--color-divider); margin-top: 4px; }
.table-note { margin: 6px 2px 0; font-size: 13px; color: var(--color-neutral-800); }
.btn-link { all: unset; color: var(--color-accent); text-decoration: underline; cursor: pointer; }
.btn-link:focus-visible { outline: 2px solid var(--color-accent); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 13px; background: var(--color-accent-100); border: 1px solid var(--color-accent-300); color: var(--color-accent-700); font-size: 13px; }
.filter-chip button { all: unset; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; }
.filter-chip button:hover { background: var(--color-accent-300); }
.filter-chip button:focus-visible { outline: 2px solid var(--color-accent); }
.pager { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; margin-top: var(--space-3); }
.pager .muted { margin-right: auto; }
.per-page { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-neutral-800); }
.per-page .input { width: auto; min-width: 72px; }

/* ---- filters and bulk bar */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: end; margin-bottom: var(--space-2); }
.filters .field { margin: 0; }
.filters .input { min-width: 0; }
.filters .search { width: 200px; }
.filters .field > label { font-size: 12px; color: var(--color-neutral-700); }
.filters .input, .filters .btn { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.views { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.views button { all: unset; cursor: pointer; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 14px; }
.views button:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.views button[aria-pressed="true"] { background: var(--color-accent-100); color: var(--color-accent-800); }
.views button:focus-visible { outline: 2px solid var(--color-accent); }
.bulk { position: sticky; top: var(--shell-top-h, 0px); z-index: 2; display: flex; gap: var(--space-2); align-items: center; padding: 6px 8px 6px 14px; background: var(--color-accent-100); border: 1px solid var(--color-accent-300); border-radius: var(--radius-sm); margin-bottom: var(--space-3); flex-wrap: wrap; }
.bulk strong { margin-right: var(--space-2); }
.push-right { margin-left: auto; }
.bulk[hidden] { display: none; }

/* ---- detail layout */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--space-6); }
/* lead page: each group in its own bordered card */
.lead-cards { gap: var(--space-4); margin: var(--space-4) 0; align-items: start; }
.lead-cards > section { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 14px 18px 16px; min-width: 0; }
.lead-cards > section > h3:first-child { margin: 0 0 var(--space-2); }
.tip { position: relative; display: inline-block; text-decoration: underline dotted var(--color-neutral-500); text-underline-offset: 3px; cursor: help; border-radius: 2px; }
.tip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tip-bubble { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: 280px; padding: 8px 10px; border-radius: 6px; background: var(--color-neutral-900); color: #fff; font-size: 12.5px; line-height: 1.45; font-weight: 400; text-align: left; white-space: normal; box-shadow: var(--shadow-md); display: none; pointer-events: none; }
.tip:hover .tip-bubble, .tip:focus .tip-bubble { display: block; } /* display, not visibility: a hidden bubble must not widen the page on phones */
.tip .chip { text-decoration: none; }
.page-list { margin-top: 2px; font-size: 13px; }
.attribution { font-size: 12px; }
/* enrich preview: rule, batch and estimated cost */
.criteria { margin: 4px 0 var(--space-3); padding-left: 20px; font-size: 14px; }
.est-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--space-2) 0; }
.est-table th, .est-table td { padding: 5px 0; border-bottom: 1px solid var(--color-divider); text-align: left; font-weight: 400; }
.est-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.est-table .est-total th, .est-table .est-total td { font-weight: 600; border-bottom: 0; }
.page-list summary { cursor: pointer; color: var(--color-accent); }
.page-list ul { margin: 4px 0 0; padding-left: 18px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-4); margin: 0; font-size: 14px; }
.kv dt { color: var(--color-neutral-700); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv-inline { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); margin: var(--space-1) 0; font-size: 14px; }
.kv-inline dt { color: var(--color-neutral-700); }
.kv-inline dt::after { content: ":"; }
.kv-inline dd { margin: 0 0 0 -12px; }
.checks { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.checks li { display: grid; grid-template-columns: 70px 1fr; gap: var(--space-2); padding: 3px 0; }
.mark-pass { color: var(--color-accent-800); }
.mark-fail { color: var(--color-accent-2-700); font-weight: 600; }
.mark-unknown { color: var(--color-neutral-700); }
.mark-info { color: var(--color-accent-700); }
.timeline { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.timeline li { padding: 4px 0; }
.timeline time { color: var(--color-neutral-700); font-size: 13px; margin-right: var(--space-2); }
.callout { padding: var(--space-3) var(--space-4); background: var(--color-accent-2-100); color: var(--color-accent-2-800); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.note { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: 14px; }

/* ---- review split view */
.split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.queue { max-height: calc(100vh - 220px); overflow: auto; }
.queue button { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: pointer; padding: var(--space-2); border-radius: var(--radius-sm); }
.queue button:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.queue button[aria-current="true"] { background: var(--color-accent-100); }
.queue button:focus-visible { outline: 2px solid var(--color-accent); }
.queue .why { display: block; font-size: 13px; color: var(--color-accent-2-700); }
.keys { font-size: 13px; color: var(--color-neutral-700); }
kbd { font-family: inherit; font-size: 12px; border: 1px solid var(--color-divider); border-bottom-width: 2px; padding: 0 4px; border-radius: var(--radius-sm); }

/* ---- run card */
.run-card { padding: var(--space-2) 0; font-size: 14px; }
.run-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.job { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 6px; padding: var(--space-3); min-width: 0; }
.job-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.job h3 { margin: 0; }
.job > p { margin: var(--space-1) 0 0; }

/* ---- forms */
.form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; margin-bottom: var(--space-3); }
.form-row .field { margin: 0; }
.form-error { color: var(--color-accent-2-700); min-height: 1em; margin: 0; font-size: 14px; }
textarea.input { resize: vertical; font: inherit; }
.dialog { width: min(520px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: var(--space-3); }
.dialog .field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.dialog .input { width: 100%; box-sizing: border-box; }
.steps { padding-left: 1.2em; }
.steps > li { margin-bottom: var(--space-6); }
.steps > li::marker { font-family: var(--font-heading); font-weight: 600; }

/* ---- toasts */
.toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); z-index: 50; max-width: 420px; }
.toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); background: var(--color-text); color: #fff; font-size: 14px; }
.toast-error { background: var(--color-accent-2-800); }
.toast-warn { background: var(--color-accent-2-700); }

@media (max-width: 1100px) { .jobs { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; padding: var(--space-2); border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .nav-sec { display: contents; }
  .nav-top { height: 32px; padding: 0 8px; gap: 6px; }
  .nav-sub { order: 2; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; margin: 4px 0 0; }
  .nav-sub a { padding: 0 10px; }
  .topbar { padding: var(--space-2) var(--space-4); gap: var(--space-2) var(--space-3); }
  .global-search { order: 3; flex-basis: 100%; }
  main { padding: var(--space-4); }
  .split { grid-template-columns: 1fr; }
  .figure b { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- compact data layer: tables, counts, contact cells */
.table { font-size: 14px; }
.table th { padding: 8px 12px; white-space: nowrap; }
.table td { padding: 8px 12px; line-height: 20px; }
.table td.nowrap, .nowrap { white-space: nowrap; }
.cell-main { font-weight: 600; text-decoration: none; color: var(--color-text); }
a.cell-main:hover { color: var(--color-accent-700); text-decoration: underline; }
.col-business { min-width: 210px; max-width: 320px; }
.cell-sub { display: block; font-size: 12.5px; color: var(--color-neutral-700); font-weight: 400; }
.clip { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.none { color: var(--color-neutral-500); }
.counts { display: grid; grid-template-columns: 1fr auto; gap: 1px var(--space-3); margin: var(--space-1) 0; font-size: 13.5px; }
.counts dt { color: var(--color-neutral-700); min-width: 0; }
.counts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.alerts { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2px var(--space-4); }
.alerts li { padding: 3px 0 3px 14px; position: relative; }
.alerts li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-2-600); }
.sec-head { display: flex; align-items: baseline; gap: var(--space-3); }
.sec-head h2 { margin-bottom: var(--space-1); }

/* ---- lead list (Option A): tabs, inline filters, two-line cells */
.tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-3); }
.tabs a { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--color-neutral-700); text-decoration: none; }
.tabs a:hover { color: var(--color-text); border-bottom-color: var(--color-neutral-400); }
.tabs a[aria-current="page"] { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-accent); }
.tab-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--color-neutral-200); color: var(--color-neutral-700); font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; }
.tabs a[aria-current="page"] .tab-count { background: var(--color-neutral-300); color: var(--color-text); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.flt { display: inline-flex; align-items: center; gap: 6px; color: var(--color-neutral-700); font-size: 13px; }
.flt .input { width: auto; min-height: 30px; height: 30px; padding: 0 6px; font-size: 13px; }
.count-line { margin-left: auto; color: var(--color-neutral-700); font-size: 13px; }
.hint { color: var(--color-neutral-800); font-size: 13px; margin: calc(-1 * var(--space-1)) 0 var(--space-3); }
.cell-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub.warn { color: var(--color-accent-2-700); }
/* Column widths live on the column definitions in leads.js; the minimum width is the sum of the columns shown. */
.leads-table { table-layout: fixed; }
.view-pick select { min-width: 220px; font-weight: 600; }
.leads-table th, .leads-table td { padding-left: 8px; padding-right: 8px; }
.leads-table td { overflow: hidden; }
.leads-table .cell-main { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads-table .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads-table .clip { max-width: 100%; }
/* On narrow screens the table scrolls sideways inside its box; the checkbox and Company columns stay pinned. */
.leads-table .col-check, .leads-table .c-company { position: sticky; z-index: 1; background: var(--color-surface); }
.leads-table .col-check { left: 0; }
.leads-table .c-company { left: 44px; box-shadow: inset -1px 0 0 var(--color-divider); }
.leads-table:not(:has(.col-check)) .c-company { left: 0; } /* Viewer: no checkbox column */
.leads-table th.col-check, .leads-table th.c-company { z-index: 2; background: var(--color-neutral-100); }
.leads-table tbody tr:hover > .col-check, .leads-table tbody tr:hover > .c-company { background: var(--color-bg); }
.leads-table tbody tr.selected > .col-check, .leads-table tbody tr.selected > .c-company { background: var(--color-accent-100); }
/* An empty tab shows only its message: no header row, no forced table width. */
.leads-table:has(td.empty) { min-width: 0; }

/* ---- integrations: cards grouped by what they do */
.title-icon { display: inline-flex; align-items: center; gap: 10px; }
.title-icon svg, .int-title svg { color: var(--color-accent); flex: none; }
.int-section { margin-top: var(--space-6); }
.int-title { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; margin: 0; }
.int-section > .lede { margin: 4px 0 var(--space-3); }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: var(--space-4); }
.int-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 12px; }
.int-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.int-card h3 { margin: 0; font-size: 16px; line-height: 24px; }
.int-card h3 a { color: var(--color-text); text-decoration: none; }
.int-card h3 a:hover { color: var(--color-accent-700); text-decoration: underline; }
.int-desc { margin: 0; color: var(--color-neutral-800); line-height: 1.5; }
.int-meta { margin: 0; font-size: 13px; color: var(--color-neutral-700); }
.int-meta span { font-weight: 600; }
.int-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px; }
.int-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.int-search { width: 280px; max-width: 100%; height: 32px; }
.int-type { display: block; font-size: 12px; color: var(--color-neutral-700); margin-bottom: 2px; }
.int-table { min-width: 860px; }
.int-table td { vertical-align: middle; }
.int-row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; white-space: nowrap; }
.int-steps { margin-top: 4px; padding: 14px 16px; background: var(--color-accent-100); border: 1px solid var(--color-accent-300); border-radius: 10px; }
.int-steps h4 { margin: 0 0 6px; font-size: 14px; }
.int-steps ol { margin: 0; padding-left: 20px; color: var(--color-neutral-800); font-size: 14px; line-height: 1.5; }
.int-steps li + li { margin-top: 4px; }
.badge { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--color-neutral-200); color: var(--color-neutral-800); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.badge-ok { background: var(--color-ok-100); color: var(--color-ok-700); }
.badge-warn { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.leads-table:has(td.empty) thead { display: none; }

/* ---- lifecycle matrix */
/* ---- lifecycle matrix: six-step overview, numbered sections, reference tables */
.mx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.mx-step-card { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; padding: 12px; text-align: left; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 6px; cursor: pointer; }
.mx-step-card:hover { border-color: var(--color-accent-400); background: var(--color-accent-100); }
.mx-step-card:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
.mx-step-top { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mx-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-600); color: #fff; font-size: 12px; font-weight: 700; }
.mx-what { font-size: 13px; line-height: 1.4; color: var(--color-neutral-800); }
.mx-result { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 2px; }
.mx-sets { font-size: 12px; font-weight: 600; color: var(--color-accent-700); }
.mx-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--color-neutral-800); }
.mx-section { margin-top: 48px; scroll-margin-top: 120px; }
.mx-section > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-2); font-size: 18px; line-height: 24px; }
.mx-section > h2:focus { outline: none; }
.mx-section > h2:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 4px; }
.mx-lead { max-width: 75ch; margin: 0 0 var(--space-3); line-height: 1.5; }
.mx-state { max-width: 100ch; margin: var(--space-3) 0; font-size: 13px; line-height: 1.6; color: var(--color-neutral-800); }
.mx-state > .chip { margin-right: 6px; }
.mx-outcomes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: var(--space-3) 0 0; font-size: 13px; color: var(--color-neutral-800); }
.mx-note { max-width: 100ch; margin: var(--space-3) 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; background: var(--color-surface); border-left: 3px solid var(--color-accent-2-500); }
.mx-after { margin: var(--space-2) 0 0; max-width: 100ch; }
.mx-section h3 { margin: var(--space-6) 0 var(--space-2); font-size: 15px; scroll-margin-top: 120px; }
.mx-ref { margin-top: 48px; padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.mx-ref > h2 { margin: 0; font-size: 18px; line-height: 24px; }
.mx-ref h3 { margin: var(--space-6) 0 var(--space-2); font-size: 15px; }
.matrix-list { margin: 0 0 var(--space-4); padding-left: 20px; line-height: 1.5; max-width: 80ch; }
.matrix-list li + li { margin-top: 6px; }

/* ---- lead notes: links are clickable; Edit shows the text box */
.notes-view { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; min-height: 24px; }
.notes-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.notes-actions [hidden] { display: none; } /* .btn sets display, which would show a hidden button */

/* ---- lead page: review card (why it is here, what it may duplicate, Dynamics links) */
.review-card { margin: 0 0 var(--space-4); padding: 0; background: var(--color-surface); border: 1px solid var(--color-divider); border-left: 3px solid var(--color-accent-2-500); border-radius: 6px; }
.review-card > * { padding: 12px 16px; }
.review-card > * + * { border-top: 1px solid var(--color-divider); }
.review-why { margin: 0; }
.review-crm h4 { margin: 0 0 6px; font-size: 13px; }
.kv-tight { row-gap: 2px; }
.review-link { margin-left: 4px; font-size: 13px; white-space: nowrap; }
.review-search { margin: 6px 0 0; font-size: 13px; }
.review-search .review-link { margin-left: 0; white-space: normal; overflow-wrap: anywhere; }

/* ---- lead page: enrichment log (date and time, check or x per source, what was pulled underneath) */
@media (min-width: 1100px) { .lead-cards > .enrich-section { grid-column: span 2; } }
.enrich-log { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.45; }
.enrich-entry + .enrich-entry { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-divider); }
.enrich-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.enrich-head time { color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.enrich-mark { display: inline-block; width: 16px; text-align: center; font-weight: 700; }
:root { --color-success: #0e700e; } /* 6.6:1 on white */
.log-ok { color: var(--color-success); }
.log-fail { color: var(--color-danger); }
.log-maybe { color: var(--color-accent-2-700); }
.log-skip { color: var(--color-neutral-700); }
.enrich-data { list-style: none; margin: 2px 0 0; padding: 0 0 0 24px; font-size: 12px; color: var(--color-text); overflow-wrap: anywhere; }
.enrich-data li + li { margin-top: 1px; }

/* ---- matrix: how a connection is made (same layout as the connections mockup) */
.flow-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: f; }
.flow-strip li { position: relative; counter-increment: f; padding: 12px 28px 12px 14px; background: var(--color-surface); border: 1px solid var(--color-divider); margin-right: -1px; }
.flow-strip li:first-child { border-radius: 6px 0 0 6px; }
.flow-strip li:last-child { border-radius: 0 6px 6px 0; }
.flow-strip li::before { content: counter(f); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 12px; font-weight: 700; }
.flow-strip .who { display: block; margin-top: 4px; color: var(--color-neutral-700); font-size: 12px; }
.flow-strip b { font-weight: 600; }
.wf-table td { vertical-align: top; white-space: normal; font-size: 13px; line-height: 18px; }
.wf-table th:first-child, .wf-table td:first-child { width: 16%; }
.wf-table th:nth-child(2), .wf-table th:nth-child(3) { width: 17%; }
.wf-table th:nth-child(4) { width: 24%; }
.wf-table ul { margin: 0; padding-left: 16px; }
.wf-table .stores { display: grid; gap: 2px; }
.where { display: flex; align-items: flex-start; gap: 6px; }
.where svg { margin-top: 2px; flex: none; }
.where b { font-weight: 600; }
.table-wrap { position: relative; } /* keeps a screen-reader-only caption from widening the page on phones */
@media (max-width: 900px) {
  .flow-strip { grid-template-columns: 1fr 1fr; }
  .flow-strip li { margin: 0 -1px -1px 0; border-radius: 0 !important; }
}

/* Run report: a mark for each numbered step, the numbers above the marks, the legend. */
.run-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.run-filter .count { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .8; }
.run-dl { margin-left: auto; }
.run-leads td { vertical-align: middle; }
.run-leads .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-error td { background: #fdf3f4; }
.nochange { display: block; margin-top: 2px; }
.steps { display: inline-flex; gap: 3px; }
.step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--color-neutral-400); font-size: 12px; font-weight: 700; line-height: 1; background: var(--color-surface); color: var(--color-neutral-800); }
.step-found { border-color: var(--color-ok-300); background: var(--color-ok-100); color: var(--color-ok-700); }
.step-none { color: var(--color-neutral-700); }
.step-skip { border-style: dashed; color: var(--color-neutral-700); }
.step-error, .step-failed { border-color: #f1bbbc; background: #fdf3f4; color: var(--color-danger); }
.step-review { border-color: var(--color-accent-2-300); background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.step-blank { border-style: dotted; }
.step-nums { display: flex; margin-top: 4px; }
.step-num { width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--color-neutral-700); cursor: help; }
.steps-list { margin: 0; padding-left: 16px; display: grid; gap: 2px; text-align: left; font-weight: 400; white-space: nowrap; }
.legend { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; list-style: none; padding: 0; margin: var(--space-2) 0; font-size: 12px; color: var(--color-neutral-800); }
.legend .lg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend .step { width: 18px; height: 18px; font-size: 11px; }
.run-more { margin-top: var(--space-5); }
@media (max-width: 1000px) { .legend { flex-direction: column; align-items: flex-start; gap: 6px; } .run-dl { margin-left: 0; } }

/* Lead page Contact: the import data (grey, read-only) and the Enriched data card under it, in one column. */
.lc-stack { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.lc-stack > section { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 12px 16px 14px; min-width: 0; }
.lc-import { background: var(--color-neutral-200); }
.lc-enriched { background: var(--color-surface); }
.lc-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.lc-head h3 { margin: 0; }
.lc-head .btn { margin-left: auto; }
.lc-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-neutral-700); white-space: nowrap; }
.lc-meta .btn-link { font-size: 12px; }
.lc-kv { grid-template-columns: 9.5em 1fr; font-size: 13px; }
.lc-import .lc-kv dd { color: var(--color-neutral-900); }
.lc-rule { border-top: 1px solid var(--color-neutral-400); margin: var(--space-2) 0; }
.lc-enr dd { display: flex; flex-direction: column; }
.lc-src { font-size: 12px; color: var(--color-neutral-700); }
.lc-edit { display: grid; gap: 6px; }
.lc-edit-row { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--space-2); align-items: center; font-size: 13px; }
.lc-edit-row label { color: var(--color-neutral-700); }
.lc-edit-row .input { width: 100%; min-width: 0; font-size: 13px; }
.lc-hint { margin: var(--space-2) 0; font-size: 12px; color: var(--color-neutral-700); }
.lc-editing { box-shadow: inset 0 0 0 2px var(--color-accent-300); }
.edit-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 480px) {
  .lc-kv, .lc-edit-row { grid-template-columns: 1fr; row-gap: 0; }
  .lc-kv dd { margin-bottom: 6px; }
  .lc-meta { white-space: normal; }
}