/* BLUE8: one physical-width mobile canvas across desktop routes.
   Geometry only. Never override font/color/opacity, button contents or active state. */
:root { --blue8-nav-max:480px!important; --blue8-mobile-width:480px!important; --blue8-desktop-canvas:480px; }
html body .site-shell,
html body main.activities-page,
html body .activities-page,
html body main.account-page,
html body .account-page {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--blue8-desktop-canvas)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  min-width:0!important;
}
html body main.activities-page > .activities-list,
html body main.activities-page > .activity-detail,
html body .activities-page .activities-list,
html body .activities-page .activity-detail,
html body .site-shell main {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
/* Both page bars track their containing 480px mobile canvas. */
html body .site-shell .mobile-nav,
html body main.activities-page > .mobile-nav,
html body main.activities-page > .activities-nav,
html body .activities-page > .mobile-nav,
html body .activities-page > .activities-nav,
html body .mobile-nav,
html body .activities-nav {
  box-sizing:border-box!important;
  width:min(100%,var(--blue8-desktop-canvas))!important;
  max-width:var(--blue8-desktop-canvas)!important;
  min-width:0!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
html body main.activities-page > .activities-header,
html body .activities-page > .activities-header {
  box-sizing:border-box!important;
  width:min(100%,var(--blue8-desktop-canvas))!important;
  max-width:var(--blue8-desktop-canvas)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
@media (max-width:480px){
  :root { --blue8-desktop-canvas:100vw; }
}