/*
  GritHQ FOUNDATION SHELL — Alpha4.51
  -----------------------------------
  This file is the authoritative mobile shell contract and is loaded LAST.

  Frozen contract:
    AppHeader
    PageViewport  <- the only primary scroll owner
    PrimaryDock   <- never participates in page scrolling

  Page modules may style their own content, but must not reposition the
  shared header, viewport, or primary dock.
*/

@media (max-width:959px) {
  body:not(.workout-mode){
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  body:not(.workout-mode) .app-shell,
  body:not(.workout-mode) .app-stage{
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  body:not(.workout-mode) .app-stage{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }

  /* Progress-tab behavior is the shell reference for every primary page. */
  body:not(.workout-mode) .mobile-appbar{
    grid-row:1!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:auto!important;
    z-index:40!important;
    flex:none!important;
  }

  body:not(.workout-mode) .main-content,
  html.ios-standalone body:not(.workout-mode) .main-content{
    grid-row:2!important;
    min-width:0!important;
    min-height:0!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:
      15px
      max(16px,env(safe-area-inset-right))
      20px
      max(16px,env(safe-area-inset-left))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    scroll-padding-bottom:20px!important;
    position:relative!important;
    z-index:1!important;
  }

  body:not(.workout-mode) .bottom-nav,
  html.ios-standalone body:not(.workout-mode) .bottom-nav{
    grid-row:3!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:auto!important;
    height:58px!important;
    min-height:58px!important;
    transform:none!important;
    flex:none!important;
    align-self:end!important;
    margin:
      6px
      max(10px,env(safe-area-inset-right))
      calc(6px + env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;
    padding:4px!important;
    border:1px solid rgba(83,118,151,.38)!important;
    border-radius:17px!important;
    background:rgba(4,12,20,.985)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
    overflow:hidden!important;
    z-index:40!important;
  }

  body:not(.workout-mode) .bottom-nav .nav-btn{
    min-height:48px!important;
  }

  /*
    Root-view containment has caused iOS/WebKit blank-surface behavior on
    large dynamically rendered tabs. Keep containment inside heavy lists,
    never on the entire page module.
  */
  #view-home.active,
  #view-routines.active,
  #view-history.active,
  #view-profile.active,
  #view-health.active,
  #view-settings.active{
    contain:none!important;
    transform:none!important;
    will-change:auto!important;
    animation:none!important;
  }

  /*
    Home remains visually the same module, but it now obeys the same shell
    and gets modest breathing room rather than being forced into one viewport.
  */
  body.home-mode .main-content{
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    padding:
      14px
      max(14px,env(safe-area-inset-right))
      20px
      max(14px,env(safe-area-inset-left))!important;
  }

  body.home-mode #view-home.active{
    display:grid!important;
    grid-template-rows:none!important;
    height:auto!important;
    min-height:100%!important;
    align-content:start!important;
    gap:10px!important;
  }

  body.home-mode .gh-mode-grid{
    gap:9px!important;
  }

  body.home-mode .gh-dashboard-grid,
  body.home-mode .gh-dashboard-main,
  body.home-mode .gh-dashboard-side,
  body.home-mode .gh-home-health{
    gap:9px!important;
  }

  /* Keep short Profile pages naturally above the same locked dock. */
  #view-profile.active{
    min-height:100%!important;
    box-sizing:border-box!important;
  }
}


/* ==============================================================
   Alpha4.52 — shared shell hard lock.
   Home now uses the exact same shell header/footer behavior as Progress.
   ============================================================== */
@media (max-width:959px) {
  html,body{height:100%!important;max-height:100%!important;overflow:hidden!important}
  body:not(.workout-mode) .app-shell{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body:not(.workout-mode) .app-stage{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body:not(.workout-mode) .mobile-appbar{
    display:grid!important;
    grid-row:1!important;
  }
  body:not(.workout-mode) .main-content{
    grid-row:2!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:none!important;
  }
  body:not(.workout-mode) .bottom-nav{
    grid-row:3!important;
    flex-shrink:0!important;
  }
  body.home-mode .gh-home-head{display:none!important}
  body.home-mode #view-home.active{gap:13px!important}
  body.home-mode .gh-home-hero-grid,
  body.home-mode .gh-dashboard-grid,
  body.home-mode .gh-dashboard-main,
  body.home-mode .gh-dashboard-side,
  body.home-mode .gh-home-health{gap:11px!important}
}