/* ============ PWA mobile layer — SPEC_pwa_mobile_app.md phase 2 v1 (2026-07-27) ============
   ONE central file, injected into EVERY text/html page by the dashboard middleware, on top of
   the existing design tokens. Desktop is untouched: everything lives behind max-width queries.
   Keep this the ONLY responsive file — page-local tweaks go here, not into per-page <style>. */

@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* 16px stops iOS Safari's auto-zoom on focus; 44px = Apple HIG touch target */
  input:not([type=checkbox]):not([type=radio]), select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  button { min-height: 44px; }

  /* density: cards/tiles breathe less on a phone */
  .card { padding: 12px; }
  .tile { padding: 10px 12px; }
  .tile .v { font-size: 21px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }

  /* wide tables scroll inside their own box instead of blowing up the page width */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* long tokens (emails, SKUs, URLs) must wrap, not push the layout */
  .ltr, .bidi, td, .muted { overflow-wrap: anywhere; }

  /* full-width primary actions inside cards feel native on phones */
  .card .btn-ok, .card .btn-danger { padding: 12px 16px; }
}

@media (max-width: 400px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .card { padding: 10px; }
}