/* Seekly search-eager bundle — built 2026-06-20T04:54:28.625Z.
   Source files: 4. Do not edit; regenerate via 'node build.mjs'. */

/* === design-system.css === */
/*
 * CCRE Platform Design System
 * Shared tokens, typography, primitives.
 * Include BEFORE page-specific CSS.
 */

:root {
  /* Palette — warm off-white + brand navy + single accent */
  --ink: #00102E;
  --ink-2: #1a2748;
  --ink-3: #2c3a5e;
  --body: #00102E;        /* unified with --ink so body text + headings read identical deep navy */
  --muted: #6b6b66;
  --muted-2: #8a8a82;
  --line: #e8e6df;        /* warm hairline */
  --line-2: #f1efe8;      /* warm soft line */
  --bg: #fafaf7;          /* warm cream — replaces pure white */
  --bg-soft: #f5f3ea;
  --bg-soft-2: #eae6db;

  /* --accent — editorial navy (was Tailwind blue #0A5BCC). Active tabs,
     links, focus rings, eyebrows now read in brand color. */
  --accent: #00102E;
  --accent-dark: #0e1e3a;
  --accent-soft: #e8e6df;

  /* Editorial-luxury accent — for "saved" / "best deal" / love markers, charts */
  --accent-terra: #c45a3a;
  --accent-terra-deep: #9c4429;
  --accent-terra-soft: #f7e6df;
  --accent-moss: #5b6b3a;

  --green: #0E7F3E;
  --green-soft: #E3F5EA;
  --amber: #B45309;
  --amber-soft: #FEF3C7;
  --red: #B91C1C;
  --red-soft: #FEE2E2;
  --purple: #6D28D9;
  --purple-soft: #EDE7FD;
  --teal: #0F766E;

  /* Type scale */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 26px;
  --t-3xl: 34px;
  --t-4xl: 44px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(11, 15, 20, 0.04), 0 1px 3px rgba(11, 15, 20, 0.06);
  --sh-2: 0 4px 10px rgba(11, 15, 20, 0.06), 0 2px 4px rgba(11, 15, 20, 0.04);
  --sh-3: 0 12px 32px rgba(11, 15, 20, 0.09), 0 4px 12px rgba(11, 15, 20, 0.06);
  --sh-4: 0 24px 56px rgba(11, 15, 20, 0.12), 0 10px 24px rgba(11, 15, 20, 0.08);

  /* Transitions */
  --xfast: 100ms cubic-bezier(.2,.8,.2,1);
  --fast: 180ms cubic-bezier(.2,.8,.2,1);
  --med: 260ms cubic-bezier(.2,.8,.2,1);
}

/* Import Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:wght@500;600;700&display=swap');

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--bg);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Editorial-luxury default: H1/H2/H3 set in Fraunces serif at lighter weight.
   H4 stays Inter sans for tight section labels and table headers. */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0;
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.022em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.018em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-md); }

p { margin: 0; color: var(--body); }
a { color: var(--accent); text-decoration: none; transition: color var(--xfast); }
a:hover { color: var(--accent-dark); }

/* Button system */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--body);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--fast);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--bg-soft); border-color: var(--muted-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); }

.btn-accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: white; }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--body);
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }

.btn-sm { padding: 6px 12px; font-size: var(--t-xs); }
.btn-lg { padding: 14px 22px; font-size: var(--t-md); }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: all var(--fast);
  line-height: 1;
  user-select: none;
}
.chip:hover { border-color: var(--ink-3); background: var(--bg-soft); }
.chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow: var(--sh-1);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Form controls */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.field label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--body);
  transition: border-color var(--xfast), box-shadow var(--xfast);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--muted-2); }

/* Surfaces */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: box-shadow var(--fast), transform var(--fast), border-color var(--fast);
}
.card-hover:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  border-color: var(--line-2);
}

/* Pills (status) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.pill-active { background: var(--green-soft); color: var(--green); }
.pill-pending { background: var(--amber-soft); color: var(--amber); }
.pill-sold { background: var(--bg-soft-2); color: var(--muted); }
.pill-offmarket { background: var(--ink); color: var(--bg); }
.pill-listed { background: var(--accent-soft); color: var(--accent-dark); }
.pill-neutral { background: var(--bg-soft-2); color: var(--ink-3); }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-purple { background: var(--purple-soft); color: var(--purple); }
.pill-accent { background: var(--accent-soft); color: var(--accent-dark); }

/* ════════════════════════════════════════════════════════════════════════ */
/* Status chip — shared color tokens for listing-status chips on cards,    */
/* list rows, marker hovers, MyHomes and the property-modal hero.          */
/* The container class (.lcard-status-chip / .hero-status-chip) defines    */
/* size + padding; these classes set color only.                           */
/* ════════════════════════════════════════════════════════════════════════ */
.lcard-status-chip,
.hero-status-chip {
  /* Shared primitives so the chip works without search.css loaded. */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.lcard-status-chip { font-size: 9px; padding: 3px 12px 4px; line-height: 1.3; }
.hero-status-chip { font-size: 10px; padding: 4px 14px 5px; letter-spacing: 0.08em; line-height: 1.3; margin-bottom: 8px; }

.lcard-status-chip.lcard-status-active,
.hero-status-chip.lcard-status-active {
  border-color: var(--ink);
  color: var(--ink);
}
.lcard-status-chip.lcard-status-pending,
.hero-status-chip.lcard-status-pending {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}
.lcard-status-chip.lcard-status-sold,
.hero-status-chip.lcard-status-sold {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-soft);
}
.lcard-status-chip.lcard-status-ended,
.hero-status-chip.lcard-status-ended {
  border-color: var(--purple);
  color: var(--purple);
  background: var(--purple-soft);
}

/* Utility */
.hidden { display: none !important; }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.scrollable { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scrollable::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollable::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.scrollable::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* App shell */
.app-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  text-decoration: none;
  color: var(--ink);
}
.topbar-logo {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--ink), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.topbar-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.topbar-wordmark small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.topbar-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.topbar-nav a {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--body);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: all var(--fast);
}
.topbar-nav a:hover { background: var(--bg-soft); color: var(--ink); }
.topbar-nav a.active {
  color: var(--ink);
  background: var(--bg-soft);
  font-weight: 600;
}

/* Section headers */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
  gap: var(--s-4);
}
.section-head h2 { font-size: var(--t-xl); }
.section-head p { color: var(--muted); font-size: var(--t-sm); }
.eyebrow {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 6px;
}

/* Empty / loading */
.empty, .loading-block {
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
}
.empty h4 {
  font-size: var(--t-md);
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  margin: 0 auto var(--s-3);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE LAYER (added 2026-06-16 — Mobile Phase 0).                     */
/* Purely ADDITIVE. No token above this line was changed. These define the   */
/* canonical breakpoint + tap-target + safe-area contract shared by every    */
/* page. See docs/RESPONSIVE.md for the parity-system rules.                 */
/*                                                                            */
/* Breakpoint contract (Seekly, vanilla) — VALIDATED 2026-06-16:             */
/*   phone   ≤ 599px                                                         */
/*   tablet  600–1023px                                                      */
/*   desktop ≥ 1024px     ← PRIMARY SWITCH is 1024px (was 900)               */
/* Why 1024, not 900: real-estate leaders (Zillow/Redfin/Compass) switch to  */
/* the side-by-side map+list two-pane at ~1024px and use the map + bottom-    */
/* sheet layout below that. 600/768 are internal sub-breakpoints only. See    */
/* ruleset_validation_2026_06_16.md item #4.                                 */
/* The JS `isMobile()` helper (mobile.js) mirrors --bp-desktop-min and        */
/* toggles body.is-mobile / body.is-tablet. CSS may key off EITHER the body   */
/* class or a raw @media query; both must agree on these numbers.            */
/*                                                                            */
/* HOVER GATING: any :hover affordance that should NOT fire on touch must be */
/* wrapped in `@media (hover: hover)`. Touch devices report (hover: none) /  */
/* (pointer: coarse) and would otherwise get sticky/stuck hover states. New  */
/* hover rules in page CSS should follow this convention.                    */
/* ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Breakpoint custom properties — single source of truth for the numbers.
     Custom props can't be used inside a bare @media query test, so page CSS
     still writes the literal px in @media (…), but these document the
     contract and can be read from JS via getComputedStyle if ever needed. */
  --bp-phone-max: 599px;     /* ≤ this = phone */
  --bp-tablet-min: 600px;    /* tablet band start */
  --bp-tablet-max: 1023px;   /* tablet band end */
  --bp-desktop-min: 1024px;  /* ≥ this = desktop (PRIMARY SWITCH) */

  /* Touch / tap-target tokens. Build default = 48px (satisfies Apple HIG
     44pt + Material 3 48dp). WCAG 2.2 SC 2.5.8 AA hard floor is 24x24 CSS px —
     never go below that. 48px is the design target for any control that must
     be comfortably tappable on a phone. Desktop controls keep their existing
     sizes; these tokens are opt-in for mobile-gated rules. */
  --tap-min: 48px;           /* minimum touch target edge (build default) */
  --tap-min-sm: 40px;        /* dense secondary controls (still finger-safe; > 24px AA floor) */

  /* Viewport-height units (validated 2026-06-16): use --svh for FIXED full-
     height sections (sheet detents, heroes) so they don't jump when the mobile
     toolbar shows/hides; use dvh directly for elements that must track the live
     viewport. svh has no env() fallback need — it resolves everywhere modern. */
  --svh: 1svh;               /* 1% of the small viewport height (toolbar-shown) */

  /* Mobile spacing — slightly tighter gutters than desktop --s-* on phones. */
  --m-gutter: 16px;          /* page edge padding on phone */
  --m-gap: 12px;             /* default stack gap on phone */

  /* Safe-area insets (notch / home-indicator). Resolve to 0 on devices that
     don't expose them, so they're safe to add unconditionally. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* === auth-ui.css === */
/* auth-ui.css — Top-bar avatar pill + dropdown (Variant A).
 *
 * Sourced from Seekly-Mocks/topbar-avatar-pill.html (the canonical mock James
 * picked). Loaded by home.html + search.html (any page that wants the
 * signed-in identity chip).
 *
 * The pill is hooked up by auth-ui.js: it fetches /auth/me on page load,
 * populates avatar initials + email, then wires open/close on click + outside-
 * click + ESC. Admin link is hidden unless /auth/me returns is_admin=true.
 *
 * Color tokens come from design-system.css (--ink, --line, --bg-soft, etc.).
 */

/* Wrapper that anchors the dropdown positioning. */
.pill-wrap {
  position: relative;
  margin-left: 12px;
}

/* The pill itself — compact identity chip in the top-bar nav. */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--fast);
  font: inherit;
  color: var(--ink);
}
.user-pill:hover {
  background: #fff;
  border-color: var(--ink-3, #2c3a5e);
}
.user-pill[hidden] { display: none; }

/* Round avatar with the user's 2-letter initials. */
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #c08a4d), var(--accent-dark, #8a5f30));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* Truncated email next to the avatar. Hidden on narrow screens. */
.user-pill-email {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-pill-caret {
  font-size: 9px;
  color: var(--muted);
  margin: 0 6px 0 -2px;
}

/* Dropdown menu — absolute-positioned under the pill. */
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.22);
  min-width: 240px;
  padding: 6px;
  z-index: 1000;
}
.user-menu[hidden] { display: none; }

.user-menu-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.user-menu-header strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.user-menu-header small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.user-menu a,
.user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--body);
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.user-menu a:hover,
.user-menu button:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.user-menu a[hidden],
.user-menu button[hidden] {
  display: none;
}

.user-menu .signout {
  color: #b3261e;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 10px;
  border-radius: 0 0 6px 6px;
}
.user-menu .signout:hover {
  background: #fde7e7;
  color: #8a1d17;
}

/* Mobile: hide email + caret, show avatar only. */
@media (max-width: 640px) {
  .user-pill-email,
  .user-pill-caret {
    display: none;
  }
  .user-pill {
    padding: 4px;
  }
}

/* 2026-05-29 — Public-read surface.
 * `<html data-seekly-auth="anonymous">` is set by auth-ui.js once /auth/me
 * resolves. Pages that contain save/share/note controls hide those for
 * anonymous viewers. The save-search + my-homes pills become a single
 * "Sign in to save" CTA via the .user-signin-cta injected by auth-ui.js.
 */

/* The standalone Sign In CTA injected into .pill-wrap when anonymous. */
.user-signin-cta {
  /* base styles set inline in auth-ui.js so this works even without CSS load */
  cursor: pointer;
}
.user-signin-cta:hover { background: #0848a3 !important; }

/* Hide write-only top-bar buttons when anonymous. */
:root[data-seekly-auth="anonymous"] #save-search-btn,
:root[data-seekly-auth="anonymous"] #my-homes-btn,
:root[data-seekly-auth="anonymous"] #notifications-btn,
:root[data-seekly-auth="anonymous"] #saved-search-pill {
  display: none !important;
}

/* Hide rating + save halo column (per-property quick actions) when anonymous.
 * The halo lives on the right edge of the property modal and is the primary
 * surface for save/list/rate. None of that is meaningful pre-sign-in. */
:root[data-seekly-auth="anonymous"] #rating-halo,
:root[data-seekly-auth="anonymous"] .rating-halo,
:root[data-seekly-auth="anonymous"] #lot-search-save,
:root[data-seekly-auth="anonymous"] [data-needs-auth] {
  display: none !important;
}

/* property.html (iframe-rendered) save / share buttons. These live inside the
 * iframe so the iframe's auth-ui.js sets `<html data-seekly-auth="anonymous">`
 * independently — same CSS selector pattern works because each frame has its
 * own document root. */
:root[data-seekly-auth="anonymous"] #btn-save-listing,
:root[data-seekly-auth="anonymous"] #btn-share {
  display: none !important;
}

/* Generic "Sign in to save" prompt. Use `class="signin-prompt"` on any
 * element you want shown ONLY when anonymous. Pair with [data-needs-auth]
 * to swap controls. */
.signin-prompt { display: none; }
:root[data-seekly-auth="anonymous"] .signin-prompt { display: inline-flex; }
:root[data-seekly-auth="anonymous"] .signin-prompt-block { display: block; }

/* === search.css === */
/* ============== Search page ============== */

.search-body { background: var(--bg); }

/* Search bar */
.searchbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  position: relative;
  z-index: 50;
}

/* Chips bar (active filters + areas) */
.chips-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
}
.chips-inner {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
}
.chips-inner:empty::before {
  content: "Add a city, ZIP, MLS area, or neighborhood to start.  Filters you apply will appear here.";
  color: var(--muted-2);
  font-size: var(--t-sm);
  font-style: italic;
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-soft-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: default;
  transition: all var(--fast);
  white-space: nowrap;
  max-width: 320px;
}
.search-chip .chip-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-right: 4px;
}
.search-chip.area-chip { background: var(--accent-soft); color: var(--accent-dark); border-color: rgba(10,91,204,0.2); }
.search-chip.area-chip .chip-type { color: var(--accent); }
.search-chip.filter-chip { background: var(--bg-soft-2); color: var(--ink); }
/* (2026-05-27) .search-chip.strategy-chip removed — Investment Strategies
   sidebar section deleted; no Active-Filters chip row paints strategy chips. */
.search-chip.owner-chip { background: var(--amber-soft); color: var(--amber); border-color: rgba(180,83,9,0.2); }
.search-chip.owner-chip .chip-type { color: var(--amber); }
/* Investment Search (QS) chips — green tint + small "QS" badge so they read
   visually as Quad-Search-scoped pills rather than top-bar MLS pills. */
.search-chip.qs-chip { background: var(--green-soft); color: var(--green); border-color: rgba(14,127,62,0.25); }
.search-chip.qs-chip .chip-type { color: var(--green); }
.search-chip .chip-badge-qs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-right: 2px;
}

.search-chip .chip-x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.06);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: all var(--fast);
  line-height: 1;
}
.search-chip .chip-x:hover { background: var(--red); color: white; }
.search-chip .chip-edit {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px;
  color: var(--muted);
  font-size: 14px;
}

/* Suggest dropdown */
.suggest-dropdown {
  position: absolute;
  top: 100%;
  left: 18px;
  right: 18px;
  margin-top: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  z-index: 100;
  max-height: 380px;
  overflow-y: auto;
}
/* Sectioned dropdown — Redfin-style. Section headers group rows by category;
   per-row icons color-code by category; matched query substring is bolded. */
.suggest-section {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-soft);
  border-top: 1px solid var(--line-2);
}
.suggest-section:first-child { border-top: 0; }
.suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--fast);
}
.suggest-item:hover, .suggest-item.active { background: var(--bg-soft); }
.suggest-item-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-soft-2);
  color: var(--muted);
}
.suggest-item-icon.place           { background: #DBEAFE; color: #1E40AF; }
.suggest-item-icon.school_district { background: #EDE9FE; color: #5B21B6; }
.suggest-item-icon.address         { background: #FEE2E2; color: #991B1B; }
.suggest-item-icon.zip             { background: #E0E7FF; color: #4338CA; }
.suggest-item-icon.apn             { background: #FEF3C7; color: #92400E; }
.suggest-item-content {
  flex: 1;
  min-width: 0;
}
.suggest-display {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--t-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-display em {
  font-style: normal;
  font-weight: 700;
  background: #FEF3C7;
  padding: 0 1px;
  border-radius: 2px;
}
.suggest-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: var(--t-sm);
}

/* Empty state for results */
.results-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px 40px;
}
.results-empty-state .icon {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.4;
}
.results-empty-state h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.results-empty-state p {
  color: var(--muted);
  font-size: var(--t-md);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.5;
}
.searchbar-inner {
  display: flex;
  gap: var(--s-6);
  align-items: center;
  flex-wrap: wrap;
}
.searchbar-input {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
  min-width: 380px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 4px 4px 18px;
  transition: all var(--fast);
}
.searchbar-input:focus-within {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.searchbar-input input {
  border: 0;
  background: transparent;
  font-size: var(--t-md);
  padding: 12px 8px;
  flex: 1;
}
.searchbar-input input:focus { box-shadow: none; }
.searchbar-input .btn { border-radius: var(--r-pill); padding: 10px 18px; }

.quick-picks {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Layout */
.layout {
  display: grid;
  /* Two children: .results (left) + .map-col (right). 2026-05-14c: listings
     track set to 35% (James after 30% iteration). Map gets the remaining
     ~65%. This MUST match the inline override in setView() so the initial
     page-load layout and post-toggle layout agree (no Mapbox resize flash,
     no marker-bounds-stale bugs). */
  grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  height: calc(100vh - 240px);
  min-height: 540px;
}
/* When no search is active, the listings column stays visible (2-track layout
   preserved) but shows an empty-state placeholder instead of cards. Map-only
   and Explore modes collapse via their own rules (setView() inline + body
   class). 2026-05-13: removed `grid-template-columns: 1fr` + `.results
   display: none` here — that was collapsing Split/List into a ghost layout
   whenever no area was picked. */
.layout.no-search .map-col { border-left: 0; }
.layout.no-search .results-head { opacity: 0.5; }

/* Filters */
.filters {
  border-right: 1px solid var(--line);
  padding: 20px 18px;
  background: var(--bg);
}
.filter-block {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}
.filter-block:last-of-type { border-bottom: 0; }
.filter-block.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.filter-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.range-pair {
  display: flex;
  align-items: center;
  gap: 6px;
}
.range-pair input {
  flex: 1;
  padding: 8px 10px;
  font-size: var(--t-sm);
}
.range-sep { color: var(--muted-2); font-weight: 600; padding: 0 2px; }

/* (2026-05-27) .strategy-grid / .strat / .strat:hover / .strat.active /
   .strat-dot CSS removed — Investment Strategies sidebar section deleted
   (per James: "delete all of the Investment Strategies putting colors of
   the pills on the map."). */

.row-check {
  display: flex;
  gap: 20px;
  padding: 14px 0;
}
.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  cursor: pointer;
}
.check input { accent-color: var(--accent); }

.filter-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 18px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: -20px;
  background: var(--bg);
  margin-inline: -18px;
  padding-inline: 18px;
}
.filter-footer .btn-accent { flex: 1; }

/* Results */
.results {
  padding: 22px 24px 40px;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
}
.results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  /* Sticky so the header stays in view as the user scrolls. The .results
     pane is itself the scroll container, so top:0 anchors to its top. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  margin: 0 -16px 12px;
}
.results-count {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.results-sub {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 3px;
}
.results-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.results-controls select {
  padding: 7px 10px;
  font-size: var(--t-sm);
  background: var(--bg);
  border-radius: var(--r-md);
  max-width: 180px;
}

/* Lock list button — sits on the results header above the listings grid.
   Active state = list is LOCKED (frozen as user pans/zooms). Default ON. */
.lock-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.lock-list-btn:hover { border-color: #9CA3AF; background: #F9FAFB; }
.lock-list-btn.active {
  background: #2563EB; color: #fff; border-color: #2563EB;
}
.lock-list-btn.active:hover { background: #1D4ED8; border-color: #1D4ED8; }
.lock-list-btn.unlocked {
  color: #B45309; border-color: #FBBF24; background: #FFFBEB;
}
.lock-list-btn.unlocked:hover { background: #FEF3C7; }
.lock-list-btn svg { flex-shrink: 0; }

.segmented {
  display: inline-flex;
  background: var(--bg-soft-2);
  border-radius: var(--r-md);
  padding: 3px;
}
.seg {
  padding: 5px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--t-xs);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--fast);
}
.seg.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--sh-1);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 across (was 3) */
  gap: 12px;
}
@media (max-width: 720px) {
  .results-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* List view — 2026-05-13 simple-swap (rebuild #3).                         */
/* Same container as Split, same width, same scroll. The ONLY change is     */
/* that .results-grid's children swap from 2-col cards → flat .lrow rows.   */
/* No <table>, no sticky thead, no z-index magic, no layout shifts.         */
/* ════════════════════════════════════════════════════════════════════════ */
.results-grid.list-view {
  grid-template-columns: 1fr;
  gap: 0;
}

/* ── Sticky stack wrapper (Phase 3 — 2026-05-14) ─────────────────────────── */
/* Wraps the preview card + column header so they stick as one unit. The      */
/* wrapper is sticky at top:0 inside the .results scroll container; both      */
/* children stack normally inside it. Hidden until list view is active.       */
.list-sticky-stack { display: none; }
.results.list-view-active .list-sticky-stack {
  display: block;
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg);
  margin: 0 -16px;
}

/* ── Two-click preview card (Phase 3 — 2026-05-14) ───────────────────────── */
/* Slim card pinned above the column header. Empty by default; visible when   */
/* .results has both .list-view-active AND .has-preview (JS toggles the       */
/* latter after the user 1-clicks a row).                                     */
.preview-card { display: none; }
.results.list-view-active.has-preview .preview-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 2px solid var(--line);
  min-height: 180px;
  max-height: 300px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.preview-card .pvc-photo {
  background: var(--bg-soft) center/cover no-repeat;
  border-radius: var(--r-md);
  position: relative;
  cursor: pointer;
  min-height: 160px;
  overflow: hidden;
}
.preview-card .pvc-photo.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: default;
}
.preview-card .pvc-photo .pvc-openhouse {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #10B981;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 1;
}
.preview-card .pvc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  position: relative;
  padding-right: 28px;  /* room for the close X */
}
.preview-card .pvc-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background var(--fast), color var(--fast);
}
.preview-card .pvc-close:hover { background: var(--bg-soft); color: var(--ink); }
.preview-card .pvc-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.preview-card .pvc-bbs {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.preview-card .pvc-addr {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-card .pvc-broker {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-card .pvc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 4px;
  font-size: 11px;
}
.preview-card .pvc-stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--line-2);
}
.preview-card .pvc-stat-label { color: var(--muted); }
.preview-card .pvc-stat-val { color: var(--ink); font-weight: 600; }
.preview-card .pvc-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--accent, #0A5BCC);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--fast);
  align-self: flex-start;
}
.preview-card .pvc-cta:hover { filter: brightness(1.08); }

/* Highlight the row the preview is currently showing. */
.lrow.is-previewing {
  background: rgba(10, 91, 204, 0.08);
  box-shadow: inset 3px 0 0 var(--accent, #0A5BCC);
}

/* Mobile / narrow: stack photo above body. */
@media (max-width: 640px) {
  .results.list-view-active.has-preview .preview-card {
    grid-template-columns: 1fr;
    max-height: 420px;
  }
}

/* ── List-view column header (Phase 1 — 2026-05-14) ──────────────────────── */
/* Sticky header row above the .lrow list. Hidden by default; .results gets  */
/* .list-view-active when _currentView === 'list' (setView() toggles it).    */
/* Grid template MUST mirror .lrow exactly so header cells line up with row  */
/* cells below.                                                              */
.lrow-header { display: none; }
.results.list-view-active .lrow-header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 54px 80px 38px 38px 56px 56px 42px 78px 64px;
  gap: 6px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
  /* Stickyness handled by parent .list-sticky-stack wrapper. */
}
.lrowh-cell {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--fast);
}
.lrowh-check { display: inline-block; }
.lrowh-cell:hover { color: var(--ink); }
.lrowh-cell.is-active { color: var(--accent, #0A5BCC); font-weight: 700; }

/* Right-align cells that contain right-aligned numeric data in .lrow. */
.lrowh-price,
.lrowh-beds,
.lrowh-baths,
.lrowh-sf,
.lrowh-ppsf,
.lrowh-dom { justify-content: flex-end; text-align: right; }

/* Sort indicator — neutral by default, filled triangle when active. */
.lrowh-ind {
  display: inline-block;
  width: 8px;
  font-size: 9px;
  line-height: 1;
  color: var(--muted);
  opacity: 0.5;
}
.lrowh-cell:hover .lrowh-ind { opacity: 0.85; }
.lrowh-cell.is-active .lrowh-ind { opacity: 1; color: var(--accent, #0A5BCC); }
.lrowh-cell[data-dir="desc"] .lrowh-ind::after { content: "▼"; }
.lrowh-cell[data-dir="asc"]  .lrowh-ind::after { content: "▲"; }
.lrowh-cell:not([data-dir]) .lrowh-ind::after { content: ""; }

/* Carry-over PPSF utility used on cards (kept; not deleted accidentally). */
.lcard-ppsf {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* Map marker hover highlight, used by both card hover + row hover. */
/* Phase 2 (2026-05-14) — beefed up visual so the linked pill is unmistakable. */
.mapboxgl-marker.row-hover {
  transform-origin: center bottom;
  z-index: 99 !important;
}
.mapboxgl-marker.row-hover svg,
.mapboxgl-marker.row-hover { filter: drop-shadow(0 0 6px rgba(10,91,204,0.7)); }
/* Apply the visible scale to the inner marker (.marker), not the wrapper
   element (which Mapbox uses for absolute positioning — transforms on it
   shift the pin off the geo point). Deep-zoom variant duplicated for ID-
   specificity parity with #map.deep-zoom .marker (which would otherwise
   clobber this box-shadow).
   Two-render-path note: appendMapMarkers wraps .marker in .marker-wrap so
   .marker is a CHILD of .mapboxgl-marker. renderMap puts the marker element
   directly into Mapbox so .marker IS the same element as .mapboxgl-marker.
   Ship BOTH descendant (` `) and same-element (no whitespace) variants. */
.mapboxgl-marker.row-hover .marker,
.mapboxgl-marker.row-hover.marker,
#map.deep-zoom .mapboxgl-marker.row-hover .marker,
#map.deep-zoom .mapboxgl-marker.row-hover.marker {
  /* See pill-selected note below: !important on box-shadow only (transform
     stays clean so Mapbox positioning continues to work). */
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--accent, #0A5BCC), 0 4px 14px rgba(10,91,204,0.45) !important;
  z-index: 99;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

/* Reverse direction: map marker hovered → list row highlighted. */
.lrow.is-hovered,
.lcard.is-hovered {
  background: rgba(10, 91, 204, 0.06);
  box-shadow: inset 3px 0 0 var(--accent, #0A5BCC);
}

/* Split-mode "selected pill" state (2026-05-26) — set by card-click first
   stage. Persists until user clicks a different card or opens the modal.
   Layered with .row-hover (which may also be set); both add visual weight.

   Two issues this rule had to address:
   1. Specificity: `#map.deep-zoom .marker` (1,1,0 ID-level) was overriding
      class-only `.mapboxgl-marker.pill-selected .marker` (0,3,0) at deep
      zoom — fixed by adding `#map.deep-zoom` prefix variants.
   2. DOM structure split: renderMap creates a single `<div class="marker
      ...">` and hands it to Mapbox (which adds `mapboxgl-marker` to the
      SAME element). appendMapMarkers wraps `.marker` in `.marker-wrap`
      first so `.marker` is a child. Ship BOTH descendant (` `) and
      same-element (no whitespace) variants to cover both paths.
   outline:none guards against any browser focus ring overlaying the gold. */
.mapboxgl-marker.pill-selected {
  z-index: 100 !important;
}
.mapboxgl-marker.pill-selected .marker,
.mapboxgl-marker.pill-selected.marker,
#map.deep-zoom .mapboxgl-marker.pill-selected .marker,
#map.deep-zoom .mapboxgl-marker.pill-selected.marker {
  /* !important on box-shadow only: empirically the base `.marker` rule was
     winning despite higher specificity in this rule (Chrome MCP test in
     prod showed getComputedStyle returning the base black drop-shadow).
     Suspect cause: a downstream rule somewhere in the 1200-rule stylesheet
     overrides via a path we couldn't cheaply trace. !important on box-shadow
     is the safe escape hatch. NOTE: `transform` is NOT !important because
     Mapbox sets `transform: translate(...)` INLINE to position the marker
     on the map. !important on `transform` would clobber positioning and
     drop all pills to (0,0). The scale doesn't visually need to win — the
     gold ring around the original-size pill is the user-feedback signal. */
  transform: scale(1.22);
  box-shadow: 0 0 0 3px #FBBF24, 0 6px 18px rgba(0, 16, 46, 0.55) !important;
  outline: none !important;
  z-index: 100;
  transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;
}

/* ── Flat row (.lrow) ─────────────────────────────────────────────────── */
/* CSS Grid with explicit tight column tracks — Redfin-style density.       */
/* Cols: [✓] [Address] [Status] [Price] [Beds] [Baths] [SqFt] [$/sf] [DOM]   */
/*       [Price vs Similar] [Type]                                          */
/* Each cell truncates with ellipsis. Address gets the flex track (1fr).    */
.lrow {
  display: grid;
  /* Tightened columns + 6px gap so all 11 cells fit inside the narrower
     listings column. Address takes the flex slack. */
  grid-template-columns: 24px minmax(0, 1fr) 54px 80px 38px 38px 56px 56px 42px 78px 64px;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  cursor: pointer;
  transition: background var(--fast);
  min-height: 34px;
}
.lrow:hover { background: var(--bg-soft); }
.lrow.is-selected { background: rgba(0, 16, 46, 0.04); }
.lrow.is-selected:hover { background: rgba(0, 16, 46, 0.07); }
.lrow.last-viewed { background: var(--bg-soft-2); }

/* Column cells — all truncate by default. Address overrides with its own */
/* min-width: 0 so the 1fr track can actually shrink as needed.            */
.lrow > * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lrow-check  { display: flex; align-items: center; justify-content: center; overflow: visible; }
.lrow-addr   { overflow: hidden; }
.lrow-addr b { color: var(--ink); font-weight: 600; }
.lrow-addr .lrow-locality { color: var(--muted); margin-left: 6px; }
.lrow-status { text-align: left; }
.lrow-price  { text-align: right; font-weight: 700; }
.lrow-beds,
.lrow-baths,
.lrow-sf,
.lrow-ppsf,
.lrow-dom    { text-align: right; color: var(--ink-2); }
.lrow-vs     { text-align: left; overflow: visible; }
.lrow-type   { text-align: left; }

.lrow .muted { color: var(--muted); }

/* Status pill in-row (badge re-use from card vocabulary) */
.lrow-status .badge { font-size: 10px; padding: 2px 6px; }

/* Price vs Similar pill — same color vocabulary as card pill */
.lrow-vs-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  background: #F3F4F6;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.lrow-vs-btn b { font-weight: 700; }
.lrow-vs-btn.below { background: #DCFCE7; color: #047857; border-color: rgba(4,120,87,0.25); }
.lrow-vs-btn.above { background: #FEF3C7; color: #92400E; border-color: rgba(146,64,14,0.25); }
.lrow-vs-btn:hover { filter: brightness(0.95); }

/* Home type chip — list-view row variant.
   2026-05-27: 5-color property-type palette applied via .ptp-* modifier
   set by _renderItems() — base rule stays as legacy fallback. */
.lrow-type-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  color: #FFFFFF;
  background: #2E5099; /* default = SFR shade */
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lrow-type-chip.ptp-multi    { background: #14306B; color: #FFFFFF; border-color: transparent; }
.lrow-type-chip.ptp-sfr      { background: #2E5099; color: #FFFFFF; border-color: transparent; }
.lrow-type-chip.ptp-townhome { background: #5C7AB5; color: #FFFFFF; border-color: transparent; }
.lrow-type-chip.ptp-condo    { background: #96A8CA; color: #FFFFFF; border-color: transparent; }
.lrow-type-chip.ptp-land     { background: #FFFFFF; color: #14306B; border-color: #14306B; }

/* Assessed-price label prefix (off-market parcels) */
.lrow-asd {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 3px;
}

/* Checkbox — hidden native input + custom box. */
.lrow-cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.lrow-cb input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.lrow-cb-box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.lrow-cb:hover .lrow-cb-box { border-color: var(--ink); }
.lrow-cb input:checked + .lrow-cb-box {
  background: var(--ink);
  border-color: var(--ink);
}
.lrow-cb input:checked + .lrow-cb-box::after {
  content: '';
  width: 4px; height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Section header (Selected / All Properties) inside .results-grid.list-view */
.lrow-section-head {
  padding: 10px 12px;
  background: var(--bg-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lrow-section-head.selected {
  color: #00102E;
  border-top-color: var(--ink);
  background: rgba(0, 16, 46, 0.05);
}
.lrow-section-count {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: 10px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--line);
}
.lrow-section-head.selected .lrow-section-count { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Listing card */
/* Editorial-luxury card — minimal chrome, hairline border, photo + 4 stats + comp delta */
.lcard {
  background: var(--bg);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
  position: relative;
}
.lcard:hover {
  border-color: var(--ink-3);
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}
.lcard-img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-soft-2), var(--bg-soft));
  position: relative;
  overflow: hidden;
}
.lcard-img-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 600ms ease;
}
.lcard:hover .lcard-img-inner { transform: scale(1.04); }
.lcard-img.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lcard-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  max-width: calc(100% - 20px);
}
.lcard-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250,250,247,0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--fast), transform var(--fast);
  border: 0;
  box-shadow: 0 2px 6px rgba(0,16,46,0.10);
}
.lcard:hover .lcard-heart { opacity: 1; }
.lcard-heart:hover { transform: scale(1.08); }

.lcard-body { padding: 10px 12px 12px; }
.lcard-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.lcard-price {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.deal-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--r-md);
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.deal-badge .ds {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.deal-badge .dl {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
  opacity: 0.85;
}
.deal-badge small {
  display: block;
  font-size: 9px;
  margin-top: 2px;
  opacity: 0.85;
}
.deal-badge.deal-hot { background: var(--green-soft); color: var(--green); }
.deal-badge.deal-good { background: var(--accent-soft); color: var(--accent-dark); }
.deal-badge.deal-fair { background: var(--bg-soft-2); color: var(--ink-3); }
.deal-badge.deal-low { background: var(--bg-soft-2); color: var(--muted); }
.lcard-price .unit {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}
.lcard-addr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  margin-top: 0;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.lcard-addr .muted {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  display: block;
  font-weight: 500;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Compact 4-stat row: beds · baths · sf · lot sf */
.lcard-stats {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
}
.lcard-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.lcard-stats b {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: normal;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* Comp-median delta — only signal of value, replaces price + deal score */
.lcard-vsmedian {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.lcard-vsmedian.below { color: var(--accent-moss); }
.lcard-vsmedian.above { color: var(--muted-2); }
.lcard-meta {
  display: flex;
  gap: 4px;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.lcard-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.lcard-meta > span + span::before {
  content: "·";
  margin-right: 4px;
  color: var(--line);
}
/* Home-type pill on card-meta row. Compact, slightly weighted so the
   subtype reads at a glance ("Condo" / "House" / "Townhome").
   2026-05-27: 5-color property-type palette applied via .ptp-* modifier
   set by listingCard() — base rule stays as legacy fallback. */
.lcard-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: #2E5099; /* default = SFR shade */
  line-height: 1.4;
}
.lcard-meta-pill.ptp-multi    { background: #14306B; color: #FFFFFF; }
.lcard-meta-pill.ptp-sfr      { background: #2E5099; color: #FFFFFF; }
.lcard-meta-pill.ptp-townhome { background: #5C7AB5; color: #FFFFFF; }
.lcard-meta-pill.ptp-condo    { background: #96A8CA; color: #FFFFFF; }
.lcard-meta-pill.ptp-land     { background: #FFFFFF; color: #14306B; border: 1.5px solid #14306B; padding: 0.5px 7.5px; }
.lcard-meta-dom {
  color: var(--muted);
}
/* HOA fee on card-meta row. Same muted tone as DOM; only shows when
   AssociationFee > 0 (callers skip the chip entirely otherwise). */
.lcard-meta-hoa {
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 2026-06-11 card redesign — grey band header + body-top zoom + neighborhood */
/* ════════════════════════════════════════════════════════════════════════ */
/* Grey band under the photo: ACTIVE + type pill (left), comp delta + DOM
   (right). Replaces the old in-body status row + bottom meta row. */
.lcard-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.lcard-band-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}
.lcard-band-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  text-align: right;
}
.lcard-band-dom { font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }
/* The comp delta lives in the band now — strip the old standalone-row
   border/spacing it carried when it sat above the stats. */
.lcard-band-right .lcard-vsmedian {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background: none;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.lcard-band-right .lcard-vsmedian.below { color: var(--accent-moss); }
.lcard-band-right .lcard-vsmedian.above { color: var(--muted-2); }
.lcard-band-right .lcard-vsmedian.neutral { color: var(--muted); }

/* Body: info (price/address/city·neighborhood) left, zoom button top-right.
   Stats span full width below. */
.lcard-body-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.lcard-info { min-width: 0; flex: 1; }
/* Neighborhood sits after the ZIP on the address line, in brand blue so it
   reads as distinct from the city. */
.lcard-hood { color: #2563EB; font-weight: 700; }

.lcard-zoom {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  color: #2563EB;
  border: 1px solid #BFD3F5;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.lcard-zoom:hover { background: #EFF5FF; }
.lcard-zoom.is-zoomed { background: #2563EB; color: #fff; border-color: #2563EB; }
.lcard-zoom.is-zoomed:hover { background: #1D4ED8; border-color: #1D4ED8; }
.lcard-zoom svg { flex-shrink: 0; }
.lcard-scores {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Strategy badge on card */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: rgba(11,15,20,0.88);
  color: white;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.badge.b-green { background: var(--green); }
.badge.b-blue { background: var(--accent); }
.badge.b-amber { background: var(--amber); }
.badge.b-purple { background: var(--purple); }
.badge.b-ink { background: var(--ink); }

/* Score tag (in card footer) */
.tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--bg-soft-2);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* (2026-05-27) Strategy tag colors removed (.tag.tic_arbitrage etc) —
   Investment Strategies sidebar section deleted; no callers paint these
   classes onto listing-card tag pills anymore. */

/* Paging */
.paging {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-top: 30px;
  padding: 20px;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* Map column */
.map-col {
  position: relative;
  background: var(--bg-soft);
}
#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-legend {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
  border: 1px solid var(--line);
  max-width: 240px;
}
.legend-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: var(--t-xs);
  color: var(--body);
}
.legend-grid span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ──────────── Parcel Detail Modal (JSON-driven, no iframe) ──────────── */
.parcel-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.parcel-modal.open { display: block; }
.parcel-modal .pm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.parcel-modal .pm-content {
  position: absolute; top: 4vh; left: 50%; transform: translateX(-50%);
  width: min(1100px, 96vw); max-height: 92vh;
  background: var(--bg, #fff); color: var(--text, #0B0F14);
  border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.parcel-modal .pm-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px 12px; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.parcel-modal .pm-title h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.parcel-modal .pm-subheader {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted, #6b7280);
}
.parcel-modal .pm-pill {
  padding: 2px 8px; border-radius: 999px; background: var(--accent-soft, #eef2ff);
  color: var(--accent, #4f46e5); border: 1px solid var(--accent-border, #c7d2fe);
  font-weight: 600; font-size: 11px;
}
.parcel-modal #pm-rso-pill { background: rgba(220,38,38,.08); color: #b91c1c; border-color: rgba(220,38,38,.25); }
.parcel-modal .pm-pill--small { font-size: 10px; padding: 1px 6px; }
.parcel-modal .pm-pill--gold     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.parcel-modal .pm-pill--silver   { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.parcel-modal .pm-pill--partial  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.parcel-modal .pm-pill--not_loaded { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.parcel-modal .pm-pill--zone_not_found { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.parcel-modal .pm-header-actions { display: flex; gap: 8px; align-items: center; }
.parcel-modal .pm-btn-ghost {
  padding: 6px 10px; border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 6px; text-decoration: none; color: inherit; font-size: 12px;
}
.parcel-modal .pm-btn-ghost:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }
.parcel-modal .pm-close {
  background: transparent; border: none; cursor: pointer; font-size: 26px; line-height: 1;
  color: var(--text-muted, #6b7280); padding: 0 6px;
}
.parcel-modal .pm-close:hover { color: var(--text, #0B0F14); }

.parcel-modal .pm-tabs {
  display: flex; gap: 0; padding: 0 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
  overflow-x: auto;
}
.parcel-modal .pm-tabs button {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 14px; font-size: 13px; font-weight: 500;
  color: var(--text-muted, #6b7280); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.parcel-modal .pm-tabs button:hover { color: var(--text, #0B0F14); }
.parcel-modal .pm-tabs button.active {
  color: var(--accent, #4f46e5); border-bottom-color: var(--accent, #4f46e5);
}

.parcel-modal .pm-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.parcel-modal .pm-tab { display: none; }
.parcel-modal .pm-tab--active { display: block; }

.parcel-modal .pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.parcel-modal .pm-card {
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 10px; padding: 14px 16px;
  background: var(--surface, #fff);
}
.parcel-modal .pm-card--wide { grid-column: 1 / -1; }
.parcel-modal .pm-card h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #6b7280); margin: 0 0 10px; font-weight: 700;
}
.parcel-modal .pm-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.parcel-modal .pm-stats td { padding: 4px 0; vertical-align: top; }
.parcel-modal .pm-stats td:first-child { color: var(--text-muted, #6b7280); width: 50%; }
.parcel-modal .pm-stats td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ── Estimated Value (AVM) card on Overview tab ────────────────────────── */
.parcel-modal .pm-avm-card { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%); }
.parcel-modal .pm-avm-tiles {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin: 4px 0 10px;
}
.parcel-modal .pm-avm-tile {
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px; padding: 12px 14px; background: #fff;
  display: flex; flex-direction: column; gap: 4px;
}
.parcel-modal .pm-avm-tile--primary {
  border-color: #0d9488;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.10);
}
.parcel-modal .pm-avm-tile__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted, #6b7280); font-weight: 700;
}
.parcel-modal .pm-avm-tile--primary .pm-avm-tile__label { color: #0d9488; }
.parcel-modal .pm-avm-tile__value {
  font-size: 22px; font-weight: 700; color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.parcel-modal .pm-avm-tile--primary .pm-avm-tile__value { color: #065f46; }
.parcel-modal .pm-avm-tile__sub {
  font-size: 11px; color: var(--text-muted, #6b7280);
}
.parcel-modal .pm-avm-meta { font-size: 11px; margin-top: 2px; }
.parcel-modal .pm-pill--high { background: #d1fae5; color: #065f46; }
.parcel-modal .pm-pill--medium { background: #dbeafe; color: #1e40af; }
.parcel-modal .pm-pill--directional { background: #fef3c7; color: #92400e; }
.parcel-modal .pm-pill--insufficient { background: #fee2e2; color: #991b1b; }
@media (max-width: 640px) {
  .parcel-modal .pm-avm-tiles { grid-template-columns: 1fr; }
}

.parcel-modal .pm-buildings, .parcel-modal .pm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.parcel-modal .pm-buildings th, .parcel-modal .pm-table th {
  background: var(--bg, #f9fafb); color: var(--text-muted, #6b7280);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.parcel-modal .pm-buildings td, .parcel-modal .pm-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
  font-variant-numeric: tabular-nums;
}
.parcel-modal .pm-buildings td.num, .parcel-modal .pm-table td.num,
.parcel-modal .pm-buildings th.num, .parcel-modal .pm-table th.num { text-align: right; }
.parcel-modal .pm-legal { font-size: 12px; line-height: 1.5; }

.parcel-modal .pm-summary-bar {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px;
  background: var(--bg, #f9fafb); border-radius: 8px; font-size: 12px;
}
.parcel-modal .pm-summary-bar .stat { display: flex; flex-direction: column; }
.parcel-modal .pm-summary-bar .stat .v { font-size: 18px; font-weight: 700; color: var(--text, #0B0F14); }
.parcel-modal .pm-summary-bar .stat .l { color: var(--text-muted, #6b7280); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

.parcel-modal .muted { color: var(--text-muted, #6b7280); }
.parcel-modal .small { font-size: 11px; }

/* Citations + warnings */
.parcel-modal .pm-citations ul, .parcel-modal .pm-warnings ul {
  margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.7;
}
.parcel-modal .pm-warnings { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.25); }
.parcel-modal .pm-warnings h3 { color: #b45309; }

/* Chat */
.parcel-modal .pm-chat-canned {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.parcel-modal .pm-chat-canned button {
  background: var(--bg, #f9fafb); border: 1px solid var(--border, rgba(0,0,0,0.1));
  padding: 6px 12px; border-radius: 16px; font-size: 12px; cursor: pointer;
  color: var(--text, #0B0F14);
}
.parcel-modal .pm-chat-canned button:hover { background: var(--accent-soft, #eef2ff); border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
.parcel-modal .pm-chat-history {
  min-height: 180px; max-height: 50vh; overflow-y: auto;
  background: var(--bg, #f9fafb); border-radius: 8px; padding: 12px;
  margin-bottom: 12px; font-size: 14px; line-height: 1.5;
}
.parcel-modal .pm-chat-history .pm-msg { margin-bottom: 12px; }
.parcel-modal .pm-chat-history .pm-msg.user .pm-bubble { background: var(--accent, #4f46e5); color: #fff; align-self: flex-end; }
.parcel-modal .pm-chat-history .pm-msg.bot .pm-bubble { background: #fff; border: 1px solid var(--border, rgba(0,0,0,0.08)); }
.parcel-modal .pm-chat-history .pm-msg { display: flex; }
.parcel-modal .pm-chat-history .pm-msg.user { justify-content: flex-end; }
.parcel-modal .pm-chat-history .pm-bubble { padding: 8px 12px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; }
.parcel-modal .pm-chat-history .pm-msg.bot.thinking .pm-bubble::after { content: '…'; }
.parcel-modal .pm-chat-input { display: flex; gap: 8px; }
.parcel-modal .pm-chat-input input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--border, rgba(0,0,0,0.15));
  border-radius: 8px; font-size: 14px; background: var(--bg, #fff); color: var(--text, #0B0F14);
}
.parcel-modal .pm-chat-input button {
  background: var(--accent, #4f46e5); color: #fff; border: none;
  padding: 0 18px; border-radius: 8px; cursor: pointer; font-weight: 600;
}

@media (max-width: 720px) {
  .parcel-modal .pm-content { top: 0; max-height: 100vh; width: 100vw; border-radius: 0; }
  .parcel-modal .pm-grid { grid-template-columns: 1fr; }
}

/* ──────────── Map overlay legend (left side, per-layer) ──────────── */
.map-overlay-legend {
  position: absolute;
  top: 80px;
  left: 12px;
  z-index: 6;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.10));
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  font-size: 12px;
  max-width: 260px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.map-overlay-legend .mol-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}
.map-overlay-legend .mol-section:last-child { border-bottom: none; }
.map-overlay-legend h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #6b7280);
  font-weight: 700;
}
.map-overlay-legend .mol-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: help;
  line-height: 1.3;
  transition: background var(--fast, 120ms);
}
.map-overlay-legend .mol-row:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
.map-overlay-legend .mol-swatch {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 3px;
  border: 1.5px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}
.map-overlay-legend .mol-swatch--line {
  width: 16px; height: 4px; border-radius: 2px;
  border: none;
}
.map-overlay-legend .mol-label { flex: 1; color: var(--text, #0B0F14); font-weight: 500; }
.map-overlay-legend .mol-sublabel { font-size: 10px; color: var(--text-muted, #6b7280); margin-left: 4px; }

/* Through-Lot Quad-Score Legend — appears bottom-right when any
   through-lot layer (master / sub / MF / block-neighbors / my) is on.
   Mirrors .map-overlay-legend visual style. */
#through-lot-legend {
  position: fixed;
  bottom: 28px;
  right: 16px;
  z-index: 50;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.10));
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  font-size: 12px;
  width: 220px;
}
#through-lot-legend[hidden] { display: none; }
#through-lot-legend .tll-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}
#through-lot-legend .tll-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #6b7280);
  font-weight: 700;
}
#through-lot-legend .tll-sub {
  font-size: 10.5px; color: var(--text-muted, #6b7280);
  margin-top: 2px; line-height: 1.35;
}
#through-lot-legend .tll-rows { padding: 6px 8px; }
#through-lot-legend .tll-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 5px; line-height: 1.4;
  transition: background var(--fast, 120ms);
  cursor: help;
}
#through-lot-legend .tll-row:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
#through-lot-legend .tll-swatch {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 3px;
  border: 1.5px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}
#through-lot-legend .tll-tier {
  flex: 1; color: var(--text, #0B0F14); font-weight: 500; font-size: 12px;
}
#through-lot-legend .tll-roi {
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 12px; color: #0B0F14;
}
#through-lot-legend .tll-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
  font-size: 10.5px; color: var(--text-muted, #6b7280); line-height: 1.45;
}
#through-lot-legend .tll-foot a {
  color: var(--accent, #2563EB); text-decoration: none;
}
#through-lot-legend .tll-foot a:hover { text-decoration: underline; }

/* Synopsis tooltip — single shared element repositioned by JS */
.mol-tooltip {
  position: fixed;
  z-index: 100;
  background: #1F2937;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  max-width: 320px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.32);
  pointer-events: none;
  transition: opacity 120ms;
}
.mol-tooltip .mtt-title {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 13px;
}
.mol-tooltip .mtt-syn {
  font-weight: 400;
  color: rgba(255,255,255,0.92);
}
.mol-tooltip .mtt-detail {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 11px;
  color: rgba(255,255,255,0.78);
}

/* Marker hover badges — permits / violations / zoning signals */
.mhc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.mhc-badge-permit {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.mhc-badge-viol-open {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.30);
}
.mhc-badge-viol-closed {
  background: rgba(120, 113, 108, 0.12);
  color: #57534e;
  border: 1px solid rgba(120, 113, 108, 0.25);
}

/* Map markers */
.marker {
  background: var(--ink);
  color: white;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 11px;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform var(--fast);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.marker:hover { transform: scale(1.12); z-index: 10; }

/* Deep-zoom mode (zoom >= 17) — shrink markers to Redfin-style small pills
 * so the actual property/rooftop is visible underneath. Hover still scales
 * up for legibility. */
#map.deep-zoom .marker {
  padding: 2px 6px;
  font-size: 9.5px;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  letter-spacing: -0.2px;
}
#map.deep-zoom .marker:hover { transform: scale(1.4); z-index: 10; }
#map.deep-zoom .marker-rating-badge {
  width: 12px;
  height: 12px;
  top: -5px;
  right: -5px;
  font-size: 7px;
}
/* 2026-05-04 (per James): per-property-type icon shown on every listing
 * card and List-view row. SVG is inline and inherits color via
 * `currentColor`. Each ptype-* class overrides the icon's text-color so
 * the icon reads at a glance even at small sizes. */
.ptype-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.04);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ptype-icon svg { display: block; flex-shrink: 0; }
.ptype-label { line-height: 1; }
.ptype-icon-row {
  background: transparent; padding: 0 4px 0 0;
  vertical-align: -2px;
}

.ptype-sfr      { color: #16a34a; }   /* green — single-family */
.ptype-sfr_adu  { color: #0d9488; }   /* teal — SFR with ADU */
.ptype-condo    { color: #2563eb; }   /* blue — condo tower */
.ptype-townhome { color: #7c3aed; }   /* purple — townhouse row */
.ptype-duplex   { color: #db2777; }   /* magenta — 2 units */
.ptype-triplex  { color: #ea580c; }   /* orange — 3 units */
.ptype-quad     { color: #ca8a04; }   /* gold — 4 units */
.ptype-5plus    { color: #dc2626; }   /* red — 5+ units (apartment) */

/* 2026-05-04 (per James): pills colored by STATUS for clarity.
 *   Active            → blue   (#2563EB)
 *   Pending / AUC     → yellow (#F59E0B)
 *   Sold / Closed     → red recency-fade (inline style from SoldRecencyStyle)
 * The strategy-based color rules below are kept as no-op fallback (the
 * renderMap function no longer applies those classes, but any cached or
 * 3rd-party marker code that still adds them won't break). Off-market
 * parcels still use the slate ink-3 fallback. */
.marker.status-active   { background: #1E3A8A; }   /* dark blue (blue-900) per James 2026-05-18 */
.marker.status-pending  { background: #F59E0B; }
.marker.status-sold     { background: #DC2626; }   /* solid red — recency-fade removed 2026-05-18 */

/* 2026-05-27 (per James — locked palette): 5-color property-type pills
 *   Multiunit → #14306B  (dark blue, distinctly NOT black)  white text
 *   SFR       → #2E5099  (deep blue)                        white text
 *   Townhome  → #5C7AB5  (medium blue)                      white text
 *   Condo     → #96A8CA  (light blue anchor)                white text
 *   Land      → #FFFFFF  + 1.5px solid #14306B              #14306B text
 * Only applies to active pills (status-active or appendMapMarkers default).
 * Strategy / lot-mode / sold / pending classes override via higher specificity.
 * NOTE: SFR + ADU eventually maps to Multiunit but requires LADBS permit
 * ingestion (Feasibility Tool Phase 1.5, not yet shipped) — for now SFR+ADU
 * falls back to plain SFR. */
.marker.pill-multi    { background: #14306B; color: #FFFFFF; }
.marker.pill-sfr      { background: #2E5099; color: #FFFFFF; }
.marker.pill-townhome { background: #5C7AB5; color: #FFFFFF; }
.marker.pill-condo    { background: #96A8CA; color: #FFFFFF; }
.marker.pill-land     { background: #FFFFFF; color: #14306B; border: 1.5px solid #14306B; }
/* (2026-05-27) Strategy-colored marker rules removed (.marker.tic_arbitrage,
   .marker.fix_flip, .marker.below_market, .marker.long_term_rental,
   .marker.house_hack, .marker.sfr_plus_adu, .marker.teardown) — the
   Investment Strategies sidebar section was deleted so these classes are
   no longer applied to markers. Map color is now driven purely by
   PropertyType via .marker.pill-*. The .marker.offmkt rule below stays —
   it's still used by off-market parcels with no MLS status. */
.marker.offmkt          { background: var(--ink-3); }

/* Lot-type coloring — overrides PropertyType pill when ANY lot filter is
 * active (body.lot-mode). Each lot type gets a distinct hue so the map
 * doubles as a visual sort by frontage condition. */
body.lot-mode .marker.lt-through        { background: #16A34A; }   /* green - common in SM */
body.lot-mode .marker.lt-corner         { background: #F59E0B; }   /* amber */
body.lot-mode .marker.lt-corner_through { background: #DB2777; }   /* magenta - the gold standard for SB9 */
body.lot-mode .marker.lt-corner_oblique { background: #EA580C; }   /* burnt orange - off-square corners */
body.lot-mode .marker.lt-interior       { background: #64748B; }   /* slate - mid-block */
body.lot-mode .marker.lt-multi_frontage { background: #7C3AED; }   /* purple - rare 3+ frontages */
body.lot-mode .marker.lt-landlocked     { background: #1E293B; }   /* near-black - landlocked */
body.lot-mode .marker.lt-unknown        { background: var(--ink-3); opacity: 0.45; }

/* Map legend — fixed bottom-left, only visible in lot-mode */
.lot-legend {
  position: absolute;
  bottom: 24px;
  left: 12px;
  z-index: 5;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  font-size: 11px;
  display: none;
  max-width: 220px;
}
body.lot-mode .lot-legend { display: block; }
.lot-legend .ll-title { font-weight: 700; margin-bottom: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6b7280); }
.lot-legend .ll-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; line-height: 1.3; }
.lot-legend .ll-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.lot-legend .ll-row .ll-count { margin-left: auto; color: var(--text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.lot-legend .ll-row.unknown .ll-dot { opacity: 0.5; }

/* Rating badge — small circle pinned to top-right of marker */
.marker-wrap { position: relative; display: inline-block; }
.marker-rating-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  pointer-events: none;
}
.marker-rating-badge.mr-super   { background: #FCD34D; color: #B45309; }
.marker-rating-badge.mr-like    { background: #86EFAC; color: #166534; }
.marker-rating-badge.mr-maybe   { background: #C7D2FE; color: #3730A3; }
.marker-rating-badge.mr-dislike { background: #FCA5A5; color: #991B1B; }

/* Hover stats card — appears on marker mouseenter */
.marker-hover-card .mapboxgl-popup-content {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(11,15,20,0.20);
  border: 1px solid var(--line);
  min-width: 200px;
  max-width: 260px;
  pointer-events: none;
  font-size: var(--t-sm);
  line-height: 1.4;
}
.marker-hover-card .mapboxgl-popup-tip { display: none; }
.marker-hover-card .mhc-status {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-bottom: 4px;
}
.marker-hover-card .mhc-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.1;
}
.marker-hover-card .mhc-addr {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.marker-hover-card .mhc-city {
  font-weight: 500;
  color: var(--muted);
}
.marker-hover-card .mhc-meta,
.marker-hover-card .mhc-meta-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
}
.marker-hover-card .mhc-meta-sub { color: var(--muted); }
.marker-hover-card .mhc-deal {
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
}
.marker-hover-card .mhc-deal.good { background: #DCFCE7; color: #166534; }
.marker-hover-card .mhc-deal.hot  { background: #FEE2E2; color: #991B1B; }

/* Action buttons inside the hover card (parcel popup mainly — needs clickable surface) */
.marker-hover-card .mapboxgl-popup-content { pointer-events: auto; }
.marker-hover-card .mhc-actions { pointer-events: auto; }
.marker-hover-card .mhc-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--bg);
  color: var(--ink-3);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: all var(--fast);
}
.marker-hover-card .mhc-btn:hover {
  background: var(--bg-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.marker-hover-card .mhc-btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.marker-hover-card .mhc-btn-primary:hover {
  background: var(--accent-dark);
  color: white;
}

/* Back-to-wider-view button — appears on the map after a double-click zoom-in */
.map-back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 30;
  background: var(--ink);
  color: white;
  border: 0;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.30);
  transition: all var(--fast);
}
.map-back-btn:hover { background: #000; transform: translateY(-1px); }

/* Lot-dimension label — appears centered on the parcel after zoom-in */
.lot-dim-label .ldl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(11,15,20,0.92);
  color: white;
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
.lot-dim-label .ldl-card small {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.lot-dim-label .ldl-card strong {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.lot-dim-label .ldl-card span {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 1px;
}

/* Modal
   2026-05-27: bumped z-index 1000 -> 9500 so the property detail modal sits
   above the bottom-docked Area Stats Strip (8500), Floating Filter Pill Bar
   (8550), and area-search popovers/bottom-bar (9000). Stays below
   .ca-shell (9700) + .as-modal (10000) + lightbox (10000) per existing
   stack invariants. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalIn 180ms ease;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,15,20,0.32);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
/* Stack — holds 1 or 2 modal panes side-by-side */
.modal-stack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 92vw;
  max-width: 1280px;
  height: 94vh;
  animation: modalPop 260ms cubic-bezier(.22,.95,.3,1.04);
  transition: max-width 260ms ease, width 260ms ease;
}
.modal-stack.two-panes {
  grid-template-columns: 1fr 1fr;
  max-width: min(1700px, 96vw);
  width: 96vw;
}

.modal-pane {
  position: relative;
  background: var(--bg);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-4);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.modal-pane.hidden { display: none; }
.modal-pane-b { animation: paneSlideIn 260ms cubic-bezier(.22,.95,.3,1.04); }
@keyframes paneSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Compare-mode label (in pane B's toolbar) */
.compare-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modal-promote {
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
}
.modal-promote:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
  color: var(--accent);
}
@keyframes modalPop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Top toolbar inside the modal */
.modal-toolbar {
  /* Pane A toolbar hidden — close X is now in the property.html tabs row.
     Pane B (compare mode) keeps its toolbar visible via the override below. */
  display: none;
}
.modal-pane-b .modal-toolbar.modal-toolbar-b {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.modal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
}
.modal-back:hover:not(:disabled) {
  background: var(--bg-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.modal-back:disabled { opacity: 0.35; cursor: not-allowed; }
.modal-position {
  flex: 1;
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: all var(--fast);
}
.modal-close:hover { background: var(--bg); border-color: var(--ink-3); transform: scale(1.06); }

#modal-content { flex: 1; overflow: hidden; }
#modal-content iframe { width: 100%; height: 100%; border: 0; }
#modal-content-b { flex: 1; overflow: hidden; }
#modal-content-b iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Outside-modal navigation arrows — editorial-luxury pill at 1/3 viewport gutter */
.modal-nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 76px;
  height: 76px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--ink);
  box-shadow: var(--sh-3);
  transition: all var(--fast);
}
.modal-nav-arrow:hover:not(:disabled) {
  border-color: var(--ink);
  box-shadow: 0 6px 16px rgba(0,16,46,.10);
  transform: translateY(-50%) translateY(-1px);
}
.modal-nav-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.modal-nav-arrow.prev { left: max(16px, calc((100vw - 1500px) / 3)); }
.modal-nav-arrow.next { right: max(16px, calc((100vw - 1500px) / 3)); }
.modal-nav-arrow svg { width: 22px; height: 22px; color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════ */
/* Rating halo — 4 always-visible buttons OUTSIDE the modal pane            */
/* Big arrows hint at keyboard shortcuts; tooltip on hover.                 */
/* Halo is a child of .modal (fixed full-viewport) so buttons can sit       */
/* clearly outside the modal-stack on any viewport.                         */
/* ════════════════════════════════════════════════════════════════════════ */
.rating-halo {
  position: fixed;
  top: 50%;
  right: max(96px, calc((100vw - 1280px) / 2 - 96px));
  transform: translateY(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.modal.hidden .rating-halo { display: none; }
.modal-stack.two-panes ~ .rating-halo { display: none; }
.rh-btn {
  position: static;
  pointer-events: auto;
  width: 76px;
  height: 76px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 1px 1px rgba(0,16,46,.04);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
.rh-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,16,46,0.10); }
.rh-btn:active { filter: brightness(0.95); }

/* Editorial-luxury pill content — SVG icon + label below */
.rh-ic { width: 22px; height: 22px; }
.rh-lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Hide legacy spans that the old halo used */
.rh-arrow, .rh-emoji, .rh-tip { display: none; }

/* Per-button accent: only the icon picks up the rating's color; pill stays neutral */
.rh-love .rh-ic { color: #2e7d4f; }
.rh-like .rh-ic { color: #2454b3; }
.rh-maybe .rh-ic { color: #b07b1a; }
.rh-dislike .rh-ic { color: #a83232; }
.rh-love:hover { border-color: #2e7d4f; }
.rh-like:hover { border-color: #2454b3; }
.rh-maybe:hover { border-color: #b07b1a; }
.rh-dislike:hover { border-color: #a83232; }

/* Active rating — keep neutral background, ink border, slightly stronger shadow */
.rh-btn.active {
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(0,16,46,0.14);
}

/* Hover scale: have to rewrite per-button so we don't override the centering transform */
.rh-super:hover, .rh-maybe:hover { transform: translateX(-50%) scale(1.08); }
.rh-like:hover, .rh-dislike:hover { transform: translateY(-50%) scale(1.08); }
/* Keyboard-press flash */
.rh-super.keypressed, .rh-maybe.keypressed { transform: translateX(-50%) scale(1.18); }
.rh-like.keypressed, .rh-dislike.keypressed { transform: translateY(-50%) scale(1.18); }

/* Smaller viewport — tighten spacing and shrink buttons slightly */
@media (max-width: 1380px) {
  .rh-btn { width: 76px; height: 76px; }
  .rh-arrow { font-size: 30px; }
}
@media (max-width: 1100px) {
  .rh-btn { width: 64px; height: 64px; }
  .rh-arrow { font-size: 24px; }
  .rh-lbl { font-size: 8px; }
  .rh-super { top: 8px; }
  .rh-maybe { bottom: 8px; }
}

/* ──── Quick-Actions column additions (2026-05-26) ────────────────────────── */
.rh-gear {
  align-self: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: #475569;
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 1px rgba(0,16,46,.04);
  transition: transform var(--fast), color var(--fast), border-color var(--fast);
}
.rh-gear:hover {
  color: #0F172A;
  border-color: #0F172A;
  transform: rotate(40deg);
}
.rh-divider {
  width: 60%;
  margin: 2px auto;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.rh-icon-glyph {
  font-size: 20px;
  line-height: 1;
  color: var(--rh-accent, #0F172A);
}
/* Lucide-style stroke SVG icons. fill=none + stroke=currentColor in the SVG;
 * we set color here so the accent var propagates to the stroke. */
.rh-icon-svg {
  width: 24px;
  height: 24px;
  color: var(--rh-accent, #0F172A);
  display: block;
}
.rh-rating .rh-icon-glyph,
.rh-list .rh-icon-glyph {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
}
.rh-list { /* visually distinguish from ratings: slightly lighter border accent on hover */ }
.rh-list:hover { border-color: var(--rh-accent, #0A5BCC); }
.rh-rating:hover { border-color: var(--rh-accent, #0F172A); }
/* Active state for ANY rh-btn (rating or list) — accent border + soft fill */
.rh-btn.active {
  border-color: var(--rh-accent, var(--ink));
  background: color-mix(in srgb, var(--rh-accent, var(--ink)) 8%, var(--bg));
  box-shadow: 0 4px 12px rgba(0,16,46,0.14);
}
/* Keyboard / click flash — universal */
.rh-btn.keypressed {
  transform: scale(1.10);
  transition: transform 120ms ease-out;
}
.rh-mode-indicator {
  align-self: center;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #94A3B8;
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--line);
  border-radius: 0;
  padding: 6px 6px 0;
  margin-top: 8px;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.rh-mode-indicator .rh-mode-prefix {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #B0BAC8;
  text-transform: uppercase;
}
.rh-mode-indicator.rh-mode-multi {
  color: #0F172A;
}
.rh-mode-indicator.rh-mode-multi .rh-mode-prefix {
  color: #64748B;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* Active Filters / Ranking Priorities (Phase 1)                            */
/* ════════════════════════════════════════════════════════════════════════ */

.chips-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 12px;
}
.chips-bar { gap: 12px; }

/* Ranking bar */
.rank-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rank-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.rank-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-soft-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  border: 1px solid var(--line);
}

.rank-bar-body {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Do Not Rank toggle */
.dnr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.dnr-toggle input { display: none; }
.dnr-knob {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-soft-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  transition: background var(--fast);
  flex-shrink: 0;
}
.dnr-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--bg);
  border-radius: 50%;
  box-shadow: var(--sh-1);
  transition: transform var(--fast);
}
.dnr-toggle input:checked + .dnr-knob { background: var(--accent); border-color: var(--accent); }
.dnr-toggle input:checked + .dnr-knob::after { transform: translateX(16px); }
.dnr-label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); }
.dnr-toggle input:checked ~ .dnr-label { color: var(--accent); }

/* Disabled state when Do Not Rank is on */
.rank-bar.dnr-on .vc-slider-wrap,
.rank-bar.dnr-on .rank-priorities {
  opacity: 0.4;
  pointer-events: none;
}

/* Value vs Condition slider */
.vc-slider-wrap {
  flex: 0 0 auto;
  min-width: 320px;
  background: linear-gradient(90deg, #FEE2E2 0%, #FFFAF0 50%, #E3F5EA 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px 14px 12px;
}
.vc-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.vc-side.vc-value { color: var(--red); }
.vc-side.vc-cond  { color: var(--green); }
.vc-mid {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.10em;
}
.vc-slider {
  position: relative;
  height: 22px;
}
.vc-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--amber) 50%, var(--green) 100%);
  border-radius: var(--r-pill);
  transform: translateY(-50%);
}
.vc-step {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
  z-index: 1;
}
.vc-step:hover { transform: translate(-50%, -50%) scale(1.25); }
.vc-step[data-pos="0"] { left: 0; }
.vc-step[data-pos="1"] { left: 25%; }
.vc-step[data-pos="2"] { left: 50%; }
.vc-step[data-pos="3"] { left: 75%; }
.vc-step[data-pos="4"] { left: 100%; }
.vc-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg);
  box-shadow: var(--sh-2);
  cursor: grab;
  transition: left 180ms cubic-bezier(.22,.95,.3,1.04);
  z-index: 2;
  left: 50%;
}
.vc-thumb:active { cursor: grabbing; }
.vc-readout {
  font-size: var(--t-xs);
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
  font-weight: 600;
}

/* Ranking priorities list */
.rank-priorities {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
  min-height: 36px;
}
.rank-empty {
  font-size: var(--t-sm);
  color: var(--muted-2);
  font-style: italic;
}
.rank-priority-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent);
  cursor: grab;
  user-select: none;
}
.rank-priority-chip:active { cursor: grabbing; }
.rank-priority-chip .rp-rank {
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rank-priority-chip .rp-x {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
}
.rank-priority-chip .rp-x:hover { color: var(--ink); }

@media (max-width: 900px) {
  .rank-bar-body { flex-direction: column; align-items: stretch; }
  .vc-slider-wrap { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* Redfin-style filter toolbar                                              */
/* ════════════════════════════════════════════════════════════════════════ */

/* Compact location bar above the toolbar */
.locbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
}
.locbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
}
.locbar-search {
  position: relative;
  flex: 0 1 460px;   /* don't grow — keeps Save Search packed right next to it */
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--fast);
}
.locbar-search:focus-within {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.locbar-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--t-md);
  color: var(--ink);
  min-width: 0;
}
.btn-save-search,
.btn-my-homes,
.btn-notifications {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: all var(--fast);
  white-space: nowrap;
}
.btn-save-search { background: var(--red); color: white; /* sit directly next to the search input — no auto-margin gap */ }

/* Saved-search loaded pill — visible whenever a saved search is currently active */
.saved-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  max-width: 320px;
  min-width: 0;
  white-space: nowrap;
}
.saved-search-pill.hidden { display: none; }
.saved-search-pill .ssp-label {
  font-weight: 600;
  opacity: 0.7;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.saved-search-pill .ssp-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.saved-search-pill .ssp-clear {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  margin-left: 4px;
}
.saved-search-pill .ssp-clear:hover { background: var(--accent-dark); }
.btn-save-search:hover { background: #991616; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(185,28,28,0.25); }
.btn-my-homes { background: var(--ink); color: white; }
.btn-my-homes:hover { background: #000; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(11,15,20,0.25); }
.btn-notifications {
  padding: 9px 11px;
  background: var(--bg);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.btn-notifications:hover { background: var(--bg-soft); color: var(--accent); border-color: var(--accent); }
.btn-view-mode {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.btn-view-mode:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.btn-view-mode.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* ── View Mode dropdown panel ────────────────────────────────────────────── */
.vm-panel {
  position: fixed;
  width: 280px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.25);
  padding: 14px 14px 12px;
  z-index: 9000;
  font-family: var(--font-base, system-ui);
  display: none;
}
.vm-panel.is-open { display: block; }
.vm-panel-header { margin-bottom: 10px; }
.vm-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
}
.vm-panel-help {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}
.vm-pill-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.vm-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
  text-align: left;
}
.vm-pill:hover { background: #f8fafc; }
.vm-pill.is-on {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.vm-pill.is-on .vm-pill-count { background: #2563eb; color: #fff; }
.vm-pill.is-off { opacity: 0.55; }
.vm-pill-icon {
  font-size: 16px;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.vm-pill-label { flex: 1; }
.vm-pill-count {
  font-size: 11px;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  border-radius: 10px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.vm-panel-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
}
.vm-reset-btn {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  font-weight: 500;
}
.vm-reset-btn:hover { background: #f8fafc; color: #0f172a; }
/* Section divider between View Mode buckets and Card Fields toggles */
.vm-section-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0 8px;
}
/* View Mode hide class — applied to .lcard and to marker wrap divs */
.vm-hidden { display: none !important; }

/* Filter toolbar */
.filterbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.filterbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
}
.fbar-dd {
  position: relative;
}
.fbar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
}
.fbar-trigger:hover { border-color: var(--ink-3); color: var(--ink); }
.fbar-dd.open .fbar-trigger {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.fbar-caret {
  font-size: 10px;
  color: var(--muted);
  transition: transform var(--fast);
}
.fbar-dd.open .fbar-caret { transform: rotate(180deg); color: var(--accent); }

/* All Filters button (slightly different — has icon) */
.fbar-allfilters {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
}
.fbar-allfilters:hover { border-color: var(--ink-3); color: var(--ink); }
.fbar-allfilters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.fbar-allfilters-badge.hidden { display: none; }

/* Dropdown popups */
.fbar-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 18px;
  z-index: 50;
  min-width: 320px;
  display: none;
}
.fbar-dd.open .fbar-pop { display: block; }
.fbar-pop-wide { min-width: 460px; }

/* Status dropdown — Redfin pattern */
.fbar-pop-status {
  min-width: 360px;
  padding: 6px 0;
}
.status-grp {
  border-bottom: 1px solid var(--line-2);
  padding: 12px 18px;
}
.status-grp:last-of-type { border-bottom: 0; }
.status-grp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.status-grp-chev {
  background: transparent;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: all var(--fast);
}
.status-grp-chev:hover { background: var(--bg-soft); color: var(--ink); }
.status-grp-chev svg { transition: transform var(--fast); }
.status-grp.expanded .status-grp-chev svg { transform: rotate(0deg); }
.status-grp:not(.expanded) .status-grp-chev svg { transform: rotate(180deg); }

.status-grp-body {
  display: none;
  padding-top: 8px;
  padding-left: 8px;
  flex-direction: column;
  gap: 10px;
}
.status-grp.expanded .status-grp-body { display: flex; }

/* Custom radio (teal-filled when checked) */
.status-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ink);
  flex: 1;
}
.status-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.status-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--muted-2);
  position: relative;
  flex-shrink: 0;
  transition: all var(--fast);
}
.status-radio input[type="radio"]:checked + .status-radio-dot {
  border-color: var(--teal);
}
.status-radio input[type="radio"]:checked + .status-radio-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.status-radio-sub {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-3);
}
.status-radio-label { flex: 1; }

/* Custom checkbox (teal-filled when checked) */
.status-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: var(--t-md);
  color: var(--ink-3);
  padding-left: 4px;
}
.status-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.status-check-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--muted-2);
  position: relative;
  flex-shrink: 0;
  transition: all var(--fast);
}
.status-check input[type="checkbox"]:checked + .status-check-box {
  background: var(--teal);
  border-color: var(--teal);
}
.status-check input[type="checkbox"]:checked + .status-check-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.status-soon-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-soft-2);
  padding: 3px 7px;
  border-radius: var(--r-pill);
  margin-left: 6px;
}

.status-pop-actions {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px 6px;
}
.status-done-btn {
  background: var(--red);
  color: white;
  border: 0;
  padding: 10px 22px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--fast);
}
.status-done-btn:hover { background: #991616; }

/* Generic dropdown content for the other popups */
.fbar-row { display: flex; align-items: flex-end; gap: 10px; }
.fbar-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fbar-field label { font-size: var(--t-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.fbar-field input { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--t-md); outline: none; }
.fbar-field input:focus { border-color: var(--accent); }
.fbar-dash { color: var(--muted); padding-bottom: 8px; }
.fbar-pop-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.fbar-clear, .fbar-apply {
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--t-sm);
  cursor: pointer;
}
.fbar-clear { background: transparent; color: var(--muted); }
.fbar-apply { background: var(--accent); color: white; }
.fbar-apply:hover { background: var(--accent-dark); }

/* 2026-05-27 v4: Quick-preset pill row inside Living Area / Lot Size
   popovers. Sits between the min/max inputs and the Reset/Apply footer.
   Click a pill → auto-fills min/max + immediate apply. */
.fbar-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.fbar-preset {
  padding: 6px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--fast);
}
.fbar-preset:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.fbar-section-title { font-size: var(--t-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.fbar-pillbar {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}
.fbar-pill {
  padding: 8px 12px;
  border: 0;
  background: transparent;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: all var(--fast);
}
.fbar-pill:last-child { border-right: 0; }
.fbar-pill:hover { background: var(--bg-soft); }
.fbar-pill.active { background: var(--accent-soft); color: var(--accent); }

/* All Filters modal — beds/baths pillbar. Inherits .fbar-pillbar / .fbar-pill
   visuals exactly so the modal and the top filter bar render identically. */
.af-bb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.af-pillbar {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
  margin-top: 6px;
}
.af-pill {
  padding: 8px 12px;
  border: 0;
  background: transparent;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: all var(--fast);
  font-family: inherit;
  line-height: 1.2;
}
.af-pill:last-child { border-right: 0; }
.af-pill:hover { background: var(--bg-soft); }
.af-pill.active { background: var(--accent-soft); color: var(--accent); }
/* When 2 pills are active they form a range — mark the endpoints visually */
.af-pill.range-end, .fbar-pill.range-end {
  background: var(--accent);
  color: #fff;
}

.fbar-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.fbar-type {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  text-align: left;
  transition: all var(--fast);
}
.fbar-type:hover { border-color: var(--ink-3); }
.fbar-type.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Active filters footer (under the toolbar) */
.filterbar-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}
/* Hide the whole strip (label + clear button) when there are no chips */
.filterbar-foot:has(#chips-inner:empty) { display: none; }
/* Hide the label when no chips are present */
.filterbar-foot:has(#chips-inner:empty) .chips-label { display: none; }

/* ════════════════════════════════════════════════════════════════════════ */
/* Match Mode                                                                */
/* ════════════════════════════════════════════════════════════════════════ */

.seg-match {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #FEE2E2 0%, #EDE7FD 100%);
  color: var(--ink);
  font-weight: 700;
}
.seg-match.active { background: linear-gradient(135deg, var(--red) 0%, var(--purple) 100%); color: white; }

.match-mode {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #F7F8FA 0%, #FFE7EE 50%, #EDE7FD 100%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  animation: mmFadeIn 220ms ease;
}
.match-mode.hidden { display: none; }
@keyframes mmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.mm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mm-exit, .mm-history, .mm-personalize {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
  display: inline-flex;
  align-items: center;
}
.mm-exit:hover, .mm-history:hover, .mm-personalize:hover { background: var(--bg-soft); border-color: var(--ink-3); color: var(--ink); }
.mm-personalize.active {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #B45309;
  color: #B45309;
}
.mm-counter {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.mm-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  padding: 28px 28px;
}

/* Action halo — bigger buttons, hugging the card edges */
.mm-action {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 0;
  background: var(--bg);
  box-shadow: var(--sh-4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all var(--fast);
  z-index: 5;
}
.mm-action:hover { transform: scale(1.10); box-shadow: 0 24px 56px rgba(11,15,20,0.18), 0 12px 28px rgba(11,15,20,0.12); }
.mm-action:active { transform: scale(0.95); }
.mm-action-icon { font-size: 38px; line-height: 1; }
.mm-action-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.mm-action-key { font-size: 10px; color: var(--muted); font-weight: 600; }

/* Position buttons just outside the card edges */
.mm-super { top: -32px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); }
.mm-super:hover { transform: translateX(-50%) scale(1.10); }
.mm-super .mm-action-icon { color: #B45309; }

.mm-like { top: 50%; right: -32px; transform: translateY(-50%); background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%); }
.mm-like:hover { transform: translateY(-50%) scale(1.10); }
.mm-like .mm-action-icon { color: var(--green); }

.mm-dislike { top: 50%; left: -32px; transform: translateY(-50%); background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); }
.mm-dislike:hover { transform: translateY(-50%) scale(1.10); }
.mm-dislike .mm-action-icon { color: var(--red); }

.mm-maybe { bottom: -32px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%); }
.mm-maybe:hover { transform: translateX(-50%) scale(1.10); }
.mm-maybe .mm-action-icon { color: var(--purple); }

/* Card — full property detail iframe */
.mm-card {
  width: min(1280px, calc(100vw - 220px));
  height: calc(100vh - 160px);
  max-height: calc(100vh - 160px);
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: mmCardIn 280ms cubic-bezier(.22,.95,.3,1.04);
}
.mm-card-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@keyframes mmCardIn { from { transform: scale(0.94) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

.mm-card.swipe-right { animation: mmSwipeRight 320ms ease forwards; }
.mm-card.swipe-left  { animation: mmSwipeLeft  320ms ease forwards; }
.mm-card.swipe-up    { animation: mmSwipeUp    320ms ease forwards; }
.mm-card.swipe-down  { animation: mmSwipeDown  320ms ease forwards; }
@keyframes mmSwipeRight { to { transform: translateX(120vw) rotate(15deg); opacity: 0; } }
@keyframes mmSwipeLeft  { to { transform: translateX(-120vw) rotate(-15deg); opacity: 0; } }
@keyframes mmSwipeUp    { to { transform: translateY(-120vh) scale(0.6); opacity: 0; } }
@keyframes mmSwipeDown  { to { transform: translateY(120vh) scale(0.6); opacity: 0; } }

.mm-card-photo {
  flex: 1.4;
  background: var(--bg-soft-2) center/cover no-repeat;
  position: relative;
  min-height: 0;
}
.mm-card-photo .photo-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.mm-card-info {
  padding: 18px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.mm-card-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-serif);
  line-height: 1;
}
.mm-card-addr {
  font-size: var(--t-md);
  color: var(--ink-3);
  margin-top: 2px;
}
.mm-card-keystats {
  display: flex;
  gap: 18px;
  margin-top: 6px;
  font-size: var(--t-sm);
  color: var(--ink-3);
  flex-wrap: wrap;
}
.mm-card-keystats strong { color: var(--ink); font-weight: 700; }
.mm-card-remarks {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--muted);
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-card-deal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  background: var(--green-soft);
  color: var(--green);
  width: fit-content;
}
.mm-card-deal.amber { background: var(--amber-soft); color: var(--amber); }
.mm-card-deal.red { background: var(--red-soft); color: var(--red); }
.mm-card-detail-link {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-size: var(--t-xs);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

/* Why-recommended panel */
.mm-why {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: var(--t-xs);
  max-width: 240px;
  z-index: 4;
}
.mm-why-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-size: 10px;
  margin-bottom: 6px;
}
.mm-why ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mm-why li {
  padding: 3px 0;
  color: var(--ink-3);
  line-height: 1.3;
}
.mm-why li::before { content: '✓ '; color: var(--green); font-weight: 700; }

/* Rated drawer */
.mm-rated-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 96vw;
  height: 100vh;
  background: var(--bg);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 950;
  display: flex;
  flex-direction: column;
  animation: drawerIn 220ms cubic-bezier(.22,.95,.3,1.04);
}
.mm-rated-drawer.hidden { display: none; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.mm-rated-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.mm-rated-head h3 { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.mm-rated-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 0;
  cursor: pointer;
  font-size: 22px;
  color: var(--ink-3);
}
.mm-rated-close:hover { background: var(--bg-soft-2); }
.mm-rated-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.mm-rated-tab {
  flex: 1;
  padding: 8px 6px;
  border: 0;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
}
.mm-rated-tab.active { background: var(--accent); color: white; }
.mm-rated-list { flex: 1; overflow-y: auto; padding: 12px; }
.mm-rated-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--fast);
}
.mm-rated-item:hover { background: var(--bg-soft); }
.mm-rated-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--r-sm);
  background: var(--bg-soft-2) center/cover no-repeat;
  flex-shrink: 0;
}
.mm-rated-info { flex: 1; min-width: 0; }
.mm-rated-info strong { font-size: var(--t-sm); color: var(--ink); display: block; }
.mm-rated-info small { font-size: var(--t-xs); color: var(--muted); display: block; }

@media (max-width: 768px) {
  .mm-action { width: 64px; height: 64px; }
  .mm-action-icon { font-size: 20px; }
  .mm-action-lbl { font-size: 8px; }
  .mm-action-key { font-size: 8px; }
  .mm-stage { padding: 60px 60px 60px 60px; }
  .mm-card { width: 92%; height: min(80%, 640px); }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* Binary preference popover (Off / Ideal / Required)                       */
/* ════════════════════════════════════════════════════════════════════════ */

.binary-pref-pop {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sh-3);
  z-index: 200;
  width: 320px;
  animation: bppIn 180ms ease;
}
.binary-pref-pop.hidden { display: none; }
@keyframes bppIn { from { transform: translateY(4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bpp-arrow {
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.bpp-title {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.bpp-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bpp-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: all var(--fast);
}
.bpp-opt:hover { border-color: var(--ink-3); background: var(--bg-soft); }
.bpp-opt.active { border-color: var(--accent); background: var(--accent-soft); }
.bpp-opt strong { font-size: var(--t-sm); color: var(--ink); display: block; }
.bpp-opt small { font-size: var(--t-xs); color: var(--muted); display: block; margin-top: 2px; }
.bpp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bpp-dot.off { background: var(--bg-soft-2); border: 1px solid var(--muted-2); }
.bpp-dot.ideal { background: var(--accent); }
.bpp-dot.required { background: var(--red); }

.binary-pref-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  margin: 4px 6px 4px 0;
  transition: all var(--fast);
}
.binary-pref-trigger:hover { border-color: var(--accent); color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════ */
/* Map tools (overlay toggles + Draw)                                       */
/* ════════════════════════════════════════════════════════════════════════ */
.map-col { position: relative; }
.map-tools {
  position: absolute;
  /* 2026-05-03: flush-left at the top of the map. Sits above the QS legend
     card (which starts at top: 80px) so the toolbar's row of ~36px buttons
     doesn't collide with it. */
  top: 12px;
  left: 16px;
  right: auto;
  z-index: 4;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(255,255,255,0.96);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
}
.map-tool-btn {
  padding: 6px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all var(--fast);
}
.map-tool-btn:hover { background: var(--bg-soft); color: var(--ink); }
.map-tool-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
/* 2026-05-13 — Area Selector gets a gold treatment (#D4A946) so it pops
   visually. The selector is the primary entry to "search inside an area",
   so it deserves a louder color than the navy-blue accent. Both the active
   state AND its hover stay gold for consistency. */
.map-tool-btn--toggle.active {
  background: #D4A946;
  color: #1a1a1a;
  border-color: #B8902F;
  box-shadow: 0 1px 0 rgba(184, 144, 47, 0.4), 0 2px 6px rgba(212, 169, 70, 0.25);
}
.map-tool-btn--toggle.active:hover {
  background: #E0B658;
  color: #1a1a1a;
  border-color: #B8902F;
}
.map-tool-btn.map-tool-clear { background: var(--red-soft); color: var(--red); }
.map-tool-btn.map-tool-clear:hover { background: var(--red); color: white; }
.map-tool-btn.hidden { display: none; }

/* Polygon overlay layer rendering */
.poly-area-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 0 2px rgba(255,255,255,0.9);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* Map Layers panel (popover from the Layers button)                        */
/* ════════════════════════════════════════════════════════════════════════ */
.layers-panel {
  position: absolute;
  top: 56px;
  left: 12px;
  z-index: 10;
  width: 320px;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  border: 1px solid var(--line);
  padding: 14px 16px 16px;
  max-height: calc(100% - 80px);
  overflow-y: auto;
  animation: lpFadeIn 160ms ease;
}
.layers-panel.hidden { display: none; }
@keyframes lpFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.lp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lp-head h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  color: var(--ink);
}
.lp-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 0;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
}
.lp-close:hover { background: var(--bg-soft-2); }

.lp-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  margin: 8px 0 8px;
}

.lp-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.lp-style-card {
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
  cursor: pointer;
  transition: border-color var(--fast);
}
.lp-style-card.active { border-color: var(--accent); }
.lp-style-thumb {
  aspect-ratio: 4/3;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
}
.lp-style-thumb-street {
  background: linear-gradient(135deg, #E8F0FD 0%, #F4F6FA 60%, #DCFCE7 100%);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(10,91,204,0.10) 8px 9px),
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,0,0,0.06) 12px 13px);
}
.lp-style-thumb-satellite {
  background: radial-gradient(circle at 30% 50%, #4a6f3f 0%, #2d4a23 60%, #1a2e15 100%);
}

/* Google-Maps-style basemap quick-toggle (bottom-left of #map).
   Wave B 2026-05-26. Sibling of #map under .map-col; positioned absolutely
   relative to .map-col which is already position:relative (it owns the map
   pane). Single-click flips between Street ↔ Satellite; thumbnail previews
   the OTHER basemap (the one you'd switch TO). */
.map-basemap-quick-toggle {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  padding: 0;
  margin: 0;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background-color: #1a2e15;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  cursor: pointer;
  z-index: 5;
  transition: transform var(--fast), box-shadow var(--fast);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.map-basemap-quick-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.36);
}
.map-basemap-quick-toggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}
.map-basemap-quick-toggle .mbqt-label {
  display: block;
  width: 100%;
  padding: 2px 0 3px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.80);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  letter-spacing: 0.02em;
  pointer-events: none;  /* clicks pass through to the button */
}
.lp-style-label {
  text-align: center;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
  padding: 6px 0 2px;
}

.lp-divider {
  height: 1px;
  background: var(--line-2);
  margin: 12px -16px;
}

.lp-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.lp-toggle-row.disabled { opacity: 0.55; cursor: default; }
.lp-toggle-icon { font-size: 18px; }
.lp-toggle-label { flex: 1; font-size: var(--t-md); color: var(--ink); font-weight: 600; }

/* Sub-row underneath a toggle (e.g. School-District kind selector). Only
   visually applicable while the parent toggle is on; the JS doesn't hide
   it but it's small + greyed enough to be ignorable when off. */
.lp-sub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 10px 30px;
  font-size: 11.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.lp-sub-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9CA3AF;
}
.lp-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink);
}
.lp-radio input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

/* Map-tool button with attached popup (e.g. Area Selector dropdown) */
.map-tool-with-popup {
  position: relative;
  display: inline-flex;
}
.map-tool-caret {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
}
.map-tool-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 12px 14px;
  z-index: 200;
}
.map-tool-popup.hidden { display: none; }

/* Area Selector — single-select list of clickable polygon kinds */
.lp-area-selector {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 2px;
}
.lp-as-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.1s;
}
.lp-as-row:hover { background: #F3F4F6; }
.lp-as-row input[type="radio"] {
  margin: 0;
  cursor: pointer;
}
.lp-as-row:has(input[type="radio"]:checked) {
  background: #DBEAFE;
  font-weight: 600;
}
.lp-as-icon {
  font-size: 15px;
  width: 18px; text-align: center;
}
.lp-as-count {
  margin-left: auto;
  color: #9CA3AF;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lp-coming-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-soft-2);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-left: 6px;
}

.lp-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.lp-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.lp-switch-knob {
  position: absolute;
  inset: 0;
  background: var(--bg-soft-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--fast);
}
.lp-switch-knob::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--bg);
  border-radius: 50%;
  box-shadow: var(--sh-1);
  transition: transform var(--fast);
}
.lp-switch input:checked + .lp-switch-knob { background: var(--accent); border-color: var(--accent); }
.lp-switch input:checked + .lp-switch-knob::before { transform: translateX(16px); }
.lp-switch input:disabled + .lp-switch-knob { cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════ */
/* All Filters modal — replaces the left sidebar                            */
/* ════════════════════════════════════════════════════════════════════════ */

/* 2026-05-04 (post-James feedback): All Filters modal repositioned as a
   right-side slide-in drawer. Same content as before (Ranking Priorities,
   Investment Strategies, Property Type, etc.), just anchored right. The
   backdrop is now non-blocking (pointer-events:none) so the user can
   click+select areas on the map while the panel is open. */
.allfilters-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(560px, 100vw);
  z-index: 700;
  display: block;
  padding: 0;
  animation: afSlideInRight 250ms ease;
  /* Modal itself doesn't block — only the body inside does. */
  pointer-events: none;
}
.allfilters-modal.hidden { display: none; }
@keyframes afSlideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* Legacy fade-in alias kept so old code that triggers it still works. */
@keyframes afFadeIn { from { opacity: 0; } to { opacity: 1; } }

.allfilters-backdrop {
  /* No more darkening overlay — the map stays clickable behind the panel
     so area selection (city / neighborhood polygons) still works while
     All Filters is open. The backdrop element is kept in the DOM so the
     close-on-click handler (data-action="close-allfilters") still has a
     target for callers that want it; just absent from the visual layout. */
  display: none;
}

.allfilters-body {
  position: relative;
  /* Re-enable interaction on the panel itself (parent has
     pointer-events:none so clicks fall through to the map outside it). */
  pointer-events: auto;
  background: var(--bg);
  border-radius: 0;
  box-shadow: -8px 0 24px rgba(11, 15, 20, 0.18);
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  /* Ignore the upstream max-width / radius from the legacy modal layout. */
  margin: 0;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: afPop 240ms cubic-bezier(.22,.95,.3,1.04);
}
@keyframes afPop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.allfilters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.allfilters-head h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.allfilters-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all var(--fast);
}
.allfilters-close:hover { background: var(--bg); border-color: var(--ink-3); transform: scale(1.06); }

.allfilters-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

/* Section in the modal */
.af-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-2);
}
.af-section:last-child { border-bottom: 0; }
.af-section h3 {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.af-section h3 .af-sub {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}
.af-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-soft-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  border: 1px solid var(--line);
}

/* Pinned ranking section — accent background */
.af-section-rank {
  background: linear-gradient(135deg, #FBFCFE 0%, var(--accent-soft) 100%);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 4px;
  border: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}
.af-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.af-section-head h3 { margin: 0; }

/* Two-column field grid */
.af-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.af-grid-2-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.af-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* Binary preference grid (Pool, View, etc.) */
.af-binary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.af-binary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
  text-align: left;
}
.af-binary:hover { border-color: var(--accent); color: var(--accent); }
.af-binary-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-soft-2);
  color: var(--muted);
}
.af-binary-state.ideal { background: var(--accent-soft); color: var(--accent); }
.af-binary-state.required { background: var(--red-soft); color: var(--red); }

/* Footer with apply / clear */
.allfilters-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--bg-soft);
  border-bottom-left-radius: var(--r-xl);
  border-bottom-right-radius: var(--r-xl);
}
.allfilters-foot .muted { flex: 1; text-align: center; }

@media (max-width: 720px) {
  .allfilters-modal { padding: 0; }
  .allfilters-body { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .af-grid-2-rows { grid-template-columns: 1fr; }
  .af-binary-grid { grid-template-columns: 1fr; }
}

/* Last-viewed highlight — refined ink outline only, no shouting "JUST VIEWED" pill */
.lcard.last-viewed {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  box-shadow: 0 0 0 4px var(--bg-soft), var(--sh-1);
}
.lcard.last-viewed::after {
  content: none;
}
.lcard { position: relative; }

/* Last-viewed map marker — bigger, accent-bordered */
.marker.last-viewed {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  z-index: 100 !important;
  transform: scale(1.18);
}

/* Empty state */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: var(--bg);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line);
}
.empty-state h4 { font-size: var(--t-lg); margin-bottom: 6px; }
.empty-state p { color: var(--muted); font-size: var(--t-sm); }

/* No-area-selected placeholder rendered inside .results-grid. Keeps the */
/* 2-track Split/List layout intact while inviting the user to pick an   */
/* area or run an Area Search. 2026-05-13.                                */
.results-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 24px;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.results-empty p { margin: 0 auto; max-width: 360px; }

.error-msg {
  background: var(--red-soft);
  color: var(--red);
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  grid-column: 1 / -1;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--bg-soft-2) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.lcard.skel .lcard-img { background: var(--bg-soft-2); }

/* Responsive */
@media (max-width: 1280px) {
  /* 2026-05-14c: two-track shape (.results + .map-col). The prior 3-track
     `280px 1fr 360px` was a stale leftover from the in-layout filter sidebar
     that moved out long ago — at ≤1280px it would have clamped .results to
     the first 280px track. Listings stay at 35%, map fills the rest. */
  .layout { grid-template-columns: minmax(0, 35%) minmax(0, 1fr); }
}
/* ════════════════════════════════════════════════════════════════════════ */
/* MOBILE SHELL — map + draggable bottom sheet (2026-06-16).                  */
/*                                                                            */
/* REPLACES the old `@media (max-width:1100px){ .filters,.map-col{display:    */
/* none} }` hide-block, which made the map vanish on narrow viewports AND     */
/* broke the 1024-1100 band. New contract:                                    */
/*   ≥1024px  → existing desktop two-pane (untouched; the 1280px block above  */
/*              already sets the 35/65 grid for the 1024-1280 band, so the    */
/*              1024-1100 range now renders the two-pane cleanly).            */
/*   ≤1023px  → .map-col is a FULL-SCREEN map (never display:none) and        */
/*              .results becomes a draggable bottom sheet over it.            */
/*                                                                            */
/* Everything here is gated behind @media (max-width:1023px). It does NOT     */
/* touch a single desktop rule. The sheet is DRIVEN by mobile-sheet.js, which */
/* sets body.sheet-peek / .sheet-half / .sheet-full and writes the live drag  */
/* translateY via the --sheet-y custom property. CSS owns the resting detents */
/* (in svh) and all visual styling; JS owns only the transform + state class. */
/* ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* The grid collapses to a single positioning context. .map-col fills it as
     a fixed full-screen layer; .results rides on top as the sheet. height
     uses svh so it survives the mobile toolbar showing/hiding. */
  .layout {
    display: block;
    position: relative;
    grid-template-columns: none;     /* defuse any desktop/inline grid */
    height: auto;
    min-height: 0;
  }

  /* ── Full-screen map ─────────────────────────────────────────────────── */
  /* Fixed under the topbar+filterbar (their combined height is read at
     runtime into --m-chrome-top by mobile-sheet.js; falls back to 112px).
     NEVER display:none — the map is the primary surface in peek/half. */
  .map-col {
    display: block !important;       /* defeat setView()/explore display:none */
    position: fixed;
    top: var(--m-chrome-top, 112px);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    border-left: 0;
    z-index: 1;
  }
  #map { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ── Bottom sheet (the .results column) ──────────────────────────────── */
  /* Fixed to the bottom, full width. Its TOP edge is driven by translateY:
     the sheet is FULL height (92svh) and slides down to reveal less. The
     resting positions are set per body.sheet-* state below; the live drag
     value (while the finger is down) comes from inline --sheet-y written by
     mobile-sheet.js. touch-action:none on the handle, pan-y on the scroller. */
  .results {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Sheet occupies up to 92svh; the visible portion is governed by transform. */
    height: 92svh;
    max-height: 92svh;
    margin: 0;
    padding: 0;                       /* inner padding moves to the scroller */
    background: var(--bg);
    border: 0;
    border-right: 0;
    border-top-left-radius: var(--r-xl);
    border-top-right-radius: var(--r-xl);
    box-shadow: 0 -8px 32px rgba(0,16,46,0.16), 0 -2px 8px rgba(0,16,46,0.08);
    z-index: 50;
    overflow: hidden;                 /* the inner .results-grid scrolls, not this */
    display: flex;
    flex-direction: column;
    /* Resting transform per state; live drag overrides via --sheet-y. The
       three detents (peek/half/full) are expressed as the translateY needed
       to leave 12 / 52 / 92 svh visible. */
    transform: translateY(var(--sheet-y, 40svh));
    transition: transform var(--med);
    will-change: transform;
    touch-action: pan-y;
  }
  /* While the finger is down, kill the settle transition so drag is 1:1. */
  body.sheet-dragging .results { transition: none; }

  /* Resting detents. 92svh sheet:
       peek  → show ~12svh → translateY 80svh
       half  → show ~52svh → translateY 40svh   (DEFAULT landing)
       full  → show ~92svh → translateY 0        */
  body.sheet-peek .results { --sheet-y: 80svh; }
  body.sheet-half .results { --sheet-y: 40svh; }
  body.sheet-full .results { --sheet-y: 0svh; }

  /* Reduced-motion: honor the settle preference (NN/g + checklist). */
  @media (prefers-reduced-motion: reduce) {
    .results { transition: none; }
  }

  /* ── Drag handle + tappable header (NEVER swipe-only) ────────────────── */
  /* Injected by mobile-sheet.js as the first child of .results. The grabber
     is a real button-like control; the whole bar is tappable to cycle
     peek→half→full→half. ≥48px tall hit area. */
  .sheet-grabber {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 48px;
    padding: 8px 16px calc(8px + var(--safe-bottom, 0px) * 0);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;              /* the handle owns the drag gesture */
    background: var(--bg);
    border-top-left-radius: var(--r-xl);
    border-top-right-radius: var(--r-xl);
    border-bottom: 1px solid var(--line);
  }
  .sheet-grabber:active { cursor: grabbing; }
  .sheet-grabber-bar {
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: var(--muted-2);
    opacity: 0.7;
  }
  .sheet-grabber-count {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink-2);
    line-height: 1;
  }

  /* ── Sheet scroller ──────────────────────────────────────────────────── */
  /* The original .results was the scroll container; now the cards live in a
     dedicated scroller below the grabber so the handle stays pinned. */
  .results-head {
    position: static;                /* was sticky in the desktop pane */
    padding: 10px 16px;
  }
  .results > .results-head,
  .results > #list-context-banner,
  .results > #list-sticky-stack,
  .results > #results,
  .results > #paging {
    flex: 0 0 auto;
  }
  /* The cards grid is the part that scrolls. content-visibility skips the
     off-screen card render/paint work — a real win on a long mobile list. */
  .results > #results.results-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 12px var(--m-gutter, 16px) calc(24px + var(--safe-bottom, 0px));
    grid-template-columns: 1fr;      /* stacked 1-col cards on phone */
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }

  /* In peek state the body of the sheet is effectively hidden under the fold;
     keep it non-interactive so stray taps near the bottom edge don't scroll
     a list the user can't see. */
  body.sheet-peek .results > #results.results-grid { overflow: hidden; }

  /* List-view (11-col desktop row) is meaningless on a phone — force the card
     grid even when the user left the desktop view toggle on "List". */
  .results.list-view-active .lrow-header { display: none !important; }

  /* …and reflow the rows themselves. The desktop .lrow is an 11-track grid
     (~530px of fixed columns) — on a 375px phone the numeric cells overlap and
     the address track collapses to nothing. Restack each row into a tappable
     two-line card: address on top, the few facts that matter (status · price ·
     beds/baths/sf) on a second wrapped line. The dense middle cells that have
     no room on a phone are dropped (the full detail is one tap away on the
     property page). The desktop grid is untouched — this only fires ≤1023px. */
  .results-grid.list-view .lrow,
  .results.list-view-active .lrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px var(--m-gutter, 16px);
    min-height: 48px;                /* tap target */
    font-size: var(--t-sm);
    touch-action: manipulation;
  }
  .results-grid.list-view .lrow > *,
  .results.list-view-active .lrow > * {
    white-space: normal;             /* let the address wrap instead of clipping */
  }
  .results-grid.list-view .lrow-addr,
  .results.list-view-active .lrow-addr {
    flex: 1 0 100%;                  /* address owns the first line */
    font-weight: 600;
    overflow: hidden;
  }
  .results-grid.list-view .lrow-price,
  .results.list-view-active .lrow-price { text-align: left; }
  /* Drop the cells that don't earn their width on a phone. $/sf, DOM, the
     price-vs-similar delta and the type chip are all on the property page. */
  .results-grid.list-view .lrow-ppsf,
  .results-grid.list-view .lrow-dom,
  .results-grid.list-view .lrow-vs,
  .results-grid.list-view .lrow-type,
  .results.list-view-active .lrow-ppsf,
  .results.list-view-active .lrow-dom,
  .results.list-view-active .lrow-vs,
  .results.list-view-active .lrow-type { display: none; }

  /* ── Optional Map/List FAB (secondary shortcut, not primary nav) ──────── */
  /* Rendered by mobile-sheet.js; floats bottom-right above the sheet's peek
     height. Tapping toggles sheet full ↔ peek. Allowed by the convention doc
     only as a shortcut. ≥48px. */
  .sheet-fab {
    position: fixed;
    right: 14px;
    bottom: calc(12svh + 14px + var(--safe-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    font-size: var(--t-sm);
    font-weight: 600;
    box-shadow: var(--sh-3);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--fast), opacity var(--fast);
  }
  .sheet-fab:active { transform: scale(0.96); }
  /* When the sheet is full, the FAB flips to a "Map" affordance and rides
     near the TOP of the screen (just under the chrome) so it isn't buried under
     the 92svh sheet. mobile-sheet.js swaps the label ("Map"/"List"); the
     reposition is driven purely by the body.sheet-full state class.
     Hidden entirely while dragging to avoid jitter. */
  body.sheet-full .sheet-fab {
    bottom: auto;
    top: calc(var(--m-chrome-top, 112px) + 14px);
  }
  body.sheet-dragging .sheet-fab { opacity: 0; pointer-events: none; }

  /* Topbar/filterbar density on phone — keep the chrome compact so the map
     gets maximum height. These are additive (do not alter desktop). */
  .topbar { padding: 10px 14px; }
  .filterbar-inner { gap: 6px; }

  /* Any control that doubles as a tappable target gets the no-tap-delay hint. */
  .fbar-trigger, .fchip, .btn-action, .seg, #sort { touch-action: manipulation; }
}

/* Phone-only refinements (≤599) layered on top of the mobile shell. */
@media (max-width: 599px) {
  .searchbar-inner { flex-direction: column; align-items: stretch; }
  .searchbar-input { min-width: auto; }
  .topbar-nav { display: none; }
  /* Single-column cards already set above; tighten the gutter a touch more. */
  .results > #results.results-grid { padding-left: 12px; padding-right: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* Map area-name tooltip (hover popup over neighborhood/MLS polygons)       */
/* ════════════════════════════════════════════════════════════════════════ */
.area-name-tip .mapboxgl-popup-content {
  padding: 6px 10px 7px;
  border-radius: var(--r-md);
  background: rgba(11,15,20,0.92);
  color: white;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
}
.area-name-tip .mapboxgl-popup-tip { display: none; }
.area-name-tip .atip-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.area-name-tip .atip-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* Toolbar buttons — Save Search · My Homes · Notifications                 */
/* ════════════════════════════════════════════════════════════════════════ */
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.tb-btn svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════ */
/* My Homes modal — same size as property detail modal                      */
/* ════════════════════════════════════════════════════════════════════════ */
.myhomes-stack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 92vw;
  max-width: 1180px;
  height: 90vh;
  animation: modalPop 260ms cubic-bezier(.22,.95,.3,1.04);
}
.myhomes-pane {
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.myhomes-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.myhomes-sub {
  flex: 1;
  text-align: left;
  padding-left: 12px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.myhomes-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mh-section { display: flex; flex-direction: column; gap: 10px; }
.mh-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.mh-section-head h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.mh-section-sub {
  font-size: var(--t-xs);
  color: var(--muted);
  font-weight: 500;
}
.mh-add-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--fast);
}
.mh-add-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
/* Lists header now hosts two buttons (+ Upload + + New list). */
.mh-section-actions {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

/* ── Match List bucket cards ───────────────────────────────────────────── */
.mh-bucket-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mh-bucket {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition: all var(--fast);
  text-align: left;
}
.mh-bucket:hover {
  border-color: var(--accent);
  background: var(--bg-soft);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.mh-bk-icon { font-size: 24px; line-height: 1; }
.mh-bk-label {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.mh-bk-count {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.mh-bucket.empty .mh-bk-count { color: var(--muted); }
.mh-bucket.b-super:hover { border-color: #B45309; }
.mh-bucket.b-super .mh-bk-icon { color: #B45309; }
.mh-bucket.b-like:hover { border-color: var(--green); }
.mh-bucket.b-like .mh-bk-icon { color: var(--green); }
.mh-bucket.b-maybe:hover { border-color: var(--purple); }
.mh-bucket.b-maybe .mh-bk-icon { color: var(--purple); }
.mh-bucket.b-dislike:hover { border-color: var(--red); }
.mh-bucket.b-dislike .mh-bk-icon { color: var(--red); }
.mh-bucket.selected {
  border-width: 2px;
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.mh-bucket.selected.b-super   { border-color: #B45309; background: #FEF3C7; box-shadow: 0 0 0 1px #B45309 inset; }
.mh-bucket.selected.b-like    { border-color: var(--green); background: #DCFCE7; box-shadow: 0 0 0 1px var(--green) inset; }
.mh-bucket.selected.b-maybe   { border-color: var(--purple); background: #E0E7FF; box-shadow: 0 0 0 1px var(--purple) inset; }
.mh-bucket.selected.b-dislike { border-color: var(--red); background: #FEE2E2; box-shadow: 0 0 0 1px var(--red) inset; }

/* Match-list toggles row (under the bucket cards) */
.mh-toggles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 4px 0;
}
.mh-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.mh-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}
.mh-toggle-label strong { color: var(--ink); font-weight: 700; }

/* ── Saved Search / List rows ──────────────────────────────────────────── */
.mh-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mh-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: var(--t-sm);
  font-style: italic;
}
.mh-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--fast);
}
.mh-row:hover {
  border-color: var(--accent);
  background: var(--bg-soft);
}
.mh-row.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.mh-row.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.mh-row-check {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  color: white;
  font-size: 12px;
  font-weight: 900;
  transition: all var(--fast);
}
.mh-row.selected .mh-row-check {
  background: var(--accent);
  border-color: var(--accent);
}
.mh-row-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.mh-row-name {
  flex: 1;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-row-count {
  font-size: var(--t-xs);
  color: var(--muted);
  font-weight: 600;
}
.mh-row-new {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.mh-row-manage {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--fast);
}
/* 2026-05-29: primary "Open" button on list rows in My Homes drawer —
   one-click load to main map+grid. Filled accent so it reads as the
   default action; Manage stays as the secondary ghost button. */
.mh-row-open {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--fast);
  margin-right: 4px;
}
.mh-row-open:hover { background: var(--accent-dark, #8a4527); border-color: var(--accent-dark, #8a4527); }
.mh-row-open:disabled { opacity: 0.6; cursor: wait; }
.mh-row-manage:hover {
  background: var(--bg-soft);
  color: var(--accent);
  border-color: var(--accent);
}
/* Per-row Delete (red destructive variant of .mh-row-manage). 2026-06-11. */
.mh-row-delete { color: #DC2626; border-color: #F2C9C9; padding: 4px 8px; }
.mh-row-delete:hover {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #DC2626;
}

/* ── Footer action bar ─────────────────────────────────────────────────── */
.myhomes-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.mh-foot-summary {
  flex: 1;
  font-size: var(--t-sm);
  color: var(--muted);
  font-weight: 500;
}
#myhomes-foot.active .mh-foot-summary { color: var(--ink); font-weight: 700; }

/* ── My Homes — Manage detail view ──────────────────────────────────────── */
.myhomes-manage { gap: 18px; }
.mh-manage-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.mh-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--fast);
}
.mh-back-btn:hover { background: var(--bg-soft); color: var(--accent); border-color: var(--accent); }
.mh-manage-kind {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mh-manage-id {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mh-manage-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.mh-manage-id-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mh-manage-name-input {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  outline: none;
  padding: 2px 0;
  letter-spacing: -0.01em;
  width: 100%;
  transition: border-color var(--fast);
}
.mh-manage-name-input:focus { border-bottom-color: var(--accent); }
.mh-manage-meta {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
}
.mh-manage-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.mh-action {
  padding: 7px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--fast);
  border: 1px solid transparent;
}
.mh-action-ghost {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink-3);
}
.mh-action-ghost:hover { background: var(--bg-soft); color: var(--accent); border-color: var(--accent); }
.mh-action-danger {
  background: var(--bg);
  border-color: var(--line);
  color: var(--red);
}
.mh-action-danger:hover { background: var(--red); color: white; border-color: var(--red); }
/* 2026-05-29: primary action variant for "Open on Map" — the headline button
   in the Manage list view. Bold filled accent style so it reads as the
   default action, not a peer to Save name / Share / Delete. */
.mh-action-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 700;
}
.mh-action-primary:hover { background: var(--accent-dark, #8a4527); border-color: var(--accent-dark, #8a4527); }

/* 2026-05-29: list-context banner — appears above the results grid when the
   user opens a list "in the main view" via the Open on Map action. Carries
   the list icon + name + count + a Close-list button. Border-left tinted
   to the list color so different lists visually distinct at a glance. */
.list-context-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
}
.list-context-banner .lcb-icon { font-size: 18px; line-height: 1; }
.list-context-banner .lcb-name { font-family: var(--font-serif); font-weight: 700; color: var(--ink); }
.list-context-banner .lcb-meta { color: var(--muted); font-size: var(--t-xs); }
.list-context-banner .lcb-close {
  margin-left: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--fast);
}
.list-context-banner .lcb-close:hover { background: var(--red); color: white; border-color: var(--red); }
.mh-manage-section { display: flex; flex-direction: column; gap: 10px; }
.mh-manage-hint {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: 0;
  font-style: italic;
}
.mh-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mh-filter-chip {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
}
.mh-manage-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.mh-listing-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: all var(--fast);
  position: relative;
}
.mh-listing-card:hover { border-color: var(--accent); }
.mh-listing-card-thumb {
  width: 100%;
  height: 96px;
  background: var(--bg-soft) center/cover;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
}
.mh-listing-card-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--ink);
}
/* "(list was $X)" — small muted line under the SOLD price on closed
   MyHomes cards. Same family as the address. */
.mh-listing-card-was {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 1px;
  font-style: italic;
}
.mh-listing-card-addr {
  font-size: var(--t-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 2026-05-29: mini property cards for the lists Manage view.
   Photo at the top, body (price + addr + stats + actions) below.
   Mirrors the main grid's .lcard pattern but in a compact size
   sized for the Match List drawer. */
.mh-listing-card { padding: 0; overflow: hidden; }
.mh-listing-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-2, #f4ede4);
  overflow: hidden;
}
.mh-listing-card-photo .lcard-img-inner {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mh-listing-card-photo.mh-no-photo {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f0e6d8 0%, #e6dac7 100%);
  color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
}
.mh-listing-card-photo.mh-no-photo span { opacity: 0.7; }

/* Branded photo placeholder (stopgap 2026-06-04) — shown on cards whose photo
   is still draining in the R2 backfill (or whose fallback URL failed). Applied
   to .lcard-img-inner / .pvc-photo via JS (_applyPhotoPlaceholder). On-brand,
   never a blank cell. */
.ph-placeholder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ece4d7 !important;
  background-image: linear-gradient(135deg, #f3eee6 0%, #e7dccb 100%) !important;
  color: #00102E;
  text-align: center;
}
.ph-placeholder svg { width: 34px; height: 34px; opacity: 0.5; }
.ph-placeholder .ph-ph-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: #6b5e4b; opacity: 0.85;
}
.mh-listing-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}
.mh-listing-card-stats {
  font-size: var(--t-xs);
  color: var(--ink-3, var(--muted));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.mh-listing-card-stats b { color: var(--ink); font-weight: 700; }
.mh-listing-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.mh-listing-card-open,
.mh-listing-card-remove {
  flex: 1;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: var(--r-pill);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-3);
  transition: all var(--fast);
}
.mh-listing-card-open:hover { background: var(--accent); color: white; border-color: var(--accent); }
.mh-listing-card-remove:hover { background: var(--red); color: white; border-color: var(--red); }

/* ── Zenlist-style status tabs (multi-select) ────────────────────────────── */
.mh-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.mh-stab {
  background: none;
  border: 0;
  padding: 6px 2px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--fast);
}
.mh-stab:hover { color: var(--ink); }
.mh-stab.active { color: var(--ink); }
.mh-stab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.mh-stab-cnt {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.mh-stab.active .mh-stab-cnt { color: var(--ink); }

/* Rated Properties row — chip-style toggle buttons */
.mh-rated-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mh-rstab {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--fast);
}
.mh-rstab:hover { background: var(--bg-soft); color: var(--ink); }
.mh-rstab .mh-rs-icon { font-size: 14px; }
.mh-rstab .mh-rs-cnt {
  background: var(--bg-soft);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.mh-rstab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mh-rstab.active .mh-rs-cnt { background: var(--accent); color: white; }
.mh-rstab[data-rated="super"].active   { background: #FEF3C7; border-color: #B45309; color: #B45309; }
.mh-rstab[data-rated="super"].active .mh-rs-cnt { background: #B45309; }
.mh-rstab[data-rated="like"].active    { background: #DCFCE7; border-color: var(--green); color: var(--green); }
.mh-rstab[data-rated="like"].active .mh-rs-cnt { background: var(--green); }
.mh-rstab[data-rated="maybe"].active   { background: #E0E7FF; border-color: var(--purple); color: var(--purple); }
.mh-rstab[data-rated="maybe"].active .mh-rs-cnt { background: var(--purple); }
.mh-rstab[data-rated="dislike"].active { background: #FEE2E2; border-color: var(--red); color: var(--red); }
.mh-rstab[data-rated="dislike"].active .mh-rs-cnt { background: var(--red); }
.mh-rstab-all { font-style: italic; }
.mh-rstab-all.active { background: var(--ink); border-color: var(--ink); color: white; }

/* Rating badge that appears on each .mh-listing-card when the user has rated it */
.mh-listing-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
  z-index: 2;
}
.mh-listing-rating.mr-super   { background: #FCD34D; color: #B45309; }
.mh-listing-rating.mr-like    { background: #86EFAC; color: #166534; }
.mh-listing-rating.mr-maybe   { background: #C7D2FE; color: #3730A3; }
.mh-listing-rating.mr-dislike { background: #FCA5A5; color: #991B1B; }

/* ════════════════════════════════════════════════════════════════════════ */
/* Add-to-list popover — opens when user clicks the heart on a result card  */
/* ════════════════════════════════════════════════════════════════════════ */
.addlist-pop {
  position: absolute;
  z-index: 1500;
  min-width: 240px;
  max-width: 280px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  overflow: hidden;
  animation: alPopIn 140ms cubic-bezier(.22,.95,.3,1.04);
}
@keyframes alPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.addlist-arrow {
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.addlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
}
.addlist-title {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.addlist-close {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.addlist-close:hover { color: var(--ink); }
.addlist-body {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}
.addlist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--fast);
  font-size: var(--t-sm);
}
.addlist-row:hover { background: var(--bg-soft); }
.addlist-row .al-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  color: white;
  font-size: 11px;
  font-weight: 900;
}
.addlist-row.checked .al-check { background: var(--accent); border-color: var(--accent); }
.addlist-row .al-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: 12px;
  flex-shrink: 0;
}
.addlist-row .al-name { flex: 1; font-weight: 600; color: var(--ink); }
.addlist-row .al-cnt {
  font-size: var(--t-xs);
  color: var(--muted);
  font-weight: 600;
}
.addlist-foot {
  border-top: 1px solid var(--line);
  padding: 8px;
}
.addlist-newbtn {
  width: 100%;
  background: none;
  border: 1px dashed var(--line);
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 700;
  padding: 7px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--fast);
}
.addlist-newbtn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-style: solid;
}

/* Heart on result cards — checked state styling */
.lcard-heart {
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 0;
  color: var(--ink-3);
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: all var(--fast);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.lcard-heart:hover { color: var(--red); transform: scale(1.08); }
.lcard-heart.in-list { color: var(--red); }
.lcard-heart.in-list::before { content: '♥'; }
.lcard-heart:not(.in-list)::before { content: '♡'; }
.lcard-heart::before { display: block; }

/* ════════════════════════════════════════════════════════════════════════ */
/* Save Search dialog — small centered card                                 */
/* ════════════════════════════════════════════════════════════════════════ */
.ss-card {
  position: relative;
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  width: 92vw;
  max-width: 460px;
  padding: 24px 26px 20px;
  animation: modalPop 220ms cubic-bezier(.22,.95,.3,1.04);
  z-index: 2;
}
.ss-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 6px;
}
.ss-sub {
  font-size: var(--t-sm);
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.ss-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.ss-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-md);
  background: var(--bg-soft);
  color: var(--ink);
  outline: none;
  transition: border-color var(--fast), background var(--fast);
}
.ss-input:focus {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ss-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* Notifications dialog — per-saved-search rows */
.notif-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  margin: 14px 0 4px;
}
.notif-row {
  display: grid;
  grid-template-columns: 22px 1.4fr 1.6fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.notif-row.disabled { opacity: 0.55; }
.notif-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}
.notif-row .notif-name {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--t-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-row input[type="email"],
.notif-row select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-sm);
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
.notif-row input[type="email"]:focus,
.notif-row select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ───── Explore mode (Map-Only with left side panels) ───── */
body.explore-mode .results { display: none !important; }
body.explore-mode .map-col { display: block !important; }

.explore-panels {
  /* Anchored INSIDE .map-col so the panel always fits inside the map and
     never overlaps the Active Filters bar above. */
  position: absolute;
  top: 12px;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 12px;
  pointer-events: none; /* let map underneath capture clicks except on panels */
  z-index: 50;
  max-width: calc(100% - 24px);
  overflow-x: auto;
}
.ex-panel { max-height: 100%; overflow-y: auto; }
body:not(.explore-mode) .explore-panels { display: none; }

.ex-panel {
  pointer-events: auto;
  width: 380px;
  flex: 0 0 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
}
.ex-panel.is-locked { border-color: #0A5BCC; box-shadow: 0 16px 40px rgba(10,91,204,0.18); }
.ex-panel.is-subject.is-locked { border-color: #047857; box-shadow: 0 16px 40px rgba(4,120,87,0.18); }

.ex-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.ex-head-status { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.ex-status {
  text-transform: uppercase; letter-spacing: 0.04em;
  background: #ECFDF5; color: #047857;
  padding: 3px 8px; border-radius: 999px; font-weight: 700;
}
.ex-locked-chip {
  background: #EFF6FF; color: #1E40AF;
  padding: 3px 8px; border-radius: 999px; font-weight: 700;
}
.ex-panel.is-subject.is-locked .ex-locked-chip { background: #ECFDF5; color: #047857; }
.ex-close {
  background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 0 6px;
}
.ex-close:hover { color: var(--ink); }

/* Small square thumbnail at top of the Explore panel — click opens full
   property gallery. Compact so the panel stays scannable. */
/* Photo box that fills the panel width as a perfect square. The whole image
   is visible (background-size: contain) — no cropping, no zoom. Background
   color fills any letterbox space. */
.ex-photo {
  position: relative;
  width: 352px;
  height: 352px;                  /* fixed square — aspect-ratio gets squashed by flex column parents */
  max-width: calc(100% - 28px);   /* shrink on narrow panels */
  margin: 12px auto 6px;
  border-radius: 12px;
  background-size: contain;       /* show ENTIRE photo */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1f2937;      /* dark letterbox so the photo pops */
  transition: opacity 0.15s ease;
  flex: 0 0 352px;                /* hard pin: don't grow, don't shrink, basis 352 */
  cursor: pointer;
}
.ex-photo:hover { opacity: 0.92; }
.ex-photo-empty {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65); font-size: 12px; text-align: center;
}
.ex-photo-loading {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: rgba(255,255,255,0.65); font-size: 11px; white-space: nowrap;
}
/* Strategy / HOT DEAL badges overlay the photo (top-left) */
.ex-photo-badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none;
  max-width: calc(100% - 16px);
}
.ex-photo-badges .badge {
  padding: 3px 8px; border-radius: 999px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.ex-price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px 4px;
}
.ex-price { font-size: 22px; font-weight: 800; color: var(--ink); }
.ex-ppsf { color: var(--muted); font-size: 12px; }

.ex-addr { padding: 0 14px; font-weight: 600; color: var(--ink); }
.ex-city { padding: 0 14px 10px; color: var(--muted); font-size: 12px; }

/* Icon-rich property details grid (mirrors the property-page sidebar) */
.ex-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #FAFAFA;
}
.ex-cell { display: flex; align-items: flex-start; gap: 8px; }
.ex-cell-icon { color: #047857; flex-shrink: 0; margin-top: 1px; line-height: 0; }
.ex-cell-text { display: flex; flex-direction: column; min-width: 0; }
.ex-cell-label {
  font-size: 11px; color: var(--muted);
  font-weight: 600; letter-spacing: 0.02em;
}
.ex-cell-value {
  font-size: 12px; color: var(--ink);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ex-deal { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ex-verdict {
  font-weight: 700; padding: 8px 10px; border-radius: 8px; text-align: center;
}
.ex-verdict-hot  { background: #FEE2E2; color: #B91C1C; }
.ex-verdict-good { background: #DCFCE7; color: #047857; }
.ex-verdict-fair { background: #FEF3C7; color: #92400E; }
.ex-verdict-low  { background: #F3F4F6; color: var(--muted); }
.ex-verdict-unknown { background: #F3F4F6; color: var(--muted); font-weight: 500; }

.ex-delta {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid var(--line); background: #fff;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; text-align: left; gap: 4px;
  transition: border-color .15s, background .15s;
}
.ex-delta:hover { border-color: var(--ink); background: var(--bg-soft); }
.ex-delta-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ex-delta-num { font-size: 16px; font-weight: 800; }
.ex-delta-hint { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.ex-delta.is-good .ex-delta-num { color: #047857; }
.ex-delta.is-mid  .ex-delta-num { color: #92400E; }
.ex-delta.is-bad  .ex-delta-num { color: #B91C1C; }

.ex-actions { display: flex; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.ex-btn {
  flex: 1; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-weight: 600; font-size: 12px; cursor: pointer;
}
.ex-btn:hover { background: var(--bg-soft); }
.ex-btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.ex-btn-primary:hover { opacity: 0.92; background: var(--ink); color: #fff; }
.ex-btn.is-active { background: #0A5BCC; color: #fff; border-color: #0A5BCC; }
.ex-btn.is-active:hover { background: #0A5BCC; }

/* Map markers — Explore mode highlights */
.marker.is-explored {
  outline: 3px solid #0A5BCC;
  z-index: 999;
  box-shadow: 0 0 0 6px rgba(10,91,204,0.16);
}
.marker.is-locked {
  outline: 3px solid #047857;
  box-shadow: 0 0 0 6px rgba(4,120,87,0.20);
}

/* Explore mode — ensure the map fills the layout when results column is hidden */
body.explore-mode .layout {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
body.explore-mode .map-col {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}
body.explore-mode .results {
  display: none !important;
}

/* Top filter bar — always-visible view toggle next to All Filters */
.fbar-view-toggle {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.fbar-view-toggle .seg {
  border: 0;
  background: #fff;
  color: var(--ink);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid var(--line);
}
.fbar-view-toggle .seg:last-child { border-right: 0; }
.fbar-view-toggle .seg.active { background: var(--ink); color: #fff; }
.fbar-view-toggle .seg:hover:not(.active) { background: var(--bg-soft); }

/* ───── Redfin-style pill card popup (non-Explore views) ───── */
.mapboxgl-popup.pill-card-popup .mapboxgl-popup-tip { display: none; }
.mapboxgl-popup.pill-card-popup .mapboxgl-popup-content {
  padding: 0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  overflow: hidden;
  background: #fff;
}
.pill-card { width: 320px; cursor: pointer; }
.pc-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover; background-position: center; background-color: #F3F4F6;
}
.pc-img-badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none;
}
.pc-img-badges .badge {
  padding: 3px 8px; border-radius: 999px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.pc-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.95);
  font-size: 18px; line-height: 1; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.pc-close:hover { background: #fff; }
.pc-body { padding: 12px 14px; }
.pc-price-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.pc-price { font-size: 18px; font-weight: 800; color: var(--ink); }
.pc-score {
  font-weight: 800; font-size: 13px;
  padding: 3px 8px; border-radius: 999px;
}
.pc-score.deal-hot  { background: var(--red-soft, #FEE2E2);   color: #B91C1C; }
.pc-score.deal-good { background: #DCFCE7; color: #047857; }
.pc-score.deal-fair { background: #FEF3C7; color: #92400E; }
.pc-score.deal-low  { background: #F3F4F6; color: var(--muted); }
.pc-addr { font-size: 13px; font-weight: 600; color: var(--ink); }
.pc-city { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pc-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.pc-meta span:not(:last-child)::after {
  content: '·'; margin-left: 8px; color: var(--line);
}

/* Active pill (highlighted) — stays visible after card closes */
.marker.is-active {
  outline: 3px solid #0A5BCC;
  z-index: 999;
  box-shadow: 0 0 0 6px rgba(10,91,204,0.20);
  transform: scale(1.08);
}

/* Area Selector button — visual cue when auto-hidden by zoom */
.map-tool-btn.is-auto-hidden {
  opacity: 0.55;
  background: repeating-linear-gradient(135deg, #fff 0 6px, #F3F4F6 6px 12px);
}
.map-tool-btn.is-auto-hidden::after {
  content: 'auto';
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

/* Area Selector first-time-off popover */
.area-selector-popup {
  z-index: 9999;
  background: #0A5BCC;
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 16px 36px rgba(10,91,204,0.36);
  max-width: 320px;
  font-size: 13px;
  line-height: 1.45;
  animation: aspIn 0.25s ease-out;
}
.area-selector-popup .asp-arrow {
  position: absolute; top: -6px; right: 56px;
  width: 12px; height: 12px;
  background: #0A5BCC;
  transform: rotate(45deg);
  border-radius: 2px;
}
.area-selector-popup .asp-text { display: flex; flex-direction: column; gap: 4px; }
.area-selector-popup strong {
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
}
.area-selector-popup .asp-ok {
  margin-top: 8px;
  padding: 6px 14px;
  border: 0; border-radius: 999px;
  background: #fff; color: #0A5BCC;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
}
.area-selector-popup .asp-ok:hover { background: rgba(255,255,255,0.92); }
@keyframes aspIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Pulse on the Area Selector button while the popover is showing */
.map-tool-btn.is-pulse {
  animation: aspBtnPulse 1.4s ease-in-out 0s 6;
}
@keyframes aspBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10,91,204,0); }
  50%      { box-shadow: 0 0 0 8px rgba(10,91,204,0.30); }
}

/* ═══ Comp Analysis 85% overlay shell ═══════════════════════════════════
   2026-05-27: bumped z-index 5000 -> 9700 to preserve the original invariant
   that ca-shell sits ABOVE the property detail modal. Modal was raised
   1000 -> 9500 so the area stats strip (8500) and floating filter pill bar
   (8550) no longer float in front of it. ca-shell now stays just under
   .as-modal (10000) + lightbox (10000). */
.ca-shell {
  position: fixed; inset: 0; z-index: 9700;
  display: flex; align-items: center; justify-content: center;
}
.ca-shell.hidden { display: none; }
.ca-shell-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(3px);
}
.ca-shell-frame {
  position: relative;
  width: 92vw; height: 92vh;
  max-width: 1800px;
  background: #FFF;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  overflow: hidden;
}
.ca-shell-frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* ── Quad Search active suppression ──────────────────────────────────────
 * When body.qs-active is set (toggled by the quad-search:toggle event in
 * search.js), hide every map surface that paints strategy-driven results.
 * The Quad Search v2 layer paints its own price-pill MLS dots, so showing
 * the legacy strategy markers + legend on top would just clutter the map.
 *
 * Belt-and-suspenders with the JS markers.remove() in search.js — even if
 * a stray fetch finishes after the toggle, its markers still won't render
 * because .marker-wrap is display:none.
 */
body.qs-active .marker-wrap { display: none !important; }
body.qs-active .map-legend { display: none !important; }

/* Mute the legacy filterbar chips while Quad Search owns the map. The
 * QS button itself stays visible + un-muted (it's the active mode). The
 * Lot Search chip also stays clickable so the user can pivot modes.
 */
body.qs-active .fbar-trigger,
body.qs-active .fbar-allfilters {
  opacity: 0.45;
  filter: grayscale(0.5);
}
body.qs-active #open-quad-search {
  opacity: 1;
  filter: none;
  border-color: #15803d;
  color: #15803d;
}
body.qs-active #open-lot-search {
  opacity: 0.85;
  filter: none;
}

/* Side-list banner styling — re-uses .empty-state but tags it for visual
 * differentiation (slight green accent matching the QS button).
 */
.empty-state.qs-active-banner {
  border-left: 3px solid #15803d;
  background: rgba(21, 128, 61, 0.04);
}
.empty-state.qs-active-banner h4 {
  color: #15803d;
}

/* ── Quad Search map-side legend card ────────────────────────────────────
 * Fixed-position card on the lower-left of the map. Visible only when
 * Quad Search is active (gated on body.qs-active so it auto-hides when
 * the drawer closes). Mirrors the Deal-score swatches + Border gradient
 * legend that's also inside the drawer, but at-glance reference is on
 * the map itself so users don't have to scroll the panel.
 */
.qs-legend-card {
  display: none;  /* default hidden — flips on with body.qs-active */
  position: fixed;
  /* 2026-05-04: moved from bottom-left to top-left so it sits below the
   * filter bar at the top of the page and out of the way of the map's
   * bottom-edge controls. Constrained max-height + internal scroll in case
   * the viewport is shorter than the legend itself. */
  left: 16px;
  top: 80px;
  bottom: auto;
  width: 280px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  font-size: 11px;
  color: #444;
  z-index: 5;
  pointer-events: auto;
}
body.qs-active .qs-legend-card { display: block; }

.qs-legend-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.qs-legend-card .qs-legend-section { margin-bottom: 8px; }
.qs-legend-card .qs-legend-section:last-child { margin-bottom: 0; }
.qs-legend-card .qs-legend-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.qs-legend-card .qs-legend-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
.qs-legend-card .qs-legend-swatches span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  color: #555;
}
.qs-legend-card .qs-legend-swatches i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Investment Search sub-picker modal (investment-search-picker.js) ──
 * Shown when user clicks the renamed "Investment Search" button. Six cards;
 * only Quad Search is live, the other five are placeholders.
 */
.is-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-picker-overlay[hidden] { display: none; }
.is-picker-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  font-family: inherit;
}
.is-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.is-picker-header h2 {
  margin: 0;
  font-size: 22px;
  color: #111827;
}
.is-picker-close {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  color: #6b7280;
  padding: 0 4px;
}
.is-picker-close:hover { color: #111827; }
.is-picker-intro {
  color: #6b7280;
  font-size: 14px;
  margin: 0 0 20px;
}
.is-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.is-picker-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background-color 0.15s;
  font-family: inherit;
}
.is-picker-card:not(.is-picker-disabled):hover {
  border-color: #15803d;
  background: #f0fdf4;
}
.is-picker-card.is-picker-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.is-picker-quad { border-color: #15803d; }
.is-picker-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  color: #111827;
}
.is-picker-desc {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}
.is-picker-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}
.is-picker-status-live {
  background: #15803d;
  color: #fff;
}
.is-picker-status-coming {
  background: #f3f4f6;
  color: #6b7280;
}
@media (max-width: 480px) {
  .is-picker-grid { grid-template-columns: 1fr; }
}

/* Toast for "coming soon" placeholder picks. */
.is-picker-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: #111827;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 90vw;
}
.is-picker-toast.is-picker-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ──────────────────────────────────────────────────────────────────────
   Map labels toggle (parcel-card-extras.js)
   Floating button + 5 per-line toggles. Global across all views — the
   button mounts inside #map; visibility classes (.hide-mls-price etc.)
   sit on <body> and target [data-mhc-field=...] inside parcel popups.
   Created 2026-05-04 to replace the QS-only label-toggle panel.
   ────────────────────────────────────────────────────────────────────── */
.mlt-wrap {
  /* 2026-05-04 fix: was `position: absolute` inside #map — that broke
     Mapbox init (Mapbox refuses to initialize a non-empty container).
     Now mounts on document.body with position:fixed and JS-driven
     coordinates that track the map element's bounding box. */
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 18;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.mlt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #fff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.06);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
}
.mlt-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.mlt-btn[aria-expanded="true"] { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }
.mlt-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.06);
  padding: 10px 12px 8px;
}
.mlt-panel.hidden { display: none; }
.mlt-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 2px;
}
.mlt-subtitle {
  font-size: 10.5px;
  color: #9ca3af;
  margin-bottom: 8px;
}
.mlt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  user-select: none;
}
.mlt-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: #2563eb;
  width: 14px;
  height: 14px;
}
.mlt-row:hover { background: #f9fafb; border-radius: 4px; }

/* Visibility classes — applied to <body> by parcel-card-extras.js. They
   hide individual lines inside parcel popups by data-mhc-field attr. The
   selectors below cover the off-market parcel popup (mhc-* lines in
   search.js _showParcelClickCard) and any future popup that adopts the
   same data-mhc-field convention. */
body.hide-mls-price       [data-mhc-field="mls-price"]       { display: none !important; }
body.hide-projected-price [data-mhc-field="projected-price"] { display: none !important; }
body.hide-lot-dims        [data-mhc-field="lot-dims"]        { display: none !important; }
body.hide-zoning          [data-mhc-field="zoning"]          { display: none !important; }
body.hide-deal-pct        [data-mhc-field="deal-pct"]        { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════ */
/* Listing card v3 — checkbox + save/share + price-row (2026-05-06)        */
/* ════════════════════════════════════════════════════════════════════════ */

/* Selection checkbox — top-right of photo, replaces the old heart. */
.lcard-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,16,46,0.15);
  z-index: 4;
  transition: transform var(--fast), background var(--fast);
}
.lcard-check:hover { transform: scale(1.08); }
.lcard-check-input { position: absolute; opacity: 0; pointer-events: none; }
.lcard-check-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--line);
  background: var(--bg);
  position: relative;
  transition: background var(--fast), border-color var(--fast);
}
.lcard-check-input:checked + .lcard-check-box,
.lcard-check.checked .lcard-check-box {
  background: #2563EB;
  border-color: #2563EB;
}
.lcard-check-input:checked + .lcard-check-box::after,
.lcard-check.checked .lcard-check-box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lcard.is-selected { box-shadow: 0 0 0 2px #2563EB, var(--sh-2); }

/* Save + Share buttons — bottom-right of photo, two icons in a pill.
   2026-05-13 (James): when hidden (opacity:0), the action region MUST also
   be pointer-events:none so a click in the bottom-right of the photo
   bubbles up to .lcard and opens the property modal. Without this, an
   invisible button silently absorbed photo clicks. */
.lcard-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0,16,46,0.15);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast);
}
.lcard:hover .lcard-actions { opacity: 1; pointer-events: auto; }
.lcard-actbtn {
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--fast);
}
.lcard-actbtn:hover { background: rgba(0,0,0,0.06); }

/* Row 1 — price alone on its own row. */
.lcard-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
/* lcard-addr-tail removed: pill moved to photo overlay (top-right) */
.lcard-row1 .lcard-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lcard-row1 .lcard-price .muted-prefix {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-right: 4px;
}
/* "Price vs Similar Homes" button — two-line pill, clickable, opens
   comp-analysis. Muted brand palette: --accent-moss (olive) for below,
   --accent-terra (rust) for above. */
/* Pill row — sits above the price, right-aligned. */
.lcard-vsmedian-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 4px;
}
/* Comp delta pill — fully rounded two-line capsule.
   Tight gap between label + value; olive border below, terra above. */
.lcard-vsmedian {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  background: transparent;
  color: var(--muted);
  padding: 3px 12px 4px;
  margin: 0;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.lcard-vsmedian:hover {
  background: var(--bg-soft);
  border-color: var(--ink-3);
}
.lcard-vsmedian-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
  line-height: 1;
  margin-bottom: 0;
}
.lcard-vsmedian-pct {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: inherit;
  line-height: 1;
  margin-top: 1px;  /* tiny gap, much tighter than before */
}
.lcard-vsmedian.below { border-color: var(--accent-soft); color: var(--accent-moss); }
.lcard-vsmedian.below:hover { background: #f3f4ec; border-color: var(--accent-moss); }
.lcard-vsmedian.above { border-color: var(--accent-terra-soft); color: var(--accent-terra); }
.lcard-vsmedian.above:hover { background: #fbeee6; border-color: var(--accent-terra); }
.lcard-vsmedian.neutral { color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════════ */
/* Status chip layout — color tokens live in design-system.css.            */
/* Status chip sits on the LEFT, comp pill on the RIGHT, above the price.  */
/* ════════════════════════════════════════════════════════════════════════ */
.lcard-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 4px;
}
.lcard-status-row .lcard-vsmedian-row {
  margin: 0;  /* row already provides bottom-margin */
}
/* List view row: smaller chip in the Status cell. */
.lr-status .lcard-status-chip {
  font-size: 8px;
  padding: 2px 9px 3px;
}
/* Marker hover popup: smaller inline chip. */
.marker-hover-card .lcard-status-chip {
  font-size: 8px;
  padding: 2px 8px 2px;
}
/* MyHomes card chip — small badge on the line above the price. */
.mh-listing-card-status {
  margin-bottom: 4px;
}
.mh-listing-card-status .lcard-status-chip {
  font-size: 8px;
  padding: 2px 9px 3px;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* Selected Properties section header                                       */
/* ════════════════════════════════════════════════════════════════════════ */
.results-section { margin-bottom: 24px; }
.results-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.results-section-title-muted { color: var(--muted); border-bottom-color: var(--line-2); }
.results-section-title .rs-count {
  font-size: 10px;
  background: var(--bg-soft-2);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
}
.results-section-selected .results-section-title { color: #2563EB; border-bottom-color: #2563EB; }
.results-section-selected .results-section-title .rs-count { background: #DBEAFE; color: #1E40AF; }
.results-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
/* 2026-06-11 (James): the Selected / All Properties section wrappers must
   span the FULL width of the 2-col #results grid. Without this they each
   land in one of the two grid tracks and sit side-by-side, ~1 card wide. */
.results-grid > .results-section { grid-column: 1 / -1; }
/* Pinned "Selected Properties" lays out 2 cards per row, so e.g. 4 selected
   fill the first 2 rows of the results column (instead of one tall column). */
.results-section-selected .results-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .results-section-selected .results-section-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════ */
/* Actions dropdown (results-controls)                                      */
/* ════════════════════════════════════════════════════════════════════════ */
.actions-dd { position: relative; }
.actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.actions-btn:hover { background: var(--bg-soft); }
.actions-btn.open { background: var(--bg-soft); border-color: var(--ink-3); }
/* Lit state — when ≥1 row is selected. Brand ink-navy with white text. */
.actions-btn.has-selection {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.actions-btn.has-selection:hover { background: var(--ink-2); border-color: var(--ink-2); }
.actions-btn.has-selection .actions-caret { opacity: 1; }
.actions-caret { font-size: 10px; opacity: 0.7; }
.actions-divider {
  height: 1px;
  background: var(--line-2);
  margin: 4px 6px;
}
.actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  z-index: 50;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.actions-menu.hidden { display: none; }
.actions-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: var(--t-sm);
  background: transparent;
  border: 0;
  text-align: left;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--fast);
}
.actions-item:hover { background: var(--bg-soft); }
.actions-item svg { flex-shrink: 0; color: var(--muted); }
/* 2026-05-29: danger styling for "Remove from list" so destructive intent
   reads at a glance. Pre-confirm + still gated by a window.confirm() in JS. */
.actions-item-danger { color: var(--red); font-weight: 700; }
.actions-item-danger svg { color: var(--red); }
.actions-item-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.actions-submenu-wrap { position: relative; }
.actions-sub-caret { margin-left: auto; font-size: 10px; opacity: 0.6; }
.actions-submenu {
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  min-width: 160px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 51;
}
.actions-submenu.hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════════ */
/* Mini-toast                                                                */
/* ════════════════════════════════════════════════════════════════════════ */
.mini-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--sh-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
  z-index: 1000;
}
.mini-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 2026-05-27 TOPBAR + FILTER BAR REDESIGN                                  */
/* Cream-bg topbar with logo + search + 4 colored action buttons + bell +  */
/* nav links + JM avatar dropdown. Filter row collapses to state-aware     */
/* chips. Old styles above kept intact for compat.                          */
/* ════════════════════════════════════════════════════════════════════════ */

.topbar--redesign {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Override the design-system.css .topbar backdrop blur + white tint */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.topbar--redesign .topbar-brand {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 0;
}
.topbar-logo-img {
  height: 56px;
  width: auto;
  display: block;
  transition: transform var(--fast);
}
.topbar--redesign .topbar-brand:hover .topbar-logo-img {
  transform: translateY(-1px);
}

/* CENTER ACTIONS — search input + action buttons + bell */
.topbar--redesign .topbar-actions {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.search-input-wrap {
  flex: 1;
  position: relative;
  min-width: 240px;
  max-width: 480px;
}
.search-input-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-input-wrap input.search-input,
.topbar--redesign .search-input-wrap input#loc-input {
  width: 100%;
  height: 42px;
  background: #f5efe2;
  border: 1px solid #e8dfc9;
  border-radius: 999px;
  padding: 0 18px 0 42px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: all var(--fast);
}
.search-input-wrap input.search-input::placeholder,
.topbar--redesign .search-input-wrap input#loc-input::placeholder {
  color: #94896d;
}
.search-input-wrap input.search-input:focus,
.search-input-wrap input.search-input.is-focused,
.topbar--redesign .search-input-wrap input#loc-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 16, 46, .18);
  background: #fffdf7;
}

/* The existing #suggest-dropdown (address autocomplete) — repositioned for
   the new topbar input. */
.topbar--redesign .search-input-wrap #suggest-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: 440px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .22);
  z-index: 95;
}

/* "Near you" curated-area suggestion dropdown — opened by the
   "+ Add Area" CTA inside the Areas chip panel. Anchored to the
   topbar search input. */
.topbar-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 440px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .22);
  max-height: 360px;
  overflow-y: auto;
  z-index: 96;
  animation: fadeSlideDown 160ms ease;
}
.topbar-suggest.hidden { display: none; }
.topbar-suggest .suggest-header {
  padding: 10px 14px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}
.topbar-suggest .suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--fast);
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}
.topbar-suggest .suggest-item:last-child { border-bottom: 0; }
.topbar-suggest .suggest-item:hover { background: var(--bg-soft); }
.topbar-suggest .suggest-item .icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--body, #475569);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topbar-suggest .suggest-item .name {
  font-size: 13px;
  color: var(--ink);
  flex: 1;
  font-weight: 500;
}
.topbar-suggest .suggest-item .name small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  margin-top: 1px;
}
.topbar-suggest .suggest-item .cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--body, #475569);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--line);
}
.topbar-suggest .suggest-item.added .name { color: var(--muted); }
.topbar-suggest .suggest-item.added .added-tag {
  font-size: 10px;
  color: #15803d;
  font-weight: 700;
  background: #dcfce7;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Action buttons (Save / Homes / Stats / View Mode) — pill-style with
   colored backgrounds. Override the legacy .btn-* styles when in the
   redesigned topbar. */
.topbar--redesign .btn-action {
  height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: inherit;
  transition: all var(--fast);
  white-space: nowrap;
  box-shadow: none;
}
.topbar--redesign .btn-action svg { flex-shrink: 0; }
.topbar--redesign .btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, .18);
}
.topbar--redesign .btn-action-save  { background: #dc2626; }
.topbar--redesign .btn-action-save:hover { background: #b91c1c; }
.topbar--redesign .btn-action-homes { background: #00102E; }
.topbar--redesign .btn-action-homes:hover { background: #0a1d44; }
.topbar--redesign .btn-action-stats { background: #2563eb; }
.topbar--redesign .btn-action-stats:hover { background: #1d4ed8; }
.topbar--redesign .btn-action-view  { background: #2563eb; }
.topbar--redesign .btn-action-view:hover { background: #1d4ed8; }
/* Disabled Area Stats — gray it out but keep size. */
.topbar--redesign .btn-action[disabled],
.topbar--redesign .btn-action:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Pressed/active toggle state for the Area Stats button. */
.topbar--redesign .btn-action[aria-pressed="true"] {
  background: #1e3a8a;
  color: #fff;
}

/* Bell — round neutral button with red dot. */
.topbar--redesign .btn-bell {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--body, #475569);
  transition: all var(--fast);
  position: relative;
  flex-shrink: 0;
}
.topbar--redesign .btn-bell:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.topbar--redesign .btn-bell .btn-bell-dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 8px;
  height: 8px;
  background: #dc2626;
  border: 2px solid var(--bg);
  border-radius: 50%;
}

/* RIGHT CLUSTER — primary nav + JM avatar */
.topbar--redesign .topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.topbar--redesign .topbar-nav-link {
  text-decoration: none;
  color: var(--body, #475569);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  transition: all var(--fast);
  line-height: 1;
}
.topbar--redesign .topbar-nav-link:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.topbar--redesign .topbar-nav-link.active {
  color: #2563eb;
  background: #eff6ff;
  font-weight: 600;
}
.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 10px;
}

/* USER PILL — avatar-only variant */
.topbar--redesign .user-pill--avatar-only {
  background: #00102E;
  color: #fff;
  border: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--fast);
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, .08);
}
.topbar--redesign .user-pill--avatar-only:hover {
  background: #334155;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -2px rgba(15, 23, 42, .18);
}
.topbar--redesign .user-pill--avatar-only[aria-expanded="true"] {
  background: #334155;
  box-shadow: 0 0 0 4px rgba(30, 41, 59, .12);
}
.topbar--redesign .user-pill--avatar-only .user-avatar {
  background: transparent;
  width: auto;
  height: auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* DROPDOWN MENU — redesigned with sections */
.user-menu--redesign {
  min-width: 240px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: menuIn 180ms ease;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu--redesign .user-menu-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.user-menu--redesign .user-menu-section {
  padding: 4px 0;
}
.user-menu--redesign .user-menu-section + .user-menu-section {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.user-menu--redesign .user-menu-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.user-menu--redesign a, .user-menu--redesign button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--body, #475569);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 100ms ease;
  font-family: inherit;
}
.user-menu--redesign a:hover, .user-menu--redesign button:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.user-menu--redesign .user-menu-muted {
  color: var(--muted);
  font-size: 12px;
}
.user-menu--redesign .signout {
  color: #b91c1c;
  border-top: 0;
  margin-top: 0;
  padding-top: 9px;
}
.user-menu--redesign .signout:hover {
  background: #fef2f2;
  color: #991b1b;
}

/* ── FILTER BAR REDESIGN ────────────────────────────────────────────── */

.filterbar--redesign {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
  /* No top border — flush under topbar per the mockup. */
  border-top: 0;
  margin-top: 0;
}
.filterbar--redesign .filterbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
}
/* Wave 3 (2026-05-27): Legacy "Active Filters" footer FULLY HIDDEN.
   State now lives inline on the top chips (and via the Reset link in the
   redesigned bar). The HTML `hidden` attribute + inline `display:none` on
   the element take precedence, but keep this rule as a safety net in case
   any script flips `hidden` off. The legacy row used to eat ~50px of
   vertical space which manifested as a "map column shrink" once chips
   like Type were rendered. */
.filterbar-foot--legacy {
  display: none !important;
}

/* Wave 3 (2026-05-27): Fix the "map shrinks when chip is clicked" issue.
   ROOT CAUSE: design-system.css sets `.app-shell { grid-template-rows: auto 1fr; }`
   with 2 explicit rows, but the search page has 3 visible children (topbar,
   filterbar, layout). With only 2 named rows the FILTER BAR landed in the
   `1fr` row 2 and STRETCHED to ~100px of empty whitespace (mistaken by the
   user as the map shrinking when chips/dropdowns opened, since the filter-
   bar height visibly changed with chip count + active dropdowns).
   Override the shell grid template ONLY on the search page so the filterbar
   row is `auto` (sized to content) and the layout fills with `1fr`.

   2026-05-27 (areas map collapse root-cause fix): the prior `minmax(0, 1fr)`
   only caps the row's MINIMUM at 0 — it does NOT cap the maximum unless the
   grid container itself is height-bounded. `.app-shell` had only
   `min-height: 100vh` (a floor, not a ceiling), so when `.results` rendered
   100+ listing cards (~191px each, total ~25,000px), the 1fr row grew to
   match content, `.app-shell` grew with it, `.layout` followed (`height:100%`
   resolves against the parent row), `.map-col` followed, and Mapbox's canvas
   sized itself to 25,000+ px. The map LOOKED collapsed/blank to the right
   because only a sliver of tiles was rendered inside the visible viewport;
   the rest was 24,000px below the fold (which on James's screen manifested
   as "right column is grey" since Mapbox returns transparent until the
   canvas portion is in view).

   The two earlier "fixes":
     • 19a4d41 — added minmax(0, 1fr) + min-height:0 / overflow:hidden on
       `.layout` and `.results`. These were necessary but not sufficient:
       they let the row shrink, but did not force it to shrink because the
       grid container itself was unbounded.
     • 1bc402a — band-aid that defaulted the Area Stats Strip OFF. With the
       strip ON, area-search.css fired `body:has(.area-stats-strip[data-
       active=true]) .layout { height: calc(100vh - 240px) }` which clamped
       `.layout` and incidentally hid the bug. With the strip OFF that
       rescue rule never fired, exposing the underlying blow-up.

   Real fix (this commit): give `.app-shell` a definite height (100vh) and
   pin `body` overflow so the page never scrolls vertically. With a definite
   parent height, `minmax(0, 1fr)` actually clamps the row; `.layout`
   `height:100%` resolves; `.results overflow-y:auto` confines scroll inside
   the listings column; `.map-col` stays exactly viewport-row-tall regardless
   of how many listing cards render. The strip's separate `body:has() .layout`
   rule is no longer needed (and now dropped from area-search.css). */
.search-body, .search-body html { height: 100vh; overflow: hidden; }
.search-body .app-shell {
  height: 100vh;
  min-height: 0;
  max-height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr);
}
/* Belt-and-suspenders: keep the filterbar from stretching vertically
   regardless of what app-shell's grid template is. */
.search-body #filterbar.filterbar--redesign {
  align-self: start;
}
/* The original `.layout { height: calc(100vh - 240px); }` baked in a 240px
   topbar+filterbar offset that no longer holds (filterbar now ~60px, not
   ~160px). Override with `100%` so the layout fills whatever 1fr space
   the app-shell grid gives it — the source of truth becomes the grid,
   not a magic constant. min-height:0 + overflow:hidden prevent grandchild
   content (.results cards) from forcing the layout taller than its grid
   row. Pair with overflow-y:auto on .results so listings scroll inside. */
.search-body .layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.search-body .results {
  min-height: 0;
  overflow-y: auto;
}

/* Generic chip — replaces .fbar-trigger visuals inside the redesign. */
.filterbar--redesign .fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--fast);
  white-space: nowrap;
  font-family: inherit;
  box-shadow: none;
}
.filterbar--redesign .fchip:hover {
  background: var(--bg-soft);
  border-color: #cbd5e1;
}
.filterbar--redesign .fchip svg {
  color: var(--body, #475569);
  flex-shrink: 0;
}
.filterbar--redesign .fchip-caret {
  font-size: 9px;
  color: var(--muted);
  margin-left: 2px;
  transition: transform var(--fast);
}
.filterbar--redesign .fbar-dd.open .fchip {
  border-color: #00102E;
  color: #00102E;
  box-shadow: 0 0 0 2px rgba(0, 16, 46, .08);
}
.filterbar--redesign .fbar-dd.open .fchip-caret {
  transform: rotate(180deg);
  color: #00102E;
}
.fchip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #00102E;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.fchip-badge.hidden { display: none; }

/* 2026-05-29: List-context pill — fills the filter row with a clearly
   different look (solid accent background, white text) so the user
   instantly sees that the view is filtered to a saved list, not by area
   or price. Sits between More Filters and Reset. The X on the right
   closes the list and reverts to normal search. */
.filterbar--redesign .fchip--list-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 0 8px 0 12px;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.filterbar--redesign .fchip--list-active:hover {
  background: var(--accent-dark, #8a4527);
  border-color: var(--accent-dark, #8a4527);
}
.fchip-list-icon { font-size: 14px; line-height: 1; }
.fchip-list-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip-list-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.fchip-list-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background var(--fast);
}
.fchip-list-x:hover { background: rgba(255,255,255,0.35); }

/* 2026-06-01: Address pill — painted by renderChips() when state.areas has any
   address|apn entry. Distinct navy color (#0A5BCC matches the Area Selector
   poly-fill blue) so it's visually clear this pill represents address scope,
   not the list-active rust pill above. Reuses .fchip-list-* inner classes for
   icon/name/count/X so it inherits the same sizing + hover semantics. */
.filterbar--redesign .fchip--address-active {
  background: #0A5BCC;
  border-color: #0A5BCC;
  color: #fff;
  font-weight: 700;
  padding: 0 8px 0 12px;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.filterbar--redesign .fchip--address-active:hover {
  background: #084ba8;
  border-color: #084ba8;
}

/* 2026-05-29: inline Remove-from-list button in the results header. Lives
   next to the Actions dropdown. Hidden until a list is active AND at least
   one lcard is checkbox-selected. Replaces the floating bottom bar — the
   header is where the user is already looking when they want to act on
   the selection. */
.header-action-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  margin-right: 8px;
  background: var(--red, #b91c1c);
  border: 1px solid var(--red, #b91c1c);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--fast);
  font-family: inherit;
  white-space: nowrap;
  animation: header-action-fade-in 0.18s ease-out;
}
.header-action-danger:hover { background: #991a1a; border-color: #991a1a; }
.header-action-danger svg { flex-shrink: 0; }
@keyframes header-action-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* Active state — chip morphs to indigo tint when its filter has a value. */
.filterbar--redesign .fchip.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e1b4b;
}
.filterbar--redesign .fchip.is-active:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}
.filterbar--redesign .fchip.is-active .fchip-label,
.filterbar--redesign .fchip.is-active .fchip-value {
  font-weight: 700;
  color: #00102E;
}
.filterbar--redesign .fchip.is-active .fchip-caret { color: #4f46e5; }
.filterbar--redesign .fchip.is-active svg { color: #4f46e5; }

/* Reset link (replaces the old "Clear all" under the active filters row). */
.filterbar--redesign .chip-reset {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all var(--fast);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  font-family: inherit;
}
.filterbar--redesign .chip-reset:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.filterbar--redesign .chip-reset.hidden { display: none; }

/* AREAS PANEL — opens off the Areas chip. */
.areas-wrap.fbar-dd { position: relative; }
.areas-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 420px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .22);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: menuIn 180ms ease;
}
.areas-panel.hidden { display: none; }
.areas-add-row {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.btn-add-area {
  width: 100%;
  background: #00102E;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--fast);
  font-family: inherit;
}
.btn-add-area:hover { background: #0a1d44; }
.areas-tabs {
  display: flex;
  gap: 0;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--line);
}
.areas-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 9px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--body, #475569);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--fast);
  font-family: inherit;
}
.areas-tabs button:hover { color: var(--ink); }
.areas-tabs button.active {
  color: #00102E;
  border-bottom-color: #00102E;
}
.areas-tab-cnt { opacity: 0.6; margin-left: 3px; font-size: 11px; }
.areas-panel .areas-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
  background: #fff;
}
.areas-panel .areas-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--fast);
}
.areas-panel .areas-list label:hover { background: var(--bg-soft); }
.areas-panel .areas-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00102E;
  cursor: pointer;
}
.areas-panel .areas-list .area-row-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.areas-panel .areas-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.areas-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.areas-footer .count {
  font-size: 12px;
  color: var(--body, #475569);
  font-weight: 600;
}
.areas-footer .spacer { flex: 1; }
.areas-footer .btn-link {
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--body, #475569);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: inherit;
}
.areas-footer .btn-link:hover {
  color: var(--ink);
  background: var(--bg-soft);
}
.areas-footer .btn-apply {
  background: #00102E;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.areas-footer .btn-apply:hover { background: #0a1d44; }

/* ── REGION PRESETS PANEL ──────────────────────────────────────────────
   Shown inside the Areas popover when the Regions tab is active. Reads
   from window.SeeklyRegionPresets (region-presets.js). Visual matches the
   Neighborhoods-tab `.areas-list` pattern: scrollable list of checkbox
   rows. Priority regions render at the top; "More regions" divider splits
   them from the remaining 11 in geographic order. */
.areas-presets {
  background: #fff;
}
.areas-presets.hidden { display: none; }
.areas-presets-hint {
  font-size: 11px;
  color: var(--muted);
  padding: 10px 14px 6px;
  line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.areas-region-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
  background: #fff;
}
.areas-region-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--fast);
}
.areas-region-row:hover { background: var(--bg-soft); }
.areas-region-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00102E;
  cursor: pointer;
  flex-shrink: 0;
}
.areas-region-row .areas-region-label {
  font-weight: 600;
}
.areas-region-row .area-row-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.areas-region-row.is-full {
  background: #f5f7fb;
}
.areas-region-row.is-full .areas-region-label {
  color: #00102E;
}
.areas-region-row.is-partial .areas-region-label {
  color: #00102E;
}
.areas-region-divider {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 4px;
  background: var(--bg);
}

/* ── MORE FILTERS DRAWER ────────────────────────────────────────────── */
.mf-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .22);
  z-index: 200;
  animation: mfFade 200ms ease;
}
.mf-backdrop.hidden { display: none; }
@keyframes mfFade { from { opacity: 0; } to { opacity: 1; } }
.mf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -18px 0 40px -12px rgba(15, 23, 42, .22);
  z-index: 201;
  display: flex;
  flex-direction: column;
  animation: mfSlideIn 240ms cubic-bezier(.2,.8,.2,1);
}
.mf-drawer.hidden { display: none; }
@keyframes mfSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mf-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mf-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.mf-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  color: var(--body, #475569);
  transition: all var(--fast);
  font-family: inherit;
  line-height: 1;
}
.mf-close:hover { background: var(--bg-soft); color: var(--ink); }
.mf-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px;
}
.mf-section { padding: 14px 0; }
.mf-section + .mf-section { border-top: 1px solid var(--line); }
.mf-section h4 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.mf-moved-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 9px;
  letter-spacing: 0.05em;
}
.mf-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
}
.mf-field + .mf-field { border-top: 1px solid var(--line); }
.mf-field-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.mf-field-label svg { color: var(--body, #475569); }
.mf-relay-btn {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--fast);
}
.mf-relay-btn:hover {
  border-color: #00102E;
  background: var(--bg-soft);
}
.mf-relay-btn--primary {
  width: 100%;
  background: #00102E;
  color: #fff;
  border: 0;
  padding: 12px 14px;
  font-size: 13px;
}
.mf-relay-btn--primary:hover { background: #0a1d44; }
.mf-section-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
.mf-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
}
.mf-ghost {
  background: transparent;
  border: 0;
  color: var(--body, #475569);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: all var(--fast);
  font-family: inherit;
}
.mf-ghost:hover { background: var(--bg-soft); color: var(--ink); }
.mf-primary {
  background: #00102E;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-left: auto;
  transition: all var(--fast);
  font-family: inherit;
}
.mf-primary:hover { background: #0a1d44; }

/* Hide the legacy locbar bottom margin (locbar element is gone in
   the redesign) so the filter bar sits flush under the topbar. */
.search-body .locbar { display: none; }

/* ─── Wave 2 (2026-05-27): Hide the 3 legacy filter buttons whose
   functionality has been migrated into the More Filters drawer (Lot &
   Zoning section). Functionality preserved — the new drawer's relay
   buttons still programmatically click these hidden elements via
   .click() which works on display:none. Targets:
     • #open-quad-listings          — "Through-Lot Listings" (HTML)
     • [data-dd="throughlot"]       — "All Lots" dropdown (through-lot-filter.js)
     • [data-dd="throughlot-zoning"]— "All zoning" dropdown (through-lot-filter.js)
   See _archive/search_topbar_redesign_2026_05_27.md (Wave 2 section). */
.filterbar--redesign #open-quad-listings,
.filterbar--redesign [data-dd="throughlot"],
.filterbar--redesign [data-dd="throughlot-zoning"],
.filterbar-inner #open-quad-listings,
.filterbar-inner [data-dd="throughlot"],
.filterbar-inner [data-dd="throughlot-zoning"] { display: none !important; }

/* ============================================================================
   Lists v2 — share modal + list description + per-property notes
   (2026-05-29 — Postgres-backed lists shipping wave)
   ============================================================================ */

/* List-level description (free-form notes) — sits under list name in Manage view */
.mh-manage-description-input {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.mh-manage-description-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.mh-manage-description-input::placeholder { color: var(--muted); font-style: italic; }

/* Share modal — sharee list */
.share-existing-section { border-top: 1px solid var(--line); padding-top: 12px; }
.share-existing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  margin-bottom: 6px;
}
.share-existing-row:last-child { margin-bottom: 0; }
.share-existing-email {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}
.share-existing-unshare {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--red);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--fast);
}
.share-existing-unshare:hover { background: var(--red); color: white; border-color: var(--red); }
.share-feedback-ok { color: var(--accent); }
.share-feedback-err { color: var(--red); }

/* Per-property note (collapsible) inside list Manage view */
.mh-listing-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.mh-listing-note-toggle {
  background: transparent;
  border: 0;
  padding: 2px 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mh-listing-note-toggle:hover { color: var(--accent); }
.mh-listing-note-toggle.has-note { color: var(--accent); }
.mh-listing-note-body {
  margin-top: 6px;
  display: none;
}
.mh-listing-note-body.open { display: block; }
.mh-listing-note-input {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--ink);
  resize: vertical;
  transition: border-color var(--fast);
}
.mh-listing-note-input:focus { outline: none; border-color: var(--accent); }
.mh-listing-note-status {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  font-style: italic;
}
.mh-listing-note-status.saved { color: var(--accent); }
.mh-listing-note-status.error { color: var(--red); }
.mh-listing-note-pre {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Tier 1 — "3D Model" modal tab (LOD2 roof models via Threebox) ───────── */
.parcel-modal .pm-3d-body { min-height: 120px; }
.parcel-modal .pm-3d-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  color: var(--muted, #64748b);
  gap: 6px;
}
.parcel-modal .pm-3d-empty__icon { font-size: 34px; line-height: 1; }
.parcel-modal .pm-3d-empty__title { font-weight: 600; color: var(--text, #0f172a); }
.parcel-modal .pm-3d-empty__sub { font-size: 13px; max-width: 360px; }
.parcel-modal .pm-3d-ok {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--accent-soft, #eef2ff);
  color: var(--accent, #4f46e5);
  font-size: 13px;
  font-weight: 500;
}

/* === right-drawer.css === */
/* right-drawer.css — Unified right-side filter drawer
 *
 * Replaces the All Filters modal AND the Investment Search drawer for v1
 * universal filters. Strategy section appears at the top when an
 * investor strategy is active (Quad Search ships first; others deferred).
 *
 * Slide-in from right, fixed-width on desktop, full-width on mobile.
 * Z-index sits above the map but below the property modal.
 */

/* ─── Backdrop ──────────────────────────────────────────────────────────── */
.rd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 1899;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
}
.rd-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.rd-backdrop.hidden { display: none; }

/* ─── Drawer container ──────────────────────────────────────────────────── */
.rd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  background: var(--card, #fff);
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.18);
  z-index: 1900;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  /* Default closed state */
  visibility: hidden;
}
.rd-drawer.open {
  transform: translateX(0);
  visibility: visible;
}
.rd-drawer.hidden {
  display: none;
}

@media (max-width: 720px) {
  .rd-drawer {
    width: 100vw;
  }
}

/* ─── Header ────────────────────────────────────────────────────────────── */
.rd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  flex-shrink: 0;
}
.rd-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
}
.rd-close {
  background: transparent;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-2, #475569);
  transition: background 0.12s, transform 0.12s;
}
.rd-close:hover {
  background: var(--bg, #f8fafc);
  transform: scale(1.06);
}

/* ─── Body scroll area ──────────────────────────────────────────────────── */
.rd-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 22px 24px;
}

/* ─── Section ───────────────────────────────────────────────────────────── */
.rd-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}
.rd-section:last-child {
  border-bottom: none;
}
.rd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rd-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rd-section-help {
  font-size: 12px;
  color: var(--muted, #64748b);
  font-weight: 500;
}

/* Strategy banner — appears when an investor strategy is active */
.rd-strategy {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border-bottom: 2px solid rgba(34, 197, 94, 0.25);
  padding: 18px 22px;
  margin: 0 -22px;
}
.rd-strategy.hidden { display: none; }
.rd-strategy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rd-strategy-title {
  font-size: 13px;
  font-weight: 700;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rd-strategy-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-strategy-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin-bottom: 4px;
}
.rd-strategy-desc {
  font-size: 12px;
  color: var(--muted, #64748b);
  line-height: 1.4;
  margin-bottom: 14px;
}
.rd-strategy-clear {
  background: transparent;
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #166534;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rd-strategy-clear:hover {
  color: var(--red, #dc2626);
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.04);
}

/* Strategy switcher dropdown — pick a different strategy without leaving the
   drawer. Sits between the section header and the description. */
.rd-strategy-select {
  width: 100%;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  background: #fff;
  border: 1.5px solid rgba(34, 197, 94, 0.35);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 36px;
}
.rd-strategy-select:focus {
  outline: 2px solid rgba(34, 197, 94, 0.5);
  outline-offset: 1px;
}

/* ─── Status: For Sale / Sold ───────────────────────────────────────────── */
.rd-status-grp {
  margin-bottom: 8px;
}
.rd-status-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink, #0f172a);
  font-weight: 500;
  flex: 1;
}
.rd-radio input[type="radio"] { display: none; }
.rd-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line, #e5e7eb);
  background: var(--card, #fff);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.12s;
}
.rd-radio input[type="radio"]:checked + .rd-radio-dot {
  border-color: var(--accent, #16a34a);
}
.rd-radio input[type="radio"]:checked + .rd-radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent, #16a34a);
}
.rd-status-body {
  padding: 6px 0 6px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2, #475569);
}
.rd-check input[type="checkbox"] { display: none; }
.rd-check-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong, #cbd5e1);
  background: var(--card, #fff);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.rd-check input[type="checkbox"]:checked + .rd-check-box {
  background: var(--accent, #16a34a);
  border-color: var(--accent, #16a34a);
}
.rd-check input[type="checkbox"]:checked + .rd-check-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── Home Types grid ───────────────────────────────────────────────────── */
.rd-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.rd-type-pill {
  background: var(--card, #fff);
  border: 1.5px solid var(--line, #e5e7eb);
  color: var(--ink-2, #475569);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.rd-type-pill:hover {
  border-color: var(--ink-3, #94a3b8);
}
.rd-type-pill.active {
  background: rgba(22, 163, 74, 0.08);
  border-color: var(--accent, #16a34a);
  color: var(--accent, #16a34a);
}

/* ─── Range pair (price / sf / lot / year) ──────────────────────────────── */
.rd-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-range input {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink, #0f172a);
  background: var(--card, #fff);
}
.rd-range input:focus {
  outline: none;
  border-color: var(--accent, #16a34a);
}
.rd-range-sep {
  color: var(--muted, #64748b);
  font-weight: 500;
}

/* ─── Pillbar (beds / baths) ────────────────────────────────────────────── */
.rd-pillbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 3px;
}
.rd-pill {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2, #475569);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.rd-pill:hover {
  background: var(--bg, #f8fafc);
}
.rd-pill.active {
  background: var(--ink, #0f172a);
  color: white;
}

/* ─── Field label ───────────────────────────────────────────────────────── */
.rd-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── Two-col field grid ────────────────────────────────────────────────── */
.rd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
.rd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: var(--card, #fff);
  flex-shrink: 0;
}
.rd-foot .muted {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.rd-foot-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.rd-foot-clear {
  background: transparent;
  border-color: var(--line, #e5e7eb);
  color: var(--ink-2, #475569);
}
.rd-foot-clear:hover {
  background: var(--bg, #f8fafc);
  border-color: var(--ink-3, #94a3b8);
}
.rd-foot-done {
  background: var(--ink, #0f172a);
  color: white;
}
.rd-foot-done:hover {
  background: #1e293b;
}

/* ─── Region picker (Phase 2) ───────────────────────────────────────────── */
.rd-region-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 6px;
}
.rd-region-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.rd-region-row:hover {
  background: var(--bg, #f8fafc);
}
.rd-region-row.active {
  background: rgba(22, 163, 74, 0.06);
}
.rd-region-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.rd-region-info {
  flex: 1;
  min-width: 0;
}
.rd-region-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  margin-bottom: 2px;
}
.rd-region-desc {
  font-size: 11px;
  color: var(--muted, #64748b);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rd-region-row .rd-check-box {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ─── Lot type chips ────────────────────────────────────────────────────── */
.rd-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-chip {
  background: var(--card, #fff);
  border: 1.5px solid var(--line, #e5e7eb);
  color: var(--ink-2, #475569);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.rd-chip:hover {
  border-color: var(--ink-3, #94a3b8);
}
.rd-chip.active {
  background: var(--ink, #0f172a);
  border-color: var(--ink, #0f172a);
  color: white;
}

/* ─── Region block + place pills (Phase 3) ──────────────────────────────── */
.rd-region-block {
  display: flex;
  flex-direction: column;
}
.rd-region-block.active {
  background: rgba(22, 163, 74, 0.04);
  border-radius: 8px;
}
.rd-region-block.active .rd-region-row {
  margin-bottom: 0;
}
.rd-region-places {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 12px 10px 36px;
  margin: 0;
  border-bottom: 1px solid rgba(22, 163, 74, 0.12);
}
.rd-region-places-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.rd-region-places-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}
.rd-region-places-toggle {
  background: transparent;
  border: 1px solid rgba(22, 163, 74, 0.25);
  color: #166534;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rd-region-places-toggle:hover {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.45);
}
.rd-region-places-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rd-place-pill {
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: #166534;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.rd-place-pill:hover {
  border-color: rgba(22, 163, 74, 0.55);
}
.rd-place-pill.off {
  opacity: 0.45;
  background: var(--bg, #f8fafc);
  border-color: var(--line, #e5e7eb);
  color: var(--muted, #64748b);
  text-decoration: line-through;
}
.rd-place-pill.off:hover {
  opacity: 0.7;
  border-color: var(--ink-3, #94a3b8);
}

/* ─── Strategy placeholder card (other strategies coming soon) ──────────── */
.rd-strategy-coming {
  padding: 14px 16px;
  border: 1.5px dashed var(--line-strong, #cbd5e1);
  border-radius: 8px;
  background: var(--bg, #f8fafc);
  text-align: center;
}
.rd-strategy-coming-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2, #475569);
  margin-bottom: 4px;
}
.rd-strategy-coming-desc {
  font-size: 12px;
  color: var(--muted, #64748b);
  line-height: 1.4;
}