/* ============================================================
   MOBILE FIT FIXES — appended last so these win the cascade.
   Goal: on phones (and short / landscape screens) every popup can
   be scrolled all the way to its action buttons (OK / Save / Confirm
   / Create Account) so nothing is ever trapped below the fold.
   Everything is gated to small width OR very short height, so the
   normal desktop view is left untouched.
   ============================================================ */

/* (T) TAP TARGETS — on touch screens these controls were below the 44px
   minimum comfortable tap size. The hamburger and workspace buttons are grown
   to 44px; the announcement close keeps its small visual ring but gets a 44px
   invisible hit-area via ::after so the thin marquee bar isn't disturbed. */
@media (pointer: coarse){
  .mob-menu-btn{ min-width:44px; min-height:44px; }
  .ws-btn{ min-width:44px; min-height:44px; }
  .ann-close{ position:relative; }
  .ann-close::after{ content:""; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; }
}

/* (A) Overlays that center their dialog vertically get trapped when
   the dialog is taller than the screen: the centred layout can't be
   scrolled up to, so the footer buttons fall below the fold and stay
   unreachable. Top-aligning + allowing scroll fixes it. The 500px
   height branch only ever triggers on landscape phones, never on a
   normal desktop window. (.modal-backdrop / .upgrade-backdrop /
   .pj-otp-backdrop are already top-aligned — re-asserted here so the
   behaviour is guaranteed regardless of source order.) */
@media (max-width: 768px), (max-height: 500px){
  .auth-overlay,
  .login-overlay,
  .logout-modal-backdrop,
  .support-modal-backdrop,
  .upgrade-backdrop,
  .pj-otp-backdrop,
  .qv-backdrop,
  .modal-backdrop{
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* breathing room so the first/last row clears the notch & home-bar */
  .auth-overlay,
  .login-overlay,
  .logout-modal-backdrop,
  .support-modal-backdrop{
    padding-top: max(env(safe-area-inset-top, 0px), 18px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 18px) !important;
  }
}

/* (B) A modal body capped with max-height must scroll internally, or
   any content (and buttons) past the cap becomes unreachable. */
@media (max-width: 768px){
  .day-modal-body{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* =====================================================================
   MOBILE MODAL HEADER FIX
   Symptom: the "Log Trade" title row drifted DOWN into the middle of the
   form instead of staying pinned at the top while scrolling.
   Cause: .modal-backdrop is the scroll container, but the picker-flicker
   rules give ".modal-backdrop.open .modal" transform:translateZ(0) and
   contain:paint. A transformed / paint-contained ancestor stops
   position:sticky from resolving against the backdrop's scrollport, so
   "top:0" stopped meaning "top of the screen".
   Fix: make .modal itself the scroller. Sticky then resolves against the
   modal's OWN scrollport - exactly where the header should pin - and the
   transform/contain rules become irrelevant instead of harmful.
   #preTradePlanModal is excluded: it already defines its own scroll box.
   ===================================================================== */
@media (max-width: 760px){
  .modal-backdrop.open{
    overflow: hidden !important;
    align-items: flex-start !important;
  }
  .modal-backdrop.open:not(#preTradePlanModal) > .modal{
    max-height: calc(100vh - 88px) !important;
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 0 !important;
  }
  .modal-backdrop.open:not(#preTradePlanModal) > .modal > div:first-child{
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: #0d0d18 !important;
    margin: 0 -14px 14px -14px !important;
    padding: 14px !important;
    border-bottom: 1px solid rgba(40,30,70,0.6) !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
  }
}