/* Drop-in patch for auth screens, cookie banners and modal/card overflow on 390px devices. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.auth-container,
#authScreen > .surface,
.login-card,
.modal-card,
.notice-card,
.community-sheet,
.cookie-banner,
.consent-card,
.mobile-placeholder-card,
.card,
.surface {
  max-width: calc(100vw - 28px);
  min-width: 0;
}

#authScreen,
.login-gate,
.modal,
.modal-backdrop {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

input,
select,
textarea,
button,
.field,
.tn-field {
  max-width: 100%;
  min-width: 0;
}

.cta-group,
.auth-actions,
.community-actions,
.consent-actions,
.mobile-placeholder-actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-banner,
.consent-banner {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
}

.consent-card,
.cookie-card {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
  width: min(100%, 760px);
}

@media (min-width: 768px) {
  .auth-container,
  #authScreen > .surface,
  .login-card {
    width: min(100%, 28rem);
    max-width: 28rem;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .auth-container,
  #authScreen > .surface,
  .login-card {
    width: min(100%, 480px);
    margin-inline: auto;
    border-radius: 24px;
  }

  .cta-group,
  .auth-actions,
  .community-actions,
  .consent-actions,
  .mobile-placeholder-actions,
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .cta-group > *,
  .auth-actions > *,
  .community-actions > *,
  .consent-actions > *,
  .mobile-placeholder-actions > *,
  .hero-actions > * {
    width: 100%;
  }

  .consent-card,
  .cookie-card {
    grid-template-columns: 1fr;
    border-radius: 22px;
    padding: 14px 16px;
  }

  .modal-card,
  .notice-card,
  .community-sheet {
    width: min(100%, calc(100vw - 12px)) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 22px !important;
    overflow: auto;
  }

  .app-switch,
  .filter-row,
  .filters-row {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}