/* A service update sits above the complete workspace, including its header. */
.access-expiry-banner{display:grid;grid-template-columns:40px minmax(0,1fr) auto 40px;align-items:center;gap:16px;padding:16px 28px;background:color-mix(in srgb,#e9ac55 7%,var(--surface));border-bottom:1px solid color-mix(in srgb,#e9ac55 24%,var(--line));color:var(--text)}
.access-expiry-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,#e9ac55 14%,transparent);color:#c78025}
[data-theme=dark] .access-expiry-icon{color:#f2be77}
.access-expiry-icon svg{width:20px;height:20px}
.access-expiry-copy{min-width:0;line-height:1.5;overflow-wrap:anywhere}
.access-expiry-copy strong{display:inline;font-size:14px;font-weight:650}
.access-expiry-accounts{display:inline;margin-left:12px;font-size:12px;color:var(--muted)}
.access-expiry-copy p{margin:4px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
#app .access-expiry-renew{border-radius:999px;min-height:44px;padding:10px 18px;white-space:normal;text-align:center;background:var(--accent);border:1px solid transparent;color:var(--accent-ink,#fff);font-size:12px;line-height:1.4;font-weight:650}
#app .access-expiry-close{width:40px;min-width:40px;height:44px;border-radius:50%;color:var(--muted)}
.access-expiry-close:hover{background:var(--surface2);color:var(--text)}
@media(max-width:760px){.access-expiry-banner{grid-template-columns:32px minmax(0,1fr) 36px;align-items:start;gap:8px 10px;padding:12px 14px}.access-expiry-icon{width:32px;height:32px}.access-expiry-copy strong{font-size:13px}.access-expiry-accounts{display:block;margin:2px 0 0}.access-expiry-copy p{font-size:12px}.access-expiry-renew{grid-column:2;justify-self:start}.access-expiry-close{grid-column:3;grid-row:1}#app .access-expiry-close{width:36px;min-width:36px}.access-expiry-copy{grid-column:2}}
#app>.service-banner-shell{position:sticky;top:0;z-index:45;padding:env(safe-area-inset-top) 0 0;background:var(--surface);border-bottom:1px solid var(--line)}
#app>.service-banner-shell:empty{display:none;border:0;padding:0}
#app>.service-banner-shell .service-banner{display:grid;grid-template-columns:28px minmax(0,1fr) auto 40px;align-items:center;gap:12px;min-height:64px;margin:0;padding:8px 28px;border:0;border-radius:0;background:transparent;color:var(--text)}
#app>.service-banner-shell .service-banner:not(:has(.service-banner-link)){grid-template-columns:28px minmax(0,1fr) 40px}
#app>.service-banner-shell .service-banner-mark{display:flex;align-items:center;justify-content:center;width:28px;height:32px;background:transparent;color:var(--accent);border-radius:0}
.service-banner-mark img{display:block;width:24px;height:28px;object-fit:contain}
#app>.service-banner-shell .service-banner-copy{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;min-width:0}
#app>.service-banner-shell .service-banner-copy strong{font-size:13px;font-weight:600;line-height:1.6;overflow-wrap:anywhere}
#app>.service-banner-shell .service-banner-copy>span{font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
#app>.service-banner-shell .service-banner-link{min-height:44px;max-width:none;padding:8px 12px;border:0;border-radius:999px;background:transparent;color:var(--accent);font-size:12px;font-weight:600;line-height:1.5;text-align:center;white-space:normal;justify-content:center}
#app>.service-banner-shell .service-banner-link:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
#app>.service-banner-shell .service-banner-close{width:40px;min-width:40px;height:44px;margin:0;color:var(--muted);border-radius:999px}
#app>.service-banner-shell .service-banner-close:hover{color:var(--text);background:var(--surface2)}
#app>.shell{min-height:calc(100dvh - var(--service-banner-height,0px))}
@media(min-width:761px){
 #app>.shell>.sidebar{top:var(--service-banner-height,0px);height:calc(100dvh - var(--service-banner-height,0px))}
}
@media(max-width:760px){
 #app>.service-banner-shell .service-banner{grid-template-columns:24px minmax(0,1fr) auto 40px;gap:8px;min-height:60px;padding:8px 12px}
 #app>.service-banner-shell .service-banner:not(:has(.service-banner-link)){grid-template-columns:24px minmax(0,1fr) 40px}
 #app>.service-banner-shell .service-banner-mark{width:24px;height:28px}
 #app>.service-banner-shell .service-banner-copy{display:block}
 #app>.service-banner-shell .service-banner-copy strong{font-size:12px;line-height:1.5}
 #app>.service-banner-shell .service-banner-copy>span{display:none}
 #app>.service-banner-shell .service-banner-link{max-width:112px;font-size:11px;padding:8px}
}