/* Universal mobile safety net, loaded last (after each page's own stylesheet)
   from base.html so these rules win cascade ties without !important.
   Page-specific overflow bugs still get fixed directly in their own
   stylesheet where possible — this file is the catch-all, not a substitute
   for that. */

img {
  max-width: 100%;
  height: auto;
}

/* Every page's sidebar is a bare 250px today — this caps it so it never
   crowds a narrow phone screen (< ~294px viewport). */
.sidebar {
  width: min(250px, 85vw);
  box-sizing: border-box;
}

/* Generic safety net for any table that isn't already wrapped in a
   .table-container { overflow-x: auto } pattern. */
table {
  max-width: 100%;
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  main {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }
}