/* Public homepage: brand on the left, a tidy login card on the right. */
.homepage .welcome.panel{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:48px;min-height:calc(100svh - 170px);margin:0 auto;border:0;overflow:visible}
.homepage .welcome-intro{padding:36px 20px;min-width:0}
.homepage .welcome-intro h1,.homepage .welcome-intro p{text-align:center;max-width:100%}
.homepage .welcome-body{width:100%;max-width:460px;justify-self:center;margin:0;padding:32px;min-width:0;background:#fff}
.homepage .login-card h2{text-align:center;font-size:28px;margin:0 0 24px;color:#202124}
.homepage .login-form{display:grid;gap:20px}
.homepage .login-form label{font-size:14px;font-weight:400;color:#55595f;text-align:left}
.homepage .login-form input{display:block;width:100%;height:44px;min-height:44px;margin-top:6px;border-radius:10px;font-size:16px;padding:10px 12px}
body.homepage .welcome-body button{justify-self:center!important;display:flex!important;margin-inline:auto!important}
/* Same archive switch on every signed-in page, between user and overdue count. */
body .app-header .header-archive-switch{display:block;flex:0 1 200px;min-width:88px;width:200px;margin:0}
body .app-header .header-archive-switch select{display:block;width:100%;min-width:0;height:44px;min-height:44px;margin:0;padding:8px 26px 8px 10px;border-radius:10px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:400;line-height:22px;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23616975' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;text-overflow:ellipsis}
body .header-controls .header-user{flex:0 1 auto}
@media(max-width:760px){
 .homepage .welcome.panel{grid-template-columns:minmax(0,1fr);gap:24px;min-height:0;margin:12px auto 28px}
 .homepage .welcome-intro{padding:24px 0 0}
 .homepage .welcome-body{margin:0;padding:24px;max-width:460px}
 .homepage .welcome-logo{width:290px}
 body .app-header .header-archive-switch{flex:0 1 120px;width:120px}
}
@media(max-width:480px){
 body:has(.header-archive-switch) .app-header{gap:6px;padding-inline:10px}
 body:has(.header-archive-switch) .app-header .brand-logo{width:60px}
 body:has(.header-archive-switch) .header-controls{gap:6px}
 body:has(.header-archive-switch) .header-user{flex:1 1 0;min-width:0}
 body .app-header .header-archive-switch{flex:0 1 100px;width:100px}
}