/* Canonical fixed navbar viewport contract.
   The navbar is removed from page flow; body spacing is measured by navbar-viewport.js. */
:root{
  --msh-navbar-height:72px;
}

html{
  scroll-padding-top:calc(var(--msh-navbar-height) + 10px);
}

body.msh-has-fixed-navbar,
body:has(.msh-page-topbar),
body:has(.msh-shell-topbar),
body:has(.admin-topbar){
  padding-top:var(--msh-navbar-height)!important;
}

body.msh-has-fixed-navbar .app-shell,
body:has(.msh-page-topbar) .app-shell,
body:has(.msh-shell-topbar) .app-shell,
body:has(.admin-topbar) .app-shell{
  padding-top:0!important;
}

.msh-page-topbar,
.msh-shell-topbar,
.admin-topbar{
  position:fixed!important;
  top:0!important;
  right:0!important;
  left:0!important;
  z-index:5000!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  will-change:transform!important;
}

/* The drawer remains above the fixed navbar. */
.msh-nav-backdrop{z-index:9996!important}
.msh-nav-drawer{z-index:9997!important}

@media(max-width:760px){
  :root{
    --msh-navbar-height:64px;
  }
  .msh-page-topbar,
  .msh-shell-topbar,
  .admin-topbar{
    top:0!important;
  }
}

@supports(padding:max(0px)){
  @media(display-mode:standalone){
    :root{
      --msh-navbar-height:calc(72px + env(safe-area-inset-top));
    }
    .msh-page-topbar,
    .msh-shell-topbar,
    .admin-topbar{
      height:auto!important;
      min-height:calc(72px + env(safe-area-inset-top))!important;
      padding-top:max(8px,env(safe-area-inset-top))!important;
    }
  }
  @media(display-mode:standalone) and (max-width:760px){
    :root{
      --msh-navbar-height:calc(64px + env(safe-area-inset-top));
    }
    .msh-page-topbar,
    .msh-shell-topbar,
    .admin-topbar{
      min-height:calc(64px + env(safe-area-inset-top))!important;
      padding-top:max(6px,env(safe-area-inset-top))!important;
    }
  }
}

@media print{
  body.msh-has-fixed-navbar,
  body:has(.msh-page-topbar),
  body:has(.msh-shell-topbar),
  body:has(.admin-topbar){
    padding-top:0!important;
  }
  .msh-page-topbar,
  .msh-shell-topbar,
  .admin-topbar{
    position:static!important;
    transform:none!important;
  }
}