/*
 * Not part of the design files: two gaps in them, filled until the designer
 * closes them. panel.css itself is served exactly as delivered.
 *
 * 1. The design notes (phase B) say the rail turns into a bar across the top
 *    at 860px and below. panel.css makes the grid a single column there but
 *    leaves .main in column 2, so the grid grows an implicit column and the
 *    whole page sits in a strip beside a 56px rail; the designer's own
 *    phase-b-queue.html does the same at that width. The rail, at full width,
 *    also keeps its 24px side margin and pushes the page past the screen.
 *    Putting .main back in the one column and letting the bar fit is the
 *    documented intent, nothing more.
 *
 * 2. Below about 640px a few rows are wider than a phone's screen (the filter
 *    pills, a row of two long buttons, a heading with its figures), and the
 *    page then scrolls sideways. These rules only let those rows wrap, or
 *    scroll inside themselves.
 *
 * Delete this file when the design has a phone layout of its own.
 */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .main { grid-column: 1; }
  .rail { width: auto; margin: var(--s-4) var(--s-4) 0; }
}

@media (max-width: 640px) {
  .topbar__tools { max-width: 100%; min-width: 0; }
  .pills { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .queue-item__actions,
  .batch-row__actions,
  .sheet__actions,
  .section-head h2 { flex-wrap: wrap; }
  .rule-box__list > span { flex-wrap: wrap; row-gap: 0; }
}