/* =========================================================
   KY AI V14.85 — RESTORE MULTI-CARD FEED + NOTCH SCROLL-THROUGH
   Additive UI-only patch. No feature/data/API/navigation changes.

   Intent:
   - Keep the existing compact multi-property layout (do NOT force one card full width).
   - Around iPhone notch/Dynamic Island is white while the KY header is visible.
   - When user scrolls down and the header auto-hides, the white safe-area veil also hides,
     allowing the property feed to continue visually into the top/notch area.
   ========================================================= */
@media (max-width:760px){
  :root{
    --ky-v1485-safe-top:env(safe-area-inset-top,0px);
    --ky-v1485-blue:#0b63e5;
  }

  html,
  html:has(body.kyStandalone){
    background:#fff!important;
  }

  /* White only around the notch/status area while the KY header is present. */
  body.kyStandalone::before{
    content:''!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:var(--ky-v1485-safe-top)!important;
    background:#fff!important;
    z-index:80!important;
    pointer-events:none!important;
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.75,.25,1)!important;
  }

  /* Keep the whole installed-app top surface white. The blue KY brand stays
     inside it, close to Dynamic Island, without covering the yellow strip. */
  body.kyStandalone header{
    top:0!important;
    height:calc(54px + var(--ky-v1485-safe-top))!important;
    min-height:calc(54px + var(--ky-v1485-safe-top))!important;
    padding:calc(var(--ky-v1485-safe-top) + 1px) 10px 5px!important;
    align-items:center!important;
    background:#fff!important;
    border-bottom:1px solid #e7edf5!important;
    box-shadow:0 2px 10px rgba(20,45,80,.08)!important;
  }
  body.kyStandalone header .brand{
    margin-top:-1px!important;
  }

  /* When browsing down, hide BOTH header and white veil so feed uses the top area. */
  body.kyStandalone.kyHeaderHidden header{
    transform:translate3d(0,-100%,0)!important;
  }
  body.kyStandalone.kyHeaderHidden::before{
    opacity:0!important;
    transform:translate3d(0,calc(-1 * var(--ky-v1485-safe-top)),0)!important;
  }

  /* IMPORTANT: no #grid/.card/.rail sizing overrides here.
     Existing KY mobile layout remains intact so customers can see several homes at once. */
}

/* First paint before JS adds kyStandalone: keep notch/status region white. */
@media (max-width:760px) and (display-mode:standalone){
  html{background:#fff!important}
  body:not(.kyStandalone)::before{
    content:'';
    position:fixed;
    top:0;left:0;right:0;
    height:env(safe-area-inset-top,0px);
    background:#fff;
    z-index:80;
    pointer-events:none;
  }
  body:not(.kyStandalone) header{
    top:0!important;
    height:calc(54px + env(safe-area-inset-top,0px))!important;
    min-height:calc(54px + env(safe-area-inset-top,0px))!important;
    padding:calc(env(safe-area-inset-top,0px) + 1px) 10px 5px!important;
    background:#fff!important;
    border-bottom:1px solid #e7edf5!important;
  }
}