/* Stampede Realty MLS — v2 overhaul layer.
   Loads AFTER listings.css and OVERRIDES the busy v1 chrome: compact brand
   hero, one sticky command bar, 7 chips, split-view map. All selectors are
   scoped to the new sr2-* structure or neutralize retired v1 blocks. */

/* ── compact brand hero ─────────────────────────────────────────────── */
.sr2-hero { padding: clamp(92px, 15vw, 112px) 0 clamp(10px, 1.6vw, 16px); }
.sr2-hero-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sr2-hero-brand img { flex-shrink: 0; }
.sr2-hero-brandtext { min-width: 0; }
.sr2-hero-name { font-family: var(--font-serif); font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 700; color: var(--text-bright); line-height: 1.05; }
/* Only the connective shrinks — "Stampede Realty" and "KO Realty" stay at the
   same size/weight/colour so the brokerage is never the smaller of the two. */
.sr2-h1-by { font-size: 0.56em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #d4af37; }
/* Bright gold is a fill/border colour; as TEXT on the light canvas it is 1.96:1.
   #6d5011 is the site's AA-safe gold ink (>=4.9:1). Dark theme keeps the bright
   gold, which already clears AA on a dark surface. */
[data-theme="light"] .sr2-h1-by { color: #6d5011; }
.sr2-hero-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.sr2-hero-sub b { color: var(--gold); }
.sr2-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; margin-right: 6px; vertical-align: middle; animation: mlsPulse 2.4s infinite; }
.sr2-hero-trust { margin-left: auto; font-size: 0.72rem; color: var(--text-dim); text-align: right; }
@media (max-width: 720px) { .sr2-hero-trust { display: none; } }

/* ── command bar (sticky) ───────────────────────────────────────────── */
.sr2-bar {
  position: sticky; top: 74px; z-index: 60;
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
}
.sr2-search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 10px; padding: 4px 6px 4px 12px; transition: border-color .15s; }
.sr2-search:focus-within { border-color: var(--gold-fill, #d4af37); }
.sr2-search-ico { color: var(--text-dim); flex-shrink: 0; }
.sr2-search .ai-search-lang { border: none; background: transparent; color: var(--text-dim); font-size: 0.78rem; font-family: inherit; max-width: 92px; padding: 6px 2px; }
.sr2-search input#aiSearchInput { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text-bright); font-size: 0.95rem; font-family: inherit; padding: 10px 4px; }
.sr2-search input#aiSearchInput::placeholder { color: var(--text-dim); }
/* `flex: 0 0 auto`, not just flex-shrink. listings.css has an UNSCOPED mobile
   rule `#aiSearchBtn { flex: 1 1 100% }` — written for the old wrapping
   .ai-search-row, where a 100% basis put the button on its own line. The v2
   row is nowrap, so that basis made the button demand the full container
   width, collapse the input to zero, and push the whole bar past the right
   edge of the screen. That was the horizontal page scroll on phones. Setting
   only flex-shrink made it worse: it locked the button at that 100% basis. */
.sr2-search #aiSearchBtn { flex: 0 0 auto; border: none; border-radius: 8px; background: var(--gold-fill, #d4af37); color: #141414; font-weight: 700; font-size: 0.86rem; font-family: inherit; padding: 9px 18px; cursor: pointer; }
.sr2-search #aiSearchBtn:hover { filter: brightness(1.06); }
.sr2-bar .ai-search-status { margin: 8px 2px 0; }

.sr2-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.sr2-controls::-webkit-scrollbar { display: none; }
.sr2-controls select,
.sr2-controls .fbar-all,
.sr2-iconbtn {
  flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px;
  color: var(--text-mid); font-size: 0.84rem; font-family: inherit; font-weight: 600;
  padding: 9px 14px; cursor: pointer; line-height: 1.2;
  transition: border-color .15s, color .15s;
}
.sr2-controls select { padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; max-width: 168px; text-overflow: ellipsis; }
.sr2-controls select:hover, .sr2-controls .fbar-all:hover, .sr2-iconbtn:hover { border-color: var(--gold-fill, #d4af37); color: var(--gold); }
.sr2-controls select:focus-visible, .sr2-controls .fbar-all:focus-visible, .sr2-iconbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sr2-controls .fbar-all { display: inline-flex; align-items: center; gap: 7px; }
.sr2-controls-spacer { flex: 1 1 auto; min-width: 4px; }
#mlsFilterSort { max-width: 190px; }
.sr2-iconbtn { padding: 9px 13px; }
.sr2-mapbtn { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.4); color: var(--gold); }

/* ── chips: quiet, premium, one row ─────────────────────────────────── */
.qs-strip-wrap--v2 { margin: 0 0 6px; }
.qs-strip-wrap--v2 .qs-strip { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 8px; }
.qs-strip-wrap--v2 .qs-strip::-webkit-scrollbar { display: none; }
.qs-strip-wrap--v2 .qs-chip {
  flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 99px;
  color: var(--text-muted); font-size: 0.8rem; font-weight: 600; font-family: inherit;
  padding: 7px 14px; cursor: pointer; transition: all .15s;
}
.qs-strip-wrap--v2 .qs-chip:hover { border-color: rgba(212,175,55,0.5); color: var(--gold); }
.qs-strip-wrap--v2 .qs-chip.active { background: rgba(212,175,55,0.12); border-color: var(--gold-fill,#d4af37); color: var(--gold); }
.qs-strip-wrap--v2 .qs-chip--clear { border-style: dashed; }
.qs-strip-wrap--v2 .qs-chip--more { color: var(--text-dim); }

/* ── split-view shell ───────────────────────────────────────────────── */
.sr2-shell { display: block; }
.sr2-shell-main { min-width: 0; }
@media (min-width: 1024px) {
  .sr2-shell.sr2-split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 42%, 640px); gap: 18px; align-items: start; }
  .sr2-shell.sr2-split #mlsMapWrap {
    display: block !important;
    position: sticky; top: 196px;   /* clears fixed header + sticky command bar */
    height: calc(100vh - 214px);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    margin: 0;
  }
  .sr2-shell.sr2-split #mlsMap { height: 100% !important; width: 100%; }
  /* denser cards beside the map */
  .sr2-shell.sr2-split .sr-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
/* mobile: map becomes a full-screen overlay above everything but its close btn */
@media (max-width: 1023.98px) {
  body.sr2-map-open #mlsMapWrap {
    display: block !important;
    /* Bottom inset clears the fixed mobile tab bar (z-index 1100) so the
       map's own controls and attribution are never trapped underneath it. */
    position: fixed; top: 0; left: 0; right: 0; bottom: 58px; z-index: 120;
    margin: 0; border: none; border-radius: 0;
  }
  body.sr2-map-open #mlsMap { height: 100% !important; width: 100%; }
  body.sr2-map-open { overflow: hidden; }
}
.sr2-map-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-bright);
  font-size: 1.1rem; cursor: pointer; display: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
@media (max-width: 1023.98px) { body.sr2-map-open .sr2-map-close { display: block; } }

/* map action buttons keep working inside both layouts */
#mlsMapWrap { position: relative; }
#mlsMap { min-height: 420px; }
.sr2-bar.sr2-stuck { border-radius: 0 0 14px 14px; box-shadow: 0 14px 34px rgba(0,0,0,0.28); }

/* ── slim result toolbar ────────────────────────────────────────────── */
.result-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.result-toolbar-actions button { background: transparent; border: 1px solid var(--border); border-radius: 99px; color: var(--text-muted); font-size: 0.78rem; font-family: inherit; font-weight: 600; padding: 6px 13px; cursor: pointer; }
.result-toolbar-actions button:hover { border-color: var(--gold-fill,#d4af37); color: var(--gold); }

/* ── retired v1 chrome, neutralized defensively ─────────────────────── */
.search-tabs, .alerts-bar, .moyyc-brand-bar, .ai-search-hints, .ai-search-eyebrow { display: none !important; }

/* persona tip: calmer card */
.persona-tip { border-radius: 12px; }

/* ── no horizontal page scroll, ever ─────────────────────────────────
   The bar and its scrollers are the only things wide enough to overflow.
   Each one clips itself so a stray wide child can't drag the whole page
   sideways; `clip` (not `hidden`) keeps position:sticky working on the bar. */
.sr2-bar, .sr2-search-row { max-width: 100%; overflow-x: clip; }
.sr2-search { min-width: 0; }
.qs-strip-wrap--v2, .qs-strip-wrap--v2 .qs-strip, .sr2-controls { max-width: 100%; }

/* mobile ergonomics */
@media (max-width: 640px) {
  /* No negative side margins: the bar used to be 12px wider than its column,
     which pushed its right edge past the viewport and added to the sideways
     scroll. Keep it inside the column instead. */
  .sr2-bar { padding: 10px; border-radius: 12px; margin-left: 0; margin-right: 0; }
  .sr2-search .ai-search-lang { display: none; }   /* language moves behind the input's own keyboard; keeps the row clean */
  /* iOS zooms any focused control under 16px — that applies to <select> too,
     not just text inputs, so both need the floor. */
  .sr2-search input#aiSearchInput,
  .sr2-controls select { font-size: 16px; }
  .sr2-controls { gap: 7px; }
  .sr2-controls select { max-width: 150px; padding: 10px 26px 10px 13px; }
  #mlsFilterSort { max-width: 140px; }
  /* 44px minimum touch targets on every interactive control in the new
     chrome (WCAG 2.5.5 / Apple HIG). */
  .sr2-controls select,
  .sr2-controls .fbar-all,
  .sr2-iconbtn { min-height: 44px; }
  .qs-strip-wrap--v2 .qs-chip { min-height: 40px; padding: 9px 15px; font-size: 0.83rem; }
  .result-toolbar-actions button { min-height: 40px; }
}

/* ── value signal chip (below community median) ─────────────────────── */
.sr-val { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; background: rgba(42,154,74,0.14); color: #4bbd6d; padding: 3px 9px; border-radius: 5px; margin: 4px 0 2px; }
/* Worst contrast on the page: #4bbd6d on its own translucent green tint measured
   1.57:1 in light theme — effectively unreadable, and this is the price delta on
   every result card. Darkening the ink rather than dropping the tint keeps the
   badge reading as a badge. */
/* The tint composites over .sr-card (--t-surface-2 #e5dfd4), NOT the page canvas —
   my first pass assumed the canvas and landed at 4.35:1, still under AA. Measured
   in the page rather than calculated: green tint over the card surface composites
   to a muddy olive. Dropping the tint for a lighter surface gives 5.35:1 and
   keeps the green ink, so the badge still reads as a positive value. */
[data-theme="light"] .sr-val { background: var(--t-surface-1); color: var(--t-ok); }
/* Was an inline style="color:#16a34a" in js/listings-app.js, which could not be
   themed: 3.08:1 on light, fine on dark. A class can be. */
.mls-feed-note { color: var(--t-ok); font-weight: 600; }

/* ── BUG FIX: the pill could never be dismissed ──────────────────────
   .sr-sticky-alert sets display:flex, which outranks the UA stylesheet's
   [hidden]{display:none}. So `pill.hidden = true` did nothing: the X was
   unclickable-by-effect and the pill also appeared before the scroll
   threshold it is supposed to wait for. Restore the attribute's meaning. */
.sr-sticky-alert[hidden] { display: none !important; }
.sr-sticky-alert-x { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* Anchor targets must clear the fixed header. */
#listings, .idx-section { scroll-margin-top: 88px; }

/* Mobile: bar sticks under a shorter header and above the tab bar. */
@media (max-width: 640px) {
  .sr2-bar { top: 66px; }
}

/* H1 carries the brand AND the ranking keyword; the keyword line is the
   visible sub-text so nothing is hidden from users or crawlers. */
h1.sr2-hero-name { margin: 0; }
.sr2-h1-kw { display: block; font-family: var(--font-sans, Inter, sans-serif); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); margin-top: 5px; text-transform: none; }

/* The hero H1 carries the trade name, the licensee and the brokerage, so on a
 * narrow phone it wraps to three lines. That is fine; what was not fine was the
 * break landing INSIDE the brokerage name ("KO" / "Realty"). Non-breaking
 * spaces in the markup keep each name whole, and a slightly smaller floor here
 * buys back a line without shrinking the brokerage relative to the trade name
 * (RECA prominence is about relative size, and this scales all of it equally). */
@media (max-width: 480px) {
  .sr2-hero-name { font-size: clamp(1.12rem, 4.4vw, 1.35rem); line-height: 1.2; }
}