/* Equal side columns keep the page switch centered on the viewport. */
.topbar:has(.page-nav){display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px}
.topbar:has(.page-nav)>.brand{grid-column:1;grid-row:1;justify-self:start;min-width:0}
.topbar:has(.page-nav)>.page-nav{grid-column:2;grid-row:1;justify-self:center;margin:0;width:max-content;font-size:14px}
.topbar:has(.page-nav)>.theme-switch{grid-column:3;grid-row:1;justify-self:end;margin:0}
@media(max-width:900px) and (min-width:701px){
 .topbar:has(.page-nav){padding-inline:16px;gap:10px}
 .topbar:has(.page-nav) .brand-title{font-size:18px}
 .topbar:has(.page-nav) .brandmark,.topbar:has(.page-nav) .official-mark{width:32px}
 .topbar:has(.page-nav)>.page-nav{font-size:12px}
 .topbar:has(.page-nav) .page-nav a{padding-inline:10px}
}
@media(max-width:700px){
 .topbar:has(.page-nav){height:auto;min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 36px;padding:8px 12px;gap:5px 8px}
 .topbar:has(.page-nav)>.brand{grid-column:1}
 .topbar:has(.page-nav)>.page-nav{grid-column:1/-1;grid-row:2;font-size:12px;padding:3px;gap:3px}
 .topbar:has(.page-nav)>.page-nav a{flex:none;padding:5px 10px}
 .topbar:has(.page-nav)>.theme-switch{grid-column:2;max-width:100%}
 .topbar:has(.page-nav)>#mobile-panel{display:none}
 body.map-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
 .map-page>.topbar{flex:none}
 .map-page>.workspace{flex:1;height:auto;min-height:0}
}