/* Shared entry geometry: brand and form do not jump when changing modes.
   All overrides are scoped to authentication, never the signed-in account hub. */
html body #authGate.auth-gate {
  display: grid !important;
  place-items: start center !important;
  align-content: start !important;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)) !important;
  overflow-y: auto !important;
}

html body #authGate.auth-gate[hidden] { display: none !important; }

/* A roomy viewport can balance the card vertically. Safe alignment keeps the
   top reachable when signup is taller than the available height. Short
   screens and the software keyboard retain the scroll-friendly top anchor. */
@media (min-width: 761px) and (min-height: 800px) {
  html body #authGate.auth-gate { align-content: safe center !important; }
}
html body.keyboard-open #authGate.auth-gate { align-content: start !important; }

html body #authGate .auth-card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas: "identity form" "identity message" "identity legal" !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  width: min(960px, 100%) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  background: #f9fcf9 !important;
  box-shadow: 0 20px 50px rgba(2, 47, 68, 0.1) !important;
}

html body #authGate .auth-card::before {
  display: none !important;
  content: none !important;
}

html body #authGate .auth-identity {
  grid-area: identity;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 112px 24px 48px;
  gap: 24px;
  background: linear-gradient(148deg, #00162c 0%, #00243f 52%, #064763 100%);
}

html body #authGate .auth-card .auth-mappi {
  flex: none;
  align-self: center !important;
  width: 220px !important;
  height: 220px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #authGate .auth-card .auth-brand {
  align-self: center !important;
  justify-items: center !important;
  text-align: center !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  transform: none !important;
}

html body #authGate .auth-card .auth-brand h1 {
  font-size: clamp(2.4rem, 4vw, 3.5rem) !important;
}

html body #authGate .auth-card :is(#authForm, #signUpForm, #authVerificationPanel) {
  grid-area: form !important;
  align-self: start !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 36px 36px 0 !important;
  gap: 16px !important;
}

html body #authGate .auth-card .auth-form-heading {
  margin: 0 0 4px !important;
  padding: 0 !important;
  gap: 6px !important;
  text-align: left !important;
}

html body #authGate .auth-form-heading::before { display: none !important; }

html body #authGate .auth-form-heading strong {
  font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
  line-height: 1.15 !important;
}

html body #authGate .auth-form-heading > span {
  max-width: none !important;
  color: #49696e !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

html body #authGate .auth-form-heading .auth-next-step { font-size: 0.8rem !important; }
html body #authGate .auth-private-note { margin-top: 4px !important; }

html body #authGate .auth-card :is(#authForm, #signUpForm) input:not([type="checkbox"]) {
  box-sizing: border-box !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 14px !important;
  border-color: #b8cecd !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

html body #authGate .auth-card :is(#authForm, #signUpForm) input::placeholder {
  color: #627a7d !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

html body #authGate .auth-card :is(#authForm, #signUpForm) input:focus {
  border-color: #087f78 !important;
  box-shadow: 0 0 0 3px rgba(8, 127, 120, 0.12) !important;
}

html body #authGate .auth-card .account-auth-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  margin-top: 0 !important;
  gap: 0 !important;
}

html body #authGate .auth-card .account-auth-button.primary {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 14px !important;
  box-shadow: 0 7px 16px rgba(4, 52, 74, 0.14) !important;
}

html body #authGate .auth-card .auth-signup-prompt {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 6px !important;
  min-height: 44px !important;
  margin: 0 !important;
  text-align: center !important;
  color: #49696e !important;
}

html body #authGate .auth-card .auth-signup-prompt button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
}

html body #authGate #authForgotPasswordButton {
  justify-self: end !important;
  min-height: 44px !important;
  margin: -8px 0 !important;
  padding: 0 !important;
}

html body #authGate .auth-local-option { gap: 6px !important; }
html body #authGate #localContinueButton { min-height: 44px !important; box-shadow: none !important; }
html body #authGate .auth-legal-consent { gap: 10px !important; margin: 0 !important; }

html body #authGate .auth-card > #authMessage {
  grid-area: message !important;
  width: auto !important;
  max-width: none !important;
  margin: 12px 36px 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #b9dfcf !important;
  border-radius: 14px !important;
  background: #edf8f1 !important;
  color: #176343 !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

html body #authGate .auth-card > #authMessage.error {
  color: #853832 !important;
  background: #fff1ed !important;
  border-color: #efc4ba !important;
}

/* Completed destructive action, distinct from both green success and errors. */
html body #authGate .auth-card > #authMessage.is-deletion-confirmation {
  color: #783d48 !important;
  background: #fcf0f1 !important;
  border-color: #e8cbd0 !important;
}

html body #authGate .auth-card > #authMessage:empty { display: none !important; }
html body #authGate .auth-card > .auth-legal-links {
  grid-area: legal !important;
  width: auto !important;
  max-width: none !important;
  justify-self: stretch !important;
  margin: 12px 36px 24px !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  html body #authGate.auth-gate {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }
  html body #authGate .auth-card {
    width: min(440px, 100%) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "identity" "form" "message" "legal" !important;
    grid-template-rows: minmax(112px, min-content) auto auto auto !important;
    border-radius: 26px !important;
  }
  html body #authGate .auth-identity {
    flex-direction: row;
    justify-content: center;
    min-height: 112px;
    box-sizing: border-box;
    padding: 16px;
    gap: 12px;
  }
  html body #authGate .auth-card .auth-mappi { width: 72px !important; height: 72px !important; }
  /* The wordmark is artwork; welcome and form copy still honor enlarged text. */
  html body #authGate .auth-card .auth-brand h1 { font-size: clamp(30px, 8.5vw, 38px) !important; }
  html body #authGate .auth-brand p { display: none !important; }
  html body #authGate .auth-card :is(#authForm, #signUpForm, #authVerificationPanel) { padding: 24px 20px 0 !important; }
  html body #authGate .auth-card > #authMessage { margin-inline: 20px !important; }
  html body #authGate .auth-card > .auth-legal-links { margin: 12px 20px 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body #authGate .auth-card * { scroll-behavior: auto !important; }
}

/* First visit: a composed invitation, in the same column as the account forms.
   No fixed content heights: large text and short landscape screens can scroll. */
html body #authGate .auth-card:has(#authWelcome:not([hidden])) {
  grid-template-rows: minmax(0, 1fr) auto auto !important;
}
html body #authGate .auth-card #authWelcome {
  grid-area: form !important;
  align-self: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 44px 36px 0;
  text-align: center;
  overflow-wrap: anywhere;
}
html body #authGate .auth-card #authWelcome[hidden] { display: none !important; }
html body #authGate #authWelcome .auth-welcome-eyebrow {
  margin: 0 0 18px;
  color: var(--mymappi-color-muted, #486375);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}
html body #authGate #authWelcome h2 {
  max-width: 19ch;
  margin: 0;
  color: #00243f;
  font-size: clamp(1.75rem, 2.6vw, 2.125rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.16;
  text-wrap: balance;
}
html body #authGate #authWelcome > p {
  max-width: 36ch;
  margin: 18px 0 28px;
  color: #496570;
  font-size: 0.9375rem;
  line-height: 1.65;
  text-wrap: pretty;
}
html body #authGate #authWelcome #authGetStarted {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 20px;
  font-size: 1rem !important;
  font-weight: 750;
  line-height: 1.4;
}
html body #authGate #authGetStarted svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
html body #authGate #authWelcome #authWelcomeLogin {
  width: 100%;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 10px 8px;
  color: #285b6b;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: #b8ced0;
  text-underline-offset: 4px;
}
html body #authGate #authWelcome .auth-welcome-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  margin: 22px 0 0;
  padding-top: 18px;
  width: 100%;
  border-top: 1px solid #dce8e7;
  color: #4d6871;
  font-size: 0.75rem;
  line-height: 1.55;
  text-align: left;
}
html body #authGate .auth-welcome-privacy svg { width: 18px; height: 18px; flex: 0 0 18px; }
html body #authGate .auth-card:has(#authWelcome:not([hidden])) > .auth-legal-links {
  margin: 12px 36px 24px !important;
}
html body #authGate #authWelcome button:focus-visible {
  outline: 3px solid #167b86;
  outline-offset: 3px;
}
@media (max-width: 760px) {
  html body #authGate .auth-card:has(#authWelcome:not([hidden])) {
    grid-template-rows: minmax(112px, min-content) auto auto auto !important;
  }
  html body #authGate .auth-card #authWelcome { padding: 28px 20px 0; }
  html body #authGate #authWelcome h2 { font-size: 1.875rem; }
  html body #authGate #authWelcome > p { margin: 16px 0 24px; }
  html body #authGate .auth-card:has(#authWelcome:not([hidden])) > .auth-legal-links { margin: 12px 20px 20px !important; }
}
@media (max-width: 359px) {
  html body #authGate .auth-card #authWelcome { padding-inline: 20px; }
  html body #authGate #authWelcome h2 { font-size: 1.6875rem; }
}

/* Welcome and Welcome back share one frame, brand anchor and footer baseline.
   A minimum (never a fixed height) leaves validation errors and enlarged text
   free to grow. Short/keyboard viewports keep their intrinsic, scrollable fit. */
@media (min-width: 761px) and (min-height: 800px) {
  html body:not(.keyboard-open) #authGate .auth-card:is(:has(#authWelcome:not([hidden])), :has(#authForm:not(.hidden))) {
    min-height: 720px !important;
    grid-template-rows: minmax(min-content, 1fr) auto auto !important;
  }
}
@media (max-width: 760px) and (min-height: 820px) {
  html body:not(.keyboard-open) #authGate .auth-card:is(:has(#authWelcome:not([hidden])), :has(#authForm:not(.hidden))) {
    min-height: 800px !important;
    grid-template-rows: minmax(112px, min-content) minmax(min-content, 1fr) auto auto !important;
  }
}