/* mikeypools / shared mobile.css
 * Single drop-in stylesheet every Pool Town page includes. Fixes the
 * common iOS / iPhone Safari pitfalls so we don't have to repeat them.
 * Loaded with: <link rel="stylesheet" href="/src/mobile.css">
 */

/* ----- Viewport hygiene -----
 * 100vh on iOS includes the URL bar height which collapses on scroll
 * and causes sudden layout jumps. dvh / svh / lvh are well-supported
 * in iOS 15.4+. Pages should prefer 100dvh; this is a fallback.
 */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* ----- Prevent iOS Safari from auto-zooming on input focus -----
 * iOS zooms in if any focused input has font-size < 16px. Force 16px
 * (or 17px) on all interactive form controls. Pages can still style
 * the *display* font-size via classes; this only sets a baseline.
 */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ----- Tap targets -----
 * iOS HIG calls for 44 × 44 minimum tappable area. Buttons / links
 * already styled with explicit padding usually pass; this safety-net
 * adds bottom-padding on phones so anything in tight rows still works.
 */
@media (max-width: 768px) and (pointer: coarse) {
  button,
  [role="button"],
  a.btn,
  .tool-nav-link,
  input[type="submit"],
  input[type="button"] {
    min-height: 40px;
  }
}

/* ----- Touch behavior -----
 * `touch-action: manipulation` removes the 300ms tap delay iOS Safari
 * applies to detect double-tap-zoom — UI feels snappier. Also disables
 * pull-to-refresh on the main app surface.
 */
html, body {
  touch-action: manipulation;
  /* Stop iOS rubber-band overscroll on app pages — they're meant to
     feel like a fixed app, not a scrolled webpage. Pages that NEED
     scroll override this on their main content container. */
  overscroll-behavior: none;
}

/* ----- Momentum scrolling on iOS -----
 * Any element with overflow: auto / scroll on iOS gets choppy without
 * `-webkit-overflow-scrolling: touch`. This applies it broadly.
 */
[class*="scroll"],
.panel,
aside,
main,
.modal-card,
#canvas-frame {
  -webkit-overflow-scrolling: touch;
}

/* ----- Safe-area-inset support for notch/dynamic island -----
 * Top bars on every Pool Town page should respect the notch.
 */
.topbar {
  padding-top:    max(0px, var(--safe-top));
  padding-left:   max(0px, var(--safe-left));
  padding-right:  max(0px, var(--safe-right));
}

/* ----- Disable text selection on chrome/buttons -----
 * Long-press on a button shouldn't pop the iOS text-select callout.
 */
button,
.tool-nav,
.zoom-bar,
.modes,
.brand,
.topbar h1,
.vp-label {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ----- Image / canvas drag default -----
 * Stop iOS from popping a "Save Image" callout when long-pressing the
 * 3D / survey canvas. Pages that NEED touch dragging on canvas have
 * pointer-event handlers; this just kills the long-press menu.
 */
canvas,
img.no-touch-callout,
.no-touch-callout {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

/* ----- Form-input cosmetics on iOS -----
 * Round corners get squashed to 0; remove default iOS shadow. */
input, textarea, select, button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: inherit;
}

/* ----- Phone breakpoint utilities -----
 * Pages opt in by using these classes for element-level mobile show/hide.
 */
.mobile-only { display: none !important; }
.desktop-only { }
@media (max-width: 600px) {
  .mobile-only { display: initial !important; }
  .desktop-only { display: none !important; }
}

/* ----- Generic body/main mobile reset -----
 * On phones, a lot of fixed-position panels need to become bottom
 * sheets / overlays. Pages can opt in by adding [data-mobile-stack]
 * to the panel container; we'll stack children vertically.
 */
@media (max-width: 600px) {
  [data-mobile-stack] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-mobile-stack] > * {
    width: 100% !important;
  }
}