/* Shared browse-map stylesheet — the redesigned map view from
   design_handoff/marketplace-browse-navigation-redesign 2 (Browse
   Listings.dc.html + MAP_HANDOFF.md).

   Loaded by BOTH surface families:
     · buyer explore/browse (explore layout + buying/browse head) — alongside
       marketing/pages/explore.css
     · broker browse (/brokering/practices?view=map) — alongside the Tailwind
       bundle. Load AFTER the bundle so these rules win ties against the old
       broker .map-value-pill styles.

   Colors are EXACT design hexes, never brand tokens — marketing explore.css
   redefines --color-brand-green to near-black for its buttons, which turned
   the pills black when this file used the token. Keep every selector map-scoped (.explore-map-*, .explore-cluster-*,
   .map-value-pill*, .explore-focus-marker*) — this file must not restyle
   page chrome on either surface. */

/* ════════════════════════════════════════════════════════════════
   MAP VIEW (?view=map) — Browse Listings redesign
   Source of truth: design_handoff/marketplace-browse-navigation-
   redesign 2/project/Browse Listings.dc.html + MAP_HANDOFF.md.
   Pill/bubble class names match what the shared explore-map Stimulus
   controller + ExploreClusterLayer render. brokering.css is not
   loaded on the explore layout, so everything is self-contained.
   ════════════════════════════════════════════════════════════════ */
@keyframes exClusterPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes exDockRise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes exTipIn {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}
@keyframes exFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Layout: 320px sidebar + map, 620px panel (page scrolls on overflow) ── */
.explore-map-layout {
  display: flex;
  gap: 12px;
  height: 620px;
  margin-bottom: 24px;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.explore-map-sidebar {
  flex: 0 0 320px;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6eae8;
  border-radius: 14px;
  padding: 0;
}

/* Sticky "Selected" bar — tops the list while a listing is focused */
.explore-map-selected-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(20, 55, 42, .12);
  background: #e8f6ee;
  animation: exFadeIn .2s ease both;
}
.explore-map-selected-bar.hidden { display: none; }
.explore-map-selected-bar__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #205e3a;
  color: #fff;
}
.explore-map-selected-bar__text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.explore-map-selected-bar__eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #2f7b5a;
}
.explore-map-selected-bar__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: #0c3e26;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-map-selected-bar__clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(32, 94, 58, .28);
  background: #fff;
  color: #1b4d3a;
  cursor: pointer;
}

/* List header — "N in view · Follows the map" */
.explore-map-sidebar__header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(20, 55, 42, .1);
}
.explore-map-sidebar__count { font-size: var(--text-sm); font-weight: var(--fw-bold); color: #12241c; }
.explore-map-sidebar__hint { margin-left: auto; font-size: var(--text-xs); color: #9aa4a0; }

.explore-map-sidebar__rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explore-map-sidebar__more {
  padding: 8px;
  text-align: center;
  font-size: var(--text-xs);
  color: #8a938e;
}
.explore-map-sidebar__more.hidden { display: none; }

/* Airbnb-style numbered pager — pinned footer of the results list. Dark-mode
   overrides live with the rest of the map sidebar in tailwind/components/buying.css
   (.dark .buying-shell .explore-map-*), so all three modes are covered. */
.explore-map-sidebar__pager {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 15px 12px;
  border-top: 1px solid rgba(20, 55, 42, .1);
  background: #fff;
}
.explore-map-sidebar__pager.hidden { display: none; }
.explore-map-pager__page {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e6e3;
  border-radius: 9px;
  background: #fff;
  color: #1b4d3a;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color .13s, background .13s, color .13s;
}
.explore-map-pager__page:hover { border-color: #205e3a; background: #f2f7f4; }
.explore-map-pager__page.is-current {
  background: #0c3e26;
  border-color: #0c3e26;
  color: #fff;
  cursor: default;
}
.explore-map-pager__gap {
  min-width: 20px;
  text-align: center;
  color: #9aa4a0;
  font-size: var(--text-sm);
}

.explore-map-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
  font-size: var(--text-base);
  color: var(--base-text-tertiary, #737373);
}

/* ── Sidebar row ─────────────────────────────────────────────────── */
.explore-map-listing-row {
  position: relative;
  flex: none;
  border: 1px solid #e6eae8;
  background: #fff;
  border-radius: 11px;
  padding: 11px 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 40, 28, .04);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.explore-map-listing-row.hidden { display: none; }
.explore-map-listing-row.is-highlighted {
  background: #f2faf5;
  border-color: #bfe0cd;
}
.explore-map-listing-row.is-selected {
  background: #e8f6ee;
  border-color: #205e3a;
  box-shadow: 0 0 0 2px rgba(32, 94, 58, .25);
}
.explore-map-listing-row__rail {
  display: none;
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #205e3a;
}
.explore-map-listing-row.is-selected .explore-map-listing-row__rail { display: block; }

.explore-map-listing-row__top { display: flex; align-items: flex-start; gap: 8px; }
.explore-map-listing-row__main { flex: 1; min-width: 0; }

.explore-map-listing-row__badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.explore-map-listing-row__badges .explore-badge {
  height: 18px;
  padding: 0 7px;
  font-size: var(--text-2xs);
}

.explore-map-listing-row__title-row { display: flex; align-items: center; gap: 5px; color: #12241c; }
.explore-map-listing-row__pin { flex: none; display: inline-flex; color: #2f7b5a; }
.explore-map-listing-row__title {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-map-listing-row__sub {
  font-size: var(--text-xs);
  color: var(--base-text-tertiary, #737373);
  margin: 2px 0 0 18px;
}

.explore-map-listing-row__save {
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  border: 1px solid #e6eae8;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9aa4a0;
}
.explore-map-listing-row__save:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.explore-map-listing-row__save .explore-card__save-icon { width: 14px; height: 14px; }
.explore-map-listing-row__save[data-saved="true"] { color: #dc2626; }
.explore-map-listing-row__save[data-saved="true"] .explore-card__save-icon svg,
.explore-map-listing-row__save[data-saved="true"] svg { fill: #dc2626; stroke: #dc2626; }

.explore-map-listing-row__footer {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(20, 55, 42, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.explore-map-listing-row__price { display: flex; align-items: baseline; gap: 5px; margin: 0; }
.explore-map-listing-row__amount {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  color: #0c3e26;
}
.explore-map-listing-row__stat-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: rgba(12, 62, 38, .6);
}
.explore-map-listing-row__stats { display: flex; gap: 10px; }
.explore-map-listing-row__stat { display: flex; flex-direction: column; }
.explore-map-listing-row__stat .explore-map-listing-row__stat-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  color: #9aa4a0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.explore-map-listing-row__stat strong { font-size: var(--text-xs); font-weight: var(--fw-bold); color: #171717; }

/* ── Map panel + chrome ──────────────────────────────────────────── */
.explore-map-panel {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid #e6eae8;
  border-radius: 14px;
  background: #f5f1e8;
  padding: 0;
}

.explore-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Hovering a deck.gl listing dot: the dots aren't real map features, so the
   map keeps its grab cursor — force a pointer while one is hovered. */
.explore-map-canvas.is-dot-hover,
.explore-map-canvas.is-dot-hover .gm-style div,
.explore-map-canvas.is-dot-hover canvas {
  cursor: pointer !important;
}

/* Legend — top-left, per-mode content */
.explore-map-legend {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(20, 55, 42, .12);
  box-shadow: 0 2px 8px rgba(16, 40, 28, .1);
  z-index: 30;
  max-width: 200px;
}
.explore-map-legend__head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.explore-map-legend__title {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a938e;
}
.explore-map-legend__clusters { display: flex; flex-direction: column; }
.explore-map-legend__clusters.hidden,
.explore-map-legend__pins.hidden { display: none; }
.explore-map-legend__ramp {
  display: flex;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(20, 55, 42, .12);
}
.explore-map-legend__ramp i { flex: 1; }
.explore-map-legend__ramp-ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: #6f7a74;
  margin-top: 3px;
  font-weight: var(--fw-semibold);
}
.explore-map-legend__note { font-size: var(--text-2xs); color: #6f7a74; margin-top: 6px; }
.explore-map-legend__note strong { font-weight: var(--fw-bold); }

.explore-map-legend__pins { display: flex; flex-direction: column; gap: 6px; }
.explore-map-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: #3f4a45;
}
.explore-map-legend__pill {
  flex: none;
  width: 22px;
  height: 15px;
  border-radius: 99px;
}
.explore-map-legend__pill.is-asking { background: #205e3a; }
.explore-map-legend__pill.is-revenue { background: #fff; border: 1.5px solid #205e3a; }
.explore-map-legend__info-row { color: #8a938e; font-size: var(--text-xs); }
.explore-map-legend__info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: #8a938e;
  cursor: help;
  flex: none;
}
.explore-map-legend__popover {
  display: none;
  position: absolute;
  top: 20px;
  left: -10px;
  width: 184px;
  background: #12241c;
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: var(--text-xs);
  line-height: 1.45;
  font-weight: var(--fw-medium);
  letter-spacing: normal;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(16, 40, 28, .28);
  z-index: 60;
}
.explore-map-legend__popover strong { color: #fff; }
.explore-map-legend__info-icon:hover .explore-map-legend__popover,
.explore-map-legend__info-icon:focus-visible .explore-map-legend__popover { display: block; }

/* Pins / Clusters toggle — top-right */
.explore-map-mode-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(20, 55, 42, .12);
  box-shadow: 0 2px 8px rgba(16, 40, 28, .1);
  z-index: 30;
}
.explore-map-mode-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  background: transparent;
  color: #3f4a45;
}
.explore-map-mode-toggle__btn.is-active {
  background: #205e3a;
  color: #fff;
}

/* Custom zoom +/− — under the mode toggle */
.explore-map-zoom {
  position: absolute;
  top: 54px;
  right: 12px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(20, 55, 42, .12);
  box-shadow: 0 2px 8px rgba(16, 40, 28, .1);
  z-index: 30;
}
.explore-map-zoom button {
  width: 34px;
  height: 32px;
  border: none;
  background: transparent;
  color: #12402a;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.explore-map-zoom button:first-child { border-bottom: 1px solid rgba(20, 55, 42, .1); }
.explore-map-zoom button:last-child { font-size: var(--text-xl); }

/* Reset view pill — top-center while drilled in / focused */
.explore-map-reset {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  background: #0c3e26;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(12, 62, 38, .3);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  z-index: 35;
  animation: exFadeIn .2s ease both;
}
.explore-map-reset.hidden { display: none; }
.explore-map-reset__kbd { opacity: .6; font-weight: var(--fw-semibold); }

/* Count badge — bottom-left ("N dots · M prices" / "N clusters · M singles") */
.explore-map-count-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(18, 36, 28, .9);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  z-index: 30;
}

/* Viewport refetch indicator — top-center pill while the map loads a new area's
   markers (viewport loading only). Sits above the reset pill during the brief
   moment both could show. */
/* Loading indicator — an Airbnb-style pill of three bouncing dots, top-center of
   the map, shown while a viewport refetch or a results page is in flight. Sits on
   the always-light map canvas (same in every theme), so no dark override needed. */
.explore-map-loading {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(12, 62, 38, .22);
  z-index: 45;
  animation: exFadeIn .15s ease both;
}
.explore-map-loading.hidden { display: none; }
.explore-map-loading__dots { display: inline-flex; align-items: center; gap: 5px; }
.explore-map-loading__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0c3e26;
  animation: exDotBounce 1s ease-in-out infinite;
}
.explore-map-loading__dots span:nth-child(2) { animation-delay: .16s; }
.explore-map-loading__dots span:nth-child(3) { animation-delay: .32s; }
@keyframes exDotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* While a page/viewport load is in flight the results list dims — paired with the
   loading pill it reads as "updating" without a jarring content swap. */
.explore-map-sidebar__rows.is-loading {
  opacity: .5;
  transition: opacity .18s ease;
}


/* Sidebar row skeletons — shown until the first viewport fetch fills the list.
   Theme-agnostic neutral tint so it reads on the light and dark sidebar alike. */
.explore-map-row-skeleton {
  height: 92px;
  margin: 0 0 10px;
  border-radius: 12px;
  background: rgba(127, 127, 127, .12);
}

/* ── Zoom scrubber — bottom-center hot-dots (Region → Street) ────── */
.explore-map-zoombar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(20, 55, 42, .12);
  box-shadow: 0 2px 8px rgba(16, 40, 28, .1);
  z-index: 30;
}
.explore-map-zoombar__title {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a938e;
}
.explore-map-zoombar__dots { display: flex; align-items: center; gap: 5px; }
.explore-map-zoombar__dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  padding: 0;
  background: #d3ddd7;
  transition: background .15s, width .15s;
}
.explore-map-zoombar__dot.is-passed { background: #8bbfa2; }
.explore-map-zoombar__dot.is-active { width: 20px; background: #205e3a; }
.explore-map-zoombar__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: #12402a;
  min-width: 64px;
}
@media (max-width: 640px) {
  .explore-map-zoombar__title,
  .explore-map-zoombar__label { display: none; }
}

/* ── Price pills (pins mode + cluster singles) ───────────────────── */
.map-value-pill {
  position: absolute;
  transform: translate(-50%, -100%);
  transform-origin: bottom center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 600;
  transition: opacity .2s, transform .16s cubic-bezier(.34, 1.56, .64, 1);
}
.map-value-pill-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16, 40, 28, .2);
  transition: box-shadow .13s, background .13s, color .13s;
}
.map-value-pill--asking_price .map-value-pill-label {
  background: #205e3a;
  color: #fff;
}
.map-value-pill--annual_revenue .map-value-pill-label {
  background: #fff;
  color: #0c3e26;
  border: 1.5px solid #205e3a;
}
.map-value-pill-saved {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #dc2626;
}
/* Diamond caret — carries the pill's own fill (and border for the revenue
   variant) so it reads as part of the pill, not a detached triangle. */
.map-value-pill-tail {
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border: 0; /* neutralize the legacy triangle-tail rules in the broker Tailwind bundle */
  border-radius: 1px;
  box-shadow: none;
  background: transparent;
  transform: rotate(45deg);
}
.map-value-pill--asking_price .map-value-pill-tail {
  background: #205e3a;
}
.map-value-pill--annual_revenue .map-value-pill-tail {
  background: #fff;
  border-right: 1.5px solid #205e3a;
  border-bottom: 1.5px solid #205e3a;
}
/* Peek/hover pops the pin — a clear "zoom + recolor" cue when a sidebar row (or
   the pin itself) is hovered, the Airbnb behavior. !important because the SHARED
   base .map-value-pill lives in the Tailwind @layer components bundle (broker), and
   a layered base out-cascades an unlayered override here — same reason the dark
   overrides in tailwind/components/buying.css use !important. */
.map-value-pill:hover,
.map-value-pill:focus-visible,
.map-value-pill.is-peeked {
  z-index: 680;
  outline: none;
  transform: translate(-50%, -100%) scale(1.2) !important;
}
.map-value-pill:hover .map-value-pill-label,
.map-value-pill:focus-visible .map-value-pill-label,
.map-value-pill.is-peeked .map-value-pill-label {
  background: #0c3e26 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(12, 62, 38, .4), 0 0 0 3px rgba(12, 62, 38, .18) !important;
}
.map-value-pill:hover .map-value-pill-tail,
.map-value-pill:focus-visible .map-value-pill-tail,
.map-value-pill.is-peeked .map-value-pill-tail {
  background: #0c3e26 !important;
  border-color: #0c3e26 !important;
}
.map-value-pill.is-dimmed { opacity: .28; }
.map-value-pill.is-dimmed:hover,
.map-value-pill.is-dimmed.is-peeked { opacity: 1; }

/* Peek pill — the price pin popped in when a sidebar card whose listing has no pin
   of its own is hovered (dot → pin, Airbnb-style). The pop is an ANIMATION, which
   beats the layered Tailwind base .map-value-pill transform WITHOUT needing
   !important; it ends slightly enlarged so the hovered listing stands out. */
.map-value-pill--peek {
  z-index: 690;
  animation: exPillPop .22s cubic-bezier(.34, 1.56, .64, 1) both;
  /* Non-interactive so hovering a MAP dot doesn't hand hover to the pill (which
     would fire the dot's mouseout and flicker); clicks fall through to the dot. */
  pointer-events: none;
}
/* Unpriced listing (no asking price or revenue) popped as a neutral "Value TBD"
   pin, so a Value-TBD card still becomes a pin on hover like any other. */
.map-value-pill--unpriced .map-value-pill-label {
  background: #fff;
  color: #4b5563;
  border: 1.5px solid #cbd5cf;
}
.map-value-pill--unpriced .map-value-pill-tail {
  background: #fff;
  border-right: 1.5px solid #cbd5cf;
  border-bottom: 1.5px solid #cbd5cf;
}
.map-value-pill--peek .map-value-pill-label {
  box-shadow: 0 6px 16px rgba(12, 62, 38, .4), 0 0 0 3px rgba(12, 62, 38, .18) !important;
}
@keyframes exPillPop {
  from { transform: translate(-50%, -100%) scale(.3); opacity: 0; }
  to   { transform: translate(-50%, -100%) scale(1.12); opacity: 1; }
}

/* ── Cluster bubbles (clusters mode) ─────────────────────────────── */
.explore-cluster-layer { position: absolute; }
.explore-cluster-layer.is-dimmed > * { opacity: .28; }
.explore-cluster-layer.is-dimmed > .is-peeked,
.explore-cluster-layer.is-dimmed > :hover { opacity: 1; }

.explore-cluster-bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 99px;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(12, 62, 38, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 500;
  animation: exClusterPop .18s cubic-bezier(.34, 1.4, .64, 1) both;
  transition: border-color .15s, box-shadow .15s, opacity .2s, transform .16s cubic-bezier(.34, 1.56, .64, 1);
}
/* Hover/peek pops the bubble — bigger scale, a green ring, deeper lift — so
   hovering its sidebar row clearly flags the cluster the listing sits in.
   transform is !important to beat BOTH the layered Tailwind base (see the pill
   note above) AND the exClusterPop pop-in animation, which sets transform with
   animation-fill-mode: both and would otherwise lock out the hover scale. */
.explore-cluster-bubble:hover,
.explore-cluster-bubble.is-peeked {
  box-shadow: 0 8px 20px rgba(12, 62, 38, .45), 0 0 0 4px rgba(12, 62, 38, .22) !important;
  border-color: #0c3e26 !important;
  transform: translate(-50%, -50%) scale(1.2) !important;
  z-index: 550;
}
.explore-cluster-bubble__count {
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -.02em;
}
.explore-cluster-bubble__median {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-top: 2px;
}

/* ── Tooltip (peek) — anchored above its marker ──────────────────── */
.explore-map-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 1200;
  pointer-events: none;
  background: #12241c;
  color: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: 0 8px 24px rgba(16, 40, 28, .28);
  animation: exTipIn .12s ease both;
  min-width: 150px;
}
.explore-map-tip__title { font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.explore-map-tip__kind {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: #a9c6b6;
  margin-left: 3px;
}
.explore-map-tip__sub { font-size: var(--text-xs); color: #a9c6b6; margin-top: 2px; }
.explore-map-tip__stats { font-size: var(--text-xs); color: #cfe3d7; margin-top: 6px; font-weight: var(--fw-semibold); }
.explore-map-tip__extra { font-size: var(--text-xs); color: #a9c6b6; margin-top: 5px; }
.explore-map-tip__hint { font-size: var(--text-2xs); color: #6f9884; margin-top: 5px; }

/* ── Focused listing marker: price pin + dashed ring + caption ───── */
.explore-focus-marker {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 900;
  pointer-events: none;
}
.explore-focus-marker__ring {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%; /* 99px caps out on large rings and reads as a rounded square */
  border: 1.5px dashed rgba(32, 94, 58, .6);
  background: rgba(32, 94, 58, .13);
}
.explore-focus-marker__pin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}
.explore-focus-marker__pin-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 11px;
  border-radius: 99px;
  background: #0c3e26;
  color: #fff;
  border: 2px solid #fff;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  box-shadow: 0 6px 16px rgba(12, 62, 38, .4);
  white-space: nowrap;
}
.explore-focus-marker__pin-label { position: relative; z-index: 1; }
.explore-focus-marker__pin-tail {
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-radius: 1px;
  background: #0c3e26;
  transform: rotate(45deg);
}
.explore-focus-marker__caption {
  position: absolute;
  left: 0;
  top: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(32, 94, 58, .3);
  box-shadow: 0 2px 8px rgba(16, 40, 28, .14);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: #1b4d3a;
  white-space: nowrap;
}

/* ── Docked focus card — rises bottom-center on focus ────────────── */
.explore-map-dock {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: min(370px, calc(100% - 32px));
  background: #fff;
  border: 1px solid rgba(20, 55, 42, .14);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(16, 40, 28, .22);
  z-index: 36;
  padding: 10px 12px 11px;
  animation: exDockRise .28s cubic-bezier(.33, 1, .68, 1) both;
}
.explore-map-dock.hidden { display: none; }
.explore-map-dock__head { display: flex; align-items: flex-start; gap: 8px; }
.explore-map-dock__main { flex: 1; min-width: 0; }
.explore-map-dock__badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
.explore-map-dock__badges .explore-badge { height: 17px; padding: 0 6px; font-size: var(--text-2xs); }
.explore-map-dock__badges .explore-badge.hidden { display: none; }
/* Collapse the badges row when nothing is showing — since the practice-type badge
   was removed (it just repeated the dock title), the only badge left is the match
   chip, which is hidden for non-matching listings. Without this, the empty flex row
   leaves a stray margin above the title. */
.explore-map-dock__badges:not(:has(.explore-badge:not(.hidden))) { display: none; }
.explore-map-dock__title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0c3e26;
}
.explore-map-dock__title-row svg { opacity: .7; flex: none; width: 13px; height: 13px; }
.explore-map-dock__title { font-size: var(--text-base); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.explore-map-dock__city {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--base-text-tertiary, #737373);
  margin: 1px 0 0 19px;
}
.explore-map-dock__close {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid #e6eae8;
  background: #fff;
  color: var(--base-text-tertiary, #737373);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.explore-map-dock__price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
}
.explore-map-dock__price {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  color: #0c3e26;
}
.explore-map-dock__price-label {
  font-size: var(--text-2xs);
  color: rgba(12, 62, 38, .6);
  font-weight: var(--fw-semibold);
}
.explore-map-dock__stats {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--base-text-tertiary, #737373);
}
.explore-map-dock__actions { display: flex; gap: 7px; margin-top: 8px; }
.explore-map-dock__cta {
  flex: 1;
  height: 31px;
  border-radius: 8px;
  border: none;
  background: #205e3a;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.explore-map-dock__cta:hover { background: #0c3e26; }
.explore-map-dock__cta svg { width: 12px; height: 12px; }
.explore-map-dock__save {
  flex: none;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  border: 1px solid #e6eae8;
  background: #fff;
  color: #9aa4a0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.explore-map-dock__save .explore-card__save-icon { width: 14px; height: 14px; }
.explore-map-dock__save[data-saved="true"] { color: #dc2626; }
.explore-map-dock__save[data-saved="true"] svg { fill: #dc2626; stroke: #dc2626; }

/* ── Responsive ───────────────────────────────────────────────────
   The broker map (/brokering/practices?view=map) shares this panel chrome
   but NOT the buyer/explore `.explore-map-layout` wrapper (it uses its own
   `.brokering-listings-map-layout`). These bare rules keep the broker map's
   ≤900px behavior unchanged (its responsive pass is separate). The
   buyer/explore surfaces are governed by the `.explore-map-layout`-scoped
   four-tier system further below, which overrides these within that wrapper
   (higher specificity) and never reaches the broker map. */
@media (max-width: 900px) {
  .explore-map-panel {
    order: 1;
    height: 420px;
    flex: none;
  }
  .explore-map-legend { max-width: 160px; }
  .explore-map-dock { bottom: 12px; }
}

/* ── Dock badges — self-contained so the broker page (which doesn't load
   marketing/pages/explore.css) renders them identically ─────────── */
.explore-map-dock .explore-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  background: #eef1ef;
  border: 1px solid transparent;
  color: #404040;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.explore-map-dock .explore-badge--match {
  background: rgba(4, 120, 87, .1);
  color: #065f46;
}
.explore-map-dock .explore-badge--match.is-full-match {
  background: #dcefe4;
  border-color: #bfe3cf;
  color: #166a41;
}

/* ════════════════════════════════════════════════════════════════
   BUYER / EXPLORE RESPONSIVE MAP: four tiers (Browse redesign)
   Source of truth: browse-redesign-proposal (map + list, phone/tablet).
   Everything here is scoped under `.explore-map-layout`, which only the
   buyer/explore surfaces (explore, buying/browse, buying/matches) render.
   The broker map uses `.brokering-listings-map-layout`, so these rules can
   never touch it. Grid view stays a one-tap toggle at every width.

     phone   (max 767px):   full-bleed map + draggable bottom sheet
     tablet  (768-1023px):  stacked, map on top, 2-up list below
     split   (1024-1279px): list rail beside a flexible, taller map
     desktop (min 1280px):  unchanged (base rules: 320px sidebar + 620px map)
   ════════════════════════════════════════════════════════════════ */

/* The drag handle is phone-sheet chrome only (kept out of flow elsewhere). */
.explore-map-sheet-handle { display: none; }

/* The Selected-bar "View" CTA replaces the on-map dock on phones; on wider
   screens the dock owns the commit action, so it stays hidden. */
.explore-map-selected-bar__view { display: none; }

/* Native app renders edge-to-edge (viewport-fit=cover in the explore layout), so
   page content would otherwise slide under the status bar / native nav bar. Pad the
   top by the safe-area inset to keep the search + result bars clear of it. env() is 0
   on the web, so this is native-only and the broker map (no .is-native) is untouched. */
body.explore-page.is-native main {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── Phone (≤767): full-bleed map, listings on a draggable sheet ─── */
@media (max-width: 767px) {
  .explore-map-layout {
    position: relative;
    display: block;
    height: 72dvh;
    min-height: 460px;
    gap: 0;
    margin-bottom: 16px;
  }
  .explore-map-layout .explore-map-panel {
    position: absolute;
    inset: 0;
    height: auto;
    flex: none;
    order: 0;
  }

  /* Trim map chrome on phone: the bottom-anchored zoombar + count badge would
     sit behind the sheet (the sheet header carries the in-view count), and the
     +/- zoom buttons overlap the raised sheet, so drop them and rely on pinch
     to zoom. Scoped so the broker map keeps all of its chrome. */
  .explore-map-layout .explore-map-zoombar,
  .explore-map-layout .explore-map-count-badge,
  .explore-map-layout .explore-map-zoom { display: none; }
  /* The on-map focus dock is replaced by the sheet's Selected bar + View. */
  .explore-map-layout .explore-map-dock { display: none; }

  /* Sidebar becomes the sheet: overlays the map, slides between detents.
     JS (browse-sheet) sets --sheet-y in px once connected; the 82% fallback
     is the peek detent before then. */
  .explore-map-layout .explore-map-sidebar {
    position: absolute;
    left: 0;
    right: 0;
    /* Lift the sheet above the native bottom tab bar / home indicator. env() is
       non-zero only under viewport-fit=cover (native app); it resolves to 0 on
       the web, so the sheet stays flush there. */
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 20;
    order: 0;
    flex: none;
    height: 100%;
    max-height: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 30px -14px rgba(12, 62, 38, .3);
    transform: translateY(var(--sheet-y, 82%));
    transition: transform .3s cubic-bezier(.33, 1, .68, 1);
    touch-action: none;
    will-change: transform;
  }
  .explore-map-layout .explore-map-sidebar.is-dragging { transition: none; }

  /* Drag handle: grip bar centered in a comfortably tall (≥48dp with the
     header below it) grabbable strip. */
  .explore-map-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    flex: none;
    touch-action: none;
  }
  .explore-map-sheet-handle:active { cursor: grabbing; }
  .explore-map-sheet-handle__grip {
    width: 38px;
    height: 5px;
    border-radius: 99px;
    background: #d3ddd8;
  }

  /* Rows scroll only once the sheet is fully raised. The sheet drags to full,
     then its content scrolls, never both at once. */
  .explore-map-layout .explore-map-sidebar__rows {
    overflow-y: hidden;
    touch-action: none;
  }
  .explore-map-layout .explore-map-sidebar.is-full .explore-map-sidebar__rows {
    overflow-y: auto;
    touch-action: pan-y;
  }

  /* Selected-bar commit CTA (phone) */
  .explore-map-selected-bar__view {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: #205e3a;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
  }
  .explore-map-selected-bar__view:hover { background: #0c3e26; }

  /* Declutter: the legend covers ~36% of a phone's width, so shrink it and drop
     the verbose encoding note (the ramp + endpoints already read as
     "color = price"; bubble size is self-evident). */
  .explore-map-layout .explore-map-legend { max-width: 150px; padding: 8px 10px; }
  .explore-map-layout .explore-map-legend__title { font-size: var(--text-xs); }
  .explore-map-layout .explore-map-legend__ramp-ends { font-size: var(--text-2xs); }
  .explore-map-layout .explore-map-legend__note { display: none; }

  /* When the sheet is fully raised the map is mostly covered, so fade its
     legend + mode toggle out (they return at peek/half). */
  .explore-map-layout .explore-map-legend,
  .explore-map-layout .explore-map-mode-toggle { transition: opacity .2s ease; }
  .explore-map-layout.is-sheet-full .explore-map-legend,
  .explore-map-layout.is-sheet-full .explore-map-mode-toggle { opacity: 0; pointer-events: none; }

  /* Whenever the top-center Reset pill is up (a listing is focused OR the map is
     just zoomed in), it collides with the top-right Pins/Clusters toggle on a
     narrow phone, so fade the toggle out of its way. Drop the "Esc" hint too
     (there's no hardware keyboard on phone). */
  .explore-map-layout.is-reset-visible .explore-map-mode-toggle { opacity: 0; pointer-events: none; }
  .explore-map-layout .explore-map-reset__kbd { display: none; }

  /* Legibility: on phone the map view is dropped into the native app, whose
     other screens (Account, sign-in) use a 15-18px scale. Bring the sheet's
     text up to match so Browse doesn't read as a cramped web page: listing
     titles 15px (like the account rows), roomier sub/header, and the smallest
     meta labels (badges/stats) nudged off their 9-9.5px lows. */
  .explore-map-layout .explore-map-sidebar__count { font-size: var(--text-md); }
  .explore-map-layout .explore-map-sidebar__hint { font-size: var(--text-sm); }
  .explore-map-layout .explore-map-listing-row__badges .explore-badge { height: 20px; font-size: var(--text-xs); }
  .explore-map-layout .explore-map-listing-row__title { font-size: var(--text-lg); }
  .explore-map-layout .explore-map-listing-row__sub { font-size: var(--text-base); }
  .explore-map-layout .explore-map-listing-row__amount { font-size: var(--text-xl); }
  .explore-map-layout .explore-map-listing-row__stat strong { font-size: var(--text-base); }
  .explore-map-layout .explore-map-listing-row__stat .explore-map-listing-row__stat-label { font-size: var(--text-2xs); }
}

/* ── Portrait tablet (768-1023): stacked, map on top, 2-up list below ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .explore-map-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  .explore-map-layout .explore-map-panel {
    order: 1;
    flex: none;
    height: 46vh;
    min-height: 340px;
  }
  .explore-map-layout .explore-map-sidebar {
    order: 2;
    flex: none;
    height: 46vh;
    min-height: 320px;
    max-height: none;
  }
  .explore-map-layout .explore-map-sidebar__rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
  }
  .explore-map-layout .explore-map-sidebar__more { grid-column: 1 / -1; }
}

/* ── Split (1024-1279): list rail beside a flexible, taller map ──── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .explore-map-layout {
    height: clamp(560px, calc(100vh - 168px), 860px);
  }
  .explore-map-layout .explore-map-sidebar {
    flex: 0 0 40%;
    max-width: 440px;
  }
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — buyer Browse map overlay chrome
   Scoped to `.dark .buying-shell` so it only reaches the authenticated
   buyer map (which renders inside .buying-shell). The public/marketing
   explore map lives under body.explore-page (NOT .buying-shell) and is
   deliberately left untouched. Base rules above are all light-only
   (white/beige fills), so without these the floating chrome renders as
   bright white cards on the dark map.

   PRICE DATA-VIZ IS INTENTIONALLY NOT TOUCHED HERE: the legend ramp
   gradient, the legend swatches (.is-asking / .is-revenue), cluster
   bubbles, the zoombar green dots (.is-passed / .is-active), and every
   --asking_price / price-bucket color keep their exact light hexes so
   the color→price encoding is preserved in dark mode.
   ════════════════════════════════════════════════════════════════ */

/* Floating overlay surfaces → most-elevated dark surface + neutral
   border (they float above the map). Existing box-shadows are kept. */
.dark .buying-shell .explore-map-panel,
.dark .buying-shell .explore-map-legend,
.dark .buying-shell .explore-map-mode-toggle,
.dark .buying-shell .explore-map-zoom,
.dark .buying-shell .explore-map-zoombar {
  background: var(--base-bg-highest);
  border-color: var(--base-border-secondary);
}

/* Primary text: legend + zoombar titles, and the pins-mode legend rows. */
.dark .buying-shell .explore-map-legend__title,
.dark .buying-shell .explore-map-zoombar__title,
.dark .buying-shell .explore-map-legend__row {
  color: var(--base-text);
}

/* Muted text: notes, ramp endpoints, zoombar level label. */
.dark .buying-shell .explore-map-legend__note,
.dark .buying-shell .explore-map-legend__ramp-ends,
.dark .buying-shell .explore-map-zoombar__label {
  color: var(--base-text-secondary);
}

/* Most-muted text: the "ⓘ" info row + its icon. */
.dark .buying-shell .explore-map-legend__info-row,
.dark .buying-shell .explore-map-legend__info-icon {
  color: var(--base-text-tertiary);
}

/* Mode-toggle + zoom buttons: idle sits transparent on the dark surface
   with a readable label; the zoom divider follows the neutral border. */
.dark .buying-shell .explore-map-mode-toggle__btn,
.dark .buying-shell .explore-map-zoom button {
  background: transparent;
  color: var(--base-text);
}
.dark .buying-shell .explore-map-zoom button:first-child {
  border-bottom-color: var(--base-border-secondary);
}
/* Active pins/clusters toggle keeps the app's brand-green-tinted active
   treatment (green tint fill + light-green text). */
.dark .buying-shell .explore-map-mode-toggle__btn.is-active {
  background: var(--color-brand-green-75);
  color: var(--text-primary);
}

/* Value pills are price data-viz and keep their light-mode look in dark. The
   asking-price variant is a green fill; the annual-revenue variant is a white
   surface with dark-green ink + green outline. That white pill matches the
   legend's white swatch and encodes a data value ("no asking price"), not
   chrome, so it MUST stay white in dark too — it is deliberately NOT darkened
   here (the dark-green ink stays readable on white in both modes). */

/* Idle zoom-progress dot (light gray chrome); the passed/active green dots are
   data-viz, so :not() leaves them alone. */
.dark .buying-shell .explore-map-zoombar__dot:not(.is-passed):not(.is-active) {
  background: var(--base-text-tertiary);
}

/* Selected-listing dock (the on-map popup card). White surface + dark-green
   title/price ink that vanish on dark. Elevate the surface and flip the ink;
   the green "View full details" CTA and the .explore-badge chips are left as-is
   (CTA is a primary button; badges flip via the .dark .buying-shell .explore-badge rules). */
.dark .buying-shell .explore-map-dock {
  background: var(--base-bg-highest);
  border-color: var(--base-border-secondary);
}
.dark .buying-shell .explore-map-dock__title-row,
.dark .buying-shell .explore-map-dock__title { color: var(--base-text); }
.dark .buying-shell .explore-map-dock__price { color: var(--text-primary); }
.dark .buying-shell .explore-map-dock__price-label { color: var(--base-text-secondary); }
.dark .buying-shell .explore-map-dock__close {
  background: transparent;
  border-color: var(--base-border-secondary);
}
/* Heart/save button ships a white fill + light border; flip to the dock's
   outline-button treatment (matches __close). The [data-saved] red ink is left
   alone — it reads on the dark surface and the light rule still wins for it. */
.dark .buying-shell .explore-map-dock__save {
  background: transparent;
  border-color: var(--base-border-secondary);
}

/* ── Browse map-detail slideover (buyer) ──────────────────────────────
   The buyer-browse detail slideover reuses the shared slideover chrome
   (.slideover-panel/-header/-footer + .brokering-slideover-stack/-section),
   but this page also loads marketing/pages/explore.css AFTER the Tailwind
   build, and that sheet redeclares those classes as hardcoded #fff / #F1F7F5
   with NO dark override — so the whole slideover renders white in dark. Its
   plain-class rules (0,1,0) can't be beaten by load order here, so restore the
   dark surfaces with shell-scoped rules (0,3,0) that also load last. Values
   mirror the canonical broker slideover's L3 hierarchy (dark-mode-system.md
   §"Slideover surface hierarchy"): panel chrome (panel + header + footer) is
   the elevated floating surface --base-bg-highest; the scroll stack drops to
   --background; section cards are darker wells at --base-bg-low. So the buyer
   slideover reads identically to broker. Buyer-scoped, so the public explore
   page (no .buying-shell) stays light and marketing stays out of scope. */
.dark .buying-shell .slideover-panel,
.dark .buying-shell .slideover-header,
.dark .buying-shell .slideover-footer { background: var(--base-bg-highest); }
.dark .buying-shell .brokering-slideover-stack { background: var(--background); }
.dark .buying-shell .brokering-slideover-section { background: var(--base-bg-low); }

/* ── Explore badges — consolidated onto the design-system status tokens ────────
   The .explore-badge--* family (base colors in marketing/pages/explore.css) hardcoded
   a light hex per variant and needed a hand-written .dark patch per variant in buying.css
   — bug-prone: a forgotten `color` left the dock's --type badge dark-on-dark. Drive every
   variant from the shared --status-* tokens instead (the same tokens the canonical .pill
   consumes): one rule per status, flips for light + dark automatically, zero dark patches.
   The --status-* light values already match the old marketing hex and the dark values match
   the old .dark patch rgba()s, so this is a near-zero visual change that deletes the drift.
   Scoped to .buying-shell: the public explore page is light-only, lacks the dashboard
   --status-* tokens, and ships its own marketing `.pill`, so it keeps the marketing colors
   untouched. Dock selectors (.explore-map-dock .explore-badge--*) are re-stated at higher
   specificity to beat the dock's own neutral/match base rules earlier in this file. */
.buying-shell .explore-badge { border: 1px solid transparent; }

.buying-shell .explore-badge--type,
.buying-shell .explore-badge--locked,
.buying-shell .explore-badge--inquiry.is-neutral,
.buying-shell .explore-inquiry-status.is-neutral,
.buying-shell .explore-map-dock .explore-badge--type {
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}
.buying-shell .explore-badge--anon,
.buying-shell .explore-badge--new,
.buying-shell .explore-badge--verified,
.buying-shell .explore-badge--match,
.buying-shell .explore-badge--match-item,
.buying-shell .explore-badge--inquiry.is-success,
.buying-shell .explore-inquiry-status.is-success,
.buying-shell .explore-map-dock .explore-badge--match {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}
.buying-shell .explore-badge--granted,
.buying-shell .explore-badge--specialty,
.buying-shell .explore-badge--budget,
.buying-shell .explore-badge--inquiry.is-info,
.buying-shell .explore-inquiry-status.is-info {
  background: var(--status-info-bg);
  color: var(--status-info-text);
}
.buying-shell .explore-badge--inquiry.is-purple,
.buying-shell .explore-inquiry-status.is-purple {
  background: var(--status-purple-bg);
  color: var(--status-purple-text);
}
.buying-shell .explore-badge--location {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}