/* A local command palette; native dialog supplies focus trapping and inert content. */
header.top .wq-command-trigger {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
}
.wq-command-trigger kbd {
  display: none;
  font: 500 .68rem var(--f-mono, monospace);
  letter-spacing: .01em;
  white-space: nowrap;
}
header.top .wq-command-trigger.wq-command-with-key {
  width: auto;
  min-width: 36px;
  padding-inline: 11px;
  border-radius: 999px;
}
.wq-command-trigger.wq-command-with-key kbd { display: inline; }
header.top .wq-command-compact .brand b { display: none; }
html.wq-command-open { overflow: hidden; }

dialog.wq-command {
  box-sizing: border-box;
  width: min(600px, calc(100vw - 32px));
  max-width: none;
  max-height: min(710px, calc(100dvh - max(20px, min(13dvh, 112px)) - 20px));
  margin: max(20px, min(13dvh, 112px)) auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink);
  box-shadow: var(--glass-raised, 0 24px 66px #0004);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(150%);
  font-family: var(--f-body, sans-serif);
}
dialog.wq-command[open] { display: flex; flex-direction: column; animation: wq-command-in .22s cubic-bezier(.2,.8,.2,1) both; }
dialog.wq-command::backdrop { background: #03152275; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.wq-command-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 12px; flex: 0 0 auto; }
.wq-command-top h2 { margin: 0; font: 600 .82rem var(--f-mono, monospace); letter-spacing: .025em; color: var(--muted); }
.wq-command-close {
  display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--glass-separator, var(--line)); border-radius: 50%;
  background: var(--glass-control, var(--surface)); color: var(--ink); cursor: pointer;
}
.wq-command-close svg { width: 16px; height: 16px; }
.wq-command-search { position: relative; margin: 0 22px 12px; flex: 0 0 auto; }
.wq-command-search > svg { position: absolute; left: 15px; top: 17px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.wq-command .wq-command-input {
  box-sizing: border-box; width: 100%; min-width: 0; height: 54px; margin: 0; padding: 12px 14px 12px 46px;
  border: 1px solid var(--glass-separator, var(--line)); border-radius: 15px;
  background: var(--glass-input, var(--surface2)); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-edge, transparent); font: 500 1rem var(--f-body, sans-serif);
  appearance: none; -webkit-appearance: none;
}
.wq-command-input::placeholder { color: var(--muted); opacity: 1; }
.wq-command-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.wq-command-results { list-style: none; padding: 4px 12px 10px; margin: 0; overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; scroll-padding-block: 5px; }
.wq-command-results li { margin: 0; padding: 0; }
.wq-command-option {
  display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 9px 12px; margin: 2px 0;
  border: 1px solid transparent; border-radius: 13px; color: var(--ink); text-decoration: none;
  font: 500 .95rem/1.35 var(--f-body, sans-serif); transition: background .15s, border-color .15s;
}
.wq-command-option[aria-selected="true"] { background: var(--glass-control, var(--surface2)); border-color: var(--glass-separator, var(--line)); box-shadow: inset 0 1px 0 var(--glass-edge, transparent); }
.wq-command-option-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; color: var(--a2); }
.wq-command-option-icon svg { width: 19px; height: 19px; }
.wq-command-option-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wq-command-option-hint { flex: 0 0 auto; font: 500 .64rem var(--f-mono, monospace); letter-spacing: .025em; color: var(--muted); }
.wq-command-option-arrow { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.wq-command-status { flex: 0 0 auto; margin: 0; padding: 0 24px; color: var(--muted); font-size: .87rem; }
.wq-command-status:not(:empty) { padding-block: 18px 26px; }
.wq-command-help { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; margin: 0; padding: 12px 24px 15px; border-top: 1px solid var(--glass-separator, var(--line)); color: var(--muted); font-size: .72rem; }
.wq-command-help span { display: inline-flex; gap: 6px; align-items: center; }
.wq-command-help kbd { font: 500 .67rem var(--f-mono, monospace); min-width: 18px; padding: 2px 4px; border: 1px solid var(--glass-separator, var(--line)); border-radius: 5px; text-align: center; color: var(--ink); background: var(--glass-control, var(--surface2)); }
.wq-command :is(a, button, input):focus-visible { outline: 2px solid var(--a2); outline-offset: 3px; }
@keyframes wq-command-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 600px) {
  header.top .wq-command-host > .icon-btn { width: 36px; height: 40px; }
  .wq-command-host .lang :is(button, a) { padding-inline: 6px; }
  dialog.wq-command { max-height: calc(100dvh - 32px); margin-top: 16px; border-radius: 22px; }
  .wq-command-top { padding: 16px 18px 11px; }
  .wq-command-search { margin-inline: 18px; }
  .wq-command-results { padding-inline: 8px; }
  .wq-command-option { gap: 9px; padding-inline: 10px; }
  .wq-command-option-hint { font-size: .6rem; }
  .wq-command-help { padding-inline: 20px; gap: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.wq-command[open] { animation: none; }
  .wq-command-option { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  dialog.wq-command { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  dialog.wq-command::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  dialog.wq-command { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  dialog.wq-command::backdrop { background: #0009; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .wq-command-option[aria-selected="true"] { border-color: Highlight; outline: 1px solid Highlight; }
  .wq-command :is(a, button, input):focus-visible { outline-color: Highlight; }
}