@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-default:             var(--a-radius-lg);
    --command-px-default:                 var(--a-space-3);
    --command-py-default:                 var(--a-space-3);
    --command-gap-default:                var(--a-space-2);
    --command-list-px-default:            var(--a-space-1);
    --command-list-py-default:            var(--a-space-1);
    --command-group-gap-default:          var(--a-space-1);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* 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-py-default)) var(--command-list-px, var(--command-list-px-default));
    scrollbar-width: none;
  }

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

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

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

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

  [role="option"] [data-shortcut] {
    color: var(--command-shortcut-fg, var(--command-shortcut-fg-default));
    font-size: var(--command-shortcut-font-size, var(--command-shortcut-font-size-default));
    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, var(--command-item-bg-hover-default));
    color: var(--command-item-fg-hover, var(--command-item-fg-hover-default));
  }

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

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

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

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

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

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

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

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