/* Anders job search — the "Near" field (sort by distance).
 *
 * Theme-authored, not ported: the approved design has no location control.
 * Do not fold this into assets/css/anders-job-search.css — that file is
 * generated by tools/port-design.js and a re-port overwrites it.
 *
 * Near sits in the filter row right after State and borrows the pills' look
 * (same height, small uppercase label, blue tint once set), but it is a text
 * field. Where it goes at each width:
 *   >= 1280px  one row: search, three pills, Near (and Therapy's Setting sort)
 *   1024-1279  one row; Therapy's Setting sort shrinks to its icon
 *   768-1023   its own full-width line under the pills
 *   <= 767px   its own full-width line under the pills (phone grid)
 */

.anders-design .nearwrap {
	position: relative;
	flex: 0 0 210px;
	min-width: 0;
	margin: 0;
}

.anders-design .nearbox {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 8px 0 13px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-field);
	background: var(--panel);
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.anders-design .nearbox:hover {
	border-color: var(--accent);
}

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

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

.anders-design .nearwrap.is-set .nearbox:focus-within {
	background: var(--card);
}

/* Specialty and combo pages: the brand green (the header strip's #7fff00)
 * outlines the field on white with a soft green glow, always on, so it reads
 * as the next step (white even with a place set). The label and icon take a deep green; #7fff00 is too light
 * for text on white. */
.anders-design .nearwrap.is-spotlight .nearbox {
	border: 2px solid #7fff00;
	background: var(--card);
	box-shadow: 0 0 0 3px rgba(127, 255, 0, .28);
}

.anders-design .nearwrap.is-spotlight .nearbox:hover {
	border-color: #6ad600;
}

.anders-design .nearwrap.is-spotlight .nearbox:focus-within {
	border-color: #6ad600;
	background: var(--card);
	box-shadow: 0 0 0 3px rgba(127, 255, 0, .28);
}

.anders-design .nearwrap.is-spotlight .nearbox .ic,
.anders-design .nearwrap.is-spotlight .nearbox .lab {
	color: var(--green);
}

.anders-design .nearwrap.is-error .nearbox {
	border-color: var(--danger, #b42318);
}

.anders-design .nearbox .ic {
	flex: none;
	color: var(--muted);
}

.anders-design .nearwrap.is-set .nearbox .ic {
	color: var(--accent);
}

.anders-design .nearbox .txt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

/* The pills' label: 10px, tracked, uppercase. */
.anders-design .nearbox .lab {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--muted);
	cursor: text;
}

.anders-design .nearwrap.is-set .nearbox .lab {
	color: var(--accent);
}

.anders-design .nearbox input {
	width: 100%;
	min-width: 0;
	margin: 3px 0 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
}

.anders-design .nearbox input::placeholder {
	color: var(--muted);
	font-weight: 600;
	opacity: 1;
}

.anders-design .near-clear {
	display: grid;
	flex: none;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.anders-design .near-clear {
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

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

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

/* Suggestions reuse the keyword list (.ksuggest in anders-suggest.css). As wide
 * as the longest place name, never narrower than the field, and capped so a
 * long name wraps instead of stretching the panel. */
.anders-design .near-suggest {
	width: max-content;
	min-width: 100%;
	max-width: 320px;
}

/* Near is the last field before Sort, so on desktop its list opens leftward
 * from the field's right edge and stays inside the content column. */
@media (min-width: 1024px) {
	.anders-design .near-suggest {
		left: auto;
		right: 0;
	}
}

/* A hint, not a destination: quiet type and a small icon. */
.anders-design .near-gps-row {
	gap: 8px;
	justify-content: flex-start;
	color: var(--muted);
}

.anders-design .near-gps-row svg {
	flex: none;
	color: var(--muted);
}

.anders-design .near-gps-row .ksuggest-t {
	color: var(--muted);
	font-weight: 500;
}

/* Google's attribution under its predictions (required by its terms). */
.anders-design .near-attrib {
	margin: 4px 0 0;
	padding: 6px 10px 2px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 11.5px;
	text-align: right;
}

.anders-design .near-empty {
	margin: 0;
	padding: 8px 10px;
	color: var(--muted);
	font-size: 13.5px;
}

/* "Finding your location…" and location errors, under the field. */
.anders-design .near-msg {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 36;
	min-width: 100%;
	max-width: 320px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--accent-line);
	border-radius: 8px;
	background: var(--card);
	box-shadow: var(--shadow-md);
	color: var(--navy);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}

.anders-design .near-msg[hidden] {
	display: none;
}

/* "We couldn't find …" above the feed. */
.anders-design .near-error {
	margin-top: var(--s-4);
}

/* "Jobs closest to …" banner above the feed while it is sorted by distance.
 * The accent-soft surface the set Near field uses, so the two read as one
 * state: the field says where, the banner says what that did to the list. */
.anders-design .near-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: var(--s-6) 0 var(--s-6);
	padding: 16px 20px;
	border: 1px solid var(--accent-line);
	border-radius: var(--r);
	background: var(--accent-soft);
}

.anders-design .near-head__pin {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--card);
	color: var(--accent);
}

.anders-design .near-head__text {
	flex: 1 1 auto;
	min-width: 0;
}

.anders-design .near-head__title {
	margin: 0;
	color: var(--navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.anders-design .near-head__sub {
	margin: 3px 0 0;
	color: var(--slate);
	font-size: 14px;
	line-height: 1.45;
}

.anders-design .near-head__clear {
	flex: none;
	color: var(--accent);
	font-size: 14px;
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.anders-design .near-head__clear:hover {
	color: var(--accent-d);
}

.anders-design .near-head__clear:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (max-width: 767px) {
	/* Pin beside the text; "Clear location" under the text, not under the pin. */
	.anders-design .near-head {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr);
		align-items: start;
		gap: 8px 12px;
		margin: var(--s-4) 0 var(--s-5, 20px);
		padding: 14px 16px;
	}

	.anders-design .near-head__pin {
		width: 32px;
		height: 32px;
	}

	.anders-design .near-head__title {
		font-size: 17px;
	}

	.anders-design .near-head__sub {
		font-size: 13.5px;
	}

	.anders-design .near-head__clear {
		grid-column: 2;
		justify-self: start;
	}
}

/* Distance on a result card, after the start date: a pale-blue chip (the
 * "Jobs closest to …" banner's surface and pin) with the mileage in bold, so
 * it stands out from the plain start date beside it. */
.anders-design .job-distance {
	display: inline-flex;
	/* Baseline, not center: an icon has no text baseline, so a centred chip
	 * took the pin's bottom edge as its baseline and its text rode ~3px above
	 * the pay and start date. Same fix as .job-start in anders-job-card.css. */
	align-items: baseline;
	gap: 6px;
	padding: 4px 11px 4px 8px;
	border: 1px solid var(--accent-line);
	border-radius: var(--r-pill);
	background: var(--accent-soft);
	color: var(--accent-d);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.anders-design .job-distance strong {
	font-weight: 750;
	color: var(--navy);
}

.anders-design .job-distance svg {
	flex: none;
	align-self: center;
	color: var(--accent);
}

/* Desktop: one line, always. With Near added the starting widths can pass the
 * bar's width (three set pills each reserve room for their "×"), and a wrap
 * would drop Sort onto a line of its own. Instead the row never wraps and the
 * widths give: the keyword box first, then the pills (their values already
 * truncate with an ellipsis) and Near, each down to a floor. */
@media (min-width: 1024px) {
	.anders-design .fbar {
		flex-wrap: nowrap;
	}

	.anders-design .fsearch-wrap {
		flex: 1 1 220px;
		min-width: 170px;
	}

	.anders-design .pillwrap:not(.sortwrap) {
		flex: 0 1 auto;
		min-width: 118px;
	}

	.anders-design .pillwrap:not(.sortwrap) .anchor {
		min-width: 0;
		width: 100%;
	}

	/* 200px keeps "Sort by distance" on one line beside a set place's "×". */
	.anders-design .nearwrap {
		flex: 0 1 210px;
		min-width: 200px;
	}
}

/* Narrow desktop: the row only fits with Sort as an icon, the way phones show it. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.anders-design .sortwrap {
		flex: none;
		width: 52px;
		min-width: 52px;
		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;
	}
}

/* Tablet: its own line under the pills and Sort. */
@media (min-width: 768px) and (max-width: 1023px) {
	.anders-design .nearwrap {
		order: 1;
		flex: 1 0 100%;
		padding-block: 4px;
	}
}

@media (max-width: 767px) {
	/* The phone bar is a 4-column grid (anders-job-search-controls.css):
	 * search, then the three pills plus Sort. Near takes a full line after them. */
	.anders-design .nearwrap {
		order: 1;
		grid-column: 1 / -1;
	}

	.anders-design .nearbox {
		height: 48px;
		background: var(--card);
	}

	/* 16px so iOS does not zoom the page when the field takes focus. */
	.anders-design .nearbox input {
		font-size: 16px;
	}

	/* Phones: the field is full width, so the list matches it edge to edge. */
	.anders-design .near-suggest {
		width: auto;
		min-width: 0;
		max-width: none;
	}
}