/* ---------- Controls ---------- */

.landing__controls {
	margin-bottom: 1.1rem;
	padding: 0.8rem;
	border-top: 2px solid var(--accent);
	background: var(--panel);
}

.landing__filter-form {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.landing__filter-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 0.55rem;
}

.landing__filter-row--search {
	grid-template-columns: 1fr;
}

.landing__filter-row--actions {
	grid-template-columns: 1fr;
}

.landing__filter-row--ranges {
	grid-template-columns: 1fr;
}

.landing__filter-group--search {
	grid-column: 1 / -1;
}

.landing__filter-group {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.landing__filter-label {
	font-size: 0.73rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--muted);
}

.landing__sort-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}

.landing__sort-toggle:hover {
	color: var(--ink);
}

.landing__sort-arrow {
	color: var(--accent);
	font-size: 0.95rem;
	line-height: 1;
}

.landing__filter-select-wrap {
	position: relative;
}

.landing__filter-input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 0.46rem 0.7rem;
	border-radius: 0.25rem;
	border: 1px solid var(--line);
	background-color: var(--panel-strong);
	color: var(--ink);
	font: inherit;
	min-height: 2.5rem;
	box-sizing: border-box;
}

.landing__filter-button,
.landing__filter-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.84rem;
	border-radius: 0.25rem;
	border: 1px solid var(--line);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	min-height: 2.5rem;
	box-sizing: border-box;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.landing__filter-button {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.landing__filter-button:hover {
	background: var(--accent-hover);
}

.landing__filter-clear {
	grid-column: 1 / -1;
	justify-self: stretch;
	padding-left: 1.1rem;
	padding-right: 1.1rem;
	background: var(--panel-solid);
	color: var(--ink);
}

.landing__filter-clear:hover {
	background: var(--accent-wash);
	border-color: var(--accent);
}

.landing__filter-input:focus-visible,
.landing__filter-button:focus-visible,
.landing__filter-clear:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.landing__filter-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.5rem;
	padding: 0 0.7rem;
	border-radius: 0.25rem;
	border: 1px solid var(--line);
	background-color: var(--panel-strong);
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	box-sizing: border-box;
	width: 100%;
}

.landing__filter-checkbox input[type="checkbox"] {
	accent-color: var(--accent);
}

.landing__filter-checkbox:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- Bio range dual-thumb sliders (age/height/weight) ---------- */

.landing__filter-group--range {
	gap: 0.2rem;
}

/* Head row: label left, live readout right, contextual reset icon just right of
   the readout once the window deviates from the full bounds. */
.landing__filter-range-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 1.35rem;
}

.landing__filter-range-readout {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25rem;
	margin-left: auto;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.landing__filter-range-value {
	min-width: 3ch;
	padding: 0.18rem 0.4rem;
	text-align: center;
	background: var(--panel-strong);
	border: 1px solid var(--line);
	border-radius: 0.3rem;
	font-weight: 700;
	color: var(--ink);
	transition: border-color 150ms ease, background-color 150ms ease;
}

.landing__filter-range-separator {
	color: var(--muted);
}

.landing__filter-range-unit {
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

/* A live filter tints the value chips with the accent so it reads at a glance;
   the server-rendered `is-active` initial state is re-confirmed by the
   controller on connect. */
.landing__filter-group--range.is-active .landing__filter-range-value {
	border-color: var(--accent);
	background: var(--accent-wash);
}

.landing__filter-range-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.15rem;
	margin-right: -0.25rem;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease;
}

.landing__filter-range-reset svg {
	width: 0.85rem;
	height: 0.85rem;
}

.landing__filter-range-reset:hover {
	color: var(--accent);
	background: var(--accent-wash);
}

.landing__filter-range-reset:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Track is the travel lane hit area; the visual rail sits centered inside it. */
.landing__filter-range-track {
	position: relative;
	height: 1.7rem;
}

.landing__filter-range-rail {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0.32rem;
	transform: translateY(-50%);
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--border-soft) 0 var(--lo-pct, 0%),
		var(--accent) var(--lo-pct, 0%) var(--hi-pct, 100%),
		var(--border-soft) var(--hi-pct, 100%) 100%
	);
	pointer-events: none;
}

/* Two native range inputs stacked over the rail. Tracks are inert
   (pointer-events: none); only the thumbs grab. The min input sits above the
   max input so its thumb stays grabbable when the two cross; the controller
   then swaps the input values (and reads them back) so a submitted filter is
   always min <= max. */
.landing__filter-range-slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.landing__filter-range-slider--min {
	z-index: 2;
}

.landing__filter-range-slider--max {
	z-index: 1;
}

.landing__filter-range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	border: 2.5px solid var(--panel);
	background: var(--accent);
	box-shadow: 0 1px 3px rgba(14, 6, 10, 0.25);
	cursor: pointer;
	pointer-events: auto;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.landing__filter-range-slider::-moz-range-thumb {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	border: 2.5px solid var(--panel);
	background: var(--accent);
	box-shadow: 0 1px 3px rgba(14, 6, 10, 0.25);
	cursor: pointer;
	pointer-events: auto;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.landing__filter-range-slider::-webkit-slider-thumb:hover,
.landing__filter-range-slider::-webkit-slider-thumb:active {
	transform: scale(1.18);
	box-shadow: 0 0 0 5px var(--accent-wash), 0 1px 4px rgba(14, 6, 10, 0.3);
}

.landing__filter-range-slider::-moz-range-thumb:hover,
.landing__filter-range-slider::-moz-range-thumb:active {
	transform: scale(1.18);
	box-shadow: 0 0 0 5px var(--accent-wash), 0 1px 4px rgba(14, 6, 10, 0.3);
}

.landing__filter-range-slider:focus-visible::-webkit-slider-thumb {
	outline: none;
	box-shadow: 0 0 0 4px var(--accent-wash), 0 0 0 6px var(--accent);
}

.landing__filter-range-slider:focus-visible::-moz-range-thumb {
	outline: none;
	box-shadow: 0 0 0 4px var(--accent-wash), 0 0 0 6px var(--accent);
}

/* ---------- Multi/single-select dropdown component ---------- */

.landing__filter-multi-trigger {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 2.5rem;
	border-radius: 0.25rem;
	border: 1px solid var(--line);
	background-color: var(--panel-strong);
	box-sizing: border-box;
	overflow: hidden;
}

/* The main segment opens the dropdown; a companion control (e.g. the Website
   AND|OR toggle) may sit as a trailing segment inside the same shell. */
.landing__filter-multi-trigger-main {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex: 1 1 0;
	min-width: 0;
	padding: 0.46rem 0.7rem;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.landing__filter-multi-icon {
	width: 12px;
	height: 12px;
	color: var(--accent);
	flex-shrink: 0;
	transition: transform 160ms ease;
}

.landing__filter-multi-trigger-main[aria-expanded="true"] .landing__filter-multi-icon {
	transform: rotate(180deg);
}

.landing__filter-multi-panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 0.3rem);
	left: 0;
	right: 0;
	display: grid;
	gap: 0.15rem;
	padding: 0.35rem;
	background: var(--panel-solid);
	border: 1px solid var(--line);
	border-radius: 0.3rem;
	box-shadow: 0 10px 28px rgba(14, 6, 10, 0.28);
	max-height: min(18rem, 50vh);
	overflow-y: auto;
}

/* `display: grid` above would otherwise override the UA's `[hidden]` rule
   (author styles win), leaving the panel permanently visible. */
.landing__filter-multi-panel[hidden] {
	display: none;
}

@keyframes landing-multi-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.landing__filter-multi-panel:not([hidden]) {
	animation: landing-multi-in 130ms ease-out;
}

.landing__filter-multi-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	min-height: 2.3rem;
	padding: 0.4rem 0.5rem;
	border-radius: 0.2rem;
	font-size: 0.88rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.landing__filter-multi-option:hover {
	background: var(--accent-wash);
}

.landing__filter-multi-option input[type="checkbox"] {
	accent-color: var(--accent);
	flex-shrink: 0;
}

.landing__filter-multi-option:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.landing__filter-multi-option--all {
	font-weight: 700;
}

.landing__filter-multi-divider {
	height: 1px;
	margin: 0.15rem 0 0.2rem;
	background: var(--border-soft);
}

.landing__filter-multi-trigger-main:focus-visible,
.landing__filter-multi-panel:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- Website selector match toggle (AND | OR) ---------- */

/* A compact pill pinned beside the Website dropdown so the match mode reads as
   part of the selector itself. The hidden radios carry the submitted state
   (positioned absolutely so they are removed from the flex flow while still
   being submittable form controls). */
/* The AND|OR toggle rides inside the Website selector's trigger shell as a
   trailing segment (divider to its left). The hidden radios carry the submitted
   state; they're clipped off so they stay submittable but unfocusable. */
.landing__provider-match {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	flex-shrink: 0;
}

.landing__provider-match-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}

.landing__provider-match-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.4rem;
	padding: 0.46rem 0.5rem;
	border: 0;
	border-left: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease;
}

.landing__provider-match-toggle:hover {
	color: var(--ink);
	background: var(--accent-wash);
}

/* OR mode is hinted with the accent wash so it reads as an active override. */
.landing__provider-match-toggle.is-any {
	color: var(--accent);
	background: var(--accent-wash);
}

.landing__provider-match-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* Clear button sits in the search row as a trailing auto column, directly
   next to the Filter button. Stays invisible when no filter is applied. */
.landing__filter-clear--search {
	grid-column: auto;
	white-space: nowrap;
	padding-left: 0.7rem;
	padding-right: 0.7rem;
}

/* ---------- Advanced filters (collapsible) ---------- */

.landing__advanced-divider {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.1rem 0 0;
}

.landing__advanced-divider::before,
.landing__advanced-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border-soft);
}

.landing__advanced-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	transition: color 150ms ease;
	white-space: nowrap;
}

.landing__advanced-toggle:hover {
	color: var(--accent);
}

.landing__advanced-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.landing__advanced-icon {
	width: 14px;
	height: 14px;
	transition: transform 200ms ease;
	flex-shrink: 0;
}

.landing__advanced-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms ease, opacity 200ms ease, margin 280ms ease;
	opacity: 0;
	margin-top: 0;
}

.landing__advanced-content.is-expanded {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.5rem;
}

.landing__advanced-content > .landing__advanced-inner {
	display: grid;
	gap: 0.6rem;
	overflow: hidden;
	min-height: 0;
}

/* Only collapse needs the inner content clipped. While expanded the content
   can let an open dropdown escape and overlay the content below — but scoped
   to the `.is-open` state so the expand/collapse reveal stays smooth (a
   blanket overflow: visible on expand makes content jump at full size
   mid-animation). */
.landing__advanced-content > .landing__advanced-inner:has(.landing__filter-group.is-open) {
	overflow: visible;
}

.landing__advanced-content.is-expanded .landing__advanced-icon {
	transform: rotate(45deg);
}

/* ---------- Controls responsive (415-719) ---------- */

@media (min-width: 420px) and (max-width: 719px) {
	.landing__filter-row--ranges {
		grid-template-columns: repeat(3, 1fr);
	}

	.landing__filter-row--search {
		grid-template-columns: 1fr 1fr auto auto;
	}

	.landing__filter-row--search > .landing__filter-group--search {
		grid-column: 1 / -1;
	}

	.landing__filter-row--actions {
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
	}

	.landing__filter-row--actions .landing__filter-clear {
		grid-column: auto;
	}
}

/* ---------- Controls responsive (desktop) ---------- */

@media (min-width: 720px) {
	.landing__controls {
		margin-bottom: 1.75rem;
		padding: 1rem;
	}

	.landing__filter-form {
		gap: 0.75rem;
	}

	.landing__filter-row {
		gap: 0.75rem;
	}

	.landing__filter-row--search {
		grid-template-columns: 2.2fr 1fr 1fr auto auto;
	}

	.landing__filter-group--search {
		grid-column: auto;
	}

	/*
	 * Advanced (collapsible) action filters: equal-width columns that auto-flow,
	 * so the row always fills edge-to-edge with no dangling blank slot — 2 items
	 * (= website / ordering) render as 2 equal columns, 3 items (with Clear) as
	 * 3 equal columns. Add a future filter by dropping its `.landing__filter-group`
	 * partial into the actions row; the layout self-adjusts. Mobile stays stacked.
	 */
	.landing__filter-row--actions {
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
	}

	.landing__filter-row--actions .landing__filter-clear {
		grid-column: auto;
	}

	.landing__filter-row--ranges {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.75rem;
	}

	.landing__filter-group {
		gap: 0.35rem;
	}

	.landing__filter-input,
	.landing__filter-button,
	.landing__filter-clear,
	.landing__filter-checkbox,
	.landing__filter-multi-trigger-main,
	.landing__provider-match-toggle {
		min-height: 2.75rem;
		padding-top: 0.52rem;
		padding-bottom: 0.52rem;
	}
}