/* The IDX search and listing pages. Brand tokens, header, footer and the listing-page classes
   (.lp-*) come from site.css and listing.css -- exact copies of marketing/weaverrealty-site/assets,
   kept identical by test_idx_search (TheSiteDesign). Only what those two files do not have lives
   here: the search band, the result cards, and the full-screen photo viewer. */

/* ---- The search band ---- */
.sx-head { background: var(--ink); color: #fff; padding: 34px 0 26px; }
.sx-head h1 { margin: 0 0 16px; font-size: clamp(28px, 3.6vw, 42px); text-transform: uppercase; }
.sx-form { display: grid; gap: 10px; grid-template-columns: 2.2fr repeat(3, 1fr) auto; align-items: end; }
.sx-form .sx-drawer label, .sx-drawer label { color: var(--ink); }
.sx-form label { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0 0 5px; }
.sx-form input, .sx-form select {
  width: 100%; padding: 12px 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 0; border-radius: 2px; }
.sx-form input:focus, .sx-form select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.sx-form button, .sx-ai button { font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 16px; padding: 12px 26px; border: 0; border-radius: 2px;
  background: var(--gold); color: #000; cursor: pointer; }
.sx-more { grid-column: 1 / -1; color: rgba(255,255,255,.8); font-size: 14px; }
.sx-more summary { cursor: pointer; list-style: none; display: inline-block; padding: 4px 0;
  color: var(--gold); font-weight: 600; }
.sx-more summary::-webkit-details-marker { display: none; }
.sx-more__grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.sx-tabs { display: flex; gap: 8px; margin: 18px 0 0; flex-wrap: wrap; }
.sx-tabs a { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .05em;
  font-size: 14px; padding: 7px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px;
  text-decoration: none; color: #fff; }
.sx-tabs a.on { background: var(--gold); border-color: var(--gold); color: #000; }
.sx-join { margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,.75); }
.sx-join a { color: var(--gold); }

/* ---- Results ---- */
.sx-body { padding: 26px 0 64px; min-height: 50vh; }
.sx-count { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--muted); font-size: 14.5px; margin: 0 0 16px; }
.sx-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.sx-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s; }
.sx-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.12); transform: translateY(-2px); }
.sx-ph { position: relative; aspect-ratio: 4 / 3; background: #ded8cd; overflow: hidden; }
.sx-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-badge { position: absolute; left: 10px; top: 10px; background: rgba(18,17,15,.82); color: #fff;
  font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 12px;
  padding: 4px 10px; border-radius: 2px; }
.sx-badge--gold { background: var(--gold); color: #000; }
.sx-n { position: absolute; right: 10px; bottom: 10px; background: rgba(18,17,15,.65); color: #fff;
  font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.sx-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sx-price { font-family: Oswald, sans-serif; font-weight: 600; font-size: 25px; line-height: 1.15; }
.sx-facts { font-size: 15px; }
.sx-addr { font-size: 15px; color: var(--muted); }
/* 18.3.3 / 19.18: the listing firm at the size of the listing facts, never smaller. */
.sx-firm { font-size: 15px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); }
.sx-empty { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px; padding: 26px; }
.sx-pager { display: flex; gap: 12px; justify-content: center; align-items: center; margin: 34px 0 0; }
.sx-pager a { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; padding: 11px 22px; border: 1px solid var(--ink); border-radius: 2px; }
.sx-pager a:hover { background: var(--ink); color: #fff; }
.sx-pager span { color: var(--muted); font-size: 14px; }

/* ---- Listing page additions ---- */
.lp-crumb { margin: 18px 0 14px; font-size: 14px; }
.lp-crumb a { color: var(--muted); text-decoration: none; }
.lp-crumb a:hover { color: var(--ink); }
/* Previous / the whole list / Next, on a listing opened from a texted link (pages.steps_nav). */
.lp-steps { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; }
.lp-steps a, .lp-steps span { font: 600 14px/1 "Open Sans", sans-serif; text-decoration: none; padding: 11px 16px;
  border-radius: 999px; border: 1px solid var(--line, #d9d3c6); color: var(--ink); background: #fff; white-space: nowrap; }
.lp-steps .lp-steps__list { margin: 0 auto; text-align: center; }
.lp-steps small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.lp-steps .is-off { opacity: .35; }
.lp-firmline { font-size: 15px; color: rgba(255,255,255,.86); margin: 10px 0 0; }
.lp-status { display: inline-block; background: var(--gold); color: #000; font-family: Oswald, sans-serif;
  text-transform: uppercase; letter-spacing: .05em; font-size: 13px; padding: 3px 10px;
  border-radius: 2px; margin-bottom: 10px; }
.lp-stage { cursor: zoom-in; }
.lp-county { background: #fff; border: 1px solid rgba(0,0,0,.09); border-left: 4px solid var(--gold);
  border-radius: 3px; padding: 18px 20px; }
.lp-county h2 { margin: 0 0 4px; }
.lp-county .lp-spec { margin-top: 12px; }
.lp-src { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.lp-msg { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px; padding: 26px;
  margin: 34px 0 60px; }

/* ---- The full-screen photo viewer ---- */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(10,10,9,.96); display: none;
  align-items: center; justify-content: center; }
.lb.is-open { display: flex; }
.lb img { max-width: 94vw; max-height: 86vh; object-fit: contain; display: block; }
.lb__btn { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%; font-size: 32px; line-height: 1; display: grid;
  place-items: center; }
.lb__btn:hover { background: rgba(255,255,255,.24); }
.lb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb__close { right: 18px; top: 18px; font-size: 28px; }
.lb__count { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: #fff;
  font-size: 14px; letter-spacing: .04em; }
body.lb-on { overflow: hidden; }

@media (max-width: 900px) {
  .sx-form { grid-template-columns: 1fr 1fr; }
  .sx-form .sx-kw { grid-column: 1 / -1; }
  .sx-form .sx-go { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .lb__prev, .lb__next { width: 44px; height: 44px; font-size: 28px; }
  .lb__prev { left: 8px; } .lb__next { right: 8px; }
}

/* ---- Sign up, sign in, terms, account: the forms on the site's paper background ---- */
.auth { max-width: 620px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px;
  padding: 28px 30px; }
.auth h1 { font-size: 24px; margin: 0 0 12px; }
.auth label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
.auth input[type=text], .auth input[type=email], .auth input[type=tel] { width: 100%; padding: 11px 12px;
  font: inherit; font-size: 16px; border: 1px solid rgba(0,0,0,.18); border-radius: 2px; }
.auth input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.auth button { margin-top: 18px; font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 16px; padding: 12px 26px; border: 0; border-radius: 2px;
  background: var(--gold); color: #000; cursor: pointer; }
.auth .bad { color: #8a2318; }
.auth .note { color: var(--muted); font-size: 14px; }
.auth pre { white-space: pre-wrap; font: inherit; font-size: 15px; }
.auth a { color: #8a6a1f; }

/* ---- The phone menu (Will, 2026-10-26). Pure CSS: a hidden checkbox and its label, so it works
   with no script and under a no-inline-script policy. Phones and iPads (to 900px); desktop unchanged. ---- */
.nav__t { position: absolute; opacity: 0; pointer-events: none; }
.nav__burger { display: none; margin-left: auto; cursor: pointer; color: #fff; font-size: 30px;
  line-height: 1; padding: 6px 4px; user-select: none; }
@media (max-width: 900px) {
  .nav__inner { flex-wrap: wrap; gap: 0; padding: 12px 0; }
  .nav__burger { display: block; }
  .nav__links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0;
    margin: 10px 0 4px; border-top: 1px solid rgba(255,255,255,.14); }
  .nav__links a { padding: 13px 2px; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav__links .btn { margin-top: 12px; text-align: center; border-bottom: 0; }
  .nav__t:checked ~ .nav__links { display: flex; }
  .nav__t:checked ~ .nav__burger { color: var(--gold); }
}

/* ---- Cards dropped into the site's own pages (/idx/<tenant>/cards) ---- */
.sx-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.sx-slot:empty::before { content: "Loading listings\2026"; color: var(--muted); font-size: 14px; }

/* ---- Listing page, 2026-10-26: share, map, rooms, open houses, calculator, the agent card ---- */
.lp-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; }
.lp-share span { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; color: rgba(255,255,255,.6); margin-right: 4px; }
.lp-share a, .lp-share button { font: inherit; font-size: 13.5px; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.3); background: transparent; border-radius: 2px; padding: 6px 12px;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lp-share a:hover, .lp-share button:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.lp-map { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #e8e4dc; }
.lp-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-rooms { width: 100%; border-collapse: collapse; font-size: 15px; }
.lp-rooms th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; padding: 0 0 8px; border-bottom: 1px solid rgba(0,0,0,.12); }
.lp-rooms td { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.lp-oh ul { list-style: none; padding: 0; margin: 0; }
.lp-oh li { background: #fff; border: 1px solid rgba(0,0,0,.08); border-left: 4px solid var(--gold);
  border-radius: 3px; padding: 12px 16px; margin: 0 0 8px; }
.lp-calc { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px; padding: 20px 22px; }
.lp-calc__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lp-calc label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lp-calc input, .lp-calc select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  font: inherit; font-size: 16px; border: 1px solid rgba(0,0,0,.18); border-radius: 2px; background: #fff; }
.lp-calc__out { font-size: 18px; margin: 16px 0 0; }
.lp-calc__total { font-family: Oswald, sans-serif; font-size: 28px; color: var(--ink); }
.lp-calc__pi { display: block; font-size: 13.5px; color: var(--muted); }
.lp-cta .btn { display: block; text-align: center; margin: 0 0 10px; }
.lp-cta .btn--line { border: 1px solid var(--ink); color: var(--ink); }
.lp-cta .btn--line:hover { background: var(--ink); color: #fff; }
.lp-agent__listedby { background: var(--paper); border-left: 3px solid var(--gold); padding: 10px 12px;
  font-size: 14px; margin: 0 0 14px; }
.lp-agent__email { font-size: 14px; color: var(--muted); text-align: center; margin: -2px 0 12px;
  word-break: break-all; }

/* ---- WSW off-market homes, above the MLS results ---- */
.sx-om { margin: 0 0 34px; padding: 0 0 30px; border-bottom: 1px solid rgba(0,0,0,.1); }
.sx-om h2 { margin: 0 0 6px; }
.sx-om__lede { color: var(--muted); margin: 0 0 18px; }
.sx-card--om { border-color: rgba(201,162,75,.6); }

/* Columns never grow past the screen: a 1fr track is as wide as its longest word, and on a phone
   an email address or a features list pushed the page wider than the glass (2026-10-26). */
.lp-body > * { min-width: 0; }
@media (max-width: 820px) { .lp-body { grid-template-columns: minmax(0, 1fr); } }

/* On a phone the agent's card is far below the photos, so the two things a visitor wants -- a
   tour and a call -- ride along at the bottom of the screen. */
.lp-mbar { display: none; }
@media (max-width: 820px) {
  .lp-mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(18,17,15,.96);
    box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
  .lp-mbar a { flex: 1; text-align: center; font-family: Oswald, sans-serif; text-transform: uppercase;
    letter-spacing: .04em; font-size: 14px; padding: 12px 8px; border-radius: 2px; text-decoration: none; }
  .lp-mbar .go { background: var(--gold); color: #000; }
  .lp-mbar .call { border: 1px solid rgba(255,255,255,.4); color: #fff; }
  body:has(.lp-mbar) .foot { padding-bottom: 96px; }
}
/* listing.css gives .lp-map a fixed height (and 260px on phones); with an aspect ratio that made
   the browser derive the WIDTH from the height -- 604px, wider than a phone. Height follows width. */
@media (max-width: 720px) { .lp-map { height: auto; } }

/* ==== Search bar v2 (2026-10-26): Classic | AI, the All-filters drawer, applied-filter chips ==== */
.sx-lab { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0 0 5px; }
.sx-modes { display: inline-flex; margin: 0 0 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; overflow: hidden; }
.sx-mode { position: absolute; opacity: 0; pointer-events: none; }
.sx-modes label { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 15px;
  padding: 9px 18px; cursor: pointer; color: rgba(255,255,255,.8); margin: 0; }
.sx-mode:checked + label { background: var(--gold); color: #000; }
.sx-mode:focus-visible + label { outline: 2px solid #fff; outline-offset: -3px; }
.sx-new { font-size: 10px; letter-spacing: .08em; padding: 1px 5px; border-radius: 2px; background: #000; color: var(--gold); vertical-align: 2px; }
.sx-mode:not(:checked) + label .sx-new { background: var(--gold); color: #000; }
/* One row at a time; a browser without :has() shows both, which still works. */
.sx-bar:has(#sxm-c:checked) .sx-ai { display: none; }
.sx-bar:has(#sxm-ai:checked) .sx-form { display: none; }
.sx-go { display: flex; gap: 8px; }
.sx-allbtn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 2px; color: #fff; text-decoration: none;
  font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.sx-allbtn:hover { border-color: var(--gold); color: var(--gold); }
.sx-on { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--gold);
  color: #000; font-size: 12px; font-weight: 700; text-align: center; font-family: 'Open Sans', sans-serif; }

.sx-ai__row { display: flex; gap: 8px; }
.sx-ai__row input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 14px 16px; border: 0; border-radius: 2px; background: #fff; color: var(--ink); }
.sx-ai__row input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.sx-ai__row button { white-space: nowrap; }
.sx-ai__eg { margin: 10px 0 0; font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.7; }
.sx-ai__eg a { color: var(--gold); }
.sx-note { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(208,157,74,.14); font-size: 14px; color: #fff; }

.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; align-items: center; }
.sx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font-size: 13.5px; line-height: 1.2; }
.sx-chip span { opacity: .7; font-size: 16px; }
.sx-chip:hover { background: rgba(255,255,255,.22); }
.sx-chips__clear { color: var(--gold); font-size: 13.5px; margin-left: 4px; }

/* The drawer: a panel from the right on a desktop, the whole screen on a phone. Opened by the
   #sx-all link (CSS :target), so it needs no script; Back or the X closes it. */
.sx-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.sx-drawer:target { visibility: visible; pointer-events: auto; }
.sx-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; }
.sx-drawer:target .sx-scrim { opacity: 1; }
.sx-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: #fff;
  color: var(--ink); display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1); box-shadow: -12px 0 40px rgba(0,0,0,.25); }
.sx-drawer:target .sx-drawer__panel { transform: none; }
.sx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.08); }
.sx-drawer__head h2 { margin: 0; font-size: 22px; text-transform: uppercase; }
.sx-x { font-size: 32px; line-height: 1; text-decoration: none; color: var(--ink); padding: 0 6px; }
.sx-drawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 20px 20px; }
.sx-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(0,0,0,.08); background: #fff; }
.sx-drawer__foot a { color: var(--ink); font-size: 14.5px; }
.sx-drawer__foot button { flex: 1; max-width: 260px; }
.sx-sec { padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.sx-sec h3 { margin: 0 0 12px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.sx-grp summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.sx-grp summary::-webkit-details-marker { display: none; }
.sx-grp summary h3 { margin: 0; flex: 1; }
.sx-grp summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); }
.sx-grp[open] summary::after { content: "\2212"; }
.sx-grp[open] summary { margin-bottom: 12px; }
.sx-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.sx-f label { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.sx-f input, .sx-f select { width: 100%; padding: 11px 10px; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: 2px; }
.sx-chks { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chk { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.sx-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-chk span { display: inline-block; padding: 8px 13px; border: 1px solid rgba(0,0,0,.2); border-radius: 999px;
  font-size: 14px; line-height: 1.25; color: var(--ink); text-transform: none; letter-spacing: 0; }
.sx-chk input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.sx-chk input:checked + span::before { content: "\2713  "; color: var(--gold); }
.sx-chk input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.sx-drawer__foot button { font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 16px; padding: 13px 22px; border: 0; border-radius: 2px; background: var(--gold); color: #000; cursor: pointer; }
html.sx-locked, html.sx-locked body { overflow: hidden; }
.nav__n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 999px;
  background: var(--gold); color: #000; font-size: 11px; font-weight: 700; text-align: center; }
.sx-om-empty h2 { margin: 0 0 8px; }
.sx-om-empty .btn { margin: 8px 8px 0 0; }

@media (max-width: 900px) {
  .sx-go { flex-wrap: wrap; }
  .sx-go button { flex: 1 1 140px; }
  .sx-allbtn { flex: 1 1 140px; justify-content: center; }
}
@media (max-width: 560px) {
  .sx-drawer__panel { width: 100vw; }
  .sx-modes { display: flex; width: 100%; }
  .sx-modes label { flex: 1; text-align: center; padding: 10px 8px; font-size: 14px; }
  .sx-ai__row { flex-direction: column; }
  .sx-fgrid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sx-drawer__panel, .sx-scrim { transition: none; } }

/* ==== The AI search as a conversation (2026-10-26) ==== */
.sx-chat { max-width: 860px; }
.sx-thread { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; max-height: 340px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 2px 2px 4px; }
.sx-msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 15.5px; line-height: 1.45; }
.sx-msg--ai { align-self: flex-start; background: rgba(255,255,255,.1); color: #fff; border-bottom-left-radius: 4px; }
.sx-msg--ai::before { content: "WSW"; display: block; font-family: Oswald, sans-serif; font-size: 11px; letter-spacing: .1em;
  color: var(--gold); margin: 0 0 3px; }
.sx-msg--me { align-self: flex-end; background: var(--gold); color: #000; border-bottom-right-radius: 4px; }
#sx-reply { border: 1px solid rgba(208,157,74,.45); }
.sx-ai .sx-mic { flex: 0 0 auto; width: 52px; min-height: 48px; border: 1px solid rgba(255,255,255,.45); border-radius: 2px; background: transparent;
  color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sx-ai .sx-mic:hover { border-color: var(--gold); color: var(--gold); }
.sx-ai .sx-mic.on { background: #c0392b; border-color: #c0392b; color: #fff; animation: sx-pulse 1.2s ease-in-out infinite; }
@keyframes sx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.6); } 50% { box-shadow: 0 0 0 10px rgba(192,57,43,0); } }
.sx-say__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 0; min-height: 20px; }
.sx-listen { color: #ff8a7a; font-size: 14px; font-weight: 600; }
.sx-ai .sx-voice { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.7); font-family: 'Open Sans', sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.sx-ai .sx-voice[aria-pressed="true"] { color: var(--gold); }
.sx-voice[aria-pressed="true"] span::after { content: " \2014 on"; }
.sx-restart { color: var(--gold); font-size: 13.5px; margin-left: auto; }
@media (max-width: 560px) {
  .sx-ai__row { flex-direction: row; flex-wrap: wrap; }
  .sx-ai__row input { flex: 1 1 calc(100% - 60px); }
  .sx-ai__row button[type=submit] { flex: 1 1 100%; }
  .sx-msg { max-width: 90%; font-size: 15px; }
  .sx-thread { max-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .sx-ai .sx-mic.on { animation: none; } }
.sx-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.sx-typing::before { display: none; }
.sx-typing i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.75); animation: sx-dot 1.1s infinite ease-in-out; }
.sx-typing i:nth-child(2) { animation-delay: .15s; } .sx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sx-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.sx-ai button[disabled] { opacity: .75; cursor: progress; }

/* The listing firm on a search card: required nowhere on a card (18.3.3's thumbnail exemption --
   the card links to the listing page, which carries it in full), shown anyway, and kept quiet.
   Will, 2026-10-26: "really light ... by no means does it need to draw any attention". */
.sx-card .sx-firm--quiet { font-size: 12.5px; line-height: 1.35; color: rgba(18,17,15,.42); border-top: 0;
  padding-top: 8px; font-weight: 400; }
.sx-ai .sx-hear { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 5px 12px 5px 9px;
  border: 1px solid rgba(208,157,74,.6); border-radius: 999px; background: transparent; color: var(--gold);
  font: 600 13px/1 'Open Sans', sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; }
.sx-ai .sx-hear:hover { background: rgba(208,157,74,.14); }
.sx-ai .sx-hear[hidden] { display: none; }
/* One button, two states: Hear it while silent, Stop while she is talking. */
.sx-hear__i { display: inline-flex; align-items: center; }
.sx-hear__i--stop { display: none; }
.sx-ai .sx-hear.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.sx-ai .sx-hear.on:hover { background: #b98a3d; }
.sx-ai .sx-hear.on .sx-hear__i--play { display: none; }
.sx-ai .sx-hear.on .sx-hear__i--stop { display: inline-flex; }
.sx-reply__t { display: block; }

/* The hero stable gallery (idx/hero_stock.py) */
.hs-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hs-card { margin: 0; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
.hs-card img, .hs-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #ddd; }
.hs-card figcaption { padding: 10px 12px; font-size: 14.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hs-card figcaption b { font-family: Oswald, sans-serif; font-size: 18px; color: #a87a2c; }
.hs-mode { margin-left: auto; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); color: var(--muted); }
.sx-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.sx-ai .sx-tap { font: 600 14px/1.2 'Open Sans', sans-serif; text-transform: none; letter-spacing: 0; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--gold); background: var(--gold); color: #000; cursor: pointer; }
.sx-ai .sx-tap + .sx-tap { background: transparent; color: var(--gold); }

/* The map (idx/assets/map.js) */
.sx-mapbar{display:flex;justify-content:flex-end;margin:0 0 10px}
.sx-mapbtn{font:inherit;font-weight:700;font-size:14px;padding:8px 16px;border:2px solid #12110f;background:#fff;color:#12110f;border-radius:4px;cursor:pointer}
.sx-map{margin:0 0 18px}
.sx-map__tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.sx-map__tools button{font:inherit;font-size:14px;padding:8px 14px;border:1px solid #cfc8b8;background:#fff;color:#12110f;border-radius:4px;cursor:pointer}
.sx-map__tools .sx-map__go{background:#C9A24B;border-color:#C9A24B;font-weight:700}
.sx-map__clear{font-size:14px;color:#12110f}
.sx-map__hint{font-size:13px;color:#6b665e}
.sx-map__canvas{height:420px;border-radius:6px;border:1px solid #e6e1d6;z-index:0}
.sx-map.is-drawing .sx-map__canvas{cursor:crosshair}
@media (max-width:640px){.sx-map__canvas{height:340px}}

/* Map beside the results on a wide screen (idx/assets/map.js): map held on the left, homes
   scrolling on the right, the layout people know from the big portals. Phones keep the stacked
   Map button above the list. */
/* The map looks like Zillow's, not like the rest of the site (Will, 2026-10-28: "in the map, I
   want the map to look just like Zillow"): dark navy streets, red price tags, white text. The
   brand stays on everything around it. The dark is OpenStreetMap's own tiles turned through a
   filter -- a stand-in until a tile provider is chosen for go-live. */
.sx-map__canvas { background: #20283a; }
.sx-map.is-raster:not(.is-light) .leaflet-tile-pane { filter: invert(1) grayscale(1) brightness(1.4) contrast(.82) sepia(.55) hue-rotate(180deg)
  saturate(2) brightness(.62); }
.sx-pin { background: none; border: 0; }
.sx-pin span { display: block; width: 11px; height: 11px; border-radius: 50%; background: #d32f3f;
  border: 1.5px solid #fff; font-size: 0; transform: translate(-50%, -50%); box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sx-labels .sx-pin.is-tag span { position: relative; width: auto; height: auto; border: 0; border-radius: 12px;
  padding: 5px 9px; font: 700 13px/1 "Open Sans", -apple-system, sans-serif; color: #fff; background: #d32f3f;
  white-space: nowrap; transform: translate(-50%, calc(-100% - 6px)); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.sx-labels .sx-pin.is-tag span::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  border: 5px solid transparent; border-bottom: 0; border-top-color: #d32f3f; }
.sx-pin.is-lit span { background: #fff; color: #d32f3f; border-color: #d32f3f; }
.sx-labels .sx-pin.is-tag.is-lit span { transform: translate(-50%, calc(-100% - 6px)) scale(1.12); }
.sx-labels .sx-pin.is-tag.is-lit span::after { border-top-color: #fff; }
/* A finger is bigger than the drawing (Will, 2026-11-03: "make the field at which they actually
   function larger than the actual image itself... don't overdo it"). Each of these keeps its look
   and gets an invisible ring the tap still lands on: the 11px dot answers across about 31px, a
   price tag about 8px past its edge, the small round buttons out to Apple's 44px. */
.sx-pin span::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.sx-labels .sx-pin.is-tag span::before { inset: -8px -4px; border-radius: 16px; }
.sx-peek__x::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
html.lp-m .lp-back::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
html.sx-m-map .sx-map__tools button { position: relative; }
html.sx-m-map .sx-map__tools button::before { content: ""; position: absolute; inset: -5px -3px; }
.tx-tray__h button { position: relative; }
.tx-tray__h button::before { content: ""; position: absolute; inset: -12px -6px; }
.sx-pop .leaflet-popup-content-wrapper { border-radius: 14px; }
.sx-pop a { display: flex; flex-direction: column; gap: 3px; color: #12110f; text-decoration: none; }
.sx-pop strong { font-size: 16px; }
.sx-pop span { font-size: 13px; color: #6b665e; }
@media (min-width: 1100px) {
  .sx-body .wrap:has(.sx-split.is-map) { width: auto; margin: 0 16px; }
  .sx-split.is-map { display: grid; grid-template-columns: minmax(0, 1fr) min(700px, 46vw); gap: 18px;
    align-items: start; }
  .sx-split.is-map .sx-split__map { position: sticky; top: calc(var(--sx-top, 0px) + 12px);
    height: calc(100vh - var(--sx-top, 0px) - 24px); display: flex; flex-direction: column; }
  .sx-split.is-map .sx-mapbar { justify-content: flex-start; }
  .sx-split.is-map .sx-map { flex: 1; display: flex; flex-direction: column; margin: 0; min-height: 0; }
  .sx-split.is-map .sx-map__canvas { flex: 1; height: auto; min-height: 0; }
  .sx-split.is-map .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The count of homes in view, on the map (wide screens; on a phone it is the sheet's bar). */
.sx-map { position: relative; }
.sx-map__count { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 500;
  background: #12110f; color: #fff; font: 700 13px/1 "Open Sans", sans-serif; padding: 9px 14px;
  border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; white-space: nowrap; }
.sx-map__count.is-warn { background: #8a1c12; }

/* The phone (idx/assets/map.js): the map fills the screen under the header, the homes are a sheet
   dragged up from the bottom, and the full-height list is the ordinary page with a Map pill. */
.sx-sheet__bar, .sx-mappill { display: none; }
html.sx-m .sx-mapbar { display: none; }
html.sx-m:not(.sx-m-map) .sx-split__map { display: none; }
html.sx-m-map, html.sx-m-map body { overflow: hidden; overscroll-behavior: none; }
html.sx-m-map .sx-split__map { position: fixed; left: 0; right: 0; top: var(--sx-top, 0px); bottom: 0; z-index: 30; }
html.sx-m-map .sx-map { height: 100%; margin: 0; }
html.sx-m-map .sx-map__canvas { height: 100%; border: 0; border-radius: 0; }
html.sx-m-map .sx-map__tools { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 600; margin: 0; }
html.sx-m-map .sx-map__tools button, html.sx-m-map .sx-map__clear { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
html.sx-m-map .sx-map__clear { background: #fff; padding: 8px 12px; border-radius: 4px; }
html.sx-m-map .sx-map__hint { background: #fff; padding: 6px 10px; border-radius: 4px; }
html.sx-m-map .sx-split__list { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  top: var(--sx-top, 0px);          /* pinned to the header, not sized by 100dvh (Chrome on iPhone stopped it short) */
  background: #faf8f4; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(40px + env(safe-area-inset-bottom, 0px)); transition: transform .28s ease; }
html.sx-m-map[data-sheet="peek"] .sx-split__list { transform: translateY(calc(100% - 92px - env(safe-area-inset-bottom, 0px))); overflow: hidden; }
html.sx-m-map[data-sheet="half"] .sx-split__list { transform: translateY(45%); }
html.sx-m-map[data-sheet="full"] .sx-split__list { transform: none; border-radius: 0; }
html.sx-m-map .sx-split__list.is-dragging { transition: none; }
html.sx-m-map .sx-sheet__bar { display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: sticky; top: 0; z-index: 2; width: calc(100% + 32px); margin: 0 -16px 8px; padding: 9px 16px 14px;
  background: #faf8f4; border: 0; border-radius: 16px 16px 0 0; color: #12110f;
  font: 700 15px/1.2 "Open Sans", sans-serif; touch-action: none; cursor: grab; }
.sx-sheet__grip { width: 42px; height: 5px; border-radius: 3px; background: #cfc8b8; }
html.sx-m .sx-mappill:not([hidden]) { display: block; position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(22px, env(safe-area-inset-bottom)); z-index: 45; background: #12110f; color: #fff; border: 0;
  border-radius: 999px; padding: 13px 26px; font: 700 15px/1 "Open Sans", sans-serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { html.sx-m-map .sx-split__list { transition: none; } }

/* The phone's list, sheet and full page alike, is dark the way Zillow's is; the cards are rounded
   dark tiles with white type. The gold badges stay: that is the brand on the cards. */
html.sx-m .sx-body { background: #0d0e11; color: #f2f2f4; }
html.sx-m-map .sx-split__list, html.sx-m-map .sx-sheet__bar { background: #0d0e11; color: #fff; }
html.sx-m .sx-sheet__grip { background: #5b5d66; }
html.sx-m .sx-card { background: #1d1e23; border-color: #2a2c33; color: #fff; }
html.sx-m .sx-card:hover { box-shadow: none; transform: none; }
html.sx-m .sx-ph { background: #2a2c33; }
html.sx-m .sx-addr { color: #c9cad1; }
html.sx-m .sx-card .sx-firm--quiet { color: #8e909a; }
html.sx-m .sx-count, html.sx-m .sx-pager span { color: #a9abb4; }
html.sx-m .sx-pager a { color: #fff; border-color: #fff; }
html.sx-m .sx-pager a:hover { background: #fff; color: #0d0e11; }
html.sx-m .sx-empty { color: #f2f2f4; }
html.sx-m .sx-mappill:not([hidden]) { background: rgba(72,78,92,.94); border-radius: 999px; }
html.sx-m-map .sx-map__tools button { background: #1f232c; color: #fff; border-color: #3a3f4b; }
html.sx-m-map .sx-map__tools .sx-map__go { background: #d32f3f; border-color: #d32f3f; color: #fff; }
html.sx-m-map .sx-map__clear, html.sx-m-map .sx-map__hint { background: #1f232c; color: #fff; }
.sx-map .sx-map__canvas.leaflet-container .leaflet-control-attribution { background: rgba(20,24,32,.72); color: #b8bcc6;
  font-size: 10px; line-height: 1.4; border-radius: 6px 0 0 6px; }
.sx-map .sx-map__canvas.leaflet-container .leaflet-control-attribution a { color: #d6dae3; }
html.sx-m-map .sx-map__canvas.leaflet-container .leaflet-control-attribution { max-width: 92vw; margin: 0; }
html.sx-m-map .sx-map__tools { top: 22px; gap: 6px; }
/* Smaller and higher on the phone, under the map credit (Will, 2026-11-04: "make them a little
   smaller and maybe put them a little higher ... but I need them to be visible"). */
html.sx-m-map .sx-map__tools button { font-size: 13px; padding: 5px 10px; border-radius: 6px; }
/* While a map move is searching, the count and the list dim a little. */
html.sx-searching .sx-map__count, html.sx-searching .sx-sheet__n, html.sx-searching .sx-grid { opacity: .55; transition: opacity .15s; }
.sx-map__count.is-warn { white-space: normal; max-width: 88%; text-align: center; line-height: 1.35; }
html.sx-m-map .sx-sheet__bar.is-warn .sx-sheet__n { color: #ff8a8a; font-weight: 600; text-align: center; }

/* "Edit search" on the phone's map: back to the page with the search box (the map is full screen). */
.sx-map__edit { display: none; }
html.sx-m-map .sx-map__tools .sx-map__edit { display: inline-block; }
.sx-sheet__foot { margin: 32px -16px calc(-40px - env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sx-map__canvas.is-vector, .sx-map.is-vector .sx-map__canvas { background: #45516e; }

/* The card a tapped price tag opens (map.js peekAt): photos that swipe side to side, the price and
   address that open the listing, an x. Floats over the map above the sheet's bar. */
.sx-peek { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 700; display: flex; justify-content: center; }
html.sx-m-map .sx-peek { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.sx-peek[hidden] { display: none; }
.sx-peek__card { position: relative; width: 100%; max-width: 440px; background: #1d1e23; color: #fff; border-radius: 16px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.sx-peek__ph { position: relative; aspect-ratio: 16 / 9; background: #2a2c33; }
.sx-peek__strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.sx-peek__strip::-webkit-scrollbar { display: none; }
.sx-peek__strip a { flex: 0 0 100%; scroll-snap-align: center; }
.sx-peek__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-peek__n { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px;
  padding: 4px 9px; border-radius: 999px; }
.sx-peek__n:empty { display: none; }
.sx-peek .sx-save { position: absolute; right: 12px; top: 12px; }
.sx-peek__b { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; color: #fff; text-decoration: none; }
.sx-peek__b .sx-price { font-size: 24px; }
.sx-peek__b .sx-addr { color: #c9cad1; font-size: 15px; }
.sx-peek__b .sx-firm--quiet { color: #8e909a; padding-top: 2px; }
.sx-peek__x { position: absolute; left: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.55); color: #fff; font-size: 20px; line-height: 32px; cursor: pointer; z-index: 2; }
.sx-peek__card .sx-badge { left: 50px; }
.sx-peek__err { margin: 0; padding: 14px 16px; background: #1d1e23; color: #ff8a8a; border-radius: 16px; }

/* The listing page on a phone (idx/assets/lp-phone.js): photos stacked full width and scrolled,
   the details in a sheet dragged up from the bottom, a back arrow over the photos. */
html.lp-m .lp-crumb { display: none; }
html.lp-m .lp-steps { position: fixed; z-index: 56; margin: 0; top: calc(var(--sx-top, 0px) + 12px);
  left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); gap: 8px; }
html.lp-m .lp-steps a, html.lp-m .lp-steps span { background: rgba(40,44,52,.85); color: #fff; border: 0; padding: 12px 14px; }
html.lp-m .lp-steps small { color: #c9cad1; }
html.lp-m .lp-steps .is-off { opacity: .4; }
html.lp-m .lp-show { margin: 0; }
html.lp-m .lp-stage { display: block; aspect-ratio: auto; height: auto; cursor: zoom-in; background: #000;
  border-radius: 0; width: 100vw; margin: 0 0 0 calc(50% - 50vw); }
html.lp-m, html.lp-m body { overflow-x: clip; }
html.lp-m .lp-slide { display: block; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 3px; }
html.lp-m .lp-nav, html.lp-m .lp-count, html.lp-m .lp-rail { display: none; }
html.lp-m body { padding-bottom: calc(var(--lp-peek, 160px) + var(--lp-mbar, 0px)); background: #000; }
.lp-sheet { display: none; }
html.lp-m .lp-sheet { display: block; position: fixed; left: 0; right: 0; bottom: var(--lp-mbar, 0px); z-index: 55;
  top: var(--sx-top, 0px);
  background: #0d0e11; color: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.4);
  overflow-y: auto; overscroll-behavior: contain; transition: transform .28s ease;
  transform: translateY(calc(100% - var(--lp-peek, 160px))); }
html.lp-m[data-lp="peek"] .lp-sheet { overflow: hidden; }
html.lp-m[data-lp="half"] .lp-sheet { transform: translateY(45%); }
html.lp-m[data-lp="full"] .lp-sheet { transform: none; border-radius: 0; }
html.lp-m .lp-sheet.is-dragging { transition: none; }
.lp-sheet__bar { display: flex; justify-content: center; width: 100%; padding: 9px 0 6px; background: #0d0e11; border: 0;
  position: sticky; top: 0; z-index: 2; touch-action: none; cursor: grab; border-radius: 16px 16px 0 0; }
html.lp-m .lp-sheet > .wrap { padding-bottom: 18px; }
html.lp-m .lp-sheet .lp-price { margin-top: 0; }
html.lp-m .lp-sheet .lp-body { background: var(--bg, #faf8f4); color: var(--ink, #12110f); padding-top: 24px; padding-bottom: 30px;
  width: auto; margin: 0; padding-left: 16px; padding-right: 16px; }
.lp-back { display: none; }
html.lp-m .lp-back { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 56;
  top: calc(var(--sx-top, 0px) + 12px); left: 12px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(40,44,52,.8); color: #fff; font-size: 30px; line-height: 1; text-decoration: none; padding-bottom: 3px; }
@media (prefers-reduced-motion: reduce) { html.lp-m .lp-sheet { transition: none; } }
html.lp-m .lp-mbar { background: #0d0e11; }
html.lp-m[data-lp="full"] .lp-back { display: none; }
/* In map view nothing of the page shows behind the map and the sheet. */
html.sx-m-map .sx-head, html.sx-m-map .sx-body > .wrap > :not(.sx-split):not(.sx-mappill) { visibility: hidden; }

/* Desktop with the map: Zillow's layout (Will, 2026-10-29, with Zillow's screen beside ours). The
   search bar is a slim band that stays under the site header, the map fills the rest of the
   screen on the left starting level with the list, and its buttons sit ON the map, not above it,
   so the map's top and the first row of homes line up. The list still scrolls with the page, so
   the footer's notices are where they always were. html.sx-wm is set by map.js. */
@media (min-width: 1100px) {
  html.sx-wm .sx-head { position: sticky; top: var(--sx-top, 0px); z-index: 450; padding: 12px 0 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  html.sx-wm .sx-head .wrap { width: auto; margin: 0 16px; }
  html.sx-wm .sx-head h1, html.sx-wm .sx-head .sx-join { display: none; }
  html.sx-wm .sx-head .sx-modes { margin-bottom: 8px; }
  html.sx-wm .sx-head .sx-thread { max-height: 150px; }
  html.sx-wm .sx-body { padding-top: 14px; }
  html.sx-wm .sx-split.is-map .sx-split__map { top: calc(var(--sx-top, 0px) + var(--sx-head, 0px) + 14px);
    height: calc(100vh - var(--sx-top, 0px) - var(--sx-head, 0px) - 28px); position: sticky; }
  html.sx-wm .sx-split.is-map .sx-split__map > .sx-mapbar { position: absolute; top: 10px; right: 10px; z-index: 600; margin: 0; }
  html.sx-wm .sx-split.is-map .sx-map__tools { position: absolute; top: 10px; left: 56px; z-index: 600; margin: 0; }
  html.sx-wm .sx-split.is-map .sx-mapbar button, html.sx-wm .sx-split.is-map .sx-map__tools button,
  html.sx-wm .sx-split.is-map .sx-map__clear { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
  html.sx-wm .sx-split.is-map .sx-map__canvas { border-radius: 6px; }
  html.sx-wm .sx-split.is-map .sx-count { margin-top: 0; }
}
/* The light desktop map: the dark-map dressing (blue under-colour, dark credit strip) is for the
   phone's fiord map only. */
.sx-map.is-light .sx-map__canvas { background: #f2efe9; }
.sx-map.is-light .sx-map__canvas.leaflet-container .leaflet-control-attribution { background: rgba(255,255,255,.8); color: #555; }
.sx-map.is-light .sx-map__canvas.leaflet-container .leaflet-control-attribution a { color: #333; }

/* The map card's photo arrows (map.js wirePeek): on a computer only; a phone swipes. */
.sx-peek__arr { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sx-peek__arr { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%;
    transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.92); color: #12110f; font-size: 26px; line-height: 1; padding: 0 0 3px;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); opacity: .85; transition: opacity .15s; }
  .sx-peek__arr:hover, .sx-peek__arr:focus-visible { opacity: 1; }
  .sx-peek__arr--prev { left: 10px; }
  .sx-peek__arr--next { right: 10px; }
}

/* iOS zooms the whole page when a field under 16px takes focus, and the iPhone app is this site.
   The rules above are 16px already; this catches any field added later, or styled in site.css. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* viewport-fit=cover (pages.py): the page draws edge to edge, so the header clears the clock and
   Dynamic Island itself, and stays off the notch in landscape. In the iOS app with contentInset
   "never" this is the only thing keeping the logo out of the status bar. */
.nav { padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
/* ...and the header's .wrap keeps its 4vw margins inside that padding; at 92vw it overflowed the
   padded box and sat flush on the left of the Duo's outer screen (right inset 84, left 0). */
.nav > .wrap { max-width: calc(100% - 8vw); }
/* The peeking sheet shows its bar plus the home-indicator strip; the bar fills that strip so the
   count line beneath it stays hidden until the sheet is pulled up. */
html.sx-m-map[data-sheet="peek"] .sx-sheet__bar { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* Text to agent / Text to friend (idx/assets/texts.js, playbooks/spec-text-it.md). The rows start
   hidden and texts.js shows them: without the script there is nothing to tap. */
.tx[hidden], .tx-chip[hidden] { display: none; }
html.tx-js .tx[hidden] { display: flex; }
html.tx-js .tx-chip[hidden] { display: inline-block; }
.tx { flex-wrap: wrap; align-items: center; gap: 8px; }
.tx button { font: 600 14px/1 "Open Sans", sans-serif; padding: 11px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; }
.tx .tx__agent { background: var(--gold); border-color: var(--gold); color: #12110f; }
.tx .tx__add { border: 0; padding: 11px 6px; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.tx .tx__add[aria-pressed="true"] { text-decoration: none; color: var(--gold); opacity: 1; }
.tx--peek { padding: 0 16px 16px; color: #fff; }
.tx--lp { margin: 16px 0 0; color: #fff; }
.tx--hx { margin: 14px 0 0; }
.hx-sub { margin: 4px 0 0; opacity: .8; }
.hx-gone { margin: 0 0 14px; }
/* Down in the card's own text, not on the photo by the heart (Will, 2026-11-04: "It needs to be
   down there in the black section, just like you do on the other cards"). Bottom right of the
   card; the firm line keeps clear of it. */
.tx-chip { position: absolute; right: 12px; bottom: 12px; z-index: 2; font: 600 13px/1 "Open Sans", sans-serif;
  padding: 9px 12px; border-radius: 999px; border: 1px solid currentColor; cursor: pointer; background: transparent; color: inherit; }
html.tx-js .sx-cardw .sx-firm { padding-right: 88px; }
.tx-chip[aria-pressed="true"] { background: var(--gold); color: #12110f; }

/* An agent's rows and tray (texts.js AGENT): no "Text to agent / Text to friend" -- they are the
   agent. And on a phone, none of the desktop's saved-search tools: the bar sits under a full-screen
   map where it cannot be reached anyway (Will, 2026-11-04: "we don't want that stuff on the mobile
   version"). The tray's Text to a client and Copy link are the phone's tools. */
html.tx-agent .tx .tx__agent, html.tx-agent .tx .tx__friend { display: none; }
html.tx-agent .tx .tx__add { border: 1px solid currentColor; padding: 11px 16px; text-decoration: none; }
html.sx-m .ag-bar { display: none; }
.tx-tray__go .tx-tray__client { background: var(--gold); border-color: var(--gold); color: #12110f; }

/* Text to a client: a sheet over everything, the agent's own clients by name. */
.tx-pick { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; }
.tx-pick[hidden] { display: none; }
.tx-pick__box { width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; background: #12110f; color: #fff;
  border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
@media (min-width: 700px) { .tx-pick { align-items: center; } .tx-pick__box { border-radius: 16px; } }
.tx-pick__h { display: flex; align-items: center; justify-content: space-between; font: 700 17px/1.2 "Open Sans", sans-serif; }
.tx-pick__x { position: relative; border: 0; background: transparent; color: #c9cad1; font-size: 26px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.tx-pick__x::before { content: ""; position: absolute; inset: -8px; }
.tx-pick__find[hidden], .tx-pick__made[hidden] { display: none; }
.tx-pick__find { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tx-pick__q { margin: 10px 0 8px; font: 16px/1.2 "Open Sans", sans-serif; padding: 12px 14px; border-radius: 10px; border: 1px solid #3a3c44;
  background: #1d1e23; color: #fff; width: 100%; box-sizing: border-box; }
.tx-pick__hits { list-style: none; margin: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 120px; }
.tx-pick__hits button { width: 100%; text-align: left; font: 600 16px/1.2 "Open Sans", sans-serif; padding: 14px 6px; border: 0;
  border-bottom: 1px solid #2a2c33; background: transparent; color: #fff; cursor: pointer; }
.tx-pick__hits button:disabled { opacity: .5; }
.tx-pick__msg { margin: 6px 0 0; font: 14px/1.3 "Open Sans", sans-serif; color: #a9abb4; }
.tx-pick__msg.is-bad { color: #ffb4a8; }
.tx-pick__words { width: 100%; box-sizing: border-box; margin: 12px 0 10px; font: 16px/1.35 "Open Sans", sans-serif; padding: 12px; border-radius: 10px;
  border: 1px solid #3a3c44; background: #1d1e23; color: #fff; resize: none; }
.tx-pick__act { display: flex; flex-wrap: wrap; gap: 8px; }
.tx-pick__act button { font: 600 15px/1 "Open Sans", sans-serif; padding: 13px 16px; border-radius: 999px; cursor: pointer; border: 1px solid #fff; background: transparent; color: #fff; }
.tx-pick__act .tx-pick__desk { background: var(--gold); border-color: var(--gold); color: #12110f; }
.tx-pick__note { margin: 10px 0 0; font: 13px/1.35 "Open Sans", sans-serif; color: #8e909a; }

/* The tray: what has been added, and the same two buttons for all of it. Over everything at the
   bottom, clear of the home indicator; on a listing page, above its phone bar. */
.tx-tray { position: fixed; left: 0; right: 0; bottom: var(--lp-mbar, 0px); z-index: 900; background: #12110f; color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,.25); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.tx-tray[hidden] { display: none; }
.tx-tray__list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.tx-tray__h { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 13px/1 "Open Sans", sans-serif;
  background: #2a2c33; border-radius: 999px; padding: 6px 6px 6px 10px; white-space: nowrap; }
.tx-tray__h button { border: 0; background: transparent; color: #c9cad1; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.tx-tray__go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tx-tray__n { font: 700 14px/1 "Open Sans", sans-serif; margin-right: auto; }
.tx-tray__go button { font: 600 14px/1 "Open Sans", sans-serif; padding: 11px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid #fff; background: transparent; color: #fff; }
.tx-tray__go .tx__agent { background: var(--gold); border-color: var(--gold); color: #12110f; }
.tx-tray__go .tx-tray__clear { border: 0; padding: 11px 6px; text-decoration: underline; text-underline-offset: 3px; color: #c9cad1; }
/* Homes from an earlier visit: one line, two answers, above the buttons. */
.tx-tray__earlier[hidden] { display: none; }
.tx-tray__earlier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px;
  border-radius: 10px; background: #2a2c33; font: 14px/1.3 "Open Sans", sans-serif; }
.tx-tray__earlier span { margin-right: auto; }
.tx-tray__earlier button { font: 600 14px/1 "Open Sans", sans-serif; padding: 9px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid #fff; background: transparent; color: #fff; }
.tx-tray__earlier .tx-tray__fresh { background: var(--gold); border-color: var(--gold); color: #12110f; }
html.tx-on body { padding-bottom: var(--tx-h, 0px); }
html.tx-on.sx-m-map .sx-peek { bottom: calc(80px + env(safe-area-inset-bottom, 0px) + var(--tx-h, 0px)); }
html.tx-on.sx-m-map[data-sheet="peek"] .sx-split__list {
  transform: translateY(calc(100% - 66px - env(safe-area-inset-bottom, 0px) - var(--tx-h, 0px))); }
/* A wide screen's map fills the window down to its bottom edge, so the tray would sit over the
   bottom of the map and of the card a tapped dot opens (Will, 2026-11-03: "the black bar covers
   the buttons at the bottom"). While the tray shows, the map stops above it. */
@media (min-width: 1100px) {
  html.tx-on .sx-split.is-map .sx-split__map { height: calc(100vh - var(--sx-top, 0px) - 24px - var(--tx-h, 0px)); }
  html.tx-on.sx-wm .sx-split.is-map .sx-split__map {
    height: calc(100vh - var(--sx-top, 0px) - var(--sx-head, 0px) - 28px - var(--tx-h, 0px)); }
}

/* The peeking sheet says what it is (Will, 2026-11-04: "they can't even see that it's there ...
   put a number ... slide up, something that's a little bit more intuitive than just a little
   line"): a bolder grip, the count, and "Swipe up to see them" -- the last only while it peeks. */
.sx-sheet__up { display: none; }
html.sx-m-map[data-sheet="peek"] .sx-sheet__up { display: block; margin-top: -4px; font: 600 13px/1.2 "Open Sans", sans-serif; color: #a9abb4; }
html.sx-m-map[data-sheet="peek"] .sx-sheet__up::before { content: "\2191  "; }
html.sx-m-map .sx-sheet__grip { width: 48px; height: 6px; background: #8b8e98; }
html.sx-m-map[data-sheet="peek"] .sx-sheet__n { font-size: 17px; }

/* Where am I (map.js wireMe): a round button over the map's bottom right corner -- above the
   peeking sheet on a phone, above the map credit on a wide screen. */
.sx-map__me[hidden], .sx-map__memsg[hidden] { display: none; }
.sx-map__me { position: absolute; right: 12px; bottom: 34px; z-index: 600; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: #fff; color: #1a73e8; box-shadow: 0 2px 10px rgba(0,0,0,.28); display: flex;
  align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sx-map__me.is-busy svg { animation: sx-me-pulse 1s ease-in-out infinite; }
@keyframes sx-me-pulse { 50% { opacity: .35; } }
html.sx-m-map .sx-map__me { bottom: calc(92px + 14px + env(safe-area-inset-bottom, 0px)); right: 14px; }
.sx-map__memsg { position: absolute; left: 12px; right: 72px; bottom: 34px; z-index: 600; margin: 0; padding: 10px 12px;
  background: #12110f; color: #fff; border-radius: 10px; font: 600 13px/1.35 "Open Sans", sans-serif; }
html.sx-m-map .sx-map__memsg { bottom: calc(92px + 14px + env(safe-area-inset-bottom, 0px)); }

/* Inside the desk's frame the desk's bar is below us: no home-indicator strip to pad for. */
html.sx-framed.sx-m-map[data-sheet="peek"] .sx-split__list { transform: translateY(calc(100% - 74px)); }
html.sx-framed.sx-m-map[data-sheet="peek"] .sx-sheet__bar { padding-bottom: 10px; }
html.sx-framed.sx-m-map .sx-map__me, html.sx-framed.sx-m-map .sx-map__memsg { bottom: calc(74px + 12px); }

/* Location refused: the way to Settings, in our app. */
.sx-map__memsg a.sx-map__megoto { display: inline-block; margin: 8px 10px 0 0; padding: 7px 14px; border-radius: 999px;
  background: #1a73e8; color: #fff; text-decoration: none; font-weight: 700; }
.sx-map__memsg .sx-map__meno { margin-top: 8px; padding: 7px 12px; border: 1px solid #555; border-radius: 999px;
  background: none; color: #fff; font: inherit; }

/* Every card's photos swipe (pages.py card). */
.sx-ph__strip { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sx-ph__strip::-webkit-scrollbar { display: none; }
.sx-ph__strip img { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }