/* components/list-search: the search form as a column of labelled controls, each control the kit's field look (a
   frame in the text colour, at least the touch target high, the kit's focus outline); the results a plain list, a
   result's title on a line of its own, its details under it. An empty alert takes no room; the heading shows the
   focus outline when a search moves focus to it. */
@layer components {
	.dv-list-search {
		margin-block: var(--space-3);
	}

	.dv-list-search-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		max-inline-size: 40em;
	}

	.dv-list-search-field {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.dv-list-search-label {
		font-weight: bold;
	}

	.dv-list-search-help {
		margin: 0;
	}

	.dv-list-search-input {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: var(--touch-target);
		padding: var(--space-1) var(--space-2);
		border: 2px solid var(--color-text);
		border-radius: var(--radius-panel);
		font: inherit;
		color: var(--color-text);
		background: var(--color-background);
	}

	.dv-list-search-input:focus-visible {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
		box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-focus-text);
	}

	.dv-list-search-actions {
		margin: 0;
	}

	.dv-list-search-alert {
		margin-block: var(--space-3);
	}

	.dv-list-search-alert:has(p:empty) {
		display: none;
	}

	.dv-list-search-heading:focus {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
	}

	.dv-list-search-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dv-list-search-list > li {
		margin-block: 0 var(--space-3);
		overflow-wrap: anywhere;
	}

	.dv-list-search-title {
		display: block;
		font-weight: bold;
	}

	.dv-list-search-detail {
		display: block;
	}
}