/* Traders Compass V3 — login screen presentation only.
   No authentication, account, or dashboard rules have changed.
   Top navigation was baked into the original image, so the V3 asset has it cropped out. */
#loginView.stage {
  width: 100%;
  height: 100vh;
  height: 100svh;
  aspect-ratio: auto;
  min-height: 0;
  overflow: hidden;
  background-image: url('../images/traders-compass-login-noheader.webp');
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Keep each field aligned with the original artwork after removing its 58px top strip. */
#loginView .login {
  left: 64.16%;
  top: 43.48%;
  width: 28.42%;
  height: 27.05%;
}
#loginView .compass-orbit { top: 3.62%; }
/* Unnecessary scrolling is removed by fitting the composition to the viewport,
   not by hiding the page's content or disabling document scroll globally. */
@media (max-width: 800px) {
  #loginView.stage {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    background-color: #061525;
    background-size: auto min(58svh, 520px);
    background-position: 32% top;
    padding: clamp(160px, 28svh, 230px) 0 15px;
  }
  #loginView.stage::before {
    top: clamp(143px, 25svh, 205px);
    background: linear-gradient(to bottom, #061526de, #061526 44%);
  }
  #loginView .login {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    width: min(94%, 435px);
    margin: 0 auto;
    padding: 16px 19px;
    gap: 11px;
  }
  #loginView .login::before { font-size: 21px; }
  #loginView .login .field { height: 45px; font-size: 15px; }
  #loginView .meta { font-size: 13px; }
  #loginView .submit { height: 46px; font-size: 17px; }
  #loginView .error { font-size: 12px; }
}
@media (max-width: 400px) {
  #loginView .login { padding: 14px 15px; }
  #loginView .login::before { font-size: 19px; }
  #loginView .meta { font-size: 12px; }
}
@media (max-height: 560px) and (min-width: 801px) {
  #loginView.stage { min-height: 420px; }
}