/* Shared by the website and both native web views. Keep fields readable without
   triggering iOS input zoom, and let forms scroll inside the visible viewport. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.auth-modal {
  box-sizing: border-box;
  top: var(--auth-viewport-top, 0px);
  bottom: auto;
  height: var(--auth-viewport-height, 100dvh);
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  align-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
}

.auth-modal .news-popup {
  box-sizing: border-box;
  min-width: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 16px;
}

.auth-modal .news-popup:focus { outline: none; }
.auth-modal .field input { min-height: 48px; font-size: 16px; }
.auth-modal [data-auth-close] { min-width: 44px; min-height: 44px; margin: -10px -10px 0 0; }
.auth-modal .auth-tabs { flex-wrap: wrap; }
.auth-modal .auth-tab,
.auth-modal [data-auth-forgot],
.auth-modal [data-auth-back] { min-height: 44px; }

.login-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #776954;
  font: 26px/1 system-ui, sans-serif;
  cursor: pointer;
}
.login-close:focus-visible { outline: 2px solid #9a7b42; outline-offset: -5px; }
.login-card:not(.is-turned) > .login-close,
.login-card.is-profile > .login-close { visibility: hidden; }
.plan-tile > .login-close { visibility: visible !important; }
.login-card .login-kicker,
.login-card .login-title { padding-right: 32px; }
.plan-fold.is-stacked { justify-content: flex-start; }
.plan-fold.is-stacked > .plan-close { position: sticky; top: 8px; align-self: flex-end; margin: 8px 8px -52px; order: -2; flex-shrink: 0; }

html[data-theme="light"] .auth-modal [data-auth-close],
html[data-theme="light"] .auth-modal [data-auth-back],
html[data-theme="light"] .auth-modal [data-auth-message],
html[data-theme="light"] .auth-modal .field p,
html[data-theme="light"] .auth-modal [data-auth-pane="forgot"] > p {
  color: #6d6153 !important;
}

html[data-theme="light"] .auth-modal [data-auth-forgot] { color: #826229 !important; }
html[data-theme="light"] .auth-modal [data-auth-note][data-status="error"] { color: #a84039 !important; }
html[data-theme="light"] .auth-modal [data-auth-note][data-status="success"] { color: #287145 !important; }

@media (max-width: 860px), (pointer: coarse) {
  /* A 16px minimum prevents WebKit from zooming the whole app when typing. */
  .field input,
  .field select,
  .field textarea,
  .wall-search input,
  .login-face-back input,
  .login-face-front form input,
  .login-face-back .alt-form input,
  .plan-face form input {
    font-size: 16px;
    min-height: 44px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .login-face-back,
  .login-face-front form,
  .login-face-back .alt-form,
  .plan-face form {
    justify-content: flex-start;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block: 16px;
  }

  .login-title { font-size: 1.25rem; line-height: 1.2; margin-bottom: 8px; }
  .login-kicker { font-size: 0.68rem; }
  .login-label { font-size: 0.78rem; margin: 8px 0 5px; }
  .login-face-front form .login-label,
  .plan-face form .login-label { margin-top: 8px; }
  .login-face-back input,
  .login-face-front form input,
  .login-face-back .alt-form input,
  .plan-face form input { padding: 10px 14px; }
  .login-submit { min-height: 44px; flex-shrink: 0; font-size: 0.9rem; margin-top: 12px; }
  .login-quiet { min-height: 44px; font-size: 0.78rem; }
  .login-links { flex-wrap: wrap; gap: 4px 12px; }
  .login-note { font-size: 0.78rem; }

  .plan-offer,
  .plan-feature,
  .plan-sheet,
  .plan-cta,
  .plan-thanks {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .plan-select,
  .plan-subscribe,
  .plan-arrow { min-height: 44px; flex-shrink: 0; }
  .plan-points { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .auth-modal .news-popup { padding: 22px 20px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-modal,
  .auth-modal .news-popup { transition: none; }
}