@layer components {
  /* Rows of people

     The same list language as tasks: one row height, no dividing rules, a tint
     on hover. Two lists of rows in one product should not look like two
     products. */

  .member-list { list-style: none; margin: 0; padding: 0; }

  /* Rails, like the task row — for the same reason the task row has them: so
     the roles line up down the page instead of each row ending wherever its
     own controls happen to stop. The sole owner has no Remove button, so with
     a flex row their role sat 60px right of everybody else's. */
  .member-list li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-role) var(--rail-remove);
    align-items: center;
    gap: var(--space-3);
    min-height: var(--row-h);
    padding: var(--space) var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
    border-radius: var(--radius);
    transition: background var(--transition);
  }

  /* The two controls are grid children of the row, not a box sitting in it. */
  .member__actions { display: contents; }

  .member-list li:hover { background: var(--surface-hover); }

  .member-name { font-size: var(--text-md); letter-spacing: var(--tracking-tight); }

  /* A row with no controls on it — the workspace switcher, which is a list of
     names and the role you hold in each. Two rails rather than three, because
     there is no Remove to keep a column open for, and the whole row is the way
     in: one real link stretched over it, the way a task row and a project row
     already work. */
  .member-list--plain li { grid-template-columns: minmax(0, 1fr) auto; }

  .member-list__link { color: var(--ink); text-decoration: none; }
  .member-list__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .member-list li:has(.member-list__link:focus-visible) { background: var(--surface-hover); }

  /* A role nobody can change here: the one you hold in each workspace on the
     switcher, and the one an invitation was sent at. Stated rather than
     offered, so it is a label — where a role *can* be changed it is a picker,
     and the difference between the two now means something. */
  .role { color: var(--ink-muted); white-space: nowrap; }



  /* On a phone the rails do not fit, so the row stacks and the controls
     become a row of their own again, under the name they belong to.

     `.picker.member__role`, and it has to be. On its own `.member__role` ties
     with `.picker` on specificity, and a tie goes to whichever file Propshaft
     linked last — filename order, so `members.css` is read before
     `picker.css` and lost. The picker therefore kept `width: 100%` inside a
     shrink-to-fit flex row, which is circular: the sole owner's role rendered
     as "O…" on every phone, one character wide, and had done since the rule
     was written. Same trap as `capture.css` and `joinlink.css`; see the note
     in `forms.css`. */
  @media (max-width: 40rem) {
    .member-list li {
      grid-template-columns: minmax(0, 1fr);
      justify-items: start;
      gap: var(--space);
      padding-block: var(--space-2);
    }

    .member__actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .picker.member__role { width: auto; flex: none; }

    /* And the value inside it stops being elastic: there is no rail to fill
       here, so a label that can shrink is a label that does. */
    .member__role .picker__value { flex: none; }
  }
}