/* ListedForRent web UI.
   One stylesheet for the whole page. Light only: there is a single palette
   and no dark variant. No build step, so this is plain CSS with custom
   properties and nothing else. */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --sunken: #f7f7f7;
  --text: #222222;
  --muted: #6a6a6a;
  --faint: #8c8c8c;
  --line: #dddddd;
  --line-soft: #ebebeb;
  --chip: #f7f7f7;
  --chip-hover: #efefef;
  --accent: #e11d48;
  --accent-hover: #be123c;
  --accent-soft: #fff1f4;
  --ink: #222222;
  --on-ink: #ffffff;
  --good: #0f7b53;
  --warn: #8a6100;
  --danger: #c0362c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .10);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, .12), 0 20px 56px rgba(0, 0, 0, .18);
  --radius: 12px;
  --radius-lg: 16px;
  --header-h: 156px;
  --page-max: 1760px;
  --gutter: 40px;
  /* Light only: the design is one palette, and it is this one. */
  color-scheme: light;
}

/* No dark variant: light is the design. */

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Author display rules override the UA [hidden] rule, so hidden elements
   would still render without this guard. */
[hidden] { display: none !important; }

a { color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; }
img { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------- buttons, inputs */
button {
  font: inherit; border: none; cursor: pointer; border-radius: 10px;
  padding: 10px 16px; background: var(--accent); color: #fff; font-weight: 600;
  letter-spacing: -.01em;
}
button:hover { background: var(--accent-hover); }
button:disabled { opacity: .6; cursor: progress; }

button.ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); font-weight: 600;
}
button.ghost:hover { background: var(--chip); border-color: var(--text); }

button.ink { background: var(--ink); color: var(--on-ink); }
button.ink:hover { background: var(--ink); opacity: .88; }

button.danger { background: transparent; color: var(--danger); border: 1px solid var(--line); }
button.danger:hover { background: var(--chip); color: var(--danger); }

button.link {
  background: none; color: var(--text); padding: 0; text-decoration: underline;
  font-weight: 600; border-radius: 2px;
}
button.link:hover { background: none; color: var(--accent); }

button.quiet { background: transparent; color: var(--text); }
button.quiet:hover { background: var(--chip); }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; width: 100%;
}
select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236a6a6a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--text); outline-offset: -2px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--faint); }

.input-error {
  border-color: var(--danger) !important;
  outline: 2px solid var(--danger); outline-offset: -2px; animation: shake .4s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

label.fl {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 6px;
}

/* Switch-style checkbox for the yes/no filters. */
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.check input {
  appearance: none; width: 44px; height: 26px; flex: none; margin: 0; border-radius: 999px;
  background: var(--line); border: none; position: relative; cursor: pointer;
  transition: background .16s ease;
}
.check input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .16s ease;
}
.check input:checked { background: var(--ink); }
.check input:checked::after { transform: translateX(18px); }
.check.plain input { appearance: auto; width: auto; height: auto; }
.check.plain input::after { content: none; }

.spin {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite; vertical-align: -2px; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-line { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); padding: 26px 12px; }
button .spin { margin-right: 8px; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky; top: 0; z-index: 130; background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-main {
  max-width: var(--page-max); margin: 0 auto;
  padding: 14px var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 19px; font-weight: 800; color: var(--accent); letter-spacing: -.03em; justify-self: start;
}
.brand .mark { width: 28px; height: 28px; flex: none; display: block; }
.brand span { white-space: nowrap; }

/* the collapsed pill search */
.searchpill {
  display: flex; align-items: center; justify-self: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm); padding: 5px 5px 5px 0; cursor: pointer;
  transition: box-shadow .16s ease; max-width: 100%;
}
.searchpill:hover { box-shadow: var(--shadow-md); }
.searchpill .seg {
  display: flex; flex-direction: column; gap: 1px; padding: 4px 16px;
  border-left: 1px solid var(--line-soft); min-width: 0; text-align: left;
  background: none; border-radius: 999px; color: inherit;
}
.searchpill .seg:first-child { border-left: none; padding-left: 20px; }
.searchpill .seg:hover { background: var(--chip); }
.searchpill .seg em {
  font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.searchpill .seg b {
  font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 15ch;
}
.searchpill .pill-go {
  width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center; margin-left: 6px;
}
.searchpill:hover .pill-go { background: var(--accent-hover); }

.topnav { display: flex; align-items: center; gap: 4px; justify-self: end; }
.navlink {
  background: transparent; color: var(--text); border-radius: 999px;
  padding: 10px 14px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.navlink:hover { background: var(--chip); }

.acct { position: relative; margin-left: 4px; }
.acct summary { list-style: none; cursor: pointer; }
.acct summary::-webkit-details-marker { display: none; }
.acct-trigger {
  display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  transition: box-shadow .16s ease;
}
.acct summary:hover .acct-trigger { box-shadow: var(--shadow-sm); }
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--muted);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; text-transform: uppercase;
}
.avatar.signed { background: var(--accent); }
.acct-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 140; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 8px; box-shadow: var(--shadow-lg); display: grid; gap: 2px;
}
.acct-pop button {
  background: transparent; color: var(--text); text-align: left; width: 100%;
  border-radius: 9px; padding: 10px 12px; font-size: 14px; font-weight: 500;
}
.acct-pop button:hover { background: var(--chip); }
.acct-pop button.strong { font-weight: 700; }
.acct-email {
  font-size: 13px; color: var(--muted); padding: 8px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-sep { height: 1px; background: var(--line-soft); margin: 5px 0; }

/* ------------------------------------------------------------ category bar */
.catbar {
  max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--gutter); display: flex; align-items: stretch; gap: 14px;
}
.cats {
  display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth;
  flex: 1 1 auto; padding: 4px 0 0; scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  background: none; color: var(--muted); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 10px 12px 12px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
  opacity: .78; transition: opacity .14s ease, border-color .14s ease;
}
.cat svg { display: block; }
.cat:hover { background: none; color: var(--text); opacity: 1; border-bottom-color: var(--line); }
.cat.on { color: var(--text); opacity: 1; border-bottom-color: var(--text); }
.catbar .filtersbtn {
  align-self: center; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 15px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.catbar .filtersbtn:hover { background: var(--chip); border-color: var(--text); }
.catbar .filtersbtn .fcount {
  background: var(--ink); color: var(--on-ink); border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------ filter panel */
.panel-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .35); }
.filterpanel {
  position: fixed; z-index: 160; left: 50%; transform: translateX(-50%);
  top: calc(var(--header-h) + 10px); width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - var(--header-h) - 28px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.fp-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--surface); z-index: 2;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.fp-head h2 { font-size: 16px; flex: 1; text-align: center; }
.fp-body { padding: 6px 22px 18px; }
.fp-sec { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.fp-sec:last-child { border-bottom: none; }
.fp-sec h3 { font-size: 15px; margin-bottom: 12px; }
.fp-sec .hint { color: var(--muted); font-size: 13px; margin: -6px 0 12px; }
.fp-foot {
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line-soft);
  padding: 14px 22px; display: flex; align-items: center; gap: 12px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.fp-foot .grow { flex: 1; }
.iconx {
  background: transparent; color: var(--text); border-radius: 50%; width: 34px; height: 34px;
  padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.iconx:hover { background: var(--chip); }

.fgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rent-pair { display: flex; gap: 10px; align-items: center; }
.rent-pair span { color: var(--muted); font-size: 13px; flex: none; }
.rent-pair .money { position: relative; flex: 1; min-width: 0; }
.rent-pair .money::before {
  content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 14px; pointer-events: none;
}
.rent-pair .money input { padding-left: 24px; }

/* pill groups (beds, baths) and chip groups (property type) */
.pillrow { display: flex; flex-wrap: wrap; gap: 8px; }
.pillrow button, .chiprow button {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500;
}
.pillrow button:hover, .chiprow button:hover { background: var(--chip); border-color: var(--text); }
.pillrow button.on, .chiprow button.on {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

/* the Where field inside the panel */
.place-wrap { position: relative; }
.place-wrap input { height: 52px; padding: 0 46px 0 42px; font-size: 15px; }
.place-wrap .pin-ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: flex;
}
.place-wrap .locbtn {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--muted); padding: 8px; border-radius: 50%;
  display: flex; align-items: center;
}
.place-wrap .locbtn:hover { background: var(--chip); color: var(--accent); }
.place-wrap .locbtn.busy svg { animation: spin .8s linear infinite; }
ul.suggest {
  list-style: none; margin: 8px 0 0; padding: 8px; position: absolute; z-index: 20;
  left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 14px; box-shadow: var(--shadow-lg); max-height: 300px; overflow: auto;
}
ul.suggest:empty { display: none; }
ul.suggest li {
  padding: 11px 12px; border-radius: 9px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
}
ul.suggest li:hover, ul.suggest li.on { background: var(--chip); }
ul.suggest li.note { color: var(--muted); cursor: default; }
ul.suggest li.note:hover { background: none; }

/* ------------------------------------------------------------------- shell */
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

.hero { padding: 40px 0 8px; max-width: 760px; }
.hero h1 { font-size: 40px; line-height: 1.08; margin-bottom: 14px; }
.hero .sub { color: var(--muted); font-size: 16px; margin: 0 0 18px; max-width: 62ch; }
.hero .herobtns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .herobtns button { padding: 13px 22px; font-size: 15px; border-radius: 12px; }

.stats {
  margin: 18px 0 0; font-size: 13.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px;
}
.stats b { color: var(--text); font-weight: 700; }
.stats span + span::before { content: "\00b7"; margin-right: 12px; }

.results-head {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 20px 0 18px;
}
.results-head .rh-text { margin-right: auto; min-width: 0; }
.results-head h2 { font-size: 21px; }
.results-head .rh-sub { color: var(--muted); font-size: 14px; margin-top: 3px; }
.results-head .savebtn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 16px; font-size: 14px; font-weight: 600;
}
.results-head .savebtn:hover { background: var(--chip); border-color: var(--text); }

/* Edge to edge: the results and the map share the full viewport width, with
   no centered container between them. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.results { min-width: 0; padding: 0 var(--gutter) 48px; }

/* ------------------------------------------------------------- result grid */
.grid { display: grid; gap: 26px 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Desktop, map open: the grid lives in the left 55 percent. */
@media (min-width: 1128px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1920px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Desktop, map collapsed or nothing searched yet: full width. */
@media (min-width: 1128px) {
  body.map-off .grid, body:not(.has-results) .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  body.map-off .grid, body:not(.has-results) .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1920px) {
  body.map-off .grid, body:not(.has-results) .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.lst { cursor: pointer; min-width: 0; }
.lst .photo {
  position: relative; aspect-ratio: 20 / 19; border-radius: 14px; overflow: hidden;
  background: var(--chip); margin-bottom: 11px;
}
.lst .rail {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; scroll-behavior: smooth;
}
.lst .rail::-webkit-scrollbar { display: none; }
.lst .rail img {
  width: 100%; height: 100%; flex: none; object-fit: cover; scroll-snap-align: center;
  display: block; background: var(--chip);
}
.noimg {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: var(--faint); font-size: 12.5px;
  background: linear-gradient(150deg, var(--chip), var(--sunken));
}
.lst .heart {
  position: absolute; top: 9px; right: 9px; z-index: 3; background: none; padding: 5px;
  border-radius: 50%; color: #fff; display: flex; line-height: 0;
}
.lst .heart svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.lst .heart:hover { background: rgba(255, 255, 255, .18); transform: scale(1.06); }
.lst .heart.on svg { fill: var(--accent); stroke: #fff; }
.lst .nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
  color: #222; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .14s ease, transform .14s ease;
}
.lst .nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.lst .nav.prev { left: 9px; }
.lst .nav.next { right: 9px; }
.lst:hover .nav, .lst:focus-within .nav { opacity: 1; }
.lst .nav[disabled] { opacity: 0 !important; }
.lst .dots {
  position: absolute; left: 0; right: 0; bottom: 9px; z-index: 3;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.lst .dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.lst .dots i.on { background: #fff; }
.lst .badge-src {
  position: absolute; left: 9px; top: 9px; z-index: 3; background: var(--surface);
  color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 11.5px;
  font-weight: 700; box-shadow: var(--shadow-sm); max-width: calc(100% - 60px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lst .ctitle {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lst .cline {
  font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lst .cprice { font-size: 15px; margin-top: 5px; }
.lst .cprice b { font-weight: 800; letter-spacing: -.02em; }
.lst .cprice span { color: var(--muted); font-weight: 400; }
.lst.on .photo { outline: 2px solid var(--text); outline-offset: 2px; }
.lst:focus-visible { outline: none; }
.lst:focus-visible .photo { outline: 2px solid var(--accent); outline-offset: 3px; }

/* skeletons */
.sk { pointer-events: none; }
.sk .skblock, .sk .skline {
  background: linear-gradient(90deg, var(--chip) 25%, var(--chip-hover) 37%, var(--chip) 63%);
  background-size: 400% 100%; animation: shimmer 1.5s ease infinite; border-radius: 6px;
}
.sk .skblock { aspect-ratio: 20 / 19; border-radius: 14px; margin-bottom: 12px; }
.sk .skline { height: 12px; margin-bottom: 8px; }
.sk .skline.w60 { width: 60%; }
.sk .skline.w40 { width: 40%; }
@keyframes shimmer { to { background-position: -400% 0; } }

.empty {
  color: var(--muted); padding: 40px 0 60px; max-width: 46ch;
}
.empty h3 { font-size: 19px; color: var(--text); margin-bottom: 8px; }
.empty p { margin: 0 0 16px; font-size: 14.5px; }

.more-row { display: flex; justify-content: center; padding: 34px 0 8px; }
.more-row button { min-width: 210px; padding: 13px 22px; }

/* ------------------------------------------------------------------- map */
.mapside { display: none; min-width: 0; }
#resultsMap { height: 100%; width: 100%; z-index: 0; background: var(--sunken); }
.map-wrap { position: relative; height: 100%; overflow: hidden; }

/* Desktop: the split is the default the moment a search exists. The layout
   itself is pinned to the viewport below the header: the left pane scrolls
   its own list, the map on the right never moves. The landing hero, the
   how-it-works section and the site footer step aside while results are
   showing (they come back when the map is collapsed or the search cleared),
   the way Airbnb's results page drops its marketing chrome. */
@media (min-width: 1128px) {
  body.has-results:not(.map-off) .layout {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    height: calc(100vh - var(--header-h)); align-items: stretch;
  }
  body.has-results:not(.map-off) .results {
    padding-right: 20px; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  }
  body.has-results:not(.map-off) .hero,
  body.has-results:not(.map-off) .how,
  body.has-results:not(.map-off) .sitefoot { display: none; }
  body.has-results:not(.map-off) .mapside {
    display: block; height: 100%; padding: 10px 10px 10px 0;
  }
  .map-wrap { border-radius: var(--radius-lg); }
  .mapfab { display: none !important; }
}
/* Below the split breakpoint the map is a full screen overlay behind the
   floating pill, exactly as before. */
@media (max-width: 1127px) {
  body.view-map .mapside {
    display: block; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 120;
  }
  body.view-map .results, body.view-map .sitefoot, body.view-map .hero, body.view-map .how { display: none; }
  body.view-map { overflow: hidden; }
  /* The collapse control is a desktop split-view affordance only. The rule
     below the media query sets display, so this one has to shout. */
  .map-shrink { display: none !important; }
}

/* Muted basemap: OpenStreetMap tiles toned down towards the pale greys and
   soft greens of the Google style, so the two engines look like the same
   product. Attribution stays untouched. */
.basemap-tiles { filter: saturate(.32) contrast(.86) brightness(1.08); }
.leaflet-div-icon { background: transparent; border: none; }
.pricepin {
  background: var(--surface); color: var(--text); border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px; padding: 6px 11px; font-size: 14px; font-weight: 700;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); text-align: center;
  transform: translate(-50%, -50%); display: inline-block; letter-spacing: -.02em;
  transition: transform .1s ease;
}
.pricepin:hover { transform: translate(-50%, -50%) scale(1.08); }
.pricepin.on {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink); z-index: 500;
  transform: translate(-50%, -50%) scale(1.06);
}
/* Collapsed by the declutter pass: still a real marker, just no room for the
   price, so it renders as the small blank white pill Airbnb uses. Hovering
   its card puts the label back. */
.pricepin.blank {
  font-size: 0; padding: 0; width: 26px; height: 14px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.pricepin.hidden { display: none; }
.pricepin.blank.on {
  font-size: 14px; padding: 6px 11px; width: auto; height: auto;
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.leaflet-container { font: inherit; }
/* One HTML control stack for both engines, so the buttons look identical
   whether Google or Leaflet is drawing the tiles: white rounded squares at
   the top right, expand above zoom in above zoom out. */
.map-ctl {
  position: absolute; right: 14px; top: 14px; z-index: 400;
  display: flex; flex-direction: column; gap: 10px;
}
.map-ctl .zoomgroup {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-md);
}
.map-ctl button {
  width: 36px; height: 36px; padding: 0; border-radius: 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 500; line-height: 1;
}
.map-ctl .zoomgroup button { border-radius: 0; box-shadow: none; }
.map-ctl .zoomgroup button:first-child { border-radius: 10px 10px 0 0; border-bottom: none; }
.map-ctl .zoomgroup button:last-child { border-radius: 0 0 10px 10px; }
.map-ctl button:hover { background: var(--chip); }
/* The mini map on the detail sheet only needs zoom. */
.minimap-wrap { position: relative; height: 260px; }
.minimap-wrap .map-ctl { right: 10px; top: 10px; }
.minimap-wrap .map-ctl button { width: 32px; height: 32px; font-size: 16px; }

/* Airbnb's collapse control: top-left of the map panel. Its counterpart when
   the map is away is the pill pinned to the right edge of the results. */
.map-shrink {
  position: absolute; left: 14px; top: 14px; z-index: 400; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
}
.map-shrink:hover { background: var(--chip); transform: scale(1.06); }
.map-open {
  position: fixed; right: 24px; bottom: 24px; z-index: 122;
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-md);
}
.map-open:hover { background: var(--chip); }
@media (max-width: 1127px) { .map-open { display: none !important; } }

.map-redo {
  position: absolute; left: 50%; transform: translateX(-50%); top: 14px; z-index: 400;
  box-shadow: var(--shadow-md); border-radius: 999px; padding: 9px 18px; font-size: 13.5px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.map-redo:hover { background: var(--chip); }
.map-busy {
  position: absolute; right: 14px; top: 14px; z-index: 400;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center;
}

.mapfab {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 125;
  background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: 13px 20px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; gap: 9px;
}
.mapfab:hover { background: var(--ink); transform: translateX(-50%) scale(1.04); }
@media (max-width: 700px) { .mapfab { bottom: 18px; } }

/* ------------------------------------------------------------------ sheets */
.sheet {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sheet-card {
  background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 460px;
  max-height: calc(100vh - 48px); overflow: auto; box-shadow: var(--shadow-lg);
  position: relative;
}
.sheet-card.wide { max-width: 720px; }
.sheet-card.xwide { max-width: 1040px; }
.sheet-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft); position: sticky; top: 0;
  background: var(--surface); z-index: 5; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sheet-head h3 { margin: 0; font-size: 16px; flex: 1; text-align: center; }
.sheet-body { padding: 22px 24px 26px; }
.sheet-sub { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
@media (max-width: 700px) {
  .sheet { align-items: flex-end; padding: 0; }
  .sheet-card { max-width: none; border-radius: 18px 18px 0 0; max-height: 94vh; }
  .sheet-head { border-radius: 18px 18px 0 0; }
  .sheet-body { padding: 18px 16px 24px; }
}

/* ------------------------------------------------------------ listing detail */
.d-title { padding: 4px 0 14px; }
.d-title h2 { font-size: 24px; line-height: 1.2; }
.d-title .d-addr { color: var(--muted); font-size: 14.5px; margin-top: 6px; text-decoration: underline; }

.mosaic {
  display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  border-radius: var(--radius-lg); overflow: hidden; position: relative; aspect-ratio: 2 / 1;
}
.mosaic .cell { overflow: hidden; background: var(--chip); }
.mosaic .cell:first-child { grid-row: span 2; }
.mosaic .cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic.one { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 2 / 1; }
.mosaic.one .cell:first-child { grid-row: span 1; }
.mosaic.two { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.mosaic.two .cell:first-child { grid-row: span 1; }
.mosaic.three { grid-template-columns: 2fr 1fr; }
.mosaic.three .cell:first-child { grid-row: span 2; }
.mosaic .showall {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; background: var(--surface);
  color: var(--text); border: 1px solid var(--text); border-radius: 10px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.mosaic .showall:hover { background: var(--chip); }
.mosaic .noimg { aspect-ratio: auto; }

.d-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; margin-top: 26px; }
@media (max-width: 860px) { .d-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.d-main { min-width: 0; }
.d-sec { padding: 22px 0; border-top: 1px solid var(--line-soft); }
.d-sec:first-child { border-top: none; padding-top: 0; }
.d-sec h4 { font-size: 17px; margin-bottom: 12px; }
.d-facts { font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; column-gap: 8px; }
.d-facts .it { white-space: nowrap; }
.d-facts .it + .it::before { content: "\00b7"; margin-right: 8px; }
.d-desc { font-size: 15px; line-height: 1.6; white-space: pre-wrap; color: var(--text); }
.amen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 520px) { .amen-grid { grid-template-columns: 1fr; } }
.amen-grid div { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.amen-grid svg { flex: none; margin-top: 2px; color: var(--muted); }
.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.factgrid > div { background: var(--sunken); border-radius: 12px; padding: 11px 14px; }
.factgrid .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.factgrid .v { font-size: 14.5px; font-weight: 600; margin-top: 2px; }
.minimap { height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); z-index: 0; }
.d-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.d-note a { color: var(--text); }

.bookcard {
  position: sticky; top: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 22px; background: var(--surface);
}
.bookcard .bprice { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.bookcard .bprice span { font-size: 15px; font-weight: 400; color: var(--muted); }
.bookcard .bavail { color: var(--muted); font-size: 14px; margin-top: 4px; }
.bookcard .cta { width: 100%; padding: 14px 18px; font-size: 15px; margin-top: 16px; border-radius: 12px; }
.bookcard .ghost { margin-top: 10px; }
.bookcard .bline { border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 14px; font-size: 14px; color: var(--muted); }
.contact-line { font-size: 14.5px; margin-bottom: 6px; }
.contact-line a { color: var(--text); }
@media (max-width: 860px) { .bookcard { position: static; } }

.badge {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--chip); color: var(--muted); border: 1px solid var(--line-soft); white-space: nowrap;
}
.badge.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, var(--line-soft)); }
.badge.pend { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line-soft)); }
.badge.no { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line-soft)); }

/* full screen photo gallery */
.gallery { position: fixed; inset: 0; z-index: 300; background: var(--bg); overflow: auto; }
.gallery .gtop {
  position: sticky; top: 0; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--bg); z-index: 2; border-bottom: 1px solid var(--line-soft);
}
.gallery .gtop span { font-size: 14px; color: var(--muted); }
.gallery .gbody { max-width: 880px; margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 16px; }
.gallery img { width: 100%; border-radius: 14px; display: block; }

/* ------------------------------------------------ alerts and my listings rows */
.row-item {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--line-soft);
}
.row-item:first-of-type { border-top: none; }
.row-item .ri-body { flex: 1 1 200px; min-width: 0; }
.row-item .ri-title { font-weight: 700; font-size: 15px; }
.row-item .ri-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.row-item.paused .ri-body { opacity: .55; }
.row-item .ri-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-item .ri-actions button { padding: 8px 14px; font-size: 13.5px; }

.createbox {
  background: var(--sunken); border-radius: 14px; padding: 16px; margin-bottom: 18px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.createbox .cb-body { flex: 1 1 200px; min-width: 0; }
.createbox .cb-title { font-weight: 700; font-size: 14.5px; }
.createbox .cb-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ------------------------------------------------------------ landlord form */
.formgrid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .formgrid { grid-template-columns: 1fr; } .formgrid .full { grid-column: auto; } }
.form-note {
  background: var(--accent-soft); border-radius: 12px; padding: 14px 16px;
  font-size: 13.5px; color: var(--text); margin-bottom: 20px;
}
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.fineprint { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }

/* ------------------------------------------------------------------- login */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px; font-weight: 600; border-radius: 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--text);
}
.google-btn:hover { background: var(--chip); }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; margin: 18px 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }
.modal-row { display: flex; gap: 10px; }
.modal-row input { flex: 1; min-width: 0; height: 50px; }
.modal-row button { flex: none; padding: 0 20px; }
@media (max-width: 420px) { .modal-row { flex-wrap: wrap; } .modal-row button { flex: 1 1 100%; padding: 13px 20px; } }

/* ------------------------------------------------------- how it works, footer */
.how { padding: 46px 0 10px; border-top: 1px solid var(--line-soft); margin-top: 20px; }
.how h2 { font-size: 22px; margin-bottom: 22px; }
.steps { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 20px; } }
.step .n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; margin-bottom: 12px;
}
.step b { display: block; margin-bottom: 5px; font-size: 15.5px; }
.step p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

.sitefoot { border-top: 1px solid var(--line-soft); margin-top: 46px; padding: 40px 0 90px; background: var(--sunken); }
.sitefoot .inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.foot-cols { display: grid; gap: 30px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-cols h3 { font-size: 14px; margin-bottom: 14px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-cols a, .foot-cols button.flink {
  color: var(--muted); font-size: 14px; text-decoration: none; background: none;
  padding: 0; font-weight: 400; text-align: left; border-radius: 3px;
}
.foot-cols a:hover, .foot-cols button.flink:hover { color: var(--text); text-decoration: underline; background: none; }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 24px; color: var(--muted); font-size: 13px; }
.src-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.src-chip {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; color: var(--text); white-space: nowrap;
}
.foot-lines { display: grid; gap: 8px; max-width: 92ch; line-height: 1.5; }

/* ------------------------------------------------------------------- toast */
#toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 900;
  background: var(--ink); color: var(--on-ink); padding: 13px 20px; border-radius: 12px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .22s;
  max-width: calc(100vw - 32px); text-align: center; box-shadow: var(--shadow-lg);
}
#toast.show { opacity: 1; }

/* ------------------------------------------------------------- small screens */
@media (max-width: 1080px) {
  :root { --gutter: 24px; }
  .topnav .navlink { display: none; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; --header-h: 132px; }
  .topbar-main { grid-template-columns: 1fr auto; gap: 10px; padding: 12px var(--gutter); }
  .searchpill {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding: 0; height: 50px;
    border-radius: 999px; margin-top: 4px;
  }
  .searchpill .seg { flex-direction: row; align-items: center; gap: 6px; border-left: none; padding: 0 6px; }
  .searchpill .seg:not(.seg-where) { display: none; }
  .searchpill .seg-where { flex: 1; padding-left: 18px; }
  .searchpill .seg-where em { font-size: 14px; }
  .searchpill .seg-where b { font-size: 13px; }
  .searchpill .seg-where:hover { background: none; }
  .searchpill .pill-go { margin-right: 7px; }
  .hero { padding: 26px 0 4px; }
  .hero h1 { font-size: 30px; }
  .hero .sub { font-size: 15px; }
  .cat { font-size: 11px; padding: 8px 10px 10px; }
  .catbar .filtersbtn { padding: 9px 13px; }
  .d-title h2 { font-size: 20px; }
  .mosaic { aspect-ratio: 3 / 2; grid-template-columns: 1fr 1fr; }
  .mosaic .cell:first-child { grid-column: 1 / -1; grid-row: span 1; }
  .mosaic.one .cell:first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  :root { --gutter: 14px; }
  .brand span { display: none; }
  .results-head .savebtn { width: 100%; justify-content: center; }
}

/* Motion is decoration here: every animation has a static resting state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .lst .rail { scroll-behavior: auto; }
}

/* ------------------------------------------------------- late additions */
/* The detail CTA is a real link (it leaves the site), so it needs the
   button's look without being a button. */
.bookcard a.cta {
  display: block; text-align: center; text-decoration: none; background: var(--accent);
  color: #fff; font-weight: 700; border-radius: 12px; padding: 14px 18px; font-size: 15px;
  margin-top: 16px;
}
.bookcard a.cta:hover { background: var(--accent-hover); }
.bookcard button.cta { width: 100%; }

/* A photo that 404s leaves the rail empty: the placeholder takes its slot. */
.rail .noimg { flex: none; width: 100%; }
.photo > .noimg { position: absolute; inset: 0; }
.noimg span { max-width: 80%; text-align: center; }

.heart.on svg { fill: var(--accent); stroke: #fff; }
#detailSave.on svg { fill: var(--accent); stroke: var(--accent); }
#detailSave { color: var(--text); }

/* Keep the panel's own controls on one rhythm: a native date input renders
   taller than a select unless it is told otherwise. */
.fp-sec .fgrid select, .fp-sec .fgrid input { height: 46px; }
.fp-sec .rent-pair input { height: 46px; }

/* The provenance chip repeats on every card, so it recedes rather than
   competing with the price and the save heart. */
.lst .badge-src {
  font-weight: 600; font-size: 11px; padding: 3px 9px;
  background: rgba(255, 255, 255, .94); color: #222; box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

/* The detail sheet has its own sticky header, so the booking card parks
   below it rather than sliding underneath. */
.bookcard { top: 80px; }

.sheet-body .empty { padding: 8px 0 12px; }

/* The landing state has no results behind it, so the invitation sits in the
   middle of the page rather than hugging the left edge. */
.hero { max-width: 720px; margin: 0 auto; text-align: center; padding: 66px 0 26px; }
.hero .sub { margin-left: auto; margin-right: auto; }
.hero .herobtns, .hero .stats { justify-content: center; }
@media (max-width: 860px) {
  .hero { padding: 34px 0 10px; text-align: left; }
  .hero .herobtns, .hero .stats { justify-content: flex-start; }
  .hero .herobtns button { flex: 1 1 auto; }
}

/* A listing with no photos does not earn a half screen of grey. */
.mosaic.none { aspect-ratio: 4 / 1; }

/* The card title carries the click target, so it has to shed every button
   default and keep the heading look. */
.lst button.ctitle {
  background: none; color: inherit; font: inherit; font-weight: 700; letter-spacing: -.01em;
  padding: 0; border-radius: 4px; text-align: left; display: block; width: 100%;
}
.lst button.ctitle:hover { background: none; }

/* A listing with no media of its own falls back to a Street View shot of the
   building. That is the block, not the unit, so the picture carries a label
   saying so; the tag sits bottom-left, clear of the save heart and the source
   chip up top. */
.photo.sv, .mosaic.sv { position: relative; }
.photo .sv-tag, .mosaic .sv-tag {
  position: absolute; left: 9px; bottom: 9px; z-index: 3; pointer-events: none;
  background: rgba(0, 0, 0, .52); color: #fff; border-radius: 999px;
  padding: 3px 9px; font-size: 11px; font-weight: 600;
  backdrop-filter: blur(2px);
}
.mosaic .sv-tag { left: 14px; bottom: 14px; font-size: 12px; padding: 4px 11px; }
/* One frame, no rail affordances: nothing to swipe to. */
.lst .photo.sv .rail { overflow: hidden; }

/* ------------------------------------------------- map engine internals */
/* Google draws its own tiles into this node; Leaflet draws into the same one.
   Either way it fills the panel. */
#resultsMap, .minimap { height: 100%; width: 100%; }
.minimap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); z-index: 0; }

/* A Google price pin is an OverlayView div positioned at the marker point;
   the .pricepin inside it is the same element Leaflet renders. */
.gpin { position: absolute; width: 0; height: 0; }
.gpin .pricepin { position: absolute; left: 0; top: 0; }
.gm-style img { max-width: none; }

/* The map's own expand control: the grid steps aside and the map takes the
   whole width. Only meaningful in the desktop split. */
@media (min-width: 1128px) {
  body.has-results.map-wide .layout { grid-template-columns: minmax(0, 1fr); }
  body.has-results.map-wide .results { display: none; }
  body.has-results.map-wide .mapside {
    display: block; position: sticky; top: var(--header-h);
    height: calc(100vh - var(--header-h)); padding: 10px;
  }
}
@media (max-width: 1127px) {
  .map-ctl #mapWide { display: none; }
}