/* The e-mails on the profile, the steps of their modal, and the line that opens them on a member's edit page. */
:is(.users-emails, .users-email-step, .users-login-line) :where(button, summary, a.cs-btn) { --hover-size: 0; }

.users-emails { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.users-emails__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.users-emails__add { align-self: flex-start; }

/* The address may take two lines and its tags sit under it, so the ⋮ keeps the first line's right end at any width. */
.users-emails__list .cs-picker-row { align-items: flex-start; padding-inline: 0; }
.users-emails__list :is(.cs-picker-row__name, .cs-picker-row__subtitle) { white-space: normal; overflow-wrap: anywhere; }
.users-emails__icon { flex-shrink: 0; margin-block-start: 2px; color: var(--ds-text-muted); }
.users-emails__list .cs-picker-row__actions { margin-block-start: -6px; margin-inline-start: auto; }
.users-emails__tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin-block-start: var(--ds-space-1); }

.users-emails__public {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding-block-start: var(--ds-space-3);
  border-block-start: 1px solid var(--ds-border);
}

.users-emails__public-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.users-emails__public-label, .users-emails__note { color: var(--ds-text-muted); font-size: var(--ds-font-size-compact); }
.users-emails__public-value { overflow-wrap: anywhere; }
.users-emails__note { margin: 0; }

.users-email-step { display: flex; flex-direction: column; gap: var(--ds-modal-gap, var(--ds-space-3)); }
.users-email-step .cs-profile-modal__body { margin-block-start: 0; }
.users-email-step .cs-modal__title { margin: 0; }
.users-email-step .cs-modal__text { margin: 0; }
.users-email-step--page { padding: var(--ds-space-6); }
.users-email-step__code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.users-email-step__resend { align-self: flex-start; }

.users-email-modal .cs-modal__title { padding-inline-end: 2.5rem; }

.users-login-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.users-login-line__text { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 2px; min-inline-size: 0; }
.users-login-line > .cs-btn { flex-shrink: 0; }
.users-login-line__value { overflow-wrap: anywhere; }