/* ==========================================================================
   Planet Proctor -- responsive rescue layer for the original issue pages.
   Loaded alongside each issue's own stylesheet. It only relaxes the fixed
   table widths so the 1996-2008 pages read on a phone; colours and markup
   are left exactly as they were.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; max-width: 100%; }

body { margin: 0; padding: 0; max-width: 100%; }

/* Same iOS status-bar fix as the main site: keep the strip behind the status
   bar black rather than letting Safari sample the page. No-op without a notch. */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #000;
  z-index: 300;
  pointer-events: none;
}

/* the old pages set width="747" / width="1224" on cells -- let them flow */
table { max-width: 100% !important; }
table[width="100%"], table[width="99%"] { width: 100% !important; }

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

/* a small way back to the archive, injected by the builder */
.pp-backbar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  background: #008080;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  margin: 0;
}
.pp-backbar a { color: #fff !important; text-decoration: none; font-weight: bold; }
.pp-backbar a:hover { color: #FFFF99 !important; }

/* --------------------------------------------------------------------------
   Phones. These pages nest fixed-width tables several deep, so the layout has
   to be unwound rather than merely capped.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

  /* 1. Unwind the table layout. A table with width:auto is sized by its
        min-content, which no max-width can pull below, so the table box itself
        has to stop being a table. */
  table, thead, tbody, tfoot, tr, td, th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2. Nothing may impose a floor wider than the screen. Flex/grid/table
        descendants default to min-width:auto, which silently reintroduces the
        overflow this rule set just removed. */
  * { min-width: 0 !important; }

  /* 3. Let long words actually break. This is the load-bearing line:
        `overflow-wrap: break-word` breaks text only after the box has been
        sized, so it never shrinks min-content and the box stays too wide.
        `anywhere` is the variant that does reduce min-content -- which is what
        lets a long URL in a 2002 issue wrap instead of stretching the page. */
  body, p, li, td, th, div, span, blockquote, pre,
  h1, h2, h3, h4, h5, h6, a, b, i, font {
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  /* pre and nobr opt out of wrapping entirely -- override both */
  pre { white-space: pre-wrap !important; }
  nobr { white-space: normal !important; }

  /* 4. Readable body copy without changing the desktop look */
  body { font-size: 16px !important; }
  p, li, td { font-size: 15px !important; line-height: 1.65 !important; }
  p.cmBody { padding-left: 12px !important; padding-right: 12px !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }
  h4 { font-size: 16px !important; }
  h5 { font-size: 15px !important; }
  hr { width: 85% !important; }

  /* the second teal bar in a two-cell header row is decorative filler */
  td[bgcolor="teal"] + td[bgcolor="teal"] { display: none !important; }

  /* 5. Once a <td> is a block, the margins of the <p> inside it are no longer
        contained by a table cell -- they collapse straight through, so the
        cell's cream background stops short and the black page background shows
        as a band between every section. A hairline of padding re-establishes
        the containing block. */
  td, th { padding-top: 1px !important; padding-bottom: 1px !important; }
  td > p:first-child, th > p:first-child { margin-top: 0 !important; }
  td > p:last-child,  th > p:last-child  { margin-bottom: 0 !important; }

  /* 6. Word pastes negative horizontal margins (margin-right:-22.5pt) straight
        into the style attribute. A negative margin makes the block wider than
        its container by definition, so no max-width can rein it in -- it has to
        be zeroed. */
  [style*="margin-right:-"], [style*="margin-left:-"],
  [style*="margin-right: -"], [style*="margin-left: -"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Word-pasted issues size their tables to the image, so a percentage cap
     resolves against a box that is already too wide -- measure the viewport. */
  img { max-width: calc(100vw - 16px) !important; height: auto !important; }

  /* the 1996-97 issues put copy straight in <body> with no table padding */
  body > p, body > h1, body > h2, body > h3,
  body > h4, body > h5, body > h6, body > ul, body > ol, body > center {
    padding-left: 12px;
    padding-right: 12px;
  }
  .pp-backbar { padding-left: 12px; padding-right: 12px; }
}