/* Phone fixes (≤900px, the layout's phone breakpoint) for views the redesign has not reached yet, so that
   with new_ui on no page scrolls sideways on a phone. When a view gets its own
   css/new-ui/<view>.css, its lines here move there or go away. The browser
   smoke test fails if any view is wider than a 375px screen. */
@media (max-width: 900px) {
  /* Dashboard, run history: date and chips get the full width on top, the
     number and the buttons sit on one line underneath. */
  body.new-ui .brand-row { gap: 8px 12px; }
  body.new-ui .brand-row > div:first-child { grid-column: 1 / -1; }
  body.new-ui .brand-row .bmeta { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  body.new-ui .brand-row .bviz { text-align: left; }
  /* Competitors table (Dashboard and Competitors): the name column gives way
     instead of the numbers pushing past the screen. */
  body.new-ui .row.cols5 { grid-template-columns: minmax(0, 1fr) 0 48px 56px 48px; gap: 8px; }
  body.new-ui .row.cols5 > * { min-width: 0; }
  body.new-ui .row.cols5 .name { justify-content: flex-start; white-space: normal; }
  body.new-ui .row.cols5 .track { visibility: hidden; }
  /* Annotations: date, title and note stack. */
  body.new-ui .ann-grid { grid-template-columns: minmax(0, 1fr); }
  body.new-ui .ann-grid > * { grid-column: auto; min-width: 0; }
  /* Annotations timeline: the title gets its own line above type and date. */
  body.new-ui .ann-head { flex-wrap: wrap; }
  body.new-ui .ann-head strong { flex-basis: 100%; }
  /* Team: the invite row wraps its button. */
  body.new-ui #teamBody .prompt-add { flex-wrap: wrap; }
}