/* Brand, public site QR and device/account controls form one header. */
#appHeader{background:#278577;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 208px 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:#eefff8}
#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;align-self:start;gap:9px;padding-top:0;text-align:center;color:#fff;text-decoration:none;border-radius:12px;min-width:0}
.site-qr img{display:block;width:190px;height:190px;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 #93fdd1;outline-offset:6px}
.site-qr .connection-signal{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px;font-size:24px;font-weight:800;line-height:1.2;max-width:none;text-decoration:none}
.site-qr #connectionSignalLabel{font-size:clamp(21px,2.2vw,26px);font-weight:800;line-height:1.2;text-align:center;max-width:240px;border:1px solid #fff;border-radius:5px;padding:2px 8px}
.connection-signal i{display:block;width:70px;height:70px;flex:0 0 70px;border:4px solid #fff;border-radius:50%;background:#9cafa7;box-shadow:0 0 0 3px #ffffff55}
.connection-signal[data-state="online"] i{background:#4ade80;box-shadow:0 0 0 3px #ffffff55,0 0 28px 10px #4ade8090}
.connection-signal[data-state="slow"] i{background:#fbbf24;box-shadow:0 0 0 3px #ffffff55,0 0 28px 10px #fbbf2490}
.connection-signal[data-state="offline"] i{background:#f87171;box-shadow:0 0 0 3px #ffffff55,0 0 28px 10px #f8717190}
.connection-signal[data-state="checking"] i{background:#cbe1d8;animation:connection-pulse 1.3s ease-in-out infinite alternate}
@keyframes connection-pulse{to{opacity:.45;box-shadow:0 0 8px 2px #fff8}}
.header-account{border-top:1px solid #ffffff30;margin-top:14px;padding-top:12px}
.header-account>small{font-size:16.5px;color:#eefff8;margin:0 0 3px}
#appHeader #sessionLabel{display:block;margin:0;text-align:left;font-size:30px;font-weight:750;line-height:1.25;overflow-wrap:anywhere;color:#fff}
.header-account-actions{display:flex;gap:4px;flex-wrap:nowrap;margin-top:18px;align-items:center;width:100%;max-width:100%}
.header-account-actions button,.header-account-actions .header-account-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;border:1px solid #a8dcc6;border-radius:8px;background:#f2fffa;color:#247956;font-size:16px;font-weight:900;line-height:1.1;text-align:center;text-decoration:none;box-shadow:0 2px 0 #82b9a2;transition:transform .08s ease,box-shadow .08s ease,background .15s ease,border-color .15s ease}
.header-account-actions button:hover,.header-account-actions .header-account-link:hover{background:#dffff2;border-color:#d5ffee}
.header-account-actions button:active,.header-account-actions .header-account-link:active{transform:translateY(2px);box-shadow:0 0 0 #82b9a2}
.header-account-actions button:focus-visible,.header-account-actions .header-account-link:focus-visible{outline:3px solid #93fdd1;outline-offset:3px}
.header-account-actions .header-account-link{flex:0 1 auto;min-width:0;min-height:30px;padding:4px 3px;font-size:9px;font-weight:800;line-height:1;white-space:nowrap}
@media(max-width:1100px){
 #appHeader{grid-template-columns:208px 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:#278577;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;font-size:clamp(17px,2.4vw,27px);line-height:1.05;font-weight:900;letter-spacing:-.04em;text-align:center;white-space:nowrap;color:#d83651;text-shadow:-1px -1px 0 #fff,1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff}
@media(max-width:360px){.auth-gate .brand-wordmark{font-size:15px}}

.site-preferences{display:flex;align-items:end;gap:10px;margin-top:12px;background:#d9eee6;color:#174b3d;border:1px solid #89bdab;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:#f1faf5;border-color:#83b7a3;color:#174b3d}
.site-preferences select:disabled{opacity:1;color:#174b3d}
.site-preferences button{min-height:44px;font-size:12px}

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

/* The user name is a text-only profile button on the blue header. */
#appHeader button#sessionLabel{appearance:none;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;min-height:0;width:fit-content;max-width:100%;color:#fff;cursor:pointer}
#appHeader button#sessionLabel:hover,#appHeader button#sessionLabel:active{background:transparent;color:#fff;box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:5px}
#appHeader button#sessionLabel:focus-visible{outline:2px solid #fff;outline-offset:5px}

/* Restore the large outlined brand title and give the emblem subtle depth. */
#appHeader>a.brand,html[data-device=mobile] #appHeader>a.brand{grid-template-columns:23.5% 74%;gap:2.5%}
#appHeader .brand-copy b{display:block;line-height:1}
#appHeader .brand-copy [data-app-brand].brand-wordmark{display:block;width:100%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(32px,15.1cqw,110px);font-weight:800;letter-spacing:-.055em;line-height:1;white-space:nowrap;color:#7cf5c3;-webkit-text-stroke:1.6px #fff;paint-order:stroke fill;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 2px 0 #47bf8d,0 4px 6px rgba(5,37,24,.3)}
#appHeader .brand-copy small{margin-top:clamp(4px,1.8cqw,12px)}
.auth-gate .brand{container-type:inline-size}
.auth-gate .brand-wordmark{display:block;flex:1 1 0;min-width:0;width:auto;font-family:Arial,Helvetica,sans-serif;font-size:clamp(25px,15.1cqw,52px);font-weight:800;letter-spacing:-.055em;line-height:1;white-space:nowrap;text-align:left;color:#7cf5c3;-webkit-text-stroke:1.5px #fff;paint-order:stroke fill;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 2px 0 #47bf8d,0 4px 6px rgba(5,37,24,.3)}


/* 3D Store Parts wordmark, supplied badge, raised QR and live connection lamp. */
#appHeader>a.brand,html[data-device=mobile] #appHeader>a.brand{grid-template-columns:23.5% 74%;gap:2.5%}
#appHeader .brand-copy b{display:block;line-height:1}
#appHeader .brand-copy [data-app-brand].brand-wordmark,.auth-gate .brand-wordmark{font-family:"Arial Rounded MT Bold","Arial Black",Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.045em;white-space:nowrap;color:#88ffcd;background-image:linear-gradient(180deg,#f3fffa 0%,#c5ffe7 11%,#78ffc7 32%,#acffdc 48%,#5deaaf 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.045em #fff;paint-order:stroke fill;text-shadow:0 .025em 0 #fff,0 .05em 0 #9cffd6,0 .09em 0 #6be8b4,0 .135em 0 #39ba84,0 .18em .09em rgba(7,65,41,.55)}
#appHeader .brand-copy{min-width:0}
#appHeader .brand-copy b{min-width:0;max-width:100%}
#appHeader .brand-copy [data-app-brand].brand-wordmark{display:block;width:100%;max-width:100%;font-size:clamp(28px,9.3cqw,110px);line-height:1}
#appHeader .brand-copy small{margin-top:clamp(4px,1.8cqw,12px)}
.auth-gate .brand{container-type:inline-size}
.auth-gate .brand-wordmark{display:block;flex:1 1 0;min-width:0;width:auto;max-width:100%;font-size:clamp(20px,8.8cqw,52px);line-height:1;text-align:left}
#appHeader{grid-template-columns:minmax(0,1fr) 208px minmax(300px,370px)}
#appHeader>.site-qr{align-self:start;justify-self:center;margin-top:-6px;padding-top:0}
.site-qr>img{width:190px;height:190px;object-fit:contain}
.site-qr .connection-signal{margin-top:6px;gap:7px}
.site-qr #connectionSignalLabel{font-size:clamp(20px,2vw,25px);font-weight:900;line-height:1.1;text-align:center;max-width:240px;min-width:88px;border:2px solid #fff;border-radius:7px;padding:4px 13px;background:linear-gradient(180deg,#52ce9a 0%,#269d6b 55%,#188055 100%);box-shadow:0 2px 0 #d4ffed,0 5px 0 #77dab1,0 8px 10px rgba(4,48,30,.42);text-shadow:0 1px 0 #177850}
.site-qr .connection-signal-speed{display:block;min-height:1em;color:#fff;font-size:13px;font-weight:700;line-height:1.1;text-shadow:0 1px 2px rgba(5,55,34,.6)}
.connection-signal{--lamp-top:#e5fff0;--lamp-mid:#58e789;--lamp-bottom:#07863f;--lamp-glow:#4ade8080}
.connection-signal i{position:relative;isolation:isolate;display:block;width:96px;height:96px;flex:0 0 96px;overflow:hidden;font-style:normal;border:5px solid #fff;border-radius:50%;background:radial-gradient(circle at 32% 23%,var(--lamp-top) 0%,var(--lamp-mid) 40%,#20c86b 66%,var(--lamp-bottom) 100%);box-shadow:inset 0 3px 7px #fff9,inset 0 -12px 16px #003d2780,0 3px 0 #d9fff0,0 6px 0 #1e7853,0 10px 12px #07452b88,0 0 30px 9px var(--lamp-glow)}
.connection-signal i::before{content:"";position:absolute;z-index:1;top:9%;left:15%;width:62%;height:27%;border-radius:50%;transform:rotate(-24deg);background:linear-gradient(180deg,#fff 0%,#ffffffb8 45%,#ffffff12 100%);filter:blur(.5px)}
.connection-signal i::after{content:"";position:absolute;inset:8px;border:1px solid #ffffff75;border-radius:50%;box-shadow:inset 0 1px 2px #fff8}
.connection-signal[data-state="online"]{--lamp-top:#e4fff0;--lamp-mid:#69f29a;--lamp-bottom:#087d3e;--lamp-glow:#4ade8088}
.connection-signal[data-state="slow"]{--lamp-top:#fff7d6;--lamp-mid:#ffd166;--lamp-bottom:#bb6500;--lamp-glow:#ffb02088}
.connection-signal[data-state="offline"]{--lamp-top:#ffe4e4;--lamp-mid:#fb7777;--lamp-bottom:#a41237;--lamp-glow:#f8717188}
.connection-signal[data-state="checking"]{--lamp-top:#fff;--lamp-mid:#dcfff0;--lamp-bottom:#75b49a;--lamp-glow:#a9ffdb70}
.connection-signal[data-state="checking"] i{animation:connection-pulse 1.3s ease-in-out infinite alternate}
@media(max-width:1100px){#appHeader{grid-template-columns:208px minmax(0,1fr)}#appHeader>.brand{grid-column:1/-1}}
@media(max-width:560px){#appHeader{grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:20px}.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>.site-qr{justify-self:center}
/* Follow the green badge outer frame rather than clipping its border. */
.brand-logo{clip-path:inset(1.6% 1% 1.8% round 19%);object-fit:contain;background:transparent;border-radius:0}

/* Use the supplied Store Parts artwork as the wordmark, keeping the separate badge untouched. */
#appHeader .brand-copy img.brand-wordmark,.auth-gate img.brand-wordmark{display:block;max-width:100%;height:auto;object-fit:contain;object-position:center}
#appHeader .brand-copy img.brand-wordmark{width:100%}
.auth-gate img.brand-wordmark{width:auto;min-width:0;flex:1 1 0}

/* Matching sea-green preference controls, including keyboard and hover states. */
.display-preferences select:focus-visible,.site-preferences select:focus-visible,.site-preferences button:focus-visible{outline:3px solid #65b7a3;outline-offset:2px}
.site-preferences button{background:#eaf7ef;border-color:#83b7a3;color:#174b3d}
.site-preferences button:hover{background:#c5e6d7;border-color:#599b83}

/* Mobile sessions stay in their signed-in site; remove the site switch bar. */
html[data-device=mobile] #sitePreferences{display:none!important}