/* ============================================================
   Mythstep — PWA / mobile polish
   Loaded on every page via includes/pwa_head.php. Complements the
   responsive rules already in app.css; focuses on the installed-app
   feel (safe areas, tap targets, no iOS zoom-jank).
   ============================================================ */

: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);
}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -webkit-tap-highlight-color:rgba(0,0,0,0); overscroll-behavior-y:none; }

/* When full-screen (viewport-fit=cover + translucent status bar), the sticky
   top bar must clear the notch / status bar. Padding lives INSIDE the bar so
   its background still reaches the screen edge. */
.topbar, .adminbar{
  padding-top: calc(10px + var(--safe-top));
  padding-left: max(14px, var(--safe-left));
  padding-right: max(14px, var(--safe-right));
}
/* Leave room for the home indicator at the very bottom of scroll areas. */
.public-main, .admin-main, .page, .content{
  padding-bottom: calc(64px + var(--safe-bottom));
}

/* Launched as an installed app */
@media (display-mode: standalone), (display-mode: fullscreen){
  a{ -webkit-touch-callout: none; }   /* no long-press link menu = more app-like */
}

/* Comfortable, un-janky touch on phones */
@media (max-width: 760px){
  .btn, .btn-ghost, .btn-primary, .ft-ctl, .fb-sm{ min-height:40px; }
  a, button, .btn, .btn-ghost, .btn-primary{ touch-action:manipulation; }
  /* 16px inputs stop iOS from zooming in when a field is focused */
  input, select, textarea{ font-size:16px; }
  /* keep any oversized media/diagrams inside the viewport */
  img, svg, pre, canvas{ max-width:100%; height:auto; }
}