/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  Lead Engine — design system
 *  Single source of truth for all design tokens, chrome, and components.
 *  Visual reference: /dashboard-mock.html (annotated).
 *
 *  Rules (NEVER break):
 *  - Borders are always 1px. Never 2px.
 *  - One primary CTA per page. Default to ghost buttons.
 *  - No gradients anywhere.
 *  - Mono is reserved for ⌘K kbd, IDs/UUIDs, and technical codes.
 *    Addresses, owner names, dates, and prices use Circular + tabular-nums.
 *  - We never display a numeric distress score. Use Hot/Warm/Cold tier chips.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─── FONTS — Circular (hosted on Supabase storage) ───────────────────── */

@font-face {
  font-family: 'Circular';
  src: url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Book.woff2') format('woff2'),
       url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Book.ttf')   format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Medium.woff2') format('woff2'),
       url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Medium.woff')  format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Bold.woff2') format('woff2'),
       url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Bold.ttf')   format('truetype');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Black.woff2') format('woff2'),
       url('https://bpksqrkcknesfqajmilg.supabase.co/storage/v1/object/public/fonts/CircularStd-Black.ttf')   format('truetype');
  font-weight: 800 900; font-style: normal; font-display: swap;
}

/* ─── DESIGN TOKENS — light (default) ─────────────────────────────────── */

:root {
  /* surfaces — light mode runs paper-warm. The cream shift is deliberately
     small (a few percent off pure neutral) so it's felt, not seen. */
  --bg:               #FFFFFF;
  --bg-soft:          #FBFAF7;     /* paper-warmed soft */
  --bg-elevated:      #FFFFFF;
  --bg-feature:       #F3F2EE;     /* cream-tinted feature panel */
  --bg-input:         #FFFFFF;
  --bg-overlay:       rgba(0,0,0,.40);

  /* borders */
  --border:           #EAEAEA;
  --border-strong:    #D4D4D4;
  --border-focus:     #0A0A0A;

  /* text */
  --text:             #0A0A0A;
  --text-2:           #525252;
  --text-3:           #A3A3A3;
  --text-4:           #D4D4D4;

  /* accent — Red Property Book brand red. Matches the marketing site
     wholesale: oklch keeps red consistent across themes, theme contrast
     comes from the bg + soft-bg layers. */
  --accent:           oklch(63.7% 0.237 25.331);
  --accent-hover:     oklch(58% 0.235 26);
  --accent-text:      #FFFFFF;
  --accent-soft:      oklch(63.7% 0.237 25.331 / 0.06);
  --accent-soft-text: oklch(50% 0.21 27);

  /* Cream is light-mode only by design. Used as a small institutional
     glyph color on section headers — never as a large surface fill. */
  --accent-cream:     #C8C2B6;

  /* status — strictly mono + brand red. No oranges. */
  --warning-bg:       #F4F4F4;
  --warning-text:     #525252;
  --info-bg:          oklch(63.7% 0.237 25.331 / 0.06);
  --info-text:        oklch(50% 0.21 27);
  --danger-bg:        #F4F4F4;
  --danger-text:      #0A0A0A;
  --neutral-bg:       #F4F4F4;
  --neutral-text:     #525252;

  /* tier emphasis — red (HOT) → black (WARM) → grey (COLD) */
  --tier-hot:         oklch(63.7% 0.237 25.331);   /* primary accent — HOT pops as the only colored chip */
  --tier-warm:        #0A0A0A;                     /* near-black */
  --tier-cold:        #A3A3A3;                     /* mid grey */

  /* distress-signature severity ramp (light): building=amber/yellow, strong=coral */
  --signal-amber:     #B8860B;
  --signal-coral:     #D26B6F;
  --firstlook-surface: #F5F0E1;   /* First Look band — soft cream (light only) */

  /* radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px;

  /* shadows — used only for floating elements */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.06);
  --shadow-pop: 0 8px 32px rgba(0,0,0,.10);

  /* fonts */
  --font-sans: 'Circular', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* size scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;

  /* spacing (4px grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* component dimensions — DO NOT vary across pages */
  --h-topbar:    48px;
  --h-tabbar:    44px;
  --h-filterbar: 52px;
  --h-input:     32px;
  --h-btn:       32px;
  --h-btn-sm:    26px;
  --h-row:       60px;
  --w-rail:      48px;
  --w-rail-open: 220px;
  --w-subnav:    240px;
  --w-slideover: 580px;
}

/* ─── DESIGN TOKENS — dark ────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg:               #0A0A0A;
  --bg-soft:          #111111;
  --bg-elevated:      #0F0F0F;
  --bg-feature:       #161616;
  --bg-input:         #0F0F0F;

  --border:           #1F1F1F;
  --border-strong:    #2A2A2A;
  --border-focus:     #FAFAFA;

  --text:             #FAFAFA;
  --text-2:           #A3A3A3;
  --text-3:           #737373;
  --text-4:           #404040;

  /* Brand red holds across themes; dark gets a slightly luminous soft
     and a brighter tier-hot for contrast on the near-black surface. */
  --accent:           oklch(63.7% 0.237 25.331);
  --accent-hover:     oklch(58% 0.235 26);
  --accent-text:      #FFFFFF;
  --accent-soft:      oklch(63.7% 0.237 25.331 / 0.12);
  --accent-soft-text: oklch(78% 0.18 25);

  --warning-bg:       #1A1A1A;
  --warning-text:     #A3A3A3;
  --info-bg:          oklch(63.7% 0.237 25.331 / 0.12);
  --info-text:        oklch(78% 0.18 25);
  --danger-bg:        #1A1A1A;
  --danger-text:      #FAFAFA;
  --neutral-bg:       #1A1A1A;
  --neutral-text:     #A3A3A3;

  --tier-hot:         oklch(70% 0.22 25);          /* slightly brighter red for dark-mode contrast */
  --tier-warm:        #FAFAFA;
  --tier-cold:        #737373;

  /* Cream is light-mode only — intentionally not redefined here. */
  --signal-amber:     #D4A017;
  --signal-coral:     #E08084;
  --firstlook-surface: #1B1710;   /* First Look band — warm dark echo of the cream */
}

/* ─── RESET + BASE ────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body.app-shell { overflow: hidden; }   /* dashboard / settings — chrome locked */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .15s ease, color .15s ease;
}

::selection { background: var(--text); color: var(--bg); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
input:focus, button:focus, select:focus, textarea:focus { outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.num  { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-2); }
.dimmed { color: var(--text-3); }
.hidden { display: none !important; }

/* ─── APP SHELL ───────────────────────────────────────────────────────── */

.app   { display: grid; grid-template-rows: var(--h-topbar) 1fr; height: 100vh; }
.shell { display: grid; grid-template-columns: var(--w-rail) var(--w-subnav) 1fr; min-height: 0; }

/* ─── TOPBAR ──────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: var(--s-3);
}
.topbar-logo {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-md); font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topbar-logo .dot { width: 8px; height: 8px; background: var(--text); border-radius: 1px; }
.crumb-sep { color: var(--text-3); padding: 0 var(--s-1); }
.crumb-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 28px; padding: 0 var(--s-2);
  border-radius: var(--r-md);
  font-size: var(--text-md); color: var(--text); font-weight: 500;
}
.crumb-btn:hover { background: var(--bg-feature); }
.crumb-btn .caret { color: var(--text-3); }

.topbar-spacer { flex: 1; }

.topbar-search {
  display: flex; align-items: center; gap: var(--s-2);
  height: 28px; padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  color: var(--text-3);
  font-size: var(--text-base);
  width: 220px;
  cursor: text;
}
.topbar-search:hover { border-color: var(--border-strong); }
.topbar-search .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 1px var(--s-1);
  border-radius: var(--r-sm);
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-md);
  color: var(--text-2);
}
.icon-btn:hover { background: var(--bg-feature); color: var(--text); }

.avatar {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 600; color: white;
  cursor: pointer;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
}

/* ─── ICON RAIL (Supabase-style hover drawer) ─────────────────────────── */

/* The grid cell. Fixed width — the rail expands as an OVERLAY without
   pushing the rest of the layout. Position relative so the inner .rail can
   absolute-position against it. */
.rail-shell {
  position: relative;
  width: var(--w-rail);
  height: 100%;
  background: var(--bg-soft);
  /* No border here — the .rail inside owns the right border so it travels
     with the drawer as it expands (collapsed: 48px, open: 220px). */
}

/* The visible rail. Sits inside .rail-shell, full height. Width animates
   from collapsed (--w-rail) to open (--w-rail-open) on hover. z-index lifts
   it above the subnav when expanded so it overlays cleanly. */
.rail {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--w-rail);
  display: flex; flex-direction: column;
  background: var(--bg-soft);
  padding: var(--s-2) 0;
  gap: 2px;
  min-height: 0; overflow: hidden;
  z-index: 50;
  border-right: 1px solid var(--border);
  /* Hover-intent: 200ms delay on EXPAND so casual mouse-by doesn't trip it. */
  transition:
    width 180ms ease-out 200ms,
    box-shadow 180ms ease-out 200ms;
}
/* When the user actually lands on the rail, expand. Focus-within keeps it
   open while keyboard navigation is inside. */
.rail-shell:hover .rail,
.rail-shell:focus-within .rail {
  width: var(--w-rail-open);
  box-shadow: 8px 0 24px -10px rgba(0, 0, 0, 0.08);
}
/* Collapse is instant (no delay) — feels snappy and prevents the drawer
   from lingering when the user moves away. */
.rail-shell:not(:hover):not(:focus-within) .rail {
  transition-delay: 0ms;
}

.rail-item {
  position: relative;
  display: flex; align-items: center;
  height: 36px;
  margin: 0 6px;
  /* padding chosen so the 20px icon centers cleanly in the 36px-wide
     (48 − 2×6 margin) collapsed item: (36 − 20) / 2 = 8px each side. */
  padding: 0 8px;
  border-radius: var(--r-md);
  color: var(--text-3);
  gap: 12px;
  text-decoration: none;
  /* The label sits in the DOM next to the icon and is clipped here while
     the rail is collapsed. Becomes visible naturally as the rail expands. */
  overflow: hidden;
  white-space: nowrap;
}
.rail-item .ico { flex-shrink: 0; }
.rail-item:hover { color: var(--text); background: var(--bg-feature); }
.rail-item.active { color: var(--text); background: var(--bg-feature); }
/* The accent stripe on the active item. Pinned to the rail's left edge so
   it stays anchored regardless of expansion state. */
.rail-item.active::before {
  content: '';
  position: absolute;
  left: -6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Label text. Sits next to the icon in the DOM but is invisible until the
   rail expands. Width:0 collapsed → no layout cost. Slight delay on fade-in
   so the text appears as the drawer is most of the way open. */
.rail-label {
  font-size: var(--text-base);
  font-weight: 500;
  color: inherit;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 140ms ease-out,
    transform 180ms ease-out;
  pointer-events: none;
}
.rail-shell:hover .rail-label,
.rail-shell:focus-within .rail-label {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 280ms;
}

.rail-spacer { flex: 1; }
.rail-sep {
  height: 1px; background: var(--border);
  margin: var(--s-1) 12px;
}

/* ─── SUB-NAV SIDEBAR ─────────────────────────────────────────────────── */

.subnav {
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
}
.subnav-title {
  padding: var(--s-4) var(--s-4) var(--s-2);
  font-size: var(--text-lg); font-weight: 600;
  letter-spacing: -0.01em;
}
.subnav-section-label {
  padding: var(--s-4) var(--s-4) var(--s-1);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
}
.subnav-item {
  display: flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-4);
  font-size: var(--text-md); color: var(--text-2);
  cursor: pointer;
}
.subnav-item:hover { background: var(--bg-feature); color: var(--text); }
.subnav-item.active { background: var(--bg-feature); color: var(--text); font-weight: 500; }
.subnav-item .ico { color: var(--text-3); }
.subnav-item.active .ico { color: var(--text); }
.subnav-item .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

.subnav-sub {
  display: flex; align-items: center; gap: var(--s-2);
  height: 28px;
  padding: 0 var(--s-4) 0 calc(var(--s-4) + 24px);
  font-size: var(--text-base); color: var(--text-2);
  cursor: pointer;
}
.subnav-sub:hover { background: var(--bg-feature); color: var(--text); }
.subnav-sub.active { color: var(--text); font-weight: 500; }
.subnav-sub .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ─── MAIN ────────────────────────────────────────────────────────────── */

.main {
  display: grid;
  grid-template-rows: var(--h-tabbar) auto 1fr auto;
  /* The implicit grid column is `auto`, which sizes to the leads table's
     max-content and overflows main's box (clipping the filterbar, table and
     pagination on the right at any viewport narrower than the table). Pin it
     to a shrinkable minmax(0,1fr) so the column tracks main's width and the
     table scrolls inside .content instead of pushing past the viewport. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  min-height: 0;
  /* Also let the 1fr shell column itself shrink to its track (default grid
     min-width is auto) so the shell never exceeds the viewport. */
  min-width: 0;
}
.main.no-filterbar { grid-template-rows: var(--h-tabbar) 1fr auto; }
.main.no-pagination { grid-template-rows: var(--h-tabbar) auto 1fr; }

.tabbar {
  display: flex; align-items: center;
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--border);
  gap: var(--s-6);
}
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: var(--h-tabbar);
  font-size: var(--text-base); font-weight: 500; color: var(--text-2);
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--text);
}
.tab .count { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.tab.active .count { color: var(--text-2); }

.tabbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.filterbar {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: var(--s-2) var(--s-6); gap: var(--s-2) var(--s-2);
  min-height: var(--h-filterbar);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/* Thin vertical rule separating filter groups. */
.filter-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 var(--s-1);
  flex-shrink: 0;
}

/* Quiet uppercase label introducing each filter group. */
.filter-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 var(--s-1);
  flex-shrink: 0;
}

.content { overflow: auto; min-height: 0; min-width: 0; }
.content.padded { padding: var(--s-6); }

/* ─── BUTTONS ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  height: var(--h-btn); padding: 0 var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--text-base); font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm  { height: var(--h-btn-sm); padding: 0 var(--s-2); }
.btn-lg  { height: 36px; padding: 0 var(--s-4); font-size: var(--text-md); }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-default { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.btn-default:hover:not(:disabled) { background: var(--bg-feature); }

.btn-ghost   { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-feature); color: var(--text); }

.btn-link    { background: transparent; color: var(--text); padding: 0; height: auto; border: none; }
.btn-link:hover { text-decoration: underline; }

.btn-danger  { background: var(--bg); color: var(--danger-text); border-color: var(--border-strong); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger-text); }

/* ─── INPUTS / SELECTS ────────────────────────────────────────────────── */

.input, .select {
  display: flex; align-items: center;
  height: var(--h-input);
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-input);
  font-size: var(--text-base);
  width: 100%;
}
.input:focus, .select:focus { border-color: var(--border-focus); }
.input::placeholder { color: var(--text-3); }
.input-with-icon { display: flex; align-items: center; gap: var(--s-2); padding-left: var(--s-3); }
.input-with-icon input { flex: 1; border: none; background: transparent; height: 100%; font-size: var(--text-base); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: var(--text-md); font-weight: 500; color: var(--text); }
.field-help  { font-size: var(--text-sm); color: var(--text-3); }
.field-error { font-size: var(--text-sm); color: var(--danger-text); }

.checkbox {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--bg);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.checkbox:checked { background: var(--text); border-color: var(--text); }
.checkbox:checked::after {
  content: ''; position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── FILTER PILLS ────────────────────────────────────────────────────── */

.filter-search {
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--h-input); padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-input);
  width: 320px;
}
.filter-search:focus-within { border-color: var(--border-focus); }
.filter-search input { flex: 1; border: none; background: transparent; font-size: var(--text-base); }
.filter-search input::placeholder { color: var(--text-3); }

.filter-pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: var(--h-input); padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--text-base); font-weight: 500;
  cursor: pointer;
}
.filter-pill:hover { background: var(--bg-feature); color: var(--text); }
/* Active pills use the brand-red wash so they're unmistakably distinct from a
   mere hover state (which previously looked identical). */
.filter-pill.has-value {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  border-color: transparent;
  font-weight: 600;
}
/* "Clean Targets" one-click preset — a saved-view shortcut, promoted above
   the individual filter pills it sets (free & clear + LLC/trust/bank). */
.filter-pill.quick-view {
  border-color: var(--accent);
  color: var(--accent-soft-text);
  font-weight: 600;
}
.filter-pill.quick-view:hover {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
}
.filter-pill .count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 16px; min-width: 16px; padding: 0 4px;
  background: var(--text); color: var(--bg);
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.filter-reset { margin-left: auto; font-size: var(--text-base); color: var(--text-2); cursor: pointer; }
.filter-reset:hover { color: var(--text); text-decoration: underline; }

/* ─── DATA TABLE ──────────────────────────────────────────────────────── */

.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.data-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
  height: 36px; padding: 0 var(--s-3);
  white-space: nowrap;
}
.data-table thead th.num-col { text-align: right; }
.data-table thead th.sortable { cursor: pointer; user-select: none; }
.data-table thead th.sortable:hover { color: var(--text-2); }
.data-table thead th.sortable.active { color: var(--text); }
.data-table thead th .sort-ind { display: inline-block; width: 0; height: 0; margin-left: 6px; opacity: .35; vertical-align: middle; }
.data-table thead th.sortable.active .sort-ind { opacity: 1; }
/* Caret base — descending by default */
.data-table thead th .sort-ind::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
}
/* Active sort direction flips the caret deterministically */
.data-table thead th.sortable.sort-asc .sort-ind::after {
  border-top: none;
  border-bottom: 4px solid currentColor;
}
.data-table thead th.sortable.sort-desc .sort-ind::after {
  border-bottom: none;
  border-top: 4px solid currentColor;
}
.data-table tbody tr {
  height: var(--h-row);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .08s ease;
}
.data-table tbody tr:hover { background: var(--bg-feature); }
.data-table tbody tr.selected { background: var(--bg-feature); }
.data-table td { padding: 0 var(--s-3); vertical-align: middle; }

/* table cell layouts */
.td-check  { width: 40px; }
.td-status { width: 88px; }
.td-distress { width: 132px; }
.td-property { min-width: 280px; }
.td-signals  { min-width: 240px; }
.td-deal     { width: 134px; text-align: right; }
.td-chev     { width: 32px; text-align: right; color: var(--text-3); }
tr:hover .td-chev { color: var(--text); }

.address {
  font-size: var(--text-md); font-weight: 500;
  color: var(--text); letter-spacing: -0.01em;
  display: flex; align-items: center;
}
/* Long street names used to push the REVEALED badge onto its own line. Keep the
   address text on one line (ellipsis) and pin REVEALED inline beside it. */
.address-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner {
  font-size: var(--text-sm); color: var(--text-2);
  margin-top: 2px;
  display: flex; align-items: center; gap: var(--s-2);
}
.portfolio-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 16px; padding: 0 6px;
  background: var(--neutral-bg); color: var(--neutral-text);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}
/* Out-of-state owners stay in every list (incl. Free & clear) but read as a
   distinct category: an out-of-state LLC can't be pierced via the Michigan
   LARA registry, so it's a different outreach play than a Michigan owner. */
.owner-loc-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 16px; padding: 0 6px;
  background: var(--bg-feature); color: var(--accent);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  white-space: nowrap;
}

.deal-cost  { font-size: var(--text-md); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.deal-ratio { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ─── TIER CHIP ───────────────────────────────────────────────────────── */

.tier-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent; background: transparent;
}
/* All three tier chips share the same neutral palette. The label word
   itself (HOT / WARM / COLD) does the differentiation — color does not.
   This treatment turns the chip into a calm anchor rather than an
   attention magnet, while preserving the typographic ranking.
   Chips show on EVERY plan (ranking is all-tiers since 2026-06-10); the
   per-plan difference is WHEN a parcel flips HOT — the server-side First
   Look hold-back, see .firstlook-tag below. */
.tier-chip-hot,
.tier-chip-warm,
.tier-chip-cold {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-soft);
}
/* Cold remains visually one notch quieter for in-table density: dimmer
   text reads as "lower priority" without changing the chip silhouette. */
.tier-chip-cold { color: var(--text-2); }
.tier-chip-lg { height: 28px; padding: 0 var(--s-3); font-size: var(--text-base); }

/* ─── SIGNAL CHIPS (in row cards) ─────────────────────────────────────── */

.signals { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 6px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0;
  border: 1px solid; background: transparent;
  white-space: nowrap;
}
/* Signal chips — three-tier severity ramp so rows with many signals read as
   hierarchy, not as a wall.
   Tier 1  Legal & Financial — soft-red wash, deep red text, no border. Loud
           but restrained: sentence case carries less weight than ALL CAPS.
   Tier 2  Code & Permit — ghost: hairline border, no fill, dark text. Quieter.
   Tier 3  Owner / context — text on a barely-tinted ground, no border. They
           are context, not signals; they sit back. */
.chip-legal,
.chip-financial {
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  border-color: transparent;
}
.chip-code,
.chip-permit    {
  color: var(--text);
  border-color: var(--border-strong);
  background: transparent;
}
.chip-owner     {
  color: var(--text-2);
  border-color: transparent;
  background: var(--bg-feature);
}
/* Overflow pip — quietest mark in the row. Sub-pill, no chrome. Sits next
   to the last chip as "and N more". On hover a styled tooltip lists every
   collapsed signal (one per line) — replaces the native title attribute,
   which is slow and unstyleable. */
.chip-overflow {
  position: relative;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 4px;
  font-size: var(--text-xs); font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  cursor: default;
}
.chip-overflow:hover { color: var(--text-2); }

/* The tooltip itself. content comes from data-signals (newline-separated),
   white-space:pre preserves the line breaks. Anchored above the pip,
   centered, with a subtle drop-shadow. Fades in on hover. */
.chip-overflow::after {
  content: attr(data-signals);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  white-space: pre;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 120ms ease-out,
    transform 140ms ease-out;
  z-index: 100;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.18);
  max-width: 240px;
}
.chip-overflow:hover::after,
.chip-overflow:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Legacy .chip-more retained for the "—" empty-state cell. */
.chip-more      { color: var(--text-3);   border-color: var(--border); }

/* ─── STATUS CHIPS (topbar tier, breadcrumb env) ──────────────────────── */

.status-chip {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.chip-pro      { background: var(--neutral-bg);  color: var(--neutral-text); }
.chip-prod     { background: var(--accent-soft); color: var(--accent-soft-text); }
.chip-tier-solo      { background: var(--neutral-bg); color: var(--neutral-text); }
.chip-tier-operator  { background: var(--info-bg);    color: var(--info-text); }
.chip-tier-territory { background: var(--accent-soft);color: var(--accent-soft-text); }
/* ADMIN tier — solid brand-red so the founder/support account always
   reads as "this is godmode, be careful" at a glance. Same height + radius
   as the other tier chips so the topbar rhythm stays consistent. */
.chip-tier-admin {
  background: var(--accent);
  color: var(--accent-text);
  letter-spacing: 0.05em;
}

/* ─── PAGINATION ──────────────────────────────────────────────────────── */

/* ─── PAGINATION ──────────────────────────────────────────────────────────
   Institutional, minimal. Mono numerics. Subtle hover. Filled accent-soft
   chip for the active page. Optional jump-to-page input materializes
   only when there are enough pages to warrant it (>10). Page-size
   selector lives on the far right with a custom dropdown caret. */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-3) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: var(--text-sm);
}
.pagination-info {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  font-size: var(--text-sm);
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.pagination-spacer { flex: 1; }

.pagination-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pagination-arrow:hover:not(.disabled) {
  background: var(--bg-feature);
  color: var(--text);
}
.pagination-arrow.disabled {
  color: var(--text-4);
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-arrow svg { width: 14px; height: 14px; }

.pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--s-1);
}
.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pagination-page:hover:not(.active) {
  background: var(--bg-feature);
  color: var(--text);
}
.pagination-page.active {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  font-weight: 500;
}
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 28px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  user-select: none;
}

/* "Page [_3_] of 181" jump-to-page indicator. Materializes when total
   pages > 10. The input is small + tightly integrated, not form-y. */
.pagination-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  font-size: var(--text-sm);
  color: var(--text-3);
}
.pagination-jump-label {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.pagination-jump-input {
  width: 48px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  transition: border-color .12s;
}
.pagination-jump-input::-webkit-outer-spin-button,
.pagination-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pagination-jump-input:focus {
  outline: none;
  border-color: var(--text);
}
.pagination-jump-total {
  color: var(--text-3);
  font-size: var(--text-sm);
}

/* Custom page-size dropdown. Removes the native caret, adds a quiet
   chevron via background-image so it matches the mono numeric aesthetic. */
.pagination-pagesize {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background-color: var(--bg);
  color: var(--text-2);
  padding: 0 26px 0 10px;
  height: 28px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color .12s, color .12s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23A3A3A3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  margin-left: var(--s-2);
}
.pagination-pagesize:hover { border-color: var(--border-strong); color: var(--text); }
.pagination-pagesize:focus { outline: none; border-color: var(--text); }

/* Legacy aliases — kept while other surfaces (settings pages) might
   still reference the old class names. Safe to remove once verified. */
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.page-btn:hover { background: var(--bg-feature); color: var(--text); }
.page-btn.active { background: var(--bg-feature); color: var(--text); font-weight: 500; }
.page-btn.disabled { color: var(--text-4); cursor: not-allowed; pointer-events: none; }

/* Jump-to-page input — matches the pill aesthetic of the surrounding buttons.
   Strips the native browser spinner since we already have explicit prev/next. */
.page-jump {
  width: 56px; height: 26px;
  padding: 0 var(--s-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.page-jump::-webkit-outer-spin-button,
.page-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-jump:focus { outline: none; border-color: var(--border-focus); }

/* ─── REVEALED tag — appears on lead rows the org has paid for ────────── */

.revealed-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  vertical-align: middle;
  cursor: help;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── QUOTA CHIP (skip-trace counter in slideover, future quota readouts) ── */

.quota-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  margin-top: 12px;
}
.quota-chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.quota-chip strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.quota-chip .quota-sub {
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.quota-chip.low {
  background: color-mix(in srgb, var(--warm) 12%, transparent);
  border-color: var(--warm);
  color: var(--warm);
}
.quota-chip.low .dot { background: var(--warm); }

/* ─── TOPBAR CONTACT-REVEAL METER ──────────────────────────────────────── */
/* Persistent "<remaining> of <max> reveals" pill in the topbar. Mirrors the
   in-slideover .quota-chip so the two read identically. Hidden on Solo/ADMIN. */
.reveal-meter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; margin-right: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 999px; font-size: 12px; color: var(--text-2);
  text-decoration: none; white-space: nowrap;
}
.reveal-meter:hover { border-color: var(--border-strong); color: var(--text); }
.reveal-meter .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.reveal-meter strong { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.reveal-meter.low { background: color-mix(in srgb, var(--warm) 12%, transparent); border-color: var(--warm); color: var(--warm); }
.reveal-meter.low .dot { background: var(--warm); }
.reveal-meter[hidden] { display: none; }

/* ─── SELECTED-ROWS PILL + small picker (used in dashboard toolbar) ─────── */

.selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  white-space: nowrap;
}
.selected-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.link-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  font-size: 11px;
  text-decoration: underline;
  font-family: inherit;
  margin-left: 2px;
}
.link-btn:hover { color: var(--text); }

.picker-sm {
  height: 28px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}
.picker-sm:hover { color: var(--text); border-color: var(--border-strong, var(--text-3)); }

/* ─── MODAL (export confirmation, future generic dialogs) ────────────────── */

.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay, rgba(0,0,0,.45));
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 250;
  backdrop-filter: blur(2px);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--card, var(--bg));
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 440px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* Modal sub-elements used by the export preview */
.modal-lede {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.modal-lede strong { font-weight: 600; }
.modal-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.modal-stat-row .label { color: var(--text-2); }
.modal-stat-row .val   { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.modal-stat-row .after { color: var(--text-3); font-variant-numeric: tabular-nums; }
.modal-hint {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
}

/* Toast inline restore-quota link */
.toast .restore-link {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}
.toast .restore-link:hover { background: var(--bg-2); }

/* ─── SLIDEOVER ───────────────────────────────────────────────────────── */

.slideover-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 200;
}
.slideover-backdrop.open { opacity: 1; pointer-events: auto; }

.slideover {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--w-slideover);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  /* Header row sizes to its content so the signal fingerprint stays
     inside the bordered region. Footer remains fixed at 64px. */
  display: grid; grid-template-rows: auto 1fr 64px;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  z-index: 201;
  box-shadow: var(--shadow-pop);
}
.slideover.open { transform: translateX(0); }

.slideover-header {
  display: flex;
  align-items: flex-start;   /* top-align chip + close against title row */
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  gap: var(--s-3);
}
.slideover-header .title-block { flex: 1; min-width: 0; }
.slideover-header .title {
  font-size: var(--text-md); font-weight: 600;
  color: var(--text); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slideover-header .subtitle {
  font-size: var(--text-sm); color: var(--text-2);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The chip and close button must never get flex-shrunk under the
   title-block. Otherwise a long address pushes them onto a new line. */
.slideover-header .tier-chip-lg,
.slideover-header .icon-btn,
.slideover-header .save-star { flex-shrink: 0; }
.slideover-header .save-star { margin-right: var(--s-2); }

.slideover-body { overflow-y: auto; padding: var(--s-5); }
.slideover-section + .slideover-section { margin-top: var(--s-6); }
.slideover-section-title {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}

.slideover-footer {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.slideover-footer .spacer { flex: 1; }

/* slideover content blocks */
.headline-block {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg);
}
.headline-block .left { display: flex; flex-direction: column; gap: var(--s-2); }
.headline-block .label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.headline-block .cost  { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.headline-block .meta-sub { color: var(--text-2); font-size: var(--text-base); }

.acq-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
.acq-total { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.acq-total .label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.acq-total .value { font-size: var(--text-2xl); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.acq-line { display: flex; align-items: center; padding: 10px var(--s-5); font-size: var(--text-base); border-bottom: 1px solid var(--border); }
.acq-line:last-child { border-bottom: none; }
.acq-line .label { color: var(--text-2); flex: 1; }
.acq-line .value { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

.pressure-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
.pressure {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-3); background: var(--bg);
}
.pressure .label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.pressure .value { font-size: var(--text-md); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pressure .meta  { font-size: var(--text-sm); color: var(--text-2); margin-top: 2px; }

.weighted-list { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.weighted-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); font-size: var(--text-base); }
.weighted-row:last-child { border-bottom: none; }
.weighted-row .label { color: var(--text); font-weight: 500; }
.weighted-row .desc  { color: var(--text-2); font-size: var(--text-sm); margin-top: 2px; }

.signal-strength { display: inline-flex; align-items: center; gap: 3px; }
.signal-strength .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--border-strong); }
.signal-strength.s3 .dot:nth-child(-n+3),
.signal-strength.s2 .dot:nth-child(-n+2),
.signal-strength.s1 .dot:nth-child(-n+1) { background: var(--text); }

.summary-block {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-feature);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--text-base); color: var(--text);
  line-height: 1.6;
}

/* ─── EMPTY STATES (Supabase 3-card pattern) ──────────────────────────── */

.empty-wrap { padding: var(--s-8) var(--s-6); }
.empty-title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.empty-sub   { font-size: var(--text-md); color: var(--text-2); margin-top: var(--s-2); margin-bottom: var(--s-6); max-width: 560px; }
.empty-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); max-width: 960px; }
.empty-card  {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.empty-card .card-ico { color: var(--text-2); }
.empty-card .card-title { font-size: var(--text-md); font-weight: 600; color: var(--text); }
.empty-card .card-body  { font-size: var(--text-base); color: var(--text-2); flex: 1; }
.empty-card .card-cta   { margin-top: var(--s-3); }

/* ─── FORM (settings) ─────────────────────────────────────────────────── */

.form { max-width: 720px; padding: var(--s-6); }
.form-section { padding: var(--s-6) 0; border-bottom: 1px solid var(--border); }
.form-section:first-child { padding-top: 0; }
.form-section:last-child { border-bottom: none; }
.form-section-title { font-size: var(--text-md); font-weight: 600; color: var(--text); margin-bottom: var(--s-1); }
.form-section-help  { font-size: var(--text-base); color: var(--text-2); margin-bottom: var(--s-4); }

.form-row { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-6); padding: var(--s-3) 0; align-items: start; }
.form-row .label-block { padding-top: 6px; }
.form-row .label-block .label { font-size: var(--text-md); font-weight: 500; color: var(--text); display: block; }
.form-row .label-block .help  { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; display: block; }
.form-row .control { max-width: 480px; }

.form-savebar {
  display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: sticky; bottom: 0;
}

/* ─── TOAST ───────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: var(--s-2);
  z-index: 400;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s-2);
  width: 320px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elevated); box-shadow: var(--shadow-pop);
  font-size: var(--text-base); color: var(--text);
}
.toast-error  { border-color: var(--danger-text); }
.toast-success { border-color: var(--accent); }

/* ─── ICONS ───────────────────────────────────────────────────────────── */

.ico    { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.75; stroke: currentColor; fill: none; }
.ico-20 { width: 20px; height: 20px; stroke-width: 1.5; }

/* ─── AUTH PAGES (login, signup) ──────────────────────────────────────── */

.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-6);
}
.auth-card {
  width: 360px; max-width: 100%;
  display: flex; flex-direction: column; gap: var(--s-5);
}
.auth-brand { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.auth-brand .dot { width: 8px; height: 8px; background: var(--text); border-radius: 1px; }
.auth-brand .name { font-size: var(--text-md); font-weight: 600; }
.auth-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
.auth-help  { font-size: var(--text-base); color: var(--text-2); }
.auth-divider { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font-size: var(--text-sm); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-footer { font-size: var(--text-sm); color: var(--text-3); text-align: center; }
.auth-footer a { color: var(--text); font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

/* ─── ONBOARDING ──────────────────────────────────────────────────────── */

.onb-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.onb-topbar {
  display: flex; align-items: center;
  padding: 0 var(--s-6);
  height: var(--h-topbar);
  border-bottom: 1px solid var(--border);
  gap: var(--s-3);
}
.onb-topbar .step { color: var(--text-3); font-size: var(--text-base); }
.onb-topbar .actions { margin-left: auto; display: flex; gap: var(--s-2); }
.onb-content { flex: 1; padding: var(--s-8) var(--s-6); max-width: 960px; margin: 0 auto; width: 100%; }
.onb-h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; }
.onb-sub { font-size: var(--text-md); color: var(--text-2); margin-top: var(--s-2); margin-bottom: var(--s-6); }

.zip-picker { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-4); }
.zip-regions { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.zip-region {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: var(--text-base);
}
.zip-region:last-child { border-bottom: none; }
.zip-region:hover { background: var(--bg-feature); }
.zip-region.active { background: var(--bg-feature); font-weight: 500; }
.zip-region .count { margin-left: auto; color: var(--text-3); font-size: var(--text-sm); }
.zip-detail { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); }
.zip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2); }
.zip-tile {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--text-base); font-weight: 500;
}
.zip-tile:hover { background: var(--bg-feature); }
.zip-tile.selected { background: var(--accent-soft); color: var(--accent-soft-text); border-color: var(--accent); font-weight: 600; }
.zip-tile.disabled { opacity: .5; cursor: not-allowed; }

/* ─── DISTRESS SIGNATURE ──────────────────────────────────────────────────
   Six weighted signal groups (Tax, Legal, Water, Code, Capital, Owner)
   rendered as intensity bars in the slideover body. Height encodes strength;
   color climbs a severity ramp grey (none) -> yellow (building) -> coral
   (strong) -> red (top distress: a recorded tax/legal/water claim). The
   varying heights give each parcel a distinct silhouette. Full panel width,
   sits under the acquisition headline. Replaces the old six-pip fingerprint.
   ──────────────────────────────────────────────────────────────────────── */
.distress-signature {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.distress-signature .ds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.distress-signature .ds-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.distress-signature .ds-fc {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  padding: 2px 9px;
  white-space: nowrap;
}
.distress-signature .ds-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
  align-items: end;
}
.distress-signature .ds-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.distress-signature .ds-track {
  position: relative;
  width: 100%;
  height: 52px;
  background: var(--bg-feature);
  border-radius: var(--r-sm);
}
.distress-signature .ds-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--r-sm);
  transition: height 220ms ease;
}
/* Severity ramp: grey (none) → yellow (building) → coral (strong) → red (top
   distress). Red is reserved for a recorded tax / legal / water claim, so it
   only appears at the worst tier and never floods the row. */
.distress-signature .ds-fill.alert { background: var(--accent); }        /* red    — top distress (recorded claim) */
.distress-signature .ds-fill.ink   { background: var(--signal-coral); }  /* coral  — strong, non-claim */
.distress-signature .ds-fill.soft  { background: var(--signal-amber); }  /* yellow — building */
.distress-signature .ds-fill.none  { background: var(--border-strong); } /* grey   — no signal */
.distress-signature .ds-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}
.distress-signature .ds-fact {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--text-2);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.distress-signature .ds-fact.ds-empty { color: var(--text-3); }

/* ─── ROW DISTRESS SIGNATURE (mini) ───────────────────────────────────────
   Compact form of the slideover distress signature, rendered on every leads
   row in place of the retired HOT/WARM/COLD chip: a distress-signal COUNT and a
   6-bar severity sparkline. Same grey → yellow → coral → red ramp and claim
   rule as .distress-signature (both built from _distressGroups) so the row and
   the slideover never disagree — red is reserved for a recorded tax/legal/water
   claim. The internal 0-100 score is never shown as a number or a verdict. */
.sig-mini { display: flex; align-items: center; gap: var(--s-2); }
.sig-count {
  font-size: var(--text-xs); font-weight: 500; color: var(--text-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sig-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.sig-bar {
  width: 4px; min-height: 3px; border-radius: 1.5px;
  background: var(--border-strong);
}
.sig-bar.alert { background: var(--accent); }       /* red    — recorded claim (Tax/Legal/Water) */
.sig-bar.ink   { background: var(--signal-coral); } /* coral  — strong, non-claim */
.sig-bar.soft  { background: var(--signal-amber); } /* yellow — building */
.sig-bar.none  { background: var(--border-strong); }/* grey   — no signal */

/* ─── LIGHT-MODE CREAM ACCENT ─────────────────────────────────────────────
   The only place cream surfaces visibly. A tiny square glyph before
   each slideover section title, mirroring the institutional eyebrow
   marker from the marketing site. Scoped to light mode by design —
   dark mode stays cool and neutral on purpose.
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .slideover-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
[data-theme="light"] .slideover-section-title::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent-cream);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ─── FIRST LOOK (the Territory head start) ──────────────────────────────
   Replaces the retired Territory-only tier-chip gate (2026-06-12): HOT /
   WARM / COLD now renders on every plan, and the Territory differentiator
   is TIME — newly-HOT parcels reach Territory immediately while Operator
   and Solo see them flip days later (server-side hold-back, lead-dash
   lib/first-look.ts). The tag marks head-start rows; the strip surfaces
   the newest flips above the table. Both only ever render for sessions
   the server flagged — there is nothing to hide client-side. */
.firstlook-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-text);
  vertical-align: middle;
  cursor: help;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Full-width band flush under the filterbar (not an inset card), so it lines up
   with the filter row above and the table below. Cream surface sets it apart as
   its own module; a single bottom hairline separates it from the leads. */
.firstlook-strip {
  margin: 0;
  padding: var(--s-2) var(--s-6);
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--firstlook-surface);
}
/* The head doubles as the collapse toggle (a full-width button), so the strip
   sits as a slim one-line bar by default and the cards expand on demand. Keeps
   the leads table above the fold instead of being pushed down by the strip. */
.firstlook-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 2px 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.firstlook-head .firstlook-tag { margin-left: 0; cursor: inherit; }
.firstlook-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.firstlook-sub   { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; }
.firstlook-spacer { flex: 1 1 0; min-width: var(--s-2); }
.firstlook-chev {
  width: 16px; height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease, stroke .15s ease;
}
.firstlook-head:hover .firstlook-chev { stroke: var(--text); }
.firstlook-strip:not(.fl-collapsed) .firstlook-chev { transform: rotate(180deg); }
.firstlook-items {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  overflow-x: auto;
  padding-bottom: 2px;
  max-height: 110px;
  transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease;
}
.firstlook-strip.fl-collapsed .firstlook-items {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
}
.firstlook-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
  text-align: left;
  flex-shrink: 0;
}
.firstlook-item:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.firstlook-item-addr { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.firstlook-item-meta { font-size: var(--text-xs); color: var(--text-3); }

/* ─── SOLO PLAN (no premium stack) ───────────────────────────────────────
   Hides the premium signal filter pills, the Clean Targets quick view
   (built on Free & Clear, a Wayne-derived premium signal) and the
   save-search button (alerts are Operator+). The server strips premium
   fields and 403s the saved-search routes regardless — these rules keep
   the UI from advertising clicks that would no-op. `blight` stays: blight
   tickets & balance are on the Solo card. */
body.plan-no-premium .filter-pill[data-signal]:not([data-signal="blight"]),
body.plan-no-premium #cleanTargetsPill,
body.plan-no-premium #saveSearchBtn {
  display: none !important;
}

/* ─── OWNER-CLASS BADGE ──────────────────────────────────────────────────
   Small uppercase tag that prefixes the owner name in the slideover
   subtitle for non-default owner classes. Quiet by design — the badge
   is meant to flag, not shout. */
.owner-class-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: var(--bg-feature);
  color: var(--text-2);
  margin-right: 6px;
  vertical-align: 1px;
}
.owner-class-badge.landbank {
  /* Most important to flag — landbank means uncontactable. Soft-red wash
     mirrors the marketing-site "tag.red" pattern. */
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  border-color: transparent;
}
.owner-class-badge.gov { color: var(--text-2); background: var(--bg-feature); }
.owner-class-badge.bank {
  /* Bank-owned = REO = motivated. Neutral but assertive. */
  color: var(--text);
  background: var(--bg-feature);
  border-color: var(--border-strong);
}
.owner-class-badge.trust { color: var(--text-2); background: var(--bg-feature); }

/* Wayne County slideover — minimalist <details> collapse for per-mortgage
   instrument detail. Rotates the ▸ chevron when expanded; suppresses the
   default disclosure triangle so we control the visual entirely. */
.wayne-detail > summary { list-style: none; }
.wayne-detail > summary::-webkit-details-marker { display: none; }
.wayne-detail[open] .wayne-detail-chev { transform: rotate(90deg); }
.wayne-detail:not([open]) > summary:hover { color: var(--text-2); }

/* ─── MICHIGAN LARA confidence badges ────────────────────────────────────
   Small inline pill indicating member-name confidence tier. Used in the
   Michigan LARA section of the slideover (Day-7 — owner-research feature). */
.lara-confidence {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: 1px;
  margin-left: 2px;
}
.lara-confidence.confidence-high {
  /* Strong green tag for solid signer evidence */
  color: #06823b;
  background: #e7f6ec;
}
.lara-confidence.confidence-medium {
  /* Amber for partial / variant matches */
  color: #946100;
  background: #fff5dc;
}
.lara-confidence.confidence-low {
  /* Quiet gray for agent-only / weak signals */
  color: var(--text-3);
  background: var(--bg-feature);
}

/* ─── Water freshness chip + refresh button ──────────────────────────────
 * Surfaces "how stale is this DWSD balance" in the slideover acquisition
 * card, and exposes a one-click queue-a-refresh action for Operator+ tier.
 * Customer-initiated refreshes are processed by the enrich-leads cron at
 * the front of each 30-min tick.
 */
.water-freshness {
  font-size: var(--text-xs);
  margin-left: var(--s-1);
}
.water-freshness.water-fresh {
  /* <7 days — calm, no callout */
  color: var(--text-3);
}
.water-freshness.water-aging {
  /* 7-30 days — gentle amber */
  color: #946100;
}
.water-freshness.water-stale {
  /* ≥30 days — accent red, signals "verify" */
  color: var(--accent);
}

.water-refresh-btn {
  appearance: none;
  background: var(--bg-feature);
  border: 1px solid var(--border-1);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: var(--s-1);
  cursor: pointer;
  vertical-align: 1px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.water-refresh-btn:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--text-1);
  border-color: var(--border-2);
}
.water-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.water-refresh-btn-loading {
  color: var(--text-3);
}
.water-refresh-btn-queued {
  color: #946100;
  background: #fff5dc;
  border-color: #f1d489;
}
.water-refresh-btn-done {
  color: #06823b;
  background: #e7f6ec;
  border-color: #b9e2c5;
}
.water-refresh-btn-failed {
  color: var(--accent);
  background: var(--bg-soft);
  border-color: var(--border-2);
}

/* Acquisition card — "no account on file" / "not yet checked" states.
 * Both render a placeholder line so the operator can see the DWSD lookup
 * happened (or hasn't yet) instead of an invisible gap. Both are visually
 * quieter than a real lien amount.
 */
.acq-line.acq-line-muted .label,
.acq-line.acq-line-muted .value {
  color: var(--text-3);
}
.acq-line.acq-line-untested .label {
  color: var(--text-2);
}
.acq-line.acq-line-untested .value {
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAVED — bookmarks, status, tags, the /saved page.
   Design discipline: strict mono + brand red. The seven status chips
   differentiate via weight/treatment, NOT a rainbow palette. A leading
   glyph + chip silhouette carries the semantic load.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── STAR (★) bookmark toggle in slideover header ──────────────────── */

.save-star {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: var(--h-btn-sm);
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.save-star:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-soft);
}
.save-star .star-glyph {
  font-size: var(--text-base);
  line-height: 1;
  color: var(--text-3);
  transition: color .12s;
}
.save-star.is-saved {
  border-color: var(--accent);
  color: var(--accent-soft-text);
  background: var(--accent-soft);
}
.save-star.is-saved .star-glyph { color: var(--accent); }
.save-star:disabled { opacity: .6; cursor: default; }

/* ─── Saved-lead panel (slideover, above body) ────────────────────────
   Two-line compact strip that lives at the top of the slideover body
   for every saved lead. Reads at a glance: meta line ("★ Saved 3d ago
   · from smart list") + controls line (status pill · list pill · tags).
   Total height ~60px. No verbose labels — the controls are iconic
   enough; popovers carry the descriptions on click. */

.saved-panel {
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.saved-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  min-height: 18px;
}
.saved-panel-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.saved-panel-glyph {
  color: var(--accent);
  font-size: var(--text-base);
  line-height: 1;
}
.saved-panel-prov {
  color: var(--text-3);
  font-style: italic;
  cursor: help;
}
.saved-panel-remove {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: var(--text-xs);
  padding: 2px var(--s-2);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.saved-panel-remove:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg);
}
.saved-panel-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* "List" pill — same silhouette as a status pill, with a leading folder
   glyph so it's visually iconic even without a verbose "List:" label.
   Empty state uses dashed border so it reads as "click to fill in." */
.saved-list-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.saved-list-pill:hover {
  border-color: var(--text);
}
.saved-list-pill.is-empty {
  color: var(--text-3);
  border-style: dashed;
}
.saved-list-pill.is-empty:hover {
  color: var(--text);
  border-style: solid;
}
.saved-list-pill-icon {
  color: var(--text-3);
  flex-shrink: 0;
}
.saved-list-pill:hover .saved-list-pill-icon {
  color: currentColor;
}
.saved-list-pill .caret {
  color: var(--text-3);
  font-size: 9px;
  line-height: 1;
}

/* Caret on the status pill — same visual rhythm as the list pill so
   the two controls read as a matched pair. */
.status-pill.has-caret {
  padding-right: var(--s-2);
}
.status-pill.has-caret .caret {
  color: currentColor;
  opacity: 0.55;
  font-size: 9px;
  line-height: 1;
  margin-left: 2px;
}
.status-pill:not(.is-static) {
  cursor: pointer;
}
.status-pill:not(.is-static):hover {
  filter: brightness(0.95);
}

/* ─── Notes disclosure ──────────────────────────────────────────────
   Collapsed by default — a single-line summary at the top of the slideover
   below the saved-panel. When closed it reads as a quiet CTA:
       ✎ Add a note                                             ▾
   or a preview when filled:
       ✎ Owner answered call, call back next Tue…              ▾
   When the user clicks the summary the textarea expands inline.
   Native <details> handles the open/close state for free + ESC + keyboard. */

.notes-disclosure {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.notes-disclosure[open] { background: var(--bg); }

.notes-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-size: var(--text-sm);
  color: var(--text-2);
  user-select: none;
  transition: color .12s, background .12s;
}
.notes-summary::-webkit-details-marker { display: none; }
.notes-summary:hover { color: var(--text); }

.notes-icon {
  color: var(--accent);
  flex-shrink: 0;
}
.notes-summary-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notes-preview {
  font-style: italic;
  color: var(--text-2);
}
.notes-add-cta {
  color: var(--text-3);
}
.notes-summary:hover .notes-add-cta {
  color: var(--text-2);
}

.notes-status {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.notes-status:not(:empty)::after {
  content: '';
  margin-right: var(--s-1);
}

.notes-chev {
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.notes-disclosure[open] .notes-chev { transform: rotate(180deg); }
.notes-disclosure[open] .notes-add-cta::after,
.notes-disclosure[open] .notes-preview::after { content: ''; }

/* Textarea reveals below the summary when expanded. Padded to align with
   the summary text; generous min-height so it feels like a scratchpad. */
.notes-disclosure .notes-textarea {
  display: block;
  width: calc(100% - var(--s-5) * 2);
  margin: 0 var(--s-5) var(--s-4);
  min-height: 110px;
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  line-height: 1.6;
  transition: border-color .12s;
}
.notes-disclosure .notes-textarea:hover {
  border-color: var(--text);
}
.notes-disclosure .notes-textarea:focus {
  border-color: var(--border-focus);
}
.notes-disclosure .notes-textarea::placeholder {
  color: var(--text-3);
  font-style: italic;
}

/* ─── STATUS CHIPS (7 fixed values) ───────────────────────────────────
   Visual hierarchy:
     • Active outreach states (reaching_out, offer_out) get the red wash
       — these are the urgency states the customer cares about.
     • Researching / Won use outlined treatments with distinct glyphs.
     • Dead / Lost dim to text-3 — they recede from the table.
   No greens, no oranges, no amber. The dot prefix gives semantic
   variety without breaking the mono+red palette. */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  border: 1px solid;
  background: var(--bg);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.status-pill[disabled],
.status-pill.is-static { cursor: default; }
.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.status-new           { color: var(--text-2);          border-color: var(--border); }
.status-new .dot      { background: var(--text-3); }

.status-researching   { color: var(--text);            border-color: var(--border-strong); }
.status-researching .dot { background: var(--text);    box-shadow: inset 0 0 0 2px var(--bg); /* donut */ }

.status-reaching_out  { color: var(--accent-soft-text); border-color: transparent;
                        background: var(--accent-soft); }
.status-reaching_out .dot { background: var(--accent); }

.status-offer_out     { color: var(--accent-text);     border-color: var(--accent);
                        background: var(--accent); font-weight: 600; }
.status-offer_out .dot { background: var(--accent-text); }

.status-won           { color: var(--text);            border-color: var(--text);
                        background: var(--bg); font-weight: 600; }
.status-won .dot      { background: var(--text); }

.status-lost          { color: var(--text-3);          border-color: var(--border); }
.status-lost .dot     { background: var(--text-4); }

.status-dead          { color: var(--text-3);          border-color: var(--border);
                        background: transparent; text-decoration: line-through;
                        text-decoration-color: var(--text-4); }
.status-dead .dot     { background: var(--text-4); }

/* ─── TAG CHIPS ───────────────────────────────────────────────────────
   Customer-invented labels. Always lowercase by convention (Linear-style).
   Hashtag prefix marks them as tags, not statuses. */

.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag-chip::before {
  content: '#';
  color: var(--text-3);
  margin-right: 2px;
}
.tag-chip.is-removable {
  cursor: pointer;
  padding-right: var(--s-1);
}
.tag-chip.is-removable:hover {
  border-color: var(--accent);
  color: var(--accent-soft-text);
}
.tag-chip-x {
  display: inline-block;
  margin-left: var(--s-1);
  color: var(--text-3);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}
.tag-chip-x:hover { color: var(--accent); }

/* "+ Tag" — small empty pill matching the family of editable controls
   in the saved-panel. Dashed border invites a click; on hover it solidifies
   like the .saved-list-pill.is-empty treatment. */
.tag-add-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color .12s, border-color .12s, border-style .12s;
}
.tag-add-pill:hover {
  color: var(--text);
  border-color: var(--text);
  border-style: solid;
}

/* ─── SUBNAV LIST FOLDER ──────────────────────────────────────────────
   The lists section in /saved subnav. Color dot for user-picked list color. */

.list-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--text-4);
  flex-shrink: 0;
}
.subnav-item.list-row {
  padding-left: var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
}
.subnav-item.list-row .label { flex: 1; }

/* ─── BULK-ACTIONS BAR (replaces tabbar-actions on selection) ─────── */

.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
}
.bulk-bar .bulk-count {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.bulk-bar .bulk-divider {
  width: 1px; height: 16px;
  background: var(--border);
}

/* ─── EMPTY STATES ────────────────────────────────────────────────────
   Adam-friendly: one clear card, one verb, one button. */

.saved-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-10) var(--s-6);
  text-align: center;
  color: var(--text-2);
  min-height: 360px;
}
.saved-empty .glyph {
  font-size: 32px;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.saved-empty .title {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.saved-empty .sub {
  font-size: var(--text-sm);
  color: var(--text-2);
  max-width: 44ch;
  margin-bottom: var(--s-5);
  line-height: 1.6;
}

/* ─── NOTES TEXTAREA ──────────────────────────────────────────────────
   In-slideover and inline-edit popover. Quiet by default, focus shows
   the same hairline border as text inputs. */

.notes-textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-input);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  resize: vertical;
  transition: border-color .12s;
}
.notes-textarea:focus {
  border-color: var(--border-focus);
}
.notes-textarea::placeholder { color: var(--text-3); }

/* ─── INLINE POPOVER (for editing status / list / tags from a meta-pill) */

.inline-popover {
  position: absolute;
  /* Above the slideover (z-index 201). Without this, popovers opened from
     inside the slideover render UNDER it and look like nothing happened. */
  z-index: 220;
  min-width: 200px;
  padding: var(--s-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inline-popover .opt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
}
.inline-popover .opt:hover { background: var(--bg-soft); }
.inline-popover .opt.is-active { background: var(--bg-feature); font-weight: 500; }
.inline-popover .opt-input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}
.inline-popover .opt-input:focus { border-color: var(--border-focus); }

/* ─── REMINDER PILL ──────────────────────────────────────────────────
   Today/this-week emphasis without colored chrome. */

.reminder-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-2);
  font-family: var(--font-mono);
}
.reminder-pill.is-today { color: var(--accent-soft-text); font-weight: 600; }
.reminder-pill.is-overdue { color: var(--accent); font-weight: 600; }
.reminder-pill .ico { width: 12px; height: 12px; color: currentColor; }

/* ─── PARCEL EVENT TIMELINE ──────────────────────────────────────────
   Shared by the slideover "Recent activity" section and /events rows.
   Server applies the plan gates (premium kinds, First Look window);
   these styles only render what came back. */

.parcel-timeline { display: flex; flex-direction: column; }
.timeline-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-2);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);
  margin-top: 5px;
  flex: none;
}
.timeline-dot.hot { background: var(--accent); }
.timeline-body { flex: 1; min-width: 0; }
.timeline-label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.timeline-sub { font-size: var(--text-xs); color: var(--text-2); margin-top: 2px; }
.timeline-date {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  margin-top: 3px;
  font-family: var(--font-mono);
}
.timeline-doc-link {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-left: var(--s-1);
}
.timeline-doc-link:hover { text-decoration: underline; }

/* Premium-gated UI on non-dashboard pages (e.g. /events subnav groups).
   Same session flag that drives the dashboard's pill hiding. */
body.plan-no-premium .premium-only { display: none !important; }