/* Browse page (list.html): one sticky filter bar, cards on the left, the map on the right; on a phone the filters are a bottom sheet and the map is a second view behind a floating Map / List button. */
body.browse { --hdr: 64px; }   /* --fbar (the filter bar's real height) is set on <html> by browse.js and measured; 79px is the one-row height until it runs */
.browse .top .wrap { min-height: var(--hdr); animation: none; max-width: none; padding-inline: var(--gut); }   /* 2 Nov alignment sweep: this page is full-width (filter bar, list, map), so the logo and menu line up with the filter bar's edges, not a centred container */
.browse .top::before { opacity: 1; animation: none; }   /* on this page the header is always the compact glass bar */

/* ---------- the filter bar ---------- */
.filters { position: sticky; top: var(--hdr); z-index: 900; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px var(--gut); background: radial-gradient(40% 120% at 0 0, #D3F1EE 0, transparent 70%), radial-gradient(30% 140% at 100% 0, #E0ECFB 0, transparent 70%), var(--bg); border-bottom: 1px solid var(--line); }   /* 6 Nov lane A (A12): a faint teal bloom behind the city tabs (+ a sky one far right) ties the bar to the home light - REPLACES the flat --bg fill */
.tabs { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--mint-2); border: 1px solid var(--line); flex: none; }
.tabs button { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--ink); font: 600 16px var(--body); white-space: nowrap; }
.tabs button:hover { background: rgba(255,255,255,.7); }
.tabs button[aria-pressed="true"] { background: var(--grad-btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(3,105,161,.22); }   /* 6 Nov lane A (A4): selected city = the button gradient (was flat teal) */
.tabs .tn { display: inline-block; min-width: 3ch; text-align: left; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; margin-left: 2px; }   /* round 8: a fixed slot, so the tabs (plain HTML) do not grow when browse.js fills the counts */   /* the number of places in each city (it used to be on the map chips) */
.tabs button[aria-pressed="true"] .tn { color: #fff; }
.fsel { display: contents; }     /* the controls sit straight in the row; on a phone they fold into the Filters sheet */
.fbtn, .sheet-head, .sheet-foot, .sheet-back { display: none; }
.fc { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); min-width: 0; transition: border-color .15s, box-shadow .15s; }
.fc:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.28); }
.fc select { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--body); outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; padding: 0 22px 0 0; text-overflow: ellipsis; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E2A1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 16px no-repeat; }
.fc-sel { flex: 1 1 148px; min-width: 148px; max-width: 170px; }   /* wide enough for "How long?" and "Any type" (124 cut it to "How lon..." at 1280) */
.fmore { display: contents; }   /* Type, Budget, Suburb: in the bar at 1600 px and up; one 'Filters' popover on a laptop; in the sheet on a phone */
.fm-foot { display: none; }
.fc-sub { flex: 0 0 150px; min-width: 150px; max-width: 150px; }   /* "Any suburb" always whole (it was cut to "Any subu" at 1280); the width comes from Near */
.fc-sub input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--body); outline: none; }
.fc-near { flex: 4 1 260px; min-width: 220px; max-width: 360px; padding: 0 12px; }
.fc-near .pick-btn { gap: 8px; }
.fc-near .pick { width: 100%; }
.fc-near .pick-btn { min-height: 44px; }
.pick-btn .fl, .sortbox .fl { color: var(--ink-3); font-size: 15px; font-weight: 500; flex: none; }
@media (min-width: 901px) { .fc-near .pick-btn .fl { display: none; } .fc-near .pick-btn::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z' fill='%230E2A1F'/%3E%3C/svg%3E") center / 18px no-repeat; } }   /* the bar has no room for the word 'Near': a pin stands for it (the button's label and the phone sheet still say it) */
.pick-btn b { font: 600 16px var(--body); }
.fc-near .pick-btn svg, .bpill svg { color: var(--ink); flex: none; }
.fc.avail { flex: none; padding: 0 12px; cursor: pointer; gap: 8px; font: 500 16px var(--body); white-space: nowrap; }
.lh-r .fc.avail { min-height: 44px; }
.fc.avail input { width: 20px; height: 20px; accent-color: var(--green); margin: 0; }
.bpill { min-width: 124px; padding: 0 12px; }
.budget { flex: none; }
.budget .bpanel { z-index: 1300; }

/* ---------- a laptop (901-1599 px): Type, Budget and Suburb fold into one 'Filters' popover under its button, so the bar is City + Near + How long? + Filters ---------- */
@media (min-width: 901px) and (max-width: 1599px) {
  .fbtn { display: inline-flex; align-items: center; gap: 8px; order: 1; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: 600 16px var(--body); cursor: pointer; white-space: nowrap; }
  .fbtn:hover, .fbtn[aria-expanded="true"] { border-color: var(--green); }
  .fbtn b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--green); color: #fff; font-size: 14px; }
  .fmore { display: none; }
  .filters.mopen .fmore { display: grid; gap: 10px; position: absolute; top: calc(100% + 8px); z-index: 1250; width: 360px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .fmore .fc, .fmore .budget, .fmore .bpill { width: 100%; max-width: none; flex: none; }
  .fmore .bpanel { position: static; width: 100%; margin-top: 8px; box-shadow: none; border-radius: 16px; padding: 14px 4px 4px; border: 0; }
  .fm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 4px; }
}

/* ---------- the list ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split.nomap { grid-template-columns: minmax(0, 1fr); }
.split.nomap .map-col { display: none; }
.list-col { padding: 28px var(--gut) 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }   /* the one column is exactly the panel width: nothing inside can push it wider than the map beside it (1024 px: 21 px overflow) */
.list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.lh-l { flex: 1 1 420px; min-width: 0; }
.rcount { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -.03em; max-width: 30ch; }
.rsub { color: var(--ink-3); font-size: 16px; margin-top: 8px; }
.lh-r { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: none; max-width: 100%; }
.sortbox { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; }
.sortbox select { border: 0; background: transparent; color: var(--ink); font: 600 16px var(--body); outline: none; cursor: pointer; padding: 0 2px; }
.sortbox:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.28); }
.maptoggle { white-space: nowrap; }
.xchips { display: flex; gap: 8px; flex-wrap: wrap; }
.xchips:empty { display: none; }
.xchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 16px; border-radius: var(--r-pill); background: var(--green-wash); color: var(--green-hi); font: 600 15px var(--body); border: 0; cursor: pointer; }
.xchip::after { content: "\00d7"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-size: 17px; line-height: 1; }
.hidden-note { padding: 12px 16px; border-radius: 14px; background: var(--mint); border: 1px solid var(--line); color: var(--ink-2); font-size: 16px; }
.hidden-note .linkbtn { font-size: 16px; }
.list-col .cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 20px; }
/* wide screens (review 2 Nov): with the map, the list keeps 3 roomy columns (titles never cut) and the map takes the rest; without it, 4 / 5 / 6 across */
@media (min-width: 1900px) {
  .split:not(.nomap) { grid-template-columns: minmax(0, clamp(1240px, 64vw, 1500px)) minmax(0, 1fr); }
  .split:not(.nomap) .list-col .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
}
@media (min-width: 1680px) { .split.nomap .list-col .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; } }
@media (min-width: 1900px) { .split.nomap .list-col .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 2400px) { .split.nomap .list-col .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
p.none { color: var(--ink-2); font-size: 19px; padding: 24px; border: 1px dashed var(--line-2); border-radius: 20px; background: var(--mint); }
.card.quiet .ph img { filter: saturate(.5); }
/* the Currently unavailable places: after the ones you can enquire about, under one divider, folded until 'Show them' */
.off-div { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--ink-2); font: 600 17px var(--body); }
#results.off-shut .card[data-off], #results.paging .card[data-off], #results.paging .off-div { display: none; }

/* ---------- the map: floating controls are glass ---------- */
.map-col { position: sticky; top: calc(var(--hdr) + var(--fbar, 79px)); height: calc(100vh - var(--hdr) - var(--fbar, 79px)); height: calc(100dvh - var(--hdr) - var(--fbar, 79px)); border-left: 1px solid var(--line); overflow: hidden; }
.bigmap { width: 100%; height: 100%; }
@media (min-width: 901px) { .map-chips { display: none !important; } }   /* ONE city selector: on a computer the tabs in the bar are always in sight */
.map-chips { position: absolute; z-index: 700; top: 12px; left: 64px; display: flex; flex-wrap: wrap; gap: 2px; width: max-content; max-width: calc(100% - 76px); padding: 4px; border-radius: 26px; }
.map-chips button { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 0; background: transparent; color: var(--ink); font: 600 16px var(--body); cursor: pointer; white-space: nowrap; }
.map-chips button b { color: var(--green); font-variant-numeric: tabular-nums; margin-left: 4px; }
.map-chips button:hover { background: rgba(255,255,255,.7); }
.map-chips button[aria-pressed="true"] { background: var(--grad-btn); color: #fff; box-shadow: 0 4px 12px rgba(3,105,161,.22); }
.map-chips button[aria-pressed="true"] b { color: #fff; }
.map-all { position: absolute; z-index: 700; left: 12px; bottom: 24px; min-height: 48px; padding: 0 22px; border-radius: 99px; color: var(--ink); font: 600 16px var(--body); cursor: pointer; }
.map-all:hover { background: rgba(255,255,255,.85); }
.viewtoggle { display: none; }

@media (min-width: 901px) {
  body.browse .tray { left: 25%; max-width: calc(50vw - 32px); }
  body.browse:has(.split.nomap) .tray { left: 50%; max-width: calc(100vw - 24px); }
}
@media (min-width: 1900px) { body.browse:not(:has(.split.nomap)) .tray { left: calc(clamp(1240px, 64vw, 1500px) / 2); max-width: calc(clamp(1240px, 64vw, 1500px) - 32px); } }   /* centred on the wider list column */

/* ---------- tablet + phone: the filters become a bottom sheet, the map a second view ---------- */
@media (max-width: 900px) {
  body.browse { --hdr: 62px; --tray-bottom: 92px; --tabrow: 70px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .maptoggle { display: none; }
  .filters { flex-wrap: wrap; padding-block: 8px; gap: 8px 10px; top: calc(var(--hdr) - var(--tabrow)); }   /* the tabs row (first) slides under the header on scroll; the Filters row stays */
  .tabs { min-width: 0; flex: 1 1 100%; }
  .tabs button { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .tabs .tn { display: none; }   /* no room on a phone; the heading says the count */
  .lh-r .fc.avail { display: none; }   /* round 8: on a phone it lives in the Filters sheet (browse.js moves it there); never flashes in the results row first */
  .list-col { min-height: 100vh; min-height: 100dvh; }   /* round 8: the footer starts below the screen, not at the top while the places load */
  .fbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: 600 16px var(--body); cursor: pointer; margin-left: 0; flex: 1 1 100%; justify-content: center; }
  .fbtn b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--green); color: #fff; font-size: 14px; }
  .fsel { display: none; }
  .filters.fopen .fsel { display: flex; flex-direction: column; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2100; max-height: 88dvh; overflow: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 0 16px; box-shadow: 0 -12px 40px rgba(13,42,51,.25); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 16px 0 10px; z-index: 2; font: 700 20px var(--head); color: var(--ink); }
  .sheet-foot { display: block; position: sticky; bottom: 0; background: #fff; padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2; }
  .sheet-foot .btn { width: 100%; }
  .filters.fopen + .sheet-back { display: block; position: fixed; inset: 0; z-index: 880; background: rgba(13,42,51,.45); }
  body.sheet-open { overflow: hidden; }
  body.sheet-open .tray, body.sheet-open .viewtoggle, body.mapview .tray { display: none; }   /* the map view has its own buttons; the shortlist tray waits in the list view */
  .fc, .fc-sel, .fc-sub, .fc-near { width: 100%; max-width: none; flex: none; }
  .fsel .budget, .fsel .bpill { width: 100%; }
  .fsel .bpanel { position: static; width: 100%; margin-top: 8px; box-shadow: none; border-radius: 16px; }
  .list-col { padding: 16px var(--gut) 110px; gap: 16px; }
  .rcount { font-size: 1.5rem; }
  .map-col { display: none; position: relative; top: 0; height: calc(100vh - var(--hdr)); height: calc(100dvh - var(--hdr)); border-left: 0; }
  body.mapview .map-col { display: block; }
  body.mapview .list-col, body.mapview .filters, body.mapview .foot { display: none; }
  .viewtoggle { display: inline-flex; align-items: center; gap: 10px; position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 900; min-height: 54px; padding: 0 28px; border: 0; border-radius: 99px; background: var(--grad-btn); color: #fff; font: 600 18px var(--body); box-shadow: 0 8px 26px rgba(13,42,51,.4); cursor: pointer; }
  .viewtoggle:hover { background: var(--green-hi); }
  .map-all { bottom: 100px; }
  body.mapview { --tray-bottom: 92px; }
}
@media (max-width: 520px) {
  .list-head { align-items: center; }
  .map-chips { top: 12px; left: 64px; right: 12px; width: auto; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }   /* one row that scrolls sideways, clear of the zoom buttons */
  .map-chips::-webkit-scrollbar { display: none; }
  .map-chips button { flex: none; padding: 0 12px; font-size: 15px; }
  .map-chips button b { margin-left: 3px; }
  .viewtoggle { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.mapview .viewtoggle { bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }   /* on the map, the Map / List button sits clear of the map credit line */
}
.list-col .cards .card:not(.sk) { content-visibility: auto; contain-intrinsic-size: auto 420px; }   /* final X (O5): only the long browse grid skips off-screen cards (moved from site.css .card) */