/* Entry composition follows the viewport; longer account forms keep normal flow. */
html:has(.auth-mode #login-form){scrollbar-gutter:auto}
.auth-mode .auth-workspace>.footer{position:relative;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;flex:0 0 34px;min-height:34px;margin:12px auto 0;z-index:4}
.auth-mode .auth-workspace>.footer>.private-access{position:absolute;left:0;bottom:0;z-index:2}
.auth-mode .auth-workspace>.footer>.powered-brand{flex:none;margin-left:auto}
@media(min-width:761px){
 .auth-mode:has(#login-form){display:grid;grid-template-columns:1fr;grid-template-rows:80px minmax(0,1fr);height:100dvh;min-height:640px;padding-top:0}
 .auth-mode:has(#login-form) .topbar{position:relative;top:auto;left:auto;right:auto}
 .auth-mode:has(#login-form) .auth-workspace{min-height:0;padding:0 48px 20px;justify-content:flex-start}
 .auth-mode:has(#login-form) .auth-layout{flex:1;min-height:0;margin:0 auto;padding:12px 20px 20px;align-items:center;gap:clamp(30px,5vw,80px)}
 .auth-mode:has(#login-form) .auth-layout>.auth-visual{min-height:0;padding:0 10px;gap:clamp(14px,2dvh,22px)}
 .auth-mode:has(#login-form) .auth-visual>h2{font-size:clamp(42px,min(4.7vw,6.7dvh),72px);line-height:1.08;letter-spacing:-.045em}
 .auth-mode:has(#login-form) .auth-visual>p{font-size:14px;line-height:1.6;max-width:460px}
 .auth-mode:has(#login-form) .agri-insight.agri-art{margin-top:0}
 .auth-mode:has(#login-form) .agri-insight.agri-art .agri-art-stage{height:clamp(140px,24dvh,270px);min-height:0;width:100%}
 .auth-mode:has(#login-form) .agri-insight.agri-art .agri-description{min-height:0;margin-top:12px;line-height:1.6}
 .auth-mode:has(#login-form) .auth-layout>.auth-card{padding:clamp(26px,3.8dvh,38px)}
 .auth-mode:has(#login-form) .auth-card>.card-head{margin-bottom:24px}
 .auth-mode:has(#login-form) .auth-card form.auth-form{gap:17px}
}
/* Email-enabled login adds two secondary actions. Recover their height from
   decoration and spacing on phones; keep every input and primary target 44px. */
@media(max-width:760px){
 .auth-mode:has(#login-form [data-action="auth-verify"]) .auth-workspace{padding-bottom:8px}
 .auth-mode:has(#login-form [data-action="auth-verify"]) .auth-layout{gap:10px}
 .auth-mode:has(#login-form [data-action="auth-verify"]) .auth-layout>.auth-visual{gap:8px}
 .auth-mode:has(#login-form [data-action="auth-verify"]) .agri-insight.agri-art .agri-art-stage{min-height:84px;height:clamp(84px,10dvh,105px)}
 .auth-mode:has(#login-form [data-action="auth-verify"]) .auth-layout>.auth-card{padding-top:16px;padding-bottom:16px}
 .auth-mode:has(#login-form [data-action="auth-verify"]) .auth-card>.card-head{margin-bottom:10px}
 .auth-mode:has(#login-form [data-action="auth-verify"]) .auth-card form.auth-form{gap:8px}
}
@media(min-width:761px) and (max-height:800px){
 .auth-mode:has(#login-form) .auth-layout{padding-top:4px;padding-bottom:8px}
 .auth-mode:has(#login-form) .auth-layout>.auth-visual{gap:15px}
 .auth-mode:has(#login-form) .auth-visual>h2{font-size:clamp(40px,6.5dvh,52px)}
 .auth-mode:has(#login-form) .agri-insight.agri-art .agri-art-stage{height:clamp(130px,22dvh,175px)}
 .auth-mode:has(#login-form) .auth-layout>.auth-card{padding:27px 30px}
 .auth-mode:has(#login-form) .auth-card>.card-head{margin-bottom:20px}
 .auth-mode:has(#login-form) .auth-card form.auth-form{gap:15px}
}
@media(min-width:761px) and (max-width:1100px){
 .auth-mode .auth-workspace>.footer>.private-access{max-width:calc(100% - 270px)}
 .auth-mode .auth-workspace>.footer .private-access-detail>span{max-width:100%}
 .auth-mode:has(#login-form) .auth-workspace{padding-right:28px;padding-left:28px}
 .auth-mode:has(#login-form) .auth-layout{padding-left:0;padding-right:0;gap:28px}
}
@media(max-width:760px){
 .auth-mode{padding-top:72px}
 .auth-mode .auth-workspace>.footer{min-height:62px;flex-basis:62px;margin-top:14px;justify-content:center;align-items:flex-end}
 .auth-mode .auth-workspace>.footer>.private-access{bottom:32px;max-width:100%}
 .auth-mode .auth-workspace>.footer>.powered-brand{margin:0 auto}
 .auth-mode .auth-workspace>.footer .private-access-detail>span{max-width:calc(100vw - 170px)}
 .auth-mode:has(#login-form) .auth-workspace{padding-top:8px;padding-bottom:14px}
 .auth-mode:has(#login-form) .auth-layout{gap:14px}
 .auth-mode:has(#login-form) .auth-layout>.auth-visual{padding-top:0;gap:10px}
 .auth-mode:has(#login-form) .auth-visual>h2{font-size:clamp(28px,7.6vw,37px);line-height:1.1;letter-spacing:-.045em}
 .auth-mode:has(#login-form) .auth-visual>p{font-size:12px;line-height:1.6}
 .auth-mode:has(#login-form) .agri-insight.agri-art .agri-art-stage{min-height:100px;height:clamp(100px,12dvh,135px);aspect-ratio:auto;width:100%}
 .auth-mode:has(#login-form) .agri-insight.agri-art .agri-description{margin-top:8px;line-height:1.5}
 .auth-mode:has(#login-form) .auth-layout>.auth-card{padding:18px 22px}
 .auth-mode:has(#login-form) .auth-card>.card-head{margin-bottom:12px}
 .auth-mode:has(#login-form) .auth-card>.card-head h2{font-size:23px;line-height:1.3}
 .auth-mode:has(#login-form) .auth-card form.auth-form{gap:10px}
 .auth-mode:has(#login-form) .auth-card .form-field{gap:6px}
 .auth-mode:has(#login-form) .auth-card .field{height:44px;min-height:44px;padding:10px 14px}
 .auth-mode:has(#login-form) .auth-card .password-field>.field{padding-right:52px}
 .auth-mode:has(#login-form) .auth-card .btn.primary,.auth-mode:has(#login-form) .auth-card .btn.secondary{min-height:44px;padding-top:10px;padding-bottom:10px}
}