/* Passwordless auth screens: /login, /create_account, /auth/code, and the
   onboarding steps that follow in PR 4. Plan: tasks/passwordless-onboarding-plan.md,
   Part I.

   Ships with the screens rather than living in propera_style_new.css so the
   component never depends on which page-level sheet is loaded (the consent
   banner lesson). propera_style_new.css IS loaded here through _head.php, and
   it styles bare `button` and `a:link`, so every rule below that touches a
   button or a link declares every property those bare rules set, not only the
   ones it wants to change. An undeclared property inherits the app default.

   Text links and text buttons use a darker teal than the brand token: #1FC4B0
   on white is about 2.4:1, well under the 4.5:1 floor. The brand teal is kept
   for focus rings and borders, where contrast rules are looser. */

.auth-body {
  background: #ffffff;
}

/* The shell also carries .index-container from propera_style_new.css, which
   paints the app's animated teal grid and gradient accent lines (its ::before
   and ::after) behind the card, the same background the old login page had.
   The rules here only change its layout: centred instead of top-padded. */
.auth-shell {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
}

.auth-card {
  position: relative;
  z-index: 10; /* above the grid (0) and the accent lines (1), like .form-panel */
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  padding: 32px 24px;
}

.auth-logo-link {
  display: block;
  width: 88px;
  margin: 0 auto 32px;
}

.auth-logo {
  display: block;
  width: 88px;
  height: 88px;
}

.auth-heading {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tenant-secondary, #0F2C46);
  text-align: center;
}

.auth-lede {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #4b5563;
  text-align: center;
}

.auth-email {
  color: var(--tenant-secondary, #0F2C46);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.auth-form {
  margin: 0;
}

.auth-field {
  margin: 0 0 16px;
}

.auth-label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tenant-secondary, #0F2C46);
}

.auth-input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: var(--tenant-secondary, #0F2C46);
  font-family: inherit;
  font-size: 16px; /* iOS zooms the page on focus below 16px */
  line-height: 1.4;
}

.auth-input::placeholder {
  color: #9ca3af;
}

.auth-input:focus {
  outline: 2px solid var(--tenant-primary, #1FC4B0);
  outline-offset: 2px;
  border-color: var(--tenant-primary, #1FC4B0);
}

.auth-input:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

/* One field for the whole code, not six boxes: one field is what the OS knows
   how to autofill and what a paste lands in. Selector carries the element and
   the form because propera_style_new.css forces 16px on input[type="text"]
   below 768px at (0,1,1), which outranks a bare class. */
.auth-form input.auth-code-input {
  min-height: 64px;
  padding: 12px 16px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* letter-spacing adds space after the last digit; this re-centres */
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Primary action. Every property propera_style_new.css sets on bare `button` is
   declared here. */
.auth-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 8px 0 0;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--tenant-primary, #1FC4B0) 0%, var(--tenant-gradient, #1D65D1) 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.auth-btn:hover {
  transform: none;
  filter: brightness(0.97);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.auth-btn:active {
  transform: scale(0.98);
}

.auth-btn:focus-visible {
  outline: 2px solid var(--tenant-secondary, #0F2C46);
  outline-offset: 2px;
}

.auth-btn:disabled,
.auth-btn:disabled:hover {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Secondary, text-weight action (Resend code, and Skip in PR 4). Also a bare
   `button`, so the same full override. */
.auth-text-btn {
  display: inline-block;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0f766e;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  box-shadow: none;
  transition: none;
}

.auth-text-btn:hover {
  background: #f0fdfa;
  color: var(--tenant-secondary, #0F2C46);
  transform: none;
  filter: none;
  box-shadow: none;
}

.auth-text-btn:focus-visible {
  outline: 2px solid var(--tenant-primary, #1FC4B0);
  outline-offset: 2px;
}

.auth-text-btn:disabled,
.auth-text-btn:disabled:hover {
  background: transparent;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Links. propera_style_new.css styles a:link at (0,1,1); these are (0,2,1). */
.auth-shell a.auth-link,
.auth-shell a.auth-link:link,
.auth-shell a.auth-link:visited {
  color: #0f766e;
  background-color: transparent;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-shell a.auth-link:hover {
  color: var(--tenant-secondary, #0F2C46);
}

.auth-shell a.auth-link:focus-visible {
  outline: 2px solid var(--tenant-primary, #1FC4B0);
  outline-offset: 2px;
  border-radius: 2px;
}

/* "or" divider between the email form and the Google button. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #6b7280;
  font-size: 14px;
  text-transform: lowercase;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e5e7eb;
}

/* Google's button rules: white, thin grey border, the official G mark, dark
   text. A link styled as a button, so it overrides every property the app's
   a:link rule sets. */
.auth-shell a.auth-google-btn,
.auth-shell a.auth-google-btn:link,
.auth-shell a.auth-google-btn:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background-color: #ffffff;
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.auth-shell a.auth-google-btn:hover {
  background-color: #f8f9fa;
  color: #1f1f1f;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
}

.auth-shell a.auth-google-btn:active {
  transform: scale(0.98);
}

.auth-shell a.auth-google-btn:focus-visible {
  outline: 2px solid var(--tenant-secondary, #0F2C46);
  outline-offset: 2px;
}

.auth-google-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.auth-switch {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
  text-align: center;
}

.auth-terms {
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  text-align: center;
}

.auth-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.auth-alert .ph {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.1;
}

.auth-alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.auth-alert-notice {
  background: #eef7f6;
  color: var(--tenant-secondary, #0F2C46);
  border: 1px solid #cdebe7;
}

.auth-field-error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #b91c1c;
  text-align: left;
}

.auth-field-error .ph {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.1;
}

.auth-status {
  margin: 20px 0 0;
  text-align: center;
}

.auth-muted {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
}

.auth-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tenant-secondary, #0F2C46);
}

.auth-resend {
  margin: 0;
}

.auth-status .auth-switch {
  margin-top: 12px;
}

.auth-turnstile {
  margin: 0 0 16px;
}

/* Off-screen, tab-skipped, never autofilled. A value here is a bot. */
.auth-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.auth-shell [hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell::before,
  .auth-shell::after {
    animation: none;
  }

  .auth-btn,
  .auth-text-btn {
    transition: none;
  }

  .auth-btn:active {
    transform: none;
  }
}

@media (max-width: 420px) {
  .auth-card {
    padding: 28px 20px;
  }

  .auth-form input.auth-code-input {
    font-size: 28px;
  }
}

/* ==========================================================================
   Onboarding (plan Part I, screens 3 to 7). Same shell and card as the auth
   screens; these rules add the progress bar, option cards, and the loading
   screen. Option cards are submit buttons, so they carry the same full
   override of the app's bare `button` rule as .auth-btn.
   ========================================================================== */

.onb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: -8px 0 12px;
}

.auth-shell a.onb-back,
.auth-shell a.onb-back:link,
.auth-shell a.onb-back:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 8px 8px 0;
  color: #0f766e;
  background-color: transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.auth-shell a.onb-back:hover {
  color: var(--tenant-secondary, #0F2C46);
}

.auth-shell a.onb-back:focus-visible {
  outline: 2px solid var(--tenant-primary, #1FC4B0);
  outline-offset: 2px;
  border-radius: 4px;
}

.onb-step-label {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
}

/* Native <progress>: no inline width, accessible by default. */
.onb-progress,
.onb-loading {
  display: block;
  width: 100%;
  height: 4px;
  margin: 0 0 24px;
  border: 0;
  border-radius: 2px;
  background: #e5e7eb;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.onb-progress::-webkit-progress-bar,
.onb-loading::-webkit-progress-bar {
  background: #e5e7eb;
  border-radius: 2px;
}

.onb-progress::-webkit-progress-value,
.onb-loading::-webkit-progress-value {
  background: linear-gradient(90deg, var(--tenant-primary, #1FC4B0), var(--tenant-gradient, #1D65D1));
  border-radius: 2px;
  transition: width 240ms ease;
}

.onb-progress::-moz-progress-bar,
.onb-loading::-moz-progress-bar {
  background: linear-gradient(90deg, var(--tenant-primary, #1FC4B0), var(--tenant-gradient, #1D65D1));
  border-radius: 2px;
}

.onb-loading {
  height: 6px;
  margin: 24px 0 16px;
}

.onb-loading-copy {
  margin: 0;
  min-height: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #4b5563;
  text-align: center;
}

.onb-chosen {
  margin: -12px 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
  text-align: center;
}

.onb-form {
  margin: 0;
}

.onb-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onb-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #ffffff;
  color: var(--tenant-secondary, #0F2C46);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.onb-card .ph {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--tenant-secondary, #0F2C46);
}

.onb-card span {
  flex: 1 1 auto;
}

.onb-card:hover {
  border-color: var(--tenant-primary, #1FC4B0);
  background: #ffffff;
  box-shadow: none;
  transform: none;
  filter: none;
}

.onb-card:focus-visible {
  border-color: var(--tenant-primary, #1FC4B0);
  outline: 2px solid var(--tenant-primary, #1FC4B0);
  outline-offset: 2px;
}

.onb-card:active {
  transform: scale(0.98);
}

.onb-card:disabled,
.onb-card:disabled:hover {
  background: #ffffff;
  color: #9ca3af;
  border-color: #d1d5db;
  opacity: 0.7;
  cursor: wait;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Shown only when a step is reached by Back or by resuming with an answer stored. */
.onb-card.is-selected {
  border: 2px solid var(--tenant-primary, #1FC4B0);
  padding: 13px 15px;
}

.onb-card .onb-card-check {
  color: var(--tenant-primary, #1FC4B0);
}

.onb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.onb-actions .auth-btn {
  flex: 1 1 auto;
  margin: 0;
}

.onb-actions .auth-text-btn {
  flex: 0 0 auto;
  min-height: 52px;
}

.onb-logout {
  margin: 24px 0 0;
  text-align: center;
}

.onb-logout .auth-text-btn {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .onb-progress::-webkit-progress-value,
  .onb-loading::-webkit-progress-value {
    transition: none;
  }
}