/* =================================================================
   Explore Practices — Public marketplace pages
   Extends marketing/site.css + colors_and_type.css
   ================================================================= */

/* ── Color theme alignment ────────────────────────────────────────
   The explore marketplace originally used brand green as a fill,
   background and text color throughout. The rest of the marketing
   site (/sellers, /brokers, etc.) keeps the base neutral — white /
   gray / near-black — and uses green only as a sparing accent.

   To align explore we neutralise the three decorative green tokens
   for this page (scoped to body.explore-page so the authenticated
   buyer browse, which intentionally mirrors the broker/seller mint
   workspace, is left untouched). This single remap flips every mint
   fill, deep-green price/value/icon, the green primary button + nav
   CTA, the "Get matched" block and inline-ERB greens to neutral at
   once. True accents are re-introduced explicitly via --explore-accent
   on the few spots below (headline highlight, focus rings, active tab
   underline, back link, hero pulse dot, privacy "visible" dot).
   Multi-colour semantic badges use their own literal hexes and are
   intentionally unaffected. ───────────────────────────────────────── */
.explore-page {
  --color-brand-green:      var(--color-gray-950, #0a0a0a); /* fills / buttons / borders → near-black, matches marketing .btn-primary */
  --color-brand-green-deep: var(--base-text, #171717);       /* prices / values / dark text → near-black */
  --color-brand-green-75:   var(--color-gray-100, #f5f5f5);  /* mint tints / fills → light gray */
  --explore-accent:         #1f5e3a;                         /* true brand green — sparing accents only */
}

/* ── Form primitives (mirrors onboarding.css, needed for register modal) ── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--base-text-secondary, #404040); }
.form-control {
  width: 100%; padding: 0 14px; min-height: 44px;
  background: #fff;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: 12px;
  font-size: 14px;
  color: var(--base-text, #171717);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
textarea.form-control { padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.5; }
.form-control:focus {
  outline: none;
  border-color: var(--explore-accent, #1f5e3a);
  box-shadow: 0 0 0 3px rgba(32,94,58,.12);
}
.form-control::placeholder { color: var(--base-text-tertiary, #737373); }
.form-hint { font-size: 12px; color: var(--base-text-tertiary, #737373); margin: 0; }

/* ── Input / select (used in filter card) ── */
.input {
  width: 100%;
  padding: 0 12px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--base-text, #171717);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  transition: border-color .12s, box-shadow .12s;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* Text inputs (not selects) don't need the dropdown arrow */
input.input:not(select) {
  background-image: none;
  padding-right: 12px;
  cursor: text;
}
.input:focus {
  outline: none;
  border-color: var(--explore-accent, #1f5e3a);
  box-shadow: 0 0 0 3px rgba(32,94,58,.10);
}

/* ── Layout container (mirrors site.css — needed when loaded standalone) ── */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .wrap, .wrap-narrow { padding: 0 24px; } }
@media (max-width: 480px) { .wrap, .wrap-narrow { padding: 0 18px; } }

/* ── Hero ─────────────────────────────────────────────────────── */
.explore-hero {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-brand-green-75, #e8f6ee), white 35%) 0%,
    var(--base-bg-base, #f1f7f5) 100%
  );
  border-bottom: 1px solid var(--base-border-tertiary, #e5e5e5);
  position: relative;
  overflow: hidden;
}

.explore-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.explore-hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: end;
  padding-top: 44px;
  padding-bottom: 36px;
}

@media (max-width: 900px) {
  .explore-hero__inner {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }
}

.explore-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  background: white;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--base-text-secondary, #404040);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.explore-hero__badge-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
}

.explore-hero__badge-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--explore-accent, #1f5e3a);
  opacity: .35;
  animation: explore-pulse 2s ease-out infinite;
}

.explore-hero__badge-dot::after {
  content: "";
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--explore-accent, #1f5e3a);
}

@keyframes explore-pulse {
  0%   { transform: scale(.8); opacity: .55; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { opacity: 0; }
}

.explore-hero__headline {
  margin: 16px 0 10px;
  font-size: clamp(34px, 4.5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--base-text, #171717);
}

.explore-hero__headline-accent { color: var(--explore-accent, #1f5e3a); }

.explore-hero__subhead {
  margin: 0;
  font-size: 15px;
  color: var(--base-text-secondary, #404040);
  line-height: 1.55;
  max-width: 560px;
}

.explore-hero__trust {
  display: flex;
  gap: 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.explore-trust-point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--base-text-secondary, #404040);
}

.explore-trust-point__icon {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--color-brand-green-75, #e8f6ee);
  color: var(--color-brand-green-deep, #0c3e26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explore-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.explore-hero__stat-tile {
  background: white;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.explore-hero__stat-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.explore-hero__stat-value {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--base-text, #171717);
}

.explore-hero__stat-value--accent { color: var(--color-brand-green-deep, #0c3e26); }

/* ── Main content ─────────────────────────────────────────────── */
.explore-main {
  /* Vertical only (longhand) so the .wrap horizontal gutter stands — using the
     `padding` shorthand here zeroed left/right and let the filter card + listing
     grid touch the screen edges on mobile. */
  padding-top: 28px;
  padding-bottom: 80px;
}

/* ── Filter card ──────────────────────────────────────────────── */
.explore-filters-card {
  margin-bottom: 14px;
  padding: 16px !important;
}

.explore-filters-card__row {
  display: grid;
  grid-template-columns: 120px 1.2fr 1fr 1fr;
  gap: 12px;
  align-items: flex-end;
}

/* Buyer browse (the only row with budget fields): flex layout so each field
   sizes to its own content — selects to their widest option — instead of
   uniform grid tracks. The City field grows to absorb the leftover space. */
.explore-filters-card__row--budget {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.explore-filters-card__row--budget .explore-filters-card__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Native selects (and the zones trigger button) size to their widest option. */
.explore-filters-card__row--budget .explore-filters-card__select {
  width: auto;
  min-width: 0;
}

/* Free-text / number inputs have no options to size to, so set sensible widths.
   The location field grows to fill the row's leftover space. */
.explore-filters-card__field--location { flex: 1 1 180px; min-width: 160px; }
.explore-filters-card__field--location .input { width: 100%; }
.explore-filters-card__field--budget { width: 116px; }
.explore-filters-card__field--budget .input { width: 100%; }

@media (max-width: 900px) {
  .explore-filters-card__row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .explore-filters-card__row { grid-template-columns: 1fr; }
  .explore-filters-card__row--budget .explore-filters-card__field,
  .explore-filters-card__field--location,
  .explore-filters-card__field--budget { width: 100%; flex: 1 1 100%; }
  .explore-filters-card__row--budget .explore-filters-card__select { width: 100%; }
}

.explore-filters-card__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.explore-filters-card__select {
  height: 36px;
}

/* ---- Mobile filter bar + bottom sheet (≤900px, incl. the native app) ----
   Replaces the 4-field card with: city search + a "Filters" button opening a
   bottom sheet (State / Type / Sort + Apply). Desktop (>900px) never sees these.
   Sheet visuals follow the wizard's vp-sheet (onboarding.css). */
.explore-mbar { display: none; }

@media (max-width: 900px) {
  .explore-mbar { display: flex; gap: 8px; align-items: stretch; }
  .explore-mbar__search { flex: 1; height: 44px; min-width: 0; font-size: 16px; }
  .explore-mbar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; border: 0; border-radius: 10px;
    background: var(--color-brand-green, #205e3a); color: #fff;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  }
  .explore-mbar__btn-ic { width: 16px; height: 16px; }
  .explore-mbar__badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #fff; color: var(--color-brand-green, #205e3a);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  }
  /* Flatten the card chrome on mobile: only the bar + active chips remain visible. */
  .explore-filters-card {
    padding: 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important;
  }
  .explore-filters-card__row { display: none; }
}

.xfs-root { position: fixed; inset: 0; z-index: 1000; }
.xfs-root[hidden] { display: none; }
.xfs-scrim { position: absolute; inset: 0; background: rgba(10, 20, 14, 0.42); }
.xfs-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto; max-width: 640px;
  background: #fff; border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  max-height: 84%;
  display: flex; flex-direction: column;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom));
}
.xfs-handle {
  flex: 0 0 auto; width: 38px; height: 5px; border-radius: 99px;
  background: #e5e5e5; margin: 10px auto 4px;
}
.xfs-title {
  margin: 4px 4px 12px; font-size: 19px; font-weight: 700;
  letter-spacing: -0.02em; color: #0a0a0a;
}
.xfs-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.xfs-row { display: block; margin-bottom: 12px; }
.xfs-row__label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--base-text-tertiary, #737373); margin-bottom: 6px;
}
.xfs-row__select {
  width: 100%; height: 48px; padding: 0 40px 0 12px;
  border: 1.5px solid #e5e5e5; border-radius: 12px;
  background: #fff; font-size: 16px; font-family: inherit; color: #0a0a0a;
  /* Replace the OS select chrome: custom chevron inset 12px from the right,
     mirroring the 12px the text gets from the left. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.xfs-row__select:focus {
  outline: none;
  border-color: var(--color-brand-green, #205e3a);
  box-shadow: 0 0 0 3px rgba(32, 94, 58, 0.12);
}
.xfs-apply {
  flex: 0 0 auto; width: 100%; height: 48px; margin-top: 4px;
  border: 0; border-radius: 12px;
  background: var(--color-brand-green, #205e3a); color: #fff;
  font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
}
/* Native app: the center FAB pokes ~30px up into the WebView bottom — pad the
   sheet so "Show listings" clears it (body.is-native is set by the layout). */
.is-native .xfs-sheet {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* ── Shared multi-select filter dropdown (`.filter-ms-*`) ──────────
   ONE look for every "select multiple" filter — practice type, zones,
   etc. — across the marketing explore page AND the authenticated browse
   pages (`/buying/browse`). Defined here in explore.css because that
   stylesheet is loaded on both surfaces; the marketing page does NOT
   load the Tailwind utility build, so these are plain CSS (not `flex`,
   `w-56`, …). Driven by the shared `safe-dropdown` Stimulus controller,
   which toggles `.hidden` and applies position:fixed coordinates inline.

   Trigger: a `<button class="input … filter-ms-trigger">`. It reuses
   `.input`'s built-in background chevron, so DO NOT add an icon element
   inside the button — that produces a double arrow.

   Compact row spacing (`padding: 2px 10px`) and the deep-green check
   (`accent-color`) are intentional — keep them. */
.filter-ms-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.filter-ms-trigger__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-ms-menu {
  display: block;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}

.filter-ms-menu.hidden { display: none; }

.filter-ms-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--base-text, #171717);
  cursor: pointer;
  transition: background .1s;
}

.filter-ms-option:hover { background: var(--color-brand-green-75, #e8f6ee); }

.filter-ms-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--color-brand-green, #205e3a);
}

.filter-ms-option__text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Trailing meta on a row (e.g. a zone's "25mi" radius badge). */
.filter-ms-option__meta {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
}

/* Footer holding an "Apply" action inside the menu (zones / practice type
   on the authenticated browse pages, which batch-apply rather than
   auto-submit per checkbox). */
.filter-ms-footer {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--base-border-tertiary, #e5e5e5);
}

.explore-active-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--base-border-tertiary, #e5e5e5);
  align-items: center;
}

.explore-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 99px;
  background: var(--color-brand-green-75, #e8f6ee);
  border: 1px solid color-mix(in oklab, var(--color-brand-green, #205e3a), white 65%);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-brand-green-deep, #0c3e26);
}

.explore-active-filter__label { opacity: .65; }

.explore-active-filter__remove {
  width: 18px;
  height: 18px;
  border-radius: 99px;
  background: rgba(12,62,38,.12);
  color: var(--color-brand-green-deep, #0c3e26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
}

.explore-active-filter__remove:hover { background: rgba(12,62,38,.22); }
.explore-active-filters__clear { font-size: 13px; color: var(--base-text-tertiary, #737373); cursor: pointer; text-decoration: underline; margin-left: 4px; }

/* ── Result bar ───────────────────────────────────────────────── */
.explore-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 2px 16px;
}

.explore-result-bar__count { font-size: 13px; color: var(--base-text-tertiary, #737373); }
.explore-result-bar__count strong { color: var(--base-text, #171717); font-weight: 700; }

.explore-result-bar__controls { display: flex; align-items: center; gap: 10px; }

.explore-result-bar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.explore-result-bar__sort-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  text-transform: uppercase;
  letter-spacing: .06em;
  /* Zero out the app's global `label` margin so the flex `align-items:center`
     centers the visible text against the select, not the margin-box. */
  margin: 0;
  line-height: 1;
}

.explore-view-toggle {
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: var(--color-gray-100, #f5f5f5);
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
}

.explore-view-toggle__btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  color: var(--base-text-tertiary, #737373);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s, box-shadow .12s, color .12s;
}

/* The toggle is built from link_to anchors; the buying layout underlines links
   by default, so kill the underline on the labels too. */
.explore-view-toggle__btn,
.explore-view-toggle__btn:hover,
.explore-view-toggle__btn span {
  text-decoration: none;
}

.explore-view-toggle__btn.is-active {
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  color: var(--base-text, #171717);
}

/* ── Practice card grid ───────────────────────────────────────── */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .explore-grid { grid-template-columns: 1fr; } }

/* ── Mobile (<=640): concise hero, compact stats, roomier card rhythm ──────
   Phones don't need the reassurance trust-points or the big hero headline, and
   the four stat tiles read better shrunk. The card-rhythm rules also benefit the
   native Browse tab (where the hero itself is hidden). */
@media (max-width: 640px) {
  /* Concise hero */
  .explore-hero__inner { padding-top: 20px; padding-bottom: 20px; gap: 18px; }
  .explore-hero__headline { font-size: 27px; margin: 8px 0 14px; line-height: 1.08; }
  /* Subhead + trust points are reassurance copy — drop them on phones to keep the
     hero to the essentials (badge + headline + stats). */
  .explore-hero__subhead { display: none; }
  .explore-hero__trust { display: none; }

  /* Really compact stat tiles (2x2) */
  .explore-hero__stats { gap: 8px; }
  .explore-hero__stat-tile { padding: 9px 11px; border-radius: 10px; }
  .explore-hero__stat-label { font-size: 11px; }
  .explore-hero__stat-value { font-size: 19px; margin-top: 2px; }

  /* Comfortable rhythm + a little more breathing room in the cards */
  .explore-main { padding-top: 18px; padding-bottom: 56px; }
  .explore-result-bar { margin: 16px 0 12px; }
  .explore-grid { gap: 16px; }
  /* card-specific mobile rhythm lives after the base card rules (source order) */
}

/* Section divider — spans all columns, used before seller-granted group */
.explore-grid__section-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.explore-grid__section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--base-border-tertiary, #e5e5e5);
}

/* ── Practice card ────────────────────────────────────────────── */
.explore-card {
  background: white;
  border: 1px solid #e6eae8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 40, 28, .05);
  transition: box-shadow .15s, border-color .15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.explore-card:hover {
  box-shadow: 0 10px 26px rgba(16, 40, 28, .1);
  border-color: #c7ddd0;
}

.explore-card__banner {
  height: 108px;
  position: relative;
  z-index: 1; /* lets match-chip popover paint over card body */
  background: linear-gradient(135deg, var(--color-brand-green-75, #e8f6ee), #f3faf6);
  border-bottom: 1px solid #e6eae8;
}

.explore-card__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.explore-card__save-btn {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 30px;
  height: 30px;
  border-radius: 99px;
  background: white;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow .12s;
}

.explore-card__save-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.explore-card__save-icon { width: 14px; height: 14px; color: var(--base-text-tertiary, #737373); }
.explore-card__save-btn[data-saved="true"] .explore-card__save-icon { color: #dc2626; }

.explore-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.explore-card__price-value {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-brand-green-deep, #0c3e26);
}

.explore-card__price-label {
  font-size: 11.5px;
  color: var(--color-brand-green-deep, #0c3e26);
  opacity: .7;
  font-weight: 500;
}

.explore-card__price-pending {
  font-size: 18px;
  font-weight: 500;
  color: var(--base-text-tertiary, #737373);
  font-style: italic;
  padding-bottom: 12px;
}

.explore-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.explore-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--base-text-tertiary, #737373);
}

.explore-card__meta-icon { width: 12px; height: 12px; flex-shrink: 0; }

.explore-card__title {
  margin: 6px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.explore-card__stats {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--base-border-tertiary, #e5e5e5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  /* wider column gap so long labels (e.g. OPERATORIES) don't crowd the next
     stat (SQ FT); modest row gap keeps wrapped rows tight. */
  gap: 10px 18px;
  flex: 1;
}

.explore-card__stat-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.explore-card__stat-value {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--base-text, #171717);
  margin-top: 2px;
}

/* Save-for-later bookmark, rendered as a stat cell on the matches grid */
.explore-card__stat--save { display: flex; flex-direction: column; }
.explore-card__save-pin-form { margin: 2px 0 0; }
.explore-card__save-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  color: var(--base-text-tertiary, #737373);
  cursor: pointer;
  transition: color .12s, border-color .12s, box-shadow .12s;
}
.explore-card__save-pin:hover {
  color: var(--color-brand-green, #205e3a);
  border-color: var(--color-brand-green, #205e3a);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.explore-card__save-pin-icon { width: 15px; height: 15px; }

/* Mobile (<=640) card rhythm — after the base card rules so it wins on source order:
   shorter banner + a little vertical spacing between price/meta/title so cards
   don't read cramped on a phone. */
@media (max-width: 640px) {
  .explore-card__banner { height: 100px; }
  .explore-card__meta { margin-top: 4px; font-size: 13px; }
  .explore-card__title { margin-top: 8px; font-size: 16px; }
  .explore-card__price-label { font-size: 12.5px; }
  .explore-card__stat-label { font-size: 11px; }
  .explore-card__footer { font-size: 12.5px; }
  .explore-badge { font-size: 11.5px; }
}

/* ── Badges ───────────────────────────────────────────────────── */
.explore-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
}

.explore-badge--type {
  background: white;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  color: var(--base-text-secondary, #404040);
}

.explore-badge--locked {
  background: var(--color-gray-100, #f5f5f5);
  color: var(--base-text-tertiary, #737373);
  font-size: 10px;
}

.explore-badge--anon {
  background: color-mix(in oklab, var(--color-brand-green, #205E3A), white 88%);
  border: 1px solid color-mix(in oklab, var(--color-brand-green, #205E3A), white 65%);
  color: var(--color-brand-green-deep, #0c3e26);
  font-size: 10px;
}

/* "New" — matches added since the buyer's last visit (Matches tab) */
.explore-badge--new {
  background: #dcefe4;
  border: 1px solid #bfe3cf;
  color: #166a41;
}

.explore-badge--inquiry,
.explore-inquiry-status {
  border: 1px solid transparent;
  white-space: nowrap;
}

.explore-badge--inquiry.is-info,
.explore-inquiry-status.is-info {
  background: #eef6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.explore-badge--inquiry.is-success,
.explore-inquiry-status.is-success {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

.explore-badge--inquiry.is-purple,
.explore-inquiry-status.is-purple {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

.explore-badge--inquiry.is-neutral,
.explore-inquiry-status.is-neutral {
  background: #f5f5f5;
  border-color: #e5e5e5;
  color: #525252;
}

.explore-badge--match {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #047857;
}

.explore-badge--specialty {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

.explore-badge--match-item {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

.explore-badge--location {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}

.explore-badge--budget {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  color: #0f766e;
}

.explore-badge--granted {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
}

/* ── Match chip ───────────────────────────────────────────────── */

/* Trigger — inverted pill so it reads as a score, not a listing tag */
.explore-match-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.explore-match-chip__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(4, 120, 87, 0.12);
  border: 1px solid rgba(4, 120, 87, 0.28);
  color: #065f46;
  letter-spacing: 0.01em;
}

.explore-match-chip.is-full-match .explore-match-chip__trigger {
  background: #047857;
  border-color: #047857;
  color: white;
}

.explore-match-chip__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Floating panel — no visible border, layered shadow, caret arrow */
.explore-match-chip__popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: white;
  border-radius: 12px;
  padding: 12px 14px 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.08);
  min-width: 176px;
  white-space: nowrap;
}

/* Caret pointing up at the chip */
.explore-match-chip__popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 14px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.06));
}

.explore-match-chip:hover .explore-match-chip__popover,
.explore-match-chip.is-open .explore-match-chip__popover {
  display: block;
}

.explore-match-chip__popover-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a3a3a3;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid #f0f0f0;
}

.explore-match-chip__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 0;
}

.explore-match-chip__row + .explore-match-chip__row {
  border-top: 1px solid #f5f5f5;
}

.explore-match-chip__row.is-match    { color: #15803d; }
.explore-match-chip__row.is-no-match { color: #a3a3a3; }

.explore-match-chip__row-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Map panel ────────────────────────────────────────────────────
   Height is governed by the flex layout (.explore-map-layout) so it tracks
   every responsive tier; a hard-coded height here only matched the old fixed
   620px desktop and left a gap in the taller split tier. Border/radius/bg come
   from shared/browse_map.css (loaded after this file). */
.explore-map-panel {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
}

.explore-map-panel__map { width: 100%; height: 100%; }

/* Phone map view is map-first: the full-bleed map + draggable sheet own the
   screen, so the marketing hero (headline + stat tiles) is dropped here to keep
   the sheet's peek above the fold, matching the native Browse tab, where the
   hero is never rendered. The hero still shows on phone GRID view and on every
   wider screen. `.is-map-view` is set on the explore root when @map_view. */
@media (max-width: 767px) {
  .is-map-view .explore-hero { display: none; }
  /* Match the native app's 15-18px scale (Account/sign-in screens): the browse
     result bar + view toggle were 12-13px, smaller than the rest of the app. */
  .explore-result-bar__count { font-size: 14px; }
  .explore-view-toggle__btn { font-size: 13px; }
}

/* ── Empty state ──────────────────────────────────────────────── */
.explore-empty-state {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  color: var(--base-text-tertiary, #737373);
}

.explore-empty-state__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  opacity: .4;
}

.explore-empty-state__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--base-text, #171717);
  margin: 0 0 4px;
}

.explore-empty-state__body {
  font-size: 13px;
  margin: 0 0 16px;
}

.explore-empty-state--inline { padding: 24px; }

/* ── Shared marketplace pagination ───────────────────────────── */
.buying-grid-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 0;
  color: var(--base-text-tertiary, #737373);
  font-size: 12px;
}
.buying-pager { display: flex; align-items: center; gap: 4px; }
.buying-pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 30px; padding: 0 8px;
  border: 1px solid var(--base-border-tertiary, #e5e5e5); border-radius: 8px;
  background: #fff;
  color: var(--base-text-secondary, #525252);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.buying-pager-btn:hover { background: var(--color-gray-50, #fafafa); }
.buying-pager-btn.is-active,
.buying-pager-btn.is-active:hover {
  background: var(--color-gray-900, #171717);
  border-color: var(--color-gray-900, #171717);
  color: #fff;
}
.buying-pager-btn.is-disabled {
  opacity: .5;
  color: var(--base-text-tertiary, #737373);
  cursor: default;
  pointer-events: none;
}
.buying-pager-gap {
  display: inline-flex; align-items: center;
  padding: 0 4px;
  color: var(--base-text-tertiary, #737373);
  font-size: 13px;
}
@media (max-width: 600px) {
  .buying-grid-pagination { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Match CTA ────────────────────────────────────────────────── */
.explore-match-cta {
  margin-top: 40px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-brand-green-deep, #0c3e26), var(--color-brand-green, #205e3a));
  color: white;
  position: relative;
}

.explore-match-cta__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  position: relative;
  flex-wrap: wrap;
}

.explore-match-cta__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
  margin: 0 0 6px;
}

.explore-match-cta__headline {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}

.explore-match-cta__body {
  font-size: 14px;
  opacity: .9;
  max-width: 520px;
  line-height: 1.5;
  margin: 0;
}

.explore-match-cta__text { flex: 1; min-width: 280px; }
.explore-match-cta__eyebrow { color: rgba(255,255,255,.75) !important; }
.explore-match-cta__headline { color: #fff !important; }
.explore-match-cta__body { color: rgba(255,255,255,.9) !important; }

.explore-match-cta__secondary {
  margin: 10px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.explore-match-cta__secondary a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.explore-match-cta__btn {
  background: white !important;
  color: var(--color-brand-green-deep, #0c3e26) !important;
  border-color: transparent !important;
  border-radius: 999px;
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Detail header ────────────────────────────────────────────── */
.explore-detail-header {
  background: var(--base-bg-base, #f1f7f5);
  border-bottom: 1px solid var(--base-border-tertiary, #e5e5e5);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Inside the buying dashboard shell, offset below the 58px topbar */
.buying-page .explore-detail-header { top: 58px; }

/* ── Buyer workspace context: mint background matching broker/seller pages ── */
.is-buying-browse {
  background: #F1F7F5;
  min-height: 100dvh;
}
.is-buying-browse .explore-detail-header {
  background: #F1F7F5;
}
.is-buying-browse .explore-detail-main {
  padding-top: 24px;
}

/* Inside the buying sidebar layout, .wrap must NOT center — it should fill
   the available width with padding-inline only, exactly like
   .brokering-listing-page-inner in the broker/seller workspace. */
.is-buying-browse .wrap,
.is-buying-browse .wrap-narrow {
  max-width: none;
  margin: 0;
  padding-inline: 24px;
}
@media (min-width: 768px) {
  .is-buying-browse .wrap,
  .is-buying-browse .wrap-narrow {
    padding-inline: 32px;
  }
}

/* Narrower sidebar + tighter gap so the 1fr content column gets more room */
.is-buying-browse .explore-detail-grid {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
}

/* Stack the grid at a viewport width that accounts for the 248px sidebar */
@media (max-width: 900px) {
  .is-buying-browse .explore-detail-grid {
    grid-template-columns: 1fr;
  }
  .is-buying-browse .explore-detail-sidebar {
    order: -1;
  }
}

.explore-detail-header .wrap { padding-top: 12px; }

.explore-detail-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--base-text-tertiary, #737373);
  margin-bottom: 10px;
}

.explore-detail-header__back {
  color: var(--explore-accent, #1f5e3a);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-200, #e5e5e5);
  background: var(--base-bg, #ffffff);
  transition: background .12s, border-color .12s;
}

.explore-detail-header__back:hover {
  background: color-mix(in oklab, var(--explore-accent, #1f5e3a) 8%, white);
  border-color: color-mix(in oklab, var(--explore-accent, #1f5e3a) 35%, white);
}
.explore-detail-header__sep { color: var(--color-gray-300, #d4d4d4); }
.explore-detail-header__crumb { color: var(--base-text-secondary, #404040); font-weight: 500; }

.explore-detail-header__main {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}

.explore-detail-header__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--base-text-tertiary, #737373);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.explore-detail-header__dot { color: var(--color-gray-300, #d4d4d4); }

.explore-detail-header__title {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--base-text, #171717);
}

.explore-detail-header__subline {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--base-text-tertiary, #737373);
  flex-wrap: wrap;
}

.explore-detail-header__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-brand-green-deep, #0c3e26);
  font-weight: 600;
}

.explore-detail-header__locked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-primary {
  background: var(--color-brand-green, #205e3a) !important;
  border-color: var(--color-brand-green, #205e3a) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--color-brand-green-deep, #0c3e26) !important;
  border-color: var(--color-brand-green-deep, #0c3e26) !important;
}

.explore-detail-header__right-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 200px;
}

.explore-detail-header__price-col { text-align: right; }
.explore-detail-header__price-label { font-size: 10px; font-weight: 600; color: var(--base-text-tertiary, #737373); text-transform: uppercase; letter-spacing: .08em; }
.explore-detail-header__price-value { font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; letter-spacing: -0.03em; color: var(--color-brand-green-deep, #0c3e26); line-height: 1; margin-top: 2px; }
.explore-detail-header__price-sub { font-size: 11px; color: var(--base-text-tertiary, #737373); margin-top: 4px; }

.explore-detail-header__cta-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.explore-detail-header__activity {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--base-text-tertiary, #737373);
  justify-content: flex-end;
}

.explore-detail-header__activity strong { color: var(--base-text, #171717); font-weight: 600; }

.explore-detail-header__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: -1px;
  overflow-x: auto;
}

.explore-detail-header__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--base-text-tertiary, #737373);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}

.explore-detail-header__tab:hover { color: var(--base-text, #171717); }
.explore-detail-header__tab.is-active {
  color: var(--color-brand-green-deep, #0c3e26);
  border-bottom-color: var(--explore-accent, #1f5e3a);
  font-weight: 600;
}

/* ── Detail main layout ───────────────────────────────────────── */
.explore-detail-main {
  padding: 28px 0 60px;
}

.explore-detail-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .explore-detail-grid {
    grid-template-columns: 1fr;
  }
  .explore-detail-sidebar { order: -1; }
}

.explore-detail-content { display: grid; gap: 22px; }

/* ── Privacy banner (full-width, spans above detail grid) ─────────────── */
.explore-privacy-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 22px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--color-brand-green, #205E3A), white 70%);
  background: color-mix(in oklab, var(--color-brand-green, #205E3A), white 94%);
}
.explore-privacy-banner__icon {
  flex-shrink: 0;
  color: var(--color-brand-green-deep, #0c3e26);
  margin-top: 1px;
}
.explore-privacy-banner__body {
  flex: 1;
  min-width: 200px;
}
.explore-privacy-banner__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-brand-green-deep, #0c3e26);
  margin-bottom: 3px;
}
.explore-privacy-banner__text {
  font-size: 12.5px;
  color: color-mix(in oklab, var(--color-brand-green-deep, #0c3e26), white 20%);
  line-height: 1.55;
}
.explore-privacy-banner__pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.explore-privacy-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}
.explore-privacy-banner__pill--visible {
  background: color-mix(in oklab, var(--color-brand-green, #205E3A), white 80%);
  color: var(--color-brand-green-deep, #0c3e26);
  border: 1px solid color-mix(in oklab, var(--color-brand-green, #205E3A), white 55%);
}
.explore-privacy-banner__pill--hidden {
  background: var(--color-gray-100, #f5f5f5);
  color: var(--base-text-secondary, #404040);
  border: 1px solid var(--color-gray-200, #e5e7eb);
}
.explore-privacy-banner__cta {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .explore-privacy-banner__cta { margin-left: 0; width: 100%; }
  .explore-privacy-banner__cta .btn { width: 100%; }
}

/* ── Privacy sidebar card ─────────────────────────────────────────────── */
.explore-privacy-sidebar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid color-mix(in oklab, var(--color-brand-green, #205E3A), white 70%) !important;
  background: color-mix(in oklab, var(--color-brand-green, #205E3A), white 94%) !important;
}
.explore-privacy-sidebar__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-brand-green-deep, #0c3e26);
}
.explore-privacy-sidebar__content { flex: 1; min-width: 0; }
.explore-privacy-sidebar__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-brand-green-deep, #0c3e26);
  margin: 0 0 4px;
}
.explore-privacy-sidebar__body {
  font-size: 12px;
  color: color-mix(in oklab, var(--color-brand-green-deep, #0c3e26), white 15%);
  line-height: 1.5;
  margin: 0 0 10px;
}
.explore-privacy-sidebar__rows { display: grid; gap: 6px; }
.explore-privacy-sidebar__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-brand-green-deep, #0c3e26);
}
.explore-privacy-sidebar__dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex-shrink: 0;
}
.explore-privacy-sidebar__dot--green  { background: var(--explore-accent, #1f5e3a); }
.explore-privacy-sidebar__dot--locked { background: var(--color-gray-300, #d1d5db); }

.explore-detail-sidebar {
  position: sticky;
  top: calc(var(--detail-header-height, 200px) + 16px);
  display: grid;
  gap: 14px;
}

/* ── Detail cards ─────────────────────────────────────────────── */
.explore-detail-card { padding: 24px; }
.explore-detail-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.explore-detail-card__title { margin: 0 0 16px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; color: var(--base-text, #171717); }
.explore-detail-card__heading { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.explore-detail-card__text { margin: 0; font-size: 14px; color: var(--base-text-secondary, #404040); line-height: 1.65; }
.explore-detail-card__divider { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--base-border-tertiary, #e5e5e5); }
.explore-detail-card__note { padding: 14px; border-radius: 10px; background: var(--color-gray-50, #fafafa); border: 1px solid var(--base-border-tertiary, #e5e5e5); font-size: 12.5px; color: var(--base-text-secondary, #404040); line-height: 1.55; }

/* ── Section label ────────────────────────────────────────────── */
.explore-section-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 10px;
}

/* ── KPI grid ─────────────────────────────────────────────────── */
.explore-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) { .explore-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.explore-kpi-tile {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: white;
}

.explore-kpi-tile--accent {
  background: var(--color-brand-green-75, #e8f6ee);
  border-color: color-mix(in oklab, var(--color-brand-green, #205e3a), white 65%);
}

.explore-kpi-tile__label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.explore-kpi-tile--accent .explore-kpi-tile__label {
  color: var(--color-brand-green-deep, #0c3e26);
  opacity: .85;
}

.explore-kpi-tile__value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
  color: var(--base-text, #171717);
}

.explore-kpi-tile--accent .explore-kpi-tile__value { color: var(--color-brand-green-deep, #0c3e26); }

.explore-kpi-tile__sub {
  font-size: 11.5px;
  color: var(--base-text-tertiary, #737373);
  margin-top: 2px;
  font-weight: 500;
}

.explore-kpi-tile--accent .explore-kpi-tile__sub { color: var(--color-brand-green-deep, #0c3e26); opacity: .8; }

/* ── Icon stat grid ───────────────────────────────────────────── */
.explore-icon-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 600px) { .explore-icon-stat-grid { grid-template-columns: repeat(2, 1fr); } }

.explore-icon-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-gray-50, #fafafa);
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
}

.explore-icon-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--base-text-secondary, #404040);
}

.explore-icon-stat__label {
  font-size: 10.5px;
  color: var(--base-text-tertiary, #737373);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.explore-icon-stat__value {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--base-text, #171717);
}

/* ── Highlights grid ──────────────────────────────────────────── */
.explore-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) { .explore-highlights-grid { grid-template-columns: 1fr; } }

.explore-highlight-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
}

.explore-highlight-item__icon {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--color-brand-green-75, #e8f6ee);
  color: var(--color-brand-green, #205e3a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── NDA card ─────────────────────────────────────────────────── */
.explore-nda-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: white;
}

.explore-nda-card--unlocked {
  background: var(--color-brand-green-75, #e8f6ee);
  border-color: color-mix(in oklab, var(--color-brand-green, #205e3a), white 65%);
}

.explore-nda-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-brand-green-75, #e8f6ee);
  color: var(--color-brand-green-deep, #0c3e26);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explore-nda-card--unlocked .explore-nda-card__icon {
  background: var(--color-brand-green, #205e3a);
  color: white;
  border-radius: 99px;
}

.explore-nda-card__icon--check { border-radius: 99px; }

.explore-nda-card__title { font-size: 14px; font-weight: 600; color: var(--base-text, #171717); }
.explore-nda-card--unlocked .explore-nda-card__title { color: var(--color-brand-green-deep, #0c3e26); }
.explore-nda-card__body { font-size: 12.5px; color: var(--base-text-tertiary, #737373); line-height: 1.5; margin-top: 2px; }
.explore-nda-card--unlocked .explore-nda-card__body { color: var(--color-brand-green-deep, #0c3e26); opacity: .75; }

/* ── Payer mix ────────────────────────────────────────────────── */
.explore-payer-mix-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: var(--color-gray-50, #fafafa);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--base-text, #171717);
}

/* ── Documents list ───────────────────────────────────────────── */
.explore-doc-list { display: grid; gap: 8px; }

.explore-doc-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: white;
}

.explore-doc-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explore-doc-row__icon--open { background: var(--color-brand-green-75, #e8f6ee); color: var(--color-brand-green-deep, #0c3e26); }
.explore-doc-row__icon--locked { background: var(--color-gray-100, #f5f5f5); color: var(--base-text-tertiary, #737373); }
.explore-doc-row__name { font-size: 13px; font-weight: 600; }
.explore-doc-row__size { font-size: 11.5px; color: var(--base-text-tertiary, #737373); }

/* ── KV grid ──────────────────────────────────────────────────── */
.explore-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .explore-kv-grid { grid-template-columns: 1fr; } }

.explore-kv-row {
  padding: 14px;
  border-radius: 10px;
  background: var(--color-gray-50, #fafafa);
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
}

.explore-kv-row__label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--base-text-tertiary, #737373);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.explore-kv-row__value { font-size: 13.5px; font-weight: 600; margin-top: 3px; color: var(--base-text, #171717); }

/* ── Equipment list ───────────────────────────────────────────── */
.explore-equipment-list { display: grid; gap: 8px; }

.explore-equipment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: var(--color-gray-50, #fafafa);
  font-size: 13.5px;
  font-weight: 500;
}

.explore-equipment-item__check {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: white;
  color: var(--color-brand-green-deep, #0c3e26);
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explore-equipment-item__cond {
  font-weight: 400;
  color: var(--base-text-tertiary, #737373);
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.explore-faq-accordion {
  background: var(--base-bg-card, #fff);
  border-color: var(--base-border-secondary, #d4d4d4) !important;
  box-shadow: 0 18px 45px color-mix(in oklab, var(--color-brand-green-deep, #0c3e26), transparent 92%);
}

.explore-faq-item {
  background: transparent;
  transition: background .18s ease;
}

.explore-faq-item.is-open {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand-green-75, #e8f6ee), white 52%), #fff);
}

.explore-faq-item__question {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--base-text, #171717);
}

.explore-faq-item__question:hover {
  background: color-mix(in oklab, var(--color-brand-green-75, #e8f6ee), transparent 55%);
}

.explore-faq-item__question-text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.explore-faq-item__question-text > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.explore-faq-item__question-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--color-brand-green, #205e3a), white 88%);
  color: var(--color-brand-green-deep, #0c3e26);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.explore-faq-item__toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-gray-100, #f5f5f5);
  color: var(--color-brand-green-deep, #0c3e26);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}

.explore-faq-item__toggle-icon.is-open {
  background: var(--color-brand-green-deep, #0c3e26);
  color: white;
  transform: rotate(180deg);
}

.explore-faq-item__answer {
  padding: 0 20px 20px 62px;
  font-size: 13.5px;
  color: var(--base-text-secondary, #404040);
  line-height: 1.6;
}

.explore-faq-item__answer-inner {
  border-left: 2px solid color-mix(in oklab, var(--color-brand-green, #205e3a), white 72%);
  padding: 2px 0 2px 16px;
}

.explore-faq-item__answer p {
  margin: 0;
}

/* ── Ask CTA ──────────────────────────────────────────────────── */
.explore-ask-cta {
  text-align: center;
  background: var(--color-brand-green-75, #e8f6ee) !important;
  border-color: color-mix(in oklab, var(--color-brand-green, #205e3a), white 65%) !important;
  padding: 24px !important;
}

.explore-ask-cta__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--color-brand-green-deep, #0c3e26); }
.explore-ask-cta__body { margin: 0 0 14px; font-size: 13px; color: var(--color-brand-green-deep, #0c3e26); opacity: .8; }

/* ── Sidebar cards ────────────────────────────────────────────── */
.explore-sidebar-card { padding: 18px 20px; }
.explore-sidebar-card__eyebrow { font-size: 11px; font-weight: 600; color: var(--base-text-tertiary, #737373); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.explore-sidebar-card__body { font-size: 13.5px; color: var(--base-text-secondary, #404040); line-height: 1.5; margin-top: 4px; margin-bottom: 14px; }
.explore-sidebar-card__actions { display: grid; gap: 8px; }
.explore-inquiry-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

.explore-seller-avatar {
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background: var(--color-brand-green-75, #e8f6ee);
  color: var(--color-brand-green-deep, #0c3e26);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explore-activity-list { display: grid; gap: 10px; }
.explore-activity-row { display: flex; align-items: center; gap: 10px; }

/* ── Save button ──────────────────────────────────────────────── */
.explore-save-btn[data-saved="true"] { color: #dc2626; }
.explore-save-btn[data-saved="true"] svg { fill: #dc2626; stroke: #dc2626; }

/* ── Location map ─────────────────────────────────────────────── */
.explore-location-map { background: var(--color-gray-50, #fafafa); }

/* ── Registration gate modal ──────────────────────────────────── */
.explore-gate-modal {
  /* DO NOT set position here — the browser UA provides position:fixed; inset:0
     for dialog:modal (showModal). Any author position override breaks centering.
     margin:auto distributes the remaining viewport space equally on all sides. */
  margin: auto;
  border: none;
  border-radius: 18px;
  padding: 0;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.2);
  max-width: 520px;
  width: calc(100vw - 32px);
  max-height: 90dvh;
  overflow: hidden;
}
.explore-gate-modal[open] {
  display: flex;
  flex-direction: column;
}

.explore-gate-modal::backdrop {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.explore-gate-modal__panel {
  padding: 52px 28px 24px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.explore-gate-modal__panel::-webkit-scrollbar { display: none; }

.explore-gate-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 99px;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--base-text-tertiary, #737373);
}

.explore-gate-modal__header { text-align: center; margin-bottom: 24px; }

.explore-gate-modal__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-brand-green-75, #e8f6ee);
  color: var(--color-brand-green-deep, #0c3e26);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.explore-gate-modal__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--base-text, #171717); }
.explore-gate-modal__subtitle { font-size: 14px; color: var(--base-text-secondary, #404040); margin: 0; line-height: 1.5; }
.explore-gate-modal__form { display: grid; gap: 14px; }
.explore-gate-modal__signin { text-align: center; font-size: 13px; color: var(--base-text-tertiary, #737373); margin-top: 16px; margin-bottom: 0; }

/* ── Design-system slideover (ported — explore layout loads no Tailwind bundle) ─ */

/* Scroll-lock while any dialog is open */
html:has(dialog[open]) { overflow: hidden; }

/* Keyframe animations (same as tailwind/components/animation.css) */
@keyframes slide-in-from-right { from { transform: translateX(100%); } }
@keyframes slide-out-to-right  { to   { transform: translateX(100%); } }

/* Base dialog positioning — mirror the Tailwind classes h-dvh max-h-dvh m-0 ml-auto
   used on the same element in the dashboard layout. Native <dialog> top-layer
   positioning is controlled by margin, not position:fixed. */
dialog.slideover {
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto; /* push to right edge */
  border: none;
  padding: 0;
}
dialog.slideover[open]    { animation: slide-in-from-right 200ms forwards ease-in-out; }
dialog.slideover[closing] { pointer-events: none; animation: slide-out-to-right 200ms forwards ease-in-out; }
dialog.slideover::backdrop { background: rgba(0,0,0,.5); }

/* Panel shell */
.slideover-panel {
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slideover-panel.w-xl { width: 36rem; max-width: 100%; }

/* Header */
.slideover-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  /* Clear the status bar / dynamic island when the slideover fills the screen on
     the edge-to-edge native explore layout (viewport-fit=cover). env() resolves to
     0 without cover (web + authed buying-browse), so the header keeps its 20px top
     there. */
  padding: calc(20px + env(safe-area-inset-top, 0px)) 24px 20px;
  border-bottom: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: #fff;
}
.slideover-title    { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.3px; color: var(--base-text, #171717); margin: 0; }
.slideover-subtitle { font-size: 13px; line-height: 18px; color: var(--base-text-tertiary, #737373); margin: 0 0 2px; }

.slideover-close-button {
  width: 32px; height: 32px;
  border-radius: 8px; border: none;
  background: transparent;
  color: var(--base-text-tertiary, #737373);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.slideover-close-button:hover { background: var(--base-bg-hover, #f5f5f5); color: var(--base-text, #171717); }

/* Scrollable body */
.slideover-body { flex: 1 1 auto; overflow-y: auto; padding: 24px; min-height: 0; }

/* Remove body padding when it contains a brokering stack */
.slideover-body:has(> .brokering-slideover-stack) { padding: 0; overflow: hidden; }

/* ── iOS native detail modal ──────────────────────────────────────
   The map detail PANEL rendered standalone (explore/panel.html.erb) and presented
   by iOS as a page-sheet modal. The sheet already insets the status bar + home
   indicator, so the panel just fills it. Web + Android are unaffected — they load
   the panel into the in-page slideover, not this standalone page. */
body.native-modal-page { margin: 0; min-height: 100dvh; background: #fff; }
.native-modal-page .explore-native-modal { height: 100dvh; }
.native-modal-page .slideover-panel { height: 100%; width: 100%; max-width: none; }
/* The page-sheet provides its own swipe dismiss, so hide the panel's in-page close
   button — its explore-map#closeDetail action is inert on this standalone page. */
.native-modal-page .slideover-close-button { display: none; }

/* ── iOS native filter sheet ──────────────────────────────────────
   /explore/filters rendered standalone (explore/filters.html.erb) and presented
   by iOS as a page-sheet modal (medium detent). Reuses the .xfs-row/.xfs-row__select/
   .xfs-apply styling but stacks the controls in normal flow at the top of the sheet
   — the detent gives the "half screen" height and iOS draws the grabber + "Filters"
   title bar. Submitting dismisses the sheet and filters the Browse tab behind it. */
.explore-filters-modal__form {
  display: flex;
  flex-direction: column;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.explore-filters-modal .xfs-rows { flex: 0 0 auto; }
.explore-filters-modal .xfs-apply { margin-top: 8px; }

/* Sticky footer */
.slideover-footer {
  flex-shrink: 0;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--base-border-tertiary, #e5e5e5);
  background: #fff;
}

/* Mint stack body (matches brokering-slideover-stack / brokering-slideover-section) */
.brokering-slideover-stack {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px 22px;
  background: #F1F7F5;
  flex: 1 1 auto; min-height: 100%; overflow-y: auto;
}
.brokering-slideover-section {
  background: #fff;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: 12px;
  padding: 16px 18px 18px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.03);
}
.brokering-slideover-section-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.brokering-slideover-section-head h3 { font-size: 14.5px; font-weight: 600; margin: 0 0 2px; color: var(--base-text, #171717); }
.brokering-slideover-section-head p  { font-size: 12.5px; color: var(--base-text-tertiary, #737373); margin: 0; line-height: 1.5; }
/* Inline feedback slot starts empty — drop it from the flex flow so it adds no gap */
.brokering-slideover-stack > #approve-match-feedback:empty { display: none; }

/* ── Toast notification ───────────────────────────────────────── */
.explore-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--base-text, #171717);
  color: white;
  padding: 12px 20px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
}

.explore-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Photo gallery (overview tab) ────────────────────────────── */
.explore-photos {
  padding: 0;
  overflow: hidden;
}

.explore-photos__track-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.explore-photos__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 16px 48px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.explore-photos__track::-webkit-scrollbar { display: none; }

.explore-photos__thumb {
  flex-shrink: 0;
  width: 200px;
  height: 140px;
  border: none;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--base-bg-secondary, #f5f5f5);
}

.explore-photos__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
  display: block;
}
.explore-photos__thumb:hover .explore-photos__thumb-img {
  transform: scale(1.04);
}

.explore-photos__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--base-border, #e5e5e5);
  background: var(--base-bg, #fff);
  color: var(--base-text, #171717);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: background 0.15s, box-shadow 0.15s;
}
.explore-photos__arrow:hover {
  background: var(--base-bg-secondary, #f5f5f5);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.explore-photos__arrow--left  { left: 8px; }
.explore-photos__arrow--right { right: 8px; }

.explore-photos__attribution {
  font-size: 11px;
  color: var(--base-text-tertiary, #737373);
  padding: 0 16px 12px;
  margin: 0;
}

.explore-photos__lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  z-index: 1000;
}
.explore-photos__lightbox::backdrop {
  background: rgba(0,0,0,.9);
}

.explore-photos__lightbox-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
  position: relative;
}

.explore-photos__lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.explore-photos__lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: rgba(255,255,255,.8);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.explore-photos__lb-close:hover { color: #fff; }

.explore-photos__lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.8);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.explore-photos__lb-arrow:hover { color: #fff; }
.explore-photos__lb-arrow--left  { left: 16px; }
.explore-photos__lb-arrow--right { right: 16px; }

.explore-photos__lb-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-size: 13px;
}

/* ── Location map ─────────────────────────────────────────────── */
.explore-detail-header { --detail-header-height: 260px; }

/* ── Footer logo fix ─────────────────────────────────────────────
   marketing/site.css uses brightness(0) invert(1) which creates a
   solid white rectangle when the logo PNG has an opaque white
   background. Using invert(1) + mix-blend-mode:screen instead:
   the inverted dark pixels become light (white logo shows),
   the inverted white background becomes black and "disappears"
   against the dark footer via screen blending.
   ──────────────────────────────────────────────────────────────── */
.site-foot__brand img {
  filter: invert(1) !important;
  mix-blend-mode: screen;
}

/* ════════════════════════════════════════════════════════════════
   MAP VIEW (?view=map)
   The redesigned map styles are shared with the broker browse map and
   live in app/assets/stylesheets/shared/browse_map.css (linked from the
   explore layout and the buying/browse head). Only the buyer-page-
   specific side-panel styles remain below.
   ════════════════════════════════════════════════════════════════ */

/* ── Map side-panel ───────────────────────────────────────────────── */
/* The panel's header/body/footer live inside a <turbo-frame> (lazy-loaded),
   so the frame — not those elements — is the flex child of .slideover-panel.
   Make the frame the column that fills the panel height, so the body scrolls
   and the footer sticks to the bottom (mirrors the non-framed slideovers). */
#explore_map_panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Loading skeleton */
.explore-map-panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  color: var(--base-text-tertiary, #737373);
  font-size: 13px;
}
.explore-spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--color-brand-green-75, #e8f6ee);
  border-top-color: var(--color-brand-green, #205e3a);
  border-radius: 50%;
  animation: explore-spin 720ms linear infinite;
}
@keyframes explore-spin { to { transform: rotate(360deg); } }

/* ── Map side-panel: header ───────────────────────────────────────── */
/* The header stacks (title → meta → price → multiple → badges) with the close
   button parked top-right, instead of the default title/close flex row. */
.explore-map-detail-header {
  display: block;
  position: relative;
  padding-right: 52px; /* clear the absolute close button */
}
.explore-map-detail-close { position: absolute; top: 16px; right: 16px; }
.explore-map-detail-header .slideover-title { line-height: 1.25; }
.explore-map-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--base-text-secondary, #525252);
}
.explore-map-detail-meta svg { color: var(--color-brand-green, #205e3a); flex-shrink: 0; }
.explore-map-detail-meta__sep { color: var(--base-border, #d4d4d4); }
.explore-map-detail-bigprice {
  margin: 12px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--color-brand-green-deep, #0c3e26);
}
.explore-map-detail-multiple {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--base-text-tertiary, #737373);
}
.explore-map-detail-header .explore-map-detail-badges { margin-top: 14px; }
.explore-badge--verified {
  background: var(--color-brand-green-75, #e8f6ee);
  border-color: color-mix(in oklab, var(--color-brand-green, #205e3a) 30%, transparent);
  color: var(--color-brand-green-deep, #0c3e26);
}

/* ── Map side-panel: content ──────────────────────────────────────── */
/* Anonymized thumbnail block (Browse Listings redesign) — soft gradient with
   concentric-circle art painted in CSS (no inline SVG in views). */
.explore-map-detail-thumb {
  position: relative;
  height: 140px;
  border-radius: 12px;
  border: 1px solid #dcebe3;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 24%, rgba(32, 94, 58, .12) 0 38px, transparent 39px),
    radial-gradient(circle at 82% 24%, transparent 0 64px, rgba(32, 94, 58, .18) 65px 66px, transparent 67px),
    linear-gradient(135deg, var(--color-brand-green-75, #e8f6ee), #f2faf5);
}
.explore-map-detail-thumb__chip {
  position: absolute;
  bottom: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .94);
  color: #2857a8;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.explore-map-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.explore-map-detail-section-label {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--base-text, #171717);
}
.explore-map-detail-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--base-text-secondary, #525252);
}
.explore-map-detail-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.explore-map-detail-highlight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--base-text, #171717);
}
.explore-map-detail-highlight__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--color-brand-green-75, #e8f6ee);
  color: var(--color-brand-green-deep, #0c3e26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.explore-map-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 14px;
  margin: 0;
}
.explore-map-detail-metric dt {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--base-text-tertiary, #737373);
}
.explore-map-detail-metric dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--base-text, #171717);
}
.explore-map-detail-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.explore-map-detail-note__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-brand-green-75, #e8f6ee);
  color: var(--color-brand-green-deep, #0c3e26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.explore-map-detail-note h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; color: var(--base-text, #171717); }
.explore-map-detail-note p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--base-text-tertiary, #737373); }

/* Footer: save heart pinned left, "Open listing page" on the right. */
.explore-map-detail-footer { justify-content: space-between; }
.explore-map-detail-save {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: 9px;
  background: #fff;
  color: var(--base-text-tertiary, #737373);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.explore-map-detail-save:hover { background: var(--base-bg-hover, #f5f5f5); border-color: #d4d4d4; }
.explore-map-detail-save .explore-card__save-icon { width: 18px; height: 18px; }
.explore-map-detail-save[data-saved="true"] .explore-card__save-icon { color: #dc2626; fill: #dc2626; }


/* ── Preferenced view (buyer browse) ──────────────────────────────
   The Matches tab folded into Browse. A segmented toggle flips
   "Preferenced" (prefs applied, best-match first) vs "All practices";
   a quick-filter chip row scopes to New / Saved / Passed; a divider
   separates broadened ("Partial match") results; each card grows a
   Pass/Restore control. Scoped to .explore-* so broker views are
   untouched. */

/* Three peer tabs — Marketplace / Matches / Saved — replacing the old 2-way
   Preferenced/All toggle. Individual pill buttons (not a segmented track) so
   all three read as equal peers; always rendered regardless of account state. */
.explore-browse-tabs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
/* Exact hexes, never --color-brand-green — explore.css redefines that token
   to near-black for marketing buttons. */
.explore-browse-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid rgba(20,55,42,.14);
  background: #fff;
  color: #3f4a45;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s, box-shadow .12s, color .12s, border-color .12s;
}
.explore-browse-tab svg { width: 17px; height: 17px; flex: none; }
.explore-browse-tab:hover { box-shadow: 0 2px 8px rgba(20,55,42,.1); }
.explore-browse-tab.is-active {
  background: #205e3a;
  border-color: #205e3a;
  color: #fff;
}
.explore-browse-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  background: #dcefe4;
  color: #1b6b43;
  font-size: 10.5px;
  font-weight: 700;
}
.explore-browse-tab.is-active .explore-browse-tab__badge { background: rgba(255,255,255,.22); color: #fff; }
.explore-browse-tab__badge--neutral { min-width: 20px; padding: 0 6px; font-size: 11px; background: #eef1ef; color: #4b5a53; }
.explore-browse-tab.is-active .explore-browse-tab__badge--neutral { background: rgba(255,255,255,.24); color: #fff; }

/* Matches tab — preferences summary bar (hint + Edit link). */
.explore-pref-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
  padding: 10px 15px;
  border-radius: 12px;
  background: #e7f3ee;
  border: 1px solid rgba(32,94,58,.2);
}
.explore-pref-bar__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #3f5248;
}
.explore-pref-bar__hint strong { font-size: 12.5px; font-weight: 700; color: #12402a; }
.explore-pref-bar__hint svg { flex: 0 0 auto; width: 17px; height: 17px; color: #205e3a; }
.explore-pref-bar__edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #1b4d3a;
  text-decoration: none;
  white-space: nowrap;
}

/* Matches tab — "New since last visit" filter pill. */
.explore-new-pill-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.explore-new-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 99px;
  border: 1px solid #bfe3cf;
  background: #dcefe4;
  color: #166a41;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.explore-new-pill svg { width: 15px; height: 15px; flex: none; }
.explore-new-pill.is-active {
  border-color: #205e3a;
  background: #205e3a;
  color: #fff;
}
.explore-new-pill-row__all {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #6f7a74;
  text-decoration: none;
}

/* Marketplace tab, returning buyer — thin cross-link to Matches. */
.explore-cross-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #eef4f1;
  border: 1px solid rgba(20,55,42,.1);
  font-size: 12.5px;
  color: #4a5a52;
  flex-wrap: wrap;
}
.explore-cross-link svg { flex: 0 0 auto; color: #2f7b5a; }
.explore-cross-link__link { font-weight: 700; color: #1b4d3a; text-decoration: none; }

/* Marketplace tab, new buyer — dismissible nudge toward setting preferences. */
.explore-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 15px;
  border-radius: 12px;
  background: #e7f3ee;
  border: 1px solid rgba(32,94,58,.22);
}
.explore-nudge svg { flex: 0 0 auto; color: #205e3a; }
.explore-nudge__body { min-width: 0; }
.explore-nudge__title { font-size: 13.5px; font-weight: 700; color: #12402a; }
.explore-nudge__text { font-size: 12.5px; color: #3f5248; }
.explore-nudge__cta { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.explore-nudge__dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #5a6b62;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.explore-nudge__dismiss:hover { background: rgba(20,55,42,.08); }

/* Matches tab, new buyer — full-panel invite over the fallback marketplace grid. */
.explore-first-run {
  margin-bottom: 16px;
  padding: 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f6ee, #f2faf5);
  border: 1px solid rgba(32,94,58,.2);
  text-align: center;
}
.explore-first-run__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #205e3a;
  color: #fff;
  margin-bottom: 12px;
}
.explore-first-run__title { font-size: 18px; font-weight: 800; color: #12402a; letter-spacing: -.01em; }
.explore-first-run__text { margin: 6px auto 16px; max-width: 440px; font-size: 13.5px; line-height: 1.55; color: #3f5248; }
.explore-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9aa4a0;
}
.explore-section-divider::after { content: ""; flex: 1; height: 1px; background: rgba(20,55,42,.12); }

/* Saved tab header. */
.explore-saved-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.explore-saved-header svg { width: 17px; height: 17px; color: #dc2626; }
.explore-saved-header__title { font-size: 14px; font-weight: 700; color: #12241c; }
.explore-saved-header__hint { font-size: 12px; color: #8a938e; }

/* Partial-match notice — shown (grid + map) when exact preferences were thin
   and we fell back to closest-by-location-and-budget matches. */
.explore-partial-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-amber-50, #fffbeb);
  border: 1px solid var(--color-amber-200, #fde68a);
  color: var(--color-amber-800, #92400e);
  font-size: 13px;
  line-height: 1.4;
}
.explore-partial-note svg { flex: 0 0 auto; }

@media (max-width: 600px) {
  .explore-pref-bar { flex-direction: column; align-items: stretch; }
  .explore-browse-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .explore-nudge { flex-wrap: wrap; }
  .explore-nudge__cta { margin-left: 0; }
}

/* ── Browse header with centered stat cards ───────────────────────
   Title (left) · marketplace stat cards (center) · tab row (right). Uses a
   3-zone grid on wide screens; on narrower screens the stats drop to their
   own full-width row below the title/tabs. Scoped to .explore-browse-header
   so other buying dashboard headers are unaffected (they keep the shared
   .buying-page-header flex layout). */
.buying-page-header.explore-browse-header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "tabs"
    "stats";
  align-items: start;
  justify-items: start;
  gap: 14px 16px;
}
.explore-browse-header__title { grid-area: title; }
.explore-browse-header .explore-browse-tabs { grid-area: tabs; }
.explore-header-stats {
  grid-area: stats;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.explore-header-stat {
  flex: 1 1 0;          /* fill the row evenly when stacked below */
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid var(--buying-line, #e5e5e5);
  border-radius: 10px;
  background: var(--buying-panel, #fff);
}
.explore-header-stat__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--base-text-tertiary, #737373);
  white-space: nowrap;
}
.explore-header-stat__value {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--base-text, #171717);
  white-space: nowrap;
}
.explore-header-stat__value--muted { color: var(--base-text-tertiary, #a3a3a3); }

/* Tabs stay on their own row below the title at every width (Browse Nav
   redesign) — no wide-screen re-arrangement. */

/* Header type scale — exact prototype values, scoped to the browse header so
   other buying pages keep the shared header styles. */
.explore-browse-header .buying-page-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #1b4d3a;
  margin: 0 0 3px;
}
.explore-browse-header__title h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #12241c;
}
.explore-browse-header__title > p:last-child {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #6f7a74;
}