/* PLEASANT STREET: a web app. A bar on top (title, search, count), then the list and the map filling
   the window. On phones, the whole page scrolls with the map above the results. */
@font-face { font-family: "Noto Serif"; font-weight: 400 900; font-display: swap; src: url(fonts/noto-serif-latin.woff2) format("woff2"); }
@font-face { font-family: "Lobster"; font-weight: 400; font-display: swap; src: url(fonts/lobster-latin.woff2) format("woff2"); }
:root {
  --water: #74e3d1; --ink: #17363c; --mute: #647a7b; --green: #057d7b; --teal: #2fa18c;
  --tint: #fff; --line: #e4e7e6; --white: #fff; --coral: #f9426f; --coral-action: #ea073f;
  --serif: "Noto Serif", serif; --script: "Lobster", cursive;
  /* The page column: header, search, filters and cards share one left and right edge on wide screens. */
  --gutter: max(24px, calc((100vw - 1580px) / 2));
  --r: 12px; --shadow: 0 2px 10px rgba(13, 43, 46, .10); --shadow-up: 0 6px 18px rgba(13, 43, 46, .16);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--serif); color: var(--ink); background: var(--tint); }

.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100svh; }
.app-header, .app-body, .app-results, .app-filters, .app-list { min-width: 0; }

/* The small home bar is separate from the search and view controls. */
.app-header { position: relative; }
.app-brand-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 46px; padding: 7px 12px; background: white; border-bottom: 1px solid var(--line); }
.app-home { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: auto; border-radius: 50%; background: var(--coral); }
.app-home img { display: block; width: 30px; height: 30px; filter: grayscale(1) contrast(100) invert(1); mix-blend-mode: screen; }
.app-header-link { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font: 11px var(--serif); text-decoration: none; white-space: nowrap; cursor: pointer; }
.app-header-link:hover { background: white; border-color: #b9c2be; }
.app-header-link--add { background: #e8ebea; border-color: #d0d6d3; color: var(--ink); }
.app-header-link--add:hover { background: #dde2df; border-color: #b9c2be; }
/* The bar. */
.app-bar { display: flex; align-items: center; gap: 12px 16px; padding: 10px 16px; background: white; box-shadow: var(--shadow); z-index: 1; }
.app-title { margin: 0; font-family: var(--script); font-weight: 400; font-size: 28px; line-height: 1; color: var(--ink); white-space: nowrap; }
.app-search { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; max-width: 520px; }
.app-search-guests { flex: none; margin-right: 14px; padding-left: 10px; border-left: 1px solid var(--line); font-size: 12px; color: var(--mute); white-space: nowrap; }
.app-search-guests[hidden] { display: none; }
.app-search > svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; pointer-events: none; }
.app-search input { width: 100%; height: 40px; padding: 0 16px 0 40px; font: inherit; font-size: 16px; color: var(--ink);
                    background: var(--white); border: 1.5px solid transparent; border-radius: 999px; outline: none; }
.app-search input:focus { border-color: var(--teal); }
.app-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.app-count { margin-left: auto; font-size: 14px; color: var(--ink); white-space: nowrap; }
.app-search-row, .app-header-actions { display: contents; }
.app-control-row { display: none; }
/* Wide screens: the LAZY site's header. Water bar, the LAZY mark, the street's name, white links, a white button. */
.app-home-logo { display: none; }
@media (min-width: 761px) {
  .app-brand-bar { min-height: 72px; padding: 10px var(--gutter); gap: 28px; background: var(--water); border-bottom: 0; }
  .app-home { width: auto; height: 50px; margin-right: 0; border-radius: 0; background: none; }
  .app-home img:not(.app-home-logo) { display: none; }
  .app-home .app-home-logo { display: block; width: auto; height: 50px; filter: none; mix-blend-mode: normal; }
  .app-brand-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 0 auto 0 -12px; font: 400 30px/1 var(--script); color: var(--ink); white-space: nowrap; }
  .app-header-link { min-height: 40px; padding: 8px 4px; border: 0; background: none; color: var(--white); font: 700 17px var(--serif); }
  .app-header-link:hover { background: none; color: var(--coral); }
  .app-header-link--add { padding: 8px 20px; border-radius: 8px; background: var(--white); color: var(--green); box-shadow: var(--shadow); }
  .app-header-link--add:hover { background: var(--teal); color: var(--white); }
  .app-bar { padding: 12px var(--gutter); }
}
}
.app-count__potential::before { content: '· '; }
.app-view-switch, .app-size-switch { display: flex; padding: 3px; border: 1px solid rgba(23,54,60,.16); border-radius: 999px; gap: 2px; background: rgba(255,255,255,.38); }
.app-view-switch button, .app-size-switch button { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; color: var(--ink); background: transparent; cursor: pointer; }
.app-view-switch button[aria-pressed="true"], .app-size-switch button[aria-pressed="true"] { color: var(--ink); background: #e8ebea; box-shadow: 0 1px 3px #17363c12; }
.app-view-switch svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linejoin: round; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
/* A destination page: the place's name on the water, then its homes. */
/* The destination's name band: small and centered. */
.ps-dest { padding: 8px var(--gutter) 10px; background: var(--water); color: var(--ink); text-align: center; }
.ps-dest__name { margin: 0; font: 400 clamp(26px, 3.2vw, 36px)/1.1 var(--script); }
.ps-dest__count { margin: 2px 0 0; font: 13px/1.4 var(--serif); }
/* Phone: the mint band is a thin strip behind the floating search; its count line is hidden (it sat behind the control pill). */
@media (max-width: 760px) { .ps-dest { padding: 4px 16px 5px; } .ps-dest__name { font-size: 24px; } .ps-dest__count { display: none; } }
.app-destinations { display: flex; align-items: center; gap: 8px; padding: 10px 16px; overflow-x: auto; white-space: nowrap; background: #f7fcfa; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.app-destinations[hidden] { display: none; }
.app-destinations__label { color: var(--mute); font-size: 12px; margin-right: 4px; }
.app-destinations button { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 6px 11px; border: 1px solid #cadfd9; border-radius: 999px; color: var(--green); background: white; font: inherit; font-size: 12px; cursor: pointer; }
.app-destinations button span { min-width: 21px; padding: 1px 4px; border-radius: 999px; background: var(--tint); font-size: 10px; }
.app-destinations button[aria-pressed="true"] { color: white; background: var(--green); border-color: var(--green); }
.app-destinations button[aria-pressed="true"] span { color: white; background: #ffffff26; }
.app-card-controls { display: none; }

/* The list beside the map; each scrolls on its own. */
.app-body { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); min-height: 0; }
/* The results: the extra filters on top, the homes under them. */
.app-results { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.app-filters { display: grid; gap: 12px; padding: 12px 14px 4px; border-bottom: 1px solid var(--line); }
.app-filter-fields { display: contents; }
.app-filter-toggle { display: none; }
.ps-sheet-handle, .ps-selected { display: none; }
.ps-selected[hidden] { display: none !important; }
.ps-home__address { border: 0; padding: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.ps-home__address:hover { color: var(--green); text-decoration: underline; }
.ps-card--select { width: 100%; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.ps-card--select.ps-card--featured { border: 2px solid var(--coral); }
/* Sleeps: a slider from 1 to 8, the numbers under it. */
.app-sleeps { display: grid; gap: 2px; }
.app-sleeps__head { font-size: 14px; color: var(--mute); }
.app-sleeps__head b { color: var(--ink); }
.app-sleeps input { width: 100%; margin: 4px 0 0; accent-color: var(--green); cursor: pointer; }
.app-sleeps__ticks { display: flex; justify-content: space-between; padding: 0 5px; font-size: 12px; color: var(--mute); }
/* Type: pills, any number pressed; none pressed is every type. */
.app-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.app-pills button { height: 34px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--green); background: var(--white);
                    border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; }
.app-pills button:hover { border-color: var(--teal); }
.app-pills button[aria-pressed="true"] { color: var(--ink); background: #e8ebea; border-color: #d0d6d3; }
.app-list { overflow-y: auto; padding: 12px 14px 14px; scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
.app-map { position: relative; height: 100%; isolation: isolate; }

/* One home: its picture, name and place, selectable to open its pin; Open website is its own button below. */
.ps-card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow);
           overflow: hidden; text-decoration: none; color: var(--ink); }
.ps-card:hover { box-shadow: var(--shadow-up); }
.ps-card--featured { position: relative; border: 2px solid var(--coral); }
.ps-card__featured { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px;
                     background: var(--coral); color: var(--ink); font-size: 12px; font-weight: 700; z-index: 1; }
.ps-featured-pin { background: transparent; border: 0; }
.ps-featured-pin svg { display: block; filter: drop-shadow(0 2px 2px rgba(13, 43, 46, .25)); }
.ps-featured-pin__shape { fill: var(--coral); stroke: white; stroke-width: 1.5; }
.ps-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ps-card__name { padding: 8px 12px 0; font-size: 16px; font-weight: 700; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-card__place { padding: 2px 12px 10px; font-size: 14px; color: var(--mute); }
.ps-pop .ps-card { box-shadow: none; }
.ps-popup--featured .leaflet-popup-content-wrapper { border: 2px solid var(--coral); }
.ps-popup--featured .ps-card--featured { border: 0; }
.leaflet-popup-content { margin: 10px 12px; }
.ps-card__missing { margin: 8px 12px 10px; font-size: 13px; color: var(--mute); font-style: italic; }
.ps-card__photo { position: relative; }
.ps-card__open { position: absolute; z-index: 2; bottom: 8px; right: 8px; display: flex; align-items: center; justify-content: center;
                 width: 34px; height: 34px; border-radius: 50%; background: var(--coral-action); color: white; box-shadow: 0 2px 7px #17363c33; }
.ps-card__open:hover { filter: brightness(1.1); }
.ps-card__open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Groups collapse independently without changing the map pins or result count. */
.ps-results-group { margin-bottom: 20px; }
.ps-results-group summary { display: flex; position: static; z-index: 2; align-items: center; gap: 10px; padding: 12px 0; margin-bottom: 12px; border-bottom: 1px solid var(--line); background: var(--tint); cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
.ps-results-group summary::-webkit-details-marker { display: none; }
.ps-results-group summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }
.ps-results-group summary svg { width: 19px; height: 19px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.7; transform: rotate(-90deg); }
.ps-results-group[open] summary svg { transform: rotate(0); }
.ps-results-group__count { padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--green); font-size: 12px; }
.ps-results-group--featured .ps-results-group__count { background: #ffddd7; color: #8f3e34; }
.ps-results-group__note { margin: 0 0 16px; font-size: 12px; color: var(--mute); }
.ps-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; align-items: stretch; }
/* The circles: how many homes are there; they split into pins as the map zooms in. */
.app-cluster { display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--white);
               border: 3px solid var(--white); box-shadow: var(--shadow); font-weight: 700; font-size: 14px; }
/* A home's pin or circle, coral, while its card is hovered or its popup is open from a card click. */
.ps-marker--hover, .ps-marker--selected { filter: drop-shadow(0 0 4px var(--coral)) drop-shadow(0 0 4px var(--coral)); }
.leaflet-marker-icon.ps-marker--hover, .leaflet-marker-icon.ps-marker--selected,
.ps-featured-pin.ps-marker--hover, .ps-featured-pin.ps-marker--selected { z-index: 10000 !important; }
.app-cluster--hover, .app-cluster--selected { background: var(--coral) !important; }
.ps-none { grid-column: 1 / -1; margin: 8px 0; font-size: 16px; }

/* Cards view uses the same location and filters, with the map put away. */
.app--cards .app-body { display: block; min-height: 0; }
.app--cards .app-map { display: none; }
.app--cards .app-results { height: 100%; }
.app--cards .app-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px var(--gutter); background: #f3fbf8; }
.app--cards .app-sleeps { width: 230px; }
.app--cards .app-pills { padding: 0; }
.app--cards .app-card-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; color: var(--mute); }
.app--cards .app-list { padding: 0 var(--gutter) 40px; }
.app--cards .ps-results-group { margin-bottom: 28px; }
.app--cards .ps-results-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 26px; }
.app--cards.app--tiny .ps-results-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; }
.ps-home { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-radius: 18px; background: white; border: 1px solid var(--line); box-shadow: 0 3px 12px #17363c08; }
.ps-home--featured { border: 2px solid var(--coral); }
.ps-gallery { display: grid; position: relative; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--line); }
.ps-gallery > img, .ps-gallery__pending { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-width: 0; }
.ps-gallery > img:first-of-type, .ps-gallery > .ps-gallery__pending:first-child { grid-column: 1 / -1; aspect-ratio: 1.8; }
.ps-gallery__pending { display: grid; place-items: center; font-size: 12px; color: var(--mute); background: #eef4f0; }
.ps-home__body { flex: 1; padding: 17px 20px 20px; display: flex; flex-direction: column; }
.ps-home__place { margin: 0 0 5px; font-size: 12px; color: var(--mute); }
.ps-home h2 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-home__operator { margin: 5px 0 0; color: var(--mute); font-size: 10px; }
.ps-home__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 10px 0 16px; font-size: 13px; line-height: 1.6; color: #50676b; min-height: 4.8em; }
.ps-home__facts { min-height: 48px; display: flex; flex-wrap: wrap; gap: 12px 17px; margin: 0; padding: 13px 0; border-top: 1px solid #e5eeeb; border-bottom: 1px solid #e5eeeb; }
.ps-home__facts div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ps-home__facts dt { display: flex; color: var(--mute); }
.ps-home__facts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ps-home__facts .ps-fact { display: inline-flex; align-items: center; gap: 4px; }
.ps-home__facts .ps-fact__value { font-size: 12px; font-weight: 650; }
.ps-card .ps-home__facts { margin: 4px 12px 0; min-height: 0; padding: 9px 0 12px; gap: 5px; flex-wrap: nowrap; overflow: hidden; border-bottom: 0; }
.ps-card .ps-home__facts svg { width: 14px; height: 14px; color: var(--mute); }
.ps-card .ps-home__facts .ps-fact__value { font-size: 11px; }
.ps-home--tiny .ps-home__facts { min-height: 40px; gap: 6px 9px; padding: 9px 0; flex-wrap: nowrap; overflow: hidden; }
.ps-home--tiny .ps-home__facts svg { width: 16px; height: 16px; }
.ps-home--tiny .ps-home__facts dd { font-size: 11px; }
.ps-home__facts dd { font-size: 13px; margin: 0; font-weight: 650; }
.ps-home__place { display: flex; align-items: center; gap: 5px; }
.ps-home__place svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ps-photo-platforms { position: absolute; bottom: 10px; right: 10px; z-index: 1; display: flex; gap: 5px; }
.ps-photo-platforms:empty { display: none; }
.ps-platform { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; background: #fffffff2; border: 1px solid #ffffffb3; box-shadow: 0 1px 4px #17363c20; border-radius: 7px; }
.ps-platform img { width: 18px; height: 18px; }
.ps-platform--vrbo img { width: 26px; height: 16px; object-fit: contain; }
.ps-home__missing { line-height: 1.4; font-size: 11px; color: var(--mute); margin: 14px 0 0; }
.ps-home__ask-address { margin: 2px 0 0; font-size: 11px; line-height: 1.4; color: var(--mute); }
.ps-home__actions { margin-top: auto; display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 16px; }
.ps-action { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 12px 10px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 650; text-decoration: none; cursor: pointer; }
.ps-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ps-home__independent { margin: 9px 0 0; color: var(--mute); font-size: 10px; line-height: 1.5; text-align: center; }
.ps-home--tiny .ps-home__independent { font-size: 9px; }
.ps-action--primary, .ps-action--primary:visited { border: 1px solid #b5c0ba; background: #d9e0dc; color: var(--ink); transition: background .18s, color .18s, border-color .18s; }
/* A tap or retained keyboard focus stays neutral; coral is true mouse hover only. */
.ps-action--primary:active { border-color: #a8b5ad; background: #c9d3cc; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .ps-action--primary:hover:not(:focus):not(:active) { border-color: var(--coral-action); background: var(--coral-action); color: white; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ps-home:not(.ps-home--detail), .ps-card { transition: transform .32s cubic-bezier(.2, 1.6, .4, 1), box-shadow .22s ease; }
  .ps-home:not(.ps-home--detail):hover, .ps-card:hover { transform: translateY(-4px); box-shadow: 0 9px 22px #17363c1c; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-action--primary { transition: none; }
}
/* The LAZY lettermark keeps claiming secondary to the property. */
.ps-claim-badge { position: absolute; z-index: 2; top: 10px; right: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid #17363c12; border-radius: 9px; background: #fffffff5; color: #50676b; box-shadow: 0 2px 7px #17363c16; font-size: 11px; line-height: 1.35; text-decoration: none; }
.ps-claim-badge:hover { background: white; color: var(--green); }
.ps-claim-badge__logo { display: block; flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: contain; }
.ps-home--tiny .ps-claim-badge { top: 8px; right: 8px; width: 28px; height: 28px; max-width: calc(100% - 16px); justify-content: center; gap: 0; padding: 5px; border-radius: 8px; }
.ps-home--tiny .ps-claim-badge > span { display: none; }
.ps-home--tiny .ps-claim-badge__logo { width: 16px; height: 16px; }
.ps-home--featured.ps-home--tiny .ps-claim-badge { top: 8px; }
.ps-home--tiny { border-radius: 12px; }
.ps-home--tiny .ps-home__body { padding: 11px 12px 12px; }
.ps-home--tiny h2 { font-size: 15px; }
.ps-home--tiny .ps-home__place { font-size: 11px; }
.ps-home--tiny .ps-photo-platforms { bottom: 8px; right: 8px; }
.ps-home--tiny .ps-home__actions { margin-top: auto; gap: 6px; padding-top: 12px; }
.ps-home--tiny .ps-action { min-height: 50px; font-size: 14px; }
.ps-home--tiny .ps-action svg { display: none; }
.ps-home--tiny .ps-card__featured { top: 8px; left: 8px; padding: 3px 7px; font-size: 10px; }

@media (max-width: 760px) {
  html, body { height: auto; overflow: visible; }
  .app-header { position: sticky; top: 0; z-index: 600; box-shadow: none; }
  /* No header on phone: the floating search/filter pill sits where it was instead, and claims its space. */
  .app-brand-bar { display: none; }
  .app-floating-controls { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 420px; display: grid; gap: 8px; pointer-events: none; }
  .app-floating-controls > * { pointer-events: auto; }
  /* Cards on phone: the search and the control pill are part of the page, one under the other, above the list —
     not floating over it. The sticky header keeps them on top while the list scrolls. (Map keeps them floating.) */
  .app--cards .app-floating-controls { position: static; transform: none; margin: 8px auto 0; gap: 6px; }
  .app--cards .app-header { padding-bottom: 6px; background: var(--tint); }
  .app--cards .app-body { padding-top: 4px; }
  /* Sheet dragged all the way up: the mint band goes, the pill goes to the top, the sheet's handle and count start under it. */
  /* Map on a destination page: the floating search starts under the thin band, so the band shows on open; dragging the sheet up removes it. */
  .app:not(.app--cards):not(.app--sheet-expanded) .ps-dest + .app-floating-controls { top: 48px; }
  .app.app--sheet-expanded:not(.app--cards) .ps-dest { display: none; }
  .app.app--sheet-expanded:not(.app--cards) .app-floating-controls { top: 8px; }
  .app.app--sheet-expanded:not(.app--cards) .app-results { padding-top: 60px; }
  .app.app--sheet-expanded:not(.app--cards) .app-list { padding-top: 0; }
  .app { height: auto; min-height: 100dvh; grid-template-rows: auto auto; align-content: start; }
  .app-bar { display: block; padding: 0; background: transparent; box-shadow: none; }
  .app-title { font-size: 22px; }
  .app-control-row { display: flex; align-items: center; justify-content: center; justify-self: center; width: max-content; max-width: 100%; gap: 8px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fffffff5; box-shadow: 0 3px 14px #17363c1a; }
  .app .app-control-row .app-card-controls { display: flex; width: auto; margin: 0; padding: 0; border: 0; }
  .app .app-control-row .app-card-controls > span { display: none; }
  .app--map-compact .app-bar, .app--map-compact .app-destinations { display: none; }
  .app-header-actions { display: flex; grid-column: 2; grid-row: 1; align-items: center; gap: 7px; }
  .app-search-row { display: flex; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: 0 3px 14px #17363c1a; }
  .app-search { min-width: 0; max-width: none; }
  .app-search input { min-width: 0; height: 38px; padding: 0 12px 0 40px; border: 0; }
  .app-search-guests { font-size: 11px; }
  .app-search-row:focus-within { outline: 2px solid var(--coral); outline-offset: 1px; }
  .app-count { margin: 0; flex: none; font-size: 12px; line-height: 1.45; text-align: right; white-space: nowrap; }
  .app-count__total { display: block; font-weight: 600; }
  .app-count__potential { display: block; font-size: 10px; opacity: .8; }
  .app-count__potential::before { content: none; }
  .app-view-switch { margin: 0; padding: 3px; }
  .app-view-switch button { justify-content: center; width: 30px; height: 30px; padding: 0; }
  .app-view-switch svg { width: 15px; height: 15px; }
  .app-switch-label { display: none; }
  .app-destinations { gap: 7px; padding: 8px 14px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .app-destinations::-webkit-scrollbar { display: none; }
  .app-destinations__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-destinations button { min-height: 38px; padding: 7px 12px; }
  .app-body { display: flex; flex-direction: column; }
  .app-map { order: -1; height: clamp(230px, 38svh, 340px); flex: none; }
  .app-results { display: block; }
  .ps-results-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .app-filters, .app--cards .app-filters { display: none; }
  .app--filters-open .app-filters, .app--cards.app--filters-open .app-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 12px 16px 16px; border-bottom: 1px solid var(--line); background: #f3fbf8; }
  .app-filter-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #ffffff70; color: var(--ink); cursor: pointer; }
  .app-filter-toggle svg { width: 16px; height: 16px; fill: white; stroke: currentColor; stroke-width: 1.7; }
  .app-filter-toggle[aria-expanded="true"] { border-color: #d0d6d3; background: #e8ebea; color: var(--ink); }
  .app-filter-toggle span { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--water); border-radius: 999px; background: var(--green); color: white; font: 10px/14px var(--serif); }
  .app-filter-toggle span[hidden] { display: none; }
  .app-floating-controls .app-filters { border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-up); max-height: calc(100dvh - 190px); overflow-y: auto; }
  .app-filter-fields { display: none; }
  .app--filters-open .app-filter-fields { display: grid; flex-basis: 100%; min-width: 0; gap: 12px; padding: 0; }
  .app-sleeps, .app--cards .app-sleeps { width: 100%; }
  .app-sleeps input { min-height: 28px; }
  .app-pills, .app--cards .app-pills { padding: 0; gap: 7px; }
  .app-pills button { min-height: 42px; padding: 0 12px; font-size: 13px; }
  .app--cards .app-results { height: auto; }
  .app--cards .app-card-controls { width: 100%; margin: 0; padding-top: 10px; justify-content: space-between; border-top: 1px solid var(--line); }
  .app-card-controls > span { display: inline; }
  .app-size-switch button { min-height: 30px; padding: 5px 10px; font-size: 11px; }
  .app-list, .app--cards .app-list { overflow: visible; padding: 4px 14px max(24px, env(safe-area-inset-bottom)); overscroll-behavior-y: auto; }
  .ps-results-group summary { position: static; min-height: 46px; margin-bottom: 10px; }
  .app--cards .ps-results-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ps-home__body { padding: 15px 16px 16px; }
  .ps-home h2 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-home__description { font-size: 13px; }
  .ps-home__facts { gap: 12px 17px; }
  .ps-action { min-height: 50px; font-size: 14px; }
  .app--cards.app--tiny .ps-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ps-home--tiny .ps-home__body { padding: 9px; }
  .ps-home--tiny h2 { font-size: 14px; }
  .ps-home--tiny .ps-home__actions { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ps-home--tiny .ps-action { min-height: 46px; padding: 10px 5px; font-size: 12px; }
  .leaflet-control-zoom a { min-width: 36px; min-height: 36px; line-height: 36px; }
  .leaflet-popup-content { max-width: calc(100vw - 70px); }

  /* The phone map stays put while a results tray moves over it. Cards keeps page scrolling. */
  .app:not(.app--cards) { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .app:not(.app--cards) .app-body { display: block; position: relative; overflow: hidden; }
  .app:not(.app--cards) .app-map { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }
  .app:not(.app--cards) .app-results { position: absolute; bottom: 0; left: 0; right: 0; z-index: 500; display: flex; flex-direction: column; height: var(--sheet-height, 48%); min-height: 90px; max-height: 100%; overflow: hidden; border-radius: 24px 24px 0 0; background: white; box-shadow: 0 -4px 26px #17363c24; transition: height .24s ease; }
  .app:not(.app--cards) .app-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 14px max(18px, env(safe-area-inset-bottom)); }
  .app:not(.app--cards) .app-list[hidden] { display: none; }
  .app:not(.app--cards) .ps-results-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .app:not(.app--cards) .ps-card__name { padding-top: 12px; font-size: 16px; line-height: 1.35; white-space: nowrap; }
  .app.app--tiny:not(.app--cards) .ps-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app.app--tiny:not(.app--cards) .ps-home__facts { margin: auto 9px 10px; gap: 6px; }
  .app.app--tiny:not(.app--cards) .ps-home__facts svg { width: 15px; height: 15px; }
  .app.app--tiny:not(.app--cards) .ps-fact__value { font-size: 11px; }
  .app.app--tiny:not(.app--cards) .ps-card__name { font-size: 13px; padding: 8px 9px 0; }
  .app.app--tiny:not(.app--cards) .ps-card__place { font-size: 11px; padding: 2px 9px 10px; }
  .app.app--sheet-expanded:not(.app--cards) .app-results { height: 100%; max-height: 100%; border-radius: 0; }
  .app:not(.app--cards) .ps-card__place { padding-bottom: 14px; font-size: 13px; }
  .app:not(.app--cards) .ps-sheet-handle { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; height: 40px; min-height: 40px; padding-top: 8px; cursor: grab; touch-action: none; user-select: none; }
  .ps-sheet-grip { width: 56px; height: 6px; flex: none; border-radius: 999px; background: #17363c70; pointer-events: none; }
  .ps-sheet-handle:hover .ps-sheet-grip, .ps-sheet-handle:focus-visible .ps-sheet-grip, .app--sheet-dragging .ps-sheet-grip { background: var(--green); }
  .ps-sheet-count { font-size: 15px; font-weight: 700; }
  .ps-sheet-handle:focus-visible { outline: 3px solid var(--coral); outline-offset: -4px; border-radius: 24px 24px 0 0; }
  .app--sheet-dragging .app-results { transition: none; }
  .app--sheet-dragging .ps-sheet-handle { cursor: grabbing; }
  .app--sheet-collapsed:not(.app--cards) .app-list { visibility: hidden; }

  .app.app--detail-open:not(.app--cards) .app-results { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); height: var(--sheet-height, 28%); min-height: 0; max-height: calc(100% - 24px); border-radius: 20px; background: white; animation: ps-card-arrive .22s ease-out; }
  .app.app--detail-open:not(.app--cards) .ps-sheet-handle { display: flex; height: 48px; min-height: 48px; padding-top: 16px; }
  .app--detail-open .ps-sheet-count { display: none; }
  .app--detail-peek .ps-selected__content { overflow-y: hidden; }
  .app.app--detail-open.app--sheet-expanded:not(.app--cards) .app-results { inset: 0; height: 100%; max-height: 100%; border-radius: 0; }
  .app--detail-open .ps-selected { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
  .ps-selected__toolbar { position: absolute; top: 10px; right: 10px; left: 10px; z-index: 3; display: flex; justify-content: flex-end; }
  .ps-selected__toolbar > span, #ps-selected-back { display: none; }
  .ps-selected__toolbar button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #17363c12; border-radius: 50%; background: #fffffff5; color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
  .ps-selected__toolbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .ps-selected__content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  .ps-home--detail { border: 0; border-radius: 0; box-shadow: none; }
  .ps-home--detail .ps-gallery { display: block; }
  .ps-home--detail .ps-photo-platforms { display: none; }
  .ps-photo-strip { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ps-photo-strip::-webkit-scrollbar { display: none; }
  .ps-photo-strip > img, .ps-photo-strip > .ps-gallery__pending { flex: 0 0 100%; width: 100%; min-width: 0; aspect-ratio: 1.8; object-fit: cover; scroll-snap-align: start; }
  .ps-photo-count { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px 7px; border-radius: 999px; background: #17363c38; pointer-events: none; }
  .ps-photo-count[hidden] { display: none; }
  .ps-photo-count > span { width: 6px; height: 6px; border-radius: 50%; background: #ffffff80; }
  .ps-photo-count > .is-active { background: white; }
  .ps-home--detail .ps-home__body { padding: 14px 16px 16px; }
  .ps-home--detail h2 { font-size: 16px; }
  .ps-home--detail .ps-home__description { margin: 8px 0 10px; min-height: 0; font-size: 13px; -webkit-line-clamp: 2; }
  .ps-selected-facts { margin: 0 0 4px; font-size: 12px; color: var(--mute); }
  .ps-home--detail .ps-home__actions { grid-template-columns: 1fr; padding-top: 12px; }
  @keyframes ps-card-arrive { from { opacity: .5; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}
.ps-search { --search-top: min(80px, 10dvh); position: fixed; inset-inline: 0; top: var(--search-top); bottom: auto; width: calc(100% - 24px); height: auto; max-width: 540px; max-height: calc(100dvh - var(--search-top) - 16px); margin: 0 auto; padding: 0; border: 1px solid #dbe8e1; border-radius: 22px; background: white; color: var(--ink); font-family: var(--serif); box-shadow: 0 16px 54px #17363c38; }
.ps-search::backdrop { background: #17363c38; }
.ps-search:not([open]) { display: none; }
.ps-search__form { display: flex; flex-direction: column; max-height: inherit; }
.ps-search__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ps-search__section-head button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #f2f7f4; color: var(--ink); cursor: pointer; }
.ps-search__section-head svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ps-search__body { min-height: 0; padding: 12px; overflow-y: auto; }
.ps-search__section { padding: 16px; margin-bottom: 12px; border: 1px solid #dbe8e1; border-radius: 16px; background: white; }
.ps-search__section:last-child { margin-bottom: 0; }
.ps-search__section h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
.ps-search__where { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 14px; border: 1px solid #a9bdb4; border-radius: 13px; }
.ps-search__where:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px #057d7b1c; }
.ps-search__where svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ps-search__where input { width: 100%; min-width: 0; height: 48px; border: 0; outline: 0; background: none; color: var(--ink); font: 16px var(--serif); }
.ps-search__who { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-search__who h3 { margin: 0 0 4px; }
.ps-search__who p { margin: 0; color: var(--mute); font-size: 12px; }
.ps-guest-stepper { display: flex; align-items: center; gap: 12px; }
.ps-guest-stepper button { width: 38px; height: 38px; border: 1px solid #c4d4cc; border-radius: 50%; color: var(--ink); background: white; font: 24px/1 var(--serif); cursor: pointer; }
.ps-guest-stepper button:disabled { opacity: .3; cursor: default; }
.ps-guest-stepper output { min-width: 22px; text-align: center; font-size: 16px; }
.ps-search__footer { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; border-top: 1px solid var(--line); background: white; }
.ps-search__footer button { min-height: 48px; font: 14px var(--serif); cursor: pointer; }
#ps-search-clear { border: 0; background: none; color: var(--ink); text-decoration: underline; }
.ps-search__submit { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 136px; padding: 0 22px; border: 0; border-radius: 13px; background: var(--coral-action); color: white; }
.ps-search__submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (prefers-reduced-motion: reduce) {
  .app-results { transition: none !important; animation: none !important; }
}

.ps-recents { max-width: 420px; }
.ps-recents h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ps-recent-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); text-align: left; font: 13px var(--serif); cursor: pointer; }
.ps-recent-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-recent-item small { flex: none; font-size: 10px; color: var(--mute); }
.ps-recents-empty { padding: 12px; font-size: 13px; color: var(--mute); }
/* Where to?, nothing typed: destinations near the guest, or, without a fix, the best-known ones. */
.ps-dest-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; margin: 0; padding: 8px; list-style: none;
                   border: 1px solid var(--line); border-radius: var(--r); background: white; box-shadow: var(--shadow-up); max-height: 320px; overflow-y: auto; }
.ps-dest-suggest[hidden] { display: none; }
.ps-dest-suggest--inline { position: static; margin: 10px 0 0; padding: 0; border: 0; box-shadow: none; max-height: none; }
.ps-dest-suggest__label { padding: 6px 10px 4px; font-size: 11px; color: var(--mute); }
.ps-dest-suggest button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; margin-top: 2px;
                          border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: 13px var(--serif); cursor: pointer; }
.ps-dest-suggest button:hover { background: var(--tint); }
.ps-dest-suggest button span { flex: none; font-size: 11px; color: var(--mute); }

/* A quiet home screen shares the same cards, typography and compact search. */
.ps-landing[hidden] { display: none; }
.app.app--home .app-floating-controls, .app.app--home .app-body > .app-results, .app.app--home .app-body > .app-map { display: none; }
.app.app--home .app-body { display: block; overflow-y: auto; background: white; }
.ps-landing { width: 100%; margin: 0; padding: 0; }
.ps-landing__hero { position: relative; overflow: hidden; padding: 16px 24px 36px; background: var(--water); }
.ps-landing__water { position: absolute; inset: 0; pointer-events: none; }
.ps-landing__water water-surface { display: block; width: 100%; height: 100%; }
.ps-landing__intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 32px; text-align: center; width: 100%; max-width: 1180px; margin: 0 auto; }
.ps-landing__copy { min-width: 0; position: relative; z-index: 1; }
.ps-landing__logo { display: block; width: 86px; height: 50px; object-fit: contain; margin: 0 auto 10px; }
.ps-landing__intro h2 { margin: 0 0 14px; font-family: var(--script); font-size: 56px; line-height: 1.1; font-weight: 400; }
.ps-landing__intro p { margin: 0 0 20px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.ps-landing__intro .ps-landing__tagline { max-width: 530px; margin: 0 auto 10px; font-size: 20px; line-height: 1.4; }
.ps-landing__search { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 420px; min-height: 48px; margin: 24px auto 0; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); box-shadow: var(--shadow); font: 14px var(--serif); cursor: pointer; }
.ps-landing__search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ps-landing__search span:last-child { padding-left: 14px; border-left: 1px solid var(--line); color: var(--mute); }
.ps-landing__art { display: block; width: 100%; height: auto; max-width: 600px; margin: 0 auto; }
.ps-landing__wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 36px; }
.ps-landing__featured { width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 24px 40px; background: white; }
.ps-landing__featured > h2 { margin: 0 0 8px; font-family: var(--script); font-size: 28px; font-weight: 400; text-align: center; }
.ps-landing__caption { margin: 0 0 22px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--mute); }
.ps-landing .ps-home__body { display: grid; grid-template-rows: 18px 22px 58px auto auto; align-content: start; }
.ps-landing .ps-home__place { white-space: nowrap; overflow: hidden; }
.ps-landing .ps-home__facts { margin: 0; min-height: 0; }
.ps-landing .ps-home__actions { margin-top: 0; }
.ps-landing__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 760px) {
  .app.app--home { height: auto; min-height: 100dvh; grid-template-rows: auto auto; }
  .app.app--home .app-body { position: static; overflow: visible; padding: 0; }
  .ps-landing__hero { padding: 14px 14px 28px; }
  .ps-landing__intro { display: block; max-width: 540px; text-align: center; }
  .ps-landing__art { width: min(320px, 100%); margin: 18px auto 0; }
  .ps-landing__logo { margin: 0 auto 10px; }
  .ps-landing__intro h2 { font-size: clamp(38px, 11vw, 46px); }
  .ps-landing__intro .ps-landing__tagline { max-width: 300px; margin: 0 auto 10px; font-size: 15px; }
  .ps-landing__intro p { font-size: 13px; }
  .ps-landing__search { margin: 24px auto 0; }
  .ps-landing__wave { height: 20px; }
  .ps-landing__featured { padding: 14px 14px 32px; }
  .ps-landing__featured > h2 { font-size: 24px; }
  .ps-landing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.ps-home--featured.ps-home--tiny .ps-made-badge { top: 8px; bottom: auto; }
.ps-home--detail .ps-made-badge { top: 10px; bottom: auto; left: auto; right: 10px; }
.ps-selected:has(.ps-made-badge) .ps-selected__toolbar { justify-content: flex-start; }
.ps-home--detail .ps-card__featured { top: auto; bottom: 10px; }

.ps-card__select-body { display: flex; flex: 1; flex-direction: column; min-width: 0; width: 100%; border: 0; padding: 0; background: white; color: inherit; font: inherit; text-align: left; text-decoration: none; }
button.ps-card__select-body { cursor: pointer; }
.ps-card .ps-claim-badge__logo { width: 20px; height: 20px; aspect-ratio: auto; }
@media (max-width: 760px) {
  .app:not(.app--cards) .leaflet-top.leaflet-left { top: 112px; }
  .app--tiny .ps-card .ps-made-badge { top: 8px; right: 8px; width: 28px; height: 28px; justify-content: center; padding: 5px; gap: 0; border-radius: 8px; }
  .app--tiny .ps-card .ps-made-badge > span { display: none; }
  .app--tiny .ps-card .ps-made-badge img { width: 16px; height: 16px; }
}

/* Avoid accidental browser smart zoom on taps while keeping page pinch zoom available. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea { touch-action: manipulation; }
.app-map.leaflet-container { touch-action: none; }
@media (max-width: 760px) { input, select, textarea { font-size: 16px; } }