/* idx-phone.css — the MLS® search (/idx/) on a phone (t-025; previewed at /idx-preview/ Oct 18, approved by Fadi Oct 20):
   it opens with the title, the search box, "Filters" and "Sort", and the first home on the first screen; the filters live
   in a drawer that rises from the bottom ("Apply · N homes", the live count); after the first scroll a slim bar stays under
   the header ("Filters · N homes", Sort, back to the search box) — always visible — in the look of the Rohit page's sticky
   bar (scripts/new-homes/vision.css .sbar: veil + blur, pill buttons, a count badge). With assets/idx-phone.js.
   Every rule is for phones (under 720 px): on a computer the page is exactly as before (scripts/idx-phone.test.mjs
   compares it to the pixel). Dark is the site default; light follows html:not(.sar-dark), as in idx/index.html. */

.ixp-only,.ixp-scrim{display:none;}

@media (max-width:719px){
  :root{--ixp-navh:57px;--ixp-ease:cubic-bezier(.2,.8,.2,1);
    --ixp-sheet:#14130D;--ixp-card:rgba(28,26,18,.92);--ixp-ink:#F4F3EE;--ixp-ink2:#cabf9f;--ixp-ink3:#8a8571;--ixp-gold:#B3AA8D;
    --ixp-line:rgba(232,232,227,.12);--ixp-line2:rgba(232,232,227,.22);--ixp-fill:#B3AA8D;--ixp-fill-ink:#100F0A;--ixp-veil:rgba(16,15,10,.86);}
  html:not(.sar-dark){
    --ixp-sheet:#F4F2EA;--ixp-card:#FBFAF4;--ixp-ink:#26231A;--ixp-ink2:#4A4536;--ixp-ink3:#67614B;--ixp-gold:#544E2E;
    --ixp-line:rgba(84,78,46,.16);--ixp-line2:rgba(84,78,46,.3);--ixp-fill:#544E2E;--ixp-fill-ink:#F7F5EE;--ixp-veil:rgba(239,237,229,.9);}

  /* ── the title: compact, so the first home shows on the first screen ── */
  .ix-hero{padding:16px var(--col-pad) 0 !important;}   /* the one phone gutter, 20 px (theme.css --col-pad, Oct 25; was 24); 16 px on top (A-M1) */
  .ix-hero>div:first-child{margin-bottom:8px !important;font-size:10px !important;letter-spacing:.2em !important;}
  .ix-hero h1{font-size:clamp(32px,9vw,38px) !important;line-height:1.04 !important;}
  .ix-hero p{font-size:14px !important;line-height:1.45 !important;margin-top:8px !important;}
  /* the stale-data bar (data older than 36 hours), compact on a phone: it sits between the search bar and the first home,
     and on a 375×667 phone the first home must still start 120 px above the Call · Text · Book bar (audit A-M1, Oct 25) */
  #ix-stale{margin:0 0 12px !important;padding:10px 12px !important;font-size:12px !important;line-height:1.45 !important;}

  /* ── the search bar: the keyword box, Filters, Sort ── */
  #ixp-bar{display:flex;gap:8px;align-items:stretch;padding:12px var(--col-pad) 12px;}
  /* the bar's room is set before the keyword box moves in (idx-phone.js: after the first paint) — 50 px, the box's own
     height, so nothing under the bar moves when it arrives (audit B-1, Oct 25) */
  .ixp-q{position:relative;flex:1 1 auto;min-width:0;min-height:50px;display:flex;align-items:center;cursor:text;}
  .ixp-q>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ixp-gold);pointer-events:none;}
  .ixp-q .ix-in{flex:1 1 auto !important;width:100%;min-height:50px;padding:12px 14px 12px 42px;border-radius:999px;}
  .ixp-fbtn,.ixp-sbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 15px;border-radius:999px;
    border:1px solid var(--ixp-line2);background:var(--ixp-card);color:var(--ixp-ink);font:500 13.5px/1 Jost,sans-serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap;
    transition:border-color .25s ease,transform .3s var(--ixp-ease);}
  .ixp-fbtn:active,.ixp-sbtn:active{transform:scale(.97);}
  .ixp-fbtn svg,.ixp-sbtn svg{color:var(--ixp-gold);flex:none;}
  .ixp-fbtn:focus-visible,.ixp-sbtn:focus-visible,.ixp-sq:focus-visible,.ixp-x:focus-visible,.ixp-apply:focus-visible,.ixp-reset:focus-visible,.ixp-seg button:focus-visible{outline:2px solid var(--ixp-gold);outline-offset:2px;}
  /* Sort: a round button beside Filters (and in the slim bar); it lists the page's own sort options. A gold dot when the
     order is not the default (Featured) */
  .ixp-sortbtn{position:relative;flex:none;width:50px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;
    border:1px solid var(--ixp-line2);background:var(--ixp-card);color:var(--ixp-gold);cursor:pointer;transition:border-color .25s ease,transform .3s var(--ixp-ease);}
  .ixp-sortbtn:active{transform:scale(.95);}
  .ixp-sortbtn:focus-visible{outline:2px solid var(--ixp-gold);outline-offset:2px;}
  .ixp-sortbtn[aria-expanded="true"]{border-color:var(--ixp-gold);}
  .ixp-sortbtn.on::after{content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--ixp-fill);box-shadow:0 0 0 2px var(--ixp-card);}
  #ixp-sticky .ixp-sortbtn{width:44px;height:44px;min-height:44px;}
  #ixp-sticky .ixp-sortbtn.on::after{top:7px;right:7px;}
  .ixp-sortpop{width:min(260px,calc(100vw - 20px));}
  .ixp-sortpop .ixg{padding:8px 12px 6px;}
  .ixp-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ixp-fill);color:var(--ixp-fill-ink);font:500 11px/1 Jost,sans-serif;letter-spacing:0;}
  .ixp-badge[hidden]{display:none;}
  /* the count line sits right under the bar (it was below the whole filter panel) */
  #ix-status{margin-bottom:14px !important;letter-spacing:.12em !important;line-height:1.75 !important;}
  #ix-grid{gap:16px !important;}

  /* ── the slim bar after the first scroll ── */
  #ixp-sticky{display:flex;position:fixed;left:0;right:0;top:var(--ixp-navh);z-index:90;gap:8px;align-items:center;padding:8px var(--col-pad);
    background:var(--ixp-veil);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--ixp-line);
    transform:translateY(calc(-100% - var(--ixp-navh)));visibility:hidden;transition:transform .35s var(--ixp-ease),visibility 0s linear .35s;}
  #ixp-sticky.on{transform:none;visibility:visible;transition:transform .35s var(--ixp-ease),visibility 0s;}
  .ixp-sbtn{flex:1 1 auto;min-width:0;min-height:44px;justify-content:flex-start;padding:0 16px;}
  .ixp-sbtn span{overflow:hidden;text-overflow:ellipsis;}
  .ixp-sbtn .ixp-badge{margin-left:auto;}
  .ixp-sq{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--ixp-line2);background:var(--ixp-card);color:var(--ixp-gold);cursor:pointer;padding:0;}

  /* ── the drawer: the page's own filter panel, in a sheet that rises from the bottom ── */
  .ixp-drawer{position:fixed !important;left:0;right:0;bottom:0;z-index:150;display:flex;flex-direction:column;
    max-height:calc(100dvh - 18px - env(safe-area-inset-top,0px));height:calc(100dvh - 18px - env(safe-area-inset-top,0px));
    padding:0 !important;background:var(--ixp-sheet);border-radius:22px 22px 0 0;border-top:1px solid var(--ixp-line2);
    box-shadow:0 -24px 60px rgba(0,0,0,.45);transform:translateY(102%);visibility:hidden;
    transition:transform .38s var(--ixp-ease),visibility 0s linear .38s;}
  html.ixp-open .ixp-drawer{transform:none;visibility:visible;transition:transform .38s var(--ixp-ease),visibility 0s;}
  html:not(.sar-dark) .ixp-drawer{box-shadow:0 -24px 60px rgba(60,54,32,.3);}
  .ixp-scrim{display:block;position:fixed;inset:0;z-index:149;background:rgba(8,7,4,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;}
  html.ixp-open .ixp-scrim{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s;}
  /* the page's popovers open above the drawer (they are drawn at the end of <body>, z-index 120 / 130 on /idx/) */
  html.ixp-open .idxpop{z-index:160;}
  html.ixp-open #commpop{z-index:170;}
  /* the page under the sheet stays where it was (idx-phone.js pins it; nothing scrolls behind) */
  html.ixp-lock,html.ixp-lock body{overflow:hidden;}

  .ixp-dh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:10px 12px 8px 22px;border-bottom:1px solid var(--ixp-line);}
  .ixp-dh::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:999px;background:var(--ixp-line2);}
  .ixp-dh h2{margin:8px 0 0;font:300 26px/1.1 Spectral,serif;color:var(--ixp-ink);letter-spacing:-.01em;}
  .ixp-x{width:44px;height:44px;margin-top:6px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--ixp-line2);background:transparent;color:var(--ixp-ink);cursor:pointer;padding:0;}

  /* For sale / For rent: two halves (they drive the page's own For sale / For rent list) */
  .ixp-seg{display:flex;flex:none;margin:16px 22px 0;padding:4px;border-radius:999px;background:var(--ixp-card);border:1px solid var(--ixp-line);}
  .ixp-seg button{flex:1 1 50%;min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--ixp-ink2);font:500 12px/1 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s ease,color .25s ease;}
  .ixp-seg button[aria-pressed="true"]{background:var(--ixp-fill);color:var(--ixp-fill-ink);}

  /* the panel itself: no box of its own inside the sheet; it scrolls between the title row and the buttons */
  .ixp-drawer #ix-panel{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;gap:0;border:0 !important;background:transparent !important;border-radius:0;padding:14px 22px 22px !important;}
  .ixp-drawer #ix-panel>div:nth-child(2){order:-1;margin:0 0 14px !important;}   /* Saved first, under For sale / For rent */
  .ixp-drawer #ixf-mode,.ixp-drawer #ixf-clear{display:none !important;}           /* replaced by the two halves above and Reset below */
  .ixp-drawer #ixf-sort{display:none !important;}   /* Sort is on the main screen: the round button lists this <select>'s own options (one source of truth) */
  .ixp-drawer #ixf-saved{flex:1 1 auto;justify-content:center;min-height:50px;padding:0 18px;}

  /* the filters: City, Community and Type on their own rows; prices, beds and baths in pairs */
  .ixp-drawer #ix-panel .ixgrid{display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important;background:transparent !important;border:0 !important;border-radius:0;overflow:visible;}
  .ixp-drawer .ixgrid>.idxcell{border-radius:14px;border:1px solid var(--ixp-line);background:var(--ixp-card);padding:12px 16px;min-height:64px;justify-content:center;}
  .ixp-drawer .ixgrid>.idxcell:nth-child(-n+3){grid-column:1/-1;}
  .ixp-drawer .idxcell>span{font-size:9.5px;color:var(--ixp-ink3);}
  .ixp-drawer .idxval{font-size:16px;color:var(--ixp-ink);}
  html:not(.sar-dark) .ixp-drawer .ixgrid>.idxcell{background:var(--ixp-card);}
  html:not(.sar-dark) .ixp-drawer #ix-panel,html:not(.sar-dark) .ixp-drawer #ix-panel .ixgrid{background:transparent !important;border:0 !important;}
  .ixp-drawer #ix-pills{margin-top:22px;gap:12px 8px;}
  .ixp-drawer #ix-pills::before{content:"Features";flex:0 0 100%;font:500 9.5px/1 Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ixp-ink3);margin-bottom:2px;}
  .ixp-drawer .ixpill{font-size:10.5px;padding:12px 16px;min-height:44px;}

  /* the buttons at the bottom: Reset (the page's own Reset) and Apply · N homes */
  .ixp-df{display:flex;flex:none;gap:12px;align-items:center;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ixp-line);background:var(--ixp-sheet);}
  .ixp-reset{min-height:50px;padding:0 6px;border:0;background:none;color:var(--ixp-ink);font:500 13px/1 Jost,sans-serif;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px;cursor:pointer;}
  .ixp-apply{flex:1 1 auto;min-height:52px;border:0;border-radius:999px;background:var(--ixp-fill);color:var(--ixp-fill-ink);font:500 12.5px/1 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .3s var(--ixp-ease);}
  .ixp-apply:active{transform:scale(.98);}
}
@media (max-width:719px) and (prefers-reduced-motion:reduce){
  .ixp-drawer,#ixp-sticky,.ixp-scrim,.ixp-sortbtn{transition:none !important;}
}