#site_content > main {
  display: contents;
}

/* Tables in /app/ can have more columns than fit on a phone — wrap them
   in <div class="table-wrap"> and let the wrapper scroll horizontally
   without breaking the table's layout. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  /* black_white's #site_content is a flex row with a fixed-width sidebar.
     On narrow screens, stack the sidebar below the content. */
  #site_content {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    padding: 20px 15px 0 15px;
  }

  /* Reduce the chrome height — the 202px fixed header eats most of a phone
     viewport. Let logo + tagline + menu flow naturally instead. */
  #header {
    height: auto;
  }
  #logo {
    height: auto;
    position: static;
    border-bottom: 0;
    padding-bottom: 8px;
  }
  #logo #logo_text {
    position: static;
  }
  #logo h1 {
    padding-top: 0;
  }
  #menubar {
    height: auto;
  }
  ul#menu, ul#menu li, ul#menu li a {
    float: none;
  }
  ul#menu li a {
    margin: 4px 0;
    padding: 8px 12px;
  }

  /* Footer's fixed 898px width is wider than any phone. */
  #footer {
    width: auto;
  }
}