/*
 * Manage Admins (D213) — the pending and used invite links on the Admins
 * page, and how each admin joined.
 *
 * Layout only. Every colour and size is a token.
 */

.admin-invites {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.admin-invites__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-invites__item + .admin-invites__item {
  border-top: var(--border-width) solid var(--divider);
  padding-top: var(--space-5);
}

/* A signed link is long and has no spaces; it wraps anywhere rather than
   pushing the card wider than the column. */
.admin-invites__link {
  color: var(--text-gold);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  overflow-wrap: anywhere;
}

.admin-invites__meta {
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.admin-invites__heading {
  margin-top: var(--space-6);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.admin-invites--used {
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* "Invited by …" under the date an admin was added. */
.admin-provenance {
  display: block;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}