/* ==========================================================================
   search.css — screener extras (/properties), loaded after listings.css on .page-search:
   the size pill, the List / Map toggle and the results map (Leaflet, public/assets/js/map.js).
   Semantic tokens only. map.js injects Leaflet's own stylesheet before site.css, so these rules win over its
   defaults; selectors are scoped to .results-map wherever Leaflet's are more specific.
   New element classes: .filter-bar__panel--size, .filter-sheet__row--size, .view-toggle(__option, __icon), .results-body(__list),
   .results-map(__canvas, __key, __note, __anchors, __anchors-label, __anchor-chip, __marker, __anchor, __error),
   .map-card(__img, __body, __type, __price, __unit, __facts, __address, __link, __credit); [data-bp="1440"].
   ========================================================================== */

/* ---- Size pill: from 1440px the bar has room for it; below that it lives in the Filters sheet ---- */
@media (min-width:980px){ .filter-bar__pill[data-bp="1440"]{ display:none; } }
@media (min-width:1440px){ .filter-bar__pill[data-bp="1440"]{ display:block; } }
.filter-bar__panel--size{ min-width:min(380px, calc(100vw - 2 * var(--gutter))); }
.filter-bar__panel--size .field__hint{ margin-top:-4px; }
/* Spanish options carry m² / ha ("0.25 acres (1,012 m²)", about 160px of text): the pill widens to fit two selects
   side by side, and on phones the min / max selects stack instead of truncating the metric figure. */
.filter-bar__panel--size:lang(es){ min-width:min(480px, calc(100vw - 2 * var(--gutter))); }
@media (max-width:519px){ .filter-sheet__row--size:lang(es){ grid-template-columns:minmax(0,1fr); } }

/* ---- List / Map toggle (buttons with aria-pressed; shown by map.js) ---- */
.results-head__bar > .view-toggle{ margin-left:auto; }
/* Below 980 the count gets its own line and the sort select shrinks beside the toggle instead of wrapping under it. */
@media (max-width:979px){
  .results-head__bar:has(> .view-toggle:not([hidden])){ display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .results-head__bar:has(> .view-toggle:not([hidden])) > .results-head__meta{ grid-column:1 / -1; }
  .results-head__bar > .view-toggle{ grid-column:2; grid-row:2; margin-left:0; }
  .results-head__bar:has(> .view-toggle:not([hidden])) > .results-head__sort{ grid-column:1; grid-row:2; justify-self:start; }
}
/* Phones: the toggle takes a full row of two equal halves, and the sort select keeps room for its longest label. */
@media (max-width:559px){
  .results-head__bar:has(> .view-toggle:not([hidden])){ grid-template-columns:minmax(0,1fr); }
  .results-head__bar > .view-toggle{ grid-column:1; grid-row:2; }
  .results-head__bar:has(> .view-toggle:not([hidden])) > .results-head__sort{ grid-column:1; grid-row:3; justify-self:stretch; }
  .view-toggle__option{ flex:1 1 0; justify-content:center; height:var(--tap); }
}
.view-toggle{ display:inline-flex; flex:none; }
.view-toggle__option{
  position:relative; display:inline-flex; align-items:center; gap:6px; height:var(--control-h-sm); padding:0 14px; margin-left:-1px;
  border:1px solid var(--line-input); background:var(--surface); color:var(--text);
  font:500 var(--fs-sm)/1 var(--font-sans); white-space:nowrap; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease);
}
.view-toggle__option:first-child{ margin-left:0; padding-left:16px; border-radius:var(--radius-pill) 0 0 var(--radius-pill); }
.view-toggle__option:last-child{ padding-right:16px; border-radius:0 var(--radius-pill) var(--radius-pill) 0; }
.view-toggle__option:hover{ background:var(--surface-2); }
.view-toggle__option[aria-pressed="true"]{ z-index:1; background:var(--seg-on-bg); border-color:var(--seg-on-line); color:var(--seg-on-text); font-weight:600; }
.view-toggle__option:focus-visible{ z-index:2; }
.view-toggle__option:first-child:focus-visible{ border-radius:var(--radius-pill) 0 0 var(--radius-pill); }
.view-toggle__option:last-child:focus-visible{ border-radius:0 var(--radius-pill) var(--radius-pill) 0; }
.view-toggle__icon{ width:var(--icon-sm); height:var(--icon-sm); }

/* ---- Results body: the list (default) and, in map view, the map above it; side by side from 1200px ---- */
.results-body,.results-body__list{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); min-width:0; }
.results-map{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:12px; min-width:0; }
.results-map__canvas{
  position:relative; isolation:isolate; /* keeps Leaflet's z-indexed panes under the sticky header and filter bar */
  height:clamp(320px, 62vh, 560px); overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-2);
}
@media (min-width:1200px){
  .results-body[data-view="map"]{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
  .results-body[data-view="map"] > .results-body__list{ grid-column:1; grid-row:1; }
  .results-body[data-view="map"] > .results-map{
    grid-column:2; grid-row:1; grid-template-rows:minmax(0,1fr) auto;
    position:sticky; top:calc(var(--header-h) + var(--filterbar-h) + 16px);
    height:calc(100vh - var(--header-h) - var(--filterbar-h) - 32px);
    height:calc(100dvh - var(--header-h) - var(--filterbar-h) - 32px);
  }
  .results-body[data-view="map"] .results-map__canvas{ height:auto; min-height:360px; }
}
.results-map__key{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.results-map__note{ font-size:var(--fs-xs); line-height:1.5; color:var(--muted); }
.results-map__anchors{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.results-map__anchors-label{ font-size:var(--fs-xs); font-weight:600; color:var(--text-2); }
.results-map__anchor-chip{ background:var(--surface); cursor:pointer; }
.results-map__anchor-chip .icon{ width:var(--icon-sm); height:var(--icon-sm); color:var(--accent-strong); }
.results-map__anchor-chip:disabled{ opacity:.55; cursor:default; }
.results-map__error{ display:grid; place-items:center; height:100%; padding:24px; text-align:center; font-size:var(--fs-sm); color:var(--text-2); }

/* ---- Leaflet, in the site's type and tokens ---- */
.results-map .leaflet-container{ font:400 var(--fs-sm)/1.45 var(--font-sans); background:var(--surface-2); }
.results-map .leaflet-container:focus-visible{ box-shadow:none; outline:3px solid var(--focus); outline-offset:-3px; }
.results-map .leaflet-control-attribution{ font-size:var(--fs-micro); color:var(--text-2); }
.results-map .leaflet-control-attribution a{ color:var(--link); }
.results-map .leaflet-bar{ border:1px solid var(--line-strong); box-shadow:var(--shadow-1); }
.results-map .leaflet-bar a{ width:40px; height:40px; line-height:38px; font-size:20px; color:var(--text); background:var(--surface); }
.results-map .leaflet-bar a:hover{ background:var(--surface-2); color:var(--text); }

/* Listing pins: the .map-pin price pill (site.css) with a tip on the exact point; anchors are round icon pins. */
.results-map__marker{ background:none; border:0; }
.results-map__marker:focus-visible{ box-shadow:none; outline:0; }
.results-map__marker > .map-pin{ position:absolute; left:0; bottom:7px; transform:translateX(-50%); cursor:pointer; }
.results-map__marker > .map-pin::after{
  content:""; position:absolute; left:50%; top:100%; margin-left:-6px;
  border:6px solid transparent; border-top-color:var(--white); border-bottom:0;
}
.results-map__marker:hover > .map-pin,.results-map__marker > .map-pin.is-active{ background:var(--ink-900); color:var(--white); }
.results-map__marker:hover > .map-pin::after,.results-map__marker > .map-pin.is-active::after{ border-top-color:var(--ink-900); }
.results-map__marker:focus-visible > .map-pin{ box-shadow:var(--ring); }
.results-map__marker > .results-map__anchor{
  bottom:auto; top:0; justify-content:center; width:30px; height:30px; padding:0;
  border:2px solid var(--white); border-radius:50%; transform:translate(-50%,-50%);
}
.results-map__marker > .results-map__anchor::after{ content:none; }
.results-map__anchor .icon{ width:16px; height:16px; }
.results-map__marker:hover > .results-map__anchor{ background:var(--accent-hover); }

/* Popups: one compact card per pin (built by map.js with textContent). */
.results-map .leaflet-popup-content-wrapper{ padding:0; overflow:hidden; border-radius:var(--radius-md); background:var(--surface); color:var(--text); box-shadow:var(--shadow-3); }
.results-map .leaflet-popup-content{ margin:0; font-size:var(--fs-sm); line-height:1.45; }
.results-map .leaflet-popup-content p{ margin:0; }
.results-map .leaflet-popup-tip{ background:var(--surface); }
.results-map .leaflet-container a.leaflet-popup-close-button{
  top:6px; right:6px; width:32px; height:32px; border-radius:50%;
  background:var(--white); color:var(--ink-900); font:400 22px/32px var(--font-sans); box-shadow:var(--shadow-1);
}
.map-card{ display:grid; grid-template-columns:minmax(0,1fr); }
.map-card__img{ display:block; width:100%; height:120px; object-fit:cover; background:var(--surface-2); }
.map-card__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:12px 14px 14px; }
.map-card--anchor .map-card__body{ padding-right:44px; } /* clear the close button */
.map-card__type{ font:600 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--eyebrow); }
.map-card__price{ font:700 var(--fs-h4)/1.2 var(--font-sans); font-variant-numeric:tabular-nums; color:var(--text); }
.map-card__unit{ font-size:var(--fs-sm); font-weight:500; color:var(--muted); }
.map-card__facts{ color:var(--text-2); }
.map-card__address{ font-weight:600; color:var(--text); }
.results-map .map-card__link{ justify-self:start; min-height:var(--control-h-sm); margin-top:6px; padding:6px 16px; font-size:var(--fs-sm); }
.results-map .map-card__link,.results-map .map-card__link:hover{ color:var(--accent-ink); }
.results-map .map-card__more{ justify-self:start; font-weight:600; color:var(--link); }
.map-card__credit{ margin-top:4px; font-size:var(--fs-micro); line-height:1.4; color:var(--muted); }

@media print{
  .view-toggle,.results-map{ display:none !important; }
  .results-body{ display:block !important; }
}