/* ====================================================================
   rt-search-embed.css: the /homes/ search bar embedded in a content page
   (the city pages, four community pages and the Orange County hub), in place
   of the plain search box. Markup: inc/mls/lib-search-embed.php. Script:
   assets/js/rt-search.js (embed mode). Loaded only on a page that prints the
   bar (inc/mls/search-embed.php), never on /homes/, which has rt-search.css.

   THE LOOK IS THE /homes/ BAR'S (rt-search.css, "Filter bar", "Suggestions",
   "Fields", "Phone search sheet"), its rules repeated here under .rts-embed so a
   city page loads a few kilobytes instead of the whole results page sheet. A
   change to the bar's look there belongs here too.

   OWNER RULES THAT SHAPE THIS SHEET (do not undo):
   - No pill shapes: tags, chips, buttons and fields take 3-4px corners (the
     two panels, the dropdown and the popover, 6px; none of them a link).
   - Accent and navy fills carry white text in every state; never the accent
     (#2F5D62) as text on navy.
   - No max-width on paragraphs (there are none here but the hidden live region).

   SCOPE AND WEIGHT. Every rule names .rts-embed (RUCSS keeps the whole sheet
   through one safelist wildcard, '(.*)rts-embed(.*)', search-embed.php) at two
   classes or more, so it outranks the prose column's element rules
   (.rt-citypage__prose a, p: 0,1,1, and its a:hover, 0,2,1, which every link
   here answers with a :hover rule of its own) and GeneratePress's button,
   input and select rules; text inputs take three classes (input[type=text]:focus
   is 0,2,1). Fonts, weights and line heights are set on every control: the prose
   column is weight 300 and a theme rule sets labels, buttons and selects to 2rem.
   ==================================================================== */

.rts-embed {
	--rts-navy: var(--rt-navy, #0e2c4a);
	--rts-accent: var(--rt-accent, #2F5D62);
	--rts-teal: #3D7A80;
	--rts-ink: var(--rt-ink, #1A1A1A);
	--rts-link: #143F77;
	--rts-ivory: var(--rt-ivory, #F7F4EF);
	--rts-line: #e3ded5;
	--rts-field: #d6cfc3;
	--rts-mute: #5d5a55;
	--rts-grey: #736e66;
	--rts-tint: #eef3f2;
	--rts-sans: var(--rt-f-sans, 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif);
	position: relative; display: block; margin: 30px 0 34px; padding: 14px;
	background: #fff; border: 1px solid var(--rts-line); border-radius: 4px;
	box-shadow: 0 1px 2px rgba(14, 44, 74, .05);
	color: var(--rts-ink); font: 400 15px/1.55 var(--rts-sans); text-align: left;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.rts-embed *,
.rts-embed *::before,
.rts-embed *::after { box-sizing: border-box; }
.rts-embed [hidden] { display: none !important; }
/* The phone sheet's scroll lock, on html only (the /homes/ rule). */
html.rts-lock { overflow: hidden; }
.rts-embed .rts-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rts-embed .rts-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }

/* ---------- The bar: one row on a wide column, two below 1200px, a grid on phones ---------- */
.rts-embed .rts-embed__f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; }

.rts-embed .rts-omni {
	position: relative; flex: 1 1 320px; min-width: 260px; display: flex; align-items: center; gap: 8px;
	height: 42px; margin: 0; padding: 0 8px 0 14px; border: 1px solid var(--rts-field); border-radius: 4px;
	background: #fff; color: var(--rts-mute); cursor: text; transition: border-color .15s, box-shadow .15s;
}
.rts-embed .rts-omni:focus-within { border-color: var(--rts-navy); box-shadow: 0 0 0 3px rgba(47, 93, 98, .16); }
.rts-embed .rts-omni > .rts-i { width: 17px; height: 17px; }
.rts-embed .rts-omni .rts-omni__in,
.rts-embed .rts-omni .rts-omni__in:focus {
	flex: 1; min-width: 70px; width: auto; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none;
	font: 400 15px/1.2 var(--rts-sans); color: var(--rts-ink); text-overflow: ellipsis;
}
.rts-embed .rts-omni .rts-omni__in::placeholder { color: #8f8a82; opacity: 1; }
.rts-embed .rts-toks { display: flex; gap: 5px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.rts-embed .rts-tok {
	display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 3px 0 10px;
	border-radius: 4px; background: var(--rts-navy); color: #fff;
	font: 500 13px/1 var(--rts-sans); white-space: nowrap; min-width: 0; max-width: 170px; flex: 0 1 auto;
}
.rts-embed .rts-tok.is-extra { display: none; }
.rts-embed .rts-tok__t { overflow: hidden; text-overflow: ellipsis; }
.rts-embed .rts-tok__x,
.rts-embed .rts-tok__x:visited {
	flex: none; width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center;
	color: #fff; text-decoration: none;
}
.rts-embed .rts-tok__x:hover,
.rts-embed .rts-tok__x:focus,
.rts-embed .rts-tok__x:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; outline: 0; text-decoration: none; }
/* Keyboard focus on navy needs a ring that shows: white, inside the control (review 2026-10-04:
   the 20% white tint alone is far under the 3:1 a focus indicator needs). */
.rts-embed .rts-tok__x:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.rts-embed .rts-tok__x .rts-i { width: 12px; height: 12px; stroke-width: 2.2; }
.rts-embed .rts-tok--more { background: var(--rts-tint); color: var(--rts-accent); padding: 0 10px; flex: none; }
/* The "+N" carries a wide count and a phone count (rt_search_embed_toks()); with two tags it is
   a phone's only (.rts-tok--m). */
.rts-embed .rts-tok__mt,
.rts-embed .rts-tok--m { display: none; }
.rts-embed .rts-qx {
	flex: none; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 4px;
	background: transparent; color: var(--rts-mute); display: grid; place-items: center; cursor: pointer; box-shadow: none;
}
.rts-embed .rts-qx:hover,
.rts-embed .rts-qx:focus { background: var(--rts-ivory); color: var(--rts-ink); }
.rts-embed .rts-qx .rts-i { width: 14px; height: 14px; stroke-width: 2; }

/* The status switch, the two quick filters and More filters. */
.rts-embed .rts-ctl { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; margin: 0; }
.rts-embed .rts-seg {
	display: flex; flex: none; height: 42px; margin: 0; padding: 0; border: 1px solid var(--rts-field); border-radius: 4px;
	overflow: hidden; background: #fff;
}
.rts-embed .rts-seg a,
.rts-embed .rts-seg a:visited {
	display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; margin: 0;
	font: 500 14px/1 var(--rts-sans); color: var(--rts-ink); text-decoration: none;
	border-right: 1px solid var(--rts-field); white-space: nowrap; cursor: pointer; transition: background .15s;
}
.rts-embed .rts-seg a:last-child { border-right: 0; }
.rts-embed .rts-seg a:hover,
.rts-embed .rts-seg a:focus { background: var(--rts-ivory); color: var(--rts-ink); text-decoration: none; }
.rts-embed .rts-seg a:focus-visible { outline: 2px solid var(--rts-accent); outline-offset: -2px; }
.rts-embed .rts-seg a[aria-current="true"],
.rts-embed .rts-seg a[aria-current="true"]:hover,
.rts-embed .rts-seg a[aria-current="true"]:focus,
.rts-embed .rts-seg a[aria-pressed="true"],
.rts-embed .rts-seg a[aria-pressed="true"]:hover,
.rts-embed .rts-seg a[aria-pressed="true"]:focus { background: var(--rts-navy); color: #fff; }
.rts-embed .rts-seg--3 a { padding: 0 13px; }
/* The pressed status is navy: the accent outline vanishes on it, so a white inset ring. */
.rts-embed .rts-seg a[aria-current="true"]:focus-visible,
.rts-embed .rts-seg a[aria-pressed="true"]:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.rts-embed .rts-chip,
.rts-embed .rts-chip:visited {
	display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; margin: 0;
	border: 1px solid var(--rts-field); border-radius: 4px; background: #fff;
	font: 500 14px/1 var(--rts-sans); color: var(--rts-ink); text-decoration: none;
	white-space: nowrap; flex: none; cursor: pointer; transition: border-color .15s, background .15s;
}
.rts-embed .rts-chip:hover,
.rts-embed .rts-chip:focus { border-color: var(--rts-navy); color: var(--rts-ink); background: #fff; text-decoration: none; }
.rts-embed .rts-chip:focus-visible { outline: 2px solid var(--rts-accent); outline-offset: 1px; }
.rts-embed .rts-chip .rts-i { width: 14px; height: 14px; color: var(--rts-mute); }
.rts-embed .rts-chip.is-set,
.rts-embed .rts-chip.is-set:hover { border-color: var(--rts-accent); color: var(--rts-accent); background: #f2f6f5; }
.rts-embed .rts-chip.is-set .rts-i { color: var(--rts-accent); }
.rts-embed .rts-chip--more .rts-i { width: 16px; height: 16px; color: var(--rts-ink); }
.rts-embed .rts-chip--more .rts-mt { display: none; }

/* A quick filter is a <details>: its summary is the chip, its body the popover. */
.rts-embed .rts-qf { position: relative; flex: none; display: block; margin: 0; padding: 0; border: 0; }
.rts-embed .rts-qf > summary { list-style: none; -webkit-user-select: none; user-select: none; }
.rts-embed .rts-qf > summary::-webkit-details-marker { display: none; }
.rts-embed .rts-qf > summary::marker { content: ""; }
.rts-embed .rts-qf > summary.rts-chip { display: flex; line-height: 40px; }
.rts-embed .rts-qf > summary .rts-i { transition: transform .2s; }
.rts-embed .rts-qf[open] > summary.rts-chip { border-color: var(--rts-navy); box-shadow: 0 0 0 3px rgba(47, 93, 98, .12); }
.rts-embed .rts-qf[open] > summary .rts-i { transform: rotate(180deg); }

.rts-embed .rts-go {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; margin: 0;
	border: 0; border-radius: 4px; background: var(--rts-accent); color: #fff;
	font: 600 14.5px/1 var(--rts-sans); letter-spacing: .02em; text-transform: none;
	white-space: nowrap; flex: none; cursor: pointer; box-shadow: none; transition: background .15s;
}
.rts-embed .rts-go .rts-i { width: 16px; height: 16px; color: #fff; stroke-width: 2; }
.rts-embed .rts-go:hover,
.rts-embed .rts-go:focus,
.rts-embed .rts-go:active { background: var(--rts-teal); color: #fff; }
.rts-embed .rts-go:focus-visible { outline: 2px solid var(--rts-navy); outline-offset: 2px; }

/* ---------- The popovers ---------- */
.rts-embed .rts-pop {
	position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; width: 340px; max-width: calc(100vw - 32px);
	margin: 0; padding: 16px; background: #fff; border: 1px solid var(--rts-line); border-radius: 6px;
	box-shadow: 0 18px 40px rgba(14, 44, 74, .18); cursor: default;
}
.rts-embed .rts-pop__h { margin: 0 0 12px; font: 600 11px/1.3 var(--rts-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rts-accent); }
.rts-embed .rts-pop__f { margin: 14px 0 0; }
.rts-embed .rts-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	height: 44px; padding: 0 22px; margin: 0;
	border: 0; border-radius: 4px; background: var(--rts-accent); color: #fff;
	font: 600 14.5px/1 var(--rts-sans); letter-spacing: .02em; text-decoration: none; text-transform: none;
	white-space: nowrap; cursor: pointer; box-shadow: none; transition: background .15s;
}
.rts-embed .rts-btn:hover,
.rts-embed .rts-btn:focus,
.rts-embed .rts-btn:active { background: var(--rts-teal); color: #fff; text-decoration: none; }
.rts-embed .rts-btn:focus-visible { outline: 2px solid var(--rts-navy); outline-offset: 2px; }
.rts-embed .rts-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rts-embed .rts-fld { display: flex; flex-direction: column; gap: 6px; margin: 0; font: 500 12px/1.3 var(--rts-sans); color: var(--rts-mute); }
.rts-embed .rts-fld__l { display: block; }
.rts-embed .rts-fld .rts-sel {
	-webkit-appearance: none; appearance: none; width: 100%; max-width: none; margin: 0;
	height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--rts-field); border-radius: 4px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	font: 400 15px/1.2 var(--rts-sans); color: var(--rts-ink); cursor: pointer; box-shadow: none;
}
.rts-embed .rts-fld .rts-sel:focus { outline: 0; border-color: var(--rts-navy); box-shadow: 0 0 0 3px rgba(47, 93, 98, .16); color: var(--rts-ink); background-color: #fff; }
/* Segmented single choice (Beds): radios, so it posts with no script. */
.rts-embed .rts-segr { display: flex; margin: 0; border: 1px solid var(--rts-field); border-radius: 4px; overflow: hidden; background: #fff; }
.rts-embed .rts-segr__o { position: relative; flex: 1; min-width: 0; margin: 0; font: 500 13.5px/1 var(--rts-sans); cursor: pointer; }
.rts-embed .rts-segr__o + .rts-segr__o { border-left: 1px solid var(--rts-field); }
.rts-embed .rts-segr__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rts-embed .rts-segr__o span { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 4px; color: var(--rts-ink); white-space: nowrap; }
.rts-embed .rts-segr__o:hover span { background: var(--rts-ivory); }
.rts-embed .rts-segr__o input:checked + span { background: var(--rts-navy); color: #fff; }
.rts-embed .rts-segr__o input:focus-visible + span { outline: 2px solid var(--rts-accent); outline-offset: -2px; }
.rts-embed .rts-segr__o input:checked:focus-visible + span { outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- Suggestions (rows built by the script) ---------- */
.rts-embed .rts-dd {
	position: absolute; z-index: 60; top: calc(100% + 8px); left: -1px; width: 560px; max-width: calc(100vw - 48px);
	max-height: min(560px, 70vh); overflow: auto; overscroll-behavior: contain;
	background: #fff; border: 1px solid var(--rts-line); border-radius: 6px;
	box-shadow: 0 24px 54px -14px rgba(14, 44, 74, .34); padding: 6px 0; cursor: default;
}
.rts-embed .rts-sg { margin: 0; }
.rts-embed .rts-sg-h {
	margin: 0; padding: 12px 18px 5px;
	font: 600 10.5px/1.2 var(--rts-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rts-accent);
}
.rts-embed .rts-opt,
.rts-embed .rts-opt:visited {
	display: flex; align-items: center; gap: 13px; padding: 7px 18px; min-height: 52px; margin: 0;
	color: var(--rts-ink); text-decoration: none; cursor: pointer;
}
.rts-embed .rts-opt:hover,
.rts-embed .rts-opt:focus { color: var(--rts-ink); text-decoration: none; }
.rts-embed .rts-opt.is-on { background: var(--rts-tint); }
.rts-embed .rts-oi {
	flex: none; width: 40px; height: 40px; border-radius: 4px; background: var(--rts-ivory);
	border: 1px solid #ece7de; display: grid; place-items: center; color: var(--rts-navy);
}
.rts-embed .rts-oth { flex: none; width: 48px; height: 48px; max-width: none; margin: 0; border-radius: 4px; object-fit: cover; background: #e6e1d8; display: block; }
.rts-embed .rts-oth-x { flex: none; width: 48px; height: 48px; border-radius: 4px; background: #ebe6dd; display: grid; place-items: center; color: #a39d93; }
.rts-embed .rts-ot { min-width: 0; flex: 1; }
.rts-embed .rts-o1 { display: block; font: 400 15px/1.3 var(--rts-sans); color: var(--rts-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rts-embed .rts-o1 b,
.rts-embed .rts-omls b { font-weight: 600; color: var(--rts-ink); }
.rts-embed .rts-o2 { display: block; margin-top: 2px; font: 400 13px/1.3 var(--rts-sans); color: var(--rts-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rts-embed .rts-omls { flex: none; font: 400 12.5px/1.3 var(--rts-sans); color: var(--rts-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rts-embed .rts-opt--all {
	position: sticky; bottom: -6px; z-index: 1; min-height: 48px; margin: 6px 0 -6px;
	border-top: 1px solid var(--rts-line); background: #fff; color: var(--rts-link); font: 500 14.5px/1.3 var(--rts-sans);
}
.rts-embed .rts-opt--all:hover,
.rts-embed .rts-opt--all:focus { color: var(--rts-link); }
.rts-embed .rts-opt--all.is-on { background: var(--rts-tint); }
.rts-embed .rts-opt--all .rts-oi { width: 32px; height: 32px; background: transparent; border: 0; color: var(--rts-link); }
.rts-embed .rts-nores { margin: 0; padding: 14px 18px 8px; color: var(--rts-mute); font: 400 14px/1.4 var(--rts-sans); }

/* ---------- Phone search sheet ---------- */
.rts-embed .rts-ss { position: fixed; inset: 0; z-index: 1600; margin: 0; background: #fff; display: flex; flex-direction: column; }
.rts-embed .rts-ss__top {
	flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
	padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--rts-line); background: #fff;
}
.rts-embed .rts-ss__box {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 6px 0 13px;
	border: 1px solid var(--rts-navy); border-radius: 4px; box-shadow: 0 0 0 3px rgba(47, 93, 98, .14); color: var(--rts-mute);
}
.rts-embed .rts-ss__box .rts-ss__in,
.rts-embed .rts-ss__box .rts-ss__in:focus {
	flex: 1; min-width: 0; width: auto; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none;
	font: 400 16px/1.2 var(--rts-sans); color: var(--rts-ink);
}
.rts-embed .rts-ss__cancel {
	flex: none; margin: 0; border: 0; background: none; padding: 8px 0; box-shadow: none;
	font: 500 15px/1.2 var(--rts-sans); color: var(--rts-link); cursor: pointer;
}
.rts-embed .rts-ss__cancel:hover,
.rts-embed .rts-ss__cancel:focus { background: none; color: var(--rts-navy); }
.rts-embed .rts-ss__toks { flex: none; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 0; }
.rts-embed .rts-ss__toks .rts-tok { max-width: none; }
.rts-embed .rts-ss__list { flex: 1; overflow-y: auto; padding: 4px 0 24px; overscroll-behavior: contain; }
.rts-embed .rts-ss__list .rts-opt { padding: 8px 16px; }
.rts-embed .rts-ss__list .rts-sg-h { padding: 14px 16px 5px; }

/* ---------- Widths ---------- */
/* Below 1200px the column cannot hold one row: the box and Search, then the filters. */
@media (max-width: 1199px) {
	.rts-embed .rts-omni { order: 1; }
	.rts-embed .rts-go { order: 2; }
	.rts-embed .rts-ctl { order: 3; flex: 1 1 100%; flex-wrap: wrap; }
}

/* Phones: the /homes/ layout B grid (status and Filters, then Price and Beds), Search last. */
@media (max-width: 768px) {
	.rts-embed { margin: 24px 0 28px; padding: 12px; }
	.rts-embed .rts-embed__f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.rts-embed .rts-omni { height: 46px; min-width: 0; cursor: pointer; }
	.rts-embed .rts-omni .rts-omni__in { font-size: 16px; cursor: pointer; }
	/* One tag shows, whole (review 2026-10-04: two shrank to "Sh..." at 390px and a bare box at
	   320px); "+N" counts the rest. The read-only box opens the sheet, which lists them all. */
	.rts-embed .rts-tok { max-width: 100%; }
	.rts-embed .rts-omni .rts-tok:not(.rts-tok--more) ~ .rts-tok:not(.rts-tok--more) { display: none; }
	.rts-embed .rts-tok--m { display: inline-flex; }
	.rts-embed .rts-tok__dk { display: none; }
	.rts-embed .rts-tok__mt { display: inline; }
	.rts-embed .rts-dd { display: none !important; }
	.rts-embed .rts-ctl {
		position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: 44px; gap: 8px;
	}
	/* The border moves from the switch onto its links, so each is a full 44px target. */
	.rts-embed .rts-seg { grid-column: 1 / span 8; grid-row: 1; height: 44px; min-width: 0; border: 0; background: transparent; overflow: visible; }
	.rts-embed .rts-seg a,
	.rts-embed .rts-seg a:visited {
		flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 14px;
		border: 1px solid var(--rts-field); border-right-width: 0;
	}
	.rts-embed .rts-seg a:first-child { border-radius: 4px 0 0 4px; }
	/* The shorthand, not the width alone: the wide rule's border-right: 0 also set the style to none. */
	.rts-embed .rts-seg a:last-child { border-right: 1px solid var(--rts-field); border-radius: 0 4px 4px 0; }
	.rts-embed .rts-seg a[aria-current="true"],
	.rts-embed .rts-seg a[aria-pressed="true"] { border-color: var(--rts-navy); }
	.rts-embed .rts-seg--3 a { flex: 1 1 auto; padding: 0 6px; }
	.rts-embed .rts-chip--more { grid-column: 9 / span 4; grid-row: 1; justify-content: center; padding: 0 10px; }
	.rts-embed .rts-chip--more .rts-dk { display: none; }
	.rts-embed .rts-chip--more .rts-mt { display: inline; }
	.rts-embed .rts-qf { position: static; min-width: 0; }
	.rts-embed .rts-qf[data-rts-qf="price"] { grid-column: 1 / span 6; grid-row: 2; }
	.rts-embed .rts-qf[data-rts-qf="beds"] { grid-column: 7 / span 6; grid-row: 2; }
	.rts-embed .rts-chip,
	.rts-embed .rts-qf > summary.rts-chip { height: 44px; min-width: 0; padding: 0 14px; font-size: 14px; }
	.rts-embed .rts-qf > summary.rts-chip { justify-content: space-between; line-height: 42px; }
	.rts-embed .rts-chip__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	/* The popover spans the filters under the chips. */
	.rts-embed .rts-pop { left: 0; right: 0; width: auto; max-width: none; top: calc(100% + 6px); }
	/* Search last: the wide layouts' order puts it beside the box. */
	.rts-embed .rts-ctl { order: 2; }
	.rts-embed .rts-go { order: 3; height: 46px; width: 100%; }
}
@media (max-width: 360px) {
	.rts-embed { padding: 10px; }
	.rts-embed .rts-seg a { font-size: 13px; }
	/* At 320px the tag comes before the placeholder (it gives way to "Shady Canyon"), and
	   "Filters" drops its icon so the word fits (review 2026-10-04: "Shady ..." and "Fil..."). */
	.rts-embed .rts-omni .rts-omni__in { min-width: 0; }
	.rts-embed .rts-chip--more { padding: 0 8px; }
	.rts-embed .rts-chip--more .rts-i { display: none; }
}
/* Narrow phones and phones zoomed for a large font (owner 2026-10-05, as in rt-search.css). The bar's column is
   about 70px narrower than the window; layout B keeps about 8% to spare from 320px up. Under 320px each control
   takes the row; under 220px the switch's three words stack and the box drops its magnifier so a place tag fits. */
@media (max-width: 319px) {
	/* One column: the twelve columns' eleven gaps alone are 88px, wider than the bar on a 140px window. */
	.rts-embed .rts-ctl { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	.rts-embed .rts-seg { grid-column: 1 / -1; grid-row: 1; }
	.rts-embed .rts-seg a,
	.rts-embed .rts-seg--3 a { flex: 1 1 auto; padding: 0 4px; }
	.rts-embed .rts-chip--more { grid-column: 1 / -1; grid-row: 2; }
	.rts-embed .rts-qf[data-rts-qf="price"] { grid-column: 1 / -1; grid-row: 3; }
	.rts-embed .rts-qf[data-rts-qf="beds"] { grid-column: 1 / -1; grid-row: 4; }
	/* In the dropdowns: Minimum over Maximum, and the Beds choices wrap to a second row of whole cells. */
	.rts-embed .rts-row2 { grid-template-columns: minmax(0, 1fr); }
	.rts-embed .rts-segr { display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 1px; }
	.rts-embed .rts-segr__o + .rts-segr__o { border-left: 0; }
	.rts-embed .rts-segr__o { box-shadow: 0 0 0 1px var(--rts-field); }
}
@media (max-width: 219px) {
	.rts-embed { padding: 8px; }
	.rts-embed .rts-go { padding: 0 10px; gap: 6px; }
	.rts-embed .rts-omni { padding: 0 6px 0 8px; }
	.rts-embed .rts-omni > .rts-i { display: none; }
	.rts-embed .rts-seg { flex-direction: column; height: auto; }
	.rts-embed .rts-seg a { flex: none; height: 44px; border-right-width: 1px; border-bottom-width: 0; }
	.rts-embed .rts-seg a:first-child { border-radius: 4px 4px 0 0; }
	.rts-embed .rts-seg a:last-child { border-bottom-width: 1px; border-radius: 0 0 4px 4px; }
	/* The dropdowns: a slimmer inset, and the Minimum and Maximum menus may narrow below their longest option. */
	.rts-embed .rts-pop { padding: 10px; }
	.rts-embed .rts-fld,
	.rts-embed .rts-fld .rts-sel { min-width: 0; }
	.rts-embed .rts-fld .rts-sel { padding: 0 24px 0 8px; background-position: right 6px center; }
	.rts-embed .rts-pop__f .rts-btn { width: 100%; min-width: 0; padding: 0 8px; }
	/* The search sheet's box takes its own row, Cancel under it. */
	.rts-embed .rts-ss__top { flex-wrap: wrap; row-gap: 6px; }
	.rts-embed .rts-ss__box { flex: 1 1 100%; }
	.rts-embed .rts-ss__cancel { margin-left: auto; }
}
@media (max-width: 149px) {
	/* 300% zoom on a 360px phone (120px): the bar's own inset and the Search button's icon give way to the words. */
	.rts-embed { padding: 4px; }
	.rts-embed .rts-go { padding: 0 4px; }
	.rts-embed .rts-go .rts-i { display: none; }
	.rts-embed .rts-tok { padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.rts-embed *,
	.rts-embed *::before,
	.rts-embed *::after { transition: none !important; }
}

/* ---- the city page band (rt_city_search_band_html(), owner 2026-10-10, mockup D) ---------------------------
   A white band right under the hero of every city template page: the bar drops its own card (border, inset,
   shadow) and lines up with the page's 1280px content column (24px gutters, as the prose). From 1024px wide it
   pins under the fixed header (68px) while the page scrolls; narrower it scrolls away with the page (owner:
   "I don't think it should be pinned on mobile. Just Desktop"). */
.rt-citysearch__bg { background: #fff; border-bottom: 1px solid #e2dccd; padding: 12px 0; }
.rt-citysearch__in { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.rt-citysearch .rts-embed { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
@media (max-width: 360px) {
	.rt-citysearch__in { width: calc(100% - 32px); }
}
@media (max-width: 219px) {
	.rt-citysearch__bg { padding: 8px 0; }
	.rt-citysearch__in { width: calc(100% - 16px); }
}
@media (min-width: 1024px) and (min-height: 500px) {
	/* rh-custom's overflow-x:hidden makes body a scroll container that never scrolls, and sticky pins to it;
	   clip clips the same overflow without one (the /homes/ bar's fix, rt-search.css). The scroll locks
	   (html.rt-drawer-lock body, html.rt-modal-lock body: 0,1,2) still win over this 0,1,1. */
	body.rt-citysearch-on { overflow-x: clip; }
	.rt-citysearch { position: sticky; top: 68px; z-index: 900; container-type: scroll-state; }
	/* Anchor jumps and the alert band's own scroll land below the header and the pinned bar. */
	body.rt-citysearch-on .rt-citypage [id],
	body.rt-citysearch-on .rt-alert { scroll-margin-top: 156px; }
}
@media (min-width: 1024px) and (max-width: 1199px) and (min-height: 500px) {
	/* The bar wraps to two rows here (its 1199px rule). */
	body.rt-citysearch-on .rt-citypage [id],
	body.rt-citysearch-on .rt-alert { scroll-margin-top: 208px; }
}
/* THE COMPACT PHONE BAND (owner 2026-10-12, "The main search looks better on mobile than the Featured Cities and
   Communities pages"; MLS setting city_band_compact puts .rt-citysearch--compact on the band). Phones get the /homes/
   compact bar's two rows: the box, then the status switch and Filters. Price and Beds fold into the full search's
   Filters drawer (the Filters link opens it on Price), and the Search button goes: a status press searches at once
   (rt-search.js), as a place chosen in the box already did. The band takes the /homes/ bar's 16px gutters. */
@media (max-width: 768px) {
	.rt-citysearch--compact .rt-citysearch__in { width: calc(100% - 32px); }
	.rt-citysearch--compact .rts-embed .rts-qf,
	.rt-citysearch--compact .rts-embed .rts-go { display: none; }
}
@media (max-width: 219px) {
	.rt-citysearch--compact .rt-citysearch__in { width: calc(100% - 16px); }
}
/* A soft shadow while pinned, where the browser can tell (scroll-state queries); elsewhere the hairline alone. */
@container scroll-state(stuck: top) {
	.rt-citysearch__bg { box-shadow: 0 6px 18px rgba(6, 20, 36, .10); }
}