@media (max-width: 820px) {
  /* The page shell is one 2-column table whose first cell is width="600".
     Stack it; a single column is the whole layout on a phone. */
  /* `table:not(table table)` is the OUTER shell only — a table with no table
     ancestor. The previous `body table` matched nested tables too, and worse,
     `body table > tbody > tr > td[width]` (specificity 0,1,5) out-ranked the
     nested-table restore below (0,0,5), so any data cell carrying a width
     attribute was forced to width:100% and its table misshapen. A width-only
     harness cannot see that; the page is still 390px wide while the table
     inside it is wrong. */
  table:not(table table),
  table:not(table table) > tbody,
  table:not(table table) > tbody > tr,
  table:not(table table) > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    /* border-box, or the cell's own inline padding (27px left, 7px right on
       this site) is ADDED to the 100% and puts it 34px over the viewport. */
    box-sizing: border-box;
  }
  table:not(table table) > tbody > tr > td[width] { width: 100% !important; }

  /* Form/data tables nested inside keep real table semantics and scroll if
     they genuinely cannot reflow. */
  table table { display: block; overflow-x: auto; }
  table table > tbody { display: table-row-group; }
  table table > tbody > tr { display: table-row; }
  table table > tbody > tr > td,
  table table > tbody > tr > th { display: table-cell; width: auto !important; }

  /* A <select> sizes itself to its widest option — the country list here is
     436px wide on its own. */
  select, input, textarea { max-width: 100%; box-sizing: border-box; }
  /* A text input sizes itself from its `size` attribute, and that intrinsic
     width propagates up as a min-content floor no percentage max-width can
     beat. An explicit width overrides the attribute-derived size. */
  input[type="text"], input[type="search"], input:not([type]) { width: 100%; }

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