.page { padding-block: var(--space-7) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }

.head { display: flex; flex-direction: column; gap: var(--space-2); }
.back { font-size: var(--text-sm); text-decoration: none; font-weight: 600; align-self: flex-start; }
.back:hover { text-decoration: underline; }
.title { font-size: var(--text-2xl); }
.lede { color: var(--color-text-muted); max-width: 60ch; }

.form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }

.group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.groupTitle { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md); }
.groupNote { font-size: var(--text-sm); color: var(--color-text-subtle); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* Title and suffix are short; the name beside them is not. */
.nameRow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-4); }

.actions { display: flex; align-items: center; gap: var(--space-4); }

/* The email, shown but not editable — changing it has to re-verify. */
.readonly {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius);
}
.readonlyLabel {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}
.readonlyValue { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .pair, .nameRow { grid-template-columns: 1fr; }
}