/**
 * Coywolf Search — suggestion list.
 *
 * Deliberately quiet: it inherits the theme's font and colours rather than
 * imposing its own, so the dropdown reads as part of whatever search box it
 * attached itself to.
 *
 * Both elements are positioned against the document rather than wrapped around
 * the theme's input, so nothing here depends on how a theme lays its search
 * form out.
 */

.coywolf-search-clear {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(127, 127, 127, 0.18);
	color: inherit;
	cursor: pointer;
	/* Full opacity: the icon inherits the theme's text colour, and dimming it
	   would push an already-borderline theme colour below the 3:1 contrast
	   floor for interface parts. Hover feedback comes from the background. */
	z-index: 99;
}

.coywolf-search-clear:hover,
.coywolf-search-clear:focus-visible {
	background: rgba(127, 127, 127, 0.32);
}

.coywolf-search-clear[hidden] {
	display: none;
}

/*
 * Browsers draw their own clear button inside input[type="search"], which would
 * sit right next to ours and give the field two crosses. Ours is the one that
 * also closes the suggestions, so the native one goes.
 */
input[data-coywolf-search-bound]::-webkit-search-cancel-button,
input[data-coywolf-search-bound]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

input[data-coywolf-search-bound]::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

.coywolf-search-suggestions {
	position: absolute;
	/* Explicit, because the width set on this element is the input's width and
	   a theme's box-sizing must not make the dropdown overhang it. */
	box-sizing: border-box;
	z-index: 100;
	max-height: min(60vh, 26em);
	overflow-y: auto;
	/* Every colour below falls back to what the panel used before it was
	   configurable: system colours that follow the page into dark mode. A
	   setting overrides one colour without disturbing the rest. */
	background: var(--coywolf-search-bg, Canvas);
	color: var(--coywolf-search-title, CanvasText);
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	text-align: start;
}

.coywolf-search-suggestions[hidden] {
	display: none;
}

/* Shown in place of suggestions when a real query matches nothing. Not an
   option: no pointer cursor, no hover or selected state, nothing to open. */
.coywolf-search-empty {
	padding: 0.75em 0.85em;
	font-size: 0.9em;
	opacity: 0.7;
	cursor: default;
}

.coywolf-search-option {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 0.75em;
	padding: 0.6em 0.85em;
	cursor: pointer;
	border-bottom: 1px solid rgba(127, 127, 127, 0.16);
	line-height: 1.35;
}

.coywolf-search-option:last-child {
	border-bottom: 0;
}

/* The first suggestion selects itself as results appear, so this has to read
   clearly as "Enter opens this" rather than as a faint hover tint. The default
   is a solid #f1f1f1 for light mode; dark mode keeps a translucent tint below,
   since a near-white bar would be wrong on a dark panel. A configured colour
   (the custom property) overrides both. */
.coywolf-search-option.is-active {
	background: var(--coywolf-search-active-bg, #f1f1f1);
	box-shadow: inset 3px 0 0 0 var(--coywolf-search-active-border, currentColor);
}

@media (prefers-color-scheme: dark) {
	.coywolf-search-option.is-active {
		background: var(--coywolf-search-active-bg, rgba(127, 127, 127, 0.2));
	}
}

.coywolf-search-option.is-active .coywolf-search-title {
	color: var(--coywolf-search-active-title, inherit);
}

.coywolf-search-option.is-active .coywolf-search-snippet {
	color: var(--coywolf-search-active-snippet, inherit);
}

/* A visitor running forced colours has asked the OS to decide; configured
   colours are overridden rather than fighting that. */
@media (forced-colors: active) {
	.coywolf-search-suggestions {
		background: Canvas;
		color: CanvasText;
	}

	.coywolf-search-option.is-active,
	.coywolf-search-option.is-active .coywolf-search-title,
	.coywolf-search-option.is-active .coywolf-search-snippet {
		background: Highlight;
		color: HighlightText;
	}
}

.coywolf-search-title {
	font-weight: 600;
	overflow-wrap: anywhere;
	color: var(--coywolf-search-title, inherit);
}

.coywolf-search-type {
	font-size: 0.75em;
	opacity: 0.65;
	white-space: nowrap;
	align-self: center;
}

.coywolf-search-snippet {
	grid-column: 1 / -1;
	margin-top: 0.2em;
	font-size: 0.85em;
	/* Dimmed only while the colour is inherited — a chosen colour is shown as
	   chosen, not at 80% of itself. */
	opacity: var(--coywolf-search-snippet-opacity, 0.8);
	color: var(--coywolf-search-snippet, inherit);
	overflow-wrap: anywhere;
}

.coywolf-search-suggestions mark {
	background: transparent;
	color: inherit;
	font-weight: 700;
	padding: 0;
}

/* Titles are already bold, so weight alone cannot mark the matched words
   there — 600 against 700 is invisible in most webfonts. The underline works
   in any theme colour scheme without touching contrast. */
.coywolf-search-title mark {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

/* The live region announces the suggestion count without showing it. */
.coywolf-search-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.coywolf-search-option {
		transition: background-color 90ms ease;
	}

	/*
	 * Animations rather than a transition from a hidden resting state, so the
	 * panel is never invisible when animation does not run — a headless or
	 * locked-down browser that skips these still shows a perfectly usable
	 * dropdown, it just appears instantly. Durations track FADE_MS in
	 * typeahead.js.
	 */
	.coywolf-search-suggestions.is-open {
		animation: coywolf-search-in 140ms ease;
	}

	.coywolf-search-suggestions.is-closing {
		animation: coywolf-search-out 140ms ease forwards;
	}
}

@keyframes coywolf-search-in {
	from {
		opacity: 0;
		transform: translateY(-2px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes coywolf-search-out {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-2px);
	}
}