/* dayrow1112: project-page Final details day rows (pre-existing on live).
   Problem: the day row (data-fdu31row=row) is a single nowrap flex line at >600px, and the day chip
   button (data-fdu31row=open) lets its pill shrink under the status text ("No one booked"). The pill
   paints its overflow, so the chip text/icons sit on top of the status, and the Booking sheet control
   (data-fdu31row=right) overlaps or clips against the chip/status. At 390 the status gets flex-basis:100%
   inside a nowrap button, which squeezes the pill to ~150px and the same overlap appears.
   Fix: wrap at both levels, never shrink the chip or the Booking sheet control, leave a gap.
   Not touched: the pill date text (pdate), bsday1112, bsmenu1112, colours, sizes, the 1280 single line. */
html:root body [data-fdu31row="list"] [data-fdu31row="row"] {
  flex-wrap: wrap !important; row-gap: 4px !important;
}
html:root body [data-fdu31row="list"] [data-fdu31row="row"] > [data-fdu31row="open"] {
  flex-wrap: wrap !important; row-gap: 2px !important; column-gap: 8px !important;
  min-width: 0 !important; max-width: 100% !important; height: auto !important;
}
html:root body [data-fdu31row="list"] [data-fdu31row="open"] > [data-fdu31row="pill"] {
  flex: 0 0 auto !important; max-width: 100% !important;
}
html:root body [data-fdu31row="list"] [data-fdu31row="open"] > [data-fdu31row="st"] {
  flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important;
}
html:root body [data-fdu31row="list"] [data-fdu31row="row"] > [data-fdu31row="right"] {
  flex: 0 0 auto !important; min-width: 0 !important; max-width: 100% !important;
}
html:root body [data-fdu31row="list"] [data-fdu31row="right"] > * { flex-shrink: 0 !important; }