/* The listing and search pages. Built on the design system's tokens only
   (app-theme.css) and the marketing kit (site.css: nav, footer, buttons, chips, fields,
   the phone CTA). Prefix lx- for everything this app adds. No colour, size or shadow
   is written here as a raw value. */

/* ---------- Page head ---------- */
.lx-top { padding-top: var(--tch-sp-5); }
.lx-crumbs { display: flex; flex-wrap: wrap; gap: var(--tch-sp-2); align-items: center; font-size: var(--tch-fs-small); color: var(--tch-muted); }
.lx-crumbs a { color: var(--tch-slate); text-decoration: none; font-weight: var(--tch-fw-medium); }
.lx-crumbs a:hover { color: var(--tch-teal); text-decoration: underline; }
.lx-head { display: grid; gap: var(--tch-sp-2); margin-top: var(--tch-sp-3); }
.lx-head__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tch-sp-2) var(--tch-sp-4); }
.lx-title { margin: 0; font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h2); line-height: var(--tch-lh-heading); letter-spacing: var(--tch-ls-display); color: var(--tch-ink); text-wrap: balance; }
/* Every item carries its dot in front, and the list is pulled one dot to the left and
   clipped there: a dot that wraps to the start of a line is cut off, never shown
   leading the line (Mark, 2026-10-05, on "· pet friendly" starting a line). */
.lx-specs { display: flex; flex-wrap: wrap; margin: 0 0 0 -1.25em; padding: 0; list-style: none; clip-path: inset(0 0 0 1.25em); font-size: var(--tch-fs-lead); line-height: var(--tch-lh-heading); color: var(--tch-text); }
.lx-specs li { white-space: nowrap; }
.lx-specs li::before { content: "·"; display: inline-block; width: 1.25em; text-align: center; color: var(--tch-muted); }
.lx-place { color: var(--tch-slate); font-weight: var(--tch-fw-medium); font-size: var(--tch-fs-small); }
/* A phone keeps the head short: the title, one or two lines of facts, the place
   (Mark, 2026-10-05: "take up far less space"). */
@media (max-width: 639px) {
  .lx-top { padding-top: var(--tch-sp-3); }
  .lx-head { gap: var(--tch-sp-1); margin-top: var(--tch-sp-2); }
  .lx-title { font-size: var(--tch-fs-h3); }
  .lx-specs { font-size: var(--tch-fs-small); }
  /* The card straight under the photos says the same ("Available Oct 23"). */
  .lx-head__meta .tch-chip { display: none; }
}
.lx-muted { color: var(--tch-muted); }

/* ---------- Photo mosaic: one large, four small; a swipe row on a phone ---------- */
/* The swipe row shows one whole photo at a time, and the button over it stays where it
   is while the photos move (it sits outside the row, in .lx-photos). On a phone the
   row runs edge to edge. */
.lx-gallery { margin-top: var(--tch-sp-5); }
.lx-photos { position: relative; }
.lx-mosaic { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: var(--tch-r-lg); scrollbar-width: none; }
.lx-mosaic::-webkit-scrollbar { display: none; }
.lx-mosaic__cell { position: relative; display: block; padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tch-before); cursor: zoom-in; scroll-snap-align: start; scroll-snap-stop: always; }
.lx-mosaic__cell img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--tch-dur-3) var(--tch-ease), filter var(--tch-dur-2) var(--tch-ease); }
.lx-mosaic__cell:hover img { scale: 1.03; filter: brightness(0.94); }
.lx-mosaic__cell:focus-visible { outline: var(--tch-bw-2) solid var(--tch-teal); outline-offset: var(--tch-bw-2); }
.lx-mosaic__all { position: absolute; right: var(--tch-sp-4); bottom: var(--tch-sp-4); box-shadow: var(--tch-shadow-2); }
.lx-mosaic__count { display: none; }
@media (max-width: 899px) {
  .lx-mosaic__all { right: var(--tch-sp-3); bottom: var(--tch-sp-3); min-height: 0; padding: var(--tch-sp-1) var(--tch-sp-3); font-size: var(--tch-fs-small); font-variant-numeric: tabular-nums; }
  .lx-mosaic__all-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lx-mosaic__count { display: inline; }
}
@media (max-width: 639px) {
  .lx-gallery { margin-top: var(--tch-sp-4); }
  .lx-photos { margin-inline: calc(-1 * var(--tch-gutter)); }
  .lx-mosaic { border-radius: 0; }
}
.lx-nophotos { display: grid; place-items: center; aspect-ratio: 3 / 1; border-radius: var(--tch-r-lg); background: var(--tch-alt); color: var(--tch-muted); }
/* No photos yet (a coming-soon home): the mark, a word, a line, centred in the space the
   photos will take, so the page keeps its shape (Mark, 2026-10-04). */
.lx-soon { display: grid; justify-items: center; gap: var(--tch-sp-2); max-width: 26rem; padding: var(--tch-sp-5); text-align: center; }
.lx-soon__mark { width: 3rem; height: 3rem; opacity: 0.85; }
.lx-soon__title { font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-soon p { color: var(--tch-text); }
@media (max-width: 640px) { .lx-nophotos { aspect-ratio: 4 / 3; } }
.lx-card__soon, .lx-pop__soon { display: grid; place-items: center; width: 100%; height: 100%; background: var(--tch-alt); color: var(--tch-muted); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-medium); }
@media (min-width: 900px) {
  .lx-mosaic { grid-auto-flow: row; gap: var(--tch-sp-2); grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(22rem, 38vw, 34rem); overflow: hidden; }
  .lx-mosaic__cell { aspect-ratio: auto; border-radius: 0; }
  .lx-mosaic__cell:first-child { grid-row: 1 / 3; }
  .lx-mosaic__cell:nth-child(n+6) { display: none; }
  .lx-mosaic--few { grid-template-columns: 2fr 1fr; }
  .lx-mosaic--few .lx-mosaic__cell:nth-child(n+4) { display: none; }
}

/* ---------- Photo viewer ---------- */
.lx-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--tch-ink); color: var(--tch-on-photo); }
.lx-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lx-viewer::backdrop { background: var(--tch-ink); }
.lx-viewer__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--tch-sp-3) var(--tch-gutter); }
.lx-viewer__count { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); letter-spacing: var(--tch-ls-label); }
.lx-icon-btn { display: inline-grid; place-items: center; width: var(--tch-tap); height: var(--tch-tap); border: var(--tch-bw-1) solid var(--tch-line-on-photo); border-radius: var(--tch-r-pill); background: transparent; color: inherit; font-size: var(--tch-fs-lead); cursor: pointer; }
.lx-icon-btn:hover { background: var(--tch-line-on-photo); }
.lx-viewer__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--tch-gutter); }
.lx-viewer__figure { margin: 0; display: grid; gap: var(--tch-sp-3); justify-items: center; max-height: 100%; min-height: 0; }
.lx-viewer__figure img { max-width: 100%; max-height: calc(100dvh - 12rem); object-fit: contain; border-radius: var(--tch-r-md); }
.lx-viewer__figure figcaption { font-size: var(--tch-fs-small); opacity: 0.85; text-align: center; }
.lx-viewer__nav { position: absolute; top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; border: 0; border-radius: var(--tch-r-pill); background: var(--tch-card); color: var(--tch-ink); font-size: var(--tch-fs-h3); line-height: 1; cursor: pointer; box-shadow: var(--tch-shadow-3); }
.lx-viewer__nav--prev { left: var(--tch-gutter); }
.lx-viewer__nav--next { right: var(--tch-gutter); }
.lx-viewer__nav:disabled { opacity: 0; pointer-events: none; }
.lx-viewer__strip { display: flex; gap: var(--tch-sp-2); overflow-x: auto; margin: 0; padding: var(--tch-sp-3) var(--tch-gutter) calc(var(--tch-sp-3) + env(safe-area-inset-bottom, 0px)); list-style: none; scrollbar-width: thin; }
.lx-viewer__strip button { display: block; width: 4.5rem; aspect-ratio: 4 / 3; padding: 0; border: var(--tch-bw-2) solid transparent; border-radius: var(--tch-r-xs); overflow: hidden; background: none; cursor: pointer; opacity: 0.6; }
.lx-viewer__strip button[aria-current="true"] { border-color: var(--tch-on-photo); opacity: 1; }
.lx-viewer__strip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Two columns: the home, and the request card beside it ---------- */
.lx-body { display: grid; gap: var(--tch-sp-7); padding-block: var(--tch-sp-7) var(--tch-section-y); }
/* Until the card has a column of its own it comes first, straight under the photos, not
   after everything else (Mark, 2026-10-05: "near the fold toward the top"). */
@media (max-width: 959px) {
  .lx-book { order: -1; }
}
@media (max-width: 639px) {
  .lx-body { gap: var(--tch-sp-6); padding-top: var(--tch-sp-5); }
  .lx-book__card { padding: var(--tch-sp-4); box-shadow: var(--tch-shadow-1); }
  .lx-promise { gap: var(--tch-sp-4); }
  .lx-host { align-items: start; gap: var(--tch-sp-3); padding-bottom: var(--tch-sp-4); }
  .lx-host__mark { width: 2.75rem; height: 2.75rem; }
  .lx-host__mark img { width: 1.75rem; height: 1.75rem; }
  .lx-perks { gap: var(--tch-sp-4); }
  .lx-perks li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--tch-sp-3); }
  .lx-perks__icon { width: 1.5rem; height: 1.5rem; }
  .lx-host__title, .lx-perks b { font-size: var(--tch-fs-body); }
  .lx-host p, .lx-perks p { font-size: var(--tch-fs-small); }
}
@media (min-width: 960px) {
  .lx-body { grid-template-columns: minmax(0, 1fr) 25rem; gap: var(--tch-sp-8); align-items: start; }
}
.lx-main { min-width: 0; }

.lx-promise { display: grid; gap: var(--tch-sp-5); padding-bottom: var(--tch-sp-6); border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-host { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tch-sp-4); align-items: center; padding-bottom: var(--tch-sp-5); border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-host__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--tch-r-pill); background: var(--tch-gold-tint); }
.lx-host__mark img { width: 2.25rem; height: 2.25rem; }
.lx-host__title { margin: 0 0 var(--tch-sp-1); font-family: var(--tch-font-body); font-size: var(--tch-fs-lead); font-weight: var(--tch-fw-semibold); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-host p, .lx-perks p { color: var(--tch-text); line-height: var(--tch-lh-body); }
.lx-perks { display: grid; gap: var(--tch-sp-5); margin: 0; padding: 0; list-style: none; }
.lx-perks li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--tch-sp-4); align-items: start; }
.lx-perks b { display: block; margin-bottom: var(--tch-sp-1); font-size: var(--tch-fs-lead); font-weight: var(--tch-fw-semibold); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-perks__icon { justify-self: center; width: 2rem; height: 2rem; fill: none; stroke: var(--tch-slate); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.lx-highlights { display: flex; flex-wrap: wrap; gap: var(--tch-sp-2); margin: var(--tch-sp-5) 0 0; padding: 0; list-style: none; }

.lx-section { padding-top: var(--tch-sp-7); margin-top: var(--tch-sp-7); border-top: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-promise + .lx-section { border-top: 0; margin-top: 0; }
.lx-section h2 { margin: 0 0 var(--tch-sp-4); font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }

.lx-prose { max-width: var(--tch-w-measure); color: var(--tch-text); line-height: var(--tch-lh-body); }
.lx-prose > * + * { margin-top: var(--tch-sp-3); }
.lx-prose ul, .lx-prose ol { padding-left: var(--tch-sp-5); }
.lx-prose h3, .lx-prose h4 { font-size: var(--tch-fs-h4); color: var(--tch-ink); }
.lx-prose.is-clamped { max-height: 16rem; overflow: hidden; mask-image: linear-gradient(180deg, var(--tch-ink) 60%, transparent 100%); }
.lx-more { margin-top: var(--tch-sp-3); padding: 0; border: 0; background: none; color: var(--tch-teal); font-weight: var(--tch-fw-semibold); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; min-height: var(--tch-tap); }

.lx-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--tch-sp-3); margin: 0; padding: 0; list-style: none; }
.lx-room { display: grid; gap: var(--tch-sp-1); align-content: start; padding: var(--tch-sp-4); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); background: var(--tch-card); }
.lx-room--primary { border-color: var(--tch-teal-line); background: var(--tch-teal-tint); }
.lx-room b { color: var(--tch-ink); }
.lx-room__icon { width: 1.75rem; height: 1.1rem; margin-bottom: var(--tch-sp-2); border: var(--tch-bw-15) solid var(--tch-slate); border-top-width: var(--tch-bw-2); border-radius: var(--tch-r-xs) var(--tch-r-xs) 0 0; }
.lx-room__icon--bath { width: 1.75rem; height: 0.9rem; margin-top: 0.2rem; border-top-width: var(--tch-bw-15); border-radius: 0 0 var(--tch-r-sm) var(--tch-r-sm); }
.lx-room__floor { font-size: var(--tch-fs-small); color: var(--tch-muted); }

.lx-amenities { display: grid; gap: var(--tch-sp-5) var(--tch-sp-6); }
@media (min-width: 640px) { .lx-amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-amenities.is-collapsed { max-height: 22rem; overflow: hidden; mask-image: linear-gradient(180deg, var(--tch-ink) 70%, transparent 100%); }
.lx-amenities__group h3 { margin: 0 0 var(--tch-sp-2); font-family: var(--tch-font-body); font-size: var(--tch-fs-label); letter-spacing: var(--tch-ls-label); text-transform: uppercase; color: var(--tch-slate); font-weight: var(--tch-fw-semibold); }
.lx-amenities__group ul { display: grid; gap: var(--tch-sp-2); margin: 0; padding: 0; list-style: none; }
.lx-amenities__group li { position: relative; padding-left: var(--tch-sp-5); color: var(--tch-text); }
.lx-amenities__group li::before { content: ""; position: absolute; left: 0.2rem; top: 0.45em; width: 0.55rem; height: 0.3rem; border-left: var(--tch-bw-2) solid var(--tch-teal); border-bottom: var(--tch-bw-2) solid var(--tch-teal); rotate: -45deg; }
.lx-amenities__more { margin-top: var(--tch-sp-5); }

/* The address is a body line under the section heading (the canon: ink and weight are
   for headings, body is --tch-text at 16 px regular), the same slot as the obscured
   home's muted line, with the same gap above the map (Mark, 2026-10-04). */
.lx-address { font-size: var(--tch-fs-body); font-weight: var(--tch-fw-regular); line-height: var(--tch-lh-body); color: var(--tch-text); }
.lx-section > p + .lx-map { margin-top: var(--tch-sp-3); }
.lx-map { aspect-ratio: 16 / 9; border-radius: var(--tch-r-lg); overflow: hidden; background: var(--tch-alt); }

/* ---------- Similar homes nearby: the search's cards, above the footer ---------- */
.lx-similar { padding-block: var(--tch-sp-8) var(--tch-section-y); background: var(--tch-alt); border-top: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-similar__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tch-sp-2) var(--tch-sp-5); margin-bottom: var(--tch-sp-6); }
.lx-similar__head h2 { margin: 0; font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-similar__all { display: inline-flex; align-items: center; gap: var(--tch-sp-1); min-height: var(--tch-tap); font-weight: var(--tch-fw-semibold); text-decoration: none; }
.lx-similar__all:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.lx-body:has(+ .lx-similar) { padding-bottom: var(--tch-sp-8); }
/* One card a row on a phone, three across from a tablet up: never a half-empty row. */
.lx-similar .lx-grid { grid-template-columns: minmax(0, 1fr); gap: var(--tch-sp-5); }
@media (min-width: 760px) { .lx-similar .lx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- The request card ---------- */
.lx-book { min-width: 0; }
@media (min-width: 960px) { .lx-book { position: sticky; top: calc(var(--tch-nav-h) + var(--tch-sp-4)); } }
.lx-book__card { position: relative; display: grid; gap: var(--tch-sp-4); padding: var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-xl); box-shadow: var(--tch-shadow-3); }
.lx-book__title { margin: 0; font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); color: var(--tch-ink); }
.lx-book__sub { margin-top: calc(-1 * var(--tch-sp-3)); font-size: var(--tch-fs-small); color: var(--tch-slate); }
.lx-book__contact { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tch-sp-2) var(--tch-sp-4); padding-top: var(--tch-sp-4); border-top: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-book__contact a { display: grid; gap: 0.125rem; min-height: var(--tch-tap); align-content: end; text-decoration: none; color: var(--tch-teal); }
.lx-book__contact span { font-size: var(--tch-fs-small); color: var(--tch-slate); }
.lx-book__contact b { font-weight: var(--tch-fw-semibold); white-space: nowrap; }
.lx-book__contact a[href^="mailto"] b { font-weight: var(--tch-fw-medium); }
.lx-book__contact a:hover b { text-decoration: underline; text-underline-offset: 0.2em; }
.lx-book__ask { justify-self: center; font-weight: var(--tch-fw-semibold); min-height: var(--tch-tap); display: inline-flex; align-items: center; }

.lx-form { display: grid; gap: var(--tch-sp-3); }
.lx-row { display: grid; gap: var(--tch-sp-3); }
@media (min-width: 640px) { .lx-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lx-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-form textarea { width: 100%; padding: var(--tch-sp-3); background: var(--tch-card); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-sm); color: var(--tch-ink); font: inherit; resize: vertical; }
.lx-form textarea:focus-visible, .lx-form input:focus-visible, .lx-form select:focus-visible { outline: var(--tch-bw-2) solid var(--tch-teal); outline-offset: var(--tch-bw-1); border-color: var(--tch-teal); box-shadow: none; }
.lx-form [aria-invalid="true"] { border-color: var(--tch-red); }
.lx-optional { font-weight: var(--tch-fw-regular); color: var(--tch-muted); }
.lx-error { margin: calc(-1 * var(--tch-sp-2)) 0 0; color: var(--tch-red); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-medium); }
.tch-field > .lx-error { margin: 0; }
.lx-form textarea[aria-invalid="true"] { background: var(--tch-red-tint); }
.lx-fine { font-size: var(--tch-fs-small); color: var(--tch-muted); text-align: center; }
.lx-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lx-done { display: grid; gap: var(--tch-sp-2); padding: var(--tch-sp-4); border-radius: var(--tch-r-md); background: var(--tch-teal-tint); border: var(--tch-bw-1) solid var(--tch-teal-line); color: var(--tch-ink); }
.lx-done b { color: var(--tch-teal-ink); }
.lx-ask .lx-form > button { justify-self: start; }
.lx-form[aria-busy="true"] button[type="submit"] { opacity: 0.7; pointer-events: none; }

/* The request popup: name, email, phone and notes over the page, the dates on the
   card behind it. With no script it is not a popup: its fields show on the card. */
.no-js .lx-js-only { display: none; }
.no-js .lx-modal { display: grid; gap: var(--tch-sp-3); position: static; width: auto; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; }
.no-js .lx-modal__head, .no-js .lx-modal__dates { display: none; }
.lx-modal { width: min(30rem, calc(100vw - 2 * var(--tch-gutter))); max-height: calc(100dvh - 2 * var(--tch-gutter)); overflow-y: auto; padding: var(--tch-sp-5); border: 0; border-radius: var(--tch-r-xl); background: var(--tch-card); color: var(--tch-ink); box-shadow: var(--tch-shadow-3); }
.lx-modal[open] { display: grid; gap: var(--tch-sp-3); }
.lx-modal::backdrop { background: var(--tch-scrim); }
.lx-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tch-sp-3); }
.lx-modal__title { margin: 0; font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-modal__close { display: inline-grid; place-items: center; width: var(--tch-tap); height: var(--tch-tap); margin-right: calc(-1 * var(--tch-sp-2)); border: 0; border-radius: var(--tch-r-pill); background: none; color: var(--tch-slate); font-size: var(--tch-fs-lead); cursor: pointer; }
.lx-modal__close:hover { background: var(--tch-alt); color: var(--tch-ink); }
.lx-modal__dates { margin-top: calc(-1 * var(--tch-sp-2)); padding: var(--tch-sp-2) var(--tch-sp-3); border-radius: var(--tch-r-sm); background: var(--tch-teal-tint); color: var(--tch-teal-ink); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); }
.lx-modal__dates:empty { display: none; }

/* The two date fields, joined, as one control. */
.lx-dates { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-sm); }
.lx-dates .tch-field { padding: var(--tch-sp-2) var(--tch-sp-3); gap: 0; }
.lx-dates .tch-field + .tch-field { border-left: var(--tch-bw-15) solid var(--tch-line); }
/* The canon's search field type, as /search has it: a sentence-case 14 px label over a
   16 px regular value (Mark, 2026-10-04, here as on the search bar). */
.lx-dates .tch-field label { font-size: var(--tch-fs-small); line-height: var(--tch-lh-tight); letter-spacing: normal; text-transform: none; font-weight: var(--tch-fw-semibold); color: var(--tch-slate); }
.lx-dates input { min-height: 0; padding: 0; border: 0; background: none; font-size: var(--tch-fs-body); font-weight: var(--tch-fw-regular); }
.lx-dates__btn { display: block; width: 100%; min-height: var(--tch-tap); padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: var(--tch-fs-body); font-weight: var(--tch-fw-regular); color: var(--tch-ink); cursor: pointer; }
.lx-dates__btn[data-empty] { color: var(--tch-muted); font-weight: var(--tch-fw-regular); }
.lx-dates.is-open { border-color: var(--tch-teal); }
/* On the card the pair is one short row (Mark, 2026-10-04: "make the height shorter"):
   label and date together are the tap target, since the label points at the button. */
.lx-book .lx-dates .tch-field { gap: 0.125rem; padding: var(--tch-sp-2) var(--tch-sp-3); }
.lx-book .lx-dates__btn { min-height: 0; line-height: var(--tch-lh-heading); }

/* ---------- The calendar ---------- */
.lx-cal { position: absolute; z-index: calc(var(--tch-sticky-z) + 2); top: calc(100% + var(--tch-sp-2)); right: 0; width: min(46rem, calc(100vw - 2 * var(--tch-gutter))); padding: var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-xl); box-shadow: var(--tch-shadow-3); }
@media (max-width: 959px) { .lx-cal { right: auto; left: 0; } }
@media (max-width: 559px) { .lx-cal { position: fixed; inset: auto 0 0 0; top: auto; width: auto; max-height: 88dvh; overflow-y: auto; border-radius: var(--tch-r-xl) var(--tch-r-xl) 0 0; padding-bottom: calc(var(--tch-sp-5) + env(safe-area-inset-bottom, 0px)); } }
.lx-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tch-sp-3); margin-bottom: var(--tch-sp-4); }
.lx-cal__status { font-weight: var(--tch-fw-semibold); color: var(--tch-ink); }
.lx-cal__hint { font-size: var(--tch-fs-small); color: var(--tch-muted); }
.lx-cal__months { display: grid; gap: var(--tch-sp-6); }
@media (min-width: 640px) { .lx-cal__months { grid-template-columns: 1fr 1fr; } }
.lx-cal__month h3 { margin: 0 0 var(--tch-sp-3); text-align: center; font-size: var(--tch-fs-body); color: var(--tch-ink); }
.lx-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: var(--tch-sp-1); }
.lx-cal__dow { padding-bottom: var(--tch-sp-2); text-align: center; font-size: var(--tch-fs-small); color: var(--tch-muted); font-weight: var(--tch-fw-medium); }
.lx-cal__day { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 2.5rem; padding: 0; border: 0; background: none; font: inherit; font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-ink); cursor: pointer; }
.lx-cal__day span { display: grid; place-items: center; width: 100%; height: 100%; max-width: 2.75rem; max-height: 2.75rem; border-radius: var(--tch-r-pill); transition: background var(--tch-dur-1) var(--tch-ease); }
.lx-cal__day:hover span { background: var(--tch-teal-tint); }
.lx-cal__day[aria-disabled="true"] { color: var(--tch-muted); font-weight: var(--tch-fw-regular); cursor: default; }
.lx-cal__day[aria-disabled="true"] span { text-decoration: line-through; text-decoration-color: var(--tch-line); }
.lx-cal__day[aria-disabled="true"]:hover span { background: none; }
.lx-cal__day.is-short { color: var(--tch-muted); font-weight: var(--tch-fw-regular); }
.lx-cal__day.is-short span { text-decoration: none; }
.lx-cal__day.is-today span { box-shadow: inset 0 0 0 var(--tch-bw-15) var(--tch-line); }
.lx-cal__day.in-range { background: var(--tch-teal-tint); }
.lx-cal__day.is-start { background: linear-gradient(90deg, transparent 50%, var(--tch-teal-tint) 50%); }
.lx-cal__day.is-end { background: linear-gradient(90deg, var(--tch-teal-tint) 50%, transparent 50%); }
.lx-cal__day.is-start.is-end { background: none; }
.lx-cal__day.is-start span, .lx-cal__day.is-end span { background: var(--tch-teal); color: var(--tch-teal-on); }
.lx-cal__day:focus-visible { outline: none; }
.lx-cal__day:focus-visible span { outline: var(--tch-bw-2) solid var(--tch-teal); outline-offset: var(--tch-bw-1); }
.lx-cal__nav { display: inline-grid; place-items: center; width: var(--tch-tap); height: var(--tch-tap); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-pill); background: var(--tch-card); color: var(--tch-ink); cursor: pointer; font-size: var(--tch-fs-lead); }
.lx-cal__nav:disabled { opacity: 0.3; cursor: default; }
.lx-cal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tch-sp-3); margin-top: var(--tch-sp-5); padding-top: var(--tch-sp-4); border-top: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-cal__clear { padding: 0; border: 0; background: none; color: var(--tch-ink); font-weight: var(--tch-fw-semibold); text-decoration: underline; cursor: pointer; min-height: var(--tch-tap); }
.lx-cal__loading { padding: var(--tch-sp-7) 0; text-align: center; color: var(--tch-muted); }

/* ---------- Plain pages ---------- */
.lx-empty { display: grid; gap: var(--tch-sp-4); justify-items: start; }
.lx-errors { color: var(--tch-red); padding-left: var(--tch-sp-5); }

/* The kit's phone CTA, and room for it at the foot of the page. */
@media (max-width: 799px) { .lx-listing .tch-footer { padding-bottom: calc(var(--tch-sp-8) + var(--tch-tap)); } }

@media (prefers-reduced-motion: reduce) {
  .lx-mosaic__cell img, .lx-cal__day span { transition: none; }
}

/* ======================================================================= search */
.lx-sbar { position: relative; z-index: calc(var(--tch-sticky-z) + 1); background: var(--tch-canvas); border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); padding-block: var(--tch-sp-3); }
/* Every control in the bar is one box, one height: a small label over its value, the
   label inside the box. Type is the canon's search field (kit/site.css .tch-field,
   component A16): a sentence-case label at the 14 px meta floor, not uppercase and
   tracked, over a 16 px regular value (Mark, 2026-10-04: the labels read too big). */
.lx-sbar { --lx-bar-h: 3.25rem; }
/* A phone gets two rows, not five (Mark, 2026-10-05: "make mobile appear more
   streamlined"): where and a square search button, then the dates and a square Filters
   button with a count. Bedrooms are inside Filters on every screen. */
.lx-sbar__row { display: grid; gap: var(--tch-sp-2); grid-template-columns: minmax(0, 1fr) var(--lx-bar-h); align-items: stretch; }
.lx-sbar__where { grid-area: 1 / 1; }
.lx-sbar__go { grid-area: 1 / 2; }
.lx-sbar__dates { grid-area: 2 / 1; }
.lx-sbar__filters { grid-area: 2 / 2; }
@media (max-width: 899px) {
  .lx-sbar { --lx-bar-h: 3rem; padding-block: var(--tch-sp-2); }
  .lx-sbar .lx-sbar__go { padding: 0; }
  .lx-sbar__go-text, .lx-filters__btn .lx-box__label, .lx-filters__btn .lx-box__value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lx-filters__btn { place-items: center; padding: 0; }
  .lx-filters__btn::after { display: none; }
}
@media (min-width: 900px) {
  .lx-sbar { position: sticky; top: var(--tch-nav-h); }
  .lx-sbar__row { grid-template-columns: minmax(12rem, 1.6fr) minmax(17rem, 1.6fr) minmax(9.5rem, 0.7fr) auto; }
  .lx-sbar__where, .lx-sbar__dates, .lx-sbar__filters, .lx-sbar__go { grid-area: auto; }
  .lx-sbar__go-icon, .lx-filters__icon, .lx-filters__count { display: none; }
}
.lx-sbar__go-icon, .lx-filters__icon { flex: none; width: 1.375rem; height: 1.375rem; max-width: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lx-filters__icon { color: var(--tch-ink); }
.lx-filters__count { position: absolute; top: calc(-1 * var(--tch-sp-2)); right: calc(-1 * var(--tch-sp-2)); display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 var(--tch-sp-1); border-radius: var(--tch-r-pill); background: var(--tch-teal); color: var(--tch-teal-on); font-size: var(--tch-fs-label); font-weight: var(--tch-fw-bold); line-height: 1; }
.lx-filters__count[hidden] { display: none; }
.lx-box { position: relative; display: grid; align-content: center; gap: 0.125rem; height: var(--lx-bar-h); min-width: 0; padding: 0 var(--tch-sp-4); background: var(--tch-card); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-md); transition: border-color var(--tch-dur-1) var(--tch-ease); }
.lx-box:hover { border-color: var(--tch-teal-line); }
.lx-box:focus-within { border-color: var(--tch-teal); box-shadow: var(--tch-ring); }
.lx-box > label, .lx-box__label, .lx-sbar .lx-dates .tch-field label { font-size: var(--tch-fs-small); line-height: var(--tch-lh-tight); letter-spacing: normal; text-transform: none; font-weight: var(--tch-fw-semibold); color: var(--tch-slate); }
.lx-sbar .lx-box input, .lx-sbar .lx-box select, .lx-box__value { width: 100%; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; font: inherit; font-size: var(--tch-fs-body); font-weight: var(--tch-fw-regular); line-height: var(--tch-lh-heading); color: var(--tch-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-sbar .lx-box input::placeholder { color: var(--tch-muted); font-weight: var(--tch-fw-regular); }
.lx-sbar .lx-box input:focus-visible, .lx-sbar .lx-box select:focus-visible { outline: none; box-shadow: none; }
/* The Filters box's chevron. */
.lx-filters__btn::after { content: ""; position: absolute; right: var(--tch-sp-4); top: 50%; width: 0.45rem; height: 0.45rem; border-right: var(--tch-bw-15) solid var(--tch-slate); border-bottom: var(--tch-bw-15) solid var(--tch-slate); translate: 0 -70%; rotate: 45deg; pointer-events: none; transition: rotate var(--tch-dur-1) var(--tch-ease); }
.lx-sbar .lx-dates { height: var(--lx-bar-h); background: var(--tch-card); border-radius: var(--tch-r-md); }
.lx-sbar .lx-dates .tch-field { align-content: center; gap: 0.125rem; padding: 0 var(--tch-sp-4); }
.lx-sbar .lx-dates__btn { min-height: 0; font-size: var(--tch-fs-body); font-weight: var(--tch-fw-regular); line-height: var(--tch-lh-heading); }
.lx-sbar__go { height: var(--lx-bar-h); min-height: 0; padding-inline: var(--tch-sp-6); border-radius: var(--tch-r-md); }
.lx-check { display: inline-flex; align-items: center; gap: var(--tch-sp-2); min-height: var(--tch-tap); font-weight: var(--tch-fw-semibold); color: var(--tch-ink); cursor: pointer; }
.lx-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--tch-teal); }

/* The Filters menu: a box in the bar that opens a panel under it. */
.lx-filters { position: relative; min-width: 0; }
.lx-filters__btn { list-style: none; cursor: pointer; padding-right: var(--tch-sp-6); }
.lx-filters__btn::-webkit-details-marker { display: none; }
.lx-filters[open] .lx-filters__btn { border-color: var(--tch-teal); }
.lx-filters[open] .lx-filters__btn::after { rotate: 225deg; translate: 0 -20%; }
.lx-filters[data-active] .lx-filters__btn { border-color: var(--tch-teal); background: var(--tch-teal-tint); }
.lx-filters[data-active] .lx-box__value { color: var(--tch-teal-ink); }
.lx-filters__btn:focus-visible { outline: none; border-color: var(--tch-teal); box-shadow: var(--tch-ring); }
.lx-filters__panel { position: absolute; z-index: calc(var(--tch-sticky-z) + 3); top: calc(100% + var(--tch-sp-2)); right: 0; width: min(22rem, calc(100vw - 2 * var(--tch-gutter))); padding: var(--tch-sp-4) var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-lg); box-shadow: var(--tch-shadow-3); }
/* On a phone the menu is a sheet from the bottom, like the calendar, over a dimmed page.
   The dimming is the menu's own ::before, so a tap on it reaches no card underneath;
   search.js closes the menu on it. */
@media (max-width: 559px) {
  .lx-filters__panel { position: fixed; inset: auto 0 0 0; top: auto; width: auto; max-height: 85dvh; overflow-y: auto; padding-bottom: calc(var(--tch-sp-4) + env(safe-area-inset-bottom, 0px)); border-radius: var(--tch-r-xl) var(--tch-r-xl) 0 0; }
  .lx-filters[open]::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--tch-sticky-z) + 2); background: color-mix(in srgb, var(--tch-ink) 45%, transparent); }
}
/* Bedrooms: one segmented row, a radio each, "Any" first. */
.lx-beds { margin: 0 0 var(--tch-sp-3); padding: 0 0 var(--tch-sp-3); border: 0; border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); min-width: 0; }
.lx-beds legend.lx-filters__head { padding: 0; margin-bottom: var(--tch-sp-2); }
.lx-beds__opts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-md); overflow: hidden; }
.lx-beds__opt { position: relative; cursor: pointer; }
.lx-beds__opt + .lx-beds__opt { border-left: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-beds__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lx-beds__opt span { display: grid; place-items: center; min-height: var(--tch-tap); font-weight: var(--tch-fw-medium); color: var(--tch-ink); transition: background-color var(--tch-dur-1) var(--tch-ease); }
.lx-beds__opt:hover span { background: var(--tch-teal-tint); }
.lx-beds__opt input:checked + span { background: var(--tch-teal); color: var(--tch-teal-on); }
.lx-beds__opt input:focus-visible + span { box-shadow: inset var(--tch-ring); }
.lx-filters__head { margin: 0 0 var(--tch-sp-1); font-size: var(--tch-fs-label); letter-spacing: var(--tch-ls-label); text-transform: uppercase; font-weight: var(--tch-fw-semibold); color: var(--tch-slate); }
.lx-filters__list { display: grid; }
.lx-filters__list .lx-check { justify-content: flex-start; font-weight: var(--tch-fw-medium); border-bottom: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-filters__list .lx-check:last-child { border-bottom: 0; }
.lx-check.is-locked { cursor: default; }
.lx-tick { position: relative; flex: none; width: 1.15rem; height: 1.15rem; border-radius: var(--tch-r-xs); background: var(--tch-teal); }
.lx-tick::after { content: ""; position: absolute; left: 0.4rem; top: 0.18rem; width: 0.3rem; height: 0.6rem; border-right: var(--tch-bw-2) solid var(--tch-teal-on); border-bottom: var(--tch-bw-2) solid var(--tch-teal-on); rotate: 45deg; }
.lx-check.is-locked span { display: grid; line-height: var(--tch-lh-heading); padding-block: var(--tch-sp-2); }
.lx-check.is-locked small { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-regular); color: var(--tch-muted); }
.lx-filters__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tch-sp-3); margin-top: var(--tch-sp-3); padding-top: var(--tch-sp-3); border-top: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-filters__clear { padding: 0; border: 0; background: none; color: var(--tch-ink); font: inherit; font-weight: var(--tch-fw-semibold); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; min-height: var(--tch-tap); }

.lx-suggest { position: absolute; z-index: calc(var(--tch-sticky-z) + 3); top: calc(100% + var(--tch-sp-1)); left: 0; right: 0; margin: 0; padding: var(--tch-sp-2); list-style: none; background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-md); box-shadow: var(--tch-shadow-3); }
.lx-suggest li { display: grid; gap: 0; padding: var(--tch-sp-2) var(--tch-sp-3); border-radius: var(--tch-r-sm); cursor: pointer; }
.lx-suggest li b { color: var(--tch-ink); font-weight: var(--tch-fw-semibold); }
.lx-suggest li span { font-size: var(--tch-fs-small); color: var(--tch-muted); }
.lx-suggest li[aria-selected="true"], .lx-suggest li:hover { background: var(--tch-teal-tint); }

.lx-results { display: grid; }
.lx-list { padding: var(--tch-sp-5) var(--tch-gutter) var(--tch-section-y); min-width: 0; }
.lx-list__head { margin-bottom: var(--tch-sp-5); }
.lx-list__title { margin: 0; font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); color: var(--tch-ink); line-height: var(--tch-lh-heading); }
.lx-list__sub { margin-top: var(--tch-sp-2); color: var(--tch-slate); }
.lx-list__sub a { margin-left: var(--tch-sp-2); font-weight: var(--tch-fw-semibold); }
.lx-note { margin-top: var(--tch-sp-2); padding: var(--tch-sp-2) var(--tch-sp-3); border-radius: var(--tch-r-sm); background: var(--tch-gold-wash); color: var(--tch-gold-ink); font-size: var(--tch-fs-small); }
.lx-grid { display: grid; gap: var(--tch-sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.lx-card.is-hot { border-color: var(--tch-teal); box-shadow: var(--tch-shadow-2); }
.lx-card__dist { margin-top: var(--tch-sp-2); font-size: var(--tch-fs-small); color: var(--tch-teal-ink); font-weight: var(--tch-fw-semibold); }
/* Opens after the move-in date (search.FUZZY_DAYS): slightly faded, full on hover, with
   a pill over the photo saying how much later. */
.lx-card--late .tch-home__photo { position: relative; }
.lx-card--late .tch-home__photo img { filter: grayscale(0.6); opacity: 0.7; transition: filter var(--tch-dur-2) var(--tch-ease), opacity var(--tch-dur-2) var(--tch-ease), scale var(--tch-dur-3) var(--tch-ease); }
.lx-card--late .tch-home__body { opacity: 0.75; transition: opacity var(--tch-dur-2) var(--tch-ease); }
.lx-card--late:hover .tch-home__photo img, .lx-card--late.is-hot .tch-home__photo img { filter: none; opacity: 1; }
.lx-card--late:hover .tch-home__body, .lx-card--late.is-hot .tch-home__body { opacity: 1; }
.lx-card__late { position: absolute; top: var(--tch-sp-3); left: var(--tch-sp-3); z-index: 1; display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--tch-sp-3); border-radius: var(--tch-r-pill); background: var(--tch-card); color: var(--tch-ink); box-shadow: var(--tch-shadow-1); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); line-height: 1; white-space: nowrap; }
.lx-pop__late { justify-self: start; color: var(--tch-muted); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); }
.lx-more-btn { display: flex; width: max-content; margin: var(--tch-sp-6) auto 0; }
.lx-noresults { display: grid; gap: var(--tch-sp-3); padding: var(--tch-sp-7) var(--tch-sp-5); border: var(--tch-bw-1) dashed var(--tch-line); border-radius: var(--tch-r-lg); text-align: center; justify-items: center; }
.lx-noresults h2 { margin: 0; font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); color: var(--tch-ink); }
.lx-results.is-loading .lx-grid { opacity: 0.45; transition: opacity var(--tch-dur-1) var(--tch-ease); }

/* The map beside the list on a wide screen; behind a toggle on a phone. */
.lx-mapcol { display: none; }
.lx-map--search { aspect-ratio: auto; height: 100%; border-radius: 0; }
.lx-mapcol__move { position: absolute; top: var(--tch-sp-3); left: var(--tch-sp-3); padding: 0 var(--tch-sp-4); background: var(--tch-card); border-radius: var(--tch-r-pill); box-shadow: var(--tch-shadow-2); font-size: var(--tch-fs-small); }
.lx-viewtoggle { position: fixed; z-index: var(--tch-sticky-z); left: 50%; translate: -50% 0; bottom: calc(var(--tch-sp-5) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--tch-shadow-3); }
@media (max-width: 1023px) {
  .lx-results.is-map .lx-list { display: none; }
  .lx-results.is-map .lx-mapcol { display: block; position: relative; height: calc(100dvh - var(--tch-nav-h) - 9rem); }
}
@media (min-width: 1024px) {
  .lx-results--map { grid-template-columns: minmax(0, 1fr) minmax(24rem, 42%); }
  .lx-results:not(.lx-results--map) .lx-list { width: 100%; max-width: calc(var(--tch-w-page) + 2 * var(--tch-gutter)); margin-inline: auto; }
  .lx-mapcol { display: block; position: sticky; top: calc(var(--tch-nav-h) + 4.75rem); height: calc(100dvh - var(--tch-nav-h) - 4.75rem); }
  .lx-viewtoggle { display: none; }
  .lx-searchpage .tch-footer { position: relative; z-index: 1; }
}

/* A pin's popup: the list card in small, photo on top; a row each when homes share a
   point. Mapbox draws the frame; the look is ours. */
.lx-popup .mapboxgl-popup-content { padding: 0; overflow: hidden; border-radius: var(--tch-r-lg); background: var(--tch-card); box-shadow: var(--tch-shadow-3); font-family: var(--tch-font-body); }
.lx-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .lx-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .lx-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--tch-card); }
.lx-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .lx-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .lx-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--tch-card); }
.lx-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--tch-card); }
.lx-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--tch-card); }
.lx-popup .mapboxgl-popup-close-button { z-index: 1; top: var(--tch-sp-2); right: var(--tch-sp-2); display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: var(--tch-r-pill); background: var(--tch-card); color: var(--tch-ink); font-size: var(--tch-fs-lead); line-height: 1; box-shadow: var(--tch-shadow-2); }
.lx-popup .mapboxgl-popup-close-button:hover { background: var(--tch-teal-tint); }
.lx-popup--list .mapboxgl-popup-close-button { top: var(--tch-sp-1); right: var(--tch-sp-1); box-shadow: none; }
.lx-pop { display: grid; width: 17.5rem; color: var(--tch-ink); text-decoration: none; }
.lx-pop:hover { color: var(--tch-ink); }
.lx-pop:hover .lx-pop__title { color: var(--tch-teal-ink); }
.lx-pop__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tch-before); }
.lx-pop__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-pop__body { display: grid; gap: var(--tch-sp-1); padding: var(--tch-sp-3) var(--tch-sp-4) var(--tch-sp-4); }
.lx-pop__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tch-sp-1) var(--tch-sp-2); margin-bottom: var(--tch-sp-1); }
.lx-pop__place { font-size: var(--tch-fs-small); color: var(--tch-muted); }
.lx-pop .tch-chip { min-height: 1.5rem; padding: 0 var(--tch-sp-2); }
.lx-pop__title { font-family: var(--tch-font-display); font-size: var(--tch-fs-body); font-weight: var(--tch-fw-bold); line-height: var(--tch-lh-heading); text-wrap: balance; }
.lx-pop__specs { display: flex; flex-wrap: wrap; gap: 0 var(--tch-sp-2); font-size: var(--tch-fs-small); color: var(--tch-text); }
.lx-pop__specs i { font-style: normal; color: var(--tch-muted); }
.lx-pop__dist { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-teal-ink); }
.lx-pop__list { display: grid; max-height: 20rem; overflow-y: auto; padding: var(--tch-sp-2); }
.lx-pop--row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--tch-sp-3); align-items: center; width: 20rem; padding: var(--tch-sp-2); border-radius: var(--tch-r-md); }
.lx-pop--row:hover { background: var(--tch-teal-tint); }
.lx-pop--row .lx-pop__photo { aspect-ratio: 4 / 3; border-radius: var(--tch-r-sm); }
.lx-pop--row .lx-pop__body { padding: 0; justify-items: start; }
.lx-here { width: 1.1rem; height: 1.1rem; border-radius: var(--tch-r-pill); background: var(--tch-ink); border: var(--tch-bw-2) solid var(--tch-card); box-shadow: var(--tch-shadow-2); }

/* ======================================================================= self-tour */
/* The listing card's second action: a tour, under Request to book. */
.lx-book__tour { display: grid; gap: var(--tch-sp-2); }
.lx-book__tour p { margin: 0; font-size: var(--tch-fs-small); color: var(--tch-slate); text-align: center; }

/* The tour page: the home on the left (photos first, sticky on a wide screen), the
   three steps on the right, what happens next under them. One column on a phone, in
   that order: the home, the steps, what happens next. */
.lx-tour { display: grid; gap: var(--tch-sp-6); padding-block: var(--tch-sp-5) var(--tch-section-y); grid-template-areas: "home" "flow" "next"; }
.lx-tour__home { grid-area: home; display: grid; gap: var(--tch-sp-4); align-content: start; min-width: 0; }
.lx-tour__flow { grid-area: flow; display: grid; gap: var(--tch-sp-5); align-content: start; min-width: 0; }
.lx-tour__next { grid-area: next; min-width: 0; }
@media (min-width: 960px) {
  .lx-tour { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "home flow" "home next"; gap: var(--tch-sp-6) var(--tch-sp-8); align-items: start; padding-top: var(--tch-sp-6); }
  .lx-tour__home { position: sticky; top: calc(var(--tch-nav-h) + var(--tch-sp-4)); }
}

.lx-tour__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tch-sp-2); }
.lx-tour__photos figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--tch-r-lg); background: var(--tch-before); }
.lx-tour__photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-tour__hero { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.lx-tour__thumb { aspect-ratio: 3 / 2; }
.lx-tour__hero--empty { display: grid; place-items: center; border-radius: var(--tch-r-lg); background: var(--tch-alt); color: var(--tch-muted); }
.lx-tour__badge { position: absolute; top: var(--tch-sp-3); left: var(--tch-sp-3); box-shadow: var(--tch-shadow-1); }
.lx-tour__more { position: absolute; inset: 0; display: grid; place-items: center; background: var(--tch-scrim); color: var(--tch-on-photo); font-weight: var(--tch-fw-semibold); text-decoration: none; }
.lx-tour__more:hover { color: var(--tch-on-photo); text-decoration: underline; }
@media (max-width: 639px) { .lx-tour__thumb { display: none; } }
@media (min-width: 960px) { .lx-tour__hero { aspect-ratio: 4 / 3; } }

.lx-tour__about { display: grid; gap: var(--tch-sp-1); }
.lx-tour__name { margin: 0; font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h4); line-height: var(--tch-lh-heading); }
.lx-tour__name a { color: var(--tch-ink); text-decoration: none; }
.lx-tour__name a:hover { color: var(--tch-teal); text-decoration: underline; }
.lx-tour__specs { margin: 0; font-size: var(--tch-fs-small); }
.lx-tour__pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tch-sp-1) var(--tch-sp-3); margin: 0; padding: var(--tch-sp-3) var(--tch-sp-4); border-radius: var(--tch-r-md); background: var(--tch-alt); border: var(--tch-bw-1) solid var(--tch-line-soft); transition: background var(--tch-dur-2) var(--tch-ease), border-color var(--tch-dur-2) var(--tch-ease); }
.lx-tour__pick span { font-size: var(--tch-fs-small); color: var(--tch-slate); font-weight: var(--tch-fw-medium); }
.lx-tour__pick b { color: var(--tch-muted); font-weight: var(--tch-fw-semibold); }
.lx-tour__pick.is-set { background: var(--tch-teal-tint); border-color: var(--tch-teal-line); }
.lx-tour__pick.is-set b { color: var(--tch-teal-ink); }
.no-js .lx-tour__pick { display: none; }
.lx-tour__perks { display: grid; gap: var(--tch-sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--tch-fs-small); color: var(--tch-text); }
.lx-tour__perks li { position: relative; padding-left: var(--tch-sp-5); }
.lx-tour__perks li::before { content: ""; position: absolute; left: 0.2rem; top: 0.4em; width: 0.55rem; height: 0.3rem; border-left: var(--tch-bw-2) solid var(--tch-teal); border-bottom: var(--tch-bw-2) solid var(--tch-teal); rotate: -45deg; }
@media (max-width: 959px) { .lx-tour__perks { display: none; } }

.lx-tour__head { display: grid; gap: var(--tch-sp-3); }
.lx-tour__head .tch-eyebrow { margin: 0; }
.lx-tour__lead { margin: 0; max-width: 44ch; font-size: var(--tch-fs-lead); line-height: var(--tch-lh-body); color: var(--tch-text); }

/* Progress: three segments under three labels; the current one in the gradient. */
.lx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tch-sp-2); margin: 0; padding: 0; list-style: none; }
.lx-steps li { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--tch-sp-2); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-muted); }
.lx-steps li span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: var(--tch-sp-2); border-radius: var(--tch-r-pill); border: var(--tch-bw-15) solid var(--tch-line); font-size: var(--tch-fs-small); line-height: 1; vertical-align: middle; }
.lx-steps li::after { content: ""; order: -1; flex: 0 0 100%; height: 0.25rem; border-radius: var(--tch-r-pill); background: var(--tch-line); }
.lx-steps li[aria-current="step"] { color: var(--tch-ink); }
.lx-steps li[aria-current="step"] span { border-color: var(--tch-teal); color: var(--tch-teal); }
.lx-steps li[aria-current="step"]::after { background: var(--tch-grad); }
.lx-steps li.is-done { color: var(--tch-teal-ink); }
.lx-steps li.is-done span { border-color: var(--tch-teal); background: var(--tch-teal); color: var(--tch-teal-on); }
.lx-steps li.is-done::after { background: var(--tch-teal); }

/* The form card and its steps. With the script one step shows at a time. */
.lx-tourform { gap: 0; padding: var(--tch-sp-5); background: var(--tch-card); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-xl); box-shadow: var(--tch-shadow-2); }
@media (min-width: 640px) { .lx-tourform { padding: var(--tch-sp-6); } }
.lx-tstep { display: grid; gap: var(--tch-sp-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.lx-tstep + .lx-tstep { margin-top: var(--tch-sp-6); padding-top: var(--tch-sp-6); border-top: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-tourform.is-stepped .lx-tstep:not(.is-current) { display: none; }
.lx-tourform.is-stepped .lx-tstep { margin-top: 0; padding-top: 0; border-top: 0; }
.lx-tourform.is-stepped .lx-tstep.is-current { animation: lx-step-in var(--tch-dur-3) var(--tch-ease); }
@keyframes lx-step-in { from { opacity: 0; translate: 0 var(--tch-reveal-shift); } to { opacity: 1; translate: 0 0; } }
.lx-tstep__title { display: block; float: left; width: 100%; margin: 0 0 var(--tch-sp-1); padding: 0; font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-tstep__title:focus { outline: none; }
.lx-tstep__title + * { clear: left; }
.lx-tstep__num { display: block; margin-bottom: var(--tch-sp-1); font-family: var(--tch-font-body); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tch-teal); }
.lx-tstep__title + .lx-tstep__sub { margin-top: var(--tch-sp-1); }
.lx-tstep__sub { margin: 0; color: var(--tch-slate); }
.lx-tstep__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tch-sp-3); margin-top: var(--tch-sp-2); }
.lx-tstep__nav .tch-btn { margin-left: auto; min-width: 12rem; }
@media (max-width: 479px) { .lx-tstep__nav .tch-btn { flex: 1 1 100%; order: -1; } .lx-back { margin-inline: auto; } }
.lx-back { display: inline-flex; align-items: center; gap: var(--tch-sp-2); min-height: var(--tch-tap); padding: 0 var(--tch-sp-2); border: 0; background: none; color: var(--tch-slate); font: inherit; font-weight: var(--tch-fw-semibold); cursor: pointer; }
.lx-back::before { content: ""; width: 0.45rem; height: 0.45rem; border-left: var(--tch-bw-2) solid currentColor; border-bottom: var(--tch-bw-2) solid currentColor; rotate: 45deg; }
.lx-back:hover { color: var(--tch-teal); }
.lx-note { margin: 0; padding: var(--tch-sp-3) var(--tch-sp-4); border-radius: var(--tch-r-sm); background: var(--tch-gold-wash); color: var(--tch-ink); font-size: var(--tch-fs-small); }
.lx-label { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-ink); }

/* Step 1: a row of days over each day's three windows. */
.lx-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(4.25rem, 1fr); gap: var(--tch-sp-2); overflow-x: auto; padding: var(--tch-bw-2); margin: calc(-1 * var(--tch-bw-2)); scrollbar-width: none; scroll-snap-type: x proximity; }
.lx-days::-webkit-scrollbar { display: none; }
.lx-day { display: grid; justify-items: center; gap: var(--tch-sp-1); padding: var(--tch-sp-3) var(--tch-sp-2); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-md); background: var(--tch-card); color: var(--tch-slate); font: inherit; font-size: var(--tch-fs-small); line-height: 1.1; cursor: pointer; scroll-snap-align: start; transition: border-color var(--tch-dur-1) var(--tch-ease), background var(--tch-dur-1) var(--tch-ease); }
.lx-day b { font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); color: var(--tch-ink); }
.lx-day:hover:not(:disabled) { border-color: var(--tch-teal-line); background: var(--tch-teal-tint); }
.lx-day[aria-pressed="true"] { border-color: var(--tch-teal); background: var(--tch-teal-tint); color: var(--tch-teal-ink); box-shadow: inset 0 0 0 var(--tch-bw-1) var(--tch-teal); }
.lx-day[aria-pressed="true"] b { color: var(--tch-teal-ink); }
.lx-day:disabled { cursor: not-allowed; background: var(--tch-alt); border-color: var(--tch-line-soft); color: var(--tch-muted); }
.lx-day:disabled b { color: var(--tch-muted); text-decoration: line-through; text-decoration-thickness: var(--tch-bw-1); }
@media (max-width: 559px) { .lx-days { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.lx-day:focus-visible { outline: var(--tch-bw-2) solid var(--tch-teal); outline-offset: var(--tch-bw-1); }

.lx-slots { display: grid; gap: var(--tch-sp-2); }
.lx-slots[hidden] { display: none; }
@media (min-width: 560px) { .lx-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lx-slots__day { grid-column: 1 / -1; } }
.lx-slots__day { margin: var(--tch-sp-2) 0 0; font-weight: var(--tch-fw-semibold); color: var(--tch-ink); }
.has-days .lx-slots__day { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lx-slot { position: relative; display: grid; gap: var(--tch-sp-1); padding: var(--tch-sp-4); border: var(--tch-bw-15) solid var(--tch-line); border-radius: var(--tch-r-md); background: var(--tch-card); cursor: pointer; transition: border-color var(--tch-dur-1) var(--tch-ease), background var(--tch-dur-1) var(--tch-ease); }
.lx-slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.lx-slot__name { font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-slate); }
.lx-slot__hours { font-size: var(--tch-fs-lead); font-weight: var(--tch-fw-semibold); color: var(--tch-ink); font-variant-numeric: tabular-nums; }
.lx-slot__why { font-size: var(--tch-fs-small); color: var(--tch-muted); }
.lx-slot:hover:not(.is-off) { border-color: var(--tch-teal-line); background: var(--tch-teal-tint); }
.lx-slot:has(input:checked) { border-color: var(--tch-teal); background: var(--tch-teal-tint); box-shadow: inset 0 0 0 var(--tch-bw-1) var(--tch-teal); }
.lx-slot:has(input:checked) .lx-slot__hours, .lx-slot:has(input:checked) .lx-slot__name { color: var(--tch-teal-ink); }
.lx-slot:has(input:checked)::after { content: ""; position: absolute; top: var(--tch-sp-4); right: var(--tch-sp-4); width: 0.55rem; height: 0.3rem; border-left: var(--tch-bw-2) solid var(--tch-teal); border-bottom: var(--tch-bw-2) solid var(--tch-teal); rotate: -45deg; }
.lx-slot:has(input:focus-visible) { outline: var(--tch-bw-2) solid var(--tch-teal); outline-offset: var(--tch-bw-1); }
.lx-slot.is-off { cursor: not-allowed; background: var(--tch-alt); border-color: var(--tch-line-soft); }
.lx-slot.is-off .lx-slot__hours, .lx-slot.is-off .lx-slot__name { color: var(--tch-muted); }

/* Step 2: the agreement to texts, the way the old form had it. */
.lx-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tch-sp-3); align-items: start; font-size: var(--tch-fs-small); line-height: var(--tch-lh-body); color: var(--tch-slate); cursor: pointer; }
.lx-consent input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--tch-teal); cursor: pointer; }
.lx-consent a { color: var(--tch-ink); font-weight: var(--tch-fw-semibold); }

/* Step 3: the reason and the ID. The file box is the whole drop zone. */
.lx-tourform .tch-field select { font-size: var(--tch-fs-body); }
.lx-drop { position: relative; display: grid; justify-items: center; gap: var(--tch-sp-2); padding: var(--tch-sp-6) var(--tch-sp-4); border: var(--tch-bw-2) dashed var(--tch-teal-line); border-radius: var(--tch-r-lg); background: var(--tch-card); text-align: center; cursor: pointer; transition: background var(--tch-dur-1) var(--tch-ease), border-color var(--tch-dur-1) var(--tch-ease); }
.lx-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lx-drop:hover, .lx-drop.is-over { background: var(--tch-teal-tint); border-color: var(--tch-teal); }
.lx-drop:has(input:focus-visible) { outline: var(--tch-bw-2) solid var(--tch-teal); outline-offset: var(--tch-bw-1); }
.lx-drop.has-file { border-style: solid; border-color: var(--tch-teal); background: var(--tch-teal-tint); }
.lx-drop:has(input[aria-invalid="true"]) { border-color: var(--tch-red); background: var(--tch-red-tint); }
.lx-drop__icon { position: relative; width: 3rem; height: 2.1rem; border: var(--tch-bw-2) solid var(--tch-teal); border-radius: var(--tch-r-xs); }
.lx-drop__icon::before { content: ""; position: absolute; left: 0.35rem; top: 0.4rem; width: 0.75rem; height: 0.95rem; border-radius: var(--tch-r-xs); background: var(--tch-teal-line); }
.lx-drop__icon::after { content: ""; position: absolute; left: 1.4rem; right: 0.35rem; top: 0.55rem; height: 0.7rem; border-top: var(--tch-bw-2) solid var(--tch-teal-line); border-bottom: var(--tch-bw-2) solid var(--tch-teal-line); }
.lx-drop__cta { font-weight: var(--tch-fw-semibold); color: var(--tch-teal); overflow-wrap: anywhere; }
.lx-drop__help { font-size: var(--tch-fs-small); color: var(--tch-slate); }
.lx-drop__preview { max-width: 100%; max-height: 10rem; border-radius: var(--tch-r-sm); object-fit: contain; box-shadow: var(--tch-shadow-1); }
.lx-drop__preview[hidden] { display: none; }
.lx-private { display: flex; gap: var(--tch-sp-2); align-items: baseline; margin: 0; font-size: var(--tch-fs-small); color: var(--tch-slate); }
.lx-private__icon { position: relative; flex: none; width: 0.7rem; height: 0.55rem; margin-top: 0.3rem; border-radius: 0.15rem; background: var(--tch-teal); }
.lx-private__icon::before { content: ""; position: absolute; left: 0.12rem; right: 0.12rem; bottom: 100%; height: 0.35rem; border: var(--tch-bw-15) solid var(--tch-teal); border-bottom: 0; border-radius: 0.35rem 0.35rem 0 0; }
.lx-tour__expect { margin: 0; padding: var(--tch-sp-3) var(--tch-sp-4); border-radius: var(--tch-r-sm); background: var(--tch-teal-tint); color: var(--tch-teal-ink); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); }
.lx-tour__expect[hidden] { display: none; }
.lx-tourform .lx-fine { margin: 0; }
.lx-tourform[aria-busy="true"] button[type="submit"] { opacity: 0.7; pointer-events: none; }

/* What happens next: the canon's step numbers (a white circle, a gradient ring) on a
   gradient track, vertical at every width. */
.lx-tour__next { padding: var(--tch-sp-6); border-radius: var(--tch-r-xl); background: var(--tch-alt); }
.lx-tour__nexth { margin: 0 0 var(--tch-sp-5); font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); color: var(--tch-ink); }
.lx-tour__help { margin: var(--tch-sp-4) 0 0; font-size: var(--tch-fs-small); color: var(--tch-slate); }
.lx-next { position: relative; display: grid; gap: var(--tch-sp-5); margin: 0; padding: 0 0 0 calc(var(--tch-step-size) + var(--tch-sp-4)); list-style: none; counter-reset: step; }
.lx-next::before { content: ""; position: absolute; left: calc(var(--tch-step-size) / 2 - var(--tch-connector-h) / 2); top: calc(var(--tch-step-size) / 2); bottom: calc(var(--tch-step-size) / 2); width: var(--tch-connector-h); border-radius: var(--tch-r-pill); background: var(--tch-grad-v); }
.lx-next__step { position: relative; display: grid; gap: var(--tch-sp-1); min-height: var(--tch-step-size); align-content: center; }
.lx-next__step::before { counter-increment: step; content: counter(step); position: absolute; left: calc(-1 * var(--tch-step-size) - var(--tch-sp-4)); top: 0; display: grid; place-items: center; width: var(--tch-step-size); height: var(--tch-step-size); box-sizing: border-box; border: var(--tch-ring) solid transparent; border-radius: var(--tch-r-pill); background: linear-gradient(var(--tch-teal-on), var(--tch-teal-on)) padding-box, var(--tch-grad) border-box; color: var(--tch-teal); font-family: var(--tch-font-display); font-weight: var(--tch-fw-bold); line-height: 1; }
.lx-next__step.is-done::before { background: linear-gradient(var(--tch-teal), var(--tch-teal)) padding-box, var(--tch-grad) border-box; color: var(--tch-teal-on); }
.lx-next__step b { color: var(--tch-ink); font-size: var(--tch-fs-h4); }
.lx-next__step.is-done b { color: var(--tch-teal-ink); }
.lx-next__step p { margin: 0; color: var(--tch-text); line-height: var(--tch-lh-body); }

/* After the request: the home's photo beside the window they asked for. */
.lx-sent { display: grid; gap: var(--tch-sp-6); padding-block: var(--tch-sp-6) var(--tch-section-y); }
@media (min-width: 960px) { .lx-sent { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tch-sp-8); align-items: center; padding-top: var(--tch-sp-8); } }
.lx-sent__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--tch-r-xl); background: var(--tch-before); }
@media (min-width: 960px) { .lx-sent__photo { aspect-ratio: 4 / 5; } }
.lx-sent__photo img { width: 100%; height: 100%; object-fit: cover; }
.lx-sent__home { position: absolute; left: var(--tch-sp-4); bottom: var(--tch-sp-4); right: var(--tch-sp-4); display: grid; gap: var(--tch-sp-1); max-width: 22rem; padding: var(--tch-sp-3) var(--tch-sp-4); border-radius: var(--tch-r-md); background: var(--tch-card); box-shadow: var(--tch-shadow-3); }
.lx-sent__home b { color: var(--tch-ink); line-height: var(--tch-lh-heading); }
.lx-sent__home span { font-size: var(--tch-fs-small); color: var(--tch-slate); }
.lx-sent__body { display: grid; gap: var(--tch-sp-5); justify-items: start; }
.lx-sent__body .lx-next { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lx-tourform.is-stepped .lx-tstep.is-current { animation: none; }
}

/* -------------------------------------------------- /all-properties, /all-properties-list
   Webflow's two browse pages, from the canon's own parts: .tch-metros, .tch-markets,
   .tch-subnav, .tch-table and the search's cards. Only spacing is added here. */
.lx-browse__hero .lx-crumbs { margin-bottom: var(--tch-sp-5); }
.lx-browse__hero .tch-head { margin-bottom: var(--tch-sp-6); }
.lx-browse__h1 { margin: 0; font-family: var(--tch-font-display); font-size: var(--tch-fs-h1-article); line-height: var(--tch-lh-display); letter-spacing: var(--tch-ls-display); color: var(--tch-ink); text-wrap: balance; }
.lx-browse__h2 { margin: 0 0 var(--tch-sp-5); font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-browse__metros { margin-top: 0; }
.lx-browse__markets .tch-market a { font-weight: var(--tch-fw-semibold); text-decoration: none; }
.lx-browse__markets .tch-market a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.lx-browse__metro { scroll-margin-top: calc(var(--tch-sp-8) + var(--tch-sp-5)); }   /* clear the sticky nav */
.lx-browse__metro + .lx-browse__metro { border-top: var(--tch-bw-1) solid var(--tch-line-soft); }
.lx-browse__tabs { display: flex; flex-wrap: wrap; gap: var(--tch-sp-2); justify-content: flex-start; }
.lx-browse__tabs a { display: inline-flex; align-items: center; min-height: var(--tch-tap); padding: 0 var(--tch-sp-4); border: var(--tch-bw-1) solid var(--tch-line); border-radius: var(--tch-r-pill); background: var(--tch-card); font-weight: var(--tch-fw-semibold); text-decoration: none; }
.lx-browse__tabs a:hover { border-color: var(--tch-teal); }
.lx-browse__n { display: inline-block; margin-left: var(--tch-sp-2); padding: 0 var(--tch-sp-2); border-radius: var(--tch-r-pill); background: var(--tch-chip); font-family: var(--tch-font-body); font-size: var(--tch-fs-small); font-weight: var(--tch-fw-semibold); color: var(--tch-slate); vertical-align: middle; }
.lx-browse__table th a { font-weight: var(--tch-fw-semibold); text-decoration: none; }
.lx-browse__table th a:hover { text-decoration: underline; }

/* -------------------------------------------------- /location/<slug>, /metro/<slug>
   The canon's city page (kit/city.html): .tch-cityhero, .tch-areas, .tch-uses, .tch-qa,
   with the search's cards. Only what the kit leaves to the page is added here. */
.lx-area .tch-photoband .tch-eyebrow { margin: 0 0 calc(-1 * var(--tch-sp-3)); color: var(--tch-on-photo); }
.lx-area .tch-photoband .tch-lead { max-width: 60ch; }
.lx-area__note { margin: calc(-1 * var(--tch-sp-4)) 0 var(--tch-sp-6); color: var(--tch-slate); max-width: 60ch; }
.lx-area__empty { margin-top: 0; }
.lx-area__empty h2 { font-family: var(--tch-font-display); font-size: var(--tch-fs-h3); line-height: var(--tch-lh-heading); color: var(--tch-ink); }
.lx-area__nearby { margin-top: var(--tch-sp-8); }
.lx-area__zips { margin-top: var(--tch-sp-5); font-size: var(--tch-fs-small); color: var(--tch-muted); overflow-wrap: anywhere; }
.lx-area__search { max-width: none; }
.lx-area .tch-head a { font-weight: var(--tch-fw-semibold); }
.lx-area .tch-cityhero { padding-bottom: 0; }
.lx-area .tch-cityhero + .tch-section { padding-top: var(--tch-sp-8); }