/* New pickers (opt-in team switch `newPickers`) — public/js/wf-new-pickers.js.
   Every rule is keyed off html.wf-np-on, so with the switch OFF none of this applies. Theme tokens only (day, night, remodel).
   Hosts: the Edit-watch modal (#modal-edit-inventory) and the New-deal drawer (#deal-drawer-overlay), restyled whole. */

/* ── pills (a select with 6 options or fewer) ─────────────────────── */
select.np-src { display: none !important; }
html.wf-np-on .npills { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
html.wf-np-on .npill { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--off-white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
html.wf-np-on .npill:hover:not(:disabled) { border-color: var(--blue); }
html.wf-np-on .npill.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
html.wf-np-on .npill:disabled { opacity: .55; cursor: not-allowed; }
html.wf-np-on .npill:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── the summary strip (both hosts) ───────────────────────────────── */
html.wf-np-on .np-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
html.wf-np-on .np-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px 12px 18px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--border); overflow: hidden; }
html.wf-np-on .np-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--np-c, var(--accent)); }
html.wf-np-on .np-t-a { --np-c: var(--blue); }
html.wf-np-on .np-t-b { --np-c: var(--green); }
html.wf-np-on .np-t-c { --np-c: var(--accent); }
html.wf-np-on .np-t-d { --np-c: color-mix(in srgb, var(--red) 70%, var(--blue)); }
html.wf-np-on .np-tk { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
html.wf-np-on .np-tv { font-size: 16px; font-weight: 700; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Edit watch modal ─────────────────────────────────────────────── */
html.wf-np-on .edit-inv-modal > .modal { width: min(1180px, 96vw) !important; max-width: 96vw !important; border-radius: 18px !important; border: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; background: var(--bg-void) !important; box-shadow: 0 30px 80px rgba(8, 15, 30, .35) !important; }
html.wf-np-on .edit-inv-modal .edit-inv-header { padding: 28px 32px 22px !important; background: var(--bg-raised) !important; border-bottom: 1px solid var(--border) !important; }
html.wf-np-on .edit-inv-modal .edit-inv-header .modal-sub { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; color: var(--muted) !important; margin: 0 0 8px !important; }
html.wf-np-on .edit-inv-modal .edit-inv-header .modal-title { font-family: var(--font-body) !important; font-size: 32px !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: -.5px !important; line-height: 1.1 !important; }
html.wf-np-on .edit-inv-modal .edit-inv-body { padding: 22px 32px 26px !important; background: var(--bg-void); }
html.wf-np-on .edit-inv-modal details.edit-inv-section { background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; border-radius: 16px !important; margin: 0 0 16px !important; box-shadow: none !important; overflow: hidden; }
html.wf-np-on .edit-inv-modal details.edit-inv-section > summary.edit-inv-drawer-summary { display: flex; align-items: center !important; padding: 0 24px !important; min-height: 60px; background: none !important; }
html.wf-np-on .edit-inv-modal .edit-inv-drawer-title { line-height: 1.2; margin: 0; padding: 0; align-self: center; }
html.wf-np-on .edit-inv-modal .edit-inv-drawer-title { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase; color: var(--white) !important; }
html.wf-np-on .edit-inv-modal .edit-inv-drawer-title::before { display: none !important; }
html.wf-np-on .edit-inv-modal details.edit-inv-section[open] > summary.edit-inv-drawer-summary { border-bottom: 1px solid var(--border); }
html.wf-np-on .edit-inv-modal .edit-inv-drawer-body { padding: 22px 24px 8px !important; background: var(--bg-raised) !important; }
html.wf-np-on .edit-inv-modal .edit-inv-section .form-group > label { font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase; color: var(--off-white) !important; margin-bottom: 8px !important; font-family: var(--font-body) !important; }
html.wf-np-on .edit-inv-modal .edit-inv-section input[type="text"],
html.wf-np-on .edit-inv-modal .edit-inv-section input[type="number"],
html.wf-np-on .edit-inv-modal .edit-inv-section input[type="date"],
html.wf-np-on .edit-inv-modal .edit-inv-section textarea { background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; min-height: 48px; font-size: 15px; padding: 0 16px; box-sizing: border-box; }
html.wf-np-on .edit-inv-modal .edit-inv-section textarea { padding: 12px 16px; }
html.wf-np-on .edit-inv-modal .edit-inv-section .wfap-field { background: var(--bg-raised); border-radius: 12px; min-height: 48px; font-size: 15px; }
html.wf-np-on .edit-inv-modal .edit-inv-section .input-group { gap: 18px 20px; }
html.wf-np-on .edit-inv-modal .modal-footer { background: var(--bg-raised) !important; border-top: 1px solid var(--border) !important; padding: 16px 32px !important; }
html.wf-np-on .edit-inv-modal .modal-footer .btn { min-height: 46px; border-radius: 12px; }
/* the sheet step inside the modal keeps the modal's padding */
html.wf-np-on .edit-inv-modal > .modal.wfsp-picking { padding: 26px 32px !important; background: var(--bg-raised) !important; }
@media (min-width: 1000px) {
  html.wf-np-on .edit-inv-modal .edit-inv-section .input-group:not(.edit-inv-full) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  html.wf-np-on .edit-inv-modal > .modal { width: 100vw !important; max-width: 100vw !important; border-radius: 18px 18px 0 0 !important; }
  html.wf-np-on .edit-inv-modal .edit-inv-header { padding: 20px 18px 16px !important; }
  html.wf-np-on .edit-inv-modal .edit-inv-header .modal-title { font-size: 26px !important; }
  html.wf-np-on .edit-inv-modal .edit-inv-body { padding: 14px 12px 18px !important; }
  html.wf-np-on .edit-inv-modal .edit-inv-drawer-body { padding: 16px 16px 4px !important; }
  html.wf-np-on .edit-inv-modal details.edit-inv-section > summary.edit-inv-drawer-summary { padding: 0 16px !important; min-height: 54px; }
  html.wf-np-on .edit-inv-modal .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
  html.wf-np-on .edit-inv-modal > .modal.wfsp-picking { padding: 18px 16px !important; }
  html.wf-np-on .np-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  html.wf-np-on .np-tile { padding: 7px 10px 7px 14px; gap: 2px; }
  html.wf-np-on .np-tk { font-size: 10px; }
  html.wf-np-on .np-tv { font-size: 14px; }

}

/* ── New-deal drawer ──────────────────────────────────────────────── */
html.wf-np-on .deal-drawer { width: min(980px, 94vw); max-width: 94vw; border-radius: 18px; background: var(--bg-void); }
html.wf-np-on .deal-drawer-header { align-items: flex-start; padding: 26px 30px 6px; background: var(--bg-void); border-bottom: 0; }
html.wf-np-on .deal-drawer-header-text::before { content: "Deals \00a0\00b7\00a0 New"; display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
html.wf-np-on .deal-drawer-title { font-family: var(--font-body) !important; font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.5px; line-height: 1.1; color: var(--white); }
html.wf-np-on .deal-drawer-sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin-top: 6px; background: none; letter-spacing: 0; word-spacing: 0; }
html.wf-np-on .deal-drawer > .np-strip { margin: 12px 30px 4px; }
html.wf-np-on .deal-drawer-body { padding: 18px 30px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
html.wf-np-on .deal-drawer-body > .deal-drawer-section { margin: 0 !important; padding: 20px 22px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; min-width: 0; }
html.wf-np-on .deal-drawer-body > .deal-drawer-section:nth-child(n+3) { grid-column: 1 / -1; }
/* an open inline add form (Buyer or Watch quick-add) would stretch the card beside it into an empty box: both top cards take full rows instead (Hal 10-14) */
html.wf-np-on .deal-drawer-body:has(> .deal-drawer-section:nth-child(-n+2) .buyer-inline-add:not([style*="display:none"]):not([style*="display: none"])) > .deal-drawer-section:nth-child(-n+2) { grid-column: 1 / -1; }
html.wf-np-on .deal-drawer .deal-drawer-row { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; }
html.wf-np-on .deal-drawer-section-title { font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase; color: var(--white) !important; margin-bottom: 14px; }
html.wf-np-on .deal-drawer .buyer-select-header { margin-bottom: 8px; min-height: 0; }
html.wf-np-on .deal-drawer .buyer-select-header .deal-drawer-section-title { margin-bottom: 0 !important; }
html.wf-np-on .deal-drawer .form-group > label { font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase; color: var(--off-white) !important; margin-bottom: 8px; }
html.wf-np-on .deal-drawer .form-group input[type="text"],
html.wf-np-on .deal-drawer .form-group input[type="email"],
html.wf-np-on .deal-drawer .deal-watch-trigger,
html.wf-np-on .deal-drawer #deal-notes { background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; min-height: 48px; font-size: 15px; box-sizing: border-box; }
html.wf-np-on .deal-drawer .deal-watch-trigger { padding: 0 16px; }
html.wf-np-on .deal-drawer .wfap-field { background: var(--bg-raised); border-radius: 12px; min-height: 48px; font-size: 15px; }
html.wf-np-on .deal-drawer .deal-drawer-row { gap: 16px; }
html.wf-np-on .deal-drawer .stage-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
html.wf-np-on .deal-drawer .stage-pill { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 600; }
html.wf-np-on .deal-drawer-footer { padding: 14px 30px; background: var(--bg-raised); border-top: 1px solid var(--border); }
html.wf-np-on .deal-drawer-footer .btn { min-height: 46px; border-radius: 12px; }
/* the typeahead gives way to the sheet field once the picker has taken the hidden buyer select */
html.wf-np-on .deal-buyer-typeahead-wrap:has(~ select#deal-buyer-select[data-np-on]) { display: none; }
@media (max-width: 860px) {
  html.wf-np-on .deal-drawer-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  html.wf-np-on .deal-drawer { width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; }
  html.wf-np-on .deal-drawer-header { padding: 20px 18px 4px; }
  html.wf-np-on .deal-drawer-title { font-size: 26px !important; }
  html.wf-np-on .deal-drawer > .np-strip { margin: 10px 18px 2px; }
  html.wf-np-on .deal-drawer-body { padding: 12px 12px 18px; gap: 12px; }
  html.wf-np-on .deal-drawer-body > .deal-drawer-section { padding: 16px; }
  html.wf-np-on .deal-drawer-footer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  html.wf-np-on .deal-drawer .deal-drawer-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html.wf-np-on .deal-drawer .buyer-select-header { margin-bottom: 6px !important; }
  html.wf-np-on .deal-drawer.wfsp-picking { padding: 18px 16px; }
}

/* ── the sheet's eyebrow (the one rule the shared sheet shell takes from the Shipping CSS) ── */
html.wf-np-on .wfap-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
html.wf-np-on .wfsp-inline .wfap-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* the buyer sheet is a step INSIDE the drawer (no dialog on a dialog) */
html.wf-np-on .deal-drawer.wfsp-picking { display: flex; flex-direction: column; padding: 26px 30px; background: var(--bg-raised); }
html.wf-np-on .deal-drawer.wfsp-picking > :not(.wfsp-inline) { display: none !important; }
html.wf-np-on .deal-drawer-sub, html.wf-np-on .deal-drawer-header-text { background: none !important; box-shadow: none !important; }
/* stage pills match the other pills */
html.wf-np-on .deal-drawer .stage-pill { background: var(--bg-raised); border: 1px solid var(--border); color: var(--off-white); }
html.wf-np-on .deal-drawer .stage-pill:hover { border-color: var(--blue); }
html.wf-np-on .deal-drawer .stage-pill.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
html.wf-np-on .wfap-search input { appearance: none; -webkit-appearance: none; background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; min-height: 0 !important; }
html.wf-np-on .wfsp-inline .wfap-grid--lead { margin-bottom: 14px; }
@media (max-width: 720px) {
  html.wf-np-on .edit-inv-modal .edit-inv-section .input-group:has(.npills) { grid-template-columns: minmax(0, 1fr) !important; }
  html.wf-np-on .deal-drawer-body > .deal-drawer-section:nth-child(-n+2) { padding-top: 6px; }
}
html.wf-np-on .wfap-search { background: var(--bg-raised); border-radius: 12px; }
html.wf-np-on .wfsp-sub { font-size: 13px; color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
html.wf-np-on .wfsp-card.is-add .wfap-name { color: var(--blue); }
html.wf-np-on .edit-inv-modal .edit-inv-drawer-chevron { margin: 0 !important; align-self: center; }
html.wf-np-on .wfap-search input[type="search"], html.wf-np-on .wfap-search input[type="search"]:focus { appearance: none; -webkit-appearance: none; background: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0; width: auto; }
html.wf-np-on .edit-inv-modal .edit-inv-section .input-group { align-items: end; }

/* ── Deal detail: Ship option + Label status, and the Record / Edit payment method ───────────────────────────
   The invisible native select over a text + chevron is gone: Label status is pills, Ship option a white rounded sheet field. */
html.wf-np-on .wf-ship-pick.np-ship { display: block; min-width: 0; max-width: 100%; cursor: default; }
html.wf-np-on .wf-ship-pick.np-ship > .wf-ship-pick-text, html.wf-np-on .wf-ship-pick.np-ship > .wf-ship-pick-chev { display: none; }
html.wf-np-on .wf-ship-pick.np-ship:focus-within { outline: 0; }
html.wf-np-on .wf-ship-pick.np-ship .npills { justify-content: flex-end; }
html.wf-np-on .wf-ship-pick.np-ship .wfsp-fld { min-width: 240px; min-height: 48px; background: var(--bg-raised); border-radius: 12px; font-size: 15px; }
html.wf-np-on .wf-ship-row .deal-summary-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--off-white); font-family: var(--font-body); }
html.wf-np-on .wf-ship-row { align-items: center; padding-top: 10px; padding-bottom: 10px; }
html.wf-np-on .wf-ship-use { min-height: 44px; display: inline-flex; align-items: center; }
html.wf-np-on .payment-modal .deal-drawer-row { display: block; }
html.wf-np-on .payment-modal .deal-drawer-row > .form-group + .form-group { margin-top: 14px !important; }
html.wf-np-on .payment-modal .form-group > label { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--off-white); font-family: var(--font-body); margin-bottom: 8px; }
html.wf-np-on .payment-modal .form-group input[type="text"], html.wf-np-on .payment-modal .form-group input[type="date"] { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; min-height: 48px; font-size: 15px; }
html.wf-np-on .payment-modal .payment-modal-footer .btn { min-height: 46px; border-radius: 12px; }
@media (max-width: 720px) {
  html.wf-np-on .wf-ship-row { flex-wrap: wrap !important; gap: 8px 10px; }
  html.wf-np-on .wf-ship-row .deal-summary-value.wf-ship-value { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  html.wf-np-on .wf-ship-pick.np-ship { width: 100%; }
  html.wf-np-on .wf-ship-pick.np-ship .wfsp-fld { width: 100%; min-width: 0; }
  html.wf-np-on .wf-ship-pick.np-ship .npills { justify-content: flex-start; }
}

/* sheet title + section headers: bold Absans 700 (var(--font-body)) on every width (phone Edit watch headers match the runner edit-watch) */
html.wf-np-on .wfap-title { font-family: var(--font-body) !important; font-weight: 700 !important; }
html.wf-np-on .edit-inv-modal .edit-inv-drawer-title,
html.wf-np-on .edit-inv-modal details.edit-inv-section > summary .edit-inv-drawer-title { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; }
html.wf-np-on .edit-inv-modal details.edit-inv-section > summary.edit-inv-drawer-summary { letter-spacing: 1.4px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; }
/* Deal detail ship rows: label over value on every width (a 4-pill row does not fit beside its label in the half-width card) */
html.wf-np-on .wf-ship-row { flex-wrap: wrap !important; align-items: flex-start; gap: 8px 10px; }
html.wf-np-on .wf-ship-row .deal-summary-label { flex: 1 1 100%; }
html.wf-np-on .wf-ship-row .deal-summary-value.wf-ship-value { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
html.wf-np-on .wf-ship-pick.np-ship { width: 100%; }
html.wf-np-on .wf-ship-pick.np-ship .wfsp-fld { width: 100%; min-width: 0; }
html.wf-np-on .wf-ship-pick.np-ship .npills { justify-content: flex-start; }
html.wf-np-on .payment-modal .payment-modal-header .modal-title { font-family: var(--font-body) !important; font-size: 26px !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: -.4px !important; line-height: 1.15; color: var(--white); }
html.wf-np-on .payment-modal .payment-modal-header .modal-sub { font-family: var(--font-body); font-size: 13px; color: var(--muted); }

/* Record / Correct payment: the new pop-up look (eyebrow, bold title, coloured strip, white rounded fields, wide on desktop) */
html.wf-np-on #modal-record-payment .payment-modal, html.wf-np-on #modal-edit-payment .payment-modal { width: min(760px, 94vw) !important; max-width: 760px !important; border-radius: 20px !important; }
html.wf-np-on #modal-record-payment .payment-modal-header .modal-title::before, html.wf-np-on #modal-edit-payment .payment-modal-header .modal-title::before { content: 'Deal'; display: block; font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--off-white); margin-bottom: 6px; }
html.wf-np-on #modal-edit-payment .payment-modal-header .modal-title::before { content: 'Payment'; }
html.wf-np-on .payment-modal > .np-pay-strip { margin: 4px 26px 6px; }
html.wf-np-on .payment-modal .form-group input[type="text"], html.wf-np-on .payment-modal .form-group input[type="date"], html.wf-np-on .payment-modal .form-group textarea, html.wf-np-on .payment-modal .qi-datepicker-trigger { background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; min-height: 48px !important; font-size: 15px !important; box-shadow: none !important; }
html.wf-np-on .payment-modal #payment-amount, html.wf-np-on .payment-modal #edit-payment-amount { font-family: var(--font-body) !important; font-size: 24px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; min-height: 56px !important; }
@media (min-width: 721px) {
  html.wf-np-on #modal-record-payment .payment-modal-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }
  html.wf-np-on #modal-record-payment .payment-modal-body > #payment-needs-price, html.wf-np-on #modal-record-payment .payment-modal-body > .deal-drawer-row, html.wf-np-on #modal-record-payment .payment-modal-body > [role="alert"] { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  html.wf-np-on .payment-modal > .np-pay-strip { margin: 4px 18px 6px; }
}
html.wf-np-on .payment-modal > .np-pay-strip { margin-top: 14px; }
/* New deal: the Quick add buyer panel the sheet opens matches the drawer (bold uppercase title, white rounded fields, full-size buttons) */
html.wf-np-on #deal-drawer-overlay .buyer-inline-add { background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; padding: 18px 18px 16px !important; }
html.wf-np-on #deal-drawer-overlay .buyer-inline-add > div:first-child { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase; color: var(--white) !important; margin-bottom: 14px !important; }
html.wf-np-on #deal-drawer-overlay .buyer-inline-add .form-group > label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; }
html.wf-np-on #deal-drawer-overlay .buyer-inline-add input { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; min-height: 48px !important; font-size: 15px !important; }
html.wf-np-on #deal-drawer-overlay .buyer-inline-actions { display: flex; gap: 10px; margin-top: 6px; }
html.wf-np-on #deal-drawer-overlay .buyer-inline-actions .btn { min-height: 44px !important; padding: 0 18px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; }
html.wf-np-on #deal-drawer-overlay .buyer-inline-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
/* iPhone Safari zooms the page when a focused field is under 16px. Every text field these screens restyle stays at 16px on a phone. */
@media (max-width: 768px) {
  html.wf-np-on :is(.edit-inv-modal, .deal-drawer, .payment-modal, #deal-drawer-overlay, .modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { font-size: 16px !important; }
}

/* Record / Correct payment: the method sheet opens inside the pop-up, whose own padding is 0, so its eyebrow sat ~3px under the top edge. Same room as the Money & Pricing Method sheet (22px top, 16px sides). */
@media (max-width: 720px) {
  html.wf-np-on .modal.payment-modal.wfsp-picking { padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Correct Payment (Hal 10-18, board 14b "smashed together"): the same room as Record Payment. One clear row per fact:
   the strip, the note on what a correction does, Amount on its own row, then Method | Date, then Note | Why (one column on a phone).
   Labels sit 8px over their field and every row has 20px under it. Keyed off wf-np-on (the newPickers switch), so OFF = as before. */
html.wf-np-on #modal-edit-payment .payment-modal > .np-pay-strip { margin: 20px 26px 2px; }
html.wf-np-on #modal-edit-payment .payment-modal-body { padding: 18px 26px 24px; }
html.wf-np-on #modal-edit-payment #edit-payment-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 20px; align-items: start; }
html.wf-np-on #modal-edit-payment #edit-payment-form > .uflow-hint,
html.wf-np-on #modal-edit-payment #edit-payment-form > .uflow-hint + .form-group { grid-column: 1 / -1; }
html.wf-np-on #modal-edit-payment #edit-payment-form > .deal-drawer-row { display: contents; }
html.wf-np-on #modal-edit-payment #edit-payment-form .form-group { margin: 0 !important; min-width: 0; }
html.wf-np-on #modal-edit-payment #edit-payment-form .form-group > label { display: block; margin: 0 0 8px; font-family: var(--font-body); }
html.wf-np-on #modal-edit-payment #edit-payment-form > .uflow-hint { margin: 0 !important; padding: 12px 16px; border-radius: 12px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; }
html.wf-np-on #modal-edit-payment .payment-modal-footer { gap: 12px; padding: 16px 26px 20px; }
@media (max-width: 720px) {
  html.wf-np-on #modal-edit-payment .payment-modal > .np-pay-strip { margin: 16px 18px 2px; }
  html.wf-np-on #modal-edit-payment .payment-modal-body { padding: 16px 18px 22px; }
  html.wf-np-on #modal-edit-payment #edit-payment-form { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  html.wf-np-on #modal-edit-payment .payment-modal-footer { padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
html.wf-np-on .np-tq { font-size: 11px; font-weight: 600; color: var(--muted); }