/* Approved tablet and phone login. All rules are scoped below desktop width. */
@media (max-width: 1100px) {
  .login-page .password-toggle {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b9d0ec;
    cursor: pointer;
  }

  .login-page .password-toggle:focus-visible,
  .login-page .registration-legal a:focus-visible,
  .login-page .form-link:focus-visible,
  .login-page .footer-link:focus-visible {
    outline: 2px solid #54b9ff;
    outline-offset: 3px;
  }
}

@media (max-width: 1100px) {
  .login-page .login-title-context { display: none; }
  .login-page {
    background:
      linear-gradient(180deg, rgba(7, 19, 38, .70), rgba(7, 19, 38, .35)),
      url('workspace-mountains.png') left bottom / cover fixed no-repeat;
  }

  .login-page .auth-wave { display: none; }
  .login-page .card-footer { gap: 4px; margin-top: 30px; }
  .login-page .form-link { position: relative; }
  .login-page .form-link::before { content: ''; position: absolute; inset: -12px -6px; }
  .login-page .registration-legal {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }
  .login-page .registration-legal a { color: #8ac9ff; text-decoration: underline; text-underline-offset: 2px; padding-block: 12.5px; white-space: nowrap; }
  .login-page .footer-link { padding-block: 12.5px; margin-block: -12.5px; }
  .login-page .password-toggle { right: 4px; width: 40px; height: 40px; }
  .login-page .password-toggle svg { width: 20px; height: 20px; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .login-page .auth-shell {
    padding-top: min(clamp(44px, calc(43vw - 214px), 116px), clamp(24px, calc(30svh - 186px), 116px));
    padding-bottom: clamp(20px, calc(10svh - 50px), 46px);
  }
  .login-page .hero { font-size: 44px; line-height: 1.16; }
  .login-page .auth-card { width: min(100%, 448px); padding: 28px 30px; }
  .login-page .auth-card h1 { margin-bottom: 22px; font-size: 28px; }
  .login-page .primary-button { min-height: 46px; font-size: 16px; }
  .login-page .form-link { font-size: 13px; }
}

@media (min-width: 601px) and (max-width: 767px) {
  .login-page .brand img { width: clamp(54px, calc(10.8vw - 11px), 72px); height: clamp(54px, calc(10.8vw - 11px), 72px); }
  .login-page .brand span { font-size: clamp(31px, calc(6.6vw - 8.7px), 42px); }
  .login-page .hero { font-size: clamp(32px, calc(7.2vw - 11.3px), 44px); }
  .login-page .auth-card { width: min(100%, clamp(320px, calc(76.6vw - 140px), 448px)); padding: clamp(22px, calc(3.6vw + .4px), 28px); }
  .login-page .auth-card h1 { margin-bottom: clamp(18px, calc(2.4vw + 3.6px), 22px); font-size: clamp(24px, calc(2.4vw + 9.6px), 28px); }
  .login-page .primary-button { min-height: clamp(44px, calc(1.2vw + 36.8px), 46px); font-size: clamp(15px, calc(.6vw + 11.4px), 16px); }
}

@media (min-width: 601px) and (max-width: 1100px) and (max-height: 1000px) {
  .login-page { background-position: 0 0, center bottom; }
}

@media (max-width: 600px) {
  .login-page .auth-shell { padding-top: clamp(36px, 5.2svh, 44px); }
  .login-page .auth-intro { width: min(100%, 304px); text-align: left; }
  .login-page .brand { margin-inline: auto; }
  .login-page .auth-card { width: min(100%, 304px); }
  .login-page .form-field label { font-size: 13px; }
  .login-page .input-wrap.has-icon input { padding-right: 44px; }
  .login-page .password-toggle { right: 2px; }
  .login-page .password-toggle svg { width: 18px; height: 18px; }
  .login-page .registration-legal { line-height: 1.45; }
  .login-page .card-footer { margin-top: 26px; }
}

@media (max-width: 600px) and (max-height: 740px) {
  .login-page { background-position: 0 0, center bottom; }
}