/* Normal document flow: the Header retains its existing sticky top:0. */
.gc-announcement{background:linear-gradient(100deg,var(--gc-accent),var(--gc-accent-light) 60%,color-mix(in srgb,var(--gc-accent-light) 86%,var(--gc-surface)));color:var(--gc-on-accent)}
.gc-announcement[hidden]{display:none}
.gc-announcement .gc-announcement__inner{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;column-gap:8px;align-items:center;min-height:44px;padding-block:8px}
.gc-site .gc-announcement__link{grid-column:2;display:block;min-width:0;padding:2px 0;color:var(--gc-on-accent);font:600 14px/1.45 var(--gc-body);text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.gc-site .gc-announcement__link:hover{color:var(--gc-on-accent);text-decoration-thickness:2px}
.gc-site .gc-announcement__link:active{text-decoration-style:double}
.gc-announcement .gc-announcement__close{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:12px;border:0;border-radius:var(--gc-radius);background:transparent;color:var(--gc-on-accent);cursor:pointer}
.gc-announcement-ready .gc-announcement .gc-announcement__close{display:inline-flex;align-items:center;justify-content:center}
.gc-announcement .gc-announcement__close:hover{background:color-mix(in srgb,var(--gc-on-accent) 10%,transparent)}
.gc-announcement .gc-announcement__close:active{background:color-mix(in srgb,var(--gc-on-accent) 18%,transparent)}
.gc-announcement .gc-announcement__close>.gc-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.gc-site .gc-announcement :is(a,button):focus-visible{outline:2px solid var(--gc-on-accent);outline-offset:-2px}
@media(max-width:767px){.gc-announcement .gc-announcement__inner{padding-block:10px;column-gap:4px}.gc-site .gc-announcement__link{font-size:13px}}
/* The old mobile account panel used fixed top:80px. Anchor it to the unchanged
   sticky Header, so an in-flow announcement cannot make the panel cover it. */
@media(max-width:1023px){
 .gc-announcement~.gc-header .gc-account{position:static}
 .gc-announcement~.gc-header .gc-account-panel{position:absolute;top:calc(100% + 8px);max-height:var(--gc-announcement-account-room,calc(100dvh - 104px))}
}
@media(min-width:1024px){.gc-announcement~.gc-header .gc-account-panel{top:calc(100% + var(--gc-announcement-account-gap,12px));max-height:var(--gc-announcement-account-room,calc(100dvh - 104px))}}