/* ==========================================================================
   OgbonMath — Mobile Scroll Fixes
   --------------------------------------------------------------------------
   Addresses four stacked issues that made mobile scrolling janky,
   especially when the practice panel is open:

   1. #pp used 100vh which on mobile includes the address-bar area.
      Switch to 100dvh (dynamic viewport height) with 100vh fallback.
   2. #pb lacked momentum-scroll hints and overscroll containment, so
      rubber-band scrolls leaked to the body.
   3. Bottom-nav (z=1000) covered the panel's footer buttons (z=100).
      Hide bottom-nav while the panel is open.
   4. Body was technically overflow:hidden but #wrap still received
      touch scrolls behind the panel. Lock that too.

   Also hardens #wrap scrolling generally so content pages scroll
   smoothly on iOS Safari + Chrome Android.

   Requires design/panel-state.js to add `body.pp-open` when the panel
   is open. Modern browsers (Chrome 105+, Safari 15.4+) also get
   `body:has(#pp.open)` as a pure-CSS backup.
   ========================================================================== */

/* ==========================================================================
   Layer 1 — Harden the primary scroll containers everywhere
   ==========================================================================
*/

/* The lesson/content scroll container — already had overscroll-behavior
   but missing -webkit-overflow-scrolling on some paths */
#wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Practice panel problem body — needs momentum + containment to prevent
   rubber-band bounces from bubbling to body */
#pb {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* AI tutor chat log — same pattern, it's a scroll container */
#ai-chat-log {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Command palette results */
.cmdp-results {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Sidebar lesson map — this scrolls when there are many lessons */
#map {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================================================
   Layer 2 — Disable iOS smooth-scroll on html (causes programmatic-scroll
   jank on mobile, especially when keyboard opens)
   ==========================================================================
*/
@media (max-width: 768px) {
  html {
    scroll-behavior: auto; /* overrides the desktop 'smooth' */
  }
}

/* ==========================================================================
   Layer 3 — Practice panel mobile sizing fix (100dvh)
   ==========================================================================
   100vh on iOS Safari includes the address-bar area — even when the bar is
   visible. 100dvh is the "dynamic viewport height" that excludes browser
   chrome. Supported on iOS 15.4+, Chrome 108+. Falls back to 100vh on
   older browsers (which is what we had before — not worse than the old
   behavior).
*/
@media (max-width: 768px) {
  #pp {
    height: 100vh;      /* fallback */
    height: 100dvh;     /* modern */
    /* When keyboard is open, mobile-keyboard.js shrinks the panel via
       --kbd-offset; that rule still wins via specificity (html[data-kbd-open]) */
  }
}

/* ==========================================================================
   Layer 4 — Panel-open state: hide bottom-nav, lock underlying scroll
   ==========================================================================
   Uses both `body.pp-open` (JS-toggled, works everywhere) and
   `body:has(#pp.open)` (CSS-only, works on modern browsers — redundant
   safety net).
*/
@media (max-width: 768px) {
  /* Hide bottom-nav when panel is open — it'd overlap the panel footer */
  body.pp-open #bottom-nav,
  body:has(#pp.open) #bottom-nav {
    display: none !important;
  }

  /* Lock background scroll and touch interactions when panel is open.
     pointer-events stops taps from reaching content behind the panel;
     overflow:hidden on #wrap stops the content from scrolling if the
     user finger-scrolls outside the panel area. */
  body.pp-open #wrap,
  body:has(#pp.open) #wrap {
    overflow: hidden !important;
    pointer-events: none;
    touch-action: none;
  }

  /* When panel closes, restore — pointer-events and touch-action reset
     automatically (we only applied them conditionally). */
}

/* ==========================================================================
   Layer 5 — Ensure the panel's own children stay interactive
   ==========================================================================
   Because we set pointer-events:none on #wrap when panel is open, we
   need to make sure #pp (which is a sibling, not a child of #wrap)
   stays fully interactive. It already is, since pointer-events doesn't
   inherit. But let's be explicit.
*/
#pp, #pp * {
  pointer-events: auto;
  touch-action: auto;
}

#pb {
  touch-action: pan-y; /* redeclare — we want vertical scroll in the panel */
}

/* ==========================================================================
   Layer 6 — Sidebar-open body scroll lock on mobile
   ==========================================================================
   Same pattern for the sidebar overlay on mobile: when sidebar is open
   (not collapsed), background shouldn't scroll. The sidebar itself is
   a drawer.
*/
@media (max-width: 768px) {
  body.sb-open #wrap,
  body:has(#sidebar:not(.collapsed)) #wrap {
    overflow: hidden !important;
  }
}

/* ==========================================================================
   Bonus — prevent iOS "double-tap to zoom" on buttons in the practice
   drawer (it interrupts taps with a 300ms delay)
   ==========================================================================
*/
#pp button,
#pp [role="button"] {
  touch-action: manipulation;
}

/* ==========================================================================
   Bonus — when the on-screen keyboard is open AND the panel is open, make
   sure the panel's footer (Prev/Skip/Next) stays above the keyboard.
   mobile-keyboard.js sets html[data-kbd-open]; stack this with .pp-open.
   ==========================================================================
*/
@media (max-width: 768px) {
  html[data-kbd-open="1"] body.pp-open #pp,
  html[data-kbd-open="1"] body:has(#pp.open) #pp {
    /* #pp already has `bottom: var(--kbd-offset)` from mobile-keyboard
       rules. Ensure it fills the shrunken viewport. */
    height: calc(100vh - var(--kbd-offset, 0px));
    height: calc(100dvh - var(--kbd-offset, 0px));
  }
}