/* ==========================================================================
   Find Your Home (page-find-your-home.php) — the search tool.

   No hero: the filters lead the page. The view heading + count live in the results
   column (they change with the tab), beside a single Map/List toggle. Results use the
   SAME .home-card the homepage uses (components.css); in the map rail the card flips
   vertical so it doesn't squish. find-your-home.js hides non-matching cards. Tokens only.
   ========================================================================== */

/* ---- Control bar: just the filters now (tabs moved into the results column). Matches the
   header surface — no tint band, only a hairline underneath to separate it. ---- */
.fyh-controls { background: var(--hdc-surface); border-bottom: 1px solid var(--hdc-line); }
/* Full-bleed page: content spans the viewport with a gutter, not the narrow container. */
.fyh-bleed { padding-inline: clamp(var(--hdc-space-4), 3vw, var(--hdc-space-8)); }
.fyh-controls .fyh-bleed { padding-block: var(--hdc-space-5); }

.fyh-tabs { display: flex; flex-wrap: wrap; gap: var(--hdc-space-2); }
/* Tabs now lead the results column (top band is just filters). */
.fyh-results .fyh-tabs { margin-bottom: var(--hdc-space-5); }
.fyh-tab { display: inline-flex; align-items: center; gap: var(--hdc-space-2);
  /* space-2 vertical to match the .chip / .plan-chip pill standard (components.css);
     space-3 here read as over-tall against every other pill on the site. */
  padding: var(--hdc-space-2) var(--hdc-space-5); border-radius: var(--hdc-radius-pill);
  border: 1px solid color-mix(in srgb, var(--hdc-color-primary) 40%, transparent); background: var(--hdc-surface);
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-400); font-weight: var(--hdc-fw-medium);
  color: var(--hdc-color-heading); text-decoration: none;
  transition: color var(--hdc-dur) var(--hdc-ease), background var(--hdc-dur) var(--hdc-ease), border-color var(--hdc-dur) var(--hdc-ease); }
.fyh-tab:hover { border-color: var(--hdc-color-primary); color: var(--hdc-color-primary); }
.fyh-tab.is-active { background: var(--hdc-color-primary); border-color: var(--hdc-color-primary); color: var(--hdc-color-on-dark); }
.fyh-tab__n { font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi);
  color: var(--hdc-color-muted); }
.fyh-tab.is-active .fyh-tab__n { color: var(--hdc-color-on-dark); opacity: 0.85; }
/* Counts are live against the active filters, so a tab can legitimately reach 0.
   Recede it rather than disable it — the tab still has to be reachable, because
   switching to it DROPS the filters it does not support and may well refill it. */
.fyh-tab.is-empty:not(.is-active) { opacity: 0.5; }

/* ---- Filters: our own dropdowns (trigger + radio panel) + a price slider.
   NOT native <select>s, so the OPEN panel is our surface/type/radios, not the OS list. ---- */
.fyh-filters { display: flex; flex-wrap: wrap; gap: var(--hdc-space-4) var(--hdc-space-5); align-items: flex-end; margin-top: 0; }
.fyh-field { display: flex; flex-direction: column; gap: var(--hdc-space-2); }
/* A per-view control that doesn't apply is [hidden] by JS; flex would otherwise beat it. */
.fyh-field[hidden] { display: none; }
.fyh-field__label { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi);
  letter-spacing: var(--hdc-tracking-eyebrow); text-transform: uppercase; color: var(--hdc-color-muted); }

/* Trigger — looks like the resting field; owns the value + chevron. */
.fyh-dd { position: relative; }
.fyh-dd__trigger { --_bg: var(--hdc-surface); --_fg: var(--hdc-color-heading);
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--hdc-space-3);
  min-width: 9.75rem; padding: var(--hdc-space-3) var(--hdc-space-4);
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-400); font-weight: var(--hdc-fw-medium);
  color: var(--hdc-color-heading); text-align: left;
  background: var(--hdc-surface); border: 1px solid var(--hdc-line-strong); border-radius: var(--hdc-radius-sm);
  cursor: pointer; transition: border-color var(--hdc-dur) var(--hdc-ease), box-shadow var(--hdc-dur) var(--hdc-ease); }
.fyh-dd__trigger:hover { border-color: var(--hdc-color-primary); }
.fyh-dd__trigger:focus-visible { outline: none; border-color: var(--hdc-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdc-color-primary) 22%, transparent); }
/* is-set routes through --_bg/--_fg so GP's button repaint-on-hover keeps the tint. */
.fyh-dd.is-set .fyh-dd__trigger { --_bg: color-mix(in srgb, var(--hdc-color-primary) 6%, var(--hdc-surface)); --_fg: var(--hdc-color-primary);
  border-color: var(--hdc-color-primary); color: var(--hdc-color-primary); background: var(--_bg); }
.fyh-dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyh-dd__chev { flex: none; color: var(--hdc-color-muted); transition: transform var(--hdc-dur) var(--hdc-ease); }
.fyh-dd.is-open .fyh-dd__chev { transform: rotate(180deg); }
.fyh-dd.is-set .fyh-dd__chev { color: var(--hdc-color-primary); }

/* Panel — the popover that replaces the native option list. */
.fyh-dd__panel { position: absolute; top: calc(100% + var(--hdc-space-2)); left: 0; z-index: 40;
  min-width: 100%; padding: var(--hdc-space-2);
  background: var(--hdc-surface); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md);
  box-shadow: var(--hdc-shadow-2, var(--hdc-shadow-1)); }
.fyh-dd__panel[hidden] { display: none; }
.fyh-dd__opt { display: flex; align-items: center; gap: var(--hdc-space-3);
  padding: var(--hdc-space-3) var(--hdc-space-3); border-radius: var(--hdc-radius-sm);
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-400); color: var(--hdc-color-heading);
  white-space: nowrap; cursor: pointer; transition: background var(--hdc-dur) var(--hdc-ease); }
.fyh-dd__opt:hover { background: var(--hdc-surface-tint); }
.fyh-dd__opt input { accent-color: var(--hdc-color-primary); width: 1rem; height: 1rem; margin: 0; cursor: pointer; }
.fyh-dd__opt:has(input:checked) { color: var(--hdc-color-primary); font-weight: var(--hdc-fw-medium); }

/* Price slider panel. */
.fyh-dd__panel--price { min-width: 17rem; padding: var(--hdc-space-4) var(--hdc-space-4) var(--hdc-space-5); }
.fyh-range__out { display: flex; align-items: baseline; gap: var(--hdc-space-2);
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-400); font-weight: var(--hdc-fw-medium); color: var(--hdc-color-heading); }
.fyh-range__dash { color: var(--hdc-color-muted); }
.fyh-range__slider { position: relative; height: 24px; margin-top: var(--hdc-space-4); }
.fyh-range__rail { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%);
  background: var(--hdc-line-strong); border-radius: var(--hdc-radius-pill); }
.fyh-range__fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  background: var(--hdc-color-primary); border-radius: var(--hdc-radius-pill); }
.fyh-range__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.fyh-range__input:focus-visible { outline: none; }
.fyh-range__input::-webkit-slider-runnable-track { background: transparent; border: 0; }
.fyh-range__input::-moz-range-track { background: transparent; border: 0; }
.fyh-range__input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--hdc-surface); border: 2px solid var(--hdc-color-primary); box-shadow: var(--hdc-shadow-1); cursor: pointer; }
.fyh-range__input::-moz-range-thumb { pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--hdc-surface); border: 2px solid var(--hdc-color-primary); box-shadow: var(--hdc-shadow-1); cursor: pointer; }
.fyh-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdc-color-primary) 25%, transparent); }
.fyh-range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdc-color-primary) 25%, transparent); }

.fyh-clear { --_bg: transparent; --_fg: var(--hdc-color-primary); align-self: center;
  border: 0; padding: var(--hdc-space-3) 0; font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium);
  font-size: var(--hdc-fs-300); color: var(--hdc-color-primary); cursor: pointer; }
.fyh-clear:hover { text-decoration: underline; }

/* ---- Results column: rail header (view title + count) ---- */
.fyh-rail-head { margin-bottom: var(--hdc-space-5); }
.fyh-rail-title { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular);
  font-size: var(--hdc-fs-600); line-height: var(--hdc-lh-snug); color: var(--hdc-color-heading); margin: 0; }
/* This is the answer to what someone typed, arriving on a page that otherwise
   just shows the whole inventory. Cramped into a count-sized line it read as a
   caption on the toolbar; given room it reads as the page addressing them. */
.fyh-qnote {
  /* Top margin as well as bottom. It sits directly under the view heading, and
     with none it read as part of that heading rather than as a reply to what was
     typed. Matched top and bottom so it is a block in its own right. */
  margin: var(--hdc-space-5) 0;
  padding: var(--hdc-space-5) var(--hdc-space-6);
  background: var(--hdc-color-primary-wash);
  border-left: 4px solid var(--hdc-color-primary);
  border-radius: var(--hdc-radius-sm);
  font-family: var(--hdc-font-ui);
  font-size: var(--hdc-fs-400);
  line-height: var(--hdc-lh-snug);
  color: var(--hdc-color-heading);
  max-width: 62ch;
}
.fyh-qnote[hidden] { display: none; }
.fyh-qnote__lead, .fyh-qnote__sub { display: block; }
.fyh-qnote__sub { font-weight: var(--hdc-fw-regular); margin-top: 3px; }

.fyh-count { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); color: var(--hdc-color-muted); margin: var(--hdc-space-2) 0 0; }

/* Map/List toggle. One button; CSS shows the face for the view you'll switch TO ("Map view" in
   list, "List view" in map). Routes color through --_bg/--_fg for GP. Floated over the map on
   desktop (--float); on mobile a copy lives in the filter bar (see the @media block). */
.fyh-modebtn { --_bg: var(--hdc-color-primary); --_fg: var(--hdc-color-on-dark); flex: none;
  padding: var(--hdc-space-3) var(--hdc-space-5); border: 1px solid var(--hdc-color-primary); border-radius: var(--hdc-radius-sm);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-semi);
  transition: background var(--hdc-dur) var(--hdc-ease), border-color var(--hdc-dur) var(--hdc-ease); }
.fyh-modebtn:hover { --_bg: var(--hdc-color-primary-deep); border-color: var(--hdc-color-primary-deep); }
.fyh-modebtn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdc-color-primary) 30%, transparent); }
.fyh-modebtn__face { display: inline-flex; align-items: center; justify-content: center; gap: var(--hdc-space-2); }
.fyh-modebtn__face--list { display: none; }
.fyh.is-map .fyh-modebtn__face--map { display: none; }
.fyh.is-map .fyh-modebtn__face--list { display: inline-flex; }

/* Desktop: float the toggle over the split's top-right corner (over the map in map mode). */
.fyh-modebtn--float { position: absolute; top: var(--hdc-space-4); right: var(--hdc-space-4); z-index: 6;
  box-shadow: var(--hdc-shadow-2, 0 4px 16px rgba(0, 0, 0, 0.18)); }

/* Mobile-only bar: a "Filters" button (opens the filter sheet) + the view toggle. Hidden on
   desktop; the @media block below turns it on and turns the inline filter row into a sheet. */
.fyh-mobilebar { display: none; }
.fyh-mobilebar__btn { --_bg: var(--hdc-surface); --_fg: var(--hdc-color-heading);
  display: inline-flex; align-items: center; gap: var(--hdc-space-2);
  padding: var(--hdc-space-3) var(--hdc-space-4); border: 1px solid var(--hdc-line-strong); border-radius: var(--hdc-radius-sm);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-medium); }
.fyh-mobilebar__btn:hover { --_fg: var(--hdc-color-primary); border-color: var(--hdc-color-primary); }
.fyh-mobilebar__btn svg { flex: none; }
.fyh-mobilebar__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem;
  padding: 0 var(--hdc-space-2); border-radius: var(--hdc-radius-pill); background: var(--hdc-color-primary);
  color: var(--hdc-color-on-dark); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); }
.fyh-mobilebar__n[hidden] { display: none; }
/* Filter-sheet chrome — only rendered inside the sheet (turned on in the @media block). */
.fyh-sheet-head, .fyh-sheet-done { display: none; }

/* .home-grid is display:grid, so [hidden] alone can't hide it when empty. */
.fyh-grid[hidden] { display: none; }

/* Community cards have no bed/bath spec strip — this one line ("5 plans · 5 move-in
   ready") sits where hdc_speclist() would, just above the CTA. */
.home-card__note { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300);
  color: var(--hdc-color-muted); margin: var(--hdc-space-3) 0 0; }

/* ---- States: filter-empty vs. zero-inventory (Pass C dresses --none) ---- */
.fyh-state { text-align: center; padding: var(--hdc-space-9) 0; }
.fyh-state__h { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-600); color: var(--hdc-color-heading); margin: 0; }
.fyh-state__p { color: var(--hdc-color-muted); margin: var(--hdc-space-3) 0 0; }
.fyh-state__p a { color: var(--hdc-color-primary); }
.fyh-state__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--hdc-space-4) var(--hdc-space-5); margin-top: var(--hdc-space-6); }
.fyh-state__link { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300);
  color: var(--hdc-color-primary); text-decoration: none; }
.fyh-state__link:hover { text-decoration: underline; }

/* ---- List / Map split (full-bleed, 50/50) ----
   Results + map are siblings in .fyh-split. Default (and no-JS) is LIST: block flow, full-width
   grid, map hidden. JS adds .is-map to <main.fyh> for the split (Map is the desktop default).
   The map is click-to-load (Phase 1). The .fyh-modebtn--float toggle floats over the map. */
.fyh-map { display: none; position: relative; overflow: hidden; background: var(--hdc-surface-tint); }

/* <main> is already full-width, so the split just fills it (no 100vw breakout — that overflows
   by the scrollbar width and causes a horizontal scroll). position:relative anchors the float toggle. */
.fyh-split { position: relative; }
/* Match the header/filter-bar surface so the tool reads as one color on every breakpoint
   (the site body is a slightly warmer cream that was showing through the transparent results). */
.fyh-body { padding: 0; background: var(--hdc-surface); }

.fyh.is-map .fyh-split { display: grid; grid-template-columns: 50% 50%; gap: 0;
  height: min(82vh, 900px); min-height: 520px; align-items: stretch; }
/* No overscroll-behavior:contain — the rail should chain to the page once it's scrolled to its
   end (or has nothing to scroll), so hovering the left column never traps the wheel. */
.fyh.is-map .fyh-results { height: 100%; overflow-y: auto;
  padding: var(--hdc-space-6) clamp(var(--hdc-space-4), 3vw, var(--hdc-space-8));
  border-right: 1px solid var(--hdc-line); background: var(--hdc-surface); }
.fyh.is-map .fyh-rail-head { margin-bottom: var(--hdc-space-5); }
.fyh.is-map .fyh-map { display: block; height: 100%; } /* full-bleed: fills its column, no frame */

/* Rail cards stay the shared HORIZONTAL .home-card, one per row — the 50% rail gives the body
   plenty of room, so no squish and no wrapped CTA. */
.fyh.is-map .fyh-results .fyh-grid { grid-template-columns: 1fr; gap: var(--hdc-space-5); }

/* List mode is full-bleed too — give the grid a gutter so the cards aren't edge-cramped. */
.fyh:not(.is-map) .fyh-results { padding: var(--hdc-space-6) clamp(var(--hdc-space-4), 3vw, var(--hdc-space-8)) var(--hdc-space-8); }

.fyh-map__canvas { position: absolute; inset: 0; }
.fyh-map__canvas[hidden] { display: none; }
/* Backdrop and scrim come from .mapgate in components.css, shared with the
   community area map so the two gates cannot drift apart again. */
.fyh-map__placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: var(--hdc-space-6); }
.fyh-map__placeholder[hidden] { display: none; }
.fyh-map__placeholder > div { max-width: 360px; display: grid; justify-items: center; gap: var(--hdc-space-4); }
.fyh-map__lead { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular);
  font-size: var(--hdc-fs-600); color: var(--hdc-color-heading); margin: 0; }
.fyh-map__hint { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); color: var(--hdc-color-muted); margin: 0; }
/* Only the auth-failure fallback still uses __note (lead + note, no button). */
.fyh-map__note { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); color: var(--hdc-color-muted);
  line-height: var(--hdc-lh-body); margin: 0; }

/* Phase 2: a card lit up because its map pin is hovered (and vice-versa). Mirrors :hover. */
.home-card.is-hot { border-color: var(--hdc-color-primary);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--hdc-color-primary) 18%, transparent); }
/* Marker InfoWindow body (Google wraps it in its own chrome; we only style the inner node). */
/* The info window is a small CARD — picture, name, where it is, and the way in —
   not a tooltip. Google supplies its own white bubble and padding, so this styles
   the contents only and lets that container be the frame. */
.fyh-map-pop { font-family: var(--hdc-font-ui); width: 200px; }
.fyh-map-pop__img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--hdc-radius-sm); margin-bottom: var(--hdc-space-3);
  background: var(--hdc-surface-tint);
}
.fyh-map-pop b { display: block; font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular);
  font-size: var(--hdc-fs-500); line-height: var(--hdc-lh-snug); color: var(--hdc-color-heading); }
.fyh-map-pop__body div { font-size: var(--hdc-fs-300); color: var(--hdc-color-muted); margin-top: 2px; }
.fyh-map-pop__cta {
  display: inline-block; margin-top: var(--hdc-space-3);
  font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-semi);
  color: var(--hdc-color-primary); text-decoration: underline; text-underline-offset: 3px;
}
.fyh-map-pop__cta:hover { color: var(--hdc-color-primary-deep); }

/* ---- Mobile (≤760px) ----
   Filters collapse into a sheet (opened from the compact bar); the Map/List toggle sits in that
   bar, not floating. List = full-width cards; Map = full-screen map + a swipeable card strip. */
@media (max-width: 760px) {
	.fyh-modebtn--float { display: none; }                /* desktop-only float toggle off */
	.fyh-mobilebar { display: flex; align-items: stretch; gap: var(--hdc-space-3); margin-top: 0; }
	.fyh-mobilebar__btn, .fyh-mobilebar .fyh-modebtn { flex: 1; justify-content: center; } /* Filters | Map split 50/50 */

	/* ---- Inline filter row → a bottom sheet, opened by the Filters button.
	   Same sheet in both list and map mode, and deliberately the SAME MOVE as the
	   floor plan viewer's mobile panes: rise, grab bar, drag down to dismiss,
	   blurred backdrop. Two sheets on one site should not behave like two
	   different ideas.

	   It is laid out at all times and moved out of view, rather than switched
	   with `display` — display cannot transition, and a panel that snaps into
	   existence reads as a page change instead of as a drawer. `visibility`
	   keeps it off the tab order while it is down; it flips instantly on the way
	   in and waits out the transition on the way out, which is what the two
	   different visibility delays below are for. */
	.fyh-filters {
		display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
		gap: var(--hdc-space-4); margin: 0;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
		max-height: 88vh; overflow-y: auto;
		padding: var(--hdc-space-6) var(--hdc-space-5) calc(var(--hdc-space-5) + env(safe-area-inset-bottom));
		background: var(--hdc-surface); border-radius: var(--hdc-radius-lg) var(--hdc-radius-lg) 0 0;
		box-shadow: var(--hdc-shadow-3);
		transform: translateY(100%); opacity: 0; visibility: hidden;
		transition: transform var(--hdc-dur) var(--hdc-ease),
			opacity var(--hdc-dur-fast) var(--hdc-ease),
			visibility 0s linear var(--hdc-dur);
	}
	.fyh.filters-open .fyh-filters {
		transform: translateY(0); opacity: 1; visibility: visible;
		transition: transform var(--hdc-dur) var(--hdc-ease),
			opacity var(--hdc-dur-fast) var(--hdc-ease),
			visibility 0s;
	}
	/* Following a finger has to be instant; the release turns the transition back
	   on so a short drag springs back rather than snapping. */
	.fyh-filters.is-dragging { transition: none; }

	/* Painted always at zero opacity: a pseudo-element brought into being by a
	   class cannot transition, it appears. Only the opacity changes. The blur
	   matches the viewer's — backdrop-filter is not universal, so the tint carries
	   the effect on its own where it is unsupported. */
	.fyh::before {
		content: ''; position: fixed; inset: 0; z-index: 99;
		background: color-mix(in srgb, var(--hdc-surface-ink) 28%, transparent);
		backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
		opacity: 0; pointer-events: none;
		transition: opacity var(--hdc-dur) var(--hdc-ease);
	}
	.fyh.filters-open::before { opacity: 1; pointer-events: auto; }
	.fyh-filters .fyh-field { width: 100%; }
	.fyh-filters .fyh-dd, .fyh-filters .fyh-dd__trigger { width: 100%; min-width: 0; }
	/* In the sheet, dropdown panels open inline (accordion) instead of as floating popovers. */
	.fyh-filters .fyh-dd__panel { position: static; border: 0; box-shadow: none; padding: 0; margin-top: var(--hdc-space-2); }
	.fyh-filters .fyh-dd__panel--price { min-width: 0; }
	/* ---- the sheet's grab bar ----
	   A sheet that can be dragged has to LOOK draggable, and the bar is the
	   convention people already know. Drawn rather than marked up: it is not
	   content. See the pointer handling in find-your-home.js. */
	.fyh-sheet-head {
		display: flex; align-items: center; justify-content: space-between;
		position: relative; padding-top: var(--hdc-space-3);
		touch-action: none;          /* the drag belongs to the sheet, not the list */
		cursor: grab;
	}
	.fyh-filters.is-dragging .fyh-sheet-head { cursor: grabbing; }
	.fyh-sheet-head::before {
		content: ""; position: absolute; top: calc(var(--hdc-space-3) * -1); left: 50%;
		transform: translateX(-50%); width: 2.5rem; height: 4px;
		border-radius: var(--hdc-radius-pill); background: var(--hdc-line-strong);
	}
	.fyh-sheet-title { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-500); color: var(--hdc-color-heading); }
	/* 2.5rem, because a small target beside a 4px drag bar is the one people miss. */
	/* Carries .hdc-close (components.css) for the shared disc; this only sets the
	   colours for THIS surface and nudges it into the sheet's corner. */
	.fyh-sheet-x { --_bg: var(--hdc-surface-warm); --_fg: var(--hdc-color-heading);
		--hdc-close-size: 2.25rem;
		margin-right: calc(var(--hdc-space-2) * -1); }
	.fyh-sheet-x:hover { --_bg: var(--hdc-line); }
	.fyh-sheet-done { display: block; margin-top: var(--hdc-space-2); padding: var(--hdc-space-4);
		border: 0; border-radius: var(--hdc-radius-sm); background: var(--hdc-color-primary); color: var(--hdc-color-on-dark);
		font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-semi); font-size: var(--hdc-fs-400); cursor: pointer; }
	.fyh-clear { align-self: center; }

	/* Map mode: full-screen map with the pills floating on top and the inventory as a swipeable
	   strip along the bottom (from the mockup). The results overlay is click-through EXCEPT on the
	   pills + strip, so the map still pans between them. The Filters/List toggle is in the bar above. */
	.fyh.is-map .fyh-split { grid-template-columns: 1fr; height: min(74vh, 620px); }
	.fyh.is-map .fyh-map { position: absolute; inset: 0; height: 100%; border-right: 0; }
	/* z-index lifts the overlay ABOVE the map (which comes later in the DOM and would otherwise
	   paint over it, hiding the pills + strip). pointer-events:none lets map gestures pass through
	   everywhere except the pills and the strip (which re-enable them). */
	.fyh.is-map .fyh-results { position: absolute; inset: 0; z-index: 2; height: auto; padding: 0; border-right: 0;
		background: transparent; overflow: visible; pointer-events: none; }
	.fyh.is-map .fyh-rail-head { display: none; }
	/* Pills — a scrollable row floating over the top of the map (tap to switch tab without leaving map). */
	.fyh.is-map .fyh-results .fyh-tabs { display: flex; flex-wrap: nowrap; margin: 0; pointer-events: auto;
		position: absolute; top: var(--hdc-space-3); left: 0; right: 0; padding: 0 var(--hdc-space-3);
		overflow-x: auto; scrollbar-width: none; }
	.fyh.is-map .fyh-results .fyh-tabs::-webkit-scrollbar { display: none; }
	.fyh.is-map .fyh-results .fyh-tab { flex: none; box-shadow: var(--hdc-shadow-1); } /* lift off the map */
	/* Inventory — a swipeable strip pinned to the bottom, over the map. :not([hidden]) so this flex
	   display doesn't out-specify [hidden] and reveal the other grids. */
	.fyh.is-map .fyh-results .fyh-grid:not([hidden]) { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto;
		display: flex; grid-template-columns: none; gap: var(--hdc-space-3);
		padding: 0 var(--hdc-space-3) var(--hdc-space-3); overflow-x: auto;
		scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
	/* Strip card: a compact HORIZONTAL card — photo left, key info right — so it shows the image
	   yet stays short enough to keep the map visible. grid-template-columns resets the base 2-col
	   to a small photo + a roomy body (no cram); the photo sizes itself to the body's height. */
	.fyh.is-map .fyh-results .home-card { grid-template-columns: 40% 1fr; min-width: 86%; scroll-snap-align: center;
		box-shadow: var(--hdc-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.24)); }
	.fyh.is-map .fyh-results .home-card__media { display: block; min-height: 0; }
	.fyh.is-map .fyh-results .home-card__body { padding: var(--hdc-space-3) var(--hdc-space-4); justify-content: center; }
	.fyh.is-map .fyh-results .home-card__cta { display: none; } /* the whole card is the link */
	/* Minimal spec: beds + baths only, NO icons, forced to one line — the middle ground between the
	   bare glance card and the full icon strip. Community cards keep their one-line count (__note). */
	.fyh.is-map .fyh-results .home-card .spec-list { margin-top: var(--hdc-space-2); gap: 0 var(--hdc-space-4);
		font-size: var(--hdc-fs-200); flex-wrap: nowrap; }
	.fyh.is-map .fyh-results .home-card .spec-list .spec-ico { display: none; }
	.fyh.is-map .fyh-results .home-card .spec-list li:nth-child(n+3) { display: none; }
	.fyh.is-map .fyh-results .home-card__note { margin-top: var(--hdc-space-2); font-size: var(--hdc-fs-200); }
	.fyh.is-map .fyh-results .fyh-state { pointer-events: auto; } /* keep the 0-match recovery link tappable */

	/* List mode: full-width single-column cards with a comfortable gutter. */
	.fyh:not(.is-map) .fyh-results { padding: var(--hdc-space-5) clamp(var(--hdc-space-4), 4vw, var(--hdc-space-6)); }
}