/* Responsive refinements shared by login, registration and recovery. */

html {
  min-width: 320px;
}

body {
  text-rendering: optimizeLegibility;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

.facade-form input,
.facade-form select,
.facade-form button,
.primary,
.oauth-button,
.text-button,
.close-link {
  min-height: 46px;
}

.facade-form input,
.facade-form select {
  font-size: 16px;
}

@media (max-width: 880px) {
  .page {
    min-height: 100svh;
  }

  .access {
    min-width: 0;
  }

  .card {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .page {
    width: 100%;
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
  }

  .intro {
    min-width: 0;
  }

  .hero-logo img {
    max-width: 100%;
  }

  .intro h1 {
    max-width: 350px;
    font-size: clamp(25px, 7.6vw, 34px);
    line-height: 1.08;
  }

  .card {
    border-radius: 20px;
  }

  .card-heading h2,
  .view-title h2 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.08;
  }

  .card-heading p,
  .view-title p,
  .recovery-copy,
  .legal {
    font-size: 14px;
    line-height: 1.5;
  }

  .facade-form label,
  .register-grid > label {
    font-size: 14px;
  }

  .facade-form input,
  .facade-form select,
  .password-field {
    min-height: 52px;
    border-radius: 10px;
  }

  .primary {
    min-height: 52px;
    font-size: 16px;
  }

  .oauth-actions {
    gap: 9px;
  }

  .oauth-button {
    min-height: 50px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .oauth-separator {
    margin: 19px 0 15px;
  }

  .show-password {
    width: 48px;
    height: 48px;
  }

  .login-options {
    align-items: flex-start;
    gap: 10px;
  }

  .remember,
  .inline-link,
  .text-link {
    font-size: 14px;
  }

  .remember input {
    min-height: 0;
  }

  .mobile-community {
    border-radius: 17px;
  }

  .mobile-community strong {
    font-size: 15px;
  }

  .mobile-community p {
    font-size: 13px;
    line-height: 1.45;
  }
}

@media (max-width: 390px) {
  .page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .card {
    padding-right: 18px;
    padding-left: 18px;
  }

  .login-options {
    display: grid;
    grid-template-columns: 1fr;
  }

  .register-grid {
    grid-template-columns: 1fr;
  }

  .register-grid .span-two {
    grid-column: 1;
  }
}

@media (max-height: 680px) and (max-width: 620px) {
  .intro {
    padding-top: 18px;
  }

  .hero-logo img {
    width: 108px;
    height: 108px;
  }

  .intro h1 {
    margin-top: 5px;
  }
}

/* Mobile auth is treated as an app surface, not a squeezed desktop card. */
@media (max-width: 620px) {
  .page {
    gap: 15px;
    padding:
      max(10px, env(safe-area-inset-top))
      12px
      max(22px, env(safe-area-inset-bottom));
  }

  .hero-logo {
    width: 142px;
    height: 92px;
    margin-bottom: 8px;
  }

  .hero-logo img {
    transform: translateY(-19px);
  }

  .intro h1 {
    max-width: 320px;
    font-size: 22px;
    line-height: 1.12;
  }

  .card,
  .form-card {
    padding: 24px 18px 22px;
    border-radius: 24px;
  }

  .card-heading {
    margin-bottom: 20px;
  }

  .card-heading h2,
  .view-title h2 {
    font-size: 25px;
    line-height: 1.12;
  }

  .facade-form {
    gap: 10px;
  }

  .facade-form label,
  .register-grid > label {
    gap: 6px;
    font-size: 13px;
  }

  .facade-form input,
  .facade-form select,
  .password-field {
    min-height: 50px;
    border-radius: 12px;
  }

  .facade-form input,
  .facade-form select {
    padding-right: 14px;
    padding-left: 14px;
  }

  .facade-form select {
    padding-right: 46px;
    background-position: right 14px center;
  }

  .show-password {
    top: 1px;
    right: 2px;
    width: 48px;
    height: 48px;
  }

  .login-options {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 4px 0;
  }

  .login-options > .inline-link {
    justify-self: end;
    text-align: right;
  }

  .primary {
    min-height: 50px;
    border-radius: 12px;
  }

  .mobile-community {
    display: none;
  }

  body[data-view="register"],
  body[data-view="forgot"],
  body[data-view="verify"] {
    background: #f4f7f4;
  }

  body[data-view="register"]::before,
  body[data-view="forgot"]::before,
  body[data-view="verify"]::before {
    background: #f4f7f4;
    filter: none;
  }

  body[data-view="register"]::after,
  body[data-view="forgot"]::after,
  body[data-view="verify"]::after {
    background: none;
  }

  body[data-view="register"] .page,
  body[data-view="forgot"] .page,
  body[data-view="verify"] .page {
    display: block;
    min-height: 100dvh;
    padding: 0;
  }

  body[data-view="register"] .intro,
  body[data-view="forgot"] .intro,
  body[data-view="verify"] .intro {
    display: none;
  }

  body[data-view="register"] .auth-view,
  body[data-view="forgot"] .auth-view,
  body[data-view="verify"] .auth-view {
    min-height: 100dvh;
  }

  body[data-view="register"] .card,
  body[data-view="forgot"] .card,
  body[data-view="verify"] .card {
    min-height: 100dvh;
    padding:
      max(18px, env(safe-area-inset-top))
      16px
      max(28px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-view="register"] .view-title,
  body[data-view="forgot"] .view-title {
    position: sticky;
    z-index: 4;
    top: 0;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin: -18px -16px 17px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom-color: #dfe5e0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
  }

  body[data-view="register"] .view-title h2,
  body[data-view="forgot"] .view-title h2 {
    font-size: 23px;
  }

  .close-link {
    width: 44px;
    height: 44px;
  }

  .register-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .register-section {
    grid-column: 1;
    margin: 7px 0 1px;
    font-size: 10px;
  }

  .register-grid .span-two,
  .span-two {
    grid-column: 1;
  }

  .legal {
    margin-top: 5px;
    font-size: 12px;
  }

  body[data-view="register"] .oauth-actions-register,
  body[data-view="register"] .oauth-separator-register,
  body[data-view="register"] .oauth-status {
    flex: 0 0 auto;
  }
}

@media (max-width: 350px) {
  .login-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .login-options > .inline-link {
    justify-self: start;
    text-align: left;
  }
}