/* ── Hero (compact lead-magnet variant) ──
       Top padding clears the fixed .site-header. This page uses a
       taller 52px Stampede Realty logo so the nav is ~80px tall;
       140px matches the .page-hero padding used sitewide and leaves
       comfortable breathing room for the eyebrow pill. Bottom padding
       stays tight so the hero is still ~half the original. */
    .listings-hero {
      background: linear-gradient(135deg, rgba(10,10,15,0.78) 0%, rgba(20,15,40,0.78) 100%),
                  url('/images/DowntownCalgary-800px.jpg') center/cover no-repeat;
      background: linear-gradient(135deg, rgba(10,10,15,0.78) 0%, rgba(20,15,40,0.78) 100%),
                  image-set(url('/images/DowntownCalgary-800px.avif') type('image/avif'),
                            url('/images/DowntownCalgary-800px.webp') type('image/webp'),
                            url('/images/DowntownCalgary-800px.jpg') type('image/jpeg')) center/cover no-repeat;
      padding: 140px 0 38px;
      text-align: center;
    }
    .listings-hero h1 {
      font-size: clamp(1.6rem, 3.2vw, 2.2rem);
      margin: 0 0 8px;
      color: #f5f0e6;
      line-height: 1.2;
    }
    .listings-hero .hero-sub {
      color: rgba(245,240,230,0.85);
      max-width: 540px;
      margin: 0 auto 18px;
      font-size: 1rem;
      line-height: 1.5;
    }
    /* Inline lead form — email input + CTA button. Horizontal on
       desktop (max 460px combined), full-width stack under 480px. */
    .hero-lead-form {
      display: flex;
      gap: 8px;
      max-width: 460px;
      margin: 0 auto;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(212,175,55,0.35);
      border-radius: 12px;
      padding: 6px;
      backdrop-filter: blur(4px);
    }
    .hero-lead-form input[type="email"] {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      color: #f5f0e6;
      padding: 11px 14px;
      font-size: 0.96rem;
      font-family: inherit;
    }
    .hero-lead-form input[type="email"]::placeholder { color: rgba(245,240,230,0.5); }
    .hero-lead-form input[type="email"]:focus { background: rgba(255,255,255,0.04); border-radius: 8px; }
    .hero-lead-form button {
      background: #d4af37;
      color: #0a0a0f;
      border: 0;
      border-radius: 8px;
      padding: 11px 18px;
      font-weight: 800;
      font-family: inherit;
      font-size: 0.92rem;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }
    .hero-lead-form button:hover { background: #e0c04b; }
    .hero-lead-form button:disabled { background: rgba(212,175,55,0.5); cursor: wait; }
    .hero-lead-status {
      min-height: 1.2em;
      font-size: 0.86rem;
      color: #d4af37;
      margin-top: 10px;
      line-height: 1.45;
      max-width: 460px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-lead-status.is-error { color: #ff8b6b; }
    /* Notification cadence picker — sits below the email row. Lets the
       lead pick how often they want fresh MLS matches: within 15 min,
       once a morning, or once a week. Frequency stored on the saved-
       search record + respected by the alerts cron. */
    .hero-lead-freq {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
      max-width: 540px; margin: 10px auto 0;
      font-size: 0.78rem;
      color: rgba(245,240,230,0.78);
    }
    .hero-lead-freq-label {
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: rgba(245,240,230,0.55);
    }
    .hero-lead-freq-opt {
      display: inline-flex; align-items: center; gap: 5px;
      cursor: pointer; padding: 4px 8px;
      border-radius: 8px;
      transition: background 0.15s;
    }
    .hero-lead-freq-opt:hover { background: rgba(212,175,55,0.08); }
    .hero-lead-freq-opt input { accent-color: #d4af37; }
    .hero-trust {
      font-size: 0.78rem;
      color: rgba(245,240,230,0.65);
      margin-top: 14px;
      line-height: 1.5;
    }
    @media (max-width: 480px) {
      .listings-hero { padding: 120px 0 22px; }
      .listings-hero h1 { font-size: 1.4rem; }
      .listings-hero .hero-sub { font-size: 0.88rem; margin-bottom: 14px; padding: 0 6px; }
      .hero-lead-form {
        flex-direction: column;
        padding: 8px;
        gap: 6px;
      }
      .hero-lead-form input[type="email"] {
        text-align: center;
        padding: 12px 14px;
      }
      .hero-lead-form button {
        width: 100%;
        padding: 13px 18px;
      }
      .hero-trust { font-size: 0.72rem; }
      /* Nav-logo on phone: the lockup was wrapping the wordmark onto
         two lines and breaking the tagline mid-word. Lock the wordmark
         to one line and drop the tagline entirely below 480px (the
         mark itself already brands it). */
      .nav-logo { gap: 9px !important; min-width: 0; flex-shrink: 1; }
      .nav-logo > img { width: 38px !important; height: 38px !important; flex-shrink: 0; }
      .nav-logo .nav-logo-text { min-width: 0; overflow: hidden; }
      .nav-logo .nav-logo-name {
        font-size: 1.05rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
      }
      .nav-logo .nav-logo-sub { display: none !important; }
    }
    /* Belt-and-suspenders: kill any horizontal scroll caused by stray
       wide content. The page is full-width responsive; nothing should
       overflow the viewport. Inner containers that legitimately scroll
       (room tables, sold-comps tables, mortgage amort) set their own
       overflow-x:auto so this doesn't break them. */
    html, body { overflow-x: hidden; }
    /* Hero language pills — same dark gradient bg in both themes. */
    .hero-lang-pill {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 30px;
      background: rgba(212,175,55,0.18);
      border: 1px solid rgba(212,175,55,0.4);
      color: #ffd86b;
      font-size: 0.82rem;
      font-weight: 600;
      white-space: nowrap;
    }
    /* Hero is now light/minimal (cream bg, dark ink) — text colors come from
       the theme-aware --sr-ink tokens in the hero CSS block below. */

    /* ── "Why search here" comparison strip ──
       Desktop: 4-column grid, 2 rows of 4 cards.
       Phone:   horizontal scroll carousel — one card at a time with
                a peek of the next, scroll-snap so each card lands
                cleanly. Tighter than 8 stacked cards. */
    /* Compact "why search here" strip — was a 2-row 8-card grid that
       ate 500+ vertical px. Reduced to a single-row tile strip with
       icon + title only; descriptions reveal on hover as a tooltip.
       Total height ~120px on desktop. Phone: 2-col grid (4 rows) so
       tiles still tap-friendly but block stays short. */
    .why-strip { padding: 16px 0 8px; }
    /* Disclosure wrapper — keep the why-content collapsed by default
       so first-time buyers see listings, not a product pitch. The
       curious can expand. */
    .why-disclose { width: 100%; max-width: 1180px; margin: 0 auto; }
    .why-disclose-summary {
      list-style: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: 0.78rem; font-weight: 700;
      color: var(--text-mid);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      transition: color 0.15s, background 0.15s;
      user-select: none;
    }
    .why-disclose-summary::-webkit-details-marker { display: none; }
    .why-disclose-summary:hover { color: var(--gold); background: rgba(212,175,55,0.04); }
    .why-disclose-arrow { color: var(--gold); transition: transform 0.18s; }
    .why-disclose[open] > .why-disclose-summary > .why-disclose-arrow { transform: rotate(180deg); }
    [data-theme="light"] .why-disclose-summary { color: #6b5e45; }
    .why-strip-heading {
      text-align: center;
      font-size: 0.74rem; font-weight: 700;
      color: var(--text-mid);
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 14px;
      padding: 0 16px;
    }
    .why-strip-heading strong { color: var(--gold); }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 8px;
      max-width: 1180px; margin: 0 auto;
    }
    .why-card {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 10px 11px;
      text-align: center;
      position: relative;
      transition: border-color 0.18s ease, transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease;
      cursor: pointer;
      min-height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-decoration: none;
      color: inherit;
    }
    .why-card:hover {
      border-color: rgba(212,175,55,0.55);
      transform: translateY(-2px);
      background: rgba(212,175,55,0.06);
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }
    .why-card:focus-visible {
      outline: 2px solid #d4af37;
      outline-offset: 3px;
    }
    /* Tiny "→" affordance reveals on hover so visitors know it's tappable */
    .why-card::after {
      content: '→';
      position: absolute; right: 8px; bottom: 6px;
      color: #d4af37;
      font-size: 0.82rem; font-weight: 700;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: none;
    }
    .why-card:hover::after { opacity: 0.85; transform: translateX(0); }
    .why-card-icon { font-size: 1.3rem; margin-bottom: 6px; line-height: 1; }
    .why-card-title {
      font-size: 0.78rem; font-weight: 700;
      color: var(--text-bright);
      line-height: 1.25;
    }
    /* Description hides by default; reveals as a tooltip on hover. */
    .why-card-sub {
      display: none;
      position: absolute;
      top: calc(100% + 8px); left: 50%;
      transform: translateX(-50%);
      width: 240px;
      background: var(--surface-1);
      border: 1px solid rgba(212,175,55,0.45);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 0.78rem; line-height: 1.5;
      color: var(--text-mid);
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      z-index: 50;
      text-align: left;
      pointer-events: none;
    }
    .why-card:hover .why-card-sub { display: block; }
    .why-scroll-hint { display: none; }
    @media (max-width: 1024px) and (min-width: 641px) {
      .why-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 640px) {
      .why-strip { padding: 18px 0 8px; }
      .why-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
      .why-card { min-height: 78px; padding: 10px 8px; }
      .why-card-icon { font-size: 1.15rem; margin-bottom: 4px; }
      .why-card-title { font-size: 0.74rem; }
      /* Tooltip would overflow on phone — show description inline,
         tighter typography. */
      .why-card-sub {
        display: block;
        position: static;
        transform: none; width: auto;
        background: transparent; border: 0; box-shadow: none;
        padding: 4px 0 0;
        font-size: 0.7rem;
        text-align: center;
      }
    }
    [data-theme="light"] .why-strip-heading { color: #5a5040; }
    [data-theme="light"] .why-strip-heading strong { color: #7a5a10; }

    /* ── Persona filter ── */
    .persona-filter {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 20px 0 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 16px;
    }
    .persona-label { font-size: 0.75rem; font-weight: 700; color: #909090; text-transform: uppercase; letter-spacing: 0.1em; flex-shrink: 0; }
    .persona-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .persona-pill {
      padding: 8px 16px; border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.03);
      color: #c0c0c0; font-size: 0.83rem; font-weight: 600;
      cursor: pointer; font-family: var(--font-sans);
      transition: all 0.15s;
    }
    .persona-pill:hover  { border-color: rgba(212,175,55,0.35); color: #d4af37; background: rgba(212,175,55,0.06); }
    .persona-pill.active { border-color: rgba(212,175,55,0.55); color: #d4af37; background: rgba(212,175,55,0.13); }

    /* ── Persona tip card ── */
    .persona-tip {
      display: flex; align-items: flex-start; gap: 14px;
      background: rgba(212,175,55,0.07);
      border: 1px solid rgba(212,175,55,0.28);
      border-radius: 10px; padding: 16px 20px;
      margin-bottom: 16px; position: relative;
    }
    .persona-tip-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
    .persona-tip-body { flex: 1; }
    .persona-tip-text { font-size: 0.88rem; color: #ddd; line-height: 1.65; margin-bottom: 8px; }
    .persona-tip-link { font-size: 0.82rem; font-weight: 700; color: #d4af37; text-decoration: none; }
    .persona-tip-link:hover { text-decoration: underline; }
    .persona-tip-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #666; cursor: pointer; font-size: 1.1rem; line-height: 1; }
    .persona-tip-close:hover { color: #aaa; }

    /* ── Alerts prompt bar ── */
    .alerts-bar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      padding: 14px 20px;
      background: rgba(212,175,55,0.06);
      border: 1px solid rgba(212,175,55,0.2);
      border-radius: 10px;
      margin-bottom: 0;
    }
    .alerts-bar-text { font-size: 0.88rem; color: #c8c8c8; line-height: 1.5; }
    .alerts-bar-text strong { color: #f0f0f0; }
    .alerts-bar-btn {
      padding: 9px 20px; border-radius: 6px;
      background: linear-gradient(135deg, #d4af37 0%, #b8960c 100%);
      color: #0a0a0f; font-weight: 700; font-size: 0.82rem;
      border: none; cursor: pointer; white-space: nowrap;
      font-family: var(--font-sans); transition: opacity 0.2s;
      flex-shrink: 0;
    }
    .alerts-bar-btn:hover { opacity: 0.88; }

    /* ── IDX frame ── */
    .idx-section { padding: 40px 0 100px; }
    .idx-wrap {
      border: 1px solid rgba(212,175,55,0.35);
      border-radius: 10px;
      overflow: hidden;
      margin: 16px 0 40px;
      background: #0a0a0f;
    }
    .idx-wrap iframe {
      display: block; width: 100%; min-height: 840px; border: none;
    }
    @media(max-width:600px) { .idx-wrap iframe { min-height: 680px; } }

    /* ── CTA strip ── */
    .cta-strip {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
      margin: 0 0 40px;
    }
    @media(max-width:700px){ .cta-strip{ grid-template-columns: 1fr; } }
    .cta-strip-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px; padding: 24px 22px;
      text-align: center;
    }
    .cta-strip-card .icon { font-size: 1.8rem; margin-bottom: 10px; }
    .cta-strip-card h4 { font-size: 0.95rem; margin-bottom: 8px; }
    .cta-strip-card p  { font-size: 0.82rem; color: #909090; margin-bottom: 14px; line-height: 1.65; }
    .cta-strip-card a  { font-size: 0.82rem; font-weight: 700; color: #d4af37; text-decoration: none; }
    /* Light is the DEFAULT theme here — only localStorage "dark" opts out — so
       these two were failing for most visitors, not an edge case. On the light
       canvas #909090 measured 2.98:1 and the bright gold 1.96:1. Both are dark-
       theme values that were never given a light counterpart. --sds-gold-ink and
       --text-muted exist for exactly this and are already AA-verified. */
    [data-theme="light"] .cta-strip-card p { color: #6a5e48; }
    [data-theme="light"] .cta-strip-card a { color: #6d5011; }



    /* ── Alert Popup ── */
    .popup-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 300;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s;
    }
    .popup-overlay.visible { opacity: 1; pointer-events: all; }
    .popup-card {
      background: #0f0f1a;
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 14px;
      padding: 40px 44px;
      max-width: 480px; width: 100%;
      position: relative;
      transform: translateY(20px);
      transition: transform 0.3s;
      box-sizing: border-box;
    }
    .popup-overlay.visible .popup-card { transform: translateY(0); }
    @media(max-width:520px) { .popup-card { padding: 32px 24px; } }
    .popup-close {
      position: absolute; top: 16px; right: 18px;
      background: none; border: none; color: #666;
      font-size: 1.4rem; cursor: pointer; line-height: 1;
    }
    .popup-close:hover { color: #aaa; }
    .popup-icon  { font-size: 2rem; margin-bottom: 12px; }
    .popup-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: #d4af37; text-transform: uppercase; margin-bottom: 10px; }
    .popup-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
    .popup-card p  { color: var(--text-mid); font-size: 0.9rem; line-height: 1.75; margin-bottom: 22px; }
    .popup-area-chip {
      display: inline-flex; align-items: center; padding: 7px 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px; cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .popup-area-chip input { display: none; }
    .popup-area-chip span { font-size: 0.82rem; color: #c8c8c8; }
    .popup-area-chip:has(input:checked) { background: rgba(212,175,55,0.13); border-color: rgba(212,175,55,0.55); }
    .popup-area-chip:has(input:checked) span { color: #d4af37; }
    .popup-form { display: flex; flex-direction: column; gap: 12px; }
    .popup-input {
      padding: 12px 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(212,175,55,0.2);
      border-radius: 6px; color: #f0f0f0; font-size: 0.92rem;
      transition: border-color 0.2s;
      /* Critical for nested CSS Grid — without box-sizing + min-width:0
         + width:100%, inputs render at their default intrinsic width
         and force horizontal scroll inside the modal on phone. */
      box-sizing: border-box; width: 100%; min-width: 0;
    }
    /* Collapse popup form's inner 2-column grids to 1 column on phone
         so wider placeholders don't overflow the card. */
    @media (max-width: 520px) {
      .popup-form > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
    }
    .popup-input:focus { border-color: rgba(212,175,55,0.5); }
    .popup-input:focus:not(:focus-visible) { outline: none; }
    .popup-submit {
      padding: 13px;
      background: linear-gradient(135deg, #d4af37 0%, #b8960c 100%);
      color: #0a0a0f; font-weight: 700; font-size: 0.95rem;
      border: none; border-radius: 8px; cursor: pointer;
      transition: opacity 0.2s;
    }
    .popup-submit:hover    { opacity: 0.9; }
    .popup-submit:disabled { opacity: 0.6; cursor: wait; }
    .popup-skip   { text-align: center; margin-top: 10px; }
    .popup-skip a { font-size: 0.8rem; color: #666; text-decoration: none; }
    .popup-skip a:hover { color: #999; }
    .popup-success { text-align: center; padding: 10px 0; display: none; }
    .popup-success .success-icon { font-size: 2.5rem; margin-bottom: 10px; }
    .popup-success p { color: #81c784; font-weight: 600; margin: 0; }
    /* ── Light-mode contrast overrides ──────────────────────────────────
       Several inline styles use #d4af37 (bright gold) which is fine on dark
       backgrounds but washes out on light cream. The .mls-* classes here
       remap those badges to a darker gold-on-cream that meets WCAG AA. */
    [data-theme="light"] #mlsListingsWrap .mls-chip-active,
    [data-theme="light"] #mlsActiveChips button {
      background: rgba(160,120,32,0.13) !important;
      color: #7a5a10 !important;
      border-color: rgba(160,120,32,0.4) !important;
    }
    [data-theme="light"] .mls-badge-new-today { background:#16a34a !important; color:#fff !important; }
    [data-theme="light"] .mls-badge-recent    { background:#a07820 !important; color:#fff !important; }
    [data-theme="light"] .mls-badge-week      { background:rgba(160,120,32,0.18) !important; color:#7a5a10 !important; }
    [data-theme="light"] .mls-badge-pricedrop { background:#16a34a !important; color:#fff !important; }
    [data-theme="light"] .mls-badge-openhouse { background:#a07820 !important; color:#fff !important; }
    [data-theme="light"] .mls-badge-type-tag  { color:#7a5a10 !important; }
    [data-theme="light"] .mls-card-courtesy   { color:#3d3320 !important; }
    [data-theme="light"] .mls-savesearch-btn  { background:#a07820 !important; color:#fff !important; }
    /* (Hero eyebrow light-mode treatment moved up — must stay light on dark hero) */
    /* Sync-status panel hint text */
    [data-theme="light"] #mlsSyncStatus { color: var(--text-bright) !important; }
    /* Recently-viewed strip price text */
    [data-theme="light"] #mlsRecentRow > a > div > div:first-child { color:#7a5a10 !important; }
    /* Persona tip + alerts bar text was tuned for dark mode — boost contrast on cream */
    [data-theme="light"] .persona-tip-text   { color: #3d3320 !important; }
    [data-theme="light"] .persona-tip-link   { color: #7a5a10 !important; }
    [data-theme="light"] .persona-tip-close  { color: #6a5e48 !important; }
    [data-theme="light"] .persona-tip-close:hover { color: #1a1208 !important; }
    [data-theme="light"] .alerts-bar-text         { color: #3d3320 !important; }
    [data-theme="light"] .alerts-bar-text strong  { color: #1a1208 !important; }
    [data-theme="light"] .persona-pill        { color: #3d3320; }
    [data-theme="light"] .persona-pill:hover  { color: #7a5a10; }
    [data-theme="light"] .persona-pill.active { color: #7a5a10; }
    [data-theme="light"] .persona-label       { color: #3d3320 !important; }

    /* ════════════════════════════════════════════════════════════════════
       NEW: Top-tier filter UX — quick-start chips above + compact filter
       bar (sticky) + 'All filters' drawer modal. Mirrors the Zillow /
       Realtor.com / Redfin pattern: show the 5 most-used filters always,
       hide the long tail behind a drawer.
    ════════════════════════════════════════════════════════════════════ */
    /* AI-powered natural-language search.
       Sits above the quick-start strip. Distinct from the keyword search
       inside the filter bar (which does substring match). This box sends
       the query to Claude Haiku via /api/admin?action=nl-search and the
       returned filter object is applied to the form inputs. */
    /* AI search hero — the primary search surface. Designed as a distinct
       "card with two layers": an outer gold-tinted frame that signals
       "this is the smart one" + an inner white pill containing the input
       and controls. On phone the inner pill becomes a vertical stack so
       no element ever has < 44px tap target. */
    /* ── Unified search panel ──────────────────────────────────────
       Replaces the previous stack of 6 competing surfaces (AI search,
       quick chips, alerts bar, matcher CTA, "or browse by filters"
       divider, compact filter bar) with a tabbed panel showing ONE
       primary tool at a time. The quick-start chips stay below the
       panel as a persistent shortcut row. */
    .search-panel {
      margin: 22px 0 14px;
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    }
    [data-theme="light"] .search-panel { background: #fffefb; box-shadow: 0 6px 24px rgba(160,120,32,0.10); }
    .search-tabs {
      display: flex; gap: 0;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
    }
    .search-tab {
      flex: 1 1 0;
      min-width: 0;
      padding: 14px 10px;
      background: transparent;
      color: var(--text-mid);
      border: none;
      font-family: inherit;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 8px; justify-content: center;
      border-bottom: 3px solid transparent;
      transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
      position: relative;
    }
    .search-tab:hover { color: var(--text-bright); background: rgba(212,175,55,0.05); }
    .search-tab.active {
      color: var(--gold);
      background: var(--surface-1);
      border-bottom-color: var(--gold);
    }
    [data-theme="light"] .search-tab.active { background: #fffefb; }
    .search-tab-icon { font-size: 1.05rem; line-height: 1; }
    .search-tab-eyebrow {
      position: absolute; top: 4px; right: 8px;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
      color: var(--gold); text-transform: uppercase;
    }
    /* Two label variants — full text on desktop, short on mobile so
       all four tabs fit a 360-400px phone viewport without horizontal
       scroll. JS doesn't need to swap — pure CSS toggles via the
       breakpoint below. */
    .search-tab-short { display: none; }
    @media (max-width: 640px) {
      .search-tab-full { display: none; }
      .search-tab-short { display: inline; }
    }
    .search-pane { display: none; padding: 18px 20px; }
    .search-pane.active { display: block; }
    /* Override existing .ai-search styles when nested inside a pane —
       drop the redundant card chrome since the panel already provides it. */
    .search-pane > .ai-search,
    .search-pane > .alerts-bar,
    .search-pane > .nbhd-matcher-cta,
    .search-pane > .fbar {
      margin: 0; box-shadow: none;
    }
    .search-pane > .ai-search { background: transparent; border: none; padding: 0; }
    .search-pane > .alerts-bar { background: transparent; border: none; padding: 6px 0; }
    .search-pane > .nbhd-matcher-cta { background: transparent; border: none; padding: 6px 0; }
    .search-pane > .fbar { background: transparent; border: none; padding: 0; }
    @media (max-width: 640px) {
      .search-panel { margin: 14px 0 10px; border-radius: 14px; }
      .search-tab { padding: 12px 14px; font-size: 0.84rem; }
      .search-tab-eyebrow { display: none; }
      .search-pane { padding: 14px; }
    }

    .ai-search {
      margin: 24px 0 10px;
      background: linear-gradient(135deg, rgba(212,175,55,0.13), rgba(212,175,55,0.04));
      border: 1px solid rgba(212,175,55,0.35);
      border-radius: 16px;
      padding: 16px 18px 14px;
      box-shadow: 0 4px 18px rgba(212,175,55,0.06);
    }
    [data-theme="light"] .ai-search { background: linear-gradient(135deg, rgba(160,120,32,0.10), rgba(160,120,32,0.04)); border-color: rgba(160,120,32,0.35); }
    .ai-search-eyebrow {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 10px;
    }
    .ai-search-eyebrow-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,0.5);
      animation: ai-pulse 2s ease-in-out infinite;
    }
    @keyframes ai-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.6); } 50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } }
    .ai-search-row {
      display: flex; align-items: center; gap: 8px;
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 6px 6px 6px 14px;
    }
    .ai-search-icon {
      font-size: 1.15rem; line-height: 1;
      flex-shrink: 0;
    }
    /* Language dropdown — sits between the ✨ icon and the input.
       Compact flag picker so visitors can declare their language
       once instead of seeing 7 pill rows. */
    .ai-search-lang {
      flex-shrink: 0;
      padding: 8px 8px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-bright);
      font-size: 0.88rem;
      font-family: inherit;
      cursor: pointer;
      max-width: 140px;
    }
    .ai-search-lang:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
    @media (max-width: 540px) {
      /* Was 88px which clipped "English" to "Engli". 116px fits the
         longest collapsed label including the flag and the dropdown
         caret. */
      .ai-search-lang { max-width: 116px; font-size: 0.82rem; padding: 7px 6px; }
    }
    @media (max-width: 380px) {
      .ai-search-lang { max-width: 92px; font-size: 0.78rem; padding: 6px 4px; }
    }
    .ai-search-row input {
      flex: 1; min-width: 0;
      padding: 12px 4px;
      border: none;
      background: transparent;
      color: var(--text-bright);
      font-size: 1rem;
      font-family: inherit;
    }
    .ai-search-row input::placeholder { color: var(--text-mid); }
    .ai-search-row button {
      padding: 11px 18px;
      background: var(--gold);
      color: #0a0a0f;
      border: none;
      border-radius: 9px;
      font-size: 0.92rem;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.12s, transform 0.06s;
      display: inline-flex; align-items: center; gap: 6px;
      min-height: 44px; /* iOS tap target */
    }
    .ai-search-row button:hover { background: #c49f2a; }
    .ai-search-row button:disabled { opacity: 0.7; cursor: wait; }
    /* YYC Neighbourhood Match Maker CTA — sits below the AI hero, above the
       "Or browse by filters" divider. Subtle navy background so it
       reads as a secondary tool, not a competing primary search. */
    .nbhd-matcher-cta {
      display: flex; align-items: center; gap: 14px;
      margin: 14px 0 8px;
      padding: 14px 18px;
      background: linear-gradient(135deg, rgba(26,38,69,0.6), rgba(26,38,69,0.35));
      border: 1px solid rgba(212,175,55,0.28);
      border-radius: 12px;
      color: var(--text-bright);
      text-decoration: none;
      transition: border-color 0.18s ease, transform 0.06s ease;
    }
    .nbhd-matcher-cta:hover { border-color: var(--gold); transform: translateY(-1px); }
    .nbhd-matcher-icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
    .nbhd-matcher-body { flex: 1; min-width: 0; }
    .nbhd-matcher-title { font-weight: 700; font-size: 0.98rem; margin-bottom: 3px; color: var(--text-bright); }
    .nbhd-matcher-sub { color: var(--text-mid); font-size: 0.82rem; line-height: 1.5; }
    .nbhd-matcher-arrow {
      flex-shrink: 0; padding: 10px 16px;
      background: var(--gold); color: #0a0a0f;
      border-radius: 8px;
      font-weight: 700; font-size: 0.85rem;
      white-space: nowrap;
    }
    [data-theme="light"] .nbhd-matcher-cta { background: linear-gradient(135deg, rgba(160,120,32,0.10), rgba(160,120,32,0.04)); color: var(--text-bright); }
    [data-theme="light"] .nbhd-matcher-arrow { background: #a07820; color: #fff; }
    @media (max-width: 640px) {
      .nbhd-matcher-cta { flex-direction: column; align-items: flex-start; padding: 14px; }
      .nbhd-matcher-arrow { width: 100%; text-align: center; }
    }

    /* (.ai-or-divider removed — the unified search panel replaces the
       previous "stacked boxes" layout and no longer needs a separator.) */
    [data-theme="light"] .ai-search-row button { background: #a07820; color: #fff; }
    [data-theme="light"] .ai-search-row button:hover { background: #7a5a10; }
    .ai-search-spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(10,10,15,0.25);
      border-top-color: #0a0a0f;
      border-radius: 50%;
      animation: ai-spin 0.7s linear infinite;
    }
    [data-theme="light"] .ai-search-spinner { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
    @keyframes ai-spin { to { transform: rotate(360deg); } }
    .ai-search-hints {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 10px;
      align-items: center;
    }
    .ai-search-hint-label {
      font-size: 0.72rem; color: var(--text-mid);
      letter-spacing: 0.08em; text-transform: uppercase;
      font-weight: 600;
      padding-right: 2px;
    }
    .ai-search-hint {
      padding: 5px 11px;
      background: rgba(255,255,255,0.04);
      color: var(--text-mid);
      border: 1px solid var(--border);
      border-radius: 14px;
      font-size: 0.78rem;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.12s, color 0.12s, background 0.12s;
    }
    .ai-search-hint:hover { border-color: rgba(212,175,55,0.5); color: var(--text-bright); background: rgba(212,175,55,0.08); }
    [data-theme="light"] .ai-search-hint { background: #fff; }
    .ai-search-status {
      margin-top: 10px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 0.85rem;
      line-height: 1.5;
    }
    .ai-search-status.ai-success {
      background: rgba(22,163,74,0.12);
      border: 1px solid rgba(22,163,74,0.35);
      color: var(--text-bright);
    }
    .ai-search-status.ai-error {
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.35);
      color: var(--text-bright);
    }
    /* "Save this search" inline UI — appears after a successful AI search. */
    .ai-save-cta {
      margin-left: 8px;
      padding: 4px 12px;
      background: var(--gold); color: #0a0a0f;
      border: none; border-radius: 14px;
      font-size: 0.78rem; font-weight: 700;
      font-family: inherit; cursor: pointer;
      vertical-align: middle;
    }
    .ai-save-cta:hover { background: #c49f2a; }
    [data-theme="light"] .ai-save-cta { background: #a07820; color: #fff; }
    .ai-save-form {
      display: none;
      margin-top: 10px;
      padding: 10px 12px;
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      gap: 8px; align-items: center; flex-wrap: wrap;
    }
    .ai-save-form.open { display: flex; }
    .ai-save-form input[type=email] {
      flex: 1; min-width: 0;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface-2);
      color: var(--text-bright);
      font-size: 0.92rem;
      font-family: inherit;
    }
    .ai-save-form button {
      padding: 8px 14px;
      background: var(--gold); color: #0a0a0f;
      border: none; border-radius: 6px;
      font-weight: 700; font-size: 0.86rem;
      cursor: pointer; font-family: inherit;
    }
    .ai-save-form button:hover { background: #c49f2a; }
    [data-theme="light"] .ai-save-form button { background: #a07820; color: #fff; }

    /* ── Lead-magnet banner above the listings grid ────────────────────
       Shows up once the visitor has at least one filter active. Sticks
       out visually (gold border + slight gradient) so it doesn't blend
       into the result cards underneath. */
    .alert-cta {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px; margin: 0 0 18px;
      background: linear-gradient(135deg, rgba(212,175,55,0.10), rgba(212,175,55,0.04));
      border: 1px solid rgba(212,175,55,0.45);
      border-radius: 12px;
    }
    .alert-cta-icon { font-size: 1.6rem; flex-shrink: 0; }
    .alert-cta-body { flex: 1; min-width: 0; }
    .alert-cta-title { font-weight: 700; color: var(--text-bright); font-size: 0.98rem; margin-bottom: 2px; }
    .alert-cta-sub { color: var(--text-mid); font-size: 0.82rem; line-height: 1.5; }
    .alert-cta-btn {
      flex-shrink: 0; padding: 10px 18px;
      background: var(--gold); color: #0a0a0f;
      border: none; border-radius: 8px;
      font-weight: 700; font-size: 0.88rem; font-family: inherit; cursor: pointer;
      white-space: nowrap;
    }
    .alert-cta-btn:hover { background: #c49f2a; }
    /* #a07820 with white text measured 4.03:1 — under AA. #8f6a1b is the value
       already used for this exact pairing elsewhere in the site: 4.95:1, chosen
       for margin rather than landing on 4.53. */
    [data-theme="light"] .alert-cta-btn { background: #8f6a1b; color: #fff; }
    @media (max-width: 640px) {
      .alert-cta { flex-direction: column; align-items: flex-start; padding: 14px; }
      .alert-cta-btn { width: 100%; }
    }

    /* ── Save-alert modal ───────────────────────────────────────────── */
    .save-alert-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .save-alert-backdrop { position: absolute; inset: 0; background: rgba(8,8,12,0.66); backdrop-filter: blur(4px); }
    .save-alert-card {
      position: relative; max-width: 480px; width: 100%;
      background: var(--surface-1); color: var(--text-bright);
      border: 1px solid var(--border); border-radius: 14px;
      padding: 28px 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    }
    .save-alert-close {
      position: absolute; top: 10px; right: 12px;
      background: transparent; border: none; color: var(--text-mid);
      font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
    }
    .save-alert-close:hover { color: var(--text-bright); }
    .save-alert-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
    .save-alert-title { font-family: Georgia, serif; font-size: 1.35rem; margin: 0 0 8px; color: var(--text-bright); }
    .save-alert-body { color: var(--text-mid); font-size: 0.9rem; line-height: 1.55; margin: 0 0 14px; }
    .save-alert-warn { padding: 10px 12px; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.4); border-radius: 8px; font-size: 0.84rem; margin-bottom: 14px; }
    .save-alert-filters { margin-bottom: 14px; }
    .save-alert-chips-label { font-size: 0.78rem; color: var(--text-mid); margin-bottom: 6px; }
    .save-alert-chip { display: inline-block; padding: 4px 10px; margin: 0 4px 4px 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; font-size: 0.78rem; }
    .save-alert-label { font-size: 0.8rem; color: var(--text-mid); margin-bottom: 6px; display: block; }
    .save-alert-input { width: 100%; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-bright); font-size: 0.96rem; font-family: inherit; box-sizing: border-box; }
    .save-alert-input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
    .save-alert-row { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
    .save-alert-submit { padding: 11px 22px; background: var(--gold); color: #0a0a0f; border: none; border-radius: 8px; font-weight: 700; font-size: 0.94rem; font-family: inherit; cursor: pointer; }
    .save-alert-submit:hover { background: #c49f2a; }
    .save-alert-submit:disabled { opacity: 0.7; cursor: wait; }
    [data-theme="light"] .save-alert-submit { background: #a07820; color: #fff; }
    .save-alert-book { color: var(--gold); text-decoration: none; font-size: 0.86rem; font-weight: 600; }
    .save-alert-book:hover { text-decoration: underline; }
    .save-alert-fine { font-size: 0.72rem; color: var(--text-mid); margin: 14px 0 0; line-height: 1.55; }
    .save-alert-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 0.88rem; line-height: 1.5; }
    .save-alert-result--ok { background: rgba(22,163,74,0.14); border: 1px solid rgba(22,163,74,0.4); }
    .save-alert-result--error { background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.4); }
    @media (max-width: 640px) {
      /* Mobile layout: input on its own row at full width, then a row of
         controls below (mic + lang + Search). Each tap target ≥ 44px.
         Order: input ▸ lang ▸ mic ▸ AI Search button. */
      .ai-search { padding: 14px 12px; margin: 16px 0 8px; }
      .ai-search-eyebrow { font-size: 0.68rem; margin-bottom: 8px; }
      .ai-search-row {
        flex-wrap: wrap;
        padding: 8px; gap: 8px;
      }
      .ai-search-icon { display: none; }
      .ai-search-row input {
        order: 1; flex-basis: 100%;
        padding: 12px 12px;
        background: var(--surface-2);
        border-radius: 8px;
        font-size: 1rem;
      }
      #aiSearchBtn { order: 2; flex: 1 1 100%; justify-content: center; padding: 13px 16px; font-size: 0.96rem; }
    }

    /* ── Skeleton listing cards (native-app loading state) ──
       Renders while the listings API call is in flight. Animated
       shimmer gives the impression of fast progress vs a static
       "Loading…" string. */
    .mls-skel-card {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      animation: mls-skel-pulse 1.6s ease-in-out infinite;
    }
    .mls-skel-photo {
      aspect-ratio: 16 / 10;
      background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.04) 100%);
      background-size: 200% 100%;
      animation: mls-skel-shimmer 1.6s linear infinite;
    }
    html:not([data-theme="light"]) .mls-skel-photo {
      background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
      background-size: 200% 100%;
    }
    .mls-skel-body { padding: 16px 18px; }
    .mls-skel-line {
      height: 12px; border-radius: 6px; margin-bottom: 10px;
      background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 100%);
      background-size: 200% 100%;
      animation: mls-skel-shimmer 1.6s linear infinite;
    }
    html:not([data-theme="light"]) .mls-skel-line {
      background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.05) 100%);
      background-size: 200% 100%;
    }
    .mls-skel-line--price { height: 22px; width: 42%; }
    .mls-skel-line--addr { width: 72%; }
    .mls-skel-line--specs { width: 56%; margin-bottom: 0; }
    @keyframes mls-skel-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.85 } }
    @keyframes mls-skel-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
    /* Fresh-listing pulse — green dot expands every 2s on the "JUST
       LISTED" / Xm ago badge. Subtle but eye-catching. */
    @keyframes mlsFreshPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.6); }
      50%      { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
    }

    /* ── Pull-to-refresh (mobile only) ──────────────────────────
       Visible at the top of the listings grid wrapper. JS handler
       below catches touchstart/move at the top of the page when
       scrollY===0 and reveals/animates the indicator. */
    .mls-ptr {
      position: relative;
      height: 0;
      overflow: hidden;
      text-align: center;
      transition: height 0.18s ease, opacity 0.18s ease;
      opacity: 0;
      color: var(--text-mid);
      font-size: 0.84rem;
      pointer-events: none;
    }
    .mls-ptr.is-visible { opacity: 1; }
    .mls-ptr.is-refreshing { height: 56px; opacity: 1; }
    .mls-ptr-icon {
      display: inline-block; width: 22px; height: 22px;
      vertical-align: middle; margin-right: 8px;
      transition: transform 0.15s ease;
    }
    .mls-ptr.is-refreshing .mls-ptr-icon { animation: mls-ptr-spin 0.9s linear infinite; }
    @keyframes mls-ptr-spin { to { transform: rotate(360deg); } }

    /* Stampede Realty wordmark + install prompt */
    .moyyc-brand-bar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin: 14px 0 4px;
    }
    .moyyc-brand-mark { display: flex; align-items: center; gap: 12px; }
    .moyyc-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .moyyc-brand-name {
      font-family: var(--font-serif);
      font-size: 1.45rem; font-weight: 700;
      color: var(--gold);
      letter-spacing: -0.01em;
    }
    .moyyc-brand-tag {
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--text-mid);
    }
    @media (max-width: 480px) {
      .moyyc-brand-logo { width: 38px; height: 38px; }
      .moyyc-brand-name { font-size: 1.25rem; }
    }
    .moyyc-install-btn {
      background: var(--gold); color: #0a0a0a; border: none;
      padding: 8px 14px; border-radius: 8px;
      font-family: inherit; font-weight: 700; font-size: 0.82rem;
      cursor: pointer; transition: background 0.15s, transform 0.06s;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .moyyc-install-btn:hover { background: #c49f2a; }
    .moyyc-install-btn:active { transform: scale(0.96); }
    [data-theme="light"] .moyyc-install-btn { background: #a07820; color: #fff; }
    html.pwa-standalone .moyyc-install-btn { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════
       Stampede Realty — APP SHELL (mobile bottom nav + Me sheet)
       ═══════════════════════════════════════════════════════════════
       Visible only on mobile (≤900px). When the PWA is installed and
       launched standalone we ALSO hide the site header/footer to give
       a true native-app feel — see .pwa-standalone block below. */
    .moyyc-tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      /* z-index needs to beat Leaflet's default control z-index (1000)
         so the map's zoom/attribution doesn't sit on top of the tabbar. */
      z-index: 1100;
      padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
      /* SOLID background — the glass-blur on iOS Safari was rendering
         inconsistently and made the bar look "weirdly sticky" while
         scrolling. Solid now with a hairline top border + soft shadow. */
      background: #ffffff;
      border-top: 1px solid rgba(0,0,0,0.10);
      box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
    }
    html[data-theme="light"] .moyyc-tabbar { background: #fffefb; }
    html:not([data-theme="light"]) .moyyc-tabbar {
      background: #131316;
      border-top-color: rgba(255,255,255,0.10);
      box-shadow: 0 -4px 14px rgba(0,0,0,0.45);
    }
    @media (max-width: 900px) {
      .moyyc-tabbar { display: flex; align-items: stretch; }
      body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    }
    .moyyc-tab {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px;
      padding: 8px 4px 6px;
      background: transparent; border: none;
      color: #6a5e48;
      font-family: inherit; font-size: 0.66rem; font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      position: relative;
      transition: color 0.15s ease, transform 0.08s ease, background 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .moyyc-tab svg { width: 22px; height: 22px; stroke-width: 2; pointer-events: none; }
    .moyyc-tab span { pointer-events: none; }
    .moyyc-tab:active { transform: scale(0.88); background: rgba(212,175,55,0.10); }
    /* Active-tab indicator: gold top accent bar + colour change so users
       get OBVIOUS confirmation of which tab is on. */
    .moyyc-tab--active { color: #a07820; }
    .moyyc-tab--active::before {
      content: '';
      position: absolute; top: 0; left: 25%; right: 25%;
      height: 3px; border-radius: 0 0 4px 4px;
      background: #a07820;
    }
    .moyyc-tab--active svg { stroke: #a07820; }
    html:not([data-theme="light"]) .moyyc-tab { color: #c8c8c8; }
    html:not([data-theme="light"]) .moyyc-tab--active { color: #d4af37; }
    html:not([data-theme="light"]) .moyyc-tab--active svg { stroke: #d4af37; }
    html:not([data-theme="light"]) .moyyc-tab--active::before { background: #d4af37; }
    .moyyc-tab-badge {
      position: absolute; top: 4px; right: 18%;
      min-width: 18px; height: 18px; padding: 0 5px;
      background: #d4af37; color: #0a0a0a;
      border-radius: 9px; font-size: 0.66rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      pointer-events: none;
    }

    /* ── Save-listing lead-gate modal ──
       Slides up from the bottom on phone (app-sheet style), centers
       on desktop. Z-index sits above the bottom tabbar (1100) and the
       Me sheet (9500) but below the chat FAB (9999) and filters
       drawer (10000), so the user can dismiss to either of those. */
    #mls-saver-modal { position: fixed; inset: 0; z-index: 9700; display: none; }
    #mls-saver-modal.open { display: block; }
    #mls-saver-modal .mls-saver-backdrop {
      position: absolute; inset: 0;
      background: rgba(10, 10, 14, 0.68);
      backdrop-filter: blur(3px);
      animation: mlsSaverFadeIn 0.2s ease-out;
    }
    #mls-saver-modal .mls-saver-card {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: min(440px, calc(100vw - 32px));
      max-height: 90vh; overflow-y: auto;
      background: var(--surface-1);
      border: 1px solid rgba(212,175,55,0.45);
      border-radius: 16px;
      padding: 28px 26px 22px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.55);
      animation: mlsSaverPop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #mls-saver-modal .mls-saver-close {
      position: absolute; top: 10px; right: 10px;
      background: transparent; border: none;
      width: 32px; height: 32px;
      font-size: 1.6rem; line-height: 1;
      color: var(--text-mid); cursor: pointer;
      border-radius: 50%;
    }
    #mls-saver-modal .mls-saver-close:hover { background: var(--surface-2); color: var(--text-bright); }
    #mls-saver-modal .mls-saver-eyebrow {
      display: inline-block;
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--gold);
      background: rgba(212,175,55,0.14);
      border: 1px solid rgba(212,175,55,0.35);
      padding: 4px 12px; border-radius: 999px;
      margin-bottom: 12px;
    }
    #mls-saver-modal .mls-saver-headline {
      font-family: Georgia, serif;
      font-size: 1.2rem; line-height: 1.3;
      color: var(--text-bright);
      margin: 0 0 10px;
    }
    #mls-saver-modal .mls-saver-sub {
      font-size: 0.86rem; color: var(--text-mid);
      line-height: 1.55; margin: 0 0 18px;
    }
    #mls-saver-modal form { display: flex; flex-direction: column; gap: 10px; }
    #mls-saver-modal input[type="text"],
    #mls-saver-modal input[type="email"],
    #mls-saver-modal input[type="tel"] {
      width: 100%; padding: 12px 14px;
      background: var(--surface-2);
      color: var(--text-bright);
      border: 1px solid var(--border);
      border-radius: 10px;
      font-family: inherit; font-size: 0.96rem;
    }
    #mls-saver-modal input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
    #mls-saver-modal .mls-saver-cta {
      width: 100%; padding: 14px 20px;
      background: var(--gold); color: #0a0a0a;
      border: none; border-radius: 10px;
      font-family: inherit; font-weight: 700; font-size: 1rem;
      cursor: pointer; margin-top: 4px;
      transition: background 0.15s, transform 0.08s;
    }
    #mls-saver-modal .mls-saver-cta:hover { background: #c49f2a; }
    #mls-saver-modal .mls-saver-cta:active { transform: scale(0.98); }
    #mls-saver-modal .mls-saver-cta:disabled { opacity: 0.55; cursor: not-allowed; }
    #mls-saver-modal .mls-saver-fine {
      font-size: 0.72rem; color: var(--text-mid);
      line-height: 1.55; margin-top: 14px;
    }
    #mls-saver-modal .mls-saver-fine a { color: inherit; text-decoration: underline; }
    @keyframes mlsSaverFadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mlsSaverPop { from { opacity: 0; transform: translate(-50%, -42%); } to { opacity: 1; transform: translate(-50%, -50%); } }
    /* Phone: slide up from the bottom as an app sheet */
    @media (max-width: 640px) {
      #mls-saver-modal .mls-saver-card {
        top: auto; bottom: 0;
        left: 0; transform: none;
        width: 100%;
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
        padding: 24px 22px calc(22px + env(safe-area-inset-bottom, 0px));
        animation: mlsSaverSlideUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      @keyframes mlsSaverSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    }

    /* Tap animation for ❤️ / ⚖️ buttons on listing cards. Inline styles
       can't carry :active, but a global rule can. */
    [data-fav]:active, [data-cmp]:active {
      transform: scale(0.86);
      transition: transform 0.08s ease;
    }

    /* ── "Me" slide-up sheet ──────────────────────────────────────── */
    .moyyc-sheet {
      /* z-index needs to beat Leaflet's internal stacking — map panes
         and controls run 400-1000. We use 9500 to also sit above the
         chat FAB (9999 was lower than ours when sheet is open). */
      position: fixed; inset: 0; z-index: 9500;
      display: flex; align-items: flex-end; justify-content: center;
    }
    .moyyc-sheet[hidden] { display: none; }
    /* When the Me sheet is open, also hide the chat FAB and any
       Leaflet controls that might bleed through with high z-index. */
    body:has(.moyyc-sheet:not([hidden])) #emon-chat-btn,
    body:has(.moyyc-sheet:not([hidden])) .leaflet-control-container { display: none !important; }
    .moyyc-sheet-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.42); backdrop-filter: blur(6px);
      animation: moyyc-fade 0.18s ease-out;
    }
    .moyyc-sheet-card {
      position: relative; width: 100%; max-width: 580px;
      background: #fffefb;
      border-radius: 20px 20px 0 0;
      padding: 8px 22px calc(22px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -16px 60px rgba(0,0,0,0.28);
      animation: moyyc-slide 0.22s cubic-bezier(0.32, 0.72, 0, 1);
      max-height: 84vh; overflow-y: auto;
    }
    html:not([data-theme="light"]) .moyyc-sheet-card { background: #1d1d20; color: #f5f5f5; }
    .moyyc-sheet-grab {
      width: 48px; height: 5px; border-radius: 3px;
      background: rgba(0,0,0,0.18); margin: 0 auto 16px;
      cursor: pointer;
    }
    html:not([data-theme="light"]) .moyyc-sheet-grab { background: rgba(255,255,255,0.22); }
    .moyyc-sheet-close {
      position: absolute; top: 10px; right: 12px;
      width: 44px; height: 44px;              /* full 44px touch target */
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.06); border: none; border-radius: 50%;
      color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
      z-index: 2;
    }
    .moyyc-sheet-close:hover { background: rgba(0,0,0,0.12); }
    html:not([data-theme="light"]) .moyyc-sheet-close { background: rgba(255,255,255,0.12); }
    .moyyc-sheet-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
    .moyyc-sheet-logo { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
    .moyyc-sheet-name { font-family: Georgia, serif; font-size: 1.12rem; font-weight: 700; color: #1a1208; }
    html:not([data-theme="light"]) .moyyc-sheet-name { color: #f5f5f5; }
    .moyyc-sheet-role { font-size: 0.78rem; color: #6a5e48; letter-spacing: 0.04em; }
    html:not([data-theme="light"]) .moyyc-sheet-role { color: #a0a0a0; }
    .moyyc-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .moyyc-sheet-btn {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 14px;
      background: #f5efe1; color: #1a1208;
      border-radius: 12px; text-decoration: none;
      transition: transform 0.08s ease, background 0.15s;
    }
    html:not([data-theme="light"]) .moyyc-sheet-btn { background: #28282c; color: #f5f5f5; }
    .moyyc-sheet-btn:active { transform: scale(0.97); }
    .moyyc-sheet-btn--primary { background: #d4af37; color: #0a0a0a; grid-column: 1 / -1; }
    .moyyc-sheet-btn--primary:active { background: #c49f2a; }
    .moyyc-sheet-btn-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
    .moyyc-sheet-btn-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
    .moyyc-sheet-btn-text strong { font-size: 0.95rem; }
    .moyyc-sheet-btn-text small { font-size: 0.72rem; opacity: 0.75; }
    .moyyc-sheet-divider { height: 1px; background: rgba(0,0,0,0.10); margin: 18px 0; }
    html:not([data-theme="light"]) .moyyc-sheet-divider { background: rgba(255,255,255,0.10); }
    .moyyc-sheet-links { display: flex; flex-direction: column; gap: 2px; }
    .moyyc-sheet-link {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 6px;
      background: transparent; border: none;
      color: inherit; text-decoration: none;
      font-family: inherit; font-size: 0.92rem; text-align: left; cursor: pointer;
      width: 100%;
    }
    .moyyc-sheet-link span:nth-child(2) { flex: 1; }
    .moyyc-sheet-link span:last-child { color: #a07820; opacity: 0.6; font-size: 0.86rem; }
    html:not([data-theme="light"]) .moyyc-sheet-link span:last-child { color: #d4af37; }
    .moyyc-sheet-link:active { background: rgba(212,175,55,0.08); }
    .moyyc-sheet-footer {
      text-align: center; font-size: 0.74rem;
      color: #6a5e48; margin-top: 16px; line-height: 1.6;
    }
    html:not([data-theme="light"]) .moyyc-sheet-footer { color: #a0a0a0; }
    @keyframes moyyc-slide { from { transform: translateY(40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
    @keyframes moyyc-fade  { from { opacity: 0; } to { opacity: 1; } }

    /* ── PWA standalone mode: hide site chrome, become a real app ── */
    html.pwa-standalone .site-header,
    html.pwa-standalone .nav-drawer,
    html.pwa-standalone .site-footer,
    html.pwa-standalone #emon-chat-btn { display: none !important; }
    html.pwa-standalone body { padding-top: env(safe-area-inset-top, 0px); }
    html.pwa-standalone .idx-section { padding-top: 14px; }

    /* Quick-start chip strip — horizontal scroll on mobile */
    .qs-strip-wrap { position: relative; margin: 18px 0 12px; }
    .qs-strip {
      display: flex; gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 4px 2px 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(212,175,55,0.4) transparent;
    }
    .qs-strip::-webkit-scrollbar { height: 6px; }
    .qs-strip::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.35); border-radius: 6px; }
    .qs-strip-label {
      font-size: 0.72rem; font-weight: 700;
      color: var(--text-mid);
      letter-spacing: 0.1em; text-transform: uppercase;
      flex-shrink: 0; align-self: center; padding-right: 4px;
    }
    .qs-chip {
      flex-shrink: 0;
      padding: 8px 14px;
      background: var(--surface-2);
      color: var(--text-bright);
      border: 1px solid var(--border);
      border-radius: 22px;
      font-size: 0.84rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.12s, background 0.12s, transform 0.06s;
    }
    .qs-chip:hover { border-color: rgba(212,175,55,0.45); background: rgba(212,175,55,0.08); }
    .qs-chip.active { background: linear-gradient(135deg,#d4af37,#b8960c); color: #0a0a0f; border-color: #d4af37; }
    /* When a chip is active, show a small × hint on hover so the user knows
       clicking again clears it — discoverable affordance for the toggle-off. */
    .qs-chip.active::after { content: ' ✕'; opacity: 0.55; margin-left: 4px; font-size: 0.78rem; }
    .qs-chip--clear { background: transparent; color: var(--text-mid); border-style: dashed; }
    /* Drawer-version of the chip strip: wraps onto multiple rows instead of
       horizontal scroll, since the drawer is narrow (~540px) and we want
       all presets visible at a glance, not hidden off-screen. */
    .qs-strip--drawer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .qs-strip--drawer .qs-chip { flex: 0 0 auto; white-space: nowrap; }
    [data-theme="light"] .qs-chip { background: #fff; }
    [data-theme="light"] .qs-chip.active { background: linear-gradient(135deg,#a07820,#7a5a10); color: #fff; }

    /* Compact filter bar. Not sticky — the site header is already sticky
       and stacking two sticky bars causes overlap on shorter viewports. */
    .fbar {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 12px;
    }
    .fbar-search-row { margin-bottom: 10px; }
    .fbar-search-row input {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-1);
      color: var(--text-bright);
      font-size: 0.96rem;
      font-family: inherit;
    }
    .fbar-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr) auto;
      gap: 8px;
      align-items: stretch;
    }
    .fbar-row select {
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-1);
      color: var(--text-bright);
      font-size: 0.92rem;
      font-family: inherit;
      cursor: pointer;
      width: 100%;            /* fill the grid track so the rounded corners don't get cropped */
      min-width: 0;            /* allow native selects to shrink inside the cell on mobile */
      max-width: 100%;
      box-sizing: border-box;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .fbar-all {
      padding: 10px 18px;
      background: var(--gold);
      color: #0a0a0f;
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background 0.12s;
    }
    .fbar-all:hover { background: #c49f2a; }
    .fbar-all-count {
      background: rgba(10,10,15,0.18);
      color: #0a0a0f;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 10px;
    }
    .fbar-all-count[hidden] { display: none; }
    [data-theme="light"] .fbar-all { background: #a07820; color: #fff; }
    [data-theme="light"] .fbar-all:hover { background: #7a5a10; }
    [data-theme="light"] .fbar-all-count { background: rgba(255,255,255,0.25); color: #fff; }
    @media (max-width: 740px) {
      .fbar-row { grid-template-columns: 1fr 1fr; }
      .fbar-all { grid-column: 1 / -1; justify-content: center; padding: 11px 14px; }
    }

    /* Result toolbar — sits above the listings grid; combines result count,
       sort dropdown, and view-mode buttons (Map / Saved / Compare). */
    .result-toolbar {
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap; margin-bottom: 14px;
    }
    .result-toolbar-status {
      flex: 1; min-width: 0;
      font-size: 0.92rem; font-weight: 600;
      color: var(--text-bright);
    }
    .result-toolbar-status-sub {
      display: block;
      font-size: 0.78rem; font-weight: 500;
      color: var(--text-mid);
      margin-top: 2px;
    }
    .result-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .result-toolbar-actions select,
    .result-toolbar-actions button {
      padding: 8px 32px 8px 14px;
      background: var(--surface-2);
      color: var(--text-bright);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.84rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      min-width: 140px;
    }
    .result-toolbar-actions button { padding: 8px 14px; min-width: 0; }
    .result-toolbar-actions select {
      appearance: none; -webkit-appearance: none; -moz-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }
    /* Force option text colors — browsers ignore CSS color on <option>
       inheritance, so we set both the select AND option explicitly. */
    .result-toolbar-actions select option { background: var(--surface-2); color: var(--text-bright); }
    .result-toolbar-actions select:hover,
    .result-toolbar-actions button:hover { border-color: rgba(212,175,55,0.5); }
    .result-toolbar-actions select:focus { border-color: rgba(212,175,55,0.7); }
    .result-toolbar-actions select:focus:not(:focus-visible) { outline: none; }
    /* Light-theme overrides — vars are right, but the SVG arrow + option
       colors need explicit values because the SVG is hardcoded gold and
       <option> ignores inherited color in most browsers. */
    [data-theme="light"] .result-toolbar-actions select {
      background-color: #fff; color: #1a1208;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a07820' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
    [data-theme="light"] .result-toolbar-actions select option { background: #fff; color: #1a1208; }
    [data-theme="light"] .result-toolbar-actions button { background: #fff; color: #1a1208; }
    @media (max-width: 600px) {
      .result-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
      .result-toolbar-actions {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
      }
      .result-toolbar-actions select,
      .result-toolbar-actions button { flex-shrink: 0; font-size: 0.82rem; padding: 7px 11px; }
    }

    /* All-filters drawer modal. z-index must clear the mobile-sticky-bar
       (z:490) and the chat FAB (z:9999) so the drawer overlay covers
       both when open. */
    .drawer { position: fixed; inset: 0; z-index: 10000; display: none; }
    /* Hide the chat FAB while the drawer is open so it doesn't float
       above the drawer's backdrop. */
    body.drawer-open #emon-chat-btn { display: none !important; }
    .drawer[open], .drawer.open { display: block; }
    .drawer-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.62);
      animation: drawer-fade 0.18s ease-out;
    }
    .drawer-panel {
      position: absolute; right: 0; top: 0; bottom: 0;
      width: min(540px, 100%);
      background: var(--surface-1);
      border-left: 1px solid var(--border);
      display: flex; flex-direction: column;
      animation: drawer-slide 0.22s ease-out;
      box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    }
    [data-theme="light"] .drawer-panel { background: #f5efe2; }
    @keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes drawer-slide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .drawer-header h3 {
      margin: 0; font-family: var(--font-serif);
      font-size: 1.3rem; color: var(--text-bright);
    }
    .drawer-close {
      background: transparent; border: none;
      color: var(--text-mid); font-size: 1.8rem;
      cursor: pointer; padding: 0 8px; line-height: 1;
    }
    .drawer-close:hover { color: var(--text-bright); }
    .drawer-body {
      flex: 1; overflow-y: auto;
      padding: 18px 22px 24px;
    }
    .drawer-footer {
      display: flex; gap: 8px; align-items: center;
      padding: 14px 22px;
      border-top: 1px solid var(--border);
      background: var(--surface-2);
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .drawer-footer .drawer-footer-spacer { flex: 1; min-width: 4px; }
    .drawer-footer button {
      padding: 10px 16px;
      background: transparent;
      color: var(--text-bright);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.86rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }
    .drawer-footer button:hover { border-color: rgba(212,175,55,0.5); }
    .drawer-footer button.primary {
      background: var(--gold);
      color: #0a0a0f;
      border-color: var(--gold);
      padding: 11px 22px;
      font-weight: 700;
    }
    .drawer-footer button.primary:hover { background: #c49f2a; }
    [data-theme="light"] .drawer-footer button.primary { background: #a07820; color: #fff; border-color: #a07820; }
    @media (max-width: 600px) {
      .drawer-panel { width: 100%; }
      .drawer-header { padding: 14px 16px; }
      .drawer-body { padding: 14px 16px 20px; }
      .drawer-footer { padding: 12px 16px; }
    }
    /* When drawer is open, lock body scroll */
    body.drawer-open { overflow: hidden; }

    /* ════════════════════════════════════════════════════════════════════
       Filter-bar segments (.fg-*) — lightweight labeled groups for the
       primary + advanced dropdown rows. Each group gets a small uppercase
       label so users can tell at a glance which filter belongs to what.
    ════════════════════════════════════════════════════════════════════ */
    .fg-section + .fg-section { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
    .fg-label {
      display: block;
      font-size: 0.7rem; font-weight: 700;
      color: var(--text-mid);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .fg-label .fg-icon { margin-right: 4px; font-weight: normal; letter-spacing: 0; }
    .fg-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
    }
    .fg-row--narrow { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    [data-theme="light"] .fg-label { color: #6a5e48; }
    /* Toolbar row sitting between the always-visible filters and the advanced
       reveal — framed background so it reads as a divider/toolbar, not as
       another filter row competing for attention. */
    .filter-toolbar {
      display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
      margin-top: 14px; padding: 10px 12px;
      background: rgba(0,0,0,0.18);
      border: 1px solid var(--border);
      border-radius: 9px;
    }
    [data-theme="light"] .filter-toolbar { background: rgba(0,0,0,0.04); }
    .filter-toolbar .ft-spacer { flex: 1; min-width: 4px; }
    .ft-btn {
      padding: 8px 14px;
      background: transparent;
      color: var(--text-bright);
      border: 1px solid var(--border);
      border-radius: 7px;
      font-size: 0.84rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }
    .ft-btn:hover { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.06); }
    .ft-btn--primary {
      color: var(--gold);
      border-color: var(--gold);
    }
    .ft-btn--primary:hover { background: rgba(212,175,55,0.13); }
    @media (max-width: 600px) {
      .filter-toolbar { padding: 8px 10px; }
      .ft-btn { padding: 7px 11px; font-size: 0.8rem; }
      .ft-spacer { display: none; }
    }

    /* ════════════════════════════════════════════════════════════════════
       Quick-filter board (.qf-*) — 3 segmented cards (Status / Features /
       Lifestyle). Each card has a colored top accent strip + header icon
       so the groups are scannable at a glance.
    ════════════════════════════════════════════════════════════════════ */
    .qf-board {
      display: grid;
      grid-template-columns: 1fr 2fr 1.2fr;
      gap: 12px;
      margin-bottom: 14px;
    }
    /* qf-board lives inside the All Filters drawer (~540px wide), so the
       3-column desktop grid above overflows the drawer panel. Inside the
       drawer, stack the three cards vertically regardless of viewport width
       — they read clearly top-to-bottom and never get clipped. */
    .drawer .qf-board { grid-template-columns: 1fr; }
    .qf-card {
      position: relative;
      /* Nested inside the surface-2 filter shell — go one level deeper (surface-1)
         so each card reads as a distinct sub-component. */
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px 14px;
      overflow: hidden;
    }
    [data-theme="light"] .qf-card { background: #fff; }
    /* Top accent strip — different color per group, brand-aligned */
    .qf-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
    }
    .qf-card--status::before    { background: linear-gradient(90deg, #ef4444, #f59e0b); }
    .qf-card--lot::before       { background: linear-gradient(90deg, #16a34a, #84cc16); }
    .qf-card--interior::before  { background: linear-gradient(90deg, #d4af37, #f5d77f); }
    .qf-card--comfort::before   { background: linear-gradient(90deg, #f97316, #fb923c); }
    .qf-card--parking::before   { background: linear-gradient(90deg, #6366f1, #a78bfa); }
    .qf-card--building::before  { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
    .qf-card--lifestyle::before { background: linear-gradient(90deg, #ec4899, #f9a8d4); }
    .qf-card-header {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 10px;
    }
    .qf-card-icon { font-size: 1.05rem; line-height: 1; }
    .qf-card-title {
      font-size: 0.78rem; font-weight: 700;
      color: var(--text-bright);
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .qf-card-count {
      font-size: 0.66rem; font-weight: 700;
      background: var(--gold); color: #0a0a0f;
      padding: 2px 8px; border-radius: 10px;
      margin-left: auto;
      letter-spacing: 0.04em;
    }
    [data-theme="light"] .qf-card-count { background: #a07820; color: #fff; }
    .qf-card-pills {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .qf-toggle {
      padding: 7px 12px;
      background: rgba(255,255,255,0.04);
      color: var(--text-bright);
      border: 1px solid var(--border);
      border-radius: 18px;
      font-size: 0.82rem;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s;
    }
    .qf-toggle:hover { border-color: rgba(212,175,55,0.5); }
    .qf-toggle.active {
      background: linear-gradient(135deg, #d4af37, #b8960c);
      color: #0a0a0f;
      border-color: #d4af37;
      box-shadow: 0 2px 8px rgba(212,175,55,0.35);
    }
    [data-theme="light"] .qf-toggle { background: #fff; }
    [data-theme="light"] .qf-toggle.active {
      background: linear-gradient(135deg, #a07820, #7a5a10);
      color: #fff;
      border-color: #7a5a10;
      box-shadow: 0 2px 8px rgba(160,120,32,0.35);
    }
    /* Tablet: features card spans full width below the other two */
    @media (max-width: 1000px) {
      .qf-board {
        grid-template-columns: 1fr 1fr;
      }
      .qf-card--features { grid-column: 1 / -1; }
    }
    /* Phone: stack all three vertically */
    @media (max-width: 640px) {
      .qf-board {
        grid-template-columns: 1fr;
      }
      .qf-card--features { grid-column: auto; }
      .qf-card { padding: 10px 12px 12px; }
      .qf-card-pills { gap: 5px; }
      .qf-toggle { font-size: 0.8rem; padding: 6px 11px; }
    }

    /* ── MLS search mobile polish ───────────────────────────────────── */
    @media (max-width: 600px) {
      /* Prevent iOS from auto-zooming on focused inputs (which can break layout).
         16px is the smallest size iOS won't zoom on. */
      #mlsFilterQ, #mlsFilterMinPrice, #mlsFilterMaxPrice,
      #mlsFilterCity, #mlsFilterType, #mlsFilterBeds, #mlsFilterBaths,
      #mlsFilterSort, #mlsFilterSqft, #mlsFilterAge, #mlsFilterGarage,
      #mlsFilterNewWithin { font-size: 16px !important; }
      /* Persona preset chips: keep on one line, scroll horizontally */
      .mls-presets-row { flex-wrap: nowrap !important; }
      .mls-preset { flex-shrink: 0; white-space: nowrap; }
      /* Map view: reduce height so it doesn't dominate the viewport */
      #mlsMap { height: 480px !important; }
      /* Active filter chips: smaller font, tighter padding */
      #mlsActiveChips button { font-size: 0.74rem !important; padding: 5px 10px !important; }
      /* Cards: ensure they're not too cramped */
      #mlsGrid { grid-template-columns: 1fr !important; }
    }
    @media (min-width: 601px) and (max-width: 900px) {
      #mlsGrid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    /* Recently-viewed strip horizontal scroll on phones */
    @media (max-width: 600px) {
      #mlsRecentRow > a { flex: 0 0 160px !important; }
    }

    /* Chat FAB position is now draggable globally (see js/chat.js) — no
       per-page overrides needed. Users move it themselves if it covers
       something they care about, and the position persists via
       localStorage across pages. */
  
/* ── Phone nav wordmark: keep the brokerage VISIBLE ────────────────────────
 * At <=480px the nav wordmark was `white-space:nowrap; overflow:hidden`, so
 * "Stampede Realty / by Mohammad Emon · KO Realty" clipped to "Stampe / BY Moh".
 * The brokerage disappeared entirely, which is exactly what RECA's prominence
 * requirement forbids, and it was WORSE than the "by KO R" it replaced.
 *
 * There is no font size at which "Stampede Realty" and "Mohammad Emon · KO
 * Realty" both fit on single lines in the ~105px the nav leaves at 360px while
 * staying legible. So on phones the licensee and the brokerage stack instead of
 * sharing a line: three short lines, all identical size, weight and colour, so
 * prominence is equal and nothing is clipped away.
 */
@media (max-width: 480px) {
  .nav-logo .nav-logo-name {
    font-size: 0.82rem !important;
    line-height: 1.24;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* Drop the middle dot and put the brokerage on its own line. */
  .nav-logo .nav-logo-name .wm-sep { display: none; }
  .nav-logo .nav-logo-name .wm-brok { display: block; }
  /* THE HEADER WORDMARK IS THE MARK ALONE ON PHONES.
     The comment above is right that no size fits both names in ~105px. What it
     settled for was a wrap, and the wrap fell inside the licensee: at 390px the
     lockup rendered as FOUR lines with "Mohammad / Emon" split across two of
     them. Forbidding the break only turned that into a clipped "Mohammad En" at
     360px — a truncated name reads as broken software, which is worse than
     either.

     The names are not lost by hiding them here. The page masthead sits ~90px
     below this and carries all three at full size and equal weight, which is
     where the RECA prominence requirement is actually satisfied; the sitewide
     brokerage line enforced by ensure-reca-line.js is further down again. This
     header duplicate was a third copy, in the one place with no room for it.

     So on phones the header carries the mark and nothing else, and the identity
     is stated once, properly, where there is space to state it. */
  .nav-logo .nav-logo-name { display: none; }
  .nav-logo > img { width: 42px !important; height: 42px !important; }
  /* The inline width:52px !important was removed from the markup so this can
     finally apply; it frees 14px of horizontal room for the wordmark. */
  .nav-logo > img { width: 38px !important; height: 38px !important; }
}

/* ─────────────────────────────────────────────────────────────────────
 * DESKTOP (>1280px): the wordmark yields to the nav links.
 *
 * WHY
 * .nav-links is display:none at and below 1280px, so from 1281px up the
 * header suddenly has to hold three things in the 1180px container: the
 * wordmark lockup (416px at its natural width), the desktop link row
 * (930px) and the theme toggle (44px). That is 1390px of content in
 * 1132px of usable nav width.
 *
 * .nav-inner is flex-wrap:nowrap, so the overflow was resolved by
 * shrinking the one flex item that could shrink — the wordmark — until
 * "by Mohammad Emon · KO Realty" wrapped onto four lines. That made
 * .nav-logo 130px tall, the fixed .site-header 153px tall, and buried the
 * top of the page under it. Measured, not guessed: scripts/check-layout.js
 * flagged listings.html at 1440x900.
 *
 * The wordmark is the right thing to drop rather than the links: below
 * 1281px the links are already hidden and the wordmark shows in full, and
 * the licensee and brokerage are still named on this page in the H1, the
 * footer and the mark's alt text.
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1281px) {
  .site-header .nav-logo-text { display: none; }
  /* Never let the lockup be the thing that shrinks — if a future nav gets
     wide again this should overflow visibly rather than silently wrap the
     header to double height. Scoped to desktop on purpose: below 1281px the
     phone rules above deliberately allow the wordmark to shrink and clip. */
  .site-header .nav-logo { flex-shrink: 0; }
}