/* Styled after the DealPilot dashboard: system font, slate text on a light
   grey page, white rounded cards with thin borders, blue accent, pill badges. */
:root {
  --page: #f4f6f8;
  --card: #ffffff;
  --text: #101828;
  --muted: rgba(16, 24, 40, 0.6);
  --line: #e4e7ec;
  --blue: #2563eb;
  --blue-soft: #eff4ff;
  --blue-line: rgba(37, 99, 235, 0.3);
  --green: #15803d;
  --green-soft: #ecf7ef;
  --red: #b42318;
  --red-soft: #fef3f2;
  --amber-soft: #fffaeb;
  --amber-line: #fedf89;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--blue); text-decoration: none; }
h1, h2 { margin: 0; }
.muted { color: var(--muted); }

/* Top bar */
/* Pinned: stays visible while the page scrolls. */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
/* 1280px on every page (the results pages' width), so the logo and the top bar's links sit in the
   same place everywhere - the search form and wait pages included, though their content is narrower. */
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.brand { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-right: 8px; }
.navlink { padding: 6px 12px; border-radius: 8px; color: var(--text); }
/* Right end of the top bar (v12: Settings, where New search was). The top bar and the page share the same
   max width and side padding, so this lines up with the right edge of the results. */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* v12 Settings: a plain gear (no box), opening a panel of on / off switches under it. */
.settings { position: relative; }
.settings-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; font: inherit; font-weight: 500;
  color: var(--muted); background: none; border: 0; cursor: pointer; }
.settings-btn:hover, .settings-btn[aria-expanded="true"] { color: var(--text); }
.settings-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 900; width: 320px; padding: 6px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14); }
.settings-panel[hidden] { display: none; }
.settings-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 0 4px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; cursor: pointer; }
.switch-row + .switch-row { border-top: 1px solid var(--line); }
.switch-row b { display: block; font-weight: 500; }
.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0;
  border-radius: 999px; background: #d0d5dd; cursor: pointer; transition: background .15s; }
.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2); transition: transform .15s; }
.switch:checked { background: var(--blue); }
.switch:checked::before { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--blue-line); outline-offset: 2px; }
/* The three places in the app (v6), lit like the Search tab's Find by buttons. */
.topnav { display: flex; gap: 4px; margin-left: 16px; }
.topnav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-weight: 500; color: var(--muted); }
.topnav-link:hover { color: var(--text); }
.topnav-link.on { background: var(--blue-soft); color: var(--blue); }
.topnav-link.on .view-count { background: var(--card); color: var(--blue); }
.btn-ghost.small { padding: 6px 12px; }

.container { max-width: 1040px; margin: 0 auto; padding: 20px 16px 48px; }
/* Results page: wider than DealPilot's 1040px column, because the filter sidebar takes 282px of it.
   At 1040 the feed is 726px and phone lines ("(858) 752-3238 (M) 2026-08") wrap; at 1280 it's
   966px and they fit. The top bar is this wide on every page, so the edges line up. */
body.app-fill .container { max-width: 1280px; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }

/* Search + spellings pages */
.narrow { max-width: 620px; margin: 24px auto 0; display: grid; gap: 14px; }
.narrow.wide { max-width: 860px; }
.narrow > form { display: grid; gap: 14px; }
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.lede { margin: -6px 0 0; }
.form-card { padding: 18px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field-label { font-weight: 500; }
/* "(optional)" next to a field name: plain text, greyed out. */
.optional { font-weight: 400; color: var(--muted); margin-left: 2px; }
.hint { font-size: 12px; color: var(--muted); }
input[type=text], input[type=search], input[type=password], input[type=email] {
  width: 100%; font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--blue-line); border-radius: 8px; padding: 8px 12px;
}
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, input[type=email]:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.login-card { max-width: 360px; margin: 48px auto 0; padding: 24px; display: grid; gap: 8px; }
.login-title { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.login-card .btn-primary { margin-top: 8px; }
.credits { font-weight: 500; color: var(--text); }
.credits-out { color: var(--red); }
.credit-cost { color: var(--muted); font-weight: 400; }
.logout-form { margin: 0; }

.segmented { display: inline-flex; gap: 2px; padding: 4px; background: var(--page); border: 1px solid var(--blue-line); border-radius: 12px; width: fit-content; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 4px 12px; border-radius: 8px; font-weight: 500; color: rgba(16, 24, 40, 0.75); cursor: pointer; }
.segmented input:checked + span { background: var(--blue); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--blue); }

.btn-primary { font: inherit; font-weight: 500; background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 9px 18px; cursor: pointer; justify-self: start; }
.btn-primary:hover { background: #1d4ed8; }
.btn-primary.small { padding: 6px 12px; }
.btn-ghost { display: inline-block; font-weight: 500; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; }
.btn-ghost:hover { border-color: #cfd4dc; }
.btn-ghost.block { display: block; text-align: center; }
.btn-ghost.disabled { color: var(--muted); pointer-events: none; }
.actions { display: flex; justify-content: space-between; align-items: center; }
.alert { background: var(--red-soft); color: var(--red); border: 1px solid #fecdca; border-radius: 10px; padding: 10px 14px; }
.note { background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 10px; padding: 10px 14px; font-size: 13px; }

.check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 3px 0; }
.check input { margin: 3px 0 0; accent-color: var(--blue); }
.list-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.spell-list { list-style: none; margin: 0; padding: 4px 0; max-height: 52vh; overflow-y: auto; }
.spell-list li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 16px; border-bottom: 1px solid #f2f4f7; }
.spell-list li:last-child { border-bottom: 0; }
.spell-name { word-break: break-word; }
.spell-meta { white-space: nowrap; color: var(--muted); font-size: 12px; padding-top: 2px; }
.count { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Results layout */
/* Filter column: "auto" = the filters' fixed 250px plus room for their scroll bar. That room is
   always kept (scrollbar-gutter: stable, below), so a scroll bar never squeezes the filters or
   wraps their text, and the results never shift when one comes and goes. With scroll bars that
   only appear while scrolling (a Mac default) the room is zero. The browser sizes all of this
   itself, so it holds at every zoom level. */
.layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: start; }
.sidebar > * { width: 250px; }
/* top = pinned top bar height (~53px) + 12px, so the sidebar stops below it. */
.sidebar { display: grid; gap: 12px; position: sticky; top: 66px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; }
.stat { padding: 10px 14px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--muted); }
.filters { padding: 0; }
.filters-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.filters-title { font-weight: 600; }
.filters-title .muted { font-weight: 400; font-size: 12px; }
.clear { font-size: 12px; color: var(--text); }
.group { padding: 10px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.group:last-of-type { border-bottom: 0; }
.group-title { font-weight: 500; margin-bottom: 4px; }

.main { display: grid; gap: 14px; min-width: 0; }

.icon-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--page); color: var(--text); }

/* Folding filter group (Location). */
details.fold { display: block; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-top: -3px; }
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.fold-count[hidden] { display: none; }
.fold-count { font-size: 11px; font-weight: 600; color: #fff; background: var(--blue); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.fold-body { display: grid; gap: 4px; margin-top: 8px; }
fieldset.fold-body { border: 0; padding: 0; margin-inline: 0; margin-bottom: 0; min-width: 0; }
details.fold.off { color: var(--muted); }
details.fold.off .fold-body { opacity: .5; }
details.fold.off .check { cursor: default; }
.sub-title { font-size: 12px; font-weight: 500; color: rgba(16, 24, 40, 0.75); margin-top: 4px; }
.fold-body select { width: 100%; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--blue-line); border-radius: 8px; padding: 8px 10px; }
/* Full width of the results column (same edges as the summary card below),
   with the three labels sharing the space equally. */
/* The bar under All results | My list: a search's criteria, or My list's toggle - same frame,
   a small label on the left, and only real controls look clickable. */
.context-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 46px; box-sizing: border-box; padding: 5px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.ctx-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ctx-body { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13.5px; font-weight: 500; min-width: 0; }
.ctx-k { color: var(--muted); font-weight: 400; }
.ctx-sep { color: var(--muted); }
.ctx-new { margin-left: 6px; }   /* v12: New search, after the Search bar's criteria */
.view-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--page); color: var(--muted); font-size: 12px; text-align: center; }
/* My list's Favorited | Not interested toggle. */
/* 34px like Export and Sort; with the bar's padding and border the Show bar is 46px, as tall as the Search bar. */
.seg { display: inline-flex; gap: 2px; padding: 3px; height: 34px; box-sizing: border-box; background: var(--page); border: 1px solid var(--line); border-radius: 10px; }
.seg-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 8px; font-weight: 500; color: var(--muted); text-decoration: none; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
.note.missing ul { margin: 6px 0 0; padding-left: 18px; }

/* The summary, folded into the Search / Show bar (results page): the toggle on the bar's right,
   the counts and breakdown on a full-width row under it when open. */
.ctx-toggle { margin-left: auto; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; }
.ctx-toggle::after { content: " ▾"; font-size: 11px; }
.ctx-toggle[aria-expanded="true"]::after { content: " ▴"; }
.ctx-panel { flex: 1 1 100%; border-top: 1px solid var(--line); padding: 12px 0 9px; }
/* The top row is 34px tall (as tall as .seg) whether or not the panel is open, with its text
   centered in it - otherwise opening the panel shrinks the row to its text and the text jumps up. */
.context-bar > .ctx-label, .context-bar > .ctx-toggle { min-height: 34px; display: inline-flex; align-items: center; }
.context-bar > .ctx-body { min-height: 34px; align-content: center; }
.ctx-panel[hidden] { display: none; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px;
                padding-bottom: 12px; border-bottom: 1px solid var(--line); }   /* a line between the counts and the tables */
/* Number and label on one line ("12 liens") to keep the card short. */
.summary-grid > div { display: flex; align-items: baseline; gap: 6px; }
.breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding-top: 12px; }
table.mini { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
table.mini th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); padding: 4px 6px; }
table.mini td { padding: 4px 6px; border-bottom: 1px solid #f2f4f7; }
table.mini td.wrap { word-break: break-word; }
/* Counts (every column after the first) line up on the right. */
table.mini th:not(:first-child), table.mini td:not(:first-child) { text-align: right; white-space: nowrap; }

details.more summary { color: var(--blue); font-weight: 500; cursor: pointer; margin-top: 10px; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " ▾"; font-size: 11px; }
details.more[open] summary::after { content: " ▴"; }

/* Lead cards */
.lead { padding: 16px 18px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: rgba(16, 24, 40, 0.75); }
.badge { font-size: 12px; font-weight: 500; border-radius: 999px; padding: 1px 9px; border: 1px solid; }
.badge-blue { color: var(--blue); background: var(--blue-soft); border-color: #dbe6fe; }
.badge-gray { color: #475467; background: #f2f4f7; border-color: #e4e7ec; }
/* Original lender (grey) | current lender (blue) boxes, shared by the card header. */
.lender-col { min-width: 0; border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; justify-items: start; border: 1px solid; }
.lender-original { background: #f9fafb; border-color: var(--line); }
.lender-current { background: var(--blue-soft); border-color: #dbe6fe; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lender-current .eyebrow { color: var(--blue); }
.lender-name { font-weight: 600; font-size: 14px; word-break: break-word; }
.lender-original .lender-name { color: rgba(16, 24, 40, 0.8); }
.lender-note { font-size: 12.5px; color: rgba(16, 24, 40, 0.7); }
.signal { font-size: 12.5px; font-weight: 500; border-radius: 6px; padding: 3px 8px; border: 1px solid; line-height: 1.35; margin-top: 2px; }
.signal-hot { color: #b54708; background: #fffaeb; border-color: #fedf89; }
.signal-warm { color: #475467; background: #f2f4f7; border-color: var(--line); }
.signal-quiet { color: var(--muted); border-color: transparent; padding-left: 0; }
.pill-green { font-size: 13px; color: var(--green); background: var(--green-soft); border: 1px solid #d7efdd; border-radius: 999px; padding: 1px 11px; }
.pill-gray { font-size: 13px; color: #475467; background: #f2f4f7; border: 1px solid var(--line); border-radius: 999px; padding: 1px 11px; }
.empty { padding: 24px; text-align: center; color: var(--muted); }
/* Zip + radius filter (v4) */
.zip-row { display: flex; gap: 6px; align-items: center; }
.zip-row > input { flex: 1 1 0; min-width: 0; }
.miles { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; }
.miles input { width: 64px; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--blue-line); border-radius: 8px; padding: 8px 8px; }
/* Every filter box and dropdown in the sidebar the same compact height, to save space. */
.filters input[type=search], .filters input[type=number], .filters select {
  box-sizing: border-box; height: 32px; padding-top: 0; padding-bottom: 0; line-height: 30px;
}
.zip-error { font-size: 12px; color: var(--red); }
.zip-error[hidden] { display: none; }
/* A Location field the search still needs (Search tab, Property list). */
.lk-loc input.bad, .lk-loc .lk-select.bad select { border-color: var(--red); background: var(--red-soft); }
.naics-lines { display: grid; gap: 2px; font-size: 12.5px; }
.naics-lines:empty { display: none; }
.naics-lines b { font-variant-numeric: tabular-nums; margin-right: 2px; }
.distance { font-size: 12.5px; font-weight: 500; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 1px 9px; }
.pager { display: flex; justify-content: space-between; align-items: center; }
.pager-note { text-align: center; margin-top: 8px; }

/* Wait page */
.wait-card { padding: 18px 22px; display: flex; gap: 14px; align-items: center; }
.wait-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.small { font-size: 12px; }
.actions-right { display: inline-flex; align-items: center; gap: 12px; }
[hidden] { display: none !important; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--blue-soft); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Results page: the page is exactly the window's height and doesn't scroll;
   only the borrower list (.feed) scrolls. The sidebar scrolls on its own
   only if the window is too short to fit the filters. */
body.app-fill { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.app-fill .container { flex: 1; min-height: 0; width: 100%; display: flex; padding-bottom: 16px; }
body.app-fill .layout { flex: 1; min-height: 0; align-items: stretch; }
body.app-fill .sidebar { position: static; align-content: start; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; }
body.app-fill .main { display: flex; flex-direction: column; min-height: 0; }
body.app-fill .feed { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding-right: 4px; }
.feed { display: grid; gap: 14px; }
.result-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 0 2px; }
/* Same fixed height as .btn-export beside it (the select's own padding made it 2px taller). */
.sort { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; height: 34px; box-sizing: border-box; }
.sort select { font: inherit; color: var(--text); background: transparent; border: 0; outline: 0; padding: 0; height: 100%; cursor: pointer; }
.result-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The sample_app's .btn.btn-sm.btn-outline, matched to the Sort box beside it: same text
   weight and height, grey icon, dark label. While an export builds, the blue fill grows
   left to right with the % of rows written (--pct). */
.btn-export { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; box-sizing: border-box; line-height: normal; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.btn-export .export-label { color: var(--text); }
.btn-export:hover { border-color: #cfd4dc; }
.btn-export.busy { cursor: progress; border-color: #98a2b3;
  background: linear-gradient(to right, #dbeafe var(--pct, 0%), var(--card) var(--pct, 0%)); }
.btn-export.failed, .btn-export.failed .export-label { color: #b42318; border-color: #fda29b; }

/* Result cards: header, lien boxes and contact block copied from
   exitedge/sample_app/static/app.css, scoped to .lead-v3. */
.lead-v3 { --sub: #f9fafb; --line-strong: #d0d5dd; --green-line: #abefc6; --amber: #b45309; --violet: #6d28d9; --violet-soft: #f4f3ff; }
/* v5: card header, also from the sample_app. */
.lead-v3 .lead-head { display: flex; justify-content: space-between; gap: 16px; }
.lead-v3 .lead-title { min-width: 0; }
.lead-v3 .lead-title h2 { font-size: 16px; font-weight: 600; word-break: break-word; }
.lead-v3 .lead-title h2 .copy { vertical-align: middle; margin-top: -3px; }
/* The copy-name button is hidden for now (not needed yet); remove this line to bring it back. */
.lead-v3 .lead-title h2 .copy { display: none; }
.lead-v3 .icon-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.lead-v3 .icon-btn:hover { background: var(--sub); color: var(--text); }
.lead-v3 .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.lead-v3 .meta > span { display: inline-flex; align-items: center; gap: 4px; }
/* v10: the gov data tag is gray like the rest of the line; it only shows a tip, so no text cursor. */
.lead-v3 .meta > .gov-rec { cursor: default; }
.lead-v3 .lead-distance { margin-top: 6px; }
.lead-v3 .lead-distance .distance { font-size: 12px; }
.lead-v3 .glance { text-align: right; white-space: nowrap; }
.lead-v3 .glance span { display: block; color: var(--muted); font-size: 11px; }
.lead-v3 .glance b { display: block; font-size: 18px; }
.lead-v3 .glance .glance-active { color: var(--green); }
.lead-v3 .glance .glance-terminated { color: var(--muted); }
.lead-v3 .glance .glance-expired { color: var(--amber); }
.lead-v3 .glance .reasons { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.lead-v3 .handoff-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.lead-v3 .signal-body { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sub); }
.lead-v3 .sig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(165px, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr); gap: 8px 16px; padding: 12px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.lead-v3 .sig:last-child { margin-bottom: 0; }
.lead-v3 .sig .span4 { grid-column: span 4; }
.lead-v3 .sig-this { border-left: 3px solid var(--blue); }
/* Each lien's original (gray) / current (blue) lender: the card's boxes, without borders. */
.lead-v3 .sig-lenders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lead-v3 .sig-lenders .lender-col { border: 0; padding: 8px 10px; gap: 2px; }
.lead-v3 .sig-lenders .lender-name { font-size: 13px; }
.lead-v3 .lbl { display: block; color: var(--muted); font-size: 11px; margin-bottom: 1px; }
.lead-v3 .small { font-size: 12px; }
.lead-v3 .pill { display: inline-block; white-space: nowrap; padding: 0 8px; border-radius: 999px; font-size: 11.5px; line-height: 18px; background: var(--sub); border: 1px solid var(--line); }
.lead-v3 .pill-blue { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.lead-v3 .pill-green { background: var(--green-soft); color: var(--green); border-color: transparent; }
.lead-v3 .pill-amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.lead-v3 .tag { display: inline-block; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 11.5px; line-height: 18px; }
.lead-v3 .tag-sm { font-size: 10.5px; line-height: 16px; padding: 0 6px; }
.lead-v3 .tag-red { color: var(--red); border-color: transparent; background: var(--red-soft); }
/* Opens and closes with the triangle on its left, like Outreach & notes (the browser's own marker). */
.lead-v3 details.more.lien-list > summary { color: var(--text); font-weight: 400; font-size: 13px; margin: 2px 2px 0; list-style: revert; }
.lead-v3 details.more.lien-list > summary::-webkit-details-marker { display: revert; }
.lead-v3 details.more.lien-list > summary::after { content: none; }
.lead-v3 .lien-list > summary .link { color: var(--blue); }
.lead-v3 .lien-list[open] > summary { margin-bottom: 8px; }
.lead-v3 .contact { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--green-line); border-radius: 10px; background: #f6fef9; }
.lead-v3 .contact-none { background: var(--card); border: 1px dashed var(--line-strong); }
.lead-v3 .contact-none .gap { display: block; margin-top: 8px; }
/* Business, address, website: each as wide as its text, side by side, wrapping
   to a new row only when the card runs out of width (no fixed quarter-width columns). */
.lead-v3 .contact-grid { display: flex; flex-wrap: wrap; gap: 8px 40px; overflow-wrap: anywhere; }
.lead-v3 .contact-grid > div { flex: 0 1 auto; min-width: 0; }
/* v11: two columns - business and address on the left (wide: names and addresses run long),
   website / phone / email on the right, starting where the people rows' Emails column does:
   the same columns as .officer, inset by its padding + the .officers border (12px + 1px). */
.lead-v3 .contact-cols { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 8px 14px; padding: 0 13px; }
.lead-v3 .contact-cols > .contact-col { grid-column: 1 / 3; display: flex; flex-direction: column; gap: 8px; }
.lead-v3 .contact-cols > .contact-col + .contact-col { grid-column: 3; }
.lead-v3 .contact-cols > .contact-col:only-child { grid-column: 1 / -1; }
/* v12: business and address start at the Contacts label's edge, not the people rows' inset. */
.lead-v3 .contact-cols > .contact-col:first-child { margin-left: -13px; }
.lead-v3 .contacts-lbl { margin-top: 12px; text-transform: uppercase; letter-spacing: .04em; }
.lead-v3 .officers { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
/* Narrower than the sample's columns: the results column here sits beside the sidebar. */
.lead-v3 .officer { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(0, 1.25fr); gap: 6px 14px; padding: 9px 12px; }
.lead-v3 .officer + .officer { border-top: 1px solid var(--line); }
.lead-v3 .who { display: flex; flex-direction: column; gap: 2px; }
/* Age: plain gray text, like the role - bankers don't need it to stand out. */
.lead-v3 .who .age { color: var(--muted); font-size: 12px; }
.lead-v3 .who .role { color: var(--muted); font-size: 12px; align-self: flex-start; }   /* v12: as wide as its text, so its tip centers on it */
.lead-v3 .who .tag, .lead-v3 .who .gap { align-self: flex-start; }
/* LinkedIn search icon after the business and each person's name, in LinkedIn's own blue. */
/* Hover (or tab to it) shows "Search LinkedIn" straight away, drawn like the caller-name icon's tip. */
.lead-v3 .li { position: relative; display: inline-flex; vertical-align: -2px; margin-left: 6px; color: #0a66c2; }
.lead-v3 .li:hover svg, .lead-v3 .li:focus-visible svg { opacity: .75; }
/* My list buttons after the name: grey outlines, lit when on (gold star, red crossed circle). */
.lead-v3 .marks { display: inline-flex; gap: 2px; vertical-align: middle; margin-top: -3px; }
.lead-v3 .marks.busy { opacity: .5; cursor: progress; }
.lead-v3 .mark-fav.on { color: #b45309; }
.lead-v3 .mark-fav.on svg { fill: #f59e0b; stroke: #b45309; }
.lead-v3 .mark-no.on { color: var(--red); }
/* Every tip (anything with data-tip) is this one box, floating over the whole page, placed by
   base.html's script: a tip drawn inside a card would be cut off by the scrolling list around it. */
.float-tip { position: fixed; z-index: 1000; white-space: pre; padding: 4px 8px; border-radius: 6px;   /* pre: the gov tag's tip has one line per source */
  background: var(--text); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; pointer-events: none; }
.lead-v3.marked-no { opacity: .55; }
/* My list notes log (v4): tags under the name, and the folding log under the alerts. */
.lead-v3 .crm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lead-v3 .tag-due { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.lead-v3 .tag-overdue { color: var(--red); border-color: transparent; background: var(--red-soft); font-weight: 500; }
/* Outreach & notes in lavender, the one color no other part of the card uses - it marks the banker's own notes. */
.lead-v3 .crm-log { --note-line: #e4dffb; margin-top: 10px; border: 1px solid var(--note-line); border-radius: 8px; background: #f7f5ff; }
.lead-v3 .crm-log > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; }
.lead-v3 .crm-body { display: grid; gap: 10px; padding: 0 12px 12px; }
.lead-v3 .crm-add, .lead-v3 .crm-edit form { display: grid; gap: 6px; }
.lead-v3 .crm-add { padding-bottom: 10px; border-bottom: 1px solid var(--note-line); }
.lead-v3 .crm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Drag the corner to make it taller, like the plain text box it replaced. */
.lead-v3 .note-editor { font-size: 13px; line-height: 1.45; min-height: 52px; resize: vertical; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow-wrap: anywhere; }
.lead-v3 .note-editor:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.lead-v3 .note-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.lead-v3 .note-editor.note-empty { border-color: var(--red); }
.lead-v3 .note-editor ul, .lead-v3 .note-editor ol { margin: 2px 0; padding-left: 18px; }
.lead-v3 .crm-body input[type=date] { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.lead-v3 .crm-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.lead-v3 .crm-entry { display: grid; gap: 2px; font-size: 13px; }
/* A faint line between log entries, so each one reads on its own. */
.lead-v3 .crm-entry + .crm-entry { border-top: 1px solid var(--note-line); padding-top: 10px; }
.lead-v3 .crm-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; cursor: default; }
.lead-v3 .crm-entry-head::-webkit-details-marker { display: none; }
.lead-v3 .crm-text { overflow-wrap: anywhere; }
.lead-v3 .crm-text ul, .lead-v3 .crm-text ol { margin: 2px 0; padding-left: 18px; }
.lead-v3 .md-bar { display: flex; gap: 2px; margin-bottom: -4px; }
.lead-v3 .md-btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; width: 26px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.lead-v3 .md-btn:hover { border-color: var(--line); background: var(--card); color: var(--text); }
.lead-v3 .md-btn.on { border-color: var(--line); background: var(--card); color: var(--blue); }
/* The same ▾ / ▴ as "View breakdown by state and lender" (details.more). */
.lead-v3 .crm-edit-link { cursor: pointer; color: var(--blue); font-size: 12px; }
.lead-v3 .crm-edit-link::after { content: " ▾"; font-size: 11px; }
.lead-v3 .crm-edit[open] .crm-edit-link::after { content: " ▴"; }
.lead-v3 .crm-edit[open] > form { margin: 6px 0 8px; }
.lead-v3 .crm-delete { color: var(--red); }
/* My list: a favorite's changes and lapse warnings, under the card header. */
.lead-v3 .watch { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sub);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lead-v3 .watch-changed { background: var(--blue-soft); border-color: var(--blue-line); }
.lead-v3 .watch-title { font-weight: 600; font-size: 13px; }
.lead-v3 .changes { font-size: 13px; }
.lead-v3 .chg-missing { color: var(--red); }
.lead-v3 .tag-lapse { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); font-weight: 500; }
.lead-v3 .col-phones, .lead-v3 .col-emails { font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.lead-v3 .col-phones > div, .lead-v3 .col-emails > div, .lead-v3 .more-inline > div { margin: 1px 0; }
/* v12 Settings: the results card's phones, laid out by layoutList; a turned-off kind is hidden. */
.lead-v3 .col-phones .ph-main > div, .lead-v3 .ph-more > div { margin: 1px 0; }
.lead-v3 .col-phones > .ph-main { margin: 0; }
[data-phones] [hidden], [data-phones][hidden] { display: none !important; }
html.hide-mobile [data-phones] .ph[data-kind="mobile"], html.hide-landline [data-phones] .ph[data-kind="landline"] { display: none; }
/* v12 Settings' Business contacts only: the results card's emails, laid out the same way, and the
   skip-traced phones / off-domain emails it hides. */
.lead-v3 .col-emails .er-main > div, .lead-v3 .er-more > div { margin: 1px 0; }
.lead-v3 .col-emails > .er-main { margin: 0; }
[data-emails] [hidden] { display: none !important; }
html.hide-personal [data-phones="card"] [data-personal], html.hide-personal [data-emails="card"] [data-personal] { display: none; }
.lead-v3 .seen { color: var(--muted); font-size: 11px; margin-left: 4px; }
/* v11: hovering a value shows where it came from (the shared float tip). */
.src[data-tip] { outline: none; }
.nm { position: relative; display: inline-flex; vertical-align: -2px; cursor: help; outline: none; }
.nm-yes { color: var(--green); }
.nm-close { color: var(--text); }
.nm-no { color: var(--muted); }
.lead-v3 .gap { color: var(--muted); font-size: 12px; font-style: italic; }
.lead-v3 .more-inline > summary, .lead-v3 .more-people > summary { cursor: pointer; color: var(--blue); font-size: 12.5px; }
.lead-v3 .more-inline > summary { margin: 2px 0 0; }
.lead-v3 .more-people > summary { padding: 8px 12px; border-top: 1px solid var(--line); }
.lead-v3 .more-people[open] > summary { border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  .lead-v3 .sig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-v3 .sig .span4 { grid-column: span 2; }
  .lead-v3 .officer { grid-template-columns: 1fr; }
  .lead-v3 .contact-cols { grid-template-columns: 1fr; }
  .lead-v3 .contact-cols > .contact-col, .lead-v3 .contact-cols > .contact-col + .contact-col { grid-column: 1; }
  .lead-v3 .lead-head { flex-direction: column; gap: 6px; }
  .lead-v3 .glance { text-align: left; }
  .lead-v3 .handoff-row, .lead-v3 .sig-lenders { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Phones: back to a normal scrolling page. */
  body.app-fill { height: auto; overflow: visible; }
  body.app-fill .container { display: block; }
  body.app-fill .feed { overflow: visible; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .sidebar > * { width: auto; }
  .navlink { display: none; }
  .topnav { margin-left: 0; }
}
/* Search tab (v5). The sidebar forms use the filter column's boxes; results use the result cards. */
/* minmax(0, 1fr): a long dropdown option never widens the column past the card. */
.lk-form .group, .lk-form .fold-body { gap: 4px; grid-template-columns: minmax(0, 1fr); }
.lk-form .multi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lk-form .group .btn-primary { margin-top: 8px; justify-self: center; }
.lk-form .zip-row select { flex: 1 1 0; min-width: 0; }
.filters input[type=email], .filters input[type=date], .range-row input {
  width: 100%; box-sizing: border-box; height: 32px; font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--blue-line); border-radius: 8px; padding: 0 10px; }
.range-row { display: flex; gap: 6px; align-items: center; }
.range-row input { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.range-row .dash { color: var(--muted); }
.bool-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bool-row .sub-title { margin: 0; }
.fold-body .bool-row select { width: auto; height: 28px; padding: 0 6px; }
.multi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
/* The Search button stays in view at the bottom of the long filter list. The column scrolls (its
   scrollbar beside the card, as on the results page), so the card's own rounded bottom is off-screen
   until the end: the button's strip draws that bottom itself, over the card's edges, so the card
   always looks whole and never shifts. */
.lk-submit { position: sticky; bottom: 0; margin: 0 -1px -1px; padding: 10px 14px; text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 0 0 12px 12px; }
/* The result line under the Find by bar is as tall as its text in every view, so the gap between
   the two white boxes is the same everywhere; Export (34px) overhangs it evenly instead of making it taller. */
.lk-main > .result-bar { height: 20px; flex-wrap: nowrap; }
.lk-kind { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.lk-kind:hover { background: var(--page); }
.lk-kind.on { background: var(--blue-soft); color: var(--blue); }
.lk-empty { text-align: left; line-height: 1.5; }
.lk-empty b { color: var(--text); }
.lead-v3 .lk-owner-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 13px; }
.lead-v3 .lk-owner-line .lbl { margin: 0; }
.lead-v3 .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; margin-top: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--sub); font-size: 13px; overflow-wrap: anywhere; }
.lead-v3 .lk-table { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.lead-v3 .lk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 6px 14px; padding: 9px 12px; font-size: 13px; }
.lead-v3 .lk-row + .lk-row { border-top: 1px solid var(--line); }
.lead-v3 .lk-link { margin-left: 6px; font-size: 12px; white-space: nowrap; }
.lead-v3 .lk-sub { margin-top: 6px; }
.lead-v3 .lk-first { margin-top: 0; }
.lead-v3 .lk-more { margin-top: 12px; }
.lead-v3 details.more.owner-lookup > summary { margin-top: 12px; }
.tag.tag-ucc { color: var(--blue); background: var(--blue-soft); border-color: var(--blue-line); }
.lead-v3 .lk-ucc { margin-top: 12px; }
.lead-v3 .lk-ucc .contacts-lbl { margin-top: 0; }
.lead-v3 .lk-ucc .signal-body { margin-top: 10px; }
.lead-v3 .lk-fetch .lk-ucc, .lead-v3 .lk-fetch .tag-ucc { margin-top: 8px; }
.lead-v3 .lk-fetch .tag-ucc { display: inline-block; }
.lead-v3 details.more.lk-fetch > summary { margin-top: 12px; }
.lk-fetch-wait { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px; font-size: 13px; color: var(--muted);
  background: var(--sub); border: 1px solid var(--line); border-radius: 10px; }
.lk-fetch-wait[hidden], .lk-fetch-body[hidden] { display: none; }
/* The Search tab's wait hides the results column's parts with [hidden]; some have their own display. */
.main > [hidden] { display: none !important; }
.spinner.spinner-sm { width: 16px; height: 16px; border-width: 2px; flex: none; }
/* Search tab dropdowns: the same light-blue rounded box as its text boxes, with a small triangle. */
.lk-form select { width: 100%; box-sizing: border-box; height: 32px; font: inherit; color: var(--text); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23667085'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--blue-line); border-radius: 8px; padding: 0 28px 0 10px; -webkit-appearance: none; appearance: none; }
.lk-form select:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.lk-form .fold-body .bool-row select { width: auto; min-width: 72px; height: 28px; padding: 0 24px 0 8px; background-position: right 8px center; }