/* ── Account page (activation / password reset) ──────────────── */
:root {
  --text-error: #dc2626;
}

/* ── Layout ───────────────────────────────────────────────────── */
/* The card is centred with flex, so the body must be free to grow. A fixed
   height: 100% on body made a card taller than the viewport overflow equally
   above and below, and the top of the card could never be scrolled into view
   (phones, once the request form gained the Turnstile slot). Only html is
   fixed; body is min-height so a tall card extends the page and scrolls. */
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 1.5rem;
}

/* ── Card ─────────────────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 28rem;
  text-align: left;
}
.logo-wrap {
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 1.5rem;
}
.view[hidden] {
  display: none;
}

/* ── Headings / copy ──────────────────────────────────────────── */
h1 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.375rem;
}
.subtitle {
  font-size: 0.875rem;
  color: var(--text-subtle);
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.hint {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Form fields ──────────────────────────────────────────────── */
.field {
  margin-bottom: 1rem;
}
label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}
input[type='email'],
input[type='password'] {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  font-family: inherit;
  /* 1rem (16px) avoids iOS Safari focus auto-zoom */
  font-size: 1rem;
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: var(--app-border-width, calc(1px + 0.5pt)) solid var(--border);
  border-radius: 0.375rem;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background-color 0.3s;
  appearance: none;
  -webkit-appearance: none;
}
input[type='email']:focus,
input[type='password']:focus {
  border-color: var(--ms-blue);
  box-shadow: 0 0 0 3px rgb(0 120 212 / 0.15);
}
input:disabled {
  opacity: 0.6;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6875rem 1.25rem;
  background-color: var(--text-primary);
  color: var(--bg-card);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
  user-select: none;
  margin-top: 0.5rem;
}
.btn-submit:hover {
  opacity: 0.88;
}
.btn-submit:focus-visible {
  outline: 2px solid var(--ms-blue);
  outline-offset: 2px;
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Status / links ───────────────────────────────────────────── */
.status {
  margin-top: 1rem;
  font-size: 0.875rem;
  min-height: 1.25rem;
  text-align: center;
}
.status.error {
  color: var(--text-error);
}
.status.info {
  color: var(--text-subtle);
}
.back-link {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-subtle);
  text-decoration: none;
}
.back-link:hover {
  color: var(--text-primary);
}
.back-link-spaced {
  margin-top: 1.5rem;
}

/* ── Result glyphs ────────────────────────────────────────────── */
.check,
.cross {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}
.check {
  color: #16a34a;
}
.cross {
  color: var(--text-error);
}