.account-page {
  max-width: var(--content-width);
  overflow-wrap: anywhere;
}

.account-page [hidden] {
  display: none !important;
}

.account-page p {
  margin-block: 0 var(--space-4);
}

.account-page .page-description {
  margin: 0;
}

.account-muted,
.account-note {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.account-actions form {
  margin: 0;
}

.account-page button {
  font-family: inherit;
  font-size: inherit;
}

.account-page .button {
  line-height: var(--leading-snug);
  text-align: center;
}

.account-page a:focus-visible,
.account-page button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.account-page button:disabled {
  color: var(--color-muted);
  cursor: wait;
}

.account-profile {
  margin-block-end: var(--space-6);
}

.account-profile p {
  margin-block-end: var(--space-1);
}

.account-name {
  font-size: var(--text-lg);
  font-weight: 700;
}

.account-notice {
  padding: var(--space-4);
  margin-block-end: var(--space-6);
  border-inline-start: 3px solid var(--color-callout-error-border);
  background: var(--color-callout-error-bg);
  color: var(--color-callout-error-fg);
}

.account-notice p {
  margin-block-end: var(--space-2);
}

#account-recovery {
  margin-block-end: var(--space-4);
}

.account-note {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}