/* U12-C: who pays on one repair order (job-payers.js): the job's Who pays card and the Checkout tab's payer split. Uses the shop.css tokens. */
.py-ops { display: grid; gap: 0; }
.py-op { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.py-op:last-child { border-bottom: 0; }
.py-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; min-width: 0; }
.py-line > span { min-width: 0; overflow-wrap: anywhere; }
.py-name { font-weight: 500; }
.py-who { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.py-dim { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.py-rule { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }
.py-flag { color: var(--amber); font-weight: 500; }
.py-ok { color: var(--green); }
.py-msg { margin: 4px 0 0; font-size: 13px; }
.py-msg:empty { display: none; }
.py-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--fill); color: var(--ink); white-space: nowrap; }
.py-k-customer { background: var(--accent-soft); color: var(--accent); }
.py-k-warranty { background: var(--amber-soft); color: var(--ink); }
.py-k-contract { background: var(--green-soft); color: var(--ink); }
.py-k-internal { background: var(--surface-2, var(--fill)); color: var(--ink); border: 1px solid var(--hair-strong, var(--hair)); }
.py-c-short_paid, .py-c-denied { background: var(--red-soft); color: var(--red); }
.py-c-submitted, .py-c-recorded { background: var(--amber-soft); color: var(--ink); }
.py-edit { margin-top: 6px; font-size: 13px; }
.py-form { display: grid; gap: 6px; margin-top: 6px; }
.py-form select, .py-form input { min-height: 36px; font-size: 14px; width: 100%; box-sizing: border-box; }
.py-form button { justify-self: start; }
.py-form [hidden] { display: none; }
.py-form-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; }
.py-preview { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--hair); display: grid; gap: 4px; }
.py-hours-box { margin-top: 10px; font-size: 13px; }
.py-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.py-hours { border-collapse: collapse; width: 100%; font-size: 13px; margin-top: 6px; }
.py-hours th, .py-hours td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.py-hours tbody th { font-weight: 500; white-space: normal; }
.py-hours small { color: var(--ink-2); }
.py-split { margin-top: 12px; }
.py-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.py-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m, 10px); border: 1px solid var(--hair); background: var(--surface); }
.py-tile.py-k-customer { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.py-tile.py-k-warranty, .py-tile.py-k-contract, .py-tile.py-k-internal { color: var(--ink); }
.py-tile-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.py-tile-n { font-size: 13px; overflow-wrap: anywhere; }
.py-tile-v { font-size: 22px; font-variant-numeric: tabular-nums; }
.py-tile-s { font-size: 12px; color: var(--ink-2); }
.py-payer { padding: 10px 0; border-top: 1px solid var(--hair); }
.py-payer-head { font-size: 14.5px; }
.py-claim { margin: 4px 0 0; font-size: 13px; }
.py-log { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.py-moves { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--hair); display: grid; gap: 4px; }
.py-moves h3 { margin: 0 0 2px; font-size: 13.5px; }
.py-pickup { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); }
/* U13-C: honest save state under a form (saveLine) and the Payer accounts settings page */
.py-save { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.py-save[data-state="idle"] { display: none; }
.py-save[data-state="unsaved"] { color: var(--amber); }
.py-save[data-state="saved"] { color: var(--green); }
.py-save[data-state="conflict"], .py-save[data-state="offline"], .py-save[data-state="unconfirmed"], .py-save[data-state="refused"] { color: var(--red); }
.py-acc { padding: 10px 0; border-top: 1px solid var(--hair); }
.py-acc:first-of-type { border-top: 0; }
.py-acc.is-inactive strong { color: var(--ink-2); }
.py-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.py-settings .panel + .panel { margin-top: 12px; }
/* U16-C: a deactivated payer account where it is still named; the Who pays card's claims and settlement */
.py-inactive { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--hair-strong, var(--hair)); vertical-align: 1px; }
.py-claims { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--hair); }
.py-claims h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.py-claim-row { padding: 6px 0; border-bottom: 1px solid var(--hair); }
.py-claim-row:last-of-type { border-bottom: 0; }