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

/* Prevent any stray wide element from forcing the whole page to
   scroll/zoom horizontally on narrow screens. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, table, canvas, svg {
  max-width: 100%;
}

/* The actual zoom-on-focus fix. Scoped to mobile widths only, so
   desktop typography/spacing is untouched. !important is needed
   because several page-specific stylesheets set input font-size
   with higher-specificity selectors (e.g. ".auth-form input"). */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL MOBILE FIXES — wide data tables
   On phones, multi-column tables scroll horizontally inside
   their own box instead of pushing the whole page right.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pl-table,
  .history-table,
  .breakdown-table,
  .txn-table,
  .sub-history-table,
  .dir-table,
  .sc-table,
  .ti-analysis-table,
  .ge-elig-table,
  .za-table,
  .remaining-table,
  .mt-lb-table {
    /* !important because page stylesheets load after this file and
       some (e.g. .pl-table) set overflow: hidden for border-radius */
    display: block;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Compact, single-line cells for short data tables so rows
     scroll sideways instead of crushing into tall stacks.
     (Tables with long prose cells are deliberately excluded.) */
  .pl-table th, .pl-table td,
  .history-table th, .history-table td,
  .txn-table th, .txn-table td,
  .sub-history-table th, .sub-history-table td,
  .dir-table th, .dir-table td,
  .za-table th, .za-table td,
  .remaining-table th, .remaining-table td,
  .mt-lb-table th, .mt-lb-table td {
    white-space: nowrap;
  }
}