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

/* ── Colour theme alignment ────────────────────────────────────────
   This block used to do the OPPOSITE of what it does now, and the reason it
   flipped is worth recording.

   It remapped the three brand-green tokens to near-black, scoped to
   body.explore-page, on the stated grounds that "the rest of the marketing site
   keeps the base neutral and uses green only as a sparing accent". That was true
   of the pre-v2 site, whose .btn-primary was --color-gray-950. It is not true of
   v2: the primary action is mint, and every other client-site surface now leads
   with it. Keeping the neutralisation would have left explore as the one
   near-black island in a mint site, and diverged it from /buying/browse, its
   authenticated twin, which the old comment itself noted already mirrors the mint
   workspace.

   So the remap is gone. explore now inherits --color-brand-green* from the token
   file's compatibility layer like every other surface, and --explore-accent (the
   headline highlight, focus rings, active tab underline, back link, hero pulse dot)
   points at the readable mint-700 rather than forest.
   ───────────────────────────────────────────────────────────────── */
.explore-page {
  --explore-accent: var(--brand-700);
}

/* ── 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: var(--text-base); font-weight: var(--fw-semibold); 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: var(--radius-input);
  font-size: var(--text-md);
  color: var(--base-text, #171717);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none;
}
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: var(--focus-ring);
}
.form-control::placeholder { color: var(--base-text-tertiary, #737373); }
.form-hint { font-size: var(--text-sm); 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: var(--radius-input);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  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: none;
}
/* 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: var(--focus-ring);
}

/* ── 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 ───────────────────────────────────────────────────────
   Rebuilt 2026-09-04 onto the Dental Acquisitions page system. The band, the
   type and the accent now come from .da-sec / .da-h1 / .da-body / .da-eyebrow in
   marketing/da_system.css, which the explore layout links; what is left here is
   only what the page system does not cover.

   WHAT WENT AND WHY --------------------------------------------------------
   - The green-to-mint vertical gradient. .da-sec paints --da-sec-bg (bone), and
     a gradient underneath it never showed anyway. The pre-rebrand look was the
     last of the mint ramp on this page.
   - .explore-hero__headline's own clamp(34px, 4.5vw, 46px). .da-h1 owns the
     display size across the marketing side, and a page-local clamp is how the
     two drift apart.
   - .explore-hero__headline-accent. .da-accent is the shared two-tone span.
   - .explore-hero__badge and its pulsing dot, plus @keyframes explore-pulse.
     Nothing has rendered them since the markup dropped the badge, and an
     always-on 2s pulse is not something to re-add on a page the user browses
     with Reduce Motion on.
   - .explore-hero__art. No markup emits it.

   .explore-hero stays on the section for two reasons: `.is-map-view
   .explore-hero { display: none }` further down this file drops the strip in
   PHONE map view (max-width 767 only, so desktop map view keeps it), and this
   page's own layout rules key off the class. */
.explore-hero { border-bottom: var(--border-hairline) solid var(--da-sec-hairline); }

.explore-hero__inner {
  display: grid;
  /* minmax(0, ...), never a bare fr: a bare fr floors at min-content, and the
     stat tiles carry nowrap figures that would set that floor. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: end;
  /* ONE rail for this page, and above 900px it is Browse's, not the nav's.
     .da-wrap pads on --nav-pad (38px), which lines the hero up with the wordmark
     but 26px inboard of the filter card and the map below it (--browse-gutter,
     40px from 900 to 1279 and 64px above). Measured: hero copy at x=38 against
     browse blocks at x=64 on a 1600px viewport. shared/browse_v5.css calls that
     single rail out in capitals; a hero stepping off it is the one thing on this
     page the eye reads as broken.

     --browse-gutter is only defined from 900px up (40px, then 64px at 1280), so
     below that the fallback carries this page's OWN .wrap gutters, stepped to the
     same widths .wrap uses at the top of this file: 32px, 24px under 768, 18px
     under 480. Measured before this: hero at 38 against browse blocks at 24 on a
     640px viewport and at 18 on a 390px one. */
  padding-inline: var(--browse-gutter, var(--explore-hero-rail, 32px));
}
@media (max-width: 768px) { .explore-hero__inner { --explore-hero-rail: 24px; } }
@media (max-width: 480px) { .explore-hero__inner { --explore-hero-rail: 18px; } }

.explore-hero__content { min-width: 0; }

/* This hero sits above a filter card rather than at the top of a reading page,
   so its H1 is a step down from the marketing pages' and the band is --tight. */
.explore-hero__headline { font-size: var(--da-h2); }

.explore-hero__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-6) 0 0;
  padding: 0;
}

.explore-trust-point {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-muted);
}

/* A tinted round chip, evenly rounded, no edge stripe. */
.explore-trust-point__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--da-sec-accent) 14%, transparent);
  color: var(--da-sec-accent);
}
.explore-trust-point__icon .ico { --ico: 14px; }

.explore-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}

/* A hairline box on a tint of the band's own ink, matching the tile treatment on
   /market-data and the home page. The pre-rebrand tile was a white card on
   --shadow-card, which floated off a band that has no elevation. */
.explore-hero__stat-tile {
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--da-sec-ink) 5%, transparent);
}

.explore-hero__stat-label {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-sec-accent);
}

.explore-hero__stat-value {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-brand);
  font-size: var(--da-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--da-sec-ink);
}


/* ── Hero responsive ────────────────────────────────────────────
   AFTER the base rules above, not next to __inner where these first went. A
   media query adds no specificity, so `.explore-hero__stats { repeat(2, ...) }`
   further up simply won on source order and the four-across step never
   applied. */
/* The single-column fallback, at the shared 899px step. Without it the 1.4fr /
   1fr split holds all the way down and the stats column keeps shrinking: at a
   390px viewport it measured 133px, giving each of the four tiles a 36px content
   box, so "Active listings" and "$551.1M" both overflowed their tile and the
   PAGE scrolled sideways by 17px. Nothing's bounding box crossed the viewport
   edge, which is why this needs scrollWidth-vs-clientWidth to catch rather than
   an element-extent sweep.

   Stats go four across once the copy is above them, because a full-width row of
   four reads as a strip rather than as a 2x2 block floating beside nothing. */
@media (max-width: 899px) {
  .explore-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .explore-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Back to 2x2 on phones: four tiles across a 339px content box is 78px each,
   and every label wraps to three lines. */
@media (max-width: 639px) {
  .explore-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 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: var(--text-xs);
  font-weight: var(--fw-semibold);
  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: var(--text-lg); }
  .explore-mbar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; border: 0; border-radius: var(--radius-input);
    background: var(--color-brand-green, #205e3a); color: #fff;
    font-size: var(--text-md); font-weight: var(--fw-semibold); 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: var(--radius-pill);
    background: #fff; color: var(--color-brand-green, #205e3a);
    font-size: var(--text-xs); font-weight: var(--fw-bold); 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: var(--shadow-sheet);
  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: var(--radius-pill);
  background: #e5e5e5; margin: 10px auto 4px;
}
.xfs-title {
  margin: 4px 4px 12px; font-size: var(--text-xl); font-weight: var(--fw-bold);
  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: var(--text-sm); font-weight: var(--fw-semibold);
  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: var(--radius-input);
  background: #fff; font-size: var(--text-lg); 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: var(--focus-ring);
}
.xfs-apply {
  flex: 0 0 auto; width: 100%; height: 48px; margin-top: 4px;
  border: 0; border-radius: var(--radius-input);
  background: var(--color-brand-green, #205e3a); color: #fff;
  font-size: var(--text-lg); font-weight: var(--fw-semibold); 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: var(--radius-tile);
  box-shadow: var(--shadow-menu);
}

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

.filter-ms-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
  border-radius: var(--radius-input);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  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: var(--text-2xs);
  font-weight: var(--fw-semibold);
  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: var(--radius-pill);
  background: var(--color-brand-green-75, #e8f6ee);
  border: 1px solid color-mix(in oklab, var(--color-brand-green, #205e3a), white 65%);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-brand-green-deep, #0c3e26);
}

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

.explore-active-filter__remove {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  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); color: var(--color-brand-green-deep, #0c3e26); }
.explore-active-filters__clear { font-size: var(--text-base); 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: var(--text-base); color: var(--base-text-tertiary, #737373); }
.explore-result-bar__count strong { color: var(--base-text, #171717); font-weight: var(--fw-bold); }

.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: var(--text-xs);
  font-weight: var(--fw-semibold);
  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: var(--radius-input);
  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: var(--text-sm);
  font-weight: var(--fw-semibold);
  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: var(--shadow-card);
  color: var(--base-text, #171717);
}

/* Same reason as the text-decoration reset above: these are <a> elements, so the
   global `a:hover { color: var(--brand-600) }` repaints the labels mint on hover
   unless each state restates its own colour. Both states are stated because the
   active tab's colour differs from the inactive one's. */
.explore-view-toggle__btn:hover { color: var(--base-text-secondary, #525252); }
.explore-view-toggle__btn.is-active:hover { 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. The band's own padding comes from .da-sec--tight now, so it is
     tightened here rather than on __inner, which no longer sets any. */
  .explore-hero { padding: var(--sp-8) 0; }
  .explore-hero__inner { gap: var(--sp-5); }
  .explore-hero__headline { font-size: var(--da-h3); }

  /* The body copy and the trust points are reassurance, dropped on phones to keep
     the hero to the essentials (headline + stats).

     `.explore-hero__content .da-body`, not `.explore-hero__subhead`: the subhead
     was replaced by the shared .da-body class in the 2026-09-04 rebuild, and the
     stale selector silently stopped hiding anything, so the paragraph came back
     on phones. Scoped to __content so it cannot reach the .da-body in the "get
     matched" card lower down the page. */
  .explore-hero__content .da-body { display: none; }
  .explore-hero__trust { display: none; }

  /* Really compact stat tiles (2x2) */
  .explore-hero__stats { gap: var(--sp-2); }
  .explore-hero__stat-tile { padding: var(--sp-3) var(--sp-3); }
  .explore-hero__stat-value { font-size: var(--e-card-title); margin-top: 4px; }

  /* 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: var(--text-xs);
  font-weight: var(--fw-semibold);
  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: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-card) var(--ease-out), transform var(--dur-card) var(--ease-out);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.explore-card:hover {
  box-shadow: var(--shadow-lift);
  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: var(--radius-pill);
  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: var(--shadow-card); }
.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: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-brand-green-deep, #0c3e26);
}

.explore-card__price-label {
  font-size: var(--text-xs);
  color: var(--color-brand-green-deep, #0c3e26);
  opacity: .7;
  font-weight: var(--fw-medium);
}

.explore-card__price-pending {
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  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: var(--text-sm);
  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: var(--text-lg);
  font-weight: var(--fw-semibold);
  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: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--base-text-tertiary, #737373);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.explore-card__stat-value {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  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: var(--radius-input);
  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: var(--shadow-card);
}
.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: var(--text-base); }
  .explore-card__title { margin-top: 8px; font-size: var(--text-lg); }
  .explore-card__price-label { font-size: var(--text-sm); }
  .explore-card__stat-label { font-size: var(--text-xs); }
  .explore-card__footer { font-size: var(--text-sm); }
  .explore-badge { font-size: var(--text-xs); }
}

/* ── Badges ───────────────────────────────────────────────────── */
.explore-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}

.explore-badge--type {
  background: white;
  color: var(--base-text-secondary, #404040);
}

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

.explore-badge--anon {
  background: color-mix(in oklab, var(--color-brand-green, #205E3A), white 88%);
  color: var(--color-brand-green-deep, #0c3e26);
  font-size: var(--text-2xs);
}

/* "New" — matches added since the buyer's last visit (Matches tab) */
.explore-badge--new {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.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: var(--status-success-bg);
  color: var(--status-success-text);
}

.explore-badge--specialty {
  background: #eff6ff;
  color: #1d4ed8;
}

.explore-badge--match-item {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.explore-badge--location {
  background: #fffbeb;
  color: #b45309;
}

.explore-badge--budget {
  background: #f0fdfa;
  color: #0f766e;
}

.explore-badge--granted {
  background: #f0f9ff;
  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: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  background: rgba(4, 120, 87, 0.12);
  color: #065f46;
  letter-spacing: 0.01em;
}

.explore-match-chip.is-full-match .explore-match-chip__trigger {
  background: #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: var(--radius-input);
  padding: 12px 14px 10px;
  box-shadow: var(--shadow-menu);
  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: var(--text-2xs);
  font-weight: var(--fw-bold);
  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: var(--text-sm);
  font-weight: var(--fw-medium);
  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: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.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: var(--text-md); }
  .explore-view-toggle__btn { font-size: var(--text-base); }
}

/* ── 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: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--base-text, #171717);
  margin: 0 0 4px;
}

.explore-empty-state__body {
  font-size: var(--text-base);
  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: var(--text-sm);
}
.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: var(--radius-input);
  background: #fff;
  color: var(--base-text-secondary, #525252);
  font-size: var(--text-base); font-weight: var(--fw-semibold); 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: var(--text-base);
}
@media (max-width: 600px) {
  .buying-grid-pagination { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Match CTA ────────────────────────────────────────────────── */
/* An ink band, not a mint one. Every other closing CTA on the client site (.data
   and .final-cta on the homepage, .page-cta on the section pages,
   .newsletter__card on /resources) is --surface-ink, and this was the last band
   still leading with the brand fill. It read as a different product's section.
   Note the gradient here was NOT forest green by the time it was replaced: the
   compatibility layer remaps --color-brand-green* onto the mint ramp, so it was
   rendering brand-700 -> brand-500. Ink is the fix either way. */
/* ── "Get matched" ──────────────────────────────────────────────
   Rebuilt 2026-09-04 onto the Dental Acquisitions page system. The markup
   carries .da-sec--ink, which is what supplies --da-sec-bg / --da-sec-ink /
   --da-sec-accent / --da-sec-hairline so .da-eyebrow, .da-h2, .da-body and
   .da-btn--light all paint correctly on the dark ground with no per-element
   colour here.

   A CARD, not a full-bleed band. It renders inside .wrap.explore-main, which is
   max-width plus a gutter, so negative margins could only reach the wrap's own
   edges and never the viewport's. Overriding the band's full-bleed padding into
   a rounded card is the honest treatment for the last block in a results
   container. That override is the whole reason the rules below exist.

   RETIRED: .explore-match-cta__headline's clamp(22px, 2.5vw, 28px) and its own
   eyebrow/body/headline colour rules against --text-on-ink*. .da-h2 and .da-body
   own the sizes, and .da-sec--ink owns the inks. Do not put a colour back here.
   .explore-match-cta__btn is gone too: .da-btn carries the height and padding,
   and .da-btn--light the fill. */
.explore-match-cta {
  margin-top: var(--sp-10);
  /* --sp-10 (40px), and NOT --sp-9: there is no --sp-9. The scale jumps 8 to 10
     (colors_and_type.css), so `padding: var(--sp-9) var(--sp-10)` was invalid at
     computed-value time, the WHOLE shorthand was dropped, and the vertical
     padding computed to zero. The eyebrow sat on the card's top edge and the
     "See how buying works" link on its bottom one, which reads as a styling
     choice rather than as a bug, which is why it shipped. */
  padding: var(--sp-10);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* Above 900px shared/browse_v5.css sets this card's padding-inline to
   --browse-gutter so it keeps the page's rail; below that the 40px above stands,
   which is too much of a 375px screen to give away. */
@media (max-width: 639px) {
  .explore-match-cta { padding: var(--sp-6); }
}

.explore-match-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

/* min-width is the wrap trigger: below it the action drops onto its own line
   rather than squeezing the copy into a column. */
.explore-match-cta__text { flex: 1 1 380px; min-width: 0; }
.explore-match-cta__text .da-body { margin-top: var(--sp-4); }

.explore-match-cta__secondary {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  color: var(--da-sec-muted);
}
.explore-match-cta__secondary a {
  color: var(--da-sec-accent);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.explore-match-cta__secondary a:hover { opacity: 0.72; }

/* .da-actions carries a top margin for a band; inside this row it is a flex
   item beside the copy, so the margin would push it off centre. */
.explore-match-cta__actions { margin-top: 0; flex: 0 0 auto; }

/* ── 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: var(--text-sm);
  color: var(--base-text-tertiary, #737373);
  margin-bottom: 10px;
}

.explore-detail-header__back {
  color: var(--explore-accent, #1f5e3a);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-pill);
  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);
  color: var(--explore-accent, #1f5e3a);
}
.explore-detail-header__sep { color: var(--color-gray-300, #d4d4d4); }
.explore-detail-header__crumb { color: var(--base-text-secondary, #404040); font-weight: var(--fw-medium); }

.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: var(--text-sm);
  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: var(--fw-bold);
  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: var(--text-sm);
  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: var(--fw-semibold);
}

.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: var(--text-2xs); font-weight: var(--fw-semibold); 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: var(--fw-bold); letter-spacing: -0.03em; color: var(--color-brand-green-deep, #0c3e26); line-height: 1; margin-top: 2px; }
.explore-detail-header__price-sub { font-size: var(--text-xs); 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: var(--text-sm);
  color: var(--base-text-tertiary, #737373);
  justify-content: flex-end;
}

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

.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: var(--text-base);
  font-weight: var(--fw-medium);
  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: var(--fw-semibold);
}

/* ── 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: var(--radius-input);
  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: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-brand-green-deep, #0c3e26);
  margin-bottom: 3px;
}
.explore-privacy-banner__text {
  font-size: var(--text-sm);
  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: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.explore-privacy-banner__pill--visible {
  background: color-mix(in oklab, var(--color-brand-green, #205E3A), white 80%);
  color: var(--color-brand-green-deep, #0c3e26);
}
.explore-privacy-banner__pill--hidden {
  background: var(--color-gray-100, #f5f5f5);
  color: var(--base-text-secondary, #404040);
}
.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;
  background: var(--brand-50) !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: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-brand-green-deep, #0c3e26);
  margin: 0 0 4px;
}
.explore-privacy-sidebar__body {
  font-size: var(--text-sm);
  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: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-brand-green-deep, #0c3e26);
}
.explore-privacy-sidebar__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  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: var(--text-lg); font-weight: var(--fw-bold); 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: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; }
.explore-detail-card__text { margin: 0; font-size: var(--text-md); 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: var(--radius-input); background: var(--surface-quiet); font-size: var(--text-sm); color: var(--base-text-secondary, #404040); line-height: 1.55; }

/* ── Section label ────────────────────────────────────────────── */
.explore-section-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  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); } }

/* Nested inside a card, so it takes the quiet fill rather than a border box,
   the same way .artifact__stat does. */
.explore-kpi-tile {
  padding: 14px 16px;
  border-radius: var(--radius-input);
  background: var(--surface-quiet);
}

.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: var(--text-xs);
  font-weight: var(--fw-semibold);
  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: var(--text-2xl);
  font-weight: var(--fw-bold);
  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: var(--text-xs);
  color: var(--base-text-tertiary, #737373);
  margin-top: 2px;
  font-weight: var(--fw-medium);
}

.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: var(--radius-input);
  background: var(--color-gray-50, #fafafa);
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
}

.explore-icon-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-input);
  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: var(--text-xs);
  color: var(--base-text-tertiary, #737373);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.explore-icon-stat__value {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  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: var(--text-base);
  line-height: 1.5;
}

.explore-highlight-item__icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  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: var(--radius-tile);
  box-shadow: var(--shadow-card);
  background: var(--surface);
}

.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: var(--radius-input);
  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: var(--radius-pill);
}

.explore-nda-card__icon--check { border-radius: var(--radius-pill); }

.explore-nda-card__title { font-size: var(--text-md); font-weight: var(--fw-semibold); 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: var(--text-sm); 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: var(--radius-pill);
  background: var(--color-gray-50, #fafafa);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  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: var(--radius-input);
  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: var(--text-base); font-weight: var(--fw-semibold); }
.explore-doc-row__size { font-size: var(--text-xs); 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: var(--radius-input);
  background: var(--color-gray-50, #fafafa);
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
}

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

.explore-kv-row__value { font-size: var(--text-base); font-weight: var(--fw-semibold); 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: var(--radius-input);
  background: var(--surface-quiet);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
}

.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: var(--fw-regular);
  color: var(--base-text-tertiary, #737373);
}
/* The view used to hardcode "&mdash; " before the condition. A dash is banned in
   copy, and the separator was never content anyway, so the component draws it,
   using the middot the rest of the site separates meta with. */
.explore-equipment-item__cond::before { content: "· "; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.explore-faq-accordion {
  background: var(--base-bg-card, #fff);
  border-color: var(--base-border-secondary, #d4d4d4) !important;
  box-shadow: var(--shadow-card);
}

.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: var(--text-md);
  font-weight: var(--fw-semibold);
  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: var(--radius-input);
  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: var(--radius-input);
  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: var(--text-base);
  color: var(--base-text-secondary, #404040);
  line-height: 1.6;
}

.explore-faq-item__answer-inner {
  /* Was a 2px mint accent stripe down the left edge. That is the banned
     coloured-left-accent pattern (CLAUDE.md, Styling Rules): the indent alone
     already reads the answer as subordinate to its question. */
  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: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-brand-green-deep, #0c3e26); }
.explore-ask-cta__body { margin: 0 0 14px; font-size: var(--text-base); color: var(--color-brand-green-deep, #0c3e26); opacity: .8; }

/* ── Sidebar cards ────────────────────────────────────────────── */
.explore-sidebar-card { padding: 18px 20px; }
.explore-sidebar-card__eyebrow { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--base-text-tertiary, #737373); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.explore-sidebar-card__body { font-size: var(--text-base); 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: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  margin-bottom: 8px;
}

.explore-seller-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  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: var(--shadow-modal);
  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: var(--radius-pill);
  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: var(--radius-tile);
  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: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: 0 0 6px; color: var(--base-text, #171717); }
.explore-gate-modal__subtitle { font-size: var(--text-md); 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: var(--text-base); 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: var(--text-xl); line-height: 24px; font-weight: var(--fw-bold); letter-spacing: -.3px; color: var(--base-text, #171717); margin: 0; }
.slideover-subtitle { font-size: var(--text-base); line-height: 18px; color: var(--base-text-tertiary, #737373); margin: 0 0 2px; }

.slideover-close-button {
  width: 32px; height: 32px;
  border-radius: var(--radius-input); 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;
}

/* Stack body (matches brokering-slideover-stack / brokering-slideover-section).
   🚨 THIS COPY HAS TO TRACK THE APP'S (de-minted together, 2026-09-11). This sheet is
   UNLAYERED and loads AFTER the tailwind build on /buying/browse, and Turbo never unloads a
   stylesheet once loaded -- so a stale `#F1F7F5` here does not just leave the browse drawer
   mint, it leaks back onto every broker and seller slideover for the rest of the Turbo
   session, defeating the app bundle at any specificity. `transparent` matches the app copy:
   the host `.slideover-panel` right above already paints `#fff` here. */
.brokering-slideover-stack {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px 22px;
  background: transparent;
  flex: 1 1 auto; min-height: 100%; overflow-y: auto;
}
/* 🚨 STAYS HAIRLINE-AND-FLAT, and does NOT copy the app's borderless+shadow card (2026-09-11).
   Two reasons, both measured:

   1. This sheet also serves the PUBLIC explore page, which loads no Tailwind bundle, so
      `--brk-shadow-card` does not exist there. Borderless + an unresolvable shadow is an
      invisible rectangle. The hairline is the only edge this page can rely on, and flat is
      the marketing language anyway ("cards are a hairline on a tint, never a shadow").
   2. `--shadow-card` would not have worked either: it comes from marketing/colors_and_type.css,
      which /buying/browse does NOT load (that page links only this sheet + browse_map), and
      the one declaration in this file is scoped to `.is-market-detail`.

   The BUYER dashboard's copy of this card is corrected in shared/browse_map.css instead --
   loaded after this sheet on browse pages, shell-scoped, where --brk-shadow-card does resolve.
   That split is deliberate: this sheet is unlayered and Turbo never unloads it, so anything
   written here leaks onto every page visited afterwards. */
.brokering-slideover-section {
  background: #fff;
  border: 1px solid var(--base-border-tertiary, #e5e5e5);
  border-radius: var(--radius-input);
  padding: 16px 18px 18px;
}
.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: var(--text-md); font-weight: var(--fw-semibold); margin: 0 0 2px; color: var(--base-text, #171717); }
.brokering-slideover-section-head p  { font-size: var(--text-sm); 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: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-menu);
  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: var(--radius-input);
  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: var(--shadow-card);
  transition: background 0.15s, box-shadow 0.15s;
}
.explore-photos__arrow:hover {
  background: var(--base-bg-secondary, #f5f5f5);
  box-shadow: var(--shadow-card);
}
.explore-photos__arrow--left  { left: 8px; }
.explore-photos__arrow--right { right: 8px; }

.explore-photos__attribution {
  font-size: var(--text-xs);
  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: var(--radius-input);
}

.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: var(--text-base);
}

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

/* ════════════════════════════════════════════════════════════════
   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: var(--text-base);
}
.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: var(--text-sm);
  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: var(--text-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--color-brand-green-deep, #0c3e26);
}
.explore-map-detail-multiple {
  margin: 5px 0 0;
  font-size: var(--text-sm);
  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);
  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: var(--radius-input);
  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: var(--radius-pill);
  background: rgba(255, 255, 255, .94);
  color: #2857a8;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  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: var(--text-md);
  font-weight: var(--fw-bold);
  letter-spacing: -.2px;
  color: var(--base-text, #171717);
}
.explore-map-detail-summary {
  margin: 0;
  font-size: var(--text-base);
  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: var(--text-base);
  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: var(--radius-pill);
  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: var(--text-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--base-text-tertiary, #737373);
}
.explore-map-detail-metric dd {
  margin: 2px 0 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  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: var(--radius-input);
  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: var(--text-base); font-weight: var(--fw-semibold); margin: 0 0 2px; color: var(--base-text, #171717); }
.explore-map-detail-note p { margin: 0; font-size: var(--text-sm); 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: var(--radius-input);
  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: var(--text-base);
  font-weight: var(--fw-semibold);
  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: var(--shadow-card); color: #3f4a45; }
.explore-browse-tab.is-active:hover { color: #fff; }
.explore-browse-tab.is-active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.explore-browse-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--status-success-bg);
  color: var(--status-success-text);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}
.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: var(--text-xs); 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: var(--radius-input);
  background: var(--brand-50);
  border: 1px solid rgba(32,94,58,.2);
}
.explore-pref-bar__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: #3f5248;
}
.explore-pref-bar__hint strong { font-size: var(--text-sm); font-weight: var(--fw-bold); color: #12402a; }
.explore-pref-bar__hint svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--brand-500); }
.explore-pref-bar__edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-700);
  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: var(--radius-pill);
  background: var(--status-success-bg);
  color: var(--status-success-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
}
/* Hover colour stated because these render on <a>: the global
   `a:hover { color: var(--brand-600) }` in colors_and_type.css outspecifies a single
   class, so without it the label/icon turns mint on hover. */
.explore-new-pill:hover { color: var(--status-success-text); }
.explore-new-pill svg { width: 15px; height: 15px; flex: none; }
.explore-new-pill.is-active {
  background: var(--brand-500);
  color: #fff;
}
.explore-new-pill-row__all {
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: #6f7a74;
  text-decoration: none;
}
/* Hover colour stated because these render on <a>: the global
   `a:hover { color: var(--brand-600) }` in colors_and_type.css outspecifies a single
   class, so without it the label/icon turns mint on hover. */
.explore-new-pill-row__all:hover { color: #6f7a74; }

/* 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: var(--radius-input);
  background: #eef4f1;
  border: 1px solid rgba(20,55,42,.1);
  font-size: var(--text-sm);
  color: #4a5a52;
  flex-wrap: wrap;
}
.explore-cross-link svg { flex: 0 0 auto; color: #2f7b5a; }
.explore-cross-link__link { font-weight: var(--fw-bold); color: var(--brand-700); 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: var(--radius-input);
  background: var(--brand-50);
  border: 1px solid rgba(32,94,58,.22);
}
.explore-nudge svg { flex: 0 0 auto; color: var(--brand-500); }
.explore-nudge__body { min-width: 0; }
.explore-nudge__title { font-size: var(--text-base); font-weight: var(--fw-bold); color: #12402a; }
.explore-nudge__text { font-size: var(--text-sm); 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: var(--radius-input);
  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: var(--radius-tile);
  background: linear-gradient(135deg, var(--brand-50), var(--surface));
  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: var(--radius-input);
  background: var(--brand-500);
  color: #fff;
  margin-bottom: 12px;
}
.explore-first-run__title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: #12402a; letter-spacing: -.01em; }
.explore-first-run__text { margin: 6px auto 16px; max-width: 440px; font-size: var(--text-base); line-height: 1.55; color: #3f5248; }
.explore-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  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: var(--text-md); font-weight: var(--fw-bold); color: #12241c; }
.explore-saved-header__hint { font-size: var(--text-sm); 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: var(--radius-input);
  background: var(--status-warning-bg);
  color: var(--color-amber-800, #92400e);
  font-size: var(--text-base);
  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: var(--radius-input);
  background: var(--buying-panel, #fff);
}
.explore-header-stat__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--base-text-tertiary, #737373);
  white-space: nowrap;
}
.explore-header-stat__value {
  margin-top: 2px;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  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: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 3px;
}
.explore-browse-header__title h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  color: #12241c;
}
.explore-browse-header__title > p:last-child {
  margin: 4px 0 0;
  font-size: var(--text-base);
  color: #6f7a74;
}

/* ══════════════════════════════════════════════════════════════════════════
   MARKETPLACE DETAIL — the Dental Acquisitions re-skin of /explore/:id
   --------------------------------------------------------------------------
   Added 2026-09-04. Scoped to .is-market-detail, which explore/show.html.erb
   sets only on the PUBLIC marketplace rendering. The buyer dashboard's browse
   and the seller "Preview as buyer" set .is-buying-browse instead and render
   under layouts that do not load colors_and_type.css, so --da-* does not exist
   there. Read the comment at the top of that view before widening this scope.

   HOW THIS WORKS, AND WHY IT IS SHORT ---------------------------------------
   The detail page's mint-and-Inter look is not spread across a hundred rules.
   It flows through a handful of LEGACY TOKENS that every rule above already
   reads, so remapping those tokens on the scope root repaints the whole page
   in one place. Measured before this: the H1 was Figtree 26px on rgb(34,34,34),
   the active tab was rgb(10,110,92), and the primary button was a 999px pill on
   rgb(14,161,132). None of that is in the brand.

   That is deliberately NOT a rewrite of the rules above. Those rules own the
   page's geometry, its sticky behaviour, its breakpoints and its dashboard
   variants, and all of that is working. This block owns its palette and its
   type, which is what "re-skin the chrome" means.

   Do NOT add geometry here. If a layout needs changing, change the rule that
   owns it and keep it working on all three surfaces.
   ══════════════════════════════════════════════════════════════════════════ */

.is-market-detail {
  /* ── Type. One declaration, because nothing in the rules above sets a
     font-family at all: the page was inheriting Inter/Figtree from the global
     body rule. Satoshi now inherits to every descendant instead. ── */
  font-family: var(--font-brand);

  /* ── Ink ── */
  --base-text:            var(--da-charcoal);
  --base-text-secondary:  var(--da-slate);
  --base-text-tertiary:   color-mix(in srgb, var(--da-charcoal) 62%, var(--da-bone));

  /* ── Grounds. The page ground is bone, cards are white, so a card reads as
     raised without a shadow, the same as the marketing bands. ── */
  --base-bg-base:         var(--da-bone);
  --base-bg:              var(--da-bone);
  --base-bg-secondary:    color-mix(in srgb, var(--da-charcoal) 4%, var(--da-bone));
  /* PAPER OVER BONE, SAND INSIDE IT. The panel is a hair LIGHTER than the page
     and the nested tile is a warm shade DARKER, which is the arrangement the
     owner supplied a reference for: quiet, editorial, and no white glare.

       page   --da-bone     #F7F5EF   warm, the marketing ground
       card   --da-paper    #FCFBF8   lifts off the page, contrast 1.05
       tile   --gray-100    #EBEBEB   the nested step, contrast 1.15 vs card

     GRAY-100, NOT GRAY-200. The owner asked for either; 200 (#DDDDDD) gives a
     stronger step (1.31) and drops the teal eyebrow on the tile to 4.03:1,
     under the 4.5 WCAG AA floor for small text. 100 reads 4.59:1 and passes.
     The eyebrow on a tile is the tightest pair on this page, so it is the
     constraint that picks the value.

     The page-to-card step is deliberately tiny. It is not carrying the
     separation on its own: the hairline and the radius do that, and the point of
     a near-bone panel is that it does NOT glare. The card-to-tile step is where
     the visible contrast sits, which is why the tile is the darker of the two
     rather than the lighter.

     FIVE passes to get here, and the four wrong ones are the useful record,
     because each looked reasonable and failed differently:

       1. white card, tint tile      too much white
       2. tint card, WHITE tile      moved the problem; the tiles glared instead
       3. transparent card, tint     no white left, but the card was invisible
       4. 11% grey card, bone tile   visible, and a cold grey against warm bone
       5. paper card, sand tile      warm sand nested step
       6. paper card, gray-100 tile  this, on request

     Pass 5's sand (#F1E9DA) was a warm nested step and read as editorial; the
     owner preferred a neutral grey for the tiles, which is what 6 is. --da-sand
     is kept as a token because it is a legitimate brand surface and the next
     nested panel may want it; nothing consumes it today. */
  --base-bg-card:         var(--da-paper);
  --surface:              var(--da-paper);
  --surface-quiet:        var(--gray-100);
  /* --base-bg-hover is a HARD BAN as a background (CLAUDE.md): in light mode it
     renders as a warm beige-grey that reads as "disabled", not "hovered". The
     rules above read it, so it is remapped rather than left to resolve. This is
     the one place on this page it can be neutralised centrally. */
  --base-bg-hover:        color-mix(in srgb, var(--da-charcoal) 4%, #FFFFFF);

  /* ── Hairlines ── */
  --base-border:           color-mix(in srgb, var(--da-charcoal) 20%, transparent);
  --base-border-secondary: color-mix(in srgb, var(--da-charcoal) 16%, transparent);
  --base-border-tertiary:  color-mix(in srgb, var(--da-charcoal) 12%, transparent);
  /* .explore-icon-stat's fill. The same value as --surface-quiet, so a figure
     tile and an icon-stat tile read as one kind of object. */
  --color-gray-50:         var(--gray-100);
  --color-gray-100:        color-mix(in srgb, var(--da-charcoal) 6%, var(--da-bone));
  --color-gray-200:        color-mix(in srgb, var(--da-charcoal) 12%, transparent);
  --color-gray-300:        color-mix(in srgb, var(--da-charcoal) 22%, transparent);

  /* ── The accent. This is the whole mint-to-teal swap: four tokens carry every
     green on the page, from the breadcrumb through the verified badge, the
     active tab, the privacy panels, the FAQ chevrons and the primary button.
     --color-brand-green-deep is used BOTH as an accent and as a heading ink on
     tinted panels, and deep teal is correct for both: it is what the marketing
     eyebrows use, and it holds 4.8:1 against white. ── */
  --explore-accent:            var(--da-deep-teal);
  --color-brand-green:         var(--da-deep-teal);
  --color-brand-green-deep:    var(--da-deep-teal);
  --color-brand-green-75:      color-mix(in srgb, var(--da-deep-teal) 12%, #FFFFFF);
  --brand-50:                  color-mix(in srgb, var(--da-deep-teal) 8%, #FFFFFF);
  --brand-500:                 var(--da-deep-teal);
  --brand-700:                 var(--da-deep-teal);

  /* ── Status. Kept semantic, but pulled onto the brand's own greens so a
     "verified" pill does not sit next to a teal one in a different green. ── */
  --status-success-bg:    color-mix(in srgb, var(--da-deep-teal) 10%, #FFFFFF);
  --status-success-text:  var(--da-deep-teal);

  /* ── Elevation. The marketing side is flat: cards are a hairline on a tint,
     never a shadow. The rules above apply --shadow-card to five components. ── */
  --shadow-card: none;

  background: var(--da-bone);
  color: var(--da-charcoal);
}

/* The page ground has to reach the viewport, not stop at the wrapper: the
   wrapper is only as tall as its content and the body below it is white. */
body.explore-page:has(.is-market-detail) { background: var(--da-bone); }

/* ── Header ─────────────────────────────────────────────────────────────────
   A bone band with a hairline, matching a .da-sec. It stays sticky. */
.is-market-detail .explore-detail-header {
  background: var(--da-bone);
  border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 12%, transparent);
}

/* Headings need font-family DECLARED, not inherited. site.css sets
   `h1, h2, h3 { font-family: var(--font-display) }` globally, which beats the
   root's inherited value however deep the scope is, so the title and every card
   heading stayed on Figtree while their own body text had already moved to
   Satoshi. Measured: h1 Figtree 31px inside a Satoshi page. */
.is-market-detail :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-brand); }

/* Type ROLES, not sizes: --da-h3 for the listing title and the price so both
   step off the same scale the marketing pages use. The rules above set a
   clamp() on each, which is a third scale nobody else on the site is on. */
.is-market-detail .explore-detail-header__title {
  font-size: var(--da-h3);
  letter-spacing: -0.025em;
}
.is-market-detail .explore-detail-header__price-value {
  font-size: var(--da-h3);
  letter-spacing: -0.025em;
  color: var(--da-charcoal);
}
/* The price LABEL becomes an eyebrow, which is how every figure on the
   marketing side is introduced. */
.is-market-detail .explore-detail-header__price-label {
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-deep-teal);
}

/* The active tab. Its indicator is the 2px underline the rules above already
   draw; this only puts it on the brand accent and gives the label the brand's
   weight step. */
.is-market-detail .explore-detail-header__tab { font-weight: var(--fw-medium); }
.is-market-detail .explore-detail-header__tab.is-active { font-weight: var(--fw-semibold); }

/* ── Actions ────────────────────────────────────────────────────────────────
   The CTA row's markup is shared with the dashboard through
   explore/_inquiry_action, so the classes stay .btn / .btn-primary and this
   matches them to .da-btn's proportions instead: the same height token, the
   same 
   corner, charcoal fill with a teal hover. A 999px pill is the one shape the
   rebranded buttons never use. */
.is-market-detail .explore-detail-header__cta-row .btn,
.is-market-detail .explore-save-btn {
  height: var(--da-btn-h);
  border-radius: var(--radius-sm);
  font-family: var(--font-brand);
  font-size: var(--e-nav-link);
  font-weight: var(--fw-semibold);
}
.is-market-detail .explore-detail-header__cta-row .btn-primary {
  background: var(--da-charcoal) !important;
  border-color: var(--da-charcoal) !important;
  color: #FFFFFF !important;
}
.is-market-detail .explore-detail-header__cta-row .btn-primary:hover {
  background: var(--da-deep-teal) !important;
  border-color: var(--da-deep-teal) !important;
}
/* The secondary actions. site.css's .btn base sets --action-quiet-bg and --text,
   neither of which is remapped above, so Save and Share kept a #222 label on a
   #f7f7f7 fill next to a charcoal primary. An outline, matching
   .da-btn--outline, so the row reads as one action plus two affordances.

   A border step for hover, never a fill: a fill has to know which surface it is
   on, and this row sits on bone here and on white in the sticky state. */
.is-market-detail .explore-detail-header__cta-row .btn:not(.btn-primary),
.is-market-detail .explore-save-btn {
  background: transparent;
  border: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 30%, transparent);
  color: var(--da-charcoal);
}
.is-market-detail .explore-detail-header__cta-row .btn:not(.btn-primary):hover,
.is-market-detail .explore-save-btn:hover {
  background: transparent;
  border-color: var(--da-deep-teal);
  color: var(--da-deep-teal);
}
/* Saved is a STATE, so it is a tint rather than another outline. */
.is-market-detail .explore-save-btn[data-saved="true"] {
  background: color-mix(in srgb, var(--da-deep-teal) 10%, #FFFFFF);
  border-color: color-mix(in srgb, var(--da-deep-teal) 45%, transparent);
  color: var(--da-deep-teal);
}

/* ── Cards ──────────────────────────────────────────────────────────────────
   White on a hairline, evenly rounded, no shadow. --shadow-card is remapped to
   none on the root, so this only supplies the border the shadow used to stand
   in for. */
.is-market-detail .explore-detail-card,
.is-market-detail .explore-sidebar-card,
.is-market-detail .card {
  border: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 12%, transparent);
}

/* A card heading is a card title, not a body line. */
.is-market-detail .explore-detail-card__title,
.is-market-detail .explore-detail-card__heading {
  font-size: var(--e-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--da-charcoal);
}

/* Section labels and card eyebrows are the same role as .da-eyebrow. */
.is-market-detail .explore-section-label,
.is-market-detail .explore-sidebar-card__eyebrow {
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-deep-teal);
}

/* ── Figures ────────────────────────────────────────────────────────────────
   The KPI tiles and icon stats are the same job as /market-data's .md-stat:
   an uppercase teal label over a large charcoal figure. */
.is-market-detail .explore-kpi-tile,
.is-market-detail .explore-icon-stat {
  border-color: color-mix(in srgb, var(--da-charcoal) 12%, transparent);
}
.is-market-detail .explore-kpi-tile__label,
.is-market-detail .explore-icon-stat__label {
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-deep-teal);
}
.is-market-detail .explore-kpi-tile__value,
.is-market-detail .explore-icon-stat__value {
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: var(--da-charcoal);
}
/* The accent tile stays SAND like the others and is marked out by a stronger
   hairline instead. A second hue among the tiles was the thing that made the
   reference read as quiet and the earlier passes read as busy; and a deeper sand
   would push the teal eyebrow under 4.5:1 (see --da-sand). */
.is-market-detail .explore-kpi-tile--accent {
  background: var(--gray-100);
  border-color: color-mix(in srgb, var(--da-amber) 45%, transparent);
}
.is-market-detail .explore-kpi-tile--accent .explore-kpi-tile__label { color: var(--da-deep-teal); opacity: 1; }
.is-market-detail .explore-kpi-tile--accent .explore-kpi-tile__value { color: var(--da-charcoal); }

/* ── Key/value rows ─────────────────────────────────────────────────────── */
.is-market-detail .explore-kv-row__label { color: var(--da-slate); }
.is-market-detail .explore-kv-row__value {
  font-weight: var(--fw-semibold);
  color: var(--da-charcoal);
}

/* ── The privacy panels ─────────────────────────────────────────────────────
   A teal tint with a hairline on ALL FOUR sides and an even radius. NOT an
   accent stripe down one edge, which is banned in this codebase (CLAUDE.md) and
   is what an "informational" block tends to attract. The tint alone already
   reads as a distinct region. */
.is-market-detail .explore-privacy-banner,
.is-market-detail .explore-privacy-sidebar,
.is-market-detail .explore-ask-cta {
  background: color-mix(in srgb, var(--da-deep-teal) 8%, #FFFFFF) !important;
  border: var(--border-hairline) solid color-mix(in srgb, var(--da-deep-teal) 28%, transparent) !important;
  border-radius: var(--radius-card);
}
.is-market-detail .explore-privacy-banner__title,
.is-market-detail .explore-privacy-sidebar__title,
.is-market-detail .explore-ask-cta__title {
  font-weight: var(--fw-bold);
  color: var(--da-deep-teal);
}
.is-market-detail .explore-privacy-banner__text,
.is-market-detail .explore-privacy-sidebar__body,
.is-market-detail .explore-ask-cta__body {
  color: var(--da-charcoal);
  opacity: 0.82;
}

/* ── FAQ ────────────────────────────────────────────────────────────────────
   The accordion here is a real disclosure with its own controller, unlike the
   home page's, which was replaced by always-open .da-row--qa. It keeps its
   behaviour and takes the brand's tint. */
.is-market-detail .explore-faq-item__question-text {
  font-weight: var(--fw-semibold);
  color: var(--da-charcoal);
}
.is-market-detail .explore-faq-item.is-open {
  background: color-mix(in srgb, var(--da-deep-teal) 6%, #FFFFFF);
}

/* ── Empty states ──────────────────────────────────────────────────────── */
.is-market-detail .explore-empty-state__title {
  font-weight: var(--fw-semibold);
  color: var(--da-charcoal);
}
.is-market-detail .explore-empty-state__body { color: var(--da-slate); }

/* ── Marketplace detail: buttons everywhere else on the page ────────────────
   site.css's `.btn { font-family: var(--font-sans) }` is DECLARED, so it beats
   the Satoshi the scope root sets by inheritance. The header row was handled
   above; this catches the rest, which is every button in the gate modals, the
   "Request full access" action in the privacy banner, and the FAQ's ask CTA.
   Measured: seven leaf elements still rendering Inter inside a Satoshi page. */
.is-market-detail .btn { font-family: var(--font-brand); }

/* ── Marketplace detail: the header at phone width ──────────────────────────
   .explore-detail-header__main is a nowrap flex row, so the title column and
   the price-plus-actions column stay side by side at every width and the pair
   overflows a phone. Measured at 390: the row's right edge at 404 against a
   375px viewport, and the PAGE scrolling 28.5px sideways.

   This is a pre-existing bug, not one the re-skin introduced: the same
   measurement without .is-market-detail gives 28.5px, and with it 26px, because
   the rebranded buttons are marginally narrower. It is fixed here because a
   previewable render delta on a page being redesigned has to be responsive, and
   left alone the redesign would ship with a sideways scroll.

   SCOPED, like everything else in this block. The buyer dashboard's browse and
   the seller "Preview as buyer" render the same markup and still have the
   overflow. Fixing those means editing a rule that is live on two dashboard
   surfaces, which is a separate change with its own verification, not something
   to fold into a marketing pass. Recorded in the design doc. */
@media (max-width: 639px) {
  .is-market-detail .explore-detail-header__main { flex-wrap: wrap; }
  .is-market-detail .explore-detail-header__right-col {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }
  /* The price stops being right-aligned once it is no longer in a right-hand
     column: it reads as a stray indent otherwise. */
  .is-market-detail .explore-detail-header__price-col { text-align: left; }
  .is-market-detail .explore-detail-header__cta-row {
    width: 100%;
    justify-content: flex-start;
  }
  /* Only the primary action grows. Letting all three flex stretches the Share
     icon button into a wide blank rectangle. */
  .is-market-detail .explore-detail-header__cta-row .btn-primary { flex: 1 1 auto; }
}

/* ── Marketplace detail: tile grids pack to their content ───────────────────
   .explore-kpi-grid is `repeat(4, 1fr)` and .explore-icon-stat-grid is
   `repeat(3, 1fr)`. A fixed track count is right when every listing fills it
   and wrong the rest of the time, which on this page is most of the time: a
   listing carrying one figure rendered ONE tile plus THREE empty tracks, so 590
   of an 872px card was blank. Measured on a real listing; the owner reported it
   as "too much white", and the white was mostly empty grid.

   FLEX, not `repeat(auto-fit, minmax(...))`. auto-fit was tried and it does not
   do what its name suggests here: it produced one 822px track plus three at
   0px, so the tile still needed a max-width and 542px of the row stayed empty.

   Flex with `flex: 0 1 280px` packs left and handles every count:
     1 tile   280px, left aligned
     2 tiles  280 + 280, left aligned
     4 tiles  4 x 280 exceeds the row, so they shrink to about 195 and fill it
   which is the same four-across it had before, without the empty tracks. */
.is-market-detail .explore-kpi-grid,
.is-market-detail .explore-icon-stat-grid {
  display: flex;
  flex-wrap: wrap;
}
.is-market-detail .explore-kpi-tile,
.is-market-detail .explore-icon-stat { flex: 0 1 280px; min-width: 160px; }

/* Every tile carries a hairline. With no white in the ladder the fill alone is
   a 5% step, which is enough to group a tile's contents but not enough to give
   it an edge; the border is what makes it an object rather than a tinted patch.
   Same treatment as .md-stat on /market-data. */
.is-market-detail .explore-kpi-tile,
.is-market-detail .explore-icon-stat {
  border: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 10%, transparent);
}

/* ── Marketplace detail: a card with one line of content ────────────────────
   "About this practice" is an eyebrow over a single heading, and at 872px wide
   a 24px pad leaves it looking like an empty card rather than a short one.
   Tightening the vertical padding when a card holds no grid is not something
   CSS can ask, so the padding is simply smaller for all of them: 20px reads as
   deliberate on a short card and is imperceptible on a full one. */
.is-market-detail .explore-detail-card { padding: 20px 24px; }
.is-market-detail .explore-detail-card__heading { margin-bottom: 0; }
.is-market-detail .explore-detail-card__heading:last-child { margin-bottom: 0; }

/* ── Marketplace results: the pager stays visible ───────────────────────────
   The pager sat at the very foot of a twelve-card grid, so a reader had to
   reach the bottom before discovering there were fifteen pages. It is pinned to
   the bottom of the viewport while the results are in view now, and releases
   before the "get matched" band.

   .explore-results is what scopes it. A sticky element is constrained by its
   CONTAINING BLOCK, and without the wrapper that block is .explore-main, whose
   bottom edge is below the closing CTA: the pager would have floated over that
   band for the rest of the page.

   Opt in via the partial's `sticky:` local, because shared/browse/_pager also
   renders on the broker and buyer dashboards, where a floating bar over their
   own chrome is a different decision.

   The background is OPAQUE and matches the page, because the cards scroll
   underneath it. The hairline is what separates it from them; without one the
   text appears to sit on the results. */
.is-market-detail .explore-results,
.browse-v5 .explore-results { position: relative; }

.browse-v5 .browse-pager--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--da-charcoal) 12%, transparent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--da-bone);
  /* A lift, so a card scrolling under the bar reads as behind it rather than
     clipped by it. The only shadow on this page, and it is doing work a
     hairline cannot: separating two things on the same plane. */
  box-shadow: 0 -8px 24px -16px color-mix(in srgb, var(--da-charcoal) 45%, transparent);
}

/* Room under the last row, so the bar is never covering a card the reader is
   trying to look at.

   --sp-22 (88px), NOT --sp-4. The comment here used to claim --sp-4 "matches the
   bar's own height plus its margin" and it does not come close: the bar measures
   61px (a 29px control row inside --sp-4 of padding top and bottom) and carries
   --sp-6 of margin-top, so there is 85px to clear and 16px was reserved. The last
   card row sat under the bar. 88px is the first step on the scale that clears it.

   The phone override below shrinks the BAR to about 55px, so this over-reserves
   by roughly 9px there. Extra whitespace under the last card is the harmless
   direction to be wrong in, and one value is easier to keep true than two. */
.browse-v5 .explore-results:has(.browse-pager--sticky) .explore-grid {
  padding-bottom: var(--sp-22);
}

@media (max-width: 639px) {
  /* It STAYS pinned on a phone, which is where not having to reach the bottom
     matters most. The bar just has to earn its space: .browse-pager wraps by
     default, and two rows plus the sticky padding measured 87px, or 11% of a
     390x800 screen.

     nowrap plus a smaller label puts it back on one row at 55px (7%), with the
     count intact: measured 129px of label against 159px of page circles inside
     a 339px container. Hiding the label would also have fitted and is worse,
     because "of 3,996" is the reason a reader cares that there are more pages.

     --e-micro, a real type role, not an arbitrary small size. */
  .browse-v5 .browse-pager--sticky {
    flex-wrap: nowrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .browse-v5 .browse-pager--sticky .browse-pager__label {
    font-size: var(--e-micro);
    min-width: 0;
  }
}