/* Build 665: keep the Welcome experience inside every tablet viewport and
   strengthen the few trust and password controls users rely on most. */

html body .auth-gate .auth-field-group {
  display: grid !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}

html body .auth-gate .auth-field-group > label {
  display: block !important;
  margin: 0 !important;
  color: rgba(8, 47, 57, 0.72) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

html body .auth-gate .auth-password-field {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body .auth-gate .auth-password-field > input,
html body #authForm .auth-password-field > input,
html body #signUpForm .auth-password-field > input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 58px !important;
}

html body .auth-gate .auth-password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: rgba(7, 74, 79, 0.78) !important;
  background: transparent !important;
  box-shadow: none !important;
  translate: none !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease !important;
}

html body .auth-gate .auth-password-toggle svg {
  width: 19px !important;
  height: 19px !important;
  opacity: 1 !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

html body .auth-gate .auth-password-toggle.is-revealed {
  color: #087f78 !important;
  background: rgba(12, 139, 121, 0.075) !important;
  border-color: rgba(12, 139, 121, 0.1) !important;
}

html body .auth-gate .auth-password-toggle.is-revealed::after {
  position: absolute !important;
  width: 22px !important;
  height: 1.5px !important;
  content: "" !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(-42deg) !important;
  pointer-events: none !important;
}

@media (hover: hover) {
  html body .auth-gate .auth-password-toggle:hover {
    color: #087f78 !important;
    background: rgba(12, 139, 121, 0.065) !important;
  }
}

html body .auth-gate .auth-password-toggle:focus-visible {
  outline: 2px solid rgba(18, 164, 142, 0.78) !important;
  outline-offset: 1px !important;
}

/* Important trust language remains quiet, but never faint. */
html body .auth-gate .auth-local-option > span,
html body #authForm .auth-local-option > span {
  color: rgba(8, 47, 57, 0.67) !important;
  font-size: 0.72rem !important;
  font-weight: 660 !important;
  line-height: 1.4 !important;
}

html body .auth-gate .auth-legal-links {
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(8, 47, 57, 0.58) !important;
}

html body .auth-gate .auth-legal-links a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 4px !important;
  color: #08736e !important;
  font-size: 0.74rem !important;
  font-weight: 780 !important;
}

/* The original desktop columns do not fit inside an iPad portrait card once
   their fixed padding and 64px gap are included. These flexible columns keep
   the complete form and legal footer inside the rounded surface. */
@media (min-width: 761px) and (max-width: 1024px) {
  html body .auth-gate .auth-card,
  html body .auth-gate .auth-card.signup-mode,
  html body .auth-gate .auth-card.verify-mode {
    box-sizing: border-box !important;
    grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr) !important;
    width: min(920px, 100%) !important;
    min-width: 0 !important;
    column-gap: 28px !important;
    padding: 36px !important;
  }

  html body .auth-gate .auth-card::before {
    inset: 0 56% 0 0 !important;
  }

  html body .auth-gate .auth-gate-form,
  html body .auth-gate .auth-verification-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 8px !important;
  }

  html body .auth-gate .auth-card > .account-auth-message,
  html body .auth-gate .auth-card > .auth-legal-links {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    padding-left: 8px !important;
  }

  html body .auth-gate .auth-mappi,
  html body .auth-gate .auth-card.signup-mode .auth-mappi {
    width: clamp(168px, 22vw, 190px) !important;
    height: clamp(168px, 22vw, 190px) !important;
  }

  html body .auth-gate .auth-brand h1,
  html body .auth-gate .auth-card.signup-mode .auth-brand h1 {
    font-size: clamp(2.7rem, 6vw, 3.25rem) !important;
  }
}

/* Maintain the calm pause between the teal mobile hero and the form. */
@media (max-width: 760px) {
  html body .auth-card:not(.signup-mode):not(.verify-mode) #authForm {
    /* The 28px grid offset produces an optical 18–20px pause below the
       126px teal hero after the first-row mascot alignment is accounted for. */
    margin-top: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .auth-gate .auth-password-toggle {
    transition: none !important;
  }
}