/* Keep the menu hit target outside iOS status/notch areas in Safari and the
   installed advisor app. Use the same width breakpoint as the JS controller. */
.topbar-leading{display:flex;align-items:center;gap:12px;min-width:0}
.topbar .mobile-menu{flex:0 0 44px;min-width:44px;min-height:44px;padding:0;touch-action:manipulation;cursor:pointer}
@media(max-width:820px){
  .topbar{
    height:calc(66px + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
    gap:8px;
  }
  .topbar-leading{flex:1}
  .topbar .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .top-actions{flex:0 0 auto}
  .sidebar{
    width:min(286px,88vw);
    padding-top:max(24px,calc(env(safe-area-inset-top,0px) + 16px));
    padding-left:max(18px,env(safe-area-inset-left,0px));
    padding-bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 16px));
    visibility:hidden;pointer-events:none;
    transform:translate3d(-110%,0,0);
    transition:transform .2s ease,visibility 0s linear .2s;
  }
  .sidebar.open{visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);transition-delay:0s}
  .sidebar .brand-lock{padding-right:44px}
  .sidebar .brand-lock>div{min-width:0}
  .sidebar .sidebar-close{top:max(22px,calc(env(safe-area-inset-top,0px) + 12px));width:44px;height:44px;touch-action:manipulation}
  .sidebar-backdrop{touch-action:none}
  .menu-open{overscroll-behavior:none}
  #bottomNav{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    padding-left:max(5px,env(safe-area-inset-left,0px));
    padding-right:max(5px,env(safe-area-inset-right,0px));
    padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));
  }
  #bottomNav button{min-width:0;width:100%;min-height:56px;padding:2px;align-content:center;gap:3px;font-size:.65rem;line-height:1.2;touch-action:manipulation;cursor:pointer}
  #bottomNav button>span{display:flex;align-items:center;justify-content:center;min-height:2.4em;max-width:100%;overflow-wrap:anywhere;text-align:center}
  #bottomNav svg{width:21px;height:21px;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .content{padding-bottom:calc(105px + env(safe-area-inset-bottom,0px))}
  .toast-wrap{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  #app .supervised-bar{top:calc(66px + env(safe-area-inset-top,0px))}
  #app .notification-panel{top:calc(66px + env(safe-area-inset-top,0px));max-height:calc(100svh - 155px - env(safe-area-inset-top,0px))}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}