/* Plona payouts (migration 0208; payouts BUILD-SPEC 8; the founder's mockups payouts-01 to 08 of Oct 10). From the design's pay.css sections
   2 to 7 (what ships), with the real fields: Stripe's card frames (.po-el), Plona's ZIP and typed bank inputs (.po-in), the password re-check,
   and the "This wasn't me" page. Tokens only, so dark mode keeps working. Linked from app/index.html. */
/* ---------- 2. the payout step, part 1 (Stripe's identity and tax page) ---------- */
.po-parts{list-style:none;margin:0 0 var(--v-field);padding:0;display:grid;gap:var(--v-field)}
.po-parts li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.po-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--ot);font:700 14px/1 'Instrument Sans',sans-serif}
.po-parts b{display:block;font-size:16px;line-height:1.3}
.po-parts .t{display:block;font-size:14.5px;line-height:1.38;color:var(--sub);margin-top:2px}
.po-parts .w{display:block;font-size:13px;line-height:1.3;color:var(--ot);font-weight:700;margin-top:4px}
.po-pts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.po-pts li{display:flex;gap:10px;font-size:15px;line-height:1.4}
.po-pts svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--good-d);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.po-under{margin:var(--s2) 0 0;text-align:center;font-size:13.5px;line-height:1.4;color:var(--sub)}
/* 3.4.3: "I understand how I will be paid" under the two parts, above the one button */
.po-agree{margin-top:var(--v-field);font-weight:600}

/* ---------- 3. "Where should we send your money?" (Plona's own screen, powered by Stripe) ---------- */
.po-opts{border:0;margin:0 0 var(--v-field);padding:0;min-width:0;display:grid;gap:var(--v-field)}
.po-opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--card);cursor:pointer}
.po-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.po-radio{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--field);background:var(--card)}
.po-opt.on .po-radio{border-color:var(--ink);background:radial-gradient(circle,var(--ink) 0 5px,var(--card) 6px)}
.po-opt .grow{flex:1;min-width:0}
.po-opt b{display:flex;align-items:center;gap:8px;font-size:16.5px;line-height:1.3}
.po-opt .t{display:block;font-size:14.5px;line-height:1.38;color:var(--sub);margin-top:2px}
.po-inst{display:inline-flex;align-items:center;gap:4px;font:700 13px/1 'Instrument Sans',sans-serif;border-radius:99px;padding:4px 9px;background:var(--good-bg);color:var(--good-d)}
.po-inst svg{width:12px;height:12px;fill:currentColor}
.po-ic{flex:none;width:26px;height:26px;color:var(--ink);margin-top:-1px}
/* Stripe's card fields (Elements frames in the build; drawn here) */
.po-fields{border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.po-f{display:block;padding:9px 12px 10px;border-top:1px solid var(--line)}
.po-f:first-child{border-top:0}
.po-f small{display:block;font-size:13px;line-height:1.2;color:var(--sub);font-weight:600}
.po-f span{display:block;font:500 17px/1.3 'Instrument Sans',sans-serif;color:var(--field);margin-top:2px}
.po-f.v span{color:var(--ink)}
.po-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-top:1px solid var(--line)}
.po-row .po-f{border-top:0;border-left:1px solid var(--line)}
.po-row .po-f:first-child{border-left:0}
.po-sec{display:flex;align-items:center;gap:6px;margin:var(--s2) 2px 0;font-size:13px;line-height:1.35;color:var(--sub)}
.po-sec svg{flex:none;width:15px;height:15px}
.po-by{margin:var(--s2) 0 0;text-align:center;font-size:13px;color:var(--sub)}
.po-by b{color:var(--ink);font-weight:700}
.po-alt{display:flex;justify-content:center;margin:2px 0 0}
.po-bankbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:1.5px solid var(--ink);border-radius:var(--r-md);background:var(--card);color:var(--ink);font:700 16px/1.25 'Instrument Sans',sans-serif;text-align:left}
.po-bankbtn svg{flex:none;width:24px;height:24px}
.po-bankbtn small{display:block;font-weight:500;font-size:13px;color:var(--sub)}
.po-field{display:block;margin:0 0 var(--v-field)}
.po-field label{display:block;font-size:13.5px;font-weight:600;margin:0 0 4px}
.po-field .in{display:block;min-height:48px;padding:11px 12px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--card);font:500 16px/1.4 'Instrument Sans',sans-serif;color:var(--ink)}
.po-field .in.ph2{color:var(--field)}
.po-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

/* ---------- 4. result after saving (the step's done state) ---------- */
.po-dest{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.po-dest .grow{flex:1;min-width:0}
.po-dest b{display:block;font-size:16.5px;line-height:1.3;overflow-wrap:anywhere}
.po-dest .t{display:block;font-size:14.5px;line-height:1.38;color:var(--sub)}
.po-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:6px;background:var(--wait);font:800 11px/1 'Instrument Sans',sans-serif;letter-spacing:.04em;color:var(--ink)}
.po-note{margin:var(--v-field) 0 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--warn-bg);color:var(--ink);font-size:15px;line-height:1.42}
.po-note b{display:block;font-size:16px;margin-bottom:2px}
.po-ok{margin:var(--v-field) 0 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--good-bg);color:var(--ink);font-size:15px;line-height:1.42}
.po-ok b{display:block;font-size:16px;margin-bottom:2px;color:var(--good-d)}
.stp[data-step=payout] .stp-foot .btn + .btn,.stp[data-flow=payouts] .stp-foot .btn + .btn{margin-top:var(--s2)}

/* ---------- 5. the Payouts page (#/payouts, More > Payouts) ---------- */
.pp-sec{margin:18px 0 0}
.pp-sec h2{font-size:19px;margin:0 0 8px}
.pp-dest{border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--card);padding:14px 16px}
.pp-dest .r1{display:flex;align-items:flex-start;gap:12px}
.pp-dest .po-logo{margin-top:2px}
.pp-ib{display:block;margin-top:6px}
.pp-dest .grow{flex:1;min-width:0}
.pp-dest b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:17px;line-height:1.3}
.pp-dest .t{display:block;font-size:14.5px;line-height:1.38;color:var(--sub);margin-top:2px}
.pp-dest .chg{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-8px -4px -8px 0;font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pp-list{list-style:none;margin:0;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.pp-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.pp-list li:first-child{border-top:0}
.pp-list .w{min-width:0;font-size:15.5px;font-weight:600;line-height:1.3}
.pp-list .w small{display:block;font-size:13.5px;font-weight:400;color:var(--sub);margin-top:1px}
.pp-list .a{text-align:right;flex:none}
.pp-list .a b{display:block;font-size:15.5px;font-variant-numeric:tabular-nums}
.pp-st{display:block;font-size:13px;font-weight:700;margin-top:2px}
.pp-st.ok{color:var(--good-d)}.pp-st.go{color:var(--ot)}.pp-st.bad{color:var(--bad)}.pp-st.wait{color:var(--sub)}
.pp-kv{margin:0;padding:2px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.pp-kv > div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line);min-height:44px}
.pp-kv > div:first-child{border-top:0}
.pp-kv dt,.pp-kv dd{margin:0;font-size:15px;line-height:1.38}
.pp-kv dt{color:var(--sub)}
.pp-kv dd{font-weight:600;text-align:right}
.pp-kv dd a{color:var(--ink)}
.pp-legal{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--sub)}
.pp-legal a{color:var(--ink);font-weight:600}
/* the one problem card at the top (status once): a payout that didn't go through, or Stripe needs a detail */
.pp-prob{border:2px solid var(--bad);border-radius:var(--r-lg);background:var(--card);padding:14px 16px}
.pp-prob.pp-due{border-color:var(--warn)}
.pp-prob h2{font-size:19px;margin:0 0 4px}
.pp-prob p{margin:0 0 10px;font-size:15px;line-height:1.42;color:var(--ink)}
.pp-prob .btn{width:100%}
.pp-dest.off{border-color:var(--line)}
.pp-dest.off b{color:var(--sub)}

/* ---------- 6. the trip page after the drop-off is confirmed (driver) ---------- */
.tp-pay{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:6px 16px 10px}
.tp-pay h2{font-size:18px;margin:8px 0 2px}
.tp-pay table{width:100%;border-collapse:collapse}
.tp-pay td{padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.35;vertical-align:top}
.tp-pay tr:first-child td{border-top:0}
.tp-pay td:last-child{text-align:right;font-weight:700;padding-left:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tp-pay .as{display:block;font-size:13px;color:var(--sub);font-weight:400;margin-top:1px}
.tp-links{display:flex;gap:8px;margin:12px 0 0}
.tp-links .btn{flex:1}

/* 3.5.8: the short-phone rules (smaller title, text and boxes) are gone (steps.css section 5); the button stays on screen (sticky) */
/* laptops: the setup steps start where the apply and posting steps do (route.css, post.css) */
@media (min-width:700px) and (min-height:621px){.stp[data-flow=payouts]{margin-top:2vh}.stp[data-flow=payouts] .stp-body{padding-top:16px}}

/* ---------- 8. the build's real fields ---------- */
/* Stripe's card frames sit where the mock drew the numbers; the ZIP is Plona's own input styled the same */
.po-el{min-height:24px;margin-top:3px}
.po-el.StripeElement--focus,.po-f:focus-within{outline:none}
.po-fields:focus-within{border-color:var(--ink)}
.po-f .po-in{display:block;width:100%;margin-top:2px;padding:0;border:0;background:transparent;font:500 17px/1.3 'Instrument Sans',sans-serif;color:var(--ink);min-height:24px}
.po-f .po-in::placeholder{color:var(--field)}
.po-f .po-in:focus{outline:none}
.po-field .po-input{display:block;width:100%;min-height:48px;padding:11px 12px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--card);font:500 16px/1.4 'Instrument Sans',sans-serif;color:var(--ink)}
.po-field .po-input:focus{border-color:var(--ink);outline:2px solid transparent}
.po-field .err{margin-top:4px}
.po-fields + .err,.po-two + .err{margin-top:4px}
.po-opt input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.po-opt:has(input:focus-visible){outline:3px solid var(--focus,#2563eb);outline-offset:2px}   /* keyboard focus only: a tap draws no ring (mockups 02, 03) */
.po-mockline{margin:6px 2px 0;font-size:13px;color:var(--sub)}
.po-reauth{margin:10px 0 0}
.po-reauth label{display:block;font-weight:600;font-size:14px;margin:8px 0 4px}
.po-reauth input{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--card);font:500 16px/1.4 'Instrument Sans',sans-serif;color:var(--ink)}
/* the Payouts page: a bank shows its name over "Bank account ending 8883" */
.pp-dest .t2{display:block;font-size:14px;line-height:1.35;color:var(--sub);margin-top:1px}
.pp-empty{margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);font-size:15px;line-height:1.42;color:var(--sub)}
.pp-prob.pp-calm{border-color:var(--line)}
.pp-prob .linkbtn{font-weight:700}
.pp-kv dd .pp-go{margin-left:6px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* "This wasn't me" (#/payouts/stop) */
.pp-stop p{font-size:16px;line-height:1.45}
/* the trip page after the drop-off: the sentence and Your pay (move.js close-out) */
.tp-sent{margin:10px 0 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--good-bg);color:var(--ink);font-size:15px;line-height:1.42}
.tp-sent.wait{background:var(--wait)}
.tp-pay{margin-top:10px;text-align:left}
/* 0216 review fix: on a laptop the walk-away line, the sentence and Your pay sit in one centered column (like the review below them), so a
   label is never far from its amount */
.closeout.card .wa,.closeout.card .tp-sent,.closeout.card .tp-pay{max-width:560px;margin-left:auto;margin-right:auto}
/* 3.5.8: the typed bank numbers keep their 48px boxes and 13px error lines on short phones too (the old squeeze is gone) */