/* =====================================================================================================================
   Coral home search: one stylesheet, built top-down so nothing has to be fixed page by page.

   How it stays in shape at every width (the rules every new piece follows):
   1. TOKENS   One small type scale, one spacing scale, one set of radii. Nothing else sets a font size in px.
   2. INTRINSIC LAYOUT, NOT BREAKPOINTS
               Grids of cards use repeat(auto-fill, minmax(min(100%, X), 1fr)): the number of columns comes from the room
               available, so a card is never squeezed below X. Two-part layouts (photo + text, details + side card) use
               flex-wrap with a basis, so they stack by themselves when there isn't room side by side.
   3. COMPONENTS ANSWER TO THEIR BOX, NOT THE SCREEN
               Cards, tiles and tables are inside containers (container-type: inline-size). A card in a narrow column
               turns into a row (photo left, text right, like the HouseSigma app); in a wide grid it is photo-on-top.
               Big numbers size themselves to their tile with cqi units, so "$1,836" always fits.
   4. NOTHING CAN PUSH ITS PARENT WIDER
               Every grid / flex child has min-width:0; long words break (overflow-wrap); one-line labels truncate.
   Media queries are only used for the app shell (top bar, bottom tab bar, the phone map), never inside a component.
   ===================================================================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  /* type: 12 / 13 / 14 / 16 / 18-22 / 22-30 / 30-42 */
  --sb-xs:.75rem; --sb-sm:.8125rem; --sb-base:.875rem; --sb-md:1rem;
  --sb-lg:clamp(1.125rem,1rem + .45vw,1.375rem); --sb-xl:clamp(1.375rem,1.15rem + .9vw,1.875rem); --sb-2xl:clamp(1.875rem,1.4rem + 1.9vw,2.625rem);
  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* shape */
  --sb-r:14px; --sb-r-sm:10px; --sb-r-xs:6px;
  --sb-line:#ece7df;
  --sb-bar:60px;                 /* app top bar height (sticky things sit below it) */
  --sold:#2f4f6f; --off:#5e6366; --ok:#2e7d4f;
}
@media (max-width:900px){:root{--sb-bar:54px}}

/* ---------- 2. base and safety rules ---------- */
body.sb{font-size:var(--sb-base);line-height:1.5;padding-bottom:0;touch-action:manipulation}
body.sb main{overflow-x:clip}   /* nothing can make the page wider than the screen (clip keeps sticky things working) */
body.sb .mbar{display:none}                    /* no call/text bar over the search pages */
.sb [hidden]{display:none!important}
.sb :where(.sb-grid,.sb-tiles,.sb-a-cols,.sb-lp-top,.sb-card,.sb-card-body,.sb-tile,.sb-summary,.sb-bldg,.sb-bldg-main,.sb-book,.sb-filters,.sb-results,.sb-acct-main)>*{min-width:0}
.sb :where(.sb-addr,.sb-brk,.sb-lp-addr,.sb-a-addr,.sb-bldg-name,.sb-bldg-addr,.sb-desc,.sb-factgrid b,.sb-sug-row b){overflow-wrap:anywhere}
.sb img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb-noscroll{overflow:hidden}

/* ---------- 3. primitives ---------- */
/* card grid: as many columns as fit, never narrower than --min */
.sb-grid{--min:250px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min)),1fr));gap:var(--s4);container:cards/inline-size}
.sb-grid-4{--min:210px}
.sb-grid-units{--min:190px;gap:var(--s3)}
.sb-muted{color:var(--muted)}
.sb-kicker{font:700 var(--sb-xs)/1 var(--brand);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 10px}
.sb-note,.sb-legal{font-size:var(--sb-xs);color:var(--muted)}
.sb-note{margin:10px 0 0}
.sb-legal{line-height:1.5;border-top:1px solid var(--line);padding-top:16px;margin:28px 0 0}
.sb-linkbtn{border:0;background:none;padding:0;font:600 var(--sb-sm) var(--brand);color:var(--accent-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sb-h1{font:400 var(--sb-2xl)/1.05 var(--serif);margin:0 0 var(--s4)}
.sb-h2,.sb-tile h2,.sb-tile-h h2{font:400 var(--sb-lg)/1.15 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 var(--s3)}
.sb-h1 em,.sb-h2 em,.sb-hero h1 em,.sb-row-head h2 em,.sb-res-head h1 em,.sb-dialog h2 em,.sb-market-h em,.sb-hi em{color:var(--accent-deep)}

/* buttons */
.sb-btn-deep{background:var(--accent-deep);color:#fff}
.sb-btn-deep:hover{background:#8f3329}
.sb-btn-coral{background:var(--accent);color:var(--ink);min-height:44px}
.sb-btn-sm{min-height:36px;padding:0 14px;font-size:var(--sb-sm)}
.sb-wide{width:100%}
.btn.is-busy{opacity:.6;pointer-events:none}

/* pills and segmented buttons */
.sb-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sb-pill{font:700 var(--sb-xs) var(--brand);background:var(--accent-pale);padding:5px 10px;border-radius:999px;letter-spacing:.02em}
.sb-pill-dark{background:var(--ink);color:#fff}
.sb-seg{display:inline-flex;max-width:100%;border:1px solid var(--line-strong);border-radius:999px;overflow-x:auto;scrollbar-width:none;background:#fff;font:600 var(--sb-sm) var(--brand)}
.sb-seg label{display:flex}
.sb-seg input{position:absolute;opacity:0;pointer-events:none}
.sb-seg span,.sb-seg button{display:flex;align-items:center;justify-content:center;padding:0 14px;min-height:40px;cursor:pointer;border:0;background:transparent;font:inherit;color:var(--ink);white-space:nowrap}
.sb-seg input:checked+span,.sb-seg button[aria-pressed=true],.sb-seg button[aria-selected=true]{background:var(--ink);color:#fff}
.sb-seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:-3px}
.sb-seg-sm button{min-height:36px}
.sb-seg-xs button{min-height:30px;padding:0 12px;font-size:var(--sb-xs)}
/* a row of choices that fills its width and wraps instead of overflowing (beds 1+ 2+ 3+ ...) */
.sb-seg-fill{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:6px;width:100%;border:0;border-radius:0;background:none;overflow:visible}
.sb-seg-fill button{padding:0 4px;border:1px solid var(--line-strong);border-radius:999px;background:#fff}
.sb-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sb-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--accent-pale);font:600 var(--sb-sm) var(--brand);color:var(--ink);border:1px solid rgba(166,61,49,.12)}
.sb-chip:hover{background:#f8d7cd}
/* tabs with counts (comparables, units) */
.sb-comp-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;max-width:100%}
.sb-comp-tabs::-webkit-scrollbar{display:none}
.sb-comp-tabs button{flex:none;display:flex;align-items:center;gap:6px;min-height:42px;padding:0 2px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font:700 var(--sb-base) var(--brand);color:var(--muted);cursor:pointer;white-space:nowrap}
.sb-comp-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent-deep)}
.sb-comp-tabs button:hover{color:var(--ink)}
.sb-comp-tabs span{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--paper);font-size:var(--sb-xs);display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.sb-comp-tabs button[aria-selected=true] span{background:var(--accent-deep);color:#fff}
/* pill tabs (Key facts / Description / Rooms) */
.sb-views{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.sb-views button{flex:none;border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;margin:0;font:600 var(--sb-sm)/1 var(--brand);color:var(--ink-2);background:#fff;cursor:pointer;white-space:nowrap}
.sb-views button:hover{border-color:var(--ink)}
.sb-views button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}

/* form fields */
.sb-field{display:flex;flex-direction:column;gap:5px;font-size:var(--sb-sm);color:var(--ink-2)}
.sb-field input,.sb-field textarea{min-height:46px;padding:0 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--ink);width:100%;box-sizing:border-box}
.sb-field textarea{padding:10px 14px;resize:vertical;line-height:1.45}
.sb-field :is(input,textarea):focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(239,141,125,.35)}
.sb-sel select{height:40px;padding:0 32px 0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f1e1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/11px no-repeat;-webkit-appearance:none;appearance:none;font:600 var(--sb-sm) var(--brand);color:var(--ink);cursor:pointer;max-width:100%}
.sb-check{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font:600 var(--sb-sm) var(--brand);cursor:pointer}
.sb-check input{accent-color:var(--accent-deep);width:18px;height:18px}
.sb-check-lg{border:0;padding:0;font-size:var(--sb-base)}
.sb-msg{margin:12px 0 0;font-size:var(--sb-sm);font-weight:600;color:var(--ink-2)}
.sb-msg.bad,.sb-soon{color:var(--accent-deep)}
.sb-soon{margin:4px 0 0;font-size:var(--sb-sm);font-weight:600}

/* search box + suggestions */
.sb-q{position:relative;display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--muted);flex:1 1 320px;max-width:560px;box-sizing:border-box}
.sb-q input{border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);width:100%;min-width:0}
.sb-q:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(239,141,125,.35)}
.sb-sug{position:absolute;z-index:80;top:calc(100% + 6px);left:0;cursor:default;width:min(520px,calc(100vw - 16px));max-height:min(70dvh,560px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--sb-r);box-shadow:var(--shadow-lg);padding:6px}
.sb-sug-h{margin:0;padding:10px 10px 4px;font:700 var(--sb-xs) var(--brand);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sb-sug-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:var(--sb-r-sm);cursor:pointer;color:var(--ink)}
.sb-sug-row svg{flex:none;margin-top:2px;color:var(--muted)}
.sb-sug-row span{display:flex;flex-direction:column;min-width:0}
.sb-sug-row b{font:600 var(--sb-base)/1.3 var(--sans)}
.sb-sug-row small{font-size:var(--sb-xs);color:var(--muted);line-height:1.35}
.sb-sug-row[aria-selected=true],.sb-sug-row:hover{background:var(--paper)}
.sb-sug-none{margin:0;padding:12px;font-size:var(--sb-sm);color:var(--muted)}

/* ---------- 4. the listing card (one component, two shapes) ---------- */
.sb-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.sb-card:hover,.sb-card.on{box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.sb-card.on{outline:2px solid var(--accent-deep);outline-offset:-1px}
.sb-card-link{position:absolute;inset:0;z-index:1}
.sb-card-link:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:var(--sb-r)}
.sb-ph{position:relative;aspect-ratio:4/3;background:var(--tint,#c9b8a6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center/40px no-repeat}
.sb-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sb-badge{position:absolute;left:8px;top:8px;z-index:1;font:700 var(--sb-xs) var(--brand);background:#fff;padding:4px 8px;border-radius:999px;max-width:calc(100% - 60px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-save{position:absolute;right:8px;top:8px;z-index:2;width:34px;height:34px;border-radius:999px;border:0;background:rgba(255,255,255,.92);font-size:var(--sb-md);cursor:pointer;line-height:1;color:var(--ink)}
.sb-save[aria-pressed=true]{color:var(--accent-deep)}
/* agents only (body.sb-is-staff): share this card's home with their agent link (0085) */
.sb-share-card{display:none;position:absolute;right:48px;top:8px;z-index:2;width:34px;height:34px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;padding:0}
.sb-is-staff .sb-share-card{display:flex}
.sb-ph:not(:has(.sb-save)) .sb-share-card{right:8px}
.sb-share-card:hover{color:var(--accent-deep)}
.sb-card-body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;font-size:var(--sb-sm);line-height:1.35;flex:1}
.sb-card-top{display:grid;grid-template-columns:minmax(8.5em,1fr) auto;grid-template-areas:"addr price" "sub sub";align-items:baseline;column-gap:10px;row-gap:1px}
.sb-card-top>.sb-price{grid-area:price;justify-content:flex-end;text-align:right;white-space:nowrap;flex-direction:column;align-items:flex-end;gap:0}   /* a sold / leased label goes under the price, so the address keeps its room (Oct 15) */
.sb-card-top>.sb-price .sb-status{margin-left:0}
.sb-card-top>.sb-addr{grid-area:addr;grid-row:1;font-size:.78rem;line-height:1.3}   /* Oct 14: address left and a bit smaller, price on the right */
.sb-card-top>.sb-meta{grid-area:sub}
.sb-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:700 var(--sb-md)/1.25 var(--brand);letter-spacing:-.01em}
.sb-status{margin-left:auto;font:700 var(--sb-xs) var(--brand);color:var(--sold)}
.sb-status-delisted{color:var(--off)}
.sb-meta{font-size:var(--sb-xs);color:var(--muted)}
.sb-addr{font-weight:500;color:var(--ink)}
.sb-facts{display:flex;flex-wrap:wrap;gap:2px 10px;font:600 var(--sb-xs)/1.4 var(--brand);color:var(--ink);margin:1px 0}
.sb-facts span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.sb-facts svg{color:var(--muted);flex:none;width:14px;height:14px}
/* Oct 14 (Pawel): beds / baths / parking / size bigger on every card, like the iPhone app's pin card */
.sb-card .sb-facts{font:700 15px/1.35 var(--brand);gap:4px 14px;margin:3px 0}
.sb-card .sb-facts span{gap:5px}
.sb-card .sb-facts svg{width:18px;height:18px;color:var(--ink-2)}
.sb-card .sb-brk{font-size:15px}   /* IDX 6.3 (c): the brokerage line is never smaller than the facts line */
/* MLS number + listing brokerage. IDX 6.3 (c): shown in full on every card and never smaller than the other listing
   details, so it uses the same size as the bed/bath line (--sb-xs); it only reads quieter (grey, regular weight). */
.sb-brk{font:400 var(--sb-xs)/1.35 var(--brand);color:#8a857e;border-top:1px solid #f1ede7;padding-top:6px;margin-top:auto}
.sb-card-sold .sb-price{color:var(--sold)}
.sb-card-delisted .sb-price{color:var(--off)}
.sb-card-unit .sb-addr{font-weight:600}
/* narrow column (the map list, the phone sheet, units on a phone): photo beside the text, like the HouseSigma app */
@container cards (max-width:520px){
  .sb-card{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"ph top" "ph facts" "brk brk";column-gap:12px;row-gap:6px;padding:10px;border-radius:var(--sb-r-sm)}
  .sb-card .sb-ph{grid-area:ph;aspect-ratio:4/3;border-radius:8px;overflow:hidden;align-self:start}
  .sb-card .sb-card-body{display:contents}
  .sb-card .sb-card-top{grid-area:top;gap:2px}
  .sb-card .sb-facts{grid-area:facts;align-self:start}
  .sb-card .sb-brk{grid-area:brk;margin-top:0}
  .sb-card .sb-save{width:30px;height:30px;right:6px;top:6px;font-size:var(--sb-base)}
  .sb-card .sb-share-card{width:30px;height:30px;right:42px;top:6px}
  .sb-card .sb-ph:not(:has(.sb-save)) .sb-share-card{right:6px}
  .sb-card .sb-badge{display:none}   /* too small a photo for a label; the date/newness shows on the full listing */
}

/* ---------- 5. app shell: top bar, phone tab bar ---------- */
.sb-appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;height:var(--sb-bar);padding:0 var(--gutter);background:#fff;border-bottom:1px solid var(--line);box-sizing:border-box}
body.sb-app .sb-appbar{position:relative}
.sb-applogo{flex:none}
.sb-applogo img{display:block;height:30px;width:auto}
.sb-applogo .sb-seal{display:none;width:30px;height:30px}
.sb-back{display:none;flex:none;width:40px;height:40px;margin-left:-8px;border-radius:999px;align-items:center;justify-content:center;color:var(--ink)}
.sb-back:hover{background:var(--paper)}
.sb-appnav{display:flex;gap:4px;margin-left:8px}
.sb-appnav a{display:flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;font:600 var(--sb-sm) var(--brand);color:var(--ink-2);text-decoration:none}
.sb-appnav a:hover{background:var(--paper)}
.sb-appnav a[aria-current=page]{background:var(--ink);color:#fff}
.sb-appnav a:last-child{color:var(--muted);font-weight:500}
.sb-appsearch{height:42px;flex:0 1 400px;max-width:440px;padding:0 14px;margin-left:8px;background:var(--paper);border-color:transparent}
.sb-appsearch input::-webkit-search-cancel-button{cursor:pointer}
.sb-me{margin-left:auto;display:flex;align-items:center;gap:6px}
.sb-signin-btn{white-space:nowrap;min-height:38px;padding:0 16px;border-radius:999px;border:0;background:var(--ink);color:#fff;font:700 var(--sb-sm) var(--brand);cursor:pointer}
.sb-avatar{width:40px;height:40px;border-radius:999px;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font:800 var(--sb-sm) var(--brand);text-decoration:none}
/* Watch an area (map page): outlined pill beside the search box, like the iPhone app; dark while outlining */
.sb-watch{flex:none;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);font:600 var(--sb-sm) var(--brand);cursor:pointer;white-space:nowrap;box-sizing:border-box}
.sb-watch svg{flex:none;display:block}
.sb-watch:hover{background:var(--paper)}
.sb-watch[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
body.look2 .sb-watch{height:34px;border-radius:6px}
.sb-tabbar{display:none}
.sb-map-open{position:absolute;inset:0;z-index:1}
@media (max-width:900px){
  .sb-appbar{gap:10px;padding:0 12px}
  .sb-appnav{display:none}
  .sb-applogo img{height:26px}
  .sb-appsearch{flex:1 1 auto;margin-left:0;height:40px;max-width:none;min-width:0}
  .sb-watch{height:40px}
  body.sb-detail .sb-back{display:flex}
  body.sb-detail .sb-crumbs{display:none}
  body.sb-tab-map .sb-applogo{display:none}
  body.sb-tab-map .sb-back{display:flex}
  .sb-tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .sb-tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:46px;justify-content:center;font:600 var(--sb-xs) var(--brand);color:var(--muted);text-decoration:none}
  .sb-tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .sb-tabbar a[aria-current=page]{color:var(--accent-deep)}
  body.sb:not(.sb-detail):not(.sb-app) main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  body.sb-detail .sb-tabbar,body.sb-tab-map .sb-tabbar{display:none}
  body.sb > footer{display:none}
  .sb-sug{position:fixed;left:8px;right:8px;top:calc(var(--sb-bar) + 4px);width:auto;margin:0;max-height:calc(100dvh - var(--sb-bar) - 16px)}
}
/* small phones (320-400 px): back, search, Watch and Sign in / avatar on one row. The search box gives up the room
   (its hint cuts off with "…"); Watch and Sign in tighten but keep their words. */
@media (max-width:400px){
  body.sb-tab-map .sb-appbar{gap:6px;padding:0 10px}
  body.sb-tab-map .sb-back{width:34px;margin-left:-4px}
  body.sb-tab-map .sb-appsearch{gap:6px;padding:0 10px}
  body.sb-tab-map .sb-appsearch input{text-overflow:ellipsis}
  body.sb-tab-map .sb-signin-btn{padding:0 12px}
  .sb-watch{gap:5px;padding:0 11px}
}
@media (max-width:360px){
  body.sb-tab-map .sb-signin-btn{padding:0 10px}
  .sb-watch{gap:4px;padding:0 9px;font-size:var(--sb-xs)}
  .sb-watch svg{width:14px;height:14px}
}

/* ---------- 6. home page ---------- */
.sb-hero{padding:clamp(32px,6vw,72px) 0 28px}
.sb-hero h1{font:400 var(--sb-2xl)/1 var(--serif);margin:0;letter-spacing:-.01em}
.sb-lead{font-size:var(--sb-md);color:var(--muted);max-width:620px;margin:14px 0 24px}
.sb-searchbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sb-searchbar .sb-seg span{min-height:50px;padding:0 20px}
.sb-searchbar .btn{min-height:52px}
.sb-market-box{background:var(--dark);color:#f6f3ee;border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:20px;align-items:center}
.sb-market-box>:first-child{grid-column:1/-1}
.sb-market-box a{color:#f6f3ee;font:600 var(--sb-sm) var(--brand)}
.sb-market-box .sb-kicker,.sb-market-h em{color:var(--accent)}
.sb-market-h{font:400 var(--sb-lg)/1.1 var(--serif);margin:0 0 10px}
.sb-stat{border-left:1px solid #3a3835;padding-left:18px}
.sb-stat .k,.sb-stat .d{font-size:var(--sb-sm);color:#c9c3b8}
.sb-stat .v{font:700 var(--sb-lg) var(--brand);margin:4px 0}
.sb-stat .d{font-weight:600}
.sb-stat .d.down{color:var(--accent)}
.sb-stat .d.up{color:#7fb0d8}
.sb-src{font-size:var(--sb-xs);color:var(--muted);margin:8px 0 0}
.sb-newest{padding-top:40px;padding-bottom:64px}
.sb-row-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sb-row-head h2{font:400 var(--sb-xl)/1 var(--serif);margin:0}
.sb-row-head .btn{margin-left:auto}
@media (max-width:640px){.sb-searchbar>*{flex:1 1 100%}.sb-searchbar .sb-seg label{flex:1}.sb-searchbar .sb-seg span{width:100%}}

/* ---------- 7. map page ---------- */
body.sb-app{position:fixed;inset:0;height:auto;display:flex;flex-direction:column;overflow:hidden}
body.sb-app main{flex:1;min-height:0;display:flex;flex-direction:column}
.sb-mapapp{flex:1;min-height:0;display:grid;grid-template-columns:clamp(360px,34vw,520px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
/* filter row */
.sb-filters{grid-column:1/-1;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px var(--gutter);background:#fff;border-bottom:1px solid var(--line)}
.sb-filters .sb-seg span{min-height:34px;padding:0 12px}
.sb-filters .sb-sel select,.sb-filters .sb-check{height:36px;min-height:36px}
.sb-dd{position:relative}
.sb-dd-btn,.sb-more-btn{height:36px;display:flex;align-items:center;gap:6px;padding:0 26px 0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f1e1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/10px no-repeat;font:600 var(--sb-sm) var(--brand);color:var(--ink);cursor:pointer;white-space:nowrap}
.sb-more-btn{padding:0 12px;background-image:none}
.sb-dd.set .sb-dd-btn,.sb-dd.open .sb-dd-btn,.sb-more-btn.set{background-color:var(--ink);color:#fff;border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.sb-more-btn.set{background-image:none}
.sb-more-n{min-width:18px;height:18px;border-radius:999px;background:var(--accent-deep);color:#fff;font-size:var(--sb-xs);display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.sb-dd-split{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:#fff}
.sb-dd-split .sb-mode{border:0;background:transparent;font:700 var(--sb-sm) var(--brand);padding:0 12px;cursor:pointer;color:var(--ink);min-height:34px}
.sb-dd-split .sb-dd-btn,.sb-dd-split.on .sb-dd-btn{border:0;border-left:1px solid var(--line);border-radius:0;height:34px;background-color:#fff;color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f1e1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.sb-dd-split.on{border-color:var(--accent-deep)}
.sb-dd-split.on .sb-mode{background:var(--accent-deep);color:#fff}
.sb-dd-split[data-mode=sold].on{border-color:var(--sold)}.sb-dd-split[data-mode=sold].on .sb-mode{background:var(--sold)}
.sb-dd-split[data-mode=delisted].on{border-color:var(--off)}.sb-dd-split[data-mode=delisted].on .sb-mode{background:var(--off)}
/* filter menus */
.sb-dd-panel{position:fixed;z-index:60;background:#fff;border:1px solid var(--line);border-radius:var(--sb-r);box-shadow:var(--shadow-lg);padding:16px 18px;min-width:240px;margin:0;box-sizing:border-box}
.sb-dd-h{font:700 var(--sb-base) var(--brand);margin:0 0 6px;padding:0}
.sb-dd-list{display:flex;flex-direction:column;gap:2px;padding:10px 8px}
.sb-dd-list .sb-dd-h{padding:4px 10px 6px}
.sb-dd-scroll{max-height:min(520px,70vh);overflow:auto}
.sb-opt{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 10px;border-radius:var(--sb-r-sm);cursor:pointer;font-size:var(--sb-base)}
.sb-opt:hover{background:var(--paper)}
.sb-opt input{width:18px;height:18px;accent-color:var(--accent-deep);margin:0;flex:none}
.sb-opt input:checked+span{color:var(--accent-deep);font-weight:600}
.sb-dd-list .sb-linkbtn{align-self:flex-start;margin:6px 10px 2px}
.sb-dd-price{width:min(440px,calc(100vw - 24px))}
.sb-dd-range{font:600 var(--sb-base) var(--brand);margin:0 0 16px}
.sb-dd-foot{display:flex;gap:10px;margin-top:16px}
.sb-dd-foot .btn{flex:1;min-height:44px}
/* two-handle slider */
.sb-range{position:relative;height:28px}
.sb-range-track{position:absolute;left:12px;right:12px;top:12px;height:4px;border-radius:4px;background:#e4ded4}
.sb-range-track i{position:absolute;top:0;bottom:0;background:var(--accent-deep);border-radius:4px}
.sb-range input{position:absolute;left:0;right:0;top:0;width:100%;height:28px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.sb-range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:26px;height:26px;border-radius:999px;background:#fff;border:2px solid var(--accent-deep);box-shadow:0 1px 4px rgba(31,30,28,.25);cursor:grab}
.sb-range input::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:999px;background:#fff;border:2px solid var(--accent-deep);box-shadow:0 1px 4px rgba(31,30,28,.25);cursor:grab}
.sb-range input::-moz-range-track{background:none}
.sb-range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(239,141,125,.45)}
.sb-range-ticks{position:relative;height:22px;margin:4px 12px 0;font-size:var(--sb-xs);color:var(--muted)}
.sb-range-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.sb-range-ticks span:first-child{transform:none}
.sb-range-ticks span:last-child{transform:translateX(-100%)}
.sb-range-inputs{display:flex;align-items:flex-end;gap:10px;margin-top:12px}
.sb-range-inputs label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:var(--sb-xs);color:var(--muted)}
.sb-range-inputs input{height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:12px;font:600 16px var(--brand);color:var(--ink);width:100%;box-sizing:border-box}
.sb-range-inputs input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(239,141,125,.35)}
.sb-range-inputs>span{padding-bottom:11px;color:var(--muted)}
/* "Filters" panel */
.sb-more{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.sb-more-bg{position:absolute;inset:0;background:rgba(28,27,25,.55)}
.sb-more-box{position:relative;background:#fff;border-radius:20px;width:min(640px,100%);max-height:min(860px,calc(100dvh - 32px));display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.sb-more-head{position:relative;display:flex;align-items:center;min-height:56px;padding:0 60px 0 22px;border-bottom:1px solid var(--line)}
.sb-more-head h2{margin:0;font:700 var(--sb-md) var(--brand)}
.sb-more-head .sb-x{top:6px;right:8px}
.sb-more-body{overflow:auto;padding:4px 22px 10px;overscroll-behavior:contain}
.sb-more-body section{padding:16px 0;border-bottom:1px solid #efe9e0}
.sb-more-body section:last-child{border-bottom:0}
.sb-more-body h3{font:700 var(--sb-base) var(--brand);margin:0 0 10px}
.sb-more-body h3 small{font-weight:500;color:var(--muted);margin-left:6px}
.sb-more-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 24px;border-bottom:1px solid #efe9e0}
.sb-more-row section{border-bottom:0}
.sb-more .sb-sel select{width:100%}
.sb-fchips{display:flex;flex-wrap:wrap;gap:8px}
.sb-fchip input{position:absolute;opacity:0;pointer-events:none}
.sb-fchip span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;font:600 var(--sb-sm) var(--brand);cursor:pointer;background:#fff}
.sb-fchip input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.sb-fchip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.sb-more-foot{display:flex;gap:10px;padding:12px 22px;border-top:1px solid var(--line)}
.sb-more-foot .btn{flex:1;min-height:46px}
.sb-x{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:999px;border:0;background:transparent;font-size:var(--sb-lg);cursor:pointer;color:var(--ink)}
/* results list */
.sb-results{min-height:0;overflow:auto;padding:14px 16px 24px;border-right:1px solid var(--line)}
.sb-res-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-bottom:12px}
.sb-res-head>div:first-child{flex:1 1 100%}
.sb-res-head h1{font:400 var(--sb-lg)/1.1 var(--serif);margin:0}
.sb-res-head p{margin:4px 0 0;font-size:var(--sb-sm)}
.sb-savesearch{min-height:36px;padding:0 14px;font-size:var(--sb-sm)}
.sb-sort{margin-left:auto}
.sb-list{--min:230px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min)),1fr));gap:10px;container:cards/inline-size}
.sb-empty{grid-column:1/-1;padding:40px 0;color:var(--muted);text-align:center}
.sb-locked{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--accent-pale);border-radius:16px;padding:32px 20px}
.sb-locked p{margin:0}
/* map */
.sb-mapwrap{position:relative;min-height:0;background:#ebe6dd}
#sb-map{position:absolute;inset:0}
.sb-maptools{position:absolute;left:14px;top:14px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}
.sb-seg-tools{box-shadow:var(--shadow-sm);border:0}
.sb-seg-tools button{min-width:44px;padding:0 10px}
.sb-seg-tools button svg{display:block}
.sb-tool-clear{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--accent-deep);color:#fff;font:600 var(--sb-sm) var(--brand);cursor:pointer;box-shadow:var(--shadow-sm)}
.sb-drawhint,.sb-mapnote{position:absolute;left:50%;transform:translateX(-50%);z-index:2;margin:0;background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;font:600 var(--sb-sm) var(--brand);box-shadow:var(--shadow-md);white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.sb-drawhint{top:70px}
.sb-mapnote{bottom:24px}
/* the PropTx / brokerage notice: one line (map.php), the full text in a pop-up */
.sb-legalline{display:block;max-width:100%;border:0;background:none;padding:0;margin:0 0 10px;font:500 var(--sb-xs)/1.3 var(--brand);color:var(--muted);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-legalline:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sb-legalline-map{position:absolute;left:10px;bottom:10px;z-index:2;margin:0;max-width:calc(100% - 140px);background:rgba(255,255,255,.88);border-radius:6px;padding:3px 7px;color:var(--ink)}
.sb-legalbox .sb-legal{border-top:0;padding-top:0;margin:10px 0 0}
.sb-drawing #sb-map canvas{cursor:crosshair!important}
/* map pins: white with a coloured dot (for sale coral, sold navy, de-listed grey); the selected pin turns dark */
.sb-pin{display:inline-flex;align-items:center;gap:5px;border:1px solid #e2ddd5;padding:4px 8px 4px 7px;border-radius:8px;background:#fff;color:var(--ink);font:700 var(--sb-sm) var(--brand);box-shadow:0 2px 6px rgba(31,30,28,.22);cursor:pointer;white-space:nowrap;position:relative}
.sb-pin::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#e0705f}
.sb-pin::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#fff;filter:drop-shadow(0 1px 0 #e2ddd5)}
.sb-pin.hl,.sb-pin.on{background:var(--ink);border-color:var(--ink);color:#fff;z-index:5}
.sb-pin.hl::before,.sb-pin.on::before{background:#ef8d7d}.sb-pin-sold.on::before,.sb-pin-sold.hl::before{background:#9fb6cc}
.sb-pin.hl::after,.sb-pin.on::after{border-top-color:var(--ink);filter:none}
.sb-pin-sold::before{background:var(--sold)}
.sb-pin-off{color:var(--ink-2)}.sb-pin-off::before{background:#9a9d9f}
.sb-dotpin{width:22px;height:22px;border-radius:999px;background:var(--accent-deep);border:4px solid #fff;box-shadow:0 2px 8px rgba(31,30,28,.35)}
.sb-me-dot{width:16px;height:16px;border-radius:50%;background:#2f78b8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,120,184,.22),0 1px 4px rgba(0,0,0,.3)}
.sb-locate{position:absolute;right:14px;bottom:96px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);cursor:pointer}
.sb-locate:hover{color:#2f78b8}
.sb-locate.busy svg{animation:sb-spin 1s linear infinite}
@keyframes sb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sb-locate.busy svg{animation:none;opacity:.5}}
/* desktop pop-up card on the map */
.sb-pop .maplibregl-popup-content{padding:0;border-radius:var(--sb-r);overflow:hidden;box-shadow:var(--shadow-lg)}
.sb-pop .sb-card{border:0;width:280px}
.sb-pop .maplibregl-popup-close-button{z-index:3;font-size:20px;width:32px;height:32px;right:4px;top:4px;background:#fff;border-radius:999px}
.sb-modeseg,.sb-viewbtn,.sb-sheet{display:none}

/* the phone map: full screen map, three equal filter buttons, floating For sale / Sold / De-listed switch,
   menus that drop down from under the filter row, and the selected home in a sheet from the bottom */
@media (max-width:900px){
  .sb-mapapp{grid-template-columns:minmax(0,1fr)}
  .sb-results,.sb-mapwrap{grid-row:2;grid-column:1}
  .sb-mapapp[data-view=list] .sb-mapwrap{visibility:hidden}
  .sb-mapapp[data-view=map] .sb-results{display:none}
  .sb-results{border-right:0;padding:12px 12px calc(96px + env(safe-area-inset-bottom))}
  .sb-filters{flex-wrap:nowrap;gap:6px;padding:8px 10px}
  .sb-filters>*{flex:1 1 0;min-width:0}
  .sb-filters>.sb-seg,.sb-filters>[data-dd=price],.sb-filters>.sb-sel,.sb-filters>.sb-check,.sb-filters>.sb-dd-split:not(.on){display:none}
  .sb-filters .sb-dd-btn,.sb-filters .sb-more-btn{width:100%;justify-content:center;overflow:hidden;text-overflow:ellipsis}
  .sb-filters [data-dd-label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .sb-filters .sb-dd-split,.sb-filters .sb-dd-split.on{border-color:var(--line-strong)}
  .sb-filters .sb-dd-split .sb-mode{display:none}
  .sb-filters .sb-dd-split .sb-dd-btn{border-left:0;width:100%;height:34px}
  .sb-filters .sb-dd-split[data-mode=active] .sb-dd-btn span::before{content:'Listed: ';font-weight:500;color:var(--muted)}
  .sb-filters .sb-dd-split[data-mode=sold] .sb-dd-btn span::before{content:'Sold: ';font-weight:500;color:var(--muted)}
  .sb-filters .sb-dd-split[data-mode=delisted] .sb-dd-btn span::before{content:'De-listed: ';font-weight:500;color:var(--muted)}
  .sb-modeseg{display:flex;gap:2px;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;background:#fff;border-radius:999px;box-shadow:var(--shadow-md);padding:3px}
  .sb-modeseg button{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;font:700 var(--sb-sm) var(--brand);color:var(--ink);cursor:pointer;white-space:nowrap}
  .sb-modeseg button[aria-pressed=true]{background:var(--accent-deep);color:#fff}
  .sb-modeseg button[data-set-mode=sold][aria-pressed=true]{background:var(--sold)}
  .sb-modeseg button[data-set-mode=delisted][aria-pressed=true]{background:var(--off)}
  .sb-seg-tools{display:none}
  .sb-maptools{top:58px;left:10px}
  .sb-tool-clear{min-height:34px;padding:0 12px;font-size:var(--sb-xs)}
  .sb-mapwrap .maplibregl-ctrl-bottom-right{display:none}
  .sb-drawhint{top:120px;white-space:normal;text-align:center;border-radius:16px}
  .sb-viewbtn{display:flex;align-items:center;gap:8px;position:fixed;right:14px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:30;min-height:46px;padding:0 18px;border-radius:999px;border:0;background:#fff;color:var(--ink);font:700 var(--sb-base) var(--brand);box-shadow:var(--shadow-lg);cursor:pointer}
  .sb-viewbtn svg[hidden]{display:none}
  .sb-mapapp[data-view=list] .sb-viewbtn{background:var(--ink);color:#fff}
  .sb-locate{bottom:calc(84px + env(safe-area-inset-bottom))}
  .sb-mapnote{bottom:calc(84px + env(safe-area-inset-bottom))}
  .sb-sheet-on .sb-viewbtn,.sb-sheet-on .sb-locate,.sb-sheet-on .sb-mapnote,.sb-sheet-on .sb-legalline-map{display:none}
  .sb-legalline-map{bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(100% - 150px)}
  .maplibregl-popup.sb-pop{display:none}
  /* the sheet */
  .sb-sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:35;height:calc(100dvh - var(--sb-bar) - 56px);background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -6px 28px rgba(31,30,28,.18);transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);will-change:transform;container:cards/inline-size}
  .sb-sheet-grip,.sb-sheet-head{user-select:none;-webkit-user-select:none}
  .sb-sheet-grip{flex:none;display:flex;justify-content:center;padding:8px 0 4px;touch-action:none;cursor:grab}
  .sb-sheet-grip span{width:40px;height:5px;border-radius:5px;background:#d6cec2}
  .sb-sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px 4px 16px;touch-action:none;cursor:grab}
  /* the title: the tapped home's address, or "N homes at <street>" (AppPinOne) */
  .sb-sheet-head h2{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--sb-md)/1.3 var(--brand);letter-spacing:-.01em;color:var(--ink)}
  .sb-sheet-x{width:40px;height:40px;border:0;border-radius:999px;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .sb-sheet-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 12px calc(16px + env(safe-area-inset-bottom))}
  .sb-sheet-list{display:flex;flex-direction:column}
  .sb-sheet .sb-card{border:0;border-bottom:1px solid var(--sb-line);border-radius:0;padding:10px 4px;box-shadow:none;outline:0}
}
/* phones: menus drop down from under the filter row, full width, over a dimmed map */
@media (max-width:640px){
  .sb-dd-panel{left:8px!important;right:8px;width:auto!important;max-height:min(62dvh,480px);overflow:auto;border:0;border-radius:var(--sb-r);box-shadow:0 0 0 100vmax rgba(28,27,25,.38),var(--shadow-lg)}
  .sb-dd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 6px;padding:12px}
  .sb-dd-list .sb-dd-h{grid-column:1/-1;font-size:var(--sb-md);padding:2px 10px 8px}
  .sb-dd-list .sb-linkbtn,.sb-dd-list [data-years]{grid-column:1/-1}
  .sb-dd-list [data-years]{display:grid;grid-template-columns:inherit;gap:inherit}
  .sb-opt{min-height:44px}
  /* "Filters": a full page, header and buttons always in view */
  .sb-more{padding:0;align-items:stretch}
  .sb-more-box{width:100%;max-height:none;height:100%;border-radius:0}
  .sb-more-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* ---------- 8. listing page ---------- */
.sb-lp{padding-top:20px;padding-bottom:56px;max-width:1376px}
.sb-crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--sb-sm);color:var(--muted);margin-bottom:14px}
.sb-crumbs a{color:var(--accent-deep)}
/* top: gallery + summary side by side when there's room, stacked when not (no breakpoint) */
.sb-lp-top{display:flex;gap:20px;flex-wrap:wrap}
.sb-gallery{flex:999 1 560px;display:flex;flex-direction:column;gap:8px}
.sb-ph-lg{aspect-ratio:auto;height:clamp(240px,36vw,440px);border-radius:var(--sb-r);background-size:56px}
.sb-gal{display:block;width:100%;padding:0;border:0;cursor:zoom-in;overflow:hidden;background-image:none}
.sb-gal img{display:block;width:100%;height:100%;object-fit:cover}
.sb-gal-main{position:relative}
.sb-count{position:absolute;right:12px;bottom:12px;font:700 var(--sb-xs) var(--brand);background:rgba(31,30,28,.8);color:#fff;padding:5px 9px;border-radius:8px}
.sb-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-auto-rows:64px;gap:8px;max-height:64px;overflow:hidden}
.sb-thumbs .sb-ph{aspect-ratio:auto;height:64px;border-radius:var(--sb-r-sm)}
.sb-summary{flex:1 1 340px;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:20px;display:flex;flex-direction:column;gap:14px;container-type:inline-size}
.sb-bigprice{font:700 var(--sb-xl)/1.1 var(--brand);letter-spacing:-.02em}
.sb-lp-addr{font:700 var(--sb-md)/1.3 var(--brand);margin:4px 0 0}
.sb-chipgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px}
.sb-chipgrid div{background:var(--paper);border-radius:var(--sb-r-sm);padding:9px 11px;display:flex;flex-direction:column;min-width:0}
.sb-chipgrid b{font:700 var(--sb-base)/1.25 var(--brand);overflow-wrap:anywhere}   /* long values wrap, never cut off */
.sb-chipgrid span{font-size:var(--sb-xs);color:var(--muted)}
.sb-top-acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.sb-share{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:700 var(--sb-sm) var(--brand);cursor:pointer}
.sb-share:hover{border-color:var(--ink)}
.sb-save-top{position:static;width:40px;height:40px;font-size:var(--sb-lg);border:1px solid var(--line-strong);background:#fff;display:flex;align-items:center;justify-content:center}
.sb-save-top:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.sb-share span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* icon only; the name stays for screen readers */
.sb-share{position:relative;width:40px;padding:0;justify-content:center}
.sb-top-acts{gap:6px}
.sb-tabs{display:flex;gap:6px;margin:20px 0 16px;position:sticky;top:var(--sb-bar);z-index:5;background:var(--paper);padding:8px 0;overflow-x:auto;scrollbar-width:none}
.sb-tabs::-webkit-scrollbar{display:none}
.sb-tabs a{flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font:600 var(--sb-sm) var(--brand);display:flex;align-items:center;color:var(--ink)}
.sb-tabs a.on,.sb-tabs a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* layout A: photo mosaic + headline */
.sb-mosaic{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,clamp(110px,16vw,220px));gap:8px;border-radius:var(--r-lg);overflow:hidden}
.sb-mosaic .sb-ph{aspect-ratio:auto;height:100%}
.sb-mosaic .sb-ph:first-child{grid-row:span 2;background-size:56px}
.sb-gal-all{position:absolute;right:12px;bottom:12px;z-index:2;border:0;border-radius:8px;background:rgba(255,255,255,.95);color:var(--ink);font:600 var(--sb-sm) var(--brand);padding:8px 12px;cursor:pointer;box-shadow:var(--shadow-sm)}
.sb-a-summary{padding-top:24px}
.sb-a-head{display:flex;gap:12px 24px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.sb-a-head>div:first-child{flex:999 1 320px}
.sb-a-addr{font:400 var(--sb-2xl)/1.05 var(--serif);margin:0}
.sb-a-head p{margin:6px 0 0}
.sb-a-price{flex:1 1 auto;text-align:right}
.sb-a-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:1px;margin-top:18px;background:var(--sb-line);border:1px solid var(--sb-line);border-radius:var(--sb-r);overflow:hidden}
.sb-a-stats div{padding:14px 16px;background:#fff;display:flex;flex-direction:column;min-width:0}
.sb-a-stats b{font:700 var(--sb-md)/1.25 var(--brand);overflow-wrap:anywhere}
.sb-a-stats span{font-size:var(--sb-xs);color:var(--muted)}
/* details (left) + booking card (right, stays in view). The card column drops below when there isn't room. */
.sb-a-cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;margin-top:24px}
.sb-a-cols>.sb-tiles{flex:999 1 600px}
.sb-a-side{flex:1 1 300px;max-width:360px;position:sticky;top:calc(var(--sb-bar) + 70px);max-height:calc(100dvh - var(--sb-bar) - 86px);overflow:auto;scrollbar-width:thin;border-radius:var(--sb-r)}
.sb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.sb-span2,.sb-span3,.sb-tiles .k-costs{grid-column:1/-1}
.sb-tiles-a{grid-template-columns:minmax(0,1fr);gap:24px}
.sb-tiles-a .sb-tile{padding:22px 24px}
.sb-tiles-a .sb-tile h2,.sb-tiles-a .sb-tile-h h2{font-size:var(--sb-xl)}
.sb-tiles-a .k-history{order:1}.sb-tiles-a .k-facts{order:2}.sb-tiles-a .k-building{order:4}.sb-tiles-a .k-units{order:5}
.sb-tiles-a .k-comps{order:6}.sb-tiles-a .k-map{order:7}.sb-tiles-a .k-costs{order:9}.sb-tiles-a .k-trend{order:10}.sb-tiles-a .k-market{order:13}
.sb-tile{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:18px 20px;scroll-margin-top:calc(var(--sb-bar) + 64px);container-type:inline-size}
.sb-tile-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;margin-bottom:8px}
.sb-tile-h h2{margin:0}
.sb-tile-big{font:700 var(--sb-lg) var(--brand);margin:4px 0 12px}
.sb-tile-big small{font:500 var(--sb-sm) var(--brand)}
@media (max-width:900px){
  .sb-a-side{position:static;max-width:none;max-height:none;overflow:visible;flex-basis:100%}
  .sb-book-bar{display:flex!important}
  body.sb-detail main{padding-bottom:84px}
}
/* booking card */
.sb-book{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:16px;box-shadow:var(--shadow-sm)}
.sb-book h2{font:700 var(--sb-md)/1.2 var(--brand);margin:0}
.sb-book-sub{margin:3px 0 10px;font-size:var(--sb-sm);color:var(--muted)}
.sb-book-form{display:flex;flex-direction:column;gap:8px}
.sb-book-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:8px}
.sb-book .sb-field input{min-height:42px;border-radius:var(--sb-r-sm)}
.sb-book .sb-field textarea{border-radius:var(--sb-r-sm);font-size:var(--sb-sm)}
.sb-book .btn{min-height:44px;margin-top:2px}
.sb-book-legal{margin:10px 0 0;font-size:var(--sb-xs);color:var(--muted);line-height:1.4}
.sb-book-bar{display:none;align-items:center;justify-content:center;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;min-height:50px;border-radius:12px;background:var(--accent-deep);color:#fff;font:700 var(--sb-base) var(--brand);text-decoration:none;box-shadow:var(--shadow-lg)}
/* price history */
.sb-table{font-size:var(--sb-sm)}
/* every row is its own grid, so every column has a fixed share (an "auto" column would size per row and drift) */
.sb-tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr) 7.5rem;gap:8px;padding:10px 0;border-bottom:1px solid #efe9e0;align-items:center}
.sb-tr>span:nth-child(2),.sb-tr>span:nth-child(3),.sb-tr>span:nth-child(4){text-align:center}
.sb-th{font:700 var(--sb-xs) var(--brand);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sb-tr>span:last-child{text-align:right}
.sb-tr .num{font:700 var(--sb-base) var(--brand)}
.sb-tr .num small{display:block;font:500 var(--sb-xs) var(--brand);color:var(--muted)}
.ev{font:700 var(--sb-sm) var(--brand)}
.ev-for-sale,.ev-for-lease{color:var(--ok)}
.ev-sold,.ev-leased{color:var(--accent-deep)}
.ev-terminated,.ev-expired,.ev-suspended,.ev-cancelled{color:#8a6d3b}
.ev-price-change{color:#2f6f9f}
@container (max-width:520px){
  .sb-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 7.5rem;row-gap:2px}
  .sb-tr>span:nth-child(n){text-align:left}
  .sb-tr>span:last-child{text-align:right}
  .sb-tr>span:nth-child(2){display:none}
  .sb-th>span:nth-child(n+4){display:none}
  .sb-tr>span:nth-child(4){grid-column:1/3;grid-row:2}
  .sb-tr>span:nth-child(5){grid-column:3;grid-row:1/3;align-self:center}
}
.sb-mlslink{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;color:var(--ink)!important;font:600 var(--sb-xs) var(--brand)!important;text-decoration:none!important;white-space:nowrap;cursor:pointer}
.sb-mlslink::after{content:'›';font-size:14px;line-height:1}
.sb-mlslink:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}
.sb-mls-cur{display:inline-flex;padding:3px 9px;border-radius:6px;background:#f0ede9;font:600 var(--sb-xs) var(--brand);color:var(--ink-2);white-space:nowrap}
.sb-lockwrap{position:relative}
.sb-lockwrap .sb-table{filter:blur(5px);user-select:none;pointer-events:none}
.sb-lock{position:absolute;inset:28px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:0 16px}
.sb-lock p{margin:0}
.sb-lockwrap.open .sb-table{filter:none;pointer-events:auto;user-select:auto}
.sb-lockwrap.open .sb-lock{display:none}
/* key facts / description / rooms */
.sb-unit-card .sb-tile-h{margin-bottom:12px}
.sb-factgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));column-gap:24px}
.sb-factgrid div{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid #efe9e0;min-width:0}
.sb-factgrid span{font-size:var(--sb-xs);color:var(--muted)}
.sb-factgrid b{font-weight:600;font-size:var(--sb-base)}
.sb-brk-line{color:var(--muted);font-size:var(--sb-sm)}
.sb-facts-brk{margin:12px 0 0}
.sb-desc{font-size:var(--sb-base);line-height:1.65;max-width:72ch;margin:0}
.sb-extras{margin-top:10px;color:var(--ink-2)}
.sb-rooms-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));column-gap:24px}
.sb-room{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #efe9e0;font-size:var(--sb-sm)}
/* the building */
.sb-bldg{display:flex;flex-wrap:wrap;gap:20px 28px;padding:clamp(16px,2.5vw,26px);background:var(--dark);border-color:var(--dark);color:#f6f3ee}
.sb-bldg-photo{flex:1 1 240px;margin:0;position:relative;border-radius:var(--sb-r-sm);overflow:hidden;background:#2c2b28;min-height:200px;aspect-ratio:4/3;max-height:340px}
.sb-bldg-photo img,.sb-bldg-photo .sb-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.sb-bldg-photo .sb-ph{background-color:#3a3835}
.sb-bldg-photo figcaption{position:absolute;left:10px;bottom:10px;background:rgba(31,30,28,.75);color:#fff;font-size:var(--sb-xs);padding:4px 9px;border-radius:999px}
.sb-bldg-main{flex:999 1 340px;display:flex;flex-direction:column}
.sb-bldg-main .sb-kicker{margin:0 0 4px;color:var(--accent)}
.sb-tile h2.sb-bldg-name{font:400 var(--sb-xl)/1.05 var(--serif);color:#f6f3ee;margin:0}
.sb-bldg-addr{margin:6px 0 0;color:#c9c3b8}
.sb-bldg-by{margin:8px 0 0;font-size:var(--sb-sm);color:#e6e1d8}
.sb-bldg-by b{color:#fff}
/* four number tiles: as many per row as fit; each number sizes itself to its tile (cqi), labels wrap */
.sb-bldg-now{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));gap:8px;margin-top:16px}
.sb-bldg-now>*{container-type:inline-size;background:#2c2b28;border-radius:var(--sb-r-sm);padding:11px 12px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;min-width:0}
.sb-bldg-now a:hover{background:#353330}
.sb-bldg-now b{font:700 clamp(1rem,15cqi,1.375rem)/1.15 var(--brand);color:#fff;white-space:nowrap}
.sb-bldg-now span{font-size:var(--sb-xs);line-height:1.3;color:#c9c3b8}
.sb-bldg-facts{display:flex;flex-wrap:wrap;gap:4px 20px;margin:14px 0 0;font-size:var(--sb-sm)}
.sb-bldg-facts div{display:flex;gap:6px;align-items:baseline;min-width:0}
.sb-bldg-facts dt{color:#a9a399}
.sb-bldg-facts dd{margin:0;font-weight:600;color:#f6f3ee}
.sb-bldg h3{font:700 var(--sb-xs) var(--brand);letter-spacing:.06em;text-transform:uppercase;color:#c9c3b8;margin:0 0 10px}
.sb-bldg-incl,.sb-bldg-amen,.sb-bldg-note{flex:1 1 100%}
.sb-bldg-incl{border-top:1px solid #3a3835;padding-top:18px}
.sb-incl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.sb-incl li{display:inline-flex;align-items:center;gap:7px;font:600 var(--sb-base) var(--brand);color:#f6f3ee}
.sb-incl li svg{color:#7cc49a;flex:none}
.sb-incl-no{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.sb-incl-no li{display:inline-flex;align-items:center;gap:5px;font-size:var(--sb-xs);color:#a9a399}
.sb-incl-no li svg{color:#d98a7c}
.sb-amen{display:flex;gap:8px;flex-wrap:wrap}
.sb-amen span{font-size:var(--sb-sm);padding:5px 12px;border-radius:999px;background:#2c2b28;color:#f6f3ee}
.sb-muted-d,.sb-bldg-note{color:#a9a399;margin:0}
.sb-bldg-note{font-size:var(--sb-xs)}
/* units in the building */
.sb-units-tabs{margin:4px 0 12px}
.sb-units-more{margin-top:12px}
.sb-mini-lock{background:var(--accent-pale);border-radius:var(--sb-r-sm);padding:24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-top:8px}
.sb-mini-lock p{margin:0}
/* map tile */
.sb-tile-map{padding:0;overflow:hidden;min-height:clamp(260px,32vw,400px);position:relative}
#sb-minimap{position:absolute;inset:0;background:#ebe6dd}
.sb-tile-map .maplibregl-ctrl-bottom-right{display:none}
.sb-map-open::after{content:'Open map ↗';position:absolute;right:12px;bottom:12px;background:var(--ink);color:#fff;font:700 var(--sb-xs) var(--brand);padding:8px 12px;border-radius:999px}
.sb-pinfix{position:absolute;left:12px;bottom:12px;z-index:3;border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px;font:700 var(--sb-xs) var(--brand);cursor:pointer}
.sb-pinbox .sb-dialog{max-width:640px}
.sb-pin-map{height:min(56dvh,440px);border-radius:12px;overflow:hidden;margin-top:14px;background:#e6e6e6}
.sb-pin-src{font-size:var(--sb-xs);color:var(--muted);margin:10px 0 0}
.sb-dotpin-drag{cursor:grab;width:28px;height:28px}
.sb-map-btns{position:absolute;left:12px;right:12px;top:12px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.sb-map-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#fff;color:var(--ink);font:700 var(--sb-sm) var(--brand);text-decoration:none;box-shadow:0 2px 8px rgba(31,30,28,.18)}
.sb-map-btn::before{content:'';width:9px;height:9px;border-radius:999px;background:var(--accent-deep);margin-right:8px}
.sb-map-btn-sold::before{background:var(--sold)}
.sb-map-btn-off::before{background:#7b7f82}
.sb-map-btn:hover{background:var(--ink);color:#fff}
/* comparables */
.sb-comp-grid{margin-top:10px}
.sb-comp-more{margin-top:12px}
@media (max-width:640px){.sb-comp-grid>.sb-card:nth-child(n+5){display:none}}
/* monthly cost */
.sb-stack{display:flex;height:12px;border-radius:999px;overflow:hidden;background:#efe9e0}
.sb-stack i{display:block;height:100%}
.sb-legend{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:var(--sb-sm);margin-top:8px}
.sb-calc-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.sb-calc-form label{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:var(--sb-sm);color:var(--muted)}
.sb-calc-form b{color:var(--ink)}
.sb-calc-form input{grid-column:1/-1;accent-color:var(--accent-deep);width:100%}
/* market row */
.sb-market-row{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;padding:14px 20px}
.sb-market-row h2{margin:0}
.sb-market-v b{font:700 var(--sb-md) var(--brand)}
.sb-market-scale{flex:1 1 300px}
.sb-market-row .sb-note{flex:1 1 100%;margin:0}
.sb-scale{position:relative;display:grid;grid-template-columns:2fr 1.5fr 1.5fr 2fr;gap:3px;height:12px}
.sb-scale span:nth-child(1){background:var(--accent-pale);border-radius:6px 0 0 6px}
.sb-scale span:nth-child(2){background:#efe9e0}
.sb-scale span:nth-child(3){background:#d6e4ef}
.sb-scale span:nth-child(4){background:#a8c6dd;border-radius:0 6px 6px 0}
.sb-scale i{position:absolute;top:-5px;width:4px;height:22px;background:var(--ink);border-radius:2px}
.sb-scale-l{display:grid;grid-template-columns:2fr 1.5fr 1.5fr 2fr;gap:3px;font-size:var(--sb-xs);color:var(--muted);margin-top:4px}
/* price and maintenance per sq ft charts */
.sb-trend-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--sb-xs);color:var(--ink-2);margin:2px 0 6px}
.sb-trend-legend[hidden],.sb-trend-legend [hidden]{display:none}
.sb-trend-legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:3px}
.sb-trend-legend .n i{background:#e0705f}.sb-trend-legend .b i{background:#2f4f6f}
.sb-trend-legend .u i{background:repeating-linear-gradient(90deg,#1f1e1c 0 4px,transparent 4px 7px);opacity:.7}
.sb-trend-legend .w{color:var(--muted)}
.sb-trend-legend .w i{width:8px;height:8px;border-radius:50%;border:1.6px solid #e0705f;background:#fff;vertical-align:0;box-sizing:border-box}
.sb-trend-chart{position:relative}
.sb-trend-chart svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible;touch-action:pan-y;cursor:crosshair}
.sb-trend-chart text{font:500 10.5px var(--brand);fill:#5e6366}
.sb-trend-tip{position:absolute;top:-6px;background:#1f1e1c;color:#fff;border-radius:10px;box-shadow:0 4px 14px rgba(31,30,28,.22);padding:7px 11px 8px;display:flex;flex-direction:column;gap:1px;pointer-events:none;z-index:3;white-space:nowrap;font-family:var(--brand)}
.sb-trend-tip[hidden]{display:none}
.sb-trend-tip small{font:500 11px/1.3 var(--brand);color:#cfc9c1}
.sb-trend-tip b{font:800 14px/1.3 var(--brand)}
.sb-trend-tip span{font:500 11px/1.3 var(--brand);color:#cfc9c1;display:flex;align-items:center;gap:5px}
.sb-trend-tip span i{width:8px;height:8px;border-radius:50%;background:#9fb6cc;display:inline-block}
.sb-est{font:600 11px var(--brand);color:var(--muted);background:var(--paper,#f6f3ee);border-radius:6px;padding:1px 5px;margin-left:2px;vertical-align:2px}
/* full-screen photo viewer */
.sb-viewer{position:fixed;inset:0;z-index:300;background:#121110;display:flex;align-items:center;justify-content:center}
.sb-viewer img{max-width:calc(100vw - 140px);max-height:calc(100dvh - 120px);object-fit:contain;user-select:none}
.sb-viewer-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#f6f3ee;font:600 var(--sb-sm) var(--brand)}
.sb-viewer-x{width:44px;height:44px;border:0;background:none;color:#fff;font-size:22px;cursor:pointer}
.sb-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.sb-viewer-nav:hover{background:rgba(255,255,255,.22)}
.sb-viewer-nav.prev{left:16px}.sb-viewer-nav.next{right:16px}
.sb-viewer-brk{position:absolute;bottom:10px;left:0;right:0;margin:0;text-align:center;color:#c9c3b8;font-size:var(--sb-xs)}
@media (max-width:640px){.sb-viewer img{max-width:100vw;max-height:calc(100dvh - 110px)}.sb-viewer-nav{display:none}}

/* ---------- 9. past listing page ---------- */
.sb-rec-lock{max-width:640px;margin:48px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.sb-rec-lock .sb-h1{margin:0}
.sb-rec [data-now]{align-self:flex-start;min-height:44px}

/* ---------- 10. sign-in, toast ---------- */
.sb-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.sb-modal-bg{position:absolute;inset:0;background:rgba(28,27,25,.62)}
.sb-dialog{position:relative;width:100%;max-width:480px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);border-radius:24px;padding:clamp(22px,4vw,36px) clamp(20px,4vw,40px) 26px;box-sizing:border-box;box-shadow:var(--shadow-lg)}
.sb-dialog h2{font:400 var(--sb-2xl)/1 var(--serif);margin:22px 0 6px}
.sb-si-btns{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.sb-si{height:50px;border-radius:999px;font:600 var(--sb-base) var(--brand);display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}
.sb-si span{width:22px;height:22px;border-radius:999px;border:1.5px solid currentColor;font-size:var(--sb-xs);display:grid;place-items:center}
.sb-si-g{border:1px solid var(--line-strong);background:#fff;color:var(--ink)}
.sb-si-a{border:0;background:var(--ink);color:#fff}
.sb-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:var(--sb-sm)}
.sb-or::before,.sb-or::after{content:'';flex:1;height:1px;background:var(--line-strong)}
.sb-dialog .btn{margin-top:12px}
.sb-small{font-size:var(--sb-xs);color:var(--muted);text-align:center;margin:14px 0 0}
.sb-step{display:flex;flex-direction:column}
.sb-step .sb-kicker{margin-top:20px}
.sb-step h2{margin-top:6px}
.sb-step>.sb-field{margin-top:4px}
.sb-row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.sb-code{letter-spacing:.4em;font:700 var(--sb-lg) var(--brand)!important;text-align:center}
.sb-consent{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0 4px;font-size:var(--sb-sm);line-height:1.45}
.sb-consent label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.sb-consent input{width:20px;height:20px;flex-shrink:0;margin:0;accent-color:var(--accent-deep)}
.sb-consent a{color:var(--accent-deep)}
.sb-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:200;background:var(--ink);color:#fff;border-radius:999px;padding:12px 20px;font:600 var(--sb-base) var(--brand);box-shadow:var(--shadow-lg);transition:all .25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.sb-toast.on{opacity:1;transform:translate(-50%,0)}
.sb-toast.has-act{display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;pointer-events:auto;bottom:calc(24px + env(safe-area-inset-bottom))}
.sb-toast button{border:0;border-radius:999px;background:#fff;color:var(--ink);font:700 var(--sb-sm) var(--brand);padding:8px 14px;cursor:pointer;white-space:nowrap}
@media (max-width:900px){.sb-toast{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media (max-width:640px){
  .sb-modal{align-items:flex-end;padding:0}
  .sb-dialog{border-radius:24px 24px 0 0;max-height:92dvh}
  .sb-dialog h2{font-size:var(--sb-xl)}
}

/* ---------- 11. my account ---------- */
.sb-acct{padding-top:32px;padding-bottom:64px}
.sb-acct-out{max-width:520px;padding:40px 0}
.sb-acct-out .btn{margin-top:16px}
.sb-acct-a{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.sb-acct-a>*{min-width:0}
.sb-acct-a .sb-acct-side{flex:1 1 240px;max-width:270px;display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--sb-bar) + 16px)}
.sb-acct-a .sb-acct-main{flex:999 1 600px;display:flex;flex-direction:column;gap:44px}
.sb-acct-main section{scroll-margin-top:calc(var(--sb-bar) + 16px)}
.sb-hi{font:400 var(--sb-xl)/1 var(--serif);margin:0}
.sb-acct-nav{display:flex;flex-direction:column;gap:4px}
.sb-acct-nav a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font:600 var(--sb-base) var(--brand);color:var(--ink);text-decoration:none}
.sb-acct-nav a.on,.sb-acct-nav a:hover{background:var(--ink);color:#fff}
.sb-acct-nav a span{font-size:var(--sb-xs);opacity:.8}
.sb-agent-a{background:var(--dark);color:#f6f3ee;border-radius:20px;padding:18px}
.sb-agent-a .sb-kicker{color:var(--accent);margin:0}
.sb-agent-who{display:flex;gap:10px;align-items:center;margin:10px 0 12px}
.sb-agent-who>span{width:44px;height:44px;border-radius:999px;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font:700 var(--sb-base) var(--brand);flex:none}
.sb-agent-who p{margin:0;font-size:var(--sb-sm);line-height:1.35;color:#c9c3b8}
.sb-agent-who b{color:#fff}
.sb-acct-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sb-acct-head .sb-h1,.sb-acct-head .sb-h2{margin:0}
.sb-acct-head .sb-seg,.sb-acct-add{margin-left:auto}
.sb-acct-add{font:600 var(--sb-sm) var(--brand)}
.sb-saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.sb-saved{position:relative;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);overflow:hidden;min-width:0}
.sb-saved.off{opacity:.75}
.sb-saved .sb-ph{aspect-ratio:4/3}
.sb-saved-pill{position:absolute;left:10px;top:10px;font:700 var(--sb-xs) var(--brand);padding:5px 9px;border-radius:999px;background:#fff;color:var(--ink)}
.sb-saved-pill.drop{background:var(--accent-deep);color:#fff}
.sb-saved-pill.sold{background:var(--sold);color:#fff}
.sb-saved-pill.off{background:var(--off);color:#fff}
.sb-note-box{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px;margin-top:8px;background:var(--paper);border-radius:10px;padding:8px 10px;font-size:var(--sb-xs)}
.sb-note-box span{font-weight:700}
.sb-note-box textarea{border:0;background:transparent;font:inherit;font-size:var(--sb-sm);resize:vertical;padding:0;color:var(--ink-2)}
.sb-note-box textarea:focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sb-searches-a{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);overflow:hidden}
.sb-search-a{display:flex;gap:12px 16px;align-items:center;padding:14px 18px;border-bottom:1px solid #efe9e0;flex-wrap:wrap}
.sb-search-a:last-child{border-bottom:0}
.sb-search-txt{flex:1 1 300px;min-width:0;display:flex;flex-direction:column}
.sb-search-txt span{color:var(--muted);font-size:var(--sb-sm)}
.sb-search-alert{display:flex;align-items:center;gap:8px;font-size:var(--sb-sm);color:var(--muted)}
.sb-search-alert select{height:40px;padding:0 10px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;font:inherit;color:var(--ink)}
.sb-search-a a{font:600 var(--sb-sm) var(--brand)}
.sb-settings{display:flex;flex-direction:column;gap:12px;max-width:560px}
.sb-settings .btn{align-self:flex-start;min-height:44px}
.sb-checkrow{display:flex;gap:10px;align-items:center;font-size:var(--sb-base);cursor:pointer}
.sb-checkrow input{width:20px;height:20px;accent-color:var(--accent-deep)}
.sb-small-left{font-size:var(--sb-sm);margin-top:18px}
.sb-small-left a{color:var(--accent-deep)}
@media (max-width:900px){.sb-acct-a .sb-acct-side{position:static;max-width:none}}

/* ---------- 12. shared lists ---------- */
.sb-pane-bar{display:flex;justify-content:flex-end;margin:-4px 0 6px}
/* "Save to a list" picker */
.sb-lpick-box h2{font:400 var(--sb-xl)/1.1 var(--serif);margin:4px 0 6px}
.sb-lpick-box>.sb-muted{font-size:var(--sb-sm);margin:0 0 14px}
.sb-lpick-lists{display:flex;flex-direction:column;gap:6px;max-height:min(46dvh,380px);overflow:auto}
.sb-lpick-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:1px solid var(--sb-line);border-radius:var(--sb-r-sm);background:#fff;text-align:left;cursor:pointer;color:var(--ink)}
.sb-lpick-row:hover{border-color:var(--line-strong)}
.sb-lpick-cover{flex:none;width:52px;height:52px;border-radius:8px;background:#e9e3da center/cover}
.sb-lpick-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.sb-lpick-txt b{font:600 var(--sb-base) var(--brand);overflow-wrap:anywhere}
.sb-lpick-txt small{font-size:var(--sb-xs);color:var(--muted)}
.sb-lpick-check{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-strong)}
.sb-lpick-row[aria-pressed=true]{border-color:var(--ink)}
.sb-lpick-row[aria-pressed=true] .sb-lpick-check{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--ink)}
.sb-lpick-empty{margin:4px 0}
.sb-lpick-new{display:flex;gap:8px;margin-top:14px}
.sb-lpick-new input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:12px;font:inherit;font-size:16px;background:#fff}
.sb-lpick-new .btn{margin:0;min-height:44px}
/* people on a list (Coral agents get a coral ring) */
.sb-people{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.sb-face{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:#e9e3da;color:var(--ink);font:700 11px var(--brand);border:2px solid #fff}
.sb-face.agent{background:var(--accent);box-shadow:0 0 0 2px var(--accent-deep)}
.sb-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sb-face{overflow:hidden}
.sb-people-n{margin-left:6px;font-size:var(--sb-xs);color:var(--muted)}
/* account: list cards and email settings */
.sb-acct-lead{margin:-6px 0 14px;font-size:var(--sb-sm)}
.sb-lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px}
.sb-listcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);overflow:hidden;text-decoration:none;color:var(--ink);min-width:0}
.sb-listcard:hover{box-shadow:var(--shadow-md)}
.sb-listcard-ph{aspect-ratio:16/10;background:#e9e3da center/cover}
.sb-listcard-txt{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.sb-listcard-txt b{font:600 var(--sb-md) var(--brand);overflow-wrap:anywhere}
.sb-listcard-txt small{font-size:var(--sb-xs);color:var(--muted)}
.sb-listcard .sb-people{margin-top:6px}
.sb-notify{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);overflow:hidden}
.sb-notify-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:14px 18px;border-bottom:1px solid #efe9e0;cursor:default}
.sb-notify-row:last-child{border-bottom:0}
.sb-notify-row>span{flex:999 1 260px;display:flex;flex-direction:column;min-width:0}
.sb-notify-row b{font:600 var(--sb-base) var(--brand)}
.sb-notify-row small{font-size:var(--sb-xs);color:var(--muted)}
.sb-notify-row select,.sb-search-alert select{flex:1 1 150px;max-width:220px;height:40px;padding:0 32px 0 12px;border:1px solid var(--line-strong);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f1e1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/11px no-repeat;-webkit-appearance:none;appearance:none;font:500 16px var(--brand);color:var(--ink)}
.sb-acct-head .sb-seg{margin-left:0}
.sb-acct-head .sb-acct-add{margin-left:auto}
/* the list page */
.sb-lhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px;margin-bottom:16px}
.sb-lhead-main{flex:999 1 320px;min-width:0}
.sb-lhead .sb-h1{margin:0 0 10px}
.sb-lhead-acts{position:relative;display:flex;gap:8px;flex:none}
.sb-lmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column}
.sb-lmenu button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:8px;font:500 var(--sb-base) var(--sans);color:var(--ink);cursor:pointer}
.sb-lmenu button:hover{background:var(--paper)}
.sb-lmenu .danger{color:var(--accent-deep)}
.sb-invite{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:14px 16px;margin-bottom:16px;font-size:var(--sb-sm)}
.sb-invite p{margin:0 0 10px}
.sb-invite-row{display:flex;flex-wrap:wrap;gap:8px}
.sb-invite-row input{flex:1 1 240px;min-width:0;min-height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;font:500 var(--sb-sm) var(--sans);color:var(--ink-2);background:var(--paper)}
.sb-litems{display:flex;flex-direction:column;gap:14px}
.sb-li{display:flex;flex-wrap:wrap;gap:16px 20px;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:14px}
.sb-li-card{flex:1 1 280px;--min:200px;align-content:start}
.sb-li-card .sb-card{border-color:transparent}
.sb-li-talk{flex:999 1 320px;display:flex;flex-direction:column;gap:10px}
.sb-votes{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.sb-vote{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font:600 var(--sb-sm) var(--brand);cursor:pointer;color:var(--ink)}
.sb-vote b{min-width:.6em}
.sb-vote.up[aria-pressed=true]{background:#e6f2ea;border-color:var(--ok)}
.sb-vote.down[aria-pressed=true]{background:#f7e3df;border-color:var(--accent-deep)}
.sb-voters{display:flex;gap:2px;margin-left:4px}
.sb-voters .sb-face{width:24px;height:24px;font-size:10px}
.sb-voters .sb-face.up{border-color:#bfe0c9}.sb-voters .sb-face.down{border-color:#efc4bb}
.sb-li-remove{margin-left:auto;color:var(--muted)}
.sb-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sb-note-i{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:var(--paper)}
.sb-note-i>.sb-face{width:34px;height:34px}
.sb-note-i>div{min-width:0;flex:1}
/* a note from a Coral agent stands out a little */
.sb-note-i.agent{background:#fdeee9;box-shadow:inset 3px 0 0 var(--accent-deep)}
.sb-note-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:var(--sb-xs);color:var(--muted)}
.sb-note-who b{color:var(--ink);font-size:var(--sb-sm)}
.sb-agent-tag{font:700 10px var(--brand);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent-deep);padding:2px 7px;border-radius:999px}
.sb-note-who .sb-linkbtn{font-size:var(--sb-xs);color:var(--muted);margin-left:auto}
.sb-note-body{margin:2px 0 0;font-size:var(--sb-base);overflow-wrap:anywhere;white-space:pre-wrap}
.sb-note-form{display:flex;gap:8px}
.sb-note-form input{flex:1;min-width:0;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;font:inherit;font-size:16px;background:#fff}
.sb-li-by{margin:0;font-size:var(--sb-xs);color:var(--muted)}
.sb-card-gone{background:var(--paper)}

/* ---------- 13. pop-up form (SB.ask) ---------- */
.sb-ask-box{display:flex;flex-direction:column;gap:12px}
.sb-ask-box h2{font:400 var(--sb-xl)/1.1 var(--serif);margin:6px 40px 0 0}
.sb-ask-box>.sb-muted{margin:-4px 0 2px;font-size:var(--sb-sm)}
.sb-ask-box select{min-height:46px;padding:0 36px 0 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f1e1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/11px no-repeat;-webkit-appearance:none;appearance:none;font:inherit;font-size:16px;color:var(--ink)}
.sb-ask-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.sb-ask-foot .btn{margin:0;min-height:44px;flex:0 1 auto}
@media (max-width:640px){.sb-ask-foot .btn{flex:1}}

/* ---------- 14. agents: clients dashboard (search/agent.php), mobile first ---------- */
.sb-ag{padding-top:18px;padding-bottom:40px}
.ag-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px}
.ag-head .sb-h1{margin:0}
.ag-head .sb-kicker{margin-bottom:6px}
.ag-days{display:flex;gap:4px;padding:3px;background:#fff;border:1px solid var(--sb-line);border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ag-days button{flex:none;border:0;background:none;border-radius:999px;padding:7px 12px;font:600 var(--sb-xs) var(--brand);color:var(--ink-2);cursor:pointer}
.ag-days button[aria-pressed=true]{background:var(--ink);color:#fff}
.ag-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:8px;margin:16px 0 4px}
.ag-stats div{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r-sm);padding:10px 12px;display:flex;flex-direction:column}
.ag-stats b{font:700 var(--sb-lg)/1.1 var(--brand)}
.ag-stats span{font-size:var(--sb-xs);color:var(--muted)}
.ag-tabs{position:sticky;top:var(--sb-bar);z-index:6;display:flex;gap:6px;margin:12px calc(-1 * var(--gutter)) 12px;padding:8px var(--gutter);background:var(--paper);overflow-x:auto;scrollbar-width:none}
.ag-tabs button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 10px;white-space:nowrap;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font:600 var(--sb-sm) var(--brand);color:var(--ink);cursor:pointer}
.ag-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.ag-tabs span:empty{display:none}
.ag-tabs span{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-pale);color:var(--accent-deep);font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.ag-tabs [aria-selected=true] span{background:#fff;color:var(--ink)}
/* phones: one pane at a time; computers: clients always beside the feed */
.ag-layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.ag-main{flex:999 1 520px;min-width:0}
.ag-side{flex:1 1 280px;min-width:0}
.sb-ag[data-tab=feed] [data-pane=new],.sb-ag[data-tab=feed] [data-pane=clients],
.sb-ag[data-tab=new] [data-pane=feed],.sb-ag[data-tab=new] [data-pane=clients],
.sb-ag[data-tab=clients] [data-pane=feed],.sb-ag[data-tab=clients] [data-pane=new]{display:none}
@media (min-width:960px){
  .ag-tab-clients{display:none!important}
  .ag-tabs button{flex:none;padding:0 16px}
  .sb-ag[data-tab] [data-pane=clients]{display:block}
  .ag-side{position:sticky;top:calc(var(--sb-bar) + 64px);max-width:380px;max-height:calc(100dvh - var(--sb-bar) - 80px);overflow:auto;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:12px}
}
.ag-face{width:38px;height:38px;font-size:12px;background:var(--accent-pale);color:var(--accent-deep);border:0}
.ag-blank{list-style:none;background:#fff;border:1px dashed var(--line-strong);border-radius:var(--sb-r);padding:18px;color:var(--ink-2);font-size:var(--sb-sm)}
.ag-blank p{margin:0}
/* activity */
.ag-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ag-ev{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:12px}
.ag-ev-txt{min-width:0;display:flex;flex-direction:column;gap:8px}
.ag-ev-txt>p{margin:0;font-size:var(--sb-base);line-height:1.4}
.ag-ev-txt>p a{color:var(--ink);text-decoration:none}
.ag-ev-ico{margin-left:4px}
.ag-when{float:right;margin-left:8px;font-size:var(--sb-xs);color:var(--muted)}
.ag-ev-home{display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--sb-r-sm);background:var(--paper);color:var(--ink);text-decoration:none;min-width:0}
.ag-ev-home:hover{background:#efeae2}
.ag-thumb{flex:none;width:64px;height:48px;border-radius:8px;background:#e2dbd0 center/cover}
.ag-ev-home>span:last-child{display:flex;flex-direction:column;min-width:0}
.ag-ev-home b{font:600 var(--sb-sm)/1.3 var(--brand);overflow-wrap:anywhere}
.ag-ev-home small{font-size:var(--sb-xs);color:var(--muted)}
.ag-ev blockquote{margin:0;padding:8px 12px;border-left:3px solid var(--accent);background:#fdf6f3;border-radius:0 10px 10px 0;font-size:var(--sb-sm);white-space:pre-wrap;overflow-wrap:anywhere}
.ag-ev-up .ag-ev-ico,.ag-ev-save .ag-ev-ico{color:var(--accent-deep)}
.ag-ev-show{border-color:#e9c9bf;box-shadow:inset 3px 0 0 var(--accent-deep)}
/* new listings */
.ag-group{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:12px;margin-bottom:12px}
.ag-group>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ag-group-who{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink);text-decoration:none}
.ag-group-who>span{display:flex;flex-direction:column;min-width:0}
.ag-group-who b{font:600 var(--sb-base)/1.25 var(--brand)}
.ag-group-who small{font-size:var(--sb-xs);color:var(--muted);overflow-wrap:anywhere}
.ag-count{flex:none;font:700 var(--sb-xs) var(--brand);padding:5px 10px;border-radius:999px;background:var(--accent-pale);color:var(--accent-deep);white-space:nowrap}
.ag-empty .ag-count{background:var(--paper);color:var(--muted)}
/* a swipeable row of listing cards (photo on top: the row isn't a "narrow column") */
.ag-strip.sb-grid{container:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,74%);grid-template-columns:none;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 -12px;padding-left:12px;padding-right:12px;scroll-padding:0 12px}
.ag-strip>.sb-card{scroll-snap-align:start}
.ag-strip>.ag-loading{grid-column:1/-1;margin:4px 0}
@media (min-width:640px){.ag-strip.sb-grid{grid-auto-columns:240px}}
.ag-more{display:inline-block;margin-top:8px;font:600 var(--sb-sm) var(--brand);color:var(--accent-deep)}
.ag-empty .ag-strip,.ag-empty .ag-more{display:none}
/* clients */
.ag-find{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--muted);margin-bottom:8px}
.ag-find input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.ag-clients{list-style:none;margin:0;padding:0}
.ag-crow{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:var(--sb-r-sm);color:var(--ink);text-decoration:none}
.ag-crow:hover{background:var(--paper)}
.ag-crow-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ag-crow-txt b{font:600 var(--sb-base)/1.3 var(--brand);overflow-wrap:anywhere}
.ag-crow-txt small{font-size:var(--sb-xs);color:var(--muted)}
.ag-crow-n{flex:none;display:flex;gap:6px;font:600 var(--sb-xs) var(--brand);color:var(--ink-2)}
.ag-clients li+li .ag-crow{border-top:1px solid #f1ede7}
.ag-hint{font-size:var(--sb-xs);color:var(--muted);margin:10px 6px 0}
.ag-hint a{color:var(--accent-deep)}
/* one client */
.ag-client{display:flex;flex-direction:column;gap:12px;max-width:860px}
.ag-back{font:600 var(--sb-sm) var(--brand);color:var(--accent-deep);text-decoration:none}
.ag-chead{display:flex;gap:14px;align-items:center}
.ag-chead .ag-face{width:56px;height:56px;font-size:var(--sb-md)}
.ag-chead h1{font:400 var(--sb-2xl)/1 var(--serif);margin:0;overflow-wrap:anywhere}
.ag-chead p{margin:4px 0 6px;font-size:var(--sb-sm);color:var(--muted);overflow-wrap:anywhere}
.ag-chip{display:inline-block;font:600 var(--sb-xs) var(--brand);padding:4px 10px;border-radius:999px;background:#f0ede9;color:var(--ink-2)}
.ag-chip.ok{background:#e6f2ea;color:var(--ok)}
.ag-acts{display:flex;flex-wrap:wrap;gap:8px}
.ag-acts .btn{margin:0}
.ag-card{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:14px;container-type:inline-size}
.ag-card>header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ag-card h2{font:400 var(--sb-lg)/1.15 var(--serif);margin:0}
.ag-n{font:600 var(--sb-xs) var(--brand);color:var(--muted);vertical-align:middle;margin-left:4px}
.ag-card .ag-group{border:0;padding:0;margin:0 0 14px}
.ag-card .ag-strip.sb-grid{margin:0 -14px;padding-left:14px;padding-right:14px}
.ag-searches{list-style:none;margin:0;padding:0}
.ag-searches li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid #f1ede7}
.ag-searches li:first-child{border-top:0;padding-top:0}
.ag-searches li>div{flex:999 1 220px;min-width:0;display:flex;flex-direction:column}
.ag-searches a{color:var(--ink);text-decoration:none}
.ag-searches b{font:600 var(--sb-base)/1.3 var(--brand);overflow-wrap:anywhere}
.ag-searches small{font-size:var(--sb-xs);color:var(--muted)}
.ag-alert select{height:38px;padding:0 30px 0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f1e1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 11px center/10px no-repeat;-webkit-appearance:none;appearance:none;font:500 16px var(--brand);color:var(--ink)}
.ag-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.ag-x:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
.ag-lines{list-style:none;margin:0;padding:0}
.ag-lines li{display:flex;flex-direction:column;padding:7px 0;border-top:1px solid #f1ede7;font-size:var(--sb-sm)}
.ag-lines li:first-child{border-top:0;padding-top:0}
.ag-lines a{color:var(--ink);overflow-wrap:anywhere}
.ag-lines small{color:var(--muted);font-size:var(--sb-xs)}
/* map: searching for a client */
.sb-forclient{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 6px 6px 14px;background:#fff;border-radius:999px;box-shadow:var(--shadow-lg);font-size:var(--sb-sm);white-space:nowrap}
.sb-forclient span{overflow:hidden;text-overflow:ellipsis}
.sb-forclient .btn{margin:0;min-height:34px}
.sb-forclient a{font:600 var(--sb-xs) var(--brand);color:var(--muted);padding:0 8px}
@media (max-width:900px){.sb-forclient{top:56px}.sb-forclient span{display:none}}
.ag-clients .ag-hint{list-style:none;padding:10px 4px 0}
/* "Keeps looking at": repeats stand out, hot homes (3+ views in 5 days, or shared) get the red mark */
.ag-viewed li{position:relative}
.ag-viewed small{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ag-vtag{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;background:var(--accent-pale);color:var(--accent-deep);font:700 var(--sb-xs) var(--brand)}
.ag-viewed li.is-rep>a{font-weight:600}
.ag-viewed li.is-hot{padding-left:14px}
.ag-viewed li.is-hot::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:4px;border-radius:4px;background:var(--accent-deep)}
.ag-viewed li.is-hot>a{font-weight:700}
.ag-viewed li.is-hot .ag-vtag{background:var(--accent-deep);color:#fff}
.ag-viewed li.is-hot:first-child::before{top:0}
/* 16. search box: our own small × instead of the browser's */
.sb-q input::-webkit-search-cancel-button,.sb-q input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.sb-qclear{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:-6px;border:0;border-radius:50%;background:var(--line);color:var(--ink-2);cursor:pointer;padding:0;position:relative}
.sb-qclear::before{content:"";position:absolute;inset:-9px}   /* 44 px to tap */
.sb-qclear:hover{background:var(--line-strong);color:var(--ink)}
.sb-qclear[hidden]{display:none}
/* 17. homes at one spot: one pin with a count; units of one house in one card (map.js mergeUnits) */
.sb-pin-multi{padding-right:5px}
.sb-pin-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent-pale);color:var(--accent-deep);font:800 11px/1 var(--brand)}
.sb-pin.on .sb-pin-n,.sb-pin.hl .sb-pin-n{background:#fff}
.sb-pin-sold .sb-pin-n{background:#dfe8f1;color:var(--sold)}.sb-pin-off .sb-pin-n{background:#eceae7;color:var(--ink-2)}
.sb-units{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:var(--sb-xs)}
.sb-units>span{width:100%;color:var(--muted);font-weight:600}
.sb-units a{display:inline-flex;gap:4px;align-items:baseline;padding:5px 10px;border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:var(--sb-xs);white-space:nowrap}
.sb-units a:hover{background:var(--accent-pale)}
.sb-pop-h{margin:0 0 8px;font:700 var(--sb-sm) var(--brand)}
.sb-pop-list{display:flex;flex-direction:column;gap:10px;max-height:min(420px,60vh);overflow:auto}
/* 18. listing key numbers: icon tiles, no words (_inc.php sb_fact_tiles; record.php builds the same) */
.sb-ft{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.sb-ft-row{display:flex;gap:6px}
.sb-ft-row>span{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 6px;border:1px solid var(--sb-line);border-radius:var(--sb-r-sm);background:#fff;color:var(--ink-2);white-space:nowrap;cursor:default;min-width:0}
.sb-ft-row svg{width:17px;height:17px;flex:none}
.sb-ft-row b{font:700 var(--sb-base)/1.2 var(--brand);color:var(--ink);font-variant-numeric:tabular-nums}
.sb-summary .sb-ft-row>span{background:var(--paper);border-color:transparent}
@media (max-width:360px){.sb-ft-row{flex-wrap:wrap}}
.sb-units-lp{margin-top:10px;padding-top:0;border-top:0}
@media (max-width:900px){.sb-tiles-a .k-map.sb-span2{order:5}}   /* houses on phones: the map comes before the comparable homes */
/* 19. price history rows (search.js SB.historyHtml): price, status and listing number; dates and days on market below */
.sb-hr{padding:12px 0;border-bottom:1px solid #efe9e0}
.sb-hr:last-child{border-bottom:0}
.sb-hr1{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.sb-hr1 .num{font:800 var(--sb-md)/1.2 var(--brand);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sb-hr1 .ev{padding:3px 10px;border-radius:999px;background:var(--paper);font-size:var(--sb-xs)}
.sb-hr1 .ev-for-sale,.sb-hr1 .ev-for-lease{background:#e6f2ea}
.sb-hr1 .ev-sold,.sb-hr1 .ev-leased{background:var(--accent-pale)}
.sb-hr1 .ev-terminated,.sb-hr1 .ev-expired,.sb-hr1 .ev-suspended,.sb-hr1 .ev-cancelled{background:#f8efd9}
.sb-hr-mls{margin-left:auto}
.sb-hr2{margin-top:4px;font-size:var(--sb-sm);color:var(--ink-2)}
.sb-hr2 span{color:var(--muted)}
/* 20. phones: one big photo and two beside it (the other two tiles hide; "All photos" still opens every photo) */
@media (max-width:640px){
  .sb-mosaic{grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,clamp(96px,28vw,150px))}
  .sb-mosaic>.sb-ph:nth-child(n+4){display:none}
}
.sb-hr1{flex-wrap:nowrap}.sb-hr1 .ev{white-space:nowrap}.sb-hr1 .num{white-space:nowrap}
@container (max-width:400px){.sb-hr1{gap:6px}.sb-hr1 .ev{padding:2px 8px}.sb-hr1 .num{font-size:var(--sb-base)}.sb-hr1 .sb-mlslink,.sb-hr1 .sb-mls-cur{padding:3px 7px}}
/* condos: the map comes before the building (variant A orders tiles by number) */
.sb-tiles-a .k-map.sb-span3{order:3}
/* 21. easier to read on a phone: price history and the Key facts / Description / Rooms card one step bigger */
.sb-hr1 .num{font-size:1.125rem}
.sb-hr1 .ev,.sb-hr1 .sb-mlslink,.sb-hr1 .sb-mls-cur{font-size:var(--sb-sm)!important}
.sb-hr2{font-size:var(--sb-base)}
.sb-factgrid span{font-size:var(--sb-sm)}
.sb-factgrid b{font-size:var(--sb-md)}
.sb-desc{font-size:var(--sb-md)}
.sb-room{font-size:var(--sb-base)}
@container (max-width:400px){.sb-hr1 .num{font-size:var(--sb-md)}.sb-hr1{gap:6px}.sb-hr1 .ev{padding:2px 8px}}
@container (max-width:350px){.sb-hr1 .num{font-size:var(--sb-md)}.sb-hr1 .ev{padding:2px 7px}}
@container (max-width:290px){.sb-hr1{flex-wrap:wrap}}
/* price history: listing number on the right of the first line; dates use the full width below */
.sb-hr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
.sb-hr1{grid-column:1;grid-row:1;min-width:0}
.sb-hr-mls{grid-column:2;grid-row:1;margin:0}
.sb-hr2{grid-column:1/-1;grid-row:2}
/* phones: the List / Map switch is an icon only (its name stays for screen readers) */
@media (max-width:900px){.sb-viewbtn{width:52px;height:52px;min-height:0;padding:0;justify-content:center}.sb-viewbtn span{display:none}.sb-viewbtn svg{width:22px;height:22px}}
/* 22. listing-date menu: on computers just the for-sale dates (sold / de-listed have their own menus) */
.sb-when-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-when-h,.sb-when-past{display:none}
@media (max-width:900px){
  /* phones: one menu with two columns, for sale | sold & de-listed, both set at once (like HouseSigma) */
  .sb-filters>.sb-dd-split[data-mode=active]{display:flex}
  .sb-filters>.sb-dd-split[data-mode=sold],.sb-filters>.sb-dd-split[data-mode=delisted]{display:none}
  .sb-filters .sb-dd-split[data-mode=active] .sb-dd-btn span::before{content:none}
  .sb-filters [data-dd=listed] [data-dd-label]{font-weight:500}
  .sb-filters [data-dd=listed] [data-dd-label] b{font-weight:800}
  .sb-dd-list.sb-dd-when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 6px;padding:12px 8px}
  .sb-dd-when>.sb-dd-h{display:none}
  .sb-when-past{display:flex;border-left:1px solid var(--sb-line);padding-left:6px}
  .sb-when-h{display:block;margin:2px 10px 6px;font:700 var(--sb-md) var(--brand);color:var(--ink)}
  /* bigger, easier text in every drop-down menu */
  .sb-dd-panel .sb-opt{font-size:1.0625rem;min-height:46px;gap:10px}
  .sb-dd-panel .sb-opt input{width:20px;height:20px}
  .sb-dd-list .sb-dd-h{font-size:1.0625rem}
  /* the list and locate buttons: the same round size */
  .sb-viewbtn,.sb-locate{width:50px;height:50px;min-height:0;padding:0;border-radius:50%;justify-content:center}
  .sb-locate{right:14px;bottom:calc(86px + env(safe-area-inset-bottom))}
  .sb-viewbtn svg,.sb-locate svg{width:22px;height:22px}
}
@media (max-width:900px){
  .sb-filters>[data-dd=listed]{flex:1.45 1 0}
  .sb-dd-when .sb-opt{font-size:1rem;gap:8px;padding:0 6px}
  .sb-dd-when .sb-opt input:checked+span{font-weight:700}
}
.sb-when-col .sb-opt:has(input[value=""]){border-top:1px solid var(--sb-line);border-bottom:1px solid var(--sb-line);border-radius:0;margin:4px 0}
@media (max-width:900px){.sb-when-h{position:sticky;top:-12px;z-index:1;background:#fff;margin:0;padding:12px 10px 8px}}
/* 23. soft coral instead of dark red (Oct 7): fills use the brand coral, small text and links a slightly deeper coral so they stay easy to read */
.sb{--accent-deep:#1f1e1c;--coral-fill:#e0705f}   /* Oct 8: no dark red anywhere: small text and links are ink, coral only as a fill */
.sb-btn-deep,.sb-book-bar,.sb-tool-clear,.sb-more-n,.sb-saved-pill.drop,.sb-agent-tag,.sb-comp-tabs button[aria-selected=true] span,.ag-viewed li.is-hot .ag-vtag{background:var(--coral-fill)}
.sb-btn-deep:hover,.sb-book-bar:hover{background:#d4614f}
.sb-dd-split.on{border-color:var(--coral-fill)}
.sb-dd-split.on .sb-mode{background:var(--coral-fill)}
@media (max-width:900px){.sb-modeseg button[aria-pressed=true]{background:var(--coral-fill)}}
.sb-range-track i,.sb-dotpin,.sb-map-btn::before,.ag-viewed li.is-hot::before{background:var(--coral-fill)}
.sb-range input::-webkit-slider-thumb{border-color:var(--coral-fill)}
.sb-range input::-moz-range-thumb{border-color:var(--coral-fill)}
.sb-opt input,.sb-check input,.sb-calc-form input,.sb-consent input,.sb-checkrow input{accent-color:var(--coral-fill)}
.sb-opt input:checked+span{color:var(--ink);font-weight:700}
.sb-h1 em,.sb-h2 em,.sb-hero h1 em,.sb-row-head h2 em,.sb-res-head h1 em,.sb-dialog h2 em,.sb-market-h em,.sb-hi em{color:var(--coral-fill)}
.sb-card.on{outline-color:var(--coral-fill)}
/* 24. listing pages on phones: flat like Airbnb. White page, sections split by space and a thin line; boxes only on things you
   tap or fill in (photos, buttons, key-number tiles, listing numbers, comparable homes, the map, the showing form). Computers keep the cards. */
@media (max-width:640px){
  body.sb:has(.sb-lp){background:#fff}
  .sb-lp .sb-tiles{gap:0!important}
  .sb-lp .sb-tiles .sb-tile{background:transparent;border:0;border-radius:0;box-shadow:none;padding:28px 0!important;border-top:1px solid #ebe6df}
  .sb-lp .sb-tiles .sb-tile h2,.sb-lp .sb-tiles .sb-tile-h h2{font:700 1.3125rem/1.25 var(--brand)!important;letter-spacing:-.01em}
  .sb-lp .sb-tiles .sb-tile.sb-bldg{background:var(--dark);border:0;border-radius:14px;padding:22px 16px!important;margin:28px 0}   /* the building card stays dark on phones */
  .sb-lp .sb-tiles .sb-tile.sb-bldg h2.sb-bldg-name{font:400 1.75rem/1.05 var(--serif)!important;color:#f6f3ee}
  .sb-lp .sb-tiles .sb-tile-map{padding:0!important;border-top:0;margin:28px 0;border-radius:14px;overflow:hidden;background:#ebe6dd}
  .sb-lp .sb-summary{background:transparent;border:0;border-radius:0;padding:4px 0 0}
  .sb-lp .sb-ft-row>span,.sb-lp .sb-summary .sb-ft-row>span{background:#f7f5f2;border-color:transparent}
  .sb-lp .sb-a-cols{margin-top:8px}
}

/* ---------- 24. search home: big map, neighbourhoods, members' home (Oct 8) ---------- */
.sb-home .sb-hero{padding-bottom:20px}
.sb-bigmap{padding-top:8px}
.sb-bigmap-link{position:relative;display:block;height:clamp(280px,40vw,460px);border-radius:var(--r-lg);overflow:hidden;background:#e9eee9;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-md)}
.sb-bigmap-map,.sb-bigmap-map.maplibregl-map{position:absolute!important;inset:0;width:100%;height:100%}
.sb-bigmap-map .maplibregl-ctrl-bottom-right{z-index:1}
.sb-bigmap-bar{position:absolute;left:clamp(12px,2.5vw,28px);right:clamp(12px,2.5vw,28px);bottom:clamp(12px,2.5vw,28px);display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;
  background:#fff;border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-lg)}
.sb-bigmap-bar>span:first-child{flex:1 1 320px;min-width:0;display:flex;flex-direction:column}
.sb-bigmap-bar b{font:700 var(--sb-lg)/1.2 var(--brand)}
.sb-bigmap-bar small{font-size:var(--sb-sm);color:var(--muted)}
.sb-bigmap-go{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font:700 var(--sb-base) var(--brand)}
.sb-bigmap-link:hover .sb-bigmap-go{background:#3a3835}
.sb-bigmap-link:focus-visible{outline:3px solid var(--coral-fill);outline-offset:3px}
.sb-hoods{padding-top:48px}
.sb-hood-tabs{display:flex;flex-wrap:wrap;gap:8px}
.sb-hood-tabs button{font:600 var(--sb-sm) var(--brand);min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);cursor:pointer}
.sb-hood-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.sb-hood-grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.sb-hood-grid a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 16px;background:#fff;border-radius:14px;color:var(--ink);text-decoration:none;font:600 var(--sb-base) var(--brand)}
.sb-hood-grid a:hover{background:var(--accent-pale)}
.sb-hood-grid svg{flex:none;color:var(--muted)}
@media (max-width:900px){.sb-hoods{display:none}}   /* phones: the map does this job */
.sb-join{padding-top:40px}
.sb-join-box{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:24px 28px}
.sb-join-box>div{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:4px}
.sb-join-box b{font:700 var(--sb-lg)/1.2 var(--brand)}
.sb-join-box span{color:#d9d4cc;font-size:var(--sb-sm)}
.sb-btn-coral{background:var(--coral-fill);color:var(--ink);font-weight:800}
.sb-btn-coral:hover{background:#e7826f}
body.sb-member .sb-join{display:none}
.sb-market{padding-top:40px}
.sb-home-legal{padding:8px 0 56px}
/* members */
#sb-dash{display:flex;flex-direction:column;gap:20px;padding-top:4px;padding-bottom:12px}
#sb-dash[hidden]{display:none}
.sb-dsec{background:#fff;border-radius:var(--r-lg);padding:clamp(16px,2vw,22px)}
.sb-dhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:14px}
.sb-dhead h2{font:700 var(--sb-lg) var(--brand);margin:0}
.sb-dhead a{margin-left:auto;font:600 var(--sb-sm) var(--brand);color:var(--ink)}
.sb-dsub{font-size:var(--sb-sm);color:var(--muted)}
.sb-dpill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font:700 var(--sb-xs) var(--brand);background:#f1efeb;color:var(--ink);white-space:nowrap}
.sb-dpill.coral{background:var(--coral-fill);color:var(--ink)}
.sb-ds+.sb-ds{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.sb-ds-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:12px;min-width:0}
.sb-ds-head b{font:700 var(--sb-md) var(--brand);overflow-wrap:anywhere}
.sb-ds-head small{color:var(--muted);font-size:var(--sb-sm)}
.sb-ds-head a{margin-left:auto;font:600 var(--sb-sm) var(--brand);color:var(--ink)}
.sb-dmore{display:flex;align-items:center;justify-content:center;min-height:120px;border:1px dashed var(--line-strong);border-radius:var(--r-md);font:600 var(--sb-base) var(--brand);color:var(--ink);text-decoration:none}
.sb-dquiet{color:var(--muted);font-size:var(--sb-sm);margin:0}
.sb-dh{display:flex;flex-direction:column;gap:8px;min-width:0}
.sb-dh.blank .sb-dh-news{visibility:hidden}
.sb-dh-news{align-self:flex-start;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:999px;padding:3px 10px;font:700 var(--sb-xs) var(--brand);background:#f1efeb;color:var(--ink)}
.sb-dh.good .sb-dh-news{background:#eaf3ee;color:#1f5a3d}
.sb-dh.coral .sb-dh-news{background:var(--accent-pale)}
.sb-dh.ink .sb-dh-news{background:var(--ink);color:#fff}
.sb-dlists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.sb-dl{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;color:var(--ink);text-decoration:none;min-width:0}
.sb-dl:hover{border-color:var(--line-strong)}
.sb-dl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sb-dl-top b{font:700 var(--sb-md) var(--brand)}
.sb-dl-top small{margin-left:auto;color:var(--muted);font-size:var(--sb-sm)}
.sb-dl ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--sb-sm)}
.sb-dl li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.sb-dl li>span:last-child{min-width:0;overflow-wrap:anywhere}
.sb-dl li svg{vertical-align:-3px}
.sb-dl li small{color:var(--muted);margin-left:4px;white-space:nowrap}
.sb-dvote.up{color:#1f5a3d}.sb-dvote.down{color:var(--ink-2)}.sb-dvote.down svg{transform:rotate(180deg)}
.sb-dl-quiet{color:var(--muted);font-size:var(--sb-sm)}
.sb-dagent{display:flex;flex-wrap:wrap;gap:20px 24px;align-items:center;background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.sb-dagent-face{width:76px;height:76px;flex:none;border-radius:999px;background:var(--coral-fill);color:var(--ink);font:800 24px var(--brand);display:flex;align-items:center;justify-content:center}
.sb-dagent>div:nth-child(2){flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:2px}
.sb-dagent small{color:#d9d4cc;font:600 var(--sb-sm) var(--brand)}
.sb-dagent b{font:400 clamp(1.6rem,3vw,2.2rem)/1.1 var(--serif)}
.sb-dagent span{color:#d9d4cc}
.sb-dagent-btns{display:flex;flex-wrap:wrap;gap:10px}
.sb-dbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;font:700 var(--sb-base) var(--brand);text-decoration:none;white-space:nowrap}
.sb-dbtn.light{background:#fff;color:var(--ink)}
.sb-dbtn.line{border:1px solid #6b665f;color:#fff}
.sb-dbtn.dark{background:var(--ink);color:#fff}
.sb-dbtn.line-dark{border:1px solid var(--line-strong);color:var(--ink)}
.sb-dstart{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sb-dstart article{background:#fff;border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:10px}
.sb-dstart h2{font:700 var(--sb-lg) var(--brand);margin:0}
.sb-dstart p{margin:0;color:var(--ink-2)}
.sb-dstart .sb-dbtn{margin-top:auto;align-self:stretch}
.sb-dstart-i{width:48px;height:48px;border-radius:14px;background:var(--accent-pale);display:flex;align-items:center;justify-content:center}
@media (max-width:640px){
  .sb-bigmap-go{width:100%;justify-content:center}
  .sb-dmore{min-height:52px}
  .sb-ds-head a,.sb-dhead a{margin-left:0;flex-basis:100%}
  .sb-dagent-btns,.sb-dagent-btns .sb-dbtn{flex:1 1 auto}
}
/* ---------- 25. neighbourhoods page (search/neighbourhoods.php) ---------- */
.sb-hoodpick{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;padding-bottom:64px}
.sb-hoodpick .sb-hood-tabs{flex:1 1 240px;min-width:0;flex-direction:column;flex-wrap:nowrap;gap:6px}
.sb-hoodpick .sb-hood-tabs button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;border-radius:14px;text-align:left;font-size:var(--sb-base)}
.sb-hoodpick .sb-hood-tabs button small{font-weight:500;opacity:.7}
.sb-hood-panel{flex:999 1 620px;min-width:0;background:#fff;border-radius:var(--r-lg);padding:clamp(16px,2.5vw,26px)}
.sb-hood-panel[hidden]{display:none}
.sb-hood-panel h2{font:400 var(--sb-xl)/1.1 var(--serif);margin:0 0 16px}
.sb-hood-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
.sb-hood-item{display:flex;flex-direction:column;border-radius:14px;background:var(--paper);overflow:hidden;min-width:0}
.sb-hood-item>a:first-child{display:flex;flex-direction:column;justify-content:center;min-height:58px;padding:8px 16px;color:var(--ink);text-decoration:none}
.sb-hood-item>a:first-child:hover{background:var(--paper-2)}
.sb-hood-item b{font:600 var(--sb-base) var(--brand)}
.sb-hood-item span{font-size:var(--sb-xs);color:var(--muted)}
.sb-hood-guide{border-top:1px solid var(--line);padding:8px 16px;font:600 var(--sb-xs) var(--brand);color:var(--ink)}
@media (max-width:900px){
  .sb-hoodpick{gap:14px}
  .sb-hoodpick .sb-hood-tabs{flex-direction:row;flex-wrap:wrap;flex-basis:100%}
  .sb-hoodpick .sb-hood-tabs button{min-height:40px;border-radius:999px}
  .sb-hoodpick .sb-hood-tabs button small{display:none}
}
.sb-hoods-all{margin-left:auto;font:600 var(--sb-sm) var(--brand);color:var(--ink)}
@media (min-width:901px){.sb-chip-hoods{display:none}}   /* desktop has the picker on the page itself */
.sb-avatar{overflow:hidden;line-height:1;text-align:center}
.sb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* map credit (OpenStreetMap licence): shows for 5 seconds, then shrinks to a small "i" in the corner (dash.js adds .is-small) */
.sb-bigmap-credit{position:absolute;top:8px;right:10px;z-index:1;display:flex;align-items:center;min-height:16px;font-size:10px;line-height:1.3;color:#5e6366;background:rgba(255,255,255,.85);border-radius:999px;padding:2px 8px;pointer-events:none;transition:padding .4s ease}
.sb-bigmap-credit span{white-space:nowrap;overflow:hidden;max-width:300px;transition:max-width .4s ease,opacity .3s ease}
.sb-bigmap-credit i{display:none;font:italic 700 10px Georgia,serif;width:16px;height:16px;align-items:center;justify-content:center}
.sb-bigmap-credit.is-small{padding:0}
.sb-bigmap-credit.is-small span{max-width:0;opacity:0}
.sb-bigmap-credit.is-small i{display:inline-flex}
@media (max-width:640px){
  .sb-bigmap-link{height:440px}
  .sb-bigmap-bar{padding:14px;gap:10px}
  .sb-bigmap-bar b{font-size:1.15rem}
  .sb-bigmap-go{min-height:46px}
}

/* ---------- Clients (agents), Oct 2026 tidy: tabs on every screen size, clients as a full-width grid, and a cleaner
   client page (a header card, then two columns on computers) ---------- */
.ag-layout{display:block}
.sb-ag[data-tab=clients] .ag-main{display:none}
@media (min-width:960px){
  .ag-tab-clients{display:inline-flex!important}
  .sb-ag[data-tab=feed] [data-pane=clients],.sb-ag[data-tab=new] [data-pane=clients]{display:none}
  .ag-side{position:static;max-width:none;max-height:none;overflow:visible;background:none;border:0;border-radius:0;padding:0}
  .ag-tabs{position:static;margin:16px 0 14px;padding:0;background:none}
  .ag-feed{max-width:860px}
}
.ag-find{max-width:560px;height:46px;margin-bottom:14px;background:#fff}
.ag-clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.ag-clients li+li .ag-crow{border-top:1px solid var(--sb-line)}
.ag-crow{height:100%;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:12px 14px;gap:12px}
.ag-crow:hover{background:#fff;border-color:var(--line-strong);box-shadow:0 2px 10px rgba(31,30,28,.05)}
.ag-crow.on .ag-face{background:#e6f2ea;color:#1f5a3d}
.ag-crow-txt b{font-weight:700}
.ag-crow-n{flex-direction:column;align-items:flex-end;gap:2px;font-weight:600;color:var(--muted)}
.ag-clients>.ag-hint,.ag-clients>.ag-blank{grid-column:1/-1}
.ag-face{background:var(--accent-pale);color:var(--ink)}

/* the client page */
.ag-client{max-width:1180px;gap:14px}
.ag-back{color:var(--ink)}
.ag-who{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.ag-who .ag-chead{flex:1 1 320px;min-width:0}
.ag-chead h1{font:400 var(--sb-xl)/1.05 var(--serif)}
.ag-chead p{margin:4px 0 8px}
.ag-cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;align-items:start}
.ag-ccol{display:flex;flex-direction:column;gap:14px;min-width:0}
.ag-card{padding:16px 18px}
.ag-card h2{font:700 var(--sb-md)/1.2 var(--brand)}
.ag-card>header{margin-bottom:12px}
.ag-searches li{padding:12px 0}
.ag-searches li>div{flex:999 1 200px}
.ag-alert select{height:36px;font-size:15px}
.ag-cnew .ag-group.ag-empty{display:none}
.ag-cnew .ag-none{display:none;margin:0}
.ag-cnew.done:not(.has-new) .ag-none{display:block}
.ag-card .ag-group>header{margin-bottom:8px}
.ag-viewed li.is-hot .ag-vtag{background:var(--coral-fill);color:var(--ink)}
.ag-viewed li.is-hot::before{background:var(--coral-fill)}
.ag-lines li{padding:9px 0}
@media (max-width:640px){
  .ag-card{padding:14px}
  .ag-who .ag-acts{width:100%}
  .ag-who .ag-acts .btn{flex:1 1 auto;justify-content:center}
  .ag-chead .ag-face{width:48px;height:48px}
}
.ag-who>.ag-chead{justify-content:flex-start;flex-wrap:nowrap;margin:0;align-items:center}
/* phones: typing hides the bottom bar, so it doesn't float over the list above the keyboard */
@media (max-width:900px){ body:has(input:focus,textarea:focus,select:focus) .sb-tabbar{display:none} }

/* several homes at one pin: compact rows instead of squeezed cards */
.sb-pop-m .maplibregl-popup-close-button{top:8px;right:8px;width:28px;height:28px;font-size:18px}
.sb-pop-multi{width:340px;max-width:calc(100vw - 32px);padding:14px 10px 10px}
.sb-pop-multi .sb-pop-h{margin:0 4px 10px;padding-right:32px}
.sb-pop-multi .sb-pop-list{gap:2px;max-height:min(440px,60vh);overflow:auto;overscroll-behavior:contain}
.sb-row{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 30px;gap:10px;align-items:start;padding:8px;border-radius:10px;flex:none}
.sb-row:hover{background:#f6f3ee}
.sb-row .sb-card-link{position:absolute;inset:0;z-index:1}
.sb-row-ph{width:76px;height:64px;border-radius:8px;overflow:hidden;background:var(--tint)}
.sb-row-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sb-row-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.sb-row-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sb-row .sb-price{font:700 15px/1.2 var(--brand)}
.sb-row-badge{font-size:11px;color:var(--muted);white-space:nowrap}
.sb-row .sb-addr{font-size:13px;line-height:1.3;color:var(--ink)}
.sb-row .sb-facts{font-size:12px;gap:10px;margin:2px 0 0;flex-wrap:nowrap;white-space:nowrap}
.sb-row .sb-facts svg{width:13px;height:13px}
.sb-row .sb-brk{font-size:10.5px;line-height:1.3;color:var(--muted);margin:2px 0 0}
.sb-row-save{position:relative;z-index:2;width:30px;height:30px;font-size:16px;align-self:start;top:auto;right:auto;background:transparent}
.sb-row-save:hover{background:#fff}
.sb-row .sb-card-link:focus,.sb-row .sb-card-link:focus-visible{outline:none}

/* search home: what a free account gets you (visitors only) */
.sb-perks{padding-top:44px}
.sb-perks-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.sb-perks-grid li{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-perks-grid i{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:var(--accent-pale,#fbe7e1);color:var(--ink);margin-bottom:6px}
.sb-perks-grid b{font:700 var(--sb-base)/1.25 var(--brand)}
.sb-perks-grid span{font-size:var(--sb-sm);color:var(--muted);line-height:1.45}
.sb-perks-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:14px;background:var(--dark);color:#fff;border-radius:var(--sb-r);padding:16px 20px}
.sb-perks-cta span{color:#d9d4cc;font-size:var(--sb-sm)}
body.sb-member .sb-perks{display:none}

/* Phones: every menu opens as a sheet from the bottom of the screen, above the tab bar, never hanging off a button
   (a menu anchored to a button can run off the edge). New menus get data-menu or .sb-lmenu and inherit this. */
@media (max-width:700px){
  .sb-lmenu,[data-menu]{position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;min-width:0!important;max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;z-index:1000!important;
    border-radius:16px;padding:8px;box-shadow:0 0 0 100vmax rgba(31,30,28,.4),0 10px 30px rgba(0,0,0,.2)}
  .sb-lmenu button,[data-menu] button{width:100%;min-height:48px;font-size:16px;padding:12px 14px}
  html,body{overflow-x:clip}
}

/* ---------- 26. Oct 14 update (apps/search/NEXT.md) ---------- */
/* 1. big screens (27"): a wider list column, so the cards turn photo-on-top (their container is over 520px) — WebCards27Fix */
@media (min-width:1700px){
  .sb-mapapp{grid-template-columns:clamp(520px,34vw,870px) minmax(0,1fr)}
  .sb-list{--min:240px;gap:14px}
}
/* 7. sold and de-listed pins: option A, filled navy / grey with white text; for sale unchanged; the chosen pin turns ink */
.sb-pin-sold,.sb-pin-off{color:#fff}
.sb-pin-sold{background:var(--sold);border-color:var(--sold)}
.sb-pin-off{background:var(--off);border-color:var(--off)}
.sb-pin-sold::before,.sb-pin-off::before{display:none}
.sb-pin-sold::after{border-top-color:var(--sold);filter:none}
.sb-pin-off::after{border-top-color:var(--off);filter:none}
.sb-pin-sold .sb-pin-n{background:#fff;color:var(--sold)}
.sb-pin-off .sb-pin-n{background:#fff;color:var(--off)}
.sb-pin-sold.hl,.sb-pin-sold.on,.sb-pin-off.hl,.sb-pin-off.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sb-pin-sold.hl::after,.sb-pin-sold.on::after,.sb-pin-off.hl::after,.sb-pin-off.on::after{border-top-color:var(--ink)}
/* viewed pins (option B, AppPinsViewedB; map.js paintSeen): homes already opened keep the white pill, the coral dot
   becomes a small grey ✓ and the price softens to #555. Sold / de-listed (filled, no dot): a soft white ✓ before the price. */
.sb-pin.sb-pin-seen{color:#555}
.sb-pin.sb-pin-seen::before{display:block;width:9px;height:9px;border-radius:0;background:#9a9a9a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.sb-pin-sold.sb-pin-seen,.sb-pin-off.sb-pin-seen,.sb-pin.sb-pin-seen.hl,.sb-pin.sb-pin-seen.on{color:#fff}
.sb-pin-sold.sb-pin-seen::before,.sb-pin-off.sb-pin-seen::before,.sb-pin.sb-pin-seen.hl::before,.sb-pin.sb-pin-seen.on::before{background:rgba(255,255,255,.75)}
/* 2. listing page top: one big photo and two stacked beside it; summary below — WebListingNew */
.sb-mosaic3 .sb-gal-all{display:inline-flex;align-items:center;gap:8px}
@media (min-width:641px){
  .sb-mosaic3{grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,clamp(120px,16vw,222px))}
}
.sb-listedby{overflow-wrap:anywhere}
@media (min-width:901px){
  .sb-a-summary .sb-ft{flex-direction:row;flex-wrap:wrap;margin-top:16px}
  .sb-a-summary .sb-ft-row{display:contents}
  .sb-a-summary .sb-a-price .sb-bigprice{font-size:clamp(1.75rem,1.3rem + 1vw,2.125rem)}
}
.sb-addr-hidden{font-style:italic}
/* 13. follow this neighbourhood (Pawel's option A, Oct 14): a white card, the Coral wave in a pale circle, the place in bold,
   one muted line, an ink "+ Follow" pill (outline "✓ Following" once on). Inside the content column, never full-bleed */
.sb-hoodrow{position:relative;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);box-sizing:border-box;max-width:100%}
.sb-hood-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-pale,#fbe7e1);color:var(--coral-fill,#e0705f);display:flex;align-items:center;justify-content:center}
.sb-hood-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.sb-hood-place{font:800 14px/1.35 var(--brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-hood-short{display:none}
.sb-hood-t{font:500 12.5px/1.3 var(--brand);color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sb-hood-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:700 13px/1 var(--brand);cursor:pointer;white-space:nowrap}
.sb-hood-btn:hover{background:var(--ink-2,#3a3835)}
.sb-hoodrow.on .sb-hood-btn{background:#fff;color:var(--ink);border-color:var(--line-strong,rgba(31,30,28,.18))}
.sb-hoodrow.on .sb-hood-btn:hover{background:var(--paper,#f6f3ee)}
@media (max-width:640px){.sb-hoodrow.is-long .sb-hood-full{display:none}.sb-hoodrow.is-long .sb-hood-short{display:inline}}
.sb-hood-menu{top:calc(100% + 4px)}
.sb-tiles-a .sb-hoodrow{order:7}.sb-tiles-a .sb-hoodrow.is-condo{order:3}
@media (max-width:900px){.sb-tiles-a .sb-hoodrow:not(.is-condo){order:5}}
@media (max-width:640px){.sb-lp .sb-tiles .sb-hoodrow{margin:4px 0 20px}}
/* the Member brokerage under the PropTx notices, with "Our team" (item 8) */
.sb-brokerage{margin:6px 0 0;font-size:var(--sb-xs);color:var(--muted)}
.sb-brokerage a,.sb-book-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* sign-up step 3: the terms in their own scroll box; "I agree" works once they've been opened (Appendix B (c)/(vii)) */
/* sign-up step 3: terms in their own scroll box, one agree line, one opt-in, Reject / Agree side by side */
.sb-terms-box{height:260px;overflow-y:auto;overscroll-behavior:contain;margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-size:var(--sb-xs);line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere;box-sizing:border-box}
.sb-terms-box:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sb-terms-box h2{font:700 var(--sb-sm)/1.3 var(--brand)!important;margin:0 0 6px!important;color:var(--ink)}
.sb-terms-box p,.sb-terms-box ol{margin:0 0 8px}
.sb-terms-box ol{padding-left:18px}
.sb-terms-box li{margin:0 0 6px}
.sb-terms-link{margin:6px 0 0;font-size:var(--sb-xs);text-align:right}
.sb-terms-link a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sb-agree-line{margin:12px 0 0;font-size:var(--sb-sm);line-height:1.45;color:var(--ink-2)}
.sb-agree-line a{color:var(--accent-deep)}
.sb-optin{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:var(--sb-sm);line-height:1.45;cursor:pointer;min-width:0}
.sb-optin input{width:20px;height:20px;flex-shrink:0;margin:0;accent-color:var(--coral-fill)}
.sb-agree-btns{display:flex;gap:10px;margin-top:16px}
.sb-agree-btns .btn{flex:1 1 0;min-width:0;margin:0;min-height:48px;justify-content:center}
@media (max-width:640px){
  .sb-terms-box{height:45vh;height:45dvh}
  /* phones: Reject / Agree stay pinned at the bottom of the sheet; the name and terms scroll above them */
  .sb-dialog:has(.sb-step[data-step="3"]:not([hidden])){padding-bottom:0}
  .sb-agree-btns{position:sticky;bottom:0;z-index:2;margin:16px calc(-1 * clamp(20px,4vw,40px)) 0;padding:12px clamp(20px,4vw,40px) calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
}
/* PropTx #20 (iii) (VOW review C2): the listing brokerage is never set apart from the other details: same colour as the
   meta line, no rule above it (it still shares the small bottom line with the MLS® number) */
.sb-brk{color:var(--muted);border-top:0;padding-top:2px}
/* 25. key numbers, option C (Pawel, Oct 13, WebFactsC) — listing page (_inc.php sb_fact_tiles) and sold page (record.php):
   six white tiles 3 × 2, the grid capped at 760px; a 38px tinted icon square, a 13px label and a 22px bold value.
   Phones: 2 × 3 across the full width, icon beside the text (32px square, 20px value), the price under the address. */
.sb-kn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:760px;margin-top:18px}
.sb-kn-t{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px}
.sb-kn-i{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#f7f5f2;color:var(--ink-2)}
.sb-kn-i svg{width:20px;height:20px}
.sb-kn-tx{display:flex;flex-direction:column;min-width:0}
.sb-kn-l{font:500 13px/1.2 var(--brand);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-kn-v{margin-top:3px;font:800 22px/1.1 var(--brand);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-a-summary .sb-a-head{align-items:flex-end}
.sb-a-summary .sb-a-price .sb-bigprice{font:800 44px/1 var(--brand);letter-spacing:-.02em}
.sb-a-price .sb-price-note{margin-top:6px}
@media (max-width:900px) and (min-width:641px){.sb-a-summary .sb-a-price .sb-bigprice{font-size:36px}}
@media (max-width:640px){
  .sb-kn{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}   /* phones: 2 × 3 */
  .sb-kn-t{gap:8px;padding:10px}
  .sb-kn-i{width:32px;height:32px;border-radius:9px}
  .sb-kn-i svg{width:18px;height:18px}
  /* never wraps (base rule): 20px where it fits, scaled with the screen so "2,000–2,500" stays whole down to 320 */
  .sb-kn-v{font-size:clamp(13px,calc(7.8vw - 13.5px),20px)}
  .sb-a-summary .sb-a-head{flex-direction:column;align-items:stretch;gap:10px}
  .sb-a-summary .sb-a-head>div{flex:none}
  .sb-a-summary .sb-a-price{text-align:left}
  .sb-a-summary .sb-a-price .sb-bigprice{font-size:32px}
}
@media (max-width:360px){
  .sb-kn-t{gap:8px;padding:8px}
  .sb-kn-i{width:28px;height:28px;border-radius:8px}
  .sb-kn-i svg{width:16px;height:16px}
  .sb-kn-v{font-size:clamp(13px,calc(7.6vw - 11.5px),20px)}
}
/* the sold / past listing page uses the listing page's top (record.php) */
.sb-rec .sb-a-summary [data-now]{margin-top:16px}
.sb-rec .sb-a-summary{margin-bottom:12px}

/* Photo gallery (Oct 14, like the iPhone app): every photo full width, one under the other; a photo opens the viewer */
.sb-gallery{position:fixed;inset:0;z-index:290;background:#fff;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sb-gallery[hidden]{display:none}
.sb-gallery-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sb-gallery-top b{font:700 var(--sb-md)/1.2 var(--brand)}
.sb-gallery-x{width:40px;height:40px;border-radius:50%;border:1px solid #e5e5e5;background:#fff;font-size:18px;line-height:1;cursor:pointer;color:var(--ink)}
.sb-gallery-in{max-width:960px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.sb-gallery-brk{margin:0;font:400 var(--sb-sm)/1.35 var(--brand);color:var(--muted)}
.sb-gallery-tour{align-self:flex-start;gap:8px}
.sb-gallery-ph{display:block;width:100%;padding:0;border:0;background:var(--paper-2,#f3f3f3);border-radius:12px;overflow:hidden;cursor:zoom-in}
.sb-gallery-ph img{display:block;width:100%;height:auto;min-height:120px}
@media (max-width:640px){.sb-gallery-in{padding-left:0;padding-right:0}.sb-gallery-brk,.sb-gallery-tour{margin-left:16px;margin-right:16px}.sb-gallery-ph{border-radius:0}}

/* 23. Price history, Oct 15 (Pawel: option B on computers, B3 listing pill; phones just a bit bigger than before).
   search.js SB.historyHtml. Phones and narrow tiles: stacked rows. Wide tiles (700px+): summary tiles and a big table. */
.sb-hx{display:flex;flex-direction:column}
.sb-hsum,.sb-hxh{display:none}
.sb-hxr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"price ev mls" "dates dates dates";column-gap:10px;row-gap:4px;align-items:center;padding:13px 0;border-bottom:1px solid #eee}
.sb-hxr:last-child{border-bottom:0}
.sb-hxr .c-start,.sb-hxr .c-end,.sb-hxr .c-days{display:none}
.sb-hxr .c-price{grid-area:price;font:700 1.0625rem/1.2 var(--brand);letter-spacing:-.01em;white-space:nowrap}   /* Oct 15: no bigger than the rest of the row */
.sb-hxr .c-ev{grid-area:ev;display:flex;align-items:center;gap:8px;min-width:0}
.sb-hxr .c-ev small{font-size:var(--sb-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-hxr .c-dates{grid-area:dates;font-size:.9375rem;color:var(--ink-2)}
.sb-hxr .c-mls{grid-area:mls;justify-self:end}
.sb-hx .ev{padding:3px 10px;border-radius:999px;background:#f1f1f1;font:700 var(--sb-sm)/1.3 var(--brand);white-space:nowrap}
.sb-hx .ev-for-sale,.sb-hx .ev-for-lease{background:#111;color:#fff}
.sb-hx .ev-sold{background:#ef8d7d;color:#111}.sb-hx .ev-terminated,.sb-hx .ev-expired,.sb-hx .ev-suspended,.sb-hx .ev-cancelled{background:#f1f1f1;color:#5f5f5f}.sb-hx .ev-leased{background:#fbe7e1;color:#111}
.sb-hx-mls{display:inline-flex;align-items:center;gap:8px;border:2px solid #ef8d7d;border-radius:999px;padding:4px 5px 4px 12px;font:700 var(--sb-sm)/1.2 var(--brand);color:var(--ink)!important;text-decoration:none!important;white-space:nowrap}
.sb-hx-mls i{width:22px;height:22px;border-radius:50%;background:#ef8d7d;display:grid;place-items:center;color:#111}
.sb-hx-mls:hover{background:#fbe7e1}
.sb-hx-cur{font:600 var(--sb-xs)/1.3 var(--brand);color:var(--muted);white-space:nowrap}
.sb-hx-now{display:inline-flex;align-items:center;gap:5px;background:#111;color:#fff;border-radius:999px;padding:2px 9px;font:700 12px/1.4 var(--brand)}
.sb-hx-now::before{content:"";width:6px;height:6px;border-radius:50%;background:#ef8d7d}
@container (max-width:380px){.sb-hxr .c-ev small{display:none}.sb-hx-cur{font-size:11px}}
@container (min-width:700px){
  .sb-hsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;margin:4px 0 14px}
  .sb-hsum div{background:#f5f5f5;border-radius:14px;padding:16px 18px;min-width:0}
  .sb-hsum small{display:block;font:700 12px/1.3 var(--brand);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .sb-hsum b{font:800 26px/1.2 var(--brand);letter-spacing:-.03em;margin-right:6px}
  .sb-hsum span{font-size:14px;color:var(--muted)}
  .sb-hxh,.sb-hxr{display:grid;grid-template-columns:1.1fr 1.1fr .8fr 1.1fr 1.6fr 180px;grid-template-areas:none;column-gap:14px;align-items:center}
  .sb-hxh{padding:0 0 10px;border-bottom:2px solid #111}
  .sb-hxh span{font:700 13px/1.2 var(--brand);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .sb-hxh span:last-child{text-align:right}
  .sb-hxh span:nth-child(2),.sb-hxh span:nth-child(3),.sb-hxh span:nth-child(5),.sb-hxr .c-end,.sb-hxr .c-days{text-align:center}   /* Oct 15: Ended, On market and Result centred under their headers */
  .sb-hxr{padding:16px 0;font-size:1.0625rem}
  .sb-hxr .c-price,.sb-hxr .c-ev,.sb-hxr .c-mls,.sb-hxr .c-dates{grid-area:auto}
  .sb-hxr .c-start{display:block;font-weight:700}.sb-hxr .c-end,.sb-hxr .c-days{display:block}
  .sb-hxr .c-dates{display:none}
  .sb-hxr .c-price{font-size:1.0625rem;letter-spacing:-.01em}
  .sb-hxr .c-ev{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .sb-hxr .c-ev small{white-space:normal}
  .sb-hx-mls{font-size:15px;padding:6px 7px 6px 15px;gap:10px}.sb-hx-mls i{width:26px;height:26px}
  .sb-hx-cur{font-size:13px}
}
/* very narrow cards (small map pop-ups, tight grids): price on its own line above the address, so nothing is cut off */
@container cards (max-width:340px){
  .sb-card-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"price" "addr" "sub"}
  .sb-card-top>.sb-price{justify-content:flex-start;text-align:left;flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  .sb-card-top>.sb-addr{grid-row:auto}
}