/* Fleet 1231: phone sign-in layout.
   fleet-app.css lays .auth out as a two-column grid (1.05fr .95fr) with no
   phone variant (the old fix in fleet-login-premium.css is not loaded), so on
   an iPhone the brand panel fills the screen and the sign-in card sits
   off-screen to the right. Phones get a single column with the card fully
   visible. Scoped to <=720px so desktop and tablet are unchanged. */
@media (max-width:720px){
  html body .auth{
    display:flex!important;flex-direction:column!important;
    grid-template-columns:none!important;
    min-height:100vh!important;min-height:100dvh!important;
    width:100%!important;max-width:100vw!important;overflow-x:hidden!important;
  }
  html body .auth>.auth-left{
    flex:0 0 auto!important;min-height:0!important;align-items:flex-start!important;
    padding:max(28px,calc(env(safe-area-inset-top,0px) + 18px)) max(22px,env(safe-area-inset-right,0px)) 8px max(22px,env(safe-area-inset-left,0px))!important;
  }
  html body .auth>.auth-left .auth-mark{width:min(240px,64vw)!important;height:42px!important;margin-bottom:6px!important}
  html body .auth>.auth-left h1{font-size:30px!important;line-height:1.02!important;margin:10px 0 6px!important}
  html body .auth>.auth-left p{font-size:14px!important;line-height:1.4!important;margin:0!important}
  html body .auth>.auth-right{
    flex:1 0 auto!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;
    width:100%!important;min-width:0!important;
    padding:16px max(16px,env(safe-area-inset-right,0px)) max(24px,calc(env(safe-area-inset-bottom,0px) + 16px)) max(16px,env(safe-area-inset-left,0px))!important;
  }
  html body .auth .auth-card{
    width:100%!important;max-width:440px!important;min-width:0!important;margin:0 auto!important;
    padding:24px 20px!important;border-radius:18px!important;
  }
  html body .auth .auth-card .brand{width:min(220px,60vw)!important;height:38px!important;margin-bottom:14px!important}
  html body .auth .auth-card h2{font-size:24px!important;margin:6px 0 4px!important}
  /* 16px or larger stops iOS Safari from zooming into focused inputs. */
  html body .auth input,html body .auth select,html body .auth textarea{font-size:16px!important}
  html body .auth .field input{min-height:46px!important}
  html body .auth .btn{min-height:46px!important}
  html body .auth #login-eye{min-width:56px!important}
}