/* Account delete -- /me/delete confirmation page.

   Migrated out of me.css in slice #281 (D8) so the /me redesign could
   drop the `.me__heading` / `.me__field` rules without silently
   breaking this page. Visual output of /me/delete is UNCHANGED
   pre/post-slice; only the class names move from `.me__*` to
   `.account-delete__*` for clean BEM separation.

   Used in: /me/delete page template (ui/templates/pages/account_delete.html).

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it, and utility classes always do (mirrors me.css). */

@layer components {

/* Narrow centered column. Same shape as the prior `.me` root because
   the two pages used to share a class -- this just gives /me/delete
   its own selector so /me can evolve independently. */
.account-delete {
  max-width: var(--content-form);
  margin: var(--space-section) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.account-delete__heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.account-delete__muted {
  margin-top: var(--space-1);
  color: var(--md-on-surface-variant);
  font-size: var(--text-sm);
}

.account-delete__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-border-muted);
  border-radius: var(--radius-md);
}

/* Email retains the mono font on /me/delete because the email here is
   technical lookup context ("you are about to delete the account
   whose email is X"), not identity content -- per bible 1.7. This is
   the deliberate divergence from /me's identity email (slice #281). */
.account-delete__email {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--md-on-surface);
}

.account-delete__link {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--md-border);
  border-radius: var(--radius-md);
  color: var(--md-on-surface);
  font-weight: 600;
  text-decoration: none;
}

.account-delete__danger-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.account-delete__danger-btn {
  height: var(--control-h);
  padding: 0 var(--space-5);
  background: var(--md-error);
  border: 1px solid var(--md-error);
  border-radius: var(--radius-md);
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 640px) {
  .account-delete__danger-form {
    align-items: stretch;
    flex-direction: column;
  }
}

}