/* The dashboard frame on standalone pages (site_frame.js): the Bike Shop, profiles and club pages
   wear the dashboard's own identity header and left panel. How they look is site_header.css and
   site_nav_panel.css (linked before this, the sheets the dashboard uses); this only places them,
   as the dashboard does: the header fixed across the top, the panel fixed down the left under it
   (its wide and phone-sideways forms) with the page beside it, or as the narrow strip (760px and
   under, site_nav_panel.css's breakpoint) fixed under the header with the page under both.
   site_frame.js measures them into --site-frame-header / --site-frame-left / --site-frame-top. */
html.site-framed #drawerHeader {
  position: fixed;
  z-index: 61;
  top: 0;
  left: 0;
  right: 0;
}
html.site-framed #navSidebar {
  position: fixed;
  z-index: 60;
  top: var(--site-frame-header, 0px);
  left: 0;
  bottom: 0;
}
html.site-framed body {
  margin-left: var(--site-frame-left, 0px);
  margin-top: calc(var(--site-frame-header, 0px) + var(--site-frame-top, 0px));
  /* The page's own full-height minimum, less the chrome, so an empty page doesn't scroll. */
  min-height: calc(100vh - var(--site-frame-header, 0px) - var(--site-frame-top, 0px));
}
/* The page's own back link / breadcrumb: the panel says where everything is. */
html.site-framed [data-site-back-redundant] {
  display: none !important;
}

@media (max-width: 760px) {
  html.site-framed #navSidebar {
    right: 0;
    bottom: auto;
  }
}