@layer components {

  .member-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }

  .member-list li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-when) var(--rail-seen) var(--rail-kebab);
    align-items: center;
    gap: var(--space-3);
    min-height: var(--row-h);
    padding-block: var(--space);
    border-radius: var(--radius);
    transition: background var(--transition);
  }

  
  .member-list:not(.member-list--plain) li {
    gap: var(--space-2);
    padding-inline: var(--space-2);
  }

  .member__actions { display: contents; }

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

  .member-list:not(.member-list--plain) .member-name {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
  }

  .member-list:not(.member-list--plain) .person {
    gap: calc(var(--space) * 1.5);
  }

  .member-list:not(.member-list--plain) .stack--snug {
    line-height: var(--leading-tight);
  }

  
  .member-list--plain li {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
  }

  .member-list--extras li {
    grid-template-columns: minmax(0, 1fr) var(--rail-role) var(--rail-when) var(--rail-kebab);
  }

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

  
  .member-list__danger,
  .member-list__danger .member-list__link { color: var(--danger); }

  .role { color: var(--ink-muted); white-space: nowrap; }

  .member-list--settings .role,
  .member-list--plain .role { color: var(--accent); }

  
  .member-list--settings .member-name {
    font-size: var(--text-md);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  
  .member-list--settings .row {
    min-width: 0;
    flex-wrap: nowrap;
  }

  .member__date {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .member__seen {
    display: flex;
    align-items: center;
    gap: var(--space);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .member__seen-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--go);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--go) 20%, transparent);
  }

  .member__role-pill {
    padding: 1px var(--space);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member__role-pill--owner {
    background: color-mix(in oklab, var(--colour-amber) 12%, var(--surface));
    color: var(--colour-amber);
  }

  .member__role-pill--admin {
    background: color-mix(in oklab, var(--danger) 12%, var(--surface));
    color: var(--danger);
  }

  .member__role-pill--member {
    background: color-mix(in oklab, var(--accent) 12%, var(--surface));
    color: var(--accent);
  }

  .member__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rail-kebab);
    height: var(--control-h-sm);
    padding: 0;
    border: var(--line-w-control) solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), var(--responds);
  }

  
  .member__menu:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--ink); }
  .member__menu:focus-visible { background: var(--surface); }
  .member__menu[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-hover); color: var(--ink); }

  @media (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;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-inline-start: calc(var(--face-md) + var(--space));
    }

    .member__menu { margin-inline-start: auto; }

    
    .member-list--settings .row { justify-self: stretch; }
  }
}