@layer components {
  /* The front door. Big, autofocused, keyboard-first. */
  .command {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
  }
  .command:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43, 90, 122, 0.12);
  }
  .command .icon { flex: none; width: 1.2em; height: 1.2em; color: var(--ink-3); }
  .command__input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: var(--text-lg);
    color: var(--ink);
  }
  .command__input::placeholder { color: var(--ink-4); }
  .command__input:focus { outline: none; }

  /* Keyboard hint chip. */
  .kbd {
    flex: none;
    min-width: 1.5em;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: center;
    color: var(--ink-3);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
  }
}