/* Login-only responsive alignment polish.
   Keeps the approved auth visual design while reserving real space for
   the help row and footer on shorter/non-fullscreen desktop windows. */

@media (min-width:901px){
  body:has(#auth-form) .mt3-right{
    box-sizing:border-box;
    padding:clamp(64px,8vh,88px) 0 clamp(54px,7vh,72px);
  }

  body:has(#auth-form) .mt3-right-slot{
    height:100%;
    min-height:0;
    align-items:center;
    justify-content:center;
  }

  /* Align the utility row with the right edge of the login card. */
  body:has(#auth-form) .mt3-help{
    top:clamp(20px,3.5vh,34px);
    right:19.1%;
  }

  body:has(#auth-form) .mt3-right-footer{
    bottom:clamp(14px,2.7vh,28px);
  }
}

@media (min-width:901px) and (max-width:1180px){
  /* auth-final.css widens the login stack to 72% in this range. */
  body:has(#auth-form) .mt3-help{right:14%}
}

/* Short desktop windows are where the previous fixed vh sizing became cramped.
   Compact only the vertical rhythm; the approved widths and visual language stay intact. */
@media (min-width:901px) and (max-height:760px){
  body:has(#auth-form) .mt3-right{
    padding-top:52px;
    padding-bottom:48px;
  }

  body:has(#auth-form) .mt3-stack{
    transform:none!important;
  }

  body:has(#auth-form) .mt3-card{
    min-height:0;
    padding:28px 7.5% 24px;
    gap:11px;
    align-content:start;
  }

  body:has(#auth-form) .mt3-card-header{
    gap:6px;
    margin-bottom:2px;
  }

  body:has(#auth-form) .mt3-card-header h1{
    font-size:clamp(36px,2.5vw,48px);
  }

  body:has(#auth-form) .mt3-card-header p{
    line-height:1.42;
  }

  body:has(#auth-form) .mt3-form-grid{
    gap:10px!important;
  }

  body:has(#auth-form) .mt3-field{
    gap:5px;
  }

  body:has(#auth-form) .mt3-input-wrap input,
  body:has(#auth-form) .mt3-input-wrap select{
    height:48px;
  }

  body:has(#auth-form) .mt3-forgot{
    margin:-2px 0 1px;
  }

  body:has(#auth-form) .mt3-primary{
    height:52px;
  }

  body:has(#auth-form) .mt3-card-footer{
    margin-top:4px;
    padding-top:14px;
    gap:16px;
  }

  body:has(#auth-form) .mt3-secondary{
    height:44px;
  }

  body:has(#auth-form) .mt3-help{
    top:18px;
  }

  body:has(#auth-form) .mt3-right-footer{
    bottom:12px;
    width:min(88%,760px);
    gap:14px;
    font-size:10px;
  }

  body:has(#auth-form) .mt3-right-footer .links{
    gap:12px;
  }
}

/* Extremely short laptop/browser windows: keep every control visible without
   letting the card collide with utility/footer content. */
@media (min-width:901px) and (max-height:620px){
  body:has(#auth-form) .mt3-right{
    padding-top:42px;
    padding-bottom:38px;
  }

  body:has(#auth-form) .mt3-card{
    padding:20px 7% 18px;
    gap:8px;
  }

  body:has(#auth-form) .mt3-card-header{
    gap:4px;
    margin-bottom:0;
  }

  body:has(#auth-form) .mt3-card-header h1{
    font-size:34px;
  }

  body:has(#auth-form) .mt3-card-header p{
    font-size:11px;
  }

  body:has(#auth-form) .mt3-form-grid{
    gap:7px!important;
  }

  body:has(#auth-form) .mt3-input-wrap input,
  body:has(#auth-form) .mt3-input-wrap select{
    height:44px;
  }

  body:has(#auth-form) .mt3-primary{
    height:48px;
  }

  body:has(#auth-form) .mt3-card-footer{
    padding-top:10px;
    margin-top:2px;
  }

  body:has(#auth-form) .mt3-secondary{
    height:40px;
  }

  body:has(#auth-form) .mt3-help{
    top:12px;
  }

  body:has(#auth-form) .mt3-right-footer{
    bottom:8px;
    font-size:9px;
  }
}