/* /delete-account steps (Q-123), on top of site.css and forms.css.
   Cached for a year like every file under /assets/v1/: after changing it,
   follow web/README.md (copy the folder to v2). */

.da-flow [hidden] { display: none !important; }

:root {
  --danger: #9b2c1f;
  --danger-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --danger: #c0412f;
    --danger-ink: #ffffff;
  }
}

.da-step h3 { margin: 0.2em 0 0.6em; font-size: 1.2rem; }
.da-step h3:focus, .da-step [tabindex="-1"]:focus { outline: none; }
.da-flow .notice.error { margin-top: 1rem; }
.da-flow .notice.error:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

.account {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.da-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0;
}
.da-actions .btn { flex: 1 1 14rem; }

.btn.danger {
  background: var(--danger);
  color: var(--danger-ink);
  box-shadow: var(--shadow);
}
.btn.danger:not([disabled]):hover { filter: brightness(1.1); }
.btn.quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.quiet:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }