@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 {
    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 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. */
  @media (max-width: 40rem) {
    .member-list li {
      grid-template-columns: minmax(0, 1fr);
      justify-items: start;
    }

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

    .member__role { width: auto; }
  }


  /* The view header and the list it introduces are one thing, so the gap
     between them is the stack's and the header does not add a second one. */
  .main { gap: var(--space-4); }
}