/**
 * SearchPeak search box: the look of [searchpeak] (docs/plan/08-search-box.md) and of the results page
 * that [searchpeak_results] prints under its box.
 *
 * Every rule applies under .searchpeak only, so a theme's own search form on the same page keeps its
 * own styling; the one exception holds the page still behind an open overlay. Colours and lengths are
 * custom properties that Http\Assets prints from Settings → Site search → Search box, with no
 * fallbacks here: the panel is the one source of defaults. A box's own attributes override them in its
 * style attribute.
 *
 *   --searchpeak-bg, -text, -muted, -border, -accent, -highlight   the palette
 *   --searchpeak-highlight-text, --searchpeak-accent-soft          derived from it
 *   --searchpeak-padding, -spacing                                 the lengths
 *   --searchpeak-field-radius, -panel-radius                       the corners; one nested in a panel takes half
 *   --searchpeak-room                                              the open panel's height on screen, from search.js
 *
 * Plain CSS for older browsers: no color-mix(), no nesting, and :has() only in the overlay's scroll
 * lock, a rule those browsers drop; one that cannot read the translate property only fades.
 */

/* The box */

.searchpeak {
	position: relative;
	box-sizing: border-box;
	color: var(--searchpeak-text);
	font: inherit;
	text-align: start;
}

.searchpeak *,
.searchpeak *::before,
.searchpeak *::after {
	box-sizing: border-box;
}

/* The form itself too: a theme's form { display: … } would show the waiting Search overlay. */
.searchpeak[hidden],
.searchpeak [hidden] {
	display: none !important;
}

.searchpeak--dark {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {

	.searchpeak--auto {
		color-scheme: dark;
	}
}

.searchpeak .searchpeak-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

/* The field: the input is the box; the magnifier and the badge sit inside it. */

.searchpeak input[type="search"] {
	position: relative; /* Above the overlay's backdrop. */
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--searchpeak-padding);
	padding-inline-start: calc(var(--searchpeak-padding) * 2 + 1.25em);
	color: var(--searchpeak-text);
	font: inherit;
	line-height: 1.5;
	background: var(--searchpeak-bg);
	border: 1px solid var(--searchpeak-border);
	border-radius: var(--searchpeak-field-radius);
	box-shadow: none;
	caret-color: var(--searchpeak-accent);
	-webkit-appearance: none;
	appearance: none;
}

@media (hover: hover) {

	.searchpeak input[type="search"]:hover {
		border-color: var(--searchpeak-muted);
	}
}

/* The ring above, which a theme's input[type="search"]:focus would outrank, and no theme shadow beside
   it. A text field matches :focus-visible whenever it has focus, so :focus says the same. */
.searchpeak input[type="search"]:focus {
	outline: 2px solid var(--searchpeak-accent);
	outline-offset: 2px;
	box-shadow: none;
}

.searchpeak input[type="search"]::placeholder {
	color: var(--searchpeak-muted);
	opacity: 1;
}

/* The field's own clear control (Chrome, Safari) drawn in the palette; Safari's start inset goes. */
.searchpeak input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

.searchpeak input[type="search"]::-webkit-search-cancel-button {
	width: 0.875em;
	height: 0.875em;
	margin-inline-start: calc(var(--searchpeak-spacing) / 2);
	background: var(--searchpeak-muted);
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.searchpeak input[type="search"]::-webkit-search-cancel-button:hover {
	background: var(--searchpeak-accent);
}

/* Selected text takes the highlight pair, whose contrast the palette guarantees. */
.searchpeak ::selection {
	color: var(--searchpeak-highlight-text);
	background: var(--searchpeak-highlight);
}

/* The buttons: the magnifier, Clear, the corrected search and the overlay's Close, with nothing left of
   a theme's button styles. */
.searchpeak .searchpeak-submit,
.searchpeak .searchpeak-clear,
.searchpeak .searchpeak-corrected,
.searchpeak .searchpeak-close {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--searchpeak-accent);
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.searchpeak .searchpeak-submit {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 0 var(--searchpeak-padding);
	border-radius: var(--searchpeak-field-radius);
}

.searchpeak .searchpeak-submit svg {
	display: block;
	width: 1.25em;
	height: 1.25em;
}

.searchpeak .searchpeak-kbd {
	position: absolute;
	top: 50%;
	inset-inline-end: var(--searchpeak-padding);
	z-index: 1;
	padding: 0.125em 0.375em;
	color: var(--searchpeak-muted);
	font: inherit;
	font-size: 0.75em;
	line-height: 1.5;
	white-space: nowrap;
	background: none;
	border: 1px solid var(--searchpeak-border);
	border-radius: 0.25em;
	box-shadow: none;
	transform: translateY(-50%);
	pointer-events: none;
}

/* The badge gives way to typing and to the field's own clear control. */
.searchpeak input:focus ~ .searchpeak-kbd,
.searchpeak input:not(:placeholder-shown) ~ .searchpeak-kbd {
	display: none;
}

/* A placeholder stops short of the badge; search.js marks the form whose badge shows. The room stays
   while the badge hides, so a field sized by its content keeps its width; an open overlay, whose
   width is its own, gives it back to the clear control. */
@media (hover: hover) {

	.searchpeak.searchpeak--shortcut input[type="search"] {
		padding-inline-end: calc(var(--searchpeak-padding) * 2 + 3em);
	}
}

/* The panel: the list scrolls between what stays in view above it (the suggestion, the Recent heading)
   and below it (See all results, the hints). It is no taller than the room below the field, but at
   least 12rem: a box low on the page still gets a usable panel, and the page scrolls to the rest. */

.searchpeak .searchpeak-results {
	position: absolute;
	top: calc(100% + var(--searchpeak-spacing));
	inset-inline-start: 0;
	inset-inline-end: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	max-height: min(70vh, max(var(--searchpeak-room, 70vh), 12rem));
	overflow: auto; /* Only if what stays in view outgrows it. */
	padding: calc(var(--searchpeak-spacing) / 2) 0;
	overflow-wrap: break-word;
	background: var(--searchpeak-bg);
	border: 1px solid var(--searchpeak-border);
	border-radius: var(--searchpeak-panel-radius);
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.16);
	scrollbar-color: var(--searchpeak-border) transparent;
	scrollbar-width: thin;
}

.searchpeak .searchpeak-results > * {
	flex-shrink: 0;
}

.searchpeak .searchpeak-list {
	flex: 0 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	scrollbar-width: thin; /* Its colour is inherited. */
}

/* Rings drawn inside a panel: the dropdown's overflow would cut their sides. */
.searchpeak .searchpeak-results :focus-visible,
.searchpeak.searchpeak--page :focus-visible {
	outline-offset: -2px;
}

/* Options: a result (thumbnail, type, title, snippet) or a recent or popular search. */

.searchpeak .searchpeak-option {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.125em var(--searchpeak-spacing);
	align-items: start;
	padding: calc(var(--searchpeak-padding) / 2) var(--searchpeak-padding);
	padding-inline-start: calc(var(--searchpeak-padding) - 2px);
	border-inline-start: 2px solid transparent;
	cursor: pointer;
}

/* Results are links: three classes outrank a theme's content links (.entry .entry-content a). */
.searchpeak .searchpeak-results .searchpeak-option,
.searchpeak.searchpeak--page .searchpeak-option {
	color: var(--searchpeak-text);
	text-decoration: none;
}

.searchpeak .searchpeak-option[aria-selected="true"] {
	background: var(--searchpeak-accent-soft);
	border-inline-start-color: var(--searchpeak-accent);
}

/* Muted text on the tint falls under 4.5:1, so it takes the text colour there, and so does the icon. */
.searchpeak .searchpeak-option[aria-selected="true"] .searchpeak-type,
.searchpeak .searchpeak-option[aria-selected="true"] .searchpeak-icon {
	color: var(--searchpeak-text);
}

/* The pointer's option takes the tint without the edge, so it never passes for the keyboard's; a
   screen without hover would keep a tapped option tinted. */
@media (hover: hover) {

	.searchpeak .searchpeak-option:hover {
		background: var(--searchpeak-accent-soft);
	}

	.searchpeak .searchpeak-option:hover .searchpeak-type,
	.searchpeak .searchpeak-option:hover .searchpeak-icon {
		color: var(--searchpeak-text);
	}
}

.searchpeak .searchpeak-option--thumb {
	grid-template-columns: 3rem minmax(0, 1fr);
}

.searchpeak .searchpeak-option--thumb > span {
	grid-column: 2;
}

.searchpeak .searchpeak-thumb {
	grid-row: span 3;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	background: var(--searchpeak-accent-soft); /* The tile a lazy image loads into. */
	border-radius: calc(var(--searchpeak-panel-radius) / 2);
}

.searchpeak .searchpeak-type {
	color: var(--searchpeak-muted);
	font-size: 0.75em;
}

/* The date after the type; the dot is drawn, not read: search.js puts a space before the date. */
.searchpeak .searchpeak-date {
	white-space: nowrap;
}

.searchpeak .searchpeak-date::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: 0.375em;
}

/* A recent or popular search: its group's icon, then the text. */
.searchpeak .searchpeak-option--query {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
}

.searchpeak .searchpeak-icon {
	display: block;
	width: 1em;
	height: 1em;
	color: var(--searchpeak-muted);
}

.searchpeak .searchpeak-snippet {
	font-size: 0.875em;
	line-height: 1.45;
}

/* Bold is the cue besides colour (WCAG 2.1 1.4.1). Each line of a wrapped mark keeps its padding. */
.searchpeak mark {
	padding: 0 0.1em;
	color: var(--searchpeak-highlight-text);
	font-weight: 600;
	background: var(--searchpeak-highlight);
	border-radius: 0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Recent and popular searches, the Recent heading above the list with its Clear button. */

.searchpeak .searchpeak-group + .searchpeak-group {
	margin-top: calc(var(--searchpeak-spacing) / 2);
	padding-top: calc(var(--searchpeak-spacing) / 2);
	border-top: 1px solid var(--searchpeak-border);
}

.searchpeak .searchpeak-group-label {
	padding: calc(var(--searchpeak-spacing) / 2) var(--searchpeak-padding);
	color: var(--searchpeak-muted);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.searchpeak .searchpeak-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--searchpeak-spacing);
	padding-inline-end: var(--searchpeak-padding);
}

.searchpeak .searchpeak-clear,
.searchpeak .searchpeak-corrected {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The words the correction changed, weighted like a match. */
.searchpeak .searchpeak-corrected b {
	font-weight: 600;
}

.searchpeak .searchpeak-clear {
	font-size: 0.75em;
}

.searchpeak .searchpeak-suggestion,
.searchpeak .searchpeak-summary {
	margin: 0;
	padding: calc(var(--searchpeak-spacing) / 2) var(--searchpeak-padding);
}

/* No results, or a failed request: what happened, then what to try in muted. */
.searchpeak .searchpeak-empty {
	margin: 0;
	padding: var(--searchpeak-spacing) var(--searchpeak-padding);
}

.searchpeak .searchpeak-empty-hint {
	display: block;
	margin-top: 0.125em;
	color: var(--searchpeak-muted);
	font-size: 0.875em;
}

/* The panel's paragraphs keep the box's colours: three classes outrank a theme's paragraph colour
   (.entry .entry-content p), which a dark box would show dark on dark. */
.searchpeak .searchpeak-results .searchpeak-suggestion,
.searchpeak .searchpeak-results .searchpeak-empty,
.searchpeak.searchpeak--page .searchpeak-suggestion,
.searchpeak.searchpeak--page .searchpeak-empty {
	color: var(--searchpeak-text);
}

.searchpeak .searchpeak-results .searchpeak-hints,
.searchpeak.searchpeak--page .searchpeak-summary {
	color: var(--searchpeak-muted);
}

.searchpeak .searchpeak-all {
	display: block;
	margin-top: calc(var(--searchpeak-spacing) / 2);
	padding: var(--searchpeak-spacing) var(--searchpeak-padding) calc(var(--searchpeak-spacing) / 2);
	font-weight: 600;
	border-top: 1px solid var(--searchpeak-border);
}

.searchpeak .searchpeak-results .searchpeak-all {
	color: var(--searchpeak-accent);
	text-decoration: none;
}

.searchpeak .searchpeak-results .searchpeak-all:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* How many the full page holds. Text on the tint, as on an active option; forced colours paint the
   transparent edge. */
.searchpeak .searchpeak-total {
	display: inline-block;
	padding: 0 0.5em;
	color: var(--searchpeak-text);
	font-size: 0.75em;
	line-height: 1.6;
	vertical-align: 0.1em;
	background: var(--searchpeak-accent-soft);
	border: 1px solid transparent;
	border-radius: 1em;
}

/* Keyboard hints and the shortcut badge: for a keyboard, so not on touch screens. */

.searchpeak .searchpeak-hints {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--searchpeak-spacing) / 2) calc(var(--searchpeak-spacing) * 2);
	margin: calc(var(--searchpeak-spacing) / 2) 0 0;
	padding: var(--searchpeak-spacing) var(--searchpeak-padding) calc(var(--searchpeak-spacing) / 2);
	font-size: 0.75em;
	border-top: 1px solid var(--searchpeak-border);
}

.searchpeak .searchpeak-hints kbd {
	margin-inline-end: 0.375em;
	padding: 0 0.375em;
	color: inherit;
	font: inherit;
	background: none;
	border: 1px solid var(--searchpeak-border);
	border-radius: 0.25em;
	box-shadow: none;
}

@media (hover: none) {

	.searchpeak .searchpeak-hints,
	.searchpeak .searchpeak-kbd {
		display: none;
	}
}

/* The results page ([searchpeak_results], D33): the panel in the page's flow under its box, holding
   the correction, the count or the no-results message, the results and the links to the other pages.
   The rules above for those parts apply to it too; no shadow, since nothing floats. */

.searchpeak.searchpeak--page {
	margin-top: var(--searchpeak-spacing);
	padding: calc(var(--searchpeak-spacing) / 2) 0;
	overflow-wrap: break-word;
	background: var(--searchpeak-bg);
	border: 1px solid var(--searchpeak-border);
	border-radius: var(--searchpeak-panel-radius);
}

/* The list grows with the page, so it scrolls with it, without a theme's bullets or indents. */
.searchpeak.searchpeak--page .searchpeak-list {
	overflow: visible;
	list-style: none;
}

.searchpeak.searchpeak--page .searchpeak-list > li {
	margin: 0;
	padding: 0;
}

.searchpeak .searchpeak-summary {
	font-size: 0.875em;
}

/* The correction is a link here, not a button: three classes keep a theme's link colour off it. */
.searchpeak.searchpeak--page .searchpeak-corrected {
	color: var(--searchpeak-accent);
	text-decoration: underline;
}

/* The pages, under a divider as the hints are, in paginate_links()' own classes: three classes outrank
   a theme's .pagination .page-numbers. Forced colours paint every transparent edge. */
.searchpeak .searchpeak-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--searchpeak-spacing) / 2);
	margin-top: calc(var(--searchpeak-spacing) / 2);
	padding: var(--searchpeak-spacing) var(--searchpeak-padding) calc(var(--searchpeak-spacing) / 2);
	border-top: 1px solid var(--searchpeak-border);
}

.searchpeak .searchpeak-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	margin: 0;
	padding: 0.25em 0.5em;
	color: var(--searchpeak-accent);
	font: inherit;
	line-height: 1.5;
	text-decoration: none;
	background: none;
	border: 1px solid transparent;
	border-radius: calc(var(--searchpeak-panel-radius) / 2);
	box-shadow: none;
}

/* The page shown: text on the tint, as on an active option, in weight 600. */
.searchpeak .searchpeak-pages .current {
	color: var(--searchpeak-text);
	font-weight: 600;
	background: var(--searchpeak-accent-soft);
}

.searchpeak .searchpeak-pages .dots {
	color: var(--searchpeak-muted);
}

.searchpeak .searchpeak-pages a.page-numbers:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Compact: a narrow field whose panel opens wider, toward the page; search.js moves the panel back
   inside the viewport when the box sits near its other edge. Two classes: a block theme's constrained
   layout gives its children a max-width after this file. */

.searchpeak.searchpeak--compact {
	max-width: 20rem;
}

.searchpeak--compact .searchpeak-results {
	inset-inline-start: auto;
	min-width: min(32rem, calc(100vw - 2rem));
}

/* The overlay (D24): the same form, fixed and centred while in use, over a backdrop. A click on the
   backdrop, the form itself, leaves the field, and the panel closes. The overlay's Close button shows
   only where it fills the screen. */

.searchpeak .searchpeak-close {
	display: none;
	grid-area: 1 / 2;
	padding: 0 calc(var(--searchpeak-padding) / 2);
	font-weight: 600;
}

.searchpeak--overlay.searchpeak--open {
	position: fixed;
	top: 10vh;
	right: 0;
	left: 0;
	z-index: 100000;
	width: min(40rem, calc(100vw - 2rem));
	max-width: none;
	margin: 0 auto;
}

.searchpeak--overlay.searchpeak--open::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgb(0 0 0 / 0.4);
}

/* Fixed, the panel ends above an on-screen keyboard, and its list keeps the scroll to itself. */
.searchpeak--overlay.searchpeak--open .searchpeak-results {
	inset-inline-start: 0;
	min-width: 0;
	max-height: min(70vh, var(--searchpeak-room, 70vh));
}

.searchpeak--overlay.searchpeak--open .searchpeak-list {
	overscroll-behavior: contain;
}

.searchpeak--overlay.searchpeak--open .searchpeak-kbd {
	display: none;
}

.searchpeak--overlay.searchpeak--open input[type="search"] {
	padding-inline-end: var(--searchpeak-padding);
}

/* The page behind an open overlay holds still; browsers without :has() drop this rule alone and scroll
   it as before. Meanwhile a theme whose body sets overflow-x loses its sticky header behind the
   backdrop, and a page without a scrollbar gains the gutter. */
html:has(.searchpeak--overlay.searchpeak--open) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* Narrow screens, and a phone on its side: the overlay takes the whole viewport. The field and its
   Close button stay on top while the results scroll below them, ending above the keyboard. */

@media (max-width: 40rem), (max-height: 32rem) and (pointer: coarse) {

	.searchpeak--overlay.searchpeak--open {
		top: 0;
		bottom: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto minmax(0, 1fr);
		gap: var(--searchpeak-spacing);
		width: auto;
		padding: var(--searchpeak-padding);
		background: var(--searchpeak-bg);
	}

	.searchpeak--overlay.searchpeak--open::before {
		content: none;
	}

	.searchpeak--overlay.searchpeak--open .searchpeak-submit {
		top: var(--searchpeak-padding);
		bottom: auto;
		inset-inline-start: var(--searchpeak-padding);
		height: calc(var(--searchpeak-padding) * 2 + 1.5em + 2px);
	}

	.searchpeak--overlay.searchpeak--open .searchpeak-close {
		display: block;
	}

	.searchpeak--overlay.searchpeak--open .searchpeak-results {
		position: static;
		grid-column: 1 / -1;
		grid-row: 2;
		align-self: start;
		max-height: min(100%, var(--searchpeak-room, 100%));
		box-shadow: none;
	}
}

/* Touch: the field's text at 16px or more, under which iOS zooms the page in on focus, and options,
   Clear and See all results at least 44px tall for a finger. */

@media (pointer: coarse) {

	.searchpeak input[type="search"],
	.searchpeak .searchpeak-submit {
		font-size: max(1em, 16px);
	}

	.searchpeak .searchpeak-option {
		min-height: 44px;
		align-content: center;
	}

	.searchpeak .searchpeak-toolbar {
		padding-inline-end: 0;
	}

	.searchpeak .searchpeak-clear {
		min-height: 44px;
		padding: 0 var(--searchpeak-padding);
	}

	.searchpeak .searchpeak-all {
		display: flex;
		align-items: center;
		gap: 0.375em; /* A flex row drops the space before the count. */
		min-height: 44px;
	}

	.searchpeak .searchpeak-pages .page-numbers {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Motion: arrivals only, quick and decelerating, and leaving is instant. The panel drops in from just
   above the field each time it opens (not when its content changes) and an overlay fades in; the open
   overlay form never moves, since a transform would confine its fixed backdrop to the form. A request
   still out after 0.2s sweeps a line along the field's foot. With reduced motion nothing travels: the
   panel fades and the magnifier breathes instead. */

@keyframes searchpeak-fade {

	from {
		opacity: 0;
	}
}

@keyframes searchpeak-arrive {

	from {
		opacity: 0;
		translate: 0 -0.375rem;
	}
}

@keyframes searchpeak-scan {

	from {
		background-position: -40% 100%;
	}

	to {
		background-position: 140% 100%;
	}
}

@keyframes searchpeak-breathe {

	to {
		opacity: 0.35;
	}
}

.searchpeak .searchpeak-results {
	animation: searchpeak-fade 0.12s ease-out;
}

.searchpeak--overlay.searchpeak--open {
	animation: searchpeak-fade 0.2s ease-out;
}

@media (prefers-reduced-motion: no-preference) {

	.searchpeak .searchpeak-results {
		animation: searchpeak-arrive 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.searchpeak.searchpeak--busy input[type="search"] {
		background-image: linear-gradient(var(--searchpeak-accent), var(--searchpeak-accent));
		background-repeat: no-repeat;
		background-size: 25% 2px;
		animation: searchpeak-scan 0.9s 0.2s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
	}
}

@media (prefers-reduced-motion: reduce) {

	.searchpeak.searchpeak--busy .searchpeak-submit svg {
		animation: searchpeak-breathe 0.6s 0.2s ease-in-out infinite alternate both;
	}
}

/* Forced colours drop the tint and paint every transparent edge: the active option keeps its own edge
   and an outline, the page shown has its edge in Highlight, and the clear control, drawn as a mask,
   takes the button text colour. */

@media (forced-colors: active) {

	.searchpeak input[type="search"]::-webkit-search-cancel-button {
		background: ButtonText;
		forced-color-adjust: none;
	}

	.searchpeak .searchpeak-option {
		border-inline-start-color: Canvas;
	}

	.searchpeak .searchpeak-option[aria-selected="true"] {
		border-inline-start-color: Highlight;
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	.searchpeak .searchpeak-pages .current {
		border-color: Highlight;
	}
}