@layer components {
  /* ─── Member card ───────────────────────── */

  /* ─── Member list ───────────────────────── */

  /* The list's head: the title, and "Manage" at the end — or, while
     managing, "Delete" for the seats checked and "Done". */
  .member-list__head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-block-end: 1rem;
  }

  /* "Manage" is a line of text, but padded and bordered like the pills that
     take its place, so the head keeps its height and the list stays put on
     the switch. */
  .member-list__manage {
    background: none;
    border: 1.5px solid transparent;
    color: var(--color-brand);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 0;
    white-space: nowrap;
  }

  .member-list__managing {
    display: none;
    gap: 0.5rem;
  }

  .member-list.is-managing .member-list__manage {
    display: none;
  }

  .member-list.is-managing .member-list__managing {
    display: flex;
  }

  /* ─── Member row ────────────────────────── */

  /* One seat in the list: the checkbox of the "Manage" mode beside the
     card, outside it, then the card. */
  .member-row {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
  }

  /* The check column is as wide as its box and as tall as the card's header
     line, so the box sits level with the avatar whether the card is open or
     not. It only takes its place while managing; the owner's row carries an
     empty one so its card stays in line with the rest. */
  .member-row__check {
    align-items: center;
    block-size: calc(2.5rem + 2 * 0.875rem);
    display: none;
    flex-shrink: 0;
    inline-size: 1.125rem;
  }

  .member-list.is-managing .member-row__check {
    display: flex;
  }

  .member-row__checkbox {
    accent-color: var(--color-brand);
    block-size: 1.125rem;
    cursor: pointer;
    inline-size: 1.125rem;
    margin: 0;
  }

  /* ─── Member card ───────────────────────── */

  /* The card: the header that opens into a single column of fields. The
     row's own rule loads after this file, so the card names both classes to
     beat its centring. */
  .settings-list__row.member-card {
    align-items: stretch;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
  }

  /* The whole card is the handle while it is closed. */
  .member-card:has(.member-card__details:not([open])):hover {
    border-color: var(--color-border-strong);
  }

  .member-card__header {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 0.875rem;
    min-inline-size: 0;
  }

  /* The holder's photo, or their initials the way the nav's chip shows them. */
  .member-card__avatar {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 2.5rem;
    border-radius: 50%;
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    inline-size: 2.5rem;
    justify-content: center;
    overflow: hidden;
  }

  .member-card__avatar--photo {
    background: var(--color-surface-tint);
  }

  .member-card__avatar img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  .member-card__details {
    display: flex;
    flex-direction: column;
  }

  .member-card__summary {
    cursor: pointer;
    display: flex;
    list-style: none;
  }

  .member-card__summary::-webkit-details-marker {
    display: none;
  }

  .member-card__form {
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 0.875rem;
    padding-block-start: 1rem;
  }

  .member-card__actions {
    display: flex;
    justify-content: flex-start;
    margin-block-start: 1.25rem;
  }

  /* ─── A firm's team ─────────────────────── */

  /* A colleague at a glance: who, the clients they work on, and their role
     as the pill that opens the card. */
  .member-card__you {
    color: var(--color-ink-muted);
    font-weight: 500;
  }

  .member-card__clients {
    color: var(--color-ink-secondary);
    flex-shrink: 0;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .member-card__role {
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    white-space: nowrap;
  }

  .member-card__summary .member-card__role::after {
    background: var(--icon-chevron-brand) center / contain no-repeat;
    block-size: 0.75rem;
    content: "";
    inline-size: 0.75rem;
  }

  .member-card__avatar--pending {
    background: var(--color-surface-tint);
    color: var(--color-ink-muted);
  }

  .member-list__pending {
    margin-block-start: 0.75rem;
  }

  @media (width < 768px) {
    .member-card__clients {
      display: none;
    }
  }
}