/* ============================================================================
   Command Palette (⌘K) — Linear / GitHub / Vercel inspired
   ============================================================================ */

/* ============================================================================
   Trigger button — シンプル虫眼鏡のみ
   .site-header__search-toggle (main.css 既存ルール: width:42px 円形) を継承。
   キーボードショートカット Cmd+K は引き続き有効、ヒントは表示しない。
   ============================================================================ */
.wn-cmdk-trigger { cursor: pointer; }
.wn-cmdk-trigger:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 111, 61, .35);
}

/* ---- Modal ---- */
.wn-cmdk-modal {
	border: none;
	padding: 0;
	background: transparent;
	max-width: 640px;
	width: calc(100% - 32px);
	margin: 10vh auto;
	border-radius: 16px;
	overflow: hidden;
	color: var(--c-ink);
}
.wn-cmdk-modal::backdrop {
	background: rgba(15, 22, 38, .55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.wn-cmdk-form {
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border: 1px solid rgba(255,255,255,.5);
	box-shadow:
		0 25px 50px -12px rgba(15, 30, 90, .35),
		inset 0 1px 0 rgba(255,255,255,.6);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 70vh;
}

/* ---- Input row ---- */
.wn-cmdk-input-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--c-border-soft);
}
.wn-cmdk-input-icon {
	color: var(--c-text-mute);
	flex-shrink: 0;
}
.wn-cmdk-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1rem;
	font-family: inherit;
	color: var(--c-ink);
	padding: 4px 0;
}
.wn-cmdk-input::placeholder { color: var(--c-text-mute); }
.wn-cmdk-esc {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: .7rem;
	font-weight: 600;
	color: var(--c-text-mute);
	background: rgba(0,0,0,.05);
	padding: 3px 7px;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,.08);
}

/* ---- List ---- */
.wn-cmdk-list {
	overflow-y: auto;
	padding: 8px;
	flex: 1;
	min-height: 200px;
}
.wn-cmdk-group { margin-bottom: 8px; }
.wn-cmdk-group:last-of-type { margin-bottom: 0; }
.wn-cmdk-group__label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	padding: 8px 12px 4px;
}
.wn-cmdk-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--c-ink);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .12s ease;
	cursor: pointer;
}
.wn-cmdk-item:hover,
.wn-cmdk-item.is-active {
	background: var(--c-mist, #EEF3FF);
	color: var(--c-ink);
}
.wn-cmdk-item.is-active {
	box-shadow: inset 0 0 0 1px rgba(15,22,38,.06);
}
.wn-cmdk-item__icon {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0;
}
.wn-cmdk-empty {
	padding: 24px 16px;
	text-align: center;
	color: var(--c-text-mute);
	font-size: .875rem;
}

/* ---- Footer ---- */
.wn-cmdk-foot {
	display: flex;
	gap: 16px;
	padding: 10px 18px;
	border-top: 1px solid var(--c-border-soft);
	background: rgba(0,0,0,.02);
	font-size: .75rem;
	color: var(--c-text-mute);
}
.wn-cmdk-foot kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .7rem;
	background: rgba(0,0,0,.05);
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,.08);
	margin-right: 4px;
}

/* ---- Dark mode ---- */
[data-theme="dark"] .wn-cmdk-form,
.is-theme-dark .wn-cmdk-form {
	background: rgba(20, 28, 48, .92);
	border-color: rgba(255,255,255,.08);
	box-shadow:
		0 25px 50px -12px rgba(0,0,0,.65),
		inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .wn-cmdk-input,
.is-theme-dark .wn-cmdk-input { color: #eef3ff; }
[data-theme="dark"] .wn-cmdk-item,
.is-theme-dark .wn-cmdk-item { color: #eef3ff; }
[data-theme="dark"] .wn-cmdk-item:hover,
[data-theme="dark"] .wn-cmdk-item.is-active,
.is-theme-dark .wn-cmdk-item:hover,
.is-theme-dark .wn-cmdk-item.is-active {
	background: rgba(255,255,255,.06);
}
[data-theme="dark"] .wn-cmdk-foot,
.is-theme-dark .wn-cmdk-foot { background: rgba(0,0,0,.2); }
[data-theme="dark"] .wn-cmdk-kbd,
[data-theme="dark"] .wn-cmdk-esc,
[data-theme="dark"] .wn-cmdk-foot kbd,
.is-theme-dark .wn-cmdk-kbd,
.is-theme-dark .wn-cmdk-esc,
.is-theme-dark .wn-cmdk-foot kbd {
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.12);
	color: #c8d2e8;
}

/* ---- Motion preference ---- */
@media (prefers-reduced-motion: reduce) {
	.wn-cmdk-modal,
	.wn-cmdk-item { transition: none !important; }
}

/* ---- Mobile fine tune ---- */
@media (max-width: 640px) {
	.wn-cmdk-modal { margin: 5vh 12px; width: calc(100% - 24px); max-height: 90vh; }
	.wn-cmdk-form { max-height: 88vh; }
	.wn-cmdk-foot { display: none; }
}