/**
 * mobile-layout.css
 * Shared responsive layer for every generator app. Turns the fixed 360px sidebar into a
 * slide-in drawer on small screens and makes the controls touch-friendly, without touching
 * each app's own theme (all colors come from the :root vars every app already defines:
 * --bg, --sidebar, --surface, --border, --accent, --text, --muted, --sidebar-w).
 *
 * Contract with the apps (see architecture/README.md → Mobile layout):
 *   - App shell markup:  .app > .sidebar + .viewport-wrap > #viewport (+ .toolbar)
 *   - Drawer behavior (toggle button, scrim, close button, open/close state) is driven by
 *     Libraries/mobile-ui.js, which creates .mobile-nav-toggle / .mobile-scrim /
 *     .mobile-drawer-close and toggles .mobile-open on the sidebar.
 *   - The media query below MUST stay character-identical to MobileUI.MEDIA_QUERY in
 *     mobile-ui.js (a Node test enforces this) — CSS and JS must agree on what "mobile" is,
 *     or the drawer JS runs while the desktop layout is showing (or vice versa).
 */

/* Always on, every width: gestures on the 3D canvas belong to OrbitControls, never to
   browser pan/zoom. Without this, one-finger orbit scrolls/bounces the page on touch
   devices. Harmless on desktop. */
#viewport canvas { touch-action: none; }
#viewport { touch-action: none; }

/* Stop a horizontal drag from swiping the page to the previous history entry (back to the
   generators index). A camera-orbit drag near the screen edge must never navigate away.
   `overscroll-behavior-x: none` on the root disables the Chromium/Android overscroll-nav
   gesture (also the desktop trackpad two-finger swipe-back). NOTE: iOS Safari's system
   edge-swipe from the screen bezel is an OS-level gesture a web page cannot fully suppress —
   this covers the in-content drag case (the common one) but not a swipe that starts on the
   bezel itself. Global, not mobile-only, because trackpad swipe-nav bites on desktop too.
   This property only governs OVERSCROLL-driven navigation, so it does nothing for a plain
   sideways drag on the toolbar or the drawer — MobileUI.blockHorizontalSwipe covers those
   (the `touch-action: none` above reaches only #viewport). */
html, body { overscroll-behavior: none; }
/* Keep the sidebar's own scroll from chaining out to a page-level swipe/navigation. */
.sidebar-body { overscroll-behavior: contain; }

/* Drawer chrome exists at every width but only shows in the mobile layout. */
.mobile-nav-toggle  { display: none; }
.mobile-scrim       { display: none; }
.mobile-drawer-close{ display: none; }

/* "Mobile" = narrow (portrait phone / small tablet) OR short touch screen (landscape phone).
   Keep in sync with MobileUI.MEDIA_QUERY — enforced by Libraries/mobile-ui.test.js. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {

  /* ── App shell ─────────────────────────────────────────────────────────────
     100vh on mobile browsers includes the area behind the collapsing URL bar;
     dvh tracks the *visible* viewport so the toolbar is never cut off. */
  .app { height: 100vh; height: 100dvh; }

  /* ── Sidebar → slide-in drawer ──────────────────────────────────────────── */
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    height: 100vh; height: 100dvh;
    width: min(85vw, var(--sidebar-w));
    min-width: 0;
    z-index: 60;
    /* -105% (not -100%) so the border/shadow can't peek in from the edge */
    transform: translateX(-105%);
    transition: transform 0.25s ease;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
  }

  /* Backdrop behind the open drawer; tap anywhere on it to close. */
  .mobile-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-scrim.visible { opacity: 1; pointer-events: auto; }

  /* Floating "Controls" button in the 3D viewport (top-left; the orientation cube
     owns the top-right corner). */
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    z-index: 40;
    background: var(--sidebar);
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    padding: 0 14px;
    min-height: 44px;   /* Apple/Android minimum comfortable touch target */
    cursor: pointer;
  }
  .mobile-nav-toggle:active { background: var(--surface); }

  /* Close (×) pinned inside the open drawer, for when the scrim strip is too thin. */
  .mobile-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    z-index: 5;
    width: 38px;
    height: 38px;
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-drawer-close:active { color: var(--text); }

  /* ── Touch-friendly controls ───────────────────────────────────────────────
     16px inputs: iOS Safari auto-zooms the whole page when focusing any input
     with a computed font-size under 16px. Do not "fix" this with
     maximum-scale=1 in the viewport meta — that disables pinch-zoom for
     everyone (accessibility). */
  .ctrl input[type="text"],
  .ctrl input[type="number"],
  .ctrl select,
  .ctrl textarea,
  .range-row input[type="number"],
  .sidebar-search input { font-size: 16px; }

  .range-row input[type="range"] { height: 8px; }
  .range-row input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .range-row input[type="number"] { width: 68px; }
  .check-row input[type="checkbox"] { width: 20px; height: 20px; }
  .btn { min-height: 44px; }
  .align-btn { padding: 12px 10px; }
  .collapsible-section summary { padding: 13px 12px; }

  /* Plate navigator chips: drop BELOW the ☰ Controls toggle's row — on a 390px phone the
     centered bar (~180px) and the toggle (~110px, top-left) overlap if they share the top row
     (caught by the suites' mobile-layout overlap checks). 60px = toggle top 12 + 44px target + 4px
     gap, notch-padded. Off the toggle's row the bar can use nearly the full width; chips keep real
     tap targets and >=16px text (iOS zoom guard). */
  .plate-nav { top: calc(60px + env(safe-area-inset-top, 0px)); max-width: calc(100% - 24px); }
  .plate-nav .align-btn { font-size: 16px; min-height: 44px; }

  /* Safe-area breathing room at the bottom of scroll/footer areas (iPhone home bar). */
  .sidebar-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .sidebar-body   { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* ── Toolbar under the viewport ──────────────────────────────────────────── */
  .toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .toolbar .dims-info { flex-basis: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .mobile-scrim { transition: none; }
}