/* Results tables on a phone.
 *
 * Everything here is inside one media query, so a laptop sees none of it.
 * Verified at 1280px: with this stylesheet loaded the tables are the same
 * width, in the same layout, as without it.
 *
 * The problem being solved: a finisher list is twelve columns wide. At 390px
 * the table came out 746px, so two thirds of the page hung off the right and
 * the whole document scrolled sideways -- headers, links and all -- while the
 * columns stayed too narrow to read.
 *
 * The fix is to let the table scroll by itself instead of dragging the page
 * with it. `display:block` on the table makes it its own scroll box; the rows
 * inside still lay out as a table. Everything around it then sits still and
 * only the results swipe.
 *
 * 700px rather than a phone-exact number: a narrow window on a laptop has the
 * same problem and deserves the same answer.
 */

@media (max-width: 700px) {

  /* The table becomes its own scroll box. white-space:nowrap keeps a time or
   * a name from wrapping into two lines, which is what makes a squeezed table
   * unreadable rather than merely wide. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px;
  }

  /* Desktop padding is most of the width in a twelve-column table. */
  th, td {
    padding: 2px 4px !important;
  }

  /* tablesorter's column-resizing widget builds a container sized to the
   * table's full desktop width and positions it over the page, so it kept the
   * document 368px too wide on its own even once the table itself fitted.
   * Dragging column borders is a mouse thing; there is nothing to lose here.
   * The sticky header clone goes for the same reason -- it cannot stay aligned
   * with a table that scrolls independently underneath it. */
  .tablesorter-resizable-container,
  .tablesorter-sticky-wrapper {
    display: none !important;
  }
}