/* BLUE8 One Responsive Shell v1
   One phone-sized canvas on desktop and a fluid canvas on real phones.
   All routes share the same physical center and bottom-bar geometry.
   Deliberately NO color, font-weight, icon or active-state declarations. */
:root { --blue8-one-frame: 448px; }
html, body { width:100%; max-width:100%; overflow-x:clip; }
@media (min-width:700px) { html { scrollbar-gutter:stable; } }

/* The SAME outer frame is used by home, activities, account, support, and auth. */
html body .site-shell,
html body main.activities-page,
html body main.account-page,
html body main.support-page,
html body main.support-page.blue8-support-v2,
html body .auth-overlay .auth-dialog {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--blue8-one-frame)!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
/* Keep the full-sized content inside that frame; don't constrain only an inner card. */
html body .site-shell main,
html body .site-shell > .appbar,
html body .activities-page > .activities-list,
html body .activities-page > .activity-detail,
html body .activities-page .activities-list,
html body .activities-page .activity-detail,
html body .support-page .blue8-support-content,
html body .account-page > .account-card {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
/* Fixed navigation and activity header must track the FRAME, not 400/430/480px. */
html body .site-shell .mobile-nav,
html body main.activities-page > .mobile-nav,
html body main.activities-page > .activities-nav,
html body .activities-page .activities-nav {
  box-sizing:border-box!important;
  position:fixed!important;
  width:min(100%,var(--blue8-one-frame))!important;
  max-width:var(--blue8-one-frame)!important;
  min-width:0!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  bottom:0!important;
  height:calc(64px + env(safe-area-inset-bottom, 0px))!important;
  padding-bottom:env(safe-area-inset-bottom, 0px)!important;
  margin:0!important;
}
html body main.activities-page > .activities-header,
html body .activities-page > .activities-header {
  box-sizing:border-box!important;
  width:min(100%,var(--blue8-one-frame))!important;
  max-width:var(--blue8-one-frame)!important;
  min-width:0!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
/* No width change across phone variants: use available space at 320px, 375px, 393px, etc. */
@media (max-width:448px) {
  :root { --blue8-one-frame:100%; }
  html body .site-shell,
  html body main.activities-page,
  html body main.account-page,
  html body main.support-page,
  html body main.support-page.blue8-support-v2,
  html body .auth-overlay .auth-dialog {max-width:100%!important;}
  html body .site-shell .mobile-nav,
  html body main.activities-page > .mobile-nav,
  html body main.activities-page > .activities-nav,
  html body .activities-page .activities-nav,
  html body main.activities-page > .activities-header,
  html body .activities-page > .activities-header {
    width:100%!important;
    max-width:100%!important;
  }
}