/* Command palette — dialog + combobox (native top layer) */

.command-palette-dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  max-height: none;
  margin: auto;
  width: min(96vw, 40rem);
}

.command-palette-dialog::backdrop {
  background: var(--s-color-backdrop-scrim, oklch(0.25 0.01 180 / 0.75));
}

@media (prefers-reduced-motion: no-preference) {
  .command-palette-dialog::backdrop {
    animation: cp-fade-in var(--s-duration-fast) var(--s-ease-out);
  }

  @keyframes cp-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

.command-palette {
  background: var(--s-surface-elevation-1-bg);
  border: 1px solid var(--s-color-border-strong);
  border-radius: var(--s-radius-3);
  width: min(96vw, 40rem);
  overflow: clip;
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .command-palette {
    animation: cp-slide-down var(--s-duration-normal) var(--s-ease-out);
  }

  @keyframes cp-slide-down {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.command-palette:has(#shellCmdkKeyboardCheatsheet) {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 52rem);
}

.command-palette:has(#shellCmdkKeyboardCheatsheet) .command-palette-results {
  flex: 0 1 auto;
  min-height: 6rem;
  max-height: min(28vh, 12rem);
}

.command-palette-header {
  padding: var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.command-palette-input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  background: transparent;
  font-size: var(--s-font-size-2);
  line-height: 1.4;
  color: var(--s-color-fg-primary);
  font-family: var(--font-sans, "Figtree", sans-serif);
  padding: var(--s-space-3) var(--s-space-4);
  margin: 0;
  border-radius: var(--s-radius-2);
}

.command-palette-input:focus {
  border: none;
  outline: none;
}

.command-palette-input:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: 2px;
}

.command-palette-input::placeholder {
  color: var(--s-color-fg-soft);
}

.command-palette-results {
  max-height: min(36vh, 18rem);
  overflow-y: auto;
  padding: var(--s-space-3) 0;
}

.command-palette-empty {
  padding: var(--s-space-5) var(--s-space-4);
  text-align: center;
  color: var(--s-color-fg-secondary);
  font-size: var(--s-font-size-2);
  line-height: 1.45;
}

.command-palette-footer {
  padding: var(--s-space-3) var(--s-space-4);
  border-top: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  display: flex;
  justify-content: flex-end;
}

.command-palette-hint {
  display: flex;
  gap: var(--s-space-2);
  align-items: center;
}

.command-palette-hint kbd {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-muted);
  padding: var(--s-space-2) var(--s-space-3);
  border-radius: var(--s-radius-1);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-min);
  font-weight: 500;
}

.command-palette-result {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-4) var(--s-space-4);
  min-height: 2.75rem;
  cursor: pointer;
  transition: background var(--s-duration-fast) var(--s-ease-out);
}

.command-palette-result:hover,
.command-palette-result:focus-visible {
  background: var(--s-color-hover-bg, var(--s-color-bg-subtle));
  outline: none;
}

.command-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--s-color-fg-muted);
}

.command-result-label {
  font-size: var(--s-font-size-2);
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium, 500);
  line-height: 1.35;
}

.command-result-path {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  margin-left: auto;
}

/* Keyboard vocabulary cheatsheet — ⌘K palette (readable; not caption-scale) */
.command-palette .ds-component--keyboard-cheatsheet {
  flex: 1 1 auto;
  border-top: 1px solid var(--s-color-border-subtle);
  padding: var(--s-space-3) var(--s-space-4);
  background: var(--s-color-bg-subtle);
  min-height: 12rem;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

.command-palette .ds-component--keyboard-cheatsheet-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--s-color-fg-secondary);
  margin-bottom: var(--s-space-3);
}

.command-palette .ds-component--keyboard-cheatsheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.command-palette .ds-component--keyboard-cheatsheet-list li {
  display: flex;
  gap: var(--s-space-4);
  align-items: baseline;
  font-size: var(--s-font-size-2);
  line-height: 1.45;
  min-width: 0;
}

.command-palette .ds-component--keyboard-cheatsheet-key-slot {
  flex: 0 0 38%;
  min-width: 9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-space-1);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.command-palette .ds-component--keyboard-cheatsheet-action {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--s-color-fg-secondary);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.command-palette .ds-component--keyboard-cheatsheet-fallback {
  font-size: var(--s-font-size-2);
  line-height: 1.45;
  color: var(--s-color-fg-muted);
  font-style: italic;
}

.command-palette .ds-component--key-pill > kbd {
  padding: var(--s-space-1) var(--s-space-2);
  min-width: 1.75em;
  font-size: var(--s-font-size-1);
  line-height: 1.35;
}

.command-palette-results::-webkit-scrollbar {
  width: 4px;
}

.command-palette-results::-webkit-scrollbar-track {
  background: transparent;
}

.command-palette-results::-webkit-scrollbar-thumb {
  background: var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

.command-palette-results::-webkit-scrollbar-thumb:hover {
  background: var(--s-color-border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .command-palette-dialog,
  .command-palette-dialog::backdrop,
  .command-palette {
    animation-duration: 0.001ms;
  }
}