/*
 * Networking — the attendee directory and connection lists. A person row is a
 * name on the left, its connect action on the right.
 */
@layer components {
  .people-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-pad);
    padding-block: calc(var(--u-pad) / 2);
  }
}