/* =========================================================
   v1.37 — iOS browser safe-area + mobile carousel polish
   ========================================================= */
@media(max-width:780px){
  /* File/browser viewers already own the top safe area. Avoid double inset. */
  :root{--v131-safe-top:0px!important;--top:54px!important;--mobile-appbar:54px!important}
  .app{grid-template-rows:54px minmax(0,1fr)!important}
  .topbar{height:54px!important;max-height:54px!important;padding-top:0!important;grid-template-rows:54px!important}
  .mobile-app-title-v131{min-height:54px!important}

  /* Full-card snap carousel for secondary metrics; no clipped text. */
  #home>.g4{
    scroll-snap-type:x mandatory!important;scroll-padding-left:var(--mobile-edge)!important;
    gap:10px!important;padding-bottom:6px!important;
  }
  #home>.g4 .metric{
    flex:0 0 min(calc(100vw - 58px),340px)!important;
    min-width:0!important;min-height:78px!important;padding:10px 12px!important;
    scroll-snap-align:start!important;overflow:hidden!important;
  }
  #home>.g4 .metric .k{white-space:normal!important;line-height:1.2!important}
  #home>.g4 .metric .d{
    white-space:normal!important;overflow:hidden!important;display:-webkit-box!important;
    -webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;line-height:1.25!important;
  }

  /* Slightly lighter grouped surfaces and tighter primary list rhythm. */
  #home>.g2>.panel>.panel-b{border-color:color-mix(in srgb,var(--stroke-subtle) 82%,transparent)!important}
  #home>.g2>.panel:first-child .att-row{min-height:49px!important;padding:7px 4px!important}
  #home>.g2>.panel:nth-child(2) .account-card{min-height:51px!important;padding:8px 4px!important}

  /* Ensure fixed tab bar never consumes the last content rows. */
  .page{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
  .main{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}

  /* A little less visual weight in the fixed tab bar. */
  .mobile-nav{
    height:calc(54px + env(safe-area-inset-bottom,0px))!important;min-height:54px!important;
    background:color-mix(in srgb,var(--surface-primary) 88%,transparent)!important;
  }
  .mobile-nav button{min-height:45px!important}
}

/* Standalone/PWA owns the physical safe area itself. */
@media(max-width:780px) and (display-mode:standalone){
  :root{--v131-safe-top:env(safe-area-inset-top,0px)!important;--top:calc(54px + env(safe-area-inset-top,0px))!important}
  .app{grid-template-rows:calc(54px + env(safe-area-inset-top,0px)) minmax(0,1fr)!important}
  .topbar{height:calc(54px + env(safe-area-inset-top,0px))!important;max-height:none!important;padding-top:env(safe-area-inset-top,0px)!important;grid-template-rows:54px!important}
}