/* PrimeFlix Mobile App — APP FASE A14 · Final mobile QA/hardening */
:root{
  --pfm-vh:100dvh;
  --pfm-vw:100vw;
  --pfm-vv-top:0px;
  --pfm-vv-left:0px;
  --pfm-keyboard-inset:0px;
  --pfm-safe-top:env(safe-area-inset-top,0px);
  --pfm-safe-right:env(safe-area-inset-right,0px);
  --pfm-safe-bottom:env(safe-area-inset-bottom,0px);
  --pfm-safe-left:env(safe-area-inset-left,0px);
}
html[data-pf-mobile-app="1"],body.pfm-body{width:100%;max-width:100%;overflow-x:clip}
body.pfm-body{min-height:var(--pfm-vh);-webkit-text-size-adjust:none;text-size-adjust:none}
.pfm-app{min-height:var(--pfm-vh);width:100%;max-width:100%;overflow-x:clip}
.pfm-main,.pfm-main>*{min-width:0}
.pfm-body img,.pfm-body video,.pfm-body iframe,.pfm-body canvas,.pfm-body svg{max-width:100%}
.pfm-body input,.pfm-body textarea,.pfm-body select{max-width:100%}

/* Notch/fold/cutout protection. Keep the App chrome inside the visible safe region. */
.pfm-topbar{
  padding-left:max(12px,var(--pfm-safe-left));
  padding-right:max(12px,var(--pfm-safe-right));
}
.pfm-bottom-nav{
  left:max(10px,var(--pfm-safe-left));
  right:max(10px,var(--pfm-safe-right));
}
.pfm-sheet{
  padding-left:max(16px,var(--pfm-safe-left));
  padding-right:max(16px,var(--pfm-safe-right));
}
.pfm-toast-region{
  left:max(14px,var(--pfm-safe-left));
  right:max(14px,var(--pfm-safe-right));
}
.pfm-route-progress{top:var(--pfm-safe-top)}
.pfm-connectivity{top:calc(var(--pfm-safe-top) + 70px)}
.pfm-pull-indicator{top:calc(var(--pfm-safe-top) + 12px)}
.pfm-edge-back{left:max(8px,var(--pfm-safe-left))}

/* A8 is full-bleed, therefore horizontal safe areas must be handled explicitly. */
.pfm-a8-back{left:max(14px,var(--pfm-safe-left))}
.pfm-a8-heading{
  left:calc(max(14px,var(--pfm-safe-left)) + 56px);
  right:calc(max(14px,var(--pfm-safe-right)) + 58px);
}
.pfm-a8-controls{
  padding-left:max(14px,var(--pfm-safe-left));
  padding-right:max(14px,var(--pfm-safe-right));
}
.pfm-a8-iframe-tools{right:max(12px,var(--pfm-safe-right))}
.pfm-a8-sheet{
  padding-left:max(14px,var(--pfm-safe-left));
  padding-right:max(14px,var(--pfm-safe-right));
}
.pfm-a8-next{right:max(12px,var(--pfm-safe-right))}

/* Keyboard: remove chrome that would compete with the IME and constrain sheets to visual viewport. */
body.pfm-keyboard-open .pfm-app{padding-bottom:0}
body.pfm-keyboard-open .pfm-bottom-nav,
body.pfm-keyboard-open .pfm-nav-scrim{transform:translateY(calc(130px + var(--pfm-safe-bottom)));opacity:0;pointer-events:none}
body.pfm-keyboard-open .pfm-sheet,
body.pfm-keyboard-open .pfm-a8-sheet{
  bottom:var(--pfm-keyboard-inset);
  max-height:min(82dvh,calc(var(--pfm-vh) - 8px));
}
body.pfm-keyboard-open .pfm-toast-region{bottom:calc(12px + var(--pfm-keyboard-inset))}
body.pfm-keyboard-open .pfm-main{min-height:calc(var(--pfm-vh) - var(--pfm-safe-top))}

/* 320–359 px: keep controls usable without microscopic four-column secondary navigation. */
@media(max-width:359px){
  :root{--pfm-radius:18px}
  .pfm-topbar{padding-left:max(7px,var(--pfm-safe-left));padding-right:max(7px,var(--pfm-safe-right))}
  .pfm-top-actions{gap:3px}
  .pfm-icon-btn{width:38px;height:38px;border-radius:12px}
  .pfm-route-heading strong,.pfm-brand strong{font-size:15px}
  .pfm-sheet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pfm-sheet-grid a{min-height:68px;padding:11px 8px;font-size:9px}
  .pfm-grid,.pfm-a6-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfm-home-head h1,.pfm-screen-title h1{font-size:30px}
  .pfm-detail-body h1{font-size:28px}
  .pfm-a8-control-row{gap:4px}
  .pfm-a8-control-row button{min-width:36px;padding:0 8px}
  .pfm-a8-control-row button>span{display:none}
}

/* 600–768 px is still inside the A14 mobile matrix: use the available device width. */
@media(min-width:600px) and (max-width:768px){
  .pfm-app{max-width:none;margin:0;border-left:0;border-right:0}
  .pfm-bottom-nav{
    max-width:none;
    width:auto;
    left:max(12px,var(--pfm-safe-left));
    right:max(12px,var(--pfm-safe-right));
    transform:none;
  }
  .pfm-sheet{
    left:var(--pfm-safe-left);
    right:var(--pfm-safe-right);
    width:auto;
    transform:translateY(var(--pfm-sheet-drag,105%));
  }
  .pfm-sheet.is-open{transform:translateY(0)}
  .pfm-route-progress{left:0;right:0;width:auto;transform:none}
  .pfm-toast-region{left:50%;right:auto;width:min(520px,calc(100% - 32px));transform:translateX(-50%)}
  .pfm-grid,.pfm-a6-results{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Landscape phones: respect cutouts and preserve vertical working space. */
@media(orientation:landscape) and (max-height:560px){
  .pfm-topbar{padding-left:max(10px,var(--pfm-safe-left));padding-right:max(10px,var(--pfm-safe-right))}
  .pfm-bottom-nav{left:max(8px,var(--pfm-safe-left));right:max(8px,var(--pfm-safe-right))}
  .pfm-sheet{max-height:calc(var(--pfm-vh) - var(--pfm-safe-top));padding-bottom:max(10px,var(--pfm-safe-bottom))}
  .pfm-a8-back{left:max(8px,var(--pfm-safe-left))}
  .pfm-a8-heading{left:calc(max(8px,var(--pfm-safe-left)) + 54px);right:max(62px,var(--pfm-safe-right))}
  .pfm-a8-controls{padding-left:max(10px,var(--pfm-safe-left));padding-right:max(10px,var(--pfm-safe-right));padding-bottom:max(6px,var(--pfm-safe-bottom))}
}

/* Slow network should not create a permanently animated/shimmer-heavy UI. */
body.pfm-network-slow .pfm-skeleton:after{animation-duration:2.1s}

/* Admin-only A14 runtime diagnostic badge. */
.pfma14-debug-badge{
  position:fixed;z-index:20000;left:max(8px,var(--pfm-safe-left));bottom:max(8px,var(--pfm-safe-bottom));
  max-width:calc(100vw - 16px);padding:6px 8px;border-radius:9px;background:rgba(5,5,9,.92);
  border:1px solid rgba(255,255,255,.14);color:#d6d6df;font:700 9px/1.25 ui-monospace,SFMono-Regular,monospace;
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.pfma14-debug-badge.is-warning{border-color:#f3a847;color:#ffe2b2}

@media(prefers-reduced-motion:reduce){
  body.pfm-network-slow .pfm-skeleton:after{animation:none!important}
}