/* Phone behaviour that should feel like an installed app: the page never
   zooms, nothing resizes under a finger, and switching tabs does not flash.
   Loaded after every other stylesheet so equal-specificity rules here win. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* A second tap in the same spot must be two taps, not a zoom. */
html,
body,
a,
button,
label,
summary,
select,
input,
textarea,
[role="button"] {
  touch-action: manipulation;
}

/* A long press on a tab icon or a link must not open the system preview. */
a,
img {
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
}

/* The chrome is controls, not text: it is never selected by a stray drag. */
.mobar,
.dock,
.lang,
button {
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 899px) {
  /* The browser zooms into any field set below 16px when it takes focus,
     and that zoom is what makes the whole page jump. */
  #composer-input,
  .place-input,
  .classic-route .place-input,
  .desk-classic .picker-date-input,
  .party-age-select {
    font-size: max(16px, 1rem);
  }

  /* A tab opens with a short fade instead of a hard swap. Opacity only:
     nothing moves, so nothing can jump. The home page has its own entrance. */
  .view.is-active:not(#view-home) {
    animation: view-settle 0.18s ease-out both;
    overscroll-behavior-y: contain;
  }

  .dock-item {
    transition: color 0.15s ease, opacity 0.12s ease;
  }

  /* Pressed state is a dim, never a scale. */
  .dock-item:active {
    opacity: 0.55;
  }
}

@keyframes view-settle {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .view.is-active:not(#view-home) { animation: none; }
}