/* Work orders — page layout only: the toolbar row, the pick column, column minimums and the CSS-counted selection
   summary (orders, items and pcs short from the checked boxes, in CSS, no round trip). */
@layer page {
  .wl-toolbar { margin-bottom: var(--s4); }
  .wl-search { width: 320px; max-width: 100%; }
  .wl-table td.wo-pick { width: 52px; padding: 0; }
  .wo-pick label { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; min-height: 52px; cursor: pointer; }
  .wo-pick input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
  .wl-table td.wo-order { min-width: 270px; }
  .wl-table td.wo-owner { min-width: 160px; }
  .wo-due { display: block; font-size: var(--t-cap); font-weight: 600; color: var(--text-3); }
  .wo-due[data-tone] { color: var(--tone-fg); }
  /* Demand on a phone: the order and its state, then where it goes beside when it is due, then its lines. */
  @container table (max-width: 640px) {
    .wl-table td.wo-when { grid-column: 2; grid-row: 2; text-align: end; }
    .wl-table td.wo-src { grid-column: 1; grid-row: 2; }
    .wl-table td.wo-lines { grid-row: 3; }
  }

  @counter-style wl-orders { system: cyclic; symbols: 'orders'; }
  @counter-style wl-order { system: fixed 1; symbols: 'order'; fallback: wl-orders; }
  .wl-list { counter-reset: wl-n wl-items wl-short; }
  .wl-list .wo-pick input:checked { counter-increment: wl-n 1 wl-items var(--items) wl-short var(--short); }
  .wl-n::after { content: counter(wl-n); }
  .wl-items::after { content: counter(wl-items); }
  .wl-short::after { content: counter(wl-short); }
  .wl-nw::after { content: counter(wl-n, wl-order); }
  .wl-short-pcs::after { content: 'None'; }
  .wl-list:has(.wo-pick input[data-short]:checked) .wl-short-pcs::after { content: counter(wl-short) ' pcs'; }
  .wl-bulk { display: none; }
  .wl-list:has(.wo-pick input:checked) .wl-bulk { display: flex; }
}