/* Dev1 mobile readability — static so `next start` picks it up without a rebuild.
   Edit this file directly on the box; it applies on next page load, no build. */

/* ------------------------------------------------------------------ *
 * Layout / usability (phones + narrow WebView): up to 768px
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Kill horizontal page blow-out — the #1 "hard to use on mobile" cause.
     Content that legitimately needs width scrolls inside its own box (below). */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Desktop max-width containers shouldn't force a wider-than-screen canvas. */
  .max-w-6xl, .max-w-7xl, .max-w-5xl, .max-w-4xl {
    max-width: 100% !important;
  }

  /* Wide data tables: scroll horizontally within their container instead of
     pushing the whole page sideways. Applies to bare tables not already in a
     scroll wrapper. */
  main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Any explicit scroll container keeps its own scrollbar and never overflows. */
  main .overflow-x-auto, main .overflow-auto {
    max-width: 100%;
  }

  /* Trim the biggest desktop paddings so content isn't squeezed into a sliver. */
  main.p-8, main .p-8 { padding: 1rem !important; }
  main.p-6, main .p-6 { padding: 0.9rem !important; }

  /* Comfortable tap targets everywhere, not just chrome. */
  button, a[role="button"], [role="tab"], .cursor-pointer {
    min-height: 40px;
  }
}

/* ------------------------------------------------------------------ *
 * Readability (font sizing): up to 640px
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  html {
    font-size: 17px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body { line-height: 1.45; }

  .text-\[9px\], .text-\[10px\], .text-\[11px\],
  [class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[11px]"] {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .text-xs, [class*="text-xs"] {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .text-sm, [class~="text-sm"] {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS/Android zoom-on-focus */
  }
  /* Comfortable tap targets in chrome */
  header a, header button, aside a, aside button {
    min-height: 44px;
  }
}