/*
 * Fortuna UI — zoekvenster (modal). Zelfde opbouw als het zoekpalet van Fortuna Filters
 * (invoer, "Ga naar", berichten, Alle resultaten), nu in de tokens van 2026.
 *   <dialog class="fu-sd"> <form class="fu-sd__form">…</form> <div class="fu-sd__body"><ul class="fu-sd__list" role="listbox">…</ul></div> <footer class="fu-sd__foot">…</footer> </dialog>
 * Telefoon: over het hele scherm. Openen: knop met data-fortuna-zoek of Cmd/Ctrl+K.
 */
.fu-sd {
	width: min(var(--fu-zoek-breedte), calc(100% - var(--fu-space-8)));
	max-width: none;
	max-height: min(var(--fu-zoek-hoogte), calc(100dvh - var(--fu-space-24)));
	margin: 10vh auto auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--fu-r-lg);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg);
	box-shadow: var(--fu-shadow-lg), 0 0 0 var(--fu-lijn) var(--fu-c-line);
	font-family: var(--fu-font-text);
}

.fu-sd[open] {
	display: flex;
	flex-direction: column;
	animation: fu-sd-in var(--fu-beweging-paneel);
}

.fu-sd::backdrop {
	background: var(--fu-scrim-sterk);
	-webkit-backdrop-filter: blur(var(--fu-blur-s));
	backdrop-filter: blur(var(--fu-blur-s));
	animation: fu-sd-scrim var(--fu-beweging-paneel);
}

@keyframes fu-sd-in {
	from { opacity: 0; transform: translateY(var(--fu-beweeg-m)) scale(0.985); }
	to { opacity: 1; transform: none; }
}

@keyframes fu-sd-scrim {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fu-sd__form {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--fu-space-3);
	min-height: var(--fu-control-2xl);
	padding: 0 var(--fu-space-3) 0 var(--fu-space-5);
	border-bottom: var(--fu-lijn) solid var(--fu-c-line);
}

.fu-sd__form > .fu-icon { width: var(--fu-icoon-xl); height: var(--fu-icoon-xl); color: var(--fu-c-brand); }

.fu-sd__input {
	flex: 1;
	min-width: 0;
	height: var(--fu-control-l);
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--fu-c-fg);
	font: 500 var(--fu-fs-lg) / 1.2 var(--fu-font-text);
	letter-spacing: -0.01em;
}

.fu-sd__input::placeholder { color: var(--fu-c-fg-faint); opacity: 1; }
.fu-sd__input::-webkit-search-cancel-button { display: none; }

.fu-sd__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--fu-space-2);
}

.fu-sd__status {
	margin: 0;
	padding: var(--fu-space-2-5) var(--fu-space-3) var(--fu-space-1);
	color: var(--fu-c-fg-sub);
	font-size: var(--fu-fs-sm);
}

.fu-sd__status:empty { display: none; }

.fu-sd__list { margin: 0; padding: 0; list-style: none; }

.fu-sd__group {
	padding: var(--fu-space-3-5) var(--fu-space-3) var(--fu-space-1-5);
	color: var(--fu-c-fg-sub);
	font: 600 var(--fu-fs-xs) / 1 var(--fu-font-text);
	letter-spacing: var(--fu-track-label);
	text-transform: uppercase;
}

.fu-sd__opt {
	display: grid;
	grid-template-columns: var(--fu-control-s) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--fu-space-3);
	padding: var(--fu-space-2) var(--fu-space-3) var(--fu-space-2) var(--fu-space-2);
	border-radius: var(--fu-r-md);
	--fu-r-parent: var(--fu-r-md);
	--fu-pad: var(--fu-space-2);
	cursor: pointer;
	scroll-margin: var(--fu-space-2);
}

.fu-sd__ico {
	display: grid;
	place-items: center;
	width: var(--fu-control-s);
	height: var(--fu-control-s);
	border-radius: var(--fu-r-binnen);
	background: var(--fu-c-bg-sub);
	color: var(--fu-c-fg-sub);
}

.fu-sd__ico .fu-icon { width: var(--fu-icoon-m); height: var(--fu-icoon-m); }
.fu-sd__copy { display: grid; gap: var(--fu-space-0-5); min-width: 0; }
.fu-sd__label { overflow: hidden; font-size: var(--fu-fs-base); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fu-sd__meta { overflow: hidden; color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.fu-sd__label mark { background: none; color: var(--fu-c-brand); font-weight: 700; }
.fu-sd__hint { color: var(--fu-c-fg-faint); opacity: 0; transition: opacity var(--fu-beweging-snel); }
.fu-sd__hint .fu-icon { width: var(--fu-icoon-m); height: var(--fu-icoon-m); }

.fu-sd__opt[aria-selected="true"] { background: var(--fu-c-bg-sub); }
.fu-sd__opt[aria-selected="true"] .fu-sd__ico { background: var(--fu-c-brand); color: var(--fu-c-on-brand); }
.fu-sd__opt[aria-selected="true"] .fu-sd__hint { opacity: 1; }

.fu-sd__empty {
	display: grid;
	justify-items: center;
	gap: var(--fu-space-2-5);
	padding: var(--fu-space-10) var(--fu-space-6);
	color: var(--fu-c-fg-sub);
	text-align: center;
}

.fu-sd__empty .fu-icon { width: var(--fu-icoon-3xl); height: var(--fu-icoon-3xl); color: var(--fu-c-fg-faint); }
.fu-sd__empty b { color: var(--fu-c-fg); }

.fu-sd__foot {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--fu-space-4);
	min-height: var(--fu-control-xl);
	padding: 0 var(--fu-space-5);
	border-top: var(--fu-lijn) solid var(--fu-c-line);
	background: var(--fu-c-surface-sub);
}

.fu-sd__keys { display: flex; flex-wrap: wrap; gap: var(--fu-space-1) var(--fu-space-3-5); color: var(--fu-c-fg-sub); font-size: var(--fu-fs-xs); }
.fu-sd__keys span { display: inline-flex; align-items: center; gap: var(--fu-space-1-5); }

.fu-sd__keys kbd {
	display: inline-grid;
	place-items: center;
	min-width: var(--fu-badge-h);
	height: var(--fu-badge-h);
	padding: 0 var(--fu-space-1);
	border: var(--fu-lijn) solid var(--fu-c-line);
	border-radius: var(--fu-r-xs);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg-sub);
	font: 600 var(--fu-fs-2xs) / 1 var(--fu-font-text);
}

.fu-sd__close { flex: none; }
.fu-sd__foot [hidden] { display: none; }

/* Pagina niet laten scrollen onder het venster (palette.js zet deze klasse en de bovenmarge van de body). */
html.ff-palette-lock,
html.ff-palette-lock body { overflow: hidden; }
html.ff-palette-lock body { position: fixed; inset-inline: 0; width: 100%; }

@media (max-width: 599.98px) {
	.fu-sd {
		width: 100%;
		height: 100dvh;
		max-height: none;
		margin: 0;
		border-radius: 0;
	}

	.fu-sd[open] { animation-name: fu-sd-up; }
	.fu-sd__form { padding-top: var(--fu-inset-top); }
	.fu-sd__keys { display: none; }
	.fu-sd__foot { justify-content: flex-end; padding-bottom: var(--fu-inset-bottom); }

	@keyframes fu-sd-up {
		from { opacity: 0; transform: translateY(var(--fu-beweeg-xl)); }
		to { opacity: 1; transform: none; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.fu-sd[open],
	.fu-sd::backdrop { animation: none; }
}