/* Brand, public site QR and device/account controls form one header. */
#appHeader{background:#273aa7;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 156px minmax(300px,370px);column-gap:clamp(22px,3vw,48px);row-gap:24px}
#appHeader>a.brand,html[data-device=mobile] #appHeader>a.brand{width:100%;min-width:0;display:grid;grid-template-columns:26.3% 67.5%;gap:6.2%;container-type:inline-size}
#appHeader .brand-copy b{display:block;line-height:0}
#appHeader .brand-wordmark{display:block;width:100%;height:auto}
#appHeader a.brand .brand-logo{width:100%;height:auto;border:0;border-radius:0;object-fit:contain}
#appHeader .brand-copy small{color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:clamp(11px,3.55cqw,24px);font-weight:600;line-height:1.25;letter-spacing:.2px;margin-top:4.2cqw}
#appHeader .mode-help{color:#eef3ff}
#appHeader>.header-controls{width:100%;max-width:370px;justify-self:end}
#appHeader #displayPreferences{max-width:none}
.site-qr{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;color:#fff;text-decoration:none;border-radius:12px;min-width:0}
.site-qr img{display:block;width:148px;height:148px;max-width:100%;background:#fff;border:0;border-radius:8px}
.site-qr span{font-size:12px;font-weight:600;line-height:1.4;max-width:156px}
.site-qr:hover span{text-decoration:underline}
.site-qr:focus-visible{outline:3px solid #93c5fd;outline-offset:6px}
.header-account{border-top:1px solid #ffffff30;margin-top:14px;padding-top:12px}
.header-account>small{font-size:11px;color:#eef3ff;margin:0 0 3px}
#appHeader #sessionLabel{display:block;margin:0;text-align:left;font-size:18px;font-weight:750;line-height:1.4;overflow-wrap:anywhere;color:#fff}
.header-account-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.header-account-actions button{font-size:13px;min-height:40px;padding:9px 12px;background:#f2f7ff;border-color:#b9d0ef;color:#244879}
.header-account-actions button:hover{background:#dfedff;border-color:#d5e8ff}
.header-account-actions button:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
@media(max-width:1100px){
 #appHeader{grid-template-columns:156px minmax(0,1fr)}
 #appHeader>.brand{grid-column:1/-1}
 #appHeader>.header-controls{max-width:430px}
}
@media(max-width:560px){
 #appHeader{grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:20px}
 #appHeader>.header-controls{max-width:none}
 .site-qr{justify-self:center}
}
html[data-device=mobile] #appHeader{grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:20px}
html[data-device=mobile] #appHeader>.header-controls{max-width:none}
html[data-device=mobile] #appHeader>.site-qr{justify-self:center}

/* Reuse the supplied artwork on the sign-in screen as well. */
.auth-gate .brand{background:#273aa7;padding:12px;border-radius:14px;gap:18px}
.auth-gate .brand-logo{width:64px;height:auto;border:0;border-radius:0}
.auth-gate .brand-wordmark{display:block;min-width:0;width:calc(100% - 82px);height:auto}

.site-preferences{display:flex;align-items:end;gap:10px;margin-top:12px;background:#dfedff;color:#203fac;border:1px solid #aacbf4;border-radius:12px;padding:14px}
.site-preferences label{flex:1;min-width:0;font-size:14px;font-weight:800}
.site-preferences select{width:100%;min-height:44px;background:#f8fbff;color:#203fac}
.site-preferences select:disabled{opacity:1;color:#203fac}
.site-preferences button{min-height:44px;font-size:12px}

.site-preferences[hidden]{display:none}