/* Orders of the day: the spike of talones. Screen prefix py-ord-. */
.py-screen.py-ord .py-ord-day { display: inline-flex; align-items: center; gap: var(--py-2); }
.py-screen.py-ord .py-ord-day h1 { font-family: var(--py-f-display); font-stretch: 112%; font-weight: 750; font-size: var(--py-s-3); letter-spacing: -0.01em; }
.py-screen.py-ord .py-ord-day .py-btn { min-width: 2.75rem; }

/* The day's summary, written like the talón of the whole day */
.py-screen.py-ord .py-ord-sum {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--py-4); align-items: end;
  padding: var(--py-4) var(--py-5);
  background: var(--py-paper-2); border-radius: var(--py-r-sheet);
  border-inline-start: 4px solid var(--py-folio);
}
.py-screen.py-ord .py-ord-sum div { display: grid; gap: 2px; }
.py-screen.py-ord .py-ord-sum dt { font-size: var(--py-s--1); color: var(--py-print); font-weight: 600; }
.py-screen.py-ord .py-ord-sum dd { margin: 0; font-family: var(--py-f-display); font-stretch: 70%; font-weight: 750; font-size: var(--py-s-2); line-height: 1; font-variant-numeric: tabular-nums; }
.py-screen.py-ord .py-ord-sum dd small { font-family: var(--py-f-ui); font-stretch: 100%; font-size: var(--py-s--1); font-weight: 500; color: var(--py-ink-soft); }
.py-screen.py-ord .py-ord-sum .py-ord-owed dd { color: var(--py-folio); }
.py-screen.py-ord .py-ord-sum-actions { display: flex; flex-wrap: wrap; gap: var(--py-2); }

.py-screen.py-ord .py-ord-tools { display: flex; flex-wrap: wrap; gap: var(--py-3) var(--py-4); align-items: center; }
.py-screen.py-ord .py-ord-filter { display: inline-flex; flex-wrap: wrap; gap: var(--py-1); border: 0; margin: 0; padding: 0; }
.py-screen.py-ord .py-ord-filter a { display: inline-flex; gap: 0.4em; align-items: baseline; padding: 0.4em 0.9em; border-radius: var(--py-r-pill); border: 1.5px solid var(--py-rule); text-decoration: none; font-weight: 600; font-size: var(--py-s--1); }
.py-screen.py-ord .py-ord-filter a[aria-current="page"] { background: var(--py-ink); border-color: var(--py-ink); color: var(--py-paper); }
.py-screen.py-ord .py-ord-filter b { font-variant-numeric: tabular-nums; }
.py-screen.py-ord .py-ord-search { flex: 1 1 16rem; max-width: 24rem; }

/* The list: one talón per order */
.py-screen.py-ord .py-ord-list { list-style: none; margin: 0; padding: 0; display: grid; }
.py-screen.py-ord .py-ord-row {
  display: grid; align-items: center; gap: var(--py-2) var(--py-4);
  grid-template-columns: 7.5rem minmax(0, 1fr) 8.5rem 12rem 13.5rem;
  padding: var(--py-3) var(--py-2);
  border-bottom: 1px solid var(--py-ruling);
  content-visibility: auto; contain-intrinsic-size: auto 4.5rem;
  scroll-margin-block: 6rem;
}
.py-screen.py-ord .py-ord-row:target { background: color-mix(in oklch, var(--py-canary) 75%, transparent); border-radius: var(--py-r-ctl); animation: py-target 2.2s ease-out 0.4s both; }
@keyframes py-target { to { background: transparent; } }
.py-screen.py-ord .py-ord-folio { display: grid; gap: 0; border-inline-end: 2px dashed var(--py-rule); padding-inline-end: var(--py-3); }
.py-screen.py-ord .py-ord-folio a { color: var(--py-folio); font-family: var(--py-f-display); font-stretch: 66%; font-weight: 700; font-size: var(--py-s-1); text-decoration: none; letter-spacing: 0.03em; }
.py-screen.py-ord .py-ord-folio a:hover { text-decoration: underline; }
.py-screen.py-ord .py-ord-folio time { font-size: var(--py-s--1); color: var(--py-ink-soft); font-variant-numeric: tabular-nums; }
.py-screen.py-ord .py-ord-who { min-width: 0; }
.py-screen.py-ord .py-ord-who b { font-weight: 650; display: block; }
.py-screen.py-ord .py-ord-who span { display: block; color: var(--py-ink-soft); font-size: var(--py-s--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-screen.py-ord .py-ord-amt { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--py-s-1); }
.py-screen.py-ord .py-ord-amt small { display: block; font-size: var(--py-s--1); font-weight: 500; color: var(--py-ink-soft); }
.py-screen.py-ord .py-ord-stamps { display: flex; gap: var(--py-2); align-items: center; justify-content: center; min-height: 2.5rem; }
.py-screen.py-ord .py-ord-stamps .py-stamp { font-size: var(--py-s--2); padding: 0.25em 0.5em 0.2em; }
.py-screen.py-ord .py-ord-stamps .py-stamp:nth-child(2) { rotate: 4deg; }
.py-screen.py-ord .py-ord-todo { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-ord .py-ord-acts { display: flex; gap: var(--py-2); justify-content: flex-end; }
.py-screen.py-ord .py-ord-acts .py-btn { min-height: 2.5rem; }
.py-screen.py-ord .py-ord-row--fail { background: var(--py-danger-bg); border-radius: var(--py-r-ctl); }
.py-screen.py-ord .py-ord-fail { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-2) var(--py-3); color: var(--py-danger); font-weight: 650; font-size: var(--py-s--1); }
.py-screen.py-ord .py-ord-fail span { color: var(--py-ink); font-weight: 450; }

.py-screen.py-ord .py-ord-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--py-3); padding: var(--py-4) var(--py-2); color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-ord .py-ord-empty { padding: var(--py-7) var(--py-4); display: grid; gap: var(--py-2); justify-items: start; }
.py-screen.py-ord .py-ord-empty p:first-child { --py-casl: 1; font-size: var(--py-s-2); font-weight: 600; color: var(--py-ink); }


@media (max-width: 80rem) {
  .py-screen.py-ord .py-ord-row { grid-template-columns: 6.5rem minmax(0, 1fr) 8rem 11rem; }
  .py-screen.py-ord .py-ord-acts { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 47.99rem) {
  .py-screen.py-ord .py-ord-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--py-3) var(--py-4); }
  .py-screen.py-ord .py-ord-sum-actions { grid-column: 1 / -1; }
  .py-screen.py-ord .py-ord-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "folio who amt" "folio stamps stamps" "acts acts acts"; padding: var(--py-3) 0; }
  .py-screen.py-ord .py-ord-folio { grid-area: folio; align-self: start; }
  .py-screen.py-ord .py-ord-who { grid-area: who; }
  .py-screen.py-ord .py-ord-amt { grid-area: amt; font-size: var(--py-s-0); }
  .py-screen.py-ord .py-ord-stamps { grid-area: stamps; justify-content: flex-start; }
  .py-screen.py-ord .py-ord-acts { grid-area: acts; grid-column: auto; }
  .py-screen.py-ord .py-ord-acts .py-btn { flex: 1; }
  .py-screen.py-ord .py-ord-fail { grid-column: 1 / -1; }
  .py-screen.py-ord .py-ord-day h1 { font-size: var(--py-s-2); }
}
@media (max-width: 47.99rem) { .py-screen.py-ord .py-ord-folio a { font-size: var(--py-s-0); } }

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

/* Each in its resting state, plain. */
/* The day's figures are a list of their own, its actions beside it. */
.py-screen.py-ord .py-ord-sum { grid-template-columns: minmax(0, 1fr) auto; }
.py-screen.py-ord .py-ord-sum > dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--py-4); align-items: end; }
@media (max-width: 47.99rem) { .py-screen.py-ord .py-ord-sum > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The search posts, so nothing typed reaches the address: its field and its button. */
.py-screen.py-ord .py-ord-search { display: flex; gap: var(--py-2); align-items: center; }
.py-screen.py-ord .py-ord-search .py-input { flex: 1 1 auto; min-width: 0; }

/* *Cobrado* asks how it was paid, in a fold under its button (in the row's flow: a row
   contains its paint); each action is its own form. */
.py-screen.py-ord .py-ord-acts { align-items: flex-start; }
.py-screen.py-ord .py-ord-acts form { display: flex; gap: var(--py-1); align-items: center; }
.py-screen.py-ord .py-ord-pay summary { list-style: none; min-height: 2.5rem; }
.py-screen.py-ord .py-ord-pay summary::-webkit-details-marker { display: none; }
.py-screen.py-ord .py-ord-pay[open] summary { background: var(--py-ink); color: var(--py-paper); }
.py-screen.py-ord .py-ord-pay-pop { display: grid; gap: var(--py-2); margin-top: var(--py-2); padding: var(--py-3); inline-size: 12rem; border: 2px solid var(--py-ink); border-radius: var(--py-r-ctl); background: var(--py-paper); }
.py-screen.py-ord .py-ord-pay-pop .py-btn { justify-self: start; }

/* The sales by period and the balances take the day's rows: a talón with fewer parts. */
.py-screen.py-ord .py-ord-row--period { grid-template-columns: 9rem minmax(0, 1fr) 8.5rem 10rem; }
.py-screen.py-ord .py-ord-row--owed { grid-template-columns: 7.5rem minmax(0, 1fr); }
.py-screen.py-ord .py-ord-row--client { grid-template-columns: minmax(0, 1fr) 9rem; }
.py-screen.py-ord form.py-ord-tools { align-items: end; }
.py-screen.py-ord .py-ord-balance-pay { display: flex; flex-wrap: wrap; align-items: end; gap: var(--py-3); }
.py-screen.py-ord .py-ord-balance-pay .py-error-text { flex-basis: 100%; }
@media (max-width: 47.99rem) { .py-screen.py-ord .py-ord-row--period, .py-screen.py-ord .py-ord-row--owed, .py-screen.py-ord .py-ord-row--client { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; } .py-screen.py-ord .py-ord-row--period > * { grid-area: auto; } }

/* A cancelled or refunded sale is stamped in the folio's red. */
.py-screen.py-ord .py-stamp.py-is-void { --py-stamp: var(--py-folio); }

/* ---------- As the person works (the interactions' wave) ---------- */

/* A change of a row refused or failed: said across the row, under it. */
.py-screen.py-ord .py-ord-fail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--py-1) var(--py-2); color: var(--py-danger); font-size: var(--py-s--1); }
.py-screen.py-ord .py-ord-fail span, .py-screen.py-ord .py-ord-fail { line-height: 1.4; }
.py-screen.py-ord .py-ord-fail .py-btn { color: var(--py-ink); }
.py-screen.py-ord .py-ord-empty-wrap:not(:has(*)) { display: none; }
@media (max-width: 47.99rem) { .py-screen.py-ord .py-ord-fail { grid-area: auto; } }

/* The day's list is drawn whole (tens of rows, docs/specs/sales.md): no row waits to be drawn.
   With `content-visibility: auto`, a row not drawn yet took 4.5rem as its content's height, plus
   its padding and rule (about 97 px for 73 px drawn), so the page shrank under the reader as the
   rows near a scrolled-to row were drawn, the scroll clamped by 31 px, and back restored short. */
.py-screen.py-ord .py-ord-list--day > .py-ord-row { content-visibility: visible; }