/* search-engine
   Component: templates/components/search-engine.php

   Live-search input + grouped results. Input chrome comes from the
   <input-field> rules in styles/forms.css; this file styles the
   results list below. */


search-engine {
	display: grid;
	gap: var(--field-gap);
}


search-results {
	display: grid;
	gap: 1rem;

	&:empty {
		display: none;
	}

	.loading,
	.no-results,
	.error {
		color: var(--ink-secondary);
		margin: 0;
	}

	.no-results {
		font-style: italic;
	}
}


.search-result-group {
	border: 1px solid var(--stroke-primary);
	border-radius: var(--control-radius);
	padding: var(--control-padding);
	padding-block: 1rem;
	padding-inline: 1.25rem;

	h3 {
		font-family: var(--font-ui);
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--ink-primary);
		margin: 0 0 0.75rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--stroke-primary);

		.count {
			font-weight: normal;
			color: var(--ink-auxiliary);
		}
	}

	.result-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: 0.25rem;

		li {
			margin: 0;
		}

		a {
			display: block;
			padding: 0.25rem 0;
		}
	}
}