/* ============================================================================
   bays.css — « L’atelier, par baie » on a phone (2.9, D12).

   The wallboard is designed for a television; on a 390 px phone the seven
   KPI tiles were forced into four columns (floor.css wins over the generic
   620 px rule in components.css) and the rows below could not wrap. Loaded
   after floor.css, so the selectors below only need to match its weight.
   ========================================================================== */

@media (max-width: 620px) {
  .bays .wall__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; margin-bottom: .9em; }
  .bays .wall__stat { padding: .75em .85em; border-radius: .9em; }
  .bays .wall__stat b { font-size: 1.75em; white-space: nowrap; }
  .bays .wall__stat span { font-size: .78em; }
  .bays .wall__main { padding: 12px 16px 16px; }
  .bays .bays__grid { gap: .7em; margin: .6em 0 .9em; }
  .bays .bay { min-height: 0; padding: .8em .9em .9em; }
  .bays .bays__below { grid-template-columns: minmax(0, 1fr); gap: .7em; }
  .bays .wall__panel { padding: .9em 1em; }
  /* One row per work order can wrap: number + unit + pill on the first line, the title under them. */
  .bays .bays__row { flex-wrap: wrap; gap: .35em .6em; }
  .bays .bays__row .wall__wotitle { flex: 1 1 100%; order: 9; white-space: normal; font-size: .9em; }
  .bays .bays__row .wall__wotitle i { display: block; margin-left: 0; }
  .bays .bays__row .wall__pill, .bays .bays__row .bays__put { margin-left: auto; }
  .bays .wall__foot { padding: .45em 16px; font-size: 11px; }
}

@media (max-width: 400px) {
  .bays .wall__stat b { font-size: 1.55em; }
  .bays .wall__stat span { font-size: .74em; }
}