/* ---------------------------------------------------------------------------
   The device search box, as mounted in both flows.

   One stylesheet rather than a copy in each flow's, because it is one
   component rendered from one file (src/shared/catalog/DeviceSearch.js) and
   two copies would drift the moment either flow was restyled.

   **It sits under the banner, not in it.** Inside was the obvious place and it
   does not work: both banners are `overflow: hidden` so their artwork cannot
   spill, which clips the dropdown to whatever is left of the banner's height —
   about one and a half rows of a ten-row list. Under it, the box sits directly
   above the picker it is a shortcut for, which is arguably where it belonged.

   **Every selector names `.frb-devsearch` as well as the element inside it**,
   and the component root names itself twice. That is not decoration — it is
   what makes these rules apply at all.

   Each flow's stylesheet opens with a reset against the forty themes this
   renders inside: `.frb-sell.frb-sell :where(div, …)`, which sets `display`,
   `margin`, `position` and a dozen more at specificity (0,2,0). Each flow's
   own components match that and come *later in the same file*, so they win the
   tie. This file cannot use that trick: it is a dependency of both, so it
   loads *first*, and a tie here loses every time — which is exactly what
   happened, and the box rendered as a giant unstyled magnifying glass on both
   pages. The extra class puts these rules at (0,3,0), where there is no tie to
   lose.

   Scoped under both flows' roots as well, so a theme that happens to use these
   class names for something else is untouched.
   --------------------------------------------------------------------------- */

:is(.frb-app, .frb-sell) .frb-devsearch-bar.frb-devsearch-bar {
	margin-block-end: var(--frb-s-5);
}

:is(.frb-app, .frb-sell) .frb-devsearch.frb-devsearch {
	position: relative;
	max-inline-size: 520px;
}

/* The label is read, not seen: the placeholder says the same thing, and a
   heading above a search box that sits above a step already titled "Which
   model?" is the third heading in a row. Clipped rather than `display: none`,
   which would take it out of the accessibility tree too. */
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__label,
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__field {
	display: flex;
	gap: var(--frb-s-2);
	align-items: center;
	padding-inline: var(--frb-s-4);
	min-block-size: var(--frb-control);
	border-radius: var(--frb-radius-full);
	background: var(--frb-surface);

	/* A ring rather than a border, so focus can thicken it without the box
	   changing size and nudging the step below. */
	box-shadow: inset 0 0 0 var(--frb-bw) var(--frb-border-control);
	transition: box-shadow var(--frb-dur-fast) var(--frb-ease);
}

/* Focused: the ring thickens and turns brand red, with a soft wash around
   it. Not the black focus recipe — see --frb-focus-field-glow for why a box
   you type into is the one place that recipe is wrong. */
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__field:focus-within {
	box-shadow:
		inset 0 0 0 var(--frb-bw-strong) var(--frb-action),
		var(--frb-focus-field-glow);
}

/* High contrast drops `box-shadow` entirely, so the ring above does not
   exist there and the field would focus invisibly. An `outline` is the one
   thing the mode keeps. */
@media (forced-colors: active) {
	:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__field:focus-within {
		outline: var(--frb-focus-width) solid var(--frb-focus);
		outline-offset: 1px;
	}
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	color: var(--frb-text-muted);
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__icon svg,
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__clear svg {
	inline-size: 100%;
	block-size: 100%;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* `all: unset` first: this runs inside forty themes we do not control, and
   several of them style every `input` on the page. */
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__input {
	all: unset;
	flex: 1 1 auto;
	min-inline-size: 0;
	padding-block: var(--frb-s-3);
	color: var(--frb-text-strong);
	font-family: var(--frb-font);

	/* Never below 16px: iOS zooms the whole page on focus otherwise, and a
	   page that jumps when you tap the search box looks broken. */
	font-size: var(--frb-fs-md);
	line-height: var(--frb-lh-md);
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__input::placeholder {
	color: var(--frb-text-muted);
	opacity: 1; /* Firefox dims placeholders of its own accord. */
}

/* The browser's own clear button would sit on top of ours. */
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__input::-webkit-search-cancel-button {
	display: none;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__clear {
	all: unset;
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--frb-radius-full);
	color: var(--frb-text-muted);
	cursor: pointer;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__clear:hover {
	background: var(--frb-grey-100);
	color: var(--frb-text-strong);
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__clear:focus-visible {
	outline: var(--frb-focus-width) solid var(--frb-focus);
	outline-offset: var(--frb-focus-offset);
}

/* ---------- The dropdown ---------------------------------------------------
   Floating rather than pushing the page down: a list that reflowed everything
   under it would move the step the customer is reading while they type. */

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__list {
	display: none;
	position: absolute;
	z-index: 30;
	inset-inline: 0;
	margin: var(--frb-s-2) 0 0;
	padding: var(--frb-s-1);
	max-block-size: 340px;
	overflow-y: auto;
	list-style: none;
	border-radius: var(--frb-radius-md);
	background: var(--frb-surface);
	box-shadow: var(--frb-shadow-float);
	text-align: start;

	/* Momentum scrolling inside a floating list, without the scroll chaining
	   on to the page when it reaches the end. */
	overscroll-behavior: contain;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__list.is-open {
	display: block;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__option {
	display: flex;
	gap: var(--frb-s-3);
	align-items: center;
	padding: var(--frb-s-2) var(--frb-s-3);
	min-block-size: var(--frb-target);
	border-radius: var(--frb-radius-sm);
	cursor: pointer;
}

/* One highlight for both the mouse and the arrow keys. `is-active` follows
   `aria-activedescendant`, so what a screen reader announces as current and
   what is visibly current are the same row by construction. */
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__option.is-active {
	background: var(--frb-surface-selected);
	box-shadow: inset 0 0 0 var(--frb-bw) var(--frb-border-selected);
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__thumb {
	flex: none;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--frb-radius-sm);
	object-fit: contain;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__thumb--blank {
	background: var(--frb-surface-media);
	box-shadow: inset 0 0 0 var(--frb-bw) var(--frb-border);
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__text {
	display: grid;
	min-inline-size: 0;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__name {
	overflow: hidden;
	color: var(--frb-text-strong);
	font-weight: var(--frb-fw-medium);
	font-size: var(--frb-fs-md);
	line-height: var(--frb-lh-md);
	white-space: nowrap;
	text-overflow: ellipsis;
}

:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__meta {
	color: var(--frb-text-muted);
	font-size: var(--frb-fs-sm);
	line-height: var(--frb-lh-sm);
}

/* "Nothing matches…" — a sentence, not a panel. This is an optional shortcut
   and the picker below is still the way through. */
:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__empty {
	margin-block: var(--frb-s-2) 0;
	color: var(--frb-text-muted);
	font-size: var(--frb-fs-sm);
	line-height: var(--frb-lh-sm);
}

/* High contrast: the tinted highlight and the shadows both disappear, so the
   list needs an edge and the current row needs a cue the mode cannot drop. */
@media (forced-colors: active) {
	:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__list {
		border: 1px solid CanvasText;
	}

	:is(.frb-app, .frb-sell) .frb-devsearch .frb-devsearch__option.is-active {
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}
}