/*
 * Search and the 404.
 *
 * Search is a utility. Its visual language is derived from the homepage and the
 * Hub rather than invented: a focused surface, an index of results, a designed
 * way forward when there is nothing.
 */

/* --- the focused panel ------------------------------------------------------ */

.dcv-search {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--dcv-space-lg) var(--dcv-gutter);
	background: oklch(0.205 0.019 132 / 0.88);
}

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

.dcv-search__inner {
	width: min(46rem, 100%);
	margin-top: min(12vh, 6rem);
	padding: var(--dcv-space-md);
	background: var(--dcv-canvas);
	border-radius: var(--dcv-radius-lg);
	border: 1px solid var(--dcv-line);
}

.dcv-search__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dcv-space-sm);
	margin-bottom: var(--dcv-space-sm);
}

.dcv-search__title { margin: 0; color: var(--dcv-cat-ink); }

.dcv-search__close {
	background: none;
	border: 1px solid transparent;
	border-radius: var(--dcv-radius);
	padding: var(--dcv-space-2xs) var(--dcv-space-xs);
	min-height: 44px;
	cursor: pointer;
	color: var(--dcv-muted);
	font: inherit;
	transition: color var(--dcv-duration-fast) var(--dcv-ease),
	            border-color var(--dcv-duration-fast) var(--dcv-ease),
	            background-color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-search__close:hover,
.dcv-search__close:focus-visible {
	color: var(--dcv-ink);
	border-color: var(--dcv-line-strong);
	background-color: var(--dcv-canvas-sunk);
}

.dcv-search__label {
	display: block;
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
	color: var(--dcv-muted);
	margin-bottom: var(--dcv-space-2xs);
}

.dcv-search__field {
	display: flex;
	align-items: center;
	gap: var(--dcv-space-2xs);
	border-bottom: 1px solid var(--dcv-line-strong);
	padding-bottom: var(--dcv-space-2xs);
}

.dcv-search__field .dcv-mark { color: var(--dcv-muted); }

.dcv-search__field input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--dcv-font-display);
	font-size: var(--dcv-display-4);
	color: var(--dcv-ink);
	padding: var(--dcv-space-2xs) 0;
}

.dcv-search__field input:focus { outline: none; }
.dcv-search__field:focus-within { border-bottom-color: var(--dcv-cat-ink); }

.dcv-search__echo { font-style: normal; }

/* --- the designed empty state ----------------------------------------------- */

.dcv-empty-state { max-width: 52ch; }

.dcv-empty-state__lead {
	font-size: var(--dcv-text-prose);
	line-height: 1.55;
	color: var(--dcv-muted);
	margin: 0 0 var(--dcv-space-lg);
}

.dcv-empty-state__kicker { color: var(--dcv-cat-ink); margin-bottom: var(--dcv-space-xs); }

.dcv-empty-state__paths {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
}

.dcv-empty-state__paths li { border-bottom: 1px solid var(--dcv-line); }

.dcv-empty-state__paths a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-sm);
	padding: var(--dcv-space-xs) 0;
	text-decoration: none;
	font-family: var(--dcv-font-display);
	font-size: 1.05rem;
}

.dcv-empty-state__paths a:hover { color: var(--dcv-cat-ink); }
.dcv-empty-state__paths span { font-size: var(--dcv-text-xs); color: var(--dcv-muted); }

/* --- the 404 ---------------------------------------------------------------- */

.dcv-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcv-space-xs);
	margin-top: var(--dcv-space-md);
}