.team-member-editor { margin-bottom: 1.5rem; max-width: 46rem; }
.team-member-editor h2 { margin-top: 0; }
.team-member-identity { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.team-member-roles { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.team-member-roles legend { font-weight: 700; margin-bottom: 0.5rem; }
.team-member-role { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; }
.team-member-role:has(input:checked) { border-color: var(--navy); background: var(--paper); }
.team-member-role input { width: auto; margin-top: 0.25rem; }
.team-member-role small { display: block; color: var(--muted); }
@media (max-width: 650px) {
  .team-member-row { flex-wrap: wrap; }
  .team-member-row .team-member-identity { flex-basis: calc(100% - 4rem); }
}

.team-invitation-modal { width: min(46rem, calc(100vw - 32px)); }
.team-invitation-modal .team-member-editor { margin: 0; }
.team-invitation-modal .team-member-editor > .muted { margin: 0.75rem 0 1.25rem; }
html:has(.team-invitation-modal[open]) { overflow: hidden; }
.team-member-editor .team-member-error { color: var(--coral-ink); font-weight: 500; }
.team-member-editor input[aria-invalid="true"] { border-color: var(--coral-ink); }
.team-member-role:has(input:disabled) { cursor: default; }