/* V157 — iPhone/Documents header separation and modal fit */
@media (max-width:820px){
  .app{padding-top:max(8px,env(safe-area-inset-top))!important}
  .topbar{
    position:relative!important;top:auto!important;inset:auto!important;
    width:100%!important;min-height:62px!important;height:auto!important;
    margin:0 0 9px!important;padding:9px 10px!important;
    z-index:260!important;transform:none!important;
  }
  .brand{align-items:center!important;min-width:0!important}.brand h1{font-size:20px!important;line-height:1.05!important;overflow:visible!important}
  #menuScreen .hero{margin-top:0!important;position:relative!important;z-index:1!important}
  #menuScreen .hero>.card:first-child{padding-top:18px!important}
  .hero-title{position:relative!important;z-index:1!important;margin-top:0!important;padding-top:0!important}
  .modal-backdrop.active{display:flex!important;justify-content:center!important;align-items:center!important}
  .modal{max-height:calc(100svh - 20px)!important;overscroll-behavior:contain!important}
  body.ha-modal-open{overflow:hidden!important}
  body.ha-modal-open .mobile-app-nav-v154{display:none!important}
  body.ha-modal-open .app{padding-bottom:10px!important}
}