/*
 * c-autocomplete — sugerencias de un buscador (js/c-autocomplete.js).
 *   .c-autocomplete              contenedor (posiciona la lista)
 *   .c-autocomplete__list        listbox; data-state="closed" lo oculta (base.css)
 *   .c-autocomplete__group-label nombre del grupo (Obras, Artistas…)
 *   .c-autocomplete__option      sugerencia; [aria-selected="true"] = la activa (teclado)
 *   .c-autocomplete__option--search  "Buscar «…»", al final
 * La base solo despliega la lista debajo del campo y marca la activa; lo visual, el theme.
 */
@layer components {
	.c-autocomplete { position: relative; }
	.c-autocomplete__list {
		position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: var(--z-dropdown, 800);
		max-block-size: min(70vh, 30rem); overflow-y: auto;
		margin: 0; padding: var(--space-2xs) 0; list-style: none;
		background: var(--color-bg); border: var(--border-w) solid var(--color-border);
	}
	.c-autocomplete__list ul { margin: 0; padding: 0; list-style: none; }
	.c-autocomplete__group-label { display: block; padding: var(--space-2xs) var(--space-s) 0; font-size: var(--step--1); color: var(--color-muted); }
	.c-autocomplete__option { padding: var(--space-3xs) var(--space-s); cursor: pointer; }
	.c-autocomplete__option[aria-selected="true"], .c-autocomplete__option:hover { background: var(--color-surface); }
	.c-autocomplete__option--search { margin-block-start: var(--space-2xs); border-block-start: var(--border-w) solid var(--color-border); }
}