/* =========================================================
   v1.38 — Mobile layout-owned tab bar
   The tab bar is a real layout row, not an overlay on content.
   ========================================================= */
@media(max-width:780px){
  html,body{height:100%!important;min-height:100%!important}
  body{
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    grid-template-columns:minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  body>.app{
    grid-row:1!important;grid-column:1!important;
    width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  }
  body>.mobile-nav{
    position:relative!important;inset:auto!important;
    grid-row:2!important;grid-column:1!important;
    width:100%!important;left:auto!important;right:auto!important;bottom:auto!important;
    z-index:160!important;
    height:calc(52px + env(safe-area-inset-bottom,0px))!important;
    min-height:52px!important;
    padding:2px 4px calc(3px + env(safe-area-inset-bottom,0px))!important;
    flex-shrink:0!important;
    background:color-mix(in srgb,var(--surface-primary,#10151b) 94%,transparent)!important;
    border-top:1px solid var(--stroke-subtle,#25303c)!important;
    box-shadow:0 -1px 0 rgba(255,255,255,.015)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.12)!important;
    backdrop-filter:blur(16px) saturate(1.12)!important;
  }
  body>.mobile-nav button{min-height:46px!important}

  /* Content no longer needs artificial clearance for an overlaid tab bar. */
  .page{
    padding-bottom:18px!important;
    scroll-padding-bottom:18px!important;
  }
  .main{scroll-padding-bottom:18px!important}

  /* Sheets cover the tab bar instead of moving layout underneath them. */
  body.mobile-sheet-open-v131>.mobile-nav,
  body.drawer-open-v117>.mobile-nav{
    opacity:0!important;pointer-events:none!important;transform:none!important;
  }

  /* One deliberate mobile metric page at a time; hint via snap, not clipping. */
  #home>.g4{scroll-snap-type:x mandatory!important;gap:8px!important}
  #home>.g4 .metric{
    flex:0 0 calc(100vw - (var(--mobile-edge,14px) * 2))!important;
    max-width:calc(100vw - (var(--mobile-edge,14px) * 2))!important;
    scroll-snap-align:start!important;
  }

  /* Reduce vertical chrome without changing information hierarchy. */
  #home>.g2{gap:12px!important}
  #home>.g2>.panel>.panel-h{padding-bottom:6px!important}
  #home>.g2>.panel:first-child .att-row{min-height:47px!important}
  #home>.g2>.panel:nth-child(2) .account-card{min-height:49px!important}
}

@media(max-width:360px){
  body>.mobile-nav{height:calc(50px + env(safe-area-inset-bottom,0px))!important;min-height:50px!important}
  body>.mobile-nav button{min-height:44px!important}
  .page{padding-bottom:14px!important}
}