@layer components {
  dialog.command {
    border: none;
    border-radius: var(--radius-xl);
    background: var(--popover);
    color: var(--popover-foreground);
    padding: 0;
    max-width: 32rem;
    width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg);
    margin: auto;
    position: fixed;
    inset: 0;
    top: 15%;
    bottom: auto;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.98);
    transition:
      opacity 150ms ease,
      transform 150ms ease,
      display 150ms allow-discrete;

    &[open] {
      opacity: 1;
      transform: scale(1);
    }
    &::backdrop {
      background: oklch(0 0 0 / 0);
      transition:
        all 150ms ease,
        display 150ms allow-discrete;
    }
    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
    }
  }

  @starting-style {
    dialog.command[open] {
      opacity: 0;
      transform: scale(0.98);
    }
    dialog.command[open]::backdrop {
      background: oklch(0 0 0 / 0);
    }
  }

  /* -- Scroll lock ------------------------------------------- */
  /* Page behind stays put while the palette is modal (see dialog.css):
     `:modal` + overflow:hidden freezes the viewport at its current offset. */
  html:has(dialog.command:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .command-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    & svg {
      width: 1rem;
      height: 1rem;
      color: var(--muted-foreground);
      flex-shrink: 0;
    }
  }

  .command-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    font-family: inherit;
    &::placeholder {
      color: var(--muted-foreground);
    }
  }

  .command-list {
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
  }
  .command-group {
    padding: 0.25rem 0;
  }
  .command-group-heading {
    margin: 0;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
  }

  .command-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--foreground);
    font-size: 0.8125rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    &:hover,
    &[data-highlighted] {
      background-color: var(--accent);
    }
    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    &[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.5;
    }
    & svg {
      width: 1rem;
      height: 1rem;
      color: var(--muted-foreground);
      flex-shrink: 0;
    }
    /* Same as combobox-item: `display: flex` beats the UA [hidden] rule, and
       command.ts filter() hides non-matches via the hidden attribute. */
    &[hidden] {
      display: none;
    }
  }

  .command-separator {
    height: 1px;
    background-color: var(--border);
    margin: 0.25rem -0.25rem;
  }
  .command-shortcut {
    margin-inline-start: auto;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
  }
  .command-empty {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    dialog.command {
      transition: none;
      opacity: 1;
      transform: none;
    }
    dialog.command::backdrop {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    dialog.command {
      border: 2px solid var(--border);
    }
    .command-item {
      &:hover,
      &[data-highlighted] {
        outline: 1px solid var(--foreground);
      }
    }
  }

  @media (forced-colors: active) {
    dialog.command {
      border: 2px solid CanvasText;
    }
    .command-item {
      &:hover,
      &[data-highlighted] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
      }
    }
    .command-separator {
      background-color: CanvasText;
    }
  }
  /* -- Density ----------------------------------------------------
     data-density on the dialog.command root scales the rows of the palette.
     comfortable == the unsized default. (0,2,1) beats the base (0,1,0). */
  dialog.command:where([data-density="compact"]) {
    & .command-input-wrapper {
      padding: 0.5rem 0.75rem;
    }
    & .command-item {
      padding: 0.375rem 0.5rem;
    }
    & .command-group-heading {
      padding: 0.25rem 0.5rem;
    }
  }
  dialog.command:where([data-density="comfortable"]) {
    & .command-input-wrapper {
      padding: 0.75rem 1rem;
    }
    & .command-item {
      padding: 0.5rem 0.5rem;
    }
    & .command-group-heading {
      padding: 0.375rem 0.5rem;
    }
  }
  dialog.command:where([data-density="spacious"]) {
    & .command-input-wrapper {
      padding: 1rem 1.25rem;
    }
    & .command-item {
      padding: 0.625rem 0.5rem;
    }
    & .command-group-heading {
      padding: 0.5rem 0.5rem;
    }
  }
}