/*
 * mobile.css — shared base fixes for phone browsers. Linked on every page.
 * Keep this lean and universal; page-specific responsive rules stay in the page.
 * See docs/architecture.md → "Frontend Layout & Responsive Nav".
 */
/* Wide data tables scroll horizontally inside their own box instead of
   stretching the whole page sideways on a phone. Harmless on desktop (only
   scrolls when the table is actually wider than its container). */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* iOS Safari auto-zooms the whole page whenever a focused form field renders
     below 16px. Almost every form here uses ~0.85–0.95rem, so tapping any field
     zoomed the page and shifted the layout. Force a 16px minimum on mobile. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Pricing plans (company.html, company-upgrade.html) are a 3-column grid that
     crushed three cards side-by-side on a phone — stack them instead. */
  .plans {
    grid-template-columns: 1fr !important;
  }
}