/* ══════════════════════════════════════════════════════════════════════
   TOUCH  ·  Renti / Inteligencia Territorial
   Makes a WebView feel indistinguishable from a native app.
   Designed to be imported globally (via global.css) so it covers
   every page without each page remembering to link it.

   Import order: tokens.css must load first (vars are consumed here).
══════════════════════════════════════════════════════════════════════ */

/* ── 1. Kill the tap flash ─────────────────────────────────────────────
   Browsers and Android WebViews flash a semi-transparent highlight
   rectangle on every tap. Native apps never do this. Remove it
   everywhere, then restore a tasteful :active state of our own
   further down. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── 2. Font rendering — match native subpixel behaviour ───────────── */
body {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 3. Prevent text selection during drag / pan ───────────────────────
   The map canvas must be drag-friendly; stray selection breaks
   the gesture. Inputs and editable nodes opt back in below. */
html {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* ── 4. Prevent the long-press callout on images and canvas ────────── */
img,
canvas,
video {
  -webkit-touch-callout: none;
}

/* ── 5. Overscroll / bounce control ────────────────────────────────────
   `overscroll-behavior: none` on html/body kills the pull-to-refresh
   gesture and the elastic bounce that reveals the background behind
   the WebView — both are dead giveaways of a web wrapper.
   Individual scrollable containers get `contain` so they still bounce
   inside themselves (iOS scroll-to-edge feedback) without propagating. */
html,
body {
  overscroll-behavior: none;
}

/* ── 7. Touch-action on canvas surfaces ────────────────────────────────
   MapLibre owns every pointer event on its canvas.
   Telling the browser `touch-action: none` stops it from stealing
   panning gestures for scrolling, which would cause dropped frames
   and janky map interaction. */
#map {
  touch-action: none;
}

/* ── 9. Press / active states ──────────────────────────────────────────
   Native buttons give immediate visual feedback on press via a slight
   dim + scale. CSS `:active` fires on touch with no latency; we just
   need to make the change visible.

   Scale is intentionally small (0.96) — enough to feel responsive
   without looking broken. Elements that shouldn't shrink (full-width
   buttons) use opacity-only via the override below. */
button:active,
[role="button"]:active,
a:active {
  opacity: 0.75;
}

/* ── 10. iOS input-zoom fix ────────────────────────────────────────────
   iOS Safari zooms the viewport whenever a focused input has
   font-size < 16px. `max(16px, 1em)` satisfies the threshold while
   letting larger designs stay larger. The meta viewport tag
   (`user-scalable=no`) is the nuclear option and breaks accessibility;
   this fix is the safe alternative. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-size: max(16px, 1em);
}

/* ── 12. Disable link underlines inside the app ────────────────────────
   Native apps don't underline tappable areas. */
a {
  text-decoration: none;
}

/* ── 13. Cursor: default inside app (no I-beam on hover) ───────────── */
body {
  cursor: default;
}