/* Auth pages: sign in (login*.tpl), password recovery (recover*.tpl), new password (confirm_pass*.tpl).
   One centered 456px card in the site container, that sits on the lower edge of the light page band (css/pageband.css .rt-band--overlap).
   Tokens from DESIGN.md; scoped to .rt-auth so the legacy #loginWrapper rules never apply. */

.rt-auth {
  --au-ink: #101828;
  --au-ink-2: #475467;
  --au-ink-3: #5D6B82;
  --au-line: #E4E7EC;
  --au-field: #8792A2;          /* input border, 3.3:1 on white */
  --au-soft: #F5F7FB;
  --au-link: #1F5FBF;
  --au-accent: #2D6FE3;
  --au-action: #2E7D32;
  --au-action-hover: #246428;
  --au-action-tint: #E7F4E8;
  --au-danger: #B42318;
  --au-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  box-sizing: border-box;
  margin-top: clamp(-112px, -10vw, -88px);
  padding-bottom: clamp(56px, 7vw, 96px);
  color: var(--au-ink);
  font-size: 16px;
  line-height: 1.55;
}
.rt-auth *, .rt-auth *::before, .rt-auth *::after { box-sizing: border-box; }
/* the page container (css/pageband.css) is the site container; the card column inside it is 456px, centered under the centered band */
.rt-auth > * { max-width: 456px; margin-left: auto; margin-right: auto; }
.rt-auth ::selection { background: #DDE8FF; color: var(--au-ink); }

.rt-auth__card {
  padding: clamp(24px, 5vw, 36px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 12px 32px rgba(16, 24, 40, 0.10);
}

/* server message (wrong password, captcha, rate limit) at the top of the card */
.rt-auth .rt-alert { margin: 0 0 20px !important; }

.rt-auth__field { margin: 0 0 20px; }
.rt-auth__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.rt-auth label.rt-auth__label,
.rt-auth .rt-auth__label {
  display: block; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0;
  color: var(--au-ink); font-size: 15px; font-weight: 700 !important; line-height: 1.3 !important; position: static !important;
}
.rt-auth__field > label.rt-auth__label { margin-bottom: 8px !important; }
.rt-auth__row a { font-size: 14px; font-weight: 600; color: var(--au-link); text-underline-offset: 3px; }

#contentWrapper .rt-auth input.rt-auth__input {
  display: block;
  float: none !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px;
  border: 1px solid var(--au-field) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--au-ink);
  font: inherit;
  font-size: 16px;               /* no zoom on iOS */
  caret-color: var(--au-accent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#contentWrapper .rt-auth input.rt-auth__input:hover { border-color: var(--au-ink-3) !important; }
#contentWrapper .rt-auth input.rt-auth__input:focus {
  outline: none;
  border-color: var(--au-accent) !important;
  box-shadow: 0 0 0 3px rgba(45, 111, 227, 0.22) !important;
}
#contentWrapper .rt-auth input.rt-auth__input[aria-invalid="true"] { border-color: var(--au-danger) !important; }
#contentWrapper .rt-auth input.rt-auth__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18) !important; }
.rt-auth__input::placeholder { color: #8792A2; opacity: 1; }

/* password with show / hide */
.rt-auth__pw { position: relative; }
#contentWrapper .rt-auth .rt-auth__pw input.rt-auth__input { padding-right: 96px; }
.rt-auth__eye {
  position: absolute; top: 4px; right: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--au-ink-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.rt-auth__eye:hover { background: var(--au-soft); color: var(--au-ink); }
.rt-auth__eye:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 0; }
.rt-auth__eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rt-auth__eye .rt-auth__eye-off { display: none; }
.rt-auth__eye[aria-pressed="true"] .rt-auth__eye-on { display: none; }
.rt-auth__eye[aria-pressed="true"] .rt-auth__eye-off { display: inline; }
.rt-auth__eye:not([data-ready]) { display: none; }   /* only once js/auth.js wired it */

.rt-auth__hint { margin: 8px 0 0 !important; color: var(--au-ink-3) !important; font-size: 14px; line-height: 1.45; }
.rt-auth__err { display: flex; gap: 6px; margin: 8px 0 0 !important; color: var(--au-danger) !important; font-size: 14px; font-weight: 600; line-height: 1.45; }
.rt-auth__err[hidden] { display: none; }

/* Turnstile: reserve its height so the button does not jump when it loads */
.rt-auth .cf-turnstile { min-height: 65px; margin: 4px 0 20px; }

#contentWrapper .rt-auth button.rt-auth__submit,
.rt-auth a.rt-auth__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; margin: 0; padding: 0 22px;
  border: 0; border-radius: 999px !important;
  background: var(--au-action); color: #fff !important;
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 6px 16px rgba(46, 125, 50, 0.22);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s var(--au-ease);
}
#contentWrapper .rt-auth button.rt-auth__submit:hover,
.rt-auth a.rt-auth__submit:hover { background: var(--au-action-hover); transform: translateY(-1px); text-decoration: none; }
#contentWrapper .rt-auth button.rt-auth__submit:focus-visible,
.rt-auth a.rt-auth__submit:focus-visible { outline: 3px solid var(--au-accent); outline-offset: 2px; }
#contentWrapper .rt-auth button.rt-auth__submit[aria-busy="true"] { opacity: 0.8; cursor: progress; }

.rt-auth__alt { margin: 20px auto 0 !important; text-align: center; color: var(--au-ink-2) !important; font-size: 15px; }
.rt-auth__alt a { color: var(--au-link); font-weight: 700; text-underline-offset: 3px; }
.rt-auth a:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 2px; border-radius: 4px; }

/* end states (request sent, password changed, link invalid) */
.rt-auth__state { text-align: center; }
.rt-auth__badge {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--au-action-tint); color: var(--au-action);
}
.rt-auth__badge svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt-auth__badge--mail { background: #F1F5FF; color: var(--au-accent); }
.rt-auth__badge--warn { background: #FEF3F2; color: var(--au-danger); }
#contentWrapper .rt-auth h2.rt-auth__title {
  text-align: center !important;
  margin: 0 0 8px; color: var(--au-ink) !important;
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance;
}
.rt-auth__state p { margin: 0 0 20px !important; color: var(--au-ink-2) !important; text-wrap: pretty; }
.rt-auth__state p strong { color: var(--au-ink); }

@media (prefers-reduced-motion: reduce) {
  #contentWrapper .rt-auth button.rt-auth__submit, .rt-auth a.rt-auth__submit { transition: none; }
  #contentWrapper .rt-auth button.rt-auth__submit:hover, .rt-auth a.rt-auth__submit:hover { transform: none; }
}
@media (max-width: 380px) {
  .rt-auth { padding-left: 12px; padding-right: 12px; }
  .rt-auth__card { padding-left: 20px; padding-right: 20px; }
  .rt-auth__row { flex-wrap: wrap; }
  /* the Turnstile iframe is a fixed 300px: scale it to the card on the narrowest phones */
  .rt-auth .cf-turnstile { min-height: 54px; height: 54px; transform: scale(0.82); transform-origin: 0 0; }
}