/* AP OneFlow 08.2.60 - Mobile Login Cleanup
   Scope: mobile login only. Desktop login is intentionally untouched. */
@media (max-width:860px){
  html{
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
    background:#f7f8fb!important;
  }
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{margin:0!important;background:#f7f8fb!important}

  .auth-page{
    display:flex!important;
    flex-direction:column!important;
    min-height:100svh!important;
    height:auto!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:linear-gradient(160deg,#d90c32 0%,#f32349 58%,#ff7188 100%)!important;
  }

  /* Brand area: simple and clean, no large desktop hero content. */
  .auth-page .brand-panel{
    position:relative!important;
    flex:0 0 168px!important;
    min-height:168px!important;
    height:168px!important;
    width:100%!important;
    padding:calc(18px + env(safe-area-inset-top)) 22px 18px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 86% 24%,rgba(255,255,255,.16),transparent 28%),
      linear-gradient(160deg,#d90c32 0%,#f32349 58%,#ff7188 100%)!important;
    box-sizing:border-box!important;
  }
  .auth-page .brand-panel::before,
  .auth-page .brand-panel::after{content:none!important;display:none!important}
  .auth-page .brand-panel .ap256-auth-brand-copy,
  .auth-page .brand-panel .campus{display:none!important}

  .ap260-mobile-wordmark{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
    color:#fff!important;
    line-height:1!important;
    margin-top:10px!important;
    position:relative!important;
    z-index:3!important;
  }
  .ap260-mobile-wordmark>span{
    display:block!important;
    font-size:38px!important;
    font-weight:500!important;
    letter-spacing:.025em!important;
    color:#fff!important;
  }
  .ap260-mobile-wordmark>small{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    margin-top:4px!important;
    font-size:20px!important;
    font-weight:400!important;
    letter-spacing:.01em!important;
    color:rgba(255,255,255,.84)!important;
  }
  .ap260-mobile-wordmark>small b{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:27px!important;
    height:27px!important;
    padding:0 4px!important;
    border-radius:6px!important;
    background:#fff!important;
    color:#e71f40!important;
    font-size:13px!important;
    font-weight:850!important;
    box-sizing:border-box!important;
  }

  /* White login surface below the brand area. No overlap and no stacked hero. */
  .auth-page .form-panel{
    position:relative!important;
    flex:1 0 auto!important;
    width:100%!important;
    min-height:calc(100svh - 168px)!important;
    margin:0!important;
    padding:0 16px calc(22px + env(safe-area-inset-bottom))!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    background:#fff!important;
    border-radius:28px 28px 0 0!important;
    box-shadow:0 -12px 34px rgba(73,15,32,.10)!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .auth-page .form-panel::before,
  .auth-page .form-panel::after{content:none!important;display:none!important}

  .auth-page .auth-card{
    width:100%!important;
    max-width:480px!important;
    margin:0 auto!important;
    padding:22px 4px 8px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  .auth-page .auth-card .shield{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:12px!important;
    margin:0 0 12px!important;
    box-shadow:0 8px 20px rgba(229,27,60,.11)!important;
  }
  .auth-page .auth-card h2{
    margin:0 0 4px!important;
    font-size:28px!important;
    line-height:1.12!important;
    letter-spacing:-.035em!important;
    text-align:left!important;
  }
  .auth-page .auth-card .intro{
    margin:0 0 18px!important;
    font-size:14px!important;
    line-height:1.4!important;
    text-align:left!important;
  }
  .auth-page .auth-card form{gap:11px!important}
  .auth-page .auth-card label{
    font-size:13px!important;
    line-height:1.25!important;
  }

  /* iOS Safari: 16px prevents focus auto-zoom. */
  .auth-page .auth-card input,
  .auth-page .auth-card textarea,
  .auth-page .auth-card select{
    font-size:16px!important;
  }
  .auth-page .auth-card .input-shell,
  .auth-page .auth-card input:not([type=checkbox]){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:52px!important;
    min-height:52px!important;
    margin-top:5px!important;
    border-radius:15px!important;
    box-sizing:border-box!important;
  }
  .auth-page .auth-card .input-shell input{
    height:50px!important;
    min-height:50px!important;
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .auth-page .auth-card .input-shell svg{width:20px!important;height:20px!important}
  .auth-page .password-wrap #togglePassword{min-width:44px!important;min-height:44px!important}

  .auth-page .form-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:2px 0 8px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }
  .auth-page .remember{display:flex!important;align-items:center!important;min-width:0!important}
  .auth-page .remember input{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    margin:0 8px 0 0!important;
  }
  .auth-page .form-row .link{font-size:13px!important;padding:8px 0!important;white-space:nowrap!important}
  .auth-page .auth-card .primary{
    width:100%!important;
    height:52px!important;
    min-height:52px!important;
    margin-top:0!important;
    border-radius:16px!important;
    font-size:16px!important;
  }
  .auth-page .message{min-height:0!important;margin:4px 0 0!important;font-size:12px!important}
  .auth-page .support{
    margin-top:14px!important;
    padding-top:12px!important;
    font-size:12px!important;
    line-height:1.4!important;
  }
  .auth-page>footer{display:none!important}
}

@media (max-width:430px){
  .auth-page .brand-panel{
    flex-basis:150px!important;
    min-height:150px!important;
    height:150px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .ap260-mobile-wordmark{margin-top:6px!important}
  .ap260-mobile-wordmark>span{font-size:34px!important}
  .ap260-mobile-wordmark>small{font-size:18px!important}
  .auth-page .form-panel{
    min-height:calc(100svh - 150px)!important;
    padding-left:14px!important;
    padding-right:14px!important;
    border-radius:24px 24px 0 0!important;
  }
  .auth-page .auth-card{padding-top:18px!important}
  .auth-page .auth-card h2{font-size:26px!important}
  .auth-page .auth-card .intro{margin-bottom:15px!important}
  .auth-page .auth-card .input-shell,
  .auth-page .auth-card input:not([type=checkbox]){height:50px!important;min-height:50px!important}
  .auth-page .auth-card .primary{height:50px!important;min-height:50px!important}
}

/* When the keyboard reduces viewport height, keep form compact instead of scaling/overlapping. */
@media (max-width:860px) and (max-height:650px){
  .auth-page .brand-panel{flex-basis:112px!important;min-height:112px!important;height:112px!important;padding-top:8px!important}
  .ap260-mobile-wordmark{margin-top:2px!important}
  .ap260-mobile-wordmark>span{font-size:30px!important}
  .ap260-mobile-wordmark>small{font-size:16px!important}
  .auth-page .form-panel{min-height:calc(100svh - 112px)!important;border-radius:20px 20px 0 0!important}
  .auth-page .auth-card{padding-top:14px!important}
  .auth-page .auth-card .shield{display:none!important}
  .auth-page .auth-card h2{font-size:24px!important}
  .auth-page .auth-card .intro{margin-bottom:10px!important}
  .auth-page .auth-card form{gap:7px!important}
  .auth-page .support{display:none!important}
}