/* PWA: mobile polish. Used with js/pwa.js. */

/* ---------- Mobile polish ---------- */

/* No double-tap zoom anywhere in the app. base.css only covers .pressable, and WebKit resets
   touch-action at every scroll container, so it's set per element. :where() keeps the
   specificity at zero, so any screen's own touch-action (e.g. none on a drag area) wins. */
:where(#device, #device *) {
  touch-action: manipulation;
}

/* Long-pressing a button (e.g. a template card) shouldn't open iOS's image/link preview. */
:where(#device) :where(button, [role='button']) {
  -webkit-touch-callout: none;
}

/* 100dvh fallback (iOS < 15.4): pwa.js sets --vh from innerHeight only when dvh is unsupported. */
@supports not (height: 100dvh) {
  #stage {
    min-height: calc(var(--vh, 1vh) * 100);
  }
  #device {
    height: calc(var(--vh, 1vh) * 100);
  }
  @media (min-width: 760px) and (min-height: 720px) {
    #device {
      height: min(874px, calc(var(--vh, 1vh) * 100 - 48px));
    }
  }
}