@layer components {
	/* ── Backdrop ── */
	.ml-command-search__backdrop {
		position: fixed;
		inset: 0;
		z-index: var(--z-modal);
		background: color-mix(in oklch, var(--background) 40%, transparent);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		animation: ml-command-search-fade-in var(--duration-fast) var(--ease-out)
			both;
	}

	@keyframes ml-command-search-fade-in {
		from {
			opacity: 0;
		}
	}

	/* ── Panel ── */
	.ml-command-search__panel {
		position: fixed;
		top: 7rem;
		left: 50%;
		z-index: var(--z-modal);
		display: flex;
		inline-size: min(37.5rem, calc(100vw - 2rem));
		flex-direction: column;
		border: var(--border-thin) solid var(--border);
		border-radius: var(--radius-xl);
		background: color-mix(in oklch, var(--surface) 98%, transparent);
		-webkit-backdrop-filter: blur(24px);
		backdrop-filter: blur(24px);
		box-shadow:
			0 0 0 1px color-mix(in oklch, var(--text) 5%, transparent),
			0 8px 32px color-mix(in oklch, var(--background) 30%, transparent),
			0 24px 64px color-mix(in oklch, var(--background) 50%, transparent);
		overflow: hidden;
		transform: translateX(-50%);
		animation: ml-command-search-slide-in var(--duration-fast) var(--ease-out)
			both;
	}

	@keyframes ml-command-search-slide-in {
		from {
			opacity: 0;
			transform: translate(-50%, -0.5rem) scale(0.97);
		}
	}

	@media (max-width: 40rem) {
		.ml-command-search__panel {
			top: var(--ml-space-4);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.ml-command-search__backdrop,
		.ml-command-search__panel {
			animation: none;
		}
	}

	/* ── Input row ── */
	.ml-command-search__input-row {
		display: flex;
		align-items: center;
		gap: var(--ml-space-2-5);
		border-block-end: var(--border-thin) solid var(--border);
		padding: 0.875rem 1rem;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);
	}

	.ml-command-search__input-row:focus-within {
		border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
		box-shadow: inset 0 -1px 0
			color-mix(in oklch, var(--accent) 40%, var(--border));
	}

	.ml-command-search__search-icon {
		color: var(--text-muted);
		flex-shrink: 0;
		line-height: 1;
	}

	.ml-command-search__input {
		flex: 1;
		min-inline-size: 0;
		border: 0;
		background: transparent;
		color: var(--text);
		font-size: 0.9375rem;
		font-family: var(--font-sans);
		outline: none;
		box-shadow: none;
	}

	.ml-command-search__input:focus,
	.ml-command-search__input:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}

	.ml-command-search__input--lg {
		font-size: 1.0625rem;
	}

	.ml-command-search__input::placeholder {
		color: var(--text-muted);
	}

	.ml-command-search__esc {
		border: var(--border-thin) solid var(--border);
		border-radius: var(--radius-xs);
		background: var(--surface);
		padding: 0.1875rem 0.4375rem;
		font-family: var(--font-mono);
		font-size: var(--text-3xs);
		font-weight: 700;
		line-height: 1;
		color: var(--text-muted);
		cursor: pointer;
		flex-shrink: 0;
		transition: border-color var(--duration-fast) var(--ease-out);
	}

	.ml-command-search__esc:hover {
		border-color: var(--text-muted);
	}

	/* ── Results list ── */
	.ml-command-search__list {
		display: flex;
		flex-direction: column;
		gap: var(--ml-space-0-5);
		max-block-size: 22rem;
		overflow-y: auto;
		padding: var(--ml-space-2);
	}

	.ml-command-search__list::-webkit-scrollbar {
		inline-size: 4px;
	}

	.ml-command-search__list::-webkit-scrollbar-track {
		background: transparent;
	}

	.ml-command-search__list::-webkit-scrollbar-thumb {
		background: var(--border);
		border-radius: var(--radius-pill);
	}

	/* ── Group ── */
	.ml-command-search__group {
		padding-block-end: var(--ml-space-1);
	}

	.ml-command-search__group [cmdk-group-heading],
	.ml-command-search__group-heading {
		padding: 0.5rem 0.75rem 0.25rem;
		font-size: var(--text-3xs);
		font-weight: 700;
		font-family: var(--font-mono);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
		color: var(--text-muted);
		user-select: none;
	}

	/* ── Item ── */
	.ml-command-search__item {
		display: flex;
		inline-size: 100%;
		align-items: center;
		gap: var(--ml-space-2);
		border: none;
		border-radius: var(--radius-md);
		padding: 0.5625rem 0.75rem;
		background: transparent;
		cursor: pointer;
		transition: background var(--duration-fast) var(--ease-out);
		outline: none;
		text-align: left;
		font-size: var(--text-sm);
		font-weight: 550;
		color: var(--text);
	}

	.ml-command-search__item[aria-selected="true"],
	.ml-command-search__item[data-active] {
		background: var(--surface-2);
	}

	.ml-command-search__item:focus-visible {
		background: var(--surface-2);
		box-shadow: var(--focus-ring);
	}

	/* ── Empty / threshold ── */
	.ml-command-search__empty,
	.ml-command-search__threshold {
		padding: var(--ml-space-10) 1rem;
		text-align: center;
		color: var(--text-muted);
		font-size: var(--text-sm);
	}

	/* ── Footer (keyboard hints) ── */
	.ml-command-search__footer {
		display: flex;
		align-items: center;
		gap: var(--ml-space-5);
		border-block-start: var(--border-thin) solid var(--border);
		padding: 0.625rem 1rem;
		color: var(--text-muted);
		font-size: var(--text-2xs);
	}

	.ml-command-search__footer kbd {
		border: var(--border-thin) solid var(--border);
		border-radius: var(--radius-xs);
		padding: 0.125rem 0.3125rem;
		font-family: var(--font-mono);
		font-size: 0.5625rem;
		font-weight: 700;
		margin-inline-end: var(--ml-space-1);
	}
}