/* Layout below the artboard width. The screens were drawn at 1240px with
   fixed side rails (180px people rail, 250px feed); on a phone those rails
   eat the whole width and the shelf gets 0px. Inline styles win the cascade,
   so the overrides carry !important; each selector matches only a page's
   top-level grid or header bar, never the cards inside. The runtime
   re-serializes inline styles ("display: grid"), so selectors key on the
   property name only. */

/* three-column meadow: one column, shelf first */
@media (max-width: 900px) {
  [data-screen-label="Git Meadow"] > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen-label="Git Meadow"] > div[style*="grid-template-columns"] > :nth-child(2) {
    order: -1;
  }
}

/* two-column pages (repo, file, diff, compare, branches): one column;
   header bars wrap instead of running off the right edge */
@media (max-width: 700px) {
  [data-screen-label] > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen-label] > div:first-child {
    flex-wrap: wrap;
  }
}