/* Responsive layout fixes for table-based pages */

/* Stop horizontal overflow on all screens */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Images never exceed their container */
img {
  max-width: 100%;
  height: auto;
}

/* On mobile: unset fixed widths so tables can reflow */
@media screen and (max-width: 700px) {
  table {
    width: 100% !important;
    max-width: 100% !important;
  }
  td, th {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* Stack multi-column tables vertically */
  table, tbody, tr, td, th {
    display: block !important;
  }
  /* Restore table-like rows so borders/backgrounds still show */
  tr {
    margin-bottom: 4px;
  }
  /* Inline-navigation rows: keep side-by-side if they're narrow */
  td[width="33"], td[width="4"], td[width="6"],
  td[width="1"], td[width="2"], td[width="3"] {
    display: none !important; /* spacer cells — hide on mobile */
  }

  /* Reset large fixed indentation from desktop column layouts.
     margin-left values of 100-400px were sized for 900px desktop columns;
     on a 375px phone they crush text into a narrow strip. */
  p, h1, h2, h3, h4, h5, h6, li, blockquote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-indent: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}