/* ─────────────────────────────────────────────────────────────────────────────────────────────
   ADD FLOWS (Hal 2026-10-20): Quick Capture review (#page-inv-add-simple-review) and the detailed wizard
   (#page-inv-add-1 … -5). One header style, ONE field style in ONE two-column grid, no orphan cells,
   no label touching a field, Absans (var(--font-body)). Loads last so it wins over the older add-flow rules.
   Spec: Hal-approved add-flow fix list, 2026-10-20
   ───────────────────────────────────────────────────────────────────────────────────────────── */
:root { --wfaf-h: 48px; --wfaf-r: 12px; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) { font-family: var(--font-body); }

/* §3 headers: ONE header = the title, with the helper as a single small line under it. No eyebrow. */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wftp-eyebrow { display: none !important; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .card-header {
  display: flex; flex-direction: column !important; align-items: flex-start !important; justify-content: center; gap: 2px !important; padding: 14px 20px 12px; min-height: 0;
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .card-header > div { min-width: 0; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .card-header-title {
  font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.1px !important; text-transform: none !important; line-height: 1.25; color: var(--white);
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .card-header > .text-muted,
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .card-header .text-sm {
  font-size: 12px !important; font-weight: 400; color: var(--muted); margin: 0 !important; line-height: 1.3; text-transform: none; letter-spacing: 0;
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .card-body { padding: 16px 20px 18px; }

/* §3 ONE field style: same height, same fill, same radius, same label — for inputs, tap rows and sheet pickers alike */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group { min-width: 0; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group > label:not(.wf-lr-paid-date) {
  display: block; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--off-white); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select.filter-select:not(.wfsp-src):not(.wftp-src)),
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) :is(.wftp-field, .wfsp-row, .wfsp-fld, .qi-datepicker-trigger) {
  min-height: var(--wfaf-h); box-sizing: border-box; border-radius: var(--wfaf-r); background: var(--bg-raised); border: 1px solid var(--border);
  font-family: var(--font-body); font-size: 15px; color: var(--white);
}
/* the sheet-picker rows (Condition, Box & papers, Dial …): a normal field with its label ABOVE, not a strip with the label inside */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group.wfsp-has-row > label { display: block !important; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfsp-row { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 0 14px; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfsp-row .wfsp-lab { display: none !important; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfsp-row .wfsp-val { flex: 1; min-width: 0; text-align: left !important; font-size: 15px; font-weight: 500; grid-column: auto; grid-row: auto; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfsp-row .wfsp-chev { grid-column: auto; grid-row: auto; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wftp-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 14px; }

/* §3 grid: two columns all the way down, nothing orphaned */
#page-inv-add-simple-review .simple-parsed-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; align-items: end; }
#page-inv-add-simple-review .simple-parsed-preview > .form-group { margin: 0 !important; grid-column: auto; }
#page-inv-add-simple-review .simple-parsed-preview > .form-group.wfsp-has-row { grid-column: auto; }
@media (max-width: 560px) { #page-inv-add-simple-review .simple-parsed-preview { gap: 12px 10px; } }

/* §3 serial: the "I don't have the serial yet" box is one line, aligned with the field */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group > label:has(> input[type=checkbox]) {
  display: flex !important; align-items: center; gap: 8px; margin: 8px 0 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap; color: var(--off-white);
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group > label > input[type=checkbox] { width: 18px !important; height: 18px !important; min-height: 0 !important; flex: none; margin: 0; padding: 0; }

/* §3 + §4 Who bought this watch: label, field, hint — each with room, at every width */
.wf-who-group > label { margin-bottom: 8px !important; }
.wf-who-group .wf-who-host { display: block; }
.wf-who-group.wf-who-team > #simple-purchase-buyer, .wf-who-group.wf-who-team > #simple-purchase-buyer-search, .wf-who-group.wf-who-team > .btn { display: none !important; }
.wf-who-group:not(.wf-who-team) > #simple-purchase-buyer-search { margin-bottom: 8px; }
.wf-who-group > .btn { margin-top: 8px; }
.wf-who-group .qp-hint { margin-top: 6px; }

/* §3 How did you get it? — an even 2 x 2, same padding, readable text */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .qc-howget {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%;
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .qc-howget .qc-memo-opt {
  flex: none; width: auto; min-width: 0; min-height: 76px; padding: 12px 14px; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-radius: var(--wfaf-r);
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .qc-howget .qc-memo-title { font-size: 14.5px; font-weight: 700; line-height: 1.25; white-space: normal; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .qc-howget .qc-memo-desc { font-size: 12px; line-height: 1.35; color: var(--muted); white-space: normal; }

/* §4 the Partnership note that follows the buyer */
.wf-auto-partner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; padding: 10px 14px; border-radius: var(--wfaf-r); font-size: 13px;
  background: color-mix(in srgb, var(--blue) 9%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border)); }
.wf-auto-partner[hidden] { display: none; }
.wf-ap-k { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); }
.wf-ap-t { color: var(--white); font-weight: 600; min-width: 0; }
.wf-ap-add { margin-left: auto; min-height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* §5 How it was paid */
.wf-how-paid .wfc-mode { display: none !important; }
.wf-how-paid { margin-top: 16px; }
.wf-hp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.wf-hp-foot .wf-lg-add { border: 0; background: none; padding: 6px 0; min-height: 36px; color: var(--blue); font-weight: 700; font-size: 13px; width: auto; }
.wf-hp-remaining { font-size: 12.5px; font-weight: 700; }
.wf-hp-remaining.is-ok { color: var(--green); }
.wf-hp-remaining.is-short { color: var(--amber, #b7791f); }
.wf-hp-remaining.is-over { color: var(--red); }
.wf-how-paid .wf-lr-cols { display: none; }
.wf-how-paid .wf-lg-head { padding-bottom: 6px; }

/* titles: sentence case beats the older all-caps rules */
html body :is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .card-header .card-header-title { text-transform: none !important; letter-spacing: -.1px !important; font-size: 16px !important; }
/* Who bought: only the team sheet when it is there (the older buyer list stays for seats that cannot pick) */
.wf-who-group.wf-who-team > :not(label):not(.wf-who-host):not(.qp-hint) { display: none !important; }
/* the picker-built fields (Brand, Who bought) look like every other field */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) :is(.wfsp-fld, .wfap-field) { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 14px; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) :is(.wfap-f-txt, .wftp-f-txt) { flex: 1; min-width: 0; text-align: left; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The buyer's name is never cut to "Ana Bla..." (2026-10-25): it wraps and the box grows a line. */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wftp-f-txt { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; padding: 8px 0; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfap-f-txt b { font-weight: 500; }
#page-inv-add-simple-review .simple-parsed-preview { align-items: start; }

/* §5 Purchase block: the same compact row style as the bulk deal's Expenses */
#page-inv-add-simple-review .qp-expenses-list .qp-expense-row, #page-inv-add-3 .qp-expenses-list .qp-expense-row, #page-inv-add-4 .qp-expenses-list .qp-expense-row {
  display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 40px; gap: 8px; align-items: center; margin: 0 0 8px;
}
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .qp-expense-add-btn:not(.wf-lg-add) {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 34px; padding: 4px 0; border: 0; background: none; box-shadow: none; color: var(--blue); font-size: 13px; font-weight: 700;
}
#page-inv-add-simple-review .form-group:has(> #simple-total-cost), .wfaf-row-inline {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 200px); align-items: center; column-gap: 12px; margin: 14px 0 0 !important;
}
#page-inv-add-simple-review .form-group:has(> #simple-total-cost) > label { margin: 0 !important; }
#page-inv-add-simple-review .form-group:has(> #simple-total-cost) > .qp-hint { display: none; }
#page-inv-add-simple-review .form-group:has(> #simple-purchase-owed) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 200px); align-items: center; column-gap: 12px; row-gap: 4px; }
#page-inv-add-simple-review .form-group:has(> #simple-purchase-owed) > label { margin: 0 !important; }
#page-inv-add-simple-review .form-group:has(> #simple-purchase-owed) > .qp-hint { grid-column: 1 / -1; margin: 0 !important; font-size: 12px; }
#page-inv-add-simple-review .qp-section-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }

/* How it was paid: one line = the full cost on one card; the card is a dropdown (name + last 4) */
.wf-how-paid .wf-ledger { padding: 0; border: 0; background: none; box-shadow: none; }
.wf-how-paid .wf-lg-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.wf-how-paid .wf-lg-head .wf-lg-amt { font-size: 16px; letter-spacing: 0; color: var(--white); text-transform: none; }
.wf-how-paid .runner-fund-row.wf-lr {
  display: grid; grid-template-columns: minmax(104px, 150px) minmax(0, 1fr) 40px; grid-template-areas: "amt how rm" "note note note" "paid paid paid"; gap: 8px 10px; align-items: center; margin: 0 0 10px; padding: 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel);
}
.wf-how-paid .runner-fund-row .rx-amount { grid-area: amt; min-width: 0; text-align: left; }
.wf-how-paid .runner-fund-row .wfsp-method { grid-area: how; display: flex !important; min-width: 0; margin: 0; }
.wf-how-paid .runner-fund-row .rf-note { grid-area: note; }
.wf-how-paid .runner-fund-row .runner-fund-remove { grid-area: rm; justify-self: end; }
.wf-how-paid .runner-fund-row .wf-lr-paid-date { grid-area: paid; display: flex; align-items: center; gap: 10px; min-width: 0; }
.wf-how-paid .wf-lr-paid-l { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.wf-how-paid .wf-lr-paid-date .qi-datepicker { flex: 1; min-width: 0; }
.wf-how-paid .runner-fund-row :is(.rx-amount, .rf-note) { min-height: var(--wfaf-h); border-radius: var(--wfaf-r); }

/* one fill, one border, everywhere (wins over the older per-component fills) */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select.filter-select:not(.wfsp-src):not(.wftp-src), textarea),
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) :is(.wftp-field, .wfsp-row, .wfsp-fld, .wfap-field, .qi-datepicker-trigger),
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid :is(.rx-amount, .rf-note) {
  background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: var(--wfaf-r) !important;
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group textarea { min-height: 96px; }
/* the payment lines (ID-level so the older ledger grid does not win) */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row.wf-lr {
  display: grid !important; grid-template-columns: minmax(104px, 150px) minmax(0, 1fr) 40px !important; grid-template-areas: "amt how rm" "note note note" "paid paid paid" !important; gap: 8px 10px; align-items: center; margin: 0 0 10px; padding: 12px;
}
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row > * { margin: 0; min-width: 0; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row .rx-amount { grid-area: amt; width: 100%; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row .wfsp-method { grid-area: how; width: 100%; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row .rf-note { grid-area: note; width: 100%; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row .runner-fund-remove { grid-area: rm; }
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row .wf-lr-paid-date { grid-area: paid; }
.wf-how-paid .wf-hp-foot .wf-lg-add { width: auto !important; flex: 0 0 auto; justify-content: flex-start; }
.wf-how-paid .wf-hp-remaining { flex: 0 1 auto; text-align: right; }
.wf-how-paid { margin-top: 18px; }

/* #inv-add-2 (detailed flow): Condition and Box & papers collapsed to 0px (a size container with no width of its own). They are normal fields. */
:is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .form-group.wfsp-has-row {
  container-type: normal !important; width: 100% !important; min-width: 0; justify-self: stretch !important; align-self: start !important; margin: 0;
}

/* #inv-add-2: every card is ONE two-column grid of the same fields (the older rule lost to a later flex rule) */
#page-inv-add-2 .inv-form-section > .card-body {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; align-content: start; align-items: start;
}
#page-inv-add-2 .inv-form-section > .card-body > .input-group { display: contents !important; margin: 0 !important; }
#page-inv-add-2 .inv-form-section > .card-body .form-group { margin: 0 !important; min-width: 0; }
#page-inv-add-2 .inv-form-section > .card-body > .input-group:last-child > .form-group:only-child,
#page-inv-add-2 .inv-form-section > .card-body > .form-group:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) {
  #page-inv-add-2 .inv-form-section > .card-body { grid-template-columns: minmax(0, 1fr); }
  #page-inv-add-2 .inv-form-section > .card-body > .input-group:last-child > .form-group:only-child { grid-column: auto; }
}

/* phone: the tap rows and payment lines fit a 390 screen */
@media (max-width: 560px) {
  :is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfsp-row,
  :is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wftp-field,
  :is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) :is(.wfsp-fld, .wfap-field) { padding: 0 10px; gap: 6px; }
  :is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfsp-row .wfsp-val { font-size: 14px; }
  :is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wfsp-row .wfsp-chev { width: 14px; height: 14px; }
  :is(#page-inv-add-simple-review, #page-inv-add-1, #page-inv-add-2, #page-inv-add-3, #page-inv-add-4, #page-inv-add-5) .wf-how-paid .runner-fund-row.wf-lr { grid-template-columns: minmax(0, 1fr) 40px !important; grid-template-areas: "amt rm" "how how" "note note" "paid paid" !important; }
  #page-inv-add-simple-review .form-group:has(> #simple-total-cost), #page-inv-add-simple-review .form-group:has(> #simple-purchase-owed) { grid-template-columns: minmax(0, 1fr) 140px; }
  #page-inv-add-simple-review .form-group:has(> #simple-total-cost) > label, #page-inv-add-simple-review .form-group:has(> #simple-purchase-owed) > label { white-space: normal !important; }
}

/* Review step, money card: four groups (Cost · Owed to the seller · How it was paid · Selling targets), one heading each, one divider between them */
#page-inv-add-simple-review .wfmg + .wfmg, #page-inv-add-simple-review #simple-cost-section + .qp-price-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
#page-inv-add-simple-review .wfmg .wf-how-paid { margin-top: 0; }
#page-inv-add-simple-review .wfmg .wf-how-paid .wf-lg-head { margin-bottom: 10px; }
#page-inv-add-simple-review .qp-price-section .qp-section-label { margin-top: 0; }
/* Payment lines: amount + card (with its last 4) + remove on the first row; note and paid-on date each get a full row, at every width, so nothing is cut off (the older 640px two-column override clipped the note placeholder) */
#page-inv-add-simple-review .wf-how-paid .runner-fund-row.wf-lr :is(.rf-note, .wf-lr-paid-date) { width: 100%; }
/* Payment lines: the remove button is a real target on desktop, and the date's clear (x) gets a 44px tap area on a phone (the glyph stays 22px) */
@media (min-width: 561px) { #page-inv-add-simple-review .wf-how-paid .runner-fund-row .runner-fund-remove { width: 36px; height: 36px; min-width: 36px; min-height: 36px; justify-self: end; } }
#page-inv-add-simple-review .wf-how-paid .qi-dp-clear { position: relative; }
@media (max-width: 560px) { #page-inv-add-simple-review .wf-how-paid .qi-dp-clear::after { content: ""; position: absolute; inset: -11px; } }

/* ── "How was it paid" under each expense (public/js/wf-addflow-pay.js) ──── */
.wf-xpay { margin: -2px 0 12px; padding: 8px 10px 4px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--blue, var(--gold)) 3%, transparent); }
.wf-xpay[hidden] { display: none; }
.wf-xpay-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.wf-xpay-st { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.wf-xpay-st.is-ok { color: var(--green); }
.wf-xpay-st.is-short { color: var(--amber, #b7791f); }
.wf-xpay-st.is-over { color: var(--red); }
.wf-xpay .rx-fnote, .wf-xpay .rf-note { display: none; }
.wf-xpay .wf-hp-foot { margin-top: 0; }

.wf-xpay.wf-how-paid { margin: -2px 0 12px; }
.wf-xpay.wf-how-paid .runner-fund-row.wf-lr { margin: 0 0 8px; padding: 8px; }
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-xpay.wf-how-paid .runner-fund-row.wf-lr { grid-template-areas: "amt how rm" !important; padding: 6px 0 0; border: 0; background: none; margin: 0 0 4px; }
@media (max-width: 560px) {
  :is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-xpay.wf-how-paid .runner-fund-row.wf-lr { grid-template-columns: minmax(0, 1fr) 40px !important; grid-template-areas: "amt rm" "how how" !important; }
}

/* ── 07d (Hal 2026-10-21): the watch's payments are ONE box (title + status on top, rows, "Paid another way too" inside); each expense and its payments are ONE card ── */
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid:not(.wf-xpay) .wf-ledger { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); }
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid:not(.wf-xpay) .wf-lg-head { align-items: center; margin: 0 0 10px; }
.wf-lg-head .wf-hp-remaining, .wf-xpay-st { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; text-align: right; }
.wf-hp-remaining.is-ok::before, .wf-xpay-st.is-ok::before { content: "\2713\00a0"; }
/* rows inside a box are flat, separated by a hairline: amount | method | paid on on one row, note and the card bill's due date under them */
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid .wf-ledger .runner-fund-row.wf-lr {
  display: grid !important; grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1fr) 36px !important; grid-template-areas: "amt how how rm" "paid paid note note" "due due due due" !important;
  gap: 8px 10px; align-items: center; margin: 0 0 10px; padding: 0 0 10px; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0; background: none !important;
}
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid .wf-ledger .runner-fund-row.wf-lr:last-of-type { border-bottom: 0 !important; margin-bottom: 4px; padding-bottom: 0; }
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid .wf-ledger .runner-fund-row .wfc-sub { grid-area: due; min-width: 0; }
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid .wf-ledger .runner-fund-row .wf-lr-paid-date { grid-area: paid; min-width: 0; display: flex; align-items: center; gap: 8px; }
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid .wf-ledger .runner-fund-row .wf-lr-paid-date .qi-datepicker { flex: 1; min-width: 0; }
.wf-how-paid .wf-hp-foot { margin-top: 6px; justify-content: flex-start; }
.wf-how-paid .wf-hp-foot .wf-lg-add.wf-paid-more, .wf-paid-more {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-height: 44px; padding: 0 18px; border: 1px solid var(--border) !important; border-radius: 12px;
  background: var(--bg-raised) !important; color: var(--blue) !important; font-size: 14px; font-weight: 700; cursor: pointer;
}
.wf-paid-more svg { width: 16px; height: 16px; flex: none; }
/* an expense: ONE card (its fields on top, then its payments, the button, the status) */
.wf-xcard { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); }
.wf-xcard .qp-expense-row { margin: 0 0 10px !important; }
.wf-xcard .wf-xpay.wf-how-paid { margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.wf-xcard .wf-xpay .wf-ledger { padding: 0; border: 0 !important; background: none !important; }
:is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-xpay.wf-how-paid .wf-ledger .runner-fund-row.wf-lr { grid-template-columns: 120px minmax(0, 1fr) 36px !important; grid-template-areas: "amt how rm" "due due due" !important; border-bottom: 0 !important; padding: 0; margin: 0 0 8px; }
.wf-xpay-h { align-items: center; }
@media (max-width: 560px) {
  :is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-how-paid .wf-ledger .runner-fund-row.wf-lr { grid-template-columns: minmax(0, 1fr) 40px !important; grid-template-areas: "amt rm" "how how" "paid paid" "note note" "due due" !important; }
  :is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-xpay.wf-how-paid .wf-ledger .runner-fund-row.wf-lr { grid-template-columns: minmax(0, 1fr) 40px !important; grid-template-areas: "amt rm" "how how" "due due" !important; }
  .wf-how-paid .wf-hp-foot .wf-lg-add.wf-paid-more, .wf-paid-more { width: 100% !important; }
  .wf-lg-head { gap: 8px; flex-wrap: wrap; }
}
/* the bulk deal's twin */
.bd-paid-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); color: var(--blue, var(--gold)); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.bd-paid-more svg { width: 16px; height: 16px; }
@media (max-width: 768px) { .bd-paid-more { width: 100%; } }
@media (max-width: 560px) {
  :is(#page-inv-add-simple-review, #page-inv-add-3, #page-inv-add-4) .wf-xcard .qp-expenses-list .qp-expense-row, .wf-xcard .qp-expense-row { grid-template-columns: minmax(0, 1fr) 40px !important; }
  .wf-xcard .qp-expense-row .qp-expense-amount { grid-column: 1; grid-row: 1; }
  .wf-xcard .qp-expense-row .qp-expense-remove-btn { grid-column: 2; grid-row: 1; }
  .wf-xcard .qp-expense-row .qp-expense-note-input { grid-column: 1 / -1; grid-row: 2; }
}

/* ── 07e (Hal 2026-10-21): the cost section follows the Purchase expenses pattern: a plain heading, then ONE card
   (What you paid, a divider, "How was the watch paid" + status, the rows, "Paid another way too"). One 16px rhythm between sections. ── */
#page-inv-add-simple-review .wfmg[data-grp="cost"] > .qp-section-label { margin: 0 0 10px; }
.wf-costcard { margin: 0 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); }
.wf-costcard > .form-group:first-child { margin: 0 0 12px !important; }
.wf-costcard > .form-group:first-child > label { display: block; margin: 0 0 6px; }
.wf-costcard .wf-how-paid { margin: 0 !important; padding: 12px 0 0; border: 0; border-top: 1px solid var(--border); }
.wf-costcard .wf-how-paid .wf-ledger { padding: 0 !important; border: 0 !important; background: none !important; }
.wf-costcard .wf-how-paid .wf-lg-head { margin: 0 0 12px; }
/* the expenses block and the total sit on the same 16px rhythm */
#page-inv-add-simple-review .wfmg[data-grp="cost"] > .form-group { margin-top: 0 !important; margin-bottom: 16px !important; }
#page-inv-add-simple-review .wfmg[data-grp="cost"] > .form-group > label:first-child { display: block; margin: 0 0 4px; }
#page-inv-add-simple-review .wfmg[data-grp="cost"] > .form-group:last-child { margin-bottom: 0 !important; }
#page-inv-add-simple-review .wfmg[data-grp="cost"] .wf-xcard { margin-bottom: 12px; }
#page-inv-add-simple-review .wfmg[data-grp="cost"] .qp-expense-add-btn:not(.wf-lg-add) { margin: 0 0 4px; }
/* the label of an inline-amount row: the AUTO chip sits right after the label with a gap, and wraps onto its own line with room, never cramped */
#page-inv-add-simple-review .form-group:has(> #simple-total-cost) > label,
#page-inv-add-simple-review .form-group:has(> #simple-purchase-owed) > label { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px; line-height: 1.3; }
#page-inv-add-simple-review .form-group:has(> #simple-total-cost) > label .qp-opt { margin: 0; }
.wf-costcard + .bd-ask { margin: -4px 0 16px; }

/* ── 07f (Hal 2026-10-21): the cost card and every expense card are ONE component, .wf-pcard: the same background, border, radius,
   padding, inner divider, input size and sub-heading ("How was the watch paid" / "How was it paid" + the status at the right). ── */
.wf-pcard { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); }
.wf-pcard > .form-group:first-child, .wf-pcard > .qp-expense-row { margin: 0 0 12px !important; }
.wf-pcard :is(input.mono, input.currency-input, .qp-expense-amount, .qp-expense-note-input, .rx-amount, .rf-note) { min-height: 44px; padding: 10px 14px; font-size: 15px; background: var(--bg-raised); }
.wf-pcard .wf-how-paid, .wf-pcard .wf-xpay.wf-how-paid { margin: 0 !important; padding: 12px 0 0 !important; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.wf-pcard .wf-ledger { padding: 0 !important; border: 0 !important; background: none !important; }
.wf-pcard-h, .wf-how-paid .wf-pcard-h { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px !important; padding: 0 !important; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.wf-pcard-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-pcard-h :is(.wf-hp-remaining, .wf-xpay-st) { flex: none; margin-left: auto; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; text-align: right; white-space: nowrap; }
.wf-pcard .wf-hp-foot { margin-top: 6px; }
@media (max-width: 560px) { .wf-pcard-h { gap: 6px; letter-spacing: .6px; font-size: 11px; } .wf-pcard-h :is(.wf-hp-remaining, .wf-xpay-st) { font-size: 12px; } }
@media (max-width: 560px) {
  /* "✓ Adds up to the cost" / "…to the expense" print as "✓ Adds up" on a phone, so the sub-heading and the status share one line in both cards */
  .wf-pcard-h [data-short] { font-size: 0; }
  .wf-pcard-h [data-short]::after { content: attr(data-short); font-size: 12px; }
  .wf-pcard-h .wf-hp-remaining.is-ok::before, .wf-pcard-h .wf-xpay-st.is-ok::before { font-size: 12px; }
}
.wf-pcard-h, .wf-how-paid .wf-pcard-h { border: 0 !important; }
.wf-pcard .wf-xpay.wf-ledger { border-top: 1px solid var(--border) !important; }

/* Cost reconcile (team switch costReconcile, 2026-10-23): the typed Watch cost row and the one sentence under the payment lines */
.wf-reconcile { margin: 8px 0 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.wf-reconcile[hidden] { display: none; }
.wf-reconcile.is-ok { color: var(--green); }
.wf-reconcile.is-ok::before { content: "\2713\00a0"; }
.wf-reconcile.is-short { color: var(--amber, #b7791f); }
.wf-reconcile.is-over { color: var(--red); }
.wf-how-paid .wf-hp-foot + .wf-reconcile { margin-top: 2px; }
.wf-lg-costin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 200px); align-items: center; column-gap: 12px; margin: 0 0 14px; }
.wf-lg-costin label { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.wf-ledger--edit .wf-lg-costin > label { grid-column: 1; grid-row: 1; }
.wf-ledger--edit .wf-lg-costin > input.currency-input { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; box-sizing: border-box; height: 42px; min-height: 42px; padding: 9px 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* Who bought this watch (2026-10-25): the buyer box gets the wider column beside Class so a full name + role chips fit on one line at desktop. */
@media (min-width: 641px) {
  #page-inv-add-3 #inv-add-acquired-by-group { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}