/* KY installed-app edge-to-edge shell.
   Additive and deliberately scoped to the installed PWA on phones. */
@media (max-width:760px){
  :root{
    --ky-installed-safe-top:env(safe-area-inset-top,0px);
    --ky-installed-safe-bottom:env(safe-area-inset-bottom,0px);
  }

  html:has(body.kyStandalone){
    min-height:100%;
    background:#fff;
  }
  body.kyStandalone{
    min-height:100vh;
    min-height:100dvh;
    width:100%;
    margin:0;
    background:#f3f7fc;
    -webkit-overflow-scrolling:touch;
  }
  body.kyStandalone::before{
    content:'';
    position:fixed;
    z-index:29;
    top:0;
    left:0;
    right:0;
    height:var(--ky-installed-safe-top);
    background:#fff;
    pointer-events:none;
  }

  /* The app colour fills the notch/Dynamic Island area. Header content remains
     in the safe region and never sits underneath the camera or status icons. */
  body.kyStandalone header{
    top:0!important;
    width:100%!important;
    height:calc(58px + var(--ky-installed-safe-top))!important;
    min-height:calc(58px + var(--ky-installed-safe-top))!important;
    padding:calc(var(--ky-installed-safe-top) + 7px) 12px 8px!important;
    align-items:flex-end!important;
    background:#fff!important;
    border-bottom:0!important;
    box-shadow:0 2px 12px rgba(8,53,112,.16)!important;
    transform:translate3d(0,0,0);
    transition:transform .22s cubic-bezier(.2,.75,.25,1),box-shadow .22s ease!important;
    will-change:transform;
  }

  /* Facebook-style browsing: after a downward swipe only the device safe strip
     stays visible. Swipe upward, focus a control, or open a panel to restore it. */
  body.kyStandalone.kyHeaderHidden header{
    transform:translate3d(0,-100%,0)!important;
    box-shadow:none!important;
  }

  body.kyStandalone main{
    width:100%!important;
    max-width:100%!important;
    padding-bottom:calc(76px + var(--ky-installed-safe-bottom))!important;
  }

}

/* CSS fallback for the first paint before mobile-app.js attaches its class. */
@media (max-width:760px) and (display-mode:standalone){
  html{background:#fff}
  body:not(.kyStandalone) header{
    height:calc(58px + env(safe-area-inset-top,0px))!important;
    min-height:calc(58px + env(safe-area-inset-top,0px))!important;
    padding:calc(env(safe-area-inset-top,0px) + 7px) 12px 8px!important;
    align-items:flex-end!important;
    background:#fff!important;
    border-bottom:0!important;
  }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  body.kyStandalone header{transition:none!important}
}