@scope (command-ui) {
  :where(:scope) {
    /* ── Layout ──
       No default width or height — the host pattern (dialog, popover,
       app-shell search slot, etc.) is responsible for sizing the palette.
       This keeps the component composable across overlay and inline use. */
    --command-radius:             var(--a-radius-lg);
    --command-px:                 var(--a-space-3);
    --command-py:                 var(--a-space-3);
    --command-gap:                var(--a-space-2);
    --command-list-px:            var(--a-space-1);
    --command-list-py:            var(--a-space-1);
    --command-group-gap:          var(--a-space-1);

    /* ── Colors ── */
    --command-bg:                 var(--a-bg-subtle);
    --command-fg:                 var(--a-fg);
    --command-fg-muted:           var(--a-fg-muted);
    --command-border:             var(--a-border-subtle);

    /* ── Elevation ── */
    --command-shadow:             var(--a-shadow-lg);

    /* ── Typography ── */
    --command-font-size:          var(--a-ui-size);
    --command-input-font-size:    var(--a-body-size);

    /* ── Transition ── */
    --command-duration:           var(--a-duration-fast);
    --command-easing:             var(--a-easing);

    /* ── Item ── */
    --command-item-height:        var(--a-size);
    --command-item-radius:        var(--a-radius-md);
    --command-item-px:            var(--a-space-2);
    --command-item-py:            var(--a-space-2);
    --command-item-fg:            var(--a-fg-subtle);
    --command-item-fg-hover:      var(--a-fg-hover);
    --command-item-bg-hover:      var(--a-bg-hover);
    --command-item-fg-disabled:   var(--a-ui-text-disabled);

    /* ── Shortcut ── */
    --command-shortcut-fg:        var(--a-fg-muted);
    --command-shortcut-font-size: var(--a-ui-sm);

    /* ── Group label ── */
    --command-group-fg:           var(--a-fg-muted);
    --command-group-font-size:    var(--a-ui-sm);
    --command-group-font-weight:  var(--a-weight-medium);
    --command-group-label-px:     var(--a-space-2);
    --command-group-label-py:     var(--a-space-2);

    /* ── Empty state ── */
    --command-empty-fg:           var(--a-fg-muted);

    /* ── Header ── */
    --command-header-px:          var(--a-space-4);
    --command-header-py:          var(--a-space-4);

    /* ── Footer ── */
    --command-footer-fg:          var(--a-fg-muted);
    --command-footer-font-size:   var(--a-ui-sm);
    --command-footer-px:          var(--command-px);
    --command-footer-py:          var(--command-py);

    /* ── Footer kbd ── */
    --command-kbd-border:         var(--a-border-subtle);
    --command-kbd-radius:         var(--a-radius-sm);
    --command-kbd-bg:             var(--a-bg-muted);
    --command-kbd-fg:             var(--a-fg-muted);

    /* ── Hint ── */
    --command-hint-gap:           var(--a-space-0-5);
    --command-hint-kbd-px:        var(--a-space-0-5);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--command-bg);
    border: 1px solid var(--command-border);
    border-radius: var(--command-radius);
    box-shadow: var(--command-shadow);
    font-size: var(--command-font-size);
    overflow: hidden;
  }

  /* ── Search header ── */
  & > header {
    display: flex;
    align-items: center;
    gap: var(--command-gap);
    padding: var(--command-header-py) var(--command-header-px);
    border-bottom: 1px solid var(--command-border);
    flex-shrink: 0;
  }

  & > header icon-ui {
    flex-shrink: 0;
    color: var(--command-fg-muted);
    --a-icon-size: 1rem;
  }

  & > header input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--command-fg);
    font-family: var(--command-font-family, var(--a-font-family-ui));
    font-size: var(--command-input-font-size);
    line-height: 1.4;
    padding: 0;
  }

  & > header input::placeholder {
    color: var(--command-fg-muted);
  }

  /* Suppress focus ring on the input — the palette itself is the focused surface */
  & > header input:focus-visible {
    outline: none;
    box-shadow: none;
  }
  & > header:focus-within {
    outline: none;
    box-shadow: none;
  }

  /* ── List section ── */
  [slot="list"] {
    flex: 1;
    overflow-y: auto;
    padding: var(--command-list-py) var(--command-list-px);
    scrollbar-width: none;
  }

  [slot="list"]::-webkit-scrollbar { display: none; }

  /* ── Items ── */
  [role="option"] {
    display: flex;
    align-items: center;
    gap: var(--command-gap);
    min-height: var(--command-item-height);
    padding: 0 var(--command-item-px);
    border-radius: var(--command-item-radius);
    color: var(--command-item-fg);
    cursor: pointer;
    white-space: nowrap;
    transition:
      background var(--command-duration) var(--command-easing),
      color var(--command-duration) var(--command-easing);
  }

  [role="option"] icon-ui {
    --a-icon-size: var(--command-font-size);
    flex-shrink: 0;
    color: var(--command-fg-muted);
  }

  [role="option"] [data-text] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [role="option"] [data-shortcut] {
    color: var(--command-shortcut-fg);
    font-size: var(--command-shortcut-font-size);
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  /* ── State: hover / active ── */
  [role="option"]:not([aria-disabled]):hover,
  [role="option"][data-active] {
    background: var(--command-item-bg-hover);
    color: var(--command-item-fg-hover);
  }

  [role="option"]:not([aria-disabled]):hover icon-ui,
  [role="option"][data-active] icon-ui {
    color: var(--command-item-fg-hover);
  }

  /* ── State: disabled ── */
  [role="option"][aria-disabled] {
    color: var(--command-item-fg-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ── Groups ── */
  [data-group] {
    padding: var(--command-list-py) var(--command-list-px);
  }

  [data-group-label] {
    padding: var(--command-group-label-py) var(--command-group-label-px);
    font-size: var(--command-group-font-size);
    font-weight: var(--command-group-font-weight);
    color: var(--command-group-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* ── Empty state ── */
  [data-empty] {
    padding: var(--command-py) var(--command-px);
    color: var(--command-empty-fg);
    text-align: center;
  }

  /* ── Footer ── */
  & > footer {
    display: flex;
    align-items: center;
    gap: var(--command-px);
    padding: var(--command-footer-py) var(--command-footer-px);
    border-top: 1px solid var(--command-border);
    font-size: var(--command-footer-font-size);
    color: var(--command-footer-fg);
    flex-shrink: 0;
  }

  [data-hint] {
    display: inline-flex;
    align-items: center;
    gap: var(--command-hint-gap);
  }

  [data-hint] kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    padding: 0 var(--command-hint-kbd-px);
    border: 1px solid var(--command-kbd-border);
    border-radius: var(--command-kbd-radius);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.6;
    color: var(--command-kbd-fg);
    background: var(--command-kbd-bg);
  }
}
