/**
 * CVG error search + diagnostic widget.
 *
 * Palette matches error-library.css, which uses #0073aa rather than the brand orange — this
 * section of the site is deliberately utilitarian, not marketing.
 *
 * Severity colours are the ones already in error-library.css, extended with `informational`.
 * The existing stylesheet only defines `notice`, which is the old meta value; both are kept so
 * historical markup does not lose its colour.
 */

.cvg-sev--critical,
.severity-badge--critical      { background: #fde8e8; color: #c0392b; }
.cvg-sev--warning,
.severity-badge--warning       { background: #fef3cd; color: #856404; }
.cvg-sev--informational,
.severity-badge--informational,
.severity-badge--notice        { background: #d4edda; color: #155724; }

.severity-dot--informational   { background: #27ae60; }

.cvg-sev {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ── Header search ──────────────────────────────────────────────────────────── */

.cvg-search {
	position: relative;
	flex: 1 1 320px;
	max-width: 520px;
	margin: 0 20px;
}

.cvg-search__form { display: flex; }

.cvg-search__input {
	width: 100%;
	padding: 10px 14px;
	border: 2px solid #d8dde2;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.3;
	background: #fff;
	transition: border-color .15s ease;
}

.cvg-search__input:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 3px rgba( 0, 115, 170, .15 );
}

.cvg-search__panel {
	display: none;
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	z-index: 9999;
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, .14 );
}

.cvg-search__panel.is-open { display: block; }

/* A fixed min-height while loading, so results appearing do not shove the page around. */
.cvg-search__panel.is-loading { min-height: 64px; }
.cvg-search__panel.is-loading::after {
	content: "Searching…";
	display: block;
	padding: 20px;
	color: #888;
	font-size: 14px;
}

.cvg-search__group {
	padding: 10px 14px 4px;
	border-top: 1px solid #f0f0f0;
}
.cvg-search__group:first-child { border-top: 0; }

.cvg-search__list { margin: 0; padding: 0; list-style: none; }

.cvg-search__link {
	display: block;
	padding: 10px 14px;
	border-bottom: 1px solid #f4f4f4;
	text-decoration: none;
	color: #1a1a1a;
}

.cvg-search__link:hover,
.cvg-search__link:focus,
.cvg-search__link.is-active {
	background: #f4f9fc;
	outline: none;
}

.cvg-search__title { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; }

.cvg-search__meta {
	display: flex;
	gap: 10px;
	margin-top: 3px;
	font-size: 12px;
	color: #777;
}

.cvg-search__empty { margin: 0; padding: 18px; font-size: 14px; color: #666; }
.cvg-search__empty a { color: #0073aa; }

/* ── Diagnostic widget ──────────────────────────────────────────────────────── */

.cvg-diagnostic {
	position: relative;
	margin: 28px 0;
	padding: 20px;
	background: #f9fbfc;
	border: 1px solid #e0e6ea;
	border-radius: 8px;
}

.cvg-diagnostic__label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
}

.cvg-diagnostic__input {
	width: 100%;
	padding: 11px 14px;
	border: 2px solid #d8dde2;
	border-radius: 6px;
	font-size: 15px;
	background: #fff;
}

.cvg-diagnostic__input:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 3px rgba( 0, 115, 170, .15 );
}

/* Reserved space, so typing a query does not push the article down the screen. */
.cvg-diagnostic__results {
	min-height: 0;
	margin-top: 10px;
}
.cvg-diagnostic__results.is-open { min-height: 140px; }

.cvg-diagnostic .cvg-search__link {
	background: #fff;
	border: 1px solid #e8edf0;
	border-radius: 5px;
	margin-bottom: 6px;
}

@media ( max-width: 860px ) {
	.cvg-search { order: 3; flex-basis: 100%; margin: 10px 0 0; max-width: none; }
	.cvg-search__panel { max-height: 60vh; }
}

@media ( prefers-reduced-motion: reduce ) {
	.cvg-search__input { transition: none; }
}