@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);
      }
    }

    /* A short list on touch is its rows alone. */
    @media (any-hover: none) {
      &.picker--short > .input {
        display: none;
      }
    }

    /* A set too long to list — a mail's To among a thousand addresses —
       suggests: the first eight rows the filter leaves, the first eight of
       the set before anything is typed (owner, 2026-10-20: "as I type it
       should suggest people"). At a width of its own, so the rows that come
       and go as you type do not move its edges. */
    &.picker--suggests {
      inline-size: 28rem;

      li:nth-child(n + 9 of [data-filter-target="item"]:not([hidden])) {
        display: none;
      }
    }
  }

  .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);
    /* A row is a row whether it posts or navigates — a chat line's chooser
       walks its dialog forward with links (chat_messages/captures). */
    text-decoration: none;
    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;
  }

  /* A row that cannot be picked — a record already on the list, which says
     where it stands — and the hairline before the rows of another kind: the
     terminal stages, the door to a new record. */
  .picker__row--off {
    color: var(--color-ink-faint);
    cursor: default;

    &:hover {
      background-color: transparent;
    }
  }

  /* After its hairline (dialog.css), square: a rounded row under a rule. */
  .picker li.picker__row--separated {
    border-radius: 0;
  }
}