/* Invoices (js/invoice-pipeline.js) — create-invoice and send/mark-paid
   modals, invoice detail, payment history, and the (unmounted) panel/list.
   Layout moved out of inline style attributes so a theme can restyle it
   (reskin, 2026-10-02). Values are the old inline ones exactly. The
   homeowner email body (buildInvoiceHtml) keeps its inline styles: mail
   clients drop stylesheets.
   Generated from the conversion map. Rules are tripled (0,3,0) so they
   out-rank the injected phone rules (.invoice-detail .inv-lines td, 0,2,1)
   the way the inline style did; .btn ones more. */
.ipx-field.ipx-field.ipx-field { margin: 6px 0 12px; width: 100%; }
.ipx-choice.ipx-choice.ipx-choice.ipx-choice { width: 100%; justify-content: flex-start; padding: 14px; }
.ipx-m12.ipx-m12.ipx-m12 { font-size: 12px; color: var(--m); }
.ipx-k.ipx-k.ipx-k { font-size: 10px; color: var(--m); text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.ipx-err.ipx-err.ipx-err { color: var(--red); padding: 12px; }
.ipx-th10.ipx-th10.ipx-th10 { padding: 10px; font-weight: 700; font-size: 11px; }
.ipx-td10.ipx-td10.ipx-td10 { padding: 10px; }
.ipx-btn48.ipx-btn48.ipx-btn48.ipx-btn48 { min-height: 48px; justify-content: center; }
.ipx-btn40.ipx-btn40.ipx-btn40.ipx-btn40 { min-height: 40px; padding: 6px 10px; font-size: 12px; }
.ipx-mt6.ipx-mt6.ipx-mt6 { margin-top: 6px; }
.ipx-m11.ipx-m11.ipx-m11 { font-size: 11px; color: var(--m); }
.ipx-title.ipx-title.ipx-title { font-family: 'Montserrat','Segoe UI',Helvetica,Arial,sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.ipx-grow-btn.ipx-grow-btn.ipx-grow-btn.ipx-grow-btn { flex: 1; justify-content: center; }
.ipx-sum-row.ipx-sum-row.ipx-sum-row { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--br); font-size: 12px; }
.ipx-head-row.ipx-head-row.ipx-head-row { border-bottom: 2px solid var(--br); }
.ipx-row.ipx-row.ipx-row { border-bottom: 1px solid var(--br); }
.ipx-w300.ipx-w300.ipx-w300 { width: 300px; }
.ipx-btn-save.ipx-btn-save.ipx-btn-save.ipx-btn-save { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; font-weight: 700; margin-top: 10px; }
.ipx-btn-full44.ipx-btn-full44.ipx-btn-full44.ipx-btn-full44 { width: 100%; justify-content: center; margin-top: 8px; min-height: 44px; }
.ipx-btn-full.ipx-btn-full.ipx-btn-full.ipx-btn-full { width: 100%; justify-content: center; margin-top: 12px; }
.ipx-table.ipx-table.ipx-table { width: 100%; border-collapse: collapse; }
.ipx-r.ipx-r.ipx-r.ipx-r { text-align: right; }
.ipx-note-row.ipx-note-row.ipx-note-row { padding: 8px; border-top: 1px solid var(--br); font-size: 11px; line-height: 1.4; color: var(--orange); font-weight: 600; }
.ipx-td8.ipx-td8.ipx-td8 { padding: 8px; }
.ipx-paper.ipx-paper.ipx-paper { padding: 20px; background: var(--paper,#fff); color: var(--ink,#1a1612); border-radius: 8px; max-width: 900px; margin: 0 auto; }
.ipx-pad20-12.ipx-pad20-12.ipx-pad20-12 { padding: 20px 12px; }
.ipx-card.ipx-card.ipx-card { padding: 16px; background: var(--s); border-radius: 8px; border: 1px solid var(--br); }
.ipx-pad16.ipx-pad16.ipx-pad16 { padding: 16px; }
.ipx-scroll-x.ipx-scroll-x.ipx-scroll-x { overflow-x: auto; }
.ipx-minw0.ipx-minw0.ipx-minw0 { min-width: 0; }
.ipx-method.ipx-method.ipx-method.ipx-method { min-height: 52px; justify-content: center; font-size: 15px; font-weight: 700; }
.ipx-max920.ipx-max920.ipx-max920 { max-width: 920px; width: 100%; }
.ipx-max420w.ipx-max420w.ipx-max420w { max-width: 420px; width: 100%; }
.ipx-max420.ipx-max420.ipx-max420 { max-width: 420px; }
.ipx-max380.ipx-max380.ipx-max380 { max-width: 380px; }
.ipx-h3.ipx-h3.ipx-h3 { margin: 0; font-size: 14px; font-weight: 700; }
.ipx-note.ipx-note.ipx-note { margin: -12px 0 20px; padding: 8px; font-size: 11px; line-height: 1.4; color: var(--orange); font-weight: 600; border: 1px solid var(--br); border-radius: 6px; }
.ipx-mb20.ipx-mb20.ipx-mb20.ipx-mb20 { margin-bottom: 20px; }
.ipx-mb16.ipx-mb16.ipx-mb16.ipx-mb16 { margin-bottom: 16px; }
.ipx-b.ipx-b.ipx-b.ipx-b { font-weight: 700; }
.ipx-big.ipx-big.ipx-big { font-size: 32px; font-weight: 700; color: var(--orange); }
.ipx-b14.ipx-b14.ipx-b14 { font-size: 14px; font-weight: 700; }
.ipx-warn.ipx-warn.ipx-warn { font-size: 12px; margin: 8px 0 4px; color: var(--orange); font-weight: 600; }
.ipx-help.ipx-help.ipx-help { font-size: 12px; color: var(--m); margin-top: 6px; line-height: 1.45; }
.ipx-caps.ipx-caps.ipx-caps { font-size: 11px; color: var(--m); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ipx-label.ipx-label.ipx-label { font-size: 10px; font-weight: 600; color: var(--m); text-transform: uppercase; letter-spacing: .08em; }
.ipx-brand.ipx-brand.ipx-brand { font-family: 'Montserrat','Segoe UI',Helvetica,Arial,sans-serif; font-size: 24px; font-weight: 700; color: var(--orange); }
.ipx-flex1.ipx-flex1.ipx-flex1 { flex: 1; }
.ipx-tags.ipx-tags.ipx-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.ipx-g2.ipx-g2.ipx-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ipx-g2-wide.ipx-g2-wide.ipx-g2-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.ipx-stack8.ipx-stack8.ipx-stack8 { display: grid; gap: 8px; }
.ipx-stack4.ipx-stack4.ipx-stack4 { display: grid; gap: 4px; font-size: 12px; }
.ipx-total-row.ipx-total-row.ipx-total-row { display: flex; justify-content: space-between; padding: 8px; font-size: 14px; font-weight: 700; }
.ipx-due-row.ipx-due-row.ipx-due-row { display: flex; justify-content: space-between; padding: 8px; font-size: 13px; font-weight: 700; color: var(--orange); }
.ipx-head.ipx-head.ipx-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.ipx-bar.ipx-bar.ipx-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ipx-pay-row.ipx-pay-row.ipx-pay-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--br); font-size: 12px; }
.ipx-end8.ipx-end8.ipx-end8 { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.ipx-end20.ipx-end20.ipx-end20 { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.ipx-actions.ipx-actions.ipx-actions { display: flex; gap: 8px; margin-top: 20px; }
.ipx-toolbar.ipx-toolbar.ipx-toolbar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.ipx-row6.ipx-row6.ipx-row6 { display: flex; gap: 6px; }
.ipx-col8.ipx-col8.ipx-col8 { display: flex; flex-direction: column; gap: 8px; }
.ipx-row-fixed.ipx-row-fixed.ipx-row-fixed { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ipx-orange.ipx-orange.ipx-orange { color: var(--orange); }
.ipx-box.ipx-box.ipx-box { background: var(--s2); padding: 12px; border-radius: 5px; font-size: 11px; color: var(--m); }
.ipx-stripe-chip.ipx-stripe-chip.ipx-stripe-chip { background: color-mix(in srgb,#635bff 16%,transparent); color: #8b85ff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.ipx-l.ipx-l.ipx-l.ipx-l { text-align: left; }
.ipx-fs12.ipx-fs12.ipx-fs12.ipx-fs12 { font-size: 12px; }
.ipx-th8.ipx-th8.ipx-th8 { padding: 8px; font-weight: 700; font-size: 11px; }
.ipx-mb14.ipx-mb14.ipx-mb14.ipx-mb14 { margin-bottom: 14px; }
.ipx-mt2.ipx-mt2.ipx-mt2.ipx-mt2 { margin-top: 2px; }
.ipx-mt8.ipx-mt8.ipx-mt8.ipx-mt8 { margin-top: 8px; }
.ipx-title-14.ipx-title-14.ipx-title-14.ipx-title-14 { margin-bottom: 14px; }