/*
 * pwa-mobile.css — mobile-first safe defaults.
 * WHY: loaded LAST (injected before </head>) so it gently reinforces mobile
 * behaviour on top of Bootstrap without redesigning any page. Intentionally
 * minimal and non-destructive — it only prevents the common mobile breakages
 * (horizontal overflow, oversized media, tiny inputs) that make a desktop layout
 * feel broken on a phone.
 */

/* Consistent sizing so padding/borders never push elements past the viewport. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Media never overflows its container. */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* Long strings / code wrap instead of forcing a horizontal scrollbar. */
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Kill accidental horizontal scroll caused by stray wide elements. */
body { overflow-x: hidden; }

/* Wide tables scroll inside themselves rather than stretching the page. */
table { max-width: 100%; }

@media (max-width: 576px) {
  /* 16px base keeps text readable and stops iOS from zooming on input focus. */
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  /* Comfortable side gutters on small screens. */
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
}