/* Money & Pricing pop-up, new UI (Wave 2, opt-in twoTargetPrices ON only). EVERYTHING here hangs off #modal-runner-costs.mp2, a class public/js/money-pricing-v2.js adds only when the switch is ON, so with the switch OFF none of it matches anything. Same look as the Shipping round 3c pop-up (wide 1040 on a desktop, two columns, bold uppercase 700 / 1.4px labels, white rounded fields, ledger rows as cards) so the two merge cleanly. */ #modal-runner-costs.mp2 { --mp2-field: #fff; --mp2-tint: color-mix(in srgb, var(--blue) 9%, var(--bg-panel)); --mp2-line: color-mix(in srgb, var(--blue) 32%, var(--border)); } html[data-remodel-mode="night"] #modal-runner-costs.mp2, [data-theme="midnight-gold"] #modal-runner-costs.mp2 { --mp2-field: var(--bg-raised); } /* shell: wide on a desktop, a slim bottom sheet on a phone */ #modal-runner-costs.mp2 .modal.mp2-modal { width: min(1040px, 94vw) !important; max-width: 1040px !important; max-height: 92vh; border-radius: 18px; padding: 28px 32px 22px; } html.wf-ship-on #modal-runner-costs.mp2 .modal-title::before { content: none; } /* the Shipping build paints its own eyebrow; this one has a real element */ /* header: eyebrow, bold sans title, one line of context, round close */ #modal-runner-costs.mp2 .mp2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 16px; } #modal-runner-costs.mp2 .mp2-headtxt { min-width: 0; } #modal-runner-costs.mp2 .mp2-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } #modal-runner-costs.mp2 .modal-title { margin: 0 0 4px; font-family: var(--font-body) !important; font-size: 28px; font-weight: 700 !important; letter-spacing: -.4px; line-height: 1.15; } #modal-runner-costs.mp2 .modal-sub { margin: 0 !important; font-size: 14px; line-height: 1.45; color: var(--muted); } #modal-runner-costs.mp2 .mp2-x { flex: 0 0 40px; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--mp2-field); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #modal-runner-costs.mp2 .mp2-x:hover { color: var(--white); border-color: var(--blue); } /* coloured summary strip: Cost / Target retail / Target wholesale */ #modal-runner-costs.mp2 .mp2-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 22px; border: 1px solid var(--mp2-line); border-radius: 14px; background: var(--mp2-tint); overflow: hidden; } #modal-runner-costs.mp2 .mp2-strip.mp2-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #modal-runner-costs.mp2 .mp2-strip.mp2-n1 { grid-template-columns: minmax(0, 1fr); } #modal-runner-costs.mp2 .mp2-c { display: flex; flex-direction: column; gap: 3px; padding: 13px 20px; min-width: 0; border-left: 1px solid var(--mp2-line); } #modal-runner-costs.mp2 .mp2-c:first-child { border-left: 0; } #modal-runner-costs.mp2 .mp2-c span { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); } #modal-runner-costs.mp2 .mp2-c b { font-size: 22px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #modal-runner-costs.mp2 .mp2-c[data-k="retail"] b { color: var(--blue); } #modal-runner-costs.mp2 .mp2-c[data-k="wholesale"] b { color: var(--gold-bright); } /* Phone: three tiles do not fit a full amount ("$25,947.50" was cut to "$25,947..."), so Cost takes the first row and the two targets share the second. Amounts never ellipsise. */ @media (max-width: 520px) { #modal-runner-costs.mp2 .mp2-strip:not(.mp2-n1):not(.mp2-n2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #modal-runner-costs.mp2 .mp2-strip:not(.mp2-n1):not(.mp2-n2) .mp2-c:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--mp2-line); } #modal-runner-costs.mp2 .mp2-strip:not(.mp2-n1):not(.mp2-n2) .mp2-c:nth-child(2) { border-left: 0; } #modal-runner-costs.mp2 .mp2-c { padding: 12px 16px; } #modal-runner-costs.mp2 .mp2-c b { overflow: visible; text-overflow: clip; font-weight: 700; font-variant-numeric: tabular-nums; } } /* two columns (names shared with the Shipping build) */ #modal-runner-costs.mp2 .mp-cols { display: block; } @media (min-width: 901px) { #modal-runner-costs.mp2 .mp-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: start; } #modal-runner-costs.mp2 .mp-cols:not(:has(.mp-col + .mp-col:not(:empty))) { grid-template-columns: minmax(0, 1fr); } #modal-runner-costs.mp2 .mp-col > .mp-group-head { margin-top: 0 !important; } #modal-runner-costs.mp2 .mp-col:empty { display: none; } #modal-runner-costs.mp2 .mp-cols > .mp-col + .mp-col { position: sticky; top: 0; } #modal-runner-costs.mp2 .mp-prices { grid-template-columns: minmax(0, 1fr); gap: 14px; } } /* group heads + labels: bold uppercase 700, 1.4px */ #modal-runner-costs.mp2 .mp-group-head { padding: 10px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; color: var(--white); } #modal-runner-costs.mp2 .mp-group-head .mp-group-sub { letter-spacing: 0; } #modal-runner-costs.mp2 .qp-field label, #modal-runner-costs.mp2 .mp-prices label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } #modal-runner-costs.mp2 .qp-opt { font-size: 10px; font-weight: 700; letter-spacing: .8px; } #modal-runner-costs.mp2 .mp-landed { padding: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } #modal-runner-costs.mp2 .mp-landed b { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: 0; } #modal-runner-costs.mp2 .qp-hint { margin: 6px 0 0; font-size: 12.5px; } /* white rounded fields, one money box each */ #modal-runner-costs.mp2 .mp-prices input.currency-input, #modal-runner-costs.mp2 #qp-sold-price, #modal-runner-costs.mp2 .runner-fund-row input:not([type=checkbox]):not(.mp2-src), #modal-runner-costs.mp2 .mp-prices input.currency-input { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-body); text-align: right; width: 100%; } #modal-runner-costs.mp2 input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); } #modal-runner-costs.mp2 .mp2-src { display: none !important; } /* ledger: head rows, then each payment / cost is a card (amount + remove / who / how / note) */ #modal-runner-costs.mp2 .wf-ledger--edit { --wf-lr-cols: minmax(0, 1fr) 40px; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lr-cols { display: none; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-head { padding: 20px 0 8px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; color: var(--white); } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-head:first-child { padding-top: 2px; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-head .wf-lg-amt { font-size: 20px; font-weight: 700; color: var(--white); font-family: var(--font-body); font-variant-numeric: tabular-nums; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 10px; align-items: center; padding: 14px 14px 16px; margin: 10px 0 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-void); } /* order, not named areas: a hidden picker or a missing Who column then leaves no empty track behind */ /* the shared phone rules pin these to explicit grid rows/columns; reset them, the order below decides */ #modal-runner-costs.mp2 .wf-ledger--edit :is(.rf-amount, .rf-note, .runner-fund-remove, .wf-lr-who, .rf-split, .mp2-method) { grid-row: auto; grid-column: auto; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row > .wf-lr-who { order: 1; grid-column: 1 / -1; display: block; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row .wf-chip-av { display: none; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lr-who.runner-fundedby-toggle { background: none; border: 0; padding: 0; box-shadow: none; } #modal-runner-costs.mp2 .wf-ledger--edit input.rf-amount { order: 2; font-size: 17px; font-weight: 700; text-align: left; padding: 0 14px !important; font-variant-numeric: tabular-nums; } #modal-runner-costs.mp2 .wf-ledger--edit .mp2-method { order: 3; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-remove { order: 4; } #modal-runner-costs.mp2 .wf-ledger--edit .rf-note { order: 6; grid-column: 1 / -1; min-height: 48px; } /* desktop: one line per payment / cost (amount, how, note, remove), so a full ledger fits the pop-up */ @media (min-width: 601px) { #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row { grid-template-columns: minmax(104px, .8fr) minmax(158px, 1fr) minmax(0, 1.2fr) 40px; padding: 12px 14px; } #modal-runner-costs.mp2 .wf-ledger--edit .rf-note { order: 4; grid-column: auto; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-remove { order: 5; } #modal-runner-costs.mp2 .wf-ledger--edit .mp2-method { padding: 0 12px; } #modal-runner-costs.mp2 .wf-ledger--edit .mp2-m-v { text-align: left; } } #modal-runner-costs.mp2 .wf-ledger--edit .rf-split { order: 7; grid-column: 1 / -1; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-remove { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--mp2-field); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } #modal-runner-costs.mp2 .wf-ledger--edit .rfs-part { grid-template-columns: minmax(0, 1fr) 150px; } #modal-runner-costs.mp2 .wf-ledger--edit .rfs-derived { grid-column: 1 / -1; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-add { margin: 12px 0 0; width: 100%; justify-content: center; min-height: 46px; border-radius: 12px; font-weight: 700; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-foot { margin-top: 22px; padding-top: 14px; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-foot :is(.wf-lg-total, .wf-lg-owed, .wf-lg-tally) { padding-right: 0; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-total { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; color: var(--white); } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-total .wf-lg-amt { font-size: 22px; font-weight: 700; font-family: var(--font-body); } /* pills (Who, and the Method choices) */ #modal-runner-costs.mp2 .mp2-pills, #modal-runner-costs.mp2 .mp2-mopts { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; } #modal-runner-costs.mp2 .mp2-pill { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--mp2-field); color: var(--off-white, var(--white)); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } #modal-runner-costs.mp2 .mp2-pill:hover:not(:disabled) { border-color: var(--blue); } #modal-runner-costs.mp2 .mp2-pill.is-on { background: var(--blue); border-color: var(--blue); color: #fff; } #modal-runner-costs.mp2 .mp2-pill:disabled { opacity: .55; cursor: not-allowed; } /* Method: a tap row (label over value, chevron) that opens the Method sheet inside the pop-up, never a second dialog */ #modal-runner-costs.mp2 .mp2-method { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--mp2-field); color: var(--white); font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; } #modal-runner-costs.mp2 .mp2-method:hover:not(:disabled) { border-color: var(--blue); } #modal-runner-costs.mp2 .mp2-m-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #modal-runner-costs.mp2 .mp2-m-l { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } #modal-runner-costs.mp2 .mp2-m-v { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #modal-runner-costs.mp2 .mp2-m-v.is-empty { color: var(--muted); font-weight: 400; } #modal-runner-costs.mp2 .mp2-chev { flex: 0 0 auto; color: var(--muted); } /* the Method sheet: fills the pop-up, a grid of cards (Cash, Zelle, the team's cards), then Other / type... */ #modal-runner-costs.mp2 .modal.mp2-modal { position: relative; } #modal-runner-costs.mp2 .modal.mp2-picking { overflow: hidden; } #modal-runner-costs.mp2 .mp2-msheet { position: absolute; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 28px 32px 28px; background: var(--bg-panel); border-radius: inherit; display: flex; flex-direction: column; gap: 14px; } /* desktop: while the Method sheet is open the pop-up is ONLY the sheet, so it shrinks to the options (no white space under them) */ @media (min-width: 901px) { #modal-runner-costs.mp2 .modal.mp2-picking { min-height: 0 !important; height: auto !important; } #modal-runner-costs.mp2 .modal.mp2-picking > :not(.mp2-msheet) { display: none !important; } #modal-runner-costs.mp2 .modal.mp2-picking > .mp2-msheet { position: relative; inset: auto; } } #modal-runner-costs.mp2 .mp2-ms-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; } #modal-runner-costs.mp2 .mp2-ms-back { flex: 0 0 44px; width: 44px; height: 44px; } #modal-runner-costs.mp2 .mp2-ms-t { min-width: 0; } #modal-runner-costs.mp2 .mp2-ms-title { margin: 0; font-family: var(--font-body) !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.4px; line-height: 1.15; color: var(--white); } #modal-runner-costs.mp2 .mp2-ms-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); } #modal-runner-costs.mp2 .mp2-ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } #modal-runner-costs.mp2 .mp2-ms-lead:empty { display: none; } #modal-runner-costs.mp2 .mp2-sc { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; box-sizing: border-box; padding: 12px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--white); background: var(--mp2-field); border: 1px solid var(--border); border-radius: 14px; } #modal-runner-costs.mp2 .mp2-sc:hover { border-color: var(--blue); } #modal-runner-costs.mp2 .mp2-sc:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } #modal-runner-costs.mp2 .mp2-sc.is-sel { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--mp2-field)); } #modal-runner-costs.mp2 .mp2-sc.is-extra { border-style: dashed; } #modal-runner-costs.mp2 .mp2-sc-n { font-size: 15px; font-weight: 700; } #modal-runner-costs.mp2 .mp2-sc-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #modal-runner-costs.mp2 .mp2-sc-s { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #modal-runner-costs.mp2 .mp2-sc-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--blue) 14%, var(--bg-panel)); color: var(--blue); } #modal-runner-costs.mp2 .mp2-sc-t { margin-left: auto; color: var(--blue); display: inline-flex; } #modal-runner-costs.mp2 .mp2-ms-type { display: flex; gap: 10px; align-items: center; } #modal-runner-costs.mp2 .mp2-ms-type[hidden] { display: none; } #modal-runner-costs.mp2 .mp2-mcustom { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 14px; border-radius: 12px; background: var(--mp2-field); } #modal-runner-costs.mp2 .mp2-muse { min-height: 52px; padding: 0 24px; border-radius: 12px; font-weight: 700; } @media (max-width: 900px) { #modal-runner-costs.mp2 .mp2-msheet { padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); } #modal-runner-costs.mp2 .mp2-ms-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } #modal-runner-costs.mp2 .mp2-sc { min-height: 56px; } } /* actions */ #modal-runner-costs.mp2 .mp2-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px !important; padding-top: 16px; border-top: 1px solid var(--border); } #modal-runner-costs.mp2 .mp2-actions .btn { min-height: 48px; padding: 0 28px; border-radius: 12px; font-size: 14px; font-weight: 700; } /* phone: a slim sheet, one column, 44px+ targets, actions pinned */ @media (max-width: 900px) { #modal-runner-costs.mp2 .mp-col + .mp-col { margin-top: 8px; } } @media (max-width: 600px) { #modal-runner-costs.mp2 { align-items: flex-end; } #modal-runner-costs.mp2 .modal.mp2-modal { width: 100% !important; max-width: 100% !important; max-height: 94vh; padding: 20px 16px 0; border-radius: 22px 22px 0 0; } #modal-runner-costs.mp2 .modal-title { font-size: 24px; } #modal-runner-costs.mp2 .mp2-head { margin-bottom: 12px; } #modal-runner-costs.mp2 .mp2-strip { margin-bottom: 16px; } #modal-runner-costs.mp2 .mp2-c { padding: 10px 9px; } #modal-runner-costs.mp2 .mp2-c span { font-size: 9.5px; letter-spacing: .6px; } #modal-runner-costs.mp2 .mp2-c b { font-size: 16px; } #modal-runner-costs.mp2 .mp2-pill { padding: 0 14px; font-size: 13.5px; } #modal-runner-costs.mp2 .mp2-strip { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.25fr); } #modal-runner-costs.mp2 .mp2-strip.mp2-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row { grid-template-columns: minmax(0, 1fr) 40px; } #modal-runner-costs.mp2 .wf-ledger--edit .mp2-method { order: 4; grid-column: 1 / -1; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-remove { order: 2; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row > .wf-lr-who { order: 3; } #modal-runner-costs.mp2 .mp2-actions { position: sticky; bottom: 0; z-index: 4; margin: 16px -16px 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-panel); } #modal-runner-costs.mp2 .mp2-actions .btn { flex: 1 1 0; justify-content: center; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-foot { position: static; box-shadow: none; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-foot::after { display: none; } } /* short desktop screens (a 1440x900 laptop): trim the header and the group spacing so a full ledger shows without hunting */ @media (min-width: 601px) and (max-height: 960px) { #modal-runner-costs.mp2 .modal.mp2-modal { padding: 22px 28px 18px; } #modal-runner-costs.mp2 .mp2-head { margin-bottom: 12px; } #modal-runner-costs.mp2 .modal-title { font-size: 26px; } #modal-runner-costs.mp2 .mp2-strip { margin-bottom: 14px; } #modal-runner-costs.mp2 .mp2-c { padding: 9px 18px; } #modal-runner-costs.mp2 .mp2-c b { font-size: 20px; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-head { padding-top: 12px; } #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row { margin-top: 8px; padding: 9px 12px; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-add { margin-top: 8px; min-height: 40px; } #modal-runner-costs.mp2 .wf-ledger--edit .wf-lg-foot { margin-top: 12px; padding-top: 10px; } #modal-runner-costs.mp2 .mp2-actions { margin-top: 14px !important; padding-top: 12px; } } /* desktop Summary card under the targets (fills the price column; hidden on a phone, where the ledger foot already shows the total) */ #modal-runner-costs.mp2 .mp2-sum { display: none; } @media (min-width: 901px) { #modal-runner-costs.mp2 .mp2-sum { display: block; margin-top: 14px; padding: 12px 18px 8px; border: 1px solid var(--mp2-line); border-radius: 14px; background: var(--mp2-tint); } #modal-runner-costs.mp2 .mp2-sh { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); margin: 0 0 6px; } #modal-runner-costs.mp2 .mp2-sh2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mp2-line); } #modal-runner-costs.mp2 .mp2-sr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } #modal-runner-costs.mp2 .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); } #modal-runner-costs.mp2 .mp2-sr.is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--mp2-line); } #modal-runner-costs.mp2 .mp2-sr.is-total b { font-size: 22px; } } /* With Shipping on, its grid places Who in the "who" cell; the mp2 full-width Who column must not apply, or the (invisible) pill row spans the amount and swallows taps on a phone. */ html.wf-ship-on #modal-runner-costs.mp2 .wf-ledger--edit .runner-fund-row > .wf-lr-who { grid-column: auto; grid-area: who; order: 0; min-width: 0; } html.wf-ship-on #modal-runner-costs.mp2 .mp2-pills { width: max-content; max-width: 100%; }