/* Auth pages: /app/login, /app/signup, /app/reset-password, /app/verify-email.
   Loaded after style.css and iv-threshold.css. One button system and one column
   width for every form on these pages (S04-15). */

.iv-auth-page {
  --iv-auth-column: 440px;
}

/* Every block in the column is as wide as the form card — the code block used to
   run 20px wider than the card above it on desktop. */
.iv-auth-page .iv-auth-code,
.iv-auth-page .iv-auth-status-card,
.iv-auth-page .iv-auth-verify,
.iv-auth-page .iv-auth-links,
.iv-auth-page .auth-info,
.iv-auth-page .auth-success {
  width: 100%;
  max-width: var(--iv-auth-column);
}

.iv-auth-page form {
  max-width: var(--iv-auth-column);
}

/* Primary submit: the same gold plate as SIGN IN (L2 button system in iv-threshold.css),
   instead of the older rounded sentence-case button from style.css. The doubled
   selectors outrank `.auth-page button[type="submit"]` and `#login-submit`. */
.iv-auth-page button[type="submit"].iv-auth-submit,
.iv-auth-page #login-submit.iv-auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 1px solid transparent;
  border-radius: var(--iv-btn-radius, 2px);
  background: var(--iv-gold, #C9A84C);
  color: var(--iv-on-gold, #20180A);
  box-shadow: var(--iv-btn-edge, none);
  font: 500 0.82rem/1.3 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  /* "Resend available in 45s" must wrap on a 320px phone, not overflow the card. */
  white-space: normal;
  transform: none;
  cursor: pointer;
}

.iv-auth-page button[type="submit"].iv-auth-submit:hover:not(:disabled),
.iv-auth-page #login-submit.iv-auth-submit:hover:not(:disabled) {
  background: var(--iv-gold-light, #E8D48B);
  color: var(--iv-on-gold, #20180A);
  box-shadow: var(--iv-btn-edge, none);
  transform: none;
}

.iv-auth-page button[type="submit"].iv-auth-submit:focus-visible,
.iv-auth-page #login-submit.iv-auth-submit:focus-visible {
  /* One ring: the global :focus-visible outline (no second box-shadow ring). */
  box-shadow: var(--iv-btn-edge, none);
}

/* "Loading…" until the page script has attached its handler (S04-M1). */
.iv-auth-page button[type="submit"].iv-auth-submit:disabled,
.iv-auth-page #login-submit.iv-auth-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Secondary submit (resend): the ghost plate of the same system. */
.iv-auth-page button[type="submit"].iv-auth-submit--secondary {
  background: rgba(10, 10, 11, 0.28);
  color: var(--iv-ink, #F6F6F8);
  border-color: var(--iv-hairline-strong, rgba(201, 168, 76, 0.3));
  box-shadow: none;
}

.iv-auth-page button[type="submit"].iv-auth-submit--secondary:hover:not(:disabled) {
  background: var(--iv-gold-wash, rgba(201, 168, 76, 0.08));
  border-color: rgba(201, 168, 76, 0.5);
  color: var(--iv-ink, #F6F6F8);
  box-shadow: none;
}

/* Error text can carry one way out ("Verify your email", "Sign in"). */
.iv-auth-page [role="alert"] a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* verify-email: code card first, resend as a quiet row under it. */
.iv-auth-verify {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  text-align: left;
}

.iv-auth-page form.iv-auth-verify__resend {
  width: 100%;
  padding: 0;
  gap: 10px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.iv-auth-verify #resend-status:empty {
  display: none;
}

#verify-code-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
  font-size: 1.25rem;
}

/* The finished-reset panel focuses its message for screen readers. */
#reset-done-msg:focus {
  outline: none;
}

@media (max-width: 520px) {
  .iv-auth-page button[type="submit"].iv-auth-submit,
  .iv-auth-page #login-submit.iv-auth-submit {
    padding: 15px 16px;
    letter-spacing: 0.1em;
  }
}