/* Yonder prototype styles. Sized generously for readers 65+: 17px base, 48px controls, strong contrast. */
:root {
  --ocean-950: #102B46;
  --ocean-900: #14334E;
  --ocean-800: #193B56;
  --ocean-700: #1F4A6B;
  --ocean-600: #27597F;
  --ocean-100: #DCE8F1;
  --ocean-50: #EEF4F8;
  --gold: #FFB72E;
  --gold-soft: #FFEBC2;
  --ink: #1A2836;
  --ink-2: #44525F;
  --ink-3: #5E6C78;
  --line: #DADDDF;
  --line-soft: #EAEBE8;
  --bg: #FAF9F6;
  --panel: #F2F0EB;
  --white: #FFFFFF;
  --warn-bg: #FFF4DB;
  --warn-ink: #6F4700;
  --warn-line: #EFD48C;
  --alert-bg: #FCEBE6;
  --alert-ink: #8A2C12;
  --alert-line: #F0C2B4;
  --good-bg: #E2F3E8;
  --good-ink: #125C2B;
  --heart: #D23B36;
  --series-1: #0A8F84;
  --series-2: #D97B1E;
  --series-3: #5A62C8;
  --series-4: #C04A8C;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 43, 70, .08), 0 6px 20px rgba(16, 43, 70, .08);
  --shadow-lg: 0 10px 40px rgba(16, 43, 70, .25);
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body.modal-open { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--ocean-600); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid #1D6FD6; outline-offset: 2px; border-radius: 4px; }
.icon { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -.17em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-2); }
.small { font-size: 15px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--white); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 8px; }
.ext::after { content: " ↗"; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; border-radius: 10px; border: 1.5px solid transparent;
  font-weight: 600; text-decoration: none; background: none; text-align: center; line-height: 1.2;
}
.btn-primary { background: var(--ocean-600); color: var(--white); }
.btn-primary:hover { background: var(--ocean-700); }
.btn-outline { border-color: var(--ocean-600); color: var(--ocean-600); background: var(--white); }
.btn-outline:hover { background: var(--ocean-50); }
.btn-ghost { color: var(--ocean-600); }
.btn-ghost:hover { background: var(--ocean-50); }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: var(--ocean-600); text-decoration: underline; font-weight: 500; }

/* Header, footer */
.site-header { color: var(--white); }
/* Past the home page, the top shows the home page's photo under a much darker grey gradient, so it doesn't distract.
   It's one box around the header (and the search page's strip under it), so the photo runs behind both. */
.page-top {
  background:
    linear-gradient(90deg, rgba(18, 18, 20, .9) 0%, rgba(18, 18, 20, .8) 50%, rgba(18, 18, 20, .88) 100%),
    url("../assets/photos/hero-riomaggiore-1280.jpg") center 42% / cover no-repeat,
    #1C1C1E;
}
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 10px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--white); font-size: 24px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.logo b { color: var(--gold); font-weight: 800; }
.logo .icon { width: 28px; height: 28px; color: var(--gold); }
.header-links { display: flex; align-items: center; gap: 6px; }
.header-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--white); font-weight: 500; text-decoration: none; }
.header-links a:hover { background: rgba(255, 255, 255, .12); }
.currency-pick { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--white); font-weight: 500; cursor: pointer; }
.currency-pick:hover { background: rgba(255, 255, 255, .12); }
.currency-pick:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.currency-pick::after { content: ""; border: 5px solid transparent; border-top-color: currentColor; margin-top: 5px; }
.currency-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.saved-count { background: var(--gold); color: var(--ocean-950); font-size: 13px; font-weight: 700; border-radius: 20px; padding: 0 7px; }
.tabs-row { display: flex; gap: 6px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.tabs-row::-webkit-scrollbar { display: none; }
.tabs-row a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 30px; border: 1.5px solid transparent; color: var(--white); font-weight: 500; text-decoration: none; }
.tabs-row a:hover { background: rgba(255, 255, 255, .12); }
.tabs-row a.active { border-color: var(--white); background: rgba(255, 255, 255, .1); }
/* The footer, in the style of The Verge's (Nov 12, 2026): a near-black band, a large wordmark with round icon links,
   main links split by thin bars, the countries in a smaller row, then the fine print. */
.site-footer { --foot-bg: #131313; --foot-ink: #FFFFFF; --foot-dim: rgba(255, 255, 255, .68); --foot-line: rgba(255, 255, 255, .38);
  margin-top: 64px; background: var(--foot-bg); color: var(--foot-ink); padding: 56px 0 44px; font-size: 15.5px; }
.site-footer :focus-visible { outline-color: var(--gold); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.footer-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--foot-ink); font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; text-decoration: none; }
.footer-logo b { color: var(--gold); font-weight: 800; }
.footer-logo .icon { width: 42px; height: 42px; color: var(--gold); }
.footer-icons { display: flex; gap: 10px; }
.footer-icons a { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--gold); }
.footer-icons a:hover { background: var(--gold); color: var(--foot-bg); }
.footer-icons .icon { width: 19px; height: 19px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.footer-row a { color: var(--foot-ink); text-decoration: none; padding: 5px 0; }
.footer-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-row a:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: .95em; margin: 0 12px; background: var(--foot-line); vertical-align: -.12em; }
.footer-main a { font-size: 16.5px; font-weight: 600; }
.footer-places { margin-top: 10px; }
.footer-places a { font-size: 14.5px; color: var(--foot-dim); }
.footer-fine { margin-top: 14px; max-width: 760px; font-size: 14px; color: var(--foot-dim); line-height: 1.6; }
.footer-places + .footer-fine { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: none; }
.footer-legal { margin-top: 14px; }
.footer-legal a { font-size: 14px; color: var(--foot-ink); }
/* Search page: a wide ad and a slim line of links in place of the footer. */
.ad-footer { margin-top: 56px; padding-bottom: 8px; color: var(--ink-2); font-size: 14.5px; }
.ad-footer .ad-label { max-width: 970px; margin-left: auto; margin-right: auto; }
.ad-banner { width: 100%; max-width: 970px; min-height: 90px; margin: 0 auto; }
.ad-banner.ad-preview { height: 90px; }
@media (max-width: 720px) { .ad-banner.ad-preview { height: 100px; } }

/* Search bar */
.search-bar {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 4px; padding: 4px;
  background: var(--gold); border-radius: 12px; box-shadow: var(--shadow);
}
.sb-field { position: relative; background: var(--white); border-radius: 8px; padding: 7px 14px 7px 44px; min-height: 62px; display: flex; flex-direction: column; justify-content: center; }
.sb-field > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--ink-2); }
.sb-field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.sb-field input, .sb-field select { width: 100%; border: 0; padding: 2px 0 0; background: transparent; font-size: 17px; font-weight: 500; outline: 0; text-overflow: ellipsis; }
.sb-field:focus-within { box-shadow: inset 0 0 0 2px var(--ocean-600); }
.sb-submit { min-width: 128px; border: 0; border-radius: 8px; background: var(--ocean-600); color: var(--white); font-size: 19px; font-weight: 700; padding: 0 24px; min-height: 62px; }
.sb-submit:hover { background: var(--ocean-700); }
.suggest { position: absolute; left: -4px; right: -4px; top: calc(100% + 8px); background: var(--white); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 40; padding: 8px; max-height: 420px; overflow: auto; min-width: 320px; }
.suggest-head { font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding: 8px 10px 4px; }
.suggest button { display: flex; width: 100%; gap: 12px; align-items: center; padding: 10px; border: 0; background: none; border-radius: 8px; text-align: left; min-height: 48px; }
.suggest button:hover, .suggest button.active { background: var(--ocean-50); }
.suggest .icon { width: 20px; height: 20px; color: var(--ink-3); }
.suggest strong { display: block; font-weight: 600; line-height: 1.25; }
.suggest small { color: var(--ink-3); font-size: 14.5px; }

/* Home */
/* The home page's header sits over the photo, which a neutral grey gradient darkens behind the text. */
.home-page #site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.home-page .site-header { background: transparent; }
.hero { position: relative; color: var(--white); background: #1C1C1E; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 18, 20, .82) 0%, rgba(18, 18, 20, .5) 28%, rgba(18, 18, 20, .3) 62%, rgba(18, 18, 20, .55) 100%),
    linear-gradient(90deg, rgba(18, 18, 20, .55) 0%, rgba(18, 18, 20, 0) 72%);
}
.hero-inner { position: relative; z-index: 1; padding-top: 196px; padding-bottom: 104px; }
.hero h1 { font-size: 54px; font-weight: 800; max-width: 760px; letter-spacing: -.02em; }
.hero p { font-size: 22px; margin-top: 14px; max-width: 660px; color: #EEF3F7; }
.hero-search { position: relative; z-index: 5; margin-top: -42px; }
.hero-note { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }
.section { margin-top: 56px; }
.section-head { margin-bottom: 18px; }
.section-head h2 { font-size: 29px; }
.section-head p { color: var(--ink-2); margin-top: 5px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why { background: var(--panel); border-radius: var(--radius); padding: 20px; }
.why .icon { width: 30px; height: 30px; color: var(--ocean-600); margin-bottom: 10px; }
.why h3 { font-size: 18.5px; margin-bottom: 6px; }
.why p { color: var(--ink-2); font-size: 15.5px; }
.country-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.country-jump a { padding: 8px 14px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 500; text-decoration: none; }
.country-jump a:hover { border-color: var(--ocean-600); color: var(--ocean-600); }
.dest-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dest { position: relative; display: block; grid-column: span 2; height: 230px; border-radius: var(--radius); overflow: hidden; color: var(--white); text-decoration: none; background: var(--ocean-800); }
.dest.big { grid-column: span 3; height: 270px; }
.dest.big:only-child { grid-column: 1 / -1; }
.dest img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dest:hover img { transform: scale(1.04); }
.dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .55) 100%); }
.dest-text { position: absolute; z-index: 1; inset: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.dest-text strong { font-size: 25px; line-height: 1.15; }
.dest-text small { font-size: 15.5px; display: block; font-weight: 500; }
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.type-card { display: block; text-decoration: none; color: inherit; }
.type-card img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--radius); }
.type-card h3 { font-size: 19px; margin-top: 11px; color: var(--ocean-700); }
.type-card p { color: var(--ink-2); font-size: 15.5px; margin-top: 3px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; padding: 4px 4px 14px; margin: -4px; scroll-snap-type: x proximity; }
.rail > * { scroll-snap-align: start; }

/* Community tile (home rail, grid view, similar) */
.tile { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.tile:hover { box-shadow: var(--shadow); }
.tile-photo { position: relative; height: 186px; }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tile h3 { font-size: 18.5px; }
.tile h3 a { color: var(--ink); text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile h3 a:hover { color: var(--ocean-600); }
.tile-loc { color: var(--ink-2); font-size: 15.5px; }
.tile-price { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 17.5px; }
.tile-price small { font-weight: 500; color: var(--ink-2); font-size: 14.5px; }
.tile .badge { align-self: flex-start; }
.photo-tag { position: absolute; left: 10px; bottom: 10px; background: rgba(16, 43, 70, .82); color: var(--white); font-size: 13px; font-weight: 500; padding: 2px 8px; border-radius: 5px; pointer-events: none; }
.heart { position: absolute; right: 10px; top: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); display: grid; place-items: center; color: var(--ink-2); }
.heart .icon { width: 22px; height: 22px; }
.heart:hover { color: var(--heart); }
.heart.on { color: var(--heart); }
.heart.on .icon { fill: currentColor; }

/* Badges and chips */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; padding: 2px 9px; border-radius: 6px; line-height: 1.45; }
.badge .icon { width: 15px; height: 15px; }
.badge-open { background: var(--good-bg); color: var(--good-ink); }
.badge-unverified { background: var(--warn-bg); color: var(--warn-ink); }
.badge-future { background: var(--alert-bg); color: var(--alert-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; background: var(--ocean-50); color: var(--ocean-800); border-radius: 6px; padding: 2px 9px; font-size: 14.5px; font-weight: 500; }
.chip-plain { background: var(--panel); color: var(--ink-2); }

/* Results page */
.results-head { padding-bottom: 30px; }
.results-search { margin-top: -34px; position: relative; z-index: 5; }
/* Search results get a slimmer top than the home page: no row of care-level tabs, which the filters already cover. */
.search-page .tabs-row { display: none; }
/* On phones the search collapses to one line until it's tapped. */
.sb-summary { display: none; width: 100%; align-items: center; gap: 12px; padding: 10px 14px; min-height: 58px; background: var(--white); border: 4px solid var(--gold); border-radius: 12px; box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.sb-summary > .icon { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.sb-summary > span:not(.sb-summary-edit) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-summary strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-summary small { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-summary-edit { flex: none; font-weight: 600; color: var(--ocean-600); font-size: 15px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; font-size: 15px; color: var(--ink-3); }
.crumbs a { color: var(--ocean-600); }
.results-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
.map-tile { position: relative; height: 140px; border-radius: var(--radius); overflow: hidden; background: var(--ocean-100); border: 1px solid var(--line); margin-bottom: 14px; }
/* A drawing rather than a real map, because every real Google map is billed as it loads. */
.map-tile #mini-map { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 24% 66%, var(--ocean-600) 0 4px, transparent 5px), radial-gradient(circle at 44% 28%, var(--ocean-600) 0 4px, transparent 5px), radial-gradient(circle at 80% 72%, var(--ocean-600) 0 4px, transparent 5px), linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(135deg, #E3EBF1, #D3E1EC); }
.map-tile #mini-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-tile .btn { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; box-shadow: var(--shadow); }
.filters { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.filters-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.filters-title h2 { font-size: 18.5px; }
.filter-group { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
/* Budget slider: a Monthly / Upfront switch, a chart of where prices fall, and two handles on one track. */
.budget-kind { display: inline-flex; border: 1.5px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--white); margin: 2px 0 12px; }
.budget-kind button { border: 0; background: none; min-height: 38px; padding: 5px 13px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.budget-kind button[aria-pressed="true"] { background: var(--ocean-100); color: var(--ocean-800); font-weight: 600; }
.budget-label { font-weight: 600; margin-bottom: 10px; }
.budget-hist { display: flex; align-items: flex-end; gap: 2px; height: 44px; padding: 0 11px; }
.budget-hist span { flex: 1; background: var(--line); border-radius: 2px 2px 0 0; }
.budget-hist span.in { background: var(--ocean-600); }
.range { position: relative; height: 30px; }
.range-track { position: absolute; left: 11px; right: 11px; top: 13px; height: 4px; border-radius: 2px; background: var(--line); }
.range-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--ocean-600); }
.range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range input[type="range"]::-webkit-slider-runnable-track { height: 30px; background: none; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--ocean-600); background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: pointer; }
.range input[type="range"]::-moz-range-track { background: none; }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ocean-600); background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: pointer; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--gold); outline-offset: 1px; }
.budget-ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h3 { font-size: 16.5px; margin-bottom: 8px; }
.filter-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 3px 0; cursor: pointer; line-height: 1.3; }
.filter-opt input { width: 21px; height: 21px; flex: none; accent-color: var(--ocean-600); margin: 0; }
.filter-opt span:first-of-type { flex: 1; }
.filter-opt .count { color: var(--ink-3); font-size: 14.5px; }
.filter-opt.disabled { color: var(--ink-3); }
.results-top { margin-bottom: 10px; }
.results-top h1 { font-size: 26px; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.results-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sort-select { min-height: 46px; border: 1.5px solid var(--line); border-radius: 24px; background: var(--white); padding: 6px 14px; font-weight: 500; max-width: 270px; }
.view-toggle { display: inline-flex; border: 1.5px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--white); }
.view-toggle button { border: 0; background: none; min-height: 43px; padding: 6px 15px; font-weight: 500; }
.view-toggle button[aria-pressed="true"] { background: var(--ocean-100); color: var(--ocean-800); font-weight: 600; }
.filter-toggle { display: none; }
.sort-wrap { display: contents; }
.sort-label, .quick-chips { display: none; }
.active-filters { display: flex; flex: 1 1 220px; flex-wrap: wrap; gap: 7px; min-width: 0; }
.active-filters:empty { display: none; }
.active-filters button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ocean-600); color: var(--ocean-700); background: var(--ocean-50); border-radius: 20px; padding: 5px 12px; font-size: 15px; font-weight: 500; min-height: 36px; }
.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 11px 14px; font-size: 15.5px; background: var(--ocean-50); color: var(--ink); border: 1px solid var(--ocean-100); margin-bottom: 12px; }
.notice > .icon { margin-top: 3px; color: var(--ocean-600); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.notice-warn > .icon { color: var(--warn-ink); }
.notice-alert { background: var(--alert-bg); border-color: var(--alert-line); color: var(--alert-ink); }
.notice-alert > .icon { color: var(--alert-ink); }
.card-list { display: grid; gap: 14px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.pager-nums { display: flex; align-items: center; gap: 4px; }
.pager button { min-width: 44px; min-height: 44px; border: 1.5px solid transparent; border-radius: 22px; background: none; font-weight: 600; color: var(--ocean-600); padding: 6px 12px; }
.pager button:hover:not(:disabled) { background: var(--ocean-50); }
.pager button.on { border-color: var(--ocean-600); background: var(--ocean-50); color: var(--ocean-800); }
.pager button:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
.pager-step { display: inline-flex; align-items: center; gap: 6px; }
.pager-step .icon { width: 18px; height: 18px; }
.pager-gap { color: var(--ink-3); padding: 0 2px; }
.pager-where { display: none; font-weight: 600; color: var(--ink-2); }
.pager-count { text-align: center; color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.card { display: grid; grid-template-columns: 270px minmax(0, 1fr) 220px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.card:hover { box-shadow: var(--shadow); }
.card-photo { position: relative; min-height: 230px; }
.card-photo a { display: block; height: 100%; }
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 15px 18px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.card-body h2 { font-size: 21px; }
.card-body h2 a { color: var(--ocean-600); text-decoration: none; }
.card-body h2 a:hover { text-decoration: underline; }
.card-loc { font-size: 15.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; }
.card-focus { font-weight: 600; font-size: 15.5px; }
.card-line { font-size: 15.5px; color: var(--ink-2); }
.card-line .icon { color: var(--ink-3); margin-right: 3px; }
.card-side { padding: 15px 18px 15px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; text-align: right; }
.g-score { display: flex; align-items: center; gap: 4px; line-height: 1; }
.g-score strong { font-weight: 800; }
.g-star { color: var(--gold); }
.g-score small { color: var(--ink-2); }
.card-score { justify-content: flex-end; min-height: 28px; font-size: 24px; }
.card-score small { font-size: 16px; margin-left: 2px; }
.tile-score { min-height: 22px; margin-top: 4px; font-size: 18px; }
.tile-score small { font-size: 14px; margin-left: 2px; }
.price-main { font-size: 20px; font-weight: 700; line-height: 1.2; }
.price-suffix { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.price-main .price-suffix { display: block; }
.summary-price .price-suffix { display: inline; }
.price-original { font-size: 14.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); line-height: 1.3; margin-top: 3px; }
.price-original:empty { display: none; }
.price-ask { font-size: 18.5px; }
.grid-view { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty h2 { font-size: 23px; margin-bottom: 8px; }
.empty .btn { margin-top: 16px; }

/* Map overlay */
.overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.overlay-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.overlay-bar h2 { font-size: 20px; }
.map-overlay-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 360px minmax(0, 1fr); }
/* The map view keeps the filters beside the list and the map, like Booking.com. */
.map-filters { overflow: auto; padding: 12px; border-right: 1px solid var(--line); }
@media (max-width: 1100px) {
  .map-overlay-body { grid-template-columns: 340px minmax(0, 1fr); }
  .map-filters { display: none; }
}
.map-list { overflow: auto; padding: 12px; display: grid; gap: 10px; align-content: start; grid-auto-rows: max-content; border-right: 1px solid var(--line); }
.map-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 11px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); text-align: left; padding: 0; text-decoration: none; color: inherit; }
.map-row:hover, .map-row.hl { border-color: var(--ocean-600); box-shadow: 0 0 0 1px var(--ocean-600); }
.map-row img { width: 96px; height: 100%; min-height: 96px; object-fit: cover; }
.map-row div { padding: 8px 10px 8px 0; min-width: 0; }
.map-row strong { display: block; line-height: 1.25; font-size: 16px; }
.map-row small { color: var(--ink-2); font-size: 14px; display: block; }
#full-map { min-height: 0; background: var(--ocean-100); }
.pin { background: var(--ocean-800); color: var(--white); font-weight: 700; font-size: 13.5px; border-radius: 16px; padding: 3px 10px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); border: 2px solid var(--white); display: inline-block; transform: translate(-50%, -50%); font-family: Figtree, sans-serif; line-height: 1.3; }
.pin.hl, .pin:hover { background: var(--gold); color: var(--ocean-950); }
.pin-cluster { background: var(--ocean-600); }
.leaflet-div-icon-clear { background: none; border: 0; width: 0 !important; height: 0 !important; }
.map-note { position: absolute; z-index: 500; left: 10px; bottom: 26px; background: rgba(255, 255, 255, .95); border-radius: 8px; padding: 5px 10px; font-size: 14px; color: var(--ink-2); max-width: 280px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.leaflet-popup-content { font-family: Figtree, sans-serif; font-size: 15px; margin: 0; width: 240px !important; }
.leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 10px; }
.popup img { width: 100%; height: 120px; object-fit: cover; }
.popup div { padding: 9px 12px 11px; }
.popup a { font-weight: 700; font-size: 16px; }

/* Community page */
.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 0; }
.detail-actions { display: flex; gap: 4px; }
.detail-actions .btn, .back-link { min-height: 44px; padding: 8px 12px; font-weight: 500; }
.detail-actions .btn.on .icon { color: var(--heart); fill: var(--heart); }
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 215px 215px; gap: 8px; border-radius: 14px; overflow: hidden; position: relative; }
.mosaic button { position: relative; border: 0; padding: 0; background: var(--line-soft); overflow: hidden; display: block; min-width: 0; }
.mosaic button:first-child { grid-row: 1 / span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mosaic button:hover img { transform: scale(1.03); }
.mosaic.few { grid-template-columns: 2fr 1fr; }
.mosaic .see-all, .gplace-photos .see-all { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: var(--white); border: 1.5px solid var(--ink); border-radius: 8px; padding: 8px 14px; font-weight: 600; min-height: 44px; display: inline-flex; gap: 8px; align-items: center; overflow: visible; }
.mosaic .see-all:hover, .gplace-photos .see-all:hover { background: var(--panel); }
.gplace-photos .see-all { top: 10px; right: 10px; bottom: auto; padding: 6px 12px; min-height: 40px; font-size: 15px; }
.street-view-btn { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 6px 12px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 8px; font-weight: 600; font-size: 15px; }
.street-view-btn:hover { background: var(--panel); }
.photo-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); font-size: 15.5px; }
.photo-notice a { color: var(--warn-ink); font-weight: 700; white-space: nowrap; }
.detail-tabs { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); margin-top: 14px; }
.detail-tabs .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.detail-tabs .wrap::-webkit-scrollbar { display: none; }
.detail-tabs a { flex: none; padding: 13px 14px; min-height: 48px; color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
.detail-tabs a:hover { color: var(--ocean-600); }
.detail-tabs a.active { border-color: var(--ocean-600); color: var(--ocean-700); font-weight: 600; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; margin-top: 22px; align-items: start; }
.summary { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.summary-price { font-size: 37px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.summary-price .price-suffix { font-size: 18px; letter-spacing: 0; }
.summary-price.ask { font-size: 31px; }
.detail-title { padding: 0 0 16px; }
.detail-title h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.detail-addr { color: var(--ink-2); margin-top: 6px; font-size: 17px; }
.summary-stats { display: flex; gap: 22px; }
.stat strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.stat span { color: var(--ink-2); font-size: 15px; }
.price-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; background: var(--ocean-50); border-radius: 8px; padding: 8px 14px; margin-top: 12px; font-size: 15.5px; }
.price-chip a { font-weight: 600; }
.detail-section { padding: 30px 0; border-top: 1px solid var(--line-soft); scroll-margin-top: 58px; }
.detail-section:first-of-type { border-top: 0; }
.detail-section > h2 { font-size: 25px; margin-bottom: 14px; }
.detail-section > h2 + .muted { margin-top: -8px; margin-bottom: 14px; }
.fact-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.fact-tile { background: var(--panel); border-radius: 10px; padding: 12px 14px; display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.fact-tile .icon { width: 24px; height: 24px; color: var(--ocean-600); margin-top: 1px; }
.fact-tile small { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.fact-tile strong { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.about-text { margin-top: 12px; max-width: 70ch; }
.unit-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.unit-table th { text-align: left; font-size: 14.5px; color: var(--ink-2); font-weight: 600; padding: 8px 12px; border-bottom: 2px solid var(--line); }
.unit-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.unit-table td:first-child { font-weight: 600; }
.fact-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.fact-group h3 { font-size: 18px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.fact-group h3 .icon { color: var(--ocean-600); width: 22px; height: 22px; }
.fact-list li { display: flex; gap: 8px; padding: 4px 0; font-size: 16px; line-height: 1.4; }
.fact-list .icon { margin-top: 3px; color: var(--ocean-600); }
.fact-list li.caution { color: var(--warn-ink); }
.fact-list li.caution .icon { color: var(--warn-ink); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; background: var(--panel); border-radius: var(--radius); padding: 22px; }
.calc-field { margin-bottom: 16px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field > label, .calc-label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 16px; }
.calc-field select { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); padding: 6px 10px; }
.calc-field > label.calc-check { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; cursor: pointer; }
.calc-check input { width: 21px; height: 21px; accent-color: var(--ocean-600); margin: 0; }
.calc-check span:last-child { margin-left: auto; font-weight: 500; color: var(--ink-2); font-size: 15px; }
.calc-range { display: block; width: 100%; margin-top: 6px; accent-color: var(--ocean-600); height: 28px; }
.calc-note { font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }
.calc-total small { display: block; color: var(--ink-2); font-size: 15px; }
.calc-total strong { display: block; font-size: 33px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.stack { display: flex; gap: 2px; height: 16px; margin: 14px 0; position: relative; }
.stack span { display: block; min-width: 4px; }
.stack span:first-child { border-radius: 4px 0 0 4px; }
.stack span:last-child { border-radius: 0 4px 4px 0; }
.stack span:only-child { border-radius: 4px; }
.stack-tip { position: fixed; z-index: 90; background: var(--ink); color: var(--white); padding: 5px 10px; border-radius: 6px; font-size: 14.5px; pointer-events: none; white-space: nowrap; }
.calc-legend li { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 15.5px; border-bottom: 1px solid var(--line-soft); }
.calc-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.calc-legend span { flex: 1; }
.calc-legend b { font-weight: 600; }
.area-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.area-photos button { border: 0; padding: 0; background: none; position: relative; border-radius: 8px; overflow: hidden; height: 130px; }
.area-photos img { width: 100%; height: 100%; object-fit: cover; }
.area-map { position: relative; height: 320px; border-radius: var(--radius); overflow: hidden; background: var(--ocean-100); border: 1px solid var(--line); }
#area-map { position: absolute; inset: 0; z-index: 0; }
.confirm-list li { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.confirm-list .icon { color: var(--warn-ink); margin-top: 4px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; }
.checks li { display: flex; gap: 8px; padding: 4px 0; font-size: 15.5px; align-items: center; }
.checks .yes { color: var(--good-ink); }
.checks .no { color: var(--ink-3); }
.source-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 15.5px; }
.area-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Photos, score and reviews, drawn from Google's data. The side column takes its height from the photos. */
.gplace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
.gplace-photos { position: relative; aspect-ratio: 770 / 487; border-radius: 14px; overflow: hidden; background: var(--line-soft); }
.gplace-photos .no-photos { height: 100%; border-radius: 0; }
.gplace-grid { display: grid; height: 100%; gap: 6px; grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gplace-grid.n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.gplace-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.gplace-photo { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; }
.gplace-grid.n3 .gplace-photo:first-child { grid-row: 1 / span 2; }
.gplace-photo button { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.gplace-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gplace-photo button:hover img { transform: scale(1.03); }
.lb-avatar { display: inline-block; width: 26px; height: 26px; margin: 0 5px 0 3px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.gplace-side { position: relative; min-width: 0; }
.gplace-side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.gplace-score { flex: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding-bottom: 10px; font-size: 32px; line-height: 1; }
.gplace-score strong { font-weight: 800; }
.gplace-star { color: var(--gold); }
.gplace-count { font-size: 24px; font-weight: 700; color: var(--ocean-600); text-decoration: none; }
a.gplace-count:hover { text-decoration: underline; }
.gplace-unrated { font-size: 17px; color: var(--ink-2); }
.gplace-reviews { flex: 1; min-height: 0; overflow-y: auto; padding-right: 12px; }
.greview { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.greview:first-child { padding-top: 0; border-top: 0; }
.greview-head { display: flex; align-items: center; gap: 10px; }
.greview-avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ocean-100); color: var(--ocean-600); font-weight: 700; }
.greview-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.greview-name { font-weight: 600; line-height: 1.25; }
.greview-name a { color: var(--ink); text-decoration: none; }
.greview-when { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.greview-when a { color: inherit; text-decoration: none; }
.greview-name a:hover, .greview-when a:hover { text-decoration: underline; }
.greview-stars { margin-top: 7px; color: var(--gold); font-size: 16px; line-height: 1; letter-spacing: 1px; }
.greview-stars span { color: var(--line); }
.greview-text { margin-top: 6px; font-size: 15.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.greview-translated { margin-top: 5px; font-size: 14px; color: var(--ink-2); }
.greview-more { padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 15.5px; }
/* Google's rules for its text credit: 12-16px, normal weight, this gray, and never translated. */
.gplace-credit { flex: none; padding-top: 6px; text-align: right; font-size: 12px; font-weight: 400; color: #5E5E5E; }
.gplace-credit a { color: inherit; }
.area-map-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; margin-top: 8px; }
.area-map-foot .ext { font-weight: 600; white-space: nowrap; }
.google-notice { background: var(--ocean-50); border-color: var(--line); color: var(--ink); }
/* While a Google photo loads, the sample underneath stays hidden. It shows if Google can't load. */
.g-wait { background: var(--line-soft); }
.g-wait > img, .g-wait > a > img, .g-wait > .photo-tag { visibility: hidden; }
.google-failed .g-wait > img, .google-failed .g-wait > a > img, .google-failed .g-wait > .photo-tag { visibility: visible; }
/* One credit per block of Google content. Google's rules for its text credit: 12-16px, normal weight, this gray, never translated. */
[data-google-credit] { display: none; font-size: 12.5px; font-weight: 400; color: #5E5E5E; }
.google-shown [data-google-credit]:not([hidden]) { display: block; }
.google-failed [data-google-credit] { display: none !important; }
.google-credit-bar { position: sticky; top: 0; z-index: 5; padding: 3px 0; margin-bottom: 4px; text-align: right; background: var(--bg); }
.google-credit-float { position: fixed; right: 10px; bottom: 10px; z-index: 40; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.google-credit-rail { margin-top: 6px; text-align: right; }
.map-list-credit { text-align: right; }
.gm-style-iw .popup { width: 240px; font-family: Figtree, sans-serif; font-size: 15px; }
.detail-group { margin-top: 20px; }
.detail-group h3 { font-size: 19px; margin-bottom: 4px; }
.detail-group dl { margin: 0; }
.detail-group dl > div { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 2px 16px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.detail-group dt { color: var(--ink-2); font-weight: 600; }
.detail-group dd { margin: 0; }
.no-photo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; background: var(--line-soft); color: var(--ink-2); font-size: 15.5px; font-weight: 600; text-align: center; }
.no-photo .icon { width: 28px; height: 28px; }
.map-row .no-photo { position: static; min-height: 96px; font-size: 14px; }
.popup .no-photo { position: static; height: 120px; }
.no-photos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px; padding: 24px; border-radius: 14px; background: var(--line-soft); color: var(--ink-2); text-align: center; }
.no-photos .icon { width: 32px; height: 32px; }
.no-photos strong { color: var(--ink); font-size: 19px; }
.contact-rail { position: sticky; top: 66px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); background: var(--white); }
.contact-rail h2 { font-size: 19px; margin-bottom: 12px; }
.contact-rail .btn + .btn { margin-top: 8px; }
/* Main layout: the contact box and the ad space under it move together, as the box alone used to. The box has a bold
   blue border so it stands out (the user's choice on Nov 10, 2026). */
.side-stack { position: sticky; top: 66px; }
.side-stack.stack-static { position: static; }
.side-stack .contact-rail { position: static; border: 2px solid var(--ocean-600); }
/* The page shows the ad space only once it has picked a size that fits (js/community.js). */
.ad-slot { display: none; width: 300px; max-width: 100%; margin: 28px auto 0; }
.ad-slot[data-size] { display: block; }
.ad-label { margin-bottom: 6px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.ad-box { width: 300px; }
/* The in-page ad, where the side ad isn't shown. Wide gaps keep it clear of the tiles above and the map below. */
.ad-inline { display: none; width: 300px; max-width: 100%; margin: 44px auto; }
.ad-inline.ad-on { display: block; }
.ad-tall { height: 600px; }
.ad-short { height: 250px; }
.ad-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--line-soft); color: var(--ink-3); font-size: 15px; text-align: center; }
.contact-lines { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 15.5px; }
.contact-lines li { display: flex; gap: 9px; padding: 5px 0; align-items: flex-start; overflow-wrap: anywhere; }
.contact-lines .icon { color: var(--ink-3); margin-top: 4px; }
.contact-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--white); border-top: 1px solid var(--line); padding: 10px 16px; gap: 10px; box-shadow: 0 -4px 14px rgba(0, 0, 0, .1); }
.contact-bar .btn { flex: 1; }

/* Community page layout (made the main one on Nov 9, 2026; the archived layout shows with ?layout=classic) */
.layout-switch { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2); }
.layout-switch span { margin-right: 4px; font-weight: 500; }
.layout-switch button { min-height: 34px; padding: 4px 12px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-weight: 600; }
.layout-switch button[aria-pressed="true"] { background: var(--ocean-600); color: var(--white); }
.layout-back { min-height: 34px; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--ocean-600); color: var(--white); font-weight: 600; text-decoration: none; }
.ck-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ck-group { min-width: 0; padding: 14px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.ck-group h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 18px; }
.ck-group h3 .icon { width: 22px; height: 22px; color: var(--ocean-600); }
/* Status marks: a tick for offered, "!" for with conditions, a cross for not offered and "?" for not mentioned. */
.glyph { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.glyph svg { width: 13px; height: 13px; }
.g-yes { background: var(--good-ink); color: var(--white); }
.g-some { background: var(--warn-ink); color: var(--white); }
.g-no { background: var(--alert-ink); color: var(--white); }
.g-ask { background: var(--white); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px #BFC5CA; }
.g-ask svg { width: 15px; height: 15px; }
/* The four care levels under the price. */
.level-block { margin-top: 22px; scroll-margin-top: 70px; }
.level-head { margin-bottom: 10px; font-size: 18px; }
.level-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.level-tile { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 10px 14px 10px 12px; border-radius: 10px; background: var(--panel); color: var(--ink-2); font-size: 16px; font-weight: 500; line-height: 1.3; }
.level-tile.st-yes { background: var(--good-ink); color: var(--white); font-weight: 600; }
.level-tile.st-yes .glyph { background: var(--white); color: var(--good-ink); }
.level-tile.st-some { background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
.level-tile.st-no { background: var(--alert-bg); color: var(--alert-ink); font-weight: 600; }
.level-name { min-width: 0; }
.level-name small { display: block; font-size: 13.5px; font-weight: 500; }
/* Tile groups in Homes and Care & daily life. Each tile opens a card with the research behind it. */
.ftile-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--panel); font-size: 14.5px; color: var(--ink-2); }
.ftile-key > span { display: inline-flex; align-items: center; gap: 7px; }
.ftile-key .glyph { width: 21px; height: 21px; }
.ftile-key .glyph svg { width: 11px; height: 11px; }
.ftile-groups { display: grid; gap: 12px; }
.ftile-group { min-width: 0; padding: 4px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); scroll-margin-top: 70px; }
.ftile-group h3 { display: flex; align-items: center; gap: 10px; min-height: 50px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); font-size: 18px; }
.ftile-group-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ocean-50); color: var(--ocean-600); }
.ftile-group-ico .icon { width: 18px; height: 18px; }
.ftile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ftile { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 10px 10px 10px 12px; border: 0; border-radius: 10px; background: var(--panel); color: var(--ink-2); font: inherit; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; }
.ftile[hidden] { display: none; }
.ftile:hover { background: #E8E5DE; }
.ftile.st-yes { background: var(--good-bg); color: var(--good-ink); font-weight: 600; }
.ftile.st-yes:hover { background: #D2EBDB; }
.ftile.st-some { background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
.ftile.st-some:hover { background: #FBE9C2; }
.ftile.st-no { background: var(--alert-bg); color: var(--alert-ink); font-weight: 600; }
.ftile.st-no:hover { background: #F8DDD4; }
.ftile-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ftile-chev { flex: none; width: 14px; height: 14px; color: var(--ink-3); opacity: .7; transition: transform .15s ease; }
.ftile:hover .ftile-chev { transform: translateX(2px); }
.ftile-more { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 8px auto 0; padding: 6px 16px; border: 0; border-radius: 8px; background: none; color: var(--ocean-600); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.ftile-more:hover { background: var(--ocean-50); }
.ftile-more-chev { width: 16px; height: 16px; transition: transform .2s ease; }
.ftile-more[aria-expanded="true"] .ftile-more-chev { transform: rotate(180deg); }
.ftile-dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); }
.ftile-dialog::backdrop { background: rgba(16, 43, 70, .45); }
.ftile-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 20px 22px; }
.ftile-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ftile-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px; border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.ftile-pill .glyph { width: 22px; height: 22px; }
.ftile-pill.st-yes { background: var(--good-bg); color: var(--good-ink); }
.ftile-pill.st-some { background: var(--warn-bg); color: var(--warn-ink); }
.ftile-pill.st-no { background: var(--alert-bg); color: var(--alert-ink); }
.ftile-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; }
.ftile-close:hover { background: #E8E5DE; }
.ftile-card h3 { padding-right: 8px; font-size: 22px; line-height: 1.25; }
.ftile-card-text { padding-right: 8px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
/* Opened, who can live here and the operator, under the Overview description. */
.about-facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 14px; }
.about-facts dt { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.about-facts dd { margin: 0; overflow-wrap: anywhere; }
.cost-panels { margin-top: 20px; }
.cost-rows > div { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.cost-rows > div:first-child { border-top: 0; }
.cost-rows dt { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.cost-rows dd { margin: 0; overflow-wrap: anywhere; }
.cost-rows.plain { max-width: 70ch; }
.ask-val { color: var(--ink-3); font-weight: 500; }
/* Two rows that share text baselines: the name with the score, the address with the review count. */
.draft-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; }
.draft-title h1 { grid-column: 1; grid-row: 1; }
.draft-title .detail-addr { grid-column: 1; grid-row: 2; }
.draft-score { display: contents; }
/* Larger than the name, with the tops of the digits level with the tops of the name's letters. The negative
   bottom margin keeps the address line where it would be with no score. Measured for the 40px / 48px name. */
.draft-title .draft-score-num { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; display: inline-flex; align-items: baseline; gap: 6px; margin: 3px 0 -9px; font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.draft-title .draft-score-count, .draft-title .gplace-unrated { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 6px; font-size: 17px; white-space: nowrap; }
.draft-score-num strong, .draft-band-score strong { font-weight: 800; }
.draft-score-count { font-weight: 600; color: var(--ocean-600); text-decoration: underline; }
a.draft-score-count:hover { color: var(--ocean-700); }
.draft-band-score .draft-score-count { margin-left: 4px; font-size: 16px; }
.draft-title .detail-addr a { color: inherit; }
.draft-title .detail-addr a:hover { color: var(--ocean-600); }
/* The tops of the price and the home sizes line up with the top of the contact box beside them. */
.draft-overview { padding-top: 0; }
.draft-overview .summary { margin-top: -4px; }
.draft-overview .summary-stats { padding-top: 1.5px; }
.price-caveat { margin-top: 6px; max-width: 62ch; font-size: 15px; color: var(--ink-2); }
/* What a one-time price buys, such as "You don't own the home", under the published price. */
.price-terms { font-style: italic; }
.area-address { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 12px; }
.area-address .icon { margin-top: 4px; color: var(--ocean-600); }
.draft-photos { aspect-ratio: 12 / 5; }
.gplace-grid.n4, .gplace-grid.n5 { grid-template-columns: 2fr 1fr 1fr; }
.gplace-grid.n4 .gplace-photo:first-child, .gplace-grid.n5 .gplace-photo:first-child { grid-row: 1 / span 2; }
.gplace-grid.n4 .gplace-photo:last-child { grid-column: 2 / span 2; }
.draft-hero .gplace-credit { padding-top: 4px; }
.draft-reviews { scroll-margin-top: 70px; }
.draft-reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; }
.draft-reviews-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.draft-reviews-title h2 { font-size: 29px; }
.draft-band-score { display: inline-flex; align-items: baseline; gap: 6px; font-size: 24px; line-height: 1; }
.draft-band-score .draft-score-count { color: var(--ink-2); text-decoration: none; }
.draft-reviews-head .gplace-credit { padding-top: 0; }
.draft-reviews > .muted { margin-top: 5px; }
.draft-review-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.draft-review-cards .greview, .draft-review-cards .greview:first-child { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
/* Google sends at most 5 reviews, so the link to the rest is the sixth card and fills the grid. */
.draft-review-cards .greview-more { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 16px 18px; border: 1.5px dashed var(--line); border-top: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--ocean-50); text-align: center; font-weight: 600; }
.collage-wrap { max-width: 1100px; margin: 0 auto; }
.collage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; font-size: 15px; color: var(--ink-2); }
.collage-head .gplace-credit { padding-top: 0; }
.collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cl { min-width: 0; margin: 0; overflow: hidden; border-radius: 10px; background: var(--line-soft); }
.cl button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cl img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cl button:hover img { transform: scale(1.02); }
.cl button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.cl-1 { grid-column: span 6; height: 520px; }
.cl-2 { grid-column: span 3; height: 360px; }
.cl-3 { grid-column: span 2; height: 250px; }
.cl-current { animation: cl-flash 2s ease-out; }
@keyframes cl-flash { from { box-shadow: 0 0 0 4px var(--gold); } to { box-shadow: 0 0 0 4px transparent; } }
.greview-text.clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.greview-expand { margin-top: 4px; font-size: 14.5px; }
.fact-tile .ask-val { font-weight: 500; }

/* Dialogs and photo viewer */
.modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(16, 43, 70, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--white); border-radius: 14px; width: 100%; max-width: 500px; max-height: 92vh; overflow: auto; padding: 22px; position: relative; }
.modal h2 { font-size: 23px; padding-right: 40px; }
.modal-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
.form-field { margin-top: 13px; }
.form-field label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 4px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--white); }
.viewer { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; }
.viewer-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); flex: none; }
.viewer-tabs button { flex: none; min-height: 42px; border: 1.5px solid var(--line); background: var(--white); border-radius: 22px; padding: 5px 14px; font-weight: 500; }
.viewer-tabs button[aria-pressed="true"] { background: var(--ocean-800); border-color: var(--ocean-800); color: var(--white); }
.viewer-body { flex: 1; overflow: auto; padding: 16px 18px 40px; }
.viewer-note { max-width: 1100px; margin: 0 auto 14px; }
.viewer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.viewer-grid figure { margin: 0; }
.viewer-grid button { display: block; width: 100%; border: 0; padding: 0; background: none; position: relative; border-radius: 10px; overflow: hidden; height: 220px; }
.viewer-grid img { width: 100%; height: 100%; object-fit: cover; }
.viewer-grid figcaption { font-size: 15px; color: var(--ink-2); padding: 5px 2px; }
.street-view[hidden] { display: none; }
.sv-pano { flex: 1; position: relative; background: var(--line-soft); }
.sv-status { position: absolute; inset: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; padding: 20px; margin: 0; text-align: center; color: var(--ink-2); }
.lightbox { position: fixed; inset: 0; z-index: 85; background: #0C1A2B; color: var(--white); display: flex; flex-direction: column; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 12px; flex: none; }
.lb-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 70px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-caption { flex: none; padding: 12px 18px 16px; text-align: center; font-size: 15.5px; line-height: 1.4; }
.lb-caption strong { color: var(--gold); font-weight: 600; }
.lb-caption a { color: #BFD9EE; }
.lb-close { background: rgba(255, 255, 255, .92); }

/* About page */
.prose { max-width: 760px; }
.prose h1 { font-size: 38px; margin: 34px 0 12px; }
.prose h2 { font-size: 25px; margin: 34px 0 10px; }
.prose p { margin-bottom: 12px; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.prose li { margin-bottom: 7px; }
.credits-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 10px; }
.credits-table th { text-align: left; padding: 7px 10px; border-bottom: 2px solid var(--line); font-size: 14.5px; }
.credits-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.credits-table img { width: 74px; height: 50px; object-fit: cover; border-radius: 5px; }

@media (max-width: 1080px) {
  .card { grid-template-columns: 220px minmax(0, 1fr); }
  .card-side { grid-column: 2; padding: 0 18px 15px; text-align: left; flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .card-score { justify-content: flex-start; }
  .card-photo { grid-row: 1 / span 2; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .gplace { grid-template-columns: minmax(0, 1fr) 300px; }
  .calc { grid-template-columns: 1fr; }
  .fact-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .gplace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gplace-photos { aspect-ratio: 3 / 2; }
  .gplace-side-inner { position: static; }
  .gplace-reviews { max-height: 480px; }
  .search-bar { grid-template-columns: 1fr 1fr; }
  .sb-where, .sb-submit { grid-column: 1 / -1; }
  .why-grid, .type-grid { grid-template-columns: repeat(2, 1fr); }
  .results-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-toggle { display: inline-flex; }
  .sidebar { display: none; }
  .sidebar.open { display: block; position: fixed; inset: 0; z-index: 65; background: var(--bg); overflow: auto; padding: 14px 16px 90px; }
  .sidebar-close { display: flex !important; }
  .sidebar .map-tile { display: none; }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-rail { display: none; }
  .contact-bar { display: flex; }
  body.has-contact-bar { padding-bottom: 72px; }
  /* The dark footer runs down behind the contact bar, so no light strip shows under it. */
  .has-contact-bar .site-footer { margin-bottom: -72px; padding-bottom: calc(44px + 72px); }
  .has-contact-bar .layout-switch { bottom: 82px; }
  .map-overlay-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .map-list { display: none; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .hero-inner { padding-top: 164px; padding-bottom: 84px; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 19px; }
  .section-head h2 { font-size: 25px; }
  .header-links .hide-sm { display: none; }
  /* On phones the header keeps the heart and count, so it fits beside the logo. */
  .saved-label { display: none; }
  .header-links a, .currency-pick { padding: 8px 9px; }
  .search-bar { grid-template-columns: minmax(0, 1fr); }
  .sb-summary { display: flex; }
  /* On phones the page links shrink to Previous, "Page 2 of 5" and Next, on one row. */
  .pager { flex-wrap: nowrap; justify-content: space-between; }
  .pager-nums { display: none; }
  .pager-where { display: inline; }
  /* The top of search results on phones, modelled on Booking.com's: Sort, Filter and Map in one row, then quick chips.
     The cards keep their own phone layout. */
  .search-page .crumbs { display: none; }
  .search-page #main { display: flex; flex-direction: column; }
  .search-page .results-bar { order: -2; margin: 14px -16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
  .search-page .active-filters, .search-page .view-toggle { display: none; }
  .search-page .results-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; margin: 0; }
  .search-page .sort-wrap { display: flex; position: relative; order: 1; }
  .search-page #filter-toggle { order: 2; }
  .search-page #map-toggle { order: 3; }
  .search-page .sort-wrap, .search-page .results-tools > .filter-toggle { justify-content: center; align-items: center; gap: 8px; min-height: 54px; border: 0; border-radius: 0; background: none; color: var(--ocean-600); font-size: 17px; font-weight: 600; padding: 0 6px; }
  .search-page .sort-label { display: inline-flex; align-items: center; gap: 8px; }
  .search-page .sort-wrap .sort-select { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; opacity: 0; cursor: pointer; }
  .search-page .sort-wrap:focus-within { outline: 2px solid var(--ocean-600); outline-offset: -4px; }
  .search-page .quick-chips { order: -1; display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); scrollbar-width: none; }
  .search-page .quick-chips::-webkit-scrollbar { display: none; }
  .search-page .quick-chips:empty { display: none; }
  .search-page .quick-chips button { flex: none; min-height: 42px; padding: 7px 15px; border: 1.5px solid var(--line); border-radius: 22px; background: var(--white); font-size: 15.5px; font-weight: 500; color: var(--ink); }
  .search-page .quick-chips button.on { border-color: var(--ocean-600); background: var(--ocean-50); color: var(--ocean-700); }
  .search-page .results-top { margin: 14px 0 8px; }
  .search-page .results-top h1 { font-size: 17px; font-weight: 600; color: var(--ink-2); }
  .results-search:not(.expanded) #search-mount { display: none; }
  .results-search.expanded #search-mount { margin-top: 10px; }
  .suggest { min-width: 0; }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dest, .dest.big { grid-column: span 1; height: 195px; }
  .dest.big:only-child { grid-column: 1 / -1; }
  .detail-group dl > div { grid-template-columns: minmax(0, 1fr); }
  .dest-text strong { font-size: 21px; }
  .type-card img { height: 120px; }
  .card { grid-template-columns: minmax(0, 1fr); }
  .card-photo { grid-row: auto; min-height: 210px; }
  .card-side { grid-column: auto; padding: 0 16px 16px; }
  .card-body { padding: 14px 16px 8px; }
  .mosaic, .mosaic.few { grid-template-columns: minmax(0, 1fr); grid-template-rows: 270px; margin: 0 -16px; border-radius: 0; }
  .mosaic button:not(:first-child):not(.see-all) { display: none; }
  .mosaic button:first-child { grid-row: auto; }
  .back-link, .detail-actions .btn { padding: 8px 6px; white-space: nowrap; }
  .summary-price { font-size: 31px; }
  .detail-title h1 { font-size: 30px; }
  .detail-addr { font-size: 16px; }
  .summary-stats { width: 100%; justify-content: space-between; gap: 12px; }
  .stat strong { font-size: 20px; }
  .fact-tiles, .fact-groups, .checks, .ck-groups { grid-template-columns: minmax(0, 1fr); }
  .level-row, .ftile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-tile, .ftile { padding-left: 10px; gap: 8px; }
  .ftile-chev { display: none; }
  .ftile-group { padding: 4px 12px 12px; }
  .draft-title { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .draft-title h1, .draft-title .detail-addr { grid-column: 1 / -1; }
  .draft-title .draft-score-num { grid-column: 1; grid-row: 3; align-self: baseline; justify-self: start; margin: 8px 0 0; font-size: 26px; line-height: normal; }
  .draft-title .draft-score-count, .draft-title .gplace-unrated { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; font-size: 16px; }
  .cl-1 { height: 250px; }
  .cl-2 { height: 170px; }
  .layout-switch span { display: none; }
  .layout-switch { padding-left: 4px; }
  .area-photos { grid-template-columns: repeat(2, 1fr); }
  .area-photos button { height: 110px; }
  .footer-logo { font-size: 32px; }
  /* On phones the rows wrap, so spacing replaces the bars, which would hang at the end of a line. */
  .footer-row { column-gap: 20px; }
  .footer-row a:not(:last-child)::after { display: none; }
  .footer-logo .icon { width: 32px; height: 32px; }
  .footer-top { flex-wrap: wrap; }
  .site-footer { padding: 44px 0 36px; }
  .unit-table thead { display: none; }
  .unit-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .unit-table td { display: block; padding: 2px 0; border: 0; }
  .lb-stage { padding: 0; }
  .lb-nav { width: 46px; height: 46px; }
  .viewer-grid { grid-template-columns: minmax(0, 1fr); }
  .sort-select { max-width: 100%; }
  .results-tools { justify-content: flex-start; margin-left: 0; width: 100%; }
  .prose h1 { font-size: 30px; }
  .credits-table .hide-sm { display: none; }
}

/* Customer accounts (Nov 12, 2026): the header's account link, Save search on the search page, and the profile
   details a signed-in visitor can share in the contact form. The account page has its own css/account.css. */
@media (max-width: 720px) {
  .account-label { display: none; }
}
.form-error { margin-top: 10px; font-size: 15.5px; color: var(--alert-ink); }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 16px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ocean-600); }
.cf-share { border: 1px solid var(--line); border-radius: 10px; margin: 14px 0 0; padding: 6px 14px 4px; }
.cf-share legend { font-weight: 600; font-size: 15.5px; padding: 0 6px; }
.cf-share .check { min-height: 40px; padding: 6px 0; font-size: 15.5px; }
.search-page .save-search[hidden] { display: none; }
/* On phones, Save search is a slim full-width row under Sort, Filters and Map, so that row keeps its three buttons. */
@media (max-width: 720px) {
  .search-page .results-tools > .save-search { order: 4; grid-column: 1 / -1; min-height: 46px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; color: var(--ocean-600); font-size: 16px; }
}
/* "Do you run this community? Manage this listing", at the foot of each community page (Nov 12, 2026). */
.manage-line { margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 15.5px; }