@layer components {
  /* The person picker: a filter line over plain rows, hanging off the button
     that asked (the .popup base owns the float). Open it and the people are
     simply there; typing narrows, arrows move, enter assigns — fizzy's shape
     on our popover machinery, no JavaScript of its own. */
  .picker {
    min-inline-size: 16rem;
    /* Centred on its trigger, then SHIFTED as far as needed to stay on
       screen — anchor-center's own defined behaviour, said explicitly
       because a picker often hangs off something near the right edge (the
       assignee strip's +) and Chrome's silent grid clamp is not a promise
       Safari makes (user, 2026-08-11 — pickers off a phone's right edge).
       Only pickers: the ⋯ menus hang off a corner on purpose. */
    justify-self: anchor-center;

    menu {
      list-style: none;
      margin: var(--block-space-half) 0 0;
      padding: 0;
    }

    li {
      border-radius: var(--border-radius);

      &[data-selected] {
        background-color: var(--color-surface);
      }
    }
  }

  .picker__row {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    inline-size: 100%;
    padding: var(--block-space-half) var(--inline-space-half);
    background: none;
    border: none;
    border-radius: var(--border-radius);
    color: var(--color-ink);
    cursor: pointer;

    &:hover {
      background-color: var(--color-surface);
    }
  }

  /* The check a chosen row wears. Only the combobox's rows carry one — the
     posting picker's rows are gone once chosen, so they have no state to show. */
  .picker__row .picker__check {
    visibility: hidden;
    margin-inline-start: auto;
    color: var(--color-ink-subtle);
  }

  .picker__row[aria-checked="true"] .picker__check {
    visibility: visible;
  }
}