/* Work orders: tickets hanging on the print shop's line. Screen prefix py-wo-. */
.py-screen.py-wo .py-wo-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 1fr); gap: var(--py-4); align-items: start; overflow-x: auto; padding-bottom: var(--py-4); scroll-snap-type: x proximity; }
.py-screen.py-wo .py-wo-col { display: grid; gap: var(--py-4); align-content: start; scroll-snap-align: start; position: relative; padding-top: var(--py-5); }
.py-screen.py-wo .py-wo-col::before { /* the line the tickets hang from */
  content: ""; position: absolute; inset: 1.2rem 0 auto 0; height: 2px; background: var(--py-ink-faint); border-radius: 2px;
}
.py-screen.py-wo .py-wo-col h2 { position: absolute; inset: 0 auto auto 0; font-size: var(--py-s--1); font-weight: 750; background: var(--py-paper); padding-inline-end: var(--py-2); color: var(--py-print); display: flex; gap: var(--py-2); align-items: baseline; }
.py-screen.py-wo .py-wo-col h2 b { font-variant-numeric: tabular-nums; color: var(--py-ink-soft); font-weight: 600; }
.py-screen.py-wo .py-ticket {
  position: relative; background: var(--py-rosa); border-radius: 3px; padding: var(--py-4) var(--py-4) var(--py-3);
  display: grid; gap: var(--py-2);
  box-shadow: 0 14px 22px -18px oklch(0.2 0.05 262 / 0.7);
  rotate: var(--py-sway, 0deg); transform-origin: 50% 0;
}
.py-screen.py-wo .py-ticket:nth-child(odd) { --py-sway: -0.8deg; }
.py-screen.py-wo .py-ticket:nth-child(even) { --py-sway: 0.7deg; }
.py-screen.py-wo .py-ticket::before { /* the clip */
  content: ""; position: absolute; inset: -0.95rem auto auto 50%; translate: -50% 0; width: 0.75rem; height: 1.6rem; border-radius: 3px;
  background: linear-gradient(90deg, oklch(0.62 0.03 70), oklch(0.72 0.03 70)); box-shadow: 0 1px 0 oklch(0 0 0 / 0.2);
}
.py-screen.py-wo .py-ticket:focus-within, .py-screen.py-wo .py-ticket:hover { rotate: 0deg; }
.py-screen.py-wo .py-ticket-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--py-2); }
.py-screen.py-wo .py-ticket-top .py-folio { font-size: var(--py-s-1); }
.py-screen.py-wo .py-ticket h3 { font-size: var(--py-s-0); font-weight: 700; line-height: 1.25; }
.py-screen.py-wo .py-ticket h3 small { display: block; font-weight: 500; color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-wo .py-ticket .py-wo-spec { --py-casl: 1; font-size: var(--py-s--1); line-height: 1.5; color: var(--py-ink); border-block: 1px dashed color-mix(in oklch, var(--py-ink) 25%, transparent); padding-block: var(--py-2); }
.py-screen.py-wo .py-ticket .py-wo-meta { display: flex; flex-wrap: wrap; gap: var(--py-1) var(--py-2); font-size: var(--py-s--1); }
.py-screen.py-wo .py-ticket .py-wo-money { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--py-2); font-size: var(--py-s--1); }
.py-screen.py-wo .py-ticket .py-wo-money b { display: block; font-variant-numeric: tabular-nums; font-size: var(--py-s-0); }
.py-screen.py-wo .py-ticket .py-btn { justify-self: start; }
.py-screen.py-wo .py-ticket--late { outline: 2px solid var(--py-danger); outline-offset: 2px; }
.py-screen.py-wo .py-ticket--ready { background: var(--py-verde); }
.py-screen.py-wo .py-wo-filters { display: flex; flex-wrap: wrap; gap: var(--py-2); align-items: center; }
@media (max-width: 47.99rem) { .py-screen.py-wo .py-wo-board { grid-auto-columns: minmax(16.5rem, 85vw); } }
.py-screen.py-wo .py-wo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-5); }
.py-screen.py-wo .py-wo-list .py-ticket + .py-ticket::before { display: none; }
.py-screen.py-wo .py-wo-list .py-ticket + .py-ticket { margin-top: calc(-1 * var(--py-2)); }
@media (min-width: 80rem) { .py-screen.py-wo .py-wo-board { overflow-x: visible; } }

/* ---------- What the product draws beyond the design ---------- */

/* In the ticket's language: an order's own page (the ticket as
   the pink copy, its work in sheets beside it) and the intake's and the edit's form. */
.py-screen.py-wo .py-wo-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--py-5); align-items: start; }
.py-screen.py-wo .py-wo-stack { display: grid; gap: var(--py-5); align-content: start; min-width: 0; }
.py-screen.py-wo .py-wo-panel { display: grid; gap: var(--py-3); align-content: start; min-width: 0; }
.py-screen.py-wo .py-wo-panel h2 { font-size: var(--py-s-1); font-weight: 720; }
.py-screen.py-wo .py-wo-panel h3 { font-size: var(--py-s-0); font-weight: 700; }
.py-screen.py-wo .py-wo-panel .py-facts { gap: var(--py-1) var(--py-3); }
.py-screen.py-wo .py-wo-panel .py-wo-spec { --py-casl: 1; font-weight: 500; }
.py-screen.py-wo .py-wo-acts { display: flex; flex-wrap: wrap; gap: var(--py-2); }
.py-screen.py-wo .py-wo-form { display: grid; gap: var(--py-3); align-content: start; }
.py-screen.py-wo .py-wo-form .py-btn { justify-self: start; }
.py-screen.py-wo .py-wo-form.py-alone { gap: var(--py-4); }
.py-screen.py-wo .py-wo-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-screen.py-wo .py-wo-tasks li { display: flex; flex-wrap: wrap; align-items: end; gap: var(--py-2) var(--py-3); padding-bottom: var(--py-2); border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-wo .py-wo-tasks li > span { flex: 1 1 12rem; align-self: center; }
.py-screen.py-wo .py-wo-tasks form { display: flex; align-items: end; gap: var(--py-2); }
.py-screen.py-wo .py-wo-log { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--py-1); font-size: var(--py-s--1); }
@media (max-width: 60rem) { .py-screen.py-wo .py-wo-page { grid-template-columns: minmax(0, 1fr); } }

/* ---------- As the person works (the board in place) ---------- */

/* A ticket's press dims it at once while it goes (the shell's `py-is-pending` on its form), and
   what refused it, or that it did not move, is said on it. */
.py-screen.py-wo .py-ticket:has(> form.py-is-pending) { opacity: 0.55; transition: none; }
.py-screen.py-wo .py-wo-said:empty { display: none; }
.py-screen.py-wo .py-wo-why { font-size: var(--py-s--1); font-weight: 650; color: var(--py-danger); }

/* The ticket that travels to its next column in the press's view transition (HTMX-320): one name,
   on the ticket pressed while its press is asked and on the ticket the server marks as arriving;
   reduced motion moves nothing (py.css). */
.py-screen.py-wo .py-wo-is-going, .py-screen.py-wo .py-wo-is-arriving { view-transition-name: py-ticket; }

/* A ticket dragged (the screen's script, on SortableJS): it takes the touch, so a finger on it
   drags it instead of panning the board; the ticket left on its line fades while a copy follows
   the pointer or the finger, lifted and straight; dropped on the column its button leads to, it
   waits where it was let go while its change is asked, and anywhere it can't go, or refused, it
   slides back, unless reduced motion is asked, which eases nothing on the board. */
.py-screen.py-wo .py-ticket.py-drags { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.py-screen.py-wo .py-ticket.py-is-dragged { opacity: 0.35; }
.py-screen.py-wo .py-ticket.py-is-carried { rotate: 0deg; cursor: grabbing; box-shadow: 0 22px 30px -18px oklch(0.2 0.05 262 / 0.7); }
.py-screen.py-wo .py-ticket.py-wo-is-dropped { z-index: 3; }
@media (prefers-reduced-motion: no-preference) { .py-screen.py-wo .py-ticket.py-wo-is-returning { transition: translate 180ms ease-out; } }