/* The owner pay step (#/move/<id>/pay, app/pay.js; migration 0209, BUILD-SPEC money-maps-design/paystep). Linked after offer.css. The rules
   come from the spec's ps.css sections 2 to 8 (the mocks the founder saw); tokens only, so dark mode keeps working. Section 9 is this build's:
   the paying state and the sheets (what's left, car info). */
/* ---------- 2. the pay step (#/move/<id>/pay): one page, no scroll. Top to bottom: Back, the bull bar, h1 "Pay to book Marcus", the
   clock line, the summary card (route, dates and car, the driver, "You pay $318.82", "Fee included. Price details"), Payment (Stripe's
   page, the promo row), the agree box, then ONE filled button "Pay $318.82 into hold" and one quiet line. ---------- */
.pay-when{display:flex;align-items:center;gap:6px;margin:calc(var(--s2) - var(--v-title)) 0 var(--v-field);font-size:15px;font-weight:600;color:var(--ot)}
.pay-when svg{flex:none;width:18px;height:18px}
.pay-sum{border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:11px 14px 6px}
.pay-rt{font-weight:700;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.pay-meta{font-size:14px;line-height:1.35;color:var(--sub);overflow-wrap:anywhere}
.pay-drv{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;line-height:1.3;flex-wrap:wrap}
.pay-av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--ot);display:inline-flex;align-items:center;justify-content:center;font:700 14px 'Instrument Sans',sans-serif}
.pay-id{display:inline-flex;align-items:center;gap:3px;color:var(--good-d);font-weight:600}
.pay-id svg{width:15px;height:15px}
.pay-tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.pay-tot span{font:600 19px/1.2 'Clash Grotesk','Instrument Sans',sans-serif}
.pay-tot b{font:600 28px/1.1 'Clash Grotesk','Instrument Sans',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-inc{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--sub)}
.pay-inc .linkbtn{font-size:14.5px;margin-right:-6px}
.pay-h2{font-size:18px;margin:var(--v-group) 0 0}
.pay-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--line)}
.pay-row:last-child{border-bottom:0}
.pay-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--ot)}
.pay-ic svg{width:20px;height:20px}
.pay-row .pr-m{flex:1;min-width:0}
.pay-row b{display:block;font-size:15.5px;line-height:1.3}
.pay-row .t{display:block;font-size:13.5px;line-height:1.35;color:var(--sub)}
.pay-row .linkbtn{padding:0;font-size:15.5px}
.pay-agree{display:flex;gap:12px;align-items:flex-start;margin:var(--v-field) 0 0;font-size:15px;line-height:1.4;cursor:pointer}
.pay-agree input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--ob)}
.pay-agree a{color:var(--ink);font-weight:600;display:inline-block;padding:14px 0;margin:-14px 0}   /* 3.5.8 review fix: a 44px tall tap area, the line as it was */
.pay-foot-l{margin:var(--s2) 2px 0;font-size:13px;line-height:1.4;color:var(--sub);text-align:center}

/* ---------- 3. the promo row (founder 2026-10-09, like Turo's checkout): closed it is one link; open it is a field with Apply and Cancel;
   applied it shows the code, what it takes off and Remove. Errors sit under the field (role=alert). Never a minus sign. ---------- */
.promo .pay-ic{background:var(--wait);color:var(--ink)}
.promo.on .pay-ic{background:var(--good-bg);color:var(--good-d)}
.promo.on b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;letter-spacing:.02em}
.promo.on .off{color:var(--good-d);font-weight:700}
.promo .linkbtn.rm{flex:none;font-size:14.5px;color:var(--sub);padding:0 4px}
.promo-f{padding:8px 0 6px;border-bottom:1px solid var(--line)}
.promo-f label{display:block;font-weight:700;font-size:15px;margin-bottom:4px}
.promo-in{display:flex;gap:8px;align-items:stretch}
.promo-in input{flex:1;min-width:0;text-transform:uppercase;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em}
.promo-in input[aria-invalid=true]{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.promo-in .btn{flex:none;min-height:48px;padding:0 16px}
.promo-f .err{margin-top:6px}
.promo-x{display:flex;justify-content:flex-end;margin:2px 0 -6px}
.promo-x .linkbtn{font-size:14.5px;color:var(--sub);min-height:40px}
/* 3.6.0 (Stage F): the same promo row on the move page's pay card (the pay step off), between Price details and the Pay button */
.mv-promo{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mv-promo .pay-row,.mv-promo .promo-f{border-bottom:0}

/* ---------- 4. Price details with a promo: the promo line (green "$20.00 off", no minus) and the total line ---------- */
.pd-lines .pd-promo .fl{color:var(--good-d)}
.pd-lines .pd-promo b{color:var(--good-d)}
.pd-lines .pd-promo code{font:600 14.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em}
.pd-lines .pd-tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:-1px}
.pd-lines .pd-tot .fl,.pd-lines .pd-tot b{font-weight:700;font-size:18px}
.fee-card li.fp-promo span,.fee-card li.fp-promo b{color:var(--good-d)}

/* ---------- 5. the owner's receipt (docs.js moneyRows): the promo line before "You paid", green, no minus sign ---------- */
.paytable tr.promo td{color:var(--good-d)}
.paytable tr.promo code{font:600 14px 'JetBrains Mono',ui-monospace,monospace}

/* ---------- 6. (3.5.8) short phones: the "same content, tighter" rules are gone (steps.css section 5). The gaps are app.css's spacing
   tokens; a short phone may scroll a little and the Pay button stays on screen (steps.css, sticky). ---------- */

/* ---------- 7. (round 2) the test card line, the promo field's label row, the quiet line steps aside while the field is open, the
   receipt's fee card cell ---------- */
.pay-row .t.tm{color:var(--warn-d)}
.promo-lr{display:flex;justify-content:space-between;align-items:center;margin:0 0 2px}
.promo-lr label{margin:0}
.promo-lr .linkbtn{font-size:14.5px;color:var(--sub);min-height:40px;margin-right:-6px}
.pay.promo-editing .pay-foot-l{display:none}
.paytable .fee-tr td,.paytable .fee-tr td:last-child{white-space:normal;text-align:left;padding-left:0}
.tb2-mk.done{color:#fff}

/* ---------- 8. (round 2, critic fixes) states on the same one page: the car info row (founder Oct 1 item 5: asked right on the pay step,
   its form opens in a sheet), steps left as ONE row whose list opens in a sheet (no page scroll), and the button's why. ---------- */
.pay-row.pay-need .pay-ic{background:var(--wait);color:var(--ink)}
.pay-row.pay-need .btn.sm{flex:none;min-height:44px;padding:0 12px;font-size:14px;white-space:nowrap}
.pay.st-left .pay-h2{margin-top:var(--v-group)}

/* ---------- 9. the paying state; the sheets for what's left and the car info (dialog.was .ps-sh, like Price details) ---------- */
.pay-paying{margin-top:var(--v-field);padding:12px 14px}
.pay-paying p{margin:0;font-size:15px;line-height:1.4}
.pay-sh .pay-leftsh{margin:0 0 12px}
.pay-sh .pay-leftsh .card{box-shadow:none}
.pay-sh .was-ok{display:flex;width:100%}
.pay .pay-when span{min-width:0}
.pay .testnote{margin:var(--v-field) 0 0}
.pay-row .pr-m .linkbtn{text-align:left}
.pd-lines .pd-promo code{color:inherit}
/* a held Pay says why under it: the quiet line steps aside for it */
.pay .stp-foot .err:not(:empty)+.pay-foot-l{display:none}

/* ---------- 10. review fixes (2026-10-11) ---------- */
/* words kept on one line ("drop-off", the support email); the quiet line breaks evenly at 1280 */
.nw{white-space:nowrap}
.pay-foot-l{text-wrap:balance}
/* the owner's receipt (founder 08): the parts of "Paid to Marcus" read as its parts, indented and quiet */
.paytable tr.rc-part td:first-child{padding-left:20px;color:var(--sub)}
.paytable tr.rc-part td:last-child{font-weight:400;color:var(--sub)}
/* the move page's short pay card: one line, the pay-by date */
.mv-payby{font-weight:600;color:var(--ink)}
/* the car info sheet: one title (the sheet's), and Plona's orange on the two choices */
.pay-sh #carinfo{border:0;box-shadow:none;background:none;padding:0;margin:0}
.pay-sh #carinfo>.kicker,.pay-sh #carinfo>#ci-h{display:none}
.ci-mode input{accent-color:var(--ob)}
/* the older background check row: a title, the words under it, the button beside */
.pay-row.pay-old{align-items:flex-start;padding-top:8px}
.pay-row.pay-old .btn.sm{margin-top:2px}
/* 3.5.8: the rules that hid lines and shrank rows when the car info and the promo field were open on short screens are gone; the page may
   scroll a little there, and Pay stays on screen (steps.css, sticky) */