/* Simple authentication pages, using the shared brand tokens. */
.auth-page {
  --page-top-gap: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  overflow-wrap: anywhere;
}

.auth-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-page .panel { border: 1px solid var(--border); gap: var(--space-4); }
.auth-page #auth-form { gap: var(--space-4); }
.auth-page .field > label, .auth-page #otp-label { font-size: var(--font-size-small); line-height: var(--line-height-small); }
.auth-page input { border: 1px solid var(--border); }
.auth-recipient { max-width: 100%; font-weight: var(--font-weight-heading); overflow-wrap: anywhere; }
#resend-hint { min-width: 16ch; font-variant-numeric: tabular-nums; }
.auth-resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.auth-resend > button { align-self: center; }
#resend-button {
  --button-bg: var(--surface); --button-fg: var(--fg); --button-hover-bg: var(--hover);
  border-color: var(--border);
}
.auth-page[data-mode="verify"] .auth-intro { align-items: center; text-align: center; }
.auth-page[data-mode="verify"] #otp-field { align-items: center; gap: var(--space-3); }
.auth-page[data-mode="verify"] #submit-button { align-self: center; }
.auth-page[data-mode="verify"] #auth-status, .auth-page[data-mode="verify"] #auth-switch { text-align: center; }
.otp-boxes {
  display: flex;
  gap: var(--space-2);
}

.auth-page .otp-boxes input[type="text"] {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
}

#google-button {
  --button-bg: var(--surface);
  --button-fg: var(--fg);
  --button-hover-bg: var(--hover);
  border-color: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  align-self: center;
  margin-inline: auto;
}

.google-logo {
  display: block;
  align-self: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.auth-divider {
  color: var(--subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  text-align: center;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

@media (max-width: 479px) {
  .auth-page {
    gap: var(--section-gap);
  }

  .auth-page .panel {
    padding: var(--space-4);
  }
}