/* Shared mobile/touch baseline for standalone demo pages.

   Link this alongside assets/css/demo-theme.css. demo-theme.css defines the
   colour tokens; this file defines input and sizing behaviour, which every
   canvas demo needs and which is easy to get wrong in ways only a phone
   reveals.

   Contract: the demo's canvas container is #stage. Colours stay the demo's
   business - nothing here paints anything. */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* Stops the rubber-band scroll that otherwise fires when a drag runs past
     the edge of the canvas. */
  overscroll-behavior: none;
  /* Setting this on the canvas alone is not enough. touch-action is resolved
     from whatever the touch actually LANDS on, and a demo page is not all
     canvas: lil-gui's root computes to `manipulation`, which still permits
     panning, and any label or overlay that accepts input defaults to `auto`.
     A drag starting on one of those pans the page, which on a phone reads as
     the URL bar sliding and the page scrolling under your finger. Declaring
     it at the root makes suppression the default and leaves overrides to
     elements that genuinely need to scroll. */
  touch-action: none;
}

/* `inset: 0` resolves against the LARGE viewport, the one you get with the
   mobile URL bar hidden. With the bar showing, a canvas sized that way
   extends behind it and the rendered centre sits below the visible centre.
   dvh/dvw track the visible viewport instead. vh/vw first for browsers
   without dynamic units. */
#stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
}

/* The one line that makes multi-finger gestures work at all.
   preventDefault() inside a pointer handler does NOT suppress native panning
   and zooming; only touch-action does. Without this the browser claims the
   second finger, fires pointercancel, and pinch-zooms the page while the
   demo's own pinch code sits there never running.

   The cost: a page whose canvas fills the viewport can no longer be
   pinch-zoomed by the user. For a 3D viewport that is the right trade, since
   the gesture belongs to the camera. A demo whose canvas is only part of the
   page should scope this to the canvas and leave the rest zoomable. */
#stage,
#stage canvas {
  touch-action: none;
}

/* A canvas with no CSS size lays out at its intrinsic pixel size, which on a
   2x screen is twice the viewport. Belt and braces for demos that size the
   backing store themselves; demo-viewport.js also writes an explicit style. */
#stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Removes the grey flash on tap and the long-press selection callout, both of
   which read as bugs when the "text" being selected is a 3D viewport. */
#stage {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Overlay furniture (hints, stats, captions) should clear rounded corners and
   notches. Demos position these themselves; these variables give them a
   safe origin to position against. */
:root {
  --demo-inset-top: max(12px, env(safe-area-inset-top));
  --demo-inset-right: max(12px, env(safe-area-inset-right));
  --demo-inset-bottom: max(12px, env(safe-area-inset-bottom));
  --demo-inset-left: max(12px, env(safe-area-inset-left));
}

/* Fingers are not mouse pointers. lil-gui's default rows are ~24px, which is
   half of what a touch target should be. */
@media (pointer: coarse) {
  .lil-gui {
    --widget-height: 28px;
    --row-height: 44px;
    --font-size: 14px;
    --input-font-size: 15px;
  }

  /* At 44px rows a full panel is taller than a phone. Cap it and let it
     scroll itself: `pan-y` so a drag scrolls the PANEL rather than panning
     the page (lil-gui's own `manipulation` would allow the latter), and
     `contain` so reaching the end of the panel does not chain the scroll
     outward. Without overflow-y the cap would simply clip the last rows. */
  .lil-gui.lil-root {
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* The slider thumb is the hardest thing on a GUI panel to hit. */
  .lil-gui .slider {
    height: 28px;
  }
}