/* Anders job-search control bridge.
 *
 * The page-level search design predates the shared advSelect component. This
 * layer keeps the ported design files generated-only while reconciling the
 * filter row with the current Anders design system: shared field borders,
 * focus treatment, selected-facet states and one control geometry.
 */

/* Search is an input surface, not an elevated card. Keep its resting treatment
 * quiet and let the tokenized focus ring carry interaction state. */
.anders-design .fsearch {
	position: relative;
	border-color: var(--line);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* JS measures this decorative layer against the input's text area. The real
 * input, label and placeholder remain the fallback and own all interaction. */
.anders-design .fsearch-hint {
	display: none;
	position: absolute;
	align-items: center;
	overflow: hidden;
	color: var(--muted);
	pointer-events: none;
	user-select: none;
}

.anders-design .fsearch-hint-text {
	display: block;
	flex: none;
	white-space: pre;
	transition: transform 100ms linear;
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.anders-design .fsearch.has-typed-hint .fsearch-hint {
		display: flex;
	}

	.anders-design .fsearch.has-typed-hint input::placeholder {
		color: transparent;
	}
}

.anders-design .fsearch:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: 0;
}

.anders-design .fsearch .go {
	box-shadow: none;
	transition: filter .15s ease;
}

.anders-design .fsearch .go:hover {
	filter: brightness(1.08);
}

/* Facets use the shared empty/set state model: a quiet panel when empty and a
 * blue-tinted surface when the current route is narrowed by that facet. */
.anders-design .anchor {
	border-color: var(--line);
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.anders-design .anchor:hover,
.anders-design .anchor:focus-visible,
.anders-design .anchor[aria-expanded="true"] {
	border-color: var(--accent);
}

.anders-design .anchor:focus-visible,
.anders-design .anchor[aria-expanded="true"] {
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: 0;
}

.anders-design .anchor.set {
	border-color: var(--accent);
	background: var(--accent-soft);
}

/* These facets are single-select. Keep the disclosure chevron on the closed
 * control and use one trailing check inside the menu for the current choice;
 * a leading boxed mark incorrectly promises multi-select behaviour. */
.anders-design .anchor.set .chev {
	display: block;
}

.anders-design .fopt.on {
	background: var(--accent-soft);
}

.anders-design .fopt-tail {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.anders-design .fopt-check {
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
	color: var(--accent);
	opacity: 0;
	visibility: hidden;
}

.anders-design .fopt.on .fopt-check {
	opacity: 1;
	visibility: visible;
}

/* Sort is a real advSelect. The native select remains the source of truth for
 * URLs and change events; the generated trigger owns presentation and input. */
.anders-design .sortwrap {
	position: relative;
	flex: none;
	margin-left: auto;
	width: 204px;
	height: 44px;
}

.anders-design .sortcontrol {
	position: relative;
	width: 100%;
	height: 100%;
}

.anders-design .sortsel,
.anders-design .sortwrap .advs-trigger {
	width: 100%;
	height: 44px;
	margin: 0;
	border: 1.5px solid var(--line);
	border-radius: var(--r-field);
	background: var(--card);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	padding: 17px 36px 4px 42px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.anders-design .sortsel {
	appearance: none;
	cursor: pointer;
}

.anders-design .sortwrap .advs-trigger:hover,
.anders-design .sortwrap .advs-trigger:focus-visible,
.anders-design .sortwrap .advs-trigger.is-open,
.anders-design .sortsel:hover,
.anders-design .sortsel:focus-visible {
	border-color: var(--accent);
}

.anders-design .sortwrap .advs-trigger:focus-visible,
.anders-design .sortwrap .advs-trigger.is-open,
.anders-design .sortsel:focus-visible {
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: 0;
}

.anders-design .sortlabel,
.anders-design .sorticon,
.anders-design .sortchev {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.anders-design .sortlabel {
	top: 7px;
	left: 42px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent);
}

/* Clearing a filter (2026-10-04): an "×" on each selected pill, the
 * same URL as the panel's "All …" option. It is a link beside the pill
 * button, laid over room the pill reserves. */
.anders-design .pillwrap.has-clear .anchor {
	padding-right: 40px;
}

/* A long value ("Physical Therapist" on a tablet) truncates inside the pill
 * instead of running under its chevron and "×". */
.anders-design .anchor .txt {
	flex: 1 1 auto;
}

.anders-design .anchor .lab,
.anders-design .anchor .val {
	max-width: 100%;
}

.anders-design .pill-clear {
	position: absolute;
	top: 50%;
	right: 9px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--accent);
	transform: translateY(-50%);
	transition: background-color .15s ease, color .15s ease;
}

.anders-design .pill-clear:hover {
	background: var(--card);
	color: var(--accent-d);
}

.anders-design .pill-clear:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

/* Therapy's phone-only "Setting" word (see the <=767px block). */
.anders-design .sortlabel-setting {
	display: none;
}

.anders-design .sorticon {
	top: 50%;
	left: 13px;
	transform: translateY(-50%);
	color: var(--accent);
}

.anders-design .sortchev {
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	color: var(--muted);
	transition: transform .15s ease;
}

.anders-design .sortwrap:has(.advs-trigger[aria-expanded="true"]) .sortchev {
	transform: translateY(-50%) rotate(180deg);
}

.anders-design .sortwrap .advs-panel {
	right: 0;
	left: auto;
	min-width: 204px;
}

/* Phone-only affordances (see the 767px block): a selection count on a chip whose
 * value cannot fit, and the full selection at the top of its open panel. */
.anders-design .anchor .num,
.anders-design .fpanel-current {
	display: none;
}

@media (max-width:1023px) {
	.anders-design .fsearch-wrap {
		flex: 1 0 100%;
	}

	.anders-design .pillwrap {
		display: block;
		flex: 1 1 0;
		min-width: 0;
	}

	.anders-design .anchor {
		width: 100%;
		min-width: 0;
	}

	.anders-design .pillwrap,
	.anders-design .sortwrap {
		padding-block: 4px;
	}

	.anders-design .mfilters {
		display: none;
	}

	.anders-design .sortwrap {
		height: 52px;
	}

	.anders-design .sortsel,
	.anders-design .sortwrap .advs-trigger {
		height: 44px;
	}
}

@media (max-width:767px) {
	/* The phone bar is two task-focused rows: search first, then the three
	 * page-defining facets plus an icon-only Sort. Equal columns keep long
	 * selections from changing the layout after navigation. */
	.anders-design .fbar {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)) 44px;
		column-gap: 4px;
		row-gap: 8px;
	}

	.anders-design .fsearch-wrap {
		grid-column: 1 / -1;
	}

	.anders-design .anchor {
		height: 44px;
		justify-content: center;
		gap: 0;
		padding: 0 4px;
		border-radius: var(--r-field);
		background: var(--card);
	}

	.anders-design .anchor .ic,
	.anders-design .anchor .chev,
	.anders-design .anchor.set .chev {
		display: none;
	}

	.anders-design .anchor .txt {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.anders-design .anchor .lab,
	.anders-design .anchor .val {
		overflow: hidden;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.anders-design .anchor .lab {
		color: var(--ink);
		letter-spacing: 0;
		text-transform: none;
	}

	.anders-design .anchor .val {
		display: none;
		margin: 0;
	}

	.anders-design .anchor.set .lab {
		display: none;
	}

	.anders-design .anchor.set .val {
		display: block;
		color: var(--accent-d);
	}

	/* Count mode: anders-search-ui.js adds .anchor--count when the value overflows
	 * its chip. The label returns with "(1)" and the value stays for AT only.
	 * .set is part of the selector because the hide rule above carries it. */
	/* "Specialty (1)" is wider than a 360px chip, so the count may wrap onto a
	 * second line; two 14px lines still fit the 44px chip. */
	.anders-design .anchor.set.anchor--count .txt {
		line-height: 1.15;
		white-space: normal;
	}

	.anders-design .anchor.set.anchor--count .lab,
	.anders-design .anchor.set.anchor--count .num {
		display: inline;
	}

	.anders-design .anchor.set.anchor--count .num {
		margin-left: 3px;
		color: var(--accent-d);
		font-size: 14px;
		font-weight: 700;
	}

	.anders-design .anchor.set.anchor--count .val {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	/* No room for the pill "×" on phones: clearing lives in the open panel's
	 * caption instead. */
	.anders-design .pill-clear {
		display: none;
	}

	.anders-design .pillwrap.has-clear .anchor {
		padding-right: 4px;
	}

	.anders-design .fpanel-clear {
		flex: none;
		color: var(--accent);
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.anders-design .fpanel-current {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 4px 12px;
		margin: 0 0 8px;
		padding: 8px 10px;
		border-radius: 8px;
		background: var(--panel);
		color: var(--accent-d);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	/* Editable text at 16px so iOS does not zoom the page on focus. */
	.anders-design .fsearch input,
	.anders-design .fpanel .psearch input {
		font-size: 16px;
	}

	/* All facet panels align to the shell edge despite being anchored to one
	 * equal-width chip. 56px is the Sort button plus the three 4px gaps. */
	.anders-design .fpanel {
		width: calc(300% + 56px);
		min-width: 0;
		max-width: none;
	}

	.anders-design .pillwrap-spec .fpanel {
		left: calc(-100% - 4px);
	}

	.anders-design .pillwrap-state .fpanel {
		right: auto;
		left: calc(-200% - 8px);
	}

	.anders-design .sortwrap {
		grid-column: 4;
		flex: none;
		width: 44px;
		min-width: 44px;
		max-width: none;
		margin-left: 0;
	}

	.anders-design .sortsel,
	.anders-design .sortwrap .advs-trigger {
		padding: 0;
		color: transparent;
	}

	.anders-design .sortwrap .advs-value,
	.anders-design .sortlabel {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.anders-design .sorticon {
		left: 50%;
		transform: translate(-50%, -50%);
		color: var(--ink);
	}

	.anders-design .sortchev {
		display: none;
	}

	.anders-design .sortwrap .advs-panel {
		right: 0;
		left: auto;
		min-width: 190px;
	}

	/* The icon-only control hides its value, so a picked Setting shows as a dot. */
	.anders-design .sortwrap.is-active::after {
		content: "";
		position: absolute;
		top: 10px;
		right: 8px;
		width: 8px;
		height: 8px;
		border: 1.5px solid var(--card);
		border-radius: 50%;
		background: var(--green);
		pointer-events: none;
	}

	/* Therapy sorts by Setting, so its phone control reads "Setting" instead
	 * of showing the icon (2026-10-04). One width drives the grid track,
	 * the control and the facet panels, which span the three pills plus Sort. */
	.anders-design .fbar--setting {
		--sort-w: 80px;
		grid-template-columns: repeat(3, minmax(0, 1fr)) var(--sort-w);
	}

	.anders-design .fbar--setting .sortwrap {
		width: var(--sort-w);
		min-width: var(--sort-w);
	}

	.anders-design .fbar--setting .fpanel {
		width: calc(300% + var(--sort-w) + 12px);
	}

	.anders-design .fbar--setting .sorticon,
	.anders-design .fbar--setting .sortlabel-sort {
		display: none;
	}

	.anders-design .fbar--setting .sortlabel {
		top: 50%;
		right: 0;
		left: 0;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		transform: translateY(-50%);
		color: var(--ink);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0;
		text-align: center;
		text-transform: none;
	}

	.anders-design .fbar--setting .sortlabel-setting {
		display: inline;
	}

	.anders-design .fbar--setting .sortwrap.is-active::after {
		top: 6px;
		right: 6px;
	}
}

@media (min-width:768px) and (max-width:1023px) {
	.anders-design .sortwrap {
		flex: 0 0 176px;
		width: 176px;
		max-width: none;
	}
}

@media (min-width:1024px) {
	.anders-design .sortwrap,
	.anders-design .sortsel,
	.anders-design .sortwrap .advs-trigger {
		height: 52px;
	}

	.anders-design .sortwrap {
		width: 180px;
	}

	.anders-design .sortsel,
	.anders-design .sortwrap .advs-trigger {
		padding-top: 21px;
		padding-bottom: 6px;
	}

	.anders-design .sortlabel {
		top: 10px;
	}

	.anders-design .sortwrap .advs-panel {
		min-width: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.anders-design .fsearch,
	.anders-design .fsearch .go,
	.anders-design .anchor,
	.anders-design .sortsel,
	.anders-design .sortwrap .advs-trigger,
	.anders-design .sortchev {
		transition: none;
	}
}