/* ==========================================================================
   OgbonMath — Mobile Polish
   --------------------------------------------------------------------------
   Addresses two remaining classes of mobile UI/UX issues found in the
   compatibility audit:

   A. Canvas responsiveness — 4 canvases render at fixed intrinsic widths
      (600px, 800px) without max-width:100%, causing horizontal scroll
      on phones narrower than ~640px. Fix: constrain all content-area
      canvases with max-width:100% and height:auto to preserve aspect.

   B. Landscape orientation on phones — when a phone is turned sideways,
      viewport height drops to ~390-430px. With topbar (~56px) + bottom-
      nav (~56px + safe-area), content area shrinks to ~260px. Fix: hide
      bottom-nav in low-height viewports + slim the topbar.
   ========================================================================== */

/* ==========================================================================
   A. CANVAS RESPONSIVENESS
   ==========================================================================
   Content-area canvases scale down to fit the viewport while preserving
   aspect ratio. This catches:
     - #gcv (lesson graph, textbook section graph, playground 2D graph)
     - #hub-canvas (Math Hub scratchpad — 800px intrinsic)
     - #hw-canvas (AI Tutor scratchpad)
     - #prac-canvas (practice scratchpad)
     - #mlcv (ML demo visualizations)
     - simulation canvases

   Not applied to offscreen / WebGL canvases outside #ct.
*/
#ct canvas,
#pp canvas {
  max-width: 100%;
  height: auto;
}

/* The Graphing Playground's 3D container is a div, not a canvas, so it
   gets its own responsive rule */
body[data-view="playground"] #ct #gc-3d {
  max-width: 100%;
  box-sizing: border-box;
}

/* Math Hub's toolbar can overflow on narrow screens — let it scroll */
body[data-view="hub"] #ct .hub-toolbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
body[data-view="hub"] #ct .hub-toolbar::-webkit-scrollbar { display: none; }

/* Prevent awkward canvas cropping inside hub solution steps */
body[data-view="hub"] #ct .hub-step,
body[data-view="hub"] #ct .hub-eq-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* KaTeX display math can overflow on narrow screens (long equations) —
   enable horizontal scroll within the math block only */
#ct .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ==========================================================================
   B. LANDSCAPE ORIENTATION — phone sideways
   ==========================================================================
   Trigger: viewport height <= 500px AND width > height (i.e., landscape).
   Covers phones in landscape without affecting tablets (which have
   taller viewports even in landscape).
*/
@media (max-height: 500px) and (orientation: landscape) {
  /* Bottom-nav eats too much vertical space — hide in landscape, ⌘K is
     available in the topbar for navigation anyway */
  #bottom-nav {
    display: none !important;
  }

  /* Main content was padded for bottom-nav — reclaim that space */
  #main {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Slimmer topbar — minimize chrome when vertical space is precious */
  #topbar {
    padding: 4px 10px;
  }

  #topbar .tb-btn,
  #topbar .cmdp-trigger,
  #topbar .theme-toggle,
  #topbar .account-trigger {
    min-height: 36px;
    height: 36px;
    padding: 4px 8px;
  }

  #topbar .cmdp-trigger-label {
    display: none; /* icon + kbd only */
  }

  /* Welcome screen — reduce top padding */
  body[data-view="welcome"] .wv2 {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
  }

  /* Lesson cards — tighten vertical rhythm */
  body[data-view="lesson"] #ct .ls {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-3);
  }

  /* Practice panel in landscape — panel covers full width anyway,
     but ensure the footer fits */
  .pp-f {
    padding-top: var(--sp-2);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  }

  /* Account menu can't be too tall in landscape — cap it */
  .account-menu {
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }

  /* Command palette — cap height in landscape */
  .cmdp-backdrop {
    padding-top: 4vh;
  }
  .cmdp-panel {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
  }
}

/* ==========================================================================
   VERY NARROW PHONES (<360px — older Android, small phones in portrait)
   ==========================================================================
*/
@media (max-width: 359px) {
  /* Topbar — hide non-critical buttons */
  #topbar .tb-btn#b-notes,
  #topbar .tb-btn#b-prac {
    display: none; /* these are also available in the sidebar / ⌘K */
  }

  /* Welcome hero — tighter padding */
  body[data-view="welcome"] .wv2-hero {
    padding: var(--sp-4);
  }

  /* Bottom-nav — tighter buttons */
  #bottom-nav button {
    padding: 6px 4px;
  }
  #bottom-nav button span:not(.bn-icon) {
    font-size: 10px;
  }
}

/* ==========================================================================
   PREVENT HORIZONTAL PAGE SCROLL (universal safety net)
   ==========================================================================
   If ANY element accidentally overflows, keep the page scroll vertical-only.
   Individual scroll containers (canvases, palettes) handle their own
   horizontal overflow inside their bounds.
*/
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

#ct {
  overflow-x: hidden;
  max-width: 100%;
}