/* ============================================================
   THE MOE - mobile app layer
   Loaded after styles.css. Makes the site behave like a native
   app on phones: full-screen menu, safe areas, 44px targets,
   press states, bottom action bar. Desktop is untouched.
   ============================================================ */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media(max-width:1024px){
  /* kill bounce + tap flash, feel native */
  html,body{overscroll-behavior-y:none}
  *{-webkit-tap-highlight-color:transparent}

  /* ---------- header as app bar ---------- */
  .hdr{
    padding-top:calc(14px + env(safe-area-inset-top));
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
    padding-bottom:14px;
  }
  .hdr .logo{min-height:44px;display:flex;align-items:center}
  .hdr .cta-pill{display:none}          /* lives in the bottom bar on mobile */
  .burger{width:44px;height:44px;align-items:center;justify-content:center;gap:5px}
  .burger span{width:22px}

  /* ---------- full-screen app menu ---------- */
  .nav{
    inset:0;width:100%;padding:
      calc(84px + env(safe-area-inset-top))
      max(24px,env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(24px,env(safe-area-inset-left));
    background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
    border-left:none;gap:0;justify-content:flex-start;
    transform:translateY(-100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav.open{transform:none}
  .nav a{
    width:100%;min-height:60px;display:flex;align-items:center;
    font-size:24px;font-weight:600;letter-spacing:-.02em;
    border-bottom:1px solid var(--line-2);
    opacity:0;transform:translateY(14px);
  }
  .nav.open a{opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
  .nav.open a:nth-child(1){transition-delay:.06s}
  .nav.open a:nth-child(2){transition-delay:.10s}
  .nav.open a:nth-child(3){transition-delay:.14s}
  .nav.open a:nth-child(4){transition-delay:.18s}
  .nav.open a:nth-child(5){transition-delay:.22s}
  .nav.open a:nth-child(6){transition-delay:.26s}
  .nav a:active{color:var(--cyan)}
  .nav .cta-pill{
    display:inline-flex;justify-content:center;margin-top:26px;
    min-height:54px;font-size:16px;border-radius:100px;border-bottom:none;
    opacity:0;transform:translateY(14px);
  }
  .nav.open .cta-pill{opacity:1;transform:none;transition-delay:.30s}
  body.nav-open{overflow:hidden}
  /* nothing may force the layout wider than the screen */
  .nav .cta-pill{white-space:normal;text-align:center}
  .hdr,.nav,.ftr,.wrap,section{max-width:100vw}
  h1,h2,h3,.beat h2{overflow-wrap:break-word}

  /* ---------- touch: no hover artefacts, real press states ---------- */
  .card:hover{transform:none;border-color:var(--line)}
  .card:active{transform:scale(.985);border-color:rgba(93,181,58,.45)}
  .btn:hover{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-primary:hover{background:var(--cyan);color:#04060b;border-color:var(--cyan)}
  .btn:active{transform:scale(.97)}
  .btn-primary:active{background:#74d24f}
  .cta-pill:hover{transform:none}
  .cta-pill:active{transform:scale(.97);background:#74d24f}

  /* ---------- 44px minimum targets ---------- */
  .btn{min-height:50px;padding:15px 26px;font-size:15px}
  .ftr a,.ftr .contact-line{min-height:44px;display:flex;align-items:center}
  .ftr .bottom a{min-height:44px;display:inline-flex;align-items:center;padding-right:6px}
  .crumb a{min-height:44px;min-width:46px;display:inline-flex;align-items:center}
  a.more{min-height:44px;display:inline-flex;align-items:center}
  .chip{min-height:44px;display:inline-flex;align-items:center}

  /* ---------- comfortable reading ---------- */
  section{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
  .form{gap:16px}
  .field input,.field select,.field textarea{min-height:52px;font-size:16px} /* 16px stops iOS zoom-on-focus */

  /* ---------- bottom tab bar (native app navigation) ---------- */
  #tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:96;display:flex;
    padding:6px max(2px,env(safe-area-inset-left))
            calc(4px + env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-right));
    background:rgba(6,17,38,.92);backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
    transform:translateY(130%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  #tabbar.show{transform:none}
  #tabbar a{
    flex:1 1 0;min-width:0;min-height:52px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--faint);padding:4px 2px;border-radius:10px;
  }
  #tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
  #tabbar a span{
    font-size:9.5px;letter-spacing:.04em;font-weight:600;line-height:1;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  #tabbar a:active{background:rgba(93,181,58,.10)}
  #tabbar a.on{color:var(--cyan)}
  #tabbar a.cta{color:var(--cyan)}
  #tabbar a.cta svg{stroke-width:1.9}
  body.nav-open #tabbar{transform:translateY(130%)}
  /* keep the footer clear of the bar */
  .ftr{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}

/* ---------- film hero on phones ---------- */
@media(max-width:760px){
  html #film{height:520vh}                       /* less thumb-mileage than desktop */
  html #stage{height:100svh}                     /* svh dodges the URL-bar resize jump */
  html .beat{
    left:0;right:0;bottom:0;max-width:100%;
    padding:26px max(20px,env(safe-area-inset-left))
            calc(30px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-right));
    background:linear-gradient(180deg,transparent,rgba(4,12,30,.42) 26%,rgba(4,12,30,.9) 100%);
  }
  html .beat .kick{font-size:10px;letter-spacing:.24em;margin-bottom:10px}
  html .beat h2{font-size:clamp(26px,7.6vw,36px);line-height:1.06}
  html .beat p{margin-top:10px;font-size:14px;line-height:1.5;max-width:34ch}
  html .beat .actions{margin-top:18px;gap:10px}
  html .beat .actions .btn{flex:1;justify-content:center;min-height:50px}
  /* chapter readout moves up top so it never fights the copy */
  html #read{
    top:calc(72px + env(safe-area-inset-top));bottom:auto;
    right:max(18px,env(safe-area-inset-right));
  }
  html #read .n{font-size:10px}
  html #read .t{font-size:10px;letter-spacing:.22em}
  html #bar{width:72px;margin-top:8px}
  html #hint2{display:none}   /* bottom belongs to the copy panel on phones */
}

/* ---------- very small phones (320-420px) ---------- */
@media(max-width:760px){
  /* grid/flex children default to min-width:auto and refuse to shrink: this is what
     forced the layout wider than the screen on small phones */
  html .proofbar .wrap>*,html .proofbar .stat{min-width:0}
  html .proofbar .stat .n{white-space:normal;overflow-wrap:anywhere}
  html .proofbar .stat .l{overflow-wrap:anywhere}
  html .grid>*,html .spec>*,html .svc>*,html .bento>*{min-width:0}
}

@media(max-width:420px){
  /* the proof strip forced a 362px layout at 320: nowrap at 26px cannot fit two-up */
  html .proofbar .stat .n{white-space:normal;font-size:clamp(21px,6.4vw,28px);overflow-wrap:break-word}
  html .proofbar .stat{padding-left:18px}
  html .proofbar .wrap{gap:22px 0}
  html .proofbar .stat .l{font-size:10.5px;letter-spacing:.12em}
  html .beat h2{font-size:clamp(23px,7.4vw,30px)}
  html .beat p{font-size:13px}
  html #tabbar a span{font-size:9px}
}