/* One primary menu at the top, shared by every screen and device orientation. */
.app>.topbar{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;column-gap:16px;row-gap:0;height:auto;min-height:80px;flex-wrap:initial}
.topbar>.brand{grid-column:1;grid-row:1}
.topbar>.primary-navigation{grid-column:2;grid-row:1;display:flex;position:relative;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:4px;order:initial;width:auto;min-width:0;max-width:100%;height:72px;flex-basis:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#45596b transparent;-webkit-overflow-scrolling:touch}
.topbar>.primary-navigation .nav-item{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:60px;min-height:52px;padding:8px;font-size:14px;line-height:1.2;white-space:nowrap}
.topbar>.primary-navigation .nav-item .icon{width:18px;height:18px}
.topbar>.primary-navigation .nav-item span{max-width:none;white-space:nowrap}
.topbar>.primary-navigation .nav-item.active:after{left:8px;right:8px;bottom:3px}
.topbar>.top-meta{grid-column:3;grid-row:1;margin-left:0;gap:8px}
.app{padding-bottom:max(24px,env(safe-area-inset-bottom))}
@media(max-width:1100px){.app>.topbar{column-gap:10px}.topbar>.primary-navigation{gap:0}.topbar>.primary-navigation .nav-item{padding-left:6px;padding-right:6px;min-width:56px}}
@media(max-width:600px){
 .app>.topbar{grid-template-columns:max-content minmax(0,1fr) max-content;min-height:64px;padding-top:10px}
 .topbar>.primary-navigation{grid-column:1/-1;grid-row:2;width:100%;height:66px;margin-top:5px}
 .topbar>.primary-navigation .nav-item{min-width:76px;padding-left:10px;padding-right:10px}
}
@media(orientation:landscape) and (max-height:600px) and (min-width:601px){.app>.topbar{min-height:64px}.topbar>.primary-navigation{height:62px}}