/* ============================================================================
   board.css — « Tableau de l’atelier » on a phone (2.9, D12).

   Status pills in the work-order and people rows ran past the right edge at
   390 px because every row is a single non-wrapping flex line. Below 480 px
   the rows wrap instead: identifiers and pills on the first line, the title
   on its own line underneath. Loaded after components.css.
   ========================================================================== */

@media (max-width: 480px) {
  .wall__main { padding: 12px 14px; font-size: 14px; }
  .wall__stats { gap: .6em; }
  .wall__stat { padding: .75em .85em; border-radius: .9em; }
  .wall__stat b { font-size: 1.75em; white-space: nowrap; }
  .wall__stat span { font-size: .78em; }
  .wall__panel { padding: .9em 1em; }
  .wall__panel h2 { font-size: .74em; }

  .wall__wo, .wall__pm li { flex-wrap: wrap; gap: .35em .6em; padding: .55em .7em; }
  .wall__wo .wall__wotitle, .wall__pm li .wall__wotitle { flex: 1 1 100%; order: 9; white-space: normal; font-size: .9em; }
  .wall__wo .wall__wotitle i { display: block; margin-left: 0; }
  .wall__wo .wall__pill, .wall__pm li .wall__pill { margin-left: auto; }
  .wall__wounit { min-width: 0; }
  .wall__pill { font-size: .7em; padding: .2em .55em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .wall__person { flex-wrap: wrap; gap: .5em .8em; padding: .7em .8em; }
  .wall__who { flex: 1 1 12em; }
  .wall__job { white-space: normal; }
  .wall__timer { text-align: right; margin-left: auto; }
  .wall__timer b { font-size: 1.2em; }
  .wall__people { grid-template-columns: minmax(0, 1fr); }
  .wall__bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__foot { padding: .45em 14px; font-size: 11px; flex-wrap: wrap; gap: 4px 12px; }
}