/* Auth pages: keep the form at its design width; scale the whole block
   when the viewport is narrower than form + gutter. */

body:has(.auth-page) {
  padding-left: 0;
  padding-right: 0;
}

.auth-page {
  --auth-form-width: 400px;
  --auth-gutter: 24px;
  --auth-scale: min(1, calc((100vw - 2 * var(--auth-gutter)) / var(--auth-form-width)));
  box-sizing: border-box;
  width: var(--auth-form-width);
  max-width: var(--auth-form-width);
  flex: none;
  zoom: var(--auth-scale);
}

.auth-page--wide {
  --auth-form-width: 500px;
}

@supports not (zoom: 1) {
  .auth-page {
    transform: scale(var(--auth-scale));
    transform-origin: top center;
    margin-left: calc(var(--auth-form-width) * (var(--auth-scale) - 1) / 2);
    margin-right: calc(var(--auth-form-width) * (var(--auth-scale) - 1) / 2);
  }
}

.auth-page #login_form_div,
.auth-page #registration-div,
.auth-page .forgot-password-card,
.auth-page .confirmation-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.auth-page .forgot-password-container,
.auth-page .email-confirmation-container,
.auth-page .confirmation-container,
.auth-page .postregistration-container {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  flex: none;
}