/* UI-HDR header + drawer alignment v1 (guest studio /studio). Additive, layout only: no colour, text, handler or menu change.
   One gutter (--g), one centre line (header row), 8px grid. Gold fanfare / features untouched. */
.gs{--g:16px;--hd:64px;--hd-edge:calc(max(0px,(100% - 1328px)/2) + var(--g))}
@media (min-width:601px){.gs{--g:24px;--hd:72px}}
@media (min-width:861px){.gs{--g:32px}}

/* 1. header: left edge = content left edge, every item on the row's centre line */
html body .gs .gs-topbar{min-height:var(--hd)!important;height:var(--hd);padding-block:0!important;padding-inline:calc(max(0px,(100% - 1328px)/2) + var(--g))!important;gap:8px!important;align-items:center!important}
html body .gs .gs-content{padding-inline:var(--g)!important}
html body .gs .gs-topbrand{height:44px;align-items:center;margin:0}
html body .gs .gs-topbar :is(.gs-login,.gs-join-top){align-self:center}

/* 2. ≡ button: no white box/shadow; the glyph's left edge sits exactly on the gutter line (44px hit area unchanged) */
html body .gs .gs-menu{width:44px;height:44px;margin-left:0;padding:0;display:flex;align-items:center;justify-content:flex-start;border-radius:12px;background:transparent;box-shadow:none;color:var(--gs-ink)}
html body .gs .gs-menu:hover{background:rgba(20,36,58,.06)}
html body .gs .gs-menu:focus-visible,html body .gs .gs-nav-close:focus-visible{outline:2px solid var(--gs-accent);outline-offset:-2px}
html body .gs .gs-menu svg{flex:none;width:24px;height:24px;stroke-width:2;margin-left:var(--gs-glyph-l,-4px)}

/* 3. drawer + fixed sidebar: logo, group labels, nav icons and footer text share one start line (box edge + 16px) */
html body .gs .gs-sidebar .gs-brand{width:100%;min-height:72px;margin:0 0 16px;padding-inline:16px;box-sizing:border-box}
html body .gs .gs-sidebar .gs-nav-group{margin:16px 16px 8px}
html body .gs .gs-sidebar-foot>span,html body .gs .gs-sidebar-foot>p{display:block;padding-inline:16px}

/* 4. drawer close (X): same row and centre line as the logo, right edge on the gutter line, no bordered box */
html body .gs .gs-sidebar .gs-nav-close{position:absolute;top:38px;right:24px;width:44px;height:44px;margin:0;border:0;border-radius:12px;background:transparent;color:#fff}
html body .gs .gs-sidebar .gs-nav-close:hover{background:rgba(255,255,255,.1)}
html body .gs .gs-sidebar .gs-nav-close svg{width:24px;height:24px;stroke-width:2}

/* 5. very narrow phones: keep every label, reclaim only the gaps */
@media (max-width:360px){html body .gs .gs-topbar{gap:4px!important}html body .gs .gs-menu{width:40px}}