/**
 * Command palette.
 *
 * Self-contained: it renders identically on the front end and inside wp-admin,
 * so it cannot inherit a theme's or admin skin's typography and end up looking
 * like part of the page it floats above. Colours are declared locally rather
 * than pulled from the theme's tokens for the same reason — the palette must
 * look like one thing everywhere, including on screens the theme never styled.
 */

.an-cmdk-scrim,
.an-cmdk-box,
.an-cmdk-trigger {
	--an-k-bg: #ffffff;
	--an-k-fg: #14181c;
	--an-k-dim: #5c6670;
	--an-k-line: #e3e7ea;
	--an-k-hit: #f1f4f6;
	--an-k-accent: #1f7a3d;
	--an-k-shadow: 0 24px 64px rgba(12, 20, 28, 0.22), 0 2px 8px rgba(12, 20, 28, 0.08);
}

@media (prefers-color-scheme: dark) {
	.an-cmdk-scrim,
	.an-cmdk-box,
	.an-cmdk-trigger {
		--an-k-bg: #171b1f;
		--an-k-fg: #eef1f3;
		--an-k-dim: #949ea7;
		--an-k-line: #2b3238;
		--an-k-hit: #222930;
		--an-k-accent: #5fc07f;
		--an-k-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
	}
}

/* The theme's explicit toggle wins over the OS preference, both directions. */
[data-an-theme="light"] .an-cmdk-box,
[data-an-theme="light"] .an-cmdk-trigger {
	--an-k-bg: #ffffff;
	--an-k-fg: #14181c;
	--an-k-dim: #5c6670;
	--an-k-line: #e3e7ea;
	--an-k-hit: #f1f4f6;
	--an-k-accent: #1f7a3d;
}

[data-an-theme="dark"] .an-cmdk-box,
[data-an-theme="dark"] .an-cmdk-trigger {
	--an-k-bg: #171b1f;
	--an-k-fg: #eef1f3;
	--an-k-dim: #949ea7;
	--an-k-line: #2b3238;
	--an-k-hit: #222930;
	--an-k-accent: #5fc07f;
}

#an-cmdk[hidden] { display: none; }

.an-cmdk-on { overflow: hidden; }

.an-cmdk-scrim {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(10, 16, 22, 0.42);
	backdrop-filter: saturate(140%) blur(3px);
}

.an-cmdk-box {
	position: fixed;
	z-index: 100001;
	top: 12vh;
	left: 50%;
	transform: translateX(-50%);
	width: min(640px, calc(100vw - 32px));
	max-height: 68vh;
	display: flex;
	flex-direction: column;
	background: var(--an-k-bg);
	color: var(--an-k-fg);
	border: 1px solid var(--an-k-line);
	border-radius: 14px;
	box-shadow: var(--an-k-shadow);
	overflow: hidden;
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	animation: an-cmdk-in 0.13s ease-out;
}

@keyframes an-cmdk-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.an-cmdk-box { animation: none; }
}

/* ── input ─────────────────────────────────────────────────── */

.an-cmdk-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	border-bottom: 1px solid var(--an-k-line);
	flex: 0 0 auto;
}

.an-cmdk-caret {
	font-size: 17px;
	color: var(--an-k-dim);
}

.an-cmdk-input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--an-k-fg);
	font: inherit;
	font-size: 16px;
	padding: 16px 0;
	box-shadow: none;
}

.an-cmdk-input::placeholder { color: var(--an-k-dim); }

/* wp-admin styles bare inputs aggressively; override the parts that show */
.an-cmdk-input:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

/* ── results ───────────────────────────────────────────────── */

.an-cmdk-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px;
	overscroll-behavior: contain;
}

.an-cmdk-sec + .an-cmdk-sec { margin-top: 4px; }

.an-cmdk-sec-t {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--an-k-dim);
	padding: 10px 10px 6px;
}

.an-cmdk-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	cursor: pointer;
	scroll-margin: 8px;
}

.an-cmdk-row[aria-selected="true"] {
	background: var(--an-k-hit);
	box-shadow: inset 2px 0 0 var(--an-k-accent);
}

.an-cmdk-ic {
	flex: 0 0 20px;
	text-align: center;
	color: var(--an-k-accent);
	font-size: 14px;
}

.an-cmdk-lb {
	flex: 0 1 auto;
	color: var(--an-k-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.an-cmdk-hn {
	flex: 1 1 auto;
	text-align: right;
	color: var(--an-k-dim);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 12px;
}

.an-cmdk-empty,
.an-cmdk-note {
	color: var(--an-k-dim);
	font-size: 13px;
	padding: 18px 12px;
	margin: 0;
	text-align: center;
}

.an-cmdk-note {
	padding: 8px 12px 12px;
	font-size: 12px;
}

/* ── footer ────────────────────────────────────────────────── */

.an-cmdk-foot {
	display: flex;
	gap: 16px;
	padding: 9px 16px;
	border-top: 1px solid var(--an-k-line);
	color: var(--an-k-dim);
	font-size: 11px;
	flex: 0 0 auto;
}

.an-cmdk-foot kbd,
.an-cmdk-trigger kbd {
	display: inline-block;
	min-width: 17px;
	padding: 1px 4px;
	margin-right: 3px;
	border: 1px solid var(--an-k-line);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--an-k-hit);
	color: var(--an-k-dim);
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
}

/* ── the trigger ───────────────────────────────────────────── */

.an-cmdk-trigger {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--an-k-line);
	border-radius: 999px;
	background: var(--an-k-bg);
	color: var(--an-k-dim);
	box-shadow: 0 6px 20px rgba(12, 20, 28, 0.14);
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 13px;
	cursor: pointer;
}

.an-cmdk-trigger:hover {
	color: var(--an-k-fg);
	border-color: var(--an-k-accent);
}

/*
 * On a phone there is no ⌘K, and a floating pill competes with the thumb zone
 * and with whatever the theme already puts down there. Keep the palette itself
 * — it is reachable from the theme's own search — and drop the pill.
 */
@media (max-width: 782px) {
	.an-cmdk-trigger { display: none; }
	.an-cmdk-box { top: 0; max-height: 100vh; height: 100%; width: 100vw; border-radius: 0; }
}