/* Money & Pricing modal (#modal-runner-costs): ONE vertical rhythm, switch costReconcile ON or OFF, phone and desktop (Hal 2026-10-23: "clean and open").
   24px between sections · 12px label to field · 16px between rows · 8px status line to what is above · column headers 12px · one right edge for values.
   Scoped to this modal only (Deal / Invoice cards and every other screen are untouched). Loads last, so it wins over the older per-feature rules. */
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; }

html body #modal-runner-costs .modal .modal-sub { margin-bottom: var(--space-4); }
/* group heads: What it cost / What you're asking */
html body #modal-runner-costs .modal .mp-group-head { margin: 0 0 var(--space-3); padding: 0 0 var(--space-2); }
html body #modal-runner-costs .modal .mp-col + .mp-col .mp-group-head, html body #modal-runner-costs .modal .mp-col > .mp-group-head[style] { margin-top: var(--space-6) !important; }
html body #modal-runner-costs .modal .mp-col:first-child > .mp-group-head { margin-top: 0 !important; }
html body #modal-runner-costs .modal .mp-landed { margin: 0 0 var(--space-3); padding: 0; }
html body #modal-runner-costs .modal .mp-prices { gap: var(--space-4); }
html body #modal-runner-costs .modal .mp-prices + .qp-hint { margin-top: var(--space-2); }

/* typed Watch cost row: label to field 12px, then 24px to the next section */
html body #modal-runner-costs .modal .wf-lg-costin { margin: 0 0 var(--space-6); column-gap: var(--space-3); }
/* section heads inside the ledger: How it was paid / Other costs on the watch */
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-head { margin: var(--space-6) 0 var(--space-3); padding: 0 0 var(--space-2); }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-head:first-child, html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-costin + .wf-lg-head { margin-top: 0; }
/* column headers AMOUNT / HOW / NOTE: readable, on the rows' own grid */
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-cols { margin: 0 0 var(--space-2); padding: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .6px; }
/* rows: 16px apart, 8px inside */
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row, html body #modal-runner-costs .modal .wf-ledger--edit .qp-expense-row { padding: 0; margin: 0 0 var(--space-4); gap: var(--space-2) var(--space-2); }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row .wf-lr-paid-date { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: center; font-size: 12px; }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row .wf-lr-paid-date > :first-child { min-width: 56px; white-space: nowrap; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-add { margin: 0; }
/* status line (amber): 8px under what is above; the next section head adds its own 24px */
html body #modal-runner-costs .modal .wf-reconcile { margin: var(--space-2) 0 0; }
/* totals block */
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-foot { margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-foot .wf-lg-total { padding: 0; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-foot .wf-lg-tally { padding: var(--space-3) 0 0; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-foot .wf-lg-owed { padding: var(--space-3) 0 0; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-sep { display: none; }
/* ONE right edge for every value: the digits of the paid / other-costs / total figures end where the typed cost digits end */
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-head .wf-lg-amt, html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-total .wf-lg-amt { padding-right: var(--space-3); }
html body #modal-runner-costs .modal .wf-lg-costin + .wf-lg-head .wf-lg-amt { padding-right: var(--space-3); }
/* ── round 4 (Hal): padding, empty headers, one label style, the remove control, header alignment, phone at 200% ── */
/* every text field in the modal has the same 12px inner padding as the money boxes (the method box keeps room for its caret) */
html body #modal-runner-costs .modal :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea) { padding-left: var(--space-3); padding-right: var(--space-3); box-sizing: border-box; }
html body #modal-runner-costs .modal .rf-method { padding-right: 28px; }
/* a section's column header only exists once the section has a row */
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-cols:has(+ div:empty) { display: none; }
/* ONE field-label style: Watch cost, Paid on */
html body #modal-runner-costs .modal .wf-lg-costin > label, html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-paid-l, html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-paid-date > :first-child { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--muted) !important; }
/* row layout (one grid for the headers and the rows) */
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row { display: grid; align-items: center; }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row .runner-fund-remove { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0; justify-self: end; align-self: center; display: inline-flex; align-items: center; justify-content: center; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-cols { column-gap: var(--space-2); }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-cols > span { padding-left: var(--space-3); text-align: left; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-cols > .wf-lr-c-amt { padding-left: 0; padding-right: var(--space-3); text-align: right; }   /* AMOUNT ends where the digits end */
/* the layout follows the modal's own width in rem (so it also follows the text size): narrow or large text = stacked rows, wide = one row with the column headers */
html body #modal-runner-costs .modal { container-type: inline-size; container-name: mrc; }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lr-cols { display: none; }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row { grid-template-columns: minmax(0, 1fr) 44px; column-gap: var(--space-2); row-gap: var(--space-2); }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row > .rx-amount { grid-column: 1; grid-row: 1; }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row > .runner-fund-remove { grid-column: 2; grid-row: 1; }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row > :is(.rf-method, .wfsp-method, .rx-method) { grid-column: 1 / -1; grid-row: 2; }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row > :is(.rf-note, .rx-fnote) { grid-column: 1 / -1; grid-row: 3; }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row > .wf-lr-paid-date { grid-column: 1 / -1; grid-row: 4; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
@container mrc (min-width: 35.5rem) {
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo { --wf-lr-cols: max(132px, 8rem) max(130px, 7rem) minmax(96px, 1fr) 44px; }
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo .wf-lr-cols:not(:has(+ div:empty)) { display: grid; }
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo .runner-fund-row { grid-template-columns: var(--wf-lr-cols); }
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo .runner-fund-row > .rx-amount { grid-column: 1; grid-row: 1; }
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo .runner-fund-row > :is(.rf-method, .wfsp-method, .rx-method) { grid-column: 2; grid-row: 1; }
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo .runner-fund-row > :is(.rf-note, .rx-fnote) { grid-column: 3; grid-row: 1; }
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo .runner-fund-row > .runner-fund-remove { grid-column: 4; grid-row: 1; }
  html body #modal-runner-costs .modal .wf-ledger--edit.is-solo .runner-fund-row > .wf-lr-paid-date { grid-column: 1 / 4; grid-row: 2; grid-template-columns: auto minmax(0, 1fr); }
}
/* touch: every control in the modal is a 44px target on a phone */
html body #modal-runner-costs .modal :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, .qi-datepicker-trigger, .wf-lg-add, .btn) { min-height: 44px; }
/* a section's total drops under its heading when the text is large, still on the one right edge */
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-3); }
html body #modal-runner-costs .modal .wf-ledger--edit .wf-lg-head .wf-lg-amt { margin-left: auto; text-align: right; }
/* ── round 5 (Hal 2026-10-24: "the padding on the lines and the lines in the background is just no good") ──
   Each payment / cost line is ONE card with 16px inside on every side and 12px between its fields. Every field inside the card uses
   the same field surface as the Method row and the Who pills, so no box blends into the card behind it. Phone and desktop, both themes. */
html body #modal-runner-costs .modal .wf-ledger--edit :is(.runner-fund-row, .qp-expense-row) { padding: var(--space-4); row-gap: var(--space-3); column-gap: var(--space-3); margin: 0 0 var(--space-3); box-sizing: border-box; }
html body #modal-runner-costs .modal .wf-ledger--edit :is(.runner-fund-row, .qp-expense-row) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .qi-datepicker-trigger) { background: var(--mp2-field, var(--bg-panel)) !important; border: 1px solid var(--border); }
html body #modal-runner-costs .modal .wf-ledger--edit .runner-fund-row > .wf-lr-paid-date { row-gap: var(--space-2); margin: 0; padding: 0; }
html body #modal-runner-costs .modal .wf-ledger--edit :is(.runner-fund-row, .qp-expense-row) input:focus { border-color: var(--blue); }
/* ── round 6 (Hal 2026-10-24: "a lot of duplicate numbers… there has to just be a cost, then the breakdown, then the summary at the bottom") ──
   With the Summary card present (new UI), each figure shows once: the typed Watch cost, the line-by-line breakdown, and the Summary.
   Gone: the section-head totals (How it was paid / Other costs), the ledger TOTAL row and the Landed cost line; the Summary shows them.
   The who-paid tally, Owed and the reconcile line stay. On a phone the Summary sits at the bottom (it was desktop only). */
html body #modal-runner-costs.mp2:has(.mp2-sum) .modal .wf-ledger--edit .wf-lg-head .wf-lg-amt,
html body #modal-runner-costs.mp2:has(.mp2-sum) .modal .wf-ledger--edit .wf-lg-foot .wf-lg-total,
html body #modal-runner-costs.mp2:has(.mp2-sum) .modal .mp-landed { display: none !important; }
html body #modal-runner-costs.mp2:has(.mp2-sum) .modal .wf-ledger--edit .wf-lg-foot .wf-lg-tally { padding-top: 0; }
@media (max-width: 900px) {
  html body #modal-runner-costs.mp2 .modal .mp2-sum { display: block; margin: var(--space-6) 0 0; padding: var(--space-4); border: 1px solid var(--mp2-line); border-radius: 14px; background: var(--mp2-tint); }
  html body #modal-runner-costs.mp2 .modal .mp2-sh { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); margin: 0 0 var(--space-2); }
  html body #modal-runner-costs.mp2 .modal .mp2-sh2 { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--mp2-line); }
  html body #modal-runner-costs.mp2 .modal .mp2-sr { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 6px 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  html body #modal-runner-costs.mp2 .modal .mp2-sr b { font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--white); font-variant-numeric: tabular-nums; font-family: var(--font-body); text-align: right; }
  html body #modal-runner-costs.mp2 .modal .mp2-sr.is-total { margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--mp2-line); }
  html body #modal-runner-costs.mp2 .modal .mp2-sr.is-total b { font-size: 22px; }
}
/* the Cost / Target strip at the top is gone when the full Summary is there (Hal 2026-10-24: "shouldn't be on top, should be on bottom") */
html body #modal-runner-costs.mp2:has(.mp2-sum.is-full) .modal .mp2-strip { display: none !important; }
/* summary rhythm, both widths: 16px between groups, a hairline above each group and above the total */
html body #modal-runner-costs.mp2 .modal .mp2-sum .mp2-sh2 { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--mp2-line); }
html body #modal-runner-costs.mp2 .modal .mp2-sum .mp2-sr.is-total { margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--mp2-line); }
/* no "TARGET" bubbles next to the two price labels (Hal 2026-10-24: "no need for the two target bubbles") */
html body #modal-runner-costs.mp2 .modal .mp-prices .qp-opt { display: none !important; }