/* Command palette (⌘K). A menu in the Sendplane sense: surface-elevated,
 * a border-default edge, radius-menu and shadow-menu, over the scrim. */

.command-palette-backdrop {
  position: fixed;
  z-index: var(--z-command-palette);
  inset: 0;
  display: flex;
  justify-content: center;
  padding: 15vh 16px 16px;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  animation: dialog-scrim-in 180ms ease both;
}
.command-palette {
  width: min(560px, 100%);
  max-height: 420px;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-menu);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-menu);
  animation: dialog-in 180ms var(--ease-out) both;
}
.command-palette-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
/* The field is the palette's only control; its band shows focus instead of an outline. */
.command-palette-input-wrap:focus-within { box-shadow: inset 0 -2px 0 var(--focus-ring); }
.command-palette-search-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--quiet); }
.command-palette-input { flex: 1; border: 0; outline: none; color: var(--ink); background: transparent; font-family: inherit; font-size: 15px; line-height: 1.5; }
.command-palette-input::placeholder { color: var(--field-placeholder); }
.command-palette-kbd { padding: 1px 5px; border: 1px solid var(--border-default); border-radius: var(--radius-hairline); color: var(--quiet); background: var(--surface); font-family: var(--font-mono); font-size: 10px; }
.command-palette-results { flex: 1; overflow-y: auto; padding: 7px; overscroll-behavior: contain; }
.command-palette-empty, .command-palette-loading { padding: 28px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.command-palette-group-label { padding: 8px 10px 4px; color: var(--quiet); font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
.command-palette-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.command-palette-item.active { background: var(--interactive-selected); }
.command-palette-item-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--quiet); }
.command-palette-item-content { min-width: 0; flex: 1; }
.command-palette-item-label { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.command-palette-item-desc { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.command-palette-item-badge { flex-shrink: 0; }
.command-palette-footer { display: flex; align-items: center; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--border-subtle); color: var(--quiet); background: var(--surface-elevated); font-size: 11px; }
.command-palette-footer-hint { display: flex; align-items: center; gap: 5px; }

@media (hover: hover) and (pointer: fine) {
  .command-palette-item:hover:not(.active) { background: var(--soft); }
}