/* Sign-in page (Account/Login.aspx) in the new app's auth layout: the rules the new app does not have.
   Builds on Content/modern/sis-modern.css (.auth, .auth-card, .field, .input-icon, .check) and Content/modern/account.css. */

html, body { margin: 0; }
.auth-main { position: relative; }

/* Language picker, top-right of the form column. */
.login-lang { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 6px; z-index: 2; }
.login-lang label { display: inline-flex; color: var(--text-3); margin: 0; cursor: pointer; }
.login-lang .select { height: 34px; width: auto; min-width: 0; padding: 0 30px 0 12px; font-size: 13px; font-weight: 550; border-radius: 999px; }

/* Remember me + forgot password on one line. */
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 24px; }
.login-options a { font-weight: 550; }

/* Validators render as <span>: keep them on their own line under the input. */
.auth-card .field-error { display: block; margin-top: 4px; }
.auth-card .alert { margin-bottom: 18px; }
.login-captcha:empty { display: none; }
.auth-card .btn .i { margin-left: 2px; }

@media (max-width: 960px) {
  /* 100vh on phones includes the area behind the browser toolbars, so centring the form in it pushed the
     bottom (the Sign in button) off screen. Use the visible height and start the form from the top. */
  .auth { min-height: 100vh; min-height: 100dvh; }
  .auth-main { align-content: start; padding: 64px 16px 32px; gap: 20px; }
  .login-lang { top: 16px; right: 16px; }
  .auth-card h1 { font-size: 24px; }
  .auth-card .sub { margin-bottom: 20px; }
  /* Under 16px iOS Safari zooms in on focus and leaves the page zoomed, half outside the screen. */
  .auth-card .input, .auth-card .select { font-size: 16px; }
}