/* River phone layer (2026-09-27) — field brokers open /live-river from a WhatsApp link.
   Only <=640px; desktop untouched. Goal: first listing/search visible without scrolling,
   thumb-size targets, 16px inputs (stops iPhone zoom), notch-safe bottom bars. */
@media (max-width:640px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:15px}
  /* header: only a slim brand row stays pinned; everything else scrolls away */
  header{position:relative;padding:8px 12px calc(8px) ;gap:6px 10px;padding-top:max(8px,env(safe-area-inset-top))}
  .brand{font-size:15px;letter-spacing:.08em}.brand img{width:24px;height:24px}
  .brand span{display:none}
  .pulse{width:100%;gap:4px 10px;font-size:12.5px}.pulse .today{font-size:12.5px}.pulse .today b{font-size:14px}
  .brand{order:-2}.golive,.quota{order:-1;margin-left:auto;padding:7px 12px}
  .ctl{width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .ctl::-webkit-scrollbar{display:none}
  .ctl button,.ctl select{flex:none;min-height:40px;font-size:14px;padding:8px 12px;white-space:nowrap}
  .ctl #q,.ctl #pause{display:none}
  nav{width:100%;display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;gap:0}
  nav::-webkit-scrollbar{display:none}
  nav a{font-size:13.5px;padding:6px 0;margin-right:16px}
  .scale.mainline{display:none}
  .joinbar{font-size:13px!important;padding:8px 12px!important;justify-content:space-between!important}
  .joinbar>span{display:none}.joinbar a{flex:1;text-align:center;padding:10px!important}
  /* search box first, big */
  .vb{padding:0 10px;margin-top:10px}
  .vb-form{flex-wrap:nowrap!important;padding:5px 5px 5px 12px!important}
  .vb-form input{flex:1 1 auto!important;font-size:16px!important;padding:8px 0!important}
  .vb-form button{flex:none!important;min-height:42px;padding:0 16px}
  .vb-hint{font-size:13px;line-height:1.6}
  /* filters folded behind one button */
  .vf-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;min-height:42px;font:inherit;font-size:14.5px;font-weight:650;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);cursor:pointer}
  .vf-toggle b{background:var(--green);color:#fff;border-radius:999px;padding:0 7px;font-size:12px}
  .vf{display:none}.vb.vf-open .vf{display:flex}
  .vf{gap:8px}.vf>*{flex:1 1 calc(50% - 8px)}
  .vf-locwrap,.vf-bhk,.vf-budget{flex-basis:100%}
  .vf select,.vf-btn,.vf-budget,.vf-bhk{min-height:42px;font-size:16px}
  .vf-btn{width:100%;max-width:none;text-align:left}
  .vf-bhk{justify-content:space-between}.vf-bhk button{min-width:36px;min-height:36px;font-size:14px}
  .vf-budget select{flex:1;font-size:16px;min-height:34px}
  /* location picker = bottom sheet */
  .vf-pop{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:82vh;border-radius:16px 16px 0 0;padding:12px 12px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
  .vf-pop[hidden]{display:none}
  .vf-pop>input{font-size:16px;min-height:42px}
  .vf-zones{max-height:none;flex:1}
  .vf-locs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-locs label{font-size:14px;padding:6px 0}
  .vf-popfoot button{min-height:42px;flex:1;font-size:15px}
  /* stream bubbles: short, tap to read all */
  #river{padding:10px 10px 90px}
  .msg{padding:10px 12px 8px}
  .body{font-size:15px;line-height:1.5}
  .body.clip{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
  .rmore{border:0;background:none;color:var(--green);font:inherit;font-size:13.5px;font-weight:650;padding:4px 0;cursor:pointer}
  .meta{font-size:12px}
  .get{min-height:38px;padding:6px 18px;font-size:14px}
  .contact a{min-height:38px;display:inline-flex;align-items:center;padding:6px 16px;font-size:14px}
  #newbar{top:auto!important;bottom:max(16px,env(safe-area-inset-bottom));font-size:14px}
  .teaser{font-size:13.5px}.teaser a{margin-left:0;width:100%;text-align:center;padding:10px}
  /* vibe results: table -> one card per unit */
  .vo{padding:0 10px}
  .vo-card{padding:12px 12px 6px;border-radius:14px}
  .vo-close{min-height:40px}
  .vo-sum{font-size:14px}
  .vo-tools{gap:10px}.vo-tools label{font-size:14px;min-height:32px}
  .vo-tools input[type=search]{font-size:16px;min-height:42px}
  .vo-wrap{max-height:none;overflow:visible;margin:0 -12px}
  .vt thead{display:none}
  .vt,.vt tbody{display:block}
  .vt tr.r{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"ck bhk pr" "ck bld bld" "ck loc loc" "ck fac fac" "ck when when" "ck con con";gap:2px 8px;padding:12px 12px 10px;border-bottom:8px solid var(--bg)}
  .vt tr.r td{display:block;padding:0!important;border:0!important;background:none!important;text-align:left!important}
  .vt tr.r td:nth-child(1){grid-area:ck}
  .vt tr.r td:nth-child(2){grid-area:when;font-size:12.5px;color:var(--muted);align-self:center}
  .vt tr.r td:nth-child(2) .sub{display:inline;margin-left:4px}
  .vt tr.r td:nth-child(3){grid-area:con;display:flex!important;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
  .vt tr.r td:nth-child(2) .sub:before{content:" · "}
  .vt tr.r td.vcon .vconnect,.vt tr.r td.vcon .get{background:var(--green);border-color:var(--green);color:#fff}
  .vt tr.r td:nth-child(4){grid-area:bhk;font-size:16px;font-weight:750}
  .vt tr.r td:nth-child(5){grid-area:bld;font-size:15px;font-weight:650}
  .vt tr.r td:nth-child(6){grid-area:loc;font-size:13.5px;color:var(--muted)}
  .vt tr.r td:nth-child(6) .sub{display:inline}.vt tr.r td:nth-child(6) .sub:before{content:" · "}
  .vt tr.r td:nth-child(7){grid-area:pr;text-align:right!important;font-size:16px}
  .vt tr.r td:nth-child(8){grid-area:fac;font-size:13px;color:var(--muted)}
  .vt tr.r td:nth-child(9){display:none}.vt tr.r td:nth-child(10){display:none}
  .vt .sub{font-size:12.5px}
  .vt .ck input{width:22px;height:22px;margin:0}
  .vt .act,.vt .get{min-height:38px;font-size:14px;padding:0 16px;display:inline-flex;align-items:center}
  .vt tr.d{display:block}.vt tr.d td{display:block;padding:0 12px 14px!important}
  .vt tr.d td:first-child{display:none}
  .vd .vmsg{flex-basis:100%;font-size:14.5px}.vd .vmeta{flex-basis:100%;font-size:13.5px}
  .vtray{bottom:max(12px,env(safe-area-inset-bottom))}
  .vshare{align-items:flex-end;padding:0}.vshare-card{border-radius:16px 16px 0 0;max-height:92vh;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .vshare-row input,.vshare-card textarea{font-size:16px}
  .vshare-row button{min-height:42px;flex:1}
  /* requirements + brokers lanes */
  #reqLane,#brkLane,#helpLane{padding:10px 10px 80px}
  .rq-ctl{gap:8px}.rq-ctl input[type=search],.rq-ctl select,.bk-filters input,.bk-filters select{font-size:16px;min-height:42px;flex:1 1 calc(50% - 8px);width:auto!important;min-width:0!important}
  #brkQ{flex-basis:100%!important}
  .rq{padding:12px}.rq-ask{font-size:15.5px}.rq-foot .get{min-height:38px}
  table.bk{display:block;overflow-x:auto}
  .hl h2{font-size:19px}.hl .ex{display:inline-block;padding:4px 0}
  .toast{bottom:max(24px,env(safe-area-inset-bottom));font-size:14px}
}

/* ⟲2026-09-27 owner: 3-step "how it works" strip on the open river — one glance, phone first */
.how3{padding:8px 12px 2px}
.how3-h{margin:0 0 6px;font-size:15px;line-height:1.35;color:#1d1d1f}
.how3 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;counter-reset:h}
.how3 li{counter-increment:h;background:#f5f5f7;border-radius:12px;padding:8px 8px 9px;font-size:12px;line-height:1.3;color:#6e6e73}
.how3 li::before{content:counter(h);display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#087f66;color:#fff;font-size:11px;font-weight:700;margin-bottom:4px}
.how3 li b{display:block;font-size:13px;color:#1d1d1f;margin-bottom:2px}
.how3 li span{display:block}
@media (min-width:768px){.how3{max-width:960px;margin:0 auto}.how3 li{font-size:13px}}

/* ⟲09-27 owner: while a search is open the how-to strip steps aside; repeat building tag */
body.vibe-on .how3{display:none}
.vgrp{display:inline-block;margin-top:3px;font-size:11px;font-weight:700;color:#087f66;background:#e6f6f0;border-radius:999px;padding:1px 7px}