/* VIBES: small screens. Everything here is inside one media query, so a desktop page looks exactly as it did.
   Bigger type, nothing wider than the phone, finger-sized links. No outside resources. */
.mnav { display: none; }
@media screen and (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 10px 12px; font-size: 17px; line-height: 1.5; overflow-wrap: break-word; word-wrap: break-word; }
  font[size="1"] { font-size: 14px; line-height: 1.45; }
  font[size="2"], font[size="-1"] { font-size: 1rem; }
  font[size="3"] { font-size: 17px; }
  font[size="4"] { font-size: 19px; }
  font[size="5"], font[size="+1"] { font-size: 22px; line-height: 1.25; }
  font[size="6"], font[size="7"], font[size="+2"] { font-size: 26px; line-height: 1.2; }
  table { max-width: 100%; }
  table[width] { width: 100% !important; }
  td[width], th[width] { width: auto !important; }
  td, th { overflow-wrap: anywhere; }
  /* data tables (the ones with ruled borders) keep their columns and scroll sideways inside themselves */
  table[border="1"] { display: block; overflow-x: auto; width: auto !important; max-width: calc(100vw - 24px); -webkit-overflow-scrolling: touch; }
  table[border="1"] td, table[border="1"] th { overflow-wrap: normal; min-width: 4.5em; }
  table[align] { float: none !important; margin: 10px auto; width: auto !important; }
  img { max-width: 100%; height: auto; }
  img[align][width] { max-width: 48%; }
  canvas { max-width: 100%; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  blockquote { margin: 10px 4px 10px 14px; }
  marquee { width: 100%; }
  hr { max-width: 100%; }
  li { margin: 8px 0; }
  ul, ol, dl { padding-left: 22px; margin-left: 0; }
  dd { margin-left: 14px; }
  input, select, textarea, button { font-size: 1rem; min-height: 44px; min-width: 44px; }
  input[type="checkbox"] { min-height: 0; min-width: 0; width: 22px; height: 22px; vertical-align: middle; }
  label { display: inline-block; padding: 12px 0; }
  .home { display: inline-block; padding: 6px; }
  blockquote a, figcaption a { display: inline-block; padding: 12px 0; }
  /* the tour page: the view fills the width; the controls stack under it. The engine itself is not touched. */
  #view { width: calc(100vw - 34px) !important; max-width: calc(100vw - 34px) !important; height: auto; }
  #placard { font-size: 1rem !important; }
  .tctl, .tctl > tbody, .tctl > tbody > tr, .tctl > tbody > tr > td { display: block; width: auto !important; }
  .tctl > tbody > tr > td { text-align: center; }
  .tctl table { margin: 0 auto; }
  #spk { display: inline-block; padding: 10px 6px; }
  /* the button bar: three across, each a 44px target */
  .nav, .nav tbody, .nav tr { display: block; text-align: center; width: 100% !important; }
  .nav td { display: inline-block; padding: 2px; width: auto !important; }
  .nav a { display: inline-block; padding: 12px 0; }
  .nav img { width: 104px; height: auto; }
  .mnav { display: block; text-align: right; font-size: 1rem; }
  .mnav a { display: inline-block; padding: 12px 4px; min-width: 44px; }
  /* lists of links and table cells that hold only a link get a taller hit area */
  li > a:first-child:last-child, td > a:first-child:last-child, td > font > a:first-child:last-child { display: inline-block; padding: 12px 0; }
  /* source lines under entries: room to tap */
  dd > font > a, dd > a, td > font > a { display: inline-block; padding: 12px 0; }
  blockquote a, figcaption a, label, .nav a, dd > font > a, dd > a, td > font > a,
  li > a:first-child:last-child, td > a:first-child:last-child { min-height: 44px; min-width: 44px; box-sizing: border-box; text-align: center; }
}