/* Transfers to validate: no proposal of its own, drawn in the language of the orders of the
   day (one talón per row, the folio's red reference) and of the cash count (the green copy
   for what is recorded, the sheet beside the list). Screen prefix py-tr-. */

.py-screen.py-tr .py-tr-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--py-5); align-items: start; }
.py-screen.py-tr .py-tr-lists { display: grid; gap: var(--py-5); }
.py-screen.py-tr .py-tr-lists h2, .py-screen.py-tr .py-tr-side h2 { font-family: var(--py-f-display); font-stretch: 105%; font-weight: 750; font-size: var(--py-s-1); }
.py-screen.py-tr .py-tr-side { display: grid; gap: var(--py-4); position: sticky; top: var(--py-4); }

/* A row: the reference or the order as a folio, its day, who sent it, its amount. */
.py-screen.py-tr .py-tr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.py-screen.py-tr .py-tr-row {
  display: grid; align-items: center; gap: var(--py-1) var(--py-4);
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto;
  padding: var(--py-3) var(--py-2);
  border-bottom: 1px solid var(--py-ruling);
}
.py-screen.py-tr .py-tr-ref { display: grid; border-inline-end: 2px dashed var(--py-rule); padding-inline-end: var(--py-3); }
.py-screen.py-tr .py-tr-ref a { color: var(--py-folio); font-family: var(--py-f-display); font-stretch: 72%; font-weight: 700; font-size: var(--py-s-1); text-decoration: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.py-screen.py-tr .py-tr-ref a:hover { text-decoration: underline; }
.py-screen.py-tr .py-tr-ref span { font-size: var(--py-s--1); color: var(--py-ink-soft); font-variant-numeric: tabular-nums; }
.py-screen.py-tr .py-tr-who { min-width: 0; color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-tr .py-tr-amt { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--py-s-1); }
.py-screen.py-tr .py-tr-none { color: var(--py-ink-soft); padding: var(--py-3) var(--py-2); }

/* The record form: the green copy. */
.py-screen.py-tr .py-tr-record { display: grid; gap: var(--py-3); }
.py-screen.py-tr .py-tr-record .py-btn--ink { justify-self: start; }
.py-screen.py-tr .py-tr-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--py-3); }

/* A transfer's page: its facts as the note's lines, the payments to tick as rows. */
.py-screen.py-tr .py-tr-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-2) var(--py-4); }
.py-screen.py-tr .py-tr-facts dt { color: var(--py-print); font-weight: 600; font-size: var(--py-s--1); }
.py-screen.py-tr .py-tr-facts dd { margin: 0; font-weight: 600; border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-tr .py-tr-match { display: grid; gap: var(--py-3); }
.py-screen.py-tr .py-tr-match fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; }
.py-screen.py-tr .py-tr-match legend { padding: 0; margin-bottom: var(--py-2); font-family: var(--py-f-display); font-stretch: 105%; font-weight: 750; font-size: var(--py-s-1); }
.py-screen.py-tr .py-tr-tick { display: flex; align-items: center; gap: var(--py-3); min-height: 2.75rem; padding: var(--py-2); border-bottom: 1px solid var(--py-ruling); cursor: pointer; }
.py-screen.py-tr .py-tr-tick input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--py-ink); }
.py-screen.py-tr .py-tr-tick:has(input:checked) { background: color-mix(in oklch, var(--py-stamp) 9%, transparent); }
.py-screen.py-tr .py-tr-match .py-btn--ink { justify-self: start; }

@media (max-width: 64rem) { .py-screen.py-tr .py-tr-grid { grid-template-columns: minmax(0, 1fr); } .py-screen.py-tr .py-tr-side { position: static; } }
@media (max-width: 47.99rem) { .py-screen.py-tr .py-tr-row { grid-template-columns: minmax(0, 1fr) auto; } .py-screen.py-tr .py-tr-who { grid-column: 1 / -1; } .py-screen.py-tr .py-tr-pair { grid-template-columns: minmax(0, 1fr); } }