/* The account-deletion page's layout. Every colour, size, radius, font and
   shadow comes from brand.css (generated from the app's brand tokens): this
   file only arranges them. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-backdrop);
  color: var(--on-surface);
  font-family: var(--font-text);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-tracking);
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xxxl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  overflow-wrap: anywhere;
}

.masthead { display: grid; gap: var(--space-xs); justify-items: start; }
.masthead .icon { width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-radius); }

.eyebrow {
  margin: 0;
  color: var(--primary);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--headline-size);
  line-height: var(--headline-line);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-tracking);
}

.card {
  background: var(--card-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  clip-path: var(--card-clip);
  box-shadow: var(--card-shadow);
  padding: var(--space-xl);
}

.section-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: var(--title-line);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
}

.section-title:focus { outline: none; }

p { margin: 0 0 var(--space-md); }

.list { margin: 0 0 var(--space-md); padding-left: var(--space-xl); }
.list li { margin-bottom: var(--space-xs); }

.muted { color: var(--on-surface-variant); }
.small { font-size: var(--small-size); line-height: var(--small-line); }

form { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md); }

label { font-weight: var(--label-weight); }

input[type="email"],
input[type="text"] {
  font: inherit;
  color: var(--on-surface);
  background: var(--field-surface);
  border: var(--field-border-width) solid var(--outline);
  border-radius: var(--control-radius);
  clip-path: var(--control-clip);
  min-height: var(--target);
  padding: 0 var(--space-md);
  width: 100%;
}

#code { font-family: var(--font-numeric); }

.check { display: flex; gap: var(--space-sm); align-items: flex-start; font-weight: inherit; }
.check input { width: var(--check-size); height: var(--check-size); margin: 0; accent-color: var(--danger); flex: none; }

.button {
  font: inherit;
  font-weight: var(--label-weight);
  min-height: var(--target);
  padding: 0 var(--space-xl);
  border: 0;
  border-radius: var(--control-radius);
  clip-path: var(--control-clip);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  justify-self: start;
  transition: transform var(--press-duration) var(--press-curve);
}

.button:active:not(:disabled) { transform: scale(var(--press-scale)); }
.button.danger { background: var(--danger); color: var(--on-danger); }
.button:disabled { background: var(--disabled-surface); color: var(--on-disabled); cursor: not-allowed; }

.link {
  font: inherit;
  background: none;
  border: 0;
  padding: var(--space-xs) 0;
  min-height: var(--target);
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; }

a { color: var(--primary); }

:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

.status {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--control-radius);
  background: var(--error-container);
  color: var(--on-error-container);
}

.status[data-tone="info"] { background: var(--surface-container); color: var(--on-surface); }

.receipt { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-md); }
.receipt dt { color: var(--on-surface-variant); }
.receipt dd { margin: 0; overflow-wrap: anywhere; }
.receipt code { font-family: var(--font-numeric); }

.footer { color: var(--on-surface-variant); font-size: var(--small-size); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:active:not(:disabled) { transform: none; }
}