/* The board: a filter rail (desktop) or a sheet (mobile), a results header on the same grid as
   the tiles, and the tile itself. Also the home tiles, favorites and profile grids. */
#grid[aria-busy="true"]{opacity:.55;transition:opacity .15s}
.board{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start;margin-top:22px}
.rail{position:sticky;top:calc(var(--head-h) + 12px);display:flex;flex-direction:column;gap:10px}
.rail .setbox{padding:10px 12px 12px}
.rail .mob{display:none}
.sheet .mb{display:flex;flex-direction:column;gap:16px}   /* air between the filter boxes in the phone sheet */
.appstrip .pwa-install{margin:14px 0 0}   /* the sheet on a phone shows these; the desktop rail does not repeat the header */
.rail .chips{margin-top:2px}
/* An attribute box that is not in use is a one-line header that opens on a tap (2026-10-05): the whole header
   toggles, the chevron points down closed and up open, and the closed box keeps its own rounded corners. */
details.setbox.fbox{padding:0}   /* two classes, so it outranks .rail .setbox and the padding is the summary's alone */
details.fbox > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:12px 14px 12px 12px;user-select:none}
details.fbox > summary::-webkit-details-marker{display:none}
details.fbox > summary::after{content:"";flex:0 0 auto;width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:translateY(-2px) rotate(45deg);transition:transform .12s}
details.fbox[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
details.fbox > summary:hover{color:var(--muted)}
details.fbox > .chips{padding:0 12px 12px;margin-top:0}
.rail .btn{width:100%}
/* where you are + the kind strip (see the KIND STRIP note in src/render.js) */
.bhead{margin-bottom:12px}
.bhead .bup{display:inline-flex;align-items:center;gap:5px;text-decoration:none;padding:6px 0;margin:-6px 0}
.bhead .bup:hover{text-decoration:underline}
/* 009: heading + the For Sale / Wanted switch on one row, wrapping under it on a phone */
.bhrow{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.adswitch{display:inline-flex;padding:3px;border-radius:10px;background:var(--chip);border:1px solid var(--line)}
.adswitch a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none}
.adswitch a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.adswitch .n{font-size:11px;font-weight:700;color:var(--brand-ink)}
.bhead h1{font-size:22px;line-height:1.2;margin:2px 0 0}
/* Include: one button beside Sort (desktop) or between Filters and Sort (phone), and its modal */
.rtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kdesk{height:31px;padding:0 12px;font-size:12.5px}
.scrim.kinds .modal{max-width:480px}
.pform label.kpick{display:flex;align-items:center;gap:10px;margin:0;padding:9px 2px;font-size:14px;font-weight:600;cursor:pointer}
.pform label.kpick input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--brand);cursor:pointer}
.pform label.kpick .lb{flex:1 1 auto}
.pform label.kpick .n{font-size:12.5px;font-weight:500;color:var(--muted)}
.pform label.kpick.kall{padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:4px;font-weight:700}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rhead .where{font-size:13.5px;color:var(--muted)}
.rhead .where b{color:var(--ink)}
.rhead .where a{color:var(--brand-ink);font-weight:600;text-decoration:none;margin-left:6px}
.zipform{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.zipform input{width:88px;height:31px;padding:0 9px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:13px}
.zipform .btn{height:31px;padding:0 10px;font-size:12.5px}
.mfilt{display:none;gap:8px;margin:18px 0 12px}   /* nothing sits against the sticky bar */
.mfilt .btn{flex:1 1 auto;min-width:0;padding:0 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s;min-width:0}
.tile:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.tile.hl{background:var(--tint);border-color:var(--tint-line)}
.tile .ph{position:relative;aspect-ratio:4/3;background:#eceef2;overflow:hidden}
.tile .ph img{width:100%;height:100%;object-fit:cover}
.tile .ph .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px}
.tile .ph .tl{position:absolute;top:8px;left:8px}
.tile .ph .tr{position:absolute;top:8px;right:8px}
.tile .ph .bl{position:absolute;bottom:8px;left:8px}
.tile .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.tile .pr{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.tile .nm{font-size:13.5px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.tile .mt{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.fav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.fav.on{color:var(--danger)}.fav.on svg{fill:currentColor}
.fav.tshare{right:46px}
.more{display:flex;justify-content:center;margin-top:22px}
.saveband{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.saveband .btn{height:34px}
@media (max-width:900px){
  .board{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .mfilt{display:flex}
  .rhead .rtools{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .tile .pr{font-size:16px}
}

/* 2026-10-05: the one Sort and Include control, and "within [any] miles of [place]" */
.viewbtn{display:inline-flex;align-items:center;gap:6px}
.viewbtn .vsep{color:var(--faint)}
.viewbtn svg{color:var(--muted);margin-left:2px}
.kdesk.viewbtn{height:34px;padding:0 12px;font-size:13px}
.vsorts label.chip{margin:0;cursor:pointer}
.rhead .where .locpick{margin-left:0;color:var(--brand-ink);font-weight:700;text-decoration:underline dotted;text-underline-offset:3px}
.rhead .where .guess{color:var(--faint)}
.rpick{display:inline-block;position:relative;vertical-align:baseline}
.rpick summary{list-style:none;display:inline-flex;align-items:center;gap:3px;cursor:pointer;color:var(--brand-ink);font-weight:700;padding:1px 7px;border:1px solid var(--brand-line);border-radius:7px;background:var(--brand-soft)}
.rpick summary::-webkit-details-marker{display:none}
.rpick[open] summary{border-color:rgba(244,34,0,.55)}
.rpick .rmenu{position:absolute;left:0;top:calc(100% + 6px);z-index:30;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(20,22,26,.16);padding:5px;display:flex;flex-direction:column}
.rpick .rmenu button{all:unset;cursor:pointer;padding:8px 10px;border-radius:7px;font-size:13.5px;color:var(--ink)}
.rpick .rmenu button:hover{background:var(--chip)}
.rpick .rmenu button.on{background:rgba(244,34,0,.1);color:var(--brand-ink);font-weight:700}
.chips.oneline{flex-wrap:nowrap}   /* Seller: All, Private, Business on one line (his ask 2026-10-05) */

/* 2026-10-06: For Sale | Wanted lives under Search in the left column; a phone (no column) keeps it in the heading */
.adswitch.mob{display:none}
.rswitch .adswitch{display:flex;width:100%;box-sizing:border-box}
.rswitch .adswitch a{flex:1;justify-content:center}
@media (max-width:900px){ .adswitch.mob{display:inline-flex} }